:root {
    --theme-color: #9e2988;
    --theme-color2: #462f94;
}
.bg-dark{
  background-color: #090c2b !important;
}
html, body{
  height: 100%;
}
[v-cloak] {
  display: none !important;
}
.vueHide{
  display: none;
}
.form-control:focus {
  touch-action: manipulation;
}
.nav-link:focus {
  outline: 0;
  box-shadow: 0px !important
}
.dropdown-menu {
  box-shadow: none;
  border: none !important;
  box-shadow: 0px !important
}

.dropdown-menu:focus, .nav-link:focus-visible , .dropdown-toggle:focus-visible{
  outline: none;
  box-shadow: 0px !important
}
.nav-item .nav-link:focus-visible{
  box-shadow: 0px !important
}
.btn:focus {
  outline: none;
  box-shadow: none;
}
.form-select:focus, .form-control:focus{
  box-shadow: none !important;
}
.form-control:focus{
  border-color: var(--theme-color);
}
.text-primary {
  color: var(--theme-color) !important;
}
.bg-primary{
  background-color: var(--theme-color) !important ;
  color: #fff;
}
.btn-primary {
  background-color: var(--theme-color) !important ;
  border-color:var(--theme-color) !important  ;
}
.btn-white{
  background-color: #fff !important;
}
.btn-primary:hover, .btn-white:hover{
  opacity: 0.8 !important;
}
.dropdown-item {
  display: block;
  width: 100%;
  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
  clear: both;
  font-weight: 400;
  color: var(--bs-dropdown-link-color);
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  border-radius: var(--bs-dropdown-item-border-radius, 0);
}
.dropdown-item:hover, .dropdown-item:focus {
  color: var(--bs-dropdown-link-hover-color);
  background-color: var(--bs-dropdown-link-hover-bg);
}
.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: var(--theme-color);
}
.dropdown-item.disabled, .dropdown-item:disabled {
  color: var(--bs-dropdown-link-disabled-color);
  pointer-events: none;
  background-color: transparent;
}
body {
  font-family: 'Roboto', sans-serif;
  background-position-y: -600px;
  background-position-x: -600px;
  background-repeat: no-repeat;
  font-size: 15px;
  background-color: #f3f8fb;
  color: #666;
}
.navbar-nav-custom .nav-item{
  padding:10px 0px !important;
  margin: 0px 20px;
  position: relative;
  font-weight: 400;
  font-size: 16px;
}
.navbar-nav-custom .nav-link{
  color:#111
}
.navbar-nav-custom> .nav-item::after{
  width: 100%;
  height: 3px;
  display: block;
  content: '';
  position: absolute;
  top: -3px;
  opacity: 0;
  background-color: var(--theme-color);
  transition: all 0.3s;
}
.navbar-nav-custom> .nav-item:hover::after, .nav-item.active::after{
  color: var(--theme-color) !important;
  top: 45px;
  opacity: 1;
}
.nav-link:focus, .nav-link:hover, .nav-item.active .nav-link{
  color: var(--theme-color) !important;
}
.navbar-nav-custom> .nav-item.dropdown::after{
  width: 100%;
  height: 0px;
  display: block;
  content: '';
  background-color: var(--theme-color);
}
.fixed-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  background-color: #ffffff6e;
  box-shadow: rgb(0 0 0 / 18%) 0px 7px 29px 0px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: background-color 0.3s ease-in-out; /* Add transition effect for smooth color change */
}

.fw-light {
  font-weight:300 !important}

.fw-normal {
  font-weight:400 !important}

.fw-medium{
  font-weight:500 !important
}
.fw-semibold{
  font-weight:600!important
}
.fw-bold{
  font-weight:700!important
}
.text-theme{
  color: var(--theme-color);
}
.text-white{
  color:#fff !important
}
.text-theme2{
  color: var(--theme-color2);
}
.fs-12{
  font-size:12px!important
}
.fs-13{
  font-size:13px!important
}
.fs-14{
  font-size:14px!important
}
.fs-15{
  font-size:15px!important
}
.fs-16{
  font-size:16px !important
}
.fs-18{
  font-size:18px!important
}
.fs-20{
  font-size:20px!important
}
.fs-28{
  font-size:28px!important
}
.fs-22{
  font-size:22px!important
}
.fs-24{
  font-size:24px!important
}
.fs-30{
  font-size:30px!important
}
.fs-36{
  font-size:36px!important
}
.fs-38{
  font-size:38px!important
}
.fs-40{
  font-size:40px!important
}
.lineheight-2{
  line-height:2
}
.lineheight-1{
  line-height:1.5
}
.letter-spacing-1{
 letter-spacing: 1px;
}
.letter-spacing-2{
  letter-spacing: 2px;
 }
.section-padding-Y{
  padding: 60px 0px;
}
hr{
  border-top: 1px solid #aaa !important;
}
.border-radius-2{
  border-radius:15px
}

.border-radius-3{
  border-radius:25px
}
.border-radius-4{
  border-radius:35px
}
.border-radius-5{
  border-radius:45px
}
.bg-section{
  background-color:#f1f1f3
}
.bg-theme-2{
  background-color:var(--theme-color2);
}
.rounded-bottom-0{
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  -webkit-border-bottom-left-radius: 0px;
  -webkit-border-bottom-right-radius: 0px;
  -moz-border-bottom-left-radius: 0px;
  -moz-border-bottom-right-radius: 0px;
}
.form-control::placeholder{
  color: #9f9f9f;
  font-weight: 400;
}
.shadow-custom{
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
}
/* for error css */
input.error{
  border: 1px solid red;
}
label.error, .errorMsg{
  color: red;
  padding: 5px;
  display: block;
  font-size: 13px;
  font-weight: 400 !important;
}
.showError{
  display: block !important;
}

.transaction-summary td{
  padding: 2px 4px;
  font-size: 14px;
}
.transaction-summary td strong{
  font-weight: 500 !important;
}
.homeBannerTitle{
  font-size:64px; 
  line-height:1;
  font-weight: 700;
}
.social-link a{
  display: flex !important;
  align-items: center;
  background-color: var(--theme-color);
  width: 40px;
  height: 40px;
  align-self: center!important;
  border-radius: 5px;
  margin-right: 5px;
  transition: all 0.2s ease-in-out;
  color: #fff !important;
  font-size: 18px;
  line-height: 1;
}
.social-link a:hover{
  opacity: 0.8;
  color: var(--theme-color) !important;
  background-color: #fff;
}
/* .social-link a:hover img{
  filter: invert(87%) sepia(8%) saturate(7355%) hue-rotate(328deg) brightness(101%) contrast(99%);
  https://isotropic.co/tool/hex-color-to-css-filter/ 
}*/
.social-link a span{
  width: 100%;
  text-align: center;
}

.social-link a img{
  max-height: 22px;
}
.homeBanner{
  background:url('../img/3000/img_lorry.png') no-repeat;
  background-position: 100% center;
  background-size:contain
}
.bannerOption{
  padding: 60px 0px;
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: scroll;
  background-image: url('../img/header_bg_about.jpg');
}
.overlayBg{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;
}
.instantBookingSelector{
  border-radius: 5px;
  background-color: #fff;
  padding: 5px;
  -webkit-box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  -moz-box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.instantBookingSelector .form-select:focus{
 border: 0px;
}
.instantBookingSelector .input-group, .instantBookingSelector .input-group span, .instantBookingSelector .form-select, .instantBookingSelector .form-control{
  border:  0px;
  background-color: #fff;
}
.location-img-banner{
  min-height: 80px;
}
.location-img{
  top: -20px;
  position: absolute;
  left:70%;
  right: auto;
  width: 400px;
  height: auto;
}
.fast-delivery-img{
  width: 250px;
  height: auto;
}

.swiper {
  width: 100%;
  height: 100%;
  overflow: none;
  position: relative;
}

.swiper-slide-wrap {
  width: 100%;
  position: relative;
  height: 240px !important;
}
.swiper-slide-textwrap {
  position: relative;
  z-index: 3;
}
.swiper-slide-wrap img {
  width: 95%;
  height: auto !important;
  position: absolute;
  bottom: 0px;
}
.swiper-button-next, .swiper-button-prev{
  color: var(--theme-color)!important;
}
.swiper-pagination-bullet-active{
  background-color:var(--theme-color) !important;
}
.swiper-button-prev, .swiper-button-next{
width: 45px !important;
height: 45px;
border-radius: 10px !important;
background-color:var(--theme-color) !important;
color:#fff !important;
}
.swiper-button-prev:after, .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{
  font-size: 16px !important;
}
.lorry-mobile-home{
  position: absolute;
  right: -80px;
  top: -30px;
  margin-bottom: 0px;
}
.skewed {
  position: absolute;
  top: 0px;
  bottom: 0;
  right: 0;
  left: 0px;
  width: 101%;
  height: 150px;
  background: #fff;
  z-index: 0;
  transform: skewY(-10deg);
  transform-origin: top left;
}
button.payment-icons img{
  border: 2px solid #ddd !important;
  transition: all 0.5s;
}
button.payment-icons:hover img{
  border: 2px solid var(--theme-color2) !important
}
.link-section a{
  color: #444;
  text-decoration: none;
  margin-bottom: 8px;
  display: block;
}
.link-section a:hover{
  color:var(--theme-color)
}
.about-app-download a img{
  height: 50px;
}
.list-custom{
  list-style: none;
  padding: 0px;
  margin: 0px;
}
.list-custom li::before{
  content: '-';
  color: #444;
  margin-right: 10px;

}
.list-custom li{
  color: #666;
  margin-bottom: 5px;
}
.services-box img{
  position: relative;
  bottom: -70px;
  left: 0px;
  width: 100%;
}
.table-routes tr td{
  background:none;
  padding: 5px 10px;
}
.custom-swal-title {
  color:var(--theme-color2);
  font-size: 24px;
  font-weight: 600;
}
.custom-swal-text {
  font-size: 16px !important;
}
.custom-swal-button {
  box-shadow: none !important;
  background-color: var(--theme-color2) !important;
}
@media (min-width:1200px){
  .homeBanner{
    background-position: 120% center;
  }
}
@media (max-width:992px){
  .location-img{
    top: -10px;
    left: auto;
    right:-15px;
  }
  .homeBanner{
    background-size: 50%;
    background: none;
  }
  .fast-delivery-img{
    position: absolute;
    left: -35px;
    top: -90px;
    width: 270px;
  }
  .homeBannerTitle{
    font-size:55px; 
    line-height:1
  }
}
@media (max-width:692px){
  .lorry-mobile-home{
    right: -20px;
  }
  .about-app-download a img{
    height: 40px;
  }
}