/* Wrapper */
.rcl-list{
  display:flex;
  flex-direction:column;
  gap:16px; /* overridden by Elementor control */
}

/* Each row is a full clickable card */
.rcl-item{
  display:flex;
  align-items:center;
  width:100%;
  text-decoration:none !important;
  border:1px solid rgba(255,255,255,0.08);
  background-color:#1A2439;
  border-radius:14px;
  padding:18px 22px;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  backdrop-filter: blur(2px);
}

/* Slight “lift” on hover, like the screenshot highlight */
.rcl-item:hover{
  background-color:#2A3447;
  border-color: rgba(56,200,214,0.30);
  box-shadow: 0 16px 40px -28px rgba(0,0,0,0.7);
  transform: translateY(-1px);
}

/* Left icon tile */
.rcl-icon{
  width:48px;
  height:48px;
  border-radius:12px;
  background:#142336;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  margin-right:16px;
  color: var(--rcl-accent, #38C8D6);
}

/* Ensure SVG icons behave */
.rcl-icon svg{
  width:18px;
  height:18px;
}

/* Text block */
.rcl-text{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  flex: 1 1 auto;
}

.rcl-title{
  font-weight:600;
  font-size:16px;
  line-height:1.2;
  color:#fff;
}

.rcl-desc{
  font-weight:400;
  font-size:13px;
  line-height:1.3;
  color: rgba(255,255,255,0.60);
}

/* Right arrow */
.rcl-arrow{
  margin-left:16px;
  flex: 0 0 auto;
  font-size:18px;
  line-height:1;
  color: rgba(255,255,255,0.45);
  transition: color .18s ease, transform .18s ease;
}

.rcl-item:hover .rcl-arrow{
  color: var(--rcl-accent, #38C8D6);
  transform: translateX(2px);
}

/* Title accent on hover (like your second item) */
.rcl-item:hover .rcl-title{
  color: var(--rcl-accent, #38C8D6);
}