@font-face {
    font-family: onest;
    src: url(../fonts/Onest-Light.woff2);
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: onest;
    src: url(../fonts/Onest-Regular.woff2);
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: onest;
    src: url(../fonts/Onest-Medium.woff2);
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: onest;
    src: url(../fonts/Onest-Bold.woff2);
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: onest;
    src: url(../fonts/Onest-ExtraBold.woff2);
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: pt-mono;
    src: url(../fonts/PTMono-Regular.woff2);
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: icon;
    src: url(../fonts/cws-icon.woff2);
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
:root {
    --bg-1: #fafbfd;
    --bg-2: linear-gradient(0deg, rgba(234, 242, 255, 0.20) 0%, rgba(234, 242, 255, 0.20) 100%);
    --bg-3: #fdfdfd;
    --bg-4: linear-gradient(180deg, rgba(250, 251, 253, 0.00) 0%, #fafbfd 100%);
    --bg-5: rgba(234, 242, 255, 0.70);
    --bg-6: linear-gradient(180deg, #508dee 0.02%, #4285ee 100%);
    --bg-7: #fff;
    --bg-8: linear-gradient(133deg, #fff 51.83%, #91bafa 90.09%);
    --bg-9: linear-gradient(180deg, rgba(246, 247, 249, 0.80) 0%, rgba(216, 216, 224, 0.80) 100%);
    --bg-10: rgba(234, 242, 255, 0.30);
    --bg-11: linear-gradient(90deg, #f3f6fa 0%, #e5ebf2 31.91%, #e5ebf2 68.3%, #f3f6fa 100%);
    --bg-12: rgba(195, 195, 195, 0.10);
    --bg-13: #f2f1f4;
    --bg-14: #262c36;
    --bg-15: #ff5f56;
    --bg-16: #ffbd2e;
    --bg-17: #27c93f;
    --bg-18: linear-gradient(180deg, #f3f6fa 0%, #e5ebf2 100%);;
    --border-1: 1px solid rgba(164, 187, 235, 0.20);
    --border-2: 1px solid rgba(116, 138, 164, 0.20);
    --border-3: 1px solid rgba(255, 255, 255, 0.3);
    --border-4: 1px solid #fff;
    --shadow-1: 0 114px 68px 0 rgba(13, 36, 74, 0.05), 0 13px 28px 0 rgba(13, 36, 74, 0.10);
    --shadow-2: 0 10px 10px 0 rgba(15, 39, 77, 0.10);
    --shadow-3: 0 60px 60px -40px rgba(54, 111, 200, 0.20);
    --shadow-4: -1px -1px 1px 0 rgba(178, 185, 208, 0.40) inset, 1px 1px 1px 0 #fff inset, 0 114px 68px 0 rgba(13, 36, 74, 0.05), 0 13px 28px 0 rgba(13, 36, 74, 0.10);
    --shadow-5: 72px 51px 25px 0 rgba(29, 51, 119, 0.00), 46px 33px 23px 0 rgba(29, 51, 119, 0.01), 26px 18px 19px 0 rgba(29, 51, 119, 0.03), 11px 8px 14px 0 rgba(29, 51, 119, 0.05), 3px 2px 8px 0 rgba(29, 51, 119, 0.06);
    --shadow-6: 1px 1px 1px 0 #fff inset, -1px -1px 1px 0 #dddde4 inset, 72px 51px 25px 0 rgba(29, 51, 119, 0.00), 46px 33px 23px 0 rgba(29, 51, 119, 0.01), 26px 18px 19px 0 rgba(29, 51, 119, 0.03), 11px 8px 14px 0 rgba(29, 51, 119, 0.05), 3px 2px 8px 0 rgba(29, 51, 119, 0.06);
    --text-1: #6e7783;
    --text-2: #0063ff;
    --text-3: #858585;
    --text-4: #fdfdfd;
    --text-5: #353844;
    --text-6: #404040;
    --text-7: #4f9ffd;
    --text-8: #c6d0de;
    --text-9: #01c286;
}
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: onest;
    font-size: 16px;
    font-weight: 400;
    color: var(--text-1);
}
.wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
button, .btn {
    border: 1px solid transparent;
    background: var(--bg-8) border-box;
    box-shadow: var(--shadow-2);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-4);
    transition: color 0.6s;
    &:not(:has(a)) {
        padding: 20px 40px;
    }
    &::after {
        content: '';
        position: absolute;
        inset: 0px;
        background: var(--bg-6);
        border-radius: 8px;
        z-index: 0;
    }
    &::before {
        content: '';
        background: url(../images/btn-2.svg);
        position: absolute;
        width: 792px;
        height: 138px;
        left: -792px;
        bottom: 0;
        transition: left 0.6s;
        z-index: 1;
    }
    &:hover {
        color: var(--text-2);
        &::before {
            left: 0;
        }
    }
    &.btn-2 {
        color: var(--text-2);
        &:hover {
            color: var(--text-4);
            a {
                color: var(--text-4);
            }
        }
        &::after {
            background: var(--bg-7);
        }
        &::before {
            background: url(../images/btn.svg);
        }
        a {
            color: var(--text-2);
        }
    }
    a {
        padding: 20px 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-4);
        transition: color 0.6s;
        position: relative;
        z-index: 2;
        gap: 10px;
        &:hover {
            color: var(--text-2);
        }
        &::before {
            font-family: icon;
            font-size: 18px;
        }
    }
}
body {
    background-color: var(--bg-1);
    background-image: url(../images/header-bg.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top center;
    a {
        text-decoration: none;
    }
}
header {
    position: fixed;
    left: 0;
    right: 0;
    top: 20px;
    z-index: 10;
    .wrapper {
        border-radius: 20px;
        border: var(--border-1);
        background: var(--bg-2);
        box-shadow: var(--shadow-1);
        backdrop-filter: blur(8px);
        padding: 10px;
        .line {
            border-radius: 10px;
            background: var(--bg-1);
            border: var(--border-2);
            padding: 9px 19px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .logo {
                display: flex;
                justify-content: space-between;
                align-items: center;
                img {
                    height: 20px;
                    display: block;
                }
                .burger {
                    border-radius: 8px;
                    border: var(--border-4);
                    background: var(--bg-6);
                    box-shadow: var(--shadow-2);
                    width: 40px;
                    height: 40px;
                    display: none;
                    align-items: center;
                    justify-content: center;
                    &::before {
                        font-family: icon;
                        font-size: 20px;
                        content: '\f005';
                        color: var(--text-4);
                    }
                }
            }
            nav {
                .ws-menu {
                    display: flex;
                    align-items: center;
                    gap: 30px;
                    .item {
                        &.btn {
                            a {
                                padding: 10px 20px;
                                color: var(--text-4);
                            }
                        }
                        a {
                            font-weight: 500;
                            color: var(--text-3);
                            font-size: 15px;
                            &:hover {
                                color: var(--text-2);
                            }
                        }
                    }
                }
            }
        }
    }
}
main, main.wrapper {
    margin-top: 80px;
}
footer {
    background: url(../images/footer-bg.webp) no-repeat;
    background-position:  top 200px center;
    background-size: 100%;
    padding: 80px 0 248px;
    .wrapper {
        display: flex;
        justify-content: space-between;
        gap: 40px;
        &.info {
            p, a {
                font-size: 12px;
                color: var(--text-1);
                font-weight: 300; 
            }
        }
        div {
            h3 {
                color: var(--text-5);
                font-weight: 700;
                margin-bottom: 10px;
            }
            &.content {
                max-width: 480px;
                margin-bottom: 20px;
                .logo {
                    width: 215px;
                    margin-bottom: 10px;
                }
                p {
                    font-size: 12px;
                    color: var(--text-1);
                    font-weight: 300;
                    &.about {
                        color: var(--text-5);
                        font-size: 14px;
                        font-weight: 400;
                        margin-bottom: 20px;
                    }
                }
            }
            &.menu {
                max-width: 240px;
                margin-bottom: 20px;
                .ws-menu {
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                    .item:not(.btn) {
                        a {
                            font-size: 14px;
                            color: var(--text-1);
                        }
                    }
                    .btn {
                        display: none;
                        width: 100%;
                        a {
                            padding: 10px 20px;
                        } 
                    }
                }
            }
            &.contact {
                max-width: 310px;
                margin-bottom: 20px;
                a, p {
                    font-size: 14px;
                    color: var(--text-1);
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    margin-bottom: 10px;
                    &::before {
                        font-size: 20px;
                        font-family: icon;
                    }
                    &.phone {
                        &::before {
                            content: '\f003';
                        }
                    }
                    &.work {
                        &::before {
                            content: '\f000';
                        }
                    }
                    &.mail {
                        &::before {
                            content: '\f004';
                        }
                    }
                    &.point {
                        &::before {
                            content: '\f002';
                        }
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 1200px) {
    .wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }
    header {
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media screen and (max-width: 900px) {
    header {
        top: 10px;
        &.show {
            .wrapper {
                .line {
                    height: calc(100vh - 80px);
                    .logo {
                        .burger {
                            &::before {
                                content: '\f006';
                            }
                        }
                    }
                }
            }
        }
        .wrapper {
            .line {
                background: none;
                flex-direction: column;
                gap: 10px;
                padding: 0;
                border: none;
                height: 60px;
                transition: 0.3s;
                overflow: hidden;
                .logo {
                    width: 100%;
                    background: var(--bg-1);
                    padding: 9px 19px;
                    border-radius: 10px;
                    border: var(--border-2);
                    .burger {
                        display: flex;
                    }
                }
                nav {
                    width: 100%;
                    height: 100%;
                    .ws-menu {
                        height: 100%;
                        background: var(--bg-1);
                        border-radius: 10px;
                        border: var(--border-2);
                        padding: 60px 10px 10px;
                        flex-direction: column;
                        gap: 20px;
                        .item:not(.btn) {
                            a {
                                font-size: 20px;
                                font-weight: 700;
                                color: var(--text-5);
                            }
                        }
                        .btn {
                            margin-top: auto;
                        }
                    }
                }
            }
        }
    }
    main, main.wrapper {
        margin-top: 90px;
    }
    footer {
        background-position: bottom center;
    }
}
@media screen and (max-width: 768px) {
    header {
        padding-left: 10px;
        padding-right: 10px;
    }
    footer {
        background-position: bottom center;
        padding: 80px 0 185px;
        .wrapper {
            flex-direction: column;
            gap: 0;
            padding: 0 30px;
            &.info {
                gap: 10px;
                flex-direction: column-reverse;
            }
            div {
                &.content {
                    max-width: unset;
                }
                &.menu {
                    max-width: unset;
                }
                &.contact {
                    max-width: unset;
                }
            }
        }
    }
}