/* ===== NAVBAR ===== */

.navbar{
position:sticky;
top:0;
background:#000;
height:100px;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 25px;
z-index:9999;
}

.logo img{
height:90px;
}

/* MENU */

.navbar ul{
display:flex;
gap:25px;
list-style:none;
margin:0;
padding:0;
}

.navbar ul li{
position:relative;
}

.navbar ul li a{
color:#fff;
text-decoration:none;
font-weight:600;
}

.navbar ul li a:hover{
color:#ffc107;
}

/* ACTIVE */

.navbar ul li a.active{
color:#ffc107;
border-bottom:3px solid #ffc107;
padding-bottom:5px;
}

/* ===== DROPDOWN ===== */

.dropdown-menu{
position:absolute;
top:120%;
right:0;
background:#000;
min-width:220px;
padding:10px 0;
border-radius:6px;
box-shadow:0 8px 20px rgba(0,0,0,0.4);

opacity:0;
visibility:hidden;
transform:translateY(10px);
transition:all .3s ease;
}

.dropdown-menu li{
padding:10px 20px;
}

.dropdown-menu li a{
font-size:14px;
display:block;
}

/* SHOW */

.dropdown.show .dropdown-menu{
opacity:1;
visibility:visible;
transform:translateY(0);
}

/* DESKTOP */

@media(min-width:769px){

.dropdown:hover .dropdown-menu{
opacity:1;
visibility:visible;
transform:translateY(0);
}

}

/* ===== MOBILE ===== */

.menu-toggle{
display:none;
font-size:30px;
color:white;
cursor:pointer;
}

@media(max-width:768px){

.menu-toggle{
display:block;
}

.navbar ul{
position:absolute;
top:100px;
left:0;
right:0;
background:#0a3d62;
flex-direction:column;
text-align:center;
display:none;
padding:20px 0;
z-index:999;
}

.navbar ul.show{
display:flex;
}

.navbar ul li{
padding:12px;
width:100%;
}

/* MOBILE DROPDOWN */

/* MOBILE DROPDOWN FIX */

.dropdown{
width:100%;
}

.dropdown-menu{
position:relative !important;
top:auto !important;
right:auto !important;

display:none;

background:#0a3d62;
width:100%;

padding:10px 0;
margin-top:15px;

border-radius:12px;
box-shadow:none;
}

.dropdown.show > .dropdown-menu{
display:block;
}

.dropdown-menu li{
padding:12px 0;
text-align:center;
}

.dropdown-menu li a{
display:block;
width:100%;
}
.dropdown.show > .dropdown-menu{
display:block !important;
opacity:1 !important;
visibility:visible !important;
transform:translateY(0) !important;
}
}