/* v345G — Home Main services full-width Vietnam landmark line-art background.
   Scope: Home page / "Choose the support path that fits your trip." section only.
   Goal: place the uploaded Vietnam architecture line drawing across the white background,
   fitted to the full viewport width so it is not horizontally cropped. */

.home-page .home-service-routes{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #fff !important;
  padding-bottom: clamp(170px, 21vw, 330px) !important;
}

.home-page .home-service-routes::before{
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: clamp(190px, 31vw, 430px) !important;
  transform: translateX(-50%) !important;
  background-image: url('/assets/img/home-service-routes-vietnam-line-bg-v345G.png') !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-size: 100% auto !important;
  opacity: .82 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

.home-page .home-service-routes::after{
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: clamp(190px, 31vw, 430px) !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.18) 36%, rgba(255,255,255,.02) 100%) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

.home-page .home-service-routes > .container{
  position: relative !important;
  z-index: 1 !important;
}

.home-page .home-service-routes .home-route-grid{
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 980px){
  .home-page .home-service-routes{
    padding-bottom: clamp(130px, 26vw, 230px) !important;
  }

  .home-page .home-service-routes::before,
  .home-page .home-service-routes::after{
    height: clamp(150px, 34vw, 260px) !important;
    background-size: 100% auto !important;
  }
}

@media (max-width: 640px){
  .home-page .home-service-routes{
    padding-bottom: clamp(105px, 30vw, 170px) !important;
  }

  .home-page .home-service-routes::before,
  .home-page .home-service-routes::after{
    height: clamp(115px, 36vw, 185px) !important;
    background-size: 100% auto !important;
    opacity: .72 !important;
  }
}