Na}{

File Content: _carousel.scss

.pxl-swiper-slider:not(.pxl-swiper-initialized){
	.pxl-swiper-slider-wrap{
		visibility: hidden;
	}
}

//pxl-history-carousel
.pxl-history-carousel{
	&.layout-1{
		position: relative;
		user-select: none;
		.content-item{
			text-align: center;
		}
		.item-title{
			font-size: 28px;
			font-weight: 600;
			margin-bottom: 12px;
			@media (max-width: $xs_max) {
				font-size: 24px;
			}
		}
		.item-des{
			font-weight: 500;
			max-width: 378px;
			margin: 0 auto;
			@include text-truncate-multi-line(18px, 24px, $lines-to-show: 6);
			@media (max-width: $xs_max) {
				font-size: 16px;
				line-height: 22px;
				max-width: 330px;
			}
		}
		.pxl-button-more{
			margin-top: 52px;
			@media (max-width: $xs_max) {
				margin-top: 35px;
			}
			.pxl-icon{
				display: flex;
				overflow: hidden;
			}
			.btn-primary{
				gap: 5px;
				&:hover{
					i{
						animation: toTopFromBottom 0.4s forwards;
					}
				}
			}
		}
		.item-inner {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.pxl-swiper-container {
			padding: 35px 24px;
		}
		.item-slide{
			position: absolute;
			top: 64.5%;
			left: 50%;
			transform: translate(-50%, -50%);
			transition: width 1s, height 1s;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0;
			overflow: hidden;
			width: 460px;
			height: auto;
		}
		.pxl-swiper-wrapper{
			position: relative;
			top: 0;
			left: 0;
			overflow: visible;
			z-index: 2;
			height: 1580px;
			margin-bottom: -927px;
			@media (max-width: $lg_max) {
				margin-bottom: -966px;
			}
			@media (max-width: $md_max) {
				margin-bottom: -986px;
			}
			@media (max-width: $sm_max) {
				height: 1500px;
				margin-bottom: -1050px;
				.item-slide:nth-child(even)
				{
					.item-image{
						opacity: 0 !important;
						transition: all 300ms ease-in-out 0s;
					}
				}
			}
		}
		.box-pev-next{
			position: absolute;
			z-index: 10;
			left: 50%;
			bottom: 146px;
			transform: translate(-50%, 0);
			text-align: center;
			@media (max-width: $sm_max) {
				bottom: 0;
			}
			.text-pev-next{
				font-size: 12px;
				font-weight: 500;
				line-height: 2;
				text-transform: uppercase;
				position: relative;
				background: white;
				padding: 0 6px;
				display: inline-block;
				border-radius: 4px;
				&::after{
					content: '';
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, 0);
					width: 158px;
					height: 1px;
					background: linear-gradient(90deg, rgba(25, 27, 29, 0) 0%, rgba(25, 27, 29, 0.4) 50.5%, rgba(25, 27, 29, 0) 100%);
					z-index: -1;
				}
			}
		}
		.pxl-swiper-arrow{
			width: auto;
			height: auto;
			font-size: 44px;
			background-color: transparent;
			color: $heading_color;
		}
		.pxl-swiper-dots {
			display: flex;
			justify-content: center;
			margin-top: 20px;
		}
		.thumb-item{
			width: auto !important;
			transform: scale(0.5);
			opacity: 0;
			.item-year{	
				font-size: 18px;
				line-height: 30px;
				color: $body_color;
				@media (max-width: $xs_max) {
					font-size: 16px;
				}
			}
			&.active{
				opacity: 1;
				transform: scale(1);
				.item-year{	
					font-size: 28px;
					color: $heading_color;
					@media (max-width: $xs_max) {
						font-size: 24px;
					}
				}
			}
		}
		.thumb-item:has(+ .thumb-item.active), .thumb-item.active + .thumb-item
		{
			opacity: 1;
			transform: scale(1);
			transition: all 300ms ease-in-out 0s;
		}
		.pxl-thumbs-wrapper{
			gap: 25px;
		}
		.pxl-swiper-thumbs{
			max-width: 200px;
		}
		.pxl-swiper-slider-thumbs{
			margin-top: 14px;
		}
		.pxl-carousel-inner{
			padding-top: 78px;
			@media (max-width: $md_max) {
				padding-top: 30px;
			}
			@media (max-width: $xs_max) {
				padding-top: 0;
			}
		}
	}
}

.pxl-post-carousel{
	&.layout-post-1{
		.item-title{
			margin-bottom: 0;
			@include text-multi-line(28px, 1.25em, 2);
			a{
				@include multiline-hover-underline();
			}
			@media (max-width: $xs_max) {
				font-size: 22px;
			}
		}
		.item-meta{
			font-size: 16px;
			line-height: 35px;
			font-weight: 500;
			text-transform: capitalize;
			a{
				@include multiline-hover-underline($body_color);
			}
			.pxl-dash{
				position: relative;
				display: inline-block;
				width: 10px;
				height: 1px;
				background-color: var(--body-color);
				top: -5px;
				margin: 0 6px;
			}
		}
		.pxl-readmore{
			width: 60px;
            height: 60px;
            background-color: $primary_color;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
			opacity: 0;
			transform: translateX(-100%) rotate(-360deg);
            transition: all 0.5s ease-out;
			.pxl-icon{
				overflow: hidden;
			}
            i{
                font-size: 24px;
				color: $heading_color;
            }
            &:hover{
                color: initial;
                i{
                    animation: toTopFromBottom 0.4s forwards;
                }
            }
			@media (max-width: $sm_max) {
				width: 50px;
				height: 50px;
			}
        }
		.item-inner{
			margin-top: 22px;
			display: flex;
			justify-content: space-between;
			gap: 15px;
		}
		.item-featured {
			img{
				width: 100%;
				@media (max-width: $xs_max) {
					min-height: 400px;
					object-fit: cover;
				}
			}
		}
		.item-inner-wrap{
			&:hover{
				.pxl-readmore{
					transform: translateX(0) rotate(0);
					opacity: 1;
				}
			}
		}
		.pxl-swiper-slide:nth-child(odd){
			.item-inner-wrap{
				margin-top: 70px;
				@media (max-width: $md_max) {
					margin-top: 0;
				}
			}
		}
	}
}

.pxl-service-carousel{
	&.layout-services-1{
		.service-icon{
			svg{
				width: 60px;
				height: 60px;
				@include transition(all 350ms ease-in 0s);
				@media (max-width: $xs_max) {
					width: 40px;
					height: 40px;
				}
			}
		}
		.item-inner{
			margin-top: 30px;
			@media (max-width: $xs_max) {
				margin-top: 20px;
			}
		}
		.item-title{
			font-size: 24px;
			line-height: 20px;
			margin-bottom: 19px;
			a{
				@include multiline-hover-underline();
			}
			@media (max-width: $xs_max) {
				font-size: 20px;
				margin-bottom: 12px;
			}
		}
		.item-excerpt{
			max-width: 295px;
			color: #4B4B4B;
			@include text-multi-line(18px, 20px, 3);
			@media (max-width: $xs_max) {
				font-size: 16px;
			}
		}
		.pxl-readmore{
			font-size: 16px;
			font-weight: 500;
			color: $heading_color;
			border: 1px solid $border-color;
			padding: 11px 19px;
			gap: 6px;
			margin-top: 37px;
			position: relative;
			@include transition(all 250ms linear 0s);
			&::before{
				content: "";
				position: absolute;
				left: 0;
				bottom: 0;
				right: 0;
				top: 0;
				background-color: $heading_color;
				transform-origin: bottom left;
				@include transition(all 250ms linear 0s);
				@include transform(scale(0));
				z-index: -1;
			}
			i{
				font-size: 20px;
			}
			.pxl-icon{
				overflow: hidden;
			}
			&:hover{
				color: #fff;
				&::before{
					@include transform(scale(1));
				}
				i{
					color: $primary_color;
					animation: toTopFromBottom 0.4s forwards;
				}
			}
			@media (max-width: $xs_max) {
				margin-top: 25px;
			}
		}
		.pxl-divider{
			display: block;
			background-color: $border-color;
			width: 100%;
			height: 1px;
			margin: 20px 0;
			position: relative;
			&::before{
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 0;
				height: 100%;
				background-color: $heading_color;
				transition: all 350ms ease-in 0s;
			}
			@media (max-width: $xs_max) {
				max-width: 300px;
			}
		}
		.service-category{
			gap: 5px;
			a{
				color: $heading_color;
				font-size: 14px;
				line-height: 20px;
				font-weight: 500;
				text-transform: uppercase;
				border-radius: 4px;
				background-color: rgba(0, 0, 0, 0.04);
				padding: 1px 8px;
				transition: all 350ms ease 0s;
				&:hover{
					background-color: $primary_color;
				}
			}
		}
		.item-inner-wrap{
			&:hover{
				.pxl-divider{
					&::before{
						width: 100%;
					}
				}
				svg{
					transform: scale(1.03) translateY(3px);
				}
			}
		}
	}
	&.layout-services-2{
		.item-title{
			font-weight: 400;
			text-transform: capitalize;
			max-width: 270px;
			@include text-truncate-multi-line(40px, 45px, 2);
			margin-bottom: 12px;
			@media (max-width: $sm_max) {
				@include text-truncate-multi-line(35px, 40px, 2);
			}
			@media (max-width: $xs_max) {
				@include text-truncate-multi-line(28px, 35px, 2);
			}
			a{
				color: inherit;
				transition: all 350ms ease-in-out;
				text-decoration: underline transparent 2px;
				&:hover{
					    text-decoration: underline var(--heading-color) 2px;
				}
			}
		}
		.item-excerpt{
			@include text-truncate-multi-line(20px, 1.5, 3);
			@media (max-width: $xs_max) {
				@include text-truncate-multi-line(16px, 1.5, 3);
			}
		}
		.pxl-swiper-slide{
			border-right: 1px solid #C9BCD9;
			transition: all 350ms ease-in-out;
			&:hover{
				border-color: transparent;
				border-radius: 20px;
			}
		}
		.item-inner{
			padding: 42px 44px 50px 50px;
			border-radius: 20px;
			min-height: 526px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			overflow: hidden;
			transition: all 350ms ease-in-out;
			@media (max-width: $sm_max) {
				padding: 30px 25px 30px 25px;
				min-height: 450px;
			}
			@media (max-width: $xs_max) {
				padding: 30px 25px 30px 25px;
				min-height: 400px;
				border-radius: 12px;
			}
			&::before{
				content: "";
				position: absolute;
				width: 360px;
    			height: 360px;
				left: 0;
				bottom: -104px;
				background-repeat: no-repeat;
				background-position: left bottom;
				@media (max-width: $sm_max) {
					width: 250px;
					height: 250px;
					background-size: cover;
				}
			}
			&:hover{
				&::before{
					animation: sk-rotate 0.8s forwards;
					background-image: url(../images/circle-service-2.png);
				}
				background-color: $primary_color;
				.btn-secondary{
					background-color: $heading_color;
					padding: 0px 30px;
					border-radius: 50px;
					@media (max-width: $sm_max) {
						padding: 0px 15px;
					}
					.pxl-icon{
						transform: rotate(90deg);
					}
					i{
						color: $primary_color;
					}
				}
			}
		}
		.service-readmore{
			display: flex;
			justify-content: end;
			.btn-secondary{
				height: 60px;
				min-width: 119px;
				transition: all 350ms ease-in-out;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				background-color: transparent;
				@media (max-width: $sm_max) {
					height: 52px;
					min-width: 90px;
				}
				.pxl-icon{
					transform: rotate(60deg);
					transition: all 350ms ease-in-out;
				}
				i{
					color: $heading_color;
					font-size: 71px;
					transition: all 350ms ease-in-out;
					@media (max-width: $sm_max) {
						font-size: 50px;
					}
				}
				&:hover{
					.su-button-effect{
						background-color: #E5DEED;
					}
					background-color: #E5DEED;
					i{
						color: $heading_color;
					}
				}
			}
		}
	}
}

.pxl-logo-marquee1 {
    position: relative;
    overflow: hidden;
	.pxl-flex-middle {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
    .pxl-item--marquee {
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
        opacity: 0;
    }
    .pxl-logo-hidden {
        flex-wrap: nowrap;
        opacity: 0;
        visibility: hidden;
        white-space: nowrap;
    }
    .pxl-logo-hidden-wrap {
        overflow: hidden;
    }
    .pxl-logo-active {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        .pxl-item--marquee {
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            padding: 0;
			width: max-content;
        }
    }
    .pxl-item--logo {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        text-align: center;
		margin: 0 50px;
        font-size: 220px;
        line-height: 1;
		background: linear-gradient(180deg, rgba(45, 45, 44, 0.18) -11.27%, rgba(45, 45, 44, 0) 79.58%);
		-webkit-background-clip: text;
		color: transparent;
		@media (max-width: $lg_max) {
			font-size: 180px;
		}
		@media (max-width: $md_max) {
			font-size: 140px;
			margin: 0 35px;
		}
		@media (max-width: $sm_max) {
			font-size: 100px;
			margin: 0 20px;
		}
		@media (max-width: $xs_max) {
			font-size: 60px;
		}
	}
	.pxl-item--inner {
		flex-wrap: nowrap;
		display: inline-flex;
		width: 100%;
	}
}

//pxl-testimonial-carousel
.pxl-testimonial-carousel{
	&.layout-1{
		// .pxl-thumbs-wrapper{
		// 	.thumb-item{
		// 		width: auto !important;
		// 	}
		// }
		.item-inner{
			.item-image {
				border-radius: 50%;
				overflow: hidden;
				border: 2px solid #fff;
				transition: all 350ms ease-in-out 0s;
			}
		}
		.pxl-swiper-slider-wrap{
			max-width: 405px;
			margin: 38px auto 31px;
			user-select: none;
			.pxl-swiper-slide{
				transition: transform 0.25s ease, left 0.25s ease;
				.item-image {
					transform: scale(0.5073);
				}
				&.swiper-slide-active{
					.item-info-wrap{
						opacity: 1;
						> *{
							opacity: 1;
							transform: translateY(0);
						}
					}
					.item-image {
						transform: scale(1);
					}
				}
				&.swiper-slide-prev, &.swiper-slide-next{
					.item-image {
						transform: scale(0.7971);
					}
				}
			}
			.custom-next-after-prev {
				transform: translateX(17px);
			}
			.custom-prev-before-next{
				transform: translateX(-17px);
			}
			.item-name{
				font-size: 16px;
				line-height: 25px;
				font-weight: 600;
				color: #fff;
				text-transform: capitalize;
				margin-bottom: -3px;
			}
			.item-position{
				color: rgba(255, 255, 255, 0.5);
				font-size: 14px;
				font-weight: 500;
				text-transform: uppercase;
			}
		}
		.item-info-wrap{
			margin-top: 6px;
			display: flex;
			flex-direction: column;
			white-space: nowrap;
			opacity: 0;
			transition: all 350ms ease-in-out 0s;
			> *{
				opacity: 0;
				transform: translateY(10px);
				transition: all 350ms ease-in-out 0s;
				&:nth-child(1) {
					transition-delay: 120ms;
				}
				&:nth-child(2) {
					transition-delay: 180ms;
				}
			}
		}
		.item-description{
			max-width: 395px;
			font-weight: 300;
			color: $heading_color;
			@include text-truncate-multi-line(22px, 30px, 6);
		}
		.swiper-slide-thumb-active{
			@media (max-width: $xs_max) {
				.thumbs-wrap{
					opacity: 1;
				}
			}
		}
		.thumbs-wrap{
			background-color: #fff;
			border-radius: 30px;
			justify-content: space-between;
			overflow: hidden;
			gap: 20px;
			@media (max-width: $xs_max) {
				flex-direction: column;
				opacity: 0;
				transition: all 350ms ease-in-out 0s;
			}
			.thumbs-image{
				overflow: hidden;
			}
			img{
				@include transition(all 0.5s);
				-webkit-transform: scale(1.05) translateX(-3px);
				transform: scale(1.05) translateX(-3px);
				-webkit-backface-visibility: hidden;
				backface-visibility: hidden;
				@media (max-width: $xs_max) {
					width: 100%;
					max-height: 300px;
					object-fit: cover;
				}
			}
			&:hover{
				img{
					@include scale-image-y-left();
				}
			}
			.thumbs-content{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 42px 0 38px 40px;
				gap: 20px;
				@media (max-width: $sm_max) {
					padding: 30px 0 25px 25px;
				}
				@media (max-width: $sm_max) {
					padding: 30px 20px 10px 20px;
				}
			}
			.thumbs-name-position{
				flex-direction: column;
			}
			.thumbs-name{
				font-size: 24px;
				line-height: 35px;
				font-weight: 600;
				color: $heading_color;
				text-transform: capitalize;
			}
			.thumbs-position{
				color: #666666;
				font-size: 14px;
				text-transform: uppercase;
			}
		}
		.content-title{
			font-size: 55px;
			line-height: 58px;
			color: #ffffff;
			max-width: 502px;
			margin: 0 auto;
			text-align: center;
			text-transform: capitalize;
		}
	}
	&.layout-2{
		background-color: #fff;
		border-radius: 25px;
		padding: 46px 34px 60px 34px;
		height: 480px;
		@media (max-width: $sm_max) {
			padding: 40px 15px 55px 15px;
			height: 450px;
		}
		@media (max-width: $xs_max) {
			height: auto;
			gap: 20px;
        	flex-direction: column-reverse;
			padding: 40px 10px 55px 10px;
		}
		.item-rating{
			font-size: 22px;
			@media (max-width: $xs_max) {
				font-size: 18px;
			}
			i{
				color: #F9BC2F;
			}
		}
		.item-rating-star{
			margin-bottom: 10px;
		}
		.item-des{
			font-weight: 300;
			color: $heading_color;
			max-width: 488px;
			display: inline-block;
			@include text-multi-line(28px, 40px, 6);
			@media (max-width: $sm_max) {
				font-size: 24px;
				line-height: 35px;
			}
			@media (max-width: $xs_max) {
				font-size: 20px;
				line-height: 30px;
			}
		}
		.thumbs-image{
			margin-bottom: 15px;
			img{
				border-radius: 50%;
				@media (max-width: $xs_max) {
					width: 50px;
					height: 50px;
				}
			}
			
		}
		.thumbs-content{
			.thumbs-name{
				font-size: 20px;
				font-weight: 700;
				color: $heading_color;
				margin-bottom: -2px;
				@media (max-width: $xs_max) {
					font-size: 18px;
				}
			}
			.thumbs-position{
				font-size: 14px;
				font-weight: 500;
			}
		}
		.pxl-swiper-slider-wrap{
			border-right: 1px solid $third_color;
			@media (max-width: $xs_max) {
				width: 100%;
				border: none;
			}
		}
		.pxl-swiper-slider-thumbs{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			gap: 35px;
			padding-left: 40px;
			@media (max-width: $sm_max) {
				padding-left: 20px;
			}
			@media (max-width: $xs_max) {
				width: 100%;
				padding-left: 15px;
			}
			.thumb-item{
				.thumbs-content{
					opacity: 0;
					transition: opacity 300ms ease-in-out;
				}
				&.swiper-slide-thumb-active{
					.thumbs-content{
						opacity: 1;
					}
				}
			}
		}
	}
}

//pxl-clients
.pxl-clients{
	&.layout-2{
		.pxl-swiper-slider-wrap{
			&::before{
				content: '';
				position: absolute;
				background: linear-gradient(90deg, #1F2E07 0%, rgba(31, 46, 7, 0) 30%, rgba(31, 46, 7, 0) 70%, #1F2E07 100%);
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
			    z-index: 1;
			}
		}
	}
}
//pxl-wheel-carousel
.pxl-wheel-carousel{
	&.layout-1{
		display: flex;
    	justify-content: center;
		.box-inner{
			position: relative;
			width: 717px;
			height: 717px;
			@include border-radius(50%);
			&::before{
				content: "";
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				padding: 3px;
				background: linear-gradient(-90deg, #8CC633 0%, #ECECDE 75%);
				-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
				mask-composite: exclude;
				pointer-events: none;
				border-radius: 50%;
			}
		}
		.inner-item{
			width: 100%;
			height: 100%;
			z-index: 1;
			position: relative;
		}
		.item-content{
			display: inline-block;
		}
		.pxl-wheel-icon {
			overflow: visible;
			z-index: 0;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			fill: transparent;
		}
		.box-wheel {
			width: 50px;
			height: 50px;
			color: #979797;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			position: relative;
			z-index: 1;
			background-color: #F5F7EE;
			opacity: 0;
			transition: opacity 0.4s ease-in-out;
			font-weight: bold;
			cursor: pointer;
			&.active {
				background-color:$primary_color;
				color: #fff;
			}
			&.active, &.next, &.prev{
				opacity: 1;
			}
		}
		.box-image-title{
			position: absolute;
			z-index: 1;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			min-width: 494px;
			text-align: center;
			&::after{
				content: "";
				position: absolute;
				width: 311px;
				height: 311px;
				background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(236, 236, 222, 0.5) 100%);
			    top: -58px;
				left: 50%;
				transform: translateX(-50%);
				border-radius: 50%;
				z-index: -1;
				@media (max-width: $xs_max) {
					content: none;
				}
			}
			.box-image {
				position: relative;
				width: auto;
				height: auto;
				overflow: hidden;
				margin-bottom: 21px;
				@media (max-width: $xs_max) {
					img{
						width: 70px;
						height: 70px;
					}
				}
			}
			.item-image{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
				transform: scale(0.8);
				transition: all 0.3s ease-in-out;
				&.active{
					opacity: 1;
					transform: scale(1);
					position: relative;
				}
			}
			.item-title{
				font-size: 60px;
				line-height: 80px;
				text-transform: none;
				margin: auto;
			}
		}
	}
}

//
.dark-mode{
	.pxl-history-carousel{
		.box-pev-next .text-pev-next{
			background: #191B1D;
		}
	}
	.pxl-service-carousel.layout-services-2{
		.item-inner:hover::before{
			background-image: url(../images/img-brandingdark5.png);
		}
	}
}

Name	Size	Permission
_basic.scss	45693 bytes	0644
_carousel.scss	21992 bytes	0644
_grid.scss	14365 bytes	0644
_list.scss	6012 bytes	0644
_slider.scss	7318 bytes	0644
elements.scss	92 bytes	0644