/* SCROLL BAR */

#scrollProgress{
    position:fixed;
    top:0;
    left:0;
    height:4px;
    background:#fbbf24;
    width:0%;
    z-index:2000;
}

:root{

    --primary:#050505;
    --secondary:#10182b;

    --accent:#fbbf24;
    --accent2:#ff4d4d;

    --text:white;
    --muted:#b8c1d1;

    --glow:rgba(255,77,77,0.35);

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Segoe UI',sans-serif;
}

body{

    background:
    radial-gradient(circle at top,#18233f,#050505 60%);

    color:white;

}

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

.navbar{
    position:fixed;
    top:0;
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:25px 8%;
    background:rgb(0, 0, 0);
    backdrop-filter:blur(15px);
    z-index:1000;
    transition:0.4s;
}


.navbar.scrolled{

    padding:14px 8%;

    background:#000000;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.25);

}

.logo{
    color:var(--accent);
    font-size:1.3rem;
    font-weight:800;
    letter-spacing:1px;
}

.nav-links{
    display:flex;
    list-style:none;
    gap:28px;
}

.nav-links a{
    color:white;
    text-decoration:none;
    font-weight:500;
    transition:0.3s;
}

.nav-links a:hover{
    color:var(--accent);
}

.menu-btn{
    display:none;
    color:white;
    font-size:1.6rem;
    cursor:pointer;
}

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

.hero{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:0 20px;

    background:
    linear-gradient(135deg,
    rgba(0,0,0,0.55),
    rgba(5,5,5,0.75)),
    url("../images/hero-bg.jpg");

    background-size:cover;
    background-position:center;
}

.hero-content{
    max-width:900px;
    animation:fadeIn 1.2s ease;
}

.hero-content h1{
    color:white;
    font-size:4rem;
    margin-bottom:20px;
}

.hero-content p{
    color:#e2e8f0;
    font-size:1.2rem;
    line-height:1.8;
    margin-bottom:30px;
}

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

.btn{
    display:inline-block;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#0b1220;
    padding:14px 34px;
    border-radius:50px;
    font-weight:700;
    text-decoration:none;
    transition:0.3s;
}

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

/* ================= SECTIONS ================= */

section{

    padding:100px 8%;

    background:
    linear-gradient(
    180deg,
    rgba(255,255,255,0.02),
    rgba(0,0,0,0.4)
    );

}

.section-title{

    text-align:center;
    margin-bottom:60px;
    font-size:2.5rem;
    font-weight:800;
    color:white;

    text-shadow:
    0 0 20px rgba(251,191,36,0.4);

}

/* ================= LEADER ================= */

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

.leader-image img{
    width:100%;
    border-radius:20px;
    box-shadow:0 20px 50px rgba(0,0,0,0.15);
}

.leader-content p{
    line-height:1.8;
    color:var(--muted);
    margin-top:20px;
}

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

.card-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
}

.card{

    background:
    linear-gradient(
    145deg,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.02)
    );


    backdrop-filter:blur(15px);


    border:1px solid rgba(255,255,255,0.12);


    padding:35px;

    border-radius:25px;


    box-shadow:

0 0 18px rgba(255,77,77,0.12),

inset 0 0 20px rgba(255,255,255,0.03);


    transition:0.4s;

}



.card:hover{


    transform:
    translateY(-12px)
    scale(1.02);



    box-shadow:

    0 0 40px rgba(255,77,77,0.45);

}

.card i{
    font-size:2.3rem;
    color:var(--accent);
    margin-bottom:15px;
}

.card p{
    color:var(--muted);
    line-height:1.6;
    margin-top:10px;
}

/* ================= STATS ================= */

.stats{
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    text-align:center;
    padding:80px 8%;
}

.stat-box h3{
    color:var(--accent);
    font-size:3rem;
}

.stat-box p{
    color:white;
}

/* ================= SOCIAL ================= */

.social-icons{
    display:flex;
    justify-content:center;
    gap:25px;
    font-size:2.2rem;
}

.social-icons a{

color:white;

filter:
drop-shadow(0 0 10px var(--accent));

}

.social-icons a:hover{

    color:#fbbf24;

    transform:scale(1.2);

    filter:
    drop-shadow(0 0 15px #ff4d4d);

}

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

footer{
    background:var(--primary);
    color:white;
    text-align:center;
    padding:40px 20px;
}

/* ================= FORMS ================= */

.contact-form{
    max-width:800px;
    margin:auto;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    padding:14px;
    margin-bottom:18px;
    border:1px solid #e2e8f0;
    border-radius:10px;
    font-size:1rem;
    transition:0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus{
    border:2px solid var(--accent);
    outline:none;
}

/* invalid */
.contact-form input:invalid,
.contact-form textarea:invalid{
    border:1px solid #ef4444;
}

/* ================= VIDEO ================= */

.video-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:25px;
}

.video-card{
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

.video-card iframe{
    width:100%;
    height:240px;
}

/* ================= MOBILE ================= */

@media(max-width:900px){

.hero-content h1{
    font-size:2.8rem;
}

.leader-section{
    grid-template-columns:1fr;
}

.nav-links{
    position:absolute;
    top:70px;
    left:-100%;
    width:100%;
    flex-direction:column;
    background:var(--primary);
    padding:25px 0;
    text-align:center;
    transition:0.3s;
}

.nav-links.active{
    left:0;
}

.menu-btn{
    display:block;
}

}

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

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(30px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.reveal{

    opacity:0;

    transform:translateY(50px);

    transition:1s;

}


.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/* HERO UPGRADE */


.hero{

position:relative;

}


.hero-overlay{

position:absolute;

inset:0;


background:

radial-gradient(
circle at center,
rgba(251,191,36,0.15),
transparent 40%
);


}


.tagline{

color:#fbbf24;

font-size:1.2rem;

letter-spacing:3px;

text-transform:uppercase;

margin-bottom:20px;

}


.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

}


.secondary-btn{


background:transparent;

border:1px solid #fbbf24;

color:white;


}

.hero-content{
    position:relative;
    z-index:5;
}

/* LEADER UPGRADE */


.leader-content h2{

font-size:3rem;

margin:20px 0;

color:white;

}



.leader-content p{

font-size:1.1rem;

}



.leader-points{

margin:30px 0;

display:flex;

flex-direction:column;

gap:15px;

}



.leader-points div{

background:rgba(255,255,255,0.06);

padding:15px 20px;

border-radius:15px;

border-left:3px solid #fbbf24;

}



.leader-points i{

color:#fbbf24;

margin-right:10px;

}



.vision-grid{

display:grid;

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

gap:25px;

}



.vision-main{


padding:45px;


border-radius:25px;


background:

linear-gradient(
135deg,
rgba(251,191,36,0.15),
rgba(255,255,255,0.05)
);


border:1px solid rgba(255,255,255,0.1);

}



.vision-main h3{

font-size:2.5rem;

margin-bottom:20px;

}




.vision-box{


padding:30px;


border-radius:20px;


background:rgba(255,255,255,0.05);


border:1px solid rgba(255,255,255,0.12);


transition:.4s;


}



.vision-box:hover{


transform:translateY(-10px);


box-shadow:

0 0 35px rgba(255,77,77,0.45);


}



.vision-box i{

font-size:2.5rem;

color:#fbbf24;

margin-bottom:20px;


}



@media(max-width:900px){


.vision-grid{

grid-template-columns:1fr;

}


}

.social-icons a:active{

    color:#ff4d4d;

    filter:
    drop-shadow(0 0 25px #ff4d4d);

    transform:scale(0.95);

}

/* PAGE HERO BANNER */


.page-hero{
height:140vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
background:

linear-gradient(
rgba(0,0,0,0.65),
rgba(5,5,5,0.8)
),

url("../images/leadership-bg.jpg");



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


}



.page-hero-content h1{


font-size:4rem;


color:white;


text-shadow:

0 0 25px rgba(251,191,36,0.5);


}



.page-hero-content p{


margin-top:15px;


font-size:1.2rem;


color:#d1d5db;


}



.news-layout{

display:grid;

grid-template-columns:2fr 1fr;

gap:30px;

}




.featured-news{


padding:45px;


border-radius:30px;


background:

linear-gradient(
135deg,
rgba(255,77,77,0.2),
rgba(255,255,255,0.05)
);



border:1px solid rgba(255,255,255,0.12);


}




.featured-news span{


color:#fbbf24;

letter-spacing:3px;

font-weight:bold;


}



.featured-news h3{

font-size:2.5rem;

margin:20px 0;

}



.featured-news p{

color:#cbd5e1;

line-height:1.8;

margin-bottom:30px;

}




.small-news{


display:flex;

flex-direction:column;

gap:20px;


}




.small-news div{


padding:25px;


background:rgba(255,255,255,0.05);


border-radius:20px;


border:1px solid rgba(255,255,255,0.1);


}



.small-news h3{

color:#fbbf24;

}



.small-news p{

color:#cbd5e1;

}




@media(max-width:900px){

.news-layout{

grid-template-columns:1fr;

}

}

.logo{

display:flex;

align-items:center;

gap:12px;

}


.logo img{

width:45px;

height:45px;

object-fit:contain;

}

.logo span{

color:#fbbf24;

font-size:1.3rem;

font-weight:800;

letter-spacing:1px;

}

/* EVENT TIMELINE */


.timeline{

max-width:900px;

margin:auto;

display:flex;

flex-direction:column;

gap:25px;

}



.event-item{


display:flex;

gap:25px;


align-items:center;


background:rgba(255,255,255,0.05);


border:1px solid rgba(255,255,255,0.12);


padding:25px;


border-radius:25px;


transition:.3s;


}



.event-item:hover{


transform:translateX(10px);


box-shadow:

0 0 30px rgba(255,77,77,0.35);


}



.event-date{


min-width:90px;


height:90px;


border-radius:20px;


display:flex;


flex-direction:column;


justify-content:center;


align-items:center;


background:

linear-gradient(
135deg,
#fbbf24,
#ff4d4d
);


color:#050505;


font-size:2rem;


font-weight:900;


}



.event-date span{


font-size:.8rem;


}



.event-content h3{


font-size:1.6rem;


color:#fbbf24;


}



.event-content p{


color:#cbd5e1;


margin-top:10px;


}



@media(max-width:700px){


.event-item{

flex-direction:column;

align-items:flex-start;

}


}


.video-card{

overflow:hidden;

background:rgba(255,255,255,0.05);

border-radius:20px;

border:1px solid rgba(255,255,255,0.1);

transition:.4s;


}



.video-card:hover{


transform:translateY(-10px);


box-shadow:

0 0 35px rgba(255,77,77,0.4);


}



.video-card iframe {
  width: 100%;
  aspect-ratio: 16 / 9;   
  height: auto;         
  border: none;
  border-radius: 12px;
}



@media(max-width:900px){


.featured-video{


grid-template-columns:1fr;


}


}

/* MOVING PAGE HERO TEXT */

.page-hero-content{

    transform:translateY(110px);

}

/* ================= FEATURED LOCAL VIDEO ================= */


.featured-video{

max-width:1100px;

margin:40px auto;

background:#050505;

border-radius:25px;

overflow:hidden;

box-shadow:
0 0 40px rgba(255,0,0,0.35);

}


.featured-video video {
  width: 100%;
  height: 600px;
  object-fit: cover;   /* fills the box */
  background: black;
  display: block;
}




.video-info{

padding:25px;

background:#111827;

}


.video-info h2{

color:white;

font-size:2rem;

}


.video-info p{

color:#cbd5e1;

}

.bio-text{
    display:flex;
    flex-direction:column;
    gap:20px;
}


.bio-text p{

    color:#cbd5e1;

    font-size:1.15rem;

    line-height:1.9;

    letter-spacing:0.3px;

}

.article-section{
padding:80px 10%;
}

.article-card{
display:flex;
justify-content:center;
}

.article-card img{

width:100%;
max-width:900px;

border-radius:18px;

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

transition:.4s;

}

.article-card img:hover{

transform:scale(1.02);

}

.article-gallery{

display:grid;

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

gap:30px;

}

.article-gallery img{

width:100%;

border-radius:18px;

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

transition:.4s;

}

.article-gallery img:hover{

transform:translateY(-8px);

}