@font-face {
  font-family: 'LeagueSpartan';
  src: url('../assets/Font/LeagueSpartan-Bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'OpenSans-Regular';
  src: url('../assets/Font/OpenSans-Regular.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'OpenSans-ExtraBold';
  src: url('../assets/Font/OpenSans-ExtraBold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'OpenSans-Medium';
  src: url('../assets/Font/OpenSans-Medium.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

* {
  max-width: 100vw;
  box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-size: cover;
    background-position: center;
    min-height: 100vh; /* Para que cubra toda la pantalla */
}


  


.header-area .main-nav .nav li:hover a {
  color: #23A89D;  
}


header nav ul li a {
    font-family: 'LeagueSpartan', sans-serif;
    font-size: 1vw;
    color: #ffffff;
    text-decoration: none;
    padding: 15px 0;
    display: block;
}


.wolf-premium a {
    color: rgb(255, 233, 59);
}

a:hover {
    color: rgb(35, 168, 157);
  }

main {
margin-top: -50px;
    background-size: cover;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 20px;
}

.message-section {
    margin-top: 25%;
    margin-bottom: 10%;
    font-family: 'LeagueSpartan', sans-serif;
    color: #ffffff;
    font-size: 1.25vw;
    padding-right: 7%;
}
.message-section p{
  text-align: center;
  line-height: 50px;
}
.message-section h3 {
    font-family: 'LeagueSpartan', sans-serif;
    color: #ffffff;
    text-align: left;
    font-size: 1.979vw;
    margin-top: -2%;
}
.rol {
  display: flex;
  justify-content: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 60px;
}
.contact-background {
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-top: 10%;
}

@media (max-width:786px){
  .contact-background {
    margin-top: 2px;
    
}

.message-section {
  margin-top: 40%;
  margin-bottom: 10%;
 
 text-align: center;
  padding-right: 0%;
}

.message-section h3 {
  
  font-size: 25px;
  margin-top: -2%;
}

}
.background-text-container {
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
}

.background-text h1{
    font-family: 'LeagueSpartan', sans-serif;
    font-size: 6vw;
    letter-spacing: 3px;
    color: #ffffff;
}

.contact-section {
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: relative;
  align-items: center;
  border-radius: 2%;
  border: 0.4px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  width: 80%; /* Reduce el ancho de la celda de contacto */
  max-width: 670px; /* Ajusta el tamaño máximo para pantallas más grandes */
  margin: 0px auto; /* Centra el contenedor y ajusta el margen */
 
}

.contact-blur {
  position: absolute;
  top: 0%;
  margin-top: -4%;
  width: 100%;
  height: 8%;
  border-width: 2px;
}

.contact-form {
 
  padding-top: 10%; /* Reduce el padding superior */
  padding-left: 10%; /* Reduce el padding lateral */
  padding-right: 10%;
  padding-bottom: 10%;
  border-radius: 2%;
  width: 100%; /* Asegura que el formulario use todo el ancho del contenedor */
  max-width: 700px; /* Ajusta el tamaño máximo para el formulario */
  box-sizing: border-box; /* Asegura que el padding y el border estén incluidos en el width */
  backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.contact-form p {
  font-family: 'LeagueSpartan', sans-serif;
  color: #ffffff;
  padding-left: 20px;
  padding-bottom: 15px;
  font-size: 20px; /* Reduce el tamaño de fuente */
}

.contact-form input,
.contact-form textarea {
  background-color: transparent;
  color: #ccc;
  width: 100%;
  padding: 8px; /* Reduce el padding de los campos de entrada */
  margin-bottom: 8px; /* Reduce el margen inferior de los campos */
  border-radius: 30px;
  border: 2px solid transparent;
  background-image: linear-gradient(to left, rgba(255, 255, 255, 0.0), rgba(0, 0, 0, 0.3)),
                    linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: #fff;
  box-sizing: border-box;
  font-family: 'LeagueSpartan', sans-serif;
}

.contact-form textarea {
  padding-left: 15px;
  height: 150px; /* Reduce la altura del campo de texto */
}

input[type="text"],
input[type="email"],
textarea {
  padding-left: 15px;
  border-radius: 40px;
  border: 2px solid transparent;
  background-image: linear-gradient(to left, rgba(255, 255, 255, 0.0), rgba(0, 0, 0, 0.3)),
                    linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: #fff;
  font-family: 'LeagueSpartan', sans-serif;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  outline: none;
  border: 2px solid transparent;
  background-image: linear-gradient(to left, rgba(255, 255, 255, 0.0), rgba(0, 0, 0, 0.3)),
                    linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: #fff;
}


.contact-form .captcha {
    margin-bottom: 20px;
}

.contact-form .g-recaptcha {

    transform:scale(1);
    transform-origin:0 0;
}


.captcha {
  margin: 20px 0; /* Espacio alrededor del CAPTCHA */
  display: flex;
  justify-content: center; /* Centra el CAPTCHA horizontalmente */
  
}



.contact-form .terms {
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    font-family: 'LeagueSpartan', sans-serif;
    color: #fff;
    font-size: 12px;
}

.contact-form .terms input {
    margin-right: 10px;
}

.contact-form .terms label {
    font-family: inherit; /* Heredar la fuente del contenedor */
    min-width: max-content;
}

.contact-form .terms label a{
    color: #fff;
    font-size: 10px;
}

.submit-container {
  text-align: center;
  margin-top: 20px; /* Ajusta el margen superior según sea necesario */
}

.submit-button {
  background: none;
  border: none;
  padding: 0;
  width: 100%; /* Hace que el botón ocupe el ancho completo del contenedor */
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.submit-image {
  width: 100%; /* Hace que la imagen ocupe el ancho completo del botón */
  max-width: 500px; /* Establece un ancho máximo si es necesario */
  height: auto; /* Mantiene la relación de aspecto de la imagen */
 
}
.doubt {
    margin-top: 8%;
    padding-bottom: 5%;
    text-align: center;
    
    color: #fff;
    font-size: 13px;
}
.doubt p{
  font-family: 'OpenSans-Regular';
}

.footer {
  background-image: url('../assets/images/fondo_footer.webp');
  background-size: cover;
  background-position: center;
  color: #fff;
  border-style: solid none none none;
  border-color:  #24AAA9;
  border-width: 2px;
  text-align: center;
  margin-top: 10px;
}

.footer nav {
  display: flex;
  justify-content: space-evenly;
align-items: center;

  flex-wrap: wrap;
  padding: 0 20px;
  margin-top: 5%;
}

/* Restablecer el diseño para pantallas pequeñas (responsive) */
@media (max-width: 768px) {
  .contact-section {
      width: 100%; /* Ancho completo en móviles */
      max-width: none; /* Sin límite de ancho */
      margin: 0 auto; /* Centrar */
      
  }

  .contact-form {
      padding-top: 10%; /* Restaurar padding superior en móviles */
      padding-left: 10%;
      padding-right: 10%;
      max-width: 100%; /* Asegurar que el ancho sea total en móviles */
  }

  .contact-form textarea {
      height: 200px; /* Restaurar la altura original del campo de texto */
  }
  .footer nav {
  
    flex-direction: column;
}

.background-text h1{
  font-size: 15vw;
}
}


.footer-block {
  font-family: 'OpenSans-Medium';
}
.footer-block p{
  margin-bottom: 15px;
}

.footer .social-icons img {
  margin: 0 10px;
  width:25px; /* Ajusta según el tamaño de los iconos */
  filter: brightness(0) invert(1); /* Cambia el color a blanco */
}

.footer .social-icons img:hover {
  filter: invert(45%) sepia(97%) saturate(327%) hue-rotate(126deg) brightness(101%) contrast(93%);
}

.footer .footer-logo {
  width: 100px; /* Ajusta según el tamaño del logo */
}

.footer .footer-links {
  list-style: none;
  padding: 0;
  margin: 0; /* Asegúrate de que no haya margen adicional */
  text-align: left; /* Alinea el texto a la izquierda */
}

.footer .footer-links li {
  margin: 0; /* Asegúrate de que no haya margen adicional */
  padding: 10px 0; /* Ajusta el padding si es necesario */
  list-style: none; /* Elimina cualquier estilo de lista predeterminado */
}

.footer .footer-links a {
  color: #fff;
  text-decoration: none;
  display: block; /* Asegúrate de que el enlace ocupe todo el espacio del li */
  padding: 0; /* Asegúrate de que no haya padding adicional */
}

.footer .footer-links a:hover {
  color: rgb(35, 168, 157);
}

.footer-bottom {
  padding-top: 10px;
  margin-top: 20px;
 
  padding-bottom: 20px;
}
.main-banner.hidden {
  display: none; /* Oculta el elemento completamente y elimina su espacio */
}
@media (max-width: 786px) {
  .footer .footer-links li {
      text-align: center;
  }
  .copyright-text{
    font-size: 0.8rem;
}
}
@media (max-width:560px){
  
.footer .social-icons img {
 
  width: 25px; /* Ajusta según el tamaño de los iconos */
  
}

.footer .footer-logo {
  width: 80px;
  margin-left: 70px;
  margin-right: 70px;
  margin-top: 40px;
  margin-bottom: 30px;
}
}