/*=============================
TOP HEADER
=============================*/

.top-header{

display:flex;
justify-content:space-between;
align-items:center;

padding:18px 16px;

background:linear-gradient(
90deg,
#4fd1c5,
#8bc34a,
#ffb300,
#ff6d00,
#ff006e
);

}

/*=============================
SEARCH
=============================*/

.search-box{

width:760px;

}

.search-box form{

display:flex;

}

.search-box input{

flex:1;

height:48px;

padding:0 16px;

border:none;

font-size:16px;

outline:none;

background:#fff;

}

.search-box button{

width:115px;

border:none;

background:#1976d2;

color:#fff;

font-size:16px;

font-weight:700;

cursor:pointer;

}

/*=============================
RIGHT
=============================*/

.header-right{

display:flex;

align-items:center;

gap:12px;

}

.social-icons{

display:flex;

gap:8px;

}

.social-icons a{

width:34px;

height:34px;

border-radius:50%;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

text-decoration:none;

color:#e91e63;

font-size:15px;

}

.login-btn,
.signup-btn{

background:#fff;

padding:8px 16px;

border-radius:5px;

text-decoration:none;

font-weight:700;

color:#e91e63;

}

/*=============================
NAVBAR
=============================*/

.navbar{

background:#1876b8;

}

.navbar ul{

margin:0;

padding:0 24px;

display:flex;

align-items:center;

list-style:none;

}

.navbar li{

margin-right:34px;

}

.navbar a{

display:block;

padding:18px 0;

color:#fff;

text-decoration:none;

font-size:15px;

font-weight:700;

letter-spacing:.5px;

text-transform:uppercase;

}

.navbar a:hover{

opacity:.85;

}