/* Menu section */

.menu { list-style: none; display: flex; }
.menu li { position: relative; padding: 10px 15px; }
.menu a { text-decoration: none; color: #000; }

.dropdown-menu {
  display: none;
  position: absolute;
  top: 40px;
  background: #000;
  min-width: 220px;
  border-radius: 5px;
  z-index: 999;
}

.dropdown-menu li a {
  display: block;
  padding: 10px;
  color: #fff;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu li a:hover {
  background: #222;
}

.signup { background:#0d47a1; color:#fff; padding:6px 12px; }
.book { background:#25d366; color:#fff; padding:6px 12px; }







/* car animation */
/* --- Cloud styles --- */
.cloud {
  position: absolute;
  background: #fff;
  opacity: 0.8;
  width: 70px; /* Even smaller cloud size */
  height: 60px; /* Even smaller cloud height */
  border-radius: 79px; /* Adjust border-radius to match smaller clouds */
  box-shadow:
    10px 3px 0 0 #fff,
    20px 6px 0 0 #fff,
    -10px 6px 0 0 #fff;
  z-index: 0;
  animation: moveClouds 60s linear infinite;
}

.cloud-1 { top: 10px; left: -150px; animation-duration: 30s; }
.cloud-2 { top: 10px; left: -300px; animation-duration: 35s; }
.cloud-3 { top: 25px; left: -450px; animation-duration: 40s; }

@keyframes moveClouds {
  from { transform: translateX(0); }
  to   { transform: translateX(120vw); }
}



/* --- Car Stormy sky effect --- */
.road-scene {
  position: relative;
  width: 100%;
  height: 120px;
  background: linear-gradient(to bottom, #2f2f2f 0%, #000 50%, #3a3a3a 50%);
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Cars and road line are as usual (no changes needed) */
.road-line {
  position: absolute;
  bottom: 60px;
  width: 100%;
  height: 4px;
  background: repeating-linear-gradient(
    to right,
    white, white 20px,
    transparent 20px, transparent 40px
  );
  z-index: 1;
}

.car-wrapper {
  position: absolute;
  bottom: 70px;
  width: 140px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}
 /* Container: sky + road */
    .road-scene {
      position: relative;
      width: 100%;
      height: 220px;
      background: linear-gradient(
        to bottom,
        #87ceeb 0%,      /* Sky blue */
        #e0f7fa 50%,     /* Lighter sky near horizon */
        #3a3a3a 50%,     /* Road top */
        #3a3a3a 100%     /* Road bottom */
      );
      overflow: hidden;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

   

@keyframes moveCloud {
  from { transform: translateX(-200px); }
  to { transform: translateX(120vw); }
}
@keyframes driveRight {
  from { left: -160px; }
  to { left: 100%; }
}
@keyframes driveLeft {
  from { right: -160px; }
  to { right: 100%; }
}

/* Cloud Shape */
.cloud-shape {
  position: relative;
  width: 120px;
  height: 45px;
  background: white;
  border-radius: 9999px;
}
.cloud-shape::before,
.cloud-shape::after {
  content: "";
  position: absolute;
  background: white;
  border-radius: 9999px;
}
.cloud-shape::before {
  width: 55px;
  height: 55px;
  top: -28px;
  left: 18px;
}
.cloud-shape::after {
  width: 75px;
  height: 75px;
  top: -38px;
  right: 12px;
}

.cloud { animation: moveCloud linear infinite; }
.car-ltr { animation: driveRight 8s linear infinite; }
.car-rtl { animation: driveLeft 8s linear infinite; }

.delay-1 { animation-delay: 2s; }
.delay-2 { animation-delay: 4s; }