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

.hero {

    position: relative;

    height: calc(100vh - 34px);

    min-height: 680px;

    overflow: hidden;

    color: var(--white);
}


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

.hero-image {

    position: absolute;

    inset: 0;

    background-image:
        url("https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?auto=format&fit=crop&w=2200&q=90");

    background-size: cover;

    background-position: center;

    transform: scale(1.06);

    animation: heroZoom 12s ease-out forwards;
}


@keyframes heroZoom {

    from {
        transform: scale(1.08);
    }

    to {
        transform: scale(1);
    }

}


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

.hero-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(0,0,0,0.68) 0%,
            rgba(0,0,0,0.45) 32%,
            rgba(0,0,0,0.12) 72%,
            rgba(0,0,0,0.20) 100%
        );

}


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

.hero-content {

    position: absolute;

    left: 9%;

    top: 50%;

    transform: translateY(-42%);

    width: min(650px, 80%);

    z-index: 2;
}


/* =========================================
   EYEBROW
========================================= */

.eyebrow {

    margin-bottom: 21px;

    font-size: 10px;

    font-weight: 500;

    letter-spacing: 4px;

    text-transform: uppercase;
}


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

.hero-content h1 {

    margin-bottom: 29px;

    font-family: var(--serif);

    font-size: clamp(62px, 7vw, 105px);

    font-weight: 400;

    line-height: 0.9;

    letter-spacing: -2px;
}


/* =========================================
   DESCRIPTION
========================================= */

.hero-description {

    max-width: 410px;

    margin-bottom: 34px;

    font-size: 14px;

    font-weight: 300;

    line-height: 1.85;

    color: rgba(255,255,255,0.88);
}


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

.hero-buttons {

    display: flex;

    align-items: center;

    gap: 13px;
}


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

.hero-bottom {

    position: absolute;

    left: 55px;

    right: 55px;

    bottom: 32px;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* =========================================
   SCROLL INDICATOR
========================================= */

.hero-scroll {

    display: flex;

    align-items: center;

    gap: 13px;

    font-size: 8px;

    letter-spacing: 2px;

    font-weight: 400;
}

.hero-scroll span {

    display: block;

    width: 35px;

    height: 1px;

    background: rgba(255,255,255,0.7);
}


/* =========================================
   SLIDER COUNTER
========================================= */

.hero-counter {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 9px;

    letter-spacing: 2px;

    color: rgba(255,255,255,0.55);
}

.hero-counter .active {

    color: var(--white);
}


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

@media (max-width: 900px) {

    .hero-content {

        left: 7%;

        width: 85%;
    }

    .hero-content h1 {

        font-size: clamp(58px, 11vw, 85px);
    }

    .hero-bottom {

        left: 25px;

        right: 25px;
    }

}


@media (max-width: 600px) {

    .hero {

        height: calc(100vh - 32px);

        min-height: 650px;
    }

    .hero-image {

        background-position: 63% center;
    }

    .hero-overlay {

        background:

            linear-gradient(
                90deg,
                rgba(0,0,0,0.70) 0%,
                rgba(0,0,0,0.40) 55%,
                rgba(0,0,0,0.15) 100%
            );
    }

    .hero-content {

        top: 53%;

        left: 7%;

        width: 86%;
    }

    .eyebrow {

        margin-bottom: 17px;

        font-size: 8px;

        letter-spacing: 3px;
    }

    .hero-content h1 {

        margin-bottom: 24px;

        font-size: 58px;

        line-height: 0.92;

        letter-spacing: -1px;
    }

    .hero-description {

        max-width: 340px;

        margin-bottom: 27px;

        font-size: 12px;

        line-height: 1.7;
    }

    .hero-buttons {

        flex-direction: column;

        align-items: flex-start;

        gap: 9px;
    }

    .hero-buttons .btn {

        width: 185px;

        min-width: 185px;

        padding: 14px 20px;
    }

    .hero-bottom {

        left: 20px;

        right: 20px;

        bottom: 22px;
    }

    .hero-counter {

        display: none;
    }

}