#loading-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #F2EFEA;
    z-index: 1000;
    transition: opacity 0.5s ease;
  }

.spinner {
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-loading {
    width: 20%;
    opacity: 0; /* Initially hidden for fade-in effect */
    animation: fadeIn 0.5s forwards, pulse 1.5s infinite 0.5s; /* Added fadeInPage animation */
    transition: filter 1s ease;
}

@media (max-width: 767px) {
  .logo-loading {
    width: 30%;
  }
}


.logo-loading:hover {
  filter: brightness(0) saturate(100%) invert(55%) brightness(130%) contrast(115%);
}


@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }   
}

@keyframes fadeInPage {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }   
}


#main-content {
    opacity: 0; /* Initially hidden */
    transition: opacity 0.5s; /* Smooth transition effect */
  }