#app {
    /* padding-top: 68px; */
    font-family: "PingFang SC", STXihei, "华文细黑", "Heiti SC", "Microsoft YaHei", "微软雅黑", "WenQuanYi Micro Hei", sans-serif;
    color: rgba(48, 49, 51, 1);
}

:root {
    --header-height: 68px;
}

/* font section start */
@font-face {
    font-family: "D-DIN-PRO";
    src: url("../fonts/D-DIN-PRO-500-Medium.otf");
    font-weight: 500;
}

@font-face {
    font-family: "D-DIN-PRO";
    src: url("../fonts/D-DIN-PRO-600-SemiBold.otf");
    font-weight: 600;
}

@font-face {
    font-family: "D-DIN-PRO";
    src: url("../fonts/D-DIN-PRO-700-Bold.otf");
    font-weight: 700;
}

/* @font-face {
    font-family: "Noto Sans SC";
    src: url("../fonts/NotoSansHans-Regular.otf");
    font-weight: 400;
} */

/* font section end */
/* HEADER START */
.header {
    height: var(--header-height);
}

.header-container {
    /* width: 1200px; */
}

.header-container .left-section .logo-image {
    background-image: url("../images/header-modeling-logo-image.svg");
    /* width: 192.23px; */
    width: 37.4px;
    height: 35.48px;
    margin-right: 14.66px;
}

.header-container .left-section .logo-text-image {
    width: 140.17px;
    height: 19.82px;
}

.header-container .left-section .logo-text-image.black {
    background-image: url("../images/header-modeling-text-image-black.png");
}

.header-container .left-section .logo-text-image.white {
    background-image: url("../images/header-modeling-text-image-white.png");
}

.header-container .left-section .divider {
    /* width: 5px; */
    /* height: 24px; */
    line-height: 24px;
    font-weight: 700;
    font-size: 16px;
    /* color: rgba(48, 49, 51, 1); */
    margin-left: 10.68px;
    margin-right: 8.25px;
}

.header-container .left-section .logo-text {
    font-size: 22.64px;
    font-weight: 500;
    line-height: 33.95px;
    /* text-align: left; */
    /* color: rgba(48, 49, 51, 1); */
}

.header-container .right-section .navbar-section {
    gap: 30px;
    margin-right: 32.19px;
}

.header-container .right-section .navbar-section .navbar-item {
    /* line-height: var(--header-height); */
    font-weight: 400;
    font-size: 16px;
}

.header-container .right-section .navbar-section .navbar-item.active::after,
.header-container .right-section .navbar-section .navbar-item:hover::after {
    content: "";
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background-color: rgba(37, 110, 255, 1);
    bottom: calc(((68px - 24px) / 2 - 1px)* -1);
}

.header.text-white .header-container .right-section .navbar-section .navbar-item.active::after,
.header.text-white .header-container .right-section .navbar-section .navbar-item:hover::after {
    background-color: rgba(255, 255, 255, 1);
}

.header-container .right-section .phone-section {
    margin-right: 24px;
    gap: 8px;
}

.header-container .right-section .phone-section .phone-icon {
    width: 18px;
    height: 18px;
}

.header-container .right-section .phone-section .phone-icon.black {
    background-image: url("../images/header-phone-icon-black.svg");
}

.header-container .right-section .phone-section .phone-icon.white {
    background-image: url("../images/header-phone-icon-white.svg");
}

.header-container .right-section .phone-section .phone-text {
    font-family: "D-DIN-PRO";
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
    text-align: left;
}

.header-container .right-section .try-it-free-button {
    border-radius: 6px;
    padding: 10px 24px 10px 24px;
    background: linear-gradient(278.92deg, #256EFF 0%, #19C2FF 98.58%);
}

.header-container .right-section .mobile-nav-icon {
    width: 20px;
    height: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

.header-container .right-section .mobile-nav-icon.white {
    background-image: url("../images/header-mobile-nav-icon-white.svg");
}

.header-container .right-section .mobile-nav-icon.black {
    background-image: url("../images/header-mobile-nav-icon-black.svg");
}

/* HEADER END */

/* MOBILE HEADER START */
.mobile-nav-section {
    background-color: rgba(255, 255, 255, 1);
    padding-left: 40px;
    padding-right: 40px;
}
.mobile-nav-section .line {
    height: var(--header-height);
}

/* MOBILE HEADER END */

/* FOOTER START */
.footer {
    background: rgba(5, 11, 31, 1);
    padding-top: 79.53px;
    padding-bottom: 74.66px;
}

.footer-container {
    /* width: 1200px; */
}

.footer-container .left-section .logo-image {
    background-image: url("../images/footer-logo.svg");
    width: 211px;
    height: 38.95px;
    margin-bottom: 23.82px;
}

.footer-container .left-section .text {
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    height: 60px;
    margin-bottom: 39.23px;
}

.footer-container .left-section .wechat-section {
    gap: 10px;
    width: 141.28px;
}

.footer-container .left-section .wechat-section .wechat-image {
    /* background-image: url("../images/footer-wechat-image.svg"); */
    /* width: 141.28px; */
    height: 141.28px;
}

.footer-container .left-section .wechat-section .text {
    height: 30px;
}

.footer-container .right-section {
    gap: 57.96px;
}

.footer-container .right-section .column {
    gap: 24px;
}

.footer-container .right-section .column>.text {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.footer-container .right-section .column>a.text {
    color: rgba(255, 255, 255, 0.6);
}

.footer-container .right-section .column .icon {
    width: 18px;
    height: 18px;
    margin-right: 8.19px;
}

.footer-container .right-section .column .icon.phone-icon {
    background-image: url("../images/footer-phone-icon.svg");
}

.footer-container .right-section .column .icon.email-icon {
    background-image: url("../images/footer-email-icon.svg");
}

.footer-container .right-section .column .icon.address-icon {
    background-image: url("../images/footer-address-icon.svg");
}

/* FOOTER END */

/* utility section start */
.section-icon {
    background-image: url("../images/section-icon.svg");
}

/* utility section end */

/* side menu section start */
.side-menu-section .menu {
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 4px 35px 0px rgba(28, 67, 125, 0.1);
}

.side-menu-section .menu .icon {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
}

.side-menu-section .menu:hover {
    background: linear-gradient(306.04deg, #256EFF 12.32%, #19C2FF 85.67%);
}


.side-menu-section .menu.try .icon {
    background-image: url("../images/side-menu/side-menu-try-icon.png");
}

.side-menu-section .menu.try:hover .icon {
    background-image: url("../images/side-menu/side-menu-try-icon-hover.png");
}

.side-menu-section .menu.phone .icon {
    background-image: url("../images/side-menu/side-menu-phone-icon.png");
}

.side-menu-section .menu.phone:hover .icon {
    background-image: url("../images/side-menu/side-menu-phone-icon-hover.png");
}

.side-menu-section .menu.wechat .icon {
    background-image: url("../images/side-menu/side-menu-wechat-icon.png");
}

.side-menu-section .menu.wechat:hover .icon {
    background-image: url("../images/side-menu/side-menu-wechat-icon-hover.png");
}

.side-menu-section .menu.go-to-top {
    background: linear-gradient(306.04deg, #256EFF 12.32%, #19C2FF 85.67%);
    /* border: 2px solid rgba(255, 255, 255, 1) */
}

.side-menu-section .menu.go-to-top .icon {
    background-image: url("../images/side-menu/side-menu-go-to-top-icon.png");
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
    width: 11.14px;
    height: 19.23px;
}

.side-menu-section .menu .tooltip {
    display: none;
    left: calc(-116px - 10px);
    top: 0px;
    height: 50px;
    width: calc(116px + 10px);
}

.side-menu-section .menu:hover .tooltip {
    display: flex;
}

.side-menu-section .menu .tooltip .text {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    width: 116px;
    font-size: 16px;
    line-height: 24px;
    border: 1px solid rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 4px 35px 0px rgba(28, 67, 125, 0.1);
}

.side-menu-section .menu .tooltip img {
    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow: 0px 4px 35px 0px rgba(28, 67, 125, 0.1);
}

.side-menu-section .menu .tooltip .tail {
    width: 10px;
    /* background-color: rgba(255, 255, 255, 0); */
    visibility: none;
}

/* .side-menu-section .menu .tooltip .relative::after {
    position: absolute;
    content: "";
    width: 17.47px;
    height: 9.42px;
    background-color: #FFFFFF;
    transform: rotate(90deg);
} */

/* side menu section end */