//Promo area 1
.promo_content_area{
	.container-fluid{
		margin:0;
		padding:0;
		.left_side{
			width:50%;
			float:left;
			.promo_content{
				width: 100%;
				height: 760px;
				overflow: hidden;
				position: relative;
				background: #000;
				img {
					width:100%;
					max-width: 1000%;
					height: auto;
					opacity: .9;
					display: block;
				}
				.play_btn{
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					width:100px;
					height: 100px;
					border-radius: 50%; 
					background:#fff;
				    cursor: pointer;
				    z-index: 9;
				    @include transition(all,.3s,ease-in-out);
					&:after{
					    position: absolute;
					    transform: translate(-50%, -50%);
					    left: 50%;
					    top: 50%;
					    width: 0;
					    height: 0;
					    border-top: 18px solid transparent;
					    border-bottom: 18px solid transparent;
					    border-left: 26px solid $brand;
					    @include gradient_bg(top);
					    content: '';
					}
					&:hover {
						top: calc(50% - 10px);
					    @include boxshadow(0px, 14px, 20px, 0px, rgba(0, 2, 87, 0.3), false);
					}
				}
			}
		}
		.right_side{
			width:50%;
			float:left;
			height: 760px;
			@extend .section_title_main;
			margin:0;
			.accordion_wrapper{
				width: 80%;
				.accordion{
					margin-top: 30px;
					.card {
					    margin-bottom: 5px;
					    border-radius: 6px !important;
					    outline: none;
					    border: none;
					    background: none;
					    .card-header {
						    padding: 0;
						    border-radius: 10px !important;
						    border: none;
						    outline: none;
						    .btn.btn-link {
						    	position: relative;
							    width: 100%;
							    height: 100%;
							    text-align: left;
							    color: #fff;
							    @include firasans(500);
							    background: linear-gradient(to right, #4443c3 0%, #6616b1 100%);
							    border-radius: 5px 5px 0 0;
							    text-align: left;
							    text-decoration: none;
							    cursor: pointer;
							    border: none;
							    line-height: 1;
							    padding: 15px 30px 15px 15px;
							    white-space: normal;
							    &.collapsed{
							    	border-radius: 5px;
							    	&:after{ content: '\e61a'; }
							    }
							    &:after{
							    	position: absolute;
							    	@include transition(all,.3s,ease-in-out);
							    	left: auto;
							    	right: 10px;
							    	content: '\e622';
							    	top: calc(50% - 10px);
							    	font-family: 'themify';
							    	font-size: 16px;
							    	font-weight: 700;
							    }
							}
						}
						.card-body {
							color: $text;
							background: #ffffff1a;
							padding:10px;
							font-size: 16px;
							line-height: 1.8;
							@include firasans(400);   
						}
					}
				}
			}	
		}
	}	
}

	//Promo area 2
.promo_content_area_2{
	@extend .section_padding;
	.section_title{
		@extend .section_title_main_2;
	}
	.left_side{
		h2{ 
			color: $brand_2;
			font-size: 36px; 
			@include firasans(700);
		}
		.promo_item{
			margin-top: 55px;
			h3{ 
				font-size: 20px;
				color: #fff;
				line-height: 35px;
				margin-left: 45px;
				@include firasans(500);
				span{ 
					font-size: 36px; 
					@include firasans(700);
					color: $green;
					line-height: 30px;
					margin-right: 5px;
				}
			}
			p{
				font-size: 15px;
				color: #ffffffcc;
				line-height: 1.5;
				@include firasans(400);
				margin: 0;
			}
		}
	}
	.right_side{
		.promo_content_2{	
			overflow: hidden;
			width: 100%;
			border-radius: 30px;
			position: relative;
			height: 440px;
			img{
				display: block;
				height: 100%;
				width: auto;
				max-width: 1000%;
			}
			&:after{
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				content:'';
				position: absolute;
				@include gradient_bg(top);
				opacity: .2;
				z-index: 2;
			}
		}
	}
}

	//Promo area 3
.promo_content_area_3{
	@include bg_property;
	position: relative;
	z-index: 1;
	background-image: url(../img/promo/video_3.png);
	&:after{
		position: absolute;
		width: 100%;
		height: 100%;
		content:'';
		background: rgba(0,0,0,0.8);
		left: 0;
		top: 0;
		z-index: -1;
	}
	.container{
		.promo_item_2{
			padding: 90px 45px;
			color: #fff;
			background: $brand_3;
			h2{     
				@include rubik(700);
				font-size: 60px;
				margin-bottom: 30px;
			}
			h3{
				font-size: 24px;
				@include rubik(700);
			}
			p{
				@include firasans(400);
				font-size: 18px;
				line-height: 1.5;
				margin-bottom: 90px;
			}
			.service_list{
				h3{
					font-size: 30px;
					@include rubik(500);
					margin-bottom: 45px;
				}
				ul { 
					float: left;
					margin-top: 30px;
    				width: 50%;  
					li{ 
						@include firasans(500);
						font-size: 16px;
						margin-bottom:20px;
						line-height:1;
						i{
							color: $green;
							margin-right: 12px;
							font-weight: 900;
						}
					}
				}
				.list_1{ width: 50%; }		
			}
		   .boxed_btn_3{
				margin-top:45px;
			    padding: 15px 30px;
			    font-size: 18px;
			    @include transition(all, .3s, ease-in-out);
			    @include firasans(500);
			    border-radius:0;
			    border: 0;
			    display: inline-block;
			    background: #fff;
			    color:$brand_3;
			    &:hover{
			    	border-radius:0;
			    	color: #fff;
			    	background: $brand_3_dark;
			    }    
			}
		}
		.pulse_btn_wrapper {
		    position: absolute;
		    left: auto;
		    right: 0%;
		    top: 85%;
		    color: #fff;
		    width: 290px;
		    .play_btn_pluse {
			    position: absolute;
			    top: 50%;
			    left: -20%;
			    &:before{ background: #2cd63c; }
			}
		}
	}	
}

	//Promo area 4
.promo_content_area_4 {
	width: 100%;
	height: 450px;
	overflow: hidden;
	position: relative;
	background-image: url('../img/promo/video_3.png');
	@include bg_property;
	padding: 80px 0;
	z-index: 1;
	&:after{
		background: rgba(0, 0, 0, 0.7);
		position: absolute;
		content: '';
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
	}
	.promo_content_4{
		color: #fff;
		p{ 
			font-size: 24px;
			@include firasans(400);
		}
		h3{ 
			font-size: 36px; 
			margin-top: 160px;
			margin-bottom: 15px;
			@include rubik(400); 
			span{ font-weight: 700; }
		}
		.play_btn_pluse{ 
			top: 35%;  
			&:before{ background: #2cd63c; }
		}
	}
}

	//Promo area 5
.promo_content_area_5{
	@extend .section_padding;
	position: relative;
	z-index: 3;
	&:after{
		position: absolute;
		z-index: -2;
		left: auto;
		top: 0px;
	    right: -155px;
	    width: 34%;
	    height: 100%;
	    opacity: .2;
		@include bg_property;
		content: '';
		background-image: url('../img/paint_draw.png');
	}
	.left_side{
		.box_wrapper {
			width: 400px;
			height: 300px;
			margin: auto;
			position: relative;
			.button-container {
				width: 100%;
				height: 100%;
				background-color: transparent;
			}
			.box {
				width: 85%;
				height: 65%;
				overflow: hidden;
				@include bg_property;
				border-radius: 20px;
				position: absolute;
				transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

				&:first-of-type {
					background-image: url('../img/promo/video_2.png');
					top: 35%;
					left: -5%;
					z-index: 2;
					&.scale {
						@include gradient_bg_4(bottom);
						transform: scale(10);
						z-index: 8;
					}
				}
				&:nth-of-type(2) {
					background-image: url('../img/promo/video.png');
					top: 0%;
					left: 15%;
					z-index: 1;
				}
				&:nth-of-type(3) {
				background-image: url('../img/promo/video_3.png');
				top: 15%;
				left: 35%;
				z-index: 3;
				}
			}
		}
		.centered {
			top: 60px !important;
			left: 15px !important;
		}
		.video_button {
		&.hide {
			opacity: 0;
			visibility: hidden;
			}
		}
	}
	.right_side{
		h2{
			font-size: 36px;
			@include firasans(700);
			margin-bottom: 25px;
			@include gradient_bg_4(left);
			-webkit-background-clip: text;
	  		-webkit-text-fill-color: transparent;
		}
		p{ 
			font-size: 16px; 
			color: #fff;
			line-height: 1.5;
			margin-bottom: 20px;	
		}
		.boxed_btn{
			font-size: 16px;
			padding: 15px 20px;
			border-radius: 5px;
			display: inline-block;
			color: #fff;
			@extend .gradient_btn_main;
			@include firasans(500);
			@include gradient_bg_4(right);
			@include transition(all, .3s, ease-in-out);
			&:hover{ color: #fff; }
			&:after{ background: $brand_6; border-radius: 5px; }
		}
	}
}
.overlay1 {
	position: fixed;
	z-index: 1;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;
	opacity: 0;
	transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	&.active {
		opacity: 1;
		pointer-events: auto;
		display: block;
		z-index: 99999;
	}
	#video1{ height: 75vh; }
}
.no-scroll { overflow: hidden !important; }

	//Promo area 6
.promo_content_6{	
	overflow: hidden;
	width: 100%;
	border-radius: 0px;
	position: relative;
	height: 400px;
	img{
		display: block;
		width: auto;
		max-width: 200%;
		height: 100%;
	}
	&:after{
		width: 100%;
		height: 120%;
		left: 0;
		top: 0;
		content:'';
		position: absolute;
		@include gradient_bg(top);
		opacity: .2;
		z-index: 2;
	}
}

	//Promo area 7
.promo_content_7{	
	overflow: hidden;
	width: 100%;
	border-radius: 0px;
	position: relative;
	height: 260px;
	img{
		display: block;
		height: 100%;
		width: auto;
		max-width: 200%;
	}
	&:after{
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		content:'';
		position: absolute;
		@include gradient_bg(top);
		opacity: .2;
		z-index: 2;
	}
}


	//Responsive
@media #{$medium_device}{
	.promo_content_area{
		.container-fluid{
			.left_side{
				.promo_content{
					width: 100%;
					height: 620px;
				}
			}
			.right_side{
				height: 620px;
				margin:0;
			}
		}	
	}
	.promo_content_area_2 .left_side {
		h2 { font-size: 40px; }
		.promo_item {  margin-top: 20px; }
	}
	.promo_content_area_3{
		.container{
			.promo_item_2{
				padding: 70px 20px;
				h3{font-size: 18px;}
				h2{ font-size: 48px;  margin-bottom: 20px;}
				p{ margin-bottom: 50px; font-size: 16px; }
				.service_list{
					h3{ font-size: 24px; margin-bottom: 20px; }
					ul li{ font-size: 14px; }		
				}
				.boxed_btn_3{ margin-top: 25px; }
			}
		}
	}
	.promo_content_area_5{
		&:after{
			top: 70px;
		    right: -100px;
		}
		.left_side{
			.box_wrapper {
				width: 340px;
				height: 265px;
			}
		}
		.right_side{
			h2{
				font-size: 36px;
				@include firasans(700);
				margin-bottom: 25px;
				@include gradient_bg_4(left);
				-webkit-background-clip: text;
		  		-webkit-text-fill-color: transparent;
			}
			p{ 
				font-size: 16px; 
				color: $text;
				line-height: 1.5;
				margin-bottom: 20px;
			}
			.boxed_btn{
				font-size: 16px;
				padding: 15px 20px;
				border-radius: 5px;
				display: inline-block;
				color: #fff;
				@include firasans(500);
				@include gradient_bg_4(right);
				@include transition(all, .3s, ease-in-out);
				&:hover{
					@include gradient_bg_4(left);
				}
			}
		}
	}	
}
@media #{$tab_device}{
	.promo_content_area .container-fluid{
		.left_side{ width: 100%; }
		.right_side{
			width: 100%;	
			margin:0;
		}
	}
	.promo_content_area_2 {
		.left_side {
			h2 {
			    font-size: 30px;
			    margin-bottom: 0px;
			}
			.promo_item {
			    margin-top: 30px;
			    p{ 
			    	font-size:14px;
					line-height: 20px;
			    }
			}
		}
		.right_side{
			.promo_content_2{ margin-top: 30px; height: 330px;}
		}
	}
	.promo_content_area_3{
		.container{
			.promo_item_2{
				padding: 40px 20px;
				h3{font-size: 18px;}
				h2{ font-size: 48px;  margin-bottom: 15px;}
				p{ margin-bottom: 35px; font-size: 16px; }
				.service_list{
					h3{ font-size: 24px; margin-bottom: 20px; }
					ul li{ font-size: 14px; margin-bottom: 15px;  }		
				}
				.boxed_btn_3{ margin-top: 25px; padding: 10px 20px; font-size: 16px;  }
			}
			.pulse_btn_wrapper{
			    padding-left: 65px;
			    right: 10%;
			    width: 80px;
			    h3{ display: none; }
			}
		}
	}	
	.promo_content_area_4 {
		height: 400px;
		padding: 60px 0;
	}	
	.promo_content_area_5{
		&:after{
			top: 0px;
		    right: -100px;
		    width: 45%;
		    height: 75%;
		}
		.left_side{
			.box_wrapper {
				width: 340px;
				height: 265px;
				margin-bottom: 35px;
			}
		}
		.right_side{
			text-align: center;
			h2{
				font-size: 28px;
				margin-bottom: 15px;
			}
			p{ 
				font-size: 14px; 
				margin-bottom: 20px;
				
			}
			.boxed_btn{
				font-size: 14px;
				padding: 10px 15px;
			}
		}
	}
	.promo_content_6{  height: 300px;}	
	.promo_content_7{ margin-bottom: 30px; height: 230px;}
	
}
@media #{$small_mobile}{
	.promo_content_area{
		.container-fluid{
			.left_side{
				width: auto;
				.promo_content{
					height: 360px;
					.play_btn{
					    transform: translate(-50%, -50%);
					    width: 60px;
					    height: 60px;
					    &:after{
					  	    transform: translate(-50%, -50%);
						    border-top: 12px solid transparent;
						    border-bottom: 12px solid transparent;
						    border-left: 22px solid $brand;
					    }
					    &:hover{ top: calc(50% - 5px);  }
					}
				}
			}
			.right_side{
				width: 100%;
				margin: 0;
				padding: 50px 0;	
				.accordion_wrapper{
					.accordion{
						.card {
						    margin-bottom: 5px;
						    border-radius: 6px;
						    outline: none;
						    border: none;
						    .card-header {
							    button.btn.btn-link {
								    font-size: 14px;
								    line-height: 1.5;
								    padding: 10px 25px 10px 10px;

								    &:after{
								    	right: 8px;
								    	top:calc(50% - 14px);
								    }
								}
							}
							.card-body {
						        font-size: 14px;
						        line-height: 1.5;
							}
						}
					}
				}
			}
		}
	}
	.promo_content_area_2 {
		.left_side { 
			h2 {
			    font-size: 28px;
			    margin-bottom: 0px;
			}
			.promo_item {
			    margin-top: 30px;
			    p{ 
			    	font-size:14px;
					line-height: 20px;
			    }
			    h3{ 
			    	position: relative;
					display: inline-block; 
					span { left: -44px; }
			    }
			}
		}
		.promo_content_2{ margin-top: 30px; height: 330px;}	
	}
	.promo_content_area_3{
		.container{
			.promo_item_2{
				padding: 40px 20px;
				background: transparent;
				h3{font-size: 16px; margin-bottom: 8px;}
				h2{ font-size: 28px;  margin-bottom: 15px;}
				p{ margin-bottom: 35px; font-size: 14px; }
				.service_list{
					h3{ font-size: 16px; margin-bottom: 20px; }
					ul {
						float: none;
						li{ font-size: 12px; margin-bottom: 10px;  }
					}	
					.list_1{ width: auto; }	
				}
				.boxed_btn_3{ margin-top: 15px; padding: 10px 15px; font-size: 14px;  }
			}
			.pulse_btn_wrapper{
			    padding-left: 65px;
				right: 0%;
				bottom: calc(43% - 40px);
			    width: 80px;
			    h3{ display: none; }
			}
		}
	}
	.promo_content_area_4 {
		height: 300px;
		.promo_content_4{
			color: #fff;
			p{ 	font-size: 18px;	}
			h3{ 	font-size: 28px; margin-top: 65px;	}
			.play_btn_pluse{ 
				top: 25%; 
	 
			}
		}
	}	
	.promo_content_area_5{
		&:after{  height: 0; }
		.left_side{
			.box_wrapper {
				width: 55%;
				height: 205px;
				margin-bottom: 35px;
				.box{
					&:first-of-type { left: -15%; }
					&:nth-of-type(2) { left: 10%; }
					&:nth-of-type(3) { left: 30%; }
				}
			}
		}
		.right_side{
			text-align: center;
			h2{
				font-size: 24px;
				margin-bottom: 10px;
			}
			p{ 
				font-size: 14px; 
				margin-bottom: 15px;	
			}
			.boxed_btn{
				font-size: 14px;
				padding: 10px 15px;
			}
		}
	}
	.promo_content_6{ height: 250px;}
	.promo_content_7{ margin-bottom: 30px; height: 200px;}	
		
}

@media #{$large_mobile}{

	
}