/* ===========================
   HERO LAYOUT (percent-based)
=========================== */
.rw-hero{
  position: relative;
  overflow: hidden;
  
  margin-top: -1%;  /* fix gap issue with header */
  background: linear-gradient(180deg,#F5FAFF 0%,#FFFFFF 100%);
}

/* Use viewport percentages instead of a fixed max-width */
.rw-hero__inner{
  width: 90vw;                 /* was max-width: 1480px */
  margin: 0 auto;
   gap: clamp(14px, 1.6vw, 28px);
  /* Replace your current padding with snug, responsive clamps */
  padding: clamp(4px, 1.4vw, 16px) 2vw clamp(10px, 1.8vw, 22px);
  /* padding: 0vw 2vw 3vw;        scale spacing with screen */
  display: grid;
  grid-template-columns: 56% 40%;  /* content/art split using % */
  /* gap: 2.2vw;                  proportional gap */
  align-items: center;
}

.rw-hero__left{ grid-column: 1; z-index: 2; }
.rw-hero__art { grid-column: 2; z-index: 1; display:flex; justify-content:flex-end; }

/* Keep 2 columns on desktop; stack only below 960px */
@media (max-width: 960px){
  .rw-hero__inner{
    width: 94vw;
    display: flex;
    flex-direction: column;   /* stack vertically */
    padding: 7vw 3vw 6vw;
  }
  .rw-hero__art{ justify-content:center; margin-top: 4vw; }
}

/* ===========================
   LEFT SIDE TYPOGRAPHY
=========================== */
.rw-hero__eyebrow{
  display:inline-flex; align-items:center; gap:0.6vw;
  font-weight:600; color:#1f2937; background:#E8F5FF;
  border-radius:999px; padding:0.6vw 1vw; margin-bottom:1.2vw;
}
.rw-hero__title{
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans";
  font-weight:700; font-size:clamp(32px,4.5vw,56px); line-height:1.1;
  color:#0A033C; margin:0 0 1vw;
}
.rw-hero__title .accent{ color:#1D9CFD; }
.rw-hero__sub{
  color:#0A033C; font-weight:500; font-size:clamp(16px,2vw,20px); line-height:1.7;
  max-width:56ch; margin:0 0 1.2vw;
}

/* Search rail: percentage columns, same look */
.rw-hero__search{
  margin-top: 2vw;
  display:grid; grid-template-columns: 28% 1fr 18%; gap: 0.9vw;
  background:rgba(227,244,255,.6); padding:0.8vw; border-radius:12px; align-items:center;
  width:100%;
}
@media (max-width: 720px){ .rw-hero__search{ grid-template-columns:1fr; gap:0.6vw; } }

.rw-pill{
  display:inline-flex; align-items:center; justify-content:center; gap:0.7vw;
  padding:0.9vw 1vw; border-radius:10px; border:1.5px solid #CDEAFF; background:#fff;
  color:#0A033C; font-weight:600; width:100%; cursor:pointer;
}
.rw-pill .arrow{ width:1.2vw; height:1.2vw; min-width:16px; min-height:16px; }
.rw-input{
  width:100%; height:48px; border-radius:10px; border:1.5px solid #CDEAFF;
  background:#fff; padding:0 14px; font-size:16px; color:#3b3b3b;
}
.rw-searchbtn{
  width:100%; height:48px; border:0; border-radius:10px; background:#2DADFF; color:#fff; font-weight:700; cursor:pointer;
}

/* ===========================
   RIGHT SIDE (GIRL + BADGES)
=========================== */
.rw-hero__art-inner{
  position:relative;
  width: 40vw;                 /* scale with viewport */
  max-width: 46vw;             /* soft cap (still in %) */
  min-width: 32vw;             /* so it doesn’t shrink too much on mid screens */
  aspect-ratio: 612 / 825;     /* keep image ratio */
}

/* Girl image fills the art box */
.rw-hero__img{
  position:absolute; inset:0; width:76%; height:95%; object-fit:contain;
  filter: drop-shadow(0 25px 70px rgba(10,3,60,.15));
}

/* Badges */
.rw-badge{
  position:absolute;
  width: 10vw; height: 6vw;           /* % sizing */
  /* background: #F5FAFF; border-radius:4px; */
 
  padding:0.4vw;                      /* thin border space only */
  display:grid; place-items:center;
  transition: transform .25s ease;
  overflow:hidden;
}

/* ✅ Make the icon fill the container (leave only the border showing) */
/* ---- Force badge icons to fill their tiles ---- */
.rw-badge > img,
.rw-badge > svg{
  width: 110% !important;
  height: 110% !important;
  display: block;
  object-fit: contain;   /* keep icon proportions */
}


/* Figma-like placement (percentages are relative to .rw-hero__art-inner) */
.rw-badge--book{         top: 15%; left: -9%; }   /* upper-left */
.rw-badge--person{       top: 50%; left:  -7%; }   /* mid-left */
.rw-badge--presentation{ top: 22%; right: 25%; }   /* upper-right */
.rw-badge--blocks{       bottom: 15%; right: 10%; }/* lower-right */

/* Keep nice proportions across widths */
@media (min-width: 961px){
  .rw-badge{ width: 7.4vw; height: 6.2vw; }
}
@media (max-width: 960px){
  .rw-badge{ width: 12vw; height: 10.4vw; }
  .rw-badge--book{ top: 4%; left: -7%; }
  .rw-badge--person{ top: 60%; left: 0%; }
  .rw-badge--presentation{ top: 10%; right: 10%; }
  .rw-badge--blocks{ bottom: -4%; right: 8%; }
}
@media (max-width: 560px){
  .rw-hero__art-inner{ width: 78vw; min-width: 72vw; }
  .rw-hero__art{ width: 60%;height: 85%; }
  .rw-badge{ width: 18vw; height: 15.3vw; padding:0.8vw; }
}