/* ============================================================
   CLASSES OF IT
   CONTACT PAGE 3D BREADCRUMB
   NO IMAGE / NO VIDEO
   UNIQUE PREFIX: cit3dbr-
============================================================ */


.cit3dbr-section {
    position: relative;
    width: 100%;
    height: 310px;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient( 135deg, #ffffff 0%, #f4f9ff 45%, #fbf7ff 100% );
    perspective: 1600px;
}


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


.cit3dbr-background {
    position: absolute;
    inset: 0;
    z-index: -10;
    overflow: hidden;
}


    .cit3dbr-background::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient( circle at 50% 48%, rgba(255,255,255,.98), rgba(255,255,255,.35) 40%, transparent 70% );
    }


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


.cit3dbr-bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(55px);
    pointer-events: none;
    animation: cit3dbrGlow 8s ease-in-out infinite alternate;
}


.cit3dbr-glow-left {
    width: 360px;
    height: 180px;
    left: -120px;
    top: 40px;
    background: rgba(49,132,255,.14);
}


.cit3dbr-glow-center {
    width: 450px;
    height: 160px;
    left: 50%;
    top: 70px;
    transform: translateX(-50%);
    background: rgba(117,77,240,.08);
    animation-delay: -3s;
}


.cit3dbr-glow-right {
    width: 350px;
    height: 190px;
    right: -120px;
    top: 35px;
    background: rgba(248,65,137,.10);
    animation-delay: -5s;
}


@keyframes cit3dbrGlow {

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

    to {
        transform: translate3d(20px,-14px,0) scale(1.13);
    }
}


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


.cit3dbr-wave {
    position: absolute;
    left: -8%;
    width: 116%;
    border-radius: 50%;
    pointer-events: none;
}


.cit3dbr-wave-one {
    height: 210px;
    bottom: -150px;
    border-top: 2px solid rgba(67,143,242,.12);
    background: linear-gradient( 180deg, rgba(222,237,255,.42), rgba(255,255,255,.04) );
    transform: rotate(-3deg);
}


.cit3dbr-wave-two {
    height: 175px;
    bottom: -125px;
    border-top: 2px solid rgba(139,91,237,.10);
    transform: rotate(4deg);
}


.cit3dbr-wave-three {
    height: 130px;
    top: -85px;
    border-bottom: 1px solid rgba(74,132,230,.08);
    transform: rotate(-4deg);
}


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


.cit3dbr-dots {
    position: absolute;
    width: 78px;
    height: 62px;
    background-image: radial-gradient( #5d91e9 1.3px, transparent 1.3px );
    background-size: 11px 11px;
    opacity: .28;
    animation: cit3dbrDots 6s ease-in-out infinite;
}


.cit3dbr-dots-left {
    left: 3%;
    top: 45px;
}


.cit3dbr-dots-right {
    right: 3%;
    top: 30px;
    animation-delay: -3s;
}


@keyframes cit3dbrDots {

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

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


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


.cit3dbr-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
    opacity: .75;
}


.cit3dbr-line {
    stroke-width: 1.5;
    stroke-dasharray: 7 13;
    animation: cit3dbrLineMove 7s linear infinite;
}


.cit3dbr-line-two {
    animation-delay: -3.5s;
}


@keyframes cit3dbrLineMove {

    to {
        stroke-dashoffset: -150;
    }
}


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


.cit3dbr-center {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 100;
    transform: translate(-50%,-50%);
    animation: cit3dbrCenterIn 1.1s cubic-bezier(.16,1,.3,1) both;
}


@keyframes cit3dbrCenterIn {

    0% {
        opacity: 0;
        transform: translate(-50%,-42%) scale(.78);
    }

    70% {
        opacity: 1;
        transform: translate(-50%,-53%) scale(1.03);
    }

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


/* ============================================================
   BREADCRUMB
============================================================ */


.cit3dbr-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 354px;
    min-height: 70px;
    padding: 8px 12px;
    border-radius: 38px;
    background: linear-gradient( 135deg, rgba(255,255,255,.88), rgba(246,250,255,.72) );
    border: 1px solid rgba(255,255,255,.98);
    box-shadow: 0 28px 55px rgba(37,72,137,.13), 0 10px 25px rgba(97,67,183,.09), inset 0 2px 0 rgba(255,255,255,.98), inset 0 -2px 0 rgba(67,113,187,.06);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    transform-style: preserve-3d;
}


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


.cit3dbr-home {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 4px 10px 4px 5px;
    color: #10265c;
    text-decoration: none;
    font-size: 17px;
    font-weight: 800;
    transition: .3s ease;
}


    .cit3dbr-home:hover {
        color: #116fe9;
        transform: translateY(-2px);
    }


.cit3dbr-home-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    color: #1874ed;
    background: linear-gradient( 145deg, #ffffff, #e8f3ff );
    box-shadow: 0 9px 20px rgba(30,107,221,.15), inset 0 2px 5px rgba(255,255,255,.9);
}


/* ============================================================
   ARROW
============================================================ */


.cit3dbr-arrow {
    width: 39px;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #2878e9;
    background: rgba(255,255,255,.72);
    box-shadow: 0 7px 15px rgba(42,91,166,.10);
    font-size: 12px;
}


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


.cit3dbr-contact {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 20px 7px 7px;
    border-radius: 30px;
    color: #4c24c7;
    font-size: 17px;
    font-weight: 850;
    background: linear-gradient( 135deg, rgba(246,241,255,.98), rgba(255,245,252,.90) );
    border: 1px solid rgba(181,151,255,.35);
    box-shadow: 0 10px 23px rgba(103,59,204,.13), inset 0 1px 0 rgba(255,255,255,.95);
}


.cit3dbr-contact-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    color: white;
    background: linear-gradient( 145deg, #7644ed, #4821c6 );
    box-shadow: 0 10px 20px rgba(97,49,211,.28), inset 0 2px 5px rgba(255,255,255,.35);
    animation: cit3dbrContactPulse 3s ease-in-out infinite;
}


@keyframes cit3dbrContactPulse {

    0%, 100% {
        box-shadow: 0 10px 20px rgba(97,49,211,.28), inset 0 2px 5px rgba(255,255,255,.35);
    }

    50% {
        box-shadow: 0 13px 28px rgba(97,49,211,.40), 0 0 22px rgba(137,83,250,.20), inset 0 2px 5px rgba(255,255,255,.42);
    }
}


/* ============================================================
   BREADCRUMB SHADOW
============================================================ */


.cit3dbr-breadcrumb-shadow {
    position: absolute;
    left: 50%;
    bottom: -28px;
    width: 75%;
    height: 35px;
    transform: translateX(-50%);
    background: radial-gradient( ellipse, rgba(52,86,157,.18), transparent 70% );
    filter: blur(12px);
    z-index: -1;
}


/* ============================================================
   LEFT SCENE
============================================================ */


.cit3dbr-left-scene {
    position: absolute;
    left: 1.5%;
    bottom: 8px;
    width: 440px;
    height: 260px;
    z-index: 20;
    transform-style: preserve-3d;
    animation: cit3dbrLeftFloat 7s ease-in-out infinite;
}


@keyframes cit3dbrLeftFloat {

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

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


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


.cit3dbr-platform {
    position: absolute;
    left: 35px;
    bottom: 5px;
    width: 370px;
    height: 110px;
    transform: rotateX(63deg) rotateZ(-2deg);
    transform-style: preserve-3d;
}


.cit3dbr-platform-layer {
    position: absolute;
    left: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.95);
    background: linear-gradient( 180deg, #ffffff, #e4efff );
    box-shadow: 0 12px 20px rgba(37,91,168,.13), inset 0 2px 5px rgba(255,255,255,.95);
}


.platform-01 {
    width: 370px;
    height: 55px;
    bottom: 0;
}


.platform-02 {
    width: 335px;
    height: 48px;
    left: 18px;
    bottom: 27px;
}


.platform-03 {
    width: 300px;
    height: 42px;
    left: 35px;
    bottom: 50px;
}


/* ============================================================
   BOOKS
============================================================ */


.cit3dbr-books {
    position: absolute;
    left: 95px;
    bottom: 64px;
    width: 260px;
    height: 95px;
    transform: rotate(0deg);
}

.cit3dbr-book {
    position: absolute;
    left: 0;
    width: 250px;
    height: 31px;
    border-radius: 5px;
    box-shadow: 0 8px 13px rgba(30,63,123,.17);
}


    .cit3dbr-book::after {
        content: "";
        position: absolute;
        right: 25px;
        top: 8px;
        width: 75px;
        height: 2px;
        border-radius: 10px;
        background: rgba(255,255,255,.45);
    }


.cit3dbr-book-blue {
    bottom: -1px;
    background: linear-gradient( 81deg, #1261dc, #4295ff );
}

.cit3dbr-book-purple {
    bottom: 29px;
    left: 1px;
    background: linear-gradient( 90deg, #6032d2, #9b65ee );
    transform: rotate(1deg);
}


.cit3dbr-book-red {
    bottom: 59px;
    left: 3px;
    background: linear-gradient( 90deg, #d92750, #f35b78 );
    transform: rotate(2deg);
}


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


.cit3dbr-graduation-cap {
    position: absolute;
    left: 110px;
    top: 8px;
    width: 155px;
    height: 125px;
    transform: rotate(-7deg);
    filter: drop-shadow( 0 18px 16px rgba(20,56,119,.23) );
}


.cit3dbr-cap-board {
    position: absolute;
    width: 155px;
    height: 70px;
    top: 0;
    background: linear-gradient( 145deg, #2d6bc2, #092658 );
    clip-path: polygon( 50% 0, 100% 43%, 50% 82%, 0 43% );
}


.cit3dbr-cap-shine {
    position: absolute;
    width: 48px;
    height: 7px;
    left: 53px;
    top: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    filter: blur(2px);
}


.cit3dbr-cap-body {
    position: absolute;
    width: 82px;
    height: 52px;
    left: 36px;
    top: 46px;
    background: linear-gradient( 145deg, #3476ca, #0c2d68 );
    clip-path: polygon( 8% 0, 92% 0, 82% 70%, 50% 100%, 18% 70% );
}


.cit3dbr-cap-string {
    position: absolute;
    width: 3px;
    height: 74px;
    right: 9px;
    top: 34px;
    background: #f0a52c;
    transform: rotate(-9deg);
}


.cit3dbr-cap-tassel {
    position: absolute;
    right: 1px;
    top: 96px;
    width: 14px;
    height: 27px;
    border-radius: 3px;
    background: linear-gradient( 90deg, #d78b17, #ffc44d, #d78b17 );
}


/* ============================================================
   LEFT PLANT
============================================================ */


.cit3dbr-left-plant {
    position: absolute;
    left: 2px;
    bottom: 55px;
    width: 65px;
    height: 125px;
}


.cit3dbr-plant-pot {
    position: absolute;
    left: 8px;
    bottom: 0;
    width: 48px;
    height: 51px;
    border-radius: 6px 6px 17px 17px;
    background: linear-gradient( 145deg, #ffffff, #dcecff );
    box-shadow: 0 12px 18px rgba(39,78,135,.15);
}


.cit3dbr-leaf {
    position: absolute;
    width: 20px;
    height: 55px;
    border-radius: 100% 0 100% 0;
    background: linear-gradient( 145deg, #65cb8c, #16845c );
    transform-origin: bottom center;
}


.leaf-01 {
    left: 26px;
    bottom: 42px;
    transform: rotate(-43deg);
}


.leaf-02 {
    left: 33px;
    bottom: 45px;
    transform: rotate(14deg);
}


.leaf-03 {
    left: 13px;
    bottom: 48px;
    transform: rotate(-72deg);
}


.leaf-04 {
    left: 41px;
    bottom: 52px;
    transform: rotate(40deg);
}


.leaf-05 {
    left: 27px;
    bottom: 60px;
    transform: rotate(0);
}


/* ============================================================
   RIGHT SCENE
============================================================ */


.cit3dbr-right-scene {
    position: absolute;
    right: 1.5%;
    bottom: 10px;
    width: 430px;
    height: 260px;
    z-index: 25;
    transform-style: preserve-3d;
}


/* ============================================================
   CHAT
============================================================ */


.cit3dbr-chat {
    position: absolute;
    left: 5px;
    top: 34px;
    animation: cit3dbrChatFloat 4.2s ease-in-out infinite;
}


.cit3dbr-chat-face {
    width: 112px;
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 23px;
    background: linear-gradient( 145deg, #429aff, #2862d8 );
    border: 2px solid rgba(255,255,255,.8);
    box-shadow: 0 20px 30px rgba(38,91,184,.23), inset 0 2px 5px rgba(255,255,255,.4);
    transform: rotate(-7deg);
}


    .cit3dbr-chat-face span {
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: #ffffff;
    }


.cit3dbr-chat-tail {
    position: absolute;
    left: 13px;
    bottom: -12px;
    width: 30px;
    height: 30px;
    background: #2862d8;
    clip-path: polygon( 0 0, 100% 0, 0 100% );
}


@keyframes cit3dbrChatFloat {

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

    50% {
        transform: translateY(-14px) rotate(-4deg);
    }
}


/* ============================================================
   ENVELOPE
============================================================ */


.cit3dbr-email {
    position: absolute;
    right: 8px;
    top: 45px;
    animation: cit3dbrEmailFloat 5s ease-in-out infinite;
}


.cit3dbr-envelope {
    position: relative;
    width: 125px;
    height: 90px;
    transform: rotate(8deg);
    filter: drop-shadow( 0 18px 16px rgba(42,78,143,.18) );
}


.cit3dbr-envelope-body {
    position: absolute;
    inset: 0;
    border-radius: 15px;
    background: linear-gradient( 145deg, #ffffff, #d8e8ff );
    border: 2px solid rgba(255,255,255,.92);
}


.cit3dbr-envelope-paper {
    position: absolute;
    left: 9px;
    bottom: 8px;
    width: 107px;
    height: 64px;
    background: linear-gradient( 145deg, #edf6ff, #cce1ff );
    clip-path: polygon( 0 0, 50% 58%, 100% 0, 100% 100%, 0 100% );
}


.cit3dbr-envelope-flap {
    position: absolute;
    left: 7px;
    top: 5px;
    width: 111px;
    height: 67px;
    background: linear-gradient( 145deg, #ffffff, #dcecff );
    clip-path: polygon( 0 0, 50% 62%, 100% 0 );
}


@keyframes cit3dbrEmailFloat {

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

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


/* ============================================================
   LOCATION
============================================================ */


.cit3dbr-location {
    position: absolute;
    right: 108px;
    bottom: 40px;
    animation: cit3dbrLocationFloat 4.5s ease-in-out infinite;
}


.cit3dbr-location-pin {
    position: relative;
    width: 70px;
    height: 70px;
    bottom: 10px;
    border-radius: 50% 50% 50% 0;
    background: linear-gradient( 145deg, #ff4c78, #e51b4f );
    transform: rotate(-45deg);
    box-shadow: 0 17px 25px rgba(220,27,75,.24), inset 4px 4px 9px rgba(255,255,255,.25);
}


    .cit3dbr-location-pin span {
        position: absolute;
        left: 22px;
        top: 22px;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: white;
    }


.cit3dbr-location-platform {
    position: absolute;
    left: -13px;
    bottom: -22px;
    width: 94px;
    height: 17px;
    border-radius: 50%;
    background: linear-gradient( 90deg, #b9d9ff, #ffffff, #badbff );
    box-shadow: 0 8px 14px rgba(48,96,170,.18);
}


@keyframes cit3dbrLocationFloat {

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

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


/* ============================================================
   RIGHT PLANT
============================================================ */


.cit3dbr-right-plant {
    position: absolute;
    right: -3px;
    bottom: 25px;
    width: 70px;
    height: 125px;
}


.cit3dbr-right-pot {
    position: absolute;
    bottom: 0;
    left: 9px;
    width: 50px;
    height: 52px;
    border-radius: 7px 7px 18px 18px;
    background: linear-gradient( 145deg, #ffffff, #dcecff );
    box-shadow: 0 12px 17px rgba(38,78,136,.14);
}


.cit3dbr-right-plant span {
    position: absolute;
    width: 21px;
    height: 54px;
    border-radius: 100% 0 100% 0;
    background: linear-gradient( 145deg, #61ca88, #16845c );
    transform-origin: bottom center;
}


    .cit3dbr-right-plant span:nth-child(2) {
        left: 24px;
        bottom: 43px;
        transform: rotate(-42deg);
    }


    .cit3dbr-right-plant span:nth-child(3) {
        left: 31px;
        bottom: 46px;
        transform: rotate(15deg);
    }


    .cit3dbr-right-plant span:nth-child(4) {
        left: 12px;
        bottom: 49px;
        transform: rotate(-70deg);
    }


    .cit3dbr-right-plant span:nth-child(5) {
        left: 40px;
        bottom: 51px;
        transform: rotate(40deg);
    }


    .cit3dbr-right-plant span:nth-child(6) {
        left: 27px;
        bottom: 59px;
        transform: rotate(0);
    }


/* ============================================================
   PAPER PLANE
============================================================ */


.cit3dbr-paper-plane {
    position: absolute;
    right: 604px;
    top: -4px;
    color: #2479ee;
    font-size: 54px;
    filter: drop-shadow( 0 10px 8px rgba(30,91,184,.20) );
    animation: cit3dbrPlane 5s ease-in-out infinite;
}


@keyframes cit3dbrPlane {

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

    50% {
        transform: translate3d(14px,-13px,20px) rotate(4deg);
    }
}


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


.cit3dbr-orb {
    position: absolute;
    z-index: 15;
    border-radius: 50%;
    background: radial-gradient( circle at 28% 25%, #ffffff 0%, #55a9ff 35%, #7546d9 80% );
    box-shadow: 0 12px 25px rgba(54,98,180,.16), inset -4px -6px 10px rgba(55,54,160,.15);
    animation: cit3dbrOrbFloat 5s ease-in-out infinite;
}


.orb-01 {
    width: 34px;
    height: 34px;
    left: 16%;
    top: 67px;
}


.orb-02 {
    width: 49px;
    height: 49px;
    left: 36%;
    bottom: 1px;
    animation-delay: -2s;
}


.orb-03 {
    width: 25px;
    height: 25px;
    left: 39%;
    top: 71px;
    animation-delay: -3s;
}


.orb-04 {
    width: 45px;
    height: 45px;
    right: 20%;
    top: 142px;
    animation-delay: -1s;
}


.orb-05 {
    width: 52px;
    height: 52px;
    right: 12%;
    top: 25px;
    animation-delay: -2.5s;
}


.orb-06 {
    width: 24px;
    height: 24px;
    right: 19%;
    bottom: 43px;
    animation-delay: -4s;
}


@keyframes cit3dbrOrbFloat {

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

    50% {
        transform: translateY(-13px) translateZ(25px);
    }
}


/* ============================================================
   LIGHT DOTS
============================================================ */


.cit3dbr-light-dot {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #45a5ff;
    box-shadow: 0 0 14px rgba(47,135,255,.8);
    z-index: 18;
    animation: cit3dbrLightDot 4s ease-in-out infinite;
}


.light-dot-01 {
    left: 36%;
    top: 50%;
}


.light-dot-02 {
    right: 34%;
    top: 58%;
    animation-delay: -1.5s;
}


.light-dot-03 {
    right: 43%;
    top: 25%;
    animation-delay: -3s;
}


@keyframes cit3dbrLightDot {

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

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


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


@media (max-width: 1100px) {

    .cit3dbr-left-scene {
        left: -55px;
        transform: scale(.78);
        transform-origin: left bottom;
    }


    .cit3dbr-right-scene {
        right: -55px;
        transform: scale(.78);
        transform-origin: right bottom;
    }
}


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


@media (max-width: 850px) {

    .cit3dbr-section {
        height: 280px;
    }


    .cit3dbr-left-scene {
        left: -110px;
        transform: scale(.60);
    }


    .cit3dbr-right-scene {
        right: -115px;
        transform: scale(.60);
    }


    .cit3dbr-breadcrumb {
        min-width: 500px;
        transform: scale(.88);
    }
}


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


@media (max-width: 600px) {

    .cit3dbr-section {
        height: 245px;
    }


    .cit3dbr-left-scene {
        left: -125px;
        bottom: -15px;
        transform: scale(.46);
        opacity: .72;
    }


    .cit3dbr-right-scene {
        right: -130px;
        bottom: -15px;
        transform: scale(.46);
        opacity: .72;
    }


    .cit3dbr-breadcrumb {
        min-width: auto;
        width: max-content;
        min-height: 55px;
        gap: 6px;
        padding: 6px 8px;
        border-radius: 30px;
        transform: scale(.68);
    }


    .cit3dbr-home {
        font-size: 13px;
        gap: 7px;
    }


    .cit3dbr-home-icon {
        width: 37px;
        height: 37px;
        border-radius: 11px;
    }


    .cit3dbr-arrow {
        width: 29px;
        height: 29px;
        font-size: 9px;
    }


    .cit3dbr-contact {
        font-size: 17px;
        gap: 7px;
        padding: 5px 11px 5px 5px;
    }


    .cit3dbr-contact-icon {
        width: 37px;
        height: 37px;
        border-radius: 11px;
    }


    .cit3dbr-lines {
        opacity: .35;
    }


    .cit3dbr-dots {
        opacity: .14;
    }


    .cit3dbr-orb {
        opacity: .55;
    }
}


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


@media (max-width: 430px) {

    .cit3dbr-section {
        height: 225px;
    }


    .cit3dbr-breadcrumb {
        transform: scale(.60);
    }


    .cit3dbr-left-scene {
        left: -150px;
        transform: scale(.39);
        opacity: .48;
    }


    .cit3dbr-right-scene {
        right: -150px;
        transform: scale(.39);
        opacity: .48;
    }


    .cit3dbr-orb {
        opacity: .38;
    }


    .cit3dbr-dots {
        display: none;
    }
}


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


@media (max-width: 360px) {

    .cit3dbr-section {
        height: 210px;
    }


    .cit3dbr-breadcrumb {
        transform: scale(.90);
    }
}


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


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

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








/* =========================================================
   ROOT
========================================================= */

.story-section {
    --story-bg: #020817;
    --story-blue: #258cff;
    --story-purple: #8b5cf6;
    --story-pink: #ff2d68;
    --story-text: #f8fafc;
    --story-muted: #a7b4ca;
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 120px 5.5% 100px;
    overflow: hidden;
    background: radial-gradient( circle at 78% 20%, rgba(37,140,255,.14), transparent 28% ), radial-gradient( circle at 18% 78%, rgba(139,92,246,.10), transparent 28% ), #020817;
    color: var(--story-text);
}


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

.story-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient( rgba(38,132,255,.055) 1px, transparent 1px ), linear-gradient( 90deg, rgba(38,132,255,.055) 1px, transparent 1px );
    background-size: 55px 55px;
    mask-image: linear-gradient( to bottom, transparent, black 15%, black 85%, transparent );
    opacity: .7;
    transform: perspective(700px) rotateX(58deg) scale(1.8) translateY(160px);
    transform-origin: center bottom;
    pointer-events: none;
}


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

.story-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.story-glow-1 {
    width: 350px;
    height: 350px;
    left: -180px;
    top: 20%;
    background: rgba(0,119,255,.13);
}

.story-glow-2 {
    width: 300px;
    height: 300px;
    right: -130px;
    top: 8%;
    background: rgba(127,55,255,.15);
}

.story-glow-3 {
    width: 260px;
    height: 260px;
    right: 20%;
    bottom: -150px;
    background: rgba(255,30,100,.08);
}


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

.story-particles span {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #3ea2ff;
    box-shadow: 0 0 10px #3ea2ff, 0 0 20px rgba(62,162,255,.7);
    animation: particleFloat 5s ease-in-out infinite;
}

    .story-particles span:nth-child(1) {
        left: 8%;
        top: 20%;
    }

    .story-particles span:nth-child(2) {
        left: 25%;
        top: 12%;
        animation-delay: 1s;
    }

    .story-particles span:nth-child(3) {
        left: 47%;
        top: 28%;
        animation-delay: 2s;
    }

    .story-particles span:nth-child(4) {
        left: 72%;
        top: 15%;
        background: #ff2d68;
    }

    .story-particles span:nth-child(5) {
        left: 90%;
        top: 36%;
        animation-delay: 1.5s;
    }

    .story-particles span:nth-child(6) {
        left: 12%;
        top: 72%;
        animation-delay: 2.5s;
    }

    .story-particles span:nth-child(7) {
        left: 43%;
        top: 82%;
        background: #a855f7;
    }

    .story-particles span:nth-child(8) {
        left: 63%;
        top: 70%;
        animation-delay: 3s;
    }

    .story-particles span:nth-child(9) {
        left: 85%;
        top: 78%;
        background: #ff2d68;
    }

    .story-particles span:nth-child(10) {
        left: 95%;
        top: 12%;
    }

@keyframes particleFloat {

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

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


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

.story-container {
    position: relative;
    z-index: 5;
    max-width: 1450px;
    margin: auto;
    display: grid;
    grid-template-columns: minmax(400px, .85fr) minmax(550px, 1.15fr);
    gap: 80px;
    align-items: center;
}


/* =========================================================
   LEFT SIDE
========================================================= */

.story-intro {
    position: relative;
    z-index: 5;
}


/* Badge */

.story-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 25px;
    border-radius: 50px;
    background: linear-gradient( 135deg, rgba(26,75,150,.35), rgba(40,30,90,.25) );
    border: 1px solid rgba(71,143,255,.45);
    box-shadow: inset 0 0 25px rgba(40,130,255,.08), 0 0 25px rgba(30,110,255,.08);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 5px;
}

    .story-badge i {
        color: #ff285f;
        font-size: 9px;
        text-shadow: 0 0 10px #ff285f, 0 0 20px #ff285f;
    }


/* Heading */

.story-title {
    margin: 30px 0 22px;
    max-width: 650px;
    font-family: "Arial", sans-serif;
    font-size: clamp(48px, 5vw, 78px);
    line-height: .98;
    letter-spacing: -3px;
    font-weight: 850;
    color: #fff;
}

    .story-title span {
        display: block;
        background: linear-gradient( 90deg, #2196ff, #8b5cf6, #d946ef );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }


/* Description */

.story-description {
    max-width: 570px;
    color: #aebbd0;
    font-size: 17px;
    line-height: 1.75;
    margin-bottom: 25px;
}


/* Line text */

.story-line-text {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;
    color: #b6c1d5;
    font-size: 14px;
}

    .story-line-text span {
        width: 55px;
        height: 3px;
        display: inline-block;
        background: #ff2b61;
        box-shadow: 0 0 10px rgba(255,43,97,.8);
        margin-right: 5px;
    }

    .story-line-text strong {
        font-weight: 500;
    }

    .story-line-text b {
        color: #69778e;
    }


/* =========================================================
   3D ORBIT
========================================================= */

.story-orbit-area {
    position: relative;
    width: 520px;
    height: 310px;
    margin-top: 35px;
    margin-left: -20px;
    perspective: 900px;
    transition: transform .15s ease-out;
}


/* Orbit rings */

.orbit-ring {
    position: absolute;
    left: 50%;
    top: 55%;
    border-radius: 50%;
    border: 1px solid rgba(60,147,255,.55);
    transform: translate(-50%, -50%) rotateX(68deg);
    box-shadow: 0 0 15px rgba(36,138,255,.12);
}

.orbit-ring-one {
    width: 340px;
    height: 130px;
    animation: orbitRotate 9s linear infinite;
}

.orbit-ring-two {
    width: 430px;
    height: 170px;
    border-color: rgba(139,92,246,.35);
    animation: orbitRotateReverse 13s linear infinite;
}

.orbit-ring-three {
    width: 490px;
    height: 205px;
    border-color: rgba(255,45,104,.28);
    animation: orbitRotate 17s linear infinite;
}

@keyframes orbitRotate {

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

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

@keyframes orbitRotateReverse {

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

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


/* Core */

.orbit-core {
    position: absolute;
    left: 50%;
    top: 54%;
    width: 145px;
    height: 145px;
    transform: translate(-50%, -50%) rotateX(12deg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.core-glow {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(53,151,255,.55), rgba(117,65,255,.2), transparent 70% );
    filter: blur(15px);
    animation: corePulse 3s ease-in-out infinite;
}

.core-shape {
    position: relative;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient( circle at 35% 30%, #b9dcff, #527fff 25%, #623adf 55%, #111c58 100% );
    border: 2px solid rgba(255,255,255,.65);
    box-shadow: inset -15px -20px 35px rgba(0,0,0,.4), 0 0 25px rgba(54,143,255,.8), 0 0 60px rgba(112,64,255,.35);
}

    .core-shape i {
        color: white;
        font-size: 40px;
        filter: drop-shadow(0 0 10px rgba(255,255,255,.8));
    }

@keyframes corePulse {

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

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


/* Orbit dots */

.orbit-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #40a7ff;
    box-shadow: 0 0 10px #40a7ff, 0 0 25px #40a7ff;
}

.dot-one {
    left: 15%;
    top: 47%;
}

.dot-two {
    right: 17%;
    top: 30%;
    background: #ff3c76;
    box-shadow: 0 0 10px #ff3c76, 0 0 25px #ff3c76;
}

.dot-three {
    right: 24%;
    bottom: 13%;
    background: #9d5cff;
    box-shadow: 0 0 10px #9d5cff, 0 0 25px #9d5cff;
}


/* Labels */

.orbit-label {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 15px;
    border-radius: 10px;
    background: rgba(8,21,48,.75);
    border: 1px solid rgba(80,143,220,.3);
    backdrop-filter: blur(12px);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

    .orbit-label span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #2398ff;
        box-shadow: 0 0 10px #2398ff;
    }

.label-curiosity {
    left: 0;
    top: 40%;
}

.label-guidance {
    right: 4%;
    top: 20%;
}

    .label-guidance span {
        background: #ff3e71;
        box-shadow: 0 0 10px #ff3e71;
    }

.label-opportunity {
    left: 5%;
    bottom: 4%;
}

    .label-opportunity span {
        background: #9b5cff;
        box-shadow: 0 0 10px #9b5cff;
    }

.label-future {
    right: 0;
    bottom: 7%;
}


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

.story-timeline {
    position: relative;
    padding: 10px 0;
}


/* Vertical line */

.timeline-line {
    position: absolute;
    left: 0;
    top: 50px;
    bottom: 50px;
    width: 2px;
    background: linear-gradient( to bottom, rgba(40,140,255,.15), rgba(40,140,255,.8), rgba(255,40,105,.8), rgba(40,140,255,.15) );
    box-shadow: 0 0 15px rgba(40,140,255,.35);
}

.timeline-progress {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient( to bottom, #2196ff, #8b5cf6, #ff2d68 );
    box-shadow: 0 0 15px #438fff;
    transition: height .1s linear;
}


/* Timeline item */

.timeline-item {
    position: relative;
    padding-left: 48px;
    margin-bottom: 24px;
    opacity: 0;
    transform: translateX(70px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}

    .timeline-item.show {
        opacity: 1;
        transform: translateX(0);
    }


/* Node */

.timeline-node {
    position: absolute;
    left: -9px;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #07142b;
    border: 2px solid #3199ff;
    box-shadow: 0 0 12px #3199ff, 0 0 28px rgba(49,153,255,.6);
    z-index: 5;
}

    .timeline-node span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #5cb5ff;
        box-shadow: 0 0 10px #5cb5ff;
    }


/* Every second node */

.timeline-item:nth-child(3) .timeline-node,
.timeline-item:nth-child(5) .timeline-node {
    border-color: #ff3a71;
    box-shadow: 0 0 12px #ff3a71, 0 0 28px rgba(255,58,113,.55);
}

    .timeline-item:nth-child(3) .timeline-node span,
    .timeline-item:nth-child(5) .timeline-node span {
        background: #ff547f;
    }


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

.timeline-card {
    position: relative;
    min-height: 170px;
    padding: 28px 28px 28px 25px;
    display: grid;
    grid-template-columns: 105px 1fr 55px;
    align-items: center;
    gap: 22px;
    border-radius: 25px;
    background: linear-gradient( 135deg, rgba(18,46,88,.62), rgba(7,18,42,.74) );
    border: 1px solid rgba(92,151,230,.28);
    backdrop-filter: blur(18px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 20px 50px rgba(0,0,0,.28);
    overflow: hidden;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}


    /* Card shine */

    .timeline-card::before {
        content: "";
        position: absolute;
        width: 250px;
        height: 250px;
        top: -170px;
        left: -100px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(53,147,255,.13), transparent 70% );
        pointer-events: none;
    }

    .timeline-card::after {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 70%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.07), transparent );
        transform: skewX(-20deg);
        transition: left .8s ease;
    }

    .timeline-card:hover::after {
        left: 140%;
    }

    .timeline-card:hover {
        transform: translateY(-6px) perspective(800px) rotateX(2deg);
        border-color: rgba(66,151,255,.65);
        box-shadow: 0 25px 65px rgba(0,0,0,.4), 0 0 35px rgba(31,124,255,.12);
    }


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

.timeline-icon {
    width: 82px;
    height: 82px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient( circle at 35% 30%, #78c2ff, #1765cc 55%, #0a2551 );
    border: 1px solid rgba(126,199,255,.55);
    box-shadow: inset 0 0 25px rgba(255,255,255,.08), 0 12px 35px rgba(26,124,255,.2);
    transform: perspective(500px) rotateY(-8deg);
    transition: transform .4s ease;
}

.timeline-card:hover .timeline-icon {
    transform: perspective(500px) rotateY(10deg) rotateX(5deg) translateY(-3px);
}

.timeline-icon i {
    color: #fff;
    font-size: 31px;
    filter: drop-shadow(0 0 9px rgba(255,255,255,.7));
}


/* Purple */

.timeline-icon.purple {
    background: radial-gradient( circle at 35% 30%, #c8a6ff, #7142db 50%, #26135b );
    border-color: rgba(177,136,255,.5);
}


/* Blue */

.timeline-icon.blue {
    background: radial-gradient( circle at 35% 30%, #b7dcff, #3278e8 50%, #112b69 );
}


/* Pink */

.timeline-icon.pink {
    background: radial-gradient( circle at 35% 30%, #ffb3c9, #ed3f72 50%, #671532 );
    border-color: rgba(255,116,157,.55);
}


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

.timeline-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

    .timeline-heading h3 {
        margin: 0;
        font-size: 25px;
        font-weight: 800;
        color: #f8fafc;
    }

    .timeline-heading span {
        font-size: 45px;
        line-height: 1;
        font-weight: 900;
        color: rgba(50,120,220,.17);
    }

.timeline-content h4 {
    margin: 3px 0 8px;
    font-size: 16px;
    font-weight: 750;
    background: linear-gradient( 90deg, #269aff, #b34df3 );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.timeline-content p {
    max-width: 500px;
    margin: 0;
    color: #9eabc0;
    font-size: 14px;
    line-height: 1.6;
}


/* Arrow */

.timeline-arrow {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(102,168,255,.35);
    background: rgba(31,85,155,.18);
    color: #e5f2ff;
    transition: transform .3s ease, background .3s ease;
}

.timeline-card:hover .timeline-arrow {
    transform: translateX(5px);
    background: rgba(40,130,255,.3);
}


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

.story-scroll {
    position: absolute;
    left: 50%;
    bottom: 25px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    color: #91a0b7;
    z-index: 10;
}

.scroll-mouse {
    width: 24px;
    height: 38px;
    border: 2px solid rgba(180,207,240,.8);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    padding-top: 7px;
}

    .scroll-mouse span {
        width: 4px;
        height: 7px;
        border-radius: 5px;
        background: #fff;
        animation: scrollDot 1.5s ease-in-out infinite;
    }

@keyframes scrollDot {

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

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

.story-scroll small {
    font-size: 9px;
    letter-spacing: 4px;
    font-weight: 700;
}

.story-scroll > i {
    font-size: 12px;
    animation: scrollArrow 1.5s ease-in-out infinite;
}

@keyframes scrollArrow {

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

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


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

@media (max-width: 1200px) {

    .story-section {
        padding-left: 4%;
        padding-right: 4%;
    }

    .story-container {
        grid-template-columns: minmax(350px, .85fr) minmax(500px, 1.15fr);
        gap: 45px;
    }

    .story-title {
        font-size: clamp(44px, 5vw, 64px);
    }

    .story-orbit-area {
        transform: scale(.9);
        transform-origin: left center;
    }

    .timeline-card {
        grid-template-columns: 85px 1fr 45px;
        gap: 18px;
        padding: 23px;
    }

    .timeline-icon {
        width: 70px;
        height: 70px;
    }

    .timeline-heading h3 {
        font-size: 22px;
    }
}


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

@media (max-width: 1000px) {

    .story-section {
        padding-top: 90px;
        padding-bottom: 100px;
    }

    .story-container {
        grid-template-columns: 1fr;
        gap: 70px;
        max-width: 760px;
    }

    .story-intro {
        text-align: center;
    }

    .story-title {
        margin-left: auto;
        margin-right: auto;
    }

    .story-description {
        margin-left: auto;
        margin-right: auto;
    }

    .story-line-text {
        justify-content: center;
    }

    .story-orbit-area {
        margin-left: auto;
        margin-right: auto;
        transform-origin: center;
        transform: scale(.9);
    }

    .story-timeline {
        width: 100%;
    }

    .timeline-card {
        min-height: 160px;
    }
}


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

@media (max-width: 700px) {

    .story-section {
        min-height: auto;
        padding: 75px 18px 90px;
    }

    .story-grid {
        background-size: 35px 35px;
        transform: perspective(600px) rotateX(58deg) scale(2.2) translateY(100px);
    }


    /* Badge */

    .story-badge {
        padding: 9px 17px;
        font-size: 10px;
        letter-spacing: 3px;
    }


    /* Heading */

    .story-title {
        margin-top: 24px;
        font-size: clamp(39px, 11vw, 54px);
        line-height: 1.02;
        letter-spacing: -1.8px;
    }

    .story-description {
        font-size: 14px;
        line-height: 1.7;
        padding: 0 5px;
    }


    /* Line */

    .story-line-text {
        gap: 7px;
        font-size: 11px;
    }

        .story-line-text span {
            width: 35px;
        }


    /* Orbit */

    .story-orbit-area {
        width: 100%;
        height: 250px;
        margin-top: 25px;
        transform: scale(.75);
        transform-origin: center top;
        margin-bottom: -35px;
    }


    /* Timeline */

    .story-timeline {
        padding-left: 5px;
    }

    .timeline-line {
        left: 8px;
        top: 25px;
        bottom: 25px;
    }

    .timeline-item {
        padding-left: 31px;
        margin-bottom: 18px;
    }

    .timeline-node {
        left: -1px;
        width: 18px;
        height: 18px;
    }


    /* Card */

    .timeline-card {
        min-height: auto;
        display: grid;
        grid-template-columns: 58px 1fr;
        gap: 15px;
        padding: 18px;
        border-radius: 20px;
    }


    .timeline-icon {
        width: 58px;
        height: 58px;
        border-radius: 17px;
    }

        .timeline-icon i {
            font-size: 22px;
        }


    .timeline-heading h3 {
        font-size: 18px;
    }

    .timeline-heading span {
        font-size: 27px;
    }

    .timeline-content h4 {
        font-size: 13px;
        margin-top: 2px;
    }

    .timeline-content p {
        font-size: 12px;
        line-height: 1.55;
    }


    /* Arrow */

    .timeline-arrow {
        display: none;
    }


    /* Scroll */

    .story-scroll {
        display: none;
    }
}


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

@media (max-width: 430px) {

    .story-section {
        padding-left: 14px;
        padding-right: 14px;
    }

    .story-title {
        font-size: 38px;
    }

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

    .story-orbit-area {
        transform: scale(.65);
        margin-bottom: -70px;
    }

    .timeline-item {
        padding-left: 27px;
    }

    .timeline-card {
        padding: 15px;
        grid-template-columns: 50px 1fr;
        gap: 12px;
    }

    .timeline-icon {
        width: 50px;
        height: 50px;
        border-radius: 14px;
    }

        .timeline-icon i {
            font-size: 19px;
        }

    .timeline-heading h3 {
        font-size: 17px;
    }

    .timeline-heading span {
        font-size: 23px;
    }

    .timeline-content h4 {
        font-size: 12px;
    }

    .timeline-content p {
        font-size: 11px;
    }
}












/* =========================================================
   WHAT WE TEACH — MAIN
========================================================= */

.teach-section {
    --teach-blue: #2563eb;
    --teach-blue-light: #60a5fa;
    --teach-purple: #8b5cf6;
    --teach-cyan: #06b6d4;
    --teach-pink: #ec4899;
    --teach-orange: #f59e0b;
    --teach-red: #ef4444;
    position: relative;
    width: 100%;
    padding: 31px 5% 34px;
    overflow: hidden;
    background: linear-gradient( 180deg, #ffffff 0%, #f7faff 48%, #eef5ff 100% );
    color: #13213b;
}


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

.teach-bg-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient( rgba(37,99,235,.035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(37,99,235,.035) 1px, transparent 1px );
    background-size: 55px 55px;
    mask-image: linear-gradient( to bottom, transparent, black 15%, black 85%, transparent );
    pointer-events: none;
}


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

.teach-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    animation: teachGlowFloat 7s ease-in-out infinite;
}

.teach-glow-one {
    width: 330px;
    height: 330px;
    left: -150px;
    top: 25%;
    background: rgba(37,99,235,.10);
}

.teach-glow-two {
    width: 300px;
    height: 300px;
    right: -120px;
    top: 18%;
    background: rgba(139,92,246,.10);
    animation-delay: 1.5s;
}

.teach-glow-three {
    width: 250px;
    height: 250px;
    left: 43%;
    bottom: -130px;
    background: rgba(6,182,212,.09);
    animation-delay: 3s;
}

@keyframes teachGlowFloat {

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

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


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

.teach-particle {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #3b82f6;
    box-shadow: 0 0 10px rgba(59,130,246,.8);
    animation: teachParticle 5s ease-in-out infinite;
}

.tp-1 {
    left: 9%;
    top: 25%;
}

.tp-2 {
    left: 20%;
    top: 75%;
    background: #8b5cf6;
}

.tp-3 {
    right: 12%;
    top: 28%;
    background: #ec4899;
}

.tp-4 {
    right: 20%;
    bottom: 17%;
    background: #06b6d4;
}

.tp-5 {
    left: 48%;
    top: 13%;
}

@keyframes teachParticle {

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

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


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

.teach-container {
    position: relative;
    z-index: 3;
    max-width: 1450px;
    margin: auto;
}


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

.teach-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 55px;
}


.teach-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 50px;
    background: rgba(37,99,235,.07);
    border: 1px solid rgba(37,99,235,.18);
    color: #31568f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 4px;
    box-shadow: 0 8px 25px rgba(37,99,235,.07);
}


    .teach-badge span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ef315d;
        box-shadow: 0 0 10px rgba(239,49,93,.7);
        animation: teachBadgePulse 1.8s infinite;
    }

@keyframes teachBadgePulse {

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

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


.teach-header h2 {
    margin: 22px 0 15px;
    font-size: clamp(42px, 5vw, 70px);
    line-height: 1;
    letter-spacing: -2.5px;
    font-weight: 850;
    color: #14213d;
}


    .teach-header h2 span {
        display: block;
        background: linear-gradient( 90deg, #2563eb, #7c3aed, #c026d3 );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }


.teach-header p {
    max-width: 680px;
    margin: auto;
    color: #71809a;
    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   LEARNING UNIVERSE
========================================================= */

.learning-universe {
    position: relative;
    width: 100%;
    height: 690px;
    max-width: 1250px;
    margin: auto;
}


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

.universe-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%,-50%) rotateX(68deg);
    pointer-events: none;
}


.universe-ring-1 {
    width: 460px;
    height: 230px;
    border: 1px dashed rgba(37,99,235,.20);
    animation: universeRotate 18s linear infinite;
}


.universe-ring-2 {
    width: 650px;
    height: 325px;
    border: 1px solid rgba(139,92,246,.13);
    animation: universeRotateReverse 24s linear infinite;
}


.universe-ring-3 {
    width: 880px;
    height: 440px;
    border: 1px dashed rgba(6,182,212,.12);
    animation: universeRotate 32s linear infinite;
}


@keyframes universeRotate {

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

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


@keyframes universeRotateReverse {

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

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


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

.universe-line {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 1px;
    transform-origin: left center;
    background: linear-gradient( 90deg, rgba(37,99,235,.4), transparent );
    opacity: .5;
    pointer-events: none;
}

.line-1 {
    width: 370px;
    transform: rotate(-22deg);
}

.line-2 {
    width: 350px;
    transform: rotate(25deg);
}

.line-3 {
    width: 340px;
    transform: rotate(155deg);
}

.line-4 {
    width: 370px;
    transform: rotate(202deg);
}

.line-5 {
    width: 300px;
    transform: rotate(90deg);
}

.line-6 {
    width: 300px;
    transform: rotate(-90deg);
}


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

.learning-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 280px;
    height: 280px;
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 4;
    perspective: 800px;
}


    /* Outer glow */

    .learning-core::before {
        content: "";
        position: absolute;
        width: 230px;
        height: 230px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(37,99,235,.18), rgba(139,92,246,.09), transparent 70% );
        filter: blur(15px);
        animation: coreGlow 3s ease-in-out infinite;
    }

@keyframes coreGlow {

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

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


/* Core circles */

.core-orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(37,99,235,.35);
    transform: rotateX(70deg);
}

.core-orbit-a {
    width: 240px;
    height: 95px;
    animation: coreOrbit 8s linear infinite;
}

.core-orbit-b {
    width: 270px;
    height: 120px;
    border-color: rgba(168,85,247,.3);
    animation: coreOrbitReverse 11s linear infinite;
}

@keyframes coreOrbit {

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

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

@keyframes coreOrbitReverse {

    from {
        transform: rotateX(70deg) rotateZ(360deg);
    }

    to {
        transform: rotateX(70deg) rotateZ(0);
    }
}


/* Core */

.core-circle {
    position: relative;
    width: 125px;
    height: 125px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient( circle at 30% 25%, #dbeafe, #60a5fa 27%, #2563eb 57%, #172554 100% );
    border: 3px solid rgba(255,255,255,.75);
    box-shadow: inset -18px -20px 30px rgba(15,23,42,.25), inset 10px 10px 20px rgba(255,255,255,.4), 0 15px 40px rgba(37,99,235,.25), 0 0 70px rgba(37,99,235,.2);
    transform: translateZ(35px);
    animation: coreFloat 4s ease-in-out infinite;
}


.core-inner {
    width: 65px;
    height: 65px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.45);
    backdrop-filter: blur(8px);
    transform: rotate(-8deg);
}


    .core-inner i {
        color: white;
        font-size: 30px;
        filter: drop-shadow( 0 0 10px rgba(255,255,255,.7) );
    }


@keyframes coreFloat {

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

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


/* Core title */

.core-title {
    position: absolute;
    bottom: -13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
    z-index: 5;
}

    .core-title strong {
        color: #1d4ed8;
        font-size: 12px;
        letter-spacing: 4px;
    }

    .core-title span {
        color: #65748c;
        font-size: 10px;
        letter-spacing: 2px;
        font-weight: 800;
    }


/* Pulse */

.core-pulse {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    right: 27px;
    top: 38px;
    background: #ef476f;
    box-shadow: 0 0 10px #ef476f, 0 0 25px rgba(239,71,111,.7);
    animation: pulseDot 2s infinite;
}

@keyframes pulseDot {

    0% {
        transform: scale(.8);
        opacity: .5;
    }

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

    100% {
        transform: scale(.8);
        opacity: .5;
    }
}


/* =========================================================
   TEACH CARDS
========================================================= */

.teach-card {
    position: absolute;
    width: 350px;
    min-height: 150px;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 17px;
    border-radius: 24px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(148,163,184,.25);
    box-shadow: 0 20px 50px rgba(30,64,175,.09), inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter: blur(15px);
    transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease;
    z-index: 6;
    cursor: pointer;
    opacity: 0;
    transform: translateY(30px) scale(.96);
    animation: cardAppear .8s forwards;
}


/* Individual positions */

.teach-card-1 {
    left: 2%;
    top: 6%;
    animation-delay: .1s;
}

.teach-card-2 {
    right: 2%;
    top: 6%;
    animation-delay: .25s;
}

.teach-card-3 {
    left: -1%;
    top: 39%;
    animation-delay: .4s;
}

.teach-card-4 {
    right: -1%;
    top: 39%;
    animation-delay: .55s;
}

.teach-card-5 {
    left: 9%;
    bottom: 2%;
    animation-delay: .7s;
}

.teach-card-6 {
    right: 9%;
    bottom: 2%;
    animation-delay: .85s;
}


@keyframes cardAppear {

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


/* Hover */

.teach-card:hover {
    transform: translateY(-12px) perspective(800px) rotateX(4deg) rotateY(-4deg);
    border-color: rgba(37,99,235,.4);
    box-shadow: 0 30px 70px rgba(30,64,175,.16), 0 0 35px rgba(37,99,235,.08);
}


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

.teach-card-number {
    position: absolute;
    right: 18px;
    top: 12px;
    font-size: 38px;
    line-height: 1;
    font-weight: 900;
    color: rgba(37,99,235,.055);
    pointer-events: none;
}


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

.teach-icon {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( 145deg, #eff6ff, #bfdbfe );
    color: #2563eb;
    border: 1px solid rgba(37,99,235,.12);
    box-shadow: 0 12px 25px rgba(37,99,235,.13);
    transform: perspective(500px) rotateY(-8deg);
    transition: transform .45s ease, box-shadow .45s ease;
}


    .teach-icon i {
        font-size: 27px;
        transition: transform .45s ease;
    }


.teach-card:hover .teach-icon {
    transform: perspective(500px) rotateY(8deg) translateY(-5px) scale(1.08);
    box-shadow: 0 18px 35px rgba(37,99,235,.22);
}


    .teach-card:hover .teach-icon i {
        transform: scale(1.18) rotate(-5deg);
    }


/* Purple */

.icon-purple {
    background: linear-gradient( 145deg, #f3e8ff, #ddd6fe );
    color: #7c3aed;
    box-shadow: 0 12px 25px rgba(124,58,237,.12);
}


/* Cyan */

.icon-cyan {
    background: linear-gradient( 145deg, #ecfeff, #a5f3fc );
    color: #0891b2;
}


/* Orange */

.icon-orange {
    background: linear-gradient( 145deg, #fff7ed, #fed7aa );
    color: #ea580c;
}


/* Pink */

.icon-pink {
    background: linear-gradient( 145deg, #fdf2f8, #fbcfe8 );
    color: #db2777;
}


/* Red */

.icon-red {
    background: linear-gradient( 145deg, #fff1f2, #fecdd3 );
    color: #e11d48;
}


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

.teach-card-content {
    position: relative;
    z-index: 2;
    padding-right: 25px;
}


    .teach-card-content h3 {
        margin: 0 0 7px;
        font-size: 19px;
        font-weight: 800;
        color: #18263f;
    }


    .teach-card-content p {
        margin: 0;
        color: #728099;
        font-size: 12.5px;
        line-height: 1.6;
    }


/* =========================================================
   FLOATING ORB
========================================================= */

.teach-card-orb {
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    right: -45px;
    bottom: -45px;
    background: radial-gradient( circle, rgba(37,99,235,.13), transparent 68% );
    transition: transform .5s ease;
}


.teach-card:hover .teach-card-orb {
    transform: scale(2);
}


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

.teach-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
    color: #7a889d;
    font-size: 11px;
    letter-spacing: 2px;
}


    .teach-bottom div {
        display: flex;
        align-items: center;
        gap: 12px;
    }


    .teach-bottom strong {
        color: #34445f;
    }


    .teach-bottom b {
        color: #ef476f;
    }


.teach-bottom-line {
    width: 70px;
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(37,99,235,.35) );
}


    .teach-bottom-line:last-child {
        background: linear-gradient( 90deg, rgba(37,99,235,.35), transparent );
    }


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

@media (max-width: 1200px) {

    .teach-section {
        padding-left: 4%;
        padding-right: 4%;
    }

    .learning-universe {
        transform: scale(.88);
        transform-origin: center top;
        margin-bottom: -80px;
    }

    .teach-card {
        width: 315px;
    }
}


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

@media (max-width: 1000px) {

    .teach-section {
        padding-top: 85px;
    }

    .teach-header {
        margin-bottom: 30px;
    }

    /*
       Change universe to simpler
       tablet arrangement
    */

    .learning-universe {
        height: 850px;
        transform: none;
        margin-bottom: 0;
    }

    .universe-ring-1 {
        width: 430px;
    }

    .universe-ring-2 {
        width: 590px;
    }

    .universe-ring-3 {
        width: 750px;
    }

    .teach-card {
        width: 300px;
    }

    .teach-card-1 {
        left: 0;
    }

    .teach-card-2 {
        right: 0;
    }

    .teach-card-3 {
        left: 0;
    }

    .teach-card-4 {
        right: 0;
    }

    .teach-card-5 {
        left: 4%;
    }

    .teach-card-6 {
        right: 4%;
    }
}


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

@media (max-width: 700px) {

    .teach-section {
        padding: 75px 18px 70px;
    }


    .teach-header {
        margin-bottom: 40px;
    }


    .teach-badge {
        padding: 8px 15px;
        font-size: 9px;
        letter-spacing: 2.5px;
    }


    .teach-header h2 {
        font-size: clamp(36px, 10vw, 50px);
        line-height: 1.04;
        letter-spacing: -1.5px;
    }


    .teach-header p {
        font-size: 13px;
        line-height: 1.65;
    }


    /* Universe */

    .learning-universe {
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        padding-top: 185px;
    }


    /* Hide large orbit system */

    .universe-ring,
    .universe-line {
        display: none;
    }


    /* Core */

    .learning-core {
        width: 220px;
        height: 170px;
        top: 80px;
    }


    .core-orbit-a {
        width: 190px;
        height: 75px;
    }


    .core-orbit-b {
        width: 215px;
        height: 90px;
    }


    .core-circle {
        width: 88px;
        height: 88px;
    }


    .core-inner {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }


        .core-inner i {
            font-size: 21px;
        }


    .core-title {
        bottom: -18px;
    }


        .core-title strong {
            font-size: 10px;
            letter-spacing: 3px;
        }


        .core-title span {
            font-size: 8px;
        }


    .core-pulse {
        right: 34px;
        top: 28px;
        width: 8px;
        height: 8px;
    }


    /* Cards */

    .teach-card {
        position: relative;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100%;
        min-height: 145px;
        padding: 16px;
        gap: 12px;
        border-radius: 20px;
        animation: mobileCardAppear .7s forwards;
    }


    @keyframes mobileCardAppear {

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

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


    .teach-card-number {
        font-size: 30px;
        right: 12px;
        top: 10px;
    }


    .teach-icon {
        width: 56px;
        height: 56px;
        border-radius: 16px;
    }


        .teach-icon i {
            font-size: 21px;
        }


    .teach-card-content {
        padding-right: 10px;
    }


        .teach-card-content h3 {
            font-size: 15px;
            margin-bottom: 5px;
        }


        .teach-card-content p {
            font-size: 11px;
            line-height: 1.5;
        }


    .teach-card-orb {
        display: none;
    }


    .teach-bottom {
        margin-top: 35px;
        gap: 8px;
        font-size: 8px;
        letter-spacing: 1px;
    }


        .teach-bottom div {
            gap: 7px;
        }


    .teach-bottom-line {
        width: 30px;
    }
}


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

@media (max-width: 450px) {

    .teach-section {
        padding-left: 13px;
        padding-right: 13px;
    }


    .learning-universe {
        grid-template-columns: 1fr;
        padding-top: 175px;
        gap: 12px;
    }


    .learning-core {
        top: 75px;
    }


    .teach-card {
        min-height: 125px;
        padding: 15px;
    }


    .teach-icon {
        width: 52px;
        height: 52px;
    }


    .teach-card-content h3 {
        font-size: 15px;
    }


    .teach-card-content p {
        font-size: 11px;
    }


    .teach-bottom-line {
        display: none;
    }
}


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

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

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






/* =========================================================
   LEARNING IN ACTION
========================================================= */

.learning-action {
    --la-blue: #238cff;
    --la-blue-light: #4da3ff;
    --la-purple: #8b5cf6;
    --la-pink: #ec4899;
    --la-cyan: #06b6d4;
    --la-green: #22c55e;
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 37px 5% 36px;
    overflow: hidden;
    background: radial-gradient( circle at 12% 45%, rgba(21,103,210,.16), transparent 28% ), radial-gradient( circle at 85% 20%, rgba(110,50,220,.13), transparent 30% ), radial-gradient( circle at 70% 90%, rgba(236,72,153,.07), transparent 25% ), #020817;
    color: #fff;
}


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

.la-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient( rgba(55,142,255,.055) 1px, transparent 1px ), linear-gradient( 90deg, rgba(55,142,255,.055) 1px, transparent 1px );
    background-size: 55px 55px;
    transform: perspective(800px) rotateX(58deg) scale(1.8) translateY(190px);
    transform-origin: center bottom;
    opacity: .75;
    pointer-events: none;
    mask-image: linear-gradient( to bottom, transparent, black 20%, black 80%, transparent );
}


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

.la-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    animation: laGlowFloat 8s ease-in-out infinite;
}


.la-glow-1 {
    width: 400px;
    height: 400px;
    left: -220px;
    top: 20%;
    background: rgba(20,112,255,.14);
}


.la-glow-2 {
    width: 360px;
    height: 360px;
    right: -160px;
    top: 10%;
    background: rgba(120,50,255,.13);
    animation-delay: 2s;
}


.la-glow-3 {
    width: 280px;
    height: 280px;
    left: 45%;
    bottom: -150px;
    background: rgba(236,72,153,.08);
    animation-delay: 4s;
}


@keyframes laGlowFloat {

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

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


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

.la-particles span {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #3ca1ff;
    box-shadow: 0 0 10px #3ca1ff;
    animation: laParticle 5s ease-in-out infinite;
}


    .la-particles span:nth-child(1) {
        left: 7%;
        top: 18%;
    }

    .la-particles span:nth-child(2) {
        left: 25%;
        top: 8%;
        animation-delay: 1s;
    }

    .la-particles span:nth-child(3) {
        left: 46%;
        top: 17%;
        background: #9d5cff;
    }

    .la-particles span:nth-child(4) {
        left: 72%;
        top: 12%;
        background: #ff3673;
    }

    .la-particles span:nth-child(5) {
        right: 8%;
        top: 45%;
    }

    .la-particles span:nth-child(6) {
        left: 12%;
        bottom: 17%;
        background: #8b5cf6;
    }

    .la-particles span:nth-child(7) {
        left: 55%;
        bottom: 10%;
    }

    .la-particles span:nth-child(8) {
        right: 20%;
        bottom: 20%;
        background: #ff3673;
    }


@keyframes laParticle {

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

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


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

.la-container {
    position: relative;
    z-index: 5;
    max-width: 1450px;
    margin: auto;
    display: grid;
    grid-template-columns: minmax(500px, 1fr) minmax(500px, 1fr);
    gap: 80px;
    align-items: center;
}


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

.la-visual {
    position: relative;
    min-height: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
    transform-style: preserve-3d;
}


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

.la-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    border: 1px solid rgba(46,144,255,.25);
    transform: translate(-50%,-50%) rotateX(68deg);
    pointer-events: none;
}


.orbit-1 {
    width: 550px;
    height: 220px;
    animation: laOrbit 15s linear infinite;
}


.orbit-2 {
    width: 650px;
    height: 290px;
    border-color: rgba(139,92,246,.18);
    animation: laOrbitReverse 21s linear infinite;
}


.orbit-3 {
    width: 750px;
    height: 350px;
    border-color: rgba(236,72,153,.12);
    animation: laOrbit 28s linear infinite;
}


@keyframes laOrbit {

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

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


@keyframes laOrbitReverse {

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

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


/* =========================================================
   IMAGE WRAPPER
========================================================= */

.la-image-wrapper {
    position: relative;
    width: min(560px, 100%);
    aspect-ratio: 1 / .92;
    border-radius: 35px;
    padding: 9px;
    background: linear-gradient( 135deg, #168bff, #5a68ff, #8b4cff, #ec3d87 );
    box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 60px rgba(30,130,255,.18);
    transform: perspective(1200px) rotateY(3deg) rotateX(2deg) translateZ(20px);
    transform-style: preserve-3d;
    transition: transform .5s ease;
    z-index: 3;
}


    .la-image-wrapper:hover {
        transform: perspective(1200px) rotateY(-3deg) rotateX(3deg) translateY(-8px) translateZ(30px);
    }


/* Image border */

.la-image-border {
    position: absolute;
    inset: -2px;
    border-radius: 37px;
    border: 1px solid rgba(92,183,255,.7);
    box-shadow: 0 0 20px rgba(36,144,255,.6), 0 0 50px rgba(36,144,255,.2);
    pointer-events: none;
    z-index: 5;
    animation: imageBorderGlow 3s ease-in-out infinite;
}


@keyframes imageBorderGlow {

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

    50% {
        opacity: 1;
    }
}


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

.la-main-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 28px;
    filter: saturate(1.08) contrast(1.03);
    transition: transform .7s ease, filter .5s ease;
}


.la-image-wrapper:hover
.la-main-image {
    transform: scale(1.035);
    filter: saturate(1.15) contrast(1.05);
}


/* Overlay */

.la-image-overlay {
    position: absolute;
    inset: 9px;
    border-radius: 28px;
    background: linear-gradient( 180deg, rgba(2,8,23,.02), rgba(2,8,23,.04) 50%, rgba(2,8,23,.55) );
    pointer-events: none;
    z-index: 2;
}


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

.la-practical-badge {
    position: absolute;
    top: -42px;
    left: -35px;
    min-width: 245px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 16px;
    background: rgba(6,20,47,.85);
    border: 1px solid rgba(85,158,255,.5);
    backdrop-filter: blur(16px);
    box-shadow: 0 15px 40px rgba(0,0,0,.4), 0 0 30px rgba(36,140,255,.13);
    transform: translateZ(60px);
    z-index: 8;
    animation: badgeFloat 4s ease-in-out infinite;
}


@keyframes badgeFloat {

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

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


.la-status-dot {
    flex-shrink: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #ff315e;
    box-shadow: 0 0 10px #ff315e, 0 0 22px rgba(255,49,94,.8);
    animation: laStatusPulse 1.7s infinite;
}


@keyframes laStatusPulse {

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

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


.la-practical-badge strong {
    display: block;
    font-size: 13px;
    letter-spacing: 2px;
    color: #fff;
}


.la-practical-badge small {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    color: #91a7c6;
}


/* =========================================================
   CENTER IMAGE ICON
========================================================= */

.la-image-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) translateZ(50px);
    z-index: 5;
}


.la-play-ring {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(3,15,37,.65);
    border: 2px solid rgba(113,188,255,.8);
    box-shadow: 0 0 25px rgba(48,151,255,.65), inset 0 0 20px rgba(48,151,255,.15);
    backdrop-filter: blur(10px);
    animation: playPulse 2.5s ease-in-out infinite;
}


    .la-play-ring i {
        font-size: 28px;
        color: #fff;
        filter: drop-shadow( 0 0 10px #3fa6ff );
    }


@keyframes playPulse {

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

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


/* =========================================================
   IMAGE CAPTION
========================================================= */

.la-image-caption {
    position: absolute;
    left: 28px;
    bottom: 28px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-radius: 14px;
    background: rgba(4,15,36,.78);
    border: 1px solid rgba(103,160,230,.35);
    backdrop-filter: blur(12px);
    z-index: 6;
}


.la-caption-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37,140,255,.2);
    color: #4da8ff;
}


.la-image-caption strong {
    display: block;
    font-size: 12px;
    color: #fff;
}


.la-image-caption span {
    display: block;
    margin-top: 3px;
    font-size: 9px;
    color: #91a5c0;
}


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

.la-float-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 17px;
    border-radius: 15px;
    background: rgba(7,21,48,.84);
    border: 1px solid rgba(87,151,231,.35);
    backdrop-filter: blur(15px);
    box-shadow: 0 18px 45px rgba(0,0,0,.38);
    z-index: 10;
    white-space: nowrap;
    transform: translateZ(80px);
    transition: transform .35s ease;
}


    .la-float-card:hover {
        transform: translateZ(100px) translateY(-7px) rotateX(5deg);
    }


.la-project-card {
    left: -55px;
    bottom: 7px;
    animation: floatProject 4.5s ease-in-out infinite;
}


.la-guided-card {
    right: -45px;
    bottom: 35px;
    animation: floatGuided 5s ease-in-out infinite;
}


@keyframes floatProject {

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

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


@keyframes floatGuided {

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

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


.la-float-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}


    .la-float-icon.blue {
        color: #42a7ff;
        background: rgba(40,140,255,.18);
        box-shadow: 0 0 18px rgba(40,140,255,.15);
    }


    .la-float-icon.green {
        color: #3ee58a;
        background: rgba(34,197,94,.14);
        box-shadow: 0 0 18px rgba(34,197,94,.13);
    }


.la-float-card strong {
    display: block;
    color: #fff;
    font-size: 12px;
}


.la-float-card span {
    display: block;
    color: #8398b6;
    font-size: 9px;
    margin-top: 3px;
}


/* =========================================================
   CODE CUBE
========================================================= */

.la-code-cube {
    position: absolute;
    right: 2px;
    top: 4px;
    width: 68px;
    height: 68px;
    z-index: 11;
    transform-style: preserve-3d;
    animation: codeCubeFloat 5s ease-in-out infinite;
}


.cube-face {
    width: 100%;
    height: 100%;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( 145deg, #5141e8, #1c58d8 );
    border: 1px solid rgba(147,183,255,.55);
    box-shadow: 0 20px 40px rgba(0,0,0,.35), 0 0 25px rgba(85,83,255,.3);
    transform: rotate(-8deg) perspective(500px) rotateY(-12deg);
}


    .cube-face i {
        color: #fff;
        font-size: 27px;
        filter: drop-shadow( 0 0 9px rgba(255,255,255,.6) );
    }


@keyframes codeCubeFloat {

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

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


/* Graduation cap */

.la-floating-cap {
    position: absolute;
    right: -70px;
    top: 190px;
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient( 145deg, #522dca, #a43ff0 );
    box-shadow: 0 20px 40px rgba(0,0,0,.35), 0 0 25px rgba(145,71,255,.3);
    color: #fff;
    font-size: 26px;
    transform: rotate(10deg);
    animation: capFloat 4s ease-in-out infinite;
    z-index: 9;
}


@keyframes capFloat {

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

    50% {
        transform: rotate(3deg) translateY(-10px);
    }
}


/* =========================================================
   SPHERES
========================================================= */

.la-sphere {
    position: absolute;
    border-radius: 50%;
    z-index: 9;
    animation: sphereFloat 4s ease-in-out infinite;
}


.sphere-1 {
    width: 17px;
    height: 17px;
    right: 7%;
    bottom: 18%;
    background: #3fa8ff;
    box-shadow: 0 0 18px #3fa8ff;
}


.sphere-2 {
    width: 12px;
    height: 12px;
    left: 5%;
    top: 33%;
    background: #ff3c76;
    box-shadow: 0 0 15px #ff3c76;
    animation-delay: 1s;
}


.sphere-3 {
    width: 10px;
    height: 10px;
    right: 18%;
    top: 15%;
    background: #a855f7;
    box-shadow: 0 0 15px #a855f7;
    animation-delay: 2s;
}


@keyframes sphereFloat {

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

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


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

.la-content {
    position: relative;
    z-index: 5;
}


/* Section badge */

.la-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 11px 21px;
    border-radius: 50px;
    background: rgba(26,73,145,.25);
    border: 1px solid rgba(65,141,255,.42);
    color: #d7e6ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 4px;
    box-shadow: 0 0 25px rgba(40,130,255,.08);
}


    .la-section-badge span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ff315f;
        box-shadow: 0 0 10px #ff315f;
        animation: badgePulse 1.8s infinite;
    }


@keyframes badgePulse {

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

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


/* Heading */

.la-title {
    margin: 25px 0 12px;
    font-size: clamp(45px, 4.8vw, 70px);
    line-height: .98;
    letter-spacing: -3px;
    font-weight: 850;
    color: #fff;
}


    .la-title span {
        display: block;
        background: linear-gradient( 90deg, #1595ff, #7459ff, #e53bc0 );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }


.la-subtitle {
    margin: 0 0 15px;
    color: #d7e2f4;
    font-size: 22px;
    font-weight: 600;
}


.la-description {
    max-width: 650px;
    margin: 0 0 28px;
    color: #8fa3bf;
    font-size: 15px;
    line-height: 1.75;
}


/* =========================================================
   STEPS
========================================================= */

.la-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 25px;
}


.la-step {
    position: relative;
    min-height: 195px;
    padding: 18px;
    border-radius: 22px;
    background: linear-gradient( 145deg, rgba(17,55,105,.68), rgba(5,18,43,.82) );
    border: 1px solid rgba(57,143,255,.4);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 20px 40px rgba(0,0,0,.25);
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease;
    opacity: 0;
    transform: translateY(30px);
}


    .la-step.la-visible {
        opacity: 1;
        transform: translateY(0);
    }


    .la-step:hover {
        transform: translateY(-9px) perspective(800px) rotateX(4deg) rotateY(-4deg);
        border-color: rgba(65,161,255,.8);
        box-shadow: 0 30px 60px rgba(0,0,0,.35), 0 0 30px rgba(35,130,255,.12);
    }


    /* Purple */

    .la-step.step-purple {
        border-color: rgba(139,92,246,.4);
        background: linear-gradient( 145deg, rgba(70,43,142,.5), rgba(14,10,45,.82) );
    }


    /* Pink */

    .la-step.step-pink {
        border-color: rgba(236,72,153,.38);
        background: linear-gradient( 145deg, rgba(113,37,87,.48), rgba(35,8,30,.82) );
    }


/* Step number */

.la-step-number {
    position: absolute;
    right: 14px;
    top: 9px;
    font-size: 42px;
    line-height: 1;
    font-weight: 900;
    color: rgba(76,145,255,.15);
}


.step-purple .la-step-number {
    color: rgba(164,124,255,.14);
}


.step-pink .la-step-number {
    color: rgba(255,92,158,.14);
}


/* Step icon */

.la-step-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(37,140,255,.18);
    border: 1px solid rgba(67,157,255,.5);
    color: #56b2ff;
    font-size: 22px;
    box-shadow: 0 10px 25px rgba(38,137,255,.12);
    transform: translateZ(30px);
    transition: transform .4s ease;
}


.la-step:hover .la-step-icon {
    transform: translateZ(50px) scale(1.1) rotate(-5deg);
}


.step-purple .la-step-icon {
    color: #b18cff;
    background: rgba(139,92,246,.17);
    border-color: rgba(157,115,255,.5);
}


.step-pink .la-step-icon {
    color: #ff6ea5;
    background: rgba(236,72,153,.16);
    border-color: rgba(255,99,166,.5);
}


/* Step content */

.la-step-content {
    position: relative;
    z-index: 2;
    margin-top: 17px;
}


    .la-step-content h4 {
        margin: 0 0 7px;
        color: #fff;
        font-size: 18px;
        font-weight: 800;
    }


    .la-step-content p {
        margin: 0;
        color: #8fa2be;
        font-size: 11px;
        line-height: 1.55;
    }


/* Arrow */

.la-step-arrow {
    position: absolute;
    right: 15px;
    bottom: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(35,137,255,.16);
    border: 1px solid rgba(77,161,255,.3);
    color: #d9ecff;
    font-size: 11px;
    transition: transform .3s ease;
}


.la-step:hover .la-step-arrow {
    transform: translateX(5px);
}


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

.la-code-window {
    position: relative;
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    background: #061126;
    border: 1px solid rgba(76,145,225,.38);
    box-shadow: 0 25px 60px rgba(0,0,0,.4), 0 0 30px rgba(37,126,255,.08);
    transform: perspective(1000px) rotateX(2deg);
    transition: transform .4s ease;
}


    .la-code-window:hover {
        transform: perspective(1000px) rotateX(0deg) translateY(-4px);
    }


/* Code header */

.la-code-header {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 0 13px;
    background: #091a35;
    border-bottom: 1px solid rgba(88,143,207,.18);
    gap: 15px;
}


.la-window-dots {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}


    .la-window-dots span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ff315c;
    }


        .la-window-dots span:nth-child(2) {
            background: #fbbf24;
        }


        .la-window-dots span:nth-child(3) {
            background: #22c55e;
        }


/* Tabs */

.la-code-tabs {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: 1;
    overflow: hidden;
}


    .la-code-tabs span {
        padding: 8px 12px;
        font-size: 9px;
        color: #687c9a;
        white-space: nowrap;
    }


        .la-code-tabs span.active {
            color: #dceaff;
            background: rgba(44,108,190,.18);
            border-radius: 6px 6px 0 0;
        }


/* Run */

.la-run-button {
    border: none;
    padding: 8px 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient( 135deg, #168eff, #4562ff );
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    box-shadow: 0 7px 20px rgba(36,128,255,.25);
    cursor: pointer;
    transition: transform .25s ease;
}


    .la-run-button:hover {
        transform: translateY(-2px);
    }


/* Code body */

.la-code-body {
    display: flex;
    min-height: 160px;
    padding: 15px 0;
    background: linear-gradient( 180deg, #061126, #040c1c );
}


.la-line-numbers {
    width: 42px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 12px;
    color: #344966;
    font-family: Consolas, monospace;
    font-size: 10px;
    line-height: 21px;
}


.la-code-text {
    font-family: Consolas, "Courier New", monospace;
    font-size: 10px;
    line-height: 21px;
    color: #c7d7ee;
    white-space: nowrap;
}


.code-comment {
    color: #58718f;
}


.code-purple {
    color: #c084fc;
}


.code-blue {
    color: #38bdf8;
}


.code-green {
    color: #4ade80;
}


.code-yellow {
    color: #facc15;
}


.code-pink {
    color: #fb7185;
}


.code-indent {
    padding-left: 20px;
}


.code-cursor {
    color: #4da8ff;
    animation: codeCursor 1s infinite;
}


@keyframes codeCursor {

    0%, 45% {
        opacity: 1;
    }

    46%, 100% {
        opacity: 0;
    }
}


/* Code status */

.la-code-status {
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    background: #07162d;
    border-top: 1px solid rgba(86,140,205,.12);
    color: #7890af;
    font-size: 9px;
}


    .la-code-status span {
        display: flex;
        align-items: center;
        gap: 7px;
    }


    .la-code-status i {
        color: #22c55e;
        font-size: 6px;
        text-shadow: 0 0 8px #22c55e;
    }


.la-status-right {
    color: #42a7ff;
    letter-spacing: 2px;
}


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

@media (max-width: 1200px) {

    .learning-action {
        padding-left: 4%;
        padding-right: 4%;
    }


    .la-container {
        grid-template-columns: minmax(450px,1fr) minmax(450px,1fr);
        gap: 45px;
    }


    .la-visual {
        min-height: 570px;
    }


    .la-image-wrapper {
        width: 500px;
    }


    .la-float-card {
        transform: scale(.9);
    }


    .la-project-card {
        left: -20px;
    }


    .la-guided-card {
        right: -20px;
    }


    .la-floating-cap {
        right: 0;
    }


    .la-code-cube {
        right: 25px;
    }
}


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

@media (max-width: 1000px) {

    .la-container {
        grid-template-columns: 1fr;
        max-width: 800px;
        gap: 70px;
    }


    .la-visual {
        min-height: 590px;
        max-width: 700px;
        width: 100%;
        margin: auto;
    }


    .la-image-wrapper {
        width: min(600px, 90%);
        margin: auto;
    }


    .la-content {
        width: 100%;
    }


    .la-title {
        font-size: clamp(45px,7vw,65px);
    }


    .la-description {
        max-width: 700px;
    }


    .la-steps {
        max-width: 800px;
    }
}


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

@media (max-width: 768px) {

    .learning-action {
        padding: 80px 18px 75px;
    }


    .la-grid {
        background-size: 35px 35px;
        transform: perspective(700px) rotateX(58deg) scale(2) translateY(100px);
    }


    .la-container {
        gap: 55px;
    }


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


    .la-orbit {
        opacity: .5;
    }


    .orbit-1 {
        width: 430px;
        height: 180px;
    }


    .orbit-2 {
        width: 500px;
        height: 230px;
    }


    .orbit-3 {
        width: 570px;
        height: 270px;
    }


    .la-image-wrapper {
        width: 88%;
        border-radius: 27px;
        padding: 7px;
    }


    .la-main-image {
        border-radius: 21px;
    }


    .la-image-border {
        border-radius: 29px;
    }


    .la-practical-badge {
        top: 25px;
        left: -12px;
        min-width: 210px;
        padding: 11px 14px;
    }


        .la-practical-badge strong {
            font-size: 10px;
        }


        .la-practical-badge small {
            font-size: 8px;
        }


    .la-play-ring {
        width: 65px;
        height: 65px;
    }


        .la-play-ring i {
            font-size: 21px;
        }


    .la-image-caption {
        left: 18px;
        bottom: 18px;
        padding: 9px 12px;
    }


    .la-caption-icon {
        width: 34px;
        height: 34px;
    }


    .la-image-caption strong {
        font-size: 10px;
    }


    .la-image-caption span {
        font-size: 8px;
    }


    .la-project-card {
        left: 0;
        bottom: 50px;
        transform: scale(.85);
    }


    .la-guided-card {
        right: 0;
        bottom: 5px;
        transform: scale(.85);
    }


    .la-code-cube {
        right: 5%;
        top: 25px;
        transform: scale(.75);
    }


    .la-floating-cap {
        right: 1%;
        top: 140px;
        transform: scale(.75) rotate(10deg);
    }


    .la-title {
        font-size: clamp(40px,9vw,58px);
        letter-spacing: -2px;
    }


    .la-subtitle {
        font-size: 19px;
    }


    .la-description {
        font-size: 14px;
    }


    .la-steps {
        grid-template-columns: repeat(3,1fr);
        gap: 10px;
    }


    .la-step {
        min-height: 180px;
        padding: 15px;
        border-radius: 18px;
    }


    .la-step-icon {
        width: 47px;
        height: 47px;
        border-radius: 13px;
        font-size: 18px;
    }


    .la-step-content {
        margin-top: 13px;
    }


        .la-step-content h4 {
            font-size: 15px;
        }


        .la-step-content p {
            font-size: 10px;
        }


    .la-step-number {
        font-size: 32px;
    }
}


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

@media (max-width: 600px) {

    .learning-action {
        padding: 70px 15px 65px;
    }


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


    .la-orbit {
        display: none;
    }


    .la-image-wrapper {
        width: 94%;
        aspect-ratio: 1 / .92;
    }


    .la-practical-badge {
        left: -5px;
        top: 18px;
        min-width: 190px;
    }


    .la-project-card {
        left: -5px;
        bottom: 25px;
        transform: scale(.72);
    }


    .la-guided-card {
        right: -5px;
        bottom: -5px;
        transform: scale(.72);
    }


    .la-code-cube {
        right: 0;
        top: -33px;
        transform: scale(.6);
    }


    .la-floating-cap {
        display: none;
    }


    .la-sphere {
        display: none;
    }


    .la-section-badge {
        padding: 9px 15px;
        font-size: 9px;
        letter-spacing: 2.5px;
    }


    .la-title {
        margin-top: 20px;
        font-size: clamp(38px,10vw,52px);
        line-height: 1;
    }


    .la-subtitle {
        font-size: 17px;
        line-height: 1.4;
    }


    .la-description {
        font-size: 13px;
        line-height: 1.65;
    }


    .la-steps {
        grid-template-columns: 1fr;
        gap: 12px;
    }


    .la-step {
        min-height: 105px;
        display: grid;
        grid-template-columns: 55px 1fr 35px;
        align-items: center;
        gap: 12px;
        padding: 15px;
    }


    .la-step-icon {
        width: 50px;
        height: 50px;
    }


    .la-step-content {
        margin: 0;
    }


        .la-step-content h4 {
            margin-bottom: 4px;
            font-size: 16px;
        }


        .la-step-content p {
            font-size: 11px;
            line-height: 1.5;
            max-width: 300px;
        }


    .la-step-arrow {
        position: relative;
        right: auto;
        bottom: auto;
        width: 32px;
        height: 32px;
    }


    .la-step-number {
        right: 12px;
        top: 5px;
        font-size: 27px;
    }


    .la-code-header {
        gap: 8px;
    }


    .la-code-tabs span {
        padding: 7px 8px;
        font-size: 8px;
    }


    .la-run-button {
        padding: 7px 9px;
        font-size: 8px;
    }


    .la-code-body {
        min-height: 145px;
        overflow: hidden;
    }


    .la-code-text {
        font-size: 8px;
        line-height: 20px;
    }


    .la-line-numbers {
        width: 34px;
        padding-right: 8px;
        font-size: 8px;
        line-height: 20px;
    }


    .la-code-status {
        font-size: 8px;
    }
}


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

@media (max-width: 480px) {

    .la-visual {
        min-height: 350px;
    }


    .la-image-wrapper {
        width: 96%;
        border-radius: 22px;
    }


    .la-main-image {
        border-radius: 16px;
    }


    .la-image-border {
        border-radius: 24px;
    }


    .la-practical-badge {
        min-width: auto;
        width: 175px;
        padding: 9px 11px;
        gap: 8px;
    }


    .la-status-dot {
        width: 8px;
        height: 8px;
    }


    .la-practical-badge strong {
        font-size: 8px;
        letter-spacing: 1.2px;
    }


    .la-practical-badge small {
        font-size: 7px;
    }


    .la-play-ring {
        width: 54px;
        height: 54px;
    }


        .la-play-ring i {
            font-size: 17px;
        }


    .la-image-caption {
        left: 12px;
        bottom: 12px;
        padding: 7px 9px;
        gap: 7px;
    }


    .la-caption-icon {
        width: 29px;
        height: 29px;
        font-size: 12px;
    }


    .la-image-caption strong {
        font-size: 8px;
    }


    .la-image-caption span {
        font-size: 6.5px;
    }


    .la-project-card,
    .la-guided-card {
        transform: scale(.62);
    }


    .la-project-card {
        left: -22px;
        bottom: 15px;
    }


    .la-guided-card {
        right: -22px;
        bottom: -10px;
    }


    .la-title {
        font-size: 37px;
    }


    .la-subtitle {
        font-size: 16px;
    }


    .la-description {
        font-size: 12px;
    }


    .la-step {
        grid-template-columns: 45px 1fr 30px;
        gap: 10px;
        padding: 13px;
    }


    .la-step-icon {
        width: 44px;
        height: 44px;
        font-size: 17px;
    }


    .la-step-content h4 {
        font-size: 14px;
    }


    .la-step-content p {
        font-size: 10px;
    }


    .la-code-tabs span {
        display: none;
    }


        .la-code-tabs span.active {
            display: block;
        }


    .la-code-text {
        font-size: 7px;
    }


    .la-code-status {
        padding: 0 8px;
        font-size: 7px;
    }
}


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

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

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







/* =========================================================
   CLASSES OF IT — OUR VISION
   3D FUTURISTIC SECTION
========================================================= */

.vision-future {
    --vf-blue: #167cff;
    --vf-blue-light: #42baff;
    --vf-purple: #7047ff;
    --vf-purple-light: #a06bff;
    --vf-pink: #ec3c91;
    --vf-dark: #0b1736;
    --vf-text: #34415f;
    position: relative;
    width: 100%;
    min-height: 900px;
    padding: 30px 30px 0px;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient( circle at 50% 42%, rgba(54, 137, 255, 0.16), transparent 28% ), radial-gradient( circle at 5% 65%, rgba(40, 121, 255, 0.12), transparent 28% ), radial-gradient( circle at 95% 65%, rgba(121, 66, 255, 0.12), transparent 28% ), linear-gradient( 180deg, #fbfdff 0%, #f5f9ff 48%, #edf4ff 100% );
    perspective: 1800px;
}


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

.vf-grid {
    position: absolute;
    inset: 0;
    z-index: -6;
    background-image: linear-gradient( rgba(22, 124, 255, 0.055) 1px, transparent 1px ), linear-gradient( 90deg, rgba(22, 124, 255, 0.055) 1px, transparent 1px );
    background-size: 55px 55px;
    mask-image: linear-gradient( to bottom, transparent, black 15%, black 80%, transparent );
    animation: vfGridMove 18s linear infinite;
}

@keyframes vfGridMove {
    from {
        transform: translate3d(0, 0, 0);
    }

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


/* =========================================================
   3D DEPTH FLOOR
========================================================= */

.vf-depth-grid {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -24%;
    height: 62%;
    z-index: -5;
    transform: perspective(700px) rotateX(67deg);
    transform-origin: center bottom;
    background-image: linear-gradient( rgba(22, 124, 255, 0.11) 1px, transparent 1px ), linear-gradient( 90deg, rgba(22, 124, 255, 0.11) 1px, transparent 1px );
    background-size: 65px 65px;
    opacity: 0.55;
    mask-image: linear-gradient( to top, black, transparent 90% );
    animation: vfFloorMove 12s linear infinite;
}

@keyframes vfFloorMove {

    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 65px;
    }
}


/* =========================================================
   GLOW EFFECTS
========================================================= */

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

.vf-glow-blue {
    width: 330px;
    height: 330px;
    left: -100px;
    top: 30%;
    background: rgba(22, 124, 255, 0.20);
    animation: vfGlowFloat 7s ease-in-out infinite;
}

.vf-glow-purple {
    width: 360px;
    height: 360px;
    right: -120px;
    top: 42%;
    background: rgba(112, 71, 255, 0.18);
    animation: vfGlowFloat 9s ease-in-out infinite reverse;
}

.vf-glow-pink {
    width: 250px;
    height: 250px;
    left: 43%;
    top: 15%;
    background: rgba(236, 60, 145, 0.09);
    animation: vfGlowPulse 6s ease-in-out infinite;
}

@keyframes vfGlowFloat {

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

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

@keyframes vfGlowPulse {

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

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


/* =========================================================
   3D RINGS
========================================================= */

.vf-ring {
    position: absolute;
    border: 1px solid rgba(22, 124, 255, 0.13);
    border-radius: 50%;
    pointer-events: none;
    z-index: -3;
    transform-style: preserve-3d;
}

.vf-ring-one {
    width: 430px;
    height: 430px;
    left: -170px;
    top: 5%;
    transform: rotateX(67deg) rotateZ(-18deg);
    animation: vfRingRotate 18s linear infinite;
}

.vf-ring-two {
    width: 300px;
    height: 300px;
    right: -90px;
    top: 12%;
    border-color: rgba(112, 71, 255, 0.15);
    transform: rotateY(68deg) rotateZ(20deg);
    animation: vfRingRotateReverse 15s linear infinite;
}

.vf-ring-three {
    width: 210px;
    height: 210px;
    left: 50%;
    bottom: 3%;
    border-color: rgba(236, 60, 145, 0.11);
    transform: translateX(-50%) rotateX(65deg);
    animation: vfRingPulse 6s ease-in-out infinite;
}

@keyframes vfRingRotate {

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

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

@keyframes vfRingRotateReverse {

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

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

@keyframes vfRingPulse {

    0%, 100% {
        opacity: 0.2;
        transform: translateX(-50%) rotateX(65deg) scale(0.85);
    }

    50% {
        opacity: 0.7;
        transform: translateX(-50%) rotateX(65deg) scale(1.12);
    }
}


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

.vf-particles {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
}

    .vf-particles span {
        position: absolute;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--vf-blue-light);
        box-shadow: 0 0 10px rgba(66, 186, 255, 0.7), 0 0 22px rgba(66, 186, 255, 0.3);
        animation: vfParticleFloat 7s ease-in-out infinite;
    }

        .vf-particles span:nth-child(1) {
            left: 7%;
            top: 22%;
        }

        .vf-particles span:nth-child(2) {
            left: 16%;
            top: 68%;
            animation-delay: -2s;
        }

        .vf-particles span:nth-child(3) {
            left: 28%;
            top: 18%;
            animation-delay: -4s;
        }

        .vf-particles span:nth-child(4) {
            left: 37%;
            top: 75%;
            animation-delay: -1s;
        }

        .vf-particles span:nth-child(5) {
            left: 48%;
            top: 12%;
            animation-delay: -5s;
        }

        .vf-particles span:nth-child(6) {
            left: 58%;
            top: 68%;
            animation-delay: -3s;
        }

        .vf-particles span:nth-child(7) {
            left: 67%;
            top: 24%;
            animation-delay: -6s;
        }

        .vf-particles span:nth-child(8) {
            left: 77%;
            top: 72%;
            animation-delay: -2s;
        }

        .vf-particles span:nth-child(9) {
            left: 87%;
            top: 18%;
            animation-delay: -4s;
        }

        .vf-particles span:nth-child(10) {
            left: 92%;
            top: 58%;
            animation-delay: -1s;
        }

        .vf-particles span:nth-child(11) {
            left: 4%;
            top: 48%;
            animation-delay: -5s;
        }

        .vf-particles span:nth-child(12) {
            left: 72%;
            top: 48%;
            animation-delay: -3s;
        }

@keyframes vfParticleFloat {

    0%, 100% {
        transform: translate3d(0, 0, 0) scale(0.7);
        opacity: 0.25;
    }

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


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

.vf-container {
    position: relative;
    width: min(1280px, 100%);
    margin: 0 auto;
    z-index: 2;
}


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

.vf-header {
    position: relative;
    max-width: 850px;
    margin: 0 auto 80px;
    text-align: center;
    z-index: 5;
}


/* BADGE */

.vf-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 19px;
    border: 1px solid rgba(22, 124, 255, 0.15);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 10px 35px rgba(22, 124, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    color: var(--vf-blue);
    font-family: "Outfit", sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.vf-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vf-blue);
    box-shadow: 0 0 0 5px rgba(22, 124, 255, 0.09), 0 0 16px rgba(22, 124, 255, 0.6);
    animation: vfDotPulse 2s infinite;
}

@keyframes vfDotPulse {

    0%, 100% {
        box-shadow: 0 0 0 4px rgba(22, 124, 255, 0.08), 0 0 12px rgba(22, 124, 255, 0.5);
    }

    50% {
        box-shadow: 0 0 0 9px rgba(22, 124, 255, 0.02), 0 0 22px rgba(22, 124, 255, 0.8);
    }
}


/* TITLE */

.vf-title {
    margin: 25px 0 20px;
    font-family: "Outfit", sans-serif;
    font-size: clamp(42px, 5vw, 70px);
    line-height: 1.03;
    letter-spacing: -2.5px;
    color: var(--vf-dark);
    font-weight: 700;
}

    .vf-title span {
        display: block;
    }

    .vf-title strong {
        display: block;
        margin-top: 5px;
        font-weight: 800;
        background: linear-gradient( 90deg, #167cff 0%, #7047ff 48%, #ec3c91 100% );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        background-size: 200% auto;
        animation: vfTitleGradient 6s linear infinite;
    }

@keyframes vfTitleGradient {

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

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


/* DESCRIPTION */

.vf-description {
    max-width: 760px;
    margin: 0 auto;
    color: #52617d;
    font-family: "Nunito", sans-serif;
    font-size: 17px;
    line-height: 1.85;
    font-weight: 500;
}


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

.vf-journey {
    position: relative;
    min-height: 480px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 34px;
    padding: 25px 20px 55px;
    transform-style: preserve-3d;
}


/* =========================================================
   SIDE STRUCTURES
========================================================= */

.vf-side-structure {
    position: absolute;
    top: 50%;
    width: 95px;
    height: 210px;
    transform: translateY(-50%);
    opacity: 0.55;
    pointer-events: none;
}

.vf-structure-left {
    left: -25px;
}

.vf-structure-right {
    right: -25px;
}

.vf-side-structure div {
    position: absolute;
    width: 100%;
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(22, 124, 255, 0.3), transparent );
    transform: rotate(-28deg);
    animation: vfStructurePulse 4s ease-in-out infinite;
}

    .vf-side-structure div:nth-child(1) {
        top: 20px;
    }

    .vf-side-structure div:nth-child(2) {
        top: 70px;
        animation-delay: -1s;
    }

    .vf-side-structure div:nth-child(3) {
        top: 120px;
        animation-delay: -2s;
    }

    .vf-side-structure div:nth-child(4) {
        top: 170px;
        animation-delay: -3s;
    }

.vf-structure-right div {
    transform: rotate(28deg);
}

@keyframes vfStructurePulse {

    0%, 100% {
        opacity: 0.25;
        transform: scaleX(0.75) rotate(-28deg);
    }

    50% {
        opacity: 1;
        transform: scaleX(1) rotate(-28deg);
    }
}


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

.vf-step {
    position: relative;
    min-width: 0;
    z-index: 5;
    opacity: 0;
    transform: translateY(45px) translateZ(0) scale(0.94);
    transition: opacity 0.8s ease, transform 0.9s cubic-bezier(.16, 1, .3, 1);
}

    .vf-step.vf-visible {
        opacity: 1;
        transform: translateY(0) translateZ(40px) scale(1);
    }

.vf-step-1 {
    transition-delay: 0.05s;
}

.vf-step-2 {
    transition-delay: 0.18s;
}

.vf-step-3 {
    transition-delay: 0.31s;
}


/* =========================================================
   3D PLATFORM
========================================================= */

.vf-step-platform {
    position: absolute;
    left: 50%;
    bottom: -28px;
    width: 86%;
    height: 40px;
    transform: translateX(-50%) perspective(400px) rotateX(62deg);
    border-radius: 50%;
    background: radial-gradient( ellipse, rgba(22, 124, 255, 0.24), rgba(22, 124, 255, 0.05) 55%, transparent 72% );
    filter: blur(1px);
    z-index: -1;
}

    .vf-step-platform::before {
        content: "";
        position: absolute;
        inset: 7px 15%;
        border-radius: 50%;
        border: 1px solid rgba(22, 124, 255, 0.25);
        box-shadow: 0 0 25px rgba(22, 124, 255, 0.18);
    }

.vf-platform-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50%;
    height: 12px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(22, 124, 255, 0.42);
    filter: blur(13px);
    animation: vfPlatformPulse 2.5s ease-in-out infinite;
}

@keyframes vfPlatformPulse {

    0%, 100% {
        opacity: 0.4;
        transform: translate(-50%, -50%) scaleX(0.75);
    }

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


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

.vf-step-card {
    position: relative;
    min-height: 355px;
    padding: 32px 30px 28px;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.94), rgba(244, 248, 255, 0.79) );
    box-shadow: 0 30px 60px rgba(34, 75, 135, 0.13), 0 12px 25px rgba(22, 124, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(22px);
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(.16, 1, .3, 1), box-shadow 0.55s ease, border-color 0.55s ease;
}


    /* 3D EXTRUSION */

    .vf-step-card::before {
        content: "";
        position: absolute;
        inset: 10px -9px -12px 9px;
        z-index: -2;
        border-radius: 30px;
        background: linear-gradient( 135deg, rgba(22, 124, 255, 0.14), rgba(112, 71, 255, 0.07) );
        transform: translateZ(-35px) rotateX(2deg);
        filter: blur(1px);
    }


    /* CARD SHADOW DEPTH */

    .vf-step-card::after {
        content: "";
        position: absolute;
        left: 12%;
        right: 12%;
        bottom: -32px;
        height: 45px;
        border-radius: 50%;
        background: rgba(22, 91, 190, 0.16);
        filter: blur(18px);
        z-index: -3;
    }


    /* CARD HOVER */

    .vf-step-card:hover {
        transform: translateY(-16px) translateZ(35px) rotateX(2deg) rotateY(-2deg);
        border-color: rgba(22, 124, 255, 0.3);
        box-shadow: 0 45px 85px rgba(34, 75, 135, 0.18), 0 20px 35px rgba(22, 124, 255, 0.12), inset 0 1px 0 #ffffff;
    }


/* =========================================================
   CARD SHINE
========================================================= */

.vf-card-shine {
    position: absolute;
    top: -80%;
    left: -45%;
    width: 35%;
    height: 220%;
    background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.72), transparent );
    transform: rotate(25deg);
    pointer-events: none;
    opacity: 0;
    transition: left 0.8s ease, opacity 0.4s ease;
}

.vf-step-card:hover .vf-card-shine {
    left: 120%;
    opacity: 1;
}


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

.vf-card-top-line {
    position: absolute;
    top: 0;
    left: 15%;
    width: 70%;
    height: 2px;
    border-radius: 50%;
    background: linear-gradient( 90deg, transparent, var(--vf-blue-light), var(--vf-purple), transparent );
    opacity: 0.65;
    box-shadow: 0 0 15px rgba(22, 124, 255, 0.4);
}


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

.vf-step-icon {
    position: relative;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    border-radius: 22px;
    color: #ffffff;
    background: linear-gradient( 135deg, #167cff, #7047ff );
    box-shadow: 0 18px 30px rgba(22, 124, 255, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transform: translateZ(45px);
    transition: transform 0.45s ease, box-shadow 0.45s ease;
}

    .vf-step-icon::before {
        content: "";
        position: absolute;
        inset: -7px;
        border-radius: 25px;
        border: 1px solid rgba(22, 124, 255, 0.18);
        transform: translateZ(-5px);
        animation: vfIconRing 3s ease-in-out infinite;
    }

    .vf-step-icon i {
        font-size: 28px;
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.18));
        transition: transform 0.45s ease;
    }

.vf-step-card:hover .vf-step-icon {
    transform: translateZ(60px) rotate(-5deg) scale(1.08);
    box-shadow: 0 22px 38px rgba(22, 124, 255, 0.3);
}

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

@keyframes vfIconRing {

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

    50% {
        opacity: 0.8;
        transform: scale(1.08);
    }
}


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

.vf-step-number {
    position: absolute;
    top: 28px;
    right: 28px;
    font-family: "Outfit", sans-serif;
    font-size: 30px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -1px;
    color: transparent;
    -webkit-text-stroke: 1px rgba(22, 124, 255, 0.25);
    transform: translateZ(35px);
    transition: color 0.4s ease, -webkit-text-stroke 0.4s ease;
}

.vf-step-card:hover .vf-step-number {
    color: rgba(22, 124, 255, 0.08);
    -webkit-text-stroke: 1px rgba(22, 124, 255, 0.42);
}


/* =========================================================
   CARD TITLE
========================================================= */

.vf-step-card h3 {
    position: relative;
    margin: 0 0 15px;
    font-family: "Outfit", sans-serif;
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: 1px;
    color: var(--vf-dark);
    font-weight: 800;
    transform: translateZ(38px);
}


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

.vf-step-card p {
    position: relative;
    margin: 0;
    max-width: 340px;
    font-family: "Nunito", sans-serif;
    font-size: 16px;
    line-height: 1.75;
    font-weight: 600;
    color: #596780;
    transform: translateZ(30px);
}


/* =========================================================
   CARD BOTTOM LABEL
========================================================= */

.vf-card-bottom {
    position: absolute;
    left: 30px;
    bottom: 25px;
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: "Outfit", sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #6c7b99;
    transform: translateZ(28px);
}

    .vf-card-bottom span {
        width: 25px;
        height: 2px;
        border-radius: 10px;
        background: linear-gradient( 90deg, var(--vf-blue), var(--vf-purple) );
    }


/* =========================================================
   CONNECTING PATH
========================================================= */

.vf-path {
    position: absolute;
    left: 9%;
    right: 9%;
    top: 52%;
    height: 3px;
    z-index: 1;
    pointer-events: none;
}

.vf-path-line {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, transparent, rgba(22, 124, 255, 0.18), rgba(112, 71, 255, 0.3), rgba(236, 60, 145, 0.2), transparent );
    box-shadow: 0 0 18px rgba(22, 124, 255, 0.16);
}


/* MOVING LIGHT */

.vf-moving-light {
    position: absolute;
    top: 50%;
    left: 0;
    width: 65px;
    height: 3px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: linear-gradient( 90deg, transparent, #42baff, #ffffff );
    box-shadow: 0 0 12px #42baff, 0 0 25px rgba(22, 124, 255, 0.7);
    animation: vfLightMove 4s linear infinite;
}

@keyframes vfLightMove {

    0% {
        left: 0;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        left: calc(100% - 65px);
        opacity: 0;
    }
}


/* PATH ARROWS */

.vf-path-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-53%);
    font-size: 28px;
    font-family: Arial, sans-serif;
    color: rgba(22, 124, 255, 0.38);
    text-shadow: 0 0 15px rgba(22, 124, 255, 0.35);
    animation: vfArrowPulse 2s ease-in-out infinite;
}

.arrow-1 {
    left: 33%;
}

.arrow-2 {
    left: 66%;
    animation-delay: -1s;
}

@keyframes vfArrowPulse {

    0%, 100% {
        opacity: 0.3;
        transform: translateY(-53%) translateX(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-53%) translateX(8px);
    }
}


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

.vf-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient( circle at 30% 30%, #ffffff, #42baff 35%, #167cff 70%, transparent 72% );
    box-shadow: 0 0 15px rgba(22, 124, 255, 0.5), 0 0 35px rgba(22, 124, 255, 0.2);
    z-index: 4;
    animation: vfOrbFloat 5s ease-in-out infinite;
}

.orb-1 {
    width: 10px;
    height: 10px;
    left: 20%;
    top: 15%;
}

.orb-2 {
    width: 7px;
    height: 7px;
    left: 43%;
    top: 80%;
    animation-delay: -2s;
}

.orb-3 {
    width: 12px;
    height: 12px;
    right: 19%;
    top: 22%;
    animation-delay: -3s;
}

.orb-4 {
    width: 8px;
    height: 8px;
    right: 32%;
    bottom: 5%;
    animation-delay: -1s;
}

.orb-5 {
    width: 6px;
    height: 6px;
    left: 8%;
    bottom: 20%;
    animation-delay: -4s;
}

@keyframes vfOrbFloat {

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

    50% {
        transform: translate3d(12px, -28px, 35px);
    }
}


/* =========================================================
   ACTIVE CARD
========================================================= */

.vf-step.vf-active .vf-step-card {
    border-color: rgba(22, 124, 255, 0.28);
    box-shadow: 0 38px 75px rgba(22, 124, 255, 0.16), 0 12px 35px rgba(112, 71, 255, 0.09), inset 0 1px 0 #ffffff;
}

.vf-step.vf-active .vf-step-icon {
    animation: vfActiveIcon 1.7s ease-in-out infinite;
}

@keyframes vfActiveIcon {

    0%, 100% {
        box-shadow: 0 18px 30px rgba(22, 124, 255, 0.22);
    }

    50% {
        box-shadow: 0 20px 45px rgba(22, 124, 255, 0.42);
    }
}


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

@media (max-width: 1100px) {

    .vision-future {
        padding-left: 20px;
        padding-right: 20px;
    }

    .vf-journey {
        gap: 20px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .vf-step-card {
        min-height: 370px;
        padding: 28px 24px;
    }

        .vf-step-card h3 {
            font-size: 24px;
        }

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

    .vf-step-icon {
        width: 66px;
        height: 66px;
    }

    .vf-path {
        left: 8%;
        right: 8%;
    }

    .vf-side-structure {
        display: none;
    }
}


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

@media (max-width: 900px) {

    .vision-future {
        min-height: auto;
        padding-top: 75px;
        padding-bottom: 80px;
    }

    .vf-header {
        margin-bottom: 55px;
    }

    .vf-title {
        font-size: clamp(38px, 7vw, 56px);
    }

    .vf-description {
        max-width: 680px;
        font-size: 16px;
        line-height: 1.75;
    }

    .vf-journey {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .vf-step-card {
        min-height: 355px;
        border-radius: 24px;
        padding: 25px 20px;
    }

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

        .vf-step-card p {
            font-size: 14px;
            line-height: 1.65;
        }

    .vf-card-bottom {
        left: 20px;
        bottom: 20px;
        font-size: 8px;
    }

    .vf-step-number {
        top: 25px;
        right: 20px;
        font-size: 25px;
    }

    .vf-step-icon {
        width: 60px;
        height: 60px;
        border-radius: 18px;
    }

        .vf-step-icon i {
            font-size: 23px;
        }
}


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

@media (max-width: 700px) {

    .vision-future {
        padding: 65px 18px 70px;
    }

    .vf-grid {
        background-size: 42px 42px;
    }

    .vf-depth-grid {
        height: 45%;
        bottom: -15%;
        background-size: 45px 45px;
    }

    .vf-ring-one {
        width: 260px;
        height: 260px;
    }

    .vf-ring-two {
        width: 200px;
        height: 200px;
    }

    .vf-header {
        margin-bottom: 45px;
    }

    .vf-badge {
        padding: 9px 15px;
        font-size: 10px;
        letter-spacing: 2px;
    }

    .vf-title {
        margin-top: 20px;
        font-size: clamp( 34px, 10vw, 48px );
        letter-spacing: -1.5px;
    }

    .vf-description {
        font-size: 15px;
        line-height: 1.7;
    }


    /* STACK CARDS */

    .vf-journey {
        display: flex;
        flex-direction: column;
        gap: 55px;
        min-height: auto;
        padding: 10px 5px 25px;
    }

    .vf-step {
        width: 100%;
        transform: translateY(45px) scale(0.95);
    }

        .vf-step.vf-visible {
            transform: translateY(0) scale(1);
        }

    .vf-step-card {
        width: 100%;
        min-height: 0;
        padding: 30px 27px 85px;
        border-radius: 25px;
    }

        .vf-step-card h3 {
            font-size: 25px;
        }

        .vf-step-card p {
            max-width: none;
            font-size: 16px;
            line-height: 1.72;
        }

    .vf-step-icon {
        width: 68px;
        height: 68px;
        margin-bottom: 22px;
    }

        .vf-step-icon i {
            font-size: 26px;
        }

    .vf-step-number {
        top: 28px;
        right: 27px;
        font-size: 30px;
    }

    .vf-card-bottom {
        left: 27px;
        bottom: 26px;
        font-size: 9px;
    }


    /* Hide horizontal path */

    .vf-path {
        display: none;
    }

    .vf-step-platform {
        bottom: -30px;
        width: 85%;
    }

    .vf-side-structure {
        display: none;
    }

    .vf-orb {
        opacity: 0.6;
    }
}


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

@media (max-width: 480px) {

    .vision-future {
        padding: 55px 15px 60px;
    }

    .vf-title {
        font-size: 35px;
    }

    .vf-description {
        font-size: 14px;
        line-height: 1.65;
    }

    .vf-step-card {
        padding: 25px 22px 78px;
    }

    .vf-step-icon {
        width: 62px;
        height: 62px;
        border-radius: 17px;
    }

        .vf-step-icon i {
            font-size: 23px;
        }

    .vf-step-card h3 {
        font-size: 23px;
    }

    .vf-step-card p {
        font-size: 15px;
        line-height: 1.65;
    }

    .vf-step-number {
        top: 25px;
        right: 22px;
        font-size: 27px;
    }

    .vf-card-bottom {
        left: 22px;
        bottom: 23px;
        font-size: 8px;
        letter-spacing: 1px;
    }

        .vf-card-bottom span {
            width: 20px;
        }

    .vf-depth-grid {
        opacity: 0.5;
    }

    .vf-ring {
        opacity: 0.55;
    }
}


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

@media (max-width: 360px) {

    .vision-future {
        padding-left: 12px;
        padding-right: 12px;
    }

    .vf-title {
        font-size: 31px;
    }

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

    .vf-step-card {
        padding: 23px 19px 75px;
    }

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

        .vf-step-card p {
            font-size: 14px;
        }

    .vf-step-number {
        right: 19px;
    }

    .vf-card-bottom {
        left: 19px;
    }
}


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

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

    .vision-future *,
    .vision-future *::before,
    .vision-future *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}