#expertisecarousel.carousel {
	position: relative;
	z-index: 1;
	height: 80vh;
	overflow: hidden;
	pointer-events: none;
}

#expertisecarousel .carousel-inner {
	position: initial;
	width: 100%;
	overflow: hidden;
	z-index: 9;
}

#expertisecarousel .carousel-control-prev, #expertisecarousel .carousel-control-next {
	z-index: 99;
	cursor: pointer;
}

#expertisecarousel .carousel-item {
	--items: 5;
	--width: clamp(130px, 30vw, 260px);
	--height: clamp(180px, 40vw, 360px);
	--x: calc(var(--active) * 500%);
	--y: calc(var(--active) * 100%);
	--rot: calc(var(--active) * 120deg);
	--opacity: calc(var(--zIndex) / var(--items) * 3 - 1.5);
	overflow: hidden;
	position: absolute;
	z-index: var(--zIndex);
	width: var(--width);
	height: var(--height);
	margin: calc(var(--height) * -0.5) 0 0 calc(var(--width) * -0.5);
	border-radius: 10px;
	top: 50%;
	left: 50%;
	user-select: none;
	transform-origin: 0% 100%;
	box-shadow: 0 10px 50px 10px rgba(0, 0, 0, .5);
	background: black;
	pointer-events: all;
	transform: translate(var(--x), var(--y)) rotate(var(--rot));
	transition: transform 0.8s cubic-bezier(0, 0.02, 0, 1);
	display: block;
}

#expertisecarousel .carousel-item .carousel-box {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: opacity 0.8s cubic-bezier(0, 0.02, 0, 1);
	opacity: var(--opacity);
	font-family: 'Orelo-sw-db', serif;
}

#expertisecarousel .carousel-item .carousel-box:before {
	content: '';
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .5));
}

#expertisecarousel .carousel_content {
	position: absolute;
	inset: 0;
}

#expertisecarousel:before {
	content: "";
	position: absolute;
	top: 0;
	height: 100px;
	left: 0;
	right: 0;
	background: linear-gradient(to bottom, #fff, transparent);
	z-index: 9;
}

#expertisecarousel:after {
	content: "";
	position: absolute;
	bottom: 0;
	height: 100px;
	left: 0;
	right: 0;
	background: linear-gradient(to bottom, transparent, #fff);
	z-index: 9;
}

#expertisecarousel .carousel-inner:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 10px;
	left: 0;
	background: linear-gradient(to right, #fff, transparent);
	z-index: 9;
}

#expertisecarousel .carousel-inner:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 10px;
	right: 0;
	background: linear-gradient(to left, #fff, transparent);
	z-index: 9;
}

#expertisecarousel .carousel_content.allprojects {
	display: flex;
	align-items: center;
	justify-content: center;
}

#expertisecarousel .carousel-item .title {

	/* position: absolute; */
	z-index: 1;
	color: #fff;
	bottom: 20px;
	left: 20px;
	transition: opacity 0.8s cubic-bezier(0, 0.02, 0, 1);
	font-size: 30px;
	text-shadow: 0 4px 4px rgba(0, 0, 0, .1);
	font-family: 'Poppins-Bold';
	line-height: 1;
}

#expertisecarousel .projectlink {
	color: #fff;
	font-family: 'Poppins-Bold';
	position: absolute;
	bottom: 12%;
	z-index: 9;
	outline: 0;
	font-size: 20px;
	text-decoration: none;
	border: 0;
	padding: 0 0 3px 0;
	border-bottom: 2px solid var(--yellow);
}

#expertisecarousel .projectlink:hover {
	color: var(--yellow);
}

#expertisecarousel .carousel_content.allprojects .projectlink {
	position: relative;
	bottom: 0;
}

#expertisecarousel .carousel-item .num {
	z-index: 1;
	top: 10px;
	left: 20px;
	transition: opacity 0.8s cubic-bezier(0, 0.02, 0, 1);
	font-size: clamp(20px, 10vw, 60px);
	font-family: 'Poppins-Bold';
	color: var(--yellow);
}

#expertisecarousel .carousel-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

/* 
.cursor {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    --size: 40px;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .2);
    margin: calc(var(--size) * -0.5) 0 0 calc(var(--size) * -0.5);
    transition: transform 0.85s cubic-bezier(0, 0.02, 0, 1);
    display: none;
    pointer-events: none;
} */

/* @media (pointer: fine) {
    .cursor {
        display: block;
   }
}
.cursor2 {
    --size: 2px;
    transition-duration: 0.7s;
} */

@media only screen and (max-width:767px) {
    #expertisecarousel .carousel-item {
          --width: clamp(130px, 50vw, 220px);
        --height: clamp(180px, 70vw, 360px);
}
#expertisecarousel .carousel-item .title {
     font-size: 21px;
}
#expertisecarousel .projectlink {
    font-size: 15px;
}

#expertisecarousel .carousel-item .num {
    font-size: clamp(20px, 8vw, 60px);
}
.slick-slider {
    padding: 0 4%;
}
.slick-prev {
    left: 0;
}
.slick-next {
    right: 0;
}
}