#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9); /* Optional: Semi-transparent background */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
  .loading {
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    border-radius: 50%;
    border-top: 10px solid #0b2f72;
    position: relative;
    animation: a1 2s linear infinite;
    display: flex; /* Add flexbox to center logo */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
  }
  
  .loading::before,
  .loading::after {
    content: '';
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    top: -10px;
    box-sizing: border-box;
    border-radius: 50%;
  }
  
  .loading::before {
    border-top: 10px solid #ff5e14;
    transform: rotate(120deg);
  }
  
  .loading::after {
    border-top: 10px solid #abe1f2;
    transform: rotate(240deg);
  }
  
  .loading .logo { /* Style the logo */
    width: 80%; /* Adjust size as needed */
    height: 80%; /* Adjust size as needed */
    object-fit: contain; /* Prevents distortion */
    animation: a2 2s linear infinite;
  }
  
  @keyframes a1 {
    to {
        transform: rotate(360deg);
    }
  }
  
  @keyframes a2 {
    to {
        transform: rotate(-360deg);
    }
  }

  #main-content {
    opacity: 0; /* Initially hide the main content */
    transition: opacity 0.5s ease-in-out; /* Smooth transition for opacity */
  }