Sid Gifari Advanced File Manager

✏️ Editing: testimonial.scss

/*--------------------------------------------------------------
TESTIMONIALS GRID
----------------------------------------------------------------
# Testimonial Grid
# Testimonial Carousel
--------------------------------------------------------------*/

// Testimonial Grid
.pxl-testimonial-grid1 {
	.pxl-item--avatar {
		width: 96px;
		position: absolute;
		top: -34px;
		left: 35px;
		z-index: 99;
		img {
			border-radius: 96px;
		}
		.pxl-item--icon {
			width: 42px;
			height: 42px;
			direction: inline-flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 28px;
			background-color: $primary_color;
			border-radius: 42px;
			position: absolute;
			top: -13px;
			left: -7px;
		}
	}
	.pxl-item--star {
		text-align: right;
 		font-size: 18px;
 		color: #FC5C2E;
 		margin-bottom: 24px;
	}
	.pxl-item--desc {
		font-size: 18px;
		color: rgba(#01062E, 0.8);
		margin-bottom: 21px;
		@include transition(all 300ms linear 0ms);
	}
	.pxl-item--title {
		font-size: 20px;
		font-weight: 700;
		color: #01062E;
		@extend .ft-theme-default;
		@include transition(all 300ms linear 0ms);
	}
	.pxl-item--position {
		font-size: 14px;
		color: #01062E;
	}
	.pxl-item--inner {
		margin-top: 50px;
		margin-bottom: 30px;
		position: relative;
		background-color: #fff;
		padding: 38px 30px 40px 30px;
		box-shadow: 0 0 20px rgba(#0c0c0c, 0.06);
		@include transition(all 300ms linear 0ms);
		z-index: 1;
		&:before {
			content: '';
			z-index: -1;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border: 3px solid $primary_color;
			@include transition(all 300ms linear 0ms);
			opacity: 0;
		}
		&:hover {
			box-shadow: 0 0 30px #{'rgba(var(--primary-color-rgb),0.25)'};
			&:before {
				opacity: 1;
			}
		}
	}
}

// Testimonial Carousel
.pxl-testimonial-carousel1 {
	margin-top: -50px;
	.pxl-item--avatar {
		min-width: 57px;
		position: relative;
		img {
			border-radius: 57px;
		}
		.pxl-item--icon {
			line-height: 1;
			position: absolute;
			top: -27px;
			left: -37px;
			font-size: 40px;
			color: #d9dade;
		}
	}
	.pxl-item--desc {
		font-size: 20px;
		line-height: 1.2;
		margin-bottom: 11px;
		font-style: italic;
		@media #{$max-lg} {
			font-size: 18px;
		}
	}
	.pxl-item--title {
		font-size: 16px;
		color: #01062e;
		font-weight: 700;
		@extend .ft-theme-default;
	}
	.pxl-item--position {
		font-size: 14px;
		color: #717171;
	}
	.pxl-item--inner {
		align-items: inherit;
		background-color: #fff;
		margin-top: 50px;
		margin-bottom: 50px;
		padding: 45px 50px 45px 80px;
		border-radius: 10px;
		@include transition(all 300ms linear 0ms);
		@media #{$max-xxl} {
			padding-left: 60px;
			padding-right: 40px;
		}
		@media #{$max-lg} {
			padding-left: 50px;
			padding-right: 20px;
		}
	}
	.swiper-slide-active .pxl-item--inner {
		box-shadow: 0 4px 36px rgba(#17191a, 0.08);
	}
	.pxl-swiper-dots.style-2.pxl-swiper-pagination-bullets {
		margin-top: 0px;
		top: -69px;
	}
}

.pxl-testimonial-carousel2 {
	.pxl-item--avatar {
		width: 96px;
		position: absolute;
		top: -34px;
		left: 35px;
		z-index: 99;
		img {
			border-radius: 96px;
		}
		.pxl-item--icon {
			width: 42px;
			height: 42px;
			direction: inline-flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 18px;
			background-color: $primary_color;
			border-radius: 42px;
			position: absolute;
			top: -13px;
			left: -7px;
		}
	}
	.pxl-item--star {
		text-align: right;
 		font-size: 17px;
 		color: $primary_color;
 		margin-bottom: 24px;
	}
	.pxl-item--desc {
		font-size: 16px;
		font-weight: 500;
		color: #58595f;
		margin-bottom: 21px;
		@include transition(all 300ms linear 0ms);
	}
	.pxl-item--title {
		font-size: 20px;
		font-weight: 700;
		color: #01062e;
		@extend .ft-theme-default;
		@include transition(all 300ms linear 0ms);
	}
	.pxl-item--position {
		font-size: 14px;
		color: $primary_color;
	}
	.pxl-item--inner {
		margin-top: 50px;
		margin-bottom: 30px;
		position: relative;
		background-color: #fff;
		padding: 38px 34px 40px 34px;
		box-shadow: 0 11px 16px rgba(#0c0c0c, 0.06);
		z-index: 1;
		&:before {
			content: '';
			z-index: -1;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #15333d;
			border: 8px solid $primary_color;
			@include transition(all 300ms linear 0ms);
			opacity: 0;
			background-image: url(../img/testimonial-overlay.png);
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
		}
		&:hover {
			&:before {
				opacity: 1;
			}
			.pxl-item--title, .pxl-item--desc {
				color: #fff;
			}
		}
	}
}

.pxl-testimonial-carousel3 {
	.pxl-item--avatar {
		margin-bottom: 32px;
		img {
			border-radius: 100px;
		}
	}
	.pxl-item--title {
		@extend .ft-theme-default;
		font-size: 28px;
		font-weight: 700;
		color: #01062e;
		@media #{$max-lg} {
			font-size: 24px;
		}
		@media #{$max-sm} {
			font-size: 20px;
		}
	}
	.pxl-item--position {
		font-size: 21px;
		color: #545454;
		@media #{$max-lg} {
			font-size: 18px;
		}
	}
	.pxl-item--desc {
		font-size: 36px;
		color: #01062e;
		line-height: 1.33333333;
		margin-bottom: 88px;
		padding: 0 90px;
		position: relative;
		font-style: italic;
		@media #{$max-xl} {
			font-size: 32px;
		}
		@media #{$max-lg} {
			font-size: 30px;
			padding-right: 30px;
			padding-left: 60px;
		}
		@media #{$max-sm} {
			font-size: 24px;
			padding-right: 15px;
			padding-left: 40px;
		}
		.pxl-item--icon {
			position: absolute;
			top: -12px;
			left: 0;
			font-size: 60px;
			line-height: 1;
			color: #e7e7e7;
			@media #{$max-lg} {
				font-size: 40px;
				left: 15px;
			}
			@media #{$max-sm} {
				font-size: 30px;
			}
		}
	}
	.pxl-item--inner {
		text-align: center;
		margin-top: 20px;
	}
	&.pxl-swiper-center {
		.pxl-item--inner {
			opacity: 0.3;
			@include transition(all 300ms linear 0ms);
		}
		.swiper-slide-visible.swiper-slide-active .pxl-item--inner {
			opacity: 1;
		}
	}
	.pxl-swiper-dots.style-2.pxl-swiper-pagination-progressbar {
		@media #{$max-lg} {
			max-width: 680px;
		}
		@media #{$max-sm} {
			max-width: 290px;
		}
	}
}

.pxl-testimonial-carousel4 {
	.pxl-item--avatar {
		position: relative;
		min-width: 235px;
		background-position: top center;
		border-radius: 10px 0 0 10px;
		@media #{$max-sm} {
			min-width: 100%;
			width: 100%;
			min-height: 360px;
			border-radius: 10px 10px 0 0;
		}
	}
	.pxl-box--icon {
		font-size: 32px;
		color: #fff;
		width: 64px;
		height: 64px;
		border-radius: 8px;
		background-color: $primary_color;
		top: 41px;
		left: -32px;
		position: absolute;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		@media #{$max-xl} {
			left: -22px;
		}
		@media #{$max-sm} {
			left: 30px;
			top: 30px;
		}
		svg {
			height: 34px;
			width: auto;
			fill: #fff;
		}
	}
	.pxl-item--holder {
		flex-grow: 1;
		padding: 50px 50px 43px 50px;
		background-color: #fff;
		position: relative;
		z-index: 1;
		@media #{$max-lg2} {
			padding-left: 35px;
			padding-right: 30px;
		}
		@media #{$max-sm} {
			padding-bottom: 90px;
		}
		&:before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			width: 100px;
			z-index: -1;
			@include background-horizontal(#e1e1e1, rgba(#e1e1e1, 0));
			background-color: transparent;
		}
	}
	.pxl-item--desc {
		font-size: 24px;
		line-height: 1.416;
		color: #060606;
		font-weight: 500;
		border-bottom: 1px solid #e0dfdf;
		padding-bottom: 28px;
		margin-bottom: 14px;
	}
	.pxl-item--title {
		font-size: 20px;
		color: #2c2c2c;
		margin-bottom: 0;
	}
	.pxl-item--position {
		font-size: 15px;
		color: #737272;
	}
	.pxl-item--icon {
		font-family: 'Crimson Text', serif;
		font-size: 100px;
		line-height: 0;
		color: $primary_color;
		margin-bottom: 2px;
		margin-top: 37px;
	}
	.pxl-item--inner {
		display: flex;
		flex-wrap: nowrap;
		@media #{$max-sm} {
			flex-wrap: wrap;
		}
	}
	.pxl-swiper-arrow-wrap {
		margin: 0;
		position: absolute;
		bottom: 0;
		right: 50px;
		z-index: 99;
		@media #{$max-sm} {
			right: 0;
		}
	}
}

.pxl-testimonial-carousel5 {
	.pxl-item--avatar {
		margin-bottom: 32px;
		img {
			border-radius: 100px;
			border: 6px solid #fff; 
		}
	}
	.pxl-item--title {
		font-size: 25px;
		margin-bottom: 0;
		span {
			@extend .text-gradient;
		}
	}
	.pxl-item--position {
		font-size: 16px;
		color: #01062e;
	}
	.pxl-item--desc {
		padding-left: 60px;
		font-size: 17px;
		position: relative;
		color: #5d5d5d;
		line-height: 1.647;
		margin-bottom: 19px;
	}
	.pxl-item--icon {
		position: absolute;
		top: -8px;
		left: 5px;
		font-size: 48px;
		line-height: 1;
		transform: scale(-1);
		color: $gradient_color_to;
	}
	.pxl-item--inner {
		text-align: center;
		padding: 41px 44px 36px 28px;
		background-color: #f8fbfe;
		@media #{$max-sm} {
			padding-left: 24px;
			padding-right: 24px;
		}
	}
	.pxl-swiper-dots.style-5.pxl-swiper-pagination-bullets {
		padding-top: 25px;
	}
	@media #{$min-xl} {
		padding: 0 110px;
		.pxl-swiper-arrow-wrap.style-4 .pxl-swiper-arrow {
			position: absolute;
			top: 50%;
			transform: translate(0, -50%);
			margin: -33px 0 0;
			&.pxl-swiper-arrow-prev {
				left: 0;
			}
			&.pxl-swiper-arrow-next {
				right: 0;
			}
		}
	}
}

.pxl-testimonial-carousel6 {
	.pxl-item--avatar {
		display: inline-block;
		position: relative;
		margin-bottom: 38px;
		img {
			border-radius: 132px;
			box-shadow: 0 7px 27px rgba(#41138a, 0.25);
		}
		.pxl-item--icon {
			width: 48px;
			height: 48px;
			border-radius: 12px;
			@include background-horizontal($gradient_color_from, $gradient_color_to);
			position: absolute;
			bottom: 0;
			right: -3px;
			font-size: 16px;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			border-radius: 48px;
			border: 3px solid #fff;
		}
	}
	.pxl-item--desc {
		font-size: 16px;
		color: #706e8b;
		margin-bottom: 32px;
		max-width: 500px;
		margin-left: auto;
		margin-right: auto;
	}
	.pxl-item--title {
		margin-bottom: 4px;
		font-size: 24px;
		color: #1f2025;
	}
	.pxl-item--position {
		font-size: 15px;
		color: #7f7d9b;
		margin-bottom: 15px;
	}
	.pxl-item--inner {
		text-align: center;
		padding-top: 170px;
	}
	.pxl-swiper-arrow-wrap.style-3 .pxl-swiper-arrow {
		margin: 0 8px;
	}
	.pxl-carousel-inner {
		position: relative;
	}
	.pxl-swiper-thumbs {
		overflow: visible;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 99;
		@media #{$max-sm} {
			display: none;
		}
		.pxl-item--thumb {
			position: absolute;
			img {
				box-shadow: 0 4px 27px rgba(#4837ef, 0.2);
			}
			@include transition(all 300ms linear 0ms);
			&:hover {
				transform: scale(1.05);
			}
		}
		.pxl-swiper-slide {
			padding: 0;
			position: absolute;
			height: auto;
			&:nth-child(1) {
				top: 90px;
				left: 75px;
				width: 34px;
				height: 34px;
				.pxl-item--thumb {
					img {
						border-radius: 34px;
					}
				}
			}
			&:nth-child(2) {
				width: 74px;
				left: 0;
				top: 45%;
				height: 74px;
				.pxl-item--thumb {
					img {
						border-radius: 74px;
					}
				}
			}
			&:nth-child(3) {
				width: 49px;
				left: 88px;
				bottom: 20px;
				height: 49px;
				.pxl-item--thumb {
					img {
						border-radius: 49px;
					}
				}
			}
			&:nth-child(4) {
				width: 74px;
				top: 20px;
				right: 55px;
				height: 74px;
				.pxl-item--thumb {
					img {
						border-radius: 74px;
					}
				}
			}
			&:nth-child(5) {
				width: 70px;
				top: 52%;
				right: 10px;
				height: 70px;
				.pxl-item--thumb {
					img {
						border-radius: 70px;
					}
				}
			}
			&:nth-child(6) {
				width: 48px;
				right: 120px;
				bottom: 34px;
				height: 48px;
				.pxl-item--thumb {
					img {
						border-radius: 48px;
					}
				}
			}
		}
	}
}

//RTL
body.rtl {
    .pxl-testimonial-carousel1 .pxl-item--avatar .pxl-item--icon {
    	left: auto;
    	right: -37px;
    	transform: scaleX(-1);
    }
}

📁 File Manager Pro