/* =========================================================
   CLASSES OF IT - HERO VIDEO SLIDER
   ========================================================= */

.co-hero {
    position: relative;
    width: 100%;
    height: 435px;
    overflow: hidden;
    isolation: isolate;
    background: #111827;
}

/* =========================================================
   VIDEO LAYER
   ========================================================= */

.co-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*
       Slightly right focused so the people are not
       unnecessarily cut from the important area.
    */
    object-position: 58% center;
    opacity: 0;
    visibility: hidden;
    transform: translateX(35px) scale(1.065);
    filter: blur(3px);
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.4s cubic-bezier(0.22, 1, 0.36, 1), filter 1.2s ease, visibility 1s ease;
}

    /* ACTIVE VIDEO */

    .co-hero-video.active {
        opacity: 1;
        visibility: visible;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }

/* =========================================================
   VIDEO CHANGE ANIMATION
   ========================================================= */

/*
   When JS adds .co-video-changing, the active video
   gets a slightly stronger cinematic movement.
*/

.co-hero.co-video-changing
.co-hero-video.active {
    animation: coVideoReveal 1.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes coVideoReveal {

    0% {
        opacity: 0;
        transform: translateX(45px) scale(1.075);
        filter: blur(5px);
    }

    45% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
}

/* =========================================================
   DARK OVERLAY
   ========================================================= */

.co-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /*
       Much less blue than previous version.
       Left side is darker for text readability.
    */

    background: linear-gradient( 90deg, rgba(8, 15, 31, 0.82) 0%, rgba(10, 18, 36, 0.60) 32%, rgba(10, 18, 35, 0.28) 66%, rgba(8, 14, 28, 0.36) 100% );
}

/* =========================================================
   SOFT RED ACCENT
   ========================================================= */

.co-hero::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    z-index: 8;
    background: linear-gradient( 90deg, transparent 0%, rgba(231, 25, 55, 0.9) 30%, rgba(231, 25, 55, 0.2) 70%, transparent 100% );
    opacity: 0.7;
}

/* =========================================================
   ANIMATED GRID
   ========================================================= */

.co-hero-grid {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.08;
    background-image: linear-gradient( rgba(255, 255, 255, 0.08) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px );
    background-size: 55px 55px;
    mask-image: linear-gradient( 90deg, rgba(0, 0, 0, 0.8), transparent 90% );
    animation: coGridMove 22s linear infinite;
}

@keyframes coGridMove {

    from {
        background-position: 0 0;
    }

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

/* =========================================================
   FLOATING GLOW
   ========================================================= */

.co-hero-glow {
    position: absolute;
    z-index: 2;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(85px);
    opacity: 0.12;
}

.co-glow-1 {
    width: 250px;
    height: 250px;
    left: 45%;
    top: -150px;
    background: #302360;
    animation: coGlowOne 8s ease-in-out infinite alternate;
}

.co-glow-2 {
    width: 190px;
    height: 190px;
    right: -70px;
    bottom: -110px;
    background: #e71937;
    animation: coGlowTwo 9s ease-in-out infinite alternate;
}

@keyframes coGlowOne {

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

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

@keyframes coGlowTwo {

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

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

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

.co-hero-container {
    position: relative;
    z-index: 5;
    width: min(1180px, calc(100% - 70px));
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

.co-hero-content {
    width: 620px;
    padding-top: 2px;
    animation: coContentIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes coContentIn {

    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Small movement when video changes */

.co-hero.co-video-changing
.co-hero-content {
    animation: coContentChange 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes coContentChange {

    0% {
        opacity: 0.72;
        transform: translateY(8px);
    }

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

/* =========================================================
   BADGE
   ========================================================= */

.co-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    margin-bottom: 15px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50px;
    background: rgba(10, 18, 35, 0.42);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* =========================================================
   BADGE DOT
   ========================================================= */

.co-badge-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #e71937;
    box-shadow: 0 0 0 4px rgba(231, 25, 55, 0.12), 0 0 13px rgba(231, 25, 55, 0.65);
    animation: coBadgePulse 1.8s ease-in-out infinite;
}

@keyframes coBadgePulse {

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

    50% {
        transform: scale(1.22);
    }
}

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

.co-hero h1 {
    margin: 0;
    max-width: 650px;
    color: #ffffff;
    font-size: clamp(40px, 4.6vw, 60px);
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -2px;
}

    .co-hero h1 span {
        display: block;
        background: linear-gradient( 90deg, #ffffff 0%, #ffb8c3 45%, #ffffff 100% );
        background-size: 200% auto;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: coTextGradient 4s linear infinite;
    }

@keyframes coTextGradient {

    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}

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

.co-hero-content p {
    max-width: 545px;
    margin: 17px 0 22px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    line-height: 1.65;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}

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

.co-hero-buttons {
    display: flex;
    align-items: center;
    gap: 11px;
}

.co-btn-primary,
.co-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 45px;
    padding: 0 19px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

/* PRIMARY */

.co-btn-primary {
    color: #ffffff;
    background: linear-gradient( 135deg, #e71937, #c70f2d );
    box-shadow: 0 10px 28px rgba(231, 25, 55, 0.28);
}

    .co-btn-primary:hover {
        color: #ffffff;
        transform: translateY(-3px);
        box-shadow: 0 15px 32px rgba(231, 25, 55, 0.38);
    }

    .co-btn-primary span {
        font-size: 18px;
        transition: transform 0.3s ease;
    }

    .co-btn-primary:hover span {
        transform: translateX(4px);
    }

/* OUTLINE */

.co-btn-outline {
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.055);
    backdrop-filter: blur(10px);
}

    .co-btn-outline:hover {
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.55);
        background: rgba(255, 255, 255, 0.12);
        transform: translateY(-3px);
    }

/* =========================================================
   FLOATING PRACTICAL LEARNING CARD
   ========================================================= */

.co-hero-side-card {
    position: absolute;
    right: 1.5%;
    bottom: 75px;
    width: 230px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 13px;
    background: rgba(12, 23, 45, 0.65);
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
    animation: coFloatingCard 4.5s ease-in-out infinite;
}

@keyframes coFloatingCard {

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

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

.co-side-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 14px;
    border-radius: 10px;
    background: linear-gradient( 135deg, #302360, #e71937 );
}

.co-hero-side-card strong {
    display: block;
    margin-bottom: 3px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
}

.co-hero-side-card span {
    display: block;
    color: rgba(255, 255, 255, 0.58);
    font-size: 9px;
    line-height: 1.4;
}

/* =========================================================
   VIDEO INDICATORS
   ========================================================= */

.co-video-indicators {
    position: absolute;
    z-index: 10;
    right: 26px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.co-video-indicator {
    display: block;
    width: 4px;
    height: 18px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.32);
    transition: height 0.45s ease, background 0.45s ease, box-shadow 0.45s ease, transform 0.45s ease;
}

    .co-video-indicator.active {
        height: 40px;
        background: #e71937;
        box-shadow: 0 0 15px rgba(231, 25, 55, 0.65);
        transform: scaleX(1.2);
    }

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

@media (max-width: 900px) {

    .co-hero {
        height: 385px;
    }

    .co-hero-video {
        object-position: 60% center;
    }

    .co-hero-container {
        width: calc(100% - 50px);
    }

    .co-hero-content {
        width: 570px;
    }

    .co-hero h1 {
        font-size: clamp(34px, 6vw, 50px);
    }

    .co-hero-content p {
        max-width: 460px;
        font-size: 13px;
        margin: 13px 0 18px;
    }

    .co-hero-side-card {
        right: 0;
        bottom: 55px;
        transform: scale(0.88);
    }

    .co-hero-scroll {
        display: none;
    }
}

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

@media (max-width: 768px) {

    .co-hero {
        height: 350px;
    }

    .co-hero-video {
        object-position: 62% center;
    }

    .co-hero-overlay {
        background: linear-gradient( 90deg, rgba(8, 15, 31, 0.86) 0%, rgba(8, 15, 31, 0.60) 65%, rgba(8, 15, 31, 0.40) 100% );
    }

    .co-hero-container {
        width: calc(100% - 34px);
    }

    .co-hero-content {
        width: 100%;
    }

    .co-hero-badge {
        margin-bottom: 11px;
        padding: 6px 12px;
        font-size: 9px;
    }

    .co-hero h1 {
        max-width: 470px;
        font-size: clamp(30px, 8vw, 42px);
        line-height: 1.05;
        letter-spacing: -1.3px;
    }

    .co-hero-content p {
        max-width: 390px;
        margin: 12px 0 17px;
        font-size: 11px;
        line-height: 1.55;
    }

    .co-btn-primary,
    .co-btn-outline {
        min-height: 40px;
        padding: 0 14px;
        font-size: 10px;
        border-radius: 7px;
    }

        .co-btn-primary span {
            font-size: 15px;
        }

    .co-hero-side-card {
        display: none;
    }

    .co-video-indicators {
        right: 12px;
    }

    .co-video-indicator {
        width: 3px;
        height: 14px;
    }

        .co-video-indicator.active {
            height: 30px;
        }

    .co-hero-grid {
        background-size: 38px 38px;
    }
}

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

@media (max-width: 480px) {

    .co-hero {
        height: 325px;
    }

    .co-hero-video {
        /*
           Keep the main subjects visible
           on narrow screens.
        */
        object-position: 67% center;
    }

    .co-hero-container {
        width: calc(100% - 28px);
    }

    .co-hero h1 {
        font-size: 28px;
        letter-spacing: -0.8px;
    }

    .co-hero-content p {
        max-width: 315px;
        margin: 10px 0 14px;
        font-size: 10px;
    }

    .co-hero-buttons {
        gap: 7px;
    }

    .co-btn-primary,
    .co-btn-outline {
        min-height: 36px;
        padding: 0 12px;
        font-size: 9px;
    }

    .co-video-indicators {
        display: none;
    }

    .co-hero-glow {
        opacity: 0.08;
    }

    .co-hero-grid {
        opacity: 0.05;
    }
}

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

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

    .co-hero-video,
    .co-hero-grid,
    .co-hero-glow,
    .co-hero-side-card,
    .co-badge-dot,
    .co-hero h1 span,
    .co-hero-content {
        animation: none !important;
        transition: none !important;
    }
}









/* =========================================================
   CLASSESOFIT — ABOUT 3D PREMIUM SECTION
========================================================= */

.co-about3d {
    position: relative;
    width: 100%;
    padding: 34px 0 54px;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient( circle at 12% 35%, rgba(48, 35, 96, 0.10), transparent 28% ), radial-gradient( circle at 88% 65%, rgba(231, 25, 55, 0.07), transparent 27% ), linear-gradient( 135deg, #f8f9fc 0%, #ffffff 48%, #f5f6fb 100% );
}


/* =========================================================
   3D PERSPECTIVE GRID
========================================================= */

.co-about3d-grid {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -220px;
    height: 570px;
    background-image: linear-gradient( rgba(32,57,111,0.075) 1px, transparent 1px ), linear-gradient( 90deg, rgba(32,57,111,0.075) 1px, transparent 1px );
    background-size: 55px 55px;
    transform: perspective(500px) rotateX(62deg) scale(1.3);
    transform-origin: center bottom;
    opacity: .55;
    mask-image: linear-gradient( to top, rgba(0,0,0,1), rgba(0,0,0,.6), transparent );
    z-index: -3;
    animation: coGridMove 12s linear infinite;
}


@keyframes coGridMove {

    from {
        background-position: 0 0, 0 0;
    }

    to {
        background-position: 0 55px, 55px 0;
    }
}


/* =========================================================
   GLOW ORBS
========================================================= */

.co-about3d-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
    z-index: -4;
}


.co-about3d-glow-one {
    width: 420px;
    height: 420px;
    left: -220px;
    top: 70px;
    background: radial-gradient( circle, rgba(48,35,96,.13), transparent 70% );
    animation: coGlowFloat 9s ease-in-out infinite;
}


.co-about3d-glow-two {
    width: 360px;
    height: 360px;
    right: -150px;
    top: 20%;
    background: radial-gradient( circle, rgba(231,25,55,.09), transparent 70% );
    animation: coGlowFloat 11s ease-in-out infinite reverse;
}


.co-about3d-glow-three {
    width: 240px;
    height: 240px;
    left: 42%;
    bottom: -80px;
    background: radial-gradient( circle, rgba(32,57,111,.10), transparent 70% );
    animation: coGlowPulse 6s ease-in-out infinite;
}


@keyframes coGlowFloat {

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

    50% {
        transform: translate3d(30px,-25px,0);
    }
}


@keyframes coGlowPulse {

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

    50% {
        transform: scale(1.15);
        opacity: .8;
    }
}


/* =========================================================
   PARTICLES
========================================================= */

.co-about3d-particle {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #20396F;
    box-shadow: 0 0 15px rgba(32,57,111,.45);
    z-index: -1;
    animation: coParticleFloat 7s ease-in-out infinite;
}


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

.particle-2 {
    left: 46%;
    top: 13%;
    width: 4px;
    height: 4px;
    background: #E71937;
}

.particle-3 {
    right: 11%;
    top: 32%;
    width: 7px;
    height: 7px;
    background: #302360;
}

.particle-4 {
    right: 25%;
    bottom: 20%;
}

.particle-5 {
    left: 38%;
    bottom: 12%;
    width: 4px;
    height: 4px;
    background: #E71937;
}


@keyframes coParticleFloat {

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

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


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

.co-about3d-container {
    width: min( 1210px, calc(100% - 40px) );
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(480px, .95fr) minmax(480px, 1.05fr);
    gap: 80px;
    align-items: center;
}


/* =========================================================
   VISUAL AREA
========================================================= */

.co-about3d-visual {
    position: relative;
    height: 570px;
    perspective: 1400px;
    transform-style: preserve-3d;
}


/* =========================================================
   ORBIT RINGS
========================================================= */

.co-orbit {
    position: absolute;
    border: 1px solid;
    border-radius: 50%;
    pointer-events: none;
    transform-style: preserve-3d;
}


.co-orbit-one {
    width: 470px;
    height: 470px;
    left: 0;
    top: 50px;
    border-color: rgba(32,57,111,.13);
    transform: rotateX(68deg) rotateZ(-20deg);
    animation: coOrbitRotate 18s linear infinite;
}


.co-orbit-two {
    width: 390px;
    height: 390px;
    left: 45px;
    top: 90px;
    border-color: rgba(231,25,55,.12);
    transform: rotateY(67deg) rotateZ(20deg);
    animation: coOrbitRotateReverse 14s linear infinite;
}


.co-orbit-three {
    width: 510px;
    height: 510px;
    left: -20px;
    top: 25px;
    border-color: rgba(48,35,96,.08);
    transform: rotateX(72deg) rotateZ(45deg);
    animation: coOrbitRotate 25s linear infinite;
}


@keyframes coOrbitRotate {

    from {
        transform: rotateX(68deg) rotateZ(0deg);
    }

    to {
        transform: rotateX(68deg) rotateZ(360deg);
    }
}


@keyframes coOrbitRotateReverse {

    from {
        transform: rotateY(67deg) rotateZ(360deg);
    }

    to {
        transform: rotateY(67deg) rotateZ(0deg);
    }
}


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

.co-about3d-main-card {
    position: absolute;
    left: 35px;
    top: 55px;
    width: 365px;
    height: 440px;
    padding: 9px;
    border-radius: 30px;
    background: linear-gradient( 145deg, rgba(255,255,255,.95), rgba(239,241,248,.92) );
    box-shadow: 0 45px 80px rgba(20,38,77,.18), 0 15px 30px rgba(20,38,77,.08);
    transform: translateZ(80px) rotateY(7deg) rotateX(2deg);
    transform-style: preserve-3d;
    z-index: 5;
    transition: transform .8s cubic-bezier(.22,1,.36,1), box-shadow .8s ease;
    overflow: hidden;
}


    .co-about3d-main-card:hover {
        transform: translateZ(120px) rotateY(0deg) rotateX(0deg) translateY(-10px);
        box-shadow: 0 55px 100px rgba(20,38,77,.24), 0 20px 40px rgba(20,38,77,.12);
    }


.co-about3d-main-image {
    width: 100%;
    height: 100%;
    border-radius: 23px;
    overflow: hidden;
    position: relative;
}


    .co-about3d-main-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transform: scale(1.04);
        transition: transform 1.2s cubic-bezier(.22,1,.36,1);
    }


.co-about3d-main-card:hover img {
    transform: scale(1.10);
}


/* Image shine */

.co-about3d-image-shine {
    position: absolute;
    width: 160px;
    height: 600px;
    top: -100px;
    left: -250px;
    transform: rotate(25deg);
    background: linear-gradient( 90deg, transparent, rgba(255,255,255,.28), transparent );
    z-index: 7;
    transition: left 1s ease;
}


.co-about3d-main-card:hover
.co-about3d-image-shine {
    left: 430px;
}


/* =========================================================
   MAIN IMAGE LABEL
========================================================= */

.co-about3d-image-label {
    position: absolute;
    left: 28px;
    bottom: 28px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border-radius: 14px;
    background: rgba(15,27,54,.78);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(15px);
    color: #fff;
    z-index: 10;
    transform: translateZ(45px);
}


.co-label-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E71937;
    box-shadow: 0 0 0 5px rgba(231,25,55,.13);
    animation: coLabelPulse 2s infinite;
}


.co-about3d-image-label div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}


.co-about3d-image-label strong {
    font-size: 12px;
    font-weight: 700;
}


.co-about3d-image-label small {
    font-size: 9px;
    color: rgba(255,255,255,.65);
}


@keyframes coLabelPulse {

    0%, 100% {
        box-shadow: 0 0 0 5px rgba(231,25,55,.10);
    }

    50% {
        box-shadow: 0 0 0 9px rgba(231,25,55,.02);
    }
}


/* =========================================================
   SECOND IMAGE
========================================================= */

.co-about3d-second-card {
    position: absolute;
    right: 0;
    bottom: 45px;
    width: 250px;
    height: 205px;
    padding: 7px;
    border-radius: 24px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 30px 60px rgba(20,38,77,.20);
    transform: translateZ(150px) rotateY(-9deg) rotateX(3deg);
    transform-style: preserve-3d;
    z-index: 10;
    animation: coSecondImageFloat 5s ease-in-out infinite;
    transition: transform .6s ease;
}


    .co-about3d-second-card:hover {
        transform: translateZ(190px) rotateY(0deg) rotateX(0deg) translateY(-8px);
    }


.co-about3d-second-image {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 18px;
}


    .co-about3d-second-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transition: transform .8s ease;
    }


.co-about3d-second-card:hover img {
    transform: scale(1.08);
}


@keyframes coSecondImageFloat {

    0%, 100% {
        transform: translateZ(150px) rotateY(-9deg) rotateX(3deg) translateY(0);
    }

    50% {
        transform: translateZ(150px) rotateY(-5deg) rotateX(2deg) translateY(-14px);
    }
}


/* =========================================================
   SECOND IMAGE LABEL
========================================================= */

.co-second-floating-label {
    position: absolute;
    right: -18px;
    top: -18px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border-radius: 11px;
    background: linear-gradient( 135deg, #20396F, #302360 );
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    box-shadow: 0 12px 25px rgba(32,57,111,.25);
    transform: translateZ(60px);
}


    .co-second-floating-label i {
        color: #F0445D;
    }


/* =========================================================
   EXPERIENCE CARD
========================================================= */

.co-about3d-experience {
    position: absolute;
    left: 0;
    bottom: 28px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    min-width: 190px;
    border-radius: 17px;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(32,57,111,.08);
    box-shadow: 0 20px 45px rgba(20,38,77,.14);
    backdrop-filter: blur(18px);
    transform: translateZ(180px);
    z-index: 15;
    animation: coExperience3DFloat 4.5s ease-in-out infinite;
}


.co-exp-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient( 135deg, #E71937, #C70F2D );
    box-shadow: 0 10px 20px rgba(231,25,55,.20);
}


.co-exp-data {
    display: flex;
    flex-direction: column;
    gap: 2px;
}


.co-exp-number {
    font-size: 25px;
    line-height: 1;
    font-weight: 800;
    color: #20396F;
}


.co-exp-label {
    font-size: 9px;
    color: #7a8395;
}


@keyframes coExperience3DFloat {

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

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


/* =========================================================
   CODE WINDOW
========================================================= */

.co-about3d-code {
    position: absolute;
    right: 42px;
    top: 0;
    width: 145px;
    height: 130px;
    padding: 11px;
    border-radius: 16px;
    background: linear-gradient( 145deg, #111d39, #241d4a );
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 25px 45px rgba(15,27,54,.28);
    transform: translateZ(210px) rotate(5deg);
    z-index: 20;
    animation: coCodeWindowFloat 5s ease-in-out infinite;
}


.co-code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}


.co-code-dots {
    display: flex;
    gap: 4px;
}


    .co-code-dots span {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(255,255,255,.4);
    }


.co-code-header small {
    font-size: 7px;
    color: rgba(255,255,255,.45);
}


.co-code-body {
    padding-top: 12px;
    font-family: "Courier New", monospace;
    font-size: 9px;
    line-height: 1.8;
    color: #fff;
}


.code-purple {
    color: #c792ea;
}

.code-red {
    color: #f07178;
}

.code-blue {
    color: #82aaff;
}

.code-string {
    color: #c3e88d;
}

.code-white {
    color: #d6deeb;
}

.code-space {
    display: inline-block;
    width: 13px;
}


@keyframes coCodeWindowFloat {

    0%, 100% {
        transform: translateZ(210px) rotate(5deg) translateY(0);
    }

    50% {
        transform: translateZ(210px) rotate(2deg) translateY(-13px);
    }
}


/* =========================================================
   FLOATING TECHNOLOGY ICONS
========================================================= */

.co-floating-tech {
    position: absolute;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: rgba(255,255,255,.90);
    border: 1px solid rgba(32,57,111,.08);
    box-shadow: 0 18px 35px rgba(20,38,77,.13);
    backdrop-filter: blur(12px);
    z-index: 18;
    font-size: 19px;
    transform-style: preserve-3d;
}


.co-tech-one {
    left: -30px;
    top: 180px;
    color: #e44d26;
    animation: coTechFloat 4s ease-in-out infinite;
}


.co-tech-two {
    right: 65px;
    top: 180px;
    color: #e7c900;
    animation: coTechFloat 5s ease-in-out infinite 1s;
}


.co-tech-three {
    right: 8px;
    top: 251px;
    color: #20396F;
    animation: coTechFloat 4.5s ease-in-out infinite 1.5s;
}


@keyframes coTechFloat {

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

    50% {
        transform: translateY(-13px) rotate(6deg);
    }
}


/* =========================================================
   3D FLOOR SHADOW
========================================================= */

.co-about3d-floor {
    position: absolute;
    left: 80px;
    bottom: 8px;
    width: 350px;
    height: 65px;
    border-radius: 50%;
    background: radial-gradient( ellipse, rgba(32,57,111,.20), transparent 70% );
    filter: blur(8px);
    transform: rotateX(70deg) translateZ(-30px);
    z-index: 1;
    animation: coFloorPulse 4s ease-in-out infinite;
}


@keyframes coFloorPulse {

    0%, 100% {
        transform: rotateX(70deg) translateZ(-30px) scaleX(1);
    }

    50% {
        transform: rotateX(70deg) translateZ(-30px) scaleX(.82);
    }
}


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

.co-about3d-content {
    position: relative;
    z-index: 30;
}


/* Eyebrow */

.co-about3d-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 19px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.5px;
    color: #E71937;
}


.co-eyebrow-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #E71937;
    box-shadow: 0 0 0 5px rgba(231,25,55,.09);
    animation: coLabelPulse 2s infinite;
}


.co-eyebrow-line {
    width: 45px;
    height: 1px;
    background: linear-gradient( 90deg, #E71937, transparent );
}


/* Heading */

.co-about3d-title {
    margin: 0;
    max-width: 650px;
    font-size: clamp(43px, 4vw, 68px);
    line-height: 1.02;
    letter-spacing: -3px;
    font-weight: 850;
    color: #14264D;
}


    .co-about3d-title span {
        position: relative;
        color: #302360;
    }


        .co-about3d-title span::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0px;
            width: 100%;
            height: 7px;
            border-radius: 20px;
            background: linear-gradient( 90deg, #E71937, rgba(231,25,55,.15) );
            transform: skewX(-20deg);
            opacity: .75;
        }


/* Lead */

.co-about3d-lead {
    margin: 30px 0 12px;
    font-size: 18px;
    line-height: 1.6;
    font-weight: 700;
    color: #334261;
}


/* Main text */

.co-about3d-text {
    max-width: 630px;
    margin: 0 0 30px;
    font-size: 14px;
    line-height: 1.85;
    color: #727c91;
}


/* =========================================================
   FEATURE LIST
========================================================= */

.co-about3d-features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 650px;
}


.co-about3d-feature {
    position: relative;
    display: grid;
    grid-template-columns: 34px 48px 1fr 30px;
    align-items: center;
    gap: 13px;
    min-height: 76px;
    padding: 10px 14px;
    border-radius: 17px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(32,57,111,.075);
    box-shadow: 0 8px 25px rgba(20,38,77,.045);
    backdrop-filter: blur(12px);
    overflow: hidden;
    transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background .45s ease;
}


    .co-about3d-feature::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: linear-gradient( #20396F, #E71937 );
        transform: scaleY(0);
        transform-origin: center;
        transition: transform .4s ease;
    }


    .co-about3d-feature:hover {
        transform: translateX(8px) translateY(-3px);
        background: rgba(255,255,255,.96);
        box-shadow: 0 20px 40px rgba(20,38,77,.11);
    }


        .co-about3d-feature:hover::before {
            transform: scaleY(1);
        }


.co-feature-number {
    font-size: 10px;
    font-weight: 800;
    color: #A1A8B8;
}


.co-feature-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: #20396F;
    background: linear-gradient( 135deg, rgba(32,57,111,.09), rgba(48,35,96,.08) );
    transition: transform .4s ease, background .4s ease, color .4s ease;
}


.co-about3d-feature:hover .co-feature-icon {
    color: #fff;
    background: linear-gradient( 135deg, #20396F, #302360 );
    transform: rotate(-5deg) scale(1.08);
}


.co-feature-info h4 {
    margin: 0 0 3px;
    font-size: 13px;
    color: #1b2945;
}


.co-feature-info p {
    margin: 0;
    font-size: 10px;
    line-height: 1.5;
    color: #7c8496;
}


.co-feature-arrow {
    font-size: 18px;
    color: #A7ADBA;
    transition: transform .4s ease, color .4s ease;
}


.co-about3d-feature:hover .co-feature-arrow {
    color: #E71937;
    transform: translate(3px,-3px);
}


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

.co-about3d-actions {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 30px;
}


.co-about3d-button {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 15px 21px;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 750;
    border-radius: 12px;
    background: linear-gradient( 135deg, #20396F, #302360 );
    box-shadow: 0 15px 30px rgba(32,57,111,.22);
    transition: transform .4s ease, box-shadow .4s ease;
}


    .co-about3d-button i {
        transition: transform .4s ease;
    }


    .co-about3d-button:hover {
        color: #fff;
        transform: translateY(-4px);
        box-shadow: 0 22px 40px rgba(32,57,111,.28);
    }


        .co-about3d-button:hover i {
            transform: translateX(5px);
        }


.co-about3d-signature {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 10px;
    font-weight: 600;
    color: #858da0;
}


.co-signature-line {
    width: 25px;
    height: 1px;
    background: #E71937;
}


/* =========================================================
   BOTTOM GLOW
========================================================= */

.co-about3d-bottom-glow {
    position: absolute;
    left: 50%;
    bottom: -100px;
    width: 600px;
    height: 180px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient( ellipse, rgba(48,35,96,.12), transparent 70% );
    filter: blur(20px);
    z-index: -1;
}


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

@media (max-width: 1100px) {

    .co-about3d-container {
        grid-template-columns: minmax(400px,.9fr) minmax(400px,1.1fr);
        gap: 45px;
    }

    .co-about3d-visual {
        transform: scale(.88);
        transform-origin: center;
    }

    .co-about3d-title {
        font-size: 48px;
    }
}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {

    .co-about3d {
        padding: 80px 0 90px;
    }

    .co-about3d-container {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .co-about3d-visual {
        width: min(570px,100%);
        margin: 0 auto;
        transform: scale(.9);
        height: 540px;
    }

    .co-about3d-content {
        width: min(700px,100%);
        margin: 0 auto;
    }

    .co-about3d-title {
        font-size: 50px;
    }
}


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

@media (max-width: 650px) {

    .co-about3d {
        min-height: auto;
        padding: 65px 0 75px;
    }

    .co-about3d-container {
        width: calc(100% - 28px);
    }

    .co-about3d-visual {
        height: 445px;
        transform: scale(.75);
        transform-origin: center top;
        margin-bottom: -65px;
    }

    .co-orbit-one {
        width: 410px;
        height: 410px;
        left: 10px;
    }

    .co-orbit-two {
        width: 350px;
        height: 350px;
        left: 40px;
    }

    .co-orbit-three {
        width: 440px;
        height: 440px;
        left: -5px;
    }

    .co-about3d-main-card {
        left: 45px;
        width: 320px;
        height: 390px;
    }

    .co-about3d-second-card {
        width: 220px;
        height: 180px;
        right: 15px;
    }

    .co-about3d-code {
        right: 55px;
    }

    .co-about3d-experience {
        left: 25px;
    }

    .co-about3d-title {
        font-size: clamp(36px,10vw,48px);
        letter-spacing: -1.8px;
    }

    .co-about3d-lead {
        font-size: 16px;
    }

    .co-about3d-text {
        font-size: 13px;
        line-height: 1.75;
    }

    .co-about3d-feature {
        grid-template-columns: 28px 43px 1fr 20px;
        gap: 8px;
        min-height: 72px;
        padding: 9px;
    }

    .co-feature-icon {
        width: 40px;
        height: 40px;
    }

    .co-feature-info h4 {
        font-size: 12px;
    }

    .co-feature-info p {
        font-size: 9px;
    }

    .co-about3d-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 17px;
    }

    .co-about3d-button {
        width: 100%;
        justify-content: center;
    }
}


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

@media (max-width: 480px) {

    .co-about3d {
        padding: 55px 0 65px;
    }

    .co-about3d-visual {
        height: 385px;
        transform: scale(.62);
        margin-bottom: -95px;
    }

    .co-about3d-main-card {
        left: 35px;
        width: 310px;
        height: 370px;
    }

    .co-about3d-second-card {
        right: 0;
        width: 205px;
        height: 165px;
    }

    .co-about3d-experience {
        left: 15px;
    }

    .co-about3d-code {
        right: 30px;
    }

    .co-about3d-title {
        font-size: 34px;
        line-height: 1.08;
    }

    .co-about3d-lead {
        margin-top: 24px;
        font-size: 14px;
    }

    .co-about3d-text {
        font-size: 12px;
    }

    .co-about3d-eyebrow {
        font-size: 9px;
        letter-spacing: 1.8px;
    }

    .co-about3d-feature {
        grid-template-columns: 24px 38px 1fr 15px;
        min-height: 68px;
    }

    .co-feature-icon {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }

    .co-feature-number {
        font-size: 8px;
    }

    .co-feature-info h4 {
        font-size: 11px;
    }

    .co-feature-info p {
        font-size: 8px;
        line-height: 1.4;
    }

    .co-feature-arrow {
        font-size: 14px;
    }
}


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

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

    .co-about3d *,
    .co-about3d *::before,
    .co-about3d *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}




/* =========================================================
   EXPLORE PROGRAMS
========================================================= */

.co-program-section {
    --navy: #020817;
    --navy-2: #06132f;
    --blue: #168cff;
    --cyan: #00eaff;
    --purple: #8b5cff;
    --pink: #ff2e88;
    --red: #ff315c;
    --orange: #ff9d3f;
    position: relative;
    width: 100%;
    min-height: 900px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 55%, rgba(40, 77, 180, .25), transparent 32%), radial-gradient(circle at 15% 50%, rgba(0, 110, 255, .12), transparent 25%), radial-gradient(circle at 85% 50%, rgba(148, 35, 255, .12), transparent 25%), #010611;
    color: #fff;
    isolation: isolate;
}


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

.co-program-bg {
    position: absolute;
    inset: 0;
    z-index: -5;
    background: linear-gradient( 180deg, rgba(0,0,0,.05), rgba(1,8,22,.75) );
}


.co-bg-grid {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -12%;
    height: 55%;
    z-index: -3;
    background-image: linear-gradient( rgba(40,120,255,.17) 1px, transparent 1px ), linear-gradient( 90deg, rgba(40,120,255,.17) 1px, transparent 1px );
    background-size: 70px 70px;
    transform: perspective(700px) rotateX(62deg);
    transform-origin: center bottom;
    mask-image: linear-gradient( to top, black, transparent );
    animation: gridMove 14s linear infinite;
}

@keyframes gridMove {

    from {
        background-position: 0 0, 0 0;
    }

    to {
        background-position: 0 70px, 70px 0;
    }
}


/* =========================================================
   3D BACKGROUND BLOCKS
========================================================= */

.co-bg-block {
    position: absolute;
    z-index: -2;
    border: 1px solid rgba(50,145,255,.4);
    background: linear-gradient( 135deg, rgba(15,65,140,.20), rgba(2,10,32,.08) );
    box-shadow: inset 0 0 30px rgba(0,130,255,.08), 0 0 30px rgba(0,100,255,.06);
    transform: perspective(900px) rotateY(-10deg);
    opacity: .75;
}

.co-block-left-1 {
    width: 210px;
    height: 260px;
    left: 2%;
    top: 70px;
}

.co-block-left-2 {
    width: 120px;
    height: 170px;
    left: 14%;
    top: 100px;
}

.co-block-right-1 {
    width: 200px;
    height: 260px;
    right: 2%;
    top: 70px;
    transform: perspective(900px) rotateY(10deg);
}

.co-block-right-2 {
    width: 120px;
    height: 170px;
    right: 14%;
    top: 100px;
    transform: perspective(900px) rotateY(10deg);
}


/* =========================================================
   SIDE WORDS
========================================================= */

.co-side-word {
    position: absolute;
    z-index: -1;
    font-size: 17px;
    line-height: 1.8;
    letter-spacing: 1px;
    color: rgba(20,130,255,.55);
    text-transform: uppercase;
    user-select: none;
}

.co-side-word-left {
    left: 7%;
    top: 90px;
}

.co-side-word-right {
    right: 7%;
    top: 90px;
    color: rgba(88,105,255,.55);
}


/* =========================================================
   ORBS
========================================================= */

.co-bg-orb {
    position: absolute;
    border-radius: 50%;
    animation: orbFloat 5s ease-in-out infinite;
    z-index: -1;
}

.orb-blue-1 {
    width: 52px;
    height: 52px;
    left: 3%;
    top: 230px;
    background: radial-gradient( circle at 35% 30%, #fff, #00aaff 8%, #0066d8 40%, #021a52 70% );
    box-shadow: 0 0 25px #008cff, 0 0 70px rgba(0,120,255,.5);
}

.orb-blue-2 {
    width: 32px;
    height: 32px;
    left: 10%;
    top: 290px;
    background: radial-gradient( circle at 35% 30%, #fff, #00aaff 15%, #0755b8 60% );
    box-shadow: 0 0 25px #008cff;
    animation-delay: 1s;
}

.orb-pink-1 {
    width: 42px;
    height: 42px;
    right: 4%;
    bottom: 110px;
    background: radial-gradient( circle at 35% 30%, #fff, #ff3c9b 12%, #ba075d 60% );
    box-shadow: 0 0 30px #ff218b;
    animation-delay: 1.5s;
}

.orb-purple-1 {
    width: 28px;
    height: 28px;
    right: 10%;
    top: 230px;
    background: radial-gradient( circle at 35% 30%, #fff, #8e54ff 15%, #381098 65% );
    box-shadow: 0 0 25px #793cff;
    animation-delay: 2s;
}

@keyframes orbFloat {

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

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


/* =========================================================
   PARTICLES
========================================================= */

.co-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px #fff, 0 0 18px #168cff;
    animation: particlePulse 2.5s ease-in-out infinite;
}

.pp1 {
    left: 15%;
    top: 18%;
}

.pp2 {
    left: 27%;
    top: 8%;
    animation-delay: .5s;
}

.pp3 {
    left: 45%;
    top: 14%;
    animation-delay: 1s;
}

.pp4 {
    left: 66%;
    top: 9%;
    animation-delay: 1.4s;
}

.pp5 {
    right: 15%;
    top: 18%;
    animation-delay: .7s;
}

.pp6 {
    right: 28%;
    top: 34%;
    animation-delay: 1.2s;
}

.pp7 {
    left: 20%;
    bottom: 28%;
    animation-delay: .3s;
}

.pp8 {
    right: 20%;
    bottom: 28%;
    animation-delay: 1.5s;
}

.pp9 {
    left: 50%;
    bottom: 17%;
    animation-delay: .9s;
}

.pp10 {
    right: 7%;
    bottom: 12%;
    animation-delay: 1.8s;
}

@keyframes particlePulse {

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

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


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

.co-program-container {
    width: min(1800px, 94%);
    margin: auto;
    position: relative;
    z-index: 2;
}


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

.co-program-heading {
    text-align: center;
    padding-top: 24px;
}

.co-program-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 19px;
    border-radius: 50px;
    background: linear-gradient( 180deg, rgba(19,36,76,.9), rgba(6,16,39,.9) );
    border: 1px solid rgba(115,145,220,.3);
    box-shadow: inset 0 0 15px rgba(80,120,255,.08), 0 0 20px rgba(20,80,255,.08);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #f4f6ff;
}

    .co-program-badge span {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #ff315c;
        box-shadow: 0 0 8px #ff315c, 0 0 18px #ff315c;
        animation: badgePulse 1.8s infinite;
    }

@keyframes badgePulse {

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

    50% {
        transform: scale(1.5);
        opacity: .6;
    }
}


.co-program-heading h2 {
    margin: 18px 0 5px;
    font-size: clamp(42px, 4.5vw, 68px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -2px;
    color: #fff;
    text-shadow: 0 5px 25px rgba(0,0,0,.4);
}

    .co-program-heading h2 strong {
        background: linear-gradient( 90deg, #4f7dff, #a04cff, #ed4fb5 );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

.co-program-heading p {
    max-width: 670px;
    margin: 13px auto 0;
    font-size: 17px;
    line-height: 1.45;
    color: rgba(220,228,248,.8);
}


/* =========================================================
   MAIN STAGE
========================================================= */

.co-program-stage {
    position: relative;
    height: 585px;
    margin-top: 15px;
    perspective: 1400px;
}


/* =========================================================
   COURSE CARDS
========================================================= */

.co-program-card {
    position: absolute;
    width: 315px;
    height: 175px;
    padding: 19px 22px;
    border-radius: 23px;
    overflow: visible;
    background: linear-gradient( 135deg, rgba(14,31,70,.94), rgba(3,12,32,.90) );
    border: 1px solid rgba(53,132,255,.7);
    box-shadow: inset 0 0 35px rgba(30,100,255,.08), 0 15px 40px rgba(0,0,0,.4);
    transform-style: preserve-3d;
    transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
    z-index: 5;
}

    .co-program-card:hover {
        transform: translateY(-10px) rotateX(3deg) rotateY(-3deg) scale(1.025);
        box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 35px rgba(30,130,255,.3);
    }


/* TOP ROW */

.co-card-number {
    font-size: 37px;
    line-height: 1;
    font-weight: 800;
    color: #6597ff;
    position: relative;
    z-index: 2;
}

.co-card-line {
    position: absolute;
    top: 36px;
    left: 67px;
    width: 35px;
    height: 1px;
    background: linear-gradient( 90deg, currentColor, transparent );
    opacity: .7;
}

.co-program-card h3 {
    position: relative;
    z-index: 2;
    margin: 7px 0 5px;
    font-size: 20px;
    line-height: 1.15;
    color: #fff;
    margin-top: 44px;
}

.co-program-card p {
    position: relative;
    z-index: 2;
    width: 62%;
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: rgba(230,236,252,.78);
}


/* ARROW */

.co-card-arrow {
    position: absolute;
    left: 177px;
    bottom: 17px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    transition: .35s ease;
}

    .co-card-arrow:hover {
        background: #fff;
        color: #07132d;
        transform: rotate(-10deg) scale(1.1);
    }


/* =========================================================
   CARD COLORS
========================================================= */

.card-01 {
    left: 11%;
    top: 0;
    border-color: #158cff;
    box-shadow: 0 0 30px rgba(0,125,255,.16), inset 0 0 30px rgba(0,125,255,.08);
}

.card-02 {
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    border-color: #ff285f;
    box-shadow: 0 0 30px rgba(255,35,90,.18), inset 0 0 30px rgba(255,35,90,.08);
}

    .card-02:hover {
        transform: translateX(-50%) translateY(-10px) rotateX(3deg) scale(1.025);
    }

.card-03 {
    right: 11%;
    top: 0;
    border-color: #8254ff;
    box-shadow: 0 0 30px rgba(120,70,255,.18), inset 0 0 30px rgba(120,70,255,.08);
}

.card-04 {
    left: 2%;
    top: 230px;
    border-color: #ff9c42;
    box-shadow: 0 0 30px rgba(255,140,40,.16), inset 0 0 30px rgba(255,140,40,.08);
}

.card-05 {
    right: 2%;
    top: 230px;
    border-color: #00d6df;
    box-shadow: 0 0 30px rgba(0,215,225,.16), inset 0 0 30px rgba(0,215,225,.08);
}

.card-06 {
    right: 10%;
    top: 400px;
    border-color: #ff3187;
    box-shadow: 0 0 30px rgba(255,40,130,.18), inset 0 0 30px rgba(255,40,130,.08);
}


/* =========================================================
   OBJECTS
========================================================= */

.co-card-object {
    position: absolute;
    right: -19px;
    bottom: -18px;
    width: 60px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    animation: objectFloat 4s ease-in-out infinite;
}

@keyframes objectFloat {

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

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


/* PLATFORM */

.co-card-platform {
    position: absolute;
    right: -55px;
    bottom: -38px;
    width: 170px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(30,130,255,.8);
    background: radial-gradient( ellipse, rgba(0,110,255,.25), transparent 65% );
    box-shadow: 0 0 20px rgba(0,110,255,.45), inset 0 0 18px rgba(0,110,255,.35);
    transform: rotateX(62deg);
    animation: platformPulse 2.5s ease-in-out infinite;
}

@keyframes platformPulse {

    0%,100% {
        transform: rotateX(62deg) scaleX(1);
    }

    50% {
        transform: rotateX(62deg) scaleX(1.08);
    }
}


/* =========================================================
   CODE OBJECT
========================================================= */

.object-browser {
    position: absolute;
    width: 85px;
    height: 65px;
    border-radius: 10px;
    background: linear-gradient( 145deg, #3467ff, #1233a4 );
    border: 2px solid #5b9dff;
    box-shadow: 0 0 20px rgba(40,100,255,.7);
    transform: rotate(-4deg) perspective(500px) rotateX(5deg);
}

    .object-browser span {
        position: relative;
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin: 8px 1px 0 3px;
    }

        .object-browser span:nth-child(1) {
            background: #ffcc42;
        }

        .object-browser span:nth-child(2) {
            background: #54e36b;
        }

        .object-browser span:nth-child(3) {
            background: #ff5472;
        }

.object-code-symbol {
    position: absolute;
    color: #fff;
    font-size: 30px;
    font-weight: 800;
    text-shadow: 0 0 12px #fff;
}


/* =========================================================
   MARKETING
========================================================= */

.object-marketing {
    width: 76px;
    height: 72px;
    border-radius: 18px;
    background: linear-gradient( 145deg, #ff426d, #8c25c9 );
    transform: rotate(-8deg);
    box-shadow: 0 0 30px rgba(255,45,130,.55);
}

    .object-marketing > i {
        font-size: 40px;
        color: #fff;
        text-shadow: 0 0 15px #fff;
    }

.social-icons {
    position: absolute;
    right: -38px;
    top: -20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .social-icons span {
        width: 27px;
        height: 27px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 7px;
        background: linear-gradient( 145deg, #ff4b85, #6432ff );
        box-shadow: 0 0 12px rgba(255,40,150,.5);
        font-size: 13px;
    }


/* =========================================================
   CS CHIP
========================================================= */

.object-cs {
    width: 85px;
    height: 85px;
}

.cs-chip {
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient( 145deg, #7f52ff, #5426bd );
    border: 3px solid #c8aaff;
    box-shadow: 0 0 30px rgba(125,70,255,.7);
    font-size: 25px;
    font-weight: 800;
}

.chip-pin {
    position: absolute;
    width: 8px;
    height: 22px;
    background: #b48aff;
    box-shadow: 0 0 8px #8d55ff;
}

.pin-1 {
    top: 0;
    left: 21px;
}

.pin-2 {
    top: 0;
    right: 21px;
}

.pin-3 {
    bottom: 0;
    left: 21px;
}

.pin-4 {
    bottom: 0;
    right: 21px;
}


/* =========================================================
   IP BOOK
========================================================= */

.ip-book {
    width: 78px;
    height: 86px;
    border-radius: 7px;
    background: linear-gradient( 145deg, #fff5e9, #ffc96e );
    transform: rotate(-7deg);
    box-shadow: 0 0 25px rgba(255,170,65,.6);
    padding: 13px;
}

.ip-book-cover {
    font-size: 27px;
    color: #59366c;
    font-weight: 800;
    margin-bottom: 9px;
}

.ip-lines span {
    display: block;
    width: 85%;
    height: 3px;
    background: #ad729b;
    margin: 6px 0;
}


/* =========================================================
   PROGRAMMING OBJECT
========================================================= */

.program-window {
    width: 100px;
    height: 72px;
    border-radius: 9px;
    background: linear-gradient( 145deg, #067fae, #07577d );
    border: 1px solid #2ae9ff;
    box-shadow: 0 0 25px rgba(0,210,255,.5);
    padding: 7px;
    margin-right: 98px;
}

.program-dots span {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 2px;
}

    .program-dots span:nth-child(1) {
        background: #ffc84a;
    }

    .program-dots span:nth-child(2) {
        background: #ff5778;
    }

    .program-dots span:nth-child(3) {
        background: #5eff9b;
    }

.program-code {
    margin-top: 7px;
}

    .program-code b {
        display: block;
        color: #fff;
        font-size: 18px;
    }

    .program-code span {
        display: block;
        width: 55px;
        height: 3px;
        margin-top: 4px;
        background: #ffca68;
    }


/* =========================================================
   DEGREE CAP
========================================================= */

.degree-cap {
    position: relative;
    width: 90px;
    height: 80px;
}

.cap-top {
    position: absolute;
    width: 72px;
    height: 72px;
    left: 9px;
    top: 5px;
    background: linear-gradient( 135deg, #25296f, #080d43 );
    transform: rotate(45deg) scale(.72);
    border: 2px solid #c8baff;
    box-shadow: 0 0 25px rgba(180,80,255,.65);
}

.cap-base {
    position: absolute;
    width: 65px;
    height: 18px;
    left: 13px;
    top: 42px;
    border-radius: 50%;
    background: linear-gradient( 180deg, #1e286a, #090d35 );
    border: 2px solid #b99aff;
}

.cap-tassel {
    position: absolute;
    width: 4px;
    height: 45px;
    background: #ffc928;
    right: 5px;
    top: 25px;
    transform: rotate(-20deg);
    box-shadow: 0 0 8px #ffd338;
}


/* =========================================================
   CONNECTING LINES
========================================================= */

.co-connect-line {
    position: absolute;
    height: 3px;
    transform-origin: left center;
    border-radius: 10px;
    z-index: 1;
    filter: drop-shadow(0 0 5px currentColor) drop-shadow(0 0 12px currentColor);
    animation: connectionPulse 2.5s ease-in-out infinite;
}

    .co-connect-line::after {
        content: "";
        position: absolute;
        right: -5px;
        top: 50%;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #fff;
        transform: translateY(-50%);
        box-shadow: 0 0 8px #fff, 0 0 20px currentColor;
    }

@keyframes connectionPulse {

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

    50% {
        opacity: 1;
    }
}


/* top left */

.line-1 {
    width: 240px;
    left: 29%;
    top: 159px;
    transform: rotate(49deg);
    background: linear-gradient( 90deg, #168cff, #9d5aff );
    color: #168cff;
}


/* top middle */

.line-2 {
    width: 170px;
    left: 49%;
    top: 156px;
    transform: rotate(90deg);
    background: linear-gradient( 90deg, #ff2f74, #9e52ff );
    color: #ff3b83;
}


/* top right */

.line-3 {
    width: 240px;
    left: 73%;
    top: 167px;
    transform: rotate(129deg);
    background: linear-gradient( 90deg, #7655ff, #16bfff );
    color: #7353ff;
}

/* bottom left */

.line-4 {
    width: 230px;
    left: 17%;
    top: 378px;
    transform: rotate(1deg);
    background: linear-gradient( 90deg, #ff9b43, #ff3c9c );
    color: #ff963f;
}


/* bottom right */

.line-5 {
    width: 230px;
    left: 83%;
    top: 390px;
    transform: rotate(-179deg);
    background: linear-gradient( 90deg, #00e6df, #6c4dff );
    color: #00d9e2;
}


/* bottom center */

.line-6 {
    width: 140px;
    left: 50%;
    top: 390px;
    transform: translateX(-50%) rotate(90deg);
    background: linear-gradient( 90deg, #ff2e88, #6d55ff );
    color: #ff2e88;
}


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

.co-program-center {
    position: absolute;
    left: 50%;
    top: 290px;
    width: 470px;
    height: 270px;
    transform: translateX(-50%);
    z-index: 4;
    perspective: 900px;
}


/* ROTATING RINGS */

.co-center-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform-style: preserve-3d;
    border: 1px solid rgba(40,160,255,.65);
    transform: translate(-50%,-50%) rotateX(64deg);
    box-shadow: 0 0 18px rgba(30,120,255,.25);
}

.ring-one {
    width: 430px;
    height: 190px;
    animation: ringRotate 12s linear infinite;
}

.ring-two {
    width: 365px;
    height: 160px;
    border-color: #a955ff;
    animation: ringRotateReverse 9s linear infinite;
}

.ring-three {
    width: 300px;
    height: 130px;
    border-color: #00dfff;
    animation: ringRotate 7s linear infinite;
}

@keyframes ringRotate {

    from {
        transform: translate(-50%,-50%) rotateX(64deg) rotateZ(0);
    }

    to {
        transform: translate(-50%,-50%) rotateX(64deg) rotateZ(360deg);
    }
}

@keyframes ringRotateReverse {

    from {
        transform: translate(-50%,-50%) rotateX(64deg) rotateZ(360deg);
    }

    to {
        transform: translate(-50%,-50%) rotateX(64deg) rotateZ(0);
    }
}


/* =========================================================
   HOLOGRAM
========================================================= */

.co-hologram {
    position: absolute;
    left: 50%;
    top: 42px;
    width: 330px;
    height: 210px;
    transform: translateX(-50%);
    border-radius: 48%;
    border: 1px solid rgba(65,150,255,.55);
    background: linear-gradient( 180deg, rgba(20,100,220,.09), rgba(120,40,255,.05) );
    box-shadow: inset 0 0 30px rgba(0,120,255,.15), 0 0 35px rgba(0,110,255,.15);
    overflow: hidden;
}

.holo-line {
    position: absolute;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(70,190,255,.7), transparent );
    animation: holoScan 3s linear infinite;
}

.holo-line-1 {
    top: 30%;
}

.holo-line-2 {
    top: 55%;
    animation-delay: 1s;
}

.holo-line-3 {
    top: 78%;
    animation-delay: 2s;
}

@keyframes holoScan {

    0% {
        transform: translateX(-30%);
        opacity: .1;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateX(30%);
        opacity: .1;
    }
}


/* HOLO ICONS */

.holo-icon {
    position: absolute;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(60,180,255,.7);
    background: rgba(7,38,88,.55);
    color: #7ad9ff;
    box-shadow: 0 0 18px rgba(0,150,255,.3);
    animation: iconFloat 4s ease-in-out infinite;
}

.holo-code {
    left: 28px;
    top: 50px;
}

.holo-book {
    right: 20px;
    top: 55px;
    color: #ff9cff;
}

.holo-settings {
    right: 31px;
    bottom: 32px;
    color: #7afff7;
}

.holo-cap {
    left: 31px;
    bottom: 31px;
    color: #a4a0ff;
}

@keyframes iconFloat {

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

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


/* =========================================================
   CENTRAL GRADUATION CAP
========================================================= */

.co-central-cap {
    position: absolute;
    left: 50%;
    top: 65px;
    width: 145px;
    height: 125px;
    transform: translateX(-50%);
    z-index: 10;
    animation: capFloat 4s ease-in-out infinite;
}

@keyframes capFloat {

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

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

.central-cap-top {
    position: absolute;
    left: 50%;
    top: 20px;
    width: 115px;
    height: 115px;
    transform: translateX(-50%) rotate(45deg) scale(.65);
    background: linear-gradient( 135deg, #15246d, #050d38 );
    border: 3px solid #a88aff;
    box-shadow: 0 0 35px rgba(100,70,255,.65), inset 0 0 25px rgba(100,120,255,.2);
}

.central-cap-body {
    position: absolute;
    left: 50%;
    top: 73px;
    width: 110px;
    height: 32px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: linear-gradient( 180deg, #202d79, #090d38 );
    border: 2px solid #a58dff;
    box-shadow: 0 0 20px rgba(125,75,255,.7);
}

.central-cap-tassel {
    position: absolute;
    width: 5px;
    height: 72px;
    right: 7px;
    top: 56px;
    background: linear-gradient( 180deg, #ffde42, #ff9f00 );
    transform: rotate(-15deg);
    box-shadow: 0 0 10px #ffd329;
}

    .central-cap-tassel::after {
        content: "";
        position: absolute;
        width: 15px;
        height: 18px;
        right: -5px;
        bottom: -8px;
        border-radius: 0 0 8px 8px;
        background: #ffc928;
    }


/* =========================================================
   ENERGY CORE
========================================================= */

.co-energy-core {
    position: absolute;
    left: 50%;
    bottom: 44px;
    width: 120px;
    height: 35px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient( ellipse, #fff 0%, #8bdcff 8%, #3168ff 30%, transparent 70% );
    filter: blur(1px);
    box-shadow: 0 0 35px #268cff, 0 0 80px rgba(105,50,255,.65);
    animation: energyPulse 1.8s ease-in-out infinite;
}

@keyframes energyPulse {

    0%,100% {
        transform: translateX(-50%) scale(.85);
        opacity: .7;
    }

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


/* =========================================================
   CENTRAL PLATFORM
========================================================= */

.co-central-platform {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 500px;
    height: 75px;
    transform: translateX(-50%) rotateX(-18deg);
    border-radius: 50%;
    border: 3px solid #168cff;
    background: radial-gradient( ellipse, rgba(0,140,255,.3), rgba(80,20,220,.12) 40%, transparent 70% );
    box-shadow: 0 0 30px rgba(0,140,255,.65), inset 0 0 30px rgba(100,60,255,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    color: #00eaff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 4px;
    white-space: nowrap;
    animation: centralPlatformGlow 3s ease-in-out infinite;
}

@keyframes centralPlatformGlow {

    0%,100% {
        box-shadow: 0 0 30px rgba(0,140,255,.55), inset 0 0 30px rgba(100,60,255,.4);
    }

    50% {
        box-shadow: 0 0 55px rgba(0,180,255,.8), inset 0 0 45px rgba(140,60,255,.55);
    }
}


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

.co-program-features {
    position: relative;
    width: min(1180px, 92%);
    margin: -8px auto 25px;
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 15px;
    padding: 12px 25px;
    border-radius: 50px;
    background: linear-gradient( 180deg, rgba(8,27,67,.95), rgba(5,16,42,.95) );
    border: 1px solid rgba(74,130,255,.35);
    box-shadow: 0 20px 50px rgba(0,0,0,.35), inset 0 0 30px rgba(20,80,200,.1);
    z-index: 10;
}

.co-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.co-feature-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #00bfff;
    background: rgba(0,115,255,.15);
    box-shadow: 0 0 15px rgba(0,140,255,.18);
    font-size: 18px;
}

.feature-pink {
    color: #ff65bc;
    background: rgba(255,35,145,.14);
}

.co-feature strong {
    display: block;
    font-size: 15px;
    color: #fff;
}

.co-feature span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: rgba(210,222,245,.7);
}

.co-feature-divider {
    width: 1px;
    height: 35px;
    background: rgba(130,155,210,.25);
}


/* =========================================================
   CARD FLOAT ANIMATION
========================================================= */

.card-01,
.card-03,
.card-04,
.card-05,
.card-06 {
    animation: cardFloat 5s ease-in-out infinite;
}

.card-02 {
    animation: cardFloatCenter 5s ease-in-out infinite;
}

@keyframes cardFloat {

    0%,100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -7px;
    }
}

@keyframes cardFloatCenter {

    0%,100% {
        translate: -50% 0;
    }

    50% {
        translate: -50% -7px;
    }
}


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

@media (max-width: 1400px) {

    .co-program-card {
        width: 290px;
    }

    .card-01 {
        left: 7%;
    }

    .card-03 {
        right: 7%;
    }

    .card-04 {
        left: 0;
    }

    .card-05 {
        right: 0;
    }

    .card-06 {
        right: 7%;
    }
}


@media (max-width: 1100px) {

    .co-program-section {
        min-height: auto;
        padding-bottom: 30px;
    }

    .co-program-stage {
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px;
        padding: 30px 10px 40px;
    }

    .co-program-card {
        position: relative;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        width: 100%;
        transform: none !important;
        animation: none;
        min-height: 180px;
    }

        .co-program-card:hover {
            transform: translateY(-7px) scale(1.01) !important;
        }

    .co-connect-line {
        display: none;
    }

    .co-program-center {
        position: relative;
        left: auto;
        top: auto;
        grid-column: 1 / -1;
        width: 100%;
        height: 300px;
        order: -1;
        transform: none;
    }

    .co-central-platform {
        width: 430px;
    }

    .co-program-features {
        border-radius: 30px;
    }
}


@media (max-width: 768px) {

    .co-program-section {
        padding-bottom: 25px;
    }

    .co-program-heading {
        padding-top: 25px;
    }

    .co-program-badge {
        font-size: 10px;
        letter-spacing: 2px;
        padding: 8px 14px;
    }

    .co-program-heading h2 {
        font-size: 39px;
        line-height: 1.05;
        letter-spacing: -1px;
    }

    .co-program-heading p {
        font-size: 14px;
        padding: 0 15px;
    }

    .co-program-stage {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-top: 25px;
    }

    .co-program-center {
        grid-column: auto;
        height: 280px;
    }

    .co-center-ring {
        transform: translate(-50%,-50%) rotateX(64deg) scale(.78);
    }

    .co-hologram {
        transform: translateX(-50%) scale(.82);
    }

    .co-central-cap {
        transform: translateX(-50%) scale(.82);
    }

    .co-central-platform {
        width: 380px;
        transform: translateX(-50%) rotateX(65deg) scale(.8);
    }

    .co-program-features {
        flex-direction: column;
        width: calc(100% - 25px);
        padding: 18px;
        border-radius: 25px;
        gap: 14px;
    }

    .co-feature {
        width: 100%;
    }

    .co-feature-divider {
        width: 100%;
        height: 1px;
    }

    .co-side-word,
    .co-bg-block {
        opacity: .3;
    }

    .co-card-object {
        right: 0;
    }
}


@media (max-width: 480px) {

    .co-program-container {
        width: 94%;
    }

    .co-program-heading h2 {
        font-size: 31px;
    }

    .co-program-heading p {
        font-size: 13px;
    }

    .co-program-card {
        min-height: 175px;
        padding: 17px 17px;
    }

    .co-card-number {
        font-size: 31px;
    }

    .co-program-card h3 {
        font-size: 18px;
    }

    .co-program-card p {
        width: 67%;
        font-size: 12px;
    }

    .co-card-arrow {
        width: 36px;
        height: 36px;
    }

    .co-card-object {
        transform: scale(.78);
        transform-origin: bottom right;
    }

    .co-card-platform {
        transform: rotateX(62deg) scale(.75);
        transform-origin: right center;
    }

    .co-program-center {
        height: 235px;
    }

    .co-center-ring {
        transform: translate(-50%,-50%) rotateX(64deg) scale(.56);
    }

    .co-hologram {
        transform: translateX(-50%) scale(.58);
    }

    .co-central-cap {
        transform: translateX(-50%) scale(.62);
    }

    .co-central-platform {
        width: 360px;
        transform: translateX(-50%) rotateX(65deg) scale(.55);
    }

    .co-feature strong {
        font-size: 14px;
    }

    .co-feature span {
        font-size: 11px;
    }
}


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

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

    .co-program-section *,
    .co-program-section *::before,
    .co-program-section *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
/* =========================================================
   SCROLL REVEAL
========================================================= */

.co-program-reveal {
    opacity: 0;
    transform: translateY(35px) scale(.96);
    transition: opacity .8s ease, transform .9s cubic-bezier(.2,.8,.2,1);
}

    .co-program-reveal.co-program-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
    }


/* CENTER REVEAL */

.co-program-center.co-program-reveal {
    transform: translateX(-50%) translateY(35px) scale(.92);
}

    .co-program-center.co-program-reveal.co-program-visible {
        transform: translateX(-50%) translateY(0) scale(1);
    }


/* FEATURE BAR */

.co-program-features.co-program-reveal {
    transform: translateY(30px) scale(.97);
}

    .co-program-features.co-program-reveal.co-program-visible {
        transform: translateY(0) scale(1);
    }


@media (max-width:1100px) {

    .co-program-center.co-program-reveal {
        transform: translateY(35px) scale(.92);
    }

        .co-program-center.co-program-reveal.co-program-visible {
            transform: translateY(0) scale(1);
        }
}







/* =========================================================
   ONLINE LEARNING SECTION
========================================================= */

.co-online-section {
    --online-blue: #2878ff;
    --online-blue-dark: #1556d8;
    --online-purple: #7654ff;
    --online-pink: #e957c8;
    --online-red: #e71937;
    --online-text: #17264d;
    --online-muted: #66728c;
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 105px 0 120px;
    background: radial-gradient( circle at 12% 25%, rgba(40,120,255,.13), transparent 27% ), radial-gradient( circle at 88% 65%, rgba(118,84,255,.12), transparent 28% ), linear-gradient( 135deg, #ffffff 0%, #f5f8ff 48%, #f7f3ff 100% );
}


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

.co-online-bg-grid {
    position: absolute;
    inset: 0;
    opacity: .38;
    background-image: linear-gradient( rgba(40,120,255,.055) 1px, transparent 1px ), linear-gradient( 90deg, rgba(40,120,255,.055) 1px, transparent 1px );
    background-size: 55px 55px;
    mask-image: linear-gradient( to bottom, transparent, black 20%, black 80%, transparent );
    animation: onlineGridMove 18s linear infinite;
}

@keyframes onlineGridMove {

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

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


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

.co-online-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(1px);
    transform-style: preserve-3d;
}

.orb-blue {
    width: 120px;
    height: 120px;
    left: -30px;
    top: 28%;
    background: radial-gradient( circle at 35% 30%, #ffffff, #5ba5ff 25%, #2878ff 55%, #1556d8 100% );
    box-shadow: 0 25px 70px rgba(40,120,255,.32);
    animation: onlineOrbOne 8s ease-in-out infinite;
}

.orb-purple {
    width: 85px;
    height: 85px;
    right: 6%;
    top: 13%;
    background: radial-gradient( circle at 35% 25%, #ffffff, #b29cff 25%, #7654ff 65%, #4c31c9 );
    box-shadow: 0 20px 60px rgba(118,84,255,.28);
    animation: onlineOrbTwo 7s ease-in-out infinite;
}

.orb-red {
    width: 55px;
    height: 55px;
    right: 17%;
    bottom: 11%;
    background: radial-gradient( circle at 30% 25%, #fff, #ff6c83 30%, #e71937 70% );
    box-shadow: 0 15px 50px rgba(231,25,55,.25);
    animation: onlineOrbThree 6s ease-in-out infinite;
}

@keyframes onlineOrbOne {

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

    50% {
        transform: translate3d(35px,-45px,80px);
    }
}

@keyframes onlineOrbTwo {

    0%,100% {
        transform: translate3d(0,0,0) rotate(0);
    }

    50% {
        transform: translate3d(-35px,45px,80px) rotate(180deg);
    }
}

@keyframes onlineOrbThree {

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

    50% {
        transform: translate3d(-30px,-25px,60px);
    }
}


/* =========================================================
   DECORATIVE RINGS
========================================================= */

.co-online-ring {
    position: absolute;
    border: 1px solid rgba(40,120,255,.15);
    border-radius: 50%;
    pointer-events: none;
}

.ring-one {
    width: 560px;
    height: 560px;
    left: -280px;
    top: 15%;
    transform: rotateX(65deg) rotateZ(20deg);
    animation: onlineRingRotate 20s linear infinite;
}

.ring-two {
    width: 460px;
    height: 460px;
    right: -220px;
    bottom: -100px;
    border-color: rgba(118,84,255,.15);
    transform: rotateX(65deg);
    animation: onlineRingRotateReverse 18s linear infinite;
}

@keyframes onlineRingRotate {

    to {
        transform: rotateX(65deg) rotateZ(380deg);
    }
}

@keyframes onlineRingRotateReverse {

    to {
        transform: rotateX(65deg) rotateZ(-340deg);
    }
}


/* =========================================================
   PARTICLES
========================================================= */

.co-online-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2878ff;
    box-shadow: 0 0 18px #2878ff;
    animation: onlineParticle 5s ease-in-out infinite;
}

.particle-1 {
    left: 16%;
    top: 18%;
}

.particle-2 {
    left: 40%;
    top: 8%;
    animation-delay: 1s;
}

.particle-3 {
    right: 28%;
    top: 22%;
    animation-delay: 1.8s;
}

.particle-4 {
    right: 12%;
    bottom: 20%;
    animation-delay: 2.5s;
}

.particle-5 {
    left: 30%;
    bottom: 13%;
    animation-delay: 3s;
}

@keyframes onlineParticle {

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

    50% {
        transform: translate3d(0,-30px,40px) scale(1.5);
        opacity: 1;
    }
}


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

.co-online-container {
    position: relative;
    z-index: 5;
    width: min(1440px, 92%);
    margin: auto;
}


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

.co-online-heading {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 65px;
}

.co-online-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    border-radius: 50px;
    color: var(--online-blue-dark);
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(40,120,255,.15);
    box-shadow: 0 10px 35px rgba(40,120,255,.08), inset 0 1px 0 rgba(255,255,255,.9);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

    .co-online-badge span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--online-red);
        box-shadow: 0 0 14px rgba(231,25,55,.65);
        animation: onlinePulse 1.8s infinite;
    }

@keyframes onlinePulse {

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

    50% {
        transform: scale(1.5);
    }
}

.co-online-heading h2 {
    margin: 22px 0 15px;
    color: var(--online-text);
    font-size: clamp(38px, 4vw, 64px);
    line-height: 1.04;
    font-weight: 850;
    letter-spacing: -2.5px;
}

    .co-online-heading h2 strong {
        display: block;
        background: linear-gradient( 90deg, #2878ff, #7654ff, #d34fd0 );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

.co-online-heading p {
    max-width: 680px;
    margin: auto;
    color: var(--online-muted);
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   MAIN INTERFACE
========================================================= */

.co-learning-interface {
    display: grid;
    grid-template-columns: 250px minmax(520px, 1fr) 300px;
    align-items: center;
    gap: 35px;
}


/* =========================================================
   LEFT TABS
========================================================= */

.co-learning-tabs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    perspective: 1000px;
}

.co-learning-tab {
    position: relative;
    display: grid;
    grid-template-columns: 48px 1fr 20px;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 76px;
    padding: 10px 13px;
    border: 1px solid rgba(70,94,150,.12);
    border-radius: 20px;
    background: linear-gradient( 145deg, rgba(255,255,255,.94), rgba(245,248,255,.78) );
    box-shadow: 0 15px 35px rgba(38,61,110,.07), inset 0 1px 0 rgba(255,255,255,.9);
    cursor: pointer;
    text-align: left;
    transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease;
}

    .co-learning-tab:hover {
        transform: translateX(8px) translateY(-3px) rotateY(-3deg);
        box-shadow: 0 22px 45px rgba(40,120,255,.13);
    }

    .co-learning-tab.active {
        color: white;
        border-color: transparent;
        background: linear-gradient( 135deg, #2878ff, #7654ff );
        box-shadow: 0 20px 45px rgba(40,120,255,.28), 0 0 0 1px rgba(255,255,255,.15) inset;
        transform: translateX(8px) translateY(-2px);
    }

.co-tab-icon {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #2878ff;
    background: rgba(40,120,255,.09);
}

.co-learning-tab.active .co-tab-icon {
    color: #2878ff;
    background: rgba(255,255,255,.95);
}

.co-tab-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .co-tab-text strong {
        font-size: 13px;
    }

    .co-tab-text small {
        color: #7d89a2;
        font-size: 10px;
    }

.co-learning-tab.active .co-tab-text small {
    color: rgba(255,255,255,.75);
}

.co-tab-arrow {
    font-size: 18px;
    opacity: .55;
}

.co-learning-tab.active .co-tab-arrow {
    opacity: 1;
}


/* =========================================================
   DASHBOARD 3D SCENE
========================================================= */

.co-dashboard-scene {
    position: relative;
    min-height: 535px;
    display: grid;
    place-items: center;
    perspective: 1800px;
    transform-style: preserve-3d;
}

.co-dashboard-card {
    position: relative;
    width: 100%;
    max-width: 690px;
    min-height: 410px;
    border-radius: 27px;
    overflow: hidden;
    background: linear-gradient( 145deg, rgba(255,255,255,.96), rgba(242,247,255,.88) );
    border: 1px solid rgba(255,255,255,.95);
    box-shadow: 35px 45px 80px rgba(36,54,100,.18), 0 0 70px rgba(40,120,255,.10), inset 0 1px 0 rgba(255,255,255,.95);
    transform: rotateX(5deg) rotateY(-4deg) translateZ(30px);
    transition: transform .7s cubic-bezier(.2,.8,.2,1);
}

    .co-dashboard-card:hover {
        transform: rotateX(2deg) rotateY(0deg) translateZ(55px) scale(1.015);
    }


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

.co-dashboard-top {
    height: 63px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid rgba(60,80,130,.08);
    background: rgba(255,255,255,.58);
}

.co-dashboard-brand,
.co-dashboard-user {
    display: flex;
    align-items: center;
}

.co-dashboard-brand {
    gap: 9px;
}

.co-brand-mini-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: white;
    border-radius: 9px;
    background: linear-gradient(135deg,#2878ff,#7654ff);
    box-shadow: 0 7px 18px rgba(40,120,255,.25);
}

.co-dashboard-brand strong {
    color: #25345b;
    font-size: 13px;
}

.co-dashboard-user {
    gap: 8px;
}

.co-user-avatar {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: white;
    background: linear-gradient(135deg,#2878ff,#7654ff);
}

.co-dashboard-user div:nth-child(2) {
    display: flex;
    flex-direction: column;
}

.co-dashboard-user strong {
    color: #273556;
    font-size: 10px;
}

.co-dashboard-user span {
    color: #9aa4b8;
    font-size: 8px;
}

.co-dashboard-user > i {
    color: #8d98ae;
    font-size: 9px;
}


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

.co-dashboard-body {
    display: grid;
    grid-template-columns: 125px 1fr;
    min-height: 345px;
}

.co-dashboard-sidebar {
    padding: 18px 10px;
    background: linear-gradient( 180deg, #f3f7ff, #edf2fc );
    border-right: 1px solid rgba(50,70,120,.07);
}

    .co-dashboard-sidebar > div {
        display: flex;
        align-items: center;
        gap: 10px;
        height: 43px;
        padding: 0 10px;
        margin-bottom: 4px;
        border-radius: 10px;
        color: #7b879e;
        font-size: 9px;
    }

        .co-dashboard-sidebar > div i {
            width: 16px;
            text-align: center;
        }

    .co-dashboard-sidebar .co-side-active {
        color: #2878ff;
        background: white;
        box-shadow: 0 8px 18px rgba(40,120,255,.09);
    }


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

.co-dashboard-content {
    padding: 24px;
    min-width: 0;
}

.co-dashboard-welcome {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}

.co-small-label {
    color: #2878ff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.co-dashboard-welcome h3 {
    margin: 5px 0 4px;
    color: #25345b;
    font-size: 22px;
}

.co-dashboard-welcome p {
    margin: 0;
    color: #8994aa;
    font-size: 10px;
}

.co-progress-circle {
    width: 63px;
    height: 63px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient( circle, white 58%, transparent 60% ), conic-gradient( #2878ff 68%, #e8eef9 0 );
    box-shadow: 0 10px 25px rgba(40,120,255,.14);
}

    .co-progress-circle span {
        color: #2878ff;
        font-size: 12px;
        font-weight: 800;
    }


/* =========================================================
   DYNAMIC PANEL
========================================================= */

.co-dynamic-content {
    position: relative;
    min-height: 185px;
}

.co-content-panel {
    display: none;
    animation: dashboardPanelIn .55s cubic-bezier(.2,.8,.2,1);
}

    .co-content-panel.active-panel {
        display: block;
    }

@keyframes dashboardPanelIn {

    from {
        opacity: 0;
        transform: translateY(18px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* =========================================================
   COURSE PANEL
========================================================= */

.co-panel-heading {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

    .co-panel-heading strong {
        color: #2d3c61;
        font-size: 12px;
    }

    .co-panel-heading span {
        color: #2878ff;
        font-size: 9px;
    }

.co-course-mini-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
}

.co-mini-course {
    padding: 13px;
    border-radius: 15px;
    background: white;
    border: 1px solid rgba(60,80,130,.07);
    box-shadow: 0 9px 22px rgba(45,65,110,.06);
}

.co-mini-icon {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    border-radius: 10px;
    color: white;
    font-size: 13px;
}

.course-blue .co-mini-icon {
    background: linear-gradient(135deg,#2878ff,#52a9ff);
}

.course-purple .co-mini-icon {
    background: linear-gradient(135deg,#7654ff,#b06bff);
}

.course-red .co-mini-icon {
    background: linear-gradient(135deg,#e71937,#ff6480);
}

.co-mini-course strong {
    display: block;
    color: #34415f;
    font-size: 9px;
}

.co-mini-course small {
    display: block;
    margin-top: 5px;
    color: #9ba5b7;
    font-size: 8px;
}

.co-mini-progress {
    height: 4px;
    margin-top: 11px;
    border-radius: 10px;
    background: #edf1f8;
    overflow: hidden;
}

    .co-mini-progress span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg,#2878ff,#7654ff);
    }


/* =========================================================
   ONLINE PANEL
========================================================= */

.co-online-live-box,
.co-revision-box,
.co-material-box {
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 20px;
    border-radius: 18px;
    background: linear-gradient( 135deg, rgba(255,255,255,.95), rgba(241,246,255,.9) );
    border: 1px solid rgba(40,120,255,.09);
    box-shadow: 0 12px 30px rgba(40,70,120,.06);
}

.co-live-icon,
.co-revision-icon,
.co-material-icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: white;
    background: linear-gradient(135deg,#2878ff,#7654ff);
    box-shadow: 0 10px 25px rgba(40,120,255,.22);
}

.co-online-live-box span,
.co-revision-box span,
.co-material-box span {
    color: #2878ff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.co-online-live-box h4,
.co-revision-box h4,
.co-material-box h4 {
    margin: 5px 0;
    color: #2d3b5d;
    font-size: 14px;
}

.co-online-live-box p,
.co-revision-box p,
.co-material-box p {
    margin: 0;
    color: #8994a9;
    font-size: 9px;
    line-height: 1.6;
}

.co-online-live-box button {
    margin-left: auto;
    flex-shrink: 0;
    border: 0;
    padding: 10px 13px;
    border-radius: 10px;
    color: white;
    background: linear-gradient(135deg,#2878ff,#7654ff);
    cursor: pointer;
    font-size: 9px;
}


/* =========================================================
   REVISION
========================================================= */

.co-revision-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

    .co-revision-list span {
        padding: 8px 11px;
        border-radius: 9px;
        color: #65718a;
        background: white;
        border: 1px solid #edf0f7;
        font-size: 8px;
    }

    .co-revision-list i {
        color: #28b98b;
        margin-right: 4px;
    }


/* =========================================================
   PROGRESS
========================================================= */

.co-progress-cards {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
}

    .co-progress-cards > div {
        padding: 17px;
        border-radius: 15px;
        background: white;
        border: 1px solid #edf0f7;
    }

    .co-progress-cards strong {
        display: block;
        color: #2878ff;
        font-size: 21px;
    }

    .co-progress-cards span {
        display: block;
        margin: 4px 0 13px;
        color: #8994a8;
        font-size: 8px;
    }

.co-progress-line {
    height: 5px;
    overflow: hidden;
    border-radius: 10px;
    background: #edf1f8;
}

    .co-progress-line > span {
        height: 100%;
        margin: 0;
        border-radius: inherit;
        background: #2878ff;
    }

.purple-line > span {
    background: #7654ff;
}

.red-line > span {
    background: #e71937;
}


/* =========================================================
   MATERIALS
========================================================= */

.co-material-tags {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 12px;
}

    .co-material-tags span {
        padding: 7px 11px;
        color: #2878ff;
        border-radius: 8px;
        background: rgba(40,120,255,.07);
        font-size: 8px;
    }


/* =========================================================
   RIGHT INFO
========================================================= */

.co-online-info {
    position: relative;
    perspective: 1000px;
}

.co-info-glass {
    padding: 30px 25px;
    border-radius: 25px;
    background: linear-gradient( 145deg, rgba(255,255,255,.88), rgba(247,249,255,.68) );
    border: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 25px 60px rgba(40,65,110,.10), inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter: blur(18px);
    transform: rotateY(-3deg);
    transition: .5s ease;
}

    .co-info-glass:hover {
        transform: rotateY(0deg) translateY(-6px);
    }

.co-info-label {
    color: #2878ff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.co-info-glass h3 {
    margin: 12px 0;
    color: #233257;
    font-size: 25px;
    line-height: 1.15;
}

.co-info-glass > p {
    color: #7d889f;
    font-size: 11px;
    line-height: 1.7;
}

.co-info-points {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 22px 0;
}

    .co-info-points div {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #4f5d79;
        font-size: 10px;
    }

    .co-info-points i {
        width: 20px;
        height: 20px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: white;
        background: linear-gradient(135deg,#2878ff,#7654ff);
        font-size: 8px;
    }


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

.co-student-login {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 17px;
    border-radius: 14px;
    color: white;
    text-decoration: none;
    background: linear-gradient( 100deg, #2878ff, #7654ff, #d34fd0 );
    box-shadow: 0 15px 30px rgba(80,75,220,.22);
    transition: transform .35s ease, box-shadow .35s ease;
}

    .co-student-login:hover {
        color: white;
        transform: translateY(-4px);
        box-shadow: 0 22px 40px rgba(80,75,220,.30);
    }

    .co-student-login span {
        font-size: 12px;
        font-weight: 750;
    }

    .co-student-login i {
        font-size: 11px;
    }


/* =========================================================
   FLOATING 3D OBJECTS
========================================================= */

.co-floating-object {
    position: absolute;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: white;
    font-size: 18px;
    background: linear-gradient( 145deg, #2878ff, #7654ff );
    border: 1px solid rgba(255,255,255,.7);
    box-shadow: 0 20px 35px rgba(40,80,180,.20), inset 0 1px 0 rgba(255,255,255,.6);
    transform-style: preserve-3d;
    z-index: 5;
}

.float-cap {
    top: 1%;
    left: 2%;
    animation: floatingCap 5s ease-in-out infinite;
}

.float-code {
    top: 19%;
    right: -1%;
    background: linear-gradient(145deg,#7654ff,#b34fff);
    animation: floatingCode 6s ease-in-out infinite;
}

.float-book {
    bottom: 14%;
    left: 3%;
    background: linear-gradient(145deg,#e71937,#ff6d83);
    animation: floatingBook 5.5s ease-in-out infinite;
}

.float-play {
    bottom: 8%;
    right: 3%;
    background: linear-gradient(145deg,#2878ff,#21b6e8);
    animation: floatingPlay 6.5s ease-in-out infinite;
}

@keyframes floatingCap {

    0%,100% {
        transform: translate3d(0,0,40px) rotate(-8deg);
    }

    50% {
        transform: translate3d(12px,-22px,70px) rotate(8deg);
    }
}

@keyframes floatingCode {

    0%,100% {
        transform: translate3d(0,0,30px) rotate(8deg);
    }

    50% {
        transform: translate3d(-18px,-20px,65px) rotate(-8deg);
    }
}

@keyframes floatingBook {

    0%,100% {
        transform: translate3d(0,0,30px) rotate(-8deg);
    }

    50% {
        transform: translate3d(15px,-18px,60px) rotate(7deg);
    }
}

@keyframes floatingPlay {

    0%,100% {
        transform: translate3d(0,0,30px) rotate(7deg);
    }

    50% {
        transform: translate3d(-15px,-25px,65px) rotate(-7deg);
    }
}


/* =========================================================
   PLATFORM
========================================================= */

.co-dashboard-platform {
    position: absolute;
    width: 72%;
    height: 75px;
    bottom: 4%;
    border-radius: 50%;
    background: radial-gradient( ellipse, rgba(40,120,255,.22), rgba(118,84,255,.10), transparent 70% );
    border: 2px solid rgba(40,120,255,.18);
    transform: rotateX(65deg) translateZ(-20px);
    box-shadow: 0 0 50px rgba(40,120,255,.12);
}

    .co-dashboard-platform span {
        position: absolute;
        inset: 10px 12%;
        border: 1px solid rgba(118,84,255,.22);
        border-radius: 50%;
        animation: platformSpin 8s linear infinite;
    }

        .co-dashboard-platform span:nth-child(2) {
            inset: 20px 22%;
            border-color: rgba(231,25,55,.20);
            animation-direction: reverse;
        }

@keyframes platformSpin {

    to {
        transform: rotateZ(360deg);
    }
}

.co-dashboard-shadow {
    position: absolute;
    width: 62%;
    height: 60px;
    bottom: 7%;
    border-radius: 50%;
    background: rgba(40,70,130,.13);
    filter: blur(22px);
}


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

@media (max-width: 1200px) {

    .co-learning-interface {
        grid-template-columns: 210px minmax(450px,1fr);
    }

    .co-online-info {
        grid-column: 1 / -1;
        max-width: 700px;
        width: 100%;
        margin: 10px auto 0;
    }

    .co-info-glass {
        transform: none;
    }

        .co-info-glass:hover {
            transform: translateY(-4px);
        }

    .co-info-points {
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }
}


@media (max-width: 900px) {

    .co-online-section {
        padding: 80px 0 90px;
    }

    .co-online-heading {
        margin-bottom: 45px;
    }

    .co-learning-interface {
        grid-template-columns: 1fr;
    }

    .co-learning-tabs {
        display: grid;
        grid-template-columns: repeat(5,1fr);
        gap: 8px;
    }

    .co-learning-tab {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        min-height: 100px;
        padding: 10px 5px;
    }

        .co-learning-tab:hover,
        .co-learning-tab.active {
            transform: translateY(-4px);
        }

    .co-tab-icon {
        margin: auto;
    }

    .co-tab-text small {
        display: none;
    }

    .co-tab-arrow {
        display: none;
    }

    .co-dashboard-scene {
        min-height: 500px;
    }

    .co-online-info {
        grid-column: auto;
    }
}


@media (max-width: 700px) {

    .co-online-section {
        padding: 65px 0 75px;
    }

    .co-online-container {
        width: 94%;
    }

    .co-online-heading h2 {
        font-size: 38px;
        letter-spacing: -1.5px;
    }

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

    .co-learning-tabs {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        padding: 5px 3px 14px;
        scrollbar-width: none;
    }

        .co-learning-tabs::-webkit-scrollbar {
            display: none;
        }

    .co-learning-tab {
        min-width: 145px;
        flex-shrink: 0;
    }

    .co-dashboard-scene {
        min-height: 430px;
    }

    .co-dashboard-card {
        min-height: 350px;
        transform: rotateX(2deg) rotateY(-1deg);
    }

    .co-dashboard-body {
        grid-template-columns: 72px 1fr;
    }

    .co-dashboard-sidebar {
        padding: 12px 7px;
    }

        .co-dashboard-sidebar span {
            display: none;
        }

        .co-dashboard-sidebar > div {
            justify-content: center;
        }

    .co-dashboard-content {
        padding: 16px;
    }

    .co-dashboard-welcome h3 {
        font-size: 18px;
    }

    .co-course-mini-grid {
        grid-template-columns: 1fr;
    }

        .co-course-mini-grid .co-mini-course:nth-child(3) {
            display: none;
        }

    .co-progress-cards {
        grid-template-columns: 1fr;
    }

        .co-progress-cards > div {
            padding: 12px;
        }

    .co-online-live-box,
    .co-revision-box,
    .co-material-box {
        flex-wrap: wrap;
    }

        .co-online-live-box button {
            width: 100%;
            margin-left: 0;
        }

    .co-info-points {
        grid-template-columns: 1fr;
    }

    .float-code,
    .float-book {
        display: none;
    }
}


@media (max-width: 480px) {

    .co-online-heading h2 {
        font-size: 32px;
    }

    .co-online-heading p {
        font-size: 13px;
    }

    .co-dashboard-scene {
        min-height: 365px;
    }

    .co-dashboard-card {
        border-radius: 18px;
    }

    .co-dashboard-top {
        height: 52px;
        padding: 0 12px;
    }

    .co-dashboard-brand strong {
        font-size: 10px;
    }

    .co-dashboard-user div:nth-child(2),
    .co-dashboard-user > i {
        display: none;
    }

    .co-dashboard-body {
        min-height: 285px;
    }

    .co-dashboard-sidebar {
        padding: 8px 4px;
    }

        .co-dashboard-sidebar > div {
            height: 38px;
        }

    .co-dashboard-content {
        padding: 12px;
    }

    .co-small-label {
        font-size: 7px;
    }

    .co-dashboard-welcome h3 {
        font-size: 15px;
    }

    .co-dashboard-welcome p {
        font-size: 8px;
    }

    .co-progress-circle {
        width: 48px;
        height: 48px;
    }

        .co-progress-circle span {
            font-size: 9px;
        }

    .co-info-glass {
        padding: 23px 18px;
    }

        .co-info-glass h3 {
            font-size: 22px;
        }

    .co-online-orb.orb-blue {
        width: 70px;
        height: 70px;
    }

    .co-floating-object {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .float-cap {
        left: -5px;
    }
}
/* =========================================================
   DASHBOARD SWITCH ANIMATION
========================================================= */

.dashboard-switch {
    animation: dashboardSwitch .55s cubic-bezier(.2,.8,.2,1);
}

@keyframes dashboardSwitch {

    0% {
        opacity: .65;
        transform: rotateX(8deg) rotateY(-7deg) translateZ(10px) scale(.97);
    }

    55% {
        opacity: 1;
        transform: rotateX(2deg) rotateY(3deg) translateZ(65px) scale(1.015);
    }

    100% {
        opacity: 1;
        transform: rotateX(5deg) rotateY(-4deg) translateZ(30px) scale(1);
    }
}








/* =========================================================
   WHY CHOOSE CLASSESOFIT
========================================================= */

.co-why-section {
    --why-navy: #02091c;
    --why-navy-2: #061331;
    --why-purple: #6b35ff;
    --why-purple-light: #9c65ff;
    --why-blue: #168cff;
    --why-cyan: #25c9ff;
    --why-red: #f21f48;
    --why-pink: #ff4d9d;
    position: relative;
    width: 100%;
    padding: 25px 0 55px;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient( circle at 50% 45%, rgba(44, 63, 150, .25), transparent 28% ), radial-gradient( circle at 10% 80%, rgba(109, 37, 255, .18), transparent 28% ), radial-gradient( circle at 90% 70%, rgba(0, 130, 255, .13), transparent 28% ), linear-gradient( 145deg, #010617, #030a20 45%, #020719 );
}


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

.co-why-bg {
    position: absolute;
    inset: 0;
    z-index: -10;
    background-image: linear-gradient( rgba(80, 110, 190, .035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(80, 110, 190, .035) 1px, transparent 1px );
    background-size: 55px 55px;
    mask-image: linear-gradient( to bottom, transparent, black 15%, black 85%, transparent );
    animation: whyGridMove 16s linear infinite;
}


@keyframes whyGridMove {

    0% {
        background-position: 0 0, 0 0;
    }

    100% {
        background-position: 55px 55px, 55px 55px;
    }
}


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

.co-why-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(30px);
    z-index: -5;
}


.co-why-glow-1 {
    width: 500px;
    height: 500px;
    left: -260px;
    top: 20%;
    background: radial-gradient( circle, rgba(111, 39, 255, .25), transparent 68% );
    animation: whyGlowFloat 9s ease-in-out infinite;
}


.co-why-glow-2 {
    width: 500px;
    height: 500px;
    right: -270px;
    top: 30%;
    background: radial-gradient( circle, rgba(14, 122, 255, .22), transparent 68% );
    animation: whyGlowFloat 11s ease-in-out infinite reverse;
}


.co-why-glow-3 {
    width: 300px;
    height: 300px;
    left: 43%;
    top: 40%;
    background: radial-gradient( circle, rgba(235, 26, 105, .10), transparent 70% );
    animation: whyCenterGlow 5s ease-in-out infinite;
}


@keyframes whyGlowFloat {

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

    50% {
        transform: translate3d(35px, -30px, 0);
    }
}


@keyframes whyCenterGlow {

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

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


/* =========================================================
   DECORATIVE WAVES
========================================================= */

.co-why-wave {
    position: absolute;
    width: 380px;
    height: 700px;
    border-radius: 50%;
    pointer-events: none;
    z-index: -4;
    filter: blur(.2px);
}


.co-why-wave-left {
    left: -310px;
    top: -170px;
    border: 2px solid rgba(103, 56, 255, .28);
    box-shadow: 20px 0 80px rgba(103, 56, 255, .12);
    transform: rotate(-28deg);
    animation: whyWaveMove 8s ease-in-out infinite;
}


.co-why-wave-right {
    right: -310px;
    bottom: -180px;
    border: 2px solid rgba(0, 160, 255, .28);
    box-shadow: -20px 0 80px rgba(0, 160, 255, .12);
    transform: rotate(-28deg);
    animation: whyWaveMove 10s ease-in-out infinite reverse;
}


@keyframes whyWaveMove {

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

    50% {
        transform: rotate(-22deg) translateY(-25px);
    }
}


/* =========================================================
   PARTICLES
========================================================= */

.co-why-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #7ba8ff;
    box-shadow: 0 0 12px rgba(70, 150, 255, .9);
    animation: whyParticleFloat 5s ease-in-out infinite;
    z-index: -2;
}


    .co-why-particle.p1 {
        left: 8%;
        top: 20%;
    }

    .co-why-particle.p2 {
        left: 18%;
        top: 65%;
        background: #ff3865;
    }

    .co-why-particle.p3 {
        left: 35%;
        top: 14%;
    }

    .co-why-particle.p4 {
        left: 55%;
        top: 23%;
        background: #b86cff;
    }

    .co-why-particle.p5 {
        right: 10%;
        top: 17%;
    }

    .co-why-particle.p6 {
        right: 18%;
        top: 67%;
        background: #ff3865;
    }

    .co-why-particle.p7 {
        right: 33%;
        top: 44%;
    }

    .co-why-particle.p8 {
        left: 30%;
        bottom: 12%;
        background: #4bbaff;
    }


@keyframes whyParticleFloat {

    0%, 100% {
        opacity: .2;
        transform: translateY(0) scale(.8);
    }

    50% {
        opacity: 1;
        transform: translateY(-25px) scale(1.5);
    }
}


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

.co-why-container {
    width: min(1380px, calc(100% - 40px));
    margin: 0 auto;
    position: relative;
}


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

.co-why-heading {
    position: relative;
    text-align: center;
    z-index: 30;
}


.co-why-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 17px;
    margin-bottom: 14px;
    border: 1px solid rgba(130, 155, 255, .20);
    border-radius: 30px;
    background: rgba(35, 52, 102, .30);
    box-shadow: inset 0 0 20px rgba(75, 90, 180, .08), 0 10px 30px rgba(0,0,0,.15);
    backdrop-filter: blur(12px);
    color: rgba(255,255,255,.82);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.5px;
}


    .co-why-badge span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--why-red);
        box-shadow: 0 0 0 5px rgba(242,31,72,.10), 0 0 15px rgba(242,31,72,.7);
        animation: whyBadgePulse 2s ease-in-out infinite;
    }


@keyframes whyBadgePulse {

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

    50% {
        transform: scale(1.35);
    }
}


.co-why-heading h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(38px, 4.5vw, 66px);
    line-height: 1.05;
    letter-spacing: -2.8px;
    font-weight: 850;
}


    .co-why-heading h2 strong {
        color: transparent;
        background: linear-gradient( 90deg, #ffffff 0%, #ff8ac4 35%, #d96dff 70%, #7ebdff 100% );
        -webkit-background-clip: text;
        background-clip: text;
        background-size: 200% auto;
        animation: whyGradientText 5s linear infinite;
    }


@keyframes whyGradientText {

    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}


.co-why-heading p {
    margin: 14px auto 0;
    color: rgba(221,229,255,.70);
    font-size: 15px;
    letter-spacing: .2px;
}


/* =========================================================
   MAIN STAGE
========================================================= */

.co-why-stage {
    position: relative;
    width: 100%;
    height: 590px;
    margin-top: 5px;
    perspective: 1500px;
    transform-style: preserve-3d;
}


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

.co-center-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient( circle, rgba(89, 48, 255, .30), rgba(20, 120, 255, .10) 35%, transparent 68% );
    filter: blur(10px);
    animation: whyCenterPulse 4s ease-in-out infinite;
}


@keyframes whyCenterPulse {

    0%, 100% {
        transform: translate(-50%, -50%) scale(.85);
        opacity: .65;
    }

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


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

.co-why-orbit {
    position: absolute;
    left: 50%;
    top: 49%;
    border-radius: 50%;
    pointer-events: none;
    transform-style: preserve-3d;
}


.orbit-1 {
    width: 500px;
    height: 500px;
    margin: -250px 0 0 -250px;
    border: 2px solid transparent;
    border-top-color: rgba(48, 151, 255, .9);
    border-right-color: rgba(171, 69, 255, .7);
    box-shadow: 0 0 20px rgba(54, 116, 255, .18);
    transform: rotateX(65deg) rotateZ(-20deg);
    animation: whyOrbit1 12s linear infinite;
}


.orbit-2 {
    width: 430px;
    height: 430px;
    margin: -215px 0 0 -215px;
    border: 1px solid transparent;
    border-left-color: rgba(255, 53, 119, .8);
    border-bottom-color: rgba(93, 85, 255, .7);
    transform: rotateX(68deg) rotateZ(35deg);
    animation: whyOrbit2 9s linear infinite reverse;
}


.orbit-3 {
    width: 350px;
    height: 350px;
    margin: -175px 0 0 -175px;
    border: 1px solid rgba(108, 94, 255, .18);
    transform: rotateY(65deg);
    animation: whyOrbit3 15s linear infinite;
}


@keyframes whyOrbit1 {

    from {
        transform: rotateX(65deg) rotateZ(0deg);
    }

    to {
        transform: rotateX(65deg) rotateZ(360deg);
    }
}


@keyframes whyOrbit2 {

    from {
        transform: rotateX(68deg) rotateZ(360deg);
    }

    to {
        transform: rotateX(68deg) rotateZ(0deg);
    }
}


@keyframes whyOrbit3 {

    from {
        transform: rotateY(65deg) rotateZ(0deg);
    }

    to {
        transform: rotateY(65deg) rotateZ(360deg);
    }
}


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

.co-why-card {
    position: absolute;
    width: 385px;
    min-height: 155px;
    padding: 25px 85px 22px 25px;
    border-radius: 20px;
    background: linear-gradient( 135deg, rgba(17, 27, 62, .88), rgba(8, 18, 46, .72) );
    border: 1px solid rgba(115, 137, 255, .25);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 30px 70px rgba(0,0,0,.28), 0 0 40px rgba(47, 71, 190, .07);
    backdrop-filter: blur(15px);
    transform-style: preserve-3d;
    overflow: hidden;
    z-index: 20;
    transition: transform .6s cubic-bezier(.22,1,.36,1), box-shadow .6s ease, border-color .6s ease;
}


    .co-why-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient( 135deg, rgba(130,92,255,.8), transparent 35%, rgba(32,156,255,.6), transparent 70%, rgba(255,55,122,.6) );
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: .7;
    }


    .co-why-card:hover {
        transform: translateY(-10px) translateZ(35px) rotateX(2deg) rotateY(0deg);
        border-color: rgba(130,150,255,.55);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 45px 90px rgba(0,0,0,.40), 0 0 55px rgba(79,84,255,.18);
    }


/* =========================================================
   CARD POSITIONS
========================================================= */

.co-card-1 {
    left: 20px;
    top: 40px;
    transform: rotateZ(-2deg) rotateY(7deg);
    animation: whyCardFloat1 6s ease-in-out infinite;
}


.co-card-2 {
    right: 20px;
    top: 40px;
    transform: rotateZ(2deg) rotateY(-7deg);
    animation: whyCardFloat2 6.5s ease-in-out infinite;
}


.co-card-3 {
    left: 20px;
    bottom: 70px;
    transform: rotateZ(-1deg) rotateY(6deg);
    animation: whyCardFloat3 7s ease-in-out infinite;
}


.co-card-4 {
    right: 20px;
    bottom: 70px;
    transform: rotateZ(1deg) rotateY(-6deg);
    animation: whyCardFloat4 6.8s ease-in-out infinite;
}


@keyframes whyCardFloat1 {

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

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


@keyframes whyCardFloat2 {

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

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


@keyframes whyCardFloat3 {

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

    50% {
        margin-bottom: 10px;
    }
}


@keyframes whyCardFloat4 {

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

    50% {
        margin-bottom: 12px;
    }
}


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

.co-card-number {
    position: absolute;
    left: 24px;
    top: 18px;
    font-size: 42px;
    line-height: 1;
    font-weight: 800;
    color: rgba(124, 143, 255, .78);
}


.co-card-content {
    position: relative;
    margin-top: 45px;
    z-index: 3;
}


    .co-card-content h3 {
        margin: 0 0 8px;
        color: #fff;
        font-size: 17px;
        line-height: 1.25;
        font-weight: 750;
    }


    .co-card-content p {
        max-width: 245px;
        margin: 0;
        color: rgba(214,222,255,.68);
        font-size: 11px;
        line-height: 1.6;
    }


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

.co-card-icon {
    position: absolute;
    right: 22px;
    top: 50%;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -31px;
    border-radius: 17px;
    color: white;
    font-size: 25px;
    transform: translateZ(45px);
    box-shadow: 0 15px 30px rgba(0,0,0,.25);
    transition: transform .5s ease;
}


.co-why-card:hover .co-card-icon {
    transform: translateZ(75px) rotate(-6deg) scale(1.1);
}


.red-icon {
    background: linear-gradient( 145deg, #ff2858, #c90038 );
    box-shadow: 0 15px 35px rgba(242,31,72,.25);
}


.blue-icon {
    background: linear-gradient( 145deg, #13a8ff, #1856db );
    box-shadow: 0 15px 35px rgba(22,140,255,.25);
}


.purple-icon {
    background: linear-gradient( 145deg, #9d4cff, #5520d8 );
    box-shadow: 0 15px 35px rgba(107,53,255,.25);
}


.pink-icon {
    background: linear-gradient( 145deg, #ff417f, #e71937 );
    box-shadow: 0 15px 35px rgba(231,25,55,.25);
}


/* =========================================================
   CARD SHINE
========================================================= */

.co-card-shine {
    position: absolute;
    width: 100px;
    height: 260px;
    left: -160px;
    top: -70px;
    background: linear-gradient( 90deg, transparent, rgba(255,255,255,.10), transparent );
    transform: rotate(25deg);
    transition: left 1s ease;
}


.co-why-card:hover
.co-card-shine {
    left: 430px;
}


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

.co-why-center {
    position: absolute;
    left: 50%;
    top: 49%;
    width: 390px;
    height: 470px;
    margin: -190px 0 0 -195px;
    z-index: 15;
    transform-style: preserve-3d;
}


/* Student */

.co-student-image {
    position: absolute;
    left: 50%;
    bottom: 55px;
    width: 290px;
    height: 390px;
    transform: translateX(-50%) translateZ(80px);
    overflow: hidden;
    z-index: 10;
    mask-image: linear-gradient( to bottom, black 70%, transparent 100% );
}


    .co-student-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center top;
        filter: saturate(1.05) contrast(1.03);
    }


/* =========================================================
   PLATFORM
========================================================= */

.co-center-platform {
    position: absolute;
    left: 50%;
    bottom: 35px;
    width: 400px;
    height: 75px;
    margin-left: -200px;
    border-radius: 50%;
    background: linear-gradient( 180deg, rgba(20,40,100,.95), rgba(4,12,35,.95) );
    border: 1px solid rgba(69,142,255,.55);
    box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 0 30px rgba(51,115,255,.12);
    transform: translateZ(45px) rotateX(65deg);
    z-index: 6;
}


    .co-center-platform::before {
        content: "";
        position: absolute;
        inset: 8px;
        border-radius: 50%;
        border: 2px solid rgba(91,62,255,.75);
        box-shadow: 0 0 25px rgba(90,62,255,.55);
    }


.co-platform-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 70%;
    height: 40%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    background: radial-gradient( ellipse, rgba(40,150,255,.45), transparent 70% );
    filter: blur(8px);
}


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

.co-center-ring {
    position: absolute;
    left: 50%;
    top: 53%;
    border-radius: 50%;
    pointer-events: none;
}


.ring-main {
    width: 350px;
    height: 350px;
    margin: -175px 0 0 -175px;
    border: 2px solid rgba(78,130,255,.55);
    transform: rotateX(68deg);
    box-shadow: 0 0 20px rgba(47,119,255,.20);
    animation: whyRingSpin 8s linear infinite;
}


.ring-small {
    width: 285px;
    height: 285px;
    margin: -142px 0 0 -142px;
    border: 1px solid rgba(240,48,131,.55);
    transform: rotateX(68deg) rotateZ(25deg);
    animation: whyRingSpin 6s linear infinite reverse;
}


@keyframes whyRingSpin {

    from {
        transform: rotateX(68deg) rotateZ(0deg);
    }

    to {
        transform: rotateX(68deg) rotateZ(360deg);
    }
}


/* =========================================================
   FLOATING CENTER ICONS
========================================================= */

.co-center-floating-icon {
    position: absolute;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: white;
    font-size: 21px;
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 40px rgba(0,0,0,.28);
    z-index: 25;
}


.icon-code {
    left: 25px;
    top: 90px;
    background: linear-gradient(145deg, #a046ff5e, #5723db4d);
    animation: centerIconFloat1 4s ease-in-out infinite;
}


.icon-cap {
    right: 25px;
    top: 135px;
    background: linear-gradient(145deg, #26a9ff5e, #2561dc54);
    animation: centerIconFloat2 4.5s ease-in-out infinite;
}


.icon-idea {
    right: -10px;
    bottom: 170px;
    background: linear-gradient(145deg, #ff2e7078, #dc183f4a);
    animation: centerIconFloat3 5s ease-in-out infinite;
}


.icon-database {
    left: 5px;
    bottom: 180px;
    background: linear-gradient(145deg, #8a45ff69, #4d28d8);
    animation: centerIconFloat4 4.2s ease-in-out infinite;
}


@keyframes centerIconFloat1 {

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

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


@keyframes centerIconFloat2 {

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

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


@keyframes centerIconFloat3 {

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

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


@keyframes centerIconFloat4 {

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

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


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

.co-orbit-dot {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    z-index: 25;
}


.dot-1 {
    left: 48%;
    top: 17%;
    background: #29b8ff;
    box-shadow: 0 0 20px #29b8ff;
    animation: whyDotMove 4s ease-in-out infinite;
}


.dot-2 {
    left: 54%;
    top: 34%;
    background: #ff4b98;
    box-shadow: 0 0 20px #ff4b98;
    animation: whyDotMove 5s ease-in-out infinite reverse;
}


.dot-3 {
    left: 42%;
    bottom: 25%;
    background: #875cff;
    box-shadow: 0 0 20px #875cff;
    animation: whyDotMove 4.5s ease-in-out infinite;
}


.dot-4 {
    left: 58%;
    bottom: 20%;
    background: #36a8ff;
    box-shadow: 0 0 20px #36a8ff;
    animation: whyDotMove 5.5s ease-in-out infinite reverse;
}


@keyframes whyDotMove {

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

    50% {
        transform: translateY(-16px) scale(1.4);
        opacity: 1;
    }
}


/* =========================================================
   CONNECTING LINES
========================================================= */

.co-connection {
    position: absolute;
    height: 1px;
    transform-origin: left center;
    z-index: 4;
    opacity: .55;
}


.connection-1 {
    width: 270px;
    left: 335px;
    top: 145px;
    transform: rotate(8deg);
    background: linear-gradient( 90deg, rgba(242,31,72,.8), transparent );
}


.connection-2 {
    width: 270px;
    right: 335px;
    top: 145px;
    transform: rotate(-8deg);
    background: linear-gradient( 90deg, transparent, rgba(31,150,255,.8) );
}


.connection-3 {
    width: 250px;
    left: 335px;
    bottom: 155px;
    transform: rotate(-8deg);
    background: linear-gradient( 90deg, rgba(125,65,255,.8), transparent );
}


.connection-4 {
    width: 250px;
    right: 335px;
    bottom: 155px;
    transform: rotate(8deg);
    background: linear-gradient( 90deg, transparent, rgba(255,52,125,.8) );
}


/* =========================================================
   BOTTOM STRIP
========================================================= */

.co-why-bottom {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1.2fr auto 1fr auto 1fr;
    align-items: center;
    gap: 22px;
    min-height: 95px;
    margin-top: -5px;
    padding: 18px 25px;
    border-radius: 18px;
    background: rgba(7,17,43,.72);
    border: 1px solid rgba(101,126,210,.20);
    box-shadow: 0 25px 60px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(15px);
}


.co-bottom-item {
    display: flex;
    align-items: center;
    gap: 13px;
}


.co-bottom-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 13px;
    color: #79baff;
    background: rgba(46,106,210,.12);
    font-size: 18px;
}


.co-bottom-item strong {
    display: block;
    margin-bottom: 3px;
    color: #fff;
    font-size: 12px;
}


.co-bottom-item span {
    display: block;
    color: rgba(210,220,255,.58);
    font-size: 9px;
    line-height: 1.4;
}


.co-bottom-divider {
    width: 1px;
    height: 38px;
    background: rgba(128,151,220,.15);
}


/* =========================================================
   RESPONSIVE — 1200
========================================================= */

@media (max-width: 1200px) {

    .co-why-container {
        width: min(1100px, calc(100% - 30px));
    }

    .co-why-card {
        width: 325px;
    }

    .co-card-1,
    .co-card-3 {
        left: 0;
    }

    .co-card-2,
    .co-card-4 {
        right: 0;
    }

    .co-connection {
        display: none;
    }
}


/* =========================================================
   RESPONSIVE — 1000
========================================================= */

@media (max-width: 1000px) {

    .co-why-section {
        min-height: auto;
        padding: 75px 0 50px;
    }

    .co-why-stage {
        height: 780px;
    }

    .co-why-card {
        width: 300px;
        min-height: 145px;
    }

    .co-card-1 {
        left: 0;
        top: 55px;
    }

    .co-card-2 {
        right: 0;
        top: 55px;
    }

    .co-card-3 {
        left: 0;
        bottom: 95px;
    }

    .co-card-4 {
        right: 0;
        bottom: 95px;
    }

    .co-why-center {
        transform: scale(.85);
    }

    .co-why-bottom {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }

    .co-bottom-divider {
        display: none;
    }
}


/* =========================================================
   RESPONSIVE — 768
========================================================= */

@media (max-width: 768px) {

    .co-why-section {
        padding: 65px 0 45px;
    }

    .co-why-container {
        width: calc(100% - 24px);
    }

    .co-why-heading h2 {
        font-size: clamp(34px, 8vw, 48px);
        letter-spacing: -1.5px;
    }

    .co-why-heading p {
        font-size: 13px;
        max-width: 500px;
    }

    .co-why-stage {
        height: auto;
        margin-top: 40px;
        padding-bottom: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }


    /* Center */

    .co-why-center {
        position: relative;
        left: auto;
        top: auto;
        width: 330px;
        height: 380px;
        margin: 0 auto;
        order: 1;
        transform: scale(.85);
    }


    /* Cards */

    .co-why-card {
        position: relative;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: min(100%, 470px);
        min-height: 125px;
        margin: 0 !important;
        transform: none !important;
        animation: none !important;
        order: 2;
    }


    .co-card-1 {
        order: 2;
    }

    .co-card-2 {
        order: 3;
    }

    .co-card-3 {
        order: 4;
    }

    .co-card-4 {
        order: 5;
    }


    .co-why-card:hover {
        transform: translateY(-5px) !important;
    }


    .co-why-bottom {
        grid-template-columns: 1fr 1fr;
        margin-top: 30px;
    }
}


/* =========================================================
   RESPONSIVE — 520
========================================================= */

@media (max-width: 520px) {

    .co-why-section {
        padding: 55px 0 40px;
    }

    .co-why-badge {
        padding: 7px 13px;
        font-size: 9px;
        letter-spacing: 1.8px;
    }

    .co-why-heading h2 {
        font-size: 34px;
        line-height: 1.08;
    }

    .co-why-heading p {
        font-size: 12px;
        line-height: 1.5;
        padding: 0 15px;
    }


    .co-why-center {
        width: 310px;
        height: 350px;
        transform: scale(.78);
        margin: -15px auto -20px;
    }


    .co-why-card {
        padding: 20px 75px 18px 20px;
        border-radius: 17px;
    }


    .co-card-number {
        left: 19px;
        top: 14px;
        font-size: 34px;
    }


    .co-card-content {
        margin-top: 38px;
    }


        .co-card-content h3 {
            font-size: 15px;
        }


        .co-card-content p {
            font-size: 10px;
            line-height: 1.5;
        }


    .co-card-icon {
        width: 52px;
        height: 52px;
        right: 15px;
        margin-top: -26px;
        font-size: 20px;
        border-radius: 14px;
    }


    .co-why-bottom {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 17px;
    }


    .co-bottom-item {
        padding: 8px 4px;
    }


    .co-bottom-icon {
        width: 40px;
        height: 40px;
    }


    .co-bottom-item strong {
        font-size: 11px;
    }


    .co-bottom-item span {
        font-size: 9px;
    }


    .co-bottom-divider {
        display: none;
    }
}


/* =========================================================
   RESPONSIVE — 380
========================================================= */

@media (max-width: 380px) {

    .co-why-heading h2 {
        font-size: 30px;
    }

    .co-why-center {
        transform: scale(.70);
        margin-bottom: -45px;
    }

    .co-why-card {
        min-height: 120px;
    }

    .co-card-content h3 {
        font-size: 14px;
    }

    .co-card-content p {
        font-size: 9px;
    }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

    .co-why-section *,
    .co-why-section *::before,
    .co-why-section *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
/* =========================================================
   SCROLL REVEAL
========================================================= */

.co-why-stage {
    opacity: 0;
    transform: translateY(45px) scale(.97);
    transition: opacity 1s ease, transform 1.1s cubic-bezier(.22,1,.36,1);
}

    .co-why-stage.co-why-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
    }








/* =========================================================
   CLASSES OF IT
   OFFLINE LEARNING SECTION
   3D CLASSROOM EXPERIENCE
========================================================= */

.co-offline-learning {
    --co-blue: #2878ff;
    --co-blue-dark: #173f9c;
    --co-purple: #6654ff;
    --co-pink: #e84bbd;
    --co-green: #12cba5;
    --co-red: #e71937;
    position: relative;
    width: 100%;
    min-height: 720px;
    overflow: hidden;
    isolation: isolate;
    padding: 90px 0;
    background: radial-gradient( circle at 5% 20%, rgba(40,120,255,.16), transparent 27% ), radial-gradient( circle at 92% 30%, rgba(121,75,255,.15), transparent 28% ), radial-gradient( circle at 70% 100%, rgba(232,75,189,.10), transparent 30% ), linear-gradient( 135deg, #f9fcff 0%, #edf5ff 50%, #faf7ff 100% );
}


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

.co-offline-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}


.co-offline-grid {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -15%;
    height: 55%;
    opacity: .30;
    background-image: linear-gradient( rgba(40,120,255,.08) 1px, transparent 1px ), linear-gradient( 90deg, rgba(40,120,255,.08) 1px, transparent 1px );
    background-size: 55px 55px;
    transform: perspective(800px) rotateX(65deg);
    transform-origin: bottom center;
}


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

.co-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(3px);
    animation: coOrbFloat 8s ease-in-out infinite;
}


.co-orb-1 {
    width: 360px;
    height: 360px;
    left: -180px;
    top: 100px;
    background: radial-gradient( circle, rgba(67,139,255,.20), transparent 70% );
}


.co-orb-2 {
    width: 400px;
    height: 400px;
    right: -190px;
    top: 30px;
    background: radial-gradient( circle, rgba(177,89,255,.18), transparent 70% );
    animation-delay: 1s;
}


.co-orb-3 {
    width: 300px;
    height: 300px;
    left: 45%;
    bottom: -200px;
    background: radial-gradient( circle, rgba(32,172,255,.15), transparent 70% );
    animation-delay: 2s;
}


@keyframes coOrbFloat {

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

    50% {
        transform: translate3d(30px,-25px,0);
    }
}


/* =========================================================
   PARTICLES
========================================================= */

.co-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #5c91ff;
    box-shadow: 0 0 15px rgba(50,110,255,.7);
    animation: coParticle 5s ease-in-out infinite;
}


.particle-1 {
    left: 8%;
    top: 25%;
}

.particle-2 {
    left: 18%;
    top: 65%;
    animation-delay: 1s;
}

.particle-3 {
    right: 15%;
    top: 20%;
    animation-delay: 2s;
}

.particle-4 {
    right: 8%;
    top: 70%;
    animation-delay: 1.5s;
}

.particle-5 {
    left: 52%;
    top: 13%;
    animation-delay: 2.5s;
}


@keyframes coParticle {

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

    50% {
        opacity: 1;
        transform: translateY(-25px) scale(1.4);
    }
}


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

.co-offline-container {
    position: relative;
    z-index: 5;
    width: min( 1400px, calc(100% - 70px) );
    min-height: 540px;
    margin: auto;
    display: grid;
    grid-template-columns: 44% 56%;
    align-items: center;
    gap: 20px;
}


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

.co-offline-content {
    position: relative;
    z-index: 20;
    max-width: 570px;
    opacity: 0;
    transform: translateX(-45px);
    transition: opacity .9s ease, transform 1s cubic-bezier(.2,.8,.2,1);
}


.co-offline-learning.co-active
.co-offline-content {
    opacity: 1;
    transform: translateX(0);
}


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

.co-offline-label {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 15px 8px 8px;
    border: 1px solid rgba(40,120,255,.14);
    border-radius: 50px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 12px 30px rgba(40,90,180,.10);
    backdrop-filter: blur(12px);
    color: #2878ff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.2px;
}


.co-label-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient( 135deg, #2878ff, #6854ff );
    box-shadow: 0 8px 18px rgba(40,120,255,.25);
}


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

.co-offline-content h2 {
    margin: 22px 0 15px;
    color: #10235f;
    font-size: clamp( 42px, 4.2vw, 65px );
    font-weight: 950;
    letter-spacing: -3px;
}


    .co-offline-content h2 span {
        display: block;
        background: linear-gradient( 90deg, #147cff, #6356ff, #d244c7 );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }


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

.co-offline-description {
    max-width: 530px;
    margin: 0 0 28px;
    color: #65759a;
    font-size: 15px;
    line-height: 1.7;
}


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

.co-offline-features {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-bottom: 28px;
}


.co-feature-item {
    position: relative;
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 9px 14px;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 18px;
    background: rgba(255,255,255,.66);
    box-shadow: 0 13px 32px rgba(45,78,145,.09);
    backdrop-filter: blur(14px);
    transform-style: preserve-3d;
    transition: transform .45s ease, box-shadow .45s ease, background .45s ease;
}


    .co-feature-item:hover {
        transform: translateX(8px) translateZ(20px) rotateY(-2deg);
        background: rgba(255,255,255,.92);
        box-shadow: 0 20px 45px rgba(45,78,145,.16);
    }


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

.co-feature-number {
    width: 28px;
    color: #9aa8c4;
    font-size: 10px;
    font-weight: 900;
}


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

.co-feature-icon {
    width: 47px;
    height: 47px;
    flex: 0 0 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #fff;
    font-size: 18px;
    box-shadow: 0 10px 20px rgba(50,90,180,.16);
    transform: translateZ(25px);
    transition: transform .4s ease;
}


.co-feature-item:hover
.co-feature-icon {
    transform: translateZ(45px) rotate(-7deg) scale(1.08);
}


.co-feature-icon.blue {
    background: linear-gradient( 135deg, #2878ff, #4d5eff );
}


.co-feature-icon.pink {
    background: linear-gradient( 135deg, #ff4ea9, #d94ac8 );
}


.co-feature-icon.green {
    background: linear-gradient( 135deg, #11d5b0, #11af9b );
}


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

.co-feature-text {
    flex: 1;
}


    .co-feature-text h3 {
        margin: 0 0 3px;
        color: #142960;
        font-size: 14px;
        font-weight: 900;
    }


    .co-feature-text p {
        margin: 0;
        color: #7583a2;
        font-size: 11px;
        line-height: 1.45;
    }


/* =========================================================
   ARROW
========================================================= */

.co-feature-arrow {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #4771b9;
    background: #edf4ff;
    font-size: 17px;
    transition: transform .4s ease, background .4s ease;
}


.co-feature-item:hover
.co-feature-arrow {
    transform: translateX(5px);
    background: #dceaff;
}


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

.co-offline-button {
    width: max-content;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 0 22px;
    border-radius: 50px;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    background: linear-gradient( 90deg, #2878ff, #6554ff, #c944d2 );
    box-shadow: 0 17px 35px rgba(74,83,255,.27);
    transition: transform .4s ease, box-shadow .4s ease;
}


    .co-offline-button i {
        transition: transform .4s ease;
    }


    .co-offline-button:hover {
        transform: translateY(-5px);
        box-shadow: 0 25px 45px rgba(74,83,255,.35);
    }


        .co-offline-button:hover i {
            transform: translateX(6px);
        }


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

.co-offline-visual {
    position: relative;
    height: 570px;
    perspective: 1600px;
    transform-style: preserve-3d;
    opacity: 0;
    transform: translateX(45px);
    transition: opacity 1s ease .15s, transform 1.1s cubic-bezier(.2,.8,.2,1);
}


.co-offline-learning.co-active
.co-offline-visual {
    opacity: 1;
    transform: translateX(0);
}


/* =========================================================
   3D FLOOR
========================================================= */

.co-3d-floor {
    position: absolute;
    width: 500px;
    height: 270px;
    left: 50%;
    bottom: 35px;
    transform: translateX(-50%) rotateX(68deg) rotateZ(-8deg);
    transform-style: preserve-3d;
    border-radius: 50%;
    background: radial-gradient( ellipse, rgba(56,116,255,.22), rgba(255,255,255,0) 68% );
    box-shadow: 0 0 70px rgba(63,111,255,.15);
}


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

.co-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px dashed rgba(61,105,228,.28);
    border-radius: 50%;
    transform: translate(-50%,-50%) rotateX(68deg) rotateZ(-12deg);
    transform-style: preserve-3d;
    pointer-events: none;
}


.orbit-1 {
    width: 430px;
    height: 190px;
    animation: coOrbitRotate 12s linear infinite;
}


.orbit-2 {
    width: 510px;
    height: 230px;
    transform: translate(-50%,-50%) rotateX(68deg) rotateZ(55deg);
    animation: coOrbitRotate2 16s linear infinite;
}


.orbit-3 {
    width: 610px;
    height: 280px;
    border-color: rgba(232,75,189,.18);
    animation: coOrbitRotate3 20s linear infinite;
}


@keyframes coOrbitRotate {

    from {
        transform: translate(-50%,-50%) rotateX(68deg) rotateZ(-12deg);
    }

    to {
        transform: translate(-50%,-50%) rotateX(68deg) rotateZ(348deg);
    }
}


@keyframes coOrbitRotate2 {

    from {
        transform: translate(-50%,-50%) rotateX(68deg) rotateZ(55deg);
    }

    to {
        transform: translate(-50%,-50%) rotateX(68deg) rotateZ(-305deg);
    }
}


@keyframes coOrbitRotate3 {

    from {
        transform: translate(-50%,-50%) rotateX(68deg) rotateZ(0deg);
    }

    to {
        transform: translate(-50%,-50%) rotateX(68deg) rotateZ(360deg);
    }
}


/* =========================================================
   CLASSROOM CORE
========================================================= */

.co-classroom-core {
    position: absolute;
    left: 50%;
    top: 48%;
    width: 300px;
    height: 350px;
    transform: translate(-50%,-50%) translateZ(80px);
    transform-style: preserve-3d;
    animation: coCoreFloat 5s ease-in-out infinite;
}


@keyframes coCoreFloat {

    0%,100% {
        transform: translate(-50%,-50%) translateZ(80px) translateY(0);
    }

    50% {
        transform: translate(-50%,-50%) translateZ(120px) translateY(-12px);
    }
}


/* =========================================================
   CORE GLOW
========================================================= */

.co-core-glow {
    position: absolute;
    width: 330px;
    height: 330px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    background: radial-gradient( circle, rgba(57,121,255,.30), rgba(116,78,255,.12), transparent 68% );
    filter: blur(18px);
    animation: coCoreGlow 4s ease-in-out infinite;
}


@keyframes coCoreGlow {

    0%,100% {
        transform: translate(-50%,-50%) scale(.9);
        opacity: .6;
    }

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


/* =========================================================
   CORE CARD
========================================================= */

.co-core-card {
    position: absolute;
    inset: 20px 15px 10px;
    padding: 17px;
    border-radius: 28px;
    background: linear-gradient( 145deg, rgba(255,255,255,.95), rgba(232,241,255,.92) );
    border: 1px solid rgba(255,255,255,.95);
    box-shadow: 0 35px 70px rgba(41,72,140,.23), inset 0 1px 0 #fff;
    transform: rotateX(4deg) rotateY(-5deg) translateZ(40px);
    transform-style: preserve-3d;
}


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

.co-core-top {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    color: #52688e;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}


.co-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #12cba5;
    box-shadow: 0 0 12px rgba(18,203,165,.8);
    animation: coLive 1.5s ease-in-out infinite;
}


@keyframes coLive {

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

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


/* =========================================================
   SCREEN
========================================================= */

.co-screen {
    position: relative;
    height: 205px;
    overflow: hidden;
    border-radius: 17px;
    background: linear-gradient( 145deg, #0e1d3e, #182e63 );
    border: 4px solid #d9e7ff;
    box-shadow: inset 0 0 35px rgba(0,0,0,.28), 0 12px 25px rgba(35,70,130,.20);
    transform: translateZ(25px);
}


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

.co-screen-top {
    height: 22px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 8px;
    background: rgba(255,255,255,.07);
}


    .co-screen-top span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255,255,255,.65);
    }


/* =========================================================
   CODE
========================================================= */

.co-code-lines {
    position: absolute;
    left: 15px;
    top: 48px;
    width: 115px;
}


    .co-code-lines i {
        display: block;
        height: 5px;
        margin-bottom: 10px;
        border-radius: 10px;
        background: linear-gradient( 90deg, #4db4ff, #9a7bff );
        animation: coCode 2.5s ease-in-out infinite;
    }


        .co-code-lines i:nth-child(1) {
            width: 90%;
        }

        .co-code-lines i:nth-child(2) {
            width: 65%;
            animation-delay: .2s;
        }

        .co-code-lines i:nth-child(3) {
            width: 78%;
            animation-delay: .4s;
        }

        .co-code-lines i:nth-child(4) {
            width: 50%;
            animation-delay: .6s;
        }

        .co-code-lines i:nth-child(5) {
            width: 85%;
            animation-delay: .8s;
        }

        .co-code-lines i:nth-child(6) {
            width: 60%;
            animation-delay: 1s;
        }


@keyframes coCode {

    0%,100% {
        opacity: .45;
        transform: scaleX(.88);
        transform-origin: left;
    }

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


/* =========================================================
   PERSON
========================================================= */

.co-screen-person {
    position: absolute;
    right: 28px;
    bottom: 18px;
    width: 85px;
    height: 135px;
}


.co-person-head {
    position: absolute;
    top: 0;
    left: 25px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: linear-gradient( 145deg, #f5c8a8, #d99570 );
    box-shadow: inset -5px -4px 8px rgba(90,40,20,.10);
}


    .co-person-head::before {
        content: "";
        position: absolute;
        width: 38px;
        height: 17px;
        left: -2px;
        top: -4px;
        border-radius: 20px 20px 5px 5px;
        background: #171e35;
    }


.co-person-body {
    position: absolute;
    left: 8px;
    bottom: 0;
    width: 70px;
    height: 80px;
    border-radius: 30px 30px 10px 10px;
    background: linear-gradient( 135deg, #2e76ff, #624eff );
}


/* =========================================================
   CORE BOTTOM
========================================================= */

.co-core-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 4px 0;
}


    .co-core-bottom strong {
        display: block;
        color: #14275d;
        font-size: 13px;
        font-weight: 900;
    }


    .co-core-bottom small {
        display: block;
        margin-top: 3px;
        color: #7785a3;
        font-size: 9px;
    }


.co-core-play {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    background: linear-gradient( 135deg, #2878ff, #7052ff );
    box-shadow: 0 10px 20px rgba(50,100,255,.25);
}


/* =========================================================
   FLOATING CORE ICONS
========================================================= */

.co-floating-cap,
.co-floating-laptop,
.co-floating-bulb {
    position: absolute;
    z-index: 20;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: #fff;
    font-size: 22px;
    border: 2px solid rgba(255,255,255,.8);
    box-shadow: 0 18px 30px rgba(45,76,145,.20);
    transform: translateZ(90px);
}


.co-floating-cap {
    left: -8px;
    top: 40px;
    background: linear-gradient( 135deg, #2878ff, #5d58ff );
    animation: coFloatIcon 4s ease-in-out infinite;
}


.co-floating-laptop {
    right: -8px;
    top: 105px;
    background: linear-gradient( 135deg, #11cdae, #0ca58f );
    animation: coFloatIcon 4.5s ease-in-out infinite;
    animation-delay: .6s;
}


.co-floating-bulb {
    left: -20px;
    bottom: 55px;
    background: linear-gradient( 135deg, #ffad35, #ff7924 );
    animation: coFloatIcon 5s ease-in-out infinite;
    animation-delay: 1s;
}


@keyframes coFloatIcon {

    0%,100% {
        transform: translateZ(90px) translateY(0) rotate(0);
    }

    50% {
        transform: translateZ(125px) translateY(-14px) rotate(5deg);
    }
}


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

.co-visual-card {
    position: absolute;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 205px;
    padding: 11px;
    border: 1px solid rgba(255,255,255,.95);
    border-radius: 18px;
    background: rgba(255,255,255,.80);
    box-shadow: 0 22px 45px rgba(43,75,140,.16);
    backdrop-filter: blur(15px);
    transform-style: preserve-3d;
    animation: coVisualFloat 5s ease-in-out infinite;
    transition: box-shadow .4s ease, transform .4s ease;
}


    .co-visual-card:hover {
        box-shadow: 0 30px 60px rgba(43,75,140,.25);
        transform: translateY(-7px) translateZ(50px) rotateY(-4deg);
    }


.visual-card-1 {
    left: 0;
    top: 115px;
}


.visual-card-2 {
    right: -5px;
    top: 285px;
    animation-delay: .8s;
}


.visual-card-3 {
    left: 65px;
    bottom: 40px;
    animation-delay: 1.4s;
}


@keyframes coVisualFloat {

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

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


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

.co-visual-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: #fff;
    font-size: 16px;
}


    .co-visual-icon.blue {
        background: linear-gradient(135deg,#2878ff,#5960ff);
    }

    .co-visual-icon.pink {
        background: linear-gradient(135deg,#ff4ba8,#d84bc6);
    }

    .co-visual-icon.green {
        background: linear-gradient(135deg,#11d4ad,#0fa891);
    }


.co-visual-card strong {
    display: block;
    color: #182b61;
    font-size: 11px;
    font-weight: 900;
}


.co-visual-card span {
    display: block;
    margin-top: 3px;
    color: #7a87a3;
    font-size: 8.5px;
}


.co-mini-check {
    width: 19px;
    height: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    border-radius: 50%;
    color: #fff;
    background: #12cba5;
    font-size: 10px;
}


/* =========================================================
   BOTTOM BADGE
========================================================= */

.co-learning-badge {
    position: absolute;
    right: 55px;
    bottom: 5px;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    border-radius: 16px;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(255,255,255,.95);
    box-shadow: 0 18px 40px rgba(43,76,145,.14);
    backdrop-filter: blur(14px);
}


.co-badge-star {
    width: 37px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient( 135deg, #ffb23c, #ff7e25 );
}


.co-learning-badge strong {
    display: block;
    color: #172a61;
    font-size: 11px;
    font-weight: 900;
}


.co-learning-badge small {
    display: block;
    margin-top: 2px;
    color: #7b87a3;
    font-size: 8px;
}


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

@media (max-width:1100px) {

    .co-offline-container {
        width: calc(100% - 45px);
        grid-template-columns: 47% 53%;
    }


    .co-offline-content h2 {
        font-size: 47px;
    }


    .co-offline-visual {
        transform: scale(.88);
    }


    .co-offline-learning.co-active
    .co-offline-visual {
        transform: scale(.88);
    }


    .co-visual-card {
        min-width: 185px;
    }


    .visual-card-1 {
        left: -20px;
    }


    .visual-card-2 {
        right: -30px;
    }


    .visual-card-3 {
        left: 20px;
    }
}


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

@media (max-width:850px) {

    .co-offline-learning {
        padding: 70px 0;
    }


    .co-offline-container {
        grid-template-columns: 1fr;
        gap: 45px;
        width: calc(100% - 40px);
    }


    .co-offline-content {
        max-width: 650px;
        margin: auto;
        text-align: center;
    }


    .co-offline-label {
        margin: auto;
    }


    .co-offline-description {
        margin-left: auto;
        margin-right: auto;
    }


    .co-offline-features {
        text-align: left;
    }


    .co-offline-button {
        margin: auto;
    }


    .co-offline-visual {
        width: 100%;
        max-width: 680px;
        height: 540px;
        margin: auto;
        transform: scale(.92);
    }


    .co-offline-learning.co-active
    .co-offline-visual {
        transform: scale(.92);
    }
}


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

@media (max-width:600px) {

    .co-offline-learning {
        min-height: auto;
        padding: 55px 0;
    }


    .co-offline-container {
        width: calc(100% - 28px);
        gap: 35px;
    }


    .co-offline-content h2 {
        font-size: 36px;
        letter-spacing: -1.8px;
    }


    .co-offline-description {
        font-size: 13px;
        line-height: 1.6;
    }


    .co-feature-item {
        min-height: 68px;
        padding: 8px 10px;
        gap: 9px;
        border-radius: 15px;
    }


    .co-feature-number {
        width: 20px;
        font-size: 8px;
    }


    .co-feature-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        font-size: 16px;
    }


    .co-feature-text h3 {
        font-size: 12px;
    }


    .co-feature-text p {
        font-size: 9px;
    }


    .co-feature-arrow {
        display: none;
    }


    .co-offline-button {
        width: 100%;
        justify-content: center;
    }


    /* visual */

    .co-offline-visual {
        height: 480px;
        transform: scale(.72);
        transform-origin: center top;
        margin-bottom: -110px;
    }


    .co-offline-learning.co-active
    .co-offline-visual {
        transform: scale(.72);
    }


    .co-visual-card {
        min-width: 175px;
    }


    .visual-card-1 {
        left: -5px;
        top: 95px;
    }


    .visual-card-2 {
        right: -5px;
        top: 260px;
    }


    .visual-card-3 {
        left: 15px;
        bottom: 35px;
    }


    .co-learning-badge {
        right: 5px;
        bottom: 0;
    }
}


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

@media (max-width:430px) {

    .co-offline-content h2 {
        font-size: 31px;
    }


    .co-offline-label {
        font-size: 10px;
    }


    .co-feature-item {
        min-height: 64px;
    }


    .co-feature-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }


    .co-feature-text p {
        display: none;
    }


    .co-offline-visual {
        height: 450px;
        transform: scale(.60);
        transform-origin: center top;
        margin-bottom: -150px;
    }


    .co-offline-learning.co-active
    .co-offline-visual {
        transform: scale(.60);
    }
}


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

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

    .co-offline-learning *,
    .co-offline-learning *::before,
    .co-offline-learning *::after {
        animation: none !important;
        transition: none !important;
    }
}










/* =========================================================
   CLASSES OF IT
   YOUR LEARNING JOURNEY
   FINAL STABLE 3D VERSION
========================================================= */

.co-journey-section {
    --j-blue: #2f83ff;
    --j-purple: #9657ff;
    --j-cyan: #15d8d0;
    --j-orange: #ff9c35;
    position: relative;
    width: 100%;
    min-height: 900px;
    padding: 75px 0 55px;
    overflow: hidden;
    isolation: isolate;
    color: #ffffff;
    background: radial-gradient( circle at 10% 35%, rgba(32, 104, 255, .18), transparent 30% ), radial-gradient( circle at 90% 25%, rgba(126, 55, 255, .17), transparent 32% ), radial-gradient( circle at 50% 90%, rgba(0, 205, 255, .08), transparent 35% ), linear-gradient( 135deg, #030a1a 0%, #06142e 42%, #080d25 70%, #120a2b 100% );
}


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

.co-journey-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}


/* =========================================================
   STAR FIELD
========================================================= */

.co-stars {
    position: absolute;
    inset: 0;
    opacity: .42;
    background-image: radial-gradient( circle, rgba(255,255,255,.8) 1px, transparent 1.6px );
    background-size: 92px 92px;
    animation: journeyStars 28s linear infinite;
}


@keyframes journeyStars {

    from {
        background-position: 0 0;
    }

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


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

.co-journey-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    opacity: .55;
}


.glow-1 {
    width: 430px;
    height: 430px;
    left: -190px;
    top: 190px;
    background: rgba(31, 105, 255, .22);
    animation: journeyGlowOne 9s ease-in-out infinite;
}


.glow-2 {
    width: 450px;
    height: 450px;
    right: -190px;
    top: 90px;
    background: rgba(123, 57, 255, .20);
    animation: journeyGlowTwo 11s ease-in-out infinite;
}


.glow-3 {
    width: 500px;
    height: 260px;
    left: 35%;
    bottom: -140px;
    background: rgba(0, 211, 255, .14);
    animation: journeyGlowThree 8s ease-in-out infinite;
}


@keyframes journeyGlowOne {

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

    50% {
        transform: translate3d(65px,-30px,0) scale(1.1);
    }
}


@keyframes journeyGlowTwo {

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

    50% {
        transform: translate3d(-60px,35px,0) scale(1.1);
    }
}


@keyframes journeyGlowThree {

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

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


/* =========================================================
   PARTICLES
========================================================= */

.co-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #63a8ff;
    box-shadow: 0 0 12px rgba(70,160,255,.9);
    animation: journeyParticle 5s ease-in-out infinite;
}


.p1 {
    left: 5%;
    top: 18%;
}

.p2 {
    left: 15%;
    top: 70%;
    animation-delay: .8s;
}

.p3 {
    left: 27%;
    top: 12%;
    animation-delay: 1.4s;
}

.p4 {
    left: 42%;
    top: 75%;
    animation-delay: 2s;
}

.p5 {
    left: 57%;
    top: 12%;
    animation-delay: .5s;
}

.p6 {
    left: 70%;
    top: 75%;
    animation-delay: 1.6s;
}

.p7 {
    left: 82%;
    top: 20%;
    animation-delay: 2.2s;
}

.p8 {
    left: 94%;
    top: 62%;
    animation-delay: 2.8s;
}

.p9 {
    left: 48%;
    top: 7%;
    animation-delay: 1s;
}

.p10 {
    left: 91%;
    top: 38%;
    animation-delay: 3s;
}


@keyframes journeyParticle {

    0%, 100% {
        transform: translateY(0) scale(.6);
        opacity: .25;
    }

    50% {
        transform: translateY(-20px) scale(1.35);
        opacity: 1;
    }
}


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

.co-journey-wrapper {
    position: relative;
    z-index: 10;
    width: min( 1500px, calc(100% - 70px) );
    margin: 0 auto;
}


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

.co-journey-heading {
    position: relative;
    z-index: 30;
    width: min(780px, 100%);
    margin: 0 auto 35px;
    text-align: center;
    /* IMPORTANT:
       No opacity:0
       No dependency on JS
    */

    opacity: 1;
    transform: translateY(0);
    transition: opacity .8s ease, transform .8s ease;
}


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

.co-journey-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 8px 17px;
    border: 1px solid rgba(139,94,255,.40);
    border-radius: 50px;
    background: rgba(92,57,210,.15);
    color: #d1c4ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    backdrop-filter: blur(12px);
    box-shadow: 0 0 25px rgba(113,69,255,.15);
}


.co-label-icon {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient( 135deg, #6e4eff, #b64fff );
    color: #ffffff;
    box-shadow: 0 0 17px rgba(126,76,255,.60);
}


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

.co-journey-heading h2 {
    margin: 17px 0 12px;
    font-size: clamp( 42px, 5vw, 68px );
    line-height: .98;
    font-weight: 900;
    letter-spacing: -3px;
    color: #ffffff;
    text-shadow: 0 8px 35px rgba(0,0,0,.42);
}


    .co-journey-heading h2 span {
        display: block;
        background: linear-gradient( 90deg, #20bfff, #596eff, #c85ae9 );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        filter: drop-shadow( 0 0 18px rgba(94,101,255,.18) );
    }


.co-journey-heading p {
    width: min(700px,100%);
    margin: 0 auto;
    color: rgba(207,220,247,.68);
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   SCENE
========================================================= */

.co-journey-scene {
    position: relative;
    width: 100%;
    height: 560px;
    perspective: 1800px;
    transform-style: preserve-3d;
}


/* =========================================================
   MOUNTAINS
========================================================= */

.co-mountain {
    position: absolute;
    bottom: 65px;
    width: 420px;
    height: 190px;
    opacity: .22;
    background: linear-gradient( 145deg, #24416e, #060d20 );
    clip-path: polygon( 0 100%, 16% 63%, 27% 78%, 41% 34%, 53% 68%, 66% 23%, 78% 65%, 100% 100% );
    pointer-events: none;
}


.mountain-left {
    left: -100px;
    transform: translateZ(-100px) rotateY(12deg);
}


.mountain-right {
    right: -90px;
    transform: translateZ(-100px) rotateY(-12deg);
}


/* =========================================================
   TROPHY
========================================================= */

.co-trophy {
    position: absolute;
    top: -50px;
    right: 35px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #ffbe4d;
    background: rgba(255,165,45,.10);
    border: 1px solid rgba(255,184,70,.40);
    box-shadow: 0 0 28px rgba(255,170,45,.30);
    animation: trophyFloat 3.5s ease-in-out infinite;
}


@keyframes trophyFloat {

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

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


/* =========================================================
   ROAD
========================================================= */

.co-road {
    position: absolute;
    z-index: 1;
    left: 1%;
    right: 1%;
    bottom: 65px;
    height: 150px;
    pointer-events: none;
    transform: perspective(1000px) rotateX(58deg);
    transform-origin: center bottom;
}


/* =========================================================
   ROAD GLOW
========================================================= */

.co-road-glow {
    position: absolute;
    left: -2%;
    top: 37px;
    width: 104%;
    height: 78px;
    border-radius: 50%;
    background: linear-gradient( 90deg, rgba(39,122,255,.70), rgba(139,81,255,.72), rgba(19,214,216,.72), rgba(133,81,255,.70), rgba(255,151,47,.72) );
    filter: blur(24px);
    opacity: .72;
}


/* =========================================================
   ROAD CORE
========================================================= */

.co-road-core {
    position: absolute;
    left: 0;
    top: 52px;
    width: 100%;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient( 90deg, #287fff, #8d58ff, #15d6d8, #8357ff, #ff9837 );
    box-shadow: 0 0 14px rgba(52,145,255,.95), 0 0 38px rgba(63,117,255,.58);
}


/* =========================================================
   ROAD DASHES
========================================================= */

.co-road-dashes {
    position: absolute;
    z-index: 5;
    left: 3%;
    top: 70px;
    width: 94%;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
}


    .co-road-dashes span {
        flex: 0 0 44px;
        height: 4px;
        border-radius: 20px;
        background: #ffffff;
        box-shadow: 0 0 10px #ffffff, 0 0 18px #46cfff;
    }


/* =========================================================
   JOURNEY CARDS
========================================================= */

.co-journey-card {
    position: absolute;
    z-index: 10;
    width: calc( (100% - 90px) / 4 );
    max-width: 320px;
    height: 280px;
    transform-style: preserve-3d;
    /* IMPORTANT */
    opacity: 1;
    visibility: visible;
    will-change: transform;
}


/* =========================================================
   CARD POSITIONS
========================================================= */

.journey-01 {
    left: 0;
    top: 65px;
    --accent: var(--j-blue);
    transform: rotate(-2deg);
}


.journey-02 {
    left: calc(33.333% - 83px);
    top: 135px;
    --accent: var(--j-purple);
    transform: rotate(1deg);
}


.journey-03 {
    left: calc(66.666% - 181px);
    top: 190px;
    --accent: var(--j-cyan);
    transform: rotate(-1deg);
}


.journey-04 {
    right: 0;
    top: 135px;
    --accent: var(--j-orange);
    transform: rotate(2deg);
}


/* =========================================================
   CARD PLATFORM
========================================================= */

.co-card-platform {
    position: absolute;
    z-index: 0;
    left: 50%;
    bottom: -40px;
    width: 92%;
    height: 65px;
    transform: translateX(-50%) rotateX(65deg) translateZ(-15px);
    transform-style: preserve-3d;
    pointer-events: none;
}


.co-platform-ring {
    position: absolute;
    inset: 0;
    border: 4px solid var(--accent);
    border-radius: 50%;
    background: rgba(8,22,49,.65);
    box-shadow: 0 0 12px var(--accent), inset 0 0 22px rgba(255,255,255,.05);
}


.co-platform-glow {
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: var(--accent);
    filter: blur(20px);
    opacity: .24;
}


/* =========================================================
   CARD BODY
========================================================= */

.co-journey-card-inner {
    position: relative;
    z-index: 5;
    width: 100%;
    height: 100%;
    padding: 42px 25px 20px;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient( 145deg, rgba(22,48,93,.96), rgba(6,17,41,.98) );
    border: 1px solid rgba(137,171,230,.27);
    box-shadow: 0 25px 55px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.09), 0 0 35px rgba(47,131,255,.08);
    backdrop-filter: blur(14px);
    transform: translateZ(30px);
    transform-style: preserve-3d;
    transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
}


    /* =========================================================
   CARD LIGHT
========================================================= */

    .co-journey-card-inner::before {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        top: -110px;
        right: -60px;
        border-radius: 50%;
        background: var(--accent);
        filter: blur(65px);
        opacity: .17;
        pointer-events: none;
    }


    /* =========================================================
   CARD SHINE
========================================================= */

    .co-journey-card-inner::after {
        content: "";
        position: absolute;
        top: -120%;
        left: -100%;
        width: 55%;
        height: 300%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.11), transparent );
        transform: rotate(25deg);
        transition: left 1s ease;
        pointer-events: none;
    }


.co-journey-card:hover
.co-journey-card-inner::after {
    left: 160%;
}


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

.co-step-number {
    position: absolute;
    z-index: 30;
    left: -12px;
    top: -28px;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient( circle at 35% 25%, #ffffff 0%, var(--accent) 18%, #182044 88% );
    border: 4px solid #061126;
    color: #ffffff;
    font-size: 21px;
    font-weight: 900;
    box-shadow: 0 0 0 3px rgba(255,255,255,.06), 0 0 30px var(--accent);
    transform: translateZ(80px);
    transition: transform .45s ease;
}


.co-journey-card:hover
.co-step-number {
    transform: translateZ(110px) scale(1.07) rotate(-5deg);
}


/* =========================================================
   KICKER
========================================================= */

.co-card-kicker {
    display: block;
    margin-bottom: 10px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.8px;
}


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

.co-journey-card h3 {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 26px;
    line-height: 1.03;
    font-weight: 900;
    letter-spacing: -.7px;
}


    .co-journey-card h3 span {
        display: block;
        color: #c2cee8;
    }


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

.co-journey-card p {
    width: 88%;
    margin: 0;
    color: rgba(207,220,245,.68);
    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   CARD ACTION
========================================================= */

.co-card-action {
    position: absolute;
    left: 25px;
    right: 25px;
    bottom: 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.09);
    color: rgba(230,237,252,.82);
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
}


    .co-card-action i {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--accent);
        color: #ffffff;
        box-shadow: 0 0 20px var(--accent);
        transition: transform .35s ease;
    }


    .co-card-action:hover i {
        transform: translateX(5px);
    }


/* =========================================================
   FLOATING EDUCATION OBJECTS
========================================================= */

.co-card-object,
.co-code-panel,
.co-project-panel {
    pointer-events: none;
}


.co-card-object {
    position: absolute;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;


    color: #ffffff;

    backdrop-filter: blur(10px);
    transform: translateZ(80px);
    animation: educationObject 4s ease-in-out infinite;
}


.object-books {
    width: 58px;
    height: 58px;
    right: -13px;
    bottom: -85px;
    font-size: 23px;
}


.object-cap {
    width: 48px;
    height: 48px;
    right: 197px;
    bottom: -45px;
    font-size: 20px;
    animation-delay: -.8s;
}


.object-book {
    width: 58px;
    height: 58px;
    right: 58px;
    bottom: -78px;
    font-size: 24px;
}

.object-bulb {
    width: 48px;
    height: 48px;
    right: 10px;
    top: -56px;
    color: #ffd75a;
    font-size: 37px;
    animation-delay: -1s;
}


.object-laptop {
    width: 62px;
    height: 62px;
    right: 55px;
    bottom: -58px;
    color: #75eaff;
    font-size: 25px;
}


.object-rocket {
    width: 65px;
    height: 65px;
    right: 25px;
    bottom: -79px;
    color: #ffb048;
    font-size: 28px;
    animation: rocketFloat 3.5s ease-in-out infinite;
}


@keyframes educationObject {

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

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


@keyframes rocketFloat {

    0%, 100% {
        transform: translateZ(95px) translateY(0) rotate(-10deg);
    }

    50% {
        transform: translateZ(115px) translateY(-12px) rotate(-3deg);
    }
}


/* =========================================================
   CODE PANEL
========================================================= */

.co-code-panel {
    position: absolute;
    z-index: 30;
    right: 59px;
    top: -77px;
    width: 60px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: #49e9ff;
    background: rgba(7,43,69,.88);
    border: 1px solid rgba(56,224,255,.35);
    box-shadow: 0 0 25px rgba(22,213,255,.25);
    transform: translateZ(90px) rotate(-4deg);
    font-size: 20px;
    animation: codePanelFloat 4s ease-in-out infinite;
}


@keyframes codePanelFloat {

    0%, 100% {
        transform: translateZ(90px) translateY(0) rotate(-4deg);
    }

    50% {
        transform: translateZ(110px) translateY(-8px) rotate(3deg);
    }
}


/* =========================================================
   PROJECT PANELS
========================================================= */

.co-project-panel {
    position: absolute;
    z-index: 30;
    right: 72px;
    top: -48px;
    display: flex;
    gap: 6px;
    transform: translateZ(95px) rotate(4deg);
}


    .co-project-panel span {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 11px;
        color: #79eaff;
        background: rgba(12,55,76,.85);
        border: 1px solid rgba(62,225,255,.32);
        box-shadow: 0 0 18px rgba(29,210,255,.20);
    }


/* =========================================================
   FLOATING NOTES
========================================================= */

.co-floating-note {
    position: absolute;
    z-index: 4;
    color: rgba(191,207,246,.72);
    font-family: "Comic Sans MS", cursive;
    font-size: 17px;
    line-height: 1.25;
    font-style: italic;
    animation: journeyNote 5s ease-in-out infinite;
}


.note-left {
    left: 10%;
    top: 0;
}


.note-right {
    right: 10%;
    top: 0;
    animation-delay: -2s;
}


@keyframes journeyNote {

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

    50% {
        transform: translateY(-8px) rotate(2deg);
    }
}


/* =========================================================
   ROAD SIGNS
========================================================= */

.co-road-sign {
    position: absolute;
    z-index: 8;
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.sign-left {
    left: 9%;
    bottom: 5px;
    transform: rotate(-5deg);
}


.sign-right {
    right: 5%;
    bottom: 5px;
    transform: rotate(4deg);
}


.co-road-sign span {
    padding: 6px 13px;
    border: 1px solid rgba(67,145,255,.35);
    border-radius: 4px;
    background: linear-gradient( 90deg, rgba(18,50,98,.95), rgba(7,24,55,.95) );
    color: #9acaff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
    box-shadow: 0 8px 18px rgba(0,0,0,.3);
}


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

.co-journey-bottom {
    position: relative;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 5px;
    padding: 17px 22px;
    border: 1px solid rgba(103,139,221,.18);
    border-radius: 22px;
    background: rgba(8,23,49,.72);
    backdrop-filter: blur(18px);
    box-shadow: 0 20px 50px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
    opacity: 1;
    transform: translateY(0);
}


.co-bottom-message {
    display: flex;
    align-items: center;
    gap: 13px;
}


.co-bottom-icon {
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient( 135deg, #287dff, #8055ff );
    color: #ffffff;
    box-shadow: 0 0 24px rgba(72,100,255,.4);
    animation: bottomIconPulse 2.5s ease-in-out infinite;
}


@keyframes bottomIconPulse {

    0%, 100% {
        box-shadow: 0 0 16px rgba(72,100,255,.3);
    }

    50% {
        box-shadow: 0 0 30px rgba(72,100,255,.65);
    }
}


.co-bottom-message strong {
    display: block;
    color: #ffffff;
    font-size: 15px;
}


.co-bottom-message small {
    display: block;
    margin-top: 3px;
    color: rgba(190,205,236,.58);
    font-size: 10px;
}


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

.co-journey-main-btn {
    height: 52px;
    min-width: 205px;
    padding: 0 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    border-radius: 50px;
    background: linear-gradient( 90deg, #168fff, #7254ff, #d844db );
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 850;
    box-shadow: 0 15px 35px rgba(62,84,255,.35);
    transition: transform .35s ease, box-shadow .35s ease;
}


    .co-journey-main-btn:hover {
        color: #ffffff;
        transform: translateY(-4px);
        box-shadow: 0 20px 45px rgba(62,84,255,.55);
    }


    .co-journey-main-btn i {
        transition: transform .35s ease;
    }


    .co-journey-main-btn:hover i {
        transform: translateX(6px);
    }


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

@media (max-width: 1200px) {

    .co-journey-wrapper {
        width: calc(100% - 45px);
    }


    .co-journey-card {
        width: 23%;
        max-width: none;
    }


    .journey-01 {
        left: 0;
    }


    .journey-02 {
        left: 25.5%;
    }


    .journey-03 {
        left: 51%;
    }


    .journey-04 {
        right: 0;
    }


    .co-journey-card h3 {
        font-size: 22px;
    }


    .co-journey-card p {
        font-size: 11px;
    }
}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 950px) {

    .co-journey-scene {
        height: 780px;
    }


    .co-journey-card {
        width: 43%;
        height: 280px;
    }


    .journey-01 {
        left: 2%;
        top: 45px;
    }


    .journey-02 {
        left: 55%;
        top: 105px;
    }


    .journey-03 {
        left: 2%;
        top: 420px;
    }


    .journey-04 {
        right: 2%;
        top: 480px;
    }


    .co-road {
        left: 5%;
        right: 5%;
        opacity: .55;
    }


    .co-floating-note {
        display: none;
    }
}


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

@media (max-width: 700px) {

    .co-journey-section {
        min-height: auto;
        padding: 60px 0 35px;
    }


    .co-journey-wrapper {
        width: calc(100% - 28px);
    }


    .co-journey-heading {
        margin-bottom: 15px;
    }


        .co-journey-heading h2 {
            font-size: 38px;
            letter-spacing: -1.8px;
        }


        .co-journey-heading p {
            font-size: 12px;
        }


    .co-journey-scene {
        height: auto;
        padding: 50px 3px 25px;
        display: flex;
        flex-direction: column;
        gap: 58px;
    }


    .co-road {
        display: none;
    }


    .co-mountain {
        display: none;
    }


    .co-journey-card {
        position: relative;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        width: 100%;
        max-width: none;
        height: 300px;
        transform: none !important;
        opacity: 1;
        visibility: visible;
    }


    .co-journey-card-inner {
        transform: translateZ(20px);
    }


    .co-step-number {
        width: 62px;
        height: 62px;
        left: -5px;
        top: -21px;
        font-size: 18px;
    }


    .co-card-object {
        transform: translateZ(50px) scale(.85);
    }


    .co-code-panel,
    .co-project-panel {
        display: none;
    }


    .co-road-sign {
        display: none;
    }


    .co-journey-bottom {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
        margin-top: 20px;
    }


    .co-journey-main-btn {
        width: 100%;
    }
}


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

@media (max-width: 430px) {

    .co-journey-heading h2 {
        font-size: 32px;
    }


    .co-journey-heading p {
        font-size: 11px;
    }


    .co-journey-card {
        height: 285px;
    }


    .co-journey-card-inner {
        padding: 40px 20px 18px;
    }


    .co-journey-card h3 {
        font-size: 23px;
    }


    .co-journey-card p {
        font-size: 11px;
    }


    .co-card-action {
        left: 20px;
        right: 20px;
    }


    .object-books,
    .object-cap {
        transform: translateZ(45px) scale(.7);
    }
}


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

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

    .co-journey-section *,
    .co-journey-section *::before,
    .co-journey-section *::after {
        animation: none !important;
        transition: none !important;
    }
}








/* =========================================================
   CLASSES OF IT
   08 — MEET YOUR MENTOR
   PREMIUM LIGHT 3D EDUCATION SECTION
========================================================= */

.co-mentor-section {
    --mentor-blue: #1677ff;
    --mentor-blue-dark: #0e4fd0;
    --mentor-purple: #7651ff;
    --mentor-violet: #9a52ed;
    --mentor-red: #ef5368;
    position: relative;
    width: 100%;
    min-height: 850px;
    padding: 90px 0 45px;
    overflow: hidden;
    isolation: isolate;
    color: #10204b;
    background: radial-gradient( circle at 10% 20%, rgba(55,133,255,.13), transparent 30% ), radial-gradient( circle at 88% 20%, rgba(126,82,255,.13), transparent 31% ), radial-gradient( circle at 55% 90%, rgba(35,161,255,.10), transparent 34% ), linear-gradient( 135deg, #f8fbff 0%, #eef6ff 48%, #f7f3ff 100% );
}


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

.co-mentor-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}


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

.mentor-grid {
    position: absolute;
    inset: 0;
    opacity: .35;
    background-image: linear-gradient( rgba(47,109,220,.045) 1px, transparent 1px ), linear-gradient( 90deg, rgba(47,109,220,.045) 1px, transparent 1px );
    background-size: 55px 55px;
    mask-image: linear-gradient( to bottom, transparent, black 20%, black 75%, transparent );
}


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

.mentor-bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
}


.mentor-orb-1 {
    width: 430px;
    height: 430px;
    left: -170px;
    top: 180px;
    background: radial-gradient( circle, rgba(62,140,255,.17), transparent 70% );
    animation: mentorOrbOne 9s ease-in-out infinite;
}


.mentor-orb-2 {
    width: 420px;
    height: 420px;
    right: -150px;
    top: 80px;
    background: radial-gradient( circle, rgba(126,78,255,.17), transparent 70% );
    animation: mentorOrbTwo 11s ease-in-out infinite;
}


.mentor-orb-3 {
    width: 320px;
    height: 320px;
    left: 45%;
    bottom: -170px;
    background: radial-gradient( circle, rgba(18,151,255,.13), transparent 70% );
    animation: mentorOrbThree 8s ease-in-out infinite;
}


@keyframes mentorOrbOne {

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

    50% {
        transform: translate3d(70px,-40px,0) scale(1.12);
    }
}


@keyframes mentorOrbTwo {

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

    50% {
        transform: translate3d(-65px,45px,0) scale(1.1);
    }
}


@keyframes mentorOrbThree {

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

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


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

.mentor-dot {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #579cff;
    box-shadow: 0 0 14px rgba(45,126,255,.7);
    animation: mentorDotFloat 4s ease-in-out infinite;
}


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


.mentor-dot-2 {
    left: 24%;
    top: 72%;
    animation-delay: -1s;
}


.mentor-dot-3 {
    left: 48%;
    top: 15%;
    animation-delay: -2s;
}


.mentor-dot-4 {
    right: 15%;
    top: 58%;
    animation-delay: -.6s;
}


.mentor-dot-5 {
    right: 7%;
    top: 18%;
    animation-delay: -2.5s;
}


@keyframes mentorDotFloat {

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

    50% {
        transform: translateY(-18px) scale(1.4);
        opacity: 1;
    }
}


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

.co-mentor-container {
    position: relative;
    z-index: 5;
    width: min( 1380px, calc(100% - 70px) );
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 45px;
}


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

.co-mentor-content {
    position: relative;
    z-index: 10;
    opacity: 0;
    transform: translateX(-45px);
    transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1);
}


.co-mentor-section.is-visible
.co-mentor-content {
    opacity: 1;
    transform: translateX(0);
}


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

.co-mentor-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 17px 8px 8px;
    border: 1px solid rgba(48,111,232,.14);
    border-radius: 50px;
    background: rgba(255,255,255,.72);
    color: #1766db;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.5px;
    box-shadow: 0 12px 35px rgba(43,105,210,.08), inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter: blur(14px);
}


.mentor-label-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient( 135deg, #287fff, #6552ff );
    box-shadow: 0 7px 18px rgba(42,111,255,.28);
}


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

.co-mentor-title {
    max-width: 720px;
    margin: 22px 0 18px;
    color: #101e49;
    font-size: clamp( 46px, 5vw, 72px );
    line-height: .98;
    font-weight: 950;
    letter-spacing: -3.5px;
    text-shadow: 0 10px 30px rgba(24,58,120,.08);
}


    .co-mentor-title span {
        display: block;
        background: linear-gradient( 90deg, #075fd9 0%, #167eff 48%, #7548ee 100% );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        filter: drop-shadow( 0 8px 20px rgba(62,100,255,.14) );
    }


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

.co-mentor-description {
    max-width: 620px;
    margin: 0 0 28px;
    color: #5a6d98;
    font-size: 16px;
    line-height: 1.75;
}


/* =========================================================
   INFO CARD
========================================================= */

.co-mentor-info-card {
    position: relative;
    max-width: 690px;
    padding: 25px 27px 20px;
    border: 1px solid rgba(65,120,220,.13);
    border-radius: 25px;
    background: linear-gradient( 135deg, rgba(255,255,255,.92), rgba(246,250,255,.72) );
    box-shadow: 0 25px 60px rgba(44,86,160,.10), inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(18px);
    transform-style: preserve-3d;
    transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease;
}


/* =========================================================
   INFO MAIN
========================================================= */

.mentor-info-main {
    position: relative;
    transform: translateZ(25px);
}


.mentor-script {
    display: block;
    margin-bottom: -8px;
    color: #227eff;
    font-family: "Brush Script MT", "Segoe Script", cursive;
    font-size: 35px;
    line-height: 1;
}


.mentor-info-main h3 {
    margin: 0 0 10px;
    color: #101f4d;
    font-size: clamp( 30px, 3vw, 43px );
    line-height: 1;
    font-weight: 950;
    letter-spacing: -1.5px;
}


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

.mentor-role {
    display: inline-flex;
    padding: 10px 19px;
    border-radius: 50px;
    color: #fff;
    background: linear-gradient( 100deg, #1781ff, #4974ff );
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 10px 25px rgba(38,117,255,.25);
}


/* =========================================================
   PASSION
========================================================= */

.mentor-passion {
    position: absolute;
    top: 23px;
    right: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    border: 1px solid rgba(255,186,62,.16);
    border-radius: 15px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 12px 25px rgba(82,99,140,.08);
    transform: translateZ(35px);
}


.mentor-passion-icon {
    width: 37px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #f3a719;
    background: linear-gradient( 145deg, #fff4cc, #fff );
    box-shadow: 0 7px 18px rgba(240,172,38,.16);
}


.mentor-passion strong,
.mentor-passion span {
    display: block;
}


.mentor-passion strong {
    color: #17254d;
    font-size: 12px;
}


.mentor-passion span {
    margin-top: 2px;
    color: #68789d;
    font-size: 10px;
}


/* =========================================================
   EXPERTISE
========================================================= */

.mentor-expertise {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(44,79,141,.09);
}


.mentor-expertise-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 14px;
    border-right: 1px solid rgba(40,76,135,.09);
}


    .mentor-expertise-item:first-child {
        padding-left: 0;
    }


    .mentor-expertise-item:last-child {
        border-right: 0;
    }


    .mentor-expertise-item > span {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        color: #257cff;
        background: linear-gradient( 145deg, #eef5ff, #fff );
        font-size: 17px;
        box-shadow: 0 8px 18px rgba(55,113,220,.10);
    }


    .mentor-expertise-item strong,
    .mentor-expertise-item small {
        display: block;
    }


    .mentor-expertise-item strong {
        color: #1b2b55;
        font-size: 11px;
    }


    .mentor-expertise-item small {
        margin-top: 2px;
        color: #6b7b9e;
        font-size: 10px;
    }


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

.co-mentor-actions {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-top: 25px;
}


.co-mentor-btn {
    position: relative;
    height: 55px;
    padding: 0 10px 0 25px;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    border-radius: 50px;
    color: #fff;
    background: linear-gradient( 100deg, #176fff, #6251f5 );
    text-decoration: none;
    font-size: 14px;
    font-weight: 850;
    box-shadow: 0 16px 35px rgba(43,100,246,.27);
    transition: transform .35s ease, box-shadow .35s ease;
}


    .co-mentor-btn::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient( 110deg, transparent, rgba(255,255,255,.28), transparent );
        transform: translateX(-110%);
        transition: transform .7s ease;
    }


    .co-mentor-btn:hover::before {
        transform: translateX(110%);
    }


    .co-mentor-btn:hover {
        color: #fff;
        transform: translateY(-5px);
        box-shadow: 0 22px 45px rgba(43,100,246,.36);
    }


    .co-mentor-btn i {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: #176fff;
        background: #fff;
        transition: transform .35s ease;
    }


    .co-mentor-btn:hover i {
        transform: translateX(4px) rotate(-5deg);
    }


/* =========================================================
   SIGNATURE
========================================================= */

.mentor-signature {
    color: #263866;
    font-family: "Brush Script MT", "Segoe Script", cursive;
    font-size: 29px;
    transform: rotate(-3deg);
}


    .mentor-signature i {
        display: block;
        width: 130px;
        height: 2px;
        margin-left: 8px;
        background: linear-gradient( 90deg, #1e6eff, transparent );
    }


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

.co-mentor-visual {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1800px;
}


/* =========================================================
   3D SCENE
========================================================= */

.mentor-3d-scene {
    position: relative;
    width: 600px;
    height: 600px;
    transform-style: preserve-3d;
    transition: transform .18s ease-out;
}


/* =========================================================
   IMAGE GLOW
========================================================= */

.mentor-image-glow {
    position: absolute;
    width: 430px;
    height: 430px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) translateZ(-50px);
    border-radius: 50%;
    background: radial-gradient( circle, rgba(66,157,255,.42), rgba(127,75,255,.14) 48%, transparent 72% );
    filter: blur(12px);
    animation: mentorMainGlow 4s ease-in-out infinite;
}


@keyframes mentorMainGlow {

    0%, 100% {
        transform: translate(-50%,-50%) translateZ(-50px) scale(1);
    }

    50% {
        transform: translate(-50%,-50%) translateZ(-50px) scale(1.08);
    }
}


/* =========================================================
   DEPTH RINGS
========================================================= */

.mentor-depth-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform-style: preserve-3d;
    pointer-events: none;
}


.ring-1 {
    width: 510px;
    height: 510px;
    transform: translate(-50%,-50%) translateZ(-30px) rotateX(62deg);
    border: 2px solid rgba(53,137,255,.30);
    box-shadow: 0 0 30px rgba(52,133,255,.14);
    animation: mentorRingOne 8s linear infinite;
}


.ring-2 {
    width: 440px;
    height: 440px;
    transform: translate(-50%,-50%) translateZ(15px) rotateX(68deg) rotateZ(20deg);
    border: 2px solid rgba(121,80,255,.26);
    animation: mentorRingTwo 10s linear infinite reverse;
}


.ring-3 {
    width: 350px;
    height: 350px;
    transform: translate(-50%,-50%) translateZ(30px) rotateX(72deg);
    border: 1px dashed rgba(29,141,255,.28);
    animation: mentorRingThree 7s linear infinite;
}


@keyframes mentorRingOne {

    from {
        transform: translate(-50%,-50%) translateZ(-30px) rotateX(62deg) rotateZ(0deg);
    }

    to {
        transform: translate(-50%,-50%) translateZ(-30px) rotateX(62deg) rotateZ(360deg);
    }
}


@keyframes mentorRingTwo {

    from {
        transform: translate(-50%,-50%) translateZ(15px) rotateX(68deg) rotateZ(20deg);
    }

    to {
        transform: translate(-50%,-50%) translateZ(15px) rotateX(68deg) rotateZ(-340deg);
    }
}


@keyframes mentorRingThree {

    from {
        transform: translate(-50%,-50%) translateZ(30px) rotateX(72deg) rotateZ(0deg);
    }

    to {
        transform: translate(-50%,-50%) translateZ(30px) rotateX(72deg) rotateZ(360deg);
    }
}


/* =========================================================
   IMAGE FRAME
========================================================= */

.mentor-image-frame {
    position: absolute;
    left: 50%;
    top: 53%;
    width: 425px;
    height: 500px;
    transform: translate(-50%,-50%) translateZ(55px);
    transform-style: preserve-3d;
    border-radius: 210px 210px 75px 75px;
    padding: 8px;
    background: linear-gradient( 145deg, rgba(255,255,255,.95), rgba(110,168,255,.8), rgba(118,74,240,.7) );
    box-shadow: 0 35px 80px rgba(48,86,170,.22), 0 0 50px rgba(50,130,255,.18);
}


/* =========================================================
   IMAGE INNER
========================================================= */

.mentor-image-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 202px 202px 67px 67px;
    background: linear-gradient( 145deg, #e8f4ff, #dfe9ff );
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
}


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

.mentor-image {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 115%;
    height: 115%;
    max-width: none;
    object-fit: contain;
    object-position: center bottom;
    transform: translateX(-50%) translateZ(25px);
    filter: drop-shadow( 0 18px 25px rgba(19,43,88,.15) );
    transition: transform .6s cubic-bezier(.2,.8,.2,1);
}


.mentor-image-frame:hover
.mentor-image {
    transform: translateX(-50%) translateZ(35px) scale(1.025);
}


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

.mentor-float-card {
    position: absolute;
    z-index: 20;
    display: flex;
    align-items: center;
    border: 1px solid rgba(255,255,255,.75);
    background: linear-gradient( 145deg, rgba(255,255,255,.91), rgba(242,247,255,.77) );
    backdrop-filter: blur(15px);
    box-shadow: 0 20px 40px rgba(47,81,146,.14), inset 0 1px 0 rgba(255,255,255,.95);
    transform-style: preserve-3d;
}


/* CODE */

.mentor-code-card {
    width: 85px;
    height: 75px;
    top: 30px;
    left: 50px;
    justify-content: center;
    gap: 7px;
    border-radius: 19px;
    color: #fff;
    background: linear-gradient( 145deg, #459cff, #5d5af2 );
    box-shadow: 0 20px 35px rgba(65,112,255,.25);
    transform: translateZ(110px) rotate(-8deg);
    animation: mentorFloatCode 4s ease-in-out infinite;
}


    .mentor-code-card i {
        font-size: 21px;
    }


    .mentor-code-card span {
        font-size: 12px;
        font-weight: 900;
    }


@keyframes mentorFloatCode {

    0%, 100% {
        transform: translateZ(110px) translateY(0) rotate(-8deg);
    }

    50% {
        transform: translateZ(135px) translateY(-13px) rotate(-3deg);
    }
}


/* LEARN CARD */

.mentor-learn-card {
    left: 0;
    top: 230px;
    min-width: 150px;
    gap: 11px;
    padding: 13px 17px;
    border-radius: 17px;
    transform: translateZ(125px) rotate(-4deg);
    animation: mentorFloatLearn 4.5s ease-in-out infinite;
}


.mentor-float-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient( 145deg, #4a90ff, #7852f4 );
    box-shadow: 0 8px 18px rgba(69,107,239,.22);
}


.mentor-learn-card strong,
.mentor-learn-card span {
    display: block;
}


.mentor-learn-card strong {
    color: #152753;
    font-size: 12px;
}


.mentor-learn-card span {
    color: #63769d;
    font-size: 10px;
    line-height: 1.3;
}


@keyframes mentorFloatLearn {

    0%, 100% {
        transform: translateZ(125px) translateY(0) rotate(-4deg);
    }

    50% {
        transform: translateZ(145px) translateY(-12px) rotate(1deg);
    }
}


/* SKILL CARD */

.mentor-skill-card {
    right: -5px;
    top: 250px;
    min-width: 165px;
    gap: 11px;
    padding: 13px 16px;
    border-radius: 17px;
    transform: translateZ(115px) rotate(4deg);
    animation: mentorFloatSkill 4s ease-in-out infinite;
}


.mentor-skill-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #f09c1f;
    background: linear-gradient( 145deg, #fff1ca, #fff );
    box-shadow: 0 8px 20px rgba(240,170,42,.15);
}


.mentor-skill-card strong,
.mentor-skill-card span {
    display: block;
}


.mentor-skill-card strong {
    color: #172651;
    font-size: 12px;
}


.mentor-skill-card span {
    margin-top: 3px;
    color: #66789e;
    font-size: 10px;
}


@keyframes mentorFloatSkill {

    0%, 100% {
        transform: translateZ(115px) translateY(0) rotate(4deg);
    }

    50% {
        transform: translateZ(140px) translateY(-11px) rotate(-1deg);
    }
}


/* =========================================================
   BULB
========================================================= */

.mentor-bulb {
    position: absolute;
    z-index: 25;
    right: 25px;
    top: 65px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    color: #f4ae22;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(255,190,70,.25);
    box-shadow: 0 15px 30px rgba(239,177,42,.14), 0 0 35px rgba(255,201,72,.16);
    font-size: 25px;
    transform: translateZ(120px) rotate(8deg);
    animation: mentorBulb 3.5s ease-in-out infinite;
}


@keyframes mentorBulb {

    0%, 100% {
        transform: translateZ(120px) translateY(0) rotate(8deg);
    }

    50% {
        transform: translateZ(145px) translateY(-12px) rotate(-5deg);
    }
}


/* =========================================================
   BOOKS
========================================================= */

.mentor-books {
    position: absolute;
    z-index: 30;
    right: -10px;
    bottom: 40px;
    width: 190px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transform: translateZ(105px) rotate(1deg);
}


    .mentor-books div {
        height: 42px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 14px;
        border-radius: 9px 14px 14px 5px;
        color: #fff;
        font-size: 10px;
        font-weight: 800;
        box-shadow: 0 9px 15px rgba(31,52,99,.18);
        transform: perspective(500px) rotateX(-3deg);
        transition: transform .3s ease;
    }


        .mentor-books div:nth-child(1) {
            background: linear-gradient( 90deg, #2185ff, #2f73e8 );
        }


        .mentor-books div:nth-child(2) {
            background: linear-gradient( 90deg, #754af0, #9b48db );
        }


        .mentor-books div:nth-child(3) {
            background: linear-gradient( 90deg, #ee654b, #ff9140 );
        }


        .mentor-books div:hover {
            transform: perspective(500px) rotateX(-3deg) translateX(-8px);
        }


    .mentor-books i {
        width: 17px;
        text-align: center;
    }


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

.mentor-orbit {
    position: absolute;
    left: 50%;
    top: 52%;
    width: 570px;
    height: 185px;
    border: 2px solid rgba(48,143,255,.35);
    border-radius: 50%;
    transform: translate(-50%,-50%) translateZ(70px) rotateX(67deg) rotateZ(-10deg);
    box-shadow: 0 0 25px rgba(48,139,255,.15);
    pointer-events: none;
}


    .mentor-orbit span {
        position: absolute;
        width: 13px;
        height: 13px;
        left: 12%;
        top: 18%;
        border-radius: 50%;
        background: #35c8ff;
        box-shadow: 0 0 18px #35c8ff;
    }


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

.co-mentor-stats {
    position: relative;
    z-index: 20;
    width: min( 1250px, calc(100% - 70px) );
    margin: 30px auto 0;
    padding: 20px 25px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border: 1px solid rgba(67,117,209,.13);
    border-radius: 27px;
    background: rgba(255,255,255,.76);
    backdrop-filter: blur(18px);
    box-shadow: 0 25px 60px rgba(44,82,151,.10), inset 0 1px 0 rgba(255,255,255,.95);
    opacity: 0;
    transform: translateY(35px);
    transition: opacity .9s ease .25s, transform .9s cubic-bezier(.2,.8,.2,1);
}


.co-mentor-section.is-visible
.co-mentor-stats {
    opacity: 1;
    transform: translateY(0);
}


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

.mentor-stat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 62px;
    border-right: 1px solid rgba(51,91,157,.10);
}


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


.mentor-stat-icon {
    width: 47px;
    height: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    color: #287cff;
    background: linear-gradient( 145deg, #e8f2ff, #fff );
    box-shadow: 0 9px 20px rgba(48,111,221,.10);
    font-size: 20px;
}


    .mentor-stat-icon.purple {
        color: #7951ef;
        background: linear-gradient( 145deg, #f0eaff, #fff );
    }


    .mentor-stat-icon.violet {
        color: #8751e8;
        background: linear-gradient( 145deg, #f0eaff, #fff );
    }


    .mentor-stat-icon.red {
        color: #ef596b;
        background: linear-gradient( 145deg, #fff0f2, #fff );
    }


.mentor-stat strong,
.mentor-stat span {
    display: block;
}


.mentor-stat strong {
    color: #1458c9;
    font-size: 22px;
    font-weight: 950;
    line-height: 1.1;
}


.mentor-stat span {
    margin-top: 4px;
    color: #63749a;
    font-size: 10px;
    font-weight: 600;
}


/* =========================================================
   DESKTOP HOVER 3D
========================================================= */

@media (min-width: 901px) {

    .co-mentor-info-card:hover {
        box-shadow: 0 35px 75px rgba(44,86,160,.16), inset 0 1px 0 rgba(255,255,255,1);
    }
}


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

@media (max-width: 1100px) {

    .co-mentor-section {
        padding-top: 70px;
    }


    .co-mentor-container {
        width: calc(100% - 45px);
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }


    .co-mentor-title {
        font-size: clamp( 40px, 5vw, 57px );
    }


    .co-mentor-description {
        font-size: 14px;
    }


    .co-mentor-info-card {
        padding: 22px;
    }


    .mentor-passion {
        position: relative;
        top: auto;
        right: auto;
        margin-top: 18px;
        width: fit-content;
    }


    .mentor-expertise {
        grid-template-columns: repeat(2,1fr);
        gap: 15px;
    }


    .mentor-expertise-item {
        border-right: 0;
        padding: 0;
    }


    .mentor-3d-scene {
        transform: scale(.82);
    }


    .co-mentor-stats {
        width: calc(100% - 45px);
    }
}


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

@media (max-width: 760px) {

    .co-mentor-section {
        min-height: auto;
        padding: 65px 0 35px;
    }


    .co-mentor-container {
        width: calc(100% - 28px);
        display: flex;
        flex-direction: column;
        gap: 15px;
    }


    .co-mentor-content {
        width: 100%;
        text-align: center;
    }


    .co-mentor-label {
        font-size: 9px;
    }


    .co-mentor-title {
        margin-top: 18px;
        font-size: clamp( 34px, 10vw, 48px );
        letter-spacing: -2px;
    }


    .co-mentor-description {
        max-width: 520px;
        margin: 0 auto 25px;
        font-size: 13px;
        line-height: 1.65;
    }


    .co-mentor-info-card {
        width: 100%;
        max-width: none;
        text-align: left;
        border-radius: 22px;
    }


    .mentor-info-main h3 {
        font-size: 31px;
    }


    .mentor-passion {
        margin-top: 15px;
    }


    .mentor-expertise {
        grid-template-columns: repeat(2,1fr);
        gap: 18px 10px;
    }


    .mentor-expertise-item {
        gap: 7px;
    }


    .co-mentor-actions {
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
        margin-top: 22px;
    }


    .co-mentor-visual {
        width: 100%;
        min-height: 480px;
        margin-top: 5px;
        overflow: visible;
    }


    .mentor-3d-scene {
        width: 500px;
        height: 500px;
        transform: scale(.72);
    }


    .co-mentor-stats {
        width: calc(100% - 28px);
        margin-top: 20px;
        padding: 15px;
        grid-template-columns: repeat(2,1fr);
        gap: 0;
    }


    .mentor-stat {
        padding: 15px 8px;
        justify-content: flex-start;
        border-right: 0;
        border-bottom: 1px solid rgba(51,91,157,.09);
    }


        .mentor-stat:nth-child(odd) {
            border-right: 1px solid rgba(51,91,157,.09);
        }


        .mentor-stat:nth-child(3),
        .mentor-stat:nth-child(4) {
            border-bottom: 0;
        }


    .mentor-stat-icon {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        font-size: 17px;
    }


    .mentor-stat strong {
        font-size: 17px;
    }


    .mentor-stat span {
        font-size: 8px;
    }


    .mentor-books {
        right: -5px;
        bottom: 30px;
        width: 155px;
    }


        .mentor-books div {
            height: 34px;
            font-size: 8px;
        }


    .mentor-skill-card {
        right: -5px;
        transform: translateZ(90px) scale(.85);
    }


    .mentor-learn-card {
        left: -5px;
        transform: translateZ(90px) scale(.85);
    }
}


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

@media (max-width: 480px) {

    .co-mentor-section {
        padding: 55px 0 30px;
    }


    .co-mentor-title {
        font-size: 34px;
    }


    .co-mentor-description {
        font-size: 12px;
    }


    .co-mentor-info-card {
        padding: 20px 17px;
    }


    .mentor-info-main h3 {
        font-size: 27px;
    }


    .mentor-script {
        font-size: 29px;
    }


    .mentor-role {
        padding: 8px 14px;
        font-size: 11px;
    }


    .mentor-expertise-item > span {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        font-size: 14px;
    }


    .mentor-expertise-item strong {
        font-size: 9px;
    }


    .mentor-expertise-item small {
        font-size: 8px;
    }


    .co-mentor-btn {
        width: 100%;
        justify-content: space-between;
        padding-left: 20px;
    }


    .mentor-signature {
        font-size: 25px;
    }


    .co-mentor-visual {
        min-height: 395px;
    }


    .mentor-3d-scene {
        width: 440px;
        height: 440px;
        transform: scale(.58);
    }


    .mentor-code-card {
        left: 35px;
    }


    .mentor-learn-card {
        left: 0;
        top: 220px;
    }


    .mentor-skill-card {
        right: -15px;
        top: 235px;
    }


    .mentor-bulb {
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 20px;
    }


    .mentor-books {
        right: -18px;
        bottom: 15px;
        width: 145px;
    }


        .mentor-books div {
            height: 31px;
            padding: 0 10px;
            font-size: 7px;
        }


    .mentor-stat {
        gap: 8px;
    }


    .mentor-stat-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        border-radius: 11px;
        font-size: 14px;
    }


    .mentor-stat strong {
        font-size: 14px;
    }


    .mentor-stat span {
        font-size: 7px;
    }
}


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

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

    .co-mentor-section *,
    .co-mentor-section *::before,
    .co-mentor-section *::after {
        animation: none !important;
        transition: none !important;
    }
}







/* =========================================================
   CLASSES OF IT
   10 — STUDENT LEARNING EXPERIENCE

   DARK 3D EDUCATION EXPERIENCE
========================================================= */

.co-experience-section {
    --exp-blue: #3185ff;
    --exp-purple: #8755ff;
    --exp-cyan: #20d8dc;
    --exp-pink: #d94cff;
    --exp-orange: #ff9d42;
    position: relative;
    width: 100%;
    min-height: 850px;
    padding: 90px 0 70px;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    background: radial-gradient( circle at 50% 42%, rgba(51, 86, 255, .12), transparent 32% ), radial-gradient( circle at 10% 50%, rgba(25, 116, 255, .13), transparent 30% ), radial-gradient( circle at 90% 45%, rgba(142, 57, 255, .13), transparent 30% ), linear-gradient( 135deg, #020713 0%, #04122b 40%, #050b20 68%, #100728 100% );
}


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

.co-exp-bg {
    position: absolute;
    inset: 0;
    z-index: -5;
    overflow: hidden;
    pointer-events: none;
}


/* =========================================================
   STARS
========================================================= */

.co-exp-stars {
    position: absolute;
    inset: 0;
    opacity: .55;
    background-image: radial-gradient( circle, rgba(255,255,255,.75) 1px, transparent 1.5px );
    background-size: 85px 85px;
    animation: expStars 28s linear infinite;
}


@keyframes expStars {

    from {
        background-position: 0 0;
    }

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


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

.co-exp-grid {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -25%;
    height: 65%;
    opacity: .18;
    background-image: linear-gradient( rgba(75,130,255,.28) 1px, transparent 1px ), linear-gradient( 90deg, rgba(75,130,255,.28) 1px, transparent 1px );
    background-size: 55px 55px;
    transform: perspective(650px) rotateX(62deg) scale(1.4);
    transform-origin: center bottom;
    mask-image: linear-gradient( to top, black, transparent 85% );
}


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

.co-exp-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}


.exp-glow-1 {
    width: 430px;
    height: 430px;
    left: -170px;
    top: 230px;
    background: rgba(30,105,255,.22);
    animation: expGlowLeft 9s ease-in-out infinite;
}


.exp-glow-2 {
    width: 450px;
    height: 450px;
    right: -180px;
    top: 150px;
    background: rgba(126,55,255,.22);
    animation: expGlowRight 11s ease-in-out infinite;
}


.exp-glow-3 {
    width: 600px;
    height: 250px;
    left: 50%;
    bottom: -150px;
    transform: translateX(-50%);
    background: rgba(0,210,255,.15);
    animation: expGlowBottom 7s ease-in-out infinite;
}


@keyframes expGlowLeft {

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

    50% {
        transform: translate3d(80px,-40px,0) scale(1.15);
    }
}


@keyframes expGlowRight {

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

    50% {
        transform: translate3d(-80px,40px,0) scale(1.12);
    }
}


@keyframes expGlowBottom {

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

    50% {
        opacity: .85;
        transform: translateX(-50%) translateY(-35px) scale(1.1);
    }
}


/* =========================================================
   PARTICLES
========================================================= */

.co-exp-particle {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #66b8ff;
    box-shadow: 0 0 14px rgba(66,158,255,.9);
    animation: expParticle 5s ease-in-out infinite;
}


.ep-1 {
    left: 7%;
    top: 24%;
}

.ep-2 {
    left: 16%;
    top: 67%;
    animation-delay: -.8s;
}

.ep-3 {
    left: 29%;
    top: 12%;
    animation-delay: -1.4s;
}

.ep-4 {
    left: 44%;
    top: 70%;
    animation-delay: -2s;
}

.ep-5 {
    left: 58%;
    top: 14%;
    animation-delay: -.5s;
}

.ep-6 {
    left: 72%;
    top: 72%;
    animation-delay: -1.7s;
}

.ep-7 {
    left: 85%;
    top: 23%;
    animation-delay: -2.3s;
}

.ep-8 {
    left: 94%;
    top: 58%;
    animation-delay: -3s;
}


@keyframes expParticle {

    0%, 100% {
        opacity: .2;
        transform: translateY(0) scale(.6);
    }

    50% {
        opacity: 1;
        transform: translateY(-24px) scale(1.5);
    }
}


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

.co-exp-wrapper {
    position: relative;
    z-index: 10;
    width: min( 1550px, calc(100% - 60px) );
    margin: 0 auto;
}


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

.co-exp-heading {
    position: relative;
    z-index: 30;
    width: min(850px, 100%);
    margin: 0 auto 48px;
    text-align: center;
}


.co-exp-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border: 1px solid rgba(88,140,255,.45);
    border-radius: 50px;
    background: linear-gradient( 135deg, rgba(32,91,190,.18), rgba(126,65,255,.16) );
    color: #79c8ff;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 1.7px;
    box-shadow: 0 0 28px rgba(49,111,255,.12), inset 0 1px 0 rgba(255,255,255,.1);
    backdrop-filter: blur(15px);
}


.co-exp-label-icon {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient( 135deg, #287fff, #8050ff );
    color: #fff;
    box-shadow: 0 0 18px rgba(76,112,255,.65);
}


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

.co-exp-heading h2 {
    margin: 20px 0 14px;
    font-size: clamp( 44px, 5.2vw, 72px );
    line-height: .98;
    letter-spacing: -3px;
    font-weight: 950;
    color: #fff;
    text-shadow: 0 12px 40px rgba(0,0,0,.5);
}


    .co-exp-heading h2 span {
        display: block;
        background: linear-gradient( 90deg, #22baff, #477dff 42%, #bd53ef 100% );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        filter: drop-shadow( 0 0 22px rgba(72,117,255,.25) );
    }


.co-exp-heading p {
    width: min(720px, 100%);
    margin: 0 auto;
    color: rgba(210,221,246,.68);
    font-size: 14px;
    line-height: 1.75;
}


/* =========================================================
   FLOATING OBJECTS
========================================================= */

.co-exp-floating {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 20px;
    background: linear-gradient( 145deg, rgba(40,66,125,.75), rgba(18,27,61,.82) );
    backdrop-filter: blur(14px);
    box-shadow: 0 20px 40px rgba(0,0,0,.4);
    pointer-events: none;
}


.floating-cap {
    width: 95px;
    height: 95px;
    left: 8%;
    top: 70px;
    color: #448cff;
    font-size: 45px;
    transform: rotate(-13deg) translateZ(50px);
    box-shadow: 0 0 35px rgba(43,104,255,.4);
    animation: floatingCap 5s ease-in-out infinite;
}


.floating-bulb {
    width: 70px;
    height: 70px;
    right: 9%;
    top: 85px;
    color: #ffd45a;
    font-size: 31px;
    border-radius: 50%;
    box-shadow: 0 0 35px rgba(255,196,62,.35);
    animation: floatingBulb 4.5s ease-in-out infinite;
}


.floating-code {
    width: 70px;
    height: 70px;
    right: 12%;
    top: 245px;
    color: #6ceaff;
    font-size: 28px;
    transform: rotate(7deg);
    box-shadow: 0 0 35px rgba(31,208,255,.3);
    animation: floatingCode 5.5s ease-in-out infinite;
}


@keyframes floatingCap {

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

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


@keyframes floatingBulb {

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

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


@keyframes floatingCode {

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

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


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

.co-exp-orbit {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 420px;
    width: 950px;
    height: 290px;
    border: 1px solid rgba(75,111,255,.22);
    border-radius: 50%;
    transform: translateX(-50%) rotateX(62deg);
    pointer-events: none;
}


.orbit-one {
    box-shadow: 0 0 25px rgba(58,110,255,.18);
    animation: orbitRotate 12s linear infinite;
}


.orbit-two {
    width: 720px;
    height: 210px;
    border-color: rgba(168,67,255,.16);
    animation: orbitRotateReverse 15s linear infinite;
}


@keyframes orbitRotate {

    from {
        transform: translateX(-50%) rotateX(62deg) rotateZ(0deg);
    }

    to {
        transform: translateX(-50%) rotateX(62deg) rotateZ(360deg);
    }
}


@keyframes orbitRotateReverse {

    from {
        transform: translateX(-50%) rotateX(62deg) rotateZ(360deg);
    }

    to {
        transform: translateX(-50%) rotateX(62deg) rotateZ(0deg);
    }
}


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

.co-exp-slider-area {
    position: relative;
    z-index: 20;
    width: 100%;
}


/* =========================================================
   CAROUSEL
========================================================= */

.co-exp-carousel {
    position: relative;
    width: 100%;
    height: 390px;
    overflow: hidden;
    perspective: 1800px;
}


.co-exp-track {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}


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

.co-exp-card {
    position: absolute;
    top: 32px;
    left: 50%;
    width: 205px;
    height: 325px;
    padding: 28px 22px 22px;
    border: 1px solid rgba(116,144,255,.35);
    border-radius: 22px;
    background: linear-gradient( 145deg, rgba(25,48,94,.78), rgba(7,17,42,.94) );
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 65px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.09), 0 0 30px rgba(71,87,255,.08);
    transform: translateX(-50%) translateZ(-300px) scale(.78) rotateY(0deg);
    opacity: .38;
    transition: transform .75s cubic-bezier(.2,.8,.2,1), opacity .6s ease, filter .6s ease, box-shadow .6s ease, border-color .6s ease;
    transform-style: preserve-3d;
    overflow: hidden;
}


    /* =========================================================
   CARD LIGHT
========================================================= */

    .co-exp-card::before {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        top: -100px;
        right: -70px;
        border-radius: 50%;
        background: #536fff;
        filter: blur(65px);
        opacity: .13;
        pointer-events: none;
    }


    /* =========================================================
   CARD SHINE
========================================================= */

    .co-exp-card::after {
        content: "";
        position: absolute;
        top: -120%;
        left: -120%;
        width: 70%;
        height: 350%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.12), transparent );
        transform: rotate(25deg);
        transition: left 1s ease;
        pointer-events: none;
    }


    .co-exp-card:hover::after {
        left: 160%;
    }


    /* =========================================================
   ACTIVE CARD
========================================================= */

    .co-exp-card.is-active {
        width: 305px;
        height: 370px;
        top: 8px;
        padding: 32px 28px 25px;
        opacity: 1;
        z-index: 20;
        background: linear-gradient( 145deg, rgba(25,59,122,.9), rgba(8,20,52,.98) );
        border-color: rgba(102,144,255,.95);
        box-shadow: 0 40px 90px rgba(0,0,0,.65), 0 0 35px rgba(45,100,255,.55), 0 0 90px rgba(102,66,255,.25), inset 0 1px 0 rgba(255,255,255,.15);
        filter: brightness(1.08);
    }


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

.co-exp-card-number {
    position: absolute;
    top: 18px;
    left: 22px;
    color: rgba(107,136,224,.45);
    font-size: 24px;
    line-height: 1;
    font-weight: 900;
    transition: color .5s ease;
}


.co-exp-card.is-active
.co-exp-card-number {
    color: rgba(102,153,255,.8);
}


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

.co-exp-card-icon {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 30px auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 28px;
    color: #aebcff;
    font-size: 47px;
    background: radial-gradient( circle at 35% 25%, rgba(255,255,255,.22), rgba(48,72,159,.5) 45%, rgba(14,28,67,.8) );
    border: 1px solid rgba(116,148,255,.4);
    box-shadow: 0 18px 35px rgba(0,0,0,.35), 0 0 35px rgba(80,105,255,.25);
    transform: translateZ(55px);
    transition: transform .6s ease, box-shadow .6s ease;
}


.co-exp-card.is-active
.co-exp-card-icon {
    width: 120px;
    height: 120px;
    font-size: 56px;
    color: #d9e0ff;
    background: radial-gradient( circle at 35% 25%, rgba(255,255,255,.35), rgba(47,76,202,.75) 45%, rgba(10,24,60,.9) );
    box-shadow: 0 20px 45px rgba(0,0,0,.45), 0 0 35px rgba(75,125,255,.65), 0 0 70px rgba(104,61,255,.3);
    transform: translateZ(80px) translateY(-5px) rotate(-3deg);
    animation: iconFloat 3.5s ease-in-out infinite;
}


@keyframes iconFloat {

    0%, 100% {
        transform: translateZ(80px) translateY(0) rotate(-3deg);
    }

    50% {
        transform: translateZ(100px) translateY(-9px) rotate(3deg);
    }
}


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

.co-exp-card-content {
    position: relative;
    z-index: 2;
    text-align: center;
}


.co-exp-card h3 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 900;
}


.co-exp-card p {
    margin: 0 auto;
    max-width: 230px;
    color: rgba(202,214,243,.68);
    font-size: 12px;
    line-height: 1.6;
}


.co-exp-card.is-active h3 {
    font-size: 28px;
}


.co-exp-card.is-active p {
    font-size: 13px;
    color: rgba(220,228,249,.78);
}


/* =========================================================
   PROGRESS
========================================================= */

.co-exp-progress {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 23px;
    height: 6px;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(0,0,0,.35);
}


    .co-exp-progress span {
        display: block;
        width: 42%;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient( 90deg, #24a9ff, #7a50ff );
        box-shadow: 0 0 14px rgba(68,118,255,.7);
    }


.co-exp-card.is-active
.co-exp-progress span {
    width: 68%;
    background: linear-gradient( 90deg, #19b9ff, #7854ff, #df50df );
    animation: progressGlow 2s ease-in-out infinite;
}


@keyframes progressGlow {

    0%, 100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.7);
    }
}


/* =========================================================
   CARD POSITIONS
========================================================= */

/* Center */

.co-exp-card.position-center {
    transform: translateX(-50%) translateZ(100px) scale(1);
    opacity: 1;
    z-index: 20;
}


/* Left 1 */

.co-exp-card.position-left-1 {
    transform: translateX(calc(-50% - 340px)) translateZ(-40px) scale(.91) rotateY(9deg);
    opacity: .82;
    z-index: 10;
}


/* Left 2 */

.co-exp-card.position-left-2 {
    transform: translateX(calc(-50% - 590px)) translateZ(-250px) scale(.78) rotateY(14deg);
    opacity: .48;
    z-index: 5;
}


/* Right 1 */

.co-exp-card.position-right-1 {
    transform: translateX(calc(-50% + 340px)) translateZ(-40px) scale(.91) rotateY(-9deg);
    opacity: .82;
    z-index: 10;
}


/* Right 2 */

.co-exp-card.position-right-2 {
    transform: translateX(calc(-50% + 590px)) translateZ(-250px) scale(.78) rotateY(-14deg);
    opacity: .48;
    z-index: 5;
}


/* Far */

.co-exp-card.position-hidden {
    transform: translateX(-50%) translateZ(-500px) scale(.55);
    opacity: 0;
    pointer-events: none;
}


/* =========================================================
   ACTIVE CARD GLOW BORDER
========================================================= */

.co-exp-card.is-active .co-exp-card-icon::before {
    content: "";
    position: absolute;
    inset: -7px;
    border: 1px solid rgba(93,150,255,.55);
    border-radius: 33px;
    animation: iconRing 2.2s ease-in-out infinite;
}


@keyframes iconRing {

    0%, 100% {
        transform: scale(.96);
        opacity: .35;
    }

    50% {
        transform: scale(1.08);
        opacity: .9;
    }
}


/* =========================================================
   ARROWS
========================================================= */

.co-exp-arrow {
    position: absolute;
    z-index: 50;
    top: 50%;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(77,139,255,.75);
    border-radius: 50%;
    color: #fff;
    background: rgba(5,18,48,.72);
    backdrop-filter: blur(12px);
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 0 25px rgba(49,116,255,.28);
    transform: translateY(-50%);
    transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}


.co-exp-prev {
    left: 0;
}


.co-exp-next {
    right: 0;
}


.co-exp-arrow:hover {
    background: linear-gradient( 135deg, #207eff, #7650ff );
    box-shadow: 0 0 35px rgba(67,113,255,.65);
}


.co-exp-prev:hover {
    transform: translateY(-50%) translateX(-4px);
}


.co-exp-next:hover {
    transform: translateY(-50%) translateX(4px);
}


/* =========================================================
   PLATFORM
========================================================= */

.co-exp-platform {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 70px;
    width: 470px;
    height: 100px;
    transform: translateX(-50%) perspective(700px) rotateX(65deg);
    pointer-events: none;
}


.co-platform-glow {
    position: absolute;
    inset: 15px;
    border-radius: 50%;
    background: linear-gradient( 90deg, #285eff, #9d49ff, #2bd9dc );
    filter: blur(28px);
    opacity: .45;
}


.co-platform-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(76,131,255,.65);
}


.ring-a {
    animation: platformPulse 3s ease-in-out infinite;
}


.ring-b {
    inset: 12px;
    border-color: rgba(190,78,255,.45);
    animation: platformPulse 3s ease-in-out infinite .5s;
}


@keyframes platformPulse {

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

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


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

.co-exp-dots {
    position: relative;
    z-index: 40;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
}


    .co-exp-dots button {
        width: 28px;
        height: 6px;
        padding: 0;
        border: 0;
        border-radius: 20px;
        background: rgba(102,119,194,.35);
        cursor: pointer;
        transition: width .4s ease, background .4s ease, box-shadow .4s ease;
    }


        .co-exp-dots button.active {
            width: 42px;
            background: linear-gradient( 90deg, #218fff, #8750ff );
            box-shadow: 0 0 15px rgba(73,115,255,.8);
        }


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

@media (max-width: 1200px) {

    .co-exp-wrapper {
        width: calc(100% - 40px);
    }


    .co-exp-card.position-left-1 {
        transform: translateX(calc(-50% - 275px)) translateZ(-30px) scale(.85) rotateY(8deg);
    }


    .co-exp-card.position-right-1 {
        transform: translateX(calc(-50% + 275px)) translateZ(-30px) scale(.85) rotateY(-8deg);
    }


    .co-exp-card.position-left-2,
    .co-exp-card.position-right-2 {
        opacity: .18;
    }


    .floating-cap {
        left: 3%;
    }


    .floating-bulb {
        right: 3%;
    }
}


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

@media (max-width: 900px) {

    .co-experience-section {
        min-height: 780px;
        padding: 75px 0 55px;
    }


    .co-exp-heading {
        margin-bottom: 30px;
    }


    .co-exp-carousel {
        height: 390px;
    }


    .co-exp-card {
        width: 210px;
    }


        .co-exp-card.is-active {
            width: 285px;
        }


        .co-exp-card.position-left-1 {
            transform: translateX(calc(-50% - 230px)) translateZ(-50px) scale(.78);
            opacity: .55;
        }


        .co-exp-card.position-right-1 {
            transform: translateX(calc(-50% + 230px)) translateZ(-50px) scale(.78);
            opacity: .55;
        }


        .co-exp-card.position-left-2,
        .co-exp-card.position-right-2 {
            opacity: 0;
        }


    .co-exp-arrow {
        width: 50px;
        height: 50px;
    }


    .floating-cap,
    .floating-bulb,
    .floating-code {
        opacity: .45;
        transform: scale(.7);
    }
}


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

@media (max-width: 700px) {

    .co-experience-section {
        min-height: 760px;
        padding: 65px 0 45px;
    }


    .co-exp-wrapper {
        width: calc(100% - 28px);
    }


    .co-exp-heading {
        margin-bottom: 22px;
    }


    .co-exp-label {
        font-size: 9px;
        padding: 7px 12px;
    }


    .co-exp-label-icon {
        width: 22px;
        height: 22px;
    }


    .co-exp-heading h2 {
        margin-top: 16px;
        font-size: 39px;
        letter-spacing: -1.8px;
    }


    .co-exp-heading p {
        font-size: 12px;
        line-height: 1.65;
    }


    .co-exp-carousel {
        height: 395px;
        overflow: hidden;
    }


    .co-exp-card {
        width: 245px;
        height: 340px;
        top: 27px;
        padding: 25px 20px;
    }


        .co-exp-card.is-active {
            width: 280px;
            height: 365px;
            top: 10px;
        }


        .co-exp-card.position-left-1 {
            transform: translateX(calc(-50% - 185px)) translateZ(-100px) scale(.72) rotateY(8deg);
            opacity: .18;
        }


        .co-exp-card.position-right-1 {
            transform: translateX(calc(-50% + 185px)) translateZ(-100px) scale(.72) rotateY(-8deg);
            opacity: .18;
        }


        .co-exp-card.position-left-2,
        .co-exp-card.position-right-2,
        .co-exp-card.position-hidden {
            opacity: 0;
        }


    .co-exp-card-icon {
        width: 85px;
        height: 85px;
        font-size: 38px;
        margin-top: 32px;
    }


    .co-exp-card.is-active
    .co-exp-card-icon {
        width: 105px;
        height: 105px;
        font-size: 48px;
    }


    .co-exp-card h3 {
        font-size: 22px;
    }


    .co-exp-card.is-active h3 {
        font-size: 26px;
    }


    .co-exp-card p {
        font-size: 11px;
    }


    .co-exp-card.is-active p {
        font-size: 12px;
    }


    .co-exp-arrow {
        width: 44px;
        height: 44px;
        font-size: 14px;
    }


    .co-exp-prev {
        left: -5px;
    }


    .co-exp-next {
        right: -5px;
    }


    .co-exp-platform {
        width: 300px;
        height: 70px;
        bottom: 65px;
    }


    .floating-cap,
    .floating-bulb,
    .floating-code,
    .co-exp-orbit {
        display: none;
    }


    .co-exp-grid {
        opacity: .10;
    }
}


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

@media (max-width: 430px) {

    .co-experience-section {
        padding-top: 55px;
    }


    .co-exp-heading h2 {
        font-size: 34px;
    }


    .co-exp-heading p {
        font-size: 11px;
    }


    .co-exp-carousel {
        height: 380px;
    }


    .co-exp-card.is-active {
        width: 265px;
        height: 350px;
    }


    .co-exp-card.position-left-1 {
        transform: translateX(calc(-50% - 160px)) translateZ(-100px) scale(.65);
    }


    .co-exp-card.position-right-1 {
        transform: translateX(calc(-50% + 160px)) translateZ(-100px) scale(.65);
    }


    .co-exp-card-icon {
        margin-top: 28px;
    }


    .co-exp-dots {
        gap: 7px;
    }


        .co-exp-dots button {
            width: 18px;
        }


            .co-exp-dots button.active {
                width: 30px;
            }
}


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

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

    .co-experience-section *,
    .co-experience-section *::before,
    .co-experience-section *::after {
        animation: none !important;
        transition: none !important;
    }
}








/* ============================================================
   CLASSES OF IT
   UNIQUE 3D CONTACT SECTION
   PREFIX: c3d-
============================================================ */

.c3d-contact-section {
    position: relative;
    width: 100%;
    min-height: 720px;
    padding: 70px 4% 35px;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient( circle at 72% 42%, rgba(50, 118, 255, .13), transparent 30% ), radial-gradient( circle at 22% 32%, rgba(108, 67, 235, .08), transparent 28% ), linear-gradient( 135deg, #ffffff 0%, #f3f7ff 50%, #fcf9ff 100% );
}


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

.c3d-contact-background {
    position: absolute;
    inset: 0;
    z-index: -5;
    overflow: hidden;
    pointer-events: none;
}


.c3d-bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(75px);
    animation: c3dBgFloat 9s ease-in-out infinite alternate;
}


.c3d-bg-glow-1 {
    width: 360px;
    height: 360px;
    left: -100px;
    top: 100px;
    background: rgba(47, 127, 255, .12);
}


.c3d-bg-glow-2 {
    width: 380px;
    height: 380px;
    right: -100px;
    top: 60px;
    background: rgba(115, 61, 235, .12);
    animation-delay: -3s;
}


.c3d-bg-glow-3 {
    width: 260px;
    height: 260px;
    left: 47%;
    bottom: -160px;
    background: rgba(231, 25, 55, .06);
    animation-delay: -5s;
}


@keyframes c3dBgFloat {

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

    100% {
        transform: translate3d(25px, -20px, 0) scale(1.12);
    }
}


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

.c3d-bg-orb {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(65, 108, 220, .15);
    background: rgba(255,255,255,.5);
    box-shadow: 0 10px 25px rgba(50,80,160,.07);
    animation: c3dOrbFloat 6s ease-in-out infinite;
}


.c3d-bg-orb-1 {
    width: 48px;
    height: 48px;
    left: 2%;
    top: 46%;
}


.c3d-bg-orb-2 {
    width: 18px;
    height: 18px;
    left: 46%;
    top: 8%;
    animation-delay: -2s;
}


.c3d-bg-orb-3 {
    width: 30px;
    height: 30px;
    right: 4%;
    bottom: 18%;
    animation-delay: -4s;
}


@keyframes c3dOrbFloat {

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

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


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

.c3d-dots {
    position: absolute;
    width: 100px;
    height: 75px;
    opacity: .42;
    background-image: radial-gradient( #6697ff 1.5px, transparent 1.5px );
    background-size: 14px 14px;
}


.c3d-dots-left {
    left: 3%;
    top: 7%;
}


.c3d-dots-right {
    right: 8%;
    top: 4%;
}


/* ============================================================
   ABSTRACT LINES
============================================================ */

.c3d-bg-line {
    position: absolute;
    width: 500px;
    height: 200px;
    border: 1px solid rgba(70,110,230,.08);
    border-radius: 50%;
    transform: rotate(-12deg);
}


.c3d-bg-line-1 {
    left: -180px;
    top: 50%;
}


.c3d-bg-line-2 {
    right: -180px;
    bottom: 8%;
    transform: rotate(18deg);
}


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

.c3d-contact-container {
    position: relative;
    max-width: 1500px;
    min-height: 550px;
    margin: auto;
    display: grid;
    grid-template-columns: 45% 55%;
    align-items: center;
}


/* ============================================================
   LEFT COPY
============================================================ */

.c3d-contact-copy {
    position: relative;
    z-index: 20;
    padding-left: 20px;
    opacity: 0;
    transform: translateX(-55px);
    transition: opacity 1s ease, transform 1s cubic-bezier(.16,1,.3,1);
}


.c3d-contact-section.c3d-active
.c3d-contact-copy {
    opacity: 1;
    transform: translateX(0);
}


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

.c3d-contact-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 17px;
    border-radius: 30px;
    color: #1764e9;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .5px;
    background: linear-gradient( 135deg, rgba(255,255,255,.95), rgba(235,243,255,.82) );
    border: 1px solid rgba(55,108,230,.16);
    box-shadow: 0 9px 25px rgba(40,80,170,.08);
}


.c3d-label-icon {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: white;
    background: linear-gradient( 135deg, #126cff, #6236dd );
    box-shadow: 0 5px 14px rgba(40,90,220,.25);
}


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

.c3d-contact-title {
    margin: 20px 0 4px;
    color: #111d4d;
    font-size: clamp(50px, 5vw, 76px);
    line-height: .95;
    letter-spacing: -3.5px;
    font-weight: 900;
}


    .c3d-contact-title span {
        display: inline-block;
        background: linear-gradient( 90deg, #126cff, #5535ed, #e71955 );
        background-size: 200% auto;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: c3dGradient 5s ease infinite;
    }


@keyframes c3dGradient {

    0% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }

    100% {
        background-position: 0% center;
    }
}


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

.c3d-contact-subtitle {
    margin: 9px 0 17px;
    color: #17245a;
    font-size: clamp(27px, 2.7vw, 41px);
    line-height: 1.03;
    letter-spacing: -1.5px;
    font-weight: 850;
}


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

.c3d-contact-description {
    max-width: 600px;
    margin: 0 0 28px;
    color: #687392;
    font-size: 14px;
    line-height: 1.7;
}


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

.c3d-contact-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
    max-width: 720px;
}


.c3d-contact-card {
    position: relative;
    min-height: 188px;
    padding: 17px 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none;
    overflow: hidden;
    border-radius: 21px;
    background: linear-gradient( 145deg, rgba(255,255,255,.91), rgba(239,246,255,.67) );
    border: 1px solid rgba(255,255,255,.95);
    box-shadow: 0 20px 42px rgba(40,70,135,.12), inset 0 1px 0 white;
    backdrop-filter: blur(18px);
    transform-style: preserve-3d;
    transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
}


    .c3d-contact-card::before {
        content: "";
        position: absolute;
        width: 120px;
        height: 120px;
        right: -55px;
        top: -50px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(65,130,255,.14), transparent 70% );
    }


    .c3d-contact-card::after {
        content: "";
        position: absolute;
        left: -120%;
        top: 0;
        width: 65%;
        height: 100%;
        transform: skewX(-20deg);
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.65), transparent );
        transition: left .7s ease;
    }


    .c3d-contact-card:hover::after {
        left: 150%;
    }


    .c3d-contact-card:hover {
        transform: translateY(-10px) rotateX(4deg) rotateY(-4deg);
        box-shadow: 0 30px 55px rgba(40,70,135,.2);
    }


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

.c3d-card-icon {
    position: relative;
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    margin-bottom: 15px;
    border-radius: 20px;
    color: white;
    font-size: 28px;
    transform: translateZ(35px);
    box-shadow: 0 15px 28px rgba(35,80,180,.22);
}


.c3d-call-card
.c3d-card-icon {
    background: linear-gradient( 145deg, #1479ff, #275bdc );
}


.c3d-email-card
.c3d-card-icon {
    background: linear-gradient( 145deg, #7338eb, #9139da );
}


.c3d-visit-card
.c3d-card-icon {
    background: linear-gradient( 145deg, #ff4662, #df1838 );
}


.c3d-card-mini-icon {
    position: absolute;
    right: -12px;
    top: -9px;
    width: 28px;
    height: 21px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: white;
    background: #2670ef;
    font-size: 8px;
    box-shadow: 0 6px 13px rgba(40,90,210,.25);
}


.c3d-email-card
.c3d-card-mini-icon {
    background: #7138e9;
}


.c3d-visit-card
.c3d-card-mini-icon {
    background: #1d67dc;
}


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

.c3d-card-text {
    position: relative;
    z-index: 2;
}


    .c3d-card-text h4 {
        margin: 0 0 6px;
        color: #17245a;
        font-size: 15px;
        font-weight: 850;
    }


    .c3d-card-text p {
        margin: 0;
        color: #687391;
        font-size: 9.5px;
        line-height: 1.55;
    }


/* ============================================================
   CARD ARROW
============================================================ */

.c3d-card-arrow {
    position: absolute;
    right: 13px;
    bottom: 13px;
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: white;
    font-size: 11px;
    box-shadow: 0 8px 18px rgba(40,90,180,.25);
    transition: transform .35s ease;
}


.c3d-call-card
.c3d-card-arrow {
    background: #176eff;
}


.c3d-email-card
.c3d-card-arrow {
    background: #7038e8;
}


.c3d-visit-card
.c3d-card-arrow {
    background: #ed2948;
}


.c3d-contact-card:hover
.c3d-card-arrow {
    transform: translateX(5px);
}


/* ============================================================
   3D SCENE WRAPPER
============================================================ */

.c3d-contact-scene-wrapper {
    position: relative;
    width: 100%;
    height: 570px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1600px;
    opacity: 0;
    transform: translateX(50px) scale(.95);
    transition: opacity 1.1s ease .15s, transform 1.2s cubic-bezier(.16,1,.3,1) .15s;
}


.c3d-contact-section.c3d-active
.c3d-contact-scene-wrapper {
    opacity: 1;
    transform: translateX(0) scale(1);
}


/* ============================================================
   3D WORLD
============================================================ */

.c3d-contact-scene {
    position: relative;
    width: 760px;
    height: 560px;
    transform-style: preserve-3d;
    will-change: transform;
}


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

.c3d-connection-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: visible;
    pointer-events: none;
}


.c3d-connection-path {
    stroke-width: 2;
    stroke-dasharray: 7 10;
    filter: drop-shadow( 0 0 6px rgba(48,100,255,.45) );
    animation: c3dLineAnimation 5s linear infinite;
}


.c3d-path-delay-1 {
    animation-delay: -1.7s;
}


.c3d-path-delay-2 {
    animation-delay: -3.2s;
}


@keyframes c3dLineAnimation {

    to {
        stroke-dashoffset: -120;
    }
}


/* ============================================================
   FLOATING OBJECT
============================================================ */

.c3d-floating-object {
    position: absolute;
    z-index: 20;
    transform-style: preserve-3d;
    animation: c3dObjectFloat 4s ease-in-out infinite;
}


.c3d-phone-object {
    left: 65px;
    top: 90px;
}


.c3d-email-object {
    left: 315px;
    top: 20px;
    animation-delay: -1.3s;
}


.c3d-location-object {
    right: 70px;
    top: 85px;
    animation-delay: -2.5s;
}


@keyframes c3dObjectFloat {

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

    50% {
        transform: translateY(-14px) rotateZ(2deg);
    }
}


/* ============================================================
   GLASS ICONS
============================================================ */

.c3d-glass-icon {
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    color: white;
    font-size: 30px;
    border: 2px solid rgba(255,255,255,.75);
    box-shadow: 0 22px 38px rgba(30,70,150,.18), inset 0 2px 5px rgba(255,255,255,.45);
    backdrop-filter: blur(15px);
    transform: translateZ(55px) rotateY(-8deg);
}


.c3d-phone-icon {
    background: linear-gradient( 145deg, #1684ff, #465ce5 );
}


.c3d-email-icon {
    background: linear-gradient( 145deg, #7439ee, #a03dde );
}


.c3d-location-icon {
    background: linear-gradient( 145deg, #ff4c66, #df1939 );
}


.c3d-phone-signal {
    position: absolute;
    right: -19px;
    top: 0;
    color: #347bff;
    font-size: 12px;
    animation: c3dSignalPulse 2s infinite;
}


@keyframes c3dSignalPulse {

    0%, 100% {
        opacity: .3;
        transform: scale(.8);
    }

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


/* ============================================================
   CHAT BUBBLES
============================================================ */

.c3d-chat-bubble {
    position: absolute;
    z-index: 22;
    width: 45px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: white;
    background: linear-gradient( 135deg, #4770ff, #7439e3 );
    box-shadow: 0 13px 25px rgba(40,80,180,.2);
    animation: c3dChatFloat 3.5s ease-in-out infinite;
}


.c3d-chat-one {
    left: 240px;
    top: 180px;
}


.c3d-chat-two {
    right: 145px;
    top: 255px;
    animation-delay: -1.1s;
}


.c3d-chat-three {
    left: 360px;
    bottom: 65px;
    animation-delay: -2.2s;
}


@keyframes c3dChatFloat {

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

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


/* ============================================================
   PAPER PLANE
============================================================ */

.c3d-paper-plane {
    position: absolute;
    left: 240px;
    top: 37px;
    z-index: 30;
    color: #126cff;
    font-size: 39px;
    filter: drop-shadow( 0 10px 12px rgba(30,90,210,.2) );
    animation: c3dPlaneFly 5s ease-in-out infinite;
}


@keyframes c3dPlaneFly {

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

    50% {
        transform: translate(18px,-12px) rotate(-8deg);
    }
}


/* ============================================================
   LAPTOP
============================================================ */

.c3d-laptop {
    position: absolute;
    left: 87px;
    top: 180px;
    width: 440px;
    height: 280px;
    z-index: 10;
    transform-style: preserve-3d;
    transform: perspective(900px) rotateX(4deg) rotateY(-5deg) translateZ(40px);
    animation: c3dLaptopFloat 5s ease-in-out infinite;
}


@keyframes c3dLaptopFloat {

    0%, 100% {
        transform: perspective(900px) rotateX(4deg) rotateY(-5deg) translateY(0) translateZ(40px);
    }

    50% {
        transform: perspective(900px) rotateX(4deg) rotateY(-5deg) translateY(-8px) translateZ(50px);
    }
}


/* ============================================================
   LAPTOP SCREEN
============================================================ */

.c3d-laptop-screen {
    position: absolute;
    left: 45px;
    top: 0;
    width: 350px;
    height: 220px;
    padding: 9px;
    border-radius: 15px 15px 5px 5px;
    background: linear-gradient( 145deg, #152e60, #061a3c );
    border: 3px solid #173e82;
    box-shadow: 0 25px 40px rgba(20,50,105,.25), inset 0 1px 3px rgba(255,255,255,.35);
    transform: translateZ(35px);
}


    .c3d-laptop-screen::before {
        content: "";
        position: absolute;
        inset: 9px;
        border-radius: 8px;
        background: linear-gradient( 135deg, #eff9ff, #d8eaff );
        box-shadow: inset 0 0 20px rgba(60,130,255,.18);
    }


.c3d-screen-reflection {
    position: absolute;
    inset: 9px;
    z-index: 3;
    border-radius: 8px;
    background: linear-gradient( 125deg, rgba(255,255,255,.45), transparent 30%, transparent 70%, rgba(255,255,255,.15) );
    pointer-events: none;
}


.c3d-screen-content {
    position: absolute;
    inset: 9px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}


.c3d-screen-cap {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #e71937;
    font-size: 23px;
    margin-bottom: 3px;
}


.c3d-screen-brand {
    color: #1459c9;
    font-size: 31px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -1.5px;
}


    .c3d-screen-brand span {
        color: #e71937;
    }


.c3d-screen-line {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    color: #162d63;
    font-size: 12px;
    font-weight: 700;
}


    .c3d-screen-line b {
        color: #e71937;
        padding: 0 4px;
    }


/* ============================================================
   LAPTOP BASE
============================================================ */

.c3d-laptop-hinge {
    position: absolute;
    left: 190px;
    top: 207px;
    width: 65px;
    height: 7px;
    border-radius: 5px;
    background: #58749e;
    z-index: 4;
}


.c3d-laptop-base {
    position: absolute;
    left: 5px;
    top: 210px;
    width: 430px;
    height: 43px;
    border-radius: 5px 5px 25px 25px;
    background: linear-gradient( 180deg, #dce8fa, #809bc5 );
    transform: perspective(500px) rotateX(58deg);
    box-shadow: 0 20px 30px rgba(40,70,130,.22);
}


.c3d-keyboard {
    position: absolute;
    width: 285px;
    height: 25px;
    left: 72px;
    top: 3px;
    border-radius: 5px;
    background: repeating-linear-gradient( 90deg, rgba(31,65,120,.5) 0 8px, transparent 8px 12px );
    opacity: .5;
}


.c3d-trackpad {
    position: absolute;
    width: 70px;
    height: 19px;
    left: 180px;
    bottom: 2px;
    border-radius: 4px;
    background: rgba(255,255,255,.45);
    border: 1px solid rgba(40,80,140,.2);
}


.c3d-laptop-shadow {
    position: absolute;
    width: 470px;
    height: 75px;
    left: -15px;
    bottom: -35px;
    border-radius: 50%;
    background: rgba(50,80,155,.13);
    filter: blur(17px);
    transform: rotateX(60deg);
    z-index: -2;
}


/* ============================================================
   INFO PANEL
============================================================ */

.c3d-info-panel {
    position: absolute;
    left: 75px;
    bottom: 70px;
    z-index: 35;
    min-width: 190px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 11px;
    border-radius: 17px;
    background: rgba(255,255,255,.8);
    border: 1px solid rgba(255,255,255,.95);
    box-shadow: 0 18px 35px rgba(40,70,130,.15);
    backdrop-filter: blur(15px);
    transform: translateZ(110px);
    animation: c3dInfoFloat 4s ease-in-out infinite;
}


@keyframes c3dInfoFloat {

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

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


.c3d-info-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: white;
    background: linear-gradient( 135deg, #126cff, #6236dd );
    box-shadow: 0 8px 18px rgba(38,85,205,.22);
}


.c3d-info-text strong {
    display: block;
    color: #15265b;
    font-size: 12px;
    font-weight: 850;
}


.c3d-info-text span {
    display: block;
    margin-top: 3px;
    color: #687493;
    font-size: 8px;
}


/* ============================================================
   BOOK STACK
============================================================ */
.c3d-books {
    position: absolute;
    right: -97px;
    bottom: 90px;
    width: 150px;
    height: 145px;
    z-index: 27;
    transform: perspective(600px) rotateY(-29deg) translateZ(90px);
}


.c3d-book {
    position: absolute;
    right: 0;
    width: 145px;
    height: 29px;
    display: flex;
    align-items: center;
    padding-left: 14px;
    border-radius: 5px;
    color: white;
    font-size: 9px;
    font-weight: 800;
    box-shadow: 0 6px 10px rgba(30,50,100,.2);
    border: 1px solid rgba(255,255,255,.3);
    transform: skewY(-3deg);
}


.c3d-book-1 {
    bottom: 0;
    background: linear-gradient( 90deg, #0759c9, #3186ff );
}


.c3d-book-2 {
    bottom: 28px;
    right: 7px;
    background: linear-gradient( 90deg, #6731c9, #8e4df1 );
}


.c3d-book-3 {
    bottom: 56px;
    right: 13px;
    background: linear-gradient( 90deg, #c8173b, #f04461 );
}


.c3d-book-4 {
    bottom: 84px;
    right: 20px;
    background: linear-gradient( 90deg, #164bba, #6379ef );
}


/* ============================================================
   GRADUATION CAP
============================================================ */

.c3d-graduation-cap {
    position: absolute;
    left: 445px;
    bottom: 68px;
    width: 105px;
    height: 85px;
    z-index: 38;
    transform: translateZ(130px) rotate(-3deg);
    animation: c3dCapFloat 4s ease-in-out infinite;
}


@keyframes c3dCapFloat {

    0%, 100% {
        transform: translateZ(130px) translateY(0) rotate(-3deg);
    }

    50% {
        transform: translateZ(130px) translateY(-10px) rotate(2deg);
    }
}


.c3d-cap-top {
    position: absolute;
    width: 100px;
    height: 45px;
    left: 0;
    top: 5px;
    background: linear-gradient( 145deg, #071b45, #153c81 );
    clip-path: polygon( 50% 0, 100% 38%, 50% 75%, 0 38% );
    box-shadow: 0 10px 15px rgba(20,40,100,.3);
}


.c3d-cap-body {
    position: absolute;
    width: 55px;
    height: 40px;
    left: 23px;
    top: 32px;
    background: linear-gradient( 145deg, #0c285a, #173c7d );
    clip-path: polygon( 8% 0, 92% 0, 82% 72%, 50% 100%, 18% 72% );
}


.c3d-cap-tassel {
    position: absolute;
    width: 3px;
    height: 47px;
    right: 8px;
    top: 30px;
    background: #e71937;
    transform: rotate(-12deg);
    transform-origin: top;
}


    .c3d-cap-tassel::after {
        content: "";
        position: absolute;
        width: 12px;
        height: 17px;
        right: -5px;
        bottom: -8px;
        background: #e71937;
        border-radius: 2px 2px 5px 5px;
    }


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

.c3d-training-center {
    position: absolute;
    right: -5px;
    top: 145px;
    width: 230px;
    height: 210px;
    z-index: 12;
    transform: translateZ(80px);
}


.c3d-building-glow {
    position: absolute;
    width: 230px;
    height: 150px;
    left: 0;
    top: 20px;
    background: radial-gradient( ellipse, rgba(61,130,255,.2), transparent 70% );
    filter: blur(15px);
}


.c3d-building {
    position: absolute;
    left: 25px;
    top: 35px;
    width: 190px;
    height: 130px;
    border-radius: 7px 7px 3px 3px;
    background: linear-gradient( 145deg, #eaf4ff, #b9d0f3 );
    border: 2px solid rgba(255,255,255,.8);
    box-shadow: 0 25px 35px rgba(40,70,130,.2);
    overflow: hidden;
}


.c3d-building-header {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #173e8e;
    background: linear-gradient( 90deg, #d9eaff, #ffffff );
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .6px;
}


.c3d-building-row {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 5px;
    padding: 7px 9px;
}


    .c3d-building-row span {
        height: 28px;
        border-radius: 3px;
        background: linear-gradient( 135deg, #75b6ff, #d9f1ff );
        border: 1px solid rgba(70,130,210,.2);
        box-shadow: inset 0 0 7px rgba(255,255,255,.6);
    }


.c3d-building-row-2 {
    padding-top: 2px;
}


.c3d-building-door {
    position: absolute;
    width: 25px;
    height: 37px;
    left: 83px;
    bottom: 0;
    border-radius: 4px 4px 0 0;
    background: linear-gradient( 135deg, #17366e, #2d6cc9 );
}


.c3d-building-sign {
    position: absolute;
    right: 9px;
    bottom: 5px;
    color: #e71937;
    font-size: 6px;
    font-weight: 900;
}


/* ============================================================
   TREES
============================================================ */

.c3d-tree {
    position: absolute;
    bottom: 30px;
    width: 35px;
    height: 70px;
}


.c3d-tree-left {
    left: 2px;
}


.c3d-tree-right {
    right: 3px;
}


.c3d-tree::before,
.c3d-tree::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: linear-gradient( 145deg, #3d9d66, #166c47 );
    box-shadow: 0 5px 12px rgba(30,100,70,.15);
}


.c3d-tree::before {
    width: 40px;
    height: 40px;
    left: -3px;
    top: 0;
}


.c3d-tree::after {
    width: 28px;
    height: 32px;
    left: 9px;
    top: 20px;
}


.c3d-tree i {
    position: absolute;
    width: 7px;
    height: 40px;
    left: 14px;
    bottom: 0;
    background: #8c6342;
    border-radius: 4px;
}


/* ============================================================
   MAIN LOCATION PIN
============================================================ */

.c3d-main-location-pin {
    position: absolute;
    right: 75px;
    top: 73px;
    width: 65px;
    height: 80px;
    z-index: 40;
    animation: c3dLocationFloat 3s ease-in-out infinite;
}


@keyframes c3dLocationFloat {

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

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


.c3d-pin-light {
    position: absolute;
    width: 95px;
    height: 95px;
    left: -15px;
    top: -10px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(231,25,55,.18), transparent 70% );
    filter: blur(6px);
}


.c3d-pin-shape {
    position: absolute;
    width: 58px;
    height: 68px;
    display: grid;
    place-items: center;
    color: white;
    font-size: 27px;
    background: linear-gradient( 145deg, #ff3c58, #d70d32 );
    clip-path: path( "M29 0 C12 0 0 13 0 29 C0 48 29 68 29 68 C29 68 58 48 58 29 C58 13 46 0 29 0 Z" );
    filter: drop-shadow( 0 14px 10px rgba(205,25,55,.28) );
}


.c3d-pin-wave {
    position: absolute;
    width: 95px;
    height: 35px;
    left: -18px;
    top: 62px;
    border: 2px solid rgba(231,25,55,.25);
    border-radius: 50%;
    animation: c3dPinWave 2s ease-out infinite;
}


@keyframes c3dPinWave {

    0% {
        transform: scale(.5);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}


/* ============================================================
   PLATFORM
============================================================ */

.c3d-platform {
    position: absolute;
    left: 80px;
    bottom: 10px;
    width: 650px;
    height: 130px;
    z-index: 3;
    transform: perspective(500px) rotateX(62deg) translateZ(10px);
    transform-style: preserve-3d;
}


.c3d-platform-layer {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
}


.c3d-platform-back {
    width: 650px;
    height: 130px;
    background: linear-gradient( 135deg, #ffffff, #d9e8ff );
    border: 3px solid rgba(255,255,255,.95);
    box-shadow: 0 20px 40px rgba(44,76,145,.18);
}


.c3d-platform-middle {
    width: 570px;
    height: 100px;
    top: 15px;
    background: linear-gradient( 135deg, #edf5ff, #b6d0ff );
    border: 2px solid rgba(97,142,225,.35);
}


.c3d-platform-front {
    width: 480px;
    height: 72px;
    top: 29px;
    background: radial-gradient( ellipse, rgba(61,124,255,.35), rgba(126,88,237,.18) );
    border: 2px solid rgba(69,125,255,.4);
}


.c3d-platform-light {
    position: absolute;
    width: 420px;
    height: 3px;
    left: 50%;
    top: 62px;
    transform: translateX(-50%);
    background: linear-gradient( 90deg, transparent, #4388ff, #7e43e8, transparent );
    box-shadow: 0 0 15px #4388ff;
}


/* ============================================================
   PARTICLES
============================================================ */

.c3d-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient( circle, white, #4785ff );
    box-shadow: 0 0 14px rgba(45,105,255,.7);
    z-index: 45;
    animation: c3dParticleFloat 4s ease-in-out infinite;
}


.c3d-particle-1 {
    left: 50px;
    top: 250px;
}


.c3d-particle-2 {
    left: 290px;
    top: 135px;
    animation-delay: -1s;
}


.c3d-particle-3 {
    right: 250px;
    top: 185px;
    animation-delay: -2s;
}


.c3d-particle-4 {
    right: 20px;
    top: 360px;
    animation-delay: -3s;
}


.c3d-particle-5 {
    left: 340px;
    bottom: 125px;
    animation-delay: -1.5s;
}


.c3d-particle-6 {
    left: 520px;
    top: 55px;
    animation-delay: -2.5s;
}


@keyframes c3dParticleFloat {

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

    50% {
        transform: translateY(-20px) scale(1.35);
    }
}


/* ============================================================
   ADDRESS
============================================================ */

.c3d-address {
    position: relative;
    max-width: 1100px;
    min-height: 72px;
    margin: 15px auto 0;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-radius: 18px;
    background: linear-gradient( 135deg, rgba(255,255,255,.92), rgba(238,245,255,.8) );
    border: 1px solid rgba(255,255,255,.95);
    box-shadow: 0 18px 35px rgba(44,73,140,.1), inset 0 1px 0 white;
    backdrop-filter: blur(15px);
    opacity: 0;
    transform: translateY(25px);
    transition: opacity .8s ease .45s, transform .8s ease .45s;
}


.c3d-contact-section.c3d-active
.c3d-address {
    opacity: 1;
    transform: translateY(0);
}


.c3d-address-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: white;
    background: linear-gradient( 135deg, #176eff, #6434df );
    box-shadow: 0 9px 20px rgba(42,83,200,.22);
}


.c3d-address-content {
    min-width: 0;
    flex: 1;
}


    .c3d-address-content span {
        display: block;
        margin-bottom: 4px;
        color: #5c72a2;
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 1px;
    }


    .c3d-address-content strong {
        display: block;
        color: #1a2a5b;
        font-size: 12px;
        line-height: 1.5;
        font-weight: 700;
    }


.c3d-address-link {
    width: 39px;
    height: 39px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #1765e9;
    background: #edf4ff;
    text-decoration: none;
    transition: transform .3s ease, background .3s ease;
}


    .c3d-address-link:hover {
        transform: translateY(-3px) rotate(8deg);
        background: #dceaff;
    }


/* ============================================================
   1250
============================================================ */

@media (max-width: 1250px) {

    .c3d-contact-container {
        grid-template-columns: 44% 56%;
    }


    .c3d-contact-copy {
        padding-left: 5px;
    }


    .c3d-contact-title {
        font-size: 57px;
    }


    .c3d-contact-subtitle {
        font-size: 30px;
    }


    .c3d-contact-card {
        min-height: 175px;
    }


    .c3d-contact-scene {
        transform: scale(.88);
    }
}


/* ============================================================
   1050
============================================================ */

@media (max-width: 1050px) {

    .c3d-contact-container {
        grid-template-columns: 1fr;
    }


    .c3d-contact-copy {
        max-width: 850px;
        margin: auto;
        text-align: center;
        padding: 0;
    }


    .c3d-contact-description {
        margin-left: auto;
        margin-right: auto;
    }


    .c3d-contact-cards {
        max-width: 780px;
        margin: auto;
    }


    .c3d-contact-scene-wrapper {
        height: 560px;
        margin-top: -15px;
    }


    .c3d-contact-scene {
        transform: scale(.82);
    }
}


/* ============================================================
   768
============================================================ */

@media (max-width: 768px) {

    .c3d-contact-section {
        padding: 55px 18px 28px;
    }


    .c3d-contact-title {
        font-size: 53px;
        letter-spacing: -2.5px;
    }


    .c3d-contact-subtitle {
        font-size: 28px;
    }


    .c3d-contact-cards {
        grid-template-columns: repeat(3,1fr);
        gap: 9px;
    }


    .c3d-contact-card {
        min-height: 165px;
        padding: 14px 11px;
    }


    .c3d-card-icon {
        width: 58px;
        height: 58px;
        font-size: 23px;
    }


    .c3d-card-text h4 {
        font-size: 13px;
    }


    .c3d-card-text p {
        font-size: 9px;
    }


    .c3d-card-arrow {
        width: 31px;
        height: 31px;
    }


    .c3d-contact-scene-wrapper {
        height: 520px;
    }


    .c3d-contact-scene {
        transform: scale(.68);
    }


    .c3d-address {
        margin-top: 0;
    }
}


/* ============================================================
   600
============================================================ */

@media (max-width: 600px) {

    .c3d-contact-section {
        padding: 50px 15px 25px;
    }


    .c3d-contact-title {
        font-size: 46px;
    }


    .c3d-contact-subtitle {
        font-size: 25px;
    }


    .c3d-contact-description {
        font-size: 13px;
    }


    .c3d-contact-cards {
        grid-template-columns: 1fr;
        max-width: 390px;
    }


    .c3d-contact-card {
        min-height: 100px;
        flex-direction: row;
        align-items: center;
        padding: 12px 15px;
    }


    .c3d-card-icon {
        flex-shrink: 0;
        margin-bottom: 0;
    }


    .c3d-card-text {
        text-align: left;
    }


    .c3d-contact-scene-wrapper {
        height: 405px;
    }


    .c3d-contact-scene {
        transform: scale(.53);
    }


    .c3d-address {
        align-items: flex-start;
    }


    .c3d-address-content strong {
        font-size: 10px;
    }
}


/* ============================================================
   480
============================================================ */

@media (max-width: 480px) {

    .c3d-contact-section {
        padding: 43px 12px 20px;
    }


    .c3d-contact-label {
        font-size: 10px;
    }


    .c3d-contact-title {
        margin-top: 16px;
        font-size: 40px;
        letter-spacing: -2px;
    }


    .c3d-contact-subtitle {
        font-size: 22px;
    }


    .c3d-contact-description {
        font-size: 12px;
        line-height: 1.6;
    }


    .c3d-contact-card {
        min-height: 90px;
    }


    .c3d-card-icon {
        width: 52px;
        height: 52px;
        border-radius: 16px;
        font-size: 21px;
    }


    .c3d-card-text h4 {
        font-size: 12px;
    }


    .c3d-card-text p {
        font-size: 8px;
    }


    .c3d-contact-scene-wrapper {
        height: 335px;
    }


    .c3d-contact-scene {
        transform: scale(.43);
    }


    .c3d-address {
        padding: 10px;
    }


    .c3d-address-icon {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }


    .c3d-address-content span {
        font-size: 7px;
    }


    .c3d-address-content strong {
        font-size: 9px;
        line-height: 1.4;
    }


    .c3d-address-link {
        width: 34px;
        height: 34px;
    }
}


/* ============================================================
   360
============================================================ */

@media (max-width: 360px) {

    .c3d-contact-title {
        font-size: 35px;
    }


    .c3d-contact-subtitle {
        font-size: 20px;
    }


    .c3d-contact-scene-wrapper {
        height: 300px;
    }


    .c3d-contact-scene {
        transform: scale(.37);
    }


    .c3d-contact-card {
        min-height: 84px;
    }
}


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

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

    .c3d-contact-section *,
    .c3d-contact-section *::before,
    .c3d-contact-section *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
/* ============================================================
   CLASSES OF IT — CONTACT SECTION RESPONSIVE FIX
   Paste this CSS at the VERY END of your stylesheet
============================================================ */


/* ============================================================
   BASE RESPONSIVE SAFETY
============================================================ */

.c3d-contact-section,
.c3d-contact-section * {
    box-sizing: border-box;
}

.c3d-contact-section {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.c3d-contact-container {
    width: min(1200px, calc(100% - 40px));
    max-width: 1200px;
    margin: 0 auto;
}

.c3d-contact-copy,
.c3d-contact-scene-wrapper {
    min-width: 0;
}


/* ============================================================
   LARGE LAPTOP
============================================================ */

@media (max-width: 1250px) {

    .c3d-contact-container {
        width: min(1120px, calc(100% - 50px));
    }

    .c3d-contact-title {
        font-size: clamp(52px, 5vw, 76px);
    }

    .c3d-contact-subtitle {
        font-size: 25px;
    }

    .c3d-contact-description {
        font-size: 15px;
        max-width: 500px;
    }

    .c3d-contact-scene-wrapper {
        min-width: 0;
    }
}


/* ============================================================
   TABLET / SMALL LAPTOP
============================================================ */

@media (max-width: 1100px) {

    .c3d-contact-container {
        width: min(1000px, calc(100% - 40px));
        grid-template-columns: minmax(330px, .9fr) minmax(480px, 1.1fr);
        gap: 20px;
    }

    .c3d-contact-title {
        font-size: 58px;
        line-height: .95;
    }

    .c3d-contact-subtitle {
        font-size: 23px;
        line-height: 1.25;
    }

    .c3d-contact-description {
        font-size: 14px;
        line-height: 1.7;
    }

    .c3d-contact-card {
        padding: 15px;
    }

    .c3d-card-text h4 {
        font-size: 15px;
    }

    .c3d-card-text p {
        font-size: 12px;
    }
}


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

@media (max-width: 900px) {

    .c3d-contact-section {
        padding-top: 90px;
        padding-bottom: 50px;
    }

    .c3d-contact-container {
        width: min(720px, calc(100% - 36px));
        display: grid;
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .c3d-contact-copy {
        width: 100%;
        max-width: 650px;
        margin: 0 auto;
        text-align: center;
    }

    .c3d-contact-label {
        justify-content: center;
    }

    .c3d-contact-description {
        margin-left: auto;
        margin-right: auto;
    }

    .c3d-contact-cards {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        text-align: left;
    }

    .c3d-contact-card {
        min-width: 0;
    }

    /* 3D scene gets its own centered area */
    .c3d-contact-scene-wrapper {
        width: 100%;
        height: 560px;
        overflow: hidden;
        position: relative;
    }

    .c3d-contact-scene {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%) scale(.82);
        transform-origin: top center;
    }

    .c3d-address {
        width: min(720px, calc(100% - 36px));
        margin-left: auto;
        margin-right: auto;
    }
}


/* ============================================================
   MOBILE — MAIN FIX
============================================================ */

@media (max-width: 768px) {

    .c3d-contact-section {
        width: 100%;
        min-height: auto;
        padding: 85px 0 35px;
        overflow: hidden;
    }

    .c3d-contact-container {
        width: calc(100% - 28px);
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }


    /* --------------------------------------------------------
       CONTACT COPY
    -------------------------------------------------------- */

    .c3d-contact-copy {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    .c3d-contact-label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
    }

    .c3d-contact-title {
        font-size: clamp(42px, 12vw, 58px);
        line-height: .95;
        margin: 0 0 14px;
    }

    .c3d-contact-subtitle {
        font-size: clamp(21px, 5.5vw, 27px);
        line-height: 1.25;
        margin-bottom: 12px;
    }

    .c3d-contact-description {
        width: 100%;
        max-width: 520px;
        margin: 0 auto 22px;
        padding: 0 5px;
        font-size: 14px;
        line-height: 1.65;
    }


    /* --------------------------------------------------------
       CONTACT CARDS
    -------------------------------------------------------- */

    .c3d-contact-cards {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 0;
        padding: 0;
    }

    .c3d-contact-card {
        width: 100%;
        min-height: 88px;
        height: auto;
        display: grid;
        grid-template-columns: 58px minmax(0, 1fr) 42px;
        align-items: center;
        gap: 12px;
        padding: 12px 13px;
        border-radius: 20px;
        overflow: hidden;
    }


        /* icon */

        .c3d-contact-card .c3d-card-icon {
            width: 58px;
            height: 58px;
            min-width: 58px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 17px;
        }

            .c3d-contact-card .c3d-card-icon > i {
                font-size: 21px;
            }


    /* text */

    .c3d-card-text {
        min-width: 0;
        overflow: hidden;
    }

        .c3d-card-text h4 {
            margin: 0 0 4px;
            font-size: 15px;
            line-height: 1.15;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .c3d-card-text p {
            margin: 0;
            font-size: 11px;
            line-height: 1.45;
            max-width: 100%;
        }


    /* arrow */

    .c3d-card-arrow {
        width: 38px;
        height: 38px;
        min-width: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

        .c3d-card-arrow i {
            font-size: 12px;
        }


    /* --------------------------------------------------------
       3D SCENE
    -------------------------------------------------------- */

    .c3d-contact-scene-wrapper {
        position: relative;
        width: 100%;
        height: 430px;
        overflow: hidden;
        margin-top: 0;
    }

    .c3d-contact-scene {
        position: absolute;
        width: 760px;
        height: 560px;
        left: 50%;
        top: 0;
        transform: translateX(-50%) scale(.66);
        transform-origin: top center;
        margin: 0;
    }


    /* --------------------------------------------------------
       SVG CONNECTIONS
    -------------------------------------------------------- */

    .c3d-connection-svg {
        width: 760px;
        height: 560px;
        pointer-events: none;
    }


    /* --------------------------------------------------------
       FLOATING OBJECTS
    -------------------------------------------------------- */

    .c3d-floating-object {
        transform-origin: center;
    }

    .c3d-glass-icon {
        transform: scale(.92);
    }

    .c3d-chat-bubble {
        transform: scale(.88);
    }

    .c3d-paper-plane {
        transform: scale(.85);
    }


    /* --------------------------------------------------------
       ADDRESS
    -------------------------------------------------------- */

    .c3d-address {
        width: calc(100% - 28px);
        max-width: 100%;
        min-height: 78px;
        margin: -5px auto 0;
        padding: 12px 13px;
        display: grid;
        grid-template-columns: 45px minmax(0, 1fr) 38px;
        align-items: center;
        gap: 10px;
        border-radius: 19px;
        position: relative;
        z-index: 10;
    }

    .c3d-address-icon {
        width: 43px;
        height: 43px;
        min-width: 43px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 13px;
    }

        .c3d-address-icon i {
            font-size: 17px;
        }

    .c3d-address-content {
        min-width: 0;
    }

        .c3d-address-content span {
            display: block;
            margin-bottom: 4px;
            font-size: 7px;
            line-height: 1.2;
            letter-spacing: 1px;
        }

        .c3d-address-content strong {
            display: block;
            font-size: 10px;
            line-height: 1.45;
            overflow-wrap: anywhere;
        }

    .c3d-address-link {
        width: 35px;
        height: 35px;
        min-width: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

        .c3d-address-link i {
            font-size: 11px;
        }
}


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

@media (max-width: 600px) {

    .c3d-contact-section {
        padding-top: 82px;
        padding-bottom: 30px;
    }

    .c3d-contact-container {
        width: calc(100% - 22px);
        gap: 25px;
    }

    .c3d-contact-title {
        font-size: 46px;
    }

    .c3d-contact-subtitle {
        font-size: 21px;
    }

    .c3d-contact-description {
        font-size: 13px;
        line-height: 1.6;
    }


    /* cards */

    .c3d-contact-card {
        min-height: 82px;
        grid-template-columns: 52px minmax(0, 1fr) 38px;
        gap: 10px;
        padding: 10px;
        border-radius: 18px;
    }

        .c3d-contact-card .c3d-card-icon {
            width: 52px;
            height: 52px;
            min-width: 52px;
            border-radius: 15px;
        }

            .c3d-contact-card .c3d-card-icon > i {
                font-size: 19px;
            }

    .c3d-card-text h4 {
        font-size: 14px;
    }

    .c3d-card-text p {
        font-size: 10px;
    }

    .c3d-card-arrow {
        width: 35px;
        height: 35px;
        min-width: 35px;
    }


    /* 3D scene */

    .c3d-contact-scene-wrapper {
        height: 385px;
    }

    .c3d-contact-scene {
        transform: translateX(-50%) scale(.59);
    }


    /* address */

    .c3d-address {
        width: calc(100% - 22px);
        grid-template-columns: 43px minmax(0, 1fr) 35px;
        gap: 8px;
        padding: 10px;
        border-radius: 17px;
    }

    .c3d-address-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .c3d-address-content span {
        font-size: 6.5px;
    }

    .c3d-address-content strong {
        font-size: 9px;
        line-height: 1.4;
    }

    .c3d-address-link {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }
}


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

@media (max-width: 480px) {

    .c3d-contact-section {
        padding-top: 78px;
    }

    .c3d-contact-container {
        width: calc(100% - 18px);
    }

    .c3d-contact-title {
        font-size: 42px;
    }

    .c3d-contact-subtitle {
        font-size: 19px;
    }

    .c3d-contact-description {
        font-size: 12px;
        padding: 0;
    }


    /* cards */

    .c3d-contact-card {
        min-height: 78px;
        grid-template-columns: 49px minmax(0, 1fr) 34px;
        gap: 9px;
        padding: 9px;
        border-radius: 17px;
    }

        .c3d-contact-card .c3d-card-icon {
            width: 49px;
            height: 49px;
            min-width: 49px;
            border-radius: 14px;
        }

            .c3d-contact-card .c3d-card-icon > i {
                font-size: 18px;
            }

    .c3d-card-text h4 {
        font-size: 13px;
    }

    .c3d-card-text p {
        font-size: 9px;
        line-height: 1.4;
    }

    .c3d-card-arrow {
        width: 33px;
        height: 33px;
        min-width: 33px;
    }

        .c3d-card-arrow i {
            font-size: 10px;
        }


    /* 3D scene — important */

    .c3d-contact-scene-wrapper {
        height: 350px;
        margin-top: 0;
    }

    .c3d-contact-scene {
        left: 50%;
        top: 0;
        transform: translateX(-50%) scale(.52);
        transform-origin: top center;
    }


    /* address */

    .c3d-address {
        width: calc(100% - 18px);
        min-height: 70px;
        grid-template-columns: 39px minmax(0, 1fr) 31px;
        gap: 7px;
        padding: 9px;
        border-radius: 16px;
    }

    .c3d-address-icon {
        width: 37px;
        height: 37px;
        min-width: 37px;
        border-radius: 11px;
    }

        .c3d-address-icon i {
            font-size: 14px;
        }

    .c3d-address-content span {
        font-size: 6px;
        letter-spacing: .8px;
    }

    .c3d-address-content strong {
        font-size: 8px;
        line-height: 1.4;
    }

    .c3d-address-link {
        width: 29px;
        height: 29px;
        min-width: 29px;
    }

        .c3d-address-link i {
            font-size: 9px;
        }
}


/* ============================================================
   EXTRA SMALL — 400px
============================================================ */

@media (max-width: 400px) {

    .c3d-contact-section {
        padding-top: 75px;
    }

    .c3d-contact-container {
        width: calc(100% - 14px);
    }

    .c3d-contact-title {
        font-size: 38px;
    }

    .c3d-contact-subtitle {
        font-size: 18px;
    }

    .c3d-contact-description {
        font-size: 11.5px;
    }


    .c3d-contact-card {
        grid-template-columns: 46px minmax(0, 1fr) 32px;
        gap: 8px;
        padding: 8px;
    }

        .c3d-contact-card .c3d-card-icon {
            width: 46px;
            height: 46px;
            min-width: 46px;
        }

    .c3d-card-text h4 {
        font-size: 12px;
    }

    .c3d-card-text p {
        font-size: 8.5px;
    }

    .c3d-card-arrow {
        width: 31px;
        height: 31px;
        min-width: 31px;
    }


    .c3d-contact-scene-wrapper {
        height: 325px;
    }

    .c3d-contact-scene {
        transform: translateX(-50%) scale(.47);
    }


    .c3d-address {
        width: calc(100% - 14px);
        grid-template-columns: 37px minmax(0, 1fr) 29px;
    }

    .c3d-address-content strong {
        font-size: 7.5px;
    }
}


/* ============================================================
   360px MOBILE
============================================================ */

@media (max-width: 360px) {

    .c3d-contact-section {
        padding-top: 72px;
    }

    .c3d-contact-title {
        font-size: 35px;
    }

    .c3d-contact-subtitle {
        font-size: 17px;
    }

    .c3d-contact-description {
        font-size: 11px;
    }

    .c3d-contact-card {
        min-height: 73px;
        grid-template-columns: 43px minmax(0, 1fr) 29px;
        gap: 7px;
    }

        .c3d-contact-card .c3d-card-icon {
            width: 43px;
            height: 43px;
            min-width: 43px;
        }

            .c3d-contact-card .c3d-card-icon > i {
                font-size: 16px;
            }

    .c3d-card-text h4 {
        font-size: 11.5px;
    }

    .c3d-card-text p {
        font-size: 8px;
    }

    .c3d-card-arrow {
        width: 29px;
        height: 29px;
        min-width: 29px;
    }


    .c3d-contact-scene-wrapper {
        height: 300px;
    }

    .c3d-contact-scene {
        transform: translateX(-50%) scale(.43);
    }


    .c3d-address {
        grid-template-columns: 35px minmax(0, 1fr) 27px;
        gap: 6px;
    }

    .c3d-address-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    .c3d-address-content span {
        font-size: 5.5px;
    }

    .c3d-address-content strong {
        font-size: 7px;
    }

    .c3d-address-link {
        width: 27px;
        height: 27px;
        min-width: 27px;
    }
}


/* ============================================================
   TOUCH DEVICES
   Prevent mobile hover movement
============================================================ */

@media (hover: none) and (pointer: coarse) {

    .c3d-contact-card:hover {
        transform: none !important;
    }

    .c3d-address-link:hover {
        transform: none !important;
    }

    .c3d-contact-card:hover .c3d-card-arrow {
        transform: none !important;
    }
}


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

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

    .c3d-contact-section *,
    .c3d-contact-section *::before,
    .c3d-contact-section *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}