/* dots / pagination */ .slider-dots position: absolute; bottom: 1.8rem; left: 0; right: 0; display: flex; justify-content: center; gap: 0.8rem; z-index: 20;
/* hero slider wrapper */ .hero-slider position: relative; width: 100%; overflow: hidden; border-radius: 1.8rem;
.hero-content .category display: inline-block; font-size: 0.85rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(8px); padding: 0.4rem 1rem; border-radius: 40px; color: #fff; margin-bottom: 1.2rem; border: 1px solid rgba(255,255,255,0.3); hero slider codepen
/* each slide */ .slide flex: 0 0 100%; position: relative; min-height: 550px; height: 70vh; background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: flex-start; transition: transform 0.3s;
.btn-outline:hover background: rgba(255,255,255,0.25); transform: translateY(-3px); border-color: white; /* dots / pagination */
.dot.active background: #ffffff; width: 32px; border-radius: 20px; box-shadow: 0 0 8px rgba(255,255,255,0.6);
// clear both auto timers and progress timer function stopAutoRotation() if (autoInterval) clearInterval(autoInterval); autoInterval = null; if (progressInterval) clearInterval(progressInterval); progressInterval = null; .hero-content .category display: inline-block
.btn-primary, .btn-outline display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.8rem; border-radius: 50px; font-weight: 600; font-size: 0.95rem; transition: all 0.25s ease; cursor: pointer; text-decoration: none; backdrop-filter: blur(4px); border: none;