.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}

.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}

.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}

.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}

.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}

.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}

.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}

.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}

.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}

.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}

.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}

.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}

.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}

.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}

.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}

.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}

.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}

.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}

.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}

.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}

.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}

.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}

.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}

.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}

.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}

.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}


body {
  -webkit-font-smoothing: antialiased;
}      



  .hover-indicator {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 10px;
    height: 10px;
    background-color: #97c9d8; /* Neon mint, change to your brand color */
    border-radius: 50%;
    animation: breathe 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 10;
  }
  @keyframes breathe {
    0%   { transform: scale(1); opacity: 0.8; }
    50%  { transform: scale(1.6); opacity: 0.3; }
    100% { transform: scale(1); opacity: 0.8; }
  }



  .hover-indicator {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 10px;
    height: 10px;
    background-color: #97c9d8; /* Neon mint, change to your brand color */
    border-radius: 50%;
    animation: breathe 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 10;
  }
  @keyframes breathe {
    0%   { transform: scale(1); opacity: 0.8; }
    50%  { transform: scale(1.6); opacity: 0.3; }
    100% { transform: scale(1); opacity: 0.8; }
  }



  .hover-indicator {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 10px;
    height: 10px;
    background-color: #97c9d8; /* Neon mint, change to your brand color */
    border-radius: 50%;
    animation: breathe 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 10;
  }
  @keyframes breathe {
    0%   { transform: scale(1); opacity: 0.8; }
    50%  { transform: scale(1.6); opacity: 0.3; }
    100% { transform: scale(1); opacity: 0.8; }
  }



  .hover-indicator {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 10px;
    height: 10px;
    background-color: #97c9d8; /* Neon mint, change to your brand color */
    border-radius: 50%;
    animation: breathe 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 10;
  }
  @keyframes breathe {
    0%   { transform: scale(1); opacity: 0.8; }
    50%  { transform: scale(1.6); opacity: 0.3; }
    100% { transform: scale(1); opacity: 0.8; }
  }



  .hover-indicator {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 10px;
    height: 10px;
    background-color: #97c9d8; /* Neon mint, change to your brand color */
    border-radius: 50%;
    animation: breathe 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 10;
  }
  @keyframes breathe {
    0%   { transform: scale(1); opacity: 0.8; }
    50%  { transform: scale(1.6); opacity: 0.3; }
    100% { transform: scale(1); opacity: 0.8; }
  }



  .hover-indicator {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 10px;
    height: 10px;
    background-color: #97c9d8; /* Neon mint, change to your brand color */
    border-radius: 50%;
    animation: breathe 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 10;
  }
  @keyframes breathe {
    0%   { transform: scale(1); opacity: 0.8; }
    50%  { transform: scale(1.6); opacity: 0.3; }
    100% { transform: scale(1); opacity: 0.8; }
  }



    /* Reset margins and padding */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
  /* Remove overflow: hidden; from here */
  margin: 0; /* You might want to keep this */
}
    /* Container for the slider */
.image-slider {
  width: 100%;
  height: 100vh;
  overflow: hidden; /* Keep this here instead */
  position: relative;
}
    /* The track that holds all the images */
    .image-track {
      display: flex;
      animation: slide 40s linear infinite;
      height: 100%;
    }
    /* Each set of images (original and duplicated) */
    .mosaic-container {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: repeat(12, 1fr);
      gap: 12px;
      width: 100vw; /* Full viewport width */
      height: 100vh; /* Full viewport height */
      padding: 12px;
      flex-shrink: 0;
    }
    /* Style for all images */
    .mosaic-container .img-container {
      position: relative;
      overflow: hidden;
      border-radius: 8px;
      width: 100%;
      height: 100%;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
    .mosaic-container img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }
    /* Image hover effect */
    .mosaic-container .img-container:hover img {
      transform: scale(1.05);
    }
    /* Random mosaic layout with different image sizes */
    .img-1 {
      grid-column: 1 / span 5;
      grid-row: 1 / span 6;
    }
    .img-2 {
      grid-column: 6 / span 3;
      grid-row: 1 / span 4;
    }
    .img-3 {
      grid-column: 9 / span 4;
      grid-row: 1 / span 5;
    }
    .img-4 {
      grid-column: 6 / span 3;
      grid-row: 5 / span 4;
    }
    .img-5 {
      grid-column: 1 / span 3;
      grid-row: 7 / span 6;
    }
    .img-6 {
      grid-column: 4 / span 5;
      grid-row: 7 / span 6;
    }
    .img-7 {
      grid-column: 9 / span 4;
      grid-row: 6 / span 7;
    }
    /* Second mosaic with different arrangement */
    .mosaic-alt .img-1 {
      grid-column: 1 / span 5;
      grid-row: 1 / span 6;
    }
    .mosaic-alt .img-2 {
      grid-column: 6 / span 3;
      grid-row: 1 / span 4;
    }
    .mosaic-alt .img-3 {
      grid-column: 9 / span 4;
      grid-row: 1 / span 5;
    }
    .mosaic-alt .img-4 {
      grid-column: 6 / span 3;
      grid-row: 5 / span 4;
    }
    .mosaic-alt .img-5 {
      grid-column: 1 / span 3;
      grid-row: 7 / span 6;
    }
    .mosaic-alt .img-6 {
      grid-column: 4 / span 5;
      grid-row: 7 / span 6;
    }
    .mosaic-alt .img-7 {
      grid-column: 9 / span 4;
      grid-row: 6 / span 7;
    }
    /* Keyframes for the sliding animation */
    @keyframes slide {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%); /* Move half the track width for seamless looping */
      }
    }
    /* Fade overlay for smoother transition */
    .fade-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 5%, rgba(0,0,0,0) 95%, rgba(0,0,0,0.5) 100%);
      pointer-events: none;
      z-index: 5;
    }