.hero-slider-wrapper { position: relative; overflow: hidden; width: 100%; }
.hero-slide { display: none; background-size: cover; background-position: center; padding: 100px 20px; color: #fff; text-align: center; }
.hero-content h2 { font-size: 2.5rem; animation: fadeInDown 1s; }
.hero-content p { font-size: 1.2rem; animation: fadeInUp 1s; }
.hero-cta { margin-top: 20px; display: inline-block; padding: 10px 20px; background: #fff; color: #000; text-decoration: none; border-radius: 4px; }
.hero-slider-dots { text-align: center; margin-top: 20px; }
.dot { display: inline-block; width: 12px; height: 12px; margin: 0 5px; background: #ccc; border-radius: 50%; cursor: pointer; }
.dot.active { background: #000; }

@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }