@import url(https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css);
        .mh2-models .swiper {
          width: 100vw;
          height: auto;
          padding-top: 50px;
        }

        .model-slider .swiper-slide {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          overflow: hidden;
        }

        .model-slider .swiper-slide img {
          object-fit: cover;
          /* Use 'contain' if you do not want the image cropped */
          object-position: center;
        }

        .swiper-slide video {
          height: 100vh;
          width: 100vw;
          object-fit: cover;
          /* Use 'contain' if you do not want the image cropped */
          object-position: center;
        }
        .swiper-slide .bg-overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(
            rgba(0, 0, 0, 0.2), 
            rgba(0, 0, 0, 0.2),
            rgba(0, 0, 0, 0.2),
            rgba(0, 0, 0, 0.2),
            rgba(0, 0, 0, 0.0),
            rgba(0, 0, 0, 1)
          );
        }


        .hero-slider .swiper-pagination {
          width: 100%;
          margin-bottom: 25px;
        }

        .hero-slider .swiper-pagination-bullet {
          position: relative;
          width: 225px;
          height: 31px;
          border-radius: 2px;
          background: none;
          opacity: 0.4;
          animation: none;
        }

        .hero-slider .swiper-pagination-bullet:before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 0%;
          height: 100%;
          background: #fff;
          border-radius: 2px;
          animation: none;
        }

        .hero-slider .swiper-pagination-bullet img {
          width: 100%;
        }

        .hero-slider .swiper-pagination-bullet:nth-of-type(1):before {
          content: "";
          margin: 0 10px 0 0;
          display: inline-block;
          width: 225px;
          height: 32px;
          background-color: transparent;
          background-image: url('/media/home/mhero-1.svg');
          background-size: contain;
          /* Forces image to fit the width/height */
          background-repeat: no-repeat;
        }

        html[dir="rtl"] .hero-slider .swiper-pagination-bullet:nth-of-type(1):before {
          margin: 0 0 0 10px !important;
        }

        .hero-slider .swiper-pagination-bullet:nth-of-type(2):before {
          content: "";
          margin: 0 0 0 10px;
          display: inline-block;
          width: 225px;
          height: 32px;
          background-color: transparent;
          background-image: url('/media/home/mhero-2.svg');
          background-size: contain;
          /* Forces image to fit the width/height */
          background-repeat: no-repeat;
        }

        html[dir="rtl"] .hero-slider .swiper-pagination-bullet:nth-of-type(2):before {
          margin: 0 10px 0 0 !important;
        }

        .hero-slider .swiper-pagination-bullet-active {
          opacity: 1;
          /*border-top: #fff 2px solid;*/
        }

        @media(max-width:900px) {
          .hero-slider .swiper-pagination-bullet {
            width: 175px;
            height: 25px;
          }

          .hero-slider .swiper-pagination-bullet:nth-of-type(1):before,
          .hero-slider .swiper-pagination-bullet:nth-of-type(2):before {
            width: 175px;
            height: 25px;
          }
        }

        @media(max-width:600px) {
          .hero-slider .swiper-pagination-bullet {
            width: 100px;
            height: 15px;
          }

          .hero-slider .swiper-pagination-bullet:nth-of-type(1):before,
          .hero-slider .swiper-pagination-bullet:nth-of-type(2):before {
            width: 100px;
            height: 15px;
          }
        }

        .autoplay-progress {
          position: absolute;
          left: 20px;
          bottom: 20px;
          z-index: 10;
          width: 48px;
          height: 48px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: bold;
          color: #666;
          font-weight: 400;
        }

        .autoplay-progress svg {
          --progress: 0;
          position: absolute;
          left: 0;
          top: 0px;
          z-index: 10;
          width: 100%;
          height: 100%;
          stroke-width: 2px;
          stroke: #444;
          fill: none;
          stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
          stroke-dasharray: 125.6;
          transform: rotate(-90deg);
        }

        .home-hero {
          position: relative;
          width: 100%;
          overflow: hidden;
          margin-top: -98px;
          height: 100svh;
          min-height: 100svh;
          max-height: 100svh;
        }

        .mh2-models {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 80px 0;
          background: url(/media/home/home-model-bg.webp) center center no-repeat;
          background-size: cover;
        }

        .mh2-models h2 {
          font-size: clamp(2rem, 5vw, 2.5rem);
          margin-bottom: 50px;
          color: #eaeaea;
          text-transform: uppercase;
        }

        .mh2-models .mh2-models__grid {
          width: 100%;
        }

        .mh2-models .mh2-models__cell {
          width: 1200px;
          margin: 0 auto;
        }

        .mh2-models__cell img {
          width: 850px;
          height: auto;
        }

        .readmore-btn {
          color: #fff;
          background-color: #8fb5a6;
          padding: 10px 15px;
          font-weight: 400;
          font-size: 18px;
          text-transform: uppercase;
          text-decoration: none;
          line-height: 1;
          border-radius: 0;
          display: -webkit-inline-box;
          display: -ms-inline-flexbox;
          display: inline-flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          position: relative;
          overflow: hidden;
          z-index: 0;
          width: auto;
          -webkit-transition: all 300ms ease;
          transition: all 300ms ease;
        }

        .readmore-btn:before {
          background-color: #fff;
          border-radius: 0;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          content: "";
          -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
          -webkit-transform-origin: top right;
          transform-origin: top right;
          transition: -webkit-transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
          -webkit-transition: -webkit-transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
          transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
          transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
          -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          z-index: -1;
        }

        .readmore-btn i,
        .readmore-btn img {
          color: #fff;
          font-size: 18px;
          -webkit-transition: all 300ms ease;
          transition: all 300ms ease;
        }

        .readmore-btn:hover i {
          color: #000;
        }

        .readmore-btn:hover img {
          -webkit-filter: brightness(1) invert(1);
          filter: brightness(1) invert(1);
        }

        .readmore-btn:hover {
          color: #000;
        }

        .readmore-btn:hover:before {
          -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
          -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
        }

        .readmore-btn:active {
          color: #000;
        }

        .swiper-button-next .swiper-navigation-icon,
        .swiper-button-prev .swiper-navigation-icon {
          color: #658679;
        }

        .swiper-button-next:hover .swiper-navigation-icon,
        .swiper-button-prev:hover .swiper-navigation-icon {
          color: #8fb5a6;
        }

        .mhero2-interior-colors, .mhero2-exterior-colors {
          position: relative;
        }

        ul.interior_color-selector, ul.exterior_color-selector {
          list-style: none;
          padding: 0;
          margin: 0;
          display: flex;
          gap: 25px;
          align-items: center;
          justify-content: center;
          padding-top: 25px;
          position: absolute;
          z-index: 10;
          bottom: 25px;
          left: 50%;
          transform: translate(-50%, -50%);
        }

        ul.interior_color-selector li, ul.exterior_color-selector li {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          cursor: pointer;
          position: relative;
          border: #fff 1px solid;
          transition: all 0.2s ease-in-out;
          box-shadow: inset 0 0 0 5px rgba(253, 253, 253, 0.5);
        }

        ul.interior_color-selector li img, ul.exterior_color-selector li img {
          border-radius: 50%;
        }

        ul.interior_color-selector li span, ul.exterior_color-selector li span {
          width: 150px;
          position: absolute;
          font-size: 14px;
          display: none;
          text-align: center;
          text-transform: uppercase;
          line-height: 16px;
          left: 50%;
          transform: translate(-50%, -50%);
          top: 50px;
        }

        ul.interior_color-selector li.active, ul.exterior_color-selector li.active {
          transform: scale(1.12);
          outline: 2px solid #fff;
          outline-offset: 3px;
        }

        ul.interior_color-selector li.active span, ul.exterior_color-selector li.active span {
          display: block;
        }
        input[type="datetime-local"] { color-scheme: dark; }

        /* LOCATION CARDS */
:root {
      --brand-dark-teal: #174d56;
      --brand-teal-light: #17676f;
      --brand-teal-hover: #123940;
      --brand-teal-accent: #eef6f7;
    }

    /* --- Left Column: Showroom Card --- */
    .showroom-card {
      position: relative;
      border: none;
      border-radius: 12px;
      overflow: hidden;
      min-height: 520px;
      background: #000;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }

    .showroom-bg-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.65;
      transition: transform 0.5s ease;
    }

    .showroom-card:hover .showroom-bg-img {
      transform: scale(1.03);
    }

    .showroom-overlay {
      position: relative;
      z-index: 2;
      background: linear-gradient(180deg, rgba(23, 77, 86, 0.4) 0%, rgba(23, 77, 86, 0.95) 100%);
      height: 100%;
      padding: 2.5rem;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      color: #ffffff;
    }

    .btn-showroom {
      background-color: var(--brand-dark-teal);
      color: #ffffff;
      border: 1px solid rgba(255, 255, 255, 0.3);
      padding: 0.8rem 1.5rem;
      font-weight: 600;
      letter-spacing: 1px;
      transition: all 0.3s ease;
    }

    .btn-showroom:hover {
      background-color: var(--brand-teal-light);
      color: #ffffff;
      border-color: rgba(255, 255, 255, 0.6);
    }

    /* --- Right Column: Service Centers Card --- */
    .service-card {
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
      background-color: #ffffff;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .service-card-header {
      background-color: var(--brand-dark-teal);
      color: #ffffff;
      padding: 1.25rem 1.5rem;
      text-transform: uppercase;
      font-weight: 700;
      letter-spacing: 0.5px;
      font-size: 1rem;
    }

    .location-item {
      border: 1px solid #e1e8ed;
      border-radius: 8px;
      padding: 0.75rem 1rem;
      margin-bottom: 0.75rem;
      background-color: #ffffff;
      transition: all 0.2s ease-in-out;
    }

    .location-item:hover {
      border-color: var(--brand-teal-light);
      box-shadow: 0 2px 8px rgba(23, 103, 111, 0.1);
    }

    .location-subtext {
      font-size: 0.78rem;
      color: #6c757d;
      margin-top: -0.25rem;
      margin-bottom: 0.5rem;
      padding-left: 0.25rem;
    }

    .btn-map-teal {
      background-color: var(--brand-teal-light);
      color: #ffffff;
      font-size: 0.75rem;
      font-weight: 700;
      padding: 0.4rem 0.85rem;
      border-radius: 6px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      transition: all 0.2s ease;
      white-space: nowrap;
      text-decoration: none;
    }

    .btn-map-teal:hover {
      background-color: var(--brand-dark-teal);
      color: #ffffff;
    }

    /* Helpline Footer Bar */
    .helpline-footer {
      background-color: var(--brand-teal-accent);
      border-top: 1px solid #e2e8f0;
      padding: 0.9rem 1.5rem;
      font-weight: 600;
      color: var(--brand-dark-teal);
      font-size: 0.9rem;
    }
        /* END LOCATION CARDS */