/*
  Bootstrap Italia, nella classe it-dark,
  usa un blu/grigio scuro con opacità 0.54

  Il design da Figma vuole invece nero 0.64
*/
.it-hero-wrapper.it-overlay.it-overlay-64-custom .img-responsive-wrapper:after {
  background: rgba(0, 0, 0, 0.42) !important;
}

.it-hero-text-wrapper p.text-paragraph-custom {
  font-family: "Titillium Web", sans-serif !important;
  line-height: 1.5rem; /* 24px */
}

.it-hero-wrapper.it-hero-small-size-custom .it-hero-text-wrapper {
  /* padding: 3rem 4.5rem; */
  padding: 3rem 0rem;
}

.it-hero-wrapper.it-hero-small-size.it-hero-small-size-custom {
    min-height: 264px;
}

.it-hero-wrapper.it-hero-small-size-custom .it-hero-text-wrapper .it-btn-container {
    position: static !important;
    margin-top: 24px !important;
}

/*
  Sovrascrivo le classi di Bootstrap Italia
  per sistemare altezza hero sottile, padding,
  dimensione/altezza riga del font e posizione sfondo
  su responsive come da design su Figma
*/
@media (max-width: 575.98px) {
  .it-hero-wrapper.it-hero-small-size-custom .it-hero-text-wrapper {
      padding: 3rem 1.5rem;
  }
  .it-hero-small-size-custom .it-hero-text-wrapper h2 {
    font-size: 2.5rem !important;
    line-height: 3rem !important;
  }
  .it-hero-text-wrapper p.text-paragraph-custom {
    font-size: 1.15rem !important;
    line-height: 2rem;
  }
}