* { box-sizing: border-box;             }

.gallery-container {
                max-width: 600px;
                width: 100%;
                Xheight: auto;
                position: relative;
                background: WHITE;
                overflow: hidden;
                border-radius: 8px;
                box-shadow: 0 4px 10px rgba(0,0,0,0.1);
                }
.slides {       display: flex;
                transition: transform 0.5s ease;
                width: 100%;
                }
.slide {        min-width: 100%;
                user-select: none;
                }
.slide img {    width: 100%;
                display: block;
                border-radius: 8px 8px 0 0;
                }

/* Navigation arrows */
.arrow {        position: absolute;
                top: 50%;
                transform: translateY(-50%);
                background: rgba(0,0,0,0.4);
                color: white;
                border: none;
                padding: 10px;
                cursor: pointer;
                border-radius: 50%;
                font-size: 18px;
                transition: background 0.3s ease;
                user-select: none;
}
.arrow:hover { background: rgba(0,0,0,0.7);    }
.arrow-left  { left: 10px;                     }
.arrow-right { right: 10px;                    }

/* Dots */
.dots {         text-align: center;
                padding: 12px 0;
                background: white;
                border-radius: 0 0 8px 8px;
     }
.dot {          display: inline-block;
                width: 12px;
                height: 12px;
                margin: 0 6px;
                background: #bbb;
                border-radius: 50%;
                cursor: pointer;
                transition: background 0.3s ease;
    }
.dot.active {   background: #333;   }

/* Responsive scaling */
@media (max-width: 640px)
    {
    .gallery-container { max-width: 90vw;   }
    }