/* ======================================================================================================
 * Infrastructure - section
 * ====================================================================================================== */
.infrastructure {
	overflow            : hidden;
	display             : flex;
	flex-direction      : column;
	align-items         : center;
	width               : 100%;
	height              : 100%;
	min-height          : 900px;
	margin-top          : 220px;
	padding             : 0 20px;
	background-repeat   : no-repeat;
	background-position : 35% center;
	background-size     : cover;
}

.infrastructure__content {
	display         : flex;
	flex-direction  : row;
	justify-content : center;
	align-items     : flex-start;
	width           : 100%;
	max-width       : 1200px;
	gap             : 55px;
}

.infrastructure__content-title {
	display         : flex;
	flex            : 2;
	flex-direction  : column;
	justify-content : flex-start;
	align-items     : flex-start;
}

.infrastructure__content-title .section__button-container {
	position   : relative;
	z-index    : 100;
	margin-top : 0 !important;
	background-color: transparent !important;
}

.infrastructure__content-title .section__button-container {
	position   : relative;
	z-index    : 100;
	margin-top : 0 !important;
}

.infrastructure__content-title .section__button-container .section__button{
	background-color: transparent !important;
}

.infrastructure__content-title .section__button-container .section__button:hover{
	background-color: var(--primary-color-ponsot) !important;
}

.infrastructure__content > .section__button-container {
	position   : relative;
	z-index    : 100;
	display    : none;
	margin-top : 0 !important;
}


.infrastructure__content p {
	flex : 1;
}


/* =========== Hot points =========== */

.infrastructure__hot-points {
	position   : absolute;
	top        : 0;
	left       : 0;
	z-index    : 30;
	width      : 100%;
	height     : 100%;
	min-height : 900px;
}

.infrastructure__hot-points .hot-point {
	font-size       : 13px;
	color           : var(--primary-color-ponsot);
	text-align      : right;
	text-transform  : uppercase;
	position        : absolute;
	display         : flex;
	flex-direction  : row;
	justify-content : center;
	align-items     : center;
	height          : 50px;
	gap             : 30px;
}

.infrastructure__hot-points .hot-point span {
	opacity    : 0;
	transition : 0.3s;
}

.infrastructure__hot-points .hot-point:hover span {
	opacity : 1;
}

.infrastructure__hot-points .hot-point__circle {
	width              : 30px;
	height             : 30px;
	transition         : 0.3s;
	border             : 1px solid var(--primary-color-ponsot);
	border-radius      : 50px;
	background-color   : transparent;
	-webkit-box-shadow : 0px 0px 0px 10px rgba(185, 211, 0, 0.26);
	box-shadow         : 0px 0px 0px 10px rgba(185, 211, 0, 0.26);
}

.infrastructure__hot-points .hot-point:hover .hot-point__circle {
	width              : 40px;
	height             : 40px;
	-webkit-box-shadow : 0px 0px 0px 20px rgba(185, 211, 0, 0.26);
	box-shadow         : 0px 0px 0px 20px rgba(185, 211, 0, 0.26);
}

.infrastructure__hot-points .hot-point:nth-child(3) {
	flex-direction : row-reverse;
}

.infrastructure__hot-points .hot-point:nth-child(6) {
	flex-direction : row-reverse;
}

@media (max-width : 1024px) {
	.infrastructure__hot-points {
		display : none;
	}

	.infrastructure {
		position            : relative;
		flex-direction      : row;
		align-items         : stretch;
		width               : 100%;
		height              : 100%;
		min-height          : unset;
		margin-top          : 120px;
		background-position : 35% 10%;
		background-size     : auto 700px;
	}

	.infrastructure:before {
		position   : absolute;
		top        : 60%;
		left       : 0;
		width      : 100%;
		height     : 250px;
		content    : "";
		background : rgb(0, 0, 0);
		background : linear-gradient(
				0deg,
				rgba(0, 0, 0, 1) 0%,
				rgba(0, 0, 0, 0) 100%
		);
	}

	.infrastructure__content {
		text-align     : center;
		z-index        : 2;
		flex-direction : column;
		align-items    : center;
		padding-bottom : 70px;
	}

	.infrastructure__content .section__sub-title {
		font-size : 14px;
	}

	.infrastructure__content-title {
		align-items    : center;
		padding-bottom : 400px;
	}

	.infrastructure__content-title .section__button-container {
		display : none;
	}

	.infrastructure__content > .section__button-container {
		display : block;
	}
}

/* ======================================================================================================
 * End Infrastructure - section
 * ====================================================================================================== */