/* styles.css - Site-Wide CSS */
* { box-sizing: border-box; }
body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; background-color: #f0f8ff; color: #333; line-height: 1.6; }
.navbar { background: #4a90e2; padding: 1rem; position: sticky; top: 0; z-index: 1000; }
.nav-container { max-width: 1200px; margin: auto; display: flex; justify-content: space-between; align-items: center; }
.nav-logo { color: white; font-size: 1.5em; text-decoration: none; font-weight: bold; }
.nav-menu { list-style: none; display: flex; margin: 0; padding: 0; }
.nav-menu li { margin-left: 2rem; }
.nav-menu a { color: white; text-decoration: none; }
.hamburger { display: none; flex-direction: column; cursor: pointer; }
.hamburger span { background: white; height: 3px; width: 25px; margin: 3px 0; }

.hero { text-align: center; padding: 80px 20px; background: linear-gradient(135deg, #4a90e2, #7b68ee); color: white; }
.hero h1 { font-size: 3em; margin: 0; }
.hero p { font-size: 1.2em; }
.cta { background: #ff6b35; color: white; padding: 15px 30px; text-decoration: none; border-radius: 5px; font-weight: bold; display: inline-block; margin: 10px; transition: background 0.3s; }
.cta:hover { background: #e55a2b; }
.hero-image, .about-image, .enroll-image, .mentor-image, .resources-image, .benefits-image, .team-image, .impact-image, .links-image, .contact-image { width: 100%; max-height: 400px; object-fit: cover; margin-top: 20px; }

section { padding: 50px 20px; max-width: 1200px; margin: auto; }
.features { display: flex; flex-wrap: wrap; justify-content: space-around; }
.feature { flex: 1 1 300px; margin: 20px; text-align: center; }
.feature img { width: 80px; height: 80px; border-radius: 50%; margin-bottom: 10px; }

.stats, .enroll-form, .mentor-form, .contact-form { display: flex; justify-content: center; flex-wrap: wrap; }
.stat, input, select, textarea { margin: 10px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; }
form button { background: #4a90e2; color: white; border: none; cursor: pointer; }

footer { background: #333; color: white; text-align: center; padding: 20px; }
footer a { color: #4a90e2; }

/* 1. Use Flexbox on the form to align items */
.contact-form {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap onto the next line */
    gap: 20px; /* Adds space between the form groups */
    max-width: 800px; /* Adjust this max-width to fit your design */
    margin: 0 auto; /* Centers the form on the page */
}

/* 2. Style the container for each input field */
.form-group {
    /* Set the first two fields to take up roughly half the space each */
    flex: 1 1 calc(50% - 20px);
    min-width: 250px; /* Ensure fields don't get too narrow */
}

/* 3. Make the Message box and Button take up the full width */
.full-width {
    flex: 1 1 100%; /* Forces the message box to span the entire form width */
}

/* 4. Make the input fields and textarea fill their containers */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 10px;
    box-sizing: border-box; /* Includes padding in the width calculation */
    /* Add other styling like border, font, etc. */
}

/* 5. Style the textarea height and allow vertical resize */
.contact-form textarea {
    height: 150px; /* Default height for the message box */
    resize: vertical;
}

/* 6. Style the button to fit the design */
.contact-form button.cta {
    /* The button will automatically take up its space, 
       but you can style it to match your "Send" button design */
    padding: 10px 20px;
}

@media (max-width: 768px) { .nav-menu { display: none; } .hamburger { display: flex; } .hero h1 { font-size: 2em; } .features { flex-direction: column; } }