.header-nav {display: none}
.header-top {display: none}
 
 /* Stili base per l'header */
 .catalog_header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px;
   
       margin-left: auto;
   margin-right: auto;
   padding-left: 15px;
   padding-right: 15px;
 }
 
 @media (min-width: 768px){
   .catalog_header {
     
       width: 720px;
   }
 }
  
   @media (min-width: 992px){
   .catalog_header {
     
       width: 960px;
   }
 }
 
 @media (min-width: 1200px){
       .catalog_header {
       width: 1140px;
     }
 }


 .catalog_header_logo {
   flex: 1;
   width: 16.66667%;

   }
 
 

   .logo {
         width: auto;
      max-width: 100%;
     max-height:60px;
         padding: 3px;

      }

 .catalog_header_menu {
   flex: 1;
   text-align: right;
 }

 .catalog_header_menu a {
   text-decoration: none;
   color: #555;
   font-size: 18px;
   text-transform: uppercase;
 }
 
  .catalog_header_menu p {
   text-decoration: none;
   color: #555;
   font-size: 18px;
   text-transform: uppercase;
 }

 /* Icona del menu (esempio generico) */
 .menu_icon {
   display: inline-block;
   margin-left: 10px;
 }

 /* Stili per il menu  */
.catalog_menu_content {
   display: none;
   background-color: #fff;
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   z-index: 1000;
   overflow-y: auto;
   text-align: right; /* Allinea il testo (e quindi le voci del menu) a destra */
    /* Aggiunge un po' di spazio intorno alle voci del menu */
     flex-direction: column;
   justify-content: center;
}

@media (min-width: 992px){
.catalog_menu_content {  
 width: 580px;
 padding:20px;
 right: 0;
 left: auto;
 
 
 }  }
 
.catalog_menu_content a  {
   display: flex; /* o 'block' se vuoi che ogni voce occupi la propria riga */
   padding: 10px; /* Spazio intorno alle voci per renderle più facili da toccare su dispositivi touch */
   color: #000;
   text-decoration: none;
     align-items: center;
     justify-content: flex-end;
}
 
.catalog_menu_content p  {
   display: flex; /* o 'block' se vuoi che ogni voce occupi la propria riga */
   padding: 10px; /* Spazio intorno alle voci per renderle più facili da toccare su dispositivi touch */
   color: #000;
   text-decoration: none;
     align-items: center;
     justify-content: flex-end;
}
 
 .catalog_menu_content a:hover {
   background-color: #03173a;
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
   
   color: white;
   border:0px;
}

/* Centra verticalmente le voci del menu */
.catalog_menu_content.active {
   display: flex;

   /* Altre proprietà rimangono invariate */
}

 .close-menu {
   position: absolute;
   top: 10px;
   right: 10px;
   font-size: 30px; /* Adegua la dimensione secondo necessità */
   color: #000; /* o qualsiasi altro colore preferisci */
}
 
  .logo-hover {
   margin-right: 10px;       
   height: 46px;
   width: 157px;
   background-image: url('https://simplyorder.ferrosport.it/img/cms/logo_blu_simplyorder.png'); /* Immagine di default */
   background-size: cover; /* Assicura che l'immagine copra l'intero elemento senza ripetizioni */
   background-repeat: no-repeat; /* Impedisce la ripetizione dell'immagine */
    /* Effetto di transizione (opzionale) */
}

  a:hover .logo-hover {
   background-image: url('https://simplyorder.ferrosport.it/img/cms/logo_white_simplyorder.png');
    
    /* Immagine al passaggio del mouse */
}
 .list_submenu {
     
      font-size: 14px !important;
           padding-right: 26px !important;
   }

  @media (max-width: 992px){
     .list_menu {
     
      font-size: 14px !important;
   }
    .list_submenu {
     
      font-size: 12px !important;
   }
     .logo-hover {
   margin-right: 10px;       
   height: 25px;
   width: 86px;
 }
    
    .catalog_menu_content {
      padding-right: 15px;
      padding-left: 5px;
    }
    
 }