/* =========================================================
   B4 VENTURES — PREMIUM BRAND CSS
   Brand: Teal + Charcoal
========================================================= */

:root {

    /* =========================
       B4 BRAND COLORS
    ========================= */

    --primary: #18C49A;
    --primary-dark: #0FA982;
    --primary-light: #E9FBF6;
    --primary-soft: #F1FCF8;

    --charcoal: #454545;
    --charcoal-dark: #202124;
    --charcoal-soft: #303438;

    --white: #ffffff;
    --off-white: #F7FAF9;

    --text: #303438;
    --text-dark: #202124;
    --muted: #697278;

    --border: #DDE7E4;

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;

    --shadow-sm:
        0 5px 20px rgba(32,33,36,.06);

    --shadow:
        0 20px 60px rgba(32,33,36,.10);

    --shadow-teal:
        0 18px 45px rgba(24,196,154,.16);

    --transition:
        all .3s ease;

}


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

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


html {
    scroll-behavior: smooth;
}


body {

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

    color: var(--text);

    background: var(--white);

    line-height: 1.6;

    overflow-x: hidden;

}


a {
    text-decoration: none;
    color: inherit;
}


img {
    max-width: 100%;
    display: block;
}


button,
input,
textarea,
select {
    font-family: inherit;
}


button {
    cursor: pointer;
}


.container {

    width: min(1180px, 92%);

    margin: auto;

}


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

.site-header {

    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: 1000;

    height: 82px;

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

    backdrop-filter:
        blur(18px);

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

    border-bottom:
        1px solid
        rgba(69,69,69,.09);

    box-shadow:
        0 4px 25px
        rgba(32,33,36,.04);

    transition:
        var(--transition);

}


.site-header.scrolled {

    box-shadow:
        0 8px 35px
        rgba(32,33,36,.10);

}


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

.nav-wrap {

    height: 100%;

    display: flex;

    align-items: center;

    gap: 28px;

}


/* =========================================================
   BRAND / ACTUAL LOGO
========================================================= */

.brand {

    display: flex;

    align-items: center;

    margin-right: auto;

    flex-shrink: 0;

}


/*
    IMPORTANT:
    Use the actual B4 Ventures logo image.
*/

.site-logo {

    width: auto;

    height: 58px;

    max-width: 150px;

    object-fit: contain;

    object-position: center;

    display: block;

}


/*
    These are no longer needed for the actual logo,
    but kept hidden so old HTML won't create
    an unwanted fake B4 logo.
*/

.brand-mark,
.brand-text {

    display: none;

}


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

.main-nav {

    display: flex;

    align-items: center;

    gap: 26px;

}


.main-nav a {

    position: relative;

    color:
        #3D4850;

    font-size: 13px;

    font-weight: 650;

    padding:
        8px 0;

    transition:
        var(--transition);

}


.main-nav a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -5px;

    width: 0;

    height: 2px;

    border-radius: 10px;

    background:
        var(--primary);

    transition:
        width .3s ease;

}


.main-nav a:hover,
.main-nav a.active {

    color:
        var(--primary-dark);

}


.main-nav a:hover::after,
.main-nav a.active::after {

    width: 100%;

}


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

.nav-login {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding:
        13px 19px;

    border-radius:
        11px;

    background:
        var(--charcoal-dark);

    color:
        var(--white);

    font-size: 13px;

    font-weight: 750;

    transition:
        var(--transition);

}


.nav-login span {

    font-size: 16px;

    line-height: 1;

}


.nav-login:hover {

    background:
        var(--primary);

    color:
        var(--white);

    transform:
        translateY(-2px);

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

}


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

.menu-toggle {

    display: none;

    width: 42px;

    height: 42px;

    border: 0;

    border-radius: 10px;

    background:
        var(--primary-light);

    align-items: center;

    justify-content: center;

    flex-direction: column;

}


.menu-toggle span {

    display: block;

    width: 22px;

    height: 2px;

    margin: 3px 0;

    border-radius: 5px;

    background:
        var(--charcoal-dark);

    transition:
        var(--transition);

}


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

.hero {

    position: relative;

    min-height: 760px;

    padding-top: 82px;

    overflow: hidden;

    color:
        var(--white);

    background:

        radial-gradient(
            circle at 82% 18%,
            rgba(24,196,154,.18),
            transparent 32%
        ),

        radial-gradient(
            circle at 15% 80%,
            rgba(24,196,154,.08),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #181A1C 0%,
            #272A2D 52%,
            #454545 100%
        );

}


/* Decorative teal circle */

.hero::before {

    content: "";

    position: absolute;

    width: 620px;

    height: 620px;

    right: -270px;

    top: 80px;

    border-radius: 50%;

    border:
        1px solid
        rgba(24,196,154,.16);

    box-shadow:
        0 0 0 90px rgba(24,196,154,.025),
        0 0 0 180px rgba(24,196,154,.018);

}


/* Decorative grid */

.hero::after {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .035;

    background-image:

        linear-gradient(
            rgba(255,255,255,.8) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.8) 1px,
            transparent 1px
        );

    background-size:
        55px 55px;

    pointer-events: none;

}


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

.hero-content {

    position: relative;

    z-index: 2;

    min-height: 678px;

    display: grid;

    grid-template-columns:
        1.15fr .85fr;

    align-items: center;

    gap: 80px;

}


/* =========================================================
   EYEBROW
========================================================= */

.eyebrow {

    display: inline-flex;

    align-items: center;

    padding:
        8px 14px;

    border:
        1px solid
        rgba(24,196,154,.35);

    border-radius:
        50px;

    color:
        #6EE6C4;

    background:
        rgba(24,196,154,.06);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.6px;

    margin-bottom: 23px;

}


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

.hero h1 {

    font-family:
        Manrope,
        Inter,
        Arial,
        sans-serif;

    font-size:
        clamp(46px, 6vw, 78px);

    line-height:
        1.03;

    letter-spacing:
        -3.5px;

    max-width:
        800px;

    color:
        var(--white);

}


.hero h1 span {

    display: block;

    color:
        var(--primary);

}


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

.hero-copy > p {

    margin-top: 25px;

    max-width: 650px;

    color:
        #C5CDD0;

    font-size: 17px;

    line-height: 1.8;

}


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

.hero-actions {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 32px;

}


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

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding:
        14px 21px;

    border-radius:
        11px;

    font-size: 13px;

    font-weight: 750;

    transition:
        var(--transition);

}


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

.btn-primary {

    color:
        var(--white);

    background:
        var(--primary);

    box-shadow:
        0 12px 30px
        rgba(24,196,154,.20);

}


.btn-primary:hover {

    background:
        var(--primary-dark);

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 40px
        rgba(24,196,154,.27);

}


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

.btn-outline {

    color:
        var(--white);

    border:
        1px solid
        rgba(255,255,255,.24);

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

}


.btn-outline:hover {

    color:
        var(--primary);

    border-color:
        var(--primary);

    background:
        rgba(24,196,154,.07);

}


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

.hero-trust {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 24px;

    color:
        #9EAAAF;

    font-size: 12px;

}


.hero-trust span {

    color:
        var(--primary);

    font-size: 14px;

}


/* =========================================================
   HERO GLASS CARD
========================================================= */

.hero-card {

    position: relative;

    padding:
        35px;

    border:
        1px solid
        rgba(255,255,255,.13);

    border-radius:
        26px;

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

    backdrop-filter:
        blur(20px);

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

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.24);

}


.hero-card::before {

    content: "";

    position: absolute;

    width: 100px;

    height: 100px;

    top: -30px;

    right: -30px;

    border-radius: 50%;

    background:
        rgba(24,196,154,.12);

    filter:
        blur(5px);

}


.hero-card-top {

    position: relative;

    z-index: 1;

    display: flex;

    align-items: center;

    gap: 9px;

    color:
        #B8C5C8;

    font-size: 12px;

}


.status-dot {

    width: 8px;

    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--primary);

    box-shadow:
        0 0 15px
        rgba(24,196,154,.8);

}


.hero-card h3 {

    position: relative;

    z-index: 1;

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

    font-size:
        29px;

    line-height:
        1.28;

    margin:
        30px 0;

}


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

.hero-stats {

    display: grid;

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

    gap: 11px;

}


.hero-stats div {

    padding:
        16px 14px;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:
        13px;

    background:
        rgba(0,0,0,.14);

}


.hero-stats strong {

    display: block;

    color:
        var(--primary);

    font-size: 15px;

}


.hero-stats span {

    display: block;

    margin-top: 3px;

    color:
        #8F9B9F;

    font-size: 10px;

}


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

.hero-scroll {

    position: absolute;

    z-index: 5;

    bottom: 25px;

    left: 50%;

    transform:
        translateX(-50%);

    color:
        #8D999D;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 1.7px;

}


.hero-scroll::before {

    content: "";

    display: inline-block;

    width: 1px;

    height: 18px;

    margin-right: 8px;

    vertical-align: middle;

    background:
        var(--primary);

}


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

.section {

    padding:
        110px 0;

}


.section-label {

    color:
        var(--primary-dark);

    font-size: 10px;

    font-weight: 850;

    letter-spacing: 2px;

    margin-bottom: 17px;

}


.section-label.light {

    color:
        #68E1BE;

}


.section h2 {

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

    font-size:
        clamp(34px, 4vw, 55px);

    line-height:
        1.08;

    letter-spacing:
        -2.4px;

    color:
        var(--charcoal-dark);

}


.section h2 span {

    color:
        var(--primary-dark);

}


/* =========================================================
   INTRO
========================================================= */

.intro-section {

    background:
        var(--white);

}


.intro-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 100px;

    align-items: end;

}


.large-text {

    color:
        #5D676D;

    font-size: 20px;

    line-height: 1.8;

}


.text-link {

    display: inline-flex;

    align-items: center;

    margin-top: 20px;

    color:
        var(--primary-dark);

    font-size: 13px;

    font-weight: 800;

    transition:
        var(--transition);

}


.text-link:hover {

    color:
        var(--charcoal-dark);

    transform:
        translateX(4px);

}


/* =========================================================
   SOLUTIONS
========================================================= */

.solutions-preview {

    background:
        var(--off-white);

}


.section-heading {

    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 40px;

    margin-bottom: 50px;

}


.section-heading > p {

    max-width: 430px;

    color:
        var(--muted);

    font-size: 14px;

}


/* =========================================================
   SOLUTION GRID
========================================================= */

.solution-grid {

    display: grid;

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

    gap: 20px;

}


.solution-card {

    position: relative;

    min-height: 350px;

    padding:
        32px;

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

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

    background:
        var(--white);

    overflow: hidden;

    transition:
        var(--transition);

}


.solution-card::after {

    content: "";

    position: absolute;

    width: 120px;

    height: 120px;

    right: -50px;

    bottom: -50px;

    border-radius: 50%;

    background:
        var(--primary-light);

    transition:
        var(--transition);

}


.solution-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(24,196,154,.35);

    box-shadow:
        var(--shadow);

}


.solution-card:hover::after {

    transform:
        scale(1.35);

}


/* =========================================================
   FEATURED SOLUTION
========================================================= */

.solution-card.featured {

    background:
        linear-gradient(
            145deg,
            #202124,
            #454545
        );

    border-color:
        #454545;

    color:
        var(--white);

}


.solution-card.featured::after {

    background:
        rgba(24,196,154,.10);

}


.solution-icon {

    position: relative;

    z-index: 2;

    color:
        var(--primary-dark);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 1px;

    margin-bottom: 55px;

}


.featured .solution-icon {

    color:
        var(--primary);

}


.solution-card h3 {

    position: relative;

    z-index: 2;

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

    font-size: 27px;

    margin-bottom: 15px;

}


.solution-card p {

    position: relative;

    z-index: 2;

    color:
        var(--muted);

    font-size: 14px;

    line-height: 1.75;

}


.solution-card.featured p {

    color:
        #B7C0C3;

}


.card-link {

    position: relative;

    z-index: 2;

    display: inline-flex;

    margin-top: 30px;

    color:
        var(--primary-dark);

    font-size: 12px;

    font-weight: 850;

}


.featured .card-link {

    color:
        #69E1BF;

}


/* =========================================================
   WHO WE SERVE
========================================================= */

.serve-section {

    background:
        var(--white);

}


.center {

    text-align:
        center;

    display:
        block;

}


.serve-grid {

    margin-top: 50px;

    display: grid;

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

    gap: 15px;

}


.serve-card {

    padding:
        30px;

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

    border-top:
        3px solid
        var(--primary);

    border-radius:
        0 0 16px 16px;

    background:
        var(--off-white);

    transition:
        var(--transition);

}


.serve-card:hover {

    transform:
        translateY(-5px);

    background:
        var(--primary-soft);

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

}


.serve-card span {

    color:
        #A1ACB0;

    font-size: 11px;

    font-weight: 800;

}


.serve-card h3 {

    margin:
        25px 0 10px;

    color:
        var(--charcoal-dark);

    font-size: 18px;

}


.serve-card p {

    color:
        var(--muted);

    font-size: 13px;

}


/* =========================================================
   WHY SECTION
========================================================= */

.why-section {

    background:
        var(--charcoal-dark);

    color:
        var(--white);

}


.why-grid {

    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap: 100px;

}


.why-section h2 {

    color:
        var(--white);

}


.why-section h2 span {

    color:
        var(--primary);

}


.why-section > .container > div:first-child p {

    margin:
        25px 0 30px;

    color:
        #AEB8BC;

    line-height:
        1.8;

}


/* =========================================================
   WHY LIST
========================================================= */

.why-list {

    display:
        flex;

    flex-direction:
        column;

}


.why-list > div {

    display:
        grid;

    grid-template-columns:
        55px 1fr;

    gap:
        20px;

    padding:
        23px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.10);

}


.why-list strong {

    color:
        var(--primary);

    font-size: 13px;

}


.why-list h3 {

    color:
        #F7F9F9;

    font-size:
        16px;

}


.why-list p {

    color:
        #899599;

    font-size:
        12px;

    margin-top:
        5px;

}


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

.btn-white {

    background:
        var(--white);

    color:
        var(--charcoal-dark);

}


.btn-white:hover {

    background:
        var(--primary);

    color:
        var(--white);

    transform:
        translateY(-3px);

}


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

.cta-section {

    position:
        relative;

    padding:
        80px 0;

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at 90% 50%,
            rgba(255,255,255,.13),
            transparent 25%
        ),

        linear-gradient(
            120deg,
            #0FA982,
            #18C49A
        );

    color:
        var(--white);

}


.cta-section::before {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    right: -150px;

    top: -180px;

    border-radius: 50%;

    border:
        1px solid
        rgba(255,255,255,.16);

}


.cta-inner {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        30px;

}


.cta-section h2 {

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

    font-size:
        45px;

    line-height:
        1.1;

    letter-spacing:
        -2px;

    color:
        var(--white);

}


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

.site-footer {

    background:
        #181A1C;

    color:
        var(--white);

    padding:
        70px 0 20px;

}


.footer-top {

    display:
        grid;

    grid-template-columns:
        2fr 1fr 1fr 1.4fr;

    gap:
        60px;

}


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

.footer-logo {

    display:
        inline-flex;

    margin-bottom:
        5px;

}


.footer-logo .site-logo {

    height:
        60px;

    max-width:
        155px;

    /*
       If your logo is dark and doesn't show
       on footer, use b4-logo-white.png here.
    */

}


/* =========================================================
   FOOTER BRAND
========================================================= */

.footer-brand p {

    max-width:
        350px;

    margin-top:
        15px;

    color:
        #8F999D;

    font-size:
        13px;

    line-height:
        1.8;

}


/* =========================================================
   FOOTER COLUMNS
========================================================= */

.footer-col {

    display:
        flex;

    flex-direction:
        column;

    gap:
        11px;

}


.footer-col h4 {

    margin-bottom:
        10px;

    color:
        var(--white);

    font-size:
        13px;

}


.footer-col a,
.footer-col p {

    color:
        #859196;

    font-size:
        12px;

    line-height:
        1.7;

}


.footer-col a {

    transition:
        var(--transition);

}


.footer-col a:hover {

    color:
        var(--primary);

    transform:
        translateX(3px);

}


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

.footer-bottom {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-top:
        50px;

    padding-top:
        20px;

    border-top:
        1px solid
        rgba(255,255,255,.08);

    color:
        #707A7E;

    font-size:
        11px;

}


.footer-bottom a {

    color:
        var(--primary);

    font-weight:
        700;

}


/* =========================================================
   WHATSAPP
========================================================= */

.whatsapp-btn {

    position:
        fixed;

    right:
        22px;

    bottom:
        22px;

    z-index:
        999;

    width:
        54px;

    height:
        54px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    color:
        var(--white);

    background:
        #18C49A;

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.22);

    transition:
        var(--transition);

}


.whatsapp-btn:hover {

    transform:
        translateY(-5px)
        scale(1.05);

    background:
        #0FA982;

    box-shadow:
        0 16px 35px
        rgba(24,196,154,.28);

}


.whatsapp-btn span {

    font-size:
        22px;

}


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

@media (max-width: 1100px) {

    .main-nav {

        gap:
            18px;

    }


    .main-nav a {

        font-size:
            12px;

    }


    .hero-content {

        gap:
            50px;

    }


    .hero h1 {

        font-size:
            clamp(44px, 6vw, 65px);

    }

}


/* =========================================================
   TABLET / SMALL DESKTOP
========================================================= */

@media (max-width: 1000px) {

    .site-header {

        height:
            78px;

    }


    .nav-wrap {

        height:
            78px;

    }


    .main-nav {

        position:
            fixed;

        top:
            78px;

        left:
            0;

        right:
            0;

        width:
            100%;

        padding:
            25px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            17px;

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

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

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

        transform:
            translateY(-120%);

        opacity:
            0;

        pointer-events:
            none;

        transition:
            .35s ease;

    }


    .main-nav.open {

        transform:
            translateY(0);

        opacity:
            1;

        pointer-events:
            auto;

    }


    .main-nav a {

        width:
            100%;

        font-size:
            14px;

        padding:
            5px 0;

    }


    .main-nav a::after {

        bottom:
            -2px;

    }


    .menu-toggle {

        display:
            flex;

    }


    .nav-login {

        display:
            none;

    }


    .hero-content {

        grid-template-columns:
            1fr;

        gap:
            45px;

        padding:
            70px 0;

    }


    .hero {

        min-height:
            auto;

    }


    .hero-card {

        width:
            min(100%, 550px);

    }


    .intro-grid,
    .why-grid {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


    .solution-grid {

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

    }


    .serve-grid {

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

    }


    .footer-top {

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

        gap:
            45px;

    }

}


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

@media (max-width: 650px) {

    .container {

        width:
            min(92%, 540px);

    }


    .site-header {

        height:
            72px;

    }


    .nav-wrap {

        height:
            72px;

        gap:
            15px;

    }


    .site-logo {

        height:
            49px;

        max-width:
            125px;

    }


    .main-nav {

        top:
            72px;

    }


    .menu-toggle {

        width:
            40px;

        height:
            40px;

    }


    /* HERO */

    .hero {

        padding-top:
            72px;

    }


    .hero-content {

        min-height:
            auto;

        padding:
            72px 0
            85px;

    }


    .hero h1 {

        font-size:
            44px;

        line-height:
            1.06;

        letter-spacing:
            -2px;

    }


    .hero-copy > p {

        font-size:
            15px;

        line-height:
            1.75;

    }


    .eyebrow {

        font-size:
            9px;

        letter-spacing:
            1.1px;

    }


    .hero-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .btn {

        width:
            100%;

    }


    .hero-card {

        padding:
            25px;

        border-radius:
            21px;

    }


    .hero-card h3 {

        font-size:
            23px;

    }


    .hero-stats {

        grid-template-columns:
            1fr;

    }


    .hero-scroll {

        display:
            none;

    }


    /* SECTIONS */

    .section {

        padding:
            75px 0;

    }


    .section h2 {

        font-size:
            35px;

        letter-spacing:
            -1.5px;

    }


    .section-heading {

        display:
            block;

    }


    .section-heading > p {

        margin-top:
            20px;

    }


    .large-text {

        font-size:
            17px;

    }


    /* SOLUTIONS */

    .solution-grid {

        grid-template-columns:
            1fr;

    }


    .solution-card {

        min-height:
            auto;

        padding:
            28px;

    }


    /* SERVE */

    .serve-grid {

        grid-template-columns:
            1fr;

    }


    /* WHY */

    .why-grid {

        gap:
            45px;

    }


    .why-list > div {

        grid-template-columns:
            40px 1fr;

        gap:
            15px;

    }


    /* CTA */

    .cta-section {

        padding:
            65px 0;

    }


    .cta-inner {

        display:
            block;

    }


    .cta-section h2 {

        font-size:
            35px;

        margin-bottom:
            30px;

    }


    .cta-inner .btn {

        width:
            auto;

    }


    /* FOOTER */

    .footer-top {

        grid-template-columns:
            1fr;

        gap:
            35px;

    }


    .footer-bottom {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            12px;

    }


    .footer-logo .site-logo {

        height:
            52px;

    }


    /* WHATSAPP */

    .whatsapp-btn {

        right:
            16px;

        bottom:
            16px;

        width:
            50px;

        height:
            50px;

    }

}


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

@media (max-width: 380px) {

    .site-logo {

        height:
            45px;

        max-width:
            112px;

    }


    .hero h1 {

        font-size:
            39px;

    }


    .hero-content {

        padding-top:
            60px;

    }


    .section h2 {

        font-size:
            32px;

    }


    .hero-card {

        padding:
            21px;

    }

}

/* =========================================================
   ABOUT PAGE
========================================================= */


/* =========================================
   INNER PAGE HERO
========================================= */

.inner-hero {

    position: relative;

    min-height: 500px;

    padding-top: 82px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 85% 20%,
            rgba(24,196,154,.18),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #202124,
            #303438 60%,
            #454545
        );

    color: #fff;

}


.inner-hero-pattern {

    position: absolute;

    width: 500px;

    height: 500px;

    right: -200px;

    top: 20px;

    border-radius: 50%;

    border:
        1px solid
        rgba(24,196,154,.20);

    box-shadow:
        0 0 0 80px rgba(24,196,154,.025),
        0 0 0 160px rgba(24,196,154,.018);

}


.inner-hero-content {

    position: relative;

    z-index: 2;

    padding:
        85px 0;

}


.inner-hero h1 {

    max-width: 800px;

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

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

    line-height: 1.05;

    letter-spacing: -3px;

}


.inner-hero h1 span {

    color:
        var(--primary);

}


.inner-hero p {

    max-width: 650px;

    margin-top: 24px;

    color:
        #C2CCCF;

    font-size: 17px;

    line-height: 1.8;

}


.breadcrumb {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 30px;

    color:
        #8F9A9E;

    font-size: 11px;

}


.breadcrumb a {

    color:
        var(--primary);

}


.breadcrumb span {

    color:
        #657074;

}


/* =========================================
   ABOUT INTRO
========================================= */

.about-intro {

    background:
        var(--white);

}


.about-intro-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 100px;

    align-items: start;

}


.about-intro-heading h2 {

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

    font-size:
        clamp(35px,4vw,53px);

    line-height: 1.1;

    letter-spacing: -2.2px;

}


.about-intro-heading h2 span {

    color:
        var(--primary-dark);

}


.about-intro-content {

    padding-top: 30px;

}


.about-intro-content p {

    color:
        var(--muted);

    font-size: 16px;

    line-height: 1.9;

    margin-bottom: 20px;

}


/* =========================================
   MISSION / VISION
========================================= */

.mission-section {

    background:
        var(--off-white);

}


.mission-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 20px;

}


.mission-card {

    position: relative;

    min-height: 430px;

    padding: 38px;

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

    overflow: hidden;

}


.vision-card {

    background:
        var(--primary-light);

    border:
        1px solid
        rgba(24,196,154,.15);

}


.mission-card-dark {

    background:
        var(--charcoal-dark);

    color:
        var(--white);

}


.mission-number {

    font-size:
        12px;

    font-weight:
        900;

    color:
        var(--primary-dark);

    letter-spacing:
        1px;

}


.mission-card-dark .mission-number {

    color:
        var(--primary);

}


.mission-content {

    position: absolute;

    left: 38px;

    right: 38px;

    bottom: 38px;

}


.mission-content h2 {

    max-width:
        450px;

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

    font-size:
        clamp(31px,3vw,44px);

    line-height:
        1.1;

    letter-spacing:
        -1.8px;

}


.mission-card-dark h2 {

    color:
        var(--white);

}


.mission-content h2 span {

    color:
        var(--primary-dark);

}


.mission-card-dark h2 span {

    color:
        var(--primary);

}


.mission-content p {

    max-width:
        480px;

    margin-top:
        18px;

    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.8;

}


.mission-card-dark p {

    color:
        #9DA8AC;

}


/* =========================================
   DIFFERENCE
========================================= */

.difference-section {

    background:
        var(--white);

}


.difference-grid {

    display:
        grid;

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

    gap:
        16px;

}


.difference-card {

    padding:
        30px;

    min-height:
        280px;

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

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

    background:
        var(--white);

    transition:
        var(--transition);

}


.difference-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(24,196,154,.35);

    box-shadow:
        var(--shadow);

}


.difference-icon {

    color:
        var(--primary-dark);

    font-size:
        12px;

    font-weight:
        900;

    margin-bottom:
        55px;

}


.difference-card h3 {

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

    font-size:
        21px;

    margin-bottom:
        12px;

}


.difference-card p {

    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.75;

}


/* =========================================
   CAPABILITIES
========================================= */

.capability-section {

    background:
        var(--charcoal-dark);

    color:
        var(--white);

}


.capability-grid {

    display:
        grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap:
        100px;

}


.capability-left h2 {

    color:
        var(--white);

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

    font-size:
        clamp(34px,4vw,52px);

    line-height:
        1.08;

    letter-spacing:
        -2px;

}


.capability-left h2 span {

    color:
        var(--primary);

}


.capability-left > p {

    max-width:
        500px;

    margin:
        25px 0 30px;

    color:
        #AEB8BC;

    line-height:
        1.8;

}


.capability-right {

    display:
        flex;

    flex-direction:
        column;

}


.capability-row {

    display:
        grid;

    grid-template-columns:
        55px 1fr;

    gap:
        20px;

    padding:
        27px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.10);

}


.capability-number {

    color:
        var(--primary);

    font-size:
        12px;

    font-weight:
        900;

}


.capability-row h3 {

    font-size:
        17px;

    color:
        #F7F9F9;

}


.capability-row p {

    margin-top:
        7px;

    color:
        #8F9A9E;

    font-size:
        13px;

    line-height:
        1.7;

}


/* =========================================
   ABOUT SERVE
========================================= */

.about-serve {

    background:
        var(--off-white);

}


.about-serve-grid {

    display:
        grid;

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

    gap:
        16px;

    margin-top:
        50px;

}


.about-serve-item {

    padding:
        30px;

    min-height:
        250px;

    background:
        var(--white);

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

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

    transition:
        var(--transition);

}


.about-serve-item:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(24,196,154,.35);

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

}


.about-serve-item > span {

    color:
        var(--primary-dark);

    font-size:
        11px;

    font-weight:
        900;

}


.about-serve-item h3 {

    margin:
        35px 0 12px;

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

    font-size:
        18px;

}


.about-serve-item p {

    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.75;

}


/* =========================================
   ABOUT PAGE RESPONSIVE
========================================= */

@media (max-width: 1000px) {

    .about-intro-grid {

        grid-template-columns:
            1fr;

        gap:
            30px;

    }


    .about-intro-content {

        padding-top:
            0;

    }


    .mission-grid {

        grid-template-columns:
            1fr;

    }


    .difference-grid {

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

    }


    .capability-grid {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


    .about-serve-grid {

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

    }

}


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

@media (max-width: 650px) {

    .inner-hero {

        min-height:
            470px;

    }


    .inner-hero-content {

        padding:
            70px 0;

    }


    .inner-hero h1 {

        font-size:
            43px;

        letter-spacing:
            -2px;

    }


    .inner-hero p {

        font-size:
            15px;

    }


    .mission-card {

        min-height:
            400px;

        padding:
            28px;

    }


    .mission-content {

        left:
            28px;

        right:
            28px;

        bottom:
            28px;

    }


    .mission-content h2 {

        font-size:
            31px;

    }


    .difference-grid {

        grid-template-columns:
            1fr;

    }


    .difference-card {

        min-height:
            auto;

    }


    .capability-grid {

        gap:
            35px;

    }


    .capability-row {

        grid-template-columns:
            40px 1fr;

        gap:
            15px;

    }


    .about-serve-grid {

        grid-template-columns:
            1fr;

    }


    .about-serve-item {

        min-height:
            auto;

    }

}

/* =========================================================
   SOLUTIONS PAGE
========================================================= */


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

.solutions-hero {

    min-height:
        530px;

}


.solutions-hero .inner-hero-content {

    padding:
        95px 0;

}


/* =========================================
   SOLUTIONS INTRO
========================================= */

.solutions-intro {

    background:
        var(--white);

}


.solutions-intro-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        100px;

    align-items:
        end;

}


.solutions-intro-grid h2 {

    max-width:
        600px;

}


.solutions-intro-grid h2 span {

    color:
        var(--primary-dark);

}


.solutions-intro-grid .large-text {

    font-size:
        18px;

}


.solutions-intro-small {

    margin-top:
        18px;

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.8;

}


/* =========================================
   CORE SOLUTIONS
========================================= */

.core-solutions {

    background:
        var(--off-white);

}


.core-solutions > .container > .section-heading {

    max-width:
        750px;

    margin-left:
        auto;

    margin-right:
        auto;

}


.core-solutions > .container > .section-heading p {

    max-width:
        600px;

    margin:
        18px auto 0;

}


/* =========================================
   CORE SOLUTION GRID
========================================= */

.core-solution-grid {

    display:
        grid;

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

    gap:
        20px;

    margin-top:
        55px;

}


.core-solution-card {

    position:
        relative;

    min-height:
        620px;

    padding:
        30px;

    overflow:
        hidden;

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

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

    background:
        var(--white);

    transition:
        var(--transition);

}


.core-solution-card:hover {

    transform:
        translateY(-9px);

    border-color:
        rgba(24,196,154,.38);

    box-shadow:
        var(--shadow);

}


/* decorative circle */

.core-solution-card::after {

    content:
        "";

    position:
        absolute;

    width:
        230px;

    height:
        230px;

    right:
        -100px;

    top:
        -100px;

    border-radius:
        50%;

    background:
        var(--primary-light);

    transition:
        var(--transition);

}


.core-solution-card:hover::after {

    transform:
        scale(1.2);

}


/* =========================================
   FEATURED SOLUTION
========================================= */

.featured-solution {

    color:
        var(--white);

    border-color:
        var(--charcoal-dark);

    background:
        linear-gradient(
            145deg,
            #202124,
            #3B3E40
        );

}


.featured-solution::after {

    background:
        rgba(24,196,154,.08);

}


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

.core-solution-top {

    position:
        relative;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.core-number {

    color:
        var(--primary-dark);

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        1px;

}


.featured-solution .core-number {

    color:
        var(--primary);

}


.core-arrow {

    display:
        grid;

    place-items:
        center;

    width:
        38px;

    height:
        38px;

    border-radius:
        50%;

    color:
        var(--primary-dark);

    background:
        var(--primary-light);

    font-size:
        17px;

    transition:
        var(--transition);

}


.featured-solution .core-arrow {

    color:
        var(--primary);

    background:
        rgba(24,196,154,.10);

}


.core-solution-card:hover .core-arrow {

    transform:
        rotate(45deg);

}


/* =========================================
   SOLUTION ICONS
========================================= */

.core-solution-icon {

    position:
        relative;

    z-index:
        2;

    width:
        70px;

    height:
        70px;

    margin:
        45px 0 30px;

    border-radius:
        20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--primary-light);

}


/* Hardware icon */

.core-solution-icon:not(.software-icon):not(.training-icon) span {

    position:
        absolute;

    border:
        2px solid
        var(--primary);

}


.core-solution-icon:not(.software-icon):not(.training-icon) span:nth-child(1) {

    width:
        34px;

    height:
        27px;

    border-radius:
        4px;

}


.core-solution-icon:not(.software-icon):not(.training-icon) span:nth-child(2) {

    width:
        12px;

    height:
        4px;

    bottom:
        15px;

    border-radius:
        4px;

}


.core-solution-icon:not(.software-icon):not(.training-icon) span:nth-child(3) {

    width:
        42px;

    height:
        2px;

    bottom:
        10px;

}


/* Software icon */

.software-icon {

    background:
        rgba(24,196,154,.10);

}


.software-icon span {

    position:
        absolute;

    width:
        30px;

    height:
        30px;

    border:
        2px solid
        var(--primary);

    border-radius:
        7px;

}


.software-icon span:nth-child(1) {

    transform:
        translate(-9px,-6px);

}


.software-icon span:nth-child(2) {

    transform:
        translate(8px,7px);

}


.software-icon span:nth-child(3) {

    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

    background:
        var(--primary);

    border:
        0;

}


/* Training icon */

.training-icon {

    background:
        var(--primary-light);

}


.training-icon span {

    width:
        9px;

    height:
        30px;

    margin:
        0 3px;

    border-radius:
        6px;

    background:
        var(--primary);

}


.training-icon span:nth-child(2) {

    height:
        42px;

}


.training-icon span:nth-child(3) {

    height:
        24px;

}


.training-icon span:nth-child(4) {

    height:
        35px;

}


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

.core-solution-content {

    position:
        relative;

    z-index:
        3;

}


.core-solution-content h3 {

    max-width:
        400px;

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

    font-size:
        30px;

    line-height:
        1.18;

    letter-spacing:
        -1px;

    margin:
        0 0 17px;

}


.core-solution-content h3 span {

    color:
        var(--primary-dark);

}


.featured-solution h3 span {

    color:
        var(--primary);

}


.core-solution-content > p {

    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.8;

}


.featured-solution .core-solution-content > p {

    color:
        #AEB8BC;

}


/* =========================================
   SOLUTION LIST
========================================= */

.core-solution-content ul {

    list-style:
        none;

    margin:
        25px 0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

}


.core-solution-content li {

    position:
        relative;

    padding-left:
        19px;

    color:
        #5D676D;

    font-size:
        12px;

}


.core-solution-content li::before {

    content:
        "✓";

    position:
        absolute;

    left:
        0;

    color:
        var(--primary-dark);

    font-weight:
        900;

}


.featured-solution li {

    color:
        #A7B1B4;

}


.featured-solution li::before {

    color:
        var(--primary);

}


/* =========================================
   DETAIL LINK
========================================= */

.solution-detail-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    color:
        var(--primary-dark);

    font-size:
        12px;

    font-weight:
        850;

    margin-top:
        8px;

    transition:
        var(--transition);

}


.solution-detail-link span {

    transition:
        var(--transition);

}


.solution-detail-link:hover {

    color:
        var(--charcoal-dark);

}


.solution-detail-link:hover span {

    transform:
        translateX(5px);

}


.featured-solution .solution-detail-link {

    color:
        var(--primary);

}


.featured-solution .solution-detail-link:hover {

    color:
        var(--white);

}


/* =========================================
   HOW WE WORK
========================================= */

.how-section {

    background:
        var(--white);

}


.process-line {

    position:
        relative;

    display:
        grid;

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

    gap:
        30px;

    margin-top:
        60px;

}


.process-line::before {

    content:
        "";

    position:
        absolute;

    left:
        11%;

    right:
        11%;

    top:
        25px;

    height:
        1px;

    background:
        var(--border);

}


.process-step {

    position:
        relative;

    z-index:
        2;

}


.process-circle {

    width:
        51px;

    height:
        51px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(24,196,154,.35);

    border-radius:
        50%;

    background:
        var(--white);

    color:
        var(--primary-dark);

    font-size:
        11px;

    font-weight:
        900;

    margin-bottom:
        25px;

}


.process-step:hover .process-circle {

    color:
        var(--white);

    background:
        var(--primary);

    border-color:
        var(--primary);

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

}


.process-step h3 {

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

    font-size:
        19px;

    margin-bottom:
        9px;

}


.process-step p {

    max-width:
        220px;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.75;

}


/* =========================================
   INTEGRATED SOLUTION
========================================= */

.integrated-section {

    background:
        var(--off-white);

}


.integrated-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        100px;

    align-items:
        center;

}


.integrated-visual {

    position:
        relative;

    width:
        min(100%,500px);

    aspect-ratio:
        1 / 1;

    margin:
        auto;

}


.visual-circle {

    position:
        absolute;

    border-radius:
        50%;

    border:
        1px solid
        rgba(24,196,154,.25);

}


.visual-circle-one {

    inset:
        12%;

    background:
        rgba(24,196,154,.035);

}


.visual-circle-two {

    inset:
        25%;

    background:
        rgba(24,196,154,.07);

}


.visual-center {

    position:
        absolute;

    width:
        145px;

    height:
        145px;

    top:
        50%;

    left:
        50%;

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

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    border-radius:
        50%;

    color:
        var(--white);

    background:
        var(--charcoal-dark);

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.16);

}


.visual-center strong {

    color:
        var(--primary);

    font-size:
        30px;

}


.visual-center span {

    color:
        #AAB4B7;

    font-size:
        10px;

    text-align:
        center;

    max-width:
        80px;

    line-height:
        1.3;

}


.visual-label {

    position:
        absolute;

    padding:
        10px 15px;

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

    border-radius:
        50px;

    background:
        var(--white);

    color:
        var(--charcoal);

    font-size:
        11px;

    font-weight:
        750;

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

}


.visual-hardware {

    top:
        12%;

    left:
        50%;

    transform:
        translateX(-50%);

}


.visual-software {

    right:
        7%;

    top:
        52%;

}


.visual-training {

    left:
        7%;

    top:
        52%;

}


.integrated-content h2 {

    max-width:
        550px;

}


.integrated-content > p {

    max-width:
        560px;

    margin:
        25px 0;

    color:
        var(--muted);

    font-size:
        15px;

    line-height:
        1.85;

}


/* =========================================
   ADVANTAGE LIST
========================================= */

.advantage-list {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        12px 25px;

    margin:
        25px 0 30px;

}


.advantage-list div {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


.advantage-list span {

    width:
        23px;

    height:
        23px;

    display:
        grid;

    place-items:
        center;

    flex-shrink:
        0;

    border-radius:
        50%;

    background:
        var(--primary-light);

    color:
        var(--primary-dark);

    font-size:
        11px;

    font-weight:
        900;

}


.advantage-list p {

    color:
        #59646A;

    font-size:
        12px;

}


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

@media (max-width:1000px) {

    .solutions-intro-grid {

        grid-template-columns:
            1fr;

        gap:
            35px;

    }


    .core-solution-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .core-solution-card:last-child {

        grid-column:
            1 / -1;

        min-height:
            auto;

    }


    .process-line {

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

        gap:
            40px;

    }


    .process-line::before {

        display:
            none;

    }


    .integrated-grid {

        grid-template-columns:
            1fr;

        gap:
            60px;

    }

}


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

@media (max-width:650px) {

    .solutions-hero {

        min-height:
            500px;

    }


    .solutions-intro-grid {

        gap:
            25px;

    }


    .core-solution-grid {

        grid-template-columns:
            1fr;

    }


    .core-solution-card,
    .core-solution-card:last-child {

        grid-column:
            auto;

        min-height:
            auto;

    }


    .core-solution-card {

        padding:
            27px;

    }


    .core-solution-content h3 {

        font-size:
            27px;

    }


    .process-line {

        grid-template-columns:
            1fr;

        gap:
            35px;

    }


    .process-step p {

        max-width:
            100%;

    }


    .integrated-visual {

        width:
            100%;

    }


    .visual-center {

        width:
            120px;

        height:
            120px;

    }


    .visual-center strong {

        font-size:
            26px;

    }


    .visual-hardware {

        top:
            9%;

    }


    .visual-software {

        right:
            0;

    }


    .visual-training {

        left:
            0;

    }


    .advantage-list {

        grid-template-columns:
            1fr;

    }


    .integrated-content .btn {

        width:
            auto;

    }

}

/* =========================================================
   HARDWARE PAGE
========================================================= */


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

.hardware-hero{
    min-height:720px;
    padding:150px 0 90px;
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 75% 45%,
            rgba(24,196,154,.18),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #202124 0%,
            #303438 55%,
            #202124 100%
        );
    color:#fff;
}

.hardware-hero::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border:1px solid rgba(24,196,154,.13);
    border-radius:50%;
    right:-170px;
    top:100px;
}

.hardware-hero::after{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    border:1px solid rgba(255,255,255,.04);
    border-radius:50%;
    right:-280px;
    top:0;
}

.hardware-hero .container{
    min-height:480px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
    position:relative;
    z-index:2;
}

.hardware-hero-content{
    max-width:650px;
}

.hero-breadcrumb{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    margin-bottom:28px;
    color:rgba(255,255,255,.55);
}

.hero-breadcrumb a{
    color:rgba(255,255,255,.75);
}

.hero-breadcrumb a:hover{
    color:#18C49A;
}

.hardware-hero h1{
    font-size:clamp(45px,5vw,74px);
    line-height:1.02;
    letter-spacing:-3px;
    margin:18px 0 25px;
    font-weight:800;
}

.hardware-hero h1 span{
    display:block;
    color:#18C49A;
}

.hardware-hero-content > p{
    max-width:600px;
    color:rgba(255,255,255,.72);
    font-size:18px;
    line-height:1.75;
}

.hardware-hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:34px;
}

.btn-outline-light{
    border:1px solid rgba(255,255,255,.28);
    color:#fff;
    background:rgba(255,255,255,.04);
}

.btn-outline-light:hover{
    border-color:#18C49A;
    background:rgba(24,196,154,.08);
    color:#18C49A;
}


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

.hardware-hero-visual{
    min-height:450px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.hero-device-main{
    width:min(430px,90%);
    position:relative;
    z-index:2;
    transform:perspective(1000px) rotateY(-7deg);
}

.device-screen{
    height:270px;
    border:8px solid #101214;
    border-radius:13px;
    background:#111518;
    padding:8px;
    box-shadow:
        0 30px 80px rgba(0,0,0,.4),
        inset 0 0 0 1px rgba(255,255,255,.05);
}

.device-top{
    width:45px;
    height:5px;
    border-radius:20px;
    background:#0d0f10;
    margin:0 auto -3px;
    position:relative;
    z-index:3;
}

.device-screen::after{
    content:"";
    position:absolute;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#18C49A;
    top:14px;
    left:50%;
    transform:translateX(-50%);
    box-shadow:0 0 14px rgba(24,196,154,.8);
}

.screen-content{
    height:100%;
    border-radius:5px;
    background:
        linear-gradient(
            135deg,
            #0f3530,
            #163f38 45%,
            #11211f
        );
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}

.screen-content::before{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border:1px solid rgba(24,196,154,.22);
    border-radius:50%;
}

.screen-circle{
    width:95px;
    height:95px;
    border-radius:50%;
    border:2px solid rgba(24,196,154,.7);
    box-shadow:
        0 0 0 20px rgba(24,196,154,.06),
        0 0 0 40px rgba(24,196,154,.03);
}

.screen-lines{
    position:absolute;
    right:35px;
    bottom:30px;
    width:100px;
}

.screen-lines span{
    display:block;
    height:4px;
    margin-top:8px;
    border-radius:10px;
    background:rgba(255,255,255,.22);
}

.screen-lines span:nth-child(1){
    width:100%;
}

.screen-lines span:nth-child(2){
    width:70%;
}

.screen-lines span:nth-child(3){
    width:45%;
}

.device-bottom{
    width:120px;
    height:10px;
    background:#101214;
    margin:0 auto;
    border-radius:0 0 8px 8px;
}

.device-bottom::after{
    content:"";
    display:block;
    width:210px;
    height:7px;
    background:#101214;
    border-radius:20px;
    margin:8px auto 0;
}


.floating-device-card{
    position:absolute;
    z-index:4;
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 17px;
    border-radius:12px;
    background:rgba(255,255,255,.95);
    color:#303438;
    box-shadow:0 20px 50px rgba(0,0,0,.25);
    min-width:190px;
}

.floating-device-card strong{
    display:block;
    font-size:13px;
}

.floating-device-card small{
    display:block;
    margin-top:3px;
    font-size:11px;
    color:#697278;
}

.floating-icon{
    width:38px;
    height:38px;
    border-radius:10px;
    display:grid;
    place-items:center;
    background:#E9FBF6;
    color:#0FA982;
    font-weight:800;
    font-size:18px;
}

.card-one{
    top:65px;
    left:0;
}

.card-two{
    bottom:50px;
    right:-15px;
}


/* =========================
   INTRO
========================= */

.hardware-intro-section{
    background:#fff;
}

.section-heading.centered{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}

.hardware-intro-section .section-heading{
    max-width:800px;
}

.hardware-intro-section .section-heading p{
    margin-left:auto;
    margin-right:auto;
}

.hardware-stat-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin-top:65px;
    border-top:1px solid #DDE7E4;
    border-bottom:1px solid #DDE7E4;
}

.hardware-stat{
    min-height:130px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    border-right:1px solid #DDE7E4;
}

.hardware-stat:last-child{
    border-right:0;
}

.hardware-stat strong{
    font-size:31px;
    color:#18C49A;
    font-weight:800;
}

.hardware-stat span{
    font-size:14px;
    line-height:1.5;
    color:#697278;
    font-weight:600;
}


/* =========================
   HARDWARE CARDS
========================= */

.hardware-solutions-section{
    background:#F7FAF9;
}

.hardware-category-grid{
    margin-top:55px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.hardware-category-card{
    background:#fff;
    border:1px solid #DDE7E4;
    border-radius:18px;
    padding:30px;
    min-height:480px;
    position:relative;
    overflow:hidden;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.hardware-category-card:hover{
    transform:translateY(-7px);
    border-color:rgba(24,196,154,.35);
    box-shadow:0 22px 55px rgba(32,33,36,.08);
}

.hardware-category-card::before{
    content:"";
    position:absolute;
    width:130px;
    height:130px;
    border-radius:50%;
    background:#E9FBF6;
    right:-55px;
    top:-55px;
    transition:.3s ease;
}

.hardware-category-card:hover::before{
    transform:scale(1.25);
}

.hardware-card-top{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}

.hardware-number{
    font-size:12px;
    color:#18C49A;
    font-weight:800;
    letter-spacing:1px;
}

.hardware-icon{
    width:64px;
    height:64px;
    border-radius:16px;
    background:#F1FCF8;
    border:1px solid #DDEFE9;
    position:relative;
    display:grid;
    place-items:center;
}


/* Display Icon */

.display-icon div{
    width:35px;
    height:26px;
    border:2px solid #18C49A;
    border-radius:4px;
    position:relative;
}

.display-icon div::after{
    content:"";
    position:absolute;
    width:8px;
    height:3px;
    background:#18C49A;
    bottom:-7px;
    left:50%;
    transform:translateX(-50%);
}


/* Classroom Icon */

.classroom-board{
    width:35px;
    height:25px;
    border:2px solid #18C49A;
    border-radius:3px;
    position:absolute;
    top:14px;
}

.classroom-desk{
    width:38px;
    height:4px;
    background:#18C49A;
    position:absolute;
    bottom:16px;
    border-radius:4px;
}

.classroom-desk::before,
.classroom-desk::after{
    content:"";
    position:absolute;
    width:3px;
    height:9px;
    background:#18C49A;
    bottom:-8px;
}

.classroom-desk::before{
    left:5px;
}

.classroom-desk::after{
    right:5px;
}


/* Projector Icon */

.projector-body{
    width:38px;
    height:22px;
    background:#18C49A;
    border-radius:5px;
    position:relative;
}

.projector-body::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:#fff;
    position:absolute;
    left:6px;
    top:7px;
}

.projector-icon span{
    position:absolute;
    width:10px;
    height:2px;
    background:#18C49A;
    right:8px;
    top:31px;
    transform:rotate(-25deg);
}


/* AV Icon */

.av-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
}

.av-icon span{
    width:6px;
    border-radius:4px;
    background:#18C49A;
}

.av-icon span:nth-child(1){
    height:17px;
}

.av-icon span:nth-child(2){
    height:30px;
}

.av-icon span:nth-child(3){
    height:21px;
}


/* Network Icon */

.network-icon i{
    position:absolute;
    width:9px;
    height:9px;
    border-radius:50%;
    background:#18C49A;
}

.network-icon i:nth-child(1){
    top:14px;
    left:28px;
}

.network-icon i:nth-child(2){
    bottom:15px;
    left:15px;
}

.network-icon i:nth-child(3){
    bottom:15px;
    right:15px;
}

.network-icon i:nth-child(4){
    bottom:15px;
    left:28px;
}

.network-icon::before,
.network-icon::after{
    content:"";
    position:absolute;
    height:2px;
    background:#18C49A;
    transform-origin:left;
}

.network-icon::before{
    width:25px;
    left:31px;
    top:22px;
    transform:rotate(125deg);
}

.network-icon::after{
    width:25px;
    left:31px;
    top:22px;
    transform:rotate(55deg);
}


/* Meeting Icon */

.meeting-screen{
    width:35px;
    height:23px;
    border:2px solid #18C49A;
    border-radius:3px;
    position:absolute;
    top:12px;
}

.meeting-person{
    width:13px;
    height:13px;
    border-radius:50%;
    border:2px solid #18C49A;
    position:absolute;
    bottom:11px;
}

.meeting-person::after{
    content:"";
    position:absolute;
    width:25px;
    height:10px;
    border:2px solid #18C49A;
    border-bottom:0;
    border-radius:15px 15px 0 0;
    left:50%;
    transform:translateX(-50%);
    top:11px;
}


.hardware-category-card h3{
    font-size:21px;
    margin:30px 0 13px;
    color:#202124;
    line-height:1.25;
}

.hardware-category-card p{
    color:#697278;
    font-size:14px;
    line-height:1.7;
}

.hardware-category-card ul{
    list-style:none;
    margin:23px 0;
    padding:0;
}

.hardware-category-card li{
    font-size:13px;
    color:#454545;
    padding:7px 0;
    padding-left:18px;
    position:relative;
}

.hardware-category-card li::before{
    content:"";
    position:absolute;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#18C49A;
    left:0;
    top:14px;
}

.hardware-link{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-size:13px;
    font-weight:700;
    color:#0FA982;
    position:absolute;
    left:30px;
    bottom:28px;
}

.hardware-link span{
    transition:transform .2s ease;
}

.hardware-link:hover span{
    transform:translateX(5px);
}


/* =========================
   SHOWCASE
========================= */

.hardware-showcase-section{
    padding-top:110px;
    padding-bottom:110px;
}

.hardware-showcase{
    background:#202124;
    border-radius:28px;
    overflow:hidden;
    min-height:620px;
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    position:relative;
}

.hardware-showcase::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border:1px solid rgba(24,196,154,.12);
    border-radius:50%;
    right:-120px;
    top:-150px;
}

.showcase-content{
    padding:75px 65px;
    position:relative;
    z-index:2;
}

.showcase-content h2{
    color:#fff;
    font-size:44px;
    line-height:1.08;
    letter-spacing:-1.5px;
    margin:18px 0 22px;
}

.showcase-content h2 span{
    display:block;
    color:#18C49A;
}

.showcase-content > p{
    color:rgba(255,255,255,.62);
    line-height:1.75;
    font-size:15px;
    max-width:500px;
}

.showcase-points{
    margin:32px 0;
}

.showcase-points div{
    display:flex;
    align-items:center;
    gap:12px;
    margin:13px 0;
}

.showcase-points span{
    width:23px;
    height:23px;
    border-radius:50%;
    background:rgba(24,196,154,.12);
    color:#18C49A;
    display:grid;
    place-items:center;
    font-size:11px;
    font-weight:800;
}

.showcase-points p{
    color:rgba(255,255,255,.72);
    font-size:13px;
}


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

.showcase-visual{
    position:relative;
    min-height:620px;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

.showcase-visual::before{
    content:"";
    position:absolute;
    width:390px;
    height:390px;
    border-radius:50%;
    background:rgba(24,196,154,.08);
    box-shadow:0 0 100px rgba(24,196,154,.08);
}

.classroom-panel{
    position:relative;
    z-index:2;
    width:330px;
}

.panel-frame{
    background:#0c0e10;
    padding:9px;
    border-radius:12px;
    box-shadow:0 35px 80px rgba(0,0,0,.5);
    transform:perspective(800px) rotateY(-9deg) rotateX(2deg);
}

.panel-display{
    height:210px;
    border-radius:5px;
    background:
        linear-gradient(
            135deg,
            #123a33,
            #194d43,
            #0d211e
        );
    position:relative;
    overflow:hidden;
    padding:28px;
}

.panel-display::before{
    content:"";
    position:absolute;
    width:240px;
    height:240px;
    border-radius:50%;
    border:1px solid rgba(24,196,154,.25);
    right:-70px;
    top:-70px;
}

.panel-top-line{
    width:45px;
    height:3px;
    border-radius:4px;
    background:#18C49A;
    margin-bottom:25px;
}

.panel-title{
    color:#fff;
    font-size:16px;
    line-height:1.1;
    position:relative;
    z-index:2;
}

.panel-title strong{
    color:#18C49A;
    font-size:23px;
}

.panel-circles{
    position:absolute;
    left:28px;
    bottom:25px;
    display:flex;
    gap:8px;
}

.panel-circles span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:rgba(255,255,255,.35);
}

.panel-circles span:first-child{
    background:#18C49A;
}

.panel-stand{
    width:90px;
    height:90px;
    border-left:5px solid #111315;
    border-right:5px solid #111315;
    margin:-1px auto 0;
    position:relative;
}

.panel-stand::after{
    content:"";
    position:absolute;
    width:170px;
    height:7px;
    background:#111315;
    border-radius:20px;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
}


.showcase-label{
    position:absolute;
    z-index:4;
    padding:11px 15px;
    border:1px solid rgba(255,255,255,.1);
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(10px);
    border-radius:9px;
    color:#fff;
    font-size:11px;
    display:flex;
    align-items:center;
    gap:9px;
}

.showcase-label b{
    color:#18C49A;
}

.label-display{
    top:125px;
    left:35px;
}

.label-network{
    right:20px;
    top:210px;
}

.label-av{
    bottom:115px;
    right:60px;
}


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

.hardware-benefits-section{
    background:#F7FAF9;
}

.hardware-benefits-section .section-heading{
    max-width:760px;
}

.hardware-benefits-grid{
    margin-top:55px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

.hardware-benefit{
    background:#fff;
    border:1px solid #DDE7E4;
    border-radius:15px;
    padding:27px;
    display:flex;
    gap:22px;
    transition:.25s ease;
}

.hardware-benefit:hover{
    transform:translateY(-4px);
    border-color:rgba(24,196,154,.3);
    box-shadow:0 15px 35px rgba(32,33,36,.06);
}

.benefit-number{
    flex:none;
    font-size:13px;
    font-weight:800;
    color:#18C49A;
    padding-top:4px;
}

.hardware-benefit h3{
    margin:0 0 8px;
    font-size:17px;
}

.hardware-benefit p{
    margin:0;
    font-size:13px;
    color:#697278;
    line-height:1.7;
}


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

.hardware-process-section{
    background:#fff;
}

.hardware-process{
    margin-top:55px;
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
    align-items:center;
    gap:22px;
}

.hardware-process-item{
    padding:10px 0;
}

.process-index{
    display:block;
    color:#18C49A;
    font-size:12px;
    font-weight:800;
    margin-bottom:17px;
}

.hardware-process-item h3{
    font-size:20px;
    margin-bottom:9px;
}

.hardware-process-item p{
    color:#697278;
    font-size:13px;
    line-height:1.6;
}

.process-arrow{
    font-size:24px;
    color:#18C49A;
}


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

.hardware-cta{
    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(24,196,154,.16),
            transparent 35%
        ),
        #202124;
}

.hardware-cta .cta-content{
    max-width:800px;
}

.hardware-cta h2{
    color:#fff;
}

.hardware-cta h2 span{
    color:#18C49A;
}


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

@media(max-width:1050px){

    .hardware-hero .container{
        grid-template-columns:1fr;
        text-align:center;
    }

    .hardware-hero-content{
        margin:auto;
    }

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

    .hardware-hero-visual{
        min-height:420px;
    }

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

    .hardware-showcase{
        grid-template-columns:1fr;
    }

    .showcase-content{
        padding:60px 50px 20px;
    }

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

    .hardware-process{
        grid-template-columns:1fr 1fr;
        gap:40px 25px;
    }

    .process-arrow{
        display:none;
    }

}


@media(max-width:700px){

    .hardware-hero{
        min-height:auto;
        padding:125px 0 65px;
    }

    .hardware-hero h1{
        font-size:42px;
        letter-spacing:-2px;
    }

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

    .hardware-hero-visual{
        min-height:360px;
        transform:scale(.88);
        margin-top:-15px;
    }

    .floating-device-card{
        transform:scale(.85);
    }

    .card-one{
        left:-5px;
        top:45px;
    }

    .card-two{
        right:-15px;
        bottom:30px;
    }

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

    .hardware-stat{
        min-height:105px;
    }

    .hardware-stat:nth-child(2){
        border-right:0;
    }

    .hardware-stat:nth-child(-n+2){
        border-bottom:1px solid #DDE7E4;
    }

    .hardware-category-grid{
        grid-template-columns:1fr;
    }

    .hardware-category-card{
        min-height:450px;
    }

    .showcase-content{
        padding:45px 28px 10px;
    }

    .showcase-content h2{
        font-size:34px;
    }

    .showcase-visual{
        min-height:410px;
    }

    .classroom-panel{
        width:280px;
    }

    .panel-display{
        height:180px;
    }

    .label-display{
        left:5px;
        top:65px;
    }

    .label-network{
        right:0;
        top:145px;
    }

    .label-av{
        right:15px;
        bottom:55px;
    }

    .hardware-benefits-grid{
        grid-template-columns:1fr;
    }

    .hardware-process{
        grid-template-columns:1fr;
        gap:30px;
    }

}


@media(max-width:480px){

    .hardware-hero h1{
        font-size:37px;
    }

    .hardware-hero-buttons{
        flex-direction:column;
    }

    .hardware-hero-buttons .btn{
        width:100%;
        justify-content:center;
    }

    .hardware-hero-visual{
        transform:scale(.72);
        margin:-25px -45px -35px;
    }

    .hardware-stat{
        gap:9px;
    }

    .hardware-stat strong{
        font-size:24px;
    }

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

    .hardware-category-card{
        padding:24px;
    }

    .hardware-link{
        left:24px;
    }

    .hardware-showcase{
        border-radius:18px;
    }

    .showcase-visual{
        min-height:370px;
    }

    .classroom-panel{
        width:240px;
    }

    .panel-display{
        height:150px;
        padding:20px;
    }

    .panel-title{
        font-size:13px;
    }

    .panel-title strong{
        font-size:18px;
    }

    .showcase-label{
        font-size:9px;
        padding:8px 10px;
    }

    .hardware-benefit{
        padding:22px;
    }

}

/* =========================================================
   SOFTWARE PAGE
========================================================= */


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

.software-hero{
    min-height:720px;
    padding:150px 0 90px;
    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(24,196,154,.16),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #202124 0%,
            #303438 55%,
            #202124 100%
        );
    color:#fff;
    position:relative;
    overflow:hidden;
}

.software-hero::before{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    border:1px solid rgba(24,196,154,.10);
    border-radius:50%;
    right:-230px;
    top:40px;
}

.software-hero::after{
    content:"";
    position:absolute;
    width:850px;
    height:850px;
    border:1px solid rgba(255,255,255,.035);
    border-radius:50%;
    right:-350px;
    top:-80px;
}

.software-hero-grid{
    min-height:500px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:65px;
    align-items:center;
    position:relative;
    z-index:2;
}

.software-hero-content{
    max-width:650px;
}

.software-hero h1{
    font-size:clamp(45px,5vw,72px);
    line-height:1.03;
    letter-spacing:-3px;
    margin:18px 0 25px;
    font-weight:800;
}

.software-hero h1 span{
    display:block;
    color:#18C49A;
}

.software-hero-content > p{
    max-width:590px;
    color:rgba(255,255,255,.70);
    font-size:18px;
    line-height:1.75;
}

.software-hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:34px;
}


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

.software-hero-visual{
    min-height:450px;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
}

.software-window{
    width:min(510px,94%);
    border-radius:15px;
    overflow:hidden;
    background:#fff;
    box-shadow:
        0 35px 90px rgba(0,0,0,.42),
        0 0 0 1px rgba(255,255,255,.06);
    transform:
        perspective(1200px)
        rotateY(-7deg)
        rotateX(3deg);
    position:relative;
    z-index:2;
}

.software-window-header{
    height:38px;
    display:flex;
    align-items:center;
    gap:18px;
    padding:0 14px;
    background:#f1f4f3;
    border-bottom:1px solid #e0e6e3;
}

.window-dots{
    display:flex;
    gap:5px;
}

.window-dots span{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#c8d0cd;
}

.window-address{
    flex:1;
    height:20px;
    border-radius:6px;
    background:#fff;
    border:1px solid #e1e6e4;
    font-size:8px;
    color:#9aa3a0;
    display:flex;
    align-items:center;
    padding:0 9px;
}

.software-window-body{
    height:340px;
    display:grid;
    grid-template-columns:78px 1fr;
}

.software-sidebar{
    background:#202124;
    padding:18px 13px;
}

.side-logo{
    width:30px;
    height:30px;
    border-radius:9px;
    background:#18C49A;
    margin:0 auto 35px;
    position:relative;
}

.side-logo::before{
    content:"";
    position:absolute;
    width:12px;
    height:12px;
    border:2px solid #fff;
    border-radius:4px;
    left:7px;
    top:7px;
}

.side-line{
    display:block;
    height:6px;
    border-radius:5px;
    background:rgba(255,255,255,.12);
    margin:18px auto;
    width:30px;
}

.side-line.active{
    background:#18C49A;
    box-shadow:0 0 12px rgba(24,196,154,.4);
}

.software-dashboard{
    background:#f7faf9;
    padding:25px;
}

.dashboard-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.dashboard-top small{
    display:block;
    font-size:8px;
    letter-spacing:1px;
    color:#9aa3a0;
    margin-bottom:5px;
}

.dashboard-top strong{
    color:#303438;
    font-size:17px;
}

.dashboard-user{
    width:27px;
    height:27px;
    border-radius:50%;
    background:#dbe9e5;
    position:relative;
}

.dashboard-user::after{
    content:"";
    position:absolute;
    width:9px;
    height:9px;
    background:#18C49A;
    border-radius:50%;
    top:6px;
    left:9px;
}

.dashboard-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-top:22px;
}

.mini-dashboard-card{
    padding:13px;
    border:1px solid #e2e9e6;
    background:#fff;
    border-radius:8px;
}

.mini-dashboard-card span{
    display:block;
    font-size:8px;
    color:#8a9490;
}

.mini-dashboard-card strong{
    display:block;
    font-size:18px;
    color:#303438;
    margin-top:6px;
}

.dashboard-chart{
    margin-top:16px;
    padding:16px;
    height:145px;
    background:#fff;
    border:1px solid #e2e9e6;
    border-radius:9px;
}

.chart-title{
    display:flex;
    justify-content:space-between;
    font-size:9px;
    color:#697278;
}

.chart-title b{
    color:#18C49A;
}

.chart-bars{
    height:95px;
    display:flex;
    align-items:flex-end;
    justify-content:space-around;
    gap:8px;
    padding-top:15px;
}

.chart-bars i{
    width:13px;
    border-radius:4px 4px 1px 1px;
    background:#18C49A;
    opacity:.8;
}


.software-floating-card{
    position:absolute;
    z-index:5;
    background:rgba(255,255,255,.96);
    color:#303438;
    padding:13px 16px;
    border-radius:12px;
    display:flex;
    align-items:center;
    gap:11px;
    box-shadow:0 20px 50px rgba(0,0,0,.25);
    min-width:175px;
}

.software-floating-card strong{
    display:block;
    font-size:12px;
}

.software-floating-card small{
    display:block;
    font-size:9px;
    color:#7b8581;
    margin-top:3px;
}

.float-check,
.float-icon{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:#E9FBF6;
    color:#0FA982;
    font-size:14px;
    font-weight:800;
}

.software-float-one{
    top:50px;
    left:-10px;
}

.software-float-two{
    right:-10px;
    bottom:45px;
}


/* =========================
   SOFTWARE INTRO
========================= */

.software-intro{
    background:#fff;
}

.software-intro .section-heading{
    max-width:800px;
}

.software-intro .section-heading p{
    margin-left:auto;
    margin-right:auto;
}

.software-principles{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid #DDE7E4;
    border-bottom:1px solid #DDE7E4;
    margin-top:60px;
}

.software-principle{
    padding:35px;
    display:flex;
    gap:18px;
    border-right:1px solid #DDE7E4;
}

.software-principle:last-child{
    border-right:0;
}

.software-principle > span{
    color:#18C49A;
    font-size:13px;
    font-weight:800;
}

.software-principle h3{
    margin:0 0 7px;
    font-size:17px;
}

.software-principle p{
    margin:0;
    font-size:13px;
    color:#697278;
    line-height:1.65;
}


/* =========================
   SOFTWARE CARDS
========================= */

.software-solutions-section{
    background:#F7FAF9;
}

.software-card-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    margin-top:55px;
}

.software-card{
    background:#fff;
    border:1px solid #DDE7E4;
    border-radius:18px;
    padding:30px;
    min-height:480px;
    position:relative;
    overflow:hidden;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.software-card:hover{
    transform:translateY(-7px);
    border-color:rgba(24,196,154,.35);
    box-shadow:0 22px 55px rgba(32,33,36,.08);
}

.software-card::before{
    content:"";
    position:absolute;
    width:130px;
    height:130px;
    border-radius:50%;
    background:#E9FBF6;
    right:-60px;
    top:-60px;
    transition:.3s ease;
}

.software-card:hover::before{
    transform:scale(1.2);
}

.software-card-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    position:relative;
    z-index:2;
}

.software-number{
    color:#18C49A;
    font-size:12px;
    font-weight:800;
    letter-spacing:1px;
}

.software-icon{
    width:62px;
    height:62px;
    border-radius:15px;
    border:1px solid #DDEFE9;
    background:#F1FCF8;
    position:relative;
    display:grid;
    place-items:center;
}


/* Microsoft */

.microsoft-icon{
    grid-template-columns:repeat(2,14px);
    grid-template-rows:repeat(2,14px);
    gap:3px;
}

.microsoft-icon span{
    width:14px;
    height:14px;
    background:#18C49A;
}


/* Cloud */

.cloud-icon div{
    width:30px;
    height:17px;
    background:#18C49A;
    border-radius:15px;
    position:relative;
}

.cloud-icon div::before{
    content:"";
    width:17px;
    height:17px;
    background:#18C49A;
    border-radius:50%;
    position:absolute;
    left:5px;
    top:-7px;
}

.cloud-icon div::after{
    content:"";
    width:13px;
    height:13px;
    background:#18C49A;
    border-radius:50%;
    position:absolute;
    right:4px;
    top:-5px;
}


/* Adobe */

.adobe-icon b{
    width:33px;
    height:33px;
    border:2px solid #18C49A;
    display:grid;
    place-items:center;
    color:#18C49A;
    font-size:20px;
    font-weight:800;
}


/* Curriculum */

.book-cover{
    width:29px;
    height:35px;
    border:2px solid #18C49A;
    border-radius:3px;
}

.curriculum-icon span{
    position:absolute;
    width:2px;
    height:25px;
    background:#18C49A;
    left:50%;
    transform:translateX(-50%);
}


/* LMS */

.lms-icon{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:5px;
}

.lms-icon span{
    width:7px;
    background:#18C49A;
    border-radius:3px 3px 0 0;
}

.lms-icon span:nth-child(1){
    height:16px;
}

.lms-icon span:nth-child(2){
    height:28px;
}

.lms-icon span:nth-child(3){
    height:21px;
}


/* Analytics */

.analytics-icon{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:5px;
}

.analytics-icon i{
    width:6px;
    border-radius:3px 3px 0 0;
    background:#18C49A;
}

.analytics-icon i:nth-child(1){
    height:14px;
}

.analytics-icon i:nth-child(2){
    height:24px;
}

.analytics-icon i:nth-child(3){
    height:18px;
}

.analytics-icon i:nth-child(4){
    height:32px;
}


.software-card h3{
    font-size:21px;
    line-height:1.25;
    color:#202124;
    margin:30px 0 13px;
}

.software-card > p{
    color:#697278;
    font-size:14px;
    line-height:1.7;
}

.software-card ul{
    list-style:none;
    padding:0;
    margin:22px 0;
}

.software-card li{
    color:#454545;
    font-size:13px;
    padding:7px 0 7px 18px;
    position:relative;
}

.software-card li::before{
    content:"";
    position:absolute;
    left:0;
    top:14px;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#18C49A;
}

.software-link{
    position:absolute;
    bottom:28px;
    left:30px;
    display:inline-flex;
    gap:9px;
    align-items:center;
    color:#0FA982;
    font-size:13px;
    font-weight:700;
}

.software-link span{
    transition:.2s ease;
}

.software-link:hover span{
    transform:translateX(5px);
}


/* =========================
   ECOSYSTEM
========================= */

.software-ecosystem-section{
    padding-top:110px;
    padding-bottom:110px;
}

.software-ecosystem{
    min-height:580px;
    background:#202124;
    border-radius:27px;
    overflow:hidden;
    display:grid;
    grid-template-columns:1fr 1fr;
    position:relative;
}

.software-ecosystem::before{
    content:"";
    position:absolute;
    width:550px;
    height:550px;
    border-radius:50%;
    border:1px solid rgba(24,196,154,.11);
    right:-100px;
    top:-120px;
}

.ecosystem-content{
    padding:75px 60px;
    position:relative;
    z-index:3;
}

.ecosystem-content h2{
    color:#fff;
    font-size:43px;
    line-height:1.1;
    letter-spacing:-1.5px;
    margin:18px 0 23px;
}

.ecosystem-content h2 span{
    display:block;
    color:#18C49A;
}

.ecosystem-content > p{
    max-width:500px;
    color:rgba(255,255,255,.62);
    line-height:1.75;
    font-size:15px;
}

.ecosystem-list{
    margin-top:35px;
}

.ecosystem-list div{
    display:flex;
    align-items:center;
    gap:15px;
    margin:14px 0;
}

.ecosystem-list span{
    font-size:11px;
    font-weight:800;
    color:#18C49A;
}

.ecosystem-list p{
    color:rgba(255,255,255,.72);
    font-size:13px;
}


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

.ecosystem-visual{
    position:relative;
    min-height:580px;
}

.ecosystem-core{
    position:absolute;
    width:150px;
    height:150px;
    border-radius:50%;
    border:1px solid rgba(24,196,154,.45);
    background:rgba(24,196,154,.06);
    display:grid;
    place-items:center;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    box-shadow:
        0 0 0 35px rgba(24,196,154,.025),
        0 0 80px rgba(24,196,154,.08);
    z-index:3;
}

.core-inner{
    width:105px;
    height:105px;
    border-radius:50%;
    background:#303438;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
}

.core-inner span{
    font-size:25px;
    color:#18C49A;
    font-weight:900;
}

.core-inner small{
    font-size:7px;
    color:rgba(255,255,255,.55);
    letter-spacing:1.5px;
}


.eco-node{
    position:absolute;
    width:90px;
    height:90px;
    border-radius:50%;
    border:1px solid rgba(24,196,154,.28);
    background:rgba(255,255,255,.04);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index:4;
}

.eco-node b{
    font-size:17px;
    color:#18C49A;
}

.eco-node span{
    margin-top:4px;
    color:rgba(255,255,255,.55);
    font-size:8px;
}

.node-one{
    left:13%;
    top:17%;
}

.node-two{
    right:12%;
    top:17%;
}

.node-three{
    left:12%;
    bottom:17%;
}

.node-four{
    right:12%;
    bottom:17%;
}

.eco-line{
    position:absolute;
    height:1px;
    background:rgba(24,196,154,.25);
    transform-origin:left center;
    width:175px;
    left:50%;
    top:50%;
    z-index:1;
}

.line-one{
    transform:rotate(205deg);
}

.line-two{
    transform:rotate(-25deg);
}

.line-three{
    transform:rotate(155deg);
}

.line-four{
    transform:rotate(25deg);
}


/* =========================
   APPROACH
========================= */

.software-approach-section{
    background:#F7FAF9;
}

.software-approach-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin-top:55px;
    border-top:1px solid #DDE7E4;
    border-bottom:1px solid #DDE7E4;
}

.software-approach-card{
    padding:35px 28px;
    border-right:1px solid #DDE7E4;
}

.software-approach-card:last-child{
    border-right:0;
}

.software-approach-card > span{
    color:#18C49A;
    font-size:12px;
    font-weight:800;
}

.software-approach-card h3{
    margin:20px 0 10px;
    font-size:20px;
}

.software-approach-card p{
    color:#697278;
    font-size:13px;
    line-height:1.7;
}


/* =========================
   SOFTWARE CTA
========================= */

.software-cta{
    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(24,196,154,.16),
            transparent 35%
        ),
        #202124;
}

.software-cta h2{
    color:#fff;
}

.software-cta h2 span{
    color:#18C49A;
}


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

@media(max-width:1050px){

    .software-hero-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .software-hero-content{
        margin:auto;
    }

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

    .software-hero-visual{
        min-height:420px;
    }

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

    .software-ecosystem{
        grid-template-columns:1fr;
    }

    .ecosystem-content{
        padding-bottom:20px;
    }

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

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

    .software-approach-card:nth-child(2){
        border-right:0;
    }

    .software-approach-card:nth-child(-n+2){
        border-bottom:1px solid #DDE7E4;
    }

}


@media(max-width:700px){

    .software-hero{
        min-height:auto;
        padding:125px 0 65px;
    }

    .software-hero h1{
        font-size:42px;
        letter-spacing:-2px;
    }

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

    .software-hero-visual{
        min-height:360px;
        transform:scale(.85);
        margin:-10px -35px -25px;
    }

    .software-floating-card{
        transform:scale(.85);
    }

    .software-float-one{
        left:-10px;
    }

    .software-float-two{
        right:-10px;
    }

    .software-principles{
        grid-template-columns:1fr;
    }

    .software-principle{
        border-right:0;
        border-bottom:1px solid #DDE7E4;
    }

    .software-principle:last-child{
        border-bottom:0;
    }

    .software-card-grid{
        grid-template-columns:1fr;
    }

    .software-card{
        min-height:450px;
    }

    .ecosystem-content{
        padding:45px 28px 10px;
    }

    .ecosystem-content h2{
        font-size:34px;
    }

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

    .ecosystem-core{
        width:125px;
        height:125px;
    }

    .core-inner{
        width:87px;
        height:87px;
    }

    .eco-node{
        width:72px;
        height:72px;
    }

    .eco-node b{
        font-size:14px;
    }

    .eco-node span{
        font-size:7px;
    }

    .eco-line{
        width:135px;
    }

    .software-approach-grid{
        grid-template-columns:1fr;
    }

    .software-approach-card{
        border-right:0;
        border-bottom:1px solid #DDE7E4;
    }

    .software-approach-card:last-child{
        border-bottom:0;
    }

}


@media(max-width:480px){

    .software-hero h1{
        font-size:37px;
    }

    .software-hero-buttons{
        flex-direction:column;
    }

    .software-hero-buttons .btn{
        width:100%;
        justify-content:center;
    }

    .software-hero-visual{
        transform:scale(.68);
        margin:-35px -60px -50px;
    }

    .software-card{
        padding:24px;
    }

    .software-link{
        left:24px;
    }

    .software-ecosystem{
        border-radius:18px;
    }

    .ecosystem-visual{
        min-height:370px;
    }

    .software-approach-card{
        padding:28px 22px;
    }

}

/* =========================================================
   TRAINING PAGE
========================================================= */


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

.training-hero{
    min-height:720px;
    padding:150px 0 90px;
    position:relative;
    overflow:hidden;
    color:#fff;

    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(24,196,154,.17),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #202124 0%,
            #303438 55%,
            #202124 100%
        );
}

.training-hero::before{
    content:"";
    position:absolute;
    width:580px;
    height:580px;
    right:-180px;
    top:30px;
    border:1px solid rgba(24,196,154,.11);
    border-radius:50%;
}

.training-hero::after{
    content:"";
    position:absolute;
    width:850px;
    height:850px;
    right:-340px;
    top:-100px;
    border:1px solid rgba(255,255,255,.035);
    border-radius:50%;
}

.training-hero-grid{
    min-height:500px;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:70px;
    position:relative;
    z-index:2;
}

.training-hero-content{
    max-width:650px;
}

.training-hero h1{
    font-size:clamp(45px,5vw,72px);
    line-height:1.03;
    letter-spacing:-3px;
    margin:18px 0 25px;
    font-weight:800;
}

.training-hero h1 span{
    display:block;
    color:#18C49A;
}

.training-hero-content > p{
    max-width:590px;
    color:rgba(255,255,255,.70);
    font-size:18px;
    line-height:1.75;
}

.training-hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:34px;
}


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

.training-hero-visual{
    min-height:450px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.training-orbit{
    position:absolute;
    border:1px solid rgba(24,196,154,.14);
    border-radius:50%;
}

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

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

.training-person-card{
    width:390px;
    min-height:220px;
    border-radius:20px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.12),
            rgba(255,255,255,.035)
        );
    border:1px solid rgba(255,255,255,.13);
    backdrop-filter:blur(15px);
    position:relative;
    z-index:3;
    padding:28px;
    display:flex;
    align-items:center;
    gap:25px;
    box-shadow:0 35px 80px rgba(0,0,0,.28);
}

.person-avatar{
    width:120px;
    height:160px;
    border-radius:60px 60px 20px 20px;
    background:#18C49A;
    position:relative;
    overflow:hidden;
    flex:none;
}

.person-head{
    width:45px;
    height:45px;
    background:#f1c5a6;
    border-radius:50%;
    position:absolute;
    top:25px;
    left:38px;
}

.person-head::before{
    content:"";
    position:absolute;
    width:49px;
    height:22px;
    background:#303438;
    border-radius:50% 50% 25% 25%;
    left:-2px;
    top:-5px;
}

.person-body{
    width:75px;
    height:75px;
    background:#202124;
    border-radius:40px 40px 0 0;
    position:absolute;
    bottom:-5px;
    left:22px;
}

.person-content{
    flex:1;
}

.person-content small{
    display:block;
    font-size:8px;
    letter-spacing:1.5px;
    color:rgba(255,255,255,.48);
    margin-bottom:9px;
}

.person-content strong{
    display:block;
    color:#fff;
    font-size:17px;
}

.progress-track{
    height:6px;
    background:rgba(255,255,255,.1);
    border-radius:10px;
    margin-top:20px;
    overflow:hidden;
}

.progress-track span{
    display:block;
    height:100%;
    width:82%;
    background:#18C49A;
    border-radius:10px;
}

.progress-meta{
    display:flex;
    justify-content:space-between;
    margin-top:8px;
    font-size:9px;
    color:rgba(255,255,255,.45);
}

.progress-meta b{
    color:#18C49A;
}


.training-floating-card{
    position:absolute;
    z-index:5;
    display:flex;
    align-items:center;
    gap:11px;
    min-width:175px;
    padding:13px 16px;
    background:rgba(255,255,255,.96);
    color:#303438;
    border-radius:12px;
    box-shadow:0 20px 50px rgba(0,0,0,.27);
}

.training-floating-card > span{
    width:34px;
    height:34px;
    border-radius:9px;
    display:grid;
    place-items:center;
    background:#E9FBF6;
    color:#0FA982;
    font-weight:800;
}

.training-floating-card strong{
    display:block;
    font-size:12px;
}

.training-floating-card small{
    display:block;
    font-size:9px;
    color:#7a8580;
    margin-top:3px;
}

.training-float-one{
    top:50px;
    left:0;
}

.training-float-two{
    right:-5px;
    bottom:45px;
}

.training-center-badge{
    position:absolute;
    z-index:6;
    width:72px;
    height:72px;
    border-radius:50%;
    background:#18C49A;
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    box-shadow:0 0 35px rgba(24,196,154,.3);
}

.training-center-badge span{
    font-size:8px;
    letter-spacing:1px;
}

.training-center-badge strong{
    font-size:12px;
    letter-spacing:1px;
}


/* =========================
   INTRO
========================= */

.training-intro{
    background:#fff;
}

.training-intro .section-heading{
    max-width:800px;
}

.training-intro .section-heading p{
    margin-left:auto;
    margin-right:auto;
}

.training-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin-top:60px;
    border-top:1px solid #DDE7E4;
    border-bottom:1px solid #DDE7E4;
}

.training-stat{
    min-height:125px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    border-right:1px solid #DDE7E4;
}

.training-stat:last-child{
    border-right:0;
}

.training-stat strong{
    color:#18C49A;
    font-size:30px;
    font-weight:800;
}

.training-stat span{
    color:#697278;
    font-size:13px;
    line-height:1.5;
    font-weight:600;
}


/* =========================
   TRAINING PROGRAMS
========================= */

.training-programs{
    background:#F7FAF9;
}

.training-program-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    margin-top:55px;
}

.training-program-card{
    background:#fff;
    border:1px solid #DDE7E4;
    border-radius:18px;
    padding:30px;
    min-height:480px;
    position:relative;
    overflow:hidden;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.training-program-card:hover{
    transform:translateY(-7px);
    border-color:rgba(24,196,154,.35);
    box-shadow:0 22px 55px rgba(32,33,36,.08);
}

.training-program-card::before{
    content:"";
    width:135px;
    height:135px;
    position:absolute;
    right:-60px;
    top:-60px;
    border-radius:50%;
    background:#E9FBF6;
    transition:.3s ease;
}

.training-program-card:hover::before{
    transform:scale(1.2);
}

.training-card-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    position:relative;
    z-index:2;
}

.training-number{
    font-size:12px;
    color:#18C49A;
    font-weight:800;
    letter-spacing:1px;
}

.training-icon{
    width:62px;
    height:62px;
    border-radius:15px;
    background:#F1FCF8;
    border:1px solid #DDEFE9;
    position:relative;
    display:grid;
    place-items:center;
}


/* Educator Icon */

.educator-icon .board{
    width:32px;
    height:23px;
    border:2px solid #18C49A;
    border-radius:3px;
    position:absolute;
    top:12px;
}

.educator-icon .person{
    width:13px;
    height:13px;
    border:2px solid #18C49A;
    border-radius:50%;
    position:absolute;
    bottom:10px;
}

.educator-icon .person::after{
    content:"";
    width:22px;
    height:9px;
    border:2px solid #18C49A;
    border-bottom:0;
    border-radius:15px 15px 0 0;
    position:absolute;
    top:11px;
    left:50%;
    transform:translateX(-50%);
}


/* Literacy */

.literacy-icon{
    display:flex;
    gap:5px;
}

.literacy-icon span{
    width:15px;
    height:25px;
    display:grid;
    place-items:center;
    border:1px solid #18C49A;
    border-radius:4px;
    color:#18C49A;
    font-size:10px;
    font-weight:800;
}

.literacy-icon span:nth-child(2){
    margin-top:8px;
}

.literacy-icon span:nth-child(3){
    margin-top:3px;
}


/* Design */

.design-icon .bulb{
    width:25px;
    height:25px;
    border:2px solid #18C49A;
    border-radius:50%;
    position:relative;
}

.design-icon .bulb::before{
    content:"";
    width:11px;
    height:12px;
    border-left:2px solid #18C49A;
    border-bottom:2px solid #18C49A;
    position:absolute;
    left:5px;
    bottom:-8px;
}

.design-icon .bulb::after{
    content:"";
    width:5px;
    height:5px;
    background:#18C49A;
    border-radius:50%;
    position:absolute;
    top:-8px;
    left:8px;
}


/* Communication */

.communication-icon div{
    width:35px;
    height:25px;
    border:2px solid #18C49A;
    border-radius:8px;
}

.communication-icon div::after{
    content:"";
    width:7px;
    height:7px;
    border-left:2px solid #18C49A;
    border-bottom:2px solid #18C49A;
    position:absolute;
    left:12px;
    bottom:17px;
    transform:skew(-25deg);
}

.communication-icon span{
    position:absolute;
    width:4px;
    height:4px;
    border-radius:50%;
    background:#18C49A;
    top:29px;
}

.communication-icon span:nth-child(2){
    left:25px;
}

.communication-icon span:nth-child(3){
    left:34px;
}


/* Coding */

.coding-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:3px;
    color:#18C49A;
}

.coding-icon span{
    font-size:22px;
    font-weight:800;
}

.coding-icon b{
    font-size:16px;
}


/* Trainer */

.trainer-icon > div{
    width:29px;
    height:29px;
    border:2px solid #18C49A;
    border-radius:50%;
}

.trainer-icon > div::after{
    content:"";
    position:absolute;
    width:34px;
    height:15px;
    border:2px solid #18C49A;
    border-bottom:0;
    border-radius:20px 20px 0 0;
    bottom:11px;
}

.trainer-icon > span{
    position:absolute;
    right:10px;
    top:10px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#18C49A;
    color:#fff;
    font-size:11px;
    display:grid;
    place-items:center;
}


.training-program-card h3{
    font-size:21px;
    line-height:1.25;
    margin:30px 0 13px;
    color:#202124;
}

.training-program-card > p{
    font-size:14px;
    line-height:1.7;
    color:#697278;
}

.training-program-card ul{
    list-style:none;
    padding:0;
    margin:22px 0;
}

.training-program-card li{
    position:relative;
    padding:7px 0 7px 18px;
    color:#454545;
    font-size:13px;
}

.training-program-card li::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:#18C49A;
    position:absolute;
    left:0;
    top:14px;
}

.training-link{
    position:absolute;
    left:30px;
    bottom:28px;
    display:inline-flex;
    gap:9px;
    align-items:center;
    color:#0FA982;
    font-size:13px;
    font-weight:700;
}

.training-link span{
    transition:.2s ease;
}

.training-link:hover span{
    transform:translateX(5px);
}


/* =========================
   TRAINING EXPERIENCE
========================= */

.training-experience{
    padding-top:110px;
    padding-bottom:110px;
}

.training-experience-box{
    min-height:590px;
    border-radius:28px;
    overflow:hidden;
    background:#202124;
    display:grid;
    grid-template-columns:1fr 1fr;
    position:relative;
}

.training-experience-box::before{
    content:"";
    position:absolute;
    width:550px;
    height:550px;
    border-radius:50%;
    border:1px solid rgba(24,196,154,.10);
    right:-120px;
    top:-120px;
}

.experience-content{
    padding:75px 60px;
    position:relative;
    z-index:3;
}

.experience-content h2{
    color:#fff;
    font-size:45px;
    line-height:1.08;
    letter-spacing:-1.5px;
    margin:18px 0 22px;
}

.experience-content h2 span{
    display:block;
    color:#18C49A;
}

.experience-content > p{
    max-width:500px;
    color:rgba(255,255,255,.62);
    font-size:15px;
    line-height:1.75;
}

.experience-list{
    margin-top:35px;
}

.experience-list div{
    display:flex;
    gap:16px;
    align-items:center;
    margin:14px 0;
}

.experience-list span{
    color:#18C49A;
    font-size:11px;
    font-weight:800;
}

.experience-list p{
    color:rgba(255,255,255,.72);
    font-size:13px;
}


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

.experience-visual{
    min-height:590px;
    position:relative;
}

.experience-circle{
    width:260px;
    height:260px;
    border-radius:50%;
    border:1px solid rgba(24,196,154,.35);
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    display:grid;
    place-items:center;
    box-shadow:
        0 0 0 40px rgba(24,196,154,.025),
        0 0 0 80px rgba(24,196,154,.015);
}

.experience-core{
    width:145px;
    height:145px;
    border-radius:50%;
    background:#303438;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.experience-core small{
    color:rgba(255,255,255,.5);
    font-size:8px;
    letter-spacing:1.5px;
}

.experience-core strong{
    color:#18C49A;
    font-size:32px;
    margin:4px 0;
}

.experience-node{
    position:absolute;
    width:85px;
    height:85px;
    border-radius:50%;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(24,196,154,.28);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    z-index:4;
}

.experience-node b{
    color:#18C49A;
    font-size:12px;
}

.experience-node span{
    color:rgba(255,255,255,.58);
    font-size:9px;
    margin-top:5px;
}

.node-learn{
    top:12%;
    left:16%;
}

.node-practice{
    top:12%;
    right:13%;
}

.node-apply{
    bottom:13%;
    left:15%;
}

.node-grow{
    bottom:13%;
    right:13%;
}


/* =========================
   AUDIENCE
========================= */

.training-audience{
    background:#F7FAF9;
}

.training-audience .section-heading{
    max-width:780px;
}

.training-audience .section-heading p{
    margin-left:auto;
    margin-right:auto;
}

.audience-grid{
    margin-top:55px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid #DDE7E4;
    border-bottom:1px solid #DDE7E4;
}

.audience-card{
    padding:35px 28px;
    border-right:1px solid #DDE7E4;
}

.audience-card:last-child{
    border-right:0;
}

.audience-card > span{
    color:#18C49A;
    font-size:12px;
    font-weight:800;
}

.audience-card h3{
    margin:20px 0 10px;
    font-size:19px;
}

.audience-card p{
    color:#697278;
    font-size:13px;
    line-height:1.7;
}


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

.training-process{
    background:#fff;
}

.training-process-grid{
    margin-top:55px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid #DDE7E4;
    border-bottom:1px solid #DDE7E4;
}

.training-process-card{
    padding:35px 28px;
    border-right:1px solid #DDE7E4;
}

.training-process-card:last-child{
    border-right:0;
}

.training-process-card > span{
    color:#18C49A;
    font-size:12px;
    font-weight:800;
}

.training-process-card h3{
    margin:20px 0 10px;
    font-size:20px;
}

.training-process-card p{
    color:#697278;
    font-size:13px;
    line-height:1.7;
}


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

.training-cta{
    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(24,196,154,.16),
            transparent 35%
        ),
        #202124;
}

.training-cta h2{
    color:#fff;
}

.training-cta h2 span{
    color:#18C49A;
}


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

@media(max-width:1050px){

    .training-hero-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .training-hero-content{
        margin:auto;
    }

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

    .training-hero-visual{
        min-height:420px;
    }

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

    .training-experience-box{
        grid-template-columns:1fr;
    }

    .experience-content{
        padding-bottom:20px;
    }

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

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

    .audience-card:nth-child(2),
    .training-process-card:nth-child(2){
        border-right:0;
    }

    .audience-card:nth-child(-n+2),
    .training-process-card:nth-child(-n+2){
        border-bottom:1px solid #DDE7E4;
    }

}


@media(max-width:700px){

    .training-hero{
        min-height:auto;
        padding:125px 0 65px;
    }

    .training-hero h1{
        font-size:42px;
        letter-spacing:-2px;
    }

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

    .training-hero-visual{
        min-height:370px;
        transform:scale(.82);
        margin:-10px -35px -30px;
    }

    .training-floating-card{
        transform:scale(.85);
    }

    .training-person-card{
        width:360px;
    }

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

    .training-stat{
        min-height:105px;
    }

    .training-stat:nth-child(2){
        border-right:0;
    }

    .training-stat:nth-child(-n+2){
        border-bottom:1px solid #DDE7E4;
    }

    .training-program-grid{
        grid-template-columns:1fr;
    }

    .training-program-card{
        min-height:450px;
    }

    .experience-content{
        padding:45px 28px 10px;
    }

    .experience-content h2{
        font-size:34px;
    }

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

    .experience-circle{
        width:220px;
        height:220px;
    }

    .experience-core{
        width:120px;
        height:120px;
    }

    .experience-node{
        width:70px;
        height:70px;
    }

    .experience-node b{
        font-size:10px;
    }

    .experience-node span{
        font-size:7px;
    }

    .audience-grid,
    .training-process-grid{
        grid-template-columns:1fr;
    }

    .audience-card,
    .training-process-card{
        border-right:0;
        border-bottom:1px solid #DDE7E4;
    }

    .audience-card:last-child,
    .training-process-card:last-child{
        border-bottom:0;
    }

}


@media(max-width:480px){

    .training-hero h1{
        font-size:37px;
    }

    .training-hero-buttons{
        flex-direction:column;
    }

    .training-hero-buttons .btn{
        width:100%;
        justify-content:center;
    }

    .training-hero-visual{
        transform:scale(.68);
        margin:-40px -65px -55px;
    }

    .training-person-card{
        width:350px;
    }

    .training-stats{
        margin-top:45px;
    }

    .training-stat{
        gap:8px;
    }

    .training-stat strong{
        font-size:24px;
    }

    .training-stat span{
        font-size:10px;
    }

    .training-program-card{
        padding:24px;
    }

    .training-link{
        left:24px;
    }

    .training-experience-box{
        border-radius:18px;
    }

    .experience-visual{
        min-height:370px;
    }

    .experience-circle{
        width:190px;
        height:190px;
    }

    .experience-core{
        width:105px;
        height:105px;
    }

    .node-learn{
        left:7%;
    }

    .node-practice{
        right:7%;
    }

    .node-apply{
        left:7%;
    }

    .node-grow{
        right:7%;
    }

}

/* =========================================================
   PARTNERS PAGE
========================================================= */


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

.partners-hero{
    min-height:720px;
    padding:150px 0 90px;
    position:relative;
    overflow:hidden;
    color:#fff;

    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(24,196,154,.17),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #202124 0%,
            #303438 55%,
            #202124 100%
        );
}

.partners-hero::before{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    right:-220px;
    top:20px;
    border:1px solid rgba(24,196,154,.10);
    border-radius:50%;
}

.partners-hero::after{
    content:"";
    position:absolute;
    width:850px;
    height:850px;
    right:-350px;
    top:-100px;
    border:1px solid rgba(255,255,255,.035);
    border-radius:50%;
}

.partners-hero-grid{
    min-height:500px;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:70px;
    position:relative;
    z-index:2;
}

.partners-hero-content{
    max-width:650px;
}

.partners-hero h1{
    font-size:clamp(45px,5vw,72px);
    line-height:1.03;
    letter-spacing:-3px;
    margin:18px 0 25px;
    font-weight:800;
}

.partners-hero h1 span{
    display:block;
    color:#18C49A;
}

.partners-hero-content > p{
    max-width:600px;
    color:rgba(255,255,255,.70);
    font-size:18px;
    line-height:1.75;
}

.partners-hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:34px;
}


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

.partners-hero-visual{
    min-height:480px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.partner-orbit{
    position:absolute;
    border:1px solid rgba(24,196,154,.15);
    border-radius:50%;
}

.orbit-main{
    width:390px;
    height:390px;
}

.orbit-small{
    width:285px;
    height:285px;
    border-color:rgba(255,255,255,.07);
}

.partner-core{
    width:155px;
    height:155px;
    border-radius:50%;
    border:1px solid rgba(24,196,154,.5);
    background:rgba(24,196,154,.06);
    display:grid;
    place-items:center;
    position:relative;
    z-index:4;
    box-shadow:
        0 0 0 35px rgba(24,196,154,.025),
        0 0 70px rgba(24,196,154,.09);
}

.partner-core-inner{
    width:110px;
    height:110px;
    border-radius:50%;
    background:#303438;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
}

.partner-core-inner span{
    font-size:28px;
    font-weight:900;
    color:#18C49A;
}

.partner-core-inner small{
    font-size:7px;
    letter-spacing:1.5px;
    color:rgba(255,255,255,.48);
}

.partner-node{
    position:absolute;
    z-index:5;
    width:88px;
    height:88px;
    border-radius:50%;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(24,196,154,.28);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
}

.partner-node strong{
    color:#18C49A;
    font-size:16px;
}

.partner-node span{
    color:rgba(255,255,255,.52);
    font-size:8px;
    margin-top:5px;
}

.partner-node-one{
    left:8%;
    top:13%;
}

.partner-node-two{
    right:7%;
    top:13%;
}

.partner-node-three{
    left:8%;
    bottom:13%;
}

.partner-node-four{
    right:7%;
    bottom:13%;
}

.partner-connector{
    position:absolute;
    width:170px;
    height:1px;
    left:50%;
    top:50%;
    background:rgba(24,196,154,.22);
    transform-origin:left center;
    z-index:1;
}

.connector-one{
    transform:rotate(205deg);
}

.connector-two{
    transform:rotate(-25deg);
}

.connector-three{
    transform:rotate(155deg);
}

.connector-four{
    transform:rotate(25deg);
}


/* =========================
   PARTNERS INTRO
========================= */

.partners-intro{
    background:#fff;
}

.partners-intro .section-heading{
    max-width:800px;
}

.partners-intro .section-heading p{
    margin-left:auto;
    margin-right:auto;
}

.partner-values{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    margin-top:60px;
    border-top:1px solid #DDE7E4;
    border-bottom:1px solid #DDE7E4;
}

.partner-value{
    padding:35px;
    display:flex;
    gap:18px;
    border-right:1px solid #DDE7E4;
}

.partner-value:last-child{
    border-right:0;
}

.partner-value > span{
    color:#18C49A;
    font-size:12px;
    font-weight:800;
}

.partner-value h3{
    margin:0 0 8px;
    font-size:17px;
}

.partner-value p{
    margin:0;
    color:#697278;
    font-size:13px;
    line-height:1.7;
}


/* =========================
   PARTNER TYPES
========================= */

.partner-types-section{
    background:#F7FAF9;
}

.partner-type-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    margin-top:55px;
}

.partner-type-card{
    background:#fff;
    border:1px solid #DDE7E4;
    border-radius:18px;
    padding:30px;
    min-height:475px;
    position:relative;
    overflow:hidden;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.partner-type-card:hover{
    transform:translateY(-7px);
    border-color:rgba(24,196,154,.35);
    box-shadow:0 22px 55px rgba(32,33,36,.08);
}

.partner-type-card::before{
    content:"";
    width:135px;
    height:135px;
    position:absolute;
    right:-60px;
    top:-60px;
    border-radius:50%;
    background:#E9FBF6;
    transition:.3s ease;
}

.partner-type-card:hover::before{
    transform:scale(1.2);
}

.partner-card-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    position:relative;
    z-index:2;
}

.partner-number{
    color:#18C49A;
    font-size:12px;
    font-weight:800;
    letter-spacing:1px;
}

.partner-icon{
    width:62px;
    height:62px;
    border-radius:15px;
    background:#F1FCF8;
    border:1px solid #DDEFE9;
    position:relative;
    display:grid;
    place-items:center;
}


/* Technology */

.technology-partner-icon div{
    width:34px;
    height:27px;
    border:2px solid #18C49A;
    border-radius:4px;
}

.technology-partner-icon div::after{
    content:"";
    position:absolute;
    width:12px;
    height:3px;
    background:#18C49A;
    bottom:13px;
}

.technology-partner-icon span{
    position:absolute;
    width:5px;
    height:5px;
    background:#18C49A;
    border-radius:50%;
}

.technology-partner-icon span:nth-child(2){
    left:14px;
    bottom:13px;
}

.technology-partner-icon span:nth-child(3){
    right:14px;
    bottom:13px;
}


/* Education */

.education-partner-icon .book{
    width:32px;
    height:34px;
    border:2px solid #18C49A;
    border-radius:4px;
}

.education-partner-icon span{
    position:absolute;
    width:2px;
    height:26px;
    background:#18C49A;
}


/* Content */

.content-partner-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
}

.content-partner-icon span{
    width:6px;
    border-radius:4px;
    background:#18C49A;
}

.content-partner-icon span:nth-child(1){
    height:18px;
}

.content-partner-icon span:nth-child(2){
    height:31px;
}

.content-partner-icon span:nth-child(3){
    height:23px;
}


/* Training */

.training-partner-icon > span{
    width:30px;
    height:30px;
    border-radius:50%;
    background:#18C49A;
    color:#fff;
    display:grid;
    place-items:center;
    font-size:14px;
}

.training-partner-icon div{
    position:absolute;
    width:35px;
    height:14px;
    border:2px solid #18C49A;
    border-bottom:0;
    border-radius:20px 20px 0 0;
    bottom:12px;
}


/* Implementation */

.implementation-icon span{
    position:absolute;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#18C49A;
}

.implementation-icon span:nth-child(1){
    left:13px;
    top:26px;
}

.implementation-icon span:nth-child(2){
    right:13px;
    top:16px;
}

.implementation-icon span:nth-child(3){
    right:15px;
    bottom:12px;
}

.implementation-icon::before,
.implementation-icon::after{
    content:"";
    position:absolute;
    height:2px;
    width:24px;
    background:#18C49A;
    left:20px;
    top:30px;
    transform-origin:left;
}

.implementation-icon::before{
    transform:rotate(-24deg);
}

.implementation-icon::after{
    transform:rotate(27deg);
}


/* Strategic */

.strategic-icon div{
    width:34px;
    height:34px;
    border:2px solid #18C49A;
    border-radius:50%;
}

.strategic-icon div::after{
    content:"";
    width:9px;
    height:9px;
    background:#18C49A;
    border-radius:50%;
    position:absolute;
    top:24px;
    left:24px;
}

.strategic-icon span{
    position:absolute;
    width:2px;
    height:13px;
    background:#18C49A;
    transform:rotate(45deg);
    top:12px;
    right:13px;
}


.partner-type-card h3{
    font-size:21px;
    line-height:1.25;
    color:#202124;
    margin:30px 0 13px;
}

.partner-type-card > p{
    color:#697278;
    font-size:14px;
    line-height:1.7;
}

.partner-type-card ul{
    list-style:none;
    padding:0;
    margin:22px 0;
}

.partner-type-card li{
    position:relative;
    padding:7px 0 7px 18px;
    color:#454545;
    font-size:13px;
}

.partner-type-card li::before{
    content:"";
    position:absolute;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#18C49A;
    left:0;
    top:14px;
}

.partner-link{
    position:absolute;
    left:30px;
    bottom:28px;
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:#0FA982;
    font-size:13px;
    font-weight:700;
}

.partner-link span{
    transition:.2s ease;
}

.partner-link:hover span{
    transform:translateX(5px);
}


/* =========================
   PARTNERSHIP MODEL
========================= */

.partnership-model{
    background:#fff;
}

.partnership-model-box{
    min-height:570px;
    border-radius:27px;
    overflow:hidden;
    display:grid;
    grid-template-columns:1fr 1fr;
    background:#202124;
    position:relative;
}

.partnership-model-box::before{
    content:"";
    position:absolute;
    width:550px;
    height:550px;
    border-radius:50%;
    border:1px solid rgba(24,196,154,.10);
    right:-120px;
    top:-130px;
}

.partnership-content{
    padding:75px 60px;
    position:relative;
    z-index:3;
}

.partnership-content h2{
    color:#fff;
    font-size:43px;
    line-height:1.08;
    letter-spacing:-1.5px;
    margin:18px 0 22px;
}

.partnership-content h2 span{
    display:block;
    color:#18C49A;
}

.partnership-content > p{
    max-width:500px;
    color:rgba(255,255,255,.62);
    font-size:15px;
    line-height:1.75;
    margin-bottom:32px;
}

.partnership-steps{
    padding:70px 60px;
    position:relative;
    z-index:3;
}

.partnership-step{
    display:flex;
    gap:20px;
    padding:20px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.partnership-step:last-child{
    border-bottom:0;
}

.partnership-step > span{
    color:#18C49A;
    font-size:12px;
    font-weight:800;
}

.partnership-step h3{
    color:#fff;
    font-size:17px;
    margin:0 0 5px;
}

.partnership-step p{
    color:rgba(255,255,255,.52);
    font-size:12px;
    line-height:1.6;
}


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

.partner-benefits{
    background:#F7FAF9;
}

.partner-benefits .section-heading{
    max-width:760px;
}

.partner-benefits .section-heading p{
    margin-left:auto;
    margin-right:auto;
}

.partner-benefit-grid{
    margin-top:55px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.partner-benefit-card{
    background:#fff;
    border:1px solid #DDE7E4;
    border-radius:15px;
    padding:28px;
    min-height:220px;
    transition:.25s ease;
}

.partner-benefit-card:hover{
    transform:translateY(-5px);
    border-color:rgba(24,196,154,.3);
    box-shadow:0 15px 35px rgba(32,33,36,.06);
}

.benefit-icon{
    color:#18C49A;
    font-size:12px;
    font-weight:800;
}

.partner-benefit-card h3{
    font-size:17px;
    margin:20px 0 10px;
}

.partner-benefit-card p{
    color:#697278;
    font-size:13px;
    line-height:1.7;
}


/* =========================
   ECOSYSTEM SHOWCASE
========================= */

.ecosystem-showcase{
    background:#fff;
}

.ecosystem-showcase-box{
    min-height:570px;
    border-radius:27px;
    background:#202124;
    overflow:hidden;
    display:grid;
    grid-template-columns:1fr 1fr;
    position:relative;
}

.ecosystem-showcase-box::before{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    border-radius:50%;
    border:1px solid rgba(24,196,154,.08);
    right:-180px;
    top:-150px;
}

.ecosystem-showcase-content{
    padding:75px 60px;
    position:relative;
    z-index:3;
}

.ecosystem-showcase-content h2{
    color:#fff;
    font-size:45px;
    line-height:1.08;
    margin:18px 0 22px;
}

.ecosystem-showcase-content h2 span{
    display:block;
    color:#18C49A;
}

.ecosystem-showcase-content p{
    max-width:500px;
    color:rgba(255,255,255,.62);
    font-size:15px;
    line-height:1.75;
}


/* Ecosystem visual */

.ecosystem-showcase-visual{
    min-height:570px;
    position:relative;
}

.ecosystem-ring{
    position:absolute;
    border:1px solid rgba(24,196,154,.17);
    border-radius:50%;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

.ring-large{
    width:400px;
    height:400px;
}

.ring-medium{
    width:275px;
    height:275px;
    border-color:rgba(255,255,255,.08);
}

.ecosystem-center{
    width:125px;
    height:125px;
    border-radius:50%;
    background:#303438;
    border:1px solid rgba(24,196,154,.4);
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index:3;
}

.ecosystem-center strong{
    color:#18C49A;
    font-size:27px;
    font-weight:900;
}

.ecosystem-center small{
    color:rgba(255,255,255,.45);
    font-size:7px;
    letter-spacing:1.5px;
}

.ecosystem-pill{
    position:absolute;
    z-index:4;
    padding:10px 16px;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(24,196,154,.25);
    border-radius:30px;
    color:rgba(255,255,255,.75);
    font-size:11px;
    backdrop-filter:blur(10px);
}

.pill-hardware{
    top:16%;
    left:10%;
}

.pill-software{
    top:16%;
    right:10%;
}

.pill-training{
    bottom:16%;
    left:10%;
}

.pill-education{
    bottom:16%;
    right:10%;
}


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

.partners-cta{
    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(24,196,154,.16),
            transparent 35%
        ),
        #202124;
}

.partners-cta h2{
    color:#fff;
}

.partners-cta h2 span{
    color:#18C49A;
}


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

@media(max-width:1050px){

    .partners-hero-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .partners-hero-content{
        margin:auto;
    }

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

    .partners-hero-visual{
        min-height:420px;
    }

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

    .partnership-model-box,
    .ecosystem-showcase-box{
        grid-template-columns:1fr;
    }

    .partnership-content,
    .ecosystem-showcase-content{
        padding-bottom:20px;
    }

    .partnership-steps{
        padding-top:20px;
    }

    .ecosystem-showcase-visual{
        min-height:450px;
    }

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

}


@media(max-width:700px){

    .partners-hero{
        min-height:auto;
        padding:125px 0 65px;
    }

    .partners-hero h1{
        font-size:42px;
        letter-spacing:-2px;
    }

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

    .partners-hero-visual{
        min-height:370px;
        transform:scale(.82);
        margin:-10px -35px -30px;
    }

    .partner-values{
        grid-template-columns:1fr;
    }

    .partner-value{
        border-right:0;
        border-bottom:1px solid #DDE7E4;
    }

    .partner-value:last-child{
        border-bottom:0;
    }

    .partner-type-grid{
        grid-template-columns:1fr;
    }

    .partner-type-card{
        min-height:450px;
    }

    .partnership-content,
    .ecosystem-showcase-content{
        padding:45px 28px 10px;
    }

    .partnership-content h2,
    .ecosystem-showcase-content h2{
        font-size:34px;
    }

    .partnership-steps{
        padding:20px 28px 45px;
    }

    .partner-benefit-grid{
        grid-template-columns:1fr;
    }

    .ecosystem-showcase-visual{
        min-height:390px;
    }

    .ring-large{
        width:300px;
        height:300px;
    }

    .ring-medium{
        width:215px;
        height:215px;
    }

    .ecosystem-center{
        width:105px;
        height:105px;
    }

    .ecosystem-pill{
        font-size:9px;
        padding:8px 12px;
    }

}


@media(max-width:480px){

    .partners-hero h1{
        font-size:37px;
    }

    .partners-hero-buttons{
        flex-direction:column;
    }

    .partners-hero-buttons .btn{
        width:100%;
        justify-content:center;
    }

    .partners-hero-visual{
        transform:scale(.68);
        margin:-40px -65px -55px;
    }

    .partner-type-card{
        padding:24px;
    }

    .partner-link{
        left:24px;
    }

    .partnership-model-box,
    .ecosystem-showcase-box{
        border-radius:18px;
    }

    .ecosystem-showcase-visual{
        min-height:350px;
    }

    .ring-large{
        width:255px;
        height:255px;
    }

    .ring-medium{
        width:185px;
        height:185px;
    }

    .ecosystem-center{
        width:90px;
        height:90px;
    }

    .ecosystem-center strong{
        font-size:22px;
    }

    .pill-hardware{
        left:4%;
    }

    .pill-software{
        right:4%;
    }

    .pill-training{
        left:4%;
    }

    .pill-education{
        right:4%;
    }

}

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


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

.contact-hero{
    min-height:650px;
    padding:145px 0 85px;
    background:
        radial-gradient(
            circle at 78% 40%,
            rgba(24,196,154,.16),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #202124,
            #303438 55%,
            #202124
        );
    color:#fff;
    position:relative;
    overflow:hidden;
}

.contact-hero::before{
    content:"";
    position:absolute;
    width:650px;
    height:650px;
    border:1px solid rgba(24,196,154,.10);
    border-radius:50%;
    right:-260px;
    top:-100px;
}

.contact-hero::after{
    content:"";
    position:absolute;
    width:850px;
    height:850px;
    border:1px solid rgba(255,255,255,.035);
    border-radius:50%;
    right:-350px;
    top:-200px;
}

.contact-hero-grid{
    min-height:450px;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:80px;
    align-items:center;
    position:relative;
    z-index:2;
}

.contact-hero-content{
    max-width:680px;
}

.contact-hero h1{
    font-size:clamp(48px,5.5vw,76px);
    line-height:1.02;
    letter-spacing:-3px;
    margin:18px 0 25px;
    font-weight:800;
}

.contact-hero h1 span{
    display:block;
    color:#18C49A;
}

.contact-hero-content > p{
    max-width:610px;
    color:rgba(255,255,255,.70);
    font-size:18px;
    line-height:1.75;
}

.contact-quick-links{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top:38px;
}

.contact-quick-link{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 17px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:12px;
    background:rgba(255,255,255,.04);
    color:#fff;
    transition:.25s ease;
}

.contact-quick-link:hover{
    border-color:rgba(24,196,154,.45);
    background:rgba(24,196,154,.07);
}

.quick-icon{
    width:36px;
    height:36px;
    border-radius:9px;
    background:rgba(24,196,154,.12);
    color:#18C49A;
    display:grid;
    place-items:center;
    font-size:14px;
    font-weight:800;
}

.contact-quick-link small{
    display:block;
    color:rgba(255,255,255,.42);
    font-size:8px;
    letter-spacing:1px;
    margin-bottom:4px;
}

.contact-quick-link strong{
    display:block;
    font-size:12px;
}


/* =========================
   CONTACT HERO CARD
========================= */

.contact-hero-card{
    min-height:380px;
    padding:35px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:22px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.035)
        );
    backdrop-filter:blur(14px);
    position:relative;
    overflow:hidden;
    box-shadow:0 35px 80px rgba(0,0,0,.25);
}

.contact-card-glow{
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(24,196,154,.10);
    filter:blur(3px);
    right:-70px;
    top:-70px;
}

.contact-card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;
    z-index:2;
}

.contact-card-top span{
    font-size:9px;
    letter-spacing:1.5px;
    color:rgba(255,255,255,.45);
}

.contact-card-dot{
    width:8px;
    height:8px;
    background:#18C49A;
    border-radius:50%;
    box-shadow:0 0 15px rgba(24,196,154,.6);
}

.contact-hero-card h2{
    position:relative;
    z-index:2;
    font-size:35px;
    line-height:1.1;
    margin:45px 0 15px;
}

.contact-hero-card h2 span{
    color:#18C49A;
}

.contact-hero-card > p{
    color:rgba(255,255,255,.57);
    font-size:13px;
    line-height:1.7;
    max-width:390px;
}

.contact-card-lines{
    margin-top:30px;
}

.contact-card-lines div{
    display:flex;
    align-items:center;
    gap:16px;
    padding:13px 0;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.contact-card-lines div:last-child{
    border-bottom:0;
}

.contact-card-lines span{
    color:#18C49A;
    font-size:10px;
    font-weight:800;
}

.contact-card-lines p{
    color:rgba(255,255,255,.67);
    font-size:12px;
}


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

.contact-form-section{
    background:#fff;
}

.contact-main-grid{
    display:grid;
    grid-template-columns:1.25fr .75fr;
    gap:75px;
    align-items:start;
}

.contact-form-wrapper .section-heading{
    max-width:650px;
}

.contact-form{
    margin-top:40px;
}

.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.form-group{
    margin-bottom:22px;
}

.form-group label{
    display:block;
    margin-bottom:8px;
    color:#303438;
    font-size:12px;
    font-weight:700;
}

.form-group label span{
    color:#18C49A;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    border:1px solid #DDE7E4;
    border-radius:9px;
    background:#F7FAF9;
    padding:14px 15px;
    font-family:inherit;
    font-size:13px;
    color:#303438;
    outline:none;
    transition:.2s ease;
}

.form-group input,
.form-group select{
    height:49px;
}

.form-group textarea{
    resize:vertical;
    min-height:140px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:#18C49A;
    background:#fff;
    box-shadow:0 0 0 3px rgba(24,196,154,.08);
}

.form-group input::placeholder,
.form-group textarea::placeholder{
    color:#9ba5a1;
}

.form-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    margin-top:5px;
}

.form-bottom p{
    color:#8a9490;
    font-size:10px;
    line-height:1.6;
    max-width:300px;
}


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

.contact-info-panel{
    padding:35px;
    background:#F7FAF9;
    border:1px solid #DDE7E4;
    border-radius:18px;
    position:sticky;
    top:105px;
}

.contact-info-panel > h3{
    font-size:28px;
    line-height:1.1;
    margin:18px 0 35px;
}

.contact-info-panel > h3 span{
    color:#18C49A;
}

.contact-info-list{
    display:flex;
    flex-direction:column;
    gap:25px;
}

.contact-info-item{
    display:flex;
    align-items:flex-start;
    gap:15px;
}

.info-icon{
    flex:none;
    width:38px;
    height:38px;
    border-radius:10px;
    background:#E9FBF6;
    color:#0FA982;
    display:grid;
    place-items:center;
    font-weight:800;
    font-size:13px;
}

.contact-info-item small{
    display:block;
    color:#9aa39f;
    font-size:9px;
    letter-spacing:.7px;
    margin-bottom:5px;
}

.contact-info-item a{
    color:#303438;
    font-size:13px;
    font-weight:700;
}

.contact-info-item p{
    color:#697278;
    font-size:12px;
    line-height:1.7;
}

.contact-info-divider{
    height:1px;
    background:#DDE7E4;
    margin:30px 0 25px;
}

.contact-social-title{
    color:#8a9490;
    font-size:9px;
    letter-spacing:1px;
    font-weight:700;
}

.contact-social-links{
    display:flex;
    gap:8px;
    margin-top:12px;
}

.contact-social-links a{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border:1px solid #DDE7E4;
    border-radius:9px;
    color:#303438;
    font-size:11px;
    font-weight:800;
    background:#fff;
    transition:.2s ease;
}

.contact-social-links a:hover{
    color:#0FA982;
    border-color:#18C49A;
}

.contact-response-box{
    margin-top:30px;
    padding:20px;
    background:#202124;
    border-radius:12px;
}

.contact-response-box > span{
    color:#18C49A;
    font-size:8px;
    letter-spacing:1px;
    font-weight:800;
}

.contact-response-box strong{
    display:block;
    color:#fff;
    font-size:14px;
    margin:10px 0 6px;
}

.contact-response-box p{
    color:rgba(255,255,255,.52);
    font-size:11px;
    line-height:1.6;
}

.contact-response-box a{
    display:inline-block;
    margin-top:12px;
    color:#18C49A;
    font-size:11px;
    font-weight:700;
}


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

.contact-services{
    background:#F7FAF9;
}

.contact-services .section-heading{
    max-width:780px;
}

.contact-services .section-heading p{
    margin-left:auto;
    margin-right:auto;
}

.contact-service-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-top:55px;
}

.contact-service-card{
    padding:28px;
    background:#fff;
    border:1px solid #DDE7E4;
    border-radius:16px;
    min-height:275px;
    position:relative;
    overflow:hidden;
    transition:.3s ease;
}

.contact-service-card::before{
    content:"";
    position:absolute;
    width:120px;
    height:120px;
    border-radius:50%;
    background:#E9FBF6;
    right:-55px;
    top:-55px;
}

.contact-service-card:hover{
    transform:translateY(-6px);
    border-color:rgba(24,196,154,.35);
    box-shadow:0 20px 45px rgba(32,33,36,.07);
}

.contact-service-card > span{
    position:relative;
    z-index:2;
    color:#18C49A;
    font-size:11px;
    font-weight:800;
}

.service-mini-icon{
    width:42px;
    height:42px;
    border-radius:11px;
    background:#F1FCF8;
    color:#18C49A;
    display:grid;
    place-items:center;
    margin-top:25px;
    font-weight:800;
}

.contact-service-card h3{
    font-size:19px;
    margin:18px 0 8px;
}

.contact-service-card p{
    color:#697278;
    font-size:12px;
    line-height:1.7;
}

.contact-service-card b{
    position:absolute;
    left:28px;
    bottom:25px;
    color:#0FA982;
    font-size:11px;
}


/* =========================================
   OFFICE + GOOGLE MAP
========================================= */

.office-section {
    padding: 100px 0;
}

.office-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 600px;
    border-radius: 34px;
    overflow: hidden;
    background: #202124;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.12);
}


/* =========================================
   LEFT OFFICE INFORMATION
========================================= */

.office-info {
    padding: 70px 74px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.office-info .eyebrow {
    display: inline-block;
    margin-bottom: 28px;
    color: #18C49A;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
}

.office-info h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(42px, 4vw, 62px);
    line-height: 1.02;
    letter-spacing: -2.5px;
    font-weight: 800;
}

.office-info h2 span {
    color: #18C49A;
}

.office-description {
    max-width: 560px;
    margin: 34px 0 42px;
    color: #aeb3b5;
    font-size: 17px;
    line-height: 1.8;
}


/* ADDRESS */

.office-address {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.office-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 13px;
    background: rgba(24, 196, 154, 0.10);
    color: #18C49A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.office-address h3 {
    margin: 2px 0 10px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
}

.office-address p {
    margin: 0;
    color: #9fa5a7;
    font-size: 15px;
    line-height: 1.8;
}


/* DIRECTIONS BUTTON */

.map-button {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-top: 35px;
    padding: 14px 20px;
    border: 1px solid rgba(24, 196, 154, 0.35);
    border-radius: 12px;
    color: #18C49A;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.map-button span {
    margin-left: 5px;
    font-size: 18px;
    transition: transform 0.3s ease;
}

.map-button:hover {
    background: #18C49A;
    color: #202124;
    border-color: #18C49A;
    transform: translateY(-2px);
}

.map-button:hover span {
    transform: translateX(4px);
}


/* =========================================
   GOOGLE MAP
========================================= */

.office-map {
    position: relative;
    min-height: 600px;
    background: #1b1e20;
    overflow: hidden;
}

.office-map iframe {
    width: 100%;
    height: 100%;
    min-height: 600px;
    border: 0;
    display: block;

    /*
       Darken the map slightly so that it fits
       with the B4 Ventures dark theme.
    */
    filter: grayscale(0.25) contrast(1.05);
}


/* =========================================
   MAP FLOATING LOCATION CARD
========================================= */

.map-location-card {
    position: absolute;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);

    min-width: 220px;
    padding: 16px 20px;

    display: flex;
    align-items: center;
    gap: 13px;

    background: rgba(32, 33, 36, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 15px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.30);

    backdrop-filter: blur(10px);
}

.map-pin {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;

    border-radius: 50%;

    background: #18C49A;
    color: #202124;

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

.map-location-card strong {
    display: block;
    margin-bottom: 4px;
    color: #ffffff;
    font-size: 14px;
}

.map-location-card span {
    display: block;
    color: #9fa5a7;
    font-size: 12px;
}


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

@media (max-width: 900px) {

    .office-card {
        grid-template-columns: 1fr;
    }

    .office-info {
        padding: 55px 40px;
    }

    .office-map {
        min-height: 450px;
    }

    .office-map iframe {
        min-height: 450px;
    }
}


@media (max-width: 600px) {

    .office-section {
        padding: 70px 0;
    }

    .office-card {
        border-radius: 24px;
    }

    .office-info {
        padding: 45px 25px;
    }

    .office-info h2 {
        font-size: 40px;
        letter-spacing: -1.5px;
    }

    .office-description {
        margin: 25px 0 32px;
        font-size: 15px;
    }

    .office-map {
        min-height: 380px;
    }

    .office-map iframe {
        min-height: 380px;
    }

    .map-location-card {
        left: 20px;
        right: 20px;
        bottom: 20px;
        transform: none;
        min-width: 0;
    }
}

/* =========================
   FAQ
========================= */

.contact-faq{
    background:#F7FAF9;
}

.contact-faq .section-heading{
    max-width:700px;
}

.faq-list{
    max-width:850px;
    margin:55px auto 0;
}

.faq-item{
    background:#fff;
    border:1px solid #DDE7E4;
    border-radius:11px;
    margin-bottom:10px;
    overflow:hidden;
}

.faq-item summary{
    list-style:none;
    cursor:pointer;
    padding:20px 22px;
    color:#303438;
    font-size:13px;
    font-weight:700;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.faq-item summary::-webkit-details-marker{
    display:none;
}

.faq-item summary span{
    color:#18C49A;
    font-size:20px;
    font-weight:400;
    transition:.2s ease;
}

.faq-item[open] summary span{
    transform:rotate(45deg);
}

.faq-answer{
    padding:0 22px 20px;
}

.faq-answer p{
    color:#697278;
    font-size:12px;
    line-height:1.75;
    max-width:720px;
}


/* =========================
   FINAL CTA
========================= */

.contact-cta{
    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(24,196,154,.16),
            transparent 35%
        ),
        #202124;
}

.contact-cta h2{
    color:#fff;
}

.contact-cta h2 span{
    color:#18C49A;
}

.contact-cta-buttons{
    display:flex;
    justify-content:center;
    gap:13px;
    flex-wrap:wrap;
    margin-top:30px;
}


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

@media(max-width:1050px){

    .contact-hero-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .contact-hero-content{
        margin:auto;
    }

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

    .contact-quick-links{
        justify-content:center;
    }

    .contact-hero-card{
        max-width:600px;
        width:100%;
        margin:auto;
        text-align:left;
    }

    .contact-main-grid{
        grid-template-columns:1fr;
        gap:55px;
    }

    .contact-info-panel{
        position:static;
    }

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

    .location-box{
        grid-template-columns:1fr;
    }

}


@media(max-width:700px){

    .contact-hero{
        padding:125px 0 65px;
    }

    .contact-hero h1{
        font-size:43px;
        letter-spacing:-2px;
    }

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

    .contact-quick-links{
        flex-direction:column;
        text-align:left;
    }

    .contact-quick-link{
        width:100%;
    }

    .contact-hero-card{
        padding:28px;
        min-height:350px;
    }

    .contact-main-grid{
        gap:40px;
    }

    .form-row{
        grid-template-columns:1fr;
        gap:0;
    }

    .form-bottom{
        align-items:flex-start;
        flex-direction:column;
    }

    .form-bottom .btn{
        width:100%;
        justify-content:center;
    }

    .contact-service-grid{
        grid-template-columns:1fr;
    }

    .location-content{
        padding:45px 28px;
    }

    .location-content h2{
        font-size:34px;
    }

    .location-visual{
        min-height:390px;
    }

}


@media(max-width:480px){

    .contact-hero h1{
        font-size:38px;
    }

    .contact-hero-card h2{
        font-size:30px;
    }

    .contact-info-panel{
        padding:25px;
    }

    .contact-service-card{
        min-height:250px;
    }

    .location-box{
        border-radius:18px;
    }

    .location-visual{
        min-height:340px;
    }

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

    .contact-cta-buttons .btn{
        width:100%;
        justify-content:center;
    }

}

/* =========================================
   LOGIN PAGE
========================================= */

.login-page {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(24, 196, 154, 0.08),
            transparent 35%
        ),
        #f7faf9;
}


/* =========================================
   LOGIN SECTION
========================================= */

.login-section {
    min-height: calc(100vh - 82px);
    padding: 100px 0 80px;
    display: flex;
    align-items: center;
}

.login-container {
    width: min(1180px, calc(100% - 40px));
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 0.85fr;

    background: #ffffff;

    border: 1px solid #dde7e4;
    border-radius: 30px;

    overflow: hidden;

    box-shadow:
        0 30px 80px rgba(32, 33, 36, 0.10);
}


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

.login-intro {
    padding: 70px 65px;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(24, 196, 154, 0.16),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #202124,
            #292c2f
        );

    color: #ffffff;
}

.login-brand {
    margin-bottom: 50px;
}

.login-logo {
    width: auto;
    height: 58px;
    max-width: 145px;
    object-fit: contain;
    display: block;
}

.login-eyebrow {
    display: inline-block;

    color: #18C49A;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;

    margin-bottom: 22px;
}

.login-intro h1 {
    margin: 0;

    font-size: clamp(44px, 5vw, 68px);
    line-height: 1.02;

    letter-spacing: -3px;
    font-weight: 800;
}

.login-intro h1 span {
    color: #18C49A;
}

.login-intro > p {
    max-width: 510px;

    margin: 30px 0 48px;

    color: #aeb3b5;

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


/* =========================================
   LOGIN POINTS
========================================= */

.login-points {
    display: flex;
    flex-direction: column;
    gap: 23px;
}

.login-point {
    display: flex;
    align-items: center;
    gap: 16px;
}

.point-icon {
    width: 45px;
    height: 45px;

    flex: 0 0 45px;

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

    background: rgba(24, 196, 154, 0.10);
    border: 1px solid rgba(24, 196, 154, 0.15);

    border-radius: 12px;

    color: #18C49A;
}

.login-point strong {
    display: block;

    margin-bottom: 4px;

    font-size: 14px;
    color: #ffffff;
}

.login-point span {
    display: block;

    color: #858c8f;

    font-size: 12px;
}


/* =========================================
   RIGHT LOGIN BOX
========================================= */

.login-box {
    padding: 60px 55px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background: #ffffff;
}

.login-box-header {
    margin-bottom: 28px;
}

.small-label {
    display: block;

    margin-bottom: 10px;

    color: #18C49A;

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

    letter-spacing: 1.7px;
}

.login-box-header h2 {
    margin: 0;

    color: #202124;

    font-size: 30px;
    line-height: 1.15;

    letter-spacing: -1px;
    font-weight: 800;
}

.login-box-header p {
    margin: 10px 0 0;

    color: #697278;

    font-size: 14px;
}


/* =========================================
   ROLE SELECTOR
========================================= */

.role-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;

    margin-bottom: 28px;
}

.role-card {
    position: relative;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 13px;

    text-align: left;

    background: #f7faf9;

    border: 1px solid #dde7e4;
    border-radius: 13px;

    cursor: pointer;

    transition: all 0.25s ease;
}

.role-card:hover {
    border-color: rgba(24, 196, 154, 0.45);
}

.role-card.active {
    background: #e9fbf6;
    border-color: #18C49A;
}

.role-icon {
    width: 39px;
    height: 39px;

    flex: 0 0 39px;

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

    border-radius: 10px;

    background: #ffffff;

    color: #697278;

    font-size: 14px;
}

.role-card.active .role-icon {
    background: #18C49A;
    color: #ffffff;
}

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

.role-content strong {
    display: block;

    color: #303438;

    font-size: 13px;
}

.role-content span {
    display: block;

    margin-top: 3px;

    color: #7b8589;

    font-size: 10px;

    line-height: 1.3;
}

.role-check {
    display: none;

    margin-left: auto;

    color: #18C49A;

    font-size: 12px;
}

.role-card.active .role-check {
    display: block;
}


/* =========================================
   LOGIN FORM
========================================= */

.login-form {
    display: none;
}

.login-form.active {
    display: block;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;

    margin-bottom: 8px;

    color: #303438;

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

.password-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.password-label label {
    margin-bottom: 8px;
}

.password-label a {
    color: #18C49A;

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

    text-decoration: none;
}

.password-label a:hover {
    text-decoration: underline;
}


/* =========================================
   INPUT
========================================= */

.input-wrap {
    position: relative;
}

.input-wrap > i {
    position: absolute;

    left: 15px;
    top: 50%;

    transform: translateY(-50%);

    color: #899398;

    font-size: 14px;

    pointer-events: none;
}

.input-wrap input {
    width: 100%;

    height: 50px;

    padding: 0 45px 0 43px;

    border: 1px solid #dce5e2;
    border-radius: 11px;

    outline: none;

    background: #ffffff;

    color: #303438;

    font-family: inherit;
    font-size: 14px;

    transition: all 0.25s ease;
}

.input-wrap input::placeholder {
    color: #a2abad;
}

.input-wrap input:focus {
    border-color: #18C49A;

    box-shadow:
        0 0 0 3px rgba(24, 196, 154, 0.10);
}


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

.password-toggle {
    position: absolute;

    right: 13px;
    top: 50%;

    transform: translateY(-50%);

    width: 30px;
    height: 30px;

    border: 0;
    background: transparent;

    color: #899398;

    cursor: pointer;
}

.password-toggle:hover {
    color: #18C49A;
}


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

.login-submit {
    width: 100%;

    height: 52px;

    margin-top: 5px;

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

    gap: 12px;

    border: 0;
    border-radius: 11px;

    background: #18C49A;

    color: #ffffff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 800;

    cursor: pointer;

    transition: all 0.3s ease;
}

.login-submit i {
    transition: transform 0.3s ease;
}

.login-submit:hover {
    background: #0FA982;

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(24, 196, 154, 0.22);
}

.login-submit:hover i {
    transform: translateX(4px);
}


/* =========================================
   SECURITY
========================================= */

.login-security {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: 25px;

    color: #899398;

    font-size: 10px;
}

.login-security i {
    color: #18C49A;
}


/* =========================================
   BACK TO WEBSITE
========================================= */

.back-website {
    text-align: center;

    margin-top: 25px;
}

.back-website a {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #697278;

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

    text-decoration: none;

    transition: color 0.25s ease;
}

.back-website a:hover {
    color: #18C49A;
}


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

@media (max-width: 1000px) {

    .login-container {
        grid-template-columns: 1fr;
        max-width: 650px;
    }

    .login-intro {
        padding: 50px 45px;
    }

    .login-brand {
        margin-bottom: 35px;
    }

    .login-intro h1 {
        font-size: 52px;
    }

    .login-points {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .login-box {
        padding: 50px 45px;
    }
}


@media (max-width: 650px) {

    .login-section {
        padding: 45px 0;
    }

    .login-container {
        width: calc(100% - 24px);
        border-radius: 22px;
    }

    .login-intro {
        padding: 40px 28px;
    }

    .login-logo {
        height: 48px;
        max-width: 120px;
    }

    .login-intro h1 {
        font-size: 42px;
        letter-spacing: -2px;
    }

    .login-intro > p {
        font-size: 14px;
        margin: 22px 0 30px;
    }

    .login-points {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .login-box {
        padding: 38px 25px;
    }

    .login-box-header h2 {
        font-size: 26px;
    }

    .role-selector {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   B4 VENTURES PORTAL SELECTION
===================================================== */

.portal-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 8% 20%,
            rgba(24, 196, 154, 0.07),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(24, 196, 154, 0.05),
            transparent 30%
        ),
        #f7faf9;
}


/* =====================================================
   PORTAL SECTION
===================================================== */

.portal-section {
    min-height: calc(100vh - 82px);

    padding: 95px 0 80px;

    display: flex;
    align-items: center;
}


.portal-container {
    width: min(1180px, calc(100% - 40px));

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 0.88fr;

    background: #ffffff;

    border: 1px solid #dde7e4;

    border-radius: 32px;

    overflow: hidden;

    box-shadow:
        0 30px 80px rgba(32, 33, 36, 0.10);
}


/* =====================================================
   LEFT BRAND AREA
===================================================== */

.portal-intro {
    padding: 70px 65px;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(24, 196, 154, 0.17),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(24, 196, 154, 0.07),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #202124,
            #292c2f
        );

    color: #ffffff;
}


.portal-brand {
    margin-bottom: 52px;
}


.portal-logo {
    width: auto;
    height: 58px;
    max-width: 145px;

    object-fit: contain;

    display: block;
}


.portal-eyebrow {
    display: inline-block;

    margin-bottom: 22px;

    color: #18C49A;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 2px;
}


.portal-intro h1 {
    margin: 0;

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

    line-height: 1.02;

    letter-spacing: -3px;

    font-weight: 800;
}


.portal-intro h1 span {
    color: #18C49A;
}


.portal-intro > p {
    max-width: 520px;

    margin: 30px 0 50px;

    color: #aeb3b5;

    font-size: 16px;

    line-height: 1.8;
}


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

.portal-features {
    display: flex;

    flex-direction: column;

    gap: 22px;
}


.portal-feature {
    display: flex;

    align-items: center;

    gap: 16px;
}


.portal-feature-icon {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: flex;

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

    border-radius: 12px;

    background:
        rgba(24, 196, 154, 0.10);

    border:
        1px solid rgba(24, 196, 154, 0.15);

    color: #18C49A;

    font-size: 15px;
}


.portal-feature strong {
    display: block;

    margin-bottom: 4px;

    color: #ffffff;

    font-size: 14px;
}


.portal-feature span {
    display: block;

    color: #858c8f;

    font-size: 12px;
}


/* =====================================================
   RIGHT SELECTION AREA
===================================================== */

.portal-selection {
    padding: 60px 52px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    background: #ffffff;
}


.portal-heading {
    margin-bottom: 27px;
}


.portal-small-label {
    display: block;

    margin-bottom: 9px;

    color: #18C49A;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.8px;
}


.portal-heading h2 {
    margin: 0;

    color: #202124;

    font-size: 31px;

    line-height: 1.15;

    letter-spacing: -1px;

    font-weight: 800;
}


.portal-heading p {
    margin: 10px 0 0;

    color: #697278;

    font-size: 14px;
}


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

.portal-card {
    position: relative;

    display: block;

    padding: 22px;

    margin-bottom: 13px;

    text-decoration: none;

    border-radius: 17px;

    border: 1px solid #dde7e4;

    background: #ffffff;

    overflow: hidden;

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


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

    position: absolute;

    left: 0;
    top: 0;

    width: 4px;
    height: 100%;

    background: #18C49A;

    transform: scaleY(0);

    transform-origin: bottom;

    transition: transform 0.3s ease;
}


.portal-card:hover {
    transform: translateY(-4px);

    border-color: rgba(24, 196, 154, 0.45);

    box-shadow:
        0 18px 40px rgba(32, 33, 36, 0.09);

    background: #fbfefd;
}


.portal-card:hover::before {
    transform: scaleY(1);
}


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

.portal-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 18px;
}


.portal-card-icon {
    width: 48px;
    height: 48px;

    display: flex;

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

    border-radius: 13px;

    background: #e9fbf6;

    color: #0FA982;

    font-size: 17px;

    transition: all 0.3s ease;
}


.portal-card:hover .portal-card-icon {
    background: #18C49A;

    color: #ffffff;
}


.portal-arrow {
    width: 34px;
    height: 34px;

    display: flex;

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

    border-radius: 50%;

    background: #f1fcf8;

    color: #18C49A;

    font-size: 12px;

    transition: all 0.3s ease;
}


.portal-card:hover .portal-arrow {
    background: #18C49A;

    color: #ffffff;

    transform: translateX(3px);
}


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

.portal-card-label {
    display: block;

    margin-bottom: 6px;

    color: #18C49A;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.portal-card-content h3 {
    margin: 0;

    color: #202124;

    font-size: 22px;

    font-weight: 800;

    letter-spacing: -0.5px;
}


.portal-card-content p {
    max-width: 450px;

    margin: 9px 0 0;

    color: #697278;

    font-size: 12px;

    line-height: 1.7;
}


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

.portal-card-footer {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 20px;

    padding-top: 15px;

    border-top: 1px solid #edf2f0;
}


.portal-card-footer span {
    color: #303438;

    font-size: 12px;

    font-weight: 800;
}


.portal-card-footer i {
    color: #18C49A;

    font-size: 12px;

    transition: transform 0.3s ease;
}


.portal-card:hover .portal-card-footer i {
    transform: translateX(5px);
}


/* =====================================================
   SECURITY
===================================================== */

.portal-security {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 10px;

    color: #899398;

    font-size: 10px;

    text-align: center;
}


.portal-security i {
    color: #18C49A;
}


/* =====================================================
   BACK TO WEBSITE
===================================================== */

.portal-back {
    text-align: center;

    margin-top: 22px;
}


.portal-back a {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #697278;

    font-size: 11px;

    font-weight: 700;

    text-decoration: none;

    transition: color 0.25s ease;
}


.portal-back a:hover {
    color: #18C49A;
}


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

@media (max-width: 1000px) {

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

        max-width: 680px;
    }


    .portal-intro {
        padding: 52px 45px;
    }


    .portal-brand {
        margin-bottom: 35px;
    }


    .portal-intro h1 {
        font-size: 53px;
    }


    .portal-intro > p {
        margin-bottom: 35px;
    }


    .portal-features {
        display: grid;

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

        gap: 15px;
    }


    .portal-feature {
        align-items: flex-start;

        flex-direction: column;

        gap: 10px;
    }


    .portal-selection {
        padding: 50px 45px;
    }

}


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

@media (max-width: 650px) {

    .portal-section {
        min-height: calc(100vh - 72px);

        padding: 35px 0 45px;
    }


    .portal-container {
        width: calc(100% - 24px);

        border-radius: 23px;
    }


    .portal-intro {
        padding: 40px 27px;
    }


    .portal-logo {
        height: 48px;

        max-width: 120px;
    }


    .portal-brand {
        margin-bottom: 35px;
    }


    .portal-intro h1 {
        font-size: 41px;

        letter-spacing: -2px;
    }


    .portal-intro > p {
        margin: 22px 0 30px;

        font-size: 14px;
    }


    .portal-features {
        display: flex;

        gap: 16px;
    }


    .portal-feature {
        flex-direction: row;

        align-items: center;
    }


    .portal-selection {
        padding: 38px 23px;
    }


    .portal-heading h2 {
        font-size: 27px;
    }


    .portal-card {
        padding: 19px;
    }


    .portal-card-content h3 {
        font-size: 20px;
    }


    .portal-card-content p {
        font-size: 11px;
    }

}