/* Dawah matching public heroes V36 */

/* ==========================================================
   Shared Home-style hero
   ========================================================== */

body.public-application
.p36-page-hero {
  display: grid !important;
  grid-template-columns:
    minmax(0, 1.45fr)
    275px !important;
  gap: 30px !important;
  min-height: 230px !important;
  align-items: center !important;
  margin: 0 0 12px !important;
  padding: 29px 32px !important;
  border:
    1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 23px !important;
  background:
    radial-gradient(
      circle at 86% -30%,
      rgba(202, 239, 111, 0.31),
      transparent 36%
    ),
    radial-gradient(
      circle at -4% 110%,
      rgba(38, 145, 108, 0.28),
      transparent 38%
    ),
    linear-gradient(
      128deg,
      #03382d 0%,
      #075440 62%,
      #0a493a 100%
    ) !important;
  color: #ffffff !important;
  box-shadow:
    0 23px 58px rgba(3, 48, 38, 0.16) !important;
}

body.public-application
.p36-page-hero::after {
  position: absolute;
  z-index: -1;
  right: -95px;
  bottom: -215px;
  width: 390px;
  height: 430px;
  border:
    1px solid rgba(223, 246, 154, 0.13);
  border-radius: 50%;
  content: "";
}

body.public-application
.p36-page-hero .px-home-copy {
  min-width: 0;
}

body.public-application
.p36-page-hero .px-eyebrow {
  color: #def69a !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
}

body.public-application
.p36-page-hero .px-home-copy h1 {
  max-width: 790px !important;
  margin: 8px 0 11px !important;
  color: #ffffff !important;
  font-size:
    clamp(2.3rem, 4.2vw, 4rem) !important;
  font-weight: 570 !important;
  line-height: 0.99 !important;
  letter-spacing: -0.062em !important;
}

body.public-application
.p36-page-hero .px-home-copy > p {
  max-width: 700px !important;
  margin: 0 !important;
  color: #c7d9d0 !important;
  font-size: 0.77rem !important;
  line-height: 1.65 !important;
}

body.public-application
.p36-page-hero .px-home-actions {
  margin-top: 18px !important;
}

body.public-application
.p36-page-hero .px-button {
  min-height: 43px !important;
}

/* Country panel */

body.public-application
.p36-country-panel {
  align-self: stretch !important;
  min-height: 170px !important;
  padding: 15px !important;
  border:
    1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 18px !important;
  background:
    rgba(255, 255, 255, 0.09) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
}

body.public-application
.p36-country-panel .px-flag-frame {
  border-color:
    rgba(255, 255, 255, 0.16) !important;
  background:
    rgba(255, 255, 255, 0.11) !important;
}

body.public-application
.p36-country-panel small {
  color: #bcd1c6 !important;
}

body.public-application
.p36-country-panel strong {
  color: #ffffff !important;
}

body.public-application
.p36-country-panel .px-home-stat {
  border-color:
    rgba(255, 255, 255, 0.13) !important;
  background:
    rgba(255, 255, 255, 0.045) !important;
}

body.public-application
.p36-country-panel
.px-home-stat > strong {
  color: #def69a !important;
}

body.public-application
.p36-country-panel
.px-home-stat > span {
  color: #d4e2db !important;
}

body.public-application
.p36-country-panel > a {
  color: #eaf3ee !important;
}

body.public-application
.p36-country-panel
.p36-text-stat {
  font-size: 1.13rem !important;
}

/* ==========================================================
   Page spacing
   ========================================================== */

body.public-application
.d7-directory,
body.public-application
.l32-directory {
  padding-top: 28px !important;
}

body.public-application
.svc29-page {
  margin-top: 28px !important;
}

body.public-application
.px-directory {
  padding-top: 28px !important;
}

/* ==========================================================
   Taleem filter panel
   ========================================================== */

body.public-application
.d7-finder.d36-filter-surface {
  padding: 11px !important;
  border: 1px solid #dce6dd !important;
  border-radius: 17px !important;
  background: #ffffff !important;
  color: #153e33 !important;
  box-shadow:
    0 11px 31px rgba(6, 53, 42, 0.06) !important;
  scroll-margin-top: 94px;
}

body.public-application
.d36-filter-surface::before {
  display: none !important;
}

body.public-application
.d36-filter-surface .d7-search {
  border: 1px solid #dce6dd !important;
  box-shadow:
    0 6px 18px rgba(4, 48, 38, 0.055) !important;
}

body.public-application
.d36-filter-surface .d7-filter-rail {
  gap: 9px !important;
  margin-top: 9px !important;
}

body.public-application
.d36-filter-surface .d7-filter {
  border: 1px solid #dfe8df !important;
  background: #f1f6ef !important;
  color: #153e33 !important;
  box-shadow: none !important;
}

body.public-application
.d36-filter-surface .d7-filter:hover,
body.public-application
.d36-filter-surface .d7-filter:focus-within {
  border-color: #a9c3ad !important;
  background: #eaf2e5 !important;
  transform: none !important;
}

body.public-application
.d36-filter-surface .d7-filter > span {
  color: #71857b !important;
}

body.public-application
.d36-filter-surface .d7-picker-button,
body.public-application
.d36-filter-surface .d7-filter select {
  color: #153e33 !important;
}

body.public-application
.d36-filter-surface
.d7-picker-button::after {
  border-color: #527166 !important;
}

body.public-application
.d36-filter-surface .d7-filter-footer span {
  color: #71847b !important;
}

body.public-application
.d36-filter-surface .d7-filter-footer a {
  color: #075440 !important;
}

/* ==========================================================
   Listen filter panel
   ========================================================== */

body.public-application
.l34-discovery.l36-filter-surface {
  padding: 11px !important;
  border: 1px solid #dce6dd !important;
  border-radius: 17px !important;
  background: #ffffff !important;
  color: #153e33 !important;
  box-shadow:
    0 11px 31px rgba(6, 53, 42, 0.06) !important;
  scroll-margin-top: 94px;
}

body.public-application
.l36-filter-surface::after {
  display: none !important;
}

body.public-application
.l36-filter-surface .l34-search {
  border: 1px solid #dce6dd !important;
  background: #f8fbf7 !important;
  box-shadow:
    0 6px 18px rgba(4, 48, 38, 0.055) !important;
}

body.public-application
.l36-filter-surface .l34-filter-rail {
  gap: 9px !important;
  margin-top: 9px !important;
}

body.public-application
.l36-filter-surface .l34-filter {
  border: 1px solid #dfe8df !important;
  background: #f1f6ef !important;
  color: #153e33 !important;
}

body.public-application
.l36-filter-surface .l34-filter:hover,
body.public-application
.l36-filter-surface .l34-filter:focus-within {
  border-color: #a9c3ad !important;
  background: #eaf2e5 !important;
}

body.public-application
.l36-filter-surface
.l34-filter > span:first-child {
  color: #71857b !important;
}

body.public-application
.l36-filter-surface
.l34-filter .u35-select-button,
body.public-application
.l36-filter-surface
.l34-filter select {
  color: #153e33 !important;
}

body.public-application
.l36-filter-surface
.l34-filter .u35-select-button::after {
  border-color: #527166 !important;
}

body.public-application
.l36-filter-surface
.l34-filter-footer span {
  color: #71847b !important;
}

body.public-application
.l36-filter-surface
.l34-filter-footer a {
  color: #075440 !important;
}

/* ==========================================================
   Downloads filters
   ========================================================== */

body.public-application
#download-filters {
  scroll-margin-top: 94px;
}

body.public-application
#download-results,
body.public-application
#service-directory,
body.public-application
#listen-library,
body.public-application
#taleem-results {
  scroll-margin-top: 94px;
}

/* ==========================================================
   Services after the hero
   ========================================================== */

body.public-application
.p36-services-hero +
.svc29-categories {
  margin-top: 12px !important;
}

/* ==========================================================
   Tablet
   ========================================================== */

@media (max-width: 900px) {
  body.public-application
  .p36-page-hero {
    grid-template-columns:
      minmax(0, 1fr)
      245px !important;
    gap: 20px !important;
    padding: 25px !important;
  }

  body.public-application
  .p36-page-hero
  .px-home-copy h1 {
    font-size:
      clamp(2.15rem, 5vw, 3.2rem) !important;
  }
}

/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 760px) {
  body.public-application
  .d7-directory,
  body.public-application
  .l32-directory {
    padding-top: 12px !important;
  }

  body.public-application
  .svc29-page {
    margin-top: 11px !important;
  }

  body.public-application
  .px-directory {
    padding-top: 11px !important;
  }

  body.public-application
  .p36-page-hero {
    grid-template-columns: 1fr !important;
    gap: 17px !important;
    min-height: 0 !important;
    padding: 21px 18px !important;
    border-radius: 19px !important;
  }

  body.public-application
  .p36-page-hero
  .px-home-copy h1 {
    margin-top: 6px !important;
    font-size: 2.25rem !important;
  }

  body.public-application
  .p36-page-hero
  .px-home-copy > p {
    font-size: 0.72rem !important;
  }

  body.public-application
  .p36-page-hero
  .px-home-actions {
    margin-top: 15px !important;
  }

  body.public-application
  .p36-country-panel {
    min-height: 0 !important;
    padding: 13px !important;
    border-radius: 15px !important;
  }

  body.public-application
  .d7-finder.d36-filter-surface,
  body.public-application
  .l34-discovery.l36-filter-surface {
    padding: 9px !important;
    border-radius: 15px !important;
  }

  body.public-application
  .d36-filter-surface .d7-filter-rail,
  body.public-application
  .l36-filter-surface .l34-filter-rail {
    gap: 7px !important;
  }
}

/* Small phones */

@media (max-width: 430px) {
  body.public-application
  .p36-page-hero {
    padding: 19px 16px !important;
  }

  body.public-application
  .p36-page-hero
  .px-home-copy h1 {
    font-size: 2rem !important;
  }

  body.public-application
  .p36-page-hero
  .px-home-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  body.public-application
  .p36-page-hero
  .px-button {
    width: 100% !important;
    justify-content: center !important;
  }
}