.hero{
    text-align:center;
    padding:48px 20px 10px;
  }
  .hero h1{
    font-size:clamp(22px,4vw,32px);
    margin:0 0 6px;
    letter-spacing:0.3px;
  }
  .hero p{
    color:var(--sub);
    margin:0;
    font-size:15px;
  }
  .journey{
    position:relative;
    overflow: hidden;
    margin:40px auto 80px;
    padding:0 16px;
  }
  .road-wrap{
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    height:100%;
    aspect-ratio:21000/29700;
    z-index:1;
    pointer-events:none;
  }
  #roadImg{
    width:100%;
    height:100%;
    display:block;
  }
  #bus{
    position:absolute;
    width:15%;
    height:auto;
    left:50%;
    top:0;
    transform:translate(-50%,-50%);
    z-index:5;
    filter:drop-shadow(0 4px 6px rgba(0,0,0,0.25));
    will-change:left,top,transform;
  }
  .steps{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    gap:250px;
    padding:120px 0 120px;
  }
  .step{
    position:relative;
    width:48%;
    display:flex;
    flex-direction:column;
    gap:12px;
    opacity:0;
    transform:translateY(28px) scale(0.94);
    transition:opacity 0.55s cubic-bezier(.22,.85,.4,1),
               transform 0.55s cubic-bezier(.22,.85,.4,1);
  }
  .step.visible{
    opacity:1;
    transform:translateY(0) scale(1);
  }
  .step.right{ align-self:flex-end; text-align:left; }
  .step.left{ align-self:flex-start; text-align:right; }
  .step.left .step-body{ align-items:flex-end; }
  .step.right .step-body{ align-items:flex-start; }
  .step-body{ display:flex; flex-direction:column; }
  .step-body{
    position:relative;
    overflow:visible;
  }
  .badge{
    position:absolute;
    top:-18px;
    width:44px;height:44px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--badge),var(--badge-dark));
    color:#fff;
    font-weight:700;
    font-size:19px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 10px rgba(201,113,26,0.4);
    border:3px solid #fff;
    z-index:3;
    transform:scale(0);
    transition:transform 0.45s cubic-bezier(.34,1.56,.64,1) 0.15s;
  }
  .step.visible .badge{
    transform:scale(1);
  }
  .step.right .badge{ left:-18px; }
  .step.left .badge{ right:-18px; }

  .step.left .hs-card.c4 {
    margin-right: 16rem;
  }
  .step.left .hs-card.c6 {
      margin-right: 16rem;
  }

  .hs-card{
    position:relative;
    width:100%;
    max-width:450px;
    overflow:visible;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .step.left .hs-card{ margin-left:auto; }
  .step.right .hs-card{ margin-right:auto; }
  .hs-card img{ width:100%; height:auto; display:block; }

  .step-title{
    color: var(--blue) !important;
    font-size: 1.2vw !important;
    line-height:1.35 ;
    margin:0;
    padding-top: 10px;
  }
  .step-title.title-one {
    margin-left: 6rem;
  }
  .step-title.title-two {
    text-align: left;
    width: 50%;
  }
  .step-title.title-three {
    margin-left: 4rem;
  }
  .step-title.title-four {
    text-align: left;
    width: 83%;
  }
  .step-title.title-five {
    margin-left: 3rem;
  }
  .step-title.title-six {
    text-align: left;
    width: 83%;
  }
  .step-title.title-seven {
    margin-left: 4rem;
  }

  .step-popup{
    position:absolute;
    top:90%;
    left:18%;
    width:100%;
    max-width:500px;
    max-height:clamp(260px, 45vh, 380px);
    padding:24px 26px 22px;
    background:#154d79;
    border:5px solid #f0b24a;
    border-radius:26px;
    box-shadow:0 10px 20px rgba(0,0,0,0.14);
    color:#fff;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:#f0b24a rgba(255,255,255,0.12);
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    transform:translateY(-50%) scale(0.96);
    opacity:0;
    visibility:hidden;
    pointer-events:auto;
    transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
    z-index:10;
  }
  .step.left .step-popup{
    left:auto;
    right:18%;
    width:100%;
    text-align: left;
    max-width:500px;
    transform:translateY(-50%) scale(0.96);
  }
  .step-body.is-popup-open .step-popup,
  .step-body:focus-within .step-popup{
    opacity:1;
    visibility:visible;
    transform:translateY(-50%) scale(1);
  }
  .step.left .step-body.is-popup-open .step-popup,
  .step.left .step-body:focus-within .step-popup{
    transform:translateY(-50%) scale(1);
  }

  .step.left .step-popup::before{
    left:auto;
    right:-12px;
    border-left:none;
    border-bottom:none;
    border-right:5px solid #f0b24a;
    border-top:5px solid #f0b24a;
  }
  .step-popup-title{
    margin:0 0 18px;
    color:#f0b24a;
    font-family: inherit;
    font-size:1.6rem;
    line-height:1.2;
    font-weight:400;
  }
  .step-popup-text{
    margin:0 0 18px;
    color:#fff;
    font-size:0.95rem;
    font-family: 'Merriweather', serif;
    line-height:1.85;
  }
  .step-popup-text:last-child{
    margin-bottom:0;
  }
  .step-popup-list{
    margin:0 0 18px;
    padding:0 0 0 20px;
    color:#fff;
    font-family: 'Merriweather', serif;
    letter-spacing: 1px;
    line-height: 1.85;
  }
  .step-popup-list li{
    margin:0 0 8px;
  }
  .step-popup-list li:last-child{
    margin-bottom:0;
  }
  .step-popup::-webkit-scrollbar{
    width:8px;
  }
  .step-popup::-webkit-scrollbar-track{
    background:rgba(255,255,255,0.12);
    border-radius:999px;
  }
  .step-popup::-webkit-scrollbar-thumb{
    background:#f0b24a;
    border-radius:999px;
  }
  @media (min-width: 1025px) and (max-width: 1439px){
    .step-popup{
      width:100%;
      max-width:500px;
      max-height:min(44vh, 340px);
      padding:22px 24px 20px;
    }
    .step.left .step-popup{
      width:100%;
      max-width:500px;
    }
    .step.left .step-popup{
      width:100%;
      max-width:500px;
      right:-1%;
    }
    .step-title.title-two{
      width: 65%;
    }
    .step-title.title-four{
      width: 97%;
    }
    .step-title.title-six{
      width: 98%;
    }

  }
  @media (min-width: 1440px){
    .step-popup{
      width:100%;
      max-width:500px;
      max-height:min(36vh, 280px);
      padding:18px 20px 16px;
      left:12%;
    }

  }
  @media (width: 1536px){
      .step.left .step-popup{
      width:100%;
      max-width:500px;
      right:-1%;
    }
    .step-title.title-two{
      width: 60%;
    }
    .step-title.title-four{
      width: 97%;
    }
    .step-title.title-six{
      width: 98%;
    }

  }
  /* Hidden geometry path used purely for motion calculation */
  #pathSvg{
    position:absolute;
    width:1px;height:1px;
    overflow:hidden;
    visibility:hidden;
  }
  @media (max-width:480px){
    .step{ width:50%; }
    .hs-card{ max-width:150px; }
  }

  @media (hover: none), (max-width: 768px){
    .hs-card{
      flex-direction:column;
      align-items:stretch;
    }
    .step-popup{
      display:none;
    }
  }

  @media (max-width: 768px){
    .journey{
      min-height: auto;
      padding-inline: 0;
    }

    .road-wrap{
      width: 220%;
      height: 100%;
      min-width: 100%;
      max-width: none;
    }

    #bus{
      width: 13%;
      filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.22));
    }

    .steps{
      gap: 24px;
      padding-top: 8px;
      padding-bottom: 90px;
    }

    .mobile-step-modal{
      position:fixed;
      inset:0;
      display:none;
      align-items:center;
      justify-content:center;
      padding:16px;
      background:rgba(255,255,255,0.05);
      -webkit-backdrop-filter:blur(3px);
      backdrop-filter:blur(3px);
      touch-action:none;
      z-index:10000;
    }
    .mobile-step-modal.is-open{
      display:flex;
    }
    .mobile-step-modal__panel{
      position:relative;
      width:min(92vw, 420px);
      max-height:min(80dvh, 640px);
      overflow:auto;
      touch-action:pan-y;
      padding:20px 20px 18px;
      border-radius:24px;
      background:linear-gradient(180deg, rgba(10,34,54,0.96), rgba(21,77,121,0.98));
      border:5px solid #f0b24a;
      box-shadow:0 18px 50px rgba(0,0,0,0.32);
      color:#fff;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:thin;
      scrollbar-color:#f0b24a rgba(255,255,255,0.12);
      overscroll-behavior:contain;
    }
    .mobile-step-modal__close{
      position:absolute;
      top:10px;
      right:10px;
      width:34px;
      height:34px;
      border:none;
      border-radius:50%;
      background:rgba(255,255,255,0.12);
      color:#fff;
      font-size:22px;
      line-height:1;
      cursor:pointer;
    }
    .mobile-step-modal__close:focus{
      outline:2px solid #f0b24a;
      outline-offset:2px;
    }
    .mobile-step-modal .step-popup{
      display:block !important;
      position:static !important;
      width:auto !important;
      max-width:none !important;
      max-height:none !important;
      margin:0 !important;
      padding:0 !important;
      border:0 !important;
      border-radius:0 !important;
      background:transparent !important;
      box-shadow:none !important;
      opacity:1 !important;
      visibility:visible !important;
      transform:none !important;
      overflow:visible !important;
      -webkit-backdrop-filter:none !important;
      backdrop-filter:none !important;
    }
    .mobile-step-modal .step-popup::before{
      display:none !important;
    }
    .mobile-step-modal .step-popup-title{
      font-size:1.35rem;
      padding-right:1.5rem;
      margin-bottom:14px;
    }
    .mobile-step-modal .step-popup-text,
    .mobile-step-modal .step-popup-list{
      font-size:0.92rem;
      line-height:1.75;
    }
    .mobile-step-modal .step-popup-list{
      padding-left:18px;
    }
    .step-title{
      font-size: 2.2vw !important;
      line-height: 1.35 !important;
    }
    .step-title.title-one {
        margin-left: 1rem;
    }
    .step-title.title-two {
        text-align: left;
        width: 70%;
    }
    .step-title.title-three {
        margin-left: 1rem;
    }
    .step-title.title-four {
        text-align: left;
        width: 94%;
    }
    .step-title.title-five {
        margin-left: 1rem;
    }
    .step-title.title-six {
        text-align: left;
        width: 97%;
    }
    .step-title.title-seven {
        margin-left: 1rem;
    }
  }


/* Extracted page styles */
:root {
            --spacing-card: 15%;
        }

        html {
            overflow-x: hidden !important;
            overflow-y: visible !important;
        }

        .topeffect {
            opacity: 0;
            transform: translateY(200px);
        }

        @keyframes slideUp {
            0% {
                transform: translateY(30px);
                opacity: 0;
            }

            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .single-card .quotes-box {
            right: 5vw;
        }

        .Card {
            width: 100%;
        }

        @media only screen and (max-width: 768px) {
            .single-card .quotes-box {
                right: 9vw;
                bottom: 1vw;
            }


        }

        .bd-imageadded{
            background-image: url('../bus-image/bg-image.svg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .right-border {
            position: relative;
            padding: 0px;
            margin-left: 23px;
        }

        .right-border::after {
            content: '';
            position: absolute;
            height: 0;
            width: 1px;
            border: 3px solid #ECB24F;
            border-radius: 40px 0 0 0;
            border-right: none;
            border-bottom: none;
            top: -5.2%;
            left: -2%;
            pointer-events: none;
            transition: none;
        }

        /* Animate when class is added */
        .right-border.animate-border::after {
            animation: drawLine 3s linear forwards;
        }

        .quotes-box-century {
            width: 80%;
            position: relative;
            /* top: 50%; */
            /* left: 50%; */
            margin: 0 auto;
            /* transform: translate(-50%, -50%); */
            text-align: center;
            background: #fff;
            /* height: 35vh; */
            border-radius: 1vw;
            /* box-shadow: 0 0 10px gray; */
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--blue);

            /* font-weight: 600; */
        }

        .quotes-box-century:after {
            content: '';
            height: 110%;
            width: 103%;
            box-shadow: 0 0 10px #393939;
            position: absolute;
            border-radius: 1vw;
            top: 50%;
            background: #fff5e6;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: -1;
        }

        .top-quote-century {
            position: absolute;
            height: 2vw !important;
            width: auto !important;
            top: 5px;
            left: 12%;
            right: 0;
            mix-blend-mode: darken;
        }

        .bottom-quote-century {
            position: absolute;
            height: 40px;
            width: auto !important;
            bottom: -2px;
            right: 12%;
            transform: rotate(180deg);
            mix-blend-mode: darken;
            height: 2vw !important;
        }

        @media only screen and (max-width: 768px) {
            .bottom-quote-century {
                height: 14vw !important;
                right: 16.5vw;
            }

            .top-quote-century {

                height: 14vw !important;
                top: -4.3vw;
                left: -15vw;

            }

            .right-border::after {
                left: -21px !important;
                top: -21px !important;
            }


        }

        @media (max-width: 1600px) {

            .top-quote-century {
                top: 1px !important;
                left: 102px !important;
            }
        }

        @keyframes drawLine {
            0% {
                width: 1px;
                height: 0;
            }

            50% {
                width: 1px;
                height: 67%;
            }

            100% {
                width: 102%;
                height: 105%;
            }

        }

        @media only screen and (max-width: 1199px) {
            .single-card {
                height: 240px;
                width: 100%;
            }

            .single-card .img-box img {
                height: 100%;
                object-fit: cover;
                object-position: 0rem -2.5rem;
            }

            .right-border::after {
                left: -4%;
            }
        }

        @media (max-width: 768px) {
            .right-border {
                margin-left: 15px;
            }

            @keyframes drawLine {
                0% {
                    width: 1px;
                    height: 0;
                }

                50% {
                    width: 1px;
                    height: 67%;
                }

                100% {
                    width: 103%;
                    height: 107%;
                }
            }

            .single-card {
                height: 192px !important;
            }
        }

        @media only screen and (max-width: 450px) {
            .right-quote>img {
                top: -2px !important;
            }

            .single-card {
                height: 137px !important;
            }

            .single-card .img-box img {
                object-position: 0rem -0.9rem !important;
            }

            @keyframes drawLine {
                0% {
                    width: 1px;
                    height: 0;
                }

                50% {
                    width: 1px;
                    height: 67%;
                }

                100% {
                    width: 105%;
                    height: 116%;
                }
            }
        }