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

body{
background:#000000;
color:#e5e7eb;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}


/* NAVBAR */

.about-navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 8%;

border-bottom:1px solid rgba(255,255,255,0.05);
}

.about-logo{
font-size:22px;
font-weight:700;
color: #fff;
font-weight: bolder;
}

.about-nav{
display:flex;
gap:40px;
}

.about-nav a{
text-decoration:none;
color:#eff0f1;
transition:0.3s;
font-size:20px;
}

.about-nav a:hover{
color:#60a5fa;
}


/* ACTIVE NAV LINK */

.active{
border:1px solid rgb(2, 22, 26);
display:inline-flex;
align-items:center;
justify-content:center;
background:#27b6f8;
padding:6px 14px;
border-radius:8px;
color:rgb(225, 230, 159);
font-weight:bold;
transition:0.3s ease, box-shadow 0.3s ease;
}

.active:hover{
box-shadow:0 4px 12px rgba(169, 15, 207, 0.4);
}


/* HERO SECTION */

.about-hero{
text-align:center;
padding:80px 20px;
}

.about-hero h1{
font-size:60px;
font-weight:700;
margin-bottom:20px;
background-size:300% 300%;
color:#fff;

}

.about-hero p{
font-size:20px;
margin-bottom:30px;
color:#f6f8ff;
animation:fadeUp 1s ease forwards;
animation-delay:.4s;


}


/* LEADER TITLE */

.leaders-title{
font-size:28px;
font-weight:600;
color:#60a5fa;
margin-bottom:40px;
text-align:center;

background: linear-gradient(
120deg,
#a51f7d,
#12668d,
#0babf5,
#75528f,
#b5f3ad
);
background-size:300% 300%;
animation: gradientMove 6s ease infinite;

color:transparent;
-webkit-background-clip:text;
background-clip:text;

animation: fadeUp 1s ease forwards;
}


/* LEADERS GRID */

.leaders-grid{
display:flex;
gap:30px;
justify-content:center;
flex-wrap:wrap;
}


/* LEADER CARD */

.leader-card{
background:#85bdf1;
border:1px solid rgba(255,255,255,0.05);
border-radius:16px;
padding:40px;
text-align:center;
width:320px;
height:360px;
position:relative;
overflow:hidden;
opacity:0;
transform:translateY(40px);
transition:transform 0.6s, opacity 0.6s, box-shadow 0.35s;
will-change:transform;
}


/* SCROLL ANIMATION */

.leader-card.show{
opacity:1;
transform:translateY(0);
}


/* IMAGE */

.leader-card img{
width:100%;
height:100%;
object-fit:cover;
position:absolute;
left:0;
bottom:0;
transform:translateY(100%);
transition:transform 0.5s ease;
object-position: center top;
}




/* IMAGE SLIDE ON HOVER */

.leader-card:hover img{
transform:translateY(0);
}


/* CARD HOVER EFFECT */

.leader-card:hover{
transform:translateY(-10px) scale(1.05);
border-color:#60a5fa;
box-shadow:0 20px 40px rgba(96,165,250,0.2);
}


/* CARD TEXT */

.leader-card h3{
font-size:30px;
font-weight:bolder;
color:#0b2331;
margin-top:110px;
}

.leader-card p{
font-size:20px;
color: #426ab6;
margin-top:10px;
font-weight:bolder;
}


/* CHURCH SECTION */

.church-container{
max-width:900px;
margin:auto;
padding:80px 20px;
text-align:center;
}

.church-container h2{
font-size:28px;
font-weight:600;
margin-bottom:20px;
color: #fff;
}

.church-container p{
font-size:18px;
color:#e6e9f1;
margin-bottom:20px;
line-height:1.6;


}




/* FOOTER */

.about-footer{
text-align:center;
padding:20px;
border-top:1px solid rgba(255,255,255,0.05);
color:#c9d2df;
font-size:14px;
}




/* SIMPLE FADE ANIMATION */

@keyframes fadeUp{
from{
opacity:0;
transform:translateY(20px);
}

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