/* =========================================
           4. HERO SLIDER
           ========================================= */
           .hero-slider {
            height: 100vh;
            width: 100%;
        }

        .swiper-slide {
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            position: relative;
        }

        .hero-overlay {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.5);
        }

        .hero-content {
            position: relative;
            z-index: 2;
            color: white;
            max-width: 600px;
            padding-left: 10%;
        }

        .hero-container {
            padding: 0 6%;
            margin-top: 70px;
        }

        .hero-content h1 {
            font-size: 4rem;
            line-height: 1.1;
            margin-bottom: 20px;
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease 0.3s;
        }

        .hero-content p {
            font-size: 1.2rem;
            margin-bottom: 30px;
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease 0.5s;
        }

        .hero-content .btn {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease 0.7s;
        }

        .swiper-slide-active .hero-content h1,
        .swiper-slide-active .hero-content p,
        .swiper-slide-active .hero-content .btn {
            opacity: 1;
            transform: translateY(0);
        }

        .swiper-pagination-bullet { background: white; opacity: 0.5; }
        .swiper-pagination-bullet-active { background: var(--primary-yellow); opacity: 1; }
        .swiper-button-next, .swiper-button-prev { color: white; }

#home h2 {
    font-family: 'Lilita One', cursive;
    font-size: 6.25rem;
    line-height: 1.1;
    letter-spacing: 3px;
    margin-bottom: 30px;
    text-align: center;
}

#home p {

        font-size: 1.75rem;
        font-weight: 400;
        margin-bottom: 0;

}

.hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.header-phone {border-radius: 1rem;}

.header-phone a {
    font-size: 1.65rem !important;
    color: #f7be27 !important;

}


.header-phone:hover > a {
    font-size: 1.65rem !important;
   
}