/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
	#hero-143 {
		/* Centers button */
		text-align: center;
		/* 144px - 300px - leaving extra space for the navigation */
		padding: clamp(7rem, 5vw, 10rem) 1rem 7rem;
		position: relative;
		z-index: 1;
		/* Prevents white rectangle pseudos from overlapping the sections below */
		overflow: hidden;
	}
	
	#hero-143 .cs-background {
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -2;
	}

	#hero-143 .cs-background:before {
		/* Overlay */
		content: "";
		width: 100%;
		height: 100%;
		background: #000;
		opacity: 0.7;
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		z-index: 1;
		/* prevents the cursor from interacting with it */
		pointer-events: none;
	}

	#hero-143 .cs-background img {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		object-fit: cover;
	}

	#hero-143 .cs-container {
		width: 100%;
		max-width: 80rem;
		margin: auto;
	}

	#hero-143 .cs-title {
		/* 39px - 61px */
		font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
		font-weight: 700;
		line-height: 1.2em;
		text-align: center;
		max-width: 51.8125rem;
		/* 16px - 24px */
		margin: 0 auto clamp(1rem, 4vw, 1.5rem);
		color: #fff;
		position: relative;
	}

	#hero-143 .cs-title:after {
		/* Divider Line */
		content: "";
		/* 60px - 100px */
		width: clamp(3.75rem, 9.5vw, 6.25rem);
		/* 4px - 8px */
		height: clamp(0.25rem, 0.8vw, 0.5rem);
		/* 16px - 24px */
		margin: clamp(1rem, 4vw, 1.5rem) auto clamp(1rem, 4vw, 1.5rem);
		background: var(--primary);
		opacity: 1;
		position: relative;
		display: block;
	}

	#hero-143 .cs-text {
		/* 16px - 25px */
		font-size: clamp(1rem, 1.95vw, 1.5625rem);
		line-height: 1.5em;
		width: 100%;
		/* 464px - 800px */
		max-width: clamp(29rem, 60vw, 50rem);
		margin: 0 auto;
		/* 40px - 48px */
		margin-bottom: clamp(2.5rem, 4vw, 3rem);
		color: #fff;
	}
}

/* Desktop - 1300px (To make image background parallax) */
@media only screen and (min-width: 81.25rem) {
	#hero-143 {
		background: url("../img/rotation/bg-1.png");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		/* makes the parallax effect */
		background-attachment: fixed;
	}

	#hero-143 .cs-background img {
		display: none;
	}
}