@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/*
Author       : Dreamguys
Template Name: 24Rent - Bootstrap Template
Version      : 1.0 24ren
*/
/*============================
 [Table of CSS]

1. Reset
2. Typography
3. General
4. Grid
5. Buttons
6. Header
7. Footer
8. Breadcrumb
9. Select
10. Table
11. Home
12. Login
13. Common
14. Faq
15. Pricing
16. Gallery
17. Our Team
18. Contact
19. Invoice
20. Blog
21. Testimonials
22. About Us
23. Product Details
24. Products
25. Contacts
26. VIP-Transfers

========================================*/
/* =============================================
   FIGMA DESIGN TOKENS — Color Palette
   ============================================= */
:root {
  /* =============================================
     SHADCN SKIN — design tokens (zinc palette)
     ============================================= */

  /* Primary palette (shadcn: primary = zinc-900 near-black) */
  --color-blue:        #18181b;    /* primary (buttons, links, badges, active states) */
  --color-blue-hover:  #303036;    /* primary hover (primary/90) */
  --color-blue-dark:   #09090b;    /* strong accents */
  --color-blue-light:  #f4f4f5;    /* light section backgrounds (zinc-100) */
  --color-green:       #16a34a;
  --color-yellow:      #fde047;    /* highlight badges */

  /* Neutral palette */
  --color-text:        #09090b;    /* foreground (zinc-950) */
  --color-text-dark:   #09090b;
  --color-text-light:  #71717a;    /* muted-foreground (zinc-500) */
  --color-bg-body:     #ffffff;
  --color-bg-light:    #f4f4f5;    /* muted (zinc-100) */
  --color-bg-section:  #fafafa;    /* zinc-50 */
  --color-border:      #e4e4e7;    /* border (zinc-200) */
  --color-white:       #ffffff;

  /* Extended neutral palette */
  --color-black:       #09090b;
  --color-dark-bg:     #18181b;    /* hero dark background (zinc-900) */
  --color-bg-input:    #ffffff;    /* shadcn inputs are white + 1px border */
  --color-gray:        #71717a;
  --color-gray-muted:  #71717a;
  --color-gray-light:  #fafafa;
  --color-red:         #dc2626;    /* destructive */
  --color-red-dark:    #b91c1c;
  --color-error:       #dc2626;
  --color-green-toggle: #18181b;   /* shadcn Switch active = primary */

  --color-bg-card:     #ffffff;
  --color-bg-alt:      #fafafa;
  --color-bg-muted:    #f4f4f5;
  --color-text-muted:  #71717a;
  --color-footer-bg:   #09090b;
  --color-ring:        #a1a1aa;    /* focus ring (zinc-400) */

  /* Border / overlay colours */
  --color-border-input:   #e4e4e7;
  --color-border-btn:     rgba(9, 9, 11, 0.10);
  --color-dot-on-dark:    rgba(255, 255, 255, 0.35);
  --color-divider:        rgba(9, 9, 11, 0.08);
  --color-overlay-dark:   rgba(0, 0, 0, 0.70);
  --color-overlay-mid:    rgba(0, 0, 0, 0.13);

  /* Shadows (shadcn scale) */
  --shadow-sm:   0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
  --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
  --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-btn:  0 1px 2px 0 rgba(0, 0, 0, 0.05);

  /* Typography — Inter everywhere (shadcn) */
  --font-primary:      'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-secondary:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;

  /* Font size scale */
  --font-size-xxs:  12px;
  --font-size-xs:   14px;
  --font-size-sm:   15px;
  --font-size-md:   16px;
  --font-size-lg:   18px;
  --font-size-xl:   22px;
  --font-size-2xl:  26px;
  --font-size-3xl:  30px;
  --font-size-4xl:  40px;

  /* Border radii */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-pill: 9999px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 30px;
  --space-8: 34px;
  --space-9: 40px;
  --space-10: 48px;
  --space-12: 64px;
  --space-16: 80px;

  /* Section layout */
  --section-padding-y: 80px;
  --section-padding-y-mobile: 50px;

  /* Value-based spacing scale (even values only) */
  --sp-2:   2px;
  --sp-4:   4px;
  --sp-6:   6px;
  --sp-8:   8px;
  --sp-10:  10px;
  --sp-12:  12px;
  --sp-16:  16px;
  --sp-20:  20px;
  --sp-24:  24px;
  --sp-28:  28px;
  --sp-32:  32px;
  --sp-40:  40px;
  --sp-48:  48px;
  --sp-56:  56px;
  --sp-64:  64px;
  --sp-80:  80px;
  --sp-96:  96px;
  --sp-120: 120px;

  /* Semantic spacing */
  --spacing-mobile-x:        16px;
  --spacing-tablet-x:        24px;
  --spacing-desktop-x:       40px;
  --spacing-section-y-mobile:  40px;
  --spacing-section-y-tablet:  56px;
  --spacing-section-y-desktop: 80px;
  --spacing-card-padding:    20px;
  --spacing-card-padding-sm: 16px;
  --spacing-form-gap:        16px;
  --spacing-element-gap:     12px;

  /* Border-radius scale (even values only) */
  --radius-2:    2px;
  --radius-4:    4px;
  --radius-6:    6px;
  --radius-8:    8px;
  --radius-10:   10px;
  --radius-12:   12px;
  --radius-16:   16px;
  --radius-20:   20px;
  --radius-24:   24px;
  --radius-full: 9999px;

  /* Semantic border-radius */
  --radius-btn:   8px;
  --radius-card:  14px;
  --radius-input: 8px;
  --radius-badge: 9999px;
  --radius-modal: 14px;

  --bp-xs:  320px;
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1440px;
  --bp-max: 1450px;

  /* Slider controls */
  --slider-btn-size:        44px;
  --slider-btn-padding:     20px;
  --slider-btn-icon-size:   18px;
  --slider-btn-icon-opacity: 0.6;
  --slider-controls-gap:    26px;
  --slider-dots-gap:        6px;
  --slider-dot-size:        8px;
  --slider-dot-active-w:    24px;
}


img {
  max-width: 100%;
  display: block;
}

a,
a:hover {
  text-decoration: none;
  color: inherit;
}

select {
  color: inherit;
  cursor: pointer;
}

button {
  color: inherit;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
}

body {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.main-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
}

.main {
  flex-grow: 1;
}

/* Shared 1450px container — used by header, footer, and hero */
.container-small,
.container-fluid {
  max-width: 1450px;
  margin: 0 auto;
}

@media (max-width: 1450px) {
  .container-small,
  .container-fluid {
    padding-left: var(--spacing-desktop-x);
    padding-right: var(--spacing-desktop-x);
  }
}

@media (max-width: 1199px) {
  .container-small,
  .container-fluid {
    padding: 0 16px;
  }
}

.container-large {
  max-width: 1812px;
  padding: 0 10px;
  margin: 0 auto;
}

.popular-services .listing-tabs-group,
.search-box-banner ul,
.css-equal-content,
.css-equal-heights {
  display: flex;
  display: -webkit-flex;
}

.css-equal-content {
  color: red;
  float: left;
}

.product-detail-head .search-btn .search-button:hover,
.product-detail-head .search-btn .search-button,
.review-sec .search-btn .search-button:hover,
.review-sec .search-btn .search-button,
.faq-section .faq-title>a:not(.collapsed):after,
.faq-section .faq-title>a:after,
.listing-item:hover .fav-icon i,
.listing-item .listing-img .fav-item,
.popular-services .listing-tabs-group ul li a img,
.popular-services .listing-tabs-group ul li a span,
.popular-services .listing-tabs-group ul li a:hover img,
.popular-services .listing-tabs-group ul li a:hover,
.popular-services .listing-tabs-group ul li a.active img,
.popular-services .listing-tabs-group ul li a,
.search-btn .search-button:hover,
.search-btn .search-button,
.header .header-navbar-rht .nav-item .header-reg:hover,
.header .header-navbar-rht .nav-item .header-reg,
.header .header-navbar-rht .nav-item .header-login:hover,
.header .header-navbar-rht .nav-item .header-login,
.header.fixed,
.header,
.contact-btn:hover,
.contact-btn,
.listing-item .listing-content .listing-button .btn-order.button-right::after {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.listview-car .card .card-body .listing-details-group ul li span img,
.listview-car .card .card-body .blog-list-head .blog-list-rate h6,
.product-detail-head .details-btn a,
.review-sec .reviewbox-list-rating p,
.contact-section .contact-info-area .single-contact-info i,
.serve-form .form-group .button-notific,
.pagination,
.login-wrapper .loginbox .login-auth,
.login-wrapper .loginbox .login-left,
.popular-slider-group .owl-carousel .owl-next i,
.popular-slider-group .owl-carousel .owl-prev i,
.listing-item .listing-content .listing-button .btn-order,
.listing-item .listing-img .fav-item .fav-icon,
.listing-item .listing-img .fav-item .featured-text,
.popular-services .owl-carousel .owl-next i,
.popular-services .owl-carousel .owl-prev i,
.popular-services .listing-tabs-group ul li a,
.popular-services .listing-tabs-group {
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
}

.car-listing .filter-box {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: 300px;
}

.car-listing .filter-box>div {
  border-radius: 8px;
  box-shadow: 0px 0px 10px var(--color-text)3b;
  border: 1px solid #ddd;
  background-color: #fff;
}

.car-listing .filter-box form {
  padding: 20px 20px 0;
}

.car-listing .filter-box>button {
  box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, .5);
  background-color: var(--color-blue);
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
  margin-bottom: 16px;
}

.car-listing .filter-box button:focus {
  box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, .5) !important;
}

.car-listing .filter-box button:active {
  box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, .5);
  background-color: var(--color-blue-hover);
  color: #fff;
}

.car-listing .filter-box .accordion-item {
  border: none;
}

.car-listing .filter-box .filter-range {
  padding: 0 24px;
}

.table tbody td a {
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}

.listview-car .card .card-body .blog-list-head,
.product-detail-head .detail-page-head,
.blog-section .blog-content .meta-item {
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
}

.grid-listview ul li a,
.car-listing .pagination .previtem a,
.car-listing .pagination .nextlink a,
.list-btn .btn-filters,
.modal .payment-success .check,
.payment-method ul li a,
.modal .available-for-ride,
.car-details-slider.owl-carousel .owl-nav .owl-prev,
.car-details-slider.owl-carousel .owl-nav .owl-next,
.listing-feature ul li span,
.specification-card .feature-img,
.share-postsection .sharelink .share-img,
.plan-selected,
.pagination .pagination .previtem a,
.pagination .pagination .nextlink a,
.why-choose .card .card-body .choose-img,
.listing-item .listing-content .listing-details-group ul,
.table .dropdown-item,
.table tbody td a.btn-action-icon,
.fi-icon,
.hi-icon,
.footer-social-links .nav,
.footer .footer-contact .footer-contact-info .footer-address span,
.align-center {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}

.booking-list li {
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
}

.order-confirmation .place-order-btn a,
.listing-item .listing-content .listing-features .listing-title a,
.listing-item .listing-content .listing-features .author-img img,
.services .services-group .services-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.pricing-section .price-card .price-details ul .price-uncheck,
.pricing-section .price-card .price-details ul .price-check,
.table tbody td a,
.footer-social-widget .nav-social,
.footer .footer-contact .footer-contact-info .update-form .btn .feather-send,
.footer .footer-contact .footer-contact-info .footer-address {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.payment-method ul,
.review-sec .review-card .review-header-group,
.review-sec .review-header,
.blog-section .blog-content .blog-list-date .meta-item-list,
.blog-section .blog-content .blog-list-date,
.serve-form .form-group,
.error-page,
.content-page-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
}

.listview-car .card .card-body .listing-details-group ul,
.order-confirmation .order-confirm-box .confirmation-title,
.order-confirmation .section-title,
.modal .grand-total,
.modal .booking-info.service-tax ul li,
.listing-item .listing-content .listing-location-details,
.listing-item .listing-img .fav-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}

.listview-car .card .card-body .listing-details-group ul li span img,
.listview-car .card .card-body .listing-details-group ul li,
.listview-car .card .card-body .blog-list-head .blog-list-rate h6,
.listview-car .card .card-body .blog-list-head .blog-list-title .title-bottom h6,
.sorting-div .product-filter-group .grid-listview ul,
.sorting-div .product-filter-group .sortbyset,
.sorting-div .product-filter-group,
.list-btn .filter-list li ul li,
.list-btn .filter-list .short-filter,
.list-btn .filter-list,
.order-confirmation .order-confirm-box .order-car,
.payment-method .payment-checkbox label,
.booking-details .booking-form .payment-btn,
.modal .modal-footer a,
.modal .booking-info.pay-amount label,
.modal .booking-info.seat-select label,
.review-list-rating li,
.review-list-rating,
.listing-feature ul li,
.product-detail-head .details-btn a,
.product-detail-head .details-btn,
.product-detail-head .detail-page-head .camaro-location .camaro-locations-inner,
.product-detail-head .detail-page-head .camaro-location,
.product-detail-head .detail-page-head .list-rating,
.product-detail-head .detail-page-head,
.testimonials-section .review-box .review-details .list-rating .list-rating-star,
.testimonials-section .review-box,
.review-sec .sidebar-form,
.review-sec .review-card .review-header-group .review-widget-header,
.review-sec .review-card .review-header-group,
.review-sec .reviewbox-list-rating p,
.blogdetails-pagination ul,
.tag-list .tags,
.tag-list,
.blogdetail-content .card-header,
.bloglistleft-widget .post-author,
.bloggrid-sidebar .post-author,
.blogbanner-content .post-author,
.blogbanner-content ul,
.blog-section .rightsidebar .card h4,
.blog-section .blog-content .blog-list-date .meta-item-list li .post-author,
.blog-section .blog-content .meta-item li .post-author,
.blog-section .blog-content .meta-item,
.contact-section .contact-info-area .single-contact-info i,
.serve-form .form-group .button-notific,
.privacy-section .terms-policy ul li,
.pagination,
.login-wrapper .loginbox .login-auth .login-auth-wrap .sign-group,
.login-wrapper .loginbox .login-auth,
.user-app-group .userapp-heading .download-btn,
.popular-slider-group .owl-carousel .owl-next i,
.popular-slider-group .owl-carousel .owl-prev i,
.listing-item .listing-content .listing-button .btn-order,
.listing-item .listing-content .listing-location-details .listing-price .item-prices h6,
.listing-item .listing-content .listing-details-group ul li,
.listing-item .listing-img .fav-item .fav-icon,
.listing-item .listing-img .fav-item .featured-text,
.popular-services .owl-carousel .owl-next i,
.popular-services .owl-carousel .owl-prev i,
.popular-services .listing-tabs-group ul li a,
.form-group-wrapp,
.footer .footer-contact .footer-contact-info .footer-address .addr-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}

.sorting-div .product-filter-group {
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: flex-end;
}

.invoice-section .invoice-item-bill ul li:first-child,
.table .dropdown-item,
.footer-social-widget .nav-social {
  justify-content: right;
}

.listview-car .card .card-body .blog-list-head,
.product-detail-head .detail-page-head,
.blog-section .blog-content .meta-item {
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
}


/* ──────────────────────────────────────────────────────────────────────────
   Global scrollbar 
   ────────────────────────────────────────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-blue-dark) transparent;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--color-blue-dark);
  border-radius: var(--radius-full);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--color-blue);
}

*::-webkit-scrollbar-button {
  display: none !important;
}

/* Section Container */
.section-container {
  max-width: 1450px;
  margin: 0 auto;
  padding: 0;
}
@media (max-width: 1199px) {
  .section-container {
    padding: 0 16px;
  }
}