/* ============================================
   Ramadan Festival – Section 2: About / Intro
   ============================================ */

/* ---- Bootstrap-style container (align with header) ---- */
.section-about .container {
  width: 100%;
  margin: 0 auto;
  padding-left: clamp(1rem, 5vw, 2.5rem);
  padding-right: clamp(1rem, 5vw, 2.5rem);
}

@media (min-width: 576px) {
  .section-about .container { max-width: 540px; }
}

@media (min-width: 768px) {
  .section-about .container { max-width: 720px; }
}

@media (min-width: 992px) {
  .section-about .container { max-width: 960px; }
}

@media (min-width: 1200px) {
  .section-about .container { max-width: 1140px; }
}

@media (min-width: 1400px) {
  .section-about .container { max-width: 1320px; }
}

/* ---- Section: mainbg gradient ---- */
.section-about {
  background-image: url("../images/mainbg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
  color: #fff;
}

/* ---- Intro: each row = same line (EN p1 | AR p1, EN p2 | AR p2, EN p3 | AR p3) ---- */
.section-about .intro-block {
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.section-about .intro-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 4rem);
  align-items: start;
  margin-bottom: 1.5rem;
}

.section-about .intro-row:last-child {
  margin-bottom: 0;
}

.section-about .intro-row-headers {
  margin-bottom: 1.25rem;
}

@media (max-width: 991px) {
  /* Make intro-block a flex container to reorder all cells */
  .section-about .intro-block {
    display: flex;
    flex-direction: column;
  }
  
  .section-about .intro-row {
    display: contents; /* Remove row wrapper, make cells direct children of intro-block */
  }
  
  /* Set default order for all cells - Arabic lower than English */
  .section-about .intro-cell-ar {
    order: 0;
  }
  
  .section-about .intro-cell-en {
    order: 10;
  }
  
  /* Order all Arabic cells first (1-4), then all English cells (5-8) */
  /* Headers row (first row): Arabic first, then English */
  .section-about .intro-row-headers .intro-cell-ar { order: 1; }
  .section-about .intro-row-headers .intro-cell-en { order: 5; }
  
  /* Paragraph 1 row (second row): Arabic then English */
  .section-about .intro-row:nth-of-type(2) .intro-cell-ar { order: 2; }
  .section-about .intro-row:nth-of-type(2) .intro-cell-en { order: 6; }
  
  /* Paragraph 2 row (third row): Arabic then English */
  .section-about .intro-row:nth-of-type(3) .intro-cell-ar { order: 3; }
  .section-about .intro-row:nth-of-type(3) .intro-cell-en { order: 7; }
  
  /* Paragraph 3 row (fourth row): Arabic then English */
  .section-about .intro-row:nth-of-type(4) .intro-cell-ar { order: 4; }
  .section-about .intro-row:nth-of-type(4) .intro-cell-en { order: 8; }
  
  /* Add spacing between cells */
  .section-about .intro-cell {
    margin-bottom: 1.5rem;
  }
  
  /* Add extra spacing after Arabic section and before English section */
  .section-about .intro-row-headers .intro-cell-ar {
    margin-bottom: 1.25rem;
  }
  
  .section-about .intro-row:nth-of-type(4) .intro-cell-ar {
    margin-bottom: 2.5rem; /* Extra space before English section starts */
  }
  
  .section-about .intro-row-headers .intro-cell-en {
    margin-top: 0;
  }
  
  .section-about .intro-cell:last-child {
    margin-bottom: 0;
  }
}

/* EN cell ---- */
.section-about .intro-cell-en {
  font-family: "Bricolage Grotesque", sans-serif;
  text-align: left;
  color: #fff;
}

.section-about .intro-cell-en .intro-title {
  margin: 0 0 0.2em;
  font-size: 45px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #fff;
}

.section-about .intro-cell-en .intro-subtitle {
  margin: 0 0 0;
  font-size: 33px;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: #fff;
}

.section-about .intro-cell-en .intro-p {
  margin: 0;
  font-size: 19px;
  font-weight: 300;
  line-height: 1.7;
  color: #fff;
}

/* AR cell ---- */
.section-about .intro-cell-ar {
  direction: rtl;
  text-align: right;
  font-family: "Alexandria", sans-serif;
  color: #fff;
}

.section-about .intro-cell-ar .intro-title {
  margin: 0 0 0.2em;
  font-size: 35px;
  font-weight: 600;
  line-height: 1.25;
  color: #f4c6d1;
}

.section-about .intro-cell-ar .intro-subtitle {
  margin: 0 0 0;
  font-size: 30px;
  font-weight: 300;
  line-height: 1.35;
  color: #fff;
}

.section-about .intro-cell-ar .intro-p {
  margin: 0;
  font-size: 19px;
  font-weight: 300;
  line-height: 1.7;
  color: #fff;
}

@media (max-width: 768px) {
  .section-about .intro-cell-en .intro-title { font-size: 32px; }
  .section-about .intro-cell-en .intro-subtitle { font-size: 24px; }
  .section-about .intro-cell-en .intro-p { font-size: 18px; }
  .section-about .intro-cell-ar .intro-title { font-size: 28px; }
  .section-about .intro-cell-ar .intro-subtitle { font-size: 22px; }
  .section-about .intro-cell-ar .intro-p { font-size: 16px; }
}

/* ---- 4 images row ---- */
.section-about .images-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.5rem, 1.5vw, 1rem);
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

@media (max-width: 767px) {
  .section-about .images-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.section-about .images-row img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 1;
  border-radius: 4px;
}

/* ---- What Awaits You: title + two columns list ---- */
.section-about .awaits-title {
  text-align: center;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.section-about .awaits-title h3 {
  margin: 0 0 0.25em;
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 600;
  line-height: 1.4;
}

.section-about .awaits-title .awaits-ar {
  direction: rtl;
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  font-family: "Alexandria", sans-serif;
}

.section-about .awaits-title .awaits-en {
  font-size: clamp(0.9rem, 1.7vw, 1.05rem);
  letter-spacing: 0.03em;
}

.section-about .awaits-list-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

@media (max-width: 991px) {
  .section-about .awaits-list-row {
    grid-template-columns: 1fr;
  }
}

/* ---- List with li-icon.png ---- */
.section-about .awaits-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.section-about .awaits-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.75em;
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  line-height: 1.5;
}

.section-about .awaits-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 1.25rem;
  height: 1.25rem;
  background-image: url("../images/moon.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.section-about .awaits-list-ar {
  direction: rtl;
  text-align: right;
  font-family: "Alexandria", sans-serif;
}

.section-about .awaits-list-ar li {
  padding-left: 0;
  padding-right: 2rem;
}

.section-about .awaits-list-ar li::before {
  left: auto;
  right: 0;
}