@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-Light.ttf') format('ttf');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

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

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-Medium.ttf') format('ttf');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-SemiBold.ttf') format('ttf');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-Bold.ttf') format('ttf');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.page-header {
    width: 100%;
    height: var(--page-header-height);
    padding-left: clamp(20px, calc(88 / 1920 * 100vw), 88px);
    padding-right: clamp(20px, calc(88 / 1920 * 100vw), 56px);
    background-color: #fff;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: height .3s linear;
}

.page-header.scroll {
    --page-header-height: clamp(50px, calc(80 / 1920 * 100vw), 80px);
    background-color: transparent;   
}
.page-header.scroll::after {
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    backdrop-filter: blur(30px);
    background-color: rgba(238, 238, 238, .5);
}

.page-header__wrap {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}

.page-header__logo {
    height: clamp(24px, calc(42 / 1920 * 100vw), 42px);
    flex: 0 0 auto;
}

.page-header__content {
    flex: 1 0 0;
    padding-left: 20px;
}

.page-header .page-header__content.mobile {
    height: 0;
    position: absolute;
    z-index: 1000;
    top: var(--page-header-height);
    left: 0;
    right: 0;
    overflow: hidden;
    margin-left: 0;
    padding-left: 0;
    display: block;
}

.page-header .page-header__content.mobile.open {
    height: calc(100vh - var(--page-header-height));
    overflow-x: hidden;
    overflow-y: auto;
}

.page-header .page-header__content.mobile .page-header__content-container {
    background-color: #fff;
    display: block;
}

.page-header .page-header__content.mobile .page-header__overlay {
    position: absolute;
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .7);
    z-index: -1;
    transition: height .3s ease-out;
}

.page-header .page-header__content.mobile.open .page-header__overlay {
    height: 100%;
}

.page-header__content-container {
    display: flex;
    align-items: center;
}

.page-header__nav {
    margin-left: auto;
}

.page-header__nav__content {
    display: flex;
}

.page-header .page-header__content.mobile.open .page-header__nav__content {
    display: block;
}

.page-header__nav__content .page-header__nav-item {
    padding: 0 clamp(20px, calc(40 / 1920 * 100vw), 40px);
}
.page-header__nav__content .page-header__nav-item a {
    transition: color .3s linear;
    font-size: var(--font-size-22-clamp);
}
.page-header__nav__content .page-header__nav-item.active a,
.page-header__nav__content .page-header__nav-item a:hover {
    color: var(--primary);
}
.page-header .page-header__content.mobile .page-header__nav-item {
    --tb: clamp(8px, calc(40 / 1920 * 100vw), 40px);
    --lr: clamp(20px, calc(40 / 1920 * 100vw), 40px);
    padding: var(--tb) var(--lr);
    border-bottom: 1px solid #eee;
}

.page-header__function {
    display: flex;
    align-items: center;
    margin-left: clamp(20px, calc(40 / 1920 * 100vw), 40px);
}
.page-header .page-header__content.mobile .page-header__function {
    --tb: clamp(8px, calc(40 / 1920 * 100vw), 40px);
    padding: var(--tb) 0;
}
.page-header__function .function__search {
    width: clamp(16px, calc((18 / 1920) * 100vw), 18px);
}

.page-header .nav-menu__icon {
    margin-left: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: translate(100%, 0);
    position: absolute;
    transition: opacity, transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.page-header .nav-menu__icon-content {
    width: 30px;
    height: 20px;
    position: relative;
}

.page-header .nav-menu__icon .bar {
    position: relative;
    display: block;
    width: 100%;
    height: 3px;
    margin: 6px auto;
    background-color: var(--primary);
    border-radius: 10px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.page-header .nav-menu__icon .bar:first-child {
    margin-top: 0;
}

.page-header .nav-menu__icon .bar:last-child {
    margin-bottom: 0;
}

.page-header .nav-menu__icon-content.close .bar:nth-of-type(1) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    transform-origin: center center;
    margin: 0;
}

.page-header .nav-menu__icon-content.close .bar:nth-of-type(2) {
    opacity: 0;
}

.page-header .nav-menu__icon-content.close .bar:nth-of-type(3) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    transform-origin: center center;
    margin: 0;
}

.page-footer {
    color: #fff;
    background: url(../images/footer-bg.jpg) no-repeat center center / cover;
}

.page-footer .page-footer__top {
    --h: clamp(50px, calc((80 / 1920) * 100vw), 80px);
    font-size: var(--font-size-22-clamp);
    height: var(--h);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.page-footer .page-footer__top>img {
    height: clamp(20px, calc((30 / 1920) * 100vw), 30px);
}

.page-footer .page-footer__top .page-footer__nav {
    display: flex;
    gap: clamp(12px, calc((80 / 1920) * 100vw), 50px);
}
.page-footer .page-footer__top .page-footer__nav a {
    transition: color .3s linear;
    font-size: var(--font-size-22-clamp);
}
.page-footer .page-footer__top .page-footer__nav li a:hover {
    color: var(--primary);
}
.page-footer .page-footer__content {
    color: #fff;
    font-size: var(--font-size-14-clamp);
    font-weight: 300;
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-30);
    padding: var(--spacing-40) 0;
}

.page-footer .page-footer__content .company-info {
    display: flex;
    gap: var(--spacing-20);
    flex-direction: column;
}

.page-footer .page-footer__content .company-info__item {
    display: flex;
}

.page-footer .page-footer__content .company-info__item .icon {
    --w: 12px;
    width: var(--w);
    margin-right: 8px;
}

.page-footer .page-footer__content .title {
    line-height: 1.5;
    padding-bottom: 8px;
}

.page-footer .page-footer__content .follow-box__list {
    display: flex;
    gap: clamp(6px, calc((10 / 1920) * 100vw), 10px);
}

.page-footer .page-footer__content .follow-box__list--item {
    --w: clamp(24px, calc((40 / 1920) * 100vw), 40px);
    width: var(--w);
    height: var(--w);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .2);
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-footer .page-footer__content .follow-box__list--item img {
    width: clamp(12px, calc((40 / 1920) * 100vw), 15px);
}

.page-footer .page-footer__bottom {
    --spacing-18: clamp(10px, calc((18 / 1920) * 100vw), 18px);
    color: rgba(255, 255, 255, .5);
    font-weight: 400;
    padding: var(--spacing-18) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-20);
}

.page-footer .page-footer__bottom .links {
    color: rgba(255, 255, 255, .7);
    display: flex;
    align-items: center;
    gap: var(--spacing-20);
}

.page-footer .page-footer__bottom .links span {
    color: rgba(255, 255, 255, .5);
}

@media screen and (max-width: 1024px) {
    .page-header {
        padding-left: 0;
        padding-right: 0;
    }
    .page-header .nav-menu__icon {
        position: relative;
        opacity: 1;
        transform: translate(0, 0);
    }
    .page-footer .page-footer__top .page-footer__nav {
        display: none;
    }
    .page-footer .page-footer__bottom {
        flex-wrap: wrap;
    }
}