:root {
   --forest: #0c3828;
   --emerald: #14563b;
   --green: #16834a;
   --mint: #e8f3ec;
   --ivory: #faf9f5;
   --paper: #fff;
   --ink: #202923;
   --muted: #68736b;
   --line: #e3e9e4;
   --gold: #c5a66a;
   --serif: Georgia, "Times New Roman", serif;
   --sans: "DM Sans", Arial, sans-serif;
   --display: Manrope, "DM Sans", sans-serif;
   --arabic: "Noto Naskh Arabic", serif;
   --container: 1160px;
   --shadow: 0 20px 55px rgba(12, 56, 40, .11)
}

* {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: 90px
}

body {
   margin: 0;
   background: var(--ivory);
   color: var(--ink);
   font-family: var(--sans);
   font-size: 16px;
   line-height: 1.7;
   -webkit-font-smoothing: antialiased
}

img {
   display: block;
   max-width: 100%
}

a {
   color: inherit;
   text-decoration: none
}

button,
input,
select,
textarea {
   font: inherit
}

button,
a,
select {
   -webkit-tap-highlight-color: transparent
}

::selection {
   background: #cde4d4;
   color: var(--forest)
}

.container {
   width: min(var(--container), calc(100% - 52px));
   margin-inline: auto
}

.skip-link {
   position: absolute;
   left: 16px;
   top: -60px;
   background: #fff;
   padding: 10px 16px;
   z-index: 2000
}

.skip-link:focus {
   top: 12px
}

:focus-visible {
   outline: 3px solid var(--gold);
   outline-offset: 4px
}

.section-pad {
   padding: 104px 0
}

.eyebrow {
   display: block;
   color: var(--green);
   font-size: .75rem;
   font-weight: 700;
   letter-spacing: .15em;
   text-transform: uppercase
}

.site-header {
   height: 82px;
   position: sticky;
   top: 0;
   z-index: 1000;
   background: rgba(250, 249, 245, .96);
   border-bottom: 1px solid rgba(12, 56, 40, .08);
   backdrop-filter: blur(12px)
}

.header-content {
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 30px
}

.brand {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   flex-shrink: 0
}

.brand img {
   width: 48px;
   height: 48px
}

.brand-copy {
   display: grid;
   line-height: 1.3
}

.brand-copy strong {
   font-family: var(--display);
   font-size: .91rem;
   letter-spacing: .035em;
   text-transform: uppercase;
   color: var(--forest)
}

.brand-copy small {
   color: var(--muted);
   font-size: .62rem;
   letter-spacing: .035em
}

.primary-nav {
   display: flex;
   align-items: center;
   gap: clamp(18px, 2.6vw, 38px);
   font-size: .85rem;
   font-weight: 600
}

.primary-nav>a:not(.nav-contact) {
   color: #46534a;
   transition: color .2s
}

.primary-nav>a:not(.nav-contact):hover {
   color: var(--green)
}

.nav-contact {
   padding: 11px 17px;
   border-radius: 4px;
   background: var(--forest);
   color: #fff;
   transition: background .2s
}

.nav-contact:hover {
   background: var(--green)
}

.nav-contact span {
   margin-left: 7px
}

.menu-toggle {
   display: none
}

.hero {
   position: relative;
   isolation: isolate;
   min-height: min(780px, calc(100svh - 82px));
   display: flex;
   align-items: center;
   color: #fff;
   background: var(--forest);
   overflow: hidden
}

.hero-image,
.hero-shade {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%
}

.hero-image {
   object-fit: cover;
   object-position: center 52%;
   z-index: -2
}

.hero-shade {
   z-index: -1;
   background: linear-gradient(90deg, rgba(6, 31, 21, .82), rgba(6, 31, 21, .55) 48%, rgba(6, 31, 21, .16)), linear-gradient(0deg, rgba(6, 31, 21, .42), transparent 48%)
}

.hero-content {
   padding-top: 76px;
   padding-bottom: 100px
}

.hero-eyebrow {
   color: #e2c98d;
   margin-bottom: 20px
}

.hero h1 {
   font: 600 clamp(2rem, 4.5vw, 4rem)/1.5 var(--arabic);
   max-width: 900px;
   margin: 0 0 2px;
   text-shadow: 0 2px 20px #0005
}

.hero h2 {
   font: 700 clamp(2.8rem, 6vw, 5.6rem)/1.08 var(--display);
   letter-spacing: -.055em;
   margin: 0
}

.hero-content>p {
   font-size: clamp(1rem, 1.5vw, 1.23rem);
   color: #f1f2ec;
   margin: 21px 0 30px
}

.hero-actions {
   display: flex;
   align-items: center;
   gap: 25px
}

.button {
   min-height: 48px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 13px;
   padding: 12px 20px;
   border: 1px solid transparent;
   border-radius: 3px;
   font-weight: 700;
   font-size: .88rem;
   cursor: pointer;
   transition: transform .2s, background .2s, color .2s
}

.button:hover {
   transform: translateY(-2px)
}

.button-light {
   background: var(--ivory);
   color: var(--forest)
}

.text-link {
   font-size: .88rem;
   font-weight: 600;
   color: #fff;
   border-bottom: 1px solid #ffffff80;
   padding: 9px 0
}

.hero-caption {
   position: absolute;
   right: max(26px, calc((100vw - var(--container))/2));
   bottom: 31px;
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: .7rem;
   letter-spacing: .11em;
   text-transform: uppercase;
   color: #fff
}

.hero-caption i {
   width: 4px;
   height: 4px;
   border-radius: 50%;
   background: var(--gold)
}

.about-section {
   background: var(--ivory)
}

.section-heading {
   max-width: 690px;
   margin-bottom: 48px
}

.section-heading h2,
.events-inner h2 {
   font: 700 clamp(2.4rem, 4.2vw, 4rem)/1.12 var(--display);
   letter-spacing: -.055em;
   color: var(--forest);
   margin: 13px 0
}

.section-heading h2 em {
   font-family: var(--serif);
   font-weight: 400;
   color: var(--green)
}

.section-heading>p {
   color: var(--muted);
   margin: 12px 0 0
}

.about-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: clamp(34px, 6vw, 84px);
   padding-top: 32px;
   border-top: 1px solid var(--line)
}

.about-copy {
   font-size: .98rem;
   color: #4f5c53
}

.about-copy p {
   margin: 0 0 18px
}

.language-label {
   display: block;
   font-size: .76rem;
   letter-spacing: .12em;
   color: var(--green);
   font-weight: 700;
   text-transform: uppercase;
   margin-bottom: 16px
}

.arabic-text {
   font: 400 1.05rem/2.05 var(--arabic);
   text-align: right
}

.arabic-text .language-label {
   font: 700 .85rem/1.7 var(--arabic);
   letter-spacing: 0;
   text-transform: none
}

.programs-section {
   background: var(--forest);
   color: #fff
}

.section-heading-light .eyebrow {
   color: #d2b878
}

.section-heading-light h2 {
   color: #fff
}

.section-heading-light>p {
   color: #c5d1c9
}

.program-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 1px;
   background: #ffffff26;
   border: 1px solid #ffffff26
}

.program-card {
   min-height: 222px;
   background: var(--forest);
   padding: 30px 30px 35px;
   transition: background .2s
}

.program-card:hover {
   background: #124833
}

.program-icon {
   display: grid;
   place-items: center;
   width: 42px;
   height: 42px;
   margin-bottom: 22px;
   border: 1px solid #c5a66a80;
   border-radius: 50%;
   color: #dfc889;
   font: 600 1.25rem var(--arabic)
}

.program-card h3 {
   font: 700 1.15rem var(--display);
   margin: 0 0 7px
}

.program-card p {
   max-width: 290px;
   margin: 0;
   color: #c2cec5;
   font-size: .91rem;
   line-height: 1.65
}

.program-card-feature {
   background: #124833
}

.gallery-section {
   background: #fff
}

.gallery-section .section-heading {
   margin-bottom: 36px
}

.gallery-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   grid-auto-rows: 210px;
   gap: 14px
}

.gallery-item {
   margin: 0;
   overflow: hidden;
   background: var(--mint)
}

.gallery-item-tall {
   grid-row: span 2
}

.gallery-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .5s
}

.gallery-item:hover img {
   transform: scale(1.04)
}

.lazy-img {
   opacity: 0;
   filter: blur(12px);
   transition: opacity .45s ease, filter .45s ease
}

.lazy-img.loaded {
   opacity: 1;
   filter: blur(0)
}

.events-section {
   background: var(--mint);
   text-align: center
}

.events-inner {
   max-width: 690px
}

.events-inner .eyebrow {
   color: var(--green)
}

.events-inner h2 {
   margin: 12px 0
}

.events-inner>p {
   color: var(--muted);
   margin: 0 auto 24px
}

.button-outline {
   border-color: #a6b8aa;
   color: var(--forest);
   background: transparent
}

.button-outline:hover {
   background: #fff
}

.archive-section {
   position: relative;
   isolation: isolate;
   min-height: 430px;
   display: flex;
   align-items: center;
   overflow: hidden;
   background: var(--forest);
   color: #fff
}

.archive-image,
.archive-shade {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   z-index: -2;
   object-fit: cover;
   object-position: center 48%
}

.archive-shade {
   z-index: -1;
   background: linear-gradient(90deg, rgba(6, 31, 21, .84), rgba(6, 31, 21, .48) 68%, rgba(6, 31, 21, .3))
}

.archive-content {
   padding-block: 80px
}

.archive-content .eyebrow {
   color: #dfc889
}

.archive-content h2 {
   font: 700 clamp(2.5rem, 5vw, 4.5rem)/1.1 var(--display);
   letter-spacing: -.05em;
   margin: 12px 0
}

.archive-content p {
   max-width: 460px;
   color: #e5e9e4
}

.contact-section {
   background: var(--ivory)
}

.contact-grid {
   display: grid;
   grid-template-columns: .9fr 1.1fr;
   background: #fff;
   box-shadow: var(--shadow)
}

.contact-panel {
   position: relative;
   min-height: 620px;
   overflow: hidden;
   background: var(--forest);
   color: #fff
}

.contact-photo {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center
}

.contact-panel::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(0deg, rgba(7, 35, 23, .92), rgba(7, 35, 23, .04) 75%)
}

.contact-panel-copy {
   position: absolute;
   z-index: 1;
   left: clamp(24px, 4vw, 52px);
   right: clamp(24px, 4vw, 52px);
   bottom: 42px
}

.contact-panel-copy .eyebrow {
   color: #e3ca8e
}

.contact-panel-copy h2 {
   font: 700 clamp(2rem, 3.3vw, 3.2rem)/1.1 var(--display);
   letter-spacing: -.05em;
   margin: 12px 0
}

.contact-panel-copy p {
   max-width: 390px;
   color: #e1e8e1;
   font-size: .92rem
}

.form-panel {
   padding: clamp(32px, 5vw, 66px)
}

.form-panel>.eyebrow {
   margin-bottom: 8px
}

.form-panel>h2 {
   font: 700 clamp(2rem, 3vw, 2.8rem)/1.15 var(--display);
   letter-spacing: -.045em;
   color: var(--forest);
   margin: 0 0 8px
}

.form-intro {
   color: var(--muted);
   font-size: .9rem;
   margin: 0 0 27px
}

.form-intro span,
.form-group label span {
   color: #a44836
}

.form-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 18px 16px;
   margin-bottom: 24px
}

.form-group {
   display: flex;
   flex-direction: column;
   gap: 6px
}

.form-group label {
   font-weight: 600;
   font-size: .84rem;
   color: #334239
}

.form-group input,
.form-group select,
.form-group textarea {
   width: 100%;
   border: 1px solid #ccd6ce;
   border-radius: 2px;
   background: #fff;
   color: var(--ink);
   padding: 11px 12px;
   min-height: 46px;
   outline: none;
   transition: border .2s, box-shadow .2s
}

.form-group textarea {
   resize: vertical;
   min-height: 130px
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
   border-color: var(--green);
   box-shadow: 0 0 0 3px #16834a1a
}

.full-width {
   grid-column: 1/-1
}

.button-primary {
   background: var(--green);
   color: #fff
}

.button-primary:hover {
   background: var(--forest)
}

.form-feedback {
   min-height: 1.5em;
   color: var(--forest);
   font-size: .88rem;
   margin: 12px 0 0
}

.site-footer {
   background: #092e21;
   color: #fff;
   padding: 50px 0 18px
}

.footer-main {
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
   gap: 42px;
   padding-bottom: 38px
}

.footer-brand .brand-copy strong {
   color: #fff
}

.footer-brand .brand-copy small {
   color: #c3cec6
}

.footer-description {
   max-width: 370px;
   margin: 0;
   color: #bdcbc1;
   font-size: .88rem
}

.footer-nav {
   display: flex;
   gap: 22px;
   color: #e2e9e3;
   font-size: .82rem
}

.footer-nav a:hover,
.footer-bottom a:hover {
   color: #dfc889
}

.footer-bottom {
   border-top: 1px solid #ffffff24;
   padding-top: 17px;
   display: flex;
   justify-content: space-between;
   color: #afbeb3;
   font-size: .76rem
}

@media(max-width:900px) {
   .primary-nav {
      gap: 16px
   }

   .primary-nav>a {
      font-size: .8rem
   }

   .nav-contact {
      padding: 9px 12px
   }

   .gallery-grid {
      grid-auto-rows: 175px
   }

   .contact-grid {
      grid-template-columns: .8fr 1.2fr
   }

   .footer-main {
      grid-template-columns: 1fr 1fr
   }

   .footer-nav {
      grid-column: 1/-1;
      justify-content: flex-start
   }

   .contact-panel {
      min-height: 640px
   }
}

@media(max-width:800px) {
   .site-header {
      height: 72px
   }

   .header-content {
      width: calc(100% - 36px)
   }

   .brand img {
      width: 43px;
      height: 43px
   }

   .menu-toggle {
      width: 46px;
      height: 46px;
      border: 1px solid var(--line);
      border-radius: 3px;
      background: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      cursor: pointer
   }

   .menu-toggle span {
      width: 19px;
      height: 2px;
      background: var(--forest);
      transition: transform .2s, opacity .2s
   }

   .menu-toggle[aria-expanded=true] span:first-child {
      transform: translateY(7px) rotate(45deg)
   }

   .menu-toggle[aria-expanded=true] span:nth-child(2) {
      opacity: 0
   }

   .menu-toggle[aria-expanded=true] span:last-child {
      transform: translateY(-7px) rotate(-45deg)
   }

   .primary-nav {
      position: absolute;
      top: 71px;
      left: 0;
      right: 0;
      padding: 14px 22px 24px;
      background: var(--ivory);
      border-bottom: 1px solid var(--line);
      box-shadow: 0 18px 28px #0c38281a;
      display: flex;
      align-items: stretch;
      flex-direction: column;
      gap: 0;
      opacity: 0;
      height: 100vh;
      display: flex;
      justify-content: center;
      visibility: hidden;
      transform: translateY(-8px);
      transition: opacity .18s, transform .18s, visibility .18s
   }

   .primary-nav.is-open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0)
   }

   .primary-nav>a:not(.nav-contact) {
      padding: 12px 4px;
      border-bottom: 1px solid var(--line);
      font-size: .95rem
   }

   .primary-nav .nav-contact {
      margin-top: 14px;
      text-align: center;
      padding: 12px
   }

   .hero {
      min-height: 660px;
      min-height: min(740px, calc(100svh - 72px))
   }

   .hero-image {
      object-position: 57% center
   }

   .hero-content {
      padding-top: 56px;
      padding-bottom: 90px
   }

   .hero-shade {
      background: linear-gradient(90deg, rgba(6, 31, 21, .77), rgba(6, 31, 21, .37)), linear-gradient(0deg, rgba(6, 31, 21, .48), transparent 60%)
   }

   .hero h1 {
      max-width: 600px
   }

   .section-pad {
      padding: 78px 0
   }

   .about-grid {
      grid-template-columns: 1fr;
      gap: 30px
   }

   .about-copy {
      max-width: 720px
   }

   .arabic-text {
      padding-top: 26px;
      border-top: 1px solid var(--line)
   }

   .program-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .gallery-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-auto-rows: 180px
   }

   .gallery-item-tall {
      grid-row: span 2
   }

   .contact-grid {
      grid-template-columns: 1fr
   }

   .contact-panel {
      min-height: 420px
   }

   .form-panel {
      padding: 42px
   }

   .footer-main {
      gap: 24px
   }
}

@media(max-width:560px) {
   .container {
      width: calc(100% - 36px)
   }

   .brand {
      gap: 9px
   }

   .brand img {
      width: 40px;
      height: 40px
   }

   .brand-copy strong {
      font-size: .77rem
   }

   .brand-copy small {
      font-size: .57rem
   }

   .hero {
      min-height: 640px;
      min-height: min(700px, calc(100svh - 72px))
   }

   .hero-image {
      object-position: 58% center
   }

   .hero-content {
      padding-top: 48px
   }

   .hero-eyebrow {
      font-size: .65rem;
      letter-spacing: .12em
   }

   .hero h1 {
      font-size: clamp(1.65rem, 7vw, 2.35rem);
      line-height: 1.65
   }

   .hero h2 {
      font-size: clamp(2.65rem, 12vw, 4rem)
   }

   .hero-content>p {
      font-size: 1rem
   }

   .hero-actions {
      align-items: flex-start;
      flex-direction: column;
      gap: 11px
   }

   .hero-caption {
      left: 18px;
      right: auto;
      bottom: 20px;
      font-size: .59rem;
      gap: 8px
   }

   .section-pad {
      padding: 64px 0
   }

   .section-heading {
      margin-bottom: 32px
   }

   .section-heading h2,
   .events-inner h2 {
      font-size: 2.5rem
   }

   .about-copy {
      font-size: .93rem
   }

   .arabic-text {
      font-size: 1rem
   }

   .program-grid {
      grid-template-columns: 1fr
   }

   .program-card {
      min-height: 0;
      padding: 23px
   }

   .program-icon {
      margin-bottom: 13px
   }

   .gallery-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-auto-rows: 145px;
      gap: 9px
   }

   .gallery-item-tall {
      grid-row: span 2
   }

   .archive-section {
      min-height: 370px
   }

   .archive-content {
      padding-block: 60px
   }

   .contact-panel {
      min-height: 370px
   }

   .contact-panel-copy {
      bottom: 24px
   }

   .form-panel {
      padding: 32px 22px
   }

   .form-grid {
      grid-template-columns: 1fr;
      gap: 15px
   }

   .full-width {
      grid-column: auto
   }

   .footer-main {
      grid-template-columns: 1fr;
      gap: 18px
   }

   .footer-nav {
      grid-column: auto;
      flex-wrap: wrap;
      gap: 15px 22px
   }

   .footer-bottom {
      gap: 12px;
      font-size: .7rem
   }
}

@media(max-width:360px) {
   .brand-copy strong {
      font-size: .68rem
   }

   .brand-copy small {
      font-size: .51rem
   }

   .container {
      width: calc(100% - 30px)
   }

   .hero h1 {
      font-size: 1.55rem
   }

   .gallery-grid {
      grid-auto-rows: 125px
   }
}

@media(prefers-reduced-motion:reduce) {

   *,
   *::before,
   *::after {
      scroll-behavior: auto !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important
   }
}

/* Additional media and library pages */
.gallery-action {
   display: flex;
   justify-content: center;
   margin-top: 32px
}

.khutbah-section {
   background: #fff
}

.khutbah-heading {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 24px;
   margin-bottom: 34px
}

.khutbah-heading h2 {
   font: 700 clamp(2.2rem, 4vw, 3.6rem)/1.12 var(--display);
   letter-spacing: -.055em;
   color: var(--forest);
   margin: 10px 0
}

.khutbah-heading p {
   color: var(--muted);
   margin: 0
}

.khutbah-empty {
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
   gap: 22px;
   padding: 25px 28px;
   background: var(--ivory);
   border: 1px solid var(--line)
}

.khutbah-symbol {
   display: grid;
   place-items: center;
   width: 48px;
   height: 48px;
   color: var(--green);
   background: var(--mint);
   font: 1.6rem var(--arabic)
}

.khutbah-empty h3 {
   color: var(--forest);
   font: 700 1rem var(--display);
   margin: 0 0 5px
}

.khutbah-empty p {
   color: var(--muted);
   font-size: .88rem;
   margin: 0
}

.khutbah-empty>a {
   color: var(--green);
   font-size: .86rem;
   font-weight: 700
}

.page-hero {
   padding: 90px 0;
   background: var(--forest);
   color: white
}

.page-hero .eyebrow {
   color: #dfc889
}

.page-hero h1 {
   font: 700 clamp(2.5rem, 5vw, 4.3rem)/1.08 var(--display);
   letter-spacing: -.055em;
   margin: 12px 0
}

.page-hero p {
   max-width: 660px;
   color: #d7e1d9;
   margin: 0
}

.media-library {
   padding: 68px 0 88px
}

.media-library h2 {
   font: 700 1.8rem var(--display);
   color: var(--forest);
   margin: 0 0 22px
}

.library-section+.library-section {
   margin-top: 64px
}

.library-photo-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 14px
}

.library-photo {
   margin: 0;
   aspect-ratio: 4/3;
   background: var(--mint);
   overflow: hidden
}

.library-photo img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .4s
}

.library-photo:hover img {
   transform: scale(1.04)
}

.library-video-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 18px
}

.library-video {
   background: #fff;
   border: 1px solid var(--line)
}

.library-video video {
   display: block;
   width: 100%;
   aspect-ratio: 16/9;
   background: #10251b;
   object-fit: contain
}

.library-video figcaption {
   padding: 13px 15px;
   color: var(--forest);
   font-weight: 600;
   font-size: .9rem
}

.upload-section {
   padding: 68px 0;
   background: var(--mint)
}

.upload-card {
   max-width: 760px;
   padding: clamp(25px, 5vw, 48px);
   background: white;
   border: 1px solid var(--line)
}

.upload-card h2 {
   font: 700 2rem var(--display);
   color: var(--forest);
   margin: 10px 0
}

.upload-card>p {
   color: var(--muted)
}

.upload-note {
   padding: 13px 15px;
   background: var(--ivory);
   border-left: 3px solid var(--gold);
   font-size: .86rem !important
}

.upload-form {
   display: grid;
   gap: 18px;
   margin-top: 22px
}

.upload-form .form-group input[type=file] {
   padding: 10px
}

.upload-preview {
   width: 100%;
   max-height: 420px;
   background: #12231a;
   margin-top: 16px
}

.upload-status {
   min-height: 1.5em;
   color: var(--forest);
   font-size: .88rem;
   margin: 8px 0 0
}

.site-header {
   background: rgba(22, 131, 74, .97);
   border-bottom: 0
}

.site-header .brand-copy strong {
   color: #fff
}

.site-header .brand-copy small {
   color: #d9efe1
}

.site-header .primary-nav>a:not(.nav-contact) {
   color: #eff8f1
}

.site-header .primary-nav>a:not(.nav-contact):hover {
   color: #d2b878
}

.site-header .nav-contact {
   background: var(--forest);
   color: #fff
}

.site-header .menu-toggle {
   border-color: #ffffff60;
   background: #0c6b3a
}

.site-header .menu-toggle span {
   background: #fff
}

@media(max-width:800px) {
   .primary-nav {
      background: #16834a;
      border-bottom: 0
   }

   .site-header .primary-nav>a:not(.nav-contact) {
      color: #fff;
      border-color: #ffffff3d
   }

   .site-header .primary-nav>a:not(.nav-contact):hover {
      color: #f3d99b
   }

   .site-header .nav-contact {
      background: var(--forest)
   }

   .library-photo-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr))
   }
}

@media(max-width:560px) {
   .khutbah-heading {
      align-items: flex-start;
      flex-direction: column
   }

   .khutbah-empty {
      grid-template-columns: auto 1fr;
      gap: 14px;
      padding: 20px
   }

   .khutbah-empty>a {
      grid-column: 2
   }

   .library-photo-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px
   }

   .library-video-grid {
      grid-template-columns: 1fr
   }

   .page-hero {
      padding: 68px 0
   }

   .media-library,
   .upload-section {
      padding: 52px 0
   }
}

@media(prefers-reduced-motion:reduce) {
   .hero-slide img {
      transition: none !important
   }
}

.hero-slides,
.hero-slide {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   z-index: -2
}

.hero-slide {
   opacity: 0;
   transition: opacity 1s ease
}

.hero-slide.is-active {
   opacity: 1
}

.hero-slide img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center 52%
}

.hero-controls {
   position: absolute;
   left: max(26px, calc((100vw - var(--container))/2));
   bottom: 25px;
   display: flex;
   align-items: center;
   gap: 12px;
   z-index: 2
}

.slider-arrow {
   display: grid;
   place-items: center;
   width: 34px;
   height: 34px;
   border: 1px solid #ffffff80;
   border-radius: 50%;
   background: #092e2140;
   color: #fff;
   font-size: 1rem;
   cursor: pointer;
   transition: background .2s
}

.slider-arrow:hover {
   background: var(--green)
}

.slider-dots {
   display: flex;
   align-items: center;
   gap: 7px
}

.slider-dot {
   width: 8px;
   height: 8px;
   border: 1px solid #fff;
   border-radius: 50%;
   padding: 0;
   background: transparent;
   cursor: pointer
}

.slider-dot.is-active {
   background: #fff;
   transform: scale(1.2)
}

@media(max-width:560px) {
   .hero-controls {
      left: 18px;
      bottom: 64px
   }

   .hero-caption {
      bottom: 22px
   }
}

[hidden] {
   display: none !important
}

.gallery-tabs {
   display: flex;
   flex-wrap: wrap;
   gap: 9px;
   margin: 0 0 22px
}

.gallery-tab {
   min-height: 42px;
   padding: 9px 15px;
   border: 1px solid var(--line);
   background: #fff;
   color: var(--forest);
   font-weight: 600;
   font-size: .85rem;
   cursor: pointer
}

.gallery-tab:hover,
.gallery-tab.is-active {
   background: var(--forest);
   border-color: var(--forest);
   color: #fff
}

.library-photo[hidden] {
   display: none !important
}

.gallery-empty {
   padding: 25px;
   background: var(--ivory);
   color: var(--muted)
}

html.has-aos [data-aos] {
   opacity: 0;
   transition: opacity .65s ease, transform .65s cubic-bezier(.2, .7, .2, 1);
   transition-delay: var(--aos-delay, 0ms)
}

html.has-aos [data-aos="fade-up"] {
   transform: translateY(24px)
}

html.has-aos [data-aos="fade-in"] {
   transform: scale(.985)
}

html.has-aos [data-aos].aos-visible {
   opacity: 1;
   transform: none
}

@media(prefers-reduced-motion:reduce) {
   html.has-aos [data-aos] {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important
   }
}

html {
   scroll-behavior: smooth !important;
   scroll-padding-top: 90px
}

.site-header {
   scroll-margin-top: 90px
}

html.has-aos [data-aos] {
   opacity: 0;
   transition: opacity .65s ease, transform .65s cubic-bezier(.2, .7, .2, 1);
   transition-delay: var(--aos-delay, 0ms)
}

html.has-aos [data-aos="fade-up"] {
   transform: translateY(24px)
}

html.has-aos [data-aos="fade-in"] {
   transform: scale(.985)
}

html.has-aos [data-aos].aos-visible {
   opacity: 1;
   transform: none
}

@media(prefers-reduced-motion:reduce) {
   html.has-aos [data-aos] {
      transform: none !important;
      transition: opacity .2s ease !important;
      transition-delay: 0ms !important
   }

   html {
      scroll-behavior: smooth !important
   }
}