html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

/* HERO */
.hero-bg {
  background-image: url('../img/hero.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-mask::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.05) 0%,
      rgba(255,255,255,0.10) 15%,
      rgba(255,255,255,0.84) 31%,
      rgba(255,255,255,0.92) 50%,
      rgba(255,255,255,0.84) 69%,
      rgba(255,255,255,0.10) 85%,
      rgba(255,255,255,0.05) 100%
    );
}

/* CARD PRINCIPALE */
.glass-panel {
  position: relative;
  background: rgba(255, 255, 255, 0.82);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 2px solid #5f746b !important;
  border-radius: 2rem !important;

  box-shadow:
    0 26px 70px rgba(14, 34, 29, 0.20),
    0 0 0 1px rgba(255, 255, 255, 0.75),
    inset 0 0 0 1px rgba(95, 116, 107, 0.08);
}

.brand-shadow {
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.08));
}

.slogan {
  border-left: 1px solid rgba(83, 107, 97, .48);
  padding-left: 1.25rem;
}

/* SOCIETÀ */
.companies {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
}

.companies-primary,
.companies-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.companies-primary {
  gap: 0;
}

.companies-secondary {
  gap: 1rem;
}

.company-item {
  display: inline-flex;
  align-items: center;
  gap: .50rem;
  white-space: nowrap;
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.2;
}

.company-flag {
  display: inline-block;
  font-size: 1.55rem;
  line-height: 1;
}

.company-separator {
  display: block;
  width: 1px;
  min-width: 1px;
  height: 24px;
  margin: 0 1rem;
  background-color: #5f746b;
  opacity: .72;
  flex-shrink: 0;
}

.secondary-separator {
  opacity: .45;
}

/* CARD SERVIZI */
.service-card {
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(48, 66, 60, .32);
  transition:
    transform .25s ease,
    background-color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.90);
  border-color: rgba(48, 66, 60, .62);
  box-shadow: 0 16px 40px rgba(14, 34, 29, .12);
}

/* TABLET */
@media (min-width: 768px) and (max-width: 1100px) {
  .glass-panel {
    border-width: 2px !important;
  }

  .company-item {
    font-size: .88rem;
  }

  .company-flag {
    font-size: 1.45rem;
  }

  .company-separator {
    margin: 0 .75rem;
  }
}

/* MOBILE */
@media (max-width: 767px) {
  .hero-bg {
    background-position: 58% center;
  }

  .hero-mask::before {
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.92),
        rgba(255,255,255,.76) 56%,
        rgba(255,255,255,.66)
      );
  }

  .glass-panel {
    background: rgba(255,255,255,.80);
    border: 1px solid rgba(48, 66, 60, .28) !important;
    border-radius: 1.5rem !important;
  }

  .slogan {
    border-left: 0;
    border-top: 1px solid rgba(83, 107, 97, .35);
    padding-left: 0;
    padding-top: 1rem;
    text-align: center;
  }

  .slogan .bg-red-500 {
    margin-left: auto;
    margin-right: auto;
  }

  .companies {
    gap: .55rem;
  }

  .companies-primary,
  .companies-secondary {
    gap: .6rem 1rem;
  }

  .company-item {
    font-size: .82rem;
  }

  .company-flag {
    font-size: 1.30rem;
  }

  .company-separator {
    display: none;
  }
}