/* 导航栏样式 */
.custom-navbar {
    background-color: #248EA6; /* 导航栏背景颜色 */
}

.navbar-brand {
    font-size: 1.5rem;
    color: #FFFFFF; /* 导航栏标题文字颜色（白色） */
}

.navbar-brand:hover {
    color: #FFFFFF; /* 导航栏标题悬停颜色（白色） */
}

.navbar .nav-link {
    font-size: 1rem;
    color: #FFFFFF; /* 导航项文字颜色（白色） */
}

.navbar .nav-link:hover {
    color: #FFFFFF; /* 导航项悬停颜色（白色） */
}

/* 中间区域背景图片 */
.middle-area {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #248EA6; /* 如果没有背景图片，使用此背景颜色 */
}

/* 调整文字内容 */
.text-content {
    font-size: 1.1rem;
    color: #FFFFFF; /* 文字颜色为白色 */
}
.col-12{
    font-size: 1.1rem;
    color: #FFFFFF; /* 文字颜色为白色 */
}

/* 自定义“开始实验”按钮的样式 */
.btn-start {
    background-color: #248EA6; /* 按钮背景颜色（与导航栏一致） */
    border-color: #248EA6;
    color: #000000; /* 按钮文字颜色为黑色 */
    padding: 15px 30px;
    font-size: 1.2rem;
}

.btn-start:hover {
    background-color: #248EA6; /* 悬停时背景颜色保持不变 */
    border-color: #248EA6;
    color: #000000; /* 悬停时文字颜色保持黑色 */
}

/* 页脚样式 */
.footer {
    background-color: #248EA6; /* 页脚背景颜色 */
    color: #000000; /* 页脚文字颜色为黑色 */
}

.footer-content {
    padding: 10px;
}

.footer a {
    color: #000000; /* 页脚链接文字颜色为黑色 */
}

/* 调整页脚宽度 */
.footer .container-fluid {
    max-width: 100%;
    padding: 0;
}

/* 数据选项卡和主选项卡样式 */
.data-tabs, .main-tabs {
    background-color: #F0F0F0; /* 区域背景颜色，与底部白色区分 */
    border: 1px solid #E0E0E0;
    border-radius: 5px;
}

/* 选项卡内容内边距 */
.tab-content {
    padding: 10px;
}

/* 自定义数据选项卡的颜色 */
.nav-tabs .data-tab-link {
    color: #000000; /* 数据选项卡文字颜色为黑色 */
    background-color: #FFFFFF; /* 未激活时背景为白色 */
    border: 1px solid #000000; /* 边框为黑色 */
}

.nav-tabs .data-tab-link.active {
    background-color: #248EA6 !important; /* 激活状态背景颜色（与导航栏一致） */
    color: #000000 !important; /* 激活状态文字颜色为黑色 */
    border: 1px solid #000000; /* 边框为黑色 */
}

.nav-tabs .data-tab-link:hover {
    background-color: #D0D0D0; /* 悬停时背景颜色为浅灰色 */
}

/* 自定义主选项卡的颜色 */
.nav-tabs .main-tab-link {
    color: #000000; /* 主选项卡文字颜色为黑色 */
    background-color: #FFFFFF; /* 未激活时背景为白色 */
    border: 1px solid #000000; /* 边框为黑色 */
}

.nav-tabs .main-tab-link.active {
    background-color: #248EA6 !important; /* 激活状态背景颜色（与导航栏一致） */
    color: #000000 !important; /* 激活状态文字颜色为黑色 */
    border: 1px solid #000000; /* 边框为黑色 */
}

.nav-tabs .main-tab-link:hover {
    background-color: #D0D0D0; /* 悬停时背景颜色为浅灰色 */
}

/* 自定义子选项卡的颜色 */
.nav-pills .sub-tab-link {
    color: #000000; /* 子选项卡文字颜色为黑色 */
    background-color: #FFFFFF; /* 未激活时背景为白色 */
    border: 1px solid #000000; /* 边框为黑色 */
    margin-right: 5px;
}

.nav-pills .sub-tab-link.active {
    background-color: #248EA6 !important; /* 激活状态背景颜色（与导航栏一致） */
    color: #000000 !important; /* 激活状态文字颜色为黑色 */
    border: 1px solid #000000; /* 边框为黑色 */
}

.nav-pills .sub-tab-link:hover {
    background-color: #D0D0D0; /* 悬停时背景颜色为浅灰色 */
}

/* 区分不同区域的背景颜色 */
.data-tabs {
    background-color: #F0F0F0; /* 数据选项卡区域背景颜色，与底部白色区分 */
}

.main-tabs {
    background-color: #F0F0F0; /* 主选项卡区域背景颜色，与底部白色区分 */
}

/* 添加阴影效果 */
.data-tab-link, .main-tab-link, .sub-tab-link {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* 为选项卡添加阴影 */
}

/* 修复子选项卡的间距 */
.nav-pills .nav-link {
    margin-right: 5px;
}

#readme .nav-pills, #intro .nav-pills {
    margin-bottom: 0;
}