// Call to Action 1
.call_to_action_area{
	background: #00000059;
	.ct_wrapper{
		min-height: 260px;
		.ct_action{
			h3{
				font-size: 36px;
				line-height: 1.5;
				@include firasans(700);
				color: #fff;
				margin-bottom: 10px;
				span{ color: $yellow; }
			}
			p{
				@include firasans(400);
				font-size: 16px;
				line-height: 1.5;
				color: #fff;
			}
		}			
	}
	.boxed_btn{ 
		@extend .gradient_btn_main;
		margin-left: auto;
		border-radius: 30px;
		text-transform: uppercase;
		color:#fff;
		padding: 15px 25px;
		border: 2px solid $green;
		background: $green;
		&:after{
			border:none;
			border-radius: 30px;
			background: rgba(7, 8, 45, 0.5);
		}
		&:hover{ 
			border:2px solid #fff;
			background: transparent;
		}
	}		
}

	// Call to Action 2
.call_to_action_area_2{
    background: $brand_3_dark;
	.ct_action {
	    color: #fff;
	    padding: 27px 0;
	    padding-left: 60px;
		position: relative;
	    i {
		    font-size: 48px;
		    position: absolute;
		    left: 0;
		}
		h3, h4{ @include rubik(400); }
		h4 { font-size: 18px; }

		h3 { font-size: 24px; }
	}
	.mail_subscribe{
		background: $green;
	    position: relative;
	    z-index: 4;
	    padding: 22px 0;
		form {
		    position: relative;
		    width: 100%;
			input {
			    font-size: 18px;
			    padding: 20px;
			    margin-left: 30px;
			    border: 1px solid #fff;
			    background: rgba(0,0,0,0.1);
			    width: 65%;
			    color: #fff;
			    @include placeholdercolor(#fff, .9);
			}
			button {
			    width: 20%;
			    color: $green;
			    background: #fff;
			    height: 100%;
			    cursor: pointer;
			    position: absolute;
			    border: 1px solid #fff;
			    font-size: 24px;
			    @include transition(all, .3s, ease-in-out);
			    i{ 
			    	@extend .mirrord;
			    	transform: rotate(90deg);
			    	color: $green;
			    	@include transition(all, .3s, ease-in-out);
			    }
			   &:hover i{ transform: rotate(43deg); }
			}
		}
		&:after {
		    position: absolute;
		    top: 0;
		    background: $green;
		    left: 0;
		    width: 1000%;
		    height: 100%;
		    z-index: -1;
		    content: '';
		}
	}	
}

	// Call to Action 3
.call_to_action_area_3{
	background: transparent;
	.ct_wrapper {
	    min-height: 140px;
	    padding: 20px 0;
	    color: #fff;
	    .ct_action{
			font-size: 36px;
			line-height: 1.5;
			@include firasans(700);
			color: #fff;
			margin-bottom: 10px;
		}
	    .low_price{ 
	    	font-size: 16px; 
	    	@include firasans(400);
	    	.dolor_sign{ color: $yellow; }
	    	span{ 
	    		font-size: 48px; 
		    	@include rubik(700); 
		    	color: $green;
	    	}
	    }
	    .boxed_btn { 
			@extend .gradient_btn_main;
			border-radius: 30px;
			text-transform: uppercase;
			color:#fff;
			padding: 15px 25px;
			@include transition(all, .3s, ease-in-out);
			@include gradient_bg_12(top);
			&:after{
				border: 2px solid $brand_4;
				border-radius: 30px;
				background: $dark_bg_1;
			}
			&:hover{  color: #fff; }
		}
	}

}
	// Call to Action 4
.call_to_action_area_4{
	@extend .section_padding;
	color: #fff;
	position: relative;
	z-index: 1;
	@include gradient_bg_12(right);
	h4{ 
		@include firasans(400);
		font-size: 16px; 
		margin-bottom: 15px;
	}
	h3{
		font-size: 36px;
		text-transform: uppercase;
		margin-bottom: 30px;
		@include firasans(700);
	}
	p{
		line-height: 2;
		font-size: 14px;
		@include firasans(400);
		margin-bottom: 45px;
	}
	.boxed_btn{
		background: #fff;
		padding: 15px 30px;
		font-size: 16px;
		text-transform: uppercase;
		color: $brand_2;
		margin: 0 7px;
		border-radius: 5px;
		display: inline-block;
		@include firasans(500);
		@include transition(all, .3s, ease-in-out);
		&:hover{
			background: rgba(0,0,0,0.3);
			color: #fff;
		}
		&.boxed_btn.alt{
			background: rgba(0,0,0,0.3);
			color: #fff;
			&:hover{
				background: #fff;
				color: $brand_2;
			}
		}
	}
}

	// Call to Action 5
.call_to_action_area_5{
	@extend .section_padding;
	color: #fff;
	position: relative;
	z-index: 1;
	&:after{
		transform: skewY(-3deg);
		@include gradient_bg_11(bottom);
		position: absolute;
		left:0;
		top: 0;
		width: 100%;
		height: 100%;
		content: '';
		z-index: -1;
	}
	h4{ 
		@include firasans(400);
		font-size: 16px; 
		margin-bottom: 15px;
	}
	h3{
		font-size: 36px;
		text-transform: uppercase;
		margin-bottom: 30px;
		@include firasans(700);
	}
	p{
		line-height: 2;
		font-size: 14px;
		@include firasans(400);
		margin-bottom: 45px;
	}
	.boxed_btn{
		background: #fff;
		padding: 15px 30px;
		font-size: 16px;
		text-transform: uppercase;
		color: $brand_2;
		margin: 0 7px;
		border-radius: 5px;
		display: inline-block;
		@include firasans(500);
		@include transition(all, .3s, ease-in-out);
		&:hover{
			background: rgba(0,0,0,0.3);
			color: #fff;
		}
		&.boxed_btn.alt{
			background: rgba(0,0,0,0.3);
			color: #fff;
			&:hover{
				background: #fff;
				color: $brand_2;
			}
		}
	}
}

	// Call to Action 6
.call_to_action_area_6{
	@extend .section_padding;
	color: #fff;
	position: relative;
	z-index: 1;
	h4{ 
		color: #fff;
		font-weight: 500;
		@include firasans(400);
		font-size: 16px; 
		margin-bottom: 15px;
	}
	h3{
		font-size: 36px;
		text-transform: uppercase;
		color: $brand_2;
		margin-bottom: 30px;
		@include firasans(700);
	}
	p{
		line-height: 2;
		color: #fff;
		font-size: 14px;
		@include firasans(400);
		margin-bottom: 45px;
	}
	.boxed_btn{
		background: $brand_6;
		padding: 15px 30px;
		font-size: 16px;
		text-transform: uppercase;
		color: #fff;
		margin: 0 7px;
		border-radius: 5px;
		display: inline-block;
		@include firasans(500);
		@include transition(all, .5s, ease-in-out);
		&:hover{
			background: $dark_3;
		}
		&.boxed_btn.alt{
			background: $dark_3;
			&:hover{
				background: $brand_6;
			}
		}
	}
}

	// Call to Action 7
.call_to_action_area_7{
	@extend .section_padding;
	color: #fff;
	@include gradient_bg_7(bottom);
	position: relative;
	z-index: 1;
	h4{  
		font-weight: 500;
		@include firasans(400);
		font-size: 16px; 
		margin-bottom: 15px;
	}
	h3{
		font-size: 36px;
		text-transform: uppercase; 
		margin-bottom: 30px;
		@include firasans(700);
	}
	p{
		line-height: 2; 
		font-size: 14px;
		@include firasans(400);
		margin-bottom: 45px;
	}
	.boxed_btn{
		background: #fff;
		padding: 15px 30px;
		font-size: 16px;
		text-transform: uppercase;
		color: $dark_3;
		margin: 0 7px;
		border-radius: 5px;
		display: inline-block;
		@include firasans(500);
		@include transition(all, .5s, ease-in-out);
		&:hover{
			background: rgba(0,0,0,0.3);
			color: #fff;
		}
		&.boxed_btn.alt{
			background: rgba(0,0,0,0.3);
			color: #fff;
			&:hover{
				background: #fff;
				color: $dark_3;
			}
		}
	}
}	
	// Call to Action 8
.call_to_action_area_8{
	@extend .section_padding;
	color: #fff;
	@include gradient_bg_9(bottom);
	position: relative;
	z-index: 1;
	h4{  
		font-weight: 500;
		@include firasans(400);
		font-size: 16px; 
		margin-bottom: 15px;
	}
	h3{
		font-size: 36px;
		text-transform: uppercase; 
		margin-bottom: 30px;
		@include firasans(700);
	}
	p{
		line-height: 2; 
		font-size: 14px;
		@include firasans(400);
		margin-bottom: 45px;
	}
	.boxed_btn{
		background: #fff;
		padding: 15px 30px;
		font-size: 16px;
		text-transform: uppercase;
		color: $dark_3;
		margin: 0 7px;
		border-radius: 5px;
		display: inline-block;
		@include firasans(500);
		@include transition(all, .5s, ease-in-out);
		&:hover{
			background: rgba(0,0,0,0.3);
			color: #fff;
		}
		&.boxed_btn.alt{
			background: rgba(0,0,0,0.3);
			color: #fff;
			&:hover{
				background: #fff;
				color: $dark_3;
			}
		}
	}
}

	// Responsive

@media #{$medium_device}{
	.call_to_action_area {
		.ct_action {
		    padding-right: 50px;
			h3{ font-size: 24px;  }
		    p{font-size: 14px;}
		}
	    .boxed_btn{
	    	font-size: 14px;
	    	padding: 12px 22px;
	    }
    }
    .call_to_action_area_2{
	    background: $brand_3_dark;
		.ct_action {
		    i {
			    font-size: 40px;
			    left: 25px;
			}
			h4 {  font-size: 16px;	}

			h3 {    font-size: 20px;	}
		}
	}
	.call_to_action_area_3{
		.ct_wrapper {
		    .ct_action{
		    	max-width: 50%;
			}
		}
	}

}
@media #{$tab_device}{
	.call_to_action_area {
		.ct_wrapper .ct_action{
		    h3{ font-size: 24px; }
		    p{font-size: 14px;}
		}
		.boxed_btn {
		    font-size: 14px;
		    padding: 12px 22px;
		}
	} 
	.call_to_action_area_2{
		.ct_action {
			padding: 20px;
			padding-left: 50px;
		    i {
			    font-size: 36px;
			    left: 20px;
			}
			h4 {  font-size: 14px;	}

			h3 {    font-size: 16px;	}
		}
		.mail_subscribe {
		    padding: 20px 0;
		    form input {
			    font-size: 14px;
			    padding: 8px;
			    margin-left: 15px;
			    width: 70%;
			}
			button i{ font-size: 20px; }
		}
	}
	.call_to_action_area_3{
		.ct_wrapper {
		    .ct_action{
		    	text-align: center;
		    	font-size: 28px;
			}
		    .low_price{ 
		    	span{ font-size: 36px; }
		    }
		    .boxed_btn { 
				margin-top:20px;
				font-size: 14px;
				padding: 10px 20px;
				display: inline-block;
			}
		}
	}
	.call_to_action_area_4{
		h4{ 
			margin-bottom: 10px;
		}
		h3{
			font-size: 28px;
			margin-bottom: 25px;
		}
		p{
			line-height: 1.7;
			margin-bottom: 35px;
		}
		.boxed_btn{ padding: 10px 20px; }
	}
	.call_to_action_area_5{
		h4{ 
			margin-bottom: 10px;
		}
		h3{
			font-size: 28px;
			margin-bottom: 25px;
		}
		p{
			line-height: 1.7;
			margin-bottom: 35px;
		}
		.boxed_btn{ padding: 10px 20px; }
	}
	.call_to_action_area_6{
		h4{ 
			margin-bottom: 10px;
		}
		h3{
			font-size: 28px;
			margin-bottom: 25px;
		}
		p{
			line-height: 1.7;
			margin-bottom: 35px;
		}
		.boxed_btn{ padding: 10px 20px; }
	}
	.call_to_action_area_7{
		h4{ 
			margin-bottom: 10px;
		}
		h3{
			font-size: 28px;
			margin-bottom: 25px;
		}
		p{
			line-height: 1.7;
			margin-bottom: 35px;
		}
		.boxed_btn{ padding: 10px 20px; }
	}
	.call_to_action_area_8{
		h4{ 
			margin-bottom: 10px;
		}
		h3{
			font-size: 28px;
			margin-bottom: 25px;
		}
		p{
			line-height: 1.7;
			margin-bottom: 35px;
		}
		.boxed_btn{ padding: 10px 20px; }
	}

}
@media #{$small_mobile}{
	.call_to_action_area {
		.ct_wrapper {
		    min-height: 170px;
			.ct_action{
				text-align: center;
			    h3{ font-size:18px; }
			    p{font-size: 14px;}
			}
		}
		.boxed_btn {
		    margin: auto;
		    margin-bottom: 20px;
		    padding: 12px 22px;
		    font-size: 14px;
		}
	}
	.call_to_action_area_2 {
		.mail_subscribe:after{ left: -30%; }
	}
	.call_to_action_area_3{
		.ct_wrapper {
		    .ct_action{
		    	text-align: center;
		    	font-size: 28px;
			}
		    .low_price{ 
		    	span{ font-size: 36px; }
		    }
		    .boxed_btn { 
				margin-top:20px;
				font-size: 14px;
				padding: 10px 20px;
				display: inline-block;
			}
		}
	}
	.call_to_action_area_4{
		h4{ 
			margin-bottom: 5px;
			font-size: 14px
		}
		h3{
			font-size: 24px;
			margin-bottom: 20px;
		}
		p{ display: none; }
		.boxed_btn{
			padding: 10px 15px;
			font-size: 14px
		}
	}
	.call_to_action_area_5{
		h4{ 
			margin-bottom: 5px;
			font-size: 14px
		}
		h3{
			font-size: 24px;
			margin-bottom: 20px;
		}
		p{ display: none; }
		.boxed_btn{
			padding: 10px 15px;
			font-size: 14px
		}
	}
	.call_to_action_area_6{
		h4{ 
			margin-bottom: 5px;
			font-size: 14px
		}
		h3{
			font-size: 24px;
			margin-bottom: 20px;
		}
		p{ display: none; }
		.boxed_btn{
			padding: 10px 15px;
			font-size: 14px
		}
	}
	.call_to_action_area_7{
		h4{ 
			margin-bottom: 5px;
			font-size: 14px
		}
		h3{
			font-size: 24px;
			margin-bottom: 20px;
		}
		p{ display: none; }
		.boxed_btn{
			padding: 10px 15px;
			font-size: 14px
		}
	}
	.call_to_action_area_8{
		h4{ 
			margin-bottom: 5px;
			font-size: 14px
		}
		h3{
			font-size: 24px;
			margin-bottom: 20px;
		}
		p{ display: none; }
		.boxed_btn{
			padding: 10px 15px;
			font-size: 14px
		}
	}


}
@media #{$large_mobile}{
	.call_to_action_area {
		.boxed_btn {
		    margin-bottom: 30px;
		}
	}
}