@use '../../utils/' as *;

/*============= EVENT CSS AREA ===============*/
.event1-section-area {
	position: relative;
	z-index: 1;
	background: #FBF9F4;

	.nav.nav-pills {
		justify-content: center;

		.nav-item {
			button {
				border-radius: 8px;
				border: 1px solid rgba(26, 23, 25, 0.05);
				background: #FFF;
				padding: 0;
				margin: 0 30px 0 0;

				@media #{$md} {
					margin: 30px 30px 0 0;
				}

				@media #{$xs} {
					margin: 30px 0 0 0;
					width: 100%;
				}

				&.active {
					background: var(--ztc-bg-bg-3);
					transition: all .4s;

					.day {
						background: var(--ztc-bg-bg-2);
						color: var(--ztc-text-text-1);
						transition: all .4s;
					}
				}

				.vl-flex {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 24px;
				}

				.day {
					color: var(--ztc-text-text-3);
					font-family: var(--grotesk);
					font-size: var(--ztc-font-size-font-s18);
					font-style: normal;
					font-weight: var(--ztc-weight-medium);
					line-height: 18px;
					display: block;
					text-align: center;
					border-radius: 8px 8px 0px 0px;
					background: rgba(26, 23, 25, 0.05);
					padding: 8px 0;
				}

				.cal {
					color: var(--ztc-text-text-2);
					font-family: var(--grotesk);
					font-size: var(--ztc-font-size-font-s44);
					font-style: normal;
					font-weight: var(--ztc-weight-bold);
					line-height: 44px;
					display: inline-block;
					transition: all .4s;
					text-align: center;
					margin: 0 28px 0 0;
				}

				span.date {
					color: var(--ztc-text-text-2);
					font-family: var(--grotesk);
					font-size: var(--ztc-font-size-font-s22);
					font-style: normal;
					font-weight: var(--ztc-weight-bold);
					line-height: 26px;
					/* 118.182% */
					display: inline-block;
				}
			}
		}
	}

	.tab-content {
		.tab-pane {
			.tabs-widget-boxarea {
				background: var(--ztc-bg-bg-1);
				padding: 40px;
				border-radius: 8px;

				@media #{$xs} {
					padding: 16px;
				}

				.img1 {
					img {
						height: 270px;
						width: 100%;
						object-fit: cover;
						border-radius: 8px;

					}
				}

				.content-area {
					padding: 0 0 0 30px;

					@media #{$xs} {
						padding: 0;
						margin-top: 30px;
					}

					@media #{$md} {
						padding: 0;
						margin-top: 30px;
					}

					ul {
						li {
							display: inline-block;

							a {
								color: var(--ztc-text-text-3);
								font-family: var(--figtree);
								font-size: var(--ztc-font-size-font-s16);
								font-style: normal;
								font-weight: var(--ztc-weight-medium);
								line-height: 16px;

								/* 100% */
								span {
									margin: 0 8px;
								}
							}
						}
					}

					a.head {
						color: var(--ztc-text-text-2);
						font-family: var(--grotesk);
						font-size: var(--ztc-font-size-font-s24);
						font-style: normal;
						font-weight: var(--ztc-weight-bold);
						line-height: 24px;
						display: inline-block;
						transition: all .4s;
					}

					p {
						color: var(--ztc-text-text-3);
						font-family: var(--figtree);
						font-size: var(--ztc-font-size-font-s18);
						font-style: normal;
						font-weight: var(--ztc-weight-medium);
						line-height: 28px;
					}
				}
			}
		}
	}
}

// Homepage 02 //
.event2-section-area {
	position: relative;
	z-index: 2;
	background-image: url(../img/bg/header-bg3.png);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;

	.tabs-button {
		ul {
			justify-content: center;

			li {
				button {
					border-radius: 8px;
					background: rgba(255, 255, 255, 0.10);
					padding: 8px;
					width: 180px;
					display: flex;
					align-items: center;
					text-align: center;
					height: 56px;
					margin: 0 16px 0 0;

					@media #{$xs} {
						margin: 0 0 10px 0;
					}

					&.active {
						background: var(--ztc-bg-bg-5);
						transition: all .4s;

						span.calender {
							background: var(--ztc-bg-bg-4);
							transition: all .4s;
						}

						.pl-8 {
							.day {
								color: var(--ztc-text-text-5);
								transition: all .4s;
							}

							.date {
								color: var(--ztc-text-text-5);
								transition: all .4s;
							}
						}
					}

					span.calender {
						border-radius: 4px;
						background: rgba(255, 255, 255, 0.20);
						height: 43px;
						width: 55px;
						text-align: center;
						line-height: 40px;
						display: inline-block;
						transition: all .4s;

						img {
							transition: all .4s;
							height: 24px;
							width: 24px;
							filter: brightness(0) invert(1);
						}
					}

					.pl-8 {
						padding-left: 8px;
						display: inline-block;
						text-align: start;

						.day {
							color: var(--ztc-text-text-1);
							font-family: var(--grotesk);
							font-size: var(--ztc-font-size-font-s16);
							font-style: normal;
							font-weight: var(--ztc-weight-bold);
							line-height: 16px;
							/* 100% */
							display: inline-block;
							transition: all .4s;
							text-align: start;
						}

						.date {
							color: var(--ztc-text-text-1);
							font-family: var(--grotesk);
							font-size: var(--ztc-font-size-font-s14);
							font-style: normal;
							font-weight: var(--ztc-weight-medium);
							line-height: 14px;
							/* 100% */
							display: inline-block;
							transition: all .4s;
						}
					}
				}
			}
		}
	}

	.tab-content {
		.tab-pane {
			.event-widget-area {

				.event2-boxarea {
					border-radius: 8px;
					background: rgba(255, 255, 255, 0.10);
					backdrop-filter: blur(5px);
					border-radius: 8px;
					padding: 28px;
					position: relative;
					z-index: 1;

					&::after {
						position: absolute;
						content: "";
						height: 93%;
						width: 1px;
						left: -60px;
						top: 195px;
						transition: all .4s;
						background: rgba(255, 255, 255, 0.10);
					}

					h1 {
						color: var(--ztc-text-text-6);
						font-family: var(--grotesk);
						font-size: var(--ztc-font-size-font-s24);
						font-style: normal;
						font-weight: var(--ztc-weight-bold);
						line-height: 24px;
						display: inline-block;
						transition: all .4s;
						height: 56px;
						width: 56px;
						text-align: center;
						line-height: 56px;
						background: rgba(255, 255, 255, 0.10);
						border-radius: 50%;
						position: absolute;
						left: -88px;
						top: 140px;
						z-index: 1;

						&.active {
							background: var(--ztc-bg-bg-5);
							color: var(--ztc-text-text-5);
						}

						@media #{$xs} {
							display: none;
						}

						@media #{$md} {
							display: none;
						}
					}

					.img1 {
						@media #{$xs} {
							margin-bottom: 30px;
						}

						@media #{$md} {
							margin-bottom: 30px;
						}

						img {
							height: 100%;
							width: 100%;
							object-fit: cover;
							border-radius: 4px;
						}
					}

					.content-area {
						ul {
							li {
								display: inline-block;

								a {
									color: var(--ztc-text-text-1);
									font-family: var(--grotesk);
									font-size: var(--ztc-font-size-font-s16);
									font-style: normal;
									font-weight: var(--ztc-weight-bold);
									line-height: 16px;
									/* 100% */
									display: inline-block;
									transition: all .4s;

									@media #{$xs} {
										display: block;
										margin-bottom: 10px;
									}

									img {
										filter: brightness(0) invert(1);
										margin: 0 4px 0 0;
									}

									span {
										margin: 0 8px;
										display: inline-block;
									}
								}
							}
						}

						.head {
							color: var(--ztc-text-text-1);
							font-family: var(--grotesk);
							font-size: var(--ztc-font-size-font-s24);
							font-style: normal;
							font-weight: var(--ztc-weight-bold);
							line-height: 24px;
							display: inline-block;
							transition: all .4s;

							@media #{$xs} {
								line-height: 32px;
							}
						}

						.author-area {
							display: flex;
							align-items: center;

							@media #{$xs} {
								display: inline-block;
							}

							.autho-name-area {
								display: flex;
								align-items: center;
								padding: 0 12px 0 0;
								border-right: 1px solid #354F57;

								.img1 {
									@media #{$xs} {
										margin-bottom: 0;
									}

									@media #{$md} {
										margin-bottom: 0;
									}

									img {
										height: 56px;
										width: 56px;
										border-radius: 50%;
										object-fit: cover;
									}
								}

								.text {
									padding-left: 12px;

									a {
										color: var(--ztc-text-text-1);
										font-family: var(--grotesk);
										font-size: var(--ztc-font-size-font-s18);
										font-style: normal;
										font-weight: var(--ztc-weight-bold);
										line-height: 18px;
										display: inline-block;
										transition: all .4s;

										@media #{$xs} {
											line-height: 18px;
										}
									}

									p {
										color: var(--ztc-text-text-1);
										font-family: var(--grotesk);
										font-size: var(--ztc-font-size-font-s16);
										font-style: normal;
										font-weight: var(--ztc-weight-medium);
										line-height: 18px;
										display: inline-block;
										transition: all .4s;
									}
								}
							}
						}
					}
				}

				.event2-boxarea.box3 {
					&::after {
						display: none;
					}
				}

				.event2-boxarea {
					.content-area {
						.author-area {
							.autho-name-area {
								@media #{$xs} {
									padding: 0 !important;
									margin-bottom: 16px;
									border: none;
								}
							}
						}
					}
				}
			}
		}
	}
}

// Homepage 03 //
.event3-section-area {
	position: relative;
	z-index: 2;

	.tabs-button {
		ul {
			justify-content: center;

			li {
				button {
					border-radius: 8px;
					background: #F5F5F5;
					padding: 8px;
					width: 180px;
					display: flex;
					align-items: center;
					text-align: center;
					height: 56px;
					margin: 0 16px 0 0;

					@media #{$xs} {
						margin: 0 0 10px 0;
					}

					&.active {
						border-radius: 8px;
						background: var(--LLL, linear-gradient(135deg, #FF5000 0%, #FF00B8 100%));
						transition: all .4s;

						span.calender {
							background: var(--ztc-bg-bg-1);
							transition: all .4s;

							img {
								filter: none;
							}
						}

						.pl-8 {
							.day {
								color: var(--ztc-text-text-1);
								transition: all .4s;
							}

							.date {
								color: var(--ztc-text-text-1);
								transition: all .4s;
							}
						}
					}

					span.calender {
						border-radius: 4px;
						background: var(--LLL, linear-gradient(135deg, #FF5000 0%, #FF00B8 100%));
						height: 43px;
						width: 55px;
						text-align: center;
						line-height: 40px;
						display: inline-block;
						transition: all .4s;

						img {
							transition: all .4s;
							height: 24px;
							width: 24px;
							filter: brightness(0) invert(1);
						}
					}

					.pl-8 {
						padding-left: 8px;
						display: inline-block;
						text-align: start;

						.day {
							color: var(--ztc-text-text-8);
							font-family: var(--grotesk);
							font-size: var(--ztc-font-size-font-s16);
							font-style: normal;
							font-weight: var(--ztc-weight-bold);
							line-height: 16px;
							/* 100% */
							display: inline-block;
							transition: all .4s;
							text-align: start;
						}

						.date {
							color: var(--ztc-text-text-8);
							font-family: var(--grotesk);
							font-size: var(--ztc-font-size-font-s14);
							font-style: normal;
							font-weight: var(--ztc-weight-medium);
							line-height: 14px;
							/* 100% */
							display: inline-block;
							transition: all .4s;
						}
					}
				}
			}
		}
	}

	.tab-content {
		.tab-pane {
			.event-widget-area {
				.event2-boxarea {
					position: relative;

					&::after {
						position: absolute;
						content: "";
						height: 93%;
						width: 1px;
						left: 45.7%;
						top: 0;
						transition: all 0.4s;
						background: #E6E7E8;

						@media #{$xs} {
							display: none;
						}

						@media #{$md} {
							display: none;
						}
					}

					h1 {
						color: var(--ztc-text-text-1);
						font-family: var(--grotesk);
						font-size: var(--ztc-font-size-font-s24);
						font-style: normal;
						font-weight: var(--ztc-weight-bold);
						line-height: 24px;
						display: inline-block;
						transition: all 0.4s;
						height: 56px;
						width: 56px;
						text-align: center;
						line-height: 56px;
						background: var(--LLL, linear-gradient(135deg, #FF5000 0%, #FF00B8 100%));
						border-radius: 50%;
						position: absolute;
						left: 43%;
						top: 88px;
						z-index: 1;

						&.active {
							background: var(--LLL, linear-gradient(135deg, #FF5000 0%, #FF00B8 100%));
							color: var(--ztc-text-text-1);
						}

						@media #{$xs} {
							display: none;
						}

						@media #{$md} {
							display: none;
						}
					}

					.img1 {
						position: relative;
						z-index: 1;

						@media #{$xs} {
							margin-bottom: 30px;
						}

						@media #{$md} {
							margin-bottom: 30px;
						}

						img {
							height: 100%;
							width: 100%;
							object-fit: cover;
							border-radius: 4px;
						}
					}

					.content-area {
						ul {
							li {
								display: inline-block;

								a {
									color: var(--ztc-text-text-8);
									font-family: var(--grotesk);
									font-size: var(--ztc-font-size-font-s16);
									font-style: normal;
									font-weight: var(--ztc-weight-bold);
									line-height: 16px;
									/* 100% */
									display: inline-block;
									transition: all .4s;

									@media #{$xs} {
										display: block;
										margin-bottom: 10px;
									}

									img {
										filter: brightness(0);
										margin: 0 4px 0 0;
									}

									span {
										margin: 0 8px;
										display: inline-block;
									}
								}
							}
						}

						.head {
							color: var(--ztc-text-text-8);
							font-family: var(--grotesk);
							font-size: var(--ztc-font-size-font-s24);
							font-style: normal;
							font-weight: var(--ztc-weight-bold);
							line-height: 24px;
							display: inline-block;
							transition: all .4s;

							@media #{$xs} {
								line-height: 32px;
							}
						}

						.author-area {
							display: flex;
							align-items: center;

							@media #{$xs} {
								display: inline-block;
							}

							.autho-name-area {
								display: flex;
								align-items: center;
								padding: 0 12px 0 0;
								border-right: 1px solid #E6E7E8;

								.img1 {
									@media #{$xs} {
										margin-bottom: 0;
									}

									@media #{$md} {
										margin-bottom: 0;
									}

									img {
										height: 56px;
										width: 56px;
										border-radius: 50%;
										object-fit: cover;
									}
								}

								.text {
									padding-left: 12px;

									a {
										color: var(--ztc-text-text-8);
										font-family: var(--grotesk);
										font-size: var(--ztc-font-size-font-s18);
										font-style: normal;
										font-weight: var(--ztc-weight-bold);
										line-height: 18px;
										display: inline-block;
										transition: all .4s;

										@media #{$xs} {
											line-height: 18px;
										}
									}

									p {
										color: var(--ztc-text-text-9);
										font-family: var(--grotesk);
										font-size: var(--ztc-font-size-font-s16);
										font-style: normal;
										font-weight: var(--ztc-weight-medium);
										line-height: 18px;
										display: inline-block;
										transition: all .4s;
									}
								}
							}
						}
					}
				}

				.event2-boxarea.box3 {
					&::after {
						display: none;
					}
				}

				.event2-boxarea {
					.content-area {
						.author-area {
							.autho-name-area {
								@media #{$xs} {
									padding: 0 !important;
									margin-bottom: 16px;
									border: none;
								}
							}
						}
					}
				}
			}
		}
	}
}

// Homepage 04 //
.event4-section-area {
	position: relative;
	z-index: 1;
	background: #F8F7F3;

	.event-images-area {
		position: relative;
		z-index: 1;

		.img1 {
			position: relative;
			z-index: 1;

			&::after {
				position: absolute;
				content: "";
				height: 100%;
				width: 100%;
				left: 0;
				top: 0;
				transition: all .4s;
				background: var(--ztc-bg-bg-8);
				opacity: 0.8;
				border-radius: 8px;
			}

			img {
				height: 632px;
				width: 100%;
				object-fit: cover;
				border-radius: 8px;

				@media #{$xs} {
					height: 400px;
				}
			}
		}

		.content-area {
			position: absolute;
			top: 0;
			z-index: 2;
			padding: 48px 90px 48px 48px;
			top: 50%;
			margin-top: -180px;

			@media #{$xs} {
				padding: 20px;
				margin-top: -135px;
			}
		}
	}

	.nav.nav-pills {
		justify-content: center;

		.nav-item {
			button {
				border-radius: 8px;
				border: 1px solid rgba(0, 36, 102, 0.10);
				background: #FFF;
				padding: 0;
				margin-bottom: 30px;

				@media #{$md} {
					margin: 30px 30px 0 0;
				}

				@media #{$xs} {
					margin: 30px 0 0 0;
					width: 100%;
				}

				&.active {
					background: var(--ztc-bg-bg-9);
					transition: all .4s;

					.day {
						background: var(--ztc-bg-bg-8);
						color: var(--ztc-text-text-1);
						transition: all .4s;
					}

					.cal {
						color: var(--ztc-text-text-1);
					}

					span.date {
						color: var(--ztc-text-text-1);
					}
				}

				.vl-flex {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 24px;
				}

				.day {
					color: var(--ztc-text-text-12);
					font-family: var(--grotesk);
					font-size: var(--ztc-font-size-font-s18);
					font-style: normal;
					font-weight: var(--ztc-weight-medium);
					line-height: 18px;
					display: block;
					text-align: center;
					border-radius: 8px 8px 0px 0px;
					background: rgba(0, 36, 102, 0.10);
					padding: 8px 0;
				}

				.cal {
					color: var(--ztc-text-text-11);
					font-family: var(--grotesk);
					font-size: var(--ztc-font-size-font-s44);
					font-style: normal;
					font-weight: var(--ztc-weight-bold);
					line-height: 44px;
					display: inline-block;
					transition: all .4s;
					text-align: center;
					margin: 0 28px 0 0;
				}

				span.date {
					color: var(--ztc-text-text-11);
					font-family: var(--grotesk);
					font-size: var(--ztc-font-size-font-s22);
					font-style: normal;
					font-weight: var(--ztc-weight-bold);
					line-height: 26px;
					/* 118.182% */
					display: inline-block;
				}
			}
		}
	}

	.tab-content {
		.tab-pane {
			.accordion-item {
				margin-bottom: 24px;
				border-radius: 8px;
				padding: 28px 24px;
				border-radius: 8px;
				border: 1px solid rgba(46, 77, 253, 0.08);
				background: #FFF;

				button {
					display: block;
					padding: 0;
					box-shadow: none;
					background: none;

					&::after {
						position: absolute;
						top: 30px;
						right: 0;
						height: 2px;
						width: 14px;
						background: var(--ztc-bg-bg-8);
						border-radius: 8px;
					}

					&::before {
						position: absolute;
						top: 30px;
						right: 0;
						height: 2px;
						width: 14px;
						background: var(--ztc-bg-bg-8);
						border-radius: 8px;
						transform: rotate(-90deg);
						content: "";
						visibility: visible;
						opacity: 1;
						transition: all .4s;
					}

					&.accordion-button:not(.collapsed) {
						&::before {
							visibility: hidden;
							opacity: 0;
							transition: all .4s;
						}
					}

					span {
						color: var(--ztc-text-text-12);
						font-family: var(--figtree);
						font-size: var(--ztc-font-size-font-s16);
						font-style: normal;
						font-weight: var(--ztc-weight-bold);
						line-height: 16px;
						display: inline-block;
						padding-bottom: 20px;

						img {
							margin: 0 4px 0 0;
						}
					}

					.accor-btn {
						color: var(--ztc-text-text-11);
						font-family: var(--grotesk);
						font-size: var(--ztc-font-size-font-s24);
						font-style: normal;
						font-weight: var(--ztc-weight-bold);
						line-height: 24px;
						/* 100% */
						display: block;
						padding-bottom: 0;
					}
				}

				.accordion-body {
					padding: 0;

					p {
						color: var(--ztc-text-text-12);
						font-family: var(--grotesk);
						font-size: var(--ztc-font-size-font-s18);
						font-style: normal;
						font-weight: var(--ztc-weight-medium);
						line-height: 26px;
						padding-top: 16px;
					}
				}
			}
		}
	}
}

// Inner Pages //
.event-sidepage-section-area {
	.event-side-images {
		.img1 {
			img {
				height: 100%;
				width: 100%;
				object-fit: cover;
				border-radius: 8px;
			}
		}

		h3 {
			color: var(--ztc-text-text-2);
			font-family: var(--grotesk);
			font-size: var(--ztc-font-size-font-s36);
			font-style: normal;
			font-weight: var(--ztc-weight-bold);
			line-height: 36px;
			/* 100% */
		}

		p {
			color: var(--ztc-text-text-3);
			font-family: var(--figtree);
			font-size: var(--ztc-font-size-font-s18);
			font-style: normal;
			font-weight: var(--ztc-weight-medium);
			line-height: 24px;
		}

		h4 {
			color: var(--ztc-text-text-2);
			font-family: var(--grotesk);
			font-size: var(--ztc-font-size-font-s28);
			font-style: normal;
			font-weight: var(--ztc-weight-bold);
			line-height: 36px;
			/* 100% */
		}

		.our-team-boxarea {
			text-align: center;
			margin-top: 30px;

			.content-area {
				a {
					color: var(--ztc-text-text-2);
					text-align: center;
					font-family: var(--grotesk);
					font-size: var(--ztc-font-size-font-s24);
					font-style: normal;
					font-weight: var(--ztc-weight-bold);
					line-height: 24px;
					/* 100% */
					display: inline-block;
					transition: all .4s;
				}

				p {
					color: var(--ztc-text-text-3);
					text-align: center;
					font-family: var(--grotesk);
					font-size: var(--ztc-font-size-font-s18);
					font-style: normal;
					font-weight: var(--ztc-weight-medium);
					line-height: 18px;
				}
			}

			.team-widget-area {
				position: relative;
				z-index: 1;
				overflow: hidden;
				position: relative;
				z-index: 1;
				padding: 24px;

				.elements21 {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					visibility: visible;
					opacity: 1;
					transition: all .4s;
				}

				.elements22 {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					visibility: hidden;
					opacity: 0;
					transition: all .4s;
				}

				&:hover {
					.elements21 {
						visibility: hidden;
						opacity: 0;
						transition: all .4s;
					}

					.elements22 {
						visibility: visible;
						opacity: 1;
						transition: all .4s;
						height: auto;
					}

					.img1 {
						ul {
							li {
								a.icon1 {
									visibility: visible;
									opacity: 1;
									transition: all .4s;
									bottom: 36px;
								}

								a.icon2 {
									visibility: visible;
									opacity: 1;
									transition: all .4s;
									bottom: 0;
								}

								a.icon3 {
									visibility: visible;
									opacity: 1;
									transition: all .4s;
									bottom: 36px;
								}

								a.icon4 {
									visibility: visible;
									opacity: 1;
									transition: all .4s;
									bottom: -7px;
								}
							}
						}
					}
				}

				.img1 {
					text-align: center;
					position: relative;
					border-radius: 50%;
					width: 100%;
					height: 100%;

					.team-img4 {
						height: 100%;
						width: 100%;
						object-fit: cover;
						border-radius: 50%;
					}

					.share {
						a {
							height: 40px;
							width: 40px;
							text-align: center;
							line-height: 40px;
							border-radius: 50%;
							transition: all .4s;
							background: #FFBA00;
							display: inline-block;
							position: absolute;
							bottom: 0;
							left: 50%;
							margin-left: -20px;
							margin-bottom: -20px;
							color: var(--ztc-text-text-2);

							img {
								height: 20px;
								width: 20px;
								display: inline-block;
								object-fit: contain;
								filter: brightness(0);
							}
						}
					}

					ul {
						text-align: center;
						position: absolute;
						bottom: 0;
						transition: all .6s;
						left: 0;
						right: 0;

						li {
							display: inline-block;

							a {
								height: 32px;
								width: 32px;
								text-align: center;
								line-height: 32px;
								border-radius: 50%;
								transition: all .4s;
								display: inline-block;
								background: var(--ztc-text-text-1);
								box-shadow: (0px 4px 40px rgba(0, 0, 0, 0.09));
								color: var(--ztc-text-text-8);
								margin: 0 10px 0 0;

								&:hover {
									background: #FFBA00;
									transition: all .4s;
									color: var(--ztc-text-text-2);
								}

								&.icon1 {
									position: absolute;
									bottom: 10px;
									left: 8px;
									visibility: hidden;
									opacity: 0;
									transition: all .4s;
								}

								&.icon2 {
									position: absolute;
									bottom: -20px;
									left: 33px;
									visibility: hidden;
									opacity: 0;
									transition: all .6s;
								}

								&.icon3 {
									position: absolute;
									bottom: 10px;
									right: -3px;
									visibility: hidden;
									opacity: 0;
									transition: all .4s;
								}

								&.icon4 {
									position: absolute;
									bottom: -20px;
									right: 20px;
									visibility: hidden;
									opacity: 0;
									transition: all .6s;
								}
							}
						}
					}
				}
			}
		}
	}

	.shedule-listarea {
		padding: 0 0 0 30px;

		@media #{$xs} {
			padding: 0;
			margin-top: 30px;
		}

		@media #{$md} {
			padding: 0;
			margin-top: 30px;
		}

		.content-area {
			border-radius: 8px;
			background: #F1F0F0;
			padding: 30px;

			ul {
				li {
					display: inline-block;

					a {
						color: var(--ztc-text-text-2);
						font-family: var(--grotesk);
						font-size: var(--ztc-font-size-font-s16);
						font-style: normal;
						font-weight: var(--ztc-weight-bold);
						line-height: 16px;
						/* 100% */
						display: inline-block;
						transition: all .4s;

						@media #{$xs} {
							display: block;
							margin-bottom: 10px;
						}

						img {
							filter: brightness(0);
							margin: 0 4px 0 0;
						}

						span {
							margin: 0 8px;
							display: inline-block;
						}
					}
				}
			}

			.head {
				color: var(--ztc-text-text-2);
				font-family: var(--grotesk);
				font-size: var(--ztc-font-size-font-s24);
				font-style: normal;
				font-weight: var(--ztc-weight-bold);
				line-height: 24px;
				display: inline-block;
				transition: all .4s;

				@media #{$xs} {
					line-height: 32px;
				}
			}

			.author-area {
				display: flex;
				align-items: center;

				@media #{$xs} {
					display: inline-block;
				}

				.autho-name-area {
					display: flex;
					align-items: center;
					padding: 0 12px 0 0;
					border-right: 1px solid #E6E7E8;

					.img1 {
						@media #{$xs} {
							margin-bottom: 0;
						}

						@media #{$md} {
							margin-bottom: 0;
						}

						img {
							height: 56px;
							width: 56px;
							border-radius: 50%;
							object-fit: cover;
						}
					}

					.text {
						padding-left: 12px;

						a {
							color: var(--ztc-text-text-2);
							font-family: var(--grotesk);
							font-size: var(--ztc-font-size-font-s18);
							font-style: normal;
							font-weight: var(--ztc-weight-bold);
							line-height: 18px;
							display: inline-block;
							transition: all .4s;

							@media #{$xs} {
								line-height: 18px;
							}
						}

						p {
							color: var(--ztc-text-text-3);
							font-family: var(--grotesk);
							font-size: var(--ztc-font-size-font-s16);
							font-style: normal;
							font-weight: var(--ztc-weight-medium);
							line-height: 18px;
							display: inline-block;
							transition: all .4s;
						}
					}
				}
			}
		}

		.mapouter {
			.gmap_canvas {
				iframe {
					height: 300px;
					width: 100%;
					border-radius: 8px;
				}
			}
		}
	}
}


.event-single-section-area {
	position: relative;
	z-index: 2;

	.tabs-button {
		ul {
			justify-content: center;

			li {
				button {
					border-radius: 8px;
					background: #F5F5F5;
					padding: 8px;
					width: 180px;
					display: flex;
					align-items: center;
					text-align: center;
					height: 56px;
					margin: 0 16px 0 0;

					@media #{$xs} {
						margin: 0 0 10px 0;
					}

					&.active {
						border-radius: 8px;
						background: #FFBA00;
						transition: all .4s;

						span.calender {
							background: var(--ztc-bg-bg-1);
							transition: all .4s;

							img {
								filter: brightness(0);
							}
						}

						.pl-8 {
							.day {
								color: var(--ztc-text-text-2);
								transition: all .4s;
							}

							.date {
								color: var(--ztc-text-text-2);
								transition: all .4s;
							}
						}
					}

					span.calender {
						border-radius: 4px;
						background: #FFBA00;
						height: 43px;
						width: 55px;
						text-align: center;
						line-height: 40px;
						display: inline-block;
						transition: all .4s;

						img {
							transition: all .4s;
							height: 24px;
							width: 24px;
							filter: brightness(0);
						}
					}

					.pl-8 {
						padding-left: 8px;
						display: inline-block;
						text-align: start;

						.day {
							color: var(--ztc-text-text-2);
							font-family: var(--grotesk);
							font-size: var(--ztc-font-size-font-s16);
							font-style: normal;
							font-weight: var(--ztc-weight-bold);
							line-height: 16px;
							/* 100% */
							display: inline-block;
							transition: all .4s;
							text-align: start;
						}

						.date {
							color: var(--ztc-text-text-2);
							font-family: var(--grotesk);
							font-size: var(--ztc-font-size-font-s14);
							font-style: normal;
							font-weight: var(--ztc-weight-medium);
							line-height: 14px;
							/* 100% */
							display: inline-block;
							transition: all .4s;
						}
					}
				}
			}
		}
	}

	.tab-content {
		.tab-pane {
			.event-widget-area {
				.event2-boxarea {
					position: relative;

					&::after {
						position: absolute;
						content: "";
						height: 93%;
						width: 1px;
						left: 45.7%;
						top: 0;
						transition: all 0.4s;
						background: #E6E7E8;

						@media #{$xs} {
							display: none;
						}

						@media #{$md} {
							display: none;
						}
					}

					h1 {
						color: var(--ztc-text-text-2);
						font-family: var(--grotesk);
						font-size: var(--ztc-font-size-font-s24);
						font-style: normal;
						font-weight: var(--ztc-weight-bold);
						line-height: 24px;
						display: inline-block;
						transition: all 0.4s;
						height: 56px;
						width: 56px;
						text-align: center;
						line-height: 56px;
						background: #FFBA00;
						border-radius: 50%;
						position: absolute;
						left: 43%;
						top: 88px;
						z-index: 1;

						&.active {
							background: #FFBA00;
							color: var(--ztc-text-text-2);
						}

						@media #{$xs} {
							display: none;
						}

						@media #{$md} {
							display: none;
						}
					}

					.img1 {
						position: relative;
						z-index: 1;

						@media #{$xs} {
							margin-bottom: 30px;
						}

						@media #{$md} {
							margin-bottom: 30px;
						}

						img {
							height: 100%;
							width: 100%;
							object-fit: cover;
							border-radius: 4px;
						}
					}

					.content-area {
						ul {
							li {
								display: inline-block;

								a {
									color: var(--ztc-text-text-2);
									font-family: var(--grotesk);
									font-size: var(--ztc-font-size-font-s16);
									font-style: normal;
									font-weight: var(--ztc-weight-bold);
									line-height: 16px;
									/* 100% */
									display: inline-block;
									transition: all .4s;

									@media #{$xs} {
										display: block;
										margin-bottom: 10px;
									}

									img {
										filter: brightness(0);
										margin: 0 4px 0 0;
									}

									span {
										margin: 0 8px;
										display: inline-block;
									}
								}
							}
						}

						.head {
							color: var(--ztc-text-text-2);
							font-family: var(--grotesk);
							font-size: var(--ztc-font-size-font-s24);
							font-style: normal;
							font-weight: var(--ztc-weight-bold);
							line-height: 24px;
							display: inline-block;
							transition: all .4s;

							@media #{$xs} {
								line-height: 32px;
							}
						}

						.author-area {
							display: flex;
							align-items: center;

							@media #{$xs} {
								display: inline-block;
							}

							.autho-name-area {
								display: flex;
								align-items: center;
								padding: 0 12px 0 0;
								border-right: 1px solid #E6E7E8;

								.img1 {
									@media #{$xs} {
										margin-bottom: 0;
									}

									@media #{$md} {
										margin-bottom: 0;
									}

									img {
										height: 56px;
										width: 56px;
										border-radius: 50%;
										object-fit: cover;
									}
								}

								.text {
									padding-left: 12px;

									a {
										color: var(--ztc-text-text-2);
										font-family: var(--grotesk);
										font-size: var(--ztc-font-size-font-s18);
										font-style: normal;
										font-weight: var(--ztc-weight-bold);
										line-height: 18px;
										display: inline-block;
										transition: all .4s;

										@media #{$xs} {
											line-height: 18px;
										}
									}

									p {
										color: var(--ztc-text-text-3);
										font-family: var(--grotesk);
										font-size: var(--ztc-font-size-font-s16);
										font-style: normal;
										font-weight: var(--ztc-weight-medium);
										line-height: 18px;
										display: inline-block;
										transition: all .4s;
									}
								}
							}
						}
					}
				}

				.event2-boxarea.box3 {
					&::after {
						display: none;
					}
				}

				.event2-boxarea {
					.content-area {
						.author-area {
							.autho-name-area {
								@media #{$xs} {
									padding: 0 !important;
									margin-bottom: 16px;
									border: none;
								}
							}
						}
					}
				}
			}
		}
	}
}

.schedule-section-area {
	.schedule {
		width: 100%;
		border-radius: 16px;
	}

	table {
		width: 100%;
		border-collapse: collapse;
	}

	th,
	td {
		border: 1px solid rgba(26, 23, 25, 0.10);
		background: #FFF;
		padding: 38px;
		text-align: center;
		vertical-align: middle;
	}

	th {
		background-color: #f8b500;
		color: var(--ztc-text-text-2);
		text-align: center;
		font-family: var(--grotesk);
		font-size: var(--ztc-font-size-font-s24);
		font-style: normal;
		font-weight: var(--ztc-weight-bold);
		line-height: 24px;
		letter-spacing: -0.48px;
		padding: 18px 0;
	}

	td {
		color: var(--ztc-text-text-2);
		text-align: center;
		font-family: var(--grotesk);
		font-size: var(--ztc-font-size-font-s20);
		font-style: normal;
		font-weight: var(--ztc-weight-medium);
		line-height: 20px;
		letter-spacing: -0.4px;

		span {
			color: var(--ztc-text-text-3);
			text-align: center;
			font-family: var(--figtree);
			font-size: var(--ztc-font-size-font-s16);
			font-style: normal;
			font-weight: var(--ztc-weight-medium);
			line-height: 16px;
			letter-spacing: -0.32px;
			display: inline-block;
			padding-top: 10px;
		}
	}


	@media screen and (max-width: 768px) {

		table,
		thead,
		tbody,
		th,
		td,
		tr {
			display: block;
			text-align: center;
		}

		th,
		td {
			width: 100%;
			text-align: center;
		}
	}

}

// Homepage 05 //
.event5-section-area {
	position: relative;
	z-index: 2;

	.elements28 {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.elements29 {
		position: absolute;
		bottom: 0;
		right: 0;
		z-index: -1;
	}

	.event-widget-area {
		.event2-boxarea {
			position: relative;

			&::after {
				position: absolute;
				content: "";
				height: 93%;
				width: 1px;
				left: 45.7%;
				top: 0;
				transition: all 0.4s;
				background: #5D9BFA;

				@media #{$xs} {
					display: none;
				}

				@media #{$md} {
					display: none;
				}
			}

			h1 {
				color: var(--ztc-text-text-1);
				font-family: var(--grotesk);
				font-size: var(--ztc-font-size-font-s24);
				font-style: normal;
				font-weight: var(--ztc-weight-bold);
				line-height: 24px;
				display: inline-block;
				transition: all 0.4s;
				height: 56px;
				width: 56px;
				text-align: center;
				line-height: 56px;
				background: linear-gradient(135deg, #FF7A00 0%, #F00 100%);
				border-radius: 50%;
				position: absolute;
				left: 43%;
				top: 88px;
				z-index: 1;

				&.active {
					background: linear-gradient(135deg, #FF7A00 0%, #F00 100%);
					color: var(--ztc-text-text-1);
				}

				@media #{$xs} {
					display: none;
				}

				@media #{$md} {
					display: none;
				}
			}

			.img1 {
				position: relative;
				z-index: 1;

				@media #{$xs} {
					margin-bottom: 30px;
				}

				@media #{$md} {
					margin-bottom: 30px;
				}

				img {
					height: 100%;
					width: 100%;
					object-fit: cover;
					border-radius: 4px;
				}
			}

			.content-area {
				ul {
					li {
						display: inline-block;

						a {
							color: var(--ztc-text-text-1);
							font-family: var(--grotesk);
							font-size: var(--ztc-font-size-font-s16);
							font-style: normal;
							font-weight: var(--ztc-weight-bold);
							line-height: 16px;
							/* 100% */
							display: inline-block;
							transition: all .4s;

							@media #{$xs} {
								display: block;
								margin-bottom: 10px;
							}

							img {
								filter: brightness(0) invert(1);
								margin: 0 4px 0 0;
							}

							span {
								margin: 0 8px;
								display: inline-block;
							}
						}
					}
				}

				.head {
					color: var(--ztc-text-text-1);
					font-family: var(--grotesk);
					font-size: var(--ztc-font-size-font-s24);
					font-style: normal;
					font-weight: var(--ztc-weight-bold);
					line-height: 24px;
					display: inline-block;
					transition: all .4s;

					@media #{$xs} {
						line-height: 32px;
					}
				}

				.author-area {
					display: flex;
					align-items: center;

					@media #{$xs} {
						display: inline-block;
					}

					.autho-name-area {
						display: flex;
						align-items: center;
						padding: 0 12px 0 0;
						border-right: 1px solid #5D9BFA;

						.img1 {
							@media #{$xs} {
								margin-bottom: 0;
							}

							@media #{$md} {
								margin-bottom: 0;
							}

							img {
								height: 56px;
								width: 56px;
								border-radius: 50%;
								object-fit: cover;
							}
						}

						.text {
							padding-left: 12px;

							a {
								color: var(--ztc-text-text-1);
								font-family: var(--grotesk);
								font-size: var(--ztc-font-size-font-s18);
								font-style: normal;
								font-weight: var(--ztc-weight-bold);
								line-height: 18px;
								display: inline-block;
								transition: all .4s;

								@media #{$xs} {
									line-height: 18px;
								}
							}

							p {
								color: var(--ztc-text-text-1);
								font-family: var(--grotesk);
								font-size: var(--ztc-font-size-font-s16);
								font-style: normal;
								font-weight: var(--ztc-weight-medium);
								line-height: 18px;
								display: inline-block;
								transition: all .4s;
								opacity: 80%;
							}
						}
					}
				}
			}
		}

		.event2-boxarea.box3 {
			&::after {
				display: none;
			}
		}

		.event2-boxarea {
			.content-area {
				.author-area {
					.autho-name-area {
						@media #{$xs} {
							padding: 0 !important;
							margin-bottom: 16px;
							border: none;
						}
					}
				}
			}
		}
	}
}

// Homepage 06 //
.event6-section-area {
	position: relative;
	z-index: 1;
	background: #F9FAFB;

	.event6-widget-boxarea {
		position: relative;
		z-index: 1;
		background: var(--ztc-bg-bg-10);
		border-radius: 8px;

		.img1 {
			img {
				height: 100%;
				width: 100%;
				object-fit: cover;
			}
		}

		.content-area {
			padding: 0 80px 0 30px;

			@media #{$xs} {
				padding: 20px 30px;
				margin-top: 30px;
			}

			@media #{$md} {
				padding: 20px 30px;
				margin-top: 30px;
			}

			h3 {
				color: var(--ztc-text-text-1);
				font-family: var(--grotesk);
				font-size: var(--ztc-font-size-font-s32);
				font-style: normal;
				font-weight: var(--ztc-weight-bold);
				line-height: 42px;
				letter-spacing: -0.64px;

				@media #{$xs} {
					font-size: var(--ztc-font-size-font-s24);
					line-height: 30px;
				}
			}

			ul {
				li {
					display: block;

					a {
						display: block;
						color: var(--ztc-text-text-1);
						font-family: var(--grotesk);
						font-size: var(--ztc-font-size-font-s16);
						font-style: normal;
						font-weight: var(--ztc-weight-bold);
						line-height: 16px;
						transition: all .4s;

						img {
							filter: brightness(0) invert(1);
							margin: 0 4px;
						}
					}
				}
			}

			.btn-area1 {
				a {
					background: var(--ztc-bg-bg-1);
					color: var(--ztc-text-text-2);

					img {
						filter: brightness(0);
					}

					&:hover {
						color: var(--ztc-text-text-1);

						img {
							filter: brightness(0) invert(1);
						}
					}
				}
			}
		}
	}

	.event6-widget-boxarea2 {
		position: relative;
		z-index: 1;
		background: #1C58CC;
		border-radius: 8px;

		.img1 {
			img {
				height: 100%;
				width: 100%;
				object-fit: cover;
			}
		}

		.content-area {
			padding: 0 80px 0 30px;

			@media #{$xs} {
				padding: 20px 30px;
				margin-top: 30px;
			}

			@media #{$md} {
				padding: 20px 30px;
				margin-top: 30px;
			}

			h3 {
				color: var(--ztc-text-text-1);
				font-family: var(--grotesk);
				font-size: var(--ztc-font-size-font-s32);
				font-style: normal;
				font-weight: var(--ztc-weight-bold);
				line-height: 42px;
				letter-spacing: -0.64px;

				@media #{$xs} {
					font-size: var(--ztc-font-size-font-s24);
					line-height: 30px;
				}
			}

			ul {
				li {
					display: block;

					a {
						display: block;
						color: var(--ztc-text-text-1);
						font-family: var(--grotesk);
						font-size: var(--ztc-font-size-font-s16);
						font-style: normal;
						font-weight: var(--ztc-weight-bold);
						line-height: 16px;
						transition: all .4s;

						img {
							filter: brightness(0) invert(1);
							margin: 0 4px;
						}
					}
				}
			}

			.btn-area1 {
				a {
					background: var(--ztc-bg-bg-1);
					color: var(--ztc-text-text-2);

					img {
						filter: brightness(0);
					}

					&:hover {
						color: var(--ztc-text-text-1);

						img {
							filter: brightness(0) invert(1);
						}
					}
				}
			}
		}
	}

	.event6-widget-boxarea3 {
		position: relative;
		z-index: 1;
		background: #FF3A86;
		border-radius: 8px;

		.img1 {
			img {
				height: 100%;
				width: 100%;
				object-fit: cover;
			}
		}

		.content-area {
			padding: 0 80px 0 30px;

			@media #{$xs} {
				padding: 20px 30px;
				margin-top: 30px;
			}

			@media #{$md} {
				padding: 20px 30px;
				margin-top: 30px;
			}

			h3 {
				color: var(--ztc-text-text-1);
				font-family: var(--grotesk);
				font-size: var(--ztc-font-size-font-s32);
				font-style: normal;
				font-weight: var(--ztc-weight-bold);
				line-height: 42px;
				letter-spacing: -0.64px;

				@media #{$xs} {
					font-size: var(--ztc-font-size-font-s24);
					line-height: 30px;
				}
			}

			ul {
				li {
					display: block;

					a {
						display: block;
						color: var(--ztc-text-text-1);
						font-family: var(--grotesk);
						font-size: var(--ztc-font-size-font-s16);
						font-style: normal;
						font-weight: var(--ztc-weight-bold);
						line-height: 16px;
						transition: all .4s;

						img {
							filter: brightness(0) invert(1);
							margin: 0 4px;
						}
					}
				}
			}

			.btn-area1 {
				a {
					background: var(--ztc-bg-bg-1);
					color: var(--ztc-text-text-2);

					img {
						filter: brightness(0);
					}

					&:hover {
						color: var(--ztc-text-text-1);

						img {
							filter: brightness(0) invert(1);
						}
					}
				}
			}
		}
	}
}

// Homepage 07 //
.event7-section-area {
	position: relative;
	z-index: 1;
	background: var(--ztc-bg-bg-2);

	.event-header {
		h2 {
			color: var(--ztc-text-text-1);
		}
	}

	.nav.nav-pills {
		justify-content: center;

		.nav-item {
			button {
				border-radius: 8px;
				border: 1px solid rgba(26, 23, 25, 0.05);
				background: #FFF;
				padding: 0;
				margin: 0 30px 0 0;

				@media #{$md} {
					margin: 30px 30px 0 0;
				}

				@media #{$xs} {
					margin: 30px 0 0 0;
					width: 100%;
				}

				&.active {
					background: var(--ztc-bg-bg-11);
					transition: all .4s;
					color: var(--ztc-text-text-1);

					.day {
						background: var(--ztc-bg-bg-2);
						color: var(--ztc-text-text-1);
						transition: all .4s;
					}

					.vl-flex {
						.cal {
							color: var(--ztc-text-text-1);
						}

						.date {
							color: var(--ztc-text-text-1);
						}
					}
				}

				.vl-flex {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 24px;
				}

				.day {
					color: var(--ztc-text-text-3);
					font-family: var(--grotesk);
					font-size: var(--ztc-font-size-font-s18);
					font-style: normal;
					font-weight: var(--ztc-weight-medium);
					line-height: 18px;
					display: block;
					text-align: center;
					border-radius: 8px 8px 0px 0px;
					background: rgba(26, 23, 25, 0.05);
					padding: 8px 0;
				}

				.cal {
					color: var(--ztc-text-text-2);
					font-family: var(--grotesk);
					font-size: var(--ztc-font-size-font-s44);
					font-style: normal;
					font-weight: var(--ztc-weight-bold);
					line-height: 44px;
					display: inline-block;
					transition: all .4s;
					text-align: center;
					margin: 0 28px 0 0;
				}

				span.date {
					color: var(--ztc-text-text-2);
					font-family: var(--grotesk);
					font-size: var(--ztc-font-size-font-s22);
					font-style: normal;
					font-weight: var(--ztc-weight-bold);
					line-height: 26px;
					/* 118.182% */
					display: inline-block;
				}
			}
		}
	}

	.tab-content {
		.tab-pane {
			.tabs-widget-boxarea {
				.all-content-area {
					position: relative;

					.img1 {
						position: absolute;

						img {
							height: 120px;
							width: 120px;
							object-fit: cover;
							border-radius: 8px;
						}
					}

					.content-area {
						padding-left: 140px;

						@media #{$xs} {
							padding: 0;
							margin-top: 30px;
						}

						@media #{$md} {
							padding: 0;
							margin-top: 30px;
						}

						ul {
							li {
								display: inline-block;

								a {
									color: var(--ztc-text-text-1);
									font-family: var(--figtree);
									font-size: var(--ztc-font-size-font-s16);
									font-style: normal;
									font-weight: var(--ztc-weight-medium);
									line-height: 16px;
									opacity: 80%;
									display: inline-block;

									span {
										margin: 0 8px;
									}

									img {
										filter: brightness(0) invert(1);
									}
								}
							}
						}

						a.head {
							color: var(--ztc-text-text-1);
							font-family: var(--grotesk);
							font-size: var(--ztc-font-size-font-s24);
							font-style: normal;
							font-weight: var(--ztc-weight-bold);
							line-height: 24px;
							display: inline-block;
							transition: all .4s;
						}

						p {
							color: var(--ztc-text-text-1);
							font-family: var(--figtree);
							font-size: var(--ztc-font-size-font-s18);
							font-style: normal;
							font-weight: var(--ztc-weight-medium);
							line-height: 28px;
							opacity: 80%;
						}

						.vl-btn7 {
							color: var(--ztc-text-text-1);
							font-family: var(--grotesk);
							font-size: var(--ztc-font-size-font-s20);
							font-style: normal;
							font-weight: var(--ztc-weight-bold);
							line-height: 20px;
							text-transform: uppercase;
							transition: all .4s;
							position: relative;
							z-index: 1;
							background: transparent;
							padding: 8px 8px 8px 20px;
							display: inline-block;
							border-radius: 100px;
							border: 1px solid #fff;

							span {
								height: 36px;
								width: 36px;
								text-align: center;
								line-height: 36px;
								border-radius: 50%;
								transition: all .4s;
								display: inline-block;
								background: #312E30;
								transform: rotate(-45deg);
								margin-left: 4px;
							}

							&:hover {
								background: var(--ztc-bg-bg-11);
								transition: all .4s;
								color: var(--ztc-text-text-1);
								border: 1px solid var(--ztc-text-text-15);

								span {
									transform: rotate(0);
									transition: all .4s;
									background: #FD6497;
									color: var(--ztc-text-text-1);
								}
							}
						}
					}
				}
			}
		}
	}
}

// Homepage 08 //
.event8-section-area {
	position: relative;
	z-index: 1;

	@media #{$xs} {
		z-index: 3;
	}

	@media #{$md} {
		z-index: 3;
	}

	.event8-header {
		display: flex;
		align-items: center;
		justify-content: space-between;

		@media #{$xs} {
			display: inline-block;
			text-align: center;
		}
	}

	.tabs-button {
		@media #{$xs} {
			margin-top: 20px;
		}

		ul {
			justify-content: center;

			li {
				button {
					border-radius: 8px;
					background: rgba(255, 255, 255, 0.10);
					padding: 8px;
					width: 180px;
					display: flex;
					align-items: center;
					text-align: center;
					height: 56px;
					margin: 0 16px 0 0;

					@media #{$xs} {
						margin: 0 0 10px 0;
					}

					&.active {
						background: var(--ztc-bg-bg-11);
						transition: all .4s;

						span.calender {
							background: var(--ztc-bg-bg-1);
							transition: all .4s;

							img {
								filter: none;
							}

						}

						.pl-8 {
							.day {
								color: var(--ztc-text-text-1);
								transition: all .4s;
							}

							.date {
								color: var(--ztc-text-text-1);
								transition: all .4s;
							}
						}
					}

					span.calender {
						border-radius: 4px;
						background: rgba(255, 255, 255, 0.20);
						height: 43px;
						width: 55px;
						text-align: center;
						line-height: 40px;
						display: inline-block;
						transition: all .4s;

						img {
							transition: all .4s;
							height: 24px;
							width: 24px;
							filter: brightness(0) invert(1);
						}
					}

					.pl-8 {
						padding-left: 8px;
						display: inline-block;
						text-align: start;

						.day {
							color: var(--ztc-text-text-1);
							font-family: var(--grotesk);
							font-size: var(--ztc-font-size-font-s16);
							font-style: normal;
							font-weight: var(--ztc-weight-bold);
							line-height: 16px;
							/* 100% */
							display: inline-block;
							transition: all .4s;
							text-align: start;
						}

						.date {
							color: var(--ztc-text-text-1);
							font-family: var(--grotesk);
							font-size: var(--ztc-font-size-font-s14);
							font-style: normal;
							font-weight: var(--ztc-weight-medium);
							line-height: 14px;
							/* 100% */
							display: inline-block;
							transition: all .4s;
						}
					}
				}
			}
		}
	}

	.tab-content {
		.tab-pane {
			.event-widget-area {

				.event2-boxarea {
					border-radius: 8px;
					background: var(--ztc-bg-bg-1);
					backdrop-filter: blur(5px);
					border-radius: 8px;
					padding: 32px 32px 68px 32px;
					position: relative;
					z-index: 1;

					.img1 {
						@media #{$xs} {
							margin-bottom: 30px;
						}

						@media #{$md} {
							margin-bottom: 30px;
						}

						img {
							height: 100%;
							width: 100%;
							object-fit: cover;
							border-radius: 4px;
						}
					}

					.content-area {
						h5 {
							color: var(--ztc-text-text-16);
							font-family: var(--grotesk);
							font-size: var(--ztc-font-size-font-s18);
							font-style: normal;
							font-weight: var(--ztc-weight-medium);
							line-height: 18px;
							text-transform: uppercase;
							padding: 8px 12px;
							border-radius: 6px;
							display: inline-block;
							background: rgba(255, 54, 57, 0.10);
						}

						.head {
							color: var(--ztc-text-text-2);
							font-family: var(--grotesk);
							font-size: var(--ztc-font-size-font-s28);
							font-style: normal;
							font-weight: var(--ztc-weight-bold);
							line-height: 28px;
							display: inline-block;
							transition: all .4s;

							@media #{$xs} {
								line-height: 32px;
								font-size: var(--ztc-font-size-font-s24);
							}
						}

						.btn-area1 {
							position: absolute;
							bottom: -36px;
							left: 37%;
							right: 37%;

							@media #{$xs} {
								left: 10%;
								right: 10%;
							}

							@media #{$md} {
								left: 30%;
								right: 30%;
							}
						}

						p {
							color: var(--ztc-text-text-9);
							font-family: var(--figtree);
							font-size: var(--ztc-font-size-font-s18);
							font-style: normal;
							font-weight: var(--ztc-weight-medium);
							line-height: 28px;
						}
					}

					.list {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-top: 24px;
						border-top: 1px solid rgba(56, 16, 112, 0.10);

						@media #{$xs} {
							display: inline-block;
						}

						ul {
							li {
								display: inline-block;

								a {
									color: var(--ztc-text-text-2);
									font-family: var(--grotesk);
									font-size: var(--ztc-font-size-font-s18);
									font-style: normal;
									font-weight: var(--ztc-weight-bold);
									line-height: 16px;
									/* 100% */
									display: inline-block;
									transition: all .4s;

									@media #{$xs} {
										display: block;
										margin-bottom: 10px;
									}

									img {
										filter: brightness(0);
										margin: 0 4px 0 0;
									}

									span {
										margin: 0 8px;
										display: inline-block;
										width: 1px;
									}
								}
							}
						}

						.author-area {
							display: flex;
							align-items: center;

							p {
								color: var(--ztc-text-text-2);
								font-family: var(--grotesk);
								font-size: var(--ztc-font-size-font-s18);
								font-style: normal;
								font-weight: var(--ztc-weight-bold);
								line-height: 18px;
								/* 100% */
								margin: 0 10px 0 0;
							}
						}
					}
				}
			}
		}
	}
}

// Homepage 09 //
.event9-section-area {
	position: relative;
	z-index: 2;
	background: #F7F5FB;

	.tabs-button {
		ul {
			justify-content: center;

			li {
				button {
					border-radius: 8px;
					background: #fff;
					padding: 8px;
					width: 180px;
					display: flex;
					align-items: center;
					text-align: center;
					height: 56px;
					margin: 0 16px 0 0;

					@media #{$xs} {
						margin: 0 0 10px 0;
					}

					&.active {
						border-radius: 8px;
						background: var(--LLL, linear-gradient(135deg, #FF5000 0%, #FF00B8 100%));
						transition: all .4s;

						span.calender {
							background: var(--ztc-bg-bg-1);
							transition: all .4s;

							img {
								filter: none;
							}
						}

						.pl-8 {
							.day {
								color: var(--ztc-text-text-1);
								transition: all .4s;
							}

							.date {
								color: var(--ztc-text-text-1);
								transition: all .4s;
							}
						}
					}

					span.calender {
						border-radius: 4px;
						background: var(--LLL, linear-gradient(135deg, #FF5000 0%, #FF00B8 100%));
						height: 43px;
						width: 55px;
						text-align: center;
						line-height: 40px;
						display: inline-block;
						transition: all .4s;

						img {
							transition: all .4s;
							height: 24px;
							width: 24px;
							filter: brightness(0) invert(1);
						}
					}

					.pl-8 {
						padding-left: 8px;
						display: inline-block;
						text-align: start;

						.day {
							color: var(--ztc-text-text-18);
							font-family: var(--grotesk);
							font-size: var(--ztc-font-size-font-s16);
							font-style: normal;
							font-weight: var(--ztc-weight-bold);
							line-height: 16px;
							/* 100% */
							display: inline-block;
							transition: all .4s;
							text-align: start;
						}

						.date {
							color: var(--ztc-text-text-18);
							font-family: var(--grotesk);
							font-size: var(--ztc-font-size-font-s14);
							font-style: normal;
							font-weight: var(--ztc-weight-medium);
							line-height: 14px;
							/* 100% */
							display: inline-block;
							transition: all .4s;
						}
					}
				}
			}
		}
	}

	.tab-content {
		.tab-pane {
			.event-widget-area {
				.event2-boxarea {
					position: relative;

					&::after {
						position: absolute;
						content: "";
						height: 93%;
						width: 1px;
						left: 45.7%;
						top: 0;
						transition: all 0.4s;
						background: #E6E7E8;

						@media #{$xs} {
							display: none;
						}

						@media #{$md} {
							display: none;
						}
					}

					h1 {
						color: var(--ztc-text-text-1);
						font-family: var(--grotesk);
						font-size: var(--ztc-font-size-font-s24);
						font-style: normal;
						font-weight: var(--ztc-weight-bold);
						line-height: 24px;
						display: inline-block;
						transition: all 0.4s;
						height: 56px;
						width: 56px;
						text-align: center;
						line-height: 56px;
						background: var(--LLL, linear-gradient(135deg, #FF5000 0%, #FF00B8 100%));
						border-radius: 50%;
						position: absolute;
						left: 43%;
						top: 88px;
						z-index: 1;

						&.active {
							background: var(--LLL, linear-gradient(135deg, #FF5000 0%, #FF00B8 100%));
							color: var(--ztc-text-text-1);
						}

						@media #{$xs} {
							display: none;
						}

						@media #{$md} {
							display: none;
						}
					}

					.img1 {
						position: relative;
						z-index: 1;

						@media #{$xs} {
							margin-bottom: 30px;
						}

						@media #{$md} {
							margin-bottom: 30px;
						}

						img {
							height: 100%;
							width: 100%;
							object-fit: cover;
							border-radius: 4px;
						}
					}

					.content-area {
						ul {
							li {
								display: inline-block;

								a {
									color: var(--ztc-text-text-18);
									font-family: var(--grotesk);
									font-size: var(--ztc-font-size-font-s16);
									font-style: normal;
									font-weight: var(--ztc-weight-bold);
									line-height: 16px;
									/* 100% */
									display: inline-block;
									transition: all .4s;

									@media #{$xs} {
										display: block;
										margin-bottom: 10px;
									}

									img {
										filter: brightness(0);
										margin: 0 4px 0 0;
									}

									span {
										margin: 0 8px;
										display: inline-block;
									}
								}
							}
						}

						.head {
							color: var(--ztc-text-text-18);
							font-family: var(--grotesk);
							font-size: var(--ztc-font-size-font-s24);
							font-style: normal;
							font-weight: var(--ztc-weight-bold);
							line-height: 24px;
							display: inline-block;
							transition: all .4s;

							@media #{$xs} {
								line-height: 32px;
							}
						}

						.author-area {
							display: flex;
							align-items: center;

							@media #{$xs} {
								display: inline-block;
							}

							.autho-name-area {
								display: flex;
								align-items: center;
								padding: 0 12px 0 0;
								border-right: 1px solid #E6E7E8;

								.img1 {
									@media #{$xs} {
										margin-bottom: 0;
									}

									@media #{$md} {
										margin-bottom: 0;
									}

									img {
										height: 56px;
										width: 56px;
										border-radius: 50%;
										object-fit: cover;
									}
								}

								.text {
									padding-left: 12px;

									a {
										color: var(--ztc-text-text-18);
										font-family: var(--grotesk);
										font-size: var(--ztc-font-size-font-s18);
										font-style: normal;
										font-weight: var(--ztc-weight-bold);
										line-height: 18px;
										display: inline-block;
										transition: all .4s;

										@media #{$xs} {
											line-height: 18px;
										}
									}

									p {
										color: var(--ztc-text-text-19);
										font-family: var(--grotesk);
										font-size: var(--ztc-font-size-font-s16);
										font-style: normal;
										font-weight: var(--ztc-weight-medium);
										line-height: 18px;
										display: inline-block;
										transition: all .4s;
									}
								}
							}
						}
					}
				}

				.event2-boxarea.box3 {
					&::after {
						display: none;
					}
				}

				.event2-boxarea {
					.content-area {
						.author-area {
							.autho-name-area {
								@media #{$xs} {
									padding: 0 !important;
									margin-bottom: 16px;
									border: none;
								}
							}
						}
					}
				}
			}
		}
	}
}

// Homepage 10 //
.event10-section-area {
	position: relative;
	z-index: 1;

	.event6-widget-boxarea {
		position: relative;
		z-index: 1;
		border-radius: var(--rounded-lg, 8px);
		background: #232323;

		.img1 {
			img {
				height: 100%;
				width: 100%;
				object-fit: cover;
			}
		}

		.content-area {
			padding: 0 80px 0 30px;

			@media #{$xs} {
				padding: 20px 30px;
				margin-top: 30px;
			}

			@media #{$md} {
				padding: 20px 30px;
				margin-top: 30px;
			}

			h3 {
				color: var(--ztc-text-text-1);
				font-family: var(--grotesk);
				font-size: var(--ztc-font-size-font-s32);
				font-style: normal;
				font-weight: var(--ztc-weight-bold);
				line-height: 42px;
				letter-spacing: -0.64px;

				@media #{$xs} {
					font-size: var(--ztc-font-size-font-s24);
					line-height: 30px;
				}
			}

			ul {
				li {
					display: block;

					a {
						display: block;
						color: var(--ztc-text-text-1);
						font-family: var(--grotesk);
						font-size: var(--ztc-font-size-font-s16);
						font-style: normal;
						font-weight: var(--ztc-weight-bold);
						line-height: 16px;
						transition: all .4s;

						img {
							filter: brightness(0) invert(1);
							margin: 0 4px;
						}
					}
				}
			}
		}
	}

}

/*============= EVENT CSS AREA ===============*/