@media(max-width:992px){

    .hero h1{

        font-size:3.5rem;
    }

    .stats{

        gap:30px;
    }

    /* Gallery reads better as 2 columns before it collapses to 1 on phones */
    .gallery-grid{

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

    .contact{

        gap:40px;
    }

}

@media(max-width:768px){

    .menu-toggle{

        display:block;
    }

    .nav-links{

        position:absolute;

        top:90px;

        left:0;

        width:100%;

        background:#1A2230;

        flex-direction:column;

        text-align:center;

        /* Animated instead of display:none/flex so the menu can slide + fade smoothly */
        display:flex;
        max-height:0;
        opacity:0;
        padding:0;
        overflow:hidden;
        pointer-events:none;

        transition:
            max-height 0.45s ease,
            opacity 0.35s ease,
            padding 0.45s ease;
    }

    .nav-links.active{

        max-height:400px;
        opacity:1;
        padding:25px 0;
        pointer-events:auto;
    }

    /* Each link fades/slides in with a slight stagger once the menu is open */
    .nav-links li{
        opacity:0;
        transform:translateY(-12px);
        transition:opacity 0.35s ease, transform 0.35s ease;
    }

    .nav-links.active li{
        opacity:1;
        transform:translateY(0);
    }

    .nav-links.active li:nth-child(1){ transition-delay:0.05s; }
    .nav-links.active li:nth-child(2){ transition-delay:0.1s; }
    .nav-links.active li:nth-child(3){ transition-delay:0.15s; }
    .nav-links.active li:nth-child(4){ transition-delay:0.2s; }
    .nav-links.active li:nth-child(5){ transition-delay:0.25s; }

    .navbar .btn{

        display:none;
    }

    .hero{

        text-align:center;

        justify-content:center;
    }

    .hero h1{

        font-size:2.8rem;
    }

    .hero-buttons{

        justify-content:center;

        flex-wrap:wrap;
    }

    .stats{

        justify-content:center;

        flex-wrap:wrap;
    }

    .contact{

        grid-template-columns:1fr;
    }

    .gallery-grid{

        grid-template-columns:1fr;
    }

    .location-grid{

        grid-template-columns:1fr;
    }

    .map-embed{

        min-height:280px;
    }

    .plan-container{

        grid-template-columns:1fr;
    }

    .bmi-card{

        grid-template-columns:1fr;
        padding:35px 25px;
        gap:35px;
    }

    .bmi-result{

        border-left:none;
        border-top:1px solid #2D3748;
        padding-left:0;
        padding-top:35px;
    }

    .navbar{

        padding:18px 6%;
    }

    .features,
    .plans,
    .gallery,
    .contact{

        padding:70px 6%;
    }

    .cta{

        padding:80px 6%;
    }

    .section-title h2{

        font-size:2.2rem;
    }

    .cta h2{

        font-size:2.3rem;
    }

    /* Keep form text at 16px so iOS Safari doesn't auto-zoom on focus */
    .contact input,
    .contact select,
    .contact textarea{

        font-size:16px;
    }

}

@media(max-width:480px){

    .logo{

        font-size:1.5rem;
    }

    .hero h1{

        font-size:2.2rem;
    }

    .hero h4{

        letter-spacing:2px;
        font-size:0.85rem;
    }

    .hero p{

        font-size:1rem;
    }

    .hero-buttons{

        flex-direction:column;
        width:100%;
    }

    .hero-buttons .btn,
    .hero-buttons .btn-outline{

        width:100%;
        text-align:center;
    }

    .section-title h2{

        font-size:1.8rem;
    }

    .plan-card{

        padding:35px 22px;
    }

    .price{

        font-size:2.3rem;
    }

    .cta h2{

        font-size:1.8rem;
    }

    footer h2{

        font-size:1.6rem;
    }

    #topBtn{

        right:18px;
        bottom:18px;
        width:48px;
        height:48px;
        font-size:18px;
    }

    .whatsapp-btn{

        left:18px;
        bottom:18px;
        width:50px;
        height:50px;
    }

    .whatsapp-btn svg{

        width:26px;
        height:26px;
    }

    .lightbox-nav{

        width:42px;
        height:42px;
        font-size:1.1rem;
    }

    .lightbox-prev{

        left:10px;
    }

    .lightbox-next{

        right:10px;
    }

    .close{

        top:15px;
        right:20px;
        font-size:2.2rem;
    }

}