@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

* {
    box-sizing: border-box;
    outline: none;
    scroll-behavior: smooth;
    font-family: "DM Sans", sans-serif;
}

img,
button,
iframe,
a {
    user-select: none;
}

.fadeIn {
    animation: fadeIn 0.5s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.myShadow {
    box-shadow: rgba(100, 100, 111, 0.082) 0px 7px 29px 0px;
}

input:user-invalid {
    border: 1.5px solid rgba(255, 0, 0, 0.416);
}

.homeBanner1 {
    background: linear-gradient(rgba(0, 0, 0, 0.39), rgba(0, 0, 0, 0.39)), url("/docs/assets/images/DSC_6211.JPG") center/cover no-repeat;
}

.homeBanner2 {
    background: linear-gradient(rgba(0, 0, 0, 0.39), rgba(0, 0, 0, 0.39)), url(/docs/assets/images/car\ \(2\).jpg) center/cover no-repeat;
}

.fleetBanner {
    background: linear-gradient(rgba(0, 0, 0, 0.616), rgba(0, 0, 0, 0.623)), url("/docs/assets/images/DSC_6235.JPG")  center/cover no-repeat;
}

.carBg {
    background: linear-gradient(rgba(0, 0, 0, 0.692), rgba(0, 0, 0, 0.705)), url(/docs/assets/images/car\ \(3\).jpg) center/cover no-repeat;
}

.vehicles {
    background: linear-gradient(rgba(0, 0, 0, 0.603), rgba(0, 0, 0, 0.555)), url(/docs/assets/images/car\ \(8\).jpg) center/cover no-repeat;
    /* background-attachment: fixed; */
}

/* swiper fleet */

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
}

.swiper {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}

.swiper-slide {
    background-size: cover;
    background-position: center;
}

.mySwiper2 {
    height: 80%;
    width: 100%;
}

.mySwiper {
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0;
}

.mySwiper .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
}

.mySwiper .swiper-slide-thumb-active {
    opacity: 1;
}

.swiper-pagination-bullet{
        background: var(--swiper-pagination-bullet-inactive-color, #efc360) !important;
}

  .slide-in-left {
    animation: slideFromLeft 1s ease-out forwards;
  }

  @keyframes slideFromLeft {
    from {
      transform: translateX(-100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  .slide-in-right {
    animation: slideFromright 1s ease-out forwards;
  }

  @keyframes slideFromright {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }