/* ===================================================================
   Al Ghorrah — للآداب والفنون
   Rebuilt from "psd to figma.fig". Link AFTER main.css so these rules
   win the cascade.

   The page is two parallel layouts: .ag-desktop-view and
   .ag-mobile-view, swapped at 767px (see §12). Both are built the same
   way — a section box with a fixed aspect-ratio, filled with
   absolutely-positioned .layer divs whose offsets are percentages of
   that box. Sizes use cqw against the section's container-type, so the
   whole thing scales with the viewport.

   CONTENTS
     1.  Fonts
     2.  Base
     3.  Header
     4.  Layout utilities
     5.  Shared typography
     6.  Tabs / accordion
     7.  Desktop — banner
     8.  Desktop — info cards
     9.  Desktop — intro
     10. Desktop — info
     11. Desktop — dates
     12. Mobile — view switch
     13. Mobile — banner
     14. Mobile — info cards
     15. Mobile — intro
     16. Mobile — info
     17. Mobile — dates
     18. Footer
     19. Mobile overrides (≤768px)
     20. Dates overrides (≤767px)
     21. English (LTR) overrides
   =================================================================== */


/* ==== 1. Fonts ==================================================== */

@font-face {
  font-family: "Foda";
  src: url("../fonts/alfont_com_Foda-Free-Font.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "qffont";
  src: url("../fonts/QF-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "qffont";
  src: url("../fonts/QF-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "qf-serif";
  src: url("../fonts/qfserif-variable-webfont.woff2") format("woff2"),
       url("../fonts/QFSerif-VF\ BETA\ 5.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}


/* ==== 2. Base ===================================================== */

body {
  margin: 0;
}

/* direction comes from <html dir>; restated so main.css can't flip it */
[dir="rtl"] body { direction: rtl; }
[dir="ltr"] body { direction: ltr; }

a { color: #720d2e; }
a:hover { color: #67042c; }

.bg-banner {
  background-image: url("../images/al-ghorrah-cta-2026/bg-banner.svg");
}

.ag-desktop-view .ag-banner.banner-holder-new1 {
  background: #F7E3CE;
}

/* ==== 3. Header =================================================== */

.algorah-headerNew {
  background-color: transparent !important;
  box-shadow: none !important;
  will-change: transform;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1),
              background-color .25s ease,
              box-shadow .25s ease;
  /* background-image: url(../images/al-ghorrah-cta-2026/banner/page-bg-mob.svg) !important; */
  background-size: contain;
  /* background-size: 100%; */

  /* background-position: 0 0;
  background-size: 100% 382.9%; */
  /* background-repeat: repeat; */
}

.algorah-headerNew.is-scrolled {
  background-color: #fff !important;
  background-image: none !important;
  /* background-image: url("../images/al-ghorrah-cta-2026/banner/page-bg-mob.svg"); */
  /* background-size: contain; */
  /* background-position: 0 0;
  background-size: 100% 382.9%; */
  /* box-shadow: 0 2px 12px rgba(0, 0, 0, .08) !important; */
  /* background-repeat: repeat; */
}

/* Scrolling down past the banner slides the (now white) header out of
   view; scrolling back up drops it in again. The body classes are
   toggled by the scroll handler in al-ghorrah.js, using the same names
   educationcity.qa uses. main.css pairs those classes with top:-130px
   and animation:fadeIn 1s — both cancelled here so the transform above
   is the only thing that moves. */
body.scroll-down .algorah-headerNew {
  top: 0;
  transform: translateY(-100%);
  animation: none;
}

body.scroll-up .algorah-headerNew {
  top: 0;
  transform: translateY(0);
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .algorah-headerNew {
    transition: background-color .25s ease, box-shadow .25s ease;
  }
}

.algorah-headerNew .header-nav a.active,
.header-nav .nav-link.active {
  background: transparent !important;
}

.headerNew .header-nav .nav-link::after {
  background: #D8AAF5 !important;
}

.btn-primary1 {
  background-color: #D8AAF5 !important;
}


/* ==== 4. Layout utilities ========================================= */

/* Fills its positioned parent. --clip also hides anything that bleeds
   past the section edge (the artwork layers are deliberately oversized). */
.layer-stack {
  position: absolute;
  inset: 0;
}

.layer-stack--clip {
  overflow: hidden;
}

/* One piece of artwork positioned inside a section. Offsets, size and
   background-image are set per element below; anything that needs a
   different fit overrides background-position / background-size. */
.layer {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}


/* ==== 5. Shared typography ======================================== */

.ag-card-title {
  font-weight: 400;
  line-height: 1.15;
  color: #F4E4CE;
  white-space: nowrap;
}

.ag-card-title--web { font-size: 6.525cqw; }
.ag-card-title--mob { font-size: 6.056cqw; line-height: 1.05; }

.ag-card-sub {
  font-weight: 500;
  line-height: 1.13;
}

.ag-card-sub--web {
  font-size: 3.2cqw;
  color: #F4E4CE;
  margin-top: 1.512cqw;
  font-weight: 400;
}

.ag-card-sub--mob {
  font-size: 2.789cqw;
  line-height: 1.18;
  color: #f4e4ce;
  text-align: center;
}

/* main.css forces "qffont" on every body descendant via an !important rule;
   html.ag-typography is added to <html> on the Al Ghorrah application pages,
   so repeating that class climbs past it without touching any other text. */
html.ag-typography.ag-typography.ag-typography body .ag-qf-serif-line {
  font-family: "qf-serif", serif !important;
}

/* main.css sets p{font-size:15px;line-height:24px}. An explicit rule on
   p beats inheritance from the container, so the design values have to
   target p directly — hence the !important on every size below. */
.ag-body-web p,
.ag-body-mob p {
  margin: 0 0 1cqw;
}

.wd-0 {
  font-size: 26px !important;
  word-spacing: 0 !important;
}

/* Plain CSS justify only stretches the spaces between words, so a line with
   few words (like the "...creating" line in the second paragraph) gets an
   overly wide, uneven gap. Hyphenation gives the browser extra break points
   inside long words instead of just the spaces, which keeps that stretch
   in check. */
.ag-body-web p { font-size: 24px !important; line-height: 1.1667 !important; text-align: justify;}
.ag-body-mob p { font-size: 2.6286cqw !important; line-height: 1.75 !important; margin-bottom: 4.6cqw; text-align: justify; }

@media(max-width: 1440px) and (min-width: 1200px) {
  .ag-body-web p {
    font-size: 18px !important;
  }
}

.ag-body-web p:last-child,
.ag-body-mob p:last-child {
  margin-bottom: 0;
}

/* Figma sets 18.134px leading on the parent span for the whole block,
   so the bold headings share it — an absolute value, not a ratio of
   their own size. */
.ag-info-body h4 {
  font-size: 2.4846cqw !important;
  /* line-height: 1.8134cqw !important; */
  font-weight: 700;
  margin: 0;
  margin-bottom: 10px !important;  /* beats main.css's h4 margin */
}

.ag-info-body p {
  font-size: 1.8cqw !important;
  line-height: 1.7 !important;
  margin: 0 0 48px;
  text-align: start;
}

.ag-info-body p:last-child {
  margin-bottom: 0;
}


/* ==== 6. Tabs / accordion ========================================= */
/* Desktop: three buttons in a row above one open panel.
   Mobile (§19): the same markup becomes a stacked accordion. */

.ag-tab-btn {
  cursor: pointer;
  transition: filter .15s ease;
  text-align: start !important;
}

.ag-tab-btn:hover { filter: brightness(1.01); }

.ag-tab-btn.is-active {  
  /* filter: brightness(1.02) drop-shadow(0 0 8px rgba(255, 230, 190, .65));  */ 
  background-image: none;
  background-color: #f4e4ce;
  color: #7f0037 !important;
  filter: none; 
}

/* real text instead of the labels baked into the original button images */
.ag-tab-btn-label {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
  background-image: url("../images/al-ghorrah-cta-2026/info/bg-web-white.png");
  background-repeat: repeat;
  background-size: 50px 50px;
  border: 0.15cqw solid #F0E4D1;
  color: #F0E4D1;
  font-family: "qffont", sans-serif;
  font-size: 1.85cqw;
  line-height: 1.3;
  padding: 0 0.8cqw;
}

.tab-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  padding-inline: 2%;
  justify-content: center;
  /* padding-top: 1%; */
}

/* Targets .ag-tab-btn rather than `> *` so its padding still outranks the
   padding in .ag-tab-btn-label's ≤768px block (§19), which would otherwise
   win on source order. The buttons keep percentage padding at every width. */
.tab-wrapper > .ag-tab-btn {
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
  /* flex: 1 0 0; */
  display: flex;
  align-items: center;
  padding: 26px;
  color: #f4e4ce;
  cursor: pointer;
  font-weight: bold;
}

.ag-tab-panel { display: none; }
.ag-tab-panel.is-active { display: block; }


/* ==== 7. Desktop — banner ========================================= */

.ag-banner {
  position: relative;
  width: 100%;
  /* aspect-ratio: 1000 / 842.7; */
  aspect-ratio: 1000 / 900.7;
}

[dir="ltr"] .ag-banner { 
  aspect-ratio: 1000 / 900.7; 
}


.ag-banner .page-bg-web {
  inset: 0;
  background-image: url("../images/al-ghorrah-cta-2026/banner-items/page-bg-web.svg");
  opacity: 0.4;
  background-repeat: repeat;
}

.ag-banner .pattern-lower {
  inset-inline-end: 0;
  top: 88.5525%;
  width: 100%;
  height: 96.8189%;
  background-image: url("../images/al-ghorrah-cta-2026/bg/bg-purple.svg");

  background-repeat: repeat;
  background-size: contain;
}

.ag-banner .vector {
  inset-inline-end: 0.4518%;
  top: 77.7995%;
  width: 98.916%;
  height: 110.6%;
  background-image: url("../images/al-ghorrah-cta-2026/banner-items/vector.webp");
}

.ag-banner .banner-2-logo {
    inset-inline-end: 10.6595%;
    top: 9.886%;
    width: 79.1075%;
    height: 23.1926%;
    /* background-image: url("../images/al-ghorrah-cta-2026/banner-items/banner-2-logo.webp"); */
    background-image: url("../images/al-ghorrah-cta-2026/bg/title-ar.svg");

}

.ag-banner .banner-person-orchestra {
  inset-inline-end: 0;
  top: 14%;
  height: 66.5%;
  width: 100%;
  /* height: 70.5%; */
  background-image: url("../images/al-ghorrah-cta-2026/banner-items/banner-new-1.png");
  background-position: 50% 50%;
  background-size: contain;
}

[dir="ltr"] .ag-banner .banner-person-orchestra {
  top: 14%;
  height: 66.5%;
}

.ag-banner .pink-band {
  inset-inline-end: 0;
  /* top: 88.3907%; */
  top: 77%;
  width: 100%;
  height: 11.5%;
  background-image: url("../images/al-ghorrah-cta-2026/banner-items/pink-band.webp");
}
[dir="ltr"] .ag-banner .pink-band {
  top: 63.99% !important;
}
.ag-banner .banner-1-logo {
  inset-inline-end: 0;
  top: 8.5%;
  width: 100%;
  height: 138px;
  background-image: url("../images/al-ghorrah-cta-2026/banner-items/banner-logo-grey.svg");
}

/* social icons, stacked down the side of the banner */
.ag-banner-social {
  position: absolute;
  inset-inline-end: 2.439%;
  top: 51.4738%;
  width: 2.168%;
  height: 13.556%;
  container-type: size;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  z-index: 4;
}

.ag-banner-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  color: #333333;
  font-size: 86.25cqw;
  line-height: 1;
  text-decoration: none;
}

.ag-banner-social-link:hover {
  color: #720d2e;
}


/* ==== 8. Desktop — info cards ===================================== */

.ag-info-cards {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 170;
}

/* .ag-info-cards .page-bg-web-2 {
  inset-inline-end: 0;
  top: -438.0952%;
  width: 100%;
  height: 1676.7757%;
  background-image: url("../images/al-ghorrah-cta-2026/banner/page-bg-web.webp");
  background-position: 0 0;
  background-size: 100% 100%;
}

.ag-info-cards .pattern-lower-2 {
  inset-inline-end: 0;
  top: -37.1833%;
  width: 100%;
  height: 384.5657%;
  background-image: url("../images/al-ghorrah-cta-2026/bg/bg-purple.svg");
      background-repeat: repeat;
    background-size: contain;
} */

/* .ag-info-cards .pattern-upper {
  inset-inline-end: 0.4518%;
  top: -97.4062%;
  width: 98.916%;
  height: 551.4981%;
  background-image: url("../images/al-ghorrah-cta-2026/banner/pattern-upper.webp");
} */

.ag-info-cards .orange-art {
  inset-inline-end: 4.2458%;
  top: 4%;
  width: 91.5086%;
  height: 96.72%;
  background-image: url("../images/al-ghorrah-cta-2026/banner-items/orange-art.png");
  z-index: 5;
}

.ag-info-cards-content {
  position: absolute;
  inset-inline-end: 11.0207%;
  top: 22.8157%;
  width: 78.0488%;
  height: 43.8767%;
  container-type: size;
  z-index: 6;
}


/* ==== 9. Desktop — intro ========================================== */

.ag-intro {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 480;
  container-type: size;
}

/* .ag-intro .page-bg-web-3 {
  inset-inline-end: 0;
  top: -218.6537%;
  width: 100%;
  height: 681.3238%;
  background-image: url("../images/al-ghorrah-cta-2026/banner/page-bg-web.webp");
  background-position: 0 0;
  background-size: 100% 100%;
} */

/* .ag-intro .pattern-lower-3 {
  inset-inline-end: 0;
  top: -55.7454%;
  width: 100%;
  height: 170%;
  background-image: url("../images/al-ghorrah-cta-2026/bg/bg-purple.svg");

  background-repeat: repeat;
  background-size: contain;
} */

/* .ag-intro .pattern-upper-2 {
  inset-inline-end: 0.4518%;
  top: -98.2163%;
  width: 98.916%;
  height: 200.2222%;
  background-image: url("../images/al-ghorrah-cta-2026/banner/pattern-upper.webp");
  touch-action: none;
  pointer-events: none;
  z-index: 2;
} */

.ag-body-web {
  position: absolute;
  inset-inline-end: 5.8714%;
  top: 10%;
  width: 36%;
  height: 75.0764%;
  color: #6B0A30;
  text-align: justify;
}
[dir="ltr"] .ag-body-web {
  inset-inline-end: 9.8714%;
}

/* also used by the mobile intro, which overrides it in §19 */
.frame-ghorrah {
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 68%;
  height: 76.1%;
  background: url("../images/al-ghorrah-cta-2026/banner-items/frame-ghorrah-2.webp") center/contain no-repeat;
  z-index: 0;
}

[dir="ltr"] .frame-ghorrah {
  background: url("../images/al-ghorrah-cta-2026/section-2/img-en-web-1.png") center/contain no-repeat;
  /* background: url("images/al-ghorrah-cta-2026/en/frame-ghorrah-2.png") center/contain no-repeat; */

  background-position: bottom;
  width: 62%;
  height: 76.1%;
  inset-inline-start: -9%;
  bottom: -3px;
}

/* the desktop frame art is far too tall once the intro stacks, so both
   directions swap to a wide mobile crop pulled up under the card above */
@media (max-width: 767px) {
  [dir="ltr"] .frame-ghorrah {
    /* background: url("images/al-ghorrah-cta-2026/en/frame-mob.png") center/contain no-repeat; */
    background: url("../images/al-ghorrah-cta-2026/section-2/img-en-mob-1.png") center/contain no-repeat;

    aspect-ratio: 910 / 479 !important;
    margin-top: 0px !important;
  }

  [dir="rtl"] .frame-ghorrah {
    /* background: url("images/al-ghorrah-cta-2026/mobile-ar/frame-ar.png") center/contain no-repeat; */
    background: url("../images/al-ghorrah-cta-2026/section-2/img-ar-mob-1.png") center/contain no-repeat;
    aspect-ratio: 910 / 511 !important;
    margin-top: 0px !important;
  }
  [dir="rtl"] .ag-mob-intro .frame-ghorrah {
      inset-inline-start: -25px !important;
      width: calc(100% + 50px) !important;
      aspect-ratio: 910 / 500 !important;
  }
}

.title-web {
  position: absolute;
  inset-inline-end: 44.50%;
  top: 5.39%;
  width: 51.8121%;
  height: 34%;
  background: url("../images/al-ghorrah-cta-2026/intro/title_web-final.png") center/contain no-repeat;
  z-index: 0;
}

[dir="ltr"] .title-web {
  background: url("../images/al-ghorrah-cta-2026/en/img-4.png") center/contain no-repeat;
  inset-inline-end: 48.5%;
}


/* ==== 10. Desktop — info ========================================== */
/* .ag-info is also the scope the tab script uses to find its panels. */

/* .ag-info {
  position: relative;
  width: 100%;
  aspect-ratio: 920 / 718.157;
  background-repeat: repeat;
  background-size: 100%;
  container-type: inline-size;
  padding-bottom: 76px;
} */

.ag-desktop-view .ag-info, .ag-mobile-view .ag-info {
    background-image: url(../images/al-ghorrah-cta-2026/bg/bg-maroon.svg);
    background-size: 100% auto;
    background-position: center;
    background-repeat: repeat;
    position: relative;
}

.ag-info .bg-web {
  inset-inline-end: 0;
  top: 0;
  width: 100%;
  height: 100%;
      background-image: url(../images/al-ghorrah-cta-2026/bg/bg-maroon.svg);
  background-repeat: repeat;
  background-size: 100%;
  /* opacity: 0.4; */

}

.ag-info .title-3 {
  position: relative;
  /* margin-top: 15px; */
  margin-bottom: 8px;
  text-align: center;
  z-index: 2;
}

.ag-info .title-3 img {
  display: inline-block;
  margin: auto;
  width: 56.5%;
  max-width: 800px;
}

/* Not position:absolute like its siblings: this panel holds
   variable-length text, and an absolutely-positioned box never grows
   its container to fit overflow — it would spill over painter-web and
   the section after .ag-info. Flowing normally lets its real height
   (title-3 + tab-wrapper + this) push .ag-info taller whenever a tab's
   copy needs more room than the aspect-ratio gives at the current width. */
.ag-info-body {
  position: relative;
  margin-inline-start: 5%;
  margin-top: 3%;
  width: 52%;
  color: #F2E5D0;
  text-align: justify;
}

/* .ag-info .painter-web {
  inset-inline-end: -2.5%;
  top: 42%;
  width: 34%;
  height: 62%;
  background-image: url("../images/al-ghorrah-cta-2026/banner-items/painter-web-2.webp");
  z-index: 4;
} */

.ag-info .painter-web {
  position: absolute;
  top: auto;              
  left: auto;
  right: -2.5%;            
  bottom: -1.951cqw;       
  width: 34%;
  height: auto;            
  max-width: none;
  background: none;       
  z-index: 4;
  pointer-events: none;    
}

[dir="ltr"] .ag-info .painter-web {
  transform: scaleX(-1);
}
[dir="ltr"] .ag-info .pattern-1 { 
  bottom: 5px;
}

.ag-info .pattern-1 {
  inset-inline-end: -0.1806%;
  bottom : 5px;
  width: 100%;
  height: 36px;
  background-image: url("../images/al-ghorrah-cta-2026/banner-items/pattern-1.webp");
  background-repeat: repeat-x;
  z-index: 3;
}

.pattern-2 {
  position: absolute;
  inset-inline-end: 2%;
  top: -2%;
  width: 230px;
  height: 230px;
  margin-top: 50px;
  transform: translateY(-50%);
  z-index: 2;
}

.pattern-2 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


@media (min-width: 768px) and (max-width: 1400px) {
  .pattern-2 {
    width: 16.4286%;
    height: 22.877%; /* % height is relative to the container's height, not width */
    margin-top: 3.5714%;
  }
}


/* ==== 11. Desktop — dates ========================================= */

.ag-dates {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 820;
  container-type: size;
  background: #ff5a31;
  margin-top: -29px;
}

/* torn edge down the side */
.ag-dates::before {
  content: "";
  display: inline-block;
  position: absolute;
  inset-inline-end: -14px;
  width: 36px;
  height: 100%;
  background-image: url("../images/al-ghorrah-cta-2026/banner-items/vector-2.webp");
  background-repeat: no-repeat;
  background-size: contain;
}

[dir="rtl"] .ag-dates::before {
  content: "";
  display: inline-block;
  position: absolute;
  inset-inline-end: 2px;
  width: 79px;
  height: 100%;
  background-image: url("../images/al-ghorrah-cta-2026/banner-items/zigzag.png");
  background-repeat: no-repeat;
  background-size: contain;
}

html[dir="ltr"] .ag-dates::before {
  inset-inline-end: -10px;
}
/* dotted rule along the bottom */
.ag-dates::after {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: 16px;
  width: 100%;
  height: 22px;
  /* background: url("../images/al-ghorrah-cta-2026/banner-items/line-dot.png") right bottom; */
  background: url("../images/al-ghorrah-cta-2026/bg/dot_line.png") right bottom;
  background-repeat: repeat-x;
  background-size: 510px;
}

.ag-dates-title {
  position: absolute;
  font-weight: 400;
  letter-spacing: -0.0663cqw;
  text-align: start;
}

.ag-dates-title--web {
  inset-inline-start: 3%;
  top: 14.122%;
  width: 34.5%;  
  background-image: url("../images/al-ghorrah-cta-2026/banner-items/ag-dates-title--web.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  aspect-ratio: 1000 / 430; 
}

[dir="ltr"] .ag-dates-title--web {
  inset-inline-start: 2%;
  top: 14.122%; 
  aspect-ratio: 1000 / 550;
  background-image: url("../images/al-ghorrah-cta-2026/en/title-en.png");
}

.ag-dates .timeline-svg {
  inset-inline-end: 1%;
  top: -5%;
  width: 68%;
  height: 85%;
  background-image: url("../images/al-ghorrah-cta-2026/timeline/timeline-web-ar.png");
  z-index: 9;
}

[dir="ltr"] .ag-dates .timeline-svg {
  background-image: url("../images/al-ghorrah-cta-2026/timeline/timeline-web-en.png");
}

.ag-dates .lady {
  inset-inline-start: -4%;
  bottom: 0;
  width: 80%;
  height: 66.9396%;
  background-image: url("../images/al-ghorrah-cta-2026/banner-items/lady.webp");
  background-position: bottom;
  z-index: 1;
}

[dir="ltr"] .ag-dates .lady { 
  transform: scaleX(-1);
}


/* ==== 12. Mobile — view switch ==================================== */

.ag-mobile-view {
  display: none;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  margin-top: 0 !important;
  position: relative;
  background: #F7E3CE;
}


@media (max-width: 767px) {
  .ag-desktop-view { display: none; }
  .ag-mobile-view { display: block; }

  [dir="ltr"] .ag-mob-banner .craft-1-2 {
    inset-inline-end: 22.108% !important;
}
    [dir="ltr"] .ag-mob-banner .craft-2-2
 {
        inset-inline-end: 64.877% !important;
        top: 65.5% !important;
    }
#application_submission_success_modal.al-ghorrah-modal.modal-wrapper .art-modal .btn-close {
    top: 12% !important;
    inset-inline-end: 15px !important;
}
}



/* ==== 13. Mobile — banner ========================================= */

.ag-mob-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 800 / 863.092;
}

.ag-mob-banner .page-bg-mob {
  inset: 0;
  /* background-image: url("../images/al-ghorrah-cta-2026/banner/page-bg-mob.svg"); */
  background-image: url("../images/al-ghorrah-cta-2026/banner/page-bg-mob.webp");
  /* background-position: 0 -7.822%;
  background-size: 100% 143.64%; */
  background-size: cover;
  opacity: 0.4;
}

.ag-mob-banner .title-2 {
  inset-inline-end: 10.6468%;
  top: 30%;
  width: 83.2019%;
  height: 23.9766%;
  background-image: url("../images/al-ghorrah-cta-2026/mobile-ar/title-2.webp");
}


.ag-mob-banner .craft-2-2 {
  inset-inline-end: 9.877%;
  top: 60%;
  width: 22.53%;
  height: 30.921%;
  background-image: url("../images/al-ghorrah-cta-2026/mobile-ar/craft-2.webp");
}

.ag-mob-banner .craft-1-2 {
  inset-inline-end: 54.31%;
  top: 58.5%;
  width: 22.8454%;
  height: 28.3216%;
  background-image: url("../images/al-ghorrah-cta-2026/mobile-ar/craft-1.webp");
}

.ag-mob-banner .craft-1-2-en {
    inset-inline-end: 22.877%;
    top: 58.5%;
    width: 22.8454%;
    height: 28.3216%;
    background-image: url(../images/al-ghorrah-cta-2026/mobile-ar/craft-1.webp);
}

.ag-mob-banner .craft-2-2-en {
    inset-inline-end: 63.8108%;
    top: 60%;
    width: 22.53%;
    height: 30.921%;
    background-image: url(../images/al-ghorrah-cta-2026/mobile-ar/craft-2.webp);
}

.ag-mob-banner .banner-person-orchestra-2 {
  inset-inline-end: 0;
  top: 46.8%;
  width: 100%;
  height: 66%;
  background-image: url("../images/al-ghorrah-cta-2026/mobile-ar/banner-person_orchestra-2.webp");
  background-position: 50% 50%;
  background-size: contain;
  z-index: 9;
}

.ag-mob-banner .pink-band-2 {
  inset-inline-end: 0.1578%;
  top: 99%;
  width: 99.8423%;
  height: 9%;
  background-image: url("../images/al-ghorrah-cta-2026/mobile-ar/pink\ band.webp");
  z-index: 10;
}

.ag-mob-banner .logo-ghorrah {
  inset-inline: 0;
  margin-inline: auto;
  top: 18%;
  width: 75%;
  height: 138px;
  background-image: url(../images/al-ghorrah-cta-2026/banner-items/banner-logo-grey.svg);
}

[dir="ltr"] .ag-mob-banner .logo-ghorrah {
  top: 18%;
}

[dir="ltr"] .ag-mob-banner .title-2 {
  inset-inline-end: 5.6468%;
  top: 30%;
  width: 88.2019%;
  height: 26.9766%; 
}


/* ==== 14. Mobile — info cards ===================================== */

.ag-mob-info-cards {
  position: relative;
  width: 100%;
  aspect-ratio: 800 / 265.028;
  container-type: size;
  margin-top: 6%;
}

.ag-mob-info-cards .card-1 {
  inset-inline-end: 2%;
  top: 2.0376%;
  width: 96%;
  height: 88%;
  background-image: url("../images/al-ghorrah-cta-2026/mobile-ar/card-1.webp");
  z-index: 2;
}

.ag-mob-info-card {
  position: absolute;
  inset-inline-end: 17.6656%;
  top: 25.0376%;
  width: 64.9054%;
  height: 33.8299%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1cqw;
  z-index: 3;
}


/* ==== 15. Mobile — intro ========================================== */

.ag-mob-intro {
  position: relative;
  width: 100%;
  aspect-ratio: 800 / 757.729;
  container-type: size;
}

.ag-mob-intro .card-mob {
  inset-inline-end: 0.6309%;
  top: 0.4997%;
  width: 98.6593%;
  height: 98.2513%;
  background-image: url("../images/al-ghorrah-cta-2026/intro/card-mob.png");
  z-index: 2;
}

.ag-body-mob {
  position: absolute;
  inset-inline-end: 8.1485%;
  top: 37.9623%;
  width: 83.1878%;
  color: #750F31;
  text-align: justify;
}

.ag-mob-intro .title-1 {
  inset-inline-end: 0;
  top: 12.8228%;
  width: 52.6025%;
  height: 20.4001%;
  background-image: url("../images/al-ghorrah-cta-2026/intro/title_web-final.png");
}

[dir="ltr"] .ag-mob-intro .title-1 { 
  background-image: url("../images/al-ghorrah-cta-2026/en/img-7.svg");
}


/* ==== 16. Mobile — info =========================================== */

.ag-mobile-view .bg-web-2 {
  inset-inline-end: 0;
  top: 0%;
  width: 100%;
  height: 100%; 
  /* background-image: url("../images/al-ghorrah-cta-2026/info/bg-web.svg"); */
  background-image: url("../images/al-ghorrah-cta-2026/cards/bg-burgundy.png");

  background-repeat: repeat;
  background-size: auto;
}

.ghost-title-web {
  position: absolute;
  inset-inline-end: 4.336%;
  top: 7.5473%;
  width: 90.3342%;
  height: 25.9121%;
}

.ag-mobile-view .painter-web-2 {
  inset-inline-end: -2.0777%;
  top: 50%;
  width: 31.4363%;
  height: 55.0489%;
  background-image: url("../images/al-ghorrah-cta-2026/banner-items/painter-web.webp");
  z-index: 4;
}


/* ==== 17. Mobile — dates ========================================== */

.ag-dates-mob {
  position: relative;
  width: 100%;
  aspect-ratio: 890 / 1170;
  container-type: size;
  background-color: #ff5a31;
}

.ag-dates-mob::before {
  content: "";
  display: inline-block;
  position: absolute;
  inset-inline-end: -10px;
  top: 6%;
  width: 69px;
  height: 100%;
  background-image: url("../images/al-ghorrah-cta-2026/banner-items/vector-2.webp");
  background-repeat: repeat-y;
  background-size: contain;
}

.ag-dates-title--mob {
  inset-inline-start: 5%;
  top: 4.4%;
  width: 70%;
  font-weight: 700;
  font-size: 6.6227cqw;
  line-height: 7.9473cqw;
  color: #720D2E;
}

.ag-dates-mob .timeline-svg-2 {
  inset-inline-end: 0%;
  top: 21%;
  width: 100%;
  height: 90%;
  background-image: url("../images/al-ghorrah-cta-2026/timeline/timeline-mob-ar.png");
}

[dir="ltr"] .ag-dates-mob .timeline-svg-2 {
  background-image: url("../images/al-ghorrah-cta-2026/timeline/timeline-mob-en.png");
}

.ag-dates-mob .lady-ar {
  inset-inline-start: 0;
  bottom: 0;
  width: 100%;
  height: 38.6%;
  background-image: url("../images/al-ghorrah-cta-2026/mobile-ar/lady-ar.webp");
  background-position: bottom right;
}

[dir="ltr"] .ag-dates-mob .lady-ar {
    transform: scaleX(-1);
} 


/* ==== 18. Footer ================================================== */

.al-ghorrah-footer {
  background-color: #691130;
}


/* ==== 19. Mobile overrides ======================================== */
/* Matches §12's view-switch breakpoint exactly (≤767px). A previous
   ≤768px here left a 1px gap where the desktop view was still showing
   but these mobile-only resets (aspect-ratio, absolute→relative
   children, .pattern-2 sizing) already applied to it — broke real
   768px-wide devices like iPad mini/classic in portrait. */

@media (max-width: 767px) {

  /* --- intro: absolute layers become a simple stacked column --- */
  .ag-mob-intro {
    display: flex;
    flex-direction: column;
    gap: 12px;
    aspect-ratio: auto;
    container-type: unset;
    padding-inline: 25px;
    overflow: visible;
  }

  .ag-mob-intro > *:not(.card-mob) {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
  }

  .ag-mob-intro .card-mob {
    width: 98.6593%;
    height: 98.2513%;
  }

  /* second copy of the card art, pinned to the top of the stack */
  .ag-mob-intro .card-mob::before {
    content: "";
    display: inline-block;
    position: absolute;
    inset-inline-start: 0;
    top: -18%;
    width: 100%;
    height: 66%;
    /* background: url("../images/intro/card-mob.webp") top center / contain no-repeat; */
    background: url("../images/al-ghorrah-cta-2026/intro/card-mob-1.png") top center / contain repeat-y;
    background-size: 100%;
    touch-action: none;
    pointer-events: none;
  }
  [dir="ltr"] .ag-mob-intro .card-mob::before {
    height: 77% !important;
  }
  .ag-mob-intro .card-mob {
    background-position: bottom;
  }

  /* unpins BOTH copies of the frame — including the desktop one, which is
     still on screen at exactly 768px (see the breakpoint note above) */
  .frame-ghorrah {
    position: relative;
    inset-inline-start: auto;
    inset-inline-end: auto;
    top: auto;
    bottom: auto;
  }

  /* scoped to .ag-mob-intro so it outranks the `> *` reset above — it
     deliberately breaks out full-bleed, past the section's 25px padding */
  .ag-mob-intro .frame-ghorrah {
    position: relative;
    inset-inline-start: -50px;
    inset-inline-end: auto;
    top: auto;
    bottom: auto;
    width: calc(100% + 74px);
    max-width: 768px;
    height: 100%;
    aspect-ratio: 910 / 489;
    margin-top: -62px;
    order: 3;
  }

  .ag-mob-intro .title-1 {
    width: 100%;
    aspect-ratio: 100 / 35;
    order: 1;
  }

  [dir="ltr"] .ag-mob-intro .title-1 {
      height: 45px;
  }
  [dir="ltr"] .ag-mob-intro .title-1 { 
    background-size: 100%;
    background-position: center;
  }

  /* position/inset/width/height already come from the `> *` reset above;
     only the flex order is needed here */
  .ag-mob-intro .ag-body-mob {
    order: 2;
  }

  /* --- info: same treatment, minus the two background layers --- */
  .ag-info {
    aspect-ratio: auto;
    container-type: unset;
    padding: 25px;
  }

  .ag-info > *:not(.bg-web-2, .pattern-2) {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
  }

  .ag-info .bg-web-2 {
    background-size: contain;
  }

  .ag-info .ghost-title-web {
    text-align: start;
    margin-bottom: 24px;
  }

  .ag-info .ghost-title-web img {
    max-width: 70%;
  }

  /* --- tabs become an accordion --- */
  .ag-tab-btn-label {
    position: relative;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px;
    margin-bottom: 20px !important;
    font-size: 22px;
    z-index: 2;
    background: rgba(255, 255, 255, .26); 
    border-inline-width: 3px;
    white-space: normal;
  }

  [dir="ltr"] .ag-tab-btn-label {
      font-size: 18px;
  }

  /* caret: a border triangle so it inherits the header's colour — cream
     on a collapsed row, maroon once .is-active repaints the row. It sits
     on the far side of the header (left in RTL, right in EN) via the
     auto margin, and flips to point up while the panel is open. */
  .ag-tab-btn-label::after {
    content: "";
    flex: 0 0 auto;
    margin-inline-start: auto;
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 12px solid currentColor;
    transition: transform .2s ease;
  }

  .ag-tab-btn-label.is-active::after {
    transform: rotate(180deg);
  }

  .ag-tab-btn.is-active {
    background-image: none;
    background-color: #f4e4ce;
    color: #7f0037;
    filter: none;
  }

  /* open panel sits on the same translucent white the collapsed headers
     use, so the bg-web texture still reads through it as in the design */
  .ag-info-body {
    padding: 16px;
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, .22);
    background-color: #a23e5cde;
    position: relative;
    z-index: 2;
    margin-inline-start: 0;
  }

  .ag-info-body h4 {
    font-size: 20px !important;
    line-height: 22px !important;
    text-align: start !important;
  }

  .ag-info-body p,
  .ag-body-mob p {
    font-size: 18px !important;
    line-height: 1.4 !important;
    font-weight: 400;
    margin-bottom: 20px;

  }

  .pattern-2 {
    inset-inline-end: 8px;
    top: 6px;
    width: 110px;
    height: 150px;
    margin-top: 0;
    transform: translateY(0);
    z-index: 1;
  }

}

/* [dir="ltr"] .ag-mob-intro .card-mob::before { 
  height: 57% !important;
} */

@media (max-width: 500px) {
  [dir="ltr"] .ag-mob-intro .title-1 {  
    background-position: center 10%;
  }
}
@media(max-width: 991px) and (min-width: 768px) {
  .ag-banner .banner-2-logo {
    inset-inline-end: 10.6595%;
    top: 16.886%;
    width: 83.1075% !important;
    height: 16.1926% !important;
}
[dir="ltr"] .ag-banner .banner-2-logo {
    inset-inline-end: 8% !important;
    top: 17.5% !important;
    height: 14% !important;
}

.ag-banner .banner-1-logo {
    top: 17%;
    height: 75px;
}
[dir="ltr"] .ag-banner .banner-1-logo {
    top: 17.5% !important;
    height: 75px !important;
}
}


@media (max-width:1199px) and (min-width:992px) {
  .pattern-2 img {
    transform: scale(0.8);
  }
  .ag-info .painter-web {
    bottom: -12% !important;
    top: auto !important;
}
/* .ag-banner {
    aspect-ratio: 698 / 900.7;
} */
[dir="ltr"] .ag-banner .banner-2-logo {
    inset-inline-end: 13.6595% !important;
    width: 70.1075% !important;
    top: 20.5% !important;
    height: 12.1926% !important;
}

.ag-dates {
    margin-top: -37px !important;
}
}

@media (max-width:1199px) and (min-width:992px) {
  
/* .ag-banner {
    aspect-ratio: 698 / 900.7;
} */
[dir="rtl"] .ag-banner .banner-2-logo {
  top: 11.8% !important;
}
[dir="rtl"] .ag-banner .banner-2-logo {
    height: 23.1926% !important;
}
[dir="rtl"] .ag-dates::before {
  inset-inline-end: 0px !important;
}
html[dir="ltr"] .ag-dates::before {
    inset-inline-end: -19px !important;
}
}


/* ==== 20. Dates overrides (≤767px) ================================ */
/* Deliberately ≤767, matching the view switch in §12 and NOT the ≤768
   block above: at exactly 768px the desktop dates block is still the one
   on screen, so its title must stay visible. */

@media (max-width: 767px) {
  .ag-dates-title { display: none; }
  [dir="rtl"] .ag-mob-banner .title-2 {
    top: 33% !important;
  }

  .ag-dates-time {
    top: -10% !important;
    z-index: 9;
  }
   .ag-info-body p {
    text-align: start !important;
  }

  .ag-body-mob p {
    text-align: justify !important;
    /* -webkit-hyphens: auto;
    hyphens: auto; */
  }

  .ag-dates::before {
    inset-inline-end: -15px !important;
  }

  .ag-dates-mob::before {
    /* width: 20px !important; */
    /* background-color: yellow; */
    width: auto !important;
    aspect-ratio: 28 / 1020;
    inset-inline-end: -4px;
    top: 0% !important;
  }

  [dir="ltr"] .ag-dates-mob::before { 
    inset-inline-end: -2px; 
  }

  /* pattern strip along the top of the mobile dates block */
  .ag-dates-mob::after {
    content: "";
    display: inline-block;
    position: absolute;
    inset-inline-end: 0;
    top: -3px;
    width: 100%;
    height: 87px;
    background-image: url("../images/al-ghorrah-cta-2026/banner-items/pattern-1.webp");
    background-repeat: repeat-x;
    background-size: contain;
  }
}


/* ==== 21. English (LTR) overrides ================================= */
/* al-ghorrah-sections-en.html is byte-identical to the Arabic page apart
   from <html dir>, so [dir="ltr"] is the only hook for EN-only art.
   images/en/img-5.png is the English wordmark and matches the Arabic
   lockups pixel for pixel (2511x782), hence a straight background swap. */

[dir="ltr"] .ag-banner .banner-2-logo {
  /* background-image: url("../images/al-ghorrah-cta-2026/en/img-5.png"); */
  background-image: url("../images/al-ghorrah-cta-2026/bg/title-en.svg");

  inset-inline-end: 20%;
    top: 12.5%;
    width: 60%;
}


/* mobile counterpart of .banner-2-logo — same wordmark, smaller export */
[dir="ltr"] .ag-mob-banner .title-2 {
  background-image: url("../images/al-ghorrah-cta-2026/en/img-5.png");
}
.proposal_registration:hover {
  color: #f4e4ce !important;
  background-color: #6a0830;
}

.proposal_registration:hover::after {
  filter: invert(91%) sepia(16%) saturate(340%) hue-rotate(351deg)
          brightness(102%) contrast(92%) !important;
}


/* poem submission popup ("Call to Poets") background */
#poetry_submission_modal .modal-content.art-modal {
    background-image: url('../images/al-ghorrah-cta-2026/bg/bg-beige.svg') !important;
    background-size: contain !important;
    position: relative;
    overflow: hidden;
    background-image: none !important;
    background-color: #F7E3CE !important;
}

/* stitched zigzag frame around the application form popup, built from the
   two edge crops — block runs the full top/bottom edge (corners baked in),
   side fills the straight run between corners on the left/right. Flipping
   each asset with scale() reuses it for the opposite edge. Inset from the
   modal edge so the popup background shows as a gap around the frame. */
#poetry_submission_modal .popup-frame {
    --popup-frame-thickness: clamp(14px, 1.8vw, 26px);
    position: absolute;
    inset: clamp(10px, 2vw, 22px);
    z-index: 3;
    pointer-events: none;
}

#poetry_submission_modal .popup-frame__edge {
    position: absolute;
    display: block;
    object-fit: cover;
}

#poetry_submission_modal .popup-frame__top,
#poetry_submission_modal .popup-frame__bottom {
    left: 0;
    width: 100%;
    height: 64px;
    object-position: top;
}

#poetry_submission_modal .popup-frame__top {
    top: 0;
}

#poetry_submission_modal .popup-frame__bottom {
    bottom: -6px;
    transform: scaleY(-1);
}

#poetry_submission_modal .popup-frame__left,
#poetry_submission_modal .popup-frame__right {
    top: 5px;
    height: 100%;
    width: var(--popup-frame-thickness);
}

#poetry_submission_modal .popup-frame__left {
    left: 0;
}

#poetry_submission_modal .popup-frame__right {
    right: 0;
    transform: scaleX(-1);
}

.modal-wrapper .contact-form .modal-header {
  padding-block-start: 6rem !important;
}
.al-ghorrah-modal.modal-wrapper .art-modal .btn-close {
  top: 50%;
  inset-inline-end: 50px;
}

#poetry_submission_modal .modal-header,
#poetry_submission_modal .modal-body.popup-wizard {
    position: relative;
    z-index: 4;
    padding-inline: clamp(100px, 5.5vw, 60px) !important;
}
.modal.log-modal.al-ghorrah-modal .actions ul li a {
    background: #691130 !important;
}
.modal.log-modal.al-ghorrah-modal .actions ul li a:hover {
    background: #691130 !important;
}
.modal-content.art-modal .modal-body::before, .modal-content.art-modal::before {
  display: none !important;
}
.al-ghorrah-modal .text-orange.text-medium.f-20 {
  font-size: 20px !important;
  color: #8f1414 !important;
  font-weight: bold !important;
}
.al-ghorrah-modal .wizard > .content > .body label {
  font-size: 17px !important;
}

.proposal_registration::after { 
  filter: brightness(0) saturate(100%) invert(15%) sepia(68%) saturate(2593%) hue-rotate(342deg) brightness(96%) contrast(108%);
  -webkit-filter: brightness(0) saturate(100%) invert(15%) sepia(68%) saturate(2593%) hue-rotate(342deg) brightness(96%) contrast(108%);
}

.proposal_registration { 
  background: #f4e4ce;
  color: #8f1413;
  z-index: 9999;
}

.app-link-wrap {
  z-index: 5;
}

.term-and-condition-checkbox {
  background-color: transparent !important;
  padding-inline :0px !important;
  margin-inline-start: -5px;
}

.go-to-home-page{
  position: absolute;
  bottom: 64px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
}
html[dir=rtl] .go-to-home-page{
  transform: translateX(50%);
}
.go-to-home-page-btn{
  font-size: 13px !important;
}

.text-red {
   color: #8f1413 !important;
}



@media (max-width: 768px) {
     .ag-body-mob p.ag-body-mob-title{
        font-size: 15px !important;
    }
     .ag-body-mob p.ag-body-mob-title-ar{
        font-size: 14px !important;
    }
}

/* ==== 22. Arabic (RTL) mobile overrides =========================== */

@media (max-width: 768px) {
  html[dir="rtl"] .ag-dates-mob::before {
    inset-inline-end: 0px !important;
    transform: scaleX(-1);
  }

  html[dir="rtl"] .ag-mob-intro .title-1 {
    width: 100%;
    aspect-ratio: 100 / 32 !important;
    order: 1;
    inset-inline-start: 0 !important;
    margin-bottom: 10px;
  }
}


#application_submission_success_modal .modal-content.art-modal {
  background: none !important;
 }
 
  #application_submission_success_modal h6.mt-3.mb-2 {
    display: none !important;
  }
  #application_submission_success_modal .go-to-home-page-btn:hover {
    background: #f4e4ce !important;
    border-color: #f4e4ce !important;
    color: #8f1414 !important;

  }
   #application_submission_success_modal .go-to-home-page-btn {
    border-color: #f4e4ce !important;
    color: #f4e4ce !important;
    border-width: 2px !important;
    padding: 5px 15px !important;
    font-size: 12px !important;

  }
  #application_submission_success_modal .go-to-home-page {
    bottom: 72px !important;
  }


  @media (max-width: 767px) {
    #application_submission_success_modal .go-to-home-page {
      bottom: 60px !important;
    }
    #application_submission_success_modal .go-to-home-page-btn {
          padding: 1px 15px !important;
          border-width: 1px !important; 
          font-size: 8px !important;
    }
  }

@media (min-width: 992px) {
  .ag-info-body h4 {
    font-size: 24px !important;
  }
  .ag-info-body p {
    font-size: 24px !important;
  }
}

.form-check.custom-check.term-check.mb-2 {
  background-color: #fff !important;
}

@media (max-width: 767px) {
  #poetry_submission_modal .modal-body.popup-wizard {
    padding-inline: clamp(30px, 5.5vw, 60px) !important;
  }
  #poetry_submission_modal .popup-frame__right, #poetry_submission_modal .popup-frame__left {
    width: 31px !important;
  }
}

.modal-content.art-modal .form-check {
  background-color: #fff !important;
}

/* new update */
.new-patt {
  /* background-image: url("../images/al-ghorrah-cta-2026/bg/bg-purple.svg"); */
  background-image: url("../images/al-ghorrah-cta-2026/bg/bg-purple.webp");
  background-size: contain;
  margin-top: -25px;
}

.new-patt .ag-mob-info-cards .card-1 {
  top: 10.0376%;
}
.new-patt .ag-mob-info-card {
  top: 36.0376%;
}
#application-form-wrapper1 .modal-content.art-modal .form-check {
  background-color: #fff !important;
}


/* patterns */

/* dashed stipple-pattern frame around the whole desktop card (info cards +
   intro stacked together) — built from Applab's border export: one strip
   for the vertical sides, one for the horizontal edges, and two distinct
   corner crops. Sides/edges are reused for their opposite twin by flipping
   with scale(), same trick as the popup-frame above. container-type lets
   the frame scale with cqw instead of the viewport. */
.pattern-card {
  position: relative;
  container-type: inline-size;
}

.pattern-card-border {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.pattern-card-border__edge {
  position: absolute;
  display: block;
  object-fit: cover;
}

.pattern-card-border__edge--top,
.pattern-card-border__edge--bottom {
  left: 0;
  width: 100%;
  height: clamp(12px, 3.1cqw, 32px);
}

.pattern-card-border__edge--top {
  top: 0;
}

.pattern-card-border__edge--bottom {
  bottom: 0;
  transform: scaleY(-1);
}

.pattern-card-border__edge--left,
.pattern-card-border__edge--right {
  top: 0;
  height: 100%;
  width: clamp(10px, 2.6cqw, 26px);
}

.pattern-card-border__edge--left {
  left: 0;
}

.pattern-card-border__edge--right {
  right: 0;
  transform: scaleX(-1);
}

.pattern-card-border__corner {
  position: absolute;
  display: block;
  width: clamp(20px, 3.4cqw, 35px);
  height: auto;
  z-index: 1;
}

.pattern-card-border__corner--top-left {
  top: 0;
  left: 0;
}

.pattern-card-border__corner--top-right {
  top: 0;
  right: 0;
}

.pattern-card-border__corner--bottom-left {
  bottom: 0;
  left: 0;
  transform: scaleY(-1);
}

.pattern-card-border__corner--bottom-right {
  bottom: 0;
  right: 0;
  transform: scaleY(-1);
}
@media(max-width:767px) {
  .popup-frame {
    display: none;
  }
  [dir="rtl"] .ag-mob-banner .craft-2-2 {
    inset-inline-end: 13.877% !important;
    /* top: 66.5% !important; */
  }
}

.modal.log-modal.modal-wrapper.al-ghorrah-modal.fade.show {
  background: rgb(0 0 0 / 50%);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.50) !important;
}
.modal.log-modal.modal-wrapper.al-ghorrah-modal.fade.show::before {
  content: none;
}
/* .modal.al-ghorrah-modal.show {
  background: transparent;
  overscroll-behavior: contain;
} */

/* .modal.al-ghorrah-modal.show::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 50%);
  z-index: -1;
} */
#application_submission_success_modal.al-ghorrah-modal.modal-wrapper .art-modal .btn-close {
    top: 17%;
    inset-inline-end: 67px;
}
 #application_submission_success_modal .modal-header h4.text-center {
  display: none !important;
 }
 .text-bold.text-center.ag-body-mob-title.ag-qf-serif-line,
 .ag-qf-serif-line.text-bold.text-center.ag-body-mob-title-ar {
  text-align: center !important;
 }
body.zero {
  margin-top: 0px !important;
}
@media (max-width: 767px) {
 .text-bold.text-center.ag-body-mob-title.ag-qf-serif-line {
    font-size: 17px !important
 }

 .ag-qf-serif-line.text-bold.text-center.ag-body-mob-title-ar {
    font-size: 18px !important
 }

.ag-tab-btn.ag-tab-btn-label {
  font-weight: bold;
}

  .zero .app-link-wrap {
      top: 80px;
      position: absolute;
      width: 100%;
      inset-inline: 0;
  }
  .al-ghorrah-modal.modal-wrapper .art-modal .btn-close {
    top: 52%;
    inset-inline-end: 15px;
  }
}
@media (max-width: 1199px) and (min-width: 768px) {
  .zero .app-link-wrap {
      top: 100px;
      position: absolute;
      width: 100%;
      inset-inline: 0;
  }
}
@media (max-width: 767px) {
  .common-validation-errror-msg{
    max-width: 100%;
    flex-wrap: wrap !important;
  }

  .common-validation-errror-msg span{
      white-space: wrap !important;
      text-align: start !important;
  }
}

.bg-modal-new {
  inset: 0;
  background-image: url(../images/al-ghorrah-cta-2026/banner-items/page-bg-web.svg);
  opacity: 0.4;
  background-repeat: repeat;
  position: absolute;
  background-position: center;
  background-size: contain;
}

.required-fields-error{
    color: #FF1616 !important;
    /* font-weight: 400 !important;
    letter-spacing: 0.02rem; */
}

.app-link-wrap{
  display: none !important;
}

body.zero .btn-float.be-absolute-footer {
    position: fixed !important;
    bottom: 20vh !important;
}

@media(max-width: 1680px) and (min-width: 1200px) {
    .ag-info-body h4 {
        font-size: 28px !important;
    }
    .ag-info-body p {
        font-size: 22px !important;    
    }
}
  


/* 
 */

 /* Al Ghorrah — pattern-card updates */
/* ==========================================================
   Al Ghorrah — pattern-card
   ========================================================== */
/* ==========================================================
   Al Ghorrah — pattern-card
   ========================================================== */

/* Purple background */
.new-pattern {
  background-image: url(../images/al-ghorrah-cta-2026/bg/bg-purple.svg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

/* Slide under the pink band so the purple fills the wedge */
.pattern-card {
  --band-overlap: 10.5vw;
  position: relative;
  z-index: 1;
  margin-top: calc(var(--band-overlap) * -2);
  padding-top: var(--band-overlap);
}

/* Dotted frame */
.pattern-card::after {
  content: "";
  position: absolute;
  inset: 16px;
  z-index: 5;
  pointer-events: none;
  border: 24px solid transparent;
  border-image: url(../images/al-ghorrah-cta-2026/banner/pattern-upper.webp) 40 round;
}

.ag-banner .banner-person-orchestra,
.ag-banner .pink-band {
  z-index: 2;
}

/* Height comes from content, not a fixed ratio */
.pattern-card .ag-info-cards,
.pattern-card .ag-intro {
  aspect-ratio: auto;
  height: auto;
}

/* ===== Info cards: image + text in one grid cell ===== */
.pattern-card .ag-info-cards {
  display: grid;
  grid-template-areas: "stack";
}

.pattern-card .ag-info-cards > .orange-art,
.pattern-card .ag-info-cards > .ag-info-cards-content {
  grid-area: stack;
  position: static;
  inset: auto;
}

.pattern-card .ag-info-cards > .orange-art {
  display: block;
  width: 91.503%;
  height: auto;               /* height from the image itself */
  margin: 0.681% 0 -1.114px;
  justify-self: center;
  align-self: start;
  background: none;           /* old rule used it as a background */
}

.pattern-card .ag-info-cards > .ag-info-cards-content {
  width: 78.05%;
  height: auto;
  margin-top: 3.88%;
  justify-self: center;
  align-self: start;
  position: relative;
  z-index: 6;                 /* text above the orange art */
}

/* ===== Intro: art column + text column ===== */
.pattern-card .ag-intro {
  container-type: inline-size;   /* was "size": that collapsed the height */
  display: grid;
  grid-template-columns: 54.13% 36% 1fr;   /* art | text | gutter */
  align-items: start;
}

.pattern-card .ag-intro-art {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.pattern-card .ag-intro-art > img {
  display: block;
  height: auto;
  max-width: none;
  position: static;
  inset: auto;
  background: none;
}

.pattern-card .ag-intro-art > .title-web {
  width: 78.474%;
    margin: 5.777% 0 0 9.055%;
    position: relative;
    z-index: 1;
}

@media (min-width: 1440px) {
.pattern-card .ag-intro-art > .frame-ghorrah {
  width: 115%;
}
}
.pattern-card .ag-intro-art > .frame-ghorrah {
  width: 100%;
}


.pattern-card .ag-intro > .ag-body {
  grid-column: 2;
  width: calc(100% + 60px);
  height: auto;
  margin-top: 13.33%;
  position: relative;
  z-index: 2;
  inset: auto;
}



.ag-desktop-view .ag-info {
  --info-pad-bottom: 130px;               /* room for the bottom border + microphone */
  padding-bottom: var(--info-pad-bottom);
  box-sizing: border-box;
}

/* One-column grid: title, tabs, then a row shared by the text and the painter */
.ag-desktop-view .ag-info > .container-lg {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.ag-desktop-view .ag-info .ag-tab-panel,
.ag-desktop-view .ag-info .painter-web {
  grid-column: 1;
  grid-row: 3;                            /* same cell: text and painter share the row */
}

.ag-desktop-view .ag-info .ag-tab-panel {
  align-self: start;
}

.ag-desktop-view .ag-info .painter-web {
  position: relative;                     /* back in the flow; not absolute */
  inset: auto;
  align-self: end;                        /* pinned to the bottom of the row */
  justify-self: end;                      /* pinned to the right */
  width: 35.31%;                          /* ~500px */
  height: auto;
  max-width: none;
  background: none;
  z-index: 4;
  pointer-events: none;
  margin: 24px -4.59% calc(-1 * (var(--info-pad-bottom) + 29px)) 0;
  /* top: minimum gap under the tabs
     right: overhang past the edge
     bottom: pushes it through the padding, 29px past the section edge */
}

/* the tab row becomes a size reference for its children */
.ag-info .tab-wrapper {
  container-type: inline-size;
}

.ag-info .tab-wrapper .ag-tab-btn {
  font-size: clamp(14px, 1.9cqi, 28px);
  /* 1.9cqi = 1.9% of the tab row's width
     14px   = never smaller than this (readability)
     28px   = never larger than this (very wide screens) */
}

.ag-dates > .ag-dates-inner {
  position: relative;   /* children now position against the container */
  height: 100%;         /* fill .ag-dates, since every child is absolute */
}


/* ===== Al Ghorrah — Timeline section (.ag-dates) ===== */
.ag-desktop-view .ag-dates {
  aspect-ratio: auto;
  height: auto;
  container-type: inline-size;
}

.ag-desktop-view .ag-dates > .ag-dates-inner {
  position: relative;
  height: auto;
  display: grid;
  grid-template-areas: "stack";
}

.ag-desktop-view .ag-dates .ag-dates-inner > img {
  grid-area: stack;
  position: relative;
  inset: auto;
  display: block;
  height: auto;
  max-width: none;
  background: none;
  aspect-ratio: auto;
  align-self: start;
  justify-self: start;
}

.ag-desktop-view .ag-dates .ag-dates-inner > img.ag-dates-title {
  width: 31.085%;
  margin: 12.332% 0 0 1.786%;
  z-index: 2;
}

.ag-desktop-view .ag-dates .ag-dates-inner > img.timeline-svg {
  width: 54.853%;
  margin: -3.213% 0 0 40.678%;
  z-index: 9;
}

.ag-desktop-view .ag-dates .ag-dates-inner > img.lady {
  width: 65.356%;
  margin: 32.508% 0 0 -3.915%;
  z-index: 1;
}

@media(min-width: 1900px) {
  .ag-desktop-view .ag-dates .ag-dates-inner > img.lady {
    margin: 32.508% 0 0 -8.915%; 
  }
}


@media (min-width: 992px) and (max-width: 1199.98px) {
  .ag-info .painter-web {
    top: 0 !important;
  }

  .ag-info .ag-tab-panel h4 {
    line-height: 1.2 !important;
    /* text-align: left; */
  }

  .ag-info-body p {
    font-size: 15px !important;
    margin: 0 0 24px;
  }

   .ag-info-body h4 {
    font-size: 18px !important;
  }
}


@media(max-width: 991px) and (min-width: 768px) {
  [dir="ltr"] .ag-info .pattern-1 {
      bottom: 10px !important;
  }
}

/* Al Ghorrah – Dates section: mirror the layer offsets for RTL */
[dir="rtl"] .ag-dates-inner > .ag-dates-title--web {
  margin-left: 0 !important;
  margin-right: 1.185% !important;
}

[dir="rtl"] .ag-dates-inner > .timeline-svg {
  margin-left: 0 !important;
  margin-right: 37.677% !important;
}

[dir="rtl"] .ag-dates-inner > .lady {
  margin-left: 0 !important;
  margin-right: -4.915% !important;
}

[dir="rtl"] .ag-info .painter-web {
  margin-right: 0 !important;
  margin-left: -65px !important; /* same value as the EN margin-right */
}

body .new .ag-qf-serif-line {
    font-family: "qf-serif", serif !important;
}

[dir="ltr"] .frame-ghorrah {
  transform: scaleX(-1);
  inset-inline-start: -12% !important;
}

[dir="rtl"] .pattern-card .ag-intro-art > .title-web {
    margin: 3.777% 9% 0 0 !important;
}
[dir="rtl"] .ag-info .title-3 {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

body *:not(i.fa):not(i.fas):not(.fab) {
    font-family: "qffont", sans-serif !important;
}

.ag-banner-social {
  display: none !important;
}

@media(max-width: 1199px) and (min-width: 992px){
  .ag-body-web p {
    font-size: 15px !important;
  }
  .ag-info .tab-wrapper .ag-tab-btn {
    font-size: clamp(14px, 15px, 28px);
}
[dir="ltr"] .ag-info .pattern-1 {
    bottom: 15px;
}

[dir="rtl"] .tab-wrapper > .ag-tab-btn {
    padding: 26px 53px;
}
}

@media(max-width: 991px) and (min-width: 767px) {
  .tab-wrapper > .ag-tab-btn {
    padding: 10px;
  }
  .ag-info-body p {
    margin: 0 0 24px;
}
.ag-body-web p {
  font-size: 12px !important;
  margin: 0 0 1cqw;
}
.pattern-card .ag-intro > .ag-body {
  width: 100%;
}
[dir="rtl"] .tab-wrapper > .ag-tab-btn {
    padding: 26px 22px;
}
}

@media(max-width: 1440px) and (min-width: 1200px) {
  html[dir="ltr"] .ag-dates::before {
    inset-inline-end: -15px;
}
}

[dir="rtl"] .tab-wrapper > .ag-tab-btn {
  padding: 26px 53px;
}
@media (min-width: 767px) {
  [dir="rtl"] .ag-info-body {
    margin-inline-start: 3.5%;
  }
}
[dir="rtl"] .pattern-card .ag-intro-art > img {
    margin-top: -4rem;
    z-index: 2;
}

.consent-div {
  padding-inline: 0 !important;
}
.consent-div label{
  margin-inline-start: -5px;
}

.add_more_field_helper_text {
    font-size: .75em;
    font-weight: 700;
}

.modal.log-modal.al-ghorrah-modal .form-radio label:before {
  top: 7px;
}

.modal.log-modal.al-ghorrah-modal .form-radio label:after{
  top :11px;
}

.ag-desktop-view .pattern-card.new-pattern {
  margin-top: -30%;
}

.new-pattern .ag-info-cards {
  margin-top: -1.5vw;
}


[dir="rtl"] .ag-banner .pink-band {
  top: 63.8%;
}

[dir="rtl"] .pattern-card .ag-intro-art > img {
    margin-top: -4rem;
    z-index: 2;
}

@media(min-width: 768px) and (max-width: 991px) {
  [dir="ltr"] .ag-banner .banner-person-orchestra {
    top: 25%;
  }

  .ag-desktop-view .pattern-card.new-pattern {
    margin-top: -20%;
  }

  [dir="ltr"] .ag-banner .pink-band {
    top: 74.99% !important;
  }

  .pattern-card .ag-intro {
    grid-template-columns: 59.13% 36% 1fr;
  }

  html[dir="ltr"] .ag-dates::before {
    inset-inline-end: -20px;
  }

  .ag-banner .banner-person-orchestra {
    top: 25%;
  }

  [dir="rtl"] .ag-banner .pink-band {
    top: 74.9%;
  }

  [dir="rtl"] .tab-wrapper>.ag-tab-btn {
    padding: 26px 41px !important;
  }
}

@media(max-width: 1199px) and (min-width: 992px) {
  .ag-banner .banner-1-logo {
    inset-inline: 0;
    top: 14.5%;
    width: 100%;
    height: 100px;
    background-image: url(../images/al-ghorrah-cta-2026/banner-items/banner-logo-grey.svg);
    margin-inline: auto;
  }

  .ag-banner .banner-person-orchestra {
    top: 24%;
  }

  [dir="rtl"] .ag-banner .pink-band {
    top: 73.8%;
  }

  .ag-desktop-view .pattern-card.new-pattern {
    margin-top: -22%;
  }

  [dir="rtl"] .tab-wrapper>.ag-tab-btn {
    padding: 26px 63px;
  }

  [dir="ltr"] .ag-banner .banner-person-orchestra {
    top: 22%;
  }

  [dir="ltr"] .ag-banner .pink-band {
    top: 71.99% !important;
  }

  .ag-info-body {
    margin-inline-start: 6%;
  }
}

@media(min-width: 1200px) and (max-width: 1439px) {
  [dir="rtl"] .tab-wrapper>.ag-tab-btn {
    padding: 26px 70px !important;
  }
}

@media(min-width: 1440px) {
  [dir="rtl"] .tab-wrapper>.ag-tab-btn {
    padding: 26px 84px;
  }
}

@media (min-width: 1200px) and (max-width: 1600px) {
    .ag-banner .banner-1-logo {
        height: 115px;
    }
     .ag-banner .banner-person-orchestra {
        top: 18% !important;
    }
    .ag-desktop-view .pattern-card.new-pattern {
        margin-top: -27%;
    }
    [dir="ltr"] .ag-banner .pink-band {
        top: 68% !important;
    }
    [dir="rtl"] .ag-banner .pink-band {
        top: 68% !important;
    }
    .ag-banner .banner-1-logo {
        top: 10.5%;
    }
}

@media(max-width: 991px) and (min-width: 768px) {
    #application_submission_success_modal .go-to-home-page {
        bottom: 60px !important;
    }
    #application_submission_success_modal .go-to-home-page-btn {
        padding: 2px 15px !important;
        font-size: 10px !important;
    }
    #application_submission_success_modal.al-ghorrah-modal.modal-wrapper .art-modal .btn-close {
        inset-inline-end: 50px !important;
    }
}

html:has(body.al-ghorrah-modal.show) { overflow: hidden !important; }
.al-ghorrah-modal { overscroll-behavior: contain !important; }
html:has(.modal.show) { overflow: hidden !important;}