body, html {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eee5cd; /* Light gray background, you can change this */
}

.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.logo {
    max-width: 80%; /* Adjusts based on the viewport, for desktop */
    max-height: 80%; /* Adjusts based on the viewport, for desktop */
    object-fit: contain; /* Keeps aspect ratio of the logo */
    /* Fade in animation */
    animation: fadeInAnimation ease 3s;
    -webkit-animation: fadeInAnimation ease 3s;
    -moz-animation: fadeInAnimation ease 3s;
    -o-animation: fadeInAnimation ease 3s;
    -ms-animation: fadeInAnimation ease 3s;
    animation-fill-mode: forwards;
}

/* Responsive Design for Mobile Devices */
@media (max-width: 768px) {
    .logo {
        max-width: 80%; /* Larger percentage for smaller screens */
        max-height: 80%; /* Larger percentage for smaller screens */
    }
}

/* Fade in Animation */
@keyframes fadeInAnimation {
    from { opacity: 0; }
    to { opacity: 1; }
}

@-moz-keyframes fadeInAnimation {
    from { opacity: 0; }
    to { opacity: 1; }
}

@-webkit-keyframes fadeInAnimation {
    from { opacity: 0; }
    to { opacity: 1; }
}

@-o-keyframes fadeInAnimation {
    from { opacity: 0; }
    to { opacity: 1; }
}

@-ms-keyframes fadeInAnimation {
    from { opacity: 0; }
    to { opacity: 1; }
}