/* styles.css */
/* CSS Variables for easy changes: Edit colors here, affects whole site. */
:root {
    --primary-color: #00bfff; /* Electric blue */
    --accent-color: #ffd700; /* Gold */
    --bg-color: #121212; /* Dark mode bg */
    --text-color: #ffffff; /* Dark mode text */
    --bg-light: #ffffff; /* Light mode bg */
    --text-light: #333333; /* Light mode text */
    --transition: 0.3s ease;
}

/* Base Styles: Reset and defaults. */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Poppins', sans-serif; background: var(--bg-color); color: var(--text-color); line-height: 1.6; scroll-behavior: smooth; } /* Smooth scroll enabled */
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
h2 { text-align: center; margin-bottom: 40px; font-size: 2.5em; }
.btn { display: inline-block; padding: 12px 24px; background: var(--primary-color); color: #fff; border-radius: 8px; transition: var(--transition); cursor: pointer; }
.btn:hover { background: darken(var(--primary-color), 10%); transform: scale(1.05); } /* Hover animation */

/* Dark/Light Mode: Body class toggles these. */
body.light-mode { --bg-color: var(--bg-light); --text-color: var(--text-light); }
body.light-mode header { background: rgba(255,255,255,0.9); }

/* Header: Fixed, responsive. Toggle at end. */
header { position: fixed; width: 100%; background: rgba(18,18,18,0.9); display: flex; justify-content: space-between; align-items: center; z-index: 100; transition: var(--transition); }
header .container { display: flex; justify-content: space-between; align-items: center; width: 100%; }
header h1 { font-size: 1.5em; }
nav { display: flex; align-items: center; }
.nav-links { display: flex; list-style: none; }
.nav-links li { margin: 0 15px; }
.nav-links a { color: var(--text-color); transition: var(--transition); }
.nav-links a:hover { color: var(--accent-color); }
#dark-mode-toggle { background: none; border: none; font-size: 1.5em; cursor: pointer; transition: var(--transition); margin-left: auto; } /* Positioned at extreme end */
#dark-mode-toggle:hover { color: var(--accent-color); }
.hamburger { display: none; background: none; border: none; font-size: 2em; cursor: pointer; color: var(--text-color); }

/* Hero: Futuristic gradient, parallax-ish with bg. Image centers. */
.hero { height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); position: relative; overflow: hidden; }
.hero-image { max-width: 50%; border-radius: 50%; box-shadow: 0 10px 20px rgba(0,0,0,0.5); animation: fadeIn 1s ease; } /* Animation on load */
.hero h2 { font-size: 3em; margin-bottom: 20px; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* About: Flex layout, animations on scroll (JS triggers). */
.about-content { display: flex; align-items: center; gap: 40px; animation: fadeIn 1s ease; }
.about-image { width: 200px; border-radius: 50%; box-shadow: 0 5px 15px rgba(0,0,0,0.3); transition: var(--transition); }
.about-image:hover { transform: scale(1.1); } /* Hover zoom */
.impact-stats { display: flex; justify-content: space-around; margin-top: 20px; }
.stat { text-align: center; font-size: 1.2em; }
.stat-number { display: block; font-size: 2em; color: var(--accent-color); }

/* Initiatives: Grid, cards with hover. */
.initiative-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.initiative-card { background: rgba(255,255,255,0.1); padding: 20px; border-radius: 8px; text-align: center; transition: var(--transition); }
.initiative-card:hover { transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }

/* Carousel: For Moments. Full-width slides, auto-slide via JS. */
.carousel { position: relative; overflow: hidden; border-radius: 8px; }
.slides-container { display: flex; transition: transform 0.5s ease; } /* Slide transition */
.slide { min-width: 100%; position: relative; }
.slide img { width: 100%; height: 400px; object-fit: cover; border-radius: 8px; }
.slide-content { position: absolute; bottom: 20px; left: 20px; background: rgba(0,0,0,0.6); padding: 10px; border-radius: 8px; color: #fff; }
.prev, .next { position: absolute; top: 50%; background: rgba(0,0,0,0.5); border: none; color: #fff; padding: 10px; cursor: pointer; transition: var(--transition); }
.prev { left: 10px; }
.next { right: 10px; }
.prev:hover, .next:hover { background: rgba(0,0,0,0.8); }
.dots { text-align: center; margin-top: 10px; }
.dot { display: inline-block; width: 10px; height: 10px; background: #bbb; border-radius: 50%; margin: 0 5px; cursor: pointer; }
.dot.active { background: var(--primary-color); }

/* Modals: Overlay popups with blur. JS opens/closes. */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background: rgba(0,0,0,0.8); backdrop-filter: blur(5px); animation: fadeIn 0.3s; }
.modal-content { background: var(--bg-color); margin: 15% auto; padding: 20px; border-radius: 8px; width: 80%; max-width: 800px; position: relative; }
.close { position: absolute; top: 10px; right: 20px; font-size: 2em; cursor: pointer; color: var(--text-color); }
.modal-carousel { position: relative; } /* For multi-image in modal */
.modal-carousel img { width: 100%; height: auto; }

/* Testimonials: Grid similar to initiatives. Added image styles. */
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.testimonial { background: rgba(255,255,255,0.1); padding: 20px; border-radius: 8px; text-align: center; }
.testimonial-image { width: 50px; height: 50px; border-radius: 50%; margin-bottom: 10px; object-fit: cover; transition: var(--transition); }
.testimonial-image:hover { transform: scale(1.1); } /* Small hover effect */

/* Contact: Centered, simple. */
#contact { text-align: center; }

/* Footer: Simple bottom. Added socials styles. */
footer { text-align: center; padding: 20px; background: rgba(0,0,0,0.5); }
.socials { margin-bottom: 20px; }
.socials h3 { font-size: 1.2em; margin-bottom: 10px; }
.social-icons { display: flex; justify-content: center; list-style: none; gap: 20px; }
.social-icons img { width: 32px; height: 32px; transition: var(--transition); }
.social-icons a:hover img { transform: scale(1.1); filter: brightness(1.2); }
.back-to-top { display: inline-block; margin-top: 10px; color: var(--text-color); font-size: 1.5em; transition: var(--transition); }
.back-to-top:hover { color: var(--accent-color); }

/* Responsive: Mobile adjustments. */
@media (max-width: 768px) {
    header { flex-direction: column; }
    .nav-links { display: none; flex-direction: column; width: 100%; } /* Hidden by default */
    .nav-links.active { display: flex; } /* JS toggles */
    .hamburger { display: block; }
    .about-content { flex-direction: column; text-align: center; }
    .hero-image { max-width: 80%; }
    .slide img { height: 300px; }
    /* Carousel touch-friendly: JS adds swipe support. */
}

/* To change animations: Edit timings in transitions or keyframes. For new sections, copy a <section> structure from HTML and style class here. */


.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(18, 18, 18, 0.4), rgba(18, 18, 18, 0.7)); /* Dark overlay for contrast */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2; /* Above overlay */
    max-width: 800px;
    padding: 20px;
}

.hero h2 {
    font-size: 3.5em; /* Bigger for impact */
    margin-bottom: 20px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.7); /* Shadow for readability on image */
}

.hero p {
    font-size: 1.4em;
    margin-bottom: 30px;
    text-shadow: 0 1px 5px rgba(0,0,0,0.6);
}

.hero .btn {
    font-size: 1.2em;
    padding: 15px 35px;
}

/* Light mode adjustment: Softer overlay if needed */
body.light-mode .hero-overlay {
    background: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0.6));
}

/* Responsive: Smaller text on mobile */
@media (max-width: 768px) {
    .hero h2 { font-size: 2.5em; }
    .hero p { font-size: 1.2em; }
}

/* HERO BACKGROUND IMAGE */
.hero {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-image: url('images/hero-background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}