.carousel-container {
      position: relative;
      width: 100%;
      max-width: 800px;
      margin: 0 auto;
      overflow: hidden;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    
    .carousel-track {
      display: flex;
      transition: transform 0.3s ease-out;
    }
    
    .carousel-slide {
      flex: 0 0 100%;
      min-width: 100%;
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      color: white;
      user-select: none;
    }
    
    .carousel-slide:nth-child(1) { background-color: #3498db; }
    .carousel-slide:nth-child(2) { background-color: #e74c3c; }
    .carousel-slide:nth-child(3) { background-color: #2ecc71; }
    .carousel-slide:nth-child(4) { background-color: #f39c12; }
    .carousel-slide:nth-child(5) { background-color: #9b59b6; }
    
    .carousel-button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(255, 255, 255, 0.7);
      border: none;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      font-size: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      transition: all 0.2s ease;
      z-index: 10;
    }
    
    .carousel-button:hover {
      background-color: rgba(255, 255, 255, 0.9);
    }
    
    .carousel-button:focus {
      outline: none;
    }
    
    .carousel-button.hidden {
      opacity: 0;
      pointer-events: none;
    }
    
    .carousel-button.prev {
      left: 10px;
    }
    
    .carousel-button.next {
      right: 10px;
    }
    
    .carousel-indicator {
      display: flex;
      justify-content: center;
      margin-top: 15px;
    }
    
    .carousel-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #bbb;
      margin: 0 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    
    .carousel-dot.active {
      background-color: #333;
    }
    
    @media (max-width: 600px) {
      .carousel-slide {
        height: 200px;
        font-size: 18px;
      }
      
      .carousel-button {
        width: 30px;
        height: 30px;
        font-size: 14px;
      }
    }