/*******************************************************
 * FIRST SECTION: HERO SLIDER (UNDER HEADER)
 * Non-global: prefixed with .society-hero-*
 *******************************************************/

.society-hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  overflow: hidden;
  background: #000;
}

/* Each slide */
.society-hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  transition: opacity 0.7s ease;
  z-index: 0;
}

.society-hero-slide.active {
  opacity: 1;
  z-index: 1;
}

/* Dark overlay for readability */
.society-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.45) 40%,
    rgba(0, 0, 0, 0.2) 100%
  );
}

/* Text content */
.society-hero-content {
  position: relative;
  z-index: 2;
  max-width: 620px;
  color: #ffffff;
  padding-left: 8%;
  padding-right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.society-hero-content h1 {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 12px;
}

.society-hero-content p {
  font-size: 15px;
  line-height: 1.6;
  color: #f1f1f1;
  margin: 0;
}

/* Circle controls */
.society-hero-dots {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  display: flex;
  gap: 18px;
  z-index: 3;
}

.society-hero-dot {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 3px solid transparent;
  background-color: #ffffff;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  outline: none;
  padding: 0;
  transition: border-color 0.25s ease, transform 0.25s ease,
              filter 0.25s ease, box-shadow 0.25s ease;
  filter: grayscale(100%);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.society-hero-dot.active {
  border-color: #ff7a00;             /* orange border like reference */
  filter: grayscale(0%);
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45);
}

/************ RESPONSIVE ************/
@media (max-width: 992px) {
  .society-hero-section {
    height: 100vh;
    min-height: 380px;
  }

  .society-hero-content {
    padding-left: 6%;
    max-width: 520px;
  }

  .society-hero-content h1 {
    font-size: 26px;
  }

  .society-hero-content p {
    font-size: 14px;
  }

  .society-hero-dot {
    width: 52px;
    height: 52px;
  }
}

@media (max-width: 576px) {
  .society-hero-section {
    height: 100vh;
    min-height: 320px;
  }

  .society-hero-content {
    padding-left: 20px;
    padding-right: 20px;
  }

  .society-hero-content h1 {
    font-size: 22px;
  }

  .society-hero-content p {
    font-size: 13px;
  }

  .society-hero-dots {
    bottom: 22px;
  }

  .society-hero-dot {
    width: 46px;
    height: 46px;
  }
}