@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Montserrat:wght@600;800&display=swap');

body { 
    margin: 0; 
    font-family: 'Roboto', sans-serif; 
    background: #0f1117; 
    color: #e0e0e0; 
    line-height: 1.7; 
}

.container { 
    max-width: 1400px; 
    margin: 0 auto; 
    padding: 0 40px; 
}

/* --- HEADER SECTION (Fixed Visibility) --- */
header { 
    position: relative; 
    height: 100vh; 
    min-height: 700px; 
    overflow: hidden; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    background: #0f1117; 
}

header::before { 
    content: ''; 
    position: absolute; 
    top: 0; left: 0; width: 100%; height: 100%; 
    background: url('header-bg.png') center/cover no-repeat; 
    filter: blur(4px); 
    transform: scale(1.05); 
    z-index: 1; 
}

header::after { 
    content: ''; 
    position: absolute; 
    top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(15, 17, 23, 0.5); 
    z-index: 2; 
}

header h1 { 
    position: relative;
    font-family: 'Montserrat', sans-serif; 
    font-size: 6rem; 
    color: #fff; 
    text-shadow: 0 0 50px #00d4ff; 
    letter-spacing: 8px; 
    z-index: 3; 
}

/* --- NAVIGATION --- */
nav { 
    background: rgba(15,17,23,0.95); 
    padding: 25px; 
    text-align: center; 
    position: sticky; 
    top: 0; 
    z-index: 100; 
    backdrop-filter: blur(15px); 
    border-bottom: 1px solid #00d4ff; 
}

nav a { 
    color: #e0e0e0; 
    text-decoration: none; 
    margin: 0 40px; 
    font-weight: 500; 
    font-size: 1.3rem; 
    transition: color 0.3s; 
}

nav a:hover { color: #00d4ff; text-shadow: 0 0 10px #00d4ff; }

/* --- SECTIONS --- */
section { padding: 120px 0; }

h2 { 
    font-family: 'Montserrat', sans-serif; 
    text-align: center; 
    font-size: 3.2rem; 
    color: #00d4ff; 
    margin-bottom: 70px; 
    text-shadow: 0 0 20px rgba(0,212,255,0.4); 
}

p { font-size: 1.15rem; max-width: 900px; margin: 0 auto 50px; text-align: center; }

/* --- MINI SOCIAL LINKS BAR --- */
.social-links {
    display: flex;
    justify-content: center;
    gap: 15px; /* Tighter spacing */
    margin: -30px auto 60px; /* Moves it closer to the text above */
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;  /* Reduced from 50px */
    height: 32px; /* Reduced from 50px */
    background: #1a1d29;
    border: 1px solid #00d4ff; /* Thinner border */
    border-radius: 50%;
    transition: all 0.3s ease;
}

.social-links img {
    width: 16px;  /* Tiny icons */
    height: 16px;
}

.social-links a:hover {
    transform: translateY(-3px);
    background: #00d4ff;
    box-shadow: 0 0 15px #00d4ff;
}

.social-links a:hover img {
    filter: invert(1);
}

/* --- GRIDS & CARDS --- */
.members-grid, .thumbnails-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 60px; }

.member-card, .thumb-card { 
    background: #1a1d29; padding: 50px; text-align: center; border-radius: 25px; 
    transition: all 0.4s ease; box-shadow: 0 15px 40px rgba(0,0,0,0.6); overflow: hidden; 
}

.member-card:hover { transform: translateY(-20px); box-shadow: 0 30px 60px rgba(0,212,255,0.3); }

.member-card img, .main-avatar { 
    width: 250px; height: 250px; border-radius: 50%; object-fit: cover; 
    border: 6px solid #00d4ff; box-shadow: 0 0 40px rgba(0,212,255,0.5); 
    display: block; margin: 0 auto 40px; 
}

.thumb-card img { max-width: 100%; height: auto; border-radius: 20px; border: 4px solid #00d4ff; transition: transform 0.3s; }
.thumb-card:hover img { transform: scale(1.08); }

.video-container { 
    position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; 
    max-width: 900px; margin: 60px auto; border-radius: 20px; box-shadow: 0 0 50px rgba(0,212,255,0.4); 
}

.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

footer { text-align: center; padding: 50px; background: #1a1d29; border-top: 1px solid #00d4ff; }

/* --- RESPONSIVE --- */
@media (max-width: 768px) { 
    header h1 { font-size: 4rem; } 
    .member-card img, .main-avatar { width: 200px; height: 200px; } 
}