.swiper-container {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 80%;
   height: 100%;
   max-width: 300px;
   max-height: 50px;
   margin: 0 auto;
   overflow: hidden;
   padding: 5px;
   box-sizing: border-box;
 }

 .swiper-wrapper {
   display: flex;
 }

 .swiper-slide {
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .color-box {
   width: 50px;
   height: 50px;
   border-radius: 8px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   cursor: pointer;
   margin: 0 5px;
 }

 .color-box:hover {
   transform: scale(1.1);
   transition: transform 0.2s;
 }