/**
 * Sri Laxmi Packers and Movers — Main Base Stylesheet
 * 
 * Layout, typography, top bar, hero section, footer, and utility styling.
 */

/* 1. Global Reset & Typography */
body {
    font-family: var(--font-body);
    color: #2b313a;
    background-color: #fbfbfd;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--font-heading);
    color: #161b22;
    font-weight: 700;
    line-height: 1.25;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-secondary);
}

/* 2. Top Informational Bar matching mockup */
.top-bar {
    background-color: var(--color-primary);
    color: #ffffff;
    padding: 0;
    border-bottom: none;
    font-size: 0.84rem;
}

.top-bar-link {
    color: #ffffff;
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.top-bar-link:hover {
    color: #ffffff;
    opacity: 0.85;
}

.top-bar-socials {
    display: flex;
    align-items: center;
    gap: 8px;
}

.top-social-btn {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.top-social-btn:hover {
    background: #ffffff;
    color: var(--color-primary);
    transform: translateY(-2px);
}

/* Hours Badge on the top right */
.top-hours-badge {
    background: var(--color-cream);
    color: #1a1e24;
    padding: 6px 18px;
    clip-path: polygon(14px 0%, 100% 0%, 100% 100%, 0% 100%);
    font-family: var(--font-body);
}

.hours-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1.1;
}

.hours-time {
    font-size: 0.88rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.1;
}

/* Sticky Site Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: box-shadow var(--transition-normal);
}

/* Site Logo Image - Bold, Prominent & Responsive */
.navbar-brand {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.site-logo-img {
    height: 64px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
    display: inline-block;
    transition: height var(--transition-fast);
}

@media (max-width: 991.98px) {
    .site-logo-img {
        height: 52px;
        max-width: 220px;
    }
}

@media (max-width: 575.98px) {
    .site-logo-img {
        max-width: 200px !important;
    }
}

@media (max-width: 480px) {
    .site-logo-img {
        height: 140px !important;
        max-width: 220px !important;
    }
}

/* 3. Main Navbar matching mockup */
.main-navbar {
    background-color: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    padding: 0;
    transition: all var(--transition-normal);
}

.main-navbar.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 0;
}

/* Nav Links - Clean, Modern Typography matching Screenshot */
.navbar-nav .nav-link {
    color: #1e293b !important;
    font-family: var(--font-heading);
    font-size: 1.02rem;
    font-weight: 600;
    padding: 0.65rem 1.1rem !important;
    margin: 0 0.15rem;
    background: transparent !important;
    position: relative;
    letter-spacing: -0.2px;
    transition: color 0.2s ease-in-out;
}

.navbar-nav .nav-link:hover {
    color: var(--color-primary) !important;
    background: transparent !important;
}

.navbar-nav .nav-link.active {
    color: var(--color-primary) !important;
    font-weight: 700;
    background: transparent !important;
}

/* Centered animated red indicator bar under active & hovered links */
.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 28px;
    height: 3.5px;
    background-color: var(--color-primary);
    border-radius: var(--radius-full);
    transition: transform 0.22s ease-in-out;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    transform: translateX(-50%) scaleX(1);
}

/* Dropdown Menu Styling */
.main-navbar .dropdown-menu {
    border-radius: 14px;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: 0.6rem;
    min-width: 270px;
    margin-top: 0.5rem;
    animation: fadeInDropdown 0.22s ease-out;
}

@keyframes fadeInDropdown {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.main-navbar .dropdown-item {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.92rem;
    border-radius: 8px;
    padding: 0.55rem 0.95rem;
    color: #334155;
    transition: all 0.18s ease-in-out;
}

.main-navbar .dropdown-item:hover,
.main-navbar .dropdown-item:focus {
    background-color: rgba(var(--color-primary-rgb), 0.08);
    color: var(--color-primary);
    transform: translateX(4px);
}

/* Phone Pill CTA in Header */
.nav-phone-pill {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50px;
    padding: 6px 18px 6px 8px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
    transition: all var(--transition-fast);
}

.nav-phone-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    border-color: rgba(var(--color-primary-rgb), 0.4);
}

.phone-pill-icon {
    width: 40px;
    height: 40px;
    font-size: 1.05rem;
    background-color: var(--color-primary) !important;
}

.phone-pill-label {
    font-size: 0.72rem;
    line-height: 1.1;
    letter-spacing: 0.3px;
}

.phone-pill-number {
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.2px;
}

/* 4. Hero Section with Background Slider & Reference Design */
.hero-section {
    position: relative;
    overflow: hidden;
    background-color: #fafbfd;
    padding: 3.5rem 0 4rem;
}

/* Background Carousel Slider */
.hero-bg-carousel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.hero-bg-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-position: right center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform 7s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero-bg-carousel .carousel-item.active .hero-bg-slide {
    transform: scale(1.03);
}

/* Crisp light gradient overlay */
/* Black / Dark Cinematic Backdrop matching user request */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(8, 12, 22, 0.90) 0%, rgba(12, 18, 30, 0.80) 48%, rgba(12, 18, 30, 0.52) 75%, rgba(8, 12, 22, 0.35) 100%);
    z-index: 2;
    pointer-events: none;
}

.hero-foreground-content {
    z-index: 3;
    max-width: 1360px;
    margin: 0 auto;
}

.hero-content {
    max-width: 680px;
}

/* Location Pill Badge on Dark Backdrop */
.hero-location-pill {
    background-color: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    padding: 0.42rem 1.15rem;
    border-radius: 50px;
    font-size: 0.86rem;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
}

/* Headline & Decorative Accents on Dark Backdrop */
.hero-title-wrapper {
    position: relative;
}

.hero-dot-grid {
    position: absolute;
    top: 5px;
    right: 40px;
    width: 120px;
    height: 85px;
    background-image: radial-gradient(rgba(255, 255, 255, 0.25) 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    opacity: 0.35;
    pointer-events: none;
}

.hero-title {
    font-size: 3.25rem;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.14;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.text-brand-red {
    color: #FF4438;
}

.text-brand-dark {
    color: #FFFFFF;
    /* Bright white against dark backdrop */
}

.text-brand-orange {
    color: #FF9F1C;
}

.headline-swoop {
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 100%;
    height: 14px;
    pointer-events: none;
}

.hero-subtitle {
    font-size: 1.04rem;
    color: #f1f5f9;
    /* Crisp clean light text against black backdrop */
    line-height: 1.65;
    max-width: 600px;
    font-weight: 450;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    min-height: 5rem;
}

/* Stable Hero Text Carousel Container */
#heroTextCarousel {
    min-height: 290px;
}

#heroTextCarousel .carousel-inner {
    position: relative;
    width: 100%;
    min-height: 290px;
}

#heroTextCarousel .carousel-item {
    transition: opacity 0.5s ease-in-out;
}

#heroTextCarousel .hero-title-wrapper {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* 5 Feature Items Row (Image 2) */
.hero-features-row {
    display: flex;
    align-items: stretch;
}

.hero-feature-item {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 14px;
    padding: 0.8rem 0.6rem;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 90px;
    max-width: 114px;
    min-width: 90px;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.hero-feature-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
    border-color: var(--color-secondary);
}

.hero-feature-item .feature-icon-circle {
    width: 42px;
    height: 42px;
    background: #FFF4ED;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 6px;
}

.hero-feature-item .feature-text {
    font-size: 0.74rem;
    font-weight: 700;
    color: #1E293B;
    line-height: 1.25;
}

/* Hero Action Buttons (Image 2) */
.hero-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

.btn-hero-quote {
    background-color: #DF2618;
    color: #ffffff;
    border-radius: 50px;
    padding: 0.82rem 1.65rem;
    font-weight: 700;
    font-size: 0.98rem;
    border: none;
    box-shadow: 0 6px 20px rgba(223, 38, 24, 0.35);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-hero-quote:hover {
    background-color: #c42013;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(223, 38, 24, 0.45);
}

.btn-hero-call {
    background: linear-gradient(135deg, #FFA000 0%, #FF6F00 100%);
    color: #ffffff;
    border-radius: 50px;
    padding: 0.82rem 1.65rem;
    font-weight: 700;
    font-size: 0.98rem;
    border: none;
    box-shadow: 0 6px 20px rgba(255, 145, 0, 0.35);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-hero-call:hover {
    background: linear-gradient(135deg, #FF9100 0%, #e65c00 100%);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 145, 0, 0.45);
}

/* Slider Controls & Indicators */
.hero-slide-nav .hero-nav-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    color: #1e293b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.hero-slide-nav .hero-nav-arrow:hover {
    background: #DF2618;
    color: #ffffff;
    border-color: #DF2618;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(223, 38, 24, 0.3);
}

/* Trust Checks Row (Image 2) */
.hero-trust-checks {
    font-size: 0.86rem;
    font-weight: 600;
    color: #334155;
}

.trust-check-item i {
    font-size: 1.15rem;
}

/* Floating Quote Form Card (Minimalist Ultra-Clean Aesthetic) */
.hero-quote-card.minimalist-quote-card {
    max-width: 410px;
    width: 100%;
    margin-left: auto;
    background: #ffffff !important;
    border-radius: 20px !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.08), 0 0 1px 1px rgba(15, 23, 42, 0.03) !important;
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.hero-quote-card.minimalist-quote-card:hover {
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.12), 0 0 1px 1px rgba(223, 38, 24, 0.08) !important;
    transform: translateY(-2px);
}

/* Top Accent Progress Bar */
.card-accent-bar {
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, #DF2618 0%, #FF9100 60%, #DF2618 100%);
    background-size: 200% auto;
    animation: accentGradient 4s linear infinite;
}

@keyframes accentGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Minimalist Header with Badges */
.minimalist-header {
    background: #ffffff !important;
    padding: 1.35rem 1.45rem 0.5rem !important;
    border: none !important;
    text-align: left !important;
}

.quote-pill-badge {
    background-color: #FEECEB;
    color: #DF2618;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.28rem 0.65rem;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    letter-spacing: 0.2px;
}

.quote-guarantee-badge {
    color: #16a34a;
    font-size: 0.72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
}

.minimalist-header .quote-header-title {
    font-size: 1.32rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.3px;
    line-height: 1.25;
}

.minimalist-header .quote-header-subtitle {
    font-size: 0.8rem !important;
    color: #64748b !important;
    line-height: 1.35;
}

.minimalist-body {
    padding: 1.1rem 1.45rem 1.25rem !important;
}

/* Modern Minimalist Inputs */
.minimalist-body .unified-input-box {
    display: flex;
    align-items: center;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0 11px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    min-height: 40px;
}

.minimalist-body .unified-input-box:hover {
    background-color: #ffffff;
    border-color: #cbd5e1;
}

.minimalist-body .unified-input-box:focus-within {
    background-color: #ffffff;
    border-color: #DF2618;
    box-shadow: 0 0 0 3px rgba(223, 38, 24, 0.12);
}

.minimalist-body .unified-input-box .input-icon {
    color: #94a3b8;
    font-size: 0.92rem;
    margin-right: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    transition: color 0.2s ease;
}

.minimalist-body .unified-input-box:focus-within .input-icon {
    color: #DF2618;
}

.minimalist-body .unified-input-box .unified-input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: 0.86rem;
    color: #0f172a;
    padding: 7px 0;
    font-family: inherit;
    font-weight: 500;
}

.minimalist-body .unified-input-box .unified-input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.minimalist-body .unified-input-box .unified-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    font-size: 0.86rem;
}

.minimalist-body .unified-input-box .select-chevron {
    color: #94a3b8;
    font-size: 0.78rem;
    pointer-events: none;
    margin-left: auto;
}

.minimalist-body .unified-textarea-box {
    align-items: flex-start;
    min-height: 48px;
}

.minimalist-body .unified-textarea-box .unified-textarea {
    resize: none;
    min-height: 38px;
    font-size: 0.84rem;
}

/* Submit Button (Modern pill with gradient hover) */
.minimalist-body .btn-hero-submit {
    background: linear-gradient(135deg, #DF2618 0%, #c41e12 100%);
    color: #ffffff;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    border: none;
    padding: 0.75rem 1.25rem;
    box-shadow: 0 6px 18px rgba(223, 38, 24, 0.28);
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.minimalist-body .btn-hero-submit:hover {
    background: linear-gradient(135deg, #b91c10 0%, #991b1b 100%);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(223, 38, 24, 0.38);
}

.minimalist-body .btn-hero-submit i {
    transition: transform 0.2s ease;
}

.minimalist-body .btn-hero-submit:hover i {
    transform: translateX(4px);
}

.secure-info-badge {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 500;
}

/* Responsive Adjustments */
@media (max-width: 1199.98px) {
    .hero-title {
        font-size: 2.75rem;
    }
}

@media (max-width: 991.98px) {
    .hero-section {
        padding: 2.2rem 0 3rem;
    }

    .hero-bg-slide {
        background-position: center center !important;
        background-size: cover !important;
    }

    /* Black / Dark translucent overlay on mobile */
    .hero-overlay {
        background: linear-gradient(180deg, rgba(8, 12, 22, 0.84) 0%, rgba(12, 18, 30, 0.70) 50%, rgba(8, 12, 22, 0.88) 100%) !important;
    }

    .hero-title {
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
    }

    .hero-subtitle {
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
        color: #f8fafc !important;
        /* Crisp white on mobile black overlay */
        font-weight: 500;
    }

    .hero-location-pill {
        background-color: rgba(255, 255, 255, 0.15) !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
        color: #ffffff !important;
        backdrop-filter: blur(8px);
    }

    .hero-feature-item {
        background-color: #ffffff;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    }

    /* Hide hero trust checks on mobile per user request */
    .hero-trust-checks {
        display: none !important;
    }

    /* Hide hero quote card on mobile per user request */
    #heroQuoteCard {
        display: none !important;
    }
}

@media (max-width: 575.98px) {
    .hero-title {
        font-size: 1.85rem;
    }

    .hero-bg-slide {
        background-position: center center !important;
    }

    .hero-overlay {
        background: linear-gradient(180deg, rgba(8, 12, 22, 0.82) 0%, rgba(12, 18, 30, 0.68) 50%, rgba(8, 12, 22, 0.88) 100%) !important;
    }
}

/* Bottom Trust Strip below hero */
.bottom-trust-strip {
    background-color: #FFFDF8;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.trust-strip-card {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.trust-strip-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
}

.trust-strip-icon-circle {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    background-color: rgba(var(--color-secondary-rgb), 0.15);
    color: var(--color-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

/* 5. Section Headers */
.section-tag {
    display: inline-block;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0.6rem;
}

.section-title {
    font-size: 2.35rem;
    font-weight: 800;
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
}

.section-lead {
    color: #555e6c;
    font-size: 1.05rem;
    max-width: 650px;
}

/* 5.1 About Showcase Section (Matching Reference Mockup) */
.about-showcase-section {
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF9 60%, #FFF8EF 100%);
    position: relative;
    padding: 4.5rem 0 3.5rem;
}

.about-bg-shapes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.about-shape-circle {
    position: absolute;
    top: -120px;
    right: -100px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 145, 0, 0.08) 0%, rgba(223, 38, 24, 0.03) 70%, transparent 100%);
}

.about-dot-matrix {
    position: absolute;
    top: 40px;
    left: 45%;
    width: 140px;
    height: 90px;
    background-image: radial-gradient(#cbd5e1 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    opacity: 0.55;
}

.about-brand-tag .tag-accent-line {
    width: 28px;
    height: 3px;
    background-color: #DF2618;
    border-radius: 2px;
}

.about-main-headline {
    font-size: 2.6rem;
    color: #0f172a;
    letter-spacing: -0.5px;
    line-height: 1.22;
}

.headline-swoop-sm {
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 12px;
}

.about-lead-desc {
    font-size: 1rem;
    line-height: 1.7;
    color: #475569;
}

/* 6 Feature Badges */
.about-feature-box {
    transition: all 0.25s ease;
}

.about-feature-box:hover {
    transform: translateY(-3px);
    border-color: rgba(223, 38, 24, 0.3) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
}

.about-feat-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.bg-danger-subtle {
    background-color: #FEECEB !important;
}

.bg-orange-subtle {
    background-color: #FFF3E0 !important;
}

.bg-info-subtle {
    background-color: #E0F2FE !important;
}

.bg-warning-subtle {
    background-color: #FEF3C7 !important;
}

.bg-teal-subtle {
    background-color: #CCFBF1 !important;
}

.text-teal {
    color: #0f766e !important;
}

.about-feat-info .feat-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
}

.about-feat-info .feat-sub {
    font-size: 0.74rem;
    line-height: 1.35;
    color: #64748b;
}

/* CTA Action Buttons */
.btn-about-story {
    background: linear-gradient(135deg, #DF2618 0%, #b91c10 100%);
    color: #ffffff !important;
    border-radius: 50px;
    padding: 0.75rem 1.75rem;
    font-size: 0.95rem;
    box-shadow: 0 8px 20px rgba(223, 38, 24, 0.3);
    border: none;
    transition: all 0.25s ease;
}

.btn-about-story:hover {
    background: linear-gradient(135deg, #b91c10 0%, #991b1b 100%);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(223, 38, 24, 0.4);
}

.btn-about-phone {
    background: #ffffff;
    color: #0f172a !important;
    border-radius: 50px;
    padding: 0.75rem 1.6rem;
    font-size: 0.95rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
}

.btn-about-phone:hover {
    border-color: #DF2618;
    color: #DF2618 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

/* Story Pillars (Section 3 Visual Cards) */
.story-pillar-card {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 14px !important;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.03);
}

.story-pillar-card:hover {
    transform: translateX(5px);
    border-color: rgba(223, 38, 24, 0.25) !important;
    box-shadow: 0 8px 22px rgba(223, 38, 24, 0.08);
}

.pillar-icon-box {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.03);
}

.pillar-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}

.pillar-desc {
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.45;
}

.about-trust-highlights {
    border-top: 1px dashed #e2e8f0;
    padding-top: 0.85rem;
}

.trust-pill-sm {
    font-size: 0.8rem;
    font-weight: 600;
    color: #334155;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 0.35rem 0.75rem;
    border-radius: 50px;
}

/* Right Visual Frame & Floating Badges */
.about-visual-frame {
    position: relative;
    padding: 1.5rem 0;
}

.about-main-img-card {
    border-radius: 28px !important;
    overflow: hidden;
    position: relative;
    border: 4px solid #ffffff !important;
    box-shadow: 0 25px 50px -12px rgba(223, 38, 24, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.06) !important;
}

.about-team-photo {
    height: 480px;
    object-position: center;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-visual-frame:hover .about-team-photo {
    transform: scale(1.03);
}

.about-photo-gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.25) 100%);
    pointer-events: none;
}

/* Floating Glass Badges */
.floating-about-badge {
    position: absolute;
    z-index: 3;
    border-radius: 18px;
    padding: 0.9rem 1.25rem;
    max-width: 275px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.floating-about-badge:hover {
    transform: translateY(-5px);
}

/* Badge 1: Top-Right Red Capsule */
.badge-top-right {
    top: 6%;
    right: -15px;
    background: linear-gradient(135deg, rgba(223, 38, 24, 0.96) 0%, rgba(185, 28, 16, 0.96) 100%);
    border: 2px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 16px 36px rgba(223, 38, 24, 0.35);
    max-width: 265px;
    animation: badgeFloatSlow 5s ease-in-out infinite alternate;
}

.badge-top-right .badge-head {
    font-size: 0.88rem;
    font-weight: 800;
}

.badge-top-right .badge-desc {
    font-size: 0.74rem;
    line-height: 1.35;
}

/* Badge 2: Bottom-Left Pearl Glass */
.badge-bottom-left {
    bottom: 6%;
    left: -20px;
    background: rgba(255, 255, 255, 0.96);
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
    max-width: 265px;
    animation: badgeFloatSlowReverse 5.5s ease-in-out infinite alternate;
}

.badge-bottom-left .badge-head {
    font-size: 0.88rem;
    font-weight: 800;
}

.badge-bottom-left .badge-desc {
    font-size: 0.74rem;
    line-height: 1.35;
}

/* Badge 3: Bottom-Right Social Proof Capsule */
.badge-bottom-right {
    bottom: -15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #e2e8f0;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
    max-width: 270px;
    padding: 0.65rem 1.15rem;
    border-radius: 50px;
}

.badge-live-pulse {
    width: 8px;
    height: 8px;
    background-color: #22c55e;
    border-radius: 50%;
    display: inline-block;
    animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

@keyframes badgeFloatSlow {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(-7px);
    }
}

@keyframes badgeFloatSlowReverse {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(6px);
    }
}

/* Bottom Floating Capsule Strip (Matching Reference Mockup) */
.about-bottom-capsule-strip {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 9999px;
    padding: 1.15rem 2.25rem;
    box-shadow: 0 16px 40px -10px rgba(15, 23, 42, 0.08), 0 0 1px 1px rgba(15, 23, 42, 0.02);
    width: 100%;
}

.capsule-grid-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.75rem;
}

.capsule-item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.capsule-icon-circle {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: transform 0.25s ease;
}

.capsule-item:hover .capsule-icon-circle {
    transform: scale(1.1);
}

.capsule-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.25;
}

.capsule-title {
    font-size: 0.96rem;
    font-weight: 800;
    letter-spacing: -0.2px;
    white-space: nowrap;
}

.capsule-subtitle {
    font-size: 0.76rem;
    color: #64748b;
    font-weight: 500;
    white-space: nowrap;
}

.capsule-divider {
    width: 1px;
    height: 38px;
    background-color: #e2e8f0;
    flex-shrink: 0;
}

@media (max-width: 1199.98px) {
    .about-bottom-capsule-strip {
        padding: 1rem 1.5rem;
    }

    .capsule-title {
        font-size: 0.88rem;
    }

    .capsule-subtitle {
        font-size: 0.72rem;
    }
}

@media (max-width: 991.98px) {
    .about-main-headline {
        font-size: 2.15rem;
    }

    .about-bottom-capsule-strip {
        border-radius: 18px;
        padding: 1.15rem 1rem;
    }

    .capsule-grid-wrapper {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .capsule-item {
        flex: 1 1 calc(50% - 0.75rem);
        min-width: 130px;
    }

    .capsule-divider {
        display: none;
    }
}

/* 5.2 Premium What We Offer Cards Redesign */
.services-overview-section {
    background-color: #fafbfc;
}

.services-bg-decor {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(rgba(223, 38, 24, 0.03) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}

.premium-service-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.85);
    border-radius: 20px;
    padding: 1.75rem 1.5rem 1.25rem;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.premium-service-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #DF2618 0%, #FF9100 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.premium-service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 35px -8px rgba(15, 23, 42, 0.1), 0 0 1px 1px rgba(223, 38, 24, 0.08);
    border-color: rgba(223, 38, 24, 0.25);
}

.premium-service-card:hover::after {
    opacity: 1;
}

.service-icon-bubble {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #FFF1F0 0%, #FFEBE8 100%);
    color: #DF2618;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all 0.3s ease;
    border: 1px solid rgba(223, 38, 24, 0.12);
}

.premium-service-card:hover .service-icon-bubble {
    background: linear-gradient(135deg, #DF2618 0%, #c41e12 100%);
    color: #ffffff;
    transform: rotate(5deg) scale(1.08);
    box-shadow: 0 8px 18px rgba(223, 38, 24, 0.28);
}

.service-index-number {
    font-size: 1.6rem;
    font-weight: 900;
    font-family: var(--font-heading);
    color: #f1f5f9;
    letter-spacing: -1px;
    transition: color 0.3s ease;
}

.premium-service-card:hover .service-index-number {
    color: #fed7aa;
}

.service-card-heading {
    font-size: 1.15rem;
    letter-spacing: -0.2px;
    line-height: 1.3;
}

.service-card-text {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #64748b !important;
}

.service-read-btn {
    font-size: 0.86rem;
    font-weight: 700;
    color: #DF2618;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.service-read-btn i {
    transition: transform 0.2s ease;
}

.premium-service-card:hover .service-read-btn {
    color: #991b1b;
}

.premium-service-card:hover .service-read-btn i {
    transform: translateX(4px);
}

.service-verified-tag {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
}

.service-card-highlights {
    border-top: 1px solid #f1f5f9;
    padding-top: 0.75rem;
    margin-top: 0.75rem;
}

.service-highlight-item {
    font-size: 0.78rem;
    color: #475569;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 0.35rem;
}

.service-highlight-item i {
    color: #DF2618;
    font-size: 0.85rem;
    margin-top: 1px;
    flex-shrink: 0;
}

.service-card-footer {
    border-top: 1px solid #f1f5f9;
    padding-top: 0.85rem;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ========================================================
   4.4 Modern Catalog Bento Service Cards & 8-Slot Symmetrical Layout
   ======================================================== */
.catalog-bento-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 22px;
    padding: 1.6rem 1.4rem 1.25rem;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.catalog-bento-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--srv-accent, #DF2618);
    opacity: 0.8;
    transition: height 0.3s ease, opacity 0.3s ease;
}

.catalog-bento-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.12), 0 0 0 1px var(--srv-accent, rgba(223, 38, 24, 0.25));
    border-color: transparent;
}

.catalog-bento-card:hover::before {
    height: 5px;
    opacity: 1;
}

.catalog-watermark-num {
    position: absolute;
    top: 10px;
    right: 18px;
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1;
    color: #0f172a;
    opacity: 0.05;
    user-select: none;
    pointer-events: none;
    font-family: var(--font-heading);
    transition: all 0.3s ease;
}

.catalog-bento-card:hover .catalog-watermark-num {
    opacity: 0.12;
    transform: scale(1.1);
    color: var(--srv-accent, #DF2618);
}

.catalog-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.catalog-bento-card:hover .catalog-icon-box {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
}

.catalog-category-pill {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 0.25rem 0.65rem;
    border-radius: 50px;
}

.catalog-card-title {
    font-size: 1.12rem;
    line-height: 1.35;
    letter-spacing: -0.2px;
    transition: color 0.25s ease;
}

.catalog-bento-card:hover .catalog-card-title a {
    color: var(--srv-accent, #DF2618) !important;
}

.catalog-card-desc {
    font-size: 0.85rem;
    line-height: 1.55;
    color: #64748b;
}

.catalog-feature-tag {
    font-size: 0.76rem;
    font-weight: 700;
    padding: 0.25rem 0.55rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.catalog-explore-btn {
    font-size: 0.84rem;
    font-weight: 700;
    color: #0f172a;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.25s ease;
}

.catalog-explore-btn i {
    font-size: 0.95rem;
    transition: transform 0.25s ease, color 0.25s ease;
}

.catalog-bento-card:hover .catalog-explore-btn {
    color: var(--srv-accent, #DF2618);
}

.catalog-bento-card:hover .catalog-explore-btn i {
    transform: translateX(4px);
    color: var(--srv-accent, #DF2618);
}

/* Standout 8th Custom Plan Hero Bento Card */
.custom-move-bento-card {
    background: linear-gradient(145deg, #11141c 0%, #1e293b 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(17, 20, 28, 0.2);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-move-bento-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 45px rgba(223, 38, 24, 0.25), 0 0 0 1px rgba(255, 145, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.25);
}

.bento-ambient-glow {
    position: absolute;
    top: -30%;
    right: -30%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(223, 38, 24, 0.45) 0%, rgba(255, 145, 0, 0.2) 60%, transparent 80%);
    filter: blur(35px);
    pointer-events: none;
}

.custom-pill-badge {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Service Filter Bar & Quick Category Navigation */
.services-filter-nav {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    padding: 6px;
    border-radius: 50px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.service-filter-pill {
    border: none;
    background: transparent;
    color: #475569;
    font-size: 0.84rem;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 50px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.service-filter-pill:hover {
    color: #DF2618;
    background: #fff5f5;
}

.service-filter-pill.active {
    background: linear-gradient(135deg, #DF2618 0%, #c41e12 100%);
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(223, 38, 24, 0.35);
}

.service-meta-tag {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 6px;
}

.service-turnaround-pill {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 0.74rem;
    color: #475569;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Services Trust Strip */
.services-trust-strip {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.85);
    border-radius: 18px;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);
}

.trust-strip-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.trust-strip-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #FFF1F0 0%, #FFEBE8 100%);
    border: 1px solid rgba(223, 38, 24, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #DF2618;
    flex-shrink: 0;
}

.trust-strip-title {
    font-size: 0.86rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
}

.trust-strip-desc {
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.35;
}

/* Services Bottom CTA Box (Ultra-Modern Premium Showcase Banner) */
.services-bottom-cta {
    background: linear-gradient(135deg, #11141c 0%, #1c2230 50%, #291a18 100%);
    border: 1px solid rgba(255, 145, 0, 0.3);
    border-radius: 28px;
    box-shadow: 0 20px 45px -10px rgba(17, 20, 28, 0.4), 0 0 1px 1px rgba(255, 145, 0, 0.2);
}

.cta-glow-circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
}

.cta-glow-circle.circle-1 {
    width: 320px;
    height: 320px;
    top: -120px;
    right: -60px;
    background: radial-gradient(circle, rgba(223, 38, 24, 0.35) 0%, transparent 70%);
}

.cta-glow-circle.circle-2 {
    width: 260px;
    height: 260px;
    bottom: -100px;
    left: 20%;
    background: radial-gradient(circle, rgba(255, 145, 0, 0.25) 0%, transparent 70%);
}

.cta-badge-pill {
    background: rgba(223, 38, 24, 0.25);
    border: 1px solid rgba(223, 38, 24, 0.4);
    color: #ff6b5e;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 0.35rem 0.85rem;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    letter-spacing: 0.3px;
}

.cta-headline {
    font-size: 2.1rem;
    letter-spacing: -0.5px;
    line-height: 1.25;
}

.cta-subtext {
    font-size: 0.95rem;
    line-height: 1.65;
    max-width: 620px;
}

/* CTA Primary Action Button */
.btn-cta-primary {
    background: linear-gradient(135deg, #DF2618 0%, #c41e12 100%);
    color: #ffffff !important;
    font-size: 0.96rem;
    font-weight: 800;
    padding: 0.9rem 1.65rem;
    border-radius: 14px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 8px 22px rgba(223, 38, 24, 0.45);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-cta-primary:hover {
    background: linear-gradient(135deg, #b91c10 0%, #991b1b 100%);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(223, 38, 24, 0.6);
}

.btn-cta-primary i {
    transition: transform 0.2s ease;
}

.btn-cta-primary:hover i {
    transform: translateX(4px);
}

/* CTA Secondary Phone Button */
.btn-cta-phone {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ffffff !important;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.85rem 1.65rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.btn-cta-phone:hover {
    background: #ffffff;
    color: #0f172a !important;
    border-color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15);
}

/* 5.3 Connected Timeline Process Section Redesign */
.process-section {
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFDFB 50%, #FFF7ED 100%);
}

.process-timeline-wrapper {
    padding-top: 1rem;
}

/* ========================================================
   5.3 Premium Interactive Roadmap & Bento Process Workflow
   ======================================================== */
.process-section {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 50%, #f8fafc 100%);
    position: relative;
}

.process-bg-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(223, 38, 24, 0.04) 1.2px, transparent 1.2px),
        radial-gradient(rgba(255, 145, 0, 0.04) 1.2px, transparent 1.2px);
    background-size: 32px 32px;
    background-position: 0 0, 16px 16px;
    opacity: 0.85;
}

/* Milestone Progress Tracker (Desktop & Tablet) */
.roadmap-milestone-tracker {
    max-width: 980px;
    margin: 0 auto 3.25rem auto;
}

.milestone-track-bg {
    top: 20px;
    left: 8%;
    right: 8%;
    height: 4px;
    border-radius: 99px;
    background: #e2e8f0;
    z-index: 0;
    overflow: hidden;
}

.milestone-track-progress {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #DF2618 0%, #FF9100 35%, #2563EB 70%, #059669 100%);
    border-radius: 99px;
}

.milestone-dot-badge {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.95rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.roadmap-milestone-tracker:hover .milestone-dot-badge {
    transform: scale(1.08);
}

.milestone-node-label {
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Roadmap Bento Card */
.roadmap-bento-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 24px !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.roadmap-bento-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--card-accent, #DF2618);
    opacity: 0.85;
    transition: height 0.3s ease, opacity 0.3s ease;
}

.roadmap-bento-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.12), 0 0 0 1px var(--card-accent, rgba(223, 38, 24, 0.3));
    border-color: transparent;
}

.roadmap-bento-card:hover::before {
    height: 5px;
    opacity: 1;
}

/* Giant Watermark Number */
.roadmap-watermark-num {
    position: absolute;
    top: 8px;
    right: 18px;
    font-size: 3.8rem;
    font-weight: 900;
    line-height: 1;
    color: #0f172a;
    opacity: 0.04;
    user-select: none;
    pointer-events: none;
    font-family: 'Outfit', sans-serif;
    transition: all 0.35s ease;
}

.roadmap-bento-card:hover .roadmap-watermark-num {
    opacity: 0.1;
    transform: scale(1.08) translateY(-2px);
    color: var(--card-accent, #DF2618);
}

/* Icon Box */
.roadmap-icon-box {
    width: 58px;
    height: 58px;
    border-radius: 16px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.roadmap-bento-card:hover .roadmap-icon-box {
    transform: scale(1.1) rotate(4deg);
    box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.12);
}

/* Stage Pill */
.roadmap-stage-pill {
    padding: 0.35rem 0.85rem;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    gap: 0.45rem !important;
}

.pulse-dot-sm {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.3rem;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(223, 38, 24, 0.4);
    animation: pulseDotSmall 2s infinite;
}

@keyframes pulseDotSmall {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(223, 38, 24, 0.5);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(223, 38, 24, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(223, 38, 24, 0);
    }
}

/* Card Typography */
.roadmap-card-title {
    font-size: 1.15rem;
    line-height: 1.35;
    letter-spacing: -0.2px;
    transition: color 0.25s ease;
}

.roadmap-bento-card:hover .roadmap-card-title {
    color: var(--card-accent, #DF2618) !important;
}

.roadmap-card-desc {
    line-height: 1.6;
    color: #64748b;
    font-size: 0.875rem;
}

/* Card Bottom Micro-Trust Feature Tag */
.roadmap-card-footer {
    border-color: rgba(241, 245, 249, 1) !important;
}

.roadmap-trust-pill {
    font-size: 0.78rem;
    letter-spacing: 0.2px;
    gap: 0.5rem !important;
}

.roadmap-trust-pill i {
    font-size: 0.92rem;
    margin-right: 0.25rem;
    flex-shrink: 0;
}

.roadmap-check-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.roadmap-bento-card:hover .roadmap-check-circle {
    background: var(--card-accent, #DF2618);
    color: #ffffff !important;
    transform: translateX(3px);
}

/* Connecting Flow Chevron between cards (Desktop) */
.roadmap-flow-arrow {
    position: absolute;
    top: 50%;
    right: -13px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
    color: #94a3b8;
    z-index: 10;
    font-size: 0.75rem;
    transition: all 0.3s ease;
}

.roadmap-col:hover .roadmap-flow-arrow {
    border-color: #DF2618;
    color: #DF2618;
    transform: translateY(-50%) scale(1.15);
    box-shadow: 0 6px 14px rgba(223, 38, 24, 0.25);
}

/* Bottom Assurance Strip */
.roadmap-trust-strip {
    background: #ffffff;
    border-radius: 24px !important;
    border: 1px solid rgba(226, 232, 240, 0.9);
    position: relative;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

.trust-strip-ambient-glow {
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 145, 0, 0.08), transparent 70%);
    pointer-events: none;
}

/* 5.4 Asymmetric Why Sri Laxmi Section Redesign */
.why-choose-section {
    background: #f8fafc;
}

.why-spotlight-card {
    background: linear-gradient(135deg, #DF2618 0%, #b91c10 60%, #991b1b 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 28px !important;
}

.spotlight-flare {
    position: absolute;
    width: 350px;
    height: 350px;
    top: -120px;
    right: -100px;
    background: radial-gradient(circle, rgba(255, 145, 0, 0.4) 0%, transparent 70%);
    pointer-events: none;
    filter: blur(50px);
}

.trust-tile-card {
    border-radius: 22px !important;
    border: 1px solid rgba(226, 232, 240, 0.85) !important;
    background: #ffffff;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.trust-tile-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 32px -8px rgba(15, 23, 42, 0.1) !important;
    border-color: rgba(223, 38, 24, 0.25) !important;
}

.trust-tile-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #FFF1F0;
    color: #DF2618;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    transition: all 0.25s ease;
}

.trust-tile-card:hover .trust-tile-icon-box {
    background: #DF2618;
    color: #ffffff;
    transform: scale(1.08) rotate(4deg);
}

.trust-tile-step {
    font-size: 1.4rem;
    font-weight: 900;
    font-family: var(--font-heading);
    color: #e2e8f0;
    letter-spacing: -1px;
    transition: color 0.3s ease;
}

.trust-tile-card:hover .trust-tile-step {
    color: #fed7aa;
}

.trust-tile-title {
    font-size: 1.05rem;
    letter-spacing: -0.2px;
    line-height: 1.35;
}

.trust-tile-desc {
    line-height: 1.55;
    color: #64748b !important;
}

/* 5.5 Clean City Tiles Redesign (Compact Names Without Bulky Text) */
.service-areas-section {
    background: linear-gradient(180deg, #FFFDF8 0%, #FFF9EE 50%, #FFF5E4 100%);
    border-top: 1px solid rgba(255, 145, 0, 0.15);
    border-bottom: 1px solid rgba(255, 145, 0, 0.15);
}

.clean-city-tile {
    border-radius: 16px !important;
    border: 1px solid rgba(235, 218, 195, 0.8) !important;
    background: #ffffff;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.clean-city-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -6px rgba(15, 23, 42, 0.08) !important;
    border-color: rgba(223, 38, 24, 0.35) !important;
}

.city-tile-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    transition: transform 0.2s ease;
}

.clean-city-tile:hover .city-tile-icon {
    transform: scale(1.1);
}

.city-tile-name {
    font-size: 0.96rem;
    letter-spacing: -0.2px;
    line-height: 1.2;
}

.clean-city-tile:hover .city-tile-name {
    color: #DF2618 !important;
}

.city-hub-tag {
    font-size: 0.7rem;
    display: block;
    line-height: 1.2;
    margin-top: 2px;
}

.city-sub-text {
    font-size: 0.72rem;
    display: block;
    line-height: 1.2;
    margin-top: 2px;
}

.city-tile-arrow {
    font-size: 0.85rem;
    transition: transform 0.2s ease, color 0.2s ease;
}

.clean-city-tile:hover .city-tile-arrow {
    transform: translateX(4px);
    color: #DF2618 !important;
}

/* Compact Modern FAQ Styling */
.faq-section {
    background: linear-gradient(180deg, #fbfcfe 0%, #f4f6fa 100%);
}

.faq-ambient-glow {
    position: absolute;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(223, 38, 24, 0.05) 0%, transparent 70%);
    top: -50px;
    right: -50px;
    pointer-events: none;
    z-index: 0;
}

.faq-compact-card {
    transition: all 0.25s ease;
    border-color: #e5e9f0 !important;
}

.faq-compact-card:hover {
    border-color: rgba(223, 38, 24, 0.35) !important;
    box-shadow: 0 8px 24px rgba(17, 20, 28, 0.06) !important;
    transform: translateY(-2px);
}

.faq-card-toggle {
    cursor: pointer;
    font-size: 0.95rem;
}

.faq-num-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(223, 38, 24, 0.08);
    color: #DF2618;
    font-size: 0.75rem;
    font-weight: 800;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.faq-compact-card:hover .faq-num-pill {
    background: #DF2618;
    color: #ffffff;
}

.faq-q-text {
    line-height: 1.35;
    font-size: 0.92rem;
    transition: color 0.2s ease;
}

.faq-card-toggle:not(.collapsed) .faq-q-text {
    color: #DF2618 !important;
}

.faq-toggle-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f1f4f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #4a5568;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.faq-card-toggle:not(.collapsed) .faq-toggle-circle {
    transform: rotate(180deg);
    background: #DF2618;
    color: #ffffff;
}

.faq-answer-inner {
    line-height: 1.6;
    font-size: 0.86rem;
    color: #4a5568 !important;
}

.faq-quick-strip {
    border-color: #e5e9f0 !important;
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%) !important;
}

.faq-strip-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(223, 38, 24, 0.25);
}

/* 5. Headquarters / Dispatch Hub Styling */
.hq-section {
    background: linear-gradient(180deg, #f8fafc 0%, #edf2f7 100%);
}

.hq-glow-blob-1 {
    position: absolute;
    width: 420px;
    height: 420px;
    top: -100px;
    left: -100px;
    background: radial-gradient(circle, rgba(223, 38, 24, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.hq-glow-blob-2 {
    position: absolute;
    width: 360px;
    height: 360px;
    bottom: -80px;
    right: -80px;
    background: radial-gradient(circle, rgba(255, 145, 0, 0.09) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.hq-glass-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(226, 232, 240, 0.9) !important;
    border-radius: 24px;
}

.hq-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    display: inline-block;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
    animation: hqPulse 2s infinite;
}

@keyframes hqPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.hq-title {
    font-size: 1.85rem;
    line-height: 1.25;
    letter-spacing: -0.5px;
}

.hq-info-tile {
    transition: all 0.22s ease;
    border-color: #e5e9f0 !important;
}

.hq-info-tile:hover {
    border-color: rgba(223, 38, 24, 0.4) !important;
    box-shadow: 0 8px 20px rgba(17, 20, 28, 0.06) !important;
    transform: translateY(-2px);
}

.hq-tile-icon {
    width: 44px;
    height: 44px;
}

.hq-map-window {
    border-color: #e2e8f0 !important;
    border-radius: 24px;
    background: #ffffff;
}

.hq-window-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
}

.dot-red {
    background: #ff5f56;
}

.dot-yellow {
    background: #ffbd2e;
}

.dot-green {
    background: #27c93f;
}

.hq-map-pin-pill {
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(226, 232, 240, 0.8) !important;
}

.hq-pin-icon {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
    box-shadow: 0 4px 10px rgba(223, 38, 24, 0.3);
}

/* 6. Site Footer */
.site-footer {
    background-color: #11141c;
    color: #ffffff;
    font-size: 0.94rem;
}

.footer-title {
    letter-spacing: 1px;
}

.footer-links a {
    color: #a0aec0;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.footer-links a:hover {
    color: #ffffff;
    padding-left: 4px;
}

.footer-areas-strip {
    line-height: 1.8;
}

/* Footer Direct Coordinator Call Box */
.footer-direct-call {
    background: #1c2230 !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 14px !important;
    padding: 0.85rem 1.15rem !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
    transition: all var(--transition-fast);
}

.footer-direct-call:hover {
    background: #242c3d !important;
    border-color: rgba(223, 38, 24, 0.5) !important;
    transform: translateY(-2px);
}

.footer-call-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    background: rgba(223, 38, 24, 0.18);
    color: #ff5722 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

.footer-call-label {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

.footer-call-link {
    color: #ffffff !important;
    font-size: 1.05rem !important;
    font-family: var(--font-heading);
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    transition: color var(--transition-fast);
}

.footer-call-link:hover {
    color: #ff9100 !important;
}

.footer-bottom {
    background-color: #0b0d12;
}

/* 7. Inner Page Breadcrumb Hero Banner (Cinematic Highway Background) */
.page-breadcrumb-banner {
    background-color: #0c1017;
    min-height: 190px;
}

.breadcrumb-banner-bg {
    background-image: url('../images/breadcrumb-banner.jpg');
    background-size: cover;
    background-position: center 30%;
    transform: scale(1.02);
    filter: saturate(1.1);
}

.breadcrumb-banner-overlay {
    background: linear-gradient(90deg, rgba(12, 16, 23, 0.94) 0%, rgba(12, 16, 23, 0.85) 55%, rgba(12, 16, 23, 0.65) 100%);
}

.breadcrumb-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #DF2618;
    box-shadow: 0 0 0 2px rgba(223, 38, 24, 0.4);
    display: inline-block;
    animation: breadcrumbPulse 2s infinite;
}

@keyframes breadcrumbPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(223, 38, 24, 0.7);
    }

    70% {
        box-shadow: 0 0 0 7px rgba(223, 38, 24, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(223, 38, 24, 0);
    }
}

.page-breadcrumb-heading {
    font-size: 2.15rem;
    letter-spacing: -0.5px;
}

.hover-white {
    transition: color 0.2s ease;
}

.hover-white:hover {
    color: #ffffff !important;
}

.backdrop-blur {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* 7. Inner Page Hero Banner */
.page-hero-banner {
    background: linear-gradient(135deg, #181d28 0%, #252e40 100%);
    color: #ffffff;
    padding: 3.5rem 0;
    position: relative;
}

.page-hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.page-hero-subtitle {
    color: #cbd5e1;
    font-size: 1.08rem;
    max-width: 600px;
}

/* 7.1 About Us Modern Editorial Magazine Showcase */
.about-editorial-hero {
    background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
    border-bottom: 1px solid #edf2f7;
}

.editorial-glow-left {
    position: absolute;
    width: 450px;
    height: 450px;
    top: -100px;
    left: -120px;
    background: radial-gradient(circle, rgba(223, 38, 24, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.editorial-glow-right {
    position: absolute;
    width: 400px;
    height: 400px;
    bottom: -60px;
    right: -80px;
    background: radial-gradient(circle, rgba(255, 145, 0, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.editorial-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #DF2618;
    display: inline-block;
    box-shadow: 0 0 0 3px rgba(223, 38, 24, 0.25);
    animation: editorialPulse 2s infinite;
}

@keyframes editorialPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(223, 38, 24, 0.6);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(223, 38, 24, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(223, 38, 24, 0);
    }
}

.editorial-image-frame {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    border-color: #e5e9f0 !important;
}

.editorial-image-frame:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(17, 24, 39, 0.1) !important;
}

.editorial-main-img {
    transition: transform 0.5s ease;
}

.editorial-image-frame:hover .editorial-main-img {
    transform: scale(1.02);
}

.editorial-glass-badge {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(226, 232, 240, 0.9) !important;
    transition: transform 0.25s ease;
}

.editorial-glass-badge:hover {
    transform: translateY(-2px);
}

.editorial-stats-ribbon {
    border-color: #e5e9f0 !important;
    background: linear-gradient(135deg, #ffffff 0%, #fbfcfe 100%) !important;
}

@media (min-width: 768px) {
    .border-end-md {
        border-right: 1px solid #e5e9f0;
    }
}

/* 7.2 About Us Mission & Standards Styling */
.about-mission-section {
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF9 60%, #FAFBFD 100%);
    position: relative;
}

.mission-modern-card {
    background: #ffffff !important;
    border: 1px solid #e5e9f0 !important;
    border-radius: 24px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05) !important;
    position: relative;
    overflow: hidden;
}

.mission-modern-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 42px rgba(17, 24, 39, 0.1) !important;
    border-color: rgba(223, 38, 24, 0.35) !important;
}

.mission-card-accent-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.mission-card-accent-bar.accent-red {
    background: linear-gradient(90deg, #DF2618 0%, #FF9100 100%);
}

.mission-card-accent-bar.accent-orange {
    background: linear-gradient(90deg, #FF9100 0%, #DF2618 100%);
}

.mission-card-watermark {
    position: absolute;
    right: -10px;
    bottom: -15px;
    font-size: 5.5rem;
    font-weight: 900;
    color: rgba(17, 24, 39, 0.03);
    letter-spacing: -2px;
    pointer-events: none;
    user-select: none;
    line-height: 1;
}

.mission-icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s ease;
}

.mission-modern-card:hover .mission-icon-circle {
    transform: scale(1.08);
}

.mission-pillar-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.mission-pillar-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0.75rem 0.95rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #edf2f7;
    transition: all 0.25s ease;
}

.mission-pillar-item:hover {
    background: #ffffff;
    border-color: rgba(223, 38, 24, 0.25);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.mission-pillar-icon {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    margin-top: 1px;
}

/* 5.3 About Standards & Protocol Section Upgrade */
.about-standards-section {
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF9 40%, #FFF8EF 100%);
    position: relative;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
}

.standards-bg-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.standards-shape-circle {
    position: absolute;
    top: -100px;
    right: -80px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 145, 0, 0.08) 0%, rgba(223, 38, 24, 0.02) 70%, transparent 100%);
}

.standards-dot-matrix {
    position: absolute;
    bottom: 30px;
    left: 4%;
    width: 120px;
    height: 80px;
    background-image: radial-gradient(#cbd5e1 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    opacity: 0.45;
}

/* Protocol Bento Cards */
.protocol-card {
    background: #ffffff;
    border: 1px solid #e8ecf2 !important;
    border-radius: 20px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.03);
}

.protocol-card:hover {
    transform: translateY(-6px);
    border-color: rgba(223, 38, 24, 0.3) !important;
    box-shadow: 0 20px 35px -10px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(223, 38, 24, 0.15) !important;
}

.protocol-step-badge {
    font-size: 0.72rem;
    font-weight: 800;
    color: #64748b;
    background: #f1f5f9;
    padding: 0.3rem 0.65rem;
    border-radius: 50px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    transition: all 0.25s ease;
}

.protocol-card:hover .protocol-step-badge {
    background: #DF2618;
    color: #ffffff;
}

.protocol-step-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.protocol-card:hover .protocol-step-icon {
    transform: scale(1.12) rotate(4deg);
}

.protocol-card-title {
    font-size: 0.98rem;
    line-height: 1.35;
    transition: color 0.2s ease;
}

.protocol-card:hover .protocol-card-title {
    color: #DF2618 !important;
}

.protocol-card-desc {
    color: #556987;
    font-size: 0.84rem;
    line-height: 1.55;
}

.protocol-card-footer {
    border-color: #f1f5f9 !important;
}

.protocol-badge-tag {
    font-size: 0.8rem;
    letter-spacing: 0.2px;
}

.protocol-verified-tag {
    font-size: 0.76rem;
    color: #64748b;
    font-weight: 500;
}

/* 6th Card: Symmetrical CTA Bento Card */
.protocol-cta-card {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px !important;
    position: relative;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.25);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.protocol-cta-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 45px rgba(223, 38, 24, 0.22);
    border-color: rgba(223, 38, 24, 0.4);
}

.protocol-cta-bg-glow {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(223, 38, 24, 0.35) 0%, transparent 70%);
    pointer-events: none;
}

.protocol-cta-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Call Specialist Pill Button in Header */
.btn-protocol-call {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    padding: 0.45rem 1.25rem 0.45rem 0.65rem;
    transition: all 0.25s ease;
}

.btn-protocol-call:hover {
    border-color: #DF2618;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.call-pulse-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #FEECEB;
    color: #DF2618;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    box-shadow: 0 0 0 3px rgba(223, 38, 24, 0.15);
    transition: all 0.25s ease;
}

.btn-protocol-call:hover .call-pulse-circle {
    background: #DF2618;
    color: #ffffff;
    box-shadow: 0 0 0 4px rgba(223, 38, 24, 0.25);
}

/* Legacy Standard Card Support */
.standard-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border-color: #e8ecf2 !important;
}

.standard-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(17, 24, 39, 0.08) !important;
    border-color: rgba(223, 38, 24, 0.35) !important;
}

.standard-num-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(223, 38, 24, 0.08);
    color: #DF2618;
    font-weight: 800;
    font-size: 0.92rem;
    transition: all 0.25s ease;
}

.standard-card:hover .standard-num-pill {
    background: #DF2618;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(223, 38, 24, 0.3);
}

.trust-feature-card {
    transition: all 0.25s ease;
    border-color: #e8ecf2 !important;
}

.trust-feature-card:hover {
    transform: translateY(-3px);
    background: #ffffff !important;
    box-shadow: 0 12px 28px rgba(17, 24, 39, 0.06) !important;
    border-color: rgba(223, 38, 24, 0.35) !important;
}

.trust-card-icon {
    transition: transform 0.25s ease;
}

.trust-feature-card:hover .trust-card-icon {
    transform: scale(1.15);
}

/* 8. Quick Quote Popup Modal (Matches Hero Slider Form Exactly) */
.quote-popup-modal .modal-dialog {
    max-width: 440px;
}

.quote-popup-modal .modal-content {
    background: #ffffff;
    border-radius: 20px;
}

.quote-popup-modal .modal-backdrop.show {
    opacity: 0.6;
    backdrop-filter: blur(4px);
}

/* 7.3 About Us Headquarters Box & 16 Areas Showcase */
.about-hq-box {
    background: linear-gradient(135deg, #ffffff 0%, #fffcf8 100%);
    border: 1px solid rgba(255, 145, 0, 0.25);
    border-radius: 16px;
    transition: all 0.25s ease;
}

.about-hq-box:hover {
    border-color: #DF2618;
    box-shadow: 0 10px 25px rgba(223, 38, 24, 0.08);
}

.serving-area-pill {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.65rem 0.9rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: #1e293b;
}

.serving-area-pill:hover {
    border-color: #DF2618;
    background: #FFFDF9;
    color: #DF2618;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(223, 38, 24, 0.1);
}

.serving-area-pill.is-hub {
    border-color: rgba(223, 38, 24, 0.4);
    background: #FFF5F4;
    font-weight: 700;
}

/* 9. Service Details Template Specific Styles */
.service-detail-hero-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 24px;
    padding: 2.25rem 2rem;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
    position: relative;
    overflow: hidden;
}

.service-detail-hero-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #DF2618 0%, #FF9100 100%);
}

.service-feature-pill-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.service-feature-badge {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #334155;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.service-feature-badge:hover {
    background: #fff5f5;
    border-color: rgba(223, 38, 24, 0.3);
    color: #DF2618;
}

/* Suitability / Move Types Grid */
.service-spec-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 1.35rem 1.25rem;
    height: 100%;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    display: flex;
    flex-direction: column;
}

.service-spec-card:hover {
    transform: translateY(-4px);
    border-color: rgba(223, 38, 24, 0.3);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.spec-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #FFF1F0 0%, #FFEBE8 100%);
    color: #DF2618;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 0.85rem;
}

.service-spec-card:hover .spec-icon-box {
    background: linear-gradient(135deg, #DF2618 0%, #c41e12 100%);
    color: #ffffff;
}

/* 5-Layer Packaging Cards */
.layer-pack-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.25rem;
    height: 100%;
    transition: all 0.2s ease;
}

.layer-pack-card:hover {
    border-color: #DF2618;
    box-shadow: 0 8px 20px rgba(223, 38, 24, 0.06);
}

.layer-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #DF2618;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 800;
    margin-bottom: 0.65rem;
}

/* Execution Timeline Nodes */
.detail-timeline-node {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.25rem 1.35rem;
    margin-bottom: 1rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.detail-timeline-node:hover {
    border-color: rgba(223, 38, 24, 0.35);
    background: #fffcfb;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.timeline-step-badge {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, #DF2618 0%, #c41e12 100%);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(223, 38, 24, 0.3);
}

/* Sidebar Services Navigation List */
.sidebar-services-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.service-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    font-size: 0.86rem;
    font-weight: 600;
    color: #334155;
    text-decoration: none;
    background: #f8fafc;
    border: 1px solid transparent;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-nav-link:hover {
    background: #ffffff;
    border-color: rgba(223, 38, 24, 0.25);
    color: #DF2618;
    transform: translateX(3px);
}

.service-nav-link.active {
    background: linear-gradient(135deg, #DF2618 0%, #c41e12 100%);
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(223, 38, 24, 0.3);
}

.service-nav-link.active i {
    color: #ffffff !important;
}

/* Sidebar Support Card */
.sidebar-support-card {
    background: linear-gradient(135deg, #11141c 0%, #1e2433 100%);
    border: 1px solid rgba(255, 145, 0, 0.25);
    border-radius: 20px;
    padding: 1.5rem;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.sidebar-support-card::after {
    content: '';
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(223, 38, 24, 0.3) 0%, transparent 70%);
    pointer-events: none;
}

/* Move Package Specs Box */
.move-specs-container {
    background: #f8fafc;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 12px;
    padding: 8px;
}

.move-spec-row {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.85);
    border-radius: 8px;
    padding: 7px 10px;
    transition: all 0.2s ease;
}

.move-spec-row:hover {
    border-color: rgba(223, 38, 24, 0.35);
    background: #fffafa;
}

.move-spec-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 6px;
    background: #FFF1F0;
    color: #DF2618;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    border: 1px solid rgba(223, 38, 24, 0.15);
}

/* Standalone Unified Input Styles */
.unified-input-box {
    display: flex;
    align-items: center;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0 14px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    min-height: 48px;
}

.unified-input-box:hover {
    background-color: #ffffff;
    border-color: #cbd5e1;
}

.unified-input-box:focus-within {
    background-color: #ffffff;
    border-color: #DF2618;
    box-shadow: 0 0 0 3px rgba(223, 38, 24, 0.12);
}

.unified-input-box .input-icon {
    color: #94a3b8;
    font-size: 1.05rem;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    transition: color 0.2s ease;
}

.unified-input-box:focus-within .input-icon {
    color: #DF2618;
}

.unified-input-box .unified-input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: 0.92rem;
    color: #0f172a;
    padding: 10px 0;
    font-family: inherit;
    font-weight: 500;
}

.unified-input-box .unified-input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.unified-input-box .unified-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    font-size: 0.92rem;
    color: #0f172a;
}

.unified-textarea-box {
    align-items: flex-start !important;
    padding-top: 12px !important;
    min-height: 110px !important;
}

.contact-channel-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.contact-channel-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(17, 24, 39, 0.08) !important;
    border-color: rgba(223, 38, 24, 0.3) !important;
}

/* ==========================================================================
   Sri Laxmi Packers and Movers — Work Gallery Component
   ========================================================================== */

/* Gallery Trust Points Badges */
.gallery-trust-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.badge-trust-pill {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    padding: 8px 18px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #1e293b;
    transition: all 0.25s ease;
}

.badge-trust-pill:hover {
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

/* Filter Navigation Pills */
.gallery-filter-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    padding: 6px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}

.gallery-filter-btn {
    border: none;
    background: transparent;
    color: #475569;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 40px;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.gallery-filter-btn:hover {
    color: #DF2618;
    background: rgba(223, 38, 24, 0.06);
}

.gallery-filter-btn.active {
    background: #DF2618;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(223, 38, 24, 0.3);
}

.gallery-filter-btn .filter-count {
    font-size: 0.72rem;
    background: rgba(0, 0, 0, 0.08);
    color: inherit;
    padding: 2px 7px;
    border-radius: 12px;
    font-weight: 700;
}

.gallery-filter-btn.active .filter-count {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* Gallery Item Cards */
.gallery-card {
    background: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    cursor: pointer;
    position: relative;
}

.gallery-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
    border-color: rgba(223, 38, 24, 0.3);
}

/* Thumbnail Wrapper */
.gallery-thumb-box {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
    background-color: #f1f5f9;
}

@media (max-width: 767.98px) {
    .gallery-thumb-box {
        height: 230px;
    }
}

.gallery-thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-card:hover .gallery-thumb-box img {
    transform: scale(1.08);
}

/* Dark gradient overlay for badge readability */
.gallery-thumb-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.35) 0%, rgba(15, 23, 42, 0) 40%, rgba(15, 23, 42, 0.55) 100%);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.gallery-card:hover .gallery-thumb-overlay {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, rgba(15, 23, 42, 0.05) 40%, rgba(15, 23, 42, 0.65) 100%);
}

/* Badges on Thumbnail */
.gallery-badge-top {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 2;
    pointer-events: none;
}

.gallery-cat-pill {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.gallery-video-pill {
    background: rgba(223, 38, 24, 0.92);
    backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Center Video Play Icon Overlay */
.gallery-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(223, 38, 24, 0.92);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 8px 24px rgba(223, 38, 24, 0.5);
    z-index: 2;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
}

.gallery-play-btn i {
    margin-left: 3px;
    /* visual center for play icon */
}

.gallery-card:hover .gallery-play-btn {
    transform: translate(-50%, -50%) scale(1.12);
    background: #DF2618;
}

/* Zoom Hover Indicator */
.gallery-zoom-badge {
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    color: #DF2618;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.16);
    opacity: 0;
    transform: translateY(6px);
    transition: all 0.25s ease;
    z-index: 2;
}

.gallery-card:hover .gallery-zoom-badge {
    opacity: 1;
    transform: translateY(0);
}

/* Card Content Area */
.gallery-card-body {
    padding: 1.25rem 1.35rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.gallery-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 0.5rem;
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 500;
}

.gallery-card-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    margin-bottom: 0.45rem;
    transition: color 0.2s ease;
}

.gallery-card:hover .gallery-card-title {
    color: #DF2618;
}

.gallery-card-desc {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 0.85rem;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gallery-card-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.75rem;
    border-top: 1px solid #f1f5f9;
    font-size: 0.82rem;
    font-weight: 700;
    color: #DF2618;
}

.gallery-card-action i {
    transition: transform 0.2s ease;
}

.gallery-card:hover .gallery-card-action i {
    transform: translateX(4px);
}

/* Lightbox Modal Customization */
.gallery-lightbox-modal .modal-content {
    background: #0b0f19;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    color: #ffffff;
}

.gallery-lightbox-img-box {
    position: relative;
    max-height: 72vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000000;
}

.gallery-lightbox-img-box img {
    max-height: 72vh;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.gallery-modal-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: all 0.2s ease;
    z-index: 5;
}

.gallery-modal-nav-btn:hover {
    background: #DF2618;
    color: #ffffff;
    border-color: #DF2618;
}

.gallery-modal-prev {
    left: 16px;
}

.gallery-modal-next {
    right: 16px;
}

.gallery-lightbox-info {
    padding: 1.5rem 1.75rem;
    background: #111827;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
/* ==========================================================================
   22. MODERN SERVICE SPOTLIGHT HERO & VISUAL SHOWCASE (ENHANCED)
   ========================================================================== */
.service-spotlight-section {
    background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.service-spotlight-section::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -100px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(223, 38, 24, 0.05) 0%, rgba(255, 145, 0, 0.03) 50%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.service-spotlight-badge {
    background: #FFF1F0;
    border: 1px solid #FECDD3;
    color: #DF2618;
    font-size: 0.76rem;
    letter-spacing: 0.7px;
}

.service-spotlight-title {
    font-size: clamp(1.85rem, 3.2vw, 2.5rem);
    line-height: 1.25;
    letter-spacing: -0.5px;
}

.service-spotlight-lead {
    font-size: 1rem;
    line-height: 1.68;
    color: #475569;
}

.service-spotlight-tile {
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 0.95rem 1.1rem;
    transition: all 0.25s ease;
}

.service-spotlight-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px -6px rgba(0, 0, 0, 0.07) !important;
    border-color: #FECDD3;
}

.tile-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 10px;
}

.service-spotlight-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
}

.btn-spotlight-quote {
    background: linear-gradient(135deg, #DF2618 0%, #C21A0D 100%);
    color: #ffffff !important;
    height: 48px;
    padding: 0 1.6rem;
    border-radius: 50rem;
    font-weight: 700;
    font-size: 0.95rem;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.25s ease;
}

.btn-spotlight-quote:hover {
    background: linear-gradient(135deg, #b91c10 0%, #991b1b 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -3px rgba(223, 38, 24, 0.35) !important;
}

.btn-spotlight-call {
    background: #ffffff;
    color: #1e293b !important;
    height: 48px;
    border: 1px solid #cbd5e1;
    padding: 0 1.4rem;
    border-radius: 50rem;
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-spotlight-call:hover {
    background: #f8fafc;
    border-color: #DF2618;
    color: #DF2618 !important;
    transform: translateY(-2px);
}

.btn-spotlight-whatsapp {
    background: #25D366;
    color: #ffffff !important;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: none;
    transition: all 0.2s ease;
}

.btn-spotlight-whatsapp:hover {
    background: #1eb956;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 18px -2px rgba(37, 211, 102, 0.4) !important;
}

.service-spotlight-trust {
    font-size: 0.84rem;
}

/* Right Column: Premium Showcase Card */
.service-visual-spotlight-card {
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid #E2E8F0;
    padding: 1.25rem;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-visual-spotlight-card:hover {
    box-shadow: 0 25px 45px -10px rgba(0, 0, 0, 0.12) !important;
}

.spotlight-image-wrapper {
    height: 240px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background: #0f172a;
}

.spotlight-main-photo {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.service-visual-spotlight-card:hover .spotlight-main-photo {
    transform: scale(1.04);
}

.spotlight-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, transparent 40%, rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
}

.spotlight-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.3);
    animation: livePulse 2s infinite ease-in-out;
}

@keyframes livePulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.35);
    }

    50% {
        transform: scale(1.15);
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.15);
    }
}

.spotlight-guarantees-box {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}

.spotlight-guarantees-box .bi-patch-check-fill {
    color: #10B981;
}

.spotlight-quick-estimate-bar {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: 14px;
}