* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    background-color: #f0e8e8;
    color: #333;
    line-height: 1.6;
    min-height: 100vh; 
    margin: 0;
}

header {
    background-color: #006400;
    color: white;
    padding: 10px 0;
    text-align: center;
}

#index-page {
    height: 100%; 
    overflow: hidden; 
}

#scroll-container {
    height: 100%; 
    overflow: hidden; 
}

/* Footer styles */
.footer {
    background-color: green; 
    color: white; 
    text-align: center; 
    padding: 10px 20px; 
    position: relative; 
    width: 100%;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    margin-top: 50px; 
}

/* Navigation Styles */
.navdiv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}

.nav-bar ul {
    list-style-type: none;
    display: flex;
}

.nav-bar ul li {
    margin-left: 25px;
}

.nav-bar ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

/* Update logs */
.updatelogs-container {
    text-align: center;
    max-width: 800px;
    margin: 40px auto;
    background-color: #fff;
    padding: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.updatelogs-title {
    font-size: 2em;
    color: #333;
    margin-bottom: 10px;
    text-align: center;
}

.updatelogs-date {
    font-size: 0.9em;
    color: #888;
    text-align: center;
    margin-bottom: 20px;
}

/* .updatelogs-content {
    line-height: 1.8;
}

.updatelogs-content p {
    margin-bottom: 20px;
    text-align: justify;
} */

/* Link Styles */
a {
    color: #006400;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px 20px;
    z-index: 9999;
    transition: background-color 300ms ease-in-out, transform 300ms ease-in-out; 
}

.navbar.transparent {
    background-color: rgba(0, 0, 0, 0.5); 
}

.navbar.solid {
    background-color: #006400; 
}

main {
    padding-top: 90px; 
}

/* Styling for Navbar Links */
.navbar ul {
    list-style-type: none;
    display: flex;
}

.navbar ul li a {
    color: white;
    font-weight: bold;
    text-decoration: none;
    padding: 10px;
}

.navbar img#logo {
    height: 70px;
}

/* Container styling */
.imgdiv {
    display: flex;
    align-items: center;
}

/* Logo styling */
.imgdiv img#logo {
    height: 40px; 
    width: auto;
    margin-right: 10px; /* Space between logo and text */
}

/* Text styling */
.cvsu-name h1 {
    font-size: 20px; /* Adjust text size of Cvsu in nav bar*/
    color: white;
    margin: 0;
}
.cvsu-name a {
    text-decoration: none; 
}

.cvsu-name a:hover h1 {
    text-decoration: none; 
}


/* Scroll nav bar effect */
.scroll-down {
    transform: translateY(-100%); /* Hide the navbar */
}

.scroll-up {
    transform: translateY(0); /* Show the navbar */
    filter: drop-shadow(0 -10px 20px rgb(170,170,170));
}


/* index */

.index-page {
    width: 100%;
    height: 100vh;
    background-image: url('../img/cvsu-naic-bg.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: transparent;
}

.container {
    display: flex;
    justify-content: flex-start; 
    align-items: center;
    height: 80vh;
}

.content {
    flex: 1;
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
    color: #fff;
    margin: 0 auto; /* Center the content horizontally */
    text-align: center; /* Ensure text is centered */
}

.content h1{
    font-size: 64px;
    font-weight: 600;
}

.content h1 span{
    color: lightgreen;
}

.content button{
    background: transparent;
    border: 2px solid #fff;
    outline: none;
    padding: 12px 25px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-top: 30px;
    transition: background-color 0.3s ease;
    font-weight: 600;
}

.content button:hover{
    background-color: #ffffff;
    color: #006400;
    font-weight: 600;
}

.event-countdown{
    display: flex;
}

.event-countdown div{
    flex-basis: 100px;
    margin: 10px;
}

.event-countdown div p{
    font-size: 60px;
    margin-bottom: -14px;
}

/* event timeline */
.event-content {
    content: '';
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: -1;
    background-color: #89ce89;
    padding: 70px;
}

.timeline {
    margin: 5em auto;
    max-width: 34.15em;
}

.event-title h1 {
    margin: 0.3rem;
    font-size: 2rem;
}

.event-title h2 {
    margin-bottom: 0.5rem;
}

.event-title {
    text-align: center;
}

.event-title p {
    color: #000000;
    font-size: 1.3rem;
    letter-spacing: 1px;
}

.checkpoint {
    max-width: 34em;
    padding-top: 1em;
    padding-bottom: 2em;
    position: relative;
    min-height: 150px;
}

.checkpoint div {
    border: 2px solid #888;
    border-radius: 1em;
    padding: 1.5em;
}

.checkpoint p {
    line-height: 27px;
    color: black;
}

.checkpoint:nth-child(odd) {
    border-left: 3px solid #888;
    padding-left: 3em;
    transform: translateX(16.92em);
}

.checkpoint:nth-child(even) {
    border-right: 3px solid #888;
    padding-right: 3em;
    transform: translateX(-16.90em);
}

.checkpoint:nth-child(odd)::before,
.checkpoint:nth-child(even)::before {
    content: '';
    background: #888;
    width: 3em;
    height: 3px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
} 

.checkpoint:nth-child(odd)::before {
    left: 0;
}

.checkpoint:nth-child(even)::before {
    right: 0;
}

.checkpoint:nth-child(odd) div::before,
.checkpoint:nth-child(even) div::before {
    content: '';
    background: #fff;
    box-shadow: 0, 0, 0.5em #89ce89;
    width: 0.8em;
    height: 0.8em;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
}

.checkpoint:nth-child(odd) div::before {
    left: -0.5em;
}

.checkpoint:nth-child(even) div::before {
    right: -0.5em;
}

@media screen and (max-width: 1150px) {
    .timeline {
        width: 80vw;
    }
    .timeline .checkpoint {
        width: 100%;
        transform: none;
        padding-left: 0;
        padding-right: 0;
        border: none;
    }
    .timeline .checkpoint::before {
        width: 3px;
        height: 4em;
        top: -2em;
        left: 50%;
        transform: translateX(-50%);
    }
    .timeline .checkpoint div::before {
        top: -0.5em;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* UPCOMING EVENTS SECTION */
.upcoming-events {
    padding: 40px 20px;
    background-color: #ffffff;
    text-align: center;
}

.upcoming-events .event-title h1 {
    font-size: 2rem;
    color: #006400; /* CvSU green */
    margin-bottom: 10px;
}

.upcoming-events .event-title p {
    font-size: 1rem;
    color: #000000;
    margin-bottom: 30px;
}


/* Carousel Container */
.upcoming-carousel-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    overflow: hidden; /* Hide overflow for smooth sliding */
}

/* Carousel Styling */
.upcoming-event-carousel {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Smooth sliding effect */
}

.upcoming-event-card {
    flex: 0 0 33.33%; /* Show 3 items at a time */
    box-sizing: border-box;
    padding: 10px;
    background-color: #fff;
    border-radius: 8px;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
    text-align: center;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.upcoming-event-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.upcoming-event-card h2 {
    font-size: 1.5rem;
    color: #000000;
    margin: 15px 0 10px;
}

.upcoming-event-card p {
    font-size: 1rem;
    color: #000000;
    padding: 0 15px 15px;
}

/* Dots Styling */
.upcoming-carousel-dots {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.upcoming-carousel-dots .dot {
    width: 12px;
    height: 12px;
    margin: 0 5px;
    background-color: #b8b8b8bb;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.upcoming-carousel-dots .dot.active {
    background-color: #006400; /* CvSU green */
}

/* PAST EVENTS SECTION */
.past-events {
    padding: 40px 20px;
    background-color: #0b8800;
    text-align: center;
}

.past-events .event-title h1 {
    font-size: 2rem;
    color: #ffffff; /* CvSU green */
    margin-bottom: 10px;
}

.past-events .event-title p {
    font-size: 1rem;
    color: #FFD700;
    margin-bottom: 30px;
}

/* Carousel Container */
.past-carousel-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    overflow: hidden; /* Hide overflow for smooth sliding */
}

/* Carousel Styling */
.past-event-carousel {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Smooth sliding effect */
}

.past-event-card {
    flex: 0 0 33.33%; /* Show 3 items at a time */
    box-sizing: border-box;
    padding: 10px;
    background-color: #0b8800;
    border-radius: 8px;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
    text-align: center;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.past-event-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.past-event-card h2 {
    font-size: 1.5rem;
    color: #ffffff;
    margin: 15px 0 10px;
}

.past-event-card p {
    font-size: 1rem;
    color: #ffffff;
    padding: 0 15px 15px;
}

/* Dots Styling */
.past-carousel-dots {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.past-carousel-dots .dot {
    width: 12px;
    height: 12px;
    margin: 0 5px;
    background-color: #b8b8b8bb;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.past-carousel-dots .dot.active {
    background-color: #ffffff; /* CvSU green */
}

/* ABOUT DROP DOWN MENU */
/* Style the navigation bar */
.nav-bar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.nav-bar ul li {
    position: relative; /* Necessary for dropdown positioning */
}

.nav-bar ul li a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: rgb(255, 255, 255);
}

/* Dropdown menu styling */
.nav-bar ul .dropdown-menu {
    display: none; /* Hidden by default */
    position: absolute;
    top: 100%; /* Position it below the parent */
    left: 0;
    list-style-type: none;
    background-color: white;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    padding: 0;
    margin: 0;
    z-index: 1000;
    text-align: left;
}

.nav-bar ul .dropdown-menu li {
    width: 200px;
}

.nav-bar ul .dropdown-menu li a {
    padding: 10px 15px;
    color: black;
    text-decoration: none;
}

/* Show the dropdown menu on hover */
.nav-bar ul li.dropdown:hover .dropdown-menu {
    display: block;
}

/* Hover effects */
.nav-bar ul .dropdown-menu a:hover {
    color: green;
    text-decoration: underline;
}

.nav-bar a:hover {
    color: rgb(202, 202, 202);
}

/* About Page */
.main-content {
    margin: 0 auto;
}

.background-container {
    position: relative;
    width: 100%;
    height: 300px; /* Set a fixed height for the banner */
    overflow: hidden; /* Ensure the image doesn't overflow */
}

.background-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.background-container .about-title {
    position: absolute;
    top: 50%; /* Center vertically */
    left: 15%; /* Center horizontally */
    transform: translate(-50%, -50%);
    color: white; /* Adjust text color for visibility */
    font-size: 2.5rem; /* Adjust font size as needed */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Add shadow for better readability */
    text-align: center;
    z-index: 2; /* Ensure it appears above the overlay */
}

.background-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Black shade with 50% opacity */
    z-index: 1; /* Ensure it appears above the image */
}

.cvsu-image {
    position: relative;
    width: 750px;
    height: auto; /* Allow the container to adjust based on content */
    overflow: visible; /* Ensure the paragraph is not hidden */
    margin-bottom: 20px; /* Add spacing below the image for the paragraph */
}

.cvsu-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure the image maintains aspect ratio and fills the container */
    border-radius: 4px; /* Optional: Add slight rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow for emphasis */
}

.cvsu-image p {
    margin-top: 10px; /* Add spacing between the image and the paragraph */
    color: #333; /* Adjust text color for better visibility */
    font-size: 1rem; /* Adjust font size as needed */
    line-height: 1.5; /* Improve readability */
}

/* Main content layout */
.content-container {
    display: flex; /* Create a flex container */
    gap: 40px; /* Add space between the two sections */
    padding: 20px; /* Add padding around the main content */
    align-items: flex-start; /* Align items to the top */
    flex-wrap: nowrap;
    max-width: 1200px;
    margin: 0 auto;
}

/* Left section (existing content) */
.cvsu-image {
    flex: 2; /* Take up 2/3 of the available space */
    max-width: 750px; /* Ensure the image container doesn't grow larger */
    height: auto; /* Allow the height to adjust based on content */
    margin-bottom: 20px; /* Add spacing below the image for the paragraph */
}

.cvsu-image img {
    width: 100%; /* Ensure the image fills the container */
    height: auto; /* Maintain the aspect ratio */
    object-fit: cover; /* Ensure the image scales properly */
    border-radius: 4px; /* Optional: Add slight rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow for emphasis */
}

/* Right Section (Campus News and Info) */
.right-content {
    flex: 1; /* Take up 1/3 of the available space */
    display: flex; /* Enable Flexbox layout for the right content */
    flex-direction: column; /* Stack Campus News and Campus Info vertically */
    gap: 20px; /* Add space between Campus News and Campus Info */
}

/* Campus News Section */
.campus-news,
.campus-info {
    background-color: #f9f9f9; /* Light background for contrast */
    padding: 15px; /* Add padding inside the sections */
    border-radius: 8px; /* Optional: Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Subtle shadow */
    width: 100%; /* Ensure both sections take up the full width of the parent */
    height: 250px; /* Set a fixed height for both sections */
    display: flex; /* Enable Flexbox for content alignment */
    flex-direction: column; /* Stack content vertically */
    justify-content: space-between; /* Distribute content evenly */
}

/* Campus News Heading */
.campus-news h2,
.campus-info h2 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 10px;
    text-align: center; /* Center the heading */
}

/* Campus News List */
.campus-news ul {
    list-style-type: none; /* Remove bullet points */
    padding: 0;
    margin: 0;
    flex-grow: 1; /* Allow the list to grow within the section */
    overflow-y: auto; /* Add scroll if content overflows */
}

.campus-news ul li {
    margin-bottom: 10px; /* Add spacing between news items */
}

.campus-news ul li a {
    color: #006400; /* CvSU green color */
    text-decoration: none;
    font-size: 1rem;
}

.campus-news ul li a:hover {
    text-decoration: underline; /* Add underline on hover */
}

/* Campus Info Paragraphs */
.campus-info p {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 10px; /* Add spacing between paragraphs */
    flex-grow: 1; /* Allow the content to grow within the section */
    overflow-y: auto; /* Add scroll if content overflows */
}

/* Vision-Mission Page*/
.vision-mission-container {
    display: flex; /* Enable Flexbox layout */
    flex-direction: column; /* Stack boxes vertically */
    gap: 20px; /* Add consistent spacing between boxes */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    min-height: 100vh; /* Ensure the container takes up the full viewport height */
}

/* Paragraph Box Styling */
.paragraph-box {
    padding: 20px; /* Add padding inside the box */
    min-height: 200px; /* Ensure all boxes have the same minimum height */
    width: 80%; /* Set a consistent width for all boxes */
    max-width: 800px; /* Limit the maximum width of the boxes */
    display: flex; /* Enable Flexbox for alignment */
    flex-direction: column; /* Stack content vertically */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    text-align: center; /* Center the text inside the box */
    border-radius: 8px; /* Optional: Rounded corners */
    /* Remove visual styles */
    background-color: transparent; /* Make the box invisible */
    box-shadow: none; /* Remove the shadow */
}

/* Heading Styling */
.paragraph-box h2 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 10px; /* Add spacing below the heading */
}

/* Paragraph Styling */
.paragraph-box p {
    font-size: 1rem;
    color: #555;
    line-height: 1.8; /* Increase line height for better readability */
    margin: 0; /* Remove default margin */
}

.paragraph-box h2 {
    color: #006400; /* CvSU green color */
}

.goals-text {
    text-align: center; /* only this part is left-aligned */
    display: inline-block; /* keeps it visually centered within the box */
    max-width: 100%; /* optional: prevents overflow */
}


/* History Page */
.history-content-container {
    max-width: 800px; /* Limit the width of the content */
    margin: 0 auto; /* Center the content horizontally */
    padding: 20px; /* Add padding around the content */
    text-align: justify; /* Justify the text for a clean look */
    line-height: 1.8; /* Improve readability with increased line spacing */
    color: #333; /* Set a readable text color */
    font-size: 1rem; /* Set a standard font size */
}

/* History Page Heading */
.history-content-container h1 {
    font-size: 2rem; /* Make the heading prominent */
    color: #006400; /* CvSU green color */
    text-align: center; /* Center the heading */
    margin-bottom: 20px; /* Add spacing below the heading */
    font-weight: bold; /* Make the heading bold */
}

/* History Page Paragraph */
.history-content-container p {
    margin-bottom: 20px; /* Add spacing between paragraphs */
    text-align: justify; /* Justify the text for a clean look */
    color: #555; /* Slightly lighter text color for readability */
    line-height: 1.8; /* Increase line height for better readability */
}


/* CONTACT US PAGE */
main section {
    padding: 40px 20px;
    max-width: 1000px;
    margin: 0 auto;
}

main section h2 {
    font-size: 1.8rem;
    color: #006400;
    margin-bottom: 20px;
    text-align: center;
}

/* Contact List Styling */
.contact-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.contact-item {
    /* background-color: #f9f9f9; */
    padding: 20px;
    border-radius: 8px;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
    width: 300px;
    text-align: center;
}

.contact-item h3 {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 10px;
}

.contact-item p {
    font-size: 1rem;
    color: #555;
    margin-bottom: 5px;
    white-space: nowrap;
}

.others-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.others-item {
    /* background-color: #f9f9f9; */
    padding: 20px;
    border-radius: 8px;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
    width: 300px;
    text-align: center;
}

.others-item h3 {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 10px;
}

.others-item p {
    font-size: 1rem;
    color: #555;
    margin-bottom: 5px;
    white-space: nowrap;
}

/* Map Section */
.map-container iframe {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Divider Styling */
hr {
    border: none;
    border-top: 3px solid #006400; /* CvSU green color */
    margin: 40px 0; /* Add spacing above and below the line */
    width: 80%; /* Center the line with a smaller width */
    margin-left: auto;
    margin-right: auto;
}

/* Contact Container Styling */
.contact-container {
    display: flex;
    flex-wrap: wrap; /* Ensure responsiveness */
    gap: 20px;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Contact Details Styling */
.contact-details {
    flex: 1 1 45%; /* Take 45% of the width */
    /* background-color: #f9f9f9; */
    padding: 20px;
    border-radius: 8px;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
}

.contact-details h2 {
    font-size: 1.8rem;
    color: #006400; /* CvSU green */
    margin-bottom: 15px;
}

.contact-details p {
    font-size: 1rem;
    color: #555;
    margin-bottom: 10px;
}

/* Map Container Styling */
.map-container {
    flex: 1 1 45%; /* Take 45% of the width */
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.map-container h2 {
    font-size: 1.8rem;
    color: #006400; /* CvSU green */
    margin-bottom: 15px;
}

.map-container iframe {
    width: 100%;
    height: 300px;
    border-radius: 8px;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.location-section p {
    text-align: center;
}

/* COUNTDOWN */
.container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Horizontally center all child elements */
    justify-content: center; /* Vertically center all child elements */
    text-align: center; /* Center text inside child elements */
    margin: 0 auto; /* Ensure the container is centered within the page */
    width: 100%; /* Take full width of the page */
}

/* Event Description */
#event-description {
    font-size: 1.2rem;
    color: #ffffff; /* White text for the description */
    margin-bottom: 10px;
    text-align: center; /* Center the description text */
}

/* Event Name */
#event-name {
    font-size: 2.5rem;
    color: #ffffff; /* White for the first part */
    margin-bottom: 20px;
}

#event-name .highlight {
    color: #34da34; /* Green for the highlighted part */
    font-weight: bold;
}

/* Event Toggle Buttons */
.event-toggle {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.event-toggle .toggle-button {
    padding: 10px 20px;
    background-color: #28bd02;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.event-toggle .toggle-button.active {
    background-color: #006400; /* CvSU green */
    color: #fff;
}

.event-toggle .toggle-button:hover {
    background-color: #1e881e;
    color: #fff;
}

/* COUNTDOWN TIMER STYLE */
.container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Horizontally center all child elements */
    justify-content: center; /* Vertically center all child elements */
    text-align: center; /* Center text inside child elements */
    margin: 0 auto; /* Ensure the container is centered within the page */
    width: 100%; /* Take full width of the page */
}

/* Event Description */
#event-description {
    font-size: 1.2rem;
    color: #ffffff; /* White text for the description */
    margin-bottom: 10px;
    text-align: center; /* Center the description text */
}

/* Event Name */
#event-name {
    font-size: 2.5rem;
    color: #ffffff; /* White for the first part */
    margin-bottom: 20px;
}

#event-name .highlight {
    color: #34da34; /* Green for the highlighted part */
    font-weight: bold;
}

/* Event Toggle Buttons */
.event-toggle {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.event-toggle .toggle-button {
    padding: 10px 20px;
    background-color: #28bd02;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.event-toggle .toggle-button.active {
    background-color: #006400; /* CvSU green */
    color: #fff;
}

.event-toggle .toggle-button:hover {
    background-color: #1e881e;
    color: #fff;
}

/* Countdown Timer */
.big-countdown {
    text-align: center;
    margin-top: 20px;
    width: 100%; /* Ensure the countdown takes full width */
}

.big-countdown .time {
    display: flex;
    justify-content: center;
    gap: 20px; /* Add spacing between countdown units */
}

.big-countdown .time div {
    text-align: center;
}

.big-countdown .time p {
    font-size: 3rem; /* Larger countdown numbers */
    color: #ffffff; /* Countdown numbers */
    margin: 0;
}

.big-countdown .time span {
    font-size: 1.2rem; /* Countdown labels */
    color: #ffffff; /* Countdown labels */
}

/* COUNTDOWN ANIMATION #COMMENT IF YOU DIDNT WANNA USE THIS*/ 
.big-countdown {
  opacity: 1;
  transition: opacity 0.6s ease;
}

#event-name, #event-description {
  transition: opacity 0.6s ease;
}

/* SUPPORTED IN LANDING PAGE SECTION STYLE */
.supported-by {
  padding: 3rem 1rem;
  background-color: #ffffff;
  text-align: center;
}

.supported-title h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #1f2937;
}

.supported-title p {
  color: #6b7280;
  font-size: 1rem;
  margin-bottom: 2rem;
}

/* Logo Flex Container */
.supported-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

/* Logo Style */
.supported-logo {
  background: #fff;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  max-width: 180px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.supported-logo:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.supported-logo img {
  max-width: 100%;
  max-height: 60px;
  object-fit: contain;
}

/* UNBOUNCE BUTTON STYLE */
.scroll-top-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
  background-color: black;
  border: none;
  border-radius: 50%; /* makes it a circle */
  width: 50px;
  height: 50px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white; /* caret icon color */
  font-size: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.scroll-top-btn:hover {
  background-color: #28a745; /* green */
  color: black; /* caret color changes to black */
  transform: scale(1.15);
}

.scroll-top-btn:focus {
  outline: none;
}



/* PRELOADER STYLES */
#preloader {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh;
    background: #fff;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
}
#preloader.hide {
    opacity: 0;
    pointer-events: none;
}