html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--background);
}

body::-webkit-scrollbar {
  width: 4px;
}

body::-webkit-scrollbar-track {
  border-radius: 10px;
}

body::-webkit-scrollbar-thumb {
  background: var(--color-3);
  border-radius: 10px;
}

body::-webkit-scrollbar-thumb:hover {
  background: var(--color-3);
}

:root {
  --themebg: #132739;
  --theme-secondary: #eb282e;
  --white: #fff;
  --greey: #3c3c3c;
  --f-fam: "DM Sans", sans-serif;
  --f-fam-p: "Urbanist", sans-serif;
  --color-3: #f5b754;
  --bgcolor: #f2f4f680;
}

.black-dark {
  color: var(--color-white-black);
}

.white-color {
  color: #fff !important;
}

.bg-white-color {
  background-color: var(--background-color-white) !important;
  color: var(--tabletextcolor);
}

.black-color {
  color: var(--color-white-black);
}

.h4,
h4 {
  margin-top: 0;
  margin-bottom: 0rem;
}

.theme-color {
  color: var(--color-3);
}

.radius-12 {
  border-radius: 12px;
}

ol,
ul {
  padding-left: 0rem;
}

.txt-clr-1 {
  color: var(--themebg);
}

.txt-clr-2 {
  color: var(--greey);
}

.txt-clr-3 {
  color: var(--theme-secondary);
}

.txt-clr-4 {
  color: var(--white);
}

.h2cls {
  font-size: 35px;
  font-family: var(--f-fam);
  font-weight: 700;
  color: var(--color-white-black);
}

.h3cls {
  font-size: 20px;
  font-weight: 600;
  font-family: var(--f-fam);
  color: var(--color-white-black);
}

.spantxt {
  font-size: 16px;
  font-weight: 400;
  font-family: var(--f-fam-p);
}

.color737373 {
  color: #808291;
}

.mt-60 {
  margin-top: 60px;
}

a {
  text-decoration: none;
}

.firsttr {
  background-color: var(--bgcolor);
}

a.pj-h:hover {
  color: var(--white);
}

p {
  margin-bottom: 0rem;
}

.margin-top-60 {
  margin-top: 60px;
}

.margin-bottom-60 {
  margin-bottom: 60px;
}

.alert.alert-danger {
  font-family: var(--f-fam-p);
}

.alert.alert-success {
  font-family: var(--f-fam-p);
}

.icon-color-theme {
  color: var(--color-3);
}

.table th {
  color: var(--tabletextcolor);
  border: 1px solid var(--border1-bgwhite);
}

#phone {
  pointer-events: auto;
  /* Ensure the input is interactable */
  z-index: 1;
  /* Ensure it's not hidden behind another element */
  position: relative;
  /* Prevent overlap issues */
}

.nav-link {
  color: var(--color-white-black);
}

.form-control {
  font-family: var(--f-fam-p);
  background-color: var(--bgcolor);
  border: 1px solid var(--border1-bgwhite);
  color: var(--color-white-black);
}

.form-control:disabled {
  background-color: var(--tablepopinput);
}

/* header css */
.icon-cart {
  color: var(--white);
  margin-left: 10px;
  position: relative;
}

.icon-cart:hover,
.icon-cart:active,
.icon-cart:focus {
  color: var(--white);
}

.icon-cart .cart-vall {
  text-align: center;
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background-color: var(--theme-secondary);
  color: #fff;
  top: -15px;
  font-size: 13px;
  line-height: 25px;
}

.header-mobile {
  display: none;
}

.location-open {
  background-color: transparent;
  border-radius: 50px;
  border: .5px solid hsla(0, 0%, 100%, .2);
  padding: 0.5rem 1rem;
  color: var(--white);
  display: none;
}

.search-navbar {
  position: relative;
  margin: 0px 10px;
}

.search-navbar i {
  position: absolute;
  z-index: 1;
  color: hsla(0, 0%, 100%, .2);
  cursor: pointer;
  right: 15px;
  top: 11px;
}

.search-navbar input {
  color: #ffffff81;
  background: transparent;
  border: .5px solid hsla(0, 0%, 100%, .2);
  border-radius: 50px;
  min-height: 40px;
  min-width: 100%;
  padding: 0px;
  padding-left: 1rem;
  padding-right: 2.5rem;
  font-size: 1rem;
}

.search-navbar input:hover,
.search-navbar input:active,
.search-navbar input:focus,
.search-navbar input:focus-within,
.search-navbar input:focus-visible {
  border: .5px solid hsla(0, 0%, 100%, .2);
  box-shadow: none;
  outline: 0px;
}

.navbar-brand img {
  width: 170px;
  height: auto;
}

.theme-bg {
  /* background-color: var(--themebg); */
  background-color: #13273900;
  padding: 0.4rem 0rem;
  color: var(--white);
}

header a.nav-link,
header a.nav-link.active,
.navbar-brand {
  color: var(--white) !important;
}

a.a-shortlist {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.a-shortlist span {
  font-size: 0.8rem;
}

.a-account::after {
  display: inline-block;
  margin-left: .255em;
  vertical-align: .255em;
  content: "";
  border-top: .3em solid;
  border-right: .3em solid transparent;
  border-bottom: 0;
  border-left: .3em solid transparent;
  position: absolute;
  right: -8px;
  top: 32px;
}

.a-call {
  color: #ffffff81;
  background: transparent;
  border: .5px solid hsla(0, 0%, 100%, .2);
  border-radius: 50px;
  min-height: 40px;
  padding: 0rem 8rem;
  font-size: 1rem;
  gap: 10px;
  min-width: 140px;
  justify-content: center;
  margin-left: 22px;
}

.secondary-nav {
  padding: 0rem 1rem;
}

.f-fam {
  font-family: var(--f-fam);
}

.f-fam-p {
  font-family: var(--f-fam-p);
}

.fweight-600 {
  font-weight: 600;
}

.nav-tabs {
  border-bottom: 1px solid var(--border1-bgwhite);
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: #fff !important;
  background-color: var(--color-3) !important;
  font-family: var(--f-fam) !important;
}

.nav-tabs .nav-link {
  font-family: var(--f-fam) !important;
}

.labeltext {
  font-size: 18px !important;
  font-family: var(--f-fam) !important;
  margin-bottom: 5px !important;
}

.formicon {
  color: var(--color-3) !important;
  font-size: 18px !important;
}

.car_edit .form-control {
  font-family: var(--f-fam-p) !important;
  background-color: #dddddd52 !important;
  font-size: 15px !important;
  margin-bottom: 10px !important;
}

.note-editable.card-block p {
  font-family: var(--f-fam-p);
}

/* second header css */
.theme-bg-secondary {
  background-color: var(--theme-secondary);
  padding: 0.8rem;
}

.btn-theme-1.update-btn {
  cursor: pointer;
}

.btn-success2 {
  background-color: #000;
  color: #fff;
  font-family: var(--f-fam);
}

.btn-success2:hover {
  background-color: #000;
  color: #fff;
}

.more-dropdowns {
  display: flex;
  align-items: center;
  gap: 15px;
}

.more-dropdowns button.dropdown-toggle {
  color: var(--white);
  background-color: transparent;
  border: none;
  padding: none;
}

.expolre-by {
  font-size: 14px;
  color: #ffffffdf;
  display: inline-block;
  padding-left: 10px;
}

/* banner */
.banner-wrap {
  position: relative;
}

.banner-content {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  top: 0;
  left: 0;
  background: linear-gradient(90deg, rgba(19, 39, 57, 1) 25%, rgba(249, 249, 249, 0) 100%);
  display: flex;
  align-items: center;
}

.banner-wrap img {
  width: 100%;
  height: 100%;
}

.banner-content h1 {
  color: var(--white);
  font-size: 4rem;
}

.banner-content p {
  color: var(--white);
  font-size: 2rem;
}

.btn-banner {
  background: transparent;
  border: 2px solid var(--white);
  border-radius: 100px;
  min-width: 170px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  color: var(--white);
  padding: 1rem 0rem;
  font-size: 16px;
  transition: 300ms;
}

.btn-banner:hover {
  transition: 300ms;
  background-color: var(--theme-secondary);
  color: var(--white);
  border-color: var(--theme-secondary)
}

.desc-ription {
  color: var(--white);
  display: block;
  width: 43%;
  margin-bottom: 20px;
}

.pt-100 {
  padding-top: 100px;
}

.pb-70 {
  padding-bottom: 70px;
}

/*  */

/* buy sel  css */
.section-pd {
  padding: 5rem 0rem;
}

.buy-sell-wrap {
  background-color: #13273914;
  /* background-color: #eb282e21; */
}

.buy-sell-tab li button,
.detail-page-tabs a {
  color: var(--themebg) !important;
  min-width: 118px;
  background-color: #13273914 !important;
  border-radius: 0px !important;
  padding-top: 15px;
  padding-bottom: 15px;
}

.buy-sell-tab li:nth-child(1) button,
.detail-page-tabs a:nth-child(1) {
  border-top-left-radius: 50px !important;
  border-bottom-left-radius: 50px !important;
}

.buy-sell-tab li:nth-child(2) button,
.detail-page-tabs a:nth-child(2) {
  border-top-right-radius: 50px !important;
  border-bottom-right-radius: 50px !important;
}

.buy-sell-tab li button.active,
.detail-page-tabs a.active {
  background-color: #000 !important;
  color: #fff !important;
  -webkit-box-shadow: 0px 21px 18px -13px rgba(0, 0, 0, 0.65);
  -moz-box-shadow: 0px 21px 18px -13px rgba(0, 0, 0, 0.65);
  box-shadow: 0px 21px 18px -13px rgba(0, 0, 0, 0.65);
}

.buy-sell-content {
  background-color: var(--white);
  border-radius: 1rem;
  margin-top: 2.5rem;
  padding: 1rem;
  box-shadow: 0px 6px 9px 3px #d7d7d7;
}

.img-box {
  position: relative;
  min-width: 234px;
  max-width: 234px;
  height: 200px;
  overflow: hidden;
}

.img-box img {
  min-width: 234px;
  max-width: 234px;
  height: 200px;
  min-width: 234px;
  max-width: 234px;
  height: 200px;
  object-fit: cover;
  border-radius: 1.2rem;
}

.related-product-box .product-fruit-wrapper {
  position: relative;
  border: 1.2px solid #c2c2c2;
  border-radius: 15px;
  overflow: hidden;
  min-height: 312px;
  margin-bottom: 25px;
}

.related-product-box .product-fruit-content {
  border-top: 1.2px solid #c2c2c2;
  padding: 1rem;
  margin-top: 1rem;
}

.ft-020 {
  font-size: 20px;
}

.related-product-box .product-fruit-wrapper .product-furit-action {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 1;
  display: flex;
  gap: 10px;
}

.related-product-box .product-furit-action .furit-animate-left {
  background: var(--themebg);
  color: #fff;
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-radius: 100%;
  cursor: pointer;
}

.related-product-box .product-furit-action .furit-animate-right {
  background: var(--theme-secondary);
  color: #fff;
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-radius: 100%;
  cursor: pointer;
}

.related-product-box .product-fruit-img img {
  width: 100%;
  height: 171px;
  object-fit: cover;
}

.box-overlay {
  position: absolute;
  left: 0;
  top: 0;
  background-color: #1327393d;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 1.2rem;
}

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

.box-point {
  flex-direction: column;
}

.box-point p {
  width: 85%;
  text-align: center;
}

.btn-theme-1 {
  background: transparent;
  border: 1px solid var(--color-3);
  border-radius: 12px;
  min-width: 150px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  color: var(--color-3);
  padding: 15px;
  font-family: var(--f-fam);
  font-size: 16px;
  transition: 300ms;
}

.btn-theme-1:hover,
.btn-theme-1:active,
.btn-theme-1:focus {
  background-color: var(--color-3);
  border-color: var(--color-3);
  color: var(--white);
}

.img-blue-car {
  width: 85%;
}

.sell-points ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.sell-points ul span {
  display: inline-block;
  background: var(--theme-secondary);
  color: #fff;
  width: 25px;
  height: 25px;
  text-align: center;
  border-radius: 100%;
  line-height: 28px;
}

.sell-points ul li {
  margin-bottom: 30px;
}

.anc-brand {
  align-items: center;
  background-color: #13273914;
  border: none;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 75px;
  justify-content: center;
  width: 108px;
  border: 1px solid transparent;
  transition: 300ms;
  text-decoration: none;
}

.anc-brand img {
  width: 60px;
  height: 30px;
  object-fit: contain;
}

.anc-brand:hover {
  transition: 300ms;
  border: 1px solid var(--themebg)
}

.styles__carBrandName {
  font-size: 12px;
  color: var(--greey);
  margin: 0;
}

.car_brands {
  flex-wrap: wrap;
  gap: 16px;
}

.svgs img {
  width: 150px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.sell-child-wrap-flex {
  display: flex;
}

/* buy sell sldier css */
.owl-custom .img-box,
.owl-custom .img-box img,
.car-categories .img-box,
.car-categories .img-box img {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.best-buy .box-overlay,
.car-categories .box-overlay {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.best-buy a {
  text-decoration: none;
  color: unset;
}

.card-data {
  padding: 0.5rem;
  border: 1px solid #e7e7e7;
  border-radius: 0.5rem;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  position: relative;
  border-top: transparent;
  padding-top: 0.8rem;
}

.yearAndMake {
  max-width: calc(100% - 30px);
  overflow: hidden;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 75%;
}

.styles__otherInfoSection {
  font-size: 14px;
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
  gap: 10px;
}

.price-val {
  font-size: 20px;
}

.fa-1xs {
  font-size: 4px;
  margin-right: 5px;
}

.styles__otherInfoSection li {
  display: inline-flex;
  align-items: center;
}

.card-data small {
  font-size: 12px;
}

.location-wrap {
  padding-top: 0.2rem;
  margin-top: 0.2rem;
  border-top: 1px solid #efefef;
}

.card-data .save-fav {
  position: absolute;
  z-index: 9;
  right: 10px;
  top: 12px;
  cursor: pointer;
}

.cart-ico {
  position: absolute;
  z-index: 9;
  right: 40px;
  top: 12px;
  cursor: pointer;
}

.best-buy button.owl-prev,
.car-across button.owl-prev,
.frontdoor-buzz-slider button.owl-prev,
.frontdoor-stories button.owl-prev {
  width: 30px !important;
  height: 30px !important;
  background: #000 !important;
  border-radius: 5px !important;
  line-height: 4px !important;
  color: white !important;
  font-size: 20px !important;
  position: absolute;
  left: -54px;
  top: 35%;
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

.best-buy button.owl-next,
.car-across button.owl-next,
.frontdoor-buzz-slider button.owl-next,
.frontdoor-stories button.owl-next {
  width: 30px !important;
  height: 30px !important;
  background: #000 !important;
  border-radius: 5px !important;
  line-height: 4px !important;
  color: white !important;
  font-size: 20px !important;
  position: absolute;
  right: -54px;
  top: 35%;
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

.best-buy .owl-prev span,
.best-buy .owl-next span {
  font-size: 28px !important;
}

.best-buy .box-point {
  transition: 320ms;
}

.best-buy .box-point:hover {
  transition: 300ms;
  transform: scale(1.01);
}

/* #body-base li:nth-child(2) button {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
} */

/* #body-base li:last-child button {
  border-top-right-radius: 50px !important;
  border-bottom-right-radius: 50px !important;
} */

/* #body-base li button {
  font-size: 12px;
} */
/*
footer {
  background-color: #1b1b1b;
}

.footer ul {
  padding: 0;
  margin: 0;
}

.footer ul li {
  list-style-type: none;
  line-height: 28px;
}

.footer ul li a {
  text-decoration: none;
  color: rgb(157 156 156);
  font-weight: 400;
}

.nd-ul {
  margin-top: 35px !important;
}

.last-ul li a {
  margin-right: 10px;
}

.footer-theme a {
  max-width: 95px !important;
  min-width: 145px;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
} */

.socaial-links a {
  /* color: var(--white);
text-decoration: none;
transition: 300ms;
font-size: 22px;
margin-right: 12px; */

}

/*

.socaial-links a:hover {
  transition: 300ms;
  color: var(--theme-secondary);
}

.promo-line {
  margin-top: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid #4e4e4e;
} */



/* moblile menu */

.mobile-bottm {
  position: fixed;
  left: 50%;
  bottom: 0px;
  transform: translateX(-50%);
  border-radius: 20px 20px 0px 0px;
  width: 100%;
  z-index: 9;
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0px 40px;
  background: var(--color-3);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease-out;
}

.mobile-bottm a {
  color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  gap: 4px;
  font-family: var(--f-fam-p);
  padding: 10px;
  position: relative;
  transition: all 0.4s ease-out;
}

.mobile-bottm a i {
  font-size: 18px;
  transition: transform 0.4s ease-out, color 0.4s ease-out;
}

.mobile-bottm a:hover i {
  transform: scale(1.3) rotate(10deg);
  color: var(--primary-color);
}

/* Active State */
.mobile-bottm a.active-bot {
  background: var(--background-color-white);
  padding: 7px 10px;
  border-radius: 100px;
  position: relative;
  top: -18px;
  transform: scale(1.0);
  color: var(--color-white-black);
  font-size: 11px;
  border: 1px solid var(--border1-bgwhite);
}

.mobile-bottm a.active-bot i {
  color: var(--primary-color) !important;
  transform: scale(1.0) rotate(0deg);
  transition: all 0.3s ease-out;
}

/* Adding Glow Effect on Active */
.mobile-bottm a.active-bot::before {
  /* content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  background: rgba(0, 123, 255, 0.3);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  opacity: 0.6;
  transition: all 0.4s ease-out; */
}

.mobile-bottm a.active-bot:hover::before {
  opacity: 0.8;
  transform: translate(-50%, -50%) scale(1.2);
}


/* main-brands */
.main-brands,
.car-freedom-buzz {
  background-color: #13273914;
}

.main-brands .anc-brand {
  width: 100%;
  height: 105px;
  background-color: #fff;
}

.main-brands .anc-brand:hover {
  box-shadow: 1px 5px 13px 0px #a8a8a8;
}

/*  */
/* car across */
.big-box-city {
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 3rem 1rem;
}

.car-across-img {
  width: 180px;
  height: 180px;
  border-radius: 100%;
  border-top-right-radius: 10%;
  overflow: hidden;
  margin-top: 2rem;
  margin-bottom: 2rem;
  border: 4px solid #fff;
}

.car-across-img {
  display: block;
}

.clr-pink {
  background-color: var(--theme-secondary);
}

.clr-blue {
  background-color: var(--themebg);
}

.clr-gr {
  background-color: #0c9441;
}

.clr-redd {
  background-color: #940c0c;
}

.clr-mh {
  background-color: #ac7700;
}

.car-across button.owl-next,
.car-across button.owl-prev {
  top: 45%;
}

.car-freedom-buzz button.owl-next,
.car-freedom-buzz button.owl-prev {
  top: 42%;
}

/* blog city */
.blog-city {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
}

.blog-city img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}

.blog-city a {
  display: flex;
  flex-direction: column;
  position: absolute;
  justify-content: end;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 1rem;
  background-color: #1327398c;
  color: var(--white);
  gap: 12px;
}

.blog-city h4 {
  margin: 0px;
  line-height: 22px;
}

/* insight-box */
.insight-box {
  border-radius: 15px;
  min-height: 180px;
  background-color: #eb283175;
  padding: 1rem;
  gap: 15px;
}

.insight-box svg {
  width: 180px;
  height: 75px;

}

.insight-box p {
  margin: 0px;
}

/* frontdoor stories */
.frontdoor-stories .blog-city img {
  min-height: 430px;
}

.frontdoor-stories .blog-city a {
  gap: 0px;
}

.ico-32 {
  width: 24px !important;
  height: 24px !important;
  min-height: unset !important;
  margin-right: 10px;
}

.no-mt {
  font-size: 16px;
  margin: 0px;
}

.st-small {
  line-height: 17px !important;
  font-weight: 400 !important;
  margin-top: 10px !important;
}

.inner-logo {
  width: 142px !important;
  height: auto !important;
  min-height: unset !important;
  position: absolute;
  object-fit: contain !important;
  top: 15px;
}

.icons-tab button {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

.icons-tab button img {
  width: 42px;
  height: auto;
  filter: invert(0.7);
}

.icons-tab button.active img {

  filter: none;
}

/* detail page */
.product-details-large img {
  border-radius: 15px;
  width: 100%;
  height: 100%;
}

.product-details-small a img {
  min-height: 82px;
  border-radius: 10px;
  object-fit: cover;
  min-width: 130px;
}

.product-details-small {
  display: flex;
  gap: 15px;
}

/* .product-details-content {
  border-radius: 15px;
  border: 1px solid #efefef;
  padding: 1rem;
} */

.quick-view-number {
  gap: 15px;
}

.rate-nan {
  color: #ababab;
  font-size: 14px;
}

.details-price {
  padding: 0.5rem 0rem;
  margin: 0.5rem 0rem;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  font-size: 22px;
  font-weight: 800;
}

.wrap-cart-box .cartBox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  /* justify-content: space-around; */
}

.cartPlusMinus span:nth-child(1),
.cartPlusMinus span:nth-child(1):active,
.cartPlusMinus span:nth-child(1):focus {
  height: 35px;
  line-height: 35px;
  background: #132739;
  color: #fff !important;
  width: 35px;
  border-radius: 0px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  display: inline-block;
  transform: translate(5px, 0px);
}

.cartPlusMinus span:nth-child(3),
.cartPlusMinus span:nth-child(3):active,
.cartPlusMinus span:nth-child(3):focus {
  height: 35px;
  line-height: 35px;
  background: #132739;
  color: #fff !important;
  width: 35px;
  border-radius: 0px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  display: inline-block;
  transform: translate(-5px, 0px);
}

.cartQty {
  width: 70px;
  height: 35px;
  text-align: center;
  display: inline-block;
  line-height: 35px;
  background: #1327391f;
}

.quickview-btn-cart a {
  display: block;
  background: var(--color-3);
  color: #fff;
  padding: 10px 20px;
  text-align: center;
  border-radius: 12px;
  font-family: var(--f-fam);
}

.quickview-btn-wishlist a {
  display: block;
  background: var(--color-3);
  color: #fff;
  padding: 10px 20px;
  text-align: center;
  border-radius: 12px;
  text-transform: capitalize;
  font-family: var(--f-fam);
}

.product-details-cati-tag ul,
.product-share ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.categories-tags {
  display: flex;
}

.product-details-cati-tag ul li a,
.product-details-cati-tag ul li span,
.product-share ul li a {
  background-color: #e2e5e7;
  color: #132739;
  display: block;
  padding: 0.2rem 0.8rem;
  font-size: 14px;
  border-radius: 50px;
}

.categories-title {
  display: none;
}

/* login */
.custom-container {
  width: 65%;
  margin: 5rem auto;
}

.login-form-container input.form-control,
.login-form-container select.form-control {
  border: 1px solid var(--border1-bgwhite);
  height: 56px;
  box-shadow: none;
  font-size: 16px;
  width: 100%;
}

.login-form-container textarea {
  border: 1px solid var(--border1-bgwhite);
  height: 56px;
  box-shadow: none;
  font-size: 16px;
  width: 100%;
  padding: .375rem .75rem;
}

.login-form-container input.form-control:focus,
.login-form-container input.form-control:active,
.login-form-container input.form-control:focus-visible,
.login-form-container input.form-control:focus-within,
.login-form-container textarea:focus,
.login-form-container textarea:active,
.login-form-container textarea:focus-visible,
.login-form-container textarea:focus-within {
  box-shadow: none !important;
  /* border-color: var(--themebg); */
}

.form-control:focus {
  box-shadow: none !important;
  border-color: var(--color-3);
  background-color: var(--background-color-white);
  color: var(--color-white-black);
}

.box-log-reg {
  background-color: #eceeef;
  padding: 1.5rem;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.btn-login {
  background-color: var(--color-3);
  padding: 13px 24px;
  font-size: 16px;
  font-family: var(--f-fam-p);
  border: none;
  border-radius: 10px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  color: var(--white);
  transition: 300ms;
  width: 100%;
}

.btn-reg {
  background: var(--color-3);
  border: none;
  border-radius: 12px;
  min-width: 45%;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  color: var(--white);
  padding: 0.6rem 0rem;
  font-size: 16px;
  transition: 300ms;
  font-size: 15px;
  font-family: var(--f-fam-p);
  border: 1px solid #fff;
}

.btn-reg:hover {
  background-color: #000;
  color: #fff;
}

.forgot-pas,
.forgot-pas:hover {
  color: var(--themebg);
}

.btn-reg:hover,
.btn-login:hover {
  transition: 300ms;
  color: var(--white) !important;
  opacity: 0.7;
}

.form-check-input:checked {
  background-color: #008141;
  border-color: #008141;
  border-radius: 0;
}

.form-check-input:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: none;
}

.h-divider {
  border-bottom: 1px solid #13273930;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}

.btn-fb {
  background-color: #1877F2;
  color: #FFFFFF;
  width: 100%;
  height: 45px;
  line-height: 30px;
  border-radius: 50px;
}

.login-img {
  margin-left: -25px;
  overflow: hidden;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  position: relative;
}

.login-img img.biggg-img {
  width: 100%;
  height: 500px;
  object-fit: cover;
}

.reg-img img.biggg-img {
  height: 500px !important;
}

#login-form .input-group-text {
  /* border-radius: 50px;
  box-shadow: inset 200px 75px 2px 2px #fff; */
}

.logo-obtain {
  position: absolute;
  background: radial-gradient(#eb282eb0, #132739);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.logo-obtain img {
  width: 225px;
}

.login-form-container .mb-3 {
  position: relative;
}

.login-form-container .mb-3 .text-danger {
  font-size: 12px;
  font-weight: 300;
  position: absolute;
  bottom: -20px;
}

.product-area h2 {
  margin-top: 2rem;
  text-align: left;
}

.detail-page-tabs .tab-pane p {
  text-align: left;
}

.blog-details.content {
  text-align: left;
}

.blog-details.content ul {
  padding-left: 0;
}

.blog-details.content ul .m-2 {
  margin: 0px !important;
  color: #808291;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--f-fam-p);
}

.blog-details.content .btn.btn-dark {
  border-radius: 50px;
}

.h-min-h {
  /* min-height: 20px;
  overflow: hidden;
  max-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap; */
  font-size: 17px;
  line-height: 25px;
  font-family: var(--f-fam);
  font-weight: 500;
  color: #000;
  margin-bottom: -3px;
}

.taglistcls {
  color: #132739;
  background-color: var(--bgcolor);
  border-radius: 15px;
  padding: 0.2rem 0.5rem;
  font-family: var(--f-fam-p);
  font-size: 14px;
  font-weight: 400;
}

.p-dezx {
  font-size: 15px;
  color: #808291;
  font-family: var(--f-fam-p);
  line-height: 27px;
}

.label-tag .small {
  color: #132739;
  background-color: #e2e5e7;
  border-radius: 15px;
  padding: 0.2rem 0.5rem;
}

.extra-min-h {
  min-height: 332px;
}

.loginp {
  color: var(--loginp);
  font-family: var(--f-fam-p);
  font-size: 17px;
}

.input_wrap {
  width: 100%;
  height: auto;
  position: relative;
  margin-bottom: 20px;
  /* space between inputs */
}

/* list -view */
.list-view-box .product-wrapper {
  border: 1px solid var(--border1-bgwhite);
  border-radius: 12px;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-bottom: 25px;
}

.p-dezx {
  margin: 0px;
}

.list-view-box .product-content-list {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.list-view-box .list-btn-style {
  background-color: var(--color-3);
  color: var(--white);
  padding: 0.5rem 0.8rem;
  border-radius: 10px;
  font-size: 16px;
  padding: 13px 24px;
  font-family: var(--f-fam);
}

.list-view-box .list-btn-wishlist {
  background-color: #000;
  color: var(--white);
  border-radius: 100%;
  width: 30px;
  display: inline-flex;
  height: 30px;
  align-items: center;
  justify-content: center;
  margin-left: 15px;
}

.list-view-box .product-img {
  height: 150px;
  display: flex;
  align-items: center;
  margin: 0px 20px 0px 20px;
}

.rto-page-wrapper.rto-page-padding.ptb-100 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.rto-page-wrapper.rto-page-padding.ptb-100 .icon .fa-circle-phone {
  font-size: 36px;
  color: #eb282e;
  line-height: 60px;
}

.shop-page-wrapper.shop-page-padding.ptb-100 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.gri-list-box {
  display: flex;
  margin-bottom: 20px;
  justify-content: space-between;
  align-items: center;
}

.gri-list-box .shop-tab a {
  width: 42px;
  background-color: #dbdee0;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  border-radius: 10px;
  color: var(--themebg);
}

.gri-list-box .shop-tab a.active {

  background-color: var(--themebg);
  color: var(--white);
}

.shop-selector select {
  padding: 0.5rem;
  border-radius: 50px;
  background: #132739;
  color: #fff;
}

/* pagination */
.pagination li a:active,
.pagination li a:focus,
.pagination li a:focus-within,
.pagination li a:focus-visible {
  box-shadow: none;
}

.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: var(--color-3) !important;
  border-color: var(--color-3) !important;
}

a.page-link {
  font-family: var(--f-fam-p);
}

.page-item:first-child .page-link {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

.page-item:last-child .page-link {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

/* Styling the pagination list */
ul.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

/* Styling the individual pagination items */
.page-item {
  margin: 0 4px;
}

.float-right {
  margin: 5px 0px;
}

@media screen and (max-width:554px) {
  .float-right {
    margin: 0px 0px;
  }
}

/* Styling the page links */
.page-link {
  display: block;
  padding: 10px 15px;
  font-size: 16px;
  color: #000;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 25px;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* Hover effect for page links */
.page-link:hover {
  background-color: var(--color-3);
  /* Change background on hover */
  color: #fff;
  /* White text on hover */
}

/* Active page styles */
.page-item.active .page-link {
  background-color: #000;
  /* Active page background color */
  color: #fff;
  /* Active page text color */
  pointer-events: none;
  /* Disable interaction on the active page */
}

/* Previous and next buttons */
.page-item a[rel="prev"],
.page-item a[rel="next"] {
  font-weight: bold;
  padding: 10px 15px;
  border-radius: 50%;
  background-color: #f0f0f0;
}

.page-item a[rel="prev"]:hover,
.page-item a[rel="next"]:hover {
  background-color: #000;
  color: #fff;
}

/* Optional: Responsive design for mobile screens */
@media (max-width: 768px) {
  .page-link {
    padding: 8px 12px;
    font-size: 14px;
  }
}


/* Styling the page links end */
/* shop sidebar css */
.shop-sidebar {
  /* position: relative; */
  border: 1.2px solid #c2c2c2;
  border-radius: 15px;
  min-height: 98vh;
  padding: 1rem;
}

.sidebar-categories ul {
  padding: 0px;
}


.sidebar-categories ul span {
  color: #132739;
  background-color: #e2e5e7;
  border-radius: 15px;
  padding: 0.2rem 0.5rem;
}

.sidebar-categories ul span a {
  color: var(--themebg);
}

.list-unstyled li a {
  color: #132739;
  background-color: #e2e5e7;
  border-radius: 15px;
  padding: 0.2rem 0.5rem;
  color: var(--themebg);
}


.dropdown-item.active,
.dropdown-item:active,
.dropdown-item:focus,
.dropdown-item:hover {
  color: #132739;
  text-decoration: none;
  background-color: #e2e5e7;
}

/* range bar */
.range-slider {
  width: 100%;
  text-align: center;
  position: relative;
}

.range-slider .rangeValues {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin-bottom: 0.3rem;
}

input[type=range] {
  -webkit-appearance: none;
  border: 1px solid white;
  width: 100%;
  position: absolute;
  left: 0;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  background: #ddd;
  border: none;
  border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: var(--themebg);
  margin-top: -6px;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ccc;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 5px;
  background: #ddd;
  border: none;
  border-radius: 3px;
}

input[type=range]::-moz-range-thumb {
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: var(--themebg);
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring {
  outline: 1px solid white;
  outline-offset: -1px;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 5px;
  /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
  background: transparent;
  /*leave room for the larger thumb to overflow with a transparent border */
  border-color: transparent;
  border-width: 6px 0;
  /*remove default tick marks*/
  color: transparent;
  z-index: -4;
}

input[type=range]::-ms-fill-lower {
  background: #777;
  border-radius: 10px;
}

input[type=range]::-ms-fill-upper {
  background: #ddd;
  border-radius: 10px;
}

input[type=range]::-ms-thumb {
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: var(--themebg);
}

input[type=range]:focus::-ms-fill-lower {
  background: #888;
}

input[type=range]:focus::-ms-fill-upper {
  background: #ccc;
}

/*--- /.price-range-slider ---*/

.search-box {
  position: relative;
}

.search-box input {
  width: 100%;
  height: 35px;
  border-radius: 50px;
  border: 0.5px solid #c2c2c2;
  padding-left: 15px;
  padding-right: 40px;
}

.search-box input:focus,
.search-box input:active,
.search-box input:focus-within,
.search-box input:focus-visible {
  border: 0.5px solid var(--themebg);
  box-shadow: none;
  outline: 0;
}

.search-box button {
  position: absolute;
  right: 1px;
  top: 0px;
  border: none;
  width: 35px;
  height: 34px;
  z-index: 1;
  background-color: var(--themebg);
  color: var(--white);
  /* border-radius: 100%; */
  font-size: 12px;
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
  line-height: 35px;
}

.drop-er-checks ul.dropdown-menu {
  position: static !important;
  transform: none !important;
  margin: 0;
  padding-left: 10px;
  background-color: var(--background-color-white);
  border: 1px solid var(--border1-bgwhite);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.drop-er-checks .dropdown-toggle,
.drop-er-checks .dropdown-toggle:focus,
.drop-er-checks .dropdown-toggle:focus-visible,
.drop-er-checks .dropdown-toggle:active {
  width: 100%;
  text-align: left;
  border: none !important;
  background: none;
  font-size: 1.25rem;
  outline: 0 !important;
  color: var(--color-3);
}

.drop-er-checks .dropdown-toggle::after {
  position: absolute;
  right: 0;
  top: 10px;
}

.comment__list {
  list-style-type: none;
}

.wn__comment {
  /* display: flex;
  border-bottom: 1px solid #d1d1d1;
  margin-bottom: 15px;
  gap: 15px;
  border-bottom-left-radius: 20px; */
  border-radius: 8px;
  border: 1px solid var(--border1-bgwhite);
  padding: 21px 25px;
  background-color: var(--background-color-white);
  margin-bottom: 15px;
}

@media screen and (max-width:450px) {
  .wn__comment {
    padding: 20px 15px;
  }
}

.wn__comment:hover {
  box-shadow: 0px 6px 22px 0px rgba(0, 0, 0, 0.09);
}

.wn__comment .content.d-flex * {
  margin: 0px;
}

.wn__comment .fas.fa-star {
  font-size: 12px;
  color: #ffbe1b;
}

.wn__comment .far.fa-star {
  font-size: 12px;
}

.wn__comment img {
  width: 55px;
  height: 55px;
  border-radius: 100%;
  object-fit: cover;
  border: 2px solid #efefef;
}

.filter-closer,
.filter-open {
  display: none;
}

/* bread crum */
.breadcrumb-area {
  background-color: #eceeef;
}

.breadcrumb-content a:hover {
  color: var(--themebg);
}

.contact-info-wrapper {
  color: #fff;
  text-align: center;
}

.contact-box img.biggg-img,
.contact-box {
  height: 550px;
  min-height: 550px !important;
}

.contact-info-icon {
  font-size: 22px;
}

.divideer {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}

.btn-map {
  background-color: var(--white);
  min-width: 150px;
  color: var(--themebg);
  cursor: pointer;
}

.btn-map:hover {
  color: var(--themebg) !important;
}

.contact-box .logo-obtain {
  background: radial-gradient(#eb282ed9, #132739);
}

/* dashboar css */
#user-sidebar .card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

#user-sidebar .card {
  border-radius: 15px !important;
  background-color: var(--themebg) !important;
  box-shadow: 0px 9px 8px 0px #a9a8a8;
}

#user-sidebar strong {
  text-transform: capitalize !important;
}

#user-sidebar .bg-light,
#user-sidebar .bg-dark {
  background-color: transparent !important;

}

#user-sidebar .bg-light a,
#user-sidebar .bg-dark a {
  /* display: block; */
  border-bottom: 1px solid transparent;
}

#user-sidebar .bg-light a {
  color: #efefef9c;
}

#user-sidebar .bg-light a:hover {
  color: #ffffff;
}

/* #user-sidebar .bg-dark a {
  border-bottom: 1px solid #fff !important;
  padding-bottom: 1rem;
} */

/* profile-box */
.profile-box {
  border-top-right-radius: 15px !important;
  border-bottom-right-radius: 15px !important;
}

.profile-box .text-danger {
  font-size: 12px;
}

.profile-box .form-control {
  margin-bottom: 15px;
}

.btn-update {
  background: var(--themebg);
  border: none;
  border-radius: 100px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  color: var(--white);
  padding: 0.6rem 0rem;
  font-size: 16px;
  transition: 300ms;
  min-width: 145px;
  margin-top: 20px;
}

.rounded.shadow {
  border-radius: 50px !important;
}

.btn-edt,
.btn-dlt {
  background-color: var(--themebg);
  border-radius: 100%;
  color: var(--white);
  border: none;
  width: 30px;
  height: 30px;
  font-size: 12px;
  margin: 0px 5px;
}

.btn-dlt {
  background-color: var(--theme-secondary);
}

.address-table {
  border: 1px solid var(--border-bgwhite);
  border-radius: 12px;
  padding: 10px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}


.default-box-wrap {
  position: relative;
}

.default-box {
  position: absolute;
  width: 20%;
  top: -10px;
  right: -47px;
  z-index: 1;
}

@media screen and (max-width:530px) {
  .default-box {
    right: 0px;
  }
}

.h4-dd {
  margin: 0px;
}

.default-box input {
  transform: translate(0px, -1px);
  margin-left: -2.8rem;
}

.img-abt img {
  width: 100%;
}

.p-hyt {
  line-height: 30px;
  margin-bottom: 0px;
}

.svgs img {
  width: 95px;
  height: auto;
  margin-bottom: 30px;
}

.abt-h5 h5 {
  font-size: 17px;
  line-height: 25px;
}

.table-cover {
  border: 1px solid var(--border1-bgwhite);
  border-radius: 12px !important;
  margin-bottom: 20px !important;
  overflow: hidden;
  padding: 12px 20px;
  position: relative;
  background: var(--background-color-white);
}

table {
  margin-bottom: 0px;
}

.table-cover h6 {
  margin-bottom: 0px;
}

.border-none {
  border: none !important;
}

/* .table-cover table tr:last-child td {
  border: transparent;
  padding-bottom: 0rem;
} */

.info-icons {
  font-size: 12px;
}

.info-icons span {
  display: inline-block;
  margin-right: 10px;
}

.info-icons span.clr-green i {
  color: #01b088;
}

.info-icons span.clr-orn i {
  color: #e36000;
}

.full-data-car {
  width: 100%;
  border: none;
  background: transparent;
}

.f-gap {
  gap: 15px;
}

button.full-data-car i {
  font-size: 15px;
}

.file-loader {
  width: 80px;
  height: 37px;
  border-radius: 5px;
  border: 1px solid var(--border1-bgwhite);
  background-color: var(--promation);
  color: var(--color-white-black);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  font-size: 14px;
  margin: 0 auto;
  margin-right: 20px;
}

.file-loader input {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transform: scale(4);
  opacity: 0;
  cursor: pointer;
}

.table-rto th {
  text-align: center;
  font-size: 14px;
}

th {
  font-size: 16px;
  line-height: 25px;
  font-family: var(--f-fam);
  font-weight: 500;
  white-space: nowrap;
}


td {
  font-size: 15px;
  line-height: 25px;
  font-family: var(--f-fam-p);
  font-weight: 500;

}

@media only screen and (max-width: 554px) {
  td {
    word-wrap: break-word;
    word-break: break-all;
  }

  .tdwrapmobile td {
    word-wrap: unset;
    word-break: unset;
  }

  .tdwrapmobile .form-control {
    width: unset;
  }
}

.btn-group>.btn-group:not(:first-child),
.btn-group>:not(.btn-check:first-child)+.btn {
  margin-left: 8px;
  margin-top: 2px;
}

.table-rto tbody input[type="number"] {
  border-radius: 50px;
  border: 1px solid #cacaca;
  height: 35px;
}

.table-rto tbody,
.table-rto thead {
  vertical-align: middle;
}

.table-rto .btn-info {
  background: var(--themebg);
  color: #fff;
  border-radius: 100%;
  border: none;
  line-height: 32px;
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 0px;
}

/* .table-rto .btn-danger {
  background: var(--theme-secondary);
  color: #fff;
  border-radius: 100%;
  border: none;
  line-height: 32px;
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 0px;
} */
.table-rto #rto_classes .btn-danger {
  background: var(--theme-secondary);
  color: #fff;
  border-radius: 100%;
  line-height: 23px;
  width: 25px;
  height: 25px;
  text-align: center;
  padding: 0px;
  font-size: 30px;
  margin-bottom: 2px;
}

#rto_classes span.rto-option {
  border: 1px solid var(--border1-bgwhite);
  color: var(--tabletextcolor);
  line-height: 32px;
  text-align: center;
  padding: 10px;
  margin-right: 20px;
}

.update-btn {
  padding: 0.3rem !important;
  min-width: 120px !important;
  max-width: 120px !important;
}

.border--55 {
  border-radius: 12px;
}

.ico-dudmy {
  background: #132739;
  color: #fff;
  width: 65px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  margin: 0 auto;
  font-size: 22px;
}

.ico-dudmy img {
  width: 50px;
}

.big-banner {
  display: block;
}

.big-banner img {
  width: 100%;
  border-radius: 18px;
}


html body .passcode_container .text-danger {
  position: relative !important;
  bottom: -8px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
}

.passcode_container .text-success {
  position: relative;
  bottom: -8px;
  font-size: 15px;
  font-weight: 400;
}

.offcanvas-header {
  background-color: #000;
}

.offcanvas-body {
  background-color: var(--bgcolor);
}

.btn-close-canvas {
  background-color: #fff;
  opacity: 1;
  font-size: 10px;
  border-radius: 50px;
}

.off-can-options a {
  color: var(--themebg);
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #aaaaaa;
  display: block;
}

/* Hide the checkbox itself */
.toggle-checkbox {
  display: none;
}

/* Style the label to look like a clickable link */
label {
  color: var(--color-white-black);
  font-family: var(--f-fam);
}

.toggle-label {
  color: var(--themebg);
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #aaaaaa;
  display: block;
  cursor: pointer;
}

/* Hide the dropdown menu by default */
.dropdown-menu-mobile {
  display: none;
  padding-left: 15px;
  transition: all 0.3s ease;
}

/* Show dropdown when checkbox is checked */
.toggle-checkbox:checked+.toggle-label+.dropdown-menu-mobile {
  display: block;
}

.car-wrap-box {
  display: block;
  position: relative;
  filter: grayscale();
  opacity: 0.5;
}

.car-wrap-box img {
  width: 75px !important;
  height: 75px;
  object-fit: contain;
  border-radius: 100%;
  border: 1.5px solid var(--color-3);
  margin: 0 auto;
}

.car-box-all {
  display: flex;
  padding: 0.5rem;
  border-radius: 12px;
  gap: 15px;
  border: 1px solid var(--border1-bgwhite);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.car-box-all img {
  /* width: 125px; */
  padding: 5px;
  border-radius: 12px;
  height: 100px;
  object-fit: cover;
  border: 1px solid var(--border1-bgwhite);
}

.select-Car {
  margin-top: 0.5rem;
}

.toltip {
  background: #fff;
  color: #132739;
  padding: 0.5rem;
  font-size: 13px;
  position: absolute;
  border: 1.5px solid var(--color-3);
  border-radius: 5px;
  left: 11px;
  transform: scale(0);
  z-index: 2;
  transition: 200ms;
  font-family: var(--f-fam);
}

.car-wrap-box:hover .toltip {
  transform: scale(1);
  transition: 200ms;
}

.car-wrap-box:hover {
  filter: unset;
  opacity: 1;
}

.select-driver .item.active .car-wrap-box .toltip,
.select-car .item.active .car-wrap-box .toltip {
  display: none;
}

.select-driver .item.active .car-wrap-box img,
.select-car .item.active .car-wrap-box img {
  width: 75px !important;
  height: 75px;
  object-fit: contain;
  border-radius: 100%;
  border: 1.5px solid var(--color-3);
  margin: 0 auto;
}

.select-driver .item.active .car-wrap-box,
.select-car .item.active .car-wrap-box {
  filter: unset;
  opacity: 1;
}

.owl-dot.active span {
  background-color: var(--theme-secondary);
}

.arrow-up {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  position: absolute;
  border-top: 7px solid rgb(255 255 255);
  z-index: 2;
  bottom: -6px;
  left: 35px;
}

.detail-box-car {
  padding-left: 0.5rem;
  width: 80%;
  border-left: 1px solid var(--border1-bgwhite);
}

.detail-box-car ul {
  padding-left: 10px;
  margin-top: 0.5rem;
}

.detail-box-car ul li {
  font-size: 15px;
  color: #808291;
}

.specification {
  display: flex;
  align-items: center;
  gap: 15px;
}

.specification span.liner {
  width: 70%;
  height: 1.5px;
  border-radius: 10px;
  background-color: var(--color-3);
  display: inline-block;
}

/* input 4 digit css end*/



/* mobile login popup starts */
#passcode-form-Modal .mobile-passcode,
#passcode-form-Modal .mobile-otp {
  background-color: #fff;
  border-radius: 15px;
  padding: 1.2rem;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  display: block;
}

#passcode-form-Modal .mobile-otp {
  display: none;
}

/* ppascode */
#login-form-Modal .mobile-passcode,
.mobile-otp {
  background-color: #fff;
  border-radius: 15px;
  padding: 1.2rem;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  display: none;
}

.mobile-passcode h3,
.mobile-otp h3 {
  color: #132739;
  margin: 0px;
  font-size: 18px;
}

.mobile-passcode h3 button,
.mobile-otp h3 button {
  background-color: transparent;
  padding: 0px;
  color: #0c9441;
  border: none;
  font-size: 16px;
  border-bottom: 1px solid #0c9441;
}

.mobile-passcode button.enter-passcode,
.mobile-otp button.enter-otp {
  width: 100%;
  background-color: #eb282e;
  border-radius: 50px;
  height: 45px;
  color: #fff;
  border: none;
  margin-top: 22px;
}

.resend-otp-button {
  background-color: #000;
  color: #fff;
  font-size: 12px;
  border: none;
  border-radius: 12px;
  padding: 10px 10px;
  display: inline-block;
  margin-left: 5px;
  margin-bottom: 10px;
  font-family: var(--f-fam-p);
}

.resend-otp-button:hover {
  background-color: var(--color-3);
  color: #fff;
}

#bookingmodal .radio-group label {
  margin: 5px;
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 8px !important;
  cursor: pointer;
  transition: background-color 0.3s;
  font-family: var(--f-fam-p);
}

#bookingmodal .radio-group label .active {
  background-color: red;
}

.float-end button {
  border-radius: 12px !important;
  border: none;
  min-width: 100px;
}

.float-end .btn.btn-primary {
  background-color: var(--themebg);
  color: #fff;
}

.float-end .btn.btn-secondary {
  background-color: var(--color-3);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--f-fam-p);
}

/*  */
.field-box-mob {
  background-color: #fff;
  border-radius: 15px;
  padding: 1.2rem;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  display: none;
}

.field-box-mob h3 {
  color: #132739;
  margin: 0px;
  font-size: 18px;
}

.field-box-mob input {
  height: 45px;
  border-radius: 50px;
  box-shadow: inset 200px 75px 2px 2px #fff;
  font-size: 16px;
}

.field-box-mob button.feild-box-btn {
  width: 100%;
  background-color: #eb282e;
  border-radius: 50px;
  height: 45px;
  color: #fff;
  border: none;
  margin-top: 22px;
}

.field-box-mob input:focus,
.field-box-mob input:active,
.field-box-mob input:focus-visible,
.field-box-mob input:focus-within {
  box-shadow: none;
  border-color: var(--themebg);
}


body.modal-open {
  overflow-y: scroll !important;
}



.bg-trans {
  background-color: transparent;
  border: none;
}

.box-number {
  background-color: #fff;
  border-radius: 15px;
  padding: 1.2rem;
  /* border-bottom-left-radius: 0px; */
  border-bottom-right-radius: 0px;
}

.box-number button,
.box-number a {
  width: 100%;
  background-color: #eb282e;
  border-radius: 50px;
  height: 45px;
  color: #fff;
  border: none;
  margin-top: 22px;
}

.box-number h3 {
  color: #132739;
  margin: 0px;
  font-size: 18px;
}

.pd--0 {
  padding: 0px;
}

.mob-wrap {
  position: relative;
}

.mob-wrap span {
  position: absolute;
  background: #13273954;
  width: 45px;
  height: 44px;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
  text-align: center;
  line-height: 45px;
}

.mob-wrap input {
  padding-left: 60px;
}

#user-sidebar {
  /* width: 100%;
  min-width: 100%;
  margin-bottom: 25px; */
}

.offcanvas-backdrop.show {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.erd {
  background-color: red;
}

/* .modal-dialog{
  margin:0px;
  max-width: 100%!important;
} */
.modal-dialog .form-control {
  color: #212529 !important;
  background-color: #fff !important;
}

.modal-footer {
  border-top: 1px solid var(--border1-bgwhite);
}

@media only screen and (max-width:640px) {

  body.modal-open {
    overflow-y: hidden !important;
  }

  #exampleModal.modal.fade.show {
    display: block !important;
  }

  .modal-backdrop.fade.show {
    display: block;

  }
}


/* plans */
:root {
  --ColorOne: #2f2f2f;
  --ColorTwo: #024a85;
  --ColorThree: #f7ba00;
}

/* .main {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: 20px;
  gap: 32px;
} */

/* .main div {
  width: 400px;
  padding-block: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  background-color: #fff;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
} */

/* .plan-wrap {
  background-color: #eceeef;
} */

.main ul {
  padding-left: 0rem;
  margin-bottom: 0px;
}

.plan-1:hover {}

/* .main div:first-child {
  margin-bottom: 50px;
}
.main div:last-child {
  margin-bottom: -50px;
} */
.main div h1 {
  position: relative;
}

.main div h1::before {
  /* content: "₹";
  position: absolute;
  left: 92px;
  top: 5px;
  font-size: 24px; */
  /* left: -15px; */
}

.main div:first-child h1::before {
  color: var(--ColorOne);
}

.main div:nth-child(2) h1::before {
  color: var(--ColorTwo);
}

.main div:last-child h1::before {
  color: var(--color-3);
}

.plan-1 {
  background-image: url('https://frontdoor.ltd/assets/images/plan-1.svg');
  background-repeat: no-repeat;
  background-position: center 22rem;
  /* box-shadow: -2px 0px 20px 11px #2f2f2f42 inset; */
  transition: 300ms;
}

.plan-2 {
  background-image: url('https://frontdoor.ltd/assets/images/plan-2.svg');
  background-repeat: no-repeat;
  background-position: center 22rem;
  /* box-shadow: -2px 0px 20px 11px #024a856b inset; */
  transition: 300ms;
}

.plan-3 {
  background-image: url('https://frontdoor.ltd/assets/images/plan-3.svg');
  background-repeat: no-repeat;
  background-position: center 22rem;
  /* box-shadow: -2px 0px 20px 11px #f7ba0080 inset; */
  transition: 300ms;
}

/*
.plan-1:hover,
.plan-2:hover,
.plan-3:hover {
  transition: 300ms all;
  box-shadow: 0px 8px 10px 4px #84848480;
  transform: scale(1.02);
} */

.main div p {
  width: 250px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: flex-start;
  position: relative;
  left: -5px;
  color: #fff;
  cursor: default;
  margin: 0px;
  border-radius: 0 50px 50px 0;
  transition: width 0.6s;
  -webkit-transition: width 0.6s;
  -moz-transition: width 0.6s;
  -ms-transition: width 0.6s;
  -o-transition: width 0.6s;
}

.main div p:hover {
  width: 95%;
}

.main div p::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  border-width: 5px 5px 0 0;
  border-style: solid;
}

.main div:first-child p {
  background-color: var(--ColorOne);
}

.main div:first-child p::before {
  border-color: var(--ColorOne);
}

.main div:nth-child(2) p {
  background-color: var(--ColorTwo);
}

.main div:nth-child(2) p::before {
  border-color: var(--ColorTwo);
}

.main div:last-child p {
  background-color: var(--color-3);
}

.main div:last-child p::before {
  border-color: var(--color-3);
}

.main div ul li {
  padding: 8px 0;
  list-style: none;
  text-align: center;
  cursor: default;
  text-transform: capitalize;
  transition: 0.2s;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -ms-transition: 0.2s;
  -o-transition: 0.2s;
}


.main div a {
  padding: 12px 30px;
  color: #fff;
  text-decoration: none;
  position: relative;
  border-radius: 50px;
  transition: 0.2s;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -ms-transition: 0.2s;
  -o-transition: 0.2s;
}

.main div:first-child a {
  /* background-color: var(--ColorOne); */
  border: 1px solid #fff;
  margin-top: 10px;
}

.main div:nth-child(2) a {
  border: 1px solid #fff;
  margin-top: 10px;
}

.main div:last-child a {
  border: 1px solid #fff;
  margin-top: 10px;
}

.main div a:hover {
  filter: brightness(90%);
  -webkit-filter: brightness(90%);
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
}

.main div a:hover::before,
.main div a:hover::after {
  width: 100%;
}

.plan-wrap {
  padding: 3rem 0rem;
}

@media (max-width: 900px) {
  .main {
    flex-direction: column;
  }

  /* .main div {
    margin: 15px 0 !important;
  } */

  .main div p {
    margin-bottom: 10px;
  }

  .main div ul li {
    /* margin: 15px 0 !important; */
  }

  .main div a {
    margin: 30px 0;
  }
}

/* chat design css starts  */


/* *******************************
message-area
******************************** */

.message-area {
  /* height: 100vh;
  overflow: hidden; */
  /* padding: 30px 0; */
  /* background: #f5f5f5; */
}

.msg-body {
  padding: 0rem 1rem;
}

.msg-body ul {
  padding: 0rem;
}

.chat-area {
  position: relative;
  width: 100%;
  /* background-color: #fff; */
  border-radius: 0.3rem;
  display: flex;
  gap: 15px;
}

.msg-search {
  position: relative;

}

.msg-search input {
  color: #ffffff81;
  background: transparent;
  border: .5px solid hsla(0, 0%, 100%, .2);
  border-radius: 50px;
  min-height: 40px;
  min-width: 100%;
  padding: 0px;
  padding-left: 1rem;
  padding-right: 2.5rem;
  font-size: 1rem;
}

.msg-search i {
  position: absolute;
  z-index: 1;
  color: hsl(0deg 0% 100%);
  cursor: pointer;
  right: 6px;
  top: 5px;
  background: #ffffff7d;
  border-radius: 100%;
  padding: 0.4rem;
}

.chatlist {
  outline: 0;
  height: 100%;
  overflow: hidden;
  width: 300px;
  /* float: left; */
  padding: 15px;
  background: #132739;
  border-radius: 12px;
}

.chat-area .chat-content {
  border: none;
  border-radius: 0;
  outline: 0;
  height: 100%;
}

.chat-area .modal-dialog-scrollable {
  height: 100% !important;
}

.chatbox {
  overflow: hidden;
  height: 100%;
  /* border: 1px solid #cacaca; */
  flex: auto;
  /* background: #eceeef; */
  border-radius: 12px;
}

.chatbox .modal-dialog,
.chatlist .modal-dialog {
  max-width: 100%;
  margin: 0;
}

.msg-search {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-bottom: 15px;
  /* border-bottom: 1px solid #87919a; */
  border-radius: 0px;
}

.chat-area .form-control {
  display: block;
  width: 80%;
  padding: 0.375rem 0.75rem;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #222;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ccc;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.25rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.chat-area .form-control:focus {
  outline: 0;
  box-shadow: inherit;
}

a.add img {
  height: 36px;
}

.chat-area .nav-tabs {
  border-bottom: 1px solid #dee2e6;
  align-items: center;
  justify-content: space-between;
  flex-wrap: inherit;
}

.chat-area .nav-tabs .nav-item {
  width: 100%;
}

.chat-area .nav-tabs .nav-link {
  width: 100%;
  color: #180660;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-transform: capitalize;
  margin-top: 5px;
  margin-bottom: -1px;
  background: 0 0;
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.chat-area .nav-tabs .nav-item.show .nav-link,
.chat-area .nav-tabs .nav-link.active {
  color: #222;
  background-color: #fff;
  border-color: transparent transparent #000;
}

.chat-area .nav-tabs .nav-link:focus,
.chat-area .nav-tabs .nav-link:hover {
  border-color: transparent transparent #000;
  isolation: isolate;
}

.chat-list h3 {
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-transform: capitalize;
  margin-bottom: 0;
}

.chat-list p {
  color: #d2d2d2;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-transform: capitalize;
  margin-bottom: 0;
}

.chat-list a.d-flex,
.chat-list li.d-flex {
  margin-bottom: 8px;
  position: relative;
  text-decoration: none;
  padding: 0.5rem;
  border-radius: 2rem;
  transition: 300ms;
}

.chat-list a.d-flex:hover,
.chat-list li.d-flex:hover,
.chat-list .tabactive {
  transition: 300ms;
  background: #87919a69;
}

.chat-list .active {
  display: block;
  content: '';
  clear: both;
  position: absolute;
  bottom: 3px;
  left: 34px;
  height: 12px;
  width: 12px;
  background: #00DB75;
  border-radius: 50%;
  border: 2px solid #fff;
}

.moreoption {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 0rem;
}

.moreoption .navbar {
  padding: 0;
}

.moreoption li .nav-link {
  color: #222;
  font-size: 16px;
}

.chat-list-open {
  display: none;
}

.moreoption .dropdown-toggle::after {
  display: none;
}

.moreoption .dropdown-menu[data-bs-popper] {
  top: 100%;
  left: auto;
  right: 0;
  margin-top: 0.125rem;
}

.msg-body ul {
  overflow: hidden;
}

.msg-body ul li {
  list-style: none;
  margin: 15px 0;
}


.time {
  display: block;
  color: #000;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
}

li.repaly .time {
  margin-right: 20px;
}

.divider {
  position: relative;
  z-index: 1;
  text-align: center;
}

.msg-body h6 {
  text-align: center;
  font-weight: normal;
  font-size: 14px;
  line-height: 1.5;
  color: #222;
  background: #fff;
  display: inline-block;
  padding: 0 12px;
  margin-bottom: 0;
  border-radius: 10px;
}

.divider:after {
  display: block;
  content: '';
  clear: both;
  position: absolute;
  top: 12px;
  left: 0;
  border-top: 1px solid #c7c7c7;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.send-box form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.attach {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.chat-list {
  min-height: 512px;
  max-height: 512px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

.msg-body {
  min-height: 300px;
  max-height: 300px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.chat-list::-webkit-scrollbar,
.msg-body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.chat-list,
.msg-body {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.send-btns .button-wrapper {
  position: relative;
  width: 125px;
  height: auto;
  text-align: left;
  /* margin: 0 auto; */
  display: block;
  background: #F6F7FA;
  border-radius: 50px;
  padding: 5px 15px;
  /* float: left; */
  margin-right: 5px;
  /* margin-bottom: 5px; */
  overflow: hidden;
}

.send-btns .button-wrapper span.label {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  cursor: pointer;
  color: #343945;
  font-weight: 400;
  text-transform: capitalize;
  font-size: 13px;
}

#upload {
  display: inline-block;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
}

.send-btns .attach .form-control {
  display: inline-block;
  width: 120px;
  height: auto;
  padding: 5px 8px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: #343945;
  background-color: #F6F7FA;
  background-clip: padding-box;
  border: 1px solid #F6F7FA;
  border-radius: 50px;
}

.send-btns .button-wrapper span.label img {
  margin-right: 5px;
}

.button-wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  text-align: center;
}

button:focus {
  outline: 0;
}

.add-apoint {
  display: inline-block;
  margin-left: 5px;
}

.add-apoint a {
  text-decoration: none;
  background: #F6F7FA;
  border-radius: 50px;
  padding: 8px 8px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  color: #343945;
}

.add-apoint a svg {
  margin-right: 5px;
}

.chat-icon {
  display: none;
}

.closess i {
  display: none;
}

.color_list {
  list-style: none;
  padding: 0;
}

.colorbox {
  float: left;
  margin: 2px;
}

#color_wrapper .colorboxbtn {
  /* background-color: #000; */
  /* height: 40px; */
  /* width: 60px;
  cursor: pointer; */
  /* border: 1px solid; */
  /* border-radius: 50%; */
  padding: 2px;
  border-radius: 3px;
  width: 30px;
}

#color_wrapper .active .colorboxbtn {
  /*border: 2px solid #eb282e;*/
  outline: 1px solid #000000;
}

#sync2 {
  margin-top: 20px;
}

.product-slider-22 img {
  width: 100%;
  height: 500px;
  max-height: 500px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid #000;
}

.product-slider-nav-22 img {
  width: 100%;
  height: 100px;
  max-height: 100px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid #000;
}

/* #new-sectionContent .item img {
  min-height: 220px !important;
  height: 220px !important;
} */

/* driveus */
.driveus {
  padding: 80px 0px;
  background-color: transparent;
  background-image: linear-gradient(180deg, #FAFAFA 100%, #FAFAFA 100%);
}

.driveus .inner-section-one {
  border: 1px solid #EDEDED;
  padding: 30px 30px 30px 30px;
  border-radius: 10px;
  transition: all 0.3s ease 0s;
}

.driveus .inner-section-one:hover {
  box-shadow: 0px 30px 60px 0px #0000001A;
}

.driveus .title {
  font-size: 38px;
}

.driveus p {
  color: rgb(112, 112, 112);
}



span.icon-count-number {
  /* position: absolute; */
  right: 0px;
  bottom: -15px;
  font-size: 100px;
  font-weight: 700;
  color: #e8e8e8;
  opacity: 0.3;
  line-height: 100px;
}



/* .sub-title {
  font-weight: 400;
  position: relative;
  font-size: 30px;
  display: inline-block;
  margin-bottom: 20px;
}

@media only screen and (max-width: 575px) {
  .sub-title {
    font-size: 17px;
  }
}

.sub-title.double-line:before {
  position: absolute;
  content: "";
  left: 100%;
  top: 50%;
  margin-top: -4px;
  margin-left: 5px;
  background: #EB282E;
  height: 1px;
  width: 40px;
}

.sub-title.double-line span:before {
  position: absolute;
  content: "";
  right: 0;
  top: 50%;
  margin-top: -7px;
  background: #EB282E;
  height: 1px;
  width: 40px;
}

.sub-title.double-line span {
  position: absolute;
  content: "";
  left: 0;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  top: 50%;
  margin-top: 2px;
  background: #EB282E;
  height: 1px;
  margin-left: -5px;
  width: 60px;
}

.sub-title.double-line:after {
  position: absolute;
  content: "";
  left: 100%;
  top: 50%;
  margin-top: 2px;
  background: #EB282E;
  height: 1px;
  margin-left: 5px;
  width: 60px;
} */

/* header by mandeep */
@media (max-width: 576px) {
  .screen-content {
    display: none;
  }

  .mobile-content {
    display: block !important;
  }
}

.mobile-content {
  display: none;
}

.underline-text {
  position: relative;
  padding-bottom: 5px;
}

.underline-text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 3px;
  background-color: var(--color-3);
  border-radius: 2px;
}

.border-right-topbar {
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  padding-right: 10px;
}


.header-three .more-dropdowns button.dropdown-toggle {
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  line-height: 30px;
}

/*
.top-bar-one {
  padding: 10px 0px;
  border-bottom: 1px solid #ededed3d;
  position: relative;
  z-index: 100;
}

.top-bar-one ul {
  list-style: none;
  gap: 15px;
}

.top-bar-one span {
  font-size: 16px;
  font-weight: 400;
  font-family: "DM Sans", sans-serif;
  color: #fff;
}

.top-bar-one .icon {
  color: var(--color-3);
  font-size: 16px;
}

.top-bar-one .social-icons {
  justify-content: end;
}

.top-bar-one .social-icons a {
  color: #fff;
}

.top-bar-one .social-icons a:hover {
  color: var(--color-3);
}

.top-bar-one .search-navbar input {
  color: #fff;
  background: #0000004a;
  border: .5px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  min-height: 40px;
  min-width: 80%;
  padding: 0px;
  padding-left: 1rem;
  padding-right: 2.5rem;
  font-size: 16px;
  font-family: var(--f-fam);
}

.top-bar-one .search-navbar i {
  position: absolute;
  z-index: 1;
  color: hsla(0, 0%, 100%, .2);
  cursor: pointer;
  right: 26%;
  top: 11px;
} */

/* header mobile */
.offcanvas.show:not(.hiding),
.offcanvas.showing {
  width: 80%;
}

.mobilespan {
  font-size: 16px;
  font-family: var(--f-fam);
}

.navbar-nav-mobile {
  list-style: none;
  padding: 0;
  margin: 0;
}

.navbar-nav-mobile li {
  position: relative;
}

.nav-link-mobile {
  display: block;
  cursor: pointer;
  padding: 12px 12px;
  font-size: 18px;
  text-decoration: none;
  font-family: var(--f-fam);
  color: var(--color-white-black);
  background-color: transparent;
  position: relative;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: none;
  text-align: left;
  border-radius: 5px;
}

.nav-link-mobile-2 {
  cursor: pointer;
  padding: 12px 15px;
  font-size: 18px;
  text-decoration: none;
  font-family: var(--f-fam);
  color: var(--color-white-black);
  background-color: transparent;
  position: relative;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: none;
  text-align: left;
  border-radius: 5px;
}

.nav-link-mobile:hover {
  background-color: var(--color-3);
  color: #fff;
}

.nav-link-mobile i {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}

.nav-link-mobile.open i {
  transform: translateY(-50%) rotate(180deg);
}

.sub-menu-mobile {
  display: none;
  list-style-type: none;
  padding-left: 0px;
  position: absolute;
  left: 0;
  top: 100%;
  background-color: var(--background-color-white);
  border: 1px solid var(--border1-bgwhite);
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
  box-shadow: var(--box-shadow1);
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, top 0.2s ease-in-out;
  z-index: 100;
}

.nav-link-mobile.open+.sub-menu-mobile {
  display: block;
  opacity: 1;
  visibility: visible;
  top: 110%;
}

.sub-menu-mobile li {
  padding: 10px;
  transition: background-color 0.3s ease;
  border-bottom: 1px solid var(--border1-bgwhite);
}

/*
.sub-menu-mobile li:hover {
  background-color: #f1f1f1;
} */

.sub-menu-mobile li a {
  color: var(--color-white-black);
  text-decoration: none;
  display: block;
  padding: 5px 10px;
  font-size: 15px;
  font-family: var(--f-fam);
}

.hovereffect-mobile:hover {
  background-color: var(--color-3);
}

@media (max-width: 768px) {
  .nav-link-mobile {
    font-size: 18px;
    /* padding: 15px; */
  }

  .sub-menu-mobile {
    left: 0;
    top: 100%;
    min-width: 100%;
    border-radius: 0;
  }
}

@media (max-width: 375px) {
  .mobile-logo-nav img {
    width: 139px;
    height: auto;
  }
}

/* code by mandeep  */
@media (max-width: 767px) {
  .m-mobile-b-15 {
    margin-bottom: 15px;
  }
}

@media (max-width: 571px) {
  .mobile-t-20 {
    margin-top: 20px;
  }

  .mobile-b-20 {
    margin-bottom: 20px;
  }
}

@media (max-width: 990px) {
  .tab-top-20 {
    margin-top: 20px;
  }

  .tab-b-20 {
    margin-bottom: 20px;
  }
}

.font-fam {
  font-family: "DM Sans", sans-serif;
}

.heading-3 {
  font-size: 26px;
  line-height: 35px;
  font-family: var(--f-fam-p);
  font-weight: 600;
  color: var(--color-white-black);
}

.heading-4 {
  font-size: 20px;
  line-height: 30px;
  font-family: var(--f-fam);
  font-weight: 500;
  color: var(--color-white-black);
}

.heading-5 {
  font-size: 17px;
  line-height: 25px;
  font-family: var(--f-fam);
  font-weight: 500;
  color: var(--color-white-black);
}

.heading-6 {
  font-size: 24px;
  line-height: 40px;
  font-family: var(--f-fam-p);
  font-weight: 600;
  color: var(--color-white-black);
}

@media (max-width: 576px) {
  .heading-6 {
    font-size: 20px;
    line-height: 30px;
  }
}

.p-class {
  font-size: 16px;
  line-height: 24px;
  font-family: var(--f-fam-p);
}

.p-colr {
  color: var(--smalltext);
  font-family: var(--f-fam-p);
}

.f-15 {
  font-size: 15px;
}

.f-14 {
  font-size: 14px;
}

.f-12 {
  font-size: 12px;
}

.f-13 {
  font-size: 13px;
}

.f-10 {
  font-size: 10px;
}

.f-16 {
  font-size: 16px;
  line-height: 26px;
}

.f-17 {
  font-size: 17px;
}

.f-18 {
  font-size: 18px;
}

.f-20 {
  font-size: 20px;
}

.f-22 {
  font-size: 22px;
}

.border-r {
  border-right: 1px solid var(--border1-bgwhite);
}

.border-l {
  border-left: 1px solid var(--border1-bgwhite);
}

.border-t {
  border-top: 1px solid var(--border1-bgwhite);
}

.border-b {
  border-bottom: 1px solid var(--border1-bgwhite);
}

.border-all {
  border: 1xp solid #dde1de;
}

@media (max-width: 576px) {
  .heading-4 {
    font-size: 20px;
    line-height: 30px;
  }

  .p-class {
    font-size: 16px;
    line-height: 24px;
  }

  .heading-3 {
    font-size: 22px;
  }
}

@media (max-width: 1016px) {
  .heading-3 {
    font-size: 22px;
  }
}

@media (max-width: 340px) {
  .heading-4 {
    font-size: 20px;
    line-height: 25px;
  }

  .p-class {
    font-size: 15px;
    line-height: 22px;
  }
}

/* header */
.header-fix.header-fixed {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 100;
  right: 0;
}

.header-fix.header-fixed.sticky-bar.stick {
  /* background-color: #000; */
  background-color: var(--headerscroll);
}

.sticky-bar.stick {
  animation: 700ms ease-in-out 0s normal none 1 running fadeInDown;
  box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.05);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  left: 0;
  transition: all 0.3s ease 0s;
  border-bottom: 1px solid var(--bs-neutral-100);
  background: var(--bs-neutral-0);
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -100px, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.modecont {
  position: absolute;
  top: 27px;
  right: 30px;
}

.top-second {
  position: relative;
  z-index: 100;
  border-bottom: 1px solid #ededed3d;
  display: flex;
  align-items: center;
}

.top-second .main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}


.top-second .header-left {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

.top-second .header-left .header-logo {
  margin-right: 0;
  /* min-width: 170px; */
}

.top-second .main-menu li.arrow-white>a::after {
  background: url(https://carento-demo.vercel.app/assets/imgs/template/icons/arrow-down-white.svg) no-repeat center;
}

.top-second .main-menu li.has-children>a::after {
  content: "";
  height: 10px;
  width: 10px;
  background: url(https://carento-demo.vercel.app/assets/imgs/template/icons/arrow-down-white.svg) no-repeat center;
  opacity: 1;
  margin-left: 0px;
  position: absolute;
  top: 28px;
  right: 0px;
  opacity: 0.6;
}

.top-second .header-left .header-nav {
  /* width: 80%; */
  text-align: center;
  position: relative;
  top: 8px;
}

.top-second .nav-main-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.top-second .main-menu li {
  position: relative;
  /* padding: 0 15px; */
}

.top-second .main-menu li.mega-li-small .mega-menu {
  position: absolute;
  top: 96%;
  left: 0px;
  width: 100%;
  display: none;
  z-index: 12345;
}

.top-second .main-menu li:hover.mega-li-small .mega-menu {
  display: block;
}

.top-second .main-menu li.mega-li-small .mega-menu .mega-menu-inner-small {
  border: 0px solid #fff;
  border-radius: 8px;
  padding: 5px 10px 20px 10px;
  box-shadow: 0px 6px 22px 0px rgba(0, 0, 0, 0.09);
  background-color: var(--background-color-white);
  position: relative;
  background-repeat: no-repeat;
  background-position: bottom right;
  background-image: none;
  border-radius: 12px 12px 12px 12px;
  max-width: 333px;
  min-width: 333px;
}

.top-second .main-menu li.mega-li-small .mega-menu::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 6px);
  left: 35px;
  border-top: 10px solid #fff;
  border-right: 10px solid transparent;
  transform: rotate(45deg);
}

.top-second .main-menu li.mega-li-small .mega-menu .mega-menu-inner-small ul {
  display: inline-block;
  box-shadow: none;
  padding: 0px;
  border: 0px;
  position: relative;
  top: auto;
  left: auto;
  opacity: 1;
  visibility: visible;
  margin-top: 8px;
  min-width: 100%;
  background-color: transparent;
}

.top-second .main-menu li a {
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: #fff;
  display: block;
  padding: 20px 15px;
  text-decoration: none;
  position: relative;
  transition: color 0.2s;
  font-family: var(--f-fam);
}

@media only screen and (max-width: 1045px) {
  .header-nav .fa-search {
    margin-left: 0px !important;
  }

  .top-second .main-menu li {
    padding: 0 2px;
  }
}

@media only screen and (max-width: 1038px) {
  .top-second .main-menu li {
    padding: 0 6px;
  }

  .top-second .main-menu li.has-children>a::after {
    right: -11px;
  }
}

@media screen and (min-device-width: 763px) and (max-device-width: 1038px) {
  .top-second .main-menu li a {
    padding: 20px 5px;
  }

  .top-second .main-menu li.has-children>a::after {
    right: -12px;
  }
}

@media (max-width: 926px) and (min-width: 766px) {
  .header-left {
    display: flex;
    flex-wrap: wrap;
  }

  .header-logo {
    flex: 1 1 15%;
  }

  .header-nav {
    flex: 1 1 85%;
  }

  .top-second .main-menu li {
    padding: 0 7px;
  }

  .header-right {
    flex: 1 1 100%;
  }

  .header-logo {
    display: block;
  }

  .header-nav {
    display: block;
  }

  .header-right {
    display: block;
    padding-bottom: 10px;
  }
}

.top-second .main-menu li a:hover {
  color: var(--color-3);
}

.top-second .main-menu li ul.sub-menu {
  background-color: var(--background-color-white);
  box-shadow: 0px 6px 15px rgba(64, 79, 100, 0.05);
  border-radius: 8px;
  min-width: 150px;
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 999;
  transition: opacity 0.2s, visibility 0.2s;
}

.top-second .main-menu li:hover>ul.sub-menu {
  opacity: 1;
  visibility: visible;
}

.top-second .main-menu li ul::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 6px);
  left: 35px;
  border-top: 10px solid #fff;
  border-right: 10px solid transparent;
  transform: rotate(45deg);
}

.top-second .main-menu li ul.sub-menu2::before {
  content: unset !important;
}

.top-second .main-menu li ul li {
  padding: 8px 15px;
  list-style: none;
  text-align: start;
}

.top-second .main-menu li ul li a {
  color: var(--color-white-black);
  display: inline-block;
  padding: 8px 5px 8px 5px;
  transition: 0.3s;
  font-size: 15px;
}

.top-second nav .main-menu {
  display: flex;
  list-style: none;
}


.new-header-right {
  align-items: center;
  display: flex;
  gap: 15px;
}

button#search-icon {
  border: none;
  background-color: #ffffff00;
  color: #fff;
}

.modal-content {
  background-color: var(--background-color-white);
  color: #fff;
}

.modal-header {
  border-bottom: 1px solid var(--border1-bgwhite);
}

.modal-header-bg {
  background-color: black;
}

.modal-title {
  color: #fff;
}

/* Close button styling */

/* .btn-close {
  filter: invert(1);
} */

/* Search Navbar (input field & icon) */
/* .search-navbar {
  display: flex;
  align-items: center;
  background-color: #222;
  padding: 10px;
  border-radius: 5px;
} */

.search-navbar input {
  background-color: #fff;
  /* Dark input field background */
  color: #000;
  /* White text */
  border: none;
  padding: 10px;
  flex-grow: 1;
  border-radius: 5px;
  margin-right: 10px;
}

.search-navbar input::placeholder {
  color: #bbb;
}

.search-navbar i {
  color: #ffffff;
  cursor: pointer;
  background-color: var(--color-3);
  padding: 6px;
  top: 7px;
  border-radius: 15px;
}

/* Adjust the modal size */


/* btn mandeep */
.left-slide {
  position: relative;
  overflow: hidden;
  color: white;
  background-color: var(--color-3);
  padding: 13px 24px;
  font-size: 16px;
  font-family: var(--f-fam-p);
  border: 0;
  transition: color 0.3s ease;
  display: inline-block;
  text-decoration: none;
  border-radius: 10px;
  top: 6px;
}

.left-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #000;
  transition: left 0.3s ease;
  z-index: 0;
}

.left-slide:hover::before {
  left: 0;
}

.left-slide:hover {
  color: #fff;
}

.left-slide span {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  font-family: var(--f-fam);
}

.left-slide i {
  margin-left: 5px;
}

/* header by mandeep  */

/* #exampleModal.modal.fade.show {
  display: none !important;
} */
/*
.modal-backdrop.fade.show {
  display: none;
}

.modal-open .modal-backdrop {
  backdrop-filter: blur(5px);
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 1 !important;
}

.modal.fade .modal-dialog {
  transition: transform .3s ease-out;
  transform: translate(0, 50px);
}

.modal-dialog {
  position: fixed !important;
  left: 0% !important;
  right: 0% !important;
  margin-bottom: 0 !important;

}

.modal.show .modal-dialog {
  transform: none;
} */
.header-three {
  background-color: #000;
}

.home .header-three {
  background-color: #00000000;
}

.header-nav {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.header-nav .fa-search {
  color: white;
  margin-top: -15px;
  font-size: 17px;
  cursor: pointer;
  /* margin-left: 50px; */
  margin-left: 25px;
  background-color: var(--color-3);
  padding: 7px;
  border-radius: 50px;
}

.search-box {
  position: absolute;
  /* right: 63px; */
  height: 50px;
  max-width: 680px;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease-in-out;
  margin-top: -15px;
}

.search-box.active {
  opacity: 1;
  pointer-events: auto;
}

.search-box .search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #ffcc00;
}

.search-box input {
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  color: #000;
  border-radius: 6px;
  background-color: #fff;
  padding: 0 15px 0 45px;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
  font-family: var(--f-fam);
}

.search-box .close-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #000;
  font-size: 18px;
  cursor: pointer;
}

.header-right {
  width: 30%;
}

.header-right .toggle-dropdown-checkbox {
  display: none;
}

.header-right .account-signup {
  cursor: pointer;
  position: relative;
  /* display: inline-block; */
  display: flex;
  gap: 5px;
  align-items: center;
}

.header-right .dropdown-menu {
  position: absolute;
  /* top: 100%;
  left: 0; */
  background-color: white;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  z-index: 1;
  width: 150px;
}

.header-right .dropdown-item {
  padding: 8px 12px;
  display: block;
  color: black;
  text-decoration: none;
  font-family: var(--f-fam);
}

.header-right .dropdown-item:hover {
  background-color: #f0f0f0;
}

.header-right .toggle-dropdown-checkbox:checked+.account-signup+.dropdown-menu {
  display: block;
}

.right-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
}

.searchcls {
  border-right: 1px solid #ededed3d;
  padding-right: 15px;
}

.singnin {
  border-right: 1px solid #ededed3d;
  padding-right: 7px;
  padding-left: 7px;
}

.rtosection {
  border-right: 1px solid #ededed3d;
  padding-right: 6px;
  padding-left: 6px;
}

@media only screen and (max-width: 1050px) {
  .singnin {
    padding-right: 5px;
    padding-left: 10px;
  }

  .rtosection {
    padding-right: 5px;
    padding-left: 5px;
  }

  .buycarsection {
    padding-left: 5px !important;
  }
}

@media only screen and (max-width: 983px) {
  .right-contact {
    gap: 0;
  }
}

.rtosection a {
  color: #fff;
  font-family: var(--f-fam-p);
  font-size: 15px;
}

.buycarsection {
  padding-left: 4px;
  padding-right: 4px;
}

.buycarsection a {
  color: #fff;
  font-family: var(--f-fam-p);
  font-size: 15px;
}

.header-right span {
  font-size: 15px;
  font-family: var(--f-fam);
  color: #fff;
}

.header-right .fa-user {
  color: #fff;
}

/* banner by mandeep */
section.bannersection {
  /* margin-top: -10%; */
}

.bannersection swiper-container {
  width: 100%;
  height: 100%;
}

.bannersection swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 103vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

.bannersection swiper-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: inherit;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  animation: kenburns 20s infinite;
  z-index: -1;
}

@keyframes kenburns {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.bannersection p {
  color: var(--color-3);
  font-size: 16px;
  line-height: 26px;
  font-weight: 700;
  font-family: var(--f-fam-p);
}

.bannersection h2 {
  color: #fff;
  font-size: 55px;
  line-height: 76px;
  font-family: var(--f-fam);
}

.list-ticks-green {
  display: flex;
  gap: 18px;
  padding: 0;
}

.list-ticks-green li {
  list-style: none;
  color: #fff;
  font-family: var(--f-fam-p);
  font-size: 16px;
}

.list-ticks-green .fa-check {
  background-color: var(--color-3);
  padding: 3px;
  border-radius: 50px;
  font-size: 13px;
}

.bannersection .firstone {
  padding-top: 200px !important;
}

@media (max-width: 1200px) {
  section.bannersection {
    /* margin-top: -10%; */
  }

  .bannersection h2 {
    font-size: 2.5rem;
  }
}

@media (max-width: 992px) {
  section.bannersection {
    /* margin-top: -15%; */
  }

  .bannersection swiper-slide {
    height: 80vh;
    /* Reduce height for tablet screens */
  }

  .bannersection .firstone {
    padding-top: 150px !important;
  }

  .bannersection h2 {
    font-size: 2rem;
    line-height: 1.3;
  }

  .bannersection p {
    font-size: 0.9rem;
  }

  .list-ticks-green li {
    font-size: 0.9rem;
  }
}

@media (max-width: 769px) {
  section.bannersection {
    /* margin-top: 0; */
  }

  .bannersection swiper-slide {
    /* height: 70vh; */
  }

  .bannersection .firstone {
    padding-top: 190px !important;
  }

  .bannersection h2 {
    font-size: 1.75rem;
  }

  .bannersection p {
    font-size: 0.85rem;
  }

  .list-ticks-green li {
    font-size: 0.85rem;
  }
}

@media (max-width: 576px) {
  .bannersection swiper-slide {
    /* height: 60vh; */
  }

  .bannersection .firstone {
    padding-top: 170px !important;
  }

  .bannersection h2 {
    font-size: 1.2rem;
  }

  .bannersection p {
    font-size: 1rem;
  }

  .list-ticks-green {
    flex-direction: column;
    gap: 10px;
  }

  .list-ticks-green li {
    font-size: 0.9rem;
  }
}

/* four column details section */
.four-column-section .section-one {
  border: 1px solid var(--border1-bgwhite);
  border-radius: 10px;
  background-color: var(--background-color-white);
  padding: 28px;
  position: relative;
  top: -13px;
  z-index: 6;
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
}

.four-column-section .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  background-color: var(--color-3);
}

.taeb button {
  font-size: 16px;
  font-family: var(--f-fam-p);
  color: #000;
  font-weight: 500;
}

.taeb-switch {
  border-radius: 37px;
  background-color: #f4f4f4;
  padding: 8px;
  width: 100%;
  max-width: 316px;
  margin-left: auto;
  margin-right: auto;
}

.four-column-section .inner-content {
  display: flex;
  gap: 10px;
}

.four-column-section .inner-content .zooming {
  width: 70px;
}

.four-column-section .zooming {
  overflow: hidden;
}

.four-column-section .zooming img {
  transition: transform 0.3s ease;
}

.four-column-section .inner-content:hover .zooming img {
  transform: scale(1.1);
}

@media (max-width: 576px) {
  .four-column-section .inner-content {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
  }
}

@media (max-width: 767px) {
  .four-column-section .border-l {
    border-left: none;
  }
}


/* brands-two */
.brands-two {
  background-color: var(--bgcolor);
  padding-top: 14%;
  padding-bottom: 70px;
  margin-top: -13%;
  border-bottom: 1px solid var(--border-bgwhite);
}

.brands-slider {
  margin-top: 15px;
}

.brands-slider .owl-carousel .item img {
  display: block;
  width: 40%;
  height: 100%;
  object-fit: cover;
  margin: auto;
  margin-top: 5px;
}

.brands-slider .owl-nav {
  display: none !important;
}

.brands-slider .inner-content {
  padding: 5px 0px 0px 0px;
  background-color: var(--background-color-white);
  border: 1px solid var(--border1-bgwhite);
  border-radius: 10px;
}

.brands-slider .inner-content:hover {
  box-shadow: 0px 30px 30px 0px #0000001A;
}

/* buy-selling section */
.buy-sell-tab-two {
  background-color: #f5b754;
  border-radius: 12px;
  padding: 8px;
  justify-content: space-between;
  align-items: center;
}

.buy-sell-tab-two .fa-car {
  font-size: 24px;
  color: #000000;
}

.buy-sell-tab-two .nav-link {
  color: #fff;
  font-size: 16px;
  line-height: 20px;
  font-family: var(--f-fam-p);
  padding: 12px 20px;
}

@media only screen and (max-width: 380px) {
  .buy-sell-tab-two .nav-link {
    font-size: 15px !important;
  }
}

@media only screen and (max-width: 362px) {
  .buy-sell-tab-two .nav-link {
    font-size: 14px !important;
  }
}

@media only screen and (max-width: 348px) {
  .buy-sell-tab-two .nav-link {
    font-size: 13px !important;
  }
}

.buy-sell-tab-two .nav-link.active {
  color: #000;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: rgba(99, 99, 99, 1.2) 0px 2px 8px 0px;
}

.buy-selling section .owl-theme .owl-nav {
  display: none;
}

.card-contents {
  margin-top: 15px;
}

.card-spot {
  position: relative;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border1-bgwhite);
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: var(--box-shadow1);
}

.card-spot .card-image {
  position: relative;
  overflow: hidden;
}

.card-spot .card-image img {
  display: block;
  width: 100%;
  transition: transform 0.3s ease;
  padding-bottom: 125px;
}

.card-spot:hover .card-image img {
  transform: scale(1.1);
}

.card-spot .card-info {
  position: absolute;
  bottom: 15px;
  right: 24px;
  left: 24px;
  z-index: 7;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: flex-end;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.background-card {
  background-color: var(--background-color-white) !important;
}

.buy-sell-content-two-car {
  /* padding: 25px; */
  background-color: var(--bgcolor);
  border: 1px solid var(--border-bgwhite);
  border-radius: 15px;
}

.buy-sell-content-two-car ul li {
  list-style: none;
  margin-bottom: 10px;
}

.buy-sell-content-two-car ul li span {
  margin-right: 10px;
}

.buy-sell-content-two-car .fa-light {
  background-color: #f5b754;
  padding: 6px;
  color: #fff;
  border-radius: 8px;
}

.buy-sell-content-two-car b {
  font-size: 20px;
  font-weight: 400;
  font-family: var(--f-fam);
  color: var(--color-white-black);
}

.buy-sell-content-two-car .bg-back {
  background-image: url(/assets/images/bgcolorchangeoutput-onlinepngtools.png);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

.box-image-payment-2 img {
  border-radius: 56px;
}

@media (max-width: 576px) {
  .box-image-payment-2 {
    padding: 15px 0px;
  }
}

/* end buy-selling section */


/* how it workks start  */

/* workshowto */


.work-two {
  margin: 50px 0px;
  padding: 50px 0px;
  background: var(--bgcolor);
}

.about-thumb-wrap {
  position: relative;
}

.about-thumb-wrap img {
  border-radius: 10px;
}

.about-thumb-wrap .img-2 {
  margin: 0 0px -217px 25px;
}

.about-thumb-wrap .img-3 {
  margin: 36px 0 0 60px;
  z-index: 3;
}

.about-thumb-wrap:after {
  content: "";
  position: absolute;
  left: -40px;
  top: 80px;
  background: url(https://webnextpro.com/tf/carace/assets/img/about/dot.png);
  height: 243px;
  -webkit-animation: top-image-bounce 3s infinite ease-in-out;
  animation: top-image-bounce 3s infinite ease-in-out;
  width: 88px;
}

.about-thumb-wrap:before {
  content: "";
  position: absolute;
  right: 60px;
  bottom: 56px;
  background: url(https://webnextpro.com/tf/carace/assets/img/about/bg.png);
  height: 194px;
  -webkit-animation: top-image-bounce 3s infinite ease-in-out;
  animation: top-image-bounce 3s infinite ease-in-out;
  width: 194px;
  z-index: -1;
}

.about-counter-wrap {
  border: 2px solid var(--main-color);
  border-radius: 5px;
  text-align: center;
  padding: 22px 24px;
  margin: 30px 0 0;
}

.about-counter-wrap .media {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin: auto;
}

.about-counter-wrap h2 {
  margin-bottom: 0;
  font-size: 48px;
  font-weight: 700;
  color: var(--main-color);
  display: inline-block;
  min-width: 82px;
}

.about-counter-wrap h4 {
  margin-bottom: 0;
  font-weight: 700;
  margin-left: 20px;
  text-align: left;
  display: inline-block;
  line-height: 32px;
}

@keyframes top-image-bounce {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }

  50% {
    -webkit-transform: translateY(12px);
    transform: translateY(12px);
  }

  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

@-webkit-keyframes left-image-bounce {
  0% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }

  50% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
}

.work-two ul li {
  margin-bottom: 10px;
}

.points span {
  font-size: 20px;
}

.points strong {
  font-size: 17px;
  line-height: 24px;
  font-family: var(--f-fam);
  font-weight: 500;
}

.points p {
  margin-left: 32px;
}

@media (max-width: 990px) {
  .about-thumb-wrap .img-2 {
    margin: 0 3px 0px 68px;
    width: 40%;
  }
}

@media (max-width: 576px) {
  .about-thumb-wrap {
    margin-bottom: 15px;
  }

  .about-thumb-wrap .img-2 {
    margin: -173px 0px -217px 149px;
    width: 45%;
  }

  .about-thumb-wrap .img-1 {
    width: 45%;
    margin-left: 16px;
  }

  .about-thumb-wrap .img-3 {
    width: 45%;
    margin: 36px 0 0 19px;
  }
}

/* end workshowto */
/* end how it workks start  */

/* start workshopthree */



/* end workshopthree */

/* featured-newly-added start trending-product */
.trending-product .owl-theme .owl-nav {
  display: none;
}

.trending-product .mstart {
  margin-left: 34px;
}

@media only screen and (max-width: 991px) {
  .trending-product .mstart {
    margin-left: 0px;
  }
}

section.trending-product {
  margin-bottom: 50px;
}

.car-listing {
  background-color: var(--background-color-white);
  border: 1px solid var(--border1-bgwhite);
  border-radius: 10px;
  margin-bottom: 30px;
  padding: 10px;
  position: relative;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.car-listing .thumb {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  z-index: 0;
  transition: transform 0.3s ease;
}

.trending-product .thumb {
  height: 200px;
  object-fit: cover;
  align-items: end;
  display: flex;
}

.car-listing .thumb img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

.car-listing:hover .thumb img {
  transform: scale(1.1);
}

.car-listing:hover .thumb {
  background: linear-gradient(180deg, rgba(12, 18, 39, 0) 28%, rgba(12, 18, 39, 0.8) 100%);
}

.car-listing .thumb:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(12, 18, 39, 0.8) 100%);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 1;
}

.car-listing:hover .thumb:before {
  opacity: 1;
}

.car-listing .thumb .tag {
  background-color: var(--color-3);
  border-radius: 12px;
  color: #fff;
  font-family: var(--f-fam-p);
  font-size: 10px;
  font-weight: 400;
  padding: 6px 13px;
  position: absolute;
  top: 10px;
  left: 20px;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  z-index: 2;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(-10px);
}

.car-listing:hover .thumb .tag {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.car-listing .details {
  padding: 15px 9px;
}

.car-listing .details .price {
  font-size: 15px;
  font-weight: 600;
  font-family: var(--f-fam-p);
  color: var(--color-white-black);
  margin-bottom: 3px;
}

.car-listing:hover .details .title,
.car-listing:hover .details .title a {
  color: var(--color-3);
}

.car-listing .details .listing_footer {
  border-top: 1px solid var(--border1-bgwhite);
  padding-top: 6px;
  margin-bottom: -35px;
}

.car-listing .details .listing_footer ul {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}


.car-listing .details .listing_footer ul li a {
  font-size: 14px;
  color: var(--color-white-black);
  display: flex;
  align-items: center;
  font-family: var(--f-fam-p);
}

.car-listing .details .listing_footer ul li a span {
  margin-right: 4px;
}

.listing_footer ul li a span {
  font-size: 14px;
}

.car-listing .thumb .thmb_cntnt2 {
  bottom: 0px;
  left: 20px;
  position: absolute;
  transform: translateY(40px);
  transition: all 0.3s ease;
}

.car-listing:hover .thumb .thmb_cntnt2,
.car-listing:hover .thumb .thmb_cntnt3 {
  visibility: visible;
  transform: translateY(-3px);
  z-index: 1;
}

.car-listing .thmb_cntnt2 li:first-child {
  margin-right: 13px;
}

.car-listing .thmb_cntnt2 li a {
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 400;
  line-height: 13px;
}

.car-listing .thmb_cntnt2 li a span {
  font-size: 14px;
  font-weight: normal;
}

.list-inline-item:not(:last-child) {
  margin-right: 0.1rem;
}

.car-listing .thumb .thmb_cntnt3 {
  bottom: 0px;
  right: 20px;
  position: absolute;
  transform: translateY(50px);
  transition: all 0.3s ease;
}

.car-listing:hover .thumb .thmb_cntnt3 {
  visibility: visible;
  transform: translateY(1px);
}

.car-listing .thumb .thmb_cntnt3 li {
  background-color: #0C1227;
  border-radius: 50%;
  height: 30px;
  line-height: 30px;
  width: 30px;
  text-align: center;
}

.car-listing .thumb .thmb_cntnt3 li:first-child {
  margin-right: 8px;
}

.car-listing .thumb .thmb_cntnt3 li a {
  color: #FFFFFF;
}

.car-listing .thumb .thmb_cntnt3 li span {
  color: #FFFFFF;
}

.car-listing .thumb .thmb_cntnt3 li a span {
  font-size: 10px;
}

.listign_review ul li a i {
  color: #F5C34B;
  font-size: 10px;
}

.listign_review ul li:nth-child(6) a {
  color: #1A3760;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 15px;
  letter-spacing: 0em;
}

.listign_review ul li:last-child {
  color: #5F6973;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 15px;
  letter-spacing: 0em;
}

.car-listing .details .title,
.car-listing .details .title a {
  font-size: 17px;
  line-height: 25px;
  font-family: var(--f-fam);
  font-weight: 500;
  color: var(--color-white-black);
  margin-bottom: -3px;
}

.location {
  font-size: 13px;
  font-family: var(--f-fam);
  font-weight: 500;
  padding-bottom: 6px;
}

.listign_review {
  margin-bottom: -10px;
}

.laptop-hide {
  display: none;
}

@media (max-width: 992px) {
  .inmobile-992 {
    display: none;
  }

  .laptop-hide {
    display: block;
  }
}

/* end featured-newly-added start trending-product */


/* car categories 2 */
.carcategories {
  background: var(--bgcolor);
  padding: 50px 0px;
  border-top: 1px solid var(--border-bgwhite);
  border-bottom: 1px solid var(--border-bgwhite);
}

.carcategories-tab {
  margin-top: 15px;
}

.carcategories .owl-theme .owl-nav {
  display: none;
}

.bodytypecars {
  border: 1px solid var(--border1-bgwhite);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.sectioncarimage {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.buycarimage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.bodytypecars:hover .buycarimage {
  transform: scale(1.1);
}

.card-right .rating {
  display: inline-block;
  padding: 2px 14px 2px 18px;
  background-color: #fff;
  border-radius: 8px;
  color: var(--color-3);
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  background-repeat: no-repeat;
  background-position: left 10px center;
  position: relative;
  /* left: 126px;
  top: -14px; */
  transform: translate(5%, -50%) !important;
}

@media (max-width: 576px) {
  .card-right .rating {
    left: 0;
  }
}

@media (max-width: 772px) {
  .categories-nav {
    width: 100%;
    overflow: hidden;
  }

  .buy-sell-tab-two.carcategories-nav-mobile {
    background-color: #f5b754;
    border-radius: 12px;
    padding: 8px;
    justify-content: center;
    align-items: center;
  }

  /* .carcategories-nav-mobile {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 91%;
    overflow-x: scroll;
  } */
}

.card-facitlities {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 5px;
  border-top: 1px solid var(--border1-bgwhite);
}

.ci {
  width: 50%;
  /* padding: 0px 0px 0px 30px; */
  margin-bottom: 10px;
  color: var(--smalltext);
  font-family: var(--f-fam-p);
  font-size: 15px;
}

.card-miles {
  background: url(https://carento-demo.vercel.app/assets/imgs/template/icons/mile.svg) no-repeat left center;
}

.card-gear {
  background: url(https://carento-demo.vercel.app/assets/imgs/template/icons/automatic.svg) no-repeat left center;
}

.card-fuel {
  background: url(https://carento-demo.vercel.app/assets/imgs/template/icons/fuel.svg) no-repeat left center;
}

.card-seat {
  background: url(https://carento-demo.vercel.app/assets/imgs/template/icons/seat.svg) no-repeat left center;
}


/* end car categories 2  */


/* Why You Should Choose FRONTDOOR  */
.driver {
  margin-bottom: 30px;
}

.why-us {
  position: relative;
  padding: 50px 0px 10px;
  background: var(--background-color-white) !important;
}

.why-us .text-content {
  position: relative;
  margin-bottom: 20px;
}

.why-us .box {
  position: relative;
  margin-bottom: 25px;
}

.why-us .box .tab-link {
  position: relative;
  display: block;
  border: 1px solid var(--border1-bgwhite);
  padding: 16px 20px 16px 82px;
  font-size: 14px;
  color: #292929;
}

.why-us .box .tab-link .arrow {
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 30px;
  height: 30px;
  text-align: center;
  color: #ffffff;
  font-size: 16px;
  line-height: 30px;
  background: var(--color-3);
}

.why-us .box .tab-link:hover .arrow {
  background: #000;
}

.why-us .box .tab-link * {
  transition: all 300ms ease;
  -webkit-transition: all 300ms ease;
}

.why-us .box .tab-link.active-btn,
.why-us .box .tab-link:hover {
  background: var(--color-3);
  color: #ffffff;
  border-color: var(--color-3);
}

.why-us .box .tab-link .icon {
  position: absolute;
  left: 20px;
  top: 28px;
  width: 70px;
  height: 70px;
  color: var(--color-3);
  font-size: 40px;
}

.why-us .box .tab-link.active-btn .icon,
.why-us .box .tab-link:hover .icon {
  color: #ffffff;
}

.why-us .box .tab-link.active-btn p,
.why-us .box .tab-link:hover p {
  color: #ffffff;
}

.carousel-inner {
  padding: 1em;
}

.carousel-control-prev,
.carousel-control-next {
  background-color: #e1e1e1;
  width: 6vh;
  height: 6vh;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

button.carousel-control-prev {
  background-color: #ffffff00;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 1.5rem;
  height: 1.5rem;
  /* background-color: #000; */
  border-radius: 50%;
}

@media screen and (min-width: 577px) {
  .cards-wrapper {
    display: flex;
  }

  .cardnew {
    margin: 0 0.5em;
    width: calc(100% / 2);
  }

  .image-wrapper {
    height: 20vw;
    margin: 0 auto;
  }
}

@media screen and (max-width: 576px) {
  .cardnew:not(:first-child) {
    display: none;
  }
}

/* end Why You Should Choose FRONTDOOR  */

/* footer */

.footer-section {
  background-image: url('https://i.ibb.co/jyRLrBZ/world-map.png');
  /* background-image: url('https://templates.hibootstrap.com/cozu/default/assets/images/footer/map.png'); */
  padding: 25px 0px 5px 0px;
  position: relative;
  background-position: right;
  background-repeat: no-repeat;
  border-top: 1px solid var(--border1-bgwhite);
}

.footer-section::before {
  content: "";
  background-color: var(--footerbg);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  opacity: 1;
}

.footer-section h4 {
  font-family: var(--f-fam-p);
  color: #fff;
  font-size: 20px;
  font-weight: 500;
}

.footer-section ul li {
  list-style: none;
}

.footer-section ul li a {
  font-size: 17px;
  line-height: 24px;
  font-family: var(--f-fam-p);
  color: #808291;
}

.f-contact .icon {
  color: var(--color-3)
}

.footer-social {
  display: flex;
}

.footer-social a {
  font-size: 15px;
  display: flex;
  margin-right: 10px;
  text-align: center;
  color: #fff !important;
  width: 40px;
  height: 40px;
  background: #363434;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}

.footer-social a:hover {
  background-color: var(--color-3);
}

.footer-section .border-b2 {
  border-bottom: 1px solid rgb(255 255 255 / 24%);
}

.footer-section .border-r2 {
  border-right: 1px solid rgb(255 255 255 / 24%);
}

.footer-section .border-t2 {
  border-top: 1px solid rgb(255 255 255 / 24%);
}

.footer-section .fa-check-circle {
  color: var(--color-3);
  margin-right: 4px;
}

@media only screen and (max-width: 575px) {
  .footer-section {
    padding: 25px 10px;
  }

  .footer-section .border-r2 {
    border-right: none;
  }
}

@media only screen and (max-width: 1200px) {
  .footer-section {
    padding: 25px 10px;
  }
}

/* .bottomimg {
  position: absolute;
  right: 0px;
  bottom: 0;
  width: 8%;
}
@media screen and (max-width: 463px) {
  .bottomimg {
    width: 62%;
    opacity: 0.1;
  }
} */
/* .shape-left {
  width: 30%;
    position: absolute;
    height: auto;
    left: -13%;
    bottom: -23%;
    opacity: 0.4;
}
.shape-right {
    width: 46%;
    position: absolute;
    height: auto;
    right: -32%;
    bottom: -12%;
} */

a.phpdebugbar-restore-btn {
  height: 14px;
  width: 19px;
}

@media only screen and (max-width: 575px) {
  .p-b-m-40 {
    padding-bottom: 40px;
  }
}

.fab-wrapper {
  position: fixed;
  bottom: 3rem;
  right: 3rem;
  z-index: 10;
}

@media only screen and (max-width: 575px) {
  .fab-wrapper {
    bottom: 6rem;
  }
}

@media only screen and (max-width: 757px) {
  .fab-wrapper {
    bottom: 6rem;
  }
}

.fab-checkbox {
  display: none;
}

.fab-wrapper-new .fab {
  position: absolute;
  bottom: -1rem;
  right: -2rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--color-3);
  box-shadow: 0px 5px 20px var(--color-3);
  transition: all 0.3s ease;
  z-index: 1;
  border-bottom-right-radius: 6px;
  cursor: pointer;
  z-index: 0;
}

.fab-wrapper-new .fab:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
}

.fab-checkbox:checked~.fab:before {
  width: 90%;
  height: 90%;
  left: 5%;
  top: 5%;
  background-color: rgba(255, 255, 255, 0.2);
}

.fab-dots {
  position: absolute;
  height: 8px;
  width: 8px;
  background-color: white;
  border-radius: 50%;
  top: 50%;
  transform: translateX(0%) translateY(-50%) rotate(0deg);
  opacity: 1;
  animation: blink 3s ease infinite;
  transition: all 0.3s ease;
}

.fab-dots-1 {
  left: 15px;
  animation-delay: 0s;
}

.fab-dots-2 {
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  animation-delay: 0.4s;
}

.fab-dots-3 {
  right: 15px;
  animation-delay: 0.8s;
}

.fab-checkbox:checked~.fab .fab-dots {
  height: 6px;
}

.fab .fab-dots-2 {
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
}

.fab-checkbox:checked~.fab .fab-dots-1 {
  width: 32px;
  border-radius: 10px;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.fab-checkbox:checked~.fab .fab-dots-3 {
  width: 32px;
  border-radius: 10px;
  right: 50%;
  transform: translateX(50%) translateY(-50%) rotate(-45deg);
}

@keyframes blink {
  50% {
    opacity: 0.25;
  }
}

.fab-checkbox:checked~.fab .fab-dots {
  animation: none;
}

.fab-wheel {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10rem;
  height: 10rem;
  transition: all 0.3s ease;
  transform-origin: bottom right;
  transform: scale(0);
}

.fab-checkbox:checked~.fab-wheel {
  transform: scale(0.9);
}

.fab-action {
  position: absolute;
  background: var(--color-3);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: White;
  transition: all 1s ease;
  opacity: 0;
}

.fab-checkbox:checked~.fab-wheel .fab-action {
  opacity: 1;
  cursor: pointer;
}

.fab-action:hover {
  /* background-color: #fff;
  color: black; */
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.fab-wheel .fab-action-1 {
  right: -1rem;
  top: 0;
}

.fab-wheel .fab-action-2 {
  right: 3.4rem;
  top: 0.5rem;
}

.fab-wheel .fab-action-3 {
  left: 0.5rem;
  bottom: 3.4rem;
}

.fab-wheel .fab-action-4 {
  left: 0;
  bottom: -1rem;
}

/* footer end  */


/* rto page */
.breadcrumb-area2 .custom-container {
  margin: 2.5em auto;
}

section.rtopage2 {
  margin-top: 50px;
}

.page-header {
  vertical-align: middle;
}

.background-body {
  /* background-color: #fff !important; */
  background-color: var(--background-color-white);
}

/* .background-body.position-absolute.z-1.top-100.start-50.translate-middle.px-3.py-2.rounded-12.border.d-flex.gap-3
{
  border: 1px solid var(--border1-bgwhite);
} */
.background-body .fa-angle-right {
  color: var(--color-3);
}

.page-header .custom-container {
  min-height: 310px;
}

@media only screen and (max-width: 763px) {
  .container.breadcrumb-area2 {
    /* margin-top: 130px !important; */
  }
}

@media only screen and (max-width: 763px) {
  .container.breadcrumb-area2.single-breadcrucmb {
    margin-top: 0px !important;
  }
}

.container.breadcrumb-area2 {
  margin-top: 130px;
}

.container.position-absolute {
  padding-left: 50px;
}

.custom-container {
  max-width: 1412px;
  width: 100%;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  margin-right: auto;
  margin-left: auto;
}

.position-relative {
  position: relative !important;
}

.page-header .custom-container .bg-overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

.rounded-12 {
  border-radius: 12px !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.page-header .custom-container .bg-overlay .img-banner {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.page-header .custom-container .bg-overlay::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  width: 70%;
  height: 100%;
  opacity: 0.6;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 99.43%);
}

.z-1 {
  z-index: 1 !important;
}

.translate-middle {
  transform: translate(-50%, -50%) !important;
}

.gap-3 {
  gap: 1rem !important;
}

.start-50 {
  left: 50% !important;
}

.top-100 {
  top: 100% !important;
}

.position-absolute {
  position: absolute !important;
}

.breadcrumb-area2 a {
  font-family: var(--f-fam);
  font-size: 15px;
}

.boxshowblade {
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  padding: 15px;
  border-radius: 10px;
  border: 1px solid var(--border-bgwhite);
}

/* .breadcrumb-area2 a:hover{
  color: #fff;
} */

@media only screen and (max-width: 500px) {
  .page-header .custom-container {
    min-height: 240px;
  }

  .container.position-absolute {
    padding-left: 20px;
  }

  .page-header .custom-container .bg-overlay::after {
    width: 100%;
    height: 100%;
    opacity: 0.7;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 99.43%);
  }

  .background-body.position-absolute {
    width: 100%;
    justify-content: center;
  }
}

@media only screen and (max-width: 500px) {
  .fiftypercentwidth .background-body.position-absolute {
    width: 50%;
  }
}

@media only screen and (max-width: 430px) {
  .rtoupdate .background-body.position-absolute {
    width: 100%;
  }
}

@media only screen and (max-width: 500px) {
  .shop .background-body.position-absolute {
    width: 50%;
  }
}

.first-rto-box {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  background: var(--background-rto);
  padding: 12px;
  border: 1px solid var(--border1-bgwhite);
  border-radius: 12px;
  margin-bottom: 25px;
  height: 94%;
}

.rto-content {
  margin-top: 10px;
}

.rto-content h6 {
  font-size: 18px;
  font-family: var(--f-fam-p);
  line-height: 22px;
  color: var(--color-white-black);
}

.second-rto-box p.p-class.p-colr {
  font-size: 15px;
  line-height: 21px;
}

.imagebox {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.imagebox img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.second-rto-box:hover .imagebox img {
  transform: scale(1.1);
  opacity: 0.8;
}

.rto-left-slide {
  position: relative;
  overflow: hidden;
  color: white;
  background-color: var(--color-3);
  padding: 8px 14px;
  font-size: 14px;
  font-family: var(--f-fam-p);
  border: 0;
  transition: color 0.3s ease;
  display: inline-block;
  text-decoration: none;
  border-radius: 10px;
  top: 6px;
  cursor: pointer;
}

.rto-left-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #000;
  transition: left 0.3s ease;
  z-index: 0;
}

.rto-left-slide:hover::before {
  left: 0;
}

.rto-left-slide:hover {
  color: #fff;
}

.rto-left-slide span {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  font-family: var(--f-fam-p);
}

.rto-left-slide i {
  margin-left: 5px;
}

.box-number2 {
  padding: 15px;
  background-color: #fff;
  border-radius: 12px;
}

.box-number2 h3 {
  color: #000;
}

.box-number2 .pclass {
  font-size: 15px;
  line-height: 23px;
  font-family: var(--f-fam-p);
  font-weight: 500;
  margin: 0;
  color: black;
  margin-top: 15px;
}

.box-number2 .pclass a {
  font-size: 15px;
  font-family: var(--f-fam-p);
  font-weight: 500;
  color: red;
}

.box-number2 .mob-wrap span {
  background: #000000;
}

.login-form-container .form-group label {
  font-size: 15px;
  font-family: var(--f-fam-p);
  color: black;
}

.widthless input {
  padding-left: 30px;
}



/* end rto page */


/* rto new */
.logintext {
  font-size: 25px;
  font-family: var(--f-fam-p);
  line-height: 22px;
  color: var(--color-white-black);
  /* text-align: center; */
}

@media only screen and (max-width: 753px) {
  .logintext {
    text-align: left;
  }
}

.box-number-3 {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  /* border-radius: 0.5rem; */
  background: linear-gradient(124deg, var(--dashboardcardformpop) 50%, var(--background) 40%);
}

.pclass-re {
  font-size: 15px;
  font-family: var(--f-fam-p);
  font-weight: 500;
  color: var(--color-white-black);
  margin-top: 10px;
  line-height: 28px;
}

.pclass-re a {
  font-size: 15px;
  font-family: var(--f-fam-p);
  font-weight: 600;
  color: #0d6efd;
}

.form-control-rto-update {
  border-color: #dae1e3;
}

.form-control-rto-update:focus {
  border-color: unset;
}

.box-number-3 .mob-wrap span {
  z-index: 100;
  color: var(--color-white-black);
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
  line-height: 37px;
  height: unset;
  background-color: var(--bgcolor);
}

.box-number-3 .login-form-container input.form-control,
.login-form-container select.form-control {
  height: unset;
}

.box-number-3 .btn-reg {
  min-width: 100%;
}

.btn-close.btn-close-black {
  border: 1px solid var(--bgcolor);
  margin-right: 5px;
  margin-top: 5px;
}

#login-form-Modal .mobile-passcode,
.box-number-3 .mobile-otp {
  padding: 0rem;
  border-radius: 0px;
}

.text-danger {
  font-family: var(--f-fam-p);
}

@media (max-width: 385px) {
  .logintext {
    font-size: 22px;
  }
}

.chkgreen {
  display: none;
}

.chkgreen+label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  font-size: 16px;
  color: #333;
  line-height: 20px;
}

.chkgreen+label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid black;
  border-radius: 4px;
  background-color: #fff;
  transition: all 0.3s ease;
}

.chkgreen:checked+label:before {
  background-color: #4CAF50;
  border-color: #4CAF50;
}

.chkgreen:checked+label:after {
  content: '\2713';
  position: absolute;
  left: 5px;
  top: 0;
  font-size: 16px;
  color: white;
  line-height: 20px;
}

/* rto end */


/* Dashboard */
.dashboard-design .card-inner {
  transition: .5s;
  border: 0;
  position: relative;
  width: 100%;
  background: transparent;
  border-radius: .55rem
}

.dashboard-design .card-inner .body {
  font-size: 14px;
  padding: 20px;
  /* box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); */
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  border-radius: .55rem;
  /* background: #fff; */
  font-weight: 400;
  transition: all 0.2s ease-in-out;
  background: linear-gradient(70deg, var(--dashboardcard) 40%, var(--background) 40%);
}

.dashboard-design .card-inner .body:hover {
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out
}

.dashboard-design .card-inner .image {
  width: 20%;
  margin-bottom: 15px;
}

.card-inner .body h5 {
  font-size: 15px;
}

.card-inner .body h4 {
  font-size: 24px;
}

.card-two {
  border: 1px solid var(--border1-bgwhite);
  /* background-color: var(--background-color-white); */
  background-color: var(--bgcolor);
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
  padding: 20px;
  border-radius: 12px;
  position: sticky !important;
  top: 90px;
}

.card-body-two .text-black-color a {
  color: #000 !important;
}

.card-design {
  padding-bottom: 12px;
  margin-bottom: 10px;
}

.card-design strong {
  font-size: 17px;
  line-height: 30px;
  font-family: var(--f-fam);
  font-weight: 500;
  color: var(--color-white-black);
}

.card-body-two .icons {
  color: var(--color-3);
  margin-right: 5px;
}

.viewmorebtn {
  color: var(--viewmorebtndhb);
  font-size: 17px;
  font-weight: 500;
  font-family: var(--f-fam);
  transition: 0.5s;
}

.body:hover .viewmorebtn {
  background-color: #000;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
}

/* end Dashboard */

/* profile */

.formbg {
  width: 100%;
  /* max-width: 448px; */
  background: var(--background-color-white);
  border-radius: 12px;
  box-shadow: rgba(60, 66, 87, 0.12) 0px 7px 14px 0px, rgba(0, 0, 0, 0.12) 0px 3px 6px 0px;
  border: 1px solid var(--border1-bgwhite);
  position: sticky !important;
  top: 90px;
}

.padding-horizontal--35 {
  padding: 35px;
}

@media screen and (max-width:540px) {
  .padding-horizontal--35 {
    padding: 20px;
  }
}

.padding-bottom--15 {
  padding-bottom: 15px;
}

.padding-bottom--15 {
  padding-bottom: 15px;
}

.formbg label {
  font-size: 16px;
  line-height: 25px;
  font-family: var(--f-fam);
  font-weight: 500;
  margin-bottom: 5px;
}

.formbg .field input {
  font-size: 15px;
  font-family: var(--f-fam-p);
  line-height: 28px;
  padding: 8px 16px;
  width: 100%;
  min-height: 44px;
  border: unset;
  border-radius: 12px;
  outline-color: var(--color-3);
  background-color: var(--background-color-white);
  border: 1px solid var(--border1-bgwhite);
  color: var(--color-white-black);
}

.updatebutton {
  background-color: var(--color-3) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-family: var(--f-fam-p) !important;
  border-radius: 12px;
}

.h3assign {
  font-size: 18px;
  line-height: 25px;
  font-family: var(--f-fam);
  font-weight: 500;
  margin-bottom: 5px;
}

/*end profile */


/* address */
.formbg2 .default-box {
  position: relative;
  width: 66%;
}

.formbg2 {
  width: 100%;
  background: var(--background-color-white);
  border-radius: 12px;
  box-shadow: rgba(60, 66, 87, 0.12) 0px 7px 14px 0px, rgba(0, 0, 0, 0.12) 0px 3px 6px 0px;
  border: 1px solid var(--border1-bgwhite);
}

.adddresbtn {
  position: relative;
  overflow: hidden;
  color: white;
  background-color: var(--color-3);
  padding: 13px 24px;
  font-size: 16px;
  font-family: var(--f-fam-p);
  border: 0;
  transition: color 0.3s ease;
  display: inline-block;
  text-decoration: none;
  border-radius: 10px;
  top: 5px;
}

/* end address */

/* wallet */
.newwallet .nav-link {
  font-size: 16px;
  line-height: 26px;
  font-family: var(--f-fam-p);
  padding: 15px 20px;
  color: var(--color-white-black);
}

.newwallet .nav-link.active {
  background-color: var(--color-3);
  color: #fff;
}

.btn.btn-primary2 {
  padding-top: 11px !important;
  padding-bottom: 11px !important;
}

.btn.btn-primary {
  color: white;
  background-color: var(--color-3);
  border: none;
  font-family: var(--f-fam-p);
}

.btn-primary-black {
  background-color: black !important;
}

.btn-primary-black:hover {
  background-color: var(--color-3) !important;
}

.form-check label {
  font-size: 15px;
  line-height: 25px;
  font-family: var(--f-fam);
  font-weight: 500;
  color: var(--color-white-black);
  margin-bottom: 5px;
}

.dropdown-checkboxes .form-check label {
  font-size: 15px;
  line-height: 25px;
  font-family: var(--f-fam);
  font-weight: 500;
  color: var(--color-white-black);
}

.dashboardcontentcls .form-control {
  font-size: 15px;
  font-family: var(--f-fam-p);
  line-height: 28px;
  padding: 8px 16px;
  width: 100%;
  min-height: 44px;
  border: unset;
  border-radius: 12px;
  outline-color: var(--color-3);
  /* background-color: rgb(255, 255, 255); */
  border: 1px solid var(--border1-bgwhite);
}

.formbg3 {
  width: 100%;
  /* background: var(--bgcolor); */
  border-radius: 12px;
  box-shadow: rgba(60, 66, 87, 0.12) 0px 7px 14px 0px, rgba(0, 0, 0, 0.12) 0px 3px 6px 0px;
  padding: 20px;
}

.logoutcls {
  font-size: 17px;
  line-height: 30px;
  font-family: var(--f-fam);
  font-weight: 500;
  color: var(--color-white-black);
}

.create-agent {
  background-color: #f5b754;
  color: #fff;
  text-align: center;
  border-radius: 12px 12px 0px 0px;
  padding: 6px;
  font-size: 20px;
}

.padding-bottom--15 .btn.btn-primary {
  padding: 13px 15px;
}

.padding-bottom--15 .form-control-lg {
  border-radius: .375rem;
  border: 1px solid #ced4da;
}

.padding-bottom--15 label {
  font-size: 16px;
  line-height: 25px;
  font-family: var(--f-fam);
  font-weight: 500;
  margin-bottom: 5px;
  color: var(--color-white-black);
}

@media only screen and (max-width: 500px) {
  .mt-mobile-20 {
    margin-top: 20px;
  }
}

@media only screen and (max-width: 750px) {
  .mt-tab-20 {
    margin-top: 20px;
  }
}

.iconoverview {
  color: var(--color-3);
}

/* bank detalis  */

.bank-details-card {
  border: 1px solid var(--border1-bgwhite);
  border-radius: 12px;
  padding: 15px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.details_typecls {
  font-size: 16px;
  line-height: 25px;
  font-family: var(--f-fam);
  font-weight: 500;
  margin-bottom: 5px;
}

.bank-d-cls input {
  font-size: 15px;
  font-family: var(--f-fam-p);
  line-height: 28px;
  padding: 8px 16px;
  width: 100%;
  min-height: 44px;
  border: unset;
  border-radius: 12px;
  outline-color: var(--color-3);
  background-color: rgb(255, 255, 255);
  border: 1px solid var(--border1-bgwhite);
}

.bank-d-cls .form-control:focus {
  color: #212529;
  background-color: #fff;
  border-color: var(--color-3);
  outline: 0;
  box-shadow: 0 0 0 .25rem rgb(13 110 253 / 0%);
}

.bank-detail-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--border1-bgwhite);
  color: var(--color-white-black);
}

.bank-detail-item:last-child {
  border-bottom: none;
}

.scanner-image {
  display: block;
  margin-top: 10px;
}

/* login  */

.padding-form-50 {
  padding: 50px 100px;
}

.margin-t-60 {
  margin-top: 60px;
}

@media only screen and (max-width: 500px) {
  .padding-form-50 {
    padding: 10px 5px;
  }
}

@media only screen and (max-width: 786px) {
  .padding-form-50 {
    padding: 50px 20px;
  }
}

@media only screen and (max-width: 984px) {
  .verifybtn {
    padding: 10px 100px;
  }
}

@media only screen and (max-width: 730px) {
  .toggle-containerform {
    display: none;
  }

  .mobile-laptop {
    display: block !important;
  }

  .sign-in {
    width: 100% !important;
  }

  .containerform {
    min-height: 630px !important;
  }
}

.mobile-laptop {
  display: none;
}

.mobile-laptop img {
  width: 50%;
}

.margin-b-70 {
  margin-bottom: 60px;
}

.containerform {
  background-color: #f2f4f6c7;
  border-radius: 30px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  position: relative;
  overflow: hidden;
  max-width: 100%;
  min-height: 510px;
}

.containerform h1 {
  font-size: 30px;
  line-height: 40px;
  font-family: var(--f-fam-p);
  font-weight: 600;
}

.containerform p {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .3px;
  margin: 20px 0;
}

.containerform span {
  font-size: 12px;
}

.containerform a {
  color: #333;
  font-size: 13px;
  text-decoration: none;
  margin: 15px 0 10px;
}

.containerform button {
  background-color: #512da8;
  color: #fff;
  font-size: 12px;
  padding: 10px 45px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-transform: uppercase;
  margin-top: 10px;
}

.containerform button.hidden {
  background-color: transparent;
  border-color: #fff;
}

.containerform form {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.containerform input {
  background-color: #eee;
  border: 1px solid var(--border1-bgwhite);
  margin: 8px 0;
  padding: 10px 15px;
  font-size: 13px;
  border-radius: 8px;
  width: 100%;
  outline: none;
  margin-left: 10px;
  font-size: 15px;
  font-family: var(--f-fam);
}

.form-containerform {
  position: absolute;
  top: 0;
  height: 100%;
  transition: all .6s ease-in-out;
}

.sign-in {
  /* left: 0; */
  width: 50%;
  z-index: 2;
  padding: 35px;
}

.containerform.active .sign-in {
  transform: translateX(100%);
}

.social-icons {
  margin: 20px 0;
}

.social-icons a {
  border: 1px solid #ccc;
  border-radius: 20%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 3px;
  width: 40px;
  height: 40px;
}

.toggle-containerform {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: all .6s ease-in-out;
  border-radius: 150px 0 0 100px;
  z-index: 1000;
}

.containerform.active .toggle-containerform {
  transform: translateX(-100%);
  border-radius: 0 150px 100px 0;
}

.toggle {
  /* background-color: #512da8; */
  height: 100%;
  /* background: linear-gradient(to right, #f8b95554, #f5b754c2) */
  background: linear-gradient(to right, #000000a3, #0000009c), url(/assets/images/logincar.jpg);
  color: #fff;
  position: relative;
  left: -100%;
  height: 100%;
  width: 200%;
  transform: translate(0);
  transition: all .6s ease-in-out;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.containerform.containerform.active .toggle {
  transform: translateX(50%);
}

.toggle-panel {
  position: absolute;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 30px;
  text-align: center;
  top: 0;
  transform: translateX(0);
  transition: all .6s ease-in-out;
}

.toggle-right {
  right: 0;
  transform: translateX(0);
}

.containerform.active .toggle-right {
  transform: translateX(200%);
}

.phonetxt {
  font-size: 17px;
  line-height: 30px;
  font-family: var(--f-fam-p);
  font-weight: 500;
}

.phonetxt .fa-solid {
  color: var(--color-3);
}

.containerform .fab {
  color: #000;
}

.containerform .input-group-text {
  font-family: var(--f-fam-p);
  padding: 5px 10px;
  font-size: 18px;
}

.containerform .form-group.mt-2 {
  display: flex;
  align-items: center;
}

.containerform .form-check-input {
  width: 10px;
}

.containerform .pclass {
  font-size: 15px;
  line-height: 30px;
  font-family: var(--f-fam-p);
  font-weight: 500;
  margin: 0;
}

.containerform .pclass a {
  font-size: 15px;
  line-height: 30px;
  font-family: var(--f-fam-p);
  font-weight: 500;
  color: red;
}

.verifybtn {
  background-color: var(--color-3);
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 500;
  font-family: var(--f-fam-p);
  border-radius: 12px;
}

@media only screen and (max-width: 500px) {
  .verifybtn {
    padding: 10px 80px;
    border-radius: 20px;
  }
}

/* login end */

/* registernew */


/* registernew end*/

.imagereg {
  background-image: url(/assets/images/registerpage.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 0 12px 12px 0;
}

.registernew {
  /* box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; */
  border-radius: 12px;
}

.reg-form {
  padding: 25px 30px;
  background-color: var(--bgcolor);
  border-radius: 12px 0px 0px 12px;
}

.registernew .text-small {
  font-size: 17px;
  line-height: 30px;
  font-family: var(--f-fam-p);
  font-weight: 500;
}

.registernew .form-control-lg {
  font-size: 15px;
  font-family: var(--f-fam);
}

.registernew .form-text.text-muted {
  font-size: 16px;
  line-height: 30px;
  font-family: var(--f-fam-p);
  font-weight: 500;
}


/* shop sidebar  */

.shop-box-all {
  padding: 20px;
  border: 1px solid var(--border1-bgwhite);
  border-radius: 12px;
  margin-bottom: 20px;
}

#search-form {
  display: flex;
  align-items: center;
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  border-radius: 12px;
  padding: 5px 15px;
  background-color: var(--background-color-white) !important;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

#search-input {
  flex-grow: 1;
  border: none;
  outline: none;
  padding: 10px;
  font-size: 16px;
  border-radius: 30px;
  color: var(--color-white-black);
  font-family: var(--f-fam);
  width: 150px;
  background-color: var(--background-color-white) !important;
}

#search-input:focus {
  box-shadow: unset;
}

.fa-magnifying-glass {
  color: white;
  font-size: 14px;
  cursor: pointer;
  background-color: var(--color-3);
  padding: 7px;
  border-radius: 50px;
  margin-left: -34px;
}

.shop-box-one #search-form button {
  border: none;
  background-color: transparent;
}

.shop-box-two .rangeValues span {
  font-size: 15px;
  line-height: 22px;
  font-family: var(--f-fam-p);
  font-weight: 500;
  color: var(--color-white-black);
}

.shop-box-three span {
  font-size: 19px;
  line-height: 30px;
  font-family: var(--f-fam);
  font-weight: 500;
  color: var(--color-white-black);
}

.cat-text {
  font-size: 17px;
  line-height: 24px;
  font-family: var(--f-fam-p);
  color: #808291;
  font-weight: 500;
}

.sidebar-categories ul li {
  list-style: none;
  margin-bottom: 8px;
}

.sidebar-categories ul li a {
  font-size: 17px;
  line-height: 24px;
  font-family: var(--f-fam-p);
  color: #808291;
}

h4.filtertext {
  font-family: var(--f-fam);
  font-size: 17px;
  font-weight: 400;
  text-align: center;
  background: var(--color-3);
  padding: 15px 0px;
  /* border-radius: 0px 0px 1rem 1rem; */
  color: #fff;
}

.css-content {
  background-color: #fff;
  border: 1px solid var(--border1-bgwhite);
}


/* end shop sidebar  */


/* shop product */
.shop-product-first-column .small b {
  font-size: 17px;
  line-height: 25px;
  font-family: var(--f-fam);
  font-weight: 500;
  color: var(--color-white-black);
  margin-bottom: -3px;
}

.shop-selector label {
  font-family: var(--f-fam-p);
  font-size: 16px;
  color: var(--color-white-black);
}

.shop-selector select {
  font-family: var(--f-fam-p);
  font-size: 16px;
}

.shop-selector select {
  padding: 0.5rem;
  border-radius: 0px;
  background: var(--color-3);
  color: #fff;
  border: none;
  font-family: var(--f-fam-p);
  font-size: 14px;
  font-weight: 400;
}

.shop-selector select option {
  background-color: #fff;
  color: black;
  font-family: var(--f-fam-p);
  font-size: 14px;
}

.label-tag .small {
  color: #132739;
  background-color: var(--bgcolor);
  border-radius: 15px;
  padding: 0.2rem 0.5rem;
  font-family: var(--f-fam-p);
  font-size: 14px;
  font-weight: 400;
}

.shop-product-content .thumb {
  height: 200px;
  object-fit: cover;
  align-items: end;
  display: flex;
}

.box-grid-hotels .card-flight {
  max-width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  margin-bottom: 24px;
  height: auto;
  border: 1px solid var(--border1-bgwhite);
}

/* .card-flight {
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  max-width: 612px;
  width: 100%;
  margin-bottom: 24px;
} */

.box-grid-hotels .card-flight .card-image {
  max-width: 265px;
  flex: 0 0 265px;
  /* height: 200px; */
  object-fit: cover;
}

.card-title-gird {
  display: flex;
  gap: 10px;
  align-items: center;
}

.card-title-gird .txt-clr-1 {
  font-size: 17px;
  line-height: 25px;
  font-family: var(--f-fam);
  font-weight: 500;
  color: var(--color-white-black);
}

.card-flight .card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.box-grid-hotels .card-flight .card-info {
  flex: 1;
  padding: 20px;
  background-color: var(--background-color-white);
  border-radius: 12px;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}

.card-flight.card-hotel .card-info {
  padding: 10px 30px;
  position: relative;
  z-index: 2;
  margin-left: -11px;
}

.price {
  font-size: 1rem;
  font-weight: bold;
  color: #000;
}

@media (max-width: 1199.98px) {
  .box-grid-hotels .card-flight {
    flex-wrap: wrap;
  }

  .box-grid-hotels .card-flight .card-image {
    max-width: 100%;
    height: auto;
  }

  .box-grid-hotels .card-flight .card-info {
    margin-top: 10px;
  }
}

@media (max-width: 991.98px) {
  .box-grid-hotels .card-flight {
    flex-direction: column;
  }

  .box-grid-hotels .card-flight .card-info {
    padding: 15px;
  }
}

@media (max-width: 767.98px) {
  .box-grid-hotels .card-flight {
    width: 100%;
  }

  .box-grid-hotels .card-flight .card-image {
    flex: 0 0 100%;
    height: auto;
  }

  .box-grid-hotels .card-flight .card-info {
    height: auto;
    margin: 0;
  }
}

@media only screen and (max-width: 576px) {
  .card-flight {
    flex-direction: column;
  }

  .box-grid-hotels .card-flight .card-info {
    padding: 10px;
  }

  .card-flight.card-hotel .card-info {
    margin-left: 0px;
  }
}

.shop-footer-grid li a {
  font-size: 14px;
  color: var(--color-white-black);
  display: flex;
  align-items: center;
  font-family: var(--f-fam-p);
  margin-top: 5px;
}

.cart-shop-grid a.btn-hover.list-btn-style {
  background-color: var(--color-3);
  color: var(--white);
  border-radius: 10px;
  font-size: 16px;
  padding: 13px 24px;
  font-family: var(--f-fam);
}

.wishlist-grid i.far.fa-heart {
  background-color: black;
  color: #fff;
  padding: 10px;
  border-radius: 10px;
}

.sidebar {
  overflow: auto;
  position: -webkit-sticky;
  position: sticky;
  top: 5%;
  border: 1px solid #ececec;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.filteropen {
  display: flex;
  align-items: center;
  background: #f5b754;
  color: #fff;
  padding: 0 10px;
  border-radius: 12px;
  height: 100%;
  cursor: pointer;
}

.shop-open-show-new {
  display: none;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  background-color: #fff;
  border-radius: 1rem 1rem 0rem 0rem;
  border: 1px solid #00000033;
}

/* Active state: .shop-open-show is visible */
.shop-open-show-new.show {
  display: block;
  transform: translateY(0);
  opacity: 1;
}

.tag-fliter-newdec ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.row-box-filter {
  height: 375px;
  overflow: scroll;
}

.filter-row-newdec {
  display: flex;
  gap: 10px;
  margin-top: -40px;
  border-top: 1px solid var(--border1-bgwhite);
}

.firstcol-new {
  width: 38%;
  background-color: var(--bgcolor);
  color: #000;
  padding: 10px;
}

.tabfilter-new {
  padding: 10px;
  cursor: pointer;
  font-weight: bold;
  border-bottom: 2px solid transparent;
}

.tabfilter-new:hover {
  background-color: #f1f1f1;
}

.tabfilter-new.active {
  background-color: var(--color-3);
  color: #fff;
  border-radius: 12px;
}

.secondcol-new {
  width: 62%;
  padding: 15px;
  background-color: var(--background-color-white);
  border-left: 1px solid var(--border1-bgwhite);
}

.tab-content-filter-new {
  display: none;
}

.tab-content-filter-new.show {
  display: block;
}

.d-flex-filter {
  display: flex;
  margin-top: -30px;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
}

.d-flex-filter i.fa-solid.fa-x.close-button {
  color: var(--color-3);
}

.d-flex-filter h6 {
  font-family: var(--f-fam-p);
  color: var(--color-white-black);
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
}

.filter-row-newdec .rangeValues span {
  font-size: 17px;
  line-height: 24px;
  font-family: var(--f-fam-p);
  color: #808291;
  font-weight: 400;
}

.mobileshow {
  display: none;
}

@media only screen and (max-width: 500px) {
  .mobile-hide-filter {
    display: none;
  }

  .mobileshow {
    display: block;
  }
}

@media only screen and (min-width: 500px) {
  .shop-box-seven.filter-box {
    display: none;
  }
}

.shop-box-seven.filter-box {
  position: fixed;
  bottom: 0;
  background-color: var(--background-color-white);
  z-index: 100;
  width: 100%;
}

.shop-open-show-new {
  background-color: var(--bgcolor);
  border-radius: 1rem 1rem 0rem 0rem;
  border: 1px solid #00000033;
}

.shop-open-show-new h4 {
  font-size: 16px;
}

/* end shop product */


/* single product  */
.product-details-new {
  padding: 50px 0px;
}

.box-section {
  background-color: var(--bgcolor);
  border-bottom: 1px solid var(--border-bgwhite);
  box-shadow: var(--box-shadow1);
}

.box-section .container.breadcrumb-area2 {
  margin-top: 80px;
  margin-bottom: -20px;
}

@media only screen and (max-width: 926px) {
  .box-section .container.breadcrumb-area2 {
    margin-top: 120px;
  }
}

.box-section .breadcrumbs {
  padding: 20px 0px;
}

.breadcrumbs li {
  display: inline-block;
  padding-right: 37px;
  position: relative;
}

.breadcrumbs li a {
  font-size: 17px;
  line-height: 25px;
  font-family: var(--f-fam);
  font-weight: 500;
  color: var(--color-white-black);
}

.breadcrumbs li span.arrow-right {
  position: absolute;
  top: 0px;
  right: 15px;
  color: var(--iconcolor1);
}

.product-details-img-content-new {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border1-bgwhite);
}

.rate-element {
  border: 1px solid var(--border1-bgwhite);
  border-radius: 12px;
  padding: 6px 15px 6px 15px;
  background-repeat: no-repeat;
  background-position: left 12px center;
  box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.07);
  display: inline-block;
  background-color: var(--background-color-white) !important;
  color: #000000;
  font-size: 14px;
  font-family: var(--f-fam);
  font-weight: 500;
}

@media screen and (max-width:968px) {
  .rate-element {
    width: 110px !important;
  }
}

.rate-element .span {
  font-size: 14px;
  font-family: var(--f-fam);
  font-weight: 500;
}

.rate-element .fa-star {
  color: #F5C34B;
  font-size: 10px;
}

.skucls {
  color: #000000;
  font-size: 15px;
  font-family: var(--f-fam);
  font-weight: 500;
}

.skucls span {
  color: #0000009c;
}

.sideright-second .title {
  font-size: 25px;
  line-height: 25px;
  font-family: var(--f-fam);
  font-weight: 500;
  color: var(--color-white-black);
}

.sideright-third span {
  font-size: 16px;
  font-weight: 500;
  font-family: var(--f-fam-p);
  color: var(--color-white-black);
}

.hrcls hr {
  color: #aaadab;
}

hr {
  color: #999999;
}

.sideright-six {
  margin-top: 15px;
  gap: 10px;
}

.labelcls-shop {
  font-size: 17px;
  font-weight: 700;
  font-family: var(--f-fam-p);
  color: var(--color-white-black);
}

.sideright-six ul li {
  list-style: none;
}

.sideright-six ul li a {
  color: var(--color-3);
  font-size: 16px;
  font-weight: 600;
  font-family: var(--f-fam-p);
}

.sideright-seven {
  gap: 10px;
}

.sideright-seven .categories-tags span {
  color: var(--color-3);
  font-size: 16px;
  font-weight: 600;
  font-family: var(--f-fam-p);
}

.sideright-flex {
  border: 1px solid var(--border1-bgwhite);
  border-radius: 12px;
  margin-top: 20px;
  padding: 15px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  background-color: var(--bgcolor);
}

.siderightd-flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

@media screen and (max-width:470px) {
  .siderightd-flex {
    flex-direction: column;
  }

  .siderightcontent-second-column {
    display: flex;
    gap: 2px;
  }

  .labelcls-shop {
    font-size: 16px;
  }
}

.siderightcontent {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 1;
}

.siderightcontent img {
  width: 30px;
  height: 40px;
  object-fit: contain;
}

.siderightcontent .nameul a {
  background: transparent !important;
  padding: 0 !important;
  font-family: var(--f-fam-p) !important;
  font-weight: 500 !important;
  color: var(--smalltext);
}

.nameul {
  background: transparent !important;
  padding: 0 !important;
  font-family: var(--f-fam-p) !important;
  font-weight: 500 !important;
  color: var(--smalltext);
}

.buy-sell-tab-two-shop a {
  font-size: 16px;
  font-weight: 600;
  font-family: var(--f-fam-p);
  color: #000;
  padding: 7px;
}

.product-all-content .buy-sell-tab-two-shop a {
  color: var(--smalltext);
}

.description-review-area-new {
  box-shadow: var(--box-shadow2);
  padding: 20px;
  border-radius: 12px;
}

.buy-sell-tab-two-shop a.active {
  color: #ffffff;
  background-color: var(--color-3);
  padding: 7px;
  border-radius: 5px;
}

.description-review-text p {
  color: var(--color-white-black);
  font-size: 16px;
  font-weight: 500;
  font-family: var(--f-fam-p);
  text-align: left;
  line-height: 27px;
}

.padding-50-0 {
  padding: 50px 0;
}

.widthless label {
  font-size: 15px;
  font-family: var(--f-fam-p);
  color: black;
}

@media only screen and (max-width: 767px) {
  .mobile-margin-top {
    margin-top: 20px;
  }
}

@media only screen and (max-width: 979px) {
  .flex-rev-mobile {
    flex-direction: column-reverse;
  }
}

.product-all-content {
  margin-top: 50px;
  margin-bottom: 50px;
}

.product-all-content i.fa.fa-chevron-down {
  color: black;
}

.card-header {
  cursor: pointer;
}

/* end single product  */

/* overview */
.span-txt-clr-1 {
  color: var(--color-white-black);
  font-size: 17px;
  font-weight: 500;
  font-family: var(--f-fam-p);
  text-align: left;
  line-height: 27px;
}

.span-txt-clr-2 {
  color: var(--smalltext);
  font-size: 17px;
  font-weight: 500;
  font-family: var(--f-fam-p);
  text-align: left;
  line-height: 27px;
}

.top-un-overview .icon {
  color: var(--color-3);
}

.fontspan {
  color: var(--color-white-black);
  font-size: 17px;
  font-weight: 500;
  font-family: var(--f-fam-p);
}

/* end overview */

/* message chatbot-new */
.chatbot-new-row {
  /* box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.4); */
  border-radius: 20px;
  /* width: 800px; */
  margin: auto;
  /* background-color: var(--bgcolor); */
  border: 1px solid #ececec;
}

.row-one {
  /* background: var(--color-3); */
  background: #ececec59;
  padding: 10px;
  border-radius: 20px 20px 0px 0px;
  border-bottom: 1px solid var(--border1-bgwhite);
}

.row-one p {
  font-size: 16px;
  line-height: 26px;
  /* color: #fff; */
  color: #000;
  font-family: var(--f-fam-p);
  padding-left: 10px;
}

.chatbot-new h1 {
  font-size: 25px;
  line-height: 25px;
  font-family: var(--f-fam);
  font-weight: 500;
  /* color: #fff; */
  color: #000;
  padding-left: 10px;
}

.back-butoncss {
  border-bottom: 1px solid var(--border1-bgwhite);
  padding: 10px 20px;
}

.back-butoncss h6 {
  font-family: var(--f-fam-p);
  color: black;
  font-size: 20px;
  cursor: pointer;
}

.header-chat {
  display: flex;
  gap: 10px;
  align-items: center;
}

.chat-listh3 h3 {
  color: black;
  font-family: var(--f-fam);
  font-size: 15px;
  line-height: 14px;
}

.chat-listh3 p {
  color: black;
  font-family: var(--f-fam-p);
  font-size: 14px;
}

.row-one .fa-comment-smile {
  margin-left: 5px;
}

#model_wrapper .active .colorboxbtn {
  background-color: var(--color-3);
  color: #fff;
}

#model_wrapper .colorboxbtn {
  padding: 0.2rem 0.8rem;
  font-size: 17px;
  border-radius: 8px;
  font-family: var(--f-fam);
  background-color: #c1c1c136;
  color: var(--color-white-black);
}

@media only screen and (max-width: 815px) {
  .chatbot-new-row {
    width: 100%;
  }
}

.msg-body ul li.sender {
  display: block;
  width: 100%;
  position: relative;
}

.msg-head h3 {
  color: var(--color-3);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 0;
  font-family: var(--f-fam);
}

.msg-body ul li.sender p {
  color: #000;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  padding: 15px;
  margin-bottom: 5px;
  background: #ececec59;
  display: inline-block;
  border-radius: 12px;
  font-family: var(--f-fam-p);
}

.msg-body ul li.sender p b {
  display: block;
  color: #180660;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
}

.msg-body ul li.repaly {
  display: block;
  width: 100%;
  text-align: right;
  position: relative;
}

.msg-body ul li.repaly p {
  color: #000;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  padding: 15px;
  margin-bottom: 5px;
  background: #ececec59;
  display: inline-block;
  border-radius: 12px;
  font-family: var(--f-fam-p);
}

.msg-body ul li.repaly p b {
  display: block;
  color: #061061;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
}

.msg-body ul li.repaly:after {
  display: block;
  content: '';
  clear: both;
}

.msg-headp {
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-transform: capitalize;
  margin-bottom: 0;
  font-family: var(--f-fam-p);
}

.msg-head {
  padding: 12px;
  border-bottom: 1px solid #aaadab61;
  margin-bottom: 12px;
}

.send-box {
  padding: 15px;
  border-top: 1px solid #aaadab61;
}

.send-box .form-control {
  display: block;
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #222;
  background-color: #fff;
  background-clip: padding-box;
  border: none;
  border-bottom: 1px solid #aaadab61;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 20px;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  height: 38px;
  font-family: var(--f-fam-p);
  border-radius: 0;
}

.send-box button {
  border: none;
  background: #f6be6500;
  color: #000000;
  font-size: 15px;
  font-weight: 400;
  width: 12%;
  height: 38px;
  font-family: var(--f-fam-p);
  position: absolute;
  right: 15px;
}

.send-box button:hover {
  color: var(--color-3);
}

.send-box button i {
  margin-right: 5px;
  color: var(--color-3);
}

@media only screen and (max-width: 615px) {
  .send-box button {
    width: 25% !important;
  }
}

.chat-car .chat-list h3 {
  color: black;
  font-family: var(--f-fam);
  font-size: 15px;
}

.chat-car .chat-list p {
  color: black;
  font-family: var(--f-fam-p);
  font-size: 14px;
}

.chatperson {
  border-bottom: 1px solid #ececec;
  margin-bottom: 10px;
  padding-bottom: 10px;
  cursor: pointer;
}

/* end message chatbot-new */


/* about us page  */

.h6about {
  font-size: 18px;
  line-height: 30px;
  font-family: var(--f-fam);
}

.background-brand-2 {
  background-color: var(--color-3)
}

span.fs-96 {
  font-size: 96px;
  line-height: 96px;
  font-weight: 700;
  color: #000;
  font-family: var(--f-fam-p);
}

.background-brand-2 h4 {
  font-size: 36px;
  line-height: 48px;
  font-family: var(--f-fam);
}

.about-icon {
  background: var(--bgcolor);
  padding: 50px 0px;
  margin: 60px 0px;
  border-top: 1px solid var(--border-bgwhite);
  border-bottom: 1px solid var(--border-bgwhite);
}

.about-icon-box .icon {
  color: var(--color-3);
  font-size: 30px;
  margin-bottom: 15px;
}

.list-ticks-green-2 li {
  list-style: none;
  color: #808291;
  font-family: var(--f-fam-p);
  font-size: 17px;
  line-height: 30px;
}

.list-ticks-green-2 .fa-check {
  background-color: var(--color-3);
  padding: 4px;
  border-radius: 50px;
  font-size: 13px;
  color: #fff;
}

.section-cta-7 {
  background-color: var(--bgcolor);
  padding: 50px 0px;
  margin: 60px 0px 0px 0px;
  border-top: 1px solid var(--border-bgwhite);
}

.translate-middle2 {
  transform: translate(-60%, -83%) !important;
}

@media only screen and (max-width: 1108px) {
  .d-none-d-lg-block {
    display: none;
  }
}

@media only screen and (max-width: 500px) {
  .about-us-hero .background-body.position-absolute {
    width: unset;
  }
}

@media only screen and (max-width: 400px) {
  .about-us-hero .background-body.position-absolute {
    width: 54%;
  }
}

@media only screen and (max-width: 362px) {
  .about-us-hero .background-body.position-absolute {
    width: 60%;
  }
}

@media only screen and (max-width: 350px) {
  span.fs-96 {
    font-size: 70px;
  }

  .background-brand-2 h4 {
    font-size: 30px;
  }
}

/* end about us page  */

/* contact us page */
.mt-30 {
  margin-top: 30px;
}

.card-contact {
  background-color: var(--bgcolor);
  width: 100%;
  padding: 22px 25px;
  border: 1px solid var(--border1-bgwhite);
  border-radius: 8px;
  margin-bottom: 25px;
}

.contacth4 {
  font-size: 24px;
  line-height: 32px;
  font-family: var(--f-fam);
  color: var(--tabletextcolor);
}

.ahrefcontact {
  font-size: 16px;
  line-height: 26px;
  font-family: var(--f-fam-p);
  color: var(--tabletextcolor);
}

.ahrefcontact:hover {
  color: var(--tabletextcolor);
}

.titleheading {
  font-size: 16px;
  line-height: 16px;
  font-weight: 600;
  font-family: var(--f-fam-p);
  margin-bottom: 16px;
}

section.box-contact-form {
  margin: 60px 0px;
}

.mb-30 {
  margin-bottom: 30px;
}

.form-group input.usernamecls {
  background-image: url(https://carento-demo.vercel.app/assets/imgs/template/popup/username.svg);
  background-position: left 18px center;
  background-repeat: no-repeat;
  padding-left: 45px;
}

.form-group input.emailcls {
  background-image: url(https://carento-demo.vercel.app/assets/imgs/template/popup/email.svg);
  background-position: left 18px center;
  background-repeat: no-repeat;
  padding-left: 45px;
}

/* end contact us page */

.Informationdetails h3 span {
  font-size: 16px !important;
  line-height: 22px;
  font-family: var(--f-fam-p);
  color: #808291;
}

.Informationdetails {
  background-color: var(--background-color-white);
  border: 1px solid var(--border1-bgwhite);
}

/* whatsappbg */
.whatsappbg {
  background-image: url(/assets/images/whatsappbg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 120px;
  padding-bottom: 80px;
}

.contact-info p {
  font-family: var(--f-fam);
  font-size: 17px;
  font-weight: 400;
}

/* training  */
/* service-cardtraining-linktraining */
.service-cardtraining {
  position: relative;
  background-color: var(--background-color-white);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  border: 1px solid var(--border1-bgwhite);
}

.service-cardtraining__image {
  position: relative;
  /* height: 260px; */
  width: 100%;
  overflow: hidden;
}

.service-cardtraining:hover .service-cardtraining__image img {
  transform: scale(1.1);
}

.service-cardtraining__image img {
  transition: all 500ms ease-in-out;
  object-fit: cover;
  width: 100%;
}

.service-cardtraining__content {
  padding: 0px 5px 30px 40px;
  max-width: 400px;
  position: relative;
  background-color: var(--background-color-white);
  border: 1px solid var(--border1-bgwhite);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 575px) {
  .service-cardtraining__content {
    padding: 0px 5px 25px 20px;
  }
}

.service-cardtraining__content::before {
  clear: both;
  content: "";
  width: 100%;
  height: 23px;
  position: absolute;
  top: -23px;
  left: 0%;
  background-color: var(--background-color-white);
}

.service-cardtraining__title {
  font-size: 26px;
  line-height: 35px;
  font-family: var(--f-fam);
  font-weight: 600;
  color: var(--color-white-black);
  margin-bottom: 5px;
}

.service-cardtraining__text {
  color: var(--smalltext);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 185.714%;
  letter-spacing: 0.42px;
  margin-bottom: 0;
  font-family: var(--f-fam-p);
}

.service-cardtraining__bth {
  position: relative;
}

.service-cardtraining__bth .drivschol-btn {
  position: relative;
  display: inline-block;
  background-color: var(--color-3);
  padding: 23px 66px 22px 40px;
  color: #fff;
  z-index: 1;
  clip-path: polygon(0 0, 75% 0%, 100% 100%, 0% 100%);
  font-size: 16px;
  font-weight: 500;
  line-height: 178.571%;
  letter-spacing: 0.56px;
  text-transform: capitalize;
  font-family: var(--f-fam-p);
}

.service-cardtraining__bth .drivschol-btn i {
  margin-left: 15px;
}

.service-cardtraining__bth .drivschol-btn::before {
  z-index: -1;
}

.service-cardtraining__bth .drivschol-btn::after {
  z-index: -1;
}

/* service-cardtraining-linktraining */


.img-abt {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border1-bgwhite);
}

/* @media (min-width: 907){
  .whatsappbg{
    padding-top: 150px;
  }
} */

/* Select Plan */

.selectprice {
  background-color: var(--bgcolor);
  padding: 50px 0px;
  margin-top: 80px;
}

.package-card {
  background: var(--background);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  padding: 0px 30px 30px 30px;
  margin: 20px 0px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.package-card__head {
  position: relative;
  z-index: 1;
}

.package-card__head__item {
  position: relative;
  text-align: center;
  padding-bottom: 44px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%);
  background-color: var(--color-3);
  transition: all 0.4s ease-in-out;
}

.package-card__head__item__price {
  color: #fff;
  text-align: center;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 135%;
  margin-bottom: 0;
  transition: all 0.4s ease-in-out;

}

.car_driver_cost {
  font-family: var(--f-fam-p);
}

.package-card__head__item__price sub {
  font-size: 20px;
  bottom: 0;
  font-weight: 500;
}

.package-card__head__item__shape__one {
  position: absolute;
  right: 20px;
  top: 24px;
}

.package-card__head__item__shape__one svg {
  fill: #000;
  transition: all 0.4s ease-in-out;
}

.package-card__head__item__shape__two {
  position: absolute;
  right: 20px;
  top: 0px;
}

.package-card__head__item__shape__two svg {
  fill: #000;
  transition: all 0.4s ease-in-out;
}

.package-card__head__shape {
  position: absolute;
  bottom: -5px;
  left: 60px;
  content: "";
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%);
  background: var(--drivschol-black2, #111117);
  width: 194px;
  height: 98px;
  z-index: -1;
  transition: all 0.4s ease-in-out;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .package-card__head__shape {
    left: 18px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .package-card__head__shape {
    left: 40px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .package-card__head__shape {
    left: 70px;
  }
}

@media (max-width: 575px) {
  .package-card__head__shape {
    left: calc(15% + 20px);
  }
}

@media screen and (max-width: 375px) {
  .package-card__head__shape {
    width: 160px;
  }
}

@media screen and (max-width: 320px) {
  .package-card__head__shape {
    width: 120px;
  }
}

.package-card__head::after {
  position: absolute;
  top: -30px;
  left: -30px;
  content: "";
  width: 31px;
  height: 30px;
  background: var(--color-3);
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  transition: all 0.4s ease-in-out;
}

.package-card__head::before {
  position: absolute;
  top: -30px;
  left: 0;
  content: "";
  width: 99.9999999%;
  height: 31px;
  background: var(--color-3);
  transition: all 0.4s ease-in-out;
}

.package-card__head__flag {
  position: absolute;
  top: -90px;
  right: -70px;
}

.package-card__body {
  padding-top: 20px;
}

.package-card__body__title {
  font-size: 26px;
  line-height: 35px;
  font-family: var(--f-fam-p);
  font-weight: 600;
  color: var(--color-white-black);
  border-bottom: 1px solid var(--border1-bgwhite);
  padding-bottom: 20px;
  margin-bottom: 0;
  text-align: center;
}

.package-card__body__list {
  padding-left: 0;
}

.package-card__body__list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border1-bgwhite);
  padding: 12px 0px 11px 0px;
}

.package_card_number {
  color: var(--color-white-black);
  font-family: var(--f-fam-p);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 162.5%;
  text-transform: capitalize;
}

.package-card-btn {
  margin-top: 20px;
}

.package-card:hover .package-card__head .package-card__head__item,
.package-card.active .package-card__head .package-card__head__item {
  background-color: var(--drivschol-black2, #111117);
}

.package-card:hover .package-card__head .package-card__head__item__price,
.package-card.active .package-card__head .package-card__head__item__price {
  color: var(--color-3);
}

.package-card:hover .package-card__head .package-card__head__item__shape__one svg,
.package-card.active .package-card__head .package-card__head__item__shape__one svg {
  fill: #fff;
}

.package-card:hover .package-card__head .package-card__head__item__shape__two svg,
.package-card.active .package-card__head .package-card__head__item__shape__two svg {
  fill: #fff;
}

.package-card:hover .package-card__head .package-card__head__shape,
.package-card.active .package-card__head .package-card__head__shape {
  background: var(--color-3);
}

.package-card:hover .package-card__head::after,
.package-card.active .package-card__head::after {
  background-color: var(--drivschol-black2, #111117);
}

.package-card:hover .package-card__head::before,
.package-card.active .package-card__head::before {
  background-color: var(--drivschol-black2, #111117);
}


.package-card__two .package-card__head::after {
  position: absolute;
  top: -30px;
  right: -30px;
  left: auto;
  content: "";
  width: 31px;
  height: 30px;
  background: var(--color-3);
  clip-path: polygon(0 0, 0% 100%, 100% 100%);
  transition: all 0.4s ease-in-out;
}

/* Select Plan */

/* timeline-section  */

.timeline-section {
  padding: 3rem 1rem;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.timeline-container {
  /* max-width: 900px; */
  width: 100%;
  position: relative;
  padding: 0 15px;
}

.timeline-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 100%;
  background: var(--color-3);
  z-index: 0;
  display: none;
}

.timeline-step {
  display: flex;
  justify-content: center;
  width: 100%;
  position: relative;
  margin: 2.5rem 0;
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  visibility: hidden;
}

.step-content {
  background-color: var(--bgcolor);
  padding: 1.5rem;
  border-radius: 15px;
  width: 100%;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  position: relative;
  transition: all 0.4s ease;
  border-left: 6px solid var(--color-3);
  margin: 1rem 0;
  overflow: hidden;
}

.step-icon {
  display: none;
}

@media screen and (min-width: 993px) {
  .timeline-container::before {
    display: block;
  }

  .timeline-step {
    flex-direction: row;
    margin: 0rem 0rem !important;
  }

  .step-content {
    width: 45%;
    margin: 0 15px;
  }

  .step-icon {
    display: flex;
    position: absolute;
    font-size: 17px !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--color-3);
    color: #ffffff;
    width: 65px;
    height: 65px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-weight: 500;
    box-shadow: 0 10px 20px rgba(198, 22, 5, 0.2);
    z-index: 2;
    border: 3px solid #ffffff;
    font-family: var(--f-fam);
  }

  .timeline-step:nth-child(odd) .step-content {
    margin-right: auto;
  }

  .timeline-step:nth-child(even) .step-content {
    margin-left: auto;
  }
}

@media screen and (max-width: 992px) {
  .timeline-section {
    padding: 1rem;
  }

  .step-content {
    padding: 1.2rem;
  }

  .step-content h3 {
    font-size: 1.1rem;
  }

  .step-content p {
    font-size: 0.9rem;
  }

  .timeline-step {
    margin: 0rem 0rem !important;
  }
}

.timeline-step.active {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

/* timeline-section  */


/* car training  */
/* price box */


.book-title-training {
  font-size: 20px;
  line-height: 25px;
  font-family: var(--f-fam);
  font-weight: 500;
  color: var(--color-white-black);
}

.addbokingsession {
  font-size: 15px;
  font-family: var(--f-fam);
  color: #fff;
  background: var(--color-3);
  padding: 8px;
  border-radius: 12px;
}

.addbokingsession:hover {
  background-color: #000;
  color: #fff;
}

.sec-title {
  position: relative;
  margin-bottom: 50px;
}

.pricing-section {
  position: relative;
  padding: 50px 0px;
  overflow: hidden;
  background-color: var(--bgcolor);
}

span.rupesscls {
  font-size: 26px;
  color: var(--color-3);
}


.pricing-section .row {
  margin: 0 -30px;
}

/*
.pricing-block {
  position: relative;
  padding: 0 30px;
  margin-bottom: 40px;
}

.pricing-block .inner-box {
  position: relative;
  background-color: #ffffff;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  padding: 0 0 30px;
  max-width: 370px;
  margin: 0 auto;
  border-bottom: 20px solid #40cbb4;
}

.pricing-block .icon-box {
  position: relative;
  padding: 30px 30px 0;
  background-color: #40cbb4;
  text-align: center;
}

.pricing-block .icon-box:before {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 75px;
  width: 100%;
  border-radius: 50% 50% 0 0;
  background-color: #ffffff;
  content: "";
}

.pricing-block .icon-box .icon-outer {
  position: relative;
  height: 150px;
  width: 150px;
  background-color: #ffffff;
  border-radius: 50%;
  margin: 0 auto;
  padding: 10px;
}

.pricing-block .icon-box i {
  position: relative;
  display: block;
  height: 130px;
  width: 130px;
  line-height: 120px;
  border: 5px solid #40cbb4;
  border-radius: 50%;
  font-size: 50px;
  color: #40cbb4;
  -webkit-transition: all 600ms ease;
  transition: all 600ms ease;
}

.pricing-block .inner-box:hover .icon-box i {
  transform: rotate(360deg);
}

.pricing-block .price-box {
  position: relative;
  text-align: center;
  padding: 5px 20px;
}

.pricing-block .price {
  font-size: 30px;
  font-weight: 700;
  color: #000;
}

.pricing-block .price span {
  font-family: var(--f-fam);
}

.pricing-block .features {
  position: relative;
  max-width: 200px;
  margin: 0 auto 20px;
}

.pricing-block .features li {
  position: relative;
  display: block;
  font-size: 15px;
  line-height: 30px;
  color: #808291;
  font-family: var(--f-fam-p);
  font-weight: 400;
  padding: 5px 0;
  border-bottom: 1px solid var(--border1-bgwhite);
  text-align: left;
}

i.fa-solid.fa-check.check-icon {
  color: var(--color-3);
  margin-right: 13px;
}

.pricing-block .features li.false:before {
  color: #e1137b;
  content: "\f057";
}

.pricing-block .features li a {
  color: #848484;
}

.pricing-block .features li:last-child {
  border-bottom: 0;
}

.pricing-block .btn-box {
  position: relative;
  text-align: center;
}

.pricing-block .inner-box:hover .btn-box a {
  color: #40cbb4;
  background: none;
  border-radius: 0px;
  border-color: #40cbb4;
}

.pricing-block-2 .icon-box i,
.pricing-block-2 .inner-box {
  border-color: #1d95d2;
}

.pricing-block-2 .btn-box a,
.pricing-block-2 .icon-box {
  background-color: #1d95d2;
}

.pricing-block-2 .inner-box:hover .btn-box a {
  color: #1d95d2;
  background: none;
  border-radius: 0px;
  border-color: #1d95d2;
}

.pricing-block-2 .icon-box i {
  color: #1d95d2;
}

.pricing-block-2 .price {
  color: #000;
}

.pricing-block-3 .icon-box i,
.pricing-block-3 .inner-box {
  border-color: var(--color-3);
}

.pricing-block-3 .btn-box a,
.pricing-block-3 .icon-box {
  background-color: var(--color-3);
}

.pricing-block-3 .icon-box i {
  color: var(--color-3);
}

.pricing-block-3 .inner-box:hover .btn-box a {
  color: var(--color-3);
  background: none;
  border-radius: 0px;
  border-color: var(--color-3);
} */

/* bike traning */


.pricing-block .btn-box {
  position: relative;
  text-align: center;
}

.pricing-block .btn-box a {
  position: relative;
  display: inline-block;
  font-size: 14px;
  line-height: 25px;
  color: #ffffff;
  font-weight: 500;
  font-family: var(--f-fam);
  padding: 8px 30px;
  background-color: var(--color-3);
  border-radius: 10px;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transition: all 300ms ease;
}

.pricing-block .btn-box a:hover {
  color: #ffffff;
}

.pricing-block .inner-box:hover .btn-box a {
  color: var(--color-3);
  background: none;
  border-radius: 0px;
  border-color: var(--color-3);
}

.bikrfeacture {
  display: flex;
  align-items: center;
  gap: 20px;
}


/* pin code */

.pincode-input-container input {
  border-radius: 0.5rem !important;
  padding: 7px 0px !important;
}

/* .pincode-input-container {
  gap: 30px !important;
} */

/* .pincode-input-container.touch .touch-flex {
  gap: 10px;
}
.pincode-input-container.touch .touch-flex-cell {
  border: 1px solid #ced4da;
  border-radius: 0.5rem;
} */
.all-input-mob .pincode-input-container input:focus {
  box-shadow: none;
  border-color: var(--themebg);
}

.pincode-input-container {
  display: flex !important;
  gap: 0px !important;
}

/* input 4 digit css start*/


/* date picker  */
input#fitness_date {
  position: relative;
}

.datepicker-dropdown {
  position: absolute;
  top: auto;
  left: auto;
  transform: none !important;
  margin-top: 120px !important;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  z-index: 8 !important;
}

.border-rto-box-date {
  overflow: visible !important;
  position: relative;
}

/* General Styling */
.datepicker-days {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.datepicker-days table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 14px;
}

.datepicker-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  padding: 10px;
}

.dow {
  font-weight: bold;
  color: #666;
  padding: 10px;
}

.datepicker-switch {
  font-size: 16px;
  font-weight: 600;
  color: #000;
  background-color: var(--bgcolor);
  padding: 8px 15px;
  font-family: var(--f-fam);
}

.table-condensed .prev {
  font-size: 18px;
  color: #000;
  background-color: var(--color-3);
  cursor: pointer;
}

.table-condensed .next {
  font-size: 18px;
  color: #000;
  background-color: var(--color-3);
  cursor: pointer;
}

.table-condensed .prev:hover {
  color: #000;
}

.table-condensed .next:hover {
  color: #000;
}

/* Days Styling */
.datepicker-days td {
  padding: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.day {
  color: #333;
}

.day:hover {
  background-color: #007BFF;
  color: #fff;
  border-radius: 50%;
}

.old.day {
  color: #ccc;
}

.old.day:hover {
  background-color: transparent;
  color: #ccc;
}

.new.day {
  color: #007BFF;
}

.new.day:hover {
  background-color: #007BFF;
  color: #fff;
  border-radius: 50%;
}

.today {
  background-color: #e6f7ff;
  color: #0056b3;
  font-weight: bold;
}

.clear {
  font-size: 14px;
  color: #dc3545;
  cursor: pointer;
}

.clear:hover {
  text-decoration: underline;
}

.datepicker table tr td.active.active {
  background-color: var(--color-3);
}

/* end date picker  */


@media only screen and (max-width: 543px) {
  /* .touchwrapper.touch4 {
    margin: auto;
  } */

  .touchwrapper.touch4 input:nth-child(1) {
    /* border-right: 1px solid yellow !important;
    border-left: 1px solid yellow !important; */
  }
}


/* chatbotdesign */
i.fa-brands.fa-rocketchat {
  font-size: 25px;
  color: #fff;
  font-weight: 400;
}

.chatbot-icon {
  position: fixed;
  bottom: 100px;
  right: 20px;
  background-color: #25D366;
  /* Blue background */
  padding: 16px;
  border-radius: 50%;
  cursor: pointer;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  animation-name: waAnimation;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  z-index: 10;
}

@keyframes waAnimation {
  0% {
    box-shadow: 0 0 0 0 rgba(74, 175, 80, 0.5);
  }

  80% {
    box-shadow: 0 0 0 14px rgb(74 175 80 / 39%);
  }
}

@media only screen and (max-width: 757px) {
  .chatbot-icon {
    bottom: 150px;
  }

  .chatbot-window {
    right: 10px !important;
    width: 90% !important;
  }
}

.chatbot-window {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 350px;
  height: 450px;
  background-color: #ffffff;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  display: none;
  flex-direction: column;
  z-index: 1000;
}

.chatbot-header {
  background-color: #25D366;
  padding: 0px 15px;
  color: #ffffff;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 15px 15px 0 0;
}

.chatbot-body {
  padding: 15px;
  flex-grow: 1;
  /* overflow-y: auto; */
  background-color: #fbfbfb;
}

/* .chatbot-body .message {
  background-color: #e9ecef;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 10px;
  max-width: 80%;
  word-wrap: break-word;
}

.chatbot-body .bot-message {
  background-color: #25D366;
  color: white;
  align-self: flex-start;
}

.chatbot-body .user-message {
  background-color: #dee2e6;
  align-self: flex-end;
} */

.chatbot-footer {
  display: flex;
  padding: 10px;
  border-top: 1px solid #ddd;
  background-color: #ffffff;
  border-radius: 0 0 15px 15px;
}

#chatbot-window #message {
  flex-grow: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 12px;
  outline: none;
  margin-right: 10px;
  font-family: var(--f-fam-p);
}

#send-btn-chat {
  padding: 10px 15px;
  background-color: #25D366;
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--f-fam);
}

#send-btn-chat:hover {
  background-color: #000;
}

#close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

/* Animation for opening the chatbot */
.chatbot-window.open {
  display: flex;
  animation: slide-up 0.3s ease-out;
}

@keyframes slide-up {
  from {
    bottom: -500px;
  }

  to {
    bottom: 80px;
  }
}

/* chatbotdesign end */

/* Telecaller  */
.view-btn-order {
  display: flex;
  align-items: center;
  gap: 5px;
}

.view-btn-order:hover {
  background-color: black;
}

.border-r-60 {
  border-radius: 60px;
}

@media only screen and (max-width:552px) {
  .modal-body-order-view {
    height: 400px;
    overflow: scroll;
  }

  .btn-widthorder {
    width: 100%;
    margin-top: 5px;
  }
}

.modal-content {
  background-color: var(--background-color-white);
  color: rgb(255, 255, 255);
}

/* clerk  */
.downloadbtn {
  background-color: var(--color-3);
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
}

a.downloadbtn {
  background-color: var(--color-3);
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: 5px;
}

.ordersearch {
  position: relative;
}

.ordersearch input#search-input {
  border: 1px solid #ddd;
  border-radius: 0px;
  padding: 7px 5px;
  border-radius: 7px;
}

.ordersearch input#search\ search-input {
  border: 1px solid var(--border1-bgwhite);
  padding: 7px 5px;
  border-radius: 5px;
  font-family: var(--f-fam-p);
  font-size: 15px;
  color: var(--color-white-black);
  background: var(--background-color-white);
}


/* wishlist */
/* Table Styles */
.tablenew .table {
  border-collapse: collapse;
  width: 100%;
  background-color: var(--background);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 20px;
}

/* .tablenew .table-hover>tbody>tr:hover>*{
  background-color: var(--tablehoverbg);
  color: var(--tablehover);
} */
.tablenew .table th,
.table td {
  /* padding: 12px 16px; */
  /* text-align: center; */
  border: 1px solid var(--border1-bgwhite);
  vertical-align: middle;
  font-size: 16px;
  color: var(--tabletextcolor);
}

@media screen and(max-width:554) {

  .tablenew .table th,
  .table td {
    border: none;
  }
}

.tablenew .table th {
  background-color: #000;
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.05em;
}


.tablenew .table tr:hover {
  background-color: var(--bgcolor);
}

.tablenew .table img {
  border-radius: 4px;
  border: 1px solid #ddd;
  padding: 4px;
  max-width: 80px;
}


/* Responsive Styles */
@media (max-width: 768px) {
  .tablenew .table {
    font-size: 0.9rem;
  }

  .tablenew h1.cart-heading {
    font-size: 1.8rem;
  }
}

.tablenew .tooltip-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* Tooltip content (hidden by default) */
.tablenew .tooltip-container .tooltip-content {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  background: #444;
  /* Dark background for contrast */
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  top: -35px;
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 10;
  font-family: var(--f-fam);
}

/* Tooltip arrow */
.tablenew .tooltip-container .tooltip-content::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #444 transparent transparent transparent;
}

/* Show tooltip on hover */
.tablenew .tooltip-container:hover .tooltip-content {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.tablenew .actionicon {
  background-color: #000;
  color: #fff;
  padding: 6px;
  font-size: 13px;
  border-radius: 5px;
}

.tablenew .actionicon:hover {
  background-color: var(--color-3);
}

@media screen and (max-width: 780px) {
  .tablenew table thead {
    display: none;
  }

  .tablenew tbody tr td:first-child {
    background-color: #ddd;
    color: #000000;
  }

  .tablenew .table td {
    border-top: 1px solid #ddd;
  }

  .tablenew tbody tr {
    display: block;
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
  }

  .tablenew tbody tr td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    padding: 10px;
  }

  .tablenew tbody tr td[data-label]:before {
    content: attr(data-label);
    display: inline-block;
    /* width: 100%; */
    margin-bottom: 5px;
  }

  .tablenew tbody tr td:last-child {
    border-bottom: 0;
  }

  .tablenew tbody tr td a {
    padding: 5px;
    display: inline-block;
    text-decoration: none;
    background-color: #f8f8f8;
    border-radius: 5px;
    color: #000;
    transition: background-color 0.3s ease;
  }

  .tablenew tbody tr td a:hover {
    background-color: #ddd;
  }
}

/* Related products */
.car-related-pro .thumb {
  height: 200px;
  object-fit: cover;
  align-items: end;
  display: flex;
}

i.fa-sharp.fa-light.fa-location-dot {
  color: var(--smalltext);
}

.details .location span {
  font-family: var(--f-fam-p);
  color: var(--smalltext);
}

.car-related-pro .details .listing_footer ul {
  display: flex;
  gap: 10px;
  flex-wrap: unset;
}

.car-related-pro .owl-nav {
  display: block !important;
}

.single-pro-reviewspan.stars-active .fa-star {
  font-size: 14px;
  color: #FFC700;
}

.single-pro-review i.fas.fa-star {
  color: #FFC700;
}

.reviewsmall {
  font-size: 13px;
  color: var(--color-white-black) !important;
  font-family: var(--f-fam-p);
}

.review_content {
  font-size: 15px;
  line-height: 22px;
  font-family: var(--f-fam-p);
  color: var(--smalltext) !important;
}

.single-review-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media screen and (max-width:450px) {
  .single-review-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
  }
}

.newoneeview {
  display: flex;
}

.seond.list-inline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

/* Styling each list item */
.seond .list-inline-item {
  display: inline-block;
  position: relative;
  text-align: center;
}

.seond .list-inline-item i {
  cursor: pointer;
}

/* Tooltip styling */
.seond .list-inline-item span::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  font-family: var(--f-fam);
}

/* Show tooltip on hover */
.seond .list-inline-item span:hover::after {
  visibility: visible;
  opacity: 1;
}

/* dealer  */
.shadow-new {
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

@media screen and (max-width:540px) {
  .Dashboardactive select.form-control.status-dropdown {
    width: 50%;
  }
}


/* quick view  */
.col-threeflex .fa-solid {
  color: var(--color-3);
}

/* Modal Overlay */
#ts-quickshop-modal-woocomerce {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  z-index: 9999;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.7);
}

/* Modal Container */
.ts-popup-modal-woocomerce .quickshop-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(to right, var(--color-3), #745424);
  /* background-color: #f5f3f3; */
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  position: relative;
}

.ts-popup-modal-woocomerce .quickshop-container::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 100px;
  background: #fff;
  clip-path: path("M 0 100 c 150 0 120 -75 200 -76 C 280 25 250 100 400 100 L400 1000 0 1000 Z");
  z-index: -1;
}

.ts-popup-modal-woocomerce .close {
  position: absolute;
  top: 15px;
  right: 15px;
  color: #fff;
  background-color: #000;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  text-align: center;
  line-height: 35px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.ts-popup-modal-woocomerce .close:hover {
  background-color: white;
  transform: scale(1.1);
  color: black;
}

.product-containeroverlay {
  display: flex;
  gap: 20px;
  align-items: center;
}

.product-imagesoverlay {
  flex: 1 1 50%;
}

.thumbnail-gallery-overlay {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.thumbnail-gallery-overlay img {
  width: 400px;
  /* height: 350px; */
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.3s ease, border-color 0.3s ease;
}


.product-details-quickviewoverlay {
  flex: 1 1 50%;
  border: 1px solid #dddddd96;
  padding: 15px 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.product-details-quickviewoverlay h2 {
  color: #000;
  font-size: 17px;
  font-family: var(--f-fam);
  font-weight: 400;
}

.selectedyear li {
  display: inline-block;
}

.selectedyear {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 10px;
}

.selectedyear label {
  padding: 5px 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  background-color: #f2f4f680;
  transition: all 0.3s ease-in-out;
  font-family: var(--f-fam-p);
}

.selectedyear label.active {
  color: white;
  background-color: var(--color-3);
}

.addcartquick {
  border: none;
  background-color: black;
  color: #fff;
  border-radius: 8px;
  padding: 8px;
  font-family: var(--f-fam);
}

.addcartquick:hover {
  background-color: var(--color-3);
  color: #fff;
}

.product_variant.color ul li {
  display: inline-block;
  padding: 2px;
  /* border: 1px solid #ccc; */
  margin-right: 5px;
}

.product_variant.color ul li a {
  width: 30px;
  height: 30px;
  display: block;
}

.product_variant.color ul li.color1 a {
  background: #000000;
}

.product_variant.color ul li.color2 a {
  background: #BEBEBE;
}

.product_variant.color ul li.color3 a {
  background: #FE0000;
}

.product_variant.color ul li.color4 a {
  background: #FFFF01;
}

.cat-shar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.shareicons {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.shareicons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background-color: #000;
  color: white;
  border-radius: 50%;
  text-decoration: none;
  font-size: 16px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.shareicons a:hover {
  transform: scale(1.1);
  background-color: var(--color-3);
}

.shareicons a i {
  display: inline-block;
}

.thumbnail-gallery {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  gap: 15px;
  margin-top: 15px;
}

.thumbnail-gallery img {
  width: 80px;
  /* height: 80px; */
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s ease-in-out;
  border: 2px solid transparent;
}

.thumbnail-gallery img:hover,
.thumbnail-gallery img.active {
  border-color: #fff;
  transform: scale(1.1);
}

.main-image-wrapper {
  text-align: center;
}

.main-image {
  width: 400px;
  /* height: 400px; */
  object-fit: cover;
  border-radius: 10px;
  transition: 0.3s ease-in-out;
}

.star-icon {
  cursor: pointer;
  font-size: 13px;
}

.product-titlequick .star-icon:hover {
  color: #F5C34B;
}

@media screen and (max-width: 670px) {
  .ts-popup-modal-woocomerce .quickshop-container {
    width: auto;
    max-width: 90%;
  }

  .product-containeroverlay {
    flex-direction: column;
  }

  .product-imagesoverlay,
  .product-details-quickviewoverlay {
    flex: 1 1 100%;
    /* Full width on small screens */
  }

  .main-image {
    width: 100%;
    max-width: 250px;
  }

  .ts-popup-modal-woocomerce .quickshop-container::before {
    content: unset !important;
  }
}

@media screen and (min-width: 671px) {

  .product-imagesoverlay,
  .product-details-quickviewoverlay {
    flex: 1 1 50%;
    /* Each takes 50% on larger screens */
  }

}

.d-flex-action {
  display: flex !important;
  gap: 10px;
  justify-content: end;
}

@media screen and (max-width: 720px) {
  .d-flex-action {
    flex-direction: column;
  }
}

/* button.btn.btn-info.view-details.view-btn-order{
  color: #fff;
} */

/* all table  */
.table-hover>tbody>tr:hover>* {
  /* --bs-table-accent-bg: rgb(253 249 249 / 8%); */
  background-color: var(--tablehoverbg);
  color: var(--tablehover);
}

@media screen and (max-width: 554px) {
  .alltablesmobile .none-mobile {
    display: none !important;
  }

  .address-table.alltablesmobile table {
    width: 100% !important;
  }

  .alltablesmobile .table-responsive-card table,
  .alltablesmobile .table-responsive-card thead,
  .alltablesmobile .table-responsive-card tbody,
  .alltablesmobile .table-responsive-card th,
  .alltablesmobile .table-responsive-card td,
  .alltablesmobile .table-responsive-card tr {
    display: block;
  }

  .alltablesmobile .table-responsive-card tr {
    margin-bottom: 10px;
    border: 1px solid var(--border1-bgwhite);
    border-radius: 5px;
    /* padding: 5px; */
    /* background-color: #fff; */
    color: var(--tabletextcolor);
  }

  .alltablesmobile .table-responsive-card td {
    display: flex;
    justify-content: space-between;
    padding: 5px 8px;
    border: 1px solid var(--border1-bgwhite);
  }

  .alltablesmobile .table-responsive-card td:last-child {
    align-items: center;
  }

  .alltablesmobile .table-responsive-card td:last-child {
    border-bottom: none;
  }

  .alltablesmobile .table-responsive-card td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-white-black);
    text-align: left;
    padding-right: 10px;
  }

  .alltablesmobile .table-responsive-card td:last-child {
    padding-top: 5px;
  }

  .alltablesmobile .table-responsive-card tr:last-child {
    margin-bottom: 0;
  }
}

/* all table end */

/* dark mode */
.switch-box {
  padding: 0px 3px;
}

.lightmode.active {
  display: inline;
}

.darkmode.active {
  display: inline;
}

.lightmode,
.darkmode {
  display: none;
}

/* Initially hide the icons */
.lightmode-icon {
  display: none;
}

.darkmode-icon {
  display: inline;
  color: #fff;
}

@media screen and (max-width:850px) {
  .darkmode-icon {
    color: #000;
  }
}

/* Add a class to display light mode icon */
.lightmode-active .lightmode-icon {
  display: inline;
  color: var(--color-3);
}

/* Add a class to display dark mode icon */
.lightmode-active .darkmode-icon {
  display: none;
  color: #fff;
}

/* super agent order list */
.badge-bg-warning-text-dark {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  padding: 10px;
  font-size: 14px;
  font-family: var(--f-fam);
  border-radius: 10px;
  cursor: pointer;
  color: var(--color-white-black);
}

.btn-success-new:focus {
  background-color: #126534;
  color: #fff;
}

.btn-warning-new:focus {
  background-color: #e0b11d;
  color: #fff;
}

.btn-danger-new:focus {
  background-color: #9e1f2e;
  color: #fff;
}

.btn-success-new.active {
  background-color: #126534;
  color: #fff;
}

.btn-warning-new.active {
  background-color: #e0b11d;
  color: #fff;
}

.btn-danger-new.active {
  background-color: #9e1f2e;
  color: #fff;
}

/* choose_locationmap */
.popuploc-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 999;
}

.locationPopup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}


.choose_locationmap {
  background: var(--bgcolorpop);
  border-radius: 10px;
  border: 1px solid var(--border1-bgwhite);
}

.fa-solid.fa-x {
  cursor: pointer;
}

#country-select option {
  font-family: var(--f-fam-p);
}

#country-select option:hover {
  background-color: red;
}

.fileds_location {
  padding: 15px 30px;
}

.choose_location_header {
  background-color: #000;
  color: #fff;
  padding: 10px;
  border-radius: 10px 10px 0px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.choose-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 150px;
}


/* .list-type5 ol {
  list-style: none;
  counter-reset: li-counter;
  margin: 0;
  margin-left: 1em;
  padding: 0;
}

.list-type5 ol li {
  position: relative;
  padding: 0.5em;
  padding-left: 30px;
  counter-increment: li-counter;
  font-size: 15px;
  font-weight: 400;
  font-family: var(--f-fam);
  border-bottom: 1px solid var(--border1-bgwhite);
}

.list-type5 ol li:before {
  content: counter(li-counter);
  position: absolute;
  top: 8px;
  left: 2px;
  width: 1.1em;
  height: 1.1em;
  line-height: 1.2;
  text-align: center;
  color: white;
  background-color: var(--color-3); */
/* transform: rotate(-20deg); */
/* z-index: 1;
  font-size: 20px;
} */
.checkbox-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 15px;
  font-family: var(--f-fam);
  font-weight: 400;
  margin-bottom: 8px;
}

.checkbox-wrapper input[type="checkbox"] {
  appearance: none;
  width: 24px;
  height: 24px;
  border: 2px solid var(--border1-bgwhite);
  border-radius: 50%;
  position: relative;
  outline: none;
  cursor: pointer;
  transition: 0.3s;
}

.checkbox-wrapper input[type="checkbox"]:checked {
  background-color: var(--color-3);
  border: none;
}

.checkbox-wrapper input[type="checkbox"]:checked::before {
  content: "✔";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: white;
}

.ripple {
  position: absolute;
  width: 60px;
  height: 60px;
  background: rgba(0, 123, 255, 0.3);
  border-radius: 50%;
  transform: scale(0);
  animation: ripple-animation 0.6s linear;
}

@keyframes ripple-animation {
  to {
    transform: scale(3);
    opacity: 0;
  }
}

.autocomplete-container {
  position: relative;
  width: 100%;
}

.suggestions-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 150px;
  overflow-y: auto;
  background-color: var(--mapdrop);
  color: var(--mapdroptxt);
  z-index: 1000;
}

.suggestion-item {
  padding: 8px;
  cursor: pointer;
}

.suggestion-item:hover {
  background-color: #dddddda8;
}

.location_footer {
  background: #000;
  border-radius: 0px 0px 10px 10px;
  padding: 15px 20px;
}

.choose-heading h5 {
  margin: 0;
  font-size: 16px;
  font-family: var(--f-fam);
  font-weight: 400;
  color: var(--color-white-black);
}

.d-flex-loc {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.locsubmit {
  background: var(--color-3);
  border: none;
  color: #fff;
  font-size: 17px;
  font-family: var(--f-fam-p);
  font-weight: 400;
  border-radius: 5px;
  padding: 5px 15px;
}

.d-flex-loc input {
  font-size: 15px;
  font-family: var(--f-fam-p);
  line-height: 28px;
  padding: 0px 16px;
  width: 100%;
  min-height: 44px;
  border: unset;
  border-radius: 7px;
  outline-color: var(--color-3);
  background-color: var(--bgcolor);
  border: 1px solid var(--border1-bgwhite);
  color: var(--color-white-black);
}

.location_footer .raf {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media screen and (max-width:751px) {
  .d-flex-loc {
    flex-direction: column;
  }

  .fileds_location {
    height: 315px;
    overflow: scroll;
  }

  .location_footer .raf {
    flex-direction: column;
    gap: 7px;
  }

  .locsubmit {
    width: 100%;
  }
}

.custom-select {
  position: relative;
  width: 100%;
}

.suggestloc {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 5px;
}

.boxconsugg {
  background: black;
  padding: 5px 10px;
  border-radius: 10px;
  display: flex;
  gap: 7px;
  align-items: center;
  cursor: pointer;
}

.boxconsugg span {
  font-size: 14px;
  color: #fff;
  font-family: var(--f-fam-p);
}

@media screen and (max-width:710px) {
  .suggestloc {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: left;
  }
}

/* promation page */

/* applydrivinglincespromation */


/* .drivschol-btn {
  display: inline-block;
  vertical-align: middle;
  appearance: none;
  border: none;
  outline: none;
  background-color: #1a1a1d;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  padding: 15px 40px;
  line-height: 100%;
  transition: 500ms;
  text-transform: capitalize;
  position: relative;
  overflow: hidden;
  text-align: center;
  z-index: 1;
  margin-top: 20px;
  border: 1px solid var(--border1-bgwhite);
}

.drivschol-btn::before {
  content: "";
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 150%;
  height: 150%;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  background-color: var(--color-3);
  transition: 700ms cubic-bezier(0.52, 1.64, 0.37, 0.66);
  z-index: -1;
}

.drivschol-btn::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 150%;
  height: 150%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  background-color: #ffffff;
  transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  z-index: -1;
}

.drivschol-btn:hover::before {
  top: 100%;
}

.drivschol-btn:hover::after {
  bottom: -50%;
}

.drivschol-btn span {
  position: relative;
  color: inherit;
  z-index: 2;
  font-family: var(--f-fam);
} */

/* applyabout */
.applyabout h2 {
  font-size: 22px;
  font-family: var(--f-fam);
  color: var(--color-white-black);
  border-bottom: 1px solid var(--color-3);
  padding-bottom: 6px;
  display: inline-block;
}

.content-block {
  /* background-image: url(https://t.commonsupport.com/driveto/images/background/wheel-image-1.png);
  background-position: center;
  background-size: cover; */
  position: relative;
}

.content_apply_box {
  display: flex;
  gap: 15px;
  align-items: center;
}

.applyabout {
  padding-top: 50px;
  /* background: var(--bgcolor); */
}

.boximgcar {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0.5;
}

.imageanimationupdown {
  animation: moveUpDown 2s ease-in-out infinite;
}

@keyframes moveUpDown {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
    /* Moves the image up */
  }

  100% {
    transform: translateY(0);
    /* Returns to original position */
  }
}

/* **************
            Apply for License - Helpline Number
            ******* ********/
.cta-section-two {
  padding: 100px 0 70px;
  margin: 100px 0px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cta-section-two .auto-container {
  max-width: 1540px;
  margin: 0 auto;
}

.cta-section-two h2 {
  position: relative;
  color: #fff;
  font-size: 32px;
  font-weight: 500;
  line-height: 46px;
  margin-bottom: 20px;
  letter-spacing: -1px;
  font-family: var(--f-fam);
}

.cta-section-two h4 {
  font-size: 16px;
  font-family: var(--f-fam-p);
  color: #fff;
  margin-bottom: 20px;
}

.cta-section-two .contact-number {
  position: relative;
}

.cta-section-two .contact-number a {
  position: relative;
  display: inline-block;
  border: 1px solid var(--color-3);
  padding: 3px 20px 3px 3px;
  border-radius: 15px;
  font-size: 17px;
  font-weight: 500;
  vertical-align: middle;
  transition: background-color .5s, color .5s;
  color: #fff;
  text-decoration: none;
  font-family: var(--f-fam);
}

.cta-section-two .contact-number a i {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 38px;
  border-radius: 50%;
  color: #fff;
  margin-right: 20px;
  vertical-align: middle;
  text-align: center;
  transition: background-color .5s;
  will-change: background-color;
}

.cta-section-two .contact-number a:hover i {
  background-color: var(--color-3);
  color: #fff;
}

.cta-section-two .image {
  position: relative;
  margin: -155px 0;
  margin-right: -80px;
  z-index: 1;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
  .cta-section-two h2 {
    font-size: 36px;
    line-height: 48px;
  }

  .cta-section-two h4 {
    font-size: 20px;
  }

  .cta-section-two .image {
    margin: 20px 0px 0px 0px;
    text-align: center;
  }
}

@media (max-width: 576px) {
  .cta-section-two {
    padding: 50px 0 50px;
  }

  .cta-section-two h2 {
    font-size: 28px;
    line-height: 38px;
  }

  .cta-section-two h4 {
    font-size: 18px;
  }

  .cta-section-two .contact-number a {
    font-size: 18px;
  }
}


/* custom container */
.custom-container2 {
  max-width: 1200px !important;
  padding: 0px 15px !important;
  margin: 0 auto !important;
}

.courses-section {
  position: relative;
  /* padding: 8px 0px 80px 0px; */
  overflow: hidden;
  margin-top: 50px;
}

.sec-title4 h2 {
  font-size: 22px;
  font-family: var(--f-fam);
  color: var(--color-white-black);
  border-bottom: 1px solid var(--color-3);
  padding-bottom: 12px;
  position: relative;
  text-align: center;
  margin-bottom: 40px;
}

.courses-section .left-column .inner-box {
  position: relative;
  display: block;
  padding-left: 50px;
  padding-right: 35px;
}

@media screen and (max-width:540px) {
  .courses-section .left-column .inner-box {
    padding-left: 20px;
    padding-right: 20px;
  }

  .courses-section .right-column .inner-box {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.courses-section .right-column .inner-box {
  position: relative;
  display: block;
  padding-left: 35px;
  padding-right: 50px;
}

.courses-section .left-column .inner-box .image-box {
  position: relative;
  display: block;
  clip-path: polygon(0% 0%, 88% 0%, 100% 15%, 100% 100%, 80% 100%, 21% 100%, 0% 73%, 0% 20%);
  margin-bottom: 60px;
}

.courses-section .right-column .inner-box .image-box {
  position: relative;
  display: block;
  clip-path: polygon(12% 0%, 100% 0%, 100% 0%, 100% 74%, 79% 100%, 0% 100%, 0% 100%, 0% 16%);
  margin-top: 60px;
}

.courses-section .inner-box .image-box:before {
  position: absolute;
  content: '';
  background: #000;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  opacity: 0.2;
}

.courses-section .left-column .inner-box .image-box img {
  width: 100%;
}

.courses-section .left-column .inner-box .image-box .text {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 140px;
  padding: 20px 15px 21px 25px;
}

.courses-section .left-column .inner-box .image-box .text {
  background: var(--color-3);
}

.courses-section .right-column .inner-box .image-box .text {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 140px;
  padding: 20px 15px 21px 25px;
  text-align: right;
}

.courses-section .right-column .inner-box .image-box .text {
  background: var(--color-3);
}

.courses-section .inner-box .image-box .text h6 {
  display: block;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 1px;
  font-family: var(--f-fam);
}

.courses-section .inner-box .image-box .text h5 {
  display: block;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  font-family: var(--f-fam);
}

.courses-section .content-box {
  position: relative;
  display: block;
}

.courses-section .line-box {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  max-width: 1170px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.courses-section .line-box .line {
  position: absolute;
  background: #dddddd59;
  width: 1px;
  height: 100%;
  top: 0px;
}

.courses-section .line-box .line-1 {
  left: 0px;
}

.courses-section .line-box .line-2 {
  left: 50%;
}

.courses-section .line-box .line-3 {
  right: 0px;
}

.courses-section .line-box .line-1:before {
  position: absolute;
  content: '';
  background-image: url(https://st.ourhtmldemo.com/new/Udrive/assets/images/shape/shape-13.png);
  width: 14px;
  height: 72px;
  background-repeat: no-repeat;
  left: -7px;
  bottom: 120px;
}

.courses-section .line-box .line-2:before {
  position: absolute;
  content: '';
  background-image: url(https://st.ourhtmldemo.com/new/Udrive/assets/images/shape/shape-14.png);
  width: 14px;
  height: 100%;
  background-repeat: no-repeat;
  left: -7px;
  bottom: 0px;
  animation: slide 60s linear infinite;
  -webkit-animation: slide 60s linear infinite;
}

.courses-section .line-box .line-3:before {
  position: absolute;
  content: '';
  background-image: url(https://st.ourhtmldemo.com/new/Udrive/assets/images/shape/shape-13.png);
  width: 14px;
  height: 72px;
  background-repeat: no-repeat;
  left: -7px;
  top: 120px;
}

@keyframes slide {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0px 1500px;
  }
}

@-webkit-keyframes slide {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0px 1500px;
  }
}

.courses-section .pattern-layer {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 743px;
  height: 600px;
  background-repeat: no-repeat;
}

/** highlights-section **/

.highlights-section {
  position: relative;
  background: #121113;
  padding: 18px 0px;
  padding-left: 50px;
}

.highlights-section .single-item h4 {
  position: relative;
  display: block;
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
  color: #fff;
  font-style: italic;
  padding-left: 38px;
}

.highlights-section .single-item h4 i {
  position: absolute;
  left: 0px;
  top: 4px;
  font-style: normal;
}

.highlights-section .owl-carousel .owl-stage-outer {
  overflow: visible;
}

/* working-process-section */
.working-process-section {
  position: relative;
  padding: 30px 0 90px;
}


.working-process-section .background-icon {
  position: absolute;
  top: 155px;
  left: 50%;
  transform: translateX(-50%);
}


.working-process-section .wrapper-box {
  position: relative;
  padding-top: 50px;
}

.working-process-section .wrapper-box:before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  background-image: url(../images/shape/shape-4.png);
  background-repeat: no-repeat;
  background-position: center;
}

.process-block {
  position: relative;
}

.process-block .inner-box {
  position: relative;
  max-width: 320px;
  margin: 0 auto;
  padding: 60px 0;
  transition: .7s;
}

.process-block .inner-box:hover {
  transform: translateY(10px);
}

.process-block .count {
  background-color: var(--color-3);
}

.process-block .count {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 120px;
  width: 120px;
  border-radius: 50%;
  color: #fff;
  font-size: 30px;
  font-weight: 400;
  text-align: center;
  padding-top: 18px;
}

.process-block .content {
  position: relative;
  max-width: 320px;
  border-radius: 50%;
  box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.1);
  padding: 30px 20px 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 1;
  background-color: var(--promation);
  margin: 0 auto;
  min-height: 320px;
}

.process-block .content:before {
  position: absolute;
  content: '';
  left: 10px;
  top: 10px;
  right: 10px;
  bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 50%;
}


.process-block .text {
  position: relative;
  margin-bottom: 0;
}

.process-block:nth-child(2) {
  margin-top: 0px;
}

@media only screen and (min-width:768px) {
  .process-block:nth-child(2) .count {
    top: auto;
    bottom: 0;
    padding-top: 60px;
  }
}

.process-block.active .content {
  background-color: var(--color-3);
}

.process-block.active .content:before {
  border: 9px solid rgb(255 255 255 / 0.20);
}

.process-block.active .count {
  background: var(--promation);
  color: var(--color-white-black);
  box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.1);
  font-family: var(--f-fam);
}

/* CTA Section */
.cta-section {
  text-align: center;
  padding: 110px 0 100px;
  background-size: cover;
}

.cta-section h5 {
  position: relative;
  color: #fff;
  font-size: 14px;
  margin-bottom: 25px;
  text-transform: uppercase;
}

.cta-section h2 {
  position: relative;
  color: #fff;
  font-size: 48px;
  font-weight: 700;
  line-height: 60px;
  margin-bottom: 50px;
}

.cta-section .link-box a {
  margin: 0 10px 10px;
}

/*---------------------------------------*/
/*- tt-promo-02 ( Banner with a moving car) -*/
/*---------------------------------------*/
.tt-promo-02 {
  background: url("https://smartdata.tonytemplates.com/dricub-driving-school/wp-content/uploads/2017/10/tt-promo-02-moving-bg.jpg") bottom left repeat-x;
  overflow: hidden;
}

.tt-promo-02 .moving-car {
  position: relative;
}

.tt-promo-02 .moving-car .carObj {
  background: url("images/carobj.png") 0 -10px no-repeat;
  width: 844px;
  height: 456px;
  float: right;
  position: relative;
}

@media (max-width: 1700px) {
  .tt-promo-02 .moving-car .carObj {
    width: 790px;
  }
}

.tt-promo-02 .moving-car .carObj .wheel1 {
  position: relative;
  top: 292px;
  left: 124px;
}

.tt-promo-02 .moving-car .carObj .wheel2 {
  position: relative;
  top: 292px;
  left: 452px;
}

.tt-promo-02 .moving-car .carObj .wheel {
  animation-name: spin;
  animation-duration: 700ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: 2;
}

@keyframes spin {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

.tt-promo-02 .col-info {
  color: #fff;
}

.tt-promo-02 .col-info p {
  font-size: 35px;
  padding-bottom: 1px;
  line-height: 1.2;
  letter-spacing: 0.005em;
  font-weight: 700;
  font-family: var(--f-fam);
}

.tt-promo-02 .col-info strong {
  font-family: var(--f-fam-p);
  font-size: 25px;
  line-height: 1.2;
  font-weight: 400;
  display: inline-block;
  margin-top: 15px;
}

.tt-promo-02 .col-info [class^="btn-"] {
  margin-top: 41px;
}

.tt-promo-02 .carObj-mobile {
  width: 100%;
  height: auto;
  display: none;
  /* Hide mobile version */
}

.tt-promo-02 .carObj-arrow-down {
  width: 100%;
  display: none;
  height: auto;
}

@media (min-width: 1581px) {
  .tt-promo-02 {
    height: 446px;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

  .tt-promo-02 .col-info {
    background: url("https://smartdata.tonytemplates.com/dricub-driving-school/wp-content/themes/dricub-driving-school/images/tt-promo-02-text-bg.jpg") right top repeat;
    width: 47%;
    position: relative;
    text-align: right;
    z-index: 2;
    display: flex;
    align-items: center;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }

  .tt-promo-02 .col-info:before {
    content: "";
    background: url("https://smartdata.tonytemplates.com/dricub-driving-school/wp-content/themes/dricub-driving-school/images/tt-promo-02-text-corner.png") 0 0 no-repeat;
    position: absolute;
    width: 90px;
    height: 446px;
    top: 0;
    right: -90px;
    z-index: 110;
  }

  .tt-promo-02 .col-info:after {
    content: "";
    background: url("https://smartdata.tonytemplates.com/dricub-driving-school/wp-content/themes/dricub-driving-school/images/tt-promo-02-text-corner1.png") 0 0 no-repeat;
    position: absolute;
    width: 204px;
    height: 318px;
    bottom: 0;
    left: 0px;
    z-index: 0;
  }

  .tt-promo-02 .col-info .text-banner {
    text-align: center;
    position: relative;
    z-index: 2;
    padding-bottom: 27px;
    margin-top: 20px;
  }

  .tt-promo-02 .col-moving-car {
    width: 53%;
    position: relative;
    z-index: 1;
  }
}

@media (max-width: 1580px) {
  .tt-promo-02 {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    align-items: center;
  }

  .tt-promo-02 .col-info {
    background: url(/assets/images/bhbackim.png);
    width: 100%;
    text-align: center;
    background-position: bottom;
    padding-bottom: 70px;
    background-repeat: no-repeat;
  }

  .tt-promo-02 .moving-car .carObj {
    margin: 0 auto;
    float: none;
  }
}

@media (min-width: 767px) and (max-width: 1580px) {
  .tt-promo-02 .carObj-arrow-down {
    display: block;
  }
}

@media (max-width: 1580px) {
  .tt-promo-02 .col-info {
    padding-left: 10%;
    padding-right: 10%;
  }

  .tt-promo-02 .col-info p {
    margin-top: 56px;
  }
}

@media (max-width: 1400px) {
  .tt-promo-02 .col-info p {
    font-size: 40px;
  }

  .tt-promo-02 .col-info strong {
    font-size: 60px;
  }
}

@media (max-width: 768px) {

  .tt-promo-02 .carObj-mobile {
    display: none;
  }

  .tt-promo-02 .col-moving-car {
    display: block;
  }

  .tt-promo-02 .col-info {
    padding-bottom: 15px;
  }

  .tt-promo-02 .col-info p {
    font-size: 29px;
  }

  .tt-promo-02 .col-info strong {
    font-size: 49px;
  }

  .tt-promo-02 .col-info [class^="btn-"] {
    margin-top: 17px;
  }
}

@media (max-width: 500px) {
  .tt-promo-02 .col-info {
    padding-bottom: 50px;
    padding-left: 5%;
    padding-right: 5%;
  }

  .tt-promo-02 .col-info p {
    font-size: 22px;
    margin-top: 37px;
    line-height: 32px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .tt-promo-02 .col-info strong {
    font-size: 25px;
    margin-top: 5px;
    display: inline-block;
  }

  .tt-promo-02 .col-info [class^="btn-"] {
    margin-top: 16px;
  }
}


.tt-promo-02.road {
  background: url("https://smartdata.tonytemplates.com/dricub-driving-school/wp-content/uploads/2017/10/tt-promo-02-moving-bg.jpg") bottom left repeat-x;
  animation: roadMove 10s linear infinite;
}

@keyframes roadMove {
  100% {
    background-position: 1000px bottom;
  }
}

@keyframes rodesign {
  100% {
    background-position: 1000px bottom;
  }
}

@media screen and (max-width:500px) {
  .col-moving-car.moving-car {
    width: 300px;
  }
}

/***
    ====================================================================
    welcome-two vrp
    ====================================================================
    ***/

.welcome-two {
  position: relative;
  padding: 120px 0px 50px;
  z-index: 1;
  overflow: hidden;
}

.welcome-two .right-image {
  position: absolute;
  right: -20px;
  top: -30px;
}

@media only screen and (max-width: 1899px) {
  .welcome-two .right-image {
    width: 300px;
  }
}

@media only screen and (max-width: 600px) {
  .welcome-two .right-image img {
    width: 300px;
  }
}

.welcome-two .text-col {
  position: relative;
  order: 12;
}

@media only screen and (max-width: 1199px) {
  .welcome-two .text-col {
    order: 0;
  }
}

.welcome-two .text-col .title-box {
  margin-bottom: 20px;
}

.welcome-two .text-col .innervcp {
  position: relative;
  display: block;
}


.welcome-two .wel-block-two {
  position: relative;
  margin-bottom: 20px;
}

.welcome-two .wel-block-two .innervcp-box {
  position: relative;
  display: block;
  padding-left: 50px;
}

.welcome-two .wel-block-two .icon {
  position: absolute;
  left: 0;
  top: -4px;
  line-height: 1em;
  color: var(--color-3);
  font-size: 32px;
}

.welcome-two .wel-block-two h6 {
  color: var(--color-white-black);
}

.welcome-two .image-col {
  position: relative;
  margin-bottom: 50px;
  order: 0;
}

.welcome-two .image-col .innervcp {
  position: relative;
  display: block;
}

.welcome-two .image-col .images {
  position: relative;
  display: block;
  max-width: 470px;
}

@media only screen and (max-width: 599px) {
  .welcome-two .image-col .images {
    max-width: none;
  }
}

.welcome-two .image-col .image {
  position: relative;
  display: block;
  border-radius: 5px;
}

.welcome-two .image-col .image img {
  width: 90%;
  border-radius: 10px;
}

.welcome-two .image-col .w-box {
  position: absolute;
  left: 100%;
  margin-left: -160px;
  bottom: 120px;
  width: 100%;
  max-width: 250px;
  border-radius: 5px;
  -ms-transform: rotate(-28.77deg);
  transform: rotate(-28.77deg);
}

@media only screen and (max-width: 1339px) {
  .welcome-two .image-col .w-box {
    margin-left: -220px;
  }
}

@media only screen and (max-width: 599px) {
  .welcome-two .image-col .w-box {
    left: auto;
    margin-left: 0;
    right: 40px;
    max-width: 220px;
  }
}

.welcome-two .image-col .w-box:before {
  content: '';
  position: absolute;
  left: 10px;
  top: 0px;
  right: 0;
  height: 100%;
  background: var(--color-3);
  border-radius: 5px;
  -ms-transform: rotate(-5deg);
  transform: rotate(-5deg);
}

.welcome-two .image-col .w-box .innervcp-box {
  position: relative;
  display: block;
  padding: 35px 20px 35px;
  background: var(--promation);
  text-align: center;
  border-radius: 5px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
}

.welcome-two .image-col .w-box .icon-box {
  position: relative;
  width: 72px;
  height: 64px;
  line-height: 74px;
  font-size: 30px;
  background: var(--color-3);
  color: #ffffff;
  margin: 0 auto 15px;
  border-radius: 5px;
}

/***
  ====================================================================
   services-onevrc
  ====================================================================
  ***/

.services-onevrc {
  position: relative;
  padding: 60px 0px 60px;
  background: var(--bgcolor);
  overflow: hidden;
}

.service-blockvrc {
  position: relative;
}

.services-onevrc .row {
  margin: 0 -22px;
}

.services-onevrc .row .service-blockvrc {
  padding: 0 22px;
  margin-bottom: 10px;
}

.service-blockvrc .inner-boxvrc {
  position: relative;
  display: block;
  max-width: 300px;
  margin: 0 auto;
  text-align: center;
}

.service-blockvrc .imagevrc-box {
  position: relative;
  display: block;
  margin: 0 auto 85px;
  border-radius: 50%;
}

.service-blockvrc .imagevrc-box:before {
  content: '';
  position: absolute;
  left: 15px;
  top: 15px;
  right: 15px;
  bottom: -15px;
  background: var(--color-3);
  border-radius: 50%;
}

.service-blockvrc .imagevrc-box .imagevrc {
  position: relative;
  display: block;
  border-radius: 50%;
  z-index: 1;
  transition: all 1000ms ease;
}

.service-blockvrc:hover .imagevrc-box .imagevrc {
  -ms-transform: rotate(25deg);
  transform: rotate(25deg);
  border-color: #e30b17;
  -webkit-transition: all 1000ms ease;
  transition: all 1000ms ease;
}

.service-blockvrc .imagevrc-box .imagevrc img {
  position: relative;
  display: block;
  border-radius: 50%;
}

.service-blockvrc .imagevrc-box .count {
  position: absolute;
  display: block;
  left: 50%;
  top: 100%;
  margin-left: -50px;
  margin-top: -35px;
  font-size: 36px;
  font-weight: 600;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  background: var(--color-3);
  color: #ffffff;
  border-radius: 50%;
  box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.service-blockvrc .imagevrc-box .count:before {
  content: '';
  position: absolute;
  left: 10px;
  top: 10px;
  right: 10px;
  bottom: 10px;
  border: 1px dashed #ffffff;
  border-radius: 50%;
}

/** advanced-section **/

.advanced-section {
  position: relative;
  padding: 90px 0px;
}

@media screen and (max-width:530px) {
  .advanced-section {
    padding: 50px 0px;
  }
}

.advanced-section .title-inner {
  position: relative;
  display: block;
  margin-right: 40px;
  margin-top: 11px;
}

.advanced-section .title-inner .sec-title {
  padding-bottom: 15px;
  margin-bottom: 20px;
  border-bottom: 4px solid var(--border1-bgwhite);
}

.advanced-section .title-inner .download-box h5 {
  display: block;
  font-size: 16px;
  line-height: 26px;
  font-weight: 500;
  color: #75767b;
  text-transform: uppercase;
}

.advanced-section .image-box {
  position: relative;
  display: block;
  text-align: center;
}

.advanced-section .image-box .shape {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 438px;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid var(--border-bgwhite);
}

.advanced-section .image-box .image {
  position: relative;
  display: block;
}

.advanced-section .text-inner {
  position: relative;
  display: block;
  margin-top: 13px;
}

/* **********************************
Issue International Driving Permit
***********************************/



/** about-style-twoiidp-two **/

.about-style-twoiidp-two {
  position: relative;
  padding-top: 92px;
}

.about-style-twoiidp-two .bg-layer-1 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: calc(50% + 185px);
  /* height: calc(100% - 343px); */
  height: calc(100% - 0px);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.about-style-twoiidp-two .bg-layer-1:before {
  position: absolute;
  content: '';
  background: #000;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  opacity: 0.5;
}

.about-style-twoiidp-two .bg-layer-2 {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}

.about-style-twoiidp-two .bg-layer-2:before {
  position: absolute;
  content: '';
  background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 1)30%, rgba(0, 0, 0, 0.10) 100%);
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
}

.about-style-twoiidp-two .upper-box {
  position: relative;
  display: block;
  max-width: 500px;
  width: 100%;
  padding-left: 130px;
  padding-top: 107px;
  padding-bottom: 92px;
  margin-left: 70px;
}

.about-style-twoiidp-two .upper-box .title-text {
  position: absolute;
  left: 0px;
  top: 0px;
}

.about-style-twoiidp-two .upper-box .title-text h5 {
  display: block;
  font-size: 18px;
  line-height: 26px;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 0px;
  font-family: var(--f-fam);
}

.about-style-twoiidp-two .upper-box .title-text h2 {
  position: relative;
  display: inline-block;
  font-size: 50px;
  line-height: 60px;
  font-weight: 600;
  padding-right: 137px;
  color: var(--color-3);
  font-family: var(--f-fam-p);
}

@media screen and (max-width:520px) {
  .about-style-twoiidp-two .upper-box .title-text h2 {
    font-size: 32px !important;
  }

  .about-style-twoiidp-two .upper-box .title-text h2:before {
    right: 5px !important;
  }
}

.about-style-twoiidp-two .upper-box .title-text h2:before {
  position: absolute;
  content: '';
  background-image: url(/assets/images/shape-53.png);
  width: 126px;
  height: 26px;
  top: 17px;
  right: 0px;
  background-repeat: no-repeat;
}

.about-style-twoiidp-two .upper-box .inner {
  position: relative;
  display: block;
  padding-left: 75px;
}

.about-style-twoiidp-two .upper-box .inner .icon-box {
  position: absolute;
  left: 0px;
  top: 10px;
  font-size: 55px;
  transform: rotateY(180deg);
}

.about-style-twoiidp-two .upper-box .inner .count-outer {
  position: relative;
  display: block;
  line-height: 40px;
  font-weight: 600;
  margin-bottom: 5px;
}

.about-style-twoiidp-two .upper-box .inner .count-outer .count-text {
  font-family: var(--f-fam-p);
  color: #fff;
  font-size: 40px;
}

.about-style-twoiidp-two .upper-box .inner h4 {
  display: block;
  font-size: 20px;
  line-height: 30px;
  color: #fff;
  font-weight: 500;
  font-family: var(--f-fam-p);
}

.about-style-twoiidp-two .lower-box {
  position: relative;
  display: block;
  width: calc(50% + 185px);
  padding: 60px 60px 55px 0px;
  background: var(--iidp);
}

.about-style-twoiidp-two .lower-box .single-itemiidp {
  position: relative;
  display: block;
  padding-left: 60px;
}

.about-style-twoiidp-two .lower-box .single-itemiidp .icon-box {
  position: relative;
  display: block;
  font-size: 55px;
  line-height: 50px;
  margin-bottom: 20px;
}


.about-style-twoiidp-two .lower-box .single-itemiidp p {
  color: var(--color-white-black);
  font-family: var(--f-fam-p);
}

.about-style-twoiidp-two .lower-box:before {
  position: absolute;
  content: '';
  background: var(--border1-bgwhite);
  width: 1px;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  top: 0px;
}

@media only screen and (max-width: 991px) {
  .about-style-twoiidp-two .lower-box:before {
    display: none;
  }
}

.about-style-twoiidp-two .pattern-layer {
  position: absolute;
  left: 77px;
  top: 40px;
  width: 420px;
  height: 420px;
  background-repeat: no-repeat;
  -webkit-animation: zoom-fade 8s infinite linear;
  animation: zoom-fade 8s infinite linear;
}

@keyframes zoom-fade {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  100% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

@media only screen and (max-width: 991px) {
  .about-style-twoiidp-two .bg-layer-1 {
    display: none;
  }
}

@media only screen and (max-width: 1200px) {

  .ourcars-section .owl-nav,
  .about-style-twoiidp-two .pattern-layer {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  .about-style-twoiidp-two .upper-box {
    margin-left: 0px;
    max-width: 100%;
  }
}

@media only screen and (max-width: 599px) {
  .about-style-twoiidp-two .upper-box {
    padding-left: 0px;
  }
}

@media only screen and (max-width: 991px) {
  .about-style-twoiidp-two .lower-box {
    width: 100%;
  }
}


@media only screen and (max-width: 767px) {
  .about-style-twoiidp-two .lower-box .single-itemiidp {
    margin-bottom: 30px;
  }

  .about-style-twoiidp-two .lower-box {
    padding: 30px;
  }

  .about-style-twoiidp-two .lower-box .single-itemiidp {
    padding-left: 0px;
  }
}

@media only screen and (max-width: 767px) {
  .about-style-twoiidp-two .lower-box .single-column:last-child .single-itemiidp {
    margin-bottom: 0px;
  }
}

/** about-sectioniidpone **/

.about-sectioniidpone {
  position: relative;
  padding: 50px 0px;
}

.about-sectioniidpone .title-text {
  position: relative;
  display: block;
  margin-bottom: 30px;
}

.about-sectioniidpone .big-column .image-box {
  position: relative;
  display: block;
  margin-right: 20px;
}

.about-sectioniidpone .image {
  position: relative;
  display: block;
  clip-path: polygon(0% 0%, 63% 0%, 100% 23%, 100% 100%, 80% 100%, 25% 100%, 0% 100%, 0% 20%);
}

.about-sectioniidpone .image img {
  width: 100%;
}

.about-sectioniidpone .content-box {
  position: relative;
  display: block;
}

.about-sectioniidpone .content-box h6 {
  position: relative;
  display: block;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--color-white-black);
  font-family: var(--f-fam-p);
}

.about-sectioniidpone .content-box h2 {
  position: relative;
  display: inline-block;
  font-size: 48px;
  line-height: 50px;
  font-weight: 600;
  margin-bottom: 27px;
  padding-right: 126px;
  font-family: var(--f-fam-p);
  color: var(--color-white-black);
}

.about-sectioniidpone .content-box h2:before {
  position: absolute;
  content: '';
  background-image: url(/assets/images/shape-10.png);
  width: 112px;
  height: 26px;
  background-repeat: no-repeat;
  top: 13px;
  right: 0px;
}

.about-sectioniidpone .small-column .image-box {
  margin-left: 20px;
}

.about-sectioniidpone .small-column .image-box .image {
  margin-bottom: 10px;
}

.about-sectioniidpone .small-column .image-box .social-list li {
  position: relative;
  display: inline-block;
  float: left;
  margin-right: 15px;
}

.about-sectioniidpone .small-column .image-box .shape {
  position: absolute;
  left: -80px;
  bottom: 9px;
  width: 294px;
  height: 208px;
  background-repeat: no-repeat;
  z-index: -1;
}

/** chooseus-sectioniidl **/

.chooseus-section {
  position: relative;
  padding: 115px 0px 90px 0px;
  background: var(--bgcolor);
}


.chooseus-section .shape .shape-1 {
  position: absolute;
  top: 0px;
  right: 29%;
  width: 235px;
  height: 133px;
  background-repeat: no-repeat;
}

.chooseus-block-oneiidl .inner-box-oneiidltwo {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--promation);
  padding: 94px 30px 33px 30px;
  margin-bottom: 30px;
  border: 1px solid var(--border1-bgwhite);
  box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.1);
}

.chooseus-block-oneiidl .inner-box-oneiidltwo .count-text {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 70px;
  height: 70px;
  line-height: 70px;
  background: var(--color-3);
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  clip-path: polygon(0% 0%, 75% 0%, 100% 30%, 100% 100%, 80% 100%, 25% 100%, 0% 70%, 0% 20%);
  transition: all 500ms ease;
}

.chooseus-block-oneiidl .inner-box-oneiidltwo:hover .count-text {
  color: #fff;
}

.chooseus-block-oneiidl .inner-box-oneiidltwo .icon-box {
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: 60px;
  transform: scale(0, 0);
  transition: all 500ms ease;
}

.chooseus-block-oneiidl .inner-box-oneiidltwo:hover .icon-box {
  transform: scale(1, 1);
}

.chooseus-block-oneiidl .inner-box-oneiidltwo .light-icon {
  position: absolute;
  top: 30px;
  right: 30px;
  transition: all 500ms ease;
}

.chooseus-block-oneiidl .inner-box-oneiidltwo:hover .light-icon {
  transform: scale(0, 0);
}

.chooseus-block-oneiidl .inner-box-oneiidltwo h4 {
  display: block;
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
  margin-bottom: 12px;
}

/*******************************
 Issue Duplicate Driving License
 *******************************/


/***
=============================================
about-oneiddl
=============================================
***/
.about-oneiddl {
  position: relative;
  display: block;
  padding: 50px 0px 50px;
  z-index: 1;
}

.about-oneiddl::before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 49%;
  background: var(--bgcolor);
  content: "";
  z-index: -1;
  border-right: 1px solid var(--border1-bgwhite);
}

.about-oneiddl__img {
  position: relative;
  display: block;
  max-width: 530px;
  width: 100%;
  z-index: 1;
}

.about-oneiddl__img::before {
  position: absolute;
  top: 100px;
  left: -15px;
  bottom: -15px;
  right: 15px;
  background-image: -moz-linear-gradient(90deg, rgb(245, 183, 84) 0%, rgb(245, 183, 84) 18%, rgb(255, 255, 255) 99%);
  background-image: -webkit-linear-gradient(90deg, rgb(245, 183, 84) 0%, rgb(245, 183, 84) 18%, rgb(255, 255, 255) 99%);
  background-image: -ms-linear-gradient(90deg, rgb(245, 183, 84) 0%, rgb(245, 183, 84) 18%, rgb(255, 255, 255) 99%);
  content: "";
  z-index: -1;
}

.about-oneiddl__img-inner {
  position: relative;
  display: block;
  overflow: hidden;
}

.about-oneiddl__img-inner::before {
  position: absolute;
  top: 0;
  left: -100%;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .1) 100%);
  transform: skewX(5deg);
  z-index: 1;
}

.about-oneiddl__img:hover .about-oneiddl__img-inner::before {
  -webkit-animation: shine 1.5s;
  animation: shine 1.5s;
}

.about-oneiddl__img-inner .experience-box {
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(255, 255, 255, .8);
  padding: 30px 40px 29px;
  z-index: 5;
}


.about-oneiddl__img-inner img {
  width: 100%;
  transition: all 500ms linear;
  transition-delay: 0.2s;
}

.about-oneiddl__img:hover .about-oneiddl__img-inner img {
  transform: scale(1.1) rotate(0deg);
  transition: all 500ms linear;
  transition-delay: 0.1s;
}

.about-oneiddl .odometer.odometer-auto-theme,
.about-oneiddl .odometer.odometer-theme-default {
  font-family: var(--thm-font);
  line-height: 45px;
}

.about-oneiddl__content {
  position: relative;
  display: block;
  z-index: 1;
}

.about-oneiddl__content .big-title {
  position: absolute;
  top: -42px;
  left: -175px;
  z-index: -1;
}

.about-oneiddl__content .big-title h2 {
  color: var(--transparent);
  -webkit-text-stroke: 1px rgba(23, 41, 62, 0.09);
  font-size: 150px;
  line-height: 150px;
  font-weight: 700;
  text-transform: capitalize;
}

@media screen and (max-width:907px) {
  .about-oneiddl__content .big-title h2 {
    font-size: 80px;
  }

  .about-oneiddl__content .big-title {
    left: 0px;
  }
}

/** highlights-style-two **/

.highlights-style-two {
  position: relative;
  padding: 111px 0px 120px 0px;
  background: #121113;
}

.highlights-style-two .sec-title {
  max-width: 550px;
}

.highlights-style-two .sec-title h2 {
  margin-bottom: 16px;
  color: #fff;
  font-family: var(--f-fam);
}

.highlights-style-two .single-item {
  position: relative;
  display: block;
  background: var(--promation);
  padding: 34px 30px 33px 40px;
  margin-bottom: 30px;
  box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.1);
}

.highlights-style-two .single-item .inner {
  position: relative;
  padding-left: 86px;
}

.highlights-style-two .single-item .inner .icon-list {
  position: absolute;
  left: 0px;
  top: 10px;
}

.highlights-style-two .single-item .inner .icon-list li {
  position: relative;
  display: inline-block;
  float: left;
  font-size: 44px;
  margin-left: -13px;
  transition: all 500ms ease;
}

.highlights-style-two .single-item .inner .icon-list li:first-child {
  margin-left: 0px;
}

.highlights-style-two .single-item .inner .icon-list li:last-child {
  position: absolute;
  left: 45px;
  top: 0px;
  opacity: 0;
}

.highlights-style-two .single-item .inner .icon-list li {
  color: #fee100;
}

.highlights-style-two .single-item:hover .inner .icon-list li:last-child {
  opacity: 1;
}

.highlights-style-two .single-column:first-child .single-item {
  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 100% 65%, 90% 100%, 0% 100%, 0% 100%, 0% 0%);
}

.highlights-style-two .single-column:nth-child(2) .single-item {
  clip-path: polygon(0% 0%, 100% 0%, 100% 15%, 100% 100%, 80% 100%, 11% 100%, 0% 65%, 0% 20%);
}

.highlights-style-two .single-column:nth-child(3) .single-item {
  clip-path: polygon(0% 0%, 90% 0%, 100% 36%, 100% 100%, 80% 100%, 21% 100%, 0% 100%, 0% 20%);
}

.highlights-style-two .single-column:last-child .single-item {
  clip-path: polygon(11% 0%, 100% 0%, 100% 0%, 100% 70%, 100% 100%, 0% 100%, 0% 100%, 0% 36%);
}

@media only screen and (max-width: 767px) {
  .highlights-style-two .single-column .single-item {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 100% 100%, 90% 100%, 0% 100%, 0% 100%, 0% 0%) !important;
  }

  .highlights-style-two .single-item {
    padding: 25px;
  }
}

.highlights-style-two .bg-layer {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 50%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 61% 0%);
}

.highlights-style-two .shape .shape-1 {
  position: absolute;
  left: 0px;
  top: 260px;
  width: 240px;
  height: 359px;
  background-repeat: no-repeat;
}

.highlights-style-two .shape .shape-2 {
  position: absolute;
  left: 60%;
  top: 210px;
  width: 137px;
  height: 13px;
  background-repeat: no-repeat;
}

.iddl-bottom {
  background-image: url(/assets/images/iddloutput-onlinepngtools.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 30px 0px;
}

/***
=====================================================
Change of Address on Driving licence
=====================================================
***/

/* services-twocadl */
.services-twocadl {
  position: relative;
  display: block;
  padding: 100px 0px 150px;
  z-index: 1;
}

.services-twocadl__bg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-attachment: scroll;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: -1;
}

.services-twocadl__bg::before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #010101;
  opacity: 0.9;
  content: "";
  z-index: -2;
}

.services-twocadl .shape2 {
  position: absolute;
  left: 475px;
  bottom: 0px;
  z-index: -1;
}

.services-twocadl .shape2 img {
  animation: animation1cadl 5s ease-in infinite;
}

@keyframes animation1cadl {

  0%,
  100% {
    -webkit-transform: rotate(0deg) translateX(0);
    transform: rotate(0deg) translateX(0);
  }

  25%,
  75% {
    -webkit-transform: rotate(5deg) translateX(15px);
    transform: rotate(5deg) translateX(15px);
  }

  50% {
    -webkit-transform: rotate(10deg) translateX(30px);
    transform: rotate(10deg) translateX(30px);
  }
}

.services-twocadl__inner {
  position: relative;
  display: block;
}

.services-twocadl__single {
  position: relative;
  display: block;
}

.services-twocadl__single-inner {
  position: relative;
  display: block;
  padding: 27px 20px 35px;
  transition: 0.9s;
  opacity: 1;
}

.services-twocadl__single:hover .services-twocadl__single-inner {
  opacity: 0;
}

.num .number-boxcadl {
  position: relative;
  display: block;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .3);
  font-size: 50px;
  line-height: 60px;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
}

.services-twocadl__single .icon-box i {
  background: var(--color-3);
  padding: 10px;
  border-radius: 50px;
  color: #fff;
}

.services-twocadl__single .overlay-content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  transition: 1s;
  transform: scaleX(.8);
  opacity: 0;
  z-index: 2;
}

.services-twocadl__single:hover .overlay-content {
  transform: scaleX(1);
  opacity: 1;
}

.services-twocadl__single .overlay-content .inner {
  position: relative;
  display: block;
  background: rgba(255, 255, 255, .1);
  padding: 27px 20px 35px;
}

@media only screen and (max-width: 767px) {
  .services-twocadl {
    padding: 80px 0px 80px;
  }
}

@media only screen and (max-width: 767px) {
  .services-twocadl .shape2 {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  .services-twocadl__single {
    max-width: 450px;
    width: 100%;
    margin: 0 auto 20px;
  }
}

/* about-twocadl */
.about-twocadl {
  position: relative;
  display: block;
  /* background: #ffffff; */
  padding: 50px 0px 70px;
  z-index: 1;
}

.about-twocadl .shape3 {
  position: absolute;
  right: 0px;
  bottom: 150px;
  opacity: 0.2;
  z-index: -1;
}

.about-twocadl__img {
  position: relative;
  display: block;
  margin-right: 30px;
}

.about-twocadl__img-innercadl {
  position: relative;
  display: block;
  max-width: 480px;
  width: 100%;
  overflow: hidden;
}

.about-twocadl__img-innercadl::before {
  background: rgba(255, 255, 255, 0.3);
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  opacity: 1;
  z-index: 1;
  pointer-events: none;
}

.about-twocadl__img:hover .about-twocadl__img-innercadl::before {
  height: 100%;
  opacity: 0;
  -webkit-transition: all 400ms linear;
  transition: all 400ms linear;
}

.about-twocadl__img-innercadl img {
  width: 100%;
  transition: .5s ease;
  transform: scale(1.05);
}

.about-twocadl__img:hover .about-twocadl__img-innercadl img {
  transform: scale(1);
}

.about-twocadl__img-innercadl .experience-box {
  position: absolute;
  top: 40px;
  left: 0;
  bottom: 40px;
  background: rgba(23, 41, 62, 0.85);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(-180deg) translateX(0%);
  width: max-content;
  text-align: center;
  padding-left: 32px;
  padding-right: 32px;
  content: "";
  z-index: 3;
}

.about-twocadl__img-innercadl .experience-box h2 {
  color: #ffffff;
  font-size: 26px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: 0.3em;
  font-family: var(--f-fam-p);
}

.about-twocadl__img-text {
  position: absolute;
  bottom: -25px;
  right: 0;
  background: var(--color-3);
  padding: 32px 45px 25px;
  overflow: hidden;
  z-index: 3;
}

.about-twocadl__img-text .shape1 {
  position: absolute;
  top: -70px;
  left: 0;
  right: 0;
  text-align: center;
  opacity: 0.1;
  z-index: -1;
}

.about-twocadl__content {
  position: relative;
  display: block;
}

.about-twocadl__content-text {
  margin: 0;
}

.about-twocadl__content-bottom {
  position: relative;
  display: block;
  margin-top: 25px;
}

.about-twocadl__content-bottom-content {
  position: relative;
  display: block;
}

.about-twocadl__content-bottom-content .single-boxcadl {
  position: relative;
  display: block;
  z-index: 1;
}

.about-twocadl__content-bottom-content .single-boxcadl.mt {
  margin-top: 25px;
}

.about-twocadl__content-bottom-content .single-boxcadl::before {
  position: absolute;
  top: 15px;
  left: 20px;
  bottom: 0;
  right: 0;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 0px 30px 0px rgb(0, 0, 0, 0.05);
  content: "";
  z-index: -1;
}

.about-twocadl__content-bottom-content .single-boxcadl .innercadl {
  position: relative;
  display: block;
  padding-left: 70px;
  padding-top: 34px;
  padding-bottom: 17px;
  background: var(--promation);
  box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.1);
}

.about-twocadl__content-bottom-content .single-boxcadl .innercadl .icon-box {
  position: absolute;
  top: 0px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: var(--color-3);
  border-radius: 10px;
}

.about-twocadl__content-bottom-content .single-boxcadl .innercadl .icon-box span::before {
  position: relative;
  display: inline-block;
  color: #ffffff;
  font-size: 25px;
}

.about-twocadl__content-bottom-content .single-boxcadl .innercadl .content-box {
  position: relative;
  display: block;
}

.about-twocadl__content-bottom-img {
  position: relative;
  display: block;
  margin-top: 12px;
}

.about-twocadl__content-bottom-img-innercadl {
  position: relative;
  display: block;
  overflow: hidden;
  z-index: 1;
}

.about-twocadl__content-bottom-img-innercadl .shape1 {
  position: absolute;
  left: 45px;
  bottom: 95px;
  opacity: 0.75;
  z-index: 1;
}

.about-twocadl__content-bottom-img-innercadl::before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #010101;
  opacity: 0.6;
  content: "";
  z-index: 1;
}

.about-twocadl__content-bottom-img-innercadl img {
  width: 100%;
}

/* work-onecad */

.work-onecad {
  position: relative;
  display: block;
  /* background: #ffffff; */
  padding: 60px 0px 60px;
  z-index: 1;
  overflow: hidden;
}

.work-onecad .shape1 {
  position: absolute;
  top: -85px;
  right: -30px;
  opacity: 0.08;
  z-index: -1;
}

.work-onecad li {
  position: relative;
  display: block;
}

.work-onecad li::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 25px;
  width: 1px;
  background: var(--border1-bgwhite);
  content: "";
}

.work-onecad li:last-child:before {
  display: none;
}

.work-onecad__single {
  position: relative;
  display: block;
  max-width: 360px;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 30px;
}

.work-onecad__single .icon-box {
  position: absolute;
  top: 100px;
  right: -62px;
  z-index: 2;
}

.work-onecad__single .icon-box a {
  position: relative;
  display: block;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  background: var(--color-3);
  border: 1px solid var(--color-3);
  transition: all 200ms linear;
  transition-delay: 0.1s;
  color: #fff;
}

.work-onecad__single-img {
  position: relative;
  display: block;
  max-width: 270px;
  width: 100%;
  margin: 0 auto;
  padding: 15px;
  border: 2px solid var(--color-3);
  border-radius: 50%;
  border-top-left-radius: 20%;
  border-bottom-right-radius: 20%;
  z-index: 1;
}

.work-onecad__single-img-inner {
  position: relative;
  display: block;
  overflow: hidden;
  box-shadow: 0px 0px 30px 0px rgb(0, 0, 0, 0.08);
  border-radius: 50%;
  border: 5px solid var(--promation);
  border-top-left-radius: 20%;
  border-bottom-right-radius: 20%;
  z-index: 1;
}

.work-onecad__single-img-inner:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition-delay: .1s;
  transition-timing-function: ease-in-out;
  transition-duration: .7s;
  transition-property: all;
  background: rgba(var(--thm-black-rgb), 0.5);
  opacity: 0;
  z-index: 1;
  content: "";
}

.work-onecad__single:hover .work-onecad__single-img-inner::before {
  opacity: 1;
}

.work-onecad__single-img-inner .number-boxcad {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #010101;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .5);
  font-size: 65px;
  line-height: 70px;
  font-weight: 700;
  transform: scale(0.9);
  transition: all 300ms linear;
  transition-delay: 0.2s;
  opacity: 0;
  z-index: 5;
  font-family: var(--f-fam);
}

.work-onecad__single:hover .work-onecad__single-img-inner .number-boxcad {
  transform: scale(1.0);
  opacity: 1.0;
  transition: all 400ms linear;
  transition-delay: 0.3s;
}

.work-onecad__single-img-inner img {
  width: 100%;
  transition: .5s ease;
  transform: scale(1.05);
}

.work-onecad__single:hover .work-onecad__single-img-inner img {
  transform: scale(1);
}

.work-onecad__single-img .icon-box {
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--promation);
  box-shadow: 0px 0px 30px 0px rgb(0, 0, 0, 0.08);
  border-radius: 50%;
  z-index: 5;
}

.work-onecad__single-img .icon-box span:before {
  position: relative;
  display: inline-block;
  font-size: 35px;
}

.float-bob-y {
  animation-name: float-bob-y;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes float-bob-y {
  0% {
    transform: translateY(-20px);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(-20px);
  }
}

/***********************
Renewal Driving Licence
*************************/

/* welcome-sectionrdl */

.title-boxrdl .dots {
  position: relative;
  width: 40px;
  margin-bottom: 10px;
}

.title-boxrdl .dots span {
  position: relative;
  display: block;
  width: 25px;
  height: 5px;
  border-bottom: 5px solid var(--color-3);
}

.title-boxrdl .dots span:before {
  content: '';
  position: absolute;
  left: 30px;
  top: 0;
  width: 5px;
  height: 5px;
  border-bottom: 5px solid var(--color-3);
}

.title-boxrdl .dots span:after {
  content: '';
  position: absolute;
  left: 40px;
  top: 0;
  width: 3px;
  height: 5px;
  border-bottom: 5px solid var(--color-3);
}

.title-boxrdl h2 {
  position: relative;
  display: inline-block;
  font-weight: 900;
  text-transform: none;
  color: #191825;
  line-height: 1.1em;
  margin: 0 0;
}

.welcome-sectionrdl {
  position: relative;
  padding: 50px 0px 50px;
}

.welcome-sectionrdl .bg-left {
  position: absolute;
  left: 0;
  top: 0;
  width: 33.333%;
  height: 100%;
  text-align: center;
  background: var(--promation);
}

.welcome-sectionrdl .bg-left .icon {
  position: relative;
  display: block;
  margin-top: 30px;
}

.welcome-sectionrdl .bg-left .icon img {
  position: relative;
  display: inline-block;
  transition: all 30000ms linear;
}

.page-done .welcome-sectionrdl .bg-left .icon img {
  -ms-transform: rotate(1440deg);
  transform: rotate(1440deg);
}

.welcome-sectionrdl .bg-right {
  position: absolute;
  right: 0;
  top: 0;
  width: 66.666%;
  height: 100%;
  text-align: center;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.welcome-sectionrdl .bg-right:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: none;
}

.welcome-sectionrdl .text-colrdl {
  position: relative;
  margin-bottom: 40px;
  order: 12;
}

.welcome-sectionrdl .text-colrdl .inner {
  position: relative;
  display: block;
  padding-left: 20px;
}

.welcome-sectionrdl .wel-block {
  position: relative;
  margin-bottom: 20px;
}

.welcome-sectionrdl .wel-block .inner-box {
  position: relative;
  display: block;
  padding-left: 50px;
}

.welcome-sectionrdl .wel-block .icon {
  position: absolute;
  left: 0;
  top: 0;
}

.welcome-sectionrdl .wel-block .icon i {
  background: var(--color-3);
  padding: 10px;
  border-radius: 50px;
  color: #fff;
}

.welcome-sectionrdl .wel-block h4 {
  font-family: var(--f-fam-p);
  color: var(--color-white-black);
  position: relative;
  font-weight: 700;
  margin-bottom: 10px;
}

.welcome-sectionrdl .image-col {
  position: relative;
  margin-bottom: 50px;
  order: 0;
}

.welcome-sectionrdl .image-col .inner {
  position: relative;
  display: block;
}

.welcome-sectionrdl .image-col .images {
  position: relative;
}

.welcome-sectionrdl .image-col .image {
  position: relative;
  display: block;
  max-width: 350px;
  border-radius: 5px;
}

.welcome-sectionrdl .image-col .image img {
  width: 100%;
  border-radius: 5px;
}

.welcome-sectionrdl .image-col .image-box {
  position: absolute;
  top: 200px;
  left: 95px;
  max-width: 430px;
  border-radius: 5px;
}

.welcome-sectionrdl .image-col .image-box .vid-btn {
  position: absolute;
  right: 0;
  bottom: 0;
  /* width: 120px; */
  /* height: 90px; */
  padding: 30px 20px;
  font-size: 20px;
  line-height: 30px;
  color: #ffffff;
  background: var(--color-3);
  text-align: center;
  font-family: var(--f-fam-p);
}

.welcome-sectionrdl .image-col .image-box .vid-btn:hover {
  background: #191825;
}

.welcome-sectionrdl .image-col .image-box img {
  width: 100%;
  border-radius: 5px;
}

.welcome-sectionrdl .image-col .client-badge {
  position: absolute;
  right: 20px;
  top: 25px;
  width: 130px;
  height: 130px;
  background: var(--color-3);
  color: #ffffff;
  text-align: center;
  border-radius: 50%;
}

.welcome-sectionrdl .image-col:hover .client-badge {
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
  border-color: #e30b17;
  -webkit-transition: all 1000ms ease;
  transition: all 1000ms ease;
}

.welcome-sectionrdl .image-col .client-badge .inner-box {
  position: absolute;
  left: 13px;
  top: 13px;
  width: 104px;
  height: 104px;
  border: 1px dashed #ffffff;
  padding: 20px 5px;
  font-size: 18px;
  font-weight: 500;
  line-height: 32px;
  border-radius: 50%;
  font-family: var(--f-fam);
}

/***
=====================================================
work-twordl
=====================================================
***/
.work-twordl {
  position: relative;
  display: block;
  background: var(--bgcolor);
  padding: 50px 0px 50px;
  z-index: 1;
  border-top: 1px solid var(--border-bgwhite);
  border-bottom: 1px solid var(--border-bgwhite);
}

.work-twordl__content {
  position: relative;
  display: block;
  max-width: 700px;
  width: 100%;
}

.work-twordl__content-single {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  color: var(--color-white-black);
}

.work-twordl__content-single.mb0 {
  margin-bottom: 0;
}

.work-twordl__content-single.style2 {
  position: relative;
}

.work-twordl__content-single.style2 .number-boxedl .border-box {
  background: var(--color-3);
}

.work-twordl__content-single.style2 .number-boxedl {
  margin-left: 0px;
  margin-right: 70px;
}

.work-twordl__content-single .content-box {
  position: relative;
  display: block;
  max-width: 550px;
  width: 100%;
  border: 1px solid var(--border1-bgwhite);
  padding: 30px;
  background: var(--bgcolor);
  box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.work-twordl__content-single .number-boxedl {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.work-twordl__content-single .number-boxedl .border-box {
  position: relative;
  display: block;
  width: 50px;
  height: 10px;
  background: var(--color-3);
  margin-right: 20px;
}

.work-twordl__content-single .number-boxedl h2 {
  position: relative;
  font-size: 60px;
  line-height: 1em;
  font-weight: 600;
  font-family: var(--f-fam);
}

.work-twordl__content-single .number-boxedl h2 span {
  position: relative;
  display: inline-block;
  font-size: 30px;
  position: absolute;
  top: -10px;
}

.work-twordl__img {
  position: relative;
  display: block;
  margin-left: 42px;
}

.work-twordl__img .inner {
  position: relative;
  display: block;
}

@media screen and (max-width:675px) {
  .work-twordl__content-single .number-boxedl {
    margin-left: 10px;
  }

  .work-twordl__content-single .number-boxedl h2 {
    font-size: 30px;
  }

  .work-twordl__content-single .number-boxedl h2 span {
    font-size: 16px;
  }

  .work-twordl__content-single .number-boxedl .border-box {
    width: 30px;
    margin-right: 10px;
  }

  .work-twordl__content-single .content-box {
    padding: 20px;
  }

  .work-twordl__content-single.style2 .number-boxedl {
    margin-right: 30px;
  }

  .work-twordl__img {
    margin-left: 0px;
  }
}

/*  service-areaedl*/

.service-areaedl {
  padding: 90px 0px 90px;
  position: relative;
  color: #fff;
}

.service-bgedl {
  background-image: url('/assets/images/dl.beatsnoop.com-3000-4bykAYzZh5 (1).jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.service-bgedl.home-12 {
  background-attachment: fixed;
}

.service-overlayedl {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #333333;
  opacity: .9;
}

.service-areaedl *:not(.service-overlayedl) {
  position: relative;
  z-index: 1;
}

.service-areaedl .nav-tabs {
  border-bottom: none;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.service-areaedl .tab-content {
  padding-top: 59px;
}

.service-areaedl .nav-tabs .nav-link {
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  padding: 5px 20px;
  position: relative;
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(1, 0, 0, 1);
  transition: -webkit-transform 0.4s cubic-bezier(1, 0, 0, 1);
  transition: transform 0.4s cubic-bezier(1, 0, 0, 1);
  transition: transform 0.4s cubic-bezier(1, 0, 0, 1), -webkit-transform 0.4s cubic-bezier(1, 0, 0, 1);
}

.service-areaedl .nav-tabs .nav-link:hover {
  color: var(--color-3);
}

.service-areaedl .nav-tabs .nav-link::before {
  content: "";
  position: absolute;
  top: 50%;
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transform-origin: right top;
  transform-origin: right top;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-3);
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(1, 0, 0, 1);
  transition: -webkit-transform 0.4s cubic-bezier(1, 0, 0, 1);
  transition: transform 0.4s cubic-bezier(1, 0, 0, 1);
  transition: transform 0.4s cubic-bezier(1, 0, 0, 1), -webkit-transform 0.4s cubic-bezier(1, 0, 0, 1);
}

.service-areaedl .nav-tabs .nav-link:hover::before {
  -webkit-transform-origin: left top;
  transform-origin: left top;
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
}

.service-areaedl .nav-tabs .nav-item.show .nav-link,
.service-areaedl .nav-tabs .nav-link.active {
  background-color: rgba(255, 255, 255, .1);
  border: none;
  border-radius: 0px;
  padding: 5px 20px;
  color: var(--color-3);
}

.service-areaedl .nav-tabs .nav-link i {
  font-size: 22px;
  font-weight: 400;
  display: inline-block;
  margin-right: 8px;
}

.service-areaedl .nav-tabs .nav-link:focus,
.service-areaedl .nav-tabs .nav-link:hover {
  border-color: transparent;
}

.single-serviceedl {
  background-color: rgba(255, 255, 255, .1);
  position: relative;
  text-align: left;
  padding: 50px;
}

.single-serviceedl::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transform-origin: top right;
  transform-origin: top right;
  background-color: var(--color-3);
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
}

.single-serviceedl:hover::before {
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
  -webkit-transform-origin: top left;
  transform-origin: top left;
}

.single-serviceedl::after {
  content: "";
  right: -10px;
  top: -10px;
  position: absolute;
  width: 0;
  height: 0;
  border-top: 130px solid var(--color-3);
  border-left: 130px solid transparent;
  -webkit-transition: .3s;
  transition: .3s;
}

.single-serviceedl:hover::after {
  border-top: 130px solid #fff;
}

.single-serviceedl h3 {
  font-size: 24px;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 5px;
  font-family: var(--f-fam);
  line-height: 30px;
}

.single-serviceedl i {
  position: absolute !important;
  top: 10px;
  right: 5px;
  font-size: 30px;
  z-index: 2 !important;
  -webkit-transition: .3s;
  transition: .3s;
}

.single-serviceedl:hover i {
  color: var(--color-3);
}

/* ********************************
Additional Endorsement on Driving Licenese
********************************** */

/* about-1-sectionaedl */

section.about-1-sectionaedl {
  position: relative;
  padding: 50px 0 50px;
}

.about-1-desc {
  font-size: 18px;
  line-height: 28px;
  color: #797979;
  font-weight: 400;
}

ul.about-1-list {
  line-height: 40px;
  color: var(--color-white-black);
  font-weight: 400;
  font-size: 16px;
}

ul.about-1-list i {
  margin-right: 6px;
  color: #fff;
  font-size: 10px;
  position: relative;
  top: 0px;
  border: 1px solid var(--color-3);
  padding: 4px;
  border-radius: 50px;
  background: var(--color-3);
}

ul.about-1-list span {
  font-family: var(--f-fam-p);
}

.about-1-image-wrap {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding-right: 10px;
}

.about-1-icon-box {
  max-width: 343px;
  min-height: 180px;
  background-color: var(--promation);
  width: 100%;
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 30px;
  padding-left: 130px;
  border: 1px solid var(--border1-bgwhite);
}

.about-1-icon {
  position: absolute;
  left: 35px;
  font-size: 60px;
  color: var(--theme-color);
  top: 60px;
}

/* features-areaaedl */
.features-areaaedl {
  position: relative;
  background-color: var(--bgcolor);
  padding: 50px 0px;
}

.features-inneraedl {
  border-radius: 15px;
  margin-bottom: 45px;
}

.features-cardaedl {
  padding: 20px 20px 20px;
  border: solid 1px var(--border1-bgwhite);
  text-align: center;
  background: var(--promation);
  margin: 10px;
}

.features-cardaedl:hover .fc-iconaedl::before {
  height: 100%;
  transition: 0.5s;
  opacity: 1;
}

.fc-iconaedl {
  height: 120px;
  width: 120px;
  border-radius: 68px;
  line-height: 120px;
  margin: auto;
  margin-bottom: 10px !important;
  transition: 0.5s;
  position: relative;
  z-index: 1;
}

.fc-iconaedl::before {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  height: 0;
  width: 100%;
  background-color: #f5b75494;
  border-radius: 68px;
  z-index: -1;
  opacity: 0;
}

.spanaedl {
  height: 80px;
  background-color: var(--color-3);
  width: 80px;
  line-height: 80px;
  display: inline-block;
  border-radius: 50px;
  z-index: 2;
}

.fc-contentaedl {
  padding-top: 0px;
}

/* quality-areaaedl */
.quality-areaaedl {
  position: relative;
  overflow: hidden;
}

.quality-areaaedl .quality-imgaedl img {
  position: absolute;
}

.quality-areaaedl .quality-imgaedl img:nth-child(1) {
  left: 0;
  top: 0;
  height: 100%;
}

.quality-areaaedl .quality-imgaedl img:nth-child(2) {
  left: -111px;
  top: 0;
  height: 100%;
}

.quality-areaaedl .quality-imgaedl img:nth-child(3) {
  bottom: -65px;
  left: 0;
  max-width: 700px;
  z-index: 1;
  animation: quality-ani 8s infinite linear;
}

@keyframes quality-ani {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(0, -40px);
  }

  100% {
    transform: translate(0, 0);
  }
}

.quality-contentaedl {
  max-width: 500px;
  margin-left: auto;
  padding-top: 80px;
  padding-bottom: 100px;
  position: relative;
}

.quality-contentaedl .section-titleaedl {
  text-align: left;
  margin-bottom: 30px;
}

.quality-contentaedl .cmn-btn a {
  padding: 12px 20px;
}

.quality-contentaedl img {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0.1;
  animation: quality-tyre 10s infinite linear;
}

@keyframes quality-tyre {
  0% {
    transform: translate(0px, 0px);
  }

  50% {
    transform: translate(-100px, 0px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

@media only screen and (max-width: 767px) {
  .quality-areaaedl {
    padding-bottom: 30px;
  }

  .quality-contentaedl {
    max-width: 100%;
    margin-left: 0;
    padding-top: 50px;
    padding-bottom: 200px;
    text-align: center;
  }
}

@media only screen and (max-width: 767px) {
  .quality-contentaedl .section-titleaedl {
    text-align: center;
  }
}

@media only screen and (max-width: 767px) {
  .quality-areaaedl .quality-imgaedl img:nth-child(1) {
    display: none;
  }

  .quality-areaaedl .quality-imgaedl img:nth-child(2) {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  .quality-areaaedl .quality-imgaedl img:nth-child(3) {
    bottom: -50px;
    left: 0;
    max-width: 100%;
    z-index: 1;
  }
}

/******************
 Transfer Vehicle
********************/

/* develop-skill develop-skill--two */
.develop-skill {
  padding-top: 50px;
  padding-bottom: 50px;
  position: relative;
  overflow: hidden;
}


.develop-skill__left__item {
  height: 510px;
  position: relative;
  width: auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top left;
  margin-right: 52px;
}

@media (max-width: 1400px) {
  .develop-skill__left__item {
    margin-left: auto;
  }
}

@media only screen and (max-width: 991px) {
  .develop-skill__left__item {
    margin-left: auto;
    height: 450px;
    margin-left: 0px;
    width: 100%;
  }
}

.develop-skill__left__item__inner {
  position: absolute;
  bottom: 25px;
  left: 40px;
}

.develop-skill__left__item__inner__item {
  max-width: 405px;
  width: 100%;
}

.develop-skill__left__item__inner__item__icon {
  font-size: 70px;
  color: var(--drivschol-white, #fff);
  display: block;
  margin-bottom: 20px;
}

.develop-skill__left__item__inner__link {
  margin-left: 38px;
}

@media only screen and (max-width: 767px) {
  .develop-skill__left__item__inner__link {
    margin-left: 0;
  }
}

.develop-skill__left__item__inner__link__btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--drivschol-black2, #111117);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.4s ease-in-out;
  font-size: 30px;
}

.develop-skill__left__item__inner__link__btn i {
  color: var(--drivschol-white, #fff);
  font-size: 16px;
  transition: all 0.4s ease-in-out;
}

@media only screen and (max-width: 767px) {
  .develop-skill__left__item__inner__link__btn {
    margin-top: 20px;
    width: 50px;
    height: 50px;
    margin-left: 0;
  }

  .develop-skill__left__item__inner__link__btn i {
    font-size: 12px;
  }
}

.develop-skill__left__item__inner__link__btn:hover {
  background-color: var(--drivschol-white, #fff);
}

.develop-skill__left__item__inner__link__btn:hover i {
  color: var(--drivschol-black2, #111117);
}

.develop-skill__left__item::before {
  content: "";
  width: 100%;
  height: 275px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, #f5b754d9 36.46%, rgba(236, 37, 38, 0) 170.55%);
  clip-path: polygon(0 0, 100% 35%, 100% 100%, 0% 100%);
}

@media only screen and (max-width: 991px) {
  .develop-skill__left__item::before {
    height: 65%;
  }
}

.d-s__right__content__item {
  display: flex;
  gap: 20px;
}

@media (max-width: 575px) {
  .d-s__right__content__item {
    gap: 10px;
  }
}

.d-s__right__content__item__icon .icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--color-3);
  display: flex;
  justify-content: center;
  transition: all 0.4s ease-in-out;
  align-items: center;
}

.d-s__right__content__item__icon .icon i {
  font-size: 20px;
  color: #fff;
}

@media (max-width: 575px) {
  .d-s__right__content__item__icon {
    margin-bottom: 20px;
  }
}

.d-s__right__content__item:hover .icon {
  background-color: var(--drivschol-black2, #111117);
}

.d-s__right__content__item+.d-s__right__content__item {
  margin-top: 12px;
}

.develop-skill::before {
  content: "";
  width: 60%;
  height: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -2;
  background-color: var(--bgcolor);
}

@media only screen and (max-width: 991px) {
  .develop-skill::before {
    display: none;
  }
}

.develop-skill__shape-one,
.develop-skill__shape-two,
.develop-skill__shape-three,
.develop-skill__shape-fore {
  position: absolute;
  z-index: -1;
}

.develop-skill__shape-one {
  top: 20%;
  right: 0;
  animation: scale 4s ease-in-out infinite;
}

.develop-skill__shape-two {
  bottom: 5%;
  right: 10%;
  animation: scale 6s ease-in-out infinite;
}

.develop-skill__shape-three {
  bottom: 0;
  right: 0;
}

.develop-skill__shape-fore {
  top: 0;
  right: 0;
}

@media only screen and (max-width: 991px) {

  .develop-skill__shape-one,
  .develop-skill__shape-two,
  .develop-skill__shape-three,
  .develop-skill__shape-fore {
    display: none;
  }
}

@keyframes scale {
  0% {
    transform: scale(1);
  }

  70% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

/* feature-areatv */
.feature-areatv {
  background-color: #000000;
  position: relative;
  overflow: hidden;
}

.feature-img {
  position: relative;
  background-image: url('/assets/images/Transfer-Vehicletv.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.feature-img::before {
  position: absolute;
  content: '';
  right: -170px;
  top: -70px;
  width: 285px;
  height: 700px;
  background-color: #000000;
  transform: rotate(-19deg);
}

.feature-img img {
  display: none;
}

.feature-shapetv img {
  position: absolute;
  right: 65px;
  bottom: 0;
  opacity: .10;
  animation: process-type 25s infinite linear;
  z-index: 1;
}

.feature-contenttv {
  max-width: 670px;
  margin-right: auto;
  padding-top: 100px;
  padding-bottom: 100px;
  position: relative;
  z-index: 1;
}

.feature-contenttv ul {
  margin: 0;
  padding: 0;
}

.feature-contenttv li {
  list-style-type: none;
  display: block;
  position: relative;
  padding-left: 70px;
  margin-bottom: 40px;
}

.feature-contenttv li:nth-child(1) {
  margin-left: 50px;
}

.feature-contenttv li:nth-child(2) {
  margin-left: 100px;
}

.feature-contenttv li:nth-child(3) {
  margin-bottom: 0;
  margin-left: 150px;
}

.feature-contenttv li i {
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 27px;
  color: #000000;
  background-color: var(--color-3);
  border-radius: 10px;
}

@media only screen and (max-width: 767px) {
  .feature-areatv .feature-contenttv {
    max-width: 100%;
    padding-top: 30px;
    padding-bottom: 50px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .feature-areatv .feature-contenttv ul li:nth-child(1) {
    margin-left: 0;
  }

  .feature-areatv .feature-contenttv ul li:nth-child(2) {
    margin-left: 0;
  }

  .feature-areatv .feature-contenttv ul li:nth-child(3) {
    margin-left: 0;
  }
}

@keyframes process-type {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* work-tv-one */
.work-tv-one {
  position: relative;
  margin: 50px 0px;
}


@media (max-width: 575px) {
  .w-item-pro {
    display: block;
  }

  .w-item-pro__step {
    margin-bottom: 10px;
  }

  .w-item-pro__step::after {
    display: none;
  }

  .w-item-pro__info {
    margin-bottom: 30px;
  }
}

.w-item-pro {
  display: flex;
  gap: 32px;
  align-items: center;
}

.w-item-pro__step {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 156px;
  max-width: 131px;
}

.w-item-pro__step__text,
.w-item-pro__step__number {
  color: var(--drivschol-white, #fff);
  font-family: var(--drivschol-heading-font, "Urbanist", sans-serif);
  font-weight: 800;
  line-height: normal;
  margin-bottom: 0;
}

.w-item-pro__step__text {
  font-size: 16px;
}

.w-item-pro__step__number {
  font-size: 40px;
}

.w-item-pro__step svg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  fill: var(--color-3);
  transition: all 0.4s ease-in-out;
}

.w-item-pro__step::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100px;
  height: 30px;
  background: var(--bgcolor);
  z-index: -1;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.w-item-pro:nth-child(2),
.w-item-pro:nth-child(3) {
  margin-top: -10px;
}

.w-item-pro:nth-child(2) .w-item-pro__step,
.w-item-pro:nth-child(3) .w-item-pro__step {
  color: #111117;
}

.w-item-pro:nth-child(2) .w-item-pro__step svg {
  fill: #000;
}

.w-item-pro:hover .w-item-pro__step__text,
.w-item-pro:hover .w-item-pro__step__number {
  color: var(--drivschol-white, #fff);
}

.w-item-pro:hover svg {
  fill: var(--color-3);
}

/* ***************
Bike training
******************/

/* aboutusbike_one */
.aboutusbike_one {
  margin: 50px 0px;
}

.prt_single_image-wrapper {
  position: relative;
}

.prt_single_image-wrapper .prt_single_image_text {
  font-size: 18px;
  line-height: 32px;
  transform: rotate(180deg);
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
  position: absolute;
  writing-mode: vertical-lr;
  text-orientation: sideways;
  top: 25%;
  left: -14px;
  padding: 20px 12px;
  letter-spacing: 2px;
  background-color: var(--color-3);
  font-family: var(--f-fam);
  -webkit-transition-delay: .35s;
  transition-delay: .35s;
  color: #fff;
  border-radius: 6px;
  z-index: 2;
  font-weight: 500;
  bottom: 25%;
}

.prt_single_image-wrapper img {
  border-radius: 15px;
}

.section_biketitle {
  position: relative;
}

.title-header {
  padding-left: 25px;
  display: inline-block;
  position: relative;
}

.title-header::after {
  display: block;
  position: absolute;
  content: "";
  background-color: var(--color-3);
  width: 5px;
  height: 100%;
  top: 0;
  left: 0;
}

/* twm-w-chooseus-section-wrap */
.twm-w-chooseus-section-wrap {
  margin: 50px 0px;
  /* background: var(--bgcolor);
  padding: 50px 0px; */
}

.section-head.left {
  margin-bottom: 30px;
}

.twm-list-icon-style1 ul {
  list-style: none;
  margin: 0px 30px 0px 26px;
  position: relative;
  z-index: 1;
}

@media screen and (max-width:670px) {
  .twm-list-icon-style1 ul {
    margin: 0px 10px 0px 10px;
  }
}

.twm-list-icon-style1 ul li {
  border: 1px solid var(--border-bgwhite);
}

.twm-list-icon-style1 ul li:first-child .twm-list-icon-style-bx {
  border-radius: 20px 20px 0px 0px;
}

.twm-list-icon-style-bx {
  display: flex;
  background-color: var(--bgcolor);
  padding: 20px 20px 20px 0px;
  box-shadow: var(--box-shadow1);
}

.twm-list-icon-style-bx .twm-icon-bx {
  margin-right: 20px;
  margin-left: -20px;
}

.twm-list-icon-style-bx .twm-icon-bx span {
  background-color: var(--promation);
  padding: 15px;
  width: 70px;
  height: 70px;
  min-width: 70px;
  border: 1px solid var(--border1-bgwhite);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px 0px 0px 20px;
}

.twm-list-icon-style1 ul:after {
  content: "";
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 120px;
  background-color: var(--color-3);
  z-index: -1;
  border-radius: 0px 20px 20px 0px;
}

.twm-w-chooseus-media {
  position: relative;
  z-index: 1;
}

.twm-w-chooseus-media .twm-media {
  padding-top: 50px;
  padding-right: 40px;
}

.twm-w-chooseus-media .twm-media img {
  width: 85%;
  border-radius: 50px;
}

.twm-need-help-bx {
  background-color: var(--promation);
  position: absolute;
  left: 0px;
  bottom: 0px;
  display: flex;
  align-items: center;
  padding: 10px 40px 10px 15px;
  border-radius: 0px 20px 0px 0px;
  border: 1px solid var(--border1-bgwhite);
}

.twm-need-help-bx .twm-need-help-content {
  text-align: right;
}

.twm-need-help-bx .twm-title {
  font-size: 38px;
  font-weight: 700;
}

.twm-need-help-bx .twm-need-help-icon {
  padding-left: 20px;
}

.twm-w-chooseus-media::after {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 400px;
  height: 600px;
  background-color: var(--color-3);
  content: "";
  border-radius: 50px 50px 0px 0px;
  z-index: -1;
}

@media (max-width: 767px) {
  .twm-w-chooseus-media .twm-media {
    padding-top: 30px;
    padding-right: 0px;
  }
}

@media (max-width: 575px) {
  .twm-need-help-bx {
    position: relative;
    right: auto;
    bottom: auto;
    border-radius: 0px;
  }

  .twm-w-chooseus-media::after {
    width: auto;
  }
}

/* feature-biketraining */

.feature-biketraining {
  background: var(--bgcolor);
  position: relative;
  padding: 50px 0px;
}

.box-training {
  text-align: center;
  margin: 0px;
  padding: 30px 0px 0px;
}

.box-training .feature-ico {
  margin-bottom: 15px;
  display: block;
}

.box-training h4 {
  margin-bottom: 15px;
}

.features-middle-img {
  padding: 15px 30px 0px;
  position: relative;
  text-align: center;
}

.features-middle-img img {
  max-height: 500px;
}

.circle-animation-training {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 300px;
  max-height: 300px;
  z-index: 0;
  opacity: 0.15;
  background: var(--color-3);
}

.circle-animation-training:before,
.circle-animation-training:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 10px solid var(--color-3);
  border-radius: 50%;
}

.circle-animation-training:before {
  animation: circleripple 4s linear infinite;
}

.circle-animation-training:after {
  animation: circleripple 4s linear 2s infinite;
}

.circle-animation-training.animated {
  opacity: 0 !important;
}

@keyframes circleripple {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.3);
    opacity: 1;
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@media only screen and (max-width: 1199px) {
  .circle-animation-training {
    max-width: 200px;
    max-height: 200px;
  }
}

@media only screen and (max-width: 1365px) {
  .features-middle-img {
    padding: 60px 0px 0px;
  }
}

@media only screen and (max-width: 991px) {
  .circle-animation-training {
    top: 57%;
  }

  .features-middle-img img {
    max-height: 300px;
  }
}

/* ***************
Car training
******************/

/* car-tr-full */
.car-tr-full {
  margin: 50px 0px;
}

.twm-cart-left {
  position: relative;
  padding: 0px 0px 140px 0px;
}

.twm-cart-left .twm-media {
  max-width: 534px;
  position: relative;
}

.twm-cart-left .twm-media img {
  width: 100%;
  border-radius: 100px 100px 0px 0px;
}

.twm-cart-left .twm-media .twm-abus-video {
  background-color: var(--promation);
  width: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
  border-radius: 20px 0px 0px 20px;
  position: absolute;
  right: 0px;
  top: 136px;
  border: 1px solid var(--border1-bgwhite);
}

.twm-abus-video i {
  border-radius: 50px;
  border: 1px solid var(--border1-bgwhite);
  padding: 10px;
  color: var(--color-3);
}

.twm-abus-year-section {
  position: absolute;
  right: 0px;
  top: 0px;
}

.twm-abus-year-section .tem-abus-year-content {
  text-align: right;
  position: absolute;
  left: 20px;
  top: 36px;
  transform: rotate(-90deg);
  transform-origin: bottom center;
}

.twm-abus-year-section span {
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-white-black);
  letter-spacing: 2px;
  font-family: var(--f-fam-p);
}

.twm-abus-year-section .year-title {
  font-size: 80px;
  color: var(--color-3);
  line-height: 70px;
  font-weight: 900;
  margin-bottom: 0px;
  font-family: var(--f-fam);
}

.twm-cart-left .twm-media2 {
  position: absolute;
  bottom: 0px;
  left: 0px;
}

@media (max-width: 1199px) {
  .twm-abus-year-section {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    background-color: var(--promation);
    padding: 20px;
    border-radius: 0px 0px 20px 0px;
    display: inline-table;
  }

  .twm-abus-year-section .tem-abus-year-content {
    position: relative;
    left: inherit;
    top: inherit;
    transform: none;
    transform-origin: inherit;
    text-align: left;
  }
}

@media (max-width: 767px) {
  .twm-cart-left {
    padding: 0px 0px 80px 0px;
  }

  .twm-abus-year-section .year-title {
    font-size: 60px;
    color: var(--color-3);
    line-height: 40px;
  }
}

@media (max-width: 575px) {
  .twm-cart-left .twm-media img {
    border-radius: 50px 50px 0px 0px;
  }
}

@media (max-width: 575px) {
  .car-tr-full ul li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .car-tr-full ul.about-1-list span {
    line-height: 26px;
  }
}


/* ct-sectintwo */
.ct-sectintwo {
  background-color: #0B0B0B;
  padding: 120px 0px;
}

.twm-two-ct-section-wrap {
  position: relative;
  z-index: 1;
}

.twm-two-ct-section-wrap .twm-half-bg-pic {
  position: absolute;
  right: 0px;
  bottom: 0px;
  top: 0px;
  height: 100%;
  width: 50vw;
  background-size: cover;
  z-index: -1;
}

.two-icon-style-left {
  display: flex;
  align-items: start;
  align-items: center;
}

.two-icon-style-left.large-set .twm-media {
  min-width: 80px;
  width: 80px;
  height: 80px;
  margin-right: 18px;
  background-color: var(--color-3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border-radius: 20px 20px 0px 0px;
}

.two-icon-style-left.large-set .twm-media img {
  width: auto;
}

.two-icon-style-left .twm-media img {
  width: auto;
  max-width: 48px;
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(72deg) brightness(107%) contrast(103%);
}

.twm-title {
  font-size: 20px;
  font-weight: 600;
  font-family: var(--f-fam);
  color: #fff;
}

/* process-section-ct */
.process-section-ct {
  position: relative;
  padding: 80px 0px;
}

.process-section-ct .left-column .inner-ct {
  position: relative;
  display: block;
  margin-right: 30px;
}

.process-section-ct .left-column .inner-ct .sec-title {
  margin-bottom: 43px;
}

.process-section-ct .left-column .inner-ct .image-box {
  position: relative;
  display: block;
  margin-bottom: 33px;
}

.process-section-ct .left-column .inner-ct .image-box .image {
  position: relative;
  display: block;
}

.process-section-ct .left-column .inner-ct .image-box .image img {
  width: 100%;
  border-radius: 20px;
}


.process-section-ct .right-column .inner-ct .single-item {
  position: relative;
  display: block;
  max-width: 370px;
  margin-bottom: 35px;
}

.process-section-ct .right-column .inner-ct .single-item:nth-child(2) {
  margin-left: 200px;
}

.process-section-ct .right-column .inner-ct .single-item .count-text {
  position: absolute;
  top: -9px;
  right: 0px;
  font-size: 115px;
  line-height: 100px;
  font-family: 'Lexend', sans-serif;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  text-shadow: -1px -1px 0 #e8eaed, 1px -1px 0 #e8eaed, -1px 1px 0 #e8eaed, 1px 1px 0 #e8eaed;
}

.process-section-ct .right-column .inner-ct .single-item .icon {
  position: relative;
  margin-bottom: 27px;
}


.process-section-ct .right-column .inner-ct .single-item .arrow-shape {
  position: absolute;
  right: -174px;
  top: 42px;
  width: 145px;
  height: 130px;
  background-repeat: no-repeat;
}

.process-section-ct .right-column .inner-ct .single-item .arrow-shape-2 {
  position: absolute;
  left: -200px;
  top: 23px;
  width: 145px;
  height: 130px;
  background-repeat: no-repeat;
}

.process-section-ct .right-column .inner-ct .btn-box .theme-btn {
  padding: 13px 40px;
}

.process-section-ct .right-column .inner-ct .btn-box {
  padding-top: 10px;
}

@media only screen and (max-width: 991px) {
  .process-section-ct .left-column .inner-ct {
    margin-right: 0px;
    margin-bottom: 40px;
  }
}

@media only screen and (max-width: 499px) {
  .process-section-ct .right-column .inner-ct .single-item .count-text {
    font-size: 90px;
  }
}

@media only screen and (max-width: 1200px) {

  .process-section-ct .inner-ct .single-item .arrow-shape,
  .process-section-ct .inner-ct .single-item .arrow-shape-2 {
    display: none;
  }
}

@media only screen and (max-width: 1200px) {
  .process-section-ct .right-column .inner-ct .single-item:nth-child(2) {
    margin-left: 0px;
  }
}