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

.hero-section{

    position:relative;
    width:100%;
    height:600px;
    overflow:hidden;
}

/* HERO SLIDER */

.hero-slider{

    position:relative;
    width:100%;
    height:100%;
}

/* SLIDES */

.hero-slide{

    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    visibility:hidden;
    transition:opacity 1s ease;
}

.hero-slide.active{

    opacity:1;
    visibility:visible;
    z-index:5;
}

/* BACKGROUND */

.hero-bg{

    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    animation:heroZoom 12s ease-in-out infinite;
}

/* DARK OVERLAY */

.hero-overlay{

    position:absolute;
    inset:0;
    background:
    linear-gradient(
        to right,
        rgba(0,0,0,.65),
        rgba(0,0,0,.18)
    );
}

/* CONTENT */

.hero-content{

    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    z-index:10;
}

.hero-content .container{

    width:100%;
    max-width:1400px;
    margin:0 auto;
    padding-left:140px;
    display:flex;
    align-items:center;
    height:100%;
}
/* TEXT */

.hero-text{

    max-width:620px;
    color:#fff;
    margin-top:-120px;
    text-align:left;
}

/* SMALL TEXT */

.hero-small{

    display:inline-block;
    font-size:14px;
    letter-spacing:10px;
    margin-bottom:28px;
    text-transform:uppercase;
    font-weight:500;
    opacity:.92;
}

/* TITLE */

.hero-title{

    font-size:82px;
    line-height:.95;
    font-weight:800;
    letter-spacing:-3px;
    margin-bottom:25px;
    text-transform:uppercase;
    text-shadow:0 4px 20px rgba(0,0,0,.45);
}
/* SUBTITLE */

.hero-subtitle{

    font-size:20px;
    font-weight:300;
    line-height:1.9;
    letter-spacing:3px;
    margin-bottom:42px;
    color:rgba(255,255,255,.88);
    text-transform:uppercase;
    max-width:520px;
}

/* BUTTON */

.hero-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:60px;
    padding:0 40px;
    border-radius:12px;
    background:#ff6b00;
    color:#fff;
    text-decoration:none;
    font-size:18px;
    font-weight:700;
    border:none;
    transition:.35s;
}

.hero-btn:hover{

    background:#111;
    color:#fff;
    border-color:#111;
    transform:translateY(-3px);
    box-shadow:0 16px 40px rgba(0,0,0,.25);
}

/* ZOOM EFFECT */

@keyframes heroZoom{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.06);
    }

    100%{
        transform:scale(1);
    }
}

/* RESPONSIVE */

@media(max-width:768px){

    .hero-section{

        height:520px;
    }

    .hero-title{

        font-size:48px;
    }

    .hero-subtitle{

        font-size:16px;
    }

    .hero-small{

        font-size:12px;
        letter-spacing:4px;
    }

    .hero-btn{

        height:52px;
        padding:0 28px;
        font-size:16px;
    }
}