/* ============================================================
   KEY PROJECTS COMPONENT STYLES
   ============================================================ */

#homeportfolio {
	padding: 0;
	margin: 0;
	background: #0b1319;
	overflow: hidden;
	width: 100%;
}

.rs-key-projects-container {
	position: relative;
	width: 100%;
}

.rs-key-projects-slide {
	height: 580px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rs-key-projects-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.2) 0%,
		rgba(0, 0, 0, 0.45) 100%
	);
	z-index: 1;
}

.rs-key-projects-content-wrap {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.rs-key-projects-btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	background: rgba(11, 19, 25, 0.88);
	border: 1.5px solid rgba(255, 255, 255, 0.2);
	border-radius: 50px;
	padding: 16px 32px;
	color: #ffffff !important;
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 0.5px;
	text-decoration: none;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	transform: translateZ(0);
	will-change: transform;
}

.rs-key-projects-btn:hover {
	border-color: rgba(255, 255, 255, 0.4);
	box-shadow: 0 15px 40px rgba(30, 96, 145, 0.45);
}

.rs-key-projects-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background-color: #ffffff;
	color: #0b1319;
	border-radius: 50%;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	font-size: 15px;
}

.rs-key-projects-btn:hover .rs-key-projects-btn-icon {
	transform: translateX(5px);
	background-color: #ffffff;
	color: #1e6091;
}

.rs-key-projects-caption {
	position: absolute;
	bottom: 40px;
	left: 45px;
	color: #ffffff;
	font-size: 17px;
	font-weight: 400;
	letter-spacing: 0.5px;
	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.75);
	z-index: 3;
}

.rs-key-projects-pagination.swiper-pagination {
	bottom: 40px !important;
	right: 45px !important;
	left: auto !important;
	width: auto !important;
	transform: none !important;
	display: flex !important;
	align-items: center;
	gap: 8px;
	z-index: 10;
}

.rs-key-projects-pagination .swiper-pagination-bullet {
	width: 6px;
	height: 6px;
	background-color: #ffb703 !important;
	opacity: 0.55;
	margin: 0 !important;
	border-radius: 50%;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.rs-key-projects-pagination .swiper-pagination-bullet-active {
	width: 32px;
	height: 6px;
	background-color: #ffb703 !important;
	opacity: 1;
	border-radius: 3px;
}

@media (max-width: 991px) {
	.rs-key-projects-slide {
		height: 480px;
	}
	.rs-key-projects-btn {
		font-size: 18px;
		padding: 12px 24px;
		gap: 16px;
	}
	.rs-key-projects-btn-icon {
		width: 30px;
		height: 30px;
		font-size: 13px;
	}
	.rs-key-projects-caption {
		bottom: 25px;
		left: 25px;
		font-size: 15px;
	}
	.rs-key-projects-pagination.swiper-pagination {
		bottom: 25px !important;
		right: 25px !important;
	}
}

@media (max-width: 575px) {
	.rs-key-projects-slide {
		height: 340px;
		background-size: cover;
		background-position: center;
	}
	.rs-key-projects-btn {
		font-size: 14px;
		padding: 10px 18px;
		gap: 10px;
		margin-bottom: 30px;
	}
	.rs-key-projects-btn-icon {
		width: 26px;
		height: 26px;
		font-size: 11px;
	}
	.rs-key-projects-caption {
		bottom: 16px;
		left: 16px;
		right: 95px;
		font-size: 13px;
		max-width: calc(100% - 115px);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin: 0;
	}
	.rs-key-projects-pagination.swiper-pagination {
		bottom: 18px !important;
		right: 16px !important;
	}
}

@media (max-width: 768px) {
	.float-text,
	.scrollbar-v {
		display: none !important;
	}
}