/* =========================================================
   BLUMI RELATED SOLUTIONS
   ========================================================= */

.blumi-related-solutions {
   
	   position: relative;
   
	   /*
		* Il widget può trovarsi dentro
		* un container Elementor boxed.
		*
		* Lo facciamo uscire dal container
		* e occupare tutto il viewport.
		*/
	   width: 100vw;
	   max-width: 100vw;
   
	   margin-left:
		   calc(50% - 50vw);
   
	   margin-right:
		   calc(50% - 50vw);
   
	   padding:
		   clamp(70px, 8vw, 0)
		   0
		   clamp(80px, 8vw, 0);
   
	   overflow: hidden;
   
	   background: #ECEFFA;
   
	   color: #401F0F;
   
	   font-family:
		   var(
			   --blumi-font-primary,
			   "bc-novatica-cyr",
			   sans-serif
		   );
   
   }


/* =========================================================
   HEADER
   ========================================================= */

.blumi-related-solutions__header {

	margin-bottom:
		clamp(38px, 4vw, 58px);

}


.blumi-related-solutions__title {

	margin:
		0 0 14px;

	padding: 0;

	color: #A5ADD8;

	font-size: 60px;

	font-weight: 700;

	line-height: 1;

	letter-spacing: 0;

}


.blumi-related-solutions__intro {

	max-width: 1080px;

	color: #401F0F;

	font-size: 18px;

	line-height: 1.22;

}


.blumi-related-solutions__intro
> :first-child {

	margin-top: 0;

}


.blumi-related-solutions__intro
> :last-child {

	margin-bottom: 0;

}


/* =========================================================
   VIEWPORT
   ========================================================= */

.blumi-related-solutions__viewport {
   
	   position: relative;
   
	   width: 100vw;
	   max-width: none;
   
	   margin-left: 0;
	   margin-right: 0;
   
	   overflow: hidden;

	   /* Keep vertical page scrolling available while enabling horizontal drag. */
	   touch-action: pan-y;
   
   }


/* =========================================================
   TRACK
   ========================================================= */

.blumi-related-solutions__track {
   
	   --blumi-related-gap: 18px;
   
	   display: flex;
   
	   align-items: flex-start;
   
	   gap:
		   var(--blumi-related-gap);
   
	   width: max-content;
   
	   padding: 0;
   
	   margin-left: 0;
   
	   transform:
		   translate3d(
			   0,
			   0,
			   0
		   );
   
	   will-change:
		   transform;

	   cursor: grab;
	   user-select: none;
	   -webkit-user-select: none;
   
   }


/* =========================================================
   CARD
   564 x 665 image
   ========================================================= */

.blumi-related-solutions__card {

	flex:
		0 0
		min(
			564px,
			38vw
		);

	min-width: 0;

	margin: 0;

}


.blumi-related-solutions__track.is-dragging {

	cursor: grabbing;
	transition: none !important;

}


.blumi-related-solutions--single .blumi-related-solutions__track {

	box-sizing: border-box;
	width: 100%;
	margin: 0;
	justify-content: center;
	cursor: default;
	user-select: auto;
	-webkit-user-select: auto;
	will-change: auto;

}


/* =========================================================
   IMAGE
   ========================================================= */

.blumi-related-solutions__image {

	position: relative;

	display: block;

	width: 100%;

	aspect-ratio:
		564 / 665;

	overflow: hidden;

	background: #A5ADD8;

	text-decoration: none;

}


.blumi-related-solutions__image::after {

	content: "";

	position: absolute;

	inset: 0;

	z-index: 2;

	background:
		rgba(
			165,
			173,
			216,
			.18
		);

	opacity: 0;

	pointer-events: none;

	transition:
		opacity .35s ease;

}


.blumi-related-solutions__image img {

	display: block;

	width: 100%;
	height: 100%;

	max-width: none;

	object-fit: cover;

	transform:
		scale(1);

	transition:
		transform .7s
		cubic-bezier(
			.22,
			1,
			.36,
			1
		);

}


.blumi-related-solutions__card:hover
.blumi-related-solutions__image::after {

	opacity: 1;

}


.blumi-related-solutions__card:hover
.blumi-related-solutions__image img {

	transform:
		scale(1.025);

}


/* =========================================================
   CONTENT
   ========================================================= */

.blumi-related-solutions__card-content {

	padding:
		18px 18px 0;

}


.blumi-related-solutions__card-title {

	margin:
		0 0 18px;

	padding: 0;

	color: #401F0F;

	font-size: 30px;

	font-weight: 700;

	line-height: 1;

}


.blumi-related-solutions__card-title a {

	color: inherit;

	font: inherit;

	text-decoration: none;

}


/* =========================================================
   CTA
   ========================================================= */

.blumi-related-solutions__cta {

	display: flex;

	align-items: center;
	justify-content: space-between;

	width: 100%;

	padding:
		12px 0 0;

	border-top:
		2px solid #A5ADD8;

	color: #A5ADD8;

	font-size: 14px;

	font-weight: 600;

	line-height: 1;

	text-transform: uppercase;

	text-decoration: none;

	transition:
		color .25s ease;

}


.blumi-related-solutions__cta-icon {

	display: block;

	width: 22px;
	height: 12px;

	background:
		currentColor;

	-webkit-mask-image:
		var(--blumi-icon);

	mask-image:
		var(--blumi-icon);

	-webkit-mask-repeat:
		no-repeat;

	mask-repeat:
		no-repeat;

	-webkit-mask-position:
		center;

	mask-position:
		center;

	-webkit-mask-size:
		contain;

	mask-size:
		contain;

	transition:
		transform .3s ease;

}


.blumi-related-solutions__cta:hover
.blumi-related-solutions__cta-icon {

	transform:
		translateX(5px);

}


/* =========================================================
   CAROUSEL ARROWS
   ========================================================= */

.blumi-related-solutions__arrow {

	position: absolute;

	z-index: 10;

	top:
		calc(
			665px / 2
		);

	display: flex;

	align-items: center;
	justify-content: center;

	width: 50px;
	height: 50px;

	margin: 0;
	padding: 0;

	border: 0;

	border-radius: 50%;

	background:
		transparent !important;

	color: #A5ADD8!important;

	cursor: pointer;

	transform:
		translateY(-50%);

	transition:
		transform .25s ease,
		opacity .25s ease;

}


.blumi-related-solutions__arrow span {

	display: block;

	width: 100%;
	height: 100%;

	background:
		currentColor;

	-webkit-mask-image:
		var(--blumi-icon);

	mask-image:
		var(--blumi-icon);

	-webkit-mask-repeat:
		no-repeat;

	mask-repeat:
		no-repeat;

	-webkit-mask-position:
		center;

	mask-position:
		center;

	-webkit-mask-size:
		contain;

	mask-size:
		contain;

}


.blumi-related-solutions__arrow--prev {

	left:
		clamp(
			24px,
			3vw,
			55px
		);

}


.blumi-related-solutions__arrow--next {

	right:
		clamp(
			24px,
			3vw,
			55px
		);

}


.blumi-related-solutions__arrow:hover {

	transform:
		translateY(-50%)
		scale(1.06);

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {
   
	   .blumi-related-solutions__track {
   
		   padding-left: 18px;
		   padding-right: 18px;
   
	   }
   
	   .blumi-related-solutions__card {
   
		   flex-basis:
			   min(
				   460px,
				   65vw
			   );
   
	   }
   
	   .blumi-related-solutions__arrow {
   
		   top: 42%;
   
	   }
   
   }


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

	.blumi-related-solutions {

		padding:
			60px 0 75px;

	}


	.blumi-related-solutions__header {

		margin-bottom: 36px;

	}


	.blumi-related-solutions__title {

		font-size: 44px;

		line-height: .98;

	}


	.blumi-related-solutions__track {

		gap: 14px;

		padding:
			0 22px;

	}


	.blumi-related-solutions__card {

		flex-basis:
			calc(
				100vw - 64px
			);

	}


	.blumi-related-solutions__card-content {

		padding:
			16px 4px 0;

	}


	.blumi-related-solutions__card-title {

		font-size: 28px;

	}


	.blumi-related-solutions__arrow {

		top: 40%;

		width: 44px;
		height: 44px;

	}


	.blumi-related-solutions__arrow--prev {

		left: 14px;

	}


	.blumi-related-solutions__arrow--next {

		right: 14px;

	}

}

/* One/two cards: center the group without enlarging the cards.
 * JS recalculates fitting state after responsive resizes. */
.blumi-related-solutions.is-fitting .blumi-related-solutions__track {
  box-sizing: border-box;
  width: 100%;
  justify-content: center;
  cursor: default;
  will-change: auto;
}
.blumi-related-solutions.is-fitting .blumi-related-solutions__arrow {
  display: none;
}