#home {
    position: relative;
    height: 100vh;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    background-size: cover;
    background-position: center;
}
.hero-slide.active { opacity: 1; }
.hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }

.hero-content { position: relative; z-index: 10; text-align: center; color: var(--white); }
.hero-content h1 { font-size: 8rem; margin-bottom: 10px; }
.hero-content h2 { font-size: 2.2rem; letter-spacing: 8px; text-transform: uppercase; font-family: 'Poppins', sans-serif; font-weight: 300 !important }

.dots-container {
    position: absolute;
    bottom: 40px;
    display: flex;
    gap: 12px;
    z-index: 20;
}
.dot {
    width: 12px; height: 12px;
    background: rgba(255,255,255,0.4);
    border: none; border-radius: 50%;
    cursor: pointer; transition: 0.4s;
}
.dot.active { width: 45px; border-radius: 10px; background: var(--white); }

@media (max-width: 768px) {
    #home {
        height: 70vh;
        width: 100%;
        overflow: hidden;
    }

    .hero-content h1 {
        font-size: 2.8rem !important;
        white-space: normal;
        line-height: 1.2;
    }

    .hero-content h2 {
        font-size: 0.9rem !important;
        letter-spacing: 3px;
    }

    .dots-container {
        bottom: 20px;
        width: 100%;
        justify-content: center;
    }
}

.slide-1 { background-image: url('../public/herobg1.jpg'); }
.slide-2 { background-image: url('../public/herobg2.jpg'); }
.slide-3 { background-image: url('../public/herobg3.jpg'); }
.slide-4 { background-image: url('../public/herobg4.jpg'); }

.hero-slide {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}