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

.hero-section{
    position:relative;
    min-height:750px;
    overflow:hidden;
    display:flex;
    align-items:center;
    background:#000;
}

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

.hero-bg{
    position:absolute;
    inset:0;
    z-index:1;
}

.hero-bg img{
    width:100%;
    height:100%;
    object-fit:cover;

    animation:bgZoom 18s ease-in-out infinite alternate;
}

@keyframes bgZoom{
    from{
        transform:scale(1);
    }
    to{
        transform:scale(1.08);
    }
}

/* Dark overlay */

.hero-bg:after{
    content:"";
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.55) 0%,
        rgba(0,0,0,.25) 45%,
        rgba(0,0,0,.05) 100%
    );
}

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

.hero-content{
    position:relative;
    z-index:5;
    width:100%;
    /* max-width:1400px;
    padding:0 7%; */
    margin:auto;
    
}

/* ==========================================
   GREEN BANNER
========================================== */

.hero-banner{
    position:relative;
    display:inline-block;
    opacity:0;
    animation:
    heroSlideIn 1.2s ease-out forwards;
    animation-delay:.3s;
}

@keyframes heroSlideIn{

    from{
        opacity:0;
        transform:translateX(-80px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }
}

/* Shadow Layer */

.hero-banner-shadow{
    position:absolute;
    left: -30px;
    top:25px;
    width:100%;
    height:100%;
    background:#7cd96a;
    opacity:.35;
    clip-path:polygon(
        0 0,
        100% 0,
        88% 100%,
        0 100%
    );
}

/* Main Layer */

.hero-banner-main{

    position:relative;
    background:#58b947 !important;
    padding:40px 100px;
    max-width:700px;
    clip-path:polygon(
        0 0,
        100% 0,
        90% 100%,
        0 100%
    );
    box-shadow:
    0 20px 50px rgba(0,0,0,.25);
}

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

.hero-banner-main h1{

    color:#fff;
    font-size:45px;
    line-height:1.05;
    /* margin:0 0 20px; */
    font-weight:700;
    opacity:0;
    animation:textReveal .8s ease forwards;
    animation-delay:.8s;
}

.hero-banner-main p{

    color:#fff !important;
    font-size:20px;
    line-height:1.7;
    margin-bottom:35px;
    max-width:500px;
    opacity:0;
    animation:textReveal .8s ease forwards;
    animation-delay:1.1s;
}

.hero-btn{

    display:inline-block;
    padding:15px 32px;
    background:#fff;
    color:#58b947;
    text-decoration:none;
    font-weight:600;
    border-radius:4px;
    transition:.3s;
    opacity:0;
    animation:textReveal .8s ease forwards;
    animation-delay:1.4s;
}

.hero-btn:hover{

    transform:translateY(-3px);

    box-shadow:
    0 10px 25px rgba(0,0,0,.2);
}

@keyframes textReveal{

    from{
        opacity:0;
        transform:translateY(30px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ==========================================
   ARROW
========================================== */

.hero-arrow{
    position:absolute;
    right:20%;
    top:20%;
    width:520px;
    z-index:4;
    opacity:0;
    filter:
    drop-shadow(0 0 15px rgba(88,185,71,.35))
    drop-shadow(0 0 40px rgba(88,185,71,.20));
    animation:
    arrowEntrance 1.8s cubic-bezier(.19,1,.22,1) forwards,
    floatArrow 5s ease-in-out infinite 1.8s;
}

@keyframes arrowEntrance{

    0%{
        opacity:0;

        transform:
        translateY(250px)
        translateX(-120px)
        scale(.7)
        rotate(-10deg);
    }

    70%{
        opacity:1;
    }

    100%{
        opacity:.95;

        transform:
        translateY(0)
        translateX(0)
        scale(1)
        rotate(0deg);
    }
}

@keyframes floatArrow{

    0%{
        transform:
        translateX(0)
        translateY(0);
    }

    50%{
        transform:
        translateX(20px)
        translateY(-15px);
    }

    100%{
        transform:
        translateX(0)
        translateY(0);
    }
}

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

@media(max-width:1024px){

    .hero-section{
        min-height:650px;
    }

    .hero-banner-main{
        max-width:550px;
        padding:50px;
    }

    .hero-banner-main h1{
        font-size:52px;
    }

    .hero-banner-main p{
        font-size:18px;
    }

    .hero-arrow{
        width:340px;
        right:0;
        top:28%;
    }
}

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

@media(max-width:768px){

    .hero-section{

        min-height:auto;
        padding-top:210px;
        /* padding-bottom:50px; */
        align-items:flex-start;
    }

    .hero-bg{
        height:300px;
    }

    /* .hero-content{
        padding:0 20px;
    } */

    .hero-banner-main{
        padding:10px 30px;
        max-width:100%;
    }

    .hero-banner-main h1{
        font-size:36px;
        line-height:1.15;
    }

    .hero-banner-main p{
        font-size:16px;
        line-height:1.6;
    }

    .hero-btn{
        width:100%;
        text-align:center;
    }

    .hero-arrow{
        width:240px;
        top:30%;
        right:15%;
        opacity:.75;
    }
}

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

@media(max-width:480px){

    .hero-banner-main{
        padding:10px 25px;
    }

    .hero-banner-main h1{
        font-size:30px;
    }

    .hero-banner-main p{
        font-size:15px;
    }

    .hero-arrow{
        width:140px;
        top:50px;
    }
}