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



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

.programs-hero{
height:100vh;
position:relative;

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

overflow:hidden;
}

.programs-hero video{
position:absolute;
top:0;
left:0;

width:100%;
height:100%;

object-fit:cover;
}

.hero-overlay{
position:absolute;
inset:0;

background:
linear-gradient(
to bottom,
rgba(0,0,0,0.45),
rgba(0,0,0,0.92)
);
}

.hero-content{
position:relative;
z-index:2;

max-width:950px;
padding:20px;

text-align:center;
}

.hero-tag{
display:inline-block;

margin-bottom:25px;

font-size:14px;
letter-spacing:3px;

color:var(--gold);
}

.hero-content p{
max-width:720px;
margin:auto;
margin-top:30px;
margin-bottom:40px;
}

.hero-buttons{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

/* =========================================
INTRO
========================================= */

.intro-section{
text-align:center;
}

.intro-text{
max-width:850px;
margin:auto;
font-size:20px;
line-height:1.9;
}

/* =========================================
TRACKS
========================================= */

.tracks-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

.track-card{
background:#111;
padding:45px 35px;

border-radius:14px;

transition:0.5s;
position:relative;

overflow:hidden;
}

.track-card:hover{
transform:translateY(-10px);
}

.track-card::before{
content:"";
position:absolute;
inset:0;

background:
linear-gradient(
120deg,
transparent,
rgba(212,175,55,0.08),
transparent
);

opacity:0;
transition:0.5s;
}

.track-card:hover::before{
opacity:1;
}

.track-number{
font-size:54px;
font-weight:700;

color:var(--gold);

margin-bottom:25px;
}

.track-card h3{
margin-bottom:18px;
}

/* =========================================
EXPERIENCE
========================================= */

.experience-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.experience-image img{
width:100%;
height:600px;

object-fit:cover;
border-radius:14px;
}

.experience-content span{
display:block;

margin-bottom:20px;

font-size:14px;
letter-spacing:3px;

color:var(--gold);
}

.experience-content h2{
margin-bottom:25px;
}

.experience-content p{
margin-bottom:30px;
}

.experience-content ul{
list-style:none;
}

.experience-content li{
margin-bottom:18px;
position:relative;
padding-left:30px;
}

.experience-content li::before{
content:"•";

position:absolute;
left:0;

color:var(--gold);
font-size:22px;
}

/* =========================================
OUTCOMES
========================================= */

.outcomes-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.outcome-box{
background:#111;
padding:45px 25px;

border-radius:14px;
text-align:center;
}

.outcome-box h3{
font-size:56px;
color:var(--gold);
margin-bottom:15px;
}

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

.programs-cta{
text-align:center;

background:
linear-gradient(
rgba(0,0,0,0.78),
rgba(0,0,0,0.92)
),
url('../images/cta-bg.jpg') center/cover;
}

.programs-cta p{
max-width:700px;
margin:auto;
margin-top:20px;
margin-bottom:40px;
}

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

footer{
padding:30px;
text-align:center;
background:black;
}

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

.reveal{
opacity:0;
transform:translateY(60px);
transition:1s ease;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}

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

@media(max-width:1100px){

.tracks-grid{
grid-template-columns:1fr 1fr;
}

.outcomes-grid{
grid-template-columns:1fr 1fr;
}

.experience-grid{
grid-template-columns:1fr;
}

}

@media(max-width:768px){


.tracks-grid,
.outcomes-grid{
grid-template-columns:1fr;
}

.hero-buttons{
flex-direction:column;
align-items:center;
}

.experience-image img{
height:400px;
}

}

@keyframes menuFade{

from{
opacity:0;
transform:translateY(-10px);
}

to{
opacity:1;
transform:translateY(0);
}

}