@charset "utf-8";
/* CSS Document */
/* ==========================================================================
   Hero Layout
   ========================================================================== */

.tc-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--tc-white);
	padding: clamp(4rem, 7vw, 7.5rem) 0;
	isolation: isolate;
}

.tc-hero__background {
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(circle at top left,
			rgba(236, 105, 31, 0.10),
			transparent 35%),
		radial-gradient(circle at bottom right,
			rgba(0, 94, 96, 0.08),
			transparent 40%),
		var(--tc-white);
}

.tc-hero__background::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(
			rgba(0,0,0,.03) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(0,0,0,.03) 1px,
			transparent 1px
		);

	background-size: 40px 40px;
	opacity: .35;
	pointer-events: none;
}

.tc-hero__wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: flex-start;
	gap: clamp(3rem, 6vw, 6rem);
	position: relative;
}

.tc-hero__content {
	position: relative;
	z-index: 2;
}

.tc-hero__media {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 580px;
}

.tc-hero__image-wrapper {
	position: relative;
	width: 100%;
	max-width: 560px;
}

.tc-hero__shape {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	z-index: -1;
	pointer-events: none;
}

.tc-hero__shape--one {
	width: 280px;
	height: 280px;
	background: rgba(236,105,31,.18);
	top: -60px;
	left: -60px;
}

.tc-hero__shape--two {
	width: 220px;
	height: 220px;
	background: rgba(0,94,96,.15);
	right: -50px;
	bottom: -40px;
}

/* ==========================================================================
   Large Desktop
   ========================================================================== */

@media (min-width: 1440px) {

	.tc-hero__wrapper {

		gap: 7rem;

	}

}

/* ==========================================================================
   Laptop
   ========================================================================== */

@media (max-width: 1199px) {

	.tc-hero {

		padding: 5rem 0;

	}

	.tc-hero__wrapper {

		gap: 4rem;

	}

	.tc-hero__media {

		min-height: 500px;

	}

}

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 991px) {

	.tc-hero {

		padding: 4.5rem 0;

	}

	.tc-hero__wrapper {

		grid-template-columns: 1fr;
		text-align: center;

	}

	.tc-hero__content {

		order: 2;

	}

	.tc-hero__media {

		order: 1;
		min-height: auto;
		margin-bottom: 3rem;

	}

	.tc-hero__image-wrapper {

		max-width: 480px;
		margin-inline: auto;

	}

}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 767px) {

	.tc-hero {

		padding: 4rem 0;

	}

	.tc-hero__wrapper {

		gap: 2.5rem;

	}

	.tc-hero__image-wrapper {

		max-width: 340px;

	}

	.tc-hero__shape--one {

		width: 180px;
		height: 180px;

	}

	.tc-hero__shape--two {

		width: 140px;
		height: 140px;

	}

}

/* Premium hero refinement */
.tc-hero {
	min-height: min(760px, calc(100svh - 84px));
	display: flex;
	align-items: center;
	padding: clamp(4.5rem, 7vw, 7rem) 0 clamp(4rem, 6vw, 6rem);
}

.tc-hero__background {
	background:
		radial-gradient(ellipse at 12% 18%, rgba(236, 105, 31, .13), transparent 32%),
		radial-gradient(ellipse at 88% 72%, rgba(0, 94, 96, .11), transparent 34%),
		linear-gradient(135deg, #fff 0%, #fffaf7 52%, #f8fcfc 100%);
}

.tc-hero__background::after {
	content: "";
	position: absolute;
	width: 34rem;
	height: 34rem;
	right: -16rem;
	top: 8%;
	border: 1px solid rgba(236, 105, 31, .12);
	border-radius: 50%;
	box-shadow: 0 0 0 4rem rgba(236, 105, 31, .025), 0 0 0 9rem rgba(236, 105, 31, .018);
	pointer-events: none;
}

.tc-hero__wrapper {
	align-items: center;
	gap: clamp(2.5rem, 5vw, 6rem);
}

.tc-hero__media {
	min-height: 620px;
}

@media (max-width: 1199px) {
	.tc-hero { min-height: auto; }
	.tc-hero__media { min-height: 540px; }
}

@media (max-width: 991px) {
	.tc-hero { display: block; }
	.tc-hero__media { min-height: auto; }
}