#loader-wrapper { 
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #f1f1f1; /* light background */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }

        #loader-wrapper.hidden {
            opacity: 0;
            visibility: hidden;
        }

        /* Loader styles */
        .loader {
            display: flex;
            align-items: center;
            justify-content: center;
            transform: scale(1.2);
        }

     /* @media(max-width: 768px) {
  .logo-img {
    width: 240px !important;
    height: 240px !important;
  }
} */
.logo-img {
  width: auto;
  height: 13rem; /* 72 in Tailwind */
}

@media(max-width: 768px) {
  .logo-img { 
    width: auto;
    height: 100px;
    margin-bottom: 30px;
  }
}

        /* Loading text positioned below the truck */
        .loading-text {
            margin-top: -40px;
            font-size: 28px;
            font-weight: bold;
            color: #030303;
            letter-spacing: 4px;
            display: flex;
            justify-content: center;
        }

        .loading-text span {
            display: inline-block;
            animation: bounce 1.2s infinite;
        }

        .loading-text span:nth-child(1) { animation-delay: 0s; }
        .loading-text span:nth-child(2) { animation-delay: 0.1s; }
        .loading-text span:nth-child(3) { animation-delay: 0.2s; }
        .loading-text span:nth-child(4) { animation-delay: 0.3s; }
        .loading-text span:nth-child(5) { animation-delay: 0.4s; }
        .loading-text span:nth-child(6) { animation-delay: 0.5s; }
        .loading-text span:nth-child(7) { animation-delay: 0.6s; }
        .loading-text span:nth-child(8) { animation-delay: 0.7s; }
        .loading-text span:nth-child(9) { animation-delay: 0.8s; }
        .loading-text span:nth-child(10) { animation-delay: 0.9s; }

        @keyframes bounce {
            0%, 80%, 100% { transform: translateY(0); opacity: 0.6; }
            40% { transform: translateY(-8px); opacity: 1; }
        }

        /* Tree animation */
        #tree {
            animation: tree 8s linear infinite;
        }

        @keyframes tree {
            from {
                transform: translateX(850px);
            }
            to {
                transform: translateX(-900px);
            }
        }

        /* Speed animation */
        #speed {
            animation: speed 4s ease-in-out infinite alternate;
        }

        @keyframes speed {
            from {
                transform: translateX(15px);
            }
            to {
                transform: translateX(-20px);
            }
        }

           @keyframes rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    .rotate-group {
      animation: rotate 5s linear infinite;
      transform-origin: center;
    }