body{
  margin: 0; /* Elimina el margen */
  padding: 0; /* Elimina el padding */
}

#myCarousel {
  margin: 0; /* Elimina el margen */
  padding: 0; /* Elimina el padding */
}
.carousel-item {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* .bd-placeholder-img {
  opacity: 0; 
} */
/* Hace que el SVG sea invisible */

#myCarousel {
  width: 100vw;  /* 100% del ancho de la pantalla */
  height: 100vh; /* 100% de la altura de la pantalla */
}

.carousel-item {
  width: 100vw; 
  height: 100vh;
  background-size: cover;  /* Ajusta la imagen sin deformarla */
  background-position: center; /* Centra la imagen */
  background-repeat: no-repeat;
}




/* *****************CARDS****************** */

/* Contenedor principal de la página */
.container {
  max-width: 1200px; /* Limita el ancho del contenido */
  margin: 0 auto; /* Centra el contenido */
  padding: 20px; /* Espaciado alrededor del contenido */
}

/* Contenedor de las cards */
.card-container {
  display: flex;
  flex-wrap: wrap; /* Permite que las cards pasen a otra fila si no caben */
  justify-content: center; /* Centra las cards */
  gap: 20px; /* Espacio entre cards */
}

/* Estilos de las tarjetas (cards) */
.card {
  background: white; /* Fondo blanco */
  border-radius: 12px; /* Bordes redondeados */
  padding: 20px; /* Espaciado interno */
  width: calc(50% - 20px); /* Cada card ocupa el 50% con margen */
  max-width: 350px; /* Máximo tamaño de card */
  min-width: 250px; /* Mínimo tamaño de card */
  height: 380px; /* Mayor altura para mejor visualización */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Sombra ligera */
  text-align: center; /* Centra el contenido */
  transition: all 0.3s ease-in-out; /* Transición suave */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Distribuye el contenido internamente */
  color: black; /* Texto en negro por defecto */
}

/* Card activa con color distinto */
.card.active {
  background-color: rgb(21, 43, 104); /* Color azul oscuro */
  color: white; /* Texto en blanco */
}

/* Efecto hover: cambia a color de la card activa */
.card:hover {
  background-color: rgb(21, 43, 104); /* Mismo color de la card activa */
  color: white; /* Texto en blanco */
  transform: scale(1.05); /* Aumenta un poco el tamaño al pasar el mouse */
}

/* Iconos dentro de la card */
.card-icon {
  font-size: 2.5rem; /* Icono más grande */
  margin-bottom: 10px; /* Espaciado inferior */
}

/* Títulos dentro de la card */
h2.title {
  font-size: 2rem;
  font-weight: bold;
}

/* Descripción dentro de la card */
p.description {
  color: #555; /* Color gris oscuro */
}

/* 🔹 Diseño Responsivo */
@media (max-width: 768px) {
  .row {
      flex-direction: column; /* En móviles, todo en columna */
  }

  .col-lg-6 {
      width: 100%; /* Ocupa todo el ancho en móviles */
      text-align: center;
  }

  .card {
      width: 90%; /* En móviles, las cards ocupan casi todo el ancho */
  }
}



/* TRANSICION  */

/* Estilo de las cartas */
.card {
  opacity: 0; /* Inicialmente invisible */
  transform: translateY(20px); /* Las cartas estarán un poco más abajo de su posición final */
  transition: opacity 1s ease-out, transform 1s ease-out; /* Transición suave */
}

.card.active {
  opacity: 1; /* Se hace visible */
  transform: translateY(0); /* Vuelve a su posición original */
}

/* Transición de la sección */
.services-section {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.description {
  font-size: 1rem;
  color: #666;
}

.card-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
}

/* Responsive para pantallas grandes */
@media (max-width: 768px) {
  .card {
    width: 100%;
  }
}


#footer {
  margin: 0; /* Elimina el margen */
  padding: 0; /* Elimina el padding */
}