@media only screen and (max-width:768px){
	html{
		overflow-x:hidden;
	}
	
	.bdt-dots-container .swiper-pagination .swiper-pagination-bullet:after{
		width:25%;
		height:5px;
		border-radius:0;
	}
}

/* color selector */

.color-selector-wrapper{
	padding:0;
	margin:0;
	position:relative;
	font-family:inherit;
	background:transparent;
	
	.heading-container{
		z-index:2;
		position:absolute;
		top:20px;
		left:20px;
		
		.title{
			font-size:32px;
			font-weight:500;
		}
		
		.subtitle{
			font-size:20px;
			font-weight:400;
		}
	}
	
	@media only screen and (max-width:768px){
		
		.heading-container{
			position:relative;
			
		}
		
		
	}
		
	.list-container{
		display:inline-flex;
		flex-wrap:wrap;
		width:100%;
		margin:0;
		padding:0;
		z-index:1;
		
		ul{
			display:inline-flex;
			flex-wrap:wrap;
			margin:0;
			padding:0;
			list-style:none;
		}
		
		.color-selector{
			width:100%;

			.color{
				
				img{
					display:inline-block;
					height:auto;
					float:right;
					padding:20px 0 70px 40px;
				}
				.color-labels{
					position:absolute;
					bottom:100px;
					left:20px;
					
					.heading{
						font-size:18px;
						font-weight:400;
						margin-bottom:0;
					}
					
				}
				
				@media only screen and (max-width:768px){
					.color-labels{
						bottom:30px;
					}
					
					img{
						padding:100px 0 120px;
					}
				}
			}
				
		}
		
		.color-selector-badge{
			width:100%;
			position:absolute;
			bottom:20px;
			left:20px;
			z-index:100;
			flex-wrap:nowrap;
			column-gap:30px;
			
			.color-badge{
				width:60px;
				height:60px;
				border:2px solid #ffffff00;
				border-radius:50%;
				cursor:pointer;
			
				&.selected{
					border-color:#f00;
				}
				
				img{
					border:5px solid transparent;
					border-radius:50%;
				}
			}
		}
		
		
		.term{
			position:absolute;
			right:20px;
			bottom:20px;
		}
		
		@media only screen and (max-width:768px){
			.color-selector-badge{
				position:relative;
				
				.color-badge{
					width:50px;
					height:50px;
				}
			}
			.term{
				bottom:135px;
				left:0;
				width:100%;
				text-align:center;
				padding:0 10px;
				font-size:12px;
				
			}
		}
	}
	
	.container{
		width:100%;
		padding:80px 0;
		transition:ease 0.5s;
		
		.wrapper{
			max-width:1140px;
			margin:0 auto;
		}
		.heading-container{
			position:relative;
			left:0;
			top:0;
			
			.title{
				color:#fff;
			}
		}
		
	}
	
	@media only screen and (max-width:768px){
		.container{
			background-size:cover!important;

			.heading-container{
				padding:20px;
				
				h2.title{
					font-size:24px!important;
				}
			}
		}
	}
	.list-key-container{
		ul{
			list-style: none;
			display: inline-flex;
			margin: 0;
			padding: 0;
			width: 100%;
			flex-wrap: nowrap;
			column-gap: 10px;
			margin-top:80px;
			
			li{
				min-height:330px;
				width:25%;
				position:relative;
				transition:ease 0.5s;
				padding:20px;
				
				a{
					display:block;
					width:100%;
					height:100%;
				}
				
				.key-labels{
					position:absolute;
					bottom:20px;
					left:20px;
					
					.heading{
						color:#fff;
						margin-bottom:5px;
					}
					h3{ font-size: 24px;}
					h4{ font-size: 16px; font-weight:300; display:none; transition:ease 0.5s; }
				}
				
				.pointer{
					position:absolute;
					bottom:20px;
					right:20px;
				}
				
				&:hover{
					width: 50%;
					transition:ease 0.5s;
					
					.key-labels h4.heading{
						display:block;
						transition:ease 0.5s;
					}
				}
			}
			li.key.mobile{
				display:none;
			}
			@media only screen and (max-width:768px){
				
				li.key{
					display:none;
				}
				li.key.mobile{
					display:list-item;
					height:auto;
					min-height:1px;
				}
			}
		}
		
		@media only screen and (max-width:768px){
			.key-selector{
				flex-wrap: wrap;
				row-gap:20px;
				padding:10px;
				margin:10px 0;
				
				.key{
					width:100%;
					background-size:auto;
					/* min-height:200px; */
					
					.key-labels{
						position:relative;
						bottom:unset;
						left:unset;
						
						h3.heading{
							font-size:24px;
							font-weight:400;
						}
						
						h4.heading{
							display:block!important;
							font-size:18px;
							font-weight:300;
						}
					}
					
				}
			}
		}
	}
	
	.list-image-container{
		ul{
			list-style:none;
			display:inline-flex;
			flex-wrap:nowrap;
			column-gap:20px;
			margin:0;
			padding:0;
			height:345px;
			width:100%;
			
			li{
				position:relative;
				padding:30px;
				width:50%;
				overflow:hidden;
				transition:ease 0.5s;
				
				.key-labels{
					
					.heading{
						color:#fff;
						margin-bottom:20px;
						width:600px;
					}
					
					h3{
						font-size:24px;
					}
					h4{
						font-size:18px;
						font-weight:300;
						display:none;
						width:600px;
					}
				}
				
				&:hover{
					width:100%;
					transition:ease 0.5s;
					
					.key-labels h4{
						display:block;
						transition:ease 0.5s;
						width:600px;
					}
				}
			}
		}
	}
	
	.list-event-container{
		
		.filter{
			margin:40px auto;
			width:100%;
			padding:0;
			margin-top: 0px;

			select{
				border:0;
				border-bottom:1px solid #ccc;
				background:#fff;
				color:#333;
			}
		}
		
		.hide{
			display:none;
		}
		
		.see-more{
			display: inline-flex;
			flex-wrap: wrap;
			align-content: center;
			justify-content: center;
			align-items: center;
			margin: 40px 0;
			width: 100%;
			
			button{
				color: #000;
				background:#fff;
				border: 2px solid #000;
				border-radius: 100px;
				padding: 15px 35px;
				font-weight: 600;
				font-size: 15px;
			}
		}
		
		/** Modified by Fadzilah, 20260106 **/
		ul{
			/*display:inline-flex;
			flex-wrap:nowrap;
			list-style:none;
			margin:0;
			padding:0;
			column-gap:15px;
			width:100%;
			margin-top:20px;*/
			
			display: flex;
			flex-wrap: wrap; 
			column-gap:15px;
			row-gap: 15px;
			margin: 0;
			list-style: none;
			padding:0;
						
			li{
				background:#C3002F;
				padding:20px;
				color:#fff;
				width:calc(100% / 3);
				
				h3,h4,i,a{
					color:#fff;
				}
				.heading{
					font-size:18px;
					margin-bottom:10px;
				}
				.label{
					font-size:14px;
					font-weight:300;
					margin-bottom:5px;
				}
				.date{
					font-size:16px;
					font-weight:400;
					margin-bottom:40px;
				}
				.get-direction{
					font-weight:300;
					display:inline-flex;
					flex-wrap:nowrap;
					width:100%;
					justify-content:space-between;
					align-items:center;
					
				}
				
			
			}		
		}
		/** Added by Fadzilah, 20260106 **/
			ul > li {
			flex: 0 0 calc((100% - 30px) / 3);
			box-sizing: border-box;
		}
		@media only screen and (max-width:768px){
			ul{
				display: inline;
				flex-wrap:wrap;
				row-gap:10px;
				
				li{
					width:100%;
					margin-bottom: 15px;
				}	
			}
				
		}
		
		.event-listing-not-found{
				display:none;
				padding:40px 0;
				min-height:300px;
				
				.heading{
					font-size:18px;
				}
			}
	}
}