/* Ensure html and body occupy the full viewport */
  html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; /* Center the preloader horizontally */
    align-items: center; /* Center the preloader vertically */
    background-color: #FFFFFF; /* Set the background color */
  }

  /* Preloader styling */
  .preloader {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center elements horizontally */
    gap: 15px; /* Add spacing between the image and loader */
  }

  .preloader-img {
    width: 400px; /* Limit image width */
    height: auto; /* Maintain aspect ratio */
    max-width: 45vw; /* Constrain width relative to viewport */
    max-height: 45vh; /* Constrain height relative to viewport */
    animation: animloaderimg 3000ms ease-in-out infinite;
    object-fit: cover; /* Ensure it fits without distortion */
  }

  .loader {
    border: 4px solid #f3f3f3;
    border-radius: 50%;
    border-top: 4px solid #3498db;
    width: 25px;
    height: 25px;
    animation: spin 2s linear infinite;
  }

  @keyframes animloaderimg {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-1rem);
    }
    100% {
      transform: translateY(0);
    }
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }