/* --------------- HERO - SECTION --------------- */

.hero {
	height: 80vh;
	width: 100%;
	background-image: url('../images/pipe-water.jpeg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position-y: 40%;
	position: relative;
}

.hero-bg {
	height: 100%;
	width: 100%;
	z-index: 3;
	/* background-color: rgba(40, 40, 40, 0.5); */
}

.hero-text {
	color: white;
	position: absolute;
	left: 10%;
	top: 30%;
}

.hero-text h2,
.hero-text p {
	margin-bottom: 25px;
}

.hero-text h2{
	font-size: 40px;
}

.hero-text p {
	display: block;
	font-size: 17px;
}

.hero-text button {
	background-color: var(--primary-blue);
	padding: 15px 25px;
	border-radius: 10px;
	letter-spacing: 1px;
	font-weight: 600;
}

.hero-text button a {
	color: white;
}

@media (max-width: 1199px) {
	.hero {
		background-position-x: 50%;
	}
}

@media (max-width: 899px) {
	.hero {
		margin-top: 100px;
	}
}

@media (max-width: 799px) {
	.hero-text {
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
	}
}

@media (max-width: 499px) {
	.hero {
		background-position-x: 65%;
	}
}

/* --------------- SECTIONS --------------- */

.sec {
	display: flex;
	margin: 90px auto 0;
}

.sec h2 {
	flex-basis: 50%;
	font-size: 17px;
	text-transform: uppercase;
}

.sec p {
	font-size: 15px;
}

/* --------------- ABOUT - SECTION --------------- */

.about {
	align-items: center;
}

@media (max-width: 899px) {
	.sec {
		flex-direction: column;
	}

	.about {
		text-align: center;
	}

	.about h2 {
		margin-bottom: 50px;
	}
}

/* --------------- PRODUCTS - SECTION --------------- */

.products {
	flex-direction: column;
}

.products button {
	background-color: var(--primary-blue);
	padding: 15px 25px;
	border-radius: 10px;
	letter-spacing: 1px;
	font-weight: 600;
	margin: 0 auto;
}

.products button a {
	color: white;
}

.products-container {
	display: flex;
	justify-content: space-around;
	flex-wrap: nowrap;
	margin: 70px auto 0;
}

.product {
	background-color: var(--bg-grey);
	border-radius: 25px;
	flex-basis: 25%;
	color: white;
	text-align: center;
	margin-bottom: 70px;
}

.product img {
	border-top-left-radius: 25px;
	border-top-right-radius: 25px
}

.product h3 {
	font-size: 15px;
	font-weight: 600;
	margin: 15px;
}

.product button {
	/* padding: 10px 20px; */
	padding: 3% 5%;
	border-radius: 10px;
	font-weight: 500;
	margin-bottom: 25px;
}

@media (max-width: 899px) {
	.product {
		flex-basis: 28%;
	}
}

@media (max-width: 799px) {
	.product {
		flex-basis: 45%;
	}
	.products-container {
		flex-wrap: wrap;
	}
}

@media (max-width: 449px) {
	.product {
		flex-basis: 80%;
	}
}

/* --------------- PARTNERS - SECTION --------------- */

.partners-bg {
	background-color: rgba(40, 40, 40, 0.2);
	z-index: 3;
	margin-top: 90px;
}

.partners {
	overflow: hidden;
	margin-top: 0;
	align-items: center;
}

.partners h2 {
	flex-basis: 25%;
}

@media (max-width: 1109px) {
	.partners h2 {
		flex-basis: 35%;
	}
}

@media (max-width: 949px) {
	.partners h2 {
		flex-basis: 40%;
	}
}

.partners-container {
	display: flex;
	align-items: center;
	overflow-x: hidden;
}

/* ----------------------------------------------------------------------------------------------------------- */

.partner {
	flex: 1 0 25%;
	text-align: center;
	transition: .5s ease;
}

.partner img {
	max-width: 150px;
}

@media (max-width: 999px) {
	.partner {
		flex: 1 0 33%;
	}
}

@media (max-width: 899px) {
	.partners-bg {
		background-color: transparent;
	}

	.partners-container {
		margin-top: 90px;
		background-color: rgba(40, 40, 40, 0.2);
		overflow-x: hidden;
	}

	.partners {
		width: 100%;
	}
}

@media (max-width: 449px) {
	.partner {
		flex: 1 0 50%;
	}
}

/* --------------- WHY US - SECTION --------------- */

.why-us {
	flex-direction: column;
}

.reasons-container {
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: var(--bg-grey);
	border-radius: 25px;
	padding: 50px 0;
	margin: 70px auto 0;
}

.reason {
	flex-basis: 25%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: white;
	padding: 0 10px;
}

.reason i {
	font-size: 65px;
	background-color: var(--primary-blue);
	border-radius: 50%;
	padding: 10px;
	margin: 25px 0;
}

.reason p{
	margin: 15px 0;
}

@media (max-width: 799px) {
	.reason {
		flex-basis: 40%;
	}
	.reasons-container {
		flex-wrap: wrap;
	}
}

@media (max-width: 449px) {
	.reason {
		flex-basis: 80%;
	}
}

@media (max-width: 899px) {
	.sec h2 {
		text-align: center;
	}
}