@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Noto+Serif+Bengali:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; }
body { margin: 0; background: #fcf8f1; color: #27333c; font: 14px 'DM Sans', 'Noto Serif Bengali', sans-serif; }
.directory-page { max-width: 1320px; margin: 0 auto; padding: 30px 0 88px; }
.directory-hero {
  height: 210px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  color: #fff;
  background: linear-gradient(110deg, #062a21b8, #062a216e), url('../images/hero.webp') center/cover;
}
.directory-hero h1 { margin: 0; font: 600 34px 'Noto Serif Bengali', serif; }
.directory-hero p { margin: 7px 0 0; font: 400 16px 'Noto Serif Bengali', serif; color: #edf6f1; }
.directory-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 28px; }
.directory-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d8e2ea;
  border-radius: 7px;
  padding: 10px 18px;
  background: #f3f7fb;
  color: #53616b;
  cursor: pointer;
  font: 600 14px 'Noto Serif Bengali', serif;
  transition: .2s ease;
}
.directory-tab:hover { border-color: #9cb4c3; transform: translateY(-1px); }
.directory-tab.is-active { border-color: #075c43; background: #075c43; color: #fff; }
.directory-tab svg { width: 17px; height: 17px; flex: 0 0 auto; }
.directory-panel { display: none; }
.directory-panel.is-active { display: block; }
.panel-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 17px; }
.panel-heading h2 { margin: 0; font: 600 25px 'Noto Serif Bengali', serif; }
.panel-heading p { margin: 0; color: #7c8790; font: 13px 'Noto Serif Bengali', serif; }
.coming-card {
  width: min(760px, 100%);
  min-height: 220px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border: 1px dashed #c9d9d0;
  border-radius: 12px;
  background: linear-gradient(140deg, #f5fbf7, #fffdf8);
  text-align: center;
}
.coming-inner { max-width: 420px; padding: 24px 24px; }
.coming-icon { width: 54px; height: 54px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 50%; background: #e2f1e9; color: #167150; }
.coming-icon svg { width: 27px; height: 27px; }
.coming-inner h3 { margin: 0; font: 600 23px 'Noto Serif Bengali', serif; color: #253d35; }
.coming-inner p { margin: 9px 0 0; color: #728079; font: 14px/1.7 'Noto Serif Bengali', serif; }

/* Keep the "coming soon" message light and integrated with the sky background. */
.directory-panel .coming-card {
  min-height: 190px;
  background: transparent;
  border: 0;
}
.directory-panel .coming-inner {
  width: min(500px, 100%);
  padding: 25px 32px;
  border: 1px solid #cfe7f0;
  border-radius: 16px;
  background: linear-gradient(145deg, #ffffff, #eaf7fc);
  box-shadow: 0 10px 28px rgba(46, 104, 129, .08);
}
@media (max-width: 1360px) { .directory-page { margin: 0 20px; } }
@media (max-width: 600px) {
  .directory-page { padding-top: 20px; padding-bottom: 60px; }
  .directory-hero { height: 185px; }
  .directory-hero h1 { font-size: 29px; }
  .directory-hero p { font-size: 14px; }
  .directory-tabs { gap: 8px; }
  .directory-tab { padding: 9px 12px; font-size: 12px; }
  .panel-heading { display: block; }
  .panel-heading p { margin-top: 6px; }
}