@use '../utils' as *;

/*----------------------------------------*/
/*  SPACE CSS START
/*----------------------------------------*/

.section-space {
	padding-top: 120px;
	padding-bottom: 120px;
	@media #{$lg} {
		padding-top: 100px;
		padding-bottom: 100px;
	}
	@media #{$md} {
		padding-top: 80px;
		padding-bottom: 80px;
	}
	@media #{$sm,$xs} {
		padding-top: 80px;
		padding-bottom: 80px;
	}
}
.section-space-top {
	padding-top: 120px;
	@media #{$lg} {
		padding-top: 100px;
	}
	@media #{$md} {

		padding-top: 80px;
	}
	@media #{$sm,$xs} {

		padding-top: 70px;
	}
}
.section-space-bottom {
	padding-bottom: 120px;
	@media #{$lg} {
		padding-bottom: 100px;
	}
	@media #{$md} {
		padding-bottom: 80px;
	}
	@media #{$sm,$xs} {
		padding-bottom: 70px;
	}
}
.section-space-medium {
	padding: 100px 0;
	@media #{$lg} {
		padding: 80px 0;
	}
	@media #{$md} {
		padding: 60px 0;
	}
	@media #{$sm,$xs} {
		padding: 60px 0;
	}
}
.section-space-medium-top {
	padding-top: 100px;
	@media #{$lg} {
		padding-top: 80px;
	}
	@media #{$md} {

		padding-top: 60px;
	}
	@media #{$xs,$sm} {

		padding-top: 60px;
	}
}
.section-space-medium-bottom {
	padding-bottom: 100px;
	@media #{$lg} {
		padding-bottom: 80px;
	}
	@media #{$md} {
		padding-bottom: 60px;
	}
	@media #{$sm,$xs} {
		padding-bottom: 60px;
	}
}
.section-space-small {
	padding: 80px 0;
	@media #{$lg} {
		padding: 80px 0;
	}
	@media #{$md} {
		padding: 60px 0;
	}
	@media #{$sm,$xs} {
		padding: 60px 0;
	}
}
.section-space-small-top {
	padding-top: 80px;
	@media #{$md} {
		padding-top: 60px;
	}
	@media #{$sm,$xs} {
		padding-top: 60px;
	}
}
.section-title-spacing {
	margin-bottom: 55px;
	@media #{$sm,$xs} {
		margin-bottom: 40px;
	}
}
.important-area {
	padding-top: 370px;
	@media #{$lg} {
		padding-top: 350px;
	}
	@media #{$xs,$sm} {
		padding-top: 320px;
	}
}