html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: "Tajawal", sans-serif;
}

.navbar {
  background-color: #fff;
  z-index: 1;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137);
}
.navbar-brand{
  padding-top: 0;
  padding-bottom: 0;
}
.auth-button{
  background-color: #033e66
}

.navbar-nav {
  gap: 6px;
}

.navbar-nav .nav-link {
  color: #333;
  font-weight: 600;
  font-size: 15px;
  padding: 10px 18px;
  position: relative;
  transition: color 0.2s ease;
}

.navbar-nav .nav-link:hover {
  color: #033e66;
}

.navbar-nav .nav-link.active {
  color: #033e66;
}

.navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  right: 18px;
  left: 18px;
  height: 3px;
  border-radius: 3px;
  background-color: #033e66;
  transform: scaleX(0);
  transition: transform 0.25s ease;
}

.navbar-nav .nav-link:hover::after {
  transform: scaleX(0.6);
}

.navbar-nav .nav-link.active::after {
  transform: scaleX(1);
}

.langugeDropdown .dropdown-toggle:focus {
  box-shadow: unset !important;
}

.langugeDropdown ul {
  min-width: 4rem;
}

.langugeDropdown ul li {
  font-size: 15px;
  color: #090A22;
  border-bottom: 1px solid #E9E9E9;
  padding: 0 0 6px;
  text-align: center;
  cursor: pointer;
}

.langugeDropdown ul li:hover {
  background-color: #F5F5F5;
}

.langugeDropdown ul li:last-of-type {
  border: unset;
  padding: 6px 0 0;
}

.hero {
  min-height: 580px;
  padding-top: 130px;
  background-color: #02141E;
  background-image: url("../images/OtlobCarBanner.png");
  background-size: 100% 100%;
}

@media (max-width: 768px) {
  .langugeDropdown ul {
    min-width: 4rem !important;
    width: 4rem !important;
  }
  .hero {
    min-height: 170px;
    padding-top: 0;
    background-color: #02141E;
    background-image: url("../images/OtlobCarBanner.png");
    background-size: 100% 100%;
  }
}

.hero .container {
  background: #000000a3;
  padding: 25px;
  border-radius: 8px;
}

.hero h1 {
  color: #fff;
  font-size: 3.5rem;
  font-weight: normal;
  line-height: 1;
  margin-bottom: 0 !important;
  position: relative;
}

@media (max-width: 767.9px) {
  .hero h1 {
    font-size: 1.75rem;
  }
}

.breadcrumb-item {
  color: #fff;
  font-size: 1rem;
  font-weight: normal;
  padding: 0 !important;
  line-height: 1 !important;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 767.9px) {
  .breadcrumb-item {
    font-size: 0.75rem;
  }
}

.breadcrumb-item.active {
  color: rgba(255, 255, 255, 0.3);
}

.breadcrumb-item+.breadcrumb-item::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.875 17.5L15.375 13L10.875 8.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  background-position: center;
  background-repeat: no-repeat;
  float: none;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  margin-inline-start: 0.25rem;
  margin-inline-end: 0.25rem;
}

html[dir=rtl] .breadcrumb-item+.breadcrumb-item::before {
  transform: rotate(0.5turn);
}

.breadcrumb-item a {
  text-decoration: none;
  color: #fff !important;
  transition: all 0.25s ease-in-out;
  display: inline-block;
  line-height: 20px;
}

.breadcrumb-item a:hover {
  opacity: 0.5;
}

.page-hero {
  position: relative;
  width: 100%;
  min-height: 220px;
  background-image: url("../images/cover.jpg");
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 20, 30, 0.82), rgba(2, 20, 30, 0.68));
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

.page-hero h1 {
  color: #fff;
  font-weight: 700;
  font-size: 2.25rem;
  margin-bottom: 14px;
}

.page-hero-divider {
  width: 50px;
  height: 2px;
  background-color: #fff;
  margin: 0 auto 14px;
}

.page-hero-breadcrumb {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
}

.page-hero-breadcrumb a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}

.page-hero-breadcrumb a:hover {
  color: #fff;
}

.page-hero-breadcrumb .sep {
  margin: 0 8px;
  color: rgba(255, 255, 255, 0.4);
}

.page-hero-breadcrumb .current {
  color: #fff;
}

@media (max-width: 767.9px) {
  .page-hero {
    min-height: 150px;
  }

  .page-hero h1 {
    font-size: 1.5rem;
  }
}

.content h4 {
  color: #002134;
  font-size: 1.125rem;
  font-weight: bold;
}

.content {
  overflow: hidden;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content .p-descrption {
  font-size: 1.25rem !important;
  color: #002134 !important;
  margin-bottom: 2rem;
  word-break: break-word;
}

.content .container {
  padding: 50px 0;
}

.content .container .row {
  margin: 0;
}

.content .container form .step {
  display: none;
  transform-origin: top;
  animation: fadeInRight 0.8s ease-in-out;
}

label {
  font-size: 14px;
  font-weight: 600;
  color: #636767;
}

.content .container form .step.active-step {
  padding: 40px 20px;
  border-radius: 10px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  display: block;
  background-color: #f5f5f5;
}

.content .container form .step .form-title {
  font-size: 25px;
  font-weight: 600;
  margin-bottom: 30px;
}

.content .container form .step .form-group {
  margin-top: 15px;
  text-align: start;
}

.content .container form .step .form-group label span {
  color: red;
}

.content .container form .step .form-group input,
.content .container form .step .form-group textarea,
.content .container form .step .form-group select {
  border-radius: 10px;
  border: unset !important;
  background-color: #ffffff;
}

.content .container form .step .form-group textarea {
  resize: none;
  height: 200px;
}

.content .container form .next-btn,
.content .container form .previous-btn {
  padding: 8px 30px;
  min-width: 140px;
  border: none;
  outline: none;
  background-color: var(--main-color);
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  margin: 30px 10px;
}

.content .container form .previous-btn {
  border: 2px solid #999999;
  background: #fcf6e9;
  color: var(--main-color);
}

.content .container form .submit-btn {
  margin-top: 30px;
  width: 250px;
  height: 55px;
}

.content .container form .dropify-wrapper {
  border-width: 2px;
  border-radius: 5px;
}

.content .container form .dropify-wrapper .dropify-message p {
  font-size: 17px;
}

.content .container form .dropfiy-label {
  margin-bottom: 10px;
}

.content .container form .loan-choice {
  margin-top: 5px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.content .container form .loan-choice .form-group {
  margin-inline-end: 60px;
}

select,
input:not([type="radio"], [type="checkbox"]) {
  color: #636767;
  width: 100%;
  border: 1.5px solid rgba(128, 128, 128, 0.418);
  padding: 0 10px;
  font-size: 14px;
  margin: 10px 0;
  background-color: #ffffff;
  height: 45px;
  transition: 0.3s ease all;
}

select {
  cursor: pointer;
  background: url(down-arrow.png) no-repeat left 10px center;
  background-size: 9px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.sys-btn {
  position: relative;
  text-align: center;
  display: inline-block;
  padding: 8px 30px;
  min-width: 140px;
  border: none;
  outline: none;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137);
  border-radius: 100px;
  background-color: black;
  color: #ffffff;
}

.dropify-wrapper input {
  height: 100% !important;
}

footer {
  background-color: #033e66;
  background-image: linear-gradient(180deg, #044774 0%, #033e66 40%);
}

footer .container {
  max-width: 1320px;
}

footer p {
  color: #fff;
}

.footer--top {
  padding: 4rem 0 3rem;
  border-bottom: 3px solid #dc3545;
}

.footer--top-wrapper {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 3rem;
}

@media (max-width: 991.9px) {
  .footer--top-wrapper {
    grid-template-columns: 1fr 1fr;
    row-gap: 2.5rem;
  }
}

@media (max-width: 575.9px) {
  .footer--top-wrapper {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.footer--top-wrapper h2 {
  line-height: 1;
  text-align: start;
  font-size: 1.25rem !important;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 0.9rem;
}

.footer--top-wrapper h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 42px;
  height: 3px;
  border-radius: 3px;
  background-color: #dc3545;
}

@media (max-width: 575.9px) {
  .footer--top-wrapper h2::after {
    right: 50%;
    transform: translateX(50%);
  }
}

.footer--brand-col {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

@media (max-width: 575.9px) {
  .footer--brand-col {
    align-items: center;
  }
}

.footer--logo {
  max-height: 70px;
  width: auto;
  align-self: flex-start;
}

.footer--tagline {
  font-size: 1rem !important;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
  max-width: 320px;
  margin-bottom: 0 !important;
}

.footer--links-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer--links-col ul li:not(:first-child) {
  margin-top: 0.85rem;
}

.footer--links-col ul li a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1;
  text-align: start;
  font-size: 1rem !important;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none !important;
  transition: all 0.25s ease-in-out;
}

.footer--links-col ul li a::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #dc3545;
  flex-shrink: 0;
  transition: all 0.25s ease-in-out;
}

.footer--links-col ul li a:hover {
  color: #fff;
  gap: 0.75rem;
}

.footer--contact-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

@media (max-width: 575.9px) {
  .footer--contact-col {
    align-items: center;
  }
}

.footer--top-phone {
  display: inline-flex;
  gap: 0.75rem;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: 0.65rem 1.1rem;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.08);
  font-size: 1.25rem !important;
  line-height: 1;
  text-align: start;
  font-weight: 600;
  color: #fff;
  text-decoration: none !important;
  transition: all 0.25s ease-in-out;
}

.footer--top-phone:before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg width='30' height='33' viewBox='0 0 30 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.0545 32.5938C18.7665 32.5812 16.7073 31.9413 14.7575 30.9054C12.4217 29.6646 10.409 28.0002 8.56477 26.1283C6.1234 23.6505 3.93597 20.9702 2.25015 17.9104C1.21929 16.0385 0.433576 14.0723 0.134376 11.9415C-0.25911 9.14305 0.182147 6.51562 1.84912 4.17357C2.22249 3.64808 2.65746 3.15403 3.12637 2.71025C3.77129 2.09928 4.46146 1.53357 5.15666 0.977911C6.16615 0.172083 7.26614 0.214826 8.1826 1.12751C8.66912 1.61151 9.1242 2.14328 9.50889 2.71025C10.3348 3.92968 11.1947 5.13654 11.6825 6.54957C12.1665 7.95002 11.9628 9.19334 10.8226 10.2053C10.2757 10.6919 9.7314 11.1922 9.12923 11.602C7.72249 12.5612 7.53392 13.7128 8.0858 15.2515C8.55472 16.5589 9.34923 17.6816 10.1991 18.7589C11.3368 20.1984 12.5499 21.5724 13.9793 22.7365C14.7688 23.3802 15.5997 23.9597 16.6193 24.1948C17.5081 24.401 18.2687 24.1722 18.9249 23.5461C19.5308 22.9678 20.1355 22.3896 20.7603 21.8326C21.8767 20.8382 23.1313 20.6874 24.4538 21.3486C25.0296 21.6365 25.5953 21.981 26.0881 22.3921C27.0775 23.2142 28.0253 24.0854 28.9644 24.9667C29.241 25.2269 29.4572 25.5664 29.6471 25.8995C30.1839 26.8386 30.1223 27.7412 29.3529 28.4854C28.3245 29.4798 27.3088 30.4981 26.0541 31.2285C24.4877 32.14 22.8007 32.5825 21.0545 32.5938Z' fill='white'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: all 0.25s ease-in-out;
}

.footer--top-phone:hover {
  background-color: #dc3545;
  color: #fff;
}

.footer--contact-items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.footer--contact-items .footer--top-phone {
  margin-bottom: 0;
}

.footer--top-email {
  font-size: 1rem !important;
}

.footer--top-email:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
}

.footer--top-social-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-start;
  align-items: center;
}

@media (max-width: 575.9px) {
  .footer--top-social-list {
    justify-content: center;
  }
}

.footer--top-social-list li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.08);
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}

.footer--top-social-list li a svg,
.footer--top-social-list li a img {
  width: 20px;
  min-width: 20px;
  height: 20px;
  object-fit: contain;
  object-position: center;
}

.footer--top-social-list li a svg path,
.footer--top-social-list li a img path {
  transition: all 0.25s ease-in-out;
}

.footer--top-social-list li a:hover {
  background-color: #dc3545;
  transform: translateY(-3px);
}

.footer--bottom {
  padding: 1.5rem 0;
}

.footer--bottom-text {
  line-height: 1.9;
  text-align: center;
  font-size: 0.9rem !important;
  font-weight: normal;
  text-decoration: none !important;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 auto;
}

.footer--bottom-text a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none !important;
  transition: color 0.25s ease-in-out;
}

.footer--bottom-text a:hover {
  color: #fff;
}
.submit-button{
  margin-top: 35px;
  background: #033e66;
}
.contact-header{
  color: #fff !important
}
.content .container form .step .form-group input.is-invalid,
.content .container form .step .form-group textarea.is-invalid,
.content .container form .step .form-group select.is-invalid {
    border: 1px solid #dc3545 !important;
}

.whatsapp-float {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 999;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #25d366;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease-in-out;
}

.whatsapp-float:hover {
  transform: scale(1.08);
}

@media (max-width: 575.9px) {
  .whatsapp-float {
    bottom: 16px;
    left: 16px;
    width: 50px;
    height: 50px;
  }

  .whatsapp-float svg {
    width: 25px;
    height: 25px;
  }
}

/* ===== Footer bottom segments ===== */
.footer--bottom-sep {
  margin-inline: 0.35rem;
  opacity: 0.6;
}

/* ===== Footer — tablet ===== */
@media (max-width: 991.9px) {
  .footer--top {
    padding: 3rem 0 2.5rem;
  }

  .footer--brand-col {
    grid-column: 1 / -1;
  }
}

/* ===== Footer — mobile ===== */
@media (max-width: 575.9px) {
  .footer--top {
    padding: 2.5rem 0 1.75rem;
  }

  .footer--top-wrapper {
    row-gap: 0;
  }

  /* each section separated by a subtle divider */
  .footer--brand-col,
  .footer--links-col,
  .footer--contact-col {
    padding: 1.5rem 0;
  }

  .footer--brand-col {
    padding-top: 0;
    gap: 0.75rem;
  }

  .footer--links-col,
  .footer--contact-col {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .footer--contact-col {
    padding-bottom: 0;
  }

  .footer--logo {
    align-self: center;
    max-height: 56px;
  }

  .footer--tagline {
    font-size: 0.95rem !important;
    margin-inline: auto;
  }

  .footer--top-wrapper h2 {
    text-align: center;
    font-size: 1.1rem !important;
    margin-bottom: 1.1rem;
    padding-bottom: 0.75rem;
  }

  /* quick links as centered chips in one row */
  .footer--links-col ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }

  .footer--links-col ul li:not(:first-child) {
    margin-top: 0;
  }

  .footer--links-col ul li a {
    padding: 0.6rem 1rem;
    border-radius: 50px;
    background-color: rgba(255, 255, 255, 0.08);
    font-size: 0.9rem !important;
    color: #fff;
  }

  .footer--links-col ul li a::before {
    display: none;
  }

  .footer--links-col ul li a:hover {
    gap: 0.5rem;
    background-color: #dc3545;
  }

  /* contact buttons full width & centered */
  .footer--contact-items {
    width: 100%;
    max-width: 320px;
    align-items: stretch;
    margin-bottom: 1.25rem;
  }

  .footer--top-phone {
    justify-content: center;
    padding: 0.8rem 1rem;
    font-size: 1.05rem !important;
  }

  .footer--top-email {
    font-size: 0.95rem !important;
  }

  .footer--top-phone:before {
    width: 18px;
    height: 18px;
  }

  .footer--top-social-list li a {
    width: 44px;
    height: 44px;
  }

  /* bottom bar: one item per line, keep clear of the WhatsApp button */
  .footer--bottom {
    padding: 1.25rem 0 5.5rem;
  }

  .footer--bottom-text {
    font-size: 0.8rem !important;
    line-height: 1.8;
  }

  .footer--bottom-item {
    display: block;
  }

  .footer--bottom-brand {
    font-weight: 700;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.15rem;
  }

  .footer--bottom-sep,
  .footer--bottom-br {
    display: none;
  }
}