* {
    margin:0;
    padding:0;
    font-family:'Montserrat';
}

html {
    scroll-behavior: smooth;
  }

#header {
    min-height:100vh;
    width:100%;
    background-image:linear-gradient(rgba(126, 126, 126, 0.75), rgba(0, 0, 0, 0.75)), url(../img/banner.jpg);
    background-position:center;
    background-size:cover;
    position:relative;
}

nav {
    display:flex;
    padding:2% 6%;
    justify-content:space-between;
    align-items:center;
}

nav img {
    height:200px;
}

.nav-links {
    flex:1;
    text-align:right;
}

.nav-links ul li {
    list-style:none;
    display:inline-block;
    padding:8px 12px;
    position:relative;
}

.nav-links ul li a {
    color:#FFF;
    text-decoration:none;
    font-size:18px;
}

.nav-links ul li::after {
    content: '';
    width:0%;
    height:2px;
    background:#285CAA;
    display:block;
    margin:auto;
    transition:0.5s;
}

.nav-links ul li:hover::after {
    width:100%;
}

.text-box {
    width:90%;
    color:#FFF;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    text-align:center;
}

.text-box h1 {
    margin-top:80px;
    font-size:62px;
    text-transform:uppercase;
}

.text-box p {
    margin:10px 0 40px;
    font-size:42px;
    color:#FFF;
    text-transform:uppercase;
}

.link {
    display:inline-block;
    text-decoration:none;
    color:#FFF;
    border:1px solid #FFF;
    padding:12px 34px;
    font-size:13px;
    background:transparent;
    position:relative;
    cursor:pointer;
    text-transform:uppercase;
    letter-spacing:2px;
}

.link:hover {
    border:1px solid #285CAA;
    background:#285CAA;
    transition:1s;
}

nav .fa {
    display:none;
}

@media (max-width:700px) {
    .text-box h1 {
        font-size:22px;
    }

    .text-box p {
        font-size:15px;
    }

    nav img {
        height:80px;
        margin-top:30px;
    }

    .nav-links ul li {
        display:block;
    }

    .nav-links {
        position:absolute;
        background:#285CAA;
        height:100vh;
        width:200px;
        top:0;
        right:-200px;
        text-align:left;
        z-index:2;
        transition:1s;
    }

    nav .fa {
        display:block;
        color:#FFF;
        margin:10px;
        font-size:22px;
        cursor:pointer;
    }

    .nav-links ul {
        padding:30px;
    }
}



/* ------ FOOTER ------ */

footer {
    height:auto;
    background-color:rgba(0, 68, 255, 0.158);
}

.footer-h1 {
    font-size:11px;
    font-weight:500;
    font-family:'Montserrat';
    text-align:center;
    padding:3px 0;
    color:#383838;
}

@media screen and (max-width:480px) {
    footer {
        height:auto;
    }
}

@media screen and (max-width:768px) {
    footer {
        height:auto;
    }
}

@media screen and (max-width:960px) {
    footer {
        height:auto;
        padding:3px;
    }
}