/* Reset */

*{margin:0;padding:0;box-sizing:border-box;}
html{
    scroll-behavior:smooth;
}
body{font-family:Arial, Helvetica, sans-serif;background:#F8FAFC;position:relative;}
body.menu-open{overflow:hidden;}
.navbar{width:100%;background:#fff;display:grid;grid-template-columns:3fr 5fr;grid-gap:10px;padding:10px 100px;box-shadow:0 2px 10px rgba(0,0,0,.08);position:fixed;top:0;left:0;z-index:1000;}
.logo img{height:60px;display:block;}

/* Navigation */

.navlinks{width:100%;display:grid;grid-template-columns:1fr 1.2fr 1.5fr 1fr 1fr;grid-gap:20px;margin-top:20px;}
.navlinks li a{text-decoration:none;color:#003B6D;font-size:16px;font-weight:600;transition:.3s;padding:7px 10px;}
.navlinks li a:hover{color:#333;}
.menubtn{display:none;}

.intro{height:250px;width:100%;text-align:center;background:linear-gradient(to right, rgba(0,0,0,.85), rgba(0,0,0,.35)), url("../images/bg1.jpg");
    background-size:cover;background-position:center;padding-top:120px;}
.intro h1{font-size:42px;color:#fff;}

footer{width:100%;padding:30px 100px;background:#222;display:grid;grid-template-columns:repeat(3, 1fr);grid-gap:30px;}
footer div{display:block;width:100%;}
footer div p,footer div h4{}
footer div h4{color:#fff;font-size:24px;margin-bottom:20px;}
footer div p{color:#fff;margin-bottom:10px;}
footer div ul{display:block;width:100%;padding:left:10px;}
footer div ul li{margin-bottom:10px;}
footer div ul li a{color:#fff;}
footer img{display:block;width:100%;max-width:250px;margin-bottom:30px;}

@media (max-width:768px){
    .navbar{padding:10px 20px;display:block;}
    .navlinks{display:none;}
    .menubtn{display:block;position:absolute;top:20px;right:20px;color:#333;font-size:30px;cursor:pointer}
    
    .overlaynav {height: 0%;width: 100%;position: fixed;z-index: 1000;top: 0%;left: 0%;background-color: rgb(0,0,0);background-color: rgba(0,0,0, 0.9);overflow-y: hidden;transition: 0.5s;}
    .overlaynav-content {position: relative;top: 25%;width: 100%;text-align: center;margin-top: 30px;}
    .overlaynav a {padding: 8px;text-decoration: none;font-size: 36px;color: #818181;display: block;transition: 0.3s;}
    .overlaynav a:hover, .overlay a:focus {color: #f1f1f1;}
    .overlaynav .closebtn {position: absolute;top: 20px;right: 45px;font-size: 60px;}
    
    .intro{height:250px;padding-top:120px;}
    .intro h1{font-size:32px;color:#fff;}

    footer{padding:30px 20px;grid-template-columns:repeat(2, 1fr);}
}

@media (max-width:480px){
    footer{grid-template-columns:1fr;}
}