.magic-journey-modal .magic-header {
    background-color: #ffffff;
    padding: 20px;
    border-bottom: 1px solid #dee2e6;
}

.magic-journey-modal .magic-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--Cenape-Blue);
}

.magic-journey-modal .magic-body {
    background-color: #ffffff;
    padding: 30px;
}

.magic-journey-modal .magic-text-intro {
    font-size: 1.1rem;
    color: #333333;
    font-weight: bold;
}




.text-cenape-blue {
    color: var(--Cenape-Blue);
}

.text-cenape-orange {
    color: var(--Cenape-Orange) !important;
}


.magic-arrow-img {
    width: 90px;
    height: auto;
    padding: 15px;
}
.magic-steps {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap; /* Allows items to wrap if they don't fit in a row */
}

.magic-step {
    width: 100%;
    max-width: 25%; /* Ensure equal width on larger screens */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px; /* Add spacing between steps for small screens */
}

.magic-arrow-container {
    width: 100%; /* Full width on small screens */
    max-width: 10%;
    display: flex;
    justify-content: center;
    margin-bottom: 20px; /* Add spacing between arrows for small screens */
}

.magic-step-title {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--Cenape-Blue);
    margin: 0; /* Remove default margin for better alignment */
}

.magic-step-desc {
    font-size: 1rem;
    font-style: italic;
    color: #555555;
    text-align: center; /* Ensure the text is centered within the step */
    margin-top: 5px; /* Add slight spacing between title and description */
}

.magic-final-note {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--Cenape-Orange);
}

/* Small screens adjustments */
@media (max-width: 576px) {
    .modal-dialog-centered {
        display: flex;
        align-items: center;
        justify-content: center;
        /*min-height: 100vh; !* Ocupa toda la altura de la pantalla *!*/
    }

    .modal-content {
        margin: 0 auto;
        width: 95%;
        max-width: 95%;
        border-radius: 15px;
    }

    /* Ajustes para las clases de pasos */
    .magic-steps {
        flex-direction: column; /* Cambiar a disposición vertical */
        width: 100%;
        align-items: center;
    }

    .magic-step, .magic-arrow-container {
        width: 100%;
        max-width: none;
        margin-bottom: 15px; /* Espacio entre los elementos */
    }

    .magic-step-title {
        font-size: 1.2rem;
    }

    .magic-step-desc {
        font-size: 0.95rem;
    }
    .magic-journey-modal .magic-text-intro {
        font-size: 0.9rem;
    }
}




/* Estilos base para los círculos */
.wave-loader .circle {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--Cenape-Blue);
    animation: growShrink 1.2s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Aplicamos retrasos para crear el efecto de onda */
.wave-loader .circle:nth-child(1) {
    animation-delay: 0s;
}

.wave-loader .circle:nth-child(2) {
    animation-delay: 0.1s;
}

.wave-loader .circle:nth-child(3) {
    animation-delay: 0.2s;
}
.wave-loader .circle:nth-child(4) {
    animation-delay: 0.3s;
}
.wave-loader .circle:nth-child(5) {
    animation-delay: 0.4s;
}

/* Animación de los círculos */
@keyframes growShrink {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.4);
        opacity: 1;
    }
}