/* ══════════════════════════════════════════════════
   HERO SLIDER — premium media card polish
   (Layout/sizing yahan nahi hai — wo hero.css me hai.
   Ye file sirf slider ke andar ki visual polish karti
   hai: gradient-ring border, ambient blurred background,
   contain-fit image, video fade-in, and — same as the
   product page — a pulsing glow border.)
   ══════════════════════════════════════════════════ */

.hero-slider {
    position: relative;
    background: var(--bg2, #0f1118);
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.45),
        0 0 40px rgba(249, 115, 22, 0.08);
    /* Same "glowing border touch" used on the service detail page's
       main image/video viewer — a slow, subtle orange pulse so the
       card never feels static. */
    animation: heroGlowPulse 3.2s ease-in-out infinite;
}

@keyframes heroGlowPulse {
    0%, 100% {
        box-shadow:
            0 25px 60px rgba(0, 0, 0, 0.45),
            0 0 40px rgba(249, 115, 22, 0.08);
    }
    50% {
        box-shadow:
            0 25px 60px rgba(0, 0, 0, 0.45),
            0 0 55px 6px rgba(249, 115, 22, 0.40);
    }
}

/* Premium gradient-ring border — 1px, follows the rounded
   corners exactly (mask trick), works on any accent theme.
   Its opacity now pulses in sync with the glow above. */
.hero-slider::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(249, 115, 22, 0.75),
        rgba(255, 255, 255, 0.10) 35%,
        rgba(255, 255, 255, 0.03) 60%,
        rgba(251, 146, 60, 0.55)
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: heroRingPulse 3.2s ease-in-out infinite;
}

@keyframes heroRingPulse {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}

/* Wrapper around each slide's image/video */
.hero-slide-media {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bg2, #0f1118);
}

/* Ambient blurred backdrop — automatically "matches" the
   background to whatever colors the photo itself has, so
   letterboxed edges never look like a hardcoded plain color.
   (This is the "auto background match" — same idea as the
   adjustable background on the service page, but here it's
   fully automatic since each slide is a different service.) */
.hero-slide-bg {
    position: absolute;
    inset: -24px;
    width: calc(100% + 48px);
    height: calc(100% + 48px);
    object-fit: cover;
    filter: blur(40px) saturate(1.6) brightness(0.6);
    transform: scale(1.15);
    z-index: 1;
}

/* Real photo — CONTAIN so it always fits fully inside the
   card, never crops and never spills outside its own box */
.hero-slide-img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Auto-fetched video sits on top of the image; if it fails
   to load (no video for that service) hero.php hides it via
   onerror, leaving the image + blurred backdrop visible */
.hero-slide-video {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    background: transparent;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.hero-slide-video.is-visible {
    opacity: 1;
}

.hero-slide-caption {
    z-index: 6;
    border-radius: 0 0 24px 24px;
}

/* ══════════════════════════════════════════════════
   MOBILE — sirf font-size jaisi cheezein; height ab
   hero.css ke aspect-ratio se khud handle ho jaati hai
   ══════════════════════════════════════════════════ */
@media (max-width: 860px) {
    .hero-title {
        font-size: 32px !important;
        line-height: 1.25 !important;
    }
    .hero-trust {
        flex-wrap: wrap;
        gap: 14px !important;
    }
}