.logos {
	position: relative;
	padding: 120px 0;
	text-align: center;
	overflow: hidden;
}

.logos .title {
	display: block;
	text-align: center;
	color: #000;
	font-size: 44px;
	font-style: normal;
	font-weight: 700;
	line-height: 50px; 
	margin: 0 auto 32px auto;
}

.logos .title span {
	color: #8DD3BF;
}

.logos .subtitle {
	display: block;
	text-align: center;
	color: #000;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
	width: 100%;
	max-width: 400px;
	margin: 0 auto 72px auto;
}

.logos-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.logos-scroll {
    display: flex;
    animation: scrollLogos 20s linear infinite;
    /* Prevent animation from jumping */
    white-space: nowrap;
    gap: 80px;
}

.logo {
	position: relative;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    height: 80px;
    width: 150px;
}

.logo img {
	position: absolute;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

@keyframes scrollLogos {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Optional: Pause animation on hover */
.logos-scroll:hover {
    animation-play-state: paused;
}

@media only screen and (max-width: 996px) {
	.logos {
		padding: 80px 0 40px 0;
	}

	.logos .subtitle { 
		margin-bottom: 48px;
	}

	.logos .logo {
		width: 80px;
		height: 30px;
	}

	.logos .title {
		font-size: 32px;
		font-style: normal;
		font-weight: 700;
		line-height: 42px;
	}

	.logos .subtitle {
		font-size: 18px;
		font-style: normal;
		font-weight: 400;
		line-height: 24px;
	}

	.logos-scroll {
		gap: 40px;
	}
}