:root{
  --frx-blue:#0b2f6b;
  --frx-blue-dark:#081f49;
  --frx-red:#e30613;
  --frx-red-dark:#b8050f;
  --frx-light:#f4f7fb;
}
body{ font-family:'Poppins', sans-serif; color:#1c2b3a; background:#fff; }

.rea-hero{
  background:
    linear-gradient(100deg, #f1f4fb 0%, #e8eef8 50%, rgba(241,244,251,.65) 100%),
    url("../images/hero.png") right center / cover no-repeat;
  border-bottom:1px solid #e8eef5;
  padding:2.2rem 0 1.8rem;
}
.rea-breadcrumb{ font-size:.78rem; color:#8492a3; margin-bottom:.75rem; }
.rea-breadcrumb a{ color:var(--frx-blue); text-decoration:none; font-weight:600; }
.rea-hero h1{ font-weight:800; font-size:1.85rem; color:var(--frx-blue); margin:0 0 .4rem; }
.rea-hero h1 span{ color:var(--frx-red); }
.rea-hero p{ margin:0; color:#4c5a6e; font-size:.92rem; max-width:560px; }

.rea-page{ padding:2rem 0 3rem; background:#fafbfd; }
.rea-filters{
  display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem;
}
.rea-filters button{
  border:1px solid #d7dee7; background:#fff; color:#4c5a6e;
  font-size:.78rem; font-weight:700; letter-spacing:.3px;
  padding:.45rem .9rem; border-radius:999px; cursor:pointer;
  transition:all .15s ease;
}
.rea-filters button:hover,
.rea-filters button.active{
  background:var(--frx-blue); border-color:var(--frx-blue); color:#fff;
}

.rea-card{
  position:relative; border-radius:10px; overflow:hidden;
  background:#fff; border:1px solid #e8eef5; height:100%;
  transition:transform .18s ease, box-shadow .18s ease;
}
.rea-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(11,47,107,.14);
}
.rea-card .media{
  height:220px; overflow:hidden; position:relative; background:#e8eef5;
}
.rea-card .media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s ease;
}
.rea-card:hover .media img{ transform:scale(1.06); }
.rea-card .tag{
  position:absolute; top:.8rem; left:.8rem;
  background:rgba(11,47,107,.92); color:#fff;
  font-size:.65rem; font-weight:700; letter-spacing:.4px;
  padding:.3rem .55rem; border-radius:3px; text-transform:uppercase;
}
.rea-card .body{ padding:1rem 1.05rem 1.15rem; }
.rea-card .title{
  font-size:.92rem; font-weight:800; color:var(--frx-blue);
  margin:0 0 .35rem; line-height:1.3;
}
.rea-card .meta{
  font-size:.75rem; color:#8492a3; font-weight:600; margin:0 0 .55rem;
  display:flex; align-items:center; gap:.35rem;
}
.rea-card .meta i{ font-size:.9rem; color:var(--frx-red); }
.rea-card .desc{
  font-size:.8rem; color:#6b7a8d; line-height:1.5; margin:0;
}

.rea-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
  margin-bottom:1.75rem;
}
.rea-stat{
  background:#fff; border:1px solid #e8eef5; border-radius:8px;
  padding:1rem 1.1rem; text-align:center;
}
.rea-stat .num{
  font-size:1.5rem; font-weight:800; color:var(--frx-blue); line-height:1;
}
.rea-stat .lbl{
  font-size:.72rem; color:#8492a3; font-weight:600; margin-top:.35rem;
}

.rea-cta{
  margin-top:2rem; background:var(--frx-blue); border-radius:10px;
  padding:1.75rem; color:#fff;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.25rem;
}
.rea-cta h2{ font-size:1.25rem; font-weight:800; margin:0 0 .35rem; }
.rea-cta p{ margin:0; font-size:.88rem; color:rgba(255,255,255,.8); max-width:480px; }

@media (max-width:991.98px){
  .rea-stats{ grid-template-columns:repeat(2,1fr); }
}