/* General Styles */
.spacer {
    height: 50vh;
}

/* Background home banner */
.bg-hero {
    background-image: 
        url('https://static.igem.wiki/teams/5253/home-page/final-homepage-banner-2.gif'),
        url('https://static.igem.wiki/teams/5253/prizes/best-education.webp'),
        url('https://static.igem.wiki/teams/5253/prizes/medal-silver.webp');
    background-size: contain, 100px, 103px; /* Adjust the size of the second and third image */
    background-position: center, 2% 20px, 2% 200px; /* Adjust position of second and third image */
    background-repeat: no-repeat, no-repeat, no-repeat; /* No repeat for any image */
    height: 500px;
    width: auto;
    margin-top: 40px; /* Adds space above the container */
    padding-top: 0;
    margin-left: 0;
}

/* Add text below the second image */
.bg-hero::after {
    content: "Nomination for \A Best Education"; /* Text content for the second image */
    white-space: pre;
    position: absolute;
    color: #25336b; /* Text color */
    font-size: 16px; /* Adjust font size */
    text-align: left;
    margin-left: 1.5%;
    width: 100%;
    top: 220px; /* Adjust the vertical position below the second image */
}

/* Add text below the third image */
.bg-hero::before {
    content: "Silver Medal"; /* Text content for the third image */
    position: absolute;
    color: #25336b; /* Text color */
    font-size: 16px; /* Adjust font size */
    text-align: left;
    width: 100%;
    top: 390px; /* Adjust the vertical position below the third image */
    margin-left: 2.5%;
}

/* First Container */
#container-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0; /* Removed padding */
}

.text-container-1 {
    width: 45%;
    font-size: 25px;
    opacity: 0;
    transform: translateX(-100%);
    transition: all 1s ease-in-out;
    font-family: 'Avenir', 'Century Gothic', sans-serif;
}

/* Image 1 CSS */
.image-container-1 {
    width: 100%;  /* Make the image container take full width of the page */
    display: flex;  /* Flexbox to center the image */
    justify-content: center;  /* Center the image horizontally */
    align-items: center;  /* Center the image vertically */
    margin: 0;  /* Removed margin */
}

.image-container-1 img {
    max-width: 60%;  /* Adjust the size of the image to be 60% of the container */
    height: auto;  /* Maintain aspect ratio */
    object-fit: contain;  /* Ensure the image fits within its container */
    border-radius: 10px;  /* Optional: Add rounded corners */
}


#container-1.visible .text-container-1 {
    opacity: 1;
    transform: translateX(0);
    font-family: 'Avenir', 'Century Gothic', sans-serif;
}

/* Second Container */
#container-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0; /* Removed padding */
}

.text-container-2 {
    width: 45%;
    font-size: 25px;
    opacity: 0;
    transform: translateX(100%);
    transition: all 1s ease-in-out;
    padding: 20px; 
    font-family: 'Avenir', 'Century Gothic', sans-serif;
}

/* Image 2 CSS */
.image-container-2 {
    width: 100%;  /* Make the image container take full width of the page */
    display: flex;  /* Flexbox to center the image */
    justify-content: center;  /* Center the image horizontally */
    align-items: center;  /* Center the image vertically */
    margin: 0;  /* Removed margin */
}

.image-container-2 img {
    max-width: 100%;  /* Adjust the size of the image to be 100% of the container */
    height: auto;  /* Maintain aspect ratio */
    object-fit: contain;  /* Ensure the image fits within its container */
    border-radius: 10px;  /* Optional: Add rounded corners */
}


#container-2.visible .text-container-2 {
    opacity: 1;
    transform: translateX(0);
}

/* Third Container */
#container-3 {
    margin-top: 50px;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    flex-direction: column; /* Ensure column layout so the image is above the text */
    align-items: center;
    padding: 0; /* Removed padding */
}

.text-container-3 {
    font-size: 25px;
    opacity: 0;
    transform: translateY(100%);
    transition: all 1s ease-in-out;
    margin-top: 0; /* Ensure no margin above */
    font-family: 'Avenir', 'Century Gothic', sans-serif;
}

/* Image 3 CSS */
.image-container-3 {
    width: 100%;  /* Full width of the container */
    display: flex;  /* Flexbox to center the image */
    justify-content: center;  /* Center the image horizontally */
    align-items: center;  /* Center the image vertically */
    margin-bottom: 0;  /* Removed margin below */
}

.image-container-3 img {
    max-width: 60%;  /* Adjust the size of the image to be 40% of the container width */
    height: auto;  /* Maintain the aspect ratio */
    object-fit: contain;  /* Ensure the image fits within its container */
}

/* Animation for text appearing */
#container-3.visible .text-container-3 {
    opacity: 1;
    transform: translateY(0);
}


/* Counter Section Container */
#counter-section {
    display: flex; /* Align items side by side */
    align-items: center; /* Center items vertically */
    justify-content: space-between; /* Space items out evenly */
    padding: 20px; /* Optional: Add some padding around the container */
}

/* Image Container */
.image-container-counter {
    width: 40%; /* Adjust width as needed */
    display: flex; /* Flexbox to center the image */
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically */
    margin: 0; /* Remove margin if needed */
}

.image-container-counter img {
    max-width: 70%; /* Make the image fit within its container */
    height: auto; /* Maintain the aspect ratio */
    object-fit: contain; /* Ensure the image fits within its container */
}

/* Counter Section */
.counter-container {
    text-align: center;
    font-size: 48px; /* Increased font size */
    width: 60%; /* Adjust width as needed */
    font-family: 'Avenir', 'Century Gothic', sans-serif;
}

.counter-container .number {
    font-size: 60px; /* Larger number size */
    font-weight: bold; /* Make the number bold */
    color: #25336b; /* Optional: Change the number color */
    font-family: 'Avenir', 'Century Gothic', sans-serif;
}

.counter-container .label {
    font-size: 36px; /* Increase the label size */
    margin-top: 10px; /* Add space between number and label */
    color: #25336b; /* Optional: Change the label color */
    font-family: 'Avenir', 'Century Gothic', sans-serif;
}

#container-4-1 {
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    justify-content: center;
    font-family: 'Avenir', 'Century Gothic', sans-serif;
}

/* Fourth Container */
#container-4 {
   margin-top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Avenir', 'Century Gothic', sans-serif;
}

/* Text Container 4 (Appears First) */
.text-container-4 {
    opacity: 0;
    transform: translateY(-100%); /* Start above the screen */
    transition: all 1s ease-in-out;
    text-align: center;
    font-size: 25px;
    margin-top: 20px; /* Added top margin */
    font-family: 'Avenir', 'Century Gothic', sans-serif;
}

/* Image Container 4 (Appears Second) */
.image-container-4 {
    width: 100%;  /* Full width of the container */
    display: flex;  /* Flexbox to center the image */
    justify-content: center;  /* Center the image horizontally */
    align-items: center;  /* Center the image vertically */
    margin-top: 20px;  /* Added top margin */
}

.image-container-4 img {
    max-width: 60%;  /* Adjust the size of the image to be 40% of the container width */
    height: auto;  /* Maintain the aspect ratio */
    object-fit: contain;  /* Ensure the image fits within its container */

}

/* Text Container 4-1 (Appears Third) */
.text-container-4-1 {
    opacity: 0;
    transform: translateY(100%); /* Start below the screen */
    transition: all 1s ease-in-out;
    text-align: center;
    font-size: 25px;
    margin-top: 20px; /* Added top margin */
    font-family: 'Avenir', 'Century Gothic', sans-serif;
}

/* Visible class for animation */
#container-4.visible .text-container-4 {
    opacity: 1;
    transform: translateY(0); /* Move into view */
}

#container-4.visible .image-container-4 {
    opacity: 1;
    transform: translateY(0); /* Move into view */
}

#container-4.visible .text-container-4-1 {
    opacity: 1;
    transform: translateY(0); /* Move into view */
}

/* Fifth Container */
#container-5 {
    margin-top: 50px;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    flex-direction: column; /* Ensure column layout so the image is above the text */
    align-items: center;
    padding: 0; /* Removed padding */
}

.text-container-5 {
    font-size: 25px;
    opacity: 0;
    transform: translateY(100%);
    transition: all 1s ease-in-out;
    margin-top: 20px; /* Ensure no margin above */
    font-family: 'Avenir', 'Century Gothic', sans-serif;
}

/* Image 5 CSS */
.image-container-5 {
    width: 100%;  /* Full width of the container */
    display: flex;  /* Flexbox to center the image */
    justify-content: center;  /* Center the image horizontally */
    align-items: center;  /* Center the image vertically */
    margin-bottom: 0;  /* Removed margin below */
}

.image-container-5 img {
    max-width: 40%;  /* Adjust the size of the image */
    height: auto;  /* Maintain the aspect ratio */
    object-fit: contain;  /* Ensure the image fits within its container */
    
}

/* Animation for text appearing */
#container-5.visible .text-container-5 {
    opacity: 1;
    transform: translateY(0);
}


/* Updated class to gif-container-5 */
.gif-container {
    width: 100%;  /* Full width of the container */
    display: flex;  /* Flexbox to center the image */
    justify-content: center;  /* Center the image horizontally */
    align-items: center;  /* Center the image vertically */
    margin-bottom: 0;  /* No margin at the bottom */
}

.gif-container img {
    max-width: 60%;  /* Resize the image to 40% of the container */
    height: auto;  /* Maintain aspect ratio */
    object-fit: contain;  /* Ensure the image fits within its container */
}

/* Sixth Container */
#container-6 {
    margin-top: 50px;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    position: relative;
    height: 600px; /* Adjust based on your design */
    overflow: hidden;
}

/* Sixth Container */
#container-6 {
    margin-top: 50px;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    position: relative;
    height: 600px; /* Adjust based on your design */
    overflow: hidden;
}

/* Wrapper for image and quotes */
.image-and-quotes-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Image container */
.image-container-6 {
    width: 80%; /* Adjust based on your design */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1; /* Ensure the image is on top of the quotes */
}

.image-container-6 img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Quotes styling */
.quote {
    position: absolute;
    font-size: 18px;
    color: #000;
    opacity: 0; /* Initially hidden */
    transition: opacity 1s ease-in-out, transform 1s ease-in-out; /* Smooth transition for appearing and moving */
    width: 30%; /* Control width to ensure it's not overlapping the image */
    text-align: center;
    max-width: 300px; /* Optional: Maximum width to prevent quotes from being too wide */
}

/* Left side quotes */
.quote-1, .quote-2 {
    left: 0; /* Position on the left side */
}

/* Right side quotes */
.quote-3, .quote-4 {
    right: 0; /* Position on the right side */
}

/* Individual quote positions */
.quote-1 {
    top: 20%; /* Adjust position as needed */
}

.quote-2 {
    bottom: 20%; /* Adjust position as needed */
}

.quote-3 {
    top: 20%; /* Adjust position as needed */
}

.quote-4 {
    bottom: 20%; /* Adjust position as needed */
}

/* Animation triggered when visible */
#container-6.visible .quote.show {
    opacity: 1;
    transform: translateY(0); /* Bring quotes to their correct positions */
}

/* For initial appearance, moving into view */
.quote {
    transform: translateY(20px); /* Start slightly below for smooth move-up effect */
}

svg#freepik_stories-stress:not(.animated) .animable {opacity: 0;}
svg#freepik_stories-stress.animated #freepik--lighting-bolts--inject-2 {
    animation: 1.5s Infinite linear heartbeat;
    animation-delay: 0s;
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }
    10% {
        transform: scale(1.1);
    }
    30% {
        transform: scale(1);
    }
    40% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    60% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

/* -------------------- Makes images clickable ---------------- */

/* The Modal (background) */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
}

.modal-content-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.modal-content-container {
    position: relative;
    max-width: 120%;
    max-height: 120%;
    top: 30px;
}

.modal-content {
    width: auto; /* Width of 70% of viewport width */
    max-width: 1500px; /* Max width of 550px */
    max-height: 80vh; /* Max height of 70% of viewport height */
    height: auto; /* Maintain aspect ratio */
    border-radius: 5px; /* Rounded corners */
    overflow: hidden; /* Hide overflow */
    background-color: #fad8d8;
}

.close {
    position: absolute;
    top: 100px;
    right: 25px;
    color: #FFDE5A;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #25336b;
}

/* General Image Styling */
.image-container-2 img {
    transition: transform 0.3s ease; /* Smooth transition for scaling */
}

/* Hover Effect */
.image-container-2 img:hover {
    transform: scale(1.3); /* Slightly enlarge the image on hover */
    cursor: pointer; /* Change cursor to indicate clickable */
}

/* Responsive Design for Smaller Screens */
@media (max-width: 768px) {
    .text-container-1,
    .text-container-2,
    .text-container-3,
    .text-container-4,
    .text-container-4-1,
    .text-container-5 {
        font-size: 18px; /* Smaller font size for mobile */
    }

    .counter-container {
        font-size: 36px; /* Adjust counter font size for mobile */
    }

    .counter-container .number {
        font-size: 48px; /* Adjust number size for mobile */
    }

    .counter-container .label {
        font-size: 24px; /* Adjust label size for mobile */
    }
}