@charset "utf-8";
/* CSS Document */


  /* Container styling to center and wrap buttons */
  .icon-buttons-container {
    display: flex;
    justify-content: center; /* center horizontally */
    flex-wrap: wrap; /* allow wrapping on small screens */
    padding: 40px;
    gap: 20px; /* space between buttons */
  }

  /* Style for each button wrapper (optional for spacing) */
  .button-wrapper {
    flex: 0 1 auto;
  }

  /* Style for all icons/images */
  .icon-image {
    width: 150px;     /* fixed width */
    height: 162px;    /* fixed height */
    object-fit: cover; /* crop images to fit size without distortion */
    display: block;   /* remove inline spacing */
  }


  /* Scrolling banner coding */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* Container for the scrolling banner */
  .banner-container {
    overflow: hidden;
    width: 100%;
    height: 70px; /* Adjust height as needed */
    position: relative;
  }

  /* Inner wrapper that will animate */
  .scrolling-wrapper {
    display: flex;
    width: calc(200%); /* Twice the width of images for seamless scrolling */
    animation: scroll 20s linear infinite;
  }

  /* Style for images */
  .banner-image {
    width: 50%; /* Each image takes half of the wrapper width */
    height: 100%;
    object-fit: cover;
  }

  /* Keyframes for scrolling animation */
  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

  /* Responsive adjustments for mobile */
  @media (max-width: 600px) {
    .banner-container {
      height: 150px; /* Adjust height for smaller screens if needed */
    }
  }