/* The overlay background */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.85); /* Semi-transparent white */
            z-index: 9999; /* Keeps it on top of everything else */
            display: flex;
            justify-content: center;
            align-items: center;
            transition: opacity 0.4s ease, visibility 0.4s ease;
        }

        /* Styling for the loading image */
        .loading-gif {
            width: 400px;  /* Adjust size as needed */
            height: 300px;
        }

        /* Class to hide the loader smoothly */
        .loading-overlay.hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none; /* Prevents users from clicking on hidden overlay */
        }
      
        .loer {
          width: 100px;
          height: 100px;
          position: relative;
        }
      
        .blob {
          width: 50px;
          height: 50px;
          background: linear-gradient(135deg, #8EC5FC, #E0C3FC);
          border-radius: 50%;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          box-shadow: 0 0 20px rgba(142, 197, 252, 0.5);
          animation: morph 5s linear infinite;
        }

        @keyframes morph {
          0%, 100% {
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(1);
          }

          33% {
            border-radius: 30% 70% 70% 30% / 30% 29% 71% 70%;
            transform: translate(-50%, -50%) rotate(90deg) scale(1.2); 
          }

          66% {
            border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
            transform: translate(-50%, -50%) rotate(180deg) scale(0.8);
          }
        }