html, body {
            height: 100%;
            margin: 0;
        }

        /* Hero section styling */
        .hero {
            position: relative;
            height: 80vh;
            color: white;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            overflow: hidden;
        }

        /* Overlay for better readability */
        .hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.45);
            z-index: 1;
        }

        /* Carousel styling */
        .carousel, .carousel-inner, .carousel-item {
            height: 80vh;
            width: 100%;
        }

        .carousel-item img {
            height: 80vh;
            width: 100%;
            object-fit: cover;
            object-position: center;
        }

        .carousel-caption {
            z-index: 2;
            background: rgba(0, 0, 0, 0.5);
            padding: 10px;
            border-radius: 5px;
        }

        /* Transparent navbar with black text */
        .top-info-bar {
    @apply fixed top-0 left-0 w-full flex justify-center items-center text-sm bg-gray-50 text-gray-600 border-b border-gray-200 z-10 py-2 px-4;
}

/* Ensure top info bar items are visible and responsive */
.top-info-bar .flex {
    @apply items-center gap-1;
}
.top-info-bar .border-l {
    @apply border-gray-300 pl-6;
}
.top-info-bar .ml-auto {
    @apply text-xs font-semibold text-blue-900 hover:underline cursor-pointer flex items-center;
}

/* Custom styles for navbar */
.navbar-custom {
    @apply fixed top-0 left-0 w-full bg-white ; /* Fixed positioning, full width, white background, higher z-index than top info bar */
}

.navbar-custom .navbar-nav .nav-link,
.navbar-custom .navbar-brand {
    color: rgb(211, 155, 0); /* Gold color */
    font-size: 24px; /* Fixed font size as specified */
    font-weight: 700; /* Bold font weight */
}

.navbar-custom .navbar-nav .nav-link:hover,
.navbar-custom .navbar-brand:hover {
    color: #ff4747; /* Red hover color */
}

        /* Logo styles */
        .logo img {
          margin-top: 22px;
            max-height: 140px;
            width: auto;
        }
        .modal-content {
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    border: none;
    max-width: 900px;
    margin: auto;
}

.modal .form-control,
.modal .form-select {
    border-radius: 8px;
    padding: 10px;
}

.modal .btn-success {
    background: linear-gradient(135deg, #28a745, #218838);
    font-weight: bold;
    padding: 10px 0;
}

.modal .btn-success:hover {
    background: linear-gradient(135deg, #218838, #1e7e34);
}

.modal .list-unstyled li {
    margin-bottom: 10px;
}

        /* WhatsApp floating button */
        .whatsapp-button {
            position: fixed;
            bottom: 25px;
            right: 25px;
            background-color: #ff2600;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 11;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
            transition: background-color 0.3s ease;
        }

        .whatsapp-button:hover {
            background-color: #fa1908;
            text-decoration: none;
        }

        .whatsapp-button i {
            font-size: 32px;
            color: white;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .carousel-item img {
                height: 60vh;
            }
            .hero, .carousel, .carousel-inner {
                height: 60vh;
            }
        }
        .carousel-indicators div {
        transition: width 0.3s ease;
      }
      .carousel-indicators div.active {
        width: 24px;
      }
      /* custom scroll bar style for the cards container horizontally on small screen */
      /* The vertical scroll is hidden */
      .cards-container {
        scroll-behavior: smooth;
      }
      /* Button badges */
      .badge {
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: none;
      }
      /* Small icons */
      .icon-small {
        width: 16px;
        height: 16px;
      }
      /* Custom box shadow for the cards bottom */
      .card-bottom-shadow {
        box-shadow:
          0 4px 6px rgb(0 0 0 / 0.1),
          0 1px 3px rgb(0 0 0 / 0.06);
      }
      /* Hover effect on cards */
      .card:hover {
        box-shadow: 0 8px 20px rgb(0 0 0 / 0.15);
        transform: translateY(-4px);
        transition: all 0.3s ease-in-out;
      }
      /* Whatsapp button green color */
      .btn-whatsapp {
        background-color: #b32424;
        border-color: #130303;
        transition: background-color 0.25s ease;
      }
      .btn-whatsapp:hover {
        background-color: #d41d1d;
        border-color: #05130a;
      }
      /* Enquiry buttons style */
      .btn-enquiry {
        background-color: #D9480F;
        color: white;
        font-weight: 600;
      }
      .btn-enquiry:hover {
        background-color: #B03A0B;
      }
      /* Call button style */
      .btn-call {
        background-color: #13284B;
        color: white;
        font-weight: 600;
      }
      .btn-call:hover {
        background-color: #0E1F3D;
      }
      h2.section-title {
    text-align: center;
    font-weight: 900;
    font-size: 1.8rem;
    padding-top: 3rem;
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
  }
  h2.section-title::after {
    content: "";
    display: block;
    width: 60px;
    margin: 0.5rem auto 2rem;
    height: 3px;
    background-color: #27ae60; /* Green underline */
    border-radius: 2px;
  }

  .car-package-container {
    max-width: 1200px;
    margin: 0 auto 4rem auto;
    padding: 0 1rem;
    overflow-x: auto;
    display: flex;
    gap: 1rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #27ae60 #f1f1f1;
  }
      .car-package-container::-webkit-scrollbar {
    height: 8px;
  }
  .car-package-container::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  .car-package-container::-webkit-scrollbar-thumb {
    background-color: #27ae60;
    border-radius: 20px;
  }

  .car-card {
    flex: 0 0 280px;
    background: white;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 3px 8px rgb(0 0 0 / 0.12);
    display: flex;
    flex-direction: column;
  }

  .car-image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 60%; /* aspect ratio */
    background: #eee;
  }
  .car-image-wrapper img {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    max-height: 80%;
    max-width: 95%;
    object-fit: contain;
  }

  .car-info {
    background-color: #ffc947;
    padding: 0.7rem 0.75rem;
    text-align: center;
    user-select: none;
    flex-shrink: 0;
  }

  .car-info h3 {
    margin: 0 0 0.2rem;
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    color: #222;
  }

  .car-info p.price {
    margin: 0 0 0.25rem;
    font-weight: 700;
    font-size: 1rem;
    color: #222;
  }

  .car-info p.details {
    margin: 0;
    font-size: 0.78rem;
    color: #222;
    font-weight: 600;
  }
    h2.section-heading {
      font-weight: 900;
      font-size: 1.75rem;
      text-align: center;
      text-transform: uppercase;
      margin-bottom: 0.3em;
      color: #111;
      position: relative;
      letter-spacing: 0.05em;
    }
    /* Green underline below heading */
    h2.section-heading::after {
      content: "";
      display: block;
      width: 50px;
      height: 3px;
      background-color: #27ae60;
      margin: 0.45em auto 0;
      border-radius: 2px;
    }

    /* Grid container */
    .services-grid {
      margin-top: 40px;
      display: grid;
      gap: 2.5rem 3rem;
    }

    /* Single service block */
    
    .social-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 35px;
      height: 35px;
      margin-right: 0.5rem;
      border-radius: 50%;
      background-color: #374151; /* Gray-700 */
      color: white;
      transition: background-color 0.3s ease;
      cursor: pointer;
    }
    .social-icon:hover {
      background-color: #10b981; /* Emerald-500 */
    }
 .gallery-card {
      @apply bg-white rounded-xl shadow-lg p-6 flex flex-col items-center gap-3;
      width: 280px;
      height: 250px;
      perspective: 900px;
    }

    /* Wrapper for layered images */
    .image-layers {
      position: relative;
      width: 230px;
      height: 150px;
    }
    .image-layers img {
      position: absolute;
      border-radius: 12px;
      box-shadow: 0 12px 15px rgb(0 0 0 / 0.15);
      transition: transform 0.5s ease, box-shadow 0.5s ease;
      border: 2.8px solid white;
    }

    /* Each layer with slight offset and rotation */
    .image-layer1 {
      top: 10px;
      left: 17px;
      transform: rotate(7deg);
      background: white;
      filter: drop-shadow(3px 5px 5px rgb(0 0 0 / 0.1));
      border-color: #edf2f7;
      width: 180px;
      height: 120px;
      object-fit: cover;
      z-index: 1;
    }
    .image-layer2 {
      top: 0;
      left: 7px;
      transform: rotate(1deg);
      width: 190px;
      height: 130px;
      object-fit: cover;
      z-index: 2;
      border-color: #bf8c52;
      box-shadow:
        0 0 12px rgb(190 140 82 / 0.75);
    }
    .image-layer3 {
      top: 3px;
      left: 2px;
      transform: rotate(3deg);
      width: 200px;
      height: 140px;
      object-fit: cover;
      border-color: #e2e8f0;
      background: white;
      z-index: 3;
    }

    /* On hover, bring front image forward and add shadow */
    .image-layers:hover img.image-layer3 {
      transform: rotate(0deg) translateZ(50px);
      box-shadow: 0 14px 24px rgb(0 0 0 / 0.25);
      border-color: #925900;
      transition-duration: 0.3s;
      cursor: pointer;
    }