/* Reset */

*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:Arial, Helvetica, sans-serif;}
.navbar{width:100%;background:#fff;display:grid;grid-template-columns:3fr 5fr;grid-gap:10px;padding:7px 10px;box-shadow:0 2px 10px rgba(0,0,0,.08);position:relative;}
.logo img{height:60px;display:block;}
#menu-toggle{display:none;}

/* Navigation */

.navlinks{width:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-gap:20px;}
.navlinks li a{text-decoration:none;color:#333;font-size:16px;font-weight:600;transition:.3s;}
.navlinks li a:hover{color:#0077ff;}


.lander{
    position:relative;
    width:100%;
    height:80vh;
    overflow:hidden;
}

.slides{
    width:100%;
    height:100%;
    position:relative;
}

.slide{
    position:absolute;
    width:100%;
    height:100%;
    opacity:0;
    transition:opacity 1s ease-in-out;
}

.slide.active{
    opacity:1;
}

.slide img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.slide::after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.45);
}

.overlay{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    color:#fff;
    z-index:2;
    width:90%;
}

.overlay h1{
    font-size:3rem;
    margin-bottom:15px;
}

.overlay p{
    font-size:1.2rem;
    margin-bottom:25px;
}

.btn{
    display:inline-block;
    padding:12px 30px;
    background:#ff6600;
    color:#fff;
    text-decoration:none;
    border-radius:5px;
    transition:.3s;
}

.btn:hover{
    background:#e65100;
}

@media(max-width:768px){

    .lander{
        height:60vh;
    }

    .overlay h1{
        font-size:2rem;
    }

    .overlay p{
        font-size:1rem;
    }
}