/* Banner样式 - 用于首页、解决方案、关于我们和联系我们页面 */

/* 公共样式 */
.page-banner {
    height: 500px;
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-top: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.page-banner-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 0 20px;
}

.page-banner h1 {
    color: #333;
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 20px;
    text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}

.page-banner p {
    color: #555;
    font-size: 20px;
    margin-bottom: 30px;
    text-shadow: 0 1px 1px rgba(255,255,255,0.5);
}

/* 解决方案页面 banner - 浅色 */
.solutions-banner {
    background: #a8d8ff;
    position: relative;
}

.solutions-banner:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='grid' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 0 10 L 40 10 M 10 0 L 10 40 M 0 20 L 40 20 M 20 0 L 20 40 M 0 30 L 40 30 M 30 0 L 30 40' fill='none' stroke='%23FFFFFF' stroke-width='0.5' stroke-opacity='0.2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23grid)'/%3E%3C/svg%3E");
    opacity: 0.7;
}

.solutions-banner .page-banner-content {
    background: rgba(255,255,255,0.2);
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    backdrop-filter: blur(5px);
}

/* 关于我们页面 banner - 浅色 */
.about-banner {
    background: #9be3de;
    position: relative;
}

.about-banner:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='smallGrid' width='10' height='10' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 10 0 L 0 0 0 10' fill='none' stroke='%23FFFFFF' stroke-width='0.5' stroke-opacity='0.2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23smallGrid)'/%3E%3C/svg%3E");
    opacity: 0.6;
}

.about-banner .page-banner-content {
    background: rgba(255,255,255,0.2);
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    backdrop-filter: blur(5px);
}

/* 联系我们页面 banner - 浅色 */
.contact-banner {
    background: #e3c9ff;
    position: relative;
}

.contact-banner:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23FFFFFF' fill-opacity='0.2' fill-rule='evenodd'%3E%3Ccircle cx='20' cy='20' r='2'/%3E%3C/g%3E%3C/svg%3E");
}

.contact-banner .page-banner-content {
    background: rgba(255,255,255,0.2);
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    backdrop-filter: blur(5px);
}

/* 动画效果 */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}