html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.gradient-border {
    position: relative;
    background: white; /* Background is necessary to make the gradient visible */
    border-radius: 1rem;
    padding: 2px;
    overflow: hidden;
    background-clip: padding-box; /* Ensure the inner content is clipped */
}

    .gradient-border::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg, #3b82f6, #8b5cf6, #ec4899, #f59e0b);
        background-size: 200% 200%;
        border-radius: inherit; /* Inherit parent's border radius */
        z-index: 0; /* Make sure it stays behind the content */
        animation: rotate-gradient 4s linear infinite;
    }

    .gradient-border > div {
        position: relative; /* Ensure content stays above the gradient */
        z-index: 1;
    }

@keyframes rotate-gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}
@keyframes slideFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.custom-alert {
    animation: slideFadeIn 0.6s ease-in-out;
}