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

.projects-hero{
min-height:70vh;

background:
linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),
url("../img/projects/projects-hero.jpg") center/cover no-repeat;

color:#fff;
text-align:center;
padding:120px 20px;
}

.projects-hero .club-name{
text-transform:uppercase;
letter-spacing:2px;
font-size:14px;
opacity:0.8;
margin-bottom:15px;
}

.projects-hero h1{
font-size:56px;
font-weight:700;
margin-bottom:20px;
}

.projects-hero p{
font-size:18px;
max-width:650px;
margin:0 auto;
opacity:0.9;
}

/* =========================
PROJECT SECTION
========================= */

.projects-section{
padding:100px 0;
background:#0f172a;
}

.section-header h2{
font-size:38px;
font-weight:700;
margin-bottom:10px;
color: var(--color-default);
}

.section-header p{
color:#9ca3af;
}


/* =========================
PROJECT CARD
========================= */
.project-card{
background:#1f2937;
border-radius:14px;
overflow:hidden;
box-shadow:0 15px 35px rgba(0,0,0,0.35);
transition:all 0.35s ease;
height:100%;
color:#e5e7eb;
}

.project-card:hover{
transform:translateY(-10px);
box-shadow:0 25px 60px rgba(0,0,0,0.5);
}


/* IMAGE FULLY VISIBLE */

.project-img{
width:100%;
height:260px;
object-fit:contain;
background:#111827;
padding:10px;
}


/* BODY */

.project-body{
padding:25px;
}

.project-body h3{
font-size:20px;
font-weight:600;
margin-bottom:12px;
}

.project-meta{
font-size:14px;
color:#9ca3af;
margin-bottom:15px;
}

.project-body ul{
padding-left:18px;
margin-bottom:15px;
}

.project-body li{
margin-bottom:6px;
font-size:14px;
}

.project-body p{
font-size:14px;
line-height:1.6;
color:#cbd5e1;
}
/* =========================
JOIN CTA
========================= */

.projects-cta{
padding:100px 20px;
background:#111827;
color:white;
text-align:center;
}

.projects-cta h2{
font-size:40px;
font-weight:700;
margin-bottom:10px;
}

.projects-cta p{
opacity:0.85;
margin-bottom:30px;
}

.btn-join{
display:inline-block;
background:var(--color-primary);
color:white;
padding:12px 28px;
border-radius:30px;
text-decoration:none;
font-weight:600;
transition:all 0.3s ease;
}

.btn-join:hover{
background:#2563eb;
transform:translateY(-2px);
}