@charset "UTF-8";

/* Global Styles */
body {
    background-color: #c3c9ce94; /* Light grey background */
    color: #343a40; /* Dark grey text */
    font-family: Arial, sans-serif;
}

h1, .lead {
    color: #007bff; /* Blue text for headings */
}

.btn-primary {
    background-color: #007bff; /* Bootstrap primary blue */
    border-color: #007bff;
}

.btn-primary:hover {
    background-color: #0056b3; /* Darker blue for hover effect */
    border-color: #0056b3;
}

.images-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Gap for larger screens */
}

#logo {
    max-width: 185px;
    max-height: 185px;
    width: auto;
    height: auto;
    flex-shrink: 0;
    flex-grow: 1;
}

#text {
    max-width: 100%;
    height: auto;
    flex-shrink: 1;
    flex-grow: 2;
}

#logo,
#text {
    position: relative;
    top: -270px; /* Initial position above the window */
    animation-duration: 2.0s; /* Animation duration */
    animation-timing-function: ease-in-out; /* Animation timing function */
    animation-fill-mode: forwards; /* Keep the final state after animation */
}

@keyframes floatDown {
    0% {
        top: -300px; /* Initial position above the window */
    }
    100% {
        top: 0; /* Final position aligned with the container */
    }
}

#logo {
    animation-name: floatDown;
    animation-delay: 0.5s; /* Delay before the animation starts */
}

#text {
    animation-name: floatDown;
    animation-delay: 1.0s; /* Delay before the animation starts */
}

/* Media query for smaller devices */
@media (max-width: 576px) {
    .images-container {
        gap: 10px; /* Adjust the gap for smaller screens */
    }

    #logo {
        max-width: 45px; /* Adjust the size for smaller screens */
        max-height: 45px;
    }
}