body {
    padding-top: 0; /* 移除顶部的空白区域 */
}

.navbar {
    background: #1c252eca;
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    height: auto;            /* 自动调整高度 */
}

.navbar .container {
    max-width: 600px;
    display: flex;
    flex-direction: row;  /* 横向排列子元素 */
    justify-content: space-between; /* 在容器中均匀分布子元素 */
    align-items: center;  /* 垂直居中 */
}

.brand {
    font-size: 24px; /* 调整字体大小 */
    font-weight: bold;
    color: #ffffff; /* 设置字体颜色 */
    margin-right: 10px; /* 增加右边距以分隔brand和brand2 */
}

.brand2 {
    font-size: 12px; /* 调整字体大小 */
    font-weight: bold;
    color: #ffffff; /* 设置字体颜色 */
}
.card-body {
    position: relative;
    background: url('/path/to/line-drawing.png') no-repeat center center;
    background-size: contain;
    min-height: 200px; /* 根据需要调整 */
}

.card-body .overlay {
    position: absolute;
    bottom: 10px; /* 根据需要调整 */
    left: 10px;   /* 根据需要调整 */
    right: 10px;  /* 根据需要调整 */
    background: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border-radius: 5px;
}

.card {
    margin-top: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加立体效果 */
    transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
    transform: scale(1.05); /* 悬停时增加缩放效果 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* 悬停时增加阴影效果 */
}

.card-header {
    background: none;
    font-weight: bold;
    border-bottom: 1px solid #ddd;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #004085;
}

.container {
    max-width: 600px;
}

.bottom {
    margin-top: 20px;
    text-align: center;
    font-size: 12px;
    color: #666;
}