/* =========================================================
   DIGITAL LIFT IT SOLUTION
   CINEMATIC CSS-ONLY WEBSITE
   NO JAVASCRIPT
========================================================= */


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

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}

body{
	margin:0px;
	padding:0px;
	background:navy;
	color:white;
		width:100%;
}

.grid-container{
	display:grid;
	grid-template-rows:0fr;
	width:100%;
}

.header-section-home{
	width:100% auto;
	height:660px;
	background:white;
}

.body-section-home{
	width:100% auto;
	height:1510px ;
	background:white;
	color:black;
	padding-top:50px;
}

.footer-section{
	width:100% auto;
	height:auto;
	background:green;
}

img {

    max-width: 100%;
    display: block;
object-fit:cover;
}

.students-row{
	display:flex;
	align-items:center;
	margin-top:25px;
	gap:30px
	}
.students-row p{
	font-size:16px;
	letter-spacing:1.5;
	color:#dce4ef
	}
.students-row strong{
	color:#ffc03a
	}
.avatars{
	display:flex;
	}
.avatars img{
	width:39px;
	height:39px;
	border-radius:50%;
	object-fit:cover;
	border:3px solid #0b1d34;
	margin-right:-7px
	}

a {

    color: inherit;
    text-decoration: none;
	

}


button,
a {

    -webkit-tap-highlight-color: transparent;

}



:root {

    --navy: #03122e;
    --navy-2: #061a3d;
    --blue: #1557d6;
    --blue-light: #2879ff;
    --cyan: #19cfff;
--line:#dfe6f1;
    --orange: #ff741d;
    --orange-light: #ff922f;

    --white: #ffffff;
    --off-white: #f7f9fc;

    --text: #0a1730;
    --muted: #687287;

    --border: #e4e8f0;

    --shadow:
        0 15px 45px rgba(3, 18, 46, .08);

    --radius: 10px;

}

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

.top-bar {

    height: 28px;

    background: #020b1d;

    color: #dbe6ff;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 5%;

    font-size: 13px;
	


}


.top-left,
.top-right {

    display: flex;

    align-items: center;

    gap: 22px;

}


.top-right {

    gap: 16px;

}


.top-right a {

    transition: .3s ease;

}


.top-right a:hover {

    color: var(--orange);

}


.social {

    font-weight: 900;
font-size:18px;
    opacity: .85;

}

/* =========================================================
   NAVBAR
========================================================= */

.navbar {

    position: sticky;

    top: 0;

    z-index: 1000;

    height: 74px;

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

    backdrop-filter: blur(15px);

    border-bottom: 1px solid #e8ecf3;

}


.nav-container {

    width: min(1180px, 92%);

    height: 100%;

    margin: auto;
	
    display: flex;

    align-items: center;

    justify-content: space-between;

}


/* LOGO */

.logo-text {

    display: flex;

    flex-direction: column;

    line-height: 1;

}


.logo-text strong {

    color: #102d65;

    font-size: 15px;

    letter-spacing: -.5px;

}


.logo-text small {

    color: #66758e;

    font-size: 8px;

    letter-spacing: 1px;

    margin-top: 4px;

}


/* NAV LINKS */

.nav-links {

    display: flex;

    align-items: center;

    gap: 20px;

}


.nav-links > a {

    font-size: 12px;

    font-weight: 600;

    color: #172442;

    position: relative;

    padding: 28px 0;

    transition: .3s ease;

}


.nav-links > a:not(.nav-cta)::after {

    content: "";

    position: absolute;

    width: 0;

    height: 2px;

    background: var(--orange);

    left: 50%;

    bottom: 19px;

    transform: translateX(-50%);

    transition: .3s ease;

}


.nav-links > a:hover {

    color: var(--blue);

}


.nav-links > a:hover::after,
.nav-links > a.active::after {

    width: 100%;

}


.nav-links > a.active {

    color: var(--blue);

}


.nav-cta {

    background:
        linear-gradient(
            135deg,
            var(--orange),
            var(--orange-light)
        );

    color: white !important;

    padding: 11px 20px !important;

    border-radius: 8px;

    box-shadow:
        0 7px 18px rgba(255,116,29,.25);

}


.nav-cta:hover {

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(255,116,29,.35);

}


.mobile-enroll {

    display: none;

}

/* =========================================================
   HERO-HOME
========================================================= */

.hero-home {

    height: 570px;
width: 100%;
    position: relative;

    overflow: hidden;

    color: white;

    background:

        radial-gradient(
            circle at 75% 40%,
            rgba(18,104,255,.25),
            transparent 30%
        ),

        radial-gradient(
            circle at 30% 70%,
            rgba(0,191,255,.08),
            transparent 30%
        ),

        linear-gradient(
            115deg,
            #020c20,
            #04183c 55%,
            #02112d
        );

}

/* DIGITAL GRID */

.hero-grid-home {

    position: absolute;

width:100%;
    inset: 0;

    opacity: 0.4;

    background-image:

        linear-gradient(
            rgba(38,137,255,.12) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(38,137,255,.12) 1px,
            transparent 1px
        );

    background-size: cover;

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

}



/* GLOW */

.hero-glow-home {

    position: absolute;

    width: 350px;

    height: 350px;

    border-radius: 50%;

    filter: blur(80px);

    opacity: .18;

    animation: glowMove 2s ease-in-out infinite alternate;

}


.hero-glow-one {

    background: #008cff;

    right: 20%;

    top: 5%;

}


.hero-glow-two {

    background: #ff641c;

    left: 25%;

    bottom: -70%;

    animation-delay: 8s;

}


@keyframes glowMove {

    from {
        transform: translateY(-20px) scale(.9);
    }

    to {
        transform: translateY(25px) scale(1.1);
    }

}

/* HERO CONTAINER */

.hero-container-home {

    width: min(100%, 100%);

    height:100%;

    margin: 3px 10px 3px 20px;

    display: grid;

    grid-template-columns: 1.2fr 1fr;


    position: relative;

    z-index: 2;
	

}

/* HERO TEXT */

.hero-content-home {

   
	height:100%;
	
	padding:80px 2px 69px 6px;

}

.hero-label-home {

    font-size: 10px;

    letter-spacing: 5px;

    font-weight: 700;

    color: #79c8ff;

    display: flex;

    align-items: center;

    gap: 8px;

  margin-bottom:30px;

}

.hero-label-home span {

    width: 28px;

    height: 2px;

    background: var(--orange);

}

.tex {

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

    line-height: 1.04;

    letter-spacing: -2px;

    font-weight: 600;

    animation: titleIn 1s ease both;
	
margin-bottom:20px;
}

.hero-home h2 span {

    color: var(--orange);

}

.hero-content-home > p {

    max-width: 480px;

    color:white;

    font-size: 19px;

    line-height: 1.5;
	
	z-index:400;

    animation: titleIn 1s .2s ease both;
margin-bottom:12px;
}

.hero-buttons {

    display: flex;

    gap: 20px;
	z-index:400;
    animation: titleIn 1s .35s ease both;

}

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    height: 54px;

    padding: 0 18px;

    border-radius: 7px;

    font-size: 18px;

    font-weight: 700;

    transition: .35s ease;

}

.btn-orange {

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--orange),
            #ff9638
        );

    box-shadow:
        0 10px 25px rgba(255,115,25,.25);

}

.btn-orange:hover {

    transform: translateY(-4px);

    box-shadow:
        0 15px 35px rgba(255,115,25,.4);

}

.btn-outline {

    color: white;

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

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

}

.btn-outline:hover {

    background: white;

    color: var(--navy);

    transform: translateY(-4px);

}

.play-icon {

    font-size: 11px;

    width: 20px;

    height: 20px;

    border: 1px solid white;

    border-radius: 50%;

    display: grid;

    place-items: center;

}

/* TRUST */

.hero-trust {

    display: flex;

    gap: 80px;

    margin-top: 28px;

}

.hero-trust div {

    display: flex;

    flex-direction: column;

}

.hero-trust strong {

    font-size: 25px;

}

.hero-trust small {

    color: #91a5c7;

    font-size: 12px;

    margin-top: 1px;

}

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

.herovisual {

    width:90%;

		height:100%;


	

}

.hero-circle {

    position: absolute;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    border: 2px solid rgba(40,156,255,.2);

    right: 60px;

    top: 35px;

}

.hero-circle::before {

    content: "";

    position: absolute;

    inset: 0px;

    border-radius: 50%;

    border: 7px dashed rgba(40,156,255,.25);

    animation: rotateCircle 20s linear infinite;
	


}
@keyframes rotateCircle {

    to {
        transform: rotate(360deg);
    }

}


.person-container {

    position: relative;

    width: 100%;
	
	padding-top:50px ;

    height: 100%;

    right: 30px;

    bottom: 0;

    overflow: hidden;

}
.person-glow {

    position: absolute;

    width: 250px;

    height: 250px;

    border-radius: 50%;

    background: #0b8cff;

    filter: blur(70px);

    opacity: .25;

    top: 100px;

    left: 100px;

}

.hero-person {

    position: relative;

    width: 100%;

    height: 89%;

    object-fit: cover;

    object-position: center;

    border-radius: 45% 45% 0 0;

    mix-blend-mode: normal;
	

    filter:
        saturate(.9)
        contrast(1.08);

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

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

}

@keyframes personFloat {

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

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

}

/* FLOATING CARDS */

.tech-card {

    position: absolute;

    min-width: 200px;

    padding: 10px 13px;

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

    border-radius: 8px;

    background:
        rgba(5,29,67,.72);

    backdrop-filter: blur(12px);

    box-shadow:
        0 12px 35px rgba(0,0,0,.2);

    display: flex;

    align-items: center;

    gap: 9px;

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

}

.tech-card strong {

    display: block;

    font-size: 13px;

    color: white;

}

.tech-card small {

    display: block;

    font-size: 9px;

    color: #7eb5ed;

    margin-top: 3px;

}

.tech-icon {

    width: 30px;

    height: 30px;

    border: 1px solid #168fff;

    border-radius: 7px;

    display: grid;

    place-items: center;

    color: #27c7ff;

    font-size: 15px;

}

.code-card {

    top: 220px;
    right: 450px;

}

.data-card {

    top: 110px;
    right: 80px;

    animation-delay: .7s;

}

.web-card {

    top: 260px;
    right: 30px;

    animation-delay: 1.2s;

}

.cyber-card {

    top: 390px;
    right: 50px;

    animation-delay: 1.7s;

}

@keyframes cardFloat {

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

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

}

/* =========================================================
   FEATURE STRIP
========================================================= */

.features {

    width: min(1110px, 88%);

    margin: -30px auto 0;

    position: relative;

    z-index: 10;

    background: white;

    border-radius: 10px;

    box-shadow:
        0 15px 45px rgba(3,18,46,.13);

    display: grid;

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

    padding: 20px 25px;
	
	color:black;

}

.feature {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 5px 18px;

    border-right: 1px solid #e9edf3;

}
.feature:last-child {

    border-right: none;

}
.feature-icon {

    color: var(--blue);

    font-size: 26px;

}

.feature strong {

    font-size: 10px;

    display: block;

}

.feature p {

    color: #788399;

    font-size: 8px;

    line-height: 1.5;

    margin-top: 4px;

}

/* =========================================================
   GLOBAL SECTION
========================================================= */

.section {

    width: min(1180px, 92%);

    margin: auto;

    padding: 75px 0;

}

.section-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 25px;

}

.section-label {

    color: var(--blue);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;

}

.section h2 {

    font-size: 24px;

    letter-spacing: -.8px;

    margin-top: 6px;

}

.outline-small {

    border: 1px solid #8da6df;

    color: #144dbb;

    padding: 9px 20px;

    border-radius: 7px;

    font-size: 9px;

    font-weight: 700;

    transition: .3s ease;

}

.outline-small:hover {

    background: var(--blue);

    color: white;

    border-color: var(--blue);

    transform: translateY(-2px);

}

/* =========================================================
   COURSE GRID
========================================================= */

.course-grid {

    display: grid;

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

    gap: 9px;

}

.course-card {

    min-height: 155px;

    padding: 18px 13px;

    background: white;

color:black;

    border: 1px solid #e3e7ee;

    border-radius: 7px;

    text-align: center;

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

    position: relative;

    overflow: hidden;

}

.course-card::before {

    content: "";

    position: absolute;

    width: 90px;

    height: 90px;

    background: rgba(20,88,214,.05);

    border-radius: 50%;

    right: -40px;

    top: -40px;

    transition: .4s ease;

}

.course-card:hover {

    transform: translateY(-8px);

    border-color: rgba(21,87,214,.3);

    box-shadow:
        0 15px 35px rgba(4,36,87,.1);

}

.course-card:hover::before {

    transform: scale(2);

}

.course-icon {

    width: 43px;

    height: 43px;

    margin: 0 auto 12px;

    border-radius: 9px;

    display: grid;

    place-items: center;

    font-size: 20px;

    font-weight: 700;

    color: #1454c6;

    background:
        linear-gradient(
            145deg,
            #e9f2ff,
            #f5f9ff
        );

}

.course-card h3 {

    font-size: 11px;

    line-height: 1.3;

}

.course-card p {

    font-size: 8px;

    color: #7a8496;

    line-height: 1.5;

    margin: 7px 0;

}

.course-card a {

    font-size: 10px;

    color: var(--blue);

    font-weight: 700;

}

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

.training-section {

    padding-top: 10px;

}

.center-heading {

    text-align: center;

    margin-bottom: 25px;

}

.center-heading h2 {

    font-size: 25px;

}

.heading-line {

    width: 30px;

    height: 2px;

    background: var(--blue);

    margin: 9px auto;

}

.training-grid {

    display: grid;

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

    gap: 12px;

}

.training-card {

    background: white;

    border: 1px solid #e1e6ef;

    border-radius: 8px;

    overflow: hidden;

    transition: .4s ease;

}

.training-card:hover {

    transform: translateY(-8px);

    box-shadow:
        0 20px 40px rgba(5,28,66,.1);

}
.training-image {

    height: 120px;

    position: relative;

    overflow: hidden;

}

.training-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.2),
            transparent
        );

}

.training-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform .6s ease;

}

.training-card:hover .training-image img {

    transform: scale(1.08);

}

.training-image span {

    position: absolute;

    left: 10px;
	
    top: 10px;

    z-index: 2;

    background: white;

    color: var(--blue);

    font-size: 7px;

    font-weight: 800;

    padding: 5px 7px;

    border-radius: 4px;

}

.training-content {

    padding: 13px;

    text-align: center;

}

.training-content h3 {

    font-size: 11px;

}

.training-content p {

    font-size: 8px;

    color: #788399;

    line-height: 1.5;

    min-height: 30px;

    margin: 7px 0;

}
.training-content a {

    color: var(--blue);

    font-size: 8px;

    font-weight: 700;

}

/* =========================================================
   DARK FEATURE
========================================================= */

.dark-feature-section {

    width: min(1180px, 92%);

    margin: 0 auto 70px;

    padding: 25px;

    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(28,100,230,.2),
            transparent 35%
        ),

        linear-gradient(
            120deg,
            #02112f,
            #061d43
        );

    border-radius: 5px;

    color: white;

    display: grid;

    grid-template-columns: 1fr ;

}

.dark-feature {

    display: flex;

    align-items: center;

    gap: 60px;
	padding-left:40px;

}

.dark-content {

    max-width: 100%;

}

.dark-content > span {

    color: #48a6ff;

    font-size: 30px;

    font-weight: 800;

}

.dark-content h2 {

    font-size: 25px;

    margin: 7px 0;

}

.dark-content p {

    color: #a8b8d1;

    font-size: 19px;

    line-height: 1.7;

    margin-bottom: 12px;

}

.dark-btn {

    display: inline-block;

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

    border-radius: 6px;

    padding: 8px 13px;

height:50px;
width:200px;
    font-size: 18px;

    transition: .3s ease;
	
	background:transparent;
	
	color:white;

}

.dark-btn:hover {

    background: var(--orange);

    border-color: var(--orange);

    transform: translateY(-3px);

}

/* INSTRUCTORS */

.instructor-stack {

    display: flex;

    align-items: center;

}
.instructor {

    width: 200px;

    height: 200px;

    border-radius: 8%;

    overflow: hidden;

    border: 3px solid #071c3e;

    margin-left: -9px;

    transition: .35s ease;

}
.instructor:first-child {

    margin-left: 0;

}

.instructor:hover {

    transform: translateY(-8px);

    z-index: 3;

}
.instructor img {

    width: 100%;
    height: 100%;
    object-fit: cover;

}


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

.cta-section {

    width: min(1180px, 92%);

    margin: 0 auto 0;

    min-height: 75px;

    position: relative;

    overflow: hidden;

    border-radius: 6px 6px 0 0;

    background:
        linear-gradient(
            100deg,
            #2146bd,
            #173ca8
        );

    color: white;

}

.cta-pattern {

    position: absolute;

    inset: 0;

    opacity: .15;

    background-image:

        radial-gradient(
            circle,
            white 1px,
            transparent 1px
        );

    background-size: 16px 16px;

}

.cta-content {

    min-height: 75px;

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 14px 45px;

}

.cta-content span {

    font-size: 7px;

    color: #8fc5ff;

    font-weight: 800;

}

.cta-content h2 {

    font-size: 20px;

    margin: 3px 0;

}

.cta-content p {

    font-size: 8px;

    color: #cbd8f5;

}

.cta-button {

    background:
        linear-gradient(
            135deg,
            var(--orange),
            #ff9433
        );

    padding: 12px 24px;

    border-radius: 6px;

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

    box-shadow:
        0 8px 20px rgba(0,0,0,.2);

    transition: .35s ease;

}

.cta-button:hover {

    transform:
        translateY(-4px)
        scale(1.03);

}

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

.footer {

    background:
        linear-gradient(
            130deg,
            #020d24,
            #031a3d
        );

    color: white;

    padding-top: 40px;

}

.footer-container {

    width: min(1180px, 92%);

    margin: auto;

    display: grid;

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

    gap: 35px;

    padding-bottom: 30px;

}

.footer-logo .logo-text strong {

    color: white;

}

.footer-logo .logo-text small {

    color: #94a7c6;

}

.footer-brand > p {

    max-width: 240px;

    color: #9baecc;

    font-size: 8px;

    line-height: 1.7;

    margin-top: 15px;

}

.footer-social {

    display: flex;

    gap: 8px;

    margin-top: 15px;

}

.footer-social a {

    width: 24px;

    height: 24px;

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

    border-radius: 50%;

    display: grid;

    place-items: center;

    font-size: 8px;

    transition: .3s ease;

}

.footer-social a:hover {

    background: var(--orange);

    border-color: var(--orange);

    transform: translateY(-4px);

}

.footer-column {

    display: flex;

    flex-direction: column;

    gap: 9px;

}

.footer-column h4 {

    font-size: 15px;

    letter-spacing: .8px;

    color: white;

    margin-bottom: 5px;

}

.footer-column a,
.footer-column p {

    font-size: 18px;

    color: #9eafca;

    transition: .3s ease;

    line-height: 1.5;

}

.footer-column a:hover {

    color: var(--orange);

    transform: translateX(3px);

}

.contact-column p {

    display: flex;

    gap: 6px;

}

.copyright {

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

    text-align: center;

    color: #7185a5;

    font-size: 12px;

    padding: 14px;

}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes titleIn {

    from {

        opacity: 0;

        transform: translateY(25px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

.reveal-left {

    animation:
        revealLeft 1s ease both;

}

@keyframes revealLeft {

    from {

        opacity: 0;

        transform: translateX(-40px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}


/*about us css*/

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

.header-section-about{
	width:100% auto;
	height:550px;
	background:red;
}

.about-hero {

  height:460px;
	

    position: relative;

    overflow: show;

    color: white;

    background:

radial-gradient(
            circle at 70% 50%,
            rgba(25,100,230,.2),
            transparent 35%
        ),

        linear-gradient(
            110deg,
            #020d25 0%,
            #041a40 58%,
            #061b3c 100%
        );

}

/* GRID */

.hero-background-grid {

    position: absolute;

    inset: 0;

    opacity: .18;

    background-image:

        linear-gradient(
            rgba(55,137,255,.14) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(55,137,255,.14) 1px,
            transparent 1px
        );

   

    mask-image:
        linear-gradient(
            to right,
            black 10%,
            transparent 85%
        );
  
}

.imgs{
	height:100%;
width:60%;
}

/* GLOW */

.hero-glow-about {

    position: absolute;

    width: 380px;

    height: 510px;

    border-radius: 50%;

    right: 20%;

    top: -120px;

    background: #087dff;
	
    filter: blur(100px);

    opacity: .99;

    animation:
        heroGlow 7s
        ease-in-out
        infinite
        alternate;

}

@keyframes heroGlow {

    from {

        transform:
            translateX(-30px)
            scale(.9);

    }
	
	to {

        transform:
            translateX(30px)
            scale(1.1);

    }

}

/* CONTAINER */

.hero-contain-about {

    width:
        100%;

   height: 100%;

    margin: auto;

    display: grid;

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


    position: relative;

    z-index: 2;

}


.text{
	 width:
        190%;

   height: 100% ;
   padding:20px 0px 2px 3px;

   margin-top:30px;
}
/* HERO COPY */

.hero-copy-about {

    padding:
     60px 0px 2px 30px; ;

    animation:
        heroText 1s
        ease
        both;
	
		 width:
        100%;

}

@keyframes heroText {

    from {

        opacity: 0;

        transform:
            translateX(-35px);

    }

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}

/* BREADCRUMB */

.breadcrumb-about {

    display: flex;

    gap: 9px;

    align-items: center;

    font-size: 12px;

    color: #b7c7e3;

    top: 46px;

	position:absolute;

}

.breadcrumb-about a {

    color: white;

}

.breadcrumb-about a:hover {

    color: var(--orange);

}

/* HERO TITLE */
.hero-copy-about{
	margin-left:20px;
}
.hero-copy-about h1 {
width:40%;
    font-size:
        clamp(
            70px,
            4vw,
            70px
        );

    line-height: 1.1;

    letter-spacing: -1.8px;

    font-weight: 800;
	
	margin-bottom:20px;
}

.hero-copy-about h1 span {

    color:
        #3472ff;

}


/* HERO DESCRIPTION */

.hero-copy-about p {

    max-width: 460px;

    font-size: 18px;

    line-height: 1.7;

    color: #d2ddf0;
  letter-spacing: 1px;
}

/* HERO IMAGE */

.hero-image {
width:100%;
    

    position: relative;

    overflow: hidden;

    animation:
        heroImage 1.2s
        ease
        both;

}

@keyframes heroImage {

    from {

        opacity: 0;

        transform:
            translateX(50px)
            scale(1.05);

    }

    to {

        opacity: 1;

        transform:
            translateX(0)
            scale(1);

    }

}

.hero-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    filter:
        saturate(.9)
        contrast(1.05);

    transition:
        transform 1s ease;

}

.hero-image:hover img {

    transform:
        scale(1.06);

}

.image-overlay {

    position: absolute;

    z-index: 2;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            #04183d 0%,
            rgba(4,24,61,.65) 18%,
            rgba(4,24,61,.05) 70%
        );

}

/* =========================================================
   STORY
========================================================= */
.body-section-about{
	width:100% auto;
	height:1600px;
	background:white;
	color:black;
}

.story-section {

    padding:
        58px 40px 40px;

}


.story-container {

    width:
        min(1080px, 88%);

    margin: auto;

    display: grid;

    grid-template-columns:
        42%
        58%;

    gap: 55px;

    align-items: center;

}

/* STORY IMAGE */

.story-image {

    height: 300px;

    position: relative;

    padding-left: 8px;

}

.story-image img {

    height: 100%;

    object-fit: cover;

    border-radius: 12px;

    position: relative;

    z-index: 2;

    box-shadow:
        0 18px 40px rgba(5,28,65,.12);

}

.dot-pattern {

    position: absolute;

    width: 70px;

    height: 70px;

    left: -12px;

    top: 42px;

    background-image:
        radial-gradient(
            #3574ee 1.5px,
            transparent 1.5px
        );

    background-size: 9px 9px;

    z-index: 1;

}

.blue-corner {

    position: absolute;

    width: 70px;

    height: 65px;

    background: var(--blue);

    right: -12px;

    bottom: -10px;

    border-radius: 8px;

    z-index: 1;

}

/* STORY CONTENT */

.story-content {

    animation:
        revealRight 1s
        ease
        both;

}

@keyframes revealRight {

    from {

        opacity: 0;

        transform:
            translateX(40px);

    }

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}

.section-label {

    color: var(--blue);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .5px;

}

.story-content h2 {

    font-size: 24px;

    line-height: 1.25;

    margin:
        8px 0 14px;

}
.story-content p {

    color: #667286;

    font-size: 16px;

    line-height: 1.75;

    margin-bottom: 12px;

}

.signature {

    font-family:
        "Brush Script MT",
        cursive;

    font-size: 25px;

    color: #111b2d;

    margin-top: 15px;

}

.founder {

    display: block;

    font-size: 9px;

    margin-top: 4px;

}

/* =========================================================
   THREE INFORMATION CARDS
========================================================= */

.three-cards {

    width:
        min(1080px, 88%);

    margin:
        20px auto 55px;

    display: grid;

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

    gap: 20px;

}

.info-card {

    min-height: 190px;

    background:
        linear-gradient(
            145deg,
            #f7f9fd,
            #f1f4fa
        );

    border:
        1px solid #edf0f5;

    border-radius: 11px;

    padding: 20px;

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

    position: relative;

    overflow: hidden;

}

.info-card::before {

    content: "";

    position: absolute;

    width: 150px;

    height: 150px;

    border-radius: 50%;

    background:
        rgba(32,95,220,.04);

    right: -80px;

    top: -80px;

    transition: .5s ease;

}

.info-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 20px 40px rgba(4,28,66,.1);

}

.info-card:hover::before {

    transform:
        scale(1.6);

}

.circle-icon {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    background:
        linear-gradient(
            135deg,
            #326dff,
            #174bcf
        );

    color: white;

    font-size: 23px;

    box-shadow:
        0 8px 18px rgba(31,86,218,.25);

    margin-bottom: 13px;

    transition: .4s ease;

}

.info-card:hover .circle-icon {

    transform:
        rotate(10deg)
        scale(1.08);

}

.info-card h3 {

    font-size: 13px;

    margin-bottom: 12px;

}

.info-card p {

    color: #657187;

    font-size: 16px;

    line-height: 1.7;

}

.info-card ul {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 8px;

}

.info-card li {

    font-size: 16px;

    color: #46536a;

    position: relative;

    padding-left: 17px;

}

.info-card li::before {

    content: "✓";

    position: absolute;

    left: 0;

    top: 0;

    width: 11px;

    height: 11px;

    border-radius: 50%;

    background: var(--blue);

    color: white;

    display: grid;

    place-items: center;

    font-size: 7px;

    font-weight: bold;

}

.info-card li::before {

    content: "✓";

    position: absolute;

    left: 0;

    top: 0;

    width: 11px;

    height: 11px;

    border-radius: 30%;

    background: var(--blue);

    color: white;

    display: grid;

    place-items: center;

    font-size: 7px;

    font-weight: bold;

}

/* =========================================================
   VALUES
========================================================= */

.values-section {

    width:
        min(1100px, 90%);

    margin: auto;

    padding:
        10px 0 55px;

}

.values-heading {

    text-align: center;

    margin-bottom: 32px;

}

.values-heading > span {

    color: var(--blue);

    font-size: 9px;

    font-weight: 800;

}

.values-heading h2 {

    font-size: 24px;

    margin-top: 7px;

}

.heading-line {

    width: 50px;

    height: 2px;

    background: var(--blue);

    margin:
        10px auto 0;

}

.values-grid {

    display: grid;

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

}

.value {

    text-align: center;

    padding:
        0 22px;

    border-right:
        1px dotted #cad3e1;

}


.value:last-child {

    border-right: none;

}

.value-icon {

    height: 52px;

    display: grid;

    place-items: center;

    color: var(--blue);

    font-size: 34px;

    margin-bottom: 8px;

    transition: .4s ease;

}

.value:hover .value-icon {

    transform:
        translateY(-8px)
        scale(1.08);

}

.value h3 {

    font-size: 16px;

    margin-bottom: 9px;

}

.value p {

    color: #717c8e;

    font-size: 14px;

    line-height: 1.65;

}
/* =========================================================
   IMPACT
========================================================= */

.impact-section {

    min-height: 230px;

    position: relative;

    overflow: hidden;

    color: white;

    background:
linear-gradient(
            rgba(2,18,48,.70),
            rgba(2,18,48,.70)
        ),
        url("media/imager.jpg")
        center/cover no-repeat;

}

.impact-overlay {

    position: absolute;

    inset: 0;

    background-image:

        radial-gradient(
            rgba(55,133,255,.2) 1px,
            transparent 1px
        );

    background-size: 15px 15px;

    opacity: 1;

}

.impact-heading {

    text-align: center;
	  padding-top: 10px;

}

.impact-heading span {

    color: #4091ff;

    font-size: 12px;

    font-weight: 800;

}

.impact-heading h2 {

    font-size: 21px;
  margin-top: 5px;
  

}

.impact-line {

    width: 35px;

    height: 3px;

    background: var(--blue-light);

    margin:
        8px auto 25px;

}

.stats-grid {

    display: grid;

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

}

.stat {

    text-align: center;

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

    position: relative;

}
.stat:last-child {

    border-right: none;

}
.stat-icon {

    width: 46px;

    height: 46px;

    margin:
        0 auto 8px;

    display: grid;

    place-items: center;

    border-radius: 7px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #326dff,
            #164bd5
        );

    font-size: 19px;

    box-shadow:
        0 8px 20px rgba(15,80,255,.25);

    animation:
        iconPulse 3s
        ease-in-out
        infinite;

}

.stat:nth-child(2) .stat-icon {

    animation-delay: .3s;

}

.stat:nth-child(3) .stat-icon {

    animation-delay: .6s;

}


.stat:nth-child(4) .stat-icon {

    animation-delay: .9s;

}


.stat:nth-child(5) .stat-icon {

    animation-delay: 1.2s;

}
@keyframes iconPulse {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-5px);

    }

}

.stat strong {

    display: block;

    font-size: 24px;

    letter-spacing: -.7px;

}
.stat span {

    font-size: 12px;

    color: #c2cee2;

}
.journey-content {

    position: relative;

    z-index: 2;

    min-height: 95px;

    padding:
        15px 40px;

    display: flex;

    align-items: center;

    gap: 18px;

}

.rocket {

    width: 55px;

    height: 55px;

    border-radius: 50%;

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

    display: grid;

    place-items: center;

    font-size: 26px;

    flex-shrink: 0;

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

}

@keyframes rocketFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(-4deg);

    }

    50% {

        transform:
            translateY(-7px)
            rotate(4deg);

    }

}

.journey-text {

    flex: 1;

}

.journey-text h2 {

    font-size: 26px;

    margin-bottom: 4px;

}

.journey-text p {

    color: #d2dcf7;

    font-size: 13px;

}

.about-us{
	margin-top:30px;
}

/* =========================================================
  COURSE PAGE
========================================================= */
.header-section-course{
	width:100%;
	height:500px;
	background:white;
}

.courser{
	width:100% auto;
	height:1270px ;
	background:white;
	color:black;
	padding-top:50px;
}


.hero-course {

    height: 440px;
width: 100%;
    position: relative;

    overflow: hidden;

    color: white;

    background:

        radial-gradient(
            circle at 75% 40%,
            rgba(18,104,255,.25),
            transparent 30%
        ),

        radial-gradient(
            circle at 30% 70%,
            rgba(0,191,255,.08),
            transparent 30%
        ),

        linear-gradient(
            115deg,
            #020c20,
            #04183c 55%,
            #02112d
        );

}

.hero-course:before{
	content:"";
	position:absolute;
	inset:0;
	background-image:linear-gradient(rgba(35,118,221,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(35,118,221,.08) 1px,transparent 1px);
	background-size:52px 52px;
	mask-image:linear-gradient(90deg,transparent,#000 45%,#000)
	}
	
	.hero-grid-course{
	position:absolute;
	inset:0;
	background-image:
	radial-gradient(circle at 20% 60%,rgba(0,164,255,.8) 0 1px,transparent 2px),radial-gradient(circle at 68% 25%,rgba(0,164,255,.8) 0 1px,transparent 2px),radial-gradient(circle at 82% 74%,rgba(0,164,255,.7) 0 1px,transparent 2px);
	background-size:170px 130px,210px 170px,190px 150px;
	animation:drift 14s linear infinite
	}
	
	@keyframes drift{
		0%{transform:translate3d(0,0,0)
		}
		50%{transform:translate3d(15px,-10px,0)
		}
		100%{transform:translate3d(0,0,0)}}
		
		
		
		/* =========================================================
  orb
========================================================= */
		.hero-orb-course{
	position:absolute;
	border-radius:50%;
	filter:blur(1px);
	box-shadow:0 0 28px rgba(0,153,255,.7);
	background:white;
	width:20px;
	height:20px;
	animation:pulse 2.8s ease-in-out infinite
	}
	
	.hero-orb-one-course{
	left:66%;
	top:38%;
	}
	.hero-orb-two-course{
		left:78%;
		top:72%;
		animation-delay:1s;
		}
		
		.hero-orb-three-course{
		left:67%;
		top:62%;
		animation-delay:1s;
		
		}
		
		.hero-orb-four-course{
		left:45%;
		top:72%;
		animation-delay:1s;
		}
		
		@keyframes pulse{
			0%,100%{opacity:.4;
			transform:scale(.7)
			}
			50%{opacity:1;
			transform:scale(1.7)}
			}
			
			
			/* =========================================================
  hero-inner
========================================================= */
			.hero-inner-course {
	min-height:100%;
	display:grid;
	grid-template-columns:1fr 1.2fr;
	position:relative;
	width:98%;
	margin: 0 0 0 30px ;
		
	}
	
	.hero-copy-course{
	padding:50px 0 30px;

	animation:heroIn .9s cubic-bezier(.2,.8,.2,1) both
	}
	
	@keyframes heroIn{
		from{opacity:0;
		transform:translateY(24px)}
		to{opacity:1;transform:none
		}
	}
	
	.breadcrumb-course{
	display:flex;
	gap:10px;
	font-size:13px;
	color:#c9d4e8;
	margin-bottom:60px;
	}
	
	.breadcrumb-course a{
		color:#fff;
		}
		
		.breadcrumb-course a:hover{
		color:orange;
		}
	
	.hero-course h1{
	font-size:70px;
	line-height:1.1;
	margin-top:20px;
	letter-spacing:-1.6px
	}
	
	.accent-line{
	width:120px;
	height:3px;
	background:var(--orange);
	margin-bottom:40px;
	}
ul .list{
	margin-left:110px;
}
li{
	letter-spacing:1.6px;
	font-size:20px;
	margin-top:20px;
	margin-left:10px;
}	

.get{
	color:var(--orange);
	font-weight:600;
}
	.hero-copy-course  p{
	max-width:500px;
	font-size:19px;
	color:#eef4ff;
	margin-top:20px;
	line-height:1.3;
	letter-spacing:2px;
	}
	
	.hero-visual-course{
	height:100%;
	align-self:end;
	position:relative;
	display:flex;
	justify-content:flex-end;
	animation:visualIn 1.2s .15s cubic-bezier(.2,.8,.2,1) both}
	
	@keyframes visualIn{
		from{opacity:0;
		transform:translateX(50px) scale(1.03)}
		to{opacity:1;transform:none}
		}
		
		.hero-visual-course:after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(90deg,#061b43 0%,transparent 28%),linear-gradient(0deg,#061b43 0%,transparent 18%);
	pointer-events:none
	}
	
	.hero-visual img{
	height:100%;
	width:100%;
	object-fit:cover;
	object-position:center;
	border-radius:0;
	mix-blend-mode:screen;
	opacity:.98
	}
	
	/* =========================================================
  all courses
========================================================= */
.courses-section{
	padding:36px 42px;
	background:#fff
	}
	
	.courses-layout{
	display:grid;
	grid-template-columns:
	minmax(0,1fr) 260px;
	gap:24px
	}
	
	.section-heading{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:18px
	}
	
	.section-heading h2{
	font-size:30px;
	margin:0;
	letter-spacing:-1px
	}
	.section-heading span{
		font-size:15px;
		color:#7b8495;
		margin-left:18px
		}
		
		.view-switch{
	display:flex;
	border-radius:7px;
	padding:2px;
	gap:3px
	}
	
	.view-switch button{
	border:1px solid #dfe4ed;
	background:transparent;
	padding:7px 11px;
	font-size:15px;
	color:#687288;
	border-radius:5px
	}
	.view-switch .selected{
	background:var(--blue);
	color:#fff
	}
	.course-grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:14px
	}
	
	.course-cards{
	min-height:229px;
	border:1px solid #e3e8f0;
	border-radius:11px;
	padding:15px 15px 13px;
	background:#fff;
	box-shadow:0 3px 12px rgba(16,42,82,.02);
	animation:cardIn .65s var delay both;
	transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease
	}
	
	@keyframes cardIn{
		from{opacity:0;
		transform:translateY(90px)}
		to{opacity:1;
		transform:none}
		}
		
		.course-cards:hover{
	transform:translateY(-10px);
	box-shadow:0 16px 45px rgba(9,31,78,.09);
	border-color:#cbd7ef;
	}
	
	
	.cou-icons{
	width:65px;
	height:65px;
	border-radius:9px;
	font-weight:800;
	font-size:39px;
	margin-bottom:15px;
	display:grid;
	place-items:center;
	}
	
	.blue{
	background:#edf3ff;
	color:#1752cf;
	}
	
	.orange{
		background:#fff0e7;
		color:#df4f0c
		}
		.green{
			background:#eafbf3;
			color:#00a874
			}
			.purple{
				background:#f2edff;
				color:#7651d8
				}
				.yellow{
					background:#fff7dd;
					color:#df9600
					}
		.teal{
	background:#e9fbf5;
	color:#08a67f
	}
	.mint{
		background:#ebfbf3;
		color:#15aa75
		}
		.violet{
		background:#f1edff;
		color:#6449d6
		}
		.coral{
			background:#fff0e9;
			color:#f04f1b
			}
			
			.course-cards h3{
	font-size:19px;
	line-height:1.2;
	margin:0 0 8px;
	letter-spacing:-.2px
	}
	
	.course-cards p{
	font-size:14px;
	line-height:1.45;
	color:#687287;
	margin:0 0 10px;
	min-height:43px;
	}
	
	.meta{
	display:flex;
	gap:14px;
	font-size:9px;
	color:#566176;
	margin-bottom:12px
	}
	
	.course-cards a{
	font-size:12px;
	font-weight:700;
	color:#2457e8;
	}
	.course-cards a b{
		font-size:15px;
		margin-left:5px
		}
		
		.course-cards-wide{
	grid-column:auto;
	display:grid;
	grid-template-columns:55px 1fr auto;
	column-gap:12px;
	align-items:start;
	min-height:125px
	}
	
	.course-cards-wide .cou-icons{
	margin-bottom:0
	}
	.course-cards-wide p{
		min-height:auto;
		margin-bottom:8px
		}
		.course-cards-wide>a{
			align-self:end;
			padding-bottom:4px;
			white-space:nowrap
			}
			
			.sidebar{
	display:flex;
	flex-direction:column;
	gap:16px
	}
	
	.filter-panel,.program-panel{
	border:1px solid #e3e8f0;
	border-radius:10px;
	background:#fff;
	padding:19px 16px;
	box-shadow:0 3px 12px rgba(16,42,82,.025)
	}
	
	.sidebar h2{
	font-size:14px;
	margin:0 0 16px
	}
	
	.filter-panel label{
	display:block;
	font-size:9px;
	color:#6e7789;
	margin-bottom:11px
	}
	
	.filter-panel select{
	display:block;
	width:100%;
	border:1px solid #dce2eb;
	border-radius:6px;
	background:#fff;
	color:#28354c;
	padding:9px 10px;
	margin-top:5px;
	font-size:10px;
	outline:none;
	}
	
	.filter-button{
	width:100%;
	border:0;
	border-radius:6px;
	background:#2457e8;
	color:#fff;
	padding:9px;
	font-size:10px;
	font-weight:700;
	margin-top:2px;
	box-shadow:0 7px 16px rgba(36,87,232,.2)
	}
	
	.reset-button{
	display:block;
	border:0;
	background:none;
	color:#2457e8;
	font-size:9px;
	margin:10px auto 0
	}
      
	.program-panel>a:not(.all-programs){
	display:grid;
	grid-template-columns:24px 1fr 10px;
	gap:9px;
	align-items:center;
	padding:10px 0;
	border-top:1px solid #eef1f5;
	}
	
	.program-icon{
	width:21px;
	height:21px;
	display:grid;
	place-items:center;
	border-radius:6px;
	color:#2457e8;
	font-size:20px
	}
	
	.program-panel strong,.program-panel small{
	display:block
	}
	.program-panel strong{
		font-size:9px
		}
		.program-panel small{
			font-size:8px;
			color:#788297;
			margin-top:2px
			}.program-panel>a>b{
				color:#17243e
				}
				
				.all-programs{
	display:block;
	color:var(--blue);
	font-weight:700;
	font-size:10px;
	text-align:center;
	margin-top:10px
	}
	.all-programs b{
		font-size:15px;
		
		}
		
		.assessment{
	height:220px;
	border-radius:9px;
	overflow:hidden;
	background:linear-gradient(145deg,#071e46,#03122e);
	color:#fff;
	position:relative;
	padding:20px 17px;
	box-shadow:0 15px 30px rgba(3,18,46,.16)
	}
	
	.assessment h2{
	font-size:16px;
	line-height:1.25;
	margin:0px 0 8px
	}
	.assessment p{
		font-size:9px;
		color:#e5ecfa;
		max-width:205px;
		line-height:1.5;
		margin:0 0 18px
		}
		
		.assessment a{
	display:inline-block;
	border:1px solid var(--orange);
	color:#fff;
	border-radius:6px;
	padding:8px 11px;
	font-size:15px;
	font-weight:700;
	position:relative;
	z-index:2
	}
	
	.assessment a:hover{
		background:orange;
	}
	.assessment-art{
	position:absolute;
	right:-4px;
	bottom:-20px;
	width:150px;
	height:125px
	}
	.clipboard{
	position:absolute;
	width:200px;
	height:80px;
	right:36px;
	bottom:0;
	border:5px solid #dfeaff;
	border-radius:7px;
	background:#fff;
	box-shadow:0 0 0 5px #1d4fbf55
	}
	.clipboard:before{
	content:"";
	position:absolute;
	left:15px;
	top:-13px;
	width:160px;
	height:30px;
	border:4px solid #dfeaff;
	border-radius:8px;
	background:#2363d9
			}
.clipboard:after{
	content:"✓ ✓ ✓ ✓";
	position:absolute;
	left:20px;
	top:25px;
	color:#36b66f;
	letter-spacing:2px;
	font-weight:800;
	font-size:20px
				}
				
.target{
	position:absolute;
	right:20px;
	bottom:14px;
	width:70px;
	height:68px;
	border-radius:50%;
	border:9px solid #2f72d9;
	box-shadow: inset 0 0 0 8px #fff,
	inset 0 0 0 17px #2f72d9;
					}
					
.target:after{
	content:"";
	position:absolute;
	width:19px;
	height:100px;
	background:#2f72d9;
	right:-12px;
	bottom:3px;
	transform:rotate(48deg);
	border-radius:9px,
	} 
			
.benefits{
	background:#061a3d;
	color:#fff;
	padding:25px 0 27px;
	border-top:1px solid rgba(255,255,255,.04);
	width:90%;
	margin:auto auto 50px auto ;
	border-radius:90px;
	height:170px;
	}
	
	.benefits>div>h2{
	text-align:center;
	font-size:16px;
	margin:0 0 25px;
	}
	
	.benefit-grid{
	display:grid;
	grid-template-columns:repeat(6,0.3fr)
	}
	
	.benefit-grid article{
	text-align:center;
	padding:0 12px;
	min-height:63px;
	border-right:1px dotted #7181a2;
	animation:floatIn .7s both
	}
	
	@keyframes floatIn{
		from{opacity:0;
		transform:translateY(12px)}
		to{opacity:1;transform:none}
		}
		
		.benefit-grid article:last-child{
	border-right:0
	}
	.benefit-grid span{
		display:block;
		color:#4b83ff;
		font-size:40px;
		line-height:1;
		margin-bottom:9px
		}
		.benefit-grid h3{
			font-size:14px;
			line-height:1.45;
			margin:0;
			color:#f3f6fc
			}
			
			@media (prefers-reduced-motion:reduce){
	*,
	*:before,
	*:after{
		animation-duration:.01ms!important;
		animation-iteration-count:1!important;
		scroll-behavior:auto!important;
		transition:none!important
		}
		}
		
		
		
		/* =========================================================
  TRANING PROGRAM PAGE
========================================================= */
.header-section-training-program{
	width:100%;
	height:600px;
	background:white;
}

.body-section-training-program{
	width:100% auto;
	height:1500px ;
	background:white;
	color:black;
	padding:10px 30px 0 30px;
	 
}


.hero-training {

   height: 80%;

    position: relative;

    overflow: hidden;

    color: white;

    background:

        radial-gradient(
            circle at 75% 40%,
            rgba(18,104,255,.25),
            transparent 30%
        ),

        radial-gradient(
            circle at 30% 70%,
            rgba(0,191,255,.08),
            transparent 30%
        ),

        linear-gradient(
            115deg,
            #020c20,
            #04183c 55%,
            #02112d
        );

}
.hero-inner1{
	height:100%;
	display:grid;
	grid-template-columns:1fr 1.2fr;
	position:relative;
	z-index:2;
	
	}
	
	.hero-copy-training{
	padding:45px 45px 60px;
	}
	
	.breadcrumbs-training{
	font-size:12px;
	font-weight:600;
	opacity:.9;
	margin-bottom:60px;
	}
	
	.breadcrumbs-training a:hover{
		color:var(orange);
	}
	.breadcrumbs-training span{
		padding:0 7px;
		opacity:.55;
		}
		
		.eyebrow-training{
	font-size:12px;
	letter-spacing:7.2px;
	font-weight:800;
	color:#d9e7ff;
	margin:0 0 8px
	}
	
	.hero-training h1{
	font-family:"Playfair Display",Georgia,serif;
	font-size:56px;
	line-height:1.02;
	margin:0 0 17px;
	letter-spacing:-1px;
	}
	
	.hero-text-training{
	max-width:535px;
	color:#e6eefc;
	font-size:19px;
	line-height:1.65;
	margin:0
	}
	
	.hero-stats{
	display:flex;
	align-items:center;
	gap:60px;
	margin-top:29px;
	margin-left:19px;
	}
	
	.hero-stat{
	display:flex;
	flex-direction:column
	}
	.hero-stat b{
		font-family:"Playfair Display",Georgia,serif;
		font-size:23px
		}
		.hero-stat span{
			font-size:11px;
			color:#d8e5fb
			}
			
			.stat-divider{
	height:45px;
	width:1px;
	background:rgba(255,255,255,.35)
	}
	
	.hero-media-training{
	position:relative;
	min-height:470px;
	display:flex;
	align-items:stretch;
	justify-content:flex-end;
	
	}
	
	.hero-photo{
	width:100%;
	height:100%;
	overflow:hidden;
	clip-path:ellipse(78% 75% at 73% 50%);
	position:relative;
	}
	
	.hero-photo:after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(90deg,rgba(3,27,65,.55),transparent 45%,rgba(2,20,49,.1))
	}
	
	.hero-photo img{
	height:100%;
	object-fit:cover;
	filter:saturate(.95);
	transform:scale(1.03);
	animation:slowZoom 12s ease-in-out infinite alternate
	}
	
	@keyframes slowZoom{
		from{transform:scale(1.03)}
	to{transform:scale(1.10)}
	}
	
	.hero-slogan{
	position:absolute;
	right:15px;
	top:68px;
	font-family:"Playfair Display",serif;
	font-size:29px;
	line-height:1.5;
	font-style:italic;
	font-weight:700;
	text-align:center;
	transform:rotate(-4deg);
	text-shadow:0 3px 20px rgba(0,0,0,.25)
	}
	
	.hero-slogan em{
	color:#ff9a3c
	}
	.hero-slogan i{
		display:block;
		width:70px;
		height:3px;
		background:var(--orange);
		transform:rotate(-5deg);
		margin:7px auto;
		}
		
		.filters-wrap{
	background:#fff;
	padding:25px 0;
	border-bottom:1px solid #edf2f9;
	box-shadow:0 7px 25px rgba(12,43,86,.04);
	
	}
	
	.filters{
	display:flex;
	gap:10px;
	overflow:auto;
	padding:0 2px
	}
	
	.filter{
	min-width:140px;
	height:55px;
	border:1px solid #dce7f6;
	border-radius:10px;
	background:#fbfdff;
	color:#0d4da9;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	font-size:12px;
	font-weight:700;
	transition:.3s
	}
	
	.filter.active{
	background:linear-gradient(135deg,#075be8,#156ef4);
	color:#fff;
	border-color:#075be8;
	box-shadow:0 8px 20px rgba(7,91,232,.18)
	}
	
	.filter:hover{
	transform:translateY(-3px)
	}
	
	.programs-section{
	padding:50px 0 62px;
	background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)
	}
	
	.programs-layout{
	display:grid;
	grid-template-columns:minmax(0,1fr) 285px;
	gap:24px
	}
	
	
	.section-heading{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	gap:20px;
	margin-bottom:23px
	}
	
	.section-heading h2{
	font-family:"Playfair Display",Georgia,serif;
	font-size:31px;
	line-height:1.1;
	margin:0 0 8px
	}
	.section-heading p:not(.eyebrow){
	max-width:640px;
	color:#66748c;
	margin:0;
	font-size:14px;
	}
	
	.eyebrow.blue{
	color:#0756b9;
	margin-bottom:4px
	}
	
	.section-heading select{
	height:43px;
	border:1px solid #cbdcf3;
	background:#fff;
	border-radius:8px;
	padding:0 30px 0 14px;
	color:#31527c;
	font-weight:600;
	outline:none;
	}
	
	.card-grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:20px;
	}
	
	.program-card{
	border:1px solid #dbe6f5;
	background:#fff;
	border-radius:12px;
	overflow:hidden;
	box-shadow:0 7px 22px rgba(23,60,105,.04);
	transition:transform .35s,box-shadow .35s;
	animation:cardIn .7s both;
	}
	
	@keyframes cardIn{
		from{opacity:0;
		transform:translateY(18px)}
	to{opacity:1;transform:none}
	}
	
	.program-card:nth-child(2){
	animation-delay:.06s
	}
	.program-card:nth-child(3){
		animation-delay:.12s
		}
	.program-card:nth-child(4){
	animation-delay:.18s
	}
	.program-card:nth-child(5){
	animation-delay:.24s
	}
	.program-card:nth-child(6){
	animation-delay:.30s
	}
	.program-card:nth-child(7){
	animation-delay:.36s
	}
	.program-card:nth-child(8){
	animation-delay:.42s
	}
	.program-card:nth-child(9){
	animation-delay:.48s
	}
	
	.program-card:hover{
	transform:translateY(-8px);
	box-shadow:0 18px 40px black;
	}
	
	.card-image{
	height:150px;
	position:relative;
	overflow:hidden;
	background:#dbe7f7
	}
	
	.card-image img{
	height:100%;
	width:100%;
	object-fit:cover;
	transition:transform .7s;
	}
	.program-card:hover .card-image img{
	transform:scale(1.08)
	}
	
	
	.tag{
	position:absolute;
	left:11px;
	top:10px;
	padding:5px 11px;
	border-radius:18px;
	color:#fff;
	font-size:12px;
	font-weight:800;
	box-shadow:0 4px 12px rgba(0,0,0,.14)
	}
	
	.tag.purple{
	background:#6840df
	}
	.tag.green{
	background:#159c84
	}
	.tag.orange{
	background:#ef7617
	}
	.tag.cyan{
	background:#089db1
	}
.tag.red{
	background:#ef3447
	}
	.tag.blue{
		background:#1264cc;
		}
		
		.card-body{
	padding:13px 14px 14px
	}
	
	.card-body h3{
	font-family:"Playfair Display",Georgia,serif;
	font-size:16px;
	line-height:1.2;
	margin:0 0 8px;
	}
	
	.card-body p{
	font-size:11.5px;
	color:#65728a;
	line-height:1.5;
	min-height:51px;
	margin:0 0 11px;
	}
	
	.meta{
	display:flex;
	justify-content:space-between;
	gap:6px;
	color:#64748a;
	font-size:9.5px;
	margin-bottom:9px;
	}
	
	.price{
	display:block;
	color:#075ce7;
	font-size:16px;
	margin-bottom:10px;
	}
	
	.outline-btn{
	height:37px;
	border:1px solid #0a67f1;
	border-radius:7px;
	color:#075ce7;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:11px;
	font-weight:700;
	transition:.3s;
	}
.outline-btn:hover{
	background:#075ce7;
	color:#fff
	}
	
	.sidebar{
	display:flex;
	flex-direction:column;
	gap:18px
	}
	
	.side-card{
	border-radius:12px;
	padding:22px 20px;
	border:1px solid #dbe8f8;
	background:#f1f7ff
	}
	
	.side-icon{
	width:45px;
	height:45px;
	border-radius:50%;
	background:#d8eaff;
	color:#075be8;
	display:grid;
	place-items:center;
	font-size:24px;
	margin-bottom:12px
	}
	
	.side-card h2{
	font-family:"Playfair Display",Georgia,serif;
	font-size:20px;
	line-height:1.25;
	margin:0 0 15px
	}
	
	.why ul{
	list-style:none;
	padding:0;
	margin:0 0 19px
	}
	.why li{
		position:relative;
		padding:5px 0 5px 24px;
		font-size:12.5px;
		color:#395273
		}
		
		
		.why li:before{
			content:"✓";
			position:absolute;
			left:0;
			top:6px;
			width:15px;
			height:15px;
			border-radius:50%;
			background:#0b67eb;
			color:#fff;
			font-size:10px;
			text-align:center;
			font-weight:900
			}
			
			.cta{
	background:linear-gradient(145deg,#061b43,#092f68);
	border-color:#061b43;
	color:#fff;
	padding:24px 20px
	}
	
	.cta .rocket{
	font-size:31px;
	color:#72b0ff;
	margin-bottom:10px
	}
	.cta p{
		font-size:12px;
		color:#dbe7f8;
		margin:0 0 18px
		}
		.cta .btn{
			width:100%;
			font-size:17px;
			}
			
			
.help{
 background:#f2f8ff
}
.help p{
 font-size:11.5px;
 color:#60718a
 }
.help div{
 font-size:11px;
 color:#315273;
 margin-top:15px;
 line-height:1.5
 }
 
/* =========================================================
   STUDENT's PAGE
========================================================= */	
	.header-section-students{
	width:100%;
	height:520px;
	background:white;
}

.body-section-students{
	width:100% auto;
	height:1500px ;
	background:white;
	color:black;
	padding:10px 30px 0 30px;
	 
}

/* HERO-STUDENT */
.hero-students{
	height:400px;
	overflow:hidden;
	position:relative;
	color:#fff;
	background:radial-gradient(circle at 62% 35%,#155ce8 0,#063ca8 35%,#021b4a 75%,#03122f 100%)
	}
	
	.hero-stars-students{
	position:absolute;
	inset:0;
	opacity:.42;
	background-image:
	radial-gradient(circle,rgba(80,166,255,.85) 0 1px,transparent 1.5px);
	background-size:68px 68px;
	animation:stars 12s linear infinite;
	}
	
	@keyframes stars{
		0%{background-position:0 0}
		50%{background-position:35px -20px}
		100%{background-position:0 0}
		}
		
		.hero-container-students{
	height:100%;
	width:100%;
	display:grid;
	grid-template-columns:0.5fr 1fr;
	align-items:stretch;
	position:relative;
	align-self:center;
	padding-bottom:7px;
	z-index:2;
	animation:fadeUp .9s both
	}
	
	@keyframes fadeUp{
		from{opacity:0;transform:translateY(24px)}
		to{opacity:1;transform:none}
		}
		
		.hero-copy-students{
			padding:19px 10px 10px 36px;
			
		}
		
		.eyebrow-students{
	font-family:var(--serif);
	font-weight:700;
	color:#fff;
	font-size:15px;
	letter-spacing:2.1px;
	margin:0 0 9px;
	
	}
	
	.eyebrow-students span:before{
	content:"";
	display:inline-block;
	width:27px;
	height:2px;
	background:var(--orange);
	vertical-align:middle;
	margin-left:1px;
	}
	
	.hero-students h1{
	font-family:var(--serif);
	font-size:49px;
	line-height:1;
	margin:0 0 12px;
	letter-spacing:-1px
	}
	
	.hero-lead-students{
	font-family:var(--serif);
	font-size:16px;
	line-height:1.65;
	max-width:410px;
	margin:0 0 17px;
	color:#f3f6ff
	}
	
	.hero-actions-students{
	display:flex;
	gap:13px
	}
	
	.button-students{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	font-family:var(--serif);
	font-weight:700;
	font-size:13px;
	padding:10px 16px;
	border-radius:7px;
	transition:.3s ease
	}
	
	.button-orange-students{
	background:var(--orange);
	color:#fff;
	box-shadow:0 9px 20px rgba(255,134,24,.27)
	}
	.button-orange-students:hover{
		transform:translateY(-3px);
		box-shadow:0 13px 27px rgba(255,134,24,.36)
		}
		
		.button-outline-students{
	border:1px solid #d6e2ff;
	color:#fff
	}
	
	.button-outline-students:hover{
		background:#fff;color:var(--navy)
		}
		
	.play-students{
	border:1px solid #fff;
	border-radius:50%;
	width:18px;
	height:18px;
	display:grid;
	place-items:center;
	font-size:7px;
	margin-left:8px
	}
	
	.hero-photo-students{
	height:100%;
	position:relative;
	overflow:hidden;
	border-top-left-radius:105px;
	
	}
	
	.hero-photo-students:before{
	content:"";
	position:absolute;
	z-index:2;
	inset:0;
	background:linear-gradient(90deg,#063da7 0,transparent 20%),
	linear-gradient(0deg,rgba(3,25,62,.18),transparent 45%);
	pointer-events:none
	}
	
	.hero-photo-students img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
	animation:heroZoom 12s ease-in-out infinite alternate
	}
	
	@keyframes heroZoom{
		from{transform:scale(1)}
		to{transform:scale(1.055)}
		}
		
		/* BENEFITS */
.student-benefits{
	margin-top:-80px;
	position:relative;
	z-index:5;
		box-shadow:var(--shadow)
	}
	
	.students-benefit-card{
		background:#fff;
		border-radius:11px;
		box-shadow:var(--shadow);
		min-height:138px;
		display:grid;
		grid-template-columns:repeat(4,1fr);
		padding:22px 12px
		}
		
		.students-benefit-card article{
	text-align:center;
	padding:0 24px;
	border-right:4px solid #e7ecf3;
	animation:cardIn .65s both
	}
	.students-benefit-card article:last-child{
		border-right:0
		}
		
		.feature-icon-students{
	display:grid;
	place-items:center;
	background:#eef4ff;
	color:var(--blue);
	border-radius:50%;
	width:40px;
	height:40px;
	margin:0 auto 8px;
	font-size:18px;
	font-weight:800
	}
		.students-benefit-card h2{
	font-family:var(--serif);
	font-size:16px;margin:0 0 5px
	}
	.students-benefit-card p{
		font-family:var(--serif);
		font-size:12px;
		color:#657087;
		line-height:1.55;
		margin:0
		}
		
		/* STATS */
.stats-section-students{
	padding:14px 0 19px
	}
	.stats-card-students{
		height:77px;
		border-radius:9px;
		background:linear-gradient(110deg,#06218a,#0632a6,#05257e);
		color:#fff;
		display:grid;
		grid-template-columns:repeat(4,1fr);
		align-items:center;
		box-shadow:0 11px 25px #092e8b22
		}
		
		.stats-card-students article{
	height:52px;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:12px;
	border-right:1px solid rgba(255,255,255,.16)
	}
	.stats-card-students article:last-child{
		border-right:0
		}
		
		.stats-card-students article>span{
	color:#31a1ff;
	font-size:26px
	}
	.stats-card-students strong{
		display:block;
		font-family:var(--serif);
		font-size:20px;
		line-height:1
		}
		.stats-card-students small{
			display:block;
			font-family:var(--serif);
			font-size:12px;
			margin-top:4px
			}
			
			/* RESOURCES SECTIONS */
.section-students{
	padding:0 0 22px;

	}
	.section-kicker-students{
	color:#0b51d4;
	font-family:var(--serif);
	font-size:12px;
	margin:0 0 4px
	}
	.section-kicker-students:before{
		display:none
		}
		
		.section-title-students{
	font-family:var(--serif);
	font-size:20px;
	line-height:1.1;
	margin:0 0 17px;
	letter-spacing:-.3px;
	
	}
/* RESOURCES */
.resource-grid-students{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:9px
	}
	
	.resource-card-students{
	min-height:96px;
	border:1px solid var(--line);
	border-radius:8px;
	padding:12px 10px;
	display:grid;
	grid-template-columns:31px 1fr;
	gap:9px;
	transition:.3s ease;
	animation:cardIn .65s both
	}
	
	@keyframes cardIn{
		from{opacity:0;
		transform:translateY(15px)}
		to{opacity:1;transform:none}
		}
		
		.resource-card-students:hover{
	transform:translateY(-60px);
	border-color:#b7caf5;
	box-shadow:var(--shadow)
	}
	
	.resource-icon-students{
	width:29px;
	height:29px;
	border-radius:7px;
	font-size:30px;
	margin:0;
	}
	.resource-card-students h3{
		font-family:var(--serif);
		font-size:16px;
		margin:1px 0 4px
		}
		.resource-card-students p{
			font-family:var(--serif);
			font-size:14px;
			line-height:1.45;
			color:#657087;
			margin:0 0 9px 0;
			}
			.resource-card-students a{
				font-family:var(--serif);
				font-size:14px;
				color:#0755da;
				font-weight:700;
				text-align:center;
				}
				
				/* STORIES */
.stories-students{
	padding-top:20px
	}
	.story-grid-students{
		display:grid;
		grid-template-columns:repeat(3,1fr);
		gap:18px;
		margin-inline:24px
		}
		
		.centered-students{
		text-align:center
		}
		
		.story-card-students{
	border:1px solid var(--line);
	border-radius:9px;
	padding:13px 18px 11px;
	min-height:150px;
	transition:.3s ease;
	margin-top:9px;
	}
	.story-card-students:hover{
		transform:translateY(-5px);
		box-shadow:var(--shadow)
		}
.student-head-students{
	display:flex;
	align-items:center;
	gap:9px
	}
	
		.avatar-students{
		width:47px;
		height:47px;
		border-radius:50%;
		display:grid;
		place-items:center;
		color:#fff;
		font-family:var(--serif);
		font-weight:700;
		font-size:9px;
		background:linear-gradient(145deg,#0757d8,#0aa3a1)
		}
		
		.student-head-students h3{
	font-family:var(--serif);
	font-size:14px;margin:0
	}
	.student-head-students small{
		font-family:var(--serif);
		font-size:12px;
		color:#647087
		}
		
		.story-card-students  blockquote{
	font-family:var(--serif);
	font-size:14px;
	line-height:1.65;
	color:#4c5870;
	margin:13px 0 7px
	}
	.stars-students {
		color:#ffb600;
		font-size:15px;
		letter-spacing:3px
		}
		
		.slider-dots-students{
	display:flex;
	justify-content:center;
	gap:16px;
	margin:13px 0
	}
	.slider-dots-students i{
		display:block;
		width:7px;
		height:7px;
		background:#dfe4ed;
		border-radius:50%
		}
		.slider-dots-students i.active{
			background:#0759e8
			}
			
			/* EVENTS STUDENTS*/
.events-students{
	padding-top:0
	}
	.events-heading-students{
		display:flex;
		justify-content:space-between;
		align-items:end;
		margin-bottom:13px
		}
		.events-heading-students .section-title{
			margin:0
			}
			.text-button{
				border:1px solid #8eaffc;
				color:#0755da;
				padding:7px 12px;
				border-radius:6px;
				font-family:var(--serif);
				font-weight:700;
				font-size:8px
				}