@media(max-width:992px){

.nav{

display:none;

}

.track-btn{

display:none;

}

.header .container{

justify-content:center;

}

.logo img{

height:52px;

}

}

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

@media(max-width:992px){

.hero{

padding-top:140px;

padding-bottom:80px;

}

.hero-container{

grid-template-columns:1fr;

text-align:center;

gap:50px;

}

.hero h1{

font-size:44px;

}

.hero h2{

font-size:22px;

}

.hero p{

margin:auto;

margin-bottom:35px;

}

.hero-buttons{

justify-content:center;

}

.hero-image{

order:-1;

}

.hero-image img{

max-width:360px;

}

}

@media(max-width:576px){

.hero h1{

font-size:34px;

}

.hero h2{

font-size:18px;

}

.hero p{

font-size:15px;

}

.primary-btn,

.secondary-btn{

width:100%;

text-align:center;

}

}

/*====================================
LAUNCH
====================================*/

@media(max-width:992px){

.launch-grid{

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

}

.experience-grid{

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

}

.section-title h2{

font-size:34px;

}

}

@media (max-width:768px){

    /* =========================
       Header
    ========================= */

    .header-container{
        height:80px;
    }

    .logo{
        width:50px;
        height:50px;
    }

    .brand{
        gap:10px;
    }

    .brand-text h2{
        font-size:22px;
    }

    .brand-text span{
        font-size:12px;
    }

    /* =========================
       Hero
    ========================= */

    .hero{
        min-height:auto;
        padding:110px 0 60px;
    }

    .hero-container{
        grid-template-columns:1fr;
        gap:35px;
    }

    .hero-image{
        order:1;
        justify-content:center;
    }

    .hero-image img{
        width:100%;
        max-width:100%;
        animation:none;
    }

    .hero-content{
        order:2;
        align-items:center;
        text-align:center;
    }

    .badge{
        font-size:14px;
        padding:10px 18px;
    }

    .hero h1{
        font-size:44px;
        margin-bottom:12px;
    }

    .hero h2{
        font-size:22px;
        line-height:1.5;
        margin-bottom:20px;
    }

    .hero p{
        font-size:16px;
        line-height:1.8;
        max-width:100%;
        margin-bottom:30px;
    }

    .hero-buttons{
        width:100%;
        max-width:100%;
        gap:15px;
    }

    .primary-btn,
    .secondary-btn{
        width:100%;
        justify-content:center;
        padding:16px 20px;
    }

    /* =========================
       Launch Section
    ========================= */

    .launch-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .launch-card{
        padding:25px;
    }

    /* =========================
       Experience
    ========================= */

    .experience-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .experience-box{
        padding:25px;
    }

    /* =========================
       Section Title
    ========================= */

    .section-title h2{
        font-size:28px;
    }

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

    .cta-content h2{
        font-size:30px;
    }

    /* =========================
       Footer
    ========================= */

    .footer{
        padding:50px 20px 40px;
    }

    .footer-logo{
        width:75px;
    }

    .footer-content h3{
        font-size:26px;
    }

    .footer-text{
        font-size:16px;
        line-height:1.8;
    }

    .footer-contact{
        flex-direction:column;
        align-items:center;
        gap:14px;
    }

    .footer-contact a,
    .footer-contact span{
        font-size:16px;
        text-align:center;
    }

    .footer-bottom{
        margin-top:35px;
    }

    .footer-bottom p{
        font-size:14px;
        line-height:1.8;
    }

    .powered-by{
        margin-top:10px;
    }

    /* =========================
       Floating Buttons
    ========================= */

    .floating-whatsapp{
        width:58px;
        height:58px;
        right:18px;
        bottom:95px;
    }

    .floating-call{
        width:58px;
        height:58px;
        right:18px;
        bottom:22px;
    }
    .icon{

        width:64px;
        height:64px;

        margin-bottom:18px;

    }

    .icon svg{

        width:30px;
        height:30px;

    }
     .cta-buttons{

        flex-direction:column;

        width:100%;

    }

    .cta-buttons a{

        width:100%;

        max-width:320px;

    }

}
/*====================================
FOOTER RESPONSIVE
====================================*/

@media(max-width:992px){

.footer-grid{

grid-template-columns:1fr 1fr;

}

}