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

:root{

--bg:#08111F;
--card:#101C31;
--blue:#4F8CFF;
--cyan:#00D4FF;
--white:#FFFFFF;
--gray:#C8D2E8;
--border:rgba(255,255,255,.08);

}

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

body{

font-family:'Poppins',sans-serif;
background:linear-gradient(135deg,#071321,#0B2140,#153C68);
color:var(--white);
overflow-x:hidden;

}

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

.background{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-2;

background:
radial-gradient(circle at top,#1b5cff33,transparent 40%),
radial-gradient(circle at bottom,#00d2ff22,transparent 40%);

}

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

.navbar{

position:fixed;
top:0;
left:0;
width:100%;

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

padding:22px 8%;

background:rgba(10,18,36,.75);
backdrop-filter:blur(18px);

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

z-index:1000;

}

.logo{

font-size:30px;
font-weight:700;
font-family:'Orbitron',sans-serif;
text-decoration:none;
color:white;

}

.nav-links{

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

}

.nav-links a{

text-decoration:none;
color:#d8e5ff;
transition:.3s;

}

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

color:var(--cyan);

}

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

.hero{

padding:170px 8% 90px;

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

text-align:center;

}

.logo-img{

width:130px;
height:130px;

object-fit:cover;

border-radius:30px;

margin-bottom:25px;

box-shadow:0 20px 45px rgba(79,140,255,.35);

}

.badge{

display:inline-block;

padding:12px 28px;

border-radius:50px;

background:rgba(79,140,255,.15);

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

color:#9FD7FF;

font-weight:600;

margin-bottom:25px;

}

.hero h1{

font-size:65px;
font-family:'Orbitron',sans-serif;

margin-bottom:20px;

}

.hero h1 span{

color:var(--cyan);

}

.hero p{

max-width:720px;

margin:auto;

font-size:20px;

line-height:1.8;

color:var(--gray);

}

/*=========================
CERTIFICATES
=========================*/

.certificates{

padding:0 8% 100px;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:35px;

}

.certificate-card{

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

backdrop-filter:blur(18px);

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

border-radius:24px;

overflow:hidden;

transition:.35s;

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

}

.certificate-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 45px rgba(79,140,255,.35);

}

.certificate-card img{

width:100%;
height:220px;

object-fit:cover;

}

.certificate-card h2{

padding:22px 25px 10px;

font-size:26px;

}

.certificate-card p{

padding:0 25px;

color:var(--gray);

}

.certificate-card span{

display:block;

padding:15px 25px;

color:var(--cyan);

font-weight:600;

}

.view-btn{

display:block;

margin:20px 25px 25px;

padding:14px;

text-align:center;

text-decoration:none;

border-radius:50px;

background:linear-gradient(135deg,var(--blue),var(--cyan));

color:white;

font-weight:600;

transition:.3s;

}

.view-btn:hover{

transform:translateY(-3px);

box-shadow:0 10px 30px rgba(0,212,255,.35);

}

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

footer{

padding:35px;

text-align:center;

color:#B6C7E8;

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

}

/*=========================
TOP BUTTON
=========================*/

.top{

position:fixed;

right:30px;
bottom:30px;

width:55px;
height:55px;

border:none;

border-radius:50%;

background:linear-gradient(135deg,var(--blue),var(--cyan));

color:white;

font-size:22px;

cursor:pointer;

display:none;

transition:.3s;

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

}

.top:hover{

transform:translateY(-5px);

}

/*=========================
ANIMATION
=========================*/

.hero,
.certificate-card{

animation:fadeUp .8s ease;

}

@keyframes fadeUp{

from{

opacity:0;
transform:translateY(40px);

}

to{

opacity:1;
transform:translateY(0);

}

}

/*=========================
RESPONSIVE
=========================*/

@media(max-width:900px){

.hero h1{

font-size:48px;

}

.nav-links{

gap:18px;

}

}

@media(max-width:700px){

.navbar{

padding:18px 6%;

}

.nav-links{

display:none;

}

.hero{

padding:150px 6% 70px;

}

.hero h1{

font-size:36px;

}

.hero p{

font-size:17px;

}

.logo-img{

width:110px;
height:110px;

}

.certificates{

padding:0 6% 80px;

}

}