body {
  margin: 0;
  padding: 0;
  font-family: Georgia, 'Times New Roman', Times, serif;

}

header {
  width: 100%;
  height: auto;
  background: #1FA2FF;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, hsla(145, 100%, 83%, 0.6), hsla(189, 96%, 53%, 0.6), hsla(205, 100%, 56%, 0.6)), url(../assets/img/network-4894813_1920.jpg);
  /* Chrome 10-25, Safari 5.1-6 */
  background-image: linear-gradient(135deg, hsla(216, 33%, 97%, 0.834) 0%, hsla(217, 36%, 83%, 0.823) 100%), url(../assets/img/voluntarios/vol-2.jpg);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background-size: cover;
  background-size: 100% 600px;
  background-attachment: fixed;
  position: relative;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.navbar-brand {
  width: 40%;
}

.navbar-brand>img {
  width: 35%;

}

header ul li {
  margin: 0 15px;
}

header ul li a {
  color: rgb(17, 23, 111);
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.3s;
  font-weight: 200px;
}

header ul li a:hover {
  color: #47c4e1;
}

/* Sección de bienvenida */
.section-welcome {
  /* background-color: rgba(42, 77, 101, 0.447); */
  color: white;
  text-align: center;
  padding: 50px 20px;
  margin-top: 80px;
  margin-bottom: 40px;
}

.wave {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.section-welcome h1 {
  font-size: 3rem;
}

.section-welcome p {
  font-size: 1.2rem;
}

/* Estilo de la animación para el texto */
.animated-text {
  font-size: 2.5rem;
  font-weight: bold;
  background: linear-gradient(90deg, #ff8c00, #f4b400, #2a4d65);
  -webkit-background-clip: text;
  /* Hace que el gradiente se aplique solo al texto */
  background-clip: text;
  color: transparent;
  /* Asegura que el gradiente sea visible */
  display: inline-block;
  animation: slideEffect 5s ease-in-out infinite;
  /* Animación que hace que el texto se desplace */
}

/* Animación de deslizamiento */
@keyframes slideEffect {
  0% {
    transform: translateX(-10px);
    /* Desplaza el texto a la izquierda al inicio */
  }

  50% {
    transform: translateX(10px);
    /* Desplaza el texto a la derecha */
  }

  100% {
    transform: translateX(-10px);
    /* Vuelve al inicio */
  }
}

/* Sección de información */
.wave2 {
  /* position: absolute; */
  margin: 0;
  padding: 0;
  width: 100%;
}

.section-info {
  padding-bottom: 45px;
  background-color: #ffffff;
}

.section-info h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.section-info ul {
  list-style: none;
  padding: 0;
  text-align: center;
  font-size: 1.1rem;
}

.section-info ul li {
  margin: 10px 0;
}

/* .tipos-vol{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
} */
.container-card-vol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.card-title{
  color: #031d48;
}

.section-text-vol {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 30px;
}

.card {
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Sección de beneficios */
.section-benefits {
  padding: 50px 20px;
  background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);
  margin-top: 15px;
}

.section-benefits h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 30px;
}

.section-benefits ul {
  list-style: none;
  padding: 0;
  text-align: center;
  font-size: 1.1rem;
}

.section-benefits ul li {
  margin: 10px 0;
}
.navvoluntarios a {
  color: #0099ff !important;
  border-bottom: 2px solid #031d48;
}

.fontini:hover {
  color: #0099ff !important;
}

@media (max-width: 768px) {

  .navvoluntarios {
    display: none;
  }
}


/* Estilos generales del formulario */
.voluntariosform {
  background-color: #f5f1f1 !important;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 30px;
  max-width: 600px;
  margin: 0 auto;
}
.form-title{
  color: #3b2c4a;
}

h1 {
  font-size: 2rem;
  color: #333;
}

.infoform {
  font-size: 15px;
  color: #007bff;
  margin-bottom: 20px;
  text-align: justify;
}

.form-label {
  font-weight: bold;
  color: #444;
}

/* .form-select, */
.form-control {
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 15px;
  width: 100%;
}

.btn {
  font-size: 1.1rem;
  padding: 12px;
  border-radius: 5px;
}

.form-check-label {
  font-size: 0.9rem;
}

.form-check-input {
  margin-top: 5px;
}

input[type="submit"]:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}

/* Estilo para los campos de entrada de radio y checkbox */
.box-genero .form-check {
  display: inline-block;

}
.contenedor-fondo-form{
  background-image: url(../assets/img/voluntarios/vol-1.jpg);
  background-size: cover;
  background-size: 100% 600px;
  padding: 30px 0 30px 0;
}
.contenedor-card-voluntarios{
  /* background-image:linear-gradient(-20deg, hsla(264, 74%, 93%, 0.634) 0%, hsla(62, 85%, 92%, 0.623) 100%), url(../assets/img/voluntarios/vol-3.jpg); */
  background-size: cover;
  background-size: 100% 600px;
  border-start-start-radius: 10px;
  border-bottom-left-radius: 10px;
}
.container-form{
  background-image: linear-gradient(to top, hsla(241, 75%, 76%, 0.88) 0%, hsla(346, 86%, 88%, 0.88) 100%);
  /* border-end-end-radius: 10px;
  border-top-right-radius: 10px; */
  border-radius: 10px;
  
  
} 
.title-invitacion{
  color: #f4b400;
}
.subtitle-invitacion{
  color: #e9defa;
}
.text-info{
  color: #eaeafb !important;
  text-align: justify;
}
.box-genero {
  text-align: center;
  padding-top: 10px;
}
.container-info-form{
  width: 70%;
}
.form-registro{
  flex-wrap: wrap;
}
.form-group{
padding-top: 10px;
}
.container-genero{
  justify-content: center;
}
.sexo{
  padding-right: 4px;
}
.form-check-label{
  padding-right: 3px;
}


.btn-grad {background-image: linear-gradient(to right, #1D2B64 0%, #F8CDDA  51%, #1D2B64  100%)}
.btn-grad {
   /* margin: 10px;
   padding: 15px 45px; */
   text-align: center;
   text-transform: uppercase;
   transition: 0.5s;
   background-size: 200% auto;
   color: white;            
   box-shadow: 0 0 20px #eee;
   border-radius: 10px;
   display: block;
 }

 .btn-grad:hover {
   background-position: right center; /* change the direction of the change here */
   color: #fff;
   text-decoration: none;
 }


 .btn-grad:hover {
   background-position: right center; /* change the direction of the change here */
   color: #a5107b;
   text-decoration: none;
 }

/* redes sociales */

/* Estilo general para la barra lateral */
.barra-social {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 1000;
}

.barra-social ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.barra-social li {
  margin: 5px 0;
}

.barra-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background-color: hsla(216, 98%, 52%, 0.625);
  color: white;
  font-size: 1.5rem;
  text-decoration: none;
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.barra-social a:hover {
  background-color: #0056b3;
  transform: scale(1.1);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}


/* Estilo de iconos */
.barra-social a i {
  vertical-align: middle;
}

/* Ajustes para pantallas más pequeñas */
@media (max-width: 992px) {
  .barra-social {
      display: none;
  }
}

 /* Botón de desplazamiento hacia arriba */
#scrollUpBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 20%;
  padding: 10px;
  font-size: 15px;
  cursor: pointer;
  display: none;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: background-color 0.3s, transform 0.2s;
}

.contenedor-elementospie {
  width: 100%;
  margin-bottom: 0 !important;
  padding-bottom: 0;
  display: flex;

}

.cont-correos>p {
  margin: 0;
} 

.contenedor-redes-sociales>a {
  text-decoration: none;
}

.fab {
  font-size: 2em;
  list-style: none;
  margin: 10px 0 10px 5px;
  transition: all 0.3s ease;
}

.fab:hover {
  transform: scale(1.5);
}

.fa-instagram:hover {
  color: #D43089;
}

.fa-youtube:hover {
  color: #FF0000;
}

.fa-facebook-f:hover {
  color: #1877f2
}

.fa-twitter:hover {
  color: #1DA1F2
}

.fa-tiktok:hover {
  color: #25F4EE
}

.fa-spotify:hover {
  color: #1DB954
}

@media (max-width: 768px){
  .navbar-brand {
    width: 40%;
  }
  .navbar-brand>img {
    width: 200px;
  
  }
  .navbar-collapse ul{
    font-size: 30px;
    text-align: center;
  }
  .section-welcome h1 {
    font-size: 1.6em;
  }
  
  .section-welcome p {
    font-size: 1.2rem;
  }
  
  /* Estilo de la animación para el texto */
  .animated-text {
    font-size: 2.5rem;
    font-weight: bold;
    background: linear-gradient(90deg, #ff8c00, #f4b400, #2a4d65);
    -webkit-background-clip: text;
    /* Hace que el gradiente se aplique solo al texto */
    background-clip: text;
    color: transparent;
    /* Asegura que el gradiente sea visible */
    display: inline-block;
    animation: slideEffect 5s ease-in-out infinite;
    /* Animación que hace que el texto se desplace */
  }
  .info-content h2 {
    font-size: 22px;
  }
  .section-text-vol{
    font-size: 22px;
  }
  .benefits-content h2 {
    text-align: center;
    font-size: 22px;
  }
  .benefits-content li{
    font-size: 14px;
  }
  .title-invitacion{
    font-size: 18px;
  }
  .container-info-form{
    width: 100%;
    border-radius: 0;
  }
  .contenedor-card-voluntarios{
    text-align: center;
    width: 100%;
    background-color: hsla(211, 100%, 50%, 0.641);
  }
  .contenedor-card-voluntarios p{
    font-size: 14px;
  }
}

/* Animaciones */
@keyframes fadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

body {
  animation: fadeIn 1s ease-in-out;
}