body{
    background-color: rgb(255, 255, 255);
}

#wrapper{
    background-color:rgb(255, 255, 255);
    width: 95%;
    height: auto;
    min-height: 400px;
    margin: auto;
    border-radius: 8px; /* 容器的圆角，可以根据需要调整 */

}

header{
    background-color: #000000;
}

/* 基本样式重置和布局 */
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

nav li.nav-item {
    position: relative;
    margin-right: 20px;
    color: #f0f0f0;
}

nav a.nav-link {
    text-decoration: none;
    color: rgb(255, 255, 255); /* 根据需要调整颜色 */
    padding: 10px 15px;
    display: block;
}

nav a.nav-link:hover {
    background-color: rgb(199, 31, 132); /* 悬停时的背景色 */
    color: rgb(255, 255, 255); /* 悬停时的文字颜色 */
}

/* 副标题导航的样式和隐藏 */
.subtitles {
    display: none; /* 默认隐藏 */
    position: absolute;
    top: 100%; /* 位于导航项下方 */
    left: 0;
    background-color: #fff; /* 背景色 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    z-index: 1000; /* 确保显示在其他内容之上 */
}

.subtitles a.subtitle-link {
    display: block;
    text-decoration: none;
    color: rgb(199, 31, 132); /* 根据需要调整颜色 */
    padding: 10px 15px;
    white-space: nowrap; /* 防止文本换行 */
}

.subtitles a.subtitle-link:hover {
    background-color: #000000; /* 副标题链接悬停时的背景色 */
    color: rgb(20, 227, 193); /* 副标题链接悬停时的文字颜色 */
}

/* 显示副标题导航的样式 */
nav li.nav-item:hover .subtitles {
    display: block; /* 悬停时显示 */
}

.text-overlay {
    position: relative;
    width: 100%;
    height: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(41, 16, 16);
    text-align: center;
    overflow: hidden;
    background-image: url(./image/Blur\ 4.png);
    background-size: cover;
    background-position: center;
    transition: background-color 0.5s cubic-bezier(0.6, 0.1, 0, 1.14);
}
.text-content {
    padding: 20px;
}
.text-content p {
    font-size: 24px; /* 更改字体大小，单位可以是px、em、rem等 */
    font-weight: bold; /* 更改字体粗细，可选值：normal, bold, lighter, 100-900 */
    color: #ffffff; /* 可选：设置字体颜色 */
    text-align: center; /* 可选：文字居中 */
    margin: 10px 0; /* 可选：调整段落的上下间距 */
}
.text-content p2 {
    font-size: 24px; /* 更改字体大小，单位可以是px、em、rem等 */
    font-weight: lighter; /* 更改字体粗细，可选值：normal, bold, lighter, 100-900 */
    color: #ffffff; /* 可选：设置字体颜色 */
    text-align: center; /* 可选：文字居中 */
    margin: 10px 0; /* 可选：调整段落的上下间距 */
}


h1,h2{

font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 100px;

color: rgb(199, 31, 132);
}



h3 {

    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    
    color: rgb(29,68,181);
    }
    

.image-container-1{  
    display: flex; 
    gap: 20px;   
    justify-content: center;
    align-items: center;
    background-color: #29182a;
    height: 300px; 
    border-radius: 8px; /* 容器的圆角，可以根据需要调整 */
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);

}  

.image-wrapper {
    position: relative;
    width: 33%; 
    height: 205px;  

}

.image-wrapper img {
    width: 100%;
    height: 100%;
    display: block;
    transition: filter 0.3s ease;
    object-fit: cover; 
}

.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 45px; 
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease;
    text-align: center;
    width: 100%;
    background-color: rgba(199, 31, 132, 0.726); 
    text-decoration: none;
}


.image-wrapper:hover .overlay-text {
    opacity: 1;
}

.image-wrapper:hover img {
    filter: grayscale(100%);
}
.parent-container {
    display: flex;
    justify-content: space-between; /* 根据需要调整间距 */
    align-items: center; /* 垂直居中对齐 */
    height: 55vh; /* 或者您想要的任何高度 */
    margin: 0;
    padding: 0 20px; /* 可选：为容器添加一些内边距 */
    background-size: cover;
    background-color: #000000;
    background-position: center;
    border-radius: 8px;         /* 圆角边框 */
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);

}

.image-container-2 {
    flex: 0 0 60%; /* 图片容器占据60%的宽度 */
    max-width: 60%;
    text-align: center;
   
}

.image-container-2 img {
    max-width: 100%;
    height: auto;
    
}

.display-image {
    width: 300px; /* 设置您想要的宽度 */
    height: auto; /* 高度设置为自动，以保持图片的纵横比 */
}

.tags-container {
    flex: 0 0 35%; /* 标签容器占据35%的宽度，并留下一些空间用于间距 */
    max-width: 35%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tag {
    display: flex;              /* 设置为Flex容器，用于居中 */
    justify-content: center;    /* 水平居中 */
    align-items: center;        /* 垂直居中 */
    padding: 10px 20px;
    background: linear-gradient(to right, rgba(199, 31, 132, 0.598), #00b3a1b8); /* 渐变背景 */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* 可选：文本阴影 */
    height: 55px;               /* 设置标签高度 */
    box-sizing: border-box;     /* 确保padding和border不会增加额外的高度 */
    line-height: normal;        /* 如果需要，可以重置行高以适应新高度 */
    border-radius: 8px;         /* 圆角边框 */
}

.tag:hover {
    background-color: #0056b3;
}