/* RESET */

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

body{
background:#0e0e1a;
color:white;
}


/* NAVBAR */

.navbar{

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

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

padding:18px 60px;

background:rgba(20,20,40,0.6);
backdrop-filter:blur(14px);

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

z-index:999;
}


.logo{
font-size:22px;
font-weight:600;

background:linear-gradient(45deg,#b66cff,#7f8cff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}


/* MENU */

.menu{
display:flex;
list-style:none;
gap:25px;
}

.menu li{
position:relative;
padding-bottom:10px;
}


/* NAV BUTTON */

.menu a{

text-decoration:none;
color:white;

padding:10px 18px;

border-radius:30px;

font-weight:500;

transition:0.35s;
}


/* GLOW HOVER */

.menu a:hover{

background:linear-gradient(45deg,#7f5cff,#a85bff);

box-shadow:
0 0 10px rgba(160,120,255,0.7),
0 0 20px rgba(160,120,255,0.5);

transform:translateY(-2px);

}



/* DROPDOWN */

.dropdown-menu{
display:none;
position:absolute;
top:100%;
left:0;
background:#1b1b33;
border-radius:12px;
min-width:220px;
box-shadow:0 10px 30px rgba(0,0,0,0.4);
overflow:hidden;
padding:8px 0;
}

.dropdown-menu li a{
display:block;
padding:12px 18px;
color:#ddd;
white-space:nowrap;
}

.dropdown:hover .dropdown-menu{
display:block;
animation:dropdownFade 0.25s ease;
}

@keyframes dropdownFade{
from{opacity:0; transform:translateY(-8px);}
to{opacity:1; transform:translateY(0);}
}

/* HERO SECTION */

.hero{

height:100vh;

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

text-align:center;

padding-top:120px;


/* RICH PURPLE BACKGROUND */

background:

linear-gradient(
rgba(20,20,60,0.7),
rgba(10,10,30,0.9)
),

url("https://unsplash.com/photos/person-in-red-sweater-holding-babys-hand-Zyx1bK9mqmA");

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

}



.hero h1{

font-size:44px;
font-weight:500;

background:linear-gradient(45deg,#ffffff,#b8aaff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

margin-bottom:18px;
}



.hero p{
font-size:20px;
opacity:0.85;
margin-bottom:45px;
}



/* BUTTON AREA */

.hero-buttons{
display:flex;
gap:30px;
}



/* BUTTON BASE */

.btn{

padding:18px 45px;

font-size:18px;
font-weight:600;

border-radius:40px;

text-decoration:none;

transition:0.35s;

position:relative;

overflow:hidden;
}



/* JOIN BUTTON */

.join{

background:linear-gradient(45deg,#8a5cff,#c178ff);

color:white;

box-shadow:
0 0 20px rgba(150,100,255,0.5);

}


/* DONATE BUTTON */

.donate{

background:linear-gradient(45deg,#ff5fd2,#ff8ac9);

color:white;

box-shadow:
0 0 20px rgba(255,120,200,0.5);

}



/* BUTTON HOVER ANIMATION */

.btn:hover{

transform:translateY(-4px) scale(1.05);

box-shadow:
0 10px 40px rgba(255,255,255,0.25),
0 0 30px rgba(200,120,255,0.6);

}



/* BUTTON RIPPLE EFFECT */

.btn::after{

content:"";

position:absolute;

width:0;
height:0;

top:50%;
left:50%;

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

border-radius:50%;

transform:translate(-50%,-50%);

transition:0.5s;
}


.btn:hover::after{

width:300px;
height:300px;

opacity:0;

}

.directors-page{

padding:140px 10%;
text-align:center;

}


.page-title{

font-size:48px;

background:linear-gradient(45deg,#b66cff,#7f8cff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

margin-bottom:25px;

}


.club-info{

max-width:900px;

margin:auto;

line-height:1.8;

font-size:18px;

opacity:0.85;

margin-bottom:70px;

}



/* GRID */

.directors-grid{

display:grid;

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

gap:40px;

}



/* CARD */

.director-card{

background:rgba(30,30,60,0.7);

backdrop-filter:blur(12px);

border-radius:18px;

padding:25px;

transition:0.35s;

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

}


.director-card:hover{

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

box-shadow:0 25px 60px rgba(0,0,0,0.6);

}



/* IMAGE */

.image-box{

overflow:hidden;

border-radius:14px;

margin-bottom:18px;

}


.image-box img{

width:100%;
height:260px;

object-fit:cover;

transition:0.4s;

}


.director-card:hover img{

transform:scale(1.08);

}



/* NAME */

.director-card h3{

font-size:22px;

margin-bottom:6px;

}



/* ROLE */

.director-card span{

font-size:16px;

opacity:0.7;

}