.service-auto-slider {
        --service-bg-1: #110018;
        --service-bg-2: #2d0047;
        --service-accent: #8a11ff;
        --service-accent-soft: rgba(138, 17, 255, 0.28);
        --service-text: #ffffff;
        --service-muted: rgba(255, 255, 255, 0.85);
        position: relative;
        margin: 40px auto 20px;
        max-width: 1740px;
        border-radius: 36px;
        overflow: hidden;
        padding: 32px 36px 24px;
        background:
          url("../images/baba-supersign-logo-2.png") left 22px top 18px / clamp(72px, 8vw, 120px) no-repeat,
          linear-gradient(to right, #003f7f, #00bcd4);
        background-blend-mode: soft-light, normal;
        border: 1px solid rgba(255, 255, 255, 0.35);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
      }

      .service-auto-slider::before,
      .service-auto-slider::after {
        content: "";
        position: absolute;
        pointer-events: none;
      }

      .service-auto-slider::before {
        width: 220px;
        height: 220px;
        left: 45%;
        top: -60px;
        background: linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
        transform: skewX(-14deg);
      }

      .service-auto-slider::after {
        width: 220px;
        height: 220px;
        left: 46%;
        bottom: -90px;
        background: linear-gradient(20deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
        transform: skewX(14deg);
      }

      .service-slider-track {
        position: relative;
        min-height: 460px;
      }

      .service-slide {
        position: absolute;
        inset: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(400px, 1fr);
        align-items: center;
        gap: 30px;
        opacity: 0;
        transform: translateX(34px);
        pointer-events: none;
        transition: opacity 0.45s ease, transform 0.45s ease;
      }

      .service-slide.is-active {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
      }

      .service-slide h3 {
        margin: 0 0 14px;
        color: var(--service-text);
        font-size: clamp(1.9rem, 2.7vw, 3rem);
        line-height: 1.2;
      }

      .service-slide h3::before {
        content: "Service";
        display: block;
        margin-bottom: 8px;
        font-size: 0.78rem;
        line-height: 1;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        opacity: 0.9;
      }

      .service-slide p {
        margin: 0;
        color: var(--service-muted);
        max-width: 720px;
        font-size: clamp(0.95rem, 1.2vw, 1.15rem);
      }

      .service-slide-image-wrap {
        position: relative;
        width: min(100%, 640px);
        justify-self: center;
      }

      .service-slide-image-wrap::before,
      .service-slide-image-wrap::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 22px;
        background: linear-gradient(170deg, rgba(0, 42, 106, 0.1), rgba(95, 0, 182, 0.2));
      }

      .service-slide-image-wrap::before {
        transform: translate(18px, -12px);
      }

      .service-slide-image-wrap::after {
        transform: translate(36px, -24px);
        opacity: 0.65;
      }

      .service-slide-image-wrap img {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 11;
        border-radius: 22px;
        object-fit: cover;
        object-position: center;
        z-index: 2;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
      }

      .service-slider-arrow {
        position: absolute;
        top: 80%;
        transform: translateY(-50%);
        width: 50px;
        height: 50px;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        color: #ffffff;
        font-size: 2.1rem;
        line-height: 1;
        cursor: pointer;
        transition: transform 0.25s ease, background-color 0.25s ease;
        z-index: 5;
      }

      .service-slider-arrow:hover {
        transform: translateY(-50%) scale(1.05);
        background: rgba(255, 255, 255, 0.34);
      }

      .service-slider-arrow.prev {
        left: 18px;
      }

      .service-slider-arrow.next {
        right: 18px;
      }

      .service-slider-dots {
        position: relative;
        z-index: 4;
        margin-top: 22px;
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scrollbar-width: none;
      }

      .service-slider-dots::-webkit-scrollbar {
        display: none;
      }

      .service-slider-dot {
        border: 0;
        background: transparent;
        color: rgba(255, 255, 255, 0.72);
        cursor: pointer;
        padding: 0;
        font-weight: 700;
        min-width: 74px;
        flex: 1 0 74px;
      }

      .service-slider-dot .line {
        display: block;
        height: 3px;
        border-radius: 99px;
        margin-bottom: 8px;
        background: rgba(255, 255, 255, 0.35);
      }

      .service-slider-dot.is-active {
        color: #ffffff;
      }

      .service-slider-dot.is-active .line {
        background: #ffffff;
      }

      @media (max-width: 1199px) {
        .service-slide {
          grid-template-columns: 1fr 1fr;
        }

        .service-slide-image-wrap {
          width: min(100%, 560px);
        }
      }

      @media (max-width: 991px) {
        .service-auto-slider {
          border-radius: 24px;
          padding: 24px 20px 20px;
          margin: 30px 14px 16px;
        }

        .service-slider-track {
          min-height: 560px;
        }

        .service-slide {
          grid-template-columns: 1fr;
          gap: 22px;
          align-content: center;
          text-align: center;
          transform: translateY(20px);
        }

        .service-slide.is-active {
          transform: translateY(0);
        }

        .service-slide p {
          margin: 0 auto;
        }

        .service-slide-image-wrap {
          width: min(100%, 500px);
        }

        .service-slider-arrow {
          width: 42px;
          height: 42px;
          font-size: 1.7rem;
        }

        .service-slider-arrow.prev {
          left: 8px;
        }

        .service-slider-arrow.next {
          right: 8px;
        }
      }

      @media (max-width: 640px) {
        .service-slider-track {
          min-height: 620px;
        }
      }