/* =========================
   HOME PAGE STYLE
========================= */


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: Arial, sans-serif;
}



body{

    background:#f5f7fb;
    color:#222;

}



/* ================= HEADER ================= */

.header{

width:100%;

display:flex;

align-items:center;

justify-content:space-between;

padding:12px 35px;

background:#ffffff;

position:sticky;

top:0;

z-index:1000;

box-shadow:0 4px 18px rgba(0,0,0,0.08);

}


/* LOGO AREA */

.logo-area{

display:flex;

align-items:center;

gap:12px;

}


.logo-area img{

width:55px;

height:55px;

border-radius:50%;

object-fit:cover;

}


.logo-area h2{

font-size:18px;

font-weight:800;

color:#0b8f45;

max-width:230px;

line-height:1.3;

}



/* NAVIGATION */

#navMenu{

display:flex;

align-items:center;

gap:8px;

}


#navMenu a{

text-decoration:none;

color:#333;

font-size:14px;

font-weight:600;

padding:10px 12px;

border-radius:25px;

transition:.3s;

}


#navMenu a:hover{

background:#eaf8ef;

color:#0b8f45;

}



/* LOGIN REGISTER */

#authArea{

display:flex;

gap:10px;

margin-left:10px;

}



#authArea a:first-child{

background:#0b8f45;

color:white !important;

}



#authArea a:last-child{

border:2px solid #0b8f45;

color:#0b8f45 !important;

}



#authArea a{

padding:9px 15px !important;

}



/* HAMBURGER */

.hamburger{

display:none;

font-size:30px;

color:#0b8f45;

cursor:pointer;

}





/* ================= MOBILE ================= */


@media(max-width:900px){


.header{

padding:10px 15px;

}


.logo-area img{

width:45px;

height:45px;

}


.logo-area h2{

font-size:13px;

max-width:160px;

}



#navMenu{

position:absolute;

top:70px;

left:0;

width:100%;

background:white;

display:none;

flex-direction:column;

padding:20px;

box-shadow:0 10px 25px rgba(0,0,0,.1);

}


#navMenu.active{

display:flex;

}



#navMenu a{

width:100%;

text-align:left;

}



#authArea{

flex-direction:column;

width:100%;

margin:0;

}



.hamburger{

display:block;

}


}




/* ================= HERO ================= */

/* ================= HERO SECTION ================= */

.hero{

max-width:1200px;

margin:25px auto;

padding:35px 40px;

display:flex;

align-items:center;

justify-content:space-between;

gap:35px;

background:linear-gradient(135deg,#0b8f45,#14b85e);

border-radius:20px;

color:#fff;

overflow:hidden;

}

.hero-content{

flex:1;

}

.hero-content h1{

font-size:38px;

font-weight:700;

margin-bottom:15px;

line-height:1.3;

}

.hero-content p{

font-size:17px;

line-height:1.7;

margin-bottom:20px;

opacity:.95;

}

.hero-buttons{

display:flex;

gap:15px;

flex-wrap:wrap;

}

.hero-buttons a{

padding:12px 22px;

background:#fff;

color:#0b8f45;

border-radius:10px;

text-decoration:none;

font-weight:bold;

transition:.3s;

}

.hero-buttons a:hover{

transform:translateY(-3px);

}

.hero-image{

flex:1;

text-align:right;

}

.hero-image img{

width:280px;

max-width:100%;

}

/* Mobile */

@media(max-width:768px){

.hero{

flex-direction:column;

text-align:center;

padding:25px 20px;

}

.hero-content h1{

font-size:28px;

}

.hero-content p{

font-size:15px;

}

.hero-image{

text-align:center;

}

.hero-image img{

width:180px;

}

.hero-buttons{

justify-content:center;

}

}



/* LOGO */

.hero-logo{

width:260px;

height:260px;

object-fit:cover;

border-radius:30px;

background:white;

padding:15px;

box-shadow:0 15px 35px rgba(0,0,0,.25);

order:2;

}





/* TEXT */

.hero h1{

font-size:42px;

font-weight:900;

line-height:1.2;

margin:0 0 20px;

max-width:650px;

}



.hero p{

font-size:18px;

line-height:1.7;

max-width:600px;

margin-bottom:30px;

opacity:.95;

}



/* BUTTONS */

.hero-buttons{

display:flex;

gap:15px;

flex-wrap:wrap;

}



.hero-buttons a{

text-decoration:none;

padding:13px 25px;

border-radius:30px;

font-weight:700;

font-size:15px;

transition:.3s;

background:white;

color:#0b8f45;

box-shadow:0 8px 20px rgba(0,0,0,.15);

}



.hero-buttons a:hover{

transform:translateY(-5px);

background:#f0fff5;

}





/* DECORATION */

.hero::after{

content:"";

position:absolute;

width:350px;

height:350px;

background:rgba(255,255,255,.08);

border-radius:50%;

right:-120px;

bottom:-120px;

}




/* MOBILE */

@media(max-width:768px){


.hero{

flex-direction:column;

text-align:center;

padding:35px 20px;

}



.hero-logo{

order:0;

width:170px;

height:170px;

}



.hero h1{

font-size:28px;

}



.hero p{

font-size:15px;

}



.hero-buttons{

justify-content:center;

}



.hero-buttons a{

font-size:12px;

padding:10px 15px;

}

}



/* ================= MOBILE ================= */


@media(max-width:768px){


.hero{

flex-direction:column;

text-align:center;

padding:35px 20px;

margin:15px;

}



.hero-content h1{

font-size:30px;

}



.hero-content p{

font-size:15px;

}



.hero-buttons{

justify-content:center;

}



.hero-image img{

width:230px;

}


}

/* SEARCH */

.search-box{

    padding:30px;
    text-align:center;

}



.search-box input{

    width:70%;
    max-width:600px;

    padding:15px;

    border-radius:30px;

    border:1px solid #ccc;

    font-size:16px;

}







/* BOOK GRID */

#books{

    padding:40px;

}



#books h2{

    text-align:center;
    margin-bottom:30px;

}




/* ===================== BOOK GRID ===================== */

.book-grid{

display:grid;

grid-template-columns:repeat(6,minmax(0,1fr));

gap:18px;

margin-top:20px;

padding:0;

}


/* ===================== BOOK CARD ===================== */

.book-card{

background:#fff;

border-radius:18px;

overflow:hidden;

box-shadow:0 4px 15px rgba(0,0,0,.08);

transition:.3s ease;

display:flex;

flex-direction:column;

height:100%;

}


.book-card:hover{

transform:translateY(-5px);

box-shadow:0 12px 28px rgba(0,0,0,.15);

}


/* ===================== COVER ===================== */

.book-card img{

width:100%;

aspect-ratio:3/4;

object-fit:cover;

display:block;

}


/* ===================== BODY ===================== */

.book-card h3{

font-size:15px;

font-weight:700;

margin:10px 10px 5px;

line-height:1.35;

color:#222;

height:40px;

overflow:hidden;

}


.book-card p{

font-size:12px;

color:#666;

margin:0 10px 8px;

}


/* ===================== CATEGORY ===================== */

.book-card span{

display:inline-block;

margin:0 10px 10px;

padding:4px 10px;

border-radius:30px;

background:#eef8f1;

color:#0b8f45;

font-size:11px;

font-weight:600;

}


/* ===================== ACTIONS ===================== */

.book-actions{

margin-top:auto;

padding:10px;

display:flex;

flex-direction:column;

gap:8px;

}


.book-actions a{

background:#0b8f45;

color:#fff;

text-decoration:none;

padding:9px;

border-radius:10px;

text-align:center;

font-size:13px;

font-weight:600;

transition:.3s;

}


.book-actions a:hover{

background:#08773a;

}


.favorite-btn{

background:#fff3f3;

color:#d63031;

border:none;

padding:9px;

border-radius:10px;

cursor:pointer;

font-size:13px;

font-weight:600;

transition:.3s;

}


.favorite-btn:hover{

background:#ffdede;

}


/* ===================== RATING ===================== */

.rating{

display:flex;

justify-content:center;

gap:3px;

margin-top:5px;

}


.rating button{

border:none;

background:none;

cursor:pointer;

font-size:15px;

transition:.2s;

}


.rating button:hover{

transform:scale(1.2);

}


/* ===================== MOBILE ===================== */

@media (max-width:600px){

.book-grid{

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

gap:8px;

}


.book-card{

border-radius:10px;

}


.book-card img{

aspect-ratio:3/4;

}


.book-card h3{

font-size:10px;

height:28px;

margin:5px;

}


.book-card p,

.book-card span{

display:none;

}


.book-actions{

padding:5px;

}


.book-actions a{

font-size:10px;

padding:5px;

}


.favorite-btn{

display:none;

}


.rating{

display:none;

}

}



footer{

    background:#0b8f45;

    color:white;

    text-align:center;

    padding:20px;

}





/* MOBILE */

@media(max-width:768px){


.header{

    padding:15px 20px;

}



nav{

    position:absolute;

    top:80px;

    left:0;

    width:100%;

    background:#0b8f45;

    flex-direction:column;

    text-align:center;

    display:none;

    padding:20px;

}



nav.active{

    display:flex;

}



.hamburger{

    display:block;

}



.hero h1{

    font-size:28px;

}



.search-box input{

    width:90%;

}



#books{

    padding:20px;

}



}

.donate-box{

    padding:50px 20px;
    text-align:center;

}


.donation-card{

    background:white;

    max-width:500px;

    margin:25px auto;

    padding:30px;

    border-radius:20px;

    box-shadow:0 5px 20px rgba(0,0,0,.1);

    text-align:left;

}


.donation-card h2{

    color:#0b8f45;

    margin-bottom:20px;

}


.donation-card p{

    margin:15px 0;

    line-height:1.6;

}

.favorite-btn{

background:#ff4081;

color:white;

border:none;

padding:8px 15px;

border-radius:20px;

cursor:pointer;

margin-top:10px;

}

.favorite-btn:hover{

background:#e91e63;

}

.new-release-section{

margin:50px 0;

}

.new-release-section h2{

color:#0b8f45;

margin-bottom:20px;

font-size:28px;

}

.rating{

margin-top:10px;

display:flex;

flex-wrap:wrap;

gap:5px;

}

.rating button{

border:none;

background:#fff3cd;

padding:5px 8px;

border-radius:5px;

cursor:pointer;

font-size:14px;

}

.rating button:hover{

background:#ffd54f;

}

.top-rated-section{

margin:50px 0;

}

.top-rated-section h2{

font-size:30px;

color:#0b8f45;

margin-bottom:20px;

}

@media(max-width:768px){

.header{

padding:10px 15px;

}


.logo-area h2{

font-size:14px;

}


.logo-area img{

width:42px;

height:42px;

}


#navMenu{

position:absolute;

top:70px;

left:0;

width:100%;

background:white;

display:none;

flex-direction:column;

padding:20px;

box-shadow:0 10px 25px rgba(0,0,0,.08);

}


#navMenu.active{

display:flex;

}


#navMenu a{

width:100%;

text-align:left;

}


.hamburger{

display:block;

}

}