.image-wrapper.bg-overlay:before {
  background: linear-gradient(45deg, rgba(9, 50, 82, 0.5), rgba(0, 64, 115, 0.7), rgba(160, 188, 209, 1));
}

.image-wrapper.bg-overlay-gray-top:before {
  background: rgb(255, 255, 255);
  background: linear-gradient(340deg, rgba(255, 255, 255, 1) 55%, rgba(0, 69, 126, 0.6) 100%);
}

.image-wrapper.bg-overlay-gray-top:before {
  background: rgb(255, 255, 255);
  background: linear-gradient(340deg, rgba(255, 255, 255, 1) 55%, rgba(0, 69, 126, 0.6) 100%);
}

.image-wrapper.bg-overlay-gray-bottom:before {
  background: rgb(255, 255, 255);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 55%, rgba(0, 69, 126, 0.6) 100%);
}

/* Para pantallas pequeñas (menos de 768px) */
@media (max-width: 767.98px) {
  .logo {
    max-width: 100px; /* Asegura que la imagen no supere los 100px de ancho */
    height: auto; /* Mantén la proporción de la imagen */
  }
}

/* Para pantallas medianas y grandes */
@media (min-width: 768px) {
  .logo {
    max-width: 100%; /* Permite que la imagen se adapte al contenedor */
    max-height: 100px; /* Limita la altura máxima a 100px */
    height: auto; /* Mantén la proporción de la imagen */
  }
}

.hover-bg-blue:hover {
  background-color: var(--bs-blue);
  color: white !important;
}

.hover-bg-green:hover {
  background-color: var(--bs-green);
  color: white;
}

.hover-bg-green-deg:hover {
  background: linear-gradient(45deg, rgba(var(--bs-green-rgb), 0.9), rgba(var(--bs-blue-rgb), 1));
  color: white;
}

.bg-blue-deg {
  background: rgb(14, 17, 19);
  background: linear-gradient(
    45deg,
    rgba(9, 50, 82, 0.95),
    rgba(0, 64, 115, 0.95),
    rgb(var(--bs-sky-rgb), 0.95)
  ) !important;
}

.hover-bg-sky:hover {
  background-color: var(--bs-sky);
  color: white;
}

.hover-bg-blue:hover h4,
.hover-bg-blue:hover a,
.hover-bg-green-deg:hover h4,
.hover-bg-green-deg:hover a {
  color: white !important;
}

.card-white-deg {
  position: relative;
  background: rgb(255, 255, 255) !important;
  background: -moz-linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 23%,
    rgba(255, 255, 255, 0.9) 63%,
    rgba(255, 255, 255, 0.5) 100%
  ) !important;
  background: -webkit-linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 23%,
    rgba(255, 255, 255, 0.9) 63%,
    rgba(255, 255, 255, 0.5) 100%
  ) !important;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 23%,
    rgba(255, 255, 255, 0.9) 63%,
    rgba(255, 255, 255, 0.5) 100%
  ) !important;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
  transition: background 0.5s ease, border-radius 0.5s ease, transform 0.5s ease-out; /* Transición para transform */
  border-radius: 15px; /* Ajusta el valor según tus necesidades */
}

.card-white-deg:hover {
  background: rgb(255, 255, 255);
  box-shadow: 2px 2px 2px 1px rgba(2, 0, 0, 0.2);
  transform: scale(1.05);
  transition: transform 0.5s ease-out;
}

/* Pseudo-elemento para el degradado */
.card-white-deg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -moz-linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 23%,
    rgba(255, 255, 255, 0.9) 63%,
    rgba(255, 255, 255, 0.5) 100%
  ) !important;
  background: -webkit-linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 23%,
    rgba(255, 255, 255, 0.9) 63%,
    rgba(255, 255, 255, 0.5) 100%
  ) !important;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 23%,
    rgba(255, 255, 255, 0.9) 63%,
    rgba(255, 255, 255, 0.5) 100%
  ) !important;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
  transition: opacity 0.5s ease, border-radius 0.5s ease;
  z-index: 1;
  pointer-events: none; /* Para que el pseudo-elemento no interfiera con los eventos del ratón */
  border-radius: 15px; /* Ajusta el valor según tus necesidades */
}

.card-white-deg:hover::before {
  opacity: 0;
}

/* Asegúrate de que el contenido de la tarjeta esté por encima del pseudo-elemento */
.card-white-deg > * {
  position: relative;
  z-index: 2;
}

.text-custom-primary {
  color: #002a4b !important;
}
.bg-custom-primary {
  background: #002a4b !important;
}
.bg-custom-light {
  background-color: #e6ebef !important;
}