/*bit*/
	* {
	    box-sizing: border-box;
	    margin: 0;
	    padding: 0;
	}
	
	html, body {
	    width: 100%;
	   
	    overflow-x: hidden; /* 禁止全局横向滚动 */
	}
	
	body {
	    font-family: Arial, sans-serif;
	}
	
	/* Banner Section */
	.Bitbanner {
	  position: relative; /* 为了给遮罩层和内容定位 */
	  width: 100%;
	  height: 80vh;
	  text-align: center;
	  padding: 50px 20px;
	  background: url('../img/banner/Combanner.png') no-repeat center center; /* 添加背景图 */
	  background-size: cover; /* 背景图铺满容器 */
	  overflow: hidden; /* 防止子元素溢出 */
	}
	
	.Bitbanner::before {
	  content: ''; /* 使用伪元素添加遮罩层 */
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: linear-gradient(to bottom, rgba(160, 234, 255, 0.8), rgba(68, 11, 252, 0.8), rgba(15, 5, 8, 0.8)); /* 渐变遮罩 */
	  z-index: 1; /* 遮罩层优先级 */
	}
	
	.Bitbanner-content {
	  position: relative; /* 内容层放在遮罩层之上 */
	  z-index: 2; /* 确保内容在遮罩层上方显示 */
	  
	  
	}
	.brand-text {
	    font-size: 1.5em;
	    font-weight: bold;
	    color: #FFFFFF;
	}
	
	.Bitbanner h1 {
	    font-size: 130px;
	    margin: 0;
		margin-top: 40px;
		color: #FFFFFF;
	}
	
	.Bitbanner p {
	    margin: 20px 0;
	    font-size: 1.2em;
	    line-height: 1.5;
	    max-width: 600px;
	    margin-left: auto;
	    margin-right: auto;
		color: #FFFFFF;
			  
	}
	
	
	.play-button {
	    background: linear-gradient(to bottom, #a020f0, #800080);
	    border: none;
	    border-radius: 50px;
		width: 15%;
	    padding: 15px 30px;
	    color: white;
	    font-size: 1.5em;
	    cursor: pointer;
	    display: inline-flex;
	    align-items: center;
	    justify-content: center;
	    margin-top: 20px;
	}
	
	.play-button:before {
	    content: '▶';
	    font-size: 1.4em;
	    margin-right: 10px;
	}
	
	/* News Section */
	.news-section {
	    width: 100%;
	    padding: 20px;
	    text-align: center;
		background: linear-gradient(to bottom, rgba(10, 10, 10, 1.0), rgba(112, 47, 132, 0.68), rgba(10, 10, 10, 1.0));
	   
	    font-size: 25px;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center;
	}
	.news-section h1 {
	    font-size: 65px;
	    margin-bottom: 10px;
		color: #FFFFFF;
	}
	
	.news-carousel {
	    width: 100%;
	    max-width: 1200px;
	    margin-top: 10px;
	    overflow-x: auto;
	    display: flex;
	    scrollbar-width: none; /* Firefox */
	    -ms-overflow-style: none; /* IE/Edge */
	    margin-left: -15px; /* 修复可能的右侧溢出 */
	}
	
	.news-carousel-wrapper {
	    display: flex;
	    flex-wrap: nowrap; /* Ensure the news items stay in a single row */
	}
	
	.news-item {
	    width: 100%; /* 确保每个 item 不会超出父容器 */
	    max-width: 466px; /* Prevent items from being too wide */
	    height: 300px;
	    flex-shrink: 0;
	    margin: 0 5px;
	    padding: 10px;
	    border-radius: 15px;
	    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	    color: #000;
	    display: flex;
	    flex-direction: column;
	    justify-content: space-between;
	}
	
	.news-item.new {
	    background: linear-gradient(to bottom, #a0eaff, #f0c3fc);
	}
	
	.news-item.activity {
	    background: linear-gradient(to bottom, #a0eaff, #f0c3fc);
	}
	
	.tag {
	    display: inline-block;
	    font-size: 14px;
	    font-weight: bold;
	    margin-bottom: 10px;
	    padding: 3px 6px;
	    border-radius: 4px;
	    color: #fff;
			    margin-top: -5px;
	}
	
	.tag.new {
	    background-color: #4fc3f7;
			 
	}
	
	.tag.activity {
	    background-color: #e57373;
			 
	}
	
	.title {
	    font-size: 1.2em; /* Responsive font size */
	    margin-bottom: 5px;
	    text-align: left;
	}
	
	.date {
	    font-size: 14px;
	    color: #888;
	    text-align: left;
	}
	
	.view-btn {
	    padding: 5px 10px;
	    background-color: #fff;
	    border: 1px solid #000;
	    border-radius: 50px;
	    cursor: pointer;
	    font-size: 14px;
	    width: 30%;
	}
	
	.news-item .tag {
	    display: inline-block;
	    font-size: 14px;
	    font-weight: bold;
	    padding: 5px 10px;
	    border-radius: 0px 0px 15px 15px;
	    color: #fff;
	    margin-bottom: 10px;
	    position: relative;
	    top: -10px;
	    left: -10px;
	}
	
	.news-item.new .tag {
	    background-color: #4fc3f7;
	    width: 20%;
	    margin-left: 20px;
	}
	
	.news-item.activity .tag {
	    background-color: #e57373;
	    width: 20%;
	    margin-left: 20px;
	}
	
	.view-more-btn {
	    margin-top: 20px;
	    margin-bottom: 50px;
	    padding: 10px 20px;
	    background-color: #000;
	    color: #fff;
	    font-size: 18px;
	    border-radius: 20px;
	    border: none;
	    cursor: pointer;
	    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}
	
	/* Mobile Responsiveness */
	@media (max-width: 768px) {
			 .Bitbanner {
			  
			   height: 50vh;
			}
			  .brand-text {
			      font-size: 1.3em;
			      font-weight: bold;
			      margin-left: -150px;
				  color: #FFFFFF;
			  }
			  
	    .Bitbanner h1 {
	        font-size: 50px;
	    	font-weight: bold;
	    	color: #FFFFFF;
	    }
	    	
	    .Bitbanner p {
	        font-size:1.3em;
	    	color: #FFFFFF;
	    }
	
	    .play-button {
	        font-size: 1.2em;
	        padding: 12px 25px;
			border-radius: 50px;
			width: 35%;
	    }
		
			.news-section {
			     
			 margin-top: 25px;
			     
			  }
	
	    .news-section h1 {
	        font-size: 30px;
	        margin-bottom: 10px;
	    	color: #fffff;
	    }
		
	
	    .news-item {
	        width: 100%; /* Ensure items take up full width on mobile */
	        max-width: 100%; /* Prevent items from overflowing */
	    }
	
	    .view-btn {
	        width: 50%; /* Make buttons larger on small screens */
	    }
	
	    .news-carousel {
	        margin-top: -25px;
	        padding: 0 10px; /* Add some padding */
	    }
	
	    .news-item {
	        margin: 0 5px;
	        height: auto; /* Allow height to adjust */
	    }
	
	    .news-item .tag {
	        font-size: 12px;
	    }
	}
	
	/* Extra Small Screens */
	@media (max-width: 480px) {
	    .Bitbanner h1 {
	        font-size: 50px;
			font-weight: bold;
			color: #FFFFFF;
	    }
	
	    .Bitbanner p {
	        font-size:1.3em;
			color: #FFFFFF;
	    }
	
	    .play-button {
	        font-size: 1em;
	        padding: 10px 20px;
			margin-top: -10px;
			border-radius: 50px;
			width: 35%;
	    }
	
	    .news-section h2 {
	        font-size: 30px;
	    }
	
	    .news-item {
	        width: 85%; /* Full width on small screens */
	    }
	
	    .view-btn {
	        font-size: 12px;
				  width: 20%;
	    }
	}
	/*bit end*/
	.proposal_body {
	    font-family: Arial, sans-serif;
	    background: linear-gradient(to bottom, rgba(178, 225, 244, 1.0), rgba(233, 240, 138, 0.48), rgba(234, 227, 227, 0.1));
	   
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    
	}
	
	.latest-proposal {
	    width: 100%;
	    max-width: 1200px;
	    padding: 20px;
	    text-align: center;
	}
	
	.header h1 {
	    font-size: 65px;
	    margin-bottom: 10px;
		color: #fffff;
	}
	@media (max-width: 768px) {
		.header h1 {
		    font-size: 30px;
		    
		}
	}
	
	.header p {
	    font-size: 16px;
	    max-width: 600px;
	    margin: 0 auto;
	    color: #000;
		
	}
	
	.view-more {
	    background-color: #000;
	    color: #FFF;
	    border: none;
	    padding: 10px 20px;
	    font-size: 16px;
	    border-radius: 5px;
	    cursor: pointer;
	    margin-top: 20px;
	}
	
	.proposals {
	    display: flex;
	    flex-wrap: wrap;
	    gap: 20px;
	    justify-content: center;
	    margin-top: 30px;
	}
	
	.proposal-card {
	    
	    border-radius: 15px;
	    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	    width: 350px;
	    padding: 20px;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	}
	
	.proposal-header {
	    display: flex;
	    align-items: center;
	    width: 100%;
	    margin-bottom: 15px;
	    position: relative;
	}
	
	.user_avatar {
	    width: 50px;
	    height: 50px;
	    border-radius: 50%;
	    margin-right: 10px;
		border: 3px solid #25AEFD;
	}
	
	.user-info {
	    flex-grow: 1;
		text-align: left;
		
	}
	
	.community {
	    font-size: 13px;
	    color: #666;
	}
	
	.user-name {
	    font-size: 22px;
	    font-weight: bold;
	    color: #333;
		
	}
	
	.reward {
	    background-color: #A646F6;
	    color: #FFF;
	    font-size: 14px;
		font-weight: 100;
	    padding: 10px 12px;
	    border-radius: 0px 0px 15px 15px;
		height: 55px;
	    position: absolute;
	    right: 0;
	    top: 0;
	    transform: translateY(-50%);
	}
	.reward-Rse {
	   font-size: 16px;
		font-weight: bold;
	   
	}
	
	.proposal-content {
	    text-align: left;
	    margin-top: -15px;
	    width: 100%;
	}
	
	.date {
	    font-size: 14px;
	    color: #999;
		margin-bottom: 10px;
		
	}
	
	h2 {
	    font-size: 18px;
	    color: #333;
	    margin: 10px 0;
	}
	
	.proposal-footer {
	    display: flex;
	    justify-content: space-between;
	    width: 100%;
	    margin-top: 15px;
	}
	
	.btn-discuss {
	   
		border: 2px solid #25AEFD;
	    color: #25AEFD;
	   
	    padding: 8px 15px;
	    font-size: 14px;
	    border-radius: 50px;
	    
	}
	
	.btn-view-button {
	    
	    color: #FFFFFF;
	    display: inline-block;
	    padding: 8px 12px;
	    font-size: 14px;
	    border-radius: 20px;
	    border: none;
		background: linear-gradient(135deg, #d732f9, #1b1cbe);
		cursor: pointer;
		transition: transform 0.2s ease;
	}
	.btn-view-button:hover {
	    transform: scale(1.05);
	}
	/*vote*/
	
	
	.tabs {
	    display: flex;
	    justify-content: center;
	    margin-top: 20px;
	}
	
	.tab-button {
	    padding: 10px 20px;
	    border: none;
	    cursor: pointer;
	    background: #ddd;
	    color: #333;
	    font-weight: bold;
	    margin: 0 5px;
	}
	
	.tab-button.active {
	    background: #A646F6;
	    color: #FFF;
	}
	
	.tab-content {
	    display: flex;
	    flex-wrap: wrap;
	    gap: 20px;
	    justify-content: center;
	    margin-top: 20px;
	}
	
	.vote_card {
	    background: linear-gradient(to bottom, rgba(15, 64, 245, 1.0), rgba(242, 241, 245, 0.58), rgba(255, 255, 255, 0.1));
	    border-radius: 15px;
	    
	    width: 360px;
	    padding: 20px;
	    display: flex;
		box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	    flex-direction: column;
	    align-items: center;
	}
	
	
	.vote_card-header {
	    display: flex;
	    align-items: center;
	    width: 100%;
	    position: relative;
		
		
	}
	
	.voteavatar {
	    width: 65px;
	    height: 65px;
	    border-radius: 50%;
	    margin-right: 10px;
		margin-left: -5px;
		margin-top: -10px;
		border: 4px solid #FFFFFF;
	}
	
	.voteuser-info {
	    flex-grow: 1;
	}
	
	.votename {
	    font-size: 16px;
	    color: #FFFFFF;
	    font-weight: bold;
		margin-top: -10px;
		margin-left: -100px;
		margin-bottom: 5px;
	}
	
	.location {
	    font-size: 14px;
	    color: #FFFFFF;
		margin-left: -60px;
	}
	
	.votes {
	    background-color: #A646F6;
	    color: #FFF;
	    font-size: 14px;
	    padding: 5px 25px;
		
	    border-radius: 50px;
		margin-top: -10px;
	    text-align: center;
	}
	
	.card-body {
	    width: 100%;
	    text-align: center;
	    margin-top: 15px;
		
	}
	
	.votes-summary {
	      display: flex;
	      justify-content: space-around;
	      margin-top: 10px;
	      font-size: 14px;
	      height: 10vh;
	      color: #555;
	      background-color: #FFFFFF;
	      border: 3px solid #8244F2;
	      line-height: 25px;
	      border-radius: 18px;
	    }
	
	.support, .opposing {
	    font-weight: 200;
	}
	.separator {
	      border-left: 1px solid #8244F2;
	      width: 1px;
	      height: 30px;
	      margin: 20px 10px;
	      display: flex;
	      align-items: center;
	}
	
	.countdown {
	    display: flex;
	    gap: 15px;
	    margin-top: 10px;
		justify-content: center;
	}
	
	.countdown-item {
	    background: linear-gradient(145deg, #FF3CAC, #784BA0);
	    border-radius: 10px;
	    color: white;
	    font-size: 24px;
	    font-weight: bold;
	    width: 60px;
	    height: 60px;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center;
	}
	
	.countdown-item span {
	    font-size: 24px;
	    font-weight: bold;
	}
	
	.countdown-item br + span {
	    font-size: 14px; /* 调整 H、min、s 的字体大小 */
	    font-weight: normal;
	    color: #FFF;
	    margin-top: -25px;
	}
	
	.deadline-text {
	    font-size: 13px;
	    color: #000;
		margin-top: 8px;
	}
	.total {
	    font-size: 22px;
	    color: #FFFFFF;
	}
	.vspk {
	    font-size: 25px;
	    color: #0002E8;
	}
	.vspk2 {
	    font-size: 25px;
	    color: #FB1B8A;
	}
	
	.proposal-title {
	    font-size: 25px;
	    color: #000;
		text-align: left;
	    margin: 10px 0;
		font-weight: 200;
		
		
	}
	
	.proposal-date {
	    font-size: 16px;
	    color: #888;
		
		font-weight: 200;
		text-align: left;
	}
	
	.voters {
	    display: flex;
	    justify-content: left;
	    gap: 5px;
	    margin-top: 10px;
		
	}
	
	.voters img {
	    width: 47px;
	    height: 47px;
		
	    border-radius: 50%;
	   
	}
	@media (max-width: 768px) {
		.votename {
		    font-size: 16px;
		    color: #FFFFFF;
		    font-weight: bold;
			margin-top: -10px;
			margin-left: -100px;
			margin-bottom: 5px;
		}
		.location {
		    font-size: 14px;
		    color: #FFFFFF;
			margin-left: -58px;
		}
		.votes-summary {
		      display: flex;
		      justify-content: space-around;
		      margin-top: 10px;
		      font-size: 14px;
		      height: 8vh;
		      color: #555;
		      
		      line-height: 30px;
		      border-radius: 18px;
		    }
	}