:root {
    --clr-accent-400: ;
    --clr-accent-100: ;
  
    --clr-primary-400: ;
  
    --clr-neutral-100: ;
    --clr-neutral-900: ;
  }
  
  /* Box sizing rules */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  /* Prevent font size inflation */
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }
  
  /* Remove default margin in favour of better control in authored CSS */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font: inherit;
  }
  
  /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
  ul[role="list"],
  ol[role="list"] {
    list-style: none;
  }
  
  /* Set shorter line heights on headings and interactive elements 
  h1,
  h2,
  h3,
  h4,
  button,
  input,
  label {
    line-height: 1.1;
  }
  
  /* Balance text wrapping on headings */
  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
  }
  
  /* A elements that don't have a class get default styles */
  a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
  }
  
  /* Make images easier to work with */
  img,
  picture,
  svg {
    max-width: 100%;
    display: block;
  }
  
  /* Make sure textareas without a rows attribute are not tiny */
  textarea:not([rows]) {
    min-height: 10em;
  }
  
  /* Anything that has been anchored to should have extra scroll margin */
  :target {
    scroll-margin-block: 5ex;
  }
  
  body {
    background: #f2f1f8;
   
      }
  
  .mobile-nav-toggle {
    display: none;
  }
  
  .primary-header {
    display: flex;
        background-color: #042870;
    color: white;
    align-items: center;
    justify-content:center;
    padding: 10px 100px 10px 10px;
  }
  
 .spazio{
  margin-left: 50px;
  background-color: #6d0f09;
  padding: 10px 100px 10px 100px;
  border-radius: 20px;
  font-weight: 900;
  box-shadow: 0 8px 16px 0 rgba(233, 230, 230, 0.2), 0 6px 20px 0 rgba(243, 242, 242, 0.19);
 }
 
  .primary-navigation {
    list-style: none;
    padding-right: 10px;
    
    
    color: white;
    align-items: center;
  }
  
  .primary-navigation a:hover {
    text-decoration: none;
    background-color: brown;
    padding: 10px 10px 10px 10px;
  }
  
  .primary-navigation a {
    text-decoration: none;
  }
  
  .contenitore {
    display:flex;
    flex-direction: column;
    flex-wrap: nowrap;
    margin-inline: 2rem;
    padding: 30px 30px 30px 30px;
    background-color: rgb(250, 250, 250);
    --max-width: 900px;
    padding: 1rem;
    width: min(var(--max-width), 100%);
    margin-inline: auto;
    justify-content: space-between;
        margin-top: 30px;
        border-radius: 30px;
  }
  
  .contenitore2 {
    width:70%;
    align-items: center;
    --max-width: 900px;
    margin-inline: 2rem;
    padding: 30px 30px 30px 30px;
    width: min(var(--max-width), 100%);
    margin-inline: auto;
    justify-content: space-between;
     
    
   }
  
   
.hero2__img{
  width: 100%;
 
}

.modulo{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.row{
     display: flex; 
  }

  .hero2 {
    background-color: #007dc5;
    align-self: center;    
  }

  .hero2__text{
    width: 60%;
  }
  

    .titolo {
    font-size: 2rem;
    font-weight: 700;
   padding-bottom: 50px;
   color: #ffffff;  
   
  }

  .titoloc {
    font-size: 2rem;
    font-weight: 700;
   padding-bottom: 50px;
   color: #970505;  
   
  }
  
  .sotto-titolo {    
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    padding-bottom: 50px;
    text-align: left;
    color: #ffffff;
  }
  
  .sotto-titoloc {    
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    padding-bottom: 50px;
    color: #000;
  }

  .p {
    font-size: 1.2rem;
    padding-bottom: 30px;
    text-align: left;
  }
  .p-centro {
    font-size: 1.2rem;
    padding-bottom: 30px;
    text-align: left;
    padding-left: 50px;
    font-weight: 600;
  }
  .grassetto {
    font-size: 1.2rem;
    padding-bottom: 50px;
    text-align: left;
    font-weight: 600;
  }

  .testo {
    font-size: 1.2rem;
    font-weight: 600;
    margin-left: 20px;
    margin-right: 20px;
    padding-top: 10px;
    padding-bottom: 50px;
  }
  
  .testo-centrato {
    text-align: center;
    font-size: 1.5rem;    
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    color: #970505;
    font-weight: 700;
    }

    .gap{
      color: #970505;
    }
  
  .hero {
    background-color: aquamarine;
    display: flex;    
  }
  
  .flex {
    display: flex;
    gap: var(--gap, 1rem);    
  }

  .immagine {
    padding-top: 50px;
  }
  
  .immagine2 {
    padding-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
  }
  
  .active {
    background-color: rgb(22, 39, 2);
    color: #c5e9f1;
    padding: 10px 10px 10px 10px;
  }

  .whatsapp{
    display: flex;
      overflow: hidden;
     flex-direction:row-reverse;
      position: fixed; /* Set the navbar to fixed position */
      bottom: 0; /* Position the navbar at the top of the page */
      
      width: 100%; /* Full width */
    
  }
  
  /* Mobile Menu */
  
  .navbar {
    overflow: hidden;
    background-color: #333;
  }
  
  .navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  .subnav {
    float: left;
    overflow: hidden;
  }
  
  .subnav .subnavbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
  }
  
  .navbar a:hover,
  .subnav:hover .subnavbtn {
    background-color: rgb(16, 32, 2);
  }
  
  .subnav-content {
    display: none;
    position: absolute;
  
    background-color: rgb(16, 32, 2);
    width: fit-content;
    z-index: 1;
  }
  
  .subnav-content a {
    float: left;
    color: white;
    text-decoration: none;
    padding: 14px 16px;
  }
  
  .subnav-content a:hover {
    background-color: #970505;
    color: rgb(252, 251, 251);
  }
  
  .subnav:hover .subnav-content {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }
  
  .centro {
    display: inline-block;
    flex-direction: row;
  
    text-align: center;
  }

  @media (max-width: 35em){
  .row{
    flex-wrap: wrap;
  }

  .titolo{
    text-align: center;
  }
}
  
  /* Footer */
  
  .footer {
    background-color: #042870;
    color: white;
    padding: 30px 10px 30px 10px;
    text-align: center;
    margin-top: 10px;
  }
  
  @media (max-width: 35em) {
    .primary-navigation {
      --gap: 3em;
      position: fixed;
  
      inset: 0 0 0 10%;
      background: #042870;
      flex-direction: column;
      padding: min(10vh, 30rem) 1em;
      z-index: 1000;
      transform: translateX(100%);
      transition: transform 350ms ease-out;
    }
  
    .primary-navigation[data-visible="true"] {
      transform: translateX(0%);
    }
  
    .mobile-nav-toggle {
      position: absolute;
      z-index: 9999;
      background-image: url("images/hamburger.svg");
      width: 2rem;
      height: 2rem;
      top: 2rem;
      right: 2rem;
      border: 0;
      display: block;
    }
  
    .mobile-nav-toggle[aria-expanded="true"] {
      background-image: url("images/close.svg");
    }
  
    .navbar {
      overflow: hidden;
      background-color: #333;
    }
  
    .navbar a {
      float: left;
      font-size: 16px;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
  
    .subnav {
      float: left;
      overflow: hidden;
    }
  
    .subnav-content {
      display: none;
      position: absolute;
  
      background-color: rgb(136, 15, 15);
      width: fit-content;
      z-index: 1;
    }
  
    .subnav-content a {
      float: left;
      color: white;
      text-decoration: none;
      padding: 14px 16px;
    }
  
    .subnav-content a:hover {
      background-color: #eee;
      color: black;
    }
  
    .subnav:hover .subnav-content {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
    }
  
    .navbar a:hover,
    .subnav:hover .subnavbtn {
      background-color: rgb(136, 15, 15);
    }
  }