.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.33);
}

.home-hero {
	position: relative;
	display: flex;
	min-height: 75dvh;
	overflow: hidden;
	color: var(--color-white);

	@media (width >= 1200px) {
		min-height: 80dvh;
	}

	.container {
		position: relative;
		max-width: var(--container-max-width);
		padding-top: 8rem;
		padding-bottom: 6rem;
		z-index: 1;
	}

	.swiper {
		position: absolute;
		top: 0;
		left: 50%;
		translate: -50% 0;
		width: 100%;
		height: 100%;
		.swiper-slide img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	.swiper-pagination {
		width: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.25rem;
		background-color: #00000033;
		border-radius: 50em;
		padding: 0.5rem;
		left: 50%;
		translate: -50% 0;

		.swiper-pagination-bullet {
			--bullet-size: 0.75rem;
			width: var(--bullet-size);
			height: var(--bullet-size);
			margin-inline: calc(var(--bullet-size) / 8);
			background-color: #fff;
			transition: all 0.2s;
			&:hover {
				opacity: 1;
				background-color: var(--color-white);
			}
			&.swiper-pagination-bullet-active {
				background-color: var(--color-white);
			}
		}
	}
}

.new-releases {
	.new-release {
		position: relative;
		padding: 3rem 2rem;
		color: var(--color-white);
		overflow: hidden;

		.overlay {
			--overlay-opacity: 0.43;
			/*border-image: linear-gradient(to right, rgb(from var(--color-black) r g b / var(--overlay-opacity)), rgb(from var(--color-black) r g b / var(--overlay-opacity))) fill 1;*/
		}

		.content {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: start;
			justify-content: start;
			gap: 32px;

			.title {
				font-weight: 300;
				color: var(--color-white);
			}
			.description {
				font-size: var(--text-base);
			}
		}
	}
}

.our-developments {
	padding: 3rem 0;
	.development {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: start;
		justify-content: end;
		padding: 2rem;
		min-height: 525px;
		border-radius: 1.5rem;
		overflow: hidden;
		transition: all 0.3s;

		@media (width >= 1200px) {
			padding: 2rem 3rem;
		}

		.overlay {
			--overlay-opacity: 1;
			display: inline-flex;
			margin-top: auto;
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(
				to top,
				rgb(from var(--color-black-1) r g b / var(--overlay-opacity)) 0%,
				transparent 100%
			);
			transition: all 0.3s;
		}

		.content {
			position: relative;
			.badges {
				margin-bottom: 1rem;
				.badge {
					font-size: var(--text-sm);
					font-weight: 400;
					padding: 0.5rem 0.7rem;
					border-radius: 50em;

					&.text-bg-light {
						font-size: var(--text-xs);
						font-weight: 600;
						letter-spacing: 0.02em;
					}
				}
			}
			.title {
				font-family: var(--font-heading);
				font-weight: 400;
				color: var(--color-white);

				@media (width >= 1200px) {
					font-size: var(--text-4xl);
				}
			}
		}
		.overlay-link {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			color: var(--color-white);
			text-decoration: none;
		}

		&:hover {
			box-shadow: inset 0 0 1rem var(--color-black-1);

			.overlay {
				height: 200%;
			}
		}
	}
}

.comprehensive-management {
	display: none;

	padding: 3rem 0 6rem;
	.iconbox {
		text-align: center;
		.icon {
			width: 3.5rem;
			height: 3.5rem;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			color: var(--color-white);
			background-color: var(--color-black);
			border-radius: 50em;
			margin-bottom: 0.75em;
		}
		.title {
			margin-bottom: 0.5em;
			@media (width >= 768px) {
				font-size: var(--text-3xl);
			}
		}
		.description {
			font-size: var(--text-base);
		}
	}
}

.project-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: end;
	padding: 2rem;
	min-height: 32rem;
	overflow: hidden;
	transition: all 0.3s;

	@media (width >= 1200px) {
		padding: 2rem 3rem;
	}

	.project-overlay {
		--overlay-opacity: 1;
		display: inline-flex;
		margin-top: auto;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(
			to top,
			rgb(from var(--color-black-1) r g b / var(--overlay-opacity)) 0%,
			transparent 100%
		);
		transition: all 0.3s;
	}

	.project-content {
		position: relative;
		.project-badges {
			margin-bottom: 1rem;
			.project-badge {
				font-size: var(--text-sm);
				font-weight: 400;
				padding: 0.5rem 0.7rem;
				border-radius: 50em;
        color: var(--color-white);
        
				&.text-bg-light {
          font-size: var(--text-xs);
					font-weight: 600;
					letter-spacing: 0.02em;
          color: var(--color-black-1);
				}
			}
		}
		.project-title {
			font-family: var(--font-heading);
			font-weight: 400;
			color: var(--color-white);
		}
	}
	.project-overlay-link {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		color: var(--color-white);
		text-decoration: none;
	}

	&:hover {
		box-shadow: inset 0 0 1rem var(--color-black-1);

		.overlay {
			height: 200%;
		}
	}
}