.related-projects-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 20px; /* overridden by Elementor if set */
}

.related-projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* overridden inline from PHP and by Elementor controls */
    gap: 20px; /* overridden by Elementor if set */
}

.related-project-item {
    background: #1B1B1B; /* overridden by Elementor */
    border-radius: 18px; /* overridden by Elementor */
    text-align: center;
    overflow: hidden;
}

.related-project-item a {
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.related-project-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.related-project-item h3 {
    font-size: 18px;
    text-align: left;
    margin: 0;
    padding: 32px 32px 0 32px; /* overridden by Elementor margin if set */
}

.related-project-item p {
    text-align: right;
    padding: 50px 30px 30px 30px; /* overridden by Elementor padding if set */
}

@media (max-width: 1024px) {
    .related-projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .related-projects-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* Header */
.related-projects-header {
  display: flex; justify-content: flex-end; align-items: center; margin-bottom: 20px;
}

/* Grid fallback (unchanged behavior) */
.related-projects-grid { display: grid; gap: 20px; }
.related-project-item { background:#1B1B1B; border-radius:18px; text-align:center; overflow:hidden; }
.related-project-item a { display:block; position:relative; width:100%; overflow:hidden; }
.related-project-item img { width:100%; height:auto; object-fit:cover; display:block; }
.related-project-item h3 { font-size:18px; text-align:left; margin:0; padding:32px 32px 0 32px; }
.related-project-item p { text-align:right; padding:50px 30px 30px; }

/* Slider */
.rpw-swiper{
  --rpw-nav-size: 56px;            /* desktop size */
  --rpw-nav-offset: 24px;
  --rpw-nav-bg: rgba(20,20,20,.85);
  --rpw-nav-bg-hover: rgba(20,20,20,.95);
  --rpw-nav-ring: rgba(255,255,255,.08);
  --rpw-arrow: rgba(255,255,255,.95);
  --rpw-arrow-thickness: 2px;
}
.rpw-swiper .swiper-slide { height: auto; }
.rpw-slide-card { position: relative; display:block; width:100%; height:100%; border-radius:18px; overflow:hidden; }
.rpw-media { 
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* square */
    overflow: hidden;
  }
.rpw-media img { 
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    display: block;
  }

@supports not (aspect-ratio: 1 / 1){
  .rpw-media{ position: relative; }
  .rpw-media::before{
    content: "";
    display: block;
    padding-top: 100%; /* square via padding hack */
  }
  .rpw-media img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
  }
}

.rpw-gradient {
  position:absolute; left:0; right:0; bottom:0; height:35%;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}
.rpw-caption {
  position:absolute; left:50%; bottom:50px; transform:translateX(-50%); width:100%;
  color:#fff; font-weight:500; text-align:center; padding:0 24px;
  z-index:2; line-height:1.2;
}

.rpw-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--rpw-nav-size) !important;
  height: var(--rpw-nav-size) !important;
  border-radius: 50%;
  background: var(--rpw-nav-bg); 
  box-shadow:
    0 6px 16px rgba(0,0,0,.28),
    inset 0 0 0 1px var(--rpw-nav-ring);
  backdrop-filter: saturate(120%) blur(2px);
  z-index: 3;
}

.rpw-nav::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(120% 100% at 30% 25%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 55%);
  pointer-events: none;
}

.rpw-nav::after{
  content: "" !important; 
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  border-left: var(--rpw-arrow-thickness) solid var(--rpw-arrow);
  border-bottom: var(--rpw-arrow-thickness) solid var(--rpw-arrow);
  box-shadow: none;
}
.rpw-nav.swiper-button-prev{ left: var(--rpw-nav-offset); right: auto; }
.rpw-nav.swiper-button-next{ right: var(--rpw-nav-offset); left: auto; }

.rpw-nav.swiper-button-prev::after{ transform: rotate(45deg); }
.rpw-nav.swiper-button-next::after{ transform: rotate(-135deg); }

/* hover/active */
.rpw-nav:hover{
  background: var(--rpw-nav-bg-hover);
  box-shadow:
    0 8px 20px rgba(0,0,0,.32),
    inset 0 0 0 1px var(--rpw-nav-ring);
}
.rpw-swiper .swiper-button-disabled{
  opacity: .35; cursor: default;
}

/* mobile tune */
@media (max-width: 767px){
  .rpw-swiper{
    --rpw-nav-size: 44px;
    --rpw-nav-offset: 12px;
  }
}

.rpw-slide-card{ position:relative; }

.rpw-gradient{ z-index:1; }
.rpw-caption{ z-index:3; position:absolute; }

.rpw-slide-card::before{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:100%;                
  background-color:rgba(0, 0, 0, 0.3) !important;
  opacity:0;
  transition: opacity .25s ease;
  z-index:2;                  
  pointer-events:none;
}


@media (hover:hover){
  .rpw-slide-card:hover::before{ opacity:1; }
}
.rpw-slide-card:focus-visible::before{ opacity:1; }

.rpw-slide-card .rpw-media img{
  transition: filter .25s ease, transform .25s ease;
}
@media (hover:hover){
  .rpw-slide-card:hover .rpw-media img{
    filter: brightness(1.06);
    transform: scale(1.01);
  }
}