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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        #081326 0%,
        #10284d 40%,
        #0b1730 100%
    );

    color:white;

    padding-top:120px;

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(
        circle at center,
        rgba(216,178,109,.20),
        transparent 50%
    );

    pointer-events:none;

}

/* ============================= */

.hero-grid{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    align-items:center;

    gap:60px;

}

/* ============================= */

.hero-tag{

    display:inline-block;

    color:var(--gold);

    font-weight:600;

    margin-bottom:25px;

    letter-spacing:1px;

}

/* ============================= */

.hero h1{

    margin-bottom:25px;

    color:white;

    line-height:1.2;

}

.hero h2{

    color:var(--gold);

    margin-bottom:20px;

}

.hero p{

    color:#d7dce6;

    max-width:560px;

    font-size:1.1rem;

    margin-bottom:40px;

}

/* ============================= */

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

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

.hero-books{

    display:flex;

    justify-content:center;

    align-items:flex-end;

    gap:15px;

    perspective:1200px;

}

.hero-books img{

    width:160px;

    transition:.4s;

    filter:
    drop-shadow(
        0 20px 30px rgba(0,0,0,.35)
    );

}

.hero-books img:nth-child(1){

    transform:
    rotateY(20deg)
    translateY(30px);

}

.hero-books img:nth-child(2){

    transform:
    rotateY(10deg);

}

.hero-books img:nth-child(3){

    transform:
    rotateY(-10deg);

}

.hero-books img:nth-child(4){

    transform:
    rotateY(-20deg)
    translateY(30px);

}

.hero-books img:hover{

    transform:
    translateY(-15px)
    scale(1.05);

}

/* ==================================
   FEATURED BOOKS
================================== */

.featured-books{

    background:#fafafa;

}

.book-grid{

    display:grid;

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

    gap:35px;

}

/* ============================= */

.book-card{

    background:white;

    border-radius:20px;

    padding:30px;

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

    transition:.3s;

}

.book-card:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 20px 40px rgba(0,0,0,.10);

}

/* ============================= */

.book-card img{

    height:280px;

    object-fit:contain;

    margin:auto;

    margin-bottom:25px;

}

.book-card h3{

    margin-bottom:15px;

}

.book-card p{

    min-height:80px;

}

/* ============================= */

.book-actions{

    margin-top:25px;

    display:flex;

    gap:10px;

}

/* ==================================
   AUTHOR
================================== */





.author-section{

    background:#fff;
}

.author-card{

    max-width:1100px;

    margin:auto;

    display:grid;

    grid-template-columns:
        320px 1fr;

    gap:60px;

    align-items:center;
}

.author-photo{

    text-align:center;
}

.author-photo img{

    width:100%;

    max-width:320px;

    height:auto;

    border-radius:20px;

    box-shadow:
        0 20px 40px rgba(0,0,0,.12);

}

.author-content h2{

    margin-top:15px;

    margin-bottom:20px;

}

.author-badges{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:25px;

}

.author-badges span{

    background:
        rgba(216,178,109,.15);

    color:#c99c4a;

    border:
        1px solid rgba(216,178,109,.3);

    padding:8px 16px;

    border-radius:50px;

    font-size:.9rem;

}

.author-content p{

    margin-bottom:15px;

    max-width:650px;
}




.author-image{

    position:relative;

    z-index:2;

}

.author-image img{

    width:100%;

    border-radius:25px;

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

}

.author-info{

    position:relative;

    z-index:2;

}

.author-info h2{

    font-size:3rem;

    color:white;

    margin-bottom:25px;

}

.author-title{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:25px;

}

.author-title span{

    background:
    rgba(216,178,109,.15);

    color:#e4c17e;

    border:
    1px solid rgba(216,178,109,.30);

    padding:
    8px 16px;

    border-radius:50px;

}



/* ============================= */

.author-content h2{

    margin-bottom:25px;

}


/* ==================================
   FEATURED BANNER
================================== */

.featured-book-banner{

    background:
    linear-gradient(
        135deg,
        #081326,
        #10284d
    );

    color:white;

}

.banner-grid{

    display:grid;

    grid-template-columns:
    400px 1fr;

    gap:70px;

    align-items:center;

}

.banner-book img{

    max-width:320px;

    margin:auto;

    filter:
    drop-shadow(
        0 20px 30px rgba(0,0,0,.5)
    );

}

.banner-content h2{

    margin-top:15px;

    margin-bottom:20px;

}

.banner-content p{

    color:#d8dbe4;

    margin-bottom:20px;

}

.banner-buttons{

    display:flex;

    gap:15px;

    margin-top:30px;

}



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

.book-category{

    background:#fafafa;

}

.category-grid{

    display:grid;

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

    gap:25px;

}

.category-card{

    background:white;

    border-radius:20px;

    padding:40px 20px;

    text-align:center;

    box-shadow:
    0 8px 25px rgba(0,0,0,.05);

    transition:.35s;

    border:
    1px solid transparent;

}

.category-card:hover{

    transform:
    translateY(-10px);

    border-color:
    rgba(216,178,109,.4);

    box-shadow:
    0 20px 40px rgba(0,0,0,.08);

}

.category-icon{

    font-size:3rem;

    margin-bottom:20px;

}

.category-card h3{

    font-size:1.15rem;

}

/* ==================================
   TIMELINE
================================== */

.latest-books{

    background:white;

}

.timeline{

    max-width:900px;

    margin:auto;

    position:relative;

}

.timeline::before{

    content:"";

    position:absolute;

    left:80px;

    top:0;

    bottom:0;

    width:2px;

    background:#e8e8e8;

}

/* ============================= */

.timeline-item{

    display:flex;

    margin-bottom:50px;

    position:relative;

}

.timeline-item:last-child{

    margin-bottom:0;

}

.timeline-year{

    width:80px;

    font-size:1.1rem;

    font-weight:700;

    color:var(--gold);

    flex-shrink:0;

}

.timeline-content{

    display:flex;

    gap:20px;

    margin-left:40px;

    background:#fafafa;

    padding:20px;

    border-radius:16px;

    flex:1;

    transition:.3s;

}

.timeline-content:hover{

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

}

.timeline-content img{

    width:70px;

    object-fit:contain;

}

.timeline-content h3{

    margin-bottom:8px;

}

/* ==================================
   INSTAGRAM
================================== */

.instagram-wall{

    background:#fafafa;

}

.instagram-grid{

    display:grid;

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

    gap:15px;

}

.instagram-grid img{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

    border-radius:15px;

    transition:.35s;

    cursor:pointer;

}

.instagram-grid img:hover{

    transform:
    scale(1.05);

}

.center-btn{

    text-align:center;

    margin-top:40px;

}

/* ==================================
   CTA SECTION
================================== */

.cta-section{

    position:relative;

    text-align:center;

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        #07101f,
        #10284d
    );

    color:white;

}

.cta-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(
        circle,
        rgba(216,178,109,.25),
        transparent 55%
    );

    pointer-events:none;

}

.cta-section h2{

    color:white;

    margin-bottom:20px;

    position:relative;

    z-index:2;

}

.cta-section p{

    color:#d8dce5;

    margin-bottom:35px;

    font-size:1.1rem;

    position:relative;

    z-index:2;

}

.cta-section .btn{

    position:relative;

    z-index:2;

}

/* ==================================
   SCROLL ANIMATION
================================== */

.fade-up{

    opacity:0;

    transform:
    translateY(40px);

    transition:
    all .8s ease;

}

.fade-up.active{

    opacity:1;

    transform:
    translateY(0);

}

/* ==================================
   HERO PARTICLE EFFECT
================================== */

.hero::after{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    radial-gradient(
        rgba(255,255,255,.12) 1px,
        transparent 1px
    );

    background-size:
    40px 40px;

    opacity:.4;

    pointer-events:none;

}

/* ==================================
   BOOK HOVER GLOW
================================== */

.book-card:hover img{

    filter:
    drop-shadow(
        0 15px 25px rgba(216,178,109,.35)
    );

}

/* ==================================
   FEATURED BOOK GLOW
================================== */

.banner-book img{

    animation:
    floatingBook 6s ease-in-out infinite;

}

@keyframes floatingBook{

    0%{

        transform:
        translateY(0px);

    }

    50%{

        transform:
        translateY(-15px);

    }

    100%{

        transform:
        translateY(0px);

    }

}

/* ==================================
   GOLD LINE
================================== */

.section-header h2{

    position:relative;

    display:inline-block;

    padding-bottom:12px;

}

.section-header h2::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    width:60px;

    height:3px;

    background:var(--gold);

    transform:
    translateX(-50%);

}

/* ==================================
   IMAGE RADIUS
================================== */

.instagram-grid img,
.book-card img,
.author-photo img,
.banner-book img{

    border-radius:12px;

}

/* ==================================
   RWD 1200
================================== */

@media(max-width:1200px){

    .hero-books img{

        width:130px;

    }

}

/* ==================================
   RWD 992
================================== */

@media(max-width:992px){

    .hero-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-content{

        order:2;

    }

    .hero-books{

        order:1;

        margin-bottom:40px;

    }

    .book-grid{

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

    }

    .category-grid{

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

    }

    .author-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .banner-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .banner-buttons{

        justify-content:center;

    }

    .instagram-grid{

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

    }

}

/* ==================================
   RWD 768
================================== */

@media(max-width:768px){

    .hero{

        min-height:auto;

        padding-top:140px;

        padding-bottom:80px;

    }

    .hero-books{

        flex-wrap:wrap;

    }

    .hero-books img{

        width:120px;

    }

    .book-grid{

        grid-template-columns:1fr;

    }

    .category-grid{

        grid-template-columns:1fr;

    }

    .timeline::before{

        display:none;

    }

    .timeline-item{

        flex-direction:column;

    }

    .timeline-content{

        margin-left:0;

        margin-top:10px;

    }

    .instagram-grid{

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

    }

    .banner-buttons{

        flex-direction:column;

    }

}

/* ==================================
   RWD 480
================================== */

@media(max-width:480px){

    .hero h1{

        font-size:2rem;

    }

    .hero p{

        font-size:1rem;

    }

    .hero-books img{

        width:90px;

    }

    .instagram-grid{

        gap:10px;

    }

    .timeline-content{

        flex-direction:column;

        text-align:center;

    }

}




/* ==========================
AUTHOR MOBILE FIX
========================== */

@media (max-width:768px){

    .author-card{

        grid-template-columns:1fr;

        gap:30px;

        text-align:center;

    }

    .author-photo{

        order:1;

    }

    .author-content{

        order:2;

    }

    .author-photo img{

        max-width:220px;

        width:70%;

        margin:auto;

        display:block;

    }

    .author-badges{

        justify-content:center;

    }

    .author-content p{

        max-width:100%;

    }

}