.logo-marquee {
  animation: scroll 25s linear infinite;
}
.logo-marquee:hover { animation-play-state: paused; }

@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.logo-img {
  filter: grayscale(100%) opacity(.75);
  transition: filter .3s;
}
.logo-img:hover { filter: grayscale(0%) opacity(1); }


/* === Key Features spacing & hover === */
#key-features { /* ya tiene py‑5, mt‑5 agrega margen externo */
	top:100px;
	position:relative;
}

/* Animación de icono al pasar el mouse */
#key-features .card i {
  transition: color .3s, transform .3s;
}
#key-features .card:hover i {
  color: var(--bs-primary);       /* resalta */
  transform: scale(1.15) rotate(5deg);
}

/* Opcional: “levantar” la tarjeta */
#key-features .card {
  transition: transform .3s, box-shadow .3s;
}
#key-features .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.15);
}

.custom-hr-gradient {
  border: 0;
  height: 2px;
  background: linear-gradient(to right, #0d6efd, #6f42c1); /* Bootstrap primary to purple */
  margin: 2rem 0;
  opacity: 0.8;
  border-radius: 1px;
}
#request-demo-btn {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 40px;
  padding-right: 40px;
  font-size: 18px !important;
  font-weight: 600;
}
#why-choose-us, #client-logos, #call-to-action {
    top:100px !important;
	position:relative;
}