/*Botones*/
.btn {
  display: inline-block; 
  padding: 10px 30px; 
  text-decoration: none; 
  border-radius: 25px; 
  font-weight: bold; 
  cursor: pointer; 
  transition: background-color 0.3s ease, color 0.3s ease; 
  border: none;
  outline: none;
}


.btn-primary {
  background-color: #ecff00; 
  color: black; 
}


.btn-primary:hover,
.btn-primary:focus {
  background-color: #d1e600; 
  color: #333; 
}


 
.hs-button {
border-radius: 25px;
}

/* Textos */

.section-text {
  font-family: 'Quicksand', sans-serif; 
  text-align: center;
  padding-top: 50px;
  padding-bottom: 50px;
}

.section-text strong span {
  font-size: 20px;
  display: inline-block;
  max-width: 900px; 
  line-height: 1.5;
  
}

/* Media Query para dispositivos móviles (resoluciones de hasta 768px de ancho) */
@media (max-width: 768px) {
  .section-text {
    padding-top: 30px; 
    padding-bottom: 30px; 
    padding-left: 20px; 
    padding-right: 20px; 
  }

  .section-text strong span {
    font-size: 16px; 
    max-width: 100%; 
    line-height: 1.4; 
  }
}

/*Tablets*/
@media (min-width: 769px) and (max-width: 1024px) {
  .section-text {
    padding-left: 40px;
    padding-right: 40px;
  }
  .section-text strong span {
    font-size: 18px;
    max-width: 700px; 
  }
}
}

/*Texto header*/

.custom-heading-with-btn { 
  line-height: 1.20; 
  font-family: 'Poppins', sans-serif !important; 
  font-size: 48px; 
  text-align: center; 
  margin-bottom: 20px; 
}

@media (max-width: 768px) {
  .custom-heading-with-btn { 
    font-size: 30px; 
    line-height: 1.3; 
    padding-left: 15px; 
    padding-right: 15px; 
    margin-bottom: 15px; 
  }
.btn {
    padding: 8px 25px; /* Ligeramente más pequeño en móvil */
    font-size: 16px; /* Ajusta el tamaño de fuente del botón */
  }
 
}


/* Estilos por defecto para el contenedor de la cita (Escritorio y pantallas grandes) */
.testimonial-quote-container {
  /*position: relative;*/
  color: white;
  font-family: 'Quicksand', sans-serif;
  font-size: 16px; /* Tamaño de fuente para el texto principal de la cita */
  line-height: 1.75;
  max-width: 800px;
  margin: 0 auto; /* Centra el contenedor */
  padding: 40px 20px; /* Padding interno del contenedor */
  overflow: hidden; /* Importante para contener las comillas si se posicionan fuera */
}

/* Estilos para las comillas grandes */
.quote-mark {
  position: absolute;
  font-family: 'Quicksand', sans-serif;
  font-size: 180px; /* Tamaño de comillas para escritorio */
  color: #ffffff;
  z-index: 1; /* Para que estén detrás del texto si es necesario, o al mismo nivel */
  user-select: none; /* Evita que las comillas se puedan seleccionar */
  pointer-events: none; /* Permite hacer clic a través de ellas si están sobre algo */
}

.quote-start {
  top: -90px;  /* Posición original para escritorio */
  left: -60px; /* Posición original para escritorio */
}

.quote-end {
  bottom: -75px; /* Posición original para escritorio */
  right: -32px; /* Posición original para escritorio */
}

/* Estilos para el texto principal de la cita */
.quote-text {
  position: relative;
  z-index: 2; /* Asegura que el texto esté por encima de las comillas */
  margin: 0;
  padding: 0; /* Asegurarse de que no haya padding/margin extra en el párrafo */
}

/* Estilos para el autor/atribución */
.quote-author {
  display: block; /* Para que aparezca en su propia línea */
  margin-top: 5px;
  font-family: 'Quicksand', sans-serif;
  font-size: 16px;
  color: #ffffff;
  position: relative; /* Para z-index si es necesario */
  z-index: 2;
  text-align: left; /* Alinear el autor a la derecha si lo deseas */
  padding-right: 20px; /* Alineado con el padding del contenedor */
}


/* Media Query para dispositivos móviles (resoluciones de hasta 768px de ancho) */
@media (max-width: 768px) {
  .testimonial-quote-container {
    position: relative;
    font-size: 14px; /* Tamaño de fuente más pequeño para el texto de la cita */
    line-height: 2;
    padding: 23px 20px; /* Reducir padding general y añadir márgenes laterales */
    max-width: 100%; /* Permitir que el contenedor ocupe todo el ancho disponible */
  }

  .quote-mark {
    font-size: 100px; /* Reducir el tamaño de las comillas grandes para móvil */
  }

  .quote-start {
    top: -40px; /* Ajustar posición de la comilla de apertura para móvil */
    left: 0px; /* Ajustar a la izquierda, o 5px para un pequeño margen */
  }

  .quote-end {
    bottom: 40px; /* Ajustar posición de la comilla de cierre para móvil */
    right: 0px; /* Ajustar a la derecha, o 5px para un pequeño margen */
  }

  .quote-author {
    font-size: 14px; /* Ajustar tamaño de fuente del autor para móvil */
    padding-right: 15px; /* Ajustar padding para que coincida con el contenedor */
    margin-left: 20px;
  }
}

/* Puedes añadir un media query para pantallas aún más pequeñas si lo necesitas, por ejemplo, max-width: 480px */
@media (max-width: 480px) {
  .quote-mark {
    font-size: 80px; /* Comillas aún más pequeñas en pantallas muy estrechas */
  }

  .quote-start {
    top: -30px;
    left: 0px;
  }

  .quote-end {
    bottom: 40px;
    right: 0px;
  }
}