.cavalleretti-box-intro {z-index: 2;}
.cavalleretti-box-intro > .e-con-inner {--box-tre-aree-gap: var(--column-gap);/* flex-wrap: wrap !important; */}
@media screen and (min-width: 768px) {
	.intro-text {
	    width: calc(100% - var(--cavalleretti-secondary-container-width) - var(--box-tre-aree-gap));
	}
}

/* Background */
	.aree-sfondi {
		position: absolute;
		z-index: 1;
		height: var(--true-viewport-h);
	}
	.area-sfondo {
		width: 100%;
		height: 100%;
		position: absolute;
		background-repeat: no-repeat;
		background-size: cover;
		opacity: 0;
		transition: opacity var(--cavalleretti-animation);
		background-image: var(--image);
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}
	.area-sfondo:after {
		content: "";
		position: absolute;
		display: flex;
		background-color: var(--cavalleretti-settore-color);
		width: 100%;
		height: 100%;
		opacity: 0.7;
	}
/* END Background */

/* Hover effects */
	.aree-sfondi:not(:has( > .active)) > .area-sfondo:first-child, .area-sfondo.active {opacity: 1;}
/* END Hover effects */

.box-tre-aree {
	--boxed-gap: 20px;
	--box-width-retracted: 220px;
	--box-column: 3;
	--box-padding: 50px;
	--box-area-gap: 10px;
	--box-area-padding-h3: 20px;
	max-width: var(--cavalleretti-content-max-width);
	width: var(--cavalleretti-secondary-container-width);
	display: flex;
	justify-content: space-between;
	border-radius: 50px;
	gap: var(--boxed-gap);
	box-sizing: border-box;
	flex-wrap: wrap;
}

@media screen and (min-width: 1270px) and (max-width: 1500px) {
	.box-tre-aree {
		--boxed-gap: 20px;
		--box-width-retracted: 140px;
		--box-column: 3;
		--box-padding: 50px;
		--box-area-padding-h3: 15px;
	}
	.box-area h3 {
	    --padding: 15px !important;
	    font-size: 28px !important;
	}
}

@media screen and (min-width: 1025px) and (max-width: 1269px) {
	.box-area {
		min-height: calc(calc(var(--true-viewport-h) - var(--header-main-h)) / 2) !important;
		max-height: calc(calc(var(--true-viewport-h) - var(--header-main-h)) / 2) !important;
	}
}

@media screen and (min-width: 768px) and (max-width: 1269px) {
	.cavalleretti-box-intro {--cavalleretti-secondary-container-width: 100% !important;}
	.box-tre-aree {
		--boxed-gap: 20px;
		--box-width-retracted: 110px;
		--box-column: 3;
		--box-padding: 50px;
		--box-area-padding-h3: 15px;
	}
	.box-area h3 {
		--padding: 15px !important;
		font-size: 28px !important;
	}
	.cavalleretti-box-intro > .e-con-inner {
		flex-direction: column !important;
		gap: 20px;
	}
	.intro-text {width: 100%;}
	.cavalleretti-box-intro h2 br {display: none;}
	.box-area p {white-space: nowrap;}
}

section#intro {
	display: flex;
	flex-direction: column;
	gap: 50px;
	height: 95vh;
}
.box-area {
	--vertical-padding: 70px;
	--horizontal-padding: 40px;
	min-height: calc(var(--true-viewport-h) - var(--header-main-h) - var(--vertical-padding));
	border-radius: var(--cavalleretti-radius-medium);
	padding: var(--vertical-padding) var(--horizontal-padding);
	width: 100%;
	max-width: var(--box-width-retracted);
	box-sizing: border-box;
	transition: 500ms ease-in-out 0ms;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	border-color: var(--cavalleretti-settore-color);
	position: relative;
	gap: 10px;
	background-image: linear-gradient(0deg, rgb(0,0,0,0.4), transparent), var(--image) !important;
}
@media screen and (min-width: 1025px) {
	.box-area:hover, .box-tre-aree:not(:has( > .box-area:not(:first-child):hover)) > .box-area:first-child {
		max-width: calc(
			100% - 
			calc(
				var(--box-width-retracted) * calc(var(--box-column) - 1)
			) - 
			calc(
				var(--boxed-gap) * calc(var(--box-column) - 1)
			)
		);
		width: 100%;
	}
}
.box-area h3 {
	transform-origin: left;
	transition: 500ms ease-in-out;
	border-radius: var(--cavalleretti-radius-small);
	font-size: 38px;
	margin: 0px !important;
	width: fit-content;
	pointer-events: none;
	text-transform: uppercase;
}
@media screen and (min-width: 1025px) {
	.box-area h3 {
		transform: 
			rotate(-90deg) 
			translate(
				calc(
					calc(
						calc(
							1.3em + 
							calc(var(--box-area-padding-h3) * 2)
						) * -1 / 2
					) - 
					var(--box-area-gap) - 
					1.6em - 
					var(--vertical-padding) - 
					30px
				),
				calc(
					var(--box-width-retracted) / 2 - 
					var(--box-area-padding-h3) - 
					calc(var(--horizontal-padding) / 2)
				)
			)
		;
		white-space: nowrap;
		background-color: var(--cavalleretti-settore-color);
		padding: var(--box-area-padding-h3) 30px;
	}
	.box-tre-aree:not(:has( > .box-area:not(:first-child):hover)) > .box-area:first-child h3, .box-area:hover h3 {
		transform: rotate(0deg) translate(0%, 0%);
		background-color: transparent;
		padding: 0px;
	}
	.box-area p {
		opacity: 0;
		transition: max-height 500ms ease-in-out 0ms, opacity 200ms ease-in-out 0ms;
		margin: 0px !important;
		max-height: 0%;
		overflow: hidden;
		min-width: calc(
			calc(
				var(--cavalleretti-secondary-container-width) - var(--box-padding) * 2
			) - 
			calc(
				var(--box-width-retracted) * calc(var(--box-column) - 1)
			) - 
			calc(
				var(--boxed-gap) * calc(var(--box-column) - 1)
			) - 40px
		);
		pointer-events: none;
		line-height: 1.6em;
	}
	.box-tre-aree:not(:has( > .box-area:not(:first-child):hover)) > .box-area:first-child p, .box-area:hover p {
		opacity: 1;
		max-height: 100%;
		transition: max-height 500ms ease-in-out 0ms, opacity 500ms ease-in-out 500ms;
		pointer-events: auto;
	}
}
@media screen and (max-width: 1024px) {
	.cavalleretti-box-intro > .box-area-bg:first-child {padding-top: calc(var(--header-main-h) + 50px);}
	.area-sfondo {
		position: relative;
		opacity: 1;
	}
	.cavalleretti-sezione-intro.mobile .box-area {
		max-width: 100%;
		/* margin: auto; */
	}
	.box-area-bg {
		padding: 30px;
		background-size: cover;
		background-position: center;
	}
	.box-area-bg:before {
		content: "";
		width: 100%;
		height: 100%;
		background-color: var(--cavalleretti-settore-color);
		opacity: 0.8;
	}
	.box-area {padding: 35px 25px 20px 25px;}
}
div.box-area:before {
	content: "";
	display: flex;
	width: 100%;
	height: 100%;
	position: absolute !important;
	top: 0;
	left: 0;
	background-color: var(--cavalleretti-settore-color);
	opacity: 0 !important;
	transition: 500ms ease-in-out;
	border-radius: 20px;
	z-index: -1;
}
.box-tre-aree:not(:has( > .box-area:not(:first-child):hover)) > .box-area:first-child:before, div.box-area:hover:before {opacity: 0.3 !important;}
.area-svg-arrow .elementor-icon {
	background-color: var(--cavalleretti-settore-color);
	width: 80px;
	height: auto;
	aspect-ratio: 1/1;
	border-radius: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: 500ms ease-in-out;
}
.box-tre-aree:not(:has( > .box-area:not(:first-child):hover)) > .box-area:first-child .area-svg-arrow .elementor-icon, .box-area:hover .area-svg-arrow .elementor-icon {opacity: 1;}

@media screen and (max-width: 1024px) {
	.box-tre-aree {
		width: var(--cavalleretti-secondary-container-width);
		flex-direction: column;
	}
	.box-area {
		width: -webkit-fill-available;
		max-width: -webkit-fill-available;
		min-height: fit-content;
		justify-content: center;
	}
	.area-svg-arrow .elementor-icon {opacity: 1 !important;}
	.area-svg-arrow .elementor-icon {width: 65px;}
	.cavalleretti-sezione-intro.mobile .box-area svg {width: 40% !important;}
	.arrow-svg {max-width: 0px;}
	.box-tre-aree:not(:has( > .box-area:not(:first-child):hover)) > .box-area:first-child .arrow-svg, .box-area:hover .arrow-svg {max-width: 80px;}
	.box-tre-aree:not(:has( > .box-area:not(:first-child):hover)) > .box-area:first-child p, .box-area:hover p {transition: max-height 500ms ease-in-out 0ms, opacity 500ms ease-in-out 0ms;}
}