/* ============================================
   AVENCORE — Stylesheet
   ============================================ */

/* ─── FONT FACES ─── */
@font-face {
    font-family: gil;
    src: url('../fonts/gilroy/Gilroy-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: urb;
    src: url('../fonts/urbanist/Urbanist-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ─── CSS RESET ─── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
    margin: 0;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Keeps it behind your content */
    background-image: radial-gradient(rgba(0, 0, 0, 0.06) 1.5px, transparent 1.5px);
    background-size: 25px 25px;
    pointer-events: none;
    /* Ensures you can still click things under it */
}


html {
    scroll-behavior: smooth;
    margin: 0;
    /* Lenis handles smooth scrolling */
}



a {
    text-decoration: none;
}


/* ─── CSS VARIABLES ─── */
:root {
    --bg: #0b0f0e;
    --bg2: #0e1412;
    --card: #111916;
    --card2: #141f1c;
    --border: #1e2e29;
    --border2: #243530;
    --teal: #00c9b8;
    --teal2: #00b4a6;
    --teal-dim: #009b8f;
    --teal-glow: rgba(0, 201, 184, 0.12);
    --teal-glow2: rgba(0, 201, 184, 0.06);
    --white: #f0faf9;
    --text: #b8cdc9;
    --muted: #6b8c87;
    --heading: #e8f5f3;
    --c-blue: #63b3ed;
    --c-blue-bg: rgba(99, 179, 237, 0.04);
    --c-blue-b: rgba(99, 179, 237, 0.12);
    --c-purple: #b794f4;
    --c-purple-bg: rgba(183, 148, 244, 0.04);
    --c-purple-b: rgba(183, 148, 244, 0.12);
    --c-amber: #f6ad55;
    --c-amber-bg: rgba(246, 173, 85, 0.04);
    --c-amber-b: rgba(246, 173, 85, 0.12);
    --c-rose: #fc8181;
    --c-rose-bg: rgba(252, 129, 129, 0.04);
    --c-rose-b: rgba(252, 129, 129, 0.12);
    --c-green: #68d391;
    --c-green-bg: rgba(104, 211, 145, 0.04);
    --c-green-b: rgba(104, 211, 145, 0.12);
    --c-teal: #4fd1c5;
    --c-teal-bg: rgba(79, 209, 197, 0.04);
    --c-teal-b: rgba(79, 209, 197, 0.12);
    --c-indigo: #7f9cf5;
    --c-indigo-bg: rgba(127, 156, 245, 0.04);
    --c-indigo-b: rgba(127, 156, 245, 0.12);
    --c-pink: #f687b3;
    --c-pink-bg: rgba(246, 135, 179, 0.04);
    --c-pink-b: rgba(246, 135, 179, 0.12);
    /* Colors */
    --dark: #032D42;
    --dark-light: #064463;
    --dark-surface: rgba(3, 45, 66, 0.92);
    --accent: #62D84E;
    --accent-glow: rgba(98, 216, 78, 0.25);
    --light: #FFFFFF;
    --light-70: rgba(255, 255, 255, 0.7);
    --light-50: rgba(255, 255, 255, 0.5);
    --light-15: rgba(255, 255, 255, 0.15);
    --light-08: rgba(255, 255, 255, 0.08);

    /* Typography */
    --font-display: gil;
    --font-body: urb;

    /* Layout */
    --nav-height: 80px;
    --nav-height-scrolled: 60px;
    --container-pad: clamp(1.5rem, 4vw, 4rem);

    /* Easing */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);

    --rose: #E11D48;
    --rose-light: #FFF1F2;
    --rose-border: #FECDD3;
    --sky: #0284C7;
    --sky-light: #F0F9FF;
    --sky-border: #BAE6FD;
    --violet: #7C3AED;
    --violet-light: #F5F3FF;
    --violet-border: #DDD6FE;
    --emerald: #059669;
    --emerald-light: #ECFDF5;
    --emerald-border: #A7F3D0;
    --amber: #D97706;
    --amber-light: #FFFBEB;
    --amber-border: #FDE68A;
    --coral: #EA580C;
    --coral-light: #FFF7ED;
    --coral-border: #FED7AA;
    --pink: #DB2777;
    --pink-light: #FDF2F8;
    --pink-border: #FBCFE8;
    --teal: #0D9488;
    --teal-light: #F0FDFA;
    --teal-border: #99F6E4;
    --ink: #1d1d1f;
    --muted: #6e6e73;
    --faint: #f2f2f7;
    --white: #ffffff;
    --sprint-bg: #0D2B25;

}

/* ── Overlay ─── */
.main-preloader-overlay {
    position: fixed;
    inset: 0;
    background: #080a10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 44px;
    z-index: 10000;
    overflow: hidden;
}

/* ── Dot grid bg ─── */
.main-preloader-bg-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(0, 74, 173, 0.18) 1px, transparent 1px);
    background-size: 28px 28px;
    animation: main-preloader-bg-fade 0.8s ease forwards;
}

@keyframes main-preloader-bg-fade {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

/* ── Corner brackets ─── */
.main-preloader-corner {
    position: absolute;
    width: 22px;
    height: 22px;
    animation: main-preloader-corner-in 0.6s ease both
}

.main-preloader-corner--tl {
    top: 28px;
    left: 28px;
    border-top: 1.5px solid rgba(74, 143, 255, 0.5);
    border-left: 1.5px solid rgba(74, 143, 255, 0.5);
    animation-delay: 0.1s
}

.main-preloader-corner--tr {
    top: 28px;
    right: 28px;
    border-top: 1.5px solid rgba(74, 143, 255, 0.5);
    border-right: 1.5px solid rgba(74, 143, 255, 0.5);
    animation-delay: 0.2s
}

.main-preloader-corner--bl {
    bottom: 28px;
    left: 28px;
    border-bottom: 1.5px solid rgba(74, 143, 255, 0.5);
    border-left: 1.5px solid rgba(74, 143, 255, 0.5);
    animation-delay: 0.15s
}

.main-preloader-corner--br {
    bottom: 28px;
    right: 28px;
    border-bottom: 1.5px solid rgba(74, 143, 255, 0.5);
    border-right: 1.5px solid rgba(74, 143, 255, 0.5);
    animation-delay: 0.25s
}

@keyframes main-preloader-corner-in {
    0% {
        opacity: 0;
        transform: scale(0.4)
    }

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

/* ── Icon scene ─── */
.main-preloader-scene {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 220px;
}

/* Glow behind icon */
.main-preloader-glow-ring {
    position: absolute;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: rgba(0, 74, 173, 0.13);
    animation: main-preloader-glow-breathe 2.6s ease-in-out infinite;
}

@keyframes main-preloader-glow-breathe {

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

    50% {
        transform: scale(1.18);
        opacity: 1
    }
}

/* Orbit ring */
.main-preloader-orbit {
    position: absolute;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    border: 1px solid rgba(0, 74, 173, 0.25);
    opacity: 0;
    transition: opacity 0.5s ease;
    animation: main-preloader-orbit-spin 4s linear infinite;
}

.main-preloader-orbit-visible {
    opacity: 1
}

@keyframes main-preloader-orbit-spin {
    to {
        transform: rotate(360deg)
    }
}

.main-preloader-orbit-dot {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    top: -3.5px;
    left: 50%;
    transform: translateX(-50%);
}

/* Icon wrapper + idle float */
.main-preloader-icon-wrap {
    position: relative;
    width: 100px;
    height: 102px;
    animation: main-preloader-float 3s ease-in-out 1.6s infinite;
}

@keyframes main-preloader-float {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-7px)
    }
}

.main-preloader-icon-svg {
    width: 100%;
    height: 100%;
    overflow: visible
}

/* Blue top triangle — falls from above with spring */
.main-preloader-path-top {
    animation: main-preloader-top-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both,
        main-preloader-top-shimmer 3s ease-in-out 1.6s infinite;
}

@keyframes main-preloader-top-in {
    0% {
        opacity: 0;
        transform: translateY(-55px)
    }

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

@keyframes main-preloader-top-shimmer {

    0%,
    100% {
        filter: brightness(1)
    }

    50% {
        filter: brightness(1.45)
    }
}

/* Grey left — slides from left */
.main-preloader-path-left {
    animation: main-preloader-left-in 0.65s cubic-bezier(0.34, 1.4, 0.64, 1) 0.55s both,
        main-preloader-grey-shimmer 3s ease-in-out 1.9s infinite;
}

@keyframes main-preloader-left-in {
    0% {
        opacity: 0;
        transform: translateX(-44px) skewX(6deg)
    }

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

/* Grey right — slides from right */
.main-preloader-path-right {
    animation: main-preloader-right-in 0.65s cubic-bezier(0.34, 1.4, 0.64, 1) 0.65s both,
        main-preloader-grey-shimmer 3s ease-in-out 2.1s infinite;
}

@keyframes main-preloader-right-in {
    0% {
        opacity: 0;
        transform: translateX(44px) skewX(-6deg)
    }

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

@keyframes main-preloader-grey-shimmer {

    0%,
    100% {
        filter: brightness(1)
    }

    50% {
        filter: brightness(1.28)
    }
}

/* Scan line */
.main-preloader-scan {
    position: absolute;
    top: 0;
    left: -8%;
    width: 116%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(74, 143, 255, 0.8), transparent);
    animation: main-preloader-scan-sweep 2.2s ease-in-out 1.4s infinite;
    pointer-events: none;
}

@keyframes main-preloader-scan-sweep {
    0% {
        top: -4%;
        opacity: 0
    }

    8% {
        opacity: 1
    }

    92% {
        opacity: 1
    }

    100% {
        top: 108%;
        opacity: 0
    }
}

/* ── Brand ─── */
.main-preloader-brand {
    text-align: center;
    animation: main-preloader-rise 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both;
}

@keyframes main-preloader-rise {
    0% {
        opacity: 0;
        transform: translateY(14px)
    }

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

.main-preloader-brand-name {
    font-size: 26px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    animation: main-preloader-letters-open 0.85s ease 0.7s both;
    font-family: gil;

}

@keyframes main-preloader-letters-open {
    0% {
        letter-spacing: 0;
        opacity: 0
    }

    100% {
        letter-spacing: 6px;
        opacity: 1
    }
}

.main-preloader-brand-rule {
    height: 1px;
    width: 0;
    background: linear-gradient(90deg, transparent, var(--accent));
    margin: 8px auto;
    animation: main-preloader-rule-grow 0.8s ease 1s forwards;
}

@keyframes main-preloader-rule-grow {
    to {
        width: 170px
    }
}

.main-preloader-brand-sub {
    font-size: 10px;
    letter-spacing: 7px;
    text-transform: uppercase;
    color: #f2f2f2;
    font-family: urb;
    animation: main-preloader-letters-open 0.9s ease 0.9s both;
}

/* ── Progress ─── */
.main-preloader-progress-wrap {
    width: 200px;
    animation: main-preloader-rise 0.7s ease 0.9s both;
}

.main-preloader-progress-track {
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 2px;
    overflow: hidden;
}

.main-preloader-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--c-blue));
    border-radius: 2px;
    transition: width 0.06s linear;
}

.main-preloader-progress-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 9px;
}

.main-preloader-progress-status {
    font-size: 9px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--grey);
}

.main-preloader-progress-pct {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

/* ── Exit ─── */
.main-preloader-overlay.main-preloader-exit {
    animation: main-preloader-exit-wipe 0.75s cubic-bezier(0.7, 0, 1, 1) forwards;
}

@keyframes main-preloader-exit-wipe {
    0% {
        clip-path: inset(0 0 0 0);
        opacity: 1
    }

    100% {
        clip-path: inset(0 50% 0 50%);
        opacity: 0
    }
}

.home-whatsapp-fixed {
    position: fixed;
    bottom: 30px;
    right: 0.5%;
    width: 50px;
    height: 50px;
    background-color: #25d366;
    /* WhatsApp Green */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    /* Ensure it stays above everything */
    transition: transform 0.3s ease, background-color 0.3s ease;
    text-decoration: none;
}

.home-whatsapp-fixed:hover {
    transform: scale(1.1);
    background-color: #128c7e;
    /* Darker WhatsApp Green */
}

/* Optional: Pulse effect to grab attention */
.home-whatsapp-fixed::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #25d366;
    opacity: 0.5;
    z-index: -1;
    animation: whatsapp-pulse 2s infinite;
}

@keyframes whatsapp-pulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

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


.home-mail-link {
    position: fixed;
    bottom: 105px;
    /* Positioned 15px above the WhatsApp button */
    right: 0.5%;
    width: 50px;
    height: 50px;
    background-color: #0078d4;
    /* Professional Mail Blue */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    transition: transform 0.3s ease, background-color 0.3s ease;
    text-decoration: none;
    color: #ffffff;
}

.home-mail-link:hover {
    transform: scale(1.1);
    background-color: #005a9e;
    /* Darker blue */
}

.home-mail-svg {
    width: 28px;
    height: 28px;
}

/* Pulse effect for Mail button */
.home-mail-link::before {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #0078d4;
    opacity: 0.5;
    z-index: -1;
    animation: mail-pulse 2s infinite;
}

@keyframes mail-pulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

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



.home-phone-sticky {
    position: fixed;
    bottom: 180px;
    right: 0.5%;
    width: 50px;
    height: 50px;
    background-color: #ff6b00;
    /* Vibrant Orange */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    transition: transform 0.3s ease, background-color 0.3s ease;
    text-decoration: none;
    color: #ffffff;
}

.home-phone-sticky:hover {
    transform: scale(1.1);
    background-color: #cc5500;
    /* Dark Orange */
}

.home-phone-svg {
    width: 28px;
    height: 28px;
}

/* Pulse effect */
.home-phone-sticky::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #ff6b00;
    opacity: 0.5;
    z-index: -1;
    animation: phone-pulse 2s infinite;
}

@keyframes phone-pulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

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

/* =============================================
   NAVBAR
   ============================================= */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* padding: 0 var(--container-pad); */
    z-index: 9999;
    transition: padding 0.6s var(--ease-out-expo);
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: #ffffffc4; */
    background-color: #000;
    /* backdrop-filter: blur(20px); */
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

/* When scrolled — outer shell adds top padding so container floats */
/* .navbar.scrolled {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
} */

/* Inner container — morphs into a floating pill on scroll */
.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-height);
    max-width: 1400px;
    width: 100%;
    /* margin: 10px; */
    padding: 0 20px;
    border-radius: 0;
    border: 1px solid transparent;
    background: transparent;
    transition: all 0.6s var(--ease-out-expo);
    /* border-radius: 24px; */
}

/* .navbar.scrolled .nav-container {
    height: var(--nav-height-scrolled);
    padding: 0 2rem;
    border-radius: 100px;
    background: var(--dark-surface);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-color: var(--light-08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 var(--light-08);
} */

/* Hide on scroll-down */
.navbar.nav-hidden {
    transform: translateY(-120%);
    transition: transform 0.5s var(--ease-in-out-quart);
}


/* ─── LOGO ─── */
.nav-logo {
    font-family: var(--font-display);
    font-size: 2.4rem;
    letter-spacing: 0.12em;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1001;
    flex-shrink: 0;
    width: 15%;
}

.logo-aven {
    color: var(--light);
}

.logo-core {
    color: var(--accent);
}


/* ─── NAV LINKS (Desktop) ─── */
.nav-links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nav-link {
    position: relative;
    padding: 0.5rem 1.2rem;
    font-family: var(--font-body);
    font-size: 1.rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: #ffffff;
    transition: color 0.3s ease;
    cursor: pointer;
}

.nav-link-inner {
    position: relative;
    display: inline-block;
}

/* Accent dot that grows on hover */
.nav-link::before {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
    transform: translateX(-50%) scale(0);
    transition: transform 0.4s var(--ease-out-expo),
        width 0.4s var(--ease-out-expo),
        border-radius 0.4s var(--ease-out-expo);
}

.nav-link:hover {
    color: var(--accent);
}

.nav-link:hover::before {
    transform: translateX(-50%) scale(1);
    width: 20px;
    height: 3px;
    border-radius: 2px;
}

/* Active state */
.nav-link.active {
    color: var(--accent);
}

.nav-link.active::before {
    transform: translateX(-50%) scale(1);
    width: 20px;
    height: 3px;
    border-radius: 2px;
}


/* ─── NAV RIGHT ─── */
.nav-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 1001;
    flex-shrink: 0;
}


/* ─── CTA BUTTON ─── */
.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.6rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--dark);
    /* background: var(--accent); */
    background: var(--accent);
    border-radius: 100px;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.4s ease;
}

.nav-cta-text {
    position: relative;
    z-index: 1;
}

.nav-cta-icon {
    position: relative;
    z-index: 1;
    display: flex;
    font-size: 1.1rem;
    transition: transform 0.3s var(--ease-out-expo);
}

/* Hover fill sweep */
.nav-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--light);
    border-radius: inherit;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ease-out-expo);
}

.nav-cta:hover::before {
    transform: scaleX(1);
}

.nav-cta:hover {
    box-shadow: 0 4px 24px var(--accent-glow);
    color: #000;
}

.nav-cta:hover .nav-cta-icon {
    transform: translate(2px, -2px);
}


/* ─── HAMBURGER ─── */
.nav-hamburger {
    width: 44px;
    height: 44px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #000;
    border: 1px solid var(--accent);
    transition: border-color 0.3s ease,
        background-color 0.3s ease;
    z-index: 1001;
}

.nav-hamburger:hover {
    border-color: var(--accent);
    background-color: rgba(98, 216, 78, 0.08);
}

.hamburger-wrap {
    width: 42px;
    height: 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hamburger-line {
    display: block;
    height: 2px;
    background: var(--light);
    border-radius: 2px;
    transition: transform 0.5s var(--ease-out-expo),
        width 0.5s var(--ease-out-expo),
        opacity 0.3s ease;
    transform-origin: center;
}

/* Second line is shorter — trendy asymmetric detail */
.hamburger-line:last-child {
    width: 60%;
    margin-left: auto;
}

/* Active X state */
.nav-hamburger.active .hamburger-line:first-child {
    transform: translateY(5px) rotate(45deg);
}

.nav-hamburger.active .hamburger-line:last-child {
    width: 100%;
    transform: translateY(-5px) rotate(-45deg);
}


/* =============================================
   FULL-SCREEN MENU OVERLAY
   ============================================= */
.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1001;
    pointer-events: none;
    visibility: hidden;
}

.menu-overlay.active {
    pointer-events: all;
    visibility: visible;
}

/* Background layer */
.menu-overlay-bg {
    position: absolute;
    inset: 0;
    background: var(--dark);
    transform: scaleY(0);
    transform-origin: top;
}

/* Content wrapper */
.menu-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--nav-height) + 3rem) var(--container-pad) 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Menu links list */
.menu-links {
    display: flex;
    flex-direction: column;
}

.menu-link {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1.8rem 0;
    border-bottom: 1px solid var(--light-08);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(60px);
}

.menu-link:first-child {
    border-top: 1px solid var(--light-08);
}

.menu-link-index {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 300;
    color: var(--accent);
    letter-spacing: 0.12em;
    min-width: 30px;
}

.menu-link-text {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 4rem);
    color: var(--light);
    letter-spacing: 0.02em;
    transition: color 0.4s ease,
        transform 0.5s var(--ease-out-expo);
}

.menu-link-arrow {
    margin-left: auto;
    font-size: 1.5rem;
    color: var(--accent);
    opacity: 0;
    transform: translate(-20px, 20px);
    transition: opacity 0.4s ease,
        transform 0.5s var(--ease-out-expo);
}

/* Hover effects */
.menu-link:hover .menu-link-text {
    color: var(--accent);
    transform: translateX(20px);
}

.menu-link:hover .menu-link-arrow {
    opacity: 1;
    transform: translate(0, 0);
}

/* Accent line reveal on hover */
.menu-link::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s var(--ease-out-expo);
}

.menu-link:hover::after {
    transform: scaleX(1);
}


/* ─── MENU FOOTER ─── */
.menu-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 2rem;
    opacity: 0;
}

.menu-socials {
    display: flex;
    gap: 1.5rem;
}

.menu-social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--light-15);
    font-size: 1.15rem;
    color: var(--light-70);
    transition: color 0.3s ease,
        border-color 0.3s ease,
        background-color 0.3s ease,
        transform 0.4s var(--ease-out-expo);
}

.menu-social:hover {
    color: var(--dark);
    border-color: var(--accent);
    background-color: var(--accent);
    transform: translateY(-3px);
}

.menu-email {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--light-50);
    letter-spacing: 0.05em;
}


@media(max-width: 768px) {
    .nav-logo {
        width: 40%;
    }
}

/* home-hero-section-start */
.home-hero-section {
    position: relative;
    /* height: 0vh; */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 0px 0px 0px;
    overflow: hidden;
    width: 100%;
}

.home-hero-container {
    display: flex;
    width: 100%;
    max-width: 1700px;
    align-items: center;
    justify-content: center;
}

.home-hero-content {
    position: relative;
    z-index: 2;
    width: 50%;
    margin-left: 100px;
}

/* ─── TAG LINE ─── */
.home-hero-tag {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.home-hero-tag-line {
    display: inline-block;
    width: 40px;
    height: 2px;
    background: #032d42;
    transform-origin: left;
}

.home-hero-tag-text {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #032D42;
}

/* ─── HEADING & DYNAMIC WORDS ─── */
.home-hero-heading {
    font-family: var(--font-display);
    font-size: 60px;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--dark);
    margin-bottom: 2.5rem;
}

.home-hero-paragraph {
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.6;
    color: #000;
    max-width: 700px;
    margin-bottom: 3rem;
}

.home-hero-heading-line {
    display: block;
    overflow: hidden;
}

.home-hero-dynamic-wrapper {
    position: relative;
    display: inline-flex;
    vertical-align: top;
    height: 1.1em;
    /* Matches line height */
    overflow: hidden;
    padding-left: 10px;
}

.home-hero-dynamic-word {
    position: absolute;
    left: 10px;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.4s ease;
}

/* Active State: The word currently visible */
.home-hero-dynamic-word.active {
    position: relative;
    opacity: 1;
    transform: translateY(0);
    left: 0;
}

/* Exit State: The word moving out */
.home-hero-dynamic-word.exit {
    opacity: 0;
    transform: translateY(100%);
}

/* Colors for each word */
.home-hero-dynamic-word:nth-child(1) {
    /* color: #62d84e; */
    color: var(--accent);
}

/* Confidence */
.home-hero-dynamic-word:nth-child(2) {
    /* color: #62d84e; */
    color: var(--accent);
}

/* Precision */
.home-hero-dynamic-word:nth-child(3) {
    /* color: #62d84e; */
    color: var(--accent);
}

/* Agility */
.home-hero-dynamic-word:nth-child(4) {
    /* color: #62d84e; */
    color: var(--accent);
}

/* Expertise */
.home-hero-dynamic-word:nth-child(5) {
    /* color: #62d84e; */
    color: var(--accent);
}

/* Success */

/* ─── urbGRAPH & CTAS ─── */
.home-hero-urbgraph {
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.6;
    color: #000;
    max-width: 700px;
    margin-bottom: 3rem;
}

.home-hero-ctas {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.home-hero-mobile-ctas {
    display: none;
}

/* CTA Primary */
.home-hero-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 2.2rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--dark);
    background: var(--accent);
    border-radius: 100px;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.4s ease;
}

.home-hero-cta-primary .home-hero-cta-text,
.home-hero-cta-primary .home-hero-cta-icon {
    position: relative;
    z-index: 1;
}

.home-hero-cta-primary .home-hero-cta-icon {
    display: flex;
    font-size: 1.15rem;
    transition: transform 0.35s var(--ease-out-expo);
}

.home-hero-cta-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--light);
    border-radius: inherit;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ease-out-expo);
}

.home-hero-cta-primary:hover::before {
    transform: scaleX(1);
}

.home-hero-cta-primary:hover {
    box-shadow: 0 6px 30px var(--accent-glow);
}

.home-hero-cta-primary:hover .hero-cta-icon {
    transform: translate(3px, -3px);
}

/* CTA Secondary */
.home-hero-cta-secondary {
    background-color: #032D42;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 2.2rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--light);
    border: 1px solid var(--light-15);
    border-radius: 100px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.4s ease,
        background-color 0.4s ease;
}

.home-hero-cta-secondary .hero-cta-icon {
    display: flex;
    font-size: 1.15rem;
    transition: transform 0.35s var(--ease-out-expo);
}

.home-hero-cta-secondary:hover {
    border-color: var(--accent);
    background-color: rgba(98, 216, 78, 0.06);
    color: #000;
}

.hero-cta-secondary:hover .hero-cta-icon {
    transform: translateY(3px);
}

.home-hero-lottie {
    width: 800px;
    height: 800px;
}


@media(max-width: 1550px) {

    .home-hero-section {
        padding: 80px 0px 0px 0px;
    }

    .home-hero-heading {
        font-size: 47px;
    }

    .home-hero-urbgraph {
        font-size: 20px;
    }

    .home-hero-lottie {
        width: 600px;
        height: 600px;
    }
}

@media(max-width: 768px) {
    .home-hero-section {
        padding-bottom: 50px;
    }

    .home-hero-container {
        flex-direction: column;
    }

    .home-hero-content {
        padding: 20px 20px 0px 20px;
        margin: 0;
        width: 100%;
    }

    .home-hero-heading {
        font-size: 25px;
    }

    .home-hero-paragraph {
        font-size: 17px;
        margin-bottom: 0px;
    }

    .home-hero-ctas {
        /* flex-wrap: nowrap;
        flex-direction: column;
        width: 100%; */
        display: none;
    }

    /* .home-hero-cta-primary {
        width: fit-content;
    }

    .home-hero-cta-secondary {
        width: fit-content;
    } */


    .home-hero-mobile-ctas {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
        width: 100%;
    }

    /* CTA Primary */
    .home-hero-mobile-cta-primary {
        display: inline-flex;
        align-items: center;
        gap: 0.65rem;
        padding: 0.85rem 2.2rem;
        font-family: var(--font-body);
        font-size: 0.95rem;
        font-weight: 500;
        letter-spacing: 0.04em;
        color: var(--dark);
        background: var(--accent);
        border-radius: 100px;
        position: relative;
        overflow: hidden;
        transition: box-shadow 0.4s ease;
        width: fit-content;
    }

    .home-hero-mobile-cta-primary .home-hero-mobile-cta-text,
    .home-hero-mobile-cta-primary .home-hero-mobile-cta-icon {
        position: relative;
        z-index: 1;
    }

    .home-hero-mobile-cta-primary .home-hero-mobile-cta-icon {
        display: flex;
        font-size: 1.15rem;
        transition: transform 0.35s var(--ease-out-expo);
    }

    .home-hero-mobile-cta-primary::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--light);
        border-radius: inherit;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.5s var(--ease-out-expo);
    }

    .home-hero-mobile-cta-primary:hover::before {
        transform: scaleX(1);
    }

    .home-hero-mobile-cta-primary:hover {
        box-shadow: 0 6px 30px var(--accent-glow);
    }

    .home-hero-mobile-cta-primary:hover .hero-mobile-cta-icon {
        transform: translate(3px, -3px);
    }

    /* CTA Secondary */
    .home-hero-mobile-cta-secondary {
        background-color: #032D42;
        display: inline-flex;
        align-items: center;
        gap: 0.65rem;
        padding: 0.85rem 2.2rem;
        font-family: var(--font-body);
        font-size: 0.95rem;
        font-weight: 400;
        letter-spacing: 0.04em;
        color: var(--light);
        border: 1px solid var(--light-15);
        border-radius: 100px;
        position: relative;
        overflow: hidden;
        transition: border-color 0.4s ease,
            background-color 0.4s ease;
        width: fit-content;
    }

    .home-hero-mobile-cta-secondary .hero-mobile-cta-icon {
        display: flex;
        font-size: 1.15rem;
        transition: transform 0.35s var(--ease-out-expo);
    }

    .home-hero-mobile-cta-secondary:hover {
        border-color: var(--accent);
        background-color: rgba(98, 216, 78, 0.06);
        color: #000;
    }

    .hero-mobile-cta-secondary:hover .hero-mobile-cta-icon {
        transform: translateY(3px);
    }

    .home-hero-lottie {
        width: 500px;
        height: 400px;
    }
}

/* home-hero-section-end   */


@media (max-width: 900px) {
    .nav-links {
        display: none;
    }

    .nav-cta {
        display: none;
    }
}

/* Mobile tweaks */
@media (max-width: 600px) {
    :root {
        --nav-height: 70px;
        --nav-height-scrolled: 56px;
    }

    .navbar.scrolled .nav-container {
        padding: 0 1.25rem;
    }

    .menu-link {
        gap: 1.2rem;
        padding: 1.2rem 0;
    }

    .menu-footer {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .nav-hamburger {
        display: block;
    }
}



/* hook-section-start */
/* .hook-section {
    padding: 20px 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #032D42;
    overflow: hidden;
    margin-top: -50px;
}

.hook-text {
    font-family: 'urb', sans-serif;
    font-size: 25px;
    font-weight: 400;
    text-align: center;
    color: #ffffff;
    line-height: 1.5;
    font-kerning: normal;
    font-variant-ligatures: none;
    margin: 0;
}

.hook-text .word {
    display: inline-block;
    white-space: nowrap;
}

.hook-text .char {
    display: inline-block;
} */



.hero-strip-wrapper {
    background: #0d1f38;
    padding: 28px 5%;
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Manrope', sans-serif;
}

.hero-strip-wrapper * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.hero-strip-wrapper::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 260px;
    background: radial-gradient(ellipse, rgba(91, 219, 116, 0.06) 0%, transparent 68%);
    pointer-events: none;
}

.hero-strip-inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hero-strip-steps-row {
    display: grid;
    grid-template-columns: 1fr 48px 1fr 48px 1fr 48px 1fr;
    align-items: center;
    gap: 0;
}

.hero-strip-step {
    text-align: center;
    padding: 0 6px;
    min-width: 0;
}

.hero-strip-step-badge {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.01em;
    flex-shrink: 0;
    font-family: 'Manrope', sans-serif;
}

.hero-strip-step-badge.active {
    background: #5bdb74;
    color: #0d1f38;
}

.hero-strip-step-badge.inactive {
    background: rgba(91, 219, 116, 0.09);
    color: #5bdb74;
    border: 1.5px solid rgba(91, 219, 116, 0.28);
}

.hero-strip-step-title {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
    white-space: nowrap;
    font-family: 'Manrope', sans-serif;
}

.hero-strip-step-description {
    font-size: 11.5px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.42);
    line-height: 1.5;
    word-break: break-word;
    font-family: 'Manrope', sans-serif;
}

.hero-strip-step-arrow {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 19px;
}

.hero-strip-connector-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, rgba(91, 219, 116, 0.5), rgba(91, 219, 116, 0.15));
    position: relative;
}

.hero-strip-connector-line::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 6px solid rgba(91, 219, 116, 0.4);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

/* ────────────────────────────────────────────
           RESPONSIVE
           ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .hero-strip-step-title {
        font-size: 13px;
    }

    .hero-strip-step-description {
        font-size: 10.5px;
    }
}

@media (max-width: 768px) {
    .hero-strip-wrapper {
        padding: 24px 4%;
    }

    .hero-strip-steps-row {
        /* grid-template-columns: 1fr 32px 1fr 32px 1fr 32px 1fr; */
        grid-template-columns: repeat(3, 1fr);
    }

    .hero-strip-step-badge {
        width: 34px;
        height: 34px;
        font-size: 12px;
    }

    .hero-strip-step-title {
        font-size: 12px;
        margin-bottom: 3px;
    }

    .hero-strip-step-description {
        font-size: 10px;
    }

    .hero-strip-step-arrow {
        padding-top: 16px;
    }
}

@media (max-width: 640px) {
    .hero-strip-wrapper {
        padding: 20px 3%;
    }

    .hero-strip-steps-row {
        /* grid-template-columns: 1fr 24px 1fr 24px 1fr 24px 1fr; */
        grid-template-columns: repeat(3, 1fr);

        row-gap: 16px;
    }

    .hide-arrow {
        display: none;
    }

    .hero-strip-step {
        padding: 0 4px;
    }

    .hero-strip-step-badge {
        width: 30px;
        height: 30px;
        font-size: 11px;
        margin-bottom: 8px;
    }

    .hero-strip-step-title {
        font-size: 11px;
        margin-bottom: 2px;
    }

    .hero-strip-step-description {
        font-size: 9px;
    }

    .hero-strip-step-arrow {
        padding-top: 12px;
    }

    .hero-strip-connector-line {
        height: 0.5px;
    }

    .hero-strip-connector-line::after {
        border-left-width: 4px;
        border-top-width: 3px;
        border-bottom-width: 3px;
    }
}

/* hook-section-end   */


/* home-about-section-start */
.home-about-section {
    position: relative;
    padding: 100px 5%;
    /* background-color: #fff; */
}

.home-about-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1400px;
    margin: 0 auto;
    gap: 100px;
}

/* Left Side Styling */
.home-about-left {
    width: 45%;
    position: sticky;
    top: 15vh;
}

.home-about-tag {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.home-about-tag-line {
    width: 30px;
    height: 1px;
    background: var(--dark);
}

.home-about-tag-text {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: 600;
    font-family: urb;
}

.home-about-main-heading {
    font-family: 'gil', sans-serif;
    font-size: clamp(40px, 4vw, 60px);
    color: var(--dark-blue);
    line-height: 1.1;
    margin-bottom: 40px;
    text-transform: uppercase;
    overflow: hidden;
}


.home-about-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Right Side Styling */
.home-about-right {
    width: 45%;
    padding-top: 20vh;
}

.home-about-card {
    margin-bottom: 150px;
    /* Space between points */
    padding-bottom: 50px;
    border-bottom: 1px solid rgba(3, 45, 66, 0.1);
}

.home-about-number {
    display: block;
    font-family: 'gil', sans-serif;
    color: var(--accent-green);
    font-size: 18px;
    margin-bottom: 15px;
}

.home-about-card-title {
    font-family: 'gil', sans-serif;
    font-size: 40px;
    color: var(--dark-blue);
    margin-bottom: 20px;
}

.home-about-card-para {
    font-family: 'urb', sans-serif;
    font-size: 20px;
    line-height: 1.7;
    color: #444;
    font-weight: 600;
}

.home-about-card-urb {
    font-family: 'urb', sans-serif;
    font-size: 20px;
    line-height: 1.7;
    color: #444;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 992px) {
    .home-about-container {
        flex-direction: column;
    }

    .home-about-left,
    .home-about-right {
        width: 100%;
        position: relative;
        top: 0;
    }

    .home-about-right {
        padding-top: 50px;
    }
}

/* home-about-section-end   */

/* 
.home-service-top {
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-service-top-cont {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1500px;
}

.home-service-top-cont h1 {
    font-size: 70px;
    text-transform: uppercase;
    font-family: gil;
    margin: 0;
}

.home-service-top-cont p {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    font-family: urb;
    max-width: 500px;
}

.home-service__section {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 100px;
}

.home-service__container {
    position: relative;
    width: 100%;
    max-width: 1500px;
    height: 70vh;
    overflow: hidden;
    border-radius: 20px;
}



.home-service__card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    background: linear-gradient(0deg, rgba(3, 45, 66, 1) 0%, rgba(79, 108, 123, 1) 37%, rgba(140, 158, 168, 1) 73%, rgba(186, 197, 203, 1) 100%);
    box-sizing: border-box;
    border-radius: 20px;
    overflow: hidden;
}

.home-service__content-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 60px;
}

.home-service__content-left-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 30px;
}

.home-service__badge {
    font-size: 14px;
    font-family: urb;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    background-color: #fff;
    color: #032d42;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.home-service__badge div {
    height: 15px;
    width: 15px;
    background-color: #62D84E;
    border-radius: 50px;
}

.home-service__title {
    font-size: 45px;
    font-family: gil;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}

.home-service__description {
    font-size: 20px;
    font-weight: 600;
    font-family: urb;
    line-height: 1.6;
    letter-spacing: 1px;
    color: #ffffff;
}

.home-service__image-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-service__image-right-i {
    position: absolute;
    width: 80%;
    height: 80%;
    border: none;
}

.home-service__card:not(:first-child) {
    transform: translateY(100%);
} */

.home-service-top {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 0px 50px 0px;
}

.home-service-top-cont {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1400px;
}

.home-service-top-cont h1 {
    font-size: 60px;
    line-height: 1.1;
    color: #000;
    margin: 0;
    text-transform: uppercase;
    font-weight: 500;
    font-family: gil;
    text-align: center;
}

.home-service-top-cont p {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    font-family: urb;
    max-width: 500px;
}

.home-service-carousel__section {
    width: 100%;
    /* height: 60vh; */
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: #032D42; */
    position: relative;
    padding-bottom: 100px;
}

.home-service-carousel__container {
    position: relative;
    width: 100%;
    max-width: 1600px;
    height: 50vh;
}

.home-service-carousel__wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
}

.home-service-carousel__card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    /* background: linear-gradient(0deg, rgba(3, 45, 66, 0.744) 0%, rgba(79, 108, 123, 0.842) 37%, rgba(140, 158, 168, 0.837) 73%, rgba(186, 197, 203, 0.767) 100%); */
    /* background: linear-gradient(0deg, rgba(106, 149, 176, 1) 0%, rgba(164, 202, 219, 1) 30%, rgba(188, 219, 232, 1) 63%, rgba(240, 251, 255, 1) 99%); */
    /* background-color: #f6f6f6; */
    background-color: #fff9f7;
    /* background: linear-gradient(0deg, rgba(3, 45, 66, 1) 0%, rgba(79, 108, 123, 1) 37%, rgba(140, 158, 168, 1) 73%, rgba(186, 197, 203, 1) 100%); */
    /* box-sizing: border-box; */
    border-radius: 20px;
    overflow: hidden;
    /* Cards stay invisible until JS positions them */
    visibility: hidden;

}

/* Nav Arrows */
.home-service-carousel__nav {
    position: absolute;
    top: 40%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none;
}

.home-service-carousel__arrow {
    width: 50px;
    height: 50px;
    /* background: #000000; */
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    transition: background 0.3s ease;
}

.home-service-carousel__arrow:hover {
    background: #62D84E;
}

.home-service-carousel__arrow svg {
    width: 30px;
    fill: #000000;
}

/* Reuse inner content styles */
.home-service__content-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 60px 60px 60px 100px;
}

.home-service__content-left-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.home-service__badge {
    font-size: 14px;
    font-family: urb;
    font-weight: 600;
    background-color: #032D42;
    color: #ffffff;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
}

.home-service__badge div {
    height: 10px;
    width: 10px;
    background-color: #62D84E;
    border-radius: 50%;
}

.home-service__title {
    font-size: 40px;
    font-family: gil;
    color: #000000;
    margin: 0;
    line-height: 1.2;
}

.home-service__description {
    font-size: 20px;
    font-weight: 600;
    font-family: urb;
    line-height: 1.6;
    color: #000000;
}

.home-service__image-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.home-service__image-right-i-1 {
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
}


.home-service__image-right-i-2 {
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
}

.home-service__image-right-i-3 {
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
}

.home-service__image-right-i-4 {
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
}


@media((min-width: 1200px) and (max-width: 1600px)) {
    .home-service-carousel__container {
        height: 80vh;
    }
}

@media(max-width: 768px) {
    .home-service-carousel__section {
        height: fit-content;
    }

    .home-service-top-cont h1 {
        font-size: 40px;
    }

    .home-service-carousel__card {
        flex-direction: column;
    }

    .home-service__title {
        font-size: 28px;
    }

    .home-service__description {
        font-size: 15px;
    }

    .home-service__content-left {
        padding: 30px 30px 0px 30px;
        justify-content: flex-start;
        gap: 40px;
    }

    .home-service-carousel__nav {
        top: -3%;
        padding: 0px;
    }

    .home-service-carousel__container {
        height: 100vh;
    }
}



.home-counter-section {
    padding: 100px 100px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    box-sizing: border-box;
    height: 100vh;
}

.home-counter-left-col {
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.home-counter-header h1 {
    font-size: 60px;
    line-height: 1.1;
    color: #000;
    margin: 0;
    text-transform: uppercase;
    font-weight: 500;
    font-family: gil;
}

.home-counter-pattern {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-top: 50px;
    max-width: 200px;
}

.home-counter-dash {
    width: 6px;
    height: 15px;
    background-color: #000;
    transform: rotate(-45deg);
    border-radius: 2px;
}

.home-counter-right-col {
    width: 60%;
    display: flex;
    flex-direction: column;
}

.home-counter-description {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 15px;
}

.home-counter-desc-icon {
    /* background: #62D84E; */
    background: linear-gradient(0deg, #0f2f3a 0%, #1d4ed8 100%);
    color: #000000;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.home-counter-desc-icon svg {
    width: 40px;
    height: 40px;
    fill: #ffffff;
}

.home-counter-description p {
    font-size: 20px;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.4;
    font-weight: 600;
    max-width: 500px;
    font-family: urb;
}

.home-counter-chart-wrapper {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 100%;
    gap: 20px;
}

.home-counter-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
}

.home-counter-icon-box {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    margin-bottom: 0;
}

.home-counter-icon-box svg {
    width: 28px;
    height: 28px;
    fill: #fff;
}

.home-counter-bar-fill {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    box-sizing: border-box;

    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}

.home-counter-bar-col:nth-child(1) .home-counter-bar-fill {
    height: 35%;
    background-color: #000;
    border-radius: 12px;
    /* background: linear-gradient(0deg, rgba(131, 133, 136, 1) 0%, rgb(213, 215, 218) 51%, rgb(241, 241, 241) 99%); */
    background: linear-gradient(120deg, #0f2f3a 0%, #1d4ed8 100%);
}

.home-counter-bar-col:nth-child(2) .home-counter-bar-fill {
    height: 50%;
    border-radius: 12px;
    /* background: linear-gradient(0deg, rgba(131, 133, 136, 1) 0%, rgb(213, 215, 218) 51%, rgb(241, 241, 241) 99%); */
    background: linear-gradient(120deg, #0f2f3a 0%, #1d4ed8 100%);
    /* background: linear-gradient(90deg, #34d399 0%, #10b981 100%); */
}

.home-counter-bar-col:nth-child(3) .home-counter-bar-fill {
    height: 65%;
    border-radius: 12px;
    /* background: linear-gradient(0deg, rgba(131, 133, 136, 1) 0%, rgb(213, 215, 218) 51%, rgb(241, 241, 241) 99%); */
    background: linear-gradient(120deg, #0f2f3a 0%, #1d4ed8 100%);
    /* background: linear-gradient(135deg, #f5f6f4 0%, #e6f4f1 50%, #d1f5ea 100%); */
}

.home-counter-bar-col:nth-child(4) .home-counter-bar-fill {
    height: 85%;
    border-radius: 12px;
    /* background: linear-gradient(0deg, rgba(131, 133, 136, 1) 0%, rgb(213, 215, 218) 51%, rgb(241, 241, 241) 99%); */
    background: linear-gradient(120deg, #0f2f3a 0%, #1d4ed8 100%);
    /* background: linear-gradient(135deg, #0f2f3a 0%, #1f5f6b 50%, #34d399 100%); */
}

.home-counter-text-wrapper {
    opacity: 0;
    transform: translateY(10px);
    text-align: center;
}

.home-counter-label {
    font-size: 0.9rem;
    opacity: 0.7;
    margin-bottom: 5px;
    display: block;
    font-family: urb;
}

.home-counter-number {
    font-size: 27px;
    font-weight: 600;
    display: block;
    line-height: 1;
    margin-bottom: 5px;
    font-family: gil;
}

.home-counter-sub {
    font-size: 18px;
    font-weight: 500;
    font-family: urb;
}

.home-counter-bar-col:nth-child(1) .home-counter-text-wrapper {
    color: #ffffff;
}

.home-counter-bar-col:nth-child(1) .home-counter-icon-box svg {
    fill: #1a1a1a;
}

.home-counter-bar-col:nth-child(2) .home-counter-text-wrapper {
    color: #ffffff;
}

.home-counter-bar-col:nth-child(2) .home-counter-icon-box svg {
    fill: #000000;
}

/* Q3: Lavender Bar -> Black Text */
.home-counter-bar-col:nth-child(3) .home-counter-text-wrapper {
    color: #ffffff;
}

.home-counter-bar-col:nth-child(3) .home-counter-icon-box svg {
    fill: #000000;
}

/* Q4: Orange Bar -> Black Text */
.home-counter-bar-col:nth-child(4) .home-counter-text-wrapper {
    color: #ffffff;
}

.home-counter-bar-col:nth-child(4) .home-counter-icon-box svg {
    fill: #000000;
}


/* Responsive */
@media (max-width: 900px) {
    .home-counter-section {
        flex-direction: column;
        gap: 40px;
    }

    .home-counter-left-col,
    .home-counter-right-col {
        width: 100%;
    }

    .home-counter-pattern {
        display: none;
    }

    .home-counter-chart-wrapper {
        height: 400px;
    }

    .home-counter-number {
        font-size: 1.5rem;
    }
}

/* home-counter-section-end   */





.main-footer-section {
    position: relative;
    width: 100%;
    /* height: 0vh; */
    /* background-color: #fff; */
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 1000;
}

.main-footer-container {
    width: 100%;
    height: 80%;
    display: flex;
    flex-direction: column;
    padding: 60px 5% 0 5%;
    box-sizing: border-box;
    /* background-color: #fff; */
}

/* TOP SECTION */
.main-footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
}


.main-footer-inquiry {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.main-footer-small-tag {
    display: block;
    font-size: 14px;
    color: #888;
    margin-bottom: 15px;
    font-family: urb;
    font-weight: 600;
    letter-spacing: 1px;
}

.main-footer-email {
    font-size: 2vw;
    font-weight: 700;
    /* color: #000000; */
    text-decoration: underline;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 10px;
    font-family: gil;
    letter-spacing: 1px;
}

/* CTA CARD (The Yellow Box) */
.main-footer-cta-card {
    background-color: #032D42;
    /* Lime accent */
    color: #ffffff;
    padding: 30px;
    border-radius: 25px;
    width: 180px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    font-family: gil;
}

.main-footer-card-title {
    font-size: 24px;
    font-weight: 600;
    font-family: gil;
    text-transform: uppercase;
}

.main-footer-card-btn {
    background: #ffffff;
    color: #000000;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-family: urb;
    font-weight: 600;
    transition: all 0.4s ease;
}

.main-footer-card-btn:hover {
    transform: translateY(-2px);
}

/* MIDDLE SECTION */
.main-footer-middle {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    /* margin-top: auto; */
    margin-bottom: 20px;
}

.main-footer-nav-col {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* flex-direction: column; */
    gap: 10px;
}

.main-footer-nav-link {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    text-decoration: none;
    font-family: urb;
    transition: all 0.4s ease;
}

.main-footer-nav-link:hover {
    border-bottom: 1px solid #62D84E;
    color: #62D84E;
    width: fit-content;
}

.main-footer-office-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 20px;
    align-items: flex-end;
}

.main-footer-office-col a {
    text-decoration: none;
    color: #000;
    font-family: urb;
    font-weight: 500;
    font-size: 18px;
}

.main-footer-office-col a:hover {
    border-bottom: 1px solid #62D84E;
    width: fit-content;
}

.main-footer-office-label {
    display: block;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
    text-align: right;
    color: #000;
    font-family: urb;
}

.main-footer-office-address {
    color: #888;
    line-height: 1.5;
    text-align: right;
    font-size: 14px;
    font-family: urb;
    font-weight: 600;
    letter-spacing: 1px;
}

.main-footer-brand-wrap {
    margin-top: auto;
    padding-bottom: 30px;
}

/* GIANT BRAND TEXT */

.main-footer-giant-brand {
    font-size: 14vw;
    font-weight: 700;
    letter-spacing: -0.04em;
    margin: 0;
    /* line-height: 0.9; */
    color: #000000;
    /* background: linear-gradient(180deg, rgba(131, 133, 136, 1) 0%, rgb(213, 215, 218) 51%, rgb(241, 241, 241) 99%); */
    /* background: linear-gradient(135deg, #0f2f3a 0%, #1f5f6b 50%, #34d399 100%); */
    background: linear-gradient(90deg, rgba(17, 80, 148, 1) 0%, rgba(70, 113, 160, 1) 34%, rgba(151, 164, 179, 1) 71%, rgba(180, 182, 186, 1) 99%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: gil;
    text-align: center;
    text-transform: uppercase;
}

/* LAVENDER BOTTOM BAR */
.main-footer-bottom-bar {
    background-color: #000000;
    /* width: 100%; */
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5%;
    margin: 0 -5.55%;
    font-size: 13px;
    font-weight: 500;
}

.footer-copy {
    font-family: urb;
    font-weight: 600;
    font-size: 15px;
}

.footer-loc {
    font-family: urb;
    font-weight: 600;
    font-size: 13px;
    text-align: center;
}

.footer-social-links {
    margin-right: 50px;
}

.footer-social-links a img {
    color: var(--heading);
    text-decoration: none;
    margin-left: 20px;
    width: 30px;
    cursor: pointer;
}



@media(max-width: 768px) {
    .main-footer-email {
        font-size: 5vw;
    }

    .main-footer-office-label {
        font-size: 13px;
    }

    .main-footer-small-tag {
        font-size: 12px;
    }

    .main-footer-bottom-bar {
        flex-direction: column;
        gap: 20px;
        align-items: center;
        justify-content: center;
    }

    .footer-social-links {
        margin: 0;
    }

    /* .main-footer-container {
        padding-bottom: 5%;
    } */

    .main-footer-website-made {
        font-size: 11px;
    }

    .main-footer-office-col a {
        font-size: 15px;
    }

    .footer-loc {
        font-size: 12px;
    }
}

/* main-footer-section-end   */




/* Color Palette: #032D42 (Base), #62D84E (Accent), #128C7E (Mid), #42FFDC (Highlight) */

.about-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.about-hero-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.about-hero-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    transform: scale(1);
    transition: opacity 1.2s ease, transform 6s ease;
}

.about-hero-slide.active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}

.about-hero-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
}

.about-hero-content {
    position: relative;
    color: white;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: aboutHeroFadeUp 1.2s ease;
}

.about-hero-content h1 {
    font-size: 60px;
    margin-bottom: 20px;
    font-weight: 600;
    font-family: gil;
}

.about-hero-content p {
    font-size: 20px;
    line-height: 1.6;
    letter-spacing: 1px;
    font-weight: 600;
    /* opacity: .9; */
    font-family: urb;
    max-width: 700px;
    text-align: center;
}

.about-hero-tag {
    display: inline-block;
    margin-top: 25px;
    padding: 10px 22px;
    background: #2563eb;
    border-radius: 30px;
    font-size: 14px;
    letter-spacing: 1px;
    font-family: urb;
}

.about-hero-dots {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
}

.about-hero-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    display: inline-block;
    margin: 0 6px;
    cursor: pointer;
}

.about-hero-dot.active {
    background: white;
}

@keyframes aboutHeroFadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

@media(max-width: 768px) {
    .about-hero-content h1 {
        font-size: 35px;
    }
}



.msp-section {
    /* background-color: #ffffff; */
    padding: 0px 0 0px 0px;
    overflow: hidden;
}

.msp-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.msp-row {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 200px;
}

.msp-row:nth-child(3) {
    margin-bottom: 0px;
}

.msp-row-left {
    justify-content: flex-start;
}

.msp-row-right {
    justify-content: flex-end;
}

.msp-row-center {
    justify-content: center;
    text-align: center;
}

.msp-content {
    max-width: 550px;
    position: relative;
    z-index: 2;
}

.msp-tag {
    font-family: 'urb', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #128c7e;
    display: block;
    margin-bottom: 15px;
}

.msp-heading {
    font-family: 'gil', sans-serif;
    font-size: 56px;
    color: #032D42;
    margin: 0 0 25px 0;
    line-height: 1.1;
}

.msp-paragraph {
    font-family: 'urb', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    color: #444;
}

.msp-line {
    width: 80px;
    height: 4px;
    margin-top: 35px;
}

.msp-row-center .msp-line {
    margin: 35px auto 0;
}

.msp-line-green {
    background-color: #62D84E;
}

.msp-line-cyan {
    background-color: #42FFDC;
}

.msp-line-teal {
    background-color: #128c7e;
}

/* Large Background Numbers (The 'Not Basic' Touch) */
.msp-number-bg {
    position: absolute;
    font-family: 'gil', sans-serif;
    font-size: 250px;
    font-weight: 800;
    /* color: #f4f4f4; */
    background: linear-gradient(135deg, #0f2f3a 0%, #1f5f6b 50%, #34d399 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 1;
    pointer-events: none;
    line-height: 1;
}

.msp-row-left .msp-number-bg {
    right: 0;
}

.msp-row-right .msp-number-bg {
    left: 0;
}

.msp-row-center .msp-number-bg {
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.5;
}

@media (max-width: 768px) {
    .msp-heading {
        font-size: 40px;
    }

    .msp-number-bg {
        font-size: 120px;
        top: -40px;
    }

    .msp-row {
        margin-bottom: 100px;
    }
}


/* 
.about-journey-section {
    padding: 140px 0;
    overflow: hidden;
}

.about-journey-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.about-journey-header {
    margin-bottom: 80px;
    text-align: center;
}

.about-journey-tag {
    font-family: 'urb', sans-serif;
    color: #128c7e;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 14px;
    font-weight: 700;
}

.about-journey-main-heading {
    font-family: 'gil', sans-serif;
    font-size: 64px;
    color: #032D42;
    margin-top: 10px;
}

.about-journey-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    align-items: start;
}

.about-journey-item {
    position: relative;
    padding: 40px;
    background: #fcfcfc;
    border-radius: 8px;
    transition: transform 0.3s ease;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}

.about-journey-year {
    font-family: 'gil', sans-serif;
    font-size: 80px;
    background: linear-gradient(180deg, rgba(131, 133, 136, 1) 0%, rgb(213, 215, 218) 51%, rgb(241, 241, 241) 99%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: absolute;
    top: -40px;
    left: 20px;
    z-index: 1;
}

.about-journey-subheading {
    font-family: 'gil', sans-serif;
    font-size: 24px;
    color: #032D42;
    position: relative;
    z-index: 2;
    margin-bottom: 20px;
}

.about-journey-paragraph {
    font-family: 'urb', sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.7;
    color: #444;
    position: relative;
    z-index: 2;
}

.about-journey-line {
    width: 40px;
    height: 4px;
    margin-top: 30px;
}

.line-green {
    background-color: #62D84E;
}

.line-teal {
    background-color: #128c7e;
}

.line-cyan {
    background-color: #42FFDC;
}

@media (max-width: 1024px) {
    .about-journey-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-journey-main-heading {
        font-size: 48px;
    }
} */

/* 
.about-journey {
    padding: 140px 0;
    background: #f8fafc;
    position: relative;
}

.about-journey-header {
    text-align: center;
    margin-bottom: 120px;
}

.about-journey-header h2 {
    font-size: 52px;
    margin-bottom: 15px;
    font-family: gil;
}

.about-journey-header p {
    max-width: 850px;
    margin: auto;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.7;
    color: #555;
    font-family: urb;
}


.about-journey-wrapper {
    position: relative;
    width: 1200px;
    max-width: 100%;
    margin: auto;
}


.about-journey-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background: #e2e8f0;
}

.about-journey-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: #2563eb;
}


.about-journey-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 140px;
    position: relative;
    opacity: 0;
    transform: translateY(60px);
    transition: all .8s cubic-bezier(.22, .61, .36, 1);
}

.about-journey-card.about-journey-visible {
    opacity: 1;
    transform: translateY(0);
}

.about-journey-card:nth-child(even) {
    direction: rtl;
}

.about-journey-card:nth-child(even) .about-journey-content {
    direction: ltr;
}


.about-journey-image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 14px;
    transform: scale(1);
    transition: transform .6s ease;
}



.about-journey-year {
    color: #2563eb;
    font-weight: 600;
    font-family: gil;
    text-transform: uppercase;
}

.about-journey-content h3 {
    font-size: 32px;
    margin: 10px 0 15px;
    font-family: gil;
}

.about-journey-content p {
    line-height: 1.7;
    color: #444;
    font-weight: 600;
    font-family: urb;
    font-size: 20px;
} */




.first-service {
    padding: 140px 0;
    background: #fff;
}

.first-service-container {
    width: 1300px;
    max-width: 100%;
    margin: auto;
}

.first-service-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
}

.first-service-tag {
    font-family: urb;
    background-color: #032d42;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 50px;
    letter-spacing: .15em;
    color: #ffffff;
    text-transform: uppercase;
}

.first-service-content h2 {
    font-family: gil;
    font-size: 56px;
    line-height: 1.1;
    margin: 15px 0 20px;
}

.first-service-content p {
    font-family: urb;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    color: #444;
    margin-bottom: 30px;
}

.first-service-stats {
    display: flex;
    gap: 40px;
}

.first-service-stat h3 {
    font-family: gil;
    font-size: 26px;
}

.first-service-stat p {
    font-family: urb;
    font-size: 14px;
    letter-spacing: 1px;
    color: #777;
}

.first-service-visual {
    position: relative;
}

.first-service-main-img {
    width: 100%;
    border-radius: 20px;
}

.first-service-card {
    position: absolute;
    background: white;
    padding: 18px;
    border-radius: 14px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    width: 240px;
}

.first-service-card h4 {
    font-family: gil;
    font-size: 14px;
    margin-bottom: 5px;
}

.first-service-card p {
    font-family: urb;
    font-size: 16px;
    font-weight: 600;
    color: #666;
}

.first-service-card-1 {
    top: 20px;
    left: -40px;
}

.first-service-card-2 {
    bottom: 40px;
    right: -30px;
}

.first-service-card-3 {
    bottom: -20px;
    left: 40px;
}


.first-service-extra {
    margin-top: 80px;
    padding-top: 50px;
    border-top: 1px solid #e6e6e6;
}

.first-service-extra-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}

.first-service-extra-col h3 {
    font-family: gil;
    font-size: 32px;
    margin-bottom: 15px;
}

.first-service-extra-col p {
    font-family: urb;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.6;
    color: #2b2b2b;
}




.second-service {
    padding: 140px 0;
    background: #fff;
}

.second-service-container {
    width: 1300px;
    max-width: 100%;
    margin: auto;
}

.second-service-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 70px;
}

.second-service-main-img {
    width: 100%;
    border-radius: 20px;
}

.second-service-tag {
    font-family: urb;
    background-color: #032d42;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 50px;
    letter-spacing: .15em;
    color: #ffffff;
    text-transform: uppercase;
}

.second-service-content h2 {
    font-family: gil;
    font-size: 48px;
    margin: 10px 0 20px;
}

.second-service-intro {
    font-family: urb;
    font-size: 18px;
    font-weight: 600;
    color: #555;
    line-height: 1.5;
    margin-bottom: 30px;
}

.second-service-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.second-service-feature {
    background: white;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.second-service-feature h4 {
    font-family: gil;
    margin-bottom: 6px;
}

.second-service-feature p {
    font-family: urb;
    font-size: 18px;
    font-weight: 600;
    color: #666;
}

.second-service-extra {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin: auto;
}

.second-service-extra p {
    font-family: urb;
    line-height: 1.6;
    font-size: 18px;
    font-weight: 600;
    color: #2d2d2d;
}




.third-service {
    padding: 160px 0;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.third-service img {
    width: 50%;
    position: absolute;
    right: 0;
    top: 30%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.6;
}

.third-service-container {
    width: 1300px;
    max-width: 100%;
    margin: auto;
}

.third-service-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
}

.third-service-sticky {
    height: fit-content;
    position: relative;
    z-index: 100;
}

.third-service-tag {
    font-family: urb;
    font-size: 13px;
    letter-spacing: .15em;
    color: #777;
}

.third-service-sticky h2 {
    font-family: gil;
    font-size: 52px;
    margin: 10px 0 20px;
}

.third-service-intro {
    font-family: urb;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #555;
}

.third-service-sticky p {
    font-family: urb;
    line-height: 1.7;
    color: #666;
    font-weight: 600;
}


.third-service-cards {
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;
    z-index: 100;
}

.third-service-card {
    background: #f6f6f6;
    padding: 40px;
    border-radius: 18px;
    transition: all .3s ease;
}

.third-service-card:hover {
    transform: translateY(-6px);
    background: white;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.third-service-card h4 {
    font-family: gil;
    font-size: 22px;
    margin-bottom: 10px;
}

.third-service-card p {
    font-family: urb;
    font-size: 18px;
    font-weight: 600;
    color: #666;
    line-height: 1.6;
}

/* .third-service-sticky,
.third-service-card {
    opacity: 0;
} */



/* Ensure your @font-face rules are loaded before this */

.fourth-service {
    padding: 100px 5%;
    background-color: #ffffff;
    color: #111111;
    overflow: hidden;
}

.fourth-service-container {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

/* --- Top Grid --- */
.fourth-service-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.fourth-service-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.fourth-service-tag {
    font-family: 'urb', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #555555;
}

.fourth-service-title {
    font-family: 'gil', sans-serif;
    font-size: 45px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
}

.fourth-service-description {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 10px;
}

.fourth-service-text {
    font-family: urb;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.6;
    color: #373737;
    margin: 0;
}

/* --- Image Section --- */
.fourth-service-visual {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    /* Optional: subtle shadow to lift it off the page */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.fourth-service-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 4/3;
    border-radius: 24px;
    position: relative;
    z-index: 2;
}

/* Subtle glowing backdrop effect seen in some of your references */
.fourth-service-visual-backdrop {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(255, 100, 100, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
    filter: blur(40px);
    z-index: 1;
}

/* --- Bottom Features Grid --- */
.fourth-service-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding-top: 60px;
    border-top: 1px solid #eeeeee;
}

.fourth-service-feature-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fourth-service-feature-icon {
    width: 58px;
    height: 58px;
    background-color: var(--accent);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
}

.fourth-service-feature-title {
    font-family: 'gil', sans-serif;
    font-size: 1.25rem;
    margin: 0;
}

.fourth-service-feature-desc {
    font-family: 'urb', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    color: #666666;
    margin: 0;
}

/* Hide for GSAP Initial State */
.fourth-service-tag,
.fourth-service-title,
.fourth-service-text,
.fourth-service-visual,
.fourth-service-feature-card {
    opacity: 0;
    will-change: transform, opacity;
}

/* Responsive */
@media (max-width: 992px) {
    .fourth-service-main-grid {
        grid-template-columns: 1fr;
    }

    .fourth-service-features-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}




/* ============================================
           HOME OUTSOURCING SECTION - SCOPED STYLES
           All classes prefixed with 'home-outsourcing-'
           All keyframes prefixed with 'home-outsourcing-'
           ============================================ */

.home-outsourcing-section {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
    /* min-height: 100vh; */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.home-outsourcing-section * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.home-outsourcing-wrapper {
    max-width: 1400px;
    width: 100%;
    padding: 40px 40px;
}

.home-outsourcing-section-header {
    text-align: center;
    margin-bottom: 40px;
    opacity: 0;
    animation: home-outsourcing-fadeInUp 0.8s ease forwards;
}

.home-outsourcing-eyebrow {
    color: #ff6b6b;
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 15px;
    opacity: 0;
    animation: home-outsourcing-fadeInUp 0.8s ease 0.2s forwards;
}

.home-outsourcing-main-headline {
    font-size: 32px;
    font-weight: 800;
    color: white;
    margin-bottom: 10px;
    line-height: 1.2;
    opacity: 0;
    animation: home-outsourcing-fadeInUp 0.8s ease 0.4s forwards;
}

.home-outsourcing-highlight {
    background: linear-gradient(120deg, #00d4ff 0%, #00fff7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    display: inline-block;
}

.home-outsourcing-rotating-number {
    display: inline-block;
    animation: home-outsourcing-rotateNumber 6s ease-in-out infinite;
    transform-style: preserve-3d;
}

@keyframes home-outsourcing-rotateNumber {

    0%,
    100% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(360deg);
    }
}

.home-outsourcing-sub-headline {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin: 0 auto;
    opacity: 0;
    animation: home-outsourcing-fadeInUp 0.8s ease 0.6s forwards;
}

.home-outsourcing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.home-outsourcing-card {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 30px 25px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    opacity: 0;
    animation: home-outsourcing-cardSlideIn 0.6s ease forwards;
    transition: all 0.3s ease;
    will-change: transform;
    height: 230px;
}

.home-outsourcing-card:nth-child(1) {
    animation-delay: 0.8s;
}

.home-outsourcing-card:nth-child(2) {
    animation-delay: 1s;
}

.home-outsourcing-card:nth-child(3) {
    animation-delay: 1.2s;
}

.home-outsourcing-card:nth-child(4) {
    animation-delay: 1.4s;
}

.home-outsourcing-card:nth-child(5) {
    animation-delay: 1.6s;
}

.home-outsourcing-card:nth-child(6) {
    animation-delay: 1.8s;
}

.home-outsourcing-card:nth-child(7) {
    animation-delay: 2s;
}

.home-outsourcing-card:nth-child(8) {
    animation-delay: 2.2s;
}

.home-outsourcing-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #00d4ff, #ff9999, #00fff7, #4ecdc4);
    border-radius: 20px;
    opacity: 0.5;
    z-index: -1;
    transition: opacity 0.3s ease;
    background-size: 400% 400%;
    animation: home-outsourcing-gradientShift 3s ease infinite;
}

.home-outsourcing-card:hover::before {
    opacity: 0.8;
}

.home-outsourcing-card:hover {
    transform: translateY(-10px) scale(1.02);
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.3);
}

.home-outsourcing-icon-wrapper {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(255, 107, 107, 0.2));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
    will-change: transform;
}

.home-outsourcing-card:hover .home-outsourcing-icon-wrapper {
    transform: rotateY(180deg);
}

.home-outsourcing-icon {
    font-size: 30px;
    color: #00d4ff;
}

.home-outsourcing-title {
    font-size: 17px;
    font-weight: 700;
    color: white;
    margin-bottom: 7px;
}

.home-outsourcing-description {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
    margin-bottom: 10px;
}

.home-outsourcing-skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.home-outsourcing-skill-tag {
    background: rgba(0, 212, 255, 0.2);
    color: #00fff7;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    border: 1px solid rgba(0, 212, 255, 0.3);
}

.home-outsourcing-cta-container {
    text-align: center;
    opacity: 0;
    animation: home-outsourcing-fadeInUp 0.8s ease 2s forwards;
}

.home-outsourcing-timer-display {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    padding: 15px 35px;
    margin-bottom: 25px;
    border: 2px solid rgba(0, 212, 255, 0.3);
}

.home-outsourcing-timer-number {
    font-size: 40px;
    font-weight: 800;
    color: #00fff7;
    text-shadow: 0 0 20px rgba(0, 255, 247, 0.5);
    display: inline-block;
    animation: home-outsourcing-flipNumber 2s ease-in-out infinite;
    transform-style: preserve-3d;
}

@keyframes home-outsourcing-flipNumber {

    0%,
    100% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(360deg);
    }
}

.home-outsourcing-timer-label {
    font-size: 14px;
    color: white;
    font-weight: 600;
    letter-spacing: 2px;
}

.home-outsourcing-cta-button {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
    color: white;
    padding: 16px 45px;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 40px rgba(255, 107, 107, 0.3);
    position: relative;
    overflow: hidden;
}

.home-outsourcing-cta-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.home-outsourcing-cta-button:hover::before {
    width: 300px;
    height: 300px;
}

.home-outsourcing-cta-button:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 50px rgba(255, 107, 107, 0.5);
}

.home-outsourcing-cta-button span {
    position: relative;
    z-index: 1;
}

@keyframes home-outsourcing-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes home-outsourcing-cardSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes home-outsourcing-gradientShift {
    0% {
        background-position: 0% 50%;
    }

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

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

@keyframes home-outsourcing-pulse {

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

    50% {
        transform: scale(1.05);
    }
}

@media (max-width: 768px) {
    .home-outsourcing-main-headline {
        font-size: 27px;
    }

    .home-outsourcing-grid {
        grid-template-columns: 1fr;
    }

    .home-outsourcing-timer-number {
        font-size: 36px;
    }

    .home-outsourcing-wrapper {
        padding: 0px;
    }

    .home-outsourcing-sub-headline {
        font-size: 16px;
    }
}




.home-online-wrapper {
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: center;
    justify-content: center;
    padding: 100px 0px;
}

.home-online-wrapper h1 {
    font-size: 60px;
    font-family: gil;
    text-transform: uppercase;
}

.home-online-wrapper h1 span {
    color: #005a9e;
}

.home-online-container {
    width: 100%;
    /* max-width: 1300px; */
}

.home-online-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-online-image {
    width: 100%;
    /* max-width: 00px; */
    height: 650px;
    object-fit: cover;
    border-radius: 8px;
}

.slick-slide {
    padding: 10px;
}

.slick-dots {
    display: none !important;
}

.slick-arrow {
    display: none !important;
}

@media (max-width: 768px) {
    .home-online-image {
        max-width: 400px;
        height: 280px;
    }
}

@media (max-width: 480px) {
    .home-online-image {
        max-width: 300px;
        height: 200px;
    }
}




.home-client-wrapper {
    width: 100%;
    padding: 60px 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px;
}


.home-client-wrapper h1 {
    font-size: 60px;
    font-family: gil;
    text-transform: uppercase;
}

.home-client-wrapper h1 span {
    color: rgb(37, 0, 195);
}

.home-client-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.home-client-track {
    display: flex;
    gap: 40px;
    padding: 0 40px;
}

.home-client-slide {
    flex-shrink: 0;
    width: 180px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

.home-client-image {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
    pointer-events: none;
}

@media (max-width: 768px) {
    .home-client-wrapper {
        padding: 40px 0;
    }

    .home-client-slide {
        width: 140px;
        height: 80px;
    }

    .home-client-track {
        gap: 30px;
        padding: 0 30px;
    }
}

@media (max-width: 480px) {
    .home-client-wrapper {
        padding: 30px 0;
    }

    .home-client-slide {
        width: 110px;
        height: 70px;
    }

    .home-client-track {
        gap: 20px;
        padding: 0 20px;
    }
}



.gallery-hero {
    width: 100%;
}

/* GRID */
.gallery-hero__grid {
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    grid-template-rows: repeat(10, 1fr);
    gap: 8px;
    height: 100vh;
}

.gallery-hero__item {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 6px;
    cursor: pointer;
}

/* MOBILE */
.gallery-hero__mobile-image {
    width: 100%;
    height: 100vh;
    background: url(/assets/images/banner/gallery-item-6.jpeg) center/cover no-repeat;
    border-radius: 8px;
}

/* VISIBILITY */
.mobile-only {
    display: none;
}

/* .desktop-only {
    display: none;
} */

/* @media (min-width: 768px) {
    .mobile-only {
        display: none;
    }

    .desktop-only {
        display: block;
    }
} */

/* GRID POSITIONS */
.gallery-hero__item--0 {
    grid-column: 1 / span 5;
    grid-row: 1 / span 3;
    background-image: url(/assets/images/banner/gallery-item-0.jpeg);
    height: 500px;
}

.gallery-hero__item--1 {
    grid-column: 1 / span 8;
    grid-row: 4 / span 3;
    background-image: url(/assets/images/banner/gallery-item-1.jpg);
    height: 500px;
}

.gallery-hero__item--2 {
    grid-column: 6 / span 3;
    grid-row: 1 / span 3;
    background-image: url(/assets/images/banner/gallery-item-2.jpeg);
}

.gallery-hero__item--3 {
    grid-column: 9 / span 8;
    grid-row: 1 / span 4;
    background-image: url(/assets/images/banner/gallery-item-3.jpeg);
}

.gallery-hero__item--4 {
    grid-column: 9 / span 4;
    grid-row: 5 / span 2;
    background-image: url(/assets/images/banner/gallery-item-4.jpeg);
}

.gallery-hero__item--6 {
    grid-column: 13 / span 8;
    grid-row: 5 / span 2;
    background-image: url(/assets/images/banner/gallery-item-6.jpeg);
}

.gallery-hero__item--7 {
    grid-column: 17 / span 4;
    grid-row: 1 / span 2;
    background-image: url(/assets/images/banner/gallery-item-7.jpeg);
}

.gallery-hero__item--8 {
    grid-column: 17 / span 4;
    grid-row: 3 / span 2;
    background-image: url(/assets/images/banner/gallery-item-8.jpg);
}

/* MODAL */
.gallery-hero__modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.gallery-hero__modal-img {
    max-width: 100%;
    max-height: 80%;
    border-radius: 8px;
}

.gallery-hero__modal-close {
    position: absolute;
    top: 10%;
    right: 20px;
    font-size: 30px;
    color: #ffffff;
    cursor: pointer;
    z-index: 1000;
}


@media(max-width: 768px) {
    .desktop-only {
        display: none;
    }

    .mobile-only {
        display: block;
    }
}











/* Full width, no container */
.home-carousel-section {
    padding: 100px 0px;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.carousel-heading {
    font-family: gil;
    font-weight: 400;
    font-size: 80px;
    text-align: center;
    margin-top: 50px;
    /* margin-bottom: 50px; */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    /* spacing between words */
}




.home-carousel-container {
    /* width: 100vw; */
    overflow: hidden;
    /* padding: 100px 0px !important; */
}

.home-carousel-container-2 {
    /* width: 100vw; */
    overflow: hidden;
    transform: rotate(180deg);
    /* padding: 100px 0px !important; */
}

/* Remove spacing entirely */
.slick-slider,
.slick-list,
.slick-track,
.slick-slide {
    margin: 0;
    padding: 0;
}

/* No gaps between slides */
.slick-slide {
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Full-height responsive images */
.home-carousel-slide {
    height: 40% !important;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.home-carousel-slide img {
    width: 100%;
    height: 350px;
    /* adjust height as needed */
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.home-carousel-slide h4 {
    font-size: 30px;
    color: #000;
    font-family: urb;
    text-align: center;
}

/* Full-height responsive images */
.home-carousel-slide-2 {
    height: 40% !important;
    transform: rotate(180deg);
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.home-carousel-slide-2 img {
    width: 100%;
    height: 350px;
    /* adjust height as needed */
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.home-carousel-slide-2 h4 {
    font-size: 30px;
    color: #000;
    font-family: urb;
    text-align: center;
}

.slick-arrow,
.slick-dots {
    display: none !important;
}

@media(max-width: 1400px) {
    .carousel-heading {
        font-size: 60px;
    }

}

@media(max-width: 768px) {
    .home-carousel-slide-2 {
        height: 200px !important;
    }

    .home-carousel-slide {
        height: 200px !important;
    }

    .carousel-heading {
        font-size: 50px;
        flex-direction: column;
        gap: 0;
    }
}




.gallery-office-section {
    padding: 60px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-office-container {
    max-width: 1400px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: center;
    justify-content: center;
}

.gallery-office-heading {
    font-size: 4rem;
    font-family: gil;
}

.gallery-office-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
    width: 100%;
}

.gallery-office-card {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.gallery-office-img {
    width: 100%;
    border-radius: 24px;
    object-fit: cover;
}

.gallery-office-grid h1 {
    font-size: 40px;
    text-align: center;
    font-family: urb;
    font-weight: 600;
}




/* ============================================
           CUSTOM FONTS
           ============================================ */
@font-face {
    font-family: gil;
    src: url('../fonts/gilroy/Gilroy-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: urb;
    src: url('../fonts/urbanist/Urbanist-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

.main-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}

/* ════════════════════════════════════
       LEFT — COSMIC PANEL
    ════════════════════════════════════ */
.main-contact__cosmic-panel {
    background: #070a1a;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 48px;
    min-height: 100vh;
}

/* Nebula */
.main-contact__nebula {
    position: absolute;
    border-radius: 60% 40% 70% 30%/40% 60% 30% 70%;
    filter: blur(36px);
    pointer-events: none;
    animation: nebula 8s ease-in-out infinite;
}

@keyframes nebula {

    0%,
    100% {
        border-radius: 60% 40% 70% 30%/40% 60% 30% 70%;
        opacity: .45;
    }

    50% {
        border-radius: 30% 70% 40% 60%/60% 30% 70% 40%;
        opacity: .68;
    }
}

/* Stars */
.main-contact__star {
    position: absolute;
    border-radius: 50%;
    background: #fff;
    animation: twinkle var(--d, 2s) var(--delay, 0s) infinite;
}

@keyframes twinkle {

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

    50% {
        opacity: .1;
        transform: scale(.4);
    }
}

/* Shooting star */
.main-contact__shoot {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
}

.main-contact__shoot::after {
    content: '';
    position: absolute;
    right: 2px;
    top: 0;
    width: 44px;
    height: 1px;
    background: linear-gradient(to left, white, transparent);
}

@keyframes shooting {
    0% {
        transform: translateX(0) translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateX(130px) translateY(65px);
        opacity: 0;
    }
}

/* Solar system stage */
.main-contact__solar-system {
    position: relative;
    width: 420px;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Planet rings */
.main-contact__ring-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(72deg);
    z-index: 9;
}

.main-contact__ring {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 5px solid transparent;
    border-top-color: rgba(180, 160, 220, .5);
    border-bottom-color: rgba(100, 140, 200, .4);
    border-left-color: rgba(150, 130, 210, .45);
    border-right-color: rgba(90, 130, 190, .35);
    animation: spinSlow 7s linear infinite, ringPulse 3s ease-in-out infinite;
}

.main-contact__ring2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 174px;
    height: 174px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    border-top-color: rgba(130, 170, 220, .3);
    border-bottom-color: rgba(160, 140, 210, .3);
    animation: spinReverse 11s linear infinite;
}

@keyframes spinSlow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes spinReverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes ringPulse {

    0%,
    100% {
        opacity: .35;
    }

    50% {
        opacity: .78;
    }
}

/* Main planet */
.main-contact__planet-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    animation: floatPlanet 5s ease-in-out infinite;
}

@keyframes floatPlanet {

    0%,
    100% {
        margin-top: 0;
    }

    50% {
        margin-top: -12px;
    }
}

.main-contact__planet {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #4a4580, #5a5295, #3d6b8a, #3a5f7a, #4a4580);
    animation: spinSlow 12s linear infinite, pulsePlanet 3s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

@keyframes pulsePlanet {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(100, 95, 180, .35);
    }

    50% {
        box-shadow: 0 0 44px rgba(100, 95, 180, .68);
    }
}

.main-contact__planet-stripe {
    position: absolute;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, .07);
    border-radius: 50%
}

/* Sun */
.main-contact__sun {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin: -9px 0 0 -9px;
    background: radial-gradient(circle at 38% 38%, #fff8d0, #FAC775, #EF9F27);
    transform-origin: 0 0;
    z-index: 11;
    animation: sunOrbit 6s linear infinite, sunGlow 2.5s ease-in-out infinite, sunVis 18s linear infinite;
}

@keyframes sunOrbit {
    from {
        transform: rotate(0deg) translateX(58px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(58px) rotate(-360deg);
    }
}

@keyframes sunGlow {

    0%,
    100% {
        box-shadow: 0 0 8px 2px rgba(250, 199, 117, .6)
    }

    50% {
        box-shadow: 0 0 20px 7px rgba(250, 199, 117, .95)
    }
}

@keyframes sunVis {

    0%,
    32% {
        opacity: 1
    }

    34%,
    99% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

/* Moon */
.main-contact__moon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin: -7px 0 0 -7px;
    background: radial-gradient(circle at 35% 30%, #eef2ff, #b8c4e0, #8494ba);
    transform-origin: 0 0;
    z-index: 11;
    animation: moonOrbit 4s linear infinite, moonGlow 3s ease-in-out infinite, moonVis 12s linear infinite;
}

.main-contact__moon::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #070a1a;
    top: 1px;
    left: 4px;
    opacity: .55;
}

@keyframes moonOrbit {
    from {
        transform: rotate(0deg) translateX(44px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(44px) rotate(-360deg);
    }
}

@keyframes moonGlow {

    0%,
    100% {
        box-shadow: 0 0 6px 2px rgba(200, 210, 240, .5);
    }

    50% {
        box-shadow: 0 0 16px 5px rgba(200, 210, 240, .88);
    }
}

@keyframes moonVis {

    0%,
    32% {
        opacity: 1
    }

    34%,
    99% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

/* Generic outer orbiting body */
.main-contact__orbit-anchor {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
}

.main-contact__orb {
    position: absolute;
    border-radius: 50%;
    transform-origin: 0 0;
}

@keyframes orbitA {
    from {
        transform: rotate(0deg) translateX(var(--r)) rotate(0deg)
    }

    to {
        transform: rotate(360deg) translateX(var(--r)) rotate(-360deg)
    }
}

@keyframes orbitD {
    from {
        transform: rotate(270deg) translateX(var(--r)) rotate(-270deg)
    }

    to {
        transform: rotate(630deg) translateX(var(--r)) rotate(-630deg)
    }
}

/* ════════════════════════════════════
       CTA ICON BUTTONS — orbiting
    ════════════════════════════════════ */
.main-contact__cta-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    z-index: 20;
}

.main-contact__cta-btn {
    position: absolute;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transform-origin: 0 0;
    transition: transform .2s;
    overflow: visible;
}

.main-contact__cta-btn:hover .main-contact__cta-bubble {
    transform: scale(1.18);
}

.main-contact__cta-btn:hover .main-contact__cta-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.main-contact__cta-bubble {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    transition: transform .25s;
    position: relative;
    overflow: visible;
}

.main-contact__cta-tooltip {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    background: rgba(8, 8, 24, .92);
    backdrop-filter: blur(10px);
    border: 0.5px solid rgba(255, 255, 255, .25);
    border-radius: 10px;
    padding: 6px 13px;
    white-space: nowrap;
    font-family: urb, sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    letter-spacing: .6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease, transform .4s ease;
    z-index: 50;
}

.main-contact__cta-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: rgba(255, 255, 255, .25);
}

.main-contact__cta-tooltip.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* WhatsApp orbit */
.main-contact__cta-whatsapp {
    animation: orbitWA 41s linear infinite;
}

@keyframes orbitWA {
    from {
        transform: rotate(0deg) translateX(200px) rotate(0deg)
    }

    to {
        transform: rotate(360deg) translateX(200px) rotate(-360deg)
    }
}

.main-contact__cta-whatsapp .main-contact__cta-bubble {
    background: #25D366;
    box-shadow: 0 0 0 2px rgba(37, 211, 102, .3), 0 0 22px rgba(37, 211, 102, .4);
}

.main-contact__cta-whatsapp:hover .main-contact__cta-bubble {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(37, 211, 102, .55), 0 0 32px rgba(37, 211, 102, .65);
}

/* Phone orbit */
.main-contact__cta-phone {
    animation: orbitPH 41s linear infinite;
}

@keyframes orbitPH {
    from {
        transform: rotate(120deg) translateX(200px) rotate(-120deg)
    }

    to {
        transform: rotate(480deg) translateX(200px) rotate(-480deg)
    }
}

.main-contact__cta-phone .main-contact__cta-bubble {
    background: radial-gradient(135deg, #7F77DD, #534AB7);
    box-shadow: 0 0 0 2px rgba(127, 119, 221, .25), 0 0 20px rgba(127, 119, 221, .35);
}

.main-contact__cta-phone:hover .main-contact__cta-bubble {
    box-shadow: 0 0 0 3px rgba(127, 119, 221, .5), 0 0 30px rgba(127, 119, 221, .6);
}

/* Email orbit */
.main-contact__cta-email {
    animation: orbitEM 41s linear infinite;
}

@keyframes orbitEM {
    from {
        transform: rotate(240deg) translateX(200px) rotate(-240deg)
    }

    to {
        transform: rotate(600deg) translateX(200px) rotate(-600deg)
    }
}

.main-contact__cta-email .main-contact__cta-bubble {
    background: radial-gradient(135deg, #FAC775, #D85A30);
    box-shadow: 0 0 0 2px rgba(212, 90, 48, .25), 0 0 20px rgba(212, 90, 48, .35);
}

.main-contact__cta-email:hover .main-contact__cta-bubble {
    box-shadow: 0 0 0 3px rgba(212, 90, 48, .5), 0 0 30px rgba(212, 90, 48, .6);
}

/* Faint dashed orbit path ring */
.main-contact__orbit-path {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, .06);
    z-index: 5;
    pointer-events: none;
}

/* Sparkles */
.main-contact__sparkle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
}

/* Panel text */
.main-contact__panel-text {
    position: relative;
    z-index: 20;
    text-align: center;
    margin-bottom: 16px;
}

.main-contact__panel-title {
    font-family: gil, sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 3px;
    text-transform: uppercase;
    animation: textGlow 3s ease-in-out infinite;
}

@keyframes textGlow {

    0%,
    100% {
        text-shadow: 0 0 12px rgba(127, 119, 221, .5)
    }

    50% {
        text-shadow: 0 0 24px rgba(212, 83, 126, .78), 0 0 40px rgba(93, 202, 165, .4)
    }
}

.main-contact__panel-sub {
    font-family: urb, sans-serif;
    font-size: 11px;
    font-weight: 300;
    color: rgba(175, 169, 236, .8);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-top: 10px;
    animation: subFade 4s ease-in-out infinite;
}

@keyframes subFade {

    0%,
    100% {
        opacity: .55;
        letter-spacing: 4px
    }

    50% {
        opacity: .9;
        letter-spacing: 6px
    }
}

/* ════════════════════════════════════
       RIGHT — FORM PANEL
    ════════════════════════════════════ */
.main-contact__form-panel {
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 100px 60px 0px 60px;
}

.main-contact__form-eyebrow {
    font-family: urb, sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #999;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.main-contact__form-heading {
    font-family: gil, sans-serif;
    font-size: 44px;
    font-weight: 600;
    color: #0d0d0d;
    line-height: 1.1;
    margin-bottom: 12px;
}

.main-contact__form-heading span {
    color: #534AB7;
}

.main-contact__form-desc {
    font-family: urb, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #666;
    line-height: 1.7;
    margin-bottom: 40px;
    max-width: 620px;
}

.main-contact__form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.main-contact__form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.main-contact__form-group--full {
    grid-column: 1 / -1;
}

.main-contact__form-group label {
    font-family: urb, sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #888;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.main-contact__form-group input,
.main-contact__form-group textarea {
    font-family: urb, sans-serif;
    font-size: 14px;
    color: #1a1a1a;
    background: #f8f7fc;
    border: 1px solid #e8e6f5;
    border-radius: 10px;
    padding: 13px 16px;
    outline: none;
    resize: none;
    transition: border-color .2s, box-shadow .2s;
}

.main-contact__form-group input::placeholder,
.main-contact__form-group textarea::placeholder {
    color: #bbb;
}

.main-contact__form-group input:focus,
.main-contact__form-group textarea:focus {
    border-color: #7F77DD;
    box-shadow: 0 0 0 3px rgba(127, 119, 221, .12);
}

.main-contact__form-group textarea {
    height: 120px;
}

.main-contact__submit-btn {
    margin-top: 24px;
    width: 100%;
    padding: 16px 32px;
    background: #070a1a;
    color: #fff;
    font-family: gil, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background .2s, transform .15s;
}

.main-contact__submit-btn:hover {
    background: #534AB7;
    transform: translateY(-1px);
}

.main-contact__submit-btn:active {
    transform: translateY(0);
}

.main-contact__form-footer {
    margin-top: 20px;
    font-family: urb, sans-serif;
    font-size: 12px;
    color: #bbb;
    text-align: center;
    font-style: italic;
}


@media((min-width: 1200px) and (max-width: 1600px)) {
    .main-contact__cosmic-panel {
        padding: 100px 60px 48px 60px;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .main-contact {
        display: flex;
        flex-direction: column;
    }

    .main-contact__cosmic-panel {
        min-height: 80vh;
        padding: 100px 24px 48px 24px;
    }

    .main-contact__solar-system {
        width: 320px;
        height: 320px;
    }

    .main-contact__orbit-path {
        width: 300px;
        height: 300px;
    }

    .main-contact__form-panel {
        padding: 48px 28px 0px 28px;
    }

    .main-contact__form-heading {
        font-size: 32px;
    }

    .main-contact__form-grid {
        grid-template-columns: 1fr;
    }
}


.main-map-section {
    width: 100%;
    padding: 100px 0px 0px 0px;
}

.main-map {
    height: 600px;
    width: 100%;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: gil;
    font-size: 5rem;
}

















.pool-uat-wrapper {
    font-family: 'urb', sans-serif;
    background: #0a0a0f;
    min-height: 100vh;
    padding: 40px 20px;
    position: relative;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pool-uat-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 0, 255, 0.15), transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0, 255, 255, 0.15), transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.pool-uat-container {
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* HEADING */
.pool-uat-heading {
    text-align: center;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    margin-bottom: 10px;
    background: linear-gradient(135deg, #ff0080, #ff8c00, #40e0d0);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: pool-uat-gradientShift 4s ease infinite;
    font-weight: 800;
    letter-spacing: -2px;
}

@keyframes pool-uat-gradientShift {

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

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

.pool-uat-subtitle {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin-bottom: 40px;
}

/* GRID */
.pool-uat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 40px;
}

/* CARD */
.pool-uat-animation-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 25px 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    height: 80vh;
}

.pool-uat-animation-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s;
}

.pool-uat-animation-card:hover::before {
    left: 100%;
}

.pool-uat-animation-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(255, 0, 255, 0.3);
    box-shadow:
        0 20px 60px rgba(255, 0, 255, 0.3),
        0 0 80px rgba(0, 255, 255, 0.2);
}

/* HEADER */
.pool-uat-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.pool-uat-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    background: linear-gradient(135deg, rgba(255, 0, 255, 0.2), rgba(0, 255, 255, 0.2));
}

.pool-uat-card-title {
    font-size: 1.3rem;
    color: white;
    font-weight: 800;
}

.pool-uat-card-description {
    color: rgba(255, 255, 255, 0.75);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}

/* ==================== ANIMATION CONTAINER ==================== */
.pool-uat-animation-container {
    width: 100%;
    height: 80%;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ==================== ANIMATION 1: GO/NO-GO SCANNER ==================== */
.pool-uat-shield-fortress {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.pool-uat-scan-area {
    position: relative;
    width: 320px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* APP UNDER TEST */
.pool-uat-app-under-test {
    position: absolute;
    left: 20%;
    top: 50%;
    transform: translateY(-50%);
    width: 100px;
    height: 140px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px;
    box-shadow: 0 8px 32px rgba(0, 255, 255, 0.15);
}

.pool-uat-app-under-test::before {
    content: '🌐';
    font-size: 2.5rem;
    animation: pool-uat-appIconSwitch 6s infinite;
}

@keyframes pool-uat-appIconSwitch {

    0%,
    33% {
        content: '🌐';
    }

    34%,
    66% {
        content: '📱';
    }

    67%,
    100% {
        content: '💻';
    }
}

.pool-uat-app-under-test::after {
    content: 'Web App Testing...';
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.7rem;
    animation: pool-uat-testingTypeSwitch 6s infinite;
}

@keyframes pool-uat-testingTypeSwitch {

    0%,
    33% {
        content: 'Web App Testing...';
    }

    34%,
    66% {
        content: 'Mobile Testing...';
    }

    67%,
    100% {
        content: 'Desktop Testing...';
    }
}

/* BROWSER BAR */
.pool-uat-browser-bar {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
    padding: 0 8px;
    gap: 4px;
}

.pool-uat-browser-bar::before,
.pool-uat-browser-bar::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.pool-uat-browser-bar::before {
    background: rgba(255, 100, 100, 0.6);
}

.pool-uat-browser-bar::after {
    background: rgba(100, 255, 100, 0.6);
}

/* LASER */
.pool-uat-scan-laser {
    position: absolute;
    left: 20%;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg,
            transparent,
            rgba(0, 255, 255, 0.8),
            transparent);
    animation: pool-uat-laserScan 4s ease-in-out infinite;
    filter: blur(2px);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
}

@keyframes pool-uat-laserScan {

    0%,
    100% {
        top: 0%;
        opacity: 0;
    }

    10%,
    90% {
        opacity: 1;
    }

    50% {
        top: 100%;
    }
}

/* VERIFICATION STAMP */
.pool-uat-verification-stamp {
    position: absolute;
    right: 15%;
    top: 50%;
    transform: translateY(-50%) scale(0) rotate(-12deg);
    width: 140px;
    height: 140px;
    border: 6px solid #00ff87;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: pool-uat-stampSlam 4s infinite;
    background: radial-gradient(circle, rgba(0, 255, 135, 0.2), transparent);
    box-shadow: 0 0 40px rgba(0, 255, 135, 0.6);
}

@keyframes pool-uat-stampSlam {

    0%,
    45% {
        transform: translateY(-50%) scale(0) rotate(-12deg);
        opacity: 0;
    }

    55% {
        transform: translateY(-50%) scale(1.3) rotate(5deg);
        opacity: 1;
    }

    60%,
    95% {
        transform: translateY(-50%) scale(1) rotate(-3deg);
        opacity: 1;
    }

    100% {
        transform: translateY(-50%) scale(0) rotate(-12deg);
        opacity: 0;
    }
}

.pool-uat-stamp-text {
    color: #00ff87;
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: 2px;
}

.pool-uat-stamp-icon {
    font-size: 2.5rem;
}

/* BUG PARTICLES */
.pool-uat-bug-particle {
    position: absolute;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #ff0080, #ff4757);
    border-radius: 6px;
    animation: pool-uat-bugReject 4s infinite;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.85rem;
    font-weight: bold;
}

.pool-uat-bug-particle::before {
    content: '✕';
}

@keyframes pool-uat-bugReject {

    0%,
    40% {
        left: 20%;
        top: var(--bug-start);
        opacity: 0;
    }

    45%,
    50% {
        opacity: 1;
    }

    55% {
        left: 40%;
        top: 50%;
        opacity: 1;
        transform: scale(1.2);
    }

    65% {
        left: 10%;
        top: var(--bug-end);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* nth-child EXACT MATCH */
.pool-uat-bug-particle:nth-child(1) {
    --bug-start: 20%;
    --bug-end: 10%;
    animation-delay: 0s;
}

.pool-uat-bug-particle:nth-child(2) {
    --bug-start: 40%;
    --bug-end: 30%;
    animation-delay: 0.4s;
}

.pool-uat-bug-particle:nth-child(3) {
    --bug-start: 60%;
    --bug-end: 70%;
    animation-delay: 0.8s;
}

.pool-uat-bug-particle:nth-child(4) {
    --bug-start: 80%;
    --bug-end: 90%;
    animation-delay: 1.2s;
}


/* ==================== ANIMATION 2: MULTI-DEVICE VERDICT ==================== */

.pool-uat-device-swarm {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    perspective: 1000px;
}

.pool-uat-device-orbit {
    position: relative;
    width: 280px;
    height: 280px;
}

.pool-uat-device-floating {
    position: absolute;
    width: 70px;
    height: 90px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    animation: pool-uat-orbitDevice 6s infinite;
    transform-style: preserve-3d;
    box-shadow: 0 10px 30px rgba(0, 255, 255, 0.3);
}

.pool-uat-device-floating::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, #ff0080, #00ffff, #ff8c00);
    border-radius: 12px;
    z-index: -1;
    opacity: 0;
    animation: pool-uat-borderGlow 6s infinite;
}

@keyframes pool-uat-borderGlow {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

@keyframes pool-uat-orbitDevice {

    0%,
    100% {
        transform:
            rotate(var(--start-angle)) translateX(120px) rotate(calc(-1 * var(--start-angle))) rotateY(0deg) scale(0.8);
        opacity: 0.4;
    }

    50% {
        transform:
            rotate(calc(var(--start-angle) + 180deg)) translateX(120px) rotate(calc(-1 * (var(--start-angle) + 180deg))) rotateY(360deg) scale(1.1);
        opacity: 1;
    }
}

/* EXACT nth-child mapping */
.pool-uat-device-floating:nth-child(1) {
    --start-angle: 0deg;
    animation-delay: 0s;
}

.pool-uat-device-floating:nth-child(2) {
    --start-angle: 72deg;
    animation-delay: 1.2s;
}

.pool-uat-device-floating:nth-child(3) {
    --start-angle: 144deg;
    animation-delay: 2.4s;
}

.pool-uat-device-floating:nth-child(4) {
    --start-angle: 216deg;
    animation-delay: 3.6s;
}

.pool-uat-device-floating:nth-child(5) {
    --start-angle: 288deg;
    animation-delay: 4.8s;
}

/* CENTER BADGE */
.pool-uat-verified-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #00ff87, #00d4ff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    animation: pool-uat-badgePulse 3s infinite;
    box-shadow:
        0 0 40px rgba(0, 255, 135, 0.8),
        0 0 80px rgba(0, 212, 255, 0.5);
    z-index: 10;
}

@keyframes pool-uat-badgePulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.15) rotate(180deg);
    }
}

/* ==================== ANIMATION 3: ELASTIC TESTER POOL ==================== */

.pool-uat-morphing-pool {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.pool-uat-pool-container {
    position: relative;
    width: 300px;
    height: 200px;
}

/* BLOBS */
.pool-uat-tester-blob {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff0080, #7928ca);
    animation: pool-uat-blobMorph 4s infinite;
    opacity: 0;
    box-shadow: 0 0 20px rgba(255, 0, 128, 0.6);
}

.pool-uat-tester-blob::after {
    content: '👤';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes pool-uat-blobMorph {

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

    10% {
        opacity: 1;
        transform: scale(1);
    }

    25%,
    75% {
        transform: translate(var(--tx), var(--ty)) scale(1);
        opacity: 1;
    }

    90% {
        transform: translate(var(--tx), var(--ty)) scale(0.7);
        opacity: 0.5;
    }
}

/* EXACT POSITIONS */
.pool-uat-tester-blob:nth-child(3) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    --tx: 0;
    --ty: 0;
    animation-delay: 0s;
    width: 60px;
    height: 60px;
}

.pool-uat-tester-blob:nth-child(4) {
    top: 50%;
    left: 50%;
    --tx: -80px;
    --ty: -50px;
    animation-delay: 0.3s;
}

.pool-uat-tester-blob:nth-child(5) {
    top: 50%;
    left: 50%;
    --tx: 80px;
    --ty: -50px;
    animation-delay: 0.6s;
}

.pool-uat-tester-blob:nth-child(6) {
    top: 50%;
    left: 50%;
    --tx: -110px;
    --ty: 0;
    animation-delay: 0.9s;
}

.pool-uat-tester-blob:nth-child(7) {
    top: 50%;
    left: 50%;
    --tx: 110px;
    --ty: 0;
    animation-delay: 1.2s;
}

.pool-uat-tester-blob:nth-child(8) {
    top: 50%;
    left: 50%;
    --tx: -80px;
    --ty: 50px;
    animation-delay: 1.5s;
}

.pool-uat-tester-blob:nth-child(9) {
    top: 50%;
    left: 50%;
    --tx: 80px;
    --ty: 50px;
    animation-delay: 1.8s;
}

/* WAVE */
.pool-uat-pool-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(180deg,
            rgba(0, 255, 255, 0.1),
            rgba(0, 255, 255, 0.3));
    border-radius: 50% 50% 0 0;
    animation: pool-uat-waveFlow 3s ease-in-out infinite;
}

@keyframes pool-uat-waveFlow {

    0%,
    100% {
        border-radius: 50% 50% 0 0;
        transform: scaleY(1);
    }

    50% {
        border-radius: 40% 60% 0 0;
        transform: scaleY(1.1);
    }
}

/* SCALE INDICATOR */
.pool-uat-scale-indicator {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.4);
    padding: 8px 20px;
    border-radius: 20px;
    animation: pool-uat-scaleText 6s infinite;
}

@keyframes pool-uat-scaleText {

    0%,
    15% {
        opacity: 1;
    }

    16%,
    29% {
        opacity: 0;
    }

    30%,
    54% {
        opacity: 1;
    }

    55%,
    100% {
        opacity: 0;
    }
}

.pool-uat-scale-indicator::before {
    content: '1 Tester';
    animation: pool-uat-scaleNumber 6s infinite;
}

@keyframes pool-uat-scaleNumber {

    0%,
    29% {
        content: '1 Tester';
    }

    30%,
    54% {
        content: '10 Testers';
    }

    55%,
    100% {
        content: 'CERTIFIED ✓';
    }
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 1400px) {
    .pool-uat-grid {
        gap: 20px;
    }

    .pool-uat-animation-card {
        padding: 20px 15px;
    }
}

@media (max-width: 1200px) {
    .pool-uat-grid {
        gap: 15px;
    }

    .pool-uat-card-title {
        font-size: 1.1rem;
    }

    .pool-uat-card-description {
        font-size: 0.8rem;
    }

    .pool-uat-animation-container {
        height: 240px;
    }
}

@media (max-width: 1024px) {
    .pool-uat-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .pool-uat-animation-container {
        height: 300px;
    }
}

@media (max-width: 600px) {
    .pool-uat-wrapper {
        padding: 30px 15px;
    }

    .pool-uat-animation-card {
        padding: 25px;
        height: fit-content;
    }

    .pool-uat-animation-container {
        height: 280px;
    }

    .uats-sub-section-title {
        font-size: 1.2rem;
    }

}




















/* CSS VARIABLES FOR EASY TWEAKING */
.uats-main-layout {
    --neon-lime: #ccff00;
    --neon-cyan: #00f2ff;
    --glass-white: rgba(255, 255, 255, 0.05);
    --border-white: rgba(255, 255, 255, 0.1);
    --text-white: #ffffff;
    --text-dim: #b0b0b0;

    width: 100%;
    max-width: 1200px;
    position: relative;
    z-index: 10;
    padding-top: 50px;
}

/* TYPOGRAPHY & TAGS */
.uats-content-text {
    font-size: 1rem;
    font-weight: 600;
    /* As requested */
    color: var(--text-white);
    line-height: 1.6;
    margin: 0;
}

.uats-hero-block {
    text-align: center;
    margin-bottom: 80px;
}

.uats-status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--glass-white);
    padding: 8px 20px;
    border: 1px solid var(--border-white);
    border-radius: 100px;
    margin-bottom: 25px;
}

.uats-badge-text {
    color: var(--neon-lime);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 2px;
}

.uats-pulse {
    color: var(--neon-lime);
    animation: uats-pulse-anim 2s infinite;
}

@keyframes uats-pulse-anim {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}

.uats-primary-heading {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1.1;
    color: var(--text-white);
    margin: 0;
}

.uats-accent-span {
    background: linear-gradient(to right, var(--neon-lime), var(--neon-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.uats-main-desc {
    font-size: 1.25rem;
    color: var(--text-dim);
    margin-top: 15px;
    font-weight: 600;
}

/* INTRO GLASS */
.uats-intro-glass {
    background: var(--glass-white);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-white);
    padding: 40px;
    text-align: center;
    margin-bottom: 80px;
}

.uats-pricing-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
    color: var(--neon-lime);
}

.uats-pricing-flex i {
    font-size: 1.5rem;
}

/* GRID SYSTEMS */
.uats-sub-section-title {
    font-size: 1.8rem;
    color: var(--text-white);
    margin-bottom: 40px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.uats-process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 80px;
}

.uats-step-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-white);
    padding: 40px;
    transition: 0.3s;
}

.uats-step-box:hover {
    border-color: var(--neon-lime);
    /* background: rgba(255, 255, 255, 0.04); */
}

.uats-icon-wrap {
    font-size: 2.5rem;
    color: var(--neon-lime);
    margin-bottom: 20px;
}

.uats-card-title {
    font-size: 1.4rem;
    color: var(--text-white);
    margin: 0 0 15px 0;
}

.uats-featured-box {
    background: var(--neon-lime);
    border: none;
}

.uats-featured-box .uats-card-title,
.uats-featured-box .uats-content-text,
.uats-featured-box .uats-icon-wrap {
    color: #000;
}

.uats-report-status {
    margin-top: 20px;
}

.uats-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.05);
    margin-top: 5px;
}

/* VALUE ITEMS */
.uats-value-stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 80px;
}

.uats-value-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.uats-value-item i {
    font-size: 1.8rem;
    color: var(--neon-cyan);
}

.uats-value-btn {
    padding: 15px 40px;
    /* background-color: #fff; */
    color: #ffffff;
    width: fit-content;
    position: relative;
    animation: uats-value-btn-cardSlideIn 0.6s ease forwards;
    transition: all 0.3s ease;
    will-change: transform;
}

.uats-value-btn::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(90deg, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);

    /* border-radius: 20px; */
    opacity: 0.5;
    z-index: -1;
    transition: opacity 0.3s ease;
    background-size: 400% 400%;
    animation: home-outsourcing-gradientShift 3s ease infinite;
}

.uats-value-btn:hover::before {
    opacity: 0.8;
}

.uats-value-btn:hover {
    transform: translateY(-10px) scale(1.02);
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.3);
}

@keyframes uats-value-btn-gradientShift {
    0% {
        background-position: 0% 50%;
    }

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

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

.uats-small-title {
    color: var(--text-white);
    margin: 0 0 5px 0;
    font-size: 1.1rem;
}

/* MODELS */
.uats-models-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 80px;
}

.uats-model-card {
    text-align: center;
    padding: 30px;
    border-bottom: 2px solid var(--border-white);
}

.uats-model-card i {
    font-size: 2rem;
    color: var(--neon-lime);
    margin-bottom: 15px;
}

.uats-model-name {
    color: var(--text-white);
    font-size: 1.2rem;
    margin-bottom: 10px;
}

/* TAGS */
.uats-target-block {
    text-align: center;
    margin-bottom: 80px;
}

.uats-target-label {
    display: block;
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--text-dim);
    margin-bottom: 20px;
    text-transform: uppercase;
}

.uats-tag-group {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

.uats-tag {
    background: var(--glass-white);
    border: 1px solid var(--border-white);
    padding: 8px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-white);
    font-weight: 600;
}

/* REPLACEMENT CTA STYLES */
.uats-terminal-cta {
    position: relative;
    width: 100%;
    /* background: #000; */
    background: linear-gradient(to right, #e5e5be, #003973);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    /* border: 1px solid rgba(255, 255, 255, 0.08); */
    padding: 40px 40px;
    margin-bottom: 100px;
    overflow: hidden;
    text-align: center;
    border-radius: 4px;
}

/* Background Glow Effect */
.uats-cta-glow-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: var(--neon-lime);
    filter: blur(150px);
    opacity: 0.15;
    pointer-events: none;
}

.uats-live-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(204, 255, 0, 0.1);
    padding: 6px 15px;
    border: 1px solid var(--neon-lime);
    margin-bottom: 25px;
}

.uats-dot {
    width: 6px;
    height: 6px;
    background: var(--neon-lime);
    border-radius: 50%;
    animation: uats-blink 1s infinite;
}

@keyframes uats-blink {
    50% {
        opacity: 0;
    }
}

.uats-status-text {
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 800;
    color: var(--neon-lime);
}

.uats-cta-main-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    color: #fff;
    line-height: 1;
    margin: 0 0 15px 0;
}

.uats-highlight {
    color: var(--neon-lime);
}

.uats-white-text {
    color: #fff !important;
    opacity: 0.8;
}

/* Structured Matrix Layout */
.uats-cta-feature-matrix {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    max-width: 900px;
    margin: 50px auto;
}

.uats-matrix-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: 0.3s ease;
}

.uats-matrix-item:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--neon-lime);
}

.uats-matrix-item i {
    font-size: 1.5rem;
    color: var(--neon-lime);
}

/* Premium Button Styling */
.uats-premium-btn {
    position: relative;
    background: var(--neon-lime);
    color: #000;
    border: none;
    padding: 20px 40px;
    font-weight: 900;
    font-size: 1.1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
    text-transform: uppercase;
    transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1);

    animation: neonBlink 2s infinite;
}

@keyframes neonBlink {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(204, 255, 0, 0.4),
            0 0 20px rgba(204, 255, 0, 0.3);
    }

    50% {
        box-shadow: 0 0 20px rgba(204, 255, 0, 0.8),
            0 0 40px rgba(204, 255, 0, 0.6);
    }
}

.uats-premium-btn:hover {
    background: #fff;
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(204, 255, 0, 0.2);
}

.uats-price-hint {
    font-style: italic;
    font-size: 0.9rem;
    margin-top: 10px;
}

/* Corner Accents */
.uats-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: var(--neon-lime);
    border-style: solid;
    pointer-events: none;
}

.top-left {
    top: 20px;
    left: 20px;
    border-width: 2px 0 0 2px;
}

.bottom-right {
    bottom: 20px;
    right: 20px;
    border-width: 0 2px 2px 0;
}

@media (max-width: 600px) {
    .uats-terminal-cta {
        padding: 50px 20px;
    }

    .uats-cta-feature-matrix {
        grid-template-columns: 1fr;
    }
}

/* RESPONSIVE */
@media (max-width: 768px) {

    .uats-value-stack,
    .uats-feature-grid-cta {
        grid-template-columns: 1fr;
    }

    .uats-primary-heading {
        font-size: 2.5rem;
    }

    .uats-small-title {
        font-size: 0.9rem;
    }

    .uats-content-text {
        font-size: 0.8rem;
    }

    .uats-value-item i {
        font-size: 1.3rem;
    }

    .uats-value-btn {
        width: 100%;
        text-align: center;
    }
}



.main-service-sprint-wrap {
    /* border-bottom: 1px solid var(--faint); */
    display: flex;
    justify-content: center;
}

.main-service-sprint-card {
    background: var(--sprint-bg);
    border-radius: 24px;
    padding: 56px 64px 52px;
    max-width: 1400px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.main-service-sprint-card::before {
    content: '';
    position: absolute;
    right: -60px;
    top: -60px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(13, 148, 136, 0.15);
    pointer-events: none;
}

.main-service-sprint-card::after {
    content: '';
    position: absolute;
    left: -40px;
    bottom: -40px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(225, 29, 72, 0.08);
    pointer-events: none;
}

.main-service-sprint-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    border-radius: 980px;
    padding: 7px 18px;
    margin-bottom: 28px;
    animation: main-service-pulseBadge 3s ease-in-out infinite;
}

.main-service-sprint-badge-text {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.main-service-sprint-title {
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 900;
    color: #fff;
    line-height: 1.06;
    letter-spacing: -0.04em;
    margin-bottom: 16px;
}

.main-service-sprint-title em {
    font-style: italic;
    color: var(--amber);
}

.main-service-sprint-tagline {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.main-service-sprint-description {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.75;
    letter-spacing: -0.01em;
    margin-bottom: 32px;
}

.main-service-sprint-checks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px 20px;
    margin-bottom: 36px;
}

.main-service-sprint-check {
    display: flex;
    align-items: center;
    gap: 10px;
}

.main-service-sprint-check-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-service-sprint-check-dot::after {
    content: '';
    width: 9px;
    height: 9px;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.main-service-sprint-check:nth-child(1) .main-service-sprint-check-dot {
    background: rgba(56, 189, 248, 0.25);
}

.main-service-sprint-check:nth-child(1) .main-service-sprint-check-dot::after {
    background: #38BDF8;
}

.main-service-sprint-check:nth-child(2) .main-service-sprint-check-dot {
    background: rgba(56, 189, 248, 0.25);
}

.main-service-sprint-check:nth-child(2) .main-service-sprint-check-dot::after {
    background: #38BDF8;
}

.main-service-sprint-check:nth-child(3) .main-service-sprint-check-dot {
    background: rgba(167, 139, 250, 0.25);
}

.main-service-sprint-check:nth-child(3) .main-service-sprint-check-dot::after {
    background: #A78BFA;
}

.main-service-sprint-check:nth-child(4) .main-service-sprint-check-dot {
    background: rgba(245, 158, 11, 0.25);
}

.main-service-sprint-check:nth-child(4) .main-service-sprint-check-dot::after {
    background: #FCD34D;
}

.main-service-sprint-check:nth-child(5) .main-service-sprint-check-dot {
    background: rgba(253, 164, 175, 0.25);
}

.main-service-sprint-check:nth-child(5) .main-service-sprint-check-dot::after {
    background: #FDA4AF;
}

.main-service-sprint-check-text {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: -0.01em;
}

.main-service-sprint-cta {
    width: 100%;
    background: #0D9488;
    color: #fff;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    padding: 18px;
    border-radius: 10px;
    text-align: center;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 16px;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    position: relative;
    z-index: 1;
}

.main-service-sprint-cta:hover {
    background: #0a7a6e;
    transform: scale(1.01);
}

.main-service-sprint-link {
    text-align: center;
    font-family: var(--font-body);
    font-size: 17px;
    color: rgba(255, 255, 255, 1);
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
    cursor: pointer;
    position: relative;
    z-index: 1;
    font-weight: 600;
    transition: color 0.2s;
    padding: 15px 40px;
    background-color: #228e86;
    border-radius: 10px;
    transition: all 0.4s ease;
}

.main-service-sprint-link:hover {
    background-color: #065F46;
}


/* Sprint inner layout */
.main-service-sprint-inner {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 64px;
    align-items: center;
}

.main-service-sprint-left {
    position: relative;
    z-index: 1;
}

.main-service-sprint-right {
    display: flex;
    flex-direction: column;
    gap: 28px;
    position: relative;
    z-index: 1;
}

.main-service-sprint-stats {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.main-service-sprint-stat {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 16px;
}

.main-service-sprint-stat-value {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 900;
    color: var(--amber);
    display: block;
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 4px;
}

.main-service-sprint-stat-label {
    font-family: var(--font-body);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}



@media(max-width: 768px) {
    .main-service-sprint-card {
        padding: 30px 20px;
    }

    .main-service-sprint-inner {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 0;
    }

    .main-service-sprint-description {
        font-size: 15px;
    }

    .main-service-sprint-title {
        font-size: 32px;
    }

    .main-service-sprint-checks {
        grid-template-columns: 1fr;
    }
}



.iws-wrapper {
    font-family: 'urb', sans-serif;
    background: #0a0a0f;
    min-height: 100vh;
    padding: 40px 20px;
    position: relative;
    overflow-x: hidden;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.iws-wrapper::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(168, 85, 247, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.iws-container {
    max-width: 1600px;
    height: 90vh;
    margin: 0 auto;
    padding: 16px 30px 0px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
}

.iws-wrapper h1 {
    font-family: 'gil', sans-serif;
    text-align: center;
    font-size: 4rem;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: iws-gradientFlow 6s ease infinite;
    font-weight: 800;
    letter-spacing: -2px;
}

@keyframes iws-gradientFlow {

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

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

.iws-subtitle {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    margin-bottom: 40px;
    font-weight: 400;
}

.iws-industries-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 0;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    flex: 1;
    min-height: 0;
}

.iws-industry-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 12px 12px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.iws-industry-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transition: left 0.6s;
}

.iws-industry-card:hover::before {
    left: 100%;
}

.iws-industry-card:hover {
    transform: translateY(-8px);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow:
        0 20px 60px rgba(59, 130, 246, 0.2),
        0 0 80px rgba(139, 92, 246, 0.15);
}

.iws-icon-container {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    position: relative;
}

.iws-industry-title {
    text-align: center;
    font-size: 1rem;
    color: white;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}

.iws-industry-description {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    /* display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; */
    overflow: hidden;
}

/* ==================== BANKING ANIMATION ==================== */

.iws-bank-icon {
    position: relative;
    width: 80px;
    height: 80px;
}

.iws-bank-building {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 60px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.05));
    border: 2px solid rgba(59, 130, 246, 0.4);
    border-radius: 8px 8px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
}

.iws-bank-building::before {
    content: '🏦';
    font-size: 1.8rem;
    margin-bottom: 5px;
    animation: iws-bankPulse 2s ease-in-out infinite;
}

@keyframes iws-bankPulse {

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

    50% {
        transform: scale(1.1);
    }
}

.iws-bank-pillars {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

.iws-pillar {
    width: 10px;
    height: 28px;
    background: rgba(59, 130, 246, 0.3);
    border-radius: 4px 4px 0 0;
    animation: iws-pillarGrow 2s ease-in-out infinite;
}

.iws-pillar:nth-child(1) {
    animation-delay: 0s;
}

.iws-pillar:nth-child(2) {
    animation-delay: 0.2s;
}

.iws-pillar:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes iws-pillarGrow {

    0%,
    100% {
        height: 28px;
        opacity: 0.6;
    }

    50% {
        height: 35px;
        opacity: 1;
    }
}

.iws-money-flow {
    position: absolute;
    width: 16px;
    height: 16px;
    background: rgba(34, 197, 94, 0.6);
    border-radius: 50%;
    animation: iws-moneyCirculate 3s ease-in-out infinite;
}

.iws-money-flow::before {
    content: '₹';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.65rem;
    font-weight: bold;
}

@keyframes iws-moneyCirculate {
    0% {
        top: 0%;
        left: 20%;
        opacity: 0;
    }

    25% {
        top: -10%;
        left: 50%;
        opacity: 1;
    }

    50% {
        top: 0%;
        left: 80%;
        opacity: 1;
    }

    75% {
        top: 20%;
        left: 50%;
        opacity: 1;
    }

    100% {
        top: 0%;
        left: 20%;
        opacity: 0;
    }
}

/* ==================== CAPITAL MARKETS ANIMATION ==================== */

.iws-capital-icon {
    position: relative;
    width: 80px;
    height: 80px;
}

.iws-stock-chart {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 70px;
}

.iws-chart-line {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.iws-chart-line svg {
    width: 100%;
    height: 100%;
}

.iws-chart-bar {
    position: absolute;
    bottom: 0;
    width: 8px;
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.8), rgba(34, 197, 94, 0.3));
    border-radius: 4px 4px 0 0;
    animation: iws-barGrow 2s ease-in-out infinite;
}

.iws-chart-bar:nth-child(1) {
    left: 10%;
    height: 30px;
    animation-delay: 0s;
}

.iws-chart-bar:nth-child(2) {
    left: 30%;
    height: 50px;
    animation-delay: 0.2s;
}

.iws-chart-bar:nth-child(3) {
    left: 50%;
    height: 40px;
    animation-delay: 0.4s;
}

.iws-chart-bar:nth-child(4) {
    left: 70%;
    height: 60px;
    animation-delay: 0.6s;
}

.iws-chart-bar:nth-child(5) {
    left: 90%;
    height: 45px;
    animation-delay: 0.8s;
}

@keyframes iws-barGrow {

    0%,
    100% {
        transform: scaleY(0.8);
        opacity: 0.6;
    }

    50% {
        transform: scaleY(1.2);
        opacity: 1;
    }
}

.iws-market-icon {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.4rem;
    animation: iws-floatIcon 3s ease-in-out infinite;
}

@keyframes iws-floatIcon {

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

    50% {
        transform: translateX(-50%) translateY(-10px);
    }
}

/* ==================== FINTECH ANIMATION ==================== */

.iws-fintech-icon {
    position: relative;
    width: 80px;
    height: 80px;
}

.iws-phone-fintech {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 100px;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(236, 72, 153, 0.05));
    border: 2px solid rgba(236, 72, 153, 0.4);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iws-phone-fintech::before {
    content: '📱';
    font-size: 1.4rem;
}

.iws-payment-particle {
    position: absolute;
    width: 18px;
    height: 18px;
    background: rgba(34, 197, 94, 0.7);
    border-radius: 50%;
    animation: iws-paymentFlow 3s ease-in-out infinite;
}

.iws-payment-particle::before {
    content: '₹';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
}

.iws-payment-particle:nth-child(1) {
    animation-delay: 0s;
}

.iws-payment-particle:nth-child(2) {
    animation-delay: 1s;
}

.iws-payment-particle:nth-child(3) {
    animation-delay: 2s;
}

@keyframes iws-paymentFlow {
    0% {
        top: 10%;
        left: 10%;
        opacity: 0;
        transform: scale(0);
    }

    20% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        top: 50%;
        left: 50%;
    }

    80% {
        opacity: 1;
    }

    100% {
        top: 90%;
        left: 90%;
        opacity: 0;
        transform: scale(0);
    }
}

/* ==================== INSURTECH ANIMATION ==================== */

.iws-insurtech-icon {
    position: relative;
    width: 80px;
    height: 80px;
}

.iws-shield-tech {
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 70px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(99, 102, 241, 0.1));
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    border: 2px solid rgba(99, 102, 241, 0.5);
}

.iws-shield-tech::after {
    content: '🛡️';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
}

.iws-tech-circuit {
    position: absolute;
    top: 50%;
    right: 20%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 2px solid rgba(59, 130, 246, 0.4);
    border-radius: 8px;
    animation: iws-circuitBlink 2s ease-in-out infinite;
}

.iws-tech-circuit::before {
    content: '💻';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.3rem;
}

@keyframes iws-circuitBlink {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
    }

    50% {
        box-shadow: 0 0 25px rgba(59, 130, 246, 0.7);
    }
}

.iws-data-stream {
    position: absolute;
    width: 3px;
    height: 20px;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.8), transparent);
    animation: iws-dataFlow 2s linear infinite;
}

.iws-data-stream:nth-child(1) {
    left: 45%;
    animation-delay: 0s;
}

.iws-data-stream:nth-child(2) {
    left: 52%;
    animation-delay: 0.5s;
}

.iws-data-stream:nth-child(3) {
    left: 59%;
    animation-delay: 1s;
}

@keyframes iws-dataFlow {
    0% {
        top: 20%;
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        top: 70%;
        opacity: 0;
    }
}

/* ==================== TRAVEL ANIMATION ==================== */

.iws-travel-icon {
    position: relative;
    width: 80px;
    height: 80px;
}

.iws-airplane {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    font-size: 1.6rem;
    animation: iws-flyAcross 4s ease-in-out infinite;
}

@keyframes iws-flyAcross {
    0% {
        left: -10%;
        transform: translateY(-50%) rotate(-10deg);
    }

    50% {
        left: 50%;
        transform: translateY(-60%) rotate(5deg);
    }

    100% {
        left: 110%;
        transform: translateY(-50%) rotate(10deg);
    }
}

.iws-cloud {
    position: absolute;
    width: 40px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    animation: iws-floatCloud 6s ease-in-out infinite;
}

.iws-cloud::before {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    top: -10px;
    left: 5px;
}

.iws-cloud:nth-child(1) {
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}

.iws-cloud:nth-child(2) {
    top: 60%;
    left: 60%;
    animation-delay: 2s;
}

@keyframes iws-floatCloud {

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

    50% {
        transform: translateX(20px);
    }
}

/* ==================== HEALTH INSURANCE ANIMATION ==================== */

.iws-health-icon {
    position: relative;
    width: 80px;
    height: 80px;
}

.iws-health-cross {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(239, 68, 68, 0.1));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(239, 68, 68, 0.5);
    animation: iws-heartbeat 2s ease-in-out infinite;
}

.iws-health-cross::before {
    content: '⚕️';
    font-size: 1.6rem;
}

@keyframes iws-heartbeat {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    25% {
        transform: translate(-50%, -50%) scale(1.1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1);
    }

    75% {
        transform: translate(-50%, -50%) scale(1.05);
    }
}

.iws-health-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    border: 2px solid rgba(239, 68, 68, 0.3);
    border-radius: 50%;
    animation: iws-pulseExpand 2s ease-out infinite;
}

@keyframes iws-pulseExpand {
    0% {
        width: 70px;
        height: 70px;
        opacity: 1;
    }

    100% {
        width: 110px;
        height: 110px;
        opacity: 0;
    }
}

/* ==================== LIFE INSURANCE ANIMATION ==================== */

.iws-life-icon {
    position: relative;
    width: 80px;
    height: 80px;
}

.iws-umbrella-protection {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.4rem;
    animation: iws-umbrellaFloat 3s ease-in-out infinite;
}

@keyframes iws-umbrellaFloat {

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

    50% {
        transform: translateX(-50%) translateY(-10px);
    }
}

.iws-protection-family {
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    font-size: 1.5rem;
}

.iws-family-member {
    animation: iws-familyWave 2s ease-in-out infinite;
}

.iws-family-member:nth-child(1) {
    animation-delay: 0s;
}

.iws-family-member:nth-child(2) {
    animation-delay: 0.2s;
}

.iws-family-member:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes iws-familyWave {

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

    50% {
        transform: translateY(-5px);
    }
}

.iws-rain-drop {
    position: absolute;
    width: 2px;
    height: 12px;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.6), transparent);
    animation: iws-rainFall 1.5s linear infinite;
}

.iws-rain-drop:nth-child(1) {
    left: 20%;
    animation-delay: 0s;
}

.iws-rain-drop:nth-child(2) {
    left: 35%;
    animation-delay: 0.3s;
}

.iws-rain-drop:nth-child(3) {
    left: 50%;
    animation-delay: 0.6s;
}

.iws-rain-drop:nth-child(4) {
    left: 65%;
    animation-delay: 0.9s;
}

.iws-rain-drop:nth-child(5) {
    left: 80%;
    animation-delay: 1.2s;
}

@keyframes iws-rainFall {
    0% {
        top: 0%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

/* ==================== MUTUAL FUNDS ANIMATION ==================== */

.iws-mutual-funds-icon {
    position: relative;
    width: 80px;
    height: 80px;
}

.iws-portfolio-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.4rem;
    animation: iws-portfolioGrow 3s ease-in-out infinite;
}

@keyframes iws-portfolioGrow {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.15);
    }
}

.iws-fund-circle {
    position: absolute;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 3px solid rgba(34, 197, 94, 0.6);
    background: rgba(34, 197, 94, 0.1);
    animation: iws-fundOrbit 4s linear infinite;
}

.iws-fund-circle::before {
    content: '₹';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(34, 197, 94, 0.9);
    font-weight: bold;
    font-size: 0.9rem;
}

.iws-fund-circle:nth-child(2) {
    animation-delay: 0s;
}

.iws-fund-circle:nth-child(3) {
    animation-delay: 1.3s;
}

.iws-fund-circle:nth-child(4) {
    animation-delay: 2.6s;
}

@keyframes iws-fundOrbit {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(0deg) translateX(50px) rotate(0deg);
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(360deg) translateX(50px) rotate(-360deg);
        opacity: 0.5;
    }
}

.iws-growth-arrow {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 25px solid rgba(34, 197, 94, 0.6);
    animation: iws-arrowGrow 2s ease-in-out infinite;
}

@keyframes iws-arrowGrow {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
        opacity: 0.6;
    }

    50% {
        transform: translateX(-50%) translateY(-10px);
        opacity: 1;
    }
}

/* ==================== NBFC ANIMATION ==================== */

.iws-nbfc-icon {
    position: relative;
    width: 80px;
    height: 80px;
}

.iws-nbfc-building {
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.05));
    border: 2px solid rgba(245, 158, 11, 0.4);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iws-nbfc-building::before {
    content: '🏢';
    font-size: 1.6rem;
}

.iws-loan-flow {
    position: absolute;
    width: 25px;
    height: 25px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.7), rgba(34, 197, 94, 0.3));
    border-radius: 50%;
    animation: iws-loanDistribute 3s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: white;
    font-weight: bold;
}

.iws-loan-flow::before {
    content: '₹';
}

.iws-loan-flow:nth-child(1) {
    animation-delay: 0s;
}

.iws-loan-flow:nth-child(2) {
    animation-delay: 1s;
}

.iws-loan-flow:nth-child(3) {
    animation-delay: 2s;
}

@keyframes iws-loanDistribute {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    80% {
        opacity: 1;
    }

    100% {
        top: 10%;
        left: 20%;
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }
}

.iws-loan-flow:nth-child(2) {
    animation-name: iws-loanDistribute2;
}

@keyframes iws-loanDistribute2 {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    80% {
        opacity: 1;
    }

    100% {
        top: 10%;
        left: 80%;
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }
}

.iws-loan-flow:nth-child(3) {
    animation-name: iws-loanDistribute3;
}

@keyframes iws-loanDistribute3 {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    80% {
        opacity: 1;
    }

    100% {
        top: 80%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }
}

.iws-approval-stamp {
    position: absolute;
    top: 15%;
    right: 15%;
    width: 35px;
    height: 35px;
    background: rgba(34, 197, 94, 0.3);
    border: 3px solid rgba(34, 197, 94, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(34, 197, 94, 1);
    font-size: 1.2rem;
    font-weight: bold;
    animation: iws-stampBounce 2s ease-in-out infinite;
}

@keyframes iws-stampBounce {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
        box-shadow: 0 0 15px rgba(34, 197, 94, 0.3);
    }

    50% {
        transform: scale(1.2) rotate(10deg);
        box-shadow: 0 0 25px rgba(34, 197, 94, 0.6);
    }
}

/* ==================== INVESTMENT BANKING ANIMATION ==================== */

.iws-investment-banking-icon {
    position: relative;
    width: 80px;
    height: 80px;
}

.iws-ib-briefcase {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 45px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.1));
    border: 2px solid rgba(59, 130, 246, 0.5);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: iws-briefcasePulse 3s ease-in-out infinite;
}

.iws-ib-briefcase::before {
    content: '💼';
    font-size: 1.6rem;
}

.iws-ib-briefcase::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 6px;
    background: rgba(59, 130, 246, 0.4);
    border-radius: 3px 3px 0 0;
}

@keyframes iws-briefcasePulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.05);
    }
}

.iws-deal-flow {
    position: absolute;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.8), rgba(16, 185, 129, 0.4));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: white;
    font-weight: bold;
    animation: iws-dealCirculate 4s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.iws-deal-flow::before {
    content: '$';
}

.iws-deal-flow:nth-child(1) {
    animation-delay: 0s;
}

.iws-deal-flow:nth-child(2) {
    animation-delay: 1.3s;
}

.iws-deal-flow:nth-child(3) {
    animation-delay: 2.6s;
}

@keyframes iws-dealCirculate {
    0% {
        top: 20%;
        left: 20%;
        opacity: 0;
        transform: scale(0);
    }

    15% {
        opacity: 1;
        transform: scale(1);
    }

    35% {
        top: 50%;
        left: 50%;
    }

    50% {
        opacity: 1;
    }

    65% {
        top: 80%;
        left: 80%;
    }

    85% {
        opacity: 0.5;
    }

    100% {
        top: 20%;
        left: 20%;
        opacity: 0;
        transform: scale(0);
    }
}

.iws-trend-line {
    position: absolute;
    bottom: 10%;
    left: 15%;
    width: 70%;
    height: 2px;
    background: transparent;
    overflow: visible;
}

.iws-trend-line::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,
            transparent,
            rgba(16, 185, 129, 0.6) 30%,
            rgba(16, 185, 129, 0.8) 60%,
            transparent);
    animation: iws-trendGrow 3s ease-in-out infinite;
}

.iws-trend-line::after {
    content: '📈';
    position: absolute;
    bottom: -10px;
    right: -5px;
    font-size: 0.9rem;
    animation: iws-trendFloat 3s ease-in-out infinite;
}

@keyframes iws-trendGrow {

    0%,
    100% {
        transform: scaleX(0.5);
        opacity: 0.5;
    }

    50% {
        transform: scaleX(1);
        opacity: 1;
    }
}

@keyframes iws-trendFloat {

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

    50% {
        transform: translateY(-5px) scale(1.1);
    }
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 1400px) {
    .iws-industries-grid {
        gap: 15px;
    }

    .iws-industry-card {
        padding: 18px 12px;
    }

    .iws-industry-description {
        font-size: 0.7rem;
    }
}

@media (max-width: 1200px) {
    .iws-industries-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
    }

    .iws-industry-card {
        padding: 15px 10px;
    }

    .iws-icon-container {
        height: 85px;
    }

    .iws-industry-title {
        font-size: 0.95rem;
    }

    .iws-industry-description {
        font-size: 0.7rem;
        -webkit-line-clamp: 2;
    }
}

@media (max-width: 1024px) {
    .iws-industries-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .iws-industries-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .iws-industry-card {
        padding: 15px 10px;
    }

    .iws-icon-container {
        height: 70px;
    }

    .iws-industry-title {
        font-size: 0.85rem;
    }

    .iws-industry-description {
        font-size: 0.7rem;
        -webkit-line-clamp: 2;
    }
}

@media (max-width: 768px) {
    .iws-container {
        padding: 0;
        height: fit-content;
    }

    .iws-industries-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .iws-industry-card {
        height: 300px;
    }

    .iws-wrapper h1 {
        font-size: 2.2rem;
    }
}







.main-about {
    max-width: 1300px;
    margin: 0 auto;
    /* padding: 4rem 2rem; */
    /* background-color: #fff; */
}

/* ===== HERO SECTION ===== */
.main-about__hero {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    padding: 3rem 2rem 0rem 2rem;
    /* background: var(--bg); */
    font-family: var(--font-body);
    color: var(--text);
    /* background-color: #fff; */
}

.main-about__hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--c-teal-bg), transparent);
    border-radius: 50%;
    z-index: 0;
}

.main-about__hero-title {
    font-family: var(--font-display);
    font-size: 4rem;
    color: #000;
    margin-bottom: 1rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.main-about__hero-subtitle {
    font-size: 1.2rem;
    color: #656565;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.8;
    position: relative;
    z-index: 1;
}

/* ===== SECTION 1: TEXT + IMAGE (LEFT-RIGHT) ===== */
.main-about__section-1 {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 0rem;
    padding: 3rem 10rem 3rem 10rem;
}

.main-about__section-1__text {
    order: 1;
}


.about-our-story-p {
    color: #515151;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    line-height: 1.8;
}


.main-about__section-1__image {
    order: 2;
    background: linear-gradient(135deg, var(--c-blue-bg), var(--c-teal-bg));
    border-radius: 16px;
    height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    border: 2px solid var(--c-blue-b);
}

.main-about__section-1__image img {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
}

@media((min-width: 1200px) and (max-width: 1600px)) {
    .main-about__section-1 {
        padding: 3rem 6rem 3rem 6rem;
    }
}


@media(max-width: 768px) {
    .main-about__section-1 {
        padding: 1.5rem 2rem;
    }

    .about-our-story-p {
        font-size: 0.9rem;
        line-height: 1.6;

    }
}

/* ===== SECTION 2: CARDS GRID ===== */
.main-about__section-2 {
    /* margin-bottom: 4rem; */
    background: linear-gradient(180deg, rgba(99, 179, 237, 0.04), transparent);
    padding: 4rem 2rem;
    border-radius: 12px;
}

.main-about__section-2__title {
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: #000;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.main-about__section-2__subtitle {
    color: #4d4d4d;
    font-size: 1.1rem;
    font-family: var(--font-body);
    margin-bottom: 3rem;
}

.main-about__cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
}

.main-about__card {
    background: var(--white);
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 2rem;
    transition: all 0.3s ease;
}

.main-about__card:nth-child(1) {
    border-top: 4px solid var(--c-blue);
}

.main-about__card:nth-child(2) {
    border-top: 4px solid var(--c-purple);
}

.main-about__card:nth-child(3) {
    border-top: 4px solid var(--c-amber);
}

.main-about__card:nth-child(4) {
    border-top: 4px solid var(--c-pink);
}

.main-about__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.main-about__card-title {
    font-family: var(--font-display);
    font-weight: 600;
    margin-bottom: 0.75rem;
    font-size: 1.2rem;
    color: #000;
}

.main-about__card-text {
    color: #555555;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.7;
    font-family: var(--font-body);
}

/* ===== SECTION 3: CENTERED CONTENT + STAT ===== */
.main-about__section-3 {
    /* margin-bottom: 8rem; */
    text-align: center;
    padding: 0rem 2rem 2rem 2rem;
}

.main-about__section-3__title {
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: #000;
    margin-bottom: 2rem;
    font-weight: 700;
}

.main-about__section-3__content {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.main-about__section-3__text {
    text-align: left;
}

.main-about__section-3__text p {
    color: #555555;
    font-size: 1rem;
    margin-bottom: 1.5rem;
    line-height: 1.8;
    font-family: var(--font-body);
    font-weight: 600;
}

.main-about__stat-large {
    background: linear-gradient(135deg, var(--c-pink-bg), var(--c-amber-bg));
    border: 2px solid var(--c-pink-b);
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
}

.main-about__stat-large__value {
    font-family: var(--font-display);
    font-size: 4rem;
    color: var(--c-pink);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.main-about__stat-large__label {
    color: var(--text);
    font-size: 1rem;
    font-weight: 500;
}

/* ===== SECTION 4: IMAGE + FEATURES (RIGHT-LEFT) ===== */
.main-about__section-4 {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 8rem;
    padding: 3rem 0;
}

.main-about__section-4__image {
    background: linear-gradient(135deg, var(--c-purple-bg), var(--c-indigo-bg));
    border-radius: 16px;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    border: 2px solid var(--c-purple-b);
}

.main-about__section-4__features {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.main-about__section-4__title {
    font-family: var(--font-display);
    font-size: 2.2rem;
    color: #000;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.main-about__feature-block {
    background: linear-gradient(135deg, var(--c-green-bg), transparent);
    border-left: 4px solid var(--c-green);
    padding: 1.5rem;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.main-about__feature-block:nth-child(odd) {
    background: linear-gradient(135deg, var(--c-teal-bg), transparent);
    border-left-color: var(--c-teal);
}

.main-about__feature-block:hover {
    transform: translateX(8px);
}

.main-about__feature-block__title {
    font-family: var(--font-display);
    font-weight: 600;
    color: #000;
    margin-bottom: 0.5rem;
}

.main-about__feature-block__text {
    color: #000;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.95rem;
}

/* ===== SECTION 5: CTA ===== */
.main-about-cta-width {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 0rem;
}

.main-about__cta {
    background: linear-gradient(135deg, var(--c-teal-bg) 0%, var(--c-blue-bg) 100%);
    border: 2px solid var(--teal);
    border-radius: 16px;
    padding: 4rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    max-width: 1300px;
    width: 100%;
}

.main-about__cta::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 201, 184, 0.2), transparent);
    border-radius: 50%;
}

.main-about__cta-title {
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: #000;
    margin-bottom: 1rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.main-about__cta-text {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
    font-family: var(--font-body);
    font-weight: 600;
}

.main-about__cta-button {
    display: inline-block;
    background: var(--teal);
    color: var(--white);
    padding: 1.2rem 3rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    font-size: 1rem;
    position: relative;
    z-index: 1;
}

.main-about__cta-button:hover {
    background: var(--teal2);
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0, 201, 184, 0.3);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {

    .main-about__section-1,
    .main-about__section-4 {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .main-about__section-3__content {
        grid-template-columns: 1fr;
    }

    .main-about__hero-title {
        font-size: 2.2rem;
    }

    .main-about__section-1__image,
    .main-about__section-4__image {
        height: 300px;
    }

    .main-about__cta {
        padding: 2rem;
    }

    .main-about__cta-title {
        font-size: 1.6rem;
    }

    .main-about__hero-subtitle {
        font-size: 1rem;
        font-weight: 600;
    }
}


.custom-click-text {
    position: absolute;
    bottom: 0;
    color: #444445;
    font-family: var(--font-body);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
}