@font-face {
    font-family: Montserrat;
    src: url(../fonts/montserrat-r.woff2);
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: Montserrat;
    src: url(../fonts/montserrat-m.woff2);
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: Montserrat;
    src: url(../fonts/montserrat-sb.woff2);
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: Montserrat;
    src: url(../fonts/montserrat-b.woff2);
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: wsicon;
    src: url(../fonts/ws-icon.woff2);
    font-weight: normal;
    font-style: normal;
}
:root {
    --ws-global-blue: #104b9d;
    --ws-done: #078744;
    --ws-warning: #ffb400;
    --ws-error: #ef4545;
    --ws-bg-main: #104b9d;
    --ws-bg-1: #fcfcfd;
    --ws-bg-2: #eff0f3;
    --ws-bg-3: linear-gradient(180deg, #508dee 0.02%, #4285ee 100%);
    --ws-bg-4: #1b5ebb;
    --ws-bg-5: linear-gradient(143deg, #f66161 14.35%, #db2525 86.8%);
    --ws-bg-6: #1154b1;
    --ws-bg-7: rgba(235, 242, 255, 0.10);
    --ws-bg-8: rgba(255, 255, 255, 0.30);
    --ws-bg-9: #a3a8bd;
    --ws-bg-10: rgba(252, 252, 253, 0.75);
    --ws-bg-15: #d8d9e0;
    --ws-bg-16: rgba(0, 0, 0, 0.5);
    --ws-bg-19: #f8f8fa;
    --ws-bg-20: rgba(0, 0, 0, 0.2);
    --ws-bg-21: rgba(252, 252, 253, 0.3);
    --ws-bg-22: #f3f4f6;
    --ws-bg-23: rgba(235, 242, 255, 0.30);;
    --ws-border-1: 1px solid #fcfcfd;
    --ws-border-2: 2px solid #fcfcfd;
    --ws-border-3: 1px solid #7aa7f9;
    --ws-border-4: 2px solid #7aa7f9;
    --ws-border-5: 1px solid #104b9d;
    --ws-border-7: 1px solid #eff0f3;
    --ws-border-15: 1px solid #d8d9e0;
    --ws-border-20: 2px dashed #104b9d;
    --ws-border-21: 1px solid #f6f7f9;;
    --ws-border-40: 4px solid #eff0f3;
    --ws-form-bg-1: #fcfcfd;
    --ws-form-bg-2: #eff0f3;
    --ws-form-bg-3: linear-gradient(180deg, #508dee 0.02%, #4285ee 100%);
    --ws-form-bg-4: #1b5ebb;
    --ws-form-bg-5: linear-gradient(143deg, #f66161 14.35%, #db2525 86.8%);
    --ws-form-bg-10: rgba(252, 252, 253, 0.75);
    --ws-form-bg-11: rgba(252, 252, 253, 0.5);
    --ws-form-bg-12: #4488ea;
    --ws-form-bg-13: #e7a92c;
    --ws-form-bg-14: #ef4545;
    --ws-form-bg-17: #7aa7f9;
    --ws-form-bg-18: linear-gradient(0deg, rgba(252, 252, 253, 0.15) 0%, rgba(252, 252, 253, 0.15) 100%), linear-gradient(180deg, #508dee 0.02%, #4285ee 100%);
    --ws-form-bg-19: #f8f8fa;
    --ws-form-bg-22: #f3f4f6;
    --ws-form-bg-23: #994ed1;
    --ws-form-border-1: 1px solid #fcfcfd;
    --ws-form-border-2: 2px solid #fcfcfd;
    --ws-form-border-3: 1px solid #7aa7f9;
    --ws-form-border-4: 2px solid #7aa7f9;
    --ws-form-border-5: 1px solid #104b9d;
    --ws-form-border-6: 2px solid #104b9d;
    --ws-form-border-7: 1px solid #eff0f3;
    --ws-form-border-9: 1px solid #4488ea;
    --ws-form-border-10: 2px solid #4488ea;
    --ws-form-border-11: 1px solid #1b5ebb;
    --ws-form-border-14: 2px solid #9bbfff;
    --ws-form-border-15: 1px solid #d8d9e0;
    --ws-form-border-17: 1px solid #a3a8bd;
    --ws-form-text-1: #a3a8bd;
    --ws-form-text-2: #104b9d;
    --ws-form-text-3: #4488ea;
    --ws-form-text-4: #fcfcfd;
    --ws-form-text-5: #86878b;
    --ws-form-text-6: #1e1f24;
    --ws-form-text-7: #ebf2ff;
    --ws-form-text-8: #1b5db4;
    --ws-form-text-9: #d8d9e0;
    --ws-shadow-1: 0 90px 25px 0 rgba(17, 55, 116, 0.00), 0 58px 23px 0 rgba(17, 55, 116, 0.01), 0 33px 20px 0 rgba(17, 55, 116, 0.03), 0 14px 14px 0 rgba(17, 55, 116, 0.05), 0 4px 8px 0 rgba(17, 55, 116, 0.06);;
    --ws-shadow-2: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
    --ws-shadow-3: 41px 24px 48px 0 rgba(17, 55, 116, 0.17), 10px 6px 26px 0 rgba(17, 55, 116, 0.20);
    --ws-shadow-4: 2px 0 8px 0 rgba(68, 136, 234, 0.20);
    --ws-shadow-5: 2px 0 8px 0 rgba(239, 69, 69, 0.20);
    --ws-shadow-6: 0 2px 8px 0 rgba(0, 50, 129, 0.24);
    --ws-shadow-7: 0 67px 19px 0 rgba(32, 102, 213, 0.00), 0 43px 17px 0 rgba(32, 102, 213, 0.02), 0 24px 14px 0 rgba(32, 102, 213, 0.05), 0 11px 11px 0 rgba(32, 102, 213, 0.09), 0 3px 6px 0 rgba(32, 102, 213, 0.10);
    --ws-shadow-8: 0 8px 20px 0 rgba(0, 0, 0, 0.15);
    --ws-shadow-9: 0 14px 14px 0 rgba(17, 55, 116, 0.05), 0 4px 8px 0 rgba(17, 55, 116, 0.06);
    --ws-shadow-10: 0 0 10px 0 rgba(16, 75, 157, 0.10);
    --ws-shadow-11: 0 60px 60px -40px rgba(54, 111, 200, 0.20);
    --ws-text-2: #104b9d;
    --ws-text-3: #4488ea;
    --ws-text-4: #fcfcfd;
    --ws-text-5: #86878b;
    --ws-text-6: #1e1f24;
    --ws-text-7: #ebf2ff;
    --ws-text-8: #1b5db4;
    --ws-text-9: #d8d9e0;
    --ws-text-10: #305ca6;
}
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: Montserrat;
    font-size: 16px;
    color: var(--ws-text-5);
}
body {
    background: url(../images/bg.webp) top;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    .lang {
        position: fixed;
        top: 20px;
        right: 20px;
        width: 57px;
        min-width: 57px;
        height: 40px;
        &.show .place {
            max-height: 78px;
            &::before {
                transform: rotate(180deg);
            }
            .selected {
                color: var(--ws-form-text-6);
            }
            
        }
        .place {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            max-height: 40px;
            padding: 4px;
            border-radius: 12px;
            background: var(--ws-form-bg-1);
            display: flex;
            flex-direction: column;
            gap: 4px;
            z-index: 1;
            cursor: pointer;
            overflow: hidden;
            transition: 0.3s max-height;
            &:hover {
                .ws-selected {
                    color: var(--ws-form-text-6);
                }
            }
            &::before {
                font-family: wsicon;
                content: '\e000';
                font-size: 16px;
                position: absolute;
                top: 12px;
                right: 8px;
                color: var(--ws-form-text-3);
                transition: 0.3s;
            }
            div {
                display: flex;
                justify-content: center;
                align-items: center;
                color: var(--ws-form-text-5);
                background: var(--ws-form-bg-2);
                border-radius: 8px;
                height: 32px;
                min-height: 32px;
                order: 2;
                padding: 0 8px;
                &.selected {
                    background: none;
                    justify-content: flex-start;
                    order: 1;
                    z-index: 1;
                }
                &:hover:not(.selected) {
                    background: var(--ws-form-bg-3);
                    color: var(--ws-form-text-4);
                }
            }
        }
    }
    .content {
        border-radius: 24px;
        border: var(--ws-border-21);
        background: var(--ws-bg-23);
        box-shadow: var(--ws-shadow-11);
        backdrop-filter: blur(10px);
        display: flex;
        width: 100%;
        max-width: 800px;
        padding: 10px;
        flex-direction: column;
        gap: 10px;
        .head {
            padding: 30px 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--ws-bg-1);
            border-radius: 14px;
            img {
                width: 215px;
            }
        }
        .steps {
            .step {
                padding: 40px;
                background: var(--ws-bg-1);
                border-radius: 14px;
                .title {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    h1 {
                        color: var(--ws-text-6);
                        text-align: center;
                        font-size: 32px;
                        font-weight: 700;
                    }
                    p {
                        text-align: center;
                    }
                }
            }
        }
    }
}