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

.hero-section {

    position: relative;

    min-height: 100vh;

    overflow: hidden;

    display: flex;

    align-items: center;
}

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

.hero-slider {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}

.hero-slide {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background-size: cover;
    background-position: center;

    opacity: 0;

    transition: opacity 1.5s ease-in-out;

    transform: scale(1.05);
}

.hero-slide.active {

    opacity: 1;
}

/* ======================================================
   OVERLAY
====================================================== */

.hero-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(
        rgba(0,31,61,0.82),
        rgba(0,31,61,0.72)
    );

    z-index: 1;
}

/* ======================================================
   CONTENT
====================================================== */

.hero-content {

    position: relative;

    z-index: 2;

    max-width: 750px;

    color: #ffffff;
}

.hero-subtitle {

    display: inline-block;

    padding: 10px 18px;

    margin-bottom: 20px;

    border-radius: 50px;

    background: rgba(255,255,255,0.12);

    backdrop-filter: blur(10px);

    font-weight: 500;
}

.hero-content h1 {

    font-size: 72px;

    line-height: 1.1;

    margin-bottom: 25px;
}

.hero-content p {

    font-size: 18px;

    max-width: 620px;

    margin-bottom: 35px;
}

.hero-buttons {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;
}