/* ============================================================
   DYNAMIC HERO BANNER SLIDER
   Managed from cPanel > Website > Banner Slider (tbl_banner_slider)
   Re-uses the existing .hero-* classes so the design is unchanged.
   ============================================================ */

.hero-slider {
    position: relative;
    width: 100%;
}

/* Grid stack: every slide occupies the same cell, so the container
   is always as tall as the tallest slide. No JS height maths needed. */
.hero-slider-slides {
    display: grid;
}

.hero-slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateX(24px);
    transition: opacity .7s ease, transform .7s ease, visibility .7s ease;
    pointer-events: none;
}

.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

/* Optional background image per slide */
.hero-slide-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    border-radius: inherit;
}

/* ---- Arrows ---- */
.hero-slider-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 6px;
    pointer-events: none;
    z-index: 5;
}

.hero-slider-arrow {
    pointer-events: auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(201, 147, 38, .45);
    background: rgba(255, 255, 255, .92);
    color: #c99326;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    transition: all .25s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}

.hero-slider-arrow:hover {
    background: #c99326;
    color: #fff;
    border-color: #c99326;
}

/* ---- Dots ---- */
.hero-slider-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    display: flex;
    justify-content: center;
    gap: 9px;
    z-index: 5;
}

.hero-slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(201, 147, 38, .35);
    cursor: pointer;
    transition: all .25s ease;
}

.hero-slider-dot.is-active {
    background: #c99326;
    width: 26px;
    border-radius: 6px;
}

@media (max-width: 991px) {
    .hero-slider-arrow {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }

    .hero-slider-dots {
        bottom: 10px;
    }
}

@media (max-width: 575px) {
    .hero-slider-nav {
        display: none;
    }
}