:root {
--primary: #002e67;
--accent: #ff6b35;
}
body, html { margin: 0; font-family: 'Arial', sans-serif; }
.hero-slider {
position: relative;
width: 100%;
height: 80vh;
overflow: hidden;
color: white;
}
.slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 0.8s ease-in-out;
display: flex;
align-items: flex-start;
padding: 0 10% 10% 0;
}
.slide.active { opacity: 1; z-index: 1; }
.content {
width: 60%;
max-width: 100%;
padding: 50px 50px 50px 100px;
margin-top: 100px;
background-color: rgba(28, 37, 76, 0.85);
border-radius: 2px;
}
.label { text-transform: uppercase; font-weight: bold; font-size: 0.9rem; color: #ccc; }
h1 { font-size: 3.5rem; margin: 20px 0; line-height: 1.1; color: #ffffff; }
.btn {
display: inline-block;
padding: 12px 30px;
border: 2px solid white;
color: white;
text-decoration: none;
font-weight: bold;
transition: 0.3s;
}
.btn:hover { background: white; color: black; }
/* Navigation & Progress Bars */
.slider-nav {
position: absolute;
bottom: 40px;
left: 10%;
right: 10%;
display: flex;
gap: 20px;
z-index: 10;
}
.nav-item {
flex: 1;
cursor: pointer;
opacity: 0.6;
transition: 0.3s;
}
.nav-item.active { opacity: 1; }
.nav-label { font-size: 0.8rem; display: block; margin-bottom: 8px; }
.progress-bar {
height: 3px;
background: rgba(255,255,255,0.3);
position: relative;
}
.fill {
height: 100%;
background: white;
width: 0%;
}
.nav-item.active .fill {
animation: progress 5s linear forwards;
}
@keyframes progress {
from { width: 0%; }
to { width: 100%; }
}
const slides = document.querySelectorAll('.slide');
const navItems = document.querySelectorAll('.nav-item');
const duration = 7000; // 7 seconds per slide
let currentIndex = 0;
let slideInterval;
function showSlide(index) {
slides.forEach(s => s.classList.remove('active'));
navItems.forEach(n => n.classList.remove('active'));
slides[index].classList.add('active');
navItems[index].classList.add('active');
currentIndex = index;
}
function nextSlide() {
let next = (currentIndex + 1) % slides.length;
showSlide(next);
}
// Start auto-slide
function startInterval() {
clearInterval(slideInterval);
slideInterval = setInterval(nextSlide, duration);
}
// Click navigation
navItems.forEach((item, index) => {
item.addEventListener('click', () => {
showSlide(index);
startInterval(); // Reset timer on click
});
});
// Initialize
startInterval();