Έξυπνες λύσεις για ένα βιώσιμο μέλλον

.carousel-wrapper { position: relative; max-width: 1200px; margin: auto; overflow: hidden; padding: 80px 60px; }.carousel { display: flex; gap: 30px; transition: transform 0.6s ease; }.card { flex: 0 0 340px; background: white; padding: 25px; text-align: center; border-radius: 10px; opacity: 0.6; transform: scale(0.9); transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease; box-shadow: 0 5px 20px rgba(0,0,0,0.05); }.card.active { transform: scale(1.1); opacity: 1; box-shadow: 0 15px 35px rgba(0,0,0,0.15); }.card img { width: 100%; height: 180px; object-fit: contain; margin-bottom: 15px; }.card h3 { font-size: 1.35rem; color: #0C2D83; margin-bottom: 10px; }.card p { font-size: 1rem; color: #333; margin-bottom: 15px; }.card a { display: inline-block; padding: 10px 25px; background-color: #0C2D83; color: white; text-decoration: none; border-radius: 5px; transition: background-color 0.3s ease; }.card a:hover { background-color: #70BD1F; }.arrow { position: absolute; top: 50%; transform: translateY(-50%); background: #0C2D83; color: white; font-size: 26px; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 100; transition: background 0.3s ease; }.arrow:hover { background: #70BD1F; }.arrow.left { left: 10px; }.arrow.right { right: 10px; }/* Responsividade para telemóveis */ @media (max-width: 768px) { .carousel-wrapper { padding: 40px 20px; }.carousel { gap: 15px; }.card { flex: 0 0 80%; padding: 15px; }.card img { height: 150px; }.card h3 { font-size: 1.1rem; }.card p { font-size: 0.9rem; }.arrow { width: 40px; height: 40px; font-size: 22px; } }const carousel = document.getElementById('carousel'); const cards = carousel.children; let currentIndex = 0;function updateCarousel() { const gap = parseInt(getComputedStyle(carousel).gap) || 0; const cardWidth = cards[0].offsetWidth + gap; const offset = -currentIndex * cardWidth; carousel.style.transform = `translateX(${offset}px)`;Array.from(cards).forEach((card, i) => { card.classList.toggle('active', i === currentIndex); }); }function moveCarousel(direction) { currentIndex += direction; if (currentIndex = cards.length) currentIndex = 0; updateCarousel(); }window.addEventListener('resize', updateCarousel); updateCarousel();