.text-white > .boxesCarousel .boxesCarouselHeadText .boxesCarouselSmall,
.text-white > .boxesCarousel .boxesCarouselHeadText h2,
.text-white > .boxesCarousel .boxesCarouselHeadText p { color:var(--light-font-color); }

.text-body-alt > .boxesCarousel .boxesCarouselHeadText .boxesCarouselSmall,
.text-body-alt > .boxesCarousel .boxesCarouselHeadText h2,
.text-body-alt > .boxesCarousel .boxesCarouselHeadText p { color:var(--light-font-color2); }

.text-primary > .boxesCarousel .boxesCarouselHeadText .boxesCarouselSmall,
.text-primary > .boxesCarousel .boxesCarouselHeadText h2,
.text-primary > .boxesCarousel .boxesCarouselHeadText p { color:var(--main-clr); }

.text-secondary > .boxesCarousel .boxesCarouselHeadText .boxesCarouselSmall,
.text-secondary > .boxesCarousel .boxesCarouselHeadText h2,
.text-secondary > .boxesCarousel .boxesCarouselHeadText p { color:var(--head-font-color); }

/* Hidden by default only when boxes-carousel-block.php actually found a contact-form block on
   this page (adds "showAfterContactFormConfirmation" - see contact-form-block.css for the
   body.contact-form-confirmed toggle). No contact-form on the page at all -> no class added ->
   this shows immediately like any other block. */
.boxesCarousel{overflow:hidden;}

.boxesCarouselHead{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-bottom:40px;}
.boxesCarouselSmall{display:block;color:var(--black-clr);opacity:.4;font-size:18px;font-weight:600;text-transform:uppercase;letter-spacing:0.15em;margin-bottom:15px;}
.boxesCarouselHeadText h2{color:var(--head-font-color);font-weight:700;font-size:var(--fs-30);}
.boxesCarouselHeadText h2:not(:last-child){padding-bottom:15px;}
.boxesCarouselHeadText p{color:var(--body-font-color);opacity:.75;font-size:16px;}
.boxesCarouselHeadText p:last-child{padding-bottom:0;}

.boxesCarouselArrows{display:flex;gap:15px;flex-shrink:0;}
.boxesCarouselArrow{width:44px;height:44px;border-radius:50%;background:none;border:1px solid rgba(28,43,56,0.15);color:var(--head-font-color);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:0.3s;}
.boxesCarouselArrow:hover{background:var(--head-font-color);color:var(--light-font-color);border-color:var(--head-font-color);}
.boxesCarouselArrow.slick-disabled{opacity:.3;cursor:default;}
.boxesCarouselArrow.slick-disabled:hover{background:none;color:var(--head-font-color);border-color:rgba(28,43,56,0.15);}

.boxesCarouselSlider { margin: 0 -15px; }
.boxesCarouselSlider .slick-list{overflow:visible;}
.boxesCarouselSlider .slick-track{display:flex;}
.boxesCarouselSlider .slick-slide{height:auto;}
.boxesCarouselSlider .slick-slide > div{height:100%;}

.boxesCarouselItem{height:100%;padding:0 15px;}
.boxesCarouselCard{
	display:flex;
	align-items:center;
	gap:30px;
	height:100%;
	background:#f2f2f3;
	border-radius:var(--border-radius-medium);
	padding:30px;
}

.boxesCarouselText{flex:1;padding:0 30px}
.boxesCarouselStepLabel{display:block;color:var(--tertiary-color);font-weight:700;font-size:var(--fs-14);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:15px;}
.boxesCarouselText h3{color:var(--head-font-color);font-weight:700;font-size:var(--fs-24);padding-bottom:15px;}
.boxesCarouselText p{color:var(--body-font-color);opacity:.85;font-size:var(--fs-16);}
.boxesCarouselText p:last-child{padding-bottom:0;}

.boxesCarouselImage{flex:1;aspect-ratio:520/340;border-radius:var(--border-radius-medium);overflow:hidden;}
.boxesCarouselImage picture{display:block;height:100%;}
.boxesCarouselImage img{display:block;width:100%;height:100%;object-fit:cover;}

@media(max-width:991.98px){
	.boxesCarouselCard{flex-direction:column;gap:20px;padding:20px;}
	.boxesCarouselText{padding:0 20px}
}

@media(max-width:767.98px){
	.boxesCarousel br{display:none;}
	.boxesCarouselHead{flex-wrap:wrap;}
}

@media(min-width:568px){ .boxesCarouselHeadText h2{font-size:var(--fs-36);} .boxesCarouselText h3 {font-size:var(--fs-26);} }
@media(min-width:992px){ .boxesCarouselHeadText h2{font-size:var(--fs-42);} .boxesCarouselText h3 {font-size:var(--fs-28);} }
@media(min-width:1600px){ .boxesCarouselHeadText h2{font-size:var(--fs-48);} .boxesCarouselText h3 {font-size:var(--fs-30);} }