/* =========================================================================
   Vahan — Rider Hub
   Figma: JmFGyR5BxquecSttAjGEsh  ·  node 2115:7205  ·  1920 × 3900

   Loads on top of styles.css: nav, buttons, hero heading and footer are the
   shared site pieces; everything below re-positions them at their rider-hub
   coordinates or adds the sections unique to this page.
   ========================================================================= */

.page{ height:3900px; }

/* ===================== background art ===================== */
/* "vahan wave 1" — masked to 0 → 533 on this page */
.header-bg{
  left:0; top:0;
  width:1920px; height:533px;
}

/* Rectangle 4447 — band behind the "Alert Me" section */
.rh-band{
  position:absolute;
  left:0; top:2706px;
  width:1920px; height:594px;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 1920 594' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23g)' opacity='0.4'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0 -146.53 171.11 0 960 1028.6)'><stop stop-color='rgb(255,164,97)' offset='0'/><stop stop-color='rgb(255,187,136)' offset='0.25'/><stop stop-color='rgb(255,210,176)' offset='0.5'/><stop stop-color='rgb(255,232,215)' offset='0.75'/><stop stop-color='rgb(255,255,255)' offset='1'/></radialGradient></defs></svg>");
  background-size:100% 100%;
}

/* the nav language picker now lives in styles.css — shared with job-seekers */

/* ===================== HERO ===================== */
.hero-title{
  left:349px; top:220px;
  width:1223px; height:99px;
  /* Figma sets these headings to Title Case rather than editing the copy */
  text-transform:capitalize;
}

.rh-sub{
  position:absolute;
  left:495px; top:353px;
  width:930px; height:36px;
  font-size:24px;
  line-height:1.5;
  letter-spacing:-.456px;
  text-align:center;
  color:#000;
}

/* ===================== FEATURED VIDEO ===================== */
.rh-feature{
  position:absolute;
  left:240px; top:498px;
  width:1440px; height:399px;
  padding:32px;
  border-radius:16px;
  background:var(--peach);
  display:flex; align-items:center; gap:51px;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
}
.rh-feature:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(249,118,25,.18), 0 4px 14px rgba(0,0,0,.05);
}
.rh-feature-thumb{
  width:751px; height:335px;
  flex:none;
  border-radius:14.194px;
  overflow:hidden;
  background:#fff;
}
.rh-feature-thumb img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.rh-feature:hover .rh-feature-thumb img{ transform:scale(1.04); }

.rh-feature-text{
  width:574px; height:335px;
  flex:none;
  display:flex; flex-direction:column; justify-content:space-between;
}
.rh-feature-title{
  height:165px;
  display:flex; flex-direction:column; justify-content:center;
  font-family:var(--display);
  font-weight:400;
  font-size:36px;
  line-height:normal;
  color:#000;
  transition:color .25s ease;
}
.rh-feature:hover .rh-feature-title{ color:#f97316; }
.rh-feature-meta{
  height:65px;
  display:flex; align-items:flex-start; justify-content:space-between;
  font-family:var(--body);
  font-weight:300;
  font-size:16px;
  line-height:normal;
  color:#000;
}
.rh-feature-views b{ font-weight:400; }
.rh-feature-tags{ white-space:nowrap; }

/* ===================== CATEGORY FILTERS ===================== */
/* vertical rail down the left edge of the grid — Figma 240 / 958, ten rows
   on an 84.5 px rhythm */
.rh-filters{
  position:absolute;
  left:240px; top:958px;
  width:318px;
  display:flex; flex-direction:column;
  gap:30.5px;
}

.rh-chip{
  height:54px;
  display:flex; align-items:center;
  gap:24px;
  padding:0 10px 0 0;
  border:0;
  border-radius:0;
  background:linear-gradient(90deg, #e2e2e2 1.8%, rgba(255,255,255,0) 100%);
  cursor:pointer;
  text-align:left;
  transition:background .25s ease;
}
.rh-chip-bar{
  width:5px; height:52px;
  flex:none;
  background:#e3e3e2;
  transition:background .25s ease;
}
.rh-chip-label{
  font-family:var(--body);
  font-weight:400;
  font-size:22px;
  line-height:normal;
  color:#000;
  white-space:nowrap;
}
.rh-chip:hover{ background:linear-gradient(90deg, #ededed 1.8%, rgba(255,255,255,0) 100%); }

.rh-chip.rh-chip-active{
  background:linear-gradient(90deg, #ffd3b3 1.8%, rgba(255,255,255,0) 100%);
}
.rh-chip.rh-chip-active .rh-chip-bar{ background:#ff9c38; }

/* ===================== VIDEO CARDS ===================== */
.vcard{
  position:absolute;
  width:510px; height:393px;
  background:var(--peach);
  border-radius:16px;
  padding:26.298px 27.0947px;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:24px;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1);
}
.vcard:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 24px rgba(249,118,25,.15), 0 2px 8px rgba(0,0,0,.04);
}
.vcard:hover .vcard-title{ color:#f97316; }
.vcard-hidden{ display:none; }

.vcard-slot-1{ left:632px;  top:958px;  }
.vcard-slot-2{ left:1170px; top:958px;  }
.vcard-slot-3{ left:632px;  top:1379px; }
.vcard-slot-4{ left:1170px; top:1379px; }

@keyframes rh-card-in{
  from{ opacity:0; transform:translateY(24px) scale(.985); }
  to  { opacity:1; transform:none; }
}
.vcard-enter{ animation:rh-card-in .5s cubic-bezier(.16,1,.3,1) both; }
.vcard-slot-2.vcard-enter{ animation-delay:.07s; }
.vcard-slot-3.vcard-enter{ animation-delay:.14s; }
.vcard-slot-4.vcard-enter{ animation-delay:.21s; }

.vcard-thumb{
  width:455.8105px; height:223px;
  border-radius:8.006px;
  overflow:hidden;
  flex:none;
  background:#fff;
}
.vcard-thumb img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.vcard:hover .vcard-thumb img{ transform:scale(1.03); }

.vcard-text{
  width:455.8105px; height:94px;
  display:flex; flex-direction:column; justify-content:center; gap:16px;
}
.vcard-title{
  font-family:var(--display);
  font-weight:400;
  font-size:20px;
  line-height:normal;
  color:#000;
  transition:color .2s ease;
}
.vcard-meta{
  width:455.8105px;
  display:flex; align-items:flex-start; justify-content:space-between;
  font-family:var(--body);
  font-weight:300;
  font-size:16px;
  line-height:normal;
  color:#000;
}
.vcard-views b{ font-weight:400; }
.vcard-tags{ white-space:nowrap; }

/* ===================== PAGINATION ===================== */
.pager{
  position:absolute;
  left:828px; top:1828px;
  width:265px; height:46.1091px;
  display:flex; align-items:center; justify-content:center; gap:5.7636px;
  transition:top .35s cubic-bezier(.16,1,.3,1);
}
/* a single row of results — the grid is 421 px shorter */
.pager.pager-tight{ top:1407px; }

.pager-nums{ display:flex; align-items:center; gap:5.7636px; }
.pager-nav{
  width:51.8727px; height:46.1091px;
  border:0;
  background:none;
  border-radius:34.582px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:opacity .2s ease, transform .2s ease;
}
.pager-nav:hover{ transform:scale(1.12); }
.pager-nav.pager-disabled{ opacity:.5; cursor:default; }
.pager-nav.pager-disabled:hover{ transform:none; }
.pager-nav img{ width:23.0545px; height:23.0545px; }
.pager-num{
  width:46.1091px; height:46.1091px;
  border:0;
  background:none;
  border-radius:34.582px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--body);
  font-size:20.1727px;
  line-height:28.818px;
  color:#18181b;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.pager-num:not(.active):hover{ background:#ffe8d6; }
.pager-num.active{ background:#f97316; color:#fff; transform:scale(1.08); }

/* ===================== JOBS NEAR YOU ===================== */
.rh-jobs-title{
  position:absolute;
  left:505px; top:1993px;
  width:916px; height:70px;
  font-family:var(--display);
  font-weight:500;
  font-size:56px;
  line-height:70px;
  text-align:center;
  color:var(--brown);
}

.job-card{
  position:absolute;
  top:2127px;
  height:306px;
  padding:24px;
  border-radius:12px;
  background:#fff;
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.1)) drop-shadow(0 2px 2px rgba(0,0,0,.1));
  display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.job-card:hover{ transform:translateY(-4px); }

.job-head{
  width:100%;
  display:flex; align-items:center; gap:8px;
}
.job-head-text{ flex:1 1 auto; min-width:0; }
.job-title{
  font-family:var(--body);
  font-weight:600;
  font-size:20px;
  line-height:24px;
  color:#101828;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.job-company{
  margin-top:8px;
  font-size:14px;
  line-height:20px;
  color:#4a5565;
}
.job-logo{
  width:51px; height:51px;
  flex:none;
  border-radius:10.2px;
  background:#f3f4f6;
  overflow:hidden;
}
.job-logo img{ width:100%; height:100%; object-fit:contain; }

.job-row{
  width:100%;
  display:flex; align-items:center; gap:8px;
  font-size:16px;
  line-height:20px;
  color:#4a5565;
}
.job-icon{ width:16px; height:16px; flex:none; }

/* Figma wraps the hairline in a container with 8 px of vertical padding —
   keeping that box makes `justify-content:space-between` land the six rows
   on the design's 18.6 px rhythm. */
.job-rule{
  width:100%; height:17px;
  display:flex; flex-direction:column; justify-content:center;
}
.job-rule::before{
  content:"";
  display:block;
  width:100%; height:1px;
  background:#e5e7eb;
}

.job-perks{
  width:100%;
  font-size:14px;
  line-height:20px;
  color:#4a5565;
}

.job-foot{
  width:100%; height:36px;
  display:flex; align-items:center; justify-content:flex-end; gap:8px;
}
.job-more{
  font-family:var(--body);
  font-weight:500;
  font-size:12.883px;
  line-height:normal;
  color:#f97619;
  text-decoration:underline;
  text-underline-position:from-font;
  transition:color .2s ease;
}
.job-more:hover{ color:#c25a0f; }

.job-apply{
  width:124.2px;
  display:flex; align-items:center; justify-content:center;
  gap:7.157px;
  padding:7.157px;
  border-radius:70.856px;
  background:rgba(249,118,25,.19);
  font-family:var(--body);
  font-weight:500;
  font-size:12.883px;
  line-height:normal;
  color:var(--brown);
  text-decoration:none;
  white-space:nowrap;
  transition:background .2s ease, transform .2s ease;
}
.job-apply:hover{ background:rgba(249,118,25,.3); transform:translateY(-1px); }
.job-apply img{ width:18px; height:18px; flex:none; }

.rh-jobs-btn{
  left:838px; top:2497px;
  width:244px; height:69px;
  gap:10.5697px;
  padding:15.854px 31.709px;
  border-radius:14.236px;
  font-size:24px;
  letter-spacing:-.456px;
  filter:drop-shadow(0 0 1.321px rgba(128,115,115,.23));
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 244 69' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0 -13.094 16.731 0 122 83.898)'><stop stop-color='rgb(255,156,56)' offset='0'/><stop stop-color='rgb(249,118,25)' offset='1'/></radialGradient></defs></svg>");
}

/* ===================== ALERT ME FOR A JOB ===================== */
.rh-alert-title{
  position:absolute;
  left:244px; top:2868px;
  width:745px; height:70px;
  display:flex; flex-direction:column; justify-content:center;
  font-family:var(--display);
  font-weight:500;
  font-size:56px;
  line-height:70px;
  /* Figma sets these headings to Title Case rather than editing the copy */
  text-transform:capitalize;
  color:var(--brown);
}
.rh-alert-sub{
  position:absolute;
  left:240px; top:2966px;
  width:511px; height:36px;
  font-size:24px;
  line-height:1.5;
  letter-spacing:-.456px;
  color:#000;
}

.rh-field{
  position:absolute;
  top:3054px;
  height:68.8096px;
  background:#fff;
  border-radius:14.236px;
  overflow:hidden;
  display:flex; align-items:center;
  transition:box-shadow .25s ease;
}
.rh-field:focus-within{ box-shadow:0 0 0 2px rgba(249,115,22,.45); }
.rh-field-area { left:240px;      width:173.7672px; }
.rh-field-phone{ left:433.9142px; width:272.8228px; }

.rh-field input{
  width:100%; height:100%;
  border:none; outline:none;
  background:transparent;
  padding:0 12px;
  font-family:var(--ui);
  font-size:21.355px;
  line-height:normal;
  letter-spacing:-.8542px;
  text-align:center;
  color:#000;
}
.rh-field input::placeholder{ color:#b8b8b8; }

.rh-submit{
  left:727px; top:3054px;
  width:144px; height:69px;
  gap:10.5697px;
  padding:15.854px 20px;
  border-radius:14.236px;
  font-size:24px;
  letter-spacing:-.456px;
  filter:drop-shadow(0 0 1.321px rgba(128,115,115,.23));
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 144 69' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0 -13.094 9.8723 0 72 83.898)'><stop stop-color='rgb(255,156,56)' offset='0'/><stop stop-color='rgb(249,118,25)' offset='1'/></radialGradient></defs></svg>");
}

.rh-map{
  position:absolute;
  left:1068px; top:2754px;
  width:613px; height:498px;
  border-radius:36px;
  object-fit:cover;
  pointer-events:none;
}

/* ===================== FOOTER ===================== */
.footer{ top:3300px; }