body {
     font-family: 'Inter', sans-serif;
     background-color: #f7f9fc;
   }

   .navbar-custom {
     background-color: white;
     padding-top: 1rem;
     padding-bottom: 1rem;
     transition: all 0.3s ease;
     box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
     backdrop-filter: blur(8px);
   }

   .navbar-custom.scrolled {
     padding-top: 0.4rem;
     padding-bottom: 0.4rem;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
   }

   .navbar-brand img {
     height: 70px;
     transition: transform 0.3s ease;
   }

   .navbar-brand:hover img {
     transform: rotate(-2deg) scale(1.05);
   }

   .navbar-brand span {
     font-size: 1.6rem;
     font-weight: 700;
     color: #e82135;
     transition: color 0.3s ease;
   }

   .navbar-brand:hover span {
     color: #FFF9C4;
   }

   .nav-link {
     color: #000 !important;
     padding: 0.5rem 1rem;
     font-weight: 500;
     position: relative;
     transition: all 0.3s ease;
   }

   .nav-link::after {
     content: '';
     position: absolute;
     left: 50%;
     bottom: 6px;
     width: 0;
     height: 2px;
     background-color: #e82135;
     transition: all 0.3s ease;
     transform: translateX(-50%);
   }

   .nav-link:hover {
     color: #e82135 !important;
   }

   .nav-link:hover::after {
     width: 60%;
   }

   /* 3D Brand Text */
   .brand-3d {
     font-weight: 900;
     font-size: 1.75rem;
     color: #e82135;
     /* Yellow base for KIDO */
     text-shadow:
       1px 1px 0 #000,
       2px 2px 0 #000,
       3px 3px 0 #000,
       4px 4px 5px rgba(0, 0, 0, 0.3);
     transform: perspective(300px) rotateX(5deg);
     display: inline-block;
   }

   .brand-3d .bug-red {
     color: #D32F2F;
     /* Red color for BUG */
     text-shadow:
       1px 1px 0 #000,
       2px 2px 0 #000,
       3px 3px 0 #000,
       4px 4px 5px rgba(0, 0, 0, 0.3);
   }

   /* Mobile Menu */
   @media (max-width: 991.98px) {
     .navbar-collapse {
       background-color: white;
       padding: 1rem;
       border-radius: 0 0 10px 10px;
       animation: dropdownFade 0.3s ease-in-out;
     }

     .navbar-nav .nav-link {
       padding: 0.5rem 1rem;
       text-align: center;
     }
   }

   @keyframes dropdownFade {
     from {
       opacity: 0;
       transform: translateY(-10px);
     }

     to {
       opacity: 1;
       transform: translateY(0);
     }
   }




   /* Core Section */
   .vehicle-booking-section {
     position: relative;
     height: 100vh;
     background: linear-gradient(to bottom, #f8fdf9, #e9f5ec);
     overflow: hidden;
     padding: 60px 0;
   }

   /* Background Decorative Shape */
   .custom-shape-bg::before {
     content: "";
     position: absolute;
     top: -100px;
     right: -100px;
     width: 500px;
     height: 500px;
     background: radial-gradient(circle at center, #c3e9d1 0%, transparent 70%);
     border-radius: 50%;
     z-index: 1;
     opacity: 0.4;
   }

   .custom-shape-bg::after {
     content: "";
     position: absolute;
     bottom: -100px;
     left: -100px;
     width: 400px;
     height: 400px;
     background: radial-gradient(circle at center, #d7f4e0 0%, transparent 70%);
     border-radius: 50%;
     z-index: 1;
     opacity: 0.3;
   }

   /* Title & Button Colors */
   .text-green {
     color: #2a904e;
   }

   .browse-btn {
     background-color: #2a904e;
     color: white;
     padding: 10px 28px;
     font-size: 1rem;
     font-weight: 600;
     border-radius: 10px;
     transition: all 0.3s ease;
     border: none;
   }

   .browse-btn:hover {
     background-color: #e82135;
     transform: scale(1.05);
     color: white;
   }

   /* Image Float */
   .booking-image {
     max-height: 550px;
     animation: floatUpDown 4s ease-in-out infinite;
     filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
   }

   @media (max-width: 767.98px) {
  .booking-content {
    padding: 30px 20px;
    text-align: center;
  }

  .booking-content .btn {
    margin: 0 auto;
  }
}


   @keyframes floatUpDown {

     0%,
     100% {
       transform: translateY(0);
     }

     50% {
       transform: translateY(-10px);
     }
   }

   /* Text Styling */
   .section-title {
     font-size: 2rem;
     font-weight: 600;
   }

   .section-desc {
     font-size: 1.05rem;
     line-height: 1.7;
     color: #444;
   }

   /* Booking Box */
   .booking-content {
     background: rgba(255, 255, 255, 0.95);
     z-index: 2;
   }

   /* Responsive */
   @media (max-width: 768px) {
     .vehicle-booking-section {
       height: auto;
       padding-top: 100px;
       padding-bottom: 60px;
     }

     .booking-image {
       max-height: 300px;
     }
   }







   /* Tour Packages Section with Full Height and Background Shapes */
   .tour-packages-section {
     min-height: 100vh;
     background-color: #f8f9fa;
     padding: 100px 0;
     position: relative;
     overflow: hidden;
   }

   /* Multiple Triangle Shapes in Background */
   .triangle-shape {
     position: absolute;
     width: 80px;
     height: 80px;
     background: #011d0b;
     clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
     opacity: 0.15;
     z-index: 0;
     filter: blur(1px);
     transform: rotate(15deg);
   }

   .triangle-shape:nth-child(1) {
     top: 40px;
     left: 60px;
   }

   .triangle-shape:nth-child(2) {
     top: 120px;
     right: 90px;
     transform: rotate(-20deg);
   }

   .triangle-shape:nth-child(3) {
     bottom: 80px;
     left: 30%;
     transform: rotate(40deg);
   }

   .triangle-shape:nth-child(4) {
     bottom: 30px;
     right: 20%;
     transform: rotate(10deg);
   }

   .triangle-shape:nth-child(5) {
     top: 200px;
     left: 45%;
     transform: rotate(60deg);
   }


   /* Green Theme */
   .text-green {
     color: #2a904e;
   }

   .btn-outline-success {
     border-color: #2a904e;
     color: #2a904e;
   }

   .btn-outline-success:hover,
   .btn-success {
     background-color: #e82135;
     color: white;
     border-color: #2a904e;
   }

   /* Card Hover */
   .tour-card {
     transition: transform 0.3s ease, box-shadow 0.3s ease;
   }

   .tour-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.07);
   }

   .tour-card img {
     height: 220px;
     object-fit: cover;
   }

   /* Responsive Fix */
   @media (max-width: 768px) {
     .tour-packages-section {
       min-height: auto;
       padding-top: 80px;
       padding-bottom: 60px;
     }

     .triangle-shape {
       border-left: 100px solid #2a904e;
       border-bottom: 100px solid transparent;
     }
   }


   /* Hide the default Bootstrap arrow icon */
   .navbar .dropdown-toggle::after {
     display: none;
   }

   /* Hover dropdown behavior */
   .hover-dropdown:hover .dropdown-menu {
     display: block;
     margin-top: 0;
     /* remove jump animation */
   }

   .dropdown-menu {
     transition: all 0.3s ease;
     border-radius: 8px;
     background-color: #ffffff;
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
   }

   .custom-tour-banner-section {
     background: linear-gradient(135deg, #f4f4f4, #e0e0e0);
     padding: 100px 20px;
     position: relative;
     overflow: hidden;
     z-index: 1;
   }

   .container {
     max-width: 1200px;
     margin: auto;
     position: relative;
     z-index: 1;
   }

   .custom-tour-grid {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 50px;
   }

   .banner-text {
     flex: 1;
     min-width: 280px;
   }

   .banner-heading {
     font-family: 'Playfair Display', serif;
     font-size: 2.4rem;
     color: #2a904e;
     margin-bottom: 15px;
   }

   .banner-subheading {
     font-family: 'Poppins', sans-serif;
     font-size: 1.1rem;
     color: #444;
     margin-bottom: 30px;
     max-width: 550px;
   }

   .tour-button {
     display: inline-block;
     padding: 12px 30px;
     background-color: #2a904e;
     color: #fff;
     border-radius: 30px;
     font-size: 1rem;
     font-family: 'Poppins', sans-serif;
     text-decoration: none;
     transition: background-color 0.3s ease;
     font-weight: 600;
   }

   .tour-button:hover {
     background-color: #e82135;
   }

   /* Banner Image */
   .banner-image {
     flex: 1;
     min-width: 280px;
   }

   .banner-image img {
     width: 100%;
     max-width: 500px;
     animation: floatImage 6s ease-in-out infinite;
   }

   /* Subtle float animation */
   @keyframes floatImage {

     0%,
     100% {
       transform: translateY(0);
     }

     50% {
       transform: translateY(-8px);
     }
   }

   /* Responsive */
   @media (max-width: 768px) {
     .custom-tour-grid {
       flex-direction: column;
       text-align: center;
     }

     .banner-heading {
       font-size: 2rem;
     }

     .banner-subheading {
       font-size: 1rem;
       margin: 0 auto 30px;
     }

     .banner-image img {
       max-width: 300px;
     }
   }



   .site-footer {
     background-color: #181818;
     color: #fff;
     padding: 60px 20px 30px;
     font-family: "Poppins", sans-serif;
   }

   .footer-container {
     max-width: 1200px;
     margin: 0 auto;
     display: flex;
     flex-wrap: wrap;
     gap: 40px;
     justify-content: space-between;
   }

   .footer-column {
     flex: 1;
     min-width: 220px;
   }

   .footer-logo {
     display: block;
     height: 95px;
     /* Increase size */
     margin-bottom: 10px;
     margin-top: 45px;
     filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.4));
     /* Optional glowing effect */
   }


   /*  .footer-logo {
      font-size: 1.8rem;
      font-weight: 700;
      color: #FFD700;
      margin-bottom: 10px;
    } */

   .footer-description {
     font-size: 0.95rem;
     line-height: 1.6;
     color: #ccc;
   }

   .footer-heading {
     font-size: 1.2rem;
     font-weight: 600;
     margin-bottom: 15px;
     color: #fff;
   }

   .footer-links,
   .footer-contact {
     list-style: none;
     padding: 0;
     margin: 0;
   }

   .footer-links li,
   .footer-contact li {
     margin-bottom: 10px;
     font-size: 0.95rem;
     color: #ccc;
     transition: color 0.3s ease;
   }

   .footer-links li a {
     color: #ccc;
     text-decoration: none;
     transition: color 0.3s ease;
   }

   .footer-links li a:hover,
   .footer-contact li:hover {
     color: #e82135;
   }

   .footer-contact i {
     margin-right: 10px;
     color: #e82135;
   }

   .footer-socials {
     display: flex;
     gap: 15px;
     margin-top: 10px;
   }

   .social-icon {
     background-color: #282828;
     color: #fff;
     font-size: 1rem;
     padding: 10px;
     border-radius: 50%;
     transition: background-color 0.3s, transform 0.3s;
   }

   .social-icon:hover {
     background-color: #e82135;
     color: #111;
     transform: translateY(-4px);
   }

   .footer-bottom {
     text-align: center;
     margin-top: 40px;
     font-size: 0.9rem;
     color: #888;
     border-top: 1px solid #333;
     padding-top: 20px;
   }

   .footer-bottom .terms-link {
     color: white;
     text-decoration: none;
     font-weight: 500;
     transition: all 0.3s ease;
   }

   .footer-bottom .terms-link:hover {
     text-decoration: underline;
     color: #ffffff;
   }

   .footer-links a {
     color: white;
     text-decoration: none;
   }

   .footer-links a:hover {
     text-decoration: underline;
   }

   /* Center logo on mobile */
   @media (max-width: 576px) {
     .footer-column:first-child {
       display: flex;
       flex-direction: column;
       align-items: center;
       text-align: center;
     }

     .footer-description {
       text-align: center;
     }
   }