/* Banner整体样式 */
.banner {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #f8c3d6, #c5d1ff);
    text-align: center;
    color: #333;
    overflow: hidden;
}

/* 中心叠加的圆形样式 */
.circle {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

.circle-large {
    width: 600px;
    height: 600px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.circle-medium {
    width: 500px;
    height: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.circle-small {
    width: 250px;
    height: 250px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 头像样式 */
.avatar {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 使图片按比例填充，确保不变形 */
}

.top-center {
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
}

.left-top {
    top: 30%;
    left: 25%;
}

.right-top {
    top: 30%;
    right: 25%;
}

.left-bottom {
    bottom: 20%;
    left: 30%;
}

.right-bottom {
    bottom: 20%;
    right: 30%;
	
}

/* 中心内容 */
.center-content {
    position: relative;
    z-index: 1;
}

.banner-title {
    font-size: 55px;
    font-weight: bold;
    margin-bottom: 20px;
}

.join-button {
    padding: 10px 20px;
    font-size: 18px;
    color: #fff;
    background-color: #333;
    border: none;
    border-radius: 20px;
    cursor: pointer;
}
.governance-section {
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		    padding: 20px 10%;
		    background-color: #ffffff;
		    flex-wrap: wrap; 
		}
		.Council-section {
		      display: flex;
		        align-items: center;
		        justify-content: space-between;
		        padding: 50px 5%;
		        background-color: #ffffff;
		        flex-wrap: wrap; 
		}
		
		
		.Community_content {
		    flex: 1;
		    max-width: 600px;
		    margin-bottom: 20px;
		}
		.Council_content {
		    flex: 1;
			max-width: 600px;
			margin-bottom: 20px;
			order: 2; 
		}
		
		.Community_title {
		    font-size: 5rem;
		    font-weight: bold;
		    margin-bottom: 20px;
		    color: #000000;
		    text-transform: lowercase;
		}
		.Council_title {
		    font-size: 5rem;
		    font-weight: bold;
		    margin-bottom: 20px;
		    color: #000000;
		    text-transform: lowercase;
		}
		
		.description {
		    font-size: 1.3rem;
		    color: #555555;
			font-weight: 100;
		    line-height: 1.8;
		}
		.Council_description {
		    font-size: 1.3rem;
		    color: #555555;
			font-weight: 100;
		    line-height: 1.8;
		}
		
		.image-container {
			
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			order: 1; 
			
		}
		.Council-image-container {
		    flex: 1;
		    display: flex;
		    justify-content: center;
		    align-items: center;
			
			
		}
		.img_container {
		    max-width: 1200px; 
		    margin: 0 auto; 
		    padding: 0 20px; 
		}
		
		.responsive-image {
		    max-width: 75%;
		    height: auto;
		    border-radius: 10px;
		}
		.Council-responsive-image {
		    max-width: 70%;
		    height: auto;
		    border-radius: 10px;
		}
		
		/* Responsive Design */
		@media screen and (max-width: 768px) {
		    .governance-section {
		        flex-direction: column; 
		        text-align: center; 
				margin-top: 10px;
		    }
			.Council-section {
			    flex-direction: column; 
			    text-align: center; 
			}
		
		    .Community_content {
		        margin-bottom: 30px; 
		    }
			.Council_content {
			    margin-bottom: 30px; 
			}
		
		    .Community_title {
		        font-size: 45px;
				text-align: center;
				
				
		    }
			.Council_title {
			    font-size: 45px;
				text-align: center;
				margin-top: -250px;
			}
			.image-container {
				
				margin-top: -30px;
				
			}
		
		    .description {
		        font-size: 1.2rem;
				margin-top: 150px;
				text-align: left;
		    }
			.Council_description {
			    font-size: 1.2rem;
				margin-top: 220px;
			}
			.responsive-image {
			    max-width: 50%;
				margin-top: -1050px;
			    
			}
			.Council-responsive-image {
			    max-width: 50%;
				
				
			    
			}
		}
		
		@media screen and (max-width: 480px) {
		    .Community_title {
		        font-size: 45px;
				
		    }
		
		    .description {
		        font-size: 1.2rem;
				text-align: left;
		    }
		}
		
		
		h1, p {
		    margin: 0;
		    padding: 0;
		}
		
		
		.section-title {
		    text-align: center;
		    font-size: 4rem;
		    margin: 20px 0;
		    color: #000;
			font-weight: bold;
			
			color: #000000;
			text-transform: lowercase;
		}
		
		
		.actor-cards {
		    display: flex;
		    justify-content: space-between;
		    align-items: flex-start;
		    flex-wrap: wrap;
		    gap: 20px;
		    padding: 150px;
		}
		
		
		.card {
		    flex: 1;
		    max-width: 370px; 
		    
			background: linear-gradient(to bottom, rgba(229, 240, 78, 0.5), rgba(26, 240, 2450, 0.1), rgba(255, 255, 255, 0.1));
			box-shadow: none;
			border: none;
		    border-radius: 15px;
		   
		    overflow: hidden;
		    padding: 20px;
		    text-align: center;
			margin-top: -100px;
		}
		
		
		.card-header {
		    background: #000; 
		    color: #fff;
		    padding: 10px;
		    border-radius: 60px!important;
		    margin-bottom: 20px;
		}
		
		.card-title {
		    font-size: 1.5rem;
		    text-transform: capitalize;
		    font-weight: bold;
			color: #000000 !important;
			
			
		}
		
		
		.card-subtitle {
		    font-size: 14px;
		    margin-top: 5px;
			color: #000000 !important;
		}
		
		
		.card-content {
		    font-size: 0.9rem;
		    color: #333;
		    line-height: 1.6;
		
		}
		
		.Governanceprocess-image {
		    width: 70%; 
		    height: auto; 
		    border-radius: 10px; 
		    display: block; 
		}
		
		
		@media screen and (max-width: 768px) {
		    .actor-cards {
		        flex-direction: column; 
		        align-items: center;
				padding: 5px;
		    }
		
		    .card {
		       width: 100%;
			    margin-bottom: 10px;
				margin-top: 10px;
			   
		    }
		
		    .section-title {
		        font-size: 40px;
				margin-top: -60px;
		    }
		}
		
		@media screen and (max-width: 480px) {
		    .card-title {
		        font-size: 1.5rem;
		    }
		
		    .card-subtitle {
		        font-size: 0.8rem;
		    }
		
		    .card-content {
		        font-size: 1.2rem;
		    }
		}
		/*images*/
		.Governanceprocess-title {
		    text-align: center;
		    font-size: 4rem;
		    margin: 20px 0;
		    color: #000;
			font-weight: bold;
			margin-top: -50px;
			margin-bottom: 70px;
			color: #000000;
			text-transform: lowercase;
		}
		@media screen and (max-width: 768px) {
		    .Governanceprocess-title {
		        margin-top: -20px;
				margin-bottom: 25px;
				font-size: 45px;
		    }
		}	
		
		.Governanceprocess {
		    text-align: center; 
		    padding: 10px;
		}
		.Governanceprocess-image-com {
		    width: 50%; 
		    height: auto; 
		    display: inline-block; 
		    border-radius: 10px; 
		}
		@media (max-width: 768px) {
		    .Governanceprocess-image-com {
		        max-width: 100%;
		    }
		}
		
		.banner-image img {
		    max-width: 75%; 
		    height: auto; 
		    margin-top: 20px;
			margin-right: 60px;
		}