/* Off-plan carousel — isolated to #branded */
#branded #panels-list {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 18px !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 10px 0 20px;
}
#branded #panels-list::-webkit-scrollbar { display: none; }
#branded #panels-list > .panel {
  flex: 0 0 calc((100% - 36px)/3) !important;
  width: calc((100% - 36px)/3) !important;
  min-width: 0 !important;
  scroll-snap-align: start;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
#branded .offplan-nav {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 20px auto;
}
#branded .offplan-nav button {
  border: 1px solid #c88938;
  background: transparent;
  color: #fff;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  cursor: pointer;
}
@media(max-width:991px) {
  #branded #panels-list > .panel {
    flex-basis: calc((100% - 18px)/2) !important;
    width: calc((100% - 18px)/2) !important;
  }
}
@media(max-width:600px) {
  #branded #panels-list > .panel {
    flex-basis: 88% !important;
    width: 88% !important;
  }
}

/* EJAD — Off-plan carousel readability */
#branded #panels-list > .panel {
  overflow: hidden !important;
  isolation: isolate;
}

/* Dark gradient behind the text */
#branded #panels-list > .panel .fade {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, .88) 0%,
    rgba(0, 0, 0, .55) 35%,
    rgba(0, 0, 0, .12) 75%,
    transparent 100%
  ) !important;
  opacity: 1 !important;
  z-index: 1 !important;
  pointer-events: none;
}

/* Position content at bottom */
#branded #panels-list > .panel .content {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  z-index: 2 !important;
  padding: 28px 24px 30px !important;
  text-align: right !important;
  direction: rtl;
  transform: none !important;
}

/* Project title */
#branded #panels-list > .panel h3 {
  font-size: clamp(25px, 2.2vw, 38px) !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 12px 0 18px !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
  overflow-wrap: normal;
}

/* Project statistics */
#branded #panels-list > .panel .tag {
  display: inline-block !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: #ffffff !important;
  background: rgba(0,0,0,.65) !important;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 6px;
  padding: 5px 10px !important;
  text-shadow: none !important;
}

/* Project details link */
#branded #panels-list > .panel .link {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

@media (max-width: 600px) {
  #branded #panels-list > .panel .content {
    padding: 20px !important;
  }

  #branded #panels-list > .panel h3 {
    font-size: 28px !important;
  }

  #branded #panels-list > .panel .tag {
    font-size: 12px !important;
  }
}


/* EJAD — Off-plan cards: all four corners rounded */

#branded #panels-list .panel,
#branded .panel,
#panels-list > .panel {
    border-radius: 18px !important;
    overflow: hidden !important;
    clip-path: inset(0 round 18px) !important;
    -webkit-clip-path: inset(0 round 18px) !important;
}

#branded #panels-list .panel .bg,
#branded #panels-list .panel .fade {
    border-radius: 18px !important;
}


/* EJAD - Improve offplan project popup title readability */
#branded .modal .panel h3,
#branded .modal .panel .content h3,
#branded .project-modal h3 {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow: 0 3px 12px rgba(0,0,0,.95) !important;
}

#branded .modal .panel .content,
#branded .project-modal .content {
    background: linear-gradient(
        to top,
        rgba(0,0,0,.82),
        rgba(0,0,0,.35) 65%,
        transparent
    ) !important;
}