/* 
 * Global Slider CSS 
 * */

.slick-slider{
	opacity: 0;
	visibility: hidden;
	cursor: grab;
}

.slick-slider.slick-initialized{
	opacity: 1;
	visibility: visible;
}

.slider .slick-arrow{
	position: absolute;
	top: -110px;
	left: auto;
	right: 85px;
	bottom: auto;
	display: flex;
	align-items: center;	
	justify-content: center;
	border: none;
	background-color: var( --e-global-color-accent );
	color: var( --e-global-color-secondary );
	padding: 0;
	width: 50px;
	height: 50px;
	transition: all 0.3s ease-in-out;
	z-index: 10;
}

.slider .slick-arrow.next-arrow{
	right: 15px;
	left: auto;
}

.slider .slick-arrow:hover,
.slider .slick-arrow:focus{
	
/* 	background-color: var( --e-global-color-primary ); */
}

.slider .slick-arrow svg{
	width: 16px;
	height: 16px;
}

@media only screen and (max-width: 1024px){
	
	.slick-slider.slick-initialized{
		padding-bottom: 100px;
	}
	
	.slider .slick-arrow{
		left: calc(50% - 55px);
		top: auto;
		right: auto;
		bottom: 0;
	}

	.slider .slick-arrow.next-arrow{
		right: calc(50% - 55px);
		left: auto;
	}
	
}

@media only screen and (max-width: 767px){
	
	.slick-slider.slick-initialized {
        padding-bottom: 70px;
    }
}



/* 
 * Service Carousel CSS 
 * */

.services-icon-box-carousel-wrap{
	overflow-x: clip;
}

.services-icon-box-carousel .slick-list{
/* 	margin: 0 -15px; */
}

.services-icon-box-carousel{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;
}

.services-icon-box-carousel .slick-slide{
	display: block;
/* 	margin: 0 15px; */
	height: auto;
	width: calc(33.33% - 20px)
}

.service-box{
	position: relative;
	display: flex;
	flex-direction: column;
    justify-content: flex-end;
	height: 100%;
	min-height: 460px;
	padding: 20px;
	transition: all 0.5s ease-in-out;
	z-index: 1;
	overflow: hidden;
}

.service-box:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: linear-gradient(180deg, rgba(5, 42, 34, 0.00) 0%, rgb(from var(--e-global-color-primary) r g b / 80%) 100%);
	transition: all 0.5s ease-in-out;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.service-box:hover:after,
.services-icon-box-carousel .slick-slide.slick-active.active .service-box:after,
.services-icon-disable-slider .slick-slide.active .service-box:after{
	bottom: auto;
	opacity: 0;
	visibility: hidden;
}

.service-box .service-box-content{
	position: relative;
	transition: all 0.3s ease-in-out;
}

.service-box:hover .service-box-content,
.services-icon-box-carousel .slick-slide.slick-active.active .service-box .service-box-content,
.services-icon-disable-slider .slick-slide.active .service-box .service-box-content{	
	opacity: 0;
	visibility: hidden;
}

.service-box .content-header{
	display: flex;
	flex-direction: column;
    gap: 30px;
}

.service-box .content-header .icon-wrapper{
	width: 60px;
	height: 60px;
	color: var(--white-color);
}

.service-box .content-header .icon-wrapper svg{
	width: 100%;
	height: 100%;
}

.service-box .elementor-widget-heading .elementor-heading-title{
	font-size: 24px;
	color: var(--white-color);
}

.service-box .hover-service-box-content{
	display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
	position: absolute;
    top: 100%;
    left: 0;
	right: 0;
	bottom: 0;
    background: rgb(from var(--e-global-color-primary) r g b / 40%);
    backdrop-filter: blur(5px);
    padding: 30px;
	margin: 20px;
	width: calc(100% - 40px);
    height: calc(100% - 40px);
	transition: all 0.5s ease-in-out;
	z-index: 1;
}

.service-box:hover .hover-service-box-content,
.services-icon-box-carousel .slick-slide.slick-active.active .service-box .hover-service-box-content,
.services-icon-disable-slider .slick-slide.active .service-box .hover-service-box-content{
	top: 0;
}

.service-box .content-body .service-desc{
	margin-top: 25px;
	margin-bottom: 0;
	color: var(--white-color);
}

.service-box .content-body .service-desc ul{
	list-style: none;
	padding-left: 0;
}

.service-box .content-body .service-desc ul li{
	position: relative;
	padding-left: 20px;
}

.service-box .content-body .service-desc ul li:before{
 	content: "\f058";
    position: absolute;
    top: 0;
    left: 0;
    font-family: "Font Awesome 5 Free";
    font-size: 12px;
    font-weight: 900;
    color: var(--e-global-color-secondary);
    width: 12px;
    height: 12px;
    transition: all 0.4s ease-in-out;
}

.service-box .content-body .service-btn{
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--white-color);
	font-weight: 600;
	margin-top: 25px;
}

.service-box .content-body .service-btn svg{
	width: 16px;
	height: auto;
	fill: var(--white-color);
}

/* Disable Carousel CSS */
.services-icon-disable-slider-wrap .services-icon-disable-slider {
    display: flex;
    flex-wrap: wrap;
	flex-direction: row;
    gap: 30px;
}

.services-icon-disable-slider .slick-slide{
	display: block;
    width: calc(33.33% - 20px);
	height: auto;
}

@media only screen and (max-width: 1024px){	
	
	.services-icon-box-carousel{
		flex-direction: column;
	}
	
/* 	.services-icon-box-carousel .slick-list{
		width: 100%;
	} */
	
	.services-icon-box-carousel .slick-slide{
		width: 100%;
	}
	
	.service-box .hover-service-box-content{
		padding: 20px;
	}
	
	.service-box .hover-service-box-content{
		padding: 20px;
	}

	/* Disable Carousel CSS */
	.services-icon-disable-slider .slick-slide {
		width: calc(50% - 15px);
	}
	
}

@media only screen and (max-width: 767px){
	
	.service-box .hover-service-box-content{
		margin: 30px;
		width: calc(100% - 60px);
		height: calc(100% - 60px);
	}
	
	/* Disable Carousel CSS */
	.services-icon-disable-slider-wrap{
		overflow-x: clip;
	}
	
	.services-icon-disable-slider .slick-list{
		margin: 0 -10px;
	}
	
	.services-icon-disable-slider.slick-initialized .slick-slide{
		margin: 0 10px;
	}
	
}

/* services accordion CSS */

.services-accordion-panel .panel-item,
.services-accordion-panel .panel-item a{
	height: 100%;
	display: inline-block;
}

.services-accordion-panel .panel-item a:hover,
.services-accordion-panel .panel-item a:focus{
	color: var(--e-global-color-accent);
}

.services-accordion-panel .panel-item .panel-image{
	position: relative;
	border-radius: 0;
	overflow: hidden;
	line-height: 0;
	height: 100%;
}

.services-accordion-panel .panel-item .panel-image:before{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgb(from var(--e-global-color-accent) r g b / 20%);
}

.services-accordion-panel .panel-item .panel-image img{
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
}

.services-accordion-panel .panel-item .panel-closed-title{
	transform: rotate(-90deg) translateY(50%);
	bottom: 0 !important;
	padding: 0 20px;
	z-index: 1;
}

.services-accordion-panel .panel-item .panel-closed-title h2,
.services-accordion-panel .panel-item .panel-open-contentbox h2{
	font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
    font-size: var(--e-global-typography-secondary-font-size);
    font-weight: var(--e-global-typography-secondary-font-weight);
    text-transform: var(--e-global-typography-secondary-text-transform);
    font-style: var(--e-global-typography-secondary-font-style);
    line-height: var(--e-global-typography-secondary-line-height);
	color: var(--white-color);
	margin: 0;
}

.services-accordion-panel .panel-item .panel-open-contentbox{
	padding: 20px 20px 40px 40px;
	right: 0;
	opacity: 0;
	z-index: 0;
}

.services-accordion-panel .panel-item .panel-open-contentbox h2{
	margin: 0 0 20px;
}

#services_accordion .as-pagination-buttons{
	display: none;
}


@media only screen and (max-width: 991px){
	
	.services-accordion-panel .panel-item .panel-closed-title{
		width: 100% !important;
        left: 0 !important;
        bottom: 50% !important;
        transform: rotate(0deg) translateY(50%);
        padding: 0 20px;
	}

	.services-accordion-panel .panel-item .panel-open-contentbox{
		padding: 20px;
	}
	
	.services-accordion-panel .panel-item .panel-closed-title{
/* 		width: 400px !important; */
	}

}


@media only screen and (max-width: 767px){

	.services-accordion-panel .panel-item .panel-open-contentbox h2{
		margin: 0 0 15px;
	}
	
	.services-accordion-panel .panel-item .panel-closed-title h2{
		font-size: 18px;
	}

	
	
}