body {
    font-family: 'Times New Roman', Times, serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

li a.active {
    color: yellow; 
    border-bottom: 2px solidrgba(214, 231, 60, 0.55); /* Underline for active link */
}

main {
    padding: 20px;
}

.mission, .team, .testimonials {
    margin-bottom: 40px;
}

.mission-image {
    width: 100%;
    height: auto;
    margin-top: 10px;
}

/* Team Section Styles */
.team {
    background-color: #f9f9f9; /* Light background for contrast */
    padding: 40px 20px; /* Padding around the section */
    text-align: center; /* Center text */
}

.team h2 {
    font-size: 2.5em; /* Larger font size for the section title */
    margin-bottom: 20px; /* Space below the title */
    color: #4CAF50; /* Theme color */
}

.team-container {
    display: flex;
    justify-content: center; /* Center items in the container */
    flex-wrap: wrap; /* Allow wrapping for responsiveness */
    gap: 20px; /* Space between team members */
}

.team-member {
    background: white; /* White background for each member */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    padding: 20px; /* Padding inside the member card */
    width: 250px; /* Fixed width for member cards */
    transition: transform 0.3s; /* Smooth transformation on hover */
}

.team-member:hover {
    transform: scale(1.05); /* Slightly enlarge on hover */
}

.team-member img {
    width: 100px; /* Fixed width for images */
    height: 100px; /* Fixed height for images */
    border-radius: 50%; /* Circular images */
    object-fit: cover; /* Ensure the image covers the area */
    margin-bottom: 15px; /* Space below the image */
}

.team-member h3 {
    font-size: 1.5em; /* Font size for names */
    margin: 10px 0 5px; /* Margins around the name */
    color: #333; /* Dark color for names */
}

.team-member p {
    margin: 5px 0; /* Space between paragraphs */
    color: #666; /* Gray color for titles and descriptions */
    font-size: 0.9em; /* Slightly smaller font for descriptions */
}

button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}

button:hover {
    background-color: #0056b3;
}

/*upcoming events css code and the code for team member in single file*/

.upcoming-events {
    background-color: #f9f9f9;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin: 40px 0;
    position: relative;
}

.upcoming-events h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 20px;
    position: relative;
}

.event-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Responsive grid */
    gap: 20px;
}

.event {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative; /* For hover effect */
}

.event:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.event h3 {
    font-size: 1.8rem;
    color: #007bff; /* Accent color for event titles */
    margin-bottom: 10px;
}

.event p {
    font-size: 1rem;
    line-height: 1.6;
    color: #555; /* Slightly lighter text for descriptions */
}

.register-button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
    display: inline-block; /* Align button */
    margin-top: 10px; /* Space above button */
}

.register-button:hover {
    background-color: #0056b3;
    transform: scale(1.05); /* Slight scaling effect on hover */
}

/* Responsive styles for smaller screens */
@media (max-width: 600px) {
    .event h3 {
        font-size: 1.5rem; /* Smaller font size for mobile */
    }

    .event p {
        font-size: 0.9rem; /* Adjust paragraph font size */
    }
}


.mission-vision {
    display: grid;
    grid-template-columns: 1fr; /* Single column for small screens */
    gap: 20px;
    padding: 20px;
    background-color: #ffffff; /* Set background to white */
    border-radius: 10px;
    color: #333; /* Change text color to dark for better contrast */
}

.mission,
.vision {
    background-color: while; /* Semi-transparent background */
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.mission h2,
.vision h2 {
    font-size: 2rem;
    margin-bottom: 10px;
    text-align: center;
}

.mission p,
.vision p {
    font-size: 1.1rem;
    line-height: 1.6;
    text-align: justify;
}

.mission-image {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-top: 10px;
}

.vision-features {
    margin-top: 15px;
}

.vision-features ul {
    list-style-type: none;
    padding: 0;
}

.vision-features li {
    background: #007bff;
    margin: 5px 0;
    padding: 10px;
    border-radius: 5px;
    transition: background 0.3s;
    text-align: center; /* Center text for features */
}

.vision-features li:hover {
    background: #0056b3;
}

/* Responsive Styles */
@media (min-width: 768px) {
    .mission-vision {
        grid-template-columns: 1fr 1fr; /* Two columns for larger screens */
    }

    .mission,
    .vision {
        margin: 0; /* Reset margin for grid layout */
    }
}


.company-history {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin: 40px 0;
    position: relative; /* For pseudo-element positioning */
    overflow: hidden; /* To contain the pseudo-element */
}

.company-history::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 123, 255, 0.1); /* Light blue overlay */
    border-radius: 10px;
    z-index: 0; /* Behind the content */
    transition: opacity 0.5s;
}

.company-history:hover::before {
    opacity: 0.5; /* Fade effect on hover */
}

.company-history h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #007bff; /* Accent color */
    margin-bottom: 20px;
    position: relative; /* For text shadow */
    z-index: 1; /* Bring text above pseudo-element */
}

.company-history p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin: 10px 0;
    text-align: center;
    color: #333; /* Dark text for readability */
    position: relative; /* For text shadow */
    z-index: 1; /* Bring text above pseudo-element */
}

/* Adding a subtle animation for the text */
.company-history p {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation delay for each paragraph */
.company-history p:nth-child(2) {
    animation-delay: 0.2s;
}

.company-history p:nth-child(3) {
    animation-delay: 0.4s;
}


.container {
    max-width: 900px;
    margin: 20px auto;
    padding: 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

h1, h2, h3 {
    color: #2980b9;
    margin-bottom: 20px;
}

.image-container, .text-container {
    margin-bottom: 30px;
}

.text-container {
    padding: 20px;
    background: #ecf0f1;
    border-radius: 8px;
    border-left: 5px solid #2980b9;
}

    .gallery {
    max-width: 1200px; /* Maximum width for the gallery */
    margin: 0 auto; /* Center the gallery */
    padding: 20px; /* Padding around the gallery */
    text-align: center; /* Center text */
}

.gallery h2 {
    font-size: 2.5em; /* Larger font size for the heading */
    color: #4CAF50; /* Theme color for the heading */
    margin-bottom: 20px; /* Space below the heading */
}

.gallery-images {
    display: grid; /* Use CSS Grid for layout */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Responsive grid */
    gap: 15px; /* Space between images */
}

.gallery-image {
    width: 100%; /* Make images responsive */
    height: 200px; /* Fixed height for uniformity */
    object-fit: cover; /* Ensure images cover the space without distortion */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: transform 0.3s; /* Smooth transition for hover effect */
}

.gallery-image:hover {
    transform: scale(1.05); /* Scale up image on hover */
}

/* Media Queries for additional responsiveness */
@media (max-width: 768px) {
    .gallery h2 {
        font-size: 2em; /* Adjust heading size on smaller screens */
    }
}

@media (max-width: 480px) {
    .gallery h2 {
        font-size: 1.5em; /* Further adjust heading size */
    }
}

video-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-width: 500px;
    width: 60%;
}

video {
    width: 100%;
    border-radius: 8px 8px 0 0;
}

.video-controls {
    padding: 5px;
    text-align: center;
}

#downloadBtn {
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#downloadBtn:hover {
    background-color: #0056b3;
}




.video-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-width: 500px;
    width: 60%;
}

video {
    width: 100%;
    border-radius: 8px 8px 0 0;
}

.video-controls {
    padding: 5px;
    text-align: center;
}

#downloadBtn {
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#downloadBtn:hover {
    background-color: #0056b3;
}

.footer {
    background-color: #35424a; /* Dark background for the footer */
    color: white; /* Text color */
    padding: 40px 20px; /* Padding for the footer */
}

.footer-container {
    max-width: 12000px; /* Max width for the footer */
    margin: auto; /* Center the footer */
    display: flex; /* Flexbox layout */
    flex-wrap: wrap; /* Allow wrapping */
    justify-content: space-between; /* Space between sections */
}

.footer-section {
    flex: 1; /* Flex-grow for equal distribution */
    min-width: 250px; /* Minimum width for sections */
    margin: 10px; /* Margin between sections */
}

.footer-section h4 {
    font-size: 1.5em; /* Heading size */
    margin-bottom: 15px; /* Space below headings */
    border-bottom: 2px solid #e74c3c; /* Underline effect */
    padding-bottom: 10px; /* Space below the heading */
}

.footer-section p,
.footer-section ul {
    font-size: 1em; /* Font size for text */
    margin-bottom: 10px; /* Space between paragraphs */
    line-height: 1.6; /* Line height for readability */
}

.footer-section a {
    color: #e74c3c; /* Link color */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s; /* Smooth transition for link color */
}

.footer-section a:hover {
    color: #ffffff; /* Change color on hover */
    text-decoration: underline; /* Underline on hover */
}

.footer-section ul {
    list-style-type: none; /* Remove default list styles */
    padding: 0; /* Remove padding */
}

.footer-section ul li {
    margin: 5px 0; /* Space between list items */
}

.footer form {
    display: flex; /* Flexbox for the form */
    flex-direction: column; /* Stack elements vertically */
}

.footer input[type="email"] {
    padding: 10px; /* Padding for input */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners */
    margin-bottom: 10px; /* Space below input */
}

.footer button {
    padding: 10px; /* Padding for button */
    background-color: #e74c3c; /* Button background color */
    color: white; /* Button text color */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s; /* Smooth transition */
}

.footer button:hover {
    background-color: #35424a; /* Darken button on hover */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column; /* Stack sections on small screens */
        align-items: center; /* Center align sections */
    }
    .footer-section {
        text-align: center; /* Center text on small screens */
    }
}


/*starting header*/
body {
            font-family: 'Times New Roman', Times, serif;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }
        .header {
            background-color: white;
            color: black;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
        }
        .logo {
            font-size: 24px;
            font-weight: bold;
            display: flex;
            align-items: center;
        }
        
        .nav-links {
            display: flex;
            gap: 20px;
        }
        .nav-links a {
            color: black;
            text-decoration: none;
            padding: 10px 15px;
            transition: background-color 0.3s;
        }
        .nav-links a:hover {
            background-color: #004494;
            border-radius: 5px;
        }
        .hamburger {
            display: none;
            cursor: pointer;
            font-size: 24px;
        }
        .sidebar {
            position: fixed;
            top: 0;
            left: -250px;
            height: 100%;
            width: 250px;
            background-color: #2c3e50;
            padding-top: 60px;
            transition: 0.3s;
            z-index: 1;
        }
        .sidebar a {
            padding: 15px;
            text-decoration: none;
            color: white;
            display: block;
            transition: background-color 0.3s;
        }
        .sidebar a:hover {
            background-color: #004494;
        }
        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }
            .hamburger {
                display: block;
            }
        }


            .logo {
    display: flex;
    align-items: center;
    font-size: 30px; /* Base font size */
    color: green; /* Text color */
    padding: 10px 20px; /* Padding around the logo */
    transition: all 0.3s ease; /* Smooth transitions for hover effects */
    text-align: center;
}

.logo img {
    height: 65px; /* Logo height */
    width: auto; /* Maintain aspect ratio */
    margin-right: 150px; /* Space between logo and text */
    transition: transform 0.3s ease; /* Smooth scaling on hover */
}

.logo:hover img {
    transform: scale(1.1); /* Scale effect on hover */
}

.logo:hover {
    color: #ffcc00; /* Change text color on hover */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .logo {
        font-size: 30px; /* Smaller font size on mobile */
        padding: 5px; /* Reduced padding */
        
    }
    .logo img {
        height: 60px; /* Smaller logo height on mobile */
        margin-right: 28px; /* Space between logo and text */
    }
}

.image-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px;
    margin: auto;
}

.left-image {
    flex: 1; /* Takes up 1 part of the space */
    margin-right: 20px; /* Space between left and right images */
}

.right-images {
    flex: 1; /* Takes up 1 part of the space */
    display: flex;
    flex-direction: column; /* Stack images vertically */
}

.right-images img {
    margin-bottom: 10px; /* Space between the images */
    width: 100%; /* Make images responsive */
    height: auto; /* Maintain aspect ratio */
}

.left-image img {
    width: 100%; /* Make image responsive */
    height: auto; /* Maintain aspect ratio */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .image-container {
        flex-direction: column; /* Stack images vertically on small screens */
    }

    .left-image {
        margin-right: 0; /* Remove right margin */
        margin-bottom: 20px; /* Space below the left image */
    }
}