* { box-sizing: border-box; margin: 0; padding: 0; }      
.slideshow-wrapper-block {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.slideshow-container { max-width: 1200px; width: 100%; position: relative; margin: auto; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.3); border-radius: 12px; user-select: none; }
.slides-wrapper { display: flex; width: 500%; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); cursor: grab; }
.slides-wrapper:active { cursor: grabbing; }
.mySlides { width: 20%; position: relative; height: 500px; display: flex; align-items: flex-end; }
.mySlides img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: 1; }
.prev, .next { cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); color: white; font-weight: bold; font-size: 20px; transition: 0.3s; border-radius: 50%; background: rgba(0,0,0,0.2); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; z-index: 10; margin: 0 15px; }
.next { right: 0; } .prev { left: 0; }
.prev:hover, .next:hover { background: rgba(0,0,0,0.7); transform: translateY(-50%) scale(1.1); }
@media (max-width: 768px) { .prev, .next { display: none; } .mySlides { height: 300px;}
.text-main h2{font-size: 22px;}
.text-sub h3{font-size: 16px;}
 }
.text-container { position: relative; width: 100%; padding: 40px 20px 60px 20px; text-align: center; background: linear-gradient(transparent, rgba(0,0,0,0.85)); z-index: 5; color: #fff; }
.text-main { white-space:normal; overflow-wrap:anywhere; word-break:break-word; color: #fff; font-size: 16px; max-width: 100%; margin-bottom: 5px; text-shadow: 1px 1px 4px rgba(0,0,0,0.6); }
.text-sub { white-space:normal; overflow-wrap:anywhere; color: #fff; font-size: 14px; opacity: 0.9; text-shadow: 1px 1px 3px rgba(0,0,0,0.6); }
.numbertext { color: #fff; font-size: 13px; padding: 15px; position: absolute; top: 0; z-index: 5; }
.dot-container { text-align: center; position: absolute; bottom: 20px; width: 100%; z-index: 20; }
.dot { cursor: pointer; height: 10px; width: 10px; margin: 0 6px; background: rgba(255,255,255,0.4); border-radius: 50%; display: inline-block; transition: 0.4s; box-shadow: 0 2px 4px rgba(0,0,0,0.4); }
.dot:hover { background: #fff; width: 24px; border-radius: 5px; }