/* انطلاقة: أقسام الواجهة. كل القواعد تحت #page-container .intq حتى لا تتأثر بقالب مهارتي ولا تؤثر فيه.
   Motif: leaf-shaped corners (two opposite corners rounded) taken from the logo mark. */

/* #page-container is always printed by Mharty; it lifts these rules above the theme content styles (.link_style_accent .mh-the-content a). */
/* the full-width section that holds the code modules (CSS class: intq-section) */
.mhc_section.intq-section,.intq-section .mhc_fullwidth_code{padding:0!important;margin:0!important;background:none}

.intq{
  --teal:#1C9D8B; --teal-d:#0E5D52; --teal-dd:#08332D; --teal-l:#E6F4F1; --mint:#8EE0D1;
  --cocoa:#5E2E2B; --cocoa-l:#F4EAE8;
  --ink:#13201E; --muted:#5B6866; --line:#E0E8E6; --paper:#FFFFFF; --mist:#F5F8F7;
  --f-display:"Noto Kufi Arabic",Tahoma,sans-serif;
  --f-body:"IBM Plex Sans Arabic",Tahoma,sans-serif;
  --leaf:28px 4px 28px 4px; --leaf-s:14px 3px 14px 3px;
  --shell:1220px;
  direction:rtl;color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.8;-webkit-font-smoothing:antialiased;text-align:right
}
#page-container .intq *{box-sizing:border-box}
#page-container .intq a{color:inherit;text-decoration:none;border-bottom:0;box-shadow:none}
#page-container .intq img{max-width:100%;display:block}
#page-container .intq h1,#page-container .intq h2,#page-container .intq h3,#page-container .intq h4{margin:0;padding:0;color:inherit;text-wrap:balance;font-family:var(--f-display);font-weight:700;letter-spacing:0}
#page-container .intq p{margin:0;padding:0}
#page-container .intq p:empty{display:none}
#page-container .intq ul{margin:0;padding:0;list-style:none}
#page-container .intq li{margin:0;padding:0}
#page-container .intq li::before{content:none}
#page-container .intq button{font:inherit;color:inherit}
#page-container .intq :focus-visible{outline:3px solid var(--teal);outline-offset:3px}
#page-container .intq section[id]{scroll-margin-top:84px}
#page-container .intq .shell{max-width:var(--shell);margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
#page-container .intq .ico{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
#page-container .intq .sec{padding-block:72px}
#page-container .intq .sec-tight{padding-top:0}
#page-container .intq .tag{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--teal-d);background:var(--teal-l);padding:4px 12px;border-radius:var(--leaf-s)}
#page-container .intq .h2{font-size:clamp(23px,2.3vw,30px);line-height:1.5;margin-top:10px}
#page-container .intq .head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:28px}
#page-container .intq .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;font-size:14.5px;border-radius:var(--leaf-s);font-weight:700;transition:background .25s,color .25s,transform .25s;border:0;cursor:pointer;line-height:1.6}
#page-container .intq .btn-w{background:#fff;color:var(--teal-dd)}
#page-container .intq .btn-w:hover{background:var(--mint)}
#page-container .intq .btn-o{border:1.5px solid var(--line);color:var(--ink)}
#page-container .intq .btn-o:hover{border-color:var(--teal);color:var(--teal-d)}

/* hero */
#page-container .intq .hero{background:radial-gradient(ellipse 80% 90% at 15% 30%,#127A6B 0%,transparent 60%),linear-gradient(180deg,var(--teal-dd) 0%,#0B4A41 100%);color:#fff;position:relative;overflow:hidden}
#page-container .intq .blades{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;will-change:transform}
#page-container .intq .blades path{fill:none;stroke-linecap:round;stroke-dasharray:2400;stroke-dashoffset:2400;animation:intq-draw 2.4s cubic-bezier(.3,.7,.2,1) forwards}
#page-container .intq .blades .b1{stroke:url(#gA);stroke-width:120;opacity:.22}
#page-container .intq .blades .b2{stroke:url(#gB);stroke-width:46;opacity:.35;animation-delay:.25s}
#page-container .intq .blades .b3{stroke:url(#gB);stroke-width:18;opacity:.5;animation-delay:.5s}
#page-container .intq .blades .b4{stroke:#8EE0D1;stroke-width:1.5;opacity:.35;animation-delay:.7s}
#page-container .intq .blades g{transform-origin:20% 60%;animation:intq-sway 18s ease-in-out infinite}
@keyframes intq-sway{50%{transform:rotate(-2.5deg) translateY(-10px)}}
@keyframes intq-draw{to{stroke-dashoffset:0}}
#page-container .intq .hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:48px;align-items:center;padding-block:52px 40px}
#page-container .intq .hero small{display:inline-block;font-size:13px;color:var(--mint);font-weight:700;margin-bottom:10px}
#page-container .intq .hero h1{font-size:clamp(30px,3.5vw,46px);line-height:1.45;color:#fff}
#page-container .intq .hero h1 span{color:var(--mint)}
#page-container .intq .hero p{color:#CBE5E0;font-size:16px;max-width:50ch;margin-top:14px}
#page-container .intq .hero-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
#page-container .intq .hero .btn-o{border-color:rgba(255,255,255,.3);color:#fff}
#page-container .intq .hero .btn-o:hover{border-color:#fff}
#page-container .intq .quick{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--leaf);padding:10px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#page-container .intq .quick h2{font-size:14px;color:var(--mint);padding:8px 10px 4px;font-family:var(--f-body)}
#page-container .intq .quick a{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 10px;border-radius:var(--leaf-s);transition:background .25s;color:#fff}
#page-container .intq .quick a:hover{background:rgba(255,255,255,.09)}
#page-container .intq .quick i{width:38px;height:38px;border-radius:var(--leaf-s);background:rgba(142,224,209,.14);color:var(--mint);display:grid;place-items:center;font-size:18px}
#page-container .intq .quick b{display:block;font-size:15px}
#page-container .intq .quick small{display:block;color:#A8CBC5;font-size:12.5px;margin:0;font-weight:400}
#page-container .intq .quick .go{color:var(--mint);font-size:18px;transition:transform .25s}
#page-container .intq .quick a:hover .go{transform:translateX(-5px)}
#page-container .intq .stats{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.14)}
#page-container .intq .stats div{padding:20px 0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
#page-container .intq .stats div+div{padding-inline-start:24px;border-inline-start:1px solid rgba(255,255,255,.14)}
#page-container .intq .stats b{font-family:var(--f-display);font-size:clamp(24px,2.5vw,34px);font-variant-numeric:tabular-nums;line-height:1.2}
#page-container .intq .stats span{color:#A8CBC5;font-size:14px}

/* bento about */
#page-container .intq .bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(150px,auto);gap:14px}
#page-container .intq .bx{border-radius:var(--leaf);padding:22px 24px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
#page-container .intq .bx h3{font-size:19px}
#page-container .intq .bx .tag{align-self:flex-start}
#page-container .intq .bx p{font-size:14.5px}
#page-container .intq .bx-about{grid-column:span 2;grid-row:span 2;background:var(--mist);border:1px solid var(--line)}
#page-container .intq .bx-about h3{font-size:clamp(21px,2vw,26px);line-height:1.55}
#page-container .intq .bx-about p{color:var(--muted);font-size:15.5px}
#page-container .intq .bx-about .links{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:12px}
#page-container .intq .bx-about .links a{padding:8px 14px;border-radius:var(--leaf-s);background:#fff;border:1px solid var(--line);font-size:13.5px;display:inline-flex;gap:6px;align-items:center;transition:border-color .2s,color .2s}
#page-container .intq .bx-about .links a:hover{border-color:var(--teal);color:var(--teal-d)}
#page-container .intq .bx-v{background:var(--teal);color:#fff}
#page-container .intq .bx-v p{color:#E1F5F1}
#page-container .intq .bx-m{background:var(--cocoa);color:#fff}
#page-container .intq .bx-m p{color:#EBDAD7}
#page-container .intq .bx-g{grid-column:span 2;background:var(--teal-dd);color:#fff}
#page-container .intq .bx-g ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#page-container .intq .bx-g li{font-size:14px;color:#CBE5E0;border-top:2px solid var(--mint);padding-top:10px}
#page-container .intq .bx i.k{width:36px;height:36px;border-radius:var(--leaf-s);display:grid;place-items:center;background:rgba(255,255,255,.14);font-size:18px;font-style:normal}
#page-container .intq .bx::after{content:"";position:absolute;width:180px;height:180px;inset-inline-start:-60px;bottom:-90px;border-radius:50%;border:26px solid rgba(255,255,255,.06);pointer-events:none;z-index:0}
#page-container .intq .bx>*{position:relative;z-index:1}
#page-container .intq .bx-about::after{border-color:rgba(28,157,139,.06)}

/* workshop carousel */
#page-container .intq .car-nav{display:flex;gap:8px}
#page-container .intq .car-nav button{width:40px;height:40px;border-radius:var(--leaf-s);border:1px solid var(--line);background:#fff;cursor:pointer;font-size:18px;display:grid;place-items:center;padding:0;transition:border-color .2s,color .2s}
#page-container .intq .car-nav button:hover{border-color:var(--teal);color:var(--teal-d)}
#page-container .intq .car{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,calc((100% - 56px)/4.2));gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px}
#page-container .intq .car::-webkit-scrollbar{display:none}
#page-container .intq .wk{scroll-snap-align:start;border:1px solid var(--line);border-radius:var(--leaf);overflow:hidden;display:flex;flex-direction:column;background:#fff;transition:transform .3s,box-shadow .3s}
#page-container .intq .wk:hover{transform:translateY(-4px);box-shadow:0 24px 40px -28px rgba(8,51,45,.5)}
#page-container .intq .wk-cov{height:120px;position:relative;overflow:hidden;background:var(--teal-d)}
#page-container .intq .wk-cov svg,#page-container .intq .wk-cov img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#page-container .intq .wk-cov svg path{fill:none;stroke-linecap:round}
#page-container .intq .wk:nth-child(3n+2) .wk-cov{background:var(--cocoa)}
#page-container .intq .wk:nth-child(3n) .wk-cov{background:#2B7D71}
#page-container .intq .wk-cov time{position:absolute;top:12px;inset-inline-start:12px;background:#fff;color:var(--ink);font-size:12px;font-weight:700;padding:3px 10px;border-radius:var(--leaf-s)}
#page-container .intq .wk-b{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
#page-container .intq .wk-b h3{font-size:16px;line-height:1.65}
#page-container .intq .wk-b p{color:var(--muted);font-size:13.5px}
#page-container .intq .wk-b a{margin-top:auto;padding-top:8px;color:var(--teal-d);font-weight:700;font-size:13.5px;display:inline-flex;gap:6px;align-items:center}

/* volunteer band */
#page-container .intq .vband{background:var(--teal);color:#fff;border-radius:var(--leaf);padding:40px 44px;display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:32px;align-items:center;position:relative;overflow:hidden}
#page-container .intq .vband svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#page-container .intq .vband svg path{fill:none;stroke:#fff;stroke-linecap:round}
#page-container .intq .vband h2{font-size:clamp(23px,2.5vw,32px);line-height:1.5;position:relative}
#page-container .intq .vband p{color:#E1F5F1;margin-top:8px;position:relative;max-width:52ch}
#page-container .intq .vband .acts{display:flex;gap:10px;flex-wrap:wrap;position:relative}
#page-container .intq .vband .btn-o{border-color:rgba(255,255,255,.45);color:#fff}

/* news */
#page-container .intq .news{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px}
#page-container .intq .feat{border-radius:var(--leaf);overflow:hidden;background:var(--teal-dd);color:#fff;display:flex;flex-direction:column;min-height:360px;position:relative}
#page-container .intq .feat svg,#page-container .intq .feat>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#page-container .intq .feat svg path{fill:none;stroke-linecap:round}
#page-container .intq .feat.has-img svg{opacity:.35}
#page-container .intq .feat .t{position:relative;margin-top:auto;padding:24px 26px;display:grid;gap:10px;background:linear-gradient(transparent,rgba(8,51,45,.92) 40%)}
#page-container .intq .feat time{color:var(--mint);font-size:13px}
#page-container .intq .feat h3{font-size:clamp(19px,1.9vw,24px);line-height:1.55}
#page-container .intq .feat p{color:#CBE5E0}
#page-container .intq .nlist{display:grid;align-content:start}
#page-container .intq .nlist a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:center}
#page-container .intq .nlist a:first-child{padding-top:0}
#page-container .intq .nlist .d{width:58px;text-align:center;border-radius:var(--leaf-s);background:var(--mist);border:1px solid var(--line);padding:8px 0;line-height:1.3}
#page-container .intq .nlist .d b{display:block;font-family:var(--f-display);font-size:19px;color:var(--teal-d)}
#page-container .intq .nlist .d small{font-size:11px;color:var(--muted)}
#page-container .intq .nlist h3{font-size:15.5px;line-height:1.6;font-family:var(--f-body);transition:color .2s}
#page-container .intq .nlist a:hover h3{color:var(--teal-d)}
#page-container .intq .nlist div span{font-size:13px;color:var(--muted)}

/* governance tabs */
#page-container .intq .gov{border:1px solid var(--line);border-radius:var(--leaf);overflow:hidden}
#page-container .intq .gtabs{display:flex;overflow-x:auto;scrollbar-width:none;background:var(--mist);border-bottom:1px solid var(--line)}
#page-container .intq .gtabs button{flex:1;min-width:max-content;border:0;border-bottom:3px solid transparent;border-radius:0;background:none;padding:14px 18px;font-size:14.5px;cursor:pointer;font-weight:600;color:var(--muted);display:flex;gap:8px;align-items:center;justify-content:center;transition:color .2s,border-color .2s}
#page-container .intq .gtabs button em{font-style:normal;font-size:12px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:1px 8px}
#page-container .intq .gtabs button[aria-selected="true"]{color:var(--teal-d);border-bottom-color:var(--teal);background:#fff}
#page-container .intq .glist{padding:12px 24px 20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
#page-container .intq .glist[hidden]{display:none}
#page-container .intq .glist a{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px;transition:color .2s}
#page-container .intq .glist a:hover{color:var(--teal-d)}
#page-container .intq .glist i{font-style:normal;font-size:11px;font-weight:700;color:var(--cocoa);background:var(--cocoa-l);border-radius:var(--leaf-s);padding:4px 8px}
#page-container .intq .glist em{font-style:normal;margin-inline-start:auto;color:var(--muted);font-size:13px}

/* partners */
#page-container .intq .pts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
#page-container .intq .pts>*{height:108px;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;text-align:center;padding:8px;background:#fff;overflow:hidden;border:1px solid var(--line);border-radius:var(--leaf-s);color:var(--muted);font-weight:600;transition:border-color .25s,color .25s}
#page-container .intq .pts>*:hover{border-color:var(--teal);color:var(--teal-d)}
#page-container .intq .pts img{width:100%;height:100%;max-height:none;object-fit:contain}

@media (max-width:1080px){
  #page-container .intq .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  #page-container .intq .pts{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:860px){
  #page-container .intq .hero-in,#page-container .intq .news{grid-template-columns:minmax(0,1fr)}
  #page-container .intq .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  #page-container .intq .stats div:nth-child(3){padding-inline-start:0;border-inline-start:0}
  #page-container .intq .stats div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}
  #page-container .intq .vband{grid-template-columns:minmax(0,1fr);padding:40px 26px}
  #page-container .intq .glist{grid-template-columns:minmax(0,1fr)}
  #page-container .intq .car{grid-auto-columns:minmax(260px,78%)}
  #page-container .intq .feat{min-height:340px}
}
@media (max-width:560px){
  #page-container .intq .sec{padding-block:56px}
  #page-container .intq .sec-tight{padding-top:0}
  #page-container .intq .hero-in{padding-block:36px 28px}
  #page-container .intq .bento{grid-template-columns:minmax(0,1fr)}
  #page-container .intq .bx-about,#page-container .intq .bx-g{grid-column:auto;grid-row:auto}
  #page-container .intq .bx-g ul{grid-template-columns:minmax(0,1fr)}
  #page-container .intq .pts{grid-template-columns:repeat(2,minmax(0,1fr))}
  #page-container .intq .pts>*{height:96px;padding:6px}
  #page-container .intq .glist{padding:8px 16px 16px}
  #page-container .intq .stats div+div{padding-inline-start:16px}
  #page-container .intq .gtabs{display:grid;grid-template-columns:1fr 1fr;overflow:visible}
  #page-container .intq .gtabs button{min-width:0;padding:14px 10px;font-size:14px;flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  #page-container .intq *,#page-container .intq *::before,#page-container .intq *::after{animation:none!important;transition:none!important}
  #page-container .intq .blades path{stroke-dashoffset:0}
}