* {
    font-family: 'Unbounded', Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

.container {
    padding: 0 8vw;
    overflow-x: hidden;

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-transform: uppercase;
        margin: 0 -8vw;
        padding: 1.3vw 8vw;
        border-bottom: 1px solid #EBEBEB;
        top: 0;
        position: sticky;
        z-index: 100;
        background: #FFF;

        .header-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 4;

            &.open {
                display: block;
            }
        }

        .header-logo {
            z-index: 6;
            font-size: 1.3vw;
            font-weight: 700;
            line-height: 160%;
            color: #1A1A1A;
            text-decoration: none;
        }

        .header-nav {
            .header-list {
                display: flex;
                align-items: center;
                gap: 2vw;
                list-style: none;

                .header-item {
                    display: flex;
                    align-items: flex-end;

                    .header-link {
                        font-size: 0.9vw;
                        font-weight: 700;
                        line-height: 160%;
                        color: #666666;
                        text-decoration: none;
                        transition: color 0.5s;

                        &:hover {
                            color: #33D469;
                        }
                    }

                    .header-link.active {
                        border-bottom: 2px solid #34D07B;
                    }
                }
            }
        }

        .header-button {
            cursor: pointer;
            font-size: 0.9vw;
            padding: 0.6vw 1.2vw;
            background: #34D07B;
            border: none;
            outline: none;
            color: #1A1A1A;
            font-weight: 700;
            text-transform: uppercase;
            border-radius: 100px;
            transition: background 0.5s, color 0.5s;

            &:hover {
                background: #1A1A1A;
                color: #34D07B;
            }
        }

        .header-button--mobile-only {
            display: none;
        }

        .header-burger {
            display: none;
            flex-direction: column;
            gap: 5px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 4px;

            span {
                display: block;
                width: 24px;
                height: 2px;
                background: #1A1A1A;
                transition: transform 0.3s, opacity 0.3s;
            }

            &.open span:nth-child(1) {
                transform: translateY(7px) rotate(45deg);
            }

            &.open span:nth-child(2) {
                opacity: 0;
            }

            &.open span:nth-child(3) {
                transform: translateY(-7px) rotate(-45deg);
            }
        }
    }

    .footer {
        background: #1A1A1A;
        margin: 0 -8vw;
        padding: 4.2vw 8vw;

        .footer-main {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            padding-bottom: 3.4vw;
            border-bottom: 1px solid #323232;

            .footer-brand {
                .footer-logo {
                    font-size: 1.6vw;
                    line-height: 133%;
                    color: #FFFFFF;
                    font-weight: 700;
                    text-transform: uppercase;
                    text-decoration: none;
                }

                .footer-desc {
                    margin-top: 0.8vw;
                    font-size: 0.9vw;
                    max-width: 75%;
                    line-height: 145%;
                    color: #999999;
                }
            }

            .footer-nav {
                .footer-heading {
                    font-size: 0.9vw;
                    text-transform: uppercase;
                    color: #FFFFFF;
                    margin-bottom: 0.8vw;
                }

                .footer-nav-list {
                    list-style: none;
                    display: flex;
                    flex-direction: column;
                    gap: 0.8vw;

                    li {
                        a {
                            display: block;
                            text-decoration: none;
                            color: #999999;
                            font-size: 0.9vw;
                            transition: color 1s;

                            &:hover {
                                color: #FFFFFF;
                            }
                        }
                    }
                }
            }

            .footer-contacts {
                .footer-heading {
                    font-size: 0.9vw;
                    text-transform: uppercase;
                    font-style: normal;
                    color: #FFFFFF;
                    margin-bottom: 0.8vw;
                }

                .footer-contacts-link {
                    color: #999999;
                    font-size: 0.9vw;
                    text-decoration: none;
                    font-style: normal;
                    transition: color 1s;

                    &:hover {
                        color: #FFFFFF;
                    }
                }

                .footer-socials {
                    margin-top: 1.1vw;
                    display: flex;
                    gap: 0.8vw;

                    a {
                        width: fit-content;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 0.69vw;
                        padding: 0.7vw;
                        background: #323232;
                        transition: background 1s;

                        &:hover {
                            background: #202020;
                        }
                    }
                }
            }
        }

        .footer-bottom {
            padding-top: 1.3vw;
            display: grid;
            grid-template-columns: 1fr 2fr;
            color: #666666;
            font-size: 0.9vw;

            ul {
                display: flex;
                justify-content: space-between;
                align-items: center;
                list-style: none;

                li {
                    a {
                        text-decoration: none;
                        color: #666666;
                        font-size: 0.8vw;
                        transition: color 1s;

                        &:hover {
                            color: #FFFFFF;
                        }
                    }
                }
            }
        }
    }
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #00000080;
    z-index: 10;
}

.modal-dialog {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
    background-color: #fff;
    padding: 2.7vw 5.4vw;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.6vw;

    .modal-close-btn {
        position: absolute;
        right: 10px;
        top: 10px;
        color: #666;
        cursor: pointer;
        background: #f0f0f0;
        padding: 1.25vw;
        border-radius: 10px;
        outline: none;
        border: none;
    }

    .modal-title {
        font-size: 1.6vw;
        text-transform: uppercase;
    }

    .modal-subtitle {
        font-size: 0.9vw;
    }

    .modal-desc {
        display: flex;
        align-items: center;
        font-size: 0.9vw;
        color: #666;
    }
}

.modal-dialog[hidden] {
    display: none;
}

@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }

    .container {
        padding: 0 5.3vw;

        .header {
            padding: 5.3vw;
            background: #FFF;

            .header-logo {
                font-size: 4.8vw;
            }

            .header-burger {
                display: flex;
            }

            .header-nav {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                background: #fff;
                z-index: 5;
                padding: 14.5vw 5.3vw 5.3vw;

                &.open {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }

                .header-list {
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 0;

                    .header-item {
                        width: 100%;
                        border-bottom: 1px solid #EBEBEB;

                        .header-link {
                            display: block;
                            width: 100%;
                            font-size: 4.2vw;
                            color: #1A1A1A;
                            padding: 4.2vw 0;

                            &.active {
                                border-bottom: none !important;
                            }
                        }
                    }
                }
            }

            .header-button {
                font-size: 3.7vw;
                text-transform: uppercase;
                color: #000;
                text-align: center;
                line-height: 100%;
                font-weight: 500;
                margin-top: 5.3vw;
                padding: 4.2vw 0;
            }

            .header-button--desktop-only {
                display: none;
            }

            .header-button--mobile-only {
                display: block;
            }

            .header-burger {
                position: relative;
                z-index: 10;
            }
        }

        .footer {
            .footer-main {
                grid-template-columns: 1fr;
                gap: 8.5vw;

                .footer-brand {
                    .footer-logo {
                        font-size: 5.3vw;
                    }

                    .footer-desc {
                        font-size: 3.2vw;
                    }
                }

                .footer-nav {
                    .footer-heading {
                        font-size: 3.2vw;
                    }

                    .footer-nav-list {
                        gap: 2.6vw;

                        li {
                            a {
                                font-size: 3.2vw;
                            }
                        }
                    }
                }

                .footer-contacts {
                    .footer-heading {
                        font-size: 3.2vw;
                    }

                    .footer-contacts-link {
                        font-size: 3.2vw;
                    }

                    .footer-socials {
                        a {
                            border-radius: 2.1vw;
                        }
                    }
                }
            }

            .footer-bottom {
                grid-template-columns: 1fr;

                p {
                    font-size: 3.2vw;
                }

                ul {
                    margin-top: 3.2vw;
                    align-items: flex-start;
                    flex-direction: column;
                    gap: 3.2vw;

                    li {
                        a {
                            font-size: 2.9vw;
                        }
                    }
                }
            }
        }
    }
}