nav{
max-width:1200px;
height:60px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 15px;
}

.logo{
font-size:30px;
font-weight:bold;
color:#2563eb;
}

/* MENU */

.menu{
list-style:none;
display:flex;
}

.menu li{
position:relative;
}

.menu li a{
display:block;
padding:18px 15px;
text-decoration:none;
color:#222;
font-weight:600;
}

.menu li a:hover{
color:#1877f2;
}

.menu li a i{ font-size: 18px; font-weight: 600;}
/* DESKTOP DROPDOWN */

.dropdown{
position:absolute;
top:100%;
left:-10px;
min-width:250px;
background:#fff;
list-style:none;
box-shadow:0 10px 30px rgba(0,0,0,.1);
border-top: 3px solid #1877f2;
opacity:0;
visibility:hidden;
transform:translateY(10px);
transition:.3s;
}

.menu li:hover .dropdown{
opacity:1;
visibility:visible;
transform:translateY(0);
}

.dropdown li a{
padding:10px 18px;
border-bottom: 1px solid #c8c8c8;
}

.dropdown li a:hover{
background:#f5f5f5;
}

/* RIGHT AREA */

.right-area{
display:flex;
align-items:center;
gap:20px;
}

.search{
font-size:22px;
cursor:pointer;
}

.menu-btn{
display:none;
font-size:30px;
cursor:pointer;
}

/* CLOSE BUTTON */

.close-btn{
display:none;
}

/* OVERLAY */

.overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.8);
opacity:0;
visibility:hidden;
transition:.3s;
z-index:998;
}

.overlay.show{
opacity:1;
visibility:visible;
}

/* MOBILE */

@media(max-width:768px){

.menu-btn{
display:block;
}

.menu{
position:fixed;
top:0;
left:-320px;
width:300px;
height:100vh;
background:#123583;
flex-direction:column;
overflow-y:auto;
transition:.4s;
z-index:9999;
}

.menu.active{
left:0;
}

.close-btn{
display:block;
color:#fff;
font-size:30px;
text-align:right;
padding:8px 20px;
cursor:pointer;
}

.menu li{
width:100%;
}

.menu li a{
color:#fff;
padding:12px 20px;
border-bottom: 1px solid rgba(255,255,255,0.35);
}

.menu li a i{
float:right;
}

/* MOBILE DROPDOWN */

.dropdown{
position:static;
background:#f0f7ff;
box-shadow:none;
border-radius:0;
opacity:1;
visibility:visible;
transform:none;
max-height:0;
overflow:hidden;
transition:max-height .4s ease;
border-top: 0px solid #1877f2;
}

.mobile-drop.open .dropdown{
max-height:400px;
}

.dropdown li a{
padding-left:40px;
color:#414141;
border-bottom: 1px solid #7f9cdd;
}

/* Disable desktop hover */

.menu li:hover .dropdown{
opacity:1;
visibility:visible;
transform:none;
}

}