.elementor-38614 .elementor-element.elementor-element-bac165f{--grid-row-gap:35px;--grid-column-gap:30px;--load-more-spinner-color:#FF7777;}.elementor-38614 .elementor-element.elementor-element-bac165f .elementor-post{padding:3px 3px 3px 3px;background-color:#F8F2D0;}.elementor-38614 .elementor-element.elementor-element-bac165f .elementor-post__text{padding:0px 0px 0px 0px;}.elementor-38614 .elementor-element.elementor-element-bac165f .elementor-post:hover{box-shadow:0px 0px 4px 0px rgba(0,0,0,0.5);background-color:#F2E9D6;}:root{--page-title-display:none;}/* Start custom CSS for posts, class: .elementor-element-bac165f *//* =========================================
   REACT / MERN PAGE - POSTS WIDGET CARD UI
   Wrapper class: ug-react-posts
   ✅ Alternating header + full card clickable
========================================= */

/* Background wrapper */
.ug-react-posts{
  background: linear-gradient(180deg,#f8fafc 0%, #eef2ff 100%) !important;
  padding: 18px !important;
  border-radius: 20px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 14px 40px rgba(0,0,0,0.08) !important;
}

/* Grid spacing */
.ug-react-posts .elementor-posts-container{
  gap: 16px !important;
}

/* Card base */
.ug-react-posts .elementor-post{
  position: relative;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 18px !important;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,0.08) !important;
  min-height: 145px;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  cursor: pointer;
}

.ug-react-posts .elementor-post:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(15,23,42,.14) !important;
  filter: brightness(1.01);
}

/* Remove theme beige background from title */
.ug-react-posts .elementor-post__title,
.ug-react-posts .elementor-post__title a,
.ug-react-posts .elementor-post__title h3{
  background: transparent !important;
}

/* Alternate headers:
   Odd = React blue
   Even = Dark slate */
.ug-react-posts .elementor-post:nth-child(odd)::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%;
  height:56px;
  background: linear-gradient(135deg,#2563eb,#38bdf8);
}
.ug-react-posts .elementor-post:nth-child(even)::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%;
  height:56px;
  background: linear-gradient(135deg,#0f172a,#334155);
}

/* React icon badge */
.ug-react-posts .elementor-post::after{
  content:"⚛️";
  position:absolute;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  color:#fff;
  font-size:14px;
}

/* FULL CARD CLICKABLE (title link covers whole card) */
.ug-react-posts .elementor-post__title a{
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;

  display: block !important;
  padding: 70px 14px 16px 14px !important;
  margin: 0 !important;

  color:#0f172a !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  text-decoration:none !important;
}

/* Clean wrapper spacing */
.ug-react-posts .elementor-post__text{
  padding: 0 !important;
}

/* Hide meta/excerpt/read-more (if visible) */
.ug-react-posts .elementor-post__meta-data,
.ug-react-posts .elementor-post__excerpt,
.ug-react-posts .elementor-post__read-more{
  display:none !important;
}/* End custom CSS */