@font-face {
    font-family: 'Helvetica HKHS';
    src: url('./font/Helvetica.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

html,
body {
    margin: 0;
    min-height: 100vh;
}

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

.body {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 1400px;
    margin: auto;
}
/* Header */
#header {
    font-family: 'Helvetica HKHS', Arial, sans-serif;
}

.site-header {
    position: relative;
    z-index: 10;
    width: 100%;
    background: #fff;
}

.header-container {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 0;
}

.header-nav-item, .header-lang-btn {
    font-size: 14px;
    font-weight: 400;
    color: #000;
    text-decoration: none;
}

.header-logo {
    width: 200px;
    display: block;
    line-height: 0;
}

.header-logo img {
    width: 100%;
    height: auto;
    display: block;
}

/* Cover image  */
#preloader {
    background-color: rgb(255, 255, 255);
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
    min-height: 100vh;
}
#preloader .wrapper {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}
#preloader .cover-content {
    pointer-events: auto;
    position: relative;
    overflow: visible;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.element {
    position: absolute;
    height: fit-content;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.full {
    opacity: 0;
}

.bg-left-line,
.bg-right-line,
.bg-left,
.bg-right,
.left-mask,
.right-tree,
.bg-right-top-shadow {
    display: block;
    width: 100%;
}

.bg-right,
.right-tree,
.bg-right-top-shadow {
    z-index: 1;
    width: 100%;
    height: fit-content;
    display: block;
    visibility: hidden;
    clip-path: inset(0 100% 0 0);
    will-change: clip-path;
}

.bg-left,
.left-mask {
    z-index: 2;
    width: 100%;
    height: fit-content;
    display: block;
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    will-change: clip-path;
}

.bg-left.is-revealing,
.bg-right.is-revealing,
.left-mask.is-revealing,
.right-tree.is-revealing,
.bg-right-top-shadow.is-revealing {
    visibility: visible;
}

.bg-left.is-visible,
.bg-right.is-visible,
.left-mask.is-visible,
.right-tree.is-visible,
.bg-right-top-shadow.is-visible {
    clip-path: inset(0 0 0 0);
}



.left-icon,
.right-icon1,
.right-icon2,
.rects,
.rects2,
.left-human,
.right-human {
    display: block;
    width: 100%;
    pointer-events: none;
}

.left-human,
.right-human {
    z-index: 1;
    isolation: isolate;
}

.left-icon,
.right-icon1,
.right-icon2,
.rects,
.rects2 {
    z-index: 6;
    isolation: isolate;
}