/* =========================================================
    AEROVEX - HOME PAGE
    HERO SECTION
    Complete Responsive CSS
    ========================================================= */


    /* =========================================================
    HERO
    ========================================================= */

    .hero {
        position: relative;

        width: 100%;
        overflow: hidden;

        padding: 90px 0 100px;

        background:
            radial-gradient(circle at 85% 15%,
                rgba(86, 184, 255, 0.32) 0%,
                rgba(86, 184, 255, 0.12) 25%,
                transparent 52%),
            radial-gradient(circle at 8% 85%,
                rgba(11, 110, 232, 0.16) 0%,
                rgba(11, 110, 232, 0.05) 30%,
                transparent 55%),
            linear-gradient(135deg,
                #f5fbff 0%,
                #dff4ff 38%,
                #eaf8ff 65%,
                #ffffff 100%);
    }


    /* =========================================================
    CONTAINER
    ========================================================= */

    .hero>.container {
        width: min(1320px, 92%);
        margin: 0 auto;

        position: relative;
        z-index: 5;
    }


    /* =========================================================
    BACKGROUND DECORATION
    ========================================================= */

    .hero-bg-circle {
        position: absolute;

        border-radius: 50%;

        pointer-events: none;

        z-index: 0;
    }


    /* Top-right */

    .hero-bg-circle-1 {
        width: 520px;
        height: 520px;

        top: -270px;
        right: -180px;

        background:
            radial-gradient(circle,
                rgba(86, 184, 255, 0.35),
                rgba(86, 184, 255, 0.08) 55%,
                transparent 72%);

        filter: blur(8px);

        animation: heroCircleOne 12s ease-in-out infinite;
    }


    /* Bottom-left */

    .hero-bg-circle-2 {
        width: 430px;
        height: 430px;

        left: -230px;
        bottom: -250px;

        background:
            radial-gradient(circle,
                rgba(11, 110, 232, 0.20),
                rgba(11, 110, 232, 0.05) 55%,
                transparent 72%);

        filter: blur(10px);

        animation: heroCircleTwo 14s ease-in-out infinite;
    }


    /* =========================================================
    HERO WRAPPER
    ========================================================= */

    .hero-wrapper {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr) minmax(420px, 0.9fr);

        align-items: center;

        gap: 70px;

        min-height: 610px;
    }


    /* =========================================================
    HERO CONTENT
    ========================================================= */

    .hero-content {
        position: relative;

        z-index: 10;

        max-width: 680px;
        min-height: 460px;
    }


    /* =========================================================
    BADGE
    ========================================================= */

    .hero-badge {
        display: inline-flex;

        align-items: center;

        gap: 9px;

        padding: 11px 18px;

        margin-bottom: 23px;

        border: 1px solid rgba(11, 110, 232, 0.10);

        border-radius: 50px;

        background: rgba(255, 255, 255, 0.78);

        color: #0b6ee8;

        font-family: "Poppins", sans-serif;

        font-size: 14px;

        font-weight: 600;

        line-height: 1;

        box-shadow:
            0 8px 25px rgba(11, 110, 232, 0.08);

        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);

        animation:
            heroFadeUp 0.8s ease both;
    }


    .hero-badge-icon {
        display: flex;

        align-items: center;
        justify-content: center;

        font-size: 16px;
    }


    /* =========================================================
    HEADING
    ========================================================= */

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

        margin: 0 0 22px;

        color: #061a3a;

        font-family: "Poppins", sans-serif;

        font-size: clamp(42px, 5vw, 68px);

        font-weight: 700;

        line-height: 1.08;

        letter-spacing: -1.8px;

        animation:
            heroFadeUp 0.8s 0.12s ease both;
    }


    .hero-content h1 span {
        position: relative;

        display: inline-block;

        color: #0b6ee8;
    }


    /* Blue underline */

    .hero-content h1 span::after {
        content: "";

        position: absolute;

        left: 2px;
        right: 2px;

        bottom: -5px;

        height: 4px;

        border-radius: 20px;

        background: rgba(86, 184, 255, 0.35);

        transform: scaleX(0);

        transform-origin: left;

        animation:
            heroUnderline 0.8s 0.8s ease forwards;
    }


    /* =========================================================
    DESCRIPTION
    ========================================================= */

    .hero-content>p {
        max-width: 600px;

        margin: 0 0 34px;

        color: #5f6f82;

        font-family: "Inter", sans-serif;

        font-size: 17px;

        font-weight: 400;

        line-height: 1.8;

        animation:
            heroFadeUp 0.8s 0.24s ease both;
    }


    /* =========================================================
    BUTTON AREA
    ========================================================= */

    .hero-buttons {
        display: flex;

        align-items: center;

        gap: 14px;

        margin-bottom: 32px;

        animation:
            heroFadeUp 0.8s 0.36s ease both;
    }


    /* =========================================================
    COMMON BUTTON
    ========================================================= */

    .hero-btn {
        min-height: 54px;

        padding: 0 25px;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        gap: 10px;

        border-radius: 12px;

        font-family: "Poppins", sans-serif;

        font-size: 15px;

        font-weight: 600;

        text-decoration: none;

        white-space: nowrap;

        transition:
            transform 0.3s ease,
            box-shadow 0.3s ease,
            background 0.3s ease,
            border-color 0.3s ease,
            color 0.3s ease;
    }


    /* =========================================================
    PRIMARY BUTTON
    ========================================================= */

    .hero-btn-primary {
        color: #ffffff;

        background:
            linear-gradient(135deg,
                #0b6ee8 0%,
                #0754b8 100%);

        box-shadow:
            0 12px 28px rgba(11, 110, 232, 0.25);
    }


    .hero-btn-primary:hover {
        color: #ffffff;

        transform: translateY(-3px);

        box-shadow:
            0 18px 38px rgba(11, 110, 232, 0.34);
    }


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


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


    /* =========================================================
    SECONDARY BUTTON
    ========================================================= */

    .hero-btn-secondary {
        color: #061a3a;

        background: rgba(255, 255, 255, 0.82);

        border: 1.5px solid #cfe2f3;

        box-shadow:
            0 8px 22px rgba(0, 0, 0, 0.04);
    }


    .hero-btn-secondary:hover {
        color: #0b6ee8;

        border-color: #0b6ee8;

        transform: translateY(-3px);

        box-shadow:
            0 14px 28px rgba(11, 110, 232, 0.12);
    }


    .hero-btn-secondary i {
        color: #0b6ee8;
    }


    /* =========================================================
    HERO FEATURES
    ========================================================= */

    .hero-features {
        display: flex;

        align-items: center;

        flex-wrap: wrap;

        gap: 10px 20px;

        animation:
            heroFadeUp 0.8s 0.48s ease both;
    }


    .hero-feature {
        display: inline-flex;

        align-items: center;

        gap: 7px;

        color: #344054;

        font-family: "Inter", sans-serif;

        font-size: 13px;

        font-weight: 500;

        white-space: nowrap;
    }


    .hero-feature i {
        color: #0b6ee8;

        font-size: 14px;
    }


    /* =========================================================
    HERO VISUAL
    ========================================================= */

    .hero-visual {
        position: relative;

        width: 100%;

        min-height: 610px;

        display: flex;

        align-items: center;

        justify-content: center;

        isolation: isolate;
    }


    /* =========================================================
    IMAGE GLOW
    ========================================================= */

    .hero-image-glow {
        position: absolute;

        width: 470px;
        height: 470px;

        border-radius: 50%;

        background:
            radial-gradient(circle,
                rgba(86, 184, 255, 0.38) 0%,
                rgba(11, 110, 232, 0.12) 42%,
                transparent 72%);

        filter: blur(18px);

        z-index: 0;

        animation:
            heroGlow 5s ease-in-out infinite;
    }


    /* =========================================================
    HERO IMAGE
    ========================================================= */

    .hero-image {
        position: relative;

        width: 100%;

        display: flex;

        align-items: center;
        justify-content: center;

        z-index: 3;
    }


    .hero-image img {
        display: block;

        width: min(100%, 560px);

        max-height: 610px;

        height: auto;

        object-fit: contain;

        position: relative;

        z-index: 3;

        filter:
            drop-shadow(0 25px 35px rgba(6, 26, 58, 0.12));

        /*
        IMPORTANT:
        Only CSS floating animation.
        No hover transform.
        No mouse parallax.
        */

        animation:
            heroImageFloat 5s ease-in-out infinite;

        will-change: transform;
    }


    /* =========================================================
    IMAGE FLOOR SHADOW
    ========================================================= */

    .hero-visual::after {
        content: "";

        position: absolute;

        width: 260px;
        height: 28px;

        left: 50%;
        bottom: 45px;

        transform: translateX(-50%);

        border-radius: 50%;

        background:
            rgba(6, 26, 58, 0.10);

        filter: blur(18px);

        z-index: 0;

        animation:
            heroShadow 5s ease-in-out infinite;
    }


    /* =========================================================
    STAT CARDS
    ========================================================= */

    .hero-stat {
        position: absolute;

        display: flex;

        align-items: center;

        gap: 12px;

        min-width: 190px;

        padding: 14px 17px;

        border: 1px solid rgba(255, 255, 255, 0.80);

        border-radius: 17px;

        background:
            rgba(255, 255, 255, 0.90);

        box-shadow:
            0 18px 45px rgba(6, 26, 58, 0.10);

        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);

        z-index: 10;

        transition:
            box-shadow 0.3s ease,
            border-color 0.3s ease;
    }


    /* Card hover - no transform */

    .hero-stat:hover {
        border-color:
            rgba(11, 110, 232, 0.20);

        box-shadow:
            0 22px 50px rgba(11, 110, 232, 0.15);
    }


    /* =========================================================
    CARD ICON
    ========================================================= */

    .hero-stat-icon {
        width: 48px;
        height: 48px;

        flex: 0 0 48px;

        display: flex;

        align-items: center;
        justify-content: center;

        border-radius: 13px;

        color: #ffffff;

        background:
            linear-gradient(135deg,
                #0b6ee8,
                #062c63);

        font-size: 18px;

        box-shadow:
            0 8px 18px rgba(11, 110, 232, 0.20);
    }


    /* =========================================================
    CARD CONTENT
    ========================================================= */

    .hero-stat-content {
        display: flex;

        flex-direction: column;

        gap: 2px;
    }


    .hero-stat-content strong {
        color: #061a3a;

        font-family: "Poppins", sans-serif;

        font-size: 20px;

        font-weight: 700;

        line-height: 1.2;
    }


    .hero-stat-content span {
        color: #667085;

        font-family: "Inter", sans-serif;

        font-size: 12px;

        font-weight: 500;

        line-height: 1.4;
    }


    /* =========================================================
    DESKTOP CARD POSITIONS
    ========================================================= */

    .hero-stat-rating {
        top: 70px;
        left: -5px;

        animation:
            heroCardFloat 4s ease-in-out infinite;
    }


    .hero-stat-services {
        top: 265px;
        right: -30px;

        animation:
            heroCardFloat 4s 0.8s ease-in-out infinite;
    }


    .hero-stat-experience {
        bottom: 55px;
        left: 15px;

        animation:
            heroCardFloat 4s 1.6s ease-in-out infinite;
    }


    /* =========================================================
    ANIMATIONS
    ========================================================= */

    @keyframes heroFadeUp {

        from {
            opacity: 0;

            transform: translateY(25px);
        }

        to {
            opacity: 1;

            transform: translateY(0);
        }

    }


    @keyframes heroUnderline {

        from {
            transform: scaleX(0);
        }

        to {
            transform: scaleX(1);
        }

    }


    @keyframes heroImageFloat {

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

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

    }


    @keyframes heroCardFloat {

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

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

    }


    @keyframes heroGlow {

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

            opacity: 0.75;
        }

        50% {
            transform: scale(1.08);

            opacity: 1;
        }

    }


    @keyframes heroShadow {

        0%,
        100% {
            transform:
                translateX(-50%) scaleX(1);

            opacity: 0.65;
        }

        50% {
            transform:
                translateX(-50%) scaleX(0.82);

            opacity: 0.35;
        }

    }


    @keyframes heroCircleOne {

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

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

    }


    @keyframes heroCircleTwo {

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

        50% {
            transform:
                translate3d(25px, -20px, 0);
        }

    }


    /* =========================================================
    LARGE LAPTOP
    ========================================================= */

    @media (max-width: 1200px) {

        .hero {
            padding: 75px 0 85px;
        }


        .hero-wrapper {
            grid-template-columns:
                minmax(0, 1fr) minmax(360px, 0.85fr);

            gap: 45px;
        }


        .hero-content h1 {
            font-size:
                clamp(40px, 5vw, 58px);
        }


        .hero-visual {
            min-height: 540px;
        }


        .hero-image img {
            max-width: 480px;
        }


        .hero-image-glow {
            width: 390px;
            height: 390px;
        }


        .hero-stat {
            min-width: 175px;

            padding: 12px 14px;
        }


        .hero-stat-rating {
            left: -10px;
        }


        .hero-stat-services {
            right: -10px;
        }


        .hero-stat-experience {
            left: 0;
        }

    }


    /* =========================================================
    TABLET
    ========================================================= */

    @media (max-width: 991px) {

        .hero {
            padding: 65px 0 75px;
        }


        .hero-wrapper {
            grid-template-columns: 1fr;

            gap: 50px;

            text-align: center;
        }


        .hero-content {
            max-width: 720px;

            margin: 0 auto;
        }


        .hero-content h1 {
            max-width: 700px;

            margin-left: auto;
            margin-right: auto;

            font-size:
                clamp(38px, 6vw, 54px);
        }


        .hero-content>p {
            margin-left: auto;
            margin-right: auto;
        }


        .hero-buttons {
            justify-content: center;
        }


        .hero-features {
            justify-content: center;
        }


        .hero-visual {
            width: min(100%, 580px);

            min-height: 500px;

            margin: 0 auto;
        }


        .hero-image img {
            max-width: 430px;
        }


        .hero-image-glow {
            width: 350px;
            height: 350px;
        }


        .hero-stat-rating {
            top: 50px;
            left: 0;
        }


        .hero-stat-services {
            top: 220px;
            right: 0;
        }


        .hero-stat-experience {
            bottom: 30px;
            left: 15px;
        }

    }


    /* =========================================================
    MOBILE
    ========================================================= */

    @media (max-width: 767px) {

        .hero {
            padding: 45px 0 60px;
        }


        .hero>.container {
            width:
                calc(100% - 30px);
        }


        .hero-wrapper {
            display: flex;

            flex-direction: column;

            gap: 35px;

            min-height: auto;
        }


        /* CONTENT FIRST */

        .hero-content {
            order: 1;

            width: 100%;

            text-align: center;
        }


        .hero-badge {
            padding: 9px 15px;

            margin-bottom: 19px;

            font-size: 12px;
        }


        .hero-content h1 {
            margin-bottom: 18px;

            font-size:
                clamp(32px, 9vw, 42px);

            line-height: 1.12;

            letter-spacing: -0.8px;
        }


        .hero-content h1 span::after {
            height: 3px;

            bottom: -2px;
        }


        .hero-content>p {
            margin-bottom: 27px;

            font-size: 15px;

            line-height: 1.7;
        }


        /* BUTTONS */

        .hero-buttons {
            width: 100%;

            flex-direction: column;

            gap: 11px;

            margin-bottom: 25px;
        }


        .hero-btn {
            width: 100%;

            min-height: 52px;
        }


        /* FEATURES */

        .hero-features {
            justify-content: center;

            gap: 9px 14px;
        }


        .hero-feature {
            font-size: 12px;
        }


        /* VISUAL SECOND */

        .hero-visual {
            order: 2;

            width: 100%;

            min-height: auto;

            padding-top: 5px;

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: flex-start;
        }


        .hero-image-glow {
            width: 270px;
            height: 270px;

            top: 45px;
        }


        .hero-image {
            width: 100%;

            margin-bottom: 18px;
        }


        .hero-image img {
            width:
                min(100%, 340px);

            max-height: none;
        }


        /* SHADOW */

        .hero-visual::after {
            bottom: auto;

            top: 300px;

            width: 190px;
        }


        /* MOBILE CARDS */

        .hero-stat {
            position: relative;

            top: auto !important;
            right: auto !important;
            bottom: auto !important;
            left: auto !important;

            width:
                min(100%, 310px);

            min-width: 0;

            margin: 7px auto;

            animation:
                heroCardFloatMobile 4s ease-in-out infinite;
        }


        .hero-stat-services {
            animation-delay: 0.5s;
        }


        .hero-stat-experience {
            animation-delay: 1s;
        }

    }


    /* =========================================================
    SMALL MOBILE
    ========================================================= */

    @media (max-width: 480px) {

        .hero {
            padding: 35px 0 50px;
        }


        .hero>.container {
            width:
                calc(100% - 24px);
        }


        .hero-wrapper {
            gap: 28px;
        }


        .hero-badge {
            font-size: 11px;

            padding: 9px 13px;
        }


        .hero-content h1 {
            font-size: 31px;

            line-height: 1.14;
        }


        .hero-content>p {
            font-size: 14px;

            line-height: 1.65;
        }


        .hero-features {
            flex-direction: column;

            align-items: center;

            gap: 8px;
        }


        .hero-feature {
            font-size: 12px;
        }


        .hero-image {
            margin-bottom: 14px;
        }


        .hero-image img {
            width: 290px;

            max-width: 100%;
        }


        .hero-image-glow {
            width: 230px;
            height: 230px;

            top: 30px;
        }


        .hero-stat {
            width:
                min(100%, 285px);

            padding: 12px 14px;
        }


        .hero-stat-icon {
            width: 43px;
            height: 43px;

            flex-basis: 43px;

            border-radius: 11px;

            font-size: 16px;
        }


        .hero-stat-content strong {
            font-size: 18px;
        }


        .hero-stat-content span {
            font-size: 11px;
        }

    }


    /* =========================================================
    VERY SMALL MOBILE
    ========================================================= */

    @media (max-width: 360px) {

        .hero-content h1 {
            font-size: 28px;
        }


        .hero-badge {
            font-size: 10px;
        }


        .hero-content>p {
            font-size: 13px;
        }


        .hero-image img {
            width: 260px;
        }


        .hero-stat {
            width: 100%;
        }

    }


    /* =========================================================
    MOBILE CARD ANIMATION
    ========================================================= */

    @keyframes heroCardFloatMobile {

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

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

    }


    /* =========================================================
    REDUCED MOTION
    ========================================================= */

    @media (prefers-reduced-motion: reduce) {

        .hero *,
        .hero::before,
        .hero::after {
            animation: none !important;

            transition: none !important;
        }

    }



    /* =====================================================
   TRUST / STATS SECTION
===================================================== */

    .trust-section {
        position: relative;

        padding: var(--section-padding) 0;

        background:
            linear-gradient(180deg,
                #F5FBFF 0%,
                #FFFFFF 100%);

        overflow: hidden;
    }


    /* Heading */

    .trust-heading {
        max-width: 650px;

        margin: 0 auto 40px;

        text-align: center;
    }


    .section-tag {
        display: inline-flex;

        align-items: center;

        gap: 7px;

        margin-bottom: 12px;

        padding: 6px 12px;

        border-radius: 50px;

        background: rgba(11, 110, 232, 0.08);

        color: var(--primary-blue);

        font-family: var(--font-heading);

        font-size: var(--fs-sm);

        font-weight: 600;
    }


    .section-tag i {
        font-size: 11px;
    }


    .trust-heading h2 {
        margin-bottom: 10px;

        font-size: var(--fs-h2);

        font-weight: 700;
    }


    .trust-heading h2 span {
        color: var(--primary-blue);
    }


    .trust-heading p {
        max-width: 540px;

        margin: 0 auto;

        color: var(--text-body);

        font-size: var(--fs-base);

        line-height: 1.6;
    }


    /* Stats Grid */

    .trust-grid {
        display: grid;

        grid-template-columns:
            repeat(4, 1fr);

        gap: 18px;
    }


    /* Card */

    .trust-card {
        display: flex;

        align-items: center;

        gap: 15px;

        padding: 22px 18px;

        background: rgba(255, 255, 255, 0.9);

        border: 1px solid rgba(11, 110, 232, 0.08);

        border-radius: var(--radius-lg);

        box-shadow: var(--shadow-sm);

        transition:
            transform 0.3s ease,
            box-shadow 0.3s ease,
            border-color 0.3s ease;
    }


    .trust-card:hover {
        transform: translateY(-5px);

        border-color:
            rgba(11, 110, 232, 0.18);

        box-shadow: var(--shadow-md);
    }


    /* Icon */

    .trust-icon {
        flex-shrink: 0;

        width: 46px;
        height: 46px;

        display: flex;

        align-items: center;
        justify-content: center;

        border-radius: 12px;

        background:
            linear-gradient(135deg,
                var(--primary-blue),
                var(--deep-blue));

        color: var(--white);

        font-size: 18px;
    }


    /* Content */

    .trust-content h3 {
        margin-bottom: 2px;

        color: var(--dark-navy);

        font-family: var(--font-heading);

        font-size: var(--fs-h4);

        font-weight: 700;

        line-height: 1.2;
    }


    .trust-content p {
        color: var(--text-body);

        font-size: var(--fs-sm);

        line-height: 1.4;
    }


    /* =====================================================
   TABLET
===================================================== */

    @media (max-width: 991px) {

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

    }


    /* =====================================================
   MOBILE
===================================================== */

    @media (max-width: 767px) {

        .trust-heading {
            margin-bottom: 30px;
        }

        .trust-grid {
            grid-template-columns: 1fr;

            gap: 12px;
        }

        .trust-card {
            padding: 18px;
        }

    }


    /* =====================================================
   SMALL MOBILE
===================================================== */

    @media (max-width: 480px) {

        .trust-heading h2 {
            font-size: var(--fs-h3);
        }

        .trust-icon {
            width: 42px;
            height: 42px;

            font-size: 16px;
        }

    }



    /* =====================================================
   HOME SERVICES SECTION
===================================================== */

    .home-services {
        position: relative;

        padding: var(--section-padding) 0;

        background: var(--white);

        overflow: hidden;
    }


    /* =====================================================
   HEADING
===================================================== */

    .services-heading {
        max-width: 650px;

        margin: 0 auto 40px;

        text-align: center;
    }


    .services-heading h2 {
        margin-bottom: 10px;

        font-size: var(--fs-h2);

        font-weight: 700;
    }


    .services-heading h2 span {
        color: var(--primary-blue);
    }


    .services-heading p {
        max-width: 560px;

        margin: 0 auto;

        color: var(--text-body);

        font-size: var(--fs-base);

        line-height: var(--lh-body);
    }


    /* =====================================================
   SERVICES GRID
===================================================== */

    .services-grid {
        display: grid;

        grid-template-columns:
            repeat(3, 1fr);

        gap: 20px;
    }


    /* =====================================================
   SERVICE CARD
===================================================== */

    .service-card {
        position: relative;

        display: flex;

        align-items: flex-start;

        gap: 18px;

        padding: 24px;

        background:
            linear-gradient(145deg,
                #FFFFFF 0%,
                #F5FBFF 100%);

        border: 1px solid var(--border-light);

        border-radius: var(--radius-lg);

        box-shadow: var(--shadow-sm);

        overflow: hidden;

        transition:
            transform 0.3s ease,
            box-shadow 0.3s ease,
            border-color 0.3s ease;
    }


    /* Small blue accent */

    .service-card::before {
        content: "";

        position: absolute;

        top: 0;
        left: 0;

        width: 3px;
        height: 0;

        background: var(--primary-blue);

        transition: height 0.3s ease;
    }


    .service-card:hover {
        transform: translateY(-6px);

        border-color:
            rgba(11, 110, 232, 0.18);

        box-shadow: var(--shadow-md);
    }


    .service-card:hover::before {
        height: 100%;
    }


    /* =====================================================
   SERVICE ICON
===================================================== */

    .service-icon {
        flex-shrink: 0;

        width: 48px;
        height: 48px;

        display: flex;

        align-items: center;
        justify-content: center;

        border-radius: 12px;

        background:
            linear-gradient(135deg,
                var(--primary-blue),
                var(--deep-blue));

        color: var(--white);

        font-size: 18px;

        box-shadow:
            0 8px 18px rgba(11, 110, 232, 0.18);

        transition:
            transform 0.3s ease;
    }


    .service-card:hover .service-icon {
        transform: scale(1.06);
    }


    /* =====================================================
   SERVICE CONTENT
===================================================== */

    .service-content {
        min-width: 0;
    }


    .service-content h3 {
        margin-bottom: 7px;

        color: var(--dark-navy);

        font-family: var(--font-heading);

        font-size: var(--fs-h5);

        font-weight: 600;

        line-height: 1.25;
    }


    .service-content p {
        margin-bottom: 12px;

        color: var(--text-body);

        font-size: var(--fs-sm);

        line-height: 1.55;
    }


    /* =====================================================
   LEARN MORE
===================================================== */

    .service-link {
        display: inline-flex;

        align-items: center;

        gap: 6px;

        color: var(--primary-blue);

        font-family: var(--font-heading);

        font-size: var(--fs-sm);

        font-weight: 600;

        transition: gap 0.25s ease;
    }


    .service-link i {
        font-size: 10px;
    }


    .service-card:hover .service-link {
        gap: 10px;
    }


    /* =====================================================
   VIEW ALL BUTTON
===================================================== */

    .services-action {
        display: flex;

        justify-content: center;

        margin-top: 35px;
    }


    .view-services-btn {
        display: inline-flex;

        align-items: center;

        gap: 9px;

        padding: 11px 20px;

        border-radius: 8px;

        background: var(--primary-blue);

        color: var(--white);

        font-family: var(--font-heading);

        font-size: var(--fs-sm);

        font-weight: 600;

        box-shadow:
            0 8px 20px rgba(11, 110, 232, 0.18);

        transition:
            transform 0.3s ease,
            background 0.3s ease,
            box-shadow 0.3s ease;
    }


    .view-services-btn:hover {
        transform: translateY(-3px);

        background: var(--deep-blue);

        box-shadow:
            0 12px 25px rgba(11, 110, 232, 0.25);
    }


    /* =====================================================
   TABLET
===================================================== */

    @media (max-width: 991px) {

        .services-grid {
            grid-template-columns:
                repeat(2, 1fr);

            gap: 16px;
        }

    }


    /* =====================================================
   MOBILE
===================================================== */

    @media (max-width: 767px) {

        .services-heading {
            margin-bottom: 30px;
        }

        .services-grid {
            grid-template-columns: 1fr;

            gap: 12px;
        }

        .service-card {
            padding: 18px;

            gap: 14px;
        }

        .service-icon {
            width: 44px;
            height: 44px;

            font-size: 16px;
        }

    }


    /* =====================================================
   SMALL MOBILE
===================================================== */

    @media (max-width: 480px) {

        .services-heading h2 {
            font-size: var(--fs-h3);
        }

        .service-card {
            padding: 16px;
        }

        .service-content h3 {
            font-size: var(--fs-md);
        }

    }


    /* =====================================================
   ABOUT AEROVEX SECTION
===================================================== */

    .home-about {
        position: relative;

        padding: var(--section-padding) 0;

        background: var(--white);

        overflow: hidden;
    }


    /* =====================================================
   WRAPPER
===================================================== */

    .about-wrapper {
        display: grid;

        grid-template-columns: 1.05fr 0.95fr;

        align-items: center;

        gap: 70px;
    }


    /* =====================================================
   CONTENT
===================================================== */

    .about-content {
        max-width: 650px;
    }


    .about-content h2 {
        margin-bottom: 13px;

        font-size: var(--fs-h2);

        font-weight: 700;
    }


    .about-content h2 span {
        color: var(--primary-blue);
    }


    .about-intro {
        margin-bottom: 10px;

        color: var(--dark-navy);

        font-size: var(--fs-md);

        font-weight: 500;

        line-height: 1.6;
    }


    .about-text {
        margin-bottom: 25px;

        color: var(--text-body);

        font-size: var(--fs-base);

        line-height: var(--lh-body);
    }


    /* =====================================================
   HIGHLIGHTS
===================================================== */

    .about-highlights {
        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        gap: 12px;

        margin-bottom: 25px;
    }


    .about-highlight {
        display: flex;

        align-items: center;

        gap: 11px;

        padding: 13px;

        border: 1px solid var(--border-light);

        border-radius: var(--radius-md);

        background: var(--soft-blue);

        transition:
            transform 0.3s ease,
            box-shadow 0.3s ease;
    }


    .about-highlight:hover {
        transform: translateY(-3px);

        box-shadow: var(--shadow-sm);
    }


    .about-highlight-icon {
        flex-shrink: 0;

        width: 36px;
        height: 36px;

        display: flex;

        align-items: center;
        justify-content: center;

        border-radius: 9px;

        background:
            rgba(11, 110, 232, 0.09);

        color: var(--primary-blue);

        font-size: 14px;
    }


    .about-highlight h3 {
        margin-bottom: 2px;

        font-size: var(--fs-md);

        font-weight: 600;

        line-height: 1.25;
    }


    .about-highlight p {
        color: var(--text-body);

        font-size: var(--fs-xs);

        line-height: 1.4;
    }


    /* =====================================================
   BUTTON
===================================================== */

    .about-btn {
        display: inline-flex;

        align-items: center;

        gap: 8px;

        padding: 10px 18px;

        border-radius: 8px;

        background: var(--primary-blue);

        color: var(--white);

        font-family: var(--font-heading);

        font-size: var(--fs-sm);

        font-weight: 600;

        box-shadow:
            0 8px 20px rgba(11, 110, 232, 0.18);

        transition:
            transform 0.3s ease,
            background 0.3s ease;
    }


    .about-btn:hover {
        transform: translateY(-3px);

        background: var(--deep-blue);
    }


    .about-btn i {
        font-size: 10px;

        transition:
            transform 0.25s ease;
    }


    .about-btn:hover i {
        transform: translateX(3px);
    }


    /* =====================================================
   VISUAL
===================================================== */

    .about-visual {
        position: relative;

        min-height: 480px;

        display: flex;

        align-items: center;

        justify-content: center;
    }


    .about-glow {
        position: absolute;

        width: 360px;
        height: 360px;

        border-radius: 50%;

        background:
            radial-gradient(circle,
                rgba(86, 184, 255, 0.20),
                rgba(86, 184, 255, 0));

        filter: blur(5px);
    }


    .about-image {
        position: relative;

        width: min(100%, 440px);

        z-index: 2;
    }


    .about-image::before {
        content: "";

        position: absolute;

        inset: -10px;

        border: 1px solid rgba(11, 110, 232, 0.12);

        border-radius: var(--radius-xl);

        transform: rotate(3deg);

        z-index: -1;
    }


    .about-image img {
        width: 100%;

        aspect-ratio: 1 / 1.05;

        object-fit: cover;

        border-radius: var(--radius-xl);

        box-shadow: var(--shadow-lg);
    }


    /* =====================================================
   FLOATING CARD
===================================================== */

    .about-floating-card {
        position: absolute;

        right: 5px;
        bottom: 35px;

        display: flex;

        align-items: center;

        gap: 10px;

        max-width: 230px;

        padding: 12px 15px;

        background: rgba(255, 255, 255, 0.94);

        border: 1px solid rgba(11, 110, 232, 0.10);

        border-radius: 12px;

        box-shadow: var(--shadow-md);

        backdrop-filter: blur(12px);

        -webkit-backdrop-filter: blur(12px);

        z-index: 3;

        animation: aboutCardFloat 4s ease-in-out infinite;
    }


    .about-floating-icon {
        flex-shrink: 0;

        color: var(--primary-blue);

        font-size: 20px;
    }


    .about-floating-card strong {
        display: block;

        margin-bottom: 2px;

        color: var(--dark-navy);

        font-family: var(--font-heading);

        font-size: var(--fs-sm);

        font-weight: 600;
    }


    .about-floating-card span {
        display: block;

        color: var(--text-body);

        font-size: var(--fs-xs);
    }


    /* =====================================================
   FLOATING ANIMATION
===================================================== */

    @keyframes aboutCardFloat {

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

        50% {
            transform: translateY(-6px);
        }

    }


    /* =====================================================
   TABLET
===================================================== */

    @media (max-width: 991px) {

        .about-wrapper {
            grid-template-columns: 1fr;

            gap: 45px;
        }


        .about-content {
            max-width: 700px;

            margin: 0 auto;

            text-align: center;
        }


        .about-text,
        .about-intro {
            margin-left: auto;
            margin-right: auto;
        }


        .about-highlights {
            text-align: left;
        }


        .about-visual {
            min-height: 420px;
        }

    }


    /* =====================================================
   MOBILE
===================================================== */

    @media (max-width: 767px) {

        .about-wrapper {
            gap: 35px;
        }


        .about-content h2 {
            font-size: var(--fs-h3);
        }


        .about-highlights {
            grid-template-columns: 1fr;

            gap: 9px;
        }


        .about-visual {
            min-height: 360px;
        }


        .about-image {
            width: min(100%, 380px);
        }


        .about-floating-card {
            right: 5px;
            bottom: 20px;
        }

    }


    /* =====================================================
   SMALL MOBILE
===================================================== */

    @media (max-width: 480px) {

        .about-visual {
            min-height: 310px;
        }


        .about-image {
            width: 90%;
        }


        .about-floating-card {
            right: 0;

            max-width: 200px;

            padding: 10px 12px;
        }


        .about-floating-card strong {
            font-size: 10px;
        }


        .about-floating-card span {
            font-size: 9px;
        }

    }


    /* =====================================================
   WHY CHOOSE AEROVEX
===================================================== */

    .why-aerovex {
        position: relative;

        padding: var(--section-padding) 0;

        background:
            linear-gradient(135deg,
                #F5FBFF 0%,
                #FFFFFF 55%,
                #EAF7FF 100%);

        overflow: hidden;
    }


    /* =====================================================
   BACKGROUND GLOW
===================================================== */

    .why-aerovex::before {
        content: "";

        position: absolute;

        width: 360px;
        height: 360px;

        top: -180px;
        left: -120px;

        border-radius: 50%;

        background:
            rgba(86, 184, 255, 0.12);

        filter: blur(40px);

        pointer-events: none;
    }


    .why-aerovex::after {
        content: "";

        position: absolute;

        width: 300px;
        height: 300px;

        right: -120px;
        bottom: -150px;

        border-radius: 50%;

        background:
            rgba(11, 110, 232, 0.08);

        filter: blur(35px);

        pointer-events: none;
    }


    /* =====================================================
   MAIN WRAPPER
===================================================== */

    .why-wrapper {
        position: relative;

        display: grid;

        grid-template-columns: 0.9fr 1.1fr;

        align-items: center;

        gap: 65px;

        z-index: 2;
    }


    /* =====================================================
   LEFT VISUAL
===================================================== */

    .why-visual {
        position: relative;

        min-height: 430px;

        display: flex;

        align-items: center;

        justify-content: center;
    }


    /* =====================================================
   VISUAL GLOW
===================================================== */

    .why-visual-glow {
        position: absolute;

        width: 320px;
        height: 320px;

        border-radius: 50%;

        background:
            radial-gradient(circle,
                rgba(86, 184, 255, 0.25) 0%,
                rgba(86, 184, 255, 0) 70%);

        filter: blur(5px);
    }


    /* =====================================================
   MAIN BLUE CARD
===================================================== */

    .why-main-card {
        position: relative;

        width: min(100%, 390px);

        padding: 38px 32px;

        border-radius: 24px;

        background:
            linear-gradient(145deg,
                var(--dark-navy) 0%,
                var(--deep-blue) 58%,
                var(--primary-blue) 100%);

        color: var(--white);

        box-shadow:
            0 25px 55px rgba(6, 26, 58, 0.20);

        overflow: hidden;

        z-index: 2;
    }


    /* Card decorative circle */

    .why-main-card::before {
        content: "";

        position: absolute;

        width: 190px;
        height: 190px;

        top: -90px;
        right: -70px;

        border: 1px solid rgba(255, 255, 255, 0.12);

        border-radius: 50%;
    }


    .why-main-card::after {
        content: "";

        position: absolute;

        width: 120px;
        height: 120px;

        bottom: -65px;
        left: -45px;

        border: 1px solid rgba(255, 255, 255, 0.10);

        border-radius: 50%;
    }


    /* =====================================================
   MAIN ICON
===================================================== */

    .why-main-icon {
        width: 48px;
        height: 48px;

        display: flex;

        align-items: center;
        justify-content: center;

        margin-bottom: 22px;

        border-radius: 12px;

        background:
            rgba(255, 255, 255, 0.12);

        border: 1px solid rgba(255, 255, 255, 0.15);

        color: var(--white);

        font-size: 20px;
    }


    /* =====================================================
   SMALL LABEL
===================================================== */

    .why-main-small {
        display: block;

        margin-bottom: 8px;

        color:
            rgba(255, 255, 255, 0.70);

        font-family: var(--font-heading);

        font-size: var(--fs-xs);

        font-weight: 600;

        letter-spacing: 1.5px;
    }


    /* =====================================================
   MAIN CARD HEADING
===================================================== */

    .why-main-card h3 {
        max-width: 300px;

        margin-bottom: 12px;

        color: var(--white);

        font-family: var(--font-heading);

        font-size: var(--fs-h3);

        font-weight: 600;

        line-height: 1.25;
    }


    .why-main-card h3 span {
        color: #8ED4FF;
    }


    .why-main-card>p {
        max-width: 300px;

        margin-bottom: 28px;

        color:
            rgba(255, 255, 255, 0.72);

        font-size: var(--fs-sm);

        line-height: 1.6;
    }


    /* =====================================================
   MINI STATS
===================================================== */

    .why-mini-stats {
        display: grid;

        grid-template-columns:
            repeat(3, 1fr);

        gap: 10px;

        padding-top: 20px;

        border-top:
            1px solid rgba(255, 255, 255, 0.14);
    }


    .why-mini-stats div {
        display: flex;

        flex-direction: column;

        gap: 3px;
    }


    .why-mini-stats strong {
        color: var(--white);

        font-family: var(--font-heading);

        font-size: var(--fs-md);

        font-weight: 700;
    }


    .why-mini-stats span {
        color:
            rgba(255, 255, 255, 0.60);

        font-size: var(--fs-xs);
    }


    /* =====================================================
   FLOATING ICONS
===================================================== */

    .why-floating-icon {
        position: absolute;

        width: 44px;
        height: 44px;

        display: flex;

        align-items: center;
        justify-content: center;

        border-radius: 12px;

        background:
            rgba(255, 255, 255, 0.95);

        border: 1px solid rgba(11, 110, 232, 0.10);

        color: var(--primary-blue);

        box-shadow: var(--shadow-md);

        font-size: 15px;

        z-index: 3;

        animation:
            whyFloat 4s ease-in-out infinite;
    }


    .icon-one {
        top: 55px;
        left: 12px;
    }


    .icon-two {
        top: 135px;
        right: 0;

        animation-delay: 0.8s;
    }


    .icon-three {
        bottom: 50px;
        left: 5px;

        animation-delay: 1.5s;
    }


    @keyframes whyFloat {

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

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

    }


    /* =====================================================
   RIGHT CONTENT
===================================================== */

    .why-content {
        max-width: 620px;
    }


    .why-content h2 {
        margin-bottom: 12px;

        font-size: var(--fs-h2);

        font-weight: 700;
    }


    .why-content h2 span {
        color: var(--primary-blue);
    }


    .why-intro {
        max-width: 550px;

        margin-bottom: 25px;

        color: var(--text-body);

        font-size: var(--fs-base);

        line-height: var(--lh-body);
    }


    /* =====================================================
   BENEFITS
===================================================== */

    .why-benefits {
        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        gap: 12px;

        margin-bottom: 24px;
    }


    .why-item {
        display: flex;

        align-items: flex-start;

        gap: 11px;

        padding: 14px;

        background:
            rgba(255, 255, 255, 0.78);

        border:
            1px solid var(--border-light);

        border-radius: var(--radius-md);

        transition:
            transform 0.3s ease,
            box-shadow 0.3s ease,
            border-color 0.3s ease;
    }


    .why-item:hover {
        transform: translateY(-3px);

        border-color:
            rgba(11, 110, 232, 0.18);

        box-shadow: var(--shadow-sm);
    }


    /* =====================================================
   BENEFIT ICON
===================================================== */

    .why-icon {
        flex-shrink: 0;

        width: 36px;
        height: 36px;

        display: flex;

        align-items: center;
        justify-content: center;

        border-radius: 9px;

        background:
            rgba(11, 110, 232, 0.08);

        color: var(--primary-blue);

        font-size: 14px;
    }


    /* =====================================================
   BENEFIT CONTENT
===================================================== */

    .why-item-content {
        min-width: 0;
    }


    .why-item-content h3 {
        margin-bottom: 3px;

        color: var(--dark-navy);

        font-family: var(--font-heading);

        font-size: var(--fs-md);

        font-weight: 600;

        line-height: 1.3;
    }


    .why-item-content p {
        color: var(--text-body);

        font-size: var(--fs-xs);

        line-height: 1.5;
    }


    /* =====================================================
   CTA BUTTON
===================================================== */

    .why-btn {
        display: inline-flex;

        align-items: center;

        gap: 8px;

        padding: 10px 18px;

        border-radius: 8px;

        background: var(--primary-blue);

        color: var(--white);

        font-family: var(--font-heading);

        font-size: var(--fs-sm);

        font-weight: 600;

        box-shadow:
            0 8px 20px rgba(11, 110, 232, 0.18);

        transition:
            transform 0.3s ease,
            background 0.3s ease,
            box-shadow 0.3s ease;
    }


    .why-btn:hover {
        transform: translateY(-3px);

        background: var(--deep-blue);

        box-shadow:
            0 12px 25px rgba(11, 110, 232, 0.24);
    }


    .why-btn i {
        font-size: 10px;

        transition:
            transform 0.25s ease;
    }


    .why-btn:hover i {
        transform: translateX(3px);
    }


    /* =====================================================
   TABLET
===================================================== */

    @media (max-width: 991px) {

        .why-wrapper {
            grid-template-columns: 1fr;

            gap: 45px;
        }


        .why-visual {
            min-height: 390px;

            width: 100%;
        }


        .why-main-card {
            width: min(100%, 420px);
        }


        .why-content {
            max-width: 700px;

            margin: 0 auto;

            text-align: center;
        }


        .why-intro {
            margin-left: auto;
            margin-right: auto;
        }


        .why-benefits {
            text-align: left;
        }


        .why-btn {
            margin-top: 2px;
        }

    }


    /* =====================================================
   MOBILE
===================================================== */

    @media (max-width: 767px) {

        .why-wrapper {
            gap: 35px;
        }


        .why-visual {
            min-height: 350px;
        }


        .why-main-card {
            width: min(100%, 360px);

            padding: 30px 24px;
        }


        .why-main-card h3 {
            font-size: var(--fs-h3);
        }


        .why-floating-icon {
            width: 38px;
            height: 38px;

            border-radius: 10px;

            font-size: 13px;
        }


        .icon-one {
            top: 40px;
            left: 2px;
        }


        .icon-two {
            top: 105px;
            right: 0;
        }


        .icon-three {
            bottom: 35px;
            left: 0;
        }


        .why-content h2 {
            font-size: var(--fs-h3);
        }


        .why-benefits {
            grid-template-columns: 1fr;

            gap: 9px;
        }


        .why-item {
            padding: 13px;
        }

    }


    /* =====================================================
   SMALL MOBILE
===================================================== */

    @media (max-width: 480px) {

        .why-visual {
            min-height: 320px;
        }


        .why-main-card {
            width: 92%;

            padding: 26px 20px;

            border-radius: 20px;
        }


        .why-main-icon {
            width: 42px;
            height: 42px;

            margin-bottom: 17px;

            font-size: 17px;
        }


        .why-main-card h3 {
            font-size: var(--fs-h4);
        }


        .why-main-card>p {
            font-size: var(--fs-xs);
        }


        .why-mini-stats {
            padding-top: 16px;
        }


        .why-floating-icon {
            width: 34px;
            height: 34px;

            font-size: 11px;
        }


        .icon-one {
            left: 0;
        }


        .icon-two {
            right: 0;
        }


        .icon-three {
            left: 0;
            bottom: 25px;
        }

    }

    /* =====================================================
   SERVICE AREAS
===================================================== */

    .service-areas {
        position: relative;

        padding: var(--section-padding) 0;

        background: #061A3A;

        color: var(--white);

        overflow: hidden;
    }


    /* =====================================================
   BACKGROUND EFFECTS
===================================================== */

    .service-areas::before {
        content: "";

        position: absolute;

        width: 500px;
        height: 500px;

        top: -250px;
        right: -180px;

        border-radius: 50%;

        background:
            rgba(11, 110, 232, 0.22);

        filter: blur(70px);

        pointer-events: none;
    }


    .service-areas::after {
        content: "";

        position: absolute;

        width: 350px;
        height: 350px;

        bottom: -200px;
        left: -150px;

        border-radius: 50%;

        background:
            rgba(86, 184, 255, 0.10);

        filter: blur(60px);

        pointer-events: none;
    }


    /* =====================================================
   HEADER
===================================================== */

    .areas-header {
        position: relative;

        max-width: 650px;

        margin: 0 auto 42px;

        text-align: center;

        z-index: 2;
    }


    .areas-header .section-tag {
        background:
            rgba(86, 184, 255, 0.12);

        color: #8ED4FF;

        border:
            1px solid rgba(86, 184, 255, 0.15);
    }


    .areas-header h2 {
        margin-bottom: 10px;

        color: var(--white);

        font-size: var(--fs-h2);

        font-weight: 700;
    }


    .areas-header h2 span {
        color: #72C9FF;
    }


    .areas-header p {
        max-width: 540px;

        margin: 0 auto;

        color:
            rgba(255, 255, 255, 0.65);

        font-size: var(--fs-base);

        line-height: var(--lh-body);
    }


    /* =====================================================
   MAIN MAP SECTION
===================================================== */

    .areas-map-section {
        position: relative;

        display: grid;

        grid-template-columns: 0.9fr 1.1fr;

        min-height: 430px;

        border:
            1px solid rgba(255, 255, 255, 0.10);

        border-radius: 24px;

        background:
            rgba(255, 255, 255, 0.045);

        backdrop-filter: blur(12px);

        -webkit-backdrop-filter: blur(12px);

        overflow: hidden;

        z-index: 2;
    }


    /* =====================================================
   MAP VISUAL
===================================================== */

    .areas-map {
        position: relative;

        min-height: 430px;

        display: flex;

        align-items: center;
        justify-content: center;

        background:
            radial-gradient(circle at center,
                rgba(11, 110, 232, 0.30),
                rgba(6, 26, 58, 0) 65%);

        overflow: hidden;
    }


    /* =====================================================
   MAP GRID
===================================================== */

    .map-grid {
        position: absolute;

        inset: 0;

        background-image:
            linear-gradient(rgba(255, 255, 255, 0.045) 1px,
                transparent 1px),
            linear-gradient(90deg,
                rgba(255, 255, 255, 0.045) 1px,
                transparent 1px);

        background-size: 35px 35px;

        mask-image:
            radial-gradient(circle,
                black 20%,
                transparent 75%);

        -webkit-mask-image:
            radial-gradient(circle,
                black 20%,
                transparent 75%);
    }


    /* =====================================================
   MAP CIRCLES
===================================================== */

    .map-circle {
        position: absolute;

        border:
            1px solid rgba(86, 184, 255, 0.18);

        border-radius: 50%;

        animation:
            mapPulse 4s ease-out infinite;
    }


    .circle-one {
        width: 140px;
        height: 140px;
    }


    .circle-two {
        width: 230px;
        height: 230px;

        animation-delay: 1s;
    }


    .circle-three {
        width: 330px;
        height: 330px;

        animation-delay: 2s;
    }


    @keyframes mapPulse {

        0% {
            transform: scale(0.92);

            opacity: 0.3;
        }

        50% {
            opacity: 0.8;
        }

        100% {
            transform: scale(1.05);

            opacity: 0.15;
        }

    }


    /* =====================================================
   CENTER LOCATION
===================================================== */

    .map-center {
        position: relative;

        display: flex;

        flex-direction: column;

        align-items: center;

        text-align: center;

        z-index: 5;
    }


    .map-pin {
        width: 58px;
        height: 58px;

        display: flex;

        align-items: center;
        justify-content: center;

        margin-bottom: 12px;

        border-radius: 50%;

        background:
            linear-gradient(135deg,
                var(--primary-blue),
                #56B8FF);

        color: var(--white);

        font-size: 23px;

        box-shadow:
            0 0 0 8px rgba(86, 184, 255, 0.08),
            0 12px 30px rgba(0, 0, 0, 0.20);
    }


    .map-center strong {
        color: var(--white);

        font-family: var(--font-heading);

        font-size: var(--fs-h4);

        font-weight: 600;
    }


    .map-center span {
        margin-top: 3px;

        color:
            rgba(255, 255, 255, 0.55);

        font-size: var(--fs-xs);
    }


    /* =====================================================
   LOCATION PINS
===================================================== */

    .location-pin {
        position: absolute;

        width: 27px;
        height: 27px;

        display: flex;

        align-items: center;
        justify-content: center;

        border-radius: 50%;

        background:
            rgba(255, 255, 255, 0.10);

        border:
            1px solid rgba(255, 255, 255, 0.18);

        color: #72C9FF;

        font-size: 10px;

        animation:
            pinFloat 3s ease-in-out infinite;
    }


    .pin-one {
        top: 25%;

        left: 22%;
    }


    .pin-two {
        top: 30%;

        right: 20%;

        animation-delay: 0.7s;
    }


    .pin-three {
        bottom: 24%;

        left: 27%;

        animation-delay: 1.3s;
    }


    .pin-four {
        bottom: 20%;

        right: 25%;

        animation-delay: 1.9s;
    }


    @keyframes pinFloat {

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

        50% {
            transform: translateY(-6px);
        }

    }


    /* =====================================================
   RIGHT CONTENT
===================================================== */

    .areas-content {
        display: flex;

        flex-direction: column;

        justify-content: center;

        padding: 45px;
    }


    /* =====================================================
   CONTENT TOP
===================================================== */

    .areas-content-top>span {
        display: inline-flex;

        align-items: center;

        gap: 7px;

        margin-bottom: 12px;

        color: #72C9FF;

        font-family: var(--font-heading);

        font-size: var(--fs-xs);

        font-weight: 600;

        letter-spacing: 0.8px;
    }


    .areas-content-top h3 {
        max-width: 450px;

        margin-bottom: 12px;

        color: var(--white);

        font-size: var(--fs-h3);

        font-weight: 600;

        line-height: 1.25;
    }


    .areas-content-top h3 strong {
        color: #72C9FF;

        font-weight: 600;
    }


    .areas-content-top p {
        max-width: 500px;

        margin-bottom: 25px;

        color:
            rgba(255, 255, 255, 0.62);

        font-size: var(--fs-base);

        line-height: var(--lh-body);
    }


    /* =====================================================
   LOCATION PILLS
===================================================== */

    .areas-locations {
        display: flex;

        flex-wrap: wrap;

        gap: 8px;

        max-width: 540px;

        margin-bottom: 28px;
    }


    .area-pill {
        display: inline-flex;

        align-items: center;

        gap: 6px;

        padding: 7px 11px;

        border:
            1px solid rgba(255, 255, 255, 0.10);

        border-radius: 50px;

        background:
            rgba(255, 255, 255, 0.055);

        color:
            rgba(255, 255, 255, 0.78);

        font-size: var(--fs-xs);

        transition:
            background 0.25s ease,
            border-color 0.25s ease,
            transform 0.25s ease;
    }


    .area-pill i {
        color: #72C9FF;

        font-size: 9px;
    }


    .area-pill:hover {
        transform: translateY(-2px);

        background:
            rgba(11, 110, 232, 0.18);

        border-color:
            rgba(86, 184, 255, 0.22);
    }


    /* =====================================================
   BOTTOM
===================================================== */

    .areas-bottom {
        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 20px;

        padding-top: 20px;

        border-top:
            1px solid rgba(255, 255, 255, 0.08);
    }


    .areas-bottom>span {
        display: flex;

        align-items: center;

        gap: 7px;

        color:
            rgba(255, 255, 255, 0.55);

        font-size: var(--fs-xs);
    }


    .areas-bottom>span i {
        color: #72C9FF;
    }


    /* =====================================================
   BUTTON
===================================================== */

    .areas-btn {
        flex-shrink: 0;

        display: inline-flex;

        align-items: center;

        gap: 8px;

        padding: 9px 16px;

        border-radius: 8px;

        background: var(--primary-blue);

        color: var(--white);

        font-family: var(--font-heading);

        font-size: var(--fs-sm);

        font-weight: 600;

        box-shadow:
            0 8px 20px rgba(11, 110, 232, 0.20);

        transition:
            transform 0.3s ease,
            background 0.3s ease;
    }


    .areas-btn:hover {
        transform: translateY(-3px);

        background: #0754B8;
    }


    .areas-btn i {
        font-size: 9px;
    }


    /* =====================================================
   TABLET
===================================================== */

    @media (max-width: 991px) {

        .areas-map-section {
            grid-template-columns: 1fr;
        }


        .areas-map {
            min-height: 350px;
        }


        .areas-content {
            padding: 35px;
        }

    }


    /* =====================================================
   MOBILE
===================================================== */

    @media (max-width: 767px) {

        .areas-header {
            margin-bottom: 28px;
        }


        .areas-header h2 {
            font-size: var(--fs-h3);
        }


        .areas-map-section {
            border-radius: 18px;
        }


        .areas-map {
            min-height: 290px;
        }


        .circle-three {
            width: 250px;
            height: 250px;
        }


        .areas-content {
            padding: 25px 20px;
        }


        .areas-content-top h3 {
            font-size: var(--fs-h4);
        }


        .areas-locations {
            margin-bottom: 22px;
        }


        .areas-bottom {
            flex-direction: column;

            align-items: flex-start;

            gap: 14px;
        }

    }


    /* =====================================================
   SMALL MOBILE
===================================================== */

    @media (max-width: 480px) {

        .areas-map {
            min-height: 260px;
        }


        .map-pin {
            width: 48px;
            height: 48px;

            font-size: 19px;
        }


        .map-center strong {
            font-size: var(--fs-h5);
        }


        .areas-content {
            padding: 22px 16px;
        }


        .area-pill {
            padding: 6px 9px;
        }

    }


    /* =====================================================
   TESTIMONIALS SECTION
===================================================== */

    .testimonials {
        position: relative;

        padding: var(--section-padding) 0;

        background:
            linear-gradient(180deg,
                #F5FBFF 0%,
                #FFFFFF 100%);

        overflow: hidden;
    }


    /* =====================================================
   BACKGROUND
===================================================== */

    .testimonials::before {
        content: "";

        position: absolute;

        width: 300px;
        height: 300px;

        top: -150px;
        left: -100px;

        border-radius: 50%;

        background:
            rgba(86, 184, 255, 0.10);

        filter: blur(45px);

        pointer-events: none;
    }


    .testimonials::after {
        content: "";

        position: absolute;

        width: 250px;
        height: 250px;

        right: -100px;
        bottom: -120px;

        border-radius: 50%;

        background:
            rgba(11, 110, 232, 0.07);

        filter: blur(40px);

        pointer-events: none;
    }


    /* =====================================================
   HEADING
===================================================== */

    .testimonials-heading {
        position: relative;

        max-width: 650px;

        margin: 0 auto 40px;

        text-align: center;

        z-index: 2;
    }


    .testimonials-heading h2 {
        margin-bottom: 10px;

        font-size: var(--fs-h2);

        font-weight: 700;
    }


    .testimonials-heading h2 span {
        color: var(--primary-blue);
    }


    .testimonials-heading p {
        max-width: 540px;

        margin: 0 auto;

        color: var(--text-body);

        font-size: var(--fs-base);

        line-height: var(--lh-body);
    }


    /* =====================================================
   TESTIMONIAL GRID
===================================================== */

    .testimonial-grid {
        position: relative;

        display: grid;

        grid-template-columns:
            repeat(3, 1fr);

        gap: 18px;

        z-index: 2;
    }


    /* =====================================================
   CARD
===================================================== */

    .testimonial-card {
        position: relative;

        display: flex;

        flex-direction: column;

        min-height: 280px;

        padding: 25px;

        background: var(--white);

        border: 1px solid var(--border-light);

        border-radius: var(--radius-lg);

        box-shadow: var(--shadow-sm);

        transition:
            transform 0.3s ease,
            box-shadow 0.3s ease,
            border-color 0.3s ease;
    }


    .testimonial-card:hover {
        transform: translateY(-6px);

        border-color:
            rgba(11, 110, 232, 0.16);

        box-shadow: var(--shadow-md);
    }


    /* =====================================================
   FEATURED CARD
===================================================== */

    .testimonial-card.featured {
        background:
            linear-gradient(145deg,
                #FFFFFF 0%,
                #F0F8FF 100%);

        border-color:
            rgba(11, 110, 232, 0.15);

        transform: translateY(-5px);
    }


    .testimonial-card.featured:hover {
        transform: translateY(-10px);
    }


    /* =====================================================
   QUOTE ICON
===================================================== */

    .quote-icon {
        position: absolute;

        top: 20px;
        right: 22px;

        color:
            rgba(11, 110, 232, 0.10);

        font-size: 30px;
    }


    /* =====================================================
   RATING
===================================================== */

    .rating {
        display: flex;

        align-items: center;

        gap: 3px;

        margin-bottom: 17px;
    }


    .rating i {
        color: #F5B800;

        font-size: 12px;
    }


    /* =====================================================
   REVIEW
===================================================== */

    .testimonial-text {
        flex: 1;

        margin-bottom: 22px;

        color: var(--text-dark);

        font-family: var(--font-body);

        font-size: var(--fs-base);

        line-height: 1.65;
    }


    /* =====================================================
   CUSTOMER
===================================================== */

    .customer {
        display: flex;

        align-items: center;

        gap: 10px;

        padding-top: 15px;

        border-top: 1px solid var(--border-light);
    }


    .customer-avatar {
        width: 38px;
        height: 38px;

        display: flex;

        align-items: center;
        justify-content: center;

        border-radius: 50%;

        background:
            linear-gradient(135deg,
                var(--primary-blue),
                var(--deep-blue));

        color: var(--white);

        font-family: var(--font-heading);

        font-size: var(--fs-sm);

        font-weight: 600;
    }


    .customer h3 {
        margin-bottom: 1px;

        color: var(--dark-navy);

        font-size: var(--fs-sm);

        font-weight: 600;

        line-height: 1.3;
    }


    .customer span {
        color: var(--text-light);

        font-size: var(--fs-xs);
    }


    /* =====================================================
   GOOGLE RATING
===================================================== */

    .testimonial-bottom {
        display: flex;

        justify-content: center;

        margin-top: 30px;
    }


    .google-rating {
        display: flex;

        align-items: center;

        gap: 10px;

        padding: 10px 16px;

        background: var(--white);

        border: 1px solid var(--border-light);

        border-radius: 50px;

        box-shadow: var(--shadow-sm);
    }


    .google-icon {
        width: 32px;
        height: 32px;

        display: flex;

        align-items: center;
        justify-content: center;

        border-radius: 50%;

        background: #F5F5F5;

        color: #4285F4;

        font-size: 15px;
    }


    .google-rating strong {
        display: block;

        color: var(--dark-navy);

        font-family: var(--font-heading);

        font-size: var(--fs-md);

        line-height: 1;
    }


    .google-stars {
        display: flex;

        gap: 2px;

        margin-top: 3px;
    }


    .google-stars i {
        color: #F5B800;

        font-size: 8px;
    }


    .google-rating>span {
        padding-left: 5px;

        border-left: 1px solid var(--border-light);

        color: var(--text-body);

        font-size: var(--fs-xs);
    }


    /* =====================================================
   TABLET
===================================================== */

    @media (max-width: 991px) {

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


        .testimonial-card.featured {
            transform: none;
        }


        .testimonial-card.featured:hover {
            transform: translateY(-6px);
        }

    }


    /* =====================================================
   MOBILE
===================================================== */

    @media (max-width: 767px) {

        .testimonials-heading {
            margin-bottom: 30px;
        }


        .testimonials-heading h2 {
            font-size: var(--fs-h3);
        }


        .testimonial-grid {
            grid-template-columns: 1fr;

            gap: 12px;
        }


        .testimonial-card {
            min-height: auto;

            padding: 20px;
        }


        .testimonial-card.featured {
            transform: none;
        }


        .testimonial-card.featured:hover {
            transform: translateY(-5px);
        }


        .testimonial-text {
            font-size: var(--fs-sm);
        }

    }


    /* =====================================================
   SMALL MOBILE
===================================================== */

    @media (max-width: 480px) {

        .google-rating {
            padding: 9px 12px;
        }


        .google-rating>span {
            font-size: 9px;
        }

    }