@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root {
  /* --cad-ink: #0f172a; */
  --cad-muted: #64748b;
  --cad-line: #e2e8f0;
  --cad-soft: #f8fafc;
  --cad-panel: #ffffff;
  --cad-primary: #123047;
  --cad-primary-2: #0f766e;
  --cad-accent: #f97316;
  --cad-accent-2: #f59e0b;
  --cad-success: #059669;
  --cad-shadow: 0 18px 46px rgba(15, 23, 42, .10);
  --cad-shadow-lg: 0 30px 80px rgba(15, 23, 42, .18);
}

* {
  letter-spacing: 0 !important;
}

body {
  background: var(--cad-soft) !important;
  color: var(--cad-ink);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  text-rendering: geometricPrecision;
}

a {
  color: var(--cad-primary-2);
}

.header {
  background: rgba(255, 255, 255, .98) !important;
  border-bottom: 1px solid rgba(228, 231, 236, .9);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.main-wrapper {
  overflow-x: hidden;
}

.header .navbar-brand img {
  height: 72px !important;
  object-fit: contain;
}

.header-nav {
  min-height: 86px;
}

.main-nav > li > a,
.header-navbar-rht .header-login {
  /* color: var(--cad-ink) !important; */
  font-weight: 700;
}

.main-nav > li > a {
  border-radius: 8px;
  padding: 10px 12px !important;
}

.main-nav > li > a:hover,
.main-nav > li.active > a {
  background: rgba(15, 118, 110, .08);
  color: var(--cad-primary-2) !important;
}

.header-navbar-rht .header-login,
.search-button,
.continue-book-btn,
.book-btn,
.btn-primary {
  background: linear-gradient(135deg, var(--cad-accent), var(--cad-accent-2)) !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 14px 28px rgba(249, 115, 22, .24);
  color: #fff !important;
  font-weight: 800 !important;
  min-height: 48px;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.header-navbar-rht .header-login:hover,
.search-button:hover,
.continue-book-btn:hover,
.book-btn:hover,
.btn-primary:hover {
  color: black !important;
  /* box-shadow: 0px 18px 34px rgba(249, 115, 22, .32) !important; */
  opacity: .96;
  transform: translateY(-1px);
}

.btn-secondary {
  background: #eef2f6 !important;
  border: 1px solid var(--cad-line) !important;
  border-radius: 8px !important;
  color: var(--cad-ink) !important;
  font-weight: 700 !important;
}

.banner-section {
  background:
    linear-gradient(90deg, rgba(18, 48, 71, .98) 0%, rgba(18, 48, 71, .90) 42%, rgba(31, 108, 102, 0.72) 100%),
    url("../../herosection.jpg") center/cover no-repeat !important;
  align-items: center;
  display: flex;
  min-height: calc(100vh - 86px);
  padding: 68px 0 58px !important;
  position: relative;
    backdrop-filter: blur(8px) saturate(150%);

}

.banner-section::after {

  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 120px;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      rgba(248,250,252,0) 0%,
      rgba(248,250,252,0.15) 30%,
      rgba(248,250,252,0.45) 60%,
      rgba(248,250,252,0.75) 82%,
      #f8fafc 100%
    );
}

.home-banner {
  position: relative;
  z-index: 2;
}

.home-banner h1,
.home-banner p,
.breadcrumb-bar h2,
.breadcrumb-bar h5 {
  color: #fff !important;
}

.home-banner h1 {
  max-width: 620px;
  font-size: clamp(38px, 5vw, 62px) !important;
  line-height: 1.02 !important;
  font-weight: 800 !important;
  margin-bottom: 18px;
}

.home-banner h1 span {
  color: #fed7aa !important;
}

.home-banner p {
  max-width: 560px;
  opacity: .94;
}

.home-banner .col-lg-6:first-child [style*="margin-top:15px"] {
  align-items: center;
  background: rgba(255, 255, 255, .11);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  color: #fff !important;
  display: inline-flex;
  gap: 10px;
  padding: 10px 14px;
  backdrop-filter: blur(12px);
}

.home-banner .col-lg-6:first-child p:nth-of-type(1) {
  align-items: center;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  display: inline-flex;
  font-size: 15px !important;
  gap: 8px;
  padding: 8px 13px;
}

.home-banner .col-lg-6:first-child p:nth-of-type(2) {
  color: #dbeafe !important;
  font-size: 20px !important;
  margin-bottom: 22px;
}

/*.home-banner .col-lg-6:first-child::after {*/
/*  color: rgba(255, 255, 255, .84);*/
/*  content: "Compare live prices, choose your parking provider, and pay securely in minutes.";*/
/*  display: block;*/
/*  font-size: 15px;*/
/*  line-height: 1.6;*/
/*  margin-top: 18px;*/
/*  max-width: 520px;*/
/*}*/

.section-search,
/* .search-box-banner, */
.booking-information-card,
.book-card,
.booking-card,
.filter-bar,
/* .services-group, */
.why-choose-group .card,
.testimonial-item .card {
  background: var(--cad-panel) !important;
  border: 1px solid var(--cad-line) !important;
  border-radius: 8px !important;
  box-shadow: var(--cad-shadow) !important;
}

.search-box-banner {
  background: rgba(255, 255, 255, .10) !important;
  /* border: 1px solid rgba(255, 255, 255, .64) !important; */
  box-shadow: 0 28px 80px rgba(15, 23, 42, .24), inset 0 1px 0 rgba(255, 255, 255, .72) !important;
  padding: 30px !important;
  position: relative;
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(8px) saturate(150%);
}

.search-box-banner::before {
  /* background: linear-gradient(90deg, rgba(249, 115, 22, .96), rgba(15, 118, 110, .92)); */
  background: rgba(249, 115, 22, .96);
  border-radius: 8px 8px 0 0;
  content: "";
  height: 5px;
  left: -1px;
  position: absolute;
  right: -1px;
  top: -1px;
}

.search-box-banner b {
  color: var(--cad-ink) !important;
  display: block;
  font-size: 20px !important;
  line-height: 1.35;
  padding-top: 4px;
}

.search-box-banner::after {
  background: linear-gradient(135deg, rgba(255, 255, 255, .48), rgba(255, 255, 255, 0));
  border-radius: 8px;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.search-box-banner > * {
  position: relative;
  z-index: 1;
}

.search-box-banner hr {
  border-color: var(--cad-line);
  margin: 14px 0 20px;
  opacity: 1;
}

.banner-section .search-btn {
  margin-top: 4px;
}

.banner-section .search-button,
.listing-page .search-button {
  align-items: center;
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  min-height: 54px;
  width: 100%;
}

.form-control,
select.form-control,
textarea.form-control {
  background-color: rgba(255, 255, 255, .88) !important;
  border: 1px solid rgba(203, 213, 225, .86) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72) !important;
  color: var(--cad-ink) !important;
  min-height: 48px;
  padding-left: 14px;
  padding-right: 14px;
}

.form-control:focus {
  border-color: var(--cad-primary-2) !important;
  background-color: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 0 0 4px rgba(15, 118, 110, .14), inset 0 1px 0 rgba(255, 255, 255, .86) !important;
}

label,
.form-label {
  color: #344054 !important;
  font-weight: 700 !important;
  margin-bottom: 8px;
}

.section {
  /* padding: 76px 0 !important; */
}

.section-heading h2,
.about-content h4,
.booking-head-title h4 {
  /* color: var(--cad-ink) !important; */
  font-weight: 800 !important;
}

.section-heading p,
.about-content p,
.booking-head-title p {
  color: var(--cad-muted) !important;
}

/* .services .services-group {
  padding: 28px !important;
} */

/* .services-icon {
  border: 0 !important;
} */

/* .services-icon .icon-img, */
.choose-img {
  background: rgba(15, 118, 110, .10) !important;
  border-radius: 8px !important;
}

/* .services-content h3,
.choose-content h4 {
  color: var(--cad-primary) !important;
  font-weight: 800 !important;
} */
.breadcrumb-bar {

  position: relative;
  overflow: hidden;

    padding: 65px 20px 0 !important;
}

/* Blurred background image */

.breadcrumb-bar::before {

  content: "";

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at 82% 20%,
      rgba(249, 115, 22, .24),
      transparent 40%
    ),
    linear-gradient(
      135deg,
      rgba(18, 48, 71, 0.78),
      rgba(15, 118, 110, .82)
    ),
    url("../../Cars.jpg") center/cover no-repeat;

  filter: blur(6px);

  transform: scale(1.05);

  z-index: 1;
}

/* Content stays sharp */

.breadcrumb-bar > * {

  position: relative;

  z-index: 2;
}

/* Bottom dissolve effect */

.breadcrumb-bar::after {

  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 140px;

  background:
    linear-gradient(
      to bottom,
      rgba(248,250,252,0) 0%,
      rgba(248,250,252,0.25) 30%,
      rgba(248,250,252,0.65) 60%,
      #f8fafc 100%
    );

  pointer-events: none;

  z-index: 3;
}


.breadcrumb-title {
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

.breadcrumb-bar .breadcrumb-title {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.parking-list-bg {
  background: var(--cad-soft) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.listing-page .section-search {
  margin-top: -34px;
  padding: 0 0 18px !important;
  position: relative;
  z-index: 5;
}

.listing-page .section-search .container {
  max-width: 1180px;
}

.listing-page .search-box-banner {
  padding: 18px !important;
}

.listing-page .search-box-banner ul {
  align-items: stretch !important;
  /* display: grid !important; */
  gap: 12px;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

.listing-page .column-group-main,
.listing-page .column-group-last {
  display: block !important;
  min-width: 0;
  width: 100% !important;
}

.listing-page .input-block {
  margin: 0 !important;
  width: 100% !important;
}

.listing-page .input-block-wrapp {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  width: 100%;
}

.listing-page .group-img {
  width: 100%;
}

.listing-page .form-control,
.listing-page select.form-control {
  font-size: 15px;
  min-height: 52px;
  width: 100% !important;
}

.listing-page .search-btn,
.listing-page .search-button {
  height: 100%;
  margin: 0 !important;
}

.listing-page .search-button {
  min-height: 54px;
}

.filter-bar {
  margin-bottom: 10px;
  padding: 14px !important;
}

.filter-bar .row {
  row-gap: 12px;
}

.filter-links,
.sort-links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sort-links {
  justify-content: flex-start;
}

.filter-links strong,
.sort-links strong {
  color: var(--cad-ink);
  font-size: 13px;
  margin-right: 2px;
}


@media (min-width: 576px) {
  .listing-page .input-block-wrapp {
    grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  }
}

@media (min-width: 768px) {
  .listing-page .search-box-banner {
    padding: 20px !important;
  }

  .listing-page .search-box-banner ul {
    grid-template-columns: minmax(220px, 1.1fr) minmax(260px, 1.2fr);
  }

  .listing-page .column-group-last {
    grid-column: 1 / -1;
  }
}

@media (min-width: 992px) {
  .sort-links {
    justify-content: flex-end;
  }

  .listing-page .section-search .container {
    max-width: 1140px;
  }

  .listing-page .search-box-banner ul {
    align-items: end !important;
    grid-template-columns: minmax(220px, .9fr) minmax(300px, 1.2fr) minmax(300px, 1.2fr);
  }

  .listing-page .column-group-last {
    grid-column: 1 / -1;
  }

  .listing-page .input-block-wrapp {
    grid-template-columns: minmax(0, 1fr) 108px;
  }

  .listing-page .search-button {
    max-width: 320px;
  }
}

@media (min-width: 1200px) {
  .listing-page .section-search .container,
  .parking-list-bg > .container,
  .parking-list-bg .container.my-4 {
    max-width: 1320px;
  }

  .listing-page .search-box-banner {
    padding: 18px 20px !important;
  }

  .listing-page .search-box-banner ul {
    align-items: end !important;
    gap:revert-layer;
    grid-template-columns: minmax(230px, .95fr) minmax(330px, 1.25fr) minmax(330px, 1.25fr) minmax(210px, .72fr);
  }

  .listing-page .column-group-last {
    grid-column: auto;
  }

  .listing-page .column-group-last .input-block {
    height: 100%;
  }

  .listing-page .input-block-wrapp {
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) 112px;
  }

  .listing-page .form-control,
  .listing-page select.form-control {
    min-height: 50px;
  }

  .listing-page .search-button {
    max-width: none;
    min-height: 50px;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .parking-list-bg .row.m-3 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .parking-list-bg .parking-item {
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (min-width: 1400px) {
  .listing-page .search-box-banner ul {
    grid-template-columns: minmax(260px, 1fr) minmax(360px, 1.3fr) minmax(360px, 1.3fr) minmax(220px, .72fr);
  }
}

.parking-list-bg::before,
.parking-list-bg::after,
.service-right,
.choose-left {
  display: none !important;
}

.parking-item .card,
.card {
  border: 1px solid var(--cad-line) !important;
  border-radius: 8px !important;
  box-shadow: 0 14px 36px rgba(16, 24, 40, .09) !important;
  max-width: none !important;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.parking-item .card {
  height: 100%;
}

.parking-item .info {
  display: flex;
  flex-direction: column;
  min-height: 330px;
}

.parking-item .card:hover {
  border-color: rgba(15, 118, 110, .36) !important;
  box-shadow: 0 24px 56px rgba(15, 23, 42, .14) !important;
  transform: translateY(-4px);
}

.parking-item {
  padding-bottom: 24px;
}

.parking-item .top-bar,
.book-head {
  background: linear-gradient(135deg, var(--cad-primary), #174967) !important;
  color: #fff !important;
}

.parking-item .top-bar {
  min-height: 32px;
  text-transform: uppercase;
}

.parking-item .title,
.parking-item .price,
.book-amount h6,
.success-book h5 {
  color: var(--cad-primary) !important;
  font-weight: 800 !important;
}

.parking-item .image {
  background: linear-gradient(180deg, #fff, #f8fafc);
  min-height: 148px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.parking-item .image img {
  max-height: 110px;
  object-fit: contain;
}

.parking-item .info {
  padding: 14px 16px 16px !important;
}

.parking-item .info p {
  color: #475569 !important;
  line-height: 1.45;
}

.parking-item .price span {
  color: var(--cad-muted);
  display: block;
  font-size: 13px !important;
  font-weight: 700;
  margin-top: 2px;
}

.parking-item .features i {
  border-color: rgba(18, 106, 124, .25) !important;
  color: var(--cad-primary-2) !important;
}

.parking-item .actions {
  gap: 8px;
  margin-top: auto;
}

.parking-item .actions button,
.more-info-btn,
.review-btn {
  border-color: rgba(15, 118, 110, .22) !important;
  border-radius: 8px !important;
  color: var(--cad-primary-2) !important;
  font-weight: 800;
}

.parking-item .actions button:hover,
.more-info-btn:hover,
.review-btn:hover {
  background: rgba(15, 118, 110, .10) !important;
  color: var(--cad-primary) !important;
}

.filter-links a,
.sort-links a {
  color: var(--cad-muted) !important;
  border-radius: 999px;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800 !important;
  line-height: 1.1;
  padding: 9px 12px;
  white-space: nowrap;
}

.filter-links a.active,
.sort-links a.active {
  background: rgba(18, 106, 124, .10);
  color: var(--cad-primary-2) !important;
  text-decoration: none !important;
}

.booking-new-module {
  background:
    linear-gradient(180deg, rgba(248, 250, 252, .92), var(--cad-soft) 34%),
    radial-gradient(circle at 12% 6%, rgba(15, 118, 110, .10), transparent 28%);
  padding: 48px 0 72px;
  position: relative;
}

body:has(.booking-new-module) .breadcrumb-bar {
  background:
    linear-gradient(90deg, rgba(18, 48, 71, .98) 0%, rgba(18, 48, 71, .88) 48%, rgba(15, 118, 110, .72) 100%),
    url("../../parking.jpg") center/cover no-repeat !important;
  padding: 76px 0 92px !important;
}

body:has(.booking-new-module) .booking-new-module {
  margin-top: -120px;
  /* z-index: 2; */
}

body:has(.booking-new-module) .main-wrapper {
  overflow: visible !important;
}

body:has(.booking-new-module) {
  overflow-x: clip;
}

.booking-detail-info > .row {
  align-items: flex-start;
  row-gap: 24px;
}

.booking-wizard-head {
  z-index: 2;
  background: rgba(255, 255, 255, .86);
  border: 1px solid var(--cad-line);
  border-radius: 8px;
  box-shadow: var(--cad-shadow);
  margin-bottom: 28px;
  padding: 22px;
  position: relative;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.booking-wizard-head::before {
  background: linear-gradient(180deg, rgba(15, 118, 110, .10), transparent);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.steps-wrapper {
  align-items: center !important;
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr) 56px minmax(0, 1fr);
  margin: 8px 0 !important;
}

.step {
  align-items: center;
  background: #fff;
  border: 1px solid var(--cad-line);
  border-radius: 8px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
  display: flex;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  text-align: left !important;
}

.step-dot {
  background: var(--cad-primary-2) !important;
  box-shadow: 0 0 0 5px rgba(15, 118, 110, .12);
  flex: 0 0 auto;
  height: 14px !important;
  margin: 0 !important;
  width: 14px !important;
}

.step-dot::after {
  display: none !important;
}

.step-line {
  background: linear-gradient(90deg, rgba(15, 118, 110, .18), rgba(249, 115, 22, .55)) !important;
  height: 2px !important;
  margin: 0 !important;
  width: 100% !important;
}

.step-text {
  color: var(--cad-primary) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  margin: 0 !important;
}
.step.active-step {

  background:
    linear-gradient(
      135deg,
      #123047,
      #0f766e
    );

  border-color: transparent;

  box-shadow:
    0 20px 40px rgba(15,118,110,.22);

  transform: translateY(-2px);
}

.active-step .step-text {

  color: #fff !important;
}

.active-step .step-dot {

  background: #FE9307 !important;

  box-shadow:
    0 0 0 7px rgba(254,147,7,.18);
}


/* =========================================
   MOBILE TEXT SWITCH (STEP LABELS)
========================================= */

@media (max-width: 767px) {

  /* Hide full text on mobile */
  .step-text {
    font-size: 0 !important;
  }

  /* Replace with shorter labels */
  .step:nth-child(1) .step-text::after {
    content: "Find" !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: inherit !important;
  }

  .step:nth-child(3) .step-text::after {
    content: "Details" !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: inherit !important;
  }

  .step:nth-child(5) .step-text::after {
    content: "Pay" !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: inherit !important;
  }

}























.booking-info-head span {
  background: rgba(18, 106, 124, .10) !important;
  border-radius: 8px !important;
  color: var(--cad-primary-2) !important;
}

.booking-info-head h5,
.book-head h6 {
  font-weight: 800 !important;
}

.booking-information-card,
.book-card {
  margin-bottom: 22px;
  overflow: hidden;
}

.booking-information-card {
  border-top: 4px solid rgba(15, 118, 110, .18) !important;
}

.booking-information-card .row {
  row-gap: 18px;
}

.booking-info-head {
  background: linear-gradient(180deg, #fff, #f8fafc);
  border-bottom: 1px solid var(--cad-line);
  padding: 18px 22px !important;
}

.booking-info-body {
  padding: 24px !important;
}

.booking-sidebar {
  position: sticky;
  top: 104px;
  z-index: 3;
}

.theiaStickySidebar {
  align-self: flex-start;
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 104px !important;
  z-index: 3;
}

.booking-sidebar-card,
.total-rate-card {
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid var(--cad-line) !important;
  border-radius: 8px !important;
  box-shadow: var(--cad-shadow) !important;
  overflow: hidden;
}

.booking-sidebar-head {
  background: linear-gradient(135deg, var(--cad-primary), #174967) !important;
  padding: 18px 20px !important;
}

.booking-sidebar-head h5 {
  color: #fff !important;
  font-weight: 800 !important;
  margin: 0;
}

.booking-sidebar-body {
  padding: 20px !important;
}

.booking-car-detail {
  background: #f8fafc;
  border: 1px solid var(--cad-line);
  border-radius: 8px;
  gap: 14px;
  margin: 18px 0;
  padding: 12px;
}

.booking-car-detail .car-img {
  border-radius: 8px;
  overflow: hidden;
}

.booking-car-detail .car-img img {
  height: 92px !important;
  object-fit: cover;
}

.booking-vehicle-rates ul {
  margin: 0;
  padding: 0;
}

.booking-vehicle-rates li {
  align-items: flex-start;
  border-bottom: 1px solid var(--cad-line);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 12px 0;
}

.booking-vehicle-rates li h6,
.booking-vehicle-rates li h5 {
  margin: 0;
}

.booking-vehicle-rates li h6 {
  color: var(--cad-muted);
  font-size: 13px;
  font-weight: 700;
}

.booking-vehicle-rates li h5 {
  color: var(--cad-ink);
  font-size: 14px;
  font-weight: 800;
  text-align: right;
}

.booking-vehicle-rates li.total-rate {
  background: rgba(15, 118, 110, .08);
  border: 0;
  border-radius: 8px;
  margin-top: 10px;
  padding: 14px;
}

.total-rate-card {
  margin-top: 18px;
  padding: 18px !important;
}

.vehicle-total-price {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.vehicle-total-price h5,
.vehicle-total-price span {
  margin: 0;
}

.vehicle-total-price span {
  color: var(--cad-accent);
  font-size: 24px;
  font-weight: 800;
}

.pricing-lists li,
.location-lists li {
  border-bottom: 1px solid var(--cad-line);
}

.pricing-lists li.total {
  background: rgba(18, 106, 124, .08);
  border-radius: 8px;
  padding: 14px !important;
}

.success-icon {
  background: rgba(3, 152, 85, .12) !important;
  color: var(--cad-success) !important;
}

.modal-content {
  border: 1px solid var(--cad-line) !important;
  border-radius: 8px !important;
  box-shadow: var(--cad-shadow-lg) !important;
  overflow: hidden;
}

.modal-header {
  border-bottom: 1px solid var(--cad-line) !important;
}

.modal-body {
  background: #fff;
}

.modal-dialog {
  padding: 12px;
}

.modal-xl {
  max-width: min(1120px, calc(100vw - 24px));
}

.footer {
  background: #071827 !important;
}

.footer-bottom {
  background: var(--cad-primary-2) !important;
}

.footer-title,
.footer a,
.footer p {
  color: rgba(255, 255, 255, .86) !important;
}

@media (max-width: 991px) {
  .header .navbar-brand img {
    height: 58px !important;
  }

  .banner-section {
    min-height: auto;
    padding: 44px 0 42px !important;
  }

  .section-search {
    margin-top: 24px;
  }

  body:has(.booking-new-module) .breadcrumb-bar {
    padding: 56px 0 76px !important;
  }

  body:has(.booking-new-module) .booking-new-module {
    margin-top: -44px;
  }

  .steps-wrapper {
    grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr) 16px minmax(0, 1fr);
    gap: 8px !important;
  }

  .step {
    padding: 10px;
  }

  /* .step-text {
    font-size: 12px !important;
  } */

  .booking-sidebar {
    position: static;
  }

  .theiaStickySidebar {
    align-self: stretch;
    position: static !important;
    top: auto !important;
  }

  .home-banner .row {
    /* row-gap: 22px; */
  }

  .listing-page .column-group-last {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  body {
    background: #fff !important;
  }

  .header-nav {
    min-height: 72px;
  }

  .home-banner .row {
    display: flex;
    flex-direction: column;
  }

  .home-banner .col-lg-6:last-child {
    order: -1;
  }

  .home-banner .col-lg-6:first-child {
    order: 2;
  }

  .home-banner h1 {
    font-size: 32px !important;
    margin-top: 6px;
  }

  .home-banner .col-lg-6:first-child p:nth-of-type(2) {
    font-size: 17px !important;
  }

  .home-banner .col-lg-6:first-child::after {
    font-size: 14px;
  }

  .search-box-banner {
    padding: 18px !important;
  }

  .search-box-banner b {
    font-size: 17px !important;
  }

  .banner-section {
    padding-top: 22px !important;
  }

  .banner-section::after {

  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 120px;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      rgba(248,250,252,0) 0%,
      rgba(248,250,252,0.15) 30%,
      rgba(248,250,252,0.45) 60%,
      rgba(248,250,252,0.75) 82%,
      #f8fafc 100%
    );
}

  .section {
    padding: 0px 0 !important;
  }

  /* .breadcrumb-bar {

    padding: 65px 20px 0 !important;

  } */

  .listing-page .section-search {
    margin-top: -18px;
  }

  .listing-page .search-box-banner {
    padding: 16px !important;
  }

  .listing-page .search-box-banner ul {
    grid-template-columns: 1fr !important;
  }

  .listing-page .input-block-wrapp {
    grid-template-columns: 1fr !important;
  }

  .listing-page .filter-bar {
    border-radius: 8px !important;
    padding: 12px !important;
  }

  .filter-links,
  .sort-links {
    gap: 7px;
  }

  .filter-links a,
  .sort-links a {
    flex: 1 1 auto;
    justify-content: center;
    min-width: max-content;
  }

  .parking-item {
    margin-bottom: 18px;
  }

  .booking-new-module {
    padding: 28px 0 48px;
  }

  .booking-detail-info > .row {
    display: flex !important;
    flex-direction: column !important;
  }

  .booking-detail-info > .row > .col-lg-8 {
    order: 2 !important;
  }

  .booking-detail-info > .row > .theiaStickySidebar,
  .booking-detail-info > .row > .col-lg-4.theiaStickySidebar {
    order: 1 !important;
    width: 100% !important;
  }

  .booking-wizard-head {
    padding: 16px;
  }

  /* .steps-wrapper {
    align-items: stretch !important;
    gap: 10px;
    grid-template-columns: 1fr !important;
  } */

  .step {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--cad-line);
    border-radius: 8px;
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    text-align: left !important;
  }

  .step-dot {
    flex: 0 0 auto;
    margin: 0 !important;
  }

  .step-line {
    height: 2px !important;
    /* margin-left: 19px !important; */
    width: 16px !important;
  }

  .step-text {
    margin-top: 0 !important;
  }

  .booking-info-body {
    padding: 18px !important;
  }

  .booking-info-head {
    padding: 16px 18px !important;
  }

  .booking-sidebar-body {
    padding: 16px !important;
  }

  .booking-vehicle-rates li {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .booking-vehicle-rates li h5 {
    text-align: left;
  }

  .vehicle-total-price {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .booking-info-btns,
  .justify-content-end {
    /* display: grid !important; */
    gap: 12px;
    text-align: stretch !important;
  }

  .booking-info-btns .btn,
  .justify-content-end .btn {
    width: 100%;
  }

  .modal-dialog {
    margin: 8px;
    padding: 0;
  }
}

@media (max-width: 420px) {

  .navbar-help-link{
    width: 150px !important;
  }
  .container {
    padding-left: 14px;
    padding-right: 14px;
  }

  .home-banner h1 {
    font-size: 29px !important;
  }

  .search-box-banner b {
    font-size: 16px !important;
  }
}
/* Fresh typography + spacing */
body {
    font-family: "Plus Jakarta Sans", sans-serif;
    line-height: 1.5;
}

/* Hero section text */
.hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    max-width: 580px;
    color: #fff;
    margin-bottom: 1rem;
}

.hero-title .accent {
    color: #FE9307;
}

.hero-subtitle,
.hero-pricing {
    font-size: 1.1rem;
    color: #fff;
}

.hero-trust span {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.92);
}

.hero-note {
    font-size: 0.95rem;
}

/* Search box banner */
.search-box-banner {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.search-box-banner .search-heading {
    font-size: 1.25rem;
    color: var(--cad-ink);
}

.search-box-banner .search-divider {
    border-color: var(--cad-line);
    margin-top: 0.5rem;
    margin-bottom: 1.25rem;
}

/* Form controls */
.form-select.form-control-lg,
.form-control.form-control-lg {
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
}

/* Services cards */
/* .services-group {
    padding: 1.5rem;
} */

/* .services-icon {
    width: 52px;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
} */

/* About section */
.about-exp {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 8px 16px;
    background: rgba(18, 48, 71, 0.9);
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

/* Why choose us */
.why-choose-group .card {
    border: 1px solid var(--cad-line);
    border-radius: 12px;
    box-shadow: var(--cad-shadow);
    padding: 1.5rem;
}

/* Testimonials */
.testimonial-item .card {
    border-radius: 12px;
    box-shadow: var(--cad-shadow);
}

/* Responsive tweaks */
@media (max-width: 991px) {
    .hero-title {
        font-size: 2rem;
    }
    .search-box-banner {
        padding: 1.5rem;
    }
}

@media (max-width: 767px) {
    .hero-title {
        font-size: 1.75rem;
    }
    .search-box-banner {
        border-radius: 12px;
        margin-top:0
    }
    .services-work .row {
        row-gap: 1rem;
    }
}














.why-choose .card .card-body .choose-content p {
  -webkit-transition: 500ms all ease !important;
  -o-transition: 500ms all ease !important;
  transition: 500ms all ease !important;
  -moz-transition: 500ms all ease !important;
  -ms-transition: 500ms all ease !important;
}
.why-choose .card:hover {
  background: #000 !important;
}
.why-choose .card:hover .choose-black {
  background: #ffffff !important;
}
.why-choose .card:hover .choose-secondary {
  background: #ffffff !important;
}
.why-choose .card:hover .choose-primary {
  background: #ffffff !important;
}
.why-choose .card:hover .choose-content h4 {
  color: #ffffff !important;
}
.why-choose .card:hover .choose-content p {
  color: #ffffff !important;
}
.why-choose .card:hover .choose-img {
  position: relative !important;
  background-image: url(../img/bg/count-bg.jpg) !important;
  background-repeat: no-repeat !important;
  background-position: right !important;
  background-size: cover !important;
}
.why-choose .card:hover .choose-img img {
  filter: invert(1) !important;
}




.why-choose .card .card-body .choose-img img {
  -webkit-transition: 500ms all ease !important;
  -o-transition: 500ms all ease !important;
  transition: 500ms all ease !important;
  -moz-transition: 500ms all ease !important; 
  -ms-transition: 500ms all ease !important;
}
.why-choose .card .card-body .choose-black {
  background: #201F1D !important;
}
.why-choose .card .card-body .choose-secondary {
  background: #127384 !important;
}
.why-choose .card .card-body .choose-primary {
  background: #FFA633 !important;
}
.why-choose .card .card-body .choose-content {
  text-align: center !important;
}
















/* =========================================
   CAD FILTER TOGGLE
========================================= */

.cad-filter-toggle-box{

    background:#fff;

    border-radius:22px;

    padding:20px 24px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    cursor:pointer;

    border:1px solid #edf2f7;

    box-shadow:
      0 10px 40px rgba(0,0,0,.05);

    transition:.35s ease;
}

.cad-filter-toggle-box:hover{

    transform:translateY(-2px);

    box-shadow:
      0 18px 50px rgba(0,0,0,.08);
}

/* LEFT */

.cad-filter-toggle-left{

    display:flex;

    align-items:center;

    gap:16px;
}

.cad-filter-icon{

    width:52px;
    height:52px;

    border-radius:16px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
      linear-gradient(
        135deg,
        #FE9307,
        #ff6b00
      );

    color:#fff;

    font-size:18px;

    box-shadow:
      0 12px 25px rgba(254,147,7,.25);
}

.cad-filter-toggle-left h6{

    margin:0;

    font-size:18px;

    font-weight:700;

    color:#0F172A;
}

.cad-filter-toggle-left p{

    margin:0;

    font-size:14px;

    color:#64748B;
}

/* RIGHT */

.cad-filter-toggle-right{

    display:flex;

    align-items:center;

    gap:12px;

    color:#64748B;

    font-weight:600;
}

.cad-filter-toggle-right i{

    transition:.35s ease;
}

/* =========================================
   EXPAND AREA
========================================= */

.cad-filter-expand-area{

    max-height:0;

    overflow:hidden;

    opacity:0;

    transform:translateY(-12px);

    transition:
      max-height .45s ease,
      opacity .35s ease,
      transform .35s ease;
}

.cad-filter-expand-area.cad-filter-open{

    max-height:500px;

    opacity:1;

    transform:translateY(0);

    margin-top:18px;
}

/* ROTATE */

.cad-filter-arrow-rotate{
    transform:rotate(180deg);
}

/* =========================================
   MAIN BOX
========================================= */

.cad-filter-main-box{

    background:#fff;

    border-radius:22px;

    padding:26px;

    border:1px solid #edf2f7;

    box-shadow:
      0 10px 40px rgba(0,0,0,.04);
}

/* =========================================
   GROUPS
========================================= */

.cad-filter-link-group,
.cad-sort-link-group{

    display:flex;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;
}

.cad-filter-title{

    font-weight:700;

    color:#0F172A;
}

/* =========================================
   BUTTONS
========================================= */

.cad-filter-btn,
.cad-sort-btn{

    padding:10px 18px;

    border-radius:14px;

    background:#F8FAFC;

    color:#475569;

    font-weight:600;

    transition:.3s ease;

    border:1px solid transparent;
}

.cad-filter-btn:hover,
.cad-sort-btn:hover{

    background:#FFF7ED;

    color:#FE9307;

    border-color:#FED7AA;
}

.cad-filter-btn.active,
.cad-sort-btn.active{

    background:
      linear-gradient(
        135deg,
        #FE9307,
        #ff6b00
      );

    color:#fff;

    box-shadow:
      0 10px 25px rgba(254,147,7,.22);
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:768px){

    .cad-filter-toggle-box{

        padding:18px;
    }

    .cad-filter-toggle-left{

        gap:12px;
    }

    .cad-filter-icon{

        width:46px;
        height:46px;
    }

    .cad-filter-toggle-left h6{

        font-size:16px;
    }

    .cad-filter-main-box{

        padding:18px;
    }

    .cad-filter-btn,
    .cad-sort-btn{

        padding:9px 14px;

        font-size:14px;
    }
}










/* HIDE INITIALLY */

.cad-filter-slide-area{

    display:none;

    margin-top:18px;
}

/* SHOW */

.cad-filter-slide-area.cad-show-filter{

    display:block;

    animation:cadSlideDown .35s ease;
}

/* ANIMATION */

@keyframes cadSlideDown{

    from{

        opacity:0;
        transform:translateY(-10px);
    }

    to{

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

/* TOGGLE */

.cad-toggle-filter-box{

    background:#fff;

    border-radius:20px;

    padding:20px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    cursor:pointer;

    border:1px solid #edf2f7;

    box-shadow:
      0 8px 30px rgba(0,0,0,.05);
}

/* LEFT */

.cad-toggle-left{

    display:flex;

    align-items:center;

    gap:14px;
}

.cad-toggle-icon{

    width:50px;
    height:50px;

    border-radius:14px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:linear-gradient(
      135deg,
      #FE9307,
      #ff6b00
    );

    color:#fff;
}

/* RIGHT */

.cad-toggle-right{

    display:flex;

    align-items:center;

    gap:10px;
}

/* ROTATE */

.cad-rotate{

    transform:rotate(180deg);
}






/* =========================================
   MOBILE RESPONSIVE FILTER UI
========================================= */

@media(max-width:991px){

    .cad-toggle-filter-box{

        padding:18px;

        border-radius:18px;
    }

    .cad-toggle-left{

        gap:12px;
    }

    .cad-toggle-icon{

        width:46px;
        height:46px;

        min-width:46px;

        border-radius:14px;
    }

    .cad-toggle-content h5{

        font-size:16px;

        margin-bottom:2px;
    }

    .cad-toggle-content p{

        font-size:13px;

        line-height:1.4;

        margin:0;
    }

    .cad-toggle-right{

        font-size:14px;
    }

    .filter-bar{

        padding:18px !important;

        border-radius:18px;
    }

    .filter-links,
    .sort-links{

        display:flex;

        flex-wrap:wrap;

        gap:10px;

        align-items:center;
    }

    .filter-links strong,
    .sort-links strong{

        width:100%;

        margin-bottom:6px;

        font-size:14px;
    }

    .filter-links a,
    .sort-links a{

        padding:10px 14px;

        font-size:13px;

        border-radius:12px;

        display:inline-flex;

        align-items:center;

        justify-content:center;
    }

}

/* =========================================
   SMALL MOBILE
========================================= */

@media(max-width:576px){

    .container.my-4{

        padding-left:6px;

        padding-right:6px;
    }

    .cad-toggle-filter-box{

        padding:16px;

        align-items:flex-start;
    }

    .cad-toggle-left{

        width:100%;
    }

    .cad-toggle-content{

        flex:1;
    }

    .cad-toggle-content h5{

        font-size:15px;
    }

    .cad-toggle-content p{

        font-size:12px;
    }

    .cad-toggle-right{

        font-size:13px;

        margin-left:10px;
    }

    .filter-bar{

        padding:15px !important;
    }

    .filter-links,
    .sort-links{

        gap:8px;
    }

    .filter-links a,
    .sort-links a{

        flex:1 1 calc(50% - 8px);

        text-align:center;

        min-height:42px;

        padding:10px;

        font-size:12px;

        font-weight:600;
    }

    .sort-links{

        margin-top:18px;
    }

}

/* =========================================
   EXTRA PREMIUM TOUCH
========================================= */

.filter-links a,
.sort-links a{

    transition:
      all .25s ease,
      transform .2s ease;
}

.filter-links a:hover,
.sort-links a:hover{

    transform:translateY(-2px);
}

.filter-links a.active,
.sort-links a.active{

    background:
      linear-gradient(
        135deg,
        #FE9307,
        #ff6b00
      );

    color:#fff !important;

    box-shadow:
      0 10px 22px rgba(254,147,7,.25);
}

/* SMOOTH OPEN */

.cad-filter-slide-area{

    transition:all .3s ease;
}
















/* =========================================
   MODERN PREMIUM MODAL
========================================= */

.cad-modern-modal .modal-dialog{

    padding:20px !important;

    max-width:1300px !important;
}

.cad-modern-modal .modal-content{

    border:none !important;

    border-radius:28px !important;

    overflow:hidden !important;

    background:#ffffff !important;

    box-shadow:
      0 30px 80px rgba(0,0,0,.18) !important;
}

/* =========================================
   HEADER
========================================= */

.cad-modal-header{

    display:flex !important;

    align-items:center !important;

    justify-content:space-between !important;

    padding:24px 28px !important;

    background:
      linear-gradient(
        135deg,
        #123047,
        #0f766e
      ) !important;

    position:relative !important;

    overflow:hidden !important;
}

.cad-modal-header::before{

    content:"" !important;

    position:absolute !important;

    inset:0 !important;

    background:
      radial-gradient(
        circle at top right,
        rgba(255,255,255,.18),
        transparent 40%
      ) !important;
}

/* LEFT */

.cad-modal-header-left{

    display:flex !important;

    align-items:center !important;

    gap:18px !important;

    position:relative !important;

    z-index:2 !important;
}

/* ICON */

.cad-modal-icon{

    width:45px !important;
    height:45px !important;

    border-radius:18px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    background:
      linear-gradient(
        135deg,
        #FE9307,
        #ff6b00
      ) !important;

    color:#fff !important;

    font-size:22px !important;

    box-shadow:
      0 14px 30px rgba(254,147,7,.28) !important;
}

/* REVIEW ICON */

.cad-review-icon{

    background:
      linear-gradient(
        135deg,
        #f59e0b,
        #f97316
      ) !important;
}

/* TITLES */

.cad-modal-header h4{

    margin:0 !important;

    color:#fff !important;

    font-size:24px !important;

    font-weight:800 !important;
}

.cad-modal-header p{

    margin:4px 0 0 !important;

    color:rgba(255,255,255,.82) !important;

    font-size:14px !important;
}

/* =========================================
   CLOSE BUTTON
========================================= */

.cad-modal-close{

    width:46px !important;
    height:46px !important;

    border:none !important;

    border-radius:14px !important;

    background:rgba(255,255,255,.12) !important;

    color:#fff !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    font-size:18px !important;

    transition:.3s ease !important;

    position:relative !important;

    z-index:2 !important;
}

.cad-modal-close:hover{

    background:#fff !important;

    color:#123047 !important;

    transform:rotate(90deg) !important;
}

/* =========================================
   BODY
========================================= */

.cad-modal-body{

    padding:30px !important;

    background:#f8fafc !important;

    max-height:78vh !important;

    overflow-y:auto !important;
}

/* CUSTOM SCROLLBAR */

.cad-modal-body::-webkit-scrollbar{

    width:8px !important;
}

.cad-modal-body::-webkit-scrollbar-thumb{

    background:#d1d5db !important;

    border-radius:20px !important;
}

/* =========================================
   LOADER
========================================= */

.cad-modal-loader{

    min-height:350px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    flex-direction:column !important;

    gap:18px !important;
}

.cad-modal-loader p{

    color:#64748b !important;

    font-size:15px !important;

    margin:0 !important;
}

/* =========================================
   BACKDROP
========================================= */

/* .modal-backdrop.show{

    opacity:.72 !important;

    backdrop-filter:blur(6px) !important;

    background:#06131f !important;
} */

/* =========================================
   MOBILE
========================================= */

@media(max-width:768px){

    .cad-modern-modal .modal-dialog{

        padding:10px !important;

        margin:0 !important;
    }

    .cad-modern-modal .modal-content{

        border-radius:22px !important;
    }

    .cad-modal-header{

        padding:20px !important;
    }

    .cad-modal-header-left{

        gap:12px !important;
    }

    .cad-modal-icon{

        width:45px !important;
        height:45px !important;

        font-size:18px !important;

        border-radius:14px !important;
    }

    .cad-modal-header h4{

        font-size:19px !important;
    }

    .cad-modal-header p{

        font-size:12px !important;
    }

    .cad-modal-close{

        width:40px !important;
        height:40px !important;

        font-size:15px !important;
    }

    .cad-modal-body{

        padding:18px !important;

        max-height:75vh !important;
    }

}
























/* =========================================================
   BOOKING SUCCESS PAGE MODERN UI
   Add in modern-booking-app.css
========================================================= */

/* Main Section */
.booking-new-module {
  position: relative !important;
  padding: 80px 0 !important;
  background:
    radial-gradient(circle at top right,
      rgba(255,147,7,.12),
      transparent 30%),
    linear-gradient(
      180deg,
      #f8fafc 0%,
      #eef5f9 100%
    ) !important;
  overflow: hidden !important;
}

/* Background Glow */
.booking-new-module::before {
  content: "" !important;
  position: absolute !important;
  width: 500px !important;
  height: 500px !important;
  background: rgba(15,118,110,.08) !important;
  border-radius: 50% !important;
  filter: blur(120px) !important;
  top: -150px !important;
  right: -150px !important;
  z-index: 0 !important;
}

/* Main Card */
.booking-card {
  position: relative !important;
  z-index: 2 !important;

  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  border-radius: 26px !important;

  padding: 40px !important;

  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;

  box-shadow:
    0 10px 30px rgba(15,23,42,.06),
    0 30px 60px rgba(15,23,42,.08) !important;

  overflow: hidden !important;
}

/* Top Gradient */
.booking-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 6px !important;

  background:
    linear-gradient(
      90deg,
      #0f766e,
      #FE9307
    ) !important;
}

/* ========================================
   SUCCESS SECTION
======================================== */

.success-book {
  text-align: center !important;
  padding-bottom: 35px !important;
  margin-bottom: 35px !important;
  border-bottom: 1px dashed rgba(15,23,42,.12) !important;
}

.success-icon {
  width: 90px !important;
  height: 90px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 50% !important;

  background:
    linear-gradient(
      135deg,
      #0f766e,
      #14b8a6
    ) !important;

  box-shadow:
    0 18px 40px rgba(15,118,110,.25) !important;

  margin-bottom: 22px !important;
}

.success-icon i {
  color: #fff !important;
  font-size: 38px !important;
}

.success-book h5 {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #123047 !important;
  margin-bottom: 12px !important;
}

.order-no {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 12px 20px !important;

  background: rgba(15,118,110,.08) !important;

  border-radius: 12px !important;

  font-size: 15px !important;
}

.order-no span {
  color: #0f766e !important;
  margin-left: 6px !important;
  font-weight: 800 !important;
}

/* ========================================
   BOOKING HEADER
======================================== */

.booking-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 20px !important;

  background:
    linear-gradient(
      135deg,
      #123047,
      #0f766e
    ) !important;

  border-radius: 22px !important;

  padding: 28px !important;

  margin-bottom: 35px !important;

  box-shadow:
    0 18px 40px rgba(18,48,71,.18) !important;
}

.book-info h6 {
  color: #fff !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  margin-bottom: 10px !important;
}

.book-info p {
  color: rgba(255,255,255,.85) !important;
  margin: 0 !important;
  font-size: 15px !important;
}

.book-info i {
  color: #FE9307 !important;
  margin-right: 6px !important;
}

.book-amount {
  text-align: right !important;
}

.book-amount p {
  color: rgba(255,255,255,.7) !important;
  margin-bottom: 8px !important;
}

.book-amount h6 {
  color: #fff !important;
  font-size: 34px !important;
  font-weight: 900 !important;
  margin: 0 !important;
}

/* ========================================
   CARDS
======================================== */

.book-card {
  background: #fff !important;
  border-radius: 22px !important;
  border: 1px solid rgba(15,23,42,.06) !important;

  overflow: hidden !important;

  box-shadow:
    0 10px 24px rgba(15,23,42,.05) !important;

  transition: all .3s ease !important;

  margin-bottom: 25px !important;
}

.book-card:hover {
  transform: translateY(-4px) !important;

  box-shadow:
    0 18px 40px rgba(15,23,42,.10) !important;
}

.book-head {
  padding: 18px 22px !important;

  background:
    linear-gradient(
      90deg,
      rgba(15,118,110,.08),
      rgba(254,147,7,.08)
    ) !important;

  border-bottom: 1px solid rgba(15,23,42,.06) !important;
}

.book-head h6 {
  margin: 0 !important;

  color: #123047 !important;

  font-size: 18px !important;
  font-weight: 800 !important;
}

.book-body {
  padding: 22px !important;
}

/* ========================================
   LISTS
======================================== */

.pricing-lists,
.location-lists,
.billing-lists {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.pricing-lists li,
.location-lists li {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;

  gap: 15px !important;

  padding: 14px 0 !important;

  border-bottom: 1px dashed rgba(15,23,42,.10) !important;
}

.pricing-lists li:last-child,
.location-lists li:last-child {
  border-bottom: none !important;
}

.pricing-lists p,
.location-lists p,
.billing-lists li {
  margin: 0 !important;
  color: #475569 !important;
  font-size: 15px !important;
}

.pricing-lists span,
.location-lists span {
  color: #123047 !important;
  font-weight: 700 !important;
}

.location-lists h6 {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #123047 !important;
  margin-bottom: 6px !important;
}

.pricing-lists li.total {
  margin-top: 12px !important;
  padding-top: 18px !important;

  border-top: 2px solid rgba(15,118,110,.12) !important;
}

.pricing-lists li.total p,
.pricing-lists li.total span {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0f766e !important;
}

/* ========================================
   BREADCRUMB
======================================== */

.breadcrumb-bar {
  position: relative !important;
  overflow: hidden !important;

  background:
    linear-gradient(
      135deg,
      rgba(18,48,71,.88),
      rgba(15,118,110,.82)
    ),
    url("../../Cars.jpg") center/cover no-repeat !important;

  padding: 90px 20px 130px !important;
}

.breadcrumb-bar::after {
  content: "" !important;

  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  height: 140px !important;

  background:
    linear-gradient(
      to bottom,
      rgba(248,250,252,0) 0%,
      rgba(248,250,252,.75) 60%,
      #f8fafc 100%
    ) !important;
}

.breadcrumb-title {
  color: #fff !important;
  font-size: 42px !important;
  font-weight: 900 !important;
  position: relative !important;
  z-index: 2 !important;
}

/* ========================================
   MOBILE
======================================== */

@media (max-width: 991px) {

  .booking-new-module {
    padding: 45px 0 !important;
  }

  .booking-card {
    padding: 24px !important;
    border-radius: 22px !important;
  }

  .booking-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding: 24px !important;
  }

  .book-amount {
    text-align: left !important;
    width: 100% !important;
  }

  .book-amount h6 {
    font-size: 28px !important;
  }

  .book-info h6 {
    font-size: 24px !important;
  }

  .success-book h5 {
    font-size: 22px !important;
  }

  .breadcrumb-title {
    font-size: 32px !important;
  }
}

@media (max-width: 767px) {

  .booking-card {
    padding: 18px !important;
  }

  .success-icon {
    width: 72px !important;
    height: 72px !important;
  }

  .success-icon i {
    font-size: 28px !important;
  }

  .success-book h5 {
    font-size: 19px !important;
    line-height: 1.5 !important;
  }

  .book-head {
    padding: 15px 18px !important;
  }

  .book-body {
    padding: 18px !important;
  }

  .pricing-lists li,
  .location-lists li {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .book-info h6 {
    font-size: 21px !important;
  }

  .book-amount h6 {
    font-size: 24px !important;
  }

  .breadcrumb-bar {
    padding: 70px 15px 90px !important;
  }

  .breadcrumb-title {
    font-size: 26px !important;
  }
}