:root {
            --primary-green: #4CAF50;
            --dark-green: #2E7D32;
            --light-green: #e8f5e9;
            --accent-lime: #8BC34A;
        }

        body { font-family: 'Poppins', sans-serif; background-color: #fcfcfc; }

        /* Navigation */
        .navbar { background: white; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        .btn-green { background: var(--primary-green); color: white; border-radius: 25px; padding: 8px 25px; }
        .btn-green:hover { background: var(--dark-green); color: white; }

        /* Hero Section */
        .hero {
            background: linear-gradient(135deg, #a8e063 0%, #56ab2f 100%);
            padding: 80px 0;
            color: white;
            position: relative;
        }
        .hero h1 { font-weight: 800; font-size: 3.5rem; text-transform: uppercase; line-height: 1; }
        .hero-img { max-width: 100%; filter: drop-shadow(10px 10px 20px rgba(0,0,0,0.2)); }

        /* Features/Services */
        .feature-card {
            background: var(--primary-green);
            color: white;
            border: none;
            border-radius: 15px;
            transition: transform 0.3s;
            height: 100%;
        }
        .feature-card:hover { transform: translateY(-10px); background: var(--dark-green); }
        .feature-card i { font-size: 2.5rem; opacity: 0.8; margin-bottom: 15px; }

        /* Car Fleet Section */
        .car-card {
            border: 1px solid #eee;
            border-radius: 15px;
            overflow: hidden;
            transition: 0.3s;
        }
        .car-card:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
        .car-card .card-body { text-align: center; }
        .car-specs { background: #f8f9fa; font-size: 0.9rem; padding: 10px; border-radius: 10px; }

        /* Section Titles */
        .section-title { font-weight: 700; color: #333; margin-bottom: 40px; position: relative; }
        .section-title::after {
            content: '';
            display: block;
            width: 60px;
            height: 4px;
            background: var(--primary-green);
            margin-top: 10px;
        }


/*Navbar */
  * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

.custom-navbar {
  position: absolute; /* draggable */
  top: 0;
  left: 0;
  width: 100%; /* make full width */
  background: #fff;
  z-index: 999;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  cursor: grab;
}
.navbar-container {
  width: 100%;
  max-width: 1300px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
}




.logo-img {
  width: 200px;
}

/* HAMBURGER */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.hamburger span {
  height: 3px;
  width: 25px;
  background: #222;
  margin: 4px 0;
}

/* MENU */
.nav-menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 25px;
}

.nav-menu li a {
  text-decoration: none;
  color: #222;
  font-weight: 500;
}

.nav-menu li a.active,
.nav-menu li a:hover {
  color: #6bbf2d;
}

/* DROPDOWN */
.dropdown-menu {
  display: none;
  list-style: none;
  padding-left: 15px;
}

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

/* BUTTONS */
.nav-actions {
  display: flex;
  gap: 12px;
}

.whatsapp-btn {
  padding: 8px 16px;
  border: 2px solid #6bbf2d;
  border-radius: 8px;
  color: #6bbf2d;
  text-decoration: none;
  font-weight: 600;
}

.quote-btn {
  background: linear-gradient(180deg, #7fd23f, #4f9d1f);
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
}

/* MOBILE */
.mobile-actions {
  display: none;
}

/* RESPONSIVE */
@media (max-width: 992px) {

  .hamburger {
    display: flex;
  }

  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    display: none;
  }

  .nav-menu.show {
    display: flex;
  }

  .desktop-only {
    display: none;
  }

  .mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
}

/* Dropdown parent */
.dropdown {
  position: relative;
}

/* Main link */
.dropdown-toggle {
  color: #fff;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s ease;
}

.dropdown-toggle i {
  font-size: 14px;
  transition: transform 0.3s ease;
}

/* Dropdown menu */
.dropdown-menu {
  position: absolute;
  top: 120%;
  left: 0;
  min-width: 220px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 999;
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown:hover .dropdown-toggle i {
  transform: rotate(180deg);
}

/* Menu items */
.dropdown-menu li {
  list-style: none;
}

.dropdown-menu li a {
  display: block;
  padding: 12px 20px;
  color: #333;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.3s ease, padding-left 0.3s ease;
}

/* Hover effect on items */
.dropdown-menu li a:hover {
  background: #1B8EC4;
  color: #000;
  padding-left: 28px;
  border-radius: 6px;
}
/* bannner section */
/* HERO SECTION */
.hero {
  min-height: 100vh;
  background: linear-gradient(135deg, #0f5132, #198754);
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* LEFT SIDE TEXT ANIMATION */
.hero .col-lg-6:first-child {
  opacity: 0;
  animation: slideFromLeft 1.2s ease forwards;
}

/* RIGHT SIDE IMAGE ANIMATION */
.hero .col-lg-6:last-child {
  opacity: 0;
  animation: slideFromRight 1.2s ease forwards;
  animation-delay: 0.3s;
}

/* IMAGE STYLE */
.hero-img {
  width: 100%;
  max-width: 520px;
}

/* ANIMATIONS */
@keyframes slideFromLeft {
  from {
    opacity: 0;
    transform: translateX(-80px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideFromRight {
  from {
    opacity: 0;
    transform: translateX(80px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}















        

        /* Footer */
        footer { background: #222; color: #bbb; padding: 50px 0; }
        footer h5 { color: white; margin-bottom: 20px; }