/* =========================================
   SERVICES PAGE — Unique styles
   ========================================= */

main {
	margin: 20px;
	height: auto;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
}

.div1 {
	border: 1px solid #b8997a;
	border-radius: 2%;
	flex: 1;
	min-height: 550px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.div1 p {
	font-size: 30px;
	margin: 20px;
}

/* ── Gallery Grid ── */
.gallery-container {
	max-width: 1200px;
	margin: auto;
	padding: 20px;
}

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 15px;
}

.gallery img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	cursor: pointer;
	transition: transform 0.3s ease;
	border-radius: 8px;
}

.gallery img:hover {
	transform: scale(1.05);
}

/* ── Lightbox ── */
.lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.9);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 999;
}

.lightbox-img {
	max-width: 90%;
	max-height: 90%;
}

.close,
.prev,
.next {
	position: absolute;
	color: white;
	font-size: 35px;
	cursor: pointer;
	user-select: none;
}

.close { top: 20px; right: 30px; }
.prev  { left: 30px; }
.next  { right: 30px; }

/* ── Section layouts (main2–main6, div2–div6) ── */
.main2, .main3, .main4, .main5, .main6 {
	margin: 20px;
	height: auto;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
}

.div2, .div3, .div4, .div5, .div6 {
	border: 1px solid #b8997a;
	border-radius: 2%;
	flex: 1;
	min-height: 550px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.div2 p, .div3 p, .div4 p, .div5 p, .div6 p {
	font-size: 30px;
	margin: 20px;
}

/* ── Mobile ── */
@media (max-width: 420px) {
	.prev, .next { font-size: 28px; }

	footer {
		flex-direction: column;
		justify-content: unset;
		align-items: unset;
	}

	footer li { padding: 0; justify-content: unset; }
	footer ul { padding: 10px 24px !important; }

	.div1, .div2, .div3, .div4, .div5, .div6 {
		border-radius: 8px;
		text-align: center;
	}
}