/* 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: #dbdacb;
}

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



.header-container {
    display: flex;
    justify-content: space-between;
    
}

.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: 11%;
}

/* 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: 20px;
    background-color: #fdfdfd;
    border-top: 1px solid #e0e0e0;
    color: #666;
    font-family: 'Open Sans', Arial, sans-serif; /* Use Open Sans for footer */
}

.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: 1.3%; /* 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 */
    z-index: 2; /* Ensure it appears above the background */
}
.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: 2%; /* 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 */
    z-index: 3; /* Ensure it appears above the background */
    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 */
}


.panel-container {
    position: absolute; /* Layer panels on top of the image */
    bottom: 4%; /* Position panels near the bottom of the image */
    left: 50%; /* Center the panels horizontally */
    transform: translateX(-50%); /* Ensure exact centering */
    display: flex; /* Align panels in a row */
    gap: 10%; /* Add space between panels */
}

/* Individual Panels */
.panel {
    background-color: #dbdacb; /* Soft beige background */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    padding: 1%;
    text-align: center;
    width: 30%; /* Reduce panel width */
    height: 30%; /* Limit panel height to fit quarter-screen */
	margin-bottom: 5%;
}

/* Panel Header */
.panel h3 {
    font-family: 'Kalam', Arial, sans-serif; /* Font style */
    font-size: 1.5vw; /* Header font size */
    color: #003366; /* Navy blue color */
    margin-bottom: 2%;
	 font-weight: bold;
}

/* Panel Text */
.panel p {
    font-family: 'Kalam', Arial, sans-serif; /* Clean text font */
    font-size: 1.2vw; /* Body text size */
    color: #003366; /* Navy blue color */
    margin-bottom: 5%;
	
}

/* Action Button */
.action-btn {
    display: inline-block;
    padding: 1% 5%; /* Button size */
    font-family: 'Kalam', Arial, sans-serif; /* Button font */
    font-size: 1.2vw; /* Button text size */
    color: white; /* White text */
    background-color: #00bcd4; /* Light blue background */
    border-radius: 20px; /* Rounded edges (pill shape) */
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Bold text */
    transition: background-color 0.3s ease; /* Smooth hover transition */
}

/* Action Button Hover Effect */
.action-btn:hover {
    background-color: #008c9e; /* Darker blue on hover */
}

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

footer {
    margin-top: 1%;
    font-size: 1.3vw; /* Scalable font size */
    text-align: center; /* Center-align the text */
    padding: 0.5rem; /* Padding to create spacing */
    background-color: #fdfdfd; /* Optional: background color for contrast */
    color: #666; /* Text color */
    border-top: 1px solid #e0e0e0; /* Subtle top border */
}