/* ========================================
   HERO
======================================== */

.hero {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    min-height: 82vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    color: var(--color-white) !important;
    text-align: left !important;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

/* Slider*/
.hero .n2-ss-slider-wrapper,
.hero .n2-ss-slider {
    height: 82vh !important;
    width: 100% !important;
}

/* Overlay*/
.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
    pointer-events: none;
}

/* Contenedor del texto */
.hero-text {
    position: absolute;
    left: 5%;
    z-index: 20;
    color: var(--color-white);
    text-align: left;
}

.hero-text h1 {
    font-size: clamp(1.8rem, 5vw, 4rem) !important;
    font-weight: bold !important;
    max-width: 800px !important;
    line-height: 1.2;
}

.hero-text p {
    margin-top: 1rem !important;
    font-size: clamp(1rem, 2.5vw, 2rem) !important;
    max-width: 800px !important;
}

/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 768px) {
    .hero {
      min-height:60vh !important;
    }
  
    .hero .n2-ss-slider-wrapper,
    .hero .n2-ss-slider {
        height: 60vh !important;
    }

    .hero-text {
        left: 1.5rem;
    }
}