/* Temporary for development stage, recommend to copy these CSS code to frontend.css when production */
section[data-module="related-project-carousel"] {}
/* Background + spacing */
section[data-module="related-project-carousel"] {
    padding: 0px 0;
}

/* Heading */
section[data-module="related-project-carousel"] #sec-<?= $id; ?> h1 {
	font-size: 32px;
	font-weight: bold;
	margin-bottom: 35px;
}

/* Slide wrapper */
section[data-module="related-project-carousel"] .rpc-slide {
	display: flex;
    justify-content: center;
    height: 370px;
  padding: 20px 0px;
}

/* Card container */
section[data-module="related-project-carousel"] .rpc-item {
	display: flex;
    flex-direction: column;
	width: 100%;
	background: #fff;
	border-bottom-left-radius: 60px;
	border-top-right-radius: 60px;
	overflow: hidden;
	text-decoration: none;
	color: #000;
	box-shadow: 0 4px 20px rgba(0,0,0,0.1);
	transition: transform .3s ease;
}

section[data-module="related-project-carousel"] .rpc-item:hover {
	transform: translateY(-6px);
}

/* Image */
section[data-module="related-project-carousel"] .rpc-image img {
	width: 100%;
	height: 240px;
	object-fit: cover;
}

/* Title box */
section[data-module="related-project-carousel"] .rpc-info {
	padding: 18px 30px;
	background: #fff;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	flex-grow: 1;
    display: flex;
    align-items: flex-start;
	
}

section[data-module="related-project-carousel"] .rpc-info h3 {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
	color: #000;
}

/* ========== ARROWS ========== */

/* Both arrows default position */
section[data-module="related-project-carousel"] .rpc-prev,
section[data-module="related-project-carousel"] .rpc-next {
	position: absolute;
	top: 40%;
	z-index: 20;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	font-size: 22px;
	font-weight: bold;
	transition: 0.3s ease;
}

/* Default next arrow as image */
section[data-module="related-project-carousel"] .rpc-prev {
    top: 280px;
	left: 120px;
    width: 50px;
    height: 50px;
    background-image: url("https://knm.stagings.entertopwp.com/wp-content/uploads/2025/09/arrow-red-round-left-1.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;               /* remove old border */
    color: transparent;         /* hide default arrow symbol */
    transition: background-image .3s ease-in-out;
}

/* Hover change image smoothly */
section[data-module="related-project-carousel"] .rpc-prev:hover {
    background-image: url("https://knm.stagings.entertopwp.com/wp-content/uploads/2025/09/arrow-red-round-left-2.png");
}

/* Default next arrow as image */
section[data-module="related-project-carousel"] .rpc-next {
    top: 280px;
	right: 120px;
    width: 50px;
    height: 50px;
    background-image: url("https://knm.stagings.entertopwp.com/wp-content/uploads/2025/09/arrow-red-round-right-1.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;               /* remove old border */
    color: transparent;         /* hide default arrow symbol */
    transition: background-image .3s ease-in-out;
}

/* Hover change image smoothly */
section[data-module="related-project-carousel"] .rpc-next:hover {
    background-image: url("https://knm.stagings.entertopwp.com/wp-content/uploads/2025/09/arrow-red-round-right-2.png");
}

section[data-module="related-project-carousel"] .swiper.rpc-swiper.swiper-container-horizontal {
  overflow: hidden;
}

/* Typical laptop screen size*/
@media (max-width: 1400px) {
	section[data-module="related-project-carousel"] .rpc-prev {
  left: 50px;
	}
	section[data-module="related-project-carousel"] .rpc-next {
  right: 50px;
	}
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 980px) {
	
}

/* Mobile screen size - landscape view */
@media (max-width: 810px) {
section[data-module="related-project-carousel"] .rpc-image img {
  height: 202px;
}
}

/* Mobile screen size */
@media (max-width: 480px) {
        section[data-module="related-project-carousel"] .rpc-next {
    right: 5px;
  }
	  section[data-module="related-project-carousel"] .rpc-prev {
    left: 5px;
  }
}