.tg-section { max-width: 1200px; margin: 40px auto; padding: 20px; text-align: center; font-family: 'Poppins', sans-serif; width: 100%; box-sizing: border-box; overflow: hidden; } .tg-title { font-size: clamp(24px, 3vw, 28px); font-weight: 600; color: #1e1e1e; margin-bottom: 10px; } .tg-description { font-size: clamp(15px, 2vw, 17px); color: #444; margin-bottom: 35px; font-family: gotham; font-weight: 300; } .tg-cards-scroll { display: flex; flex-wrap: nowrap; gap: clamp(15px, 2vw, 25px); overflow-x: auto; padding: 10px 5px 20px; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scroll-padding: 0 20px; width: 100%; } .tg-card { background: #fff; border-radius: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.06); transition: all 0.3s ease; width: 100%; min-width: calc(100% - 40px); min-height: 450px; height: auto; padding: 15px; box-sizing: border-box; flex-shrink: 0; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; margin: 0 10px; } .tg-card img { width: 100%; max-width: 280px; height: auto; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; } .tg-card h3 { font-size: clamp(18px, 2vw, 20px); color: #333; font-weight: 600; margin: 15px 0 10px; font-family: gotham; color: black; } .tg-card p { font-size: clamp(15px, 2vw, 17px); color: #555; line-height: 1.5; padding: 0 10px; margin-bottom: 15px; flex-grow: 1; } .tg-btn { margin-top: auto; margin-bottom: 10px; background-color: #8ed33f; color: white; padding: 10px 20px; border-radius: 50px; text-decoration: none; font-weight: 600; transition: background-color 0.3s ease; font-size: clamp(14px, 2vw, 16px); display: inline-block; width: max-content; } .tg-btn:hover { background-color: #76b82f; } /* Hide scroll bar */ .tg-cards-scroll::-webkit-scrollbar { display: none; } .tg-cards-scroll { -ms-overflow-style: none; scrollbar-width: none; } /* Desktop styles - multiple cards visible */ @media (min-width: 768px) { .tg-card { width: clamp(280px, 85vw, 345px); min-width: unset; margin: 0; } } /* Auto-scroll animation */ @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-100% - clamp(15px, 2vw, 25px))); } } .auto-scroll { animation: scroll 20s linear infinite; width: max-content; } .tg-cards-scroll:hover .auto-scroll { animation-play-state: paused; } document.addEventListener('DOMContentLoaded', function() { const scrollContainer = document.querySelector('.tg-cards-scroll'); const cards = document.querySelectorAll('.tg-card'); // Clone cards for infinite scroll cards.forEach(card => { const clone = card.cloneNode(true); scrollContainer.appendChild(clone); }); // Enable auto-scroll on mobile function setupAutoScroll() { if (window.innerWidth { if (window.innerWidth { isDown = false; }); scrollContainer.addEventListener('mouseup', () => { if (window.innerWidth { scrollContainer.style.scrollSnapType = 'x mandatory'; }, 100); } }); scrollContainer.addEventListener('mousemove', (e) => { if(!isDown || window.innerWidth >= 768) return; e.preventDefault(); const x = e.pageX - scrollContainer.offsetLeft; const walk = (x - startX) * 2; scrollContainer.scrollLeft = scrollLeft - walk; }); // Touch events for mobile scrollContainer.addEventListener('touchstart', (e) => { if (window.innerWidth { if (window.innerWidth { scrollContainer.style.scrollSnapType = 'x mandatory'; }, 100); } }); scrollContainer.addEventListener('touchmove', (e) => { if(!isDown || window.innerWidth >= 768) return; e.preventDefault(); const x = e.touches[0].pageX - scrollContainer.offsetLeft; const walk = (x - startX) * 2; scrollContainer.scrollLeft = scrollLeft - walk; }, {passive: false}); // Initialize and handle resize setupAutoScroll(); window.addEventListener('resize', setupAutoScroll); // Infinite scroll reset scrollContainer.addEventListener('scroll', function() { if (window.innerWidth this.scrollWidth / 2) { this.scrollLeft -= this.scrollWidth / 2; } }); });