:root{

--primary:#0F766E;
--secondary:#2563EB;
--accent:#F59E0B;

--dark:#0F172A;
--light:#F8FAFC;

}

html{
scroll-behavior:smooth;
}

body{
font-family:'Inter',sans-serif;
background:#f8fafc;
overflow-x:hidden;
}

/* ==========================
NAVIGATION
========================== */

.navbar{
transition:.4s;
}

.navbar.scrolled{
background:#fff;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}

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

.btn-primary{
background:var(--primary);
color:#fff;
padding:14px 30px;
border-radius:50px;
transition:.4s;
font-weight:600;
}

.btn-primary:hover{
transform:translateY(-3px);
}

.btn-secondary{
background:var(--secondary);
color:#fff;
padding:14px 30px;
border-radius:50px;
}

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

.hero-bg{

background:
linear-gradient(
rgba(0,0,0,.6),
rgba(0,0,0,.7)
),
url('../images/hero.jpg');

background-size:cover;
background-position:center;
background-attachment:fixed;

}

.glass{
backdrop-filter:blur(12px);
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.15);
}

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

.program-card,
.blog-card,
.partner-card{

transition:.4s ease;

}

.program-card:hover,
.blog-card:hover,
.partner-card:hover{

transform:translateY(-12px);
box-shadow:
0 20px 40px rgba(0,0,0,.12);

}

/* ==========================
COUNTERS
========================== */

.counter{
font-size:3rem;
font-weight:800;
}

/* ==========================
PARTNERS
========================== */

.partner-slider{
display:flex;
gap:70px;
align-items:center;
animation:scroll 25s linear infinite;
}

.partner-slider img{
height:70px;
object-fit:contain;
filter:grayscale(100%);
opacity:.8;
}

.partner-slider img:hover{
filter:none;
opacity:1;
}

@keyframes scroll{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-50%);
}

}

/* ==========================
SECTION TITLES
========================== */

.section-title{

font-size:3rem;
font-weight:800;
color:var(--dark);

}

.section-subtitle{

font-size:1.15rem;
line-height:1.8;

}

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

footer{

background:#020617;

}

footer a{
transition:.3s;
}

footer a:hover{
color:#fff;
}

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

.fade-up{

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

}

.fade-up.show{

opacity:1;
transform:translateY(0);
transition:.8s ease;

}

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

@media(max-width:768px){

.section-title{
font-size:2rem;
}

.counter{
font-size:2rem;
}

}