@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;600&display=swap');

@font-face {
    font-family: 'HarmonyOSLight';
    src: url('../webfonts/harmonyos_sans_sc_light.woff') format('woff');
}

@font-face {
    font-family: 'HarmonyOSRegular';
    src: url('../webfonts/harmonyos_sans_sc_regular.woff') format('woff');
}

body, caption, span{
	font-family: 'HarmonyOSLight', sans-serif;
	color: #696969;
}

b, strong {
    font-weight: bold;
}

h1 {
    text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'HarmonyOSRegular', sans-serif;
    margin: 0 0 25px 0;
    font-weight: 600;
    text-transform: uppercase;
    color: #696969;
}

a {
    font-weight: 300;
    color: #696969;
}

a, a:hover, a:focus {
    text-decoration: none;
    -webkit-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
}

a:hover {
    color: var(--primary-colour);
}


textarea:focus, 
textarea.form-control:focus, 
input.form-control:focus, 
input[type=text]:focus, 
input[type=password]:focus, 
input[type=email]:focus, 
input[type=number]:focus, 
[type=text].form-control:focus, 
[type=password].form-control:focus, 
[type=email].form-control:focus, 
[type=tel].form-control:focus, 
[contenteditable].form-control:focus {
  outline: none;
}



.primary-text {
    color: var(--primary-colour);
}     
      
.primary-bg, .swiper-pagination .swiper-pagination-bullet-active {
    background: var(--primary-colour);
}

.primary-border{
    border-color:var(--primary-colour)!important;
}

.secondary-text {
    color: var(--secondary-colour);
}     
      
.secondary-bg {
    background: var(--secondary-colour);
}

.secondary-border{
    border-color:var(--secondary-colour)!important;
}

.tertiary-text {
    color: var(--tertiary-colour);
}     
      
.tertiary-bg {
    background: var(--tertiary-colour);
}

.tertiary-border{
    border-color:var(--tertiary-colour)!important;
}


#breadcrumbs {
    font-size: 14px;
    color: #333;
    padding: 1em 0;
    text-align: center;
}

#breadcrumbs a {
    text-decoration: none;
    color: #696969;
}

#breadcrumbs a:last-child {
    font-weight: bold;
    text-transform: uppercase;
    color: var(--primary-colour);
}


#post-header #breadcrumbs {
    font-size: 16px;
    color: #fff;
    padding: 1em 2em;
    text-shadow: 1px 1px black;
    text-align: left;
}

#post-header #breadcrumbs a {
    color: #fff;
}

.custom-logo-link {
    padding: 1em 0;
    display: block;
}

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


.scale-hover:hover{
transform: scale(1.2);
}

.scale-hover{
    transition: transform 1s ease-in-out;
}


.bgimg {
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: -1;
    object-position: 50% 50%;
}

#frontpage-sidebar1 .widget-title, #frontpage-sidebar2 .widget-title, #frontpage-sidebar3 .widget-title {
    text-transform: uppercase;
    width: fit-content;
    color: var(--primary-colour);
    position:relative;
    margin-bottom:1em;
    margin-left:auto;
    margin-right:auto;
}

#frontpage-sidebar1 .widget-title:after, #frontpage-sidebar2 .widget-title:after, #frontpage-sidebar3 .widget-title:after {
    content: '';
    background: var(--primary-colour);
    height: 2px;
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 80%;
}

#frontpage-sidebar1 .widget-title.text-center:after, #frontpage-sidebar2 .widget-title.text-center:after {
    left:50%!important;
    transform:translateX(-50%);
}

#frontpage-sidebar1 .widget-title span {
    font-size: medium;
}

ul.menu {
    padding: 0;
}

/* Header Custom Style */

header{
    width: 100%;
    z-index: 10;
}

.site-logo {
    z-index: 1;
}


img.custom-logo {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 250px;
    margin: auto auto;
}

span.display-name {
    color: #fff;
}

.links-menu li {
    margin: 0 1em;
}

@media screen and ( max-width: 767px) {
    .top-bar {
    display: none;
}
}

@media screen and ( min-width: 768px) {
    .top-bar {
    display: inline-flex;
}
}

.top-bar, .top-bar ul {
    list-style: none;
    justify-content: flex-start;
    margin: 0;
    position: relative;
    padding: 0;
}

.top-bar li {
    padding: 0 1.5em;
    margin: 1em 0;
    border-right: 1px solid #696969;
    position: relative;
    text-align: center;
}

.top-bar li a:after {
    content: '';
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    height: 2px;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
    background: var(--secondary-colour);
}

.top-bar li a:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
  }

.top-bar li a:lang(zh), .main-nav li:lang(zh) {
    font-weight: 400;
}

.top-bar li .sub-menu {
    display: none;
    position: absolute;
    z-index: 10;
    top: 200%;
    left: 0;
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 200px;
}

.top-bar li .sub-menu a {
    color: #fff;
    padding: 1rem 0.25rem;
    text-align: center;
    display: block;
    text-decoration: none;
}


header .top-bar .menu-item-has-children .sub-menu > .menu-item-has-children:hover .sub-menu {
	display: block;
}

header .top-bar .sub-menu li .sub-menu{
	top: 0;
	left: 100%;
}




@media only screen and (min-width: 768px){
header .top-bar li a {
    font-weight: bold;
    text-transform: uppercase;
    font-size: medium;
}
}

.toggle-nav {
    display: none !important;
}

@media screen and ( max-width: 767px) {
.toggle-nav {
    display: inline-block!important;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 2em;
}

.toggle-nav:hover, .toggle-nav.active {
    text-decoration: none;
}    
}

.main-nav {
    position: relative;
    top: 0;
    width: 100%;
    z-index: 2;
}

.main-nav ul {
    display: none;
    text-align: center;
    padding-left: 0;
    margin:0;
}

.main-nav li {
    display: block;
    float: none;
    padding: 1em 0em;
}

.main-nav li a {
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    font-size: medium;
}

.main-nav .lang-item span {
    color: #fff;
}


h1.page-title {
    z-index: 99;
    position: absolute;
    color: #fff;
}

#frontpage-sidebar1 aside{
        background-color: var(--secondary-colour);
}

#frontpage-sidebar1 aside:nth-child(2n){
        background-color: #fff;
}

.notices-widget {
    list-style: none;
}

.notices-widget .post-title {
    margin-bottom: 5px;
}

.notices-widget .post-date span{
    font-weight: bold;
}

.notices-widget .day {
    font-size: x-large;
    margin-right: 3px;
}

.notices-widget li {
    border-right: 1px solid #eee;
}

.notices-widget li:last-child {
  border-right: none;
}

footer {
    background-color: var(--secondary-bg);
}

.footer-slogan, #post-header{
    overflow:hidden;
    position:relative;
    width:100%;
}


    .footer-slogan, #post-header{
        aspect-ratio: 5 / 3;
    }



@media only screen and (min-width: 768px) and (max-width: 1023px){
    .footer-slogan, #post-header{
        aspect-ratio: 5 / 2;
    }
}

@media only screen and (min-width: 1024px){
    .footer-slogan, #post-header{
        aspect-ratio: 5 / 1;
    }
}

.footer-slogan div{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    border: 2px solid #fff;
    padding: 2%;
    letter-spacing: 2px;
    position:absolute;
    text-align:center;
}

.footer-slogan img{
    object-fit:cover;
    filter: brightness(0.5);
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    width: 100%;
    height:100%;
    position:absolute;
}

#post-header img{
    object-fit:cover;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    width: 100%;
    height:100%;
    position:absolute;
}

#category-menu li{
position:relative;
border-left:5px solid var(--primary-colour);
padding:1em;
}

#category-menu li:after {
    content: '';
    width: 95%;
    position: absolute;
    border-bottom: 1px solid #eee;
    right: 0;
    bottom: 0;
}

#category-menu li:hover, .archive-posts li:hover, .notices-widget li:hover {
    background-color: #eee;
}

#category-menu li, .archive-posts li, .notices-widget li {
    transition: background-color 0.5s ease-in-out;
}

.archive-posts li {
    border-bottom: 1px solid #eee;
    padding: 2em 1em;
}


#footer-sidebar ul {
    list-style: none;
    padding-left: 0rem;
    line-height: 1.5;
}


footer aside{
    background:unset;
}



.footer-bar {
    list-style: none;
    display: inline-flex;
    padding-left: 0;
    margin-bottom: 0.5em;
}

.footer-bar li a {
    color: var(--secondary-colour);
}

.footer-bar li {
    border-right: 1px solid var(--secondary-colour);
    padding-right: 1em;
    padding-left: 1em;
}

.footer-bar li:last-child {
    border-right: 0;
}

.footer-bar li:first-child {
    padding-left: 0;
}
      

.searchbar {
    border: 1px solid #d9d9d9;
    border-right: none;
    background: #fff;
    width: 210px;
    height: 28px;
    line-height: 28px;
    padding-left: 10px;
    vertical-align: middle;
    margin: 0;
    float: left;
    color: #999;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    outline: none;
}

.searchBtn {
    float: right;
    cursor: pointer;
    border: 1px solid #d9d9d9;
    border-left: none;
    background: #fff;
    margin: 0;
    width: 35px;
    height: 28px;
    line-height: 28px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    color:#999;
}

.widget_category_highlight_widget .title-box {
    background-color: var(--tertiary-colour);
    padding: 0.5em 1em;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.widget_category_highlight_widget .widget-title { 
    color: var(--primary-colour);
    margin-bottom:0;
}

.widget_category_highlight_widget .title-box span {
    font-size: medium;
    margin: 0;
}

.widget_category_highlight_widget ul {
    position: absolute;
    top: 2em;
    left: 0;
    background-color: var(--secondary-colour);
    z-index: 1; /* Changed from -1 to 1 */
    list-style: none;
    padding: 3em 5% 5% 5%;
    border-top: 3px solid var(--tertiary-colour);
}

.widget_category_highlight_widget ul li {
    position: relative; /* Ensure positioning context for li */
    border-bottom: 1px solid #999;
    padding: 0.5em 0;
}

.widget_category_highlight_widget ul li:last-child {
    border-bottom: 0;
}

.widget_category_highlight_widget ul li a {
    position: relative; /* Ensure that the link is clickable */
    z-index: 2;
}

.post-title {
    margin-bottom: 0.5em;
}

.archive-posts .pagination {
    margin-top: 1em;
}

.nav-links a {
    border: 1px solid var(--primary-colour);
    padding: 0.2em 1em;
    color: var(--primary-colour);
}

.nav-links span {
    border: 1px solid var(--primary-colour);
    padding: 0.2em 1em;
    background: var(--primary-colour);
    color: #fff;
}

.nav-links a:hover {
    background: var(--primary-colour);
    color: #fff;
}

#live-chatbox {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 300px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 0.5em;
    z-index:9999;
}


    #chat-header {
    background: var(--primary-colour);
    color: #fff;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px 5px 0 0;
}


#chat-header h4 {
    color: var(--secondary);
    margin: 0;
}

#toggle-chatbox {
    background: none;
    color: var(--secondary);
    border-width: 0;
}

#offline-message-form {
  padding: 10px;
}

#offline-message-form input, 
#offline-message-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

#offline-message-form button {
    width: 100%;
    padding: 10px;
    background: var(--tertiary-colour);
    color: var(--primary-colour);
    border: none;
    border-radius: 3px;
    font-weight: bold;
    font-size: large;
}