/* =========================================================
   VMENTORZ — ABOUT PAGE
   PART 2 — about.css
========================================================= */


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

:root {

    --about-navy: #071B2C;
    --about-navy-soft: #102A40;

    --about-teal: #00B592;
    --about-emerald: #20C98E;
    --about-mint: #EAF9F4;
    --about-mint-dark: #D7F3EA;

    --about-white: #FFFFFF;

    --about-text: #17233D;
    --about-text-soft: #667085;
    --about-border: rgba(7, 27, 44, 0.09);

    --about-shadow:
        0 25px 70px rgba(7, 27, 44, 0.10);

    --about-soft-shadow:
        0 15px 40px rgba(7, 27, 44, 0.08);

    --about-radius: 24px;

    --about-container: 1180px;

}


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

html {
    scroll-behavior: smooth;
}


body {

    overflow-x: hidden;

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

}


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

.about-header .container,
.about-hero .container,
.about-story-section .container {

    width: min(
        calc(100% - 40px),
        var(--about-container)
    );

    margin: 0 auto;

}


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

.about-header {

    position: relative;

    z-index: 1000;

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

    backdrop-filter:
        blur(18px);

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

    border-bottom:
        1px solid rgba(7, 27, 44, 0.055);

}


.about-header .navbar {

    min-height: 72px;

}


/* =========================================================
   ABOUT NAV LOGO
========================================================= */

.about-header .logo {

    display: flex;

    align-items: center;

    text-decoration: none;

}


.about-header .logo-image {

    width: 145px;

    height: auto;

    display: block;

    object-fit: contain;

}


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

.about-header .nav-links a {

    position: relative;

    transition:
        color 0.25s ease;

}


.about-header .nav-links a.active {

    color: var(--about-teal);

}


.about-header .nav-links a.active::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -8px;

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background:
        var(--about-teal);

    transform:
        translateX(-50%);

}


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

.about-hero {

    position: relative;

    min-height: calc(100vh - 72px);

    display: flex;

    align-items: center;

    overflow: hidden;

    padding:
        90px 0
        100px;

    isolation: isolate;

    background:

        radial-gradient(
            circle at 8% 20%,
            rgba(32, 201, 142, 0.16),
            transparent 28%
        ),

        radial-gradient(
            circle at 90% 35%,
            rgba(0, 181, 146, 0.12),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #F6FCFA 50%,
            #FFFFFF 100%
        );

}


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

.about-hero-grid {

    position: absolute;

    inset: 0;

    z-index: -2;

    opacity: 0.28;

    background-image:

        linear-gradient(
            rgba(7, 27, 44, 0.045) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(7, 27, 44, 0.045) 1px,
            transparent 1px
        );

    background-size:
        70px 70px;

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

}


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

.about-hero-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(4px);

    pointer-events: none;

    z-index: -1;

}


.hero-glow-one {

    width: 480px;

    height: 480px;

    left: -220px;

    top: -100px;

    background:
        radial-gradient(
            circle,
            rgba(32, 201, 142, 0.18),
            transparent 68%
        );

    animation:
        aboutGlowOne 8s ease-in-out infinite alternate;

}


.hero-glow-two {

    width: 500px;

    height: 500px;

    right: -200px;

    bottom: -160px;

    background:
        radial-gradient(
            circle,
            rgba(0, 181, 146, 0.15),
            transparent 68%
        );

    animation:
        aboutGlowTwo 9s ease-in-out infinite alternate;

}


@keyframes aboutGlowOne {

    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(40px, 30px, 0);
    }

}


@keyframes aboutGlowTwo {

    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-35px, -25px, 0);
    }

}


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

.about-hero-layout {

    display: grid;

    grid-template-columns:
        0.92fr
        1.08fr;

    align-items: center;

    gap: 55px;

}


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

.about-hero-content {

    position: relative;

    z-index: 5;

    max-width: 600px;

}


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

.about-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        9px 15px;

    margin-bottom: 24px;

    border:
        1px solid
        rgba(0, 181, 146, 0.14);

    border-radius: 50px;

    background:
        rgba(32, 201, 142, 0.09);

    color:
        var(--about-teal);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.04em;

}


.eyebrow-dot {

    width: 7px;

    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--about-teal);

    box-shadow:
        0 0 0 5px
        rgba(0, 181, 146, 0.10);

    animation:
        eyebrowPulse 2s ease-in-out infinite;

}


@keyframes eyebrowPulse {

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

    50% {
        transform: scale(1.25);
    }

}


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

.about-hero-title {

    margin: 0;

    color:
        var(--about-navy);

    font-size:
        clamp(48px, 5vw, 76px);

    line-height:
        1.02;

    letter-spacing:
        -0.055em;

    font-weight:
        800;

}


.about-hero-title span {

    color:
        var(--about-teal);

}


.about-hero-title strong {

    position: relative;

    color:
        var(--about-navy);

}


.about-hero-title strong::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -5px;

    width: 100%;

    height: 8px;

    border-radius: 20px;

    background:
        rgba(32, 201, 142, 0.16);

    transform:
        skewX(-15deg);

    z-index: -1;

}


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

.about-hero-description {

    max-width: 560px;

    margin:
        28px 0 0;

    color:
        var(--about-text-soft);

    font-size: 16px;

    line-height: 1.85;

}


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

.about-hero-actions {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 34px;

}


.about-primary-btn,
.about-secondary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 48px;

    padding:
        0 21px;

    border-radius: 12px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

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

}


.about-primary-btn {

    color:
        #FFFFFF;

    background:
        linear-gradient(
            135deg,
            var(--about-teal),
            var(--about-emerald)
        );

    box-shadow:
        0 12px 28px
        rgba(0, 181, 146, 0.22);

}


.about-primary-btn:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 35px
        rgba(0, 181, 146, 0.28);

}


.about-secondary-btn {

    color:
        var(--about-navy);

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

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

}


.about-secondary-btn:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(0, 181, 146, 0.28);

    background:
        #FFFFFF;

    box-shadow:
        var(--about-soft-shadow);

}


.about-primary-btn i,
.about-secondary-btn i {

    transition:
        transform 0.3s ease;

}


.about-primary-btn:hover i,
.about-secondary-btn:hover i {

    transform:
        translateX(3px);

}


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

.about-hero-note {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 22px;

    color:
        #788495;

    font-size: 11px;

}


.about-hero-note i {

    color:
        var(--about-teal);

    font-size: 13px;

}


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

.about-hero-visual {

    position: relative;

    width: 100%;

    min-height: 610px;

    display: flex;

    align-items: center;

    justify-content: center;

}


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

.hero-visual-ring {

    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(0, 181, 146, 0.12);

}


.ring-one {

    width: 530px;

    height: 530px;

}


.ring-two {

    width: 390px;

    height: 390px;

    border-color:
        rgba(32, 201, 142, 0.17);

}


.ring-three {

    width: 250px;

    height: 250px;

    border-color:
        rgba(0, 181, 146, 0.22);

}


/* =========================================================
   ORBIT LINES
========================================================= */

.hero-orbit {

    position: absolute;

    border-radius: 50%;

    border:
        1px dashed
        rgba(0, 181, 146, 0.17);

}


.orbit-one {

    width: 530px;

    height: 250px;

    transform:
        rotate(28deg);

    animation:
        orbitRotateOne 18s linear infinite;

}


.orbit-two {

    width: 530px;

    height: 250px;

    transform:
        rotate(-28deg);

    animation:
        orbitRotateTwo 20s linear infinite;

}


.orbit-three {

    width: 430px;

    height: 190px;

    transform:
        rotate(90deg);

    opacity: 0.6;

}


/* =========================================================
   ORBIT DOTS
========================================================= */

.hero-orbit span {

    position: absolute;

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background:
        var(--about-teal);

    box-shadow:
        0 0 0 7px
        rgba(0, 181, 146, 0.09),

        0 0 20px
        rgba(0, 181, 146, 0.30);

}


.orbit-one span {

    top: 8px;

    left: 50%;

}


.orbit-two span {

    right: 10%;

    top: 22%;

}


.orbit-three span {

    bottom: 10%;

    left: 50%;

}


@keyframes orbitRotateOne {

    from {
        transform: rotate(28deg);
    }

    to {
        transform: rotate(388deg);
    }

}


@keyframes orbitRotateTwo {

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

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

}


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

.hero-ecosystem-center {

    position: absolute;

    width: 190px;

    height: 190px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

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

    border-radius: 50%;

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

    backdrop-filter:
        blur(18px);

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

    box-shadow:

        0 25px 60px
        rgba(7, 27, 44, 0.12),

        inset 0 0 0 1px
        rgba(0, 181, 146, 0.06);

    z-index: 4;

}


.hero-center-glow {

    position: absolute;

    inset: -25px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(32, 201, 142, 0.18),
            transparent 65%
        );

    filter: blur(10px);

    z-index: -1;

    animation:
        centerGlow 3.5s ease-in-out infinite alternate;

}


@keyframes centerGlow {

    from {
        transform: scale(0.92);
        opacity: 0.55;
    }

    to {
        transform: scale(1.08);
        opacity: 1;
    }

}


.hero-center-logo {

    width: 67px;

    height: 67px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 20px;

    background:
        #FFFFFF;

    box-shadow:
        0 12px 30px
        rgba(7, 27, 44, 0.09);

}


.hero-center-logo img {

    width: 55px;

    height: auto;

    object-fit: contain;

}


.hero-center-label {

    margin-top: 12px;

    color:
        var(--about-navy);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 0.04em;

}


.hero-ecosystem-center small {

    margin-top: 4px;

    color:
        var(--about-text-soft);

    font-size: 8px;

    text-align: center;

}


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

.ecosystem-node {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 150px;

    padding:
        11px 14px;

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

    border-radius: 15px;

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

    backdrop-filter:
        blur(16px);

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

    box-shadow:
        0 15px 35px
        rgba(7, 27, 44, 0.08);

    z-index: 6;

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

}


.ecosystem-node:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 20px 45px
        rgba(0, 181, 146, 0.14);

}


.ecosystem-node-icon {

    width: 37px;

    height: 37px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    background:
        rgba(0, 181, 146, 0.10);

    color:
        var(--about-teal);

    font-size: 14px;

}


.ecosystem-node-text {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.ecosystem-node-text strong {

    color:
        var(--about-navy);

    font-size: 10px;

    font-weight: 800;

}


.ecosystem-node-text span {

    color:
        var(--about-text-soft);

    font-size: 8px;

}


/* =========================================================
   NODE POSITIONS
========================================================= */

.node-individual {

    top: 8%;

    left: 4%;

}


.node-family {

    top: 29%;

    right: -1%;

}


.node-student {

    bottom: 10%;

    right: 2%;

}


.node-workplace {

    bottom: 2%;

    left: 12%;

}


.node-community {

    top: 50%;

    left: -3%;

}


.node-india {

    top: 3%;

    right: 17%;

}


/* =========================================================
   FLOATING NODE ANIMATIONS
========================================================= */

.node-individual {

    animation:
        nodeFloatOne 4.5s ease-in-out infinite;

}


.node-family {

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

}


.node-student {

    animation:
        nodeFloatThree 4.8s ease-in-out infinite;

}


.node-workplace {

    animation:
        nodeFloatTwo 5.3s ease-in-out infinite;

}


.node-community {

    animation:
        nodeFloatOne 5.1s ease-in-out infinite;

}


.node-india {

    animation:
        nodeFloatThree 4.7s ease-in-out infinite;

}


@keyframes nodeFloatOne {

    0%,
    100% {
        margin-top: 0;
    }

    50% {
        margin-top: -8px;
    }

}


@keyframes nodeFloatTwo {

    0%,
    100% {
        margin-top: 0;
    }

    50% {
        margin-top: 7px;
    }

}


@keyframes nodeFloatThree {

    0%,
    100% {
        margin-top: 0;
    }

    50% {
        margin-top: -6px;
    }

}


/* =========================================================
   SCROLL INDICATOR
========================================================= */

.about-scroll-indicator {

    position: absolute;

    left: 50%;

    bottom: 25px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    color:
        rgba(7, 27, 44, 0.52);

    text-decoration: none;

    font-size: 9px;

    font-weight: 600;

    transform:
        translateX(-50%);

    z-index: 10;

}


.about-scroll-indicator i {

    color:
        var(--about-teal);

    animation:
        scrollArrow 1.8s ease-in-out infinite;

}


@keyframes scrollArrow {

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

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

}


/* =========================================================
   STORY SECTION
========================================================= */

.about-story-section {

    position: relative;

    padding:
        125px 0
        130px;

    overflow: hidden;

    background:
        #FFFFFF;

}


.story-background-glow {

    position: absolute;

    width: 600px;

    height: 600px;

    left: -300px;

    top: 80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(32, 201, 142, 0.10),
            transparent 68%
        );

    pointer-events: none;

}


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

.about-section-heading {

    max-width: 800px;

    margin:
        0 auto 75px;

    text-align: center;

}


.about-section-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 17px;

    color:
        var(--about-teal);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.12em;

}


.about-section-eyebrow span {

    width: 28px;

    height: 2px;

    border-radius: 20px;

    background:
        var(--about-teal);

}


.about-section-heading h2 {

    margin: 0;

    color:
        var(--about-navy);

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

    line-height: 1.08;

    letter-spacing:
        -0.045em;

}


.about-section-heading h2 span {

    color:
        var(--about-teal);

}


.about-section-heading p {

    max-width: 680px;

    margin:
        22px auto 0;

    color:
        var(--about-text-soft);

    font-size: 14px;

    line-height: 1.85;

}


/* =========================================================
   STORY LAYOUT
========================================================= */

.about-story-layout {

    display: grid;

    grid-template-columns:
        0.85fr
        1.15fr;

    align-items: center;

    gap: 90px;

}


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

.about-story-visual {

    position: relative;

    min-height: 530px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.story-visual-card {

    position: relative;

    width: 100%;

    max-width: 430px;

    min-height: 450px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border:
        1px solid
        rgba(0, 181, 146, 0.10);

    border-radius:
        34px;

    background:

        radial-gradient(
            circle at 50% 35%,
            rgba(32, 201, 142, 0.16),
            transparent 38%
        ),

        linear-gradient(
            145deg,
            #F8FFFC,
            #EDF9F5
        );

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

}


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

.story-number {

    position: absolute;

    top: 25px;

    left: 28px;

    color:
        rgba(7, 27, 44, 0.08);

    font-size: 70px;

    line-height: 1;

    font-weight: 800;

}


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

.story-visual-icon {

    position: relative;

    width: 145px;

    height: 145px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

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

    box-shadow:

        0 20px 45px
        rgba(7, 27, 44, 0.08),

        inset 0 0 0 1px
        rgba(0, 181, 146, 0.08);

}


.story-icon-glow {

    position: absolute;

    inset: -25px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 181, 146, 0.20),
            transparent 68%
        );

    filter: blur(5px);

    z-index: -1;

    animation:
        storyIconGlow 3s ease-in-out infinite alternate;

}


.story-visual-icon i {

    color:
        var(--about-teal);

    font-size: 52px;

}


@keyframes storyIconGlow {

    from {
        transform: scale(0.88);
    }

    to {
        transform: scale(1.08);
    }

}


/* =========================================================
   STORY MESSAGE
========================================================= */

.story-visual-message {

    display: flex;

    flex-direction: column;

    align-items: center;

    margin-top: 32px;

}


.story-visual-message span {

    color:
        var(--about-teal);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.16em;

}


.story-visual-message strong {

    margin-top: 6px;

    color:
        var(--about-navy);

    font-size: 24px;

    font-weight: 800;

}


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

.story-floating-card {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        11px 14px;

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

    border-radius: 13px;

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

    backdrop-filter:
        blur(14px);

    box-shadow:
        0 15px 35px
        rgba(7, 27, 44, 0.09);

    color:
        var(--about-navy);

    font-size: 9px;

    font-weight: 700;

}


.story-floating-card i {

    color:
        var(--about-teal);

    font-size: 12px;

}


.floating-card-one {

    top: 95px;

    right: -28px;

    animation:
        storyFloatOne 4s ease-in-out infinite;

}


.floating-card-two {

    bottom: 95px;

    left: -32px;

    animation:
        storyFloatTwo 4.5s ease-in-out infinite;

}


@keyframes storyFloatOne {

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

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

}


@keyframes storyFloatTwo {

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

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

}


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

.about-story-content {

    display: flex;

    flex-direction: column;

    gap: 27px;

}


/* =========================================================
   STORY BLOCK
========================================================= */

.story-content-block {

    display: grid;

    grid-template-columns:
        38px
        1fr;

    gap: 18px;

    padding-bottom: 25px;

    border-bottom:
        1px solid
        rgba(7, 27, 44, 0.075);

}


.story-content-block:last-of-type {

    border-bottom: none;

}


.story-step {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background:
        rgba(0, 181, 146, 0.09);

    color:
        var(--about-teal);

    font-size: 9px;

    font-weight: 800;

}


.story-content-block h3 {

    margin: 0 0 8px;

    color:
        var(--about-navy);

    font-size: 17px;

    font-weight: 800;

}


.story-content-block p {

    margin: 0;

    color:
        var(--about-text-soft);

    font-size: 12px;

    line-height: 1.75;

}


/* =========================================================
   STORY HIGHLIGHT
========================================================= */

.story-highlight {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-top: 3px;

    padding:
        17px 20px;

    border:
        1px solid
        rgba(0, 181, 146, 0.12);

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            rgba(0, 181, 146, 0.07),
            rgba(32, 201, 142, 0.035)
        );

}


.story-highlight-icon {

    width: 38px;

    height: 38px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    color:
        #FFFFFF;

    background:
        linear-gradient(
            135deg,
            var(--about-teal),
            var(--about-emerald)
        );

    box-shadow:
        0 8px 20px
        rgba(0, 181, 146, 0.18);

}


.story-highlight p {

    margin: 0;

    color:
        var(--about-text-soft);

    font-size: 11px;

    line-height: 1.7;

}


.story-highlight p strong {

    color:
        var(--about-navy);

}


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

.about-page-progress {

    position: fixed;

    top: 0;

    left: 0;

    width: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--about-teal),
            var(--about-emerald)
        );

    z-index: 9999;

    box-shadow:
        0 0 12px
        rgba(0, 181, 146, 0.35);

}


/* =========================================================
   SELECTION
========================================================= */

.about-hero ::selection,
.about-story-section ::selection {

    color:
        #FFFFFF;

    background:
        var(--about-teal);

}


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

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

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

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;

    }

}
/* =========================================================
   DARK THEME COMPATIBILITY
========================================================= */

[data-theme="dark"] .about-hero,
[data-theme="dark"] .about-story-section {
    background: var(--bg);
}

[data-theme="dark"] .about-hero-title,
[data-theme="dark"] .about-hero-title strong,
[data-theme="dark"] .about-section-heading h2,
[data-theme="dark"] .story-content-block h3,
[data-theme="dark"] .hero-center-label,
[data-theme="dark"] .ecosystem-node-text strong,
[data-theme="dark"] .story-visual-message strong {
    color: var(--text);
}

[data-theme="dark"] .about-hero-description,
[data-theme="dark"] .about-section-heading p,
[data-theme="dark"] .story-content-block p,
[data-theme="dark"] .story-highlight p,
[data-theme="dark"] .ecosystem-node-text span,
[data-theme="dark"] .hero-ecosystem-center small {
    color: var(--text-muted);
}

[data-theme="dark"] .hero-ecosystem-center,
[data-theme="dark"] .ecosystem-node,
[data-theme="dark"] .story-visual-card,
[data-theme="dark"] .story-floating-card,
[data-theme="dark"] .hero-center-logo,
[data-theme="dark"] .about-secondary-btn {
    background: rgba(6,13,26,.82);
    border-color: var(--border);
}

[data-theme="dark"] .about-secondary-btn {
    color: var(--text);
}

[data-theme="dark"] .about-hero-grid {
    opacity: .12;
}

/* =========================================================
   VMENTORZ — TEAM SECTION
   COMPLETE LIGHT + DARK THEME
========================================================= */


/* =========================================================
   ROOT / DEFAULT COLORS
========================================================= */

:root {

    --team-navy: #0F1B3D;

    --team-teal: #10B981;

    --team-bright-teal: #14C9A0;

    --team-mint: #DDF8F0;

    --team-light-bg: #F5FBF9;

    --team-white: #FFFFFF;

    --team-dark-text: #0F1B3D;

    --team-muted: #718096;

}


/* =========================================================
   TEAM SECTION — DEFAULT DARK
========================================================= */

.team-section {

    position: relative;

    padding: 100px 0 120px;

    background: #0F1B3D;

    overflow: hidden;

    isolation: isolate;

}


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

.team-section::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -180px;
    top: -160px;

    background: rgba(16, 185, 129, 0.13);

    border-radius: 50%;

    filter: blur(130px);

    pointer-events: none;

    z-index: -1;

}


.team-section::after {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -180px;
    bottom: -180px;

    background: rgba(20, 201, 160, 0.10);

    border-radius: 50%;

    filter: blur(140px);

    pointer-events: none;

    z-index: -1;

}


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

.team-heading {

    position: relative;

    z-index: 2;

    max-width: 850px;

    margin: 0 auto 70px;

    padding: 0 20px;

    text-align: center;

}


/* =========================================================
   SUBTITLE
========================================================= */

.team-subtitle {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    margin-bottom: 20px;

    color: #14C9A0;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2.5px;

    text-transform: uppercase;

}


.team-subtitle span {

    display: block;

    width: 38px;

    height: 2px;

    border-radius: 20px;

    background: #14C9A0;

}


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

.team-heading h2 {

    margin: 0 0 18px;

    color: #FFFFFF;

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

    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -0.03em;

}


.team-heading p {

    max-width: 720px;

    margin: 0 auto;

    color: #B7C3D5;

    font-size: 16px;

    line-height: 1.8;

}


/* =========================================================
   SLIDER
========================================================= */

.team-slider {

    position: relative;

    z-index: 2;

    width: 100%;

    overflow: hidden;

    padding-top: 65px;

}


/* =========================================================
   FADE EDGES
========================================================= */

.team-slider::before,
.team-slider::after {

    content: "";

    position: absolute;

    top: 0;

    width: 160px;

    height: 100%;

    z-index: 20;

    pointer-events: none;

}


.team-slider::before {

    left: 0;

    background:
        linear-gradient(
            to right,
            #0F1B3D,
            rgba(15, 27, 61, 0)
        );

}


.team-slider::after {

    right: 0;

    background:
        linear-gradient(
            to left,
            #0F1B3D,
            rgba(15, 27, 61, 0)
        );

}


/* =========================================================
   TRACK
========================================================= */

.team-track {

    display: flex;

    align-items: stretch;

    gap: 30px;

    width: max-content;

    padding: 0 20px;

    animation:
        teamScroll 38s linear infinite;

}


.team-slider:hover .team-track {

    animation-play-state: paused;

}


/* =========================================================
   AUTO SCROLL
========================================================= */

@keyframes teamScroll {

    0% {

        transform: translateX(0);

    }

    100% {

        transform: translateX(-50%);

    }

}


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

.team-card {

    position: relative;

    width: 315px;

    flex: 0 0 315px;

    min-height: 365px;

    padding: 78px 28px 32px;

    text-align: center;

    border-radius: 26px;

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

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.035)
        );

    backdrop-filter: blur(18px);

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

    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.18);

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

}


/* =========================================================
   CARD TOP LINE
========================================================= */

.team-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 18%;

    right: 18%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(20, 201, 160, 0.8),
            transparent
        );

}


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

.team-card:hover {

    transform: translateY(-10px);

    border-color:
        rgba(20, 201, 160, 0.55);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.25),
        0 0 35px rgba(16, 185, 129, 0.12);

}


/* =========================================================
   MEMBER IMAGE
========================================================= */

.member-img {

    position: absolute;

    top: 0;

    left: 50%;

    width: 112px;

    height: 112px;

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

    overflow: hidden;

    border-radius: 50%;

    border: 4px solid #14C9A0;

    background: #FFFFFF;

    box-shadow:
        0 12px 30px rgba(16, 185, 129, 0.25);

    z-index: 10;

}


.member-img img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 50%;

}


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

.team-card:hover .member-img {

    border-color: #FFFFFF;

    box-shadow:
        0 12px 35px rgba(16, 185, 129, 0.35);

}


/* =========================================================
   MEMBER NAME
========================================================= */

.team-card h3 {

    margin: 0 0 10px;

    color: #FFFFFF;

    font-size: 21px;

    font-weight: 750;

    line-height: 1.3;

}


/* =========================================================
   ROLE
========================================================= */

.role {

    display: inline-block;

    max-width: 100%;

    margin-bottom: 18px;

    padding: 7px 14px;

    border-radius: 50px;

    border: 1px solid
        rgba(20, 201, 160, 0.22);

    background:
        rgba(16, 185, 129, 0.13);

    color: #57E0BF;

    font-size: 11px;

    font-weight: 700;

    line-height: 1.4;

}


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

.team-card p {

    margin: 0;

    color: #AEBBCD;

    font-size: 13px;

    line-height: 1.75;

}


/* =========================================================
   =========================================================
   LIGHT THEME
   =========================================================
========================================================= */

body.light-theme .team-section,
[data-theme="light"] .team-section {

    background: #F5FBF9;

}


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

body.light-theme .team-section::before,
[data-theme="light"] .team-section::before {

    background:
        rgba(16, 185, 129, 0.09);

}


body.light-theme .team-section::after,
[data-theme="light"] .team-section::after {

    background:
        rgba(20, 201, 160, 0.07);

}


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

body.light-theme .team-heading h2,
[data-theme="light"] .team-heading h2 {

    color: #0F1B3D;

}


body.light-theme .team-heading p,
[data-theme="light"] .team-heading p {

    color: #68778C;

}


body.light-theme .team-subtitle,
[data-theme="light"] .team-subtitle {

    color: #0F9F7D;

}


body.light-theme .team-subtitle span,
[data-theme="light"] .team-subtitle span {

    background: #0F9F7D;

}


/* =========================================================
   LIGHT CARDS
========================================================= */

body.light-theme .team-card,
[data-theme="light"] .team-card {

    border-color:
        rgba(15, 27, 61, 0.08);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(247, 252, 250, 0.92)
        );

    box-shadow:
        0 18px 45px
        rgba(15, 27, 61, 0.08);

}


body.light-theme .team-card:hover,
[data-theme="light"] .team-card:hover {

    border-color:
        rgba(16, 185, 129, 0.45);

    box-shadow:
        0 25px 55px
        rgba(15, 27, 61, 0.12),
        0 0 30px
        rgba(16, 185, 129, 0.08);

}


/* =========================================================
   LIGHT CARD TOP LINE
========================================================= */

body.light-theme .team-card::before,
[data-theme="light"] .team-card::before {

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(16, 185, 129, 0.55),
            transparent
        );

}


/* =========================================================
   LIGHT MEMBER IMAGE
========================================================= */

body.light-theme .member-img,
[data-theme="light"] .member-img {

    border-color: #10B981;

    box-shadow:
        0 12px 30px
        rgba(16, 185, 129, 0.20);

}


body.light-theme .team-card:hover .member-img,
[data-theme="light"] .team-card:hover .member-img {

    border-color: #0F9F7D;

}


/* =========================================================
   LIGHT MEMBER NAME
========================================================= */

body.light-theme .team-card h3,
[data-theme="light"] .team-card h3 {

    color: #0F1B3D;

}


/* =========================================================
   LIGHT ROLE
========================================================= */

body.light-theme .role,
[data-theme="light"] .role {

    background:
        rgba(16, 185, 129, 0.09);

    border-color:
        rgba(16, 185, 129, 0.20);

    color: #0B9272;

}


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

body.light-theme .team-card p,
[data-theme="light"] .team-card p {

    color: #68778C;

}


/* =========================================================
   LIGHT SLIDER FADE
========================================================= */

body.light-theme .team-slider::before,
[data-theme="light"] .team-slider::before {

    background:
        linear-gradient(
            to right,
            #F5FBF9,
            rgba(245, 251, 249, 0)
        );

}


body.light-theme .team-slider::after,
[data-theme="light"] .team-slider::after {

    background:
        linear-gradient(
            to left,
            #F5FBF9,
            rgba(245, 251, 249, 0)
        );

}


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

@media (max-width: 992px) {

    .team-section {

        padding: 85px 0 100px;

    }


    .team-card {

        width: 285px;

        flex-basis: 285px;

    }


    .team-track {

        gap: 25px;

    }

}


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

@media (max-width: 768px) {

    .team-section {

        padding: 80px 0;

    }


    .team-heading {

        margin-bottom: 50px;

    }


    .team-heading h2 {

        font-size: 34px;

    }


    .team-heading p {

        font-size: 14px;

        line-height: 1.7;

    }


    .team-subtitle {

        font-size: 11px;

        letter-spacing: 2px;

    }


    .team-subtitle span {

        width: 28px;

    }


    .team-slider {

        padding-top: 65px;

    }


    .team-track {

        gap: 20px;

        padding: 0 15px;

        animation-duration: 30s;

    }


    .team-card {

        width: 270px;

        flex-basis: 270px;

        min-height: 350px;

        padding: 75px 22px 28px;

        border-radius: 22px;

    }


    .member-img {

        width: 105px;

        height: 105px;

    }


    .team-card h3 {

        font-size: 19px;

    }


    .role {

        font-size: 10px;

        padding: 6px 12px;

    }


    .team-card p {

        font-size: 12px;

        line-height: 1.7;

    }


    .team-slider::before,
    .team-slider::after {

        width: 80px;

    }

}


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

@media (max-width: 480px) {

    .team-section {

        padding: 70px 0;

    }


    .team-heading {

        padding: 0 16px;

        margin-bottom: 42px;

    }


    .team-heading h2 {

        font-size: 30px;

    }


    .team-heading p {

        font-size: 13px;

    }


    .team-card {

        width: 250px;

        flex-basis: 250px;

        min-height: 340px;

        padding: 72px 19px 25px;

    }


    .member-img {

        width: 100px;

        height: 100px;

    }


    .team-card h3 {

        font-size: 18px;

    }


    .team-card p {

        font-size: 11.5px;

    }


    .team-slider::before,
    .team-slider::after {

        width: 55px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 360px) {

    .team-heading h2 {

        font-size: 27px;

    }


    .team-card {

        width: 235px;

        flex-basis: 235px;

    }


    .member-img {

        width: 95px;

        height: 95px;

    }

}


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

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

    .team-track {

        animation: none;

    }


    .team-card {

        transition: none;

    }

}