.pxl-scroll-to-section {
	width: 30px;
	height: 30px;
	display: inline-flex;
	line-height: 30px;
	color: #000;
	justify-content: center;
	transform: rotate(90deg);
	font-size: 18px;
	&:hover {
		color: #000;
	}
}
@media #{$min-xl3} {
	body:not(.rtl) .pxl-custom-section2 {
		@include transform(translateX(-150px));
	}
}
.ct-link-external1 a {
	width: 64px;
	height: 64px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	@include background-gradient-top($gradient_color_from, $gradient_color_to);
	@include border-radius(65px);
	font-size: 28px;
	color: #fff;
	@include box-shadow(0 15px 21px #{'rgba(var(--gradient-color-from-rgb),0.42)'} !important);
	&:hover {
		color: #fff;
	}
}
.elementor-editor-active .elementor-inner-section > .elementor-element-overlay > .elementor-editor-element-settings {
  margin-left: 84px;
}
.ct-pagination-slider {
	display: flex;
	align-items: flex-end;
	flex-wrap: nowrap;
	font-size: 20px;
	line-height: 1;
	font-weight: 700;
	color: $primary_color;
	.item--number {
		font-size: 40px;
		color: #fff;
		margin: 0 8px;
	}
	.item--total {
		margin: 2px 0;
	}
}
.revslider-initialised {
	.slider-text-shadow1 {
		text-shadow: 0 3px 4px rgba(#0d0d0d, 0.29);
		-webkit-text-shadow: 0 3px 4px rgba(#0d0d0d, 0.29);
	}
	.slider-color1 {
		color: #e3471f;
	}
	.slider--item-flex {
  		display: flex;
	}
	.btn:not(.ct-button-shortcode) {
		line-height: 54px;
	}
	.custom.tparrows {
		background-color: #e8e8e8 !important;
		width: 38px !important;
		height: 38px !important;
		@include transition(.3s cubic-bezier(.24,.74,.58,1));
		&:before {
			color: #2e2d2d !important;
			font-family: "Caseicon" !important;
			font-size: 12px !important;
			position: absolute;
			top: 50%;
			left: 50%;
			@include transform(translate(-50%,-50%));
		}
		&.tp-leftarrow:before {
			content: "\f103" !important;
		}
		&.tp-rightarrow:before {
			content: "\f104" !important;
		}
		&:hover {
			background-color: $primary_color !important;
			&:before {
				color: #fff !important;
			}
		}
	}
	.hesperiden.tparrows {
		background-color: transparent !important;
		width: 70px !important;
		height: 70px !important;
		@include transition(.3s cubic-bezier(.24,.74,.58,1));
		border: 2px solid #e7ebed;
		@include border-radius(100%);
		@media #{$max-xxl} {
			width: 50px !important;
			height: 50px !important;
		}
		&:before {
			color: #fff !important;
			font-family: "Caseicon" !important;
			font-size: 20px !important;
			position: absolute;
			top: 50%;
			left: 50%;
			@include transform(translate(-50%,-50%));
			@media #{$max-xxl} {
				font-size: 16px !important;
			}
		}
		&.tp-leftarrow:before {
			content: "\f103" !important;
		}
		&.tp-rightarrow:before {
			content: "\f104" !important;
		}
		&:hover {
			background-color: #fff !important;
			border-color: #fff !important;
			&:before {
				color: #000 !important;
			}
		}
	}
	.slider-title-shadow1 {
		text-shadow: 0 3px 4px rgba(#0d0d0d, 0.29);
	}
	.btn-effect1 {
		overflow: hidden;
		text-shadow: none;
		&:after {
	      content: "";
	      background: #fff;
	      -webkit-transition: all .8s;
	      -ms-transition: all .8s;
	      transition: all .8s;
	      position: absolute;
	      height: 120%;
	      width: 15px;
	      opacity: .2;
	      left: -35%;
	      top: -10%;
	      transform: rotate(15deg);
	      -moz-transform: rotate(15deg);
	      -webkit-transform: rotate(15deg);
	      -o-transform: rotate(15deg);
	    }
	    &:hover, &:focus {
	      background: $primary_color;
	      &:after {
	        left: 130%;
	      }
	    }
	}
	.rev-btn {
		i {
			font-weight: 400;
			display: inline-block;
		}
		.space-left {
			margin-left: 10px;
		}
		.space-right {
			margin-right: 8px;
		}
	}
	.rs-layer cite {
		font-style: normal;
		color: $primary_color;
	}

	.case-arrow-slider1.tparrows {
		width: 80px;
		height: 80px;
		background-color: #e9effb;
		@include border-radius(80px);
		@media #{$max-xl} {
			width: 60px;
			height: 60px;
		}
		&:before {
			color: $primary_color;
			font-family: "Caseicon";
			font-size: 20px;
			position: absolute;
			top: 50%;
			left: 50%;
			@include transform(translate(-50%,-50%));
			z-index: 99;
			@include transition(.3s cubic-bezier(.24,.74,.58,1));
			@media #{$max-xl} {
				font-size: 16px;
			}
		}
		&.tp-leftarrow:before {
			content: "\f103";
		}
		&.tp-rightarrow:before {
			content: "\f104";
		}
		.tp-arr-imgholder {
			@include border-radius(80px);
			@include transition(.3s cubic-bezier(.24,.74,.58,1));
			z-index: 88;
			@include transform(scale(0));
			opacity: 0;
			&:before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				@include border-radius(80px);
				background-color: #{'rgba(var(--primary-color-rgb),0.8)'};
			}
		}
		&:hover {
			&:before {
				color: #fff;
			}
			.tp-arr-imgholder {
				@include transform(scale(1));
				opacity: 1;
			}
		}
	}

	.case-arrow-slider2.tparrows {
		width: 41px;
		height: 41px;
		background-color: transparent;
		@include border-radius(41px);
		border: 2px solid $primary_color;
		&:before {
			color: $primary_color;
			font-family: "Caseicon";
			font-size: 13px;
			position: absolute;
			top: 50%;
			left: 50%;
			@include transform(translate(-50%,-50%));
			z-index: 99;
			@include transition(.3s cubic-bezier(.24,.74,.58,1));
		}
		&.tp-leftarrow:before {
			content: "\f103";
		}
		&.tp-rightarrow:before {
			content: "\f104";
		}
		&:hover {
			background-color: $primary_color;
			&:before {
				color: #fff;
			}
		}
	}
}

.ct-slider-boxtext {
	background-color: #fff;
	@include border-radius(12px);
	padding: 20px 26px;
	@include box-shadow(0 8px 29px rgba(#212180, 0.1));
	margin-right: 10px;
	margin-top: 10px;
	@include transition(.3s cubic-bezier(.24,.74,.58,1));
	position: relative;
	width: 180px;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	@media #{$max-lg} {
		padding: 0;
		height: 64px;
		width: 64px;
		justify-content: center;
	}
	.item--link {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 99;
	}
	.item--icon {
		line-height: 1;
		margin-right: 21px;
		position: relative;
		@media #{$max-lg} {
			margin-right: 0;
		}
		&:before {
			content: '';
			height: 11px;
			width: 1px;
			background-color: #b4b4b4;
			position: absolute;
			top: 50%;
			right: -10px;
			@include transform(translate(0, -50%));
			@include transition(.3s cubic-bezier(.24,.74,.58,1));
			@media #{$max-lg} {
				display: none;
			}
		}
		i {
			font-size: 25px;
			color: $primary_color;
			@include transition(.3s cubic-bezier(.24,.74,.58,1));
			@media #{$max-lg} {
				font-size: 32px;
			}
		}
	}
	.item--content {
		font-size: 14px;
		line-height: 18px;
		color: #181f44;
		@include transition(.3s cubic-bezier(.24,.74,.58,1));
		white-space: normal;
		@media #{$max-lg} {
			display: none;
		}
	}
	&:hover {
		background-color: $primary_color;
		@include box-shadow(none);
		.item--content, .item--icon i {
			color: #fff;
		}
		.item--icon:before {
			background-color: #fff;
		}
	}
}

.el-empty:empty {
	display: none !important;
}

.ct-icon1.style1 {
	a {
		font-size: 14px;
		+ a {
			margin-left: 10px;
		}
	}
}

.ct-icon1.style2 {
	a {
		width: 37px;
		height: 41px;
		border: 1px solid $primary_color;
		background-color: #fff;
		color: #747474;
		font-size: 16px;
		line-height: 39px;
		text-align: center;
		display: inline-block;
		&:hover {
			color: $primary_color;
		}
		+ a {
			margin-left: -5px;
		}
	}
}

.ct-mailchimp1 {
	.mc4wp-form {
        .mc4wp-response {
            font-size: 14px;
            margin-top: 15px;
            color: #999;
            p {
                margin-bottom: 0;
            }
        }
    }
	&.style1 {
		position: relative;
		.ct-field-group {
			position: relative;
			overflow: hidden;
			&:before, &:after {
				content: '';
				height: 46px;
				width: 62px;
				font-size: 15px;
				position: absolute;
				bottom: 0;
				right: 0;
				color: #fff;
				text-align: center;
				line-height: 46px;
			}
			&:before {
				@include background-horizontal-right($gradient_color_from, $gradient_color_to);
			}
			&:after {
				content: '\f1d8';
				font-weight: 400;
				font-family: "Font Awesome 5 Free";
			}
			&:hover:after {
				animation: toTopFromBottom 0.3s forwards;
			}
		}
		[type="email"] {
			font-size: 14px;
			color: #fff;
			padding-left: 24px;
			height: 46px;
			border: none;
			background-color: #0f0f35;
		}
		[type="submit"] {
			@include border-radius(0px);
			font-size: 0px;
			padding: 0;
			position: absolute;
			top: 0;
			right: 0px;
			width: 62px;
			height: 46px;
			background: none;
			z-index: 99;
		}
	}
	&.style2 {
		form {
			max-width: 590px;
			margin: auto;
			position: relative;
			@media #{$max-md} {
				max-width: 480px;
			}
			[type="email"] {
				color: #9a9a9a;
				font-size: 17px;
				font-weight: 700;
				padding: 0 34px;
				height: 80px;
				@include border-radius(10px);
				border: none;
				@include box-shadow(0 0 46px rgba(#071a62, 0.08));
				@media #{$max-md} {
					height: 60px;
					font-size: 16px;
					padding-left: 28px;
				}
			}
			[type="submit"] {
				position: absolute;
				top: 0;
				right: 0;
				font-size: 17px;
				font-family: inherit;
				font-weight: 700;
				line-height: 80px;
				padding: 0 60px;
				border-radius: 10px;
				background: $primary_color;
				@media #{$max-md} {
					font-size: 16px;
					padding: 0 32px;
					line-height: 60px;
				}
				@media #{$max-sm} {
					position: static;
					margin-top: 30px;
				}
				&:hover {
					background: $third_color;
				}
			}
		}
	}
	&.style3 {
		input {
			border-radius: 3px;
		}
		[type="submit"] {
			width: 100%;
			@include background-gradient-rotate(135deg, $gradient_color_from, $gradient_color_to);
			background-size: auto;
		}
		.field-input + .field-input {
			margin-top: 15px;
		}
	}
} 

.ct-contact-form .ct-contact-meta {
	margin-bottom: 30px;
}

.ct-contact-form-layout1 {
	&.style1 {
		.input-filled > label, .wpcf7-form-control-wrap label, .input-filled > p> label, {
			font-size: 15px;
			color: #00060f;
			display: block;
			margin-bottom: 7px;
		}
		.wpcf7-form-control {
            &:not(.wpcf7-submit) {
                border-color: #ffffff;
                color: #656565;
                font-size: 14px;
                padding-left: 18px;
                &:focus {
                	border-color: $primary_color;
                	color: #000;
                }
            }
        }
        .wpcf7-form .wpcf7-form-control-wrap {
        	margin-bottom: 30px;
        }
        .nice-select span.current {
        	line-height: 35px;
        }
	}
	&.style2 {
		.wpcf7-form-control {
            &:not(.wpcf7-submit) {
                border-color: #e7e7e7;
                background-color: #fafafa;
                @include border-radius(3px);
                color: #888888;
                font-size: 18px;
                padding-left: 18px;
                height: 55px;
                font-weight: 600;
                @include font-family-heading($heading_default_font);
                &:focus {
                	border-color: $primary_color;
                	color: #000;
                }
            }
            &.wpcf7-textarea {
            	height: 220px;
            }
        }
        .wpcf7-form .wpcf7-form-control-wrap {
        	margin-bottom: 20px;
        }
        .wpcf7-submit {
        	line-height: 55px;
        	padding: 0 26px;
        }
	}
	&.style3 {
		.wpcf7-form-control {
            &:not(.wpcf7-submit) {
                border-color: #eaeaea;
                background-color: #fafafa;
                @include border-radius(5px);
                color: #666666;
                font-size: 15px;
                padding-left: 18px;
                height: 55px;
                font-weight: normal;
                &:focus {
                	border-color: $primary_color;
                	color: #000;
                }
            }
            &.wpcf7-textarea {
            	height: 205px;
            }
        }
        .wpcf7-form .wpcf7-form-control-wrap {
        	margin-bottom: 20px;
        }
        .wpcf7-submit {
        	line-height: 55px;
        	padding: 0 32px;
        	@include border-radius(5px);
        	font-family: "Poppins", Sans-serif;
        }
	}
	&.style4 {
		.wpcf7-form-control {
            &:not(.wpcf7-submit) {
                border: none;
                border-bottom: 2px solid #e9e9e9;
                background-color: transparent;
                @include border-radius(0px);
                color: #000000;
                font-size: 15px;
                font-weight: 500;
                padding-left: 0;
                height: 55px;
                &:focus {
                	border-color: $primary_color;
                	color: #000;
                }
            }
            &.wpcf7-textarea {
            	height: 110px;
            	padding-top: 15px;
            }
        }
        .wpcf7-form .wpcf7-form-control-wrap {
        	margin-bottom: 16px;
        }
        .wpcf7-submit {
        	line-height: 52px;
        	padding: 0 25px;
        	@include border-radius(52px);
        	margin-top: 4px;
        	@include box-shadow(0 6px 27px #{'rgba(var(--primary-color-rgb),0.34)'});
        }
	}
	&.style-box-gray1 {
		.wpcf7-form-control {
			&:not(.wpcf7-submit) {
				border-color: #f5f8f8;
				background-color: #f5f8f8;
				height: 50px;
				font-size: 16px;
				color: rgba(#555555, 0.5);
				@include border-radius(0px);
				font-family: 'Saira', sans-serif;
				&:hover, &:focus {
					border-color: #{'rgba(var(--primary-color-rgb),0.2)'};
				}
			}
			&.wpcf7-textarea {
				height: 105px;
				padding-top: 12px;
			}
		}
		.wpcf7-form-control-wrap {
			margin-bottom: 20px;
		}
		.btn.btn-primary {
			box-shadow: none !important;
			border-radius: 3px;
			font-weight: 600;
			font-family: "Nunito", Sans-serif;
		}
	}
	&.style-border-gray3 {
		color: #6b6b6b;
		.wpcf7-form-control {
            &:not(.wpcf7-submit) {
                border: 2px solid #e1e1e1;
                background-color: #fff;
                @include border-radius(0px);
                color: #4d4d4d;
                font-size: 16px;
                padding-right: 15px;
                padding-left: 18px;
                height: 56px;
                font-weight: normal;
                &:focus {
                	border-color: $primary_color;
                	color: #000;
                }
            }
            &.wpcf7-textarea {
            	height: 205px;
            }
        }
        .wpcf7-form .wpcf7-form-control-wrap {
        	margin-bottom: 34px;
        }
        .wpcf7-submit {
        	line-height: 56px;
        	padding: 0 60px;
        	@include border-radius(56px);
        	&.btn-primary {
        		background-image: none;
        		&:hover, &:focus {
        			outline: none;
        			background-image: none;
        			@include box-shadow(none !important);
        		}
        	}
        }
        .input-filled-description {
        	margin-top: -12px;
        	margin-bottom: 22px;
        }
	}
}

.ct-client-carousel1.style1 {
	.ct-client--image {
        text-align: center;
        padding: 0 15px;
        margin: 28px 0;
        position: relative;
        overflow: hidden;
        a {
            display: inline-block;
            vertical-align: top;
        }
        img {
            @include transition(all 0.3s cubic-bezier(0, 0, 0.2, 1) 0s);
            position: relative;
            width: auto;
            &.ct-client--imghover {
                position: absolute;
                top: 50%;
                left: 50%;
                @include transform(translate(-50%, -150%));
                opacity: 0;
            }
        }
        &.img-hover-active:hover {
        	.ct-client--imgmain {
                @include transform(translateY(100%));
                opacity: 0;
            }
            .ct-client--imghover {
                @include transform(translate(-50%, -50%));
                opacity: 1;
            }
        }
    }
}

.ct-client-carousel1 .slick-track {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}


.ct-client-carousel1.style2 {
    .ct-client--image {
        text-align: center;
        padding: 0 15px;
        a {
            display: inline-block;
            vertical-align: top;
            @include transition(all 0.3s cubic-bezier(0, 0, 0.2, 1) 0s);
        }
        img {
            @include transition(all 0.3s cubic-bezier(0, 0, 0.2, 1) 0s);
            position: relative;
            &.image-two {
                position: absolute;
                top: 50%;
                left: 50%;
                @include transform(translate(-50%, -150%));
                opacity: 0;
            }
        }
        a {
            display: inline-block;
            vertical-align: top;
            @include transition(all 0.3s cubic-bezier(0, 0, 0.2, 1) 0s);
            position: relative;
            overflow: hidden;
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
            opacity: 0.5;
            &:hover {
                opacity: 1;
                -webkit-filter: grayscale(0%);
                filter: grayscale(0%);
                img {
                    &.image-one {
                        @include transform(translateY(100%));
                        opacity: 0;
                    }
                    &.image-two {
                        @include transform(translate(-50%, -50%));
                        opacity: 1;
                    }
                }
            }
        }
    }
}

.ct-client-grid1 {
	&.style1 {
		margin: 0;
		overflow: hidden;
		padding: 0 50px;
		width: calc(100% + 100px);
		margin-left: -50px;
		.ct-client--image {
	        text-align: center;
	        padding: 0 15px;
	        position: relative;
	        overflow: hidden;
	        min-height: 100px;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: center;
	        a {
	            display: inline-block;
	            vertical-align: top;
	        }
	        img {
	            @include transition(all 0.3s cubic-bezier(0, 0, 0.2, 1) 0s);
	            position: relative;
	            width: auto;
	            max-height: 80px;
	        }
	        .ct-client--imghover {
	            position: absolute;
	            top: 50%;
	            left: 50%;
	            @include transform(translate(-50%, -50%));
	            opacity: 0;
	            width: 100%;
				height: 100%;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: center;
				padding: 0 15px;
				@include transition(all 0.3s cubic-bezier(0, 0, 0.2, 1) 0s);
	        }
	        &.img-hover-active:hover {
	        	background-color: #fff;
	        	@include box-shadow(0 15px 55px rgba(#8a8a8a, 0.3));
	        	.ct-client--imgmain {
	                opacity: 0;
	            }
	            .ct-client--imghover {
	                opacity: 1;
	            }
	        }
	    }
	    .ct-grid-inner {
	    	padding: 70px 0;
	    	.grid-item {
	    		padding: 0;
	    		border-top: 1px solid #f2f2f2;
	    		border-bottom: 1px solid #f2f2f2;
	    		margin-top: -1px;
	    		@media #{$max-lg} {
	    			border: none;
	    		}
	    		&.col-xl-4:nth-child(1),
	    		&.col-xl-4:nth-child(2),
	    		&.col-xl-4:nth-child(4),
	    		&.col-xl-4:nth-child(5),
	    		&.col-xl-4:nth-child(7),
	    		&.col-xl-4:nth-child(8),
	    		&.col-xl-4:nth-child(10),
	    		&.col-xl-4:nth-child(11),
	    		&.col-xl-4:nth-child(13),
	    		&.col-xl-4:nth-child(14),
	    		&.col-xl-4:nth-child(16),
	    		&.col-xl-4:nth-child(17) {
	    			&:before {
	    				content: '';
	    				top: -40px;
	    				height: 180px;
	    				right: 0;
	    				width: 1px;
	    				background-color: #f2f2f2;
	    				position: absolute;
	    				left: 100%;
	    				@media #{$max-lg} {
			    			display: none;
			    		}
	    			}
	    		}
	    	}
	    }
	}
	&.style2 {
		.ct-client--image {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: center;
			min-height: 100px;
			.ct-client--imgmain {
				@include transition(all 0.3s cubic-bezier(0, 0, 0.2, 1) 0s);
			}
			.ct-client--imghover {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				transform: translateY(100%);
				@include transition(all 0.3s cubic-bezier(0, 0, 0.2, 1) 0s);
			}
	    }
	    a {
			display: inline-block;
			overflow: hidden;
			position: relative;
			&:hover {
				.ct-client--imgmain {
					transform: translateY(-100%);
				}
				.ct-client--imghover {
					transform: translateY(0%);
				}
			}
		}
	}
}

.ct-image-single {
	position: relative;
	@include border-radius(inherit !important);
	&:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background-color: #000;
		opacity: 0;
		z-index: 88;
	}
	a {
		display: block;
		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 99;
		}
	}
	img {
		@include border-radius(inherit !important);
		width: auto;
		@include transition(.3s cubic-bezier(.24,.74,.58,1));
	}
	.img-hover {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 99;
		opacity: 0;
	}
	.ct-image-single--inner {
		display: inline-block;
		position: relative;
		border-radius: inherit;
	}
}

.ct-text-editor {
    .first-letter {
        display: inline-block;
        float: left;
        margin: 5px 16px 0 0;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        @include box-shadow(0 10px 30px #{'rgba(var(--primary-color-rgb),0.45)'});
        color: #fff;
        background-color: $primary_color;
        @include border-radius(5px);
        font-size: 30px;
        font-weight: 600;
        @include font-family-heading($heading_default_font);
    }
    .ct-item--inner {
	    display: inline-block;
	    width: 100%;
	}
}

.ct-list {
	.ct-list-icon i {
		display: inline-flex;
	}
	.ct-list-item {
		display: flex;
		flex-wrap: nowrap;
		font-size: 17px;
		color: #666666;
		line-height: 1.76;
		i {
			font-size: 15px;
			margin-right: 10px;
			@extend .text-gradient;
		}
		+ .ct-list-item  {
			margin-top: 24px;
		}
	}
}

.ct-list-single {
	color: #454347;
	display: flex;
	flex-wrap: nowrap;
	.ct-list-number {
		min-width: 27px;
		height: 27px;
		width: 27px;
		line-height: 27px;
		text-align: center;
		font-size: 16px;
		color: #fff;
		font-weight: 700;
		@include background-horizontal-right($gradient_color_from, $gradient_color_to);
		@include border-radius(100%);
		@include box-shadow(0 10px 13px #{'rgba(var(--gradient-color-to-rgb),0.21)'});
		margin-right: 14px;
	}
}

.ct-case-studies1 {
	.item--image {
		img {
			width: 100%;
		}
		&.bg-image {
			height: 600px;
		}
		position: relative;
		&:before {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-position: bottom center;
			background-size: cover;
			background-repeat: no-repeat;
			background-image: url(../images/case-overlay.png);
			@media #{$max-sm} {
				height: 140%;
			}
		}
	}
	.item--subtitle {
		font-size: 18px;
		font-weight: 700;
		color: $primary_color;
		display: inline-flex;
		align-items: center;
		margin-bottom: 23px;
		svg {
			margin-left: 22px;
		}
	}
	.item--title {
		margin-bottom: 20px;
		font-size: 30px;
		color: #fff;
		@media #{$max-lg} {
			font-size: 24px;
		}
		a {
			color: inherit;
			&:hover {
				color: inherit;
			}
		}
	}
	.item--description {
		color: #e1e1e1;
		margin-bottom: 24px;
	}
	.item--readmore {
		a {
			height: 52px;
			width: 52px;
			background-color: $primary_color;
			display: inline-block;
			line-height: 52px;
			text-align: center;
			@include border-radius(52px);
			color: #fff;
			font-size: 18px;
			overflow: hidden;
			i {
				display: inline-block;
			}
			&:hover i {
				-o-animation: toRightFromLeft 0.6s forwards;
		        -ms-animation: toRightFromLeft 0.6s forwards;
		        -webkit-animation: toRightFromLeft 0.6s forwards;
		        animation: toRightFromLeft 0.6s forwards;
			}
		}
	}
	.item--holder {
		position: absolute;
		bottom: 0;
		left: 11%;
		padding: 30px 30px 40px 30px;
		max-width: 580px;
		z-index: 99;
		@media #{$max-xxl} {
			left: 0;
			max-width: 500px;
		}
		@media #{$max-lg} {
			padding-bottom: 80px;
			padding-right: 50px;
		}
		@media #{$max-sm} {
			padding-left: 20px;
		}
	}
	.item--inner {
		position: relative;
	}
	.slick-dots {
		position: absolute;
		right: 15px;
		bottom: 0;
		background-color: #{'rgba(var(--primary-color-rgb),0.67)'};
		margin: 0;
		padding: 30px 62px 30px 137px;
		display: block;
		min-width: 46px;
		@media #{$max-xxl} {
			padding-left: 62px;
		}
		@media #{$max-lg} {
			background-color: transparent;
			padding-left: 0;
			padding-right: 42px;
			padding-bottom: 20px;
		}
		li {
			justify-content: center;
			margin: 14px 0;
			button {
				background-color: #fff;
				&:before {
					color: #fff;
				}
				&:after {
					border-color: rgba(#fff, 0.9);
				}
			}
			&.slick-active {
				button {
					background-color: transparent;
					height: 46px;
					width: auto;
				}
			}
		}
	}
}

.ct-link1 {
	&.default {
		ul {
			list-style: none;
			margin: 0;
		}
	}
	&.style1 {
		a {
			display: block;
			background-color: #e6ebf4;
			font-size: 18px;
			color: #000917;
			font-weight: 700;
			@include font-family-heading($heading_default_font);
			padding: 14px 40px;
			position: relative;
			@media #{$max-md} {
				padding-left: 30px;
				padding-right: 20px;
				font-size: 16px;
			}
			&:after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				margin: auto;
				height: 0;
				background-color: $third_color;
				@include transition(.3s cubic-bezier(.24,.74,.58,1));
				width: 4px;
			}
			&:hover {
				color: #fff;
				background-color: $primary_color;
				padding-left: 60px;
				@media #{$max-md} {
					padding-left: 40px;
				}
				&:before {
					content: '-';
					margin-right: 4px;
				}
				&:after {
					height: 100%;
				}
			}
		}
		li + li {
			margin-top: 10px;
		}
		.ct-link-items {
			list-style: none;
			margin-bottom: 0;
		}
	}
	&.style2 {
		a {
			color: #fff;
			font-weight: 700;
			position: relative;
			&:before {
				content: '';
				width: 8px;
				height: 2px;
				background-color: $primary_color;
				position: absolute;
				top: 50%;
				left: -20px;
				@include transform(translate(0, -50%));
				@include transition(.3s cubic-bezier(.24,.74,.58,1));
				opacity: 0;
			}
			&:hover {
				padding-left: 18px;
				&:before {
					opacity: 1;
					left: 0;
				}
			}
		}
		li + li {
			margin-top: 10px;
		}
		.ct-link-items {
			margin: 0;
			list-style: none;
		}
	}
}

.ct-slider-video {
	width: 92px;
	min-width: 92px;
	height: 92px;
	display: inline-block;
	background-color: #fff;
	@include border-radius(92px);
	position: relative;
	line-height: 92px;
	text-align: center;
	font-size: 20px;
	color: $primary_color;
	@media #{$max-md} {
		min-width: 80px;
		width: 80px;
		height: 80px;
		line-height: 80px;
		font-size: 18px;
	}
	@media #{$max-sm} {
		min-width: 70px;
		width: 70px;
		height: 70px;
		line-height: 70px;
		font-size: 17px;
	}
	&:before {
        content: "";
        position: absolute;
        z-index: 0;
        left: 0;
        top: 0;
        display: block;
        width: 100%;
        height: 100%;
        background-color: rgba(#fff, 0.63);
        border-radius: 50%;
        animation: pulse-border2 1500ms ease-out infinite;
        -webkit-animation: pulse-border2 1500ms ease-out infinite;
        z-index: -2;
    }
    &:hover, &:focus, &:active {
    	color: $primary_color;
        &:before {
            -webkit-animation-play-state: paused;
            -moz-animation-play-state: paused;
            -o-animation-play-state: paused;
            animation-play-state: paused;
        }
    }
}

.ct-button-video1 {
	a {
		font-size: 16px;
		padding-left: 28px;
		padding-right: 68px;
		line-height: 72px;
		overflow: visible !important;
	}
	span {
		position: absolute;
		top: 50%;
		@include transform(translate(0, -50%));
		right: -31px;
		width: 77px;
		height: 77px;
		background-color: #fff;
		@include border-radius(77px);
		line-height: 77px;
		text-align: center;
		font-size: 18px;
		color: #000000;
	}
}

.ct-button-video2 {
	padding-top: 56px;
	padding-right: 60px;
	position: relative;
	max-width: 394px;
	z-index: 1;
	@media #{$max-sm} {
		padding-top: 30px;
		padding-right: 30px;
	}
	.ct-video-image img {
		width: 100%;
		@include border-radius(20px);
	}
	.ct-video-shape {
		position: absolute;
		top: 0;
		right: 0;
		z-index: -1;
		animation: animationFramesTwo 12s infinite linear alternate;
	}
	.el-btn-video {
		position: absolute;
		right: 30px;
		bottom: 56px;
		z-index: 99;
		width: 56px;
		height: 56px;
		font-size: 14px;
		line-height: 56px;
		text-align: center;
		@include background-horizontal-right($gradient_color_from, $gradient_color_to);
		color: #fff;
		@include border-radius(56px);
		@media #{$max-sm} {
			right: 2px;
		}
		&:before {
            content: "";
            position: absolute;
            z-index: 0;
            left: 0;
            top: 0;
            display: block;
            width: 100%;
            height: 100%;
            background-color: #{'rgba(var(--primary-color-rgb),0.63)'};
            border-radius: 50%;
            animation: pulse-border2 1500ms ease-out infinite;
            -webkit-animation: pulse-border2 1500ms ease-out infinite;
            z-index: -2;
        }
        &:hover, &:focus, &:active {
            &:before {
                -webkit-animation-play-state: paused;
                -moz-animation-play-state: paused;
                -o-animation-play-state: paused;
                animation-play-state: paused;
            }
        }
	}
}

body.rtl {
	.ct-button-video2 {
		padding-left: 60px;
		padding-right: 0px;
		@media #{$max-sm} {
			padding-left: 30px;
			padding-right: 0px;
		}
		.el-btn-video {
			right: auto;
			left: 30px;
			@media #{$max-sm} {
				right: auto;
				left: 2px;
			}
		}
		.ct-video-shape {
			right: auto;
			left: 0;
		}
	}
	.btn-text-gr:hover i {
		margin-left: 0;
		margin-right: 8px;
	}
}

.ct-banner1 {
	.ct-banner-image {
		position: relative;
		img {
			width: 100%;
		}
	}
	.item--icon {
		line-height: 1;
		margin-right: 14px;
		i {
			font-size: 64px;
			color: $secondary_color;
			@media #{$max-lg} {
				font-size: 54px;
			}
		}
	}
	.item--title {
		font-size: 24px;
		margin-bottom: 8px;
		margin-top: 8px;
		@media #{$max-lg} {
			font-size: 20px;
		}
	}
	.item--desc {
		font-size: 15px;
		line-height: 22px;
		color: #888;
	}
	.ct-banner-holder {
		background-color: #fff;
		position: absolute;
		bottom: -38px;
		left: 18px;
		right: 18px;
		@include box-shadow(0 8px 65px rgba(#0c0c0c, 0.19));
		@include border-radius(30px 30px 0 0);
		padding: 20px 30px;
		display: flex;
		flex-wrap: nowrap;
		@media #{$max-lg} {
			position: static;
			border-radius: 0px;
			padding-left: 20px;
			padding-right: 20px;
		}
	}
	.ct-banner-counter {
		position: absolute;
		padding: 27px 20px 27px 26px;
		width: 170px;
		top: -48px;
		left: -45px;
		z-index: 99;
		@include background-horizontal-right($gradient_color_from, $gradient_color_to);
		z-index: 1;
		@media #{$max-sm} {
			left: 0;
		}
		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
			background-image: url(../images/counter-dots.png);
			background-position: top right;
			background-repeat: no-repeat;
		}
		.ct-counter-number-value {
			line-height: 1;
			font-size: 60px;
			font-weight: 700;
			color: #fff;
			@include font-family-heading($heading_default_font);
			margin-bottom: 4px;
		}
		.ct-counter-title {
			font-size: 20px;
			line-height: 24px;
			font-weight: 700;
			color: #fff;
			letter-spacing: -0.01em;
		}
	}
	.ct-banner-inner {
		padding-top: 90px;
		margin-right: 100px;
		position: relative;
		z-index: 1;
		@media #{$max-lg} {
			margin-right: 30px;
			padding-top: 30px;
		}
		@media #{$max-sm} {
			margin-right: 0px;
		}
		&:before {
			content: '';
			width: 550px;
			height: 550px;
			border: 66px solid $primary_color;
			position: absolute;
			top: 0px;
			right: -100px;
			z-index: -1;
			@include border-radius(100%);
			animation: el-bounce 3s infinite linear alternate;
			@media #{$max-lg} {
				width: 360px;
				height: 360px;
				border-width: 40px;
				right: -30px;
			}
			@media #{$max-sm} {
				width: 280px;
				height: 280px;
				border-width: 32px;
				right: -50px;
			}
		}
	}
}

.ct-banner2 {
	.ct-banner-image {
		position: relative;
		z-index: 99;
		padding-top: 42px;
		padding-right: 64px;
		padding-left: 44px;
		@media #{$max-md2} {
			padding-top: 30px;
			padding-left: 30px;
			padding-right: 40px;
		}
		@media #{$max-sm} {
			padding: 0 20px 0 0;
		}
		img {
			width: 100%;
			@include box-shadow(0 25px 18px rgba(#000945, 0.28));
			@include border-radius(30px);
		}
		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 184px;
			bottom: 75px;
			@include border-radius(30px);
			z-index: -1;
			background-color: #f4f9fd;
		}
	}
	.ct-banner-shape {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 88;
		animation: animationFramesFive 12s infinite linear alternate;
	}
	.ct-banner-inner {
		position: relative;
	}
}

.ct-banner3 {
	height: 590px;
	position: relative;
	z-index: 1;
	margin-left: 80px;
	@media #{$max-lg} {
		margin-left: 48px;
	}
	@media #{$max-sm} {
		margin-left: 0px;
		height: 420px;
	}
	&:before {
		content: '';
		width: 100%;
		height: 100%;
		@include background-horizontal-right($gradient_color_from, $gradient_color_to);
		position: absolute;
		top: 0;
		left: 0;
		@include border-radius(465px 0px 5px 5px);
		z-index: -2;
		@media #{$max-sm} {
			@include border-radius(225px 0px 5px 5px);
		}
	}
	&:after {
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		@include border-radius(465px 0px 5px 5px);
		z-index: -1;
		overflow: hidden;
		background-image: url(../images/overlay-shape3.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		@media #{$max-sm} {
			@include border-radius(225px 0px 5px 5px);
		}
	}
	.ct-banner-image {
		position: absolute;
		top: 45px;
		left: -75px;
		right: 74px;
		border: 10px solid #fff;
		@include border-radius(100%);
		img {
			@include border-radius(100%);
		}
		@media #{$max-sm} {
			left: 0px;
		}
	}
	.ct-banner-counter {
		position: absolute;
		top: -10px;
		left: -90px;
		width: 170px;
		height: 170px;
		border: 10px solid #fff;
		border-radius: 170px;
		overflow: hidden;
		@include background-horizontal-right($gradient_color_from, $gradient_color_to);
		@include box-shadow(0 10px 60px rgba(#000a50, 0.15));
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		text-align: center;
		@media #{$max-sm} {
			left: 0px;
		}
		.ct-counter-title {
			font-size: 18px;
			text-transform: uppercase;
			color: #fff;
			line-height: 1;
			white-space: nowrap;
			margin-bottom: 10px;
		}
		.ct-counter-number-value {
			font-size: 44px;
			color: #fff;
			font-weight: 700;
			line-height: 1;
		}
	}
	.item--title {
		position: absolute;
		bottom: 50px;
		right: 18px;
		font-size: 24px;
		color: #fff;
		font-weight: 700;
		white-space: nowrap;
		@include transform(rotate(-90deg) translate(100%, 0));
		transform-origin: right bottom;
		@media #{$max-sm} {
			right: 0;
			left: 20px;
			white-space: inherit;
			@include transform(rotate(0deg) translate(0%, 0));
			bottom: 30px;
			font-size: 20px;
			line-height: normal;
		}
	}
}

.ct-banner4 {
	.ct-banner-image {
		img {
			width: 100%;
			@include border-radius(5px);
		}
	}
	.ct-banner-image-sm {
		max-width: 318px;
		width: 65%;
		position: absolute;
		bottom: 0;
		right: 0;
		background-color: #fff;
		border-radius: 5px 0px 0px 0;
		padding: 15px 0px 15px 15px;
		@media #{$max-xl} {
			max-width: 202px;
		}
		img {
			width: 100%;
		}
	}
	.item--title {
		font-size: 20px;
		margin-bottom: 0px;
		position: absolute;
		line-height: 82px;
		white-space: nowrap;
		background-color: $primary_color;
		text-align: center;
		padding: 0 20px;
		border-radius: 5px;
		color: #fff;
		width: 100%;
		max-width: 322px;
		overflow: hidden;
		top: 0;
		right: 82px;
		transform-origin: top right;
		transform: rotate(-90deg);
		@media #{$max-xl} {
			line-height: 52px;
			font-size: 17px;
			right: 52px;
			max-width: 222px;
		}
	}
	.ct-banner-inner {
		position: relative;
		padding-right: 94px;
		@media #{$max-xl} {
			padding-right: 64px;
		}
	}
}

.ct-history-carousel1 {
    .item--image {
        display: inline-block;
        margin: 0 auto;
        background-color: transparent;
        width: 113px;
        height: 128px;
        position: relative;
        z-index: 1;
        @include transition(.3s cubic-bezier(.24,.74,.58,1));
        .item--mask {
            content: '';
            width: 100%;
            height: 100%;
            mask-image: url(../images/bg-history.png);
            -webkit-mask-image: url(../images/bg-history.png);
            -ms-mask-image: url(../images/bg-history.png);
            -o-mask-image: url(../images/bg-history.png);
            position: absolute;
            top: 0;
            left: 0;
            -webkit-mask-repeat: no-repeat;
            -ms-mask-repeat: no-repeat;
            -o-mask-repeat: no-repeat;
            -webkit-mask-position: center top;
            -ms-mask-position: center top;
            -o-mask-position: center top;
            mask-position: center top;
            display: inline-block;
        }
    }
    .item--title {
        font-size: 20px;
        line-height: 26px;
        margin-top: 17px;
        margin-bottom: 12px;
        @include transition(.3s cubic-bezier(.24,.74,.58,1));
    }
    .item--year {
        font-size: 20px;
        color: #fff;
        font-weight: 700;
        @include font-family-heading($heading_default_font);
        line-height: 54px;
        position: relative;
        background-color: $primary_color;
        margin: 11px 24px 0;
        &:before {
            content: '';
            border-color: transparent transparent transparent $primary_color;
            border-width: 27px;
            border-style: solid;
            position: absolute;
            top: 0;
            right: -54px;
        }
        span {
            &:before, &:after {
                content: '';
                border-width: 27px;
                border-style: solid;
                position: absolute;
                left: -27px;
            }
            &:before {
                top: 0;
                border-color: $primary_color $primary_color transparent transparent;
            }
            &:after {
                bottom: 0;
                border-color: transparent $primary_color $primary_color transparent;
            }
        }
    }
    .item--description {
        font-size: 15px;
        line-height: 22px;
        color: #6a6a6a;
    }
    .item--inner {
        text-align: center;
        margin-top: 15px;
        &:hover {
            .item--title {
                color: $primary_color;
            }
            .item--image {
                animation: icon-bounce 800ms ease-out infinite;
                -webkit-animation: icon-bounce 800ms ease-out infinite;
            }
        }
    }
    .ct-slick-carousel[data-arrows="true"] {
        padding: 0 80px;
        z-index: 1;
        @media #{$max-lg} {
            padding-left: 60px;
            padding-right: 60px;
        }
        @media #{$max-sm} {
            padding-left: 45px;
            padding-right: 45px;
        }
        &:before {
            content: '';
            height: 0;
            left: 15px;
            right: 15px;
            z-index: -1;
            border-bottom: 2px dotted #cec7b9;
            position: absolute;
            top: 188px;
        }
        .slick-arrow {
            margin: 0;
            top: 173px;
            transform: translate(0, 0);
            bottom: auto;
            height: 30px;
            width: 30px;
            background-color: #f0f3f7;
            border: 3px solid $primary_color;
            color: #191919;
            &:before {
            	font-size: 10px;
            }
            &.slick-prev {
                left: 0;
                right: auto;
                @media #{$max-lg} {
                    left: 15px;
                }
            }
            &.slick-next {
                left: auto;
                right: 0;
                @media #{$max-lg} {
                    right: 15px;
                }
            }
            &:hover {
                color: #191919;
                border-color: $primary_color;
                background-color: $primary_color;
                &:before {
                	color: #fff;
                }
            }
        }
    }
}

.ct-particle-animate {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    @media #{$max-md} {
        display: none;
    }
    &.img-above-content {
    	z-index: 99;
    }
    img {
        width: 100% !important;
        height: auto;
    }
    div {
        position: absolute;
        &.top-left {
            top: 0;
            left: 0;
        }
        &.top-right {
            top: 0;
            right: 0;
        }
    }
    .shape-animate1 {
        animation: animationFramesTwo 12s infinite linear alternate;
    }
    .shape-animate2 {
        animation: animationFramesOne 12s infinite linear alternate;
    }
    .shape-animate3 {
        animation: animationFramesFour 12s infinite linear alternate;
    }
    .shape-animate4 {
        animation: animationFramesThree 12s infinite linear alternate;
    }
    .shape-animate5 {
        animation: animationFramesFive 12s infinite linear alternate;
    }
    .shape-animate6 {
    	animation: particleToptoBottom 10s infinite linear alternate;
    }
}

.el-square-gradient .slick-dots {
	&:before {
		content: '';
		position: absolute;
		top: 100%;
		left: 100%;
		z-index: 99;
		width: 72px;
		height: 72px;
		@include background-horizontal-right($gradient_color_from, $gradient_color_to);
	}
}

.ct-pricing-single1 {
	background-color: #fff;
	@include border-radius(5px);
	overflow: hidden;
	@include box-shadow(0 17px 50px rgba(#000a50, 0.05));
	text-align: center;
	@include transition(.3s cubic-bezier(.24,.74,.58,1));
	&:hover {
		@include box-shadow(0 17px 50px rgba(#000a50, 0.15));
	}
	.pricing--holder {
		padding: 25px 20px 40px 20px;
	}
	.pricing--meta {
		padding: 42px 20px 152px 20px;
		position: relative;
		z-index: 99;
		.item--image {
			z-index: -1;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			&:before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: #{'rgba(var(--primary-color-rgb),0.8)'};
			}
		}
		svg {
			height: 84px;
			fill: #fff;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: -1;
		}
	}
	.pricing--title {
		font-size: 36px;
		margin-bottom: 0;
		color: #fff;
		@media #{$max-lg} {
			font-size: 24px;
		}	
	}
	.pricing--icon {
		position: absolute;
		bottom: -4px;
		left: 50%;
		@include transform(translate(-50%, 0));
		height: 104px;
		width: 104px;
		border: 3px solid $primary_color;
		background-color: #fff;
		@include border-radius(100%);
		i {
			font-size: 60px;
			@extend .text-gradient;
		}
	}
	.pricing--price {
		@include font-family-heading($heading_default_font);
		font-size: 36px;
		font-weight: 700;
		color: #333;
		margin-bottom: 12px;
		@media #{$max-lg} {
			font-size: 24px;
		}	
	}
	.pricing--feature {
		list-style: none;
		font-size: 18px;
		color: #888888;
		margin-bottom: 24px;
		@media #{$max-lg} {
			font-size: 15px;
		}	
		li {
			i {
				font-size: 13px;
				margin-right: 4px;
			}
			+ li {
				margin-top: 10px;
			}
		}
	}
	.pricing--button {
		.btn {
			font-weight: 600;
			color: #333;
			background: transparent;
			border: 2px solid $primary_color;
			line-height: 41px;
			padding: 0 26px;
			&:hover {
				background: $primary_color;
				color: #fff;
			}
		}
	}
}

.ct-pricing-single2 {
	background-color: #fafdff;
	@include border-radius(15px);
	padding: 50px 30px 68px 30px;
	@include box-shadow(0 15px 18px rgba(2, 0, 103, 0.05));
	@include transition(.3s cubic-bezier(.24,.74,.58,1));
	text-align: center;
	.pricing--title {
		font-size: 30px;
		color: #06163a;
		margin-bottom: 26px;
		@include transition(.3s cubic-bezier(.24,.74,.58,1));
		@media #{$max-lg} {
			font-size: 24px;
		}
	}
	.pricing--price {
		font-size: 33px;
		color: #06163a;
		font-weight: 700;
		height: 120px;
		width: 120px;
		position: relative;
		@include border-radius(120px);
		z-index: 1;
		line-height: 120px;
		margin: 0 auto 24px auto;
		right: 12px;
		@include transition(.3s cubic-bezier(.24,.74,.58,1));
		cite {
			font-size: 18px;
			font-style: normal;
		}
		span {
			position: absolute;
			top: 3px;
			right: -28px;
			width: 58px;
			height: 58px;
			line-height: 58px;
			font-size: 22px;
			background-color: #fff;
			@include border-radius(58px);
			@include transition(.3s cubic-bezier(.24,.74,.58,1));
		}
		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			@include border-radius(120px);
			@include box-shadow(0 6px 19px rgba(#000000, 0.2));
			z-index: -1;
			background-color: #fff;
			@include transition(.3s cubic-bezier(.24,.74,.58,1));
		}
		&:after {
			content: '';
			@include box-shadow(0 6px 19px rgba(#000000, 0.2));
			position: absolute;
			top: 3px;
			right: -28px;
			width: 58px;
			height: 58px;
			background-color: #fff;
			z-index: -2;
			@include border-radius(58px);
			@include transition(.3s cubic-bezier(.24,.74,.58,1));
		}
	}
	.pricing--feature {
		font-size: 16px;
		color: #244080;
		margin-bottom: 40px;
		list-style: none;
		li + li {
			margin-top: 20px;
		}
		@media #{$max-lg} {
			font-size: 15px;
		}
	}
	.pricing--button {
		.btn {
			line-height: 54px;
			padding: 0 44px;
			@include border-radius(10px);
			background: #06163a;
			font-size: 16px;
		}
	}
	&:hover {
		@include box-shadow(0 18px 40px rgba(#585bff, 0.11));
		background-color: #fff;
		.pricing--title {
			color: $primary_color;
		}
		.pricing--price {
			color: #fff;
			@include box-shadow(none);
			&:before {
				background-color: $primary_color;
			}
			span, &:after {
				background-color: #e3471f;
				@include box-shadow(none);
			}
		}
		.pricing--button .btn {
			background-color: #e3471f;
		}
	}
}

.ct-pricing-single3 {
	background-color: #fff;
	border-radius: 5px;
	@include box-shadow(0 15px 45px rgba(#000000, 0.05));
	text-align: center;
	.pricing--meta {
		padding: 15px 20px 20px;
		.pricing--title {
			margin-bottom: 0;
			font-size: 24px;
			font-weight: 600;
			@media #{$max-md} {
				font-size: 20px;
			}
		}
	}
	.pricing--icon {
		position: relative;
		z-index: 1;
		padding: 38px 0 0 0;
		margin-top: -5px;
		margin-bottom: 118px;
		&:before {
			content: '';
			height: 68%;
			background-color: #f5f8f8;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index: -2;
			@include border-radius(5px 5px 0 0);
		}
		svg {
			fill: #f5f8f8;
			position: absolute;
			top: 68%;
			left: 0;
			right: 0;
			width: 100%;
			z-index: -1;
			height: auto;
		}
	}
	.pricing--price {
		font-size: 42px;
		color: #000000;
		line-height: 1;
		margin-bottom: 35px;
		@media #{$max-lg} {
			font-size: 32px;
		}
		span {
			font-size: 16px;
			color: #555;
		}
		cite {
			font-style: normal;
			font-size: 22px;
			color: #555;
			position: relative;
			top: -13px;
		}
	}
	.pricing--desc {
		color: #555555;
		margin-bottom: 30px;
	}
	.pricing--button {
		.btn {
			padding: 0 58px;
			@media #{$max-lg} {
				padding: 0 32px;
			}
		}
	}
	.pricing--holder {
		padding: 0 30px 50px 30px;
		position: relative;
		z-index: 2;
		@media #{$max-md} {
			padding-left: 20px;
			padding-right: 20px;
		}
	}
	&.ct-pricing-popular {
		.pricing--meta {
			@include background-gradient-rotate(135deg, $gradient_color_from, $gradient_color_to);
			@include border-radius(5px 5px 0 0);
			.pricing--title { color: #fff; }
		}
	}
}

.ct-pricing-layout1 {
    .ct-pricing-body {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -15px;
        align-items: flex-end;
        &.ct-pricing-hide {
            display: none;
        }
    }
    .ct-pricing-item {
        margin-bottom: 30px;
    }
    .pricing-1-column .ct-pricing-item {
        width: 100%;
        padding: 0 15px;
    }
    .pricing-2-column .ct-pricing-item {
        width: 50%;
        padding: 0 15px;
    }
    .pricing-3-column .ct-pricing-item {
        width: 33.33%;
        padding: 0 15px;
        @media #{$max-sm} {
            width: 50%;
        }
        @media #{$max-xs} {
            width: 100%;
        }
    }
    .pricing-4-column .ct-pricing-item {
        width: 25%;
        padding: 0 15px;
        @media #{$max-md} {
            width: 50%;
        }
        @media #{$max-xs} {
            width: 100%;
        }
    }
    .pricing-5-column .ct-pricing-item {
        width: 20%;
        padding: 0 15px;
        @media #{$max-md} {
            width: 50%;
        }
        @media #{$max-xs} {
            width: 100%;
        }
    }

    .ct-pricing-tab-title {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        margin-bottom: 35px;
        .ct-pricing-tab-item {
            font-size: 18px;
            line-height: 28px;
            color: #1a1e66;
            @include font-family-heading($heading_default_font);
            margin: 0 8px;
            position: relative;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            cursor: pointer;
            padding-left: 29px;
            font-weight: 700;
            @media #{$max-xs} {
                font-size: 16px;
                padding-left: 24px;
            }
            &:before, &:after {
                content: '';
                position: absolute;
                top: 50%;
                @include transform(translate(0, -50%));
                @include transition(all 300ms linear 0ms);
            }
            &:before {
                left: 0;
                width: 18px;
                height: 18px;
                @include border-radius(18px);
                border: 2px solid #b8b5b5;
            }
            &:after {
                width: 6px;
                height: 6px;
                opacity: 0;
                @include border-radius(6px);
                left: 6px;
                background-color: $primary_color;
            }
            &.active {
                &:before {
                    border-color: $primary_color;
                }
                &:after {
                    opacity: 1;
                }
            }
            span {
                font-size: 12px;
                font-weight: 500;
                color: #1a1e66;
                padding: 0 14px;
                background-color: #e3e6fb;
                border-radius: 2px;
                line-height: 27px;
                font-style: normal;
                display: inline-block;
                margin-left: 10px;
                @media #{$max-xs} {
                    padding: 0 8px;
                }
            }
        }
    }
    .item-popular {
    	font-size: 15px;
		border-radius: 8px 8px 0 0;
		background-color: #e3e6fb;
		font-weight: 500;
		color: #0e0e0e;
		text-align: center;
		padding: 10px 20px;
    }
    .ct-pricing-title {
    	font-size: 20px;
    	color: #0e0e0e;
    	margin-bottom: 10px;
    }
    .ct-pricing-subtitle {
    	color: #67687a;
    	@media #{$max-md} {
    		font-size: 14px;
    	}
    }
    .ct-pricing-top {
    	padding: 20px 27px 24px 27px;
    	@media #{$max-md} {
    		padding-left: 15px;
    		padding-right: 15px;
    	}
    }
    .ct-pricing-meta {
    	@include background-horizontal-right($gradient_color_from, $gradient_color_to);
    	padding: 2px 20px;
    	text-align: center;
    	font-size: 16px;
    	color: #ffffff;
    	display: flex;
    	flex-wrap: wrap;
    	align-items: center;
    	justify-content: center;
    	.ct-pricing-price {
    		font-weight: 700;
    		@include font-family-heading($heading_default_font);
    		font-size: 36px;
    		margin-right: 8px;
    	}
    	.ct-pricing-time {
    		margin-top: 10px;
    	}
    }
    .ct-pricing-features-list {
    	list-style: none;
    	margin-left: 20px;
    	margin-right: 20px;
    	margin-top: 14px;
    	margin-bottom: 16px;
    	list-style: none;
    	@media #{$max-md} {
    		margin-left: 15px;
    		margin-right: 15px;
    		font-size: 14px;
    	}
    	li {
    		color: #67687a;
    		padding: 12px 16px;
    		&.active {
    			background-color: #eef2fb;
    		}
    		i {
    			color: $primary_color;
    			font-size: 12px;
    			margin-right: 6px;
    		}
    	}
    }
    .ct-pricing-button {
    	padding: 0 20px 27px 20px;
    	@media #{$max-md} {
    		padding-left: 15px;
    		padding-right: 15px;
    	}
    	.btn {
    		width: 100%;
			line-height: 48px;
			font-size: 14px;
			border-radius: 48px;
    	}
    }
    .ct-pricing-item-inner {
        background-color: #fff;
        @include border-radius(8px);
        @include box-shadow(0 1px 10px rgba(#000000, 0.06));
    }
}

.ct-showcase {
	.item--image {
		position: relative;
		margin-bottom: 20px;
		@include box-shadow(0 8px 24px rgba(0, 0, 0, 0.12));
		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(#000, 0.67);
			@include transition(.3s cubic-bezier(.24,.74,.58,1));
			opacity: 0;
		}
		img {
			width: 100%;
		}
		.ct-btn-group {
			position: absolute;
			top: 50%;
			left: 0;
			right: 0;
			@include transform(translate(0%, -50%));
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin-top: 30px;
			@include transition(.3s cubic-bezier(.24,.74,.58,1));
			opacity: 0;
		}
		.btn {
			z-index: 99;
			@include transition(.3s cubic-bezier(.24,.74,.58,1));
			margin: 10px;
			color: #fff;
			line-height: 42px;
			padding: 0 22px;
			@include border-radius(55px);
			font-size: 14px;
		}
	}
	.item--title {
		font-size: 16px;
		font-weight: 700;
		text-align: center;
		span {
			color: $primary_color;
		}
	}
	&:hover {
		.item--image {
			&:before {
				opacity: 1;
			}
			.ct-btn-group {
				opacity: 1;
				margin-top: 0;
			}
		}
	}
	&.style1 {
		.item--image .btn {
			margin: 5px;
		}
		&.yes-soon {
			.item--image {
				&:before {
					opacity: 1;
				}
				.ct-btn-group {
					opacity: 1;
					margin-top: 0;
				}
			}
			.ct-btn-group .btn {
				padding: 0 22px;
			}
		}
		&.no-soon {
			.ct-btn-group {
				display: flex;
				left: 50%;
				flex-wrap: nowrap;
				right: auto;
				transform: translate(-50%, -50%);
				@include border-radius(5px);
				overflow: hidden;
				.btn {
					margin: 0;
					font-size: 14px;
					padding: 0 10px;
					@include border-radius(0px);
					background: #fff;
					color: #000;
					&.active {
						background: $primary_color;
						color: #fff;
					}
				}
			}
		}
	}
	&.style2 {
		.item--title {
			font-size: 18px;
		}
		.item--image .btn {
			margin: 5px;
		}
		&.yes-soon {
			.item--image {
				&:before {
					opacity: 1;
				}
				.ct-btn-group {
					opacity: 1;
					margin-top: 0;
				}
			}
		}
		&.no-soon {
			.ct-btn-group {
				display: flex;
				left: 50%;
				flex-wrap: nowrap;
				right: auto;
				transform: translate(-50%, -50%);
				@include border-radius(5px);
				overflow: hidden;
				.btn {
					margin: 0;
					font-size: 16px;
					padding: 0 24px;
					line-height: 60px;
					@include border-radius(0px);
					background: #fff;
					color: #000;
					@media #{$max-lg} {
						padding: 0 14px;
						line-height: 48px;
						font-size: 14px;
					}
					&.active {
						background: $primary_color;
						color: #fff;
					}
				}
			}
		}
		&.yes-soon {
			.ct-btn-group .btn {
				font-size: 24px;
				line-height: 66px;
				padding: 0 30px;
				@media #{$max-lg} {
					font-size: 18px;
					&:hover, &:focus {
						outline: none;
					}
				}
			}
		}
	}
	&.style3 {
		@include transition(.3s cubic-bezier(.24,.74,.58,1));
		.item--image .btn {
			line-height: 55px;
			border-radius: 55px;
			font-size: 20px;
			padding: 0 40px !important;
			box-shadow: 0 0 4px rgba(0,0,0,0.49) inset !important;
		}
		.item--title {
			font-size: 24px;
		}
		&:hover {
			@include transform(translateY(-18px));
		}
		&.yes-soon {
			.item--image {
				&:before {
					opacity: 1;
				}
				.btn {
					font-size: 38px;
					letter-spacing: 0.1em;
					background: none !important;
					color: $primary_color;
					box-shadow: none !important;
					text-decoration: underline;
					text-decoration-thickness: 2px;
					opacity: 1;
					margin-top: 0;
				}
			}
		}
	}
}

.ct-search-form1 {
	position: relative;
	max-width: 152px;
	@media #{$max-xl} {
		max-width: 122px;
	}
	.search-field {
		height: 54px;
		padding: 0;
		border: none;
		font-size: 16px;
		color: #71819d;
	}
	.search-submit {
		padding: 0 5px 0 20px;
		line-height: 54px;
		background: none !important;
		color: #71819d;
		position: absolute;
		top: 0;
		right: 0;
		font-size: 18px;
	}
}

.ct-search-popup1 {
	&.style1 {
		width: 45px;
		height: 45px;
		background-color: #d8d5ff;
		line-height: 45px;
		@include border-radius(5px);
		text-align: center;
		font-size: 22px;
		cursor: pointer;
		i {
			@extend .text-gradient;
		}
	}
	&.style2 {
		font-size: 20px;
		line-height: 1;
		color: #71819d;
		@include transition(.3s cubic-bezier(.24,.74,.58,1));
		cursor: pointer;
		&:hover {
			color: $primary_color;
		}
	}
	&.style3 {
		width: 52px;
		height: 52px;
		border: 1px solid #eee;
		border-radius: 52px;
		line-height: 52px;
		text-align: center;
		color: $primary_color;
		@include transition(all 250ms linear 0ms);
		cursor: pointer;
		&:hover {
			color: #fff;
			border-color: $primary_color;
			background-color: $primary_color;
		}
	}
}

.ct-language-switcher1 {
	font-size: 16px;
	color: #71819d;
	font-weight: 700;
	position: relative;
	a {
		color: inherit;
		&:hover {
			color: $primary_color;
		}
	}
	ul {
		margin: 0;
		list-style: none;
		position: absolute;
		top: 100%;
		left: 0;
		@media #{$max-xl} {
			left: auto;
			right: 0;
		}
		min-width: 160px;
		padding: 20px 30px;
		background-color: #fff;
		z-index: 99;
		@include box-shadow(0 18px 43px rgba(#5a5a5a, 0.14));
		@include border-radius(5px);
		margin-top: 30px;
		opacity: 0;
		visibility: hidden;
		@include transition(.3s cubic-bezier(.24,.74,.58,1));
		li {
			padding: 4px 0;
		}
	}
	.current--item {
		line-height: 113px;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		cursor: pointer;
		svg {
			fill: #71819d;
			margin-right: 10px;
			@media #{$max-xl} {
				margin-right: 0;
			}
		}
		label {
			cursor: pointer;
			@media #{$max-xl} {
				width: 0;
				overflow: hidden;
				opacity: 0;
			}
			&:after {
				content: "\f102";
                font-family: Caseicon;
                font-size: 9px;
                margin-left: 8px;
                line-height: 1;
			}
		}
	}
	&:hover .current--item + ul {
		opacity: 1;
		visibility: visible;
		margin-top: 0;
	}
	&.dr-right ul {
		left: auto;
		right: 0;
	}
}

body .el-flex-grow {
	flex-grow: 1;
}

.el-bounce.bounce-active i {
	animation: el-icon-bounce 600ms ease-out infinite;
	-webkit-animation: el-icon-bounce 600ms ease-out infinite;
}

.ct-social-icon1 {
	a {
		width: 32px;
		height: 32px;
		background-color: #fff;
		line-height: 32px;
		text-align: center;
		font-size: 18px;
		color: #000;
		position: relative;
		z-index: 1;
		display: inline-block;
		@include border-radius(32px);
		margin-right: 10px;
		&:before {
			content: '';
			width: 32px;
			height: 32px;
			@include border-radius(32px);
			z-index: -1;
			@include background-horizontal-right($gradient_color_from, $gradient_color_to);
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
			@include transition(.3s cubic-bezier(.24,.74,.58,1));
		}
		&:hover {
			background-color: transparent;
			color: #fff;
			&:before {
				opacity: 1;
			}
		}
	}
}

.ct-social-icon2 {
	width: 50px;
	a {
		width: 50px;
		height: 50px;
		background-color: transparent;
		line-height: 46px;
		text-align: center;
		font-size: 22px;
		color: #000;
		position: relative;
		z-index: 1;
		display: inline-block;
		@include border-radius(50px);
		border: 2px solid #000;
		margin: 0 0 15px;
		&:before {
			content: '';
			width: 50px;
			height: 50px;
			@include border-radius(50px);
			z-index: -1;
			@include background-horizontal-right($gradient_color_from, $gradient_color_to);
			position: absolute;
			top: -2px;
			left: -2px;
			opacity: 0;
			@include transition(.3s cubic-bezier(.24,.74,.58,1));
		}
		&:hover {
			border-color: transparent;
			color: #fff;
			&:before {
				opacity: 1;
			}
		}
	}
	label {
		font-size: 18px;
		line-height: 24px;
		font-weight: 700;
		color: #08203a;
		white-space: nowrap;
		padding-left: 50px;
		position: relative;
		@include transform(rotate(90deg));
		transform-origin: top left;
		left: 38px;
		&:before {
			content: '';
			width: 40px;
			height: 3px;
			background-color: $primary_color;
			position: absolute;
			top: 50%;
			left: 0;
			@include transform(translate(0, -50%));
		}
	}
}

.ct-social-icon3 {
	a {
		color: #b1b1b1;
		&:hover {
			color: $primary_color;
		}
		+ a {
			margin-left: 14px;
		}
	}
}

.ct-gallery-carousel1 {
	&.style1 {
		.slick-list:before {
			z-index: -1;
			content: '';
			position: absolute;
			top: 35px;
			left: 20px;
			right: 20px;
			bottom: 65px;
			background-color: #fff;
			@include border-radius(10px);
		}
		.item--inner {
			background-color: #fff;
			overflow: hidden;
			padding: 9px;
			@include border-radius(10px);
			@include box-shadow(0 10px 50px rgba(#000a50, 0.15));
			margin-top: 30px;
			margin-bottom: 60px;
			img {
				@include border-radius(10px);
			}
		}
		.slick-dots {
			margin: 0 0 10px;
			position: relative;
			top: -20px;
		}
	}
	&.style2 {
		img {
			width: 100%;
		}
	}
}

.ct-video-player {
	position: relative;
	img {
		width: 100%;
	}
	.ct-video-holder + .ct-video-button {
		@extend .ct-center;
	}
}

.ct-video-button {
	&.style1 {
		width: 60px;
		height: 60px;
		line-height: 60px;
		text-transform: uppercase;
		color: #fff;
		font-size: 18px;
		display: inline-block;
		text-align: center;
		position: relative;
		z-index: 1;
		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			@include background-horizontal-right($gradient_color_from, $gradient_color_to);
			@include border-radius(100%);
			z-index: -1;
		}
		&:after {
            content: "";
            position: absolute;
            z-index: 0;
            left: 0;
            top: 0;
            display: block;
            width: 100%;
            height: 100%;
            background-color: $primary_color;
            border-radius: 50%;
            animation: pulse-border2 1500ms ease-out infinite;
            -webkit-animation: pulse-border2 1500ms ease-out infinite;
            z-index: -2;
            opacity: 0.65;
        }
        &:hover {
            &:after {
                -webkit-animation-play-state: paused;
                -moz-animation-play-state: paused;
                -o-animation-play-state: paused;
                animation-play-state: paused;
            }
        }
	}
	&.style2 {
		width: 55px;
		height: 55px;
		line-height: 55px;
		text-transform: uppercase;
		color: #fff;
		font-size: 16px;
		display: inline-block;
		text-align: center;
		position: relative;
		z-index: 1;
		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: $primary_color;
			@include border-radius(100%);
			z-index: -1;
		}
		&:after {
            content: "";
            position: absolute;
            z-index: 0;
            left: 0;
            top: 0;
            display: block;
            width: 100%;
            height: 100%;
            background-color: #{'rgba(var(--primary-color-rgb),0.67)'};
            border-radius: 50%;
            animation: pulse-border2 1500ms ease-out infinite;
            -webkit-animation: pulse-border2 1500ms ease-out infinite;
            z-index: -2;
            opacity: 0.55;
        }
        &:hover {
            &:after {
                -webkit-animation-play-state: paused;
                -moz-animation-play-state: paused;
                -o-animation-play-state: paused;
                animation-play-state: paused;
            }
        }
        .ct-video-text {
        	position: absolute;
			top: 50%;
			left: 100%;
			margin-left: 18px;
			font-weight: 700;
			color: #2e2d2d;
			text-transform: uppercase;
			letter-spacing: 0.1em;
			white-space: nowrap;
			transform: translate(0, -50%);
        }
	}
	&.style3 {
		width: 110px;
		height: 100px;
		background-color: #fff;
		line-height: 100px;
		text-align: center;
		font-size: 50px;
		color: $primary_color;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		&:hover {
			background-color: $primary_color;
			color: #fff;
		}
	}
	&.style4 {
		width: 68px;
		height: 68px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		border-radius: 68px;
		font-size: 20px;
		color: $primary_color;
		&:after {
            content: "";
            position: absolute;
            z-index: 0;
            left: 0;
            top: 0;
            display: block;
            width: 100%;
            height: 100%;
            background-color: #fff;
            border-radius: 50%;
            animation: pulse-border2 1500ms ease-out infinite;
            -webkit-animation: pulse-border2 1500ms ease-out infinite;
            z-index: -2;
            opacity: 0.55;
        }
        &:hover {
        	color: $primary_color;
            &:after {
                -webkit-animation-play-state: paused;
                -moz-animation-play-state: paused;
                -o-animation-play-state: paused;
                animation-play-state: paused;
            }
        }
	}
}

.ct-sidebar-cart1 {
	font-size: 22px;
	line-height: 1;
	position: relative;
	cursor: pointer;
	.widget_cart_counter {
		position: absolute;
		top: -4px;
		right: -14px;
		width: 20px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		font-weight: 500;
		background-color: #f90000;
		color: #fff;
		font-size: 14px;
		@include border-radius(21px);
	}
}
.elementor-editor-active .ct-sidebar-cart1 .widget_cart_counter {
	display: none;
}

.ct-cta1 {
	position: relative;
	z-index: 1;
	&:before {
		content: '';
		z-index: -1;
		position: absolute;
		left: 30px;
		height: 100%;
		right: 30px;
		bottom: -17px;
		@include border-radius(90px);
		background-color: #ccd3de;
		@media #{$max-sm} {
			@include border-radius(20px);
		}

	}
	.item--image {
		width: 60px;
		min-width: 60px;
		margin-right: 24px;
		img {
			max-width: 60px;
			@include border-radius(60px);
		}
	}
	.item--author {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		@media #{$max-lg} {
			min-width: 280px;
		}
		.item--autitle {
			font-size: 20px;
			margin-bottom: 2px;
			color: #fff;
			@media #{$max-lg} {
				font-size: 18px;
			}
		}
		.item--position {
			font-size: 15px;
			color: #8ba5cc;
		}
	}
	.item--wgtitle {
		flex-grow: 1;
		text-align: center;
		font-size: 30px;
		line-height: 1.23;
		@include font-family-heading($heading_default_font);
		color: #fff;
		font-weight: 700;
		@media #{$max-lg} {
			font-size: 24px;
		}
		@media #{$max-sm} {
			text-align: left;
			margin-top: 20px;
			margin-bottom: 30px;
		}
	}
	.item--button a {
		font-size: 16px;
		line-height: 52px;
		@include border-radius(52px);
	}
	.ct-cta--inner {
		background-color: #002358;
		padding: 17px 30px;
		@include border-radius(90px);
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		@media #{$max-lg} {
			padding-left: 10px;
			padding-right: 10px;
		}
		@media #{$max-sm} {
			display: block;
			@include border-radius(20px);
			padding-bottom: 30px;
			padding-top: 30px;
		}
		> div {
			padding: 0 15px;
		}
	}
	&.style2 {
		.item--author .item--position {
			color: #ebeced;
		}
		.ct-cta--inner {
			background-color: $primary_color;
		}
		.item--button .btn {
			font-weight: 600;
			border-radius: 5px;
			background: #fff;
			color: $primary_color;
		}
		&:before {
			background-color: $primary_color;
			opacity: 0.1;
		}
	}
}

.ct-support-button {
	position: fixed;
	top: 150px;
	z-index: 999;
	height: 51px;
	background-color: $primary_color;
	display: flex;
	white-space: nowrap;		
	border-radius: 51px 0 0 51px;
	align-items: center;
	padding-left: 57px;
	padding-right: 12px;
	color: #fff;
	@include transition(.3s cubic-bezier(.24,.74,.58,1));
	@include transform(translateX(100%));
	right: 51px;
	i {
		position: absolute;
		top: 50%;
		left: 9px;
		@include transform(translate(0, -50%));
		width: 36px;
		height: 36px;
		line-height: 36px;
		@include border-radius(36px);
		background-color: #1612a7;
		font-size: 20px;
		text-align: center;
	}
	.item--text {
		font-size: 16px;
		font-weight: 500;
	}
	a {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 99;
	}
	&.active, &:hover {
		right: 0;
		@include transform(translateX(0%));
	}
}

.ct-effect1 {
    animation: particleToptoBottom2 12s infinite linear alternate;
}
.ct-effect2 {
    animation: NewsletterAnimated2 12s infinite linear alternate;
}
.ct-effect3 {
    animation: ctspin-revert 12s infinite linear;
     -webkit-animation: ctspin-revert 12s infinite linear;
}
.ct-list-check {
	display: inline-flex;
	align-items: center;
	i {
		font-size: 115%;
		margin-right: 10px;
		position: relative;
		top: -2px;
	}
}

.ct-section-background {
	position: absolute;
	top: 0;
	left: 60px;
	right: 60px;
	height: 100%;
	@include border-radius(100px);
	@media #{$max-xl} {
		left: 20px;
		right: 20px;
	}
	@media #{$max-lg} {
		left: 0;
		right: 0;
		@include border-radius(50px);
	}
}

.ct-user {
    .ct-user-inner {
        max-width: 430px;
        margin: auto;
    }
    .ct-user-holder {
        background-color: #fff;
        @include border-radius(5px);
        position: relative;
        overflow: hidden;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    }
    .ct-user-meta {
        padding: 30px;
    }
    .ct-user-title {
        text-align: center;
        margin-bottom: 32px;
        font-size: 22px;
        text-transform: capitalize;
    }
    .ct-user-bottom {
        border-top: 1px solid #efefef;
        padding: 18px 30px;
        background-color: #f8f8f8;
        text-align: center;
        font-size: 15px;
        @include border-radius(0 0 5px 5px);
        a {
            text-decoration: underline;
        }
    }
    .ct-user-form {
        .field-group {
            position: relative;
            margin-bottom: 15px;
            &:last-child {
                margin-bottom: 0;
            }
        }
        .button {
            width: 100%;
            line-height: 54px;
        }
        input {
            border-radius: 0;
            padding-left: 75px;
        }
        svg {
            width: 55px;
            height: 17px;
            fill: $primary_color;
            position: absolute;
            top: 50%;
            left: 0;
            border-right: 1px solid #efefef;
            @include transform(translate(0, -50%));
            opacity: 0.8;
        }
        span {
            color: #fff;
            background-color: rgba(255, 0, 0, 0.8);
            display: inline-block;
            @include border-radius(3px);
            font-size: 10px;
            line-height: 18px;
            padding: 0 8px;
            position: absolute;
            top: 50%;
            @include transform(translate(0, -50%));
            right: 10px;
        }
    }
    .ct-user-footer {
        padding: 25px 15px 0 15px;
        text-align: center;
        a {
            color: #555;
            text-decoration: underline;
            &:hover {
            	color: $primary_color;
            }
        }
    }
    .ct-user-form-profile {
        text-align: center;
        .user-avatar img {
            border: 1px solid #ebebeb;
            padding: 5px;
            max-width: 100px;
            border-radius: 100px;
        }
        .user-name {
            font-size: 15px;
            font-weight: 700;
            margin-top: 8px;
            margin-bottom: 18px;
        }
    }
}
.logged-in .ct-user {
    .ct-user-bottom, .ct-user-title {
        display: none;
    }
}