body {
  /* background: linear-gradient(to right, #e9ecef, #b5bfc9); */
  /* background: linear-gradient(to right, green, red); */
  height: 100vh;
  width: 100vw;
  font-family: Arial, sans-serif;
  /* background-color: #bbc4cd; */
  margin: 0;
  padding-top: 10vh;
}

.outer {
  position: relative; /* Imposta il contesto per il posizionamento assoluto */
  height: 100%;
  width: 100%;
  /* background-color: #b5bfc9; */
  /* border: 1px solid #ccc; */
}

.inner {
  position: absolute; /* Posizionamento assoluto rispetto al contenitore esterno */
  top: 50%; /* Posiziona al centro verticalmente */
  left: 50%; /* Posiziona al centro orizzontalmente */
  transform: translate(-50%, -50%) scale(1.7); /* Centra effettivamente */
  background-color: #4169E1;
  padding: 50px;
  border-radius: 8px;
  text-align: center;
}

#mainImage {
  transform: scale(1.1);
}


.clInset {
  color: white;
  background: #3E8DA8;
  border-style: inset;
  border-width: 4px;
}

/* Contatti */
.contact-card {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    transition: transform 0.2s ease;
    height: 100%; /* Altezza uniforme */
}
.contact-card:hover {
    transform: scale(1.02);
}
.icon {
    font-size: 1.5rem;
    color: #e63946; /* Cambiato colore da blu a rosso acceso */
}
.social-icon {
    font-size: 1.5rem;
}
.social-icon.facebook {
    color: #1877f2;
}
.social-icon.twitter {
    color: #1da1f2;
}
.social-icon.instagram {
    color: #e1306c;
}
.social-icon.linkedin {
    color: #0a66c2;
}
.row-equal .col-md-4 {
    display: flex;
}
.row-equal .col-md-4 > .card {
    flex: 1;
}

/* Altezza personalizzata per le righe */
.row-10 {height: 10%;}
.row-20 {height: 20%;}
.row-30 {height: 30%;}
.row-40 {height: 40%;}
.row-50 {height: 50%;}
.row-60 {height: 60%;}
.row-70 {height: 70%;}
.row-80 {height: 80%;}
.row-90 {height: 90%;}
.row-100 {height: 100%;}

.clInsetCat {
  display: inline-block;
  width: 20%;
  /* visibility: hidden; */
  padding: 10px 10px 0 10px;
  color: black;
  border-style: inset;
  border-width: 8px;
}
.clInset {
  color: white;
  background: #3E8DA8;
  border-style: inset;
  border-width: 8px;

  height: 100%;
  display: flex;
  align-items: center;
}
.clInsetP {
  font-weight: bold;
  }

/*
.class_id_miniature {
    width: 90%;
    position: relative; /* Necessario per posizionare l'immagine 
}
*/

.class_id_miniature {
    width: 90%;
    display: block;       /* si comporta come un blocco */
    margin: 0 auto 1rem;  /* centrato e con spazio sotto */
}


.square-container {
    width: 90%;
    aspect-ratio: 1 / 1; /* Mantiene il quadrato */
    position: relative; /* Necessario per posizionare l'immagine */
}

.square-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Mantiene le proporzioni */
    transition: transform 0.3s ease; /* Aggiunge un effetto di transizione */
    position: absolute; /* Permette all'immagine di uscire dal contenitore */
    top: 0;
    left: 0;
}

.square-container:hover img {
    transform: scale(1.8); /* Raddoppia le dimensioni al passaggio del mouse */
}

.giustificato {
    text-align: justify;
}
  
.carosello-singolo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 500px; /* adatta alla tua pagina */
  margin: auto;
  background-color: #f9f9f9;
  background-color: #555;
  padding: 0;
  border-radius: 10px;
  gap: 10px;
  box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
}

.freccia {
  background-color: #007bff;
  border: none;
  color: white;
  font-size: 24px;
  padding: 8px 12px;
  border-radius: 25%;
  cursor: pointer;
}

.freccia:hover {
  background-color: #0056b3;
}

.righeContatti {margin-left: 25%;}

.btn-outline-whatsapp {
  color: #198754 !important;
  border-color: #198754 !important;
  background: transparent;
}

.btn-outline-whatsapp:hover {
  background-color: #198754 !important;
  color: white !important;
}

 
/* Smartphone */
@media (max-width: 767px) {
    .righeContatti                      {margin-left: 5%;}
    .whatsapp-call-section              {margin-left: 0; text-align: left;}
    .whatsapp-call-section a.full-width {width: 100% !important;}
    .grid-container_filati              {width: 100% !important; grid-auto-rows: 40px !important;}
    .grid-item-filati                   {width: 40px !important; height: 30px !important;}
    .grid-text-miniature                {width: 40px !important;}
    .whatsapp-container                 {display: flex; justify-content: center;}
}