@import 'node_modules/vanilla-infinite-marquee/infinite-marquee.css';

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

* {
    font-family: "Inter", 'Courier New', Courier, monospace;
    scroll-behavior: smooth;
}
.provider-logo {
    width: 60px;       /* Smaller than 100px */
    height: auto;      /* Keeps the image aspect ratio */
    margin: 8px;
    border-radius: 6px;
    object-fit: contain;
    border-radius: 0%;
  }
  #serviceProviderList {
    display: flex;
 flex-direction: row;
    justify-content: center;
    gap: 15px;
  }


  .marquee-text {
    overflow: clip;
  }
  
  .marquee-text-track {
    display: flex;
    padding-left: 4.8rem;
    gap: 4.8rem;
    width: max-content;
    animation: marquee-move-text var(--speed, 25s) linear infinite var(
        --direction,
        forwards
      );
  }
  
  
  @keyframes marquee-move-text {
    to {
      transform: translateX(-50%);
    }
  }


  .splide__arrow--next {
    right: -2em !important;
  }

  .splide__arrow--prev {
    left: -2em !important;
  }

  @media screen and (max-width: 425px) {
    .splide__arrow--next {
    right: -2em !important;
  }

  .splide__arrow--prev {
    left: -2em !important;
  }
  }

.splide__slide {
  max-width: 100% !important;
}