#fw-section-custom-html-d2c64b33-7617-4b8b-9b9f-dbc06f306fcd {


.tiers-section {
  max-width: 700px;
  margin: 4rem auto;
  padding: 2rem;
  line-height: 1.6;
  border-top: 1px solid #222;
  border-bottom: 1px solid #222;
}
.tiers-section p { 
  font-style: italic; 
  color: #888; 
  margin-bottom: 2rem;}
.tiers-quote {
  font-style: italic;
  color: #ccc;
  border-left: 4px solid #666;
  padding-left: 1rem;
  margin-bottom: 2rem;
  text-shadow: 0 0 10px rgba(0,0,0,0.4);
}
.center{
  text-align: center;
}

.tiers-intro {
  color: #bbb;
  margin-bottom: 3rem;
  font-size: 1.05rem;
}

.tiers-heading {
  font-size: 1.4rem;
  font-weight: bold;
  border-bottom: 1px solid #444;
  padding-bottom: 0.5rem;
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tier {
  margin-bottom: 2.5rem;
  padding: 1rem 1rem 1.5rem;
  background: #111;
  border-radius: 0.5rem;
  box-shadow: 0 0 30px rgba(255,255,255,0.02);
}

.tier h3 {
  font-weight: semi-bold;
  margin-bottom: 0.4rem;
  font-size: 1.1rem;
}

.tier p {
  color: #aaa;
  font-size: 0.95rem;
}

.tier strong {
  color: #fff;
}

.tiers-subheading {
  font-weight: bold;
  margin-top: 3rem;
  margin-bottom: 1rem;
  font-size: 1.1rem;
  border-top: 1px solid #333;
  padding-top: 1rem;
}

.tiers-explainer {
  color: #aaa;
  font-size: 0.95rem;
  line-height: 1.6;
}

.unlock-link {
  margin-top: 4rem; 
  text-align: center;
}
.unlock-link-caption {
   font-size: 0.9rem; 
  color: #777;
}

/* --- Mobile Responsive Fixes --- */
@media (max-width: 768px) {
  /* 1. Adjust the Container Padding */
  .art-studies-container {
    padding: 40px 16px; /* Reduced top/bottom for tighter mobile screens */
  }
}
}
#fw-section-custom-html-7e672b8e-5ff8-4f50-8d37-1e0819832f27 {

.contact-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 24px;
  color: #e0e0e0;
  text-align: center;
  background-color: #000;
}

.main-title {
  font-size: 3rem;
  font-weight: 300;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 0;
}

.gold-divider {
  width: 40px;
  height: 1px;
  background-color: #c5a059; /* Matching your Painting Seal Gold */
  margin: 30px auto;
}


.main-section {
  max-width: 850px;
  margin: 0 auto;
  line-height: 1.7;
  color: #ccc;
}

.availability-note {
  font-size: 0.85rem;
  color: #888;
  margin-top: 20px;
}

.support-link {
  display: inline-block;
  margin-top: 25px;
  margin-bottom: 25px;
  color: #c5a059;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 2px;
  border: 1px solid #c5a059;
  padding: 12px 30px;
  transition: all 0.3s;
}

.support-link:hover {
  background: #c5a059;
  color: #000;
}



/* --- Mobile Responsive Fixes --- */
@media (max-width: 768px) {
  /* 1. Adjust the Container Padding */
  .art-studies-container {
    padding: 40px 16px; /* Reduced top/bottom for tighter mobile screens */
  }

  /* 2. Scale down the Main Title so it doesn't break into awkward lines */
  .main-title {
    font-size: 1.8rem;
    letter-spacing: 3px;
  }
  .collector-link {
    width: 100%; /* Makes the button full-width on mobile for better touch-access */
    box-sizing: border-box;
  }
}
}
#fw-section-custom-html-de1e81da-1d7b-4e53-8308-317b9bb1835d {

.about-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 24px;
  text-align: center;
  background-color: #000;
}

.main-title {
  font-size: 3rem;
  font-weight: 300;
  letter-spacing: 6px;
  text-transform: uppercase;
   text-align: center;
  margin-bottom: 0;
}

.gold-divider {
  width: 40px;
  height: 1px;
  background-color: #c5a059; /* Matching your Painting Seal Gold */
  margin: 30px auto;
}

.manifesto-section {
  max-width: 850px;
  margin: 0 auto;
  line-height: 1.7;
  color: #ccc;
}

.scripture-box {
  margin: 50px;
  text-align: center;
}

.ayah-text {
  font-style: italic;
  font-size: 1.2rem;
  color: #aaa;
  max-width: 800px;
  margin: 0 auto 10px;
  line-height: 1.8;
}

.source {
  font-size: 0.8rem;
  letter-spacing: 2px;
  color: #c5a059;
  text-transform: uppercase;
}

.manifesto-section-2 {
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.7;
  color: #ccc;
}

/* --- Mobile Responsive Fixes --- */
@media (max-width: 768px) {
  /* 1. Adjust the Container Padding */
  .about-container {
    padding: 40px 16px; /* Reduced top/bottom for tighter mobile screens */
  }

  /* 2. Scale down the Main Title so it doesn't break into awkward lines */
  .main-title {
    font-size: 1.8rem;
    letter-spacing: 3px;
  }
}
  
  /* 3. The Ayah Text: Ensure it's legible and not too wide */
  .ayah-text {
    font-size: 1.1rem;
    padding: 0 10px;
  }
}
#fw-section-custom-html-9f764d21-9d5f-4835-b57b-0c59d4664ce2 {

#joinSection {
  max-width: 720px;
  margin: 80px auto;
  padding: 0 20px;
  text-align: center;
}

#joinSection h2 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

#joinSection p {
  font-size: 1.1rem;
  color: #aaa;
  margin-bottom: 3rem;
  line-height: 1.6;
}

#joinForm {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: #ccc;
}

#joinForm label {
  text-align: left;
  font-size: 0.9rem;
  text-transform: uppercase;
  color: #888;
}

#joinForm input,
#joinForm textarea {
  background-color: #111;
  color: #eee;
  border: 1px solid #333;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 1rem;
}

#joinForm button {
  display: inline-block;
  
  color: #c5a059;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 2px;
  border: 1px solid #c5a059;
  padding: 12px 30px;
  max-width: max-content;
  transition: all 0.3s ease;
  margin: 2rem auto 0;
  cursor: pointer;
}

#joinForm button:hover {
 background: #c5a059;
  color: #000;
}

#formResponse {
  text-align: center;
  font-size: 0.95rem;
  margin-top: 24px;
  color: #aaa;
  font-style: italic;
}

}
#fw-section-custom-html-6d6e32e6-d810-43b4-912c-cdc4f95b84dc {

.art-studies-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 24px;
  text-align: center;
}

.main-title {
  font-size: 3rem;
  font-weight: 300;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 0;
}

.gold-divider {
  width: 40px;
  height: 1px;
  background-color: #c5a059; /* Matching your Painting Seal Gold */
  margin: 30px auto;
}

.scripture-box {
  margin-bottom: 50px;
}

.ayah-text {
  font-style: italic;
  font-size: 1.2rem;
  color: #aaa;
  max-width: 800px;
  margin: 0 auto 10px;
  line-height: 1.8;
}

.source {
  font-size: 0.8rem;
  letter-spacing: 2px;
  color: #c5a059;
  text-transform: uppercase;
}

.manifesto-section {
  max-width: 850px;
  margin: 0 auto;
  line-height: 1.7;
  color: #ccc;
}

.criteria-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin: 40px 0;
  text-align: left;
  border-top: 1px solid #222;
  border-bottom: 1px solid #222;
  padding: 30px 0;
}

.criteria-item .label {
  display: block;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.availability-note {
  font-size: 0.85rem;
  color: #888;
  margin-top: 20px;
}

.studies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 40px;
  margin-top: 80px;
}

.study-card {
  background: #0a0a0a;
  border: 1px solid #1a1a1a;
  transition: all 0.4s ease;
}

.study-card:hover {
  border-color: #c5a059;
  transform: translateY(-5px);
}

.image-area {
  height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #050505;
}

.overlay-text {
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 0.7rem;
  color: #333;
}

.card-footer {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.small-seal {
  height: 45px;
  filter: grayscale(1);
  opacity: 0.7;
}

.study-id {
  font-size: 0.75rem;
  letter-spacing: 1px;
  color: #666;
}

.studies-footer {
  margin-top: 100px;
  padding: 60px;
  border-top: 1px solid #1a1a1a;
}

.collector-link {
  display: inline-block;
  margin-top: 25px;
  color: #c5a059;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 2px;
  border: 1px solid #c5a059;
  padding: 12px 30px;
  transition: all 0.3s;
}

.collector-link:hover {
  background: #c5a059;
  color: #000;
}

/* --- Mobile Responsive Fixes --- */
@media (max-width: 768px) {
  /* 1. Adjust the Container Padding */
  .art-studies-container {
    padding: 40px 16px; /* Reduced top/bottom for tighter mobile screens */
  }

  /* 2. Scale down the Main Title so it doesn't break into awkward lines */
  .main-title {
    font-size: 1.8rem;
    letter-spacing: 3px;
  }

  /* 3. The Criteria Grid: Move from 2-columns to 1-column stack */
  .criteria-grid {
    grid-template-columns: 1fr; /* Stacks "The Criterion" on top of "The Intention" */
    gap: 24px;
    text-align: center; /* Centers the text for mobile balance */
    padding: 20px 0;
  }

  /* 4. The Ayah Text: Ensure it's legible and not too wide */
  .ayah-text {
    font-size: 1.1rem;
    padding: 0 10px;
  }

  /* 5. The Studies Grid: Adjust Card Sizing */
  .studies-grid {
    grid-template-columns: 1fr; /* Single column of cards */
    margin-top: 40px;
    gap: 20px;
  }

  /* 6. Image Area Height: Reduce so it fits better on vertical screens */
  .image-area {
    height: 300px;
  }

  /* 7. Footer & Link: Ensure the button is easy to tap */
  .studies-footer {
    padding: 40px 20px;
    margin-top: 60px;
  }

  .collector-link {
    width: 100%; /* Makes the button full-width on mobile for better touch-access */
    box-sizing: border-box;
  }
}
}
#fw-section-custom-html-ae1cd03a-3fef-4905-898d-f135fd6b32f3 {

.gallery-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 24px;
  text-align: center;
}

.main-title {
  font-size: 3rem;
  font-weight: 300;
  letter-spacing: 6px;
  text-transform: uppercase;
  margin-bottom: 0;
}

.gold-divider {
  width: 40px;
  height: 1px;
  background-color: #c5a059; /* Matching your Painting Seal Gold */
  margin: 30px auto;
}

.maintext{
  max-width: 850px;
  margin: 0 auto;
  line-height: 1.7;
  }


.subtext{
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 0.95rem;
    font-style: italic;
    color: #aaa;
}



}

#fw-section-custom-html-a2ace9d8-d0db-4b90-b514-7d890215d33c {

.maintext{
    font-size: 1.15rem;
    font-weight: semi-bold;
    margin-bottom: 0.8rem;
}
.gold-title {
color: #c5a059;
}
.gold-divider {
  width: 40px;
  height: 1px;
  background-color: #c5a059; /* Matching your Painting Seal Gold */
  margin: 30px auto;
}

.subtext{
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 0.95rem;
    font-style: italic;
    color: #aaa;
}

.lowertext{
    font-size: 1rem;
    line-height: 1.5;
    text-transform: var(--text-transform-base);

}
/* --- Section and Div Spacing --- */
section {
    padding: 6rem 2rem;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* Ensure contents of sections are centered if they are inline */
    
}


}


#fw-section-hero-a14d48ba-6f0a-457e-be07-35946b0a4422 {

/* Updated Primary Button - Moving from Olive to Bronze/Gold */
.button--primary {
  background-color: #c5a059; /* The Bronze/Gold from the Painting Seal */
  color: #000000;           /* Dark text for high contrast on gold */
  border: 1px solid #c5a059;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  font-weight: 500;         /* Slightly lighter weight for elegance */
  text-transform: uppercase;
  letter-spacing: 0.15em;   /* Increased spacing for a premium feel */
  border-radius: 0px;       /* Maintaining firm, disciplined edges */
  padding: 14px 32px;
}

.button--primary:hover {
  background-color: transparent;
  color: #c5a059;           /* Text turns bronze on hover */
  border-color: #c5a059;
  box-shadow: 0 0 15px rgba(197, 160, 89, 0.2); /* Subtle glow like light on metal */
}

/* Background & Hero Refinements */
.section-background::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  /* Deepening the vignette for more "Sakinah" and focus on the center */
  background: radial-gradient(circle at center, rgba(0,0,0,0.1), rgba(0,0,0,0.95));
  z-index: 1;
  pointer-events: none;
}

.hero__heading--large {
  color: #FFFFFF !important;
  text-shadow: 0 4px 10px rgba(0,0,0,0.8);
  letter-spacing: 0.2em !important; /* Spaced out for majesty */
  font-weight: 300 !important; 
/* Light and airy header */
  margin-bottom: 50px;
}

.hero__text {
  color: #BBBBBB !important;        /* Slightly darker for better atmosphere */
  text-shadow: 0 2px 5px rgba(0,0,0,0.8);
  font-style: italic;               /* Reflective tone */
  max-width: 600px;
  margin: 0 auto;
}

.hero__content {
  position: relative;
  z-index: 2;
}

/* --- Mobile Responsive Fixes for Hero & Buttons --- */
@media (max-width: 768px) {
  /* 1. Scale down the Hero Heading */
  .hero__heading--large {
    font-size: 1.9rem !important;      /* Reduced from large desktop size */
    letter-spacing: 0.12em !important; /* Slightly tighter for smaller screens */
    line-height: 1.2;
    padding: 0 10px;
     text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
  }

  /* 2. Adjust the Hero Text */
  .hero__text {
    font-size: 1rem !important;
    padding: 0 20px;
    line-height: 1.6;
    margin-bottom: 2rem;
  }

  /* 3. Primary Button Mobile Discipline */
  .button--primary {
    width: 100%;             /* Full width button for better touch-target on mobile */
    max-width: 300px;        /* Keeps it from becoming too stretched on tablets */
    padding: 16px 20px;      /* Slightly taller for easier clicking */
    font-size: 0.85rem;      /* Refined for smaller screens */
    letter-spacing: 0.1em;
    display: inline-block;
    box-sizing: border-box;
  }

  /* 4. Deepen the Vignette on Mobile */
  .section-background::before {
    /* Stronger dark overlay on mobile to ensure text over images remains readable */
    background: radial-gradient(circle at center, rgba(0,0,0,0.3), rgba(0,0,0,0.98));
  }
  
  /* 5. Center the Content wrapper */
  .hero__content {
    padding: 40px 20px;      /* Ensures content doesn't hit the screen edges */
    text-align: center;
  }
}
}
#fw-section-custom-html-13d40552-fd69-47af-8bd2-343058d01db9 {

body {
      margin: 0;
      background: #000;
      color: #fff;
      font-family: sans-serif;
    }

    .descent-gallery {
      background: linear-gradient(to bottom, #000 0%, #000 80%, #111 95%, #000 100%);
      color: #fff;
      font-family: sans-serif;
      height: 100vh;
      overflow: hidden;
      position: relative;
      border: 1px solid rgba(255,255,255,0.05);
      box-shadow: inset 0 0 60px rgba(0,0,0,0.4);
    }

    .gallery-piece {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      opacity: 0;
      transform: scale(0.97);
      transition: opacity 1.2s ease, transform 1.2s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      z-index: 0;
    }

    .gallery-piece.active {
      opacity: 1;
      transform: scale(1);
      z-index: 2;
    }

    .gallery-piece img {
      max-height: 92vh;
      width: auto;
      border-radius: 6px;
      box-shadow: 0 0 80px rgba(255, 255, 255, 0.08), 0 0 120px rgba(0, 0, 0, 0.85);
      filter: brightness(0.9) contrast(1.1);
      transition: transform 10s ease;
    }

    .gallery-piece.active img {
      transform: scale(1.03);
    }

    .grain-overlay {
      pointer-events: none;
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background-image: url('https://www.transparenttextures.com/patterns/asfalt-dark.png');
      opacity: 0.03;
      mix-blend-mode: screen;
      animation: grainShift 8s infinite linear;
    }

    @keyframes grainShift {
      0% { transform: translate(0, 0); }
      50% { transform: translate(-5px, 5px); }
      100% { transform: translate(0, 0); }
    }

}
#fw-section-hero-fbdee867-453c-417a-ae50-7e3dd383897a {

/* Updated Primary Button - Moving from Olive to Bronze/Gold */
.button--primary {
  background-color: #c5a059; /* The Bronze/Gold from the Painting Seal */
  color: #000000;           /* Dark text for high contrast on gold */
  border: 1px solid #c5a059;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  font-weight: 500;         /* Slightly lighter weight for elegance */
  text-transform: uppercase;
  letter-spacing: 0.15em;   /* Increased spacing for a premium feel */
  border-radius: 0px;       /* Maintaining firm, disciplined edges */
  padding: 14px 32px;
}

.button--primary:hover {
  background-color: transparent;
  color: #c5a059;           /* Text turns bronze on hover */
  border-color: #c5a059;
  box-shadow: 0 0 15px rgba(197, 160, 89, 0.2); /* Subtle glow like light on metal */
}

/* Background & Hero Refinements */
.section-background::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  /* Deepening the vignette for more "Sakinah" and focus on the center */
  background: radial-gradient(circle at center, rgba(0,0,0,0.1), rgba(0,0,0,0.95));
  z-index: 1;
  pointer-events: none;
}

.hero__heading--large {
  text-shadow: 0 4px 10px rgba(0,0,0,0.8);
  letter-spacing: 0.2em !important; /* Spaced out for majesty */
  font-weight: 300 !important; 
/* Light and airy header */
  
}

.hero__text {
  text-shadow: 0 2px 5px rgba(0,0,0,0.8);
  font-style: italic;               /* Reflective tone */
  max-width: 720px;
  margin: 0 auto;
  margin-top: 15px;
  margin-bottom: 15px;
}

.hero__content {
  position: relative;
  z-index: 2;
}

/* --- Mobile Responsive Fixes for Hero & Buttons --- */
@media (max-width: 768px) {
  /* 1. Scale down the Hero Heading */
  .hero__heading--large {
    font-size: 1.9rem !important;      /* Reduced from large desktop size */
    letter-spacing: 0.12em !important; /* Slightly tighter for smaller screens */
    line-height: 1.2;
    padding: 0 10px;
     text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
  }

  /* 2. Adjust the Hero Text */
  .hero__text {
    font-size: 1rem !important;
    padding: 0 20px;
    line-height: 1.6;
    margin-bottom: 2rem;
  }

  /* 3. Primary Button Mobile Discipline */
  .button--primary {
    width: 100%;             /* Full width button for better touch-target on mobile */
    max-width: 300px;        /* Keeps it from becoming too stretched on tablets */
    padding: 16px 20px;      /* Slightly taller for easier clicking */
    font-size: 0.85rem;      /* Refined for smaller screens */
    letter-spacing: 0.1em;
    display: inline-block;
    box-sizing: border-box;
  }

  /* 4. Deepen the Vignette on Mobile */
  .section-background::before {
    /* Stronger dark overlay on mobile to ensure text over images remains readable */
    background: radial-gradient(circle at center, rgba(0,0,0,0.3), rgba(0,0,0,0.98));
  }
  
  /* 5. Center the Content wrapper */
  .hero__content {
    padding: 40px 20px;      /* Ensures content doesn't hit the screen edges */
    text-align: center;
  }
}
}

#fw-section-hero-1749385483 {

/* Updated Primary Button - Moving from Olive to Bronze/Gold */
.button--primary {
  background-color: #c5a059; /* The Bronze/Gold from the Painting Seal */
  color: #000000;           /* Dark text for high contrast on gold */
  border: 1px solid #c5a059;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  font-weight: 500;         /* Slightly lighter weight for elegance */
  text-transform: uppercase;
  letter-spacing: 0.15em;   /* Increased spacing for a premium feel */
  border-radius: 0px;       /* Maintaining firm, disciplined edges */
  padding: 14px 32px;
}

.button--primary:hover {
  background-color: transparent;
  color: #c5a059;           /* Text turns bronze on hover */
  border-color: #c5a059;
  box-shadow: 0 0 15px rgba(197, 160, 89, 0.2); /* Subtle glow like light on metal */
}

/* Background & Hero Refinements */
.section-background::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  /* Deepening the vignette for more "Sakinah" and focus on the center */
  background: radial-gradient(circle at center, rgba(0,0,0,0.1), rgba(0,0,0,0.95));
  z-index: 1;
  pointer-events: none;
}

.hero__heading--large {
  color: #FFFFFF !important;
  text-shadow: 0 4px 10px rgba(0,0,0,0.8);
  letter-spacing: 0.2em !important; /* Spaced out for majesty */
  font-weight: 300 !important; 
/* Light and airy header */
  margin-bottom: 50px;
}

.hero__text {
  color: #BBBBBB !important;        /* Slightly darker for better atmosphere */
  text-shadow: 0 2px 5px rgba(0,0,0,0.8);
  font-style: italic;               /* Reflective tone */
  max-width: 600px;
  margin: 0 auto;
}

.hero__content {
  position: relative;
  z-index: 2;
}

/* --- Mobile Responsive Fixes for Hero & Buttons --- */
@media (max-width: 768px) {
  /* 1. Scale down the Hero Heading */
  .hero__heading--large {
    font-size: 1.9rem !important;      /* Reduced from large desktop size */
    letter-spacing: 0.12em !important; /* Slightly tighter for smaller screens */
    line-height: 1.2;
    padding: 0 10px;
     text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
  }

  /* 2. Adjust the Hero Text */
  .hero__text {
    font-size: 1rem !important;
    padding: 0 20px;
    line-height: 1.6;
    margin-bottom: 2rem;
  }

  /* 3. Primary Button Mobile Discipline */
  .button--primary {
    width: 100%;             /* Full width button for better touch-target on mobile */
    max-width: 300px;        /* Keeps it from becoming too stretched on tablets */
    padding: 16px 20px;      /* Slightly taller for easier clicking */
    font-size: 0.85rem;      /* Refined for smaller screens */
    letter-spacing: 0.1em;
    display: inline-block;
    box-sizing: border-box;
  }

  /* 4. Deepen the Vignette on Mobile */
  .section-background::before {
    /* Stronger dark overlay on mobile to ensure text over images remains readable */
    background: radial-gradient(circle at center, rgba(0,0,0,0.3), rgba(0,0,0,0.98));
  }
  
  /* 5. Center the Content wrapper */
  .hero__content {
    padding: 40px 20px;      /* Ensures content doesn't hit the screen edges */
    text-align: center;
  }
}
}
#fw-section-custom-html-efd87a77-00f7-4d15-9c2a-00c37ecc6154 {

/* 1. Global Layout: Centering all descriptive sections */
.emotional-pitch, 
.emotional-lead, 
.echo-finale {
    display: flex;
    flex-direction: column;
    align-items: center; /* Horizontally centers content in the flex container */
    justify-content: center;
    text-align: center;   /* Centers the lines of text themselves */
    width: 100%;
    margin: 0 auto;
    background: #000;
}

/* 2. Emotional Pitch: Removing the "Huge/Bold" heading look */
.emotional-pitch {
    padding: 1rem 15% 2rem; /* Side padding to keep text from stretching too wide */
}

.emotional-pitch blockquote {
    max-width: 850px;
    margin: 0 auto;
    border: none;
    line-height: 1.8;
    font-size: 1.5rem;   /* Reduced from 1.8 to feel less like a heading */
    font-weight: 300;     /* Thin weight to remove the "Bold" feel */
    font-style: italic;
    
}

/* 3. Emotional Lead: Fixing the left-alignment */
.emotional-lead {
    padding: 4rem 15% 3rem;
    color: #666; 
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.emotional-lead p {
    margin: 0;
}

/* 4. Descent Gallery Container */
.descent-gallery {
    background: #000;
    color: #fff;
    font-family: 'Inter', sans-serif;
    height: 100vh;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(197, 160, 89, 0.12);
    box-shadow: inset 0 0 100px rgba(0,0,0,0.9);
    background: radial-gradient(circle at center, #080808 0%, #000 100%);
}

.gallery-piece {
    position: absolute;
    top: 0; left: 0; width: 100%;
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1), transform 1.8s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    z-index: 0;
}

.gallery-piece.active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}

.gallery-piece img {
    max-width: 920px;
    width: 85%;
    border-radius: 0px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.8), 0 0 40px rgba(197, 160, 89, 0.05); 
    filter: brightness(0.85) contrast(1.1);
    transition: transform 12s linear;
}

.caption::before {
    content: "";
    display: block;
    width: 40px;
    height: 1px;
    background: linear-gradient(to right, transparent, #c5a059, transparent);
    margin: 0 auto 1.5rem;
}

.caption h2 {
    font-size: 2rem;
    letter-spacing: 6px;
    text-transform: uppercase;
    font-weight: 200; 
    color: #fff;
    margin-bottom: 0.8rem;
    text-shadow: 0 0 15px rgba(197, 160, 89, 0.3);
}

.caption p {
    font-size: 1.1rem;
    font-style: italic;
    color: #c5a059;
    letter-spacing: 2px;
}

/* 5. Echo Finale & Sig: Correcting the "Far Left" drift */
.echo-finale {
    padding: 5rem 15% 12rem;
    background: linear-gradient(to bottom, #000, #050505);
}

.echo-finale p {
    margin: 0 auto 2.5rem;
}

.sig {
    width: 100%;
    display: flex;
    justify-content: center; /* Horizontally centers the signature */
    font-size: 0.8rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #c5a059;
    opacity: 0.8;
    
}

.sig p {
    margin: 0;
}

/* --- Mobile Responsive Fixes for Descriptive Sections & Gallery --- */
@media (max-width: 768px) {
  /* 1. Resetting the "Emotional" Padding */
  .emotional-pitch, 
  .emotional-lead, 
  .echo-finale {
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: 100%;
    box-sizing: border-box;
  }

  /* 2. Scale down the Ayah/Pitch text */
  .emotional-pitch {
    padding-top: 5rem;
    padding-bottom: 3rem;
  }

  .emotional-pitch blockquote {
    font-size: 1.2rem; /* Easier to read on small screens */
    line-height: 1.6;
  }

  /* 3. The Gallery/Slider height for mobile */
  .descent-gallery {
    height: 80vh; /* Slightly shorter so users can see there is more content below */
  }

  /* 4. Resizing the Artwork & Text inside the Slider */
  .gallery-piece img {
    width: 90%;      /* Take up more of the screen width on mobile */
    max-width: none;
  }

  .caption h2 {
    font-size: 1.4rem; /* Scale down "ALHAMDULILLAH" etc. */
    letter-spacing: 4px;
  }

  .caption p {
    font-size: 0.9rem;
    padding: 0 10px;
  }

  /* 5. Fixing the Finale and Signature drift on mobile */
  .echo-finale {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  
  .echo-finale {
    padding: 2rem 15% 8rem;
    background: linear-gradient(to bottom, #000, #050505);
}

  .echo-finale p {
    font-size: 1rem; /* Scale down the final message */
    
  }
  
  }
}


#fw-section-announcement-bar-e58f1f44-561d-40fb-b705-3de3308aa81a {

.announcement-bar__label{color: #000000;}
}