/* Estilos para la imagen del logo */
.logo-image {
    max-width: 200px; /* Ajusta el tamaño máximo del logo según tus necesidades */
    height: auto; /* Para mantener la proporción de la imagen */
  }
  .custom-nav {
    background-color: #f2f2f2; /* Color de fondo */
    background-image: url("img/head.jpg"); /* Imagen de fondo (si se desea) */
    background-size: cover; /* Ajusta la imagen al tamaño del nav */
    background-repeat: no-repeat; /* Evita repetir la imagen si es más pequeña que el nav */
    background-position: center center; /* Posiciona la imagen en el centro del nav */
    /* Aquí puedes agregar otros estilos según tus necesidades */
  }

  /* estilos.css */
/* estilos.css */
/* estilos.css */
.custom-nav .navbar-nav .nav-link {
  display: inline-block;
  padding: 10px 20px;
  border-left: 10px solid rgba(207, 243, 255, 0.8);; /* Color del borde */
  border-right: 10px solid rgba(207, 243, 255, 0.8);; /* Color del borde */
  background-color: rgba(207, 243, 255, 0.8); /* Color de fondo con opacidad */
  text-decoration: none; /* Eliminar subrayado de los enlaces */
  color: #333; /* Color del texto */
  z-index: 999;
}

/* Estilo cuando se pasa el cursor sobre el enlace */
.custom-nav .navbar-nav .nav-link:hover {
  background-color:  rgba(207, 243, 255, 0.8);; /* Color de fondo cuando se pasa el cursor */
  color: #333; /* Color del texto cuando se pasa el cursor */
}


/*Sección afiliados*/
/* El resto del CSS se mantiene igual */



.tab-container {
  max-width: 100%;
}

.banner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.banner img {
  width: 100%;
  display: block;
}

.banner-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: (207, 243, 255, 1);
  background-color: rgba(0, 0, 0, 0.4); /* Fondo negro con opacidad para el banner */
  padding: 20px;
  border-radius: 5px;
  
}

.banner-content h2 {
  font-size: 2em;
  margin-bottom: 10px;
}

.banner-content p {
  font-size: 1.2em;
  margin-bottom: 20px;
}

.content {
  padding: 20px;
}

h1 {
  text-align: center;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}



/* Resto de los estilos CSS */

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Centra las tarjetas horizontalmente */
}

.card {
  flex-grow: 1; /* Permite que las tarjetas se expandan para ajustar el espacio disponible */
  max-width: 300px; /* Ancho máximo de la tarjeta */
  margin: 10px; /* Espacio entre las tarjetas */
  border: none; /* Quitamos el borde para que parezca una tarjeta */
  border-radius: 10px; /* Bordes redondeados para simular una tarjeta */
  background-color: #fff; /* Fondo blanco para la tarjeta */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para resaltar la tarjeta */
  overflow: hidden; /* Ocultamos cualquier contenido que desborde */
  transition: transform 0.2s; /* Agregamos una transición suave al pasar el ratón */
}

.card:hover {
  transform: translateY(-5px); /* Efecto de elevación al pasar el ratón */
}

.card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-body {
  padding: 15px; /* Espacio interno para el contenido de la tarjeta */
  text-align: center; /* Centra el contenido horizontalmente */
}

.card-title {
  font-size: 1.5em;
  margin-bottom: 10px;
}

.card-text {
  margin-bottom: 15px;
}

.card-btn {
  background-color:rgb(139, 225, 254);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.card-btn:hover {
  background-color: #2980b9;
}

/* Estilos para que sea responsive */
@media screen and (max-width: 768px) {
  .card {
    flex-basis: calc(50% - 20px); /* Acomoda 2 tarjetas por fila */
  }
  
  .card-container {
    justify-content: flex-start; /* Alinea las tarjetas a la izquierda */
  }

  /* Estilo adicional para ajustar las tarjetas en dispositivos pequeños */
  @media screen and (max-width: 480px) {
    .card {
      flex-basis: calc(100% - 20px); /* Acomoda 1 tarjeta por fila */
    }
  }
}



.btn-center {
  display: block;
  width: 200px;
  margin: 0 auto; /* Centra el botón horizontalmente */
  margin-top: 20px; /* Añade un espacio entre las tarjetas y el botón */
  padding: 10px 20px;
  text-align: center;
  background-color:rgb(139, 225, 254);
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-center:hover {
  background-color: #2980b9;
}

/* Estilos para que sea responsive */
@media screen and (max-width: 768px) {
  .card {
    flex-basis: calc(50% - 20px); /* Acomoda 2 tarjetas por fila */
  }
  
  .card-container {
    justify-content: flex-start; /* Alinea las tarjetas a la izquierda */
  }

  .btn-center {
    width: 100%; /* Ocupa el ancho completo del contenedor */
  }
}

/* Resto de los estilos CSS */

/* Nuevo estilo para el encabezado */
.navbar {
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

/* Resto de los estilos CSS */

/* Resto de los estilos CSS */

/* Resto de los estilos CSS */

.banner {
  position: relative; /* Cambiamos a posición relativa para que no sea fijo */
  top: 0;
  left: 0;
  width: 100%;
  
   /* Quitamos el espacio en blanco ajustando el margen superior negativo */
  /* Asegura que el banner esté por encima de la barra de navegación */
}

/* Estilos para dispositivos móviles */
@media screen and (max-width: 767px) {
  .banner {
    width: 100%; /* Ancho deseado del contenedor */
    height: 800px; /* Alto deseado del contenedor */
    overflow: hidden; 
  }

  .fotobanner
  {

    width: 100%; /* Hace que la imagen ocupe el 100% del ancho del contenedor */
    height: 100%; /* Hace que la imagen ocupe el 100% del alto del contenedor */
    object-fit: cover; /* Ajusta la imagen para que cubra completamente el contenedor sin deformarse */
   }

  .navbar {
    position: fixed; /* Hacemos que la barra de navegación sea fija en dispositivos móviles */
    top: 0;
    left: 0;
    width: 100%;
   
   /* Asegura que la barra de navegación esté por encima del contenido */
  }

  .tab-container {
    padding-top: 120px; /* Ajustamos el espacio para que el contenido no quede oculto detrás del nav */
  }
}

.main-image {
  text-align: center;
  margin-top: 20px;
}

.main-image img {
  max-width: 500px;
  max-height: 500px;
  border: 2px solid #333;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  grid-gap: 10px;
  margin-top: 20px;
  padding: 10px;
}

.thumbnail {
  position: relative;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 5px;
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.image-container {
  width: 100%;
  height: 500px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.thumbnail .info {
  display: none;
  background-color: rgba(255, 255, 255, 0.8);
  color: white;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  text-align: center;
}

.thumbnail:hover {
  border-color: #333;
}

.thumbnail:hover .info {
  display: block;
}

@media screen and (max-width: 768px) {
  .textoprimerbanner {
    font-size: 5px; /* Acomoda 2 tarjetas por fila */
  }
  
  .card-container {
    justify-content: flex-start; /* Alinea las tarjetas a la izquierda */
  }

  /* Estilo adicional para ajustar las tarjetas en dispositivos pequeños */
  @media screen and (max-width: 480px) {
    .card {
      flex-basis: calc(100% - 20px); /* Acomoda 1 tarjeta por fila */
    }
  }
}


.nuestros-clientes {
  text-align: center;
  padding: 40px 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.nuestros-clientes h2 {
  font-size: 32px;
  margin-bottom: 30px;
  color: #333;
}

.logos-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.logo {
  width: 180px;
  height: 120px;
  margin: 20px;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.logo img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

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

/* Estilos para dispositivos con pantalla pequeña */
@media screen and (max-width: 768px) {
  .nuestros-clientes h2 {
    font-size: 28px;
  }
  
  .logo {
    width: 140px;
    height: 100px;
    margin: 15px;
  }
   
  .contact-map {
    
  }
 
}