/* Stile generale per l'header */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* General style for the body */
body {
  font-family: 'Roboto', sans-serif !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  line-height: 1.6;
  padding-top: 100px; /* Offset for fixed header */
  margin: 0 auto;
  padding-inline: 5%;
}
/* Header Styles */


.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #f5f7f9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-bottom: 2px solid #ddd;
}



.hero-image img {
    width: 350px;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* bottone del settore casi studio*/

.case-studies-button {

border-color: #373737 !important;
}


  

/* bottone principale classico nero con sfumatura verso il grigio*/
.demo-button:active, 
.demo-button:hover {
  background-color: #373737 !important; /* Grigio chiaro */
  border-color: #373737 !important;
}

/* parte relativa al bottone sull'immagine */
.success-button {
  bottom: 16%;
  left: 32%;
  transform: translateX(-50%);
  font-size: 1.25rem;
  padding: 0.7rem 1.8rem !important;
  white-space: nowrap; /* Evita che il testo vada a capo */
  background-color: #c2f263 !important;
  color: #313a22 !important;
}

.success-button:active, 
.success-button:hover {
  background-color: #b8db72 !important; /* Grigio chiaro */
  border-color: #ffffff !important;
}
 /* Adatta il bottone su schermi più piccoli */
 @media (max-width: 768px) {
  .success-button {
    font-size: 1rem;  /* Riduce la dimensione del font */
    padding: 8px 16px; /* Riduce la dimensione del bottone */
    bottom: 5%; /* Alza leggermente il bottone per evitare sovrapposizioni */
  }
}

@media (max-width: 480px) {
  .success-button {
    font-size: 0.9rem; 
    padding: 6px 12px; 
    bottom: 3%;
  }
}


.container {
  text-align: left;
  max-width: 100%;
}


/* Sezione partners */
.partners-section {
    background-color: #fff;
    padding: 2rem;
    text-align: center;
    width: 100%;
}

.partners-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #000;
    margin-bottom: 2rem;
}

.partners-carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    width: 100%;
}

.partner-logo img {
    max-width: 150px;
    height: auto;
    transition: transform 0.3s ease;
}

.partner-logo img:hover {
    transform: scale(1.05);
}



/* sezione della mission sotto all'hero e ai partners */

.info-box {
  background-color: #ED755F; /* Cambia con il colore secondario del tuo sito */
  color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  display: inline-block;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); /* Singolo contorno */

 
  /* Effetto inclinato 
  transform: rotate(-5deg);
  transform-origin: center;
  position: relative;
  padding: 20px 30px;
  */
}

.info-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  z-index: -1;
  border-radius: 10px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}

.info-box h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.info-link {
  color: #b6a7ff; /* Colore accento per il link */
  text-decoration: none;
  font-weight: bold;
}

.info-link:hover {
  text-decoration: underline;
}

.section-title {
  font-size: 1.8rem;
  font-weight: bold;
  color: #ffffff;
}




/* pricing section */

.pricing-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: none;
  border-radius: 15px;
}

.pricing-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.feature-list li {
  margin-bottom: 0.8rem;
  color: #6c757d;
}

.popular-badge {
  position: absolute;
  top: -12px;
  right: 20px;
  border-radius: 20px;
}


/*cards vantaggi e svantaggi*/
.custom-card-red {
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  height: 18.5rem;
}
.custom-card-red::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background-color: #ff6f3f; /* Colore arancione */
}

.custom-card-green {
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  height: 18.5rem;

  
}

.custom-card-green::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background-color: #93db47; /* Colore arancione */
}




.text-small {
  font-size: 0.5em;
}



/* Stile del badge */
.custom-badge {
  display: inline-block; /* Mantiene il badge in linea con il testo */
  position: absolute; /* Permette di posizionarlo sul lato destro */
  top: 20px; /* Regola la distanza dall'alto */
  right: -40px !important; /* Regola la distanza dal lato destro */
  font-size: 16px !important; /* Regola la dimensione del testo per maggiore leggibilità */
  padding: 0.8rem 2rem 0.8rem 2rem !important;
  font-weight: normal !important; /* Testo in grassetto per maggiore enfasi */
  color: #333 !important; /* Colore del testo più sobrio */
  background: linear-gradient(135deg, #f7f7f7 0%, #FFD263 100%); /* Gradiente con toni neutri */
  border: 1px solid #bbb; /* Bordo sottile per definire il badge */
  border-radius: 12px; /* Angoli arrotondati per un aspetto moderno */
  /* text-transform: uppercase; /* Trasforma il testo in maiuscolo */
  letter-spacing: 1px; /* Spaziatura tra le lettere per leggibilità */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Leggera ombreggiatura */
  transition: all 0.3s ease-in-out; /* Effetto di transizione su hover */
  z-index: 10; /* Porta il badge sopra altri elementi */
  /* Possibili personalizzazioni */
  /* text-align: center; */
  /* max-width: 250px; */
  /* cursor: pointer; */
}

/* Effetto hover per maggiore interattività */
.custom-badge:hover {

  border-color: #999; /* Cambio del colore del bordo su hover */
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.15); /* Ombra più accentuata su hover */
}
.feature-icon-v {
  color: green; /* Red color for X */
  font-weight: bold;
  margin-right: 0.5rem;
}


.feature-icon-x {
  color: #dc3545; /* Red color for X */
  font-weight: bold;
  margin-right: 0.5rem;
}


/* Contenitore principale delle testimonianze */
.testimonials-container {
  display: flex; /* Dispone gli elementi in linea orizzontale */
  flex-wrap: wrap; /* Permette il ritorno a capo degli elementi se lo spazio è insufficiente */
  justify-content: center; /* Centra gli elementi orizzontalmente */
  gap: 1.5rem; /* Spazio tra le card */
  max-width: 100% !important; /* Larghezza massima del contenitore */
  margin: 0 auto; /* Centra il contenitore orizzontalmente nella pagina */
  padding: 2rem 1rem; /* Aggiunge spazio interno sopra/sotto (2rem) e ai lati (1rem) */
}

/* Card di ogni testimonianza */
.testimonial-card {
  background-color: #fff; /* Sfondo bianco per le card */
  padding: 1.5rem; /* Spazio interno della card */
  border-radius: 10px; /* Angoli arrotondati */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Aggiunge un'ombra leggera per dare profondità */
  flex: 1; /* Permette alla card di crescere in base allo spazio disponibile */
  min-width: 280px; /* Larghezza minima della card */
  max-width: 300px; /* Larghezza massima della card */
  text-align: center; /* Centra il testo all'interno della card */
}

/* Testo della testimonianza */
.testimonial-text {
  font-size: 1rem; /* Dimensione del testo principale */
  color: #333; /* Colore grigio scuro per il testo */
  line-height: 1.5; /* Altezza della linea per una lettura più comoda */
  margin-bottom: 1rem; /* Spazio sotto il testo della testimonianza */
}

/* Nome dell'autore della testimonianza */
.testimonial-author {
    font-size: 1.2rem; /* Dimensione del testo per l'autore */
    font-weight: bold; /* Testo in grassetto */
    color: #000; /* Colore nero per il nome dell'autore */
}

/* sezione contatto finale */

.contact-section {
    padding-top: 1rem;
    padding-left: 14rem;
    padding-right: 14rem;
    padding-bottom: 2rem;
    background-color: #f5f7fa; /* Colore di sfondo */
  }
  


  
  .contact-content {
    flex: 1 1 35%; /* Ridotto per dare più spazio al form */
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  
  .contact-content h2 {
    font-size: 2rem; /* Testo più grande */
    font-weight: 600;
    color: #333;
    margin: 0;
    line-height: 1.5; /* Migliore leggibilità */
  }
  
  .contact-form-wrapper {
    flex: 1 1 50%; /* Più spazio per il form */
  }
  
  .contact-form {
    background-color: #fff;
    border-radius: 10px; /* Arrotondamento leggero */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 2.5rem; /* Più spazio interno */
  }
  
  .form-group {
    margin-bottom: 1.5rem;
    margin-right: 1.8rem;
  }
  
  .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
  }
  
  .form-group input,
  .form-group textarea,
  .form-group select {
    width: 100%;
    padding: 1rem; /* Input più spaziosi */
    border: 1px solid #ddd;
    border-radius: 6px; /* Arrotondamento più fluido */
    font-size: 1rem;
    outline: none;
    background-color: #f9f9f9;
  }
  
  .form-group textarea {
    resize: none;
    height: 140px; /* Testo più ampio */
  }
  
  .form-group input:focus,
  .form-group textarea:focus,
  .form-group select:focus {
    border-color: #80bdff;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.2); /* Aggiunto focus visivo */
  }
  
  /*
  .submit-btn {
    width: 100%;
    padding: 1.2rem; /* Bottone più grande 
    border: none;
    border-radius: 6px;
    background-color: #000000;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  .submit-btn:hover {
    background-color: #000000; /* Colore hover 
  }

  */


  /* footer */

  /* Stile generico del footer */
.footer {
    background-color: #333;
    color: #fff;
    padding: 2rem 1rem;
    font-size: 0.9rem;
  }
  
  .footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    border-top: 1px solid #555;
    padding-top: 1rem;
  }
  
  /* Stile informazioni aziendali */
  .footer-info {
    flex: 1 1 40%;
    line-height: 1.6;
  }
  
  .footer-info p {
    margin: 0.3rem 0;
  }
  
  /* Stile link del footer */
  .footer-links {
    flex: 1 1 30%;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
  }
  
  .footer-links a {
    color: #ccc;
    text-decoration: none;
    font-size: 0.9rem;
  }
  
  .footer-links a:hover {
    color: #fff;
  }
  
  /* Stile icone social */
  .footer-socials {
    flex: 1 1 20%;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
  }
  
  .footer-socials a img {
    width: 24px;
    height: 24px;
    filter: invert(80%);
  }
  
  .footer-socials a img:hover {
    filter: invert(100%);
  }