.banner{
    height: 95vh;
    background-image: linear-gradient(
        to right bottom, 
    #0000ccc0, #0f0f8413),
    url(../img/norak-training.jpg);
    background-size: cover;
    background-position: top;

    clip-path: polygon(0 0, 100% 0%, 100% 80%, 0 100%);
    position: relative;
}
.header-box{
    position: absolute;
    top: 45%;
    left: 50%;
     transform: translate(-50%, -50%);
    text-align: center;
}
.heading-primary{
    color: #ffffff;
    text-transform: uppercase;
    backface-visibility: hidden;    
}
.heading-primary-main{
    display: block;
    font-size: 3rem;
    font-weight: 600;
    letter-spacing: .4rem;
    padding-bottom: 1rem;

    animation-name: moveInLeft;
    animation-duration: 3s;
    animation-timing-function: ease-out;
}
.heading-primary-sub{
    display: block;
    font-size: 1.8rem;
    font-weight: 300;
    letter-spacing: .2rem;

    animation-name: moveInRight;
    animation-duration: 3s;
    animation-timing-function: ease-out;
}

@keyframes moveInLeft{
    0%{
        opacity: 0;
        transform: translateX(-100px);
    }
    80%{
        transform: translatex(10px);
    }
    100%{
        opacity: 1;
        transform: translatex(0);
    }
}
@keyframes moveInRight{
    0%{
        opacity: 0;
        transform: translateX(100px);
    }
    80%{
        transform: translatex(-10px);
    }
    100%{
        opacity: 1;
        transform: translatex(0);
    }
}


.btn-white:link,
.btn-white:visited {
    text-transform: uppercase;
    text-decoration: none;
    background-color: #ffffff;
    color: #002266;
    padding: 1rem;
    border-radius: 1rem;
    display: inline-block;

    animation-name: moveInBottom;
    animation-duration: 3s;
}

.btn-white:hover{
   transform: translateY(-3px);
   transition: all .2s;
   box-shadow: 0px 60px 20px rgba(0,0,0, .8);
}

.btn-white:active{
    transform: translateY(-1px);
    transition: all .3s;
}


@keyframes moveInBottom{
    0%{
        opacity: 0;
        transform: translateY(50px);
    }
    80%{
        /* transform: translatex(-10px); */
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}