/* ************************ COVER SLIDE - BEGIN ******************************* */
/* ---------- Слайдерийн үндсэн хэсэг ---------- */

#___sss___ {
  position: relative;
  width: 100%;
  overflow: hidden;
}

#___sss___ > div {
  position: relative;
}

/* ---------- Лого ба гарчиг ---------- */
#___sss___ .____sl____,
#___sss___ h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2; /* overlay-гийн дээр гаргах */
  text-align: center;
  color: white;
}

.____sl____ {
  width: 160px;
  margin-bottom: 1rem;
}

#___sss___ h2 {
  font-size: clamp(1.4rem, 2vw + 1rem, 2.4rem);
  font-weight: 400;
  margin-top: 80px; /* логотой бага зэрэг зайтай */
}

/* ---------- Слайдууд ---------- */
#___sss___ picture img {
  width: 100%;
  height: auto;
  display: block;
}

/* Слайд бүр */
#___sss___ [id^="___sss1___"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* зураг бүрэн дүүрэн байх */
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

#___sss___ [id^="___sss1___"].active {
  opacity: 1;
  position: relative;
}

/* ---------- Дэвсгэр (overlay) ---------- */
#___sss___ [id^="___sss1___"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7); /* 70% хар дэвсгэр */
  transition: background 0.4s ease;
  z-index: 1;
}

#___sss___ [id^="___sss1___"]:hover::after {
  background: rgba(0, 0, 0, 0.2); /* hover үед 20% */
}

/* ---------- Товчлуурууд ---------- */
.__prev_s__,
.__next_s__ {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0);
  /* border: none; */
  border-style: solid;
  border-width: 1px;
  border-color: white;
  border-radius: 50%;
  font-size: 2rem;
  padding: 0.3rem 0.7rem;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
  z-index: 5;
  color:white
}

.__prev_s__:hover,
.__next_s__:hover {
  background: rgba(255, 255, 255, 0.8);
}

.__prev_s__ {
  left: 15px;
}

.__next_s__ {
  right: 15px;
}

/* ---------- Responsive ---------- */
@media screen and (max-width: 768px) {
  .__prev_s__,
  .__next_s__ {
    font-size: 1.5rem;
    padding: 0.2rem 0.5rem;
  }

  /* logo */
  .____sl____ {
    width: 120px;
  }

  /* section */
  #___sss___ h2 {
    font-size: 1.3rem;
  }
}

@media screen and (max-width: 480px) {
  #___sss___ h2 {
    font-size: 1.2rem;
  }
}

/* ************************ COVER SLIDE - END ******************************* */