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

:root {
    --primary: #0B4D98;
    --primary-dark: #062D63;
    --green: #159A1B;
    --text: #17233B;
    --light: #F7F9FC;
    --white: #FFFFFF;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background: #fff;
    color: var(--text);
    overflow-x: hidden;
}


/* ================================
   NAVBAR
================================ */

.main-header {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 9999;

    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(18px);

    border-bottom: 1px solid rgba(11, 77, 152, 0.08);

    transition: all 0.3s ease;
}

.nav-container {
    width: min(1280px, 92%);
    height: 82px;
    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* LOGO */

.nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.nav-logo img {
    width: 190px;
    max-height: 70px;
    object-fit: contain;
}


/* NAVIGATION */

.nav-menu {
    display: flex;
    align-items: center;
    gap: 8px;

    list-style: none;
}

.nav-menu li {
    list-style: none;
}

.nav-menu a {
    position: relative;

    display: inline-flex;
    align-items: center;

    padding: 12px 17px;

    text-decoration: none;

    color: #26334A;

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

    border-radius: 10px;

    transition: all 0.3s ease;
}


/* HOVER */

.nav-menu a:hover {
    color: var(--primary);

    background: rgba(11, 77, 152, 0.06);
}


/* ACTIVE PAGE */

.nav-menu a.active {
    color: var(--primary);
}

.nav-menu a.active::after {
    content: "";

    position: absolute;

    width: 22px;
    height: 3px;

    left: 50%;
    bottom: 4px;

    transform: translateX(-50%);

    border-radius: 10px;

    background: linear-gradient(
        90deg,
        var(--primary),
        var(--green)
    );
}


/* CONTACT BUTTON */

.nav-contact-btn {
    margin-left: 10px !important;

    padding: 13px 23px !important;

    color: #fff !important;

    background: linear-gradient(
        135deg,
        var(--primary),
        var(--green)
    ) !important;

    box-shadow:
        0 10px 25px
        rgba(11, 77, 152, 0.18);

    border-radius: 50px !important;
}

.nav-contact-btn:hover {
    color: #fff !important;

    transform: translateY(-2px);

    box-shadow:
        0 15px 30px
        rgba(11, 77, 152, 0.25);
}


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

.mobile-menu-btn {
    width: 45px;
    height: 45px;

    border: none;

    background: rgba(11, 77, 152, 0.08);

    border-radius: 12px;

    display: none;

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

    cursor: pointer;

    flex-direction: column;

    gap: 5px;

    transition: 0.3s ease;
}

.mobile-menu-btn span {
    width: 22px;
    height: 2px;

    background: var(--primary);

    border-radius: 10px;

    transition: 0.3s ease;
}


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

@media (max-width: 1000px) {

    .nav-menu {
        position: fixed;

        top: 82px;
        left: 0;

        width: 100%;

        padding: 25px;

        flex-direction: column;
        align-items: stretch;

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

        border-bottom:
            1px solid rgba(11, 77, 152, 0.08);

        box-shadow:
            0 18px 35px
            rgba(0, 0, 0, 0.06);

        transform: translateY(-150%);

        opacity: 0;

        pointer-events: none;

        transition: all 0.35s ease;
    }




    .nav-login-btn {
    width: 100%;

    margin-left: 0 !important;
    margin-top: 10px !important;

    padding: 16px 20px !important;
}

    .nav-menu.show {
        transform: translateY(0);

        opacity: 1;

        pointer-events: auto;
    }


    .nav-menu a {
        width: 100%;

        padding: 15px 18px;

        font-size: 17px;
    }


    .nav-menu a.active::after {
        display: none;
    }


    .nav-menu a.active {
        background:
            linear-gradient(
                90deg,
                rgba(11, 77, 152, 0.08),
                rgba(21, 154, 27, 0.08)
            );
    }


    /* ================================
   PREMIUM LOGIN BUTTON
================================ */

.nav-login-btn {
    margin-left: 12px !important;

    padding: 13px 25px !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;

    color: #ffffff !important;

    font-size: 16px !important;
    font-weight: 700 !important;

    border-radius: 50px !important;

    background: linear-gradient(
        135deg,
        var(--primary),
        var(--green)
    ) !important;

    box-shadow:
        0 10px 25px
        rgba(11, 77, 152, 0.20);

    transition: all 0.35s ease !important;
}


.nav-login-btn span {
    font-size: 20px;
    line-height: 1;

    transition: transform 0.3s ease;
}


.nav-login-btn:hover {
    color: #ffffff !important;

    transform: translateY(-3px);

    box-shadow:
        0 16px 32px
        rgba(11, 77, 152, 0.28);
}





.nav-login-btn:hover span {
    transform: translateX(4px);
}


    .mobile-menu-btn {
        display: flex;
    }


    .mobile-menu-btn.active span:nth-child(1) {
        transform:
            translateY(7px)
            rotate(45deg);
    }


    .mobile-menu-btn.active span:nth-child(2) {
        opacity: 0;
    }


    .mobile-menu-btn.active span:nth-child(3) {
        transform:
            translateY(-7px)
            rotate(-45deg);
    }

}


@media (max-width: 500px) {

    .nav-container {
        width: 92%;
        height: 72px;
    }


    .nav-logo img {
        width: 150px;
        max-height: 55px;
    }


    .nav-menu {
        top: 72px;
    }

    

}



/* =====================================
   PREMIUM FOOTER
===================================== */

.main-footer {
    position: relative;

    background:
        linear-gradient(
            135deg,
            #061f45,
            #0b4d98
        );

    color: #ffffff;

    padding: 75px 0 0;

    overflow: hidden;
}


/* BACKGROUND DECORATION */

.main-footer::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    border: 70px solid rgba(255,255,255,0.025);

    top: -220px;
    right: -120px;
}


.main-footer::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(21,154,27,0.18),
            transparent 70%
        );

    bottom: -150px;
    left: -100px;
}


.footer-container {
    width: min(1280px, 92%);
    margin: auto;

    position: relative;
    z-index: 2;
}


.footer-grid {
    display: grid;

    grid-template-columns:
        1.4fr
        0.9fr
        0.9fr
        1.4fr;

    gap: 55px;

    padding-bottom: 60px;
}


/* ================= COMPANY ================= */

.footer-logo {
    display: inline-flex;

    background: #ffffff;

    padding: 8px 12px;

    border-radius: 12px;

    margin-bottom: 22px;
}


.footer-logo img {
    width: 190px;

    max-height: 70px;

    object-fit: contain;
}


.footer-description {
    max-width: 340px;

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

    font-size: 16px;

    line-height: 1.9;
}


/* ================= FOOTER TITLES ================= */

.footer-column h3 {
    position: relative;

    font-size: 21px;

    margin-bottom: 28px;

    padding-bottom: 12px;
}


.footer-column h3::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 38px;
    height: 3px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            var(--green)
        );
}


/* ================= LINKS ================= */

.footer-links {
    list-style: none;
}


.footer-links li {
    margin-bottom: 15px;
}


.footer-links a {
    color: rgba(255,255,255,0.68);

    text-decoration: none;

    font-size: 16px;

    transition: all 0.3s ease;
}


.footer-links a::before {
    content: "›";

    margin-right: 9px;

    color: var(--green);

    font-size: 20px;

    transition: all 0.3s ease;
}


.footer-links a:hover {
    color: #ffffff;

    padding-left: 6px;
}


/* ================= CONTACT ================= */

.footer-contact-item {
    display: flex;

    gap: 14px;

    margin-bottom: 22px;
}


.footer-contact-icon {
    min-width: 42px;
    height: 42px;

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

    border-radius: 12px;

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

    font-size: 18px;
}


.footer-contact-item span {
    display: block;

    font-size: 13px;

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

    margin-bottom: 5px;
}


.footer-contact-item a,
.footer-contact-item p {
    color: rgba(255,255,255,0.82);

    text-decoration: none;

    font-size: 15px;

    line-height: 1.6;

    transition: 0.3s;
}


.footer-contact-item a:hover {
    color: #ffffff;
}


/* ================= SOCIAL ================= */

.footer-social {
    display: flex;

    gap: 10px;

    margin-top: 25px;
}


.footer-social a {
    width: 40px;
    height: 40px;

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

    border-radius: 50%;

    color: #ffffff;

    text-decoration: none;

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

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

    font-size: 18px;

    transition: all 0.3s ease;
}


.footer-social a:hover {
    background: var(--green);

    transform: translateY(-4px);
}


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

.footer-bottom {
    min-height: 75px;

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

    gap: 25px;

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


.footer-bottom p {
    color: rgba(255,255,255,0.60);

    font-size: 14px;
}


.footer-bottom-links {
    display: flex;

    gap: 25px;
}


.footer-bottom-links a {
    color: rgba(255,255,255,0.65);

    text-decoration: none;

    font-size: 14px;

    transition: 0.3s;
}


.footer-bottom-links a:hover {
    color: #ffffff;
}



/* =====================================
   PREMIUM FINTECH HERO SECTION
===================================== */

.hero-section {
    position: relative;

    min-height: 760px;

    padding: 90px 0 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f4f8ff 50%,
            #f5fff6 100%
        );
}


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

.hero-bg-orb {
    position: absolute;

    border-radius: 50%;

    filter: blur(15px);

    pointer-events: none;
}


.orb-one {
    width: 420px;
    height: 420px;

    top: 70px;
    left: -180px;

    background:
        rgba(11, 77, 152, 0.10);

    animation: orbFloatOne 9s ease-in-out infinite;
}


.orb-two {
    width: 450px;
    height: 450px;

    right: -180px;
    top: 100px;

    background:
        rgba(21, 154, 27, 0.10);

    animation: orbFloatTwo 10s ease-in-out infinite;
}


.hero-grid-bg {
    position: absolute;

    inset: 0;

    opacity: 0.45;

    background-image:
        linear-gradient(
            rgba(11, 77, 152, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(11, 77, 152, 0.035) 1px,
            transparent 1px
        );

    background-size: 50px 50px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 85%
        );

    pointer-events: none;
}


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

.hero-container {
    width: min(1280px, 92%);
    margin: auto;

    min-height: 670px;

    display: grid;

    grid-template-columns:
        1.05fr
        0.95fr;

    align-items: center;

    gap: 70px;

    position: relative;

    z-index: 2;
}


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

.hero-content {
    position: relative;

    z-index: 3;

    animation:
        heroContentReveal
        0.9s
        ease
        forwards;
}


.hero-badge {
    width: fit-content;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 10px 17px;

    border-radius: 50px;

    color: var(--primary);

    background:
        rgba(11, 77, 152, 0.07);

    border:
        1px solid
        rgba(11, 77, 152, 0.10);

    font-size: 15px;

    font-weight: 700;

    margin-bottom: 25px;
}


.badge-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 0 6px
        rgba(21, 154, 27, 0.12);

    animation:
        badgePulse
        2s
        infinite;
}


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

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

    line-height: 1.08;

    letter-spacing: -2px;

    color: #14233c;

    margin-bottom: 25px;
}


.hero-content h1 span {
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--green)
        );

    -webkit-background-clip: text;

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


.hero-content p {
    max-width: 660px;

    font-size: 19px;

    line-height: 1.85;

    color: #647086;

    margin-bottom: 34px;
}


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

.hero-buttons {
    display: flex;

    align-items: center;

    gap: 15px;

    flex-wrap: wrap;
}


.hero-primary-btn {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 16px 28px;

    border-radius: 50px;

    text-decoration: none;

    color: #ffffff;

    font-size: 17px;

    font-weight: 700;

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

    box-shadow:
        0 15px 35px
        rgba(11, 77, 152, 0.22);

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


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

    transform:
        translateY(-4px);

    box-shadow:
        0 20px 40px
        rgba(11, 77, 152, 0.30);
}


.hero-primary-btn span {
    font-size: 22px;

    transition:
        transform 0.3s ease;
}


.hero-primary-btn:hover span {
    transform:
        translateX(5px);
}


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

    align-items: center;

    padding: 16px 28px;

    border-radius: 50px;

    text-decoration: none;

    color: var(--primary);

    font-size: 17px;

    font-weight: 700;

    border:
        1px solid
        rgba(11, 77, 152, 0.16);

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

    transition:
        all 0.3s ease;
}


.hero-secondary-btn:hover {
    color: var(--primary);

    transform:
        translateY(-3px);

    background:
        #ffffff;

    box-shadow:
        0 12px 30px
        rgba(11, 77, 152, 0.10);
}


/* ================= TRUST ================= */

.hero-trust {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 22px;

    margin-top: 36px;
}


.trust-item {
    display: flex;

    align-items: center;

    gap: 9px;

    font-size: 15px;

    font-weight: 600;

    color: #556176;
}


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

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

    border-radius: 50%;

    background:
        rgba(21, 154, 27, 0.12);

    color: var(--green);

    font-size: 13px;

    font-weight: 800;
}


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

.hero-visual {
    position: relative;

    min-height: 570px;

    display: flex;

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


/* ================= ROTATING RINGS ================= */

.visual-ring {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.ring-one {
    width: 490px;
    height: 490px;

    border:
        1px dashed
        rgba(11, 77, 152, 0.20);

    animation:
        rotateRing
        22s
        linear
        infinite;
}


.ring-two {
    width: 390px;
    height: 390px;

    border:
        1px solid
        rgba(21, 154, 27, 0.12);

    animation:
        rotateRingReverse
        18s
        linear
        infinite;
}


/* ================= MAIN DASHBOARD ================= */

.fintech-dashboard {
    width: 390px;

    padding: 24px;

    border-radius: 28px;

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

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

    box-shadow:
        0 30px 70px
        rgba(11, 77, 152, 0.18);

    backdrop-filter:
        blur(15px);

    position: relative;

    z-index: 4;

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


/* DASHBOARD TOP */

.dashboard-top {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 22px;
}


.dashboard-label {
    display: block;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;

    color: var(--green);

    margin-bottom: 7px;
}


.dashboard-top h3 {
    font-size: 23px;

    line-height: 1.25;

    color: #17243c;
}


.dashboard-status {
    display: flex;

    align-items: center;

    gap: 6px;

    padding: 7px 10px;

    border-radius: 50px;

    font-size: 11px;

    font-weight: 700;

    color: var(--green);

    background:
        rgba(21, 154, 27, 0.08);
}


.status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--green);

    animation:
        badgePulse
        2s
        infinite;
}


/* ================= SUMMARY ================= */

.payment-summary {
    min-height: 130px;

    padding: 22px;

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    color: #ffffff;

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

    position: relative;

    overflow: hidden;

    margin-bottom: 20px;
}


.payment-summary::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background:
        rgba(21,154,27,0.25);

    right: -70px;
    bottom: -110px;
}


.summary-content {
    position: relative;

    z-index: 2;
}


.summary-content span {
    display: block;

    font-size: 13px;

    opacity: 0.75;

    margin-bottom: 10px;
}


.summary-content strong {
    font-size: 21px;

    line-height: 1.3;
}


.summary-icon {
    width: 58px;
    height: 58px;

    min-width: 58px;

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

    border-radius: 18px;

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

    font-size: 29px;

    font-weight: 800;

    position: relative;

    z-index: 2;
}


/* ================= MINI SERVICES ================= */

.dashboard-services {
    display: grid;

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

    gap: 10px;

    margin-bottom: 20px;
}


.mini-service {
    padding: 12px 7px;

    text-align: center;

    border-radius: 16px;

    background:
        #f7faff;

    border:
        1px solid
        rgba(11,77,152,0.06);

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


.mini-service:hover {
    transform:
        translateY(-5px);

    box-shadow:
        0 10px 20px
        rgba(11,77,152,0.10);
}


.mini-icon {
    width: 38px;
    height: 38px;

    margin: 0 auto 8px;

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

    border-radius: 12px;

    font-size: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(11,77,152,0.10),
            rgba(21,154,27,0.12)
        );
}


.mini-service span {
    font-size: 11px;

    font-weight: 700;

    color: #4c5870;
}


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

.dashboard-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 5px;
}


.dashboard-bottom span {
    font-size: 12px;

    color: #7a8496;

    font-weight: 600;
}


.bottom-dots {
    display: flex;

    gap: 5px;
}


.bottom-dots i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        rgba(11,77,152,0.22);
}


.bottom-dots i:first-child {
    background: var(--green);
}


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

.floating-service {
    position: absolute;

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 13px 16px;

    border-radius: 17px;

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

    border:
        1px solid
        rgba(11,77,152,0.08);

    box-shadow:
        0 18px 40px
        rgba(11,77,152,0.13);

    backdrop-filter:
        blur(12px);

    z-index: 5;
}


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

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

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            rgba(11,77,152,0.10),
            rgba(21,154,27,0.13)
        );

    font-size: 20px;
}


.floating-service small {
    display: block;

    color: #7b8699;

    font-size: 11px;

    margin-bottom: 4px;
}


.floating-service strong {
    display: block;

    color: #26334a;

    font-size: 13px;
}


.float-card-one {
    top: 60px;

    left: -25px;

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


.float-card-two {
    top: 155px;

    right: -35px;

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


.float-card-three {
    bottom: 60px;

    left: 5px;

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


/* ================= SERVICE STRIP ================= */

.hero-service-strip {
    position: relative;

    z-index: 3;

    width: min(1280px, 92%);

    margin: 0 auto;

    padding: 20px 0;

    border-top:
        1px solid
        rgba(11,77,152,0.10);
}


.hero-service-track {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    flex-wrap: wrap;
}


.hero-service-track span {
    font-size: 14px;

    font-weight: 700;

    color: #536078;

    white-space: nowrap;
}


.hero-service-track i {
    width: 6px;
    height: 6px;

    min-width: 6px;

    border-radius: 50%;

    background: var(--green);
}


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

@keyframes heroContentReveal {

    from {
        opacity: 0;

        transform:
            translateY(30px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


@keyframes dashboardFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-1deg);
    }

    50% {
        transform:
            translateY(-15px)
            rotate(1deg);
    }

}


@keyframes rotateRing {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes rotateRingReverse {

    from {
        transform:
            rotate(360deg);
    }

    to {
        transform:
            rotate(0deg);
    }

}


@keyframes floatCardOne {

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

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

}


@keyframes floatCardTwo {

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

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

}


@keyframes floatCardThree {

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

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

}


@keyframes badgePulse {

    0% {
        box-shadow:
            0 0 0 0
            rgba(21,154,27,0.30);
    }

    70% {
        box-shadow:
            0 0 0 9px
            rgba(21,154,27,0);
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(21,154,27,0);
    }

}


@keyframes orbFloatOne {

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

    50% {
        transform:
            translate(60px,30px);
    }

}


@keyframes orbFloatTwo {

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

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

}


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

@media (max-width: 1000px) {

    .hero-section {
        padding-top: 60px;
    }


    .hero-container {
        min-height: auto;

        grid-template-columns: 1fr;

        gap: 35px;

        text-align: center;

        padding-bottom: 40px;
    }


    .hero-content {
        display: flex;

        flex-direction: column;

        align-items: center;
    }


    .hero-content h1 {
        max-width: 850px;
    }


    .hero-content p {
        max-width: 750px;
    }


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


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


    .hero-service-track {
        justify-content: center;
    }

}


@media (max-width: 600px) {

    .hero-section {
        padding-top: 45px;
    }


    .hero-container {
        width: 92%;
    }


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

        text-align: left;
    }


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

        letter-spacing: -1.5px;
    }


    .hero-content p {
        font-size: 17px;

        line-height: 1.75;
    }


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

        justify-content: center;
    }


    .hero-buttons {
        width: 100%;
    }


    .hero-trust {
        gap: 12px 18px;
    }


    .trust-item {
        font-size: 13px;
    }


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


    .ring-one {
        width: 390px;
        height: 390px;
    }


    .ring-two {
        width: 310px;
        height: 310px;
    }


    .fintech-dashboard {
        width: min(360px, 90vw);

        padding: 18px;
    }


    .dashboard-top h3 {
        font-size: 19px;
    }


    .payment-summary {
        min-height: 115px;

        padding: 17px;
    }


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


    .dashboard-services {
        gap: 6px;
    }


    .mini-service {
        padding: 10px 4px;
    }


    .mini-service span {
        font-size: 9px;
    }


    .float-card-one {
        top: 20px;
        left: -8px;
    }


    .float-card-two {
        top: 130px;
        right: -12px;
    }


    .float-card-three {
        bottom: 20px;
        left: -5px;
    }


    .floating-service {
        padding: 10px 12px;

        transform: scale(0.85);
    }


    .floating-icon {
        width: 35px;
        height: 35px;

        font-size: 16px;
    }


    .hero-service-strip {
        padding: 18px 0;
    }


    .hero-service-track {
        gap: 12px 14px;
    }


    .hero-service-track span {
        font-size: 12px;
    }


    .hero-service-track i {
        display: none;
    }

}


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

.home-services-section {
    position: relative;

    padding: 115px 0;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbff 55%,
            #ffffff 100%
        );
}


/* BACKGROUND SHAPES */

.services-bg-shape {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(10px);
}


.services-shape-one {
    width: 420px;
    height: 420px;

    top: 120px;
    left: -250px;

    background:
        rgba(11, 77, 152, 0.06);
}


.services-shape-two {
    width: 380px;
    height: 380px;

    bottom: 50px;
    right: -220px;

    background:
        rgba(21, 154, 27, 0.07);
}


.home-services-container {
    width: min(1280px, 92%);

    margin: auto;

    position: relative;

    z-index: 2;
}


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

.home-services-heading {
    max-width: 760px;

    text-align: center;

    margin:
        0 auto
        65px;
}


.section-small-title {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 9px 16px;

    border-radius: 50px;

    background:
        rgba(11, 77, 152, 0.06);

    color: var(--primary);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1.2px;

    margin-bottom: 20px;
}


.section-small-title span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 0 5px
        rgba(21, 154, 27, 0.10);
}


.home-services-heading h2 {
    font-size:
        clamp(38px, 4vw, 56px);

    line-height: 1.15;

    letter-spacing: -1.5px;

    color: #17243c;
}


.home-services-heading h2 span {
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--green)
        );

    -webkit-background-clip: text;

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


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

    margin:
        22px auto 0;

    color: #68758a;

    font-size: 18px;

    line-height: 1.8;
}


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

.home-services-grid {
    display: grid;

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

    gap: 22px;
}


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

.home-service-card {
    position: relative;

    min-height: 285px;

    padding: 28px;

    display: flex;

    flex-direction: column;

    text-decoration: none;

    color: inherit;

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

    border:
        1px solid
        rgba(11, 77, 152, 0.09);

    border-radius: 24px;

    overflow: hidden;

    box-shadow:
        0 12px 35px
        rgba(11, 77, 152, 0.05);

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


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

    position: absolute;

    width: 130px;
    height: 130px;

    border-radius: 50%;

    top: -65px;
    right: -65px;

    background:
        linear-gradient(
            135deg,
            rgba(11, 77, 152, 0.08),
            rgba(21, 154, 27, 0.08)
        );

    transition:
        transform 0.5s ease;
}


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

    border-color:
        rgba(21, 154, 27, 0.25);

    box-shadow:
        0 25px 50px
        rgba(11, 77, 152, 0.13);
}


.home-service-card:hover::before {
    transform:
        scale(1.7);
}


/* CARD TOP */

.service-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    position: relative;

    z-index: 2;
}


.home-service-icon {
    width: 62px;
    height: 62px;

    display: flex;

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

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(11, 77, 152, 0.10),
            rgba(21, 154, 27, 0.13)
        );

    font-size: 28px;

    transition:
        transform 0.35s ease;
}


.home-service-card:hover .home-service-icon {
    transform:
        rotate(-8deg)
        scale(1.08);
}


.service-number {
    font-size: 14px;

    font-weight: 800;

    color:
        rgba(11, 77, 152, 0.25);
}


/* SERVICE TEXT */

.home-service-card h3 {
    position: relative;

    z-index: 2;

    margin-top: 25px;

    margin-bottom: 13px;

    color: #1b2941;

    font-size: 22px;

    line-height: 1.3;
}


.home-service-card p {
    position: relative;

    z-index: 2;

    color: #69768b;

    font-size: 15px;

    line-height: 1.75;

    flex-grow: 1;
}


/* EXPLORE */

.home-service-arrow {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 20px;

    color: var(--primary);

    font-size: 14px;

    font-weight: 800;
}


.home-service-arrow span {
    font-size: 20px;

    transition:
        transform 0.3s ease;
}


.home-service-card:hover
.home-service-arrow span {
    transform:
        translateX(6px);
}


/* =====================================
   VIEW ALL CARD
===================================== */

.view-all-service {
    align-items: center;

    justify-content: center;

    text-align: center;

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

    border: none;

    color: #ffffff;
}


.view-all-service::before {
    width: 220px;
    height: 220px;

    top: -100px;
    right: -100px;

    background:
        rgba(21,154,27,0.28);
}


.view-all-service:hover {
    transform:
        translateY(-10px);

    box-shadow:
        0 25px 55px
        rgba(11, 77, 152, 0.25);
}


.view-all-content {
    position: relative;

    z-index: 2;
}


.view-all-icon {
    width: 64px;
    height: 64px;

    margin:
        0 auto
        20px;

    display: flex;

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

    border-radius: 50%;

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

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

    font-size: 34px;

    font-weight: 300;

    transition:
        transform 0.35s ease;
}


.view-all-service:hover
.view-all-icon {
    transform:
        rotate(90deg);
}


.view-all-service h3 {
    color: #ffffff;

    margin:
        0 0 12px;

    font-size: 22px;
}


.view-all-service span {
    color:
        rgba(255,255,255,0.70);

    font-size: 15px;

    font-weight: 700;
}


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

.services-bottom-btn {
    display: flex;

    justify-content: center;

    margin-top: 48px;
}


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

    align-items: center;

    gap: 12px;

    padding: 16px 30px;

    border-radius: 50px;

    color: #ffffff;

    text-decoration: none;

    font-size: 17px;

    font-weight: 700;

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

    box-shadow:
        0 15px 35px
        rgba(11, 77, 152, 0.18);

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


.services-main-btn:hover {
    color: #ffffff;

    transform:
        translateY(-4px);

    box-shadow:
        0 20px 40px
        rgba(11, 77, 152, 0.28);
}


.services-main-btn span {
    font-size: 22px;

    transition:
        transform 0.3s ease;
}


.services-main-btn:hover span {
    transform:
        translateX(5px);
}


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

@media (max-width: 1100px) {

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

}


@media (max-width: 600px) {

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


    .home-services-heading {
        margin-bottom: 45px;
    }


    .home-services-heading h2 {
        font-size: 38px;

        letter-spacing: -1px;
    }


    .home-services-heading p {
        font-size: 16px;
    }


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


    .home-service-card {
        min-height: 260px;

        padding: 25px;
    }


    .services-main-btn {
        width: 100%;

        justify-content: center;
    }

}


/* =====================================
   WHY CHOOSE US SECTION
===================================== */

.why-choose-section {
    position: relative;

    padding: 120px 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f7faff 0%,
            #ffffff 50%,
            #f6fff7 100%
        );
}


/* BACKGROUND CIRCLES */

.why-bg-circle {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.why-circle-one {
    width: 450px;
    height: 450px;

    top: -200px;
    right: -200px;

    border:
        70px solid
        rgba(11, 77, 152, 0.035);
}


.why-circle-two {
    width: 350px;
    height: 350px;

    bottom: -180px;
    left: -150px;

    background:
        radial-gradient(
            circle,
            rgba(21, 154, 27, 0.10),
            transparent 70%
        );
}


/* MAIN CONTAINER */

.why-choose-container {
    width: min(1280px, 92%);

    margin: auto;

    display: grid;

    grid-template-columns:
        0.95fr
        1.05fr;

    align-items: center;

    gap: 100px;

    position: relative;

    z-index: 2;
}


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

.why-visual {
    position: relative;

    min-height: 580px;

    display: flex;

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


/* MAIN CARD */

.why-main-card {
    position: relative;

    width: 410px;

    padding: 28px;

    border-radius: 30px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #0b4d98,
            #062e68
        );

    color: #ffffff;

    box-shadow:
        0 35px 70px
        rgba(11, 77, 152, 0.28);

    z-index: 3;

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


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

    position: absolute;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    top: -140px;
    right: -120px;

    background:
        rgba(21,154,27,0.22);
}


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

    position: absolute;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    bottom: -100px;
    left: -80px;

    border:
        35px solid
        rgba(255,255,255,0.04);
}


/* CARD HEADER */

.why-card-header {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 55px;
}


.why-logo-mini {
    width: 125px;

    padding: 7px 10px;

    background: #ffffff;

    border-radius: 10px;
}


.why-logo-mini img {
    width: 100%;

    display: block;

    object-fit: contain;
}


.why-live-status {
    display: flex;

    align-items: center;

    gap: 7px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

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


.why-live-status span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #35d04b;

    box-shadow:
        0 0 0 6px
        rgba(53,208,75,0.15);

    animation:
        badgePulse
        2s
        infinite;
}


/* CARD CONTENT */

.why-card-content {
    position: relative;

    z-index: 2;
}


.why-small-label {
    display: block;

    margin-bottom: 14px;

    color: #7de38d;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.8px;
}


.why-card-content h3 {
    font-size: 38px;

    line-height: 1.16;

    letter-spacing: -1px;

    margin-bottom: 18px;
}


.why-card-content p {
    max-width: 330px;

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

    font-size: 16px;

    line-height: 1.8;
}


/* ACTIVITY */

.why-activity {
    position: relative;

    z-index: 2;

    margin-top: 40px;

    padding-top: 22px;

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


.activity-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 12px;

    font-size: 13px;

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


.activity-top strong {
    color: #ffffff;

    font-size: 15px;
}


.activity-line {
    height: 8px;

    border-radius: 50px;

    overflow: hidden;

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


.activity-line span {
    display: block;

    width: 100%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--green),
            #7de38d
        );

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


/* SERVICE PILLS */

.why-service-pills {
    position: relative;

    z-index: 2;

    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 28px;
}


.why-service-pills span {
    padding: 8px 13px;

    border-radius: 50px;

    font-size: 12px;

    font-weight: 700;

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

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

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


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

.why-floating-card {
    position: absolute;

    z-index: 4;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px 17px;

    border-radius: 17px;

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

    border:
        1px solid
        rgba(11,77,152,0.08);

    box-shadow:
        0 18px 40px
        rgba(11,77,152,0.13);
}


.why-float-icon {
    width: 43px;
    height: 43px;

    display: flex;

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

    border-radius: 13px;

    color: #ffffff;

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

    font-size: 18px;

    font-weight: 800;
}


.why-floating-card small {
    display: block;

    color: #7a8697;

    font-size: 11px;

    margin-bottom: 4px;
}


.why-floating-card strong {
    color: #26334a;

    font-size: 13px;
}


.why-float-one {
    top: 75px;

    left: -15px;

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


.why-float-two {
    right: -15px;

    bottom: 85px;

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


/* DECORATIVE RING */

.why-ring {
    position: absolute;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    border:
        1px dashed
        rgba(11,77,152,0.16);

    animation:
        rotateRing
        25s
        linear
        infinite;
}


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

.why-content h2 {
    font-size:
        clamp(42px, 4.5vw, 60px);

    line-height: 1.12;

    letter-spacing: -1.8px;

    color: #17243c;

    margin-bottom: 24px;
}


.why-content h2 span {
    display: block;

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

    -webkit-background-clip: text;

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


.why-description {
    max-width: 610px;

    color: #68758a;

    font-size: 18px;

    line-height: 1.85;

    margin-bottom: 38px;
}


/* FEATURES */

.why-features {
    display: flex;

    flex-direction: column;

    gap: 22px;

    margin-bottom: 38px;
}


.why-feature {
    display: flex;

    align-items: flex-start;

    gap: 17px;
}


.why-feature-icon {
    width: 52px;
    height: 52px;

    min-width: 52px;

    display: flex;

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

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(11,77,152,0.10),
            rgba(21,154,27,0.13)
        );

    font-size: 21px;
}


.why-feature h4 {
    color: #243149;

    font-size: 19px;

    margin-bottom: 6px;
}


.why-feature p {
    color: #718096;

    font-size: 15px;

    line-height: 1.7;
}


/* BUTTON */

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

    align-items: center;

    gap: 12px;

    padding: 16px 28px;

    border-radius: 50px;

    text-decoration: none;

    color: #ffffff;

    font-size: 16px;

    font-weight: 700;

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

    box-shadow:
        0 15px 35px
        rgba(11,77,152,0.18);

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


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

    transform:
        translateY(-4px);

    box-shadow:
        0 20px 40px
        rgba(11,77,152,0.28);
}


.why-about-btn span {
    font-size: 22px;

    transition:
        transform 0.3s ease;
}


.why-about-btn:hover span {
    transform:
        translateX(5px);
}


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

@keyframes whyCardFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-1deg);
    }

    50% {
        transform:
            translateY(-15px)
            rotate(1deg);
    }

}


@keyframes whyFloatOne {

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

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

}


@keyframes whyFloatTwo {

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

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

}


@keyframes progressAnimation {

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

    50% {
        transform:
            translateX(0);
    }

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

}


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

@media (max-width: 1050px) {

    .why-choose-container {

        grid-template-columns:
            1fr;

        gap: 55px;
    }


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

        margin: auto;
    }


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

}


@media (max-width: 600px) {

    .why-choose-section {
        padding:
            85px 0;
    }


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


    .why-main-card {
        width:
            min(390px, 88vw);

        padding: 22px;
    }


    .why-card-header {
        margin-bottom: 40px;
    }


    .why-card-content h3 {
        font-size: 30px;
    }


    .why-card-content p {
        font-size: 14px;
    }


    .why-float-one {
        top: 15px;
        left: -5px;
    }


    .why-float-two {
        right: -5px;
        bottom: 25px;
    }


    .why-floating-card {
        transform:
            scale(0.82);
    }


    .why-ring {
        width: 420px;
        height: 420px;
    }


    .why-content h2 {
        font-size: 40px;

        letter-spacing: -1px;
    }


    .why-description {
        font-size: 16px;
    }


    .why-feature {
        gap: 13px;
    }


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

        min-width: 48px;
    }


    .why-feature h4 {
        font-size: 17px;
    }


    .why-feature p {
        font-size: 14px;
    }

}


/* =====================================
   HOW IT WORKS SECTION
===================================== */

.how-it-works-section {
    position: relative;

    padding: 80px 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f6faff 55%,
            #f6fff7 100%
        );
}


/* BACKGROUND GRID */

.how-bg-grid {
    position: absolute;

    inset: 0;

    opacity: 0.45;

    background-image:
        linear-gradient(
            rgba(11,77,152,0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(11,77,152,0.035) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    pointer-events: none;
}


/* CONTAINER */

.how-container {
    width: min(1280px, 92%);

    margin: auto;

    position: relative;

    z-index: 2;
}


/* HEADING */

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

    text-align: center;

    margin:
        0 auto
        60px;
}


.how-heading h2 {
    font-size:
        clamp(38px, 4vw, 56px);

    line-height: 1.15;

    color: #17243c;

    letter-spacing: -1.5px;
}


.how-heading h2 span {
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--green)
        );

    -webkit-background-clip: text;

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


.how-heading p {
    max-width: 620px;

    margin:
        20px auto 0;

    color: #68758a;

    font-size: 18px;

    line-height: 1.8;
}


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

.process-wrapper {
    position: relative;

    display: grid;

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

    gap: 30px;
}


/* CONNECTING LINE */

.process-line {
    position: absolute;

    top: 82px;

    left: 16.5%;

    width: 67%;

    height: 2px;

    overflow: hidden;

    background:
        rgba(11,77,152,0.10);

    z-index: 1;
}


.process-line span {
    display: block;

    width: 35%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--primary),
            var(--green),
            transparent
        );

    animation:
        processFlow
        3s
        linear
        infinite;
}


/* STEP */

.process-step {
    position: relative;

    z-index: 2;

    padding: 30px 28px;

    text-align: center;

    border-radius: 24px;

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

    border:
        1px solid
        rgba(11,77,152,0.08);

    box-shadow:
        0 15px 40px
        rgba(11,77,152,0.06);

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


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

    box-shadow:
        0 25px 45px
        rgba(11,77,152,0.13);
}


/* STEP NUMBER */

.step-number {
    position: absolute;

    top: 18px;
    right: 20px;

    font-size: 13px;

    font-weight: 800;

    color:
        rgba(11,77,152,0.22);
}


/* STEP ICON */

.step-icon {
    width: 86px;
    height: 86px;

    margin:
        0 auto
        25px;

    display: flex;

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

    border-radius: 26px;

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

    color: #ffffff;

    font-size: 35px;

    box-shadow:
        0 15px 30px
        rgba(11,77,152,0.18);

    position: relative;

    transition:
        transform 0.35s ease;
}


.process-step:hover
.step-icon {
    transform:
        rotate(8deg)
        scale(1.08);
}


/* TEXT */

.process-step h3 {
    color: #223149;

    font-size: 23px;

    margin-bottom: 12px;
}


.process-step p {
    max-width: 300px;

    margin: auto;

    color: #718096;

    font-size: 16px;

    line-height: 1.75;
}


/* CTA */

.how-cta {
    display: flex;

    justify-content: center;

    margin-top: 45px;
}


.how-cta-btn {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 16px 30px;

    border-radius: 50px;

    color: #ffffff;

    text-decoration: none;

    font-size: 17px;

    font-weight: 700;

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

    box-shadow:
        0 15px 35px
        rgba(11,77,152,0.18);

    transition: 0.3s ease;
}


.how-cta-btn:hover {
    color: #ffffff;

    transform:
        translateY(-4px);

    box-shadow:
        0 20px 40px
        rgba(11,77,152,0.28);
}


.how-cta-btn span {
    font-size: 22px;

    transition: 0.3s ease;
}


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


/* ANIMATION */

@keyframes processFlow {

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

    to {
        transform:
            translateX(350%);
    }

}


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

@media (max-width: 800px) {

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

        gap: 20px;
    }


    .process-line {
        display: none;
    }


    .process-step {
        padding: 28px 24px;
    }

}


@media (max-width: 600px) {

    .how-it-works-section {
        padding: 60px 0;
    }


    .how-heading {
        margin-bottom: 40px;
    }


    .how-heading h2 {
        font-size: 38px;

        letter-spacing: -1px;
    }


    .how-heading p {
        font-size: 16px;
    }


    .step-icon {
        width: 76px;
        height: 76px;

        font-size: 30px;
    }


    .process-step h3 {
        font-size: 21px;
    }


    .process-step p {
        font-size: 15px;
    }


    .how-cta {
        margin-top: 35px;
    }


    .how-cta-btn {
        width: 100%;

        justify-content: center;
    }

}


/* =====================================
   PREMIUM LIGHT CTA SECTION
===================================== */

.light-cta-section {
    position: relative;

    padding: 80px 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #ffffff 48%,
            #f5fff7 100%
        );
}


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

.cta-light-pattern {
    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.7;

    background-image:
        radial-gradient(
            rgba(11,77,152,0.07) 1px,
            transparent 1px
        );

    background-size: 24px 24px;

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            black 30%,
            black 70%,
            transparent 100%
        );
}


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

.light-cta-container {
    width: min(1280px, 92%);

    margin: auto;

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    align-items: center;

    gap: 70px;

    position: relative;

    z-index: 2;
}


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

.light-cta-content h2 {
    color: #17243c;

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

    line-height: 1.1;

    letter-spacing: -1.8px;

    margin-bottom: 22px;
}


.light-cta-content h2 span {
    display: block;

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

    -webkit-background-clip: text;

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


.light-cta-content p {
    max-width: 620px;

    color: #68758a;

    font-size: 18px;

    line-height: 1.85;

    margin-bottom: 30px;
}


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

.light-cta-buttons {
    display: flex;

    gap: 15px;

    flex-wrap: wrap;
}


.light-cta-primary,
.light-cta-outline {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 16px 28px;

    border-radius: 50px;

    text-decoration: none;

    font-size: 16px;

    font-weight: 700;

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


.light-cta-primary {
    color: #ffffff;

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

    box-shadow:
        0 14px 30px
        rgba(11,77,152,0.18);
}


.light-cta-primary:hover {
    color: #ffffff;

    transform:
        translateY(-4px);

    box-shadow:
        0 20px 38px
        rgba(11,77,152,0.25);
}


.light-cta-outline {
    color: var(--primary);

    background: #ffffff;

    border:
        1px solid
        rgba(11,77,152,0.13);
}


.light-cta-outline:hover {
    color: var(--primary);

    transform:
        translateY(-4px);

    box-shadow:
        0 15px 30px
        rgba(11,77,152,0.10);
}


/* =====================================
   QUICK CONTACT
===================================== */

.light-quick-contact {
    display: flex;

    flex-wrap: wrap;

    gap: 28px;

    margin-top: 35px;
}


.quick-contact-item {
    display: flex;

    align-items: center;

    gap: 11px;

    text-decoration: none;

    transition:
        transform 0.3s ease;
}


.quick-contact-item:hover {
    transform:
        translateX(5px);
}


.quick-contact-icon {
    width: 45px;
    height: 45px;

    display: flex;

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

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(11,77,152,0.10),
            rgba(21,154,27,0.12)
        );

    font-size: 18px;
}


.quick-contact-item small {
    display: block;

    color: #7c8797;

    font-size: 12px;

    margin-bottom: 4px;
}


.quick-contact-item strong {
    display: block;

    color: #26344c;

    font-size: 14px;
}


/* =====================================
   SERVICE NETWORK
===================================== */

.service-network {
    position: relative;

    width: 100%;

    height: 520px;

    max-width: 600px;

    margin: auto;
}


/* =====================================
   SVG CONNECTION LINES
===================================== */

.network-lines {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 1;

    overflow: visible;
}


.network-lines line {
    stroke:
        rgba(11,77,152,0.15);

    stroke-width: 2;

    stroke-dasharray: 6 8;

    animation:
        lineFlow
        2s
        linear
        infinite;
}


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

.network-center {
    position: absolute;

    top: 50%;
    left: 50%;

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

    width: 150px;
    height: 150px;

    display: flex;

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

    border-radius: 50%;

    z-index: 5;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f3f9ff
        );

    border:
        1px solid
        rgba(11,77,152,0.12);

    box-shadow:
        0 20px 50px
        rgba(11,77,152,0.14);
}


.network-center::before {
    content: "";

    position: absolute;

    inset: -12px;

    border-radius: 50%;

    border:
        1px dashed
        rgba(21,154,27,0.35);

    animation:
        centerRingRotate
        12s
        linear
        infinite;
}


.network-center::after {
    content: "";

    position: absolute;

    inset: -25px;

    border-radius: 50%;

    border:
        1px solid
        rgba(11,77,152,0.08);
}


.network-logo {
    width: 105px;

    position: relative;

    z-index: 2;
}


.network-logo img {
    width: 100%;

    display: block;

    object-fit: contain;
}


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

.network-node {
    position: absolute;

    z-index: 3;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

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


.network-node-icon {
    width: 65px;
    height: 65px;

    display: flex;

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

    border-radius: 20px;

    background: #ffffff;

    border:
        1px solid
        rgba(11,77,152,0.10);

    box-shadow:
        0 12px 30px
        rgba(11,77,152,0.10);

    font-size: 26px;

    transition:
        transform 0.3s ease;
}


.network-node:hover
.network-node-icon {
    transform:
        scale(1.12)
        rotate(-6deg);
}


.network-node span {
    padding: 6px 11px;

    border-radius: 50px;

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

    color: #344158;

    font-size: 12px;

    font-weight: 700;

    box-shadow:
        0 6px 15px
        rgba(11,77,152,0.05);
}


/* NODE POSITIONS */

.node-one {
    top: 35px;
    left: 5%;
}


.node-two {
    top: 35px;
    right: 5%;

    animation-delay: 0.7s;
}


.node-three {
    bottom: 75px;
    left: 0;

    animation-delay: 1.4s;
}


.node-four {
    bottom: 75px;
    right: 0;

    animation-delay: 2.1s;
}


.node-five {
    bottom: 0;
    left: 50%;

    transform:
        translateX(-50%);

    animation-delay: 2.8s;
}


/* =====================================
   MOVING DATA DOTS
===================================== */

.data-dot {
    position: absolute;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    z-index: 4;

    background: var(--green);

    box-shadow:
        0 0 0 6px
        rgba(21,154,27,0.12),
        0 0 18px
        rgba(21,154,27,0.55);
}


/* DOT 1 */

.dot-one {
    top: 220px;
    left: 245px;

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


/* DOT 2 */

.dot-two {
    top: 220px;
    left: 345px;

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


/* DOT 3 */

.dot-three {
    top: 290px;
    left: 235px;

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


/* DOT 4 */

.dot-four {
    top: 290px;
    right: 235px;

    animation:
        dataToFour
        3.2s
        ease-in-out
        infinite;
}


/* DOT 5 */

.dot-five {
    bottom: 135px;
    left: 50%;

    animation:
        dataToFive
        3.7s
        ease-in-out
        infinite;
}


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

@keyframes lineFlow {

    to {
        stroke-dashoffset: -28;
    }

}


@keyframes centerRingRotate {

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes nodePulse {

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

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

}


@keyframes dataToOne {

    0% {
        transform:
            translate(0,0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform:
            translate(-135px,-135px);
        opacity: 0;
    }

}


@keyframes dataToTwo {

    0% {
        transform:
            translate(0,0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform:
            translate(135px,-135px);
        opacity: 0;
    }

}


@keyframes dataToThree {

    0% {
        transform:
            translate(0,0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform:
            translate(-160px,105px);
        opacity: 0;
    }

}


@keyframes dataToFour {

    0% {
        transform:
            translate(0,0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform:
            translate(160px,105px);
        opacity: 0;
    }

}


@keyframes dataToFive {

    0% {
        transform:
            translate(-50%,0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform:
            translate(-50%,125px);
        opacity: 0;
    }

}


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

@media (max-width: 1050px) {

    .light-cta-container {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .light-cta-content {
        max-width: 750px;

        margin: auto;

        text-align: center;
    }


    .light-cta-buttons,
    .light-quick-contact {
        justify-content: center;
    }

}


@media (max-width: 650px) {

    .light-cta-section {
        padding: 60px 0;
    }


    .light-cta-content h2 {
        font-size: 40px;

        letter-spacing: -1px;
    }


    .light-cta-content p {
        font-size: 16px;
    }


    .light-cta-buttons {
        flex-direction: column;
    }


    .light-cta-primary,
    .light-cta-outline {
        width: 100%;
    }


    .light-quick-contact {
        flex-direction: column;

        align-items: center;

        gap: 18px;
    }


    /* MOBILE NETWORK */

    .service-network {
        height: 430px;

        transform:
            scale(0.78);

        transform-origin:
            top center;

        margin-bottom: -90px;
    }

}


/* =====================================
   FINTECH MARQUEE SECTION
===================================== */

.fintech-marquee-section {
    position: relative;

    padding: 80px 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f6faff 50%,
            #f7fff8 100%
        );
}


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

.marquee-section-container {
    position: relative;

    width: 100%;
}


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

.marquee-heading {
    width: min(760px, 92%);

    margin:
        0 auto
        48px;

    text-align: center;
}


.marquee-heading h2 {
    color: #17243c;

    font-size:
        clamp(38px, 4vw, 56px);

    line-height: 1.15;

    letter-spacing: -1.5px;

    margin-bottom: 18px;
}


.marquee-heading h2 span {
    display: block;

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

    -webkit-background-clip: text;

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


.marquee-heading p {
    color: #68758a;

    font-size: 18px;

    line-height: 1.8;
}


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

.service-marquee {
    width: 100%;

    overflow: hidden;

    padding: 12px 0;

    position: relative;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            black 8%,
            black 92%,
            transparent
        );
}


.service-marquee-track {
    width: max-content;

    display: flex;

    align-items: center;

    gap: 18px;

    white-space: nowrap;

    will-change: transform;
}


/* =====================================
   SERVICE CHIP
===================================== */

.marquee-service {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 14px 22px;

    border-radius: 50px;

    background: #ffffff;

    border:
        1px solid
        rgba(11,77,152,0.10);

    color: #28364d;

    font-size: 16px;

    font-weight: 700;

    box-shadow:
        0 10px 25px
        rgba(11,77,152,0.07);

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


.marquee-service:hover {
    transform:
        translateY(-4px)
        scale(1.03);

    box-shadow:
        0 15px 30px
        rgba(11,77,152,0.12);
}


.marquee-icon {
    font-size: 19px;
}


/* GREEN CHIPS */

.marquee-green {
    color: #167a24;

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

    border-color:
        rgba(21,154,27,0.14);
}


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

.marquee-left
.service-marquee-track {
    animation:
        marqueeMoveLeft
        28s
        linear
        infinite;
}


.marquee-right
.service-marquee-track {
    animation:
        marqueeMoveRight
        24s
        linear
        infinite;
}


@keyframes marqueeMoveLeft {

    from {
        transform:
            translateX(0);
    }

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

}


@keyframes marqueeMoveRight {

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

    to {
        transform:
            translateX(0);
    }

}


/* PAUSE ON HOVER */

.service-marquee:hover
.service-marquee-track {
    animation-play-state:
        paused;
}


/* =====================================
   CENTER HIGHLIGHT
===================================== */

.marquee-highlight {
    width:
        min(1050px, 92%);

    margin:
        30px auto;

    padding:
        26px 32px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f4faff
        );

    border:
        1px solid
        rgba(11,77,152,0.09);

    box-shadow:
        0 18px 45px
        rgba(11,77,152,0.08);

    position: relative;

    overflow: hidden;
}


/* LIGHT SWEEP ANIMATION */

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

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(21,154,27,0.08),
            transparent
        );

    transform:
        skewX(-20deg);

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


.highlight-left {
    display: flex;

    align-items: center;

    gap: 18px;

    position: relative;

    z-index: 2;
}


.highlight-mini-icon {
    width: 58px;
    height: 58px;

    display: flex;

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

    border-radius: 18px;

    color: #ffffff;

    font-size: 24px;

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

    box-shadow:
        0 12px 25px
        rgba(11,77,152,0.18);

    animation:
        sparkleRotate
        4s
        linear
        infinite;
}


.highlight-left span {
    display: block;

    margin-bottom: 5px;

    color: #78869a;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.2px;
}


.highlight-left h3 {
    color: #243149;

    font-size: 24px;
}


.highlight-btn {
    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 24px;

    border-radius: 50px;

    text-decoration: none;

    color: #ffffff;

    font-size: 15px;

    font-weight: 700;

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

    box-shadow:
        0 12px 25px
        rgba(11,77,152,0.15);

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


.highlight-btn:hover {
    color: #ffffff;

    transform:
        translateY(-3px);

    box-shadow:
        0 17px 30px
        rgba(11,77,152,0.23);
}


.highlight-btn span {
    font-size: 20px;

    transition:
        transform 0.3s ease;
}


.highlight-btn:hover span {
    transform:
        translateX(5px);
}


/* =====================================
   KEYFRAMES
===================================== */

@keyframes lightSweep {

    0% {
        left: -120%;
    }

    55%,
    100% {
        left: 150%;
    }

}


@keyframes sparkleRotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


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

@media (max-width: 700px) {

    .fintech-marquee-section {
        padding: 60px 0;
    }


    .marquee-heading {
        margin-bottom: 35px;
    }


    .marquee-heading h2 {
        font-size: 38px;

        letter-spacing: -1px;
    }


    .marquee-heading p {
        font-size: 16px;
    }


    .marquee-highlight {
        flex-direction: column;

        align-items: flex-start;

        padding: 24px;

        margin:
            22px auto;
    }


    .highlight-left h3 {
        font-size: 21px;
    }


    .highlight-btn {
        width: 100%;

        justify-content: center;
    }


    .marquee-service {
        padding: 12px 18px;

        font-size: 14px;
    }

}


/* =====================================
   CONNECT SECTION
===================================== */

.connect-section {
    position: relative;

    padding: 80px 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7fbff 52%,
            #f5fff7 100%
        );
}


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

.connect-bg-shape {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.shape-one {
    width: 500px;
    height: 500px;

    top: -320px;
    right: -180px;

    border:
        1px solid
        rgba(11,77,152,0.08);

    animation:
        connectShapeRotate
        22s
        linear
        infinite;
}


.shape-two {
    width: 380px;
    height: 380px;

    bottom: -250px;
    left: -130px;

    border:
        1px dashed
        rgba(21,154,27,0.15);

    animation:
        connectShapeRotateReverse
        25s
        linear
        infinite;
}


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

.connect-container {
    width: min(1280px, 92%);

    margin: auto;

    display: grid;

    grid-template-columns:
        1fr
        0.9fr;

    align-items: center;

    gap: 80px;

    position: relative;

    z-index: 2;
}


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

.connect-content h2 {
    color: #17243c;

    font-size:
        clamp(40px, 4.4vw, 60px);

    line-height: 1.12;

    letter-spacing: -1.5px;

    margin-bottom: 22px;
}


.connect-content h2 span {
    display: block;

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

    -webkit-background-clip: text;

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


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

    color: #68758a;

    font-size: 18px;

    line-height: 1.85;

    margin-bottom: 35px;
}


/* =====================================
   CONTACT JOURNEY
===================================== */

.contact-journey {
    position: relative;

    display: flex;

    flex-direction: column;

    gap: 12px;
}


.contact-journey::before {
    content: "";

    position: absolute;

    top: 35px;
    bottom: 35px;

    left: 31px;

    width: 2px;

    background:
        linear-gradient(
            var(--primary),
            var(--green)
        );

    opacity: 0.25;
}


.journey-item {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 18px;

    min-height: 85px;

    padding: 17px 20px;

    border-radius: 20px;

    text-decoration: none;

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

    border:
        1px solid
        rgba(11,77,152,0.08);

    box-shadow:
        0 10px 30px
        rgba(11,77,152,0.06);

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


.journey-item:hover {
    transform:
        translateX(8px);

    border-color:
        rgba(21,154,27,0.25);

    box-shadow:
        0 18px 35px
        rgba(11,77,152,0.12);
}


.journey-icon {
    width: 62px;
    height: 62px;

    min-width: 62px;

    display: flex;

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

    border-radius: 18px;

    color: #ffffff;

    font-size: 21px;

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

    box-shadow:
        0 10px 22px
        rgba(11,77,152,0.15);

    transition:
        transform 0.35s ease;
}


.journey-item:hover
.journey-icon {
    transform:
        rotate(-8deg)
        scale(1.08);
}


.journey-info {
    flex: 1;
}


.journey-info small {
    display: block;

    margin-bottom: 5px;

    color: #7c8798;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;
}


.journey-info strong {
    display: block;

    color: #26344c;

    font-size: 16px;

    line-height: 1.5;
}


.journey-arrow {
    color: var(--green);

    font-size: 25px;

    font-weight: 700;

    transition:
        transform 0.3s ease;
}


.journey-item:hover
.journey-arrow {
    transform:
        translateX(5px);
}


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

.connect-visual {
    position: relative;

    width: 100%;

    min-height: 510px;

    display: flex;

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


/* ROTATING OUTLINE */

.connect-rotate-ring {
    position: absolute;

    width: 410px;
    height: 410px;

    border-radius: 50%;

    border:
        1px dashed
        rgba(11,77,152,0.20);

    animation:
        connectRingRotate
        20s
        linear
        infinite;
}


.connect-rotate-ring::before,
.connect-rotate-ring::after {
    content: "";

    position: absolute;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 0 7px
        rgba(21,154,27,0.10);
}


.connect-rotate-ring::before {
    top: -6px;
    left: 50%;
}


.connect-rotate-ring::after {
    bottom: -6px;
    left: 50%;
}


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

.connect-main-card {
    position: relative;

    z-index: 3;

    width: min(420px, 100%);

    border-radius: 30px;

    overflow: hidden;

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

    border:
        1px solid
        rgba(11,77,152,0.10);

    box-shadow:
        0 30px 70px
        rgba(11,77,152,0.13);
}


.connect-card-top {
    position: relative;

    padding: 25px 25px 45px;

    min-height: 130px;

    background:
        linear-gradient(
            135deg,
            rgba(11,77,152,0.09),
            rgba(21,154,27,0.10)
        );

    overflow: hidden;
}


.connect-card-top::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    border:
        1px solid
        rgba(11,77,152,0.10);

    right: -100px;
    top: -100px;

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


.connect-status {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 8px;

    color: #556278;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;
}


.connect-status span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 0 5px
        rgba(21,154,27,0.10);

    animation:
        statusPulse
        2s
        infinite;
}


.connect-card-logo {
    position: absolute;

    right: 25px;
    bottom: -42px;

    width: 85px;
    height: 85px;

    padding: 10px;

    display: flex;

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

    border-radius: 22px;

    background: #ffffff;

    border:
        1px solid
        rgba(11,77,152,0.08);

    box-shadow:
        0 15px 30px
        rgba(11,77,152,0.12);

    z-index: 5;
}


.connect-card-logo img {
    width: 100%;

    max-height: 100%;

    object-fit: contain;
}


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

.connect-card-content {
    padding: 45px 28px 28px;
}


.connect-card-title {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 20px;
}


.connect-card-title-icon {
    width: 52px;
    height: 52px;

    min-width: 52px;

    display: flex;

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

    border-radius: 17px;

    color: #ffffff;

    font-size: 20px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--green)
        );
}


.connect-card-title span {
    display: block;

    color: #78859a;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

    margin-bottom: 5px;
}


.connect-card-title h3 {
    color: #26344c;

    font-size: 22px;

    line-height: 1.25;
}


.connect-card-content > p {
    color: #728095;

    font-size: 15px;

    line-height: 1.75;

    margin-bottom: 22px;
}


/* =====================================
   SERVICE TAGS
===================================== */

.connect-service-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 25px;
}


.connect-service-tags span {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 9px 12px;

    border-radius: 50px;

    color: #536076;

    font-size: 12px;

    font-weight: 700;

    background:
        #f7faff;

    border:
        1px solid
        rgba(11,77,152,0.07);
}


.connect-service-tags i {
    color: var(--green);
}


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

.connect-main-btn {
    display: flex;

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

    gap: 12px;

    width: 100%;

    padding: 16px 20px;

    border-radius: 15px;

    text-decoration: none;

    color: #ffffff;

    font-size: 16px;

    font-weight: 700;

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

    box-shadow:
        0 12px 25px
        rgba(11,77,152,0.16);

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


.connect-main-btn:hover {
    color: #ffffff;

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 30px
        rgba(11,77,152,0.22);
}


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

.connect-floating {
    position: absolute;

    z-index: 6;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 11px 15px;

    border-radius: 50px;

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

    border:
        1px solid
        rgba(11,77,152,0.08);

    box-shadow:
        0 12px 28px
        rgba(11,77,152,0.10);

    color: #3b485c;

    font-size: 13px;

    font-weight: 700;
}


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

    display: flex;

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

    border-radius: 10px;

    color: #ffffff;

    font-size: 13px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--green)
        );
}


.floating-one {
    left: 0;
    top: 70px;

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


.floating-two {
    right: 0;
    bottom: 70px;

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


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

@keyframes connectRingRotate {

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes connectShapeRotate {

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes connectShapeRotateReverse {

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

}


@keyframes badgeFloatOne {

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

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

}


@keyframes badgeFloatTwo {

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

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

}


@keyframes topCirclePulse {

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

    50% {
        transform:
            scale(1.18);
    }

}


@keyframes statusPulse {

    0% {
        box-shadow:
            0 0 0 0
            rgba(21,154,27,0.30);
    }

    70% {
        box-shadow:
            0 0 0 10px
            rgba(21,154,27,0);
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(21,154,27,0);
    }

}


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

@media (max-width: 1050px) {

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

        gap: 50px;
    }


    .connect-content {
        max-width: 750px;

        margin: auto;
    }


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

}


@media (max-width: 650px) {

    .connect-section {
        padding: 60px 0;
    }


    .connect-content h2 {
        font-size: 38px;

        letter-spacing: -1px;
    }


    .connect-description {
        font-size: 16px;
    }


    .journey-item {
        padding: 14px;

        gap: 13px;
    }


    .journey-icon {
        width: 54px;
        height: 54px;

        min-width: 54px;
    }


    .journey-info strong {
        font-size: 13px;
    }


    .journey-arrow {
        display: none;
    }


    .contact-journey::before {
        left: 27px;
    }


    .connect-visual {
        min-height: 440px;

        transform:
            scale(0.88);

        transform-origin:
            top center;

        margin-bottom: -55px;
    }


    .connect-floating {
        font-size: 11px;

        padding: 9px 12px;
    }


    .connect-rotate-ring {
        width: 360px;
        height: 360px;
    }

}

/* =====================================
   FINAL DIGITAL EXPERIENCE SECTION
===================================== */

.digital-experience-section {
    position: relative;
    padding: 80px 0;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f5faff 50%,
            #f6fff8 100%
        );
}


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

.digital-bg-lines {
    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.5;

    background-image:
        linear-gradient(
            135deg,
            transparent 49.5%,
            rgba(11,77,152,0.04) 50%,
            transparent 50.5%
        );

    background-size: 90px 90px;
}


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

.digital-experience-container {
    width: min(1280px, 92%);
    margin: auto;

    position: relative;
    z-index: 2;
}


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

.digital-experience-heading {
    max-width: 800px;

    text-align: center;

    margin:
        0 auto
        50px;
}


.digital-experience-heading h2 {
    color: #17243c;

    font-size:
        clamp(38px, 4vw, 56px);

    line-height: 1.15;

    letter-spacing: -1.5px;

    margin-bottom: 18px;
}


.digital-experience-heading h2 span {
    display: block;

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

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


.digital-experience-heading p {
    color: #68758a;

    font-size: 18px;

    line-height: 1.8;
}


/* =====================================
   DASHBOARD
===================================== */

.digital-dashboard {
    display: grid;

    grid-template-columns:
        1.25fr
        0.75fr;

    gap: 22px;

    max-width: 1150px;

    margin: auto;
}


/* =====================================
   MAIN PANEL
===================================== */

.dashboard-main-panel {
    padding: 32px;

    border-radius: 28px;

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

    border:
        1px solid
        rgba(11,77,152,0.09);

    box-shadow:
        0 25px 60px
        rgba(11,77,152,0.08);
}


.dashboard-top {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 28px;
}


.dashboard-label {
    display: block;

    color: #79869a;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.3px;

    margin-bottom: 8px;
}


.dashboard-top h3 {
    color: #223149;

    font-size: 30px;

    line-height: 1.25;
}


.dashboard-top h3 span {
    color: var(--green);
}


/* LIVE */

.dashboard-live {
    display: flex;

    align-items: center;

    gap: 8px;

    padding: 9px 13px;

    border-radius: 50px;

    white-space: nowrap;

    color: #237b31;

    background:
        rgba(21,154,27,0.08);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.5px;
}


.dashboard-live span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--green);

    animation:
        livePulse
        1.8s
        infinite;
}


/* =====================================
   SERVICE LIST
===================================== */

.dashboard-services {
    display: flex;

    flex-direction: column;

    gap: 12px;
}


.dashboard-service {
    display: flex;

    align-items: center;

    gap: 16px;

    padding: 16px;

    border-radius: 18px;

    border:
        1px solid
        rgba(11,77,152,0.07);

    background:
        #ffffff;

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


.dashboard-service:hover {
    transform:
        translateX(7px);

    box-shadow:
        0 12px 25px
        rgba(11,77,152,0.09);
}


.active-service {
    background:
        linear-gradient(
            90deg,
            rgba(11,77,152,0.06),
            rgba(21,154,27,0.05)
        );
}


.dashboard-service-icon {
    width: 52px;
    height: 52px;

    min-width: 52px;

    display: flex;

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

    border-radius: 16px;

    color: #ffffff;

    font-size: 20px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--green)
        );
}


.dashboard-service strong {
    display: block;

    color: #29374e;

    font-size: 16px;

    margin-bottom: 4px;
}


.dashboard-service small {
    color: #7b8799;

    font-size: 12px;
}


.service-arrow {
    margin-left: auto;

    color: var(--green);

    font-size: 16px;

    transition:
        transform 0.3s ease;
}


.dashboard-service:hover
.service-arrow {
    transform:
        translateX(5px);
}


/* =====================================
   MINI SERVICES
===================================== */

.dashboard-mini-services {
    display: flex;

    gap: 12px;

    margin-top: 22px;

    flex-wrap: wrap;
}


.dashboard-mini-services span {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 11px 15px;

    border-radius: 12px;

    color: #536076;

    background:
        #f7faff;

    border:
        1px solid
        rgba(11,77,152,0.06);

    font-size: 13px;

    font-weight: 700;
}


.dashboard-mini-services i {
    color: var(--green);
}


/* =====================================
   ACTIVITY PANEL
===================================== */

.dashboard-activity-panel {
    padding: 28px;

    border-radius: 28px;

    background:
        linear-gradient(
            160deg,
            #f7fbff,
            #ffffff
        );

    border:
        1px solid
        rgba(11,77,152,0.09);

    box-shadow:
        0 25px 60px
        rgba(11,77,152,0.08);
}


.activity-header {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 10px;

    padding-bottom: 22px;

    margin-bottom: 20px;

    border-bottom:
        1px solid
        rgba(11,77,152,0.07);
}


.activity-header span {
    display: block;

    color: #7b8799;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

    margin-bottom: 7px;
}


.activity-header h3 {
    color: #26344c;

    font-size: 21px;
}


/* =====================================
   ACTIVITY WAVE
===================================== */

.activity-wave {
    height: 35px;

    display: flex;

    align-items: center;

    gap: 4px;
}


.activity-wave span {
    width: 4px;

    border-radius: 10px;

    background:
        linear-gradient(
            var(--primary),
            var(--green)
        );

    animation:
        waveBars
        1.2s
        ease-in-out
        infinite;
}


.activity-wave span:nth-child(1) {
    height: 12px;
}


.activity-wave span:nth-child(2) {
    height: 25px;

    animation-delay: 0.15s;
}


.activity-wave span:nth-child(3) {
    height: 18px;

    animation-delay: 0.3s;
}


.activity-wave span:nth-child(4) {
    height: 30px;

    animation-delay: 0.45s;
}


.activity-wave span:nth-child(5) {
    height: 15px;

    animation-delay: 0.6s;
}


/* =====================================
   ACTIVITY LIST
===================================== */

.activity-list {
    display: flex;

    flex-direction: column;

    gap: 18px;
}


.activity-row {
    display: flex;

    align-items: center;

    gap: 12px;
}


.activity-dot {
    width: 11px;
    height: 11px;

    min-width: 11px;

    border-radius: 50%;

    position: relative;
}


.activity-dot::after {
    content: "";

    position: absolute;

    inset: -5px;

    border-radius: 50%;

    opacity: 0.25;

    animation:
        activityPulse
        2s
        infinite;
}


.green-dot {
    background: var(--green);
}


.green-dot::after {
    background: var(--green);
}


.blue-dot {
    background: var(--primary);
}


.blue-dot::after {
    background: var(--primary);
}


.activity-text {
    flex: 1;
}


.activity-text strong {
    display: block;

    color: #354259;

    font-size: 14px;

    margin-bottom: 4px;
}


.activity-text small {
    color: #8a95a6;

    font-size: 11px;
}


.activity-status {
    padding: 6px 9px;

    border-radius: 50px;

    color: #218235;

    background:
        rgba(21,154,27,0.08);

    font-size: 10px;

    font-weight: 800;
}


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

.dashboard-explore-btn {
    width: 100%;

    display: flex;

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

    gap: 10px;

    margin-top: 28px;

    padding: 15px;

    border-radius: 15px;

    color: #ffffff;

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

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

    box-shadow:
        0 12px 25px
        rgba(11,77,152,0.15);

    transition:
        transform 0.3s ease;
}


.dashboard-explore-btn:hover {
    color: #ffffff;

    transform:
        translateY(-3px);
}


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

.digital-bottom-message {
    display: flex;

    align-items: center;

    gap: 20px;

    max-width: 800px;

    margin:
        40px auto 0;
}


.digital-bottom-message p {
    white-space: nowrap;

    color: #778499;

    font-size: 14px;

    margin: 0;
}


.bottom-message-line {
    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(11,77,152,0.18),
            transparent
        );
}


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

@keyframes livePulse {

    0% {
        box-shadow:
            0 0 0 0
            rgba(21,154,27,0.35);
    }

    70% {
        box-shadow:
            0 0 0 9px
            rgba(21,154,27,0);
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(21,154,27,0);
    }

}


@keyframes waveBars {

    0%,
    100% {
        transform:
            scaleY(0.5);
    }

    50% {
        transform:
            scaleY(1.15);
    }

}


@keyframes activityPulse {

    0% {
        transform:
            scale(0.6);

        opacity: 0.5;
    }

    100% {
        transform:
            scale(1.5);

        opacity: 0;
    }

}


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

@media (max-width: 900px) {

    .digital-dashboard {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 600px) {

    .digital-experience-section {
        padding: 60px 0;
    }


    .digital-experience-heading {
        margin-bottom: 35px;
    }


    .digital-experience-heading h2 {
        font-size: 37px;

        letter-spacing: -1px;
    }


    .digital-experience-heading p {
        font-size: 16px;
    }


    .dashboard-main-panel,
    .dashboard-activity-panel {
        padding: 20px;
    }


    .dashboard-top {
        flex-direction: column;
    }


    .dashboard-top h3 {
        font-size: 25px;
    }


    .digital-bottom-message {
        gap: 10px;
    }


    .digital-bottom-message p {
        white-space: normal;

        text-align: center;

        font-size: 12px;
    }

}


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

.services-hero {
    position: relative;

    min-height: 720px;

    display: flex;

    align-items: center;

    overflow: hidden;

    padding: 110px 0 80px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f5f9ff 50%,
            #f5fff7 100%
        );
}


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

.services-grid-bg {
    position: absolute;

    inset: 0;

    opacity: 0.55;

    background-image:
        linear-gradient(
            rgba(11,77,152,0.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(11,77,152,0.04) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 78%
        );
}


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

.services-glow {
    position: absolute;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    filter: blur(80px);

    pointer-events: none;
}


.services-glow-one {
    top: -180px;
    left: -180px;

    background:
        rgba(11,77,152,0.09);

    animation:
        glowFloatOne
        10s
        ease-in-out
        infinite;
}


.services-glow-two {
    right: -150px;
    bottom: -150px;

    background:
        rgba(21,154,27,0.10);

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


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

.services-hero-container {
    width: min(1280px, 92%);

    margin: auto;

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    align-items: center;

    gap: 60px;

    position: relative;

    z-index: 2;
}


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

.services-hero-content {
    max-width: 650px;
}


.services-hero-badge {
    width: fit-content;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 16px;

    border-radius: 50px;

    color: var(--primary);

    background:
        rgba(11,77,152,0.07);

    border:
        1px solid
        rgba(11,77,152,0.10);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;

    margin-bottom: 22px;
}


.badge-pulse {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: var(--green);

    animation:
        badgePulse
        2s
        infinite;
}


.services-hero-content h1 {
    color: #18263e;

    font-size:
        clamp(45px, 5vw, 70px);

    line-height: 1.08;

    letter-spacing: -2px;

    margin-bottom: 22px;
}


.services-hero-content h1 span {
    display: block;

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

    -webkit-background-clip: text;

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


.services-hero-content p {
    max-width: 620px;

    color: #68758a;

    font-size: 19px;

    line-height: 1.8;

    margin-bottom: 30px;
}


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

.services-hero-buttons {
    display: flex;

    align-items: center;

    gap: 15px;

    flex-wrap: wrap;

    margin-bottom: 35px;
}


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

    align-items: center;

    gap: 11px;

    padding: 17px 25px;

    border-radius: 15px;

    text-decoration: none;

    color: #ffffff;

    font-size: 16px;

    font-weight: 700;

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

    box-shadow:
        0 14px 28px
        rgba(11,77,152,0.16);

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


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

    transform:
        translateY(-4px);

    box-shadow:
        0 20px 35px
        rgba(11,77,152,0.22);
}


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

    align-items: center;

    gap: 10px;

    padding: 16px 23px;

    border-radius: 15px;

    text-decoration: none;

    color: #39475d;

    font-size: 16px;

    font-weight: 700;

    background: #ffffff;

    border:
        1px solid
        rgba(11,77,152,0.12);

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


.services-secondary-btn:hover {
    color: var(--primary);

    transform:
        translateY(-4px);

    border-color:
        rgba(11,77,152,0.25);
}


/* =====================================
   QUICK INFO
===================================== */

.services-quick-info {
    display: flex;

    align-items: center;

    gap: 25px;

    flex-wrap: wrap;
}


.quick-info-item {
    display: flex;

    flex-direction: column;
}


.quick-info-item strong {
    color: #233149;

    font-size: 26px;

    line-height: 1.2;
}


.quick-info-item span {
    color: #7b8799;

    font-size: 12px;

    margin-top: 4px;
}


.quick-info-divider {
    width: 1px;
    height: 40px;

    background:
        rgba(11,77,152,0.13);
}


/* =====================================
   ORBIT AREA
===================================== */

.services-orbit-area {
    position: relative;

    width: 100%;

    max-width: 550px;

    height: 550px;

    margin: auto;

    display: flex;

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


/* RINGS */

.orbit-ring {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.orbit-ring-one {
    width: 440px;
    height: 440px;

    border:
        1px solid
        rgba(11,77,152,0.13);

    animation:
        orbitRotate
        30s
        linear
        infinite;
}


.orbit-ring-two {
    width: 330px;
    height: 330px;

    border:
        1px dashed
        rgba(21,154,27,0.18);

    animation:
        orbitRotateReverse
        22s
        linear
        infinite;
}


/* =====================================
   CENTER CORE
===================================== */

.services-core {
    position: relative;

    z-index: 3;

    width: 210px;
    height: 210px;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

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

    text-align: center;

    color: #ffffff;

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

    box-shadow:
        0 25px 60px
        rgba(11,77,152,0.25);

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


.core-small-icon {
    font-size: 18px;

    margin-bottom: 8px;
}


.services-core > span {
    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

    opacity: 0.85;

    margin-bottom: 6px;
}


.services-core strong {
    font-size: 27px;

    line-height: 1.1;
}


.core-status {
    position: absolute;

    bottom: -15px;

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 7px 12px;

    border-radius: 50px;

    color: #2b3547;

    background: #ffffff;

    box-shadow:
        0 10px 25px
        rgba(11,77,152,0.12);

    font-size: 9px;

    font-weight: 800;
}


.core-status span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--green);

    animation:
        badgePulse
        2s
        infinite;
}


/* =====================================
   ORBIT SERVICE ITEMS
===================================== */

.orbit-service {
    position: absolute;

    z-index: 4;

    width: 110px;

    padding: 12px 8px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;

    border-radius: 18px;

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

    border:
        1px solid
        rgba(11,77,152,0.09);

    box-shadow:
        0 15px 30px
        rgba(11,77,152,0.10);

    color: #2d3b51;

    font-size: 11px;

    font-weight: 700;

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


.orbit-service:hover {
    transform:
        scale(1.1);

    box-shadow:
        0 22px 40px
        rgba(11,77,152,0.16);
}


.orbit-service i {
    width: 38px;
    height: 38px;

    display: flex;

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

    border-radius: 12px;

    color: #ffffff;

    font-size: 15px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--green)
        );
}


/* =====================================
   SERVICE POSITIONS
===================================== */

.orbit-mobile {
    top: 20px;
    left: 50%;

    transform:
        translateX(-50%);
}


.orbit-dth {
    top: 120px;
    right: 10px;
}


.orbit-aeps {
    bottom: 100px;
    right: 15px;
}


.orbit-dmt {
    bottom: 15px;
    left: 50%;

    transform:
        translateX(-50%);
}


.orbit-bbps {
    bottom: 100px;
    left: 15px;
}


.orbit-pan {
    top: 120px;
    left: 10px;
}


/* =====================================
   PARTICLES
===================================== */

.service-particle {
    position: absolute;

    border-radius: 50%;

    background: var(--green);

    opacity: 0.6;
}


.particle-one {
    width: 8px;
    height: 8px;

    top: 60px;
    left: 80px;

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


.particle-two {
    width: 12px;
    height: 12px;

    right: 80px;
    bottom: 80px;

    background: var(--primary);

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


.particle-three {
    width: 6px;
    height: 6px;

    left: 50px;
    bottom: 170px;

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


/* =====================================
   SCROLL INDICATOR
===================================== */

.services-scroll-indicator {
    position: absolute;

    left: 50%;
    bottom: 22px;

    transform:
        translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 6px;

    color: #7b8799;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.8px;

    animation:
        scrollBounce
        2s
        infinite;
}


.services-scroll-indicator i {
    color: var(--green);
}


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

@keyframes orbitRotate {

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes orbitRotateReverse {

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

}


@keyframes coreFloat {

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

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

}


@keyframes badgePulse {

    0% {
        box-shadow:
            0 0 0 0
            rgba(21,154,27,0.35);
    }

    70% {
        box-shadow:
            0 0 0 9px
            rgba(21,154,27,0);
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(21,154,27,0);
    }

}


@keyframes particleFloat {

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

    50% {
        transform:
            translate(12px, -18px);
    }

}


@keyframes glowFloatOne {

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

    50% {
        transform:
            translate(60px,40px);
    }

}


@keyframes glowFloatTwo {

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

    50% {
        transform:
            translate(-60px,-35px);
    }

}


@keyframes scrollBounce {

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

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

}


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

@media (max-width: 1050px) {

    .services-hero {
        min-height: auto;

        padding:
            130px 0
            80px;
    }


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

        text-align: center;
    }


    .services-hero-content {
        margin: auto;
    }


    .services-hero-badge {
        margin-left: auto;
        margin-right: auto;
    }


    .services-hero-buttons,
    .services-quick-info {
        justify-content: center;
    }


    .services-orbit-area {
        margin-top: 20px;
    }


    .services-scroll-indicator {
        display: none;
    }

}


@media (max-width: 600px) {

    .services-hero {
        padding:
            115px 0
            55px;
    }


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

        letter-spacing: -1px;
    }


    .services-hero-content p {
        font-size: 16px;
    }


    .services-orbit-area {
        width: 100%;

        height: 390px;

        transform:
            scale(0.75);

        transform-origin:
            top center;

        margin-bottom: -90px;
    }


    .services-hero-buttons {
        flex-direction: column;
    }


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

        justify-content: center;
    }


    .services-quick-info {
        gap: 14px;
    }


    .quick-info-divider {
        height: 35px;
    }


    .quick-info-item strong {
        font-size: 21px;
    }


    .quick-info-item span {
        font-size: 10px;
    }

}

/* =====================================
   SERVICE EXPLORER SECTION
===================================== */

.service-explorer {
    position: relative;
    padding: 80px 0;
    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7fbff 50%,
            #ffffff 100%
        );
}


.service-explorer-container {
    width: min(1280px, 92%);
    margin: auto;
}


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

.service-explorer-heading {
    max-width: 800px;
    margin: 0 auto 45px;

    text-align: center;
}


.service-explorer-heading h2 {
    color: #18263e;

    font-size: clamp(38px, 4vw, 55px);

    line-height: 1.15;

    letter-spacing: -1.5px;

    margin-bottom: 18px;
}


.service-explorer-heading h2 span {
    display: block;

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

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


.service-explorer-heading p {
    color: #68758a;

    font-size: 18px;

    line-height: 1.8;
}


/* =====================================
   MAIN BOX
===================================== */

.service-explorer-box {
    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    min-height: 600px;

    border-radius: 30px;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid
        rgba(11,77,152,0.09);

    box-shadow:
        0 25px 70px
        rgba(11,77,152,0.09);
}


/* =====================================
   LEFT NAVIGATION
===================================== */

.service-explorer-nav {
    padding: 22px;

    display: flex;

    flex-direction: column;

    gap: 9px;

    background:
        linear-gradient(
            180deg,
            #f7faff,
            #ffffff
        );

    border-right:
        1px solid
        rgba(11,77,152,0.08);
}


.service-nav-item {
    width: 100%;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 14px;

    border: none;

    border-radius: 17px;

    text-align: left;

    cursor: pointer;

    background: transparent;

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


.service-nav-item:hover {
    background:
        rgba(11,77,152,0.05);

    transform:
        translateX(4px);
}


.service-nav-item.active {
    color: #ffffff;

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

    box-shadow:
        0 12px 28px
        rgba(11,77,152,0.18);
}


.service-nav-icon {
    width: 48px;
    height: 48px;

    min-width: 48px;

    display: flex;

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

    border-radius: 14px;

    color: var(--primary);

    background: #ffffff;

    font-size: 18px;
}


.service-nav-item.active
.service-nav-icon {
    color: var(--green);
}


.service-nav-text {
    flex: 1;

    display: flex;

    flex-direction: column;
}


.service-nav-text strong {
    color: #2c3a51;

    font-size: 15px;

    margin-bottom: 4px;
}


.service-nav-text small {
    color: #8490a2;

    font-size: 11px;
}


.service-nav-item.active
.service-nav-text strong,
.service-nav-item.active
.service-nav-text small {
    color: #ffffff;
}


.service-nav-item > i {
    color: #8b97a8;

    font-size: 13px;
}


.service-nav-item.active > i {
    color: #ffffff;
}


/* =====================================
   RIGHT DISPLAY
===================================== */

.service-display {
    position: relative;

    display: flex;

    align-items: center;

    padding: 55px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f8fcff
        );
}


/* BACKGROUND CIRCLES */

.service-display-circle {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.circle-one {
    width: 450px;
    height: 450px;

    top: -260px;
    right: -200px;

    border:
        1px solid
        rgba(11,77,152,0.12);

    animation:
        explorerCircleRotate
        22s
        linear
        infinite;
}


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

    bottom: -150px;
    left: -120px;

    border:
        1px dashed
        rgba(21,154,27,0.18);

    animation:
        explorerCircleReverse
        18s
        linear
        infinite;
}


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

.service-display-content {
    display: none;

    position: relative;

    z-index: 2;

    width: 100%;

    animation:
        serviceContentIn
        0.5s
        ease;
}


.service-display-content.active {
    display: block;
}


.service-display-tag {
    width: fit-content;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 8px 13px;

    border-radius: 50px;

    color: var(--primary);

    background:
        rgba(11,77,152,0.06);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

    margin-bottom: 20px;
}


.service-display-tag span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--green);

    animation:
        serviceTagPulse
        2s
        infinite;
}


.service-display-icon {
    width: 100px;
    height: 100px;

    display: flex;

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

    border-radius: 30px;

    color: #ffffff;

    font-size: 40px;

    margin-bottom: 25px;

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

    box-shadow:
        0 20px 40px
        rgba(11,77,152,0.18);

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


.service-display-content h3 {
    color: #202e46;

    font-size: 43px;

    line-height: 1.15;

    margin-bottom: 20px;
}


.service-display-content h3 span {
    display: block;

    color: var(--green);
}


.service-display-content p {
    max-width: 580px;

    color: #68758a;

    font-size: 17px;

    line-height: 1.8;

    margin-bottom: 28px;
}


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

.service-feature-list {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}


.service-feature-list span {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 11px 15px;

    border-radius: 50px;

    color: #526076;

    background: #ffffff;

    border:
        1px solid
        rgba(11,77,152,0.08);

    box-shadow:
        0 8px 20px
        rgba(11,77,152,0.05);

    font-size: 12px;

    font-weight: 700;
}


.service-feature-list i {
    color: var(--green);
}


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

@keyframes serviceContentIn {

    from {
        opacity: 0;

        transform:
            translateY(18px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


@keyframes displayIconFloat {

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

    50% {
        transform:
            translateY(-10px)
            rotate(4deg);
    }

}


@keyframes explorerCircleRotate {

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes explorerCircleReverse {

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

}


@keyframes serviceTagPulse {

    0% {
        box-shadow:
            0 0 0 0
            rgba(21,154,27,0.35);
    }

    70% {
        box-shadow:
            0 0 0 8px
            rgba(21,154,27,0);
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(21,154,27,0);
    }

}


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

@media (max-width: 900px) {

    .service-explorer-box {
        grid-template-columns: 1fr;
    }


    .service-explorer-nav {
        border-right: none;

        border-bottom:
            1px solid
            rgba(11,77,152,0.08);
    }


    .service-display {
        min-height: 500px;
    }

}


@media (max-width: 600px) {

    .service-explorer {
        padding: 60px 0;
    }


    .service-explorer-heading {
        margin-bottom: 30px;
    }


    .service-explorer-heading h2 {
        font-size: 37px;
    }


    .service-explorer-heading p {
        font-size: 16px;
    }


    .service-explorer-nav {
        padding: 12px;
    }


    .service-nav-item {
        padding: 11px;
    }


    .service-nav-icon {
        width: 43px;
        height: 43px;

        min-width: 43px;
    }


    .service-nav-text strong {
        font-size: 13px;
    }


    .service-nav-text small {
        font-size: 10px;
    }


    .service-display {
        padding: 35px 22px;

        min-height: 470px;
    }


    .service-display-icon {
        width: 80px;
        height: 80px;

        font-size: 32px;

        border-radius: 24px;
    }


    .service-display-content h3 {
        font-size: 34px;
    }


    .service-display-content p {
        font-size: 15px;
    }

}

/* =====================================
   DIGITAL SERVICE NETWORK SECTION
===================================== */

.service-network-section {
    position: relative;

    padding: 80px 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f8fcff 0%,
            #ffffff 50%,
            #f6fff8 100%
        );
}


.service-network-container {
    width: min(1280px, 92%);

    margin: auto;

    position: relative;

    z-index: 2;
}


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

.network-bg-shape {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(90px);

    opacity: 0.45;
}


.network-shape-one {
    width: 400px;
    height: 400px;

    top: -200px;
    left: -200px;

    background:
        rgba(11,77,152,0.12);
}


.network-shape-two {
    width: 450px;
    height: 450px;

    right: -250px;
    bottom: -250px;

    background:
        rgba(21,154,27,0.12);
}


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

.service-network-heading {
    max-width: 800px;

    margin:
        0 auto
        45px;

    text-align: center;
}


.service-network-heading h2 {
    color: #1c2a42;

    font-size:
        clamp(38px, 4vw, 56px);

    line-height: 1.15;

    letter-spacing: -1.5px;

    margin-bottom: 18px;
}


.service-network-heading h2 span {
    display: block;

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

    -webkit-background-clip: text;

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


.service-network-heading p {
    color: #6d798c;

    font-size: 18px;

    line-height: 1.8;
}


/* =====================================
   NETWORK AREA
===================================== */

.service-network {
    position: relative;

    width: 100%;

    max-width: 1000px;

    height: 600px;

    margin: auto;
}


/* =====================================
   CENTER HUB
===================================== */

.network-center {
    position: absolute;

    top: 50%;
    left: 50%;

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

    width: 230px;
    height: 230px;

    display: flex;

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

    z-index: 5;
}


.network-center-inner {
    position: relative;

    z-index: 3;

    width: 190px;
    height: 190px;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

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

    text-align: center;

    color: #ffffff;

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

    box-shadow:
        0 25px 60px
        rgba(11,77,152,0.25);

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


.network-logo-icon {
    width: 45px;
    height: 45px;

    display: flex;

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

    border-radius: 14px;

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

    font-size: 19px;

    margin-bottom: 10px;
}


.network-center-inner span {
    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;

    opacity: 0.9;

    margin-bottom: 6px;
}


.network-center-inner strong {
    font-size: 28px;

    line-height: 1.05;
}


/* =====================================
   HUB PULSES
===================================== */

.hub-pulse {
    position: absolute;

    inset: 0;

    border-radius: 50%;

    border:
        1px solid
        rgba(21,154,27,0.25);

    animation:
        hubPulse
        3s
        ease-out
        infinite;
}


.hub-pulse-two {
    animation-delay: 1.5s;
}


/* =====================================
   SERVICE CARDS
===================================== */

.network-service {
    position: absolute;

    width: 220px;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 15px;

    border-radius: 18px;

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

    border:
        1px solid
        rgba(11,77,152,0.08);

    box-shadow:
        0 18px 35px
        rgba(11,77,152,0.09);

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

    z-index: 4;
}


.network-service:hover {
    transform:
        translateY(-7px)
        scale(1.03);

    box-shadow:
        0 25px 45px
        rgba(11,77,152,0.15);
}


.network-service-icon {
    width: 50px;
    height: 50px;

    min-width: 50px;

    display: flex;

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

    border-radius: 15px;

    color: #ffffff;

    font-size: 18px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--green)
        );
}


.network-service strong {
    display: block;

    color: #27354c;

    font-size: 14px;

    margin-bottom: 5px;
}


.network-service small {
    color: #8490a0;

    font-size: 11px;
}


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

.network-service-1 {
    top: 35px;
    left: 60px;
}


.network-service-2 {
    top: 35px;
    right: 60px;
}


.network-service-3 {
    top: 260px;
    left: 0;
}


.network-service-4 {
    top: 260px;
    right: 0;
}


.network-service-5 {
    bottom: 35px;
    left: 60px;
}


.network-service-6 {
    bottom: 35px;
    right: 60px;
}


/* =====================================
   CONNECTION LINES
===================================== */

.network-lines {
    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 1;
}


.network-line {
    position: absolute;

    height: 1px;

    transform-origin:
        left center;

    background:
        linear-gradient(
            90deg,
            rgba(11,77,152,0.12),
            rgba(21,154,27,0.35),
            rgba(11,77,152,0.12)
        );
}


.line-1 {
    width: 330px;

    top: 125px;
    left: 250px;

    transform:
        rotate(38deg);
}


.line-2 {
    width: 330px;

    top: 125px;
    right: 250px;

    transform:
        rotate(142deg);
}


.line-3 {
    width: 300px;

    top: 50%;
    left: 220px;

    transform:
        rotate(0deg);
}


.line-4 {
    width: 300px;

    top: 50%;
    right: 220px;

    transform:
        rotate(180deg);
}


.line-5 {
    width: 330px;

    bottom: 125px;
    left: 250px;

    transform:
        rotate(-38deg);
}


.line-6 {
    width: 330px;

    bottom: 125px;
    right: 250px;

    transform:
        rotate(218deg);
}


/* =====================================
   DATA DOTS
===================================== */

.network-data-dot {
    position: absolute;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 0 6px
        rgba(21,154,27,0.08);

    z-index: 3;

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


.dot-1 {
    top: 175px;
    left: 330px;
}


.dot-2 {
    top: 180px;
    right: 330px;

    animation-delay: 0.8s;
}


.dot-3 {
    bottom: 180px;
    left: 330px;

    animation-delay: 1.4s;
}


.dot-4 {
    bottom: 175px;
    right: 330px;

    animation-delay: 2s;
}


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

.network-bottom-text {
    width: fit-content;

    display: flex;

    align-items: center;

    gap: 10px;

    margin:
        5px auto 0;

    padding: 12px 20px;

    border-radius: 50px;

    color: #667388;

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

    border:
        1px solid
        rgba(11,77,152,0.08);

    font-size: 13px;

    font-weight: 600;
}


.network-bottom-text i {
    color: var(--green);

    font-size: 16px;
}


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

@keyframes hubFloat {

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

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

}


@keyframes hubPulse {

    0% {
        transform:
            scale(0.8);

        opacity: 0.7;
    }

    100% {
        transform:
            scale(1.25);

        opacity: 0;
    }

}


@keyframes dataFloat {

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

        opacity: 0.6;
    }

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

        opacity: 1;
    }

}


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

@media (max-width: 900px) {

    .service-network {
        height: auto;

        display: grid;

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

        gap: 18px;

        padding: 140px 0 0;
    }


    .network-service {
        position: relative;

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

        width: 100%;
    }


    .network-center {
        top: 0;

        transform:
            translate(-50%, 0);
    }


    .network-lines,
    .network-data-dot {
        display: none;
    }

}


@media (max-width: 600px) {

    .service-network-section {
        padding: 60px 0;
    }


    .service-network-heading {
        margin-bottom: 35px;
    }


    .service-network-heading h2 {
        font-size: 37px;
    }


    .service-network-heading p {
        font-size: 16px;
    }


    .service-network {
        grid-template-columns:
            1fr;

        padding-top: 125px;
    }


    .network-center {
        width: 180px;
        height: 180px;
    }


    .network-center-inner {
        width: 145px;
        height: 145px;
    }


    .network-center-inner strong {
        font-size: 22px;
    }


    .network-service {
        padding: 14px;
    }


    .network-bottom-text {
        width: 100%;

        justify-content: center;

        text-align: center;

        border-radius: 16px;

        padding: 14px;

        font-size: 12px;
    }

}


/* =====================================
   DIGITAL SERVICE JOURNEY SECTION
===================================== */

.service-journey-section {
    position: relative;

    padding: 80px 0;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f6faff 50%,
            #ffffff 100%
        );
}


.service-journey-container {
    width: min(1280px, 92%);

    margin: auto;

    position: relative;

    z-index: 2;
}


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

.journey-bg-orb {
    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;

    opacity: 0.35;
}


.journey-orb-one {
    top: -180px;
    left: -200px;

    background:
        rgba(11,77,152,0.14);
}


.journey-orb-two {
    bottom: -180px;
    right: -200px;

    background:
        rgba(21,154,27,0.14);
}


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

.service-journey-heading {
    max-width: 850px;

    margin:
        0 auto
        65px;

    text-align: center;
}


.service-journey-heading h2 {
    color: #1d2a42;

    font-size:
        clamp(38px, 4vw, 56px);

    line-height: 1.15;

    letter-spacing: -1.5px;

    margin-bottom: 18px;
}


.service-journey-heading h2 span {
    display: block;

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

    -webkit-background-clip: text;

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


.service-journey-heading p {
    color: #6d798c;

    font-size: 18px;

    line-height: 1.8;
}


/* =====================================
   JOURNEY
===================================== */

.digital-journey {
    position: relative;

    display: grid;

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

    gap: 28px;

    max-width: 1200px;

    margin: auto;
}


/* =====================================
   CONNECTION
===================================== */

.journey-connection {
    position: absolute;

    top: 50px;

    left: 12.5%;
    right: 12.5%;

    height: 2px;

    z-index: 1;
}


.journey-track {
    width: 100%;
    height: 100%;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            rgba(11,77,152,0.15),
            rgba(21,154,27,0.25),
            rgba(11,77,152,0.15)
        );
}


/* MOVING DOT */

.journey-moving-dot {
    position: absolute;

    top: 50%;
    left: 0;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    transform:
        translateY(-50%);

    background: var(--green);

    box-shadow:
        0 0 0 7px
        rgba(21,154,27,0.10);

    animation:
        journeyMove
        5s
        linear
        infinite;
}


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

.journey-step {
    position: relative;

    z-index: 2;

    text-align: center;
}


/* NUMBER */

.journey-number {
    position: absolute;

    top: -22px;
    right: 15px;

    color:
        rgba(11,77,152,0.08);

    font-size: 55px;

    font-weight: 900;

    line-height: 1;

    z-index: -1;
}


/* ICON */

.journey-icon {
    width: 100px;
    height: 100px;

    margin:
        0 auto
        28px;

    display: flex;

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

    border-radius: 30px;

    color: #ffffff;

    font-size: 35px;

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

    box-shadow:
        0 18px 35px
        rgba(11,77,152,0.18);

    transition:
        transform 0.35s ease;
}


.journey-step:hover
.journey-icon {
    transform:
        translateY(-10px)
        rotate(6deg);
}


.journey-complete-icon {
    background:
        linear-gradient(
            135deg,
            var(--green),
            #48bd5a
        );
}


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

.journey-content {
    padding:
        0 10px;
}


.journey-content span {
    display: block;

    color: var(--green);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.2px;

    margin-bottom: 9px;
}


.journey-content h3 {
    color: #28364c;

    font-size: 20px;

    line-height: 1.3;

    margin-bottom: 12px;
}


.journey-content p {
    color: #7a8798;

    font-size: 14px;

    line-height: 1.7;

    margin: 0;
}


/* =====================================
   TRUST LINE
===================================== */

.journey-trust-line {
    width: fit-content;

    max-width: 100%;

    display: flex;

    align-items: center;

    gap: 12px;

    margin:
        55px auto 0;

    padding: 13px 22px;

    border-radius: 50px;

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

    border:
        1px solid
        rgba(11,77,152,0.08);

    box-shadow:
        0 12px 30px
        rgba(11,77,152,0.05);
}


.trust-mini-icon {
    width: 34px;
    height: 34px;

    display: flex;

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

    border-radius: 10px;

    color: var(--green);

    background:
        rgba(21,154,27,0.10);
}


.journey-trust-line p {
    margin: 0;

    color: #68758a;

    font-size: 13px;

    font-weight: 600;
}


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

@keyframes journeyMove {

    0% {
        left: 0;
    }

    100% {
        left: 100%;
    }

}


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

@media (max-width: 1000px) {

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

        gap: 45px 30px;
    }


    .journey-connection {
        display: none;
    }

}


@media (max-width: 600px) {

    .service-journey-section {
        padding: 60px 0;
    }


    .service-journey-heading {
        margin-bottom: 45px;
    }


    .service-journey-heading h2 {
        font-size: 37px;
    }


    .service-journey-heading p {
        font-size: 16px;
    }


    .digital-journey {
        grid-template-columns:
            1fr;

        gap: 38px;
    }


    .journey-icon {
        width: 85px;
        height: 85px;

        border-radius: 25px;

        font-size: 30px;

        margin-bottom: 20px;
    }


    .journey-number {
        font-size: 48px;

        right: 20%;
    }


    .journey-content h3 {
        font-size: 21px;
    }


    .journey-content p {
        max-width: 330px;

        margin: auto;
    }


    .journey-trust-line {
        width: 100%;

        justify-content: center;

        text-align: center;

        border-radius: 18px;

        padding: 14px;
    }


    .journey-trust-line p {
        font-size: 12px;
    }

}

/* =====================================
   WHY CHOOSE SECTION
===================================== */

.why-choose-section {
    position: relative;
    overflow: hidden;
    padding: 85px 0;
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7fbff 50%,
            #f5fff7 100%
        );
}


.why-choose-container {
    width: min(1280px, 92%);
    margin: auto;

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;

    gap: 70px;

    align-items: center;

    position: relative;
    z-index: 2;
}


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

.why-bg-circle {
    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;
}


.why-circle-one {
    width: 400px;
    height: 400px;

    top: -250px;
    left: -200px;

    background:
        rgba(11, 77, 152, 0.10);
}


.why-circle-two {
    width: 450px;
    height: 450px;

    bottom: -250px;
    right: -220px;

    background:
        rgba(21, 154, 27, 0.10);
}


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

.why-content h2 {
    font-size: clamp(40px, 4vw, 58px);

    line-height: 1.12;

    letter-spacing: -1.8px;

    color: #1d2a42;

    margin-bottom: 24px;
}


.why-content h2 span {
    display: block;

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

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


.why-main-text {
    color: #68758a;

    font-size: 17px;

    line-height: 1.9;

    margin-bottom: 17px;
}


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

.why-feature-list {
    display: flex;

    flex-direction: column;

    gap: 22px;

    margin-top: 32px;
}


.why-feature {
    display: flex;

    align-items: flex-start;

    gap: 17px;
}


.why-feature-icon {
    width: 52px;
    height: 52px;

    min-width: 52px;

    display: flex;

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

    border-radius: 16px;

    color: #ffffff;

    font-size: 18px;

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

    box-shadow:
        0 12px 25px
        rgba(11, 77, 152, 0.15);

    transition:
        transform 0.3s ease;
}


.why-feature:hover .why-feature-icon {
    transform:
        rotate(8deg)
        translateY(-3px);
}


.why-feature h3 {
    color: #27354c;

    font-size: 20px;

    margin:
        3px 0 8px;
}


.why-feature p {
    color: #778498;

    font-size: 14px;

    line-height: 1.7;

    margin: 0;
}


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

.why-action {
    display: flex;

    align-items: center;

    gap: 16px;

    margin-top: 35px;
}


.why-primary-btn {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 15px 25px;

    border-radius: 14px;

    color: #ffffff;

    font-size: 15px;

    font-weight: 700;

    text-decoration: none;

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

    box-shadow:
        0 15px 30px
        rgba(11,77,152,0.18);

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


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

    transform:
        translateY(-4px);

    box-shadow:
        0 20px 35px
        rgba(11,77,152,0.25);
}


.why-secondary-btn {
    color: var(--primary);

    font-size: 15px;

    font-weight: 700;

    text-decoration: none;

    padding: 15px 10px;
}


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

.why-visual {
    position: relative;

    min-height: 600px;

    display: flex;

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


/* MAIN PANEL */

.digital-service-panel {
    width: 100%;

    max-width: 500px;

    position: relative;

    z-index: 3;

    border-radius: 28px;

    overflow: hidden;

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

    border:
        1px solid
        rgba(11,77,152,0.10);

    box-shadow:
        0 35px 80px
        rgba(11,77,152,0.14);

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


/* TOP */

.digital-panel-top {
    display: flex;

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

    padding: 22px;

    border-bottom:
        1px solid
        rgba(11,77,152,0.08);
}


.panel-brand {
    display: flex;

    align-items: center;

    gap: 11px;
}


.panel-brand-icon {
    width: 43px;
    height: 43px;

    display: flex;

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

    border-radius: 13px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--green)
        );
}


.panel-brand strong {
    display: block;

    color: #27354c;

    font-size: 12px;
}


.panel-brand span {
    display: block;

    color: #8793a4;

    font-size: 10px;

    margin-top: 3px;
}


.panel-status {
    display: flex;

    align-items: center;

    gap: 6px;

    color: #5f6c80;

    font-size: 10px;

    font-weight: 700;
}


.panel-status span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--green);

    animation:
        panelStatusPulse
        2s
        infinite;
}


/* CONTENT */

.digital-panel-content {
    padding: 35px 28px;
}


.panel-welcome > span {
    color: var(--green);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.panel-welcome h3 {
    color: #223149;

    font-size: 33px;

    line-height: 1.2;

    margin:
        10px 0 14px;
}


.panel-welcome h3 strong {
    display: block;

    color: var(--primary);
}


.panel-welcome p {
    color: #748196;

    font-size: 14px;

    line-height: 1.75;
}


/* SERVICES */

.panel-services {
    display: grid;

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

    gap: 12px;

    margin-top: 25px;
}


.panel-service-item {
    padding: 15px;

    border-radius: 16px;

    background:
        #f8fbff;

    border:
        1px solid
        rgba(11,77,152,0.06);

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


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

    box-shadow:
        0 12px 25px
        rgba(11,77,152,0.08);
}


.panel-service-item div {
    width: 38px;
    height: 38px;

    display: flex;

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

    border-radius: 11px;

    color: #ffffff;

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

    margin-bottom: 10px;
}


.panel-service-item span {
    color: #435169;

    font-size: 11px;

    font-weight: 700;
}


/* ACTIVITY */

.panel-activity {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 16px;

    margin-top: 20px;

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            rgba(11,77,152,0.05),
            rgba(21,154,27,0.06)
        );
}


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

    min-width: 42px;

    display: flex;

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

    border-radius: 13px;

    color: var(--green);

    background: #ffffff;

    font-size: 20px;
}


.panel-activity strong {
    display: block;

    color: #344158;

    font-size: 12px;

    margin-bottom: 4px;
}


.panel-activity span {
    color: #8490a0;

    font-size: 10px;
}


/* BOTTOM */

.panel-bottom {
    padding: 18px 28px;

    background:
        #f8fbff;

    border-top:
        1px solid
        rgba(11,77,152,0.07);
}


.panel-progress {
    height: 6px;

    overflow: hidden;

    border-radius: 20px;

    background:
        rgba(11,77,152,0.08);
}


.panel-progress span {
    display: block;

    width: 40%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--green)
        );

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


.panel-bottom small {
    display: block;

    color: #8793a4;

    font-size: 10px;

    margin-top: 9px;
}


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

.why-floating-card {
    position: absolute;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 13px;

    border-radius: 16px;

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

    border:
        1px solid
        rgba(11,77,152,0.08);

    box-shadow:
        0 18px 40px
        rgba(11,77,152,0.12);
}


.why-card-one {
    top: 40px;
    left: -30px;

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


.why-card-two {
    right: -25px;
    bottom: 50px;

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


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

    display: flex;

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

    border-radius: 11px;

    color: var(--primary);

    background:
        rgba(11,77,152,0.08);
}


.green-icon {
    color: var(--green);

    background:
        rgba(21,154,27,0.09);
}


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

    color: #3a475c;

    font-size: 11px;

    margin-bottom: 3px;
}


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

    color: #8793a4;

    font-size: 9px;
}


/* DOTS */

.why-dot {
    position: absolute;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: var(--green);

    opacity: 0.6;

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


.why-dot-one {
    top: 120px;
    right: 20px;
}


.why-dot-two {
    left: 20px;
    bottom: 130px;

    animation-delay: 1s;
}


.why-dot-three {
    right: 80px;
    top: 45%;

    animation-delay: 2s;
}


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

@keyframes panelFloat {

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

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

}


@keyframes floatingCardOne {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-2deg);
    }

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

}


@keyframes floatingCardTwo {

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

    50% {
        transform:
            translateY(10px)
            rotate(-2deg);
    }

}


@keyframes panelStatusPulse {

    0% {
        box-shadow:
            0 0 0 0
            rgba(21,154,27,0.35);
    }

    70% {
        box-shadow:
            0 0 0 6px
            rgba(21,154,27,0);
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(21,154,27,0);
    }

}


@keyframes panelProgress {

    0% {
        width: 20%;
    }

    50% {
        width: 85%;
    }

    100% {
        width: 20%;
    }

}


@keyframes whyDotFloat {

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

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

}

/* =====================================
   FULL WIDTH CONNECT CTA
===================================== */

.connect-cta-section {
    padding: 45px 0 80px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f6faff 100%
        );

    overflow: hidden;
}


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

.connect-cta-container {
    width: min(1320px, 92%);

    min-height: 650px;

    margin: auto;

    position: relative;

    overflow: hidden;

    border-radius: 38px;

    background:
        linear-gradient(
            135deg,
            #0b4d98 0%,
            #075ca8 50%,
            #087e61 100%
        );

    box-shadow:
        0 30px 70px
        rgba(11,77,152,0.22);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 75px 70px 28px;
}


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

.connect-grid {
    position: absolute;

    inset: 0;

    opacity: 0.10;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.6) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.6) 1px,
            transparent 1px
        );

    background-size:
        50px 50px;

    pointer-events: none;
}


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

.connect-glow {
    position: absolute;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;

    opacity: 0.4;
}


.connect-glow-one {
    background:
        rgba(255,255,255,0.18);

    top: -220px;
    left: -180px;
}


.connect-glow-two {
    background:
        rgba(47,230,135,0.22);

    bottom: -280px;
    right: -180px;
}


/* =====================================
   ANIMATED RINGS
===================================== */

.connect-ring {
    position: absolute;

    border-radius: 50%;

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

    pointer-events: none;
}


.connect-ring-one {
    width: 420px;
    height: 420px;

    top: -170px;
    right: -150px;

    animation:
        connectRotate
        18s
        linear
        infinite;
}


.connect-ring-two {
    width: 280px;
    height: 280px;

    bottom: 50px;
    left: -130px;

    animation:
        connectRotateReverse
        14s
        linear
        infinite;
}


.connect-ring-three {
    width: 180px;
    height: 180px;

    top: 45%;
    right: 12%;

    border-style: dashed;

    animation:
        connectRotate
        10s
        linear
        infinite;
}


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

.connect-main-content {
    position: relative;

    z-index: 5;

    max-width: 760px;

    margin: auto;

    text-align: center;

    padding-top: 15px;
}


/* TOP BADGE */

.connect-top-badge {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 10px 17px;

    border-radius: 50px;

    color: #ffffff;

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

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

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.2px;

    backdrop-filter:
        blur(8px);

    margin-bottom: 24px;
}


.connect-pulse {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #6df09a;

    box-shadow:
        0 0 0 0
        rgba(109,240,154,0.7);

    animation:
        connectPulse
        2s
        infinite;
}


/* HEADING */

.connect-main-content h2 {
    color: #ffffff;

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

    line-height: 1.05;

    letter-spacing: -2px;

    margin-bottom: 24px;
}


.connect-main-content h2 span {
    display: block;

    color: #9cf5b9;
}


/* DESCRIPTION */

.connect-main-content > p {
    max-width: 720px;

    margin:
        0 auto;

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

    font-size: 18px;

    line-height: 1.85;
}


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

.connect-action-wrapper {
    margin-top: 32px;
}


.connect-main-btn {
    display: inline-flex;

    align-items: center;

    gap: 16px;

    padding: 10px 14px 10px 10px;

    border-radius: 18px;

    color: #24405f;

    text-decoration: none;

    background: #ffffff;

    box-shadow:
        0 20px 40px
        rgba(0,0,0,0.16);

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


.connect-main-btn:hover {
    color: #24405f;

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

    box-shadow:
        0 28px 50px
        rgba(0,0,0,0.22);
}


.connect-btn-icon {
    width: 50px;
    height: 50px;

    display: flex;

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

    border-radius: 13px;

    color: #ffffff;

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

    font-size: 19px;
}


.connect-main-btn span:nth-child(2) {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


.connect-main-btn small {
    color: #8893a1;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;

    margin-bottom: 3px;
}


.connect-main-btn span:nth-child(2) {
    font-size: 15px;

    font-weight: 800;
}


.connect-main-btn > i {
    margin-left: 8px;

    color: var(--green);

    transition:
        transform 0.3s ease;
}


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


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

.connect-mini-text {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-top: 28px;

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

    font-size: 11px;

    font-weight: 600;
}


.connect-mini-text span {
    width: 30px;
    height: 1px;

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


/* =====================================
   FLOATING SERVICE BADGES
===================================== */

.connect-service-badge {
    position: absolute;

    z-index: 4;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px 14px;

    border-radius: 14px;

    color: #ffffff;

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

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

    backdrop-filter:
        blur(10px);

    font-size: 10px;

    font-weight: 700;

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


.connect-service-badge i {
    color: #9cf5b9;

    font-size: 15px;
}


/* POSITIONS */

.badge-recharge {
    top: 90px;
    left: 55px;

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


.badge-transfer {
    top: 190px;
    right: 55px;

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


.badge-bbps {
    bottom: 170px;
    left: 70px;

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


.badge-aeps {
    bottom: 135px;
    right: 75px;

    animation:
        badgeFloatOne
        6.5s
        ease-in-out
        infinite;
}


/* =====================================
   CONTACT BAR
===================================== */

.connect-contact-bar {
    position: relative;

    z-index: 6;

    display: grid;

    grid-template-columns:
        1fr
        1px
        1.5fr
        1px
        auto;

    align-items: center;

    gap: 25px;

    padding: 20px 25px;

    margin-top: 40px;

    border-radius: 22px;

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

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

    backdrop-filter:
        blur(15px);
}


.connect-contact-box {
    display: flex;

    align-items: center;

    gap: 12px;

    color: #ffffff;

    text-decoration: none;

    min-width: 0;

    transition:
        transform 0.3s ease;
}


.connect-contact-box:hover {
    color: #ffffff;

    transform:
        translateX(4px);
}


.connect-contact-icon {
    width: 44px;
    height: 44px;

    min-width: 44px;

    display: flex;

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

    border-radius: 13px;

    color: #ffffff;

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


.connect-contact-box small {
    display: block;

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

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;

    margin-bottom: 4px;
}


.connect-contact-box strong {
    display: block;

    font-size: 13px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.contact-arrow {
    margin-left: auto;

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

    font-size: 11px;
}


.connect-contact-divider {
    width: 1px;
    height: 45px;

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


/* LOGIN */

.connect-login-box {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 13px 18px;

    border-radius: 13px;

    color: var(--primary);

    text-decoration: none;

    background: #ffffff;

    font-size: 12px;

    font-weight: 800;

    white-space: nowrap;

    transition:
        transform 0.3s ease;
}


.connect-login-box:hover {
    color: var(--primary);

    transform:
        translateY(-3px);
}


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

@keyframes connectRotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes connectRotateReverse {

    from {
        transform:
            rotate(360deg);
    }

    to {
        transform:
            rotate(0deg);
    }

}


@keyframes connectPulse {

    0% {
        box-shadow:
            0 0 0 0
            rgba(109,240,154,0.6);
    }

    70% {
        box-shadow:
            0 0 0 8px
            rgba(109,240,154,0);
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(109,240,154,0);
    }

}


@keyframes badgeFloatOne {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-2deg);
    }

    50% {
        transform:
            translateY(-13px)
            rotate(2deg);
    }

}


@keyframes badgeFloatTwo {

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

    50% {
        transform:
            translateY(10px)
            rotate(-2deg);
    }

}

@media (max-width: 1000px) {

    .connect-cta-container {
        padding:
            70px 40px 25px;
    }


    .connect-service-badge {
        display: none;
    }


    .connect-contact-bar {
        grid-template-columns:
            1fr 1fr;

        gap: 15px;
    }


    .connect-contact-divider {
        display: none;
    }


    .connect-login-box {
        grid-column:
            span 2;

        justify-content: center;
    }

}


@media (max-width: 600px) {

    .connect-cta-section {
        padding:
            35px 0 60px;
    }


    .connect-cta-container {
        width: 94%;

        min-height: auto;

        padding:
            55px 18px 18px;

        border-radius: 25px;
    }


    .connect-main-content h2 {
        font-size: 42px;

        letter-spacing: -1.5px;
    }


    .connect-main-content > p {
        font-size: 16px;

        line-height: 1.75;
    }


    .connect-main-btn {
        width: 100%;

        justify-content: center;
    }


    .connect-contact-bar {
        grid-template-columns:
            1fr;

        padding: 12px;

        margin-top: 35px;
    }


    .connect-contact-box {
        padding: 10px;
    }


    .connect-login-box {
        grid-column: auto;

        width: 100%;

        justify-content: center;
    }


    .connect-ring-three {
        display: none;
    }


    .connect-mini-text {
        font-size: 9px;
    }


    .connect-main-btn small {
        font-size: 8px;
    }

}

@media (max-width: 1000px) {

    .why-choose-container {
        grid-template-columns: 1fr;

        gap: 50px;
    }


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

        margin: auto;
    }


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

}


@media (max-width: 600px) {

    .why-choose-section {
        padding: 60px 0;
    }


    .why-choose-container {
        gap: 35px;
    }


    .why-content h2 {
        font-size: 38px;
    }


    .why-main-text {
        font-size: 16px;

        line-height: 1.8;
    }


    .why-feature-list {
        gap: 18px;
    }


    .why-feature h3 {
        font-size: 17px;
    }


    .why-feature p {
        font-size: 13px;
    }


    .why-action {
        flex-wrap: wrap;

        gap: 10px;
    }


    .why-primary-btn {
        width: 100%;

        justify-content: center;
    }


    .why-secondary-btn {
        width: 100%;

        text-align: center;
    }


    .why-visual {
        min-height: auto;

        padding: 25px 0;
    }


    .digital-service-panel {
        border-radius: 22px;
    }


    .digital-panel-top {
        padding: 17px;
    }


    .panel-status {
        display: none;
    }


    .digital-panel-content {
        padding: 25px 18px;
    }


    .panel-welcome h3 {
        font-size: 27px;
    }


    .why-floating-card {
        position: relative;

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

        width: 100%;

        margin-top: 12px;
    }


    .why-dot {
        display: none;
    }

}


/* =====================================
   SERVICES FAQ SECTION
===================================== */

.service-faq-section {

    position: relative;

    padding: 85px 0;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7faff 100%
        );
}


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

.service-faq-container {

    width: min(1280px, 92%);

    margin: auto;

    display: grid;

    grid-template-columns:
        0.85fr 1.15fr;

    gap: 75px;

    align-items: start;

}


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

.service-faq-content {

    position: sticky;

    top: 100px;

}


.faq-label {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 8px 15px;

    border-radius: 50px;

    color: var(--primary);

    background:
        rgba(11, 77, 152, 0.07);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

    margin-bottom: 20px;

}


.faq-label span {

    width: 28px;
    height: 28px;

    display: flex;

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

    border-radius: 9px;

    color: #ffffff;

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

}


.service-faq-content h2 {

    color: #243249;

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

    line-height: 1.1;

    letter-spacing: -1.5px;

    margin-bottom: 22px;

}


.service-faq-content h2 span {

    display: block;

    color: var(--green);

}


.service-faq-content > p {

    color: #718096;

    font-size: 17px;

    line-height: 1.9;

    margin-bottom: 30px;

}


/* =====================================
   SUPPORT BOX
===================================== */

.faq-support-box {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding: 22px;

    border-radius: 22px;

    background:
        #ffffff;

    border:
        1px solid
        rgba(11, 77, 152, 0.08);

    box-shadow:
        0 18px 45px
        rgba(11, 77, 152, 0.07);

}


.faq-support-icon {

    width: 50px;
    height: 50px;

    min-width: 50px;

    display: flex;

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

    border-radius: 16px;

    color: #ffffff;

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

    font-size: 19px;

}


.faq-support-box small {

    display: block;

    color: var(--green);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;

    margin-bottom: 6px;

}


.faq-support-box h4 {

    color: #2c3950;

    font-size: 17px;

    margin-bottom: 7px;

}


.faq-support-box p {

    margin: 0;

    color: #7a8799;

    font-size: 13px;

    line-height: 1.7;

}


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

.faq-contact-buttons {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 24px;

}


.faq-call-btn {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 15px;

    text-decoration: none;

    color: #314057;

    border-radius: 14px;

    background: #ffffff;

    border:
        1px solid
        rgba(11, 77, 152, 0.09);

    transition:
        transform 0.3s ease;

}


.faq-call-btn:hover {

    color: #314057;

    transform:
        translateY(-4px);

}


.faq-call-btn i {

    width: 36px;
    height: 36px;

    display: flex;

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

    border-radius: 10px;

    color: var(--green);

    background:
        rgba(21, 154, 27, 0.09);

}


.faq-call-btn small {

    display: block;

    color: #8a95a5;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 0.8px;

    margin-bottom: 3px;

}


.faq-call-btn span {

    font-size: 12px;

    font-weight: 800;

}


.faq-contact-btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 16px 18px;

    border-radius: 14px;

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    background:
        var(--primary);

    transition:
        transform 0.3s ease;

}


.faq-contact-btn:hover {

    color: #ffffff;

    transform:
        translateY(-4px);

}


/* =====================================
   FAQ ACCORDION
===================================== */

.faq-accordion-area {

    display: flex;

    flex-direction: column;

    gap: 13px;

}


.faq-item {

    position: relative;

    overflow: hidden;

    border-radius: 18px;

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

    border:
        1px solid
        rgba(11, 77, 152, 0.08);

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

}


.faq-item:hover {

    border-color:
        rgba(11, 77, 152, 0.18);

}


.faq-item.active {

    border-color:
        rgba(21, 154, 27, 0.22);

    box-shadow:
        0 18px 40px
        rgba(11, 77, 152, 0.08);

}


.faq-question {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 17px;

    padding: 23px;

    border: none;

    cursor: pointer;

    text-align: left;

    background: transparent;

}


.faq-number {

    width: 38px;
    height: 38px;

    min-width: 38px;

    display: flex;

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

    border-radius: 12px;

    color: var(--primary);

    background:
        rgba(11, 77, 152, 0.07);

    font-size: 11px;

    font-weight: 800;

    transition:
        all 0.3s ease;

}


.faq-item.active .faq-number {

    color: #ffffff;

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

}


.faq-question-text {

    flex: 1;

    color: #2e3b51;

    font-size: 16px;

    font-weight: 700;

    line-height: 1.5;

}


.faq-toggle {

    width: 35px;
    height: 35px;

    min-width: 35px;

    display: flex;

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

    border-radius: 10px;

    color: var(--primary);

    background:
        #f5f8fc;

    transition:
        all 0.3s ease;

}


.faq-item.active .faq-toggle {

    color: #ffffff;

    background:
        var(--green);

    transform:
        rotate(45deg);

}


/* =====================================
   ANSWER ANIMATION
===================================== */

.faq-answer {

    max-height: 0;

    overflow: hidden;

    transition:
        max-height 0.45s ease;

}


.faq-item.active .faq-answer {

    max-height: 250px;

}


.faq-answer-inner {

    padding:
        0 75px 24px;

}


.faq-answer p {

    margin: 0;

    color: #758296;

    font-size: 14px;

    line-height: 1.85;

}

@media (max-width: 1000px) {

    .service-faq-container {

        grid-template-columns:
            1fr;

        gap: 45px;

    }


    .service-faq-content {

        position: relative;

        top: auto;

    }

}


@media (max-width: 600px) {

    .service-faq-section {

        padding: 60px 0;

    }


    .service-faq-container {

        width: 92%;

        gap: 35px;

    }


    .service-faq-content h2 {

        font-size: 40px;

    }


    .service-faq-content > p {

        font-size: 16px;

    }


    .faq-contact-buttons {

        flex-direction: column;

        align-items: stretch;

    }


    .faq-call-btn {

        justify-content: center;

    }


    .faq-contact-btn {

        justify-content: center;

    }


    .faq-question {

        padding: 18px 14px;

        gap: 11px;

    }


    .faq-number {

        width: 34px;
        height: 34px;

        min-width: 34px;

    }


    .faq-question-text {

        font-size: 14px;

    }


    .faq-toggle {

        width: 32px;
        height: 32px;

        min-width: 32px;

    }


    .faq-answer-inner {

        padding:
            0 18px 20px 59px;

    }


    .faq-answer p {

        font-size: 13px;

    }


    .faq-support-box {

        padding: 17px;

    }

}

/* =====================================
   FINAL SERVICES SECTION
===================================== */

.services-final-section {

    position: relative;

    overflow: hidden;

    padding: 85px 0 75px;

    background:
        linear-gradient(
            180deg,
            #f7fbff 0%,
            #ffffff 100%
        );

}


.services-final-container {

    position: relative;

    z-index: 3;

    width: min(1280px, 92%);

    margin: auto;

    text-align: center;

}


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

.services-final-bg {

    position: absolute;

    inset: 0;

    opacity: 0.45;

    background-image:

        radial-gradient(
            rgba(11, 77, 152, 0.08) 1px,
            transparent 1px
        );

    background-size:
        28px 28px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 20%,
            black 80%,
            transparent
        );

}


/* =====================================
   FLOATING SHAPES
===================================== */

.final-shape {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(1px);

}


.final-shape-1 {

    width: 280px;
    height: 280px;

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

    background:
        rgba(11, 77, 152, 0.05);

}


.final-shape-2 {

    width: 350px;
    height: 350px;

    bottom: -180px;
    right: -120px;

    background:
        rgba(21, 154, 27, 0.06);

}


.final-shape-3 {

    width: 150px;
    height: 150px;

    top: 45%;
    right: 5%;

    border:
        1px dashed
        rgba(11, 77, 152, 0.15);

    background: transparent;

    animation:
        finalRotate
        15s
        linear
        infinite;

}


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

.final-label {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 9px 16px;

    border-radius: 50px;

    color: var(--primary);

    background:
        rgba(11, 77, 152, 0.07);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

    margin-bottom: 20px;

}


.final-label span {

    width: 28px;
    height: 28px;

    display: flex;

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

    border-radius: 9px;

    color: #ffffff;

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

}


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

.services-final-container h2 {

    color: #243249;

    font-size:
        clamp(42px, 4.5vw, 64px);

    line-height: 1.08;

    letter-spacing: -1.8px;

    margin-bottom: 22px;

}


.services-final-container h2 span {

    display: block;

    color: var(--green);

}


.final-description {

    max-width: 800px;

    margin:
        0 auto 50px;

    color: #718096;

    font-size: 17px;

    line-height: 1.9;

}


/* =====================================
   SERVICE NETWORK
===================================== */

.final-service-network {

    position: relative;

    width: 100%;

    max-width: 1000px;

    height: 450px;

    margin:
        0 auto 45px;

}


/* CENTER NODE */

.final-center-node {

    position: absolute;

    top: 50%;
    left: 50%;

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

    width: 190px;
    height: 190px;

    display: flex;

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

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            rgba(11,77,152,0.10),
            rgba(21,154,27,0.08)
        );

    animation:
        centerPulse
        4s
        ease-in-out
        infinite;

}


.final-center-node::before {

    content: "";

    position: absolute;

    inset: -15px;

    border-radius: 50%;

    border:
        1px solid
        rgba(11,77,152,0.10);

}


.final-center-node::after {

    content: "";

    position: absolute;

    inset: -30px;

    border-radius: 50%;

    border:
        1px dashed
        rgba(21,154,27,0.15);

    animation:
        finalRotate
        20s
        linear
        infinite;

}


.final-center-inner {

    position: relative;

    z-index: 3;

    width: 145px;
    height: 145px;

    display: flex;

    flex-direction: column;

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

    border-radius: 50%;

    color: #ffffff;

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

    box-shadow:
        0 20px 45px
        rgba(11,77,152,0.20);

}


.final-center-icon {

    width: 42px;
    height: 42px;

    display: flex;

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

    border-radius: 13px;

    margin-bottom: 8px;

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

}


.final-center-inner strong {

    font-size: 11px;

}


.final-center-inner span {

    margin-top: 4px;

    font-size: 9px;

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

}


/* =====================================
   SERVICE NODES
===================================== */

.final-service-node {

    position: absolute;

    z-index: 5;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

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

}


.final-service-node .node-icon {

    width: 70px;
    height: 70px;

    display: flex;

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

    border-radius: 22px;

    color: var(--primary);

    font-size: 24px;

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

    border:
        1px solid
        rgba(11,77,152,0.10);

    box-shadow:
        0 15px 35px
        rgba(11,77,152,0.10);

    transition:
        transform 0.3s ease;

}


.final-service-node:hover .node-icon {

    transform:
        translateY(-7px)
        scale(1.08);

}


.final-service-node span {

    color: #56647a;

    font-size: 11px;

    font-weight: 700;

}


/* NODE POSITIONS */

.node-mobile {

    top: 15px;
    left: 8%;

}


.node-dth {

    top: 15px;
    right: 8%;

    animation-delay: 0.8s;

}


.node-aeps {

    top: 50%;
    left: 0;

    transform:
        translateY(-50%);

    animation-delay: 1.3s;

}


.node-dmt {

    top: 50%;
    right: 0;

    transform:
        translateY(-50%);

    animation-delay: 2s;

}


.node-bbps {

    bottom: 15px;
    left: 10%;

    animation-delay: 1s;

}


.node-pan {

    bottom: 15px;
    right: 10%;

    animation-delay: 2.5s;

}


/* =====================================
   CONNECTION LINES
===================================== */

.network-line {

    position: absolute;

    top: 50%;
    left: 50%;

    width: 42%;

    height: 1px;

    transform-origin:
        left center;

    background:
        linear-gradient(
            90deg,
            rgba(11,77,152,0.35),
            transparent
        );

    overflow: hidden;

}


.network-line::after {

    content: "";

    position: absolute;

    top: -2px;
    left: -20%;

    width: 25%;

    height: 5px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--green),
            transparent
        );

    animation:
        dataFlow
        3s
        linear
        infinite;

}


/* LINE DIRECTIONS */

.line-1 {

    transform:
        rotate(-140deg);

}


.line-2 {

    transform:
        rotate(-40deg);

}


.line-3 {

    transform:
        rotate(40deg);

}


.line-4 {

    transform:
        rotate(140deg);

}


/* =====================================
   ACTIONS
===================================== */

.final-actions {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

}


.final-primary-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 16px 24px;

    border-radius: 15px;

    color: #ffffff;

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

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

    box-shadow:
        0 15px 35px
        rgba(11,77,152,0.18);

    transition:
        transform 0.3s ease;

}


.final-primary-btn:hover {

    color: #ffffff;

    transform:
        translateY(-5px);

}


.final-primary-btn span {

    width: 30px;
    height: 30px;

    display: flex;

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

    border-radius: 9px;

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

}


.final-secondary-btn {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 16px 22px;

    border-radius: 15px;

    color: var(--primary);

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

    background: #ffffff;

    border:
        1px solid
        rgba(11,77,152,0.12);

    transition:
        transform 0.3s ease;

}


.final-secondary-btn:hover {

    color: var(--primary);

    transform:
        translateY(-5px);

}


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

@keyframes finalRotate {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


@keyframes centerPulse {

    0%,
    100% {

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

    }

    50% {

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

    }

}


@keyframes nodeFloat {

    0%,
    100% {

        margin-top: 0;

    }

    50% {

        margin-top: -12px;

    }

}


@keyframes dataFlow {

    0% {

        left: -30%;

    }

    100% {

        left: 110%;

    }

}

@media (max-width: 900px) {

    .final-service-network {

        height: auto;

        display: grid;

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

        gap: 25px;

        margin-bottom: 45px;

    }


    .final-center-node {

        position: relative;

        grid-column:
            span 3;

        top: auto;
        left: auto;

        transform: none;

        margin:
            30px auto;

    }


    .final-service-node {

        position: relative;

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

        transform: none !important;

    }


    .network-line {

        display: none;

    }

}


@media (max-width: 600px) {

    .services-final-section {

        padding: 60px 0;

    }


    .services-final-container h2 {

        font-size: 39px;

    }


    .final-description {

        font-size: 16px;

        line-height: 1.8;

        margin-bottom: 35px;

    }


    .final-service-network {

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

        gap: 22px;

    }


    .final-center-node {

        grid-column:
            span 2;

        width: 170px;
        height: 170px;

    }


    .final-center-inner {

        width: 130px;
        height: 130px;

    }


    .final-service-node .node-icon {

        width: 62px;
        height: 62px;

        font-size: 21px;

    }


    .final-actions {

        flex-direction: column;

    }


    .final-primary-btn,
    .final-secondary-btn {

        width: 100%;

        justify-content: center;

    }

}


/* =====================================
   ABOUT HERO SECTION
===================================== */

.about-hero {

    position: relative;

    overflow: hidden;

    min-height: 760px;

    display: flex;

    align-items: center;

    padding: 90px 0 70px;

    background:
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #ffffff 52%,
            #f4fff7 100%
        );

}


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

.about-hero-container {

    position: relative;

    z-index: 3;

    width: min(1280px, 92%);

    margin: auto;

    display: grid;

    grid-template-columns:
        1fr 0.95fr;

    gap: 70px;

    align-items: center;

}


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

.about-hero-grid {

    position: absolute;

    inset: 0;

    opacity: 0.55;

    background-image:

        linear-gradient(
            rgba(11, 77, 152, 0.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(11, 77, 152, 0.035) 1px,
            transparent 1px
        );

    background-size:
        45px 45px;

    pointer-events: none;

}


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

.about-hero-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;

}


.about-glow-one {

    width: 400px;
    height: 400px;

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

    background:
        rgba(11, 77, 152, 0.10);

}


.about-glow-two {

    width: 400px;
    height: 400px;

    bottom: -220px;
    right: -120px;

    background:
        rgba(21, 154, 27, 0.10);

}


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

.about-hero-label {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 9px 16px;

    border-radius: 50px;

    color: var(--primary);

    background:
        rgba(11, 77, 152, 0.07);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

    margin-bottom: 22px;

}


.about-hero-label span {

    width: 30px;
    height: 30px;

    display: flex;

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

    border-radius: 10px;

    color: #ffffff;

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

}


.about-hero-content h1 {

    color: #243249;

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

    line-height: 1.05;

    letter-spacing: -2px;

    margin-bottom: 25px;

}


.about-hero-content h1 span {

    display: block;

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

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}


.about-hero-text {

    max-width: 650px;

    color: #6d7a8e;

    font-size: 18px;

    line-height: 1.9;

    margin-bottom: 15px;

}


.about-second-text {

    color: #7b8797;

}


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

.about-hero-buttons {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 30px;

}


.about-explore-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 16px 22px;

    border-radius: 15px;

    color: #ffffff;

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

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

    box-shadow:
        0 18px 35px
        rgba(11, 77, 152, 0.18);

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

}


.about-explore-btn:hover {

    color: #ffffff;

    transform:
        translateY(-5px);

    box-shadow:
        0 25px 45px
        rgba(11, 77, 152, 0.25);

}


.about-explore-btn span {

    width: 30px;
    height: 30px;

    display: flex;

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

    border-radius: 9px;

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

}


.about-explore-btn > i {

    margin-left: 3px;

    transition:
        transform 0.3s ease;

}


.about-explore-btn:hover > i {

    transform:
        translateX(5px);

}


.about-contact-btn {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 16px 20px;

    border-radius: 15px;

    color: var(--primary);

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

    background:
        #ffffff;

    border:
        1px solid
        rgba(11, 77, 152, 0.12);

    transition:
        transform 0.3s ease;

}


.about-contact-btn:hover {

    color: var(--primary);

    transform:
        translateY(-5px);

}


/* =====================================
   MINI POINTS
===================================== */

.about-mini-points {

    display: flex;

    flex-wrap: wrap;

    gap: 22px;

    margin-top: 34px;

}


.about-mini-point {

    display: flex;

    align-items: center;

    gap: 9px;

}


.about-mini-point > div {

    width: 35px;
    height: 35px;

    display: flex;

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

    border-radius: 11px;

    color: var(--green);

    background:
        rgba(21, 154, 27, 0.08);

}


.about-mini-point span {

    color: #657287;

    font-size: 12px;

    font-weight: 700;

}


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

.about-hero-visual {

    position: relative;

    min-height: 600px;

    display: flex;

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

}


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

.about-orbit {

    position: absolute;

    border-radius: 50%;

    border:
        1px dashed
        rgba(11, 77, 152, 0.15);

}


.about-orbit-one {

    width: 530px;
    height: 530px;

    animation:
        aboutOrbitRotate
        25s
        linear
        infinite;

}


.about-orbit-two {

    width: 420px;
    height: 420px;

    border-color:
        rgba(21, 154, 27, 0.18);

    animation:
        aboutOrbitReverse
        18s
        linear
        infinite;

}


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

.about-main-card {

    position: relative;

    z-index: 3;

    width: 100%;

    max-width: 460px;

    overflow: hidden;

    border-radius: 28px;

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

    border:
        1px solid
        rgba(11, 77, 152, 0.10);

    box-shadow:
        0 35px 75px
        rgba(11, 77, 152, 0.14);

    animation:
        aboutCardFloat
        6s
        ease-in-out
        infinite;

}


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

.about-card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 20px 24px;

    border-bottom:
        1px solid
        rgba(11, 77, 152, 0.07);

}


.about-card-logo {

    width: 48px;
    height: 48px;

    padding: 6px;

    display: flex;

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

    border-radius: 14px;

    background:
        #f7faff;

    overflow: hidden;

}


.about-card-logo img {

    width: 100%;
    height: 100%;

    object-fit: contain;

}


.about-card-status {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #738095;

    font-size: 10px;

    font-weight: 700;

}


.about-card-status span {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--green);

    animation:
        aboutStatusPulse
        2s
        infinite;

}


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

.about-card-content {

    padding: 35px 28px;

}


.about-card-small-title {

    color: var(--green);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.2px;

}


.about-card-content h3 {

    color: #26344a;

    font-size: 31px;

    line-height: 1.2;

    margin:
        13px 0 15px;

}


.about-card-content h3 span {

    display: block;

    color: var(--primary);

}


.about-card-content > p {

    color: #768397;

    font-size: 14px;

    line-height: 1.8;

}


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

.about-mini-timeline {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 30px;

}


.about-timeline-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    gap: 7px;

}


.about-timeline-icon {

    width: 42px;
    height: 42px;

    display: flex;

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

    border-radius: 13px;

    color: var(--primary);

    background:
        #f4f8fc;

    font-size: 15px;

}


.about-timeline-item.active .about-timeline-icon {

    color: #ffffff;

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

}


.about-timeline-item strong {

    display: block;

    color: #536075;

    font-size: 10px;

}


.about-timeline-item span {

    display: block;

    color: #9aa4b1;

    font-size: 8px;

    margin-top: 3px;

}


.about-timeline-line {

    width: 40px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(11,77,152,0.15),
            rgba(21,154,27,0.15)
        );

}


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

.about-card-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 16px 25px;

    color: #6c788b;

    background:
        #f8fbff;

    border-top:
        1px solid
        rgba(11,77,152,0.07);

    font-size: 10px;

    font-weight: 700;

}


.about-card-bottom span {

    display: flex;

    align-items: center;

    gap: 7px;

}


.about-card-bottom span i {

    color: var(--green);

}


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

.about-floating-card {

    position: absolute;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px 15px;

    border-radius: 16px;

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

    border:
        1px solid
        rgba(11,77,152,0.08);

    box-shadow:
        0 18px 40px
        rgba(11,77,152,0.12);

}


.about-floating-icon {

    width: 38px;
    height: 38px;

    display: flex;

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

    border-radius: 11px;

    color: var(--primary);

    background:
        rgba(11,77,152,0.08);

}


.green-icon {

    color: var(--green);

    background:
        rgba(21,154,27,0.08);

}


.about-floating-card small {

    display: block;

    color: #9aa4b1;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 0.8px;

    margin-bottom: 3px;

}


.about-floating-card strong {

    display: block;

    color: #536075;

    font-size: 11px;

}


.about-float-one {

    top: 80px;

    left: -35px;

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

}


.about-float-two {

    bottom: 90px;

    right: -35px;

    animation:
        aboutFloatTwo
        6s
        ease-in-out
        infinite;

}


/* =====================================
   FLOATING DOTS
===================================== */

.about-dot {

    position: absolute;

    border-radius: 50%;

    background:
        var(--green);

    animation:
        aboutDotFloat
        4s
        ease-in-out
        infinite;

}


.about-dot-1 {

    width: 9px;
    height: 9px;

    top: 25%;
    left: 48%;

}


.about-dot-2 {

    width: 14px;
    height: 14px;

    bottom: 18%;
    left: 8%;

    animation-delay: 1s;

}


.about-dot-3 {

    width: 8px;
    height: 8px;

    top: 20%;
    right: 7%;

    animation-delay: 2s;

}


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

@keyframes aboutOrbitRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes aboutOrbitReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }

}


@keyframes aboutCardFloat {

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

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

}


@keyframes aboutStatusPulse {

    0% {
        box-shadow:
            0 0 0 0
            rgba(21,154,27,0.4);
    }

    70% {
        box-shadow:
            0 0 0 8px
            rgba(21,154,27,0);
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(21,154,27,0);
    }

}


@keyframes aboutFloatOne {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-2deg);
    }

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

}


@keyframes aboutFloatTwo {

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

    50% {
        transform:
            translateY(10px)
            rotate(-2deg);
    }

}


@keyframes aboutDotFloat {

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

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

}

@media (max-width: 1000px) {

    .about-hero {

        min-height: auto;

        padding: 80px 0 60px;

    }


    .about-hero-container {

        grid-template-columns:
            1fr;

        gap: 50px;

    }


    .about-hero-content {

        max-width: 800px;

        margin: auto;

        text-align: center;

    }


    .about-hero-text {

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

    }


    .about-hero-buttons,
    .about-mini-points {

        justify-content: center;

    }


    .about-hero-visual {

        min-height: 550px;

    }

}


@media (max-width: 600px) {

    .about-hero {

        padding: 60px 0 45px;

    }


    .about-hero-container {

        width: 92%;

    }


    .about-hero-content h1 {

        font-size: 43px;

        letter-spacing: -1.5px;

    }


    .about-hero-text {

        font-size: 16px;

        line-height: 1.8;

    }


    .about-hero-buttons {

        flex-direction: column;

        align-items: stretch;

    }


    .about-explore-btn,
    .about-contact-btn {

        justify-content: center;

    }


    .about-mini-points {

        gap: 15px;

        justify-content: flex-start;

    }


    .about-mini-point span {

        font-size: 10px;

    }


    .about-hero-visual {

        min-height: 520px;

    }


    .about-orbit-one {

        width: 390px;
        height: 390px;

    }


    .about-orbit-two {

        width: 320px;
        height: 320px;

    }


    .about-main-card {

        max-width: 100%;

    }


    .about-card-content {

        padding: 28px 18px;

    }


    .about-card-content h3 {

        font-size: 27px;

    }


    .about-mini-timeline {

        gap: 5px;

    }


    .about-timeline-line {

        width: 15px;

    }


    .about-floating-card {

        display: none;

    }


    .about-dot {

        display: none;

    }

}

/* =====================================
   WHO WE ARE
===================================== */

.who-we-are-section {

    position: relative;

    overflow: hidden;

    padding: 85px 0;

    background: #ffffff;

}


.who-container {

    position: relative;

    z-index: 2;

    width: min(1280px, 92%);

    margin: auto;

    display: grid;

    grid-template-columns: 0.95fr 1.05fr;

    gap: 85px;

    align-items: center;

}


/* VISUAL */

.who-visual {

    position: relative;

    min-height: 510px;

    display: flex;

    align-items: center;

}


.who-image-frame {

    position: relative;

    width: 100%;

    min-height: 430px;

    overflow: hidden;

    border-radius: 32px;

    background:
        linear-gradient(
            135deg,
            #edf5ff,
            #f8fffa
        );

    border:
        1px solid
        rgba(11, 77, 152, 0.08);

}


.who-grid-pattern {

    position: absolute;

    inset: 0;

    opacity: 0.5;

    background-image:

        linear-gradient(
            rgba(11, 77, 152, 0.05) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(11, 77, 152, 0.05) 1px,
            transparent 1px
        );

    background-size: 28px 28px;

}


.who-main-content {

    position: relative;

    z-index: 2;

    min-height: 430px;

    padding: 55px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.who-big-icon {

    width: 85px;
    height: 85px;

    display: flex;

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

    border-radius: 26px;

    color: #ffffff;

    font-size: 32px;

    margin-bottom: 25px;

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

    box-shadow:
        0 20px 45px
        rgba(11, 77, 152, 0.20);

    animation:
        whoIconFloat
        4s
        ease-in-out
        infinite;

}


.who-small-tag {

    color: var(--green);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;

    margin-bottom: 14px;

}


.who-main-content h2 {

    max-width: 430px;

    color: #26344a;

    font-size: 45px;

    line-height: 1.1;

}


.who-main-content h2 span {

    display: block;

    color: var(--primary);

}


.who-service-mini-list {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 28px;

}


.who-service-mini-list div {

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 9px 13px;

    border-radius: 50px;

    color: #58667a;

    font-size: 11px;

    font-weight: 700;

    background: #ffffff;

    box-shadow:
        0 10px 25px
        rgba(11, 77, 152, 0.06);

}


.who-service-mini-list i {

    color: var(--green);

}


/* FLOATING STAT */

.who-floating-stat {

    position: absolute;

    right: -30px;

    bottom: 15px;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 16px 20px;

    border-radius: 18px;

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

    box-shadow:
        0 20px 45px
        rgba(11,77,152,0.15);

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

}


.who-stat-icon {

    width: 45px;
    height: 45px;

    display: flex;

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

    border-radius: 13px;

    color: var(--primary);

    background:
        rgba(11,77,152,0.08);

}


.who-floating-stat small {

    display: block;

    color: #9aa4b2;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;

    margin-bottom: 3px;

}


.who-floating-stat strong {

    color: #48566c;

    font-size: 13px;

}


/* CONTENT */

.who-content .section-mini-label {

    margin-bottom: 18px;

}


.who-content h2 {

    color: #26344a;

    font-size: 48px;

    line-height: 1.1;

    margin-bottom: 25px;

}


.who-content h2 span {

    display: block;

    color: var(--green);

}


.who-content > p {

    color: #748196;

    font-size: 17px;

    line-height: 1.9;

    margin-bottom: 15px;

}


.who-highlight-box {

    display: flex;

    gap: 15px;

    align-items: center;

    padding: 20px;

    margin-top: 25px;

    border-radius: 18px;

    background:
        linear-gradient(
            90deg,
            rgba(11,77,152,0.05),
            rgba(21,154,27,0.05)
        );

}


.who-highlight-icon {

    width: 48px;
    height: 48px;

    min-width: 48px;

    display: flex;

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

    border-radius: 14px;

    color: #ffffff;

    background: var(--primary);

}


.who-highlight-box strong {

    display: block;

    color: #35435a;

    font-size: 15px;

    margin-bottom: 5px;

}


.who-highlight-box p {

    margin: 0;

    color: #778499;

    font-size: 13px;

    line-height: 1.7;

}


.who-service-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 25px;

    padding: 15px 21px;

    border-radius: 14px;

    color: #ffffff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    background: var(--primary);

    transition:
        transform 0.3s ease;

}


.who-service-btn:hover {

    color: #ffffff;

    transform:
        translateY(-4px);

}


.who-service-btn i {

    transition:
        transform 0.3s ease;

}


.who-service-btn:hover i {

    transform:
        translateX(5px);

}


/* ANIMATION */

@keyframes whoIconFloat {

    0%, 100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-12px);

    }

}


@keyframes whoFloat {

    0%, 100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-12px);

    }

}


/* =====================================
   MISSION VISION SECTION
===================================== */

.mission-vision-section {

    position: relative;

    padding: 85px 0;

    background:
        linear-gradient(
            180deg,
            #f8fbff,
            #ffffff
        );

}


.mission-vision-container {

    width: min(1280px, 92%);

    margin: auto;

    display: grid;

    grid-template-columns: 0.75fr 1.25fr;

    gap: 70px;

    align-items: center;

}


/* HEADING */

.mission-vision-heading h2 {

    color: #26344a;

    font-size: 48px;

    line-height: 1.1;

    margin:
        18px 0 20px;

}


.mission-vision-heading h2 span {

    display: block;

    color: var(--primary);

}


.mission-vision-heading p {

    color: #758297;

    font-size: 17px;

    line-height: 1.9;

}


/* CARDS */

.mission-vision-cards {

    display: grid;

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

    gap: 22px;

}


.mv-card {

    position: relative;

    padding: 35px;

    border-radius: 26px;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid
        rgba(11,77,152,0.08);

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

}


.mv-card:hover {

    transform:
        translateY(-10px);

    box-shadow:
        0 25px 55px
        rgba(11,77,152,0.12);

}


.mv-card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 35px;

}


.mv-card-top span {

    color: #a4adba;

    font-size: 13px;

    font-weight: 800;

}


.mv-card-top i {

    width: 52px;
    height: 52px;

    display: flex;

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

    border-radius: 16px;

    color: #ffffff;

    font-size: 19px;

}


.mission-card .mv-card-top i {

    background: var(--primary);

}


.vision-card .mv-card-top i {

    background: var(--green);

}


.mv-card h3 {

    color: #2e3b51;

    font-size: 27px;

    margin-bottom: 14px;

}


.mv-card p {

    color: #748196;

    font-size: 15px;

    line-height: 1.85;

}


.mv-card-line {

    width: 100%;

    height: 1px;

    margin: 28px 0 18px;

    background:
        rgba(11,77,152,0.08);

}


.mv-bottom {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #607087;

    font-size: 12px;

    font-weight: 700;

}


.mv-bottom i {

    color: var(--green);

}

/* =====================================
   WHY CHOOSE US
===================================== */

.why-choose-section {

    padding: 85px 0;

    background: #ffffff;

}


.why-container {

    width: min(1280px, 92%);

    margin: auto;

}


/* HEADING */

.why-heading {

    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 50px;

    margin-bottom: 45px;

}


.why-heading h2 {

    color: #26344a;

    font-size: 48px;

    line-height: 1.1;

    margin-top: 18px;

}


.why-heading h2 span {

    display: block;

    color: var(--green);

}


.why-heading > p {

    max-width: 400px;

    margin: 0;

    color: #758297;

    font-size: 16px;

    line-height: 1.85;

}


/* FEATURES */

.why-features-grid {

    display: grid;

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

    gap: 18px;

}


.why-feature {

    position: relative;

    padding: 30px 25px;

    border-radius: 22px;

    background:
        #f8fbff;

    border:
        1px solid
        transparent;

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

}


.why-feature:hover {

    transform:
        translateY(-8px);

    background: #ffffff;

    border-color:
        rgba(11,77,152,0.10);

    box-shadow:
        0 20px 40px
        rgba(11,77,152,0.08);

}


.why-feature-number {

    position: absolute;

    top: 22px;
    right: 22px;

    color:
        rgba(11,77,152,0.10);

    font-size: 34px;

    font-weight: 800;

}


.why-feature-icon {

    width: 55px;
    height: 55px;

    display: flex;

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

    border-radius: 17px;

    color: var(--primary);

    font-size: 20px;

    margin-bottom: 22px;

    background:
        rgba(11,77,152,0.08);

    transition:
        all 0.3s ease;

}


.why-feature:hover .why-feature-icon {

    color: #ffffff;

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

    transform:
        rotate(-8deg);

}


.why-feature h3 {

    color: #35435a;

    font-size: 19px;

    margin-bottom: 11px;

}


.why-feature p {

    margin: 0;

    color: #7b8798;

    font-size: 14px;

    line-height: 1.8;

}


/* BOTTOM STRIP */

.why-bottom-strip {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 30px;

    padding: 20px 25px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            rgba(11,77,152,0.06),
            rgba(21,154,27,0.06)
        );

}


.why-strip-icon {

    width: 50px;
    height: 50px;

    min-width: 50px;

    display: flex;

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

    border-radius: 15px;

    color: #ffffff;

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

}


.why-bottom-strip strong {

    display: block;

    color: #35435a;

    font-size: 15px;

    margin-bottom: 4px;

}


.why-bottom-strip span {

    color: #778499;

    font-size: 12px;

}


.why-bottom-strip a {

    margin-left: auto;

    white-space: nowrap;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 13px 17px;

    border-radius: 12px;

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    background:
        var(--primary);

    transition:
        transform 0.3s ease;

}


.why-bottom-strip a:hover {

    color: #ffffff;

    transform:
        translateY(-3px);

}

/* =====================================
   ABOUT PAGE RESPONSIVE
===================================== */

@media (max-width: 1000px) {

    .who-container,
    .mission-vision-container {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    .who-content {

        max-width: 800px;

    }


    .mission-vision-heading {

        max-width: 750px;

    }


    .why-features-grid {

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

    }


    .why-heading {

        align-items: flex-start;

        flex-direction: column;

        gap: 20px;

    }

}


@media (max-width: 600px) {

    .who-we-are-section,
    .mission-vision-section,
    .why-choose-section {

        padding: 60px 0;

    }


    .who-main-content {

        padding: 30px 22px;

    }


    .who-main-content h2 {

        font-size: 36px;

    }


    .who-floating-stat {

        right: 15px;

        bottom: -15px;

    }


    .who-content h2,
    .mission-vision-heading h2,
    .why-heading h2 {

        font-size: 38px;

    }


    .who-content > p,
    .mission-vision-heading p {

        font-size: 16px;

    }


    .mission-vision-cards {

        grid-template-columns: 1fr;

    }


    .mv-card {

        padding: 28px 22px;

    }


    .why-features-grid {

        grid-template-columns: 1fr;

    }


    .why-bottom-strip {

        flex-direction: column;

        align-items: flex-start;

    }


    .why-bottom-strip a {

        width: 100%;

        justify-content: center;

        margin-left: 0;

    }

}

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

.about-container {

    width: min(1280px, 92%);

    margin: auto;

}


/* =========================================
   SECTION 4 - SERVICE JOURNEY
========================================= */

.about-service-journey {

    position: relative;

    overflow: hidden;

    padding: 85px 0;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7fbff 100%
        );

}


/* HEADING */

.journey-heading {

    max-width: 760px;

    margin: auto;

    text-align: center;

    margin-bottom: 50px;

}


.journey-heading .section-mini-label {

    margin-bottom: 18px;

}


.journey-heading h2 {

    color: #26344a;

    font-size: 48px;

    line-height: 1.1;

    margin-bottom: 18px;

}


.journey-heading h2 span {

    display: block;

    color: var(--primary);

}


.journey-heading p {

    max-width: 680px;

    margin: auto;

    color: #748196;

    font-size: 17px;

    line-height: 1.9;

}


/* MAIN LAYOUT */

.journey-layout {

    display: grid;

    grid-template-columns:
        1.1fr 0.9fr;

    gap: 28px;

    align-items: stretch;

}


/* LEFT CARD */

.journey-main-card {

    position: relative;

    overflow: hidden;

    padding: 50px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #1267b7
        );

    box-shadow:
        0 25px 60px
        rgba(11,77,152,0.18);

}


.journey-main-card::before {

    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -180px;
    top: -150px;

    border-radius: 50%;

    border:
        60px solid
        rgba(255,255,255,0.05);

}


.journey-card-top {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 12px;

}


.journey-platform-icon {

    width: 55px;
    height: 55px;

    display: flex;

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

    border-radius: 17px;

    color: var(--primary);

    background: #ffffff;

    font-size: 21px;

}


.journey-card-top span {

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

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

}


.journey-main-card h3 {

    position: relative;

    z-index: 2;

    max-width: 500px;

    color: #ffffff;

    font-size: 46px;

    line-height: 1.1;

    margin:
        40px 0 18px;

}


.journey-main-card h3 strong {

    display: block;

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

}


.journey-main-card > p {

    position: relative;

    z-index: 2;

    max-width: 560px;

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

    font-size: 16px;

    line-height: 1.9;

}


/* SERVICE ROW */

.journey-services-row {

    position: relative;

    z-index: 2;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 35px;

}


.journey-services-row div {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px 14px;

    border-radius: 12px;

    color: #ffffff;

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

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

    font-size: 12px;

    font-weight: 700;

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

}


.journey-services-row div:hover {

    transform:
        translateY(-5px);

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

}


/* JOURNEY STEPS */

.journey-steps {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 35px;

    border-radius: 30px;

    background: #ffffff;

    border:
        1px solid
        rgba(11,77,152,0.08);

}


.journey-step {

    display: flex;

    gap: 18px;

    align-items: flex-start;

}


.journey-step-number {

    min-width: 52px;

    height: 52px;

    display: flex;

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

    border-radius: 16px;

    color: var(--primary);

    background:
        rgba(11,77,152,0.08);

    font-size: 14px;

    font-weight: 800;

    transition:
        all 0.3s ease;

}


.journey-step:hover .journey-step-number {

    color: #ffffff;

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

    transform:
        rotate(-8deg);

}


.journey-step-content h4 {

    color: #35435a;

    font-size: 18px;

    margin-bottom: 7px;

}


.journey-step-content p {

    margin: 0;

    color: #7b8798;

    font-size: 14px;

    line-height: 1.75;

}


.journey-step-line {

    width: 1px;

    height: 30px;

    margin:
        8px 0 8px 25px;

    background:
        linear-gradient(
            var(--primary),
            rgba(21,154,27,0.20)
        );

}


/* =========================================
   SECTION 5 - CORE VALUES
========================================= */

.about-core-values {

    padding: 85px 0;

    background: #ffffff;

}


.about-core-values .about-container {

    display: grid;

    grid-template-columns:
        0.85fr 1.15fr;

    gap: 70px;

    align-items: center;

}


/* INTRO */

.values-intro h2 {

    color: #26344a;

    font-size: 48px;

    line-height: 1.1;

    margin:
        18px 0 20px;

}


.values-intro h2 span {

    display: block;

    color: var(--green);

}


.values-intro > p {

    color: #748196;

    font-size: 17px;

    line-height: 1.9;

}


/* QUOTE */

.values-quote {

    position: relative;

    margin-top: 30px;

    padding: 24px;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(11,77,152,0.06),
            rgba(21,154,27,0.06)
        );

}


.values-quote > i {

    color: var(--primary);

    font-size: 22px;

    margin-bottom: 10px;

}


.values-quote p {

    margin: 0;

    color: #59677c;

    font-size: 15px;

    font-weight: 600;

    line-height: 1.8;

}


/* VALUES GRID */

.values-grid {

    display: grid;

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

    gap: 18px;

}


.value-card {

    position: relative;

    min-height: 245px;

    padding: 28px;

    overflow: hidden;

    border-radius: 24px;

    background:
        #f8fbff;

    border:
        1px solid
        rgba(11,77,152,0.06);

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

}


.value-card:hover {

    transform:
        translateY(-8px);

    background: #ffffff;

    box-shadow:
        0 22px 45px
        rgba(11,77,152,0.09);

}


.value-card-icon {

    width: 52px;
    height: 52px;

    display: flex;

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

    border-radius: 16px;

    color: #ffffff;

    font-size: 19px;

    margin-bottom: 22px;

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

}


.value-card h3 {

    color: #35435a;

    font-size: 20px;

    margin-bottom: 10px;

}


.value-card p {

    max-width: 250px;

    margin: 0;

    color: #7b8798;

    font-size: 13px;

    line-height: 1.8;

}


.value-card-number {

    position: absolute;

    right: 20px;
    bottom: 12px;

    color:
        rgba(11,77,152,0.07);

    font-size: 60px;

    font-weight: 800;

}


/* =========================================
   SECTION 6 - CONNECT CTA
========================================= */

.about-connect-section {

    padding:
        30px 0 85px;

    background: #ffffff;

}


.connect-box {

    position: relative;

    overflow: hidden;

    min-height: 390px;

    padding: 55px 65px;

    display: grid;

    grid-template-columns:
        1fr 0.75fr;

    gap: 50px;

    align-items: center;

    border-radius: 35px;

    background:
        linear-gradient(
            135deg,
            #f4f9ff,
            #f7fffa
        );

    border:
        1px solid
        rgba(11,77,152,0.08);

}


/* DECORATION */

.connect-circle {

    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(11,77,152,0.08);

    pointer-events: none;

}


.connect-circle-one {

    width: 450px;
    height: 450px;

    right: -220px;
    top: -220px;

}


.connect-circle-two {

    width: 280px;
    height: 280px;

    left: -160px;
    bottom: -160px;

}


.connect-line {

    position: absolute;

    width: 200px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(11,77,152,0.15),
            transparent
        );

    transform:
        rotate(-35deg);

}


.connect-line-one {

    top: 60px;
    right: 120px;

}


.connect-line-two {

    bottom: 40px;
    right: 20px;

}


/* CONTENT */

.connect-content {

    position: relative;

    z-index: 2;

}


.connect-icon {

    width: 60px;
    height: 60px;

    display: flex;

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

    border-radius: 18px;

    color: #ffffff;

    font-size: 22px;

    margin-bottom: 20px;

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

}


.connect-content > span {

    color: var(--green);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.2px;

}


.connect-content h2 {

    max-width: 620px;

    color: #26344a;

    font-size: 45px;

    line-height: 1.1;

    margin:
        12px 0 16px;

}


.connect-content h2 strong {

    display: block;

    color: var(--primary);

}


.connect-content > p {

    max-width: 580px;

    color: #748196;

    font-size: 16px;

    line-height: 1.8;

}


/* BUTTONS */

.connect-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 25px;

}


.connect-primary-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 15px 20px;

    border-radius: 14px;

    color: #ffffff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    background:
        var(--primary);

    transition:
        transform 0.3s ease;

}


.connect-primary-btn:hover {

    color: #ffffff;

    transform:
        translateY(-4px);

}


.connect-secondary-btn {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 15px 20px;

    border-radius: 14px;

    color: var(--primary);

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    background: #ffffff;

    border:
        1px solid
        rgba(11,77,152,0.10);

    transition:
        transform 0.3s ease;

}


.connect-secondary-btn:hover {

    color: var(--primary);

    transform:
        translateY(-4px);

}


/* INFO SIDE */

.connect-info {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 15px;

}


.connect-info-card {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 20px;

    border-radius: 20px;

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

    border:
        1px solid
        rgba(11,77,152,0.08);

    backdrop-filter:
        blur(10px);

    transition:
        transform 0.3s ease;

}


.connect-info-card:hover {

    transform:
        translateX(-8px);

}


.connect-info-icon {

    width: 48px;
    height: 48px;

    min-width: 48px;

    display: flex;

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

    border-radius: 14px;

    color: var(--primary);

    background:
        rgba(11,77,152,0.08);

}


.green-connect-icon {

    color: var(--green);

    background:
        rgba(21,154,27,0.08);

}


.connect-info-card small {

    display: block;

    color: #98a2b0;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;

    margin-bottom: 4px;

}


.connect-info-card strong {

    display: block;

    color: #4d5a6f;

    font-size: 13px;

    word-break: break-word;

}


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

@media (max-width: 1000px) {


    .journey-layout {

        grid-template-columns:
            1fr;

    }


    .about-core-values .about-container {

        grid-template-columns:
            1fr;

        gap: 45px;

    }


    .values-intro {

        max-width: 750px;

    }


    .connect-box {

        grid-template-columns:
            1fr;

    }


    .connect-info {

        max-width: 600px;

    }

}


@media (max-width: 700px) {


    .about-service-journey,
    .about-core-values {

        padding: 60px 0;

    }


    .about-connect-section {

        padding:
            20px 0 60px;

    }


    .journey-heading {

        text-align: left;

        margin-bottom: 35px;

    }


    .journey-heading h2,
    .values-intro h2 {

        font-size: 38px;

    }


    .journey-main-card {

        padding: 32px 22px;

    }


    .journey-main-card h3 {

        font-size: 37px;

        margin-top: 30px;

    }


    .journey-steps {

        padding: 25px 20px;

    }


    .journey-services-row {

        gap: 8px;

    }


    .journey-services-row div {

        flex: 1;

        min-width: 110px;

        justify-content: center;

    }


    .values-grid {

        grid-template-columns:
            1fr;

    }


    .value-card {

        min-height: auto;

    }


    .connect-box {

        padding: 38px 22px;

        border-radius: 25px;

    }


    .connect-content h2 {

        font-size: 37px;

    }


    .connect-buttons {

        flex-direction: column;

    }


    .connect-primary-btn,
    .connect-secondary-btn {

        justify-content: center;

    }


    .connect-info-card {

        padding: 16px;

    }


    .connect-info-card:hover {

        transform:
            translateY(-4px);

    }

}

/* =========================================
   SECTION 7 - DIGITAL ECOSYSTEM
========================================= */

.digital-ecosystem-section {

    position: relative;

    overflow: hidden;

    padding: 90px 0;

    background:
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #ffffff 100%
        );

}


.ecosystem-container {

    width: min(1280px, 92%);

    margin: auto;

    display: grid;

    grid-template-columns:
        0.9fr 1.1fr;

    align-items: center;

    gap: 70px;

}


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

.ecosystem-content {

    position: relative;

    z-index: 2;

}


.ecosystem-content h2 {

    color: #26344a;

    font-size: 50px;

    line-height: 1.1;

    margin:
        18px 0 22px;

}


.ecosystem-content h2 span {

    display: block;

    color: var(--primary);

}


.ecosystem-content p {

    color: #748196;

    font-size: 17px;

    line-height: 1.9;

    margin-bottom: 16px;

}


.ecosystem-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 15px;

    padding: 16px 23px;

    border-radius: 15px;

    color: #ffffff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

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

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

}


.ecosystem-btn:hover {

    color: #ffffff;

    transform:
        translateY(-5px);

    box-shadow:
        0 15px 30px
        rgba(11,77,152,0.18);

}


.ecosystem-btn i {

    transition:
        transform 0.3s ease;

}


.ecosystem-btn:hover i {

    transform:
        translateX(5px);

}


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

.ecosystem-visual {

    position: relative;

    width: 100%;

    height: 560px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* BACKGROUND GLOWS */

.eco-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(50px);

    opacity: 0.35;

    animation:
        ecoGlowMove
        7s
        ease-in-out
        infinite;

}


.eco-glow-one {

    width: 180px;
    height: 180px;

    background:
        var(--primary);

    top: 70px;
    left: 100px;

}


.eco-glow-two {

    width: 150px;
    height: 150px;

    background:
        var(--green);

    right: 80px;
    bottom: 80px;

    animation-delay:
        2s;

}


/* ORBITS */

.eco-orbit {

    position: absolute;

    border-radius: 50%;

    border:
        1px dashed
        rgba(11,77,152,0.18);

    animation:
        ecoRotate
        22s
        linear
        infinite;

}


.eco-orbit-one {

    width: 470px;
    height: 470px;

}


.eco-orbit-two {

    width: 300px;
    height: 300px;

    animation-duration:
        16s;

    animation-direction:
        reverse;

}


/* SERVICE CARDS */

.eco-service {

    position: absolute;

    width: 100px;
    height: 100px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border-radius: 22px;

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

    border:
        1px solid
        rgba(11,77,152,0.08);

    box-shadow:
        0 15px 35px
        rgba(11,77,152,0.10);

    animation:
        ecoCounterRotate
        22s
        linear
        infinite;

}


.eco-service i {

    color: var(--primary);

    font-size: 25px;

}


.eco-service span {

    color: #5d6b7d;

    font-size: 11px;

    font-weight: 700;

}


/* OUTER POSITIONS */

.eco-mobile {

    top: -35px;
    left: 50%;

    transform:
        translateX(-50%);

}


.eco-dmt {

    bottom: -35px;
    left: 50%;

    transform:
        translateX(-50%);

}


/* INNER POSITIONS */

.eco-aeps {

    left: -35px;
    top: 50%;

    transform:
        translateY(-50%);

    animation-duration:
        16s;

    animation-direction:
        reverse;

}


.eco-bbps {

    right: -35px;
    top: 50%;

    transform:
        translateY(-50%);

    animation-duration:
        16s;

    animation-direction:
        reverse;

}


/* CENTER */

.eco-center {

    position: relative;

    z-index: 3;

    width: 155px;
    height: 155px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

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

    box-shadow:
        0 25px 55px
        rgba(11,77,152,0.22);

    animation:
        ecoCenterPulse
        4s
        ease-in-out
        infinite;

}


.eco-center-logo {

    width: 52px;
    height: 52px;

    display: flex;

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

    margin-bottom: 6px;

    border-radius: 16px;

    color: var(--primary);

    background: #ffffff;

    font-size: 22px;

}


.eco-center strong {

    color: #ffffff;

    font-size: 20px;

    letter-spacing: 1px;

}


.eco-center span {

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

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

}


/* FLOATING PAN CARD */

.eco-pan-card {

    position: absolute;

    z-index: 5;

    right: 10px;
    bottom: 35px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 14px 17px;

    border-radius: 16px;

    color: #526075;

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

    border:
        1px solid
        rgba(11,77,152,0.08);

    box-shadow:
        0 15px 35px
        rgba(11,77,152,0.10);

    font-size: 12px;

    font-weight: 700;

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

}


.eco-pan-card i {

    color: var(--green);

    font-size: 19px;

}


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

@keyframes ecoRotate {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


@keyframes ecoCounterRotate {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(-360deg);

    }

}


@keyframes ecoGlowMove {

    0%,
    100% {

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

    }

    50% {

        transform:
            translate(35px,-25px)
            scale(1.15);

    }

}


@keyframes ecoCenterPulse {

    0%,
    100% {

        transform:
            scale(1);

    }

    50% {

        transform:
            scale(1.08);

    }

}


@keyframes ecoFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-14px);

    }

}


/* =========================================
   SECTION 8 - FINAL CTA
========================================= */

.about-final-section {

    padding:
        20px 0 90px;

    background:
        #ffffff;

}


.final-container {

    width: min(1280px, 92%);

    margin: auto;

}


.final-card {

    position: relative;

    overflow: hidden;

    padding:
        75px 30px;

    text-align: center;

    border-radius: 36px;

    background:
        linear-gradient(
            135deg,
            #f4f9ff,
            #f7fffa
        );

    border:
        1px solid
        rgba(11,77,152,0.08);

}


/* BLOBS */

.final-blob {

    position: absolute;

    border-radius: 50%;

    filter:
        blur(5px);

    opacity: 0.35;

    animation:
        finalBlobMove
        10s
        ease-in-out
        infinite;

}


.final-blob-one {

    width: 280px;
    height: 280px;

    background:
        rgba(11,77,152,0.15);

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

}


.final-blob-two {

    width: 230px;
    height: 230px;

    background:
        rgba(21,154,27,0.15);

    right: -90px;
    bottom: -110px;

    animation-delay:
        2s;

}


.final-blob-three {

    width: 120px;
    height: 120px;

    background:
        rgba(11,77,152,0.12);

    right: 18%;
    top: 30px;

    animation-delay:
        4s;

}


/* BADGE */

.final-badge {

    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        9px 15px;

    border-radius: 50px;

    color: var(--primary);

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

    border:
        1px solid
        rgba(11,77,152,0.08);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

}


.final-badge-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--green);

    animation:
        finalDotPulse
        2s
        infinite;

}


/* HEADING */

.final-card h2 {

    position: relative;

    z-index: 2;

    max-width: 760px;

    margin:
        25px auto 18px;

    color: #26344a;

    font-size: 56px;

    line-height: 1.05;

}


.final-card h2 span {

    display: block;

    color: var(--primary);

}


.final-card > p {

    position: relative;

    z-index: 2;

    max-width: 680px;

    margin: auto;

    color: #748196;

    font-size: 17px;

    line-height: 1.9;

}


/* BUTTONS */

.final-buttons {

    position: relative;

    z-index: 2;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 28px;

}


.final-primary-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        16px 24px;

    border-radius: 15px;

    color: #ffffff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

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

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

}


.final-primary-btn:hover {

    color: #ffffff;

    transform:
        translateY(-5px);

    box-shadow:
        0 15px 35px
        rgba(11,77,152,0.20);

}


.final-outline-btn {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        16px 24px;

    border-radius: 15px;

    color: var(--primary);

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

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

    border:
        1px solid
        rgba(11,77,152,0.10);

    transition:
        transform 0.3s ease;

}


.final-outline-btn:hover {

    color: var(--primary);

    transform:
        translateY(-5px);

}


/* SERVICE TAGS */

.final-services {

    position: relative;

    z-index: 2;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 35px;

}


.final-services span {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding:
        9px 14px;

    border-radius: 50px;

    color: #657388;

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

    border:
        1px solid
        rgba(11,77,152,0.07);

    font-size: 11px;

    font-weight: 700;

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

}


.final-services span:nth-child(2) {

    animation-delay:
        0.5s;

}


.final-services span:nth-child(3) {

    animation-delay:
        1s;

}


.final-services span:nth-child(4) {

    animation-delay:
        1.5s;

}


.final-services i {

    color: var(--green);

}


/* FINAL ANIMATIONS */

@keyframes finalBlobMove {

    0%,
    100% {

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

    }

    50% {

        transform:
            translate(45px,-35px)
            scale(1.1);

    }

}


@keyframes finalDotPulse {

    0%,
    100% {

        transform:
            scale(1);

        box-shadow:
            0 0 0 0
            rgba(21,154,27,0.35);

    }

    50% {

        transform:
            scale(1.25);

        box-shadow:
            0 0 0 8px
            rgba(21,154,27,0);

    }

}


@keyframes finalTagFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-7px);

    }

}


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

@media (max-width: 1000px) {

    .ecosystem-container {

        grid-template-columns:
            1fr;

        gap: 30px;

    }


    .ecosystem-content {

        max-width: 750px;

    }


    .ecosystem-visual {

        height: 520px;

    }

}


@media (max-width: 650px) {

    .digital-ecosystem-section {

        padding: 65px 0;

    }


    .ecosystem-content h2 {

        font-size: 39px;

    }


    .ecosystem-content p {

        font-size: 16px;

    }


    .ecosystem-visual {

        height: 430px;

        transform:
            scale(0.82);

    }


    .eco-orbit-one {

        width: 390px;
        height: 390px;

    }


    .eco-orbit-two {

        width: 250px;
        height: 250px;

    }


    .eco-service {

        width: 82px;
        height: 82px;

    }


    .eco-service i {

        font-size: 20px;

    }


    .eco-center {

        width: 130px;
        height: 130px;

    }


    .eco-pan-card {

        right: 0;

        bottom: 0;

    }


    .about-final-section {

        padding:
            10px 0 65px;

    }


    .final-card {

        padding:
            60px 20px;

        border-radius: 26px;

    }


    .final-card h2 {

        font-size: 42px;

    }


    .final-card > p {

        font-size: 16px;

    }


    .final-buttons {

        flex-direction: column;

    }


    .final-primary-btn,
    .final-outline-btn {

        justify-content: center;

    }

}

.eco-center-logo img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

/* =========================================
   CONTACT HERO SECTION
========================================= */

.contact-hero {

    position: relative;

    overflow: hidden;

    padding: 105px 0 85px;

    background:
        linear-gradient(
            135deg,
            #f7fbff 0%,
            #ffffff 50%,
            #f5fffa 100%
        );

}


/* CONTAINER */

.contact-hero-container {

    width: min(1280px, 92%);

    margin: auto;

    min-height: 570px;

    display: grid;

    grid-template-columns:
        1fr 0.9fr;

    align-items: center;

    gap: 70px;

    position: relative;

    z-index: 2;

}


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

.contact-hero-shape {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

}


.shape-one {

    width: 450px;
    height: 450px;

    top: -220px;
    left: -180px;

    border:
        70px solid
        rgba(11,77,152,0.035);

    animation:
        contactShapeFloat
        10s
        ease-in-out
        infinite;

}


.shape-two {

    width: 350px;
    height: 350px;

    right: -150px;
    top: 50px;

    border:
        55px solid
        rgba(21,154,27,0.035);

    animation:
        contactShapeFloat
        12s
        ease-in-out
        infinite
        reverse;

}


.shape-three {

    width: 140px;
    height: 140px;

    right: 35%;
    bottom: -70px;

    background:
        rgba(11,77,152,0.025);

    animation:
        contactShapeFloat
        7s
        ease-in-out
        infinite;

}


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

.contact-hero-content {

    position: relative;

    z-index: 3;

}


.contact-hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 10px 16px;

    border-radius: 50px;

    color: var(--primary);

    background:
        rgba(11,77,152,0.06);

    border:
        1px solid
        rgba(11,77,152,0.08);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

}


.contact-live-dot {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--green);

    box-shadow:
        0 0 0 0
        rgba(21,154,27,0.40);

    animation:
        contactPulse
        2s
        infinite;

}


/* HEADING */

.contact-hero-content h1 {

    max-width: 620px;

    color: #26344a;

    font-size: 66px;

    line-height: 1.03;

    margin:
        25px 0 22px;

    letter-spacing:
        -1.5px;

}


.contact-hero-content h1 span {

    display: block;

    color: var(--primary);

}


/* DESCRIPTION */

.contact-hero-content > p {

    max-width: 620px;

    color: #718096;

    font-size: 18px;

    line-height: 1.85;

    margin: 0;

}


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

.contact-hero-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 32px;

}


.contact-call-btn {

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 220px;

    padding: 11px 20px 11px 11px;

    border-radius: 18px;

    color: #26344a;

    text-decoration: none;

    background:
        #ffffff;

    border:
        1px solid
        rgba(11,77,152,0.08);

    box-shadow:
        0 15px 35px
        rgba(11,77,152,0.08);

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

}


.contact-call-btn:hover {

    color: #26344a;

    transform:
        translateY(-5px);

    box-shadow:
        0 20px 45px
        rgba(11,77,152,0.13);

}


.contact-btn-icon {

    width: 48px;
    height: 48px;

    display: flex;

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

    border-radius: 14px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #2677c4
        );

    font-size: 18px;

}


.contact-call-btn small {

    display: block;

    color: #9aa5b5;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;

    margin-bottom: 3px;

}


.contact-call-btn span:last-child {

    font-size: 15px;

    font-weight: 800;

}


.contact-mail-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 17px 21px;

    border-radius: 15px;

    color: #ffffff;

    text-decoration: none;

    background:
        linear-gradient(
            135deg,
            var(--green),
            #14965d
        );

    font-size: 14px;

    font-weight: 700;

    transition:
        transform 0.3s ease;

}


.contact-mail-btn:hover {

    color: #ffffff;

    transform:
        translateY(-5px);

}


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

.contact-hero-visual {

    position: relative;

    min-height: 520px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* MAIN CARD */

.contact-main-card {

    position: relative;

    z-index: 2;

    width: min(390px, 100%);

    padding: 35px;

    border-radius: 30px;

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

    border:
        1px solid
        rgba(11,77,152,0.08);

    box-shadow:
        0 30px 70px
        rgba(11,77,152,0.12);

    backdrop-filter:
        blur(12px);

    animation:
        contactMainFloat
        6s
        ease-in-out
        infinite;

}


.contact-main-card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

}


.contact-main-icon {

    width: 64px;
    height: 64px;

    display: flex;

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

    border-radius: 20px;

    color: #ffffff;

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

    font-size: 25px;

}


.contact-online-status {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 8px 12px;

    border-radius: 50px;

    color: #587064;

    background:
        rgba(21,154,27,0.08);

    font-size: 10px;

    font-weight: 700;

}


.contact-online-status span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--green);

    animation:
        contactPulse
        2s
        infinite;

}


.contact-main-card h3 {

    color: #26344a;

    font-size: 29px;

    margin:
        30px 0 12px;

}


.contact-main-card > p {

    color: #7a8798;

    font-size: 15px;

    line-height: 1.8;

    margin: 0;

}


.contact-card-line {

    width: 100%;

    height: 1px;

    margin: 25px 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(11,77,152,0.18),
            transparent
        );

}


/* MINI DETAILS */

.contact-mini-details {

    display: flex;

    flex-direction: column;

    gap: 14px;

}


.contact-mini-details div {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #627086;

    font-size: 13px;

    font-weight: 600;

}


.contact-mini-details i {

    width: 30px;
    height: 30px;

    display: flex;

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

    border-radius: 9px;

    color: var(--primary);

    background:
        rgba(11,77,152,0.07);

}


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

.contact-floating-card {

    position: absolute;

    z-index: 4;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 13px;

    border-radius: 17px;

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

    border:
        1px solid
        rgba(11,77,152,0.07);

    box-shadow:
        0 18px 40px
        rgba(11,77,152,0.10);

}


.contact-phone-card {

    left: -25px;

    top: 75px;

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

}


.contact-email-card {

    right: -55px;

    bottom: 70px;

    animation:
        contactFloatRight
        6s
        ease-in-out
        infinite;

}


.floating-card-icon {

    width: 42px;
    height: 42px;

    min-width: 42px;

    display: flex;

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

    border-radius: 13px;

    color: var(--primary);

    background:
        rgba(11,77,152,0.08);

}


.email-icon {

    color: var(--green);

    background:
        rgba(21,154,27,0.08);

}


.contact-floating-card small {

    display: block;

    color: #9ba5b3;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;

    margin-bottom: 4px;

}


.contact-floating-card strong {

    display: block;

    max-width: 190px;

    color: #566378;

    font-size: 11px;

    word-break: break-word;

}


/* MESSAGE BUBBLE */

.contact-message-bubble {

    position: absolute;

    z-index: 4;

    width: 58px;
    height: 58px;

    left: 35px;
    bottom: 35px;

    display: flex;

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

    border-radius: 50%;

    color: #ffffff;

    background:
        var(--primary);

    box-shadow:
        0 15px 35px
        rgba(11,77,152,0.20);

    font-size: 21px;

    animation:
        contactBubble
        4s
        ease-in-out
        infinite;

}


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

@keyframes contactShapeFloat {

    0%,
    100% {

        transform:
            translate(0,0)
            rotate(0deg);

    }

    50% {

        transform:
            translate(30px,-20px)
            rotate(8deg);

    }

}


@keyframes contactPulse {

    0% {

        box-shadow:
            0 0 0 0
            rgba(21,154,27,0.35);

    }

    70% {

        box-shadow:
            0 0 0 10px
            rgba(21,154,27,0);

    }

    100% {

        box-shadow:
            0 0 0 0
            rgba(21,154,27,0);

    }

}


@keyframes contactMainFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-12px);

    }

}


@keyframes contactFloatLeft {

    0%,
    100% {

        transform:
            translate(0,0);

    }

    50% {

        transform:
            translate(-12px,-10px);

    }

}


@keyframes contactFloatRight {

    0%,
    100% {

        transform:
            translate(0,0);

    }

    50% {

        transform:
            translate(12px,-12px);

    }

}


@keyframes contactBubble {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(0deg);

    }

    50% {

        transform:
            translateY(-12px)
            rotate(8deg);

    }

}


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

@media (max-width: 1050px) {

    .contact-hero {

        padding:
            80px 0 65px;

    }


    .contact-hero-container {

        min-height: auto;

        grid-template-columns:
            1fr;

        gap: 35px;

    }


    .contact-hero-content {

        max-width: 750px;

    }


    .contact-hero-visual {

        min-height: 480px;

        max-width: 600px;

        width: 100%;

        margin: auto;

    }

}


@media (max-width: 650px) {

    .contact-hero {

        padding:
            60px 0 50px;

    }


    .contact-hero-content h1 {

        font-size: 46px;

        letter-spacing:
            -0.8px;

    }


    .contact-hero-content > p {

        font-size: 16px;

    }


    .contact-hero-actions {

        flex-direction: column;

        align-items: stretch;

    }


    .contact-call-btn {

        width: 100%;

    }


    .contact-mail-btn {

        width: 100%;

    }


    .contact-hero-visual {

        min-height: 430px;

    }


    .contact-main-card {

        width: 88%;

        padding: 25px;

    }


    .contact-main-card h3 {

        font-size: 25px;

    }


    .contact-phone-card {

        left: 0;

        top: 35px;

        transform:
            scale(0.88);

        transform-origin:
            left top;

    }


    .contact-email-card {

        right: 0;

        bottom: 20px;

        transform:
            scale(0.82);

        transform-origin:
            right bottom;

    }


    .contact-message-bubble {

        width: 48px;
        height: 48px;

        left: 5px;
        bottom: 85px;

        font-size: 17px;

    }


    .shape-one {

        width: 300px;
        height: 300px;

    }

}

/* =========================================
   CONTACT FORM SECTION
========================================= */

.contact-form-section {

    position: relative;

    padding: 85px 0;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbff 100%
        );

}


.contact-form-container {

    width: min(1280px, 92%);

    margin: auto;

    display: grid;

    grid-template-columns:
        0.85fr 1.15fr;

    align-items: center;

    gap: 75px;

}


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

.contact-form-info h2 {

    margin: 20px 0;

    color: #26344a;

    font-size: 50px;

    line-height: 1.1;

}


.contact-form-info h2 span {

    display: block;

    color: var(--primary);

}


.contact-info-description {

    max-width: 580px;

    color: #748196;

    font-size: 17px;

    line-height: 1.9;

}


/* =========================================
   CONTACT INFORMATION
========================================= */

.contact-info-list {

    display: flex;

    flex-direction: column;

    gap: 13px;

    margin-top: 30px;

}


.contact-info-item {

    display: flex;

    align-items: center;

    gap: 15px;

    position: relative;

    padding: 17px 18px;

    border-radius: 18px;

    text-decoration: none;

    color: inherit;

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

    border:
        1px solid
        rgba(11,77,152,0.08);

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

}


a.contact-info-item:hover {

    color: inherit;

    transform:
        translateX(7px);

    box-shadow:
        0 15px 35px
        rgba(11,77,152,0.08);

}


.contact-info-icon {

    width: 48px;
    height: 48px;

    min-width: 48px;

    display: flex;

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

    border-radius: 15px;

    color: var(--primary);

    background:
        rgba(11,77,152,0.08);

    font-size: 18px;

}


.contact-email-icon {

    color: var(--green);

    background:
        rgba(21,154,27,0.08);

}


.contact-address-icon {

    color: #d97706;

    background:
        rgba(217,119,6,0.08);

}


.contact-info-item small {

    display: block;

    margin-bottom: 5px;

    color: #9aa5b5;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;

}


.contact-info-item strong {

    display: block;

    color: #536176;

    font-size: 13px;

    line-height: 1.5;

}


.info-arrow {

    margin-left: auto;

    color: #aab4c2;

    font-size: 13px;

}


.contact-address-item {

    cursor: default;

}


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

.premium-contact-form-wrapper {

    position: relative;

    padding: 1px;

    border-radius: 30px;

}


/* DECORATIVE GLOW */

.form-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(55px);

    opacity: 0.25;

    pointer-events: none;

}


.form-glow-one {

    width: 170px;
    height: 170px;

    background:
        var(--primary);

    top: 20px;
    left: -50px;

    animation:
        formGlowFloat
        7s
        ease-in-out
        infinite;

}


.form-glow-two {

    width: 150px;
    height: 150px;

    background:
        var(--green);

    right: -30px;
    bottom: 40px;

    animation:
        formGlowFloat
        8s
        ease-in-out
        infinite
        reverse;

}


/* =========================================
   FORM
========================================= */

.premium-contact-form {

    position: relative;

    z-index: 2;

    padding: 38px;

    border-radius: 30px;

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

    border:
        1px solid
        rgba(11,77,152,0.08);

    box-shadow:
        0 25px 65px
        rgba(11,77,152,0.10);

    backdrop-filter:
        blur(14px);

}


/* FORM HEADER */

.form-top {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 30px;

}


.form-top-icon {

    width: 58px;
    height: 58px;

    min-width: 58px;

    display: flex;

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

    border-radius: 18px;

    color: #ffffff;

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

    font-size: 22px;

}


.form-top h3 {

    margin: 0 0 5px;

    color: #26344a;

    font-size: 25px;

}


.form-top p {

    margin: 0;

    color: #8a96a8;

    font-size: 13px;

}


/* =========================================
   FORM ROW
========================================= */

.form-row {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 15px;

}


/* FORM GROUP */

.premium-form-group {

    margin-bottom: 18px;

}


.premium-form-group label {

    display: block;

    margin-bottom: 8px;

    color: #536176;

    font-size: 13px;

    font-weight: 700;

}


/* INPUT */

.premium-input {

    height: 54px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 0 16px;

    border-radius: 14px;

    background:
        #f8faff;

    border:
        1px solid
        #e8edf5;

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

}


.premium-input:focus-within {

    background:
        #ffffff;

    border-color:
        rgba(11,77,152,0.45);

    box-shadow:
        0 0 0 4px
        rgba(11,77,152,0.06);

}


.premium-input i {

    color: var(--primary);

    font-size: 15px;

}


.premium-input input {

    width: 100%;

    border: none;

    outline: none;

    background: transparent;

    color: #39475a;

    font-size: 14px;

}


.premium-input input::placeholder {

    color: #a5afbd;

}


/* SELECT */

.premium-select select {

    width: 100%;

    border: none;

    outline: none;

    background: transparent;

    color: #647287;

    font-size: 14px;

    cursor: pointer;

}


/* TEXTAREA */

.premium-textarea {

    position: relative;

    display: flex;

    gap: 12px;

    padding: 15px 16px;

    border-radius: 14px;

    background:
        #f8faff;

    border:
        1px solid
        #e8edf5;

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

}


.premium-textarea:focus-within {

    background:
        #ffffff;

    border-color:
        rgba(11,77,152,0.45);

    box-shadow:
        0 0 0 4px
        rgba(11,77,152,0.06);

}


.premium-textarea > i {

    color: var(--primary);

    font-size: 15px;

    margin-top: 3px;

}


.premium-textarea textarea {

    width: 100%;

    min-height: 110px;

    resize: vertical;

    border: none;

    outline: none;

    background: transparent;

    color: #39475a;

    font-size: 14px;

    line-height: 1.7;

}


.premium-textarea textarea::placeholder {

    color: #a5afbd;

}


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

.contact-submit-btn {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 17px 20px;

    border: none;

    border-radius: 15px;

    cursor: pointer;

    color: #ffffff;

    font-size: 15px;

    font-weight: 700;

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

    box-shadow:
        0 12px 30px
        rgba(11,77,152,0.15);

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

}


.contact-submit-btn:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 35px
        rgba(11,77,152,0.20);

}


.contact-submit-btn i {

    transition:
        transform 0.3s ease;

}


.contact-submit-btn:hover i {

    transform:
        translateX(5px)
        translateY(-3px);

}


/* BOTTOM NOTE */

.form-bottom-note {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin:
        18px 0 0;

    color: #9aa5b5;

    font-size: 11px;

    text-align: center;

}


.form-bottom-note i {

    color: var(--green);

}


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

@keyframes formGlowFloat {

    0%,
    100% {

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

    }

    50% {

        transform:
            translate(25px,-20px)
            scale(1.12);

    }

}


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

@media (max-width: 1050px) {

    .contact-form-container {

        grid-template-columns:
            1fr;

        gap: 45px;

    }


    .contact-form-info {

        max-width: 750px;

    }

}


@media (max-width: 650px) {

    .contact-form-section {

        padding: 60px 0;

    }


    .contact-form-info h2 {

        font-size: 40px;

    }


    .contact-info-description {

        font-size: 16px;

    }


    .premium-contact-form {

        padding: 25px 18px;

        border-radius: 24px;

    }


    .form-row {

        grid-template-columns:
            1fr;

        gap: 0;

    }


    .contact-info-item {

        padding: 14px;

        gap: 12px;

    }


    .contact-info-icon {

        width: 43px;
        height: 43px;

        min-width: 43px;

        font-size: 16px;

    }


    .contact-info-item strong {

        font-size: 12px;

    }


    .info-arrow {

        display: none;

    }


    .form-top-icon {

        width: 50px;
        height: 50px;

        min-width: 50px;

        font-size: 18px;

    }


    .form-top h3 {

        font-size: 21px;

    }

}


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

.terms-hero {

    position: relative;

    overflow: hidden;

    padding: 75px 0 65px;

    background:
        linear-gradient(
            135deg,
            #f7fbff 0%,
            #ffffff 55%,
            #f5fffa 100%
        );

}


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

.terms-grid {

    position: absolute;

    inset: 0;

    opacity: 0.35;

    pointer-events: none;

    background-image:

        linear-gradient(
            rgba(11,77,152,0.04) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(11,77,152,0.04) 1px,
            transparent 1px
        );

    background-size:
        45px 45px;

    mask-image:
        linear-gradient(
            90deg,
            #000,
            transparent
        );

}


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

.terms-light {

    position: absolute;

    border-radius: 50%;

    filter: blur(55px);

    pointer-events: none;

}


.terms-light-one {

    width: 240px;
    height: 240px;

    top: -80px;
    left: -80px;

    background:
        rgba(11,77,152,0.12);

    animation:
        termsLightMove
        8s
        ease-in-out
        infinite;

}


.terms-light-two {

    width: 220px;
    height: 220px;

    right: -70px;
    bottom: -100px;

    background:
        rgba(21,154,27,0.12);

    animation:
        termsLightMove
        10s
        ease-in-out
        infinite
        reverse;

}


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

.terms-hero-container {

    width: min(1280px, 92%);

    margin: auto;

    display: grid;

    grid-template-columns:
        1.2fr 0.8fr;

    align-items: center;

    gap: 60px;

    position: relative;

    z-index: 2;

}


/* =========================================
   BREADCRUMB
========================================= */

.terms-breadcrumb {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 22px;

    color: #8c98a8;

    font-size: 12px;

}


.terms-breadcrumb a {

    color: var(--primary);

    text-decoration: none;

    font-weight: 700;

}


.terms-breadcrumb i {

    font-size: 9px;

    color: #b1bac6;

}


.terms-breadcrumb strong {

    color: #7c8899;

    font-weight: 600;

}


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

.terms-heading-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--primary);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.2px;

}


.terms-heading-label i {

    width: 34px;
    height: 34px;

    display: flex;

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

    border-radius: 10px;

    color: #ffffff;

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

}


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

.terms-hero-content h1 {

    margin: 16px 0;

    color: #26344a;

    font-size: 62px;

    line-height: 1;

    letter-spacing: -1.5px;

}


.terms-hero-content h1 span {

    color: var(--primary);

}


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

.terms-hero-content > p {

    max-width: 620px;

    margin: 0;

    color: #718096;

    font-size: 17px;

    line-height: 1.8;

}


/* =========================================
   META
========================================= */

.terms-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 18px;

    margin-top: 22px;

}


.terms-meta span {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #607086;

    font-size: 12px;

    font-weight: 600;

}


.terms-meta i {

    color: var(--green);

}


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

.terms-hero-visual {

    position: relative;

    height: 320px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* =========================================
   ROTATING RINGS
========================================= */

.terms-ring {

    position: absolute;

    border-radius: 50%;

    border:
        1px dashed
        rgba(11,77,152,0.18);

}


.terms-ring-one {

    width: 280px;
    height: 280px;

    animation:
        termsRotate
        20s
        linear
        infinite;

}


.terms-ring-two {

    width: 210px;
    height: 210px;

    border-color:
        rgba(21,154,27,0.22);

    animation:
        termsRotateReverse
        14s
        linear
        infinite;

}


/* =========================================
   DOCUMENT
========================================= */

.terms-document {

    position: relative;

    z-index: 2;

    width: 155px;
    height: 205px;

    padding: 20px;

    border-radius: 18px;

    background:
        #ffffff;

    border:
        1px solid
        rgba(11,77,152,0.10);

    box-shadow:
        0 22px 50px
        rgba(11,77,152,0.12);

    transform:
        rotate(-4deg);

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

}


.terms-document-top {

    display: flex;

    align-items: center;

    gap: 10px;

}


.terms-document-icon {

    width: 38px;
    height: 38px;

    display: flex;

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

    border-radius: 11px;

    color: #ffffff;

    background:
        var(--primary);

    font-size: 15px;

}


.terms-document-top span {

    color: #526175;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

}


/* DOCUMENT LINES */

.terms-document-lines {

    display: flex;

    flex-direction: column;

    gap: 11px;

    margin-top: 25px;

}


.terms-document-lines span {

    display: block;

    height: 7px;

    border-radius: 20px;

    background:
        #edf2f7;

}


.terms-document-lines span:nth-child(2) {

    width: 82%;

}


.terms-document-lines span:nth-child(3) {

    width: 90%;

}


.terms-document-lines span:nth-child(4) {

    width: 65%;

}


/* CHECK */

.terms-document-check {

    position: absolute;

    right: -18px;
    bottom: 25px;

    width: 48px;
    height: 48px;

    display: flex;

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

    border-radius: 50%;

    color: #ffffff;

    background:
        var(--green);

    box-shadow:
        0 12px 25px
        rgba(21,154,27,0.22);

    animation:
        termsCheckPulse
        3s
        ease-in-out
        infinite;

}


/* =========================================
   FLOATING DOTS
========================================= */

.terms-dot {

    position: absolute;

    border-radius: 50%;

}


.terms-dot-one {

    width: 12px;
    height: 12px;

    top: 35px;
    left: 25%;

    background:
        var(--primary);

    animation:
        termsDotFloat
        4s
        ease-in-out
        infinite;

}


.terms-dot-two {

    width: 9px;
    height: 9px;

    right: 18%;
    top: 70px;

    background:
        var(--green);

    animation:
        termsDotFloat
        5s
        ease-in-out
        infinite
        reverse;

}


.terms-dot-three {

    width: 7px;
    height: 7px;

    left: 15%;
    bottom: 45px;

    background:
        #d97706;

    animation:
        termsDotFloat
        6s
        ease-in-out
        infinite;

}


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

.terms-mini-icon {

    position: absolute;

    right: 15%;
    bottom: 35px;

    width: 46px;
    height: 46px;

    display: flex;

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

    border-radius: 14px;

    color: var(--primary);

    background:
        #ffffff;

    border:
        1px solid
        rgba(11,77,152,0.08);

    box-shadow:
        0 12px 30px
        rgba(11,77,152,0.10);

    animation:
        termsMiniFloat
        4s
        ease-in-out
        infinite;

}


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

@keyframes termsRotate {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


@keyframes termsRotateReverse {

    from {

        transform:
            rotate(360deg);

    }

    to {

        transform:
            rotate(0deg);

    }

}


@keyframes termsDocumentFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(-4deg);

    }

    50% {

        transform:
            translateY(-12px)
            rotate(-2deg);

    }

}


@keyframes termsCheckPulse {

    0%,
    100% {

        transform:
            scale(1);

    }

    50% {

        transform:
            scale(1.12);

    }

}


@keyframes termsDotFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-15px);

    }

}


@keyframes termsMiniFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(0deg);

    }

    50% {

        transform:
            translateY(-10px)
            rotate(8deg);

    }

}


@keyframes termsLightMove {

    0%,
    100% {

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

    }

    50% {

        transform:
            translate(30px,-20px)
            scale(1.1);

    }

}


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

@media (max-width: 900px) {

    .terms-hero {

        padding:
            65px 0 55px;

    }


    .terms-hero-container {

        grid-template-columns:
            1fr;

        gap: 20px;

    }


    .terms-hero-visual {

        height: 280px;

    }


    .terms-hero-content h1 {

        font-size: 52px;

    }

}


@media (max-width: 600px) {

    .terms-hero {

        padding:
            55px 0 45px;

    }


    .terms-hero-content h1 {

        font-size: 43px;

        letter-spacing:
            -1px;

    }


    .terms-hero-content > p {

        font-size: 16px;

    }


    .terms-meta {

        gap: 12px;

        flex-direction: column;

        align-items: flex-start;

    }


    .terms-hero-visual {

        height: 250px;

        transform:
            scale(0.88);

    }

}

/* =========================================
   TERMS CONTENT SECTION
========================================= */

.terms-content-section {

    position: relative;

    padding: 85px 0;

    background:
        #ffffff;

}


.terms-content-container {

    width: min(1280px, 92%);

    margin: auto;

    display: grid;

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

    gap: 70px;

    align-items: start;

}


/* =========================================
   SIDE NAVIGATION
========================================= */

.terms-side-nav {

    position: sticky;

    top: 100px;

    padding-right: 25px;

    border-right:
        1px solid
        #edf1f6;

}


.terms-nav-title {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 18px;

    color: #34445a;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.2px;

}


.terms-nav-title i {

    color: var(--primary);

    font-size: 15px;

}


.terms-side-nav a {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 9px 0;

    color: #7a8798;

    text-decoration: none;

    font-size: 12px;

    font-weight: 600;

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

}


.terms-side-nav a:hover {

    color: var(--primary);

    transform:
        translateX(5px);

}


.terms-side-nav a span {

    color: #b2bbc7;

    font-size: 10px;

    font-weight: 800;

}


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

.terms-document-content {

    max-width: 850px;

}


/* INTRO */

.terms-intro {

    display: flex;

    align-items: flex-start;

    gap: 20px;

    padding-bottom: 35px;

    margin-bottom: 15px;

    border-bottom:
        1px solid
        #e9eef5;

}


.terms-intro-icon {

    width: 58px;
    height: 58px;

    min-width: 58px;

    display: flex;

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

    border-radius: 17px;

    color: #ffffff;

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

    font-size: 22px;

}


.terms-intro span {

    color: var(--primary);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.2px;

}


.terms-intro h2 {

    margin: 8px 0 14px;

    color: #26344a;

    font-size: 35px;

    line-height: 1.2;

}


.terms-intro p {

    margin: 0;

    color: #748196;

    font-size: 16px;

    line-height: 1.9;

}


/* =========================================
   TERMS ARTICLES
========================================= */

.terms-article {

    display: grid;

    grid-template-columns:
        70px 1fr;

    gap: 25px;

    padding: 40px 0;

    border-bottom:
        1px solid
        #edf1f5;

}


.terms-number {

    width: 48px;
    height: 48px;

    display: flex;

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

    border-radius: 14px;

    color: var(--primary);

    background:
        rgba(11,77,152,0.06);

    font-size: 13px;

    font-weight: 800;

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

}


.terms-article:hover .terms-number {

    color: #ffffff;

    background:
        var(--primary);

    transform:
        rotate(8deg);

}


.terms-article-content h3 {

    margin: 5px 0 15px;

    color: #2d3b4f;

    font-size: 25px;

    line-height: 1.3;

}


.terms-article-content p {

    margin:
        0 0 14px;

    color: #748196;

    font-size: 16px;

    line-height: 1.9;

}


.terms-article-content ul {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin:
        18px 0 0;

    padding: 0;

    list-style: none;

}


.terms-article-content li {

    position: relative;

    padding-left: 27px;

    color: #748196;

    font-size: 15px;

    line-height: 1.7;

}


.terms-article-content li::before {

    content: "";

    position: absolute;

    left: 0;
    top: 8px;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--green);

    box-shadow:
        0 0 0 5px
        rgba(21,154,27,0.07);

}


/* =========================================
   CONTACT DETAILS
========================================= */

.terms-contact-details {

    display: flex;

    flex-direction: column;

    gap: 13px;

    margin-top: 20px;

    padding-top: 20px;

    border-top:
        1px dashed
        #dfe6ef;

}


.terms-contact-details div {

    display: flex;

    align-items: center;

    gap: 11px;

    color: #657287;

    font-size: 14px;

    font-weight: 600;

}


.terms-contact-details i {

    width: 34px;
    height: 34px;

    display: flex;

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

    border-radius: 10px;

    color: var(--primary);

    background:
        rgba(11,77,152,0.07);

}


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

@media (max-width: 1000px) {

    .terms-content-container {

        grid-template-columns:
            1fr;

        gap: 40px;

    }


    .terms-side-nav {

        position: relative;

        top: auto;

        display: flex;

        flex-wrap: wrap;

        gap: 8px;

        padding: 0 0 20px;

        border-right: none;

        border-bottom:
            1px solid
            #edf1f6;

    }


    .terms-nav-title {

        width: 100%;

    }


    .terms-side-nav a {

        padding: 8px 12px;

        border-radius: 8px;

        background:
            #f8faff;

    }

}


@media (max-width: 650px) {

    .terms-content-section {

        padding: 60px 0;

    }


    .terms-content-container {

        gap: 30px;

    }


    .terms-side-nav {

        overflow-x: auto;

        flex-wrap: nowrap;

        padding-bottom: 15px;

    }


    .terms-side-nav a {

        flex:
            0 0 auto;

        font-size: 11px;

    }


    .terms-nav-title {

        position: absolute;

        top: -30px;

        left: 0;

    }


    .terms-intro {

        gap: 14px;

        padding-top: 10px;

    }


    .terms-intro-icon {

        width: 48px;
        height: 48px;

        min-width: 48px;

        border-radius: 14px;

        font-size: 18px;

    }


    .terms-intro h2 {

        font-size: 28px;

    }


    .terms-intro p {

        font-size: 15px;

    }


    .terms-article {

        grid-template-columns:
            1fr;

        gap: 12px;

        padding: 32px 0;

    }


    .terms-number {

        width: 42px;
        height: 42px;

    }


    .terms-article-content h3 {

        margin-top: 0;

        font-size: 22px;

    }


    .terms-article-content p {

        font-size: 15px;

    }


    .terms-article-content li {

        font-size: 14px;

    }

}

/* =========================================
   PRIVACY POLICY HERO
========================================= */

.privacy-hero {

    position: relative;

    overflow: hidden;

    padding: 70px 0 60px;

    background:
        linear-gradient(
            135deg,
            #f7fbff 0%,
            #ffffff 52%,
            #f4fffa 100%
        );

}


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

.privacy-bg-circle {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(1px);

}


.privacy-bg-one {

    width: 340px;
    height: 340px;

    top: -180px;
    left: -100px;

    border:
        1px solid
        rgba(11,77,152,0.10);

    animation:
        privacyCircleMove
        10s
        ease-in-out
        infinite;

}


.privacy-bg-two {

    width: 300px;
    height: 300px;

    right: -120px;
    bottom: -170px;

    border:
        1px solid
        rgba(21,154,27,0.12);

    animation:
        privacyCircleMove
        12s
        ease-in-out
        infinite
        reverse;

}


/* =========================================
   BACKGROUND DATA LINES
========================================= */

.privacy-data-lines {

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.35;

}


.privacy-data-lines span {

    position: absolute;

    width: 1px;

    height: 180px;

    background:
        linear-gradient(
            transparent,
            rgba(11,77,152,0.12),
            transparent
        );

    animation:
        privacyLineMove
        7s
        linear
        infinite;

}


.privacy-data-lines span:nth-child(1) {

    left: 8%;

}


.privacy-data-lines span:nth-child(2) {

    left: 27%;

    animation-delay:
        1.5s;

}


.privacy-data-lines span:nth-child(3) {

    left: 54%;

    animation-delay:
        3s;

}


.privacy-data-lines span:nth-child(4) {

    left: 76%;

    animation-delay:
        4.5s;

}


.privacy-data-lines span:nth-child(5) {

    left: 92%;

    animation-delay:
        2s;

}


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

.privacy-hero-container {

    position: relative;

    z-index: 2;

    width: min(1280px, 92%);

    margin: auto;

    display: grid;

    grid-template-columns:
        1.1fr 0.9fr;

    align-items: center;

    gap: 70px;

}


/* =========================================
   BREADCRUMB
========================================= */

.privacy-breadcrumb {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    font-size: 12px;

}


.privacy-breadcrumb a {

    color: var(--primary);

    text-decoration: none;

    font-weight: 700;

}


.privacy-breadcrumb i {

    color: #aeb7c4;

    font-size: 9px;

}


.privacy-breadcrumb span {

    color: #7f8b9d;

    font-weight: 600;

}


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

.privacy-label {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #4d6178;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.3px;

}


.privacy-label-icon {

    width: 35px;
    height: 35px;

    display: flex;

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

    border-radius: 50%;

    color: #ffffff;

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

    animation:
        privacyShieldPulse
        3s
        ease-in-out
        infinite;

}


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

.privacy-hero-content h1 {

    margin: 18px 0;

    max-width: 650px;

    color: #26344a;

    font-size: 62px;

    line-height: 1.05;

    letter-spacing:
        -1.8px;

}


.privacy-hero-content h1 span {

    display: block;

    color: var(--primary);

}


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

.privacy-hero-content > p {

    max-width: 650px;

    margin: 0;

    color: #718096;

    font-size: 17px;

    line-height: 1.85;

}


/* =========================================
   PRIVACY POINTS
========================================= */

.privacy-points {

    display: flex;

    flex-wrap: wrap;

    gap: 22px;

    margin-top: 25px;

}


.privacy-points div {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #617086;

    font-size: 12px;

    font-weight: 700;

}


.privacy-points i {

    color: var(--green);

    font-size: 14px;

}


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

.privacy-hero-visual {

    position: relative;

    height: 310px;

    display: flex;

    align-items: center;

    justify-content: center;

}


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

.privacy-shield-wrap {

    position: relative;

    width: 250px;
    height: 250px;

    display: flex;

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

}


/* =========================================
   RINGS
========================================= */

.privacy-shield-ring {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

}


.privacy-ring-one {

    width: 250px;
    height: 250px;

    border:
        1px solid
        rgba(11,77,152,0.16);

    animation:
        privacyRingRotate
        15s
        linear
        infinite;

}


.privacy-ring-two {

    width: 185px;
    height: 185px;

    border:
        1px dashed
        rgba(21,154,27,0.25);

    animation:
        privacyRingRotateReverse
        10s
        linear
        infinite;

}


/* =========================================
   MAIN SHIELD
========================================= */

.privacy-shield {

    position: relative;

    z-index: 2;

    width: 120px;
    height: 140px;

    display: flex;

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

    color: #ffffff;

    font-size: 52px;

    clip-path:
        polygon(
            50% 0%,
            90% 15%,
            90% 58%,
            50% 100%,
            10% 58%,
            10% 15%
        );

    background:
        linear-gradient(
            145deg,
            var(--primary),
            var(--green)
        );

    box-shadow:
        0 20px 50px
        rgba(11,77,152,0.22);

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

}


.privacy-shield-check {

    position: absolute;

    right: 4px;
    bottom: 18px;

    width: 33px;
    height: 33px;

    display: flex;

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

    border-radius: 50%;

    color: var(--green);

    background:
        #ffffff;

    font-size: 13px;

}


/* =========================================
   FLOATING PARTICLES
========================================= */

.privacy-particle {

    position: absolute;

    width: 46px;
    height: 46px;

    display: flex;

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

    border-radius: 14px;

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

    border:
        1px solid
        rgba(11,77,152,0.08);

    box-shadow:
        0 12px 28px
        rgba(11,77,152,0.10);

    font-size: 17px;

}


.particle-one {

    top: 28px;
    left: 13%;

    color: var(--primary);

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

}


.particle-two {

    right: 8%;
    top: 70px;

    color: #8b5cf6;

    animation:
        privacyParticleTwo
        6s
        ease-in-out
        infinite;

}


.particle-three {

    right: 17%;
    bottom: 25px;

    color: var(--green);

    animation:
        privacyParticleThree
        5.5s
        ease-in-out
        infinite;

}


/* =========================================
   SCAN LINE
========================================= */

.privacy-scan-line {

    position: absolute;

    width: 180px;
    height: 2px;

    left: 50%;

    top: 50%;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--green),
            transparent
        );

    opacity: 0.7;

    animation:
        privacyScan
        4s
        ease-in-out
        infinite;

}


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

@keyframes privacyRingRotate {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


@keyframes privacyRingRotateReverse {

    from {

        transform:
            rotate(360deg);

    }

    to {

        transform:
            rotate(0deg);

    }

}


@keyframes privacyShieldFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(0deg);

    }

    50% {

        transform:
            translateY(-12px)
            rotate(2deg);

    }

}


@keyframes privacyShieldPulse {

    0%,
    100% {

        transform:
            scale(1);

    }

    50% {

        transform:
            scale(1.08);

    }

}


@keyframes privacyParticleOne {

    0%,
    100% {

        transform:
            translate(0,0)
            rotate(0deg);

    }

    50% {

        transform:
            translate(12px,-12px)
            rotate(8deg);

    }

}


@keyframes privacyParticleTwo {

    0%,
    100% {

        transform:
            translate(0,0);

    }

    50% {

        transform:
            translate(-12px,10px);

    }

}


@keyframes privacyParticleThree {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(0deg);

    }

    50% {

        transform:
            translateY(-14px)
            rotate(-8deg);

    }

}


@keyframes privacyScan {

    0%,
    100% {

        transform:
            translateX(-50%)
            scaleX(0.6);

        opacity: 0.2;

    }

    50% {

        transform:
            translateX(-50%)
            scaleX(1.2);

        opacity: 1;

    }

}


@keyframes privacyCircleMove {

    0%,
    100% {

        transform:
            translate(0,0);

    }

    50% {

        transform:
            translate(30px,-20px);

    }

}


@keyframes privacyLineMove {

    0% {

        transform:
            translateY(-100px);

        opacity: 0;

    }

    50% {

        opacity: 1;

    }

    100% {

        transform:
            translateY(400px);

        opacity: 0;

    }

}


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

@media (max-width: 900px) {

    .privacy-hero {

        padding:
            60px 0 50px;

    }


    .privacy-hero-container {

        grid-template-columns:
            1fr;

        gap: 20px;

    }


    .privacy-hero-content h1 {

        font-size: 52px;

    }


    .privacy-hero-visual {

        height: 280px;

    }

}


@media (max-width: 600px) {

    .privacy-hero {

        padding:
            50px 0 45px;

    }


    .privacy-hero-content h1 {

        font-size: 42px;

        letter-spacing:
            -1px;

    }


    .privacy-hero-content > p {

        font-size: 16px;

    }


    .privacy-points {

        flex-direction: column;

        gap: 12px;

    }


    .privacy-hero-visual {

        height: 250px;

        transform:
            scale(0.85);

    }


    .privacy-breadcrumb {

        margin-bottom: 17px;

    }

}


/* =========================================
   PRIVACY POLICY CONTENT
========================================= */

.privacy-content-section {

    position: relative;

    padding: 85px 0;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f9fcff 100%
        );

}


.privacy-content-container {

    width: min(1100px, 92%);

    margin: auto;

}


/* =========================================
   INTRO
========================================= */

.privacy-policy-intro {

    max-width: 850px;

    margin: 0 auto;

    text-align: center;

}


.privacy-intro-top {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    margin-bottom: 18px;

}


.privacy-intro-line {

    width: 45px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--primary)
        );

}


.privacy-intro-line:last-child {

    background:
        linear-gradient(
            90deg,
            var(--green),
            transparent
        );

}


.privacy-intro-label {

    color: var(--primary);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.privacy-policy-intro h2 {

    margin: 0 0 20px;

    color: #26344a;

    font-size: 44px;

    line-height: 1.2;

}


.privacy-policy-intro h2 span {

    display: block;

    color: var(--primary);

}


.privacy-policy-intro p {

    margin: 0 0 14px;

    color: #748196;

    font-size: 16px;

    line-height: 1.9;

}


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

.privacy-highlight-row {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 30px;

    margin: 50px 0 70px;

    padding: 25px 0;

    border-top:
        1px solid
        #e8eef5;

    border-bottom:
        1px solid
        #e8eef5;

}


.privacy-highlight-item {

    display: flex;

    align-items: center;

    gap: 13px;

}


.privacy-highlight-icon {

    width: 48px;
    height: 48px;

    display: flex;

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

    border-radius: 50%;

    color: var(--primary);

    background:
        rgba(11,77,152,0.08);

    font-size: 18px;

}


.privacy-highlight-icon.green {

    color: var(--green);

    background:
        rgba(21,154,27,0.08);

}


.privacy-highlight-icon.orange {

    color: #d97706;

    background:
        rgba(217,119,6,0.08);

}


.privacy-highlight-item strong {

    display: block;

    margin-bottom: 4px;

    color: #334155;

    font-size: 14px;

}


.privacy-highlight-item span {

    display: block;

    max-width: 170px;

    color: #8a96a8;

    font-size: 11px;

    line-height: 1.5;

}


.privacy-highlight-divider {

    width: 1px;

    height: 45px;

    background:
        #e2e8f0;

}


/* =========================================
   POLICY BLOCK
========================================= */

.privacy-policy-block {

    position: relative;

    padding: 48px 0;

    border-bottom:
        1px solid
        #e8eef5;

}


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

.privacy-block-heading {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 22px;

}


.privacy-block-number {

    position: relative;

    color:
        rgba(11,77,152,0.18);

    font-size: 42px;

    font-weight: 800;

    line-height: 1;

    letter-spacing:
        -2px;

}


.privacy-block-heading span {

    display: block;

    margin-bottom: 6px;

    color: var(--primary);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.3px;

}


.privacy-block-heading h3 {

    margin: 0;

    color: #2d3b4f;

    font-size: 29px;

    line-height: 1.25;

}


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

.privacy-block-text {

    max-width: 920px;

    padding-left: 78px;

}


.privacy-block-text p {

    margin: 0 0 15px;

    color: #748196;

    font-size: 16px;

    line-height: 1.9;

}


.privacy-block-text ul {

    display: flex;

    flex-direction: column;

    gap: 11px;

    margin: 20px 0 0;

    padding: 0;

    list-style: none;

}


.privacy-block-text li {

    position: relative;

    padding-left: 28px;

    color: #748196;

    font-size: 15px;

    line-height: 1.75;

}


.privacy-block-text li::before {

    content: "";

    position: absolute;

    left: 0;

    top: 8px;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background:
        var(--green);

    box-shadow:
        0 0 0 5px
        rgba(21,154,27,0.07);

}


/* =========================================
   USE POINTS
========================================= */

.privacy-use-points {

    display: grid;

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

    gap: 12px;

    margin-top: 22px;

}


.privacy-use-points span {

    display: flex;

    align-items: center;

    gap: 9px;

    color: #647287;

    font-size: 14px;

    font-weight: 600;

}


.privacy-use-points i {

    color: var(--green);

    font-size: 13px;

}


/* =========================================
   SECURITY NOTE
========================================= */

.privacy-security-note {

    display: flex;

    align-items: flex-start;

    gap: 13px;

    margin-top: 22px;

    padding: 17px 20px;

    border-left:
        3px solid
        var(--primary);

    background:
        rgba(11,77,152,0.035);

}


.privacy-security-note > i {

    margin-top: 4px;

    color: var(--primary);

}


.privacy-security-note p {

    margin: 0;

    color: #607086;

    font-size: 14px;

    font-weight: 600;

}


/* =========================================
   LAST BLOCK
========================================= */

.privacy-last-block {

    border-bottom: none;

    padding-bottom: 0;

}


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

@media (max-width: 900px) {

    .privacy-highlight-row {

        gap: 18px;

    }


    .privacy-highlight-divider {

        display: none;

    }


    .privacy-block-text {

        padding-left: 0;

    }

}


@media (max-width: 700px) {

    .privacy-content-section {

        padding: 60px 0;

    }


    .privacy-policy-intro h2 {

        font-size: 34px;

    }


    .privacy-policy-intro p {

        font-size: 15px;

    }


    .privacy-highlight-row {

        flex-direction: column;

        align-items: flex-start;

        margin:
            40px 0 50px;

        padding:
            25px 10px;

    }


    .privacy-highlight-item span {

        max-width: none;

    }


    .privacy-policy-block {

        padding:
            38px 0;

    }


    .privacy-block-number {

        font-size: 34px;

    }


    .privacy-block-heading {

        gap: 13px;

    }


    .privacy-block-heading h3 {

        font-size: 23px;

    }


    .privacy-block-text p {

        font-size: 15px;

    }


    .privacy-block-text li {

        font-size: 14px;

    }


    .privacy-use-points {

        grid-template-columns:
            1fr;

    }




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

    gap: 45px;
}

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

    gap: 40px;
}


.main-footer {
    padding-top: 55px;
}


.footer-bottom {
    flex-direction: column;

    justify-content: center;

    padding: 22px 0;

    text-align: center;
}


.footer-bottom-links {
    flex-wrap: wrap;

    justify-content: center;

    gap: 15px 22px;
}

}