body{background-color:#ccfbcc;}

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

.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:var(--menu-color); opacity: 0.8;display: block;padding: 15px;font-size: 15px;font-weight:bold;}

@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%;}

}

/* ! Cover */
.cover{ 
  text-align: center; padding:10px; margin:0 auto; height:350px; width:70%; 
  display:flex; flex-direction:column; justify-content:center; 
  background-position: center center; background-size:cover;
}
.cover * {color:#fff}
.zoom {
      transition: transform 0.3s ease; /* animazione fluida */
}
    .zoom:hover {
      transform: scale(1.2); /* ingrandisce del 20% */
    }

footer{ background-color: var(--menu-bg);}
.grid__footer{ margin: 0 auto; padding: 0 15px; display: flex; flex-flow: row; flex-wrap: wrap;}
footer p,footer li{font-size:0.6rem;}

h1{color: var(--h1-color);}

.hover-container { position: relative; display:inline-block; }
.hover-img { display:block; max-width:100%; border-radius:8px; cursor:pointer; }
.hover-popup {
  position:absolute;
  top:8px;
  right:8px;
  width: 300px;
  background: white;
  border-radius:10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  padding:12px;
  opacity:0;
  transform: scale(.96) translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
  z-index: 20;
}
.hover-popup.show {
  opacity:1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}
.hover-popup .close { float:right; border:none; background:transparent; font-size:16px; cursor:pointer; }