body {
    background-color: #f7c443;
    background-size: cover; /* Cover the entire viewport */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat; /* Do not repeat the background image */
    font-family: Arial, sans-serif; /* Define a fallback font family */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

/* Apply styles to the header */
header {
    background-color: #333; /* Dark background color */
    color: #fff; /* White text color */
    padding: 20px; /* Add padding to the header */
}

/* Style the logo */
.logo img {
    width: 100px; /* Adjust the width of the logo */
    height: auto; /* Maintain aspect ratio */
}

/* Style the navigation links */
nav ul {
    list-style-type: none; /* Remove default list style */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

nav ul li {
    display: inline; /* Display navigation links horizontally */
    margin-right: 20px; /* Add spacing between navigation links */
}

nav ul li a {
    color: #fff; /* White color for links */
    text-decoration: none; /* Remove underline from links */
    font-weight: bold; /* Bold text for links */
}

nav ul li a:hover {
    color: #ffd700; /* Change color on hover */
}

/* Add CSS for spinner */
.spinner {
    display: none;
    width: 40px;
    height: 40px;
    margin: 50px auto;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); }
}

.image-class {
    width: 100%; /* Adjust width as needed */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Make the image a block element */
    margin-top: 20px; /* Add top margin */
    opacity: 0; /* Initially set opacity to 0 */
    animation: fadeIn 1s ease-in-out forwards; /* Apply fadeIn animation */
}

@keyframes fadeIn {
    from {
        opacity: 0; /* Start from opacity 0 */
    }
    to {
        opacity: 1; /* End with opacity 1 */
    }
}

.container {
    display: flex; /* Use flexbox layout */
    justify-content: sp
    
    ace-around; /* Distribute columns evenly */
}


.column {
    flex: 1; /* Make each column grow to occupy equal space */
    padding: 20px; /* Add padding for spacing */
    border: 1px solid #ccc; /* Add border for visualization */
    text-align: center; /* Center-align content */
    opacity: 0; /* Set initial opacity to 0 */
    animation: fadeIn 1s ease forwards; /* Apply fade-in animation */
}

@keyframes fadeIn {
    from {
        opacity: 0; /* Start from opacity 0 */
    }
    to {
        opacity: 1; /* End with opacity 1 */
    }
}

/* Different delay for each column */
.column1 { animation-delay: 0.2s; }
.column2 { animation-delay: 0.4s; }
.column3 { animation-delay: 0.6s; }

.column1 {
    position: relative; /* Position relative for absolute positioning */
    padding: 20px; /* Add padding for content */
    color: #fff; /* Text color */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background color */
}

.bg-video {
    position: absolute; /* Position absolute for full-screen video */
    top: 0;
    left: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    object-fit: cover; /* Cover entire container */
    z-index: -1; /* Behind other content */
}