/* 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 */
}

#about-us {
    padding: 3% 10%;
    background-color: white; /* Light background for contrast */
    color: #333; /* Dark text color */
    font-family: 'Open Sans', Arial, sans-serif;
    text-align: left;
}

.about-us-container {
    max-width: 70%; 
    margin: 0 auto;
}

.section-title {
    font-size: 2vw;
    color: #003366; /* Navy blue color */
    text-align: center;
    margin-bottom: 20px;
    font-family: ''Open Sans', Arial, sans-serif;
}

.section-subtitle {
    font-size: 1.5vw;
    color: #003366;
    margin-bottom: 10px;
}

.section-content {
    font-size: 1.2vw;
    line-height: 1.8;
    margin-bottom: 20px;
}


        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
            color: #003366; /* Navy blue for titles */
			 font-family: 'Kalam', Arial, sans-serif; /* Use the Kalam font */
        }
        .checkbox-container {
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
        }
        .checkbox-container label {
            font-size: 1.2rem;
        }
        .input-box {
            margin-bottom: 15px;
        }
/* Existing .input-box label styles */
.input-box label {
    display: block;
    color: black;
    font-weight: bold;
    margin-bottom: 5px;
}

/* Style for the 'for details.' text */
.input-box label .details-text {
    font-weight: normal;
    display: inline;
}

/* Optional: Style the link to match the non-bold text */
.input-box label a {
    font-weight: normal;
    font-family: 'Open Sans', Arial, sans-serif;
}
        .input-box input, .input-box textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 1rem;
        }
.submit-btn {
    width: 15%;              /* Keep relative width */
    min-width: 120px;        /* Ensure it doesn’t shrink too much on mobile */
    max-width: 300px;        /* Limit max width for desktop */
    padding: 0.75rem 1rem;   /* Increase padding for better touch area */
    font-size: clamp(16px, 2.5vw, 24px); /* Responsive font size with min/max */
    background-color: #00bcd4; /* Light blue background */
    color: white;            /* Text color */
    border: none;            /* Remove border */
    border-radius: 20px;     /* Rounded corners */
    cursor: pointer;         /* Pointer on hover */
    text-align: center;      /* Center text */
    transition: background-color 0.3s ease; /* Smooth hover effect */
    display: block;          /* Block-level element */
    margin: 0 auto;          /* Center horizontally */
    font-family: 'Kalam', Arial, sans-serif; /* Kalam font */
    font-weight: bold;       /* Bold text */
}

.submit-btn:hover {
        background-color: #008c9e; /* Darker shade of blue on hover */
}

        /* Override styles for the SMS consent container */
        .input-box .sms-consent-container {
            display: flex;
            align-items: center;
            gap: 10px; /* Space between checkbox and text */
            margin-top: 10px; /* Space above the container */
            width: 100%; /* Ensure the container takes full width */
        }
        .input-box .sms-consent-container input[type="checkbox"]#sms-consent {
            width: 10%; /* Checkbox takes 10% of the width */
            margin: 0; /* Override any default margin on the checkbox */
        }
        .input-box .sms-consent-container .sms-consent-text {
            font-weight: normal; /* Remove bold font */
            font-family: 'Open Sans', Arial, sans-serif;
            display: inline; /* Override display: block from .input-box label */
        }
        .input-box .sms-consent-container .sms-consent-text a {
            font-weight: normal; /* Ensure the link is not bold */
            font-family: 'Open Sans', Arial, sans-serif;
            display: inline; /* Keep the link inline with the text */
        }
        .input-box#phone-container {
            transition: all 0.3s ease; /* Smooth transition for showing/hiding */
        }

span{
	font-weight: normal 
}

}

.input-box label {
    display: block;
    color: black;
}
.input-box label a + * {
    display: inline;
}