/* Importing the Inter font from Google Fonts */
body {
    font-family: 'Inter', sans-serif; /* A modern sans-serif font */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #ffffff; /* Default text color for visibility on dark background */
    background-color: #35294a; /* <<< CHANGED: Set body background to a dark purple to match the image */
}

/* Hero section for the entire page background and layout */
.hero-section {
    width: 100vw;
    min-height: 100vh; /* <<< CHANGED: Use min-height to allow it to extend beyond viewport height */
    /* Placeholder for your background image file */
    background-image: url('background.png');
    background-size: cover; /* Ensures the image covers the entire container */
    background-position: center; /* Centers the background image */
    background-repeat: no-repeat; /* Prevents image from repeating */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align items to the top (header and content-area) */
    align-items: center;
    position: relative; /* Needed for absolute positioning of overlay if used */
    padding: 20px; /* Padding around the edges of the content */
}

/* Optional: Overlay for better text readability on the background image */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Dark transparent overlay */
    z-index: 0; /* Ensures overlay is behind content */
}

/* Header styling for logo and navigation */
.header {
    width: 100%;
    max-width: 1200px; /* Limits header width for larger screens */
    padding: 20px; /* 20px all around for consistent padding */
    display: flex;
    justify-content: space-between; /* Pushes logo to left, navigation to right */
    align-items: center;
    z-index: 1; /* Ensures header is above the overlay */
}

/* Styling for the logo in the top-left */
.header-logo-container {
    /* Padding now handled by .header */
}

.home-logo-link {
    display: block; /* Makes the entire area clickable */
}

.header-logo {
    width: 150px; /* Logo size */
    height: auto;
}

/* Navigation links styling */
.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 30px; /* Space between navigation items */
}

.nav-links a {
    text-decoration: none;
    color: #87CEEB; /* Light blue color for links, similar to the image */
    font-weight: 700;
    font-size: 1.1rem;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.nav-links a:hover,
.nav-links a:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ADD8E6; /* Slightly lighter blue on hover/focus */
}

/* Main content area for index page */
.content-area {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically centers content within available space */
    align-items: center; /* Horizontally centers content */
    text-align: center; /* Centers the text within its container */
    width: 100%;
    max-width: 1200px;
    padding: 0 40px; /* Horizontal padding */
    z-index: 1; /* Ensures content is above the overlay */
    margin-top: 10vh; /* Adjust this value to move the text up/down */
}

.main-title {
    font-size: 3.5rem; /* Large font size for the main title */
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    color: #ffffff; /* Explicitly set to white */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); /* Adds a subtle shadow for readability */
}

.subtitle {
    font-size: 1.6rem; /* Font size for the subtitle */
    font-weight: 400;
    margin-top: 15px; /* Space between title and subtitle */
    letter-spacing: 2px; /* Spaced out letters for effect */
    color: #ffffff; /* Explicitly set to white */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
    max-width: 700px; /* Prevents subtitle from being too wide */
}

/* New styles for About Us page content */
.about-content-area {
    width: 100%;
    max-width: 800px; /* Max width for content for better readability */
    padding: 40px 50px; /* Increased horizontal padding */
    margin-top: 5vh; /* Adjust as needed to position content */
    background-color: rgba(0, 0, 0, 0.6); /* Slightly darker background for readability */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1;
    color: #ffffff; /* Ensure text is white on this background */
    text-align: left; /* Align text to the left within the content block */
}

.page-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 30px;
    text-align: center;
    color: #87CEEB; /* Use light blue for the main page title */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 15px;
    color: #ADD8E6; /* Slightly lighter blue for section titles */
}

.about-section p {
    line-height: 1.6;
    margin-bottom: 15px;
}

.about-section ul {
    list-style: disc inside;
    margin-left: 20px;
    margin-bottom: 15px;
}

.about-section ul li {
    margin-bottom: 5px;
    line-height: 1.5;
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .header {
        flex-direction: column; /* Stack logo and nav vertically */
        align-items: center; /* Center them */
        gap: 20px; /* Space between logo and nav */
        padding: 20px; /* Ensure consistent padding on smaller screens */
    }

    .header-logo-container {
        /* No specific padding needed here now */
    }

    .nav-links {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }

    .main-title {
        font-size: 2.5rem;
    }

    .subtitle {
        font-size: 1.2rem;
        letter-spacing: 1px;
        max-width: 90%;
    }

    .header-logo {
        width: 100px; /* Adjusted for smaller screens */
    }

    .content-area {
        margin-top: 5vh; /* Adjust margin for smaller screens if needed */
    }

    .about-content-area {
        margin-top: 3vh;
        padding: 25px 30px; /* Increased horizontal padding for tablets */
    }

    .page-title {
        font-size: 2rem;
    }

    .section-title {
        font-size: 1.6rem;
    }
}

@media (max-width: 480px) {
    .main-title {
        font-size: 2rem;
    }

    .subtitle {
        font-size: 1rem;
    }

    .nav-links a {
        font-size: 1rem;
    }

    .header-logo {
        width: 80px; /* Adjusted for smallest screens */
    }

    .content-area {
        margin-top: 3vh; /* Further adjust margin for smallest screens */
    }

    .about-content-area {
        margin-top: 2vh;
        padding: 20px 20px; /* Increased horizontal padding for mobile */
    }

    .page-title {
        font-size: 1.8rem;
    }

    .section-title {
        font-size: 1.4rem;
    }
}