/* Hero start*/
.hero__v6 {
  padding: 10rem 0 !important;
}
.hero__v6 .hero-subtitle {
  background-color: rgb(219, 178, 100);
  color: var(--bs-primary);
  display: inline-block;
  padding: 5px 12px;
  border-radius: 7px;
  font-weight: 650;
  font-size: 0.8rem;
  margin-bottom: 10px;
}

.hero__v6 .hero-title {
  font-size: 26px;
}
@media (max-width: 1199.98px) {
  .hero__v6 .hero-title {
    font-size: 28px;
  }
}
@media (max-width: 991.98px) {
  .hero__v6 .hero-title {
    font-size: 30px;
  }
}
.hero__v6 .logos .logos-title {
  font-size: 12px;
  letter-spacing: 1px;
  color: color-mix(in srgb, var(--bs-primary), transparent 10%);
}

.hero__v6 .logos img {
  width: 200px;
}
.hero__v6 .logos {
  text-align: center;
  margin-top: 3rem;
  justify-content: center;
}

.hero__v6 .logos-slider {
  display: flex;
  justify-content: center;
  text-align: center;
}
.hero__v6 .hero-img {
  position: relative;
}
.hero__v6 .hero-img .img-main {
  position: relative;
  z-index: 9;
}
.hero__v6 .hero-img .img-card {
  z-index: 10;
  border-radius: 20px;
  -webkit-box-shadow: 0 15px 40px 0 rgba(var(--bs-black-rgb), 0.1);
          box-shadow: 0 15px 40px 0 rgba(var(--bs-black-rgb), 0.1);
  position: absolute;
  max-width: 600px;
  bottom: -40px;
  left: -60px;
}
@media (max-width: 1100px) {
  .hero__v6 .hero-img .img-card {
    left: 10px;
    max-width: 380px;
  }
}
@media (max-width: 900px) {
  .hero__v6 .hero-img .img-card {
    left: 10px;
    max-width:600px;
  }
}
.hero__v6 .logos-slider {
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* Track of logos that moves */
.hero__v6 .logos-track {
  display: flex;
  gap: 45px;
  width: max-content; /* makes sure it doesn't shrink */
  animation: swapLogos 6s ease-in-out infinite alternate;
  justify-content: center; /* keeps centered */
}

/* Logos inside */
.hero__v6 .logos-track img {
  height: 50px;
  width: auto;
  object-fit: contain;
  filter: grayscale(20%);
  transition: filter 0.3s ease;
}

.hero__v6 .logos-track img:hover {
  filter: grayscale(0);
}

/* Keyframes for infinite scrolling */
/* @keyframes scrollLogos {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
} */
/* Hero end*/