/*homepage.css*/
    * {
      margin: 0;
      padding: 0;
      font-family: "Poppins", sans-serif;
      box-sizing: border-box;
    }

    body {
      overflow-x: hidden !important;
      -ms-overflow-style: none;
      scrollbar-width: none;
      -webkit-text-size-adjust: none;
    }

    body::-webkit-scrollbar {
      display: none;
    }

    :root {
      --carousel-item-size: 100px;
      --carousel-gap: 40px;
      --carousel-speed: 33s;
      --carousel-bg: #fafaf0;
      --carousel-spacing-between: 2rem;
      --dark-gray: transparent;

      --color-text: navy;
      --color-bg: papayawhip;
      --color-bg-accent: #ecdcc0;
      --size: clamp(10rem, 1rem + 40vmin, 30rem);
      --gap: calc(var(--size) / 14);
      --duration: 30s;
      --scroll-start: 0;
      --scroll-end: calc(-100% - var(--gap));
    }

    @keyframes infiniteLoop {
      0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }

      100% {
        -webkit-transform: translate3d(
          calc(-1 * (10 * var(--carousel-item-size) + 9 * var(--carousel-gap))),
          0,
          0
        );
        transform: translate3d(
          calc(-1 * (10 * var(--carousel-item-size) + 9 * var(--carousel-gap))),
          0,
          0
        );
      }
    }

    @keyframes infiniteLoopReverse {
      0% {
        -webkit-transform: translate3d(
          calc(-1 * (10 * var(--carousel-item-size) + 9 * var(--carousel-gap))),
          0,
          0
        );
        transform: translate3d(
          calc(-1 * (10 * var(--carousel-item-size) + 9 * var(--carousel-gap))),
          0,
          0
        );
      }

      100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }

    .brandsCarouselSection {
      margin-top: 100px !important;
      max-width: 1300px;
      margin: 0 auto;
      margin-bottom: 95px;
    }

    .brandsCarousel {
      max-width: 800px;
      margin: auto;
      overflow: hidden;
      position: relative;
    }

    .secondCarousel {
      margin-top: var(--carousel-spacing-between);
    }

    .brandsCarousel::before,
    .brandsCarousel::after {
      content: "";
      width: var(--carousel-item-size);
      height: var(--carousel-item-size);
      background: linear-gradient(
        to right,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0) 100%
      );
      position: absolute;
      z-index: 2;
    }

    .brandsCarousel::before {
      top: 0;
      left: 0;
    }

    .brandsCarousel::after {
      top: 0;
      right: 0;
      -webkit-transform: rotateZ(180deg);
      transform: rotateZ(180deg);
    }

    .carouselTrack,
    .carouselTrackReverse {
      width: calc(20 * var(--carousel-item-size) + 19 * var(--carousel-gap));
      display: flex;
      will-change: transform;
    }

    .carouselTrack {
      -webkit-animation: infiniteLoop var(--carousel-speed) linear infinite;
      animation: infiniteLoop var(--carousel-speed) linear infinite;
    }

    .carouselTrackReverse {
      -webkit-animation: infiniteLoopReverse var(--carousel-speed) linear infinite;
      animation: infiniteLoopReverse var(--carousel-speed) linear infinite;
    }

    .brandLogo {
      opacity: 0.5;
      margin-right: var(--carousel-gap);
      vertical-align: middle;
      align-content: center;
    }

    .brandLogo:last-child {
      margin-right: 0;
    }

    .brandLogo img {
      height: 100px;
      vertical-align: middle;
      object-fit: cover;
      object-position: center;
    }

    .background {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: radial-gradient(#e4e7eb 1.25px, transparent 1.25px);
      background-size: 9.5px 9.5px;
      z-index: -1;
    }

    .hero-image {
      flex: 0 0 30%;
      box-sizing: border-box;
      padding: 0 50px;
      display: flex;
      position: relative;
      perspective: 1000px;
    }

    .card-wrapper-home {
      position: absolute;
      width: 83%;
      top: 8%;
      left: 8.5%;
      transform-style: preserve-3d;
      animation: sway 5s ease-in-out infinite;
    }

    .stamps-card {
      position: relative;
      width: 100%;
      border-radius: 18px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }

.stamps-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 2;
    transform: translateZ(35px)
}

    .stamps-card-image {
      width: 100%;
      border-radius: 18px;
      display: block;
    }

    .phone {
      display: block;
      position: relative;
      z-index: -2;
      width: 100%;
      margin: 0 auto;
    }

    .content {
      z-index: 1;
      text-align: center;
      font-family: "Poppins", sans-serif;
    }

    #languageToggleContainer {
      position: fixed;
      top: 70%;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      right: 0;
      z-index: 1000;
    }

    #languageToggleButton {
      background-color: white;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
      border: none;
      outline: none;
      cursor: pointer;
      border-radius: 4px 0 0 4px;
      padding: 4px;
      -webkit-transform: translateX(50%);
      transform: translateX(50%);
    }

    #languageToggleFlag {
      width: 31px;
      margin-right: 47px;
      height: auto;
    }

    .hero-section {
      display: flex;
      align-items: center;
      max-width: 1400px;
      margin: 0 auto;
      padding: 40px 0 40px 20px;
      gap: 80px;
    }

    .hero-section:nth-child(2n + 1) {
      justify-content: flex-end;
    }

    .hero-section:nth-child(2n) {
      justify-content: flex-start;
    }

    .hero-content {
      flex: 1 1 auto;
      box-sizing: border-box;
      padding: 20px;
    }

    .hero-header-container {
      display: flex;
      align-items: start;
      justify-content: start;
    }

    .hero-header {
      font-size: 3.7em;
      font-weight: bold;
      margin: 0;
      padding-right: 25px;
    }

    .hero-badge {
      display: inline-block;
      position: absolute;
      background-color: #004aad;
      color: #fff;
      margin-left: -84px;
      margin-top: 49px;
      font-weight: bold;
      padding: 5px 10px;
      -webkit-transform: rotate(349deg);
      transform: rotate(349deg);
      font-size: 20px;
      border-radius: 10px;
      width: fit-content;
      text-wrap: nowrap;
    }

    .hero-subtext {
      font-size: 1.4em;
      margin-bottom: 20px;
      margin-top: 40px;
    }

    .hero-button {
      background-color: #e52687;
      color: #fff;
      font-weight: bolder;
      border: none;
      margin-top: 40px;
      padding: 10px 47px 9px 55px;
      font-size: 2em;
      cursor: pointer;
      border-radius: 9999px;
      box-shadow: 4px 4px 0 #2b2d42;
    }

    .hero-button-logo {
      width: 105px;
      margin-left: 16px;
    }

    .hero-button:hover {
      opacity: 0.9;
    }


    @keyframes sway {
      0%,
      100% {
        -webkit-transform: rotateY(-6deg) rotateX(-3deg);
        transform: rotateY(-6deg) rotateX(-3deg);
      }

      50% {
        -webkit-transform: rotateY(6deg) rotateX(3deg);
        transform: rotateY(6deg) rotateX(3deg);
      }
    }

    /* New Section Styles */
    .noAppSection {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 0;
      margin: 0 auto;
      max-width: 1200px;
      gap: 40px;
      text-align: center;
    }

    .noAppLeft,
    .noAppRight {
      flex: 0 0 auto;
    }

    .imageContainer {
      position: relative;
      display: inline-block;
    }

    .boxesImage {
      display: block;
      max-width: 233px;
      width: 100%;
      height: auto;
    }

    .crossedOut {
      display: block;
      max-width: 420px;
      padding: 5px 19px;
      width: 100%;
      height: auto;
    }
    .redXImage {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }

    .noAppRight {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
    }

    .noAppHeading {
      font-size: 1.8em;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .emojiContainer {
      position: relative;
      display: inline-block;
    }

    .rotatingEmoji {
      width: 40px;
      height: 40px;
      vertical-align: middle;
      -webkit-animation: rotateEmoji 6s linear infinite; /* slowed down from 2s to 3s */
      animation: rotateEmoji 6s linear infinite; /* slowed down from 2s to 3s */
    }

    .tickImage {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }

    .benefitsSection {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding: 40px 20px;
      margin: 0 auto;
      margin-top: 50px;
      max-width: 1200px;
      gap: 60px;
      align-items: stretch;
    }

    .benefitTile {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 40px 20px;
      margin: 0 auto;
      gap: 40px;
      background-color: white;
      border-radius: 28px;
      box-shadow: 0 3px 30px #252c4a35;
      position: relative;
    }

    .benefitTileLower {
      flex: 1;
      max-width: 362px;
      display: flex;
      flex-direction: column;
      padding: 40px 20px;
      margin: 0 auto;
      gap: 40px;
      background-color: white;
      border-radius: 28px;
      box-shadow: 0 3px 30px #252c4a35;
      position: relative;
    }

    .benefitsSection.benefitsSection--twoItems {
      justify-content: center;
    }

    .benefitsSection.benefitsSection--twoItems .benefitTileLower {
      flex: 0 0 auto;
      margin: 0;
    }

    .benefitTileImages {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1rem;
      margin-top: 20px;
    }

    .googlewallet {
    }

    .applewallet {
      height: 61px !important;
      margin-left: 28px;
    }

    .benefitTileImages--twoVertical {
      flex-direction: column;
    }

    .benefitTileImages--twoVertical img {
      height: 57px;
    }

    .benefitTileImages--biggerOne {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-grow: 1;
      height: 63%;
    }

    .benefitTileImages--biggerOne img {
      max-width: 220px;
      height: auto;
    }

    .benefitTileImage {
      width: 100px;
      position: absolute;
      top: -50px;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
    }

    .benefitTileHeading {
      font-size: 1.7em;
      margin-top: 50px;
      margin-bottom: 0;
      min-height: 110px;
      line-height: 1.4;
    }

    .benefitTileText {
      font-size: 1.2em;
      line-height: 1.5;
      margin-top: 10px;
      margin-bottom: 25px;
    }

    .greenTickContainer {
      display: inline-flex;
      align-items: center;
    }

    .greenTickImage {
      width: 18px;
    }

    .googleMapsContainer {
      display: inline;
    }

    .googleMapsImage {
      height: 1.2em;
      display: inline;
      position: relative;
      top: -3px;
    }

    .centered-button-container {
      display: flex;
      font-size: 0.8em;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin-top: -38px;
    }

    .limited-time-offer-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px;
      margin: 0 auto;
      margin-top: 51px;
      max-width: 1000px;
      position: relative;
      border: none;
      background:
        /* Straight borders */ linear-gradient(
            to right,
            #e52687 6%,
            transparent 14%,
            transparent 86%,
            #e52687 94%
          )
          top/100% 5px no-repeat,
        linear-gradient(#e52687, #e52687) bottom/100% 5px no-repeat,
        linear-gradient(#e52687, #e52687) left/5px 100% no-repeat,
        linear-gradient(#e52687, #e52687) right/5px 100% no-repeat,
        /* Corner gradients */
          radial-gradient(
            circle 28px at 100% 100%,
            transparent 23px,
            #e52687 23px,
            #e52687 28px,
            transparent 28px
          )
          top left,
        radial-gradient(
            circle 28px at 0 100%,
            transparent 23px,
            #e52687 23px,
            #e52687 28px,
            transparent 28px
          )
          top right,
        radial-gradient(
            circle 28px at 100% 0,
            transparent 23px,
            #e52687 23px,
            #e52687 28px,
            transparent 28px
          )
          bottom left,
        radial-gradient(
            circle 28px at 0 0,
            transparent 23px,
            #e52687 23px,
            #e52687 28px,
            transparent 28px
          )
          bottom right;
      background-size: 95% 5px, /* top */ 95% 5px, 5px 80%, 5px 80%, 28px 28px,
        28px 28px, 28px 28px, 28px 28px;
      background-repeat: no-repeat;
    }

    .limited-time-offer-heading {
      font-size: 2em;
      position: absolute;
      top: -0.5em;
      width: 100%;
      text-align: center;
    }

    .dotted-background-wrapper {
      position: relative; /* needed for .background to be absolute inside */
      width: 100%;
    }

    /* 2) .background is now absolute, not fixed */
    .dotted-background-wrapper .background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      background-image: radial-gradient(#e4e7eb 1.25px, transparent 1.25px);
      background-size: 9.5px 9.5px;
    }

    .limited-time-offer-content {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: stretch;
      gap: 20px;
      padding: 20px 30px;
      width: 100%;
    }

    .limited-time-offer-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: 30px;
      width: 100%;
      background-color: white;
      box-shadow: 0 3px 15px #252c4a35;
      border-radius: 60px;
      padding: 10px 50px;
    }

    .limited-time-offer-item-image {
      height: 50px;
    }

    .limited-time-offer-item-text {
      font-size: 1.6em;
      color: #140c21;
      margin-bottom: 0px !important;
    }

    .noAppHeadingMobile {
      display: none;
    }

    @keyframes rotateEmoji {
      from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }

      to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    .noAppText {
      font-size: 1.2em;
      line-height: 1.5;
      margin-top: 10px;
    }

    .statistics-section {
      background-color: #130b21;
      padding: 2.5rem 2rem;
      margin: 3rem 0;
      margin-top: -81px;
    }

    .statistics-container {
      display: flex;
      text-align: center;
      justify-content: center;
      max-width: 1200px;
      position: relative;
      margin: 0 auto;
    }

    .statistics-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      position: relative;
      padding: 0 20px;
    }

    .statistics-item:not(:last-child)::after {
      content: "";
      position: absolute;
      right: 0;
      top: 50%;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      height: 80px;
      width: 2px;
      background-color: rgba(255, 255, 255, 0.2);
    }

    .statistics-value {
      color: white;
      margin: 0;
      text-align: right;
      display: flex;
      justify-content: flex-end;
      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum";
      position: relative;
      text-align: center;
    }

    .statistics-label {
      color: white;
      margin: 0;
      font-size: 1.2em;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .statistics-counter {
      font-weight: bold;
      text-align: center;
    }

    .footer {
      background-color: #130b21;
      position: relative;
      margin: 40px auto 0 auto;
      padding: 40px 100px;
      display: flex;
      flex-direction: column;
      gap: 40px;
    }

    .footer-content {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 60px;
      position: relative;
    }

    .footer-content::after {
      content: "";
      position: absolute;
      bottom: -15%;
      left: 0;
      width: 100%;
      height: 3px;
      background-color: rgba(255, 255, 255, 0.2);
    }

    .footer-logo-container {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      flex: 1.5;
    }

    .footer-logo {
      width: 200px;
    }

    .footer-logo-text {
      font-size: 1em;
      color: white;
      margin: 20px 0;
      text-align: start;
      width: 100%;
    }

    .footer-content-link:hover,
    .footer-contact-link:hover {
      color: #e52687;
    }

    .footer-content-link:active,
    .footer-contact-link:active {
      color: #e52687;
    }

    .footer-bottom {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }

    .footer-bottom-info {
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    .footer-bottom-links {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
    }

    .footer-bottom-link {
      color: white;
      text-decoration: none;
    }

    .footer-bottom-link:hover {
      color: #e52687;
    }

    .all-rights-reserved-text {
      color: white;
      font-size: 1em;
    }

    .footer-social-media-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      flex: 1;
    }

    .footer-social-media-icons {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin-top: 20px;
    }

    .social-icon {
      color: white;
      font-size: 1.8em;
      text-decoration: none;
    }

    .social-icon:hover {
      color: #e52687;
    }

    .footer-social-media-text {
      color: white;
      font-size: 1.2em;
      text-align: center;
    }

    .footer-contact-container {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: flex-end;
      flex: 1;
    }

    .footer-contact-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      margin-top: 20px;
      gap: 10px;
    }

    .footer-content-link {
      width: 100%;
      text-align: end;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-bottom: 0px;
    }

    .footer-content-link,
    .footer-contact-link {
      color: white;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .footer-contact-link {
      text-align: end;
    }

    .footer-contact-text {
      color: white;
      font-size: 1.2em;
      text-align: end;
      width: 100%;
    }

    .footer-contact-phone {
      color: white;
      font-size: 0.8em;
    }

    .footer-contact-email {
      color: white;
      font-size: 0.8em;
    }

    .footer-newsletter-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      flex: 2;
    }

    .footer-newsletter-input-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 20px;
    }

    .footer-newsletter-text {
      color: white;
      font-size: 1.2em;
      text-align: center;
    }

    .footer-newsletter-input-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 15px;
      margin-top: 20px;
      width: 100%;
    }

    .footer-newsletter-input {
      display: block;
      width: 100%;
      padding: 10px 20px;
      background-color: #fff;
      color: #2b2d42;
      border: 2px solid #e52687;
      border-radius: 9999px;
      font-weight: bolder;
      font-size: 0.7em;
      box-shadow: 4px 4px 0 #2b2d42;
      flex: 2;
      width: 100%;
      max-width: 500px;
    }

    .footer-newsletter-button {
      background-color: #e52687;
      color: #fff;
      font-weight: bolder;
      border: none;
      padding: 10px 10px;
      font-size: 0.7em;
      cursor: pointer;
      border-radius: 9999px;
      box-shadow: 4px 4px 0 #2b2d42;
      flex: 1;
      max-width: 150px; /* Add max-width for normal state */
      overflow: hidden;
      transition: all 0.3s ease-in-out; /* Changed to all for smoother animation */
      opacity: 1;
      visibility: visible;
    }

    .footer-newsletter-button.hidden {
      max-width: 0;
      padding: 0;
      margin: 0;
      opacity: 0;
      visibility: hidden;
    }

    .footer-newsletter-button:hover {
      opacity: 0.9;
    }

    .footer-newsletter-message {
      color: white;
      font-size: 0.9em;
      text-align: center;
      margin-top: 10px;
    }

    .footer-newsletter-message.hidden {
      display: none;
    }

    .scroll-to-top-button {
      position: fixed;
      bottom: 20px;
      left: 20px;
      z-index: 1000;
      background-color: #2b2d42;
      color: #fff;
      width: 45px;
      height: 45px;
      padding: 0;
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.3s ease-in-out;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .scroll-to-top-button:hover {
      background-color: #e52687;
    }

    .scroll-to-top-button:active {
      background-color: #e52687;
    }

    .hideonpc {
      display: none;
    }

    .hideonmobile {
      display: block;
    }

    @media only screen and (max-width: 768px) {
      html,
      body {
        overflow-x: hidden !important;
        position: relative;
        width: 100%;
      }

      :root {
        --carousel-item-size: 60px !important;
        --carousel-gap: 30px !important;
        --carousel-speed: 33s;
        --carousel-bg: #fafaf0;
        --carousel-spacing-between: 2rem;
        --dark-gray: transparent;
      }

      .overflow-workaround {
        /*overflow hidden doesnt work on mobile when there is viewprot present*/
        overflow-x: hidden !important;
      }

      .hero-section {
        flex-direction: column-reverse;
        padding: 16px 15px;
        gap: 0px;
      }

      .hero-section > div:last-child {
        margin-bottom: 10px;
      }

      .hero-button {
        font-size: 1.6em;
        padding: 10px 5px;
        margin: 10px auto;
        width: 85%;
      }

      .hero-header {
        font-size: 3.1em;
      }

      .hero-badge {
        margin-left: -72px;
        margin-top: 37px;
      }

      .hero-button-logo {
        display: none;
      }

      .hero-content {
        padding: 0;
        display: flex;
        flex-direction: column;
      }

      .noAppSection {
        flex-direction: column;
        gap: 0px;
        padding-top: 10px;
      }

      .noAppSection div:not(:last-child) {
        margin-bottom: 6px;
      }

      .noAppHeading {
        display: none;
      }

      .noAppHeadingMobile {
        font-size: 1.8em;
        margin: 0 auto;
        margin-bottom: 4px;
        display: flex;
        align-items: center;
        gap: 0px;
      }

      .noAppHeadingMobile > div:not(:last-child) {
        margin-right: 10px;
      }

      .emojiContainerMobile {
        position: relative;
        display: inline-block;
      }

      .rotatingEmojiMobile {
        width: 40px;
        height: 40px;
        vertical-align: middle;
        -webkit-animation: rotateEmoji 6s linear infinite; /* slowed down from 2s to 3s */
        animation: rotateEmoji 6s linear infinite; /* slowed down from 2s to 3s */
      }

      .tickImageMobile {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }

      .benefitsSection {
        flex-direction: column;
        padding-top: 0px;
        margin-bottom: 23px;
        margin-top: 20px;
        gap: 0px;
      }

      .benefitsSection > div:not(:last-child) {
        margin-bottom: 60px;
      }

      .benefitTileImage {
        width: 57px;
        top: -31px;
      }

      .benefitTileHeading {
        font-size: 1.5em;
        margin-top: 2px;
        margin-bottom: 18px;
        min-height: unset !important;
      }

      .benefitTile {
        padding-bottom: 10px;
        gap: 0px;
      }

      .benefitTileLower {
        padding: 25px 24px;
        gap: 0px;
      }

      .benefitTileImages {
        gap: 0;
      }

      .benefitTileImages img:not(:last-child) {
        margin-bottom: 1rem;
      }

      .benefitTileText {
        margin-top: 0px;
      }

      .benefitsSection.benefitsSection--twoItems {
        gap: 0;
        align-items: center;
      }

      .benefitsSection.benefitsSection--twoItems > div:not(:last-child) {
        margin-bottom: 30px;
      }

      .googlewallet {
        height: 47px !important;
      }

      .applewallet {
        height: 51px !important;
        margin-left: 28px;
      }

      .statistics-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
      }

      .statistics-counter {
        text-wrap-mode: nowrap;
        font-size: 1.1em !important;
        position: relative;
        text-align: center;
        margin-bottom: 3px;
      }

      .statistics-label {
        font-size: 1.1em !important;
        line-height: 1.1em;
      }

      .statistics-icon {
        width: 30px;
      }

      .statistics-item {
        gap: 0;
        margin: 10px;
        border: 2px dashed #e52687;
        padding: 20px;
        border-radius: 10px;
        min-width: 150px;
      }

      .statistics-item::after {
        content: none !important;
      }

      .statistics-item:nth-child(2n) {
        margin-left: 10px;
      }

      .statistics-value {
        text-wrap-mode: nowrap;
      }

      .brandsCarouselSection {
        max-width: 365px;
        margin-top: 65px !important;
        margin-bottom: 65px !important;
      }

      .secondCarousel {
        margin-top: 29px !important;
      }

      .stampCardsSection {
        margin-top: -150px !important;
        position: relative !important;
        overflow: hidden !important;
      }

      .footer-content {
        flex-direction: column;
        gap: 0px;
      }

      .footer-content > div:not(:last-child) {
        margin-bottom: 15px;
      }

      .hideonmobile {
        display: none;
      }

      .hideonpc {
        display: block;
      }

      .limited-time-offer-heading {
        font-size: 1.7em;
        top: -1em;
        max-width: 300px;
      }

      .limited-time-offer-content {
        padding: 27px 0px 5px 0px;
        gap: 0;
      }

      .limited-time-offer-content > div:not(:last-child) {
        margin-bottom: 20px;
      }

      .limited-time-offer-item {
        flex-direction: row;
        padding: 20px;
        border-radius: 100px;
        gap: 0;
      }

      .limited-time-offer-item > div:not(:last-child) {
        margin-right: 10px;
      }

      .limited-time-offer-item-image-container {
        min-width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .limited-time-offer-item-image {
        height: 40px;
      }

      .limited-time-offer-item-text {
        font-size: 1.1em;
      }

      .limited-time-offer-section {
        scale: 0.98;
        background:
            /* Straight borders */ linear-gradient(
              to right,
              #e52687 2%,
              transparent 6%,
              transparent 94%,
              #e52687 98%
            )
            top/100% 5px no-repeat,
          linear-gradient(#e52687, #e52687) bottom/100% 5px no-repeat,
          linear-gradient(#e52687, #e52687) left/10px 100% no-repeat,
          linear-gradient(#e52687, #e52687) right/5px 100% no-repeat,
          /* Corner gradients */
            radial-gradient(
              circle 60px at 100% 100%,
              transparent 45px,
              #e52687 45px,
              #e52687 50px,
              transparent 50px
            )
            top left,
          radial-gradient(
              circle 60px at 0 100%,
              transparent 45px,
              #e52687 45px,
              #e52687 50px,
              transparent 50px
            )
            top right,
          radial-gradient(
              circle 60px at 100% 0,
              transparent 45px,
              #e52687 45px,
              #e52687 50px,
              transparent 50px
            )
            bottom left,
          radial-gradient(
              circle 60px at 0 0,
              transparent 45px,
              #e52687 45px,
              #e52687 50px,
              transparent 50px
            )
            bottom right;
        background-size: 77% 5px, /* top */ 77% 5px, 5px 66%, 5px 66%, 50px 50px,
          50px 50px, 50px 50px, 50px 50px;
        background-repeat: no-repeat;
        margin: 55px auto;
      }

      .scroll-to-top-button {
        bottom: 10px;
        left: 10px;
      }

      .footer {
        padding: 20px 10px 10px 10px;
        gap: 0;
      }

      .footer > div:not(:last-child) {
        margin-bottom: 20px;
      }

      .footer-logo-container {
        gap: 0;
        align-items: center;
      }

      .footer-logo {
        width: 150px;
      }

      .footer-newsletter-text {
        font-size: 1.2em;
        margin-bottom: 10px;
      }

      .footer-newsletter-input-container {
        margin-top: 0px;
        gap: 0;
        flex-direction: column;
      }

      .footer-newsletter-input-container > input:not(:last-child) {
        margin-bottom: 10px;
      }

      .footer-newsletter-input {
        font-size: 0.9em;
      }

      .footer-newsletter-button {
        font-size: 0.9em;
        width: 100%;
        transition: all 0.3s;
      }

      .footer-newsletter-button.hidden {
        max-height: 0;
        padding: 0;
        margin: 0;
        opacity: 0;
        visibility: hidden;
      }

      .footer-logo-text {
        text-align: center;
        width: 70%;
        margin: 10px 0;
      }

      .footer-social-media-text {
        font-size: 1.2em;
        margin-bottom: 10px;
      }

      .footer-social-media-icons {
        margin-top: 0px;
        gap: 0;
      }

      .footer-social-media-icons > a:not(:last-child) {
        margin-right: 20px;
      }

      .social-icon {
        font-size: 1.8em;
      }

      .footer-contact-text {
        font-size: 1.2em;
        text-align: center;
        margin-bottom: 10px;
      }

      .footer-contact-content {
        margin-top: 0px;
        gap: 0;
      }

      .footer-content-link {
        text-align: center;
        flex-direction: row-reverse;
        font-size: 1em;
        gap: 0;
        margin-bottom: 10px;
      }

      .footer-content-link > i {
        margin-right: 10px;
      }

      .footer-content::after {
        bottom: -1.5%;
      }

      .footer-bottom {
        flex-direction: column-reverse;
        gap: 25px;
      }

      .footer-bottom-link {
        font-size: 1em;
      }

      .footer-bottom-links {
        gap: 0;
      }

      .footer-bottom-links > a:not(:last-child) {
        margin-right: 40px;
      }

      .all-rights-reserved-text {
        font-size: 0.8em;
        margin-bottom: 0px;
      }

      .top-brands-wrapper {
        display: flex;
        flex-direction: column;
        margin: 0 auto 15px auto;
        max-width: 100vw;
      }

      .top-brands-marquee {
        display: flex;
        overflow: hidden;
        user-select: none;
        gap: var(--gap);
        mask-image: linear-gradient(
          var(--mask-direction, to right),
          hsl(0 0% 0% / 0),
          hsl(0 0% 0% / 1) 20%,
          hsl(0 0% 0% / 1) 80%,
          hsl(0 0% 0% / 0)
        );
      }

      .top-brands-marquee__group {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: 0px;
        min-width: 100%;
        animation: scroll-x var(--duration) linear infinite;
      }

      .top-brands-marquee img {
        display: grid;
        place-items: center;
        width: 35px;
        fill: var(--color-text);
        padding: 5px 0px;
        border-radius: 0.5rem;
        opacity: 0.5;
      }

      .top-brands-marquee img:not(:first-child) {
        margin: 0 5px;
      }

      .top-brands-marquee img:last-child {
        margin-right: 0px;
      }

      .top-brands-marquee--reverse .top-brands-marquee__group {
        animation-direction: reverse;
        animation-delay: -3s;
      }

      .brandLogo img {
        height: 55px;
      }

      .top-brands-subtext-mobile {
        font-size: 1em;
        margin-top: -10px;
        margin-bottom: 6px;
        color: gray;
        text-align: center;
        opacity: 0.8;
      }
    }

    @keyframes scroll-x {
      from {
        transform: translateX(var(--scroll-start));
      }
      to {
        transform: translateX(var(--scroll-end));
      }
    }

    @keyframes scroll-y {
      from {
        transform: translateY(var(--scroll-start));
      }
      to {
        transform: translateY(var(--scroll-end));
      }
    }


    .mobile-feature-section {
        display: none;
        width: 100%;
        margin: 20px auto;
        text-align: center;
    }

    .feature-box {
        position: relative;
        width: 92%;
        margin: 0 auto;
        background-color: white;
        border-radius: 28px;
        box-shadow: 0 3px 30px #252c4a35;
        padding: 15px;
        overflow: visible;
    }

    .box-decoration {
        position: absolute;
        top: -7px;
        left: -13px;
        z-index: 2;
    }

    .box-image {
        width: 87px;
        height: auto;
        animation: sway-slow 6s ease-in-out infinite;
    }

    .bubble {
        position: absolute;
        width: 24px;
        height: auto;
    }

    .bubble-1 {
        top: 39px;
        left: 10px;
        animation: sway-medium 5s ease-in-out infinite;
    }

    .bubble-2 {
        top: 47px;
        left: 50px;
        animation: sway-medium 4s ease-in-out infinite;
    }

    .bubble-3 {
        top: 66px;
        left: 25px;
        animation: sway-medium 7s ease-in-out infinite;
    }

    .feature-content {
        padding: 0px;
    }

    .feature-image {
        width: 100%;
        height: auto;
        border-radius: 12px;
    }

    /* Animation keyframes for swaying */
    @keyframes sway-slow {
        0%, 100% {
            transform: translateY(-5px);
        }

        50% {
            transform: translateY(5px);
        }
    }

    @keyframes sway-medium {
        0%, 100% {
            transform: translateY(-8px);
        }

        50% {
            transform: translateY(8px);
        }
    }

    @keyframes sway-fast {
        0%, 100% {
            transform: translateY(-10px);
        }

        50% {
            transform: translateY(10px);
        }
    }

    /* Aktualizacja istniej�cego media query dla urz�dze� mobilnych */
    @media only screen and (max-width: 768px) {
        .mobile-feature-section {
            display: block;
            margin-bottom: 15px;
            margin-top: 6px;
        }
    }

.buttons-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.secondary-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: -26px;
    width: 83%;
    justify-content: center;
}

.secondary-button {
    background-color: white;
    color: #004AAD;
    font-weight: bold;
    border: 2px solid #004AAD;
    padding: 8px 15px;
    font-size: 1.5em;
    cursor: pointer;
    border-radius: 9999px;
    box-shadow: 2px 2px 0 #2b2d42;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
}

    .secondary-button:hover {
        background-color: #f0f0f0;
        transform: translateY(-2px);
    }

    .secondary-button i {
        font-size: 1em;
    }

/* Add to the existing mobile media query */
@media only screen and (max-width: 768px) {
    .buttons-container {
        margin-top: 10px;
    }

    .secondary-buttons {
        flex-direction: row;
        gap: 10px;
        margin-bottom: 0px;
    }

    .secondary-button {
        font-size: 1.15em;
        padding: 10px 12px;
        white-space: nowrap;
        flex: 1;
    }
}