/* #region about */

.about-section {
	position: relative;
	overflow: hidden;
	background-repeat: no-repeat;
	background-image: var(--bg-img), var(--bg-img-alt);
	background-position: bottom left, bottom right;
}

.about-section .header-title {
	font-size: 2rem;
}

.about-section-row {
	display: flex;
	align-items: center;
	gap: 1rem 3rem;
}

.about-section-img {
	flex: 1 1 60%;
}

.about-section-img::before {
	padding-top: 60%;
}

.home-about-content {
	flex: 1 1 40%;
	position: relative;
}

.home-about-content::before {
	/* content: ""; */
	position: absolute;
	top: -2rem;
	bottom: -2rem;
	left: -8rem;
	right: -10rem;
	background-color: #eaeaea;
	z-index: -1;
}

.about-info-row {
	display: flex;
	align-items: center;
	margin-top: 2rem;
	max-width: 52rem;
	background-color: #eaeaea;
	border-radius: 2rem;
}

.about-info-img {
	width: 14rem;
	height: 14rem;
	flex-shrink: 0;
	border-radius: 2rem;
	overflow: hidden;
}

.about-info-content {
	padding: 1rem 1.5rem;
	border-radius: 10rem;
	display: inline-block;
	vertical-align: middle;
}

.about-info-title {
	font-size: 1.2rem;
	font-weight: 500;
}

.about-info-text {
	font-size: 0.9rem;
	line-height: 1.3;
	margin-top: 0.4rem;
}

.about-ceo-row {
	display: flex;
	gap: 2rem 3rem;
}

.about-ceo-img {
	flex: 1 1 40%;
}

.about-ceo-img img {
	width: 100%;
}

.about-ceo-content {
	flex: 1 1 60%;
}

.about-ceo-content .section-title-sm {
	margin-top: 0;
}

.about-phl {
	background-color: var(--theme-primary);
	color: var(--theme-primary-alt);
}

.about-phl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
	gap: 2.5rem;
	margin-top: 2rem;
}

.about-phl-title-lg {
	font-size: 1.6rem;
	font-weight: 500;
	text-align: center;
}

.about-phl-col {
	border: 1px solid currentColor;
	padding: 1.5rem;
	padding-top: 2.5rem;
	position: relative;
}

.about-phl-icon {
	position: absolute;
	top: 0;
	left: 1.5rem;
	font-size: 3rem;
	transform: translateY(-50%);
	background-color: var(--theme-primary);
	line-height: 1;
	padding: 0.5rem;
}

.about-phl-title {
	font-size: 1.3rem;
	font-weight: 500;
	margin-bottom: 0.5rem;
}

.about-phl-text {
	line-height: 1.5;
}

.about-safety {
	background-repeat: no-repeat;
	background-image: var(--bg-img), var(--bg-img-alt);
	background-position: center left, center right;
	background-size: 40vw;
	text-align: center;
}

.about-safety-container {
	position: relative;
}

.about-safety-container + .about-safety-container {
	margin-top: 5rem;
}

.about-safety-container .scale-img::before {
	padding-top: 45%;
}

.about-safety-content {
	position: relative;
	margin-top: -10rem;
	z-index: 1;
	background-color: #fff;
	padding: 1.5rem 1rem 1rem;
	box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
}

.about-safety-title {
	font-size: 1.8rem;
	color: var(--theme-primary);
	font-weight: 500;
	margin-bottom: 1rem;
}

.about-safety-grid {
	display: flex;
	gap: 0.8rem;
	margin-top: 1.5rem;
}

.about-safety-col {
	flex: 1 1 100%;
	padding: 1rem 0.5rem;
	border: 1px solid #dadada;
	/* display: flex; */
	/* flex-direction: column; */
	text-align: left;
}

.about-safety-subtitle {
	font-size: 1rem;
	font-weight: 500;
	margin-bottom: 0.5rem;
	min-height: 2.5em;
}

.about-safety-text {
	font-size: 0.9rem;
	line-height: 1.5;
}

@media (min-width: 768px) {
	.about-info-row:nth-child(odd) {
		margin-right: auto;
		flex-direction: row-reverse;
	}

	.about-info-row:nth-child(even) {
		margin-left: auto;
		flex-direction: row;
	}
}

@media (max-width: 768px) {
	.about-section-row {
		flex-wrap: wrap;
	}

	.about-info-row {
		flex-wrap: wrap;
	}

	.about-info-img {
		width: 100%;
	}

	.about-ceo-row {
		flex-wrap: wrap;
	}

	.about-safety-grid {
		flex-wrap: wrap;
	}

	.about-safety-content {
		margin-top: 0;
	}

	.about-safety-container > .scale-img::before {
		padding-top: 60%;
	}

	.about-safety-container + .about-safety-container {
		margin-top: 3rem;
	}
}

/* #endregion about */

/* #region prodducts */

.product-rows {
	position: relative;
}

.products-row {
	display: flex;
	align-items: center;
	gap: 1.5rem 2.5rem;
	max-width: 52rem;
}

.products-row + .products-row {
	margin-top: 2.5rem;
}

.product-row-img {
	width: 15rem;
	flex-shrink: 0;
	background-color: #fff;
	box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
	position: relative;
}

.product-row-img::after {
	content: "";
	border: 4rem solid transparent;
	border-top-color: var(--theme-primary);
	display: block;
	position: absolute;
	top: -0.75rem;
	z-index: -1;
}

.products-row:nth-child(odd) .product-row-img::after {
	border-left-color: var(--theme-primary);
	left: -0.75rem;
}

.products-row:nth-child(even) .product-row-img::after {
	border-right-color: var(--theme-primary);
	right: -0.75rem;
}

.product-row-img img {
	/* padding: 1rem; */
}

.product-row-title {
	font-size: 1.3rem;
	font-weight: 500;
	border-bottom: 2px solid var(--theme-primary);
	margin-bottom: 0.5rem;
	padding-bottom: 0.5rem;
}

.product-row-desc {
	line-height: 1.5;
}

@media (min-width: 768px) {
	.products-row:nth-child(odd) {
		flex-direction: row;
		text-align: left;
		margin-left: auto;
	}

	.products-row:nth-child(even) {
		flex-direction: row-reverse;
		/* text-align: right; */
		margin-right: auto;
	}
}

@media (max-width: 768px) {
	.product-rows {
		text-align: center;
	}

	.products-row {
		flex-wrap: wrap;
	}

	.products-row + .products-row {
		margin-top: 4rem;
	}

	.product-row-img {
		margin-inline: auto;
	}

	.product-row-content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}

/* #endregion prodducts */

/* #region infrastructure */

.infrastructure-page {
	background-color: #f9f9f9;
}

.infra-section {
	background-size: cover;
	background-position: bottom center;
}

.infrastructure-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}

.infrastructure-item {
	position: relative;
	box-shadow: 0 0 0.5rem rgb(0 0 0 / 10%);
	text-align: center;
	background-color: #fff;
}

.infrastructure-img::before {
	padding-top: 65%;
}

.infrastructure-item-content {
	padding: 1rem;
}

.infrastructure-item-title {
	font-size: 1.3rem;
	font-weight: 500;
	margin-bottom: 0.5rem;
}

.infrastructure-item-text {
	line-height: 1.3;
}

@media (max-width: 768px) {
	.infrastructure-grid {
		grid-template-columns: 1fr;
	}
}

/* #endregion infrastructure */