*{

    margin: 0;

    padding: 0;

    font-family: sans-serif;

}

.banner{

    width: 100%;

    height: 100vh;

    background-image: url(assouline-6.jpg);

    background-size: cover;

    background-position: center;

}

.navbar{

    width: 85%;

    margin: auto;

    padding: 35px 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.navbar ul li{

    list-style: none;

    display: inline-block;

    margin: 0 20px;

    position: relative;

    left: 300px;

}

.navbar ul li a{

    text-decoration: none;

    color: #fff;

}

.navbar ul li::after{

    content: '';

    height: 3px;

    width: 0;

    background: white;

    position: absolute;

    left: 0;

    bottom: -10px;

    transition: 0,5s;

}

.navbar ul li:hover::after{

    width: 100%;

}

.content{

    width: 100%;

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    text-align: center;

    color: azure;

}

.content h1{

    font-size: 70px;

    margin: 80px;

}

.content p{

    margin: 20px auto;

    font-weight: 100;

    line-height: 25px;

    color: #fff;

}

button{

    width: 200px;

    padding: 15px;

    text-align: center;

    margin: 20px 10px;

    border-radius: 25px;

    font-weight: bold;

    border: 2px solid #fff;

    background: transparent;

    color: #fff;

    cursor: pointer;

    position: relative;

    overflow: hidden

}

span{

    background: #70c5ec;

    height: 100%;

    width: 100%;

    border-radius: 25px;

    position: absolute;

    left: 0;

    bottom: 0;

    z-index: -1;

}

botton:hover span{

    width: 100px;

}

botton:hover{

    border: none;

}

.content2{

    width: 100%;

    text-align: center;

    color: black;

}