/* ================= RESPONSIVE DESIGN ================= */


/* TABLET */

@media(max-width:900px){


.header{

padding:10px 20px;

}


.logo-area h2{

font-size:18px;

}


.hero{

padding:40px 20px;

text-align:center;

}


.hero h1{

font-size:30px;

}


.stats{

grid-template-columns:repeat(2,1fr);

}


}


/* MOBILE */

@media (max-width: 600px){

.book-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:8px;

padding:10px;

}

.book-card{

padding:6px;

border-radius:10px;

}

.book-card img{

width:100%;

height:90px;

object-fit:cover;

border-radius:8px;

}

.book-card h3{

font-size:10px;

margin-top:5px;

line-height:1.2;

}

.book-card p{

font-size:9px;

margin:2px 0;

}

.book-card span{

font-size:8px;

padding:2px 5px;

}

.book-actions{

display:none;

}

}


/* HEADER */


.header{

height:auto;

}


.logo-area img{

width:45px;

height:45px;

}


.logo-area h2{

font-size:14px;

}



/* HERO */


.hero{

padding:30px 15px;

}


.hero h1{

font-size:24px;

}


.hero p{

font-size:14px;

}



/* BUTTONS */


.hero-buttons{

flex-direction:column;

gap:10px;

}



.hero-buttons a{

width:100%;

text-align:center;

}



/* BOOK GRID */


.book-grid{

grid-template-columns:repeat(2,1fr);

gap:10px;

}



/* AUDIO GRID */


.audio-grid{

grid-template-columns:repeat(2,1fr);

gap:10px;

}



/* SEARCH */


.search-box input{

width:90%;

font-size:14px;

}



/* DASHBOARD */


.stats{

grid-template-columns:repeat(2,1fr);

gap:10px;

}


.stat-card h2{

font-size:25px;

}


/* TABLE */


.admin-table{

display:block;

overflow-x:auto;

}


/* FOOTER */


.footer-container{

grid-template-columns:1fr;

}