:root{
      --orange:red;
      --orange-dark:rgba(25, 25, 25, 0.799);
      --black:#111;
      --gray-0:#fff;
      --gray-1:#f5f5f5;
      --gray-2:#e9e9e9;
      --text:#1d1d1d;
      --muted:#6f6f6f;
      --container:1180px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--text);
      background:#fff;
    }
    a{color:inherit;text-decoration:none}
    .container{
      max-width:var(--container);
      margin:0 auto;
      padding:0 18px;
    }

    /* =========================
       TOP BAR
    ========================= */
    .topbar{
      background:#f3f3f3;
      border-bottom:1px solid #ececec;
      font-size:12px;
      line-height:1;
      color:#777;
    }
    .topbar .container{
      height:30px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    .topbar .left{
      opacity:.95;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .topbar .right{
      display:flex;
      gap:20px;
      white-space:nowrap;
      font-size: 14px;
      font-weight: 600;
    }
    .topbar .right a{color:#7a7a7a}
    .topbar .right a:hover{color:#333}

    /* =========================
       HEADER (LOGO + CONTACTS)
    ========================= */


/* parent */
.has-sub{ position:relative; }

/* submenu box */
.sub-menu{
  position:absolute;
  top:100%;
  left:0;
  min-width:220px;
  background:#fff;
  border:1px solid #eee;
  border-radius:10px;
  padding:8px;
  margin:10px 0 0;
  list-style:none;

  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:.2s ease;
  z-index:9999;
}

/* show on hover */
.has-sub:hover .sub-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* submenu links */
.sub-menu li a{
  display:block;
  padding:10px 12px;
  color:white;
  text-decoration:none;
  border-radius:8px;
  font-weight:600;
  background: white;
}

.sub-menu li a:hover{
  background:#f5f5f5;
}



/* remove the dark dropdown background */
.has-sub .sub-menu{
  background: white !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: -2%;
}

/* keep only the link “buttons” */
.has-sub .sub-menu li a{
  background: rgba(0,0,0,.55);   /* change this OR remove if you want fully no background */
  color: rgba(0, 0, 0, 0.484);
  border-radius: 10px;
  margin: 6px 0;
}

/* if you want NO background at all behind each item */
.has-sub .sub-menu li a{
  background: transparent !important;
  color: var(--black);
}

.has-sub{ position:relative; }

.sub-menu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  z-index:9999;
}

.has-sub.is-open .sub-menu{
  display:block;
}




.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.brand-logo{
  height:68px;   /* change size */
  width:90px;
  display:block;
}


    .header-main{
      background:#fff;
      border-bottom:1px solid #eee;
       z-index: 2000;     
    }
    .header-main .container{
      height:84px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
       z-index: 2000; 
    }
    
    .brand-mark{
      width:44px;height:30px;
      border-radius:4px;
      background:linear-gradient(135deg, var(--orange), #ffd28a);
      position:relative;
      overflow:hidden;
      flex:0 0 auto;
    }
    .brand-mark:before{
      content:"";
      position:absolute;inset:0;
      background:
        radial-gradient(circle at 20% 80%, #111 0 5px, transparent 6px),
        radial-gradient(circle at 75% 80%, #111 0 5px, transparent 6px),
        linear-gradient(90deg, rgba(0,0,0,.14), rgba(0,0,0,0));
      opacity:.75;
    }
    .brand-name{
      font-size:28px;
      font-weight:800;
      letter-spacing:.2px;
    }
    .brand-name span{color:#111}
    .header-info{
      display:flex;
      align-items:center;
      gap:22px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .info{
      display:flex;
      align-items:center;
      gap:10px;
      padding-left:18px;
      border-left:1px solid #efefef;
    }
    .info:first-child{border-left:none;padding-left:0}
    .ico{
      width:24px;height:24px;
      display:grid;place-items:center;
      color:var(--orange);
      flex:0 0 auto;
    }
    .info small{
      display:block;
      font-size:11px;
      color:#8a8a8a;
      margin-bottom:2px;
    }
    .info strong{
      display:block;
      font-size:13px;
      font-weight:700;
      color:#333;
      line-height:1.1;
      white-space:nowrap;
    }

    /* =========================
       NAV BAR
    ========================= */
    .navwrap{
      background:var(--orange);
      position:relative;
      box-shadow:0 2px 0 rgba(0,0,0,.08) inset;
    }
    .navwrap:after{
      /* slanted right edge */
      content:"";
      position:absolute;
      top:0; right:0;
      width:0; height:0;
      border-left:40px solid var(--orange);
      border-top:52px solid transparent;
    }
    .navwrap .container{
      height:52px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      position:relative;
      z-index:1;
    }
    .menu{
      list-style:none;
      padding:0;margin:0;
      display:flex;
      align-items:center;
      gap:0;
    }
    .menu a{
      display:block;
      padding:16px 18px;
      font-size:13px;
      font-weight:600;
      color:#fff;
      text-transform:capitalize;
    }
    .menu li.active a{
      background:var(--orange-dark);
    }
    .menu a:hover{background:rgba(0,0,0,.08)}
    .nav-actions{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .iconbtn{
      width:36px;height:36px;
      border:none;
      background:rgba(255,255,255,.16);
      color:#fff;
      display:grid;place-items:center;
      cursor:pointer;
      border-radius:2px;
    }
    .iconbtn:hover{background:rgba(255,255,255,.24)}
    .cta{
      background:#111;
      color:#fff;
      font-size:13px;
      font-weight:700;
      padding:10px 14px;
      border-radius:2px;
      white-space:nowrap;
    }
    .cta:hover{filter:brightness(1.05)}

    /* =========================
       HERO
    ========================= */
    .hero{
      position:relative;
      height:77vh;
      overflow:hidden;
      background:
        linear-gradient(0deg, rgba(0,0,0,.32), rgba(0,0,0,.32)),
        url("images/bg-home.png") center/cover no-repeat;
    }

    /* big diagonal stripes on right */
    .hero .stripe-orange,
    .hero .stripe-dark{
      position:absolute;
      top:-65px;
      right:210px;
      width:160px;
      height:680px;
      transform:rotate(24deg);
      z-index:1;
    }
    .hero .stripe-orange{background:var(--orange)}
    .hero .stripe-dark{
      right:275px;
      width:120px;
      background:rgba(0,0,0,.65);
    }

    .hero .container{
      height:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      position:relative;
      z-index:2;
      gap:20px;
    }
    .hero-copy{
      width:min(560px, 100%);
      padding-top:10px;
    }
    .eyebrow{
      color:rgba(255,255,255,.72);
      font-size:15px;
      margin:0 0 10px;
      letter-spacing:.2px;
      
    }
    .hero h1{
      margin:0 0 10px;
      color:#fff;
      font-size:50px;
      line-height:1.15;
      font-weight:800;
    }
    .hero .sub{
      margin:0 0 18px;
      color:rgba(255,255,255,.72);
      font-size:15px;
      line-height:1.7;
      max-width:420px;
    }
    .hero-btn{
      display:inline-block;
      background:var(--orange);
      color:white;
      font-weight:800;
      font-size:12px;
      padding:10px 16px;
      border-radius:8px;
      margin-top: 3%;
    }
    .hero-btn:hover{filter:brightness(1.03)}

    .hero-car{
      position:relative;
      width:540px;
      height:100%;
    }
    .hero-car img{
      position:absolute;
      right:-30px;
      top:88px;
      width:760px;
      max-width:none;
      height:auto;
      filter:drop-shadow(0 18px 26px rgba(0,0,0,.45));
      user-select:none;
      pointer-events:none;
    }

    /* slider footer */
    .sliderbar{
      margin-top:26px;
      width:420px;
      height:56px;
      background:#efefef;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 18px;
      border-radius:2px;
      color:#666;
      font-size:12px;
    }
    .sliderbar .nav{
      display:flex; align-items:center; gap:10px;
      color:#666;
      font-weight:600;
    }
    .sliderbar .nav .minus,
    .sliderbar .nav .plus{
      font-weight:800;
      color:#888;
      font-size:14px;
      line-height:1;
    }
    .sliderbar .count{
      font-weight:700;
      color:#777;
      display:flex;
      align-items:flex-end;
      gap:4px;
    }
    .sliderbar .count b{
      color:var(--orange-dark);
      font-size:22px;
      line-height:1;
    }
    .sliderbar .count span{
      font-size:12px;
      color:#999;
      padding-bottom:2px;
    }

    /* Responsive */
    @media (max-width: 980px){
      .header-info{display:none}
      .hero{height:auto; padding:54px 0 34px}
      .hero .container{flex-direction:column; align-items:flex-start}
      .hero-car{width:100%; height:260px}
      .hero-car img{right:-10px; top:10px; width:520px}
      .hero .stripe-orange, .hero .stripe-dark{display:none}
      .sliderbar{width:min(420px, 100%)}
    }



    /* styles.css */

.why-ridepro{
  background:#fff;
}

/* light textured band at the top */
.why-ridepro__topband{
  height:160px;
  background:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,.06), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,.05), transparent 60%),
    linear-gradient(#e6e6e6, #dcdcdc);
}

.why-ridepro__wrap{
  max-width:1100px;
  margin:-80px auto 0;
  padding:0 22px 90px;
}

.brand-red{
  color:#e60000; /* red */
}


.why-ridepro__card{
  background:#fff;
  border:1px solid #ececec;
  border-radius:10px;
  padding:90px 22px;
  text-align:center;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
}

.why-ridepro__card h2{
  margin:0 0 18px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:800;
  font-size:56px;
  line-height:1.05;
  letter-spacing:-.02em;
  color:#111;
}

.why-ridepro__card p{
  margin:0 auto;
  max-width:820px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:18px;
  line-height:1.7;
  color:#555;
}

@media (max-width: 768px){
  .why-ridepro__topband{ height:120px; }
  .why-ridepro__wrap{ margin-top:-55px; padding-bottom:70px; }
  .why-ridepro__card{ padding:64px 18px; }
  .why-ridepro__card h2{ font-size:36px; }
  .why-ridepro__card p{ font-size:16px; }
}

.ride-types{
  padding:70px 0;
  background:#fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.ride-types__wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 22px;
}

/* ===== Carousel layout ===== */
.rt-carousel{
  position:relative;
}
.rt-viewport{
  overflow:hidden;               /* hides off-screen cards */
}
.rt-track{
  display:flex;
  gap:18px;
  transition:transform .45s ease;
  will-change:transform;
  padding:6px 0;                 /* small padding so shadows don’t get cut */
}

/* Show 3 cards in viewport */
.rt-card{
  flex:0 0 calc((100% - (18px * 2)) / 3);
  border-radius:18px;
  overflow:hidden;
  min-height:420px;
  display:flex;
  flex-direction:column;
  border:1px solid #ececec;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  background:#fff;
}

/* arrows */
.rt-nav{
  position:absolute;
  top:110%;
  transform:translateY(-50%);
  width:44px;height:44px;
  border-radius:999px;
  border:1px solid #e7e7e7;
  background:red;
  box-shadow:0 10px 22px rgba(0,0,0,.10);
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:28px;
  font-weight:700;
  z-index:5;
  color: white;
}
.rt-prev{ left:90%; }
.rt-next{ right:-12px; }
.rt-nav:disabled{
  opacity:.45;
  cursor:not-allowed;
}



/* ====== HERO (matches screenshot style) ====== */
:root{
  --bg: #f6f6fb;
  --text: #0f172a;
  --muted: #475569;
  --card: #ffffff;
  --border: #ecebf3;
  --shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  --purple: red;
}


.ride-hero{
  background: var(--bg);
  padding: 56px 0 72px;
  color: var(--text);
}

.ride-hero__container{
  width: min(1200px, calc(100% - 64px));
  margin: 0 auto;
}

.ride-hero__grid{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: start;
}

.ride-hero__title{
  font-size: clamp(44px, 4.2vw, 50px);
  line-height: 1.05;
  margin: 0 0 18px;
  letter-spacing: -0.02em;
}

.ride-hero__brand{
  color: var(--purple);
  font-weight: 800;
}

.ride-hero__word{
  color: #0b0b0f;
  font-weight: 800;
  margin-left: 10px;
}

.ride-hero__lead{
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.45;
  max-width: 640px;
  margin: 0 0 28px;
  color: #0b0b0f;
  font-weight: 400;
}

.ride-hero__cards{
  display: grid;
  gap: 18px;
  margin-top: 12px;
}

.feature-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 22px 26px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

.feature-card h3{
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 600;
  color: #0b0b0f;
}

.feature-card p{
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  color: #334155;
}

.ride-hero__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
  padding: 14px 28px;
  border-radius: 999px;
  border: 2px solid var(--purple);
  color: var(--purple);
  background: transparent;
  font-weight: 700;
  text-decoration: none;
  user-select: none;
}

.ride-hero__btn:hover{
  background: rgba(91, 43, 224, 0.06);
}

/* Right visual */
.visual{
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: 540px;
}

.visual__phone{
  width: min(720px, 130%);
  height: auto;
  display: block;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,0.18));
  margin-top: -20%;
  margin-bottom: -10%;
}

.visual__qr{
  position: absolute;
  left: -70px;
  top: 48%;
  transform: translateY(-50%);
  width: 280px;
  background: #fff;
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.visual__qr img{
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive */
@media (max-width: 980px){
  .ride-hero__grid{
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .visual{
    justify-content: center;
    min-height: unset;
    padding-top: 10px;
  }

  .visual__qr{
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    width: min(280px, 86%);
  }
}

@media (max-width: 520px){
  .ride-hero__container{
    width: min(1200px, calc(100% - 28px));
  }
  .feature-card{
    padding: 18px 18px;
    border-radius: 18px;
  }
  .feature-card p{
    font-size: 16px;
  }
}


    /* Right media column */
  .rp-heroMedia{
    position: relative;
    min-height: 540px;
    overflow: visible;
    display: flex;
    align-items: center;
   
      justify-content: flex-start;   /* was flex-end */
  padding-left: 10px;           /* optional */
  background: transparent;
  }

  
  /* Frame to control sizing (prevents clipping) */
  .rp-heroMediaFrame{
    width: min(820px, 100%);
    height: 840px;
    overflow: hidden;
    border-radius: 18px;
   
    
  }

  /* Image always visible */
  .rp-heroMediaImg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin-left: -10%;
  }

  @media (max-width: 980px){
    .rp-heroMedia{
      justify-content: center;
      min-height: 360px;
    }
    .rp-heroMediaFrame{
      height: 360px;
      width: min(520px, 100%);
    }
  }





/* ===== Card styling (same as before) ===== */
.rt-card__content{ padding:34px 34px 0; }
.rt-card h3{
  margin:0 0 14px;
  font-size:30px;
  line-height:1.08;
  letter-spacing:-.02em;
  font-weight:700;
}
.rt-card p{
  margin:0;
  font-size:16px;
  line-height:1.6;
  color:#555;
  max-width:360px;
}

.rt-card__media{
  margin-top:auto;
  padding:26px 34px 34px;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
}

/* Center + style the section heading */
.ride-types h2{
  text-align:center;
 
  font-weight:800;
  font-size:50px;
  line-height:1.1;
  letter-spacing:-.02em;
  margin:0 0 28px;
  color:#111;
  margin-bottom: 3%;
  margin-top: -3%;
}

/* mobile */
@media (max-width: 768px){
  .ride-types h2{ font-size:32px; margin-bottom:18px; }
}


.rt-icon{
  width:64px;height:64px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-size:28px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
}
.rt-icon--soft{
  background:#f2f2f2;
  border:1px solid #e9e9e9;
}

.rt-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:22px;
  padding:12px 18px;
  border-radius:999px;
  font-weight:800;
  font-size:14px;
  text-decoration:none;
  background:#2fbf71;
  color:#fff;
  width:fit-content;
}
.rt-btn--outline{
  background:transparent;
  border:2px solid rgba(255,255,255,.35);
  color:#fff;
}

.rt-card--dark{
  background:#0b0b0b;
  border-color:#0b0b0b;
}
.rt-card--dark h3,
.rt-card--dark p{ color:#fff; }
.rt-card--dark p{ opacity:.78; }


.rs-card__media--photo{
  height:250px;
  width:100%;
  padding:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.12) 100%),
    url("images/ride\ 1.png") center/cover no-repeat;

      background-position: 50% 19%; /* 20% shows more TOP, 80% shows more BOTTOM */
        background-size: cover;
}

.rt-card__media--photo{
  height:210px;
  width:100%;
  padding:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.12) 100%),
    url("images/ridepro.png") center/cover no-repeat;
}

.rt-card--photo{
  border:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.55) 100%),
    url("images/bg-home.png") center/cover no-repeat;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.rt-card__content--overlay{ padding:34px; }
.rt-card__content--overlay h3,
.rt-card__content--overlay p{ color:#fff; }
.rt-card__content--overlay p{ opacity:.85; }

.rt-badges{
  display:flex;
  gap:10px;
  margin-top:18px;
  flex-wrap:wrap;
}
.rt-badge{
  font-size:12px;
  font-weight:800;
  padding:8px 12px;
  border-radius:999px;
  background:#f2f2f2;
  border:1px solid #e9e9e9;
  color:#111;
}

/* Responsive: show 1 card on small screens */
@media (max-width: 900px){
  .rt-card{ flex-basis:100%; }
  .rt-prev{ left:6px; }
  .rt-next{ right:6px; }
}

/* ===== EARN SECTION ===== */
.earn-section{
  padding:28px;
  background:#ec1c1c; /* purple background */
  margin-top: 5%;
}

.earn-wrap{
  max-width:1320px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap:24px;
  align-items:stretch;
}

/* LEFT image card */
.earn-media{
  border-radius:26px;
  overflow:hidden;
  background:rgba(0,0,0,.12);
  box-shadow:0 18px 36px rgba(0,0,0,.18);
  min-height:560px;
}

.earn-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* RIGHT white card */
.earn-card{
  background:#fff;
  border-radius:26px;
  padding:44px 44px;
  box-shadow:0 18px 36px rgba(0,0,0,.14);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.earn-pill{
  width:fit-content;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background:#f3f0ff;
  color:red;
  font-weight:800;
  letter-spacing:.06em;
  font-size:12px;
  text-transform:uppercase;
}

.earn-pill__icon{
  width:28px;
  height:28px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#eae6ff;
}

.earn-title{
  margin:22px 0 24px;
  font-size:30px;
  line-height:1.05;
  letter-spacing:-.03em;
  font-weight:700;
  color:#15162a;
  max-width:520px;
}

.earn-features{
  display:flex;
  flex-direction:column;
  gap:28px;
  margin-top:8px;
}

.earn-item h3{
  margin:0 0 8px;
  font-size:20px;
  font-weight:600;
  color:#17182a;
}

.earn-item p{
  margin:0;
  font-size:16px;
  line-height:1.7;
  color:#5a5a72;
  max-width:560px;
}

.earn-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10%;
  padding: 14px 16px;
  border-radius: 999px;
  background: red;      /* change to your brand color */
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 14px 26px rgba(91, 43, 224, 0.25);
  transition: transform .15s ease, opacity .15s ease;
}

.earn-btn:hover{
  transform: translateY(-1px);
  opacity: .95;
}


/* ===== Responsive ===== */
@media (max-width: 1000px){
  .earn-wrap{
    grid-template-columns:1fr;
  }
  .earn-media{
    min-height:420px;
  }
  .earn-card{
    padding:34px 24px;
  }
  .earn-title{
    font-size:40px;
  }
}

@media (max-width: 520px){
  .earn-section{ padding:16px; }
  .earn-title{ font-size:34px; }
}



:root{
  --bg: #f7f3ff;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #5b6475;
  --purple: red;
  --purple-100: rgba(91, 43, 224, 0.10);
  --border: rgba(224, 43, 43, 0.55);
}

.partner{
  background: var(--bg);
  padding: 72px 0 90px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
}

.partner__wrap{
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
  text-align: center;
}

.partner__title{
  margin: 0 0 28px;
  font-size: clamp(36px, 4vw, 50px);
  letter-spacing: -0.02em;
  font-weight: 800;
}
.partner__title span{ color: var(--purple); }

/* Tabs pill */
.partner-tabs{
  display: inline-flex;
  gap: 10px;
  padding: 12px;
  border: 2px solid var(--border);
  border-radius: 999px;
  background: transparent;
  align-items: center;
  justify-content: center;
  margin: 0 auto 48px;
}

.partner-tab{
  border: 0;
  background: transparent;
  color: var(--purple);
  font-weight: 700;
  padding: 14px 24px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.partner-tab.is-active{
  background: var(--purple);
  color: #fff;
  box-shadow: 0 10px 24px rgba(91, 43, 224, 0.25);
}
.partner-tab:focus-visible{
  outline: 3px solid rgba(91, 43, 224, 0.35);
  outline-offset: 3px;
}

/* Panels */
.partner-panel{ display: none; }
.partner-panel.is-active{ display: block; }

/* Card */
.partner-card{
  background: var(--card);
  border-radius: 28px;
  padding: 56px 64px;
  width: min(860px, 100%);
  margin: 0 auto;
  text-align: left;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
}

.partner-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}

.partner-badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(91, 43, 224, 0.08);
  color: #111827;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.badge-icon{
  width: 22px;
  height: 22px;
  color: var(--purple);
  display: inline-flex;
}
.badge-icon svg{ width: 22px; height: 22px; }

.partner-card__title{
  margin: 18px 0 22px;
  font-size: clamp(34px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.partner-points{
  display: grid;
  gap: 26px;
  margin-top: 10px;
}

.point h4{
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
}
.point p{
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
  max-width: 58ch;
}

.partner-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 34px;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 14px 26px rgba(91, 43, 224, 0.25);
}
/* =========================
   FOOTER (MATCH SITE TYPOGRAPHY)
========================= */
.ride-footer{
  background: #0b0b10;
  color: rgba(255,255,255,.88);
  padding: 56px 0 22px;
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.rf-container{
  width: min(1120px, 92%);
  margin: 0 auto;
}

.rf-top{
  display: grid;
  grid-template-columns: 1.1fr 2.2fr;
  gap: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

/* Logo = like heading */
.rf-logo{
  display: inline-block;
  font-weight: 800;
  font-size: 22px; /* keep logo slightly bigger */
  letter-spacing: -0.02em;
  text-decoration: none;
  color: #fff;
}

/* Footer paragraph = same as your p */
.rf-desc{
  margin: 10px 0 18px;
  color: rgba(255,255,255,.62);
  font-size: 16px;       /* SAME AS paragraphs */
  line-height: 1.7;      /* SAME AS body */
  max-width: 42ch;
}

.rf-actions{
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.rf-store{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  text-decoration: none;
  color: #fff;
  transition: transform .15s ease, border-color .15s ease;
}
.rf-store:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.22); }

/* store text = same paragraph sizing */
.rf-store small{
  display:block;
  font-size: 16px;           /* MATCH p */
  color: rgba(255,255,255,.62);
  line-height: 1.4;
}
.rf-store strong{
  display:block;
  font-size: 16px;           /* MATCH p */
  line-height: 1.4;
  font-weight: 800;
}

.rf-select select{
  width: 100%;
  max-width: 260px;
  padding: 12px 14px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  outline: none;
  font-size: 16px;           /* MATCH p */
}

/* Links columns */
.rf-links{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

/* Column heading = same as h3 in your sections */
.rf-col h4{
  margin: 0 0 10px;
  font-size: 22px;           /* MATCH h3 */
  font-weight: 800;
  color: rgba(255,255,255,.92);
  letter-spacing: -0.02em;
}

.rf-col ul{ list-style: none; padding: 0; margin: 0; }
.rf-col li{ margin: 10px 0; }

.rf-col a{
  color: rgba(255,255,255,.62);
  text-decoration: none;
  font-size: 16px;           /* MATCH p */
  line-height: 1.7;
}
.rf-col a:hover{
  color:#fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Bottom row */
.rf-bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 18px;
  flex-wrap: wrap;
}

.rf-legal{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.rf-legal a{
  color: rgba(255,255,255,.62);
  text-decoration: none;
  font-size: 16px;          /* MATCH p */
}
.rf-legal a:hover{
  color:#fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rf-copy{
  margin: 0;
  color: rgba(255,255,255,.62);
  font-size: 16px;          /* MATCH p */
  line-height: 1.7;
}

.rf-social{
  display: flex;
  gap: 10px;
  align-items: center;
}
.rf-social a{
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease;
}
.rf-social a:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
}

/* Responsive */
@media (max-width: 980px){
  .rf-top{ grid-template-columns: 1fr; }
  .rf-links{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .rf-links{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}







  :root{
    --hero-bg: #b9b7a8;          /* warm grey like screenshot */
    --hero-text: #ffffff;
    --hero-btn: #b9ff00;         /* neon lime */
    --hero-btnText: #0b0b0b;
  }

  .about-hero{
    position: relative;
    min-height: calc(100vh - 72px); /* adjust if you have a fixed header */
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--hero-bg);
  }

  .about-hero__video{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    filter: saturate(0.95) contrast(1.05);
  }

  .about-hero__overlay{
    position: absolute;
    inset: 0;
    z-index: 1;
    /* tint like screenshot (video still visible) */
    background: rgba(185, 183, 168, 0.78);
  }

  .about-hero__inner{
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 72px 18px 46px;
    width: min(1100px, 92%);
  }

  .about-hero__title{
    margin: 0 0 30px;
    color: var(--hero-text);
    font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 0.95;
    font-size: clamp(44px, 6.2vw, 70px);
    text-transform: none;
  }

  .about-hero__title span{
    opacity: 1;
  }

  .about-hero__btn{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 999px;
    background: var(--hero-btn);
    color: var(--hero-btnText);
    font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 800;
    font-size: 16px;
    text-decoration: none;
    box-shadow: 0 14px 34px rgba(0,0,0,0.18);
    transition: transform .15s ease, filter .15s ease;
  }
  .about-hero__btn:hover{
    transform: translateY(-1px);
    filter: brightness(0.98);
  }

  .about-hero__btnIcon{
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,0.10);
    font-size: 12px;
    line-height: 1;
  }

  .about-hero__scroll{
    margin-top: 62px;
    display: grid;
    justify-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.85);
    font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  }

  .about-hero__arrow{
    font-size: 26px;
    line-height: 1;
    animation: heroBounce 1.6s ease-in-out infinite;
    opacity: 0.95;
  }

  .about-hero__scrollText{
    font-size: 14px;
    letter-spacing: 0.02em;
    text-transform: lowercase;
  }

  @keyframes heroBounce{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(6px); }
  }

  /* Mobile spacing */
  @media (max-width: 520px){
    .about-hero__inner{ padding-top: 56px; }
    .about-hero__scroll{ margin-top: 44px; }
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    .about-hero__arrow{ animation: none; }
  }

  .about-hero{
  position:relative;
  min-height:85vh;
  overflow:hidden;
}

.about-hero__videoWrap{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none; /* makes it behave like a background */
}

.about-hero__iframe{
  position:absolute;
  top:50%;
  left:50%;
  width:177.78vh;  /* 16:9 cover trick */
  height:100vh;
  transform:translate(-50%,-50%);
}

@media (min-aspect-ratio:16/9){
  .about-hero__iframe{
    width:100vw;
    height:56.25vw;
  }
}

.about-hero__overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:1;
}

.about-hero__content{
  position:relative;
  z-index:2;
}


/* =========================
   STORY SECTION (inDrive style)
========================= */
.story-section{
  background:#fbf8e6;           /* soft cream */
  padding: 64px 0;
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#0b0b0f;
}

.story-wrap{
  width:min(1200px, calc(100% - 64px));
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap:56px;
  align-items:center;
}

/* -------- Left collage -------- */
.story-media{ display:flex; justify-content:center; }
.collage{
  position:relative;
  width:min(620px, 100%);
  height:520px;
}

.collage-card{
  position:absolute;
  border-radius:22px;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.14);
  border: 1px solid rgba(0,0,0,.06);
}

.collage-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* positions */
.card-a{
  width:270px;
  height:250px;
  left:0;
  top:10px;
  transform: rotate(-10deg);
  z-index:3;
  margin-top: -3%;
  margin-left: -5%;
}
.card-b{
  width:360px;
  height:260px;
  left:120px;
  top:80px;
  transform: rotate(4deg);
  z-index:2;
}
.card-c{
  width:280px;
  height:240px;
  left:30px;
  bottom:0;
  transform: rotate(9deg);
  z-index:4;
}

/* stickers */
.collage-tag{
  position:absolute;
  padding:10px 14px;
  border-radius:999px;
  font-weight:800;
  font-size:14px;
  line-height:1;
  background:#ffffff;
  box-shadow: 0 12px 24px rgba(0,0,0,.12);
  border:1px solid rgba(0,0,0,.06);
  z-index:6;
}

.tag-temp{
  left:270px;
  top:58px;
  transform: rotate(-12deg);
}

.tag-price{
  left:320px;
  top:92px;
  transform: rotate(10deg);
}

/* -------- Right content -------- */
.story-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:999px;
  background: rgba(0,0,0,.06);
  font-weight:700;
  font-size:14px;
  letter-spacing:.2px;
}

.story-title{
  margin:18px 0 16px;
  font-weight:800;
  letter-spacing:-0.01em;
  line-height:1.25;
  font-size: clamp(44px, 5vw, 50px);
}

.story-hl{
  background:rgba(255, 0, 0, 0.916); /* lime highlight */
  padding:0 .14em;
  border-radius:6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  margin-top: 5%;
   line-height:1.02;
   color: white;
}

.story-text{
  margin:0;
  max-width: 54ch;
  font-size:18px;
  line-height:1.55;
  font-weight:500;
  color: rgba(0,0,0,.78);
}

/* -------- Responsive -------- */
@media (max-width: 980px){
  .story-wrap{
    grid-template-columns: 1fr;
    gap:34px;
  }
  .collage{
    height:380px;
  }
}

@media (max-width: 560px){
  .story-wrap{ width:min(1200px, calc(100% - 28px)); }
  .collage{ height:340px; }

  .card-a{ width:190px; height:190px; }
  .card-b{ width:320px; height:230px; left:90px; }
  .card-c{ width:210px; height:180px; }

  .tag-temp{ left:220px; }
  .tag-price{ left:260px; }
  .story-text{ font-size:16px; }
}


/* ===== Ride Pro Values Section ===== */
.rp-values{
  background: #fbf8e6; /* soft cream */
  padding: clamp(48px, 6vw, 88px) 0;
}

.rp-values__inner{
  width: min(1200px, 92%);
  margin: 0 auto;
}

.rp-pill{
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .01em;
}

.rp-values__title{
  margin: 18px 0 34px;
  font-size: clamp(40px, 6vw, 50px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 900;
  color: #0b0b10;
}

/* highlight like the screenshot */
.rp-hl{
  background: red;
  padding: 0 .18em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: white;
  border-radius: 7px;
  margin-top: -2%;
}

.rp-values__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
}

.rp-card{
  position: relative;
  display: block;
  border-radius: 28px;
  overflow: hidden;
  text-decoration: none;
  transform: translateZ(0);
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
}

.rp-card__img{
  width: 100%;
  height: clamp(320px, 34vw, 520px);
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform .25s ease;
}

/* subtle dark overlay for readable white text */
.rp-card::after{
  content:"";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.18) 0%,
    rgba(0,0,0,.10) 35%,
    rgba(0,0,0,.35) 100%
  );
  pointer-events: none;
}

.rp-card__overlay{
  position: absolute;
  inset: 0;
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1;
}

.rp-card__title{
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-shadow: 0 10px 22px rgba(0,0,0,.35);
}

.rp-card__cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 10px 14px;
  border-radius: 999px;
  background: red;
  color: white;
  font-weight: 800;
  font-size: 14px;
}

.rp-plus{
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(0,0,0,.12);
  font-weight: 900;
  line-height: 1;
}

.rp-card:hover .rp-card__img{
  transform: scale(1.06);
}

@media (max-width: 980px){
  .rp-values__grid{ grid-template-columns: 1fr; }
  .rp-card__img{ height: 360px; }
}


/* ===== Page background like the screenshot ===== */
.id-section{
  background:#f6f6ea;
  padding:56px 0;
}

/* ===== Big rounded white card ===== */
.id-card{
  width:min(1320px, 94%);
  margin:0 auto;
  background:#fff;
  border-radius:28px;
  overflow:hidden;
  display:grid;
  grid-template-columns: 52% 48%;
  min-height: 560px;
  box-shadow: 0 18px 45px rgba(0,0,0,.08);
}

/* ===== LEFT side with green swoosh + photos ===== */
.id-left{
  position:relative;
  padding: 40px 24px;
  background:#fff;
}

/* green swoosh (top) */
.id-left::before{
  content:"";
  position:absolute;
  width: 500px;
  height: 520px;
  left: -40px;
  top: -160px;
  background:red;
  border-radius: 260px;
  transform: rotate(-18deg);
  z-index: 0;
}

/* green area bottom-left + white triangle cut */
.id-left::after{
  content:"";
  position:absolute;
  left:-110px;
  bottom:-160px;
  width: 420px;
  height: 520px;
  background:red;
  border-radius: 120px;
  transform: rotate(-18deg);
  z-index: 0;

  /* carve the triangle notch like the screenshot */
  -webkit-mask:
    linear-gradient(#000 0 0),
    conic-gradient(from 225deg at 180px 220px, transparent 0 90deg, #000 0);
  -webkit-mask-composite: source-out;
          mask-composite: exclude;
}

/* photos */
.id-photo{
  position:absolute;
  border-radius:24px;
  overflow:hidden;
  box-shadow: 0 18px 38px rgba(0,0,0,.18);
  z-index: 2;
}

.id-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* small photo (top-left) */
.id-photo--small{
  width: 245px;
  height: 320px;
  left: 32px;
  top: 170px;
  transform: rotate(-12deg);
  border-radius: 10px;
  margin-top: -15%;
}

/* big photo (bottom-left, tilted) */
.id-photo--big{
  width: 300px;
  height: 350px;
  left: 170px;
  top: 265px;
  transform: rotate(-10deg);
  border-radius: 10px;
  margin-top: -10%;
}

/* ===== RIGHT side text ===== */
.id-right{
  padding: 90px 74px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 18px;
}

.id-mark{
  width: 62px;
  height: 62px;
}

.id-title{
  font-size: 50px;
  font-weight: 800;
  margin-top: -7%;
}

.id-text{
  margin-top: -5%;
}


:root{
  --rp-bg: #fbf6dd;      /* light cream */
  --rp-ink: #0b0b0b;     /* near black */
  --rp-lime: #f00000;    /* highlight green */
  --rp-card: #ffffff;
}

.rp-commit{
  background: var(--rp-bg);
  padding: clamp(48px, 6vw, 96px) 0;
  overflow: hidden;
}

.rp-wrap{
  width: min(1200px, 92%);
  margin: 0 auto;
}

.rp-grid{
  display: grid;
  grid-template-columns: minmax(320px, 520px) 1fr;
  align-items: center;
  gap: clamp(24px, 5vw, 84px);
}

/* LEFT */
.rp-media{
  display: flex;
  justify-content: center;
  align-items: center;
}

.rp-phone{
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.18));
}

/* RIGHT */
.rp-content{
  position: relative;
  padding-right: clamp(8px, 2vw, 28px);
}

.rp-title{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 850;
  letter-spacing: -0.03em;
  color: var(--rp-ink);
  font-size: clamp(44px, 5.4vw, 50px);
  line-height: 1.32;
  margin: 0 0 18px;
}

.rp-hl{
  background: var(--rp-lime);
  padding: 0.06em 0.14em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.rp-text{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--rp-ink);
  font-weight: 600;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.5;
  max-width: 56ch;
  margin: 0;
}

/* top-right stamp */
.rp-stamp{
  position: absolute;
  top: -18px;
  right: -6px;
  width: clamp(110px, 12vw, 150px);
  height: auto;
}

.rp-stamp__svg{ width: 100%; height: auto; display:block; }

.rp-stamp__ring{
  fill: none;
  stroke: rgba(240, 0, 0, 0.9);
  stroke-width: 10;
}

.rp-stamp__innerRing{
  fill: none;
  stroke: rgba(240, 0, 0, 0.7);
  stroke-width: 4;
}

.rp-stamp__text{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--rp-ink);
}

.rp-stamp__logoBg{
  fill: rgba(240, 0, 0, 0.95);
}

.rp-stamp__logoText{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  font-size: 18px;
  fill: var(--rp-ink);
}

/* responsive */
@media (max-width: 900px){
  .rp-grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .rp-stamp{
    top: -10px;
    right: 0;
  }
}


:root{
  --rp-purple:#ff2c2c; /* adjust to match your brand purple */
  --rp-text:#0b0b0b;
}

.rp-customers{
  background:#fff;
  padding: clamp(56px, 7vw, 110px) 0;
}

.rp-customers__wrap{
  width: min(1200px, 92%);
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1.25fr;
  align-items: center;
  gap: clamp(28px, 6vw, 90px);
  min-height: 70vh; /* gives that big airy spacing feel */
}

.rp-customers__title{
  margin: 0 0 34px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--rp-text);
  font-size: clamp(46px, 5.3vw, 50px);
  line-height: 1.02;
}

.rp-customers__accent{
  color: var(--rp-purple);
}

.rp-customers__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 14px 26px;
  border-radius: 999px;
  background: var(--rp-purple);
  color: #fff;
  text-decoration: none;

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;

  transition: transform .15s ease, opacity .15s ease;
}

.rp-customers__btn:hover{ transform: translateY(-1px); opacity: .95; }
.rp-customers__btn:active{ transform: translateY(0); }

/* Logos grid */
.rp-logos{
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  column-gap: clamp(28px, 5vw, 80px);
  row-gap: clamp(36px, 6vw, 90px);
  align-items: center;
  justify-items: center;
}

.rp-logo{
  width: 100%;
  max-width: 170px;      /* keeps logos similar size */
  height: auto;
  object-fit: contain;
  display: block;
  opacity: 0.95;
}

/* Responsive */
@media (max-width: 900px){
  .rp-customers__wrap{
    grid-template-columns: 1fr;
    min-height: auto;
    text-align: left;
  }
  .rp-logos{
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    justify-items: start;
  }
  .rp-logo{ max-width: 160px; }
}

@media (max-width: 520px){
  .rp-logos{
    grid-template-columns: 1fr;
    justify-items: start;
  }
}




/* EARN-WITH-RIDE-PRO */

/* ====== Ride Pro: Why section ====== */
.ridepro-why{
  padding: 72px 0;
  background: #fff;
  color: #0f172a;
}

.ridepro-why__container{
  width: min(1100px, 92%);
  margin: 0 auto;
}

.ridepro-why__title{
  font-size: clamp(32px, 4vw, 50px);
 
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  font-weight: 600;
}

.ridepro-why__subtitle{
  max-width: 720px;
  margin: 0 0 44px;
  color: #5a6678;
  font-size: 18px;
  line-height: 1.7;
}

.ridepro-why__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 46px;
  align-items: start;
}

.ridepro-why__item{
  display: grid;
  gap: 12px;
}

.ridepro-why__icon{
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}

.ridepro-why__icon svg{
  width: 32px;
  height: 32px;
  fill: red;
}

.ridepro-why__heading{
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.ridepro-why__text{
  margin: 0;
  color: #64748b;
  line-height: 1.7;
  font-size: 15.5px;
}

/* Responsive */
@media (max-width: 900px){
  .ridepro-why__grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ====== Ride Pro: Get started section ====== */
.ridepro-start{
  padding: 72px 0;
  background: #fff;
  color: #0f172a;
}

.ridepro-start__container{
  width: min(1100px, 92%);
  margin: 0 auto;
}

.ridepro-start__title{
  font-size: clamp(36px, 4.2vw, 50px);

  letter-spacing: -0.02em;
  margin: 0 0 40px;
  font-weight: 600;
}

.ridepro-start__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 54px;
  align-items: start;
}

.ridepro-start__card{
  display: grid;
  gap: 12px;
}

.ridepro-start__icon{
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}

.ridepro-start__icon svg{
  width: 34px;
  height: 34px;
  fill: red;
}

.ridepro-start__heading{
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.ridepro-start__text{
  margin: 0;
  color: #64748b;
  line-height: 1.7;
  font-size: 15.5px;
  max-width: 320px;
}

.ridepro-start__link{
  margin-top: 10px;
  display: inline-block;
  color: red;
  text-decoration: none;
  font-weight: 700;
}

.ridepro-start__link:hover{
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 900px){
  .ridepro-start__grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .ridepro-start__text{
    max-width: 100%;
  }
}


/* ===== Ride Pro: How it works ===== */
.ridepro-how{
  --rp-green: red;
  --rp-text: #0f172a;
  --rp-muted: #64748b;
  --rp-border: #e5e7eb;

  background: #fff;
  color: var(--rp-text);
  padding: 70px 0;
}

.ridepro-how__container{
  width: min(1180px, 92%);
  margin: 0 auto;
}

.ridepro-how__grid{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 70px;
  align-items: center;
}

/* Left media */
.ridepro-how__media{
  display: flex;
  justify-content: center;
}

.ridepro-how__phone{
  width: min(620px, 100%);
  height: auto;
  display: block;
}

/* Right content */
.ridepro-how__title{
  margin: 0 0 12px;
  font-size: clamp(28px, 3.4vw, 46px);
  letter-spacing: -0.02em;
  font-weight: 600;
}

.ridepro-how__subtitle{
  margin: 0 0 28px;
  color: var(--rp-muted);
  font-size: 18px;

  max-width: 560px;
}

.ridepro-how__steps{
  display: grid;
  gap: 22px;
}

.ridepro-how__step{
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  align-items: start;
}

.ridepro-how__badge{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--rp-green);
  color: #fff;
  display: inline-grid;
  place-items: center;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  margin-top: 2px;
}

.ridepro-how__stepTitle{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
}

.ridepro-how__stepDesc{
  margin: 0;
  color: var(--rp-muted);
  line-height: 1.7;
  font-size: 15.5px;
}

/* Responsive */
@media (max-width: 980px){
  .ridepro-how__grid{
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .ridepro-how__media{
    order: 1;
  }

  .ridepro-how__content{
    order: 2;
  }
}

/* ===== Ride Pro FAQ (purple layout like the design) ===== */
.rp-faq{
  background: #fff;           /* lavender page background */
  padding: 40px 0;
}

.rp-faq__wrap{
  width: min(1100px, 92%);
  margin: 0 auto;
}

.rp-faq__panel{
  background: #fff;
  border-radius: 14px;
  padding: clamp(18px, 3vw, 28px);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.12);
  display: grid;
  grid-template-columns: 1.05fr 1.2fr;
  gap: 26px;
}

/* LEFT */
.rp-faq__kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #6b7280;
}

.rp-faq__dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: red;          /* purple */
}

.rp-faq__title{
  margin: 10px 0 18px;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: #0f172a;
}

.rp-faq__help{
  margin-top: 22px;
  padding: 18px;
  border-radius: 12px;
  background: #f4f1ff;
  border: 1px solid rgba(124, 58, 237, 0.14);
}

.rp-faq__helpTitle{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}

.rp-faq__helpText{
  margin: 0 0 14px;
  font-size: 13.5px;
  color: #6b7280;
  line-height: 1.6;
  max-width: 320px;
}

.rp-faq__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  background: red;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
}

/* RIGHT accordion */
.rp-acc{
  display: grid;
  gap: 14px;
}

.rp-acc__item{
  background: #f7f7ff;
  border: 1px solid #ecebf3;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.rp-acc__item.is-open{
  background: #fff;
  border-color: rgba(124,58,237,0.22);
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
}

.rp-acc__trigger{
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 16px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
  font-weight: 600;
  color: #0f172a;
  font-size: 13.5px;
}

.rp-acc__chev{
  width: 26px;
  height: 26px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #ecebf3;
  position: relative;
  flex: 0 0 auto;
}

.rp-acc__chev::before{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid #7c3aed;
  border-bottom: 2px solid #7c3aed;
  transform: rotate(45deg);
  transition: transform .18s ease;
}

.rp-acc__item.is-open .rp-acc__chev::before{
  transform: rotate(-135deg);
}

.rp-acc__content{
  padding: 0 16px 16px;
}

.rp-acc__content p{
  margin: 0;
  color: #6b7280;
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 520px;
}

/* Responsive */
@media (max-width: 900px){
  .rp-faq__panel{
    grid-template-columns: 1fr;
  }
}

/* ===== FAQ font sizes to match "How the Ride Pro Driver app works" scale ===== */
.rp-faq{
  --rp-h2: clamp(40px, 4.2vw, 45px); /* big heading like the screenshot */
  --rp-kicker: 13px;
  --rp-q: 18px;      /* accordion question */
  --rp-a: 16px;      /* accordion answer */
  --rp-help-h: 15px; /* help card title */
  --rp-help-p: 14px; /* help card text */
  --rp-btn: 14px;
}

.rp-faq__kicker{ font-size: var(--rp-kicker); }

.rp-faq__title{
  font-size: var(--rp-h2);
  line-height: 1.08;
}

.rp-faq__helpTitle{ font-size: var(--rp-help-h); }

.rp-faq__helpText{
  font-size: var(--rp-help-p);
  line-height: 1.7;
}

.rp-faq__btn{ font-size: var(--rp-btn); }

.rp-acc__trigger{ font-size: var(--rp-q); }

.rp-acc__content p{
  font-size: var(--rp-a);
  line-height: 1.7;
}





 /* SAFETY PAGE */



 /* ===== HERO (inDrive-style look) ===== */
.hero--indrive{
  position: relative;
  min-height: 78vh;
  overflow: hidden;
  background: #111;
}

/* background photo */
.hero--indrive .hero-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.10) 100%),
    url("images/bg-home.png") center/cover no-repeat; /* <-- change image */
  transform: scale(1.02);
}

/* top bar */
.hero--indrive .hero-top{
  position:absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  z-index: 3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}

/* logo */
.hero--indrive .brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  font-weight:900;
  letter-spacing:-.02em;
}
.hero--indrive .brand-badge{
  width:44px;height:44px;
  border-radius:14px;
  background:red;
  display:grid;
  place-items:center;
  color:#0b0b0b;
  font-weight:900;
}
.hero--indrive .brand-text{
  font-size:26px;
}

/* top right pills */
.hero--indrive .hero-top-actions{
  display:flex;
  gap:12px;
}
.hero--indrive .pill-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:48px;
  padding:0 18px;
  border-radius:999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  font-weight:800;
  cursor:pointer;
}
.hero--indrive .flag{
  width:26px;height:18px;
  border-radius:4px;
  background: linear-gradient(#1db954 0 20%, #f7d51d 20% 40%, #d51a1a 40% 60%, #000 60% 80%, #1e40af 80% 100%);
  border:1px solid rgba(0,0,0,.12);
}
.hero--indrive .menu-icon{
  width:18px;height:12px;
  display:grid;
  gap:3px;
}
.hero--indrive .menu-icon::before,
.hero--indrive .menu-icon::after{
  content:"";
  display:block;
  height:2px;
  background:#111;
  border-radius:999px;
}
.hero--indrive .menu-icon span{display:none;} /* just in case */

/* container positioning */
.hero--indrive .hero-content{
  position:relative;
  z-index:2;
  min-height: 78vh;
  display:flex;
  align-items:center;
}

/* copy */
.hero--indrive .hero-copy{
  max-width: 820px;
  padding: 90px 0 90px;
}

/* headline */
.hero--indrive h1{
  margin:0;
  color:#fff;
  font-size: clamp(46px, 6vw, 50px);
  line-height: 1.28;
  letter-spacing: -0.05em;
  font-weight: 900;
  margin-top: 20%;
}

.cho-white{
  color:#fff;
}

/* lime highlight behind one word */
.hero--indrive .hl{
  position:relative;
  display:inline-block;
  color:#0b0b0b;
  z-index:1;
}
.hero--indrive .hl::before{
  content:"";
  position:absolute;
  left:-10px;
  right:-10px;
  bottom: 10%;
  height: 90%;
  background:red;
  z-index:-1;
  border-radius:2px;
 
}

/* bottom left buttons */
.hero--indrive .hero-bottom-actions{
  margin-top: 30%;
  display:flex;
  gap: 18px;
  flex-wrap:wrap;
}

.hero--indrive .lime-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 18px 28px;
  border-radius: 14px;
  background:red;
  color:white;
  font-weight: 900;
  text-decoration:none;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
}

.hero--indrive .lime-btn:hover{
  filter: brightness(.98);
}

/* remove old hero layout pieces if present */
.hero--indrive .stripe-dark,
.hero--indrive .stripe-orange,
.hero--indrive .hero-car,
.hero--indrive .sub,
.hero--indrive .eyebrow,
.hero--indrive .hero-btn,
.hero--indrive .sliderbar{
  display:none !important;
}

/* responsive */
@media (max-width: 720px){
  .hero--indrive .hero-copy{ padding: 120px 0 70px; }
  .hero--indrive .pill-btn{ height:44px; padding:0 14px; }
  .hero--indrive .brand-text{ font-size:22px; }
}


 :root{
  --lime:red;
  --ink:#0b0b0b;
  --bg:#f6f3e6;
  --card:#ffffff;
}

.safety-hero{
  background: var(--bg);
  position: relative;
  overflow: hidden;
  padding: 76px 0 46px;
}

.safety-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
  position: relative;
  z-index: 2;
  text-align: center;
}

.safety-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  font-weight: 800;
  font-size: 18px;
  margin: 26px 0 18px;
}

.safety-title{
  margin: 0;
  font-size: clamp(44px, 6.2vw, 50px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 900;
  color: var(--black);
}

/* bottom white rounded card */
.safety-card{
  margin-top: 28px;
  background: var(--card);
  border-radius: 18px;
  height: 140px;
  box-shadow: 0 18px 40px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.08);
  position: relative;
  overflow: hidden;
}

/* lime paper shapes */
.safety-shape{
  position: absolute;
  background: red;
  z-index: 1;
  filter: drop-shadow(0 6px 0 rgba(0,0,0,.02));
}

.safety-shape.s1{
  width: 580px; height: 560px;
  left: -60px; top: 10px;
  clip-path: polygon(0 40%, 10% 10%, 100% 18%, 98% 92%, 15% 88%);
  border-radius: 18px;
  transform: rotate(-2deg);
}

.safety-shape.s2{
  width: 520px; height: 360px;
  left: 33%; top: 70px;
  clip-path: polygon(12% 10%, 95% 22%, 82% 98%, 6% 86%);
  border-radius: 22px;
  transform: rotate(-16deg);
}

.safety-shape.s3{
  width: 430px; height: 330px;
  right: 8%; top: 110px;
  clip-path: polygon(10% 15%, 96% 6%, 92% 92%, 20% 96%);
  border-radius: 22px;
  transform: rotate(-18deg);
}

.safety-shape.s4{
  width: 360px; height: 300px;
  right: -160px; top: 170px;
  clip-path: polygon(20% 0, 100% 25%, 85% 100%, 0 70%);
  border-radius: 22px;
  transform: rotate(-10deg);
}

/* optional phone hint */
.safety-phone{
  position: absolute;
  right: 26px; top: 22px;
  width: 320px; height: 220px;
  border-radius: 34px;
  background: linear-gradient(#f4f4f4, #e9e9e9);
  border: 10px solid #1a1a1a;
  transform: translateY(25px);
}

.safety-toggle{
  position: absolute;
  right: 18px; top: 16px;
  width: 160px; height: 44px;
  border-radius: 999px;
  background: red;
  border: 2px solid rgba(0,0,0,.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  font-weight: 900;
}

.safety-knob{
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(0,0,0,.12);
}

/* responsive */
@media (max-width: 720px){
  .safety-shape.s1, .safety-shape.s4{ display:none; }
  .safety-phone{ display:none; }
  .safety-hero{ padding: 56px 0 36px; }
  .safety-pill{ font-size: 16px; }
}


   /* =========================
   DRIVER SAFETY TABS (ds-*)
   isolated styles
========================= */


.ds-hero-content{
  position: relative;
  z-index: 2;
  width: 100%;
}


.ds-hero-copy{
  max-width: 760px;
}

.ds-hero-copy h1{
  margin: 0 0 22px;
  font-size: clamp(34px, 4.2vw, 70px);
  line-height: 1.05;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 10px 30px rgba(0,0,0,.45);
  margin-top: 25%;
}

.ds-hl{
  background: #ff0000;
  color: #111;
  padding: .08em .25em;
  border-radius: 8px;
}

.ds-hero-actions{
  display: flex;
  gap: 16px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.ds-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 18px 28px;
  border-radius: 14px;
  background: red;
  color: white;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  margin-top: 15%;
}

.ds-hero{
  position: relative;
  overflow: hidden;
  min-height: 520px; /* adjust */
}

/* background image layer */
.ds-hero-bg{
  position: absolute;
  inset: 0;
  background-image: url("images/driv.jpg"); /* <-- put your image path here */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* optional overlay to make text pop */
.ds-hero-bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}

/* keep your content above background */
.ds-hero-content{
  position: relative;
  z-index: 2;
  width: 100%;
}


.ds-tabs{
  padding: 70px 0;
}

.ds-card{
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  background: #fff;
  border-radius: 28px;
  padding: 56px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  box-shadow: 0 18px 45px rgba(0,0,0,.08);
  overflow: hidden;
}



.ds-card::before{
  left: -120px;
  top: 160px;
  transform: rotate(10deg);
}

.ds-card::after{
  right: -140px;
  top: -120px;
  transform: rotate(-18deg);
}

.ds-left,
.ds-right{
  position: relative;
  z-index: 2;
}

.ds-left{
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.ds-icon{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background:red;
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
  color: white;
}

.ds-title{

  font-size: 40px;
  line-height: 1.02;
  margin: 8px 0 0;
  font-weight: 800;
  color:#0b0b0b;
  margin-top: 15%;
}

.ds-titleWhite{
  color:red;
  text-shadow: 0 2px 0 rgba(0,0,0,.10);
}

.ds-text{
  font-size: 18px;
  line-height: 1.6;
  max-width: 560px;
  color:#151515;
  margin: 10px 0 0;
}

/* tabs row */
.ds-tabbar{
  margin-top: 10%;
  padding-top: 18px;
  border-top: 2px solid rgba(255, 5, 5, 0.477);
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  position: relative;
}

.ds-tab{
  appearance:none;
  border:0;
  background:transparent;
  padding: 0 0 14px;
  text-align:left;
  font-weight: 600;
  font-size: 16px;
  color: rgba(0,0,0,.45);
  cursor:pointer;
  position: relative;
  margin-top: 10%;
}

.ds-tab::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:2px;
  background: rgba(0,0,0,.12);
}

.ds-tab.is-active{
  color:#0b0b0b;
}

/* moving underline */
.ds-underline{
  position:absolute;
  left:0;
  bottom:0;
  height:3px;
  width: 33.33%;
  background:#0b0b0b;
  border-radius: 999px;
  transition: transform .6s ease;
  pointer-events:none;
}

/* phone frame */
.ds-right{
  display:grid;
  place-items:center;
}

.ds-phone{
  width: 420px;
  height: 520px;
  border-radius: 44px;
  background:#e9e9e9;
  border: 12px solid #0b0b0b;
  box-shadow: 0 30px 60px rgba(0,0,0,.18);
  overflow:hidden;
  position: relative;
}

.ds-panel{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  opacity:0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}

.ds-panel.is-active{
  opacity:1;
  transform: translateY(0);
}

.ds-gif{
  width:100%;
  height:100%;
  object-fit: cover;
}

.ds-copy { position: relative; }

.ds-copyPanel{
  transition: opacity .25s ease, transform .25s ease;
  opacity: 0;
  transform: translateY(6px);
}

.ds-copyPanel.is-active{
  opacity: 1;
  transform: translateY(0);
}


/* responsive */
@media (max-width: 980px){
  .ds-card{
    grid-template-columns: 1fr;
    padding: 40px 24px;
  }
  .ds-title{ font-size: 44px; }
  .ds-phone{ width: 100%; max-width: 420px; }
  .ds-tabbar{ grid-template-columns: 1fr; gap: 18px; }
  .ds-underline{ display:none; }
}




    .rt-card__conduct--photo{
  height:180px;
  width:100%;
  padding:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.12) 100%),
    url("images/conduct.png") center/cover no-repeat;
    
}


    .rt-card__fatigue--photo{
  height:180px;
  width:100%;
  padding:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.12) 100%),
    url("images/dizzy.png") center/cover no-repeat;
    
}

  .rt-card__maintain--photo{
  height:180px;
  width:100%;
  padding:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.12) 100%),
    url("images/maintain.png") center/cover no-repeat;
    
}

  .rt-card__profile--photo{
  height:180px;
  width:100%;
  padding:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.12) 100%),
    url("images/profile.png") center/cover no-repeat;
    
}


/* ===== SAFETY TABS (FINAL WORKING LAYOUT) ===== */

.safety-tabs{
  padding: 110px 0 140px;
}

/* the main white card */
.safety-card{
  width: min(1280px, 92vw);
  margin: 0 auto;
  background: #fff;
  border-radius: 26px;
  padding: 56px 56px;

  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 80px;

  align-items: center;
  box-shadow: 0 18px 60px rgba(0,0,0,.08);
  overflow: hidden; /* keeps rounded corners clean */
}

/* LEFT */
.safety-left{
  display: flex;
  align-items: center;
  justify-content: center;
}

.safety-visual{
  width: 100%;
  height: 420px;
  border-radius: 18px;
  background: #f2f2f2;
  position: relative;
  overflow: hidden;
}

/* visual items swap */
.visual{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;

  opacity: 0;
  transform: translateX(-10px) scale(.98);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}

.visual.is-active{
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* RIGHT column: content centered, tabs at bottom */
.safety-right{
  display: flex;
  flex-direction: column;
  height: 420px;          /* IMPORTANT: ensures space for content + tabs */
}

/* content area takes remaining space and centers vertically */
.safety-content{
  flex: 1;
  display: flex;
  align-items: center;
}

/* panels */
.panel{
  width: 100%;
  display: none;
}

.panel.is-active{
  display: block;
}

/* badge */
.badge{
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  background: red;
  color: white;
  font-weight: 900;
}

/* text sizing */
.panel h2{
  margin: 0 0 12px;
  font-size: clamp(34px, 3.2vw, 40px);
  line-height: 1.05;
  font-weight: 900;
  color: #0b0b0b;
}

.panel p{
  margin: 0;
  max-width: 560px;
  font-size: 18px;
  line-height: 1.65;
  color: rgba(0,0,0,.72);
}

/* TAB BAR at bottom */
.tabbar{
  position: relative;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,.12);

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;

  overflow: visible;
}

/* tabs */
.tab{
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;

  padding: 10px 0 16px;
  text-align: left;

  font-size: 14px;
  font-weight: 700;
  color: rgba(0,0,0,.42);

  border-bottom: 2px solid rgba(0,0,0,.12);
  white-space: normal;
}

.tab.is-active{
  color: #0b0b0b;
  border-bottom-color: transparent; /* indicator will show */
}

/* underline indicator */
.indicator{
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 60px;
  background: #0b0b0b;
  transform: translateX(0);
  transition: transform .35s ease, width .35s ease;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 980px){
  .safety-card{
    grid-template-columns: 1fr;
    padding: 34px 22px;
    gap: 26px;
  }

  .safety-visual{
    height: 260px;
  }

  .safety-right{
    height: auto; /* allow content to grow naturally on mobile */
  }

  .safety-content{
    padding: 8px 0 10px;
  }

  .tabbar{
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
}


/* ===== HARD RESET FOR THIS SECTION (fix clipping/overlap) ===== */
.safety-tabs{
  position: relative;
  z-index: 50;
  padding: 120px 0 180px;
  overflow: visible !important;
}

.safety-card{
  position: relative;
  z-index: 51;
  overflow: visible !important;   /* allow right text + tabs to show */
  min-height: 560px;              /* prevents collapse */
}

/* ensure columns don’t shrink weirdly */
.safety-card{
  display: grid !important;
  grid-template-columns: 520px 1fr !important;
  gap: 80px !important;
  align-items: center !important;
}

/* RIGHT: force content and tabbar to be visible */
.safety-right{
  position: relative;
  z-index: 60;
  height: 420px;
  display: flex;
  flex-direction: column;
}

.safety-content{
  flex: 1;
  display: flex;
  align-items: center;
}

.panel, .panel *{
  position: relative;
  z-index: 70;
}

/* TAB BAR visible */
.tabbar{
  position: relative;
  z-index: 80;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
}

/* if anything is setting opacity/visibility */
.tabbar, .tab, .indicator, .panel{
  visibility: visible !important;
  opacity: 1;
}

/* If a parent has overflow hidden, this prevents it from clipping */
body, main, section{
  overflow-x: hidden;
}


/* underline must be positioned */
.tabbar{ position: relative; }

/* moving underline */
.indicator{
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  background: #0b0b0b;
  width: 60px;
  transform: translateX(0);
  transition: transform .35s ease, width .35s ease;
}

/* visuals must stack */
.safety-visual{ position: relative; }
.visual{
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.visual.is-active{
  opacity: 1;
  transform: translateX(0);
}


/* tabbar must be relative so underline can move */
.tabbar{ position: relative; }

/* underline */
.indicator{
  position:absolute;
  left:0;
  bottom:-1px;
  height:2px;
  width:60px;
  background:#0b0b0b;
  transform: translateX(0);
  transition: transform .35s ease, width .35s ease;
}

/* left visuals must stack */
.safety-visual{ position: relative; overflow:hidden; }

.visual{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;     /* makes images fill nicely */
  opacity:0;
  transform: translateX(-10px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events:none;
}

.visual.is-active{
  opacity:1;
  transform: translateX(0);
}

/* ensure tabs are clickable and not covered */
.tabbar{ position: relative; z-index: 20; }
.tab{ position: relative; z-index: 21; pointer-events: auto; cursor: pointer; }
.indicator{ pointer-events: none; z-index: 19; } /* underline can’t steal clicks */




/* ===== rx-tabs (fresh styles) ===== */
.rx-tabs{
  padding: 70px 0;
}

.rx-card{
  max-width: 1200px;
  margin: 0 auto;
  background: #fff;
  border-radius: 28px;
  padding: 60px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 60px;
  box-shadow: 0 18px 50px rgba(0,0,0,.09);
  position: relative;
  overflow: hidden;
}

/* subtle red corners like reference */
.rx-card::before,
.rx-card::after{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  background:#ff1010;
  border-radius: 46px;
  z-index:0;
}
.rx-card::before{ left:-95px; bottom:-95px; transform: rotate(12deg); }
.rx-card::after{ right:-120px; top:-120px; transform: rotate(-18deg); }

.rx-card > *{ position: relative; z-index: 2; }

/* LEFT text */
.rx-title{
  font-family: Poppins, system-ui, sans-serif;
  font-size: clamp(34px, 4vw, 40px);
  line-height: 1.05;
  margin: 0 0 10px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color:#0b0b0b;
  margin-top: 20%;
}

.rx-titleAccent{
  color:#ff1010;
}

.rx-text{
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  max-width: 520px;
  color: rgba(0,0,0,.78);
}

/* copy panels */
.rx-copyItem[hidden]{ display:none; }

/* divider line */
.rx-left{
  display:flex;
  flex-direction: column;
  justify-content: center;
  min-height: 420px;
}
.rx-copy{
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(0,0,0,.12);
  margin-bottom: 22px;
}

/* tabbar */
.rx-tabbar{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 26px;
  align-items: end;
  margin-top: 15%;
}

.rx-tab{
  background: none;
  border: none;
  padding: 18px 0 14px;
  font: 600 15px/1.1 Poppins, system-ui, sans-serif;
  color: rgba(0,0,0,.45);
  text-align: left;
  cursor: pointer;
  position: relative;
}

.rx-tab::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:0;
  height:2px;
  background: rgba(0,0,0,.15);
}

.rx-tab.is-active{
  color:#0b0b0b;
}

/* moving underline */
.rx-underline{
  position:absolute;
  left:0;
  bottom:0;
  height:3px;
  width: 0;
  background:#0b0b0b;
  transform: translateX(0);
  transition: transform 600ms ease, width 600ms ease;
}

/* RIGHT phone area */
.rx-right{
  display:flex;
  align-items: center;
  justify-content: center;
}

.rx-phone{
  width: min(420px, 100%);
  aspect-ratio: 3/4;
  background: #f2f2f2;
  border-radius: 38px;
  box-shadow: inset 0 0 0 10px #0b0b0b;
  position: relative;
  overflow: hidden;
}

.rx-panel{
  position:absolute;
  inset:0;
  opacity:0;
  transition: opacity 250ms ease;
}
.rx-panel.is-active{
  opacity:1;
}

.rx-panel[hidden]{ display:none; }

.rx-media{
  width:100%;
  height:100%;
  object-fit: cover;
}


.ds-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 140px;

  padding: 10px 18px !important;
  border: 1.5px solid #111;
  border-radius: 999px;
  margin-top: -30%;
  top: 0;

  background: #fff;
  color: #111;

  
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2px;

  user-select: none;
  white-space: nowrap;
}



/* ===== Safety Switch (new classes) ===== */
.safeSwitch{
  padding: 40px 0;
}

.safeSwitch__card{
  background:#fff;
  border-radius:24px;
  padding:80px;
  display:flex;
  gap:40px;
  align-items:center;
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
  overflow:hidden;
}

.safeSwitch__media{
  flex: 0 0 42%;
  border-radius:18px;
  background:#f2f2f2;
  min-height:360px;
  position:relative;
  overflow:hidden;
}

.safeSwitch__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform: scale(1.02);
  transition: opacity .35s ease, transform .35s ease;
}

.safeSwitch__img.is-active{
  opacity:1;
  transform: scale(1);
}

.safeSwitch__right{
  flex: 1;
  min-width: 0;
  
}

.safeSwitch__panel{
  display:block;
}

.safeSwitch__badge{
  width:44px;
  height:44px;
  border-radius:14px;
  background:red; /* lime */
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  margin-bottom:14px;
  color: white;
  margin-top: 4%;
}

.safeSwitch__h{
  font-size:40px;
  line-height:1.05;
  margin:0 0 10px;
  font-weight:800;
  letter-spacing:-0.02em;
  margin-top: 3%;
}

.safeSwitch__p{
  margin:0 0 28px;
  max-width: 60ch;
  font-size:16px;
  line-height:1.7;
  color:#444;
}

/* Tabs */
.safeSwitch__tabs{
  position:relative;
  display:flex;
  gap:28px;
  border-top:1px solid #e9e9e9;
  padding-top:18px;
  margin-top: 10%;
}

.safeSwitch__tab{
  background:transparent;
  border:0;
  padding: 10px 0 14px;
  font: inherit;
  cursor:pointer;
  color:#686868a8;
  font-weight:500;
  position:relative;
  min-width: 120px;
  text-align:left;
}

.safeSwitch__tab.is-active{
  color:#111;
}

.safeSwitch__indicator{
  position:absolute;
  bottom:0;
  left:0;
  height:3px;
  width:140px;
  background:#111;
  border-radius:999px;
  transform: translateX(0);
  transition: transform .45s ease, width .45s ease;
}

/* Responsive */
@media (max-width: 980px){
  .safeSwitch__card{
    flex-direction:column;
    align-items:stretch;
  }
  .safeSwitch__media{
    flex: none;
    width:100%;
    min-height:280px;
  }
  .safeSwitch__h{
    font-size:34px;
  }
  .safeSwitch__tabs{
    flex-wrap:wrap;
    gap:18px 24px;
  }
  .safeSwitch__tab{
    min-width: 150px;
  }
}


/* FORCE the hidden attribute to work */
.safeSwitch__panel[hidden]{
  display: none !important;
}

/* make sure only the active panel is shown */
.safeSwitch__panel{
  display: none;
}
.safeSwitch__panel.is-active{
  display: block;
}

/* (optional) same idea for images if needed */
.safeSwitch__img{
  display: none;
}
.safeSwitch__img.is-active{
  display: block;
}





/* CSS */
.brSafe {
  padding: 70px 0;
}

.brSafe__card {
  max-width: 1200px;
  margin: 0 auto;
  background: #fff;
  border-radius: 28px;
  padding: 56px;
  box-shadow: 0 20px 60px rgba(0,0,0,.06);

  display: flex;
  align-items: center;
  gap: 56px;
}

.brSafe__left {
  flex: 0 0 52%;
  min-width: 0;
}

.brSafe__right {
  flex: 0 0 48%;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
}

.brSafe__pill {
  display: inline-block;
  padding: 10px 18px;
  border: 1.5px solid #111;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 80px;
}

.brSafe__copy {
  position: relative;
  min-height: 190px; /* keeps layout stable while switching */
  margin-bottom: 26px;
}

.brSafe__copyItem {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}

.brSafe__copyItem.is-active {
  opacity: 1;
  transform: translateY(0);
  position: absolute;
}

.brSafe__title {
  font-size: 40px;
  line-height: 1.05;
  margin: 0 0 14px;
  font-weight: 800;
  color: #0f172a;
}

.brSafe__accent {
  color: red;
}

.brSafe__text {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: #334155;
  max-width: 560px;
}

/* tabs */
.brSafe__tabbar {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 18px;
  border-top: 1px solid #e5e7eb;
}

.brSafe__tab {
  background: transparent;
  border: 0;
  text-align: left;
  padding: 10px 0 16px;
  font-weight: 700;
  color: #94a3b8;
  cursor: pointer;
}

.brSafe__tab.is-active {
  color: #0f172a;
}

.brSafe__underline {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #0f172a;
  border-radius: 999px;
  transform: translateX(0);
  transition: transform .55s ease, width .55s ease; /* must match MOVE_MS */
}

/* phone */
.brSafe__phone {
  width: 420px;
  max-width: 100%;
  aspect-ratio: 3 / 4;
  border: 10px solid #0b0b0b;
  border-radius: 38px;
  background: #f8fafc;
  overflow: hidden;
  position: relative;
}

.brSafe__panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
  display: grid;
  place-items: center;
  padding: 24px;
}

.brSafe__panel.is-active {
  opacity: 1;
  transform: translateY(0);
}

.brSafe__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
}

/* responsive */
@media (max-width: 980px) {
  .brSafe__card {
    flex-direction: column;
    padding: 28px;
  }
  .brSafe__left, .brSafe__right {
    flex: 1 1 auto;
    width: 100%;
  }
  .brSafe__right {
    justify-content: center;
  }
  .brSafe__title {
    font-size: 40px;
  }
  .brSafe__copy {
    min-height: 210px;
  }
}




/* SUPPORT STEPS SECTION */
.sx-support{
  padding: 40px 0;
  background: #fff;
}

.sx-wrap{
  width: min(1180px, 92%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 18px;
  align-items: stretch;
}

/* left image card */
.sx-photo{
  border-radius: 22px;
  overflow: hidden;
  background: #eee;
  min-height: 380px;
}

.sx-photo img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* right content card */
.sx-steps{
  background: #fff;
  border-radius: 22px;
  padding: 44px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* each step row */
.sx-step{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 22px;
  align-items: start;
}

.sx-step + .sx-step{
  margin-top: 34px;
}

/* green number pill */
.sx-num{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: red; /* lime */
  color: #0b0b0b;
  font-weight: 800;
  font-size: 22px;
  display: grid;
  place-items: center;
  color: white;
}

/* big bold text */
.sx-text{
  margin: 0;
  font-size: clamp(26px, 2.6vw, 25px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0b0b0b;
}

/* responsive */
@media (max-width: 900px){
  .sx-wrap{ grid-template-columns: 1fr; }
  .sx-steps{ padding: 28px; }
  .sx-photo{ min-height: 260px; }
}




/* PASSENGER SAFETY PAGE */

/* PASSENGER SAFETY HERO (like screenshot) */


.ps-hero{
  position:relative;
  height:77vh;
  overflow:hidden;
  background:
    
    url("images/pass.jpg") center/cover no-repeat;
}



.ps-hero-content{
  position: relative;
  z-index: 2;
  width: 100%;
}

.ps-hero-copy{
  max-width: 760px;
}

.ps-hero-copy h1{
  margin: 0 0 22px;
  font-size: clamp(34px, 4.2vw, 70px);
  line-height: 1.05;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 10px 30px rgba(0,0,0,.45);
  margin-top: 25%;
}

.ps-hero-copy .hl{
  background: #ff0000;
  color: #111;
  padding: .08em .25em;
  border-radius: 8px;

}

.ps-hero-bottom-actions{
  display: flex;
  gap: 16px;
  margin-top: 22px;
  flex-wrap: wrap;
}

/* Optional: make your lime-btn look like the home buttons */
.ps-hero .lime-btn{
   display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 18px 28px;
  border-radius: 14px;
  background:red;
  color:white;
  font-weight: 900;
  text-decoration:none;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  margin-top: 15%;
}




.hero--indrive .lime-btn:hover{
  filter: brightness(.98);
}

/* only if you need them */
.ps-hero-content{ position:relative; z-index:2; }
.ps-hero-copy{ max-width: 760px; }
.ps-hero-bottom-actions{ display:flex; gap:16px; margin-top:24px; }


.ps-hero{
  position: relative;
  min-height: 520px;
  border-radius: 0;
  overflow: hidden;
}

/* background image */
.ps-hero__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
}

/* overlay for readability */
.ps-hero__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.35) 55%,
    rgba(0,0,0,.15) 100%
  );
}

/* centered content */
.ps-hero__inner{
  position: relative;
  z-index: 2;
  min-height: 520px;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 64px 20px;
  max-width: 1100px;
  margin: 0 auto;
}

/* pill */
.ps-hero__pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #0b0b0b;
  font-weight: 600;
  font-size: 14px;
  margin: 0 auto 18px;
  border: 1px solid rgba(0,0,0,.08);
  backdrop-filter: blur(6px);
}

/* title */
.ps-hero__title{
  margin: 0 auto 14px;
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(34px, 5vw, 68px);
  max-width: 980px;
}

/* subtitle */
.ps-hero__sub{
  margin: 0 auto;
  color: rgba(255,255,255,.92);
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.45;
  max-width: 780px;
}

/* responsive height */
@media (max-width: 768px){
  .ps-hero,
  .ps-hero__inner{
    min-height: 440px;
  }
}




/* RIDES PAGE*/

  :root{
    --rp-bg:#f3f4f4;
    --rp-text:#131516;
    --rp-muted:#5f6468;
    --rp-red:red;        /* RidePro red */
    --rp-red-hover:#d92a31;
  }

  *{box-sizing:border-box}
  body{margin:0;color:var(--rp-text)}

  .rp-hero{
    min-height: 78vh;
    background: var(--rp-bg);
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 40px 22px 70px;
  }

  .rp-hero-copy{
    text-align:center;
    max-width: 980px;
  }

  .rp-kicker{
    font-weight:800;
    font-size:22px;
    color:#6b6f73;
    margin: 0 0 18px;
  }

  .rp-title{
    margin: 0 0 18px;
    font-weight:900;
    letter-spacing:-.03em;
    font-size: clamp(52px, 6.2vw, 65px);
    line-height: 1.02;
    color: var(--rp-text);
  }

  .rp-sub{
    margin: 0 auto 26px;
    max-width: 860px;
    font-size: 18px;
    line-height: 1.45;
    color: var(--rp-muted);
    font-weight: 550;
    margin-top: 4%;
  }

  .rp-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height: 56px;
    padding: 0 30px;
    border-radius: 12px;
    border: 0;
    background: var(--rp-red);
    color:#fff;
    font-weight:900;
    font-size:20px;
    cursor:pointer;
    box-shadow: 0 6px 14px rgba(0,0,0,.08);
    transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
  }
  .rp-cta:hover{
    background: var(--rp-red-hover);
    box-shadow: 0 10px 22px rgba(0,0,0,.12);
    transform: translateY(-1px);
  }
  .rp-cta:active{transform: translateY(0px)}

  @media (max-width: 720px){
    .rp-title{font-size: clamp(44px, 10vw, 64px)}
    .rp-sub{font-size:16px}
  }


  

  

  .rp-hero{ position: relative; z-index: 1; }

  /* Cover the whole hero */
  .rp-revealImage{
    margin-top: -97vh;
    padding-top: 100vh;
    height: 100vh;
    position: relative;
    z-index: 2;
     scrollbar-width: none;
  }

  /* FULL BLEED: not affected by any parent width */
  .rp-revealImage__sticky{
    position: sticky;
    top: 300px !important;
    height: 80vh;

    width: 100vw;
    margin-left: calc(50% - 50vw);   /* 🔥 key trick */
    margin-right: calc(50% - 50vw);

    overflow: hidden;
    background: white;
 scrollbar-width: none;
  }

  .rp-revealImage__sticky img{
    width: 100%;
    height: 98%;
    object-fit: cover;
    display: block;
  }

 


  /* Hide scrollbar (Firefox) */

  :root{
    --why-bg:#f3f4f4;
    --why-text:#101213;
    --why-muted:#5d6368;
    --why-border:#e3e5e6;
    --why-max: 980px;
  }

  *{box-sizing:border-box}
  body{margin:0;color:var(--why-text)}

  .whySection{
    background: var(--why-bg);
    padding: 90px 20px 70px;
    border-top: 1px solid var(--why-border);
  }

  .whySection__inner{
    max-width: var(--why-max);
    margin: 0 auto;
    text-align: center;
  }

  .whySection__title{
    margin: 0 0 18px;
    font-weight: 900;
    letter-spacing: -0.03em;
    font-size: clamp(44px, 5.2vw, 50px);
    line-height: 1.05;
  }

  .whySection__text{
    margin: 0 auto;
    max-width: 760px;
    color: var(--why-muted);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.6;
  }

  @media (max-width: 640px){
    .whySection{padding:70px 16px 55px}
    .whySection__text{font-size:16px}
  }

  /* ===== Carousel layout ===== */
.rp-ridesCarousel{
  position:relative;
}

.rp-ridesViewport{
  overflow:hidden;               /* hides off-screen cards */
}

.rp-ridesTrack{
  display:flex;
  gap:18px;
  transition:transform .45s ease;
  will-change:transform;
  padding:6px 0;                 /* small padding so shadows don’t get cut */
}

/* Show 3 cards in viewport */
.rp-ridesCard{
  flex:0 0 calc((100% - (18px * 2)) / 3);
  border-radius:18px;
  overflow:hidden;
  min-height:420px;
  display:flex;
  flex-direction:column;
  border:1px solid #ececec;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  background:#fff;
}

/* arrows */
.rp-ridesNav{
  position:absolute;
  top:110%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid #e7e7e7;
  background:red;
  box-shadow:0 10px 22px rgba(0,0,0,.10);
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:28px;
  font-weight:700;
  z-index:5;
  color:#fff;
}

.rp-ridesPrev{ left:90%; }
.rp-ridesNext{ right:-12px; }

.rp-ridesNav:disabled{
  opacity:.45;
  cursor:not-allowed;
}





  .contact-hero {
      position: relative;
      min-height: 55vh;
      background: linear-gradient(rgba(0,0,0,0.68), rgba(0,0,0,0.42)),
                  url('https://images.unsplash.com/photo-1567808291548-fc3ee04dbcf0?auto=format&fit=crop&q=80') center/cover no-repeat;
      color: white;
      display: flex;
      align-items: center;
      text-align: center;
      padding: 110px 18px 140px;
    }

    .hero-content {
      max-width: 900px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }

    .hero-content h1 {
      font-size: clamp(40px, 8vw, 68px);
      font-weight: 900;
      letter-spacing: -0.04em;
      margin: 0 0 16px;
      line-height: 1.05;
    }

    .hero-content p {
      font-size: clamp(18px, 3vw, 22px);
      max-width: 720px;
      margin: 0 auto 32px;
      opacity: 0.95;
      line-height: 1.4;
    }

    .contact-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
      gap: clamp(28px, 5vw, 40px);
      max-width: var(--container, 1180px);
      margin: 0 auto 100px;
      padding: 0 18px;
      position: relative;
      z-index: 10;
    }

    .contact-card {
      background: white;
      border-radius: 16px;
      padding: clamp(32px, 5vw, 48px) 28px;
      box-shadow: 0 12px 36px rgba(0,0,0,0.09);
      text-align: center;
      border: 1px solid var(--gray-2, #e9e9e9);
      transition: transform 0.22s ease, box-shadow 0.22s ease;
    }

    .contact-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 50px rgba(0,0,0,0.12);
    }

    .contact-icon {
      width: 72px;
      height: 72px;
      background: var(--orange, #EC1C24);
      color: white;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 32px;
      margin: 0 auto 28px;
      font-weight: bold;
    }

    .contact-card h2 {
      font-size: 26px;
      font-weight: 800;
      margin: 0 0 16px;
      color: var(--black, #111);
    }

    .contact-card p {
      color: var(--muted, #6f6f6f);
      font-size: 16px;
      line-height: 1.6;
      margin: 0 0 24px;
    }

    .contact-email {
      font-size: 19px;
      font-weight: 700;
      color: var(--orange, #EC1C24);
      text-decoration: none;
    }

    .contact-email:hover {
      text-decoration: underline;
    }

    .hotline {
      font-size: 24px;
      font-weight: 800;
      color: var(--black, #111);
      margin: 16px 0;
    }

    .map-section {
      max-width: var(--container, 1180px);
      margin: 0 auto 100px;
      padding: 0 18px;
    }

    .map-section h2 {
      text-align: center;
      font-size: 28px;
      margin: 0 0 32px;
      font-weight: 800;
      color: var(--black);
    }

    .map-container {
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 12px 40px rgba(0,0,0,0.14);
      border: 1px solid var(--gray-2, #e9e9e9);
      height: 460px;
      background: #f8f8f8;
    }

    .regions {
      text-align: center;
      padding: 80px 18px 120px;
      background: var(--gray-1, #f5f5f5);
    }

    .regions h3 {
      font-size: 26px;
      margin: 0 0 32px;
      font-weight: 800;
    }

    .region-list {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      justify-content: center;
      max-width: 960px;
      margin: 0 auto;
    }

    .region-pill {
      background: white;
      padding: 12px 22px;
      border-radius: 999px;
      font-weight: 600;
      font-size: 15px;
      border: 1px solid var(--gray-2);
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    @media (max-width: 980px) {
      .contact-hero { min-height: 50vh; padding: 100px 18px 120px; }
      .contact-grid { margin-bottom: 80px; }
      .map-container { height: 400px; }
    }

    @media (max-width: 640px) {
      .contact-hero { padding: 80px 16px 100px; }
      .hero-content h1 { font-size: clamp(36px, 10vw, 52px); }
      .contact-grid { gap: 28px; margin-bottom: 60px; }
      .contact-card { padding: 32px 20px; }
      .hotline { font-size: 20px; }
      .map-container { height: 340px; }
      .regions { padding: 60px 16px 80px; }
    }

    body { padding-top: 0; }
    .header-main { position: relative; z-index: 100; }