/* Header-first-topnav */

/* style.css */
/* Define the font-face for Euclid Circular A */
/* @font-face {
    font-family: 'Euclid Circular A';
    src: url("https://fonts.cdnfonts.com/css/euclid-circular-a");
    font-weight: 500;
    font-style: normal;
} */
#loader {
  display: flex;
  position: fixed;
  /* top: 0;
  left: 0; */
  width: 100vw; /* Full screen width */
  height: 100vh; /* Full screen height */
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255); /* Slightly transparent white background */
  z-index: 9999; /* Ensure it's above all other elements */
}



:root {
  --primary_red: #C91F3B;
  --primary-blue: #0099FF;
  --text_color: #666666;
  --secondary_color_1: #FFFFFF;
  --secondary_color_2: #F8F9FD;
  --success_color: #22CA46;
  --error_color: #FAE9EB66;
  --primary_black_color: #2B3339;
  --primary__light_red_color: #FAE9EB;
}

/* styles.css */
@font-face {
  font-family: 'Euclid Circular A';
  src: url('./assets/fonts/EuclidCircularA-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Euclid Circular A';
  src: url('./assets/fonts/EuclidCircularA-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Euclid Circular A';
  src: url('./assets/fonts/EuclidCircularA-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}



.hero-section{
    /* background-color: var(--primary-color-red); */
    background-image: url("/static/images/assets/redbanner.png") ;
    color: white;
    background-size: cover;
    background-position: center;
    height: 50vh;

}

.red-line {
  width: 50px; /* Adjust width as needed */
  height: 2px; /* Adjust height as needed */
  background-color: red;
  margin-bottom: 8px; /* Spacing below the line */
  /* border: 1 px; */
}

.hero-vector-left{
    /* position: fixed; */
    /* /* width: 50%; */
    height: 100%; 
    left: -10%;
    top: 0%;
    }
@media (max-width: 576px) {
    .hero-vector-left {
        width: 100%; /* Further adjust width */
        height: 100%; /* Further adjust width */
        left: -40%;  /* Adjust left positioning */
        top: -5%;   /* Adjust top positioning */
    }
    .hero-section{
      height: 30vh;
    }

    .navigation-btn-left {
      left: 12%;
    }
  
    .navigation-btn-right {
      right: 12%;
    }
  
}

.hero-vector-right{
    /* position: fixed; */
    width: 50%;
    height: 100%;
    right: -40%;
    top: -16%;
    }
@media (max-width: 576px) {
    .hero-vector-right {
        width: 50%; /* Further adjust width */
        height: 100%; /* Further adjust width */
        right: -15%;  /* Adjust left positioning */
        top: -5%;   /* Adjust top positioning */
    }
}

.hero-main-text{
    font-weight: 700;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}


.hero-sub-text{
    /* font-family: 'Euclid Circular A';
    font-size: 25px; */
    font-weight: 700;
    line-height: 30px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    }

@media (max-width: 576px) {
  .hero-main-text {
      font-size: 22px !important; 
  }
  .hero-sub-text{
    font-size: 14px !important;
  }
}
body, header {
    font-family: 'Euclid Circular A', sans-serif;
    /* font-size: 16px;*/
    font-weight: 500;
    line-height: 23px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none; 
    
}

body{
  background-color: #F8F9FD;

}

.text-heading {

    font-weight: 700;
    line-height: 30px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}
.text-primary-color{
    color: #2B3339;
}
.bg-primary-color{
    background-color: #2B3339;
}
.text-primary-red{
    color: #C91F3B;
}
.text-secondary-color{
    color: #8D94AD;
}
.text-color{
    color: rgba(102, 102, 102, 1);
}
.form-element{
    width: 100%;
    border: 1px solid rgba(141, 148, 173, 0.3);
    border-radius: 5px;
    padding: 11px 20px;
    font-weight: 700;
}
.new-card{
    min-height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px !important;
}
.card-slider-image{
    max-height: 250px !important;
    &>img{
        max-height: 250px !important;
    }
}
.card-image-main-wrapper{
    max-height: 250px;

}
.card-image-pagination{
    top: auto !important;
    height: fit-content;
    /*background: white;*/
    bottom: 60px !important;
    display: flex;
    justify-content: center;

    .swiper-pagination-bullet-active{
        background-color: rgba(255, 255, 255, 1) !important;
        width: 16px !important;
        max-width: 16px !important;
        height: 4px !important;
        border-radius: 999px !important;
    }
    .swiper-pagination-bullet:not(.swiper-pagination-bullet-active){
        background-color: rgba(255, 255, 255, 0.6) !important;
        width: 10px !important;
        max-width: 10px !important;
        height: 4px !important;
        border-radius: 999px !important;
    }
}
.card-fav-icon-wrapper{
    max-height: 32px;
    height: 32px;
    width: 32px;
    max-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.text-left{
    text-align: left;
}
.notification-number{
    width: 15px;
    height: 15px;
    font-size: 10px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
    left: 65%;
}
.bg-secondary-color{
    background-color: #8D94AD;
}
.topnav-icon-wrapper{
    padding: 10px;
    border-radius: 5px;
    width: 33px;
    height: 33px;
}
.nav-link-spacing{
    padding: 5px !important;
}
.webkit-text-stroke{
    -webkit-text-stroke-width: 1px;
}
.gap-1\.5{
    gap: 0.375rem !important; /*6 px*/
}
.gap-3\.5{
    gap: 1.25rem !important; /*20 px*/
}
.gap-2\.5{
    gap: 0.75rem !important; /*12 px*/
}
.gap-8{
    gap: 32px !important; /*32 px*/
}
.py-10{
    padding-top: 40px !important; /*40 px*/
    padding-bottom: 40px !important; /*40 px*/
}
.py-2\.5{
    padding-top: 0.75rem !important; /*12 px*/
    padding-bottom: 0.75rem !important; /*12 px*/
}
.mt-2\.75{
    margin-top: 0.75rem !important; /*12 px*/
}
.px-2\.75{
    padding-left: 0.875rem !important; /*14 px*/
    padding-right: 0.875rem !important; /*14 px*/
}

.text-sm{
    font-size: 14px !important;
}
.text-lg{
    font-size: 18px !important;
}
.text-3xl{
    font-size: 32px !important;
}
.text-2xl{
    font-size: 24px !important;
}
.font-medium{
    font-weight: 500 !important;
}
.font-semibold{
    font-weight: 600 !important;
}
.vertical-divider{
    background-color: #868FA0;
    width: 1px;
    height: 20px;
}
.topnav {
    /* position: absolute;
    width: 1440px;
    height: 60px;
    left: 0px;
    top: 0px; */
    background: #F8F9FD;
    /* font-family: 'Euclid Circular A (M)'; */
    font-style: normal;
    font-size: 16px;
    font-weight: 500;
    line-height: 23px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

}

/* Navbar */


.navbar {
    /* box-sizing: border-box;
    position: absolute;
    width: 1440px;
    height: 80px;
    left: 0px;
    top: 60px; */
    background: #FFFFFF;
    border-bottom: 1px solid #F8F9FD;
}

/* Slider */

.slider {
    position: absolute;

}

.hero-section h1 {
    font-size: 2.5rem;
    font-weight: bold;
  }

  .hero-section p {
    font-size: 1.2rem;
  }

  .car-image-container {
    position: absolute; 
    top: 40%;   
  
  }
  @media (max-width: 400px) {
    .car-image-container{
      position: absolute; 
      margin-top: 10%;
      top: 100%;
      display: none;
    }
}

  .car-image {
    max-width: 100%;
    height: auto;
    /* z-index: 5; */
  }
 
  .custom-seperator-line {
    border: 2px solid; /* Adjust thickness and color */
    border: 2px solid var(--primary-color-red); /* Adjust thickness and color */
    /* border-color: var(--primary-color-red); */
    width: 3%;            /* Adjust width */

}



  .navigation-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 150px;
    /* translate: translateY(-100%); */
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .navigation-btn:hover {
    background-color: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.2);

  }

  .navigation-btn-left {
    left: -5%;
  }

  .navigation-btn-right {
    right: -5%;
  }


  .vehicle-card {
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  .vehicle-card img {
    max-width: 100%;
    border-radius: 10px;
  }
  .vehicle-card .price {
    color: #e60000;
    font-weight: bold;
  }
  .vehicle-card .old-price {
    text-decoration: line-through;
    color: #888;
  }
  .vehicle-card .view-details {
    color: #007bff;
    text-decoration: none;
  }
  .vehicle-card .view-details:hover {
    text-decoration: underline;
  }


  .light-red-container {
    background-color: #FAE9EB;
    ;
  }
  .form-container {
    max-width: 500px;
    margin: 50px auto;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  }
  .btn-custom {
    background-color: #d82f2f;
    color: #fff;
    border: none;
  }
  .btn-custom:hover {
    background-color: #bf2929;
  }

body {
  background: #F9F9F9 !important;
  font-family: 'Euclid Circular A', sans-serif;

}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Euclid Circular A', sans-serif;
}

p {
  font-family: 'Euclid Circular A', sans-serif;
}

.breadcrumb-item>a {
  color: var(--primary_red) !important;
}

/* .active {
  color: var(--text_color) !important;
} */

.quick-filters {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  background: var(--secondary_color_1);
}

.quick-filters .btn {
  font-family: 'Euclid Circular A', sans-serif;
  border-radius: 5px !important;
  border: 1px solid #8D94AD !important;
}

.filters-box {
  background: var(--secondary_color_1) !important;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.filter-tag {
    border-radius: 5px;
    height: 34px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding:5px 12px;
    background-color: #2B3339;
    span{
        color: white;
        font-size: 16px;
        font-weight: 500;
    }
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
    @media (max-width: 767px) {
        /*flex-direction: column;*/
        /*gap: 10px;*/
        /*align-items: flex-start;*/
    }
}
#total-page-view{
    font-size: 18px;
}
@media (max-width: 767px) {
    #total-page-view{
        font-size: 14px;
    }
}

.table th {
  background-color: var(--primary_black_color) !important;
  color: white;
}

.details-button {
  border-radius: 5px;
}

.results-table {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
}
.search-result-mobile-wrapper{
    background: white;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
    padding: 10px;
}

.table th {
  background-color: var(--primary_black_color) !important;
  color: white;
}

.table-bg {
  background: var(--secondary_color_1) !important;
  padding: 10px;
}

.details-button {
  border-radius: 5px;
}

.more-details {
  text-align: center;
  background-color: var(--primary__light_red_color);
  color: #721c24;
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
  /* font-weight: bold; */
}


.steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  position: relative;
}

.step-button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid black;
  background-color: var(--prm-gray);
  transition: .4s;
}

.step-button[aria-expanded="true"] {
  width: 30px;
  height: 30px;
  background-color: var(--prm-color);
  color: #000000;
}

.done {
  background-color: var(--prm-color);
  color: #000000;
}

.step-item {
  z-index: 10;
  text-align: center;
}

#progress {

  position: absolute;
  width: 95%;
  z-index: 5;
  height: 10px;
  margin-left: 18px;
  margin-bottom: 18px;
}

/* to customize progress bar */
#progress::-webkit-progress-value {
  background-color: var(--prm-color);
  transition: .5s ease;
  color: #000000;
}

#progress::-webkit-progress-bar {
  background-color: var(--prm-gray);

}

.btn-primary{
 background-color: var(--primary-blue);
}


.car-sale-card .swiper {
  width: 100%;
  height: 300px;
}

.car-sale-card .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  height: 300px;

  justify-content: center;
  align-items: center;
}

.car-sale-card .swiper-slide img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.swiper-button-next, .swiper-button-prev {
  background-color: transparent;
  color: white !important; /* Default icon color */
  border-radius: 50%; /* Round buttons */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease; /* Smooth transition */
  font-size: 12px;
}


/* Style for the Active Navigation Button */
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
  opacity: 0.3; /* Disable opacity for inactive buttons */
}

/* Pagination Style */
.swiper-pagination-bullet {
  background-color: #474d52 !important; /* Default color for the bullets */
  opacity: 0.6; /* Slightly transparent by default */
  width: 25px !important;
  height: 3px !important;
  border-radius: 0 !important; /* Remove rounded corners */
  transition: background-color 0.3s ease, opacity 0.3s ease; /* Smooth transition */
}

.swiper-pagination-bullet-active {
  background-color: white !important; /* Active bullet color (red) */
  opacity: 1; /* Full opacity for active bullet */
}

/* Pagination Bullet Hover */
.swiper-pagination-bullet:hover {
  opacity: 1; /* Full opacity when hovered */
}


    
/* .text-muted {
  color: #666666 !important;
} */
.language-switcher .language-select {
    width: auto;
    min-width: 3.5rem;
    background-color: transparent;
    border: none;
    color: #2B3339;
    padding-right: 1.5rem;
}
.language-switcher .language-select:focus {
    box-shadow: none;
    border: none;
}

.language-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}