header{
background:#fff;
box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.navbar{

max-width:100%;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 20px;
height:80px;
}

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

.menu>li{
position:relative;
}

.menu>li>a{

display:block;
padding:30px 18px;
text-decoration:none;
color:#111;
font-size:18px;
transition:.3s;
}

.menu>li:hover>a{
color:#d40000;
}

.btn-afiliate{

background:#d60000;
color:#fff;
padding:12px 22px;
text-decoration:none;
border-radius:5px;
font-weight:bold;
box-shadow:0 4px 8px rgba(0,0,0,.2);

}

/* =================== */
/* Mega Menu */
/* =================== */

.mega-menu{

position:absolute;
left:0;
top:100%;
width:1000px;
display:grid;
grid-template-columns:220px 220px 1fr 1fr;
background:#fff;
box-shadow:0 15px 30px rgba(0,0,0,.18);
padding:25px;
gap:25px;

opacity:0;
visibility:hidden;
transform:translateY(20px);
transition:.35s;
z-index:999;
}

.has-mega:hover .mega-menu{

opacity:1;
visibility:visible;
transform:translateY(0);

}

.column{
display:flex;
flex-direction:column;
}

.column h3{
margin-bottom:15px;
}

.column a{

padding:10px;
text-decoration:none;
color:#222;
border-radius:5px;
transition:.2s;

}

.column a:hover{

background:#f2f2f2;
color:#d60000;

}

.promo{

background:#f7f7f7;
padding:25px;
border-radius:8px;

}

.info{

background:#f7f7f7;
padding:25px;
border-radius:8px;

}

/* =================== */
/* Dropdown */
/* =================== */

.dropdown{

position:absolute;
top:100%;
left:0;
background:#fff;
width:220px;
list-style:none;
box-shadow:0 10px 20px rgba(0,0,0,.18);

opacity:0;
visibility:hidden;
transform:translateY(15px);
transition:.3s;

}

.has-dropdown:hover .dropdown{

opacity:1;
visibility:visible;
transform:translateY(0);

}

.dropdown li a{

display:block;
padding:14px 18px;
text-decoration:none;
color:#222;
transition:.2s;

}

.dropdown li a:hover{

background:#f5f5f5;
color:#d60000;

}