html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }
  
  .home-container {
    position: relative;
    overflow: hidden;
    width: 100vw;
    max-width: 100%;
    overscroll-behavior-x: none;
  }
  
  .moving-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('https://i.imgur.com/8jrGxES.png');
    background-repeat: repeat;
    animation: slideBackground 20s linear infinite;
    z-index: -1;
    width: 100%;
  }
  
  .info-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  
  .info-oval {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 25px;
    padding: 15px 20px;
    margin: 0 auto;
    width: 400px;
    height: 60px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: pan-x;
  }
  
  .slideshow-text {
    color: #000;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    text-decoration: none;
  }
  
  .slideshow-text.fade {
    opacity: 0;
  }
  
  .dot-indicators {
    display: flex;
    justify-content: center;
    gap: 8px;
  }
  
  .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ccc;
    cursor: pointer;
  }
  
  .dot.active {
    background: #0c0cf8;
  }
  
  @keyframes slideBackground {
    from {
      background-position: 0 0;
    }
    to {
      background-position: -1000px 0;
    }
  }
  
  @media screen and (max-width: 768px) {
    .home-container {
      overflow-x: hidden;
      touch-action: pan-y pinch-zoom;
    }
    
    .info-oval {
      width: 300px;
    }
  }