/* style.css */

/* 在这里添加你的自定义 CSS */

/* 例如，如果你想修改按钮颜色但不想修改上面的:root变量 */
/*
.btn-primary {
    background-color: #ff6600; !important;
    border-color: #ff6600; !important;
}
.btn-primary:hover {
     background-color: #cc5200 !important;
     border-color: #cc5200 !important;
}
*/

/* 调整一些间距或字体等，覆盖 Bootstrap 默认样式 */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* 示例字体 */
}

/* 确保图片在小屏幕上也能正常显示 */
.img-fluid {
    max-width: 100%;
    height: auto;
}

/* 如果需要，可以添加针对不同屏幕尺寸的响应式样式 */
/*
@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 2rem;
    }
    .hero-section p {
        font-size: 1rem;
    }
}
*/

/* 如果 Hero Section 背景是图片 */

.hero-section {
    background: url('your-background-image.jpg') no-repeat center center;
    background-size: cover;
    color: white;
    padding: 80px 0;
    text-align: center;
    position: relative;
}
.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); // 添加一层半透明黑色蒙版，确保文字清晰
    z-index: 1;
}
.hero-section > .container {
    position: relative;
    z-index: 2; // 确保内容在蒙版之上
}