/* 基础样式 */
body { 
    font-family: sans-serif; 
    margin: 0; 
    padding: 0; 
    color: #333; 
}
.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 20px; 
}

/* 导航栏样式 */
header { 
    background-color: #f8f9fa; 
    padding: 15px 0; 
    border-bottom: 1px solid #e7e7e7; 
    position: relative; /* 添加此行 */
}
header .logo { 
    font-size: 1.5em; 
    font-weight: bold; 
}
nav { 
    display: flex; 
    align-items: center; 
}
nav a { 
    margin-left: 15px; 
    text-decoration: none; 
    color: #007bff; 
}
nav .btn { 
    padding: 10px 20px; 
    background-color: #ff8c00; 
    color: white; 
    border-radius: 5px; 
}

/* 通用按钮样式 */
.btn {
    display: inline-block;
    padding: 15px 30px;
    background: #ff8c00;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    /*margin-top: 20px; */
    font-weight: bold;
}
.btn:hover {
    background: #ff7600;
}
.btn-secondary { 
    background-color: #6c757d; 
}

/* Footer 样式 */
.o-footer__nav {
    color: #E3E3E3;
    background: #335FA9;
    padding: 60px 0 30px;
}
.o-footer__nav a {
    text-decoration: none;
    color: #D7D7D7;
}
.footer-columns {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.footer-column {
    min-width: 200px;
    margin-bottom: 30px;
}
.footer-column h4 {
    color: #fff;
    margin-bottom: 20px;
    font-size: 18px;
}
.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-column ul li {
    margin-bottom: 10px;
}
.footer-column a:hover {
    color: #fff;
    transition: color 0.3s;
}
.copyright {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.copyright p {
    margin: 0;
    font-size: 14px;
}

/* 解决方案页面样式 */
.solutions-section {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.solutions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.solutions-grid .service-card {
    margin: 0;
    height: 100%;
    transition: transform 0.3s ease;
}

.solutions-grid .service-card:hover {
    transform: translateY(-5px);
}
/* 现有样式保持不变，添加以下媒体查询 */

/* 手机端适配，屏幕宽度小于768px */
/* 默认隐藏汉堡菜单按钮在桌面视图 */
.menu-toggle {
    display: none;
    font-size: 1.8em;
    cursor: pointer;
    color: #007bff;
}

/* 媒体查询：针对屏幕宽度小于或等于 768px 的设备（手机模式） */
@media (max-width: 768px) {
    header .container {
        flex-wrap: wrap; /* 允许内容换行 */
    }

    header nav.main-nav { /* 定位主导航菜单 */
        display: none; /* 默认在手机模式下隐藏 */
        flex-direction: column; /* 垂直堆叠菜单项 */
        width: 100%;
        background-color: #f8f9fa;
        position: absolute;
        top: 100%; /* 位于 header 下方 */
        left: 0;
        padding: 10px 0;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        z-index: 999;
    }

    header nav.main-nav.active { /* 菜单激活时显示 */
        display: flex;
    }

    header nav.main-nav a {
        margin: 10px 20px; /* 调整手机菜单项的间距 */
        width: auto;
    }

    header nav.main-nav .dropdown {
        width: 100%; /* 下拉菜单在手机模式下占据全宽 */
        margin: 10px 0;
    }

    header nav.main-nav .dropdown-menu {
        text-align: center; /* 使下拉菜单内部的文本居中 */
        position: static; /* 允许下拉菜单内容在正常文档流中显示 */
        width: 100%;
        box-shadow: none;
        border-radius: 0;
        margin-top: 0;
    }

    /* 在手机模式下显示汉堡菜单按钮 */
    .menu-toggle {
        display: block;
    }

    /* 确保桌面导航在手机模式下被隐藏 */
    header nav:not(.main-nav) {
        display: none;
    }
}