.container {
    max-width: 1600px;
    margin: auto;
}

body {
    min-height: 100vh;        /* Full viewport height */
    display: flex;
    flex-direction: column;
}

.header {
}

.top-header {
    background-color: #18191F;
    height: 76px;

    .container {
        align-items: center;
        padding: 20px 0px;
        display: flex;
        flex-flow: row;
    }
}

.top-menu {
    display: flex;
    gap: 40px;
    li {
        a {
            font-size: 14px;
            line-height: 20px;
            letter-spacing: -0.25px;
            color: var(--white-color);
        }
    }
}

.top-search {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 22px;
    padding: 6px 6px 6px 16px;
    width: 260px;

    form {
        display: flex;
        gap: 8px;
    }
    input {
        width: 150px;
        background-color: transparent;
        border: none;
        outline: none;
    }
    button {
        border-radius: 23px;
        background-color: rgba(255, 255, 255, 0.1);
        border: none;
        padding: 4px 16px;
        line-height: 14px;
        font-size: 13px;
        color: var(--white-color);
    }
}

.switch-lang {
    display: flex;
    align-items: center;

    .lang-active {
        display: flex;
        gap: 4px;
        align-items: center;

        span {
            font-size: 14px;
            font-weight: 500;
            line-height: 20px;
            letter-spacing: -0.25px;
            color: var(--white-color);
        }
    }
}

.main-header {
    .container {
        padding: 24px 0px;
        display: flex;
        flex-flow: row;
    }
}

.brand {
    display: flex;
    gap: 16px;
    align-items: center;

    .apple-irp {
        display: flex;
        gap: 6px;
        border-radius: 16px;
        padding: 14px;
        background: rgba(240, 240, 244, 1);
    }
}

.main-menu {
    display: flex;
    gap: 24px;
    align-items: center;

    li {
        a {
            font-size: 14px;
            font-weight: 300;
            line-height: 20px;
            letter-spacing: -0.25px;
            color: var(--dark-blue-d10-color);
        }
    }
}

main {
    flex: 1;
}

.footer {
    background-color: var(--gray-d20-color);

    .container {
        padding: 64px 165px;
        display: flex;
        flex-flow: row;
        gap: 180px
    }

    h3 {
        color: var(--gray-l70-color);
        font-size: 20px;
        font-weight: 700;
        line-height: 26px;
    }
    h4 {
        color: var(--gray-l70-color);
        font-size: 14px;
        font-weight: 600;
        line-height: 24px;
    }

    .col-block {
        margin-top: 30px;
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }

    .info {
        flex: 0 0 100%;

        span {
            color: var(--gray-l70-color);
            font-size: 15px;
            line-height: 24px;
        }
    }

    .company-info {
        flex-wrap: wrap;
        gap: 28px !important;

        h4 {
            line-height: 28px;
        }
    }

    .company-contact {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    .company-email,
    .company-phone {
        flex: 0 0 100%;
        color: var(--gray-l70-color);
    }
    .company-email {
        background: url("/assets/svg/email.svg") no-repeat left center;
        padding-left: 23px;
    }
    .company-phone {
        background: url("/assets/svg/phone.svg") no-repeat left center;
        padding-left: 23px;
    }
}

.footer-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    li {
        flex: 0 0 100%;

        a {
            font-size: 14px;
            line-height: 26px;
            color: var(--gray-l70-color);
        }
    }
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    a {
        display: flex;
        gap: 12px;
        flex: 0 0 100%;
        font-size: 12px;
        line-height: 26px;
        color: var(--gray-l70-color);
        align-items: center;
    }
}

main {
    .container {
        padding: 16px 0 48px
    }
}