// info area 1
.info_area_1{
	background-image: url(../img/info_bg.jpg);
	@include bg_property;
	position: relative;
	@extend .section_padding;
	z-index:1;
	&:after {
	    content: '';
	    position: absolute;
	    left: 0;
	    top: 0;
	    width: 100%;
	    height: 100%;
	    background: #000033;
	    z-index: -1;
	    opacity: .9;
	}
	.info_img{
		position: relative;
		left: -30px;
	}
	h3{ color: #fff;
		font-size: 36px;
		@include firasans(700);
    	margin-bottom: 60px;
		span{ color: $green; }
	}
	.info_box{
		position: relative;
    	left: 70px;
    	margin-bottom: 60px;
		i{ 
		    position: absolute;
		    left: -70px;
		    color: #fff;
		    background: rgba(0,50, 251, .45);
		    padding: 15px;
		    border: 4px solid #fff;
		    margin-top: 5px;
		    border-radius: 50%;
			font-size: 22px;
		}
		h4{ 
			font-size: 24px;
			color: $green;
			@include firasans(500);
		}
		p{
			color: #fff;
			@include firasans(400);
			line-height:1.5;
			font-size: 16px;
		}
	}
}

	// info area 2
.info_area_2{
	background-image: url(../img/info_bg.jpg);
	@include bg_property;
	position: relative;
	@extend .section_padding;
	z-index:1;
	&:after {
	    content: '';
	    position: absolute;
	    left: 0;
	    top: 0;
	    width: 100%;
	    height: 100%;
	    background: rgba(0, 0, 0, 0.7);
	    z-index: -1;
	    opacity: .9;
	}
	.info_img{
		position: relative;
		left: -30px;
	}
	h3{ color: #fff;
		font-size: 36px;
		@include firasans(700);
    	margin-bottom: 60px;
		span{ color: $green; }
	}
	.info_box{
		position: relative;
    	left: 70px;
    	margin-bottom: 60px;
		i{ 
		    position: absolute;
		    left: -70px;
		    color: #fff;
		    @include gradient_bg_12(top);
		    padding: 15px;
		    border: 4px solid #fff;
		    margin-top: 5px;
		    border-radius: 50%;
			font-size: 22px;
		}
		h4{ 
			font-size: 24px;
			color: $green;
			@include firasans(500);
		}
		p{
			color: #fff;
			@include firasans(400);
			line-height:1.5;
			font-size: 16px;
		}
	}
}


	// Responsive
@media #{$medium_device}{
	
}
@media #{$tab_device}{
	.info_area_1{
		h3{ 
			font-size: 28px;
	    	margin-bottom: 25px;
		}
		.info_box{
			padding-right: 55px;
	    	margin-bottom: 25px;
	    	left: 60px;
			i{ 
			    left: -60px;
			    padding: 12px;
			    border: 3px solid #fff;
			    margin-top: 0px;
			    border-radius: 50%;
				font-size: 18px;
			}
			h4{ font-size: 18px; }
			p{ font-size: 14px; }
		}
	}
	.info_area_2{
		h3{ 
			font-size: 28px;
	    	margin-bottom: 25px;
		}
		.info_box{
			padding-right: 55px;
	    	margin-bottom: 25px;
	    	left: 60px;
			i{ 
			    left: -60px;
			    padding: 12px;
			    border: 3px solid #fff;
			    margin-top: 0px;
			    border-radius: 50%;
				font-size: 18px;
			}
			h4{ 
				font-size: 18px;
			}
			p{
				font-size: 14px;
			}
		}
	}
}
@media #{$small_mobile}{
	.info_area_1{
		h3{ 
			font-size: 28px;
	    	margin-bottom: 25px;
		}
		.info_box{
			padding-right: 70px;
	    	margin-bottom: 25px;
			i{ 
			    left: -60px;
			    padding: 12px;
			    border: 3px solid #fff;
			    margin-top: 0px;
			    border-radius: 50%;
				font-size: 18px;
			}
			h4{  font-size: 18px; }
			p{ font-size: 14px; }
		}
	}
	.info_area_2{
		h3{ 
			font-size: 28px;
	    	margin-bottom: 25px;
		}
		.info_box{
			padding-right: 70px;
	    	margin-bottom: 25px;
			i{ 
			    left: -60px;
			    padding: 12px;
			    border: 3px solid #fff;
			    margin-top: 0px;
			    border-radius: 50%;
				font-size: 18px;
			}
			h4{ font-size: 18px; }
			p{ font-size: 14px; }
		}
	}
}
@media #{$large_mobile}{
	
}