@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600;700&display=swap');


html, body {
    font-family: Poppins, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: auto;
}

.hide-on-mobile {
    display: none;
}

@media (min-width: 992px) {
    .hide-on-mobile {
        display: inline-block;
    }

    .desktop-responsive {
        display: block !important;
    }

    .custom-sidebar-expanded {
        margin-left: 13rem !important;
        transition: margin-left 0.2s ease-out, width 0.3s ease-out;
    }

    .custom-sidebar-collapsed {
        margin-left: 3rem !important;
        transition: margin-left 0.3s ease-out, width 0.3s ease-out;
    }

    .sidebar-collapsed {
        width: 3rem !important;
        transition: width 0.3s ease-out;
    }
}



.stepper-container-horizontal {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content:center !important;
    gap: 1rem !important;
}

.stepper-horizontal {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: safe center !important;
    width: 100% !important;
}

.stepper-horizontal::before {
        position: absolute !important;
        top: 50% !important;
        left: 0 !important;
        right: 0 !important;
        height: 2px !important;
        background: #ccc !important;
        z-index: 0 !important;
}

.step {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    position: relative !important;
    z-index: 1 !important;
    gap: 0.5rem !important;
}

.step-indicator {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background-color: #ccc !important;
    position: relative !important;
}

.step.active .step-indicator {
    background-color: #007bff !important;
}

.step.completed .step-indicator {
    background-color: #28a745 !important;
}

.step-label {
    font-size: 10px !important;
    color: #000 !important;
}


.stepper-content {
    text-align: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

.stepper-controls {
    display: flex !important;
    justify-content: center !important;
    gap: 1rem !important;
}
.collapse-transition {
    overflow: hidden;
    transition: max-height .5s ease-out;
}