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

.hero{

    position: relative;

    width: 100%;

    height: 100vh;

    min-height: 750px;

    overflow: hidden;

    display: flex;

    align-items: center;

}


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

.hero-slider{

    position: absolute;

    inset: 0;

    z-index: 1;

}

.slide{

    position: absolute;

    inset: 0;

    opacity: 0;

    visibility: hidden;

    transition: opacity 1.5s ease;

}

.slide.active{

    opacity: 1;

    visibility: visible;

}

.slide img{

    width: 100%;

    height: 100%;

    object-fit: cover;

    animation: heroZoom 10s linear infinite;

}


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

.hero-overlay{

    position: absolute;

    inset: 0;

    background: rgba(0,0,0,.55);

    z-index: 2;

}


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

.hero .container{

    position: relative;

    z-index: 3;

}

.hero-content{

    max-width: 700px;

    color: var(--white);

}


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

.hero-subtitle{

    display: inline-block;

    margin-bottom: 20px;

    color: var(--primary);

    font-size: 15px;

    font-weight: 600;

    letter-spacing: 3px;

    text-transform: uppercase;

}


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

.hero-content h1{

    color: var(--white);

    font-size: 64px;

    font-weight: 700;

    line-height: 1.15;

    margin-bottom: 25px;

}


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

.hero-content p{

    color: rgba(255,255,255,.90);

    font-size: 18px;

    line-height: 1.8;

    max-width: 600px;

    margin-bottom: 40px;

}


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

.hero-buttons{

    display: flex;

    align-items: center;

    gap: 20px;

}

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

.scroll-indicator{

    position: absolute;

    left: 50%;

    bottom: 35px;

    transform: translateX(-50%);

    z-index: 5;

}

.scroll-indicator span{

    display: block;

    width: 26px;

    height: 46px;

    border: 2px solid rgba(255,255,255,.7);

    border-radius: 30px;

    position: relative;

}

.scroll-indicator span::before{

    content: "";

    position: absolute;

    left: 50%;

    top: 8px;

    width: 4px;

    height: 8px;

    background: var(--white);

    border-radius: 50px;

    transform: translateX(-50%);

    animation: scrollMouse 2s infinite;

}


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

@keyframes heroZoom{

    from{

        transform: scale(1);

    }

    to{

        transform: scale(1.12);

    }

}


/* ==========================================
   SCROLL ANIMATION
========================================== */

@keyframes scrollMouse{

    0%{

        opacity: 1;

        transform: translate(-50%,0);

    }

    100%{

        opacity: 0;

        transform: translate(-50%,18px);

    }

}