@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@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&display=swap');


h1, h2, h3, h4, h5 {
    font-family: "Outfit", serif;
}

h1 {
  font-weight: 800;
}

p, span, a {
  font-family: "Poppins", serif;
  font-size: 14px;
  font-weight: 400;
}

h6 {
  color: #CD0118;
  font-family: "Outfit", serif;
}

.container, .footer.container, .footer-bottom-container {
  max-width: 1330px;
}

body {
  background: #F6F8FB;
}


/* Top Bar and NavBar */
.logo {
  width: 150px;
  /* aspect-ratio: 3; */
}

.top-bar {
  background: #002b87;
  color: white;
  font-size: 14px;
  padding: 5px 0;
}

#languange {
  background: transparent;
  border: 0;
  color: #fff;
}

#languange option {
  color: #002b87;
}

.sticky-top {
  box-shadow: 0 4px 2px -2px gray;
}

.top-bar a {
  color: white;
  text-decoration: none;
}

.nav-link {
  color: #000;
  font-family: "Poppins", serif;
}

.navbar-nav .dropdown-menu {
  border: none;
  /* background: transparent; */
}

#multiStepForm h1 ,.dropdown-toggle::after {
  color: #CD0118;
}

.navbar {
  padding: 0.5rem 1rem;
}

.navbar-brand {
  font-weight: bold;
  font-size: 1.5rem;
  color: #002b87;
}

.btn-quote {
  background-color: #002b87;
  color: white;
  font-weight: bold;
  border-radius: 4px;
  padding: 15px 30px;
}

.btn-quote:hover {
  background-color: #002b87;
  color: white;
}

/* !Top Bar and NavBar */



/* Body Form */

/* Additional custom styles for the form */

.body-form {
  max-width: 1000px;
  width: 100%;
  height: auto;
  }

 .progress-container {
    position: relative;
  }

  .progress-bar {
    width: 0%;
    transition: width 0.5s;
    border-radius: 25px;
    background: #193A99 !important;
  }

  .progress-percentage {
    position: absolute;
    top: -25px;
    /* left: 50%; */
    right: 0;
    transform: translateX(-50%);
    font-weight: bold;
    color: #CD0118;
  }

  .step {
    display: none;
  }

  .step.active {
    display: block;
  }

.mb-3 {
  flex-grow: 1;
}

.form-label {
  color: #000;
  font-weight: 700;
  font-family: "Outfit", serif;
}

.bday-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.bday-inputs input {
  flex-grow: 1;
  width: 150px;
}

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

.formSelect select {
  background: #fff;
  border-radius: 0.375rem;;
  border: 1px solid #dee2e6;;
  padding: .375rem .75rem;
}

.custom-radio {
  background: #fff;
  border: 1px solid #dee2e6;;
  padding: 15px 20px;
  border-radius: 5px;
}

.liablity li {
  list-style: none;
}

.liablity {
  position: relative;
  background: #fff;
  border-radius: 8px;
}

.liablity ul li:before {
  position: absolute;
  left: 15px;
  content: '✓';
  font-size: 10px;
  color: #fff;
  background: #1C274C;
  border-radius: 50%;
  padding: 2px 5px;
}

.custom-dropdown {
  position: relative;
}

.custom-dropdown .dropdown-toggle::after {
  position: absolute;
  right: 20px;
  top: 40px;
  color: #193A99;
  font-size: 25px;
}

.custom-name .bi-person-circle::before {
  font-size: 40px;
  color: #000;
}

.john-doe {
  background: #fff;
  border: 1px solid #dee2e6;;
  padding: 20px;
}

ul.dropdown-menu.custom-form.show {
  width: 100%;
}

.form-section {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 20px;
  background-color: #f8f9fa;
}

.btn-edit {
  width: 100px;
  background-color: #0d6efd;
  color: white;
  border: none;
}

.btn-edit:hover {
  background-color: #004ecb;
}

.form-label.required::after {
  content: "*";
  color: red;
  margin-left: 5px;
}

.custom-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px; /* Adjust height as needed */
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #f8f9fa;
}

.custom-radio:hover , .custom-radio:hover .form-label {
  cursor: pointer;
  background: #193A99;
  color: #fff;
}

.custom-button:hover {
  border: 1px solid #ddd;
}

.custom-button i {
  margin-right: 8px;
}

.tab.formSelect {
  width: 22%;
}

.searchBox-container {
  position: relative;
}

.searchBox-container i {
  position: absolute;
  top: 10px;
  right: 30px;
}

.searchBox-container #searchBox,
.searchBox-container #brandNameBox,
.searchBox-container #YearNameBox {
  background: transparent;
  padding: 10px 20px;
}

.brand-item {
  background: #fff;
  /* forced to flex */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}

.brand-item:hover {
  cursor: pointer;
  /* background: #193A99; */
}

.brand-item img {
  mix-blend-mode: multiply;
}

.brandName-item, .YearName-item {
  justify-content: flex-start !important;
  padding: 20px;
}

#asterisk {
  color: #CD0118;
}

.t1 {
  background: #CD0118;
  padding: 15px;
  border-radius: 13px;
}

.bmw-img {
  width: 150px;
  height: 100px;
}

.bmwContainer h6 {
  color: #fff;
  font-weight: 800;
}

.coverage-option h6 {
  color: #000;
  font-weight: 700;
}

.btn-thankyou-page {
  background: transparent;
  color: #002b87;
  border: none;
  font-weight: 800;
}

.thankyou-container {
  background: url("./assets/Auto_rideshare-driver-door-open_Optimized_XL_L.webp") #fff;
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: contain;
}

.life-thankyou {
  background: #fff;
}

.thankyou-container h1 {
  color: #193A99;
}

.life-insurance img {
  height: 250px;
  width: auto;
  background-size: cover;
}

.cRadio-parent .custom-radio-2 {
  background: #fff;
  padding: 10px 20px;
}

.cRadio-parent .custom-radio-2:hover {
  cursor: pointer;
  background: #193A99;
  color: #fff;
  border-radius: 3px;
}

.cRadio-parent .custom-radio-2:hover label {
  color: #fff;
}

.btn-thankyou-page:hover {
  background: transparent;
  color: #002b87;
}

.rangeValue {
  background: #fff;
  padding: 10px 20px;
}

.prev-btn {
  background: #002b87 !important;
  border: none !important;
}

.next-btn {
  background: #CD0118 !important;
  border: none !important;
}

.prev-btn, .next-btn {
  padding: 10px 40px;
  border-radius: 5px;
}
  /* !Body Form */




  /* Footer */
  .footer {
    background: #121212;
    color: white;
    padding: 2rem 0 0;
}

.list-unstyled img {
  width: 50px;
  aspect-ratio: 3/3;
}

.footer a {
    color: white;
    text-decoration: none;
}

.footer .btn-quote {
    background-color: #002b87;
    color: white;
    font-weight: bold;
    border-radius: 4px;
}

.footer-img {
  width: 80%;
}

.custom-title {
  width: 50%;
}

.custom-text a {
  text-decoration: underline;
  font-weight: 600;
}

.footer-nav a {
  font-size: 16px;
  font-family: "Poppins", serif;
  font-weight: 600;
}

.footer-bottom {
    background-color: #002b87;
    color: #BEBEBE;
    padding: 20px;
}

.footer-bottom-container p, .footer-bottom-anchor a {
  font-size: 12px;
}

.social-icons i {
  border: 1px solid #fff;
  padding: 8px 10px;
  border-radius: 50%;
  font-size: 15px;
}

.footer-bottom a {
    color: #BEBEBE;
    margin: 0 5px;
}
  /* !Footer */