@font-face {
  font-family: 'Adam-Bold';
  src: url('../fonts/Adam-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'LEMONMILK-Bold';
  src: url('../fonts/LEMONMILK-Bold.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.custom-cont {
  display: flex;
  flex-wrap: wrap; /* Permite que las tarjetas sean responsivas */
  justify-content: center; /* Centra las tarjetas horizontalmente */
  gap: 35px; /* Espaciado entre las tarjetas */
}

.custom-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 95%;
  max-width: 350px; /* Define un ancho fijo para todas las tarjetas */
  height: 600px; /* Altura fija para todas las tarjetas */
  margin: 0 auto; /* Centrado */
  padding: 15px; /* Espaciado interno */
  border-radius: 8px;
  background-color: #21333A; /* Fondo oscuro */
  color: #FFFFFF; /* Texto blanco */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra */
  text-align: center; /* Centra el texto */
  overflow: hidden; /* Asegura que no se salga el contenido */
  transition: transform 0.3s ease-in-out;
}

.custom-card:hover {
  transform: translateY(-10px); /* Movimiento al pasar el mouse */
}

.card-img-top {
  width: 80px; /* Tamaño fijo para las imágenes */
  height: 80px; /* Tamaño fijo */
  object-fit: contain; /* Mantiene la proporción de la imagen */
  margin-bottom: 0px; /* Espaciado inferior */
  margin-top: 40px;
}

.custom-title {
  font-family: LEMONMILK-Bold !important;
  font-size: 1rem; /* Tamaño del título */
  font-weight: bold;
  padding-top: 0px;
  text-transform: uppercase;
}

.custom-text {
  font-size: 1rem; /* Tamaño del texto */
  font-family: Adam-Bold !important;  
  line-height: 1.4;
  margin-bottom: 10px;
  flex-grow: 1; /* Permite que el texto ocupe el espacio disponible */
  text-overflow: ellipsis; /* Añade puntos suspensivos si el texto es muy largo */
  max-height: 60px; /* Asegura que no exceda un máximo */
}

.btn-custom {
  background-color: #FFFBF1;
  color: #21333A;
  border: none;
  padding: 10px 20px;
  font-size: 1rem; /* Tamaño del texto del botón */
  border-radius: 5px;
  font-weight: bold;
  font-family: Adam-Bold !important;
  cursor: pointer;
  align-self: center;
  margin-bottom: 70px;
}

.btn-custom:hover {
  background-color: #788AA3;
}

/* Responsividad */
@media (max-width: 576px) {
  .custom-card {
    max-width: 100%; /* Ancho completo en pantallas pequeñas */
    height: 450px; /* Menor altura en pantallas pequeñas */
  }

  .card-img-top {
    width: 60px; /* Reducimos el tamaño del ícono */
    height: 60px;
    margin-top: 20px;
  }

  .custom-title {
    font-size: 0.8rem; /* Reducimos el tamaño del título */
  }

  .custom-text {
    font-size: 0.8rem; /* Reducimos el tamaño del texto */
  }

  .btn-custom {
    font-size: 0.8rem; /* Reducimos el tamaño del texto del botón */
    padding: 8px 16px; /* Reducimos el padding del botón */
  }
}

@media (max-width: 768px) {
  .custom-card {
    max-width: 280px; /* Reducimos el ancho */
    height: 500px;
  }

  .card-img-top {
    width: 70px; /* Ajustamos el tamaño del ícono */
    height: 70px;
  }

  .custom-title {
    font-size: 1rem; /* Ajustamos el tamaño del título */
  }

  .custom-text {
    font-size: 0.85rem; /* Ajustamos el tamaño del texto */
  }

  .btn-custom {
    font-size: 0.9rem; /* Ajustamos el tamaño del texto del botón */
    padding: 9px 18px; /* Ajustamos el padding */
  }
}

@media (max-width: 1200px) {
  .custom-card {
    max-width: 350px; /* Tamaño estándar para pantallas grandes */
    height: 600px;
  }

  .card-img-top {
    width: 80px; /* Tamaño estándar del ícono */
    height: 80px;
  }

  .custom-title {
    font-size: 1rem; /* Tamaño estándar del título */
  }

  .custom-text {
    font-size: 0.9rem; /* Tamaño estándar del texto */
    overflow: hidden;
    max-height: 100px;
  }

  .btn-custom {
    font-size: 1rem; /* Tamaño estándar del texto del botón */
    padding: 10px 20px; /* Padding estándar del botón */
  }

  .btn-custom {
    margin-bottom: 20px;
  }
}