/* =========================
RESET GENERAL
========================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Arial, Helvetica, sans-serif;
background:#f4f4f4;
}


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

.header{
width:100%;
background:#0d1117;
box-shadow:0 2px 10px rgba(0,0,0,0.2);
}


/* =========================
CONTENEDOR HEADER
========================= */

.container-header{

width:90%;
max-width:1200px;

margin:auto;

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

padding:18px 0;

}


/* =========================
LOGO
========================= */

.logo img{
height:45px;
display:block;
}


/* =========================
MENU
========================= */

.menu ul{
display:flex;
align-items:center;
list-style:none;
}

.menu ul li{
margin-left:35px;
position:relative;
}

.menu ul li a{

text-decoration:none;
color:white;

font-size:15px;
font-weight:500;
letter-spacing:0.5px;

padding:5px 0;

transition:color 0.3s ease;

}


/* =========================
HOVER COLOR
========================= */

.menu ul li a:hover{
color:#00bfff;
}


/* =========================
LINEA ANIMADA
========================= */

.menu ul li::after{

content:"";
position:absolute;

left:0;
bottom:-6px;

width:0%;
height:2px;

background:#00bfff;

transition:width 0.3s ease;

}

.menu ul li:hover::after{
width:100%;
}