.ct-showcase-carousel1 {
	.append-arrows-custom {
	  .slick-arrow {
	    width: 90px;
	    height: 90px;
	    cursor: pointer;
	    @include transition(all 300ms linear 0ms);
	    @include border-radius(90px);
	    position: absolute;
	    padding: 0;
	    background-color: #fff;
	    color: $third_color;
	    background-image: none;
	    font-size: 0;
	    bottom: 0;
	    top: 60%;
	    z-index: 2;
	    @include transform(translateY(-50%));
	    background-repeat: no-repeat;
	    background-position: center;
	    @include box-shadow(0 3px 15px rgba(#000, 0.15));
	    @media #{ $max-md } {
	    	width: 50px;
	    	height: 50px;
	    	@include border-radius(50px);
	    }
	    &:before {
	      font-family: "Flaticon";
	      font-size: 22px;
	      position: absolute;
	      top: 50%;
	      left: 50%;
	      @include transform(translate(-50%, -50%));
	      font-weight: 400;
	    }
	    &:after {
	      display: none;
	    }
	    &:hover {
	      @include box-shadow(0 0px 25px rgba(#000, 0.22));
	      background-color: #fff;
	      z-index: 222;
	      visibility: visible;
	      &:before {
	      	@extend .text-gradient2;
	      }
	    }
	    &.slick-disabled {
	      cursor: no-drop;
	    }
	  }
	  .slick-prev {
	    margin-left: -45px;
	    &:before {
	      @include transform(translate(-50%, -50%) rotate(-180deg));
	      content: '\f10a';
	    }
	  }
	  .slick-next {
	    margin-right: -45px;
	    &:before {
	      content: "\f10a";
	    }
	  }
	  &[data-arrows="true"] {
	    padding-bottom: 75px;
	  }
	  &.ct-slick-arrow-middle {
	    .slick-arrow {
	      margin: 0;
	      bottom: auto;
	      top: 60%;
	      @include transform(translate(0, -50%));
	      opacity: 1;
	      @media #{ $max-md } {
	      	top: 50%;
	      }
	      &.slick-prev {
	        left: -45px;
	        @media #{ $max-md } {
	        	left: 0;
	        }
	        right: auto;
	      }
	      &.slick-next {
	        left: auto;
	        right: -45px;
	        @media #{ $max-md } {
	        	right: 0;
	        }
	      }
	    }
	    &[data-arrows="true"] {
	      padding-bottom: 0px;
	    }
	    &:hover .slick-arrow {
	      opacity: 1;
	      visibility: visible;

	      &.slick-prev {
	        left: -45px;
	        @media #{$max-lg} {
	          left: 30px;
	        }
	      }
	      &.slick-next {
	        right: -45px;
	        @media #{$max-lg} {
	          right: 30px;
	        }
	      }
	    }
	  }
	}
	.slick-dots {
	  margin: 43px 0 5px;
	  list-style: none;
	  counter-reset: number;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  li {
	    margin: 0 7px 0 7px;
	    display: inline-block;
	    cursor: pointer;
	    @include transition(all 300ms linear 0ms);
	    @media #{ $min-lg } {
	      height: 18px;
	      line-height: 15px;
	    }
	    @media #{ $max-md } {
	      margin: 0 5px 8px 5px;
	    }
	    &:before {
	      @include transition(all 300ms linear 0ms);
	        counter-increment: number;
	        content: counter(number);
	        font-size: 18px;
	        font-weight: bold;
	        color: #fff;
	        @media #{ $max-sm } {
	          font-size: 15px;
	        }
	        @media #{ $max-md } {
	          width: 32px;
	          text-align: center;
	          height: 32px;
	          line-height: 32px;
	          background-color: #f5f5f5;
	          display: inline-block;
	          font-size: 14px !important;
	          color: #222;
	        }
	    }
	    button {
	      font-size: 0;
	      line-height: 1;
	      padding: 0;
	      width: 0;
	      height: 2px;
	      top: -6px;
	      background-color: #a5a5a5;
	      border: none;
	      position: relative;
	      overflow: visible;
	      @include transition(all 300ms linear 0ms);
	      &:after {
			opacity: 0;
			display: none;
	      }
	    }
	    &.slick-active {
	      &:before {
	        color: $primary_color;
	        font-size: 20px;
	        @media #{ $max-md } {
	          font-size: 14px;
	        }
	      }
	      button {
	        @media #{ $min-lg } {
	          width: 60px;
	        }
	        height: 2px;
	        margin-left: 5px;
	        @include transition(all 300ms linear 0ms);
	        background-color: #fff;
	      }
	    }
	  }
	}
	.wp-meta {
		max-width: 450px;
		margin: 0 auto;
		margin-bottom: 40px;
		text-align: center;
		.el--sub-title {
			font-size: 30px;
			margin-bottom: 10px;
			font-weight: bold;
			@extend .text-gradient2;
		}
		.el--title {
			font-size: 55px;
			@media #{ $max-md } {
				font-size: 35px;
			}
		}

	}
	.ct-slick-carousel[data-arrows="true"] {
		padding-bottom: 0px;
	}
	.ct-slick-carousel {
		overflow: hidden;
		.slick-list {
			margin-left: -720px;
			margin-right: -720px;
			@media #{ $max-md } {
				margin-left: 0;
				margin-right: 0;
			}
		}
	}
	.inner-item {
		overflow: hidden;
		@include border-radius(15px);
		img {
			width: 100%;
		}
	}
	.ct-carousel-inner {
		position: relative;
		max-width: 1360px;
		margin: 0 auto;
		padding: 70px 0 40px;
		z-index: 1;
		@include border-radius(20px);
		@include box-shadow(0 3px 15px rgba(#000, 0.15));
		.ct-bg-image {
			z-index: -1;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			bottom: 0;
			background-size: cover;
			@include border-radius(20px);
			background-position: center center;
			background-color: #222;
		}
	}
}
.ct-showcase-carousel2 {
	.append-arrows-custom {
	  .slick-arrow {
	    width: 90px;
	    height: 90px;
	    cursor: pointer;
	    @include transition(all 300ms linear 0ms);
	    @include border-radius(90px);
	    position: absolute;
	    padding: 0;
	    background-color: #fff;
	    color: $third_color;
	    background-image: none;
	    font-size: 0;
	    bottom: 0;
	    top: 50%;
	    z-index: 2;
	    @include transform(translateY(-50%));
	    background-repeat: no-repeat;
	    background-position: center;
	    @include box-shadow(0 3px 15px rgba(#000, 0.15));
	    @media #{ $max-md } {
	    	width: 50px;
	    	height: 50px;
	    	@include border-radius(50px);
	    }
	    &:before {
	      font-family: "Flaticon";
	      font-size: 22px;
	      position: absolute;
	      top: 50%;
	      left: 50%;
	      @include transform(translate(-50%, -50%));
	      font-weight: 400;
	    }
	    &:after {
	      display: none;
	    }
	    &:hover {
	      @include box-shadow(0 0px 25px rgba(#000, 0.22));
	      background-color: #fff;
	      z-index: 222;
	      visibility: visible;
	      &:before {
	      	@extend .text-gradient2;
	      }
	    }
	    &.slick-disabled {
	      cursor: no-drop;
	    }
	  }
	  .slick-prev {
	    &:before {
	      @include transform(translate(-50%, -50%) rotate(-180deg));
	      content: '\f10a';
	    }
	  }
	  .slick-next {
	    &:before {
	      content: "\f10a";
	    }
	  }
	  &[data-arrows="true"] {
	    padding-bottom: 75px;
	  }
	  &.ct-slick-arrow-middle {
	    .slick-arrow {
	      margin: 0;
	      bottom: auto;
	      top: 50%;
	      @include transform(translate(0, -50%));
	      opacity: 1;
	      @media #{ $max-md } {
	      	top: 50%;
	      }
	      &.slick-prev {
	        left: -45px;
	        @media #{ $max-xl } {
	        	left: 0;
	        }
	        right: auto;
	      }
	      &.slick-next {
	        left: auto;
	        right: -45px;
	        @media #{ $max-xl } {
	        	right: 0;
	        }
	      }
	    }
	    &[data-arrows="true"] {
	      padding-bottom: 0px;
	    }
	    &:hover .slick-arrow {
	      opacity: 1;
	      visibility: visible;

	      &.slick-prev {
	        left: -45px;
	        @media #{$max-xl} {
	          left: 30px;
	        }
	      }
	      &.slick-next {
	        right: -45px;
	        @media #{$max-xl} {
	          right: 30px;
	        }
	      }
	    }
	  }
	}
	.slick-dots {
	  list-style: none;
	  counter-reset: number;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  position: absolute;
	  margin: 0;
	  top: 22px;
	  left: 30px;
	  li {
	    margin: 0 3px;
	    display: inline-block;
	    cursor: pointer;
	    @include transition(all 300ms linear 0ms);
	    button {
	      font-size: 0;
	      line-height: 1;
	      padding: 0;
	      width: 14px;
	      height: 14px;
	      top: -6px;
	      background-color: #e4e4e4;
	      @include border-radius(14px);
	      border: none;
	      position: relative;
	      overflow: visible;
	      @include transition(all 300ms linear 0ms);
	      &:after {
			opacity: 0;
			display: none;
	      }
	    }
	    &.slick-active {
	      &:before {
	        color: $primary_color;
	        font-size: 20px;
	        @media #{ $max-md } {
	          font-size: 14px;
	        }
	      }
	      button {
	        @include transition(all 300ms linear 0ms);
	        background-color: $primary_color;
	      }
	    }
	  }
	}
	.ct-slick-carousel[data-arrows="true"] {
		padding-bottom: 0px;
	}
	.ct-slick-carousel {
		overflow: hidden;
		padding: 50px 35px 0;
		@include border-radius(10px);
		@include box-shadow(0 10px 22px rgba(#b9b5b5, 0.35));
		background-color: #fff;
		margin: 20px 0;
		.slick-list {
			overflow: hidden;
			.slick-slide {
				padding: 0;
			}
		}
	}
	.inner-item {
		overflow: hidden;
		img {
			width: 100%;
		}
	}
	.ct-carousel-inner {
		max-width: 1200;
		position: relative;
		margin: 0 auto;
	}
}
.elementor-widget-ct_showcase .ct-showcase {
	img {
		@include box-shadow(0 15px 22px rgba(#b9b5b5, 0.2));
		@include border-radius(6px);
		@include transition(.3s cubic-bezier(.24,.74,.58,1));
		width: 100%;
	}
	span {
		display: block;
		text-align: center;
		margin-top: 18px;
		@include transition(.3s cubic-bezier(.24,.74,.58,1));
	}
	a {
		display: block;
		&:hover {
			img {
				@include transform(translateY(-12px));
				@include box-shadow(0 20px 32px rgba(#b9b5b5, 0.5));
			}
			span {
				color: $primary_color;
			}
		}
	}
}
.ct-showcase {
	&.layout1 {
		.inner-box {
			text-align: center;
			position: relative;
		}
		.item-feature {
			margin-bottom: 20px;
			position: relative;
			overflow: hidden;
			@include box-shadow(0 6px 28px rgba( $secondary_color ,0.15));
			@include border-radius(6px);
			.notification {
				@include box-shadow(0 6px 18px rgba( #ffd532 ,0.15));
				line-height: 33px;
				height: 33px;
				font-size: 13px;
				font-weight: 700;
				color: #14287b;
				background-color: #ffd532;
				position: absolute;
				width: 180px;
				padding: 0 10px;
				@include transform(rotate(-45deg));
				top: 10px;
				left: -50px;
				z-index: 2;
				text-align: center;
				text-transform: uppercase;
				display: inline-block;
			}
			img {
				@include border-radius(0px);
			}
			&:after {
				content: "";
				display: block;
				position: absolute;
			    top: 0;
			    z-index: 1;
			    left: 0;
			    width: 100%;
			    height: 100%;
			    @include border-radius(0px);
			    background-color: rgba(0,1,10,.49);
			    @include transition(all 200ms linear 0ms);
			    opacity: 0;
			}
		}
		.ct-item-links {
			@include transition(all 200ms linear 0ms);
			position: absolute;
			z-index: 2;
			top: 70%;
			left: 50%;
			right: auto;
			@include transform(translate(-50%, -50%));
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			overflow: hidden;
			flex-direction: column;
			opacity: 0;
			span {
				margin-top: 0;
			}
			a {
				display: inline-block;
				line-height: 45px;
				padding: 0 15px;
				font-size: 14px;
				font-weight: 400;
				min-width: 100px;
				background-color: #fff;
				@include border-radius(5px);
				span {
					color: #000;
				}
				&.active {
					background-color: $primary_color;
					span {
						color: #fff;
					}
				}
				+ a {
					margin-top: 10px;
				}
			}
		}
		.item-title {
			font-size: 16px;
			cite {
				font-style: normal;
				@extend .text-gradient;
			}
			&:hover {
				a {
					color: $primary_color;
				}
			}
		}	
		&:hover {
			.item-feature {
				&:after {
				    opacity: 1;
				}
				img {
					@include border-radius(0px);
				}
			}
			.ct-item-links {
				top: 50%;
				opacity: 1;
			}
		}
	}
	&.layout2 {
		.item-notification {
			position: absolute;
			display: inline-block;
			padding: 7px 20px;
			line-height: 23px;
			color: #fff;
			font-size: 20px;
			@include border-radius(7px);
			background-color: #db072a;
			box-shadow: 0px 10px 20px rgba( #db072a, 0.5 );
			top: 18px;
			right: 13px;
			margin-top: 0;
			z-index: 2;
		}
		.item-feature {
			position: relative;
			margin-bottom: 25px;
			overflow: hidden;
			@include border-radius(20px 0 0 0);
			img {
				border-radius: 0;
				width: 100%;
			}
			&:after {
				content: "";
				display: block;
				position: absolute;
			    top: 0;
			    z-index: 1;
			    left: 0;
			    width: 100%;
			    height: 100%;
			    @include border-radius(20px 0 0 0);
			    background-color: rgba(0,1,10,.7);
			    @include transition(all 200ms linear 0ms);
			    opacity: 0;
			}
		}
		.ct-item-links {
			@include transition(all 200ms linear 0ms);
			position: absolute;
			z-index: 2;
			top: 70%;
			left: 50%;
			right: auto;
			@include border-radius(10px);
			@include transform(translate(-50%, -50%));
			height: 56px;
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			overflow: hidden;
			opacity: 0;
			@include box-shadow(0 10px 32px rgba(#fff, 0.25));
			span {
				margin-top: 0;
			}
			a {
				display: inline-block;
				line-height: 56px;
				padding: 0 15px;
				font-size: 14px;
				font-weight: 400;
				background-color: #fff;
				min-width: 100px;
				span {
					color: #000;
				}
			}
			a.active {
				background-image: linear-gradient(-45deg, #f74f59 0%, #f74f59 27%, #f74f59 20%, #328eff 69%, #328eff 100%);
				span {
					color: #fff;
				}
			}
		}
		.item-title {
			font-size: 22px;
			margin-bottom: 5px;
			a {
				color: $secondary_color;
			}
			cite {
				font-style: normal;
				@extend .text-gradient;
			}
			&:hover {
				a {
					color: $primary_color;
				}
			}
		}
		.item-coming {
			z-index: 2;
			position: absolute;
			top: 60%;
			left: 50%;
			@include transform(translate(-50%, -50%));
			font-size: 36px;
			@extend .text-gradient2;
			@media #{ $max-lg } {
				font-size: 20px;
			}
		}
		.sub-title {
			font-size: 14px;
			color: $third_color;
			font-weight: 400;
			margin-bottom: 0;
		}
		.item-meta {
			text-align: left;
			padding-left: 10px;
		}
		.inner-box {
			padding: 28px 18px;
			background-color: #fff;
			@include border-radius(10px);
			overflow: hidden;
			@include box-shadow(0 10px 22px rgba(#b9b5b5, 0.35));
			position: relative;
			margin-bottom: 35px;
			@include transition(all 200ms linear 0ms);
			.list-dotted {
				display: flex;
				position: absolute;
				top: 10px;
				left: 13px;
				i {
					display: inline-block;
					width: 6px;
					height: 6px;
					@include border-radius(6px);
					background-color: #ecedec;
					+ i {
						margin-left: 5px;
					}
				}
			}
			&:hover {
				@include transform(translateY(-15px));
				@include box-shadow(0 10px 32px rgba(#b9b5b5, 0.5));
				.item-title {
					cite {
						@extend .text-gradient;
					}
				}
				.item-feature {
					&:after {
					    opacity: 1;
					}
				}
				.ct-item-links {
					top: 50%;
					opacity: 1;
				}
			}
		}
	}
}