/* AYATOP About us page (1.3.1). Hero with the delivery photo, a clear "how you can pay" block (cash on delivery in the Gulf,
   card on selected products), the story beside the team photo, promises, order steps, numbers, contacts and a closing call.
   Theme tokens + logical properties, so Arabic (RTL) and English (LTR) both work. */

.ay-ab{max-width:1120px;margin-inline:auto;padding-block:28px 24px;color:var(--ay-ink)}
.ay-ab h2{margin:0;font-size:clamp(26px,3.4vw,38px);line-height:1.25;font-weight:800;letter-spacing:-.01em;color:var(--ay-gd);max-width:24ch;text-wrap:balance}
.ay-ab section{margin-top:84px}
.ay-ab-pay h2{max-width:30ch}
.ay-ab-hunt h2,.ay-ab-svc h2{max-width:28ch}
.ay-ab-sub{margin:12px 0 0;max-width:62ch;font-size:16.5px;line-height:1.8;color:var(--ay-mu)}

.ay-ab-b{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;transition:transform .18s,background .18s,box-shadow .18s}
.ay-ab-b:hover{transform:translateY(-2px)}
.ay-ab-b--gold{background:var(--ay-gold);color:var(--ay-gd);box-shadow:0 14px 28px -12px rgba(253,200,1,.75)}
.ay-ab-b--gold:hover{background:var(--ay-gold-l);color:var(--ay-gd)}
.ay-ab-b--ghost{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.ay-ab-b--ghost:hover{background:#fff;color:var(--ay-gd)}

/* hero: text on the left, the courier handing over a parcel, standing on the bottom edge */
.ay-ab-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px;align-items:end;border-radius:32px;padding:60px 56px 0;color:#fff;
	background:radial-gradient(50% 70% at 100% 0%,rgba(38,176,125,.45),rgba(38,176,125,0) 62%),linear-gradient(135deg,#073D2D 0%,#0B5A40 55%,#0B6B4C 100%);box-shadow:0 30px 60px -34px rgba(7,61,45,.7)}
.ay-ab-hero-text{align-self:center;padding-bottom:60px}
.ay-ab-hero h1{margin:0 0 20px;font-size:clamp(34px,4.8vw,58px);line-height:1.12;font-weight:800;letter-spacing:-.02em;color:#fff;max-width:14ch;text-wrap:balance}
.ay-ab-lead{margin:0;max-width:50ch;font-size:17.5px;line-height:1.85;color:#D6EBE2}
.ay-ab-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.ay-ab-hero-pic{position:relative;align-self:end;justify-self:center;width:100%;max-width:440px}
.ay-ab-hero-pic::before{content:"";position:absolute;inset-inline:6% 6%;bottom:0;height:78%;border-radius:999px 999px 0 0;background:linear-gradient(180deg,rgba(253,200,1,.95),rgba(253,200,1,.55));}
.ay-ab-hero-pic img{position:relative;display:block;width:100%;height:auto}

/* how you can pay */
.ay-ab-pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
.ay-ab-way{display:flex;flex-direction:column;padding:30px 30px 28px;border-radius:26px}
.ay-ab-way--cod{background:var(--ay-gl);border:1px solid #CFE8DC}
.ay-ab-way--card{background:#fff;box-shadow:var(--ay-sh1);border:1px solid var(--ay-ln)}
.ay-ab-way>i{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--ay-g);color:#fff;margin-bottom:18px}
.ay-ab-way--card>i{background:var(--ay-gd);color:var(--ay-gold)}
.ay-ab-way>i .ay-ic{width:26px;height:26px}
.ay-ab-way h3{margin:0 0 8px;font-size:22px;line-height:1.3;color:var(--ay-gd)}
.ay-ab-way p{margin:0 0 20px;font-size:16px;line-height:1.8;color:#3F4A44;flex:1}
.ay-ab-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ay-ab-tags-l{font-size:14px;font-weight:600;color:var(--ay-mu);margin-inline-end:4px}
.ay-ab-tags b{padding:7px 14px;border-radius:999px;background:#fff;color:var(--ay-gd);font-size:14.5px;font-weight:700;box-shadow:inset 0 0 0 1px #BFE0D0}
.ay-ab-tags img{display:block;height:30px;width:auto;border-radius:5px;box-shadow:0 0 0 1px var(--ay-ln)}
.ay-ab-pay-note{margin:18px 0 0;font-size:15.5px;line-height:1.8;color:var(--ay-mu)}
.ay-ab-pay-note a{font-weight:700;color:var(--ay-g);text-decoration:underline;text-underline-offset:3px}

/* story + team photo */
.ay-ab-story{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:start}
.ay-ab-story-text h2{margin-bottom:26px}
.ay-ab-story-text p{margin:0 0 18px;max-width:62ch;font-size:17px;line-height:1.95;color:#35413B}
.ay-ab-story-text p.is-first{font-size:20px;line-height:1.85;color:var(--ay-gd);font-weight:500}
.ay-ab-story-text blockquote{margin:30px 0 0;padding:24px 28px;border-radius:22px;background:var(--ay-gl);border-inline-start:6px solid var(--ay-gold);font-size:clamp(20px,2.4vw,26px);line-height:1.5;font-weight:700;color:var(--ay-gd)}
.ay-ab-crew{position:sticky;top:110px;margin:0;border-radius:30px;overflow:hidden;background:linear-gradient(180deg,#FFF6CC 0%,var(--ay-gl) 60%);box-shadow:var(--ay-sh1);padding:34px 20px 0}
.ay-ab-crew img{display:block;width:100%;height:auto}
.ay-ab-crew figcaption{margin:0 -20px;padding:16px 24px;background:var(--ay-gd);color:#fff;font-size:15.5px;font-weight:700;text-align:center}

/* promises */
.ay-ab-pro-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.ay-ab-pro-card{padding:30px 30px 28px;border-radius:24px;background:#fff;box-shadow:var(--ay-sh1)}
.ay-ab-pro-card i{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--ay-g);color:#fff;margin-bottom:18px}
.ay-ab-pro-card i .ay-ic{width:26px;height:26px}
.ay-ab-pro-card h3{margin:0 0 8px;font-size:21px;line-height:1.3;color:var(--ay-gd)}
.ay-ab-pro-card p{margin:0;font-size:15.5px;line-height:1.8;color:var(--ay-mu)}
.ay-ab-pro-card p a{display:inline-block;margin-top:6px;font-weight:600;color:var(--ay-g);text-decoration:underline;text-underline-offset:3px}

/* product hunting: a real sequence, so numbered */
.ay-ab-steps{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;position:relative}
.ay-ab-steps::before{content:"";position:absolute;inset-inline:6%;top:23px;height:2px;background:repeating-linear-gradient(90deg,var(--ay-phi) 0 8px,transparent 8px 16px)}
.ay-ab-steps li{position:relative;display:flex;flex-direction:column;gap:6px}
.ay-ab-steps li i{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--ay-gold);color:var(--ay-gd);font-style:normal;font-weight:800;font-size:18px;margin-bottom:10px;box-shadow:0 0 0 6px #F3F6F4}
.ay-ab-steps li b{font-size:18px;color:var(--ay-gd)}
.ay-ab-steps li span{font-size:15px;line-height:1.75;color:var(--ay-mu)}

/* supplier to door: one line of four stops, the last one lit */
.ay-ab-route{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:30px;counter-reset:s}
.ay-ab-stop{position:relative;padding:24px 22px 24px;background:#fff;box-shadow:var(--ay-sh1);display:flex;flex-direction:column;gap:8px;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,0 100%,18px 50%)}
.ay-ab-stop:first-child{clip-path:polygon(0 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,0 100%);border-start-start-radius:22px;border-end-start-radius:22px}
.ay-ab-stop b{font-size:18px;color:var(--ay-gd);padding-inline:18px}
.ay-ab-stop span{font-size:14.5px;line-height:1.7;color:var(--ay-mu);padding-inline:18px}
.ay-ab-stop:first-child b,.ay-ab-stop:first-child span{padding-inline-start:4px}
.ay-ab-stop.is-end{background:var(--ay-gold);clip-path:polygon(0 0,100% 0,100% 100%,0 100%,18px 50%);border-start-end-radius:22px;border-end-end-radius:22px}
.ay-ab-stop.is-end b{color:var(--ay-gd)}.ay-ab-stop.is-end span{color:#4A3F00}

/* numbers */
.ay-ab-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:28px;background:var(--ay-gd);color:#fff;overflow:hidden}
.ay-ab-facts div{padding:34px 22px;text-align:center;border-inline-start:1px solid rgba(255,255,255,.1)}
.ay-ab-facts div:first-child{border-inline-start:0}
.ay-ab-facts strong{display:block;font-size:clamp(34px,4.4vw,52px);line-height:1.1;font-weight:800;color:var(--ay-gold);letter-spacing:-.02em}
.ay-ab-facts span{display:block;margin-top:8px;font-size:14.5px;line-height:1.6;color:#B9D8CA}

/* closing call */
.ay-ab-end{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:44px 48px;border-radius:30px;background:linear-gradient(135deg,var(--ay-gl),#fff 70%);box-shadow:var(--ay-sh1);border:1px solid #D3EBDF}
.ay-ab-end h2{font-size:clamp(24px,3vw,34px)}
.ay-ab-end-b{display:flex;flex-wrap:wrap;gap:12px;flex-shrink:0}
.ay-ab-b--line{gap:10px;color:var(--ay-gd);box-shadow:inset 0 0 0 1.5px var(--ay-g);background:#fff}
.ay-ab-b--line:hover{background:var(--ay-gl)}
.ay-ab-b--line .ay-ic{width:20px;height:20px;color:var(--ay-g)}
.ay-ab-end p{margin:8px 0 0;max-width:52ch;font-size:16.5px;color:var(--ay-mu)}

@media (max-width:1000px){
	.ay-ab-route{grid-template-columns:1fr 1fr;gap:10px}
	.ay-ab-stop,.ay-ab-stop:first-child,.ay-ab-stop.is-end{clip-path:none;border-radius:18px}
	.ay-ab-stop b,.ay-ab-stop span,.ay-ab-stop:first-child b,.ay-ab-stop:first-child span{padding-inline:0}
	.ay-ab-hero{grid-template-columns:1fr;padding:40px 32px 0;gap:8px}
	.ay-ab-hero-text{padding-bottom:0}
	.ay-ab-hero-pic{max-width:340px}
	.ay-ab-story{grid-template-columns:1fr;gap:30px}
	.ay-ab-crew{position:static;order:-1}
	.ay-ab-steps{grid-template-columns:1fr 1fr}
	.ay-ab-steps::before{display:none}
}
@media (max-width:640px){
	.ay-ab{padding-block:16px}
	.ay-ab section{margin-top:56px}
	.ay-ab-hero{border-radius:22px;padding:30px 20px 0}
	.ay-ab-lead{font-size:16px}
	.ay-ab-cta .ay-ab-b{flex:1}
	.ay-ab-pay-grid{grid-template-columns:1fr}
	.ay-ab-route{grid-template-columns:1fr;gap:10px}
	.ay-ab-stop,.ay-ab-stop:first-child,.ay-ab-stop.is-end{clip-path:none;border-radius:18px}
	.ay-ab-stop b,.ay-ab-stop span,.ay-ab-stop:first-child b,.ay-ab-stop:first-child span{padding-inline:0}
	.ay-ab-end-b{width:100%}.ay-ab-end-b .ay-ab-b{flex:1}
	.ay-ab-way{padding:24px 22px}
	.ay-ab-pro-grid{grid-template-columns:1fr}
	.ay-ab-pro-card{padding:24px 22px}
	.ay-ab-steps{grid-template-columns:1fr;gap:20px}
	.ay-ab-steps li{display:grid;grid-template-columns:46px 1fr;column-gap:16px;row-gap:2px}
	.ay-ab-steps li i{grid-row:1/3;margin:0}
	.ay-ab-facts{grid-template-columns:1fr}
	.ay-ab-facts div{border-inline-start:0;border-top:1px solid rgba(255,255,255,.1)}
	.ay-ab-facts div:first-child{border-top:0}
	.ay-ab-end{flex-direction:column;align-items:flex-start;padding:30px 22px}
	.ay-ab-end .ay-ab-b{width:100%;box-sizing:border-box}
}
@media (prefers-reduced-motion:reduce){.ay-ab-b{transition:none}.ay-ab-b:hover{transform:none}}