/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

html, body {
    height: 100%; /* Ensure the body takes up the full height */
    margin: 0; /* Remove default margin */
  
}
body {
    font-family: Arial, sans-serif;
    background: linear-gradient(to bottom, #000000 , #3E1A78 ); /* Dark purple to black gradient */
    background-attachment: fixed; /* Keep the background fixed while scrolling */
    color: white; /* Set text color to white for better contrast */
    flex-direction: column; /* Stack children vertically */
}
.main-content {
    
    flex: 1; /* Allow the main content to grow and fill the available space */
    min-height: calc(100vh - 60px); /* Adjust for footer height */
    padding-top: 60px; /* Add padding to prevent content from being hidden behind the navbar */
}
.footer {
    background-color: #333; /* Match the navbar background */
    color: white; /* Text color */
    text-align: center; /* Center the text */
    padding: 10px 0; /* Padding for spacing */
    width: 100%; /* Full width */
    position: relative; /* Ensure it stays at the bottom */
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(51, 51, 51, 0.8); /* Semi-transparent background for navbar */
    padding: 10px 20px;
    position: fixed; /* Fix the navbar to the top */
    top: 0; /* Position it at the top */
    left: 0; /* Align to the left */
    right: 0; /* Align to the right */
    z-index: 1000; /* Ensure it stays above other content */
}


.logo a {
    color: white;
    text-decoration: none;
    font-size: 24px;
}

.nav-links {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.nav-links li {
    margin-left: 20px;
}

.nav-links a {
    color: white;
    text-decoration: none;
    padding: 8px 16px;
    transition: background-color 0.3s;
}

.nav-links a:hover {
    background-color: #575757;
    border-radius: 4px;
}

/* Mobile Styles */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.menu-toggle .bar {
    height: 3px;
    width: 25px;
    background-color: white;
    margin: 3px 0;
}
.youtube-embed {
    padding: 20px;
    text-align: center;
}

.youtube-embed h2 {
    margin-bottom: 20px;
}

.video-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.video-container iframe {
    width: 300px; /* Adjust width as needed */
    height: 169px; /* Maintain aspect ratio (16:9) */
    margin: 10px; /* Space between videos */
    border: none; /* Remove border */
}
.footer {
    background-color: #333; /* Match the navbar background */
    color: white; /* Text color */
    text-align: center; /* Center the text */
    padding: 10px 0; /* Padding for spacing */
    position: relative; /* Positioning */
    bottom: 0; /* Stick to the bottom */
    width: 100%; /* Full width */
}


.image-gallery {
    padding: 20px;
    text-align: center; /* Center the heading */
}

.image-gallery h2 {
    margin-bottom: 20px;
}

.gallery-container {
    display: flex; /* Use flexbox for layout */
    flex-wrap: wrap; /* Allow items to wrap */
    justify-content: center; /* Center items horizontally */
    gap: 10px; /* Space between images */
}

.gallery-container img {
    width: 300px; /* Set a fixed width for images */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Optional: rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional: shadow effect */
}


/* Media Queries */
@media (max-width: 768px) {
    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 60px; /* Adjust based on navbar height */
        left: 0;
        background-color: #333;
        padding: 10px 0; /* Add padding for better spacing */
        align-items: flex-end; /* Align items to the right */
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        margin: 10px 0; /* Increase vertical spacing between links */
        text-align: right; /* Right-align the text */
        width: 100%; /* Make list items take full width */
    }

    .nav-links a {
        padding: 15px 20px; /* Increase padding for larger clickable area */
        font-size: 18px; /* Increase font size for better readability */
        display: block; /* Make the link a block element for full width */
    }

    .menu-toggle {
        display: flex;
    }
}