/* =========================================
   Hero Stats / Counters Bar
   - Fixes the "missing / misaligned" counters bar
   - Works in both LTR and RTL
   - Scoped to .hero-stats-bar to avoid breaking other .de_count usages
   ========================================= */

/* Place the bar overlapping the hero bottom (like glasstime_before) */
.hero-stats-bar{
    position: relative;
    z-index: 50;                 /* must be above hero overlays */
    margin-top: -280px;          /* pull up under the hero slogan (slightly higher) */
    margin-bottom: -110px;       /* compensate height so next section doesn't get pushed down */
}

/* Responsive tuning */
@media (max-width: 991px){
    .hero-stats-bar{ margin-top: -225px; margin-bottom: -95px; }
}
@media (max-width: 575px){
    .hero-stats-bar{ margin-top: -185px; margin-bottom: -80px; }
}

/* The glass / blur card */
.hero-stats-card{
    /* Slight tint so it stays readable even if it ever lands on a light background */
    background: rgba(12, 20, 45, .32);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 18px 60px rgba(0,0,0,.25);
    overflow: hidden;
}

/* Ensure the counters are readable on dark hero */
.hero-stats-card .de_count{
    color: #fff;
    padding: 8px 6px;
    position: relative;
}

.hero-stats-card .de_count h3{
    color: #fff;
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
}

.hero-stats-card .de_count_label{
    margin-top: 8px;
    font-size: .92rem;
    opacity: .92;
}

/* Subtle vertical separators between columns (desktop only) */
@media (min-width: 768px){
    .hero-stats-card .row > [class^="col"],
    .hero-stats-card .row > [class*=" col"]{
        position: relative;
    }

    .hero-stats-card .row > [class^="col"]:not(:last-child)::after,
    .hero-stats-card .row > [class*=" col"]:not(:last-child)::after{
        content: "";
        position: absolute;
        top: 18%;
        bottom: 18%;
        right: 0;
        width: 1px;
        background: rgba(255,255,255,.18);
    }

    html[dir="rtl"] .hero-stats-card .row > [class^="col"]:not(:last-child)::after,
    html[dir="rtl"] .hero-stats-card .row > [class*=" col"]:not(:last-child)::after{
        right: auto;
        left: 0;
    }
}

/* Mobile: keep it clean and avoid overlap issues */
@media (max-width: 767px){
    .hero-stats-bar{
        margin-top: -120px;
        margin-bottom: -70px;
    }

    .hero-stats-card{
        padding: 22px 16px;
    }

    .hero-stats-card .de_count{
        padding: 12px 6px;
    }

    /* horizontal separators between stacked items */
    .hero-stats-card .row > [class^="col"]:not(:nth-last-child(-n+2)){
        border-bottom: 1px solid rgba(255,255,255,.15);
        padding-bottom: 14px;
        margin-bottom: 6px;
    }
}

/* Extra small */
@media (max-width: 420px){
    .hero-stats-bar{ margin-top: -110px; margin-bottom: -70px; }
}