@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root{

    --bg:#050608;
    --bg2:#0c0e12;
    --card:#12151d;
    --red:#ff3d3d;
    --red2:#d71920;
    --blue:#18b4ff;
    --white:#fff;
    --text:#d8d8d8;
    --border:rgba(255,255,255,.08);

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

background:var(--bg);
font-family:'Inter',sans-serif;
overflow-x:hidden;
color:white;

}

img{
width:100%;
display:block;
}

a{
text-decoration:none;
color:white;
}

ul{
list-style:none;
}

.container{

width:min(1300px,90%);
margin:auto;

}

/* --- Header / Navbar --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
    background-color: rgba(5, 5, 7, 0.95);
    border-bottom: 1px solid #1e293b;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo {
    font-family: 'Orbitron', sans-serif;
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-icon {
    color: #ff2a2a;
}

.nav-links a {
    color: #94a3b8;
    text-decoration: none;
    margin: 0 12px;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.5px;
    transition: color 0.3s;
}

.nav-links a:hover, .nav-links a.active {
    color: #ff2a2a;
}

.btn-enroll {
    background-color: #ff2a2a;
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    font-family: 'Orbitron', sans-serif;
    font-size: 13px;
    font-weight: 700;
    border-radius: 4px;
    box-shadow: 0 0 15px rgba(255, 42, 42, 0.4);
}

.hero{

height:100vh;

position:relative;

display:flex;

align-items:center;

overflow:hidden;

}

.hero video{

position:absolute;

width:100%;

height:100%;

object-fit:cover;

}

.overlay{

position:absolute;

width:100%;

height:100%;

background:

linear-gradient(to right,

rgba(4,6,8,.72),

rgba(5,6,10,.60),

rgba(5,6,10,.50));

}

.hero-grid{

position:relative;

z-index:5;

display:grid;

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

align-items:center;

gap:80px;

}

.tag{

display:inline-block;

padding:10px 18px;

background:rgba(20,150,255,.12);

color:#29b5ff;

font-size:12px;

letter-spacing:2px;

border-radius:50px;

margin-bottom:35px;

}

.hero h1{

font-size:82px;

line-height:0.95;

font-weight:900;

letter-spacing:-4px;

}

.hero h1 span{

color:#ff4b4b;

}

.hero p{

margin:40px 0;

font-size:18px;

line-height:1.9;

color:#bdbdbd;

max-width:620px;

}

.hero-buttons{

display:flex;

gap:20px;

}

.primary{

padding:18px 35px;

background:linear-gradient(135deg,#ff4040,#b70918);

border-radius:8px;

font-weight:700;

}

.secondary{

padding:18px 35px;

background:#191d25;

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

border-radius:8px;

font-weight:700;

}

.hero-right{

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

}

.stats-grid{

display:grid;
grid-template-columns:repeat(2,230px);
gap:22px;

}

.stat-card{

position:relative;

padding:35px 28px;

border-radius:22px;

background:rgba(22,22,28,.55);

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

backdrop-filter:blur(16px);

overflow:hidden;

transition:.4s;

}

.stat-card::before{

content:"";

position:absolute;

width:220px;
height:220px;

background:radial-gradient(circle,
rgba(255,60,60,.22),
transparent 70%);

top:-120px;
right:-120px;

}

.stat-card:hover{

transform:translateY(-8px);

border-color:#ff3b3b;

box-shadow:

0 20px 45px rgba(255,0,0,.18);

}

.icon{

font-size:22px;

margin-bottom:18px;

color:#ff4444;

}

.stat-card h2{

font-size:42px;

font-weight:900;

margin-bottom:8px;

}

.stat-card span{

font-size:13px;

letter-spacing:2px;

color:#9d9d9d;

}

.hero::before{

content:"";

position:absolute;

width:100%;
height:100%;

background-image:

linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

background-size:60px 60px;

z-index:1;

}

.hero::after{

content:"";

position:absolute;

width:600px;

height:600px;

border-radius:50%;

background:radial-gradient(circle,

rgba(255,40,40,.18),

transparent 70%);

right:-180px;

bottom:-220px;

filter:blur(40px);

}

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

.stat-card{

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

}

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

animation-delay:.8s;

}

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

animation-delay:1.6s;

}

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

animation-delay:2.4s;

}


.trust-strip{

background:#070b12;

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

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

padding:18px 0;

}

.trust{

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:25px;

}

.trust span{

font-size:13px;

letter-spacing:2px;

color:#9b9b9b;

font-weight:700;

text-transform:uppercase;

}

.primary,
.secondary,
.nav-btn{

transition:.35s;

}

.primary:hover{

transform:translateY(-5px);

box-shadow:

0 0 30px rgba(255,0,0,.4);

}

.secondary:hover{

background:#232833;

transform:translateY(-5px);

}


.features{

padding:120px 0;

background:#050608;

position:relative;

overflow:hidden;

}

.features::before{

content:"";

position:absolute;

width:500px;

height:500px;

left:-250px;

top:-120px;

background:

radial-gradient(circle,

rgba(255,40,40,.08),

transparent 70%);

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title span{

font-size:13px;

letter-spacing:3px;

color:#18b4ff;

text-transform:uppercase;

font-weight:700;

}

.section-title h2{

margin-top:18px;

font-size:58px;

font-weight:900;

}

.section-title h2 span{

color:#ff4343;

}

.section-title p{

margin-top:20px;

font-size:18px;

color:#999;

}

.feature-grid{

display:grid;

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

gap:30px;

}

.feature-card{

position:relative;

background:#111318;

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

border-radius:18px;

padding:35px;

transition:.4s;

overflow:hidden;

}

.feature-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:3px;

background:

linear-gradient(90deg,#ff4545,#ff8a00);

transform:scaleX(0);

transition:.4s;

transform-origin:left;

}

.feature-card:hover::before{

transform:scaleX(1);

}

.feature-card:hover{

transform:translateY(-10px);

border-color:#ff4343;

box-shadow:

0 20px 45px rgba(255,0,0,.15);

}

.feature-icon{

width:58px;

height:58px;

border-radius:14px;

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

background:

rgba(255,55,55,.12);

color:#ff4343;

margin-bottom:25px;

}

.feature-card h3{

font-size:24px;

margin-bottom:15px;

font-weight:800;

}

.feature-card p{

font-size:16px;

line-height:1.8;

color:#999;

}

.feature-card{

opacity:0;

transform:translateY(50px);

transition:1s;

}

.feature-card.show{

opacity:1;

transform:translateY(0);

}


@media(max-width:991px){

.feature-grid{

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

}

.section-title h2{

font-size:42px;

}

}

@media(max-width:768px){

.feature-grid{

grid-template-columns:1fr;

}

.features{

padding:80px 0;

}

.section-title h2{

font-size:34px;

}

.feature-card{

padding:28px;

}

}


.about{

padding:140px 0;

background:#050608;

position:relative;

overflow:hidden;

}

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.about-image{

position:relative;

}

.about-image img{

width:100%;

height:500px;

object-fit:cover;

border-radius:24px;

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

}

.glow{

position:absolute;

width:420px;

height:420px;

background:

radial-gradient(circle,

rgba(255,45,45,.22),

transparent 70%);

left:-120px;

bottom:-100px;

filter:blur(40px);

z-index:-1;

}

.experience{

position:absolute;

left:35px;

bottom:30px;

width:320px;

padding:22px;

background:rgba(20,20,25,.75);

backdrop-filter:blur(18px);

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

border-radius:16px;

}

.experience h3{

font-size:26px;

margin-bottom:8px;

}

.experience p{

font-size:14px;

color:#bbb;

}

.sub-title{

display:inline-block;

margin-bottom:20px;

font-size:13px;

letter-spacing:3px;

color:#18b4ff;

font-weight:700;

}

.about-content h2{

font-size:58px;

line-height:1;

margin-bottom:30px;

font-weight:900;

}

.about-content h2 span{

color:#ff4040;

}

.about-content p{

font-size:17px;

line-height:2;

color:#9f9f9f;

margin-bottom:35px;

}

.about-content ul{

margin-bottom:40px;

}

.about-content ul li{

position:relative;

padding-left:34px;

margin-bottom:18px;

font-size:17px;

color:#ddd;

}

.about-content ul li::before{

content:"✔";

position:absolute;

left:0;

top:0;

color:#ff4343;

font-weight:700;

}

.about-btn{

display:inline-block;

padding:18px 36px;

background:linear-gradient(135deg,#ff4545,#b60d18);

border-radius:10px;

font-weight:700;

letter-spacing:1px;

transition:.35s;

}

.about-btn:hover{

transform:translateY(-5px);

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

}

.about-image{

overflow:hidden;

border-radius:24px;

}

.about-image img{

transition:1s;

}

.about-image:hover img{

transform:scale(1.08);

}

.about-image,
.about-content{

opacity:0;

transform:translateY(60px);

transition:1s;

}

.about-image.show,
.about-content.show{

opacity:1;

transform:translateY(0);

}

@media(max-width:991px){

.about-grid{

grid-template-columns:1fr;

}

.about-content{

margin-top:60px;

}

.about-content h2{

font-size:42px;

}

}

@media(max-width:768px){

.about{

padding:90px 0;

}

.about-content h2{

font-size:34px;

}

.experience{

position:relative;

left:0;

bottom:0;

width:100%;

margin-top:20px;

}

.about-image img{

height:350px;

}

}

.services{

padding:120px 0;

background:#08090d;

}

.services-grid{

display:grid;

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

gap:35px;

margin-top:70px;

}

.service-card{

background:#111318;

border-radius:20px;

overflow:hidden;

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

transition:.4s;

}

.service-card:hover{

transform:translateY(-12px);

border-color:#ff4040;

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

}

.service-img{

overflow:hidden;

height:240px;

}

.service-img img{

width:100%;

height:100%;

object-fit:cover;

transition:1s;

}

.service-card:hover img{

transform:scale(1.1);

}

.service-content{

padding:30px;

}

.service-content h3{

font-size:28px;

margin-bottom:18px;

}

.service-content p{

color:#9f9f9f;

line-height:1.8;

margin-bottom:25px;

}

.service-content ul{

margin-bottom:30px;

}

.service-content ul li{

margin-bottom:12px;

color:#ddd;

}

.service-content a{

display:inline-block;

padding:15px 28px;

background:linear-gradient(135deg,#ff4545,#b90d18);

border-radius:8px;

font-weight:700;

transition:.4s;

}

.service-content a:hover{

transform:translateY(-4px);

}

@media(max-width:991px){

.services-grid{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

.services-grid{

grid-template-columns:1fr;

}

}

.service-card{

opacity:0;

transform:translateY(70px);

transition:1s;

}

.service-card.show{

opacity:1;

transform:translateY(0);

}

.counter-section{

padding:110px 0;

background:

linear-gradient(180deg,#090b10,#050608);

}

.counter-wrapper{

display:grid;

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

gap:30px;

}

.counter-box{

background:#12151c;

padding:45px;

text-align:center;

border-radius:20px;

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

transition:.4s;

position:relative;

overflow:hidden;

}

.counter-box::before{

content:"";

position:absolute;

width:300px;

height:300px;

background:

radial-gradient(circle,

rgba(255,60,60,.18),

transparent 70%);

right:-160px;

top:-160px;

}

.counter-box:hover{

transform:translateY(-8px);

border-color:#ff4040;

box-shadow:0 20px 45px rgba(255,0,0,.18);

}

.counter-box h2{

font-size:58px;

font-weight:900;

color:#fff;

margin-bottom:12px;

}

.counter-box span{

font-size:15px;

letter-spacing:2px;

color:#999;

text-transform:uppercase;

}

.cta{

padding:100px 0 140px;

background:#050608;

}

.cta-box{

display:flex;

justify-content:space-between;

align-items:center;

padding:70px;

border-radius:25px;

background:

linear-gradient(135deg,

#c31821,

#7f0914);

position:relative;

overflow:hidden;

}

.cta-box::before{

content:"";

position:absolute;

width:500px;

height:500px;

background:

radial-gradient(circle,

rgba(255,255,255,.18),

transparent 70%);

right:-250px;

top:-250px;

}

.cta-box span{

font-size:13px;

letter-spacing:3px;

font-weight:700;

}

.cta-box h2{

margin:18px 0;

font-size:56px;

font-weight:900;

line-height:1.05;

}

.cta-box h2 span{

color:#fff;

}

.cta-box p{

font-size:18px;

max-width:600px;

opacity:.9;

line-height:1.8;

}

.cta-btn{

display:inline-block;

padding:20px 42px;

background:#fff;

color:#111;

font-weight:800;

border-radius:10px;

transition:.35s;

}

.cta-btn:hover{

transform:translateY(-5px);

}

@media(max-width:991px){

.counter-wrapper{

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

}

.cta-box{

flex-direction:column;

text-align:center;

gap:40px;

}

.cta-box h2{

font-size:42px;

}

}

@media(max-width:768px){

.counter-wrapper{

grid-template-columns:1fr;

}

.counter-box{

padding:35px;

}

.cta{

padding:80px 0;

}

.cta-box{

padding:40px 25px;

}

.cta-box h2{

font-size:34px;

}

}

.testimonials{

padding:120px 0;

background:#090b10;

}

.testimonial-wrapper{

display:flex;

gap:30px;

margin-top:70px;

}

.testimonial-card{

flex:1;

background:#111318;

padding:40px;

border-radius:22px;

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

transition:.4s;

}

.testimonial-card:hover{

transform:translateY(-10px);

border-color:#ff4040;

}

.stars{

font-size:24px;

color:#FFD700;

margin-bottom:25px;

}

.testimonial-card p{

line-height:2;

color:#bdbdbd;

margin-bottom:30px;

}

.testimonial-card h3{

font-size:22px;

margin-bottom:8px;

}

.testimonial-card span{

color:#999;

}

.faq{

padding:120px 0;

background:#050608;

}

.faq-wrapper{

max-width:900px;

margin:auto;

margin-top:60px;

}

.faq-item{

margin-bottom:20px;

background:#111318;

border-radius:15px;

overflow:hidden;

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

}

.faq-question{

padding:25px 30px;

display:flex;

justify-content:space-between;

cursor:pointer;

font-weight:700;

font-size:18px;

}

.faq-answer{

max-height:0;

overflow:hidden;

transition:.4s;

}

.faq-answer p{

padding:0 30px 25px;

line-height:2;

color:#aaa;

}

.faq-item.active .faq-answer{

max-height:250px;

}

footer{

background:#08090d;

padding:100px 0 40px;

}

.footer-grid{

display:grid;

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

gap:50px;

margin-bottom:50px;

}

.footer-grid h2{

font-size:36px;

margin-bottom:20px;

}

.footer-grid h3{

margin-bottom:20px;

}

.footer-grid p{

line-height:2;

color:#999;

}

.footer-grid ul li{

margin-bottom:15px;

}

.footer-grid ul li a{

color:#aaa;

}

.social{

display:flex;

gap:15px;

}

.social a{

width:45px;

height:45px;

border-radius:50%;

background:#111318;

display:flex;

justify-content:center;

align-items:center;

transition:.3s;

}

.social a:hover{

background:#ff4040;

}

footer hr{

border:none;

height:1px;

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

margin:40px 0;

}

.copyright{

text-align:center;

color:#777;

}

@media(max-width:991px){

.footer-grid{

grid-template-columns:1fr 1fr;

}

.testimonial-wrapper{

flex-direction:column;

}

}

@media(max-width:768px){

.footer-grid{

grid-template-columns:1fr;

}

}