.ct-portfolio-grid1, .ct-portfolio-carousel1 {
	.item--featured {
		&:before {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 75%;
			@include background-gradient-top(rgba(#000409, 0.85) 45%, rgba(#000409, 0));
			opacity: 0;
			@include transition(.3s cubic-bezier(.24,.74,.58,1));
		}
		img {
			width: 100%;
		}
	}
	.item--title {
		margin-bottom: 5px;
		color: #fff;
		font-size: 24px;
		letter-spacing: 0.05em;
		@include transition(.3s cubic-bezier(.24,.74,.58,1));
		@include transform(translateY(40px));
		opacity: 0;
		@media #{$max-lg} {
			font-size: 20px;
		}
		a {
			color: inherit;
			&:hover {
				color: inherit;
			}
		}
	}
	.item--category {
		font-size: 14px;
		color: #cdcccc;
		@include transition(.3s cubic-bezier(.24,.74,.58,1));
		@include transform(translateY(40px));
		opacity: 0;
		a {
			color: inherit;
			&:hover {
				color: inherit;
			}
		}
	}
	.item--holder {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 28px 65px 28px 28px;
		@media #{$max-sm} {
			padding-left: 20px;
		}
	}
	.item--readmore {
		a {
			font-size: 30px;
			text-align: center;
			line-height: 41px;
			width: 41px;
			height: 41px;
			border-radius: 41px;
			position: absolute;
			bottom: 31px;
			right: 24px;
			@include box-shadow(none !important);
			color: $secondary_color;
			@include background-gradient-button(90deg, $gradient_color_from 0%, $gradient_color_to 50%, $gradient_color_from);
			background-size: 300%, 1px;
			background-position: 0%;
			font-family: 'Poppins', sans-serif;
			font-weight: 400;
			@include transform(scale(0) rotate(0deg));
			opacity: 0;
			&:hover, &:focus {
				color: $secondary_color;
				background-position: 100%;
			}
		}
	}
	.grid-item-inner {
		@include border-radius(7px);
		overflow: hidden;
		position: relative;
		margin-bottom: 45px;
		&:hover {
			.item--featured:before {
				opacity: 1;
			}
			.item--title, .item--category {
				@include transform(translateY(0px));
				opacity: 1;
			}
			.item--title {
				-webkit-transition-delay: 0.08s;
		        -moz-transition-delay: 0.08s;
		        transition-delay: 0.08s;
			}
			.item--category {
				-webkit-transition-delay: 0.18s;
		        -moz-transition-delay: 0.18s;
		        transition-delay: 0.18s;
			}
			.item--readmore a {
				@include transform(scale(1) rotate(360deg));
				opacity: 1;
				-webkit-transition-delay: 0.26s;
	            -moz-transition-delay: 0.26s;
	            transition-delay: 0.26s;
			}
		}
	}
}

.ct-portfolio-carousel1 {
	.grid-item-inner {
		margin-bottom: 0;
	}
}

.ct-portfolio-carousel2 {
	.item--featured {
		img {
			width: 100%;
			-webkit-filter: grayscale(100%);
        	filter: grayscale(100%);
        	@include transition(.3s cubic-bezier(.24,.74,.58,1));
		}
	}
	.item--meta {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #262626;
		padding: 22px 20px;
		text-align: center;
		opacity: 0;
		@include transition(.3s cubic-bezier(.24,.74,.58,1));
		z-index: 99;
		overflow: hidden;
		svg {
			z-index: -1;
			position: absolute;
			bottom: -1px;
			right: -1px;
			@include transform(translate3d(40px,40px,40px));
			@include transition(.3s cubic-bezier(.24,.74,.58,1));
		}
	}
	.item--category {
		font-size: 15px;
		color: #e2e1e1;
		margin-bottom: 11px;
		a {
			color: inherit;
			&:hover {
				color: inherit;
			}
		}
	}
	.item--title {
		margin-bottom: 0;
		font-size: 24px;
		line-height: 26px;
		letter-spacing: 0.01em;
		color: #fff;
		position: relative;
		padding-bottom: 16px;
		&:before {
			content: '';
			width: 47px;
			height: 2px;
			@include background-horizontal-right($gradient_color_from, $gradient_color_to);
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
		}
		a {
			color: inherit;
			&:hover {
				color: inherit;
				text-decoration: underline;
				text-decoration-thickness: 1px;
			}
		}
	}
	.item--zoom {
		width: 65px;
		height: 65px;
		background-color: #fff;
		line-height: 65px;
		text-align: center;
		@include border-radius(65px);
		font-size: 22px;
		color: $secondary_color;
		position: absolute;
		top: 15px;
		right: 15px;
		z-index: 99;
		@include transform(scale(0) rotate(360deg));
		&:hover {
			background-color: $primary_color;
			color: $secondary_color;
		}
	}
	.grid-item-inner {
		margin-bottom: 75px;
		position: relative;
		&:hover {
			.item--meta {
				opacity: 1;
				@include transform(translateY(75px));
			}
			.item--featured img {
				-webkit-filter: grayscale(0%);
        		filter: grayscale(0%);
			}
			.item--meta svg {
				@include transform(translate3d(0px, 0px, 0px));
				-webkit-transition-delay: 0.1s;
		        -moz-transition-delay: 0.1s;
		        transition-delay: 0.1s;
			}
			.item--zoom {
				@include transform(scale(1) rotate(0deg));
				-webkit-transition-delay: 0.16s;
		        -moz-transition-delay: 0.16s;
		        transition-delay: 0.16s;
			}
		}
	}
	.ct-slick-arrow-center {
		.slick-arrow {
			margin-top: -35px;
			@media #{$min-xxxl} {
				height: 70px;
				width: 70px;
				border: 2px solid #c7c7c7;
				background-color: rgba(#fff, 0.67);
				color: $secondary_color;
				&:hover {
					border-color: $secondary_color;
					background-color: $secondary_color;
					&:before {
						color: $primary_color;
					}
				}
				&:before {
					font-size: 14px;
				}
			}
			@media #{$max-xxl} {
				&:hover {
					background-color: $secondary_color;
				}
			}
			&.slick-prev {
				left: -20px;
				@media #{$min-xxxl} {
					left: -135px;
				}
				@media #{$max-xxl} {
					left: 0;
					opacity: 0;
				}
			}
			&.slick-next {
				right: -20px;
				@media #{$min-xxxl} {
					right: -135px;
				}
				@media #{$max-xxl} {
					right: 0;
					opacity: 0;
				}
			}
			@media #{$max-xxl} {
				position: absolute;
			}
		}
		@media #{$max-xxl} {
			&:hover .slick-arrow {
				&.slick-prev {
					left: 30px;
					opacity: 1;
				} 
				&.slick-next {
					right: 30px;
					opacity: 1;
				}
			}
		}
	}
}

.ct-portfolio-carousel3 {
	.item--featured {
		position: relative;
		img {
			width: 100%;
		}
		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(#080808, 0.85);
			@include transition(.3s cubic-bezier(.24,.74,.58,1));
			opacity: 0;
			z-index: 99;
		}
	}
	.item--category {
		margin-bottom: 15px;
		a {
			font-size: 14px;
			letter-spacing: -0.01em;
			font-weight: 700;
			@extend .text-gradient;
		}
	}
	.item--meta {
		position: absolute;
		top: 30%;
		@include transform(translate(0, -50%));
		left: 0;
		right: 0;
		text-align: center;
		padding: 30px;
		z-index: 102;
		@include transition(.3s cubic-bezier(.24,.74,.58,1));
		opacity: 0;
	}
	.item--readmore .btn {
		padding: 0 38px;
	}
	.item--title {
		font-size: 24px;
		margin-bottom: 28px;
		letter-spacing: -0.025em;
		a {
			color: inherit;
			&:hover {
				color: inherit;
			}
		}
	}
	.item--shape {
		position: absolute;
		@include background-horizontal-right($gradient_color_from, $gradient_color_to);
		@include transition(.3s cubic-bezier(.24,.74,.58,1));
		transform-origin: left bottom;
		-webkit-transform-origin: left bottom;
		&.item--shape1 {
			width: 95px;
			height: 140px;
			opacity: 0.52;
			transform: rotate(12deg) scale(0);
			bottom: -30px;
			left: -39px;
			z-index: 101;
		}
		&.item--shape2 {
			width: 120px;
			height: 130px;
			opacity: 0.52;
			transform: rotate(26deg) scale(0);
			left: -60px;
			bottom: -10px;
			z-index: 100;
		}
		&.item--shape3 {
			bottom: -50px;
			left: -35px;
			background: none;
			z-index: 100;
			@include transform(translateX(-120px));
			svg {
				height: 215px;
				width: auto;
			}
		}
		&.item--shape4 {
			bottom: -50px;
			left: -60px;
			background: none;
			z-index: 101;
			@include transform(translateX(-120px));
			svg {
				height: 205px;
				g {
					fill: $primary_color;
				}
			}
		}
	}
	.grid-item-inner {
		position: relative;
		overflow: hidden;
		&:hover {
			.item--shape.item--shape1 {
				transform: rotate(12deg) scale(1);
				-webkit-transition-delay: 0.22s;
		        -moz-transition-delay: 0.22s;
		        transition-delay: 0.22s;
			}
			.item--shape.item--shape2 {
				transform: rotate(26deg) scale(1);
				-webkit-transition-delay: 0.32s;
		        -moz-transition-delay: 0.32s;
		        transition-delay: 0.32s;
			}
			.item--shape.item--shape3 {
				@include transform(translateX(0px));
				-webkit-transition-delay: 0.22s;
		        -moz-transition-delay: 0.22s;
		        transition-delay: 0.22s;
			}
			.item--shape.item--shape4 {
				@include transform(translateX(0px));
				-webkit-transition-delay: 0.32s;
		        -moz-transition-delay: 0.32s;
		        transition-delay: 0.32s;
			}
			.item--featured:before {
				opacity: 1;
			}
			.item--meta {
				opacity: 1;
				top: 50%;
				-webkit-transition-delay: 0.12s;
		        -moz-transition-delay: 0.12s;
		        transition-delay: 0.12s;
			}
		}
	}
	.ct-carousel-inner {
		margin: 0;
		.slick-slide {
			padding: 0;
		}
	}
	.ct-slick-carousel .slick-arrow {
		opacity: 0;
	}
	&:hover .ct-slick-carousel .slick-arrow {
		opacity: 1;
		&.slick-prev {
			left: 20px;
		}
		&.slick-next {
			right: 20px;
		}
	}
	&.style2 {
		.item--featured img {
			-webkit-filter: grayscale(100%);
        	filter: grayscale(100%);
        	@include transition(.3s cubic-bezier(.24,.74,.58,1));
		}
		.item--category a, .item--readmore .btn {
			@include background-horizontal-right($primary_color, $primary_color);
		}
		.item--readmore .btn {
			&:before, &:after {
				background-color: #000;
				content: "";
				height: 100%;
				left: -110%;
				opacity: 0.1;
				position: absolute;
				top: 0;
				-webkit-transition: all 0.5s ease 0s;
				-khtml-transition: all 0.5s ease 0s;
				-moz-transition: all 0.5s ease 0s;
				-ms-transition: all 0.5s ease 0s;
				-o-transition: all 0.5s ease 0s;
				transition: all 0.5s ease 0s;
				-webkit-transform: skewX(25deg);
				-khtml-transform: skewX(25deg);
				-moz-transform: skewX(25deg);
				-ms-transform: skewX(25deg);
				-o-transform: skewX(25deg);
				transform: skewX(25deg);
				width: 100%;
				z-index: -1;
			}
			&:hover {
				&:before {
					left: -10%;
					-webkit-transition: all 0.3s ease 0s;
					-khtml-transition: all 0.3s ease 0s;
					-moz-transition: all 0.3s ease 0s;
					-ms-transition: all 0.3s ease 0s;
					-o-transition: all 0.3s ease 0s;
					transition: all 0.3s ease 0s;
				}
				&:after {
					left: -20%;
				}
			}
		}
	}
}

.ct-portfolio-carousel4 {
	.item--featured {
		position: relative;
		overflow: hidden;
		margin-bottom: 14px;
		img {
			width: 100%;
			@include transition(.3s cubic-bezier(.24,.74,.58,1));
		}
		.item--overlay {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(#000, 0.86);
			@include transition(.3s cubic-bezier(.24,.74,.58,1));
			opacity: 0;
			z-index: 99;
		}
		.item--readmore {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 72px;
			height: 72px;
			line-height: 72px;
			text-align: center;
			@include border-radius(72px);
			@include background-gradient-button(90deg, $gradient_color_from 0%, $gradient_color_to 50%, $gradient_color_from);
			background-size: 200%, 1px;
  			background-position: 0%;
			color: #fff;
			@include transform(translateY(40px));
			opacity: 0;
			z-index: 100;
			overflow: hidden;
			i {
				display: inline-flex;
				font-size: 24px;
			}
			&:hover {
				color: $secondary_color;
    			background-position: 100%;
    			color: #fff;
    			i {
    				-o-animation: toRightFromLeft 0.3s forwards;
		            -ms-animation: toRightFromLeft 0.3s forwards;
		            -webkit-animation: toRightFromLeft 0.3s forwards;
		            animation: toRightFromLeft 0.3s forwards;
    			}
			}
		}
	}
	.item--title {
		color: #000;
		margin-bottom: 5px;
		font-size: 20px;
		a {
			color: inherit;
			position: relative;
			&:before {
				content: '';
				height: 1px;
				width: 100%;
				position: absolute;
				bottom: 0;
				left: 0;
				background-color: #000;
				@include transform(scale(0, 1));
	      		@include transition(transform 0.3s cubic-bezier(0.37, 0.31, 0.2, 0.85));
	      		transform-origin: right center;
	      		-webkit-transform-origin: right center;
			}
			&:hover {
				color: #222;
				&:before {
					transform-origin: left center;
			        -webkit-transform-origin: left center;
			        @include transform(scale(1, 1));
				}
			}
		}
	}
	.item--subtitle {
		font-style: italic;
	}
	.grid-item-inner {
		position: relative;
		&:hover {
			.item--featured {
				img {
					@include transform(scale(1.2));
				}
				.item--overlay {
					opacity: 1;
				}
				.item--readmore {
					@include transform(translateY(0px));
					opacity: 1;
				}
			}
		}
	}
	.carousel-item:nth-child(odd) {
		margin-top: 28px;
		@media #{$max-sm} {
			margin-top: 0;
		}
	}
}

.ct-section-portfolio-boxed > .elementor-container {
	max-width: 1520px;
}

.ct-portfolio-grid2 {
	.item--featured {
		&:before {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(#000409, 0.85);
			@include transition(.3s cubic-bezier(.24,.74,.58,1));
			opacity: 0;
		}
		a {
			font-size: 30px;
			text-align: center;
			line-height: 41px;
			width: 41px;
			height: 41px;
			border-radius: 41px;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
			@include box-shadow(none !important);
			color: $secondary_color;
			@include background-gradient-button(90deg, $gradient_color_from 0%, $gradient_color_to 50%, $gradient_color_from);
			background-size: 300%, 1px;
			background-position: 0%;
			font-family: 'Poppins', sans-serif;
			font-weight: 400;
			@include transform(translateY(-40px));
			opacity: 0;
			&:hover, &:focus {
				color: $secondary_color;
				background-position: 100%;
			}
		}
		img {
			width: 100%;
		}
	}
	.grid-item-inner {
		@include border-radius(7px);
		overflow: hidden;
		position: relative;
		margin-bottom: 45px;
		&:hover .item--featured { 
			&:before {
				opacity: 1;
			}
			a {
				@include transform(translateY(0px));
				opacity: 1;
			}
		}
	}
}

.ct-portfolio-grid3 {
	.item--featured {
		img {
			width: 100%;
			@include border-radius(5px);
			@include transition(.3s cubic-bezier(.24,.74,.58,1));
			@media #{$max-lg} {
				@include border-radius(5px 5px 0 0);
			}
		}
	}
	.item--title {
		margin-bottom: 8px;
		@media #{$max-md} {
			font-size: 20px;
		}
		a {
			color: inherit;
			&:hover {
				color: inherit;
			}
		}
	}
	.item--holder {
		position: absolute;
		bottom: 50px;
		left: 0;
		background-color: #fff;
		max-width: 380px;
		padding: 22px 20px 22px 24px;
		@include box-shadow(0 15px 30px rgba(#979797, 0.15));
		@include border-radius(5px 0 0 0);
		z-index: 99;
		@media #{$max-lg} {
			position: relative;
			bottom: 0;
			@include border-radius(0 0 5px 5px);
		}
		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			@include border-radius(5px 0 0 0);
			@include transition(.3s cubic-bezier(.24,.74,.58,1));
			opacity: 0;
			@include background-horizontal-right($gradient_color_from, $gradient_color_to);
			z-index: -1;
			@media #{$max-lg} {
				@include border-radius(0 0 5px 5px);
			}
		}
	}
	.item--content {
		@include transition(.3s cubic-bezier(.24,.74,.58,1));
	}
	.item--readmore {
		position: absolute;
		bottom: 0;
		right: 0;
		border-radius: 0 0 5px 0;
		width: 40px;
		height: 40px;
		text-align: center;
		line-height: 40px;
		overflow: hidden;
		@include background-horizontal-right($gradient_color_from, $gradient_color_to);
		color: #fff;
		@media #{$max-lg} {
			top: 0;
			bottom: auto;
			border-radius: 0 5px 0 0;
		}
		&:hover i {
			-o-animation: toRightFromLeft 0.3s forwards;
            -ms-animation: toRightFromLeft 0.3s forwards;
            -webkit-animation: toRightFromLeft 0.3s forwards;
            animation: toRightFromLeft 0.3s forwards;
		}
	}
	.grid-item-inner {
		padding-left: 70px;
		position: relative;
		margin-bottom: 40px;
		@media #{$max-lg} {
			padding-left: 0;
		}
		&:hover {
			.item--featured img {
				@include box-shadow(0 15px 45px rgba(#494949, 0.2));
			}
			.item--title a, .item--content {
				color: #fff;
			}
			.item--holder:before {
				opacity: 1;
			}
		}
	}
}

.ct-portfolio-grid4 {
	margin: 0;
	.grid-item {
		padding: 0;
	}
	.item--featured img {
		width: 100%;
	}
	.item--meta {
		position: absolute;
		top: 35px;
		left: 30px;
		z-index: 99;
		padding-top: 10px;
		&:before {
			content: '';
			width: 52px;
			height: 2px;
			background-color: #fff;
			position: absolute;
			top: 0;
			left: 0;
		}
		.item--title {
			margin-bottom: 0;
			color: #fff;
			font-family: 'Inter', sans-serif;
			font-size: 20px;
			line-height: 30px;
			font-weight: 600;
			a {
				color: inherit;
			}
		}
	}
	.item--readmore {
		position: absolute;
		right: 30px;
		bottom: 30px;
		z-index: 99;
		width: 57px;
		height: 57px;
		@include border-radius(57px);
		font-size: 36px;
		font-weight: 300;
		color: #fff;
		text-align: center;
		&:before {
			content: "";
			position: absolute;
			z-index: -1;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius: inherit;
			padding: 2px;
			background: linear-gradient(45deg, $m_gradient_color1_color 0%, $m_gradient_color2_color 27%, $m_gradient_color3_color 48%, $m_gradient_color4_color 69%, $m_gradient_color5_color 100%);
			-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
			-webkit-mask-composite: source-out;
			mask-composite: exclude;
			@include transition(.3s cubic-bezier(.24,.74,.58,1));
		}
		&:after {
			content: '';
			position: absolute;
			z-index: -1;
			background-color: #fff;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			@include border-radius(57px);
			@include transform(scale(1.6));
			opacity: 0;
			@include transition(.3s cubic-bezier(.24,.74,.58,1));
		}
		&:hover {
			color: #000;
			&:before {
				@include transform(scale(1.6));
				opacity: 0;
			}
			&:after {
				@include transform(scale(1));
				opacity: 1;
			}
		}
	}
	.grid-item-inner {
		position: relative;
		overflow: hidden;
		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(#000, 0.77);
			@include transition(.3s cubic-bezier(.24,.74,.58,1));
		}
		&:hover {
			&:before {
				background-color: rgba(#000, 0.52);
			}
		}
	}
}