/*=========================================
        LARGE LAPTOPS
=========================================*/

@media (max-width:1200px){

    html{
        font-size:58%;
    }

    section{
        padding:80px 5%;
    }

}

/*=========================================
        TABLETS
=========================================*/

@media (max-width:992px){

    html{
        font-size:56%;
    }

    /* Header */

    header .container{
        height:75px;
    }

    .logo img{
        height:55px;
    }

    #menu-btn{
        display:block;
    }

    .navbar{
        position:fixed;
        top:75px;
        right:-100%;
        width:280px;
        height:calc(100vh - 75px);
        background:#0b7a2f;
        flex-direction:column;
        justify-content:flex-start;
        align-items:center;
        padding-top:40px;
        gap:30px;
        transition:.4s;
        box-shadow:-10px 0 25px rgba(0,0,0,.2);
    }

    .navbar.active{
        right:0;
    }

    .navbar a{
        font-size:2rem;
    }

    .cart-icon{
        margin-left:0;
        margin-right:15px;
        order:2;
    }

    #menu-btn{
        order:3;
    }

    .navbar{
        order:1;
    }

    .cart-sidebar{
        width:100%;
    }

    .cart-toast{
        top:80px;
        right:16px;
        left:16px;
        transform:translateY(-120%);
    }

    .cart-toast.show{
        transform:translateY(0);
    }

    /* Hero */

    .hero{
        text-align:center;
    }

    .hero-content{
        max-width:100%;
    }

    .hero h1{
        font-size:5.5rem;
    }

    .hero-buttons{
        justify-content:center;
        flex-wrap:wrap;
        gap:15px;
    }

    /* About */

    .about .container{
        grid-template-columns:1fr;
        text-align:center;
    }

    .about-image{
        order:1;
    }

    .about-content{
        order:2;
    }

    .about-features{
        grid-template-columns:1fr;
        text-align:left;
    }

    /* Contact */

    .contact-wrapper{
        grid-template-columns:1fr;
    }

    .delivery-layout{
        grid-template-columns:1fr;
    }

    .delivery-card{
        max-width:650px;
        margin:auto;
    }

    /* Footer */

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

    /* Statistics */

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

    /* Features */

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

}

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

@media (max-width:768px){

    html{
        font-size:53%;
    }

    section{
        padding:70px 20px;
    }

    .hero{
        min-height:90vh;
    }

    .hero h1{
        font-size:4.5rem;
    }

    .hero p{
        font-size:1.7rem;
    }

    .section-header h2{
        font-size:3.4rem;
    }

    .features .container{
        grid-template-columns:1fr;
    }

    .statistics .container{
        grid-template-columns:1fr;
    }

    .footer-content{
        grid-template-columns:1fr;
        text-align:center;
    }

    .social-icons{
        justify-content:center;
    }

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

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

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

    .delivery-map{
        min-height:440px;
    }

    .delivery-pin{
        font-size:1.1rem;
        padding:6px 8px;
    }

    .experience{
        right:10px;
        bottom:10px;
    }

}

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

@media (max-width:480px){

    html{
        font-size:50%;
    }

    .hero h1{
        font-size:3.8rem;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .btn,
    .btn-outline{
        width:100%;
        text-align:center;
        margin:0;
    }

    .logo img{
        height:45px;
    }

    .whatsapp{
        width:55px;
        height:55px;
        font-size:2.6rem;
    }

    #topBtn{
        width:50px;
        height:50px;
    }

}

/* Mobile product hero: one clear focal point, with copy above the bottle. */
@media (max-width:768px){

    .hero{
        min-height:100svh;
    }

    .hero-slide{
        align-items:flex-start;
    }

    .hero .hero-content{
        padding:100px 24px 250px;
    }

    .hero .hero-content h1{
        font-size:clamp(4.5rem,13vw,6.2rem);
        line-height:1.02;
        letter-spacing:-1.5px;
    }

    .hero .hero-content p{
        font-size:1.55rem;
        line-height:1.55;
    }

    .hero-slide__eyebrow{
        margin:14px 0 -3px!important;
    }

    .hero-slide__bottle,
    .hero-slide.active .hero-slide__bottle{
        top:auto;
        right:50%;
        bottom:58px;
        width:min(175px,44vw);
        max-height:29vh;
        opacity:.85;
        transform:translateX(50%) rotate(-2deg);
    }

    .hero-slide__splash{
        width:92vw;
        height:92vw;
        right:50%;
        top:auto;
        bottom:-18vw;
        opacity:.45;
        transform:translateX(50%) rotate(18deg);
    }

    .hero-slider__controls{
        bottom:16px;
    }

    .hero-slider__arrow{
        width:34px;
        height:34px;
    }

    .hero .scroll-down{
        display:none;
    }
}

@media (max-width:480px){

    .hero .hero-buttons{
        flex-direction:row;
        flex-wrap:wrap;
    }

    .hero .btn,
    .hero .btn-outline{
        width:auto;
        padding:12px 19px;
        font-size:1.35rem;
    }

    .hero .hero-content{
        padding-top:100px;
    }
}

/* Glass slide-out navigation */
@media (max-width:992px){

    .navbar{
        top:0;
        right:0;
        width:min(82vw,330px);
        height:100svh;
        padding:112px 36px 36px;
        align-items:flex-start;
        gap:10px;
        background:rgba(5,68,28,.86);
        backdrop-filter:blur(20px) saturate(150%);
        -webkit-backdrop-filter:blur(20px) saturate(150%);
        border-left:1px solid rgba(255,255,255,.18);
        box-shadow:-18px 0 45px rgba(0,30,10,.25);
        transform:translateX(110%);
        transition:transform .4s cubic-bezier(.2,.8,.2,1);
        z-index:9998;
    }

    .navbar.active{
        right:0;
        transform:translateX(0);
    }

    .navbar a{
        width:100%;
        padding:14px 0;
        font-size:2rem;
    }

    .navbar a::after{
        left:0;
        bottom:7px;
        width:0;
    }

    #menu-btn{
        position:relative;
        z-index:9999;
    }
}