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

.hero{

    position:relative;

    min-height:100vh;

    overflow:hidden;

    display:flex;

    align-items:center;

    padding-top:90px;
}

/* ========================================
BACKGROUND
======================================== */

.hero-bg{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
}

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

.hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    90deg,
    rgba(0,0,0,.68) 0%,
    rgba(0,0,0,.52) 40%,
    rgba(0,0,0,.15) 100%
    );

    z-index:1;
}

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

.hero-content{

    position:relative;

    z-index:5;

    width:100%;

    max-width:640px;

    margin-left:7%;

    margin-top:0;
}

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

.hero-title{

    color:#fff;

    font-size:56px;

    line-height:.95;

    font-weight:900;

    letter-spacing:-3px;

    margin-bottom:24px;

    text-transform:uppercase;
}

/* ========================================
TEXT
======================================== */

.hero-text{

    color:#fff;

    font-size:18px;

    line-height:1.8;

    max-width:520px;

    opacity:.9;

    margin-bottom:36px;
}

/* ========================================
BUTTON
======================================== */

.hero-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:#E14514;

    color:#fff;

    padding:
    15px
    28px;

    border-radius:999px;

    font-weight:700;

    font-size:15px;

    transition:.3s ease;
}

.hero-button:hover{

    transform:translateY(-3px);

    background:#cf3d10;
}

/* ========================================
SOCIAL
======================================== */

.social-icons{

    position:absolute;

    left:90px;

    bottom:50px;

    display:flex;

    gap:18px;

    z-index:10;
}

.social-icons a{

    color:#fff;

    font-size:22px;

    transition:.3s ease;
}

.social-icons a:hover{

    color:#E14514;

    transform:translateY(-3px);
}

/* ========================================
LARGE DESKTOP
======================================== */

@media(min-width:1600px){

.hero-content{

    max-width:760px;

    margin-left:100px;
}

.hero-title{

    font-size:72px;
}

.hero-text{

    font-size:20px;

    max-width:560px;
}

}

/* ========================================
LAPTOP
======================================== */

@media(max-width:1400px){

.hero-content{

    max-width:580px;
}

.hero-title{

    font-size:50px;
}

.hero-text{

    font-size:17px;
}

}

/* ========================================
TABLET
======================================== */

@media(max-width:992px){

.hero{

    align-items:flex-start;

    padding-top:70px;
}

.hero-content{

    margin-left:50px;

    margin-top:120px;

    max-width:520px;
}

.hero-title{

    font-size:44px;

    line-height:1;
}

.hero-text{

    font-size:16px;

    line-height:1.7;

    max-width:420px;
}

.social-icons{

    left:50px;

    bottom:35px;
}

}

/* ========================================
MOBILE
======================================== */

@media(max-width:768px){

.hero{

    min-height:720px;

    align-items:flex-start;

    padding-top:60px;
}

.hero-overlay{

    background:
    linear-gradient(
    to bottom,
    rgba(0,0,0,.75),
    rgba(0,0,0,.35)
    );
}

.hero-content{

    margin-left:24px;

    margin-top:110px;

    max-width:320px;
}

.hero-title{

    font-size:38px;

    line-height:1.02;

    letter-spacing:-1px;

    margin-bottom:20px;
}

.hero-text{

    font-size:15px;

    line-height:1.7;

    max-width:300px;

    margin-bottom:32px;
}

.hero-button{

    padding:
    14px
    24px;

    font-size:14px;
}

.social-icons{

    left:24px;

    bottom:28px;

    gap:14px;
}

.social-icons a{

    font-size:18px;
}

}

/* ========================================
SMALL MOBILE
======================================== */

@media(max-width:480px){

.hero-content{

    max-width:260px;
}

.hero-title{

    font-size:32px;

    line-height:1.05;
}

.hero-text{

    font-size:14px;

    line-height:1.6;
}

.hero-button{

    width:auto;

    padding:
    12px
    20px;

    font-size:13px;
}

}