/* style.css */
body {
 
  background: radial-gradient(circle, #f1f1f1, #fcfcfd); 

 min-height: 100vh;
 margin: 0;
 padding: 0;
 font-family: Arial, sans-serif;
 color: white; /* Color del texto para que sea legible */
}

.nav-link {
   color: rgb(208, 201, 201) !important;
   transition: color 0.3s ease !important;
}

.nav-link:hover {
  color: rgb(252, 214, 2) !important; /* Cambia a tu color preferido */
}
.navbar {
 width: 100%; /* Asegura que la barra de navegación ocupe todo el ancho */
 margin: 0; /* Elimina cualquier margen que pueda afectar la visualización */
 padding: 0; /* Ajusta el padding según sea necesario */
}

.container-fluid {
 padding-left: 0;
 padding-right: 0;
}

 .footer{
   margin-bottom: auto;
   
 }

 footer p{
   text-align: center;
 }


 .text {
   margin-top: 10px;
   font-family: "Candara", Sans-serif;
}
.container img {
   max-width: 100%;
   height: auto;
}
 h5{
   font-family: "Candara", Sans-serif;
   font-size: 22px;
 }

 .container {
  width: 100%;
   display: flex;
   align-items: center;
   margin-bottom: 10px; /* Espaciado entre filas si es necesario */
   color: black;
}

.container .text {
   margin-left: 10px; /* Espacio entre la imagen y el texto */
}
 /* Define el estilo inicial del h1 */
h1 {
  color: rgb(18, 1, 72);
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
  text-align: center;
  margin-top: 30px;
  opacity: 0; /* Comienza invisible */
  transform: translateY(-10px); /* Comienza un poco más arriba */
  animation: fadeIn 5s ease-out forwards; /* Aplica la animación */
}

/* Define la animación */
@keyframes fadeIn {
  to {
      opacity: 1; /* Termina completamente visible */
      transform: translateY(0); /* Termina en su posición original */
  }
}

 #texto{
   text-align: center;
   font-family: "Candara", Sans-serif;
   font-size: larger;
 }

p{
 color: black;
 
}
.card-text{
 font-family: "Candara", Sans-serif;
 font-size: larger;
}

@media only screen and (max-width: 800px) {
 /* For mobile phones: */

 .container_informe{
   display: grid;
   place-items: center; /* Centra horizontal y verticalmente */
   margin-top: 40px;
   font-family: "Candara", Sans-serif;
   font-size: 22px;
 
 }

 .txtInforme{
  margin-left: 10 px;
  margin-right: 10px;
  text-align: center;
}

 .container_informe img{

   animation: float 2s linear infinite;
   box-shadow: 6px 8px 6px rgb(21, 97, 129);
 }

 .sobreNosotrosTxt{
  color: rgb(0, 0, 0);
  margin-left: 10 px;
  margin-right: 10px;
  text-align: center;
  font-family: "Candara", Sans-serif;
  font-size: 22px;
 }
 

 
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 800px) {

 .container_informe{
   display: flex;
   align-items: center;
   margin-top: 40px;
   margin-left: 40px;
   font-family: "Candara", Sans-serif;
   font-size: 22px;
 
 }

 .container_informe img{
   margin-left: 50px;
   animation: float 2s linear infinite;
   box-shadow: 6px 8px 6px rgb(21, 97, 129);
 }

 .txtInforme{
  margin-left: 50px;
  margin-right: 50px;
  text-align: center;
}

.sobreNosotrosTxt{
  width: 70%; 
  color: rgb(0, 0, 0);
  margin-left: auto;
  margin-right: auto;
  font-family: "Candara", Sans-serif;
  font-size: 22px;
  text-align: center;
}

}

.titulo{
 margin-bottom: 5%;
}

.carruselImg {
 width: 100%;
 height: 100%;
 object-fit: fill; /* Otras opciones: contain, fill, scale-down, none */
 object-position: center; /* Centra la imagen dentro del contenedor */
}

.centrado {
 margin-left: auto;
 margin-right: auto;
 
}



.slider-area h2 {
 text-align: center;
 font-family: impact;
 font-size: 60px;
 font-weight: 500;
 text-transform: uppercase;
 letter-spacing: 2px;
 margin: 100px 0 30px 0;
 color: #fff;
}
.wrapper {
 display: flex;
 width: 600px;
 margin: 0 auto;
 overflow: hidden;
 border-radius: 180px;
 padding: 2.5rem;
 background: #ddd;
 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.item {
 animation: animate 15s alternate linear infinite;
 margin-left: 5px;
 margin-right: 5px;
}
.container:hover .item {
 animation-play-state: paused;
}
@keyframes animate {
 0% {
   transform: translate3d(0, 0, 0);
 }
 100% {
   transform: translate3d(-100px, 0, 0);
 }
}
@media (max-width:767px) {
 .slider-area h2 {
   font-size: 30px;
 }
 .wrapper {
   width: 95%;
   border-radius: 0;
   padding: 0;
 }
}

.card_1{
  box-shadow: 6px 8px 6px rgba(149, 132, 24, 0.579); 
}


.container2{
  width: 100%;
  display: flex;
  
}

.t6{
  margin: 0px -100px;
}

.t5{
  margin: 0px 360px;
}

/* Ajustes responsivos para pantallas con un ancho máximo de 1200px */
@media only screen and (max-width: 1200px) {
  .container2 {
      flex-direction: column; /* Coloca las tarjetas en columna */
      align-items: center; /* Centra las tarjetas horizontalmente */
      gap: 15px; /* Ajusta el espacio entre las tarjetas */
  }

  .card {
      width: 80%; /* Ajusta el ancho para pantallas medianas */
      margin: 15px 0; /* Ajusta el margen para pantallas medianas */
  }
}

/* Ajustes responsivos para pantallas con un ancho máximo de 800px */
@media only screen and (max-width: 800px) {
  .container2 {
      flex-direction: column; /* Coloca las tarjetas en columna */
      align-items: center; /* Centra las tarjetas horizontalmente */
      gap: 10px; /* Ajusta el espacio entre las tarjetas */
  }

  .card {
      width: 100%; /* Ajusta el ancho para pantallas pequeñas */
      margin: 10px 0; /* Ajusta el margen para pantallas pequeñas */
  }
}

/* Ajustes responsivos para pantallas con un ancho máximo de 900px */
@media only screen and (max-width: 900px) {
  .container2 {
      flex-direction: column; /* Coloca las tarjetas en columna */
      align-items: center; /* Centra las tarjetas horizontalmente */
      gap: 12px; /* Ajusta el espacio entre las tarjetas */
  }

  .card {
      width: 90%; /* Ajusta el ancho para pantallas de 900px */
      margin: 12px 0; /* Ajusta el margen para pantallas de 900px */
  }
}