.text-outline-color-extra-medium-gray {
    -webkit-text-stroke-color: #000000 !important;
}

.border-color-extra-medium-gray {
    border-color: #000000 !important;
}

.pb-60px {
    padding-bottom: 15px !important;

}

.background-gradient {
    background: linear-gradient(90deg, #f3a952, #acd0ea, #ff8d85, #81c784, #f3a952); /* Gradiente circular */
    background-size: 300% 300%; /* Tamaño mayor para dar la vuelta */
    animation: gradient-wrap 10s linear infinite; /* Animación continua */
    height: 100%; /* Ajusta según el tamaño deseado */
    width: 100%; /* Ajusta según el tamaño deseado */
    position: relative;
    overflow: hidden; /* Asegura que las partes externas no se vean */
}

/* Animación que da la vuelta a la pantalla */
@keyframes gradient-wrap {
    0% {
        background-position: 0% 50%; /* Empieza en el lado izquierdo */
    }
    25% {
        background-position: 100% 50%; /* Gradiente cruza completamente */
    }
    50% {
        background-position: 200% 50%; /* Sale por la derecha */
    }
    75% {
        background-position: 100% 50%; /* Vuelve desde la derecha */
    }
    100% {
        background-position: 0% 50%; /* Regresa al inicio */
    }
}

.btn-yellow{
    background: linear-gradient(90deg, #f3a952, #acd0ea, #f3a952, #acd0ea, #f3a952); /* Gradiente circular */
    background-size: 500% 500%; /* Tamaño mayor para dar la vuelta */
    animation: gradient-wrap 30s linear infinite; /* Animación continua */
    position: relative;
    overflow: hidden; /* Asegura que las partes externas no se vean */
}