header{
    position: fixed;
    width: 100%;
    height: auto;
    margin: 0 auto;
    /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)); */
    background:linear-gradient(180deg, rgb(62, 62, 62), transparent);
    color: white;
    background-size: cover;
    opacity: 0.8;
}

nav{
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    width: 95%;
    height: auto;
    /* max-width: 1100px; */
    margin: 0 auto;
    padding: 20px 0;

}

.lines{
    /* size: 50px; */
    font-size: 25px;
}

.nav-ul{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 30px;
    width: 75%;
    padding-left: 20px;
}

ul{
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-li{
    padding: 10px;

    width: auto;
}

.nav-li a{
    color: white;
    font-family: 'Kanit', sans-serif;

    /* font-size: 12px;
    font-weight: 600;
    padding: 10px; */

}

li{
    list-style: none;
    margin: 0 20px;
    /* margin: 20px; */
    background-color: #fff 0;
    
}

.search{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 20%;
    border: 1px transparent;
    /* border-radius: ; */
}

.login-button{
    /* width: 0; */
    background-color: transparent;
    color: white;
    border: 2px solid cyan;
    border-radius: 20px;
    padding: 5px 7px;
    margin-left: 5px;
    /* padding: 0; */
    cursor: pointer;
    font-size: 15px;
    animation-timing-function: ease-in-out;
}


::placeholder{
    color: rgb(223, 222, 222);
    /* padding: px; */
    padding-left: 2px;
    font-size: 12px;

}

.search input{
    width: 100%;
    height: 4vh;
    padding: 10px;
    background-color: grey;
    border: 1px transparent;
    border-radius: 20px;
}

/* .search button{
    width: 30px;
    height: 30px;
    background-color: transparent;
    border: 1px transparent;
    border-radius: 50%;
    margin-left: 10px;
    color: white;
    font-size: 12px;
} */



.nav-li:hover {

    background-color: rgb(77, 147, 233);
    color: #f4f4f4;
    border: 1px transparent;
    border-radius: 20px;

    transition: 0.1s ease-in-out;
}

.nav-li a:hover{
    /* color: white; */
     text-decoration: none;
    /* font-size: 12px; */
    /*font-weight: 600; */
    /* padding: 10px; */
}

.anchor-i i{
    position: absolute;
    right:160px;
    top: 27px;
}


/* login */

.log{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 20%;
    border: 1px transparent;
    /* border-radius: ; */
}
  
/* login   */