/* Start custom CSS for html, class: .elementor-element-9885445 *//* =========================================================
   CADGURU NEW HOMEPAGE
   PREMIUM / LARGE TYPOGRAPHY / ANIMATIONS
========================================================= */

.cg-home {
    --cg-navy: #061625;
    --cg-navy2: #0a263e;
    --cg-blue: #087bd2;
    --cg-cyan: #35b9ff;
    --cg-light: #f5f9fc;
    --cg-border: #dfe8ef;
    --cg-text: #142536;
    --cg-muted: #637486;
    --cg-white: #ffffff;

    width: 100%;
    overflow: hidden;
    background: #fff;
    color: var(--cg-text);

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

.cg-home *,
.cg-home *::before,
.cg-home *::after {
    box-sizing: border-box;
}

.cg-home a {
    text-decoration: none;
}

.cg-home p {
    margin-top: 0;
}


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

.cg-container {
    width: min(1380px, calc(100% - 70px));
    margin: auto;
}


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

.cg-hero {
    min-height: 760px;
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(15,132,215,.22),
            transparent 30%
        ),
        linear-gradient(
            125deg,
            #041321,
            #071c2e 55%,
            #061523
        );

    color: #fff;
}


.cg-blueprint-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(89,181,235,.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(89,181,235,.08) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    mask-image:
        linear-gradient(
            to right,
            transparent,
            black 35%,
            black 80%,
            transparent
        );

    animation: cgGridMove 20s linear infinite;
}

@keyframes cgGridMove {

    from {
        background-position: 0 0;
    }

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


.cg-hero-glow {
    position: absolute;
    width: 450px;
    height: 450px;

    border-radius: 50%;

    filter: blur(100px);

    opacity: .18;

    animation: cgGlow 6s ease-in-out infinite alternate;
}

.cg-glow-one {
    background: #0099ff;
    right: 8%;
    top: 12%;
}

.cg-glow-two {
    background: #1c63ff;
    left: 10%;
    bottom: -200px;
    animation-delay: 2s;
}

@keyframes cgGlow {

    from {
        transform: scale(.85);
    }

    to {
        transform: scale(1.15);
    }
}


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

.cg-hero-inner {
    min-height: 700px;

    display: grid;
    grid-template-columns:
        1.05fr
        .95fr;

    align-items: center;

    gap: 60px;

    position: relative;
    z-index: 5;
}


.cg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 9px 15px;

    border: 1px solid rgba(91,190,247,.3);

    border-radius: 50px;

    background: rgba(13,62,94,.35);

    color: #75ccff;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 23px;
}


.cg-pulse {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #39bdff;

    box-shadow:
        0 0 0 0 rgba(57,189,255,.6);

    animation: cgPulse 2s infinite;
}

@keyframes cgPulse {

    70% {
        box-shadow:
            0 0 0 10px rgba(57,189,255,0);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(57,189,255,0);
    }
}


.cg-hero h1 {
    max-width: 800px;

    margin: 0 0 25px;

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

    line-height: .98;

    letter-spacing: -3px;

    font-weight: 900;
}

.cg-hero h1 span {
    display: block;

    color: transparent;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #39b9ff
        );

    -webkit-background-clip: text;
    background-clip: text;
}


.cg-hero-lead {
    max-width: 700px;

    color: #b6c8d7;

    font-size: 18px;

    line-height: 1.8;

    margin-bottom: 30px;
}


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

.cg-hero-buttons {
    display: flex;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;
}


.cg-btn {
    display: inline-flex;

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

    gap: 12px;

    min-height: 55px;

    padding: 0 22px;

    border-radius: 8px;

    font-size: 15px;

    font-weight: 800;

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


.cg-btn i {
    transition: transform .3s ease;
}


.cg-btn:hover i {
    transform: translateX(5px);
}


.cg-btn-primary {
    background: #0b8ee6;

    color: #fff !important;

    box-shadow:
        0 12px 35px rgba(0,137,230,.25);
}


.cg-btn-primary:hover {
    background: #16a1fa;

    transform: translateY(-4px);

    box-shadow:
        0 18px 45px rgba(0,137,230,.4);
}


.cg-btn-outline {
    color: #fff !important;

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

    background:
        rgba(255,255,255,.04);
}


.cg-btn-outline:hover {
    background:
        rgba(255,255,255,.1);

    border-color:
        rgba(255,255,255,.5);

    transform:
        translateY(-4px);
}


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

.cg-hero-trust {
    display: flex;

    margin-top: 55px;

    gap: 0;
}


.cg-hero-trust div {
    padding:
        0 25px;

    border-left:
        1px solid rgba(255,255,255,.15);
}


.cg-hero-trust div:first-child {
    padding-left: 0;

    border-left: 0;
}


.cg-hero-trust strong {
    display: block;

    font-size: 17px;

    color: #fff;
}


.cg-hero-trust span {
    display: block;

    margin-top: 4px;

    font-size: 12px;

    color: #8ea7ba;
}


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

.cg-hero-visual {
    height: 560px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;
}


.cg-orbit {
    position: absolute;

    border:
        1px solid rgba(77,192,255,.2);

    border-radius: 50%;

    animation:
        cgOrbit 14s linear infinite;
}

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

.orbit-two {
    width: 350px;
    height: 350px;

    border-color:
        rgba(77,192,255,.12);

    animation-duration: 10s;

    animation-direction: reverse;
}


@keyframes cgOrbit {

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


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

.cg-main-cube {
    width: 230px;
    height: 230px;

    position: relative;

    transform:
        perspective(700px)
        rotateX(55deg)
        rotateZ(45deg);

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

    transform-style: preserve-3d;

    z-index: 5;
}


@keyframes cgCubeFloat {

    0%,
    100% {
        transform:
            perspective(700px)
            rotateX(55deg)
            rotateZ(45deg)
            translateY(0);
    }

    50% {
        transform:
            perspective(700px)
            rotateX(55deg)
            rotateZ(45deg)
            translateY(-20px);
    }
}


.cg-cube-top,
.cg-cube-front,
.cg-cube-side {
    position: absolute;

    width: 230px;
    height: 230px;

    display: flex;

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

    border:
        1px solid rgba(86,196,255,.6);

    background:
        linear-gradient(
            145deg,
            rgba(11,111,175,.65),
            rgba(4,28,47,.9)
        );

    box-shadow:
        inset 0 0 60px rgba(37,164,232,.12);
}


.cg-cube-top {
    transform:
        translateZ(115px);

    color:
        #79d1ff;

    font-size: 32px;

    font-weight: 900;

    letter-spacing: 5px;
}


.cg-cube-front {
    transform:
        rotateY(90deg)
        translateZ(115px);

    flex-direction: column;

    color: #fff;
}


.cg-cube-front span {
    font-size: 15px;
    letter-spacing: 4px;
}


.cg-cube-front strong {
    font-size: 70px;
    line-height: 1;
    color: #42bcff;
}


.cg-cube-side {
    transform:
        rotateX(90deg)
        translateZ(115px);

    color:
        #82d8ff;

    font-size: 12px;

    letter-spacing: 3px;
}


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

.cg-floating-card {
    position: absolute;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px 17px;

    border:
        1px solid rgba(126,213,255,.22);

    background:
        rgba(7,31,49,.8);

    backdrop-filter:
        blur(15px);

    border-radius: 10px;

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

    z-index: 8;

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


.cg-floating-card strong {
    display: block;

    color: #fff;

    font-size: 13px;
}


.cg-floating-card span {
    display: block;

    color: #82a5ba;

    font-size: 10px;

    margin-top: 3px;
}


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

    border-radius: 8px;

    display: flex;

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

    color: #46bdff;

    background:
        rgba(43,165,225,.1);
}


.card-course {
    top: 80px;
    left: 0;
}


.card-software {
    right: -10px;
    bottom: 110px;

    animation-delay: 1.2s;
}


.card-3d {
    width: 65px;
    height: 65px;

    left: 30px;
    bottom: 90px;

    flex-direction: column;

    justify-content: center;

    color: #4dc2ff;

    animation-delay: 2s;
}


.card-3d i {
    font-size: 20px;
}


.card-3d span {
    font-size: 10px;
}


@keyframes cgFloat {

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

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


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

.cg-hero-blueprint {
    position: absolute;

    right: 3%;
    top: 8%;

    width: 600px;
    height: 600px;

    opacity: .13;

    pointer-events: none;
}


.cg-blueprint-circle {
    position: absolute;

    inset: 15%;

    border:
        1px solid #62c8ff;

    border-radius: 50%;
}


.cg-blueprint-circle::before,
.cg-blueprint-circle::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 0;

    width: 1px;
    height: 100%;

    background:
        #62c8ff;
}


.cg-blueprint-circle::after {
    transform:
        rotate(90deg);
}


.cg-blueprint-line {
    position: absolute;

    height: 1px;

    width: 100%;

    top: 50%;

    background:
        #62c8ff;
}


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


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


.cg-blueprint-dimension {
    position: absolute;

    top: 13%;
    right: 10%;

    color: #66cbff;

    font-size: 10px;

    letter-spacing: 2px;
}


.dim-two {
    left: 10%;
    top: auto;
    bottom: 14%;
}


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

.cg-hero-bottom {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

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


.cg-hero-bottom-inner {
    min-height: 58px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: #6f8ca0;

    font-size: 10px;

    letter-spacing: 3px;
}


.cg-scroll-line {
    width: 65%;

    height: 1px;

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

    position: relative;
}


.cg-scroll-line span {
    position: absolute;

    left: 0;

    top: -1px;

    width: 80px;

    height: 2px;

    background:
        #2caeff;

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


@keyframes cgScrollLine {

    0% {
        left: 0;
    }

    50% {
        left: calc(100% - 80px);
    }

    100% {
        left: 0;
    }
}


/* =========================================================
   GENERAL SECTIONS
========================================================= */

.cg-section {
    padding:
        115px 0;
}


.cg-section-tag {
    display: inline-block;

    color:
        var(--cg-blue);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 2.5px;

    margin-bottom: 15px;
}


.cg-section h2 {
    margin: 0;

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

    line-height: 1.05;

    letter-spacing: -2px;

    font-weight: 900;

    color:
        #102335;
}


.cg-section h2 span {
    display: block;

    color:
        var(--cg-blue);
}


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

.cg-intro {
    background:
        #fff;
}


.cg-section-top {
    display: grid;

    grid-template-columns:
        1fr
        .65fr;

    gap: 80px;

    align-items: end;

    margin-bottom: 55px;
}


.cg-section-top > p {
    margin: 0;

    font-size: 18px;

    line-height: 1.8;

    color:
        var(--cg-muted);
}


/* =========================================================
   FEATURE CARDS
========================================================= */

.cg-feature-grid {
    display: grid;

    grid-template-columns:
        1.3fr
        1fr
        1fr;

    gap: 18px;
}


.cg-feature-card {
    position: relative;

    padding: 38px;

    min-height: 370px;

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

    border-radius: 16px;

    background:
        #fff;

    overflow: hidden;

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


.cg-feature-card:hover {
    transform:
        translateY(-10px);

    border-color:
        #8acaf1;

    box-shadow:
        0 30px 70px rgba(7,46,74,.12);
}


.cg-feature-large {
    background:
        linear-gradient(
            145deg,
            #071a2b,
            #0b3658
        );

    color: #fff;
}


.cg-feature-number {
    position: absolute;

    top: 22px;
    right: 25px;

    color:
        rgba(8,123,210,.18);

    font-size: 55px;

    font-weight: 900;
}


.cg-feature-large .cg-feature-number {
    color:
        rgba(255,255,255,.07);
}


.cg-feature-icon {
    width: 60px;
    height: 60px;

    display: flex;

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

    border-radius: 13px;

    background:
        #eaf6ff;

    color:
        var(--cg-blue);

    font-size: 22px;

    margin-bottom: 25px;
}


.cg-feature-large .cg-feature-icon {
    background:
        rgba(255,255,255,.1);

    color:
        #45baff;
}


.cg-feature-card h3 {
    max-width: 400px;

    margin:
        0 0 15px;

    font-size: 25px;

    line-height: 1.2;
}


.cg-feature-card p {
    color:
        var(--cg-muted);

    font-size: 16px;

    line-height: 1.75;
}


.cg-feature-large p {
    color:
        #aec5d5;
}


.cg-feature-card a {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 18px;

    color:
        var(--cg-blue);

    font-size: 14px;

    font-weight: 800;
}


.cg-feature-large a {
    color:
        #51c2ff;
}


.cg-feature-card a i {
    transition:
        transform .25s ease;
}


.cg-feature-card a:hover i {
    transform:
        translateX(5px);
}


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

.cg-stats {
    background:
        #071a2b;

    color: #fff;

    padding:
        45px 0;
}


.cg-stats-grid {
    display: grid;

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

    gap: 0;
}


.cg-stat {
    text-align: center;

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

    padding:
        10px 20px;
}


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


.cg-stat strong {
    display: block;

    color:
        #45bbff;

    font-size: 32px;

    font-weight: 900;
}


.cg-stat span {
    display: block;

    margin-top: 6px;

    color:
        #9bb2c3;

    font-size: 13px;
}


/* =========================================================
   COURSES
========================================================= */

.cg-courses {
    background:
        #f7fafc;
}


.cg-section-heading {
    display: flex;

    justify-content: space-between;

    align-items: end;

    margin-bottom: 55px;
}


.cg-text-link {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color:
        var(--cg-blue);

    font-size: 15px;

    font-weight: 800;
}


.cg-text-link i {
    transition:
        transform .25s ease;
}


.cg-text-link:hover i {
    transform:
        translateX(6px);
}


.cg-course-grid {
    display: grid;

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

    gap: 20px;
}


.cg-course-card {
    position: relative;

    padding: 30px;

    min-height: 390px;

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

    border-radius: 15px;

    background: #fff;

    overflow: hidden;

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


.cg-course-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            #087bd2,
            #45c3ff
        );

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform .4s ease;
}


.cg-course-card:hover {
    transform:
        translateY(-10px);

    box-shadow:
        0 25px 60px rgba(8,51,81,.12);

    border-color:
        #a6d5f3;
}


.cg-course-card:hover::before {
    transform:
        scaleX(1);
}


.cg-course-top {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 25px;
}


.cg-course-icon {
    width: 55px;
    height: 55px;

    border-radius: 12px;

    display: flex;

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

    background:
        #eaf6ff;

    color:
        var(--cg-blue);

    font-size: 21px;

    transition:
        transform .3s ease,
        background .3s ease;
}


.cg-course-card:hover .cg-course-icon {
    transform:
        rotate(-8deg)
        scale(1.08);

    background:
        var(--cg-blue);

    color:
        #fff;
}


.cg-course-top > span {
    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.5px;

    color:
        #8b99a6;
}


.cg-course-card h3 {
    margin:
        0 0 14px;

    font-size: 24px;

    line-height: 1.2;

    color:
        #102638;
}


.cg-course-card p {
    font-size: 15px;

    line-height: 1.75;

    color:
        var(--cg-muted);
}


.cg-course-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 22px;
}


.cg-course-tags span {
    padding:
        7px 10px;

    border-radius:
        5px;

    background:
        #f1f6fa;

    color:
        #617487;

    font-size:
        11px;

    font-weight:
        700;
}


.cg-course-card > a {
    position: absolute;

    left: 30px;
    bottom: 27px;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color:
        var(--cg-blue);

    font-size:
        14px;

    font-weight:
        800;
}


.cg-course-card > a i {
    transition:
        transform .25s ease;
}


.cg-course-card > a:hover i {
    transform:
        translateX(5px);
}


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

.cg-software {
    padding:
        120px 0;

    background:
        #061725;

    color: #fff;

    overflow: hidden;
}


.cg-software-inner {
    display: grid;

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

    align-items: center;

    gap: 80px;
}


.cg-software h2 {
    margin:
        0 0 22px;

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

    line-height: 1.05;

    letter-spacing:
        -2px;
}


.cg-software h2 span {
    display: block;

    color:
        #45baff;
}


.cg-software-content p {
    max-width: 650px;

    color:
        #a9bfce;

    font-size:
        17px;

    line-height:
        1.8;
}


.cg-software-content .cg-btn {
    margin-top:
        20px;
}


/* SOFTWARE VISUAL */

.cg-software-visual {
    min-height: 500px;

    position: relative;

    display: flex;

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


.cg-software-circle {
    width: 370px;
    height: 370px;

    border:
        1px solid rgba(69,186,255,.35);

    border-radius:
        50%;

    position: relative;

    animation:
        cgSoftwareSpin 18s linear infinite;
}


.cg-software-circle::before,
.cg-software-circle::after {
    content: "";

    position: absolute;

    inset: 30px;

    border:
        1px dashed rgba(69,186,255,.2);

    border-radius:
        50%;
}


.cg-software-circle::after {
    inset:
        80px;

    border-style:
        solid;
}


@keyframes cgSoftwareSpin {

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


.cg-software-center {
    position: absolute;

    width: 145px;
    height: 145px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #0d4164,
            #061b2c
        );

    border:
        1px solid rgba(72,190,255,.5);

    box-shadow:
        0 0 70px rgba(19,155,231,.25);

    display: flex;

    flex-direction: column;

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

    z-index: 3;
}


.cg-software-center i {
    color:
        #45bdff;

    font-size:
        33px;

    margin-bottom:
        8px;
}


.cg-software-center span {
    font-size:
        18px;

    font-weight:
        900;

    letter-spacing:
        4px;
}


.cg-software-box {
    position: absolute;

    width: 125px;
    height: 125px;

    border:
        1px solid rgba(88,203,255,.3);

    border-radius:
        15px;

    background:
        rgba(8,40,62,.85);

    backdrop-filter:
        blur(12px);

    display: flex;

    flex-direction: column;

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

    box-shadow:
        0 20px 40px rgba(0,0,0,.25);

    transition:
        transform .3s ease,
        border-color .3s ease;
}


.cg-software-box:hover {
    transform:
        scale(1.08)
        translateY(-7px);

    border-color:
        #4dc2ff;
}


.cg-software-box strong {
    color:
        #48bdff;

    font-size:
        35px;

    font-weight:
        900;
}


.cg-software-box span {
    color:
        #a5bdcd;

    font-size:
        12px;

    margin-top:
        6px;
}


.box-one {
    top:
        15px;

    left:
        20px;
}


.box-two {
    top:
        70px;

    right:
        5px;
}


.box-three {
    bottom:
        25px;

    left:
        95px;
}


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

.cg-services {
    background:
        #fff;
}


.cg-services-grid {
    display:
        grid;

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

    gap:
        18px;
}


.cg-service-card {
    position:
        relative;

    padding:
        35px 30px;

    min-height:
        340px;

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

    border-radius:
        14px;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

    overflow:
        hidden;
}


.cg-service-card::after {
    content:
        "";

    position:
        absolute;

    right:
        -60px;

    bottom:
        -60px;

    width:
        150px;

    height:
        150px;

    border-radius:
        50%;

    background:
        #eaf7ff;

    transition:
        transform .4s ease;
}


.cg-service-card:hover {
    transform:
        translateY(-9px);

    box-shadow:
        0 25px 55px rgba(6,42,68,.12);
}


.cg-service-card:hover::after {
    transform:
        scale(1.5);
}


.cg-service-number {
    display:
        block;

    color:
        #a7b4bf;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        2px;

    margin-bottom:
        30px;
}


.cg-service-card > i {
    color:
        var(--cg-blue);

    font-size:
        29px;

    margin-bottom:
        22px;
}


.cg-service-card h3 {
    font-size:
        21px;

    margin:
        0 0 12px;
}


.cg-service-card p {
    color:
        var(--cg-muted);

    font-size:
        14px;

    line-height:
        1.7;
}


.cg-service-card a {
    display:
        inline-block;

    margin-top:
        12px;

    color:
        var(--cg-blue);

    font-size:
        13px;

    font-weight:
        800;
}


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

.cg-learning {
    padding:
        115px 0;

    background:
        #f5f9fc;
}


.cg-learning-heading {
    max-width:
        750px;

    margin:
        0 auto 70px;

    text-align:
        center;
}


.cg-learning-heading h2 {
    margin:
        0 0 18px;

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

    line-height:
        1.05;

    letter-spacing:
        -2px;
}


.cg-learning-heading h2 span {
    display:
        block;

    color:
        var(--cg-blue);
}


.cg-learning-heading p {
    color:
        var(--cg-muted);

    font-size:
        17px;

    line-height:
        1.8;
}


.cg-learning-grid {
    display:
        grid;

    grid-template-columns:
        1fr auto 1fr auto 1fr auto 1fr;

    align-items:
        center;
}


.cg-learning-step {
    text-align:
        center;
}


.cg-step-circle {
    width:
        75px;

    height:
        75px;

    border-radius:
        50%;

    display:
        flex;

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

    margin:
        0 auto 20px;

    background:
        #fff;

    border:
        2px solid #b9ddf3;

    color:
        var(--cg-blue);

    font-size:
        17px;

    font-weight:
        900;

    transition:
        .3s ease;
}


.cg-learning-step:hover .cg-step-circle {
    background:
        var(--cg-blue);

    color:
        #fff;

    border-color:
        var(--cg-blue);

    transform:
        scale(1.12);
}


.cg-learning-step h3 {
    margin:
        0 0 10px;

    font-size:
        19px;
}


.cg-learning-step p {
    color:
        var(--cg-muted);

    font-size:
        13px;

    line-height:
        1.65;
}


.cg-learning-line {
    width:
        70px;

    height:
        1px;

    background:
        #b9d7e9;
}


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

.cg-why {
    background:
        #fff;
}


.cg-why-grid {
    display:
        grid;

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

    align-items:
        center;

    gap:
        100px;
}


.cg-why-visual {
    min-height:
        500px;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.cg-why-main {
    width:
        300px;

    height:
        300px;

    border-radius:
        50%;

    background:
        linear-gradient(
            145deg,
            #071c2e,
            #0c456b
        );

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    box-shadow:
        0 30px 80px rgba(7,43,67,.25);

    position:
        relative;

    z-index:
        2;
}


.cg-why-main span {
    color:
        #4bc1ff;

    font-size:
        28px;

    letter-spacing:
        8px;

    font-weight:
        900;
}


.cg-why-main strong {
    font-size:
        55px;

    letter-spacing:
        -3px;
}


.cg-why-main small {
    color:
        #8caabd;

    font-size:
        9px;

    letter-spacing:
        2px;

    margin-top:
        8px;
}


.cg-why-orbit {
    position:
        absolute;

    width:
        430px;

    height:
        430px;

    border:
        1px solid #b9dff4;

    border-radius:
        50%;

    animation:
        cgWhySpin 15s linear infinite;
}


.cg-why-orbit::before {
    content:
        "";

    position:
        absolute;

    width:
        15px;

    height:
        15px;

    background:
        #087bd2;

    border-radius:
        50%;

    top:
        40px;

    left:
        70px;

    box-shadow:
        0 0 20px #087bd2;
}


@keyframes cgWhySpin {

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


.cg-why-content p {
    color:
        var(--cg-muted);

    font-size:
        17px;

    line-height:
        1.8;
}


.cg-check-list {
    padding:
        0;

    margin:
        30px 0 0;

    list-style:
        none;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        14px;
}


.cg-check-list li {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        #34495a;

    font-size:
        14px;

    font-weight:
        700;
}


.cg-check-list i {
    width:
        23px;

    height:
        23px;

    display:
        flex;

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

    border-radius:
        50%;

    background:
        #e5f5ff;

    color:
        var(--cg-blue);

    font-size:
        10px;
}


/* =========================================================
   VIDEOS
========================================================= */

.cg-videos {
    background:
        #f7fafc;
}


.cg-video-grid {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        15px;
}


.cg-video-item {
    padding:
        23px;

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    background:
        #fff;

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

    border-radius:
        12px;

    color:
        var(--cg-text);

    transition:
        .3s ease;
}


.cg-video-item:hover {
    transform:
        translateX(7px);

    border-color:
        #8fcdf0;

    box-shadow:
        0 15px 35px rgba(8,50,77,.09);
}


.cg-play {
    width:
        50px;

    height:
        50px;

    flex-shrink:
        0;

    display:
        flex;

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

    border-radius:
        50%;

    background:
        #e9f6ff;

    color:
        var(--cg-blue);

    transition:
        .3s ease;
}


.cg-video-item:hover .cg-play {
    background:
        var(--cg-blue);

    color:
        #fff;

    transform:
        scale(1.1);
}


.cg-video-item span {
    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        1.5px;

    color:
        var(--cg-blue);
}


.cg-video-item h3 {
    margin:
        5px 0;

    font-size:
        19px;
}


.cg-video-item p {
    margin:
        0;

    color:
        var(--cg-muted);

    font-size:
        13px;
}


.cg-video-item > i {
    margin-left:
        auto;

    color:
        #a1afbb;

    transition:
        .25s ease;
}


.cg-video-item:hover > i {
    color:
        var(--cg-blue);

    transform:
        translate(3px,-3px);
}


/* =========================================================
   INDUSTRIES
========================================================= */

.cg-industries {
    padding:
        110px 0;

    background:
        #061725;

    color:
        #fff;
}


.cg-industries-heading {
    text-align:
        center;

    margin-bottom:
        60px;
}


.cg-industries-heading h2 {
    margin:
        0;

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

    line-height:
        1.05;
}


.cg-industries-heading h2 span {
    display:
        block;

    color:
        #45bbff;
}


.cg-industry-grid {
    display:
        grid;

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

    gap:
        12px;
}


.cg-industry {
    padding:
        30px 15px;

    text-align:
        center;

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

    border-radius:
        10px;

    transition:
        .3s ease;
}


.cg-industry:hover {
    background:
        rgba(52,178,242,.08);

    border-color:
        rgba(52,178,242,.4);

    transform:
        translateY(-7px);
}


.cg-industry i {
    color:
        #46bcff;

    font-size:
        25px;

    margin-bottom:
        17px;
}


.cg-industry strong {
    display:
        block;

    font-size:
        14px;
}


.cg-industry span {
    display:
        block;

    margin-top:
        7px;

    color:
        #829cad;

    font-size:
        10px;

    line-height:
        1.4;
}


/* =========================================================
   FAQ
========================================================= */

.cg-faq {
    background:
        #fff;
}


.cg-faq-grid {
    display:
        grid;

    grid-template-columns:
        .7fr
        1.3fr;

    gap:
        90px;

    align-items:
        start;
}


.cg-faq-intro p {
    color:
        var(--cg-muted);

    font-size:
        17px;

    line-height:
        1.8;

    margin:
        20px 0 25px;
}


.cg-faq-list details {
    border-bottom:
        1px solid #dfe7ed;

    padding:
        22px 0;
}


.cg-faq-list summary {
    list-style:
        none;

    cursor:
        pointer;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    font-size:
        18px;

    font-weight:
        800;

    color:
        #15283a;
}


.cg-faq-list summary::-webkit-details-marker {
    display:
        none;
}


.cg-faq-list summary span {
    width:
        32px;

    height:
        32px;

    display:
        flex;

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

    border-radius:
        50%;

    background:
        #eef7fc;

    color:
        var(--cg-blue);

    font-size:
        20px;

    transition:
        .25s ease;
}


.cg-faq-list details[open] summary span {
    transform:
        rotate(45deg);

    background:
        var(--cg-blue);

    color:
        #fff;
}


.cg-faq-list details p {
    margin:
        15px 45px 0 0;

    color:
        var(--cg-muted);

    font-size:
        15px;

    line-height:
        1.8;
}


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

.cg-location {
    padding:
        100px 0;

    background:
        #f3f8fb;
}


.cg-location-inner {
    display:
        grid;

    grid-template-columns:
        1.2fr
        .8fr;

    gap:
        80px;

    align-items:
        center;
}


.cg-location h2 {
    margin:
        0 0 20px;

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

    line-height:
        1.05;
}


.cg-location h2 span {
    display:
        block;

    color:
        var(--cg-blue);
}


.cg-location p {
    max-width:
        700px;

    color:
        var(--cg-muted);

    font-size:
        17px;

    line-height:
        1.8;
}


.cg-location address {
    margin:
        25px 0;

    padding:
        20px;

    border-left:
        3px solid var(--cg-blue);

    background:
        #fff;

    color:
        #506273;

    font-size:
        15px;

    line-height:
        1.8;

    font-style:
        normal;
}


.cg-location-contact {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;
}


.cg-location-contact a {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        10px 12px;

    border:
        1px solid #dce6ed;

    border-radius:
        7px;

    color:
        #3e5364;

    background:
        #fff;

    font-size:
        12px;

    font-weight:
        700;

    transition:
        .25s ease;
}


.cg-location-contact a:hover {
    color:
        var(--cg-blue);

    border-color:
        #9bcfea;

    transform:
        translateY(-2px);
}


.cg-location-contact i {
    color:
        var(--cg-blue);
}


.cg-location-box {
    min-height:
        400px;

    border-radius:
        20px;

    padding:
        45px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    color:
        #fff;

    background:
        linear-gradient(
            145deg,
            #061827,
            #0b3d5f
        );

    box-shadow:
        0 30px 70px rgba(5,37,59,.18);

    position:
        relative;

    overflow:
        hidden;
}


.cg-location-box::before {
    content:
        "";

    position:
        absolute;

    width:
        250px;

    height:
        250px;

    border:
        1px solid rgba(72,193,255,.2);

    border-radius:
        50%;
}


.cg-location-pin {
    width:
        75px;

    height:
        75px;

    display:
        flex;

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

    border-radius:
        50%;

    background:
        rgba(56,190,255,.1);

    color:
        #49bfff;

    font-size:
        28px;

    margin-bottom:
        25px;

    position:
        relative;
}


.cg-location-box > span {
    color:
        #63c5ff;

    font-size:
        11px;

    letter-spacing:
        2px;

    font-weight:
        900;
}


.cg-location-box strong {
    margin-top:
        8px;

    font-size:
        30px;
}


.cg-location-box small {
    margin-top:
        7px;

    color:
        #9bb4c5;

    font-size:
        13px;
}


.cg-location-box a {
    margin-top:
        25px;

    color:
        #fff;

    font-size:
        13px;

    font-weight:
        800;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}


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

.cg-final-cta {
    position:
        relative;

    overflow:
        hidden;

    padding:
        95px 0;

    background:
        linear-gradient(
            120deg,
            #087bd2,
            #064b81
        );

    color:
        #fff;
}


.cg-cta-grid {
    position:
        absolute;

    inset:
        0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.08) 1px,
            transparent 1px
        );

    background-size:
        45px 45px;

    transform:
        perspective(500px)
        rotateX(45deg)
        scale(1.5);

    opacity:
        .35;
}


.cg-final-inner {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        50px;
}


.cg-final-inner h2 {
    margin:
        0 0 15px;

    font-size:
        clamp(42px,5vw,65px);

    line-height:
        1;

    letter-spacing:
        -2px;
}


.cg-final-inner h2 span {
    color:
        #b8e7ff;
}


.cg-final-inner p {
    max-width:
        700px;

    margin:
        0;

    color:
        #d0e9f7;

    font-size:
        17px;

    line-height:
        1.7;
}


.cg-final-buttons {
    display:
        flex;

    flex-shrink:
        0;

    gap:
        10px;

    flex-wrap:
        wrap;
}


.cg-btn-white {
    background:
        #fff;

    color:
        #07588e !important;
}


.cg-btn-white:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 15px 35px rgba(0,0,0,.18);
}


.cg-btn-ghost {
    color:
        #fff !important;

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


.cg-btn-ghost:hover {
    background:
        rgba(255,255,255,.1);

    transform:
        translateY(-4px);
}


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

.cg-footer {
    background:
        #04121f;

    color:
        #fff;
}


.cg-footer-grid {
    padding:
        75px 0;

    display:
        grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        1fr;

    gap:
        60px;
}


.cg-footer-brand img {
    width:
        170px;

    max-height:
        60px;

    object-fit:
        contain;

    margin-bottom:
        20px;

    filter:
        brightness(0) invert(1);
}


.cg-footer-brand p {
    max-width:
        440px;

    color:
        #8299a9;

    font-size:
        14px;

    line-height:
        1.8;
}


.cg-footer h3 {
    margin:
        0 0 22px;

    font-size:
        16px;
}


.cg-footer a {
    display:
        block;

    color:
        #91a7b6;

    font-size:
        13px;

    margin-bottom:
        12px;

    transition:
        .2s ease;
}


.cg-footer a:hover {
    color:
        #42baff;

    transform:
        translateX(4px);
}


.cg-footer p {
    color:
        #91a7b6;

    font-size:
        13px;

    line-height:
        1.8;
}


.cg-footer-bottom {
    border-top:
        1px solid rgba(255,255,255,.08);
}


.cg-footer-bottom .cg-container {
    min-height:
        65px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    color:
        #647c8c;

    font-size:
        11px;
}


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

@media (max-width: 1100px) {

    .cg-container {
        width:
            calc(100% - 45px);
    }


    .cg-hero-inner {
        grid-template-columns:
            1fr;

        padding-top:
            80px;

        padding-bottom:
            100px;
    }


    .cg-hero {
        min-height:
            auto;
    }


    .cg-hero-visual {
        height:
            500px;
    }


    .cg-feature-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .cg-feature-large {
        grid-column:
            span 2;
    }


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


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


    .cg-industry-grid {
        grid-template-columns:
            repeat(3,1fr);
    }


    .cg-learning-grid {
        grid-template-columns:
            1fr 1fr;

        gap:
            40px;
    }


    .cg-learning-line {
        display:
            none;
    }


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


    .cg-why-grid {
        grid-template-columns:
            1fr;

        gap:
            40px;
    }


    .cg-why-visual {
        min-height:
            400px;
    }


    .cg-footer-grid {
        grid-template-columns:
            1fr 1fr;
    }

}


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

@media (max-width: 700px) {

    .cg-container {
        width:
            calc(100% - 30px);
    }


    .cg-section {
        padding:
            75px 0;
    }


    .cg-hero-inner {
        padding-top:
            70px;

        padding-bottom:
            80px;

        gap:
            20px;
    }


    .cg-hero h1 {
        font-size:
            46px;

        letter-spacing:
            -2px;
    }


    .cg-hero-lead {
        font-size:
            16px;

        line-height:
            1.7;
    }


    .cg-hero-trust {
        margin-top:
            40px;

        flex-wrap:
            wrap;

        gap:
            20px;
    }


    .cg-hero-trust div {
        padding:
            0 15px;
    }


    .cg-hero-visual {
        height:
            420px;
    }


    .orbit-one {
        width:
            320px;

        height:
            320px;
    }


    .orbit-two {
        width:
            250px;

        height:
            250px;
    }


    .cg-main-cube {
        width:
            160px;

        height:
            160px;
    }


    .cg-cube-top,
    .cg-cube-front,
    .cg-cube-side {
        width:
            160px;

        height:
            160px;
    }


    .cg-cube-top {
        transform:
            translateZ(80px);
    }


    .cg-cube-front {
        transform:
            rotateY(90deg)
            translateZ(80px);
    }


    .cg-cube-side {
        transform:
            rotateX(90deg)
            translateZ(80px);
    }


    .cg-floating-card {
        transform:
            scale(.82);
    }


    .card-course {
        left:
            -15px;
    }


    .card-software {
        right:
            -30px;
    }


    .card-3d {
        left:
            5px;
    }


    .cg-section-top,
    .cg-section-heading {
        grid-template-columns:
            1fr;

        display:
            block;
    }


    .cg-section-heading .cg-text-link {
        margin-top:
            20px;
    }


    .cg-section h2 {
        font-size:
            39px;
    }


    .cg-feature-grid,
    .cg-course-grid,
    .cg-services-grid {
        grid-template-columns:
            1fr;
    }


    .cg-feature-large {
        grid-column:
            auto;
    }


    .cg-feature-card {
        min-height:
            350px;
    }


    .cg-stats-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .cg-stat {
        border-right:
            0;

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

        padding:
            20px 10px;
    }


    .cg-stat:nth-child(3),
    .cg-stat:nth-child(4) {
        border-bottom:
            0;
    }


    .cg-software {
        padding:
            80px 0;
    }


    .cg-software-visual {
        min-height:
            400px;
    }


    .cg-software-circle {
        width:
            290px;

        height:
            290px;
    }


    .cg-software-box {
        width:
            95px;

        height:
            95px;
    }


    .box-one {
        left:
            0;
    }


    .box-two {
        right:
            0;
    }


    .box-three {
        left:
            60px;
    }


    .cg-video-grid {
        grid-template-columns:
            1fr;
    }


    .cg-industry-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .cg-check-list {
        grid-template-columns:
            1fr;
    }


    .cg-faq-grid,
    .cg-location-inner {
        grid-template-columns:
            1fr;

        gap:
            45px;
    }


    .cg-final-inner {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .cg-footer-grid {
        grid-template-columns:
            1fr;

        gap:
            35px;
    }


    .cg-footer-bottom .cg-container {
        flex-direction:
            column;

        justify-content:
            center;

        gap:
            7px;

        text-align:
            center;

        padding:
            15px 0;
    }

}


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

@media (max-width: 480px) {

    .cg-hero h1 {
        font-size:
            41px;
    }


    .cg-eyebrow {
        font-size:
            9px;

        letter-spacing:
            1.2px;
    }


    .cg-btn {
        width:
            100%;
    }


    .cg-hero-buttons {
        width:
            100%;
    }


    .cg-hero-trust {
        display:
            grid;

        grid-template-columns:
            1fr 1fr;
    }


    .cg-hero-trust div {
        border-left:
            0;

        padding:
            0;
    }


    .cg-course-card {
        min-height:
            410px;
    }


    .cg-industry-grid {
        grid-template-columns:
            1fr;
    }


    .cg-location-contact {
        flex-direction:
            column;
    }


    .cg-location-contact a {
        width:
            100%;
    }


    .cg-final-buttons {
        width:
            100%;
    }


    .cg-final-buttons .cg-btn {
        width:
            100%;
    }

}/* End custom CSS */