.topheader{

    /* box-shadow: 0 4px 5px var(--navbar-shallow-color); */

    position: fixed;

    background-color: var(--navbar-shallow-color);      

    left: 0;

    top: 0;

    width: 100%;  

    z-index: 1000;

}



.topnav{

    display: flex;

    justify-content: space-between;

    max-width: 1440px;

    padding: 10px;

    margin: 0 auto;

}



nav .menu{

    list-style: none;

    padding: 0;

    margin: 0; 

}



nav .menu li ul {

    display: none;

    position: absolute;

    top: 80%;    

    background: var(--navbar-shallow-color);

    border-radius: 5px;



  }



.topnav .menu li:hover ul,

.topnav .menu li ul:hover {

    display: block;

}



.topnav ul li ul li {

    display: block;

    padding: -20px auto;

}



.topnav ul li ul li a{

    margin-right: 25px;    

}



.topnav ul li ul li p{

    text-align: center;   

    font-size: 22px; 

    margin-right: 25px;

    margin-top: 0;

    color: #afaeae;

}



/* Logo */

.logo{

  display: flex;  

  align-items: center;

}



.logo img{

    border-radius: 5px;

   

}



/* menu */



.menu{

    display: flex;

    list-style-type: none;

    margin: 0;

    padding: 0;

}



.menu li{

    padding: 0 15px;

}







.menu a{

    color: var(--text-color);

    font-family: 'Trebuchet MS', sans-serif;

    font-size: 14px;

    font-weight: 500;

    line-height: 55px;

    text-transform: uppercase;

    position: relative;

}



.menu a::after{

    content:"";

    background-color: var(--text-color-hover);

    position: absolute;

    left: 0;

    top: 100%;

    width: 100%;

    height: 3px;

    opacity: 0;

    transition: opacity 0.3s;

}



.menu a.selected::after,

.menu a:hover::after{

    opacity: 1;

      

}



.menu a:hover{

    color: var(--text-color-hover);

    

}



.open-menu, .close-menu{

    display: none;

}



@media (max-width: 1080px){

        /* Logo */

  

.logo img{

    border-radius: 5px;

    max-width: 90px 30px;

  }

  

  /* menu */

  

.menu{

    flex-direction: column;

    position: fixed;

    left: 0;

    top: 0;

    width: 100%;

    align-items: center;

    background-color: var(--primary-color-2);

    height: 100%;

    overflow-y: auto;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.3s;

}

  

.menu li{

    padding: 0;

}



.menu a{

    color: var(--text-color-inverse);

    line-height: 60px;

    text-transform: uppercase;

    font-family: 'Trebuchet MS', sans-serif;

}



.close-menu, .open-menu{

    display: block;

    border: none;

    background: none;

    cursor: pointer;

}

.close-menu{

    align-self: flex-end;    

}

.close-menu img{

    width: 35px;

    padding: 20px 16px;

}



.menu_opened{

    opacity: 1;

    pointer-events: all;

}



.open-menu:focus:not(:focus-visible), 

.close-menu:focus:not(:focus-visible){

    outline: none;

}



.menu a::after{

    content: none;    

}



.menu a.selected,

.menu a:hover{

    color: var(--text-color-hover);       

}



}