/* Silder One */
.silder-one{
	position: relative;
	.dz-slide-item{
		display:flex;
		align-items:center;
		background-repeat: no-repeat;
		background-position: bottom left;
		background-size: auto;	
		position:relative;
		overflow:hidden;
		background-color: #fff;
		@include respond('tab-port'){
			min-height:auto;
		}
		.slider-img{
			overflow: hidden;
			width: 50%;
			background:$body-bg;
		    padding:100px 100px 50px;
			
			@include respond('tab-land'){
				padding:100px  30px 30px;
			}
			@include respond('phone-land'){
				width:400px;
				margin-left:auto;
				margin-right:auto;
				padding:30px;
			}
			@include respond('phone'){
				width:300px;
			}
			.slider-img-inner{
			    max-width: 670px;
				animation: dzMove1 12s linear infinite;	
				position:relative;

				&:after{
					content: "";
					background-image: url(../images/slide-bg2.png);
					position: absolute;
					bottom: 0;
					left: 0;
					height: 100%;
					width: 100%;
					background-size: 100%;
					background-position: bottom;
					background-repeat: no-repeat;
					z-index: -1;
				}
			}
			
			@include respond('tab-port'){
				width: 45%;
			}
			img{
				max-width: 100%;
				object-fit: cover;
				-webkit-mask-image: url(../images/slide-bg1.png);
				mask-image: url(../images/slide-bg1.png);
				-webkit-mask-position: bottom center;
				mask-position: center center;
				-webkit-mask-repeat: no-repeat;
				mask-repeat: no-repeat;
				-webkit-mask-size: 100%;
				mask-size: 100%;
			}
		}	
	}
	.silder-content{
		width: 50%;
		padding: 100px;
		@include respond('wide-desktop'){
			padding-left: 40px;
		}
		
		.title{
			font-size: 90px;
			font-weight: 600;
			line-height:1.1;
			margin-bottom: 15px;
			
			span{
				position:relative;
				&:after{
					content: "";
					background-image: url(../images/outline.png);
					width: 120%;
					height: 100%;
					background-size: 100% 100%;
					position: absolute;
					left: -10%;
					top: -5%;
				}
			}			
			@include respond('wide-desktop'){
				margin-bottom: 15px;
				font-size: 60px;
			}
		}
		.sub-title{
			font-weight: 500;
			margin-bottom: 10px;
			color: inherit;
		}
		p{
			font-size:24px;
			@include respond('wide-desktop'){
				font-size:22px;
			}
		}
	}
	
	.swiper-pagination-bullets{
		position:absolute;
		bottom:20px;
		left:80px;
		@include respond('wide-desktop'){
			left:40px;
		}
	}
	@include respond('tab-land'){
		.silder-content{
			width: 50%;
			padding: 35px;
			.sub-title {
				margin-bottom: 15px;
			}
			.title {
				font-size: 45px;
				line-height: 1.2;
				margin-bottom: 10px;
			}
		}
	}
	@include respond('tab-port'){
		.silder-content{
			padding: 30px;
			.sub-title{
				margin-bottom: 10px;
			}
			.title{
				font-size: 40px;
				letter-spacing: 0;
				margin-bottom: 15px;
				
			}
			p{
				font-size: 14px;
				margin-bottom: 25px;
			}
		}
	}
	@include respond('phone-land'){
		.silder-content{
			padding: 30px 15px;
			width: 100%;
			
		}
	}
	@include respond('phone'){
		.silder-content {
			width: auto;
			left: 15px;
			right: 15px;
			bottom: 90px;
			padding:20px;
			.title{
				font-size: 22px;
				line-height: 1.3;
				margin-bottom: 20px;
			}
			.sub-title{
				font-size:14px;	
				margin-bottom: 10px;
			}
		}
	}
}
.result-box{
	border-radius: 10px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0px 30px 60px 0px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
    width: 170px;
    text-align: center;
    padding: 15px 10px;
    position: absolute;
    top: 35%;
    left: 5%;
    z-index: 1;
	animation: dzMove1 6s linear infinite;	
	
	h6{
		font-size:16px;
		font-weight:500;
	    margin: 0;
	}
}
.right-text-bar {
    width: 80px;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    padding-top: 100px;
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    z-index: 9;
	
	@include respond('tab-land'){
		display:none;
	}
	ul li{
		padding: 20px 0;
		writing-mode: tb-rl;
		a{
			font-size: 14px;
			font-weight: 400;
			text-transform: uppercase;
			letter-spacing: 0.5px;
			color: #5E626F;
		}
	}
	.service-btn{
		font-size: 14px;
		font-weight: 400;
		text-transform: uppercase;
		background-color: $primary;
		padding: 15px 5px 15px 4px;
		bottom: 28px;
		font-weight:500;
		left: 26px;
		z-index: 1;
		color: #fff;
		display: block;
		writing-mode: vertical-rl;
	}
}
.chart-bx{
	margin-bottom:-10px;
	.radial-progress {
		height: auto;
		max-width: 80px;
		margin-bottom: 15px;
		transform: rotate(-90deg);
		width: 100%;
		circle {
			fill: rgba(0,0,0,0);
			stroke: #fff;
			stroke-dashoffset: 219.91148575129;
			stroke-width: 6;
			&.incomplete { opacity: 0.25; }
			&.complete { stroke-dasharray: 219.91148575129;}
		}
		text {
			fill: #000;
			text-anchor: middle;
			font-weight:700;
			font-size:20px;
		}
		&:nth-of-type(6n+1) circle { 
			stroke: $primary; 
		}
	}
}
.client-logo-wrapper{
	display:flex;
	flex-flow:wrap;
	.clients-logo{
		border-radius:0;
		border-right: 1px solid rgba(0, 0, 0, 0.1);
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		width:20%;
		
		&:nth-child(5),
		&:nth-child(10){
			border-right:0;
		}
		&:nth-child(n+6){
			border-bottom:0;
		}
	}
	@include respond ('phone'){
		.clients-logo{
			width:50%;
			
			&:nth-child(n+6){
				border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			}
			&:nth-child(n+9){
				border-bottom:0;
			}
			&:nth-child(5),
			&:nth-child(10){
				border-right: 1px solid rgba(0, 0, 0, 0.1);
			}
			&:nth-child(even){
				border-right:0;
			}
		}
	}
}

.social-list{
	&.style-1{
		li{
			a{
				height: 45px;
				width: 45px;
				background-color: #000;
				display: block;
				text-align: center;
				line-height: 45px;
				&:hover{
					background-color: var(--primary);
					color: $white!important;
				}
			}
		}
	}
	&.style-2{
		margin: 0 -5px;
		li{
			display: inline-block;
			padding: 0 5px;
			
			a{
				height: 40px;
				width: 40px;
				background-color: var(--primary);
				display: block;
				text-align: center;
				line-height: 40px;
				border-radius: var(--border-radius-base);
				color: #fff;
				box-shadow: 0 5px 15px -10px var(--primary);
				
				&:hover,
				&:focus,
				&:active{
					background-color: var(--primary-hover);
				}
			}
		}
	}
}

// Services
.service-area{
	position:relative;
	z-index:1;
	.video-bx + .ov-video{
		content:"";
		height:25%;
		position:absolute;
		bottom:0;
		z-index:-1;
		left:0;
		width:100%;
		background:$body-bg;
		@include respond('phone'){
			height: 150px;
		}
	}
}
.newsletter-bx{
	padding:80px;
	@include respond('wide-desktop'){
		padding:40px;
	}
}
.news-iframe{
	iframe{
		min-height:300px !important;	
		height:100%;	
	}
}
.counter-area{
    padding-top: 90px;	
	@include respond('wide-desktop'){
		padding-top: 50px;	
	}
}

// Features Wraper
.features-wraper-1{
	position: relative;
	.icon-bx{
		margin-bottom: 30px;
		position: relative;
		z-index: 1;
	}
	.icon-bx-wraper{
		padding: 0 20px;
	}
	& > div:not(:last-child){
		.icon-bx-wraper:after{
			content: "";
			height: 1px;
			border-bottom: 1px dashed var(--primary);
			right: -50%;
			top: 55px;
			position: absolute;
			width: 100%;
		}
	}
	@include respond('tab-land'){
		.icon-bx-wraper{
			padding: 0;
		}
	}
	@include respond('tab-port'){
		& > div:not(:last-child){
			.icon-bx-wraper:after{
				content: none;
			}
		}
	}
}

// Clients Logo
.clients-section-1{
	padding-top: 60px;
	padding-bottom: 60px;
	
	@include respond('phone'){
		padding-top: 30px;
		padding-bottom: 30px;
	}
}
div.clients-logo {
    padding: 0 15px;
    height: 100px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    transition: all 0.5s;
	
	img {
		margin: auto;
		transition: all 0.5s;
		filter: grayscale(1);
		height: 55px;
		max-width: 140px;
		width: 100%;
		object-fit: contain;
	}
	@include respond('phone-land'){
		height: 80px;
	}
	@include respond('phone'){
		img{
			max-width: 100px;
		}
	}
	&:hover img{
	    filter: grayscale(0);	
	}
}

// service-detail
.service-detail{
	.dz-media{
		margin-bottom: 45px;
	}
	@include respond('phone'){
		.dz-media{
			margin-bottom: 30px;
		}	
	}
}

// video-section
.video-section{
	height: 400px;
}

// port-detail
.port-detail{
	.title{
		line-height: 1.5;
		font-weight: 700;
	}
	.info-list{
		li{
			display: flex;
			align-items: center;
			margin-bottom: 15px;
			h2{
				margin: 0;
				width: 150px;
				letter-spacing: 6px;
				font-family: var(--font-family-title);
				font-weight: 400;
			}
			span{
				font-size: 18px;
				text-transform: uppercase;
				color: $headings-color;
				font-family: var(--font-family-title);
				letter-spacing: 3px;
				font-weight: 300;
			}
			@include respond('phone'){
				margin-bottom: 20px;
				h2{
					width: 100px;
				}
			}
		}
	}
}
.dz-media-1{
	position: relative;
	padding: 0 50px 30px 0;
	
	img{
		outline: 10px solid $white;
		outline-offset: -35px;
		z-index: 1;
		width: 100%;
	}
	&:after{
		content: "";
		top: 30px;
		right: 0;
		left: 30px;
		bottom: 0;
		position: absolute;
		z-index: -1;
		border: 5px solid #f8f8f8;
	}
	
	&.right{
		padding: 0 0 30px 50px;
	}
	
	@include respond('tab-land'){
		padding: 0 0 30px 0;
		
		&.right{
			padding: 0 0 30px 0;
		}
	}
	@include respond('phone'){
		img {
			outline: 4px solid #fff;
			outline-offset: -20px;
		}
		&:after{
			top: 20px;
			left: 20px;
		}
	}
}
.line-img{
	background-image:url(../images/pattern/line.png);
	background-position: center;
	background-size: 100%;
}

.section-title{
	&.style-2{
		&:after{
			right: 100px;
			writing-mode: tb-rl;
			top: 50%;
			transform: translateY(-50%);
			height: 100%;
			text-align: center;
		}
	}
	@include respond ('tab-land'){
		&.style-1{
			&:after{
				font-size: 80px;
				line-height: 80px;
				top: 120px;
			}
		}
		&.style-2{
		    &:after{
				font-size: 80px;
				line-height: 80px;
				top: 120px;
				writing-mode: unset;
				height: auto;
				transform: unset;
				right: 0;
				left: 0;
			}
		}
	}
	@include respond ('tab-port'){
		&.style-1,
		&.style-2{
			&:after{
				font-size: 50px;
				line-height: 50px;
				top: 100px;
			}	
		}
	}
	@include respond ('phone'){
		&.style-1,
		&.style-2{
			&:after{
				font-size: 36px;
				line-height: 36px;
				top: 50px;
			}
		}
	}
}
.section-head-bx{
	@include respond ('phone-land'){
		.text-end,
		.section-head{
			text-align: center!important;
		}
	}
}