.tmpl-htap-summit-2024 {
	&::before {
		background-color: #000 !important;
	}
	header.summary {
		.navbar-collapse.active {
			height: 36rem;
		}
		.main-button {
			display: inline-block;
			background: linear-gradient(90deg, #c9bdfc 0%, #e85cfc 31%, #8d44d9 69%, #6339c9 100%);
			font-size: 16px;
			font-weight: 600;
			color: #000;
			border-radius: 39px;
		}
	}
	.tmpl-summary {
		background-image: url("https://static.pingcap.com/files/2024/05/16195305/htap-banner-mb.jpg");
		background-position: center center;
		min-height: 45vh;
		@include media-min($medium) {
			min-height: 60vh;
			background-image: url("https://static.pingcap.com/files/2024/05/16201107/htap-banner-md.jpg");
		}
		@include media-min($large) {
			min-height: calc(100vh - 80px);
			background-image: url("https://static.pingcap.com/files/2024/05/15002538/htap-banner.jpg");
		}
		background-color: #000;
		.htap-title__container {
			align-items: center;

			.htap-title {
				font-size: clamp(42px, 8.25vw, 110px);
				line-height: 1.2;
				background: linear-gradient(180deg, #a58de0 0%, #fff 100%);
				background-clip: text;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			p {
				color: #c9befc;
				margin-top: 1.6rem;
				font-size: clamp(18px, 3.25vw, 32px);
			}
			.htap-subtitle {
				display: block;
				@include media-min($medium) {
					display: none;
				}
				&-md {
					display: none;
					@include media-min($medium) {
						display: block;
					}
				}
			}
		}
		.htap-video__container {
			iframe {
				@include media-min($medium) {
					width: 560px;
					height: 315px;
				}
				@include media-min(1000px) {
					width: 800px;
					height: 450px;
				}
			}
		}
		.main-button {
			display: inline-block;
			background: linear-gradient(90deg, #c9bdfc 0%, #e85cfc 31%, #8d44d9 69%, #6339c9 100%);
			font-size: 18px;
			@include media-min($medium) {
				font-size: 28px;
			}
			font-weight: 600;
			color: #000;
			border-radius: 39px;
		}
	}
	.section-carousel {
		width: 100%;
		padding-top: 8rem;
		overflow: hidden;
		background-color: #000;

		.carousel-list {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			margin-bottom: 40px;
			width: fit-content;
			animation-play-state: running;
			animation: moveRightSlideshowMobile 80s linear infinite;
			@include media-min($medium) {
				animation: moveRightSlide 60s linear infinite;
			}
			&-container {
				position: relative;
				overflow: hidden;
			}
		}
		.carousel-item {
			margin-left: 1.6rem;
			margin-right: 1.6rem;
			width: 300px;
			height: 200px;
			@include media-min($medium) {
				width: 450px;
				height: 300px;
			}
			&-image {
				width: 100%;
				border-radius: 1.6rem;
			}
		}
		.add-calendar {
			text-align: center;
			display: flex;
			flex-direction: column;
			@include media-min($large) {
				flex-direction: row;
				justify-content: center;
			}
			span,
			a {
				font-size: 16px;
				color: #fff;
			}
			.line {
				padding: 0 1rem;
			}
			a {
				text-decoration: none;
			}
		}
		.icon-calendar {
			background: url("https://static.pingcap.com/files/2024/05/19201337/20240520-111316.png")
				no-repeat center center/cover;
			width: 16px;
			height: 16px;
			display: inline-block;
			vertical-align: middle;
		}
	}
	.section-sponsors {
		padding: 60px 0;
		background: #000;
		text-align: center;
		h3 {
			color: rgba(149, 111, 246, 1);
			font-size: 36px;
			font-weight: 300;
		}
		&__content {
			display: flex;
			flex-wrap: wrap;
			gap: 32px;
			justify-content: center;
			margin-top: 60px;
			img {
				width: 200px;
			}
		}
	}
	.section-location {
		padding: 6rem 0;
		position: relative;
		video {
			position: absolute;
			left: 50%;
			margin-left: -50%;
			top: 0;
			width: 100%;
			height: 100%;
			border-radius: 0px;
			object-fit: cover;
			background-color: rgb(0, 0, 0);
			object-position: 50% 50%;
		}
		&__content {
			padding: 3rem;
			&-bg {
				padding: 3rem;
				text-align: center;
				backdrop-filter: blur(12px);
				background-color: rgba(255, 255, 255, 0.5);
				border-radius: 6px;
			}
			h3 {
				color: rgba(149, 111, 246, 1);
				font-size: 36px;
				font-weight: 300;
			}
			p {
				font-size: 24px;
				color: #000;
				margin-bottom: 1rem;
			}
			a {
				font-size: 24px;
				color: #000;
			}
		}
	}

	#speakers {
		padding-top: 45px;
	}

	.bizzabo-web-agenda {
		min-height: 90vh;
	}

	.bizzabo-sections-widget {
		background-color: #000;
		iframe {
			display: block;
		}
	}
}
@keyframes moveRightSlide {
	100% {
		-webkit-transform: translateX(-5302px);
	}
}
@keyframes moveRightSlideshowMobile {
	100% {
		-webkit-transform: translateX(-3652px);
	}
}