ul {
    padding: 0;
    margin: 0;
    list-style: none; /* 移除默认列表样式 */
}
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Lora', serif;
}

/*-- 通用样式 --*/
/* 设置所有元素的盒模型为 border-box，确保 padding 和 border 包含在元素的宽高内 */
* {
    box-sizing: border-box;
}

/* 设置 .content 类的背景颜色为浅灰色 */
.content {
    background-color: #F9F9F9; /* 设置 .content 类的背景颜色为浅灰色 */
}

/* 设置 .col-top 类下的 h1 元素样式 */
.col-top h1 {
    color: #705148; /* 设置文字颜色为棕色 */
    font-size: 4em; /* 设置字体大小为4倍的基准字体大小 */
    text-align: center; /* 文本居中对齐 */
    font-family: 'Lora', serif; /* 设置字体为 Lora，带有衬线的字体 */
}

/* 设置 .content-top-2 和 .content-top-1 类下的 p 元素样式 */
.content-top-2 p,
.content-top-1 p {
    color: #5a5757; /* 设置文字颜色为灰色 */
    font-size: 1em; /* 设置字体大小为基准字体大小 */
    line-height: 2em; /* 设置行高为2倍的基准行高 */
}

/* 设置 .content-top-1 类下 p 元素中的 a 元素样式 */
.content-top-1 p a {
    color: #705148; /* 设置链接颜色为棕色 */
}

/* 设置 .col-top 类的样式 */
.col-top {
    padding: 5em 1em; /* 设置上下内边距为5em，左右内边距为1em */
    background-color: #fff; /* 设置背景颜色为白色 */
    position: absolute; /* 设置定位方式为绝对定位 */
    top: -4%; /* 设置元素顶部位置为其包含块高度的-4% */
    width: 100%; /* 设置宽度为100% */
    margin: 0 auto; /* 设置外边距为自动，以水平居中 */
    left: 0%; /* 设置元素左侧位置为0% */
}

/* 设置 .content-top 类的样式 */
.content-top {
    padding: 0em; /* 移除内边距 */
}

/* 设置 .content-top-top 类的样式 */
.content-top-top {
    position: relative; /* 设置定位方式为相对定位 */
    padding: 23.3em 0; /* 设置上下内边距为23.3em，左右内边距为0 */
}

/* 设置 .content-mid 类的样式 */
.content-mid {
    margin: 3em 0; /* 设置上下外边距为3em，左右外边距为0 */
}

/*-- Gallery（画廊）部分样式 --*/
/* 设置 .b-link-stripe 类的样式 */
.b-link-stripe {
    position: relative; /* 设置定位方式为相对定位 */
    display: inline-block; /* 设置显示类型为内联块元素 */
    vertical-align: top; /* 设置垂直对齐方式为顶部对齐 */
    font-weight: 300; /* 设置字体粗细为300 */
    width: 100%; /* 设置宽度为100% */
}

/* 设置 .b-link-stripe 类下 .b-wrapper 类的样式 */
.b-link-stripe .b-wrapper {
    position: absolute; /* 设置定位方式为绝对定位 */
    width: 100%; /* 设置宽度为100% */
    height: 100%; /* 设置高度为100% */
    top: 0; /* 设置元素顶部位置为0 */
    left: 0; /* 设置元素左侧位置为0 */
    text-align: center; /* 文本居中对齐 */
    color: #ffffff; /* 设置文字颜色为白色 */
    overflow: hidden; /* 隐藏溢出内容 */
}

/* 设置 .b-animate-go 类的样式 */
.b-animate-go {
    text-decoration: none; /* 移除文本装饰，如下划线 */
}

/* 设置 .b-animate 类的样式 */
.b-animate {
    transition: all 0.5s; /* 设置所有属性的过渡时间为0.5秒 */
    -moz-transition: all 0.5s; /* 针对 Firefox 浏览器的过渡时间 */
    -ms-transition: all 0.5s; /* 针对 IE 浏览器的过渡时间 */
    -o-transition: all 0.5s; /* 针对 Opera 浏览器的过渡时间 */
    -webkit-transition: all 0.5s; /* 针对 Webkit 浏览器的过渡时间 */
    visibility: hidden; /* 初始状态下隐藏元素 */
    font-size: 1.1em; /* 设置字体大小为1.1倍的基准字体大小 */
    font-weight: 700; /* 设置字体粗细为700 */
}

/* 设置 .b-animate 类下的 img 元素样式 */
.b-animate img {
    margin-top: 4%; /* 设置上外边距为4% */
    display: -webkit-inline-box; /* 设置显示类型为Webkit内联盒模型 */
}

/* 设置 .b-animate 类下的 span 元素样式 */
.b-animate span {
    display: block; /* 设置显示类型为块级元素 */
    font-size: 2em; /* 设置字体大小为2倍的基准字体大小 */
    padding-top: 4.5em; /* 设置上内边距为4.5em */
    font-weight: 500; /* 设置字体粗细为500 */
}

/* 当鼠标悬停在 .b-animate-go 类的元素上时，显示 .b-animate 类的元素 */
/* 已删除 */

/* 设置 .b-from-left 类的样式 */
.b-from-left {
    position: relative; /* 设置定位方式为相对定位 */
    left: -100%; /* 将元素左移100%，隐藏在视图之外 */
    background: rgba(0, 0, 0, 0.69); /* 设置半透明黑色背景 */
    background-size: 100% 100%; /* 设置背景图大小为100%宽度和高度 */
    top: 0px; /* 设置元素顶部位置为0 */
    margin: 0; /* 设置外边距为0 */
    min-height: 303px; /* 设置最小高度为303px */
}

/* 当鼠标悬停在 .content-img 类的元素上时，将 .b-from-left 类的元素左移到视图内 */
.content-img:hover .b-from-left {
    left: 0; /* 将元素左移到初始位置，显示在视图内 */
}

/* 设置 .content-img 类的样式 */
.content-img {
    text-align: center; /* 文本居中对齐 */
}

/*--//gallery--*/

/* 设置 .choose-us 类的样式 */
.choose-us {
    background: url(../images/11.jpg) no-repeat center center; /* 背景图居中显示 */
    background-size: cover; /* 背景图覆盖整个容器 */
    width: 100%;
    min-height: 750px;
    display: flex; /* 使用Flexbox进行布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    padding: 9em 1em 6em; /* 内边距 */
}

/* 设置容器 */
.choose-us .container {
    max-width: 1200px;
    width: 100%;
    text-align: center; /* 文本居中对齐 */
}

/* 设置标题 */
/* 已删除伪元素部分 */
.choose-us h2 {
    font-size: 4em;
    color: #705148; /* 设置文字颜色为棕色 */
    text-align: center;
    font-family: 'Lora', serif;
    margin: 0 0 0.3em;
    position: relative; /* 为伪元素定位 */
}

/* 列表部分样式 */
.services-top {
    list-style: none; /* 移除列表默认项目符号 */
    padding: 0;
    margin: 2em 0 0;
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    justify-content: center; /* 水平居中对齐 */
    gap: 2em; /* 列表项间距 */
}

/* 修改后的 .services-top li 样式：每行两个服务项 */
.services-top li {
    width: calc(50% - 2em); /* 每个列表项占50%宽度减去间距 */
    background: rgba(255, 255, 255, 0.9); /* 半透明背景 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影 */
    padding: 2em 1.5em; /* 内边距 */
    display: flex; /* 使用Flexbox对齐内容 */
    flex-direction: column; /* 垂直堆叠内容 */
    align-items: center; /* 水平居中对齐内容 */
    text-align: center; /* 文本居中对齐 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 过渡效果 */
}

.services-top li:hover {
    transform: translateY(-10px); /* 悬停时上移 */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2); /* 增强阴影 */
}

/* 设置 .ser-top 类下的 h5 元素样式 */
.ser-top h5 {
    padding: 0 0 0.3em;
    font-size: 1.5em;
    text-transform: uppercase;
    color: #705148;
    font-family: 'Lora', serif;
    font-weight: bolder;
    text-align: center;
}

/* 设置 .ser-top 类下的 p 元素样式 */
.ser-top p {
    font-size: 1.2em;
    color: #000000;
    line-height: 2em;
    text-align: center;
}

/* 设置 .ser-top 类下的 label 元素样式 */
.ser-top label {
    background: #fff;
    width: 54px;
    height: 2px;
    display: block;
    margin: 0.8em auto 1em; /* 居中 */
}

/* 设置 .why-choose 类的样式 */
.why-choose {
    margin-top: 3em;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* 设置 .learn-more-btn 类的样式 */
.learn-more-btn {
    display: inline-block;
    margin-top: 1em;
    background-color: #705148;
    border: none;
    color: #fff;
    padding: 10px 20px;
    font-size: 1em;
    border-radius: 4px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    text-decoration: none; /* 移除下划线 */
}

.learn-more-btn:hover {
    background-color: #5a4c40;
    transform: scale(1.05);
}

/* 新增投诉模块样式 */
.complaint-section {
    background-color: #ffffff;
    padding: 60px 0;
    text-align: center;
}

.complaint-section h3 {
    font-size: 4em; /* 设置字体大小为4倍的基准字体大小 */
    color: #705148; /* 设置文字颜色为棕色 */
    text-align: center; /* 文本居中对齐 */
    font-family: 'Lora', serif; /* 设置字体为 Lora，带有衬线的字体 */
    margin: 0 0 0.3em; /* 设置下外边距为0.3em，左右外边距为0 */
}

.complaint-form {
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
}

.complaint-form .form-group {
    margin-bottom: 20px;
}

.complaint-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    color: #705148;
}

.complaint-form .form-control {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
}

.complaint-form .btn-primary {
    background-color: #705148;
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.complaint-form .btn-primary:hover {
    background-color: #5a4c40;
}

.complaint-response {
    margin-top: 20px;
    font-size: 1.2em;
    color: #28a745;
}


/* 新增预约按钮模块样式 */
.appointment-section {
    background-color: #f9f9f9;
    padding: 60px 0;
    text-align: center;
}

.btn-appointment {
    background-color: #705148;
    color: #fff;
    padding: 15px 30px;
    font-size: 1.2em;
    border: none;
    border-radius: 30px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.btn-appointment:hover {
    background-color: #5a4c40;
    transform: scale(1.05);
}

/* Testimonials Section */
.testimonials {
    padding: 80px 0;
    background-color: #f3ece7; /* 主题色 */
}

.testimonials h2 {
    text-align: center;
    font-size: 2.2em; /* Reduced from 2.8em */
    margin-bottom: 60px;
    font-family: 'Lora', serif;
    color: #705148;
    position: relative;
}

.testimonials h2::after {
    content: "";
    display: block;
    width: 100px;
    height: 4px;
    background-color: #705148;
    margin: 10px auto 0;
    border-radius: 2px;
}

.testimonial-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.testimonial {
    background-color: #ffffff;
    border-left: 6px solid #705148;
    padding: 20px 30px;
    max-width: 700px;
    width: 100%;
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
    border-radius: 8px;
}

.testimonial p {
    font-style: italic;
    color: #555;
    font-size: 0.94em; /* Reduced from 1.1em */
    margin-bottom: 15px;
}

.testimonial span {
    display: block;
    font-weight: 700;
    color: #705148;
    font-size: 0.85em; /* Reduced from 1em */
    text-align: right;
}

/* Call to Action Section */
.cta {
    background-color: #ffffff; /* 白色背景 */
    color: #705148;
    padding: 60px 0;
    text-align: center;
}

.cta h2 {
    font-size: 2.2em; /* Reduced from 2.8em */
    margin-bottom: 30px;
    font-family: 'Lora', serif;
    font-weight: 700;
}

.cta .btn {
    background-color: #705148;
    color: #f3ece7;
    padding: 15px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
    font-size: 1em; /* Added for consistency */
}

.cta .btn:hover {
    background-color: #5a4c40;
    color: #fff;
    transform: translateY(-3px);
}

/* 响应式设计 */
@media (max-width: 992px) {
    .hero-content h1 {
        font-size: 2.5em; /* Reduced from 2.8em to match scaling */
    }

    .hero-content p {
        font-size: 1em;
    }

    .services h2,
    .testimonials h2,
    .cta h2 {
        font-size: 2em; /* Reduced from 2.5em */
    }

    .facial-info h3,
    .faq-info h3 {
        font-size: 1.35em; /* Reduced from 1.6em */
    }

    .facial-info p,
    .faq-info p {
        font-size: 0.85em; /* Reduced from 1em */
    }

    .cta .btn {
        padding: 12px 25px;
        font-size: 1em;
    }
}

@media (max-width: 768px) {
    .back-button {
        top: 10px;
        left: 10px;
        padding: 8px 12px;
        font-size: 0.75em; /* Reduced from 0.9em */
    }

    .services-top li {
        width: 100%; /* 单列布局 */
    }

    .content-top {
        padding: 2em 0; /* 增加内边距，避免重叠 */
    }

    .col-top {
        position: relative; /* Override absolute positioning */
        top: 0; /* Reset top position */
    }

    .content-top-top {
        padding: 10em 0; /* Adjust padding for smaller screens */
    }

    .choose-us {
        min-height: auto; /* Remove fixed min-height */
        padding: 5em 1em 3em; /* Adjust padding */
    }

    /* 确保服务项一行一个显示 */
    .services-top li {
        width: 100%; /* 单列布局 */
    }

    .services-top {
        flex-direction: column; /* 垂直排列列表项 */
        gap: 1.5em; /* 减少间距 */
    }

    .ser-top h5 {
        font-size: 1.5em;
    }

    .learn-more-btn {
        padding: 0.6em 1em;
        font-size: 0.9em;
    }

    /* 投诉模块响应式 */
    .complaint-section h3 {
        font-size: 4em; /* 设置字体大小为4倍的基准字体大小 */
    color: #705148; /* 设置文字颜色为棕色 */
    text-align: center; /* 文本居中对齐 */
    font-family: 'Lora', serif; /* 设置字体为 Lora，带有衬线的字体 */
    margin: 0 0 0.3em; /* 设置下外边距为0.3em，左右外边距为0 */
    }

    .complaint-form .form-control {
        font-size: 0.9em;
    }

    .complaint-form .btn-primary {
        padding: 8px 16px;
        font-size: 0.9em;
    }

    /* 预约按钮响应式 */
    .appointment-section .btn-appointment {
        padding: 10px 20px;
        font-size: 1em;
    }
}

/*-- Events（活动）部分样式 --*/
  /* 重置命名空间内的样式，防止冲突 */
        .beauty-module-container * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        /* 核心容器 - 添加命名空间前缀 */
        .beauty-module-container {
            --primary-color: #f9f6f2; /* 珍珠白 */
            --accent-color: #e8d3c5; /* 浅肤金 */
            --accent-secondary: #d7b9a3; /* 深肤金 */
            --text-dark: #5a4d41; /* 深咖文本 */
            --text-light: #8a7d70; /* 浅咖文本 */
            --transition: all 0.3s ease;
            
            font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
            padding: 2rem 1rem;
            background: linear-gradient(135deg, #ffffff 0%, #f8f4f0 100%);
            position: relative;
            overflow: hidden;
            max-width: 1600px;
            margin: 0 auto;
        }
        
        /* 装饰元素 */
        .beauty-module-container::before {
            content: "";
            position: absolute;
            top: -100px;
            right: -100px;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(232,211,197,0.1) 0%, rgba(232,211,197,0) 70%);
            z-index: 0;
        }
        
        .beauty-module-container::after {
            content: "";
            position: absolute;
            bottom: -150px;
            left: -100px;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(232,211,197,0.1) 0%, rgba(232,211,197,0) 70%);
            z-index: 0;
        }
        
        /* 模块标题 */
        .beauty-module-title {
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
            z-index: 2;
        }
        
        .beauty-module-title h2 {
            font-size: 2.5rem;
            font-weight: 300;
            color: var(--text-dark);
            letter-spacing: 1px;
            margin-bottom: 1rem;
            font-weight: bold;

        }
        
        .beauty-module-title p {
            color: var(--text-light);
            max-width: 600px;
            margin: 0 auto;
            font-size: 1.1rem;
            line-height: 1.6;
        }
        
        .beauty-module-title::after {
            content: "";
            display: block;
            width: 80px;
            height: 2px;
            background: var(--accent-color);
            margin: 1.5rem auto 0;
        }
        
        /* 活动卡片容器 */
        .beauty-activities-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            position: relative;
            z-index: 2;
        }
        
        /* 单个活动卡片 */
        .beauty-activity-card {
            background: rgba(255, 255, 255, 0.85);
            border-radius: 16px;
            box-shadow: 0 8px 25px rgba(168, 142, 122, 0.1);
            backdrop-filter: blur(4px);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: var(--transition);
            height: 100%;
            border: 1px solid rgba(232, 211, 197, 0.3);
        }
        
        .beauty-activity-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(168, 142, 122, 0.2);
        }
        
        /* 卡片图像区域 */
        .beauty-card-image {
            height: 220px;
            background-size: cover;
            background-position: center;
            position: relative;
        }
        
        .beauty-card-image::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60%;
            background: linear-gradient(to top, rgba(249, 246, 242, 0.9) 0%, transparent 100%);
        }
        
        /* 活动标签 */
        .beauty-badge {
            position: absolute;
            top: 20px;
            left: 20px;
            background: var(--accent-color);
            color: var(--text-dark);
            padding: 6px 15px;
            border-radius: 20px;
            font-size: 0.85rem;
            letter-spacing: 1px;
            z-index: 2;
            font-weight: 500;
        }
        
        /* 卡片内容 */
        .beauty-card-content {
            padding: 1.8rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .beauty-card-content h3 {
            font-size: 1.5rem;
            font-weight: 400;
            color: var(--text-dark);
            margin-bottom: 0.8rem;
            line-height: 1.3;
        }
        
        .beauty-card-content p {
            color: var(--text-light);
            line-height: 1.7;
            font-size: 0.95rem;
            margin-bottom: 1.5rem;
            flex-grow: 1;
        }
        
        .beauty-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-bottom: 1.8rem;
            color: var(--text-dark);
            font-size: 0.9rem;
        }
        
        .beauty-meta span {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        /* 行动按钮 */
        .beauty-cta {
            background: transparent;
            color: var(--text-dark);
            border: 1px solid var(--accent-color);
            padding: 10px 25px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 500;
            letter-spacing: 0.5px;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
            z-index: 1;
            display: inline-block;
            text-align: center;
            width: fit-content;
        }
        
        .beauty-cta::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 0%;
            height: 100%;
            background: var(--accent-color);
            transition: var(--transition);
            z-index: -1;
        }
        
        .beauty-cta:hover {
            color: #fff;
            border-color: var(--accent-secondary);
        }
        
        .beauty-cta:hover::before {
            width: 100%;
        }
        
        /* 导航控制 */
        .beauty-navigation {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-top: 3rem;
            position: relative;
            z-index: 2;
        }
        
        .beauty-nav-btn {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: transparent;
            border: 1px solid var(--accent-color);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-dark);
            cursor: pointer;
            transition: var(--transition);
        }
        
        .beauty-nav-btn:hover {
            background: var(--accent-color);
            color: #fff;
        }
        
        /* 响应式设计 */
        @media (max-width: 1024px) {
            .beauty-activities-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .beauty-module-title h2 {
                font-size: 2.2rem;
            }
        }
        
        @media (max-width: 768px) {
            .beauty-activities-grid {
                grid-template-columns: 1fr;
                max-width: 600px;
                margin: 0 auto;
            }
            
            .beauty-module-title h2 {
                font-size: 2rem;
            }
            
            .beauty-module-title p {
                font-size: 1rem;
            }
            
            .beauty-module-container {
                padding: 1.5rem 1rem;
            }
        }
        
        @media (max-width: 480px) {
            .beauty-module-title h2 {
                font-size: 1.8rem;
            }
            
            .beauty-card-content {
                padding: 1.5rem;
            }
            
            .beauty-meta {
                flex-direction: column;
                gap: 0.5rem;
            }
        }
        
        /* 防止样式冲突的额外措施 */
        .beauty-module-container .beauty-only {
            /* 确保内部元素样式隔离 */
        }
    /* 活动样式完 */