.aerial-header { background: rgba(0, 0, 0, 0.7); padding: 40px 0; margin-top: 60px; } .aerial-header h1 { color: white; text-transform: uppercase; letter-spacing: 2px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } #aerialPhotoSlider { margin: 0; width: 100%; } #aerialPhotoSlider .carousel-item { height: 700px; } #aerialPhotoSlider .carousel-item img { object-fit: cover; height: 100%; width: 100%; } .background-imageAerial { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('../../../../../images/aerialPhoto/aerialPhoto-post.png') center/cover fixed; z-index: -1; opacity: 0.9; } .aerial-service-card { background: rgba(255, 255, 255, 0.9); border-radius: 10px; padding: 20px; margin: 15px 0; transition: transform 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .aerial-service-card:hover { transform: translateY(-5px); } .aerial-service-card h3 { color: #2c3e50; margin-bottom: 15px; } .aerial-advantages { background: rgba(44, 62, 80, 0.85); color: white; padding: 40px 0; margin: 40px 0; } .advantage-item { text-align: center; padding: 20px; } .advantage-item i { font-size: 2.5rem; margin-bottom: 15px; color: #3498db; } .aerial-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; padding: 20px; } .gallery-item { position: relative; overflow: hidden; border-radius: 8px; height: 250px; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .gallery-item:hover img { transform: scale(1.05); } @media (max-width: 768px) { #aerialPhotoSlider .carousel-item { height: 400px; } .aerial-header { padding: 20px 0; } .aerial-header h1 { font-size: 1.8rem; } .aerial-gallery { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } } .fade-in { opacity: 0; animation: fadeIn 1s ease-in forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }