/* ====== Fleets Page Styling ====== */

/* Optional: Flex/Column Fix from original site */
.col-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

.col-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
}

.fleets-page {
  background: #f9f9f9;
  padding-bottom: 60px;
}

/* Banner */
/*.banner-wrapper {
  position: relative;
  padding: 120px 0;
  text-align: center;
  background: url('img/all-pages-banner.webp') no-repeat center center / cover;
  overflow: hidden;
}*/

/* Dark overlay */
/*.banner-wrapper:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}*/

/* Content inside banner */
/*.banner-wrapper .container {
  position: relative;
  z-index: 2;
}*/

/*.banner-wrapper h1 {
  font-size: 48px !important;
  font-family: 'Fira Sans Condensed';
  font-weight: 500 !important;
  color: #fff;
  text-transform: uppercase;
}
*/
.banner-wrapper .highlighter {
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 12px;
  color: #fff;
}

.banner-wrapper p {
  font-size: 18px;
  color: #fff;
}

/* All Fleets Grid */
.all-fleets {
  padding: 60px 0;
}

.card.fleethome_slider {
  background: rgb(50 50 50 / 70%);
  border-radius: 30px !important;
  position: relative;
  z-index: 1;
  min-height: 420px;
}

.card.fleethome_slider:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,1) 0%,
    rgba(23,60,42,0) 54%,
    rgba(48,126,88,1) 100%
  );
  opacity: 0.3;
  border-radius: inherit;
  z-index: -1;
}

.card.fleethome_slider:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px #0000001a;
}

.fleetImage img {
  width: 100%;
  background: #fff;
  border-radius: 15px;
}

.fleethome_sliderbox {
  padding: 15px;
}

.fleethome_sliderheading.text-center {
  border-bottom: 1px solid rgba(81, 81, 81, 0.4);
}

/* ====== FLEET NAME FIX ====== */
.fleethome_sliderheading h3 {
    color: #fff;
    font-weight: 300 !important;
    padding: 10px 5px;
    display: block;
    width: 100%;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;

    font-size: clamp(12px, 2vw, 14px); /* min 12px, max 14px, scale with viewport */
}




.benifit_fleet_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px;
  text-align: center;
}

.benifit_fleet span {
  color: #fff;
  font-size: 14px;
  font-weight: 300 !important;
  display: block;
  padding: 5px 15px;
}

.benifit_fleet img {
  filter: brightness(0) invert(1);
  width: 20px;
  margin-bottom: 4px;
}

/* Book Now Button */
a.fleet_homebook {
  background: #325c52;
  color: #fff;
  text-transform: uppercase;
  padding: 10px 30px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
  transition: all 0.3s ease;
  text-decoration: none;
}

a.fleet_homebook:hover {
  background: #fff;
  color: #325c52;
  border: 2px solid #325c52;
  text-decoration: none;
}

/* ====== Responsive ====== */
@media (max-width: 991px) {
  .banner-wrapper {
    padding: 80px 0;
  }

  .banner-wrapper h1 {
    font-size: 36px;
  }

  .fleethome_sliderheading h3 {
     /* display: flex;
    justify-content: center;
    min-width: 0; /* allow shrinking in flex */
    font-size: 16px;
  }

  .benifit_fleet span {
    font-size: 13px;
  }
}

@media (max-width: 767px) {
  .banner-wrapper {
    padding: 60px 0;
  }

  .banner-wrapper h1 {
    font-size: 28px;
  }

  .banner-wrapper p {
    font-size: 14px;
  }

  .card.fleethome_slider {
    margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
  .banner-wrapper {
    padding: 40px 0;
  }

  .banner-wrapper h1 {
    font-size: 24px;
  }

  .fleet_homebook {
    font-size: 12px;
    padding: 8px 20px;
  }
}