@import url('https://fonts.googleapis.com/css2?family=Encode+Sans:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

  @import url('https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@100;200;300;400;500;600;700;800;900&family=Gabarito:wght@400..900&display=swap');

  body {
      font-family: Arial, sans-serif;
      font-family: 'Encode Sans Expanded';
      overflow: none;
      background: #F2F3F5 !important;
      margin: 0;
      padding: 0;
      overflow: hidden;
  }

  * {
      transition: 0.3s ease-in-out;
  }

  * h1,
  * p {
      margin: 0px;
      padding: 0px;
  }

  button {
      cursor: pointer;
  }

  .page-container {
      margin: 0 auto;
      filter: blur(8px);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
  }

  .scroll-to-top {
      position: fixed;
      bottom: 40px;

      border: none;
      right: 20px;
      z-index: 8;
      display: none;
      padding: 14px;
      background-color: #03428E;
      color: white;
      border-radius: 50%;
  }

  .heading {
      font-family: Encode Sans;
      font-weight: 600;
      font-style: Expanded SemiBold;
      font-size: 14px;
      leading-trim: NONE;
      line-height: 16px;
      letter-spacing: 2px;
      margin: 12px 0px 4px 0px;
      text-transform: uppercase;
      color: black;
  }

  .heading:first-child {
      margin-top: 4px;
  }


  .subheading {
      width: 65%;
  }



  .filters-container {
      flex-direction: column;
      gap: 2px;
      margin-top: 4px;
      display: none;
  }

  .offers-container {
      display: flex;
      gap: 32px;

  }

  .filter-sidebar {
      width: 380px;
      min-width: 380px;
      max-width: 380px;
      display: flex;
      flex-direction: column;
      justify-content: start;
      gap: 16px;
  }


  .filter-sidebar-static {
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: sticky;
      top: 130px;
  }

  label[for="update-location"] {
      display: flex;
      gap: 2px;
      align-items: center;
      justify-content: center;
      font-family: Encode Sans;
      font-weight: 600;
      font-style: SemiExpanded SemiBold;
      font-size: 16px;
      leading-trim: NONE;
      line-height: 24px;
      letter-spacing: 0%;
      text-align: center;
      text-decoration: underline;
      text-decoration-style: solid;
      text-decoration-offset: 0%;
      text-decoration-thickness: 0%;

  }

  .chips-holder {
      flex-wrap: wrap;
      display: none;
      margin-top: 12px;
      gap: 12px;
  }

  .chip {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 8px 24px;
      border-radius: 35px;
      font-family: Encode Sans;
      font-weight: 400;
      font-style: SemiExpanded Regular;
      font-size: 14px;
      leading-trim: NONE;
      line-height: 20px;
      letter-spacing: 0%;
      text-align: center;

      border: 1px solid #03428E;
      color: #03428E;
      gap: 8px;
  }

  .chip svg {
      width: 11px !important;
      height: 11px !important;
  }

  .vehicle-count {
      text-align: center;
      margin-top: 24px;
  }



  .vehicle-filters-holder {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-bottom: 16px;
      align-items: center;
  }

  .vehicle-filters-label {
      font-family: Encode Sans;
      font-weight: 400;
      font-style: Expanded Regular;
      font-size: 24px;
      leading-trim: NONE;
      line-height: 32px;
      letter-spacing: 0%;
      text-align: center;
      color: #03428E;
  }

  .close-sidebar {
      align-self: flex-end;
  }


  .header {
      padding: 74px 0px;
      background-size: cover;
      position: relative;
      text-align: center;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;

      align-items: center;
  }

  .tm {
      /* font-size: 0.6em; */
      /* smaller than normal text */
      /* vertical-align: sub; */
      /* align with text baseline */
      /* position: relative; */
      /* top: -0.2em; */
      /* lift slightly upward */

  }

  .zipcodewarning {
      display: none;
      justify-content: center;
      align-items: center;
      font-family: Encode Sans Expanded;
      font-weight: 400;
      font-style: Expanded Regular;
      font-size: 12px;
      leading-trim: NONE;
      line-height: 16px;
      letter-spacing: 0px;
margin-top:8px;
  }

.zipcodewarning span{
color: #D92112;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 133.333% */
}
.splash-screen .zipcodewarning{
max-width:44ch;
}
  .header::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('https://image.em.stellantis-fs.com/lib/fe3611747364047c701771/m/1/07e3bd05-d314-4840-bf0c-4b956ea6dc29.jpg') no-repeat center center;
      background-size: cover;
      background-position: center;
      filter: brightness(50%) saturate(90%);
      z-index: -1;
  }

  .offers-include {
      font-family: Encode Sans;
      font-weight: 600;
      font-style: Expanded SemiBold;
      font-size: 16px;
      leading-trim: NONE;
      line-height: 16px;
      letter-spacing: 2px;
      text-align: center;
      color: #03428E;
      text-transform: uppercase;

  }

  .header-text {
      font-size: 2.5em;
      font-weight: bold;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  }

  .header-sub-text {

      text-align: center;
      font-size: 1em;

      text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.7);
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      color: #FFFFFF;
      gap: 16px;

  }

  .header-sub-text-section {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
  }
  .header-meta.subheading{
    font-family: Encode Sans Expanded;
  }
  .header p {
      font-family: Encode Sans;
      font-weight: 600;
      font-style: Expanded SemiBold;
      font-size: 16px;
      leading-trim: NONE;
      line-height: 20px;
      letter-spacing: 2px;
      text-align: center;
      text-transform: uppercase;

  }


  .view-offers-holder {
      justify-content: center;
      align-items: center;
      display: flex;
      flex-direction: column;
      flex: 1;
      gap: 12px;
      text-align: center;
      font-size: 9px;
      font-weight: 500;

      width: 100%;
      box-sizing: border-box;
  }


  .view-offers-holder-offers {
      display: flex;
      width: 100%;
      box-sizing: border-box;
      flex-direction: column;
      gap: 8px;
      padding: 16px;
      justify-content: space-between;
      border-radius: 12px;
      background-color: #F2F3F5;
      flex: 1
  }

  .header span {
      font-family: Encode Sans;
      font-weight: 350;
      font-style: Expanded Regular;
      font-size: 20px;
      leading-trim: NONE;
      line-height: 28px;
      letter-spacing: 0px;
      text-align: center;
      position: sub;

  }

  .header-sub-text h1 {
      font-family: Encode Sans;
      font-weight: 400;
      font-style: Expanded Regular;
      font-size: 40px;
      leading-trim: NONE;
      line-height: 44px;
      letter-spacing: 0%;
      text-align: center;

  }



  .header-stroke {
      width: 42;
      height: 2px;
      opacity: 1;
      background-color: #FFFFFF;

  }

  .nav-tabs {
      place-self: anchor-center;
      background: #B9BCC3;
      width: 100%;
      justify-content: center;
      padding: 12px 0px;
      display: flex;
      gap: 52px;
      font-weight: 600;
      border-bottom: 1px solid #ddd;
  }

  .parent-container svg {
      width: 21px;
      height: 20px;
  }

  .nav-tabs div {
      font-family: Encode Sans;
      font-weight: 600;
      font-style: Expanded SemiBold;
      font-size: 14px;
      leading-trim: NONE;
      line-height: 18px;
      letter-spacing: 1px;
      text-transform: uppercase;

  }



  .nav-tabs label {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: center;
  }



  .nav-tab.active {
      color: #002A68;

  }

  .nav-tabs .active::after {
      /* border-bottom: 2px solid #002A68; */
      width: 100%;
      background-color: #002A68;
  }

  .nav-tab-svg.active {
      border: none !important;
  }

  .hide-fragment {
      display: none !important;
  }

  .main-content {
      width: 100%;
      flex: 1;
  }

  .main-content> :first-child {
      margin-top: 0;
  }


  .parent-container {
      margin: 0 auto;
      width: 86.25%;
      margin-top: 60px;
      padding-bottom: 70px;
      flex: 1;
  }

  input[type="checkbox"]:checked {
      accent-color: #00B6A5;
      border: 1.5px solid #006E6A;
  }

  .custom-checkbox {
      appearance: none;
      -webkit-appearance: none;
      width: 18px;
      height: 18px;
      border: 1.5px solid #86898F;
      border-radius: 4px;
      background-color: transparent;
      cursor: pointer;
      position: relative;
  }

  .custom-checkbox:checked {
      background-color: #00B6A5;
      border-color: #006E6A;
  }

  /* white tick */
  .custom-checkbox:checked::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 4px;
      /* slightly wider tick */
      height: 11px;
      /* taller tick */
      border: solid white;
      /* white tick color */
      border-width: 0 2.5px 2.5px 0;
      /* thicker for "bold" look */
      transform: translate(-50%, -60%) rotate(45deg);
      /* center + correct angle */
  }



  .brand-checkbox,
  .year-checkbox {
      margin-right: 8px;
  }

  .vehicle-cards {
      flex-grow: 1;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      justify-content: center;
      margin: 0 auto;
      align-items: stretch;
  }

  .vehicle-card {
      border-radius: 20px;
      box-shadow: 0 0 12px rgba(0, 0, 0, 0.03);
      padding: 26px;
      gap: 20px;
      background-color: #FFFFFF;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
  }



  .years-holder {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 24px;
  }




  .vehicle-cards:has(.vehicle-card:only-child) {
      justify-content: start;
  }


  .vehicle-card img {
      width: 100%;
      max-width: 299px;
      /* //aspect-ratio: 208/135; */
      height: 160px;
  }
  .vehicle-img {
    min-height: 160px;
  }
  .vehicle-year {
      color: #326c92;
      text-align: center;
      font-weight: bold;
      font-size: 16px;
      margin-top: 10px;
  }

  .vehicle-name {
      font-family: Encode Sans;
      font-weight: 600;
      font-style: Expanded SemiBold;
      font-size: 28px;
      leading-trim: NONE;
      /* line-height: 32px; */
      letter-spacing: 0px;
      text-align: center;


      letter-spacing: 0px;
      text-align: center;
      color: #222939;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      /* number of lines */
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
  }

  .hidden {
      display: none;
  }

  .filters-label {
      font-family: Encode Sans;
      font-weight: 600;
      font-style: Expanded SemiBold;
      font-size: 20px;
      leading-trim: NONE;
      line-height: 28px;
      letter-spacing: 0px;


  }

  .use-current-location {
      font-size: 0.85rem;
      text-align: center;
      margin-top: 12px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      gap: 8px;
      align-items: center;
      color: #222939;
  }

  .use-current-location svg {
      opacity: 0.8;
  }

  .use-current-location * {
      transition: none;
  }

  .use-current-location:hover svg {
      color: #002A68;
      fill: #002A68;
      opacity: 1;
  }

  .use-current-location:hover {
      color: #03428E;
  }


  .brand-name {
      margin-top: 8px;
      font-weight: bold;
  }

  .use-current-location svg {
      width: 0.9rem;
  }

  .search-box {

      background: transparent;
      border: none;
      height: fit-content;
      padding: 8px;
  }

  .input-holder {
      display: flex;
      border: 1px solid #86898F;
      padding: 4px 8px;
      border-radius: 8px;
      background-color: white;
      margin-top: 2px;
      align-items: center;
position:relative;
  }

  .filter-label {
      margin-top: 20px;
      z-index: 10;
      display: flex;
      justify-content: space-between;
      background-color: #F2F3F5;
      position: sticky;
      top: 0px;
  }

  .reset-filter {
      background: transparent;
      border: none;
  }

  .reset-filter * {
      transition: none;
  }

  .reset-filter:hover {
      color: #03428E;
  }

  .reset-filter svg {
      color: #03428E;
      opacity: 0.8;
  }

  .reset-filter:hover svg {
      color: #002A68;
      fill: #002A68;
      opacity: 1;
  }

  .filter-label span {
      font-family: Encode Sans;
      font-weight: 600;
      font-style: Expanded SemiBold;
      font-size: 20px;
      leading-trim: NONE;
      line-height: 28px;
      letter-spacing: 0px;
      background-color: #f5f5f5;
      pointer-events: none;
  }

  input {
      font-family: 'Encode Sans';
      color: #222939;
outline:none;
  }

  .filter-label label {
      text-align: center;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 4px;
      font-family: Encode Sans;
      font-weight: 600;
      font-style: SemiExpanded SemiBold;
      font-size: 14px;
      leading-trim: NONE;
      line-height: 24px;
      letter-spacing: 0%;

  }

  .filter-holder-offers {
      display: flex;
      align-items: center;
      gap: 4px;
      font-family: Encode Sans;
      font-weight: 400;
      font-style: SemiExpanded Regular;
      font-size: 14px;
      leading-trim: NONE;
      line-height: 20px;
      letter-spacing: 0%;
      width: fit-content;
  }

  .geocode {
      display: flex;
      flex-direction: column;
  }


  .geocode-error {
      color: rgb(158, 13, 13);
      margin-top: 4px;
      padding: 0px;
      font-size: 0.875rem;
      font-weight: bold;
  }

  .reset-btn {
      color: #1a66b0;
      cursor: pointer;
      background: none;
      border: none;
      margin-top: 12px;
  }

  .section-label {
      font-size: 1.1rem;
      gap: 16px;
      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center;
      font-weight: 600;
      margin-bottom: 18px;
      color: #4B4F59;
      font-family: Encode Sans;
      font-weight: 600;
      font-style: Expanded SemiBold;
      font-size: 20px;
      leading-trim: NONE;
      margin-top: 60px;
      line-height: 24px;
      letter-spacing: 1px;
      text-transform: uppercase;

  }

  .result-count {
      text-align: end;
      font-weight: 500;
      font-size: 14px;
      padding: 0px;
      display: none;
      margin: 40px 0px;
      color: #333;
  }

  .field-block {
      border-bottom: 1.5px solid #B9BCC3;
      padding: 12px 0px;
      color: #333;
      font-size: 0.85rem;
      font-weight: 500;
  }

  .field-block svg[data-btn="subtract"] {
      display: none;
  }


  .field-block.accordian-open svg[data-btn="subtract"] {
      display: inline;
  }

  .field-block.accordian-open svg[data-btn="add"] {
      display: none;
  }

  .field-block.accordian-open .filters-container {
      display: flex;
  }

  .field-block.accordian-open .field-block-cta svg,
  .field-block.accordian-open .field-block-cta strong {
      color: #03428E;
      fill: #03428E;
  }

  .field-block-cta {
      padding: 0px;
      justify-content: space-between;
      display: flex;
      cursor: pointer;

      color: var(--Anthracite-600, #222939);

      /* Header/H6/Large */
      font-family: "Encode Sans";
      font-size: 16px;
      font-style: normal;
      font-weight: 600;
      line-height: 20px;
      /* 125% */
      letter-spacing: 2px;
      text-transform: uppercase;

      width: 100%;
      box-sizing: border-box;
      border: none;
      background: transparent;
  }


  .field-block-cta strong {
      font-family: Encode Sans;
      font-weight: 600;
      font-style: Expanded SemiBold;
      font-size: 18px;
      leading-trim: NONE;
      line-height: 20px;
      letter-spacing: 2px;
      text-transform: uppercase;
      pointer-events: none;

  }


  .offers-list {
      margin: 0px;
      text-align: left;
      width: 100%;
      flex: 1;
  }

  .offers-list ul {
      margin: 0;
      text-align: center;
      padding: 0px;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
  }

  .offers-list ul li {
      font-family: Encode Sans;
      font-weight: 400;
      font-style: SemiExpanded Regular;
      font-size: 14px;
      leading-trim: NONE;
      line-height: 20px;
      letter-spacing: 0%;
      text-align: center;

  }

  .offers-list ul li b {
      font-family: Encode Sans;
      font-weight: 600;
      font-style: Expanded SemiBold;
      font-size: 18px;
      leading-trim: NONE;
      line-height: 24px;
      letter-spacing: 0px;
      text-align: center;
      text-decoration: none;
  }

  .loading {
      color: #666;
      font-style: italic;
  }

  .view-offers-btn {
      width: 100%;
      padding: 8px 20px;
      border-radius: 35px;
      background:  #03428E;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
      border: 2px solid #03428E;
   font-family: "Encode Sans Expanded";

      font-weight: 550;
      font-style: SemiBold;
      font-size: 14px;
      leading-trim: NONE;
      line-height: 20px;
      letter-spacing: 0%;
      text-align: center;

  }



  .view-offers-btn:hover {
     background: var(--Primary-Blue-100, #DFEDF8);
      border-color: #03428E;
      color: #03428E;
  }


  .error-message {
      color: #d32f2f;
      font-size: 14px;
  }

  .year {
      font-weight: 600;
      margin: 2px;
      color: gray;
      font-family: Encode Sans;
      text-align: center;
      font-weight: 600;
      font-style: Expanded SemiBold;
      font-size: 14px;
      leading-trim: NONE;
      line-height: 18px;
      letter-spacing: 1px;
      text-transform: uppercase;
      background: transparent;
      border: none;
  }

  .active {
      font-weight: 700;
      /* border-bottom: 1px solid #002a68; */
      color: #03428E;
  }

  .year.active::after {
      width: 100%;
  }

  /* 
        .vehicle-cards:not(:has(> :nth-child(3))) {
            display: flex;
            justify-content: start;
        } */

  .splash-screen {
      z-index: 10;
      background-color: rgba(0, 0, 0, 0.5);
      /* Semi-transparent black background */
      width: 100%;
      /* Full width */
      min-height: 100vh;

      height: 100%;
      /* Full height */
      display: flex;
      /* Use Flexbox */
      justify-content: center;
      /* Center horizontally */
      align-items: center;
      /* Center vertically */
      position: fixed;
      /* Fixed position to stay on the screen */
      top: 0;
      /* Start from the top */
      left: 0;
      /* Start from the left */
      right: 0;
      /* Ensure it stretches across the whole width */
      bottom: 0;
      /* Ensure it covers the full height */
  }

  .zip-input {
      border-radius: 10px;
      margin: 40px;
      background-color: white;
      padding: 30px 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
  }

  .zip-input div {
      display: flex;
      gap: 10px;
      justify-content: center;
      align-items: center;
  }



  .update-zipcode-btn {
      background-color: #03428E;
      color: white;
      border: 2px solid #03428E;
      padding: 8px 24px;
      border-radius: 35px;
      background: var(--Primary-Blue-Main-500, #03428E);


      color: var(--White, #FFF);
      text-align: center;

      /* Button/Regular */
      font-family: "Encode Sans Expanded";
      font-size: 14px;
      font-style: normal;
      font-weight: 600;
      line-height: 20px;
      /* 142.857% */
  }

  .update-zipcode-btn:hover {
      background: var(--Primary-Blue-100, #DFEDF8);
      color: #03428E;
  }

  .zip-input input {

      border: none;
      padding: 4px;
      border-radius: 4px;
  }

  .zip-input label {
      border: 1px solid gray;
      padding: 4px 12px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
  }

  .use-current-location-splash {
      background-color: white;
      border: 1.5px solid #326c92;
      display: flex;
      justify-content: center;
      text-wrap: nowrap;
      align-items: center;
      color: #03428E;
      gap: 6px;
      padding: 8px 16px;
      border-radius: 18px;
  }

  .use-current-location-splash:hover {
     background: var(--Primary-Blue-100, #DFEDF8);
  }

  .use-current-location-splash .deactivate {
      color: #86898F;
      border-color: #86898F;
  }

  button:disabled {
      color: #86898F;
      border-color: #86898F;
      cursor: not-allowed;
      pointer-events: none;
      background-color: #dcdcdd88;
  }

  button:disabled svg {
      fill: #86898F;
  }

  .field-block-cta strong,
  .field-block-cta svg {
      color: #333;
  }

  .section-active svg,
  .section-active strong {
      color: #03428E;
      fill: #03428E;
  }

  .field-block-cta:hover strong,
  .field-block-cta:hover svg {
      color: #03428E;
      fill: #03428E;
  }

  .year {
      position: relative;
      display: inline-block;
      padding-bottom: 3px;
      /* space for border effect */
      cursor: pointer;
      transition: color 0.3s ease;
  }

  .year::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      height: 2px;
      /* thickness of border */
      width: 0;
      /* start hidden */
      background-color: currentColor;
      /* border color */
      transition: width 0.4s ease;
      /* animation */
  }

  /* .year:hover {
            color: #03428E;
        } */

  .year:hover::after {
      width: 100%;
      /* expand border from left to right */
  }

  .nav-tab {
      position: relative;
      display: inline-block;
      padding-bottom: 4px;
      /* space for border effect */
      cursor: pointer;
      transition: color 0.3s ease;
      color: #4B4F59;
  }

  .nav-tab::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      height: 2px;
      /* thickness of border */
      width: 0;
      /* start hidden */
      background-color: #4B4F59;
      /* border color */
      transition: width 0.4s ease;
      /* animation */
  }

  .nav-tab:hover::after {
      width: 100%;
  }

  input[type="checkbox"] {
      width: 20px;
      height: 20px;
      cursor: pointer;
      background-color: white;
  }

  input[type="checkbox"]:not(:checked):hover {
      background-color: #F2F3F5;
  }

  input[type="checkbox"]+label {
      font-family: "Encode Sans", sans-serif;
      /* safer with fallback */
      font-weight: 400;
      font-stretch: semi-expanded;
      /* correct way to do SemiExpanded */
      font-style: normal;
      /* use normal, italic, or oblique */
      font-size: 14px;
      line-height: 20px;
      letter-spacing: 0;
      /* 0 without % */
  }


  .invalid {
      border-color: #D92112 !important;
  }

  .special-container {
      width: 100% !important;
      padding: 0px !important;
      max-width: 1240px;
  }

label.input-holder.invalid::after{

}
  @media (min-width:2160px) {
      .vehicle-cards {
          grid-template-columns: repeat(4, 1fr);
      }

      .vehicle-card {
          max-width: 100%;
      }

      .view-offers-holder {
          width: 100%;
      }

      /* .vehicle-card {
                max-width: fit-content;
                flex: 1;
            } */
  }


  .mobile-buttons {
      display: none;
  }

  .mobile-buttons-holder {
      display: flex;
      width: 100%;
  }

  .mobile-buttons-holder button,
  .mobile-buttons-holder label {
      flex: 1;
      background-color: transparent !important;
  }

  .mobile-buttons-holder button {
      padding: 12px 24px;
      background: transparent;
      border: 1px solid #03428E;
      color: #03428E;
      display: flex;
      gap: 4px;
      text-align: center;
      justify-content: center;
      align-items: center;
      border-radius: 24px;

      font-family: Encode Sans Expanded;
      font-weight: 600;
      font-style: SemiBold;
      font-size: 14px;
      leading-trim: NONE;
      letter-spacing: 0%;
      text-align: center;
  }

  .mobile-buttons-holder button svg {
      width: 10px !important;
      height: 10px !important;
  }

  .mobile-buttons-holder label {
      display: flex;
      gap: 4px;
      align-items: center;
      justify-content: end;
  }

  .show-on-mobile {
      display: none;
  }



  @media(max-width:1540px) {
      .vehicle-cards {
          grid-template-columns: repeat(2, 1fr);
      }
  }

  @media(max-width:1240px) {
      .vehicle-cards {
          /* grid-template-columns: repeat(1, 1fr); */
        grid-template-columns: repeat(auto-fill, minmax(305px, 1fr));
      }
  }

 
  @media(max-width:1024px) {
      .update-vehicle-container {
          align-items: normal;
      }
  }

  @media(min-width: 1000px) and (max-width: 1540px){
    .filter-sidebar{
        width: 260px;
        min-width: 260px;
        max-width: 260px;
    }
    .vehicle-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    .parent-container{
        width: 95%;
    }

  }
  @media (max-width:1000px) {
        .offers-grid {
                    box-sizing: border-box;
        margin: auto 24px;
        } 
        .section-label{
            margin: 40px 0 24px 0;
        }
        .vehicle-cards{
            gap: 24px;
        }
      .align-to-top {
          position: fixed;
          top:12px;;
          width: calc(100% - 2 * 24px);
          z-index: 6;
      }

      .lottie-full-stretch {
          position: fixed;
          inset: 0;
          height: 100vh;
          display: flex;
          width: 100%;
          justify-content: center;
          align-items: center;
          background: rgba(255, 255, 255, 0.5);
          z-index: 500;
      }

      .view-offers-btn {
          padding: 10px 24px;
      }

      .filter-label .reset-filter {
          display: none;
      }

      .scroll-to-top {
          display: none;
          justify-content: center;
          align-items: center;
      }

      .chips-holder {
          display: flex;
      }

      .show-on-mobile.vehicle-filters-holder {
          display: flex;
      }

      .hide-on-mobile {
          display: none !important;
      }

      .show-on-mobile {
          display: block;
      }

      .mobile-buttons {
          display: flex;
          flex-direction: column;
          gap: 12px;
      }

      .parent-container {
          /* width: auto; */
          width: 100%;
          margin-top: 24px;
      }

      .header {
          padding: 40px 24px;
      }

      .subheading {
          width: auto;
          /* font-size: 18px !important; */
          font-family: Encode Sans;
          /* font-weight: 300 !important; */
          font-style: SemiExpanded Regular;
          leading-trim: NONE;
          line-height: 20px;
          letter-spacing: 0%;
          text-align: center;
      }

      .filter-label,
      .filter-label span {
          font-size: 16px !important;
          margin-top: 0px;
          background-color: #FFFFFF !important;
      }

      .header-stroke {
          display: none;
      }

      .zip-input {
          padding: 16px 24px;
          text-align: center;
          margin: 0px;
          width: 81%;
      }

      .zip-input div {
          display: flex;
          flex-direction: column;
          width: 100%;
          gap: 10px;
          justify-content: center;
          align-items: center;
      }

      .zip-input h3 {
          font-size: 20px
      }

      .zip-input p {
          font-size: 14px;
      }

      .use-current-location-splash {
          width: 100%;

      }

      .input-holder svg {
          margin-left: 4px;
          width: 14px;
          height: 14px;
      }

      .zip-input label {
          width: 100%;
          padding: 4px 0px;

          justify-content: start;
      }

      .update-zipcode-btn {
          width: 100%;
      }

      .offers-container {
          flex-direction: column;
          position: relative;
          gap: 24px;
box-sizing: border-box;
margin: auto 24px;
      }

      .filter-sidebar {
          width: 100%;
          max-width: none;
          min-width: auto;
          position: fixed;
          left: 0;
          height: 100%;
          right: 0;
          top: 0;
          bottom: 0;
          z-index: 99999;
          justify-self: center;
          background-color: #FFFFFF;
          overflow: scroll;
      }

      .filter-sidebar.hide {
          transform: translateY(-100%);
      }


      .filter-sidebar-static {
          padding: 48px 24px;
      }

      .header-sub-text p {
          font-size: 14px;
      }

      .header-sub-text h1 {
          font-size: 28px;
      }

      .header span {
          font-size: 14px;
      }

      .nav-tabs {
          flex-direction: column;
          gap: 16px;
      }

      .nav-tabs label div {
          font-size: 16px;
          text-align: center;
      }

      .vehicle-card {
          width: stretch;
          padding: 16px;
          margin: 0 auto;
      }


      .filter-label label,
      svg {
          cursor: pointer;
      }


      .loader {
          width: 20%;
          height: 20%;
          display: flex;
          margin: 0 auto;
          align-self: center;
          padding-top: 40px;
          align-items: center;
          justify-content: center;
      }

      .car__body {
          animation: shake 0.2s ease-in-out infinite alternate;
      }

      .car__line {
          transform-origin: center right;
          stroke-dasharray: 22;
          animation: line 0.8s ease-in-out infinite;
          animation-fill-mode: both;
      }

      .car__line--top {
          animation-delay: 0s;
      }

      .car__line--middle {
          animation-delay: 0.2s;
      }

      .car__line--bottom {
          animation-delay: 0.4s;
      }

      @keyframes shake {
          0% {
              transform: translateY(-1%);
          }

          100% {
              transform: translateY(3%);
          }
      }

      @keyframes line {
          0% {
              stroke-dashoffset: 22;
          }

          25% {
              stroke-dashoffset: 22;
          }

          50% {
              stroke-dashoffset: 0;
          }

          51% {
              stroke-dashoffset: 0;
          }

          80% {
              stroke-dashoffset: -22;
          }

          100% {
              stroke-dashoffset: -22;
          }
      }

      .car {
          width: 100%;
          height: 100%;
      }
  }

@media(max-width: 768px){
    .offers-grid {
        padding: 0 !important;
    }
 .parent-container{
padding-bottom:0;
}
}

@media (min-width: 1240px) and (max-width: 1440px) {

    .vehicle-cards.is-safari {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (min-width: 1440px) and (max-width: 1600px) {

    .vehicle-cards.is-safari {
        grid-template-columns: repeat(2, 1fr);
    }

}
@media(max-width: 320px){
      .vehicle-cards {
            grid-template-columns: repeat(1, 1fr);
      }
 }