.dlArea button {
      display: flex;
      border-radius: 7px;
      border: 0;
      padding: 5px 25px;
      background-color: #c2a76f;
      color: #000033;
      font-size: 18px;
      font-weight: bold;
      margin: 20px auto;
  }

  .splide:not(.is-overflow) .splide__pagination {
      display: block !important;
  }

  /* PWA Test */
  /* Hide Home button in the browser */
  .pwa-only-button {
      display: none !important;
  }

  /* Show Home inside the PWA */
  @media (display-mode: standalone) {
      .pwa-only-button {
          display: block !important;
      }

      /* Hide Install button in the PWA */
      #installWebAppID {
          display: none !important;
      }
  }

  /* PWA Test End */

  .pulse {
        animation-name: pulse_animation;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    @keyframes pulse_animation {
        0% {
            transform: scale(1);
        }

        30% {
            transform: scale(1);
        }

        40% {
            transform: scale(1.08);
        }

        50% {
            transform: scale(1);
        }

        60% {
            transform: scale(1);
        }

        70% {
            transform: scale(1.05);
        }

        80% {
            transform: scale(1);
        }

        100% {
            transform: scale(1);
        }
    }


  /* Container for the split layout */
  .slide-content-wrapper {
      display: flex;
      align-items: center;
      width: 100%;
      /* height: 100%; */
      /* padding: 0 10%; */
      /* gap: 40px; */
      border-radius: 20px;
      padding: 30px;
      flex-wrap: wrap;
      justify-content: center;
      /* background: #223c66bf; */
      background: linear-gradient(180deg, #0b1b3570 0% , #223c66a8 100%);
      border: 1px solid rgba(255, 255, 255, 0.1);
      flex-direction: column;
  }

  /* Carousal Tab Styles */
  /* Text Side */
  .slide-text {
      /* flex: 1;
      text-align: left;
      display: flex;
      align-items: flex-start;
      gap: 20px; */

      flex: 1;
      text-align: center;
      display: flex;
      align-items: center;
      gap: 20px;
      flex-direction: column;
  }

  .slide-text h3 {
      color: #c2a76f;
  }

  .step-number {
      font-size: 49px;
      font-weight: 900;
      flex: 0 0 auto;
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: #e3eeff;
      color: #223c66;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;

  }

  .swiper-slide__title {
      font-size: 24px;
      font-weight: bold;
      text-transform: uppercase;
      margin-bottom: 15px;
  }

  .swiper-slide__description {
      font-size: 16px;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.8);
  }

  /* Image Side */
  .slide-image {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .slide-image img {
      width: 100%;
      max-width: 500px;
      /* max-height: 400px; */
      /* object-fit: contain;*/
      filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5));
  }

  /* Adjust Swiper Controls color to match your purple/green theme */
  .swiper-button-next,
  .swiper-button-prev {
      color: #1e52a3 !important;
      /* The neon green from your image */
  }

  /* Carousal Tab Styles END*/

  /* .installGuide {
      margin-top: 80px;
  } */

  .tabs-navigation {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin: 0 0 25px;
  }

  .tab-btn {
      background: none;
      border: none;
      color: #fff;
      cursor: pointer;
      padding: 10px 15px;
      transition: 0.3s;
      border-bottom: 3px solid transparent;
  }

  .tab-btn-active {
      border-bottom: 3px solid #c2a76f;
      /* Adjust to match your theme red */
      font-weight: bold;
  }

  /* Rectangle Content */
  .offer-box {
      margin-bottom: 40px;
      min-height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0);
      /* Slight box visibility */
      border: 1px solid rgba(255, 255, 255, 0);
      padding-left: 40px;
      padding-right: 40px;
      padding-bottom: 40px;
  }

  .tab-content {
      display: none;
      width: 100%;
  }

  .tab-content-active {
      display: block;
      animation: fadeIn 0.4s ease-in-out;
      margin-bottom: 50px;
  }

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

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

  /* Mobile guide */
  .spacer-top {
      margin-top: 15px;
  }

  .spacer-bottom {
      margin-bottom: 15px;
  }

  .steps-container {
      display: flex;
      flex-direction: row;
      gap: 15px;
      padding: 20px 0;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      justify-content: flex-start;
  }

  .steps-container::-webkit-scrollbar {
      display: none;
  }

  .step-card {
      flex: 0 0 80vw;
      max-width: 280px;
      height: 380px;
      scroll-snap-align: center;
      scroll-snap-stop: always;

      background: linear-gradient(180deg, #111a29 0%, rgb(0, 36, 63) 100%);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 15px;
      padding: 20px 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
  }

  .steps-container::before,
  .steps-container::after {
      content: '';
      flex: 0 0 10vw;
  }

  @media (min-width: 992px) {
      .steps-container {
          overflow-x: visible;
          scroll-snap-type: none;
          justify-content: center;
          flex-wrap: wrap;
      }

      .step-card {
          flex: 0 0 200px;
          width: 200px;
          margin-bottom: 20px;
          height: 350px;
          scroll-snap-align: none;
      }

      .steps-container::before,
      .steps-container::after {
          display: none;
      }
  }

  .step-img-box {
      width: 100%;
      margin-top: auto;
  }

  .step-img-box img {
      width: 100%;
      max-height: 300px;
      object-fit: contain;
  }



  /*-----media queries----------------------------------------------------------------------------------*/
  @media (min-width:481px) {}

  @media (min-width:768px) {
      .slide-content-wrapper {
          flex-direction: row;
      }

      .slide-text {

          text-align: left;
          flex-direction: row;
      }

  }

  @media (min-width:1000px) {}

  @media (min-width:1025px) {}

  @media (min-width:1441px) {}