:root {
  --arrow-color: white;
  --arrow-bg: rgba(0,0,0,0.3);
  --arrow-bg-hover: rgba(0,0,0,0.6);
  --dot-size: 14px;
  --dot-color: #bbb;
  --dot-active: #333;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}
#sliders-overflow{
height: 100%;
overflow: scroll;
  }

.gallery-title {
  text-align: left;
margin: 8px 0px !important;
font-size: 13px;


}

.slider {
  position: relative;
  width: 100%;
  
}

.slides {
  display: flex;
  overflow: hidden;
  width: 100%;
     height: 80%;
  position: relative;
}

.slide {
  flex: 1 0 100%;
  opacity: 0;

  position: absolute;
  top: 0;
  left: 0;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

input[type="radio"] {
  display: none;
}

/* Hide all slides by default */
.slider input:checked ~ .slides .slide {
  opacity: 0;
  position: absolute;
}

/* Active slides */
#gallery1 #slide1-1:checked ~ .slides .s1,
#gallery1 #slide1-2:checked ~ .slides .s2,
#gallery1 #slide1-3:checked ~ .slides .s3,
#gallery1 #slide1-4:checked ~ .slides .s4,
#gallery1 #slide1-5:checked ~ .slides .s5,
#gallery1 #slide1-6:checked ~ .slides .s6,
#gallery1 #slide1-7:checked ~ .slides .s7,
#gallery1 #slide1-8:checked ~ .slides .s8,
#gallery1 #slide1-9:checked ~ .slides .s9,
#gallery1 #slide1-10:checked ~ .slides .s10,
#gallery1 #slide1-11:checked ~ .slides .s11,
#gallery1 #slide1-12:checked ~ .slides .s12,
#gallery1 #slide1-13:checked ~ .slides .s13,
#gallery1 #slide1-14:checked ~ .slides .s14,
#gallery1 #slide1-15:checked ~ .slides .s15,
#gallery1 #slide1-16:checked ~ .slides .s16,
#gallery1 #slide1-17:checked ~ .slides .s17,
#gallery1 #slide1-18:checked ~ .slides .s18,
#gallery1 #slide1-19:checked ~ .slides .s19,
#gallery1 #slide1-20:checked ~ .slides .s20,
#gallery1 #slide1-21:checked ~ .slides .s21,
#gallery1 #slide1-22:checked ~ .slides .s22,
#gallery1 #slide1-23:checked ~ .slides .s23,
#gallery1 #slide1-24:checked ~ .slides .s24,
#gallery1 #slide1-25:checked ~ .slides .s25,
#gallery1 #slide1-26:checked ~ .slides .s26,
#gallery1 #slide1-27:checked ~ .slides .s27,
#gallery1 #slide1-28:checked ~ .slides .s28 {
  opacity: 1;
  position: relative;
}

#gallery2 #slide2-1:checked ~ .slides .s1,
#gallery2 #slide2-2:checked ~ .slides .s2,
#gallery2 #slide2-3:checked ~ .slides .s3,
#gallery2 #slide2-4:checked ~ .slides .s4,
#gallery2 #slide2-5:checked ~ .slides .s5,
#gallery2 #slide2-6:checked ~ .slides .s6,
#gallery2 #slide2-7:checked ~ .slides .s7,
#gallery2 #slide2-8:checked ~ .slides .s8,
#gallery2 #slide2-9:checked ~ .slides .s9,
#gallery2 #slide2-10:checked ~ .slides .s10,
#gallery2 #slide2-11:checked ~ .slides .s11,
#gallery2 #slide2-12:checked ~ .slides .s12,
#gallery2 #slide2-13:checked ~ .slides .s13,
#gallery2 #slide2-14:checked ~ .slides .s14,
#gallery2 #slide2-15:checked ~ .slides .s15,
#gallery2 #slide2-16:checked ~ .slides .s16,
#gallery2 #slide2-17:checked ~ .slides .s17,
#gallery2 #slide2-18:checked ~ .slides .s18,
#gallery2 #slide2-19:checked ~ .slides .s19,
#gallery2 #slide2-20:checked ~ .slides .s20,
#gallery2 #slide2-21:checked ~ .slides .s21,
#gallery2 #slide2-22:checked ~ .slides .s22,
#gallery2 #slide2-23:checked ~ .slides .s23,
#gallery2 #slide2-24:checked ~ .slides .s24,
#gallery2 #slide2-25:checked ~ .slides .s25,
#gallery2 #slide2-26:checked ~ .slides .s26,
#gallery2 #slide2-27:checked ~ .slides .s27,
#gallery2 #slide2-28:checked ~ .slides .s28 {
  opacity: 1;
  position: relative;
}







#gallery2 #slide2-1:checked ~ .navigation label[for="slide2-1"],
#gallery2 #slide2-2:checked ~ .navigation label[for="slide2-2"],
#gallery2 #slide2-3:checked ~ .navigation label[for="slide2-3"],
#gallery2 #slide2-4:checked ~ .navigation label[for="slide2-4"],
#gallery2 #slide2-5:checked ~ .navigation label[for="slide2-5"],
#gallery2 #slide2-6:checked ~ .navigation label[for="slide2-6"],
#gallery2 #slide2-7:checked ~ .navigation label[for="slide2-7"],
#gallery2 #slide2-8:checked ~ .navigation label[for="slide2-8"],
#gallery2 #slide2-9:checked ~ .navigation label[for="slide2-9"],
#gallery2 #slide2-10:checked ~ .navigation label[for="slide2-10"],
#gallery2 #slide2-11:checked ~ .navigation label[for="slide2-11"],
#gallery2 #slide2-12:checked ~ .navigation label[for="slide2-12"],
#gallery2 #slide2-13:checked ~ .navigation label[for="slide2-13"],
#gallery2 #slide2-14:checked ~ .navigation label[for="slide2-14"],
#gallery2 #slide2-15:checked ~ .navigation label[for="slide2-15"],
#gallery2 #slide2-16:checked ~ .navigation label[for="slide2-16"],
#gallery2 #slide2-17:checked ~ .navigation label[for="slide2-17"],
#gallery2 #slide2-18:checked ~ .navigation label[for="slide2-18"],
#gallery2 #slide2-19:checked ~ .navigation label[for="slide2-19"],
#gallery2 #slide2-20:checked ~ .navigation label[for="slide2-20"],
#gallery2 #slide2-21:checked ~ .navigation label[for="slide2-21"],
#gallery2 #slide2-22:checked ~ .navigation label[for="slide2-22"],
#gallery2 #slide2-23:checked ~ .navigation label[for="slide2-23"],
#gallery2 #slide2-24:checked ~ .navigation label[for="slide2-24"],
#gallery2 #slide2-25:checked ~ .navigation label[for="slide2-25"],
#gallery2 #slide2-26:checked ~ .navigation label[for="slide2-26"],
#gallery2 #slide2-27:checked ~ .navigation label[for="slide2-27"],
#gallery2 #slide2-28:checked ~ .navigation label[for="slide2-28"] {
  background-color: var(--dot-active);
}


.navigation {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 12px 0px;
}

.navigation label {
  cursor: pointer;
  height: var(--dot-size);
  width: var(--dot-size);
  margin: 3px 5px;
  background-color: var(--dot-color);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.navigation label:hover {
  background-color: #717171;
}

/* Active dot color */
#gallery1 #slide1-1:checked ~ .navigation label[for="slide1-1"],
#gallery1 #slide1-2:checked ~ .navigation label[for="slide1-2"],
#gallery1 #slide1-3:checked ~ .navigation label[for="slide1-3"],
#gallery1 #slide1-4:checked ~ .navigation label[for="slide1-4"],
#gallery1 #slide1-5:checked ~ .navigation label[for="slide1-5"],
#gallery1 #slide1-6:checked ~ .navigation label[for="slide1-6"],
#gallery1 #slide1-7:checked ~ .navigation label[for="slide1-7"],
#gallery1 #slide1-8:checked ~ .navigation label[for="slide1-8"],
#gallery1 #slide1-9:checked ~ .navigation label[for="slide1-9"],
#gallery1 #slide1-10:checked ~ .navigation label[for="slide1-10"],
#gallery1 #slide1-11:checked ~ .navigation label[for="slide1-11"],
#gallery1 #slide1-12:checked ~ .navigation label[for="slide1-12"],
#gallery1 #slide1-13:checked ~ .navigation label[for="slide1-13"],
#gallery1 #slide1-14:checked ~ .navigation label[for="slide1-14"],
#gallery1 #slide1-15:checked ~ .navigation label[for="slide1-15"],
#gallery1 #slide1-16:checked ~ .navigation label[for="slide1-16"],
#gallery1 #slide1-17:checked ~ .navigation label[for="slide1-17"],
#gallery1 #slide1-18:checked ~ .navigation label[for="slide1-18"],
#gallery1 #slide1-19:checked ~ .navigation label[for="slide1-19"],
#gallery1 #slide1-20:checked ~ .navigation label[for="slide1-20"],
#gallery1 #slide1-21:checked ~ .navigation label[for="slide1-21"],
#gallery1 #slide1-22:checked ~ .navigation label[for="slide1-22"],
#gallery1 #slide1-23:checked ~ .navigation label[for="slide1-23"],
#gallery1 #slide1-24:checked ~ .navigation label[for="slide1-24"],
#gallery1 #slide1-25:checked ~ .navigation label[for="slide1-25"],
#gallery1 #slide1-26:checked ~ .navigation label[for="slide1-26"],
#gallery1 #slide1-27:checked ~ .navigation label[for="slide1-27"],
#gallery1 #slide1-28:checked ~ .navigation label[for="slide1-28"] {
  background-color: var(--dot-active);
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);                                      
  font-size: 2rem;
  color: var(--arrow-color);
  background: var(--arrow-bg);
  padding: 3px;
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  transition: background 0.3s;
  z-index: 10;
}


.arrow:hover {
  background: var(--arrow-bg-hover);
}

.arrow.prev { left: 1rem; }
.arrow.next { right: 1rem; }