/*==========================================================
    RESPONSIVE.CSS
    VAASTUSHALA
==========================================================*/


/*==========================================================
    TABLETS (1024px)
==========================================================*/

@media screen and (max-width:1024px){

    .container{
        width:92%;
    }

    h1{
        font-size:56px;
    }

    h2{
        font-size:42px;
    }

    section{
        padding:90px 0;
    }

    .hero-grid,
    .about-grid,
    .podcast-grid,
    .contact-grid,
    .centre-grid{
        grid-template-columns:1fr;
        gap:60px;
    }

    .platform-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .why-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .books-grid{
        grid-template-columns:1fr;
    }

    .essential-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .footer-grid{
        grid-template-columns:repeat(2,1fr);
    }

}


/*==========================================================
    MOBILE (768px)
==========================================================*/

@media screen and (max-width:768px){

    .container{
        width:94%;
    }

    section{
        padding:80px 0;
    }
    .nav-btn{
    display:none !important;
}

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

    .nav-container{

        display:flex;
        align-items:center;
        justify-content:space-between;

        min-height:80px;

        position:relative;
    }

    .logo img{

        height:50px;
        width:auto;

    }

    .menu-toggle{

        width:44px;
        height:44px;

        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;

        gap:6px;

        background:none;
        border:none;

        cursor:pointer;

        padding:0;
    }

    .menu-toggle span{

        width:28px;
        height:3px;

        border-radius:10px;

        background:#4A2E1F;

        transition:.3s;

    }

    .menu-toggle.active span:nth-child(1){

        transform:translateY(9px) rotate(45deg);

    }

    .menu-toggle.active span:nth-child(2){

        opacity:0;

    }

    .menu-toggle.active span:nth-child(3){

        transform:translateY(-9px) rotate(-45deg);

    }

    .navbar{

        display:none;

    }

    .navbar.active{

        display:block;

        position:absolute;

        top:80px;
        left:0;

        width:100%;

        background:#ffffff;

        border-top:1px solid rgba(0,0,0,.06);

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

        z-index:999;

    }

    .navbar ul{

        display:flex;
        flex-direction:column;
        align-items:center;

        padding:30px;

        gap:20px;

    }

    .navbar a{

        display:block;

        width:100%;

        text-align:center;

        padding:12px;

        font-size:18px;

    }

    .nav-btn{

        display:none;

    }

    /*==================================
    Typography
==================================*/

.hero h1{

    font-size:42px;

    line-height:1.15;

    margin-bottom:20px;

}

.hero p{

    font-size:17px;

    line-height:1.8;

}

.section-heading h2{

    font-size:34px;

    line-height:1.25;

}

.section-heading p{

    font-size:16px;

    line-height:1.8;

}

.contact h2,
.books h2,
.about h2,
.podcast h2,
.cta h2{

    font-size:34px;

    line-height:1.25;

}

    /*==================================
        GRID LAYOUT
    ==================================*/

    .hero-grid,
    .about-grid,
    .podcast-grid,
    .contact-grid,
    .centre-grid{

        display:grid;

        grid-template-columns:1fr;

        gap:50px;

    }

    .platform-grid,
    .books-grid,
    .why-grid,
    .essential-grid,
    .footer-grid{

        grid-template-columns:1fr;

    }

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

    .hero{

        text-align:center;

    }

    .hero-content{

        order:1;

    }

    .hero-image{

        order:2;

        margin-top:40px;

    }

    .hero-image img{

        width:100%;

        max-width:360px;

        height:auto;

        display:block;

        margin:auto;

    }

    .hero-content p{

        max-width:95%;

        margin:20px auto 30px;

    }

    .hero-buttons{

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:15px;

    }

    /*==================================
        CONTENT ALIGNMENT
    ==================================*/

    .about-content,
    .podcast-content,
    .section-heading{

        text-align:center;

    }

    .cta-buttons,
    .contact-actions,
    .centre-buttons{

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:15px;

    }

    /*==================================
        BUTTONS
    ==================================*/

    .btn-primary,
    .btn-secondary{

        width:100%;

        max-width:320px;

        min-height:54px;

        display:flex;

        align-items:center;

        justify-content:center;

        border-radius:14px;

        text-align:center;

        font-size:16px;

        font-weight:600;

    }

    /*==================================
        IMAGES
    ==================================*/

    .about-image img{

        width:100%;

        max-width:380px;

        margin:auto;

    }

    /*==================================
        CARDS
    ==================================*/

    .platform-card,
    .book-card,
    .why-card,
    .essential-card,
    .centre-card,
    .podcast-card,
    .contact-form{

        padding:32px;

        border-radius:18px;

    }

    .cta-box{

        padding:45px 25px;

        text-align:center;

    }

    /*==================================
        CONTACT FORM
    ==================================*/

    .contact-form input,
    .contact-form textarea{

        width:100%;

        padding:15px 18px;

        font-size:16px;

        border-radius:12px;

    }

}


.hero h1{

    font-size:34px;

}

.section-heading h2{

    font-size:28px;

}

.hero p,
.section-heading p{

    font-size:15px;

}

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

.header{

    position:sticky;

    top:0;

    z-index:1000;

    transition:.35s ease;

}

.header.scrolled{

    background:#ffffff;

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

    backdrop-filter:blur(12px);

}