body {
    margin: 0;
    padding: 0;
    background-color: #ffffff00;
    display: grid;
    grid-template-rows: 10% 80% 10%; /* Header: 10%, Main: 80%, Footer: 10% */
    width: 100vw;
    height: 100vh; /* Ensure the body spans the full viewport height */
    font-family: 'Geist', sans-serif;
    overflow: hidden; /* Prevent scrolling */
}

/* Parent containers */
header, footer {
    position: relative; /* Ensure letters are positioned relative to the header/footer */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* Full height of their respective grid row */
}

main {
    display: flex;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    height: 100%; /* Full height of the main grid row */
    position: relative;
}

.columns-container {
    display: grid; /* Use grid layout */
    grid-template-columns: repeat(7, 1fr); /* 7 equal columns */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    position: relative; /* Ensure the container is the reference for absolute positioning */
}

.columns-container p {
    grid-column: 3 / span 3; /* Start at the 3rd column and span 3 columns */
    grid-row: 1; /* Place it in the first row */
    align-self: center; /* Center vertically within the row */
    justify-self: center; /* Center horizontally within the columns */
    z-index: 10; /* Ensure the text appears above the columns */
    text-align: left; /* Center the text */
    font-size: 1.2rem; /* Adjust font size as needed */
    color: #000; /* Adjust text color */
    padding: 10px 20px; /* Optional: Add padding for better readability */
   
}

@media (max-width: 768px) {
    .columns-container p {
    grid-column: 2 / span 5; /* Fill 5 center columns on smaller screens */
    grid-row: 1; /* Place it in the first row */
    align-self: center; /* Center vertically within the row */
    justify-self: center; /* Center horizontally within the columns */
    z-index: 10; /* Ensure the text appears above the columns */
    text-align: left; /* Center the text */
    }
}

.column {
    flex: 1; /* Each column takes up equal space */
    border-left: 0.5px solid rgba(0, 0, 0, 0.15); /* Add visible left border */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 100%; /* Ensure columns fill their container */
}

/* General letter styles */
.letter {
    font-size: 2.25rem; /* Adjust font size as needed */
    font-weight: bold;
    display: inline-block; /* Ensure letters are inline and not block-level */
    opacity: 0; /* Start with opacity 0 */
    position: relative; /* Position relative for animation */
    transform: translateY(20px); /* Start slightly below */
    animation: fadeIn 2s ease-in-out forwards; /* Default animation */
    text-align: center; /* Ensure text is centered */
}

/* Animation delays */
.letter:nth-child(1) { animation-delay: 0s; }
.letter:nth-child(2) { animation-delay: 0.2s; }
.letter:nth-child(3) { animation-delay: 0.4s; }
.letter:nth-child(4) { animation-delay: 0.6s; }
.letter:nth-child(5) { animation-delay: 0.8s; }
.letter:nth-child(6) { animation-delay: 1s; }
.letter:nth-child(7) { animation-delay: 1.2s; }
.letter:nth-child(8) { animation-delay: 1.4s; }
.letter:nth-child(9) { animation-delay: 1.6s; }
.letter:nth-child(10) { animation-delay: 1.8s; }
.letter:nth-child(11) { animation-delay: 2s; }
.letter:nth-child(12) { animation-delay: 2.2s; }
.letter:nth-child(13) { animation-delay: 2.4s; }
.letter:nth-child(14) { animation-delay: 2.6s; }

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px); /* Start slightly below */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* End at the original position */
    }
}

/* Header letters animation */
.header-letter {
    position: absolute;
    top: 70px; /* Position near the top */
    transform: translateX(-50%);
    animation: moveToTop 2s ease-in-out forwards;
    text-align: center; /* Ensure text is centered */
}

/* Footer letters animation */
.footer-letter {
    position: absolute;
    bottom: 140px; /* Position near the bottom */
    transform: translateX(-50%);
    animation: moveToBottom 2s ease-in-out forwards;
    text-align: center; /* Ensure text is centered */
}

/* Staggered animation delays for header letters */
.header-letter:nth-child(1) { animation-delay: 0s; }
.header-letter:nth-child(2) { animation-delay: 0.2s; }
.header-letter:nth-child(3) { animation-delay: 0.4s; }
.header-letter:nth-child(4) { animation-delay: 0.6s; }
.header-letter:nth-child(5) { animation-delay: 0.8s; }
.header-letter:nth-child(6) { animation-delay: 1s; }
.header-letter:nth-child(7) { animation-delay: 1.2s; }

/* Staggered animation delays for footer letters */
.footer-letter:nth-child(1) { animation-delay: 1.4s; }
.footer-letter:nth-child(2) { animation-delay: 1.6s; }
.footer-letter:nth-child(3) { animation-delay: 1.8s; }
.footer-letter:nth-child(4) { animation-delay: 2s; }
.footer-letter:nth-child(5) { animation-delay: 2.2s; }
.footer-letter:nth-child(6) { animation-delay: 2.4s; }
.footer-letter:nth-child(7) { animation-delay: 2.6s; }

@keyframes moveToTop {
    0% {
        opacity: 0;
        transform: translateY(20px); /* Start slightly below */
    }
    100% {
        opacity: 1;
        transform: translateY(-50px); /* Move to the top */
    }
}

@keyframes moveToBottom {
    0% {
        opacity: 0;
        transform: translateY(-20px); /* Start slightly above */
    }
    100% {
        opacity: 1;
        transform: translateY(50px); /* Move to the bottom */
    }
}

@media (max-width: 768px) {
    .letter {
        font-size: 1.5rem; /* Adjust font size for mobile */
    }
}

.image-loop {
    grid-column: 3 / span 3; /* Start at the 3rd column and span 3 columns */
    grid-row: 1; /* Place it in the first row */
    position: absolute;
    width: 720px; /* Fixed width */
    height: 480px; /* Fixed height (16:9 ratio) */
    max-width: 100%; /* Ensure it scales on smaller screens */
    max-height: 100%; /* Ensure it scales on smaller screens */
    overflow: hidden;
    background-color: black; /* Optional: Add a background color */
    opacity: 100; /* Initially hide the image-loop */
    transition: opacity 1s ease-in-out; /* Smooth fade-in effect */
    left: 50%; /* Position it in the center horizontally */
    transform: translateX(-50%); /* Adjust for centering */
}

@media (max-width: 768px) {
    .image-loop {
        grid-column: 1 / span 7; /* Start at the 2nd column and span 5 columns */
        grid-row: 1; /* Place it in the first row */
    }
}

.image-loop.visible {
    opacity: 1; /* Make it visible when the class is added */
}

.image-loop img {
    width: 100%; /* Ensure the image fills the container */
    height: 100%; /* Maintain the aspect ratio */
    object-fit: cover; /* Ensure the image covers the container without distortion */
    position: absolute;
    opacity: 0;
    animation: fadeLoop 9s infinite;
}



@keyframes fadeLoop {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    40% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}