// Services

.service {
	&.bg-squared {
		border-radius: 0 !important;
	}
	&.service-style-1 {
		display: block;
		background: $white;
		border: $white 1px solid;
	  border-radius: $curved;
	  box-shadow: $shadow;
		margin-bottom: 30px;
	  margin-top: 50px;
		padding: 0px 60px 20px 60px;
		text-align: center;
	  @include transition(all 0.4s ease-in-out);
	  &:hover {
	    @include transition(all 0.4s ease-in-out);
			box-shadow: $shadow-hover;
	  }
	  svg {
	  	font-size: 3rem;
	    padding:20px;
	    width: 100px;
	    height: 100px;
	    line-height: 60px;
	    margin-top: -50px;
	    background: $gradient;
	    border-radius: $circle;
	    color: $white;
	    display:inline-block;
	  }
		i {
	  	font-size: 3rem;
	    padding:20px;
	    width: 100px;
	    height: 100px;
	    line-height: 60px;
	    margin-top: -50px;
	    background: $gradient;
	    border-radius: $circle;
	    color: $white;
	    display:inline-block;
	  }
		img {
	    padding:10px;
	    width: 100px;
	    height: 100px;
	    line-height: 60px;
	    margin-top: -50px;
	    background: $gradient;
	    border-radius: $circle;
	    display:inline-block;
	  }
	  .service-text {
	  	display: block;
	  	@include transition(all 0.4s ease-in-out);
	  	margin-bottom: 30px;
	  }
	  .service-title {
	  	display: block;
			font-weight: $bold;
	  	margin: 40px 0 15px;
	  	@include transition(all 0.4s ease-in-out);
	  }
	}
	&.service-style-2 {
		display: block;
		position: relative;
		margin-top: 30px;
		margin-bottom: 30px;
		img {
			width: 80px;
			height: auto;
		}
		i {
			font-size: 1.8rem;
			color: $heading-color;
			&.gradient {
				background: $gradient;
			  -webkit-background-clip: text;
			  -webkit-text-fill-color: transparent;
			}
			&.primary {
				color: $primary;
			}
			&.secondary {
				color: $secondary;
			}
		}
		h5.service-title {
		  margin: 1rem 0;
			&.gradient {
				background: $gradient;
			  -webkit-background-clip: text;
			  -webkit-text-fill-color: transparent;
			}
			&.primary {
				color: $primary;
			}
			&.secondary {
				color: $secondary;
			}
		}
	}
	&.service-style-3 {
		display: block;
		background: $gradient;
		border: none;
	  border-radius: $curved;
	  box-shadow: $shadow;
		color: $white;
		margin-bottom: 30px;
	  margin-top: 50px;
		padding: 0px 60px 20px 60px;
		text-align: center;
	  @include transition(all 0.4s ease-in-out);
	  &:hover {
	    @include transition(all 0.4s ease-in-out);
			box-shadow: $shadow-hover;
	  }
	  svg {
	  	font-size: 3rem;
	    padding:20px;
	    width: 100px;
	    height: 100px;
	    line-height: 60px;
	    margin-top: -50px;
	    background: $white;
	    border-radius: $circle;
	    color: $primary;
	    display:inline-block;
	  }
		i {
	  	font-size: 2rem;
	    padding:20px;
	    width: 100px;
	    height: 100px;
	    line-height: 60px;
	    margin-top: -50px;
	    background: $white;
	    border-radius: $circle;
	    color: $secondary;
	    display:inline-block;
	  }
		img {
	    padding:10px;
	    width: 100px;
	    height: 100px;
	    line-height: 60px;
	    margin-top: -50px;
	    background: $white;
	    border-radius: $circle;
	    display:inline-block;
	  }
	  .service-text {
	  	display: block;
	  	@include transition(all 0.4s ease-in-out);
	  	margin-bottom: 30px;
	  }
	  .service-title {
	  	display: block;
			color: $white;
			font-weight: $bold;
	  	margin: 40px 0 15px;
	  	@include transition(all 0.4s ease-in-out);
	  }
	}
	&.service-style-4 {
		display: block;
		background: $white;
		border: $white 1px solid;
	  border-radius: $curved;
	  box-shadow: $shadow;
		margin-bottom: 30px;
	  margin-top: 0;
		padding: 20px 60px 20px 60px;
		text-align: left;
	  @include transition(all 0.4s ease-in-out);
	  &:hover {
	    @include transition(all 0.4s ease-in-out);
			box-shadow: $shadow-hover;
	  }
		i {
	  	font-size: 3rem;
	    padding: 20px 0;
	    width: 100px;
	    height: 100px;
	    line-height: 60px;
			background: $gradient;
		  -webkit-background-clip: text;
		  -webkit-text-fill-color: transparent;
	    display:inline-block;
	  }
		img {
	    padding: 20px;
	    width: 120px;
	    line-height: 60px;
	    color: $white;
	    display:inline-block;
	  }
	  .service-text {
	  	display: block;
	  	@include transition(all 0.4s ease-in-out);
	  	margin-bottom: 30px;
	  }
	  .service-title {
	  	display: block;
			font-size: 1.4rem;
	  	margin: 0px 0 15px;
	  	@include transition(all 0.4s ease-in-out);
	  }
	}
	&.service-style-5 {
		display: block;
		background-image: $gradient;
	  border-radius: $curved;
		color: $white;
		margin-bottom: 30px;
	  margin-top: 0;
		padding: 20px 60px 20px 60px;
		text-align: center;
		box-shadow: $shadow;
		@include transition(all 0.4s ease);
		&:hover {
			box-shadow: $shadow-hover;
			background-position: right center;
			@include transition(all 0.4s ease);
		}
		i {
	  	font-size: 2rem;
	    padding: 20px;
	    width: 100px;
	    height: 100px;
	    line-height: 60px;
	    color: $white;
	    display:inline-block;
	  }
		img {
	    padding: 20px;
	    width: 230px;
	    line-height: 60px;
	    color: $white;
	    display:inline-block;
	  }
	  .service-text {
	  	display: block;
	  	margin-bottom: 30px;
	  }
	  .service-title {
	  	display: block;
			color: $white;
	  	margin: 0px 0 15px;
	  }
	}
	&.service-style-6 {
		display: block;
		background: $primary;
	  border-radius: $curved;
		color: $white;
		margin-bottom: 30px;
	  margin-top: 0;
		padding: 20px 60px 20px 60px;
		text-align: center;
		box-shadow: $shadow;
		@include transition(all 0.4s ease-in-out);
		&:hover {
			box-shadow: $shadow-hover;
		}
		i {
	  	font-size: 2rem;
	    padding: 20px;
	    width: 100px;
	    height: 100px;
	    line-height: 60px;
	    color: $white;
	    display:inline-block;
	  }
		img {
	    padding: 20px;
	    width: 230px;
	    line-height: 60px;
	    color: $white;
	    display:inline-block;
	  }
	  .service-text {
	  	display: block;
	  	margin-bottom: 30px;
	  }
	  .service-title {
	  	display: block;
			color: $white;
	  	margin: 0px 0 15px;
	  }
	}
}
