*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

.banner{
    width: 100%;
    height: 100vh;
    background-image:linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)) ,url("modern-living-room-decor-natural-light.webp");
    background-size: cover;
    /* background-size:This property ensures that the background image covers the entire area of the element, even if it has to be resized This often results in some parts of the image being cropped, but it ensures no empty space is visible. */
    background-position: center;
    /* background-postion:center
    entral Focal Point: Keeps the central part of the image visible, which is often the most important part of the image.
    Visual Balance: Creates a balanced and aesthetically pleasing layout by centering the image. */
}

.navbar{
    width:85%;
    margin: auto;
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo{
    width:4%;
    cursor: pointer;
}

.navbar ul li{
    list-style: none;
    display: inline-block;
    margin: 0 5px;
    font-size: 12px;
    position: relative;
}

.navbar ul li a{
    text-decoration: none;
    color:#fff;
    text-transform: uppercase;

}

.navbar ul li::after {
 content: '';
 height: 3px;
 width: 0;
 background: #009688;
 position: absolute;
 left:0;
 bottom: -5px;
 transition: 0.5s;
}

.navbar ul li:hover::after{
    width: 100%;
}

.content{
    width: 100%;
    position: absolute;
    top: 35%;
    /* transform: translateY(-50%); */
    text-align: center;
    color: #fff;
}

button{
    width: 100px;
    padding: 11px;
    text-align: center;
    margin: 13px 10px;
    border-radius: 25px;
    font-weight: bold;
    border: 2px solid #009688;
    background: transparent;
    color: #fff;
    cursor: pointer;
    font-size: 9px;
    position: relative;
    overflow: hidden;
}

/* span{
    background:#009688;
    height:100%;
    width:0;
    border-radius:25px;
    position: absolute;
    left: 0;
    bottom:0; 
    z-index: -1;
    transition: 0.5s;
} */

/* button:hover span{
    width: 100%;
}

button:hover{
    border:none;
} */