@media screen {
	#team_and_venue_solutions {
		& section.header {
			background-color: white;
			height: 270px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 32px;

			& .content {
				width: 100%;
				max-width: var(--max_page_width);
				position: relative;
			}

			& p {
				color: var(--color_gray);
				font-size: 1.5rem;
				max-width: 700px;
			}

			& img {
				position: absolute;
				top: 10px;
				right: 0;
				max-width: 200px;
			}
		}
	}

	& section.steps {
		background-color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;

		& .photo {
			display: flex;
			align-items: center;
			flex-grow: 1;
			background: url(/assets/images/pages/team_venue_solutions/team_venue_solutions-bg.jpg);
			background-size: cover;
			background-position-x: center;
			background-position-y: center;
			background-repeat: no-repeat;
			width: 100%;
			height: 380px;
			max-height: 380px;
			padding: 20px;

			& h2 {
				display: block;
				margin: 0 auto;
				max-width: var(--max_page_width);
				color: white;
				text-align: center;
				font-size: 3rem;
				margin-bottom: 50px;
				font-family: var(--font_family_regular);
				& em {
					font-style: normal;
					font-family: var(--font_family_extra_bold);
				}
			}
		}

		& .grid {
			position: relative;
			top: -70px;
			flex-grow: 1;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-gap: 20px;

			& .step {
				padding: 30px;
				max-width: 350px;
				border-radius: 8px;
				background-color: white;
				box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);

				& img {
					height: 100%;
					max-height: 60px;
					margin-bottom: 30px;
				}
				& img.earth {
					margin-bottom: 20px;
					max-height: 70px;
				}
			}
		}
	}

	& section.fun_part {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: white;
		padding-top: 10px;
		padding-bottom: 50px;

		& h2 {
			margin-bottom: 20px;
		}

		& dl {
			padding: 20px;
			width: 100%;
			max-width: var(--max_page_width);
			display: grid;
			align-items: flex-start;
			grid-template-columns: 250px 1fr;
			row-gap: 32px;
			column-gap: 60px;

			& dt {
				font-family: var(--font_family_extra_bold);
				font-size: 1.5rem;
				display: inline-block;
				font-weight: 800;
				color: black;
			}

			& dd {
				font-size: 1.25rem;
				color: var(--color_gray);
				display: inline-block;
				& em {
					margin-left: 6px;
					font-style: normal;
					font-family: var(--font_family_bold);
				}
			}
		}
	}

	& section.our_goal {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-image: linear-gradient(135deg, #005ef2 2%, #00418c 90%);
		padding: 90px;

		& h2 {
			color: white;
			margin: 0;
			max-width: var(--max_page_width);
			text-align: center;
			line-height: 1.5;
			margin-bottom: 18px;
		}

		& p {
			color: white;
			margin: 0;
			max-width: var(--max_page_width);
			line-height: 1.25;
			font-size: 1.25rem;
			margin-bottom: 18px;
		}

		& a.btn {
			transition: all 0.3s ease;
			background: linear-gradient(110deg, #c0246e 0%, #2856e7 100%);
			padding: 12px 52px;
			position: relative;
			isolation: isolate;
			overflow: hidden;
			border: none;
			box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);

			&::after {
				transition: all 0.2s linear;
				border: 2px solid white;
				border-radius: inherit;
				opacity: 0;
				content: "";
				width: 100%;
				height: 100%;
				position: absolute;
				z-index: -1;
				top: 0;
				left: 0;
				background: linear-gradient(110deg, #c0246e -25%, #2856e7 75%);
			}
			&:hover {
				&::after {
					opacity: 1;
				}
			}
		}
	}

	& section.difference {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: white;
		padding: 70px 0;

		& .grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-gap: 20px;
			max-width: var(--max_page_width);
			padding: 20px 60px;

			& .cell {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-start;
				padding: 20px;

				& img {
					height: 70px;
					margin-bottom: 30px;
				}

				& h3,
				p {
					text-align: center;
				}
			}
		}

		& a.btn {
			padding: 10px 70px;
		}
	}

	& section.more_questions {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 80px 0;

		& .content {
			max-width: 600px;

			& p {
				margin: 20px 0;
				font-size: 1.25rem;
			}
		}

		& a.btn {
			padding: 10px 70px;
		}
	}
}

& section.contact_us {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 90px;

	& .content {
		width: 100%;
		max-width: var(--max_page_width);

		& h2 {
			line-height: 1.25;
			font-size: 2rem;
			text-align: center;
			padding: 0 150px;
		}
		
		& p {
			text-align: center;
		}
	}
}

@media screen and (max-width: 768px) {
	#team_and_venue_solutions {
		& section.header {
			height: unset;
			.content {
				padding: 10px 30px;

				& h1 {
					font-size: 1.5rem;
				}

				& p {
					font-size: 1.125rem;
					margin-bottom: 4px;
				}

				& img {
					max-height: 44px;
					top: 20px;
					right: 30px;
				}
			}
		}

		& section.steps {
			& .photo {
				height: 250px;
				& h2 {
					font-size: 1.75rem;
					margin-bottom: 60px;
				}
			}

			& .grid {
				grid-template-columns: 1fr;

				& .step {
					position: relative;
					padding-left: 100px;
					& h2 {
						font-size: 1.25rem;
					}
					& p {
						margin-bottom: 0;
					}
					& img {
						/* max-height: 50px; */
						width: 50px;
						max-height: unset;
						height: unset;
						margin-bottom: 16px;
						position: absolute;
						left: 30px;
					}
				}
			}
		}

		& section.fun_part {
			padding-top: 0;
			padding-bottom: 10px;
			& h2 {
				margin-bottom: 10px;
				font-size: 1.5rem;
			}
			& dl {
				grid-template-columns: 1fr;
				column-gap: 0;
				row-gap: 4px;
				& dt {
					font-size: 1.25rem;
				}
				& dd {
					font-size: 1rem;
					margin-bottom: 20px;
				}
			}
		}

		& section.our_goal {
			padding: 50px 30px;
			& h2 {
				line-height: 1.25;
				font-size: 1.375rem;
			}
			& a.btn {
				padding: 12px 42px;
			}
		}

		& section.contact_us {
			padding: 50px 30px;
			& .content h2 {
				font-size: 1.375rem;
				padding: 0;
			}
		}
	}
}