body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #333;
}

header {
    background-color: #fff;
    padding: 1rem 2rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative; /* To ensure it stays above swiper if needed */
    z-index: 1000;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px; /* Optional: constrain navbar width */
    margin: 0 auto;
}

.logo {
    width: 325px;
    font-size: 1.5rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo .icon{
    width: 33px;
    height: 38px;
}

.logo span {
    font-size: 0.8rem;
    font-weight: normal;
    color: #000000;
    font-family: 'Microsoft JhengHei';
    letter-spacing: 1px;
}

.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.nav-links li {
    margin-left: 20px;
    font-family: 'Microsoft JhengHei';
}

.nav-links a {
    text-decoration: none;
    color: #333;
}

.nav-links a.active {
    color: #007aff; /* 您可以换成您的主题高亮色 */
    font-weight: bold;
}

.container{
    width: 1200px;
}

.services .container{
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
}

/* Hero Section with Swiper */
.hero {
    width: 100%;
    height: 520px; /* Adjust height as needed, or use vh unit e.g. 70vh */
    position: relative; /* For positioning swiper navigation/pagination */
}

.hero-swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background-size: cover;
    background-position: center;

    /* Center slide content vertically and horizontally */
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-slide-content {
    color: white;
    text-align: center;
    /* Optional: Add a semi-transparent background for better text readability */
    /* background-color: rgba(0, 0, 0, 0.3); */
    /* padding: 20px; */
    /* border-radius: 8px; */
}

.hero-slide-content h1 {
    font-size: 2.8rem; /* Adjust as needed */
    margin: 0;
    line-height: 1.3;
}

/* Swiper Navigation Arrows CSS - REMOVED as per request */
/*
.hero-swiper .swiper-button-next,
.hero-swiper .swiper-button-prev {
    color: #ffffff;
}
.hero-swiper .swiper-button-next:after,
.hero-swiper .swiper-button-prev:after {
    font-size: 2rem;
}
*/

/* Swiper Pagination Customization for Flat Rectangular Bullets */
.hero-swiper .swiper-pagination {
    /* Adjust overall position of pagination container if needed */
    bottom: 20px !important; /* Example: 20px from bottom */
    /* Remove any styles specific to other pagination types like 'fraction' if they were added */
}

.hero-swiper .swiper-pagination-bullet {
    width: 100px;  /* Width of the rectangle */
    height: 6px;   /* Height of the rectangle (making it flat) */
    border-radius: 3px; /* Small border-radius for slightly rounded corners, or 0 for sharp corners */
    background-color: #83a0c2; /* Color of the bullets */
    opacity: 0.5;      /* Opacity for non-active bullets */
    margin: 0 5px;     /* Spacing between bullets */
    transition: all 0.3s ease; /* Smooth transition for hover/active states */
    display: inline-block;
}

.hero-swiper .swiper-pagination-bullet-active {
    opacity: 1;        /* Opacity for active bullet */
    background-color: #ffffff; /* Color of the active bullet (e.g., your theme color) */
    width: 100px;       /* Optional: Make active bullet slightly wider */
}


/* Stats Banner Section */
.stats-banner {
    background: linear-gradient(to bottom, #03193d, #04122e, #050a1f);
    color: white;
    padding: 25px 20px; /* Adjust padding */
    text-align: center;
}

.stats-content {
    display: flex;
    justify-content: center; /* Centers the items if they don't fill the space */
    align-items: center;
    gap: 60px; /* Spacing between stat items, adjust as needed */
    max-width: 900px; /* Limit width for better layout on large screens */
    margin: 0 auto; /* Center the content block */
}

.stat-item {
    width: 250px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.stat-item .left{
    font-size: 4.5em;
    color: #0fffff;
}

.stat-item .right{
    text-align: left;
    letter-spacing: 3px;
    font-size: 18px;
}

.stat-item strong {
    font-size: 2.2rem; /* Size for numbers like 10+, 24+ */
    font-weight: bold; /* Ensure it's bold */
    display: block; /* Makes the number sit on its own line above the text */
    margin-bottom: 5px; /* Space between number and text */
}


/* Services Section (remains largely the same, ensure it flows correctly) */
.services {
    display: flex;
    justify-content: space-around;
    padding: 80px 0px;
    background-color: #ffffff;
}

.service-item {
    text-align: center;
    width: 250px;
    height: 250px;
    background: #01377a;
    border-radius: 5%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    font-family: 'Microsoft JhengHei';
}

.service-item img {
   margin: 0 auto;
}

.service-item h3 {
    font-size: 1.3rem;
    margin-bottom: 5px;
    color: #0fffff;
    font-weight: 700;
    letter-spacing: 3px;
}

.service-item p {
    font-size: 0.9rem;
    color: #ffffff;
    letter-spacing: 1px;
}

/* Feature Sections (remain largely the same) */
.feature-section {
    background-size: 100% 100%;
    width: 100%;
    height: 387px;
    margin: 0 auto;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    font-family: 'Microsoft JhengHei';
}

.feature-section h4{
    font-size: 1.8em;
    font-weight: 700;
}

.feature-section p{
    font-size: 1.5em;
    font-weight: 100;
}

.feature-text {
    flex: 1;
}

.feature-text h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #1E3A8A;
}

.feature-image {
    flex: 1;
    text-align: center;
}

.feature-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.feature-section:nth-child(odd) { /* Adjusting for new stats-banner */
     background-color: #f4f7fc;
}
.feature-section:nth-child(even) {
     background-color: #ffffff;
}
/* Ensure the first feature section after services has its intended background */
.services + .feature-section {
    background-color: #ffffff; /* Or #f4f7fc depending on desired pattern */
}


footer {
    text-align: center;
    padding: 20px;
    color: #000000;
    font-size: 1.1rem;
    background: #f4f4f5;
    font-family: 'Adobe Heiti Std';
    font-weight: normal;
    letter-spacing: 2px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
    }
    .nav-links {
        margin-top: 10px;
    }
    .nav-links li {
        margin: 0 10px;
    }

    .hero {
        height: 350px; /* Adjust hero height for smaller screens */
    }
    .hero-slide-content h1 {
        font-size: 2rem;
    }

    .stats-content {
        flex-direction: column;
        gap: 25px;
    }

    .services {
        flex-direction: column;
        align-items: center;
    }
    .service-item {
        width: 80%;
        margin-bottom: 30px;
    }

    .feature-section,
    .feature-section.alt-layout {
        flex-direction: column;
        text-align: center;
        padding: 40px 20px;
    }
    .feature-image {
        margin-bottom: 20px;
    }
}