/*--------------------------------------------White Box-----------------------------------------*/

.white-box {
    background: #ffffff;
    margin-left: 40px;
    padding: 13% 10% 10% 15%;
  	top: 20px;
}

.white-box .sppb-feature-box-title {
    text-transform: uppercase;
    font-weight: 400;
    line-height: 40px!important;
    margin-bottom: 20px;
    color: #333333!important;
}

.white-box .sppb-addon-text {
    margin-bottom: 28px;
}

/*--------------------------------------------End White Box-----------------------------------------*/

/*--------------------------------------White Box Right Position-----------------------------------------*/
.right-whitebox {
    left: -70px;
    top: 0px;
}

/*--------------------------------------White Box Left Position-----------------------------------------*/
.left-whitebox {
    left: 30px;
}

/*--------------------------------------Top Line-----------------------------------------*/
.top-line{
    position: relative;
}

.top-line:before {
    width: 65%;
    height: 1px;
    background: #000;
    position: absolute;
    content: "";
    right: -80px;
    top: 45px;
}
/*------------------------------------End Top Line-----------------------------------------*/

/*--------------------------------------Right Line-----------------------------------------*/
.right-line{
    position: relative;
}

.right-line:before {
    width: 1px;
    height: 80%;
    background: #000;
    position: absolute;
    content: "";
    right: 40px;
    top: 140px;
}
/*------------------------------------End Right Line-----------------------------------------*/

.service-box .sppb-feature-box-title {
    margin-top: 1rem;
}

.service-box .sppb-media-content {
    background: #eef1fc;
    padding: 15% 10%;
    margin: -28% 7% 0% 6%;
    position: relative;
    color: #222222;
    transition: ease 0.3s;
}

.service-box .sppb-media-content .sppb-addon-text {
    font-size: 14px;
    padding-top: 10px;
}

.service-box .sppb-media-content:before{
    position: absolute;
    content: "";
    width: 40%;
    height: 2px;
    background: #222222;
    top: 15%;
    left: 12%;
    z-index: 1;
  	transition: ease 0.3s;
}

.service-box .sppb-media-content:after{
    position: absolute;
    content: "";
    width: 40%;
    height: 2px;
    background: #222222;
    bottom: 15%;
    left: 12%;
    z-index: 1;
    transition: ease 0.3s;
}

.service-box:hover .sppb-media-content{
    background: #186b48;
    color: #fafafa;
}

.service-box:hover .sppb-feature-box-title{
	color: #fafafa!important;
}

.service-box:hover .sppb-media-content:before, .service-box:hover .sppb-media-content:after {
    background: #fafafa;
}

.service-box {
    margin-left: 15px;
    margin-right: 15px;
}


@media (max-width: 1350px) and (min-width:1200px){
	.right-line:before{
    	top: 110px;
	}

}

@media (max-width: 1199px) and (min-width:992px) {
	.white-box {
    	background: #ffffff;
    	margin-left: 0px;
    	padding: 13% 8% 8% 12%;
    	top: 0px;
 	}

    .sppb-btn-default{
    	font-size: 13px!important;
    }
  
    .top-line:before {
    	top: 30px;
    }
  
	.white-box .sppb-addon-text {
    	margin-bottom: 0px;
	}
  
    .right-line:before{
      	height: 75%;
    	top: 35%;
      	right: 5%;
	}
  
    .right-whitebox{
  		left: -30px;
    }
  
  	.service-box .sppb-media-content:before {
    	width: 40%;
    	top: 15%;
    	left: 8%;
   }

	.service-box .sppb-media-content:after {
    	width: 40%;
    	bottom: 15%;
    	left: 8%;
   }
  
  	.title-002:before {
    	top: 17%;
	}

}

@media (max-width: 992px) {
	.service-box .sppb-feature-box-title {
    	font-size: 30px!important;
	}
}

@media (max-width: 991px) {
	.white-box {
    	top: 0px;
    	padding: 13% 5% 8% 10%;
      	margin-left: 0px;
    	margin-top: 3%;
      	margin-bottom: 30px;
	}

	.white-box .sppb-addon-text {
    	margin-bottom: 0px;
	}

	.top-line:before {
    	top: 25px;
	}

	.white-box .sppb-feature-box-title {
    	font-size: 32px!important;
	}
  
  	.right-whitebox {
    	left: -30px;
    }
  
    .right-line:before {
    	right: 20px;
    	top: 80px;
    }

}

@media (max-width: 767px) {
	.top-line:before {
    	width: 80%;
    	top: 35px;
	}

	.white-box {
    	padding: 9% 15% 7% 8%;
	}
  
  	.home-left-img img {
    	width: 95%!important;
	}
  
  	.home-right-img img {
    	width: 95%!important;
      	float: right;
	}
  
    .right-whitebox {
    	padding: 10% 10% 8% 15%;
	}
  
    .right-line:before {
    	right: 40px;
    	top: 80px;
	}
  
  	.service-box .sppb-feature-box-title {
    	font-size: 28px!important;
	}

}

@media (max-width: 575px) {
	.right-line:before {
    	right: 22px;
    	top: 75px;
	}
  
  	.service-box .sppb-media-content {
    	margin: -30% 10% 0% 10%!important;
	}
  
    .service-box .sppb-feature-box-title {
    	font-size: 25px!important;
	}
  
	.top-line:before {
    	width: 80%;
    	top: 20px;
	}
  
  	.white-box .sppb-feature-box-title {
    	font-size: 28px!important;
	}
  
  	.title-001 .sppb-addon-title {
    	font-size: 30px!important;
    	line-height: 38px!important;
	}

	.title-002 .sppb-addon-title {
    	font-size: 27px!important;
    	line-height: 30px!important;
 	}

  	.service-box .sppb-media-content:after {
    	left: 9%;
    	bottom: 11%;
	}

	.service-box .sppb-media-content:before {
    	left: 9%;
    	top: 11%;
	}
  
  	.title-002:before {
    	top: 11%;
	}
}