// Subscribe area 1
.subscribe_area_1{
    position: relative;
    margin-left: 35px;
    top: -135px;
    background: #fff;
    border-radius: 10px;
    padding: 25px;
    overflow: hidden;
    z-index: 1;
    @include boxshadow(-6px, 0px, 10px, 0px, rgba(0, 0, 0, 0.1), false);
	&:after {
	    position: absolute;
	    content: '';
	    width: 100%;
	    height: 100%;
	    border-radius: 10px;
	    left: 50%;
	    @include rotate(65deg);
	    top: 35%;
	    z-index: -1;
	    background: $brand;
	    opacity: .25;
	}
	h4{
		font-size: 18px;
	    @include firasans(700);
	    color: $brand;
	    margin-bottom:15px;
	}
	p{ 
		font-size: 14px;
	    color: $dark;
	    margin-bottom: 40px;
	    @include firasans(400);
	    line-height: 24px;
	}
	.subscribe_in{
	 	width: 100%;
	    border-radius: 5px;
	    background: #fff;
	    border: 1px solid $brand;
	    @include boxshadow( 0px, 0px, 13px, 0px, rgba(12, 186, 252, 0.3), false);
	    margin-bottom: 30px;
	    @include firasans(400);
	    @include placeholdercolor( $brand, .8);
	}
	button{
		display: block;
	    width: 100%;
	    font-size: 18px;
	    @include firasans(700);
	    padding:12px;
	    color: #fff;
	    background: $green;
	    border: none;
	    border-radius: 5px;
	    margin-bottom: 90px;
	    @include transition(all,.3s,ease-in-out);
	    &:hover{
	    	cursor: pointer;
			@include boxshadow(0, 0, 10px, 0,#999, false);
	    }
    }
	.phoneNo{
		h4{ 
			color: $dark; 
			@include rubik(700); 
			font-size: 18px; }
		h3{
			@include boxshadow(0px, 3px, 7px, 0px, rgba(12, 186, 252, 0.35), false);
		    background: #fff;
		   	@include firasans(700);
			font-size: 24px;
		    color: $brand;
		    text-align: center;
		    padding: 15px 35px;
		    margin-bottom: 15px;
		    display: inline-block;
		    border-radius: 50px;
		}
	}
}
	// Subscribe area 2
.subscribe_area_2{
	@extend .subscribe_area_1;
	top: -130px;
	h4{
		font-size: 24px;
		color: $brand_2;
		margin-bottom: 10px;
		span{ color: $green; }
	}
	p{	margin-bottom: 30px;	}
	.subscribe_in{ padding-left: 20px; font-size: 14px; }
	.subscribe_in, .subscribe_btn{ border-radius: 25px; }
	.phoneNo { 
		h4{ 
			font-size: 18px;
			color: $dark;
			margin-bottom: 10px; 
		}
	}
}


	// Responsive
@media #{$medium_device}{
	.subscribe_area_1{
	    top: -98px;
	    padding: 20px;
		h4{ font-size: 16px; }
		p{ 
			font-size: 14px;
		    margin-bottom: 25px;
		 }
		.subscribe_in{  margin-bottom: 25px; }
		button{  margin-bottom: 35px; }
		.phoneNo{
			h3{ 
			    padding: 10px 20px;
			    border-radius: 50px;
			}
		}
	}
	.subscribe_area_2 { top: -75px; }
}
@media #{$tab_device}{
	.subscribe_area_1{
	    top: -76px;
	    padding: 20px;
		&:after {
			left: 40%;
			@include rotate(70deg);
			top: 42%;
		}
		h4{ font-size: 16px; }
		p{ 
			font-size: 14px;
		    margin-bottom: 25px;
		 }
		.subscribe_in{  margin-bottom: 25px; }
		button{ margin-bottom: 35px; }
		.phoneNo{
			h3{ 
			    padding: 10px 20px;
			    border-radius: 50px;
			}
		}
	}
	.subscribe_area_2{ top: -58px; }
}
@media #{$small_mobile}{
	.subscribe_area_1{
	    top: 25px;
	    padding: 20px;
	    margin: 0px;
	    width: 100%;
	    border-radius: 0;
		&:after {
			left: 38%;
			@include rotate(70deg);
			top: 52%;
		}
		h4{ font-size: 16px; }
		p{ 
			font-size: 14px;
		    margin-bottom: 25px;
		 }
		.subscribe_in{   margin-bottom: 25px; }
		button{ margin-bottom: 35px; }
		.phoneNo{
			h3{ 
			    padding: 10px 20px;
			    border-radius: 50px;
			}
		}
	}
	.subscribe_area_2 {
	    top: 25px;
	    padding: 20px;
	    margin: 0px;
	    width: 100%; 
	}	
	
}
@media #{$large_mobile}{

}