:root {
--swiper-theme-color: #fff;
}
html,
body {position: relative;height: 100%;width:100%;}
body {background:#222;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size:14px;color:#000;margin:0;padding:0;overflow:hidden;}


.preloader {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.6);display: flex;justify-content: center;align-items: center;z-index: 9999;}
.preloader .spin {border: 5px solid #f3f3f3;border-top: 5px solid #ff0000;border-radius: 50%;width: 25px;height: 25px;animation: spin 1.5s linear infinite;}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.mySwiper{width:100%;height:calc(100% - 250px);overflow:hidden;padding:20px 0;}
.mySwiper .swiper-slide {background-position: center;background-size: cover;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;position: relative;}
.mySwiper .swiper-slide img {display: block;max-width: 100%;max-height: 100%;}

.swiper-pagination{width:100%;display:flex;flex-direction:row;overflow:scroll;padding:0 5px;}
.swiper-pagination:::-webkit-scrollbar {width:0;height:0;}
.swiper-pagination .swiper-pagination-bullet{max-width:30px;flex:0 0 30px;height:25px;border-radius:5px;line-height:25px;background:#000;opacity:1;color:#fff;user-select:none;}
.swiper-pagination .swiper-pagination-bullet-active{background:#fff;color:#000;}
.mySwiper .swiper-slide img {transition:transform 0.3s ease;}

.zoom-controls {position: absolute;top: 10px;right: 10px;z-index: 10;display: flex;gap: 5px;}
.zoom-controls button {background: rgba(0, 0, 0, 0.5);color: white;border: none;padding: 5px;border-radius: 5px;cursor: pointer;}

.mySwiperThumb{height:250px;padding-left:10px;}
.mySwiperThumb .swiper-slide{width:auto;height:175px;padding:10px;}
.mySwiperThumb .swiper-slide img{width:100%;height:100%;object-fit:contain;}