:root {
    --green: #28a745;
    --orange: #ff9800;
    --orange-dark: #ff5722;
    --dark: #212529;
    --muted: #e0e0e0;
    --white: #fff;
    --danger: #dc3545;
    --blue: #007bff;
}

/* === Base / Typography === */
body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: var(--dark);
}
.carousel-item  h1 
{
    color: white;
}
.carousel-item p
{
    color: white;
}

    /* Top Bar */
    .top-bar {

      background: black;
      font-size: 14px;
      padding: 5px 0;
      color: white;

    }

    .top-bar a {
      text-decoration: none;
      margin-left: 15px;
      color: #333;
    }

    /* Navbar */
    .navbar {
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      background: linear-gradient(135deg, #0d1b2a, #1b263b, #415a77, #778da9);
      color: white;
    }

.navbar-nav
{
  color: orange;
  font-weight: 600;
}
.nav-link 
{
  color: orange;
}
    /* Hero Section */
    .hero {
    
    background: url('https://www.agencontainer.co.id/jasa-web/landingpage/rental-mobil/assets/images/jalan.webp') no-repeat center center/cover;
      padding: 60px 0;
    }

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
}
  
    .hero .booking-box {
      background: #fff;
      padding: 25px;
      border-radius: 8px;
      box-shadow: 0 3px 15px rgba(0,0,0,0.1);
    }
    .hero h1 {
      font-size: 2rem;
      font-weight: bold;
    }
    .btn-reserve {
      background: #c8102e;
      color: #fff;
      font-weight: bold;
    }


@media (min-width: 768px) {   /* tablet */
  .hero .carousel-inner img {
    height: 350px;
  }
}

@media (min-width: 992px) {   /* desktop */
  .hero .carousel-inner img {
    height: 420px;
  }
}

.hero .carousel-inner img {
  width: 100%;
  height: 280px;              /* default untuk mobile */
  object-fit: contain;        /* biar mobil tidak gepeng */

}

@media (min-width: 768px) {   /* tablet */
  .hero .carousel-inner img {
    height: 350px;
  }
}

@media (min-width: 992px) {   /* desktop */
  .hero .carousel-inner img {
    height: 420px;
  }
}

/* vehicle produk */
.tes {
    background: black;
}
    .vehicle-list .nav-link {
      border: 1px solid #eee;
      margin-bottom: 5px;
      text-align: left;
      color: #333;
      background: linear-gradient(135deg, #ffffff, #f8f9fa, #e0e5ec);
    }
    .vehicle-list .nav-link.active {
background: linear-gradient(135deg, #0d1b2a, #1b263b, #415a77, #778da9);;
      color: #fff;
      font-weight: bold;
      

    }
    .vehicle-details {
      background: linear-gradient(135deg, #ffffff, #f8f9fa, #e0e5ec);
      padding: 20px;
      border-radius: 8px;
      border: 1px solid #eee;
    }
    .price-box {
          background: linear-gradient(135deg, #0d1b2a, #1b263b, #415a77, #778da9);
      color: #fff;
      padding: 10px 15px;
      font-weight: bold;
      border-radius: 5px 5px 0 0;
      display: inline-block;
      margin-bottom: 15px;
    }
    .btn-reserve {
          background: linear-gradient(135deg, #0d1b2a, #1b263b, #415a77, #778da9);
      color: #fff;
      font-weight: bold;
      width: 100%;
    }

/* carousel */

 .carousel-indicators button {
    background-color: #0d6efd; /* biru bootstrap, bisa diganti */
}

.carousel-indicators .active {
    background-color: #ff5722; /* warna aktif berbeda */
}


/* testimonial */
.testimonial-img {
    width: 100px;   /* ukuran foto konsisten */
    height: 100px;
    object-fit: cover; /* crop agar proporsional */

  }
  .testimonial-card {
    background: linear-gradient(135deg, #0d1b2a, #1b263b, #415a77, #778da9);
    border: none;
    border-radius: 15px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;

  }

  .testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.2);
  
  }

  .testimonial-img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border: 3px solid #0d6efd; /* bingkai biru */
    padding: 2px;
  }

  .card-text {
    font-style: italic;
    color: white;
  }

  .card-title {
    margin-top: 10px;
    font-weight: 600;
    color: orange;
  }













.single-feature {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(40,167,69,0.08);
    padding: 18px;
    margin-bottom: 24px;
}
.single-feature-icon {
    font-size: 32px;
    margin-right: 15px;
  color: #566b8c;
}



/* === Sections / Titles / Layout spacing === */
.section-padding {
    padding: 80px 0;
}
.section-title h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 38px;
    font-weight: 700;
    color: var(--dark);
}
.section-title h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 25px;
    font-weight: 700;
    color: var(--dark);
}
.section-title h3 span {
    color: #566b8c;
}

.section-title h4 span {
    color: var(--green);
}
.section-title .line {
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--green) 60%, var(--orange) 100%);
    margin: 10px auto;
}