.services-container {
	height: 100vh;
	width: 100%;

	padding: 100px 10px 30px 10px;

	display: grid;
	gap: 30px;

	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
}

.service-container {
	width: 100%;
	height: 100%;

	position: relative;
}

.service-container h3 {
	position: absolute;
	z-index: 4;

	text-align: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	cursor: pointer;
}

.image-container .img-cover {
	height: 100%;
	width: 100%;

	background-color: rgba(18, 18, 18, 0.4);
	border-radius: 10px;

	position: absolute;
	z-index: 3;

	cursor: pointer;
}

.image-container .img-cover:hover {
	background-color: rgba(18, 18, 18, 0.6);
}

.image-container .card-img {
	height: 100%;
	width: 100%;

	object-fit: cover;

	border-radius: 10px;

	position: absolute;
	z-index: 2;
}

.services-container .popup {
	width: 100%;
	height: 100vh;

	background: rgba(0, 0, 0, 0.4);

	display: none;

	position: fixed;

	z-index: 200;

	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	text-align: center;
}

.popup .close-background {
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,0);

	position: fixed;
	z-index: 199;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	text-align: center;
}

.popup .popup-content {
	width: 80%;
	overflow: auto;

	padding: 50px;

	background-color: #282828;
	border-radius: 10px;

	position: relative;

	z-index: 201;

	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	box-sizing: border-box;

}

.popup-content .close {
	position: absolute;

	z-index: 202;

	right: 20px;
	top: 20px;

	width: 20px;
	display: block;


	span {
		cursor: pointer;
		position: fixed;

		z-index: 10;

		width: 20px;
		height: 3px;

		background: white;

		&:nth-child(1) {
			transform: rotate(45deg);
		}

		&:nth-child(2) {
			transform: rotate(135deg);
		}
	}
}

.popup-content ul {
	list-style-type: none;
	list-style-position: inside;

	margin: auto 0;
}

.popup-content ul li {
	text-align: center;
}

.popup-content p {
	margin: 10px 0;
	font-size: 25px;
	text-align: center;
}

.popup-content a {
	text-decoration: none;
}

.popup-content a:hover {
	opacity: 50%;
}

.popup-content a p {
	color: #03a9f4;
}

.services-container .particle-container {
	width: 100%;
	height: 100%;
	
	position: absolute;
	z-index: -1;

	top: 0;
	left: 0;
}

@media screen and (max-width: 600px) {
	.services-container {
		gap: 10px;

		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(5, 1fr);
	}

	.services-container #last-service {
		grid-column-start: span 2;
	}
}

@media screen and (max-width: 1300px) {
	.services-container .particle-container {
		display: none;
	}
}