/* ==========================================================================
   DR Waterlock Brand Theme (Exact Logo Colors & Unified Typography)
   ========================================================================== */

:root {
    /* Rich, Vibrant Colors Extracted from DR Waterlock Logo */
    --brand-red: #D9232D;
    --brand-red-vivid: #E11D48;
    --brand-red-hover: #B91C1C;
    --brand-blue: #0284C7;
    --brand-blue-deep: #1E70B8;
    --brand-blue-hover: #0369A1;
    --brand-charcoal: #1E293B;
    --brand-dark: #0B1220;

    --pill-bg: #F0F7FF;
    --text-dark: #0F172A;
    --text-muted: #475569;

    --gradient-brand-red: linear-gradient(135deg, #E11D48 0%, #D9232D 60%, #B91C1C 100%);
    --gradient-brand-blue: linear-gradient(135deg, #38BDF8 0%, #0284C7 50%, #1E70B8 100%);
    --gradient-brand-dark: linear-gradient(180deg, #0F172A 0%, #0B1220 100%);
    --gradient-brand-text: linear-gradient(135deg, #0284C7 0%, #1E70B8 60%, #E11D48 100%);

    --shadow-dropdown: 0 16px 36px rgba(2, 132, 199, 0.16);
    --shadow-btn-red: 0 8px 24px rgba(225, 29, 72, 0.38);
    --shadow-btn-blue: 0 8px 24px rgba(2, 132, 199, 0.35);
    --shadow-form-pill: 0 20px 48px rgba(0, 0, 0, 0.45);
    --shadow-card: 0 12px 36px rgba(15, 23, 42, 0.08);

    --r-pill: 9999px;
    --r-card: 16px;
    --r-item: 10px;

    --transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    width: 100%;
}

/* Lenis Smooth Scroll Engine */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    color: var(--text-dark);
    background-color: #FFFFFF;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    min-height: 100vh;
    width: 100%;
}



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

/* ==========================================================================
   Global Color & Element Utilities (No Inline Styles Policy)
   ========================================================================== */
.text-accent-blue {
    color: #60A5FA !important;
}

.text-accent-gold {
    color: #FBBF24 !important;
}

.text-accent-green {
    color: #34D399 !important;
}

.text-accent-red {
    color: #EF4444 !important;
}

.text-emerald {
    color: #10B981 !important;
}

.text-blue-500 {
    color: #3B82F6 !important;
}

.text-blue-600 {
    color: #2563EB !important;
}

.text-amber {
    color: #F59E0B !important;
}

.text-cyan {
    color: #06B6D4 !important;
}

.fs-13-5 {
    font-size: 13.5px !important;
}

.bg-pos-center-top {
    object-position: center top !important;
}

.img-contain-white {
    object-fit: contain !important;
    background: #FFFFFF !important;
}

.ba-half-width {
    width: 50%;
}

.ba-half-pos {
    left: 50%;
}

.icon-wrap-terrace {
    background: linear-gradient(135deg, #1D4ED8, #3B82F6) !important;
}

.icon-wrap-bathroom {
    background: linear-gradient(135deg, #0891B2, #22D3EE) !important;
}

.icon-wrap-basement {
    background: linear-gradient(135deg, #7C3AED, #A78BFA) !important;
}

.icon-wrap-exterior {
    background: linear-gradient(135deg, #D97706, #FBBF24) !important;
}

.icon-wrap-industrial {
    background: linear-gradient(135deg, #DC2626, #F87171) !important;
}

.icon-wrap-repair {
    background: linear-gradient(135deg, #059669, #34D399) !important;
}

.section-photos-light {
    background: linear-gradient(160deg, #F0F4FF 0%, #FFFFFF 50%, #F8FAFC 100%) !important;
    padding-top: 70px !important;
    padding-bottom: 70px !important;
}


/* ==========================================================================
   Fix Bootstrap Duplicate Caret Arrow Issue
   ========================================================================== */
.dropdown-toggle::after,
.nav-link-capsule::after {
    display: none !important;
    content: none !important;
}

/* ==========================================================================
   1. Top Banner Strip (Dark Charcoal with Red & Blue Accents)
   ========================================================================== */
.top-promo-bar {
    background: #065d8a;
    color: #CBD5E1;
    font-size: 13.5px;
    padding: 10px 0;
    font-weight: 500;
    flex-shrink: 0;
    z-index: 1060;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.promo-tag {
    color: var(--brand-red);
    margin-right: 4px;
}

.topbar-nav-links {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
}

.topbar-nav-link {
    color: #E2E8F0 !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
}

.topbar-nav-link:hover {
    color: #38BDF8 !important;
    transform: translateY(-1px);
}

.btn-promo-pill {
    background: #10B981;
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: 11.5px;
    padding: 3px 12px;
    border-radius: var(--r-pill);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: var(--transition);
    margin-left: 4px;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.btn-promo-pill:hover {
    background: #059669;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.45);
}

.topbar-socials {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.social-icon-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: var(--transition);
}

.social-icon-btn.facebook:hover {
    background: #1877F2;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(24, 119, 242, 0.45);
    transform: translateY(-2px);
}

.social-icon-btn.instagram:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(220, 39, 67, 0.45);
    transform: translateY(-2px);
}

.social-icon-btn.linkedin:hover {
    background: #0A66C2;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(10, 102, 194, 0.45);
    transform: translateY(-2px);
}

.social-icon-btn.youtube:hover {
    background: #FF0000;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(255, 0, 0, 0.45);
    transform: translateY(-2px);
}

/* ==========================================================================
   2. Main Header Navbar (Logo Colors: Blue & Red)
   ========================================================================== */
.site-header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1060;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
    padding: 10px 0;
    flex-shrink: 0;
    transition: padding 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, box-shadow 0.3s ease;
}

.site-header.is-scrolled,
.site-header.header-fixed {
    position: sticky;
    top: 0;
    padding: 6px 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08), 0 1px 0 rgba(226, 232, 240, 0.85);
}

.site-header.is-scrolled .navbar-brand img,
.site-header.header-fixed .navbar-brand img {
    height: 48px;
    transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.navbar-brand {
    padding: 0;
    margin-right: 28px;
}

.navbar-brand img {
    height: 56px;
    width: auto;
    object-fit: contain;
    display: block;
    transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal {
    z-index: 99999;
}

.nav-capsule {
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin-bottom: 0;
}

.nav-capsule .nav-item {
    position: relative;
}

.nav-link-capsule {
    font-size: 14.5px;
    font-weight: 600;
    color: #000000 !important;
    padding: 8px 9px !important;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: var(--transition);
    white-space: nowrap;
    cursor: pointer;
}


.nav-link-capsule i.caret-icon {
    font-size: 10px;
    transition: transform 0.22s ease, color 0.22s ease;
    opacity: 0.65;
    margin-left: 2px;
    display: inline-block;
}

.nav-link-capsule.active {
    background: rgba(2, 132, 199, 0.08) !important;
    color: var(--brand-blue) !important;
    font-weight: 700;
}

.nav-link-capsule.active i.caret-icon {
    color: var(--brand-blue);
    opacity: 1;
}

.nav-link-capsule:hover,
.nav-item.dropdown:hover .nav-link-capsule {
    color: var(--brand-blue) !important;
    background: rgba(2, 132, 199, 0.05);
}

.nav-item.dropdown:hover .nav-link-capsule i.caret-icon {
    transform: rotate(180deg);
    color: var(--brand-blue);
    opacity: 1;
}

/* Dropdown Menu */
.dropdown-menu-exact {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
    padding: 8px;
    min-width: 220px;
    width: max-content;
    white-space: nowrap;
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transform-origin: top center;
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
    pointer-events: none;
    z-index: 1060;
}

.dropdown-menu-item {
    font-size: 13.5px;
    font-weight: 600;
    color: #334155;
    padding: 9px 16px;
    border-radius: 8px;
    display: block;
    white-space: nowrap;
    transition: var(--transition);
    background: transparent;
}

.dropdown-menu-item:hover,
.dropdown-menu-item.active {
    background-color: #F0F7FF;
    color: var(--brand-blue);
    padding-left: 20px;
}

@media (min-width: 992px) {
    .nav-item.dropdown:hover .dropdown-menu-exact {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
}

/* Action Button */
.btn-red-capsule {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--gradient-brand-red);
    color: #FFFFFF !important;
    font-weight: 800;
    font-size: 13.5px;
    padding: 7px 8px 7px 20px;
    border-radius: var(--r-pill);
    box-shadow: 0 6px 20px rgba(225, 29, 72, 0.35);
    border: none;
    transition: var(--transition);
    white-space: nowrap;
}

.btn-red-capsule .arrow-icon-circle {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.22);
    color: #FFFFFF;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: var(--transition);
}

.btn-red-capsule:hover {
    background: linear-gradient(135deg, #BE123C 0%, #991B1B 100%);
    box-shadow: 0 10px 28px rgba(225, 29, 72, 0.55);
    transform: translateY(-2px);
}

.btn-red-capsule:hover .arrow-icon-circle {
    background: #FFFFFF;
    color: var(--brand-red-vivid);
    transform: rotate(45deg);
}

/* Header & Top Bar Responsive Breakpoints for All Screens */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .top-promo-bar {
        font-size: 12px;
        padding: 6px 0;
    }

    .topbar-nav-link {
        font-size: 11.5px;
        gap: 5px;
    }

    .navbar-brand img {
        height: 48px;
    }

    .navbar-brand {
        margin-right: 18px;
    }

    .nav-capsule {
        gap: 2px;
    }

    .nav-link-capsule {
        font-size: 13.5px;
        padding: 7px 11px !important;
        gap: 4px;
    }

    .btn-red-capsule {
        font-size: 12.5px;
        padding: 6px 6px 6px 16px;
        gap: 8px;
    }

    .btn-red-capsule .arrow-icon-circle {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .top-promo-bar {
        font-size: 11px;
        padding: 5px 0;
    }

    .topbar-nav-link {
        font-size: 11px;
        gap: 4px;
    }

    .topbar-nav-links {
        gap: 6px !important;
    }

    .social-icon-btn {
        width: 22px;
        height: 22px;
        font-size: 10.5px;
    }

    .btn-promo-pill {
        font-size: 10.5px;
        padding: 2px 8px;
        gap: 4px;
    }

    .site-header .container {
        max-width: 100%;
        padding-left: 14px;
        padding-right: 14px;
    }

    .navbar-brand img {
        height: 40px;
    }

    .navbar-brand {
        margin-right: 10px;
    }

    .nav-capsule {
        gap: 1px;
    }

    .nav-link-capsule {
        font-size: 12px;
        padding: 5px 6px !important;
        gap: 2px;
        letter-spacing: -0.2px;
    }

    .nav-link-capsule i.caret-icon {
        font-size: 8px;
        margin-left: 1px;
    }

    .btn-red-capsule {
        font-size: 11.5px;
        padding: 5px 5px 5px 12px;
        gap: 6px;
    }

    .btn-red-capsule .arrow-icon-circle {
        width: 26px;
        height: 26px;
        font-size: 10px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .top-promo-bar {
        font-size: 11px;
        padding: 6px 0;
    }

    .topbar-nav-link {
        font-size: 11px;
        gap: 4px;
    }

    .topbar-socials {
        display: none;
    }
}

/* ==========================================================================
   3. Fullscreen Background Video Hero Banner
   ========================================================================== */
.hero-banner-section {
    position: relative;
    flex: 1 0 auto;
    min-height: calc(100vh - 132px);
    display: flex;
    align-items: center;
    background: #0B1120;
    overflow: hidden;
    padding: 40px 0 65px;
    border-radius: 50px;
    width: 97%;
    margin: 0 1% 0 auto;
}

.hero-fullscreen-video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 1;
}

.hero-fullscreen-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(11, 18, 32, 0.96) 0%, rgb(15 23 42 / 33%) 55%, rgb(2 132 199 / 0%) 100%);
    z-index: 2;
}

.hero-content-layer {
    position: relative;
    z-index: 3;
    max-width: 880px;
    text-align: left;
}

/* Top Verified Tag Badge (Clean & High-End) */
.hero-tag-badge-clean {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: #F8FAFC;
    padding: 8px 18px;
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    margin-bottom: 22px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.hero-pulse-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22C55E;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    animation: heroDotPulse 2s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes heroDotPulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }

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

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

.hero-badge-dot-sep {
    color: rgba(255, 255, 255, 0.35);
}

.badge-highlight-pan {
    color: #FBBF24;
    font-weight: 800;
}

/* Authoritative Main Headline */
.hero-headline-clean {
    font-size: clamp(38px, 4.8vw, 60px);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.15;
    letter-spacing: -1.2px;
    margin-bottom: 20px;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.6);
}

.hero-headline-accent {
    color: #60A5FA;
    background: linear-gradient(135deg, #60A5FA 0%, #38BDF8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

/* Professional Subtitle */
.hero-desc-clean {
    font-size: 16.5px;
    color: #E2E8F0;
    line-height: 1.65;
    max-width: 660px;
    margin-bottom: 32px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.hero-desc-clean strong {
    color: #FFFFFF;
    font-weight: 700;
}

/* ==========================================================================
   4. Dual CTA Action Buttons & Interactive Morphing 3D Form
   ========================================================================== */
.hero-action-morph-container {
    margin-bottom: 28px;
    position: relative;
}

.hero-initial-cta-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.btn-hero-primary {
    background: linear-gradient(135deg, #E11D48 0%, #BE123C 50%, #9F1239 100%);
    color: #FFFFFF !important;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.3px;
    padding: 14px 28px;
    border-radius: var(--r-pill);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(225, 29, 72, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.4);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-hero-primary i {
    transition: transform 0.3s ease;
}

.btn-hero-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 32px rgba(225, 29, 72, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

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

.btn-hero-call {
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    color: #FFFFFF !important;
    font-size: 15px;
    font-weight: 700;
    padding: 13px 24px;
    border-radius: var(--r-pill);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-hero-call i {
    color: #EF4444;
    font-size: 15px;
}

.btn-hero-call:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #FFFFFF;
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

/* State B: Expanded White 3D Form Pill (Morphed smoothly) */
.hero-white-3d-form {
    background: #FFFFFF;
    border: 1.5px solid #FFFFFF;
    border-radius: var(--r-pill);
    padding: 6px 6px 6px 20px;
    display: none;
    align-items: center;
    gap: 12px;
    box-shadow:
        0 20px 40px -10px rgba(0, 0, 0, 0.45),
        0 8px 18px -4px rgba(37, 99, 235, 0.22),
        inset 0 1px 0 #FFFFFF;
    max-width: 680px;
    position: relative;
    animation: morphExpand 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

@keyframes morphExpand {
    0% {
        opacity: 0;
        transform: scale(0.92) translateX(-15px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
}

.hero-white-3d-form:hover {
    box-shadow:
        0 26px 50px -10px rgba(0, 0, 0, 0.55),
        0 12px 24px -4px rgba(37, 99, 235, 0.28),
        inset 0 1px 0 #FFFFFF;
}

.hero-white-3d-form:focus-within {
    border-color: #2563EB;
    box-shadow:
        0 0 0 3.5px rgba(37, 99, 235, 0.22),
        0 22px 44px -10px rgba(0, 0, 0, 0.50);
}

.hero-3d-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 130px;
    animation: fadeInFields 0.35s 0.08s ease backwards;
}

@keyframes fadeInFields {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.hero-3d-input-group i {
    color: #2563EB;
    font-size: 14px;
    flex-shrink: 0;
}

.hero-3d-input {
    background: transparent;
    border: none;
    outline: none;
    color: #0F172A;
    font-size: 14px;
    font-weight: 600;
    width: 100%;
}

.hero-3d-input::placeholder {
    color: #64748B;
    font-weight: 500;
    font-size: 13.5px;
}

.hero-3d-divider {
    width: 1px;
    height: 24px;
    background: #E2E8F0;
    flex-shrink: 0;
    animation: fadeInFields 0.35s 0.08s ease backwards;
}

.hero-3d-otp-group {
    display: none;
    align-items: center;
    gap: 10px;
    flex: 1;
    animation: fadeInSlide 0.25s ease forwards;
}

.hero-3d-otp-group.active {
    display: flex;
}

.btn-3d-submit {
    background: linear-gradient(180deg, #F43F5E 0%, #E11D48 50%, #BE123C 100%);
    color: #FFFFFF !important;
    border: none;
    font-weight: 800;
    font-size: 13.5px;
    letter-spacing: 0.3px;
    padding: 11px 24px;
    border-radius: var(--r-pill);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    cursor: pointer;
    box-shadow:
        0 3px 0 #881337,
        0 6px 16px rgba(225, 29, 72, 0.4),
        inset 0 1px 1px rgba(255, 255, 255, 0.4);
    transition: all 0.2s ease;
    flex-shrink: 0;
    animation: slideBtnRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideBtnRight {
    0% {
        transform: translateX(-20px);
    }

    100% {
        transform: translateX(0);
    }
}

.btn-3d-submit:hover {
    background: linear-gradient(180deg, #FB7185 0%, #E11D48 45%, #9F1239 100%);
    transform: translateY(-2px);
    box-shadow:
        0 5px 0 #881337,
        0 10px 20px rgba(225, 29, 72, 0.5),
        inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

.btn-3d-submit:active {
    transform: translateY(2px);
    box-shadow:
        0 1px 0 #881337,
        0 3px 8px rgba(225, 29, 72, 0.3);
}

.hero-3d-close-btn {
    background: #F1F5F9;
    border: none;
    color: #64748B;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-right: 4px;
}

.hero-3d-close-btn:hover {
    background: #E2E8F0;
    color: #0F172A;
    transform: rotate(90deg);
}

.otp-success-banner {
    display: none;
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(52, 211, 153, 0.5);
    color: #A7F3D0;
    padding: 10px 18px;
    border-radius: var(--r-pill);
    font-size: 13.5px;
    font-weight: 600;
    margin-top: 12px;
    max-width: 660px;
    backdrop-filter: blur(10px);
}

/* Trust Indicators Bar */
.hero-trust-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.hero-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: #CBD5E1;
}

.hero-trust-badge i {
    font-size: 15px;
}

/* ==========================================================================
   3. Brand Clients Slider (AutoPlay Continuous Carousel)
   ========================================================================== */
.brand-clients-section {
    background-color: #FFFFFF;
    border-bottom: 1px solid #EEF2F6;
    padding: 34px 0 36px;
    position: relative;
}

.brand-slider-header {
    text-align: center;
    margin-bottom: 22px;
}

.brand-slider-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    letter-spacing: 0.3px;
    background: #F8FAFC;
    padding: 6px 18px;
    border-radius: var(--r-pill);
    border: 1px solid #E2E8F0;
    white-space: nowrap;
}

.brand-slider-label i {
    color: var(--brand-blue);
    font-size: 13px;
    flex-shrink: 0;
}

.brands-swiper {
    padding: 6px 0 !important;
}

.brand-logo-card {
    background: #FFFFFF;
    border: 1.5px solid #F1F5F9;
    border-radius: 14px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

.brand-logo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    border-color: #CBD5E1;
}

.brand-logo-img {
    max-height: 80px;
    max-width: 100%;
    object-fit: contain;
    filter: grayscale(20%);
    opacity: 0.9;
    transition: filter 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

.brand-logo-card:hover .brand-logo-img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.06);
}

/* ==========================================================================
   4. Exact 8-Box Services Bento Grid (Image + Color Blocks for 7 Services)
   ========================================================================== */
.services-bento-section {
    background-color: #FFFFFF;
    padding: 50px 0;
    position: relative;
}

.section-header-centered {
    text-align: center;
    margin-bottom: 40px;
}

.section-pill-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.12) 0%, rgba(225, 29, 72, 0.06) 100%);
    color: var(--brand-blue);
    font-size: 12.5px;
    font-weight: 800;
    padding: 7px 18px;
    border-radius: var(--r-pill);
    margin-bottom: 16px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border: 1.5px solid rgba(2, 132, 199, 0.28);
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.1);
}

.section-pill-tag i {
    color: var(--brand-blue);
    font-size: 13px;
}

.section-main-heading,
.services-slider-heading,
.why-main-heading,
.before-after-main-heading,
.shorts-main-heading,
.testimonials-main-heading,
.blogs-main-heading,
.faqs-main-heading,
.ready-cta-heading,
.hero-headline-light {
    text-transform: capitalize;
}

/* ==========================================================================
   Master Unified Section Heading Typography System
   ========================================================================== */
.section-main-heading,
.services-slider-heading,
.why-main-heading,
.before-after-main-heading,
.our-work-main-title,
.testimonials-main-heading,
.ref-blog-main-title,
.blogs-main-heading,
.ref-faq-title,
.shorts-main-heading {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: clamp(28px, 3.2vw, 38px) !important;
    font-weight: 800 !important;
    color: #0F172A;
    line-height: 1.22 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 12px;
}

/* Master Highlight Words inside Headings */
.section-main-heading .font-serif-italic,
.services-slider-heading .font-serif-italic,
.why-main-heading .font-serif-italic,
.before-after-main-heading .font-serif-italic,
.our-work-main-title .font-serif-italic,
.testimonials-main-heading .font-serif-italic,
.blogs-main-heading .font-serif-italic,
.ref-blog-title-blue,
.ref-testimonial-title-blue,
.ref-faq-title-blue {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-style: normal !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #0284C7 0%, #1E70B8 60%, #E11D48 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block;
}

/* Dark Section Heading Color Override */
.youtube-shorts-section .shorts-main-heading {
    color: #FFFFFF !important;
}



.section-sub-desc {
    font-size: 15px;
    color: #64748B;
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}

.services-bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.bento-card {
    border-radius: 18px;
    min-height: 270px;
    height: 270px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.bento-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
}

.bento-card-img {
    position: relative;
    width: 100%;
    height: 100%;
}

.bento-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-card-img:hover img {
    transform: scale(1.07);
}

.bento-card-content {
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.bento-card-title {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.4px;
    margin-bottom: 8px;
}

.bento-card-desc {
    font-size: 13.5px;
    line-height: 1.5;
    margin-bottom: 14px;
}

.bento-card-link {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    padding-bottom: 2px;
    transition: var(--transition);
}

.bento-card-link i {
    font-size: 10px;
    transition: transform 0.2s ease;
}

.bento-card-link:hover i {
    transform: translate(2px, -2px);
}

.theme-light {
    background-color: #F8FAFC;
    border: 1px solid #E2E8F0;
    color: #0F172A;
}

.theme-light .bento-card-title {
    color: #0F172A;
}

.theme-light .bento-card-desc {
    color: #64748B;
}

.theme-light .bento-card-link {
    color: #0F172A;
    border-bottom: 1.5px solid #0F172A;
}

.theme-light .bento-card-link:hover {
    color: var(--brand-blue);
    border-bottom-color: var(--brand-blue);
}

.theme-dark-slate {
    background-color: #1E293B;
    color: #FFFFFF;
}

.theme-dark-slate .bento-card-title {
    color: #FFFFFF;
}

.theme-dark-slate .bento-card-desc {
    color: #E2E8F0;
}

.theme-dark-slate .bento-card-link {
    color: #FFFFFF;
    border-bottom: 1.5px solid #FFFFFF;
}

.theme-dark-slate .bento-card-link:hover {
    opacity: 0.85;
}

.theme-earth {
    background-color: var(--brand-blue);
    color: #FFFFFF;
}

.theme-earth .bento-card-title {
    color: #FFFFFF;
}

.theme-earth .bento-card-desc {
    color: #F1F5F9;
}

.theme-earth .bento-card-link {
    color: #FFFFFF;
    border-bottom: 1.5px solid #FFFFFF;
}

.theme-earth .bento-card-link:hover {
    opacity: 0.85;
}

/* ==========================================================================
   6. Autoplay Multi-Service Swiper Carousel Slider
   ========================================================================== */
.services-slider-section {
    background: linear-gradient(180deg, #F0F7FF 0%, #FFFFFF 100%);
    padding: 55px 0;
    position: relative;
    border-top: 1px solid rgba(2, 132, 199, 0.12);
    border-bottom: 1px solid rgba(2, 132, 199, 0.12);
}

.section-header-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 20px;
}

.slider-nav-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.slider-arrow-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    color: var(--brand-charcoal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: var(--transition);
}

.slider-arrow-btn:hover {
    background: var(--brand-blue);
    color: #FFFFFF;
    border-color: var(--brand-blue);
    box-shadow: 0 6px 16px rgba(30, 112, 184, 0.35);
    transform: translateY(-2px);
}

.services-swiper-container {
    padding: 10px 4px 45px !important;
}

.services-swiper-container .swiper-wrapper {
    align-items: stretch !important;
}

.services-swiper-container .swiper-slide {
    height: auto !important;
    display: flex !important;
}

.service-slide-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100% !important;
}

.service-slide-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(30, 112, 184, 0.14);
    border-color: rgba(30, 112, 184, 0.35);
}

.service-card-media {
    position: relative;
    height: 210px;
    width: 100%;
    overflow: hidden;
    background: #0B1120;
    flex-shrink: 0;
}

.service-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-slide-card:hover .service-card-media img {
    transform: scale(1.08);
}

.service-badge-pill {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 2;
}

.service-card-body {
    padding: 24px 22px 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}

.service-card-title {
    font-size: 20px;
    font-weight: 800;
    color: #0F172A;
    letter-spacing: -0.4px;
    margin-bottom: 10px;
    line-height: 1.3;
    min-height: 52px;
    display: flex;
    align-items: flex-start;
}

.service-card-desc {
    font-size: 14px;
    color: #64748B;
    line-height: 1.6;
    margin-bottom: 22px;
    flex-grow: 1;
    min-height: 84px;
}

.service-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #F1F5F9;
    padding-top: 16px;
}

.service-explore-link {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--brand-blue);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
}

.service-explore-link i {
    font-size: 11px;
    transition: transform 0.2s ease;
}

.service-explore-link:hover {
    color: var(--brand-red);
}

.service-explore-link:hover i {
    transform: translate(3px, -3px);
}

.btn-book-mini {
    font-size: 12px;
    font-weight: 800;
    color: #FFFFFF !important;
    background: var(--gradient-brand-red);
    padding: 6px 15px;
    border-radius: var(--r-pill);
    transition: var(--transition);
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.35);
}

.btn-book-mini:hover {
    background: linear-gradient(135deg, #BE123C 0%, #991B1B 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(225, 29, 72, 0.5);
}

.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #94A3B8;
    opacity: 0.4;
    transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--brand-blue) !important;
    width: 26px;
    border-radius: var(--r-pill);
}

/* ==========================================================================
   7. Recent Projects Showcase Section (2-Row Smooth Infinite Slider)
   ========================================================================== */
.projects-showcase-section {
    background-color: #FFFFFF;
    padding: 50px 0;
    position: relative;
    border-top: 1px solid #EEF2F6;
}

.projects-marquee-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}

.projects-marquee-row {
    width: 100%;
    overflow: hidden;
    display: flex;
}

.projects-marquee-track {
    display: flex;
    gap: 16px;
    width: max-content;
    will-change: transform;
}

.marquee-track-left {
    animation: marqueeLeft 55s linear infinite;
}

.marquee-track-right {
    animation: marqueeRight 55s linear infinite;
}

.projects-marquee-track:hover {
    animation-play-state: paused;
}

@keyframes marqueeLeft {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes marqueeRight {
    0% {
        transform: translate3d(-50%, 0, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

.project-showcase-card {
    position: relative;
    width: 320px;
    height: 250px;
    flex-shrink: 0;
    border-radius: 18px;
    overflow: hidden;
    background-color: #0F172A;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
    cursor: pointer;
    user-select: none;
}

.project-showcase-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.2);
    border-color: rgba(30, 112, 184, 0.5);
    z-index: 5;
}

.project-card-img-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.project-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
    will-change: transform;
}

.project-showcase-card:hover .project-card-img {
    transform: scale(1.08);
}

.project-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(15, 23, 42, 0) 0%,
            rgba(15, 23, 42, 0.05) 30%,
            rgba(15, 23, 42, 0.7) 68%,
            rgba(15, 23, 42, 0.96) 100%);
    transition: background 0.4s ease;
    pointer-events: none;
}

.project-showcase-card:hover .project-card-overlay {
    background: linear-gradient(180deg,
            rgba(15, 23, 42, 0.08) 0%,
            rgba(15, 23, 42, 0.15) 25%,
            rgba(15, 23, 42, 0.78) 65%,
            rgba(15, 23, 42, 0.98) 100%);
}

.project-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 16px 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;
}

.project-card-title {
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.3px;
    line-height: 1.2;
    margin-bottom: 7px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}

.project-showcase-card:hover .project-card-title {
    transform: translateY(-1px);
}

.project-card-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.project-badge-pill {
    background: rgba(30, 41, 59, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #F8FAFC;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1px;
    padding: 4px 9px;
    border-radius: var(--r-pill);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-badge-pill i {
    font-size: 10px;
    color: #94A3B8;
    transition: color 0.3s ease, transform 0.3s ease;
}

.project-showcase-card:hover .project-badge-pill {
    background: rgba(30, 41, 59, 0.94);
    border-color: rgba(255, 255, 255, 0.32);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

.project-showcase-card:hover .project-badge-pill i {
    color: #60A5FA;
    transform: scale(1.1);
}

/* ==========================================================================
   8. Why Choose Us Section (Big Multi-Color Icons & Exact Grid)
   ========================================================================== */
.why-choose-section {
    background: linear-gradient(180deg, #FFFFFF 0%, #F0F7FF 50%, #FFFFFF 100%);
    padding: 55px 0;
    position: relative;
    border-top: 1px solid rgba(2, 132, 199, 0.12);
    border-bottom: 1px solid rgba(2, 132, 199, 0.12);
}

.why-pill-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.12) 0%, rgba(225, 29, 72, 0.06) 100%);
    color: var(--brand-blue);
    font-size: 12.5px;
    font-weight: 800;
    padding: 7px 18px;
    border-radius: var(--r-pill);
    margin-bottom: 16px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border: 1.5px solid rgba(2, 132, 199, 0.28);
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.1);
}

.why-pill-tag i {
    color: var(--brand-blue);
    font-size: 13px;
}

.why-main-heading {
    font-size: clamp(32px, 3.8vw, 48px);
    font-weight: 800;
    color: #0F172A;
    line-height: 1.18;
    letter-spacing: -0.9px;
    margin-bottom: 14px;
}

.why-main-heading .font-serif-italic {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 600;
    color: var(--brand-blue);
}

.why-sub-desc {
    font-size: 15px;
    color: #64748B;
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.6;
}

.why-choose-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-top: 40px;
    align-items: stretch;
}

.why-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 20px;
    padding: 26px 18px;
    position: relative;
    overflow: hidden;
    height: 100% !important;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.3s ease;
    cursor: default;
}

.why-card-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}

.why-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.72) 0%, rgba(15, 23, 42, 0.94) 100%);
    opacity: 0;
    transition: opacity 0.45s ease;
    z-index: 2;
}

.why-card-inner {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.why-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.28);
    border-color: rgba(96, 165, 250, 0.4);
}

.why-card:hover .why-card-bg-img {
    opacity: 1;
    transform: scale(1.1);
}

.why-card:hover .why-card-overlay {
    opacity: 1;
}

.why-card-icon-big {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #FFFFFF;
    margin-bottom: 18px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.why-card:hover .why-card-icon-big {
    transform: scale(1.1) rotate(4deg);
}

.icon-gradient-blue {
    background: linear-gradient(135deg, #1E70B8 0%, #3B82F6 100%);
    box-shadow: 0 8px 20px rgba(30, 112, 184, 0.35);
}

.icon-gradient-gold {
    background: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.45);
}

.icon-gradient-emerald {
    background: linear-gradient(135deg, #10B981 0%, #06B6D4 100%);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35);
}

.icon-gradient-red {
    background: linear-gradient(135deg, #D9232D 0%, #F97316 100%);
    box-shadow: 0 8px 20px rgba(217, 35, 45, 0.35);
}

.icon-gradient-purple {
    background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.35);
}

.icon-gradient-cyan {
    background: linear-gradient(135deg, #0EA5E9 0%, #2563EB 100%);
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.35);
}

.why-card-title {
    font-size: 17px;
    font-weight: 800;
    color: #0F172A;
    letter-spacing: -0.3px;
    line-height: 1.25;
    margin-bottom: 10px;
    min-height: 44px;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
}

.why-card:hover .why-card-title {
    color: #FFFFFF;
}

.why-card-desc {
    font-size: 13px;
    color: #4B5563;
    line-height: 1.55;
    margin: 0;
    flex-grow: 1;
    transition: color 0.3s ease;
}

.why-card:hover .why-card-desc {
    color: rgba(255, 255, 255, 0.88);
}

/* ==========================================================================
   8. Real Transformation Proof (Interactive Before vs After Comparison)
   ========================================================================== */
.before-after-section {
    background-color: #FFFFFF;
    padding: 50px 0;
    position: relative;
    border-top: 1px solid #F1F5F9;
}

.before-after-clean-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.12) 0%, rgba(225, 29, 72, 0.06) 100%);
    color: var(--brand-blue);
    font-size: 12.5px;
    font-weight: 800;
    padding: 7px 18px;
    border-radius: var(--r-pill);
    margin-bottom: 16px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border: 1.5px solid rgba(2, 132, 199, 0.28);
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.1);
}

.before-after-clean-tag i {
    color: var(--brand-blue);
}

.before-after-main-heading {
    font-size: clamp(30px, 3.5vw, 40px);
    font-weight: 800;
    color: #0F172A;
    line-height: 1.18;
    letter-spacing: -0.9px;
    margin-bottom: 14px;
}

.before-after-main-heading .font-serif-italic {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    background: linear-gradient(135deg, #0284C7 0%, #1E70B8 60%, #E11D48 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.before-after-sub-desc {
    font-size: 15.5px;
    color: #64748B;
    max-width: 680px;
    margin: 0 auto 36px;
    line-height: 1.6;
}

/* Category Filter Tabs */
.ba-tabs-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 34px;
}

.ba-tab-btn {
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    color: #475569;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: var(--r-pill);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
}

.ba-tab-btn i {
    font-size: 13.5px;
}

.ba-tab-btn:hover {
    background: #E2E8F0;
    color: #0F172A;
}

.ba-tab-btn.active {
    background: var(--gradient-brand-blue);
    color: #FFFFFF;
    border-color: var(--brand-blue);
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.35);
}

/* Comparison Wrapper (Full Screen Width) */
.ba-comparison-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.ba-comparison-box {
    display: none;
    animation: fadeIn 0.35s ease;
}

.ba-comparison-box.active {
    display: block;
}

/* Image Container with Full-Width Slider */
.ba-image-container {
    position: relative;
    width: 100%;
    height: clamp(500px, 75vh, 720px);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
    border: 1.5px solid #E2E8F0;
    user-select: none;
    background-color: #0B1120;
    cursor: ew-resize;
}

.ba-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Before wrapper: width% set by JS, clip via overflow:hidden */
.ba-before-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
    border-right: 3px solid #FFFFFF;
    box-shadow: 4px 0 18px rgba(0, 0, 0, 0.45);
}

/* Before image: always full container width (set by JS in px) */
.ba-before-wrapper .ba-image-before {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    object-fit: cover;
}

/* Draggable Handle: left% set by JS */
.ba-slider-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ba-handle-line {
    width: 3px;
    height: 100%;
    background: #FFFFFF;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
}

.ba-handle-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #1E40AF;
    color: #FFFFFF;
    border: 3px solid #FFFFFF;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.ba-image-container:hover .ba-handle-btn {
    transform: translate(-50%, -50%) scale(1.08);
    background: #2563EB;
}

/* Invisible native range input — sits on top of everything for drag/touch */
.ba-range-slider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: ew-resize;
    z-index: 10;
    margin: 0;
    padding: 0;
    pointer-events: all;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

/* Badges */
.ba-label {
    position: absolute;
    bottom: 22px;
    z-index: 4;
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: var(--r-pill);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}

.ba-label-after {
    right: 22px;
    background: rgba(16, 185, 129, 0.9);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.ba-label-before {
    left: 22px;
    background: rgba(239, 68, 68, 0.9);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* Highlights Grid */
.ba-highlights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 22px;
}

.ba-highlight-item {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.ba-highlight-item i {
    font-size: 24px;
    flex-shrink: 0;
}

.ba-highlight-item div {
    display: flex;
    flex-direction: column;
}

.ba-highlight-item strong {
    font-size: 15px;
    color: #0F172A;
    font-weight: 800;
    line-height: 1.25;
}

.ba-highlight-item span {
    font-size: 12.5px;
    color: #64748B;
    line-height: 1.4;
    margin-top: 2px;
}

/* ==========================================================================
   9. YouTube Shorts Video Slider Section (@drwaterlockwaterproofing)
   ========================================================================== */
.youtube-shorts-section {
    padding: 50px 0;
    background: radial-gradient(circle at 50% 0%, #172554 0%, #0B1120 70%, #060913 100%);
    color: #FFFFFF;
    position: relative;
}

.shorts-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
    margin-bottom: 40px;
}

.shorts-pill-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #F87171;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: var(--r-pill);
    margin-bottom: 14px;
}

.youtube-red-icon {
    color: #FF0000;
    font-size: 14px;
}

.shorts-main-heading {
    font-size: clamp(30px, 3.8vw, 44px);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.2;
    letter-spacing: -0.8px;
    margin-bottom: 12px;
}

.shorts-main-heading .font-serif-italic {
    font-style: italic;
    font-weight: 700;
    color: #60A5FA;
}

.shorts-sub-desc {
    font-size: 15px;
    color: #94A3B8;
    max-width: 580px;
    margin: 0;
    line-height: 1.6;
}

.btn-youtube-subscribe-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #FF0000;
    color: #FFFFFF !important;
    padding: 12px 26px;
    border-radius: var(--r-pill);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(255, 0, 0, 0.35);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.btn-youtube-subscribe-pill i {
    font-size: 18px;
}

.btn-youtube-subscribe-pill:hover {
    background: #CC0000;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 28px rgba(255, 0, 0, 0.5);
    color: #FFFFFF !important;
}

/* Vertical Shorts Card */
/* Clean Hover-To-Play Vertical Video Shorts Card */
.youtube-shorts-swiper {
    padding: 10px 4px 30px !important;
}

.yt-video-card {
    position: relative;
    width: 100%;
    height: 420px;
    border-radius: 22px;
    overflow: hidden;
    background: #0B1120;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.3s ease;
}

.yt-video-card:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: rgba(255, 0, 0, 0.6);
    box-shadow: 0 22px 48px rgba(255, 0, 0, 0.25);
}

.yt-reel-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.yt-video-card:hover .yt-reel-video {
    transform: scale(1.05);
}

.yt-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.2) 0%, rgba(15, 23, 42, 0.0) 50%, rgba(15, 23, 42, 0.4) 100%);
    pointer-events: none;
    z-index: 2;
    transition: background 0.3s ease;
}

.yt-shorts-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #FFFFFF;
    font-size: 11.5px;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.yt-shorts-badge i {
    color: #FF0000;
    font-size: 14px;
}

/* Floating Audio Mute / Unmute Indicator */
.yt-audio-indicator {
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 10 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.25s ease;
}

.yt-audio-indicator:hover {
    transform: scale(1.15);
    background: rgba(0, 0, 0, 0.9);
}

.yt-audio-indicator .icon-unmuted {
    display: none;
    color: #22C55E;
}

.yt-audio-indicator .icon-muted {
    display: block;
    color: #E2E8F0;
}

.yt-video-card.is-unmuted .yt-audio-indicator {
    background: #FF0000 !important;
    border-color: #FF0000 !important;
    transform: scale(1.12);
    box-shadow: 0 0 16px rgba(255, 0, 0, 0.6);
}

.yt-video-card.is-unmuted .yt-audio-indicator .icon-muted {
    display: none !important;
}

.yt-video-card.is-unmuted .yt-audio-indicator .icon-unmuted {
    display: block !important;
    color: #FFFFFF !important;
}

.yt-video-link {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: block;
}

.shorts-slider-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
}

.shorts-swiper-prev,
.shorts-swiper-next {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.shorts-swiper-prev:hover,
.shorts-swiper-next:hover {
    background: #FF0000;
    border-color: #FF0000;
    color: #FFFFFF;
    transform: scale(1.08);
}

.shorts-swiper-pagination {
    display: inline-flex !important;
    width: auto !important;
    gap: 6px;
}

.shorts-swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    opacity: 1;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.shorts-swiper-pagination .swiper-pagination-bullet-active {
    background: #FF0000 !important;
    width: 24px;
    border-radius: var(--r-pill);
}

/* ==========================================================================
   9. Real Results From Real Homeowners (Testimonials Section)
   ========================================================================== */
.testimonials-showcase-section {
    background-color: #FFFFFF;
    padding: 50px 0;
    position: relative;
    border-top: 1px solid #EEF2F6;
}

.testimonials-clean-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.12) 0%, rgba(225, 29, 72, 0.06) 100%);
    color: var(--brand-blue);
    font-size: 12.5px;
    font-weight: 800;
    padding: 7px 18px;
    border-radius: var(--r-pill);
    margin-bottom: 16px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border: 1.5px solid rgba(2, 132, 199, 0.28);
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.1);
}

.testimonials-clean-tag i {
    color: var(--brand-blue);
    font-size: 13px;
}

.testimonials-main-heading {
    font-size: clamp(30px, 3.5vw, 40px);
    font-weight: 700;
    color: #0F172A;
    line-height: 1.18;
    letter-spacing: -0.9px;
    margin-bottom: 14px;
}

.testimonials-main-heading .font-serif-italic {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    color: var(--brand-blue);
}

.testimonials-sub-desc {
    font-size: 15.5px;
    color: #64748B;
    max-width: 650px;
    margin: 0 auto 38px;
    line-height: 1.6;
}

.testimonials-swiper {
    padding: 10px 4px 20px !important;
}

.testimonials-swiper .swiper-wrapper {
    align-items: stretch !important;
}

.testimonials-swiper .swiper-slide {
    height: auto !important;
    display: flex !important;
}

.testimonial-review-card {
    background-color: #f4f8fe;
    border: 1px solid #7ed3ff;
    border-radius: 20px;
    padding: 34px 28px;
    width: 100%;
    height: 100% !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.testimonial-review-card:hover {
    transform: translateY(-6px);
    background-color: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.07);
}

.testimonial-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.testimonial-client-profile {
    display: flex;
    align-items: center;
    gap: 14px;
}

.testimonial-avatar-wrap {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.testimonial-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid #FFFFFF;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.avatar-google-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    border: 1px solid #F1F5F9;
}

.avatar-google-badge svg {
    display: block;
}

.testimonial-client-meta {
    display: flex;
    flex-direction: column;
}

.testimonial-client-name {
    font-size: 18px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 2px;
    letter-spacing: -0.3px;
}

.testimonial-client-role {
    font-size: 13px;
    color: #6B7280;
    font-weight: 500;
}

.testimonial-stars {
    color: #F59E0B;
    display: flex;
    gap: 3px;
    font-size: 13.5px;
}

.testimonial-quote {
    font-size: 14.5px;
    line-height: 1.68;
    color: #4B5563;
    font-style: italic;
    margin: 0;
}

.testimonials-swiper-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 28px;
    position: relative;
}

.testimonials-swiper-pagination .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    background: #94A3B8;
    opacity: 0.45;
    border-radius: 50%;
    margin: 0 !important;
    transition: all 0.3s ease;
}

.testimonials-swiper-pagination .swiper-pagination-bullet-active {
    background: #475569 !important;
    opacity: 1;
    transform: scale(1.2);
}

/* ==========================================================================
   10. Blogs & Insights Showcase Section
   ========================================================================== */
.blogs-showcase-section {
    background-color: #F8FAFC;
    padding: 50px 0;
    position: relative;
    border-top: 1px solid #EEF2F6;
}

.blogs-clean-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #1E40AF;
    font-size: 13.5px;
    font-weight: 700;
    margin-bottom: 14px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.blogs-clean-tag i {
    color: #2563EB;
}

.blogs-main-heading {
    font-size: clamp(30px, 3.8vw, 46px);
    font-weight: 800;
    color: #0F172A;
    line-height: 1.18;
    letter-spacing: -0.9px;
    margin-bottom: 14px;
}

.blogs-main-heading .font-serif-italic {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 600;
    color: var(--brand-blue);
}

.blogs-sub-desc {
    font-size: 15.5px;
    color: #64748B;
    max-width: 650px;
    margin: 0 auto 42px;
    line-height: 1.6;
}

.blogs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.blog-card {
    background: #FFFFFF;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #E2E8F0;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-8px);
    border-color: #CBD5E1;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
}

.blog-media-wrap {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background-color: #0F172A;
}

.blog-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.blog-category-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(8px);
    color: #FFFFFF;
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    letter-spacing: 0.4px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.blog-body {
    padding: 24px 22px 26px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-meta-row {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #94A3B8;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 12px;
}

.blog-meta-row i {
    color: #64748B;
    margin-right: 3px;
}

.blog-title {
    font-size: 18.5px;
    font-weight: 800;
    line-height: 1.35;
    color: #0F172A;
    margin-bottom: 12px;
    letter-spacing: -0.3px;
}

.blog-title a {
    color: #0F172A;
    text-decoration: none;
    transition: color 0.25s ease;
}

.blog-title a:hover {
    color: var(--brand-blue);
}

.blog-excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: #64748B;
    margin-bottom: 20px;
    flex-grow: 1;
}

.blog-read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--brand-blue);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: gap 0.25s ease, color 0.25s ease;
}

.blog-read-more:hover {
    color: var(--brand-blue-hover);
    gap: 12px;
}

/* ==========================================================================
   11. FAQs Showcase Section (Smooth Accordion)
   ========================================================================== */
.faqs-showcase-section {
    background-color: #FFFFFF;
    padding: 50px 0;
    position: relative;
    border-top: 1px solid #EEF2F6;
}

.faqs-clean-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(225, 29, 72, 0.12) 0%, rgba(2, 132, 199, 0.06) 100%);
    color: var(--brand-red-vivid);
    font-size: 12.5px;
    font-weight: 800;
    padding: 7px 18px;
    border-radius: var(--r-pill);
    margin-bottom: 16px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border: 1.5px solid rgba(225, 29, 72, 0.28);
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.1);
}

.faqs-clean-tag i {
    color: var(--brand-red-vivid);
    font-size: 13px;
}

.faqs-main-heading {
    font-size: clamp(30px, 3.8vw, 46px);
    font-weight: 800;
    color: #0F172A;
    line-height: 1.18;
    letter-spacing: -0.9px;
    margin-bottom: 14px;
}

.faqs-main-heading .font-serif-italic {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    background: linear-gradient(135deg, #E11D48 0%, #D9232D 60%, #0284C7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.faqs-sub-desc {
    font-size: 15.5px;
    color: #64748B;
    max-width: 680px;
    margin: 0 auto 46px;
    line-height: 1.6;
}

.faqs-layout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: flex-start;
}

/* Left Column: 3D Aesthetic Booking Card with Background Image */
.faq-booking-card {
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.92) 55%, rgba(241, 245, 249, 0.96) 100%),
        url('../images/service-membrane.webp') center/cover no-repeat;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    border-radius: 24px;
    padding: 36px 30px;
    box-shadow:
        0 24px 48px -12px rgba(15, 23, 42, 0.16),
        0 12px 24px -6px rgba(37, 99, 235, 0.10),
        0 4px 6px -1px rgba(0, 0, 0, 0.04),
        inset 0 2px 0 rgba(255, 255, 255, 0.95),
        inset 0 -3px 0 rgba(203, 213, 225, 0.5);
    position: relative;
    color: #0F172A;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(0);
}

.faq-booking-card.highlight-pulse {
    animation: bookingCardPulse 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes bookingCardPulse {
    0% {
        box-shadow:
            0 0 0 0 rgba(37, 99, 235, 0.7),
            0 24px 48px -12px rgba(15, 23, 42, 0.25);
        transform: translateY(-8px) scale(1.02);
    }

    35% {
        box-shadow:
            0 0 0 16px rgba(37, 99, 235, 0.22),
            0 32px 64px -12px rgba(15, 23, 42, 0.25);
        transform: translateY(-8px) scale(1.02);
    }

    100% {
        box-shadow:
            0 24px 48px -12px rgba(15, 23, 42, 0.16),
            0 12px 24px -6px rgba(37, 99, 235, 0.10);
        transform: translateY(0) scale(1);
    }
}

.faq-booking-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 32px 64px -14px rgba(15, 23, 42, 0.20),
        0 16px 32px -6px rgba(37, 99, 235, 0.15),
        0 6px 12px -2px rgba(0, 0, 0, 0.05),
        inset 0 2px 0 rgba(255, 255, 255, 1),
        inset 0 -3px 0 rgba(203, 213, 225, 0.6);
}

.faq-booking-card-header {
    text-align: center;
    margin-bottom: 22px;
}

.faq-form-title {
    font-size: 26px;
    font-weight: 800;
    color: #0A192F;
    line-height: 1.3;
    letter-spacing: -0.5px;
    margin-bottom: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
}

.faq-title-logo-img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(37, 99, 235, 0.22));
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.faq-booking-card:hover .faq-title-logo-img {
    transform: rotate(-8deg) scale(1.1);
}

.faq-form-desc {
    font-size: 14.5px;
    color: #475569;
    line-height: 1.55;
    margin: 0 auto;
    max-width: 440px;
}

.faq-booking-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.faq-form-label {
    font-size: 13px;
    font-weight: 700;
    color: #1E293B;
    margin: 0;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.faq-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.faq-input-icon {
    position: absolute;
    left: 16px;
    color: #64748B;
    font-size: 14px;
    pointer-events: none;
    transition: color 0.25s ease;
    z-index: 2;
}

.faq-form-input,
.faq-form-select {
    width: 100%;
    background: #FFFFFF;
    border: 1.5px solid #CBD5E1;
    border-radius: 12px;
    padding: 12px 14px 12px 42px;
    color: #0F172A;
    font-size: 14px;
    font-weight: 600;
    outline: none;
    box-shadow:
        inset 0 2px 4px rgba(15, 23, 42, 0.05),
        0 1px 2px rgba(255, 255, 255, 0.8);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-form-select optgroup {
    font-weight: 700;
    color: #1E293B;
    background: #F1F5F9;
}

.faq-form-select option {
    background: #FFFFFF;
    color: #0F172A;
    font-weight: 500;
    padding: 6px 10px;
}

.faq-form-input::placeholder {
    color: #94A3B8;
    font-weight: 400;
}

.faq-form-input:focus,
.faq-form-select:focus {
    border-color: #2563EB;
    background: #FFFFFF;
    box-shadow:
        inset 0 1px 2px rgba(37, 99, 235, 0.06),
        0 0 0 4px rgba(37, 99, 235, 0.16),
        0 4px 14px rgba(37, 99, 235, 0.12);
    transform: translateY(-1px);
}

.faq-input-wrapper:focus-within .faq-input-icon {
    color: #2563EB;
}

/* Validation states */
.faq-form-input.is-invalid,
.faq-form-select.is-invalid {
    border-color: #EF4444 !important;
    background: #FEF2F2 !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15) !important;
}

.faq-form-input.is-valid,
.faq-form-select.is-valid {
    border-color: #10B981 !important;
    background: #F0FDF4 !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15) !important;
}

.faq-error-msg {
    display: none;
    font-size: 11.5px;
    color: #DC2626;
    font-weight: 600;
    margin-top: 2px;
}

.faq-form-group.has-error .faq-error-msg {
    display: block;
}

/* 3D Tactile Submit Button */
.btn-faq-submit {
    background: linear-gradient(180deg, #F43F5E 0%, #E11D48 45%, #BE123C 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 12px;
    padding: 15px 20px;
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    box-shadow:
        0 4px 0 #881337,
        0 10px 24px rgba(225, 29, 72, 0.42),
        inset 0 1px 1px rgba(255, 255, 255, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    margin-top: 6px;
    width: 100%;
}

.btn-faq-submit:hover {
    background: linear-gradient(180deg, #FB7185 0%, #E11D48 45%, #9F1239 100%);
    transform: translateY(-2px);
    box-shadow:
        0 6px 0 #881337,
        0 14px 28px rgba(225, 29, 72, 0.52),
        inset 0 1px 1px rgba(255, 255, 255, 0.45);
}

.btn-faq-submit:active {
    transform: translateY(3px);
    box-shadow:
        0 1px 0 #881337,
        0 4px 10px rgba(225, 29, 72, 0.35),
        inset 0 1px 1px rgba(0, 0, 0, 0.1);
}

.btn-faq-submit i {
    transition: transform 0.25s ease;
}

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

/* 3D Raised Trust Pills */
.faq-form-trust-pills {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(226, 232, 240, 0.8);
}

.faq-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    padding: 7px 11px;
    border-radius: var(--r-pill);
    font-size: 11.5px;
    font-weight: 700;
    color: #334155;
    box-shadow:
        0 3px 8px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 #FFFFFF,
        inset 0 -1px 0 rgba(203, 213, 225, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.faq-trust-pill:hover {
    transform: translateY(-1px);
    box-shadow:
        0 5px 12px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 #FFFFFF;
}

.faq-form-success-alert {
    display: none;
    background: #ECFDF5;
    border: 1px solid #10B981;
    border-radius: 12px;
    padding: 14px 16px;
    align-items: center;
    gap: 12px;
    color: #065F46;
    margin-bottom: 18px;
    animation: fadeIn 0.3s ease;
}

.faq-form-success-alert i {
    font-size: 24px;
    color: #10B981;
    flex-shrink: 0;
}

.faq-form-success-alert div {
    display: flex;
    flex-direction: column;
}

.faq-form-success-alert strong {
    font-size: 14px;
    color: #047857;
}

.faq-form-success-alert span {
    font-size: 12.5px;
    color: #065F46;
}

.faqs-container-wrapper {
    width: 100%;
}

.faqs-accordion {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.faq-item {
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 16px !important;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: #CBD5E1 !important;
    background: #FFFFFF !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.faq-btn {
    background: transparent !important;
    color: #0F172A !important;
    font-size: 16.5px;
    font-weight: 700;
    padding: 20px 24px;
    box-shadow: none !important;
    border: none !important;
    letter-spacing: -0.2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.faq-btn:not(.collapsed) {
    color: #2563EB !important;
    background-color: #EFF6FF !important;
    border-bottom: 1px solid #DBEAFE !important;
}

.faq-btn::after {
    background-size: 14px;
    transition: transform 0.3s ease;
}

.faq-answer {
    padding: 20px 24px 22px;
    font-size: 15px;
    line-height: 1.7;
    color: #475569;
    background: #FFFFFF;
}

/* ==========================================================================
   9. Curved Ready CTA Section (Exact Match to User Reference Screenshot)
   ========================================================================== */
.ready-cta-section {
    padding: 50px 0;
    background-color: #FFFFFF;
    position: relative;
}

.ready-cta-box {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    padding: 85px 36px;
    text-align: center;
    background-color: #0B1220;
    box-shadow: 0 20px 48px rgba(11, 18, 32, 0.22);
}

.ready-cta-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    filter: brightness(0.65);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.ready-cta-box:hover .ready-cta-bg-img {
    transform: scale(1.05);
}

.ready-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.72) 0%, rgba(15, 23, 42, 0.88) 100%);
    z-index: 2;
}

.ready-cta-content {
    position: relative;
    z-index: 3;
    max-width: 780px;
    margin: 0 auto;
}

.ready-cta-heading {
    font-size: clamp(32px, 4vw, 50px);
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.8px;
    line-height: 1.18;
    margin-bottom: 18px;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

.ready-cta-heading .font-serif-italic {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    background: linear-gradient(135deg, #38BDF8 0%, #60A5FA 50%, #FB7185 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ready-cta-desc {
    font-size: 16px;
    color: #E2E8F0;
    line-height: 1.65;
    max-width: 680px;
    margin: 0 auto 34px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.btn-cta-outline-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--gradient-brand-red);
    color: #FFFFFF !important;
    border: none;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 15px 42px;
    border-radius: var(--r-pill);
    box-shadow: 0 10px 30px rgba(225, 29, 72, 0.45);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-cta-outline-pill:hover {
    background: linear-gradient(135deg, #BE123C 0%, #991B1B 100%);
    color: #FFFFFF !important;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 16px 36px rgba(225, 29, 72, 0.65);
}

.btn-cta-outline-pill:hover {
    background: #FFFFFF;
    color: #0F172A !important;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 30px rgba(255, 255, 255, 0.35);
}

/* ==========================================================================
   10. Exact Haver Style Footer Section
   ========================================================================== */
.site-main-footer {
    background-color: #151D28;
    color: #CBD5E1;
    padding: 50px 0 30px;
    position: relative;
}

.footer-logo-wrap {
    display: inline-block;
}

.footer-brand-logo-pill {
    display: inline-flex;
    align-items: center;
    background: #FFFFFF;
    padding: 8px 18px;
    border-radius: 12px;
    margin-bottom: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

.footer-brand-logo-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.footer-logo-img {
    height: 38px;
    width: auto;
    object-fit: contain;
    display: block;
}

.footer-brand-tagline {
    font-size: 13.5px;
    color: #94A3B8;
    max-width: 420px;
    line-height: 1.6;
    margin: 0;
}

.footer-social-icons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-circle-link {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #FFFFFF;
    color: #0F172A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    text-decoration: none;
    transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.social-circle-link:hover {
    transform: translateY(-3px) scale(1.08);
    background-color: #38BDF8;
    color: #FFFFFF;
}

.footer-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin-bottom: 45px;
}

.footer-divider-bottom {
    margin-top: 50px;
    margin-bottom: 25px;
}

.footer-main-grid {
    display: grid;
    grid-template-columns: 1.3fr 1.2fr 1.1fr;
    gap: 50px;
}

.footer-col-heading {
    font-size: 26px;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 14px;
    letter-spacing: -0.5px;
}

.footer-newsletter-desc {
    font-size: 14px;
    color: #94A3B8;
    margin-bottom: 16px;
}

.footer-newsletter-form {
    display: flex;
    background: #FFFFFF;
    border-radius: var(--r-pill);
    padding: 4px 4px 4px 18px;
    align-items: center;
    max-width: 380px;
    margin-bottom: 28px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.newsletter-input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 13.5px;
    color: #1E293B;
    width: 100%;
    font-family: inherit;
}

.newsletter-input::placeholder {
    color: #94A3B8;
}

.newsletter-submit-btn {
    background: var(--gradient-brand-red);
    color: #FFFFFF;
    border: none;
    outline: none;
    padding: 10px 22px;
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.4);
    transition: all 0.25s ease;
    white-space: nowrap;
}

.newsletter-submit-btn:hover {
    background: linear-gradient(135deg, #BE123C 0%, #991B1B 100%);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 18px rgba(225, 29, 72, 0.55);
}

.footer-follow-wrapper {
    margin-top: 24px;
}

.footer-follow-heading {
    font-size: 16px;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 12px;
}

.quick-links-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links-list a {
    color: #CBD5E1;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-block;
}

.footer-links-list a:hover {
    color: #FFFFFF;
    transform: translateX(3px);
}

.footer-contact-info-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-contact-info-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #CBD5E1;
}

.footer-contact-info-list i {
    color: #94A3B8;
    font-size: 14px;
    width: 16px;
}

.footer-contact-info-list a {
    color: #CBD5E1;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-contact-info-list a:hover {
    color: #FFFFFF;
}

.footer-address-heading {
    font-size: 20px;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 12px;
}

.footer-address-block {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #CBD5E1;
    line-height: 1.5;
    max-width: 320px;
}

.footer-address-block i {
    color: #94A3B8;
    font-size: 15px;
    margin-top: 3px;
    flex-shrink: 0;
}

.footer-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13.5px;
    color: #94A3B8;
}

.footer-copyright-text {
    color: #CBD5E1;
}

.footer-dev-link {
    color: #38BDF8;
    text-decoration: none;
    font-weight: 700;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.footer-dev-link:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

.footer-legal-links a {
    color: #CBD5E1;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-legal-links a:hover {
    color: #FFFFFF;
}

.footer-legal-separator {
    margin: 0 8px;
    color: #64748B;
}

/* ==========================================================================
   11. Mobile Responsive
   ========================================================================== */
.mobile-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--r-pill);
    background: var(--pill-bg);
    border: none;
    color: var(--brand-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    cursor: pointer;
    transition: var(--transition);
}

@media (max-width: 1199.98px) {

    .services-bento-grid,
    .chemicals-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .why-choose-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 991.98px) {

    .services-bento-section,
    .services-slider-section,
    .projects-showcase-section,
    .youtube-shorts-section,
    .testimonials-showcase-section,
    .why-choose-section,
    .our-work-section,
    .chemicals-showcase-section,
    .blogs-showcase-section,
    .faqs-showcase-section,
    .ready-cta-section {
        padding: 50px 0;
    }

    .shorts-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .faqs-layout-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .testimonial-review-card {
        padding: 26px 22px;
    }

    .projects-marquee-wrapper {
        gap: 18px;
    }

    .projects-marquee-track {
        gap: 18px;
    }

    .project-showcase-card {
        width: 270px;
        height: 220px;
        border-radius: 16px;
    }

    .project-card-content {
        padding: 14px 14px;
    }

    .project-card-title {
        font-size: 16.5px;
        margin-bottom: 5px;
    }

    .project-badge-pill {
        font-size: 10px;
        padding: 3px 8px;
    }

    .work-stats-pill-bar {
        gap: 8px;
    }

    .stat-pill-badge {
        font-size: 12.5px;
        padding: 6px 14px;
    }

    .work-bottom-cta-wrap {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }

    .work-cta-actions {
        width: 100%;
    }

    .btn-site-inspection-pill {
        width: 100%;
        justify-content: center;
    }

    .chem-distributor-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 30px 24px;
    }

    .chem-dist-actions {
        width: 100%;
        flex-direction: column;
    }

    .chem-dist-actions a {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .blogs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }

    .why-choose-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .our-work-header-wrap {
        flex-direction: column;
        align-items: flex-start;
    }

    .our-work-sub-desc {
        text-align: left;
        max-width: 100%;
    }

    .ready-cta-box {
        padding: 60px 24px;
        border-radius: 20px;
    }

    .section-header-wrap {
        flex-direction: column;
        align-items: flex-start;
    }

    /* ==========================================================================
       Mobile App Experience & Responsiveness (App UI)
       ========================================================================== */
    body {
        padding-bottom: 68px;
        /* Offset for fixed bottom app bar */
    }

    .btn-back-to-top {
        bottom: 78px;
        /* Elevated above bottom app bar */
        right: 14px;
        width: 44px;
        height: 44px;
    }

    /* Clean Sticky App Header */
    .top-promo-bar {
        display: none;
        /* Hide cluttered top strip on mobile for clean app feel */
    }

    .site-header {
        position: sticky;
        top: 0;
        z-index: 1050;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 2px 14px rgba(15, 23, 42, 0.06);
        padding: 8px 0;
    }

    .site-header .navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .navbar-brand img {
        height: 42px;
    }

    .mobile-nav-btn {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: #F1F5F9;
        color: #0F172A;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        transition: all 0.2s ease;
    }

    .mobile-nav-btn:active {
        background: #E2E8F0;
        transform: scale(0.94);
    }

    /* App-Like Mobile Drawer Navigation */
    .navbar-collapse {
        background: #FFFFFF;
        border-radius: 20px;
        padding: 18px 16px;
        margin-top: 10px;
        box-shadow: 0 20px 48px -10px rgba(15, 23, 42, 0.28);
        border: 1px solid #E2E8F0;
        max-height: 82vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-capsule {
        background: transparent;
        border-radius: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 6px;
    }

    .nav-link-capsule {
        width: 100%;
        border-radius: 12px;
        padding: 12px 16px !important;
        justify-content: space-between;
        font-size: 15px;
        font-weight: 600;
        background: #F8FAFC;
        border: 1px solid transparent;
        transition: all 0.2s ease;
    }

    .nav-link-capsule:active,
    .nav-link-capsule.active {
        background: #EFF6FF;
        border-color: #BFDBFE;
        color: #0284C7 !important;
    }

    .dropdown-menu-exact {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border-left: 3px solid var(--brand-blue);
        border-top: none;
        border-right: none;
        border-bottom: none;
        background: #F0F7FF;
        margin: 6px 0 8px 10px !important;
        border-radius: 0 12px 12px 0;
        pointer-events: auto;
        white-space: normal;
        min-width: unset;
        width: auto;
        padding: 6px 10px;
    }

    .dropdown-menu-item,
    .dropdown-item {
        padding: 8px 10px !important;
        border-radius: 8px;
        font-size: 13.5px;
        font-weight: 600;
    }

    .dropdown-menu-item:active,
    .dropdown-item:active {
        background: #DBEAFE;
    }

    .mobile-cta-wrapper {
        border-top: 1px solid #E2E8F0;
        padding-top: 14px;
        margin-top: 14px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .mobile-cta-wrapper a {
        width: 100%;
        justify-content: center;
        border-radius: 14px;
        padding: 12px 18px;
    }

    /* Hero Banner Mobile App UI (Center Aligned & Visible Background Video) */
    .hero-banner-section {
        width: 100% !important;
        margin: 0 !important;
        min-height: auto;
        padding: 36px 16px 44px !important;
        border-radius: 0 0 28px 28px !important;
        text-align: center !important;
    }

    .hero-fullscreen-video-overlay {
        background: linear-gradient(180deg, rgba(11, 18, 32, 0.72) 0%, rgba(15, 23, 42, 0.58) 50%, rgba(11, 18, 32, 0.88) 100%) !important;
    }

    .hero-content-layer {
        text-align: center !important;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 auto;
    }

    .hero-tag-badge-clean {
        font-size: 11px;
        padding: 5px 14px;
        margin: 0 auto 16px auto !important;
        max-width: 100%;
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        line-height: 1.4;
    }

    .hero-headline-clean {
        font-size: clamp(28px, 7.5vw, 36px);
        line-height: 1.18;
        letter-spacing: -0.5px;
        margin-bottom: 14px;
        text-align: center !important;
    }

    .hero-desc-clean {
        font-size: 14px;
        line-height: 1.55;
        margin: 0 auto 24px auto !important;
        max-width: 540px;
        text-align: center !important;
        color: #E2E8F0;
    }

    .hero-action-morph-container {
        width: 100%;
        max-width: 480px;
        margin: 0 auto 24px auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-initial-cta-group {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .hero-trust-bar {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin: 20px auto 0 auto !important;
        width: 100% !important;
        max-width: 520px;
    }

    .hero-trust-badge {
        font-size: clamp(10.5px, 2.8vw, 12px) !important;
        padding: 8px 6px !important;
        background: rgba(15, 23, 42, 0.65);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        color: #E2E8F0;
        text-align: center;
        white-space: nowrap !important;
    }

    .hero-trust-badge i {
        flex-shrink: 0;
        font-size: 12px;
    }

    .footer-main-grid {
        grid-template-columns: 1fr !important;
        gap: 32px;
        width: 100%;
    }

    .footer-col {
        width: 100%;
        min-width: 0;
    }

    .footer-col-contact {
        grid-column: auto;
    }

    .quick-links-columns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px 24px;
        width: 100%;
        min-width: 0;
    }

    .footer-links-list {
        min-width: 0;
    }

    .footer-links-list li a {
        word-break: break-word;
    }
}

/* ==========================================================================
   Mobile App Bottom Navigation Bar (Fixed Native UI)
   ========================================================================== */
.mobile-app-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 64px;
    background: rgba(11, 18, 32, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 4px calc(env(safe-area-inset-bottom, 0px));
    z-index: 1080;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
}

.mobile-tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #94A3B8;
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    flex: 1;
    height: 100%;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.mobile-tab-item:active {
    transform: scale(0.92);
}

.mobile-tab-item.active {
    color: #38BDF8;
}

.mobile-tab-item .tab-icon-wrap {
    font-size: 17px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.mobile-tab-item.active .tab-icon-wrap {
    transform: translateY(-1px);
}

.mobile-tab-item.tab-whatsapp {
    color: #34D399;
}

.mobile-tab-center-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    margin-top: -22px;
    z-index: 5;
    flex: 1;
    -webkit-tap-highlight-color: transparent;
}

.tab-center-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F43F5E 0%, #E11D48 50%, #BE123C 100%);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 6px 18px rgba(225, 29, 72, 0.55), 0 0 0 3.5px #0B1220;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-tab-center-btn:active .tab-center-circle {
    transform: scale(0.92);
}

.mobile-tab-center-btn span {
    font-size: 10.5px;
    font-weight: 700;
    color: #FDA4AF;
    margin-top: 3px;
    white-space: nowrap;
}

@media (max-width: 575.98px) {

    .hero-banner-section {
        padding: 26px 12px 36px !important;
        border-radius: 0 0 24px 24px !important;
        text-align: center !important;
    }

    .hero-content-layer {
        text-align: center !important;
        align-items: center !important;
        margin: 0 auto;
    }

    .hero-tag-badge-clean {
        font-size: 10px;
        padding: 4px 10px;
        gap: 5px;
        margin: 0 auto 14px auto !important;
        justify-content: center;
    }

    .hero-headline-clean {
        font-size: clamp(25px, 7.2vw, 32px);
        letter-spacing: -0.4px;
        line-height: 1.16;
        text-align: center !important;
    }

    .hero-desc-clean {
        font-size: 13px;
        line-height: 1.5;
        margin: 0 auto 18px auto !important;
        text-align: center !important;
    }

    .hero-initial-cta-group {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        width: 100%;
    }

    .btn-hero-primary,
    .btn-hero-call {
        width: 100%;
        height: 46px;
        justify-content: center;
        border-radius: 12px;
        font-size: 14px;
    }

    .btn-hero-primary:active,
    .btn-hero-call:active {
        transform: scale(0.97);
    }

    .hero-white-3d-form {
        display: flex;
        flex-direction: column;
        background: #FFFFFF !important;
        border-radius: 20px !important;
        padding: 16px 14px 14px !important;
        gap: 10px !important;
        align-items: stretch !important;
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.9) !important;
        border: none !important;
        width: 100% !important;
        max-width: 380px !important;
        margin: 0 auto !important;
    }

    .hero-3d-mobile-header {
        padding: 0 2px 4px 2px;
        margin-bottom: 2px;
    }

    .hero-3d-mobile-title {
        font-size: 13.5px;
        font-weight: 800;
        color: #0F172A;
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }

    .hero-3d-close-btn-mobile {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #F1F5F9;
        color: #64748B;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        cursor: pointer;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .hero-3d-close-btn-mobile:hover,
    .hero-3d-close-btn-mobile:active {
        background: #E2E8F0;
        color: #0F172A;
    }

    .hero-3d-divider {
        display: none !important;
    }

    .hero-3d-input-group {
        width: 100% !important;
        height: 54px !important;
        background: #F8FAFC !important;
        border: 1.5px solid #E2E8F0 !important;
        padding: 10px 16px !important;
        border-radius: 14px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .hero-3d-input-group i {
        font-size: 16px !important;
        color: #0284C7 !important;
        flex-shrink: 0;
    }

    .hero-3d-input-group:focus-within {
        border-color: #0284C7 !important;
        background: #FFFFFF !important;
        box-shadow: 0 0 0 3.5px rgba(2, 132, 199, 0.15) !important;
    }

    .hero-3d-input {
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #0F172A !important;
        width: 100% !important;
    }

    .btn-3d-submit {
        width: 100% !important;
        height: 54px !important;
        justify-content: center !important;
        border-radius: 14px !important;
        font-size: 15.5px !important;
        font-weight: 800 !important;
        margin-top: 4px !important;
        background: linear-gradient(135deg, #E11D48 0%, #BE123C 50%, #9F1239 100%) !important;
        box-shadow: 0 8px 22px rgba(225, 29, 72, 0.45) !important;
    }

    .btn-3d-submit:active {
        transform: scale(0.97) !important;
    }

    .hero-trust-bar {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        margin-top: 0 !important;
        width: 100% !important;
    }

    .hero-trust-badge {
        font-size: clamp(9.5px, 2.7vw, 11px) !important;
        padding: 6px 5px !important;
        border-radius: 8px !important;
        gap: 4px !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    .hero-trust-badge i {
        font-size: 11px;
        flex-shrink: 0;
    }

    .services-bento-grid,
    .why-choose-grid,
    .chemicals-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .bento-card-clean,
    .why-choose-card-clean,
    .chem-card-clean {
        border-radius: 18px;
    }

    .ba-image-container {
        height: 320px;
        border-radius: 18px;
    }

    .ba-label {
        font-size: 10.5px;
        padding: 4px 10px;
        bottom: 12px;
    }

    .ba-label-before {
        left: 12px;
    }

    .ba-label-after {
        right: 12px;
    }

    .ba-highlights-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ba-tab-btn {
        font-size: 12px;
        padding: 8px 14px;
    }

    .blogs-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .faq-btn {
        font-size: 15px;
        padding: 16px 18px;
    }

    .faq-answer {
        font-size: 14px;
        padding: 14px 18px 18px;
    }

    .testimonial-review-card {
        padding: 22px 18px;
    }

    .testimonial-avatar-wrap {
        width: 42px;
        height: 42px;
    }

    .testimonial-client-profile {
        gap: 10px;
    }

    .testimonial-client-name {
        font-size: 16px;
    }

    .testimonial-quote {
        font-size: 13.5px;
        line-height: 1.6;
    }

    .projects-marquee-wrapper {
        gap: 12px;
    }

    .projects-marquee-track {
        gap: 12px;
    }

    .project-showcase-card {
        width: 230px;
        height: 185px;
        border-radius: 14px;
    }

    .project-card-content {
        padding: 10px 10px;
    }

    .project-card-title {
        font-size: 14px;
        margin-bottom: 4px;
    }

    .project-badge-pill {
        font-size: 9.5px;
        padding: 2px 6px;
        gap: 4px;
    }

    .bento-card {
        min-height: 220px;
        height: auto;
    }

    .faq-booking-card {
        padding: 26px 18px;
        border-radius: 18px;
    }

    .faq-form-title {
        font-size: 21px;
        gap: 8px;
    }

    .faq-title-logo-img {
        width: 30px;
        height: 30px;
    }

    .faq-form-trust-pills {
        flex-wrap: wrap;
        gap: 6px;
    }

    .why-card {
        padding: 26px 22px;
        min-height: auto;
    }

    .project-marquee-card {
        width: 270px;
        height: 330px;
    }

    .brand-logo-card {
        height: 90px;
        padding: 5px 5px;
    }

    .btn-back-to-top {
        display: none !important;
    }

    .brand-logo-img {
        max-height: 80px;
    }

    .brand-slider-label {
        font-size: clamp(10.5px, 2.9vw, 12px) !important;
        padding: 6px 14px !important;
        gap: 6px !important;
        white-space: nowrap !important;
    }

    .ready-cta-heading {
        font-size: 28px;
    }

    .btn-cta-outline-pill {
        width: 100%;
    }

    .btn-youtube-subscribe-pill {
        width: 100%;
        justify-content: center;
    }

    .yt-video-card {
        height: 340px;
    }

    /* Complete Clean Mobile Responsive Footer */
    .site-main-footer {
        padding: 44px 0 106px;
    }

    .footer-main-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-col {
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        padding-bottom: 26px;
    }

    .footer-col:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .footer-brand-tagline {
        font-size: 13.5px;
        line-height: 1.6;
        color: #94A3B8;
        max-width: 100%;
        margin-bottom: 18px;
    }

    .footer-col-heading {
        font-size: 19px;
        margin-bottom: 14px;
    }

    .footer-newsletter-desc {
        font-size: 13px;
        margin-bottom: 12px;
    }

    .footer-newsletter-form {
        max-width: 100%;
        margin-bottom: 14px;
        padding: 3px 3px 3px 14px;
    }

    .newsletter-input {
        font-size: 13px;
    }

    .newsletter-submit-btn {
        padding: 9px 18px;
        font-size: 11px;
    }

    .quick-links-columns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px 20px;
    }

    .footer-links-list {
        gap: 10px;
    }

    .footer-links-list li a {
        font-size: 13.5px;
        padding: 2px 0;
        display: inline-block;
    }

    .footer-contact-info-list {
        margin-bottom: 18px;
        gap: 10px;
    }

    .footer-contact-info-list li {
        font-size: 13.5px;
        align-items: flex-start;
    }

    .footer-address-heading {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .footer-address-block {
        font-size: 13.5px;
        max-width: 100%;
    }

    .footer-follow-wrapper {
        margin-top: 18px;
    }

    .footer-follow-heading {
        font-size: 15px;
        margin-bottom: 10px;
    }

    .footer-social-icons {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .social-circle-link {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }

    .footer-bottom-bar {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        padding-top: 16px;
    }

    .footer-copyright-text {
        font-size: 12.5px;
        text-align: center;
    }

    .footer-legal-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 12px;
        font-size: 12.5px;
    }

    .footer-legal-separator {
        display: none;
    }
}

/* ==========================================================================
   Back To Top Floating Button (3D tactile style with scroll progress ring)
   ========================================================================== */
.btn-back-to-top {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1E40AF 0%, #2563EB 50%, #1D4ED8 100%);
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow:
        0 8px 24px rgba(37, 99, 235, 0.45),
        0 2px 6px rgba(15, 23, 42, 0.15),
        inset 0 1px 1px rgba(255, 255, 255, 0.6),
        inset 0 -2px 0 rgba(0, 0, 0, 0.25);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.85);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
    padding: 0;
}

.btn-back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.btn-back-to-top:hover {
    background: linear-gradient(135deg, #2563EB 0%, #3B82F6 50%, #1D4ED8 100%);
    transform: translateY(-4px) scale(1.06);
    box-shadow:
        0 14px 32px rgba(37, 99, 235, 0.55),
        0 4px 10px rgba(15, 23, 42, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.7);
    color: #FFFFFF;
}

.btn-back-to-top:active {
    transform: translateY(0) scale(0.92);
    box-shadow:
        0 4px 12px rgba(37, 99, 235, 0.35),
        inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

.btn-back-to-top i {
    position: relative;
    z-index: 2;
    transition: transform 0.25s ease;
}

.btn-back-to-top:hover i {
    transform: translateY(-2px);
}

.btn-back-to-top .progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;
    transform: rotate(-90deg);
    pointer-events: none;
}

.btn-back-to-top .progress-ring-bg {
    stroke: rgba(255, 255, 255, 0.18);
}

.btn-back-to-top .progress-ring-circle {
    stroke: #93C5FD;
    stroke-linecap: round;
    stroke-dasharray: 132;
    stroke-dashoffset: 132;
    transition: stroke-dashoffset 0.1s linear;
}

/* ==========================================================================
   12. Dedicated About Us Page Styles
   ========================================================================== */

/* Page Banner Blue Style (Ultra Premium Design System) */
.page-banner-blue-section {
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: linear-gradient(135deg, #0284C7 0%, #0369A1 50%, #075985 100%);
    overflow: hidden;
    padding: 70px 0;
    width: 100%;
    box-shadow: 0 15px 35px rgba(2, 132, 199, 0.25);
}

.page-banner-blue-section::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    filter: blur(40px);
    pointer-events: none;
}

.page-banner-blue-section::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: 25%;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(56, 189, 248, 0.15);
    filter: blur(60px);
    pointer-events: none;
}

.banner-bottom-right-img {
    position: absolute;
    bottom: 0;
    right: 0;
    max-height: 100%;
    max-width: 48%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: bottom right;
    z-index: 2;
    pointer-events: none;
    opacity: .7;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.12)) brightness(1.08);
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.page-banner-content-box {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    max-width: 50%;
}

.page-banner-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #FFFFFF;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.8px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.pulse-dot-green {
    width: 8px;
    height: 8px;
    background-color: #4ADE80;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
    animation: pulseDot 1.8s infinite;
}

@keyframes pulseDot {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(74, 222, 128, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
    }
}

.banner-gradient-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 800;
    line-height: 1.2;
    color: #FFFFFF;
    letter-spacing: -0.5px;
}

.banner-highlight-text {
    background: linear-gradient(135deg, #FDE047 0%, #FACC15 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.page-banner-sub-desc {
    font-size: 15.5px;
    color: rgba(255, 255, 255, 0.94);
    max-width: 640px;
    line-height: 1.6;
    margin: 0;
}

.banner-quick-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #FFFFFF;
    font-size: 12.5px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 8px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.page-banner-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.22);
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #FFFFFF;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.page-banner-breadcrumb a {
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    transition: color 0.2s ease;
}

.page-banner-breadcrumb a:hover {
    color: #FDE047;
}

.page-banner-breadcrumb .banner-breadcrumb-arrow {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
}

.page-banner-breadcrumb .banner-breadcrumb-active {
    color: #FFFFFF;
}

@media (max-width: 767.98px) {
    .page-banner-blue-section {
        min-height: 230px;
        padding: 45px 16px;
        margin-bottom: 30px;
    }

    .page-banner-content-box {
        max-width: 100%;
    }

    .banner-gradient-heading {
        font-size: 26px;
    }

    .page-banner-breadcrumb {
        font-size: 12px;
        gap: 8px;
    }
}

/* About Hero Banner (Compact Height with Bottom-Right Page Path) */
.about-ref-banner-section {
    position: relative;
    min-height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0B1120;
    overflow: hidden;
    padding: 55px 20px 65px;
    border-radius: 40px;
    width: 97%;
    margin: 10px auto 35px;
    color: #FFFFFF;
    text-align: center;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.22);
}

.about-ref-bg-img {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 1;
    filter: brightness(0.9);
}

.about-ref-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 18, 32, 0.65) 0%, rgba(15, 23, 42, 0.6) 50%, rgba(11, 18, 32, 0.8) 100%);
    backdrop-filter: blur(0.5px);
    z-index: 2;
}

.about-ref-content-box {
    position: relative;
    z-index: 3;
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.about-breadcrumb {
    position: absolute;
    bottom: 22px;
    right: 40px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

.about-breadcrumb a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: var(--transition);
}

.about-breadcrumb a:hover {
    color: #38BDF8;
}

.about-breadcrumb .breadcrumb-sep {
    color: rgba(255, 255, 255, 0.4);
    font-size: 10px;
}

.about-breadcrumb .breadcrumb-current {
    color: #FFFFFF;
    font-weight: 700;
}

.about-ref-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #FFFFFF;
    padding: 5px 16px;
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    margin-bottom: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.about-ref-pill i {
    font-size: 12px;
    color: #38BDF8;
}

.about-ref-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(24px, 3.2vw, 40px);
    font-weight: 700;
    line-height: 1.18;
    color: #FFFFFF;
    margin-bottom: 10px;
    letter-spacing: 0.2px;
    text-transform: none;
}

.about-ref-description {
    font-size: clamp(13.5px, 1.1vw, 15.5px);
    color: #E2E8F0;
    max-width: 620px;
    line-height: 1.5;
    margin: 0 auto;
    font-weight: 400;
}

@media (max-width: 767.98px) {
    .about-ref-banner-section {
        border-radius: 24px;
        width: 95%;
        padding: 45px 16px 50px;
        min-height: auto;
        margin: 10px auto 25px;
    }

    .about-breadcrumb {
        position: static;
        margin-top: 16px;
    }

    .about-ref-heading {
        font-size: 24px;
    }

    .about-ref-description {
        font-size: 13px;
    }
}

/* ==========================================================================
   Exact "Our Story" Section (100% Same-to-Same Match to User Reference Screenshot)
   ========================================================================== */
.our-story-section-ref {
    padding: 50px 0 40px;
    background: #FFFFFF;
    color: #0F172A;
}

.story-layout-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 30px;
    align-items: flex-start;
}

.story-sidebar-col {
    padding-top: 6px;
}

.story-tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: #1E293B;
    white-space: nowrap;
}

.story-tag-badge i {
    font-size: 13px;
    color: #0284C7;
}

.story-main-content {
    display: flex;
    flex-direction: column;
}

.story-top-row {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 30px;
}

.story-ref-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(34px, 3.8vw, 48px);
    font-weight: 700;
    color: #0F172A;
    line-height: 1.1;
    margin-bottom: 18px;
    letter-spacing: 0.2px;
}

.story-ref-title .font-serif-italic {
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    font-weight: 400;
    color: #64748B;
    margin-left: 4px;
}

.story-ref-text {
    font-size: 14px;
    line-height: 1.68;
    color: #475569;
    margin-bottom: 14px;
}

.story-ref-img-wrap {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    height: 100%;
    min-height: 320px;
    max-height: 360px;
}

.story-ref-img {
    width: 100%;
    height: 100%;
    min-height: 320px;
    max-height: 360px;
    object-fit: cover;
    display: block;
    border-radius: 18px;
}

.story-mission-block {
    margin-top: 15px;
    margin-bottom: 45px;
}

.story-mission-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 10px;
    letter-spacing: 0.3px;
}

.story-mission-text {
    font-size: 14px;
    line-height: 1.68;
    color: #475569;
    margin-bottom: 0;
}

/* 4-Stat Strip with full vertical borders matching screenshot */
.story-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 25px 0;
    position: relative;
}

.story-stat-col {
    text-align: center;
    padding: 10px 20px;
    position: relative;
    border-right: 1px solid #E2E8F0;
}

.story-stat-col:first-child {
    border-left: 1px solid #E2E8F0;
}

.story-stat-num {
    /* font-family: 'Playfair Display', serif; */
    /* font-style: italic; */
    font-size: clamp(34px, 3.4vw, 37px);
    font-weight: bold;
    color: #0F172A;
    line-height: 1;
    margin-bottom: 8px;
}

.story-stat-label {
    font-size: 13px;
    color: #64748B;
    font-weight: 500;
}

@media (max-width: 991.98px) {
    .story-layout-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .story-top-row {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .story-stats-strip {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 25px;
    }

    .story-stat-col {
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid #E2E8F0;
        padding-bottom: 20px;
    }

    .story-ref-img-wrap,
    .story-ref-img {
        min-height: 260px;
    }
}

@media (max-width: 575.98px) {
    .story-stats-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

.story-img-main-wrap {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
    border: 4px solid #FFFFFF;
}

.story-img-main {
    width: 100%;
    height: 440px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.story-visual-container:hover .story-img-main {
    transform: scale(1.03);
}

.story-floating-card {
    position: absolute;
    bottom: 0;
    right: 20px;
    background: #0B1220;
    color: #FFFFFF;
    border: 2px solid rgba(56, 189, 248, 0.3);
    border-radius: 18px;
    padding: 16px 20px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 280px;
    backdrop-filter: blur(12px);
    z-index: 3;
}

.story-floating-icon {
    width: 44px;
    height: 44px;
    background: var(--gradient-brand-blue);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 20px;
    flex-shrink: 0;
}

.story-floating-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.1;
}

.story-floating-subtitle {
    font-size: 11.5px;
    color: #94A3B8;
    margin-top: 2px;
}

.story-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(2, 132, 199, 0.08);
    color: var(--brand-blue);
    font-size: 12.5px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: var(--r-pill);
    margin-bottom: 14px;
}

.story-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--brand-dark);
    margin-bottom: 18px;
}

.story-paragraph {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 16px;
}

.story-highlights-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 24px;
}

.story-highlight-box {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: var(--transition);
}

.story-highlight-box:hover {
    background: #F0F7FF;
    border-color: rgba(2, 132, 199, 0.3);
    transform: translateY(-2px);
}

.story-highlight-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(2, 132, 199, 0.1);
    color: var(--brand-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.story-highlight-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--brand-dark);
    margin-bottom: 2px;
}

.story-highlight-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
    margin-bottom: 0;
}

/* Mission, Vision & Values Bento Section */
.about-values-section {
    padding: 85px 0;
    background: #F8FAFC;
    position: relative;
}

.value-bento-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    padding: 34px 28px;
    height: 100%;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.value-bento-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-brand-blue);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.value-bento-card.card-mission::before {
    background: var(--gradient-brand-blue);
}

.value-bento-card.card-vision::before {
    background: var(--gradient-brand-red);
}

.value-bento-card.card-values::before {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
}

.value-bento-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
    border-color: rgba(2, 132, 199, 0.25);
}

.value-bento-card:hover::before {
    opacity: 1;
}

.value-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 22px;
}

.value-card-icon.icon-blue {
    background: rgba(2, 132, 199, 0.1);
    color: var(--brand-blue);
}

.value-card-icon.icon-red {
    background: rgba(225, 29, 72, 0.1);
    color: var(--brand-red-vivid);
}

.value-card-icon.icon-green {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.value-card-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--brand-dark);
    margin-bottom: 12px;
}

.value-card-desc {
    font-size: 14.5px;
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: 20px;
}

.value-list-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.value-list-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: #334155;
    margin-bottom: 10px;
    font-weight: 500;
}

.value-list-checklist li i {
    color: #10B981;
    font-size: 14px;
    margin-top: 3px;
    flex-shrink: 0;
}

/* 5-Step Scientific Methodology Timeline */
.about-method-section {
    padding: 90px 0;
    background: #0B1220;
    color: #FFFFFF;
    position: relative;
}

.about-method-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(#0284C7 1px, transparent 1px);
    background-size: 36px 36px;
    opacity: 0.05;
    pointer-events: none;
}

.method-grid-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    position: relative;
    z-index: 2;
}

.method-step-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: var(--transition);
    position: relative;
}

.method-step-card:hover {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(56, 189, 248, 0.4);
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
}

.method-step-num {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: rgba(56, 189, 248, 0.3);
    line-height: 1;
    margin-bottom: 14px;
    transition: color 0.3s ease;
}

.method-step-card:hover .method-step-num {
    color: #38BDF8;
}

.method-step-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(2, 132, 199, 0.18);
    border: 1px solid rgba(56, 189, 248, 0.25);
    color: #38BDF8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 16px;
}

.method-step-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 10px;
    line-height: 1.25;
}

.method-step-desc {
    font-size: 13px;
    color: #94A3B8;
    line-height: 1.55;
    margin-bottom: 0;
}

/* Comparison Matrix Section (DR Waterlock vs Traditional) */
.about-comparison-section {
    padding: 90px 0;
    background: #FFFFFF;
}

.compare-card-box {
    border-radius: 20px;
    padding: 36px 30px;
    height: 100%;
}

.compare-card-box.compare-traditional {
    background: #FFF1F2;
    border: 1px solid #FECDD3;
}

.compare-card-box.compare-drwaterlock {
    background: linear-gradient(180deg, #F0F7FF 0%, #FFFFFF 100%);
    border: 2px solid var(--brand-blue);
    box-shadow: 0 16px 40px rgba(2, 132, 199, 0.12);
    position: relative;
}

.compare-badge-winner {
    position: absolute;
    top: -14px;
    right: 28px;
    background: var(--gradient-brand-blue);
    color: #FFFFFF;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: var(--r-pill);
    box-shadow: 0 6px 16px rgba(2, 132, 199, 0.35);
}

.compare-card-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.compare-card-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
}

.compare-traditional .compare-card-title {
    color: #BE123C;
}

.compare-drwaterlock .compare-card-title {
    color: var(--brand-blue);
}

.compare-card-sub {
    font-size: 13.5px;
    color: var(--text-muted);
}

.compare-points-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.compare-point-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.5;
}

.compare-point-item i {
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

.compare-traditional .compare-point-item i {
    color: #E11D48;
}

.compare-drwaterlock .compare-point-item i {
    color: #059669;
}

.compare-point-title {
    font-weight: 700;
    color: var(--brand-dark);
}

.compare-point-desc {
    color: var(--text-muted);
    font-size: 13px;
}

/* Engineering Leadership & Team Section */
.about-team-section {
    padding: 90px 0;
    background: #F8FAFC;
}

.team-member-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);
    transition: var(--transition);
    height: 100%;
}

.team-member-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
    border-color: rgba(2, 132, 199, 0.3);
}

.team-img-wrap {
    position: relative;
    height: 260px;
    overflow: hidden;
    background: #0B1220;
}

.team-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.team-member-card:hover .team-img-wrap img {
    transform: scale(1.06);
}

.team-role-pill {
    position: absolute;
    bottom: 14px;
    left: 14px;
    background: rgba(11, 18, 32, 0.85);
    color: #38BDF8;
    border: 1px solid rgba(56, 189, 248, 0.3);
    backdrop-filter: blur(8px);
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.team-member-body {
    padding: 22px 20px;
}

.team-member-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--brand-dark);
    margin-bottom: 4px;
}

.team-member-exp {
    font-size: 12.5px;
    color: var(--brand-blue);
    font-weight: 600;
    margin-bottom: 10px;
}

.team-member-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.55;
    margin-bottom: 0;
}

/* Responsive Media Queries for About Us Page */
@media (max-width: 1199.98px) {
    .method-grid-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991.98px) {
    .about-hero-section {
        padding: 50px 0 80px;
    }

    .about-metrics-bar {
        padding: 18px;
    }

    .story-img-main {
        height: 340px;
    }

    .method-grid-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .story-highlights-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .about-hero-section {
        padding: 40px 0 60px;
    }

    .about-metric-card {
        padding: 8px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .about-metric-card:last-child {
        border-bottom: none;
    }

    .story-floating-card {
        position: static;
        margin-top: 16px;
        max-width: 100%;
    }

    .story-img-main {
        height: 280px;
    }

    .method-grid-row {
        grid-template-columns: 1fr;
    }

    .value-bento-card {
        padding: 24px 20px;
    }

    .compare-card-box {
        padding: 24px 18px;
    }
}

/* ==========================================================================
   13. Service Detail Content Section (100% Match to Reference Screenshot)
   ========================================================================== */
.service-detail-section {
    padding: 70px 0 90px;
    background: #FFFFFF;
    color: #0F172A;
}

.service-detail-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 48px;
    align-items: flex-start;
}

/* Left Main Column */
.service-detail-main-col {
    display: flex;
    flex-direction: column;
}

.service-pill-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 16px;
}

.service-pill-tag i {
    font-size: 13px;
    color: #0284C7;
}

.service-section-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(34px, 3.8vw, 50px);
    font-weight: 700;
    color: #0F172A;
    line-height: 1.12;
    margin-bottom: 18px;
    letter-spacing: 0.2px;
}

.service-section-title .font-serif-italic {
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    font-weight: 400;
    color: #64748B;
    margin-left: 4px;
}

.service-lead-desc {
    font-size: 14px;
    line-height: 1.7;
    color: #475569;
    margin-bottom: 35px;
}

.service-sub-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 700;
    color: #0F172A;
    margin-top: 15px;
    margin-bottom: 20px;
    letter-spacing: 0.2px;
}

.service-sub-heading .font-serif-italic {
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    font-weight: 400;
    color: #64748B;
    margin-left: 4px;
}

/* Hashtag Installed Items */
.service-install-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 35px;
}

.service-install-item h4 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 5px;
}

.service-install-item p {
    font-size: 13.5px;
    line-height: 1.65;
    color: #475569;
    margin-bottom: 0;
}

/* Wide Middle Image */
.service-middle-banner-wrap {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.08);
    margin: 15px 0 35px;
    width: 100%;
}

.service-middle-banner-img {
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: cover;
    display: block;
    border-radius: 18px;
}

/* Simple Steps with Circle Icons */
.service-steps-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 35px;
}

.service-step-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.service-step-icon {
    font-size: 16px;
    color: #64748B;
    margin-top: 2px;
    flex-shrink: 0;
}

.service-step-content h4 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15.5px;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 4px;
}

.service-step-content p {
    font-size: 13.5px;
    line-height: 1.6;
    color: #475569;
    margin-bottom: 0;
}

/* Why Choose List with Checkmarks */
.service-benefits-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.service-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.service-benefit-icon {
    font-size: 15px;
    color: #64748B;
    margin-top: 2px;
    flex-shrink: 0;
}

.service-benefit-content h4 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15.5px;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 4px;
}

.service-benefit-content p {
    font-size: 13.5px;
    line-height: 1.6;
    color: #475569;
    margin-bottom: 0;
}

/* Right Sticky Sidebar Box (Exact Match to Screenshot) */
.service-sidebar-col {
    position: sticky;
    top: 95px;
}

.service-sidebar-card {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(150deg, #0284C7 0%, #0369A1 100%);
    padding: 34px 26px;
    color: #FFFFFF;
    box-shadow: 0 20px 45px rgba(2, 132, 199, 0.28);
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.service-sidebar-card::before {
    content: '';
    position: absolute;
    top: -40px;
    left: -40px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.service-sidebar-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(20px, 1.6vw, 24px);
    font-weight: 800;
    line-height: 1.22;
    color: #FFFFFF;
    margin-bottom: 10px;
    max-width: 170px;
    letter-spacing: -0.3px;
    position: relative;
    z-index: 3;
}

.service-sidebar-desc {
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 20px;
    max-width: 165px;
    position: relative;
    z-index: 3;
    font-weight: 500;
}

.sidebar-yellow-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #FFC629;
    color: #0F172A;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    padding: 5px 5px 5px 16px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.25s ease;
    align-self: flex-start;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    position: relative;
    z-index: 4;
}

.sidebar-yellow-cta-btn:hover {
    background: #FFD147;
    color: #0F172A;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

.sidebar-cta-arrow-box {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.42);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #0F172A;
    transition: transform 0.25s ease, background 0.25s ease;
}

.sidebar-cta-arrow-box svg {
    width: 14px;
    height: 14px;
    stroke: #0F172A;
    display: block;
    transition: transform 0.25s ease;
}

.sidebar-yellow-cta-btn:hover .sidebar-cta-arrow-box {
    transform: translate(2px, -2px);
    background: rgba(255, 255, 255, 0.65);
}

.sidebar-circle-img-wrap {
    position: absolute;
    right: -12px;
    bottom: 94px;
    width: 174px;
    /* height: 160px; */
    /* border-radius: 50%; */
    /* border: 3.5px solid #FFFFFF; */
    overflow: hidden;
    /* box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22); */
    z-index: 2;
    /* background: #0284C7; */
}

.sidebar-circle-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 10%;
}

.sidebar-bottom-call-box {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 60px;
    position: relative;
    z-index: 3;
}

.sidebar-call-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    color: #FFFFFF;
    flex-shrink: 0;
}

.sidebar-call-details {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sidebar-call-label {
    font-size: 13.5px;
    font-weight: 700;
    color: #FFFFFF;
    opacity: 0.95;
    line-height: 1.2;
}

.sidebar-call-number {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(19px, 1.8vw, 22px);
    font-weight: 800;
    color: #FFFFFF;
    text-decoration: none;
    line-height: 1.1;
    letter-spacing: 0.2px;
    transition: opacity 0.2s ease;
}

.sidebar-call-number:hover {
    color: #FFFFFF;
    opacity: 0.85;
}

@media (max-width: 991.98px) {
    .service-detail-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .service-sidebar-col {
        position: static;
    }

    .service-sidebar-card {
        min-height: auto;
        padding: 32px 24px;
    }

    .sidebar-circle-img-wrap {
        width: 140px;
        height: 140px;
        right: 15px;
        bottom: 75px;
    }
}

/* ==========================================================================
   14. DR Waterlock Products Showcase & Catalog Styling
   ========================================================================== */
.products-section-wrap {
    padding: 50px 0 50px;
    background: #F8FAFC;
}

.products-filter-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 45px;
}

.product-filter-btn {
    padding: 9px 20px;
    border-radius: var(--r-pill);
    border: 1px solid #E2E8F0;
    background: #FFFFFF;
    color: #475569;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.product-filter-btn:hover,
.product-filter-btn.active {
    background: #0284C7;
    color: #FFFFFF;
    border-color: #0284C7;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25);
}

.products-catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 60px;
}

.product-item-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.product-item-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.1);
    border-color: rgba(2, 132, 199, 0.3);
}

.product-card-media {
    position: relative;
    height: 250px;
    background: radial-gradient(circle at center, #FFFFFF 0%, #F1F5F9 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 15px;
    border-bottom: 1px solid #E2E8F0;
}

.product-card-img {
    max-height: 205px;
    width: auto;
    max-width: 90%;
    object-fit: contain;
    filter: drop-shadow(0 12px 20px rgba(15, 23, 42, 0.16));
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-item-card:hover .product-card-img {
    transform: translateY(-4px) scale(1.06);
}

.product-code-pill {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(11, 18, 32, 0.85);
    color: #38BDF8;
    font-size: 11.5px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    border: 1px solid rgba(56, 189, 248, 0.3);
    backdrop-filter: blur(8px);
    letter-spacing: 0.5px;
}

.product-category-tag {
    position: absolute;
    bottom: 14px;
    left: 14px;
    background: rgba(2, 132, 199, 0.9);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    text-transform: uppercase;
}

.product-card-body {
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 6px;
    line-height: 1.25;
}

.product-desc {
    font-size: 13px;
    line-height: 1.6;
    color: #475569;
    margin-bottom: 16px;
}

.product-specs-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12.5px;
    color: #334155;
    background: #F8FAFC;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #E2E8F0;
}

.product-specs-list li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-specs-list i {
    color: #059669;
    font-size: 13px;
}

.product-pack-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.product-pack-label {
    font-size: 11.5px;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    margin-right: 4px;
}

.pack-pill {
    background: #E2E8F0;
    color: #0F172A;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
}

.product-card-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-product-primary {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: var(--r-pill);
    background: #0284C7;
    color: #FFFFFF;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

.btn-product-primary:hover {
    background: #0369A1;
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3);
}

.btn-product-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #22C55E;
    color: #FFFFFF;
    font-size: 18px;
    text-decoration: none;
    transition: var(--transition);
    flex-shrink: 0;
}

.btn-product-wa:hover {
    background: #16A34A;
    color: #FFFFFF;
    transform: scale(1.08);
}

/* Coverage & Technical Table */
.product-table-wrapper {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    padding: 35px 30px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.table-custom-responsive {
    overflow-x: auto;
}

.product-tech-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
    font-size: 13.5px;
}

.product-tech-table th {
    background: #0F172A;
    color: #FFFFFF;
    padding: 14px 18px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0.5px;
    border: none;
    white-space: nowrap;
}

.product-tech-table th:first-child {
    border-top-left-radius: 12px;
}

.product-tech-table th:last-child {
    border-top-right-radius: 12px;
}

.product-tech-table td {
    padding: 14px 18px;
    border-bottom: 1px solid #E2E8F0;
    color: #334155;
    vertical-align: middle;
}

.product-tech-table tr:hover td {
    background: #F8FAFC;
}

.badge-warranty-pill {
    background: rgba(5, 150, 105, 0.12);
    color: #059669;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    font-size: 11.5px;
    display: inline-block;
}

/* Dealer / Bulk Enquiry Card */
.dealer-cta-box {
    background: linear-gradient(135deg, #0B1120 0%, #0F172A 100%);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 24px;
    padding: 45px 35px;
    color: #FFFFFF;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.dealer-cta-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(26px, 2.5vw, 36px);
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 10px;
}

.dealer-cta-desc {
    color: #CBD5E1;
    font-size: 14px;
    line-height: 1.6;
    max-width: 650px;
    margin-bottom: 25px;
}

@media (max-width: 1199.98px) {
    .products-catalog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .products-catalog-grid {
        grid-template-columns: 1fr;
    }

    .product-table-wrapper {
        padding: 20px 15px;
    }
}

/* Product Photographs / On-Site Chemical Gallery */
.product-gallery-section {
    margin-bottom: 60px;
}

.product-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.product-gallery-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    height: 250px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
    background: #0B1120;
    cursor: pointer;
}

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

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

.product-gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 40%, rgba(11, 18, 32, 0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 18px 20px;
    color: #FFFFFF;
    transition: var(--transition);
}

.gallery-caption-tag {
    font-size: 11px;
    font-weight: 800;
    color: #38BDF8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

.gallery-caption-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16.5px;
    font-weight: 700;
    margin-bottom: 0;
    color: #FFFFFF;
}

@media (max-width: 991.98px) {
    .product-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .product-gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   15. Product Photographs Gallery Page Styling
   ========================================================================== */

/* --- Gallery Section Wrap --- */
.photo-gallery-section {
    padding: 70px 0 80px;
    background: linear-gradient(160deg, #F0F4FF 0%, #FFFFFF 50%, #F8FAFC 100%);
}

/* --- Photo Filter Bar --- */
.photo-filter-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 50px;
}

.photo-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 22px;
    border-radius: 50px;
    border: 1.5px solid #E2E8F0;
    background: #FFFFFF;
    color: #64748B;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.photo-filter-btn i {
    font-size: 13px;
}

.photo-filter-btn:hover {
    border-color: var(--brand-red, #E02020);
    color: var(--brand-red, #E02020);
    background: #FFF5F5;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(224, 32, 32, 0.12);
}

.photo-filter-btn.active {
    background: var(--brand-red, #E02020);
    border-color: var(--brand-red, #E02020);
    color: #FFFFFF;
    box-shadow: 0 6px 18px rgba(224, 32, 32, 0.28);
}

/* --- Masonry Photo Grid --- */
.photo-masonry-grid {
    columns: 4;
    column-gap: 18px;
}

.photo-item {
    break-inside: avoid;
    margin-bottom: 18px;
    display: block;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.photo-item.hidden {
    display: none;
}

.photo-item--tall .photo-card img {
    aspect-ratio: 3 / 4;
}

/* --- Photo Card --- */
.photo-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #1E293B;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.10);
    cursor: pointer;
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.32s ease;
}

.photo-card:hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
}

.photo-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease, filter 0.4s ease;
}

.photo-card:hover img {
    transform: scale(1.06);
    filter: brightness(0.72);
}

/* --- Photo Overlay --- */
.photo-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px;
    background: linear-gradient(to top, rgba(10, 14, 28, 0.85) 0%, transparent 55%);
    opacity: 0;
    transition: opacity 0.32s ease;
}

.photo-card:hover .photo-overlay {
    opacity: 1;
}

.photo-overlay-content {
    margin-top: auto;
}

.photo-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 50px;
    background: rgba(224, 32, 32, 0.85);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    backdrop-filter: blur(4px);
}

.photo-tag-site {
    background: rgba(14, 165, 233, 0.85);
}

.photo-caption {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #FFFFFF;
    margin: 0 0 2px;
    line-height: 1.3;
}

.photo-subcaption {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}

/* --- Zoom Button (top-right corner) --- */
.photo-zoom-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    backdrop-filter: blur(6px);
}

.photo-zoom-btn:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.1);
}

/* --- Lightbox Overlay --- */
.photo-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 8, 20, 0.94);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(12px);
}

.photo-lightbox-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.photo-lightbox-inner {
    position: relative;
    max-width: 960px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    animation: lightboxFadeIn 0.35s ease forwards;
}

@keyframes lightboxFadeIn {
    from {
        opacity: 0;
        transform: scale(0.94);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.lightbox-close-btn {
    position: fixed;
    top: 20px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    backdrop-filter: blur(6px);
    z-index: 100000;
}

.lightbox-close-btn:hover {
    background: rgba(224, 32, 32, 0.75);
    transform: rotate(90deg) scale(1.05);
}

.lightbox-img-wrap {
    width: 100%;
    max-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    overflow: hidden;
}

.lightbox-img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
}

.lightbox-caption-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 4px 0;
}

.lightbox-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #F1F5F9;
    margin: 0;
}

.lightbox-brand-tag {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* --- Responsive: Masonry Grid Columns --- */
@media (max-width: 1199.98px) {
    .photo-masonry-grid {
        columns: 3;
    }
}

@media (max-width: 767.98px) {
    .photo-masonry-grid {
        columns: 2;
        column-gap: 12px;
    }

    .photo-item {
        margin-bottom: 12px;
    }
}

@media (max-width: 479.98px) {
    .photo-masonry-grid {
        columns: 1;
    }
}

/* ==========================================================================
   16. Applications & Coverage Section — Modern Premium Redesign
   ========================================================================== */

/* --- Section Wrap: Deep dark gradient with subtle mesh pattern --- */
.app-coverage-section {
    padding: 90px 0 80px;
    background: linear-gradient(145deg, #060C1A 0%, #0D1B35 40%, #0A1628 70%, #050B18 100%);
    position: relative;
    overflow: hidden;
}

/* Decorative animated blur orbs */
.app-coverage-section::before {
    content: '';
    position: absolute;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224, 32, 32, 0.08) 0%, transparent 65%);
    top: -200px;
    right: -200px;
    pointer-events: none;
}

.app-coverage-section::after {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.07) 0%, transparent 65%);
    bottom: -100px;
    left: -100px;
    pointer-events: none;
}

/* Make section heading white on dark bg */
.app-coverage-section .section-main-heading {
    color: #F8FAFC;
}

.app-coverage-section .section-sub-desc {
    color: #94A3B8;
}

/* --- Application Area Cards Grid --- */
.app-area-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

/* --- Application Area Card: Glassmorphism Dark --- */
.app-area-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 22px;
    padding: 32px 28px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease;
    cursor: default;
}

/* Glow line at top on hover (uses icon color via inline var) */
.app-area-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    opacity: 0;
    transition: opacity 0.35s ease;
}

/* Bottom right watermark number */
.app-area-card::after {
    content: attr(data-num);
    position: absolute;
    bottom: 16px;
    right: 20px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 72px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.03);
    line-height: 1;
    pointer-events: none;
    transition: color 0.35s ease;
}

.app-area-card:hover {
    transform: translateY(-8px) scale(1.015);
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.08);
}

.app-area-card:hover::before {
    opacity: 1;
}

.app-area-card:hover::after {
    color: rgba(255, 255, 255, 0.05);
}

/* --- Icon Wrap: Glowing colored circle --- */
.app-area-icon-wrap {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 24px;
    color: #FFFFFF;
    position: relative;
    flex-shrink: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.app-area-card:hover .app-area-icon-wrap {
    transform: scale(1.08) rotate(-3deg);
}

/* --- Card Text --- */
.app-area-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #F1F5F9;
    margin-bottom: 10px;
    letter-spacing: 0.3px;
    line-height: 1.25;
}

.app-area-desc {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    color: #64748B;
    line-height: 1.7;
    margin-bottom: 18px;
}

/* --- Recommended Products List --- */
.app-area-products {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.app-area-products li {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: #CBD5E1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-area-products li i {
    font-size: 12px;
    flex-shrink: 0;
    color: #4ADE80;
    filter: drop-shadow(0 0 5px rgba(74, 222, 128, 0.5));
}

/* --- Coverage Badge: neon pill --- */
.app-coverage-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: #E2E8F0;
    letter-spacing: 0.3px;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.app-coverage-badge:hover {
    background: rgba(255, 255, 255, 0.1);
}

.app-coverage-badge i {
    font-size: 11px;
    color: #FBBF24;
}

/* --- Coverage Stats Bar: Bold glassmorphic strip --- */
.coverage-stats-bar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 36px 48px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* Subtle top glow line on stats bar */
.coverage-stats-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.5), transparent);
}

.cov-stat-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 36px;
    flex: 1;
    min-width: 150px;
    position: relative;
}

.cov-stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #FBBF24;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.3));
    transition: transform 0.3s ease, filter 0.3s ease;
}

.cov-stat-item:hover .cov-stat-icon {
    transform: scale(1.1);
    filter: drop-shadow(0 0 14px rgba(251, 191, 36, 0.5));
}

.cov-stat-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cov-stat-num {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1;
    letter-spacing: 0.5px;
}

.cov-stat-label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11.5px;
    color: #64748B;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.cov-stat-divider {
    width: 1px;
    height: 56px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.1), transparent);
    flex-shrink: 0;
}

/* --- Responsive --- */
@media (max-width: 1199.98px) {
    .app-area-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cov-stat-item {
        padding: 0 20px;
    }
}

@media (max-width: 991.98px) {
    .coverage-stats-bar {
        padding: 28px 24px;
        gap: 24px;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .cov-stat-item {
        flex: 0 0 calc(50% - 24px);
        padding: 0;
    }

    .cov-stat-divider {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .app-coverage-section {
        padding: 60px 0 60px;
    }

    .app-area-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .coverage-stats-bar {
        padding: 24px 20px;
        gap: 20px;
        flex-direction: column;
        align-items: flex-start;
    }

    .cov-stat-item {
        flex: 0 0 100%;
        padding: 0;
        width: 100%;
    }
}

/* ==========================================================================
   17. Product Photographs Marquee Section — Light Theme Overrides
       (Scoped to #productPhotosMarquee to not affect home page)
   ========================================================================== */

/* Marquee wrapper bg already set via inline style (light gradient).
   These rules override the dark card styles when inside the light section. */

#productPhotosMarquee .project-showcase-card {
    background-color: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
}

#productPhotosMarquee .project-showcase-card:hover {
    border-color: rgba(224, 32, 32, 0.3);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
}

/* Lighter gradient overlay so image stays visible on white bg */
#productPhotosMarquee .project-card-overlay {
    background: linear-gradient(180deg,
            rgba(15, 23, 42, 0) 0%,
            rgba(15, 23, 42, 0.02) 30%,
            rgba(15, 23, 42, 0.55) 65%,
            rgba(15, 23, 42, 0.88) 100%);
}

#productPhotosMarquee .project-showcase-card:hover .project-card-overlay {
    background: linear-gradient(180deg,
            rgba(15, 23, 42, 0.04) 0%,
            rgba(15, 23, 42, 0.1) 25%,
            rgba(15, 23, 42, 0.65) 62%,
            rgba(15, 23, 42, 0.92) 100%);
}

/* Badge pills — lighter tint on white background */
#productPhotosMarquee .project-badge-pill {
    background: rgba(15, 23, 42, 0.72);
    border-color: rgba(255, 255, 255, 0.2);
}

#productPhotosMarquee .project-showcase-card:hover .project-badge-pill {
    background: rgba(224, 32, 32, 0.85);
    border-color: rgba(255, 255, 255, 0.25);
}

#productPhotosMarquee .project-showcase-card:hover .project-badge-pill i {
    color: #FFFFFF;
}

/* Marquee track: add slight card shadow separation from light bg */
#productPhotosMarquee .projects-marquee-track {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Remove default dark section bg for this marquee wrapper */
#productPhotosMarquee .projects-marquee-wrapper {
    background: transparent;
}

/* ==========================================================================
   18. Dealer Enquiry Page Styling
   ========================================================================== */

/* --- Dealer Hero Badge & Background --- */
.dealer-hero-bg {
    object-position: center 25% !important;
}

/* --- Dealer Benefits Section --- */
.dealer-benefits-section {
    padding: 50px 0;
    background: #F8FAFC;
}

.dealer-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 45px;
}

.dealer-benefit-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 20px;
    padding: 32px 28px;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
    position: relative;
    overflow: hidden;
}

.dealer-benefit-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--brand-red, #E02020);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dealer-benefit-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
    border-color: #CBD5E1;
}

.dealer-benefit-card:hover::before {
    opacity: 1;
}

.dealer-benefit-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #FFFFFF;
    margin-bottom: 20px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.dealer-benefit-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 10px;
}

.dealer-benefit-desc {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    color: #64748B;
    line-height: 1.65;
    margin: 0;
}

/* --- Dealer Application Form Section --- */
.dealer-form-section {
    padding: 50px 0;
    background: #FFFFFF;
}

.dealer-info-box {
    background: linear-gradient(145deg, #0F172A 0%, #1E293B 100%);
    border-radius: 24px;
    padding: 42px 36px;
    color: #FFFFFF;
    height: 100%;
    box-shadow: 0 16px 45px rgba(15, 23, 42, 0.15);
}

.dealer-info-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 14px;
}

.dealer-info-subtitle {
    font-size: 14px;
    color: #94A3B8;
    line-height: 1.65;
    margin-bottom: 30px;
}

.dealer-highlight-list {
    list-style: none;
    padding: 0;
    margin: 0 0 35px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dealer-highlight-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 13.5px;
    color: #E2E8F0;
}

.dealer-highlight-list li i {
    font-size: 18px;
    color: #38BDF8;
    flex-shrink: 0;
    margin-top: 2px;
}

.dealer-contact-card {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dealer-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #F8FAFC;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.25s ease;
}

.dealer-contact-item:hover {
    color: #38BDF8;
}

.dealer-contact-item i {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

/* --- Form Container Card (Full Width & Balanced) --- */
.dealer-form-full-card {
    max-width: 980px;
    margin: 0 auto;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 24px;
    padding: 48px 44px;
    box-shadow: 0 16px 45px rgba(15, 23, 42, 0.08);
}

.dealer-form-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 24px;
    padding: 42px 38px;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.08);
}

.dealer-form-header {
    margin-bottom: 32px;
}

.dealer-form-main-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 6px;
}

.dealer-form-sub {
    font-size: 13.5px;
    color: #64748B;
    margin: 0;
}

.dealer-input-group {
    margin-bottom: 20px;
}

.dealer-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 7px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.dealer-input,
.dealer-select,
.dealer-textarea {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1.5px solid #CBD5E1;
    background: #F8FAFC;
    font-size: 14px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #0F172A;
    transition: all 0.25s ease;
    outline: none;
}

.dealer-input:focus,
.dealer-select:focus,
.dealer-textarea:focus {
    background: #FFFFFF;
    border-color: var(--brand-red, #E02020);
    box-shadow: 0 0 0 4px rgba(224, 32, 32, 0.1);
}

.dealer-textarea {
    resize: vertical;
    min-height: 95px;
}

.dealer-submit-btn {
    width: 100%;
    padding: 15px 28px;
    border-radius: 50px;
    background: linear-gradient(135deg, #E11D48 0%, #D9232D 60%, #B91C1C 100%);
    border: none;
    color: #FFFFFF;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(225, 29, 72, 0.35);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.dealer-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(225, 29, 72, 0.5);
}

/* --- 4-Step Process Section --- */
.dealer-process-section {
    padding: 80px 0;
    background: linear-gradient(145deg, #0B1220 0%, #111D35 100%);
    color: #FFFFFF;
}

.dealer-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 50px;
}

.dealer-step-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px 24px;
    text-align: center;
    position: relative;
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.dealer-step-card:hover {
    transform: translateY(-6px);
    border-color: rgba(56, 189, 248, 0.4);
    background: rgba(255, 255, 255, 0.08);
}

.dealer-step-number {
    position: absolute;
    top: 14px;
    right: 18px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.1);
}

.dealer-step-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #38BDF8;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.15);
}

.dealer-step-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 8px;
}

.dealer-step-desc {
    font-size: 13px;
    color: #94A3B8;
    line-height: 1.6;
    margin: 0;
}

/* --- Responsive for Dealer Enquiry Page --- */
@media (max-width: 1199.98px) {
    .dealer-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dealer-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {

    .dealer-benefits-grid,
    .dealer-process-grid {
        grid-template-columns: 1fr;
    }

    .dealer-form-card,
    .dealer-info-box {
        padding: 28px 20px;
    }
}

/* ==========================================================================
   19. Download Catalogue Page Styling
   ========================================================================== */
.catalogue-section {
    padding: 50px 0;
    background: #F8FAFC;
}

/* Master Download Featured Banner Card */
.catalogue-master-box {
    background: linear-gradient(135deg, #0B1220 0%, #1E293B 100%);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 24px;
    padding: 42px 40px;
    color: #FFFFFF;
    box-shadow: 0 16px 45px rgba(15, 23, 42, 0.18);
    position: relative;
    overflow: hidden;
    margin-bottom: 45px;
}

.catalogue-master-box::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.catalogue-master-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(24px, 2.5vw, 34px);
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 12px;
}

.catalogue-master-desc {
    color: #94A3B8;
    font-size: 14px;
    line-height: 1.65;
    max-width: 680px;
    margin-bottom: 25px;
}

.catalogue-master-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-download-pdf {
    background: linear-gradient(135deg, #E11D48 0%, #D9232D 60%, #B91C1C 100%);
    color: #FFFFFF;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 13px 28px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 24px rgba(225, 29, 72, 0.35);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
    border: none;
    text-decoration: none;
}

.btn-download-pdf:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(225, 29, 72, 0.5);
    color: #FFFFFF;
}

.btn-whatsapp-pdf {
    background: #10B981;
    color: #FFFFFF;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 13px 26px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
    border: none;
    text-decoration: none;
}

.btn-whatsapp-pdf:hover {
    background: #059669;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.5);
    color: #FFFFFF;
}

/* Individual Product TDS Catalogues Grid */
.catalogue-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.catalogue-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 20px;
    padding: 26px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.3s ease,
        border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.catalogue-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
    border-color: #CBD5E1;
}

.catalogue-card-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.catalogue-product-img {
    width: 68px;
    height: 68px;
    border-radius: 14px;
    object-fit: contain;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    padding: 6px;
    flex-shrink: 0;
}

.catalogue-card-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 6px;
}

.catalogue-card-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #0F172A;
    margin: 0;
}

.catalogue-card-desc {
    font-size: 13px;
    color: #64748B;
    line-height: 1.6;
    margin-bottom: 18px;
}

.catalogue-specs-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    font-size: 12.5px;
    color: #475569;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.catalogue-specs-list li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.catalogue-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid #F1F5F9;
}

.btn-card-download {
    flex: 1;
    padding: 10px 14px;
    border-radius: var(--r-pill);
    background: #F1F5F9;
    color: #0F172A;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.25s ease;
    border: 1px solid #E2E8F0;
}

.btn-card-download:hover {
    background: var(--brand-red, #D9232D);
    color: #FFFFFF;
    border-color: var(--brand-red, #D9232D);
}

.btn-card-wa {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.12);
    color: #10B981;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.25s ease;
    flex-shrink: 0;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.btn-card-wa:hover {
    background: #10B981;
    color: #FFFFFF;
    transform: scale(1.08);
}

@media (max-width: 1199.98px) {
    .catalogue-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .catalogue-grid {
        grid-template-columns: 1fr;
    }

    .catalogue-master-box {
        padding: 28px 20px;
    }

    .catalogue-master-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-download-pdf,
    .btn-whatsapp-pdf {
        justify-content: center;
    }
}

/* ==========================================================================
   20. Contact Us Page Styling (Redesigned Section Match to User Reference)
   ========================================================================== */
.contact-section-ref {
    padding: 75px 0 90px;
    background: #FFFFFF;
    color: #0F172A;
}

/* --- Left Column Styling --- */
/* --- Universal Section Header System (Matching Reference Design) --- */
.contact-ref-tag-badge,
.section-pill-tag,
.section-ref-badge,
.contact-form-badge,
.story-tag-badge,
.service-pill-tag,
.about-pill-tag,
.story-sidebar-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    color: #0284c7 !important;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 14px;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.contact-ref-tag-badge i,
.section-pill-tag i,
.section-ref-badge i,
.contact-form-badge i,
.story-tag-badge i,
.service-pill-tag i,
.about-pill-tag i,
.story-sidebar-pill i {
    font-size: 13px;
    color: #0284c7 !important;
}

.contact-left-main-title,
.section-main-heading,
.section-ref-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 800;
    line-height: 1.25;
    color: #0B132A;
    margin-bottom: 14px;
    letter-spacing: -0.5px;
}

.contact-left-main-title .text-accent-blue-highlight,
.section-main-heading .text-accent-blue-highlight,
.section-ref-title .text-accent-blue-highlight,
.section-main-heading .font-serif-italic,
.story-ref-title .font-serif-italic,
.service-section-title .font-serif-italic,
.service-sub-heading .font-serif-italic,
.font-serif-italic {
    color: #0284c7 !important;
    font-style: normal !important;
    font-family: inherit !important;
    display: inline-block;
}

.contact-left-subtitle,
.section-sub-desc,
.section-ref-subtitle {
    font-size: 15px;
    color: #8A99AD;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Stacked White Info Cards */
.contact-cards-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.contact-info-white-card {
    background: #FFFFFF;
    border: 1.5px solid #EBF1FB;
    border-radius: 20px;
    padding: 22px 26px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 20px rgba(2, 132, 199, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.contact-info-white-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(2, 132, 199, 0.08);
    border-color: #D6E4FF;
}

.contact-card-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #EBF3FE;
    color: #0284c7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.contact-card-details {
    flex: 1;
}

.contact-card-title {
    font-size: 17px;
    font-weight: 700;
    color: #0284c7;
    margin-bottom: 4px;
}

.contact-card-text {
    font-size: 13.5px;
    color: #64748B;
    line-height: 1.5;
    margin: 0;
}

.contact-card-text a {
    color: #64748B;
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-card-text a:hover {
    color: #0284c7;
}

/* Wavy Squiggly Line Divider */
.contact-wavy-divider {
    padding: 12px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.contact-wavy-divider svg {
    width: 100%;
    height: 16px;
}

/* --- Right Column Ice-Blue Form Styling --- */
.contact-form-iceblue-card {
    background: #EBF3FE;
    border-radius: 24px;
    padding: 44px 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.contact-form-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    color: #0284c7;
    letter-spacing: 0.6px;
    margin-bottom: 10px;
}

.contact-form-badge i {
    font-size: 10px;
    color: #0284c7;
}

.contact-form-title-ref {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(26px, 2.5vw, 36px);
    font-weight: 800;
    color: #0B132A;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.contact-field-group {
    display: flex;
    flex-direction: column;
}

.contact-field-label {
    font-size: 13.5px;
    font-weight: 700;
    color: #64748B;
    margin-bottom: 8px;
}

.contact-field-input,
.contact-field-select {
    width: 100%;
    height: 52px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 0 18px;
    font-size: 14.5px;
    color: #0B132A;
    outline: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.contact-field-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230284c7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    padding-right: 44px;
}

.contact-field-input::placeholder,
.contact-field-textarea::placeholder {
    color: #94A3B8;
}

.contact-field-input:focus,
.contact-field-select:focus,
.contact-field-textarea:focus {
    border-color: #0284c7;
    background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.12);
}

.contact-field-textarea {
    width: 100%;
    min-height: 140px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 16px 18px;
    font-size: 14.5px;
    color: #0B132A;
    outline: none;
    resize: vertical;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

/* Chrome / Safari / Edge Autofill Fix */
.contact-field-input:-webkit-autofill,
.contact-field-input:-webkit-autofill:hover,
.contact-field-input:-webkit-autofill:focus,
.contact-field-input:-webkit-autofill:active,
.contact-field-select:-webkit-autofill,
.contact-field-textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
    -webkit-text-fill-color: #0B132A !important;
    box-shadow: 0 0 0 1000px #FFFFFF inset !important;
    border-radius: 14px !important;
    border: 1px solid #E2E8F0 !important;
    transition: background-color 5000s ease-in-out 0s;
    font-family: inherit !important;
    font-size: 14.5px !important;
}

.contact-field-input:-webkit-autofill:focus,
.contact-field-select:-webkit-autofill:focus,
.contact-field-textarea:-webkit-autofill:focus {
    border-color: #0284c7 !important;
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset, 0 0 0 4px rgba(2, 132, 199, 0.12) !important;
    box-shadow: 0 0 0 1000px #FFFFFF inset, 0 0 0 4px rgba(2, 132, 199, 0.12) !important;
}

/* Original Contact Submit Button (Retained) */
.contact-submit-btn {
    width: 100%;
    background: linear-gradient(135deg, #E11D48 0%, #D9232D 60%, #B91C1C 100%);
    color: #FFFFFF;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 14px 28px;
    border-radius: var(--r-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(225, 29, 72, 0.35);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.contact-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(225, 29, 72, 0.5);
    color: #FFFFFF;
}

/* Map Section */
.contact-map-section {
    padding: 0 0 60px;
    background: #FFFFFF;
}

.contact-map-wrapper {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    border: 1.5px solid #E2E8F0;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.08);
    height: 420px;
}

.contact-map-iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.contact-map-floating-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 14px 20px;
    color: #FFFFFF;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    gap: 12px;
}

.contact-map-floating-badge i {
    color: var(--brand-red, #E02020);
    font-size: 22px;
}

.contact-map-badge-text h5 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    color: #FFFFFF;
}

.contact-map-badge-text p {
    font-size: 12px;
    color: #CBD5E1;
    margin: 0;
}

@media (max-width: 991.98px) {
    .contact-form-iceblue-card {
        padding: 32px 24px;
        border-radius: 20px;
    }

    .contact-left-main-title {
        font-size: 28px;
    }

    .contact-map-wrapper {
        height: 340px;
    }
}

@media (max-width: 767.98px) {
    .contact-section-ref {
        padding: 50px 0;
    }

    .contact-form-iceblue-card {
        padding: 26px 18px;
    }

    .contact-map-floating-badge {
        position: static;
        margin: 10px;
        border-radius: 12px;
    }
}

/* ==========================================================================
   21. Ready CTA Banner Card (Matching Hero Banner System with book-right.webp)
   ========================================================================== */
.ready-cta-section {
    padding: 40px 0 80px;
    background: transparent;
}

.ready-cta-blue-card {
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: linear-gradient(135deg, #0284C7 0%, #0369A1 50%, #075985 100%);
    border-radius: 28px;
    overflow: hidden;
    padding: 60px 50px;
    width: 100%;
    box-shadow: 0 20px 45px rgba(2, 132, 199, 0.28);
}

.ready-cta-blue-card::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    filter: blur(40px);
    pointer-events: none;
}

.ready-cta-blue-card::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: 30%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(56, 189, 248, 0.15);
    filter: blur(60px);
    pointer-events: none;
}

.ready-cta-bottom-right-img {
    position: absolute;
    bottom: 0;
    right: 0;
    max-height: 100%;
    max-width: 46%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: bottom right;
    z-index: 2;
    pointer-events: none;
    opacity: 0.9;
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.15));
    transition: transform 0.5s ease;
}

.ready-cta-left-box {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    max-width: 55%;
}

@media (max-width: 991.98px) {
    .ready-cta-blue-card {
        padding: 45px 30px;
    }

    .ready-cta-left-box {
        max-width: 65%;
    }

    .ready-cta-bottom-right-img {
        max-width: 42%;
        opacity: 0.7;
    }
}

@media (max-width: 767.98px) {
    .ready-cta-blue-card {
        padding: 35px 22px;
        min-height: auto;
        border-radius: 20px;
    }

    .ready-cta-left-box {
        max-width: 100%;
    }

    .ready-cta-bottom-right-img {
        display: none;
    }
}

/* Premium CTA Buttons inside Blue Card */
.btn-cta-primary-red {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #E11D48 0%, #BE123C 100%);
    color: #FFFFFF !important;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 9px 20px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(225, 29, 72, 0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    border: none;
}

.btn-cta-primary-red:hover {
    background: linear-gradient(135deg, #F43F5E 0%, #E11D48 100%);
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(225, 29, 72, 0.5);
    color: #FFFFFF !important;
}

.btn-cta-primary-red i {
    font-size: 12px;
    transition: transform 0.25s ease;
}

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

.btn-cta-whatsapp-glass {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.18);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    color: #FFFFFF !important;
    font-size: 12.5px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 50px;
    text-decoration: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.btn-cta-whatsapp-glass:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: #FFFFFF;
    color: #FFFFFF !important;
    transform: translateY(-2px);
}

.btn-cta-whatsapp-glass i {
    font-size: 15px;
    color: #4ADE80;
}

/* ==========================================================================
   22. Reference Matching Footer (Exact Design System & Layout Match)
   ========================================================================== */
.site-ref-footer {
    background: #060D1A;
    color: #CBD5E1;
    position: relative;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* 1. Top Newsletter Banner Strip */
.footer-newsletter-banner {
    background: #0284c7;
    padding: 30px 0;
    position: relative;
    z-index: 5;
}

.newsletter-banner-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 4px;
}

.newsletter-banner-sub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
}

.newsletter-banner-sub a {
    color: #FFFFFF;
    text-decoration: underline;
}

.newsletter-input-group {
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.newsletter-banner-input {
    flex: 1;
    height: 52px;
    border: none;
    outline: none;
    padding: 0 20px;
    font-size: 14px;
    color: #0F172A;
    background: #F1F5F9;
}

.newsletter-banner-input::placeholder {
    color: #94A3B8;
}

.newsletter-banner-btn {
    height: 52px;
    background: linear-gradient(135deg, #FACC15 0%, #EAB308 100%);
    color: #0F172A;
    font-size: 14px;
    font-weight: 800;
    padding: 0 26px;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

.newsletter-banner-btn:hover {
    background: linear-gradient(135deg, #FDE047 0%, #FACC15 100%);
}

/* 2. Middle Body with Vertical Separator */
.footer-middle-body {
    padding: 60px 0 50px;
    background: #070F1E;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-ref-logo {
    height: 48px;
    width: auto;
    object-fit: contain;
}

.footer-brand-desc {
    font-size: 14px;
    line-height: 1.65;
    color: #94A3B8;
}

.footer-follow-bar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.follow-label {
    font-size: 13.5px;
    font-weight: 700;
    color: #FFFFFF;
}

.follow-social-circles {
    display: flex;
    align-items: center;
    gap: 8px;
}

.social-circle-item {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #FFFFFF !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.social-circle-item:hover {
    background: #0284c7;
    border-color: #0284c7;
}

.footer-dev-link {
    color: #0284c7;
    text-decoration: underline;
    display: inline;
}

.footer-copyright-text {
    font-size: 13px;
    color: #64748B;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .footer-copyright-text {
        white-space: normal;
        font-size: 12px;
    }
}

/* ==========================================================================
   Reference Matching FAQ Showcase Section
   ========================================================================== */
.faqs-showcase-section {
    padding: 50px 0;
    background: #FFFFFF;
    position: relative;
}

.ref-faq-left-wrap {
    padding-right: 15px;
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
    z-index: 3;
}

.ref-faq-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 800;
    color: #0284c7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}

.ref-faq-badge i {
    font-size: 13px;
}

.ref-faq-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(24px, 2.2vw, 30px);
    font-weight: 800;
    color: #0F172A;
    line-height: 1.25;
    margin-bottom: 14px;
    letter-spacing: -0.4px;
}

.ref-faq-title-blue {
    color: #0284c7;
}

.text-underline-custom {
    text-decoration: underline;
    text-decoration-color: #0284c7;
    text-underline-offset: 4px;
}

.ref-faq-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #64748B;
    margin-bottom: 24px;
    max-width: 480px;
}

.ref-faq-bullets-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
}

.ref-faq-bullets-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 14px;
}

.ref-faq-bullets-list li i {
    color: #0284c7;
    font-size: 13px;
}

/* CTA Blue Card Box */
.ref-faq-cta-card {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    border-radius: 22px;
    padding: 32px 28px;
    position: relative;
    overflow: hidden;
    min-height: 200px;
    display: flex;
    align-items: center;
    box-shadow: 0 12px 35px rgba(2, 132, 199, 0.22);
}

.ref-faq-cta-watermark {
    position: absolute;
    bottom: -15px;
    left: 20px;
    font-size: 54px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.08);
    white-space: nowrap;
    pointer-events: none;
    text-transform: lowercase;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.ref-faq-cta-content {
    position: relative;
    z-index: 2;
    max-width: 62%;
}

.ref-faq-cta-title {
    font-size: 18.5px;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.35;
    margin-bottom: 20px;
}

.ref-faq-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #FACC15 0%, #EAB308 100%);
    color: #0F172A;
    font-size: 13.5px;
    font-weight: 800;
    padding: 10px 22px;
    border-radius: 50px;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 4px 14px rgba(234, 179, 8, 0.35);
}

.ref-faq-cta-btn:hover {
    transform: translateY(-2px);
    color: #0F172A;
    box-shadow: 0 6px 20px rgba(234, 179, 8, 0.5);
}

.ref-faq-cta-person {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    max-height: 220px;
    width: auto;
    object-fit: contain;
    z-index: 1;
    pointer-events: none;
}

/* Accordion Styles */
.ref-faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ref-faq-item {
    background: #FFFFFF;
    border: 1px solid #E2E8F0 !important;
    border-radius: 18px !important;
    overflow: hidden;
    transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.ref-faq-item.active,
.ref-faq-item:has(.accordion-collapse.show) {
    background: #F0F7FF !important;
    border: 1.5px solid #0284c7 !important;
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.1) !important;
}

.ref-faq-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 26px;
    background: transparent !important;
    border: none !important;
    text-align: left;
    cursor: pointer;
    box-shadow: none !important;
    outline: none !important;
}

.ref-faq-button::after {
    display: none !important;
}

.ref-faq-question {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 17.5px;
    font-weight: 700;
    color: #0F172A;
    margin: 0;
    padding-right: 15px;
    line-height: 1.4;
}

.ref-faq-circle-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: #F1F5F9;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.ref-faq-button:not(.collapsed) .ref-faq-circle-icon {
    background: #0284c7;
    color: #FFFFFF;
    transform: rotate(90deg);
}

.ref-faq-answer {
    padding: 0 26px 24px 26px;
    font-size: 14.5px;
    line-height: 1.65;
    color: #475569;
}

@media (max-width: 991px) {
    .ref-faq-left-wrap {
        padding-right: 0;
        margin-bottom: 30px;
        position: static;
    }

    .ref-faq-cta-card {
        min-height: 180px;
    }

    .ref-faq-cta-content {
        max-width: 70%;
    }
}

.footer-links-grid-wrap {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-col-title-ref {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 8px;
}

.footer-col-title-ref::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 35px;
    height: 2px;
    background: #FACC15;
}

.footer-links-ref-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links-ref-list a {
    color: #94A3B8;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.footer-links-ref-list a i {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.2s ease;
}

.footer-links-ref-list a:hover {
    color: #FFFFFF;
    transform: translateX(4px);
}

.footer-links-ref-list a:hover i {
    color: #FACC15;
}

/* 3. Bottom Contact Bar */
.footer-bottom-contact-bar {
    background: #040812;
    padding: 24px 0;
}

.footer-contact-item-ref {
    display: flex;
    align-items: center;
    gap: 14px;
}

.yellow-circle-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FACC15 0%, #EAB308 100%);
    color: #0F172A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(250, 204, 21, 0.3);
}

.contact-item-info {
    display: flex;
    flex-direction: column;
}

.contact-item-label {
    font-size: 12px;
    color: #94A3B8;
    font-weight: 600;
}

.contact-item-val {
    font-size: 13.5px;
    font-weight: 700;
    color: #FFFFFF;
    text-decoration: none;
    line-height: 1.3;
}

.contact-item-val:hover {
    color: #FACC15;
}

@media (max-width: 991.98px) {
    .footer-links-grid-wrap {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: 35px;
    }
}

/* ==========================================================================
   Reference Matching Blog Showcase Section
   ========================================================================== */
.blogs-showcase-section {
    padding: 50px 0;
    background: #F4F8FE;
    position: relative;
    overflow: hidden;
}

.ref-blog-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 800;
    color: #0284c7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.ref-blog-main-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 800;
    color: #0F172A;
    line-height: 1.25;
    margin-bottom: 6px;
    letter-spacing: -0.4px;
}

.ref-blog-title-blue {
    color: #0284c7;
}

/* Horizontal Blog Card */
.ref-blog-card {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 10px 30px rgba(2, 132, 199, 0.05);
    border: 1px solid #E2E8F0;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    height: 100%;
}

.ref-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(2, 132, 199, 0.12);
    border-color: rgba(2, 132, 199, 0.3);
}

.ref-blog-img-wrap {
    width: 220px;
    height: 180px;
    min-width: 220px;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
}

.ref-blog-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.ref-blog-card:hover .ref-blog-img {
    transform: scale(1.06);
}

.ref-blog-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.ref-blog-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.ref-blog-tag-pill {
    background: #E0F2FE;
    color: #0284c7;
    font-size: 11.5px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ref-blog-card-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 17px;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.35;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ref-blog-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ref-blog-card-title a:hover {
    color: #0284c7;
}

.ref-blog-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12.5px;
    color: #64748B;
    font-weight: 600;
    margin-bottom: 14px;
}

.ref-blog-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ref-blog-meta-item i {
    color: #EAB308;
    font-size: 13px;
}

.ref-blog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px dashed #E2E8F0;
    margin-top: auto;
}

.ref-blog-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #0284c7;
    color: #FFFFFF;
    font-size: 12.5px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 50px;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.25s ease;
}

.ref-blog-btn:hover {
    background: #0369a1;
    color: #FFFFFF;
    transform: translateY(-1px);
}

.ref-blog-author {
    display: flex;
    flex-direction: column;
    text-align: right;
}

.ref-blog-author-name {
    font-size: 12.5px;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.2;
}

.ref-blog-author-title {
    font-size: 11px;
    color: #64748B;
    font-weight: 600;
}

@media (max-width: 767px) {
    .ref-blog-card {
        flex-direction: column;
        align-items: stretch;
    }

    .ref-blog-img-wrap {
        width: 100%;
        height: 200px;
        min-width: 100%;
    }

    .ref-blog-author {
        text-align: left;
    }
}

/* ==========================================================================
   Reference Matching Testimonials Showcase Section
   ========================================================================== */
.testimonials-showcase-section {
    padding: 50px 0 20px 0;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.ref-testimonial-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 800;
    color: #0284c7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.ref-testimonial-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 800;
    color: #0F172A;
    line-height: 1.25;
    letter-spacing: -0.4px;
}

.ref-testimonial-title-blue {
    color: #0284c7;
}

.ref-testimonial-arrow-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1.5px solid #0284c7;
    background: #FFFFFF;
    color: #0284c7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.08);
}

.ref-testimonial-arrow-btn:hover,
.ref-testimonial-arrow-btn.active {
    background: #0284c7;
    color: #FFFFFF;
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.25);
}

/* Card Styling */
.ref-testimonial-card {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 28px 24px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 10px 30px rgba(2, 132, 199, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.ref-testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(2, 132, 199, 0.12);
    border-color: rgba(2, 132, 199, 0.3);
}

.ref-testimonial-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.ref-testimonial-card-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 17.5px;
    font-weight: 800;
    color: #0F172A;
    margin: 0;
}

.ref-testimonial-quote-icon {
    font-size: 22px;
    color: #F97316;
}

.ref-testimonial-text {
    font-size: 14.5px;
    line-height: 1.65;
    color: #64748B;
    font-style: italic;
    margin-bottom: 24px;
}

.ref-testimonial-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 18px;
    border-top: 1px dashed #E2E8F0;
    margin-top: auto;
}

.ref-testimonial-stars {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #F97316;
    font-size: 14px;
}

.ref-testimonial-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ref-testimonial-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #0284c7;
}

.ref-testimonial-user-info {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.ref-testimonial-user-name {
    font-size: 13.5px;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.2;
}

.ref-testimonial-user-role {
    font-size: 11.5px;
    color: #64748B;
    font-weight: 600;
}

/* ==========================================================================
   YouTube Shorts Section (#0284c7 Color Combination)
   ========================================================================== */
.youtube-shorts-section {
    padding: 70px 0;
    background: #0F172A;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.shorts-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.shorts-pill-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(2, 132, 199, 0.15);
    color: #38BDF8;
    border: 1px solid rgba(2, 132, 199, 0.3);
    font-size: 13px;
    font-weight: 800;
    padding: 6px 16px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.youtube-red-icon {
    color: #38BDF8 !important;
    font-size: 15px;
}

.shorts-main-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.25;
    margin-bottom: 8px;
}

.shorts-sub-desc {
    font-size: 15px;
    color: #94A3B8;
    margin-bottom: 0;
    max-width: 620px;
}

.btn-youtube-subscribe-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #0284c7;
    color: #FFFFFF;
    font-size: 13.5px;
    font-weight: 800;
    padding: 12px 26px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.35);
}

.btn-youtube-subscribe-pill:hover {
    background: #0369a1;
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(2, 132, 199, 0.5);
}

/* Video Card Carousel */
.youtube-shorts-swiper {
    padding-bottom: 50px;
}

.yt-video-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 9/16;
    background: #1E293B;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 2px solid #334155;
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.yt-video-card:hover {
    transform: translateY(-6px);
    border-color: #0284c7;
    box-shadow: 0 16px 36px rgba(2, 132, 199, 0.3);
}

.yt-reel-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.yt-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.5) 0%, transparent 40%, rgba(15, 23, 42, 0.7) 100%);
}

.yt-shorts-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 5px 12px;
    border-radius: 50px;
    width: fit-content;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.yt-shorts-badge i {
    color: #FF0000;
    font-size: 13px;
}

.yt-audio-indicator {
    align-self: flex-end;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 10 !important;
    transition: transform 0.2s ease, background 0.2s ease;
}

.yt-audio-indicator:hover {
    transform: scale(1.15);
    background: rgba(15, 23, 42, 0.95);
}

.yt-video-card .icon-unmuted {
    display: none;
}

.yt-video-card .icon-muted {
    display: block;
}

.yt-video-card.is-unmuted .yt-audio-indicator {
    background: #FF0000 !important;
    border-color: #FF0000 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 16px rgba(255, 0, 0, 0.6) !important;
}

.yt-video-card.is-unmuted .icon-muted {
    display: none !important;
}

.yt-video-card.is-unmuted .icon-unmuted {
    display: block !important;
    color: #FFFFFF !important;
}

.yt-video-link {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.shorts-slider-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 25px;
}

.shorts-swiper-prev,
.shorts-swiper-next {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid #0284c7;
    background: #1E293B;
    color: #38BDF8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
}

.shorts-swiper-prev:hover,
.shorts-swiper-next:hover {
    background: #0284c7;
    color: #FFFFFF;
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.4);
}

.shorts-swiper-pagination .swiper-pagination-bullet {
    background: #475569 !important;
    opacity: 0.7;
}

.shorts-swiper-pagination .swiper-pagination-bullet-active {
    background: #0284c7 !important;
    opacity: 1;
    width: 24px;
    border-radius: 10px;
}

/* ==========================================================================
   Reference Matching Services Showcase Section
   ========================================================================== */
.services-showcase-section {
    padding: 50px 0;
    background: #F4F8FE;
    position: relative;
    overflow: hidden;
}

.ref-service-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 800;
    color: #0284c7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.ref-service-main-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 800;
    color: #0F172A;
    line-height: 1.25;
    margin-bottom: 6px;
    letter-spacing: -0.4px;
}

.ref-service-title-blue {
    color: #0284c7;
}

/* 5 Tab Filter Buttons */
.ref-service-tab-card {
    width: 100%;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 20px;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.04);
    height: 100%;
    min-height: 140px;
}

.ref-service-tab-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(2, 132, 199, 0.12);
    border-color: rgba(2, 132, 199, 0.3);
}

.ref-service-tab-card.active {
    background: #0284c7;
    border-color: #0284c7;
    box-shadow: 0 12px 32px rgba(2, 132, 199, 0.28);
}

.ref-service-tab-icon {
    font-size: 28px;
    color: #0284c7;
    transition: color 0.3s ease, transform 0.3s ease;
}

.ref-service-tab-card.active .ref-service-tab-icon {
    color: #FFFFFF;
    transform: scale(1.1);
}

.ref-service-tab-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14.5px;
    font-weight: 800;
    color: #0F172A;
    text-align: center;
    margin: 0;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.ref-service-tab-card.active .ref-service-tab-title {
    color: #FFFFFF;
}

/* Bottom Showcase Banner Card */
.ref-service-detail-banner {
    background: #FFFFFF;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(2, 132, 199, 0.08);
    border: 1px solid #E2E8F0;
    margin-top: 25px;
}

.ref-service-banner-left {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    padding: 50px 44px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #FFFFFF;
    position: relative;
}

.ref-service-banner-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(24px, 2.5vw, 34px);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.25;
    margin-bottom: 16px;
}

.ref-service-banner-desc {
    font-size: 15.5px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.65;
    margin-bottom: 0;
}

.ref-service-glass-circle {
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.ref-service-glass-val {
    font-size: 16px;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.2;
}

.ref-service-glass-lbl {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

.ref-service-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    color: #0284c7;
    font-size: 13.5px;
    font-weight: 800;
    padding: 13px 26px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.ref-service-banner-btn:hover {
    background: #F8FAFC;
    color: #0369a1;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}

.ref-service-banner-right {
    height: 380px;
    min-height: 380px;
    max-height: 380px;
    position: relative;
    overflow: hidden;
}

.ref-service-banner-img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    transition: transform 0.6s ease, opacity 0.2s ease;
}

.ref-service-detail-banner:hover .ref-service-banner-img {
    transform: scale(1.04);
}

@media (max-width: 991px) {
    .ref-service-banner-left {
        padding: 32px 24px;
        min-height: auto;
    }

    .ref-service-banner-right {
        height: 280px;
        min-height: 280px;
        max-height: 280px;
    }

    .ref-service-banner-img {
        height: 280px;
    }
}

/* ==========================================================================
   Reference Matching Working Process Section
   ========================================================================== */
.working-process-section {
    padding: 50px 0;
    background: #FFFFFF;
    position: relative;
    overflow: hidden;
}

.ref-process-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 800;
    color: #0284c7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.ref-process-main-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 800;
    color: #0F172A;
    line-height: 1.25;
    margin-bottom: 6px;
    letter-spacing: -0.4px;
}

.ref-process-title-blue {
    color: #0284c7;
}

.ref-process-wrapper {
    position: relative;
    padding-top: 20px;
}

.ref-process-svg-line {
    position: absolute;
    top: 155px;
    left: 0;
    width: 100%;
    z-index: 1;
    pointer-events: none;
}

.ref-process-card {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
}

.ref-process-card-header {
    margin-bottom: 30px;
    min-height: 120px;
}

.ref-process-card-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 10px;
}

.ref-process-card-desc {
    font-size: 14px;
    color: #64748B;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 250px;
}

/* Icon Box Circles with Step Badges */
.ref-process-icon-box {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 38px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ref-process-card:hover .ref-process-icon-box {
    transform: translateY(-6px) scale(1.05);
    box-shadow: 0 18px 36px rgba(2, 132, 199, 0.15);
}

.ref-process-icon-box.color-orange {
    border: 1.5px solid rgba(249, 115, 22, 0.25);
    color: #F97316;
}

.ref-process-icon-box.color-blue {
    border: 1.5px solid rgba(2, 132, 199, 0.25);
    color: #0284c7;
}

.ref-process-icon-box.color-green {
    border: 1.5px solid rgba(16, 185, 129, 0.25);
    color: #10B981;
}

.ref-process-icon-box.color-pink {
    border: 1.5px solid rgba(236, 72, 153, 0.25);
    color: #EC4899;
}

.ref-process-step-num {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.ref-process-step-num.bg-orange {
    background: #F97316;
}

.ref-process-step-num.bg-blue {
    background: #0284c7;
}

.ref-process-step-num.bg-green {
    background: #10B981;
}

.ref-process-step-num.bg-pink {
    background: #EC4899;
}

/* ==========================================================================
   Reference Matching Hero Banner Section
   ========================================================================== */
.hero-banner-section {
    padding: 30px 0 50px 0;
    position: relative;
}

.hero-blue-banner-card {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 55%, #075985 100%);
    border-radius: 32px;
    padding: 55px 48px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(2, 132, 199, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.hero-green-pill-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #FFFFFF;
    font-size: 12.5px;
    font-weight: 800;
    padding: 7px 18px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.hero-pulse-dot-green {
    width: 9px;
    height: 9px;
    background: #10B981;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: pulseDotGreen 1.8s infinite;
}

@keyframes pulseDotGreen {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }

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

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

.ref-hero-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(30px, 3.8vw, 46px);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.18;
    letter-spacing: -0.8px;
    margin-bottom: 16px;
}

.ref-hero-yellow-accent {
    color: #FFDD00;
}

.ref-hero-desc {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 600px;
}

/* Dual Buttons Row */
.ref-hero-buttons-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.btn-ref-hero-red {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #E11D48;
    color: #FFFFFF;
    font-size: 13.5px;
    font-weight: 800;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(225, 29, 72, 0.45);
}

.btn-ref-hero-red:hover {
    background: #BE123C;
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(225, 29, 72, 0.6);
}

.btn-ref-hero-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    color: #FFFFFF;
    font-size: 13.5px;
    font-weight: 800;
    padding: 14px 28px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-ref-hero-whatsapp:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
    border-color: #FFFFFF;
    transform: translateY(-2px);
}

.btn-ref-hero-whatsapp i {
    font-size: 17px;
    color: #25D366;
}

/* Mini Trust Row */
.ref-hero-mini-trust {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.mini-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.88);
}

/* Right Video Showcase Box */
.ref-hero-video-box {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 4/3;
    border: 2px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
    background: #0F172A;
}

.ref-hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ref-hero-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.2) 0%, transparent 50%, rgba(15, 23, 42, 0.5) 100%);
    pointer-events: none;
}

.ref-hero-trusted-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    padding: 8px 18px;
    color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.trusted-badge-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

.trusted-badge-inner i {
    font-size: 20px;
    color: #FFDD00;
}

.trusted-badge-inner .badge-title {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    line-height: 1.1;
}

.trusted-badge-inner .badge-sub {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    color: #FFDD00;
    letter-spacing: 0.5px;
}

.ref-hero-video-bottom-badge {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 2;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    padding: 6px 14px;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.4px;
}

.live-dot-red {
    width: 8px;
    height: 8px;
    background: #E11D48;
    border-radius: 50%;
    animation: pulseDotRed 1.5s infinite;
}

@keyframes pulseDotRed {
    0% {
        transform: scale(0.95);
        opacity: 1;
    }

    50% {
        transform: scale(1.3);
        opacity: 0.5;
    }

    100% {
        transform: scale(0.95);
        opacity: 1;
    }
}

@media (max-width: 991px) {
    .hero-blue-banner-card {
        padding: 36px 24px;
        border-radius: 24px;
    }

    .ref-hero-video-box {
        aspect-ratio: 16/9;
        margin-top: 10px;
    }
}

/* ==========================================================================
   Blog Detail Meta, Tags, Author & Social Share Bar
   ========================================================================== */
.blog-detail-meta-box {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 16px 22px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.blog-detail-meta-left {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.blog-meta-author-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: #0F172A;
}

.blog-meta-author-pill .author-avatar-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0284c7;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.blog-meta-stat-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #64748B;
}

.blog-share-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.blog-share-label {
    font-size: 12.5px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blog-share-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.25s ease;
    border: none;
}

.blog-share-btn.share-whatsapp {
    background: #25D366;
    color: #FFFFFF;
}

.blog-share-btn.share-facebook {
    background: #1877F2;
    color: #FFFFFF;
}

.blog-share-btn.share-twitter {
    background: #0F172A;
    color: #FFFFFF;
}

.blog-share-btn.share-linkedin {
    background: #0A66C2;
    color: #FFFFFF;
}

.blog-share-btn.share-copy {
    background: #E2E8F0;
    color: #334155;
}

.blog-share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    color: #FFFFFF;
}

.blog-tags-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.blog-article-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: #EFF6FF;
    color: #0284C7;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.blog-bottom-author-card {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    border: 1px solid #BAE6FD;
    border-radius: 18px;
    padding: 24px;
    margin-top: 36px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.blog-bottom-author-img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #0284C7;
    flex-shrink: 0;
}

.blog-bottom-author-info {
    flex: 1;
    min-width: 240px;
}

.blog-bottom-author-name {
    font-size: 16px;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 2px;
}

.blog-bottom-author-role {
    font-size: 12.5px;
    font-weight: 700;
    color: #0284C7;
    margin-bottom: 6px;
}

.blog-bottom-author-bio {
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
    margin-bottom: 0;
}

/* ==========================================================================
   COMPLETED PROJECTS & CASE STUDIES (CARD VIEW, PAGINATION & DETAIL STYLES)
   ========================================================================== */

/* --- Card View on Projects Page --- */
.projects-grid-page-section {
    background-color: #f8fafc;
}

.text-accent-blue-highlight {
    color: var(--brand-blue) !important;
}

.project-filter-btn {
    border: 1.5px solid #cbd5e1;
    color: #475569;
    background: #ffffff;
    font-size: 0.88rem;
    transition: all 0.25s ease;
    text-decoration: none;
}

.project-filter-btn:hover,
.project-filter-btn.active {
    background-color: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}

.project-grid-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.project-grid-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 35px -8px rgba(15, 23, 42, 0.12) !important;
    border-color: var(--brand-blue) !important;
}

.card-project-img {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-grid-card:hover .card-project-img {
    transform: scale(1.06);
}

.badge-brand-blue {
    background-color: var(--brand-blue) !important;
    color: #ffffff !important;
}

.project-card-mask {
    inset: 0;
    background: rgba(2, 132, 199, 0.75);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 3;
}

.project-grid-card:hover .project-card-mask {
    opacity: 1;
}

.btn-view-case-study {
    background: #ffffff !important;
    color: var(--brand-blue) !important;
    border: none;
    transition: all 0.25s ease;
}

.btn-view-case-study:hover {
    background: #f8fafc !important;
    color: var(--brand-blue-hover) !important;
    transform: scale(1.04);
}

.project-title-hover:hover {
    color: var(--brand-blue) !important;
}

.text-brand-blue {
    color: var(--brand-blue) !important;
}

.btn-circle-action {
    width: 38px;
    height: 38px;
    border: 1.5px solid var(--brand-blue) !important;
    color: var(--brand-blue) !important;
    background: transparent;
    transition: all 0.25s ease;
}

.project-grid-card:hover .btn-circle-action,
.btn-circle-action:hover {
    background-color: var(--brand-blue) !important;
    color: #ffffff !important;
    transform: translateX(2px);
}

/* --- Pagination Styling using var(--brand-blue) --- */
.pagination-custom .page-link {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    border: 1.5px solid #e2e8f0;
    color: #334155;
    font-weight: 700;
    font-size: 0.95rem;
    background: #ffffff;
    transition: all 0.25s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    text-decoration: none;
}

.pagination-custom .page-link:hover {
    border-color: var(--brand-blue) !important;
    color: var(--brand-blue) !important;
    background-color: rgba(2, 132, 199, 0.08) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(2, 132, 199, 0.15);
}

.pagination-custom .page-item.active .page-link {
    background-color: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4) !important;
    transform: scale(1.05);
}

.pagination-custom .page-item.disabled .page-link {
    opacity: 0.4;
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #94a3b8 !important;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* --- Project Detail & Gallery Page Styling --- */
.project-gallery-card:hover .project-thumb-overlay {
    opacity: 1 !important;
}

.project-gallery-card:hover .gallery-thumb-img {
    transform: scale(1.06);
}

.gallery-thumb-img {
    transition: transform 0.35s ease;
}

.cursor-pointer {
    cursor: pointer;
}

.hover-bg-light:hover {
    background-color: #f8fafc !important;
    border-color: var(--brand-blue) !important;
}

.transition-all {
    transition: all 0.2s ease;
}

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