@font-face {
    font-family: 'Alibaba PuHuiTi';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/Alibaba-PuHuiTi-Light.ttf') format('truetype');
}
@font-face {
    font-family: 'Alibaba PuHuiTi';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/Alibaba-PuHuiTi-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Alibaba PuHuiTi';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/Alibaba-PuHuiTi-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'Alibaba PuHuiTi';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/Alibaba-PuHuiTi-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Alibaba PuHuiTi';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('fonts/Alibaba-PuHuiTi-Heavy.ttf') format('truetype');
}

:root {--gold: #e1bd48;--goldGradient: #e1bd48, #eedb77, #e1bd48;--redGradient: #6d0019, #a90329;}
body {background-color: #000f26;font-family: 'Alibaba PuHuiTi';}
img {width: 100%;height: auto;}

/* Header */
header {background:url('./images/header_section_background.webp');background-position: center;background-repeat: no-repeat;background-size: cover;border-bottom: 4px solid var(--gold);height: 100vh;}
.link {cursor: pointer;transition: .2s;}
.link:hover {transform: scale(1.25);}

/* USP */
.usp {background:url('images/usp_background.webp');background-position: bottom center;background-repeat: no-repeat;background-size: cover;padding: 50px 0 250px;}
.content-box {padding:20px;background-image: linear-gradient(to bottom right, #000f26, #02224d, #000f26);border-radius: 1rem;border: 4px solid var(--gold);min-height: 270px;}
.content-box > img {width: fit-content;height: 65px;}
.content-box .icon {padding-bottom: 15px;}
.intro p {margin-bottom: 2rem;}
#english .content-box {min-height: 328px;}

/* Social */
.social {background:url('images/social_background.webp');background-position: center;background-repeat: no-repeat;background-size: cover;height: 615px;}
.social-box {padding:15px;background-image: url('images/social_media_box.webp');background-size: auto;background-repeat: no-repeat;background-position: center;height: 475px;display: flex;flex-direction: column;justify-content: center;}
.social-icon {width: fit-content; height: 55px;}
.social-box > a {display: flex;flex-direction: column;align-items: center;color: #ffffff;padding-bottom: 15px;}

/* Footer */
footer {color: #ffffff;}
footer h4 {padding-bottom: 15px;}
footer img {width: fit-content;}
footer ul {padding-left: 0;}
footer li {list-style-type: none;padding: 0 15px 15px 0}
footer .center ul li {display: inline-block;}
footer .logo {padding-top: 50px;padding-bottom: 15px;}

/* Title */
.title {background: linear-gradient(to bottom,var(--goldGradient));-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-weight: 700;}
.tagline {width: 58%;}

/* Button */
.btn-custom {background-image: linear-gradient(var(--goldGradient));color: #a90329;font-weight: 700;padding: 8px 32px;line-height: 1.2;transition: .2s;}
.btn-custom:hover {color: #a90329;transform: scale(1.1);}

/* Tab */
.navbar {padding-top: 1rem;}
.nav-tabs {border-bottom: 0;}
.nav-tabs .nav-item.show .nav-link, 
.nav-tabs .nav-link.active {color: #000f26;background-image: linear-gradient(to bottom, var(--goldGradient));border:0}
.nav-item {background: #000000;font-weight: 700;box-shadow: 2px 2px 4px 0px rgb(0 0 0 / 50%);}
.nav-item:first-child {border-radius: 0.5rem 0 0 0.5rem;}
.nav-item:last-child {border-radius: 0 0.5rem 0.5rem 0;}
.nav-link {color: #ffffff;padding: 0.15rem .75rem;}
#eng-tab {border-radius: 0.5rem 0 0 0.5rem;}
#chn-tab {border-radius: 0 0.5rem 0.5rem 0;}

/* Mobile Screen */
@media screen and (min-width: 1025px) {
    .social .container {width: 768px;}
    .tab-pane {height: 720px;}
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
    .content-box {min-height: 289px;}
    header {background-position: center; max-height: 500px;}
    #english .content-box {min-height: 364px;}
}
@media screen and (max-width: 767px) {
    body {font-size: 0.85rem;}
    header {background-position: center; max-height: 500px;}
    footer h4 {font-size: 1.05rem;}
    #english .content-box {min-height: 455px;}
    .link:hover {transform: scale(1.1);}
    .title {font-size: 1.35rem;}
    .tagline {width: 100%;}
    .tab-pane {height: initial;}
    .content-box {min-height: 312px;}
    .social {height: auto;}
}
@media screen and (max-width: 600px) {
    .usp {background-position: left;padding: 50px 0;}
    .content-box,
    #english .content-box {min-height: initial;}
    header {background-position: center; max-height: 350px;}
    footer .center img {height: 48px;}
    footer .center li img,
    footer .right li img {height: 21px;}
    footer .right ul li {display: inline-block;}
}