body {
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

/* Global class */
.flex {
  display: flex !important;
  display: -moz-flex;
  justify-content: center;
}

.rich-text {
  font-size: 1.2em;
  text-align: center;
}

.icon {
  width: 20px;
  height: 20px;
}

/* Global classes end */

/* Header that include logo */
.header {
  top: 0;
  width: 100%;
  display: flex;
  display: -moz-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: white;
  position: -webkit-sticky;
  position: sticky;
  z-index: 100;
  padding-top: 5px;
}


.logo {
  width: 70%;
  max-width: 330px;
  padding-top: 15px;
}


.overflow-center {
  display: flex;
  display: -moz-flex;
  flex-direction: column;
  align-items: center;
}

/* Progress container */
.progress-container {
  width: 100%;
  display: flex;
  display: -moz-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}

.progress {
  width: 95%;
  height: 3px;
  display: flex;
  display: -moz-flex;
  max-width: 400px;
  overflow: hidden;
  border-radius: 25px;
  background: #eaeaeb;
}

.progress-item {
  width: 20%;
  background: #eaeaeb;
}

.progress .filled {
  background: #26b5e0 !important;
}

/* insurance text */
.insurance-text {
  padding-top: 20px;
  padding-right: 10px;
  padding-left: 10px;
  text-align: center;
  font-family: sans-serif;
}

.insurance-text p {
  margin: 1em 0;
}

/* Car brands box container */
.cards-container {
  width: 100%;
  display: flex;
  display: -moz-flex;
  flex-wrap: wrap;
  max-width: 402px;
  justify-content: space-evenly;
  align-items: center;
}

/* car brand box */
.car-brand-box {
  width: 100%;
  max-width: 170px;
  cursor: pointer;
  overflow: hidden;
  text-align: center;
  border-radius: 15px;
  margin-right: 10px;
  margin-bottom: 10px;
  border: solid 3px #EAEAEB;
}

.car-brand-box:hover,
.car-brand-box:active {
  border-color: #26b5e0;
  background: #D3F5FF;
}

.img-box {
  width: 100%;
  height: 80px;
  display: flex;
  display: -moz-flex;
  align-items: center;
  justify-content: center;
}

.lable {
  width: 100%;
  display: flex;
  display: -moz-flex;
  justify-content: center;
  align-items: center;
  padding: 15px 0;
}

.lable .text-box {
  text-transform: uppercase;
  font-style: bold;
}

/* trustpilot 5 star rating */
.trustpilot {
  margin-left: 50%;
  width: 100%;
  max-width: 800px;
  min-width: 200px;
  padding-top: 15px;
  display: flex;
  display: -moz-flex;
  justify-content: center;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
}

/*
    Stop and read
    Thanks you Page style sections
*/

.container {
  width: 100%;
  display: flex;
  display: -moz-flex;
  max-width: 390px;
  justify-content: center;
  flex-wrap: wrap;
}

.overflow-approve {
  width: 100%;
  display: flex;
  display: -moz-flex;
  justify-content: center;
}

.approved {
  display: inline-flex;
  height: 97px;
  padding: 0px 31px 0px 22px;
  align-items: center;
  border-radius: 25px;
  background: #1877F2;
  color: #FFF;
  text-align: center;
  font-size: 50px;
  font-weight: 700;
  line-height: 28.624px;
  margin-top: 20px;
}

.rate-container {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
  width: 100%;
}

.rate {
  display: inline-flex;
  padding: 19px 16px 20px 15px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 25px;
  color: #FFF;
  font-weight: 700;
}

.old-rate {
  background: #FF3130;
}

.new-rate {
  background: #00BE62;
}

.old-rate .label,
.new-rate .label {
  font-size: 25px;
  line-height: 28.624px;
  font-weight: 700;
  color: #FFF;
}

.car-title {
  display: inline-flex;
  padding: 14px 15px 14px 14px;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  border: 1px solid #1877F2;
  color: #1877F2;
  text-align: center;
  font-size: 22px;
  font-weight: 300;
  line-height: 28.624px;
  margin-top: 20px;
}

/*
    Stop and read
    Thanks you Page style cybertruck sections
*/

.save-max-auto-container {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #FFF;
  font-family: Inter, Arial, sans-serif;
}
.save-max-auto {
  width: 390px;
  height: 844px;
  position: relative;
  text-align: center;
}
.save-max-auto-logo {
  width: 224px;
  height: 25.178px;
  margin: 45px auto 0;
  fill: #1877F2;
}
.save-max-auto-gradient {
  width: 309px;
  height: 408px;
  margin: 20px auto 0;
  background: linear-gradient(180deg, #62F683 40.4%, rgba(255, 255, 255, 0) 100%);
  border-radius: 26px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.save-max-auto-checkmark {
  width: 58px;
  height: 58px;
  margin-top: 20px;
}
.save-max-auto-approved-text {
  color: #024D12;
  text-align: center;
  font-size: 20.549px;
  font-weight: 900;
  line-height: 24.658px;
  letter-spacing: -0.822px;
  text-transform: uppercase;
}
.save-max-auto-price-text {
  color: #024D12;
  text-align: center;
  font-size: 65.683px;
  font-weight: 900;
  line-height: 78.82px;
  letter-spacing: -2.627px;
  text-transform: uppercase;
}
.save-max-auto-car {
  width: auto;
  height: 400px;
  position: absolute;
  bottom: 250px;
  left: 55%;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}
.save-max-auto-stamp {
  width: 258px;
  height: 258px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(3);
  opacity: 0;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.save-max-auto-button-wrapper {
  width: 322px;
  padding: 6px;
  border-radius: 100px;
  border: 2px solid #024D12;
  margin: 20px auto 0;
  position: absolute;
  bottom: 200px;
  left: 50%;
  transform: translateX(-50%);
}
.save-max-auto-button {
  width: 100%;
  height: 52px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  background: #62F683;
  color: #024D12;
  text-align: center;
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
}
.save-max-auto-animate {
  transform: translateX(-35%);
}
.save-max-auto-stamp-animate {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/*
 Notice it and read
 Vehicle Years section start from heare
*/

.main-section {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.years-container {
  width: 100%;
  max-width: 390px;
  flex-wrap: wrap;
  justify-content: center
}

.yers {
  width: 70px;
  height: 54px;
  cursor: pointer;
  display: flex;
  transition: all;
  transition-duration: .1s;
  box-shadow: none;
  background: #fff;
  border-width: 2px;
  border-style: solid;
  border-color: #eaeaeb;
  border-radius: 15px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  margin-right: 10px;
}

.yers.active {
  color: #fff !important;
  border-color: #26b5e0;
  background: #26b5e0;
}

.yers:hover,
.yers:active {
  color: #fff !important;
  border-color: #26b5e0;
  background: #26b5e0;
}

.yers:hover~.lable {
  color: #fff !important;
}

.yers div {
  cursor: pointer;
  transition: color;
  font-family: sans-serif;
  font-size: 1rem;
  line-height: 1.1;
  font-weight: 700;
  text-transform: unset;
  letter-spacing: normal;
}

.generic-button {
  width: 90%;
  color: #fff;
  max-width: 380px;
  padding: .875em 1em;
  transition-duration: .2s;
  border-width: 1px;
  border-style: solid;
  border-radius: 7.5px;
  background: #26b5e0;
  transform: none;
  box-shadow: unset;
  border-color: transparent;
  justify-content: space-between;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 24px;
  align-items: center;
  border: solid 2px #fff;
}

.generic-button:active {
  box-shadow: 0 0 0 2px #26b5e0;
}

/* For only animation */
.non-active {
  opacity: .3;
  display: none;
  position: absolute;
  visibility: hidden;
  transition: all .4s;
}

.slide-show {
  transform: translateX(30%);
  -moz-transform: translateX(30%);
  opacity: .1;
  transition: all .4s;
  animation: move .3s forwards;
  animation-fill-mode: forwards;
}

@keyframes move {
  0% {
    opacity: .1;
    transform: translateX(30%);
    -moz-transform: translateX(30%);
  }

  100% {
    opacity: 1;
    transform: translateX(0%);
    -moz-transform: translateX(0%);
  }
}

/* Animation lottie file style */
#checkmark-animation svg path {
  stroke-width: 8;
}

#checkmark-animation {
  margin: 0 auto;
}

#checkmark-animation svg path {
  stroke: #26B5E0;
}

.loading {
  width: 90%;
  margin: 0 auto;
  max-width: 300px;
}

/* Model Items */
.model-container {
  width: 95%;
  max-width: 401px;
  margin: 0 auto;
  margin-top: 20px;
  text-align: center;
}

.model-list {
  list-style-type: none;
  padding: 0;
}

.model-item {
  background-color: #f0f0f0;
  margin-bottom: 10px;
  padding: 15px;
  font-size: 18px;
}

.back-button {
  display: block;
  text-align: center;
  margin-top: 20px;
  text-decoration: none;
  color: #007bff;
}

.model-list {
  list-style-type: none;
  padding: 0;
}

.model-item {
  background-color: #f0f0f0;
  margin-bottom: 10px;
  padding: 15px;
  font-size: 18px;
}

.back-button {
  display: block;
  width: 100px;
  padding: 10px 15px;
  text-align: center;
  margin-top: 20px;
  text-decoration: none;
  color: #007bff;
  font-size: 1.5em;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  border: solid 1px #27313E;
}

.icon-left {
  width: 30px;
  height: 30px;
  margin-right: 5px;
}

/* car model full box */
.full-box {
  width: 100%;
  max-width: 300px;
  height: 65px;
  display: flex;
  display: -moz-flex;
  align-items: center;
  justify-content: center;
}

/* Dodge Ram Thank you page */
.save-max-auto-container {
  margin-top: 80px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
  background-color: #FFF;
}

.save-max-auto {
  width: 390px;
  height: 844px;
  position: relative;
  text-align: center;
}

.price-options {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 10px;
  position: relative;
}

.price-box {
  border-radius: 20px;
  border: 2px solid;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  word-wrap: break-word;
  margin: 0 5px; /* Add horizontal spacing between price boxes */
}

.price-box.liability,
.price-box.ultimate {
  border-color: #47C2E8;
  color: #47C2E8;
  width: 28%;
  height: 50px;
  margin-top: 15px;
}

.price-box.premium {
  border-color: #123456;
  color: #123456;
  background-color: #bbefff;
  width: 38%;
  height: 75px;
}

.price-box .price-title {
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 1px; /* Reduced from 5px to 2px */
}

.price-box.premium .price-title {
  font-size: 28px;
}

.price-box.liability .price-amount,
.price-box.ultimate .price-amount {
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  font-size: 20px;
}

.price-box.premium .price-amount {
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  font-size: 30px;
}

.approved-price {
  font-size: 100px;
  font-weight: bold;
  color: #123456;
  margin-bottom: 10px;
  text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
}

.payment-button {
  width: 100%;
  padding: 15px;
  border-radius: 20px;
  background-color: #123456;
  color: white;
  font-size: 49px;
  font-weight: bold;
  border: none;
  margin-bottom: 20px;
}

.vehicle-image {
  width: 100%;
  margin-bottom: 10px;
}

.vehicle-button {
  width: 90%;
  padding: 10px;
  border-radius: 25px;
  background-color: transparent;
  color: #123456;
  font-size: 35px;
  font-weight: 500;
  border: 1px solid #123456;
}
/* Subaru Thank you page */
/* Subaru Thank you page */
/* Subaru Thank you page */
.save-max-auto-container {
  margin-top: 80px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
  background-color: #FFF;
}

.save-max-auto {
  width: 390px;
  height: 844px;
  position: relative;
  text-align: center;
}

.price-options {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  padding: 0 10px;
  position: relative;
}

.price-box {
  border-radius: 20px;
  border: 2px solid;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  word-wrap: break-word;
  margin: 0 5px; /* Add horizontal spacing between price boxes */
}

.price-box.liability,
.price-box.ultimate {
  border-color: #47C2E8;
  color: #47C2E8;
  width: 28%;
  height: 50px;
  margin-top: 15px;
}

.price-box.premium {
  border-color: #123456;
  color: #123456;
  background-color: #bbefff;
  width: 38%;
  height: 75px;
}

.price-box .price-title {
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 1px; /* Reduced from 5px to 2px */
}

.price-box.premium .price-title {
  font-size: 28px;
}

.price-box.liability .price-amount,
.price-box.ultimate .price-amount {
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  font-size: 20px;
}

.price-box.premium .price-amount {
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  font-size: 30px;
}

.approved-price {
  font-size: 100px;
  font-weight: bold;
  color: #123456;
  margin-bottom: 10px;
  text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}

.payment-button {
  width: 100%;
  padding: 15px;
  border-radius: 20px;
  background-color: #123456;
  color: white;
  font-size: 49px;
  font-weight: bold;
  border: none;
  margin-bottom: 0px;
}

.vehicle-image {
  width: 100%;
  margin-bottom: 0px;
  margin-top: -10px;
}

.vehicle-button {
  width: 80%;
  padding: 10px;
  border-radius: 25px;
  background-color: transparent;
  color: #123456;
  font-size: 22px;
  font-weight: 500;
  border: 1px solid #123456;
  margin-top: -20px;
}