:root {
    --bg-dark: #050608;
    --bg-darker: #020305;
    --surface-dark: #080a10;
    --card-dark: #0b0e17;
    --electric-blue: #126bff;
    --cyan-glow: #38bdf8;
    --text-light: #ffffff;
    --text-muted: #94a3b8;
    --text-sub: #cbd5e1;
    --border-dark: rgba(255, 255, 255, 0.09);
    --font-head: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'Space Grotesk', monospace;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-dark);
    color: var(--text-light);
    overflow-x: hidden;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-head);
    font-weight: 700;
    letter-spacing: -0.025em;
}

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

/* NAVBAR STYLES */
.main-navbar-sticky {
    background: rgba(5, 6, 8, 0.88) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-dark);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 14px 0;
    transition: all 0.3s ease;
}

.navbar-content-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 24px;
}

.nav-links-center {
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav-link-item {
    color: #cbd5e1 !important;
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.25s ease;
    position: relative;
}

.nav-link-item:hover,
.nav-link-item.active {
    color: #38bdf8 !important;
}

.nav-link-item.active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #38bdf8;
    box-shadow: 0 0 10px #38bdf8;
    border-radius: 2px;
}

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

.nav-item-wrap:hover .dropdown-floating-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-floating-panel {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: #090d16;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 12px;
    min-width: 290px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    z-index: 1010;
}

.dropdown-floating-panel::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
}

/* Services Mega-Dropdown (Matching Screenshot 1) */
.dropdown-services-panel {
    width: 980px !important;
    max-width: 95vw;
    display: flex !important;
    flex-direction: column;
    gap: 16px;
    padding: 24px 28px 18px !important;
    border-radius: 20px !important;
    background: rgba(8, 14, 26, 0.98) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    border: 1px solid rgba(0, 102, 255, 0.3) !important;
    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.85), 0 0 35px rgba(0, 102, 255, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
    left: 50% !important;
    transform: translateX(-40%) translateY(12px) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nav-item-wrap:hover .dropdown-services-panel {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-40%) translateY(0) !important;
}

/* ==========================================================================
           HORIZONTAL AI SERVICES DROPDOWN (PREMIUM GLASS DOCK)
           ========================================================================== */
.dropdown-ai-horizontal-panel {
    top: calc(100% + 14px) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(12px) !important;
    width: max-content !important;
    min-width: 820px !important;
    max-width: 95vw !important;
    background: rgba(6, 11, 24, 0.96) !important;
    backdrop-filter: blur(28px) !important;
    -webkit-backdrop-filter: blur(28px) !important;
    border: 1px solid rgba(56, 189, 248, 0.28) !important;
    border-radius: 20px !important;
    padding: 16px 20px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 40px rgba(0, 102, 255, 0.25) !important;
    z-index: 1050 !important;
}

.dropdown-ai-horizontal-panel::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 22px;
}

.nav-item-wrap:hover .dropdown-ai-horizontal-panel {
    transform: translateX(-50%) translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.ai-dropdown-horizontal-grid {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.ai-nav-card {
    flex: 1 1 0 !important;
    min-width: 125px !important;
    max-width: 155px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 14px 14px 16px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ai-nav-card:hover {
    background: rgba(0, 102, 255, 0.16) !important;
    border-color: rgba(56, 189, 248, 0.45) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 102, 255, 0.25) !important;
}

.ai-nav-card-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 17px !important;
    transition: all 0.25s ease !important;
}

.ai-nav-card:hover .ai-nav-card-icon {
    transform: scale(1.1) !important;
}

.ai-nav-card-title {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
}

.ai-nav-card-desc {
    color: #94a3b8 !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

.ai-nav-card:hover .ai-nav-card-title {
    color: #38bdf8 !important;
}

@media (max-width: 1024px) {
    .dropdown-ai-horizontal-panel {
        min-width: 90vw !important;
    }

    .ai-dropdown-horizontal-grid {
        flex-wrap: wrap !important;
    }

    .ai-nav-card {
        flex: 1 1 calc(33.333% - 10px) !important;
        max-width: none !important;
    }
}

.services-mega-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
}

.services-mega-col {
    display: flex;
    flex-direction: column;
}

.services-col-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #94a3b8;
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-transform: uppercase;
}

.services-col-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #38bdf8;
    font-size: 13px;
}

.services-col-links {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.services-item-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: #e2e8f0;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.services-item-link:hover {
    background: rgba(0, 102, 255, 0.14);
    color: #38bdf8;
    padding-left: 14px;
}

.services-item-link.highlight-staffing {
    background: rgba(0, 102, 255, 0.08);
    border: 1px solid rgba(0, 102, 255, 0.25);
    font-weight: 600;
}

.services-item-link.highlight-staffing:hover {
    background: rgba(0, 102, 255, 0.22);
    border-color: #38bdf8;
}

.item-badge-plus {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    transition: color 0.2s ease, transform 0.2s ease;
}

.services-item-link:hover .item-badge-plus {
    color: #38bdf8;
    transform: translateX(2px);
}

/* ==========================================================================
           SERVICES MEGA MENU FLYOUT SUB-DROPDOWNS (MATCHING REFERENCE SCREENSHOT)
           ========================================================================== */
.services-flyout-wrapper {
    position: relative;
    width: 100%;
}

.services-flyout-trigger {
    cursor: pointer;
    user-select: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease;
}

/* Active highlight state matching user's screenshot */
.services-flyout-wrapper.open>.services-flyout-trigger,
.services-flyout-wrapper:hover>.services-flyout-trigger {
    background: #e8f0fe !important;
    color: #1a73e8 !important;
    border-radius: 8px;
    padding-left: 14px;
}

.services-flyout-wrapper.open>.services-flyout-trigger .item-badge-plus,
.services-flyout-wrapper:hover>.services-flyout-trigger .item-badge-plus {
    color: #1a73e8 !important;
    font-weight: 700;
    font-size: 16px;
    transform: none !important;
}

/* Floating flyout card matching user's screenshot */
.services-flyout-card {
    position: absolute;
    left: calc(100% + 4px);
    top: -6px;
    min-width: 215px;
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 10px 18px !important;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    z-index: 150 !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s ease;
    pointer-events: none;
}

/* Open on hover or when toggled via click */
.services-flyout-wrapper.open>.services-flyout-card,
.services-flyout-wrapper:hover>.services-flyout-card {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

.services-flyout-link {
    display: block;
    padding: 7px 0;
    color: #0f172a !important;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.15s ease;
    line-height: 1.4;
}

.services-flyout-link:hover {
    color: #1a73e8 !important;
    padding-left: 4px;
}

.services-flyout-divider {
    border-top: 1px dashed #cbd5e1 !important;
    margin: 4px 0 !important;
    width: 100%;
}

@media (max-width: 991px) {
    .services-flyout-card {
        position: static !important;
        left: auto !important;
        top: auto !important;
        margin: 8px 0 8px 12px !important;
        transform: none !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
    }
}

.services-bottom-cta-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 18px;
    background: linear-gradient(135deg, rgba(254, 243, 199, 0.08) 0%, rgba(254, 249, 195, 0.03) 100%);
    border: 1px solid rgba(253, 230, 138, 0.2);
    border-radius: 12px;
    margin-top: 6px;
}

.services-bottom-cta-text {
    color: #f1f5f9;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    line-height: 1.4;
}

.services-bottom-cta-btn {
    background: #1a62ff;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(26, 98, 255, 0.4);
    flex-shrink: 0;
}

.services-bottom-cta-btn:hover {
    background: #0052e0;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(26, 98, 255, 0.6);
    color: #ffffff !important;
}

@media (max-width: 1200px) {
    .dropdown-services-panel {
        width: 820px !important;
        transform: translateX(-50%) translateY(12px) !important;
    }

    .nav-item-wrap:hover .dropdown-services-panel {
        transform: translateX(-50%) translateY(0) !important;
    }

    .services-mega-columns {
        gap: 16px;
    }
}

.mega-menu-item {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    color: #ffffff;
    text-decoration: none;
    transition: background 0.2s ease;
}

.mega-menu-item:hover {
    background: rgba(18, 107, 255, 0.15);
}

.mega-menu-item strong {
    display: block;
    font-size: 13.5px;
    color: #ffffff;
    font-family: var(--font-head);
    margin-bottom: 2px;
}

.mega-menu-item span {
    font-size: 11.5px;
    color: #94a3b8;
    display: block;
    line-height: 1.4;
}

.nav-cta-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-nav-ai {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    height: 40px;
    border-radius: 999px;
    background: linear-gradient(135deg, #1ea7fd 0%, #0d6efd 50%, #004fe8 100%);
    color: #ffffff !important;
    text-decoration: none;
    font-family: var(--font-head);
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0.6px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 20px rgba(13, 110, 253, 0.65), inset 0 1.5px 2px rgba(255, 255, 255, 0.8);
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: aiPillPulseGlow 3s infinite ease-in-out;
}

@keyframes aiPillPulseGlow {

    0%,
    100% {
        box-shadow: 0 0 16px rgba(13, 110, 253, 0.6), inset 0 1.5px 2px rgba(255, 255, 255, 0.8);
    }

    50% {
        box-shadow: 0 0 28px rgba(0, 210, 255, 0.9), 0 0 48px rgba(13, 110, 253, 0.5), inset 0 2px 4px #ffffff;
    }
}

.ai-sparkles-wrap {
    position: relative;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ai-star-main {
    width: 13px;
    height: 13px;
    fill: #ffffff;
    animation: aiStarTwinkle 2s infinite ease-in-out;
}

.ai-star-sub {
    position: absolute;
    width: 8px;
    height: 8px;
    top: 0px;
    right: 0px;
    fill: #ffffff;
    animation: aiStarTwinkle 2s infinite ease-in-out 0.5s;
}

@keyframes aiStarTwinkle {

    0%,
    100% {
        transform: scale(0.85);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.25) rotate(90deg);
        opacity: 1;
    }
}

.btn-appinv-contact {
    padding: 9px 22px;
    height: 40px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff !important;
    font-family: var(--font-head);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
}

.btn-appinv-contact:hover {
    background: #ffffff;
    color: #000000 !important;
    transform: translateY(-2px);
}

/* -------------------------------------------------------------
           HERO SECTION: MATCHES EXACT USER REFERENCE COMPOSITION
           ------------------------------------------------------------- */
.reference-hero-section {
    position: relative;
    background: #000000;
    padding: 70px 0 25px 0;
    overflow: hidden;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero-ref-header-block {
    max-width: 820px;
    margin: 0 auto 8px;
    position: relative;
    z-index: 10;
}

.hero-ref-headline {
    font-family: var(--font-head);
    font-size: clamp(2.1rem, 3.6vw, 3.2rem);
    font-weight: 400;
    color: #ffffff;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
    text-align: center !important;
}

.hero-ref-subtext {
    font-family: var(--font-mono);
    font-size: 13px;
    color: #8a8f98;
    line-height: 1.65;
    letter-spacing: 0.6px;
    margin: 0 auto 22px;
    text-align: center !important;
    max-width: 580px;
}

.hero-ref-btn-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 0px;
    position: relative;
    z-index: 10;
}

.hero-ref-action-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 24px;
    border-radius: 999px;
    background: #ffffff;
    color: #000000 !important;
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-ref-action-pill:hover {
    background: #f8fafc;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.35);
}

.hero-ref-action-pill .arrow-symbol {
    font-size: 15px;
    transition: transform 0.25s ease;
}

.hero-ref-action-pill:hover .arrow-symbol {
    transform: translateX(4px);
}

/* Centered Visual Stage with Hands & Clover - Shifted up towards text */
.hero-ref-visual-stage {
    position: relative;
    width: 100%;
    max-width: 980px;
    margin: -110px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
}

.hero-ref-video-frame {
    position: relative;
    width: 100%;
    max-width: 960px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000000;
}

.hero-ref-center-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
}

.hero-ref-video-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, transparent 48%, rgba(0, 0, 0, 0.65) 75%, #000000 98%),
        linear-gradient(180deg, #000000 0%, transparent 12%, transparent 88%, #000000 100%),
        linear-gradient(90deg, #000000 0%, transparent 10%, transparent 90%, #000000 100%);
}

/* 5 Bottom Tech Icons (Underneath the Clover) */
.hero-ref-tech-dock {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    margin-top: 10px;
    padding: 6px 20px;
}

.ref-dock-icon {
    color: rgba(255, 255, 255, 0.28);
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    cursor: pointer;
}

.ref-dock-icon:hover {
    color: #ffffff;
    transform: scale(1.2);
}

/* PORTFOLIO CLIENT PROJECTS LOGO TICKER */
.portfolio-awards-strip {
    background: #000000;
    padding: 26px 0 32px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

.hero-awards-horizontal-wrapper {
    position: relative;
    flex: 1;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 1) 4%, rgba(0, 0, 0, 1) 96%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 1) 4%, rgba(0, 0, 0, 1) 96%, transparent 100%);
}

.hero-awards-horizontal-track {
    display: flex;
    align-items: center;
    gap: 20px;
    width: max-content;
    animation: projectsHorizontalScroll 36s linear infinite;
    will-change: transform;
}

.hero-awards-horizontal-track:hover {
    animation-play-state: paused;
}

.hero-award-h-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 12px 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 64px;
    min-width: 155px;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(12px);
}

.hero-award-h-card img {
    max-height: 42px;
    max-width: 155px;
    width: auto;
    object-fit: contain;
    opacity: 0.95;
    transition: all 0.25s ease;
}

.hero-award-h-card img.project-icon-rounded {
    border-radius: 8px;
    max-height: 40px;
    width: auto;
}

.project-card-text {
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    letter-spacing: 0.2px;
}

.hero-award-h-card:hover {
    border-color: rgba(56, 189, 248, 0.55);
    background: rgba(18, 107, 255, 0.12);
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.25);
}

.hero-award-h-card:hover img {
    opacity: 1;
    transform: scale(1.06);
}

.hero-award-h-card:hover .project-card-text {
    color: #38bdf8;
}

@keyframes projectsHorizontalScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@media (max-width: 991px) {
    .reference-hero-section {
        padding: 55px 0 20px 0;
    }

    .hero-ref-visual-stage {
        margin: -60px auto 0;
    }

    .hero-ref-video-frame {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 576px) {
    .hero-ref-visual-stage {
        margin: -35px auto 0;
    }
}

/* -------------------------------------------------------------
           PORTFOLIO SECTION & 2-IN-A-ROW RECTANGULAR STAGES
           ------------------------------------------------------------- */
.portfolio-main-section {
    background: #04060a;
    padding: 110px 0 130px;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.portfolio-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 55px;
}

.portfolio-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(18, 107, 255, 0.12);
    border: 1px solid rgba(45, 140, 255, 0.35);
    color: #38bdf8;
    font-family: var(--font-head);
    font-size: 11.5px;
    font-weight: 700;
    padding: 6px 18px;
    border-radius: 999px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.portfolio-title {
    font-size: clamp(2.3rem, 4vw, 3.4rem);
    color: #ffffff;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 18px;
}

.portfolio-title em {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    background: linear-gradient(135deg, #ffffff 20%, #93c5fd 60%, #38bdf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.portfolio-subtitle {
    font-size: 1.05rem;
    color: #cbd5e1;
    line-height: 1.65;
    margin: 0 auto;
}

/* Filter Pills */
.portfolio-filter-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 60px;
}

.port-filter-btn {
    padding: 8px 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    font-family: var(--font-head);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.port-filter-btn:hover,
.port-filter-btn.active {
    background: #126bff;
    border-color: #126bff;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(18, 107, 255, 0.45);
}

/* 2 IN ONE ROW GRID */
.portfolio-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
}

/* THE COLOR-MATCHED OUTER RECTANGLE STAGE */
.stage-rectangle {
    border-radius: 28px;
    padding: 38px 34px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
    min-height: 680px;
}

.stage-rectangle:hover {
    transform: translateY(-8px);
}

/* Stage Header Meta */
.stage-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
}

.stage-sector-num {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 1.2px;
    font-weight: 700;
    text-transform: uppercase;
}

.stage-live-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 14px;
    border-radius: 999px;
    font-family: var(--font-head);
    font-size: 11.5px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    transition: all 0.3s ease;
}

.stage-rectangle .stage-live-tag.text-white {
    color: inherit !important;
}

.live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    background-color: currentColor;
    box-shadow: 0 0 8px currentColor;
    flex-shrink: 0;
    animation: pulseDot 2s infinite ease-in-out;
}

@keyframes pulseDot {

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

    50% {
        opacity: 0.55;
        transform: scale(0.85);
    }
}

.stage-card-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto 0;
    padding: 10px 0;
    border-radius: 16px;
}

/* Images for client cards - smooth rounded corners */
.stage-card-asset-img {
    width: 100%;
    max-width: 480px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 14px !important;
    -webkit-border-radius: 14px !important;
    clip-path: inset(0 round 14px) !important;
    -webkit-clip-path: inset(0 round 14px) !important;
    overflow: hidden !important;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.6);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.stage-rectangle:hover .stage-card-asset-img {
    transform: scale(1.02);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.75);
}

/* Stage Bottom Meta */
.stage-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 24px;
    position: relative;
    z-index: 2;
}

.stage-pills-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.stage-sub-pill {
    font-family: var(--font-body);
    font-size: 11.5px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    transition: all 0.25s ease;
}

.stage-action-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.25s ease;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.stage-rectangle:hover .stage-action-btn {
    transform: scale(1.1) rotate(45deg);
}

/* -------------------------------------------------------------
           THEME COLORS PER PROJECT (PRECISELY MATCHED TO CARD PICTURES)
           ------------------------------------------------------------- */

/* 01. ANIMALWIZ - VIBRANT PET GREEN & SPRING EMERALD (Pet Dog/Cat & Garden Green) */
.stage-theme-animalwiz {
    background:
        radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.28) 0%, rgba(5, 150, 105, 0.12) 42%, rgba(5, 20, 14, 0.96) 100%),
        #05140e !important;
    border-color: rgba(16, 185, 129, 0.45) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7), 0 0 28px rgba(16, 185, 129, 0.18), inset 0 1px 0 rgba(110, 231, 183, 0.35) !important;
}

.stage-theme-animalwiz:hover {
    border-color: rgba(52, 211, 153, 0.95) !important;
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.8), 0 0 42px rgba(16, 185, 129, 0.38), inset 0 1px 0 rgba(110, 231, 183, 0.6) !important;
}

.stage-theme-animalwiz .stage-sector-num {
    color: #34d399 !important;
    text-shadow: 0 0 12px rgba(52, 211, 153, 0.5);
}

.stage-theme-animalwiz .stage-live-tag {
    background: rgba(16, 185, 129, 0.16) !important;
    border-color: rgba(16, 185, 129, 0.45) !important;
    color: #a7f3d0 !important;
}

.stage-theme-animalwiz .live-dot {
    background-color: #34d399 !important;
    box-shadow: 0 0 10px #34d399 !important;
}

.stage-theme-animalwiz .stage-action-btn {
    background: #10b981 !important;
    border-color: #34d399 !important;
    color: #ffffff !important;
    box-shadow: 0 0 24px rgba(16, 185, 129, 0.75) !important;
}

.stage-theme-animalwiz .stage-sub-pill {
    background: rgba(16, 185, 129, 0.08) !important;
    border-color: rgba(16, 185, 129, 0.28) !important;
    color: #d1fae5 !important;
}

/* 02. BBB LONDON - LUXURY BLUSH ROSE & SAND TERRACOTTA (Beauty Model & Serum Bottle) */
.stage-theme-bbb {
    background:
        radial-gradient(circle at 50% 0%, rgba(244, 114, 182, 0.28) 0%, rgba(219, 39, 119, 0.12) 42%, rgba(22, 6, 16, 0.96) 100%),
        #160610 !important;
    border-color: rgba(244, 114, 182, 0.45) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7), 0 0 28px rgba(236, 72, 153, 0.18), inset 0 1px 0 rgba(249, 168, 212, 0.35) !important;
}

.stage-theme-bbb:hover {
    border-color: rgba(244, 114, 182, 0.95) !important;
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.8), 0 0 42px rgba(236, 72, 153, 0.38), inset 0 1px 0 rgba(249, 168, 212, 0.6) !important;
}

.stage-theme-bbb .stage-sector-num {
    color: #f472b6 !important;
    text-shadow: 0 0 12px rgba(244, 114, 182, 0.5);
}

.stage-theme-bbb .stage-live-tag {
    background: rgba(244, 114, 182, 0.16) !important;
    border-color: rgba(244, 114, 182, 0.45) !important;
    color: #fbcfe8 !important;
}

.stage-theme-bbb .live-dot {
    background-color: #ec4899 !important;
    box-shadow: 0 0 10px #ec4899 !important;
}

.stage-theme-bbb .stage-action-btn {
    background: #ec4899 !important;
    border-color: #f472b6 !important;
    color: #ffffff !important;
    box-shadow: 0 0 24px rgba(236, 72, 153, 0.75) !important;
}

.stage-theme-bbb .stage-sub-pill {
    background: rgba(244, 114, 182, 0.08) !important;
    border-color: rgba(244, 114, 182, 0.28) !important;
    color: #fce7f3 !important;
}

/* 03. DEVICELAND - APPLE STORE RADIANT SUNSET ORANGE (Orange Storefront & Gold iPhone) */
.stage-theme-deviceland {
    background:
        radial-gradient(circle at 50% 0%, rgba(249, 115, 22, 0.32) 0%, rgba(194, 65, 12, 0.14) 42%, rgba(23, 8, 2, 0.96) 100%),
        #170701 !important;
    border-color: rgba(249, 115, 22, 0.48) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7), 0 0 28px rgba(249, 115, 22, 0.22), inset 0 1px 0 rgba(253, 186, 116, 0.35) !important;
}

.stage-theme-deviceland:hover {
    border-color: rgba(251, 146, 60, 0.95) !important;
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.8), 0 0 42px rgba(249, 115, 22, 0.42), inset 0 1px 0 rgba(253, 186, 116, 0.6) !important;
}

.stage-theme-deviceland .stage-sector-num {
    color: #fb923c !important;
    text-shadow: 0 0 12px rgba(251, 146, 60, 0.5);
}

.stage-theme-deviceland .stage-live-tag {
    background: rgba(249, 115, 22, 0.16) !important;
    border-color: rgba(249, 115, 22, 0.45) !important;
    color: #fed7aa !important;
}

.stage-theme-deviceland .live-dot {
    background-color: #f97316 !important;
    box-shadow: 0 0 10px #f97316 !important;
}

.stage-theme-deviceland .stage-action-btn {
    background: #f97316 !important;
    border-color: #fb923c !important;
    color: #ffffff !important;
    box-shadow: 0 0 24px rgba(249, 115, 22, 0.75) !important;
}

.stage-theme-deviceland .stage-sub-pill {
    background: rgba(249, 115, 22, 0.08) !important;
    border-color: rgba(249, 115, 22, 0.28) !important;
    color: #ffedd5 !important;
}

/* 04. ELAN JEWEL - ROYAL CHAMPAGNE GOLD & DIAMOND AMBER (Gold Solitaire & Silk) */
.stage-theme-elan {
    background:
        radial-gradient(circle at 50% 0%, rgba(234, 179, 8, 0.30) 0%, rgba(161, 98, 7, 0.14) 42%, rgba(22, 16, 2, 0.96) 100%),
        #161002 !important;
    border-color: rgba(234, 179, 8, 0.48) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7), 0 0 28px rgba(234, 179, 8, 0.20), inset 0 1px 0 rgba(253, 224, 71, 0.35) !important;
}

.stage-theme-elan:hover {
    border-color: rgba(250, 204, 21, 0.95) !important;
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.8), 0 0 42px rgba(234, 179, 8, 0.42), inset 0 1px 0 rgba(253, 224, 71, 0.6) !important;
}

.stage-theme-elan .stage-sector-num {
    color: #facc15 !important;
    text-shadow: 0 0 12px rgba(250, 204, 21, 0.5);
}

.stage-theme-elan .stage-live-tag {
    background: rgba(234, 179, 8, 0.16) !important;
    border-color: rgba(234, 179, 8, 0.45) !important;
    color: #fef08a !important;
}

.stage-theme-elan .live-dot {
    background-color: #eab308 !important;
    box-shadow: 0 0 10px #eab308 !important;
}

.stage-theme-elan .stage-action-btn {
    background: #eab308 !important;
    border-color: #facc15 !important;
    color: #ffffff !important;
    box-shadow: 0 0 24px rgba(234, 179, 8, 0.75) !important;
}

.stage-theme-elan .stage-sub-pill {
    background: rgba(234, 179, 8, 0.08) !important;
    border-color: rgba(234, 179, 8, 0.28) !important;
    color: #fef9c3 !important;
}

/* 05. EZY / EAZYCOOL - ALPINE ICE CYAN & AUTOMOTIVE TEAL (Snowy Pine & Solar Film) */
.stage-theme-ezy {
    background:
        radial-gradient(circle at 50% 0%, rgba(6, 182, 212, 0.30) 0%, rgba(8, 145, 178, 0.14) 42%, rgba(2, 20, 26, 0.96) 100%),
        #02141a !important;
    border-color: rgba(6, 182, 212, 0.48) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7), 0 0 28px rgba(6, 182, 212, 0.20), inset 0 1px 0 rgba(103, 232, 249, 0.35) !important;
}

.stage-theme-ezy:hover {
    border-color: rgba(34, 211, 238, 0.95) !important;
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.8), 0 0 42px rgba(6, 182, 212, 0.42), inset 0 1px 0 rgba(103, 232, 249, 0.6) !important;
}

.stage-theme-ezy .stage-sector-num {
    color: #22d3ee !important;
    text-shadow: 0 0 12px rgba(34, 211, 238, 0.5);
}

.stage-theme-ezy .stage-live-tag {
    background: rgba(6, 182, 212, 0.16) !important;
    border-color: rgba(6, 182, 212, 0.45) !important;
    color: #a5f3fc !important;
}

.stage-theme-ezy .live-dot {
    background-color: #06b6d4 !important;
    box-shadow: 0 0 10px #06b6d4 !important;
}

.stage-theme-ezy .stage-action-btn {
    background: #0891b2 !important;
    border-color: #22d3ee !important;
    color: #ffffff !important;
    box-shadow: 0 0 24px rgba(6, 182, 212, 0.75) !important;
}

.stage-theme-ezy .stage-sub-pill {
    background: rgba(6, 182, 212, 0.08) !important;
    border-color: rgba(6, 182, 212, 0.28) !important;
    color: #cffafe !important;
}

/* 06. HDFC SKY - CORPORATE FINANCIAL SAPPHIRE & ELECTRIC BLUE (HDFC Blue & Metrics) */
.stage-theme-hdfc {
    background:
        radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.32) 0%, rgba(29, 78, 216, 0.15) 42%, rgba(4, 14, 36, 0.96) 100%),
        #040e24 !important;
    border-color: rgba(37, 99, 235, 0.5) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7), 0 0 28px rgba(37, 99, 235, 0.22), inset 0 1px 0 rgba(147, 197, 253, 0.35) !important;
}

.stage-theme-hdfc:hover {
    border-color: rgba(96, 165, 250, 0.95) !important;
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.8), 0 0 42px rgba(37, 99, 235, 0.42), inset 0 1px 0 rgba(147, 197, 253, 0.6) !important;
}

.stage-theme-hdfc .stage-sector-num {
    color: #60a5fa !important;
    text-shadow: 0 0 12px rgba(96, 165, 250, 0.5);
}

.stage-theme-hdfc .stage-live-tag {
    background: rgba(37, 99, 235, 0.16) !important;
    border-color: rgba(37, 99, 235, 0.45) !important;
    color: #bfdbfe !important;
}

.stage-theme-hdfc .live-dot {
    background-color: #2563eb !important;
    box-shadow: 0 0 10px #2563eb !important;
}

.stage-theme-hdfc .stage-action-btn {
    background: #2563eb !important;
    border-color: #60a5fa !important;
    color: #ffffff !important;
    box-shadow: 0 0 24px rgba(37, 99, 235, 0.75) !important;
}

.stage-theme-hdfc .stage-sub-pill {
    background: rgba(37, 99, 235, 0.08) !important;
    border-color: rgba(37, 99, 235, 0.28) !important;
    color: #dbeafe !important;
}

/* 07. LELAMALL - BOLD CRIMSON RUBY & MARKETPLACE RED (Red Shopping Marketplace) */
.stage-theme-lelamall {
    background:
        radial-gradient(circle at 50% 0%, rgba(225, 29, 72, 0.32) 0%, rgba(159, 18, 57, 0.14) 42%, rgba(23, 3, 8, 0.96) 100%),
        #170308 !important;
    border-color: rgba(225, 29, 72, 0.48) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7), 0 0 28px rgba(225, 29, 72, 0.20), inset 0 1px 0 rgba(253, 164, 175, 0.35) !important;
}

.stage-theme-lelamall:hover {
    border-color: rgba(251, 113, 133, 0.95) !important;
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.8), 0 0 42px rgba(225, 29, 72, 0.42), inset 0 1px 0 rgba(253, 164, 175, 0.6) !important;
}

.stage-theme-lelamall .stage-sector-num {
    color: #fb7185 !important;
    text-shadow: 0 0 12px rgba(251, 113, 133, 0.5);
}

.stage-theme-lelamall .stage-live-tag {
    background: rgba(225, 29, 72, 0.16) !important;
    border-color: rgba(225, 29, 72, 0.45) !important;
    color: #fecdd3 !important;
}

.stage-theme-lelamall .live-dot {
    background-color: #e11d48 !important;
    box-shadow: 0 0 10px #e11d48 !important;
}

.stage-theme-lelamall .stage-action-btn {
    background: #e11d48 !important;
    border-color: #fb7185 !important;
    color: #ffffff !important;
    box-shadow: 0 0 24px rgba(225, 29, 72, 0.75) !important;
}

.stage-theme-lelamall .stage-sub-pill {
    background: rgba(225, 29, 72, 0.08) !important;
    border-color: rgba(225, 29, 72, 0.28) !important;
    color: #ffe4e6 !important;
}

/* 08. QUEEN - SOFT PETAL FUCHSIA & ROSE PINK (Luxury Beauty Cosmetics) */
.stage-theme-queen {
    background:
        radial-gradient(circle at 50% 0%, rgba(219, 39, 119, 0.30) 0%, rgba(190, 24, 93, 0.14) 42%, rgba(22, 4, 16, 0.96) 100%),
        #160410 !important;
    border-color: rgba(219, 39, 119, 0.48) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7), 0 0 28px rgba(219, 39, 119, 0.20), inset 0 1px 0 rgba(244, 114, 182, 0.35) !important;
}

.stage-theme-queen:hover {
    border-color: rgba(244, 114, 182, 0.95) !important;
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.8), 0 0 42px rgba(219, 39, 119, 0.42), inset 0 1px 0 rgba(244, 114, 182, 0.6) !important;
}

.stage-theme-queen .stage-sector-num {
    color: #f472b6 !important;
    text-shadow: 0 0 12px rgba(244, 114, 182, 0.5);
}

.stage-theme-queen .stage-live-tag {
    background: rgba(219, 39, 119, 0.16) !important;
    border-color: rgba(219, 39, 119, 0.45) !important;
    color: #fbcfe8 !important;
}

.stage-theme-queen .live-dot {
    background-color: #db2777 !important;
    box-shadow: 0 0 10px #db2777 !important;
}

.stage-theme-queen .stage-action-btn {
    background: #db2777 !important;
    border-color: #f472b6 !important;
    color: #ffffff !important;
    box-shadow: 0 0 24px rgba(219, 39, 119, 0.75) !important;
}

.stage-theme-queen .stage-sub-pill {
    background: rgba(219, 39, 119, 0.08) !important;
    border-color: rgba(219, 39, 119, 0.28) !important;
    color: #fce7f3 !important;
}

/* 09. SUPERIOR DIGITAL - APPLE ENTERPRISE CRIMSON & TITANIUM RED (Apple Systems) */
.stage-theme-superior {
    background:
        radial-gradient(circle at 50% 0%, rgba(220, 38, 38, 0.32) 0%, rgba(153, 27, 27, 0.14) 42%, rgba(22, 3, 3, 0.96) 100%),
        #160303 !important;
    border-color: rgba(220, 38, 38, 0.48) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7), 0 0 28px rgba(220, 38, 38, 0.20), inset 0 1px 0 rgba(252, 165, 165, 0.35) !important;
}

.stage-theme-superior:hover {
    border-color: rgba(248, 113, 113, 0.95) !important;
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.8), 0 0 42px rgba(220, 38, 38, 0.42), inset 0 1px 0 rgba(252, 165, 165, 0.6) !important;
}

.stage-theme-superior .stage-sector-num {
    color: #f87171 !important;
    text-shadow: 0 0 12px rgba(248, 113, 113, 0.5);
}

.stage-theme-superior .stage-live-tag {
    background: rgba(220, 38, 38, 0.16) !important;
    border-color: rgba(220, 38, 38, 0.45) !important;
    color: #fecaca !important;
}

.stage-theme-superior .live-dot {
    background-color: #dc2626 !important;
    box-shadow: 0 0 10px #dc2626 !important;
}

.stage-theme-superior .stage-action-btn {
    background: #dc2626 !important;
    border-color: #f87171 !important;
    color: #ffffff !important;
    box-shadow: 0 0 24px rgba(220, 38, 38, 0.75) !important;
}

.stage-theme-superior .stage-sub-pill {
    background: rgba(220, 38, 38, 0.08) !important;
    border-color: rgba(220, 38, 38, 0.28) !important;
    color: #fee2e2 !important;
}

/* 10. DIET CLINIC - CORAL ROSE & HEALTH BERRY PINK (Clinical Nutrition) */
.stage-theme-dietclinic {
    background:
        radial-gradient(circle at 50% 0%, rgba(244, 63, 94, 0.32) 0%, rgba(190, 18, 60, 0.14) 42%, rgba(22, 3, 7, 0.96) 100%),
        #160307 !important;
    border-color: rgba(244, 63, 94, 0.48) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7), 0 0 28px rgba(244, 63, 94, 0.20), inset 0 1px 0 rgba(253, 164, 175, 0.35) !important;
}

.stage-theme-dietclinic:hover {
    border-color: rgba(251, 113, 133, 0.95) !important;
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.8), 0 0 42px rgba(244, 63, 94, 0.42), inset 0 1px 0 rgba(253, 164, 175, 0.6) !important;
}

.stage-theme-dietclinic .stage-sector-num {
    color: #fb7185 !important;
    text-shadow: 0 0 12px rgba(251, 113, 133, 0.5);
}

.stage-theme-dietclinic .stage-live-tag {
    background: rgba(244, 63, 94, 0.16) !important;
    border-color: rgba(244, 63, 94, 0.45) !important;
    color: #fecdd3 !important;
}

.stage-theme-dietclinic .live-dot {
    background-color: #f43f5e !important;
    box-shadow: 0 0 10px #f43f5e !important;
}

.stage-theme-dietclinic .stage-action-btn {
    background: #e11d48 !important;
    border-color: #fb7185 !important;
    color: #ffffff !important;
    box-shadow: 0 0 24px rgba(225, 29, 72, 0.75) !important;
}

.stage-theme-dietclinic .stage-sub-pill {
    background: rgba(244, 63, 94, 0.08) !important;
    border-color: rgba(244, 63, 94, 0.28) !important;
    color: #ffe4e6 !important;
}

/* 11. RTX - AEROSPACE TITANIUM NAVY & COCKPIT CYAN (Jet Turbine & Avionics) */
.stage-theme-rtx {
    background:
        radial-gradient(circle at 50% 0%, rgba(14, 165, 233, 0.32) 0%, rgba(3, 105, 161, 0.15) 42%, rgba(2, 17, 29, 0.96) 100%),
        #02111d !important;
    border-color: rgba(14, 165, 233, 0.5) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7), 0 0 28px rgba(14, 165, 233, 0.22), inset 0 1px 0 rgba(125, 211, 252, 0.35) !important;
}

.stage-theme-rtx:hover {
    border-color: rgba(56, 189, 248, 0.95) !important;
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.8), 0 0 42px rgba(14, 165, 233, 0.42), inset 0 1px 0 rgba(125, 211, 252, 0.6) !important;
}

.stage-theme-rtx .stage-sector-num {
    color: #38bdf8 !important;
    text-shadow: 0 0 12px rgba(56, 189, 248, 0.5);
}

.stage-theme-rtx .stage-live-tag {
    background: rgba(14, 165, 233, 0.16) !important;
    border-color: rgba(14, 165, 233, 0.45) !important;
    color: #bae6fd !important;
}

.stage-theme-rtx .live-dot {
    background-color: #0284c7 !important;
    box-shadow: 0 0 10px #0284c7 !important;
}

.stage-theme-rtx .stage-action-btn {
    background: #0284c7 !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    box-shadow: 0 0 24px rgba(2, 132, 199, 0.75) !important;
}

.stage-theme-rtx .stage-sub-pill {
    background: rgba(14, 165, 233, 0.08) !important;
    border-color: rgba(14, 165, 233, 0.28) !important;
    color: #e0f2fe !important;
}

/* 12. VOCIEAA - WARM CARAMEL AMBER & HONEY BRONZE (Herbal & Holistic Wellness) */
.stage-theme-vocieaa {
    background:
        radial-gradient(circle at 50% 0%, rgba(217, 119, 6, 0.32) 0%, rgba(180, 83, 9, 0.14) 42%, rgba(23, 11, 1, 0.96) 100%),
        #170b01 !important;
    border-color: rgba(217, 119, 6, 0.48) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7), 0 0 28px rgba(217, 119, 6, 0.20), inset 0 1px 0 rgba(253, 230, 138, 0.35) !important;
}

.stage-theme-vocieaa:hover {
    border-color: rgba(251, 191, 36, 0.95) !important;
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.8), 0 0 42px rgba(217, 119, 6, 0.42), inset 0 1px 0 rgba(253, 230, 138, 0.6) !important;
}

.stage-theme-vocieaa .stage-sector-num {
    color: #fbbf24 !important;
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
}

.stage-theme-vocieaa .stage-live-tag {
    background: rgba(217, 119, 6, 0.16) !important;
    border-color: rgba(217, 119, 6, 0.45) !important;
    color: #fde68a !important;
}

.stage-theme-vocieaa .live-dot {
    background-color: #d97706 !important;
    box-shadow: 0 0 10px #d97706 !important;
}

.stage-theme-vocieaa .stage-action-btn {
    background: #d97706 !important;
    border-color: #fbbf24 !important;
    color: #ffffff !important;
    box-shadow: 0 0 24px rgba(217, 119, 6, 0.75) !important;
}

.stage-theme-vocieaa .stage-sub-pill {
    background: rgba(217, 119, 6, 0.08) !important;
    border-color: rgba(217, 119, 6, 0.28) !important;
    color: #fef3c7 !important;
}

/* 13. INDIL - TURQUOISE TEAL / CYAN (On-Demand Mobile App) */
.stage-theme-indil {
    background:
        radial-gradient(circle at 50% 0%, rgba(6, 182, 212, 0.32) 0%, rgba(8, 145, 178, 0.14) 42%, rgba(3, 24, 34, 0.96) 100%),
        #031822 !important;
    border-color: rgba(6, 182, 212, 0.48) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7), 0 0 28px rgba(6, 182, 212, 0.20), inset 0 1px 0 rgba(103, 232, 249, 0.35) !important;
}

.stage-theme-indil:hover {
    border-color: rgba(34, 211, 238, 0.95) !important;
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.8), 0 0 42px rgba(6, 182, 212, 0.42) !important;
}

.stage-theme-indil .stage-sector-num {
    color: #22d3ee !important;
    text-shadow: 0 0 12px rgba(34, 211, 238, 0.5);
}

.stage-theme-indil .stage-live-tag {
    background: rgba(6, 182, 212, 0.16) !important;
    border-color: rgba(6, 182, 212, 0.45) !important;
    color: #a5f3fc !important;
}

.stage-theme-indil .live-dot {
    background-color: #06b6d4 !important;
    box-shadow: 0 0 10px #06b6d4 !important;
}

.stage-theme-indil .stage-action-btn {
    background: #06b6d4 !important;
    border-color: #22d3ee !important;
    color: #ffffff !important;
    box-shadow: 0 0 24px rgba(6, 182, 212, 0.75) !important;
}

.stage-theme-indil .stage-sub-pill {
    background: rgba(6, 182, 212, 0.08) !important;
    border-color: rgba(6, 182, 212, 0.28) !important;
    color: #cffafe !important;
}

/* 14. TNIE - CRIMSON / DEEP MAROON (News & Media Mobile App) */
.stage-theme-tnie {
    background:
        radial-gradient(circle at 50% 0%, rgba(239, 68, 68, 0.32) 0%, rgba(185, 28, 28, 0.14) 42%, rgba(24, 4, 4, 0.96) 100%),
        #180404 !important;
    border-color: rgba(239, 68, 68, 0.48) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7), 0 0 28px rgba(239, 68, 68, 0.20), inset 0 1px 0 rgba(252, 165, 165, 0.35) !important;
}

.stage-theme-tnie:hover {
    border-color: rgba(248, 113, 113, 0.95) !important;
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.8), 0 0 42px rgba(239, 68, 68, 0.42) !important;
}

.stage-theme-tnie .stage-sector-num {
    color: #f87171 !important;
    text-shadow: 0 0 12px rgba(248, 113, 113, 0.5);
}

.stage-theme-tnie .stage-live-tag {
    background: rgba(239, 68, 68, 0.16) !important;
    border-color: rgba(239, 68, 68, 0.45) !important;
    color: #fecaca !important;
}

.stage-theme-tnie .live-dot {
    background-color: #ef4444 !important;
    box-shadow: 0 0 10px #ef4444 !important;
}

.stage-theme-tnie .stage-action-btn {
    background: #ef4444 !important;
    border-color: #f87171 !important;
    color: #ffffff !important;
    box-shadow: 0 0 24px rgba(239, 68, 68, 0.75) !important;
}

.stage-theme-tnie .stage-sub-pill {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.28) !important;
    color: #fee2e2 !important;
}

/* 15. IRCTC - DEEP SAFFRON / RAILWAYS (Transit & Ticketing App) */
.stage-theme-irctc {
    background:
        radial-gradient(circle at 50% 0%, rgba(249, 115, 22, 0.32) 0%, rgba(194, 65, 12, 0.14) 42%, rgba(23, 9, 1, 0.96) 100%),
        #170901 !important;
    border-color: rgba(249, 115, 22, 0.48) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7), 0 0 28px rgba(249, 115, 22, 0.20), inset 0 1px 0 rgba(253, 186, 116, 0.35) !important;
}

.stage-theme-irctc:hover {
    border-color: rgba(251, 146, 60, 0.95) !important;
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.8), 0 0 42px rgba(249, 115, 22, 0.42) !important;
}

.stage-theme-irctc .stage-sector-num {
    color: #fb923c !important;
    text-shadow: 0 0 12px rgba(251, 146, 60, 0.5);
}

.stage-theme-irctc .stage-live-tag {
    background: rgba(249, 115, 22, 0.16) !important;
    border-color: rgba(249, 115, 22, 0.45) !important;
    color: #fed7aa !important;
}

.stage-theme-irctc .live-dot {
    background-color: #f97316 !important;
    box-shadow: 0 0 10px #f97316 !important;
}

.stage-theme-irctc .stage-action-btn {
    background: #f97316 !important;
    border-color: #fb923c !important;
    color: #ffffff !important;
    box-shadow: 0 0 24px rgba(249, 115, 22, 0.75) !important;
}

.stage-theme-irctc .stage-sub-pill {
    background: rgba(249, 115, 22, 0.08) !important;
    border-color: rgba(249, 115, 22, 0.28) !important;
    color: #ffedd5 !important;
}

/* 16. XPRESSCURE - FOREST EMERALD / MEDICAL TEAL (Healthcare App) */
.stage-theme-xpresscure {
    background:
        radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.30) 0%, rgba(5, 150, 105, 0.14) 42%, rgba(4, 21, 15, 0.96) 100%),
        #04150f !important;
    border-color: rgba(16, 185, 129, 0.48) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7), 0 0 28px rgba(16, 185, 129, 0.20), inset 0 1px 0 rgba(110, 231, 183, 0.35) !important;
}

.stage-theme-xpresscure:hover {
    border-color: rgba(52, 211, 153, 0.95) !important;
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.8), 0 0 42px rgba(16, 185, 129, 0.42) !important;
}

.stage-theme-xpresscure .stage-sector-num {
    color: #34d399 !important;
    text-shadow: 0 0 12px rgba(52, 211, 153, 0.5);
}

.stage-theme-xpresscure .stage-live-tag {
    background: rgba(16, 185, 129, 0.16) !important;
    border-color: rgba(16, 185, 129, 0.45) !important;
    color: #a7f3d0 !important;
}

.stage-theme-xpresscure .live-dot {
    background-color: #10b981 !important;
    box-shadow: 0 0 10px #10b981 !important;
}

.stage-theme-xpresscure .stage-action-btn {
    background: #10b981 !important;
    border-color: #34d399 !important;
    color: #ffffff !important;
    box-shadow: 0 0 24px rgba(16, 185, 129, 0.75) !important;
}

.stage-theme-xpresscure .stage-sub-pill {
    background: rgba(16, 185, 129, 0.08) !important;
    border-color: rgba(16, 185, 129, 0.28) !important;
    color: #d1fae5 !important;
}

/* 17. BODIA - GOLDEN AMBER / HONEY WARM (Curated Food Delivery App) */
.stage-theme-bodia {
    background:
        radial-gradient(circle at 50% 0%, rgba(245, 158, 11, 0.32) 0%, rgba(180, 83, 9, 0.14) 42%, rgba(23, 15, 1, 0.96) 100%),
        #170f01 !important;
    border-color: rgba(245, 158, 11, 0.48) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7), 0 0 28px rgba(245, 158, 11, 0.20), inset 0 1px 0 rgba(253, 230, 138, 0.35) !important;
}

.stage-theme-bodia:hover {
    border-color: rgba(251, 191, 36, 0.95) !important;
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.8), 0 0 42px rgba(245, 158, 11, 0.42) !important;
}

.stage-theme-bodia .stage-sector-num {
    color: #fbbf24 !important;
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
}

.stage-theme-bodia .stage-live-tag {
    background: rgba(245, 158, 11, 0.16) !important;
    border-color: rgba(245, 158, 11, 0.45) !important;
    color: #fde68a !important;
}

.stage-theme-bodia .live-dot {
    background-color: #f59e0b !important;
    box-shadow: 0 0 10px #f59e0b !important;
}

.stage-theme-bodia .stage-action-btn {
    background: #f59e0b !important;
    border-color: #fbbf24 !important;
    color: #ffffff !important;
    box-shadow: 0 0 24px rgba(245, 158, 11, 0.75) !important;
}

.stage-theme-bodia .stage-sub-pill {
    background: rgba(245, 158, 11, 0.08) !important;
    border-color: rgba(245, 158, 11, 0.28) !important;
    color: #fef3c7 !important;
}

/* 18. BIBLE GPT - COBALT ELECTRIC / AI BLUE (Generative AI App) */
.stage-theme-biblegpt {
    background:
        radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.32) 0%, rgba(29, 78, 216, 0.15) 42%, rgba(5, 15, 38, 0.96) 100%),
        #050f26 !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7), 0 0 28px rgba(59, 130, 246, 0.22), inset 0 1px 0 rgba(147, 197, 253, 0.35) !important;
}

.stage-theme-biblegpt:hover {
    border-color: rgba(96, 165, 250, 0.95) !important;
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.8), 0 0 42px rgba(59, 130, 246, 0.42) !important;
}

.stage-theme-biblegpt .stage-sector-num {
    color: #60a5fa !important;
    text-shadow: 0 0 12px rgba(96, 165, 250, 0.5);
}

.stage-theme-biblegpt .stage-live-tag {
    background: rgba(59, 130, 246, 0.16) !important;
    border-color: rgba(59, 130, 246, 0.45) !important;
    color: #bfdbfe !important;
}

.stage-theme-biblegpt .live-dot {
    background-color: #3b82f6 !important;
    box-shadow: 0 0 10px #3b82f6 !important;
}

.stage-theme-biblegpt .stage-action-btn {
    background: #3b82f6 !important;
    border-color: #60a5fa !important;
    color: #ffffff !important;
    box-shadow: 0 0 24px rgba(59, 130, 246, 0.75) !important;
}

.stage-theme-biblegpt .stage-sub-pill {
    background: rgba(59, 130, 246, 0.08) !important;
    border-color: rgba(59, 130, 246, 0.28) !important;
    color: #dbeafe !important;
}

/* ==========================================================================
           PORTFOLIO PAGINATION (1, 2, 3, 4 CIRCLE PILLS - ALWAYS CENTERED)
           ========================================================================== */
.portfolio-pagination-container {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 55px auto 20px auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 16px !important;
}

.portfolio-pagination-inner {
    margin: 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    background: rgba(8, 12, 22, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 8px 14px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.port-page-arrow {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    font-size: 14px;
}

.port-page-arrow:hover:not(:disabled) {
    background: rgba(0, 102, 255, 0.25);
    border-color: rgba(56, 189, 248, 0.45);
    color: #ffffff;
    transform: scale(1.06);
}

.port-page-arrow:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.port-page-pills-list {
    display: flex;
    align-items: center;
    gap: 10px;
}

.port-circle-pill {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #cbd5e1;
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.port-circle-pill:hover:not(.active) {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(56, 189, 248, 0.5);
    color: #ffffff;
    transform: translateY(-2px);
}

.port-circle-pill.active {
    background: linear-gradient(135deg, #0066ff, #00d2ff) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0, 102, 255, 0.5) !important;
    transform: scale(1.08);
}

.port-pagination-counter {
    font-size: 13.5px;
    color: #94a3b8;
    font-family: var(--font-head);
    letter-spacing: 0.2px;
}

@media (max-width: 580px) {
    .portfolio-pagination-inner {
        gap: 8px;
        padding: 6px 10px;
    }

    .port-circle-pill,
    .port-page-arrow {
        width: 38px;
        height: 38px;
        font-size: 13.5px;
    }
}

/* Professional Mobile Drawer Overlay for Portfolio */
.mobile-menu-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(4, 7, 14, 0.98) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(100%) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.mobile-menu-overlay.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
}

.mobile-menu-overlay .menu-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    flex-shrink: 0 !important;
    background: rgba(8, 12, 22, 0.92) !important;
}

.mobile-menu-overlay .menu-close {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
}

.mobile-menu-overlay .menu-close:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.08) !important;
}

.mobile-menu-overlay ul {
    list-style: none !important;
    padding: 20px 20px 10px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.mobile-menu-overlay ul li a.nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 13px 16px !important;
    border-radius: 12px !important;
    color: #f1f5f9 !important;
    font-family: var(--font-head) !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    transition: all 0.2s ease !important;
}

.mobile-menu-overlay ul li a.nav-link:hover,
.mobile-menu-overlay ul li a.nav-link:active {
    background: rgba(0, 102, 255, 0.18) !important;
    border-color: rgba(56, 189, 248, 0.35) !important;
    color: #38bdf8 !important;
}

.mobile-menu-overlay .btn-hire {
    margin: 14px 20px 32px !important;
    padding: 14px 22px !important;
    background: linear-gradient(135deg, #0066ff, #00d2ff) !important;
    color: #ffffff !important;
    font-family: var(--font-head) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: 0 4px 20px rgba(0, 102, 255, 0.4) !important;
    display: block !important;
}

/* CUSTOM COMPONENT CARD FOR HDFC & PREMIER & BIOTECH */
.stage-rich-card {
    background: #070a12;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 28px;
    width: 100%;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

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

.rich-brand-logo {
    max-height: 26px;
    width: auto;
    object-fit: contain;
}

.rich-card-title {
    font-family: var(--font-head);
    font-size: 1.35rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    margin: 0;
}

.rich-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px 18px;
}

.rich-stat-val {
    font-family: var(--font-head);
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 4px;
}

.rich-stat-sub {
    font-size: 11.5px;
    color: #94a3b8;
    line-height: 1.4;
}

.rich-mockup-frame {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #030508;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rich-mockup-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.stage-rectangle:hover .rich-mockup-frame img {
    transform: scale(1.05);
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .portfolio-grid-2col {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .stage-rectangle {
        padding: 28px 22px;
        min-height: auto;
    }
}

/* SCOPING FORM */
.scoping-section-dark {
    background: #030508;
    padding: 100px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.scoping-form-wrapper {
    max-width: 860px;
    margin: 0 auto;
    background: #070b14;
    border: 1px solid var(--border-dark);
    border-radius: 20px;
    padding: 48px 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.form-control-wc {
    width: 100%;
    background: #04070d;
    border: 1px solid var(--border-dark);
    border-radius: 10px;
    padding: 13px 18px;
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 14.5px;
    outline: none;
    transition: border-color 0.2s ease;
}

.form-control-wc:focus {
    border-color: var(--electric-blue);
    box-shadow: 0 0 0 3px rgba(18, 107, 255, 0.2);
}

.btn-primary-wc {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 34px;
    border-radius: 10px;
    background: #126bff;
    color: #ffffff;
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.btn-primary-wc:hover {
    background: #0056e0;
    transform: translateY(-2px);
}

/* ==========================================================================
           MAIN HOME LUXURY FOOTER STYLING (MATCHING HOME 100%)
           ========================================================================== */
footer.footer {
    background: radial-gradient(130% 90% at 50% -10%, #081639 0%, #04091A 35%, #010309 100%) !important;
    border-top: 1px solid rgba(26, 98, 255, 0.3) !important;
    color: #E2E8F0 !important;
    position: relative !important;
    padding: 65px 32px 28px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    overflow: hidden !important;
}

footer.footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #1A62FF 35%, #38BDF8 50%, #1A62FF 65%, transparent 100%);
    box-shadow: 0 0 20px #1A62FF, 0 0 35px rgba(56, 189, 248, 0.6);
    z-index: 10;
}

.footer .footer-inner {
    max-width: 1440px !important;
    margin: 0 auto !important;
    position: relative;
    z-index: 2;
}

.footer .cta-banner {
    background: linear-gradient(135deg, rgba(13, 26, 60, 0.92) 0%, rgba(6, 11, 26, 0.96) 100%) !important;
    border: 1px solid rgba(26, 98, 255, 0.38) !important;
    border-radius: 22px !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65), 0 0 35px rgba(26, 98, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    padding: 30px 40px !important;
    margin-bottom: 50px !important;
    backdrop-filter: blur(15px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    flex-wrap: wrap !important;
}

.footer .cta-left {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}

.footer .cta-icon {
    background: radial-gradient(circle at 30% 30%, #1A62FF 0%, #0A2C7A 100%) !important;
    border: 1px solid rgba(26, 98, 255, 0.5) !important;
    box-shadow: 0 0 22px rgba(26, 98, 255, 0.6) !important;
    width: 58px !important;
    height: 58px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 26px !important;
    flex-shrink: 0 !important;
}

.footer .cta-left h2 {
    color: #FFFFFF !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: -0.015em !important;
    margin: 0 0 6px !important;
    font-family: var(--font-head) !important;
}

.footer .cta-left p {
    color: #94A3B8 !important;
    font-size: 15px !important;
    margin: 0 !important;
}

.footer .cta-actions {
    display: flex !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}

.footer .cta-actions .btn-primary {
    background: linear-gradient(135deg, #1A62FF 0%, #004BD6 100%) !important;
    border: none !important;
    color: #FFFFFF !important;
    font-weight: 750 !important;
    font-size: 14.5px !important;
    border-radius: 50px !important;
    padding: 13px 26px !important;
    box-shadow: 0 4px 20px rgba(26, 98, 255, 0.45) !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    font-family: var(--font-head) !important;
}

.footer .cta-actions .btn-primary:hover {
    transform: translateY(-2px) !important;
    background: linear-gradient(135deg, #2B73FF 0%, #0B53E4 100%) !important;
    box-shadow: 0 8px 28px rgba(26, 98, 255, 0.65) !important;
    color: #FFFFFF !important;
}

.footer .cta-actions .btn-outline {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #FFFFFF !important;
    font-weight: 650 !important;
    font-size: 14.5px !important;
    border-radius: 50px !important;
    padding: 13px 24px !important;
    backdrop-filter: blur(8px) !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    font-family: var(--font-head) !important;
}

.footer .cta-actions .btn-outline:hover {
    background: rgba(26, 98, 255, 0.15) !important;
    border-color: #1A62FF !important;
    color: #38BDF8 !important;
    transform: translateY(-2px) !important;
}

/* 10,000+ SUBSCRIBERS NEWSLETTER CARD */
.wc-nl-banner-card {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 48px !important;
    padding: 48px 56px !important;
    background: radial-gradient(circle at 12% 25%, rgba(13, 110, 253, 0.16) 0%, rgba(6, 12, 28, 0.95) 55%, #030712 100%) !important;
    border: 1.5px solid rgba(26, 98, 255, 0.38) !important;
    border-radius: 26px !important;
    box-shadow: 0 16px 45px -10px rgba(0, 0, 0, 0.7), 0 0 35px rgba(13, 110, 253, 0.12) !important;
    margin: 15px 0 45px !important;
    overflow: hidden !important;
}

.wc-nl-banner-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 1.5px !important;
    background: linear-gradient(90deg, transparent 0%, rgba(56, 189, 248, 0.5) 25%, rgba(26, 98, 255, 0.85) 50%, rgba(56, 189, 248, 0.5) 75%, transparent 100%) !important;
}

.wc-nl-content-col {
    flex: 1 1 480px !important;
    max-width: 560px !important;
}

.wc-nl-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(13, 110, 253, 0.14) !important;
    border: 1px solid rgba(56, 189, 248, 0.32) !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    letter-spacing: 1.5px !important;
    color: #38BDF8 !important;
    text-transform: uppercase !important;
    margin-bottom: 18px !important;
}

.wc-nl-badge-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #00D2FF !important;
    box-shadow: 0 0 8px #00D2FF, 0 0 14px #00D2FF !important;
    display: inline-block !important;
}

.wc-nl-title {
    font-size: 38px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    line-height: 1.18 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 14px 0 !important;
    font-family: var(--font-head) !important;
}

.wc-nl-glow-num {
    color: #1A62FF !important;
    text-shadow: 0 0 25px rgba(26, 98, 255, 0.85), 0 0 10px rgba(26, 98, 255, 0.5) !important;
}

.wc-nl-desc {
    font-size: 15px !important;
    color: #94A3B8 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    max-width: 480px !important;
    font-weight: 400 !important;
}

.wc-nl-action-col {
    flex: 1 1 420px !important;
    max-width: 520px !important;
}

.wc-nl-input-bar {
    display: flex !important;
    align-items: center !important;
    background: rgba(4, 9, 22, 0.95) !important;
    border: 1.5px solid rgba(26, 98, 255, 0.45) !important;
    border-radius: 999px !important;
    padding: 5px 6px 5px 20px !important;
    gap: 12px !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.45), 0 0 20px rgba(13, 110, 253, 0.12) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.wc-nl-input-bar:focus-within {
    border-color: #1A62FF !important;
    box-shadow: 0 0 30px rgba(26, 98, 255, 0.5) !important;
    background: rgba(6, 13, 30, 0.98) !important;
}

.wc-nl-mail-icon {
    flex-shrink: 0 !important;
}

.wc-nl-input-bar input {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #FFFFFF !important;
    font-size: 15px !important;
    padding: 10px 0 !important;
    min-width: 120px !important;
}

.wc-nl-input-bar input::placeholder {
    color: #64748B !important;
}

.wc-nl-submit-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #1A62FF !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 13px 26px !important;
    font-size: 14.5px !important;
    font-weight: 750 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 0 20px rgba(26, 98, 255, 0.55) !important;
    font-family: var(--font-head) !important;
}

.wc-nl-submit-btn:hover {
    background: #0052FF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 0 28px rgba(26, 98, 255, 0.85) !important;
}

.wc-nl-privacy {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    color: #64748B !important;
    font-size: 13px !important;
    margin-top: 14px !important;
    padding-left: 10px !important;
}

/* NAVIGATION LINK COLUMNS */
.footer .links-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 28px !important;
    padding: 44px 0 !important;
    border-bottom: 1px solid rgba(26, 98, 255, 0.18) !important;
}

.footer .link-col h4 {
    color: #FFFFFF !important;
    font-size: 16px !important;
    font-weight: 750 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 18px !important;
    letter-spacing: -0.01em !important;
    font-family: var(--font-head) !important;
}

.footer .link-col h4 .ic {
    color: #1A62FF !important;
    font-size: 16px !important;
}

.footer .link-col ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.footer .link-col ul li a {
    color: #94A3B8 !important;
    font-size: 14.5px !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.22s ease !important;
}

.footer .link-col ul li a::before {
    content: "›" !important;
    color: #1A62FF !important;
    font-size: 16px !important;
    line-height: 1 !important;
    transition: transform 0.2s ease !important;
}

.footer .link-col ul li a:hover {
    color: #38BDF8 !important;
    transform: translateX(4px) !important;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.35) !important;
}

.footer .link-col ul li a:hover::before {
    transform: translateX(2px) !important;
    color: #38BDF8 !important;
}

/* GLOBAL OFFICES (Blue & Black Cards) */
.footer .offices-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    padding: 44px 0 24px !important;
}

.footer .office-card {
    flex: 1 1 calc(25% - 24px) !important;
    min-width: 250px !important;
    background: linear-gradient(180deg, rgba(12, 20, 42, 0.8) 0%, rgba(6, 10, 22, 0.95) 100%) !important;
    border: 1px solid rgba(26, 98, 255, 0.24) !important;
    border-radius: 18px !important;
    padding: 26px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
}

.footer .office-card:hover {
    border-color: #1A62FF !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7), 0 0 28px rgba(26, 98, 255, 0.28) !important;
    background: linear-gradient(180deg, rgba(16, 26, 56, 0.9) 0%, rgba(8, 14, 28, 0.98) 100%) !important;
}

.footer .office-head {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

.footer .office-head .flag {
    font-size: 20px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.footer .office-head .flag.india::before {
    content: "🇮🇳";
}

.footer .office-head .flag.uae::before {
    content: "🇦🇪";
}

.footer .office-title {
    color: #FFFFFF !important;
    font-size: 17px !important;
    font-weight: 750 !important;
    font-family: var(--font-head) !important;
}

.footer .office-card h5 {
    color: #38BDF8 !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    margin: 0 0 14px !important;
    transition: color 0.2s ease !important;
    font-family: var(--font-head) !important;
}

.footer .office-card a:hover h5 {
    color: #60A5FA !important;
    text-decoration: underline !important;
}

.footer .office-card p.sub {
    color: #94A3B8 !important;
    font-size: 12.5px !important;
    margin-bottom: 10px !important;
}

.footer .office-line {
    color: #94A3B8 !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}

.footer .office-line .ic {
    color: #1A62FF !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
}

.footer .office-line .ic i {
    color: #1A62FF !important;
}

.footer .office-email {
    margin-top: auto !important;
}

.footer .office-email a {
    color: #E2E8F0 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.footer .office-email a:hover {
    color: #38BDF8 !important;
    text-decoration: underline !important;
}

.footer .remote-list {
    padding-left: 18px !important;
    margin: 0 0 12px !important;
    color: #94A3B8 !important;
    font-size: 13.5px !important;
}

.footer .remote-list li {
    margin-bottom: 4px !important;
}

/* CERTIFICATIONS ROW */
.footer .certs-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    background: rgba(8, 14, 30, 0.65) !important;
    border: 1px solid rgba(26, 98, 255, 0.2) !important;
    border-radius: 18px !important;
    padding: 22px 32px !important;
    margin: 18px 0 36px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

.footer .cert-item img {
    max-height: 48px !important;
    width: auto !important;
    filter: brightness(0.95) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5)) !important;
    transition: all 0.25s ease !important;
}

.footer .cert-item:hover img {
    filter: brightness(1.15) drop-shadow(0 0 12px rgba(26, 98, 255, 0.5)) !important;
    transform: scale(1.05) !important;
}

/* BOTTOM CONTACTS & SOCIALS */
.footer .bottom-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    flex-wrap: wrap !important;
    padding: 28px 0 !important;
    border-top: 1px solid rgba(26, 98, 255, 0.18) !important;
}

.footer .bottom-contacts {
    display: flex !important;
    gap: 28px !important;
    flex-wrap: wrap !important;
}

.footer .bottom-contact {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.footer .bottom-contact .ic-box {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: rgba(26, 98, 255, 0.14) !important;
    border: 1px solid rgba(26, 98, 255, 0.32) !important;
    color: #38BDF8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 19px !important;
    box-shadow: 0 0 14px rgba(26, 98, 255, 0.25) !important;
}

.footer .bottom-contact .label {
    color: #64748B !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 2px !important;
}

.footer .bottom-contact .value a {
    color: #FFFFFF !important;
    font-weight: 650 !important;
    font-size: 14.5px !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.footer .bottom-contact .value a:hover {
    color: #38BDF8 !important;
    text-decoration: underline !important;
}

.footer .hire-on-logo img {
    max-height: 42px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.footer .socials {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.footer .socials span {
    color: #94A3B8 !important;
    font-size: 13.5px !important;
    margin-right: 6px !important;
}

.footer .social-ic {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(14, 22, 46, 0.9) !important;
    border: 1px solid rgba(26, 98, 255, 0.3) !important;
    color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.footer .social-ic:hover {
    background: #1A62FF !important;
    border-color: #1A62FF !important;
    color: #FFFFFF !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 0 18px rgba(26, 98, 255, 0.75) !important;
}

/* COPYRIGHT ROW */
.footer .copyright-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    padding: 24px 0 8px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #64748B !important;
    font-size: 13.5px !important;
}

.footer .copyright-row b {
    color: #CBD5E1 !important;
}

.footer .legal-links {
    display: flex !important;
    gap: 20px !important;
}

.footer .legal-links a {
    color: #94A3B8 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.footer .legal-links a:hover {
    color: #38BDF8 !important;
    text-decoration: underline !important;
}

@media (max-width: 1024px) {
    .footer .links-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .footer .office-card {
        flex: 1 1 calc(50% - 24px) !important;
    }
}

@media (max-width: 991px) {
    .wc-nl-banner-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 38px 28px !important;
        gap: 26px !important;
    }

    .wc-nl-content-col,
    .wc-nl-action-col {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .wc-nl-title {
        font-size: 30px !important;
    }
}

@media (max-width: 680px) {
    footer.footer {
        padding: 45px 18px 20px !important;
    }

    .footer .cta-banner {
        padding: 24px 20px !important;
    }

    .footer .cta-actions {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .footer .cta-actions .btn-primary,
    .footer .cta-actions .btn-outline {
        border-radius: 8px !important;
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 13px 20px !important;
    }

    .footer .links-row {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    .footer .office-card {
        flex: 1 1 100% !important;
    }

    .footer .bottom-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .footer .copyright-row {
        flex-direction: column !important;
    }
}

@media (max-width: 580px) {
    .wc-nl-banner-card {
        padding: 24px 16px !important;
        border-radius: 20px !important;
        margin: 15px 0 35px !important;
        gap: 18px !important;
        box-sizing: border-box !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .wc-nl-title {
        font-size: clamp(22px, 6vw, 26px) !important;
        line-height: 1.25 !important;
    }

    .wc-nl-desc {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    .wc-nl-input-bar {
        flex-direction: column !important;
        border-radius: 16px !important;
        padding: 14px 14px !important;
        gap: 12px !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
    }

    .wc-nl-input-bar input {
        width: 100% !important;
        font-size: 14.5px !important;
        padding: 6px 0 !important;
    }

    .wc-nl-submit-btn {
        justify-content: center !important;
        width: 100% !important;
        border-radius: 12px !important;
        padding: 13px 20px !important;
        font-size: 14.5px !important;
        font-weight: 700 !important;
    }

    .wc-nl-privacy {
        padding-left: 0 !important;
        font-size: 12px !important;
    }
}

/* ==========================================================================
           UNIFIED BULLETPROOF MOBILE NAVBAR RESPONSIVENESS
           ========================================================================== */
@media (max-width: 991px) {
    .nav-links-center {
        display: none !important;
    }

    .nav-cta-right .btn-appinv-contact {
        display: none !important;
    }

    .nav-cta-right {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
}

@media (max-width: 576px) {

    html,
    body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    .main-navbar-sticky {
        padding: 10px 0 !important;
    }

    .navbar-content-container {
        padding: 0 16px !important;
    }

    .navbar-brand img,
    .navbar-content-container a img,
    .navbar-content-container img {
        height: 32px !important;
        max-width: 130px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    .btn-nav-ai {
        padding: 6px 12px !important;
        height: 34px !important;
        font-size: 12px !important;
        gap: 6px !important;
    }

    .btn-nav-ai span.ai-badge-text {
        font-size: 12px !important;
    }

    .nav-cta-right {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    #menuToggle {
        padding: 4px !important;
        background: transparent !important;
        border: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #menuToggle svg {
        width: 26px !important;
        height: 20px !important;
    }
}


/* ==========================================================================
           COLLAPSIBLE AI SERVICES ACCORDION IN MOBILE HAMBURGER MENU
           ========================================================================== */
.mobile-menu-item-group {
    border-radius: 14px !important;
    background: rgba(14, 24, 48, 0.45) !important;
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
    overflow: hidden !important;
    margin: 4px 0 8px !important;
    transition: all 0.25s ease !important;
}

.mobile-group-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 13px 16px !important;
    cursor: pointer !important;
    user-select: none !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

.mobile-group-label {
    font-family: var(--font-head) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #38bdf8 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.mobile-group-arrow {
    color: #38bdf8 !important;
    font-size: 13px !important;
    transition: transform 0.25s ease !important;
}

.mobile-menu-item-group.open .mobile-group-arrow {
    transform: rotate(180deg) !important;
}

.mobile-submenu-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 8px 10px 12px 10px !important;
    border-top: 1px solid rgba(56, 189, 248, 0.12) !important;
}

.mobile-menu-item-group:not(.open) .mobile-submenu-panel {
    display: none !important;
}

.mobile-sub-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 9px 12px !important;
    border-radius: 10px !important;
    color: #cbd5e1 !important;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.2s ease !important;
}

.mobile-sub-link:hover,
.mobile-sub-link:active {
    background: rgba(0, 102, 255, 0.2) !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
    color: #ffffff !important;
    transform: translateX(3px) !important;
}

.mobile-sub-link i {
    font-size: 18px !important;
    width: 26px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

.mobile-sub-link div {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.25 !important;
}

.mobile-sub-link strong {
    font-family: var(--font-head) !important;
    font-size: 13.5px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.mobile-sub-link span {
    font-size: 11px !important;
    color: #94a3b8 !important;
    margin-top: 2px !important;
}

.mobile-sub-link.highlight-overview {
    background: rgba(18, 107, 255, 0.14) !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
}

.mobile-sub-link.highlight-overview strong {
    color: #38bdf8 !important;
}

====================================================================*/ .pipe-contact-section {
    background-color: #07090D;
    position: relative;
    overflow: hidden;
    padding: 110px 0 120px;
    color: #FFFFFF;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* Ambient Blue Background Aura */
.pipe-contact-ambient-glow {
    position: absolute;
    top: 15%;
    right: 2%;
    width: 800px;
    height: 650px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.32) 0%, rgba(29, 78, 216, 0.16) 40%, rgba(7, 9, 13, 0) 75%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 1;
}

.pipe-contact-container {
    position: relative;
    z-index: 5;
    max-width: 1320px;
}

/* --- Left Column Styling --- */
.pipe-contact-left-col {
    padding-right: 20px;
}

.pipe-contact-eyebrow {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #94A3B8;
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

@keyframes contactDotPulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 10px #38BDF8;
    }

    50% {
        transform: scale(1.35);
        box-shadow: 0 0 18px #38BDF8, 0 0 28px rgba(56, 189, 248, 0.5);
    }
}

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

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

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

.pipe-contact-eyebrow::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #38BDF8;
    box-shadow: 0 0 10px #38BDF8;
    animation: contactDotPulse 2.2s infinite ease-in-out;
}

.pipe-contact-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(42px, 5.2vw, 68px);
    font-weight: 300 !important;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    margin-bottom: 22px;
}

.pipe-contact-title .pipe-contact-gradient {
    background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 50%, #818cf8 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    animation: contactTextShimmer 4.5s ease-in-out infinite;
}

.pipe-contact-desc {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16.5px;
    font-weight: 300 !important;
    line-height: 1.65;
    color: #94A3B8;
    max-width: 490px;
    margin-bottom: 24px;
}

/* Let's Talk Button on Contact Section - Sleek Design with Dynamic Hover Fill Gradient */
.pipe-lets-talk-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 34px;
    border-radius: 9999px;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.15);
    margin-top: 8px;
    margin-bottom: 24px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The Fill Gradient Layer on Hover */
.pipe-lets-talk-bg-gradient {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: linear-gradient(135deg, #1ea7fd 0%, #0d6efd 50%, #004fe8 100%);
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}

/* Diagonal Light Shimmer Sweep */
.pipe-lets-talk-btn::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -80%;
    width: 45%;
    height: 220%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: rotate(25deg);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
    pointer-events: none;
}

.pipe-lets-talk-content {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.pipe-lets-talk-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #38bdf8;
    font-size: 13.5px;
    transition: all 0.35s ease;
}

.pipe-lets-talk-arrow {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Hover States with Glowing Aura and Gradient Fill */
.pipe-lets-talk-btn:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.75);
    box-shadow: 0 16px 38px rgba(13, 110, 253, 0.55), 0 0 30px rgba(30, 167, 253, 0.45);
}

.pipe-lets-talk-btn:hover .pipe-lets-talk-bg-gradient {
    opacity: 1;
    transform: scale(1);
}

.pipe-lets-talk-btn:hover::after {
    opacity: 1;
    animation: ctaLightSweep 1.6s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.pipe-lets-talk-btn:hover .pipe-lets-talk-icon-wrap {
    background: #ffffff;
    color: #0052cc;
    transform: scale(1.08) rotate(-12deg);
}

.pipe-lets-talk-btn:hover .pipe-lets-talk-arrow {
    transform: translateX(4px);
    color: #ffffff;
}

.pipe-lets-talk-btn:active {
    transform: translateY(-1px) scale(0.99);
}

@keyframes ctaLightSweep {
    0% {
        left: -80%;
    }

    40% {
        left: 140%;
    }

    100% {
        left: 140%;
    }
}

@media (max-width: 768px) {
    .pipe-lets-talk-btn {
        padding: 12px 28px;
        margin-bottom: 20px;
    }

    .pipe-lets-talk-content {
        font-size: 14.5px;
    }
}

/* Search FAQ Pill Button */
.pipe-faq-action-wrap {
    margin-bottom: 36px;
}

.pipe-faq-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 26px;
    background: #FFFFFF;
    color: #0F172A;
    border-radius: 50px;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pipe-faq-pill-btn i {
    font-size: 13.5px;
    color: #0F172A;
    transition: transform 0.3s ease, color 0.3s ease;
}

.pipe-faq-pill-btn:hover {
    transform: translateY(-2px);
    background: #F8FAFC;
    color: #0284C7;
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.25);
}

.pipe-faq-pill-btn:hover i {
    transform: scale(1.15);
    color: #0284C7;
}

/* Our Presence & Flags */
.pipe-presence-block {
    margin-top: 10px;
    margin-bottom: 26px;
}

.pipe-presence-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748B;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pipe-presence-label i {
    color: #38BDF8;
    font-size: 15px;
}

.pipe-contact-section .presence-flags {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pipe-contact-section .flag-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    color: #E2E8F0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.pipe-contact-section .flag-item img {
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 3px;
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Hover and color change on flags */
.pipe-contact-section .flag-item:hover {
    background: rgba(37, 99, 235, 0.22);
    border-color: #38BDF8;
    color: #38BDF8;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 24px -4px rgba(56, 189, 248, 0.35);
}

.pipe-contact-section .flag-item:hover img {
    transform: scale(1.18);
    filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.8));
}

.pipe-contact-section .flag-item.active {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.35), rgba(59, 130, 246, 0.2));
    border-color: #60A5FA;
    color: #FFFFFF;
    box-shadow: 0 0 22px rgba(59, 130, 246, 0.35);
}

.pipe-contact-section .flag-item.active::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #38BDF8;
    box-shadow: 0 0 8px #38BDF8;
}

/* Dynamic Contact Details Card */
.pipe-contact-info-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 22px 24px;
    backdrop-filter: blur(14px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 540px;
}

.pipe-info-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 8px 12px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.pipe-info-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #94A3B8;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pipe-info-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-grow: 1;
}

.pipe-info-tag {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748B;
    font-weight: 700;
}

.pipe-info-val {
    font-size: 14px;
    color: #CBD5E1;
    margin: 0;
    line-height: 1.5;
    transition: color 0.3s ease;
}

.pipe-contact-link {
    font-size: 15px;
    font-weight: 600;
    color: #F1F5F9;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-block;
}

/* Hover and color change on address, email, number */
.pipe-address-row:hover {
    background: rgba(56, 189, 248, 0.05);
}

.pipe-address-row:hover .pipe-info-icon {
    background: rgba(56, 189, 248, 0.18);
    border-color: #38BDF8;
    color: #38BDF8;
    transform: scale(1.1);
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.35);
}

.pipe-address-row:hover .pipe-info-val {
    color: #93C5FD;
}

.pipe-email-row:hover {
    background: rgba(56, 189, 248, 0.07);
}

.pipe-email-row:hover .pipe-info-icon {
    background: rgba(56, 189, 248, 0.22);
    border-color: #38BDF8;
    color: #38BDF8;
    transform: scale(1.12) rotate(-6deg);
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.45);
}

.pipe-email-row:hover .pipe-contact-link {
    color: #38BDF8;
    text-shadow: 0 0 14px rgba(56, 189, 248, 0.65);
    transform: translateX(4px);
}

.pipe-phone-row:hover {
    background: rgba(74, 222, 128, 0.07);
}

.pipe-phone-row:hover .pipe-info-icon {
    background: rgba(74, 222, 128, 0.22);
    border-color: #4ADE80;
    color: #4ADE80;
    transform: scale(1.12);
    animation: phoneVibe 0.5s ease infinite alternate;
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.45);
}

.pipe-phone-row:hover .pipe-contact-link {
    color: #4ADE80;
    text-shadow: 0 0 14px rgba(74, 222, 128, 0.65);
    transform: translateX(4px);
}

@keyframes phoneVibe {
    0% {
        transform: scale(1.12) rotate(-8deg);
    }

    100% {
        transform: scale(1.12) rotate(8deg);
    }
}

/* --- Right Column: Pristine White Form Card with Ambient Aura --- */
.pipe-contact-right-col {
    position: relative;
}

.pipe-form-card-wrapper {
    position: relative;
    z-index: 5;
    max-width: 560px;
    margin: 0 auto;
}

@keyframes formBackdropGradientFlow {
    0% {
        background-position: 0% 0%;
    }

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

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

@keyframes formAuraPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.82;
        filter: blur(52px);
    }

    50% {
        transform: scale(1.1) translate(-10px, 15px);
        opacity: 1;
        filter: blur(65px);
    }
}

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

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

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

/* Glowing Blue Aura behind the card */
/* Distinct Rounded Gradient Panel Under & Behind the Form (Pipe-style match) */
.pipe-gradient-backdrop-panel {
    position: absolute;
    top: 20%;
    bottom: -80px;
    left: -90px;
    right: -28px;
    border-radius: 28px;
    background: linear-gradient(135deg, #09142b 0%, #0c2d6b 20%, #1b4fb5 45%, #2563eb 70%, #0ea5e9 88%, #3b82f6 100%);
    background-size: 240% 240%;
    animation: formBackdropGradientFlow 8s ease infinite;
    box-shadow: 0 35px 80px -10px rgba(37, 99, 235, 0.45);
    pointer-events: none;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.pipe-card-ambient-aura {
    position: absolute;
    top: 15%;
    bottom: -90px;
    left: -105px;
    right: -40px;
    background: radial-gradient(circle at 40% 75%, rgba(37, 99, 235, 0.75) 0%, rgba(14, 165, 233, 0.45) 45%, transparent 75%);
    filter: blur(52px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.85;
    animation: formAuraPulse 6s ease-in-out infinite;
}

/* Pristine White Card with Animated Gradient Accent & Subtle Ambient Tint */
.pipe-white-form-card {
    background: linear-gradient(145deg, #FFFFFF 0%, #FFFFFF 68%, #F0F7FF 86%, #E0F2FE 100%);
    background-size: 200% 200%;
    animation: formCardBgShift 10s ease infinite;
    border-radius: 22px;
    padding: 44px 40px 38px;
    box-shadow: 0 35px 80px -15px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.25);
    color: #0F172A;
    position: relative;
    z-index: 3;
    overflow: hidden;
}

.pipe-white-form-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2563EB, #38BDF8, #818CF8, #2563EB);
    background-size: 200% 100%;
    animation: formCardBgShift 4s linear infinite;
    z-index: 4;
}

/* Form Labels & Fields */
.pipe-input-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}

.pipe-text-input,
.pipe-select-input,
.pipe-textarea-input {
    width: 100%;
    border: 1.5px solid #E2E8F0;
    border-radius: 9px;
    padding: 11px 15px;
    font-size: 14.5px;
    color: #0F172A;
    background: #FFFFFF;
    transition: all 0.22s ease;
    outline: none;
    font-family: inherit;
}

.pipe-text-input::placeholder,
.pipe-textarea-input::placeholder {
    color: #94A3B8;
}

.pipe-text-input:focus,
.pipe-select-input:focus,
.pipe-textarea-input:focus {
    border-color: #2563EB;
    box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.14);
}

/* Custom Topic Select */
.pipe-select-wrap {
    position: relative;
    width: 100%;
}

.pipe-select-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 38px;
    cursor: pointer;
    background-color: #FFFFFF;
}

.pipe-select-chevron {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #64748B;
    font-size: 12px;
}

/* Textarea */
.pipe-textarea-input {
    resize: vertical;
    min-height: 95px;
}

/* intl-tel-input in white card */
.pipe-white-form-card .iti {
    width: 100%;
}

.pipe-white-form-card .iti__flag-container {
    border-radius: 9px 0 0 9px;
}

.pipe-white-form-card .iti input {
    padding-left: 96px !important;
    border: 1.5px solid #E2E8F0;
    border-radius: 9px;
    font-size: 14.5px;
    height: 46px;
}

.pipe-white-form-card .iti input:focus {
    border-color: #2563EB;
    box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.14);
}

/* Pill Submit Button */
.pipe-submit-btn {
    width: 100%;
    height: 50px;
    background: #000000;
    color: #FFFFFF;
    border: none;
    border-radius: 50px;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
}

.pipe-submit-btn:hover {
    background: #1E293B;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

.pipe-submit-btn:active {
    transform: translateY(0);
}

/* Legal Disclaimer */
.pipe-form-disclaimer {
    font-size: 12px;
    line-height: 1.55;
    color: #64748B;
    text-align: center;
    margin-top: 16px;
}

.pipe-form-disclaimer a {
    color: #334155;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.pipe-form-disclaimer a:hover {
    color: #2563EB;
}

/* Error Messages */
.pipe-white-form-card .error-message {
    font-size: 12px;
    color: #EF4444;
    margin-top: 5px;
    display: none;
    font-weight: 500;
}


@media (max-width: 991px) {
    .pipe-gradient-backdrop-panel {
        left: -35px;
        right: -25px;
        bottom: -55px;
        top: 15%;
        border-radius: 24px;
    }

    .pipe-card-ambient-aura {
        left: -45px;
        right: -35px;
        bottom: -65px;
    }
}

@media (max-width: 540px) {
    .pipe-gradient-backdrop-panel {
        left: -16px;
        right: -16px;
        bottom: -40px;
        top: 12%;
        border-radius: 20px;
    }

    .pipe-card-ambient-aura {
        left: -20px;
        right: -20px;
        bottom: -45px;
    }
}

/* Responsive */
@media (max-width: 991px) {
    .pipe-contact-section {
        padding: 70px 0 80px;
    }

    .pipe-contact-left-col {
        padding-right: 0;
        margin-bottom: 40px;
    }

    .pipe-form-card-wrapper {
        max-width: 100%;
    }

    .pipe-white-form-card {
        padding: 34px 26px;
    }
}

@media (max-width: 540px) {
    .pipe-contact-section {
        padding: 55px 0 65px;
    }

    .pipe-white-form-card {
        padding: 26px 18px;
        border-radius: 18px;
    }

    .pipe-contact-title {
        font-size: clamp(32px, 8vw, 40px);
    }

    .pipe-contact-desc {
        font-size: 15px;
    }

    .pipe-contact-info-card {
        padding: 18px 16px;
    }

    .pipe-info-row {
        gap: 12px;
        padding: 6px 4px;
    }

    .pipe-info-icon {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }

    .pipe-contact-section .presence-flags {
        gap: 8px;
    }

    .pipe-contact-section .flag-item {
        flex: 1 1 calc(50% - 8px);
        justify-content: center;
        padding: 8px 12px;
        font-size: 13px;
    }






    .portfolio-grid-2col {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        padding-bottom: 15px;
        gap: 16px;

        scrollbar-width: auto;
        scrollbar-color: #0066ff #e8f7ff;
    }

    /* Chrome / Edge / Safari */
    .portfolio-grid-2col::-webkit-scrollbar {
        height: 8px;

    }

    .portfolio-grid-2col::-webkit-scrollbar-track {
        background: #e8f7ff;
        border-radius: 10px;
    }

    .portfolio-grid-2col::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, #0066ff, #00d2ff);
        border-radius: 10px;
    }

    .portfolio-grid-2col::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #0052cc, #00b8e6);
    }

    .portfolio-grid-2col .stage-rectangle {
        flex: 0 0 90%;
        width: 90%;
        min-width: 90%;
    }
    .portfolio-main-section {
    background: #04060a;
    padding: 80px 0 50px;
    }
}


footer a,
footer a:hover,
.footer a,
.footer a:hover,
.footer .office-email a,
.footer .office-email a:hover,
.footer .bottom-contact .value a,
.footer .bottom-contact .value a:hover,
.footer .legal-links a,
.footer .legal-links a:hover,
.footer .link-col ul li a,
.footer .link-col ul li a:hover {
    text-decoration: none !important;
}