/* START heroClassic */
.heroClassic {
	height: 70vh;
	position: relative;
}

.heroClassic .bgImg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.heroClassic .containerIntro {
	position: absolute;
	background-color: var(--basicWhite);
	padding: 2.5em 8em;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 50%);
	max-width: 80%;
	width: 100%;
	z-index: 2;
	box-shadow: 0px 3px 10px #00000029;
}

. > div p{
	width: 100%;
}

@media screen and (max-width: 1400px) {
	.heroClassic .containerIntro {
		padding: 2.5em 3em;
	}
}

@media screen and (max-width: 950px) {
	.heroClassic{
		height: auto;
		display: flex;
		flex-direction: column;
		gap: 0;
		justify-content: center;
		align-items: center;
		padding: 0;
	}
	
	.heroClassic .bgImg{
		height: 30vh;
		position: initial;
	}
	
	.heroClassic .containerIntro{
		position: initial;
		transform: initial;
		max-width: initial;
	}
}


@media screen and (max-width: 700px) {
	.heroClassic .containerIntro {
		padding: 2em 1em;
		max-width: 95%;
	}
	
}

/* END heroClassic */


/* START imgTextSpecial */
.containerTextSpecial {
	display: flex;
	flex-direction: column;
	gap: 5em;
	padding-bottom: 0;
}

.imgTextSpecial{
	padding-bottom: 0;
	padding-top: 0;
}

.imgTextSpecial .uniformSpacing{
	display: flex;
	align-items: center;
}

.containerTextSpecial .imgTextSpecial:nth-child(even) .uniformSpacing {
	flex-direction: row-reverse;
}

.imgTextSpecial .uniformSpacing img{
	width: 50%;
	aspect-ratio: 4/3;
	object-fit: cover;
}

.imgTextSpecial .uniformSpacing > div{
	display: flex;
	flex-direction: column;
	gap: 1em;
	width: 50%;
	background-color: white;
	box-shadow: 0px 3px 10px #00000029;
	padding: 2.75em;
	height: fit-content;
}

@media screen and (max-width: 1200px) {
	.imgTextSpecial .uniformSpacing,
	.containerTextSpecial .imgTextSpecial:nth-child(even) .uniformSpacing {
		flex-direction: column;
	}

	.imgTextSpecial .uniformSpacing img, .imgTextSpecial .uniformSpacing div{
		width: 100%;
	}

	.imgTextSpecial .uniformSpacing img{
		max-height: 20em;
	}

}

/* END imgTextSpecial */

/* START sliderServices */
.sliderServices {
	padding-top: 0;
	padding-bottom: 0;
	background: transparent linear-gradient(180deg, var(--basicColor2) 0%, var(--basicColor3) 56%, var(--basicColor2) 100%) 0% 0% no-repeat padding-box;
}

.sliderServices > .uniformSpacing{
	display: flex;
	flex-direction: column;
	gap: 3em;
}


.sliderServices .containerSliderButton .sliderDots {
	display: flex;
	justify-content: center;
	gap: .5em;
	padding-top: 3em;
}

.sliderServices .containerSliderButton .sliderDots .sliderDot {
	width: .75em;
	height: .75em;
	border-radius: var(--basicRadius);
	border: 1px solid var(--basicWhite);
	background-color: var(--basicWhite);

	transition: ease all .3s;
	cursor: pointer;

}

.sliderServices .containerSliderButton .sliderDots .sliderDot.active {
	background-color: transparent;
}

.sliderServices .sliderArrows{
	display: flex;
	justify-content: space-between;

	width: 100%;
}


.sliderServices .sliderArrows span{
	display: flex;
}

.sliderServices .sliderArrows span svg{
	width: 1em;
	cursor: pointer;
}

.sliderServices .sliderArrows .sliderLeftArrow{
	position: absolute;
	top: 50%;
	right: calc(100% + 1em);
	transform: translateY(-50%);
}

.sliderServices .sliderArrows .sliderRightArrow{
	position: absolute;
	top: 50%;
	left: calc(100% + 1em);
	transform: translateY(-50%);
}

@media screen and (max-width: 1200px) {
	.sliderServices .sliderArrows{
		display: none;
	}
}

/* END sliderServices */

/* START listingCards */
.listingCards .uniformSpacing{
	display: flex;
	flex-direction: column;
	gap: 3em;

}

.listingCards .cards {
	display: flex;
	flex-wrap: wrap;
	gap: 5em;
}

.listingCards .cards .element {
	display: flex;
	flex-direction: column;
	gap: 1em;
	width: calc((100% - 5em * 2) / 3);
}

.listingCards .cards .element img {
	width: 100%;
	height: auto;
	aspect-ratio: 1/1;
	object-fit: cover;
}

.listingCards .cards .element svg {
	width: 1.5em;
	height: 1.5em;
}

	@media screen and (max-width: 850px) {
		.listingCards .cards {
			justify-content: center;
			gap: 2em;
		}

		.listingCards .cards .element {
			width: 70%;
			gap: .5em;
		}
	}

/* END listingCards */