.section-title {
	text-align: center;
	margin-bottom: 75px;
	
	@include media-query(767px) {
		margin-bottom: 40px;
	}

	span {
		font-family: $section-subtitle-font;
		font-size: 18px;
		color: $theme-primary-color;
		text-transform: uppercase;

		@include media-query(767px) {
			font-size: 16px;
		}
	}

	h2 {
		font-size: 32px;
		line-height: 1em;
		color: $dark-gray;
		margin: 0;
		padding: 0.28em 0 0.6em;
		position: relative;
		text-transform: capitalize;

		@include media-query(767px) {
			font-size: 25px;
		}

		&:before {
			content: "";
			background-color: $theme-primary-color;
			width: 70px;
			height: 7px;
			position: absolute;
			left: 50%;
			bottom: 0;
			@include translatingX();
			@include rounded-border(5px);

			@include media-query(767px) {
				width: 50px;
				height: 5px;
			}
		}
	}
}

.section-title-s2 {
	text-align: center;
	margin-bottom: 60px;

	@include media-query(767px) {
		margin-bottom: 40px;
	}

	h2 {
		font-size: 32px;
		margin: 0;
		text-transform: capitalize;

		span {
			color: $theme-primary-color;
		}

		@include media-query(767px) {
			font-size: 25px;
		}
	}
}


.section-title-s3 {
	text-align: center;
	
	@include widther(992px) {
		margin-bottom: 20px;
	}

	@include media-query(767px) {
		padding: 0 15px;
	}

	h2 {
		font-size: 40px;
		font-weight: normal;
		color: $black;
		margin: 0 0 0.4em;
		text-transform: capitalize;

		span {
			font-weight: bold;
		}

		@include media-query(991px) {
			font-size: 32px;
		}

		@include media-query(767px) {
			font-size: 28px;
		}
	}

	p {
		font-size: 16px;
		color: lighten($black, 20%);
		margin: 0 0 2.39em !important;
	}
}

.section-title-single-heading {
	@extend .section-title-s3;
	margin-bottom: 35px;
}

.section-title-s4 {
	@extend .section-title-s3;
	p {
		color: $text-color;
		margin: 0 0 3.39em !important;
	}
}