* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



:root {

    --primary-color: #393d44;

    --secondary-color: #856c5a;Hong Kong

    --text-color: #333;

    --light-gray: #faf9f9;

    --border-color: #999ca4;

    --accent-color: #5da8a5;

}



body {

    font-family: 'Georgia', 'Times New Roman', serif;

    color: var(--text-color);

    line-height: 1.6;

    background-color: #fff;

}



/* Navigation */

.navbar {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    background-color: white;

    z-index: 1000;

    padding: 1.5rem 0;

    border-bottom: 1px solid #e5e5e5;

}



.nav-container {

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 3rem;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.logo {

    display: flex;

    align-items: center;

    gap: 1rem;

}



 



.nav-menu {

    display: flex;

    align-items: center;

    gap: 1.5rem;

    flex-wrap: wrap;

}



.nav-menu a {

    text-decoration: none;

    color: var(--accent-color);

    font-size: 0.95rem;

    letter-spacing: 1px;

    transition: opacity 0.3s;

}



.nav-menu a:hover {

    opacity: 0.7;

}



.language-selector {

    position: relative;

    display: flex;

    align-items: center;

    gap: 0.5rem;

    cursor: pointer;

    padding: 0.5rem 1rem;

    border: 1px solid #ddd;

    border-radius: 4px;

    user-select: none;

}



.language-selector:hover {

    background-color: #f5f5f5;

}



.language-dropdown {

    position: absolute;

    top: 100%;

    right: 0;

    margin-top: 0.5rem;

    background-color: white;

    border: 1px solid #ddd;

    border-radius: 4px;

    min-width: 120px;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    display: none;

    z-index: 1001;

}



.language-dropdown.show {

    display: block;

}



.lang-option {

    padding: 0.75rem 1rem;

    cursor: pointer;

    transition: background-color 0.2s ease;

    font-size: 0.95rem;

    display: block;

    text-decoration: none;

    color: var(--text-color);

}



.lang-option:hover {

    background-color: #f5f5f5;

}



.lang-option:first-child {

    border-radius: 4px 4px 0 0;

}



.lang-option:last-child {

    border-radius: 0 0 4px 4px;

}



/* Cookie Notice */

.cookie-notice {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    background-color: rgba(0, 0, 0, 0.9);

    color: white;

    padding: 1.5rem 3rem;

    display: flex;

    justify-content: space-between;

    align-items: center;

    z-index: 999;

    font-size: 0.9rem;

}



.cookie-notice p {

    flex: 1;

    margin-right: 2rem;

}



.cookie-notice a {

    color: white;

    text-decoration: underline;

}



.cookie-buttons {

    display: flex;

    gap: 1rem;

}



.cookie-btn-outline,

.cookie-btn-filled {

    padding: 0.6rem 1.5rem;

    border: 1px solid white;

    background: transparent;

    color: white;

    cursor: pointer;

    transition: all 0.3s;

}



.cookie-btn-filled {

    background: white;

    color: black;

}



.cookie-btn-outline:hover {

    background: white;

    color: black;

}



.cookie-btn-filled:hover {

    background: transparent;

    color: white;

}



.cookie-close {

    background: transparent;

    border: none;

    color: white;

    font-size: 2rem;

    cursor: pointer;

    padding: 0 1rem;

}



/* Hero Section */

.hero-section {

    margin-top: 80px;

    width: 100%;

    height: 85vh;

    position: relative;

    overflow: hidden;

    background-color: #4a6f8a;

}



.hero-video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



/* Quote Section */

.quote-section {

    padding: 5rem 3rem;

    text-align: center;

    background-color: var(--light-gray);

}



.quote-text {

    font-size: 2rem;

    font-style: italic;

    font-weight: 300;

    margin-bottom: 1rem;

    max-width: 900px;

    margin-left: auto;

    margin-right: auto;

    line-height: 1.5;

}



.quote-author {

    font-size: 1.1rem;

    font-style: italic;

    color: #666;

}



/* About Introduction */

.about-intro {

    max-width: 1100px;

    margin: 0 auto;

    padding: 4rem 3rem;

    text-align: center;

}



.about-intro p {

    font-size: 1.1rem;

    line-height: 1.8;

    color: #555;

}



/* Design Sections */

.design-section {

    padding: 4rem 0;

}



.design-content {

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4rem;

    align-items: center;

}



.design-section.reverse .design-content {

    grid-template-columns: 1fr 1fr;

}



.design-section.reverse .design-text {

    order: 2;

}



.design-section.reverse .design-image {

    order: 1;

}



.section-label {

    font-size: 0.9rem;

    color: #999;

    margin-bottom: 1rem;

    letter-spacing: 1px;

}



.section-title {

    font-size: 2.5rem;

    margin-bottom: 1.5rem;

    font-weight: 300;

    letter-spacing: 1px;

}



.section-description {

    font-size: 1rem;

    line-height: 1.8;

    color: #666;

    margin-bottom: 2rem;

}



.view-more-btn {

    padding: 0.75rem 2.5rem;

    border: 1.5px solid var(--text-color);

    background: transparent;

    color: var(--text-color);

    cursor: pointer;

    font-size: 0.95rem;

    letter-spacing: 1.5px;

    transition: all 0.3s ease;

    font-family: 'Georgia', serif;

}



.view-more-btn:hover {

    background: var(--text-color);

    color: white;

    transform: translateY(-2px);

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);

}



.design-image img {

    width: 100%;

    height: auto;

    display: block;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.design-image img:hover {

    transform: scale(1.02);

    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);

}



/* Clients Section */

.clients-section {

    padding: 5rem 3rem;

    background-color: var(--light-gray);

    text-align: center;

}



.section-heading {

    font-size: 1.5rem;

    letter-spacing: 3px;

    font-weight: 300;

    margin-bottom: 3rem;

}



.clients-grid {

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 3rem;

    align-items: center;

}



.clients-grid img {

    width: 100%;

    max-width: 200px;

    height: auto;

    margin: 0 auto;

    filter: grayscale(100%);

    opacity: 0.7;

    transition: all 0.3s;

}



.clients-grid img:hover {

    filter: grayscale(0%);

    opacity: 1;

}



/* News Section */

.news-section {

    padding: 5rem 3rem;

    text-align: center;

}



.news-grid {

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 3rem;

    margin-top: 3rem;

}



.news-item {

    text-align: center;

}



.news-image-container {

    width: 200px;

    height: 200px;

    margin: 0 auto 1.5rem;

    border-radius: 50%;

    overflow: hidden;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    transition: transform 0.3s ease;

}



.news-image-container:hover {

    transform: scale(1.05);

}



.news-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.trophy-icon {

    width: 60px;

    height: auto;

    margin: 0 auto 1rem;

    display: block;

}



.news-year {

    font-size: 1.8rem;

    font-weight: 300;

    margin-bottom: 1rem;

}



.news-text {

    font-size: 0.95rem;

    line-height: 1.7;

    color: #555;

}



/* Studio Section */

.studio-section {

    background-color: var(--light-gray);

    padding: 5rem 0;

}



.studio-content {

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4rem;

    align-items: center;

}



.studio-image{

    max-width: 647px;

}



.studio-image img {

    width: 100%;

    height: auto;

    display: block;

    filter: grayscale(100%);

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

    transition: filter 0.3s ease;

}



.studio-image img:hover {

    filter: grayscale(50%);

}



/* Newsletter Section */

.newsletter-section {

    width: 100%;

    max-width: 550px;

    margin: 0 auto;

    text-align: center;

}



.newsletter-section h3 {

    font-size: 1.3rem;

    font-weight: 300;

    margin-bottom: 2rem;

}



.newsletter-form {

    text-align: left;

}



.form-group {

    margin-bottom: 1.5rem;

}



.form-group label {

    display: block;

    margin-bottom: 0.5rem;

    font-size: 0.9rem;

}



.form-group label span {

    color: red;

}



.form-group input {

    width: 100%;

    padding: 0.8rem 1rem;

    border: 1.5px solid #333;

    background: white;

    font-size: 1rem;

    font-family: 'Georgia', serif;

    transition: border-color 0.3s ease;

}



.form-group input:focus {

    outline: none;

    border-color: var(--accent-color);

}



.submit-btn {

    padding: 0.8rem 2.5rem;

    border: none;

    background: var(--text-color);

    color: white;

    cursor: pointer;

    font-size: 1rem;

    letter-spacing: 1px;

    transition: all 0.3s;

    float: right;

}



.submit-btn:hover {

    background: #555;

}



/* Footer */

.footer {

    background-color: white;

    padding: 3rem 3rem 2rem;

    border-top: 1px solid #e5e5e5;

}



.footer-content {

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1.5fr;

    gap: 5rem;

    align-items: end;

}



/* Newsletter Section - Left Side */

.newsletter-section {

    text-align: left;

}



.newsletter-section h3 {

    font-size: 1.3rem;

    font-weight: 300;

    margin-bottom: 2rem;

}



.newsletter-form {

    text-align: left;

}



.form-group {

    margin-bottom: 1.5rem;

}



.form-group label {

    display: block;

    margin-bottom: 0.5rem;

    font-size: 0.9rem;

}



.form-group label span {

    color: red;

}



.form-group input {

    width: 100%;

    padding: 0.8rem 1rem;

    border: 1.5px solid #333;

    background: white;

    font-size: 1rem;

    font-family: 'Georgia', serif;

    transition: border-color 0.3s ease;

}



.form-group input:focus {

    outline: none;

    border-color: var(--accent-color);

}



.submit-btn {

    padding: 0.8rem 2.5rem;

    border: none;

    background: var(--text-color);

    color: white;

    cursor: pointer;

    font-size: 1rem;

    letter-spacing: 1px;

    transition: all 0.3s;

}



.submit-btn:hover {

    background: #555;

}



/* Contact Info - Right Side */

.contact-info {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 3rem;

}



.footer-column h4 {

    font-size: 0.9rem;

    letter-spacing: 2px;

    margin-bottom: 1rem;

    font-weight: 400;

}



.footer-column a {

    color: var(--text-color);

    text-decoration: none;

    transition: opacity 0.3s;

}



.footer-column a:hover {

    opacity: 0.7;

}



.footer-column p {

    font-size: 0.95rem;

    line-height: 1.6;

}



.social-icons {

    display: flex;

    gap: 1rem;

}



.social-icons img {

    width: 30px;

    height: 30px;

    transition: opacity 0.3s;

}



.social-icons a:hover img {

    opacity: 0.7;

}



/* Bottom Footer */

.bottom-footer {

    background-color: var(--primary-color);

    color: white;

    padding: 1.5rem 3rem;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.bottom-footer p {

    font-size: 0.9rem;

}



.go-up {

    color: white;

    text-decoration: none;

    display: flex;

    align-items: center;

    gap: 0.5rem;

    transition: opacity 0.3s;

}



.go-up:hover {

    opacity: 0.7;

}

/* Projects Page Styles */

.page-header {

    margin-top: 80px;

    padding: 5rem 3rem 3rem;

    text-align: center;

    background-color: var(--light-gray);

}



.page-header h1 {

    font-size: 3rem;

    font-weight: 300;

    letter-spacing: 4px;

    margin-bottom: 1rem;

}



.page-subtitle {

    font-size: 1.2rem;

    color: #666;

    font-style: italic;

}



.projects-grid-section {

    padding: 5rem 3rem;

}



.projects-grid {

    max-width: 1400px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));

    gap: 3rem;

}



.project-card {

    background: white;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    display: flex;

    flex-direction: column;

}



.project-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);

}



.project-image {

    width: 100%;

    height: 300px;

    overflow: hidden;

    background-color: #f5f5f5;

}



.project-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

}



.project-card:hover .project-image img {

    transform: scale(1.08);

}



.project-info {

    padding: 2rem;

    flex: 1;

    display: flex;

    flex-direction: column;

}



.project-info h3 {

    font-size: 1.5rem;

    font-weight: 400;

    margin-bottom: 0.5rem;

    color: var(--text-color);

}



.project-year {

    font-size: 0.9rem;

    color: #999;

    margin-bottom: 1rem;

    letter-spacing: 1px;

}



.project-description {

    font-size: 1rem;

    line-height: 1.7;

    color: #666;

    margin-bottom: 1.5rem;

    flex: 1;

}



.project-info .view-more-btn {

    align-self: flex-start;

}

/* About Page Styles */

.about-hero {

    margin-top: 80px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    min-height: calc(100vh - 80px);

    align-items: stretch;

}



.about-hero-image {

    width: 100%;

    height: 100%;

    overflow: hidden;

}



.about-hero-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    filter: grayscale(100%);

}



.about-hero-text {

    padding: 5rem 6rem;

    display: flex;

    flex-direction: column;

    justify-content: center;

    background-color: white;

}



.about-hero-text h1 {

    font-size: 3.5rem;

    font-weight: 300;

    letter-spacing: 8px;

    margin-bottom: 2.5rem;

}



.about-hero-text p {

    font-size: 1rem;

    line-height: 1.8;

    color: #666;

    margin-bottom: 1.5rem;

}



/* Clients Section */

.about-clients-section {

    display: grid;

    grid-template-columns: 1fr 1fr;

    min-height: 100vh;

    align-items: stretch;

}



.about-clients-content {

    background-color: var(--light-gray);

    padding: 8rem 6rem;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.about-clients-content h2 {

    font-size: 2rem;

    font-weight: 300;

    letter-spacing: 4px;

    margin-bottom: 4rem;

    text-align: center;

}



.about-clients-logos {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4rem;

    align-items: center;

    justify-items: center;

}



.about-clients-logos img {

    width: 100%;

    max-width: 160px;

    height: auto;

}



.about-team-image {

    width: 100%;

    height: 100%;

    overflow: hidden;

}



.about-team-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter: grayscale(100%);

}



/* Contact Section */

.about-contact-section {

    padding: 6rem 3rem;

    background-color: white;

    text-align: center;

}



.about-contact-content {

    max-width: 1000px;

    margin: 0 auto;

}



.about-contact-content h2 {

    font-size: 2rem;

    font-weight: 300;

    letter-spacing: 4px;

    margin-bottom: 3rem;

}



.about-contact-details {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4rem;

    text-align: left;

}



/* Responsive Design */

@media (max-width: 1024px) {

    .design-content,

    .studio-content {

        grid-template-columns: 1fr;

        gap: 2rem;

    }



    .design-section.reverse .design-text,

    .design-section.reverse .design-image {

        order: unset;

    }



    .news-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .clients-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .footer-content {

        grid-template-columns: 1fr;

        gap: 3rem;

    }



    .contact-info {

        grid-template-columns: 1fr;

        gap: 2rem;

    }



    /* Projects Page Responsive */

    .project-row {

        grid-template-columns: 1fr;

        min-height: auto;

    }



    .project-row.image-right .project-text,

    .project-row.image-left .project-text {

        order: 2;

    }



    .project-row.image-right .project-img,

    .project-row.image-left .project-img {

        order: 1;

    }



    .project-img {

        height: 400px;

    }



    .project-text {

        padding: 3rem 2rem;

    }



    .project-text h2 {

        font-size: 2rem;

    }



    /* About Page Responsive */

    .about-hero {

        grid-template-columns: 1fr;

        min-height: auto;

    }



    .about-hero-image {

        height: 400px;

    }



    .about-hero-text {

        padding: 3rem 2rem;

    }



    .about-hero-text h1 {

        font-size: 2.5rem;

    }



    .about-clients-section {

        grid-template-columns: 1fr;

        min-height: auto;

    }



    .about-clients-content {

        padding: 4rem 2rem;

    }



    .about-team-image {

        height: 400px;

    }



    .about-contact-details {

        grid-template-columns: 1fr;

        gap: 2rem;

    }



    /* Portfolio Highlights 中等屏幕响应式 */

    .highlights-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 2rem;

    }



    .highlight-card.span-2 {

        grid-column: span 2;

    }

}



@media (max-width: 768px) {

    .nav-container {

        padding: 0 1.5rem;

    }



    .nav-menu {

        gap: 1rem;

        font-size: 0.8rem;

    }



    .nav-menu a {

        white-space: nowrap;

    }



    .quote-text {

        font-size: 1.5rem;

    }



    .section-title {

        font-size: 2rem;

    }



    .page-header h1 {

        font-size: 2rem;

    }



    .page-subtitle {

        font-size: 1rem;

    }



    .projects-grid {

        grid-template-columns: 1fr;

        gap: 2rem;

    }

/* About Page Mobile */

.about-hero-image {

    height: 300px;

}



.about-hero-text {

    padding: 2rem 1.5rem;

}



.about-hero-text h1 {

    font-size: 2rem;

    letter-spacing: 4px;

}



.about-hero-text p {

    font-size: 0.95rem;

}



.about-clients-content {

    padding: 3rem 1.5rem;

}



.about-clients-content h2,

.about-contact-content h2 {

    font-size: 1.5rem;

    letter-spacing: 2px;

}



.about-clients-logos {

    grid-template-columns: 1fr;

    gap: 2rem;

}



.about-team-image {

    height: 300px;

}



.about-contact-section {

    padding: 3rem 1.5rem;

}

    .news-grid {

        grid-template-columns: 1fr;

    }



    .clients-grid {

        grid-template-columns: 1fr;

        gap: 2rem;

    }



    .footer-content {

        gap: 2rem;

    }



    .contact-info {

        gap: 2rem;

    }



    .cookie-notice {

        flex-direction: column;

        gap: 1rem;

        text-align: center;

    }



    .cookie-buttons {

        flex-direction: column;

        width: 100%;

    }



    .cookie-btn-outline,

    .cookie-btn-filled {

        width: 100%;

    }



    .bottom-footer {

        flex-direction: column;

        gap: 1rem;

        text-align: center;

    }

}



/* Company History Page Styles */

.history-section {

    padding: 5rem 3rem;

    background-color: #fff;

}



.history-content {

    max-width: 1000px;

    margin: 0 auto;

}



.history-item {

    display: flex;

    gap: 4rem;

    margin-bottom: 4rem;

    padding-bottom: 4rem;

    border-bottom: 1px solid #e5e5e5;

    align-items: flex-start;

}



.history-item:last-child {

    border-bottom: none;

    margin-bottom: 0;

    padding-bottom: 0;

}



.history-year {

    font-size: 3rem;

    font-weight: 300;

    color: var(--accent-color);

    min-width: 120px;

    letter-spacing: 2px;

}



.history-text h3 {

    font-size: 1.8rem;

    font-weight: 400;

    margin-bottom: 1rem;

    color: var(--text-color);

}



.history-text p {

    font-size: 1.05rem;

    line-height: 1.8;

    color: #666;

}



/* Services Page Styles */

.services-section {

    padding: 5rem 3rem;

}



.services-content {

    max-width: 1400px;

    margin: 0 auto;

}



.service-item {

    display: grid;

    gap: 4rem;

    align-items: center;

    margin-bottom: 5rem;

}



.service-item.reverse {

    direction: rtl;

}



.service-item.reverse > * {

    direction: ltr;

}



.service-image {

    width: 100%;

    height: 400px;

    overflow: hidden;

}



.service-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

}



.service-info h3 {

    font-size: 2rem;

    font-weight: 400;

    margin-bottom: 1.5rem;

    color: var(--text-color);

}



.service-info p {

    font-size: 1.05rem;

    line-height: 1.8;

    color: #666;

    margin-bottom: 2rem;

}



.service-features {

    list-style: none;

    padding: 0;

}



.service-features li {

    padding: 0.75rem 0;

    padding-left: 1.5rem;

    position: relative;

    font-size: 1rem;

    color: #555;

    line-height: 1.6;

}



.service-features li:before {

    content: "→";

    position: absolute;

    left: 0;

    color: var(--accent-color);

}



/* PORTFOLIO Page Styles */

.portfolio-clients-section {

    padding: 5rem 3rem;

    background-color: var(--light-gray);

}



.clients-showcase {

    max-width: 1400px;

    margin: 0 auto;

}



.clients-showcase h2 {

    font-size: 2.5rem;

    font-weight: 300;

    letter-spacing: 3px;

    margin-bottom: 1rem;

    text-align: center;

}



.clients-intro {

    text-align: center;

    font-size: 1.1rem;

    color: #666;

    margin-bottom: 3rem;

    max-width: 700px;

    margin-left: auto;

    margin-right: auto;

}



.clients-grid-portfolio {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 3rem;

    margin-bottom: 4rem;

}



.client-logo-item {

    text-align: center;

    padding: 2rem;

    background: white;

    border-radius: 4px;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.client-logo-item:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);

}



.client-logo-item img {

    max-width: 200px;

    max-height: 100px;

    object-fit: contain;

    margin-bottom: 1rem;

}



.client-logo-item h4 {

    font-size: 1.1rem;

    font-weight: 400;

    color: var(--text-color);

    margin-top: 1rem;

}



.portfolio-highlights {

    padding: 5rem 3rem;

    background-color: #fff;

}



.portfolio-highlights-content {

    max-width: 1400px;

    margin: 0 auto;

}



.portfolio-highlights h2 {

    font-size: 2.5rem;

    font-weight: 300;

    letter-spacing: 3px;

    margin-bottom: 3rem;

    text-align: center;

}



.highlights-grid { 

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 3rem;

    margin-bottom: 2rem;

}



/* 占两个位置的卡片（2/3 宽度） */

.highlight-card.span-2 {

    grid-column: span 2;

}



.highlight-card {

    background: white;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.highlight-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

}



.highlight-card img {

    width: 100%;

    height: 250px;

    object-fit: cover;

}



.highlight-info {

    padding: 2rem;

}



.highlight-info h3 {

    font-size: 1.5rem;

    font-weight: 400;

    margin-bottom: 1rem;

    color: var(--text-color);

}



.highlight-info p {

    font-size: 1rem;

    line-height: 1.7;

    color: #666;

}



/* NEWS Page Styles */

.blog-section {

    padding: 5rem 3rem;

}



.blog-grid {

    max-width: 1400px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));

    gap: 3rem;

}



.blog-card {

    background: white;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    overflow: hidden;

}



.blog-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);

}



.blog-link {

    text-decoration: none;

    color: inherit;

    display: block;

}



.blog-link:hover .blog-info h3 {

    color: var(--accent-color);

    transition: color 0.3s ease;

}



.blog-image {

    width: 100%;

    height: 300px;

    overflow: hidden;

    background-color: #f5f5f5;

}



.blog-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

}



.blog-card:hover .blog-image img {

    transform: scale(1.1);

}



.blog-info {

    padding: 2rem;

}



.blog-date {

    font-size: 0.9rem;

    color: #999;

    letter-spacing: 1px;

    display: block;

    margin-bottom: 1rem;

}



.blog-info h3 {

    font-size: 1.5rem;

    font-weight: 400;

    margin-bottom: 1rem;

    color: var(--text-color);

    line-height: 1.4;

}



.blog-info p {

    font-size: 1rem;

    line-height: 1.7;

    color: #666;

    margin-bottom: 1.5rem;

}



.blog-read-more {

    color: var(--accent-color);

    font-weight: 500;

    font-size: 0.95rem;

    letter-spacing: 0.5px;

}



/* Blog Detail Page Styles */

.blog-detail-section {

    margin-top: 80px;

    padding: 4rem 3rem;

    background-color: #fff;

}



.blog-detail-container {

    max-width: 900px;

    margin: 0 auto;

}



.back-link {

    display: inline-block;

    color: var(--accent-color);

    text-decoration: none;

    margin-bottom: 2rem;

    font-size: 1rem;

    transition: opacity 0.3s;

}



.back-link:hover {

    opacity: 0.7;

}



.blog-detail-article {

    background: white;

}



.blog-detail-header {

    margin-bottom: 2rem;

}



.blog-detail-date {

    font-size: 0.95rem;

    color: #999;

    letter-spacing: 1px;

    display: block;

    margin-bottom: 1rem;

}



.blog-detail-header h1 {

    font-size: 2.5rem;

    font-weight: 300;

    line-height: 1.3;

    color: var(--text-color);

    margin-bottom: 2rem;

}



.blog-detail-image {

    width: 100%;

    height: 500px;

    overflow: hidden;

    margin-bottom: 3rem;

}



.blog-detail-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.blog-detail-content {

    max-width: 800px;

    margin: 0 auto;

}



.blog-detail-lead {

    font-size: 1.3rem;

    line-height: 1.8;

    color: #555;

    font-weight: 300;

    margin-bottom: 2rem;

    font-style: italic;

}



.blog-detail-content p {

    font-size: 1.1rem;

    line-height: 1.9;

    color: #555;

    margin-bottom: 1.5rem;

}



.blog-detail-tags {

    margin-top: 3rem;

    padding-top: 2rem;

    border-top: 1px solid #e5e5e5;

    display: flex;

    gap: 1rem;

    flex-wrap: wrap;

}



.tag {

    padding: 0.5rem 1.5rem;

    background-color: var(--light-gray);

    color: var(--text-color);

    font-size: 0.9rem;

    letter-spacing: 0.5px;

    border-radius: 20px;

}



.related-posts {

    margin-top: 5rem;

    padding-top: 3rem;

    border-top: 1px solid #e5e5e5;

}



.related-posts h3 {

    font-size: 1.8rem;

    font-weight: 400;

    margin-bottom: 2rem;

    color: var(--text-color);

}



.related-posts-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 2rem;

}



.related-post-item {

    background: white;

    transition: transform 0.3s ease;

}



.related-post-item:hover {

    transform: translateY(-3px);

}



.related-post-item a {

    text-decoration: none;

    color: inherit;

    display: block;

}



.related-post-item img {

    width: 100%;

    height: 200px;

    object-fit: cover;

}



.related-post-item h4 {

    padding: 1.5rem;

    font-size: 1.2rem;

    font-weight: 400;

    color: var(--text-color);

}



/* Responsive Styles for New Pages */

@media (max-width: 768px) {

    .history-item {

        flex-direction: column;

        gap: 2rem;

    }



    .history-year {

        font-size: 2rem;

        min-width: auto;

    }



    .service-item,

    .service-item.reverse {

        grid-template-columns: 1fr;

        direction: ltr;

    }



    .service-image {

        height: 300px;

    }



    .blog-grid {

        grid-template-columns: 1fr;

    }



    .highlights-grid {

        grid-template-columns: 1fr;

    }



    /* 在小屏幕上，占两个位置的卡片恢复为单列 */

    .highlight-card.span-2 {

        grid-column: span 1;

    }



    .blog-detail-header h1 {

        font-size: 2rem;

    }



    .blog-detail-image {

        height: 300px;

    }



    .related-posts-grid {

        grid-template-columns: 1fr;

    }

}



/* ABOUT US Page Styles */

.about-us-section {

    padding: 5rem 3rem;

    background-color: #fff;

}



.about-us-content {

    max-width: 1400px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4rem;

    align-items: center;

}



.about-us-text h2 {

    font-size: 2.5rem;

    font-weight: 300;

    letter-spacing: 2px;

    margin-bottom: 2rem;

    color: var(--text-color);

}



.about-us-text p {

    font-size: 1.05rem;

    line-height: 1.8;

    color: #666;

    margin-bottom: 1.5rem;

}



.about-us-image {

    width: 100%;

    height: 500px;

    overflow: hidden;

}



.about-us-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

}



.faq-section {

    padding: 5rem 3rem;

    background-color: var(--light-gray);

}



.faq-content {

    max-width: 900px;

    margin: 0 auto;

}



.faq-content h2 {

    font-size: 2.5rem;

    font-weight: 300;

    letter-spacing: 2px;

    margin-bottom: 3rem;

    text-align: center;

    color: var(--text-color);

}



.faq-item {

    background: white;

    padding: 2rem;

    margin-bottom: 1.5rem;

    border-radius: 4px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

}



.faq-item h3 {

    font-size: 1.3rem;

    font-weight: 400;

    margin-bottom: 1rem;

    color: var(--text-color);

}



.faq-item p {

    font-size: 1.05rem;

    line-height: 1.8;

    color: #666;

}



/* Contact Us Page Styles */

.contact-section {

    padding: 5rem 3rem;

    background-color: #fff;

}



.contact-container {

    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4rem;

}



.contact-info-section h2,

.contact-form-section h2 {

    font-size: 2rem;

    font-weight: 300;

    letter-spacing: 2px;

    margin-bottom: 2rem;

    color: var(--text-color);

}



.contact-details {

    display: flex;

    flex-direction: column;

    gap: 2.5rem;

}



.contact-detail-item h3 {

    font-size: 1.2rem;

    font-weight: 400;

    margin-bottom: 0.75rem;

    color: var(--text-color);

    letter-spacing: 1px;

}



.contact-detail-item p {

    font-size: 1.05rem;

    line-height: 1.8;

    color: #666;

}



.contact-detail-item a {

    color: var(--accent-color);

    text-decoration: none;

    transition: opacity 0.3s;

}



.contact-detail-item a:hover {

    opacity: 0.7;

}



.contact-form {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1.5rem;

}



.contact-form .form-group {

    display: flex;

    flex-direction: column;

}



.contact-form label {

    font-size: 0.95rem;

    color: var(--text-color);

    margin-bottom: 0.5rem;

    letter-spacing: 0.5px;

}



.contact-form label span {

    color: #999;

}



.contact-form input,

.contact-form textarea {

    padding: 0.75rem;

    border: 1px solid #ddd;

    border-radius: 4px;

    font-size: 1rem;

    font-family: 'Georgia', serif;

    color: var(--text-color);

    transition: border-color 0.3s;

}



.contact-form input:focus,

.contact-form textarea:focus {

    outline: none;

    border-color: var(--accent-color);

}



.contact-form textarea {

    resize: vertical;

    min-height: 150px;

}



.contact-form .submit-btn {

    padding: 1rem 2.5rem;

    background-color: var(--text-color);

    color: white;

    border: none;

    border-radius: 4px;

    font-size: 1rem;

    letter-spacing: 1px;

    cursor: pointer;

    transition: background-color 0.3s, transform 0.3s;

    align-self: flex-start;

    font-family: 'Georgia', serif;

}



.contact-form .submit-btn:hover {

    background-color: var(--accent-color);

    transform: translateY(-2px);

}



/* Responsive Styles for New Pages */

@media (max-width: 968px) {

    .about-us-content {

        grid-template-columns: 1fr;

    }



    .about-us-image {

        height: 400px;

    }



    .contact-container {

        grid-template-columns: 1fr;

        gap: 3rem;

    }



    .form-row {

        grid-template-columns: 1fr;

    }

}