:root {
            --brand-yellow: #F59E0B;
            --brand-yellow-light: #FBBF24;
            --brand-yellow-dark: #D97706;
            --brand-yellow-subtle: #FEF3C7;
            --bg-pure-white: #FFFFFF;
            --bg-off-white: #FAFAFA;
            --bg-warm-cream: #F8FAFC;
            --bg-card: #FFFFFF;
            --text-dark-title: #020617;
            --text-dark-body: #1E293B;
            --text-muted: #64748B;
            --border-light: #E2E8F0;
            --border-yellow: rgba(245, 158, 11, 0.3);
            --dark-section-bg: #0B1120;
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
            --shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
            --shadow-lg: 0 20px 35px -10px rgba(245, 158, 11, 0.12);
        }

        body {
            font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            color: var(--text-dark-body);
            background-color: var(--bg-pure-white);
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        /* Typography Utilities */
        h1, h2, h3, h4, h5, h6 {
            color: var(--text-dark-title);
            font-weight: 700;
            letter-spacing: -0.02em;
        }

        .btn {
    background: linear-gradient(135deg, #FDCC13 0%, #F9A313 100%) !important;
}

        .text-gradient-yellow {
            background: linear-gradient(135deg, #FDCC13 0%, #F9A313 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .bg-yellow-subtle {
            background-color: var(--brand-yellow-subtle) !important;
        }

        .badge-brand {
            background: linear-gradient(135deg, #fdcc1a36 0%, #f9a31324 100%);
            color: #151311;
            font-weight: 700;
            padding: 0.5rem 1rem;
            border-radius: 50rem;
            font-size: 0.8rem;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            border: 1px solid rgba(245, 158, 11, 0.3);
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        /* Custom Button Styling */
        .btn-brand-yellow {
            background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
            color: #FFFFFF;
            font-weight: 600 !important;
            padding: 0.75rem 1.75rem;
            border-radius: 0.75rem;
            border: none;
            font-size: 17px !important;
            box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
            transition: all 0.3s ease;
        }

        .btn-brand-yellow:hover {
            background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
            color: #FFFFFF !important;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
        }

         .btn-brand-yellow a:hover {
            color: #FFFFFF !important;
        }


        .btn-outline-dark-custom {
            border: 2px solid #1E293B;
            color: #0F172A;
            font-weight: 600;
            padding: 0.75rem 1.75rem;
            border-radius: 0.75rem;
            transition: all 0.3s ease;
            background: transparent;
        }

        .btn-outline-dark-custom:hover {
            background: #0F172A;
            color: #FFFFFF;
            transform: translateY(-2px);
        }

        /* Navbar Customization */
        .navbar-custom {
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(226, 232, 240, 0.8);
            transition: all 0.3s ease;
        }

        .navbar-brand .logo-symbol {
            width: 38px;
            height: 38px;
            background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
            color: white;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 1.2rem;
            box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
        }

        .nav-link {
            font-weight: 600 !important;
            color: #334155 !important;
            font-size: 0.95rem;
            padding: 0.5rem 1rem !important;
            transition: color 0.2s ease;
        }

        .nav-link:hover, .nav-link.active {
            color: #f9a513 !important;
        }

        /* Card Styles with Soft Yellow Hover Glow */
        .card-custom {
            background: var(--bg-card);
            border-radius: 1.25rem;
            border: 1px solid var(--border-light);
            box-shadow: var(--shadow-sm);
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
            overflow: hidden;
        }

        .card-custom:hover {
            transform: translateY(-6px);
            border-color: rgba(245, 158, 11, 0.4);
            box-shadow: 0 15px 30px -10px rgba(245, 158, 11, 0.18), 0 4px 12px rgba(0,0,0,0.03);
        }

        .icon-box-yellow {
            width: 70px;
            height: 70px;
            border-radius: 1rem;
              background: linear-gradient(135deg, #FDCC13 0%, #F9A313 100%) !important;
            color: #000000;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-bottom: 1.25rem;
            transition: all 0.3s ease;
        }

        .card-custom:hover .icon-box-yellow {
            background: #F59E0B;
            color: #FFFFFF;
            transform: scale(1.05);
        }

        /* Background Pattern & Canvas */
        .hero-section {
            background: radial-gradient(circle at 80% 20%, rgba(254, 243, 199, 0.6) 0%, rgba(255, 255, 255, 1) 60%);
            position: relative;
            padding-top: 8rem;
            padding-bottom: 5rem;
            overflow: hidden;
        }

        #hero-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        .hero-content {
            position: relative;
            z-index: 2;
        }

        /* Service Filter Tabs */
        .nav-pills-custom .nav-link {
            border-radius: 50rem;
            padding: 0.5rem 1.25rem;
            color: #475569 !important;
            background: #F1F5F9;
            font-size: 0.9rem;
            margin: 0.25rem;
            border: 1px solid transparent;
        }

        .nav-pills-custom .nav-link.active {
            background-color: #F59E0B !important;
            color: #FFFFFF !important;
            box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
        }

        /* Marquee Animation */
        .marquee-container {
            overflow: hidden;
            white-space: nowrap;
            position: relative;
            padding: 1.5rem 0;
            background: var(--bg-off-white);
            border-top: 1px solid var(--border-light);
            border-bottom: 1px solid var(--border-light);
        }

        .marquee-content {
            display: inline-block;
            animation: marquee 30s linear infinite;
        }

        @keyframes marquee {
            0% { transform: translateX(0%); }
            100% { transform: translateX(-50%); }
        }

        .tech-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1.25rem;
            margin: 0 0.5rem;
            background: white;
            border: 1px solid var(--border-light);
            border-radius: 50rem;
            font-weight: 600;
            font-size: 0.9rem;
            color: #334155;
            box-shadow: var(--shadow-sm);
        }

        /* Dark CTA Banner */
        .dark-cta-banner {
            background: linear-gradient(135deg, #131313 0%, #0f0f0f 100%);
            border-radius: 1.75rem;
            position: relative;
            overflow: hidden;
            color: white;
        }

        .dark-cta-banner::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -10%;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgb(89 82 69 / 25%) 0%, rgba(0, 0, 0, 0) 70%);
            pointer-events: none;
        }

        /* Step Timeline */
        .step-number {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: #FEF3C7;
            color: #D97706;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #F59E0B;
        }

        /* Range Slider Styling */
        .form-range::-webkit-slider-thumb {
            background: #F59E0B;
        }
        .form-range::-moz-range-thumb {
            background: #F59E0B;
        }

        /* Responsive Canvas Image Wrapper */
        .hero-img-wrapper {
            position: relative;
            border-radius: 1.5rem;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0,0,0,0.12);
            border: 4px solid #FFFFFF;
        }
        
        .hero-img-wrapper img {
            width: 100%;
            height: auto;
            object-fit: cover;
            display: block;
        }

        .floating-badge {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(245, 158, 11, 0.4);
            border-radius: 1rem;
            padding: 0.75rem 1.25rem;
            box-shadow: 0 10px 20px rgba(0,0,0,0.08);
        }

        /* Modal Enhancements */
        .modal-content {
            border-radius: 1.25rem;
            border: none;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }



        /* =========================
   PROCESS SECTION
========================= */

.process-section {
    background: #f6f4ec;
    padding: 105px 0 125px;
    overflow: hidden;
}


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

.process-heading {
    margin-bottom: 78px;
}

.process-label {
    display: flex;
    align-items: center;
    gap: 15px;

    color: #a77b00;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;

    margin-bottom: 28px;
}

.process-label span {
    width: 42px;
    height: 3px;
    display: inline-block;
    background: #a77b00;
}

.process-heading h2 {
    margin: 0;

    color: #16161a;
    font-size: 50px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -2.5px;
}


/* =========================
   TIMELINE
========================= */

.process-timeline {
    position: relative;

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

    gap: 0;
}


/* Connecting Line */

.process-timeline::before {
    content: "";

    position: absolute;

    top: 34px;
    left: 34px;
    right: 34px;

    height: 3px;

    background: #d7d4c9;

    z-index: 0;
}


/* Yellow Progress Line */

.process-timeline::after {
    content: "";

    position: absolute;

    top: 34px;
    left: 34px;

    width: calc(83.33% - 34px);

    height: 3px;

    background: #f1c400;

    z-index: 0;

    transform-origin: left;
    animation: processLine 1.8s ease forwards;
}


/* =========================
   PROCESS ITEM
========================= */

.process-item {
    position: relative;
    z-index: 2;

    padding-right: 28px;

    transition: transform 0.4s ease;
}


/* Number Circle */

.process-number {
    width: 66px;
    height: 66px;

    border-radius: 50%;

    background: #16161a;
    border: 3px solid #f1c400;

    color: #f1c400;

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

    font-size: 21px;
    font-weight: 700;

    margin-bottom: 24px;

    position: relative;
    z-index: 3;

    transition:
        all 0.4s ease,
        transform 0.4s ease;
}


/* Content */

.process-content h3 {
    color: #111216;

    font-size: 21px;
    font-weight: 700;

    margin: 0 0 10px;

    transition: color 0.3s ease;
}

.process-content p {
    color: #52617a;

    font-size: 15px;
    line-height: 23px;

    margin: 0;

    max-width: 230px;

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


/* =========================
   HOVER EFFECT
========================= */

.process-item:hover {
    transform: translateY(-8px);
}

.process-item:hover .process-number {
    background: #f1c400;
    color: #16161a;

    transform: scale(1.12);

    box-shadow:
        0 0 0 8px rgba(241, 196, 0, 0.12),
        0 12px 30px rgba(0, 0, 0, 0.12);
}

.process-item:hover .process-content h3 {
    color: #a77b00;
}

.process-item:hover .process-content p {
    color: #273650;
    transform: translateX(3px);
}


/* =========================
   LINE ANIMATION
========================= */

@keyframes processLine {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}


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

@media (max-width: 1199px) {

    .process-section {
        padding: 85px 0 100px;
    }

    .process-heading {
        margin-bottom: 65px;
    }

    .process-content h3 {
        font-size: 22px;
    }

    .process-content p {
        font-size: 16px;
        line-height: 1.6;
    }

    .process-number {
        width: 60px;
        height: 60px;
        font-size: 19px;
    }

    .process-timeline::before,
    .process-timeline::after {
        top: 31px;
    }
}


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

@media (max-width: 767px) {

    .process-section {
        padding: 75px 0 80px;
    }

    .process-heading {
        margin-bottom: 55px;
    }

    .process-label {
        font-size: 14px;
        letter-spacing: 2px;
        gap: 12px;
        margin-bottom: 5px;
    }

    .process-label span {
        width: 32px;
        height: 2px;
    }

    .process-heading h2 {
        font-size: 43px;
        letter-spacing: -1.8px;
    }


    /* Vertical Timeline */

    .process-timeline {
        display: block;
        padding-left: 15px;
    }

    .process-timeline::before {
        top: 0;
        bottom: 0;

        left: 44px;

        width: 3px;
        height: auto;

        right: auto;
    }

    .process-timeline::after {
        top: 0;
        left: 44px;

        width: 3px;
        height: 85%;

        transform-origin: top;

        animation: processVerticalLine 1.8s ease forwards;
    }


    .process-item {
        display: flex;

        gap: 25px;

        padding-right: 0;
        margin-bottom: 48px;

        align-items: flex-start;
    }

    .process-item:last-child {
        margin-bottom: 0;
    }


    .process-number {
        flex: 0 0 60px;

        width: 60px;
        height: 60px;

        margin: 0;

        font-size: 18px;
    }


    .process-content {
        padding-top: 5px;
    }

    .process-content h3 {
        font-size: 22px;
        margin-bottom: 7px;
    }

    .process-content p {
        max-width: 100%;

        font-size: 16px;
        line-height: 1.6;
    }

}


@keyframes processVerticalLine {

    from {
        transform: scaleY(0);
    }

    to {
        transform: scaleY(1);
    }

}

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

:root {
    --gold: #f4c400;
    --gold-dark: #a77b00;
    --black: #17171b;
    --text: #202025;
    --muted: #656570;
    --cream: #f8f6ed;
    --border: #e7e4da;
}

.ai-services-section,
.ai-toolkit-section,
.cloud-section {
    font-family: Arial, Helvetica, sans-serif;
}


/* ==========================================
   AI SERVICES
========================================== */

.ai-services-section {
    position: relative;
    padding: 100px 0 95px;
    background: #fffefb;
    overflow: hidden;
}


/* Network Background */

.ai-network-bg {
    position: absolute;
    inset: 0;

    opacity: .65;
    pointer-events: none;

    background-image:
        linear-gradient(
            135deg,
            transparent 49.7%,
            rgba(244,196,0,.22) 50%,
            transparent 50.3%
        ),
        linear-gradient(
            45deg,
            transparent 49.7%,
            rgba(244,196,0,.18) 50%,
            transparent 50.3%
        );

    background-size: 420px 300px;
    animation: networkMove 18s linear infinite;
}

@keyframes networkMove {
    from {
        background-position: 0 0, 0 0;
    }

    to {
        background-position: 420px 300px, -420px 300px;
    }
}


.network-dot {
    position: absolute;

    width: 7px;
    height: 7px;

    background: #e7bd43;

    border-radius: 50%;

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

.dot-1 {
    top: 8%;
    left: 20%;
}

.dot-2 {
    top: 12%;
    left: 48%;
    animation-delay: .5s;
}

.dot-3 {
    top: 18%;
    right: 20%;
    animation-delay: 1s;
}

.dot-4 {
    top: 38%;
    left: 35%;
    animation-delay: 1.5s;
}

.dot-5 {
    top: 52%;
    right: 38%;
    animation-delay: 2s;
}

.dot-6 {
    bottom: 20%;
    left: 10%;
    animation-delay: 2.5s;
}

.dot-7 {
    bottom: 10%;
    right: 14%;
    animation-delay: 3s;
}

@keyframes floatingDot {

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

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


/* Heading */

.ai-heading {
    max-width: 800px;
    margin-bottom: 48px;
}

.section-mini-title {
    display: flex;
    align-items: center;
    gap: 13px;

    color: var(--gold-dark);

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 2px;
    text-transform: uppercase;

    margin-bottom: 20px;
}

.section-mini-title span {
    display: inline-block;

    width: 30px;
    height: 2px;

    background: var(--gold-dark);
}

.ai-heading h2 {
    color: var(--black);

    font-size: clamp(40px, 4.2vw, 63px);
    line-height: 1.04;

    font-weight: 600;

    letter-spacing: -2px;

    margin-bottom: 18px;
}

.ai-heading p {
    max-width: 720px;

    color: var(--muted);

    font-size: 17px;
    line-height: 1.65;

    margin: 0;
}


/* Cards */

.ai-service-card {
    position: relative;

    min-height: 255px;

    background: rgba(255,255,255,.95);

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

    border-radius: 16px;

    padding: 20px 18px;

    overflow: hidden;

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

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

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: var(--gold);

    transform: scaleX(0);
    transform-origin: left;

    transition: transform .4s ease;
}

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

    border-color: rgba(244,196,0,.6);

    box-shadow:
        0 20px 45px rgba(0,0,0,.09);
}

.ai-service-card:hover::before {
    transform: scaleX(1);
}


/* Number */

.service-number {
    display: block;

    color: #b29124;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1px;

    margin-bottom: 8px;
}


/* Icon */

.ai-icon {
    width: 48px;
    height: 48px;

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

    background: var(--black);

    color: var(--gold);

    border-radius: 11px;

    font-size: 21px;

    margin-bottom: 18px;

    transition:
        transform .4s ease,
        background .4s ease;
}

.ai-service-card:hover .ai-icon {
    transform: rotate(-5deg) scale(1.1);

    background: var(--gold);
    color: var(--black);
}


.ai-service-card h3 {
    font-size: 18px;
    font-weight: 600;

    color: var(--black);

    margin-bottom: 9px;
}

.ai-service-card p {
    color: #707078;

    font-size: 14px;
    line-height: 1.65;

    margin: 0;
}


/* Button */

.ai-button-wrapper {
    margin-top: 35px;
}

.ai-main-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 13px 23px;

    background: var(--gold);

    color: var(--black);

    border-radius: 30px;

    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

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

.ai-main-btn:hover {
    color: var(--black);

    background: #ffd42c;

    transform: translateY(-4px);

    box-shadow: 0 12px 25px rgba(244,196,0,.3);
}

.ai-main-btn i {
    transition: transform .3s ease;
}

.ai-main-btn:hover i {
    transform: translateX(5px);
}



/* ==========================================
   CLOUD SECTION
========================================== */

.cloud-section {
    position: relative;

    padding: 105px 0;

    background: var(--cream);

    overflow: hidden;
}


.cloud-title {
    color: var(--black);

    font-size: clamp(42px, 4.2vw, 62px);

    line-height: 1.03;

    letter-spacing: -2px;

    font-weight: 600;

    margin-bottom: 22px;
}

.cloud-description {
    max-width: 600px;

    color: #686870;

    font-size: 16px;

    line-height: 1.7;

    margin-bottom: 22px;
}


/* Tags */

.cloud-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}

.cloud-tags span {
    display: inline-flex;

    align-items: center;

    padding: 7px 12px;

    background: white;

    border: 1px solid #dddcd7;

    border-radius: 20px;

    color: #34343a;

    font-size: 12px;

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

.cloud-tags span:hover {
    background: var(--gold);

    border-color: var(--gold);

    transform: translateY(-3px);
}


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

.cloud-visual {
    position: relative;

    width: 100%;

    max-width: 580px;

    height: 450px;

    margin-left: auto;

    background: #111116;

    border-radius: 25px;

    overflow: hidden;

    display: flex;

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

    transition:
        transform .5s ease,
        box-shadow .5s ease;
}

.cloud-visual:hover {
    transform: translateY(-8px);

    box-shadow:
        0 30px 60px rgba(0,0,0,.2);
}


/* Cloud */

.cloud-icon {
    position: absolute;

    top: 70px;

    left: 50%;

    transform: translateX(-50%);

    color: var(--gold);

    font-size: 105px;

    line-height: 1;

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

@keyframes cloudFloat {

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

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


/* Server */

.cloud-server {
    position: absolute;

    top: 210px;

    left: 50%;

    transform: translateX(-50%);

    width: 105px;
    height: 70px;

    border: 1px solid #67666d;

    border-radius: 9px;

    background: #1b1b21;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 10px;

    padding-left: 20px;
}

.server-light {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--gold);

    box-shadow: 0 0 12px rgba(244,196,0,.6);

    animation: serverBlink 2s ease-in-out infinite;
}

.server-light:nth-child(2) {
    animation-delay: .5s;
}

@keyframes serverBlink {

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

    50% {
        opacity: 1;
    }
}


/* Devices */

.cloud-device {
    position: absolute;

    width: 90px;
    height: 55px;

    border: 1px solid #55555e;

    background: #1b1b21;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;
}

.cloud-device i {
    color: var(--gold);

    font-size: 14px;
}

.device-one {
    left: 75px;
    bottom: 75px;
}

.device-two {
    right: 75px;
    bottom: 75px;
}

.device-two i {
    opacity: .35;
}


/* Connection Lines */

.cloud-connection {
    position: absolute;

    height: 1px;

    width: 135px;

    border-top: 1px dashed #9b821c;

    transform-origin: left center;
}

.connection-one {
    top: 270px;
    left: 235px;

    transform: rotate(145deg);
}

.connection-two {
    top: 270px;
    left: 340px;

    transform: rotate(35deg);
}

.connection-three {
    top: 280px;
    left: 50%;

    width: 1px;
    height: 70px;

    border-left: 1px dashed #9b821c;
    border-top: 0;

    transform: translateX(-50%);
}


/* Dots */

.cloud-dot {
    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--gold);

    animation: cloudDotPulse 2s ease-in-out infinite;
}

.dot-main {
    bottom: 48px;
    left: 50%;
}

.dot-small {
    top: 275px;
    left: 50%;

    animation-delay: .7s;
}

@keyframes cloudDotPulse {

    0%, 100% {
        transform: scale(.7);
        opacity: .5;
    }

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


/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 991px) {

    .ai-services-section,
    .ai-toolkit-section,
    .cloud-section {
        padding: 75px 0;
    }

    .ai-heading h2,
    .cloud-title {
        font-size: 48px;
    }

    .cloud-visual {
        margin: 30px auto 0;
    }
}


@media (max-width: 767px) {

    .ai-heading h2,
    .cloud-title {
        font-size: 40px;

        letter-spacing: -1.3px;
    }

    .ai-heading p {
        font-size: 15px;
    }

    .ai-service-card {
        min-height: 225px;
    }

    .toolkit-heading h2 {
        font-size: 40px;
    }

    .toolkit-card {
        min-height: 100px;
    }

    .cloud-visual {
        height: 350px;

        border-radius: 20px;
    }

    .cloud-icon {
        top: 45px;
        font-size: 80px;
    }

    .cloud-server {
        top: 165px;
    }

    .device-one {
        left: 30px;
        bottom: 55px;
    }

    .device-two {
        right: 30px;
        bottom: 55px;
    }

    .connection-one {
        left: 170px;
        top: 225px;
    }

    .connection-two {
        left: 275px;
        top: 225px;
    }

}

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

:root {
    --kosmos-yellow: #ffc400;
    --kosmos-yellow-dark: #dca900;
    --kosmos-black: #111114;
    --kosmos-text: #1a1a1e;
    --kosmos-muted: #66666e;
}


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

.kosmos-hero {
    position: relative;

    min-height: 700px;

    display: flex;
    align-items: center;

    padding: 115px 0 85px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 38%,
            rgba(255, 204, 0, .22),
            transparent 27%
        ),
        radial-gradient(
            circle at 5% 85%,
            rgba(255, 214, 70, .13),
            transparent 28%
        ),
        #fff;

    color: var(--kosmos-black);
}


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

.hero-bg {
    position: absolute;

    inset: 0;

    pointer-events: none;

    overflow: hidden;
}


/* Fine Grid */

.hero-grid {
    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(30,30,30,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(30,30,30,.035) 1px,
            transparent 1px
        );

    background-size: 75px 75px;

    opacity: .7;
}


/* Network Lines */

.network {
    position: absolute;

    width: 430px;
    height: 430px;

    border: 1px solid rgba(226, 181, 31, .3);

    transform: rotate(45deg);

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

.network-1 {
    top: -220px;
    left: -90px;
}

.network-2 {
    top: -150px;
    right: -100px;

    animation-delay: -4s;
}

.network-3 {
    bottom: -250px;
    right: 10%;

    animation-delay: -7s;
}


@keyframes networkFloat {

    0%, 100% {
        transform: rotate(45deg) translate(0, 0);
    }

    50% {
        transform: rotate(45deg) translate(25px, -20px);
    }

}


/* Background Nodes */

.bg-node {
    position: absolute;

    width: 13px;
    height: 13px;

    border-radius: 50%;

    background: #e8c45a;

    box-shadow:
        0 0 15px rgba(255, 196, 0, .35);

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

.node-1 {
    top: 18%;
    left: 4%;
}

.node-2 {
    top: 23%;
    left: 21%;

    animation-delay: .8s;
}

.node-3 {
    top: 16%;
    left: 44%;

    animation-delay: 1.4s;
}

.node-4 {
    top: 33%;
    right: 36%;

    animation-delay: 2s;
}

.node-5 {
    top: 42%;
    right: 6%;

    animation-delay: 2.5s;
}

.node-6 {
    bottom: 25%;
    left: 5%;

    animation-delay: 1s;
}

.node-7 {
    bottom: 14%;
    left: 45%;

    animation-delay: 2.7s;
}

.node-8 {
    bottom: 20%;
    right: 14%;

    animation-delay: 3.2s;
}


@keyframes bgNodeFloat {

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

    50% {
        transform: translateY(-10px);
        opacity: 1;
    }

}


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

.hero-content {
    position: relative;
    z-index: 5;

    max-width: 790px;
}


/* Badge */

.hero-badge {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 20px;

    margin-bottom: 10px;

    border: 1px solid rgba(206, 160, 0, .45);

    border-radius: 30px;

    background: rgba(255, 216, 91, .22);

    color: #735700;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    backdrop-filter: blur(4px);
}


.hero-badge b {
    color: var(--kosmos-yellow-dark);
}


/* Heading */

.hero-content h1 {
    margin: 0;

    color: var(--kosmos-black);

    font-size: clamp(
        58px,
        5.8vw,
        92px
    );

    font-weight: 600;

    line-height: .99;

    letter-spacing: -4px;
}


/* Yellow Text */

.highlight-text {
    position: relative;

    display: inline-block;

    z-index: 1;
}

.highlight-text::before {
    content: "";

    position: absolute;

    z-index: -1;

    left: -5px;
    right: -5px;

    bottom: 3px;

    height: 43%;

    background: #f9a813;

    transform-origin: left;

    animation: highlightReveal 1.1s ease forwards;

    transform: scaleX(0);
}


@keyframes highlightReveal {

    to {
        transform: scaleX(1);
    }

}


/* Tagline */

.hero-content h2 {
    margin: 27px 0 10px;

    color: #35353a;

    font-size: 20px;

    font-weight: 600;

    line-height: 1.35;
}


/* Description */

.hero-description {
    max-width: 780px;

    margin: 0;

    color: var(--kosmos-muted);

    font-size: 16px;

    line-height: 1.65;
}


/* =====================================================
   BUTTONS
===================================================== */

.hero-buttons {
    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 34px;
}


.hero-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 58px;

    padding: 0 30px;

    border-radius: 35px;

    text-decoration: none;

    font-size: 17px;

    font-weight: 600;

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


/* Primary */

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

    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
}

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

    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);

    transform: translateY(-5px);

    box-shadow:
        0 15px 30px rgba(255, 196, 0, .28);
}

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

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


/* Outline */

.hero-btn-outline {
    color: #19191d;

    border: 2px solid var(--kosmos-yellow);

    background: rgba(255,255,255,.65);
}

.hero-btn-outline:hover {
    color: #111;

    background: var(--kosmos-yellow);

    transform: translateY(-5px);

    box-shadow:
        0 12px 25px rgba(255,196,0,.2);
}


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

.hero-features {
    display: flex;

    flex-wrap: wrap;

    gap: 25px;

    margin-top: 37px;
}


.hero-features span {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #38383d;

    font-size: 16px;

    font-weight: 600;
}


.hero-features i {
    width: 9px;
    height: 9px;

    display: inline-block;

    background: var(--kosmos-yellow-dark);

    transform: rotate(45deg);
}


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

.hero-ai-visual {
    position: relative;

    width: 560px;
    height: 560px;

    max-width: 100%;

    margin-left: auto;

    display: flex;

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


/* Glow */

.ai-glow {
    position: absolute;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,196,0,.19),
            transparent 67%
        );

    filter: blur(12px);

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


@keyframes glowPulse {

    0%, 100% {
        transform: scale(.9);

        opacity: .65;
    }

    50% {
        transform: scale(1.1);

        opacity: 1;
    }

}


/* =====================================================
   ORBITS
===================================================== */

.ai-orbit {
    position: absolute;

    border: 1px solid rgba(222, 177, 25, .38);

    border-radius: 50%;
}

.orbit-one {
    width: 300px;
    height: 300px;

    animation: orbitRotate 18s linear infinite;
}

.orbit-two {
    width: 410px;
    height: 410px;

    animation: orbitRotateReverse 25s linear infinite;
}


@keyframes orbitRotate {

    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes orbitRotateReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0);
    }

}


/* =====================================================
   CENTER AI
===================================================== */

.ai-center {
    position: absolute;

    width: 145px;
    height: 145px;

    border-radius: 50%;

    display: flex;

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

    background: #0c0c0e;

    border: 2px solid var(--kosmos-yellow);

    box-shadow:
        0 0 0 25px rgba(255,196,0,.03),
        0 0 50px rgba(255,196,0,.18);

    z-index: 5;

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


@keyframes centerPulse {

    0%, 100% {
        box-shadow:
            0 0 0 0 rgba(255,196,0,.1),
            0 0 40px rgba(255,196,0,.12);
    }

    50% {
        box-shadow:
            0 0 0 20px rgba(255,196,0,.04),
            0 0 65px rgba(255,196,0,.25);
    }

}


.ai-center-inner {
    width: 60px;
    height: 60px;

    border-radius: 50%;

    display: flex;

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

    background: var(--kosmos-yellow);

    color: #111;

    font-size: 21px;

    font-weight: 700;
}


/* =====================================================
   AI LINES
===================================================== */

.ai-line {
    position: absolute;

    width: 175px;

    border-top: 1px dashed rgba(232,184,20,.65);

    transform-origin: center;

    z-index: 1;
}

.line-top-left {
    transform: rotate(150deg);

    top: 150px;
    left: 80px;
}

.line-top-right {
    transform: rotate(30deg);

    top: 150px;
    right: 80px;
}

.line-bottom-left {
    transform: rotate(30deg);

    bottom: 150px;
    left: 80px;
}

.line-bottom-right {
    transform: rotate(150deg);

    bottom: 150px;
    right: 80px;
}

.line-top {
    width: 280px;

    top: 90px;
    left: 50%;

    transform: translateX(-50%)
               rotate(90deg);
}

.line-bottom {
    width: 280px;

    bottom: 90px;
    left: 50%;

    transform: translateX(-50%)
               rotate(90deg);
}


/* =====================================================
   AI PILL LABELS
===================================================== */

.ai-pill {
    position: absolute;

    z-index: 6;

    min-width: 120px;

    padding: 9px 18px;

    border-radius: 30px;

    background: #111114;

    color: white;

    text-align: center;

    font-size: 14px;

    font-weight: 600;

    box-shadow:
        0 8px 20px rgba(0,0,0,.15);

    transition:
        transform .3s ease,
        background .3s ease;
}


.ai-pill:hover {
    background: var(--kosmos-yellow);

    color: #111;

    transform: scale(1.08);
}


.pill-cloud {
    top: 100px;
    left: 25px;
}

.pill-agents {
    top: 115px;
    right: 20px;
}

.pill-data {
    bottom: 110px;
    left: 35px;
}

.pill-automation {
    bottom: 90px;
    right: 10px;
}


.pill-dot {
    position: absolute;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: var(--kosmos-yellow);

    top: 50%;

    transform: translateY(-50%);
}

.pill-cloud .pill-dot,
.pill-data .pill-dot {
    right: -25px;
}

.pill-agents .pill-dot,
.pill-automation .pill-dot {
    left: -25px;
}


/* =====================================================
   ORBIT NODES
===================================================== */

.orbit-node {
    position: absolute;

    width: 20px;
    height: 20px;

    border-radius: 50%;

    background: var(--kosmos-yellow);

    box-shadow:
        0 0 15px rgba(255,196,0,.4);

    z-index: 4;

    animation: nodePulse 2.5s ease-in-out infinite;
}


.orbit-node-1 {
    top: 70px;
    left: 265px;
}

.orbit-node-2 {
    top: 170px;
    right: 40px;

    animation-delay: .6s;
}

.orbit-node-3 {
    bottom: 75px;
    left: 265px;

    animation-delay: 1.2s;
}

.orbit-node-4 {
    bottom: 170px;
    left: 45px;

    animation-delay: 1.8s;
}


@keyframes nodePulse {

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

    50% {
        transform: scale(1.25);
    }

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1199px) {

    .kosmos-hero {
        min-height: auto;

        padding: 100px 0 70px;
    }

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

    .hero-content h2 {
        font-size: 21px;
    }

    .hero-description {
        font-size: 17px;
    }

    .hero-ai-visual {
        width: 480px;
        height: 480px;
    }

    .orbit-two {
        width: 360px;
        height: 360px;
    }

    .orbit-one {
        width: 270px;
        height: 270px;
    }

    .ai-center {
        width: 125px;
        height: 125px;
    }

}


@media (max-width: 991px) {

    .kosmos-hero {
        padding-top: 100px;
    }

    .hero-content {
        max-width: 100%;

        text-align: center;
    }

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

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

    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }

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

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

    .hero-ai-visual {
        margin: 70px auto 0;
    }

}


@media (max-width: 767px) {

    .kosmos-hero {
        padding: 80px 0 60px;
    }

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

        line-height: 1.02;

        letter-spacing: -2.5px;
    }

    .hero-content h2 {
        font-size: 19px;
    }

    .hero-description {
        font-size: 15px;

        line-height: 1.6;
    }

    .hero-badge {
        padding: 8px 13px;

        font-size: 10px;

        gap: 5px;

        letter-spacing: .8px;
    }

    .hero-buttons {
        flex-direction: column;

        width: 100%;
    }

    .hero-btn {
        width: 100%;
    }

    .hero-features {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 14px;

        text-align: left;
    }

    .hero-features span {
        font-size: 13px;
    }

    .hero-ai-visual {
        width: 350px;
        height: 350px;

        margin-top: 50px;
    }

    .orbit-one {
        width: 190px;
        height: 190px;
    }

    .orbit-two {
        width: 285px;
        height: 285px;
    }

    .ai-center {
        width: 100px;
        height: 100px;
    }

    .ai-center-inner {
        width: 45px;
        height: 45px;

        font-size: 16px;
    }

    .ai-pill {
        min-width: 85px;

        padding: 7px 12px;

        font-size: 11px;
    }

    .pill-cloud {
        top: 55px;
        left: 0;
    }

    .pill-agents {
        top: 65px;
        right: 0;
    }

    .pill-data {
        bottom: 55px;
        left: 0;
    }

    .pill-automation {
        bottom: 50px;
        right: 0;
    }

    .ai-line {
        width: 110px;
    }

    .orbit-node {
        width: 13px;
        height: 13px;
    }

    .orbit-node-1 {
        top: 32px;
        left: 168px;
    }

    .orbit-node-2 {
        top: 100px;
        right: 20px;
    }

    .orbit-node-3 {
        bottom: 32px;
        left: 168px;
    }

    .orbit-node-4 {
        bottom: 100px;
        left: 20px;
    }

}


@media (max-width: 420px) {

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

    .hero-features {
        grid-template-columns: 1fr;
    }

    .hero-ai-visual {
        width: 320px;
        height: 320px;
    }

}


/* ==========================================
   AI TOOLKIT
========================================== */

.ai-toolkit-section {
    position: relative;

    padding: 95px 0 110px;

    background: #fffdf7;

    overflow: hidden;
}


/* Dot Background */

.toolkit-dots {
    position: absolute;
    inset: 0;

    background-image: radial-gradient(
        rgba(244,196,0,.45) 1px,
        transparent 1px
    );

    background-size: 27px 27px;

    opacity: .65;

    animation: dotsMove 12s linear infinite;
}

@keyframes dotsMove {

    from {
        background-position: 0 0;
    }

    to {
        background-position: 27px 27px;
    }
}


.toolkit-heading {
    margin-bottom: 48px;
}

.toolkit-heading h2 {
    color: var(--black);

    font-size: clamp(40px, 4vw, 58px);

    line-height: 1.05;

    letter-spacing: -2px;

    font-weight: 600;

    margin: 0;
}


/* Toolkit Cards */

.toolkit-card {
    min-height: 105px;

    background: rgba(255,255,255,.94);

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

    border-radius: 13px;

    display: flex;

    flex-direction: column;

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

    gap: 12px;

    padding: 18px 10px;

    text-align: center;

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

.toolkit-card i {
    color: var(--gold);

    font-size: 32px;

    transition:
        transform .35s ease,
        color .35s ease;
}

.toolkit-card span {
    color: var(--black);

    font-size: 17px;
    font-weight: 600;
}

.toolkit-card:hover {
    transform: translateY(-8px) scale(1.02);

    border-color: var(--gold);

    box-shadow:
        0 15px 30px rgba(0,0,0,.08);
}

.toolkit-card:hover i {
    color: var(--gold-dark);

    transform: rotate(180deg) scale(1.2);
}

  .gold-glow {
            box-shadow: 0 0 25px -5px rgba(234, 179, 8, 0.25);
        }
        .gold-gradient-text {
            background: linear-gradient(135deg, #CA8A04 0%, #EAB308 50%, #A16207 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        @keyframes marquee {
            0% { transform: translateX(0%); }
            100% { transform: translateX(-50%); }
        }
        .animate-marquee {
            display: flex;
            width: 200%;
            animation: marquee 25s linear infinite;
        }
        .animate-marquee:hover {
            animation-play-state: paused;
        }


        /* ==========================================
   KOSMOSONE ABOUT + IMPACT SECTION
========================================== */

.kosmosone-about {
    position: relative;
    padding: 100px 0;
    background: #fafafa;
    overflow: hidden;
}


/* Subtle background decoration */
.kosmosone-about::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    left: -300px;
    bottom: -280px;
    border: 70px solid rgba(253, 204, 19, 0.12);
    border-radius: 50%;
    pointer-events: none;
}


/* ==========================================
   BADGES
========================================== */

.about-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 9px 18px;

    border-radius: 50px;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.8px;

    text-transform: uppercase;
}


/* Impact badge */

.impact-badge {
    color: #171717;
    background: linear-gradient(
        135deg,
        #FDCC13 0%,
        #F9A313 100%
    );

    border: 1px solid #F9A313;
}


/* Who we are badge */

.who-badge {
    color: #b77a00;
    background: #fff;
    border: 1px solid #F9A313;
}


/* ==========================================
   LEFT IMPACT AREA
========================================== */

.impact-title {
    max-width: 580px;

    margin: 20px 0 30px;

    font-size: 40px;

    line-height: 1.1;

    font-weight: 700;

    color: #171717;
}

.impact-title span {
    display: block;

    background: linear-gradient(
        135deg,
        #FDCC13 0%,
        #F9A313 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ==========================================
   IMPACT CARDS
========================================== */

.impact-card {
    position: relative;

    min-height: 180px;

    padding: 25px 25px 22px;

    background: #ffffff;

    border-radius: 18px;

    border-left: 4px solid #F9A313;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.05);

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


.impact-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.09);
}


/* Card icon */

.impact-icon {
    width: 50px;
    height: 50px;

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

    margin-bottom: 18px;

    border-radius: 50%;

    color: #F5A900;

    background: linear-gradient(
        135deg,
        rgba(253, 204, 19, 0.16),
        rgba(249, 163, 19, 0.08)
    );

    font-size: 20px;

    transition: all 0.3s ease;
}


.impact-card:hover .impact-icon {
    color: #fff;

    background: linear-gradient(
        135deg,
        #FDCC13,
        #F9A313
    );

    transform: scale(1.08);
}


/* Counter */

.impact-card h3 {
    margin: 0 0 5px;

    font-size: 36px;

    line-height: 1;

    font-weight: 800;

    color: #101820;
}


/* Counter text */

.impact-card p {
    margin: 0;

    font-size: 15px;

    color: #647080;

    font-weight: 500;
}


/* ==========================================
   RIGHT ABOUT AREA
========================================== */

.about-content {
    padding-left: 20px;
}


.about-title {
    margin: 15px 0 15px;
    font-size: 40px;
    line-height: 50px;
    font-weight: 700;
    color: #151b23;
}


.about-title span {
    display: block;

    background: linear-gradient(
        135deg,
        #FDCC13 0%,
        #F9A313 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


.about-description {
    max-width: 650px;

    color: #536071;

    font-size: 16px;

    line-height: 1.75;
}


.about-description strong {
    color: #20252b;
}


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

.about-feature {
    display: flex;

    align-items: flex-start;

    gap: 16px;

    height: 100%;

    transition: transform 0.3s ease;
}


.about-feature:hover {
    transform: translateY(-4px);
}


/* Feature icon */

.feature-icon {
    flex-shrink: 0;

    width: 58px;
    height: 58px;

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

    border-radius: 15px;

    color: #fff;

    background: #000;

    font-size: 22px;

    box-shadow:
        0 8px 20px rgba(249, 163, 19, 0.20);
}


/* Feature heading */

.about-feature h5 {
    margin: 3px 0 7px;

    font-size: 17px;

    font-weight: 750;

    color: #151b23;
}


/* Feature description */

.about-feature p {
    margin: 0;

    color: #657181;

    font-size: 14px;

    line-height: 1.6;
}


/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 991px) {

    .kosmosone-about {
        padding: 80px 0;
    }

    .about-content {
        padding-left: 0;
    }

    .impact-title,
    .about-title {
        font-size: 2.6rem;
    }

}


@media (max-width: 767px) {

    .kosmosone-about {
        padding: 65px 0;
    }

    .impact-title,
    .about-title {
        font-size: 2.2rem;
    }

    .impact-card {
        min-height: 180px;
        padding: 20px;
    }

    .impact-card h3 {
        font-size: 2.6rem;
    }

    .feature-icon {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }

}


@media (max-width: 575px) {

    .impact-card {
        min-height: 165px;
    }

    .impact-card h3 {
        font-size: 2.3rem;
    }

    .impact-card p {
        font-size: 13px;
    }

    .about-description {
        font-size: 15px;
    }

}