.institute-detail {
  background: #ffffff;
}

.institute-detail-hero {
  position: relative;
  min-height: clamp(390px, 36.46vw, 700px);
  background: url("../../assets/images/Institute/institute-hero-bg.png") center top / cover no-repeat;
  color: #ffffff;
}

.institute-detail-hero__content {
  position: absolute;
  top: clamp(100px, 9.27vw, 178px);
  right: clamp(120px, 18.9vw, 363px);
  left: clamp(16px, 20vw, 420px);
  text-align: right;
}

.institute-detail-hero h1 {
  margin: 0 0 clamp(14px, 1.25vw, 24px);
  font-size: clamp(28px, 2.19vw, 42px);
  font-weight: 400;
}

.institute-detail-hero p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(10px, 0.83vw, 16px);
}

.institute-article {
  width: min(1080px, 56.25vw);
  margin: 0 auto;
  padding: clamp(24px, 1.98vw, 38px) 0 clamp(52px, 4.38vw, 84px);
}

.institute-article__breadcrumb {
  margin-bottom: clamp(30px, 2.71vw, 52px);
  color: #747d86;
  font-size: clamp(12px, 0.78vw, 15px);
}

.institute-article__breadcrumb a {
  color: #59636d;
}

.institute-article__header {
  margin-bottom: clamp(52px, 4.58vw, 88px);
  text-align: center;
}

.institute-article__header h2 {
  margin: 0 0 clamp(16px, 1.46vw, 28px);
  color: #1e2730;
  font-size: clamp(22px, 1.67vw, 32px);
  font-weight: 600;
}

.institute-article__header div {
  display: flex;
  justify-content: center;
  gap: clamp(42px, 4.48vw, 86px);
  color: #6d7680;
  font-size: clamp(12px, 0.78vw, 15px);
}

.institute-article__section {
  width: min(820px, 100%);
  margin: 0 auto clamp(36px, 3.02vw, 58px);
  color: #767f88;
}

.institute-article__section h3 {
  margin: 0 0 clamp(12px, 0.94vw, 18px);
  color: #006fb5;
  font-size: clamp(18px, 1.25vw, 24px);
  font-weight: 600;
}

.institute-article__section h4 {
  margin: 0 0 clamp(6px, 0.52vw, 10px);
  color: #222b35;
  font-size: clamp(13px, 0.89vw, 17px);
  font-weight: 600;
}

.institute-article__section p {
  margin: 0 0 clamp(5px, 0.42vw, 8px);
  font-size: clamp(12px, 0.78vw, 15px);
}

@media (max-width: 767px) {
  .institute-detail-hero {
    min-height: 390px;
    background-position: 42% top;
  }

  .institute-detail-hero__content {
    position: static;
    width: calc(100vw - 40px);
    margin: 0 auto;
    padding: 116px 0 0;
    text-align: center;
  }

  .institute-detail-hero h1 {
    margin-bottom: 16px;
    font-size: 30px;
  }

  .institute-detail-hero p {
    font-size: 13px;
  }

  .institute-article {
    width: calc(100vw - 40px);
    padding: 28px 0 54px;
  }

  .institute-article__breadcrumb {
    margin-bottom: 34px;
    font-size: 12px;
  }

  .institute-article__header {
    margin-bottom: 44px;
  }

  .institute-article__header h2 {
    margin-bottom: 18px;
    font-size: 24px;
  }

  .institute-article__header div {
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
  }

  .institute-article__section {
    margin-bottom: 38px;
  }

  .institute-article__section h3 {
    margin-bottom: 14px;
    font-size: 20px;
  }

  .institute-article__section h4 {
    font-size: 15px;
  }

  .institute-article__section p {
    font-size: 13px;
  }

}