/* General Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; background: #f2f2f2; } /* Container for Swipers */ .container { max-width: 1200px; margin: 0 auto; display: flex; gap: 30px; padding: 20px; } .image-swiper-container { width: 60%; } .text-swiper-container { width: 40%; } .image-swiper img { width: 100%; height: 400px; object-fit: cover; border-radius: 10px; } .text-content { padding: 30px; background: #f5f5f5; height: 400px; display: flex; flex-direction: column; justify-content: center; border-radius: 10px; } .text-content h2 { margin-bottom: 20px; color: #333; font-size: 24px; } .text-content p { color: #666; line-height: 1.6; } @media (max-width: 768px) { .container { flex-direction: column; } .image-swiper-container, .text-swiper-container { width: 100%; } } /* Logos Section */ .logos { width: 100%; overflow: hidden; padding: 40px 0; background: white; position: relative; } .logos-slide { display: flex; gap: 40px; animation: scroll 30s linear infinite; animation-play-state: running; /* Default state: running */ } .logos-slide img { height: 50px; object-fit: contain; transition: transform 0.3s ease; } .logos-slide img:hover { transform: scale(1.1); } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }