/*
Theme Name:   Carento Child
Description:  Child theme for Carento
Author:       Your Name
Template:     carento
Version:      1.0.0
Text Domain:  carento-child
*/

/* =========================================================
ZERO MAX — Global Styles
========================================================= */

/* ── CSS Variables ── */
:root {
  --orange:       rgba(255, 112, 15, 1);
  --orange-dark:  #c5621a;
  --orange-glow:  rgba(232, 119, 34, 0.18);
  --bg:           #0a0a0a;
  --bg-2:         #111111;
  --bg-3:         #181818;
  --bg-4:         #1e1e1e;
  --border:       rgba(255,255,255,0.07);
  --text:         #F4F4F6;
  --text-muted:   #777;
  --white:        #ffffff;
  --radius:       12px;
  --radius-lg:    20px;
  --transition:   .25s ease;
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Outfit', sans-serif;
  background-color: var(--white);
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Oxanium', sans-serif;
  color: var(--white);
  font-weight: 700;
  line-height: 1.2;
}

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ── Text / Color Utilities ── */
.text-orange { color: var(--orange) !important; }
.main-heading .highlighted-text {font-size: inherit; color: var(--orange); font-family: inherit;}

/* ── Section Spacing ── */
.main-section {
  padding: 80px 0;
}

/* ── Main Heading Structure ── */
.main-heading {
  display: flex;
  flex-direction: column;
}
.main-heading h2 {
  font-size: 56px;
  font-weight: 700;
  margin-bottom: .6rem;
}

/* ── Section Sub Text ── */
.section-sub {
  color: var(--text-muted);
  font-size: 20px;
}

/* ── Buttons ── */
.btn {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50px;
  padding: .55rem 1.6rem;
  font-family: 'Oxanium', sans-serif;
  font-weight: 700;
  font-size: 20px;
  transition: var(--transition);
  display: inline-flex;
  gap: 1rem;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.btn-orange {
  position: relative;
  background: #ff700f;
  border: 2px solid var(--orange);
  transition: var(--transition);
}

.btn-orange:hover {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
  color: #fff;
}

.btn-outline-orange,
.btn-orange-outline {
  background: transparent;
  color: var(--orange);
  border: 2px solid var(--orange);
  border-radius: 50px;
  padding: .55rem 1.6rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: .9rem;
  transition: var(--transition);
}
.btn-outline-orange:hover,
.btn-orange-outline:hover {
  background: var(--orange);
  color: #fff;
}

.btn-icon {
  background: #fff;
  border: 1px solid #E3E3E8;
  color: #FF700F;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  padding: 0;
  transition: var(--transition);
  flex-shrink: 0;
}
.btn-icon:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}


/* =========================================================
NAVBAR
========================================================= */

.navbar-brand {
  font-family: 'Oxanium', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.brand-zero { color: var(--white);font-size: 64px;font-weight: bold;font-family: 'Oxanium', sans-serif; }

.nav-link {
  color: var(--text) !important;
  font-weight: 500;
  font-size: .9rem;
  padding: 0 .75rem;
  transition: color var(--transition);
}

.navbar-toggler {
  border-color: var(--border);
}
.navbar-toggler-icon {
  filter: invert(1);
}

header{
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 999;
}

.top-header{background-color: rgba(255, 112, 15, 1);padding: 12px 0;}
.bottom-header{padding: 12px 0;}
.bottom-header ul{list-style: none; padding: 0; margin: 0;}
.bottom-header ul li{display: flex;justify-content: center;align-items: center;padding:.6rem 1rem;border: solid 1px rgba(121, 127, 140, 1);border-radius: 12px;background: rgba(255, 255, 255, 0.1);backdrop-filter: blur(12px);}
.bottom-header ul li a{color: var(--white);font-family: Oxanium;line-height: 1;font-weight: 500; font-size: 18px; font-weight: 600;padding: 0;}
.bottom-header ul li a:hover{color: var(--bg);}

/* =========================================================
BANNER / HERO
========================================================= */
.banner-section {
  position: relative;
  background: url(assets/images/banner.jpg);
  overflow: hidden;
  padding-bottom: 0;
  background-position: bottom center;
  background-repeat: no-repeat;
  padding: 10rem 0 3rem 0 !important;
  background-size: 100%;
}

.banner-section .usps {
  display: flex !important;
  gap:1rem;
  margin:1rem auto;
  justify-content: center;
}
.banner-section .usps li svg{
  width:25px !important;
}
.banner-section .usps li{
  display: flex !important;
  color:#fff;
  font-size:16px;
  align-items:center;
  gap:.5rem
}

/* Subtle grid pattern */
.banner-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
  linear-gradient(rgba(232,119,34,.04) 1px, transparent 1px),
  linear-gradient(90deg, rgba(232,119,34,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.banner-overlay {
  position: absolute;
  inset: 0;
  background: #00000082;
  pointer-events: none;
}

.banner-section .container { padding-top: 90px; padding-bottom: 40px; }

.banner-heading {
  font-size: 60px;
  font-weight: 600;
  color: #F4F4F6;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin-bottom: 11rem;
  margin-top: 0;
}

.banner-sub {
  color: #F4F4F6;
  font-size: 25px;
  margin-bottom: 1rem;
  max-width: 700px;
  font-weight: 400;
}

/* Cars Strip */
.cars-strip {
  background: linear-gradient(180deg, transparent 0%, rgba(10,10,10,1) 100%);
  padding: 30px 0 0;
  margin-top: 30px;
}
.cars-strip-row { gap: 0; }
.strip-car {
  width: 100%;
  filter: drop-shadow(0 0 20px rgba(232,119,34,.2));
  transform: translateY(0);
  transition: transform .3s ease;
}
.strip-car:hover { transform: translateY(-6px); }


/* =========================================================
BADGES SECTION
========================================================= */
.badges-section {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 50px 0;
}

.badge-card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1rem;
  transition: border-color var(--transition), transform var(--transition);
  height: 100%;
}
.badge-card:hover {
  border-color: var(--orange);
  transform: translateY(-4px);
}
.badge-icon {
  font-size: 1.8rem;
  color: var(--orange);
  display: block;
  margin-bottom: .75rem;
}
.badge-card p {
  font-size: .82rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}


/* =========================================================
LISTINGS SECTION
========================================================= */
.car-card.car-wrap {
  border: 1px solid #f4f4f6;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
	background-color:#eaeaea;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.car-card.car-wrap .car-card-brand {
    padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 20vh;
  gap: 1rem;
}
.borderGrey{border-top: 1px solid #eaeaea;}
.car-card-brand .car-card-img1 {
  
}
.car-card-brand .car-card-img2 {

  aspect-ratio: 16/8;
  object-fit: contain;
  transition: transform .4s ease;
}
.car-card:hover .car-card-brand img { transform: scale(1.04); }

.brand-wrap {
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 20vh;
  gap: 1rem;
  background: linear-gradient(
    135deg,
    #ffffff 0%, #c4c4c4 25%,
    #a9a9a9 45%, #555 60%,
    #a5a5a5 80%, #ffffff 100%
  );
  box-shadow:
  inset 5px 1px 4px rgba(255,255,255,0.15),
  4px 5px 11px rgba(0,0,0,0.6)
}

.filter-section {
  background: transparent;
  padding-top: 0;
  margin-top: -35px;
}

.section-header .main-heading h2 { margin-bottom: .3rem; }

/* Filter Tabs */
.filter-wrap{
  top: -2%;
  z-index: 999;
  transition: .3s ease;
}

.filter-tabs {
  display: flex;
  gap: .5rem;
  padding: .4rem;
  border-radius: 30px;
  background: #ffffff21;
  backdrop-filter: blur(15px);
  border: solid 1px #939393;
}

.filter-btn {background: transparent;border: none;color: var(--text-muted);border-radius: 50px;padding: .35rem 1.1rem;font-size: .85rem;font-family: 'Outfit', sans-serif;font-weight: 500;cursor: pointer;transition: var(--transition);}

.sort-btn{border: solid 1px #fff;background: #ffffff21;
  backdrop-filter: blur(15px); }
  .sort-btn svg{margin-left: 1rem;transition: .5s ease}
  .sort-btn.desc svg{transform: rotate(180deg);}

  .filter-btn:hover path,
  .filter-btn.active path{
    fill: #fff
  }

  .filter-btn:hover,
  .filter-btn.active {
    background: #ff700f;
    border-color: #ff700f;
    color: #fff;
  }

  .filter-btn:hover img,
  .filter-btn.active img{
    filter: brightness(0) invert(1);
  }
/* Car Card */
.car-card {
  border: 1px solid #E3E3E8;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.car-card:hover {
  border-color: var(--orange);
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(232,119,34,.12);
}

.car-card-badge {
  position: absolute;
  top: 20px;
  padding: 0 1rem;
  z-index: 2;
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.car-card-badge .badge-1{
  background: #2e80cf;
  color: #fff;
  font-size: .72rem;
  padding: .2rem .65rem;
  border-radius: 50px;
  letter-spacing: .04em;
}

.car-card-badge .badge-2{
  border: solid 1px #383838;
  color: #8A8A8A;
  font-size: .72rem;
  padding: .2rem .65rem;
  border-radius: 50px;
  letter-spacing: .04em;
}

.car-card-img {
  overflow: hidden;
  border-bottom:solid 1px #E3E3E8;
}
.car-card-img img {
  width: 100%;
  aspect-ratio: 16/8;
  object-fit: contain;
  transition: transform .4s ease;
}
.car-card:hover .car-card-img img { transform: scale(1.04); }

.car-card-body { padding: 1.1rem 1.2rem 1.3rem; }

.car-name {
  font-size: .95rem;
  font-weight: 700;
  color: #121212;
  margin: 0;
}

.car-km {
  font-size: .78rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.car-km i{
  color: #FFA703;
}

.car-specs {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.car-specs span {
  font-size: .78rem;
  background: #F4F4F6;
  color: var(--text-muted);
  padding: 8px 16px;
  border-radius: 30px;
}

.car-price-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: .75rem;
  background: #F4F4F6;
  padding: 1rem;
  border-radius: 14px;
  flex-wrap: wrap;
}

.car-price-row small{
  color: #8A8A8A;
  font-size: 16px;
  display: block;
}

.car-price-row .months {margin-top:.5rem}
.car-price-row .months span{min-width:95px;text-align:center;color:#797F8C;border:solid 1px #E3E3E8;border-radius:30px;padding:.2rem 0;cursor: pointer;}
span.attr-value.active {
  background: #2e80cf;
  color: #fff;
}
.price-main {
  font-family: 'Outfit', sans-serif;
  font-size: 26px;
  font-weight: 400;
  color: var(--text-muted);
}

.price-main span{
  font-family: 'Oxanium', sans-serif;
  font-weight: 600;
  font-size: 26px;
  color: #2e80cf;
}

.price-cash {
  font-family: 'Oxanium', sans-serif;
  font-size: 26px;
  font-weight: 600;
  color: #121212;
}

.car-card-actions .btn-icon {
  width: 70px;
  height: 70px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.car-card-actions .btn-icon i {
  line-height: 1;
  display: block;
  font-size: 30px;
}
/* =========================================================
PROCESS SECTION
========================================================= */
.process-section {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.process-section .main-heading { align-items: center; }
.process-section .main-heading h2 { text-align: center; }

.process-card {
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 1.8rem;
  position: relative;
  transition: border-color var(--transition), box-shadow var(--transition);
  min-height: 700px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
}
.process-card:before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #00000044;
}
.process-card:hover {
  border-color: rgba(232,119,34,.4);
  box-shadow: 0 8px 32px rgba(232,119,34,.08);
}
.process-card--active {
  border-color: var(--orange);
  box-shadow: 0 0 40px rgba(232,119,34,.15);
}

.process-num {
  font-family: 'Oxanium', sans-serif;
  line-height: 1;
  letter-spacing: -.02em;
}

.process-card .content {
  position: relative;
  background: rgba(8, 8, 8, 0.65);
  padding: 32px;
  border-radius: 16px;
  border: solid 1px #383838;
  backdrop-filter: blur(64px);
}

.process-card .content .process-num{
  position:absolute;
  right:15px;
  top:20px;
  font-size: 40px;
  color:#F4F4F6;
  font-weight:700;
  opacity:30%;
}
.process-title{font-size:26px;font-weight:600;  margin-bottom: .5rem;}
.process-desc{color:#f4f4f6;font-weight:300;margin: 0;}


/* =========================================================
WHY SECTION
========================================================= */
.why-section { background: var(--bg-2); }
.why-section h2{width: 70%;}
.why-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.why-list li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.why-icon {
  color: var(--orange);
  font-size: 1.2rem;
  margin-top: .15rem;
  flex-shrink: 0;
}
.why-list strong {
  display: block;
  font-family: 'Oxanium', sans-serif;
  font-size: .95rem;
  color: var(--white);
  margin-bottom: .2rem;
}
.why-list p {
  font-size: .85rem;
  color: var(--text-muted);
  margin: 0;
}

.why-car-showcase {
  position: relative;
  display: inline-block;
  width: 100%;
}
.why-car-img {
  border-radius: var(--radius-lg);
  width: 100%;
}

.why-section .why-car-showcase .tag-bubble {position: absolute;background: rgba(255, 255, 255, 0.8);text-align:center;border: 1px solid rgba(255, 255, 255, 0.8);padding: .8rem 1.6rem !important;border-radius: 16px;width:300px;box-shadow: 10px 8px 30px rgba(37, 37, 37, 0.25);backdrop-filter: blur(71px);transition: .5s ease;}
.why-section .why-car-showcase .tag-bubble h3{color: #121212;font-family: 'Oxanium', sans-serif;font-size: 22px;font-weight: 600;}
.why-section .why-car-showcase .tag-bubble p{opacity: 0;visibility: hidden;max-height: 0;overflow: hidden;transition: opacity 0.3s ease, max-height 0.3s ease, visibility 0.3s ease;margin: 0}
.why-section .why-car-showcase .tag-bubble:hover p{opacity: 1;visibility: visible;max-height: 200px}
.tag-1 { top: 25%; left: 15%; }
.tag-2 { top: 5%; left: 50%; }
.tag-3 { top: 27%; right: -5%; }
.tag-4 { top: 55%; right: 25%; }
.tag-5 { top: 50%; left: -4%; }



/* =========================================================
FAQ SECTION
========================================================= */
.faq-section {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.faq-accordion .accordion-item {
  background: var(--bg-3);
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  margin-bottom: .75rem;
  overflow: hidden;
}
.faq-accordion .accordion-item:last-child { margin-bottom: 0; }

.faq-section .faq-accordion .accordion-button {
  background: var(--bg-3);
  color: var(--white) !important;
  font-family: 'Oxanium', sans-serif;
  font-weight: 400;
  font-size: 22px;
  padding: 1rem 1.25rem;
  box-shadow: none !important;
}
.faq-section .faq-accordion .accordion-button:not(.collapsed) {
  background: var(--bg-4);
  color: var(--white);
}
.faq-accordion .accordion-button::after {
/*   filter: brightness(0) invert(1); */
}
.accordion-button::after {
 top: 0px !important;
  right: 10px;
  position: relative !important;
  z-index: 12;
}
.faq-accordion .accordion-body {
  background: #141414;
  color: var(--text-muted);
  font-size: .87rem;
  padding: .9rem 1.25rem;
  border-top: 1px solid #383838;
  box-shadow: 8px 8px 26px rgba(0, 0, 0, 0.05);
}
.accordion-collapse .accordion-body {margin-bottom: 0px !important;}
.accordion-collapse {border-bottom: 0px !important;}
.accordion-button.collapsed{border-bottom: 0px  !important;}
/* =========================================================
BLOGS SECTION
========================================================= */
.blogs-section { background: var(--bg); }
.blogs-section .main-heading { align-items: center; }
.blogs-section .main-heading h2 { text-align: center; }

.blog-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.blog-card:hover {
  border-color: var(--orange);
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(232,119,34,.1);
}
.blog-img { position: relative; overflow: hidden; }
.blog-img img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform .4s ease;
}
.blog-card:hover .blog-img img { transform: scale(1.05); }

.blog-category {
  background: #383838;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: .2rem .65rem;
  border-radius: 50px;
  letter-spacing: .04em;
}

.blog-body { padding: 1.2rem; }

.blog-date {
  font-size: .78rem;
  color: var(--text-muted);
  margin-bottom: .5rem;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.blog-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: .6rem;
  line-height: 1.35;
}
.blog-excerpt {
  font-size: .85rem;
  color: var(--text-muted);
  margin-bottom: .5rem !important;
}
.blog-link {
  color: var(--orange);
  font-size: .85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  transition: gap var(--transition);
}
.blog-link:hover { gap: .6rem; }


/* =========================================================
FOOTER
========================================================= */
.site-footer {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  padding: 70px 0 30px;
}

.footer-brand {
  font-family: 'Oxanium', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.footer-about {
  font-size: .88rem;
  color: var(--text-muted);
  max-width: 340px;
}

.footer-socials a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 1rem;
  transition: var(--transition);
}
.footer-socials a:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

.footer-heading {
  font-family: 'Oxanium', sans-serif;
  font-size: .95rem;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 1.2rem;
  margin-top: 2.2rem;
  letter-spacing: .06em;
}

.footer-links {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.footer-links a {
  color: var(--text-muted);
  font-size: .88rem;
  transition: color var(--transition);
}
.footer-links a:hover { color: var(--orange); }

.footer-contact-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: .88rem;
  color: var(--text-muted);
}
.footer-contact-list i {
  color: var(--orange);
  margin-top: .15rem;
  flex-shrink: 0;
}

.footer-hr {
  border-color: var(--border);
  margin: 2rem 0 1.5rem;
}
.footer-bottom {
  font-size: .82rem;
  color: var(--white);
  border: solid 1px #383838;
  border-right: none;
  border-left: none;
}


.footer-bottom p, .footer-bottom a {
  font-size: .82rem;
  color: var(--white);
}
.top-header .logo{display: none}

/* =========================================================
RESPONSIVE TWEAKS
========================================================= */
@media (max-width: 991px) {
  .main-section { padding: 60px 0; }
  /*.tag-1, .tag-2, .tag-3 { display: none; }*/
}

@media (max-width: 767px) {
  .main-section { padding: 50px 0; }
  .banner-section { background-size:cover; padding: 10rem 0 3rem 1rem !important}
  .banner-section .container { padding-top: 70px; }
  .banner-heading { font-size: 2rem;margin-bottom: 3rem;text-align:left; }
  .bottom-header .logo{display: none}
  .top-header .logo{display: block;width: 150px}
  .top-header .top-head-left .link{display: none}
  .filter-tabs{width: 100%;position: relative !important;flex-wrap: nowrap;overflow-x: auto;padding: .5rem 1rem !important;margin-bottom:1rem;}
  .filter-tabs::-webkit-scrollbar {display: none;}
  .process-card { padding: 1.4rem; }
  .banner-section .usps{/*flex-direction: column;*/;flex-wrap: wrap;justify-content: flex-start;}
  .filter-btn{padding:10px;min-width:7rem;display: flex;justify-content: center;align-items:center}
  .sort-btn{padding:10px;min-width:10rem;display: flex;justify-content: center;align-items:center}
  .filter-btn img{object-fit:contain;}
  .category-filter{display:none}
  .car-card-actions .btn-icon{width: 50px;height: 50px}
  .car-card-actions .btn-icon i{font-size: 25px;}
  .price-main,.price-main span,.price-cash{font-size: 18px}
  .main-heading h2{font-size: 2rem !important}
  .banner-section .usps li{font-size: 13px;letter-spacing:0px;width: 47.75%;}
	.banner-section .usps li:nth-child(6){order:7}
  .process-card{min-height: 600px}
  .why-section .why-car-showcase .tag-bubble h3{font-size: 14px;letter-spacing: -1px}
  .why-section .why-car-showcase .tag-bubble p{font-size: 10px}
  .why-section .why-car-showcase .tag-bubble{width: 150px;padding: .5rem .3rem !important}

  .offcanvas-btn {
    border-radius: 10px;
    padding:0;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .offcanvas-btn svg{
    fill:#fff !important;
    width: 40px;
    margin:0;
    padding:0;
  }

  div#offcanvasWithBothOptions {
    background: #141414;
  }

  .offcanvas-header {
    border: none;
  }

  .offcanvas a.nav-link {
    font-size: 25px !important;
    text-align: left;
    align-items: start;
    font-weight:100 !important;
  }

  .offcanvas-body nav {
    margin-top: 5rem;
  }
  .offcanvas-header .btn-close{
    background:var(--orange)
  }

  .offcanvas-body a.link {
    font-size: 20px;
    margin: 1rem 0;
    color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
  .offcanvas-body a.link path{
    stroke:var(--orange)
    
  }
  .offcanvas-body a.link i{
    color:var(--orange);
  }

}

@media (max-width: 575px) {
  .main-section { padding: 40px 0; }
  .car-card-actions .btn-orange { font-size: .8rem; padding: .45rem 1rem; }
}


@media (max-width: 1600px) {
  .banner-section .usps li{
    font-size: 13px;
    letter-spacing: 0px;
  }
  .main-section p{font-size: 14px}
  .sort-btn{font-size: 14px;width: 17%}
  .car-price-row .months span{min-width: 70px;font-size: 14px}
  .filter-wrap{gap: 4rem;}
  .filter-section{margin-top: -25px}
  .why-section .why-car-showcase .tag-bubble{width: 200px}
  .why-section .why-car-showcase .tag-bubble h3,.faq-section .faq-accordion .accordion-button{font-size: 18px}
  .main-heading h2{font-size: 50px}
  .btn{font-size: 16px}
  .why-section h2{width: 100%}
  .car-card-actions .btn-icon{width: 50px; height: 50px}
  .price-main span,.price-main,.price-cash{font-size: 20px}
  .car-card-actions .btn-icon i{font-size: 30px;}
  :root { --left-to-right-nil: polygon(0 0, 0 0, 0 100%, 0 100%); --left-to-right-fil: polygon(0 0, 100% 0, 100% 100%, 0 100%); --right-to-left-nil: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); --right-to-left-fil: polygon(100% 0, 0 0, 0 100%, 100% 100%); --top-to-bottom-nil: polygon(100% 0, 0 0, 0 0, 100% 0); --top-to-bottom-fil: polygon(100% 0, 0 0, 0 100%, 100% 100%); --bottom-to-top-nil: polygon(0 88%, 100% 88%, 100% 100%, 0% 100%); --bottom-to-top-fil: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
  img.wow { clip-path: var(--bottom-to-top-nil); transition: all 2s ease 0.25s; transform: translateY(40%); opacity: 0; }
  img.animated { clip-path: var(--bottom-to-top-fil); transform: translateY(0px); opacity: 1; }
  
  
  .trans-anim li {transform: translateY(20%);opacity: 0;transition: 1s;}
  .trans-anim.animated li {transform: none;opacity: 1;}
  .trans-anim li:nth-child(1){transition-delay: 0.2s;}
  .trans-anim li:nth-child(2){transition-delay: 0.4s;}
  .trans-anim li:nth-child(3){transition-delay: 0.6s;}
  .trans-anim li:nth-child(4){transition-delay: 0.8s;}
  .trans-anim li:nth-child(5){transition-delay: 1s;}
  .trans-anim li:nth-child(6){transition-delay: 1.2s;}
  .trans-anim li:nth-child(7){transition-delay: 1.4s;}
  .trans-anim li:nth-child(8){transition-delay: 1.6s;}
  .trans-anim li:nth-child(9){transition-delay: 1.8s;}
  .trans-anim li:nth-child(10){transition-delay: 1.9s;}
  .trans-anim li:nth-child(11){transition-delay: 2s;}
  .trans-anim li:nth-child(12){transition-delay: 2.1s;}
  .trans-anim li:nth-child(13){transition-delay: 2.2s;}
  .trans-anim li:nth-child(14){transition-delay: 2.3s;}
}

@media only screen and (min-width: 1200px) {.container {max-width: 83.333vw;padding: 0}}

@media only screen and (min-width: 1600px) {html {font-size: 120%;-webkit-text-size-adjust: 100%;}}

@media only screen and (min-width: 1825px) {html {font-size: 130%;-webkit-text-size-adjust: 100%;}}

@media only screen and (min-width: 2030px) {html {font-size: 160%;-webkit-text-size-adjust: 100%}}

@media only screen and (min-width: 2700px) {html {font-size: 200%;-webkit-text-size-adjust: 100%;}}






/* ─────────────────────────────────────────
   BACKDROP — same blur+dark as popup.html
───────────────────────────────────────── */
.modal-backdrop {
  background-color: #000 !important;
  opacity: .80 !important;
}
/* backdrop-filter needs a wrapper trick with Bootstrap */
#carmodal {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ─────────────────────────────────────────
   DIALOG SIZE + ENTRANCE ANIMATION
───────────────────────────────────────── */

/* Override Bootstrap's default slide — use popup.html's scale+rise */
#carmodal.fade .modal-dialog {
  transform: scale(.93) translateY(16px);
  opacity: 0;
  transition: transform .35s cubic-bezier(.22,.68,0,1.2),
  opacity   .25s ease;
}

#carmodal.show .modal-dialog {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* ─────────────────────────────────────────
   MODAL CONTENT SHELL  (.car-modal in popup.html)
───────────────────────────────────────── */
#carmodal .modal-content {
                              /* --bg-2 */
  border: none;         /* --border-light */
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.7),
  0 0 0 1px rgba(232,119,34,.06);
  padding: 0;
}

/* ─────────────────────────────────────────
   CLOSE BUTTON  (.btn-close-modal in popup.html)
───────────────────────────────────────── */
.car-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #181818;                              /* --bg-3 */
  border: 1px solid rgba(255,255,255,0.12);
  color: #888;                                      /* --text-muted */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  font-size: 1rem;
  line-height: 1;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.car-modal-close:hover {
  background: #1e1e1e;                              /* --bg-4 */
  color: #fff;
  border-color: rgba(255,255,255,.22);
}

/* ─────────────────────────────────────────
   TWO-COLUMN GRID
───────────────────────────────────────── */
.car-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* ─────────────────────────────────────────
   LEFT PANEL  (.modal-left in popup.html)
───────────────────────────────────────── */
.car-modal-left {
  padding: 1.6rem;
  padding-right: .5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.car-modal-left .car-card-body{padding: 0}
.car-modal-left .car-card-body .car-price-row{border: solid 1px rgba(56, 56, 56, 1);}

/* Plan Tabs  (.plan-tabs / .plan-tab in popup.html) */
.car-plan-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: 20px;
  gap: 2px;
}
.car-plan-tab {
  border: none;
  background: transparent;
  color: #888;
  font-family: 'Outfit', sans-serif;
  font-size: .85rem;
  font-weight: 500;
  padding: .5rem .5rem;
  border-top-left-radius: 20px;
  cursor: pointer;
  transition: background .22s ease, color .22s ease;
}
.car-plan-tab.active {
  background: #2e80cf;
  color: #fff;
  font-weight: 600;
}
.car-plan-tab:hover:not(.active) { color: #fff; }

/* Card slot */
.car-card-slot { flex: 1; }

/* Action Buttons  (.btn-call / .btn-whatsapp in popup.html) */
.car-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.btn-modal-call,
.btn-modal-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  border-radius: 50px;
  padding: .75rem 1rem;
  font-family: 'Outfit', sans-serif;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .22s ease, border-color .22s ease,
  color .22s ease, box-shadow .22s ease;
}
.btn-modal-call {
  background: #181818;
  border: 1.5px solid rgba(255,255,255,0.12);
  color: #fff;
}
.btn-modal-call:hover {
  background: #1e1e1e;
  border-color: rgba(255,255,255,.25);
}
.btn-modal-whatsapp {
  background: #1a2e1a;
  border: 1.5px solid #25d366;
  color: #25d366;
}
.btn-modal-whatsapp:hover {
  background: #25d366;
  color: #fff;
}
.btn-modal-call i,
.btn-modal-whatsapp i { font-size: 1.1rem; }

/* ─────────────────────────────────────────
   RIGHT PANEL  (.modal-right in popup.html)
───────────────────────────────────────── */
.car-modal-right {
  padding: 1.6rem;
  padding-left: .5rem;
}

.car-modal-right form{
  padding: 24px;
  border: solid 1px rgba(56, 56, 56, 1);
  border-radius: 20px;
  height: 100%;
}

/* Title  (.form-title in popup.html) */
.modal-form-title {
  font-family: 'Oxanium', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: .2rem;
}

/* Fields  (.form-group in popup.html) */
.modal-field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.modal-field label {
  font-family: 'Outfit', sans-serif;
  font-size: .82rem;
  font-weight: 500;
  color: #888;
}
.modal-field input,
.modal-field textarea {
  background: #252525;                              /* --bg-input */
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: .88rem;
  padding: .7rem 1rem;
  outline: none;
  width: 100%;
  resize: none;
  transition: border-color .22s ease, box-shadow .22s ease;
}
.modal-field input::placeholder,
.modal-field textarea::placeholder { color: #888; }
.modal-field input:focus,
.modal-field textarea:focus {
  border-color: #e87722;
  box-shadow: 0 0 0 3px rgba(232,119,34,.12);
}
.modal-field textarea { min-height: 90px; }

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 700px) {
  #carmodal .modal-dialog { margin: .5rem; }
  .car-modal-grid {
    grid-template-columns: 1fr;
    max-height: 92vh;
    overflow-y: auto;
  }
  #carmodal .modal-content { border-radius: 18px; }
  .car-modal-left {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
}

/* Equal height panels */
.car-modal-grid {
  align-items: stretch;
}

.car-modal-left .car-card,.car-modal-right form{
  background: rgba(17, 17, 17, 1);
}

.car-modal-left,
.car-modal-right {
  height: 100%;
}

.car-card-slot {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.car-card-slot .car-card {
  flex: 1;
}