/* Menu */
:root { --menu-bg: #ffffff; --menu-color: #22378C; }

.header{ background-color: var(--menu-bg); border-bottom: 0.5px solid rgb(0, 0, 0); position: fixed; top:0;  left:0; z-index: 9999; width: 100%; padding: 40px 15px; }
.header__content{max-width: 1200px;width: 100%;margin: 0 auto; display: flex;justify-content: space-between;}

.header img{width: 160px; }

.header__logo,
.header__quick{display: flex; align-items: center;color:var(--menu-color)}

.header__menu{padding: 0;margin: 0;}
.header__menu li{display: inline-block;}
.header__menu li a{color: #000000a0; opacity: 0.8;display: block;padding: 16px;font-size: 15px; font-style: uppercase; text-decoration: none;}
.action{font-weight: 500; color: var(--menu-color); font-size: 17px;}

@media (max-width: 768px) {
  .header__menu{   
    position: absolute; top:60px; left:0; background-color: var(--menu-bg); width: 100%; height: 100vh;
    height: 0vh; overflow: hidden;transition: all 1s cubic-bezier(.215, .61, .355, 1);
  }

  .header__menu li{width: 100%;border-bottom: 1px solid #444}
  .menu-open .header__menu{height: 100vh;padding: 3%;}

  .icon-hamburger{height: 50px;width: 40px;margin-left: 20px;padding-top: 5px;}
  .icon-hamburger span{height: 2px; width: 30px;background: var(--menu-color);position: relative;display: block;margin-top: 11px;transition: all 0.2s cubic-bezier(.215, .61, .355, 1);}

  .menu-open .icon-hamburger span:nth-child(1){transform: rotate(45deg) translateY(9px);}
  .menu-open .icon-hamburger span:nth-child(2){transform: rotate(-45deg) translateY(-9px);}

  .header__quick{display: flex; justify-content: flex-end; width: 50%;}

  .action{font-weight: 500; color: var(--menu-color); font-size: 15px; padding-right: 30px; padding-top: 10px;}

}

/* ! Cover */
.cover{ 
  text-align: center; padding:10px; margin:0px; min-height:90vh; width:100%; 
  display:flex; flex-direction:column; justify-content:center; 
  background-position: center center; background-size:cover;
}
.cover * {color:#fff}

.cover h1{font-size: 60px; padding: 0 360px; font-family: "PT Serif";}

}

.bottone-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.bottone-professionista {
  background: linear-gradient(135deg, var(--menu-color), #475cb0);
  color: white;
  border: none;
  padding: 25px 180px;
  font-size: 15px;
  font-weight: bold;
  border-radius: 0px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.5s ease, box-shadow 0.2s ease;
  font-family: 'outfit';
}
.bottone-professionista-2 {
  background: var(--menu-color);
  color: #fff;
  padding: 20px 40px;
  border: none !important;
  font-size: 15px;
  font-weight: bold;
  border-radius: 0px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(62, 51, 51, 0.1);
  transition: transform 0.5s ease, box-shadow 0.2s ease;
  font-family: 'outfit';
  margin-top: 10px;
}

.bottone-professionista:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.banner{
    width: 100%;height: 40vh; margin-top: 10%;
    text-align: center;
}
.banner h1{
    font-size: 50px;
    color: var(--menu-color);
    text-align: center;
}
.banner h2{
    opacity: 0.9;
    font-weight: 400;
    padding: 5px;
    font-size: 20px;
}
@media (max-width: 768px) {
  .cover h1{
    padding: 30px 20px 0px 20px;
    font-size: 45px;
}
  .cover h2{
    padding: 10px 50px;
    font-size: 20px;
}

.bottone-professionista {

    padding: 25px 80px;
}

.banner h1{ font-size: 40px;}
.banner h2{ font-size: 18px;}

}

.box{
  display: flex;
  justify-content: space-between; /* spinge i due estremi */
  align-items: center;            /* allinea verticalmente al centro */
  padding: 12px;
  width: 100%;        /* o una larghezza fissa tipo 400px */
  box-sizing: border-box; 
  padding: 50px 100px;
}