.carousel-container {
    text-align: center;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    width: 300px;
}

.steps {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.step {
    width: 15px;
    height: 15px;

    background-image: url('/public/images/wwf/wwf_texture_green_light.png'); /* Replace with your actual PNG */

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-radius: 50%;
    margin: 4px 5px;
    transition: background 0.3s ease;
}

.step.active {
    background-image: url('/public/images/wwf/wwf_texture_yellow_light.png'); /* Replace with your actual PNG */
    transform: scale(1.2); /* Slight scale effect on hover */
    box-shadow: 2px 3px 0px #1f1f1f; /* Fully opaque black shadow */
    margin-top: 0px;
    cursor: auto;
}

.step.completed {
    background-image: url('/public/images/wwf/wwf_texture_green_dark.png'); /* Replace with your actual PNG */
}

.content {
    font-size: 18px;
    margin-bottom: 20px;
}

.step-content {
    display: none;
}

.step-content.active {
    display: block;
}

.step-carousel {
    text-align: center;
}

.steps-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}