/* =========================
   TABLET
========================= */

@media(max-width:1000px){

    .hero-content{

        flex-direction:column;

        text-align:center;

    }

    .hero-text{

        width:100%;

    }

    .hero-text h1{

        font-size:65px;

    }

    .hero-image{

        width:70%;

    }

    .biography-wrapper{

        flex-direction:column;

    }

    .bio-image,
    .bio-content{

        width:100%;

    }

    .books-grid,
    .gallery-grid,
    .achievements-grid{

        grid-template-columns:1fr;

    }

    .footer-content{

        flex-direction:column;

    }

}


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

@media(max-width:992px){

    .hero-content{

        flex-direction:column;

        text-align:center;

    }

    .hero-image{

        width:80%;

    }

    .hero-text h1{

        font-size:72px;

    }

    .stats-grid{

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

    }

    .books-grid{

        grid-template-columns:1fr;

    }

    .gallery-grid{

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

    }

    .contact-info{

        flex-direction:column;

        gap:30px;

    }

}


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

@media(max-width:768px){

    .stats-grid{

        grid-template-columns:1fr;

    }

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .hero-text h1{

        font-size:56px;

    }

    .section-title h2{

        font-size:40px;

    }

    .contact-wrapper{

        padding:40px 25px;

    }

}


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

@media(max-width:600px){

    #header{

        padding:20px 0;

    }

    .logo span{

        font-size:25px;

    }

    .hero-text h1{

        font-size:48px;

    }

    .hero-text p{

        font-size:15px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    section{

        padding:60px 0;

    }

    .bio-content h2,
    #books h2,
    #achievements h2,
    .gallery-title h2{

        font-size:40px;

    }

    .contact-info{

        flex-direction:column;

        gap:35px;

    }

    .contact-wrapper h2{

        font-size:42px;

    }

}