*,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html,
    body {
      font-family: 'Barlow', sans-serif;
      background: #0a0a0a;
      color: #fff;
      min-height: 100vh;
      overflow-x: hidden;
      /* Prevent ANY horizontal scroll at root level */
      max-width: 100vw;
    }

    /* Custom Premium Scrollbar */
    ::-webkit-scrollbar {
      width: 6px;
    }

    ::-webkit-scrollbar-track {
      background: #0a0a0a;
    }

    ::-webkit-scrollbar-thumb {
      background: #f5b843;
      border-radius: 10px;
    }

    a {
      text-decoration: none;
      color: inherit;
      transition: all 0.3s ease;
    }

    /* ── NAVBAR ── */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      background: rgba(0, 0, 0, 0.95);
      border-bottom: 1px solid rgba(245, 184, 67, 0.15);
      height: 90px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 60px;
      backdrop-filter: blur(12px);
    }

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

    .nav-logo {
      width: 48px;
      height: 48px;
      background: #f5b843;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }

    .nav-brand-name {
      font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
      color: #f5b843;
      font-size: 1.6rem;
      font-weight: 800;
      white-space: nowrap;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      cursor: pointer;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 40px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .nav-links a {
      text-decoration: none;
      color: #ffffff;
      font-size: 0.95rem;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      transition: all 0.3s ease;
      position: relative;
    }

    .nav-links a:hover {
      color: #f5b843;
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 2px;
      background: #f5b843;
      transition: width 0.3s ease;
    }

    .nav-links a:hover::after {
      width: 100%;
    }

    @media (max-width: 1150px) {
      nav {
        padding: 0 30px;
      }

      .nav-links {
        position: static;
        transform: none;
        left: auto;
        margin: 0 auto;
      }
    }

    .btn-book {
      padding: 12px 28px;
      background: #f5b843;
      color: #000;
      font-family: 'Barlow', sans-serif;
      font-weight: 900;
      font-size: 0.85rem;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      box-shadow: 0 4px 15px rgba(245, 184, 67, 0.2);
      transition: all 0.3s ease;
    }

    .btn-book:hover {
      background: #ffffff;
      color: #000;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(245, 184, 67, 0.3);
    }


    /* ── HERO ── */
    .hero {
      position: relative;
      min-height: 100vh;
      padding-top: 64px;
      display: flex;
      align-items: center;
      overflow: hidden;
      /* critical: clips widget overflow */
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      background: #080808;
      z-index: 0;
    }

    .hero-bg::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 45% 55% at 72% 42%, rgba(20, 80, 20, .18) 0%, transparent 70%), radial-gradient(ellipse 35% 40% at 80% 70%, rgba(10, 60, 10, .12) 0%, transparent 65%), radial-gradient(ellipse 50% 60% at 20% 30%, rgba(5, 30, 60, .15) 0%, transparent 70%);
    }

    .hero-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle 3px at 55% 30%, rgba(245, 184, 67, .35) 0%, transparent 100%), radial-gradient(circle 2px at 70% 20%, rgba(245, 184, 67, .25) 0%, transparent 100%), radial-gradient(circle 4px at 62% 55%, rgba(34, 197, 94, .2) 0%, transparent 100%), radial-gradient(circle 3px at 78% 45%, rgba(59, 130, 246, .2) 0%, transparent 100%), radial-gradient(circle 2px at 85% 35%, rgba(245, 184, 67, .2) 0%, transparent 100%), radial-gradient(circle 5px at 90% 60%, rgba(34, 197, 94, .12) 0%, transparent 100%), radial-gradient(circle 2px at 50% 70%, rgba(245, 184, 67, .15) 0%, transparent 100%);
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      padding: 60px 40px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 48px;
      min-height: calc(100vh - 64px);
      box-sizing: border-box;
      /* ensure padding doesn't add width */
    }

    .hero-left {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      border: 1px solid #f5b843;
      padding: 6px 14px;
      border-radius: 3px;
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: #f5b843;
      margin-bottom: 24px;
      width: fit-content;
    }

    .braintree {
      font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
      font-size: 1.5rem;
      font-weight: 900;
      line-height: 0;
      color: white;
      margin-bottom: 20px;
    }

    .hero-headline {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(3rem, 6vw, 5rem);
      font-weight: 900;
      line-height: 1.0;
      color: #3b9df8;
      margin-bottom: 20px;
      margin-left: -12.5rem;
    }

    .hero-headline-br {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(3rem, 6vw, 5rem);
      font-weight: 900;
      line-height: 0.5;
      color: #3b9df8;
      margin-bottom: 0px;
      margin-left: -14rem;
    }

    .hero-sub {
      font-size: 0.95rem;
      color: rgba(255, 255, 255, .6);
      line-height: 1.65;
      max-width: 420px;
    }

    .hero-checks {
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
    }

    .hero-check {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 0.9rem;
      font-weight: 600;
      color: #3b9df8;
    }

    .check-icon {
      color: #f5b843;
    }

    .hero-right {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 0;
    }

    /* ══ WIDGET ══ */
    .widget {
      width: 100%;
      max-width: 480px;
      background: #1e1e1e;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .07);
      /* Ensure widget never stretches past its parent */
      min-width: 0;
      box-sizing: border-box;
    }

    .pages-clip {
      overflow: hidden;
      transition: height 0.35s cubic-bezier(.42, 0, .18, 1);
    }

    .pages {
      display: flex;
      width: 300%;
      align-items: flex-start;
      transition: transform .38s cubic-bezier(.42, 0, .18, 1);
    }

    .pages.slide-1 {
      transform: translateX(0);
    }

    .pages.slide-2 {
      transform: translateX(-33.333%);
    }

    .pages.slide-3 {
      transform: translateX(-66.666%);
    }

    .wpage {
      width: 33.333%;
      flex-shrink: 0;
    }

    /* Step bars */
    .w-top-bar {
      background: #111;
      border-top: 3px solid #1a6fd4;
      padding: 0 16px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .w-step {
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 3px;
    }

    .w-step.amber {
      color: #f5b843;
    }

    .w-step.blue {
      color: #1a6fd4;
    }

    .w-step.dim {
      color: #444;
    }

    .w-step.active-green {
      color: #34c97a;
      border-bottom: 2px solid #34c97a;
    }

    .w-arrow {
      color: #444;
      font-size: 0.8rem;
      font-weight: 700;
    }

    .w-arrow.lit {
      color: #1a6fd4;
    }

    .w-back {
      background: none;
      border: none;
      color: #f5b843;
      font-family: 'Barlow', sans-serif;
      font-size: 0.72rem;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      letter-spacing: .5px;
      padding: 0;
      transition: opacity .15s;
      position: absolute;
      left: 16px;
    }

    .w-back:hover {
      opacity: .7;
    }

    .w-bar-wrap {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
    }

    /* Grey shell */
    .w-shell {
      background: #b0b0b0;
      margin: 13px 12px 12px;
      border-radius: 7px;
      padding: 15px 15px 13px;
    }

    .w-sec {
      font-size: 0.59rem;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #3a3a3a;
      margin-bottom: 10px;
    }

    .w-field-row {
      display: grid;
      grid-template-columns: 46px 1fr;
      align-items: center;
      gap: 9px;
      margin-bottom: 7px;
    }

    .w-lbl {
      font-size: 0.59rem;
      font-weight: 700;
      letter-spacing: 1.8px;
      text-transform: uppercase;
      color: #3a3a3a;
    }

    .w-inp {
      width: 100%;
      padding: 9px 12px;
      background: #fff;
      border: none;
      border-radius: 4px;
      font-family: 'Barlow', sans-serif;
      font-size: 0.82rem;
      color: #222;
      outline: none;
      transition: box-shadow .18s;
    }

    .w-inp:focus {
      box-shadow: 0 0 0 2px #f5b843;
    }

    .w-inp::placeholder {
      color: #bbb;
      font-size: 0.79rem;
    }

    .w-add-stop {
      width: 100%;
      padding: 9px 12px;
      background: #222;
      border: 2px dashed rgba(245, 184, 67, .5);
      border-radius: 4px;
      font-family: 'Barlow', sans-serif;
      font-size: 0.79rem;
      font-weight: 700;
      color: #f5b843;
      cursor: pointer;
      text-align: center;
      transition: background .18s;
    }

    .w-add-stop:hover {
      background: #2e2e2e;
    }

    .w-via-wrap {
      display: none;
      flex-direction: column;
      gap: 7px;
      margin-bottom: 12px;
    }

    .w-via-wrap.show {
      display: flex;
    }

    .w-via-row {
      display: grid;
      grid-template-columns: 46px 1fr 26px;
      align-items: center;
      gap: 9px;
    }

    .w-rm {
      background: none;
      border: none;
      color: #666;
      font-size: 1.2rem;
      cursor: pointer;
      line-height: 1;
    }

    .w-rm:hover {
      color: #d44;
    }

    .w-div {
      height: 1px;
      background: rgba(0, 0, 0, .2);
      margin: 11px 0;
    }

    .w-radio-row {
      display: flex;
      gap: 18px;
      margin-bottom: 7px;
    }

    .w-radio {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.82rem;
      font-weight: 600;
      color: #1a1a1a;
      cursor: pointer;
    }

    .w-radio input {
      accent-color: #1a6fd4;
      width: 14px;
      height: 14px;
      cursor: pointer;
    }

    .w-check {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.82rem;
      font-weight: 600;
      color: #1a1a1a;
      cursor: pointer;
      margin-bottom: 9px;
    }

    .w-check input {
      accent-color: #1a6fd4;
      width: 14px;
      height: 14px;
      cursor: pointer;
    }

    .w-time-pickers {
      display: none;
      grid-template-columns: 1fr 1fr;
      gap: 7px;
      margin-bottom: 9px;
    }

    .w-time-pickers.show {
      display: grid;
    }

    .w-inp-sm {
      width: 100%;
      padding: 8px 10px;
      background: #fff;
      border: none;
      border-radius: 4px;
      font-family: 'Barlow', sans-serif;
      font-size: 0.79rem;
      color: #222;
      outline: none;
      color-scheme: light;
    }

    .w-sel-full {
      width: 100%;
      padding: 9px 28px 9px 11px;
      background: #fff;
      border: none;
      border-radius: 4px;
      font-family: 'Barlow', sans-serif;
      font-size: 0.82rem;
      color: #222;
      outline: none;
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 9px center;
      margin-bottom: 9px;
      display: none;
      /* Tariff is autocalculated */
    }

    .w-bottom {
      display: grid;
      grid-template-columns: 82px 1fr auto;
      align-items: end;
      gap: 9px;
    }

    .w-fg label {
      display: block;
      font-size: 0.57rem;
      font-weight: 700;
      letter-spacing: 1.8px;
      text-transform: uppercase;
      color: #3a3a3a;
      margin-bottom: 4px;
    }

    .w-sel {
      width: 100%;
      padding: 9px 24px 9px 10px;
      background: #fff;
      border: none;
      border-radius: 4px;
      font-family: 'Barlow', sans-serif;
      font-size: 0.82rem;
      color: #222;
      outline: none;
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 8px center;
    }

    .w-quote-btn {
      padding: 9px 14px;
      background: #111;
      color: #f5b843;
      font-family: 'Barlow', sans-serif;
      font-weight: 800;
      font-size: 0.75rem;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
      transition: background .18s, transform .1s;
      height: 38px;
    }

    .w-quote-btn:hover {
      background: #000;
    }

    .w-quote-btn:active {
      transform: scale(.97);
    }

    .w-quote-btn:disabled {
      opacity: .5;
      cursor: not-allowed;
      transform: none;
    }

    .w-spinner {
      display: none;
      width: 13px;
      height: 13px;
      border: 2px solid rgba(245, 184, 67, .3);
      border-top-color: #f5b843;
      border-radius: 50%;
      animation: wspin .65s linear infinite;
    }

    @keyframes wspin {
      to {
        transform: rotate(360deg);
      }
    }

    .w-error {
      display: none;
      background: rgba(180, 0, 0, .14);
      border: 1px solid rgba(248, 113, 113, .4);
      border-radius: 4px;
      padding: 7px 11px;
      font-size: 0.77rem;
      color: #fca5a5;
      margin-top: 9px;
    }

    .w-error.show {
      display: block;
    }

    /* ── Pickup type info tag ── */
    .pickup-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #1a1a1a;
      border: 1px solid rgba(245, 184, 67, .3);
      border-radius: 4px;
      padding: 5px 10px;
      font-size: 0.72rem;
      font-weight: 600;
      color: #f5b843;
      margin-bottom: 9px;
    }

    .pickup-tag .ptag-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #34c97a;
      flex-shrink: 0;
      animation: pulse 1.5s infinite;
    }

    .pickup-tag.later-tag .ptag-dot {
      background: #3b9df8;
      animation: none;
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: .4;
      }
    }

    /* Page 2 result */
    .w-result-bar {
      background: #111;
      border-top: 3px solid #1a6fd4;
      padding: 0 16px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .w-result-shell {
      background: #b0b0b0;
      margin: 13px 12px 12px;
      border-radius: 7px;
      padding: 13px 15px;
      display: flex;
      flex-direction: column;
      gap: 9px;
    }

    .w-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7px;
    }

    .w-stat {
      background: #111;
      border-radius: 5px;
      padding: 9px 11px 8px;
    }

    .w-stat-val {
      font-size: 1rem;
      font-weight: 800;
      color: #fff;
    }

    .w-stat-lbl {
      font-size: 0.56rem;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: #888;
      margin-top: 2px;
    }

    .w-route {
      background: #fff;
      border-radius: 5px;
      padding: 10px 12px;
    }

    .w-rt {
      font-size: 0.56rem;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: #777;
      margin-bottom: 7px;
    }

    .w-rrow {
      display: flex;
      align-items: flex-start;
      gap: 7px;
      padding: 2px 0;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
      margin-top: 4px;
    }

    .dot.p {
      background: #34c97a;
      box-shadow: 0 0 0 3px rgba(52, 201, 122, .2);
    }

    .dot.v {
      background: #6366f1;
      border-radius: 2px;
    }

    .dot.d {
      background: #f5b843;
      box-shadow: 0 0 0 3px rgba(245, 184, 67, .2);
    }

    .w-raddr {
      font-size: 0.77rem;
      color: #222;
      line-height: 1.4;
      word-break: break-word;
    }

    .w-rleg {
      font-size: 0.64rem;
      color: #999;
      margin-left: 15px;
      font-style: italic;
      padding: 1px 0 3px;
    }

    /* Pickup info box on quote page */
    .w-pickup-info {
      background: #1a1a1a;
      border: 1px solid rgba(59, 157, 248, .25);
      border-radius: 5px;
      padding: 9px 12px;
      display: flex;
      align-items: flex-start;
      gap: 9px;
    }

    .wpi-icon {
      font-size: 14px;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .wpi-body {
      flex: 1;
    }

    .wpi-title {
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: #3b9df8;
      margin-bottom: 3px;
    }

    .wpi-detail {
      font-size: 0.75rem;
      color: rgba(255, 255, 255, .7);
      line-height: 1.5;
    }

    .wpi-detail strong {
      color: #fff;
    }

    .w-fare {
      background: #111;
      border: 1px solid rgba(245, 184, 67, .28);
      border-radius: 7px;
      padding:14px;
      text-align: center;
    }

    .w-fare-lbl {
      font-size: 0.57rem;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #f5b843;
      opacity: .85;
      margin-bottom: 20px;
    }

    .w-fare-amt {
      font-size: 2.3rem;
      font-weight: 800;
      color: #fff;
      line-height: 1;
    }

    .w-fare-amt sup {
      font-size: 1rem;
      vertical-align: super;
      line-height: 0;
      color: #f5b843;
    }

    .w-fare-note {
      font-size: 1rem;
      color: white;
      margin-top: 4px;
    }

    .w-bk {
      background: #fff;
      border-radius: 5px;
      padding: 10px 12px;
    }

    .w-bk-title {
      font-size: 0.56rem;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: #777;
      margin-bottom: 7px;
    }

    .w-bk-row {
      display: flex;
      justify-content: space-between;
      font-size: 0.77rem;
      padding: 3px 0;
      color: #444;
    }

    .w-bk-row span:last-child {
      font-weight: 600;
      color: #111;
      white-space: nowrap;
      margin-left: 8px;
    }

    .w-bk-row.tot {
      border-top: 1px solid #e0e0e0;
      margin-top: 6px;
      padding-top: 8px;
      font-weight: 700;
      font-size: 0.82rem;
      color: #111;
    }

    .w-bk-sub {
      font-size: 0.62rem;
      color: #aaa;
      font-style: italic;
      margin-top: 2px;
    }

    .w-proceed-btn {
      width: 100%;
      padding: 12px;
      background: #f5b843;
      color: #1a1a1a;
      font-family: 'Barlow', sans-serif;
      font-weight: 800;
      font-size: 0.85rem;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background .18s, transform .1s;
    }

    .w-proceed-btn:hover {
      background: #e8a82a;
    }

    .w-proceed-btn:active {
      transform: scale(.98);
    }

    /* Page 3 booking */
    .w-booking-bar {
      background: #111;
      border-bottom: 3px solid #34c97a;
      padding: 0 16px;
      height: 50px;
      display: flex;
      align-items: center;
    }

    .w-booking-shell {
      background: #b0b0b0;
      margin: 13px 12px 12px;
      border-radius: 7px;
      padding: 15px 15px 13px;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .booking-summary {
      background: #111;
      border-radius: 5px;
      padding: 10px 12px;
      margin-bottom: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .bs-route {
      font-size: 0.72rem;
      color: rgba(255, 255, 255, .7);
      line-height: 1.5;
      flex: 1;
    }

    .bs-route strong {
      color: #fff;
      font-size: 0.77rem;
    }

    .bs-route .bs-pickup-when {
      font-size: 0.68rem;
      color: #3b9df8;
      margin-top: 2px;
    }

    .bs-fare {
      text-align: right;
      flex-shrink: 0;
      margin-left: 12px;
    }

    .bs-fare-amt {
      font-size: 1.4rem;
      font-weight: 800;
      color: #f5b843;
      line-height: 1;
    }

    .bs-fare-amt sup {
      font-size: 0.65rem;
      vertical-align: super;
      color: #f5b843;
    }

    .bs-fare-lbl {
      font-size: 0.56rem;
      color: #888;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-top: 2px;
    }

    .w-form-sec {
      font-size: 0.59rem;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #3a3a3a;
      margin-bottom: 9px;
      margin-top: 3px;
    }

    .w-form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 8px;
    }

    .w-form-grid.full {
      grid-template-columns: 1fr;
    }

    .w-fgroup {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .w-fgroup label {
      font-size: 0.57rem;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: #3a3a3a;
    }

    .w-finp {
      width: 100%;
      padding: 9px 11px;
      background: #fff;
      border: 2px solid transparent;
      border-radius: 4px;
      font-family: 'Barlow', sans-serif;
      font-size: 0.82rem;
      color: #222;
      outline: none;
      transition: border-color .18s;
    }

    .w-finp:focus {
      border-color: #f5b843;
    }

    .w-finp::placeholder {
      color: #bbb;
    }

    .w-finp.invalid {
      border-color: #f87171;
    }

    .w-ftextarea {
      width: 100%;
      padding: 9px 11px;
      background: #fff;
      border: 2px solid transparent;
      border-radius: 4px;
      font-family: 'Barlow', sans-serif;
      font-size: 0.82rem;
      color: #222;
      outline: none;
      resize: vertical;
      min-height: 62px;
      transition: border-color .18s;
    }

    .w-ftextarea:focus {
      border-color: #f5b843;
    }

    .w-ftextarea::placeholder {
      color: #bbb;
    }

    .w-form-div {
      height: 1px;
      background: rgba(0, 0, 0, .2);
      margin: 11px 0;
    }

    .w-submit-btn {
      width: 100%;
      padding: 12px;
      background: #34c97a;
      color: #062e18;
      font-family: 'Barlow', sans-serif;
      font-weight: 800;
      font-size: 0.87rem;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background .18s, transform .1s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 10px;
    }

    .w-submit-btn:hover {
      background: #27b568;
    }

    .w-submit-btn:active {
      transform: scale(.98);
    }

    .w-submit-btn:disabled {
      opacity: .5;
      cursor: not-allowed;
      transform: none;
    }

    .w-submit-spinner {
      display: none;
      width: 14px;
      height: 14px;
      border: 2px solid rgba(6, 46, 24, .3);
      border-top-color: #062e18;
      border-radius: 50%;
      animation: wspin .65s linear infinite;
    }

    .w-form-error {
      display: none;
      background: rgba(180, 0, 0, .14);
      border: 1px solid rgba(248, 113, 113, .4);
      border-radius: 4px;
      padding: 7px 11px;
      font-size: 0.77rem;
      color: #fca5a5;
      margin-top: 8px;
    }

    .w-form-error.show {
      display: block;
    }

    /* Confirmation */
    .w-confirm {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 36px 20px 30px;
      gap: 14px;
    }

    .w-confirm.show {
      display: flex;
    }

    .w-confirm-icon {
      width: 62px;
      height: 62px;
      background: #34c97a;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      flex-shrink: 0;
    }

    .w-confirm-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.35rem;
      font-weight: 900;
      color: #34c97a;
      letter-spacing: 0.5px;
    }

    .w-confirm-msg {
      font-size: 1rem;
      font-weight: bold;
      color: white;
      line-height: 1.6;
      max-width: 320px;
    }

    .w-confirm-ref {
      font-size: 0.72rem;
      color: #888;
    }

    .w-confirm-ref strong {
      color: #f5b843;
    }

    .w-new-booking-btn {
      margin-top: 6px;
      padding: 10px 22px;
      background: #1e1e1e;
      border: 1px solid rgba(245, 184, 67, .35);
      color: #f5b843;
      font-family: 'Barlow', sans-serif;
      font-weight: 700;
      font-size: 0.78rem;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      border-radius: 4px;
      cursor: pointer;
      transition: background .18s;
    }

    .w-new-booking-btn:hover {
      background: #2e2e2e;
    }

    /* ══════════════════════════════════
       HAMBURGER MENU
    ══════════════════════════════════ */
    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 6px;
      margin-left: auto;
      z-index: 250;
      /* Ensure it stays above everything */
      flex-shrink: 0;
    }

    .hamburger span {
      display: block;
      width: 24px;
      height: 2px;
      background: #f5b843;
      border-radius: 2px;
      transition: transform .3s, opacity .3s;
    }

    .hamburger.open span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }

    .hamburger.open span:nth-child(2) {
      opacity: 0;
    }

    .hamburger.open span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    .mobile-menu {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.98);
      z-index: 300;
      /* Higher than nav and hamburger */
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 32px;
      padding: 80px 24px 40px;
      animation: fadeIn .22s ease;
    }

    .mobile-menu.open {
      display: flex !important;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(-8px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .mobile-menu a {
      text-decoration: none;
      color: #ffffff;
      font-size: 1.2rem;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      transition: all 0.3s ease;
      padding: 12px 0;
      border-bottom: 1px solid rgba(245, 184, 67, 0.1);
      width: 100%;
      text-align: center;
    }

    .mobile-menu a:hover {
      color: #f5b843;
      background: rgba(245, 184, 67, 0.05);
    }

    .mobile-menu .m-btn-book {
      margin-top: 20px;
      padding: 16px 36px;
      background: #f5b843;
      color: #000;
      font-family: 'Barlow', sans-serif;
      font-weight: 900;
      font-size: 1rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      width: 100%;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }

    .mobile-menu .m-btn-close {
      position: absolute;
      top: 18px;
      right: 20px;
      background: none;
      border: none;
      color: #888;
      font-size: 1.6rem;
      cursor: pointer;
      padding: 6px;
    }

    .mobile-logo {
      width: 200px;
      height: 200px;
      margin-bottom: 100px;
    }


    /* ══════════════════════════════════
       SCROLLABLE WIDGET SHELLS
    ══════════════════════════════════ */
    .w-shell,
    .w-result-shell,
    .w-booking-shell {
      max-height: calc(100dvh - 64px - 80px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: rgba(245, 184, 67, .3) transparent;
    }

    .w-shell::-webkit-scrollbar,
    .w-result-shell::-webkit-scrollbar,
    .w-booking-shell::-webkit-scrollbar {
      width: 4px;
    }

    .w-shell::-webkit-scrollbar-thumb,
    .w-result-shell::-webkit-scrollbar-thumb,
    .w-booking-shell::-webkit-scrollbar-thumb {
      background: rgba(245, 184, 67, .3);
      border-radius: 4px;
    }

    /* ══════════════════════════════════
       LARGE DESKTOP (≥1440px)
    ══════════════════════════════════ */
    @media (min-width: 1440px) {
      .hero-inner {
        max-width: 1440px;
        gap: 80px;
      }

      .braintree {
        margin-left: -33.5rem;
      }

      .hero-headline {
        font-size: 5.5rem;
        margin-left: -14rem;

      }

      .hero-headline-br {
        margin-left: -17.6rem;

      }


      .widget {
        max-width: 520px;
      }
    }

    /* ══════════════════════════════════
       LARGE DESKTOP (≥1440px)
    ══════════════════════════════════ */
    @media (max-width: 1439px) {


      .braintree {
        margin-left: -29.5rem;
      }



    }


    /* ══════════════════════════════════
       LARGE DESKTOP (≥1440px)
    ══════════════════════════════════ */
    @media (max-width: 1310px) {


      .braintree {
        margin-left: -25rem;
      }



    }

    @media (max-width: 1024px) {
      .hero-inner {
        max-width: 1440px;
        gap: 80px;
      }

      .braintree {
        margin-left: -33.5rem;
      }

      .hero-headline {
        font-size: 5rem;
        margin-left: -13.5rem;

      }

      .hero-headline-br {
        margin-left: -13.5rem;
        font-size: 3.5rem;
      }


      .widget {
        max-width: 520px;
      }

    }

    /* ══════════════════════════════════
       TABLETS (≤1024px)
    ══════════════════════════════════ */
    @media (max-width: 1024px) {
      nav {
        padding: 0 24px;
        gap: 20px;
      }

      .hero-inner {
        gap: 36px;
        padding: 50px 32px;
      }

      .hero-headline {
        font-size: clamp(2.6rem, 5vw, 4rem);
      }

      .braintree {
        margin-left: -22rem;
      }

      .hero-headline-br {
        font-size: clamp(2rem, 9vw, 3.2rem);
        align-items: center;
        margin-left: -14rem;
      }
    }

    /* ══════════════════════════════════
       TABLETS (≤960px)
    ══════════════════════════════════ */
    @media (max-width: 960px) {
      nav {
        padding: 0 24px;
        gap: 20px;
      }

      .hero-inner {
        gap: 36px;
        padding: 50px 32px;
      }

      .hero-headline {
        font-size: clamp(2.6rem, 5vw, 4rem);
      }

      .braintree {
        margin-left: -22rem;
      }

      .hero-headline-br {
        font-size: clamp(2rem, 9vw, 3.2rem);
        align-items: center;
        margin-left: -14rem;
      }
    }

    /* ══════════════════════════════════
       TABLETS (≤960px)
    ══════════════════════════════════ */
    @media (max-width: 960px) {

      .braintree {
        margin-left: -20.5rem;
      }

    }

    /* ══════════════════════════════════
       TABLETS SQUEEZE (900px - 1180px)
       Fix overlapping steps when widget is constrained in 2-column layout
    ══════════════════════════════════ */
    @media (max-width: 1180px) and (min-width: 900px) {
      .w-bar-wrap {
        justify-content: flex-end;
      }
      .w-back {
        left: 5px;
      }
    }


    /* ══════════════════════════════════
       MOBILE / TABLET HAMBURGER (≤900px)
    ══════════════════════════════════ */
    @media (max-width: 900px) {
      .hamburger {
        display: flex !important;
      }

      .nav-links {
        display: none;
      }


      nav {
        padding: 0 20px;
        gap: 12px;
      }

      .hero-inner {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 36px 16px 40px;
        align-items: flex-start;
        min-height: calc(100dvh - 64px);
      }

      .hero-right {
        align-items: stretch;
      }

      .widget {
        max-width: 100%;
      }

      .braintree {
        margin-right: -29rem;
      }

      .hero-headline {
        font-size: clamp(2.4rem, 8vw, 3.8rem);
        margin-left: -5rem;
        align-items: center;
      }

      .hero-headline-br {
        font-size: clamp(2rem, 9vw, 3.2rem);
        align-items: center;
        margin-left: -5rem;
      }

      .braintree {
        margin-left: -33.5rem;
      }

      .hero-sub {
        max-width: 100%;
      }

      /* Step bar: reduce spacing to prevent overflow */
      .w-step {
        font-size: 0.64rem;
        letter-spacing: 1px;
        padding: 4px 8px;
      }

      .w-arrow {
        font-size: 0.75rem;
      }

      .w-top-bar {
        gap: 4px;
        padding: 0 10px;
      }

      .w-result-bar,
      .w-booking-bar {
        padding: 0 10px;
      }

      /* Bottom widget row: stack pax/luggage on tablet */
      .w-bottom {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      .w-quote-btn {
        grid-column: 1 / -1;
        justify-content: center;
        height: 44px;
        font-size: 0.82rem;
      }

      .w-form-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ══════════════════════════════════
       LARGE PHONES (≤768px)
    ══════════════════════════════════ */
    @media (max-width: 768px) {
      nav {
        height: 58px;
      }

      .hero {
        padding-top: 58px;
      }


      .hero-badge {
        font-size: 0.6rem;
        padding: 5px 11px;
      }

      .braintree {
        margin-right: -35rem;
      }

      .hero-headline {
        font-size: clamp(2rem, 9vw, 3.2rem);
        align-items: center;
        margin-left: 1rem;
      }

      .hero-headline-br {
        font-size: clamp(2rem, 9vw, 3.2rem);
        align-items: center;
        margin-left: 1rem;
      }

      .braintree {
        margin-left: -33.5rem;
      }

      .hero-sub {
        font-size: 0.88rem;
        max-width: 100%;
      }

      .hero-check {
        font-size: 0.83rem;
      }

      .hero-checks {
        gap: 12px;
      }

      .widget {
        border-radius: 10px;
      }

      .w-shell,
      .w-result-shell,
      .w-booking-shell {
        margin: 8px;
        padding: 12px 12px 11px;
      }

      .w-inp,
      .w-finp,
      .w-sel,
      .w-sel-full,
      .w-inp-sm {
        font-size: 0.88rem;
      }

      .w-quote-btn {
        height: 46px;
      }

      .w-stat-val {
        font-size: 0.9rem;
      }

      .booking-summary {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
      }

      .bs-fare {
        text-align: left;
        margin-left: 0;
      }

      .bs-fare-amt {
        font-size: 1.2rem;
      }

      /* Stack pax/luggage/button on 768px */
      .w-bottom {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .w-quote-btn {
        grid-column: 1;
        width: 100%;
        justify-content: center;
        height: 46px;
      }
    }

    /* ══════════════════════════════════
       SMALL PHONES (≤480px)
    ══════════════════════════════════ */
    @media (max-width: 480px) {
      .nav-logo {
        width: 32px;
        height: 32px;
        font-size: 15px;
      }

      .nav-brand-name {
        font-size: 1rem;
        letter-spacing: 1px;
      }

      .btn-book {
        padding: 7px 12px;
        font-size: 0.72rem;
        letter-spacing: 1px;
      }

      .hero-inner {
        padding: 22px 12px 30px;
      }

      .hero-headline {
        font-size: clamp(1.9rem, 10vw, 2.8rem);
      }

      .braintree {
        margin-left: -33.5rem;
      }

      .hero-sub {
        font-size: 0.85rem;
      }

      .hero-checks {
        gap: 10px;
      }

      .hero-check {
        font-size: 0.82rem;
      }

      .w-shell,
      .w-result-shell,
      .w-booking-shell {
        margin: 8px;
        padding: 12px 10px 11px;
      }

      .w-field-row {
        grid-template-columns: 38px 1fr;
        gap: 7px;
      }

      .w-via-row {
        grid-template-columns: 38px 1fr 22px;
        gap: 7px;
      }

      .w-lbl {
        font-size: 0.54rem;
      }

      .w-bottom {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .w-quote-btn {
        grid-column: 1;
        width: 100%;
        justify-content: center;
        height: 48px;
      }

      .w-step {
        font-size: 0.6rem;
        letter-spacing: 1.2px;
        padding: 4px 6px;
      }

      .w-back {
        font-size: 0.65rem;
      }

      .pickup-tag {
        font-size: 0.67rem;
        padding: 5px 8px;
      }

      .w-fare-amt {
        font-size: 2rem;
      }

      .w-proceed-btn,
      .w-submit-btn {
        padding: 13px;
        font-size: 0.82rem;
      }

      .w-form-grid {
        grid-template-columns: 1fr;
      }

      .w-finp,
      .w-ftextarea {
        font-size: 0.88rem;
        padding: 10px 11px;
      }

      /* Touch-friendly 44px minimum tap targets */
      .w-inp,
      .w-finp,
      .w-sel,
      .w-sel-full,
      .w-inp-sm,
      .w-quote-btn,
      .w-proceed-btn,
      .w-submit-btn,
      .w-add-stop,
      .w-back,
      .w-rm {
        min-height: 44px;
      }

      .w-radio input,
      .w-check input {
        width: 18px;
        height: 18px;
      }

      .w-bar-wrap {
        justify-content: flex-end;
      }
      .w-back {
        left: 5px;
      }
    }

    /* ══════════════════════════════════
       VERY SMALL PHONES (≤360px)
    ══════════════════════════════════ */
    @media (max-width: 360px) {
      .hero-headline {
        font-size: 1.85rem;
      }

      .w-step {
        font-size: 0.54rem;
        padding: 3px 5px;
      }

      .w-arrow {
        font-size: 0.68rem;
      }

      .braintree {
        margin-left: -33.5rem;
      }

      .w-shell,
      .w-result-shell,
      .w-booking-shell {
        margin: 6px;
        padding: 10px 9px;
      }

      .btn-book {
        display: none;
      }
    }

    /* ══════════════════════════════════
       LANDSCAPE PHONES
    ══════════════════════════════════ */
    @media (max-height: 500px) and (orientation: landscape) {
      .hero {
        min-height: auto;
        padding-bottom: 28px;
      }

      .hero-inner {
        min-height: auto;
        padding-top: 66px;
        grid-template-columns: 1fr;
        justify-items: center;
      }

      .hero-left {
        display: none;
      }

      .widget {
        max-width: 400px;
      }

      .braintree {
        margin-left: -33.5rem;
      }

      .w-shell,
      .w-result-shell,
      .w-booking-shell {
        max-height: calc(100dvh - 100px);
      }
    }

    .pac-container {
      z-index: 9999 !important;
    }

            /* CSS Variables for Colors */
        :root {
            --primary-color: #137fec;
            --background-light: #f6f7f8;
            --background-dark: #101922;
            --text-dark: #111418;
            --text-light: #ffffff;
            --text-muted: #617589;
            --border-light: rgba(209, 213, 219, 0.5);
            --border-dark: rgba(55, 65, 81, 0.5);
            --gray-100: #f3f4f6;
            --gray-200: #e5e7eb;
            --gray-300: #d1d5db;
            --gray-400: #9ca3af;
            --gray-500: #6b7280;
            --gray-700: #374151;
            --gray-800: #1f2937;
            --gray-900: #111827;
        }

/* How It Works Section */
        .how-it-works-section {
            min-height: 60vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 50px;
            background: #0a1628;
            padding: 40px 20px;
            cursor: context-menu;
        }

        .steps-wrapper {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 167px;
        }

        .container {
            display: flex;
            flex-direction: column;
            gap: 20px;
            align-items: center;
            justify-content: center;
            font-family: "Varela Round", sans-serif;
            line-height: 1.5em;
        }

        .item {
            --color: #eb904b;
            width: 185px;
            background-color: var(--color);
            border-radius: 10px;
            padding: 10px 5px;
            box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
                rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
            position: relative;
            cursor: pointer;
        }

        .item::after {
            content: "";
            position: absolute;
            top: 8px;
            left: 0;
            z-index: 2;
            height: 80%;
            box-sizing: border-box;
            border-style: solid;
            border-color: transparent transparent transparent var(--color);
            border-width: 40px 40px 40px 40px;
            filter: drop-shadow(5px 0 4px rgba(0, 0, 0, 0.58));
            transition: filter .5s;
        }

        .container:nth-child(2) .item {
            --color: #813085;
        }

        .container:nth-child(3) .item {
            --color: #119630;
        }

        .layer {
            background-color: #f2f2f2;
            border: 1px solid #fff;
            border-radius: inherit;
            padding: 20px;
            box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px,
                rgba(0, 0, 0, 0.07) 0px 2px 4px,
                rgba(0, 0, 0, 0.07) 0px 4px 8px,
                rgba(0, 0, 0, 0.07) 0px 8px 16px,
                rgba(0, 0, 0, 0.07) 0px 16px 32px,
                rgba(0, 0, 0, 0.07) 0px 32px 64px;
            position: relative;
            left: 10px;
            transition: left 1s;
        }

        .service-icon {
            font-size: 2.5rem;
            color: var(--gold);
            margin-bottom: 1.5rem;
           
        }

        h1 {
            color: #fff;
            font-family: "Varela Round", sans-serif;
            font-size: 36px;
            text-align: center;
            margin: 0;
            cursor: context-menu;
        }

        h3 {
            font-weight: 700;
            text-align: center;
            color: var(--color);
            margin: 0;
            font-size: 18px;
            cursor: context-menu;
        }

        .h41 {
            color: #eb904b;
            text-align: center;
            font-size: 16px;
            font-weight: 700;
            margin: 0;
            padding: 0;
            cursor: context-menu;
        }

        .h42 {
            color: #813085;
            text-align: center;
            font-size: 16px;
            font-weight: 700;
            margin: 0;
            padding: 0;
            cursor: context-menu;
        }

        .h43 {
            color: #119630;
            text-align: center;
            font-size: 16px;
            font-weight: 700;
            margin: 0;
            padding: 0;
            cursor: context-menu;
        }

        p {
            color: #555;
            font-size: 14px;
            margin: 10px 0;
            cursor: context-menu;
        }

        span .material-symbols-outlined {
            width: 40px;
            height: 40px;
            color: #fff;
            background-color: var(--color);
            border-radius: 50%;
            display: grid;
            place-content: center;
            box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px,
                rgba(0, 0, 0, 0.07) 0px 2px 4px,
                rgba(0, 0, 0, 0.07) 0px 4px 8px,
                rgba(0, 0, 0, 0.07) 0px 8px 16px,
                rgba(0, 0, 0, 0.07) 0px 8px 16px,
                rgba(0, 0, 0, 0.07) 0px 32px 64px;
            font-size: 18px;
            position: absolute;
            right: 5px;
            bottom: 5px;
            cursor: context-menu;
        }

        .item:hover::after {
            filter: drop-shadow(5px 0 4px rgba(0, 0, 0, 0.1));
        }

        .item:hover .layer {
            left: 50px;
        }

        /* Contact & About Section */
        .contact-about-section {
            position: relative;
            width: 100%;
            min-height: 100vh;
            padding: 5rem 1rem;
            cursor: context-menu;
            overflow: visible;
        }

        .contact-about-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 120%;
            object-fit: cover;
            z-index: 1;
        }

        .contact-about-container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
            align-items: stretch; /* Ensure both boxes match height if possible */
            position: relative;
            z-index: 2;
        }

        /* Contact Box */
        .contact-box {
            z-index: 300;
            flex: 1;
            min-width: 300px;
            background: rgba(255, 255, 255, 0.95);
            justify-content: center;
            padding: 1.5rem 1rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            transition: all 0.5s ease;
            position: relative;
            top: -5px;
            border: 4px solid transparent;
        }

        .contact-title {
            color: #000000;
            font-family: 'Protest Strike', sans-serif;
            font-size: clamp(1.5rem, 3.5vw, 2.5rem);
            font-weight: bold;
            margin-bottom: 1.25rem;
            text-align: center;
        }

        .contact-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        /* Enhanced Contact Item with Hover Effects */
        .contact-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 10px;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            overflow: visible;
        }

        /* Smooth sliding animation on hover */
        .contact-item:hover {
            background: #FCCF04;
            transform: translateX(12px);
        }

        /* Background slide effect */
        .contact-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 10%;
            height: 100%;
            background: linear-gradient(90deg, rgba(6, 104, 202, 0.1), transparent);
            transition: left 0.5s ease;
            z-index: 1;
        }

        .contact-item:hover::before {
            display: none;
        }

        /* Icon Wrapper with Hover Effects */
        .contact-icon-wrapper {
            position: relative;
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.3s ease;
        }


        /* Lift icon up on hover */
        .contact-item:hover .contact-icon-wrapper {
            transform: translateY(-5px);
            filter: drop-shadow(0 10px 15px rgba(228, 0, 0, 0.3));
        }

        /* Tooltip */
        .contact-icon-wrapper::after {
            content: attr(data-tooltip);
            position: absolute;
            top: -55px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255, 215, 0, 0.95);
            color: #1a1a1a;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s ease;
            text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            z-index: 1000;
        }

        /* Tooltip arrow */
        .contact-icon-wrapper::before {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-top: 8px solid rgba(255, 215, 0, 0.95);
            opacity: 0;
            transition: all 0.3s ease;
            z-index: 1000;
        }

        /* Show tooltip on hover */
        .contact-item:hover .contact-icon-wrapper::after {
            opacity: 1;
            top: -40px;

        }

        .whatsapp::after {
            content: attr(data-tooltip);
            position: absolute;
            top: -55px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(to bottom, #25D366, #25D366, yellow);
            color: #000000;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s ease;
            text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            z-index: 4000;
        }


        .facebook::after {
            content: attr(data-tooltip);
            position: absolute;
            top: -55px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(to bottom, #1DA1F2, #1DA1F2, yellow);
            color: #000000;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s ease;
            text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            z-index: 1000;
        }

        .email::after {
            content: attr(data-tooltip);
            position: absolute;
            top: -55px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(to bottom, #f3953d, #f1b983, yellow);
            color: #000000;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s ease;
            text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            z-index: 1000;
        }

        .phone::after {
            content: attr(data-tooltip);
            position: absolute;
            top: -55px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(to bottom, #f3953d, #f1b983, yellow);
            color: #000000;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s ease;
            text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            z-index: 1000;
        }

        .clock::after {
            content: attr(data-tooltip);
            position: absolute;
            top: -55px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(to bottom, #f3953d, #f1b983, yellow);
            color: #000000;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s ease;
            text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            z-index: 1000;
        }

        .contact-item:hover .contact-icon-wrapper::before {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        /* Icon styling */
        .contact-icon-wrapper .icon-circle {
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.3s ease;
        }

        .contact-icon-wrapper .icon-circle i {
            font-size: 24px;
            color: transparent;
        }

        /* WhatsApp styling */
        .contact-icon-wrapper.whatsapp .icon-circle {
            background: transparent;
        }

        .contact-item:hover .whatsapp .icon-circle {
            background: transparent;
        }

        /* Facebook styling */
        .contact-icon-wrapper.facebook .icon-circle {
            background: transparent;
        }

        .contact-item:hover .facebook .icon-circle {
            background: transparent;
        }

        /* Email styling */
        .contact-icon-wrapper.email .icon-circle {
            background: transparent;
        }

        .contact-item:hover .email .icon-circle {
            background: white;
            border-radius: 10%;
            padding: 2px;
        }

        /* Phone styling */
        .contact-icon-wrapper.phone .icon-circle {
            background: rgb(255, 255, 255);
        }

        .contact-item:hover .phone .icon-circle {
            background: white;
            border-radius: 30%;
            padding: 2px;
        }

        /* Clock/Quick Response styling */
        .contact-icon-wrapper.clock .icon-circle {
            background: rgb(255, 255, 255);
        }

        .contact-item:hover .clock .icon-circle {
            background: white;
            border-radius: 50%;
        }

        .contact-link {
            color: #000000;
            font-family: 'Rubik', sans-serif;
            font-size: clamp(1rem, 1.8vw, 1.3rem);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .contact-link:hover {
            color: #3474ec;
            font-weight: bold;
        }

        .backcar {
            position: absolute;
            bottom: -0.7%;
            right: -0.3%;
            z-index: 4;
            width: clamp(150px, 29vw, 410px);
        }

        .hero-car-container {
            position: absolute;
            bottom: 0%;
            right: 10%;
            z-index: 5;
            width: clamp(100px, 20vw, 400px);
        }

        .hero-car {
            width: 100%;
            height: auto;
            filter: drop-shadow(0 10px 30px rgba(252, 207, 4, 0.4));
            animation: carFloat 3s ease-in-out infinite;
        }

        @keyframes carFloat {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-7px);
            }
        }

        /* About Box */
        .about-box {
            flex: 1;
            min-width: 300px;
            background: #000000;
            border-radius: clamp(20px, 5vw, 40px);
            padding: 2.5rem 1.5rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            position: relative;
            /* Removed the top: 200px that was breaking visibility */
            margin-top: 0;
            transition: all 0.5s ease;
            border: 4px solid transparent;
            height: 100%;
        }

        .about-box:target {
            border: 4px solid #043efc;
            box-shadow: 0 0 40px rgba(7, 31, 83, 0.9), 0 10px 30px rgba(0, 0, 0, 0.4);
            cursor: context-menu;
        }

        .about-title {
            color: #FCCF04;
            font-family: 'Protest Strike', sans-serif;
            font-size: clamp(1.8rem, 3.5vw, 2.5rem);
            font-weight: bold;
            margin-bottom: 1.5rem;
            text-align: center;
            cursor: context-menu;
        }

        .about-text {
            color: #ffffff;
            font-family: 'Jaldi', sans-serif;
            font-size: clamp(1rem, 2vw, 1.2rem);
            line-height: 1.8;
            margin-bottom: 0.2rem;
            cursor: context-menu;
        }

        /* Footer */
        .footer {
            border-top: 3px solid rgb(255, 208, 0);
            margin-top: 0rem;
            position: relative;
            z-index: 10;
            cursor: context-menu;
            background:white;
        }

        .footer-content {
            padding: 1.5rem 1rem 1rem;
            max-width: 1280px;
            margin: 0 auto;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .footer-column {
            display: flex;
            flex-direction: column;
        }

        .footer-brand {
            color: #000000;
            font-size: 1.125rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        .footer-tagline {
            color: #000000;
            font-size: 0.875rem;
        }

        .footer-heading {
            color: #000000;
            font-weight: 600;
            margin-bottom: 0.75rem;
        }

        .footer-links {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .footer-links a {
            color: #000000;
            font-size: 0.875rem;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer-links a:hover {
            color: #0668ca;
        }

        .social-links {
            display: flex;
            gap: 1rem;
        }

        .social-icon {
            color: #000000;
            transition: color 0.3s ease;
        }

        .social-icon:hover {
            color: #0668ca;
        }

        .social-icon svg {
            width: 1.5rem;
            height: 1.5rem;
        }

        .footer-bottom {
            margin-top: 2rem;
            padding-top: 2rem;
            border-top: 2px solid black;
            text-align: center;
        }

        .footer-bottom p {
            color: #000000;
            font-size: 0.875rem;
        }

        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* Responsive Styles */
        @media (max-width: 640px) {
            html {
                scroll-padding-top: 85px;
            }

            section {
                scroll-margin-top: 85px;
            }

            #contact {
                scroll-margin-top: 5vh;
            }

            #about {
                scroll-margin-top: 10vh;
            }
            .contact-about-container {
                flex-direction: column;
                gap: 2rem;
            }
            .contact-box, .about-box {
                width: 100%;
                min-width: 100%;
            }
            .about-box {
                margin-top: 0;
                padding: 2rem 1rem;
            }
            #booking {
                scroll-margin-top: -3vh;
            }

            .content-container {
                padding: 0 1.5rem;
            }

            .logo {
                width: 45px;
                height: 45px;
            }

            .brand-name {
                font-size: 1.5rem;
            }

            .hero-title {
                font-size: 3rem;
            }

            .hero-subtitle {
                font-size: 1.5rem;
            }

            .hero-text p {
                font-size: 1.125rem;
            }

            .hero-buttons {
                flex-direction: row;
                justify-content: center;
            }

            .btn {
                font-size: 1.1rem;
            }

            .section-title {
                font-size: 2.5rem;
            }

            .features-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .footer-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .hero-car-container {
                width: 140px;
                bottom: -7px;
            }

            .backcar {
                width: 100px;
                right: -4px;
                bottom: -4px;
            }
        }

        @media (min-width: 768px) {
            html {
                scroll-padding-top: 90px;
            }

            section {
                scroll-margin-top: 90px;
            }

            #contact {
                scroll-margin-top: 90px;
            }

            .content-container {
                padding: 0 2rem;
            }

            .header {
                padding: 1rem 2rem;
            }

            .hero-buttons {
                flex-direction: row;
                justify-content: center;
            }

            .logo {
                width: 50px;
                height: 50px;
            }

            .brand-name {
                font-size: 1.5rem;
            }

            .desktop-nav {
                display: flex;
            }

            .desktop-book-btn {
                display: block;
            }

            .mobile-menu-toggle {
                display: none;
            }

            .mobile-menu {
                display: none !important;
            }

            .hero-title {
                font-size: 4rem;
            }

            .hero-subtitle {
                font-size: 1.825rem;
            }
        }

        @media (min-width: 1024px) {
            .desktop-nav {
                gap: 3rem;
            }

            .nav-link {
                font-size: 1.1rem;
            }

            .hero-section {
                padding: 150px 2rem 4rem;
            }

            .section-title {
                font-size: 3rem;
            }

            .features-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .footer-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        @media (min-width: 1280px) {
            .content-container {
                padding: 0 3rem;
            }

            .desktop-nav {
                gap: 4rem;
            }
        }

        @media (max-width: 480px) {
            .hero-car-container {
                width: 70px;
            }

            .backcar {
                width: 80px;
            }
        }

        @media (max-width: 530px) {
            .hero-car-container {
                width: 90px;
                bottom: -7px;
            }

            .backcar {
                width: 100px;
                right: -4px;
                bottom: -4px;
            }
        }

        @media (max-width: 435px) {
            .hero-car-container {
                width: 70px;
                bottom: -7px;
            }

            .backcar {
                width: 80px;
                right: -4px;
                bottom: -4px;
            }
        }

        @media (max-width: 397px) {
            .hero-car-container {
                width: 60px;
                bottom: -7px;
            }

            .backcar {
                width: 75px;
                right: -4px;
                bottom: -4px;
            }
        }

        @media (max-width: 1205px) {

            .backcar {
                bottom: -0.7%;
                right: -0.35%;
            }
        }

        @media (max-width: 1035px) {

            .backcar {
                bottom: -0.5%;
                right: -0.45%;
            }
        }

        @media (max-width: 813px) {

            .backcar {
                bottom: -0.65%;
                right: -0.55%;
            }
        }

        @media (max-width: 675px) {
            .backcar {
                bottom: -0.65%;
                right: -0.65%;
            }
        }

        @media (max-width: 577px) {
            .backcar {
                bottom: -0.65%;
                right: -0.75%;
            }
        }

        @media (max-width: 497px) {
            .backcar {
                bottom: -0.65%;
                right: -0.85%;
            }
        }

        @media (max-width: 439px) {
            .backcar {
                bottom: -0.65%;
                right: -0.95%;
            }
        }

        @media (max-width: 403px) {
            .backcar {
                bottom: -0.65%;
                right: -1.05%;
            }
        }

        @media (max-width: 365px) {
            .backcar {
                bottom: -0.65%;
                right: -1.15%;
            }
        }

        @media (max-width: 319px) {
            .backcar {
                bottom: -0.65%;
                right: -1.25%;
            }
        }

        @media (max-width: 1039px) {
            .backcar {
                bottom: -0.65%;
                right: -0.4%;
            }
        }

        @media (max-width: 914px) {
            .backcar {
                bottom: -0.65%;
                right: -0.5%;
            }
        }

        @media (max-width: 886px) {
            .backcar {
                bottom: -0.75%;
                right: -0.5%;
            }
        }

        @media (max-width: 739px) {
            .backcar {
                bottom: -0.75%;
                right: -0.56%;
            }
        }

        @media (max-width: 664px) {
            .backcar {
                bottom: -0.75%;
                right: -0.58%;
            }
        }

        @media (max-width: 643px) {
            .backcar {
                bottom: -0.75%;
                right: -0.59%;
            }
        }

        @media (max-width: 633px) {
            .backcar {
                bottom: -0.75%;
                right: -0.6%;
            }
        }

        @media (max-width: 604px) {
            .backcar {
                bottom: -0.75%;
                right: -0.64%;
            }
        }

        @media (max-width: 586px) {
            .backcar {
                bottom: -0.75%;
                right: -0.67%;
            }
        }

        @media (max-width: 562px) {
            .backcar {
                bottom: -0.75%;
                right: -0.69%;
            }
        }

        @media (max-width: 547px) {
            .backcar {
                bottom: -0.75%;
                right: -0.71%;
            }
        }

        @media (max-width: 547px) {
            .backcar {
                bottom: -0.75%;
                right: -0.73%;
            }
        }

        @media (max-width: 519px) {
            .backcar {
                bottom: -0.75%;
                right: -0.76%;
            }
        }

        @media (max-width: 499px) {
            .backcar {
                bottom: -0.75%;
                right: -0.78%;
            }
        }

        @media (max-width: 488px) {
            .backcar {
                bottom: -0.75%;
                right: -0.79%;
            }
        }

        @media (max-width: 477px) {
            .backcar {
                bottom: -0.75%;
                right: -0.95%;
            }
        }

        @media (max-width: 477px) {
            .hero-car-container {
                width: 40px;
                bottom: -7px;
            }

            .backcar {
                width: 45px;
                right: -4px;
                bottom: -4px;
            }
        }

        /* Main Content */
        section {
            flex-grow: 1;
        }

        .content-wrapper {
            padding: 2rem 1rem;
        }

        @media (min-width: 640px) {
            .content-wrapper {
                padding: 2rem 1rem;
            }
        }

        .content-grid {
            max-width: 64rem;
            margin: 0 auto;
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }

        @media (min-width: 1024px) {
            .content-grid {
                grid-template-columns: 1fr 1fr;
                gap: 2rem;
            }
        }

        /* Form Section */
        .booking-section {
            background: linear-gradient(to bottom, #0085de, #100f0f);
            min-height: 130vh;
            border-top: 3px solid rgb(0, 0, 0);
            padding: 4rem 1rem;
            position: relative;
            margin-bottom: 0rem;
            z-index: 20;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 13rem;
            /* Push down to clear overlapping About section */
        }

        .form-section {
            display: flex;
           flex-direction: column;
            gap: 1rem;
            /* Restoring dark gradient card design */
           background: white;
            padding: 1rem;
            padding-top: 120px;
            /* Added top padding for panda */
            border-radius: 1rem;
            box-shadow: 0 10px 20px 20px rgba(28, 168, 6, 0.1), 0 10px 20px -5px rgba(0, 0, 0, 0.04);
            color: #000000;
            /* Changed back to white */
            width: 100%;
            height: 100%;
            /* Ensure it doesn't stretch too wide in the flex container */
            position: relative;
        }

        @media (min-width: 640px) {
            .form-section {
                padding: 2rem;
                padding-top: 120px;
            }
        }

        .page-heading {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .page-heading h1 {
            font-size: 1.75rem;
            font-weight: 900;
            letter-spacing: -0.025em;
            line-height: 1.2;
            color: #000000;
            /* Restored to white */
        }



        .page-heading p {
            color: rgb(0, 0, 0);
            /* Restored to light gray */
            font-size: 1rem;
        }

        body.dark .page-heading p {
            color: var(--gray-400);
        }

        /* Form Styles */
        form {
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            width: 100%;
        }

        .form-group label {
            font-size: 0.875rem;
            font-weight: 600;
            padding-bottom: 0.375rem;
            color: #000000;
            /* Restored to white */
        }

        body.dark .form-group label {
            color: var(--gray-200);
        }

        .form-input,
        .form-textarea {
            display: flex;
            width: 100%;
            border-radius: 0.5rem;
            border: 1px solid var(--gray-300);
            background-color: #f5f5f5;
            /* Restored to white input */
            padding: 0.75rem;
            font-size: 0.875rem;
            outline: none;
            transition: all 0.2s;
            color: var(--text-dark);
        }

        .form-input {
            height: 2.75rem;
        }

        .form-textarea {
            min-height: 6rem;
            resize: none;
        }

        .form-input:focus,
        .form-textarea:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(19, 127, 236, 0.5);
        }

        .form-input::placeholder,
        .form-textarea::placeholder {
            color: var(--gray-400);
        }

        body.dark .form-input,
        body.dark .form-textarea {
            border-color: var(--gray-700);
            background-color: var(--gray-800);
            color: white;
        }

        /* Select Dropdown Styles */
        select.form-input {
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            padding-right: 2.5rem;
        }

        body.dark select.form-input {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ccc' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
        }

        /* Autocomplete Styles */
        .autocomplete-wrapper {
            position: relative;
            width: 100%;
        }

        .autocomplete-suggestions {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background-color: white;
            border: 1px solid var(--gray-300);
            border-top: none;
            border-radius: 0 0 0.5rem 0.5rem;
            max-height: 250px;
            overflow-y: auto;
            z-index: 1000;
            display: none;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        body.dark .autocomplete-suggestions {
            background-color: var(--gray-800);
            border-color: var(--gray-700);
        }

        .autocomplete-suggestions.active {
            display: block;
        }

        .autocomplete-suggestion-item {
            padding: 0.75rem;
            cursor: pointer;
            border-bottom: 1px solid var(--gray-200);
            transition: background-color 0.2s;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        body.dark .autocomplete-suggestion-item {
            border-bottom-color: var(--gray-700);
        }

        .autocomplete-suggestion-item:last-child {
            border-bottom: none;
        }

        .autocomplete-suggestion-item:hover,
        .autocomplete-suggestion-item.selected {
            background-color: var(--gray-100);
        }

        body.dark .autocomplete-suggestion-item:hover,
        body.dark .autocomplete-suggestion-item.selected {
            background-color: var(--gray-700);
        }

        .autocomplete-suggestion-item i {
            color: var(--primary-color);
            font-size: 0.875rem;
        }

        .autocomplete-suggestion-text {
            flex: 1;
            font-size: 0.875rem;
        }

        .autocomplete-suggestion-main {
            font-weight: 500;
            color: var(--text-dark);
        }

        body.dark .autocomplete-suggestion-main {
            color: var(--text-light);
        }

        .autocomplete-suggestion-secondary {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-top: 0.125rem;
        }

        body.dark .autocomplete-suggestion-secondary {
            color: var(--gray-400);
        }


        .btn-submit {
            display: flex;
            width: 50%;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            align-self: center;
            border-radius: 1rem;
            height: 2.75rem;
            padding: 0 1.5rem;
            background-color: #0085de;
            color: white;
            font-size: 1rem;
            font-weight: 700;
            border: none;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            transition: background-color 0.2s;
        }

        .btn-submit:hover {
            background-color: #ffc107;
            color: #000;
        }

        /* Utility Classes */
        .truncate {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* Status Message Styles */
        .status-message {
            display: none;
            margin-top: 1rem;
            padding: 1rem;
            border-radius: 0.5rem;
            font-size: 0.875rem;
            font-weight: 500;
            text-align: center;
        }

        .status-message.success {
            display: block;
            background-color: #d1fae5;
            color: #065f46;
            border: 1px solid #34d399;
        }

        body.dark .status-message.success {
            background-color: rgba(16, 185, 129, 0.2);
            color: #6ee7b7;
            border-color: #059669;
        }

        .status-message.error {
            display: block;
            background-color: #fee2e2;
            color: #991b1b;
            border: 1px solid #f87171;
        }

        body.dark .status-message.error {
            background-color: rgba(239, 68, 68, 0.2);
            color: #fca5a5;
            border-color: #dc2626;
        }

        .status-message.loading {
            display: block;
            background-color: #dbeafe;
            color: #1e40af;
            border: 1px solid #60a5fa;
        }

        body.dark .status-message.loading {
            background-color: rgba(59, 130, 246, 0.2);
            color: #93c5fd;
            border-color: #2563eb;
        }

        .status-message i {
            margin-right: 0.5rem;
        }