/* --- Global Reset & Styles --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}
font-normal{
    font-weight: normal;
}
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.section-pad {

}

.section-title {
    font-size: 2.5rem;
    color: #004d40; /* Dark Teal */
    margin-bottom: 40px;
    line-height: 1.2;
}

.section-title small {
    font-size: 1.5rem;
    color: #00897b;
    display: block;
    margin-top: 10px;
}

.center-text {
    text-align: center;
}

/* Utility Grids */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

/* Buttons */
.btn-yellow {
    background-color: #fdd835;
    color:#000;
    border: none;
    padding: 10px 25px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 20px;
}

.site-header {
    position: relative;
    font-size: 0.9rem;
}

/* Row 1: Top Bar (Green) */
.header-top-bar {
    background-color: #f5e303;
    color: #333;
    padding: 10px 0;
    font-size: 0.8rem;
    overflow: hidden; /* Crucial for ticker effect */
}

/* Flex container for static and scrolling parts */
.top-bar-content {
    display: flex;
    align-items: center;
}

/* 1. The static tag on the left */
.static-tag {
    font-weight: bold;
    padding-right: 20px; /* Space after the "|" */
    white-space: nowrap; /* Prevent this from wrapping */
}

/* 2. The "viewport" for the scrolling text */
.scrolling-ticker-viewport {
    flex-grow: 1; /* Takes up the remaining space */
    overflow: hidden; /* Hides the text that scrolls out of view */
}

/* 3. The container that holds and moves the text */
.scrolling-ticker-container {
    display: flex; /* Aligns all spans in a row */
    white-space: nowrap; /* Prevents text from wrapping to a new line */
    /* Link the animation here */
    animation: scroll-left-animation 25s linear infinite;
}

/* Styling for each individual scrolling text item */
.scrolling-ticker-container span {
    padding: 0 30px; /* Adds space between each item */
    display: inline-block;
}

/* 4. The animation definition */
@keyframes scroll-left-animation {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Move left by the width of the first set of items */
        transform: translateX(-50%);
    }
}

/*
 * --- 1. 默认样式 (PC端) ---
 * 默认情况下，菜单是一个与页面同宽的下拉条。
*/

.dropdown-menu {
    /* 关键：使用绝对定位，相对于 <header> 进行定位 */
    position: absolute;
    top: 100%; /* 让它正好出现在 <header> 的正下方 */
    left: 0;
    right: 0; /* left:0 + right:0 确保宽度与父容器(header)一致 */
    width: 100%;

    background-color: #036745; /* 与您的主header颜色保持一致 */
    padding: 20px 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);

    /* 关键：默认隐藏菜单 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px); /* 给一个轻微的向上位移，用于动画 */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
}

/* 当 .is-open 类被添加到 <header> 上时，显示下拉菜单 */
.site-header.is-open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* PC端菜单项的布局 */
.dropdown-menu .menu-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center; 
}

.dropdown-menu .menu-nav a {
    color: #fff;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 500;
    display: block; 
    padding: 15px 30px;
    transition: color 0.3s ease;
}
.dropdown-menu .menu-nav a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #f5e303; /* 悬停时变为黄色 */
}

/* 关键：在PC端，隐藏移动端专用的关闭按钮 */
.close-icon-mobile {
    display: none;
}


/* Row 2: Main Header  */
.header-main {
    background-color: #036745; 
    padding: 35px 0;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-weight: bold;
    font-size: 1.5rem;
    color: #333;
}

.header-right {
    display: flex;
    align-items: center;
}

.home-link {
    margin-left: 16px;
    font-size: 1.6rem;
    font-weight: normal;
    color: #fff;
}

.menu-icon {
    font-size: 1.5rem;
    cursor: pointer;
    color: #fff;
}

/* --- Hero Section --- */
.hero-section {
    position: relative;
    height: 1080px; /* Adjust height as needed */
    overflow: hidden;
}

/* Placeholder for the hero image */
.hero-bg-placeholder {
    width: 100%;
    height: 100%;
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    /* Optional: Add dark overlay if needed for text contrast */
    /* background: rgba(0,0,0,0.2); */
}

.hero-overlay h1 {
    font-size: 4rem;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.hero-overlay h1 span {
    color: #b2dfdb; /* Lighter teal accent */
}

.hero-overlay p {
    font-size: 1.5rem;
    color: #fff;
}

/* --- Health Management (Image Cards) --- */
.title-image-style {
    height: 40px; /* 您可以根据图片的设计稿，灵活调整这个高度 */
    width: auto;  /* 宽度会自动缩放以保持正确的比例 */
    display: block; /* 确保图片表现得像一个块级元素，避免奇怪的对齐问题 */
}
.image-card {
    position: relative;
    height: 190px;
    border-radius: 10px;
    overflow: hidden;
}

/* Placeholder for card backgrounds */
.card-bg-placeholder {
    width: 100%;
    height: 100%;
    background-repeat:no-repeat;
    background-size: 100%;
    background-position: center;
    transition: transform 0.3s ease;
}
.image-card:hover .card-bg-placeholder {
    transform: scale(1.05);
}

.card-content {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
}

.card-content h3 {
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.card-content p {
    font-size: 0.9rem;
    color: #666;
}

.arrow-icon {
    display: block;
    margin-top: 10px;
    font-size: 1.2rem;
}

/* --- Company Intro Section --- */
.company-intro-frist {
    
}

/* 样式化新的整图 */
.company-intro-frist .full-width-image {
    width: 100%;      /* 图片宽度占满容器 */
    height: auto;     /* 高度自动缩放，保持比例 */
    display: block;   /* 移除图片下方的默认空隙 */
    /*border-radius: 10px;  (可选) 为图片添加圆角，使其更好看 */
}

/* --- Company Intro Section --- */
.company-intro-end {
    margin-bottom:45px;
}

/* 样式化新的整图 */
.company-intro-end .full-width-image {
    width: 100%;      /* 图片宽度占满容器 */
    height: auto;     /* 高度自动缩放，保持比例 */
    display: block;   /* 移除图片下方的默认空隙 */
    /*border-radius: 10px;  (可选) 为图片添加圆角，使其更好看 */
}
/* --- Company Intro Section 
.company-intro {
    position: relative;
    background-color: #f9f9f9;
    text-align: center;
}

.company-bg-placeholder {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-repeat:no-repeat;
    background-size: 100%;
    background-position: center;
     opacity: 0.1; 
    z-index: 0;
}

.relative-container {
    position: relative;
    z-index: 1;
}

.intro-logo {
    color: #00897b;
    font-weight: bold;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.intro-header h2 {
    font-size: 2rem;
    color: #333;
}

.one-plus-n {
    margin: 50px 0;
}

.big-text {
    font-size: 6rem;
    font-weight: bold;
    color: #00897b;
    line-height: 1;
}
.big-text .plus {
    color: #333;
    font-weight: lighter;
}

.big-sub-text {
    display: flex;
    justify-content: center;
    gap: 100px;
    margin-top: 20px;
    font-size: 1.2rem;
    font-weight: bold;
}
--*/
/* --- Company Intro Section --- */
.company-intro {
     /*background-color: #f5f5f5; 图片加载失败时的备用背景色 */
}

/* 样式化新的整图 */
.company-intro .full-width-image {
    width: 100%;      /* 图片宽度占满容器 */
    height: auto;     /* 高度自动缩放，保持比例 */
    display: block;   /* 移除图片下方的默认空隙 */
    border-radius: 10px; /* (可选) 为图片添加圆角，使其更好看 */
}
.platform-brand-split {
    display: flex;
    justify-content: center;    
    /*
     * (可选) 增加列之间的间距。
     * gap 是现代CSS中设置间距的最佳方式。
    */
    gap: 25px;

    background: #f5f5f5;                /* 区块统一背景色 */
    margin-top: 0px;
    text-align: left;
    border:0px solid #333;
}

.pb-col {
   /*
     * ！！！这就是实现50%宽度的关键！！！
     * 我们不再使用 flex: 0 0 45%;
     * 而是给它一个明确的宽度，比如 45% 或 50%
     * 然后让它在Flexbox中自然收缩。
     * 这里我们用 width: 45% 来模拟您要的“各占一半但有空隙”的效果
     * 如果想更精确，可以 width: calc(50% - 20px) 配合 gap。
    */
    width: 32%;
    max-width: 500px; /* (推荐) 给每列一个最大宽度，避免在超大屏上过宽 */

    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    text-align: center; /* 让内部的所有文字、按钮等都默认居中 */
border:0px solid #333;
}

.pb-col h3 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    text-align: center;
}
/**
.platform-col { 
    width:100%;
    background: #fff;
    padding: 0 50px 0 50px;
    text-align: center; 
border:1px solid #ff0000;
}**/

.phone-mockup-placeholder {
    height: 380px;
    /*
     * width: auto; 会让它根据高度自动缩放，
     * 如果您的图片是固定的，也可以用具体的像素值。
    */
    width: auto;
    max-width: 100%; /* 确保它不会超出父容器 */

    margin: 20px auto 0 auto; /* 顶部加一点间距并居中 */
    border-radius: 20px;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
/**
.pb-col.brand-col { 
    flex: 0 0 45%;
    background: #fff;
    margin:0 45px;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);

border:1px solid #fff000;


    text-align: center;
}**/
.brand-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 100px;
    margin-bottom: 30px;
}

.brand-logo-box {
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 10px;            /* 给logo留出一点内边距，避免贴边 */

    /* --- Key for centering --- */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
}

/* The logo image itself */
.brand-logo-box img {
    /* --- Key for fitting without distortion --- */
    max-width: 100%;    /* 图片最宽不能超过父容器的100% */
    max-height: 100%;   /* 图片最高不能超过父容器的100% */
    object-fit: contain;/* 这是一个现代的、更简洁的写法，作用同上 */
}

.divider-yellow {
    height: 4px;
    background-color: #fdd835;
    width: 100%;
    margin: 60px 0 30px;
}

.intro-footer-text,
.intro-footer-sub-text {
    text-align: center;
}

/* --- Health Services (Detailed Cards) --- */
.title2-image-style {
    height: 125px; /* 您可以根据图片的设计稿，灵活调整这个高度 */
    width: auto;  /* 宽度会自动缩放以保持正确的比例 */
    display: block; /* 确保图片表现得像一个块级元素，避免奇怪的对齐问题 */
}
.service-grid {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(3, 1fr);
    justify-content: start;
    border:0px solid #333;
}

.service-card {
    /*
     * 关键：为卡片定义一个固定的形状。
     * 使用 aspect-ratio 是现代响应式布局的最佳方式，它能保持卡片的宽高比。
     * 这里的 '1 / 1.2' 表示一个稍微有点高度的长方形。您可以根据图片的设计调整。
     * 如果您不希望用比例，也可以用一个固定的最小高度，例如：min-height: 280px;
    
    aspect-ratio: 1 / 1.2;*/
    min-height: 260px;
    /* 背景图片的核心样式 */
    background-repeat: no-repeat;
    background-position: center;
    /*
     * 使用 'cover' 可以让图片总是填满整个卡片区域，
     * 即使图片比例和容器不完全匹配，它也会通过裁剪来适应，而不是留白。
     * 对于“卡片即图片”的场景，这通常是最佳选择。
    */
    background-size: contain;

    /* 装饰性样式 */
    border-radius: 15px;
    overflow: hidden; /* 确保图片服从圆角 */
    transition: transform 0.3s ease;
}

/* 保留一个漂亮的鼠标悬停效果 */
.service-card:hover {
    transform: scale(1.03);
}
.service-text {
    flex: 1;
    padding: 25px;
}

.service-text h3 {
    font-size: 1.2rem;
    margin-bottom: 5px;
}
.service-text p {
    margin-bottom: 15px;
    font-weight: bold;
}

.service-list li {
    font-size: 0.85rem;
    margin-bottom: 5px;
    list-style-type: disc;
    margin-left: 15px;
}

.service-img-placeholder {
    width: 100%;
    height: 100%;
    background-repeat:no-repeat;
    background-size: contain;
    background-position: center;
    transition: transform 0.3s ease;
}

/* Service Card Colors */
.bg-grey { background-color: #f5f5f5; }
.bg-teal { background-color: #26a69a; }
.bg-blue { background-color: #42a5f5; }
.bg-brown { background-color: #8d6e63; }
.bg-light-green { background-color: #dcedc8; }
.bg-skin { background-color: #ffe0b2; }
.text-white { color: #fff; }
.text-white p { color: #eee; }

/* --- Latest News --- */
.title-image-center-style {
    height: 180px; /* 您可以根据图片的设计稿，灵活调整这个高度 */
    width: auto;  /* 宽度会自动缩放以保持正确的比例 */
    display: block; /* 确保图片表现得像一个块级元素，避免奇怪的对齐问题 */
    margin-left: auto;
    margin-right: auto;
    margin-top:50px;
}
.news-grid {
    margin-top: 40px;
    align-items: stretch;
}

.news-card {
    position: relative;
    height: 300px;
    border-radius: 10px;
    overflow: hidden;
}

/* Make the middle card wider on desktop */
.news-card.wide-card {
    grid-column: span 1.5; /* A bit of a hack for grid-3, works better if grid changed to more columns */
}

.news-bg-placeholder {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.news-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.news-logo {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #00897b;
}

.news-overlay h3 {
    font-size: 2rem;
}

/* --- Footer --- */
/* --- Footer --- */
.site-footer {
    margin-top: 50px;
    padding-top: 40px; /* Add some space at the top */
    background-color: #f2f2f2;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    padding-bottom: 0px;
    gap: 0px; /* Add a gap between left and right columns */
    border:0px solid #000333;
}

/* Footer Left Side (Image) */
.footer-left {
    flex: 0 0 25%;
    display: flex;
    justify-content: left;
    align-items: center;
}

.footer-promo-image {
    max-width: 300px;
    width: auto;
    height: 100%;
}

/* Footer Right Side (Links + Watermark) */
.footer-right {
    flex: 0 0 75%;
    display: flex;
    flex-direction: column;   /* Stack items vertically */
    justify-content: space-between; /* Space out the links and watermark */
    align-items: center;      /* Center them horizontally */
    padding-left:26px;
    border:0px solid #333;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 40px;
    font-size: 2.0rem;
    text-align: center;
    width: 100%; /* Take the full width of the right column */
    margin-bottom: 20px; /* Space between links and watermark */
    border:0px solid #333;
}

.footer-links a {
    font-size: 1.2rem;
    color: #333;
}

/* The new watermark style */
.footer-watermark-image {
    /*
     * 控制图片大小。
     * max-width 限制了它的最大宽度，width: 80% 则让它在容器缩小时也能自适应。
     * 您可以根据视觉效果调整这些值。
    */
    max-width: 1125px;
    width: 100%;
    height: auto; /* 高度自动，保持比例不变形 */

    /* 模拟之前非常淡的颜色效果 
    opacity: 0.04;*/
}


/* Footer Bottom Bar (Copyright) */
.footer-bottom {
    background-color: #f2f2f2;
    padding: 15px 0;
    text-align: center;
    font-size: 0.8rem;
    color: #666;
}

/* --- Title Slideshow Animation --- */

/* Container for the slideshow */
.title-slideshow-container {
    position: relative;
    width: 450px;  /* 幻灯片区域的宽度，您可以按需调整 */
    height: 80px; /* 幻灯片区域的高度，您可以按需调整 */
    margin: 0 0 5px 0; /* 靠左并与下方标题拉开距离 */
    border-radius: 8px;
    overflow: hidden;
border:0px solid #333;
}

/* Base style for all images inside the slideshow */
.slideshow-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 135%;
    object-fit: contain;  /* 确保整张图片在容器内完整显示 */
    opacity: 0; /* 默认全部透明 */
    /*
     * 动画解释:
     * - 'fade-in-out' 是动画名称.
     * - 18s 是总时长 (6张图 * 每张图3秒).
     * - 'infinite' 表示无限循环.
    */
    animation: fade-in-out 18s infinite;
}

/* Keyframe definition for the fade animation */
@keyframes fade-in-out {
    0% { opacity: 0; }
    5% { opacity: 1; }   /* 在总时长的5%内（约0.9秒）淡入 */
    16.66% { opacity: 1; } /* 保持显示，直到1/6的时间点 */
    21.66% { opacity: 0; } /* 在接下来的5%时间内淡出 */
    100% { opacity: 0; }
}

/*
 * ！！！关键步骤：为每张图片设置不同的动画延迟！！！
 * 这使得它们能够按顺序依次播放。
*/
.slideshow-image:nth-child(1) { animation-delay: 0s; }
.slideshow-image:nth-child(2) { animation-delay: 3s; } /* 第1张图显示3秒后，第2张开始 */
.slideshow-image:nth-child(3) { animation-delay: 6s; }
.slideshow-image:nth-child(4) { animation-delay: 9s; }
.slideshow-image:nth-child(5) { animation-delay: 12s; }
.slideshow-image:nth-child(6) { animation-delay: 15s; }

/* --- RESPONSIVE DESIGN (Mobile Adaptation) --- */
@media (max-width: 768px) {
/* 在PC端，恢复较大的上下留白 */
    .header-main {
        padding: 35px 0;
    }

    /* 在PC端，Logo大一些 */
    .logo {
        height: 45px;
    }

    /* 关键：在PC端，让 "Home" 链接重新显示出来 */
    .home-link {
        display: block; /* 或者 inline, inline-block */
        margin-left: 16px;
        font-size: 1.6rem;
        font-weight: normal;
        color: #fff;
    }

    /* 关键：在PC端，让 "Why BFB? |" 重新显示出来 */
    .static-tag {
        display: block;
        font-weight: bold;
        padding-right: 20px;
    }

    /* 在PC端，恢复较大的滚动文字间距 */
    .scrolling-ticker-container span {
        padding: 0 30px;
    }

    .dropdown-menu {
        /* 关键：改为 fixed 定位，相对于整个浏览器窗口 */
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;  /* 100% 视口宽度 */
        height: 100vh; /* 100% 视口高度 */

        /* 背景改为半透明黑色 */
        background-color: rgba(0, 0, 0, 0.95);

        /* 使用 Flexbox 让菜单项在屏幕正中间 */
        display: flex;
        justify-content: center;
        align-items: center;

        /* 动画效果微调 */
        transform: none; /* 移除PC端的向上位移 */
    }

    /* 覆盖菜单项的布局，使其变为垂直排列 */
    .dropdown-menu .menu-nav ul {
        flex-direction: column; /* 垂直堆叠 */
        gap: 20px;
    }

    /* 覆盖菜单项链接的样式，使其在手机上更大 */
    .dropdown-menu .menu-nav a {
        font-size: 1.8rem;
    }

    /* 关键：在移动端，让关闭按钮显示出来 */
    .close-icon-mobile {
        display: block;
        position: absolute;
        top: 20px;
        right: 30px;
        color: #fff;
        font-size: 3rem;
        cursor: pointer;
        line-height: 1;
    }

    .header-top-bar {
        padding: 10px 0;
    }

    .site-header .mini-nav {
        display: none; /* Hide mini nav on small screens */
    }
    .hero-overlay h1 { font-size: 2.5rem; }


    .hero-section {
        /*
         * 将桌面端的500px或更高的高度，
         * 在移动端覆盖为更合适的、较小的高度，例如 300px。
         * 这可以避免它占据过多的垂直空间。
        */
        height: 300px;
    }

    /*
     * (可选) 如果您的Banner图上有文字，
     * 您可能也需要调整文字叠加层 h1 的字体大小。
    */
    .hero-overlay h1 {
        font-size: 2.5rem;
    }
    .title-slideshow-container {
        margin-top: 35px;
        width: 350px;  /* 幻灯片区域的宽度，您可以按需调整 */
        height: 40px; /* 幻灯片区域的高度，您可以按需调整 */
    }
    .slideshow-image {
        height: 30px;
        object-position: left;

    }

    /* Grids become 1 column */
    .grid-3 {
        grid-template-columns: 1fr;
    }

    /* Adjust One Plus N section */
    .big-sub-text {
        flex-direction: column;
        gap: 20px;
    }
    .platform-brand-split {
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }
    .pb-col {
        /*
         * 将PC端的 32% 宽度，在这里覆盖为更适合手机的 90% 宽度。
         * 这会让它在手机屏幕上看起来是“全宽”的（但两侧有少许留白）。
        */
        width: 90%;
    }
    .brand-grid {
        grid-template-columns: repeat(2, 1fr); /* Keep brand grid 3 cols on mobile */
    }
    .title-image-style {
        height: 25px; /* 您可以根据图片的设计稿，灵活调整这个高度 */
    }
    .title2-image-style {
        height: 70px; /* 您可以根据图片的设计稿，灵活调整这个高度 */
    }

    /* Service cards stack internally */
    .service-card {
        flex-direction: column;
    }
    .service-img-placeholder {
        height: 150px; /* Fixed height for image part on mobile */
        flex: auto;
        order: -1; /* Move image to top */
    }
    .title-image-center-style {
        height: 100px; /* 您可以根据图片的设计稿，灵活调整这个高度 */
    }
    /* News Grid reset wide card hack */
    .news-card.wide-card {
        grid-column: span 1;
    }

    /* Footer stacks */
    .footer-content {
        flex-direction: column; /* Stack left and right columns on mobile */
    }
    .footer-links {
        grid-template-columns: repeat(2, 1fr);
    }
}