.hero{
    padding:20px 0 4px;
    overflow:hidden;
}

.hero .container{
    overflow:hidden;
}

.hero-content{

    width:100%;

    min-height:220px;

    background:linear-gradient(135deg,#ff8c1a,#ff6b00);

    border-radius:24px;

    overflow:hidden;

    display:grid;

    grid-template-columns:1.1fr .9fr;

    align-items:center;

    padding:24px;

    position:relative;

    box-shadow:0 12px 30px rgba(255,122,0,.20);

}

/* Decorative background */

.hero-content::before{

    content:"";

    position:absolute;

    left:-120px;

    bottom:-120px;

    width:260px;

    height:260px;

    border-radius:50%;

    background:rgba(255,255,255,.06);

}

.hero-content::after{

    content:"";

    position:absolute;

    right:-70px;

    top:-70px;

    width:180px;

    height:180px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

}

/* ==========================
LEFT
========================== */

.hero-left{

    position:relative;

    z-index:2;

}

.hero-left h2{

    color:#fff;

    font-size:42px;

    line-height:1.15;

    font-weight:700;

    margin-bottom:16px;

}

.hero-left p{

    color:#fff;

    opacity:.95;

    font-size:20px;

    margin-bottom:26px;

}



.hero-slider{
    display:flex;
    gap:20px;
    transition:transform .55s ease;
    padding:0 12px;
    will-change:transform;
    /* Clipping lives on .hero .container (a non-transformed ancestor) —
       not here. This element is what gets translateX()'d, and since
       transform doesn't affect layout/overflow computation, putting
       overflow:hidden on the same element that moves would permanently
       clip away every slide except the first, no matter which is active. */
}

.hero-slide{
    flex:0 0 100%;
    box-sizing:border-box;
}

.hero-slide-clickable{
    cursor:pointer;
}


@keyframes heroFloat{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0px);

    }

}

.hero-right img{

    animation:heroFloat 4s ease-in-out infinite;

}
/*=========================================
HERO DOTS
=========================================*/

.hero-dots{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin-top:18px;

}

.hero-dots span{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#d7d7d7;

    cursor:pointer;

    transition:.3s;

}

.hero-dots span.active{

    width:38px;

    border-radius:30px;

    background:var(--primary);

}


/* ==========================
RIGHT
========================== */

.hero-right{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    position:relative;

    z-index:2;

}

.hero-right img{

    width:100%;

    max-width:290px;

    object-fit:contain;

}


/* ==========================
ORDER NOW BUTTON (offer slides)
Absolutely positioned so it never
changes the slide's size/layout.
========================== */

.hero-order-btn{

    position:absolute;

    right:20px;

    bottom:16px;

    z-index:3;

    background:#fff;

    color:#ff6b00;

    border:none;

    border-radius:30px;

    padding:0 20px;

    height:38px;

    font-size:14px;

    font-weight:700;

    cursor:pointer;

    box-shadow:0 6px 16px rgba(0,0,0,.18);

    white-space:nowrap;

}

.hero-order-btn:active{

    transform:scale(0.96);

}

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

@media(max-width:768px){

    .hero-content{

        min-height:200px;

        padding:20px;

        grid-template-columns:1fr 1fr;

    }

    .hero-left h2{

        font-size:32px;

    }

    .hero-left p{

        font-size:16px;

    }

    .hero-btn{

        height:48px;

        padding:0 24px;

        font-size:16px;

    }

    .hero-order-btn{

        height:34px;

        padding:0 16px;

        font-size:13px;

        right:16px;

        bottom:14px;

    }

    .hero-right img{

        max-width:190px;

    }

}

/* ==========================
PHONE
========================== */

@media(max-width:480px){

    .hero{

    overflow:hidden;

}

    .hero-content{

        min-height:175px;

        padding:18px;

        border-radius:22px;

        grid-template-columns:1fr 140px;

    }

    .hero-left h2{

        font-size:20px;

        margin-bottom:8px;

    }

    .hero-left p{

        font-size:12px;

        margin-bottom:18px;

    }

    .hero-btn{

        height:42px;

        padding:0 22px;

        border-radius:14px;

        font-size:14px;

    }

    .hero-order-btn{

        height:28px;

        padding:0 12px;

        font-size:11px;

        right:12px;

        bottom:10px;

        border-radius:14px;

    }

    .hero-right{

        justify-content:center;

    }

    .hero-right img{

        width:150px;

    }

}

/* ==========================
LARGE DESKTOP
========================== */

@media(min-width:1200px){

    .hero-content{

        min-height:280px;

    }

    .hero-right img{

        max-width:340px;

    }

}
@media(max-width:480px){

    .hero-slider{
        gap:14px;
        padding:0 12px;
    }

}
@media(max-width:768px){

    .hero-slider{
        gap:18px;
        padding:0 12px;
    }

}
@media(min-width:992px){

    .hero-slider{
        gap:24px;
        padding:0 18px;
    }

}