@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');

.audiowide-regular {
  font-family: Audiowide, sans-serif;
  font-weight: 400;
  font-style: normal;
}

.header .logo h1.sitename{
  font-family: 'Audiowide';
  /* color: red; */
}

.header .logo h1.delarubSubtitulo{
  position: absolute;
  font-size: 1rem;
  white-space: nowrap;
  margin-top: 28px;
  margin-left: 12px;
}


@media (width <= 1250px) {
  .header .logo h1.delarubSubtitulo{
    font-size: 0.75rem;
    white-space: nowrap;
    margin-top: 30px;
    margin-left: 40px;
  }
}

div.dlrbLogo{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background-size: contain;
  background-repeat:no-repeat;
  background-position: center;
  max-height: 400px;
  min-height: auto;
  text-shadow: 0.2px 0.2px 0px rgb(0, 0, 0);;
}

#dlrbGroup{
  background-image: 
  linear-gradient(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.65)),
  url("../img/logoGROUP.png");
}
#dlrbTransport{
  background-image: 
  linear-gradient(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.65)),
  url("../img/logoTRANSPORT.png");
}
#dlrbLogistics{
  background-image: 
  linear-gradient(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.65)),
  url("../img/logoLOGISTICS.png");
}
#dlrbLLC{
  background-image: 
  linear-gradient(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.65)),
  url("../img/logoLLC.png");
}

/* Container to limit the scroll width */
.logo-container {
	--logo-width: 200px;
	--logo-height: 100px;
	--gap: calc(var(--logo-width) / 14);
	--duration: 60s;
	--scroll-start: 0;
	--scroll-end: calc(-100% - var(--gap));

	display: flex;
	flex-direction: column;
	gap: var(--gap);
  margin-top: 50px;
	max-width: 100vw;
}

/* Scrolling area */
.logo-scroll {
	display: flex;
	overflow: hidden;
	user-select: none;
	gap: var(--gap);
	mask-image: linear-gradient(
		to right,
		hsl(0 0% 0% / 0),
		hsl(0 0% 0% / 1) 30%,
		hsl(0 0% 0% / 1) 70%,
		hsl(0 0% 0% / 0)
	);
}
.logo-scroll__wrapper {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: var(--gap);
	min-width: 100%;
	animation: scroll var(--duration) linear infinite;
}
/* 
.logo-scroll__wrapper:nth-child(even) {
	margin-left: calc(var(--logo-width) / 2);
} */

.logo-scroll:hover .logo-scroll__wrapper {
  animation-play-state: paused;
}


/* Logo styling */
.logo-item {
	width: var(--logo-width); /* Adjust for logo size */
	height: var(--logo-height); /* Adjust for logo size */
	/* transition: transform 0.5s; Smooth scaling effect */
	background-color: rgb(255, 255, 255);
	border-radius: 4px;
  background-size: contain;
  background-repeat:no-repeat;
  background-position: center;
}

#imgCarusel1{
  background-image:url("../img/logoGROUP.png");
}

.logo-scroll .logo-item:hover {
	transform: scale(1.05); /* Scale logo on hover */
}

/* Infinite scroll animation */
@keyframes scroll {
	from {
		transform: translateX(var(--scroll-start));
	}
	to {
		transform: translateX(var(--scroll-end));
	}
}