/*
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 {
  /* Primary palette */
  --color-blue:        #3f75c9;    /* primary accent (buttons, links, badges) */
  --color-blue-dark:   #04579b;    /* section title accents, dark blue */
  --color-blue-light:  #eef5ff;    /* section backgrounds */
  --color-green:       #4f9c66;    /* discount banner, CTA left panel */
  --color-yellow:      #ffd753;    /* highlights, CTA outer bg */

  /* Neutral palette */
  --color-text:        #2b2b2b;    /* primary body text, dark headings */
  --color-text-dark:   #191918;    /* near-black text */
  --color-text-light:  #787878;    /* secondary / muted text */
  --color-bg-body:     #FFFFFF;    /* page background */
  --color-bg-light:    #f4f4f4;    /* card/section light bg */
  --color-bg-section:  #eef5ff;    /* light-blue section bg */
  --color-border:      #e9e9e9;    /* card borders */
  --color-white:       #ffffff;

  /* Extended neutral palette */
  --color-black:       #000000;
  --color-dark-bg:     #1f2529;    /* hero section dark background */
  --color-bg-input:    #f9f9f9;    /* input background */
  --color-gray:        #5a5a5a;    /* category button active */
  --color-gray-muted:  #696969;    /* muted gray text */
  --color-gray-light:  #f4f7ff;    /* FAQ / light section bg */
  --color-red:         #d85151;    /* sale badge, error states */
  --color-red-dark:    #af2526;    /* red hover state */
  --color-error:       #d85151;    /* form validation error (alias of --color-red) */
  --color-green-toggle: #34a853;   /* CASCO toggle active */

  --color-bg-card:     #ffffff;
  --color-bg-alt:      #f6f7f9;
  --color-bg-muted:    #e7eaee;
  --color-text-muted:  #6c7681;

  /* Border / overlay colours */
  --color-border-input:   rgba(0, 0, 0, 0.14);  /* input border */
  --color-border-btn:     rgba(10, 9, 8, 0.10); /* slider nav button border (Figma) */
  --color-dot-on-dark:    rgba(255, 255, 255, 0.35); /* slider dots over dark bg */
  --color-divider:        rgba(0, 0, 0, 0.12);   /* vertical divider */
  --color-overlay-dark:   rgba(0, 0, 0, 0.70);   /* dark overlay bg */
  --color-overlay-mid:    rgba(0, 0, 0, 0.13);   /* mid-weight overlay */

  /* Shadows */
  --shadow-card:       0 2px 4px rgba(39, 39, 39, 0.10);
  --shadow-btn:        0px 4px 2px rgba(225, 225, 225, 0.25);

  /* Typography */
  --font-primary:      'Montserrat', sans-serif;
  --font-secondary:    'Inter', sans-serif;
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;

  /* Font size scale (px values from Figma) */
  --font-size-xxs:  12px;
  --font-size-xs:   14px;
  --font-size-sm:   16px;
  --font-size-md:   18px;
  --font-size-lg:   20px;
  --font-size-xl:   24px;
  --font-size-2xl:  28px;
  --font-size-3xl:  32px;
  --font-size-4xl:  46px;

  /* Border radii */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 64px;

  /* 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:  12px;
  --radius-input: 8px;
  --radius-badge: 6px;
  --radius-modal: 16px;

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

  /* Slider controls (Figma exact values) */
  --slider-btn-size:        50px;
  --slider-btn-padding:     20px;
  --slider-btn-icon-size:   20px;
  --slider-btn-icon-opacity: 0.5;
  --slider-controls-gap:    26px;
  --slider-dots-gap:        6px;
  --slider-dot-size:        8px;
  --slider-dot-active-w:    30px;
}


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-size: 18px;
  overflow-x: hidden;
}

.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 #2A292B3b;
  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: #3f75c9;
  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: #2e5caa;
  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);
}