/* ==========================================
   GOOGLE FONT
========================================== */

@import url(
    "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
);


/* ==========================================
   RESET
========================================== */

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


html {
    scroll-behavior: smooth;
}


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

    background: #01040b;

    color: #ffffff;

    overflow-x: hidden;
}


body.modal-open {
    overflow: hidden;
}


a {
    text-decoration: none;
}


button,
a {
    font-family: inherit;
}


button {
    border: none;
}


/* ==========================================
   GLOBAL BOLD HEADINGS
========================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 800;
}


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

.space-background {
    position: fixed;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: -20;

    background:

        radial-gradient(
            circle at 50% 45%,
            rgba(17, 89, 165, 0.3),
            transparent 30%
        ),

        radial-gradient(
            circle at 10% 25%,
            rgba(20, 67, 135, 0.16),
            transparent 35%
        ),

        radial-gradient(
            circle at 90% 60%,
            rgba(91, 37, 140, 0.12),
            transparent 35%
        ),

        linear-gradient(
            180deg,
            #01030a 0%,
            #030916 55%,
            #01030a 100%
        );
}


.stars {
    position: absolute;

    inset: -200px;
}


.stars-one {
    background-image:

        radial-gradient(
            rgba(255, 255, 255, 0.9) 1px,
            transparent 1.5px
        );

    background-size: 60px 60px;

    animation:
        starsMove 55s linear infinite;
}


.stars-two {
    background-image:

        radial-gradient(
            rgba(105, 207, 255, 0.9) 1px,
            transparent 1.5px
        );

    background-size: 100px 100px;

    opacity: 0.55;

    animation:
        starsMove 85s linear infinite reverse;
}


.stars-three {
    background-image:

        radial-gradient(
            rgba(255, 255, 255, 0.6) 1px,
            transparent 1.5px
        );

    background-size: 170px 170px;

    opacity: 0.4;
}


@keyframes starsMove {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(180px);
    }

}


.nebula {
    position: absolute;

    width: 550px;
    height: 550px;

    border-radius: 50%;

    filter: blur(120px);

    opacity: 0.16;

    animation:
        nebulaFloat 15s ease-in-out infinite;
}


.nebula-one {

    top: 10%;
    left: -20%;

    background:
        #236ee5;
}


.nebula-two {

    right: -20%;
    bottom: 5%;

    background:
        #692ed0;

    animation-delay: -7s;
}


@keyframes nebulaFloat {

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

    50% {
        transform:
            translate(40px, -30px)
            scale(1.12);
    }

}


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

.site-header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    padding: 20px 0;

    transform:
        translateY(-110%);

    opacity: 0;

    pointer-events: none;

    transition:
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.4s ease,
        padding 0.4s ease,
        background 0.4s ease,
        border-color 0.4s ease;
}


.site-header.scrolled,
.site-header.visible {

    transform:
        translateY(0);

    opacity: 1;

    pointer-events: auto;

    padding: 12px 0;

    background:
        rgba(2, 7, 18, 0.88);

    backdrop-filter:
        blur(20px);

    border-bottom:
        1px solid
        rgba(111, 209, 255, 0.12);
}


.header-container {

    width:
        min(1450px, calc(100% - 60px));

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


/* ==========================================
   LOGO
========================================== */

.logo {

    display: flex;

    align-items: center;

    gap: 12px;

    color: white;
}


.logo-mark {

    width: 46px;
    height: 46px;

    display: flex;

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

    border-radius: 50%;

    font-size: 21px;

    font-weight: 900;

    color: #bcecff;

    border:
        1px solid
        rgba(104, 213, 255, 0.75);

    background:

        radial-gradient(
            circle,
            rgba(39, 119, 187, 0.55),
            rgba(3, 11, 25, 0.95)
        );

    box-shadow:
        0 0 25px
        rgba(55, 183, 255, 0.25);
}


.logo-text {

    display: flex;

    flex-direction: column;
}


.logo-title {

    font-size: 14px;

    font-weight: 900;

    letter-spacing: 2px;
}


.logo-subtitle {

    margin-top: 3px;

    font-size: 7px;

    letter-spacing: 3px;

    color:
        rgba(188, 218, 240, 0.65);
}


/* ==========================================
   DESKTOP MENU
========================================== */

.desktop-nav {

    display: flex;

    align-items: center;

    gap: 34px;
}


.desktop-nav a {

    position: relative;

    font-size: 13px;

    font-weight: 800;

    color:
        rgba(220, 233, 245, 0.8);

    transition:
        0.3s ease;
}


.desktop-nav a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 2px;

    background:
        #7edfff;

    transition:
        0.3s ease;
}


.desktop-nav a:hover {

    color: white;
}


.desktop-nav a:hover::after {

    width: 100%;
}


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

.header-inquiry {

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        12px 19px;

    cursor: pointer;

    border-radius: 7px;

    font-size: 12px;

    font-weight: 800;

    color: #e5f8ff;

    border:
        1px solid
        rgba(105, 209, 255, 0.55);

    background:
        rgba(29, 111, 180, 0.15);

    transition:
        0.3s ease;
}


.header-inquiry:hover {

    transform:
        translateY(-2px);

    background:
        rgba(46, 143, 215, 0.3);

    box-shadow:
        0 0 25px
        rgba(61, 181, 255, 0.22);
}


/* ==========================================
   MOBILE MENU BUTTON
========================================== */

.mobile-menu-button {

    display: none;

    width: 44px;
    height: 44px;

    padding: 9px;

    cursor: pointer;

    border-radius: 8px;

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

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


.mobile-menu-button span {

    display: block;

    width: 100%;
    height: 2px;

    margin: 5px 0;

    background:
        #d7f4ff;

    transition:
        0.3s ease;
}


.mobile-menu-button.active span:nth-child(1) {

    transform:
        translateY(7px)
        rotate(45deg);
}


.mobile-menu-button.active span:nth-child(2) {

    opacity: 0;
}


.mobile-menu-button.active span:nth-child(3) {

    transform:
        translateY(-7px)
        rotate(-45deg);
}


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

.mobile-menu {

    position: absolute;

    top: 100%;
    left: 0;

    width: 100%;

    display: flex;

    flex-direction: column;

    max-height: 0;

    overflow: hidden;

    padding: 0 25px;

    background:
        rgba(3, 8, 19, 0.98);

    backdrop-filter:
        blur(25px);

    transition:
        0.4s ease;
}


.mobile-menu.active {

    max-height: 600px;

    padding:
        20px 25px 25px;

    border-bottom:
        1px solid
        rgba(111, 209, 255, 0.15);
}


.mobile-menu a {

    padding: 15px 0;

    font-size: 14px;

    font-weight: 800;

    color:
        rgba(224, 237, 247, 0.9);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}


.mobile-inquiry {

    margin-top: 15px;

    padding: 14px;

    cursor: pointer;

    border-radius: 7px;

    font-size: 13px;

    font-weight: 800;

    color: white;

    background:
        rgba(38, 130, 205, 0.22);

    border:
        1px solid
        rgba(100, 205, 255, 0.45);
}


/* ==========================================
   HOME PAGE
========================================== */

.investment-universe {

    position: relative;

    width: 100%;

    max-width: 1600px;

    min-height: 100vh;

    margin: auto;

    display: flex;

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

    padding:
        120px 40px 150px;
}


/* ==========================================
   GLOBE AREA
========================================== */

.globe-area {

    position: relative;

    width:
        clamp(340px, 43vw, 650px);

    aspect-ratio: 1 / 1;

    display: flex;

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

    isolation: isolate;

    z-index: 20;
}


.globe-glow {

    position: absolute;

    width: 125%;
    height: 125%;

    border-radius: 50%;

    z-index: 1;

    background:

        radial-gradient(
            circle,
            rgba(46, 157, 255, 0.3) 0%,
            rgba(35, 110, 215, 0.14) 35%,
            transparent 72%
        );

    filter:
        blur(35px);

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


@keyframes premiumGlow {

    0%,
    100% {

        transform:
            scale(0.94);

        opacity: 0.65;
    }

    50% {

        transform:
            scale(1.08);

        opacity: 1;
    }

}


/* ==========================================
   FLOATING GLOBE
========================================== */

.earth-float {

    position: relative;

    width: 88%;

    aspect-ratio: 1 / 1;

    z-index: 10;

    animation:
        earthFloat 6s ease-in-out infinite;
}


@keyframes earthFloat {

    0%,
    100% {

        transform:
            translateY(0);
    }

    50% {

        transform:
            translateY(-14px);
    }

}


/* ==========================================
   EARTH ROTATION
========================================== */

.earth {

    position: relative;

    width: 100%;
    height: 100%;

    display: block;

    overflow: hidden;

    padding: 0;

    cursor: pointer;

    border-radius: 50%;

    background:
        #020812;

    animation:
        globeEntrance 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards,
        globeRotate 30s linear infinite 1.5s;

    box-shadow:

        0 0 5px
        rgba(200, 245, 255, 1),

        0 0 25px
        rgba(76, 198, 255, 0.85),

        0 0 65px
        rgba(44, 146, 255, 0.65),

        0 0 140px
        rgba(20, 98, 210, 0.4);

    transition:
        0.4s ease;
}


@keyframes globeEntrance {

    0% {
        opacity: 0;
        transform:
            scale(0.35)
            rotate(-240deg);
        filter:
            blur(12px)
            brightness(0.6);
    }

    70% {
        opacity: 1;
        transform:
            scale(1.05)
            rotate(12deg);
        filter:
            blur(0px)
            brightness(1.15);
    }

    100% {
        opacity: 1;
        transform:
            scale(1)
            rotate(0deg);
        filter:
            blur(0px)
            brightness(1);
    }

}


@keyframes globeRotate {

    from {

        transform:
            rotate(0deg);
    }

    to {

        transform:
            rotate(360deg);
    }

}


.earth:hover {

    animation-play-state:
        paused;

    transform:
        scale(1.03);

    box-shadow:

        0 0 8px
        rgba(225, 250, 255, 1),

        0 0 40px
        rgba(78, 210, 255, 1),

        0 0 110px
        rgba(46, 148, 255, 0.85);
}


.earth img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 50%;

    transform:
        scale(1.04);

    pointer-events: none;

    user-select: none;
}


.earth-overlay {

    position: absolute;

    inset: 0;

    z-index: 4;

    pointer-events: none;

    border-radius: 50%;

    background:

        radial-gradient(
            circle at 25% 22%,
            rgba(255, 255, 255, 0.18),
            transparent 28%
        ),

        linear-gradient(
            115deg,
            rgba(0, 8, 25, 0.12),
            transparent 45%,
            rgba(0, 0, 0, 0.35)
        );
}


.earth::before {

    content: "";

    position: absolute;

    inset: 2px;

    z-index: 6;

    pointer-events: none;

    border-radius: 50%;

    border:
        2px solid
        rgba(143, 226, 255, 0.8);

    box-shadow:

        inset 0 0 25px
        rgba(73, 199, 255, 0.35),

        0 0 15px
        rgba(117, 220, 255, 0.7);
}


.earth::after {

    content: "";

    position: absolute;

    inset: -12px;

    z-index: -1;

    pointer-events: none;

    border-radius: 50%;

    border:
        1px solid
        rgba(112, 213, 255, 0.25);

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


@keyframes outerPulse {

    0%,
    100% {

        transform:
            scale(1);

        opacity: 0.4;
    }

    50% {

        transform:
            scale(1.05);

        opacity: 1;
    }

}


.earth-label {

    position: absolute;

    left: 50%;
    bottom: 13%;

    transform:
        translateX(-50%);

    z-index: 10;

    padding:
        9px 16px;

    border-radius: 30px;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;

    color: white;

    background:
        rgba(3, 10, 22, 0.65);

    border:
        1px solid
        rgba(130, 220, 255, 0.3);

    backdrop-filter:
        blur(10px);

    pointer-events: none;
}


.earth-label small {

    display: block;

    margin-top: 3px;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 1px;

    color:
        rgba(185, 225, 245, 0.75);
}


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

.orbit {

    position: absolute;

    left: 50%;
    top: 50%;

    border-radius: 50%;

    pointer-events: none;

    z-index: 3;
}


.orbit-one {

    width: 145%;
    height: 38%;

    border:
        1px solid
        rgba(99, 214, 255, 0.48);

    transform:
        translate(-50%, -50%)
        rotate(-12deg);

    animation:
        orbitPulse 6s ease-in-out infinite;
}


.orbit-two {

    width: 135%;
    height: 48%;

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

    transform:
        translate(-50%, -50%)
        rotate(13deg);

    animation:
        orbitPulse 7s ease-in-out infinite reverse;
}


.orbit-three {

    width: 118%;
    height: 65%;

    border:
        1px solid
        rgba(109, 154, 255, 0.35);

    transform:
        translate(-50%, -50%)
        rotate(38deg);

    animation:
        orbitPulse 8s ease-in-out infinite;
}


.orbit-four {

    width: 108%;
    height: 80%;

    border:
        1px dashed
        rgba(130, 220, 255, 0.24);

    transform:
        translate(-50%, -50%)
        rotate(65deg);

    animation:
        orbitPulse 10s ease-in-out infinite reverse;
}


@keyframes orbitPulse {

    0%,
    100% {

        opacity: 0.35;
    }

    50% {

        opacity: 0.95;
    }

}


/* ==========================================
   GLOBE DATA
========================================== */

.globe-data {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 150%;

    transform:
        translate(-50%, -50%)
        scale(0.92);

    display: flex;

    justify-content: space-between;

    pointer-events: none;

    z-index: 30;

    opacity: 0;

    transition:
        opacity 0.65s ease,
        transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);

    transition-delay: 0.25s;
}


.cards-revealed .globe-data {

    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);
}


.globe-data > div {

    display: flex;

    flex-direction: column;

    padding:
        12px 15px;

    border-radius: 8px;

    background:
        rgba(4, 12, 25, 0.68);

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

    backdrop-filter:
        blur(10px);
}


.globe-data strong {

    font-size: 15px;

    font-weight: 900;

    color:
        #bdeaff;
}


.globe-data span {

    margin-top: 4px;

    font-size: 8px;

    font-weight: 600;

    color:
        rgba(190, 210, 225, 0.7);
}


/* ==========================================
   VERTICAL CARDS
========================================= */

.vertical-card {

    position: absolute;

    width: 330px;

    min-height: 145px;

    padding: 22px;

    z-index: 50;

    cursor: pointer;

    overflow: hidden;

    border-radius: 14px;

    background:

        linear-gradient(
            135deg,
            rgba(10, 20, 38, 0.94),
            rgba(4, 10, 20, 0.76)
        );

    backdrop-filter:
        blur(18px);

    border:
        1px solid
        rgba(125, 195, 255, 0.25);

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}


.vertical-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(118, 214, 255, 0.9),
            transparent
        );
}


.cards-revealed .vertical-card:hover {

    transform:
        translateY(-8px)
        scale(1.02);

    border-color:
        rgba(129, 222, 255, 0.7);

    box-shadow:

        0 0 30px
        rgba(70, 182, 255, 0.16),

        0 0 70px
        rgba(34, 115, 220, 0.12);
}


.card-inner {

    display: flex;

    align-items: center;

    gap: 16px;
}


.card-left-top {

    top: 19%;
    left: 4%;

    transform:
        translate(-70px, -40px)
        scale(0.9);

    transition-delay: 0.05s;
}


.card-right-top {

    top: 19%;
    right: 4%;

    transform:
        translate(70px, -40px)
        scale(0.9);

    transition-delay: 0.15s;
}


.card-left-bottom {

    bottom: 18%;
    left: 4%;

    transform:
        translate(-70px, 40px)
        scale(0.9);

    transition-delay: 0.25s;
}


.card-right-bottom {

    bottom: 18%;
    right: 4%;

    transform:
        translate(70px, 40px)
        scale(0.9);

    transition-delay: 0.35s;
}


.cards-revealed .card-left-top,
.cards-revealed .card-right-top,
.cards-revealed .card-left-bottom,
.cards-revealed .card-right-bottom {

    opacity: 1;

    pointer-events: auto;

    transform:
        translate(0, 0)
        scale(1);
}


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

.vertical-icon {

    width: 58px;
    height: 58px;

    min-width: 58px;

    display: flex;

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

    border-radius: 50%;

    font-size: 21px;

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

    transition:
        0.4s ease;
}


.vertical-card:hover .vertical-icon {

    transform:
        rotate(10deg)
        scale(1.1);
}


.blue-icon {

    color: #7edfff;

    border:
        1px solid
        rgba(100, 215, 255, 0.75);
}


.purple-icon {

    color: #c4a3ff;

    border:
        1px solid
        rgba(178, 131, 255, 0.7);
}


.orange-icon {

    color: #ffc170;

    border:
        1px solid
        rgba(255, 183, 85, 0.75);
}


.pink-icon {

    color: #ff9fc7;

    border:
        1px solid
        rgba(255, 126, 184, 0.7);
}


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

.card-number {

    display: block;

    margin-bottom: 6px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;

    color:
        rgba(128, 208, 255, 0.75);
}


.card-text h2 {

    font-size: 20px;

    font-weight: 900;

    margin-bottom: 6px;

    letter-spacing:
        -0.3px;
}


.card-text p {

    margin-bottom: 13px;

    font-size: 11px;

    font-weight: 500;

    color:
        rgba(183, 200, 215, 0.72);
}


.explore-button {

    padding:
        8px 14px;

    cursor: pointer;

    border-radius: 6px;

    font-size: 10px;

    font-weight: 800;

    color: #ddf6ff;

    background:
        rgba(51, 139, 210, 0.14);

    border:
        1px solid
        rgba(96, 198, 255, 0.45);

    transition:
        0.3s ease;
}


.explore-button:hover {

    background:
        rgba(60, 160, 230, 0.3);

    box-shadow:
        0 0 20px
        rgba(70, 188, 255, 0.25);
}


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

.bottom-stats {

    position: absolute;

    left: 50%;
    bottom: 5%;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 35px;

    z-index: 60;

    opacity: 0;

    transition:
        opacity 0.6s ease,
        transform 0.6s ease;

    transition-delay: 0.35s;
}


.cards-revealed .bottom-stats {

    opacity: 1;

    transform:
        translateX(-50%);
}


/* ==========================================
   SCROLL PROMPT (SCROLL TO EXPLORE)
========================================== */

.scroll-prompt {

    position: absolute;

    bottom: 30px;
    left: 50%;

    transform:
        translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;

    cursor: pointer;

    z-index: 70;

    opacity: 1;

    transition:
        opacity 0.45s ease,
        transform 0.45s ease;

    user-select: none;
}


.scroll-prompt.hidden {

    opacity: 0;

    pointer-events: none;

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


.scroll-prompt-text {

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;

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

    transition:
        color 0.3s ease;
}


.scroll-prompt:hover .scroll-prompt-text {

    color: #ffffff;
}


.scroll-mouse {

    width: 18px;
    height: 28px;

    border:
        1.5px solid
        rgba(125, 215, 255, 0.5);

    border-radius: 12px;

    position: relative;
}


.scroll-wheel {

    position: absolute;

    top: 5px;
    left: 50%;

    transform:
        translateX(-50%);

    width: 2px;
    height: 5px;

    background: #7edfff;

    border-radius: 2px;

    animation:
        scrollWheel 1.8s ease-in-out infinite;
}


@keyframes scrollWheel {

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

    35% {
        opacity: 1;
    }

    75%,
    100% {
        opacity: 0;
        transform:
            translateX(-50%)
            translateY(8px);
    }

}


.scroll-chevron {

    font-size: 10px;

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

    animation:
        chevronBounce 1.8s ease-in-out infinite;
}


@keyframes chevronBounce {

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

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

}


.stat-item {

    text-align: center;
}


.stat-item strong {

    display: block;

    font-size: 20px;

    font-weight: 900;

    color:
        #dff6ff;
}


.stat-item span {

    display: block;

    margin-top: 5px;

    font-size: 9px;

    font-weight: 600;

    color:
        rgba(180, 203, 220, 0.68);
}


.stat-divider {

    width: 1px;
    height: 35px;

    background:
        rgba(123, 209, 255, 0.25);
}


/* ==========================================
   MODAL
========================================== */

.investment-modal {

    position: fixed;

    inset: 0;

    display: none;

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

    padding: 20px;

    z-index: 5000;
}


.investment-modal.active {

    display: flex;

    animation:
        modalFade 0.35s ease;
}


@keyframes modalFade {

    from {

        opacity: 0;
    }

    to {

        opacity: 1;
    }

}


.modal-overlay {

    position: absolute;

    inset: 0;

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

    backdrop-filter:
        blur(12px);
}


.modal-box {

    position: relative;

    width:
        min(100%, 680px);

    max-height: 90vh;

    overflow-y: auto;

    z-index: 2;

    border-radius: 20px;

    background:

        linear-gradient(
            135deg,
            rgba(10, 23, 45, 0.99),
            rgba(3, 9, 20, 0.99)
        );

    border:
        1px solid
        rgba(112, 210, 255, 0.32);

    box-shadow:
        0 0 90px
        rgba(49, 145, 255, 0.2);

    animation:
        modalSlide 0.45s ease;
}


@keyframes modalSlide {

    from {

        opacity: 0;

        transform:
            translateY(30px)
            scale(0.96);
    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


.modal-content {

    padding:
        60px 50px 50px;
}


.modal-close {

    position: absolute;

    top: 18px;
    right: 18px;

    width: 42px;
    height: 42px;

    cursor: pointer;

    border-radius: 50%;

    color: white;

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

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

    transition:
        0.3s ease;
}


.modal-close:hover {

    transform:
        rotate(90deg);

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


.modal-label {

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 3px;

    color:
        #76d9ff;
}


.modal-content h2 {

    margin-top: 14px;

    font-size:
        clamp(28px, 5vw, 44px);

    font-weight: 900;

    letter-spacing:
        -1px;
}


.modal-description {

    margin-top: 20px;

    line-height: 1.8;

    font-size: 15px;

    color:
        rgba(190, 207, 222, 0.82);
}


.modal-points {

    display: grid;

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

    gap: 12px;

    margin-top: 30px;
}


.modal-point {

    padding: 15px;

    border-radius: 8px;

    font-size: 13px;

    font-weight: 800;

    color:
        #d8e8f4;

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

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

    transition:
        0.3s ease;
}


.modal-point:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(100, 205, 255, 0.4);

    background:
        rgba(50, 150, 220, 0.08);
}


.modal-inquiry {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 30px;

    padding:
        13px 24px;

    cursor: pointer;

    border-radius: 7px;

    font-size: 13px;

    font-weight: 900;

    color: white;

    background:
        rgba(48, 145, 220, 0.22);

    border:
        1px solid
        rgba(95, 199, 255, 0.65);

    transition:
        0.3s ease;
}


.modal-inquiry:hover {

    transform:
        translateY(-3px);

    background:
        rgba(48, 145, 220, 0.4);

    box-shadow:
        0 0 30px
        rgba(70, 190, 255, 0.2);
}


/* ==========================================
   FLOATING INQUIRY
========================================== */

.floating-inquiry {

    position: fixed;

    left: 50%;
    bottom: 25px;

    transform:
        translateX(-50%);

    z-index: 200;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        12px 22px;

    cursor: pointer;

    border-radius: 50px;

    font-size: 13px;

    font-weight: 900;

    color: white;

    background:
        rgba(5, 14, 28, 0.9);

    border:
        1px solid
        rgba(255, 185, 84, 0.65);

    backdrop-filter:
        blur(15px);

    transition:
        0.3s ease;
}


.floating-inquiry:hover {

    transform:
        translateX(-50%)
        translateY(-5px);

    box-shadow:
        0 0 35px
        rgba(255, 168, 61, 0.2);
}


.plus-circle {

    width: 25px;
    height: 25px;

    display: flex;

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

    border-radius: 50%;

    color:
        #ffc36f;

    border:
        1px solid
        rgba(255, 193, 108, 0.75);

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


@keyframes plusPulse {

    0%,
    100% {

        transform:
            scale(1);
    }

    50% {

        transform:
            scale(1.15);
    }

}


/* ==========================================
   FLOATING CONTACT BUTTONS
========================================== */

.floating-contact {

    position: fixed;

    right: 25px;

    width: 50px;
    height: 50px;

    display: flex;

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

    border-radius: 50%;

    z-index: 200;

    font-size: 20px;

    color: white;

    background:
        rgba(5, 14, 28, 0.9);

    border:
        1px solid
        rgba(97, 204, 255, 0.45);

    backdrop-filter:
        blur(15px);

    transition:
        0.3s ease;
}


.floating-contact:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 0 30px
        rgba(74, 190, 255, 0.3);
}


.whatsapp {

    bottom: 95px;

    color:
        #50e48b;
}


.email {

    bottom: 32px;

    color:
        #7edfff;
}


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

@media (max-width: 1350px) {

    .vertical-card {

        width: 290px;
    }


    .card-text h2 {

        font-size: 18px;
    }

}


@media (max-width: 1100px) {

    .desktop-nav {

        gap: 20px;
    }


    .vertical-card {

        width: 250px;
    }


    .globe-data {

        width: 140%;
    }

}


@media (max-width: 900px) {

    .desktop-nav,
    .header-inquiry {

        display: none;
    }


    .mobile-menu-button {

        display: block;
    }


    .investment-universe {

        min-height: auto;

        flex-direction: column;

        padding:
            115px 20px 140px;

        gap: 18px;
    }


    .globe-area {

        order: -1;

        width:
            min(78vw, 520px);

        margin-bottom: 35px;
    }


    .vertical-card {

        position: relative;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        width:
            min(100%, 600px);

        opacity: 0;

        transform:
            translateY(35px);

        transition:
            opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
            transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
            border-color 0.3s ease,
            box-shadow 0.3s ease;
    }


    .card-left-top,
    .card-right-top,
    .card-left-bottom,
    .card-right-bottom {

        transform:
            translateY(35px);
    }


    .cards-revealed .vertical-card,
    .cards-revealed .card-left-top,
    .cards-revealed .card-right-top,
    .cards-revealed .card-left-bottom,
    .cards-revealed .card-right-bottom,
    .vertical-card.in-view {

        opacity: 1;

        pointer-events: auto;

        transform:
            translateY(0);
    }


    .scroll-prompt {

        display: none;
    }


    .bottom-stats {

        position: relative;

        left: auto;
        bottom: auto;

        transform: none;

        margin-top: 30px;
    }


    .globe-data {

        display: none;
    }

}


@media (max-width: 576px) {

    .header-container {

        width:
            calc(100% - 30px);
    }


    .site-header {

        padding: 13px 0;
    }


    .logo-mark {

        width: 38px;
        height: 38px;

        font-size: 17px;
    }


    .logo-title {

        font-size: 11px;
    }


    .logo-subtitle {

        font-size: 6px;
    }


    .investment-universe {

        padding:
            100px 15px 130px;
    }


    .globe-area {

        width:
            min(84vw, 390px);
    }


    .globe-glow {

        filter:
            blur(22px);
    }


    .orbit-one {

        width: 135%;
        height: 35%;
    }


    .orbit-two {

        width: 130%;
        height: 48%;
    }


    .orbit-three {

        width: 115%;
        height: 65%;
    }


    .orbit-four {

        display: none;
    }


    .vertical-card {

        padding: 17px;
    }


    .vertical-icon {

        width: 48px;
        height: 48px;

        min-width: 48px;

        font-size: 18px;
    }


    .card-inner {

        gap: 13px;
    }


    .card-text h2 {

        font-size: 16px;
    }


    .card-text p {

        font-size: 10px;
    }


    .bottom-stats {

        gap: 20px;
    }


    .stat-item strong {

        font-size: 17px;
    }


    .stat-item span {

        font-size: 8px;
    }


    .modal-content {

        padding:
            55px 22px 30px;
    }


    .modal-points {

        grid-template-columns:
            1fr;
    }


    .modal-description {

        font-size: 14px;
    }


    .floating-inquiry {

        bottom: 18px;

        padding:
            10px 17px;

        font-size: 12px;
    }


    .floating-contact {

        right: 14px;

        width: 45px;
        height: 45px;
    }


    .whatsapp {

        bottom: 80px;
    }


    .email {

        bottom: 25px;
    }

}


@media (max-width: 380px) {

    .globe-area {

        width:
            min(86vw, 320px);
    }


    .vertical-card {

        padding: 14px;
    }


    .vertical-icon {

        width: 43px;
        height: 43px;

        min-width: 43px;
    }


    .card-text h2 {

        font-size: 14px;
    }


    .card-text p {

        font-size: 9px;
    }

}


/* ==========================================
   REDUCE MOTION
========================================== */

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

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;
    }

}

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

.stats-section {
    position: relative;
    width: 100%;

    /* SAME ON ALL DEVICES */
    padding: 22px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(35, 90, 150, 0.16) 0%,
            rgba(5, 10, 20, 0.75) 45%,
            #030711 100%
        );
}


/* ===============================
   SAME CONTAINER MARGIN ALL DEVICES
================================ */

.stats-container {
    position: relative;
    z-index: 2;

    width: calc(100% - 40px);
    max-width: 1200px;

    /* SAME LEFT & RIGHT SPACE */
    margin: 0 auto;
}


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

.stats-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    position: relative;

    border-top: 1px solid rgba(160, 210, 255, 0.55);
    border-bottom: 1px solid rgba(160, 210, 255, 0.55);

    background:
        linear-gradient(
            90deg,
            rgba(5, 15, 30, 0.7),
            rgba(30, 60, 95, 0.22),
            rgba(5, 15, 30, 0.7)
        );

    backdrop-filter: blur(10px);

    box-shadow:
        inset 0 0 30px rgba(80, 160, 255, 0.05),
        0 0 20px rgba(80, 160, 255, 0.08);
}


/* ===============================
   STAT ITEM
================================ */

.stat-item {
    position: relative;

    min-height: 115px;

    display: flex;
    flex-direction: column;

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

    text-align: center;

    /* SAME PADDING ALL DEVICES */
    padding: 20px;

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


/* ===============================
   VERTICAL DIVIDER
================================ */

.stat-item:not(:first-child)::before {
    content: "";

    position: absolute;

    left: 0;
    top: 24%;

    width: 1px;
    height: 52%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(220, 240, 255, 0.9),
            transparent
        );

    box-shadow:
        0 0 10px rgba(120, 200, 255, 0.7);
}


/* ===============================
   NUMBER
================================ */

.stat-item h2 {
    margin: 0 0 8px;

    color: #ffffff;

    font-size: clamp(20px, 2.2vw, 34px);

    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.3px;

    text-shadow:
        0 0 15px rgba(255, 255, 255, 0.15);
}


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

.stat-item p {
    margin: 0;

    color: rgba(220, 230, 240, 0.82);

    font-size: clamp(11px, 1vw, 14px);

    font-weight: 500;

    letter-spacing: 0.3px;
}


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

.stat-item:hover {
    transform: translateY(-5px);

    background:
        radial-gradient(
            circle at center,
            rgba(65, 145, 230, 0.18),
            transparent 70%
        );
}


/* ===============================
   GLOW LINES
================================ */

.stats-glow-line {
    position: absolute;

    left: 50%;

    width: 70%;
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(90, 180, 255, 0.25),
            #ffffff,
            rgba(90, 180, 255, 0.25),
            transparent
        );

    box-shadow:
        0 0 14px rgba(100, 200, 255, 0.75);

    z-index: 3;
}

.stats-glow-top {
    top: 0;
}

.stats-glow-bottom {
    bottom: 0;
}


/* ===============================
   RESPONSIVE
   ONLY GRID CHANGES
   MARGIN & PADDING REMAIN SAME
================================ */

@media (max-width: 768px) {

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

    .stat-item:nth-child(3),
    .stat-item:nth-child(4) {
        border-top:
            1px solid rgba(150, 210, 255, 0.15);
    }

}
/* =========================================
   PARTNER SECTION
========================================= */

.partner-section {
    position: relative;
    width: 100%;
    padding: 20px 0;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at center,
            rgba(20, 55, 95, 0.18) 0%,
            rgba(5, 12, 25, 0.4) 50%,
            transparent 100%
        );
}


/* =========================================
   CONTAINER
   SAME MARGIN ON ALL DEVICES
========================================= */

.partner-container {
    width: calc(100% - 40px);
    max-width: 1200px;

    margin: 0 auto;
}


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

.partner-wrapper {
    position: relative;

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

    min-height: 95px;

    border-top:
        1px solid rgba(150, 210, 255, 0.35);

    border-bottom:
        1px solid rgba(150, 210, 255, 0.35);

    background:
        linear-gradient(
            90deg,
            rgba(3, 12, 26, 0.75),
            rgba(20, 45, 75, 0.5),
            rgba(3, 12, 26, 0.75)
        );

    backdrop-filter: blur(14px);

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

    box-shadow:
        inset 0 0 25px rgba(80, 160, 255, 0.05),
        0 0 25px rgba(20, 100, 200, 0.08);
}


/* =========================================
   PARTNER ITEM
========================================= */

.partner-item {
    position: relative;

    min-height: 95px;

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

    padding: 15px 25px;

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


/* =========================================
   VERTICAL DIVIDERS
========================================= */

.partner-item:not(:first-child)::before {
    content: "";

    position: absolute;

    left: 0;
    top: 22%;

    width: 1px;
    height: 56%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(130, 200, 255, 0.7),
            transparent
        );

    box-shadow:
        0 0 8px rgba(100, 190, 255, 0.35);
}


/* =========================================
   LOGO
========================================= */

.partner-logo {
    position: relative;
    z-index: 2;

    max-width: 190px;
    max-height: 55px;

    width: auto;
    height: auto;

    object-fit: contain;

    filter:
        brightness(1.05)
        contrast(1.05);

    opacity: 0.95;

    transition:
        transform 0.35s ease,
        filter 0.35s ease,
        opacity 0.35s ease;
}


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

.partner-item:hover {
    background:
        radial-gradient(
            circle at center,
            rgba(70, 150, 230, 0.15),
            transparent 70%
        );
}


.partner-item:hover .partner-logo {
    transform:
        scale(1.07);

    opacity: 1;

    filter:
        brightness(1.18)
        contrast(1.08)
        drop-shadow(0 0 12px rgba(100, 190, 255, 0.3));
}


/* =========================================
   GLOWING HORIZONTAL LINES
========================================= */

.partner-glow {
    position: absolute;

    z-index: 3;

    left: 50%;

    width: 45%;
    height: 1px;

    transform:
        translateX(-50%);

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(100, 190, 255, 0.2),
            rgba(230, 250, 255, 1),
            rgba(100, 190, 255, 0.2),
            transparent
        );

    box-shadow:
        0 0 15px rgba(100, 190, 255, 0.8);
}


.partner-glow-top {
    top: -1px;
}


.partner-glow-bottom {
    bottom: -1px;
}


/* =========================================
   SUBTLE LIGHT ANIMATION
========================================= */

.partner-glow-top,
.partner-glow-bottom {
    animation:
        partnerGlowPulse 3s ease-in-out infinite;
}


@keyframes partnerGlowPulse {

    0%,
    100% {
        opacity: 0.45;
        transform:
            translateX(-50%) scaleX(0.8);
    }

    50% {
        opacity: 1;
        transform:
            translateX(-50%) scaleX(1);
    }

}


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

@media (max-width: 900px) {

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


    .partner-item:nth-child(4)::before {
        display: none;
    }


    .partner-item:nth-child(5) {
        border-top:
            1px solid rgba(130, 200, 255, 0.15);
    }


    .partner-item:nth-child(6) {
        border-top:
            1px solid rgba(130, 200, 255, 0.15);
    }

}


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

@media (max-width: 600px) {

    .partner-section {
        padding: 18px 0;
    }


    .partner-container {
        width: calc(100% - 40px);
    }


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


    .partner-item {
        min-height: 85px;
        padding: 15px;
    }


    .partner-logo {
        max-width: 120px;
        max-height: 40px;
    }


    /* Correct dividers */

    .partner-item:nth-child(3)::before {
        display: none;
    }


    .partner-item:nth-child(4)::before {
        display: block;
    }


    .partner-item:nth-child(5)::before,
    .partner-item:nth-child(6)::before {
        display: block;
    }

}


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

@media (max-width: 380px) {

    .partner-logo {
        max-width: 100px;
        max-height: 35px;
    }


    .partner-item {
        padding: 10px;
    }

}

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

.cta-section {
    position: relative;
    width: 100%;
    padding: 18px 0;
    overflow: hidden;

    /* Transparent so your existing space background
       can remain visible */
    background:
        radial-gradient(
            ellipse at center,
            rgba(25, 65, 110, 0.12),
            transparent 70%
        );
}


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

.cta-container {
    width: calc(100% - 40px);
    max-width: 900px;

    margin: 0 auto;
}


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

.cta-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;

    align-items: center;
}


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

.cta-btn {
    position: relative;

    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 14px 24px;

    border-radius: 5px;

    color: #ffffff;

    text-decoration: none;

    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.4px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(20, 42, 70, 0.88),
            rgba(4, 12, 25, 0.95)
        );

    border:
        1px solid
        rgba(130, 210, 255, 0.65);

    box-shadow:
        inset 0 0 20px rgba(90, 180, 255, 0.08),
        0 0 12px rgba(40, 130, 255, 0.18);

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


/* =========================================
   TOP LIGHT EFFECT
========================================= */

.cta-btn::before {
    content: "";

    position: absolute;

    top: 0;
    left: 10%;

    width: 80%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.8),
            transparent
        );

    opacity: 0.8;
}


/* =========================================
   INNER SHINE
========================================= */

.cta-btn::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            110deg,
            transparent 30%,
            rgba(255, 255, 255, 0.08) 50%,
            transparent 70%
        );

    transform:
        translateX(-120%);

    transition:
        transform 0.7s ease;

    pointer-events: none;
}


/* Keep content above shine */

.cta-btn span,
.cta-btn i {
    position: relative;
    z-index: 2;
}


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

.cta-btn i {
    font-size: 13px;

    transition:
        transform 0.3s ease;
}


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

.cta-btn:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(80, 180, 255, 0.35);
}


.cta-btn:hover::after {
    transform:
        translateX(120%);
}


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


/* =========================================
   LEARN MORE - ORANGE
========================================= */

.cta-btn-orange {
    border-color:
        rgba(255, 150, 70, 0.75);

    box-shadow:
        inset 0 0 20px rgba(255, 120, 40, 0.08),
        0 0 14px rgba(255, 130, 40, 0.2);
}


.cta-btn-orange:hover {
    border-color:
        rgba(255, 180, 100, 1);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.45),
        0 0 25px rgba(255, 130, 40, 0.4);
}


/* =========================================
   REQUEST INFO - CYAN BLUE
========================================= */

.cta-btn-blue {
    border-color:
        rgba(80, 190, 255, 0.85);

    box-shadow:
        inset 0 0 20px rgba(60, 170, 255, 0.1),
        0 0 15px rgba(50, 160, 255, 0.28);
}


/* =========================================
   JOIN US - BLUE / VIOLET
========================================= */

.cta-btn-purple {
    border-color:
        rgba(90, 140, 255, 0.85);

    box-shadow:
        inset 0 0 20px rgba(90, 120, 255, 0.1),
        0 0 15px rgba(70, 110, 255, 0.25);
}


/* =========================================
   ACTIVE CLICK
========================================= */

.cta-btn:active {
    transform:
        translateY(-1px)
        scale(0.98);
}


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

@media (max-width: 768px) {

    .cta-container {
        width: calc(100% - 32px);
    }


    .cta-buttons {
        gap: 12px;
    }


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

        padding: 12px 15px;

        font-size: 14px;

        gap: 8px;
    }

}


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

@media (max-width: 560px) {

    .cta-section {
        padding: 20px 0;
    }


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


    .cta-buttons {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .cta-btn {
        width: 100%;

        min-height: 58px;

        font-size: 15px;
    }

}
/* =========================================
   FOOTER BOTTOM SECTION
========================================= */

.footer-bottom-section {
    position: relative;

    width: 100%;

    padding: 18px 0 22px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(4, 14, 28, 0.15),
            rgba(3, 10, 22, 0.45)
        );
}


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

.footer-bottom-container {
    position: relative;

    width: calc(100% - 40px);
    max-width: 1100px;

    margin: 0 auto;

    border-top:
        1px solid rgba(140, 205, 255, 0.32);
}


/* =========================================
   TOP CENTER GLOW
========================================= */

.footer-top-glow {
    position: absolute;

    top: -1px;
    left: 50%;

    width: 300px;
    height: 2px;

    transform:
        translateX(-50%);

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(120, 200, 255, 0.35),
            rgba(255, 255, 255, 1),
            rgba(120, 200, 255, 0.35),
            transparent
        );

    box-shadow:
        0 0 10px rgba(130, 210, 255, 0.8),
        0 0 25px rgba(80, 170, 255, 0.4);

    animation:
        footerTopGlow 3.5s ease-in-out infinite;
}


/* =========================================
   MAIN NAVIGATION
========================================= */

.footer-main-nav {
    display: flex;

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

    gap: 14px;

    min-height: 58px;

    padding: 10px 15px;
}


.footer-main-nav a {
    color:
        rgba(225, 235, 248, 0.78);

    text-decoration: none;

    white-space: nowrap;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 0.1px;

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


.footer-main-nav a:hover {
    color: #ffffff;

    transform:
        translateY(-2px);

    text-shadow:
        0 0 12px rgba(120, 205, 255, 0.7);
}


/* =========================================
   NAVIGATION SEPARATORS
========================================= */

.footer-separator {
    width: 1px;
    height: 22px;

    flex-shrink: 0;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(150, 210, 255, 0.75),
            transparent
        );

    box-shadow:
        0 0 6px rgba(100, 180, 255, 0.3);
}


/* =========================================
   COMPLIANCE ROW
========================================= */

.footer-compliance {
    position: relative;

    display: flex;

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

    gap: 13px;

    min-height: 42px;

    padding: 10px 15px 0;

    border-top:
        1px solid rgba(130, 200, 255, 0.12);

    color:
        rgba(220, 230, 242, 0.68);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.3px;

    white-space: nowrap;
}


/* =========================================
   COMPLIANCE SEPARATORS
========================================= */

.compliance-separator {
    width: 1px;
    height: 14px;

    background:
        rgba(150, 200, 240, 0.45);

    box-shadow:
        0 0 5px rgba(100, 180, 255, 0.2);
}


/* =========================================
   GLOW ANIMATION
========================================= */

@keyframes footerTopGlow {

    0%,
    100% {
        opacity: 0.55;

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

    50% {
        opacity: 1;

        transform:
            translateX(-50%)
            scaleX(1);
    }

}


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

@media (max-width: 768px) {

    .footer-bottom-container {
        width: calc(100% - 32px);
    }


    .footer-main-nav {
        gap: 10px;
    }


    .footer-main-nav a {
        font-size: 12px;
    }


    .footer-separator {
        height: 18px;
    }


    .footer-compliance {
        font-size: 10px;

        gap: 9px;
    }

}


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

@media (max-width: 600px) {

    .footer-bottom-section {
        padding: 18px 0;
    }


    .footer-bottom-container {
        width: calc(100% - 30px);
    }


    /* Navigation wraps naturally */

    .footer-main-nav {
        flex-wrap: wrap;

        gap: 10px;

        padding: 18px 10px;
    }


    .footer-main-nav a {
        font-size: 12px;
    }


    /* Keep separators visible */

    .footer-separator {
        height: 16px;
    }


    /* Compliance */

    .footer-compliance {
        flex-wrap: wrap;

        white-space: normal;

        gap: 8px;

        padding:
            14px 10px 0;

        text-align: center;

        line-height: 1.6;

        font-size: 10px;
    }


    .footer-top-glow {
        width: 180px;
    }

}


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

@media (max-width: 400px) {

    .footer-main-nav {
        flex-direction: column;
    }


    .footer-separator {
        width: 45px;
        height: 1px;

        background:
            linear-gradient(
                to right,
                transparent,
                rgba(150, 210, 255, 0.5),
                transparent
            );
    }


    .footer-compliance {
        flex-direction: column;
    }


    .compliance-separator {
        width: 35px;
        height: 1px;
    }

}

/* =========================================
   ABOUT US SECTION
========================================= */

.about-us-section {
    position: relative;
    width: 100%;
    padding: 130px 0 80px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 40%,
            rgba(35, 110, 180, 0.10),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 50%,
            rgba(30, 100, 170, 0.10),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #020611 0%,
            #06111e 50%,
            #020611 100%
        );
}


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

.about-bg-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(100px);

    opacity: 0.22;
}


.glow-left {
    top: 10%;
    left: -250px;

    background:
        rgba(30, 140, 255, 0.35);
}


.glow-right {
    right: -250px;
    bottom: 0;

    background:
        rgba(70, 120, 255, 0.28);
}


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

.about-container {
    position: relative;
    z-index: 2;

    width: min(1180px, calc(100% - 40px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    align-items: center;

    gap: 90px;
}


/* =========================================
   ABOUT LABEL
========================================= */

.about-label {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 22px;

    color:
        #8dd7ff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;
}


.about-label span {
    width: 35px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #4db7ff
        );

    box-shadow:
        0 0 8px rgba(80, 190, 255, 0.7);
}


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

.about-content h2 {
    margin: 0;

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

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -2px;

    color: #ffffff;
}


.about-content h2 span {
    color: #82d5ff;

    text-shadow:
        0 0 25px rgba(80, 190, 255, 0.20);
}


/* =========================================
   TEXT
========================================= */

.about-intro {
    margin-top: 30px;

    max-width: 580px;

    color:
        rgba(230, 240, 250, 0.85);

    font-size: 17px;

    line-height: 1.85;
}


.about-description {
    margin-top: 18px;

    max-width: 570px;

    color:
        rgba(210, 225, 240, 0.55);

    font-size: 14px;

    line-height: 1.9;
}


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

.about-actions {
    display: flex;

    align-items: center;

    gap: 16px;

    margin-top: 35px;
}


.about-primary-btn {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-height: 55px;

    padding: 0 25px;

    border-radius: 4px;

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;

    background:
        linear-gradient(
            180deg,
            rgba(35, 110, 180, 0.90),
            rgba(8, 35, 65, 0.95)
        );

    border:
        1px solid
        rgba(100, 205, 255, 0.7);

    box-shadow:
        0 0 20px rgba(50, 160, 255, 0.18);

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


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

    box-shadow:
        0 10px 30px rgba(20, 100, 200, 0.35),
        0 0 25px rgba(80, 190, 255, 0.35);
}


.about-primary-btn i {
    font-size: 12px;

    transition:
        transform 0.3s ease;
}


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


.about-secondary-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 55px;

    padding: 0 22px;

    color:
        rgba(235, 245, 255, 0.85);

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    border:
        1px solid
        rgba(150, 200, 240, 0.22);

    transition:
        all 0.3s ease;
}


.about-secondary-btn:hover {
    color: #ffffff;

    border-color:
        rgba(120, 210, 255, 0.65);

    background:
        rgba(100, 180, 255, 0.06);
}


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

.about-visual {
    position: relative;

    width: 100%;

    min-height: 520px;

    display: flex;

    align-items: center;

    justify-content: center;
}


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

.about-visual-orbit {
    position: absolute;

    border-radius: 50%;

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

    pointer-events: none;
}


.orbit-a {
    width: 390px;
    height: 390px;

    animation:
        aboutOrbit 18s linear infinite;
}


.orbit-b {
    width: 470px;
    height: 250px;

    transform:
        rotate(-30deg);

    animation:
        aboutOrbitReverse 25s linear infinite;
}


@keyframes aboutOrbit {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes aboutOrbitReverse {

    from {
        transform:
            rotate(-30deg);
    }

    to {
        transform:
            rotate(330deg);
    }

}


/* =========================================
   MAIN CIRCLE
========================================= */

.about-main-circle {
    position: relative;

    z-index: 2;

    width: 330px;
    height: 330px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(80, 180, 255, 0.20),
            rgba(10, 30, 55, 0.95) 55%,
            #030b15 100%
        );

    border:
        1px solid
        rgba(120, 210, 255, 0.45);

    box-shadow:
        inset 0 0 60px rgba(40, 150, 255, 0.12),
        0 0 60px rgba(40, 130, 255, 0.15);
}


/* Glow */

.circle-glow {
    position: absolute;

    inset: -25px;

    border-radius: 50%;

    border:
        1px solid
        rgba(100, 200, 255, 0.08);

    box-shadow:
        0 0 60px rgba(50, 150, 255, 0.15);

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


@keyframes circlePulse {

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

        opacity:
            0.5;
    }

    50% {
        transform:
            scale(1.05);

        opacity:
            1;
    }

}


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

.about-center-content {
    position: relative;

    z-index: 2;

    width: 80%;

    text-align: center;
}


.about-small-title {
    display: block;

    margin-bottom: 15px;

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

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;
}


.about-center-content h3 {
    margin: 0;

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

    font-weight: 800;

    color: #ffffff;
}


.about-center-content h3 span {
    color: #80d4ff;

    font-size: 28px;
}


.about-center-content p {
    margin-top: 14px;

    color:
        rgba(210, 230, 245, 0.58);

    font-size: 11px;

    line-height: 1.7;
}


/* =========================================
   FLOATING CARDS
========================================= */

.about-float-card {
    position: absolute;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px 15px;

    min-width: 150px;

    background:
        rgba(6, 20, 38, 0.75);

    border:
        1px solid
        rgba(130, 205, 255, 0.22);

    backdrop-filter:
        blur(12px);

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

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.25);
}


.about-float-card i {
    width: 32px;
    height: 32px;

    display: flex;

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

    color: #7bd3ff;

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

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


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

    color: #ffffff;

    font-size: 11px;

    font-weight: 800;
}


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

    margin-top: 3px;

    color:
        rgba(220, 235, 250, 0.5);

    font-size: 9px;
}


.float-card-1 {
    top: 8%;
    right: 2%;

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


.float-card-2 {
    bottom: 13%;
    left: 0;

    animation:
        floatTwo 6s ease-in-out infinite;
}


.float-card-3 {
    right: -2%;
    bottom: 5%;

    animation:
        floatThree 5.5s ease-in-out infinite;
}


@keyframes floatOne {

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

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

}


@keyframes floatTwo {

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

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

}


@keyframes floatThree {

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

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

}


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

.about-bottom-container {
    position: relative;

    z-index: 2;

    width: min(1180px, calc(100% - 40px));

    margin: 90px auto 0;

    padding-top: 35px;

    border-top:
        1px solid
        rgba(120, 190, 240, 0.14);
}


.about-bottom-grid {
    display: grid;

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

    gap: 45px;
}


.about-value-item {
    display: flex;

    gap: 18px;
}


.value-number {
    color:
        rgba(100, 200, 255, 0.65);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;
}


.about-value-item h4 {
    margin: 0;

    color: #ffffff;

    font-size: 16px;

    font-weight: 800;
}


.about-value-item p {
    margin-top: 10px;

    color:
        rgba(220, 235, 250, 0.52);

    font-size: 12px;

    line-height: 1.8;
}


/* =========================================
   SCROLL ANIMATION
========================================= */

.about-reveal {
    opacity: 0;

    transform:
        translateY(40px);

    transition:
        opacity 0.9s ease,
        transform 0.9s ease;
}


.about-reveal.active {
    opacity: 1;

    transform:
        translateY(0);
}


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

@media (max-width: 900px) {

    .about-us-section {
        padding:
            100px 0 70px;
    }


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

        gap: 50px;
    }


    .about-content {
        text-align: center;
    }


    .about-label,
    .about-actions {
        justify-content: center;
    }


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


    .about-bottom-grid {
        gap: 25px;
    }


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

}


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

@media (max-width: 600px) {

    .about-us-section {
        padding:
            80px 0 60px;
    }


    .about-container,
    .about-bottom-container {
        width:
            calc(100% - 30px);
    }


    .about-content h2 {
        letter-spacing:
            -1px;
    }


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


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


    .about-actions {
        flex-direction: column;

        width: 100%;
    }


    .about-primary-btn,
    .about-secondary-btn {
        width: 100%;
    }


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


    .about-main-circle {
        width: 270px;
        height: 270px;
    }


    .orbit-a {
        width: 300px;
        height: 300px;
    }


    .orbit-b {
        width: 360px;
        height: 190px;
    }


    .about-float-card {
        min-width: 125px;

        padding: 9px 10px;
    }


    .float-card-1 {
        top: 4%;
        right: 0;
    }


    .float-card-2 {
        left: 0;
        bottom: 10%;
    }


    .float-card-3 {
        right: 0;
        bottom: -2%;
    }


    .about-bottom-container {
        margin-top:
            60px;
    }


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

        gap:
            30px;
    }

}


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

@media (max-width: 380px) {

    .about-main-circle {
        width: 235px;
        height: 235px;
    }


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


    .about-float-card {
        transform:
            scale(0.88);
    }

}

/* =========================================
   OUR WORK PROCESS SECTION
========================================= */

.process-section {
    position: relative;

    width: 100%;

    padding: 120px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(30, 110, 190, 0.10),
            transparent 45%
        ),
        linear-gradient(
            180deg,
            #020611 0%,
            #06111e 50%,
            #020611 100%
        );
}


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

.process-bg-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    filter: blur(120px);

    pointer-events: none;
}


.process-glow-left {
    left: -280px;
    top: 20%;

    background:
        rgba(40, 130, 255, 0.22);
}


.process-glow-right {
    right: -280px;
    bottom: 10%;

    background:
        rgba(60, 100, 255, 0.18);
}


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

.process-container {
    position: relative;

    z-index: 2;

    width:
        min(1200px, calc(100% - 40px));

    margin: 0 auto;
}


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

.process-heading {
    max-width: 760px;

    margin:
        0 auto 100px;

    text-align: center;
}


.process-eyebrow {
    display: flex;

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

    gap: 12px;

    margin-bottom: 20px;

    color:
        #82d5ff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;
}


.process-eyebrow span {
    width: 35px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #72ceff
        );

    box-shadow:
        0 0 8px rgba(80, 190, 255, 0.7);
}


.process-eyebrow span:last-child {
    background:
        linear-gradient(
            90deg,
            #72ceff,
            transparent
        );
}


/* Heading */

.process-heading h2 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(38px, 5vw, 65px);

    font-weight: 800;

    line-height: 1.08;

    letter-spacing:
        -1.8px;
}


.process-heading h2 span {
    display: block;

    color:
        #83d7ff;

    text-shadow:
        0 0 25px rgba(80, 190, 255, 0.20);
}


/* Description */

.process-heading p {
    max-width: 650px;

    margin:
        25px auto 0;

    color:
        rgba(220, 235, 250, 0.60);

    font-size: 15px;

    line-height: 1.9;
}


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

.process-timeline {
    position: relative;

    display: grid;

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

    gap: 15px;

    align-items: start;
}


/* Connecting Line */

.process-line {
    position: absolute;

    top: 74px;

    left: 10%;

    width: 80%;

    height: 1px;

    background:
        rgba(100, 190, 255, 0.18);

    overflow: hidden;
}


.process-line-progress {
    width: 40%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            #75d3ff,
            #ffffff,
            #75d3ff,
            transparent
        );

    box-shadow:
        0 0 12px rgba(100, 210, 255, 0.9);

    animation:
        processLineMove 5s linear infinite;
}


@keyframes processLineMove {

    from {
        transform:
            translateX(-150%);
    }

    to {
        transform:
            translateX(350%);
    }

}


/* =========================================
   PROCESS STEP
========================================= */

.process-step {
    position: relative;

    z-index: 2;

    text-align: center;
}


/* Number */

.process-number {
    margin-bottom: 10px;

    color:
        rgba(130, 205, 255, 0.45);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;
}


/* Icon Circle */

.process-icon {
    position: relative;

    z-index: 2;

    width: 88px;
    height: 88px;

    margin:
        0 auto 28px;

    display: flex;

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

    border-radius: 50%;

    color:
        #8ddcff;

    font-size: 25px;

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(80, 180, 255, 0.18),
            rgba(5, 20, 38, 0.95)
        );

    border:
        1px solid
        rgba(110, 205, 255, 0.42);

    box-shadow:
        inset 0 0 25px rgba(50, 160, 255, 0.12),
        0 0 22px rgba(50, 150, 255, 0.12);

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


/* Pulse */

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

    position: absolute;

    inset: -9px;

    border-radius: 50%;

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

    animation:
        processPulse 3.5s ease-in-out infinite;
}


@keyframes processPulse {

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

        opacity:
            0.4;
    }

    50% {
        transform:
            scale(1.1);

        opacity:
            0.9;
    }

}


/* Hover */

.process-step:hover .process-icon {
    transform:
        translateY(-8px)
        scale(1.06);

    box-shadow:
        inset 0 0 35px rgba(60, 180, 255, 0.20),
        0 15px 40px rgba(30, 120, 255, 0.25),
        0 0 30px rgba(80, 190, 255, 0.28);
}


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

.process-card {
    min-height: 175px;

    padding:
        25px 18px;

    background:
        linear-gradient(
            180deg,
            rgba(15, 35, 58, 0.62),
            rgba(3, 12, 25, 0.82)
        );

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

    backdrop-filter:
        blur(12px);

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

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


.process-step:hover .process-card {
    transform:
        translateY(-7px);

    border-color:
        rgba(110, 205, 255, 0.35);

    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.25),
        0 0 20px rgba(50, 150, 255, 0.08);
}


.process-card h3 {
    margin: 0 0 12px;

    color: #ffffff;

    font-size: 18px;

    font-weight: 800;
}


.process-card p {
    margin: 0;

    color:
        rgba(215, 230, 245, 0.58);

    font-size: 12px;

    line-height: 1.8;
}


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

.process-bottom {
    margin-top: 80px;

    text-align: center;
}


.process-bottom p {
    margin: 0 0 25px;

    color:
        rgba(220, 235, 250, 0.65);

    font-size: 14px;
}


.process-bottom strong {
    color: #ffffff;
}


.process-btn {
    display: inline-flex;

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

    gap: 12px;

    min-height: 55px;

    padding:
        0 28px;

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;

    background:
        linear-gradient(
            180deg,
            rgba(35, 110, 185, 0.9),
            rgba(6, 28, 55, 0.95)
        );

    border:
        1px solid
        rgba(100, 205, 255, 0.65);

    box-shadow:
        0 0 20px rgba(50, 150, 255, 0.18);

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


.process-btn:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 12px 30px rgba(20, 100, 200, 0.30),
        0 0 25px rgba(80, 190, 255, 0.28);
}


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


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


/* =========================================
   SCROLL REVEAL
========================================= */

.process-reveal {
    opacity: 0;

    transform:
        translateY(40px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}


.process-reveal.active {
    opacity: 1;

    transform:
        translateY(0);
}


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

@media (max-width: 1000px) {

    .process-timeline {
        grid-template-columns:
            repeat(3, 1fr);

        row-gap:
            60px;
    }


    .process-line {
        display: none;
    }


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

}


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

@media (max-width: 650px) {

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


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


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


    .process-heading p {
        font-size: 14px;
    }


    .process-timeline {
        grid-template-columns:
            1fr;

        gap:
            35px;
    }


    .process-card {
        max-width: 400px;

        margin:
            0 auto;

        min-height:
            auto;
    }


    .process-icon {
        width: 78px;
        height: 78px;

        font-size: 22px;

        margin-bottom:
            22px;
    }


    .process-bottom {
        margin-top:
            60px;
    }

}