/* =========================================================
   Marjason Consulting — Design Tokens
   ========================================================= */
:root{
  --green:#3aaa35;
  --green-dark:#06b22d;
  --lime:#d1d724;
  --black:#000;
  --near-black:#0a0a0a;
  --gray-text:#7d7d7d;
  --gray-border:#ededed;
  --off-white:#fbfaf2;
  --tint:#f6f7d3;

  --font-body: "Noto Sans", system-ui, sans-serif;
  --font-heading: "Noto Sans", system-ui, sans-serif;
  --font-cta: "Outfit", system-ui, sans-serif;

  --container: 1200px;
  --radius-lg: 20px;
  --radius-md: 10px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:#252525;
  background:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;border:0;background:none;cursor:pointer;}
ul{list-style:none;margin:0;padding:0;}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-cta);font-weight:600;font-size:16px;
  color:#fff;background:var(--green);
  padding:12px 24px;border-radius:0 var(--radius-md);
  transition:background .2s ease, transform .2s ease;
}
.btn:hover{background:var(--green-dark);transform:translateY(-2px);}
.btn .icn{width:12px;height:12px;flex-shrink:0;}
.btn--outline{
  background:transparent;border:1px solid #fff;color:#fff;
  border-radius:0 10.5px;padding:11.5px 17.5px;
}
.btn--outline:hover{background:rgba(255,255,255,.1);}

/* Section spacing */
.section{padding:80px 0;}
.section--tight{padding:60px 0;}
.eyebrow{
  font-size:18px;font-weight:600;text-transform:uppercase;color:var(--lime);
  margin:0 0 8px;
}
h1,h2,h3{font-weight:300;margin:0;}
h2.section-title{font-size:clamp(32px,4vw,48px);color:#000;}
.section-lead{color:var(--gray-text);font-size:16px;line-height:1.5;max-width:760px;}

.about-auto-load .run-text{
  display:inline-block;
  animation: run-text 20s linear infinite;
}

@keyframes run-text{
  0%{transform:translateX(100%)}
  100%{transform:translateX(-100%)}
}

/* =========================================================
   Header
   ========================================================= */
.marjason-site-header{
  min-height:120px;
  margin-bottom:-120px;
  transition:background-color .2s ease,box-shadow .2s ease,backdrop-filter .2s ease,transform .25s ease;
}
.marjason-site-header.is-hidden{
  transform:translateY(-100%);
}
.marjason-site-header.is-scrolled{
  background-color:rgba(12,20,16,.88);
  box-shadow:0 4px 18px rgba(0,0,0,.18);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.site-header{
  background:#000;position:relative;z-index:50;
}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.2);
  max-width:var(--container);margin:0 auto;
}
.site-logo img{height:44px;width:auto;}
.site-logo{font-family:var(--font-heading);font-size:22px;color:#fff;font-weight:600;}

.main-nav ul{display:flex;gap:36px;align-items:center;}
.main-nav a{color:#fff;font-size:16px;font-weight:500;}
.main-nav .menu-item-has-children{position:relative;}
.main-nav .sub-menu{
  display:none;position:absolute;top:100%;left:0;background:#111;min-width:220px;
  padding:10px 0;border-radius:0 0 10px 10px;
}
.main-nav .menu-item-has-children:hover .sub-menu{display:block;}
.main-nav .sub-menu a{display:block;padding:8px 18px;}

.header-actions{display:flex;align-items:center;gap:16px;}
.lang-switch{
  display:flex;align-items:center;gap:8px;color:#fff;font-size:16px;
  border:1px solid #fff;border-radius:0 10.5px;padding:11.5px 17.5px;
}
.mobile-toggle{display:none;background:none;border:0;color:#fff;font-size:28px;}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;background:#000;color:#fff;overflow:hidden;
  padding:100px 0 140px;
}
.hero__media{
  position:absolute;inset:0;z-index:0;opacity:.55;
}
.hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover;}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.85) 100%);
}
.hero__content{position:relative;z-index:1;max-width:760px;}
.hero__eyebrow{
  font-size:18px;font-weight:600;text-transform:uppercase;color:var(--lime);
  display:block;margin-bottom:8px;
}
.hero__title{
  font-size:clamp(36px,6vw,72px);line-height:1.1;font-weight:300;margin:0 0 32px;
}

/* Stats row */
.stats{
  background:linear-gradient(180deg,rgba(246,247,211,0) 0%,rgba(0,0,0,0) 100%),#000;
  color:#fff;padding:60px 0;
}
.stats__lead{font-size:clamp(22px,3vw,40px);font-weight:400;text-align:center;max-width:900px;margin:0 auto 50px;}
.stats__lead .muted{color:#787575;}
.stats__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:40px;}
.stat{display:flex;align-items:center;gap:10px;min-width:220px;}
.stat__num{
  font-size:56px;font-weight:300;
  background:linear-gradient(87deg,var(--green) 2%,var(--lime) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat__label{font-size:20px;font-weight:500;line-height:1.3;}

/* =========================================================
   How we help
   ========================================================= */
.services{background:#000;color:#fff;padding-bottom:120px;}
.services__grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.services__title{font-size:48px;font-weight:300;margin-bottom:32px;}
.service-list{border-top:1px solid rgba(58,170,53,.4);}
.service-item{
  display:flex;align-items:center;gap:20px;padding:26px 0;
  border-bottom:1px solid rgba(58,170,53,.25);cursor:pointer;
}
.service-item svg{flex-shrink:0;}
.service-item__label{font-size:22px;color:rgba(255,255,255,.4);transition:color .2s;}
.service-item.is-active .service-item__label{color:var(--green);}
.service-item__body{display:none;padding-left:55px;margin-top:-10px;}
.service-item.is-active .service-item__body{display:block;}
.service-item__body p{color:var(--gray-text);line-height:1.6;margin:0 0 16px;}
.service-item__link{color:var(--green);font-weight:600;display:inline-flex;align-items:center;gap:6px;}

.services__gallery{position:relative;aspect-ratio:1;}
.services__gallery img,.services__gallery .swatch{
  position:absolute;border-radius:0 30px;object-fit:cover;
}
.services__gallery .g1{top:0;right:0;width:49%;height:49%;}
.services__gallery .g2{top:0;left:0;width:49%;height:49%;background:var(--lime);border-radius:30px 0 20px;}
.services__gallery .g3{bottom:0;left:0;width:49%;height:49%;border-radius:30px 0 20px;}
.services__gallery .g4{bottom:0;right:0;width:49%;height:49%;}

/* =========================================================
   Who we are
   ========================================================= */
.about{background:#000;color:#fff;text-align:center;}
.about__inner{max-width:846px;margin:0 auto;display:flex;flex-direction:column;gap:32px;align-items:center;}
.about__title{font-size:48px;font-weight:300;margin-bottom:16px;}
.about__text{color:#fff;line-height:1.6;}
.about__image{margin-top:40px;border-radius:0 20px;overflow:hidden;}
.about__image img{width:100%;height:auto;display:block;}

/* =========================================================
   Training programs
   ========================================================= */
.training__header{margin-bottom:40px;}
.training__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.training-card{
  display:flex;align-items:center;gap:20px;padding:20px;
  border:1px solid var(--gray-border);border-radius:0 20px;
}
.training-card img{height:76px;width:auto;object-fit:contain;}
.training-card h3{font-size:22px;font-weight:500;color:#252525;}

/* =========================================================
   Testimonials
   ========================================================= */
.testimonials__grid{display:grid;grid-template-columns:repeat(3,1fr);}
.testimonial{
  background:rgba(74,74,73,.1);padding:24px;min-height:420px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.testimonial:first-child{border-radius:0 0 0 20px;}
.testimonial:last-child{border-radius:0 20px 0 0;}
.testimonial--dark{
  background:linear-gradient(180deg,rgba(0,0,0,0) 62%,#000 100%),#333;
  color:#fff;justify-content:flex-end;
  background-size:cover;background-position:center;
}
.testimonial__quote-icon{margin-bottom:20px;}
.testimonial p{color:var(--gray-text);line-height:1.6;margin:0;}
.testimonial--dark p{color:#fff;}
.testimonial__author{display:flex;align-items:center;gap:12px;margin-top:20px;}
.testimonial__author img{width:60px;height:60px;border-radius:50%;object-fit:cover;background:var(--green);}
.testimonial__author strong{display:block;font-size:16px;}
.testimonial__author span{display:block;font-size:14px;color:var(--gray-text);}
.testimonial--dark .testimonial__author span{color:#fff;}

/* =========================================================
   Insights / Blog
   ========================================================= */
.insights__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:40px;}
.insight-card__thumb{border-radius:0 20px;overflow:hidden;aspect-ratio:16/10;margin-bottom:24px;}
.insight-card__thumb img{width:100%;height:100%;object-fit:cover;}
.insight-meta{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:rgba(37,37,37,.5);margin-bottom:6px;}
.insight-meta .dot{width:2px;height:18px;background:var(--lime);}
.insight-card h3{font-size:24px;font-weight:500;color:#252525;margin:0 0 6px;}
.insight-card p{color:var(--gray-text);line-height:1.5;margin:0 0 10px;}
.insight-card__link{color:var(--green);font-weight:600;display:inline-flex;align-items:center;gap:6px;}
.insights__footer{text-align:center;}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{background:#000;color:#fff;padding:60px 0 30px;}
.footer__top{display:grid;grid-template-columns:1fr 1fr 1fr 1.3fr;gap:40px;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:50px;margin-bottom:40px;}
.footer__brand .site-logo{margin-bottom:20px;}
.footer__social{display:flex;align-items:center;gap:12px;margin-top:20px;}
.footer__social a{width:36px;height:36px;display:flex;align-items:center;justify-content:center;}
.footer-col h4{font-size:24px;font-weight:300;margin:0 0 20px;}
.footer-col ul li{margin-bottom:8px;}
.footer-col a{color:#fff;opacity:.85;}
.footer-col a:hover{opacity:1;}
.newsletter h4{font-size:28px;font-weight:300;margin:0 0 24px;}
.newsletter form{display:flex;gap:14px;flex-wrap:wrap;}
.newsletter input[type=email]{
  flex:1;min-width:220px;background:transparent;border:1px solid #fff;color:#fff;
  padding:12px 20px;font-size:14px;
}
.newsletter input::placeholder{color:rgba(255,255,255,.5);}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;font-size:14px;opacity:.85;}
.footer__partners{display:flex;gap:24px;align-items:center;margin-top:24px;}
.footer__partners img{height:50px;width:auto;object-fit:contain;}
.footer__legal{display:flex;gap:8px;align-items:center;opacity:.5;font-size:14px;}
.footer__legal .dot{width:2px;height:2px;border-radius:50%;background:#fbfaf2;}

/* Floating buttons: WhatsApp + scroll-to-top share one size, colour and right edge */
.float-whatsapp,
.scroll-top{
  position:fixed;right:24px;bottom:24px;z-index:60;width:57px;height:57px;
  border-radius:50%;background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(0,0,0,.25);
}
.float-whatsapp svg{width:100%;height:100%;}

/* Scroll to top */
.scroll-top{
  border:0;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s,visibility .3s,transform .3s,background-color .2s;
}
.scroll-top.is-visible{opacity:1;visibility:visible;transform:translateY(0);}
.scroll-top:hover{background:#1ebe5b;}
.scroll-top:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.scroll-top svg{width:24px;height:24px;}
.scroll-top--stacked{bottom:97px;} /* sits above the WhatsApp button */
html.translated-rtl .float-whatsapp,html[dir='rtl'] .float-whatsapp,
html.translated-rtl .scroll-top,html[dir='rtl'] .scroll-top{right:auto;left:24px;}
@media (prefers-reduced-motion:reduce){.scroll-top{transition:none;}}

/* reCAPTCHA badge hidden (visibility keeps it in the DOM, so reCAPTCHA still works).
   Google requires the "protected by reCAPTCHA" notice on forms when the badge is hidden. */
.grecaptcha-badge{visibility:hidden !important;}

/* Arabic: Contact Form 7 wraps every form in <div class="wpcf7" dir="ltr">, so the form's rows stayed left-to-right
   (Name on the left, Phone on the right). Follow the page direction so the first field, Name, comes first on the
   right, then the others in reading order. */
html.translated-rtl .wpcf7,
html[dir='rtl'] .wpcf7{direction:rtl;}

/* Arabic: Contact Form 7 wraps every form in dir="ltr", so headings/text above and inside the form
   wrapped left-to-right. Make form text follow the page direction (right aligned, RTL line flow). */
html.translated-rtl .wpcf7-form :is(h1,h2,h3,h4,h5,h6,p,label,.wpcf7-response-output,.wpcf7-not-valid-tip),
html[dir='rtl'] .wpcf7-form :is(h1,h2,h3,h4,h5,h6,p,label,.wpcf7-response-output,.wpcf7-not-valid-tip){
  direction:rtl;text-align:right;
}

/* Training listing card (layout 1): Duration and Course Fee share a row and wrap onto
   separate lines only when the card is too narrow for both. */
.course-card-meta{flex-wrap:wrap;gap:16px;}
.course-card-meta__item{flex:1 1 120px;min-width:0;overflow-wrap:anywhere;}

/* Form loader: while a Contact Form 7 form is submitting, the spinner sits inside the submit
   button in place of its arrow icon (CF7 appends it as a sibling after the button). */
.wpcf7-form p:has(> .wpcf7-submit){position:relative;display:inline-flex;align-items:center;margin:0;}
.wpcf7-form .wpcf7-submit + .wpcf7-spinner{
  position:absolute;top:auto;bottom:12px;right:16px;left:auto;margin:0;transform:none;
  width:24px;height:24px;background-color:rgba(255,255,255,.35);
}
.wpcf7-form .wpcf7-submit + .wpcf7-spinner::before{background-color:#fff;top:4px;left:4px;transform-origin:8px 8px;}
.wpcf7-form.submitting .wpcf7-submit.primary-btn{background-image:none;}

/* Instructors (About): "Read More" hover/focus feedback */
.bio-toggle{cursor:pointer;transition:color .2s ease;text-underline-offset:4px;}
.bio-toggle:hover,.bio-toggle:focus-visible{color:#2f8f2b !important;text-decoration:underline;}

/* Home > Our Training Programs: stacked list on mobile (the slider only runs from 640px up) */
@media (max-width:639px){
  .training-swiper .swiper-wrapper{flex-direction:column;gap:16px;transform:none;}
  .training-swiper .swiper-slide{width:100%;height:auto;}
  .training-swiper .training-card__logo{height:58px;max-width:45%;}
  .training-swiper .training-card__title{font-size:20px;line-height:1.3;}
}

/* Phone country-code selector (intl-tel-input) in the enquiry forms */
.wpcf7-form .iti{display:block;width:100%;}
/* No forced direction: in Arabic the library puts the flag on the right and anchors its country list to the right
   edge, so the list stays inside the form. (Forcing left-to-right made the list open from the wrong edge and spill
   out of the form.) */
.wpcf7-form .iti .iti__dropdown-content{z-index:50;}
/* Dial codes are numbers: keep "+971" reading left to right (RTL would turn it into "971+") */
.wpcf7-form .iti .iti__selected-dial-code,
.wpcf7-form .iti .iti__dial-code{direction:ltr;unicode-bidi:isolate;display:inline-block;}

/* Shared pagination (template-parts/pagination.php): numbered pages everywhere; from 640px up the
   fuller list, on phones a tighter list (fewer numbers, arrow-only Prev/Next) that always fits. */
.marjason-pager__phone{display:none;}
.marjason-pager .training-pagination ul.page-numbers{flex-wrap:wrap;}
.marjason-pager .training-pagination ul.page-numbers li .prev,
.marjason-pager .training-pagination ul.page-numbers li .next{font-size:14px;font-weight:500;white-space:nowrap;}
.marjason-pager .screen-reader-text{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
@media (max-width:639px){
  .marjason-pager__full{display:none;}
  .marjason-pager__phone{display:block;width:100%;}
  .marjason-pager__phone ul.page-numbers{flex-wrap:nowrap;justify-content:center;gap:4px;}
  /* Numbers share the row and shrink to fit (min 28px), never wider than 44px: touch-friendly */
  .marjason-pager__phone ul.page-numbers li{flex:1 1 0;min-width:0;max-width:44px;}
  .marjason-pager .training-pagination.marjason-pager__phone ul.page-numbers li a,
  .marjason-pager .training-pagination.marjason-pager__phone ul.page-numbers li span{
    width:100%;min-width:0;height:44px;padding:0;font-size:14px;
  }
  .marjason-pager .training-pagination.marjason-pager__phone ul.page-numbers li .prev,
  .marjason-pager .training-pagination.marjason-pager__phone ul.page-numbers li .next{font-size:22px;line-height:1;}
  /* The ellipsis only needs a sliver */
  .marjason-pager__phone ul.page-numbers li:has(> .dots){flex:0 1 16px;}
}

/* Breadcrumbs: clickable links dim by default and brighten + underline on hover / keyboard focus */
.breadcrumb-link{color:rgba(255,255,255,.5);text-underline-offset:3px;transition:color .2s ease;}
.breadcrumb-link:hover,.breadcrumb-link:focus-visible{color:#fff;text-decoration:underline;}

/* Blog detail: Prev / Next. A working button has a green outline and text and lifts with a light green fill on
   hover; a missing neighbour is greyed out. (Text stays green: `.entry-content a` forces that colour.) */
a.post-nav-btn{
  color:#3aaa35;background:#fff;border:1px solid #3aaa35;font-weight:600;
  transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
a.post-nav-btn:hover,a.post-nav-btn:focus-visible{
  background:#e9f6e8;border-color:#2f8f2b;box-shadow:0 6px 16px rgba(58,170,53,.25);transform:translateY(-2px);
}
a.post-nav-btn:active{transform:translateY(0);box-shadow:none;}
span.post-nav-btn.is-disabled{background:#f1f1f1;border:1px solid transparent;cursor:not-allowed;}

/* Client logos: grey until hovered, or tapped on touch screens (see main.js) */
.vcs-card img{transition:filter .3s ease;}
.vcs-card.is-active img{filter:grayscale(0%) !important;}
.vcs-card{-webkit-tap-highlight-color:transparent;}

/* Tablets (768-1023px): the side-by-side layouts are too cramped, so use the phone layouts */
@media (min-width:768px) and (max-width:1023px){
  /* About > Our Team: photo above the text, like on phones */
  .team-member{flex-direction:column;align-items:stretch;gap:24px;}
  .team-member__photo{width:100%;height:340px;}
  /* Home banner: larger eyebrow and heading */
  .home-banner__eyebrow{font-size:24px;}
  .home-banner__heading{font-size:60px;}
  /* Home counters: one row of three instead of a single column */
  .about-stats{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:24px;}
  /* number above its label, centred, so the three numbers share one line however long the labels are */
  .about-stats .counter-item{flex:1 1 0;width:auto;min-width:0;max-width:none;flex-direction:column;align-items:center;gap:8px;text-align:center;}
  .about-stats .counter-item > span:last-child{font-size:18px;text-align:center;}
}

/* Training detail > Registration journey: when an Arabic image is uploaded, show it (instead of the
   English one) while the site is viewed in Arabic. */
.journey-images.has-arabic .journey-img--ar{display:none;}
html.translated-rtl .journey-images.has-arabic .journey-img--ar,
html[dir='rtl'] .journey-images.has-arabic .journey-img--ar{display:block;}
html.translated-rtl .journey-images.has-arabic .journey-img--en,
html[dir='rtl'] .journey-images.has-arabic .journey-img--en{display:none;}

/* Arabic typeface. The site font (Noto Sans) has no Arabic letters, so Arabic text used to fall back to whatever
   font each device has (Geeza Pro, Tahoma, Roboto...), which looked different on every device and weight.
   Noto Sans Arabic (self-hosted, variable weight) matches Noto Sans and is used for all Arabic text. */
@font-face{
  font-family:'Noto Sans Arabic';
  src:url('../fonts/NotoSansArabic-Variable.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}
html.translated-rtl body,html.translated-rtl body *,
html[dir='rtl'] body,html[dir='rtl'] body *,
html.translated-rtl .training-pagination .page-numbers li a,html.translated-rtl .training-pagination .page-numbers li span,
html[dir='rtl'] .training-pagination .page-numbers li a,html[dir='rtl'] .training-pagination .page-numbers li span{
  font-family:'Noto Sans','Noto Sans Arabic',system-ui,sans-serif;
}
/* the language switcher forces its own font with !important */
html.translated-rtl .trp-language-item-name,html.translated-rtl .trp-language-switcher *,
html[dir='rtl'] .trp-language-item-name,html[dir='rtl'] .trp-language-switcher *{
  font-family:'Noto Sans','Noto Sans Arabic',system-ui,sans-serif !important;
}

/* Arabic: the hamburger icon is mirrored (short bar on the lower left instead of the lower right) */
html.translated-rtl button[aria-controls="mobile-menu"] svg,
html[dir='rtl'] button[aria-controls="mobile-menu"] svg{transform:scaleX(-1);}

/* Home banner slider indicator (per design): short dim lines, the active one is a longer white line */
.banner-pagination.swiper-pagination-bullets .swiper-pagination-bullet{
  width:14px;height:3px;margin:0 2px !important;border-radius:2px;
  background:rgba(255,255,255,.4);opacity:1;
  transition:width .3s ease,background-color .3s ease;
}
.banner-pagination.swiper-pagination-bullets .swiper-pagination-bullet-active{width:30px;background:#fff;}
/* Desktop: the lines end 24px inside the banner's edge, as in the design. They used to overflow their box (Swiper pins
   it to left:0 / width:100%) and ended about 2px from the edge, so they looked cropped. The bullets' 2px margin is allowed for. */
@media (min-width:1024px){
  .banner-pagination.swiper-pagination-bullets.swiper-pagination-horizontal{left:auto;right:22px;width:auto;text-align:right;}
  html.translated-rtl .banner-pagination.swiper-pagination-bullets.swiper-pagination-horizontal,
  html[dir='rtl'] .banner-pagination.swiper-pagination-bullets.swiper-pagination-horizontal{right:auto;left:22px;text-align:left;}
}
/* The indicator sits bottom-right where the floating buttons are: lift the buttons above it (home, 2+ banners) */
html:has(.banner-pagination) .float-whatsapp,
html:has(.banner-pagination) .scroll-top{bottom:90px;}
html:has(.banner-pagination) .scroll-top--stacked{bottom:163px;}

/* Arabic: form submit buttons match the other Arabic buttons: arrow mirrored (up-left) and at the left end,
   after the Arabic text, with the loader and the hover nudge following it. */
html.translated-rtl .wpcf7-form .primary-btn[type="submit"],
html[dir="rtl"] .wpcf7-form .primary-btn[type="submit"]{
  padding-right:24px;padding-left:48px;
  background-position:left 16px center;
  background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 17L7 7M7 15V7H15' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html.translated-rtl .wpcf7-form .primary-btn[type="submit"]:hover,
html[dir="rtl"] .wpcf7-form .primary-btn[type="submit"]:hover{
  background-position:left 12px top calc(50% - 4px);
}
html.translated-rtl .wpcf7-form.submitting .wpcf7-submit.primary-btn,
html[dir="rtl"] .wpcf7-form.submitting .wpcf7-submit.primary-btn{background-image:none;}
html.translated-rtl .wpcf7-form .wpcf7-submit + .wpcf7-spinner,
html[dir="rtl"] .wpcf7-form .wpcf7-submit + .wpcf7-spinner{right:auto;left:16px;}

/* Example number under the phone field (set by phone-country-code.js) */

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1024px){
  .services__grid{grid-template-columns:1fr;}
  .training__grid,.testimonials__grid,.insights__grid{grid-template-columns:repeat(2,1fr);}
  .footer__top{grid-template-columns:1fr 1fr;}
}
@media (max-width:768px){
  .main-nav,.header-actions .lang-switch{display:none;}
  .mobile-toggle{display:block;}
  .training__grid,.testimonials__grid,.insights__grid,.footer__top{grid-template-columns:1fr;}
  .hero{padding:60px 0 90px;}
  .stats__grid{gap:24px;}
}

/* Body classes injected by admin-bar etc. */
.admin-bar .site-header{top:32px;}

/*
 * Header buttons that carry both an English and an Arabic label (see inc/arabic-labels.php).
 * Arabic is on when: the /ar/ pages (TranslatePress: dir="rtl" / body.translatepress-ar), or the Google Translate
 * mode (translated-rtl class / marjason-ar class set from the language cookie).
 */
.mj-lbl-ar {
    display: none;
}

html.marjason-ar .mj-lbl-en,
html.translated-rtl .mj-lbl-en,
html[dir="rtl"] .mj-lbl-en,
body.translatepress-ar .mj-lbl-en {
    display: none;
}

html.marjason-ar .mj-lbl-ar,
html.translated-rtl .mj-lbl-ar,
html[dir="rtl"] .mj-lbl-ar,
body.translatepress-ar .mj-lbl-ar {
    display: inline;
}

/*
 * Select arrow of the enquiry forms in Arabic. The arrow's own Tailwind classes only flip it for the Google Translate
 * mode (html.translated-rtl); on the /ar/ pages (html dir="rtl") it stayed on the right, on top of the text, while the
 * select's padding had already moved to the left. In RTL the arrow sits on the left, next to the padded side.
 */
html[dir="rtl"] .wpcf7-form .relative.w-full.flex-1 svg.pointer-events-none,
html.translated-rtl .wpcf7-form .relative.w-full.flex-1 svg.pointer-events-none {
    right: auto;
    left: 1.25rem;
}

/*
 * Home page spacing.
 * Counter section: sized by its content (it used to be a full screen tall on desktop, leaving a large empty area
 * under the counters).
 */
.about-auto-load {
    padding-top: 64px;
    padding-bottom: 64px;
}

@media (min-width: 1024px) {
    .about-auto-load {
        padding-top: 96px;
        padding-bottom: 96px;
    }
}

/*
 * "Who We Are": one consistent gap between the last text block (description, or the button when there is one)
 * and the image, and no space reserved for a button that is not shown.
 */
.who-we-are__body {
    padding-bottom: 40px;
}

.who-we-are__cta {
    margin-top: 28px;
}

@media (min-width: 1024px) {
    .who-we-are__body {
        padding-bottom: 56px;
    }

    .who-we-are__cta {
        margin-top: 32px;
    }
}

/* Training category "Heading Image": fixed height, natural width (no cropping, any image proportions). */
.training-heading-logo {
    display: block;
    flex-shrink: 0;
    width: auto;
    max-width: 100%;
    height: 36px;
    object-fit: contain;
}

@media (min-width: 640px) {
    .training-heading-logo {
        height: 46px;
    }
}

/*
 * "Who We Are" without its image: the image normally overlaps the top of the next section ("How We Help"), and that
 * section reserves space for the overlap. With no image there is nothing to make room for, so the two sections get
 * one normal gap between them instead of the extra space.
 */
.who-we-are--no-image .who-we-are__body {
    padding-bottom: 40px;
}

.who-we-are--no-image + #how-we-help {
    padding-top: 40px;
}

.who-we-are--no-image + #how-we-help > .sticky > div {
    margin-top: 0;
}

@media (min-width: 640px) {
    .who-we-are--no-image .who-we-are__body {
        padding-bottom: 48px;
    }

    .who-we-are--no-image + #how-we-help {
        padding-top: 48px;
    }
}

@media (min-width: 1024px) {
    .who-we-are--no-image .who-we-are__body {
        padding-bottom: 64px;
    }

    .who-we-are--no-image + #how-we-help {
        padding-top: 64px;
    }
}

/*
 * Gap between "How we help" and "Our Training Programs" on desktop. The two-column layout already leaves room under the
 * image collage, so the extra top padding of the Training section made the gap (about 115-125px) larger than on
 * tablet and phone (about 80-95px).
 */
@media (min-width: 1024px) {
    #how-we-help + .training-programmes {
        padding-top: 64px;
    }
}

/*
 * About page: BCI instructor "Read More" modal on phones and tablets (below 1024px; desktop layout unchanged).
 * The whole card scrolls as one panel from the top (photo, name, bio). Before, only the text column scrolled and was
 * vertically centred, so a long bio pushed the name and first lines above the visible area. The close button stays
 * pinned at the top while scrolling, on the right in English and on the left in Arabic.
 */
@media (max-width: 1023px) {
    #instructor-modal-content {
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - 32px);
        padding: 16px;
    }

    #instructor-modal-close {
        position: sticky;
        top: 0;
        left: auto;
        right: auto;
        align-self: flex-end;
        flex-shrink: 0;
        margin-bottom: -40px;
    }

    #instructor-modal-content > div:has(> #instructor-modal-image) {
        height: min(45vh, 400px);
        padding-top: 48px;
    }

    #instructor-modal-content > div:has(> #instructor-modal-name) {
        flex: none;
        justify-content: flex-start;
        overflow: visible;
        padding: 20px 8px 8px;
    }

    #instructor-modal-bio {
        margin-top: 12px;
    }
}