/* ===========================================
   KRISHNALATHA DEALS - PREMIUM HERO SLIDER
=========================================== */

.hero{
    width:100%;
    max-width:1400px;
    margin:25px auto;
    padding:0 15px;
}

/* ==========================
   SLIDER CONTAINER
========================== */

.hero-slider{
    position:relative;
    overflow:hidden;
    border-radius:22px;
    background:#fff;
    box-shadow:
        0 15px 45px rgba(0,0,0,.12),
        0 5px 12px rgba(0,0,0,.08);
}

/* ==========================
   TRACK (IMPORTANT FOR AUTO SLIDE)
========================== */

.hero-track{
    display:flex;
    transition:transform 0.6s ease-in-out;
    will-change:transform;
}

/* ==========================
   SLIDES
========================== */

.hero-slide{
    flex:0 0 100%;
    position:relative;
    user-select:none;
}

.hero-slide a{
    display:block;
    text-decoration:none;
}

.hero-slide img{
    width:100%;
    height:100%;
    aspect-ratio:16/6;
    object-fit:cover;
    display:block;
}

/* ==========================
      ARROWS
========================== */

.hero-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:52px;
    height:52px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    color:#14532d;
    cursor:pointer;
    font-size:26px;
    font-weight:bold;
    transition:.25s;
    z-index:20;
    box-shadow:0 6px 20px rgba(0,0,0,.18);
    opacity:.85;
}

.hero-btn:hover{
    background:#14532d;
    color:#fff;
    opacity:1;
}

.hero-prev{
    left:18px;
}

.hero-next{
    right:18px;
}

/* ==========================
        DOTS
========================== */

.hero-dots{
    position:absolute;
    bottom:18px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:10px;
    z-index:20;
}

.hero-dot{
    width:12px;
    height:12px;
    border-radius:50%;
    background:rgba(255,255,255,.6);
    cursor:pointer;
    transition:.3s;
}

.hero-dot.active{
    background:#f4c542;
    transform:scale(1.2);
}

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

@media(max-width:992px){

.hero{
    margin:18px auto;
}

.hero-btn{
    width:42px;
    height:42px;
    font-size:20px;
}

.hero-prev{
    left:10px;
}

.hero-next{
    right:10px;
}

.hero-dots{
    bottom:10px;
}

.hero-dot{
    width:10px;
    height:10px;
}

}

@media(max-width:600px){

.hero{
    padding:0 8px;
}

.hero-slider{
    border-radius:14px;
}

.hero-slide img{
    aspect-ratio:16/8;
}

.hero-btn{
    width:36px;
    height:36px;
    font-size:18px;
}

.hero-prev{
    left:8px;
}

.hero-next{
    right:8px;
}

.hero-dot{
    width:9px;
    height:9px;
}

}