/* Unified frontend fonts — same on desktop, tablet, and phone */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&display=swap");

:root {
    --lp-font: "Noto Serif SC", "STFangsong", fangsong, "Songti SC", serif;
}

html,
body {
    font-family: var(--lp-font) !important;
    color: #2c2c2c !important;
    font-size: 20px !important;
}

p {
    font-size: 20px !important;
}

.wpo-about-text p {
    color: #2c2c2c !important;
    font-size: 20px !important;
}

.wpo-about-text h2 {
    font-size: 42px !important;
}

.wpo-about-section .wpo-about-wrap .wpo-about-text h2:before,
.wpo-about-section-s2 .wpo-about-wrap .wpo-about-text h2:before {
    display: none !important;
}

.wpo-section-title h4,
.wpo-section-title-s2 h4 {
    font-size: 38px !important;
}

.wpo-section-title h2,
.wpo-section-title-s2 h2 {
    font-size: 44px !important;
}

.wpo-Service-text a {
    font-size: 24px !important;
}

.navbar-nav a {
    font-size: 17px !important;
}

.wpo-testimonial-text p {
    font-size: 22px !important;
    line-height: 1.8 !important;
}

@media (max-width: 767px) {
    html,
    body {
        font-size: 16px !important;
    }
    p {
        font-size: 16px !important;
    }
    .wpo-about-text p {
        font-size: 16px !important;
    }
    .wpo-about-text h2 {
        font-size: 30px !important;
    }
    .wpo-section-title h4,
    .wpo-section-title-s2 h4 {
        font-size: 22px !important;
        line-height: 32px !important;
    }
    .wpo-section-title h2,
    .wpo-section-title-s2 h2 {
        font-size: 26px !important;
        line-height: 36px !important;
    }
    .wpo-testimonial-text p {
        font-size: 17px !important;
    }
}

.lp-service-carousel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.lp-service-carousel .wpo-Service-item {
    margin-bottom: 0;
}

.lp-portfolio-carousel {
    display: none;
}

@media (max-width: 767px) {
    .lp-portfolio-desktop {
        display: none !important;
    }
    .lp-portfolio-carousel {
        display: block !important;
    }
}

.lp-portfolio-carousel .img-holder img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

.lp-carousel-dots {
    display: none;
    text-align: center;
    margin-top: 16px;
}

.lp-carousel-dots button {
    width: 8px;
    height: 8px;
    margin: 0 5px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #cfcfcf;
    cursor: pointer;
}

.lp-carousel-dots button.is-active {
    background: #8a6d4b;
}

@media (max-width: 991px) {
    .lp-service-carousel {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .wpo-hero-section {
        padding: 0 12px !important;
    }

    .wpo-hero-section .wpo-hero-items {
        display: block !important;
    }

    .wpo-hero-section .wpo-hero-items .owl-item img,
    .wpo-hero-section .wpo-hero-img img {
        width: 100%;
        height: auto;
        display: block;
    }

    .lp-service-carousel {
        display: block !important;
        grid-template-columns: none;
    }

    .lp-portfolio-desktop {
        display: none !important;
    }

    .lp-portfolio-carousel {
        display: block !important;
    }
}

h1, h2, h3, h4, h5, h6,
p, a, span, li, td, th, label,
input, textarea, select, button,
.chinese-text,
.english-text,
.navbar-nav a,
.sub-menu a,
.wpo-about-text,
.wpo-about-text h2,
.wpo-about-text h4,
.wpo-about-text p,
.wpo-section-title h2,
.wpo-section-title h4,
.wpo-Service-text a,
.theme-btn,
.theme-btn-s3,
.wpo-breadcumb-wrap,
.wpo-site-footer,
.lp-story-highlight,
.lp-story-body,
.lp-story-body p {
    font-family: var(--lp-font) !important;
}

.chinese-text {
    font-weight: 400 !important;
}