.page-template-page-hackathon {
	.site-header__inner {
		width: 100%;
		max-width: $xxlarge;
		padding-left: 1.6rem;
		padding-right: 1.6rem;
		@include media-min($large) {
			padding-left: 3.2rem;
			padding-right: 3.2rem;
		}
		@include media-min($xlarge) {
			padding-left: 10rem;
			padding-right: 10rem;
		}
		@include media-min($xxlarge) {
			max-width: var(--container-max-width);
			padding-left: 0rem;
			padding-right: 0rem;
		}
	}
}
.hackathon {
	&-header {
		background: url("#{$theme-url-base}/media/hackathon/banner-bg.png") bottom center no-repeat
			var(--color-black);
		background-size: cover;
		padding-bottom: 8rem;
		overflow: hidden;
		&__inner {
			position: relative;
			padding: 6rem 1.6rem 5rem;
			max-width: $xxlarge;
			margin: 0 auto;
			@include media-min($large) {
				padding: 6rem 3.2rem 5rem;
			}
			@include media-min($xlarge) {
				max-width: 100%;
				padding: 8rem 10rem 10rem;
			}
			@include media-min($xxlarge) {
				max-width: var(--container-max-width);
				padding: 8rem 0rem 10rem;
			}
		}
		&__text-content {
			position: relative;
			z-index: 2;
			text-align: left;
			img {
				display: block;
				margin-bottom: 40rem;
				@include media-min($medium) {
					width: 60%;
					max-width: 80rem;
					margin-bottom: 8rem;
				}
			}
			.button {
				background: #f67200;
				border-color: #f67200;
				&:hover {
					background: transparent;
					color: #f67200;
				}
			}
		}
		&__img {
			position: absolute;
			background: url("#{$theme-url-base}/media/hackathon/banner.png") center no-repeat;
			background-size: contain;
			width: 90%;
			bottom: 0;
			right: 0;
			left: 0;
			margin: auto;
			top: 5rem;
			z-index: 1;
			@include media-min($medium) {
				width: 60rem;
				margin: 0;
				right: -6rem;
				left: auto;
			}
			@include media-min($large) {
				right: -3rem;
			}
			@include media-min($xlarge) {
				right: 3rem;
			}
		}
		&__menu {
			display: flex;
			padding: 1.6rem;
			overflow-x: auto;

			@include media-min($large) {
				padding-left: 3.2rem;
			}
			@include media-min($xlarge) {
				max-width: 100%;
				padding-left: 10rem;
			}
			@include media-min($xxlarge) {
				max-width: var(--container-max-width);
				margin: 0 auto;
				padding-left: 0rem;
			}
			&-container {
				background: linear-gradient(90deg, #3940ea 0%, rgba(57, 64, 234, 0) 100%);
			}
			&-link {
				color: var(--color-white);
				text-decoration: none;
				padding: 0 1rem;
				line-height: 1.8rem;
				font-size: 1.8rem;
				& + .hackathon-header__menu-link {
					border-left: 1px solid #fff;
				}
				&:first-child {
					padding-left: 0;
				}
				&:hover {
					color: #00cf71;
				}
			}
		}
	}
	&-main-page {
		position: relative;
	}

	&-section {
		position: relative;
		background-color: var(--color-black);
		p {
			color: #fff;
		}
		&__bg {
			&-1 {
				position: absolute;
				top: -10rem;
				left: 0;
				width: 100%;
				height: 80rem;
				background: url("#{$theme-url-base}/media/hackathon/bg-1.png") bottom center
					no-repeat;
				background-size: contain;
				@include media-min($medium) {
					width: 30%;
				}
			}
			&-2 {
				position: absolute;
				top: -30rem;
				right: 0;
				width: 100%;
				height: 70rem;
				background: url("#{$theme-url-base}/media/hackathon/bg-2.png") bottom center
					no-repeat;
				background-size: contain;
				@include media-min($medium) {
					width: 30%;
				}
			}
			&-3 {
				position: absolute;
				top: 40rem;
				left: 0;
				width: 100%;
				height: 80rem;
				background: url("#{$theme-url-base}/media/hackathon/bg-3.png") bottom center
					no-repeat;
				background-size: contain;
				@include media-min($medium) {
					width: 30%;
				}
			}
			&-4 {
				position: absolute;
				top: -16rem;
				right: 0;
				width: 100%;
				height: 70rem;
				background: url("#{$theme-url-base}/media/hackathon/bg-4.png") bottom center
					no-repeat;
				background-size: contain;
				@include media-min($medium) {
					width: 30%;
				}
			}
		}
	}

	&-title {
		font-weight: 400;
		font-size: 24px;
		line-height: 34px;
		color: #fff;
		padding-left: 2.4rem;
		&__container {
			padding-top: 8rem;
			margin-bottom: 4rem;
		}
		&__inner {
			display: flex;
			align-items: center;
			justify-content: center;
		}
		&__desc {
			text-align: center;
			color: #999999;
			b {
				color: #00cf71;
			}
			a {
				color: #888dff;
			}
		}
		&__icon {
			width: 64px;
			height: 64px;
			background: url("#{$theme-url-base}/media/hackathon/title-1.svg") center no-repeat;
			&.second {
				background-image: url("#{$theme-url-base}/media/hackathon/title-2.svg");
			}
			&.three {
				background-image: url("#{$theme-url-base}/media/hackathon/title-3.svg");
			}
			&.four {
				background-image: url("#{$theme-url-base}/media/hackathon/title-4.svg");
			}
			&.five {
				background-image: url("#{$theme-url-base}/media/hackathon/title-5.svg");
			}
		}
	}

	&-cards {
		display: grid;
		gap: 0;
		grid-template-columns: 1fr;
		@include media-min($medium) {
			gap: 6rem 3.2rem;
			grid-template-columns: 1fr 1fr;
		}
		@include media-min($large) {
			grid-template-columns: 1fr 1fr 1fr;
		}
		&__item {
			position: relative;
			display: flex;
			flex-direction: column;
			&:after {
				content: "";
				position: absolute;
				right: 0;
				left: 0;
				bottom: -36px;
				margin: 0 auto;
				transform: rotate(90deg);
				width: 16px;
				height: 16px;
				display: block;
				background: url("#{$theme-url-base}/media/hackathon/icon-arrow.svg") center
					no-repeat;
			}
			&:last-child {
				&::after {
					display: none;
				}
			}
			@include media-min($medium) {
				&::after {
					right: -24px;
					bottom: 0;
					top: 0;
					margin: auto;
					left: auto;
					transform: none;
				}
				&:nth-child(2),
				&:nth-child(4) {
					&::after {
						display: none;
					}
				}
			}
			@include media-min($large) {
				&:nth-child(2),
				&:nth-child(4) {
					&::after {
						display: block;
					}
				}
				&:nth-child(3) {
					&::after {
						display: none;
					}
				}
			}
		}
		&__inner {
			background: #282a36;
			border: 1px solid rgba(237, 237, 237, 0.2);
			padding: 2.4rem 3rem;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-top: 6rem;
			@include media-min($medium) {
				margin-top: 0;
			}
			h4 {
				color: rgba(255, 255, 255, 0.2);
				font-weight: 700;
				font-size: 28px;
				line-height: 42px;
				margin-top: 6px;
				&.active{
					color: #82c1ed;
				}
			}
			&-subtitle {
				font-weight: 500;
				font-size: 20px;
				line-height: 28px;
				color: #82c1ed;
				margin-bottom: 1rem;
			}
			&-date {
				color: #fff;
				i {
					background: url("#{$theme-url-base}/media/hackathon/icon-date.svg") left center
						no-repeat;
					background-size: contain;
					width: 16px;
					height: 20px;
					display: inline-block;
					margin-right: 1.2rem;
					vertical-align: middle;
					margin-top: -4px;
				}
			}
			&-content {
				margin-top: 3.2rem;
				margin-bottom: 6rem;
				color: #fff;
			}
			a {
				color: #82c1ed;
				text-decoration: none;
				&:hover {
					text-decoration: underline;
				}
			}
			&-button {
				a {
					padding: 6px 12px;
					background-color: transparent;
					border: 1px solid #82c1ed;
					display: inline-flex;
					justify-content: center;
					text-align: center;
					&:hover {
						background-color: #82c1ed;
						color: #fff;
						text-decoration: none;
					}
				}
			}
		}
	}

	&-overview {
		position: relative;
		z-index: 1;
		text-align: center;
		.hackathon-title__container {
			padding-top: 0;
		}
	}

	&-prizes {
		&__cards {
			position: relative;
			display: grid;
			gap: 3.2rem;
			grid-template-columns: 1fr;
			justify-items: center;
			@include media-min($medium) {
				grid-template-columns: 1fr 1fr;
				gap: 1.6rem;
			}
			@include media-min($large) {
				// gap: 8rem;
				grid-template-columns: 1fr 1fr 1fr;
			}
			@include media-min($xlarge) {
				grid-template-columns: 1fr 1fr 1fr 1fr;
			}

			&-item {
				width: 25rem;
				height: 28rem;
				text-align: center;
				font-size: 24px;
				color: #ffffff;
				padding: 4rem 2.4rem 6rem;
				background: url("#{$theme-url-base}/media/hackathon/prize-4.svg") left top no-repeat;
				background-size: contain;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				&-number {
					font-weight: 600;
					font-size: 24px;
					line-height: 34px;
					color: #ffffff;
					&.small {
						font-size: 1.6rem;
						line-height: 24px;
					}
				}
				p{
					font-size: 1.4rem;
					opacity: .7;
					color: #fff;
				}
			}

			&-normal {
				@include media-min($medium) {
					justify-items: center;
					grid-template-columns: 1fr 1fr;
				}
				@include media-min($large) {
					justify-items: center;
					grid-template-columns: 1fr 1fr 1fr;
				}
				.hackathon-prizes__cards-item {
					width: 25.2rem;
					height: 33.4rem;
					padding: 6rem 0 15rem;
					&-number {
						font-weight: 600;
						font-size: 36px;
					}
					&:nth-child(1) {
						background-image: url("#{$theme-url-base}/media/hackathon/prize-1.svg");
						.hackathon-prizes__cards-item-number {
							color: #e3c975;
						}
					}
					&:nth-child(2) {
						background-image: url("#{$theme-url-base}/media/hackathon/prize-2.svg");
						.hackathon-prizes__cards-item-number {
							color: #c3c3c3;
						}
					}
					&:nth-child(3) {
						background-image: url("#{$theme-url-base}/media/hackathon/prize-3.svg");
						.hackathon-prizes__cards-item-number {
							color: #deb878;
						}
					}
				}
			}
		}
		&__benefits {
			display: grid;
			gap: 6rem 3.2rem;
			grid-template-columns: 1fr;
			@include media-min($medium) {
				grid-template-columns: 1fr 1fr 1fr;
			}
			&-item {
				display: flex;
				align-items: center;
			}
			img {
				width: 6.4rem;
				height: 6.4rem;
				margin-right: 4rem;
			}
		}
	}

	&-judges {
		&__cards {
			display: grid;
			gap: 3.2rem;
			grid-template-columns: repeat(1, 1fr);
			@include media-min($medium) {
				grid-template-columns: repeat(3, 1fr);
			}
			@include media-min($large) {
				grid-template-columns: repeat(4, 1fr);
			}
			&-item {
				position: relative;
				background: #282a36;
				border: 1px solid rgba(237, 237, 237, 0.2);
				padding: 1rem 2rem 2.4rem;
				cursor: pointer;
				&:hover {
					border: 1px solid rgba(0, 207, 113, 0.5);
					.hackathon-judges__cards-bottom {
						opacity: 1;
					}
				}
			}
			&-img {
				width: 15rem;
				height: 15rem;
				margin: 4rem auto;
			}
			&-content {
				color: #ffffff;
				text-align: center;
			}
			&-name {
				font-weight: 600;
				font-size: 18px;
				line-height: 27px;
				padding-bottom: 0.8rem;
				b{
					color: #00CF71;
				}
			}
			&-position {
				font-size: 16px;
				line-height: 32px;
				color: #ffffff;
			}
			&-bottom {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				text-align: left;
				padding: 6rem 4rem;
				opacity: 0;
				background: #282a36;
				border-radius: 8px;
				transition: all var(--default-transition-params);
				color: #ffffff;
				text-align: left;
			}
			&-desc {
				margin-top: 4.6rem;
			}
		}
	}

	&-faqs {
		.accordion__section {
			border-bottom: 1px dashed #82c1ed;
			&-title-text {
				color: #fff;
			}
		}
		.accordion__plus-icon {
			background-color: transparent;
			border: 1px solid #82c1ed;
			&::before,
			&::after {
				background-color: #82c1ed;
			}
		}
		p {
			color: #999999;
		}
	}

	&-supporters {
		padding-bottom: 1rem;
		&__cards {
			display: flex;
			flex-wrap: wrap;
			gap: 6rem;
			margin-bottom: 8rem;
			&-item {
				margin-top: 2.4rem;
			}
		}
		img {
			width: 16rem;
			height: 8rem;
		}
	}
}