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

.banner {
  width: 150px; 
  height: auto;
  /*border: solid 1px;*/
}

@font-face {
  font-family:Arial;
  font-style:normal;
  font-weight:bold;
  src : url("../font/Arial-BoldMT.ttf");
}
@font-face {
  font-family:Arial;
  font-style:normal;
  font-weight:normal;
  src : url("../font/Arial.ttf");
}
@font-face {
  font-family:Avenir;
  font-style:normal;
  font-weight:normal;
  src : url("../font/Avenir.ttc");
}
/*
@font-face {
  font-family:"Minion Pro";
  font-style:normal;
  font-weight:normal;
  src : url("../font/MinionPro-Regular.otf");
}      
*/
header {
  width: 100%;
  background: #fff; /* sfondo bianco */
  padding: 15px 20px;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.logo-slogan {
  display: flex;
  flex-direction: row;         /* LOGO + SLOGAN affiancati */
  align-items: center;         /* centrati verticalmente */
  gap: 20px;                   /* spazio tra logo e slogan */
}

.logo img {
  height: 50px;  /* 100px ok per logo-dimmi */
  margin-left: 20px; /* era -20px */
  margin-top:10px;  /* aggiunto */
}

.slogan {
  font-size: 2em;
  color: #333;
  font-family: Avenir, sans-serif;
  font-weight: 500;
  margin-top:30px;  /* era 13 */
}

nav {
  position: relative;
}

.menu {
  display: flex;
  gap: 20px;
  margin-top:10px;  /* aggiunto margin */
}

.menu a {
  text-decoration: none;
  color: rgb(62, 135, 166);
  
  font-family:Avenir, sans-serif;
  /* font-weight: bold;
  font-size:26px;*/
  font-size: 1.7em;
  margin-top:20px;
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background: #000;
  border-radius: 3px;
}

/* Menu mobile */
.menu-mobile {
  display: none;
  flex-direction: column;
  margin-top: 10px;
  gap: 10px;
}

.menu-mobile a {
  text-decoration: none;
  color: #000;
  font-weight: bold;
}

/* usato nel footer */
.CharOverride-4 {
  color:#ffffff;
  font-family:Avenir, sans-serif;
  /*font-size:26px;*/
  font-size: 1.7em;
  font-style:normal;
  font-weight:normal;
  line-height: 1.2;
}

/* Responsive */
@media (max-width: 860px) {
  .header-container {
    flex-direction: row;       /* logo+slogan a sx, hamburger a dx */
    justify-content: space-between;
    align-items: center;       /* centrati verticalmente */
  }

  .logo-slogan {
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;  /* spazio controllato invece di margin-top negativo */
  }
  
  .slogan {
    margin-left: 20px; 
    margin-top:15px; /* era -15 */
    font-size: 1.3em;
    color: #333;
    font-family: Avenir, sans-serif;

  }

  .menu {
    display: none;             /* nascondo il menu desktop */
  }

  /* Stato normale: 3 linee */
  .hamburger {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
    margin-top: -20px; /* lo sposti più su */
  }

  .hamburger span {
    width: 28px;   /* più lunga di 25px */
    height: 3px;
    background: #000;
    border-radius: 3px;
    transition: all 0.3s ease;
  }

  /* Stato attivo: diventa X */
  .hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
  }

  .hamburger.active span:nth-child(2) {
    opacity: 0;  /* linea centrale sparisce */
  }

  .hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
  }

  .menu-mobile.active {
    display: flex;
  }

  /* usato nel footer */
  .CharOverride-4 {
    color:#ffffff;
    font-family:Avenir, sans-serif;
    
    font-size: 1em;
    font-style:normal;
    font-weight:normal;
    line-height: 1.2;
  }
}