*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins,sans-serif;
scroll-behavior:smooth;
}

body{

background:#050816;
color:white;
overflow-x:hidden;

}

.bg-blur{

position:fixed;
border-radius:50%;
filter:blur(120px);
z-index:-1;

}

.blur1{

width:350px;
height:350px;
background:#00b7ff;
top:-100px;
left:-100px;

}

.blur2{

width:350px;
height:350px;
background:#8b5cf6;
bottom:-100px;
right:-100px;

}

nav{

display:flex;
justify-content:space-between;
align-items:center;
padding:25px 8%;
position:sticky;
top:0;
backdrop-filter:blur(15px);
background:rgba(255,255,255,.05);
z-index:100;

}

.logo{

font-size:30px;

}

.logo span{

color:#00d4ff;

}

nav ul{

display:flex;
gap:40px;
list-style:none;

}

nav a{

text-decoration:none;
color:white;
transition:.3s;

}

nav a:hover{

color:#00d4ff;

}

nav button{

padding:12px 25px;
border:none;
border-radius:30px;
background:#00d4ff;
cursor:pointer;
font-weight:600;

}

.hero{

display:flex;
justify-content:space-between;
align-items:center;
padding:80px 8%;
min-height:90vh;

}

.left{

width:50%;

}

.left h1{

font-size:65px;
line-height:75px;

}

.left span{

color:#00d4ff;

}

.left p{

margin:30px 0;
color:#c6c6c6;

}

.buttons{

display:flex;
gap:20px;

}

.btn1,.btn2{

padding:15px 35px;
border-radius:40px;
cursor:pointer;
font-size:16px;
border:none;

}

.btn1{

background:#00d4ff;

}

.btn2{

background:transparent;
border:2px solid #00d4ff;
color:white;

}

.right{

width:45%;
text-align:center;

}

.right img{

width:100%;
border-radius:30px;
box-shadow:0 20px 50px rgba(0,212,255,.4);

}

.info{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
padding:80px 8%;

}

.box{

background:rgba(255,255,255,.06);
padding:40px;
border-radius:25px;
text-align:center;
transition:.4s;
backdrop-filter:blur(15px);

}

.box:hover{

transform:translateY(-12px);

}

.box i{

font-size:45px;
color:#00d4ff;
margin-bottom:20px;

}

.courses{

padding:80px 8%;

}

.courses h2{

text-align:center;
font-size:45px;
margin-bottom:60px;

}

.cards{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;

}

.card{

background:rgba(255,255,255,.06);
padding:40px;
border-radius:25px;
transition:.4s;
backdrop-filter:blur(15px);

}

.card:hover{

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

}

.card h1{

margin:25px 0;
color:#00d4ff;

}

.card button{

padding:14px 30px;
border:none;
border-radius:30px;
background:#00d4ff;
cursor:pointer;

}

.reviews{

padding:80px 8%;

}

.reviews h2{

text-align:center;
font-size:45px;
margin-bottom:60px;

}

.review-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;

}

.review{

background:rgba(255,255,255,.06);
padding:35px;
border-radius:25px;
backdrop-filter:blur(15px);
transition:.4s;

}

.review:hover{

transform:translateY(-10px);

}

footer{

padding:70px 8%;
text-align:center;
background:#0b1120;

}

footer p{

margin-top:15px;
color:#bfbfbf;

}

@media(max-width:900px){

.hero{

flex-direction:column;
text-align:center;

}

.left,.right{

width:100%;

}

.left h1{

font-size:45px;
line-height:55px;

}

.cards,
.info,
.review-grid{

grid-template-columns:1fr;

}

nav ul{

display:none;

}

}

footer{

    background:#0b1120;

    padding:70px 8%;

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

}

.footer-container{

    max-width:1200px;

    margin:auto;

    text-align:center;

}

footer h2{

    font-size:34px;

    margin-bottom:12px;

}

footer span{

    color:#00d4ff;

}

.tagline{

    color:#b8c2d0;

    margin-bottom:30px;

}

.divider{

    width:100%;

    height:1px;

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

    margin:30px 0;

}

.footer-contact{

    display:flex;

    justify-content:center;

    gap:40px;

    flex-wrap:wrap;

    color:#cbd5e1;

}

.footer-links{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:28px;

    margin:25px 0;

}

.footer-links a{

    color:#d1d5db;

    text-decoration:none;

    transition:.3s;

}

.footer-links a:hover{

    color:#00d4ff;

}

.socials{

    margin:25px 0;

}

.socials a{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:45px;

    height:45px;

    margin:0 8px;

    border-radius:50%;

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

    color:white;

    transition:.3s;

}

.socials a:hover{

    background:#00d4ff;

    color:#08101d;

    transform:translateY(-5px);

}

.copyright{

    color:#9ca3af;

    margin-top:20px;

    font-size:14px;

}

@media(max-width:768px){

.footer-contact{

flex-direction:column;

gap:12px;

}

.footer-links{

gap:18px;

}

}