/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Open+Sans:wght@400;700&display=swap');

@media (max-width: 800px) {
    .container {
        width: 100%; /* Allow the layout to take up the full screen */
        padding: 0 20px; /* Add padding for better spacing */
    }
}

body {
    font-family: 'Open Sans', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: white;
}

header {
    height: 100%; /* Full viewport height for the header */
    position: relative;
}



.header-container {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    justify-content: space-between; /* Space out elements evenly */
    align-items: center; /* Center align elements horizontally */
    width: 100%; /* Full width of the parent container */
    height: 6.25vw; /* Adjust height based on percentage *//
    box-sizing: border-box; /* Include padding in the total size */
	 border-bottom: 1px solid grey; /* Add a black line at the bottom */
	background-color: #dbdacb;
}

.container {
    width: 100%;
    margin: 0 auto; /* Center the content */
}

.nav-container {
    position: absolute; /* Allow positioning within the parent (header) */
    top: 0%; /* Position relative to the top of the parent */
    left: 35%; /* Center horizontally within the parent */
    width: 50%; /* Adjust the width of the container */
    display: flex; /* Use flexbox to align child elements */
    justify-content: center; /* Center links horizontally */
	align-items: center; /* Center links vertically */
	height: 100%;
}

/* Navigation links styling */
.nav-links {
    display: flex; /* Align the links in a row */
    gap: 6%; /* Space between each link */

    list-style: none; /* Remove bullets */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    font-family: 'Kalam', Arial, sans-serif; /* Apply Kalam font */
}

/* Individual link styles */
.nav-links a {
    text-decoration: none;
    color: black; /* Adjust to contrast with the background image */
    font-size: 1.3vw; /* Responsive font size */
    font-weight: bold;
    padding: 1.0vw 0.5vw; /* Padding around each link */
    transition: background-color 0.3s ease;
    white-space: nowrap; /* Prevent text wrapping */
}

/* Hover effect for links */
.nav-links a:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Darken the background on hover */
    color: white; /* Optional: Change text color on hover */
}

#hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px;
    background: linear-gradient(to right, #ff7e5f, #feb47b);
    color: white;
}

.hero-text {
    max-width: 50%;
}

.hero-text h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    font-family: 'Kalam', Arial, sans-serif; /* Apply Kalam font */
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    color: white;
    background-color: #007BFF;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #0056b3;
}

.donate-btn {
    background-color: #28a745;
}

.donate-btn:hover {
    background-color: #218838;
}

footer {
    text-align: center;
    padding: 1vh 2vw;
    background-color: #fdfdfd;
    border-top: 1px solid #e0e0e0;
    color: #666;
    font-family: 'Open Sans', Arial, sans-serif; /* Use Open Sans for footer */
	font-size: 1.0vw;
}

.image-container {
    position: relative; /* Makes the container a reference for absolute positioning */
    width: 100%; /* Set the width of the container */
    max-width: 100%; /* Adjust the width as needed */
    
}

.background-image {
    width: 100%; /* Ensures the image scales with the container */
    display: block; /* Removes any inline spacing */
	
}
.logo-link {
    position: absolute; /* Position the logo link relative to the image-container */
    top: 1%; /* Adjust for desired spacing from the top */
    left: 2%; /* Adjust for desired spacing from the left */
    z-index: 10; /* Ensure the logo appears above the background image */
}

.logo {
    width: 100%; /* Make the logo fit within the container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Avoid inline spacing */
}


.logo-title {
    position: absolute; /* Position the title independently */
    top: .75vw; /* Adjust vertical position (lower it) */
    left: 8%; /* Adjust horizontal position */
    width: 50%; /* Ensure the title container takes up 50% of the parent container */
    text-align: left; /* Align the text to the left */

}
.overlay {
    position: absolute; /* Position the div on top of the image */
    top: 10px; /* Position 10px from the top of the image */
    left: 300px; /* Position 300px from the left of the image */
    transform: translate(-50%, 0); /* Optional: fine-tune centering */
    text-align: center;
}

.link {
    text-decoration: none; /* Remove underline */
    color: black; /* Set the text color */
    font-size: 1.5rem; /* Adjust the size of the link */
    font-weight: bold;
    font-family: 'Kalam', Arial, sans-serif; /* Apply Kalam font */
    padding: 0; /* Remove padding to prevent the dark background from appearing */
    background-color: transparent; /* Remove the dark background */
    border-radius: 0; /* Remove rounded corners */
    display: inline-block; /* Ensure the link stays inline */
    white-space: nowrap; /* Prevent the text from wrapping onto two lines */
}

.link:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Darken the background on hover */
}


.donate-button {
    position: absolute; /* Position the button independently */
    top: 1.3vw; /* 5% from the top of the parent container */
    right: 5%; /* 5% from the right of the parent container */
    background-color: #00bcd4; /* Light blue background */
    color: white; /* White text */
    font-family: 'Kalam', Arial, sans-serif; /* Use the Kalam font */
    font-size: 1.3vw; /* Adjust font size for readability */
    font-weight: bold; /* Make the text stand out */
    text-decoration: none; /* Remove underline */
    padding: 0.6% 3%;
    border-radius: 20px; /* Rounded edges */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional shadow for depth */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

.donate-button:hover {
    background-color: #008c9e; /* Darker shade of blue on hover */
    cursor: pointer; /* Show pointer cursor on hover */
}

.foundation-text {
    position: absolute; /* Position the text over the image */
    font-family: 'Montserrat'; 
    font-size: 1.2vw; /* Adjust font size */
    color: #003366; /* Adjust text color for contrast */
    line-height: 1.2vw; /* Adjust spacing */
    font-weight: 700;

}

.vision-text {
    position: absolute; /* Allows it to overlay on the background image */
    top: 22%; /* Vertically center the text */
    left: 50%; /* Horizontally center the text */
    transform: translate(-50%, -50%); /* Precisely center using transform */
    font-family: 'Kalam', Arial, sans-serif; /* Use the Kalam font */
    font-size: 1.5vw; /* Adjust font size as needed */
    color: white; /* White text for visibility */
    text-align: center; /* Center-align the text */
    line-height: 1.5; /* Adjust spacing between lines */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Add shadow for readability */
}


.banner {
    position: relative; /* Makes the banner a reference point for the overlay */
    width: 100%; /* Full width */
    max-width: 1500px; /* Match the desired max width */
    margin: 0 auto; /* Center the banner */
    height: 100%; /* Set the height of the banner */
    overflow: hidden; /* Prevent content overflow */
}

.banner-image {
    width: 100%; /* Ensure the image fills the width of the banner */
    height: 100%; /* Ensure the image fills the height */
    object-fit: cover; /* Cover the container while maintaining aspect ratio */
}

/* Title Container Styling */
.banner-title-container {
    position: absolute; /* Overlay on top of the banner */
    top: 33%; /* Vertically center */
    left: 50%; /* Horizontally center */
    transform: translate(-50%, -50%); /* Perfect centering */
    background-color: rgba(0, 0, 0, 0.5); /* Transparent darker background */
    padding: 10px 20px; /* Add padding around the title */
    border-radius: 5px; /* Slightly round the corners */
}

/* Title Text Styling */
.banner-title {
    font-family: 'Kalam', Arial, sans-serif; /* Use the Kalam font */
    font-size: 2vw; /* Adjust font size */
    color: white; /* White text for contrast */
    text-align: center; /* Center-align the text */
    margin: 0; /* Remove default margin */
}

.event-info {
    text-align: center; /* Center the text below the banner */
    font-family: 'Open Sans', Arial, sans-serif; /* Use Open Sans for readability */
    font-size: 1.0vw; /* Standard font size */
    color: #333; /* Dark gray for contrast */
    margin: 0 auto; /* Add spacing around the text */
    max-width: 800px; /* Limit the width for better readability */
    padding: 0.5vh 1vw; /* Add slight padding for smaller screens */
}

.logo-container {
    position: relative; /* Use relative positioning for flexibility */
    width: 6%; /* 5% of the parent container's width */
    margin-left: 0%; /* Start 5% from the left of the parent container */
    height: 0; /* Automatically adjust height based on content */
}

.spacer {
    margin: 0.5% 0; /* Add 20px vertical space */
}

.vision-mission-section {
    font-family: 'Open Sans', Arial, sans-serif; /* Use Open Sans for the section */
    text-align: center; /* Center-align text */
    padding: 2% 5%; /* Add padding for spacing */
    background-color: white; /* Optional: light background for contrast */
    margin: 2% auto; /* Center horizontally */
    max-width: 90%; /* Use percentage width for responsiveness */
	max-width: 70%; 
}

.section-title {
    font-size: 2vw; /* Dynamic font size for titles */
    margin-bottom: 1.5vw; /* Space below the title */
    color: #003366; /* Navy blue for titles */
	 font-family: 'Kalam', Arial, sans-serif; /* Use the Kalam font */
}

.section-content {
    font-size: 1.2vw; /* Dynamic font size for readability */
    line-height: 1.8; /* Adjust line height for better spacing */
    color: #333; /* Dark gray text color */
	text-align: left;
}

.mission-points {
    text-align: left; /* Align the mission points to the left */
    list-style-type: disc; /* Use bullet points */
    margin: 2rem auto; /* Add vertical spacing */
    padding-left: 5%; /* Indent the bullet points */
    font-size: 1.2vw; /* Dynamic font size for readability */
    color: #333; /* Consistent dark gray text */
    max-width: 90%; /* Use percentage width for responsiveness */
    line-height: 2; /* Adjust line height for spacing */

}