/* .welcome-how-does-it-work {
    --Welcome-HDIW-Horizontal-Paddings: 80px;
    display: flex;
    padding: 128px var(--Welcome-HDIW-Horizontal-Paddings) 72px var(--Welcome-HDIW-Horizontal-Paddings);
    justify-content: center;
    align-items: center;
    gap: 72px;
    align-self: stretch;
    background-color: #f9f3e5;
    flex-direction: column;

    .hdiw-header {
        text-align: center;

        .hdiw-title {
            font-size: 40px;
            font-weight: 700;
            line-height: 56px;
        }

        .hdiw-text {
            font-size: 24px;
            font-weight: 600;
            line-height: 32px;
        }
    }

    .hdiw-steps-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 40px;

        .hdiw-steps {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 24px;
            background-color: var(--Colors-Text-Primary-Light);
            border-radius: 40px;
            padding: 32px 24px 32px 96px;
            flex: 1 0 0;
            align-self: stretch;

            .hdiw-steps-title {
                font-size: 32px;
                font-weight: 700;
                line-height: 44px;
                color: var(--Colors-Main-Dark);
                text-align: center;
            }

            .hdiw-steps-list {
                display: flex;
                flex-direction: column;
                gap: 32px;


                .hdiw-step {
                    position: relative;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    gap: 24px;
                    align-self: stretch;
                    flex-direction: row-reverse;
        
                    .hdiw-step-text {
                        font-size: 20px;
                        font-weight: 400;
                        line-height: 28px;
                    }
                    .hdiw-img-wrapper {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 24px;
                        padding: 20px;
                        background-color: var(--Colors-Text-Primary-Light);
        
                        &.yellow {
                            background-color: var(--Colors-Yellow-Main);
                        }

                        &.violet {
                            background-color: var(--Colors-Violet-500);
                        }
        
                        .hdiw-step-img {
                            height: 40px;
                            width: 40px;
                        }
                    }
        
                    .hdiw-step-arrow {
                        position: absolute;
                        left: -74px;
                        bottom: -64px;
                        width: 72px;
                        height: 107px;
                        transform: rotateY(180deg);
                    }
                }
            }
    
            
        }
    }

    @media screen and (max-width: 1280px) {
        --Welcome-HDIW-Horizontal-Paddings: 40px;
        .hdiw-steps-wrapper {
            gap: 20px;
        }
    }

    @media screen and (max-width: 1100px) {
        padding: 128px 40px 72px 40px;
        gap: 40px;
    }

    @media screen and (max-width: 980px) {
        padding: 80px 40px;

        .hdiw-steps-wrapper {
            flex-direction: column;
        }

        .default-button {
            align-self: center;
        }
    }

    @media screen and (max-width: 580px) {
        padding: 64px 20px;

        .hdiw-steps-wrapper {
            .hdiw-steps {
                padding: 32px 24px;

                .hdiw-steps-list {
                    .hdiw-step {
                        .hdiw-step-arrow {
                            display: none;
                        }
                    }
                }
            }
        }
    }
}

html[dir='rtl'] {
    .welcome-how-does-it-work {
        .hdiw-steps-wrapper {
            .hdiw-steps {
                .hdiw-steps-list {

                    @media screen and (min-width: 580px) {
                        padding: 32px 96px 32px 24px;
                    }

                    .hdiw-step-arrow {
                        left: unset;
                        right: -74px;
                        transform: none;
                    }
                }
            }
        }
    }
} */

.welcome-how-does-it-work {
    --Welcome-HDIW-Horizontal-Paddings: 80px;
    display: flex;
    padding: 128px var(--Welcome-HDIW-Horizontal-Paddings) 72px var(--Welcome-HDIW-Horizontal-Paddings);
    justify-content: center;
    align-items: center;
    gap: 72px;
    align-self: stretch;
    background-color: #f9f3e5;
    flex-direction: column;
}
.welcome-how-does-it-work .hdiw-header {
    text-align: center;
}
.welcome-how-does-it-work .hdiw-header .hdiw-title {
    font-size: 40px;
    font-weight: 700;
    line-height: 56px;
}
.welcome-how-does-it-work .hdiw-header .hdiw-text {
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
}
.welcome-how-does-it-work .hdiw-steps-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}
.welcome-how-does-it-work .hdiw-steps-wrapper .hdiw-steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    background-color: var(--Colors-Text-Primary-Light);
    border-radius: 40px;
    padding: 32px 24px 32px 96px;
    flex: 1 0 0;
    align-self: stretch;
}
.welcome-how-does-it-work .hdiw-steps-wrapper .hdiw-steps .hdiw-steps-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 44px;
    color: var(--Colors-Main-Dark);
    text-align: center;
}
.welcome-how-does-it-work .hdiw-steps-wrapper .hdiw-steps .hdiw-steps-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.welcome-how-does-it-work .hdiw-steps-wrapper .hdiw-steps .hdiw-steps-list .hdiw-step {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
    align-self: stretch;
    flex-direction: row-reverse;
}
.welcome-how-does-it-work .hdiw-steps-wrapper .hdiw-steps .hdiw-steps-list .hdiw-step .hdiw-step-text {
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
}
.welcome-how-does-it-work .hdiw-steps-wrapper .hdiw-steps .hdiw-steps-list .hdiw-step .hdiw-img-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    padding: 20px;
    background-color: var(--Colors-Text-Primary-Light);
}
.welcome-how-does-it-work .hdiw-steps-wrapper .hdiw-steps .hdiw-steps-list .hdiw-step .hdiw-img-wrapper.yellow {
    background-color: var(--Colors-Yellow-Main);
}
.welcome-how-does-it-work .hdiw-steps-wrapper .hdiw-steps .hdiw-steps-list .hdiw-step .hdiw-img-wrapper.violet {
    background-color: var(--Colors-Violet-500);
}
.welcome-how-does-it-work .hdiw-steps-wrapper .hdiw-steps .hdiw-steps-list .hdiw-step .hdiw-img-wrapper .hdiw-step-img {
    height: 40px;
    width: 40px;
}
.welcome-how-does-it-work .hdiw-steps-wrapper .hdiw-steps .hdiw-steps-list .hdiw-step .hdiw-step-arrow {
    position: absolute;
    left: -74px;
    bottom: -64px;
    width: 72px;
    height: 107px;
    transform: rotateY(180deg);
}
@media screen and (max-width: 1280px) {
    .welcome-how-does-it-work {
        --Welcome-HDIW-Horizontal-Paddings: 40px;
   }
    .welcome-how-does-it-work .hdiw-steps-wrapper {
        gap: 20px;
   }
}
@media screen and (max-width: 1100px) {
    .welcome-how-does-it-work {
        padding: 128px 40px 72px 40px;
        gap: 40px;
   }
}
@media screen and (max-width: 980px) {
    .welcome-how-does-it-work {
        padding: 80px 40px;
   }
    .welcome-how-does-it-work .hdiw-steps-wrapper {
        flex-direction: column;
   }
    .welcome-how-does-it-work .default-button {
        align-self: center;
   }
}
@media screen and (max-width: 580px) {
    .welcome-how-does-it-work {
        padding: 64px 20px;
   }
    .welcome-how-does-it-work .hdiw-steps-wrapper .hdiw-steps {
        padding: 32px 24px;
   }
    .welcome-how-does-it-work .hdiw-steps-wrapper .hdiw-steps .hdiw-steps-list .hdiw-step .hdiw-step-arrow {
        display: none;
   }
}
@media screen and (min-width: 580px) {
    html[dir='rtl'] .welcome-how-does-it-work .hdiw-steps-wrapper .hdiw-steps .hdiw-steps-list {
        padding: 32px 96px 32px 24px;
   }
}
html[dir='rtl'] .welcome-how-does-it-work .hdiw-steps-wrapper .hdiw-steps .hdiw-steps-list .hdiw-step-arrow {
    left: unset;
    right: -74px;
    transform: none;
}
