/* ********************************

****** CAROUSEL - ABOUT US *******

********************************* */



.about-carousel-item {

	position: relative;

	height: 100%;

	width: auto;

	padding: 10px;

}



.about-carousel-bg {

	position: absolute;

	top: 0;

	left: 0;

	height: 100%;

	width: 100%;

	z-index: -1;

}



.splide__arrow {

	background-color: transparent !important;

}



.splide__arrow svg {

	width: 30px !important;

	height: 30px !important;

}



.splide__arrow--prev.arrow-left {

	left: -5%;

}



.splide__arrow--next.arrow-right {

	right: -5%;

}



.splide__pagination.pagination {

	position: relative;

	margin-top: 30px;

	z-index: 10;

	gap: 10px;

}



.carousel-icon {

	padding: 20px 20px;

	padding-right: 30px;

	background-color: var(--white);

	border: 1px solid var(--line-color);

	transform: skew(-23deg);

	z-index: 20;

}



.carousel-icon svg {

	transform: skew(23deg);

	fill: var(--black);

	width: 70px;

	height: 70px;

}



.about-carousel-bg path {

	fill: var(--light-grey);

	opacity: 1;

}



.splide__slide.is-active .about-carousel-bg path {

	fill: var(--primary);

	opacity: 0.302;

}



.splide__slide.is-active .carousel-icon {

	background-color: var(--primary);

	border-color: var(--primary);

}



.splide__slide.is-active .carousel-icon svg {

	fill: var(--white);

}



.splide__pagination__page.is-active {

	background-color: var(--black) !important;

}



.carousel-text {

	display: grid;

	grid-template-rows: 30px 1fr;

	gap: 8px;

	height: 100%;

	padding-top: 10px;

}



@media(min-width: 768px) {

	.carousel-text {

		padding-top: 16px;

	}

}



@media(min-width: 992px) {

	.carousel-text {

		padding-top: 24px;

	}

}



@media(min-width: 1200px) {

	.carousel-text {

		padding-top: 32px;

	}

}



.carousel-text h4 {

	font-weight: 600;

	font-size: clamp(16px, 2vw, 30px);

}



.carousel-text p {

	font-size: clamp(12px, 2vw, 16px);

}





@media (max-width: 1024px) {

	.splide__arrows {

		display: none;

	}



	.splide:not(.is-overflow) .splide__pagination {

		display: flex !important;

	}

}



@media (max-width: 860px) {

	.splide__slide {

		height: fit-content !important;

	}

	

	.carousel-icon svg {

		width: 70px;

		height: 70px;

	}

}



@media (max-width: 640px) {

	.carousel-icon svg {

		width: 60px;

		height: 60px;

	}

}