/* ===== TOKENS ===== */
:root{
--c-primary:#143960;
--c-accent:#249EDC;
--c-white:#FDFDFD;
--c-bg:#FCFCFC;
--c-dark:#15365C;
--h4-size:1.728rem; --h4-weight:600; --h4-lh:1; --h4-track:-0.553px;
--display-size:3.575rem; --display-weight:600; --display-lh:1.15; --display-track:-1.144px;
--text-lg-size:1.125rem; --text-lg-weight:400; --text-lg-lh:1.15; --text-lg-track:-0.18px;
--cta-size:1.0625rem; --cta-weight:400; --cta-lh:1.15; --cta-track:-0.34px;
--container-max:90rem; /* 1440px */
--bp-md:768px; --bp-lg:1024px; --bp-xl:1280px;
--container-max: 90rem; /* 1440px */
--gutter-xs: 1rem; /* mobile */
--gutter-md: 2rem; /* tablet */
--gutter-lg: 3.75rem; /* desktop */
}
/* قاعدة عامة: Roboto للإنجليزي */
body{
margin:0;
background:var(--c-bg);
color:var(--c-primary);
font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}
.container{
max-width: var(--container-max);
margin-inline: auto;
padding-left: var(--gutter-xs);
padding-right: var(--gutter-xs);
}
@media (min-width: 768px){
.container{ padding-left: var(--gutter-md); padding-right: var(--gutter-md); }
}
@media (min-width: 1024px){
.container{ padding-left: var(--gutter-lg); padding-right: var(--gutter-lg); }
}
/* عند العربية (RTL): Cairo تلقائيًا */
html[dir="rtl"] body{
font-family: 'Cairo', 'Roboto', system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}
/* ===== BASE ===== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html.no-scroll, html.no-scroll body{overflow:hidden}
.container{max-width:var(--container-max);margin-inline:auto;padding-inline:1.875rem}
@media(min-width:768px){.container{padding-inline:1.875rem}}
@media(min-width:1024px){.container{padding-inline:1.875rem}}
@media(min-width:1280px){.container{padding-inline:3.75rem}}
.site-main{min-height:40vh}
ul li {
list-style: none;
}
/* ===== NAVBAR ===== */
.nav{background:#FCFCFC;color:#15365C;position:relative;z-index:50; padding-top: 19.5px; padding-bottom: 19.5px;}
.nav__container{display:flex;align-items:center;justify-content:space-between;padding-block:1rem}
@media(min-width:768px){.nav__container{padding-inline:1.875rem}}
@media(min-width:1024px){.nav__container{padding-inline:1.875rem}}
@media(min-width:1280px){.nav__container{padding-inline:3.75rem}}
.nav__logo img{height:auto;width:126px}
@media(min-width:1024px){.nav__logo img{width:112px}}
@media(min-width:1280px){.nav__logo img{width:126px}}
.nav__list{
display:none;gap:2rem;align-items:center ; padding-left: 0;
@media (min-width: 1024px) and (max-width: 1100px) {
padding-left: 10px !important;
gap : 0.5rem;
}
@media (min-width: 1100px) and (max-width: 1310px) {
padding-left: 1.5rem !important;
gap : 1.5rem !important;
}
}
.responsive-heading {
font-size: 1.75rem ;
@media (min-width: 600px) and (max-width: 999px) {
font-size: 3.575rem !important;
}
@media (min-width: 1000px) and (max-width: 1300px) {
font-size: 2.5rem !important;
}
@media (min-width: 1301px) and (max-width: 1340px) {
font-size: 2.8rem !important;
}
@media (min-width: 1301px) {
font-size: 3.575rem !important;
}
}
@media(min-width:1024px){.nav__list{display:flex}}
.nav__item{position:relative}
.nav__btn{display:flex;align-items:center;gap:.25rem;background:none;border:0;color:#15365C;font:inherit;cursor:pointer}
.nav__chev{opacity:.9}
.nav__link{color:#15365C;text-decoration:none}
.nav__link:hover{opacity:.8}
.nav__actions{display:none;align-items:baseline;gap:1.5rem}
@media(min-width:1024px){.nav__actions{display:flex}}
.btn{display:inline-block;text-decoration:none;border-radius:999px;line-height:140%letter-spacing:-0.32px;font-weight:400}
.btn--primary{background:#143960;color:#fff;padding:0.875rem 2rem}
.btn--outline{border:1px solid #143960;color:#143960;padding:0.875rem 2rem}
.btn--outline:hover{background:#1439600D}
.lang-switch{border:1px solid #FCFCFC;border-radius:999px;background:transparent;cursor:pointer}
.burger{display:inline-flex;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:#15365C}
@media(min-width:1024px){.burger{display:none}}
/* ===== MEGA (Desktop Dropdown) ===== */
.mega{position:fixed;left:0;width:100%;z-index:40;display:block}
.mega[aria-hidden="true"]{display:none}
.mega__backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4)}
.mega__panel{position:absolute;left:0;top:-2px !important;width:100%;background:#FCFCFC;color:#15365C;}
.mega__inner{max-width:var(--container-max);margin:0 auto;padding-block: 2rem; }
@media(min-width:768px){.mega__inner{padding-block: 2rem 4rem;}}
@media(min-width:1280px){.mega__inner{padding-block: 2rem 4rem;}}
.mega__titlewrap{margin-bottom:2rem}
.mega__title{color:#143960;font-size:1.625rem;font-weight:600;margin:0 0 .5rem}
.mega__rule{height:1px;background:#143960}
.mega__sections{display:block}
.mega__group{display:none ; flex-wrap: wrap;gap: 6rem; justify-content: center; }
.mega__group[style*="display: flex"], .mega__group:not([style]){display:flex}
@media (max-width: 767px) {
.mega__group{
justify-content: flex-start;
}
}
.logo-list-custom{
display: flex;
align-items: center;
}
.logo-list-custom .nav__list{
padding-left: 4rem;
}
.mega__col{margin-bottom:0rem;margin-top: 1rem;}
.mega__coltitle{color:#249EDC;font-weight:600;font-size:1.1rem;margin-bottom:1rem}
.mega__grid{display:grid;grid-auto-flow:column;grid-auto-rows:minmax(0,auto);grid-template-rows:repeat(3,min-content);gap:1.25rem 5rem}
.mega__link{display:block;color:#15365C;text-decoration:none}
.mega__link:hover{color:#249EDC}
.mega__label{font-weight:600;font-size:1.1rem}
.mega__sub{font-size:.875rem;color:#010915}
/* ===== Mobile Sidebar ===== */
.mnav{position:fixed;inset:0;background:#15365C;color:#fff;z-index:50;display:none;flex-direction:column;justify-content:space-between}
.mnav[data-open="true"]{display:flex}
.mnav__head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(0,0,0,.5);padding:1rem 1.5rem}
.mnav__brand{display:flex;align-items:center;gap:.5rem}
.mnav__brandname{font-weight:600;font-size:1.125rem}
.mnav__brandsub{font-size:.625rem;opacity:.9}
.mnav__close{background:none;border:0;color:#fff;cursor:pointer}
.mnav__list{list-style:none;margin:0;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}
.mnav__item{border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:.5rem}
.mnav__btn{background:none;border:0;color:#fff;display:flex;align-items:center;gap:.25rem;cursor:pointer;font-size:1.1rem}
.mnav__link{color:#fff;text-decoration:none}
.mnav__foot{padding:1.5rem;border-top:1px solid rgba(255,255,255,.2);display:flex;justify-content:center}
.mnav__lang{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border:1px solid #FCFCFC;border-radius:999px;background:transparent;color:#fff;cursor:pointer}
.mnav__lang:hover{background:#FCFCFC;color:#15365C}
/* ===== Mobile Dropdown Modal ===== */
.mdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:60;display:none;align-items:center;justify-content:center;padding:1rem}
@media (max-width: 1024px){ .mdrop{ background: transparent !important;}
.mdrop::before {
display: none;
}
}
.mdrop[data-open="true"]{display:flex}
.mdrop__panel{background:#FCFCFC;color:#15365C;border-radius:.75rem;width:100%;max-width:640px;overflow:auto;position:relative;padding:1.5rem;
position: fixed !important;
inset: 0;
background: #FCFCFC !important;
padding: 16px;
/* top: 110px !important; */
border-radius: 0;
}
.mdrop__close{position:absolute;top:.75rem;right:.75rem;background:none;border:0;cursor:pointer;color:#15365C}
.mdrop__title{font-size:1.25rem;font-weight:600;margin:1rem 0 .75rem;padding-bottom:.5rem;border-bottom:1px solid #15365C}
.mdrop__coltitle{color:#249EDC;font-weight:600;font-size:1.1rem;margin:.75rem 0}
.mdrop__list{display:flex;flex-direction:column;gap:.5rem}
.mdrop__link{color:#15365C;text-decoration:none}
.mdrop__link:hover{color:#249EDC}
.mdrop__label{font-weight:600;font-size:1.1rem}
.mdrop__sub{font-size:.875rem;color:#010915}
/* ===== HERO ===== */
.hero{
position:relative;
background:#F9FAFB;
width:100%;
overflow:hidden;
/* px-[1rem] md:px-[2rem] lg:px-[3.75rem] */
/* padding-inline:1rem; */
}
/* @media (min-width: 768px){ .hero{ padding-inline:2rem; } } */
/* @media (min-width: 1024px){ .hero{ padding-inline:3.75rem; } } */
/* py-[3.75rem] pb-0 lg:py-0 => pt:3.75rem; pb:0; ثم على lg كلاهما 0 */
.hero{ padding-top:2rem; padding-bottom:0; }
@media (min-width: 1024px){ .hero{ padding-top:0; padding-bottom:0; } }
/* max-w-[90rem] + flex-col lg:flex-row + gap-[0] */
.hero__wrap{
display:flex;
flex-direction:column;
align-items: center;
gap:0;
position:relative;
z-index:20;
}
@media (min-width: 1100px) { .hero__wrap{ flex-direction:row; } } /* sm */
/* ===== HERO responsive fix ===== */
@media (min-width: 1024px){
.hero__wrap{
display:flex;
flex-direction: row;
align-items: center;
}
.hero__left{
flex: 1 1 0%;
margin-bottom: 0;
text-align: left;
}
.hero__right{
flex: 0 0 auto;
justify-content: flex-end;
}
}
/* (تابلت 768–1023px) */
@media (min-width: 768px) and (max-width: 1023.98px){
.hero__left{ text-align: left; }
.hero__image{ max-width: 35.9375rem; }
}
@media (max-width: 639.98px){
.hero__actions{ justify-content: center; }
}
.hero__left{
text-align:left;
margin-bottom:2rem;
}
@media (min-width: 640px){ .hero__left{ text-align:left; } .hero__actions{ justify-content: start !important; } } /* sm */
@media (min-width: 768px){ .hero__left{ text-align:left; } } /* md */
@media (min-width: 1024px){
.hero__left{ margin-bottom:0; text-align:left; }
}
.hero__subtitle{
font-size:1.1rem;
color:#1E7CAE;
margin-bottom:0.5rem;
line-height:100%;
letter-spacing:-0.553px;
font-weight:700;
}
@media (min-width: 640px){ .hero__subtitle{ font-weight:600; } }
@media (min-width: 768px){ .hero__subtitle{ font-weight:700; } }
@media (min-width: 1024px){ .hero__subtitle{ font-size:1.875rem; } }
.hero__title{
font-size:1.75rem;
font-weight:700;
color:#143960;
line-height:140%
margin:0 0 1rem;
letter-spacing:-1.144px;
@media (min-width: 600px) and (max-width: 999px) {
font-size: 3.75rem !important;
}
@media (min-width: 1000px) and (max-width: 1300px) {
font-size: 2.5rem !important;
}
@media (min-width: 1301px) and (max-width: 1340px) {
font-size: 2.8rem !important;
}
@media (min-width: 1301px) {
font-size: 3.50rem !important;
}
}
.hero__text{
color:#143960;
font-size:0.9375rem; /* 15px */
line-height:140%
letter-spacing:-0.18px;
width:100%;
margin:0 0 1.5rem;
}
@media (min-width: 1024px){
.hero__text{ font-size:1.125rem; width:80%; }
}
.hero__actions{
display:flex;
flex-direction:column;
gap:1rem;
justify-content:center;
}
@media (min-width: 640px){ .hero__actions{ flex-direction:row; } }
@media (min-width: 1024px){ .hero__actions{ justify-content:flex-start; } }
.hero__btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:1rem;
padding:.875rem 2rem;
border-radius:9999px;
font-size:1.1rem;
font-weight:400;
line-height:140%
letter-spacing:-0.32px;
text-decoration:none;
cursor:pointer;
transition:opacity .2s ease, background-color .2s ease, color .2s ease;
}
.hero__btn--primary{
background:#F9FAFB;
color:#143960;
}
.home_page .hero__btn--primary{
background:#143960;
color:#F9FAFB;
}
.hero__btn--primary:hover{ background:#249EDC }
.hero__btn--outline{
border:1px solid #F9FAFB;
color:#F9FAFB;
background:transparent;
}
.home_page .hero__btn--outline {
border: 1px solid #143960;
color: #143960;
background: transparent;
}
.hero__btn--outline:hover{ background:#F9FAFB; } /* gray-50 */
/* Right image wrapper: flex justify-end w-fit items-center */
.hero__right{
display:flex;
justify-content:flex-end;
align-items:center;
flex:0 0 auto; /* لا يتمدد */
}
/* image: max-w-[25rem] sm:[35.9375rem] lg:max-w-full; h-auto; object-contain */
.hero__image{
max-width:25rem;
height:auto;
object-fit:contain;
width:100%;
}
@media (min-width: 640px){ .hero__image{ max-width:35.9375rem; } } /* 575px */
@media (min-width: 1024px){ .hero__image{ max-width:100%; } }
/* ===== TRUSTED (logos strip) ===== */
.trusted{
background:#F3F4F6;
overflow:hidden;
padding-block:2rem;
}
/* ====== NAV ====== */
.site-nav{background:#FCFCFC;color:#15365C;position:relative;z-index:50;padding:20px 0;border-bottom:1px solid #e5e7eb}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand-and-menu{display:flex;align-items:center;gap:24px}
.logo img{display:block;height:auto}
.nav-list{display:none;list-style:none;margin:0;padding:0;gap:20px;align-items:center}
.nav-item{position:relative}
.nav-link{background:none;border:0;color:#15365C;cursor:pointer;font:inherit;padding:8px 6px}
.nav-link:hover{color:#249EDC}
.chev{font-size:.8em;margin-left:4px}
.actions{display:none;align-items:center;gap:12px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;text-decoration:none;line-height:1}
.btn--primary{background:#143960;color:#fff}
.btn--primary:hover{opacity:.9}
.btn--outline{border:1px solid #143960;color:#143960;}
.btn--outline:hover{background:#f3f6fb}
.lang-switch{display:inline-flex;align-items:center;border:1px solid transparent;border-radius:999px;padding:8px 12px;text-decoration:none;color:#15365C}
.lang-switch:hover{background:#FCFCFC}
.hamburger{display:inline-flex;background:none;border:0;font:inherit;font-size:20px;cursor:pointer}
@media (min-width:1024px){
.nav-list{display:flex}
.actions{display:flex}
.hamburger{display:none}
}
/* Mega */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.4)}
.overlay[hidden]{display:none}
.mega{position:relative;left:0;top:100%;width:100%;background:#FCFCFC;color:#15365C;border-top:1px solid #d1d5db;box-shadow:0 10px 30px rgba(0,0,0,.08);display:none}
.mega.open{display:block}
.mega-inner{padding:32px 16px}
.mega-head h2{margin:0 0 8px;color:#143960;font-weight:600;font-size:26px}
.mega-head .rule{height:1px;background:#143960}
.mega-columns{display:flex;flex-wrap:wrap;gap:60px;margin-top:24px}
.mega-col{min-width:240px}
.mega-title{color:#249EDC;font-weight:600;margin-bottom:12px}
.mega-links{display:grid;gap:16px}
.mega-links a{display:block;text-decoration:none;color:#15365C}
.mega-links a strong{display:block;font-weight:600}
.mega-links a span{display:block;font-size:14px;color:#010915}
/* Mobile panel */
.mobile-panel{position:fixed;inset:0;background:#15365C;color:#fff;display:none;flex-direction:column}
.mobile-panel.open{display:flex}
.mobile-head{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid rgba(0,0,0,.5)}
.brand{display:flex;align-items:center;gap:8px}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-text strong{font-size:18px}
.brand-text small{font-size:10px;opacity:.8}
.close{background:none;border:0;color:#fff;font-size:22px;cursor:pointer}
.mobile-links{list-style:none;margin:0;padding:16px;display:flex;flex-direction:column;gap:14px}
.mobile-links a,.mobile-dropdown{color:#fff;text-decoration:none;background:none;border:0;text-align:left;font:inherit;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.2)}
.mobile-dropdown span{float:right;opacity:.9}
.mobile-group{display:none;padding:8px 16px 0}
.mobile-group.open{display:block}
.mobile-sec{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.mobile-sec a{color:#fff;text-decoration:none;opacity:.9}
.mobile-footer{margin-top:auto;padding:16px;border-top:1px solid rgba(255,255,255,.2);display:grid;gap:10px}
.btn--outline-inv{border:1px solid #fff;color:#fff;background:transparent}
.btn--outline-inv:hover{background:rgba(255,255,255,.08)}
.lang-switch.inv{justify-content:center;border:1px solid #fff;color:#fff}
.trusted{ padding-block:4rem; } /* lg:py-[4rem] */
/* شريط تمرير أفقي بدون سكرول بار */
.trusted__scroller{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
scrollbar-width:none; /* Firefox */
-ms-overflow-style:none; /* IE/Edge legacy */
}
.trusted__scroller::-webkit-scrollbar{ display:none; } /* WebKit */
/* صف الشعارات: gap-[0.3rem] md:gap-[1.5rem] + justify-between + no-wrap */
.trusted__row{
display:flex;
align-items:center;
justify-content:space-between;
gap:2.3rem; /* ~4.8px */
flex-wrap:nowrap;
}
@media (min-width:768px){
.trusted__row{ gap:2.3rem; } /* 24px */
}
/* عنصر الشعار: w-[6.25rem] md:[7.5rem] lg:[8.75rem] + منع الانكماش */
.trusted__item{
flex:0 0 auto;
width:6.25rem; /* 100px */
}
@media (min-width:768px){ .trusted__item{ width:7.5rem; } } /* 120px */
@media (min-width:1024px){ .trusted__item{ width: 98px !important;
aspect-ratio: 7/3; } } /* 140px */
/* الصورة: w-full h-[31px] (sm نفس الشي) md:h-[40px]; contain ثم scale-down عند lg */
.trusted__img{
display:block;
width:100%;
height:31px;
object-fit:contain;
}
@media (min-width:768px){
.trusted__img{ height:40px; } /* md:h-[40px] */
}
@media (min-width:1024px){
.trusted__img{ object-fit:scale-down; } /* lg:object-scale-down */
}
/* ===== Accessibility Suite ===== */
.accs{
position:relative;
background:#F9FAFB;
padding-block:3.75rem; /* py-[3.75rem] */
}
@media (min-width:1024px){
.accs{ padding-block:8rem; } /* lg:py-[8rem] */
}
.accs__wrap{
max-width:90rem; /* 1440px */
margin-inline:auto;
text-align:center;
position:relative; z-index:20;
}
/* Eyebrow: text-[#249EDC] text-[1.3125rem] font-bold leading-[100%] tracking-[-0.42px] mb-[1rem] */
.accs__eyebrow{
color:#1E7CAE;
font-size:1.3125rem;
font-weight:700;
line-height:100%;
letter-spacing:-0.42px;
margin:0 0 1rem;
}
/* Title: tex-[#143960] text-[2.07375rem] md:same lg:[2.986rem] font-bold leading-[115%] tracking-[-0.956px] mb-[1rem] */
.accs__title{
color:#143960;
font-size:2.07375rem;
font-weight:700;
line-height:140%
letter-spacing:-0.956px;
margin:0 0 1rem;
}
@media (min-width:1024px){
.accs__title{ font-size:2.986rem; }
}
/* Desc: text-[#010915] text-[1rem] font-normal tracking-[-0.16px] leading-[120%] w-full lg:w-[70%] mx-auto mb-[4rem] */
.accs__desc{
color:#010915;
font-size:1.1rem;
font-weight:400;
letter-spacing:-0.16px;
line-height:140%;
width:100%;
margin:0 auto 4rem;
}
@media (min-width:1024px){
.accs__desc{ width:70%; }
}
/* Grid: grid-cols-1 md:2 lg:3 gap-[2rem] md:gap-[3.75rem] */
.accs__grid{
display:grid;
grid-template-columns:1fr;
gap:2rem; /* 32px */
}
@media (min-width:768px){
.accs__grid{
grid-template-columns:repeat(2,1fr);
gap:2rem; /* 60px */
}
}
@media (min-width:1024px){
.accs__grid{ grid-template-columns:repeat(3,1fr); gap:3.75rem;}
}
/* Card: bg-[#F4F5F6] border-[#D9DADC] rounded-xl py-[1.5rem] pt-[2rem] px-[1.5rem] pb-[2.5rem] flex-col center text-center */
.accs-card{
background:#F3F4F6;
border:1px solid #D1D5DB;
border-radius:1.25rem; /* rounded-xl */
padding:1.5rem 1.5rem 2.5rem; /* py-[1.5rem] px-[1.5rem] pb override below */
padding-top:2rem; /* pt-[2rem] overrides */
display:flex; flex-direction:column; align-items:center; text-align:center;
}
.accs-card__icon{ width: 67px !important; height: 53px !important;} /* mb-[0.625rem] */
/* small label: text-[#143960] text-[1rem] font-semibold leading-[115%] tracking-[-0.32px] mb-[0.25rem] mt-[2rem] */
.accs-card__eyebrow{
color:#143960;
font-size:1.1rem;
font-weight:600;
line-height:140%
letter-spacing:-0.32px;
margin-top:2rem;
margin-bottom:0.25rem;
}
/* h3: text-[#143960] text-[1.728rem] font-bold leading-[100%] tracking-[-0.0346rem] mb-[1rem] */
.accs-card__title{
color:#143960;
font-size:1.728rem;
font-weight:700;
line-height:100%;
letter-spacing:-0.0346rem;
margin:0 0 1rem;
}
.accs-card__title-accent{ color:#143960; }
/* paragraph in card: text-[#010915] text-[1rem] font-normal leading-[120%] tracking-[-0.16px] mb-[2rem] mx-auto */
.accs-card__text{
color:#010915;
font-size:1.1rem;
font-weight:400;
line-height:140%;
letter-spacing:-0.16px;
margin:0 auto 2rem;
}
/* list: text-[#010915] text-[1rem] font-normal leading-[150%] md:[200%] tracking-[-0.0106rem] text-center mb-[3rem] */
.accs-card__list{
list-style:none; margin:0 0 3rem; padding:0;
color:#010915; font-size:1.1rem; font-weight:400;
line-height:150%;
letter-spacing:-0.0106rem;
text-align:center;
}
@media (min-width:768px){
.accs-card__list{ line-height:200%; }
}
/* button: bg-[#143960] text-white text-sm px-[2rem] py-[0.875rem] leading-[115%] tracking-[-0.32px] rounded-full w-full md:w-fit */
.accs-card__btn{
display:inline-block;
background:#143960;
color:#fff;
text-decoration:none;
font-size:0.875rem; /* text-sm */
font-weight:400;
line-height:140%
letter-spacing:-0.32px;
padding:0.875rem 2rem;
border-radius:9999px;
width:100%;
transition:opacity .2s ease;
}
.accs-card__btn:hover{ background:#249EDC; }
@media (min-width:768px){
.accs-card__btn{ width:auto; }
}
/* ===== Disability Needs ===== */
.needs{
text-align: center;
background:#F3F4F6;
padding-block:4rem; /* py-[4rem] */
}
@media (min-width:1024px){
.needs{ padding-block:8rem; } /* lg:py-[8rem] */
}
/* hidden lg:block */
.needs__eyebrow{
display:none; /* hidden */
color:#1E7CAE;
font-size:1.3125rem;
font-weight:700; /* bold */
line-height:100%;
letter-spacing:-0.42px;
margin:0 0 1rem;
}
@media (min-width:1024px){
.needs__eyebrow{ display:block; } /* lg:block */
}
/* h2: text-[#249EDC] lg:text-[#143960] text-[2.07375rem] lg:[2.986rem] bold leading-[115%] tracking-[-0.0575rem] mb-[1.5rem] */
.needs__title{
color:#249EDC;
font-size:2.07375rem;
font-weight:700;
line-height:140%
letter-spacing:-0.0575rem;
margin:0 0 1.5rem;
text-align:center;
}
@media (min-width:1024px){
.needs__title{
color:#143960;
width:70%;
font-size:2.986rem;
margin: auto;
margin-bottom: 1.5rem;
}
}
/* paragraph: text-[#010915] text-[1rem] leading-[120%] tracking-[-0.16px]
w-full sm:w-full lg:w-[85%] mx-auto mb-[2.5rem] lg:mb-[5rem]
*/
.needs__desc{
color:#010915;
font-size:1.1rem;
font-weight:400;
line-height:120%;
letter-spacing:-0.16px;
width:100%;
margin:0 auto 2.5rem;
text-align:center;
}
@media (min-width:1024px){
.needs__desc{
width:70%;
margin-bottom:5rem;
}
}
/* grid: 1 col -> sm:2 -> md:2 -> lg:4, gap-[2.5rem], mb-[5rem] */
.needs__grid{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); /* موبايل: عمودين */
gap: 2rem; /* 40px */
margin-bottom: 5rem;
}
/* sm */
@media (min-width:640px){
.needs__grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 3rem;
margin-bottom: 2.5rem;
}
}
/* md (تبقى 2) */
@media (min-width:768px){
.needs__grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* lg */
@media (min-width:1024px){
.needs__grid{
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-bottom: 5rem;
}
}
/* (اختياري) لتفادي overflow داخل البطاقات */
.needs__grid > * { min-width: 0; }
/* item: flex items-start gap-[.5rem] md:gap-[1rem] text-left */
.needs__item{
display:flex; align-items:center;
gap:.5rem; /* 8px */
text-align:left;
background: #F9FAFB;
flex-direction: column;
padding: 1rem;
border-radius: 20px;
border: 1px solid #D1D5DB;
text-align: center;
}
@media (min-width:768px){
.needs__item{ gap:1rem; padding: 2rem;} /* md:gap-[1rem] */
}
/* icon: width/height 47px + min-w-[2.5rem] */
.needs__icon{
width:47px; height:47px; min-width:2.5rem; display:block; margin: auto;
}
/* title h4: text-[#143960] text-[1.1875rem] semibold leading-[115%] tracking-[-0.38px] mb-[0.25rem] */
.needs__h4{
color:#143960;
font-size:1.1875rem;
font-weight:600; /* semibold */
line-height:140%
letter-spacing:-0.38px;
margin:0 0 .25rem;
}
/* p: text-[#010915] text-[0.9375rem] leading-[115%] tracking-[-0.15px] w-full lg:w-[80%] */
.needs__p{
color:#010915;
font-size:1.1rem;
font-weight:400;
line-height:140%
letter-spacing:-0.15px;
width:100%;
}
@media (min-width:1024px){
/* .needs__p{ width:80%; } */
}
/* button: bg-[#15365C] white text-[1rem] leading-[115%] tracking-[-0.32px] px-[2rem] py-[0.875rem] rounded-full w-full md:w-fit */
.needs__btn{
display:inline-block;
background:#15365C; color:#fff; text-decoration:none;
font-size:1.1rem; font-weight:400; line-height:140% letter-spacing:-0.32px;
padding:.875rem 2rem; border-radius:9999px;
width:100%; text-align:center; transition:opacity .2s ease;
}
.needs__btn:hover{ background:#249EDC; }
@media (min-width:768px){
.needs__btn{ width:auto; }
}
/* ===== Empowering Industries ===== */
.industries{
background:#143960;
padding-block:4rem; /* py-[4rem] */
}
@media (min-width:1024px){
.industries{ padding-block:8rem; } /* lg:py-[8rem] */
}
/* White card */
.industries__card{
position:relative;
/* background:#fff; */
border-radius:20px; /* rounded-[20px] */
/* px-6 sm:px-10 */
padding-left:1.5rem; /* 24px */
padding-right:1.5rem;
/* py-[2rem] مع pt override */
padding-top:0; /* pt-0 */
padding-bottom:2rem;
padding: 0 !important;
}
@media (min-width:640px){ /* sm */
.industries__card{
padding-left:2.5rem; /* sm:px-10 = 40px */
padding-right:2.5rem;
padding-top:1rem; /* sm:pt-[1rem] */
}
}
@media (min-width:1024px){ /* lg */
.industries__card{
padding-top:2.5rem; /* lg:py-[2.5rem] */
padding-bottom:2.5rem;
}
}
/* Decoration image at the top (optional asset) */
.industries__decor{
position:absolute;
inset-inline:0;
top:0;
width:100%;
height:auto;
pointer-events:none;
user-select:none;
/* لو كان شكل مسطّح قصير: يمكن ضبط translateY حسب الأصول */
}
/* Title: w-[100%] sm:[85%] md:[80%] lg:[100%]; color change at lg; sizes; leading; tracking; mb; mt */
.industries__title{
width:100%;
color:#fff !important; /* base */
font-weight:700; /* bold */
line-height:140%
letter-spacing:-0.876px;
text-align:left; /* text-start */
margin-top:1.5rem; /* mt-[1.5rem] */
margin-bottom:1rem; /* mb-[1rem] */
font-size:1.728125rem; /* base */
}
@media (min-width:640px){ .industries__title{ width:85%; } } /* sm:w-[85%] */
@media (min-width:768px){
.industries__title{
width:80%; /* md:w-[80%] */
font-size:2.07375rem; /* md:text-[2.07375rem] */
}
}
@media (min-width:1024px){
.industries__title{
width:100%; /* lg:w-full */
color:#143960; /* lg:text-[#143960] */
font-size:2.488rem; /* lg:text-[2.488rem] */
margin-top:0; /* lg:mt-[0] */
}
}
/* Paragraph under title */
.industries__desc{
color:#fff;
font-weight:400;
line-height:140%
letter-spacing:-0.17px;
text-align:left;
margin-bottom:64px; /* mb-[64px] */
width:100% !important; /* w-full */
font-size:0.9375rem; /* base */
}
@media (min-width:640px){ .industries__desc{ width:85%; } } /* sm:w-[85%] */
@media (min-width:768px){
.industries__desc{
width:75%;
margin-bottom:40px; /* mb-[64px] */
}
}
@media (min-width:1024px){
.industries__desc{
width:70%; /* lg:w-[70%] */
font-size:1.1rem;
margin-bottom:64px; /* mb-[64px] */
}
}
/* Grid: 1 -> 2 -> 3 cols; gap-8; mr lg:[1.875rem] */
.industries__grid{
display:grid;
grid-template-columns:1fr;
gap:2rem; /* gap-8 */
margin-right:0;
}
@media (min-width:640px){ .industries__grid{ grid-template-columns:repeat(2,1fr); } } /* sm */
@media (min-width:768px){ .industries__grid{ grid-template-columns:repeat(2,1fr); } } /* md */
@media (min-width:1024px){
.industries__grid{
grid-template-columns:repeat(3,1fr); /* lg:3 */
margin-right:1.875rem; /* lg:mr-[1.875rem] */
}
}
/* Item: border-l-[3px] color #249EDC + pl-4 (1rem) */
.industries__item{
border-left:3px solid #55B3E2;
padding-left:1rem;
}
/* Item title: text-[#143960] text-[1.125rem] lg:[1.3125rem] bold leading-[115%] tracking-[-0.42px] mb-1(0.25rem) */
.industries__h4{
color:#fff;
font-weight:700;
line-height:140%
letter-spacing:-0.42px;
margin:0 0 .25rem;
font-size:1.125rem;
}
@media (min-width:1024px){
.industries__h4{ font-size:1.3125rem; }
}
/* Item paragraph: text-[#010915] text-[0.9375rem] lg:[1rem] leading-[120%] tracking-[-0.16px] */
.industries__p{
color:#fff;
font-weight:400;
line-height:120%;
letter-spacing:-0.16px;
font-size:0.9375rem;
margin:0;
}
@media (min-width:1024px){
.industries__p{ font-size:1.1rem; }
}
/* ===== Industries top decoration (بديل Tailwind) ===== */
/* يعادل: relative sm:absolute top-0 sm:right-[5%] w-[6.5rem] h-[7rem]
bg-[#249EDC] rounded-b-[20px] z-10 flex justify-center */
.industries__topdec{
position:relative !important; /* base */
top:0;
width:6.5rem; /* 104px */
height:7rem; /* 112px */
background:#249EDC;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
z-index:10;
display:flex;
justify-content:center;
display: none;
}
@media (min-width:640px){ /* sm */
.industries__topdec{ position:absolute !important; right:5%; }
}
/* يعادل: w-[4.5rem] h-[4.5rem] bg-[#249EDC] rounded-b-[20px] -mt-[24px]
flex items-center justify-center relative top-[40%] */
.industries__topdec-inner{
width:4.5rem; /* 72px */
height:4.5rem; /* 72px */
background:#249EDC;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
margin-top:-24px; /* -mt-[24px] */
display:flex;
align-items:center;
justify-content:center;
position:relative;
top:40%;
}
.industries__topdec-inner img{
display:block;
width:72px;
height:72px;
}
/* ===== Deaf Accessibility Section ===== */
.deaf{
background:#FCFCFC;
padding-block:4rem; /* py-[4rem] */
}
@media (min-width:1024px){
.deaf{ padding-block:8rem; } /* lg:py-[8rem] */
}
/* flex-col-reverse lg:flex-row-reverse + align/justify + gaps */
.deaf__wrap{
display:flex;
flex-direction:column-reverse;
align-items:center;
justify-content:space-between;
gap:2.5rem; /* 40px */
max-width:90rem; /* 1440px */
margin-inline:auto;
}
@media (min-width:1024px){
.deaf__wrap{
flex-direction:row;
gap:5rem; /* 80px */
}
}
/* الأعمدة: w-full lg:w-1/2 */
.deaf__col-img,
.deaf__col-text{
width:100%;
}
@media (min-width:1024px){
.deaf__col-img,
.deaf__col-text{ width:50%; }
}
/* صورة: مركزية أفقياً */
.deaf__col-img{
display:flex;
justify-content:center;
}
/* تبديل صور الموبايل/التابلت-ويب */
.deaf__img-webtablet{ display:none; }
.deaf__img-mobile{ display:block; }
@media (min-width:640px){ /* sm */
.deaf__img-webtablet{ display:block; }
.deaf__img-mobile{ display:none; }
}
.deaf__img-webtablet img,
.deaf__img-mobile img{ display:block; height:auto; width: 300px; }
@media (min-width:769px){
.deaf__img-webtablet img,
.deaf__img-mobile img{ display:block; height:auto; width: 487px; }
}
/* h3 eyebrow: text-[#249EDC], 1.3125rem -> lg:1.6875rem, bold, leading 100%, tracking -0.553px, mb 1rem */
.deaf__eyebrow{
color:#1E7CAE;
font-size:1.3125rem;
font-weight:700;
line-height:100%;
letter-spacing:-0.553px;
margin:0 0 1rem;
}
@media (min-width:1024px){
.deaf__eyebrow{ font-size:1.6875rem; }
}
.deaf__eyebrow-accent{ color:#1E7CAE; }
/* h2: text-[#143960], 2.07375rem -> lg:2.986rem, bold, leading 115%, tracking -0.05975rem, mb 1rem */
.deaf__h2{
color:#143960;
font-size:2.07375rem;
font-weight:700;
line-height:140%
letter-spacing:-0.05975rem;
margin:0 0 1rem;
}
@media (min-width:1024px){
.deaf__h2{ font-size:2.986rem; }
}
/*
=> مخفي دائمًا */
.deaf__br{ display:none; }
/* paragraph: text-[#010915] text-[1rem] leading-[120%] tracking-[-0.16px] mb-[2rem] */
.deaf__p{
color:#010915;
font-size:1.1rem;
font-weight:400;
line-height:120%;
letter-spacing:-0.16px;
margin:0 0 2rem;
}
/* buttons container: flex-col sm:flex-row gap-[1rem] */
.deaf__actions{
display:flex;
flex-direction:column;
gap:1rem;
}
@media (min-width:640px){
.deaf__actions{ flex-direction:row; }
}
/* buttons: px-[2rem] py-[0.875rem] rounded-full text-[1rem] leading-[115%] tracking-[-0.32px] */
.deaf__btn{
display:inline-block;
padding:.875rem 2rem;
border-radius:9999px;
font-size:1.1rem;
font-weight:400;
line-height:140%
letter-spacing:-0.32px;
text-decoration:none;
text-align:center;
transition:opacity .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
cursor:pointer;
}
.deaf__btn--primary{
background:#143960;
color:#fff;
}
.deaf__btn--primary:hover{ background:#249EDC; }
.deaf__btn--outline{
background:transparent;
border:1px solid #143960;
color:#143960;
}
.deaf__btn--outline:hover{ background:#F9FAFB; } /* gray-50 */
/* ===== Hemam Compliance ===== */
.compliance{
background:#F4F5F6;
}
@media (min-width:1024px){
}
/* wrapper: flex-col → lg:flex-row, center/space-between, gap 3rem */
.compliance__wrap{
max-width:90rem; /* 1440px */
margin-inline:auto;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-between;
gap:3rem;
padding-block: 4rem; /* py-[4rem] */
/* gap-[3rem] */
}
@media (min-width:1024px){
.compliance__wrap{ flex-direction:row; padding-block: 8rem;}
}
/* columns: w-full → lg:w-1/2 */
.compliance__col-text,
.compliance__col-badges{ width:100%; }
@media (min-width:1024px){
.compliance__col-text,
.compliance__col-badges{ width:50%; }
}
/* h3 eyebrow: #249EDC, 1.3125rem → lg:1.728125rem, bold, leading 100%, tracking -0.553px, mb 1rem */
.compliance__eyebrow{
color:#1E7CAE;
font-size:1.3125rem;
font-weight:700;
line-height:100%;
letter-spacing:-0.553px;
margin:0 0 1rem;
}
@media (min-width:768px){
.compliance__eyebrow{ font-size:1.728125rem; }
}
/* h2: #143960, 2.07375rem (base/sm/md) → lg:2.986rem, bold, leading 115%, tracking -0.956px, mb 1rem */
.compliance__h2{
color:#143960;
font-size:32px;
font-weight:700;
line-height:140%
letter-spacing:-0.956px;
margin:0 0 1rem;
}
/*
*/
.compliance__br{ display:none; }
@media (min-width:640px){
.compliance__br{ display:block; }
.compliance__h2{
font-size:47.776px;
}
}
@media (min-width: 1001px) and (max-width: 1391px) {
.compliance__h2{ font-size:2.07375rem; }
}
/* paragraph: color #010915; text-[0.875rem] sm:[1rem]; leading-[1.5rem]; w-full → lg:w-[90%]; mb 2rem */
.compliance__p{
color:#010915;
font-weight:400;
letter-spacing:0; /* tracking غير محدد هنا للنص؛ tailwind يحدد -0.16px للنصوص الشبيهة، بس هذا السطر عندك بخصائص مختلفة */
font-size:0.875rem;
line-height:1.5rem; /* leading-[1.5rem] */
width:100%;
margin:0 0 2rem;
}
@media (min-width:640px){
.compliance__p{ font-size:1.1rem; }
}
@media (min-width:1024px){
.compliance__p{ width:90%; }
}
/* actions: flex-col → sm:flex-row, gap 1rem */
.compliance__actions{
display:flex;
flex-direction:column;
gap:1rem;
}
@media (min-width:640px){
.compliance__actions{ flex-direction:row; }
}
/* buttons */
.compliance__btn{
display:inline-block;
text-decoration:none;
text-align:center;
cursor:pointer;
border-radius:9999px;
transition:opacity .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
line-height:140%
letter-spacing:-0.32px;
font-weight:400;
padding:.875rem 2rem; /* px-[2rem] py-[0.875rem] */
font-size:1.1rem;
}
@media (min-width: 768px) and (max-width: 1099px) {
.compliance__btn{ flex : 1; }
}
.compliance__btn--primary{
background:#143960; color:#fff;
}
.compliance__btn--primary:hover{ background:#249EDC; }
/* الزر الثاني: base px 1.25rem + text 0.9375rem → lg px 2rem + text 1rem */
.compliance__btn--outline{
background:transparent;
border:1px solid #143960;
color:#143960;
padding:.875rem 1.25rem; /* base: px-[1.25rem] */
font-size:.9375rem; /* base: 15px */
}
.compliance__btn--outline:hover{ background:#F9FAFB; }
@media (min-width:1024px){
.compliance__btn--outline{
padding:.875rem 2rem; /* lg:px-[2rem] */
font-size:1.1rem; /* lg:text-[1rem] */
}
}
/* badges column: flex-col items-center → lg:items-start, gap 1.5rem */
.compliance__col-badges{
display:flex;
flex-direction:column;
align-items:center;
gap:1.5rem;
}
@media (min-width:1024px){
.compliance__col-badges{ align-items:flex-start; }
}
/* badges row: flex-wrap, justify-center → lg:justify-start, gap 1.1rem → lg 2rem */
.compliance__badges{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:1.1rem;
}
@media (min-width:1024px){
.compliance__badges{
justify-content:flex-start;
gap:2rem;
}
}
.compliance__badges img{ display:block; width:120px; height:120px; }
/* ===== Easy Steps (EN) ===== */
.esteps{
background: var(--easy-bg, #F9FAFB);
padding-block: 4rem; /* py-[4rem] */
}
@media (min-width:1024px){
.esteps{ padding-block: 8rem; } /* lg:py-[8rem] */
}
.esteps__wrap{
max-width:90rem; /* 1440px */
margin-inline:auto;
text-align:center;
}
/* Eyebrow: text-[#143960] lg:#249EDC, 1.3125rem, bold, leading 100%, tracking -0.42px, mb 1rem */
.esteps__eyebrow{
color:#1E7CAE;
font-size:1.3125rem;
font-weight:700;
line-height:100%;
letter-spacing:-0.42px;
margin:0 0 1rem;
}
/* H2: base #249EDC -> lg #143960, size 1.44rem -> lg 2.986rem, leading 115%, tracking -0.0288rem, mb 1rem */
.esteps__h2{
color:#143960;
font-weight:700;
line-height:140%
letter-spacing:-0.0288rem;
margin:0 0 1rem;
font-size:1.44rem;
}
@media (min-width:768px){
.esteps__h2{
/* color:#143960; */
font-size:2.986rem;
}
}
@media (min-width:1024px){
.esteps__h2{
width:70%;
margin: auto;
margin-bottom: 1.5rem;
}
}
/* Desc: text 0.875rem -> sm 0.9375rem; leading 120%; tracking -0.16px; w:100% -> lg 83%; mx-auto; mb 2.5rem -> lg 4rem */
.esteps__desc{
color:#010915;
font-weight:400;
font-size:0.875rem;
line-height:120%;
letter-spacing:-0.16px;
width:100%;
margin:0 auto 2.5rem;
}
@media (min-width:640px){
.esteps__desc{ font-size:0.9375rem; } /* sm */
}
@media (min-width:1024px){
.esteps__desc{
width:70%; /* lg:w-[83%] */
margin-bottom:4rem; /* lg:mb-[4rem] */
}
}
/* Grid: 1 -> md:2 -> lg:3; gap 1.5rem; mb 4rem */
.esteps__grid{
display:grid;
grid-template-columns:1fr;
gap:2rem; /* 24px */
margin-bottom:4rem;
}
@media (min-width:768px){
.esteps__grid{ grid-template-columns:repeat(2,1fr); } /* md */
}
@media (min-width:1024px){
.esteps__grid{ grid-template-columns:repeat(3,1fr); } /* lg */
}
/* Card: border #D9DADC; rounded-xl(.75rem); p 1.5rem; text-left; bg من var */
.esteps-card{
border:1px solid #D9DADC;
border-radius:0.75rem;
padding:1.5rem;
text-align:left;
width:100%;
background: var(--easy-card-bg, #F3F4F6);
}
/* Step label: #143960, semibold, 1.125rem, mb .25rem */
.esteps-card__step{
color:#1E7CAE;
font-size:1.125rem;
font-weight:600;
margin:0 0 .25rem;
}
/* Card h3: #249EDC, 1.25rem -> lg 1.44rem, bold, leading 115%, tracking -0.025rem, mb 1rem */
.esteps-card__title{
color:#143960;
font-weight:700;
line-height:140%
letter-spacing:-0.025rem;
margin:0 0 1rem;
font-size:1.25rem;
}
@media (min-width:1024px){
.esteps-card__title{ font-size:1.44rem; }
}
.esteps-card__text{
color:#171717;
font-weight:400;
line-height:120%;
letter-spacing:-0.0094rem;
font-size:0.9375rem;
width:100%;
margin:0;
}
@media (min-width:1024px){
.esteps-card__text{
font-size:1.1rem;
width:93%;
}
}
/* Button: bg #143960; white; px 2rem; py .875rem; rounded-full; text 1rem; w 100% -> md/lg auto */
.esteps__btn{
display:inline-block;
background:#143960;
color:#fff;
text-decoration:none;
font-size:1.1rem;
font-weight:400;
line-height:140%
letter-spacing:-0.32px;
padding:.875rem 2rem;
border-radius:9999px;
width:100%;
transition:opacity .2s ease;
}
.esteps__btn:hover{ background:#249EDC; }
@media (min-width:768px){
.esteps__btn{ width:auto; } /* md:w-fit */
}
/* ===== Legacy of Success ===== */
.legacy{
background:#F4F5F6;
padding-block:4rem; /* py-[4rem] */
}
@media (min-width:1024px){
.legacy{ padding-block:8rem; } /* lg:py-[8rem] */
}
.legacy__wrap{
max-width:90rem; /* 1440px */
margin-inline:auto;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
gap:1.5rem; /* gap-[1.5rem] */
}
/* h3 hidden lg:block */
.legacy__eyebrow{
display:none;
color:#1E7CAE;
font-size:1.3125rem;
font-weight:700;
line-height:100%;
letter-spacing:-0.42px;
margin:0;
}
@media (min-width:1024px){
.legacy__eyebrow{ display:block; }
}
.legacy__h2{
color:#143960; /* base & sm */
font-size:2.0625rem; /* text-[2.0625rem] */
font-weight:700;
line-height:140%
letter-spacing:-0.05975rem; /* -0.05975rem */
margin:0;
}
@media (min-width:640px){
.legacy__h2{ font-size:2.986rem; } /* sm:text-[2.986rem] */
}
@media (min-width:1024px){
.legacy__h2{ color:#143960; width:70%; margin: auto;
} /* lg:text-[#143960] */
}
/* lead paragraph */
.legacy__lead{
color:#171717;
font-weight:400;
line-height:120%;
letter-spacing:-0.0106rem;
font-size:0.9375rem;
margin:0;
}
@media (min-width:640px){
.legacy__lead{ font-size:1.1rem; }
}
/* Cards container: mt[2rem] -> lg[4rem]; flex-col -> lg:flex-row; items-stretch; gap 2rem -> lg 3rem */
.legacy__cards{
/* margin-top:2rem; */
display:flex;
flex-direction:column;
gap:2rem;
width:100%;
}
@media (min-width:1024px){
.legacy__cards{
margin-top:4rem;
flex-direction:row;
justify-content:space-between;
align-items:stretch;
gap:3rem;
}
}
/* Middle stacked column: flex-1, column, gap 2rem */
.legacy__col-stack{
display:flex;
flex-direction:column;
gap:2rem;
flex:1 1 0%;
}
/* Common card */
.legacy-card{
background:#FCFCFC;
border:1px solid #D9DADC;
border-radius:0.75rem; /* rounded-xl */
padding:1.5rem;
text-align:left;
}
.legacy-card--stretch{
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:flex-start;
flex:1 1 0%;
}
/* Small kicker (p) in side cards: text-[#143960] bold leading[115%] tracking[-0.461px] text size 1.3125 -> lg 1.44 */
.legacy-card__kicker{
color:#143960;
font-weight:700;
line-height:140%
letter-spacing:-0.461px;
font-size:1.3125rem;
margin:0;
}
@media (min-width:1024px){
.legacy-card__kicker{ font-size:1.44rem; }
}
/* Headline (h3): #249EDC bold leading[115%] tracking[-0.876px]; size 1.7rem -> md 2.488rem; mb 2rem */
.legacy-card__headline{
color:#249EDC;
font-weight:700;
line-height:140%
letter-spacing:-0.876px;
font-size:1.7rem;
margin:0 0 2rem;
}
@media (min-width:768px){
.legacy-card__headline{ font-size:2.488rem; }
}
/* Chart image centered horizontally */
.legacy-card__chart{
display:block;
margin:0 auto 2rem; /* معادل left-1/2 -translate-x-1/2 */
width:225px;
height:226px;
}
/* Text under chart: #010915 0.9375 -> lg 1rem; leading[120%] tracking[-0.16px]; w:100% -> lg:93% */
.legacy-card__text{
color:#010915;
font-weight:400;
line-height:120%;
letter-spacing:-0.16px;
font-size:0.9375rem;
width:100%;
margin:0;
}
@media (min-width:1024px){
.legacy-card__text{
font-size:1.1rem;
width:93%;
}
}
/* Middle cards: big numbers */
.legacy-card__big{
color:#249EDC;
font-weight:700;
line-height:140%
letter-spacing:-0.876px;
font-size:1.6875rem; /* base */
margin:0 0 .5rem;
}
@media (min-width:1024px){
.legacy-card__big{ font-size:2.488rem; }/* lg */
}
/* Middle card subtitle */
.legacy-card__sub{
color:#143960;
font-weight:700;
line-height:140%
letter-spacing:-0.461px;
font-size:1.44rem;
margin:0 0 .5rem;
}
/* md:mb-[4.3125rem] lg:mb-[2rem] لعنوان الوسط */
@media (min-width:768px){
.legacy-card__sub{ margin-bottom:4.3125rem; }
}
@media (min-width:1024px){
.legacy-card__sub{ margin-bottom:2rem; }
}
/* Middle card description: #000 0.9375 -> lg 1rem; leading-relaxed (~1.625) */
.legacy-card__desc{
color:#000;
font-weight:400;
line-height:1.625; /* leading-relaxed */
font-size:0.9375rem;
margin:0;
}
@media (min-width:1024px){
.legacy-card__desc{ font-size:1.1rem; }
}
/* ===== Saudi Web Accessibility Section ===== */
.saudi{
background:#249EDC;
padding-block:6rem; /* py-[6rem] */
}
@media (min-width:1024px){
.saudi{ padding-block:3.75rem; } /* lg:py-[3.75rem] */
}
/* الكارد الأبيض الداخلي */
.saudi__card{
background:#FCFCFC;
border-radius:20px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-between;
gap:2.5rem; /* gap-[2.5rem] */
overflow:hidden;
}
@media (min-width:1024px){
.saudi__card{
flex-direction:row; /* lg:flex-row */
gap:1.5rem; /* lg:gap-[1.5rem] */
}
}
/* عمود النص */
.saudi__text{
flex:1 1 0%;
width:100%;
padding:3rem 1rem; /* px-[1rem] py-[3rem] */
}
@media (min-width:1024px){
.saudi__text{
width:50%; /* lg:w-[50%] */
padding:3rem 2.5rem; /* lg:px-[2.5rem] */
}
}
/* Eyebrow: base #143960 → lg #249EDC; 1rem → md/lg 1.3125rem; bold; leading 100%; tracking -0.42px; mb .5rem */
.saudi__eyebrow{
color:#143960;
font-weight:700;
line-height:100%;
letter-spacing:-0.42px;
margin:0 0 .5rem;
font-size:1.1rem;
}
@media (min-width:768px){
.saudi__eyebrow{ font-size:1.3125rem; } /* md */
}
@media (min-width:1024px){
.saudi__eyebrow{ color:#249EDC; } /* lg */
}
/* Title: base #249EDC → lg #143960; size 1.75rem → md/lg 2.986rem; leading 115%; tracking -0.956px; mb 2rem */
.saudi__title{
color:#249EDC;
font-weight:700;
line-height:140%
letter-spacing:-0.956px;
margin:0 0 2rem;
font-size:1.75rem; /* base */
width:100%;
}
@media (min-width:768px){
.saudi__title{ font-size:2.986rem; } /* md */
}
@media (min-width:1024px){
.saudi__title{ color:#143960; } /* lg */
}
/* Description: #010915; 0.9375rem → md/lg 1rem; leading 24px؛ w 100% → md/lg 90%; mb 2rem */
.saudi__desc{
color:#010915;
font-weight:400;
font-size:.9375rem;
line-height:24px; /* leading-[24px] */
width:100%;
margin:0 0 2rem;
}
@media (min-width:768px){
.saudi__desc{
font-size:1.1rem; /* md */
width:90%;
}
}
/* أزرار: flex-wrap gap-[.75rem] */
.saudi__actions{
display:flex;
flex-wrap:wrap;
gap:.75rem; /* 12px */
}
/* زر أساسي */
.saudi__btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.5rem;
border-radius:9999px;
text-decoration:none;
cursor:pointer;
transition:opacity .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
font-size:1.1rem;
font-weight:400;
line-height:140%
letter-spacing:-0.32px;
padding:.875rem 2rem; /* px-[2rem] py-[.875rem] */
}
.saudi__btn--primary{
background:#143960;
color:#fff;
width:100%; /* w-full */
}
.saudi__btn--primary:hover{ opacity:.9; }
@media (min-width:768px){
.saudi__btn--primary{ flex:1 1 0%; } /* md:flex-1 */
}
@media (min-width:1024px){
.saudi__btn--primary{
flex:0 0 auto; /* lg:flex-none */
width:auto; /* lg:w-fit */
}
}
/* زر إطار */
.saudi__btn--outline{
background:transparent;
border:1px solid #143960;
color:#143960;
padding:.875rem .625rem; /* base: px-[0.625rem] */
width:100%;
display:flex;
align-items:center;
justify-content:center;
}
.saudi__btn--outline:hover{ background:#F9FAFB; } /* gray-50 */
@media (min-width:768px){
.saudi__btn--outline{ flex:1 1 0%; } /* md:flex-1 */
}
@media (min-width:1024px){
.saudi__btn--outline{
width:auto; /* lg:w-fit */
flex:0 0 auto; /* lg:flex-none */
padding:.875rem 2rem; /* lg:px-[2rem] */
}
}
/* إظهار الأيقونة من sm+ فقط */
.saudi__btn-icon{ display:none; }
@media (min-width:640px){
.saudi__btn-icon{ display:inline-block; }
}
/* عمود الخريطة */
.saudi__map{
position:relative;
width:100%;
display:flex;
justify-content:center;
@media (max-width: 1023px) {
background : #F4F5F6;
padding-block : 2rem;
}
}
@media (min-width:1024px){
.saudi__map{ width:45%; } /* lg:w-[45%] */
}
/* الخلفية (absolute) أمامها الخريطة (relative) */
.saudi__map-bg{
position:absolute;
z-index:10;
inset:0; /* يملأ الحاوية ثم نعتمد على object-fit */
right:0; top:32%;
transform:translateY(-50%);
object-fit:contain;
pointer-events:none; user-select:none;
@media (max-width: 1023px) {
width:340px; height:311px;
display: none;
}
}
.saudi__map-fg{
position:relative;
z-index:20;
width:340px; height:311px;
object-fit:contain;
display:block;
@media (max-width: 768px) {
width:240px;
}
}
/* ===== Stay Connected ===== */
.stay{
background: var(--stay-bg, #F8FBFD);
padding-block: 4rem; /* py-[4rem] */
}
@media (min-width:1024px){
.stay{ padding-block: 8rem; } /* lg:py-[8rem] */
}
.stay__wrap{
max-width:90rem; /* 1440px */
margin-inline:auto;
display:flex;
flex-direction:column;
justify-content:center;
align-items:stretch; /* items-stretch */
gap:1.5rem; /* gap-[1.5rem] */
}
@media (min-width:1024px){
.stay__wrap{ flex-direction:row; } /* lg:flex-row */
}
/* Card */
.stay-card{
background:#fff;
border:1px solid rgba(210,209,212,.5); /* #D2D1D4/50 */
border-radius:1.25rem; /* 20px */
padding:2rem; /* p-[2rem] */
padding-left:1rem; /* px-[1rem] */
padding-right:1rem;
flex:1 1 0%;
}
@media (min-width:1024px){
.stay-card{ padding-left:2rem; padding-right:2rem; } /* lg:px-[2rem] */
}
/* Left heading: 1.5rem -> lg 2.07375rem; bold; leading 115%; tracking -0.03rem */
.stay__h3-left{
color:#143960;
font-weight:700;
line-height:140%
letter-spacing:-0.03rem;
font-size:1.5rem;
margin:0;
}
@media (min-width:1024px){
.stay__h3-left{ font-size:2.07375rem; }
}
/* Left paragraph: 0.9375rem -> sm 1rem; leading 115%; tracking -0.0106rem; mt 1rem; width 100% -> sm 90% */
.stay__p-left{
color:#010915;
font-weight:400;
line-height:140%
letter-spacing:-0.0106rem;
font-size:0.9375rem;
margin-top:1rem;
width:100%;
}
@media (min-width:640px){
.stay__p-left{ font-size:1.1rem; width:90%; }
}
/* Form row: mt 2rem; column -> sm:row; gap 1rem; items-stretch -> sm:items-center */
.stay__formrow{
margin-top:2rem;
display:flex;
flex-direction:column;
gap:1rem;
align-items:stretch;
}
@media (min-width:640px){
.stay__formrow{
flex-direction:row;
align-items:center;
}
}
/* Input: w-full -> sm 20.5625rem; border #143960; rounded-full; px 1rem; py 1rem; text 0.9375rem; color/placeholder #143960; outline-none */
.stay__input{
width:100%;
border:1px solid #143960;
border-radius:9999px;
padding:1rem 1rem;
font-size:0.9375rem;
color:#143960;
outline:none;
}
.stay__input::placeholder{ color:#143960; opacity:1; }
/* بعض المتصفحات */
.stay__input::-ms-input-placeholder{ color:#143960; }
.stay__input:-ms-input-placeholder{ color:#143960; }
@media (min-width:640px){
.stay__input{ width:20.5625rem; } /* sm:w-[20.5625rem] */
}
/* Subscribe button: bg #143960; white; rounded-full; px 2rem; py .875rem; text 1rem; font-medium */
.stay__btn{
background:#143960;
color:#fff;
border:none;
border-radius:9999px;
padding:.875rem 2rem;
font-size:1.1rem;
font-weight:500; /* font-medium */
cursor:pointer;
transition:opacity .2s ease;
}
.stay__btn:hover{ opacity:.9; }
/* Right heading: 1.25rem -> sm 2.07375rem; bold; leading 115%; tracking -0.03rem */
.stay__h3-right{
color:#143960;
font-weight:700;
line-height:140%
letter-spacing:-0.03rem;
font-size:1.25rem;
margin:0;
}
@media (min-width:640px){
.stay__h3-right{ font-size:2.07375rem; }
}
/* Right paragraph: مثل اليسار */
.stay__p-right{
color:#010915;
font-weight:400;
line-height:140%
letter-spacing:-0.0106rem;
font-size:0.9375rem;
margin-top:1rem;
width:100%;
}
@media (min-width:640px){
.stay__p-right{ font-size:1.1rem; width:90%; }
}
/* Social icons row: mt 2.125rem; flex; items-center; gap 1rem */
.stay__social{
margin-top:2.125rem;
display:flex;
align-items:center;
gap:1rem;
}
.stay__social img{ display:block; width:48px; height:48px; }
/* ===== Footer (EN) ===== */
.footer{
background:#102F4E;
color:#F4F5F6;
font-size:0.875rem; /* text-sm على الجذر */
}
/* Top section: pt-[4rem] pb-[2.5rem]; flex-col -> lg:row; gap 2.5rem; justify-between */
.footer__top{
padding-top:4rem;
padding-bottom:0;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:2.5rem; /* 40px */
}
@media (min-width:1024px){
.footer__top{ flex-direction:row; }
}
/* Left columns: grid 2 -> 4; gap 2rem; flex-1 */
.footer__cols{
display:grid;
grid-template-columns:repeat(2, minmax(0,1fr));
gap:2rem;
flex:1 1 0%;
}
@media (min-width:768px){
.footer__cols{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}
/* Headings: 1.125rem; bold; leading 100%; tracking -0.36px; mb .75rem */
.footer__head{
color:#55B3E2;
font-size:1.125rem;
font-weight:700;
line-height:100%;
letter-spacing:-0.36px;
margin:0 0 .75rem;
}
/* Lists: color #F4F5F6/90; text 0.90625rem; leading 38px; space-y-2 */
.footer__list{
list-style:none;
padding:0; margin:0;
color:rgba(244,245,246,0.9);
font-size:0.90625rem;
}
.footer__list li{
line-height:38px;
}
.footer__list li + li{ margin-top:.5rem; } /* space-y-2 */
.footer__list a{
color:#D9DADC; text-decoration:none;
}
.footer__list a:hover{ text-decoration:underline; }
/* Newsletter card (right): w-full; lg:max-w-[369px]; bg #12365B; p 2rem; rounded-xl; column; gap 1rem */
.footer__news{
width:100%;
max-width:100%;
background:#102F4E;
border-radius:12px;
padding:0;
display:flex;
flex-direction:column;
gap:1rem;
flex-shrink:0;
}
@media (min-width:1024px){
.footer__news{ max-width:369px; }
}
/* Title inside news: 1.44rem; bold; leading 115%; tracking -0.461px */
.footer__news-title{
color: #55B3E2;
font-size: 21px;
font-weight: 700;
line-height: 100%;
letter-spacing: -0.42px;
margin: 0;
}
/* Text inside news: #F4F5F6/90; 0.9375rem; leading 125%; tracking -0.15px */
.footer__news-text{
color:#D9DADC;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 125%;
letter-spacing: -0.15px;
margin: 0;
}
/* Input: w-full; px 1rem; py .875rem; text 1rem; text color #F4F5F6; bg transparent; border #FCFCFC; rounded-full; placeholder #FCFCFC */
.footer__input{
width:100%;
padding:.875rem 1rem;
font-size:1.1rem;
line-height:140%
letter-spacing:-0.32px;
color:#F4F5F6;
background:transparent;
border:1px solid #FCFCFC; /* إصلاح لخطأ Tailwind: كانت border[#FCFCFC] */
border-radius:9999px;
outline:none;
}
.footer__input::placeholder{ color:#FCFCFC; opacity:1; }
/* Button: bg white; text #143960; rounded-full; px 2rem; py .875rem; text 1rem; font-normal; hover opacity */
.footer__btn{
background:#fff;
color:#143960;
border:none;
border-radius:9999px;
padding:.875rem 2rem;
font-size:1.1rem;
font-weight:400;
line-height:140%
letter-spacing:-0.32px;
cursor:pointer;
transition:opacity .2s ease;
}
.footer__btn:hover{ opacity:.9; }
/* Social row: flex; items-center; justify-between; pt 1rem; icons 40 */
.footer__social{
display:flex;
align-items:center;
justify-content:space-between;
padding-bottom:1rem;
flex-wrap: wrap;
@media (max-width:1024px){
justify-content:flex-start;
gap: 2rem;
}
@media (max-width:400px){
gap: 1rem;
}
}
.footer__social img{ width:40px; height:40px; display:block;
}
/* Bottom bar */
.footbar{
background:#102F4E;
color:#F4F5F6;
padding-block:2rem; /* py-[2rem] */
padding-top: 40px;
font-size:0.875rem;
}
.footbar__wrap{
max-width:90rem; margin-inline:auto;
display:flex; flex-direction:column-reverse; justify-content:space-between; align-items:center; gap:1rem;
border-top: 1px solid var(--Neutral-UI-WHITE-300, #D9DADC);
padding-top: 1rem;
@media (max-width:1024px){
gap:2rem;
}
}
@media (min-width:1024px){
.footbar__wrap{ flex-direction:row; gap:2rem; }
}
/* Left: logo + links (links hidden < lg) */
.footbar__left{
display:flex; flex-direction:column; align-items:center; gap:1rem;
@media (max-width:1024px){
gap:2rem;
}
}
@media (min-width:1024px){
.footbar__left{ flex-direction:row; gap:2rem; }
}
.footbar__links{
display:flex; gap:2rem; flex-wrap:wrap; align-items:center;
}
@media (min-width:1024px){
.footbar__links{ display:flex; }
}
.footbar__links a{
color:#D9DADC; text-decoration:none;
}
.footbar__links a:hover{ text-decoration:underline; }
/* Right: copyright (hidden < lg) */
.footbar__copy{
display:block; text-align:right; margin:0; color:#D9DADC;
@media (max-width:1024px){
padding-top: 5px;
}
}
@media (min-width:1024px){
.footbar__copy{ display:block; }
}
/* يمنع سكرول الصفحة وقت فتح الميجا */
.no-scroll { overflow: hidden; }
/* الميجا مخفية افتراضيًا */
.mega { display: none; }
/* لما تنفتح عبر data-open="true" */
.mega[data-open="true"] { display: block; }
/* خلفية التعتيم */
.mega__backdrop{
position: fixed; inset: 0;
background: rgba(0,0,0,.4);
z-index: 40;
}
/* لوحة الميجا (مكانها يتضبط بالـJS) */
.mega__panel{
position: absolute; left: 0; width: 100%;
background: #FCFCFC;
border-top: 1px solid #D1D5DB;
box-shadow: 0 10px 30px rgba(0,0,0,.12);
z-index: 50;
}
/* جميع الجروبات مخفية… */
.mega__group{ display: none; }
/* …إلا النشطة */
.mega__group.is-active{ display: flex; }
/* --- MegaMenu hard state --- */
.no-scroll{ overflow:hidden !important; }
.mega{ display:none !important; visibility:hidden; opacity:0; }
.mega[data-open="true"]{
display:flex !important;
visibility:visible !important;
opacity:1 !important;
}
.mega__group{ display:none !important; }
.mega__group.is-active{ display:flex !important; }
/* تأكد من الستورجة والترتيب */
.mega__backdrop{
position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:9998;
}
.mega__panel{
position:absolute; left:0; width:100%;
background:#FCFCFC; border-top:1px solid #D1D5DB; box-shadow:0 10px 30px rgba(0,0,0,.12);
z-index:9999;
}
.lang-switcher .lang-btn {
padding: 8px 16px;
border: 1px solid #249EDC;
border-radius: 6px;
color: #249EDC;
}
/* ====== MEGA tiles (Products) ====== */
.mega--tiles .mega__panel { padding-bottom: 24px; }
.mega__grid--tiles {
display: grid;
grid-template-columns: repeat(3, minmax(220px, 1fr));
gap: 32px 80px;
}
.mega-tile {
display: flex;
align-items: flex-start;
gap: 12px;
text-decoration: none;
}
.mega-tile__icon {
width: 28px; height: 28px; flex: 0 0 28px;
display: inline-flex; align-items: center; justify-content: center;
}
.mega-tile__icon img { width: 28px; height: 28px; display: block; }
.mega-tile__dot { width: 10px; height: 10px; border-radius: 50%; background: #249EDC; display: inline-block; }
.mega-tile__txt { line-height: 1.2; }
.mega-tile__title { display:block; color:#143960; font-weight:700; font-size:.95rem; margin-bottom:2px; }
.mega-tile__sub { display:block; color:#35526b; font-size:.875rem; }
.mega-tile:hover .mega-tile__title { color:#249EDC; }
@media (max-width:1200px){ .mega__grid--tiles{ grid-template-columns:repeat(3,minmax(220px,1fr)); } }
@media (max-width:900px){ .mega__grid--tiles{ grid-template-columns:1fr; } }
/* RTL تحسين */
html[dir="rtl"] .mega-tile{ flex-direction:row-reverse; text-align:right; }
.mega__grid--tiles{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr)); gap: 32px 80px;}
@media(max-width:1024px){.mega__grid--tiles{grid-template-columns:repeat(2,minmax(200px,1fr));gap:18px 32px}}
@media(max-width:640px){
.mega__grid--tiles{grid-template-columns:1fr ; gap:32px}
.mega__grid {
grid-template-rows: repeat(8,min-content);
}
}
.mega__tile{display:flex;align-items:flex-start;gap:12px;text-decoration:none;color:#15365C}
.mega__tile:hover .mega__label{color:#249EDC}
.mega__tile-icon{width:28px;height:28px;flex:0 0 28px}
.mega__tile-dot{width:8px;height:8px;border-radius:50%;background:#249EDC;margin-top:8px}
.mega__tile-text{line-height:1.25}
.mega__label{font-weight:700;font-size:16px}
.mega__sub{font-size:15px;color : #143960;}
.mnav{position:fixed; inset:0; transform:translateX(100%); transition:transform .25s ease; background:#15365C; z-index:9999;}
.mnav.is-open{transform:translateX(0); display: initial;
width: 100%;
top: 46px;
height: fit-content;
}
.mdrop{position:fixed; inset:0; display:none; z-index:10000; background:rgba(0,0,0,.35);}
.mdrop.is-open{display:block;}
.mdrop__panel{position:absolute; inset:0; background:#fff; padding:16px;}
.mdrop__back{position:absolute; top:12px; left:12px; padding:8px 12px; border:1px solid #ccc; border-radius:999px; background:#fff; cursor:pointer;}
.no-scroll{overflow:hidden;}
/* #burgerOpen { position:relative; z-index:10010; pointer-events:auto; } */
/***********************
* Mobile Dropdown Modal
* (opens under the same header)
***********************/
/* الحاوية العامة للمودال */
.mdrop{
position: fixed;
inset: 0;
z-index: 1000;
display: none; /* مخفي افتراضيًا */
}
.mdrop[data-open="true"]{ display: block; }
/* خلفية شفافة */
.mdrop::before{
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,.40);
}
/* لوحة المحتوى – تتثبت تحت الهيدر */
.mdrop__panel{
position: absolute;
left: 0; right: 0;
top: 72px; /* JS يضبطها ديناميكياً، هذا احتياطي */
background: #fff;
border-radius: 0 0 20px 20px;
box-shadow: 0 20px 60px rgba(0,0,0,.18);
overflow: auto;
padding: 16px 16px 24px;
}
/* شاشة رئيسية */
.mdrop__main[hidden]{ display:none !important; }
.mdrop__submenu[hidden]{ display:none !important; }
.mdrop__menu{
list-style: none;
margin: 0 0 16px 0;
padding: 0;
}
/* صفوف القائمة الرئيسية (Products / Pricing / Company / Resources) */
.mdrop__row{
-webkit-appearance: none;
appearance: none;
border: 0;
background: transparent;
width: 100%;
text-align: start;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 4px;
border-bottom: 1px solid #D9DADC;
font-size: 16px;
line-height: 1.2;
color: #143960;
cursor: pointer;
}
.mdrop__row:hover{ color:#0E2B48; }
/* رمز السهم الصغير */
.mdrop__chev{
font-size: 20px;
line-height: 1;
opacity: .6;
}
[dir="rtl"] .mdrop__chev{ transform: scaleX(-1); }
/* أزرار CTA */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:9999px; font-size:1.1rem; line-height:140% padding:.875rem 2rem; cursor:pointer; text-decoration:none; transition:opacity .2s ease, background .2s ease, border-color .2s ease, color .2s ease; }
.btn--block{ width:100%; }
.btn--primary{ background:#143960; color:#fff; border:1px solid #143960; }
.btn--primary:hover{ opacity:.9; }
.btn--outline{ background:transparent; color:#143960; border:1px solid #143960; }
.btn--outline:hover{ background:#F5F7FA; }
/* مكان الأزرار */
.mdrop__ctas{ display:flex; flex-direction:column; gap:12px; margin: 16px 0 8px; }
/* رابط تبديل اللغة */
.mdrop__lang{
display: inline-block;
margin-top: 8px;
color:#143960;
text-decoration: none;
font-weight: 500;
}
.mdrop__lang:hover{ text-decoration: underline; }
/* Product Hero */
.phero {
background: #FCFCFC;
padding: 4rem 1rem;
padding-right: 0px !important;
padding-left: 0px !important;
}
@media (min-width: 768px){ .phero{ padding:4rem 2rem; } }
@media (min-width: 1024px){ .phero{ padding:4rem 3.75rem; } }
.phero__wrap {
display: flex;
gap: 0;
align-items: center;
flex-direction: column; /* mobile */
}
@media (min-width: 1024px){
.phero__wrap { flex-direction: row; }
}
/* RTL helper (يعكس ترتيب الصورة والنص) */
.phero__wrap--rtl {
direction: rtl;
}
@media (min-width: 1024px){
.phero__wrap--rtl { flex-direction: row; }
}
.phero__left {
flex: 1 1 auto;
text-align: left;
margin-bottom: 2rem;
}
.phero__left--rtl { text-align: right; }
@media (min-width: 768px){ .phero__left{ margin-bottom:2rem; } }
@media (min-width: 1024px){ .phero__left{ margin-bottom:0; } }
.phero__eyebrow{
font-weight: 700;
color: #374151; /* gray-700 */
line-height: 100%;
letter-spacing: -0.553px;
font-size: 1rem;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
@media (min-width: 1024px){
.phero__eyebrow{ font-size: 1.6875rem; }
}
.phero__title{
color: #249EDC;
font-weight: 700;
line-height: 115%;
margin-top: 1rem !important;
margin-bottom: 1rem;
letter-spacing: -1.144px;
font-size: 1.75rem;
}
@media (min-width: 1024px){
.phero__title{ font-size: 3.575rem; }
}
.phero__title--rtl{ text-align:right; }
.phero__desc{
font-size: 1rem; /* !text-[1rem] */
line-height: 120%;
letter-spacing: -0.16px;
margin-bottom: 2rem;
max-width: 88%;
color: #010915;
font-family: Roboto;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 120%;
}
@media (max-width: 1023.98px){
.phero__desc{ max-width: 100%; }
}
.phero__desc--rtl{ text-align:right; }
.phero__actions{
display:flex;
gap:1rem;
justify-content: flex-start;
}
@media (min-width: 1024px){
.phero__actions{ justify-content: flex-start; }
}
.phero__actions--rtl{
justify-content: center;
}
@media (min-width: 1024px){
.phero__actions--rtl{ justify-content: flex-start; }
}
.phero__right{
display:flex; align-items:center; justify-content:flex-end;
width: auto;
width: 493px;
height: 415px;
}
@media (max-width:640px){
.phero__right{ width:100% !important; height: 100% !important; }
.phero__right img{ width:100% !important; height: 100% !important; }
}
.phero__right--rtl{
justify-content:flex-start;
}
.phero__img{
max-width: 25rem;
height:auto; object-fit: contain;
width: 493px;
height: 415px;
}
@media (min-width: 640px){
.phero__img{ max-width: 35.9375rem; }
}
@media (min-width: 1024px){
.phero__img{ }
/* max-width: 100%; */
}
/* أزرار عامة مستخدمة هنا */
.btn{
display:inline-flex; align-items:center; justify-content:center;
border-radius: 999px;
padding: .875rem 2rem;
font-size: 1rem; line-height:140%
letter-spacing: -0.32px;
text-decoration: none;
transition: opacity .2s ease;
}
.btn--primary{
background:#15365C; color:#fff;
}
.btn--primary:hover{ opacity:.9; }
.btn--outline{
border:1px solid #15365C; color:#15365C; background:transparent;
}
/* ============== Product: Accessibility Suite ============== */
.psuite{ background:var(--psuite-bg,#FCFCFC); padding:3.75rem 1rem; padding-right: 0px !important;
padding-left: 0px !important; }
@media (min-width:768px){ .psuite{ padding:3.75rem 2rem; } }
@media (min-width:1024px){ .psuite{ padding:8rem 3.75rem; } }
.psuite__wrap{ max-width:90rem; margin:0 auto; text-align:center; }
.psuite__eyebrow{
color:#249EDC; font-weight:700; font-size:1.3125rem;
line-height:100%; letter-spacing:-.42px; margin-bottom:1rem;
}
.psuite__title{
color:#143960; font-weight:700; line-height:140%
letter-spacing:-.956px; font-size:2.07375rem; margin-bottom:1rem;
margin-top: 0 !important;
}
@media (min-width:1024px){ .psuite__title{ font-size:2.986rem; } }
.psuite__desc{
color:#010915; font-size:1.1rem; line-height:120%; letter-spacing:-.16px;
margin:0 auto 4rem; max-width:80%;
}
@media (max-width:1023.98px){ .psuite__desc{ max-width:100%; } }
/* Grid */
.psuite__grid{
display:grid; gap:2rem;
grid-template-columns:1fr;
margin-bottom:4rem;
}
@media (min-width:768px){ .psuite__grid{ grid-template-columns:repeat(2,1fr); gap:3.75rem; } }
@media (min-width:1024px){ .psuite__grid{ grid-template-columns:repeat(3,1fr); } }
/* Card */
.psuite-card{
background:#F3F4F6; border:1px solid #D9DADC; border-radius:12px;
padding:2rem 2rem 3rem; display:flex; flex-direction:column; align-items:center; text-align:center;
}
.psuite-card__icon{ margin-bottom:.625rem; }
.psuite-card__eyebrow{ color:#143960; font-size:1.1rem; font-weight:600; line-height:140% letter-spacing:-.32px; margin:.25rem 0 0; }
.psuite-card__h3{ color:#143960; font-weight:700; line-height:100%; font-size:1.728rem; margin:1rem 0; }
.psuite-card__accent{ color:#249EDC; }
.psuite-card__text{ color:#010915; font-size:1.1rem; line-height:120%; letter-spacing:-.16px; margin:0 0 2rem; }
/* CTA box */
.psuite-cta{
background:#F4F5F6; border:1px solid #D9DADC; border-radius:12px;
padding:3rem 2rem; display:flex; gap:1.5rem; flex-direction:column; text-align:center; align-items: center;
}
@media (min-width:1024px){
.psuite-cta{ flex-direction:row; align-items:center; justify-content:space-between; gap:2rem; text-align:left; }
[dir="rtl"] .psuite-cta{ text-align:right; }
}
.psuite-cta__text{ flex:1; }
.psuite-cta__h3{
color:#143960; font-weight:700; line-height:100%;
font-size:1.5rem; letter-spacing:-.553px; margin:0 0 1rem;
}
@media (min-width:768px){ .psuite-cta__h3{ font-size:1.728125rem; } }
.psuite-cta__p{ color:#010915; font-size:1.1rem; line-height:120%; letter-spacing:-.01rem; }
@media (max-width:1023.98px){ .psuite-cta__p{ max-width:100%; } }
.psuite-cta__actions{width: fit-content; }
@media (min-width:640px){ .psuite-cta__actions{ width:100%; } }
@media (min-width:1024px){ .psuite-cta__actions{ width:fit-content; } }
/* Buttons (reuse if already defined) */
.btn{
display:inline-flex; align-items:center; justify-content:center;
border-radius:999px; padding:.875rem 2rem; font-size:1.1rem; line-height:140%
letter-spacing:-.32px; text-decoration:none; transition:opacity .2s ease; cursor:pointer;
}
.btn--primary{ background:#15365C; color:#fff; }
.btn--primary:hover{ opacity:.9; }
.btn--block{ display:inline-flex; width:100%; }
.btn--block-sm{ width:100%; }
@media (min-width:768px){ .btn--block-sm{ width:auto; } }
/* =====================================================
Tokens + Fallbacks
===================================================== */
:root{
--c-blue:#249EDC;
--c-navy:#143960;
--c-text:#010915;
--c-border:#D9DADC;
--c-sec:#F4F5F6;
--radius-lg:12px; /* 0.75rem */
--shadow-sm:0 1px 2px rgba(0,0,0,.04);
}
/* =====================================================
1) FEATURES (pfeatures)
===================================================== */
.pfeatures{
background:var(--pf-bg, var(--c-sec));
padding:3.75rem 1rem;
}
.pfeatures .container{max-width:90rem}
.pfeatures__grid{
display:grid;
grid-template-columns:1fr;
gap:3rem;
}
.pfeatures__card{
background:#fff;
border:1px solid var(--c-border);
border-radius:var(--radius-lg);
padding:2rem;
display:flex;
flex-direction:column;
align-items:flex-start;
text-align:left;
box-shadow:var(--shadow-sm);
}
.pfeatures__icon{
width:40px;height:40px;flex:0 0 40px;margin:0 0 1rem;
}
.pfeatures__h3{
color:var(--c-navy);
font-weight:700;
font-size:1.44rem;
line-height:1.15;
letter-spacing:-.0288rem;
margin:0 0 1rem;
}
.pfeatures__p{
color:var(--c-text);
font-size:1.1rem;
line-height:1.2;
letter-spacing:-.01rem;
margin:0 0 2rem;
}
/* زر داخل هذا القسم فقط (لا يمس أزرار الموقع الأخرى) */
.pfeatures .btn{
display:inline-block;
font-size:1.1rem;
line-height:1.15;
letter-spacing:-.32px;
padding:.875rem 2rem;
border-radius:999px;
transition:.2s ease;
cursor:pointer;
}
.pfeatures .btn--outline{
color:var(--c-navy);
background:#fff;
border:1px solid var(--c-navy);
}
.pfeatures .btn--outline:hover{background:#f3f5f7}
/* RTL adjustments */
[dir="rtl"] .pfeatures__card{align-items:flex-end;text-align:right}
/* =====================================================
2) PLANS (pplans)
===================================================== */
.pplans{
background:#FAFAFA;
padding:8rem 1rem;
padding-left: 0px !important;
padding-right: 0px !important;
}
.pplans .container{max-width:90rem;text-align:center}
.pplans__eyebrow{
color:var(--c-blue);
font-weight:700;
font-size:1.3125rem;
line-height:1.15;
letter-spacing:-.02625rem;
margin:0 0 1.5rem;
}
.pplans__h2{
color:var(--c-navy);
font-weight:700;
font-size:1.986rem;
line-height:1.15;
letter-spacing:-.05975rem;
margin:0 0 4rem;
}
.pplans__grid{
display:grid;
grid-template-columns:1fr;
gap:2rem;
}
.pplans-card{
background:#fff; /* يُستبدل inline من PHP عندك */
border:1px solid var(--c-border);
border-radius:var(--radius-lg);
padding:2rem;
text-align:left;
}
.pplans-card__title{
color: var(--Primary-PR-01, #143960);
/* EN Typography/H3 */
font-family: Roboto;
font-size: 33.18px;
font-style: normal;
font-weight: 700;
line-height: 115%; /* 38.157px */
letter-spacing: -0.664px;
margin:0 0 0.5rem;
}
.pplans-card__desc{
color:var(--c-text);
font-size:1.1rem;
line-height:1.2;
letter-spacing:-.01rem;
margin:0 0 2rem;
min-height:57.56px; /* نفس ارتفاع نصك */
}
.pplans-card__features{
list-style:none;
margin:0 0 3rem;
padding:0;
color:#212223;
font-size:1.1rem;
line-height:2;
letter-spacing:-.01rem;
}
.pplans-card__feature{
display:flex;
align-items:center;
gap:8px;
}
.pplans-card__icon{
width:24px;height:24px;flex:0 0 24px;
}
/* CTA داخل هذا القسم فقط */
.pplans .btn--primary{
display:inline-block;
width:100%;
background:var(--c-navy);
color:#fff;
border-radius:999px;
padding:1rem 2rem;
font-size:1.1rem;
line-height:1.15;
letter-spacing:-.32px;
transition:background .2s ease;
text-align: center;
}
.pplans .btn--primary:hover{background:#0e2c4e}
/* RTL adjustments */
[dir="rtl"] .pplans-card{text-align:right}
[dir="rtl"] .pplans-card__feature{flex-direction:row}
/* =====================================================
Responsive
===================================================== */
@media (min-width:640px){ /* sm */
.pfeatures{padding-left:2rem;padding-right:2rem}
.pplans{padding-left:2rem;padding-right:2rem}
.pfeatures__grid{grid-template-columns:repeat(2,1fr)}
.pplans__grid{grid-template-columns:repeat(2,1fr);gap:3rem}
}
@media (min-width:1024px){ /* lg */
.pfeatures{padding-left:3.75rem;padding-right:3.75rem}
.pplans{padding-left:3.75rem;padding-right:3.75rem}
.pfeatures__grid{grid-template-columns:repeat(3,1fr)}
.pplans__grid{grid-template-columns:repeat(3,1fr)}
.pplans__h2{font-size:2.986rem}
}
/* === Product: Feature lite (4 tiles) === */
.pfeat-lite{
background: #F3F4F6 !important;
padding: 2.5rem 1rem;
padding-right: 0px !important;
padding-left: 0px !important;
}
.pfeat-lite .container{ max-width: 90rem; margin-inline: auto; }
/* Grid: 1 → 2 → 4 */
.pfeat-lite__grid{
display:grid;
grid-template-columns: 1fr;
gap: 2.5rem;
}
@media (min-width: 640px){
.pfeat-lite__grid{ grid-template-columns: repeat(2,1fr); }
}
@media (min-width: 1024px){
.pfeat-lite__grid{ grid-template-columns: repeat(4,1fr); }
}
/* Tile */
.pfeat-lite__item{
display:flex;
flex-direction:column;
align-items:center; /* افتراضي للـ LTR على الموبايل */
text-align:center;
}
/* اتجاهات RTL */
[dir="rtl"] .pfeat-lite__item{
align-items:flex-start; /* محاذاة يمين على الشاشات الكبيرة */
text-align:right;
}
/* Icon */
.pfeat-lite__icon{
width: 40px; height: 40px;
object-fit: contain;
margin-bottom: 1rem;
}
/* Title */
.pfeat-lite__h3{
color:#143960;
font-size: 1.44rem;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02rem;
margin-bottom: 1rem;
margin-top: 0 !important;
}
/* Description */
.pfeat-lite__p{
color:#030712;
font-size: 1rem; /* ~15px */
line-height: 1.2;
letter-spacing: -0.01rem;
max-width: 18rem; /* نفس عرض النص بالصورة */
margin: 0;
}
/* تحسينات صغيرة */
@media (min-width: 768px){
.pfeat-lite__item{
align-items:flex-start;
text-align:left;
}
[dir="rtl"] .pfeat-lite__item{
align-items:flex-start;
text-align:right;
}
}
/* ===== Integration Section (pint) ===== */
.pint{
padding: 3.25rem 0; /* لا مسافات جانبية */
}
@media (min-width:1024px){
.pint{ padding: 8rem 0; }
}
.pint__inner{
max-width: 1200px;
margin: 0 auto; /* توسيط بدون padding */
text-align: center;
}
.pint[dir="rtl"] .pint__inner{ text-align: center; } /* نُبقيها وسط */
.pint__eyebrow{
color: #249EDC;
font-weight: 700;
font-size: 1.3125rem;
line-height: 1;
letter-spacing: -0.02625rem;
margin: 0 0 .75rem 0;
}
.pint__h2{
color: #143960;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.05475rem;
font-size: 1.986rem;
margin: 0 0 1rem 0;
}
@media (min-width:768px){ .pint__h2{ font-size: 2.07375rem; } }
@media (min-width:1024px){ .pint__h2{ font-size: 2.488rem; } }
.pint__lead{
color: #010915;
font-size: 1.0625rem;
line-height: 1.41;
margin: 0 auto 2.5rem auto;
max-width: 95%;
}
.pint__grid{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem; /* sm */
}
@media (min-width:640px){
.pint__grid{ gap: 2.5rem; }
}
@media (min-width:1024px){
.pint__grid{ gap: 3rem; }
}
.pint__logo{
width: 60px;
height: auto;
}
@media (min-width:640px){
.pint__logo{ width: 80px; }
}
@media (min-width:1024px){
.pint__logo{ width: 95px; }
}
.pint__logo img{
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
/* ===== Stats Section ===== */
.pstats{
background:#F9FAFB; /* خلفية سكشن بالكامل */
padding:8rem 0; /* بدون أي هوامش/مسافات جانبية */
position:relative;
overflow:hidden;
}
.pstats .container{ max-width:90rem; margin:0 auto; }
.pstats__box{
background:#FEFEFE;
border-radius:16px;
overflow:hidden;
display:flex;
flex-direction:column;
box-shadow: -2px -2px 10px 0 rgba(0, 0, 0, 0.05), 2px 2px 10px 0 rgba(0, 0, 0, 0.05);
}
.pstats__box_custom{
gap: 3rem;
align-items: center;
}
.custom_pstats__img{
clip-path : none !important;
}
.pstats_custom{
background: #F5F5F5;
}
/* عمودين على الشاشات الكبيرة */
@media (min-width:1024px){
.pstats__box{ flex-direction:row; }
}
.pstats__left{
flex:1;
padding:2rem;
}
@media (min-width:1024px){
.pstats__left{ padding:3rem; padding-right : 6rem !important;}
}
.pstats__h2{
color:#143960;
font-weight:700;
line-height:1.15;
margin:0;
font-size:1.986rem;
}
@media (min-width:768px){ .pstats__h2{ font-size:2.07375rem; } }
@media (min-width:1024px){ .pstats__h2{ font-size:2.488rem; } }
.pstats__lead{
margin-top:1rem;
color:#010915;
font-size:1.1rem;
line-height:1.5rem;
}
.pstats__stats{
margin-top:3rem;
display:flex;
gap:2rem;
flex-direction:column;
}
@media (min-width:640px){
.pstats__stats{ flex-direction:row; }
}
.pstats__stat{
border-left:4px solid #249EDC;
padding-left:0.875rem;
}
[dir="rtl"] .pstats__stat{
border-left:0;
padding-left:0;
border-right:4px solid #249EDC;
padding-right:0.875rem;
}
.pstats__num{
margin:0 0 .25rem 0;
font-size:2.488rem;
font-weight:700;
color:#249EDC;
line-height:1;
}
.pstats__desc{
margin:0;
color:#010915;
font-size:1.1rem;
line-height:1.5rem;
}
/* يمين: مساحة الصورة */
.pstats__right{
position:relative;
height:auto;
display:flex;
align-items:center;
justify-content:center;
background:#FEE7DA; /* كما في الموبايل */
}
@media (min-width:1024px){
.pstats__right{ background:transparent; }
}
.pstats__right_custom{
background: transparent !important;
}
.pstats__img{
height:100%;
width:auto;
max-height:520px;
object-fit:cover;
/* clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0 63%); */
}
.pstats__img--rtl{
transform: scaleX(-1);
}
.custom_pstats__img{
}
@media (max-width:769px){
.custom_pstats__img{
max-width: 300px;
max-height: 250px;
}
.pstats__right_custom{
height: fit-content !important;
padding-bottom: 2rem;
}
}
/* ============= Avatar Hero ============= */
.ahero{
/* الخلفية من المتغيّر القادم inline */
background: linear-gradient(180deg, #143960 0%, #1E7CAE 100%) !important;
padding: 3.75rem 0;
text-align: center;
}
@media (min-width:1024px){
.ahero{ padding: 5rem 0; }
}
.ahero__wrap{
max-width: 90rem; /* container يحدد الجوانب */
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 2rem;
align-items: center;
}
@media (min-width:1024px){
.ahero__wrap{
flex-direction: row;
gap: 3rem;
align-items: center;
}
}
.ahero__text{ flex: 1 1 0; text-align: left; }
[dir="rtl"] .ahero__text{ text-align: right; }
.ahero__h1{
color:#F9FAFB;
font-weight:700;
line-height:140%
letter-spacing:-0.956px;
margin:0 0 2rem;
font-size:2.07375rem;
}
.ahero__h1 span{
color:#F9FAFB !important;
}
@media (min-width:1024px){
.ahero__h1{ font-size:3.575rem; }
}
.ahero__accent{ color:#249EDC; }
.ahero__h2{
color:#F9FAFB;
font-weight:700;
line-height:140%
letter-spacing:-0.664px;
margin:0 0 1rem;
font-size:1.728125rem !important;
}
@media (min-width:1024px){
.ahero__h2{ font-size:2.07375rem; }
}
.adiff__p2{
color: #1E7CAE;
text-align: start;
/* EN Typography/H6 */
font-family: Roboto;
font-size: 21px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 21px */
letter-spacing: -0.42px;
margin:0 0 16px;
}
.ahero__p{
color:#FFF;
font-size:1.0625rem;
line-height:24px;
margin:0;
width: 100%;
margin: auto;
padding-bottom: 2rem;
}
@media (min-width:1024px){
.ahero__p{width: 76%;}
}
.ahero__media{
flex: 1 1 0;
display:flex;
align-items:center;
justify-content:center;
}
.ahero__img{
width:auto;
height:auto;
max-width: 100%;
object-fit: contain;
}
/* ===== Avatar Overview ===== */
.aover{
background:#F9FAFB !important;
padding:3.75rem 0; /* top/bottom only - الكنترول يمسك الجوانب */
}
.aover-custtom{
background:#FEFEFE !important;
}
.access-why{
padding:3.75rem 0; /* top/bottom only - الكنترول يمسك الجوانب */
}
@media (min-width:1024px){
.aover{ padding:8rem 0; }
.access-why{ padding:8rem 0; }
.aover-custtom{
padding:6rem 0 !important;
}
}
.aover__wrap{
max-width:90rem; margin:0 auto;
display:flex; align-items:center;
gap:2rem;
flex-direction:column-reverse; /* الصورة تحت في الموبايل */
}
@media (min-width:1024px){
.aover__wrap{ flex-direction:row; gap:3rem; }
}
.aover__img-wrap{
display:flex; justify-content:center;
width:100%;
}
.ahero__wrap .ahero__left{
flex: 1;
}
.ahero__wrap .ahero__right {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.aover__img{
width:300px; height:auto; object-fit:contain;
}
@media (min-width:640px){ .aover__img{ width:360px; } }
@media (min-width:1024px){ .aover__img{ width:449px; } }
@media (min-width:1024px){ .aover__img_custom{ width:574px; } }
.aover__text{
flex:1 1 auto; min-width:0;
text-align:left;
}
.aover[dir="rtl"] .aover__text{ text-align:right; }
/* Headings & paragraph */
.aover__h2{
color:#143960; font-weight:700; line-height:1.15; margin:0 0 1rem;
font-size:1.728125rem;
}
@media (min-width:768px){ .aover__h2{ font-size:2.07375rem; } }
@media (min-width:1024px){ .aover__h2{ font-size:2.488rem; } }
.aover__lead{
color:#010915; font-size:16px; line-height:120%;
margin:0 0 2rem;
letter-spacing:-0.16px;
}
/* Features grid */
.aover__grid{
display:grid;
grid-template-columns:1fr;
gap:2rem 3.125rem; /* y x */
}
@media (min-width:640px){
.aover__grid{ grid-template-columns:1fr 1fr; }
}
.aover__item{
display:flex; align-items:flex-start; gap:1rem;
}
.aover__icon{
width:40px; height:40px; flex:0 0 40px; object-fit:contain;
}
.aover__item-title{
color:#143960; font-weight:700; margin:0 0 .5rem;
font-size:1.3125rem; line-height:1; letter-spacing:-0.42px;
}
.aover__item-desc{
color:#010915; font-size:16px; line-height:120%; letter-spacing:-0.16px; margin:0;
}
/* ===== Avatar Difference ===== */
.adiff{ background:#F3F4F6 !important; padding:3.75rem 0; }
.adiff-custom {padding:3.75rem 0;}
@media (min-width:1024px){ .adiff{ padding:4rem 0; } .adiff-custom {padding:8rem 0;}}
.adiff__grid{
max-width:90rem; margin:0 auto;
display:grid; gap:2rem; align-items:center;
grid-template-columns:1fr;
}
@media (min-width:1024px){
.adiff__grid{ gap:3rem; grid-template-columns:1fr 501px; }
}
.adiff__text{ text-align:left; }
.adiff[dir="rtl"] .adiff__text{ text-align:right; }
.adiff__h2{
color:#143960; font-weight:700; line-height:140%
margin:0 0 1rem;
font-size:1.728125rem; letter-spacing:-0.876px;
}
@media (min-width:768px){ .adiff__h2{ font-size:2.07375rem; } }
@media (min-width:1024px){ .adiff__h2{ font-size:2.488rem; } }
.adiff__lead{
color:#010915; font-size:16px; line-height:120%;
letter-spacing:-0.16px; margin:0 0 2rem;
width:100%;
}
.adiff__lead_custom{
width:100%;
}
.adiff__list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:1rem; }
.adiff__li{ display:flex; align-items:center; gap:.5rem; }
.adiff__check{ width:28px; height:27px; flex:0 0 28px; margin-top:2px; }
.adiff__li-text{ color:#010915; font-size:16px; line-height:120%; letter-spacing:-0.16px; }
.adiff__spacer{ margin-top:1.5rem; }
.adiff__media{ width:100%; height:100%; }
.adiff__imgbox{
width:100%; border-radius:1rem; overflow:hidden;
}
.adiff__img{ width:100%; height:auto; object-fit:cover; display:block; }
/* ============ Avatar Essential Features ============ */
.aess{ background:#F3F4F6 !important; padding:3.75rem 0; }
@media (min-width:1024px){ .aess{ padding:2.5rem 0 !important; } .adiff__lead_custom{width : 72%} }
.aess__inner{ max-width:90rem; margin:0 auto; text-align:center; }
.aess__eyebrow{
color:#249EDC; font-weight:700; font-size:21px;
line-height:100%; letter-spacing:-0.42px; margin:0 0 1rem;
}
.aess__h2{
color:#143960; font-weight:700; line-height:140%
letter-spacing:-0.956px; margin:0 0 1rem;
font-size:2.07375rem;
}
@media (min-width:1024px){ .aess__h2{ font-size:2.986rem; } }
.aess__lead{
color:#010915; font-size:16px; line-height:120%;
letter-spacing:-0.16px; width:100%; max-width:83%;
margin:0 auto 5rem;
}
.aess__grid{
display:grid; grid-template-columns:1fr; gap:3rem; text-align:left;
}
@media (min-width:640px){ .aess__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .aess__grid{ grid-template-columns:repeat(4,1fr); } }
.aess__grid--rtl{ text-align:right; }
.aess__card{ display:flex; flex-direction:column; gap:1rem; }
.aess__card--rtl{ align-items:flex-
; }
.aess__icon{ width:48px; height:48px; display:block; }
.aess__title{
color:#143960 !important; font-weight:700; line-height:140%
letter-spacing:-0.461px; font-size:1.44rem; margin:0;
}
.aess__desc{
color:#030712 !important; font-size:17px; line-height:24px; margin:0;
}
/* ============ Avatar Essential Features ============ */
.aess{ background:#FCFCFC; padding:3.75rem 0; }
@media (min-width:1024px){ .aess{ padding:8rem 0; } }
.aess__inner{ max-width:90rem; margin:0 auto; text-align:center; }
.aess__eyebrow{
color:#249EDC; font-weight:700; font-size:21px;
line-height:100%; letter-spacing:-0.42px; margin:0 0 1rem;
}
.aess__h2{
color:#143960; font-weight:700; line-height:140%
letter-spacing:-0.956px; margin:0 0 1rem;
font-size:2.07375rem;
}
@media (min-width:1024px){ .aess__h2{ font-size:2.986rem; } }
.aess__lead{
color:#010915; font-size:16px; line-height:120%;
letter-spacing:-0.16px; width:100%; max-width:83%;
margin:0 auto 5rem;
}
.aess__grid{
display:grid; grid-template-columns:1fr; gap:3rem; text-align:left;
}
@media (min-width:640px){ .aess__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .aess__grid{ grid-template-columns:repeat(4,1fr); } }
.aess__grid--rtl{ text-align:right; }
.aess__card{ display:flex; flex-direction:column; gap:1rem; }
.aess__card--rtl{ align-items:flex-start; }
.aess__icon{ width:48px; height:48px; display:block; }
.aess__title{
color:#143960; font-weight:700; line-height:140%
letter-spacing:-0.461px; font-size:1.44rem; margin:0;
}
.aess__desc{
color:#010915; font-size:17px; line-height:24px; margin:0;
}
/* ========== FAQ Section ========== */
.faq {
padding-top: 3.75rem; padding-bottom: 3.75rem;
background: #F5F5F5;
}
@media (min-width:1024px){ .faq{ padding-top:8rem; padding-bottom:8rem; } }
.faq__grid {
display: grid;
grid-template-columns: 1fr 1.35fr;
gap: 3rem;
align-items: start;
}
@media (max-width: 992px) {
.faq__grid { grid-template-columns: 1fr; gap: 2rem; }
}
/* Eyebrow (الأزرق) */
.faq__eyebrow{
color: var(--Primary-PR-02, #249EDC);
font-weight: 700;
font-size: clamp(0.95rem, 1.2vw, 1.3125rem);
line-height: 1;
letter-spacing: -0.02625rem;
margin: 0 0 1rem;
}
/* H2 */
.faq__h2{
color: var(--Primary-PR-01, #143960);
font-weight: 700;
font-size: clamp(1.75rem, 2.9vw, 2.488rem); /* ~39.808px على الديسكتوب */
line-height: 1.15;
letter-spacing: -0.876px;
margin: 0 0 1rem;
}
/* Lead text */
.faq__lead{
color: var(--Neutral-UI-BLACK-900, #010915);
font-size: 16px;
line-height: 1.25; /* 125% */
margin: 0;
max-width: 38rem;
}
/* Right list */
.faq__right{ width: 100%; }
/* Question row */
.faq__q{
width: 100%;
display: flex;
align-items: center;
gap: .625rem;
padding: .9rem 0;
border-bottom: 1px solid #D9DADC;
background: transparent;
color: var(--Neutral-UI-BLACK-900, #010915);
font-weight: 700;
font-size: 18px;
line-height: 1.2;
text-align: inherit;
cursor: pointer;
border: none !important;
}
.faq__q:focus-visible{
outline: 2px solid #249EDC;
outline-offset: 2px;
border-radius: .25rem;
}
/* Chevron */
.faq__chev{
width: 18px; height: 18px;
flex: 0 0 18px;
color: #143960;
transition: transform .25s ease;
}
.faq__item.is-open .faq__chev{ transform: rotate(90deg); }
/* Answer panel (animated height) */
.faq__panel{
overflow: hidden;
height: 0;
transition: height .28s ease;
}
.faq__answer{
color: var(--Neutral-UI-BLACK-700, #303133);
font-size: 16px;
line-height: 1.25;
padding: .5rem 0 1rem 1.625rem; /* مسافة يسار لتتماشى مع السهم */
}
/* RTL tweaks */
[dir="rtl"] .faq__answer{ padding: .5rem 1.625rem 1rem 0; }
[dir="rtl"] .faq__q{ justify-content: flex-start; }
[dir="rtl"] .faq__q .faq__chev{ order: 2; }
[dir="rtl"] .faq__q span{ order: 1; }
/* ===== Avatar Pricing Intro ===== */
.apintro { padding-top: 3.75rem; padding-bottom: 3.75rem; background:#FAFAFA; }
@media (min-width:1024px){ .apintro{ padding-top:8rem; padding-bottom:8rem; } }
.apintro__eyebrow{
color:#249EDC; font-weight:700; text-align:center;
/* قريب من نمط العناوين الفرعية عندكم */
font-size:1.3125rem; line-height:1; letter-spacing:-0.02625rem;
margin:0 0 1rem;
}
.apintro__title{
color:#143960; text-align:center; font-weight:700;
font-size:2.488rem; line-height:140% letter-spacing:-0.876px;
margin:0 0 1rem;
margin-bottom: 1rem;
}
@media (max-width:640px){
.apintro__title{ font-size:2.074rem; letter-spacing:-0.6px; }
.apintro__eyebrow{ font-size:1.1rem; }
}
.apintro__desc{
color:#010915; text-align:center; font-size:16px; line-height:125%;
margin:0 auto 2.25rem;
margin-bottom: 2rem;
}
.apintro__cta{
display:flex; align-items:center; justify-content:center; gap:0.75rem;
}
.apintro__cta .btn{ min-width:180px; }
@media (max-width:640px){
.apintro__cta{ flex-direction:column; }
.apintro__cta .btn{ width:100%; }
}
/* Compliance Hero */
.c-hero{
padding:3.75rem 0;
background: linear-gradient(180deg, #143960 0%, #1E7CAE 100%) !important;
}
@media (min-width:1024px){ .c-hero{ padding:6rem 0; } }
.c-hero__wrap { text-align: center; }
.c-hero__wrap .btn--primary {
background: #F9FAFB;
color: #143960;
}
/* العنوان الأزرق: استخدموا نفس ستايل الأقسام الأخرى إن وُجد.
هنا نكتفي فقط بتلوين كلمة الـ accent */
.c-hero__accent { color:#249EDC; }
/* H1 */
.c-hero__h1{
color:#F9FAFB; font-weight:700;
font-size:2.0375rem; line-height:140%
letter-spacing:-0.956px; margin:0 0 2rem;
}
.c-hero__h1 span{
color:#F9FAFB !important;
}
@media (min-width:1024px){
.c-hero__h1{ font-size:2.986rem; }
}
/* H2 (هيدر فرعي) */
.c-hero__h2{
color:#F9FAFB; font-weight:700;
font-size:1.728125rem; line-height:100%;
letter-spacing:-0.553px; margin:0 0 1rem;
}
/* نص الوصف */
.c-hero__p{
color:#F9FAFB; font-size:16px; line-height:24px;
margin:0 auto 2rem; max-width:108ch;
}
/* الزر */
.c-hero__btn{
display:inline-block; text-align:center;
padding:.875rem 2rem; border-radius:999px;
width:100%;
}
@media (min-width:1024px){
.c-hero__btn{ width:auto; }
}
/* ============== Avatar Overview ============== */
.aoverview{
background: var(--aoverview-bg, #FCFCFC);
padding: 3.75rem 0;
}
@media (min-width:1024px){
.aoverview{ padding: 8rem 0; }
}
.aoverview__wrap{
display:flex;
flex-direction:column-reverse;
gap:2rem;
align-items:center;
}
@media (min-width:1024px){
.aoverview__wrap{ flex-direction:row; gap:3rem; }
}
/* media block */
.aoverview__media{
flex:0 0 auto;
display:flex;
justify-content:center;
}
@media (min-width:1024px){
.aoverview__media{ justify-content:flex-start; }
}
.aoverview__img{
width:300px; height:auto; object-fit:contain;
}
@media (min-width:640px){ .aoverview__img{ width:360px; } }
@media (min-width:1024px){ .aoverview__img{ width:449px; } }
/* text block */
.aoverview__text{ flex:1 1 auto; min-width:0; text-align:left; }
[dir="rtl"] .aoverview__text,
.aoverview__text--ar{ text-align:right; }
.aoverview__h2{
color:#143960; font-weight:700;
font-size:1.728125rem; /* ~27.65px */
line-height:140% letter-spacing:-0.876px;
margin:0 0 1rem;
}
@media (min-width:768px){ .aoverview__h2{ font-size:2.07375rem; } }
@media (min-width:1024px){ .aoverview__h2{ font-size:2.488rem; } }
.aoverview__lead{
color:#010915; font-size:16px; line-height:120%;
margin:0 0 2rem;
}
/* features grid */
.aoverview__grid{
display:grid;
grid-template-columns:1fr;
gap:2rem 3.125rem; /* row col */
}
@media (min-width:640px){
.aoverview__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
.aoverview__item{
display:flex; align-items:flex-start; gap:1rem;
}
.aoverview__item--ar{ flex-direction:row; } /* تبقى نفس الاتجاه مع RTL */
.aoverview__icon{
width:40px; height:40px; flex:0 0 40px; object-fit:contain;
}
.aoverview__itemh3{
color:#143960; font-weight:700;
font-size:1.3125rem; line-height:100%;
letter-spacing:-0.42px; margin:0 0 .5rem;
}
.aoverview__itemp{
color:#010915; font-size:16px; line-height:120%; margin:0;
}
/* ===== Headings / Utilities (موّحد لكل الصفحات) ===== */
.eyebrow{
font-weight:700; font-size:21px; line-height:100%; letter-spacing:-0.42px;
margin:0 0 1rem; text-align:center;
}
.eyebrow--blue{ color:#249EDC; }
.h2{
color:#143960; font-weight:700;
font-size:1.728125rem; line-height:140% letter-spacing:-0.876px;
margin:0 0 1rem; text-align:inherit;
}
@media (min-width:768px){ .h2{ font-size:2.07375rem; } }
@media (min-width:1024px){ .h2{ font-size:2.986rem; } }
.h2--center{ text-align:center; }
.lead{
color:#010915; font-size:16px; line-height:125%;
margin:0 0 2rem;
}
.lead--center{ text-align:center; }
.lead--narrow{ max-width:85%; margin-left:auto; margin-right:auto; }
@media (max-width:1023.98px){ .lead--narrow{ max-width:100%; } }
/* ===== Why Compliance ===== */
.cwhy{
background:var(--cwhy-bg, #FCFCFC);
padding:3.75rem 0;
}
@media (min-width:1024px){ .cwhy{ padding:8rem 0; } }
.cwhy__grid{
display:grid; gap:3rem;
grid-template-columns:1fr;
}
@media (min-width:640px){
.cwhy__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:1024px){
.cwhy__grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}
.cwhy__grid--rtl{ direction:rtl; }
.cwhy__item{ display:flex; flex-direction:column; align-items:flex-start; }
[dir="rtl"] .cwhy__item{ align-items:flex-start; text-align:right; }
.cwhy__icon{ width:48px; height:48px; object-fit:contain; margin-bottom:1rem; }
.cwhy__h3{
color:#143960; font-weight:700;
font-size:1.44rem; line-height:140% letter-spacing:-0.461px;
margin:0 0 1rem;
}
.cwhy__p{
color:#010915; font-size:17px; line-height:24px; margin:0;
}
/* ===== POUR Section ===== */
.cpour{ background:var(--cpour-bg, #249EDC); padding:3.75rem 0; }
@media (min-width:1024px){ .cpour{ padding:8rem 0; } }
.cpour__card{
background:#143960; border-radius:1rem;
display:flex; flex-direction:column; gap:3rem;
}
@media (min-width:768px){
.cpour__card{ border-radius:1.25rem; }
}
@media (min-width:1024px){
.cpour__card{ flex-direction:row; }
}
.cpour__card--rtl{ direction:rtl; }
.cpour__ribbon{
width:98px; flex:0 0 98px; align-self:stretch; display:flex; align-items:flex-start; height: 113px !important; display: none;
}
.cpour__ribbon img{ width:98px; height:100%; object-fit:cover; position:relative; top:-2px; }
.cpour__content h2{
color: #FAFAFA;
}
.cpour__content p{
color: #FAFAFA;
}
.cpour__content{ padding-top:0; }
@media (min-width:1024px){ .cpour__content{ padding-top:3rem; } }
.cpour__grid{
display:grid; grid-template-columns:1fr; gap:2rem;
}
@media (min-width:768px){
.cpour__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
.cpour__grid--rtl{ direction:rtl; }
.cpour__item{
display:grid; grid-template-columns:36px 1fr; gap:2rem; align-items:start;
}
.cpour__item--rtl{
/* grid-template-columns:1fr 36px; */
}
.cpour__icon{ width: 52px; height:52px; object-fit:contain; grid-column:1; }
.cpour__item--rtl .cpour__icon{ grid-column:auto; }
.cpour__h3{
color:#55B3E2; font-weight:700;
font-size:1.3125rem; line-height:100%; letter-spacing:-0.42px; margin:0 0 .75rem;
}
.cpour__p{ color:#010915; font-size:16px; line-height:24px; margin:0; }
/* ====== How Hemam Helps ====== */
.hhow{ background:var(--hhow-bg,#FCFCFC); padding:3.75rem 0; }
@media (min-width:1024px){ .hhow{ padding:8rem 0; } }
.hhow__grid{ display:grid; gap:3rem; grid-template-columns:1fr; margin-top:3rem; margin-bottom:4rem; }
@media (min-width:768px){ .hhow__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .hhow__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.hhow__grid--rtl{ direction:rtl; }
.hhow__item{ display:flex; flex-direction:column; align-items:flex-start; }
[dir="rtl"] .hhow__item{ align-items:flex-start; text-align:right; }
.hhow__icon{ width:48px; height:48px; object-fit:contain; margin-bottom:1rem; }
.hhow__h3{ color:#143960; font-weight:700; font-size:1.44rem; line-height:140% letter-spacing:-0.461px; margin:0 0 1rem; }
.hhow__p{ color:#010915; font-size:17px; line-height:24px; margin:0; }
.hhow__actions{
display:flex; gap:1rem; justify-content:center; align-items:center; flex-direction:column;
}
@media (min-width:768px){
.hhow__actions{ flex-direction:row; }
}
.hhow__actions .btn--block{ width:100%; }
@media (min-width:768px){
.hhow__actions .btn--block{ width:auto; }
}
/* ====== Accessibility Standards ====== */
.astd{ background:var(--astd-bg,#F3F4F5); padding:3.75rem 0; }
@media (min-width:1024px){ .astd{ padding:8rem 0; } }
.astd__grid{ display:grid; gap:3rem; grid-template-columns:1fr; }
@media (min-width:768px){ .astd__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .astd__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.astd__grid--rtl{ direction:rtl; }
.astd__card{
background:#FCFCFC; border:1px solid #D9DADC; border-radius:20px; padding:1.5rem;
}
.astd__row{ display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; }
.astd__row--rtl{ grid-template-columns:1fr auto; }
.astd__badge img{ width:90px; height:auto; object-fit:contain; }
.astd__scope{ color:#64748B; font-size:.9375rem; line-height:125%; letter-spacing:-.15px; margin:0 0 .25rem; }
.astd__h3{ color:#143960; font-weight:700; font-size:1.3125rem; line-height:100%; letter-spacing:-.42px; margin:0 0 .75rem; }
.astd__p{ color:#143960; font-size:1.1rem; line-height:120%; margin:0; }
/* ==== Shared typographic helpers already used in your theme ==== */
.eyebrow{ font-weight:700; font-size:21px; line-height:100%; letter-spacing:-0.42px; margin:0 0 1rem; }
.eyebrow--blue{ color:#249EDC; }
.h2{ color:#143960; font-weight:700; font-size:1.728125rem; line-height:140% letter-spacing:-0.876px; margin:0 0 1rem; }
@media (min-width:768px){ .h2{ font-size:2.07375rem; } }
@media (min-width:1024px){ .h2{ font-size:2.986rem; } }
.h2--center{ text-align:center; }
.lead{ color:#010915; font-size:16px; line-height:125%; margin:0 0 68px; }
.lead--center{ text-align:center; }
.lead--narrow{ max-width:85%; margin-left:auto; margin-right:auto; }
@media (max-width:1023.98px){ .lead--narrow{ max-width:100%; } }
/* ===============================
Hemam Access – Hero
=============================== */
.access-hero{ background:#fff; padding-block: 4rem; }
.access-hero__wrap{
display:grid;
grid-template-columns:1fr;
align-items:center;
gap:2rem;
}
@media (min-width:1024px){
.access-hero__wrap{ grid-template-columns:1.1fr 1fr; gap:3rem; }
}
/* H1 specs: 47.776 / 700 / 115% / -0.956px */
.access-hero__h1{
color:#143960;
font-weight:700;
line-height:140%
letter-spacing:-0.956px;
font-size:clamp(2rem, 5.2vw, 47.776px);
margin:0 0 .75rem;
}
.access-hero__h1 .txt-accent{ color:#249EDC; }
/* H3 specs: 33.18 / 700 / 115% / -0.664px */
.access-hero__h3{
color:#143960;
font-weight:700;
line-height:140%
letter-spacing:-0.664px;
font-size:clamp(1.375rem, 4vw, 33.18px);
margin:0 0 1rem;
}
/* Body specs: 17 / 400 / 24px */
.access-hero__p{
color:#010915;
font-size:17px;
font-weight:400;
line-height:24px;
margin:0 0 1.5rem;
max-width:46ch;
}
/* Actions -> أزرارنا القياسية */
.access-hero__actions{ display:flex; gap:1rem; flex-wrap:wrap; }
.access-hero__actions .btn{ min-width:220px; }
@media (max-width:640px){
.access-hero__actions{ flex-direction:column; }
.access-hero__actions .btn{ width:100%; }
}
/* Media (overlapped cards) */
.access-hero__media{
position:relative;
min-height:360px;
display:flex; align-items:center; justify-content:center;
}
.access-hero__shot{
/* position:absolute; */
width:min(380px, 85%); height:auto;
filter: drop-shadow(0 10px 24px rgba(10,20,40,.12));
}
.access-hero__shot--front{ z-index:2; left:8%; top:12%; }
.access-hero__shot--back { z-index:1; right:6%; top:-6%; transform:scale(.98); opacity:.98; }
/* Mobile: نُبقي صورة واحدة */
@media (max-width:768px){
.access-hero__media{ min-height:300px; }
.access-hero__shot--back{ display:none; }
.access-hero__shot--front{ position:relative; left:auto; top:auto; }
}
/* RTL tweaks */
.access-hero[dir="rtl"] .access-hero__shot--front{ right:8%; left:auto; }
.access-hero[dir="rtl"] .access-hero__shot--back { left:6%; right:auto; }
.access-hero[dir="rtl"] .access-hero__p{ margin-left:auto; }
/* اختياري: إخفاء الـ
في الموبايل */
@media (max-width:640px){ .hide-sm{ display:none; } }
/* ===========================
Why Choose Hemam Access
=========================== */
.access-why { background:#fff; }
.access-why__wrap{
display:grid; grid-template-columns:1fr; align-items:center; gap:2rem;
}
@media (min-width:1024px){
.access-why__wrap{ grid-template-columns: 1fr 1.2fr; gap:3rem; }
}
.access-why__media{ display:flex; justify-content:center; }
.access-why__img{ width:min(360px, 100%); height:auto; border-radius:999px; }
/* H2 specs: 39.808 / 700 / 115% / -0.876px */
.access-why__h2{
color:#143960; font-weight:700; line-height:140% letter-spacing:-0.876px;
font-size:clamp(1.75rem, 3.4vw, 39.808px);
margin:0 0 1rem;
}
/* Lead/body specs: 16 / 400 / 125% */
.access-why__lead{
color:#010915; font-size:16px; line-height:125%; font-weight:400;
margin:0 0 2rem; max-width:70ch;
}
.access-why__list{ list-style:none; padding:0; margin:0 0 2rem; display:grid; gap:1rem; }
.access-why__list li{ display:flex; align-items:center; gap:.625rem; color:#010915; font-size:16px; line-height:125%; }
.access-why__list img{ margin-top:2px; }
/* Actions (أزرارنا القياسية) */
.access-why__actions{ display:flex; gap:1rem; flex-wrap:wrap; }
@media (max-width:640px){
.access-why__actions{ flex-direction:column; }
.access-why__actions .btn{ width:100%; }
}
/* RTL reorder: النص يمين والصورة يسار كما في التصميم */
.access-why[dir="rtl"] .access-why__content{ text-align:right; }
/* ===========================
Accessibility Profiles (Tabs)
=========================== */
.access-profiles { background:#F3F4F5; }
.access-profiles__wrap{
display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:start; padding:3.75rem 0; overflow: hidden;
}
@media (min-width:1024px){
.access-profiles__wrap{
padding:8rem 0;
}
}
@media (min-width:1024px){
.access-profiles__wrap{ grid-template-columns: 1.05fr 1fr; gap:3.5rem; }
}
/* Eyebrow (H6 specs 21/700/100/-0.42) */
.access-profiles__eyebrow{
color:#249EDC; font-weight:700; font-size:21px; line-height:100%;
letter-spacing:-0.42px; margin:0 0 .75rem;
}
/* H1 specs 47.776 / 700 / 115% / -0.956 */
.access-profiles__h1{
color:#143960; font-weight:700; line-height:140% letter-spacing:-0.956px;
font-size:clamp(1.9rem, 4.5vw, 47.776px);
margin:0 0 2rem;
}
/* Body EN 17 / 400 / 24 */
.access-profiles__lead{
color:#010915; font-size:17px; line-height:24px; font-weight:400;
max-width:62ch; margin:0;
}
/* Tabs bar (pill) */
.a11y-tabs__bar{
display:flex; gap:.5rem; padding:0.25rem; border-radius:999px;
background:#249EDC; width:100%; justify-content:space-between; overflow:auto;
}
.a11y-tab{
display:flex; align-items:center; gap:.5rem; border:0; background:transparent;
color:#FEFEFE; padding:0.5rem 2rem; border-radius:999px; cursor:pointer;
font-size:16px; line-height:140% letter-spacing:-0.32px; font-weight:400;
white-space:nowrap; transition:background .2s ease, transform .1s ease;
}
.a11y-tab img{ width:23px; height:23px; filter:brightness(0) invert(1); }
.a11y-tab:is(:hover,:focus-visible){ transform:translateY(-1px); }
.a11y-tab.is-active{ background:#143960; }
/* Panels */
.a11y-tabs__panels{ margin-top:1.25rem; }
.a11y-tabs__panel{ display:none; opacity:0; transform:translateY(6px); }
.a11y-tabs__panel.is-active{ display:block; opacity:1; transform:none; }
/* Animations */
@keyframes a11yFadeInUp{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
@keyframes a11yFadeOut{ from{opacity:1;} to{opacity:0;} }
.a11y-tabs__panel.anim-in{ animation:a11yFadeInUp .35s ease both; }
.a11y-tabs__panel.anim-out{ animation:a11yFadeOut .25s ease both; }
/* Panel content */
.a11y-item{ padding: .75rem 0; }
.a11y-item + .a11y-item{ padding-top:1rem; margin-top: 0px;}
/* Panel title H6 specs 21/700/100/-0.42 */
.a11y-item__title{
color:#143960; font-size:21px; font-weight:700; line-height:100%;
letter-spacing:-0.42px; margin:0 0 0.5rem;
}
/* Panel desc Body 16/400/125% */
.a11y-item__desc{ color:#143960; font-size:16px; line-height:125%; margin:0; }
/* Feature tags (icons row) */
.a11y-item__tags{ display:flex; margin-top:.625rem; flex-wrap:wrap; }
.a11y-tag{
display:flex; align-items:center; gap:.4rem; padding:.35rem .6rem;
border-radius:999px; color:#143960; font-size:16px; flex-direction: column;
}
.a11y-tag img{ width:54px; height:54px; border-radius:50%; }
/* RTL tweaks */
.access-profiles[dir="rtl"] .a11y-tabs__bar{ direction:rtl; }
.access-profiles[dir="rtl"] .a11y-tag{ direction:rtl; }
/* ===== Contact Page ===== */
.contact{
background:#F5F5F5;
}
.contacts{
padding:3.75rem 0;
}
@media (min-width:1024px){
.contacts{ padding:7.75rem 0; }
}
/* Grid */
.contact__grid{
display:grid;
gap:3rem;
grid-template-columns:1fr;
align-items:start;
}
@media (min-width:1024px){
.contact__grid{ grid-template-columns:1fr 1fr; }
}
/* Copy & Typography */
.contact__h1{
color:#143960;
font-weight:700;
line-height:140%
letter-spacing:-0.05975rem;
font-size:clamp(2.0375rem,3.2vw,2.986rem);
margin:0 0 2rem;
}
.contact__lead{
color:#010915;
font-size:1.0625rem;
line-height:24px;
font-weight:400;
margin:0 0 2rem;
}
.contact__copy--rtl{ text-align:right; }
.contact__note--rtl{ text-align:right; }
.contact__link{ color:#249EDC; text-decoration:none; }
/* Card */
.contact-card{
background:#FAFAFA;
border-radius:20px;
padding:1.5rem;
box-shadow:-4px -4px 16px rgba(214,217,217,.40), 4px 4px 16px rgba(214,217,217,.40);
}
@media (min-width:768px){
.contact-card{ padding:2rem; }
}
/* Form */
.contact-form{ display:block; }
.contact-form__row{
display:grid;
gap:1rem; margin-top: 1.5rem;
}
@media (min-width:640px){
.contact-form__row{ grid-template-columns:1fr 1fr; }
}
.field label{
color:#010915;
font-size:1.1rem;
font-weight:400;
line-height:140%
letter-spacing:-0.32px;
display:block;
margin:0 0 0.25rem;
text-align:left;
}
.contact--rtl .field label{ text-align:right; }
/* Inputs */
.input{
width:100%;
background:#FFF;
border:1.5px solid #D9DADC;
color:#010915;
border-radius:9999px;
padding:.875rem 1rem;
font-size:1.1rem;
line-height:140%
letter-spacing:-0.32px;
font-weight:400;
outline:none;
text-align:left;
}
.input--rtl{ text-align:right; }
.textarea{
border-radius:12px;
padding:1rem;
min-height:150px;
resize:none;
}
.input:focus{
border-color:#143960;
box-shadow:0 0 0 3px rgba(20,57,96,0.12);
}
/* Select */
.select{ position:relative; }
.select__el{
appearance:none; -webkit-appearance:none; -moz-appearance:none;
padding-right:2.5rem; /* chevron right in EN */
}
.select__chev{
position:absolute;
right:12px;
top:50%;
transform:translateY(-50%);
pointer-events:none;
}
.select--rtl .select__el{ padding-right:1rem; padding-left:2.5rem; }
.select__chev--rtl{
left:12px;
right:auto;
top:50%;
transform:translateY(-50%);
}
/* Button */
.btn{
display:inline-block;
cursor:pointer;
transition:.2s ease;
text-align:center;
}
.btn--primary{
background:#143960;
color:#fff;
border-radius:9999px;
padding:.875rem 2rem;
font-size:1.1rem;
line-height:140%
letter-spacing:-0.32px;
font-weight:400;
margin-top:.5rem;
}
.btn--primary:hover{ opacity:.9; }
/* ===== Offices Section ===== */
.offices{
background:#FAFAFA;
padding:3.75rem 0;
}
@media (min-width:1024px){
.offices{ padding:7.75rem 0; }
}
/* Title (matches your H2 pattern) */
.offices__h2{
color:#143960;
font-weight:700;
line-height:140%
letter-spacing:-0.876px;
text-align:center;
font-size:clamp(1.986rem, 3.2vw, 2.488rem);
margin:0 0 4rem;
text-align: start;
}
/* Grid */
.offices__grid{
display:grid;
grid-template-columns:1fr;
gap:1.25rem;
}
@media (min-width:768px){
.offices__grid{ grid-template-columns:repeat(2,1fr); gap:1.5rem; }
}
@media (min-width:1024px){
.offices__grid{ grid-template-columns:repeat(3,1fr); gap:3rem; }
}
/* Card */
.office-card{
background:#F5F5F5;
border:1px solid #E5E5E5;
border-radius:1.5rem;
padding:1.5rem;
text-align:left;
}
.office-card--rtl{ text-align:right; }
/* Country (eyebrow 18/semibold) */
.office-card__country{
color:#249EDC;
font-weight:600;
font-size:18px;
line-height:140%
letter-spacing:-0.36px;
margin:0 0 .25rem;
}
/* Title (1.44rem / 115% / -0.461px) */
.office-card__title{
color:#143960;
font-weight:700;
font-size:1.44rem;
line-height:140%
letter-spacing:-0.461px;
margin:0 0 1rem;
}
/* Lines (17 / 24) */
.office-card__lines{ display:block; }
.office-card__line{
color:#010915;
font-size:17px;
line-height:24px;
font-weight:400;
margin:0 0 .5rem;
max-width:100%;
}
@media (min-width:1024px){
.office-card__line{ max-width:90%; }
.office-card--rtl .office-card__line{ max-width:88%; } /* مثل كودك للعربي */
}
/* =======================
Industries – Hero
======================= */
.ind-hero{
background: #F9FAFB;
padding: 3.75rem 0;
color: #FAFAFA;
}
@media (min-width:1024px){
.ind-hero{ padding: 7.5rem 0; }
}
.ind-hero__wrap{
margin: 0 auto;
text-align: center;
}
/* Eyebrow: H4 specs (27.65 / 700 / 100% / -0.553) */
.ind-hero__eyebrow{
color:#1E7CAE;
font-weight:700;
font-size:27.65px;
line-height:100%;
letter-spacing:-0.553px;
margin:0 0 1rem;
}
/* Title: big white (H2 39.808 / 700 / 115% / -0.876) */
.ind-hero__h1{
color:#143960;
font-weight:700;
line-height:140%
letter-spacing:-0.876px;
font-size: 57.2px;
margin:0 0 2rem;
}
/* Lead: Body 17 / 24 white */
.ind-hero__lead{
color:#171717;
font-size:17px;
line-height:24px;
font-weight:400;
margin:0 auto;
opacity:.98;
width: 78%;
margin-bottom: 2rem;
}
@media (max-width:1024px){
.ind-hero__lead{width: 100%;}
}
/* RTL tweak (kept centered, but class for future if needed) */
.ind-hero--rtl .ind-hero__wrap{ text-align:center; }
/* ===============================
INDUSTRIES – HERO
=============================== */
.industries-hero{ background:#143960; color:#fff; }
.industries-hero .wrap{
max-width:1440px; margin-inline:auto;
padding:3.75rem 1rem; text-align:center;
}
@media (min-width:768px){ .industries-hero .wrap{ padding:3.75rem 2rem; } }
@media (min-width:1024px){ .industries-hero .wrap{ padding:7.5rem 3.75rem; } }
/* Eyebrow (H4: 27.65 / 700 / 100% / -0.553) */
.industries-eyebrow{
color:#249EDC; font-family:Roboto,Arial,sans-serif;
font-weight:700; font-size:27.65px; line-height:100%; letter-spacing:-0.553px;
margin:0 0 .75rem;
}
/* Title (H2 spec المطلوب) */
.industries-title{
color:#FFFFFF; font-family:Roboto,Arial,sans-serif;
font-weight:700; font-size:39.808px; line-height:140% letter-spacing:-0.876px;
margin:0 0 1rem;
}
/* Lead (Body 17/24) */
.industries-lead{
color:#FAFAFA; font-family:Roboto,Arial,sans-serif;
font-weight:400; font-size:17px; line-height:24px;
margin:0; max-width:86ch; margin-inline:auto;
}
/* ===============================
INDUSTRIES – COVERAGE SECTION
=============================== */
.industries-cov{ background:#F3F4F6; }
.industries-cov .wrap{
max-width:1440px; margin-inline:auto;
padding:3.75rem 1rem;
}
@media (min-width:768px){ .industries-cov .wrap{ padding:3.75rem 2rem; } }
@media (min-width:1024px){ .industries-cov .wrap{ padding:8rem 3.75rem; } }
/* Section title + lead */
.industries-cov .title{
color:#143960; font-family:Roboto,Arial,sans-serif;
font-weight:700; font-size:33.808px; line-height:140% letter-spacing:-0.876px;
margin:0 0 1rem; text-align:left;
}
@media (min-width:768px){ .industries-cov .title{ font-size:39.808px; } }
@media (max-width:768px){
.industries-cov .title{ font-size:27.65px; }
.ind-card .icon{ width:40px; height:40px; flex:0 0 40px; }
.ind-card{padding:2rem; }
}
.industries-cov .lead{
color:#262626; font-family:Roboto,Arial,sans-serif;
font-weight:400; font-size:16px; line-height:125%;
margin:0 0 4rem; max-width:77%;
}
@media (max-width:1023.98px){ .industries-cov .lead{ max-width:100%; } }
/* Grid */
.industries-grid{
display:grid; grid-template-columns:1fr; gap:1.5rem;
}
@media (min-width:768px){ .industries-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .industries-grid{ gap:3rem; } }
/* Card */
.ind-card{
background:#F9FAFB; border:1px solid #E5E7EB; border-radius:16px;
padding:2rem;
box-shadow:0 1px 0 rgba(0,0,0,.02), 0 8px 24px rgba(0,0,0,.04);
}
.ind-card .row{ display:flex; align-items:flex-start; gap:1rem; }
.ind-card .icon{ width:35px; height:35px; flex:0 0 35px; }
/* Card heading (H4 spec) */
.ind-card .heading{
color:#143960; font-family:Roboto,Arial,sans-serif;
font-weight:700; font-size:24.65px; line-height:100%; letter-spacing:-0.553px;
margin:.1rem 0 1rem;
}
/* Card description */
.ind-card .desc{
color:#262626; font-family:Roboto,Arial,sans-serif;
font-weight:400; font-size:17px; line-height:125%;
margin:0;
}
/* ===============================
BOTTOM CTA ROW
=============================== */
.ind-cov-cta{ margin-top:2.5rem; }
@media (min-width:1024px){ .ind-cov-cta{ margin-top:4rem; } }
.ind-cov-cta .cta-title{
color:#143960; font-family:Roboto,Arial,sans-serif;
font-weight:700; font-size:27.65px; line-height:100%; letter-spacing:-0.553px;
margin:0 0 .5rem;
}
.ind-cov-cta .row{
display:flex; flex-direction:column; gap:1rem;
}
@media (min-width:1024px){
.ind-cov-cta .row{ flex-direction:row; align-items:center; justify-content:space-between; }
}
.ind-cov-cta .text{
color:#262626; font-family:Roboto,Arial,sans-serif;
font-weight:400; font-size:16px; line-height:125%;
margin:0; width: 100%; margin-top: 1rem;
}
@media (max-width:1023.98px){ .ind-cov-cta .text{ max-width:100%; } }
@media (min-width:1024px){ .ind-cov-cta .text{
width: 75%;
}
}
.ind-actions{ display:flex; gap:.75rem; flex-wrap:wrap; align-items: center; }
@media (max-width:768px){ .ind-actions a { width: 100%; height: 100%; } }
/* ===============================
RTL SUPPORT
=============================== */
[dir="rtl"] .industries-cov .title,
[dir="rtl"] .industries-cov .lead,
[dir="rtl"] .ind-cov-cta .cta-title,
[dir="rtl"] .ind-cov-cta .text{ text-align:right; }
[dir="rtl"] .ind-card .row{ flex-direction:row-reverse; }
.trusted-custom{
background: #FAFAFA;
}
.text-trusted-h1{
color: var(--Primary-PR-01, #143960);
text-align: center;
font-size: 27.65px;
font-style: normal;
font-weight: 700;
line-height: 100%;
margin: 0 0 1rem;
letter-spacing: -0.553px;
}
.text-trusted-p{
color: var(--Neutral-Neutral-800, #262626);
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 125%; /* 20px */
margin: 0 0 4rem;
}
/* ===== Hero: Enterprise Suite (non-conflicting block) ===== */
.hero-suite{
background: linear-gradient(180deg, #143960 0%, #1E7CAE 100%);
padding:4rem 0;
}
@media (min-width:1024px){
.hero-suite{ padding:5rem 0; }
}
/* مركزية الهيورو */
.hero-suite__wrap{ display:block; }
.hero-suite__center{
margin:0 auto; text-align:center;
}
/* العنوان الرئيسي — Display 57.2 / 700 / 115% / -1.144px */
.hero-suite__title{
color:#F9FAFB;
font-weight:700;
line-height:140%
letter-spacing:-1.144px;
font-size: clamp(2rem, 4.2vw + 1rem, 57.2px);
margin:0 0 2rem;
}
/* العنوان الفرعي — H4 27.65 / 700 / 100% / -0.553 */
.hero-suite__eyebrow{
color:#F9FAFB;
font-weight:700;
line-height:100%;
letter-spacing:-0.553px;
font-size:clamp(1.05rem, 1.2vw + .9rem, 27.65px);
margin:0 0 1rem;
}
/* التفاصيل — 18 / 400 / 120% */
.hero-suite__lead{
color:#F9FAFB;
font-size:clamp(.95rem, .4vw + .9rem, 18px);
line-height:120%;
font-weight:400;
margin:0 auto 2rem;
max-width:103ch;
}
.pplans .hero-suite__lead{
color:#030712;
}
.hero__actions_custom{
justify-content: center !important;
}
/* الأزرار بنمط الموقع (نفترض وجود .btn) */
.hero-suite__actions{
display:flex; flex-wrap:wrap; gap:.75rem;
align-items:center; justify-content:center;
}
/* إن لم تكن أزرار الموقع موجودة يمكنك إبقاء هذا كاحتياطي:
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.875rem 2rem;border-radius:999px;font-size:1.1rem;line-height:140%letter-spacing:-.32px;font-weight:400;text-decoration:none;cursor:pointer;transition:opacity .2s ease,background-color .2s ease,border-color .2s ease;}
.btn--primary{background:#15365C;color:#fff;border:1px solid #15365C;}
.btn--primary:hover{opacity:.9;}
.btn--ghost{background:transparent;color:#143960;border:1px solid #143960;}
.btn--ghost:hover{background:rgba(20,57,96,.06);}
*/
/* دعم RTL */
[dir="rtl"] .hero-suite__center{ text-align:center; }
/* المسافات العامة للقسم */
.trusted { padding-block: 4rem; }
/* الحاوية القابلة للتمرير */
.trusted__scroller{
overflow: hidden; /* نخفي السكروبَار لأننا نحرّك تلقائي */
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
direction: ltr; /* مهم علشان scrollLeft يكون موجب حتى بموقع RTL */
cursor: grab;
user-select: none;
}
.trusted__scroller::-webkit-scrollbar{ display:none; }
.trusted__scroller.is-dragging{ cursor: grabbing; }
/* صف الشعارات */
.trusted__row{
display:flex;
align-items:center;
justify-content:space-between;
gap:2.3rem; /* ~4.8px */
flex-wrap:nowrap;
/* ما في ترانزشن هنا: الحركة تتم بالاسكرول */
}
@media (min-width:768px){ .trusted__row{ gap:2.3rem; } }
/* كل عنصر شعار */
.trusted__item{
flex:0 0 auto;
width:6.25rem; /* 100px */
}
@media (min-width:768px){ .trusted__item{ width:7.5rem; } } /* 120px */
@media (min-width:1024px){ .trusted__item{ width:8.75rem; } } /* 140px */
/* الصورة داخل العنصر */
.trusted__img{
display:block;
width:100%;
height:31px;
object-fit:contain;
pointer-events: none; /* يحسّن السحب */
}
@media (min-width:768px){ .trusted__img{ height:40px; } }
@media (min-width:1024px){ .trusted__img{ object-fit:scale-down; } }
.trusted__row ~ .trusted__row {
display: none !important;
}
/* ===== Hero: Enterprise Suite (non-conflicting block) ===== */
.hero-suite{
background:linear-gradient(180deg, #143960 0%, #1E7CAE 100%) !important;
padding:4rem 0;
}
@media (min-width:1024px){
.hero-suite{ padding:4rem 0; }
}
/* حاوية عامة قد تكون لديك مسبقاً */
.container{ max-width:90rem; margin:0 auto; padding:0 1.875rem; }
@media (min-width:768px){ .container{ padding:0 1.875rem; } }
@media (min-width:1024px){ .container{ padding:0 3.75rem; } }
/* مركزية الهيورو */
.hero-suite__wrap{ display:block; }
.hero-suite__center{
text-align:center;
}
/* العنوان الرئيسي — Display 57.2 / 700 / 115% / -1.144px */
.hero-suite__title{
color:#F9FAFB;
font-weight:700;
line-height:140%
letter-spacing:-1.144px;
font-size: clamp(2rem, 4.2vw + 1rem, 57.2px);
margin:0 0 2rem;
}
/* العنوان الفرعي — H4 27.65 / 700 / 100% / -0.553 */
.hero-suite__eyebrow{
color:#F9FAFB;
font-weight:700;
line-height:100%;
letter-spacing:-0.553px;
font-size:clamp(1.05rem, 1.2vw + .9rem, 27.65px);
margin:0 0 1rem;
}
/* التفاصيل — 18 / 400 / 120% */
.hero-suite__lead{
color:#F9FAFB;
font-size:clamp(.95rem, .4vw + .9rem, 18px);
line-height:120%;
font-weight:400;
}
/* الأزرار بنمط الموقع (نفترض وجود .btn) */
.hero-suite__actions{
display:flex; flex-wrap:wrap; gap:.75rem;
align-items:center; justify-content:center;
}
/* إن لم تكن أزرار الموقع موجودة يمكنك إبقاء هذا كاحتياطي:
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.875rem 2rem;border-radius:999px;font-size:1.1rem;line-height:140%letter-spacing:-.32px;font-weight:400;text-decoration:none;cursor:pointer;transition:opacity .2s ease,background-color .2s ease,border-color .2s ease;}
.btn--primary{background:#15365C;color:#fff;border:1px solid #15365C;}
.btn--primary:hover{opacity:.9;}
.btn--ghost{background:transparent;color:#143960;border:1px solid #143960;}
.btn--ghost:hover{background:rgba(20,57,96,.06);}
*/
/* دعم RTL */
[dir="rtl"] .hero-suite__center{ text-align:center; }
/* ===== Chatbot Partners (scoped) ===== */
.chatbot-partners{
--pr-01:#143960;
--pr-05:#249EDC;
--neutral-800:#262626;
--card-border:#E7EDF3;
--bg:#F9FAFB;
background: var(--bg);
padding: 3.25rem 1.875rem; /* موبايل: 52px عمودي، 30px أفقي */
}
@media (min-width:1024px){
.chatbot-partners{ padding: 8rem 3.75rem; } /* ديسكتوب: 128px / 60px */
}
.chatbot-partners .cp__container{
max-width: 1440px;
margin-inline: auto;
text-align: center;
}
.chatbot-partners .cp__eyebrow{
color: var(--pr-05);
font-size: 0.9375rem; /* 15px */
line-height: 1.3;
font-weight: 600;
margin-bottom: 0.75rem;
}
.chatbot-partners .cp__title{
color: var(--pr-01);
font-weight: 600;
font-size: 3.575rem; /* 57.2px */
line-height: 1.15;
letter-spacing: -0.02em;
margin: 0 0 1rem 0;
}
.chatbot-partners .cp__desc{
color: var(--neutral-800);
font-size: 1.125rem; /* 18px */
line-height: 1.35;
max-width: 980px;
margin: 0 auto 2.5rem auto;
}
.chatbot-partners .cp__grid{
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 1.25rem;
justify-items: center;
}
@media (min-width:768px){
.chatbot-partners .cp__grid{ grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5rem; }
}
@media (min-width:1024px){
.chatbot-partners .cp__grid{ grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1.75rem; }
}
.chatbot-partners .cp__card{
width: 100%;
max-width: 210px;
aspect-ratio: 1/1;
background: #fff;
border: 1px solid var(--card-border);
border-radius: 1.25rem; /* 20px */
display: grid;
place-items: center;
box-shadow: 0 4px 14px rgba(20,57,96,0.06);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.chatbot-partners .cp__card:hover{
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(20,57,96,0.10);
border-color: rgba(36,158,220,0.55);
}
.chatbot-partners .cp__logo{
width: 68%;
max-width: 150px;
height: auto;
object-fit: contain;
}
/* (اختياري) ضبط نصوص RTL */
.chatbot-partners[dir="rtl"] .cp__desc{ text-align: center; }
/* ===== Audit Hero (scoped) ===== */
.audit-hero{
--PR-01:#143960; /* Primary-PR-01 */
--PR-04:#1E7CAE; /* Primary-PR-04 */
--NTRL-900:#171717; /* Neutral-900 */
--bg:#F3F4F6;
background: var(--bg);
padding: 3.25rem 1.875rem; /* 52px V, 30px H (mobile) */
}
@media (min-width:1024px){
.audit-hero{ padding: 8rem 3.75rem; } /* 128px V, 60px H (desktop) */
}
.audit__container{
max-width: 1200px;
margin-inline: auto;
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
align-items: center;
}
@media (min-width:1024px){
.audit__container{
grid-template-columns: 1.2fr 0.8fr; /* text | image */
gap: 3rem;
}
}
/* ========== Typography ========== */
.audit__title{
color: var(--PR-01);
font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
font-size: 47.776px;
font-weight: 700;
line-height: 115%; /* 54.942px */
letter-spacing: -0.956px;
margin: 0 0 0.5rem 0;
}
.audit__kicker{
color: var(--PR-04);
font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
font-size: 21px;
font-weight: 700;
line-height: 100%; /* 21px */
letter-spacing: -0.42px;
margin: 0 0 1rem 0;
}
.audit__desc{
color: var(--NTRL-900);
font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 24px; /* 141.176% */
max-width: 640px;
margin: 0 0 1.75rem 0;
}
/* ========== Pills (SVG circles) ========== */
.audit__pills{
display: flex;
gap: 0.875rem; /* 14px */
align-items: center;
padding: 0;
margin: 0;
list-style: none;
}
.audit__pill{
height: 72px;
display: grid;
place-items: center;
}
.pill__svg{
width: 100%;
height: 100%;
display: block;
}
/* ========== Visual ========== */
.audit__visual{
display: flex;
justify-content: center;
}
.audit__visual img{
height: auto;
border-radius: 6px;
}
/* ===== Key Features (scoped) ===== */
.kf{
--PR-01:#143960;
--PR-04:#1E7CAE;
--N900:#171717;
--GY300:#D1D5DB;
--GY100:#F3F4F6;
--bg:#F9FAFB;
background: var(--bg);
padding: 3.25rem 1.875rem; /* mobile: 52px V, 30px H */
}
@media (min-width:1024px){
.kf{ padding: 8rem 3.75rem; } /* desktop: 128px V, 60px H */
}
.kf__container{
max-width: 1440px;
margin-inline: auto;
text-align: center;
}
/* Top texts */
.kf__eyebrow{
color: var(--PR-04);
font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
font-size: 21px;
font-weight: 700;
line-height: 100%; /* 21px */
letter-spacing: -0.42px;
margin: 0 0 1rem 0; /* المسافة بين الأول والثاني = 1rem */
}
.kf__title{
color: var(--PR-01);
font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
font-size: 47.776px;
font-weight: 700;
line-height: 115%; /* 54.942px */
letter-spacing: -0.956px;
margin: 0 0 2rem 0; /* المسافة بين الثاني والثالث = 2rem */
}
.kf__desc{
color: var(--N900);
font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 125%; /* 20px */
max-width: 980px;
margin: 0 auto 2.25rem auto;
}
/* Grid */
.kf__grid{
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
list-style: none;
padding: 0;
margin: 0;
}
@media (min-width:640px){
.kf__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.25rem; }
}
@media (min-width:768px){
.kf__grid{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.5rem; }
}
@media (min-width:1024px){
.kf__grid{ grid-template-columns: repeat(5, minmax(0,1fr)); gap: 1.5rem; }
}
/* Card */
.kf__card{
display: flex;
height: 226px;
padding: 32px;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1 0 0;
border-radius: 20px;
border: 1px solid var(--GY300);
background: var(--GY100);
}
.kf__card-title{
color: var(--PR-01);
text-align: center;
font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
font-size: 23.04px;
font-style: normal;
font-weight: 700;
line-height: 115%; /* 26.496px */
letter-spacing: -0.461px;
margin: 0 0 1rem 0;
}
.kf__card-text{
color: var(--N900);
text-align: center;
font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 125%; /* 20px */
margin: 0;
max-width: 34ch;
}
/* ===== Profiles Hero (scoped) ===== */
.profiles-hero{
/* ألوان من التوكنز */
--N50:#FAFAFA;
--PR06:#55B3E2;
--BG:#143960; /* خلفية داكنة (يمكن ربطها بتوكن البديل لديك) */
background: var(--BG);
padding: 5rem 1.875rem; /* 80px عمودي / 30px أفقي (موبايل) */
}
@media (min-width:1024px){
.profiles-hero{ padding: 5rem 3.75rem; } /* 80px عمودي / 60px أفقي (ديسكتوب) */
}
.profiles-hero .ph__container{
max-width: 1440px;
margin-inline: auto;
text-align: center;
}
/* Title (Display) */
.profiles-hero .ph__title{
color: var(--N50);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 57.2px;
font-weight: 700;
line-height: 115%; /* 65.78px */
letter-spacing: -1.144px;
margin: 0 0 32px; /* مسافة تحت العنوان = 32px */
}
/* Subtitle (H4) */
.profiles-hero .ph__subtitle{
color: var(--PR06);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 27.65px;
font-weight: 700;
line-height: 100%; /* 27.65px */
letter-spacing: -0.553px;
margin: 0 0 16px; /* مسافة تحت العنوان الفرعي = 16px */
}
/* Body */
.profiles-hero .ph__desc{
color: var(--N50);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 24px; /* 141.176% */
max-width: 960px;
margin: 0 auto;
}
/* تحسين الاستجابة على الشاشات الصغيرة مع الحفاظ على النِسَب */
@media (max-width:640px){
.profiles-hero .ph__title{ font-size: 36px; letter-spacing: -0.7px; }
.profiles-hero .ph__subtitle{ font-size: 20px; }
.profiles-hero .ph__desc{ font-size: 15px; line-height: 22px; }
}
/* ===== Accessibility Tools Tabs (scoped) ===== */
.atabs{
--PR01:#143960;
--N800:#262626;
--N80:#F4F6F7; /* لِنص زر مفعل */
--GY300:#D1D5DB;
--GY50:#F9FAFB;
--TabsBg:#F1F5F9;
--PanelPink:#F5C9C9; /* الوردي للخلفية – عدّله لو عندك رمز محدد */
background:#F3F4F6;
padding: 3.25rem 1.875rem; /* 52px V / 30px H */
}
@media (min-width:1024px){
.atabs{ padding: 8rem 3.75rem; } /* 128px V / 60px H */
}
.atabs .atabs__container{
max-width: 1440px;
margin-inline: auto;
text-align: center;
}
/* Heading */
.atabs .atabs__title{
color: var(--PR01);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 39.808px;
font-weight: 700;
line-height: 115%; /* 45.779px */
letter-spacing: -0.876px;
margin: 0 0 12px; /* 12px تحت العنوان */
}
/* Lead/Details */
.atabs .atabs__lead{
color: var(--N800);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 125%; /* 20px */
max-width: 980px;
margin: 0 auto 20px;
}
/* Tabs row */
.atabs .atabs__tabs {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
flex-wrap: wrap;
border-radius: 999px;
background: var(--Gray-GRY-50, #F9FAFB);
box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.05), -2px -2px 10px 0 rgba(0, 0, 0, 0.05);
width: fit-content;
margin: auto;
margin-bottom: 64px;
padding: 8px;
}
@media (max-width:767px){
.atabs .atabs__tabs {
border-radius: 25px;
justify-content: space-between;
}
.atabs .atabs__tab {
width: 100%;
}
.atabs .atabs__row {
justify-content: space-between !important;
}
.atabs .atabs__panel {
background: none !important;
padding: 0 !important;
}
}
@media (min-width:767px){
.atabs .atabs__tab {
padding: 12px 50px;
}
}
/* Tab button (pill) — قياسات الفيجما: padding Y=12, X≈70, radius كبير */
.atabs .atabs__tab{
color: var(--PR01);
background: transparent;
border: none;
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 20px; /* 125% */
letter-spacing: 0.1px;
padding: 12px 70px;
border-radius: 9999px;
cursor: pointer;
transition: transform .10s ease, background .10s ease, color .10s ease, box-shadow .10s ease;
}
.atabs .atabs__tab:hover{ transform: translateY(-1px); }
.atabs .atabs__tab.is-active{
background: var(--PR01);
color: var(--N80);
box-shadow: 0 6px 18px rgba(20,57,96,.18) inset, 0 4px 16px rgba(20,57,96,.18);
}
.atabs[dir="rtl"] .atabs__tabs{ direction: rtl; }
/* Pink panel */
.atabs .atabs__panel{
background: #F3F4F6 ;
padding: 32px; /* 32px من كل الجهات */
border-radius: 6px;
}
.atabs .atabs__panel[hidden]{ display:none; }
/* Cards row – سلايدر على الموبايل، شبكة على الديسكتوب */
.atabs .atabs__row{
display: flex;
gap: 32px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 8px;
align-items: stretch;
justify-content: center;
}
.atabs .atabs__row:focus{ outline: none; }
.atabs .atabs__card{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* العرض الصحيح في السلايدر */
flex: 0 0 260px; /* كان 1 0 0 */
min-width: 260px; /* كان 190px */
max-width: 216px; /* كان 190px */
box-sizing: border-box;
padding: 32px;
border-radius: 20px;
border: 1px solid #D1D5DB;
background: #F9FAFB;
}
/* === ديسكتوب: شبكة 4 أعمدة تملأ العرض بالتساوي === */
@media (min-width:1024px){
.atabs .atabs__row{
overflow: visible; /* إلغاء سكرول السلايدر */
scroll-snap-type: none;
}
.atabs .atabs__card{
flex: initial; /* فك التثبيت */
width: 100%; /* خليه ياخد 1fr كامل */
min-width: 190px;
max-width: 216px;
}
}
/* أيقونة */
.atabs .atabs__icon{
width: 52px;
height: 52px;
aspect-ratio: 1/1;
object-fit: contain;
margin-bottom: 16px; /* 16px بين الأيقونة والعنوان */
}
/* عنوان البطاقة */
.atabs .atabs__card-title{
color: var(--PR01);
text-align: center;
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 19px;
font-weight: 600;
line-height: 115%; /* 21.85px */
letter-spacing: -0.38px;
margin: 0 0 4px; /* 8px بين العنوان والنص */
}
/* نص البطاقة */
.atabs .atabs__card-text{
color: var(--N800);
text-align: center;
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 125%; /* 18.75px */
letter-spacing: -0.15px;
margin: 0;
}
/* ديسكتوب: 4 أعمدة ثابتة، ما في سكرول */
@media (min-width:1024px){
.atabs .atabs__row{
overflow: visible;
scroll-snap-type: none;
}
.atabs .atabs__card{ flex: initial; }
}
/* ===== Section shell ===== */
.trial30{
--PR01:#143960; --PR05:#249EDC;
--N800:#262626; --N600:#525252; --N500:#737373;
--N300:#D1D5DB; --N100:#F3F4F6; --err:#E11D48;
background:#F7FAFD; padding:5rem 1.875rem;
}
@media (min-width:1024px){ .trial30{ padding:5rem 3.75rem; } }
.t30__container{
max-width:1440px; margin-inline:auto;
display:grid; grid-template-columns:1fr; gap:2rem;
}
@media (min-width:1024px){
.t30__container{ grid-template-columns:1.05fr 0.95fr; column-gap:48px; align-items:start; }
}
/* ===== Left copy ===== */
.t30__title{
color:var(--PR01); font:700 47.776px/115% Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; letter-spacing:-0.956px; margin:0 0 8px;
}
.t30__eyebrow{
color:var(--PR05); font:700 21px/100% Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; letter-spacing:-0.42px; margin:0 0 32px;
}
.t30__body{ display:flex; flex-direction:column; gap:32px; }
.t30__para{ color:var(--N800); font:400 17px/24px Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; margin:0; }
.t30__bullets{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.t30__bullets li{ display:flex; align-items:flex-start; gap:10px; color:var(--N800); font:400 16px/125% Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; align-items: center; }
.t30__check{ width: 26px;
height: 27px; margin-top:4px; }
/* ===== Form spacing ===== */
.t30__formwrap{
width:100%; border-radius: 20px;
background: var(--Gray-GRY-50, #F9FAFB);
box-shadow: -4px -4px 16px 0 rgba(214, 217, 217, 0.40), 4px 4px 16px 0 rgba(214, 217, 217, 0.40);
display: flex;
padding: 14px;
flex-direction: column;
align-items: flex-start;
gap: 16px;
flex: 1 0 0;
align-self: stretch;
}
@media (min-width:1024px){
.t30__formwrap{ padding: 64px; }
}
#t30-form, #t30-form-ar{ display:flex; flex-direction:column; gap:16px; }
/* ===== Floating label states ===== */
.t30__field{ position:relative; }
.t30__control{
width:100%; padding: 16px 32px; border-radius:9999px;
border:1px solid #6B7280; background:transparent;
padding-inline:18px 44px;
color:var(--N800); font:400 16px/115% Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
transition:border-color .10s ease, box-shadow .10s ease, background .10s ease; appearance:none;
}
.trial30[dir="rtl"] .t30__control{ padding-inline:44px 18px; }
.t30__flabel{
position:absolute; inset-inline-start:18px; inset-block-start:50%;
transform:translateY(-50%); color:#9CA3AF; pointer-events:none; transition:all .10s ease;
background:transparent; padding:0 4px;
}
.trial30[dir="rtl"] .t30__flabel{ inset-inline-start:auto; inset-inline-end:18px; }
.t30__field.is-focused .t30__control{ border: 1px solid #249EDC !important; box-shadow:0 0 0 3px rgba(36,158,220,.12); }
.t30__field.is-focused .t30__flabel,
.t30__field.is-filled .t30__flabel{
inset-block-start:-6px; transform:none; background:#F9FAFB; color:var(--PR05);
font:400 15px/125% Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; letter-spacing:-0.15px;
}
/* Error state */
.t30__field.is-error .t30__control{ border-color:var(--err); box-shadow:0 0 0 3px rgba(225,29,72,.12); }
.t30__field.is-error .t30__flabel{ color:var(--err); }
.t30__state-icon{
position:absolute; inset-inline-end:14px; inset-block:0; margin:auto 0;
width:20px; height:20px; display:none; background-repeat:no-repeat; background-position:center; background-size:contain;
}
.t30__field.is-error .t30__state-icon{
display:block;
background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23E11D48' stroke-width='2'/%3E%3Cpath d='M12 7v7' stroke='%23E11D48' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17' r='1.5' fill='%23E11D48'/%3E%3C/svg%3E");
}
.t30__hint{
position:absolute; inset-block-end:18px; inset-inline-end:42px;
color:var(--err); font:400 12.5px/1 Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; display:none;
}
.trial30[dir="rtl"] .t30__hint{ inset-inline-end:auto; inset-inline-start:42px; }
.t30__field.is-error .t30__hint{ display:block; }
/* Select looks native (no typing); just spacing for arrow/native UI */
.t30__select{ background:transparent; }
/* Phone group */
.t30__field--phone .t30__phone{ display:flex; gap:8px; align-items:center; }
.t30__cc{
height:56px; min-width:110px; border-radius:9999px; border:1px solid var(--N300); background:#fff;
padding-inline:12px 28px; color:var(--N800); font:400 16px/115% Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; appearance:none;
}
.t30__input--phone{ flex:1; }
/* Consent/terms + button */
.t30__consent{ color:var(--N600); font:400 15px/125% Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; margin:8px 0 0; }
.t30__terms{ color:var(--N500); font:400 16px/115% Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; margin:0; }
.t30__link{ color:var(--PR05); text-decoration:none; font:400 15px/125% Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; }
.t30__link:hover{ text-decoration:underline; }
.t30__btn{
height:44px; border-radius:9999px; border:0; background:var(--PR01); color:#fff; cursor:pointer;
padding:0 22px; font:600 15.5px/1 Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; margin-top:4px; width: fit-content;
}
.t30__btn:hover{ filter:brightness(1.05); }
/* ===== Container ===== */
.pplans{
--PR01:#143960; --N900:#171717; --N800:#262626; --N600:#525252;
--N300:#D1D5DB; --N100:#F3F4F6; --N80:#F4F6F7; --GYborder:#E5E7EB;
padding: 5rem 1.875rem; /* 80px V / 30px H */
background: #F3F4F5;
}
@media (min-width:1024px){ .pplans{ padding:5rem 3.75rem; } }
.pplans__container{ max-width: 1280px; margin: 0 auto; }
/* ===== Tabs (same spec as previous section) ===== */
.ptabs{
display:flex; justify-content:center; flex-wrap:wrap; gap:16px;
border-radius: 999px;
background: var(--Gray-GRY-50, #F9FAFB);
box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.05), -2px -2px 10px 0 rgba(0, 0, 0, 0.05);
width: fit-content;
margin: auto;
margin-bottom: 64px;
padding: 8px;
}
.ptab{
color: var(--PR01);
background: #F9FAFB;
border: none;
font: 500 16px/20px Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
letter-spacing: .1px;
padding: 12px 32px;
border-radius: 9999px;
cursor: pointer;
transition: .10s ease;
}
.ptab:hover{ transform: translateY(-1px); }
.ptab.is-active{
background: var(--PR01);
color: var(--N80);
box-shadow: 0 6px 18px rgba(20,57,96,.18) inset, 0 4px 16px rgba(20,57,96,.18);
}
.pplans__panel[hidden]{ display:none; }
/* ===== Grid ===== */
.pplans__grid{
display:grid;
grid-template-columns: 1fr;
gap: 24px;
}
@media (min-width:768px){
.pplans__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width:1024px){
.pplans__grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
/* ===== Card ===== */
.pplans-card{
border: 1px solid var(--GYborder);
background: #FCFCFC;
border-radius: 16px;
padding: 24px;
display:flex; flex-direction:column; gap: 16px;
box-shadow: 0 2px 8px rgba(16,24,40,.04);
}
.pplans-card__title{
color: var(--PR01);
font: 700 23.04px/115% Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
letter-spacing: -0.461px;
margin: 0;
}
/* Price */
.pplans-card__price{ display:flex; align-items:baseline; gap: 6px; display: none; }
.pplans-card__currency{ color: var(--Neutral-NTRL-800, #262626);
font-family: Roboto;
font-size: 39.808px;
font-style: normal;
font-weight: 700;
line-height: 115%; /* 45.779px */
letter-spacing: -0.876px;}
.pplans-card__amount{color: var(--Neutral-NTRL-800, #262626);
font-family: Roboto;
font-size: 39.808px;
font-style: normal;
font-weight: 700;
line-height: 115%; /* 45.779px */
letter-spacing: -0.876px; }
.pplans-card__per{ color: var(--Neutral-NTRL-800, #262626);
/* EN Typography/Body Text */
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 125%;
}
/* Desc */
.pplans-card__desc{
color: var(--N800);
font: 400 15.5px/145% Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
margin: 0 0 4px 0;
}
/* Features */
.pplans-card__features{
list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px;
}
.pplans-card__feature{ display:flex; gap:10px; align-items:flex-start; color:var(--N800); font:400 15.5px/135% Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; }
.pplans-card__icon{ width:20px; height:20px; margin-top:2px; }
/* CTA */
.pplans-card__btn{
margin-top:auto;
display:block; text-align:center;
height:44px; line-height:44px;
border-radius:9999px; text-decoration:none;
background: var(--PR01); color:#fff;
display: flex;
align-items: center;
justify-content: center;
font:600 15.5px/1 Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
.pplans-card__btn:hover{ filter:brightness(1.05); }
/* ====== Hemam Team (Hero band) ====== */
.team-hero{
/* غيّر الأزرق لو عندك توكن مختلف */
--HeroBlue: #249EDC; /* Primary PR-05 تقريبًا من تصميمكم */
--NTRL-50: #FAFAFA;
--NTRL-900: #171717;
background: var(--HeroBlue);
padding: clamp(56px, 8vw, 80px) 24px; /* متجاوب: من ~56px إلى 120px عموديًا */
}
.team-hero__inner{
max-width: 1280px;
margin-inline: auto;
text-align: center;
}
/* العنوان */
.team-hero__title{
color: var(--Neutral-NTRL-50, var(--NTRL-50));
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-weight: 700;
line-height: 115%;
letter-spacing: -1.144px;
/* متجاوب حسب المواصفة 57.2px كحد أعلى */
font-size: clamp(34px, 4.2vw, 57.2px);
margin: 0 0 2rem;
}
/* التفاصيل */
.team-hero__desc{
color: var(--Neutral-NTRL-900, #171717);
text-align: center;
/* EN Typography/Large Text */
font-family: Roboto;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 120%; /* 21.6px */
max-width: 900px; /* حسب طلبك */
margin: 0 auto; /* توسيط */
}
/* تحسينات صغيرة للجوال */
@media (max-width: 640px){
.team-hero__desc{ padding-inline: 6px; } /* تنفّس بسيط داخل الشاشة الصغيرة */
}
/* دعم اتجاه RTL عند الحاجة */
.team-hero[dir="rtl"] .team-hero__inner{ text-align: center; } /* يظل في الوسط */
/* ===== Team Cards ===== */
.teamcards{
--PR01:#143960;
--N800:#262626;
--BORDER:#E5E7EB;
background: transparent;
padding: 8rem 1.5rem; /* مساحة عامة حول الشبكة */
}
.teamcards__container{ max-width: 1280px; margin-inline:auto; }
.teamcards__grid{
display:grid;
grid-template-columns: 1fr;
gap: 48px;
}
@media (min-width: 700px){
.teamcards__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1024px){
.teamcards__grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 1280px){
.teamcards__grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
/* Card */
.tcard{
background:#fff;
border:1px solid var(--BORDER);
border-radius: 14px;
overflow:hidden;
box-shadow: 0 2px 8px rgba(16,24,40,.04);
display:flex; flex-direction:column; height:100%;
border-radius: 22px;
}
/* Image: تُعرض كاملة كما هي */
.tcard__img{
display:block;
width:100%;
height:auto; /* بدون قص */
border-bottom:1px solid var(--BORDER);
}
/* Body */
.tcard__body{ padding: 16px; display:flex; flex-direction:column; background: #F5F5F5;}
/* الاسم (H6) */
.tcard__name{
color: var(--PR01);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 21px;
font-weight: 700;
line-height: 100%; /* 21px */
letter-spacing: -0.42px;
margin: 0;
}
/* الوصف (18px) مع padding-top:8px */
.tcard__role{
color: var(--PR01);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 120%; /* 21.6px */
padding-top: 8px;
}
/* التفاصيل (16px/17px حسب طلبك 17px) مع padding-top:16px */
.tcard__bio{
color: var(--N800);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 24px; /* 141.176% */
padding-top: 16px;
margin: 0;
}
/* Social */
.tcard__social{
display:flex; gap: 10px;
margin-top: 12px;
}
.tcard__iconlink{
display:inline-flex; align-items:center; justify-content:center;
width: 28px; height: 28px; border-radius: 6px;
background:#F3F4F6; border:1px solid var(--BORDER);
}
.tcard__iconlink img{
width:24px; height:24px; aspect-ratio:1/1; display:block;
}
.tcard__iconlink:hover{ filter:brightness(1.03); }
/* ===== Strategic Partners ===== */
.spartners{
padding: 3.5rem 1.5rem; /* مساحة عامة (يمكن تعديلها لتتطابق مع نظامك) */
background: transparent;
}
.spartners__container{ max-width: 1280px; margin-inline: auto; }
/* عنوان القسم */
.spartners__title{
color: var(--Primary-PR-01, #143960);
text-align: center;
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 39.808px;
font-style: normal;
font-weight: 700;
line-height: 115%; /* 45.779px */
letter-spacing: -0.876px;
margin: 0 0 64px; /* padding-bottom: 64px حسب الطلب */
}
/* الشبكة */
.spartners__list{
display: flex;
flex-wrap: wrap;
gap: 28px; /* مسافة بين الكروت */
justify-content: flex-start;
}
/* كارت الشعار */
.spcard{
display: flex;
justify-content: center;
align-items: center;
padding: 32px;
border-radius: 20px;
border: 1px solid var(--Gray-GRY-200, #E5E7EB);
background: var(--Gray-GRY-100, #F3F4F6);
box-sizing: border-box;
width: 408px;
height: 213px;
}
/* صورة الشعار داخل الكارت */
.spcard__img{
width: 100%;
height: 120px; /* ارتفاع ثابت مريح للشعارات */
object-fit: none; /* بدون قص للصور */
display: block;
}
/* تحسينات استجابة صغيرة */
@media (max-width: 480px){
.spartners{ padding-inline: 1rem; }
.spcard{ min-width: 100%; } /* كارت بعرض الشاشة في الجوال */
}
/* ===== Partnership CTA ===== */
.partners-cta{
/* بإمكانك تغيير الخلفية إن رغبت */
background:#F3F4F6;
padding-block: 124px; /* من الأعلى والأسفل كما في القياسات */
padding-inline: 24px;
}
.partners-cta__inner{
max-width: 1100px; /* عرض مريح للعنوان */
margin-inline: auto;
text-align: center;
}
/* Eyebrow (H6) */
.partners-cta__eyebrow{
color: var(--Primary-PR-05, #249EDC);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: clamp(15px, 2.3vw, 21px);
font-style: normal;
font-weight: 700;
line-height: 100%; /* 21px */
letter-spacing: -0.42px;
margin: 0 0 16px; /* padding-bottom: 16px */
}
/* Title (H1) */
.partners-cta__title{
color: var(--Primary-PR-01, #143960);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: clamp(30px, 4.2vw, 47.776px);
font-style: normal;
font-weight: 700;
line-height: 115%; /* 54.942px */
letter-spacing: -0.956px;
margin: 0 0 32px; /* padding-bottom: 32px */
}
/* Body (17/24) */
.partners-cta__desc{
color: var(--Neutral-NTRL-800, #262626);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 17px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 141.176% */
margin: 0;
max-width: 920px; /* عرض النص الوسط */
margin-inline: auto;
}
/* دعم RTL عند الحاجة */
.partners-cta[dir="rtl"] .partners-cta__inner{ text-align:center; }
/* ===== Newsroom Hero (AR) ===== */
.newsroom-hero{
padding: 80px 60px; /* يمكنك تعديل القيم حسب الصفحة */
background: #F3F4F6; /* اختياري */
}
.nr__inner{ max-width: 1100px; margin: 0 auto; text-align: center; }
/* العنوان الفرعي (H4) */
.nr__eyebrow{
color: var(--Primary-PR-400, #249EDC);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-weight: 700;
line-height: 100%; /* 27.65px */
letter-spacing: -0.553px;
font-size: clamp(18px, 2.2vw, 27.65px);
margin: 0 0 16px;
}
/* العنوان (H1) */
.nr__title{
margin: 0 0 32px;
font-size: 0; /* إزالة فراغ inline بين السبانات */
}
.nr__title-main,
.nr__title-accent{
display: inline-block;
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-weight: 700;
line-height: 115%; /* 54.942px عند 47.776px */
letter-spacing: -0.956px;
font-size: clamp(30px, 4.2vw, 47.776px);
}
.nr__title-main{ color: var(--Primary-PR-800, #143960); padding-right: 9px; }
.nr__title-accent{ color: var(--Primary-PR-400, #249EDC); }
/* التفاصيل (Body 17/24) */
.nr__desc{
color: var(--Neutral-NTRL-800, #262626);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 24px; /* 141.176% */
margin: 0;
margin-inline: auto;
}
/* ===== News Cards Grid (Figma-accurate) ===== */
.newsroom-grid{
/* ألوان النظام */
--PR01:#143960;
--PR05:#249EDC;
--N800:#262626;
--N600:#525252;
--N500:#6B7280;
--BORDER:#D1D5DB; /* Gray-300 حسب فيغما */
--CARD:#FFFFFF;
/* background: #F9FAFB; */
padding-block:4rem;
}
@media (min-width:1024px){
.newsroom-grid{ padding-block:8rem; }
}
/* شبكة البطاقات */
.newsroom-grid .nr-grid{
display: grid;
gap: 48px;
grid-template-columns: 1fr;
}
@media (min-width: 700px){
.newsroom-grid .nr-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1024px){
.newsroom-grid .nr-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
/* البطاقة */
.news-card{
border-radius: 33px;
border: 1px solid #E5E7EB;
background: #F3F4F6;
overflow: hidden;
box-shadow: 0 2px 8px rgba(16,24,40,.04);
display: flex;
flex-direction: column;
}
.news-card__media img{
display: block;
width: 100%;
height: auto;
}
.news-card__body{
padding: 32px 16px ;
}
.badge{
display: inline-block;
padding: 6px 12px;
border-radius: 9999px;
font: 700 12px/1 Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
color: #fff;
background: #143960;
border: 1px solid #CDE6FB;
margin: 0 0 16px;
}
.badge--press{
background: #143960;
border-color: #D9E0F5;
color: #fff;
}
.news-card__title{
color: #143960;
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 23.04px;
font-weight: 700;
line-height: 115%;
letter-spacing: -0.38px;
margin: 0 0 16px;
}
/* التاريخ */
.news-card__meta{
display: flex;
align-items: center;
gap: 8px;
color: #143960; /* أغمق قليلاً ليطابق الصورة */
font: 400 15px/1.1 Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
margin: 0 0 16px; /* 12 تحت التاريخ */
}
.news-card__meta img{
width: 16px; height: 16px; display: block;
}
/* المقتطف */
.news-card__excerpt{
color: var(--N800);
font: 400 15px/1.25 Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
margin: 0 0 16px; /* 14 قبل رابط اقرأ المزيد */
}
/* اقرأ المزيد */
.news-card__more{
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
color: #143960;
font: 600 15px/1 Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
.news-card__more:hover{ text-decoration: underline; }
.news-card__more img.arrow{ width:14px; height:14px; }
/* هوفر خفيف */
.news-card{ transition: transform .10s ease; }
.news-card:hover{ transform: translateY(-2px); }
/* RTL */
.newsroom-grid[dir="rtl"] .news-card__meta,
.newsroom-grid[dir="rtl"] .news-card__more{ flex-direction: row-reverse; }
.newsroom-grid[dir="rtl"] .news-card__more img.arrow{ transform: scaleX(-1); }
/* ===== Global Media Coverage (Figma-accurate) ===== */
.press {
background: #F3F4F6;
padding-block:4rem;
}
@media (min-width:1024px){
.press{ padding-block:8rem; }
}
/* Eyebrow (H4) */
.press__eyebrow{
color: var(--Primary-PR-05, #249EDC);
text-align: center;
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 27.65px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 27.65px */
letter-spacing: -0.553px;
margin: 0 0 16px;
}
/* Title (H1) */
.press__title{
color: var(--Primary-PR-01, #143960);
text-align: center;
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 47.776px;
font-style: normal;
font-weight: 700;
line-height: 115%; /* 54.942px */
letter-spacing: -0.956px;
margin: 0 0 32px;
}
/* Description (Body 17/24) */
.press__desc{
color: var(--Neutral-NTRL-800, #262626);
text-align: center;
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 17px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 141.176% */
margin: 0 0 32px;
max-width: 1000px;
margin-inline: auto;
}
/* Grid of logos */
.press__grid{
display: grid;
gap: 48px;
grid-template-columns: repeat(1, minmax(220px, 1fr));
}
@media (min-width: 540px){ .press__grid{ grid-template-columns: repeat(2, minmax(220px, 1fr)); } }
@media (min-width: 800px){ .press__grid{ grid-template-columns: repeat(3, minmax(220px, 1fr)); } }
@media (min-width: 1024px){ .press__grid{ grid-template-columns: repeat(4, minmax(220px, 1fr)); } }
@media (min-width: 1200px){ .press__grid{ grid-template-columns: repeat(5, minmax(220px, 1fr)); } }
/* Logo card */
.press-card{
display: flex;
align-items: center;
justify-content: center;
min-height: 168px; /* ارتفاع مريح كالفيغما */
padding: 32px;
border-radius: 20px;
border: 1px solid var(--Gray-GRY-200, #E5E7EB);
background: #F9FAFB;
box-sizing: border-box;
}
/* Logo image */
.press-card__img{
width: 100%;
max-width: 200px; /* لا تكبر أكثر داخل الكارت */
max-height: 72px; /* ارتفاع الشعار */
object-fit: contain; /* بدون قص */
display: block;
}
/* دعم RTL (العناوين والنص محايدة محاذاة وسط) */
.press[dir="rtl"] .press__eyebrow,
.press[dir="rtl"] .press__title,
.press[dir="rtl"] .press__desc{ text-align: center; }
/* ===== News Article (Detail) ===== */
.news-article {
/* فقط مسافات فوق وتحت كما طلبت */
padding-block: 0 80px;
background: #F7FAFC; /* اختياري مثل بقية الصفحات */
}
/* Back to all news */
.news-back {
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
}
.news-back__text{
color: var(--Primary-PR-400, #249EDC);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 115%; /* 18.4px */
letter-spacing: -0.32px;
padding-left: 8px; /* حسب طلبك */
}
[dir="rtl"] .news-back__text{ padding-left: 0; padding-right: 8px; }
.news-back img{ width: 16px; height: 16px; display: block; }
/* Grid: المحتوى + الشريط الجانبي */
.news-article__grid{
display: grid;
grid-template-columns: 1fr;
gap: 40px;
}
@media (min-width: 1024px){
.news-article__grid{
grid-template-columns: minmax(0, 1fr) 320px; /* شريط جانبي ثابت */
gap: 48px;
}
}
/* ===== المحتوى ===== */
.news-article__title{
color: var(--Primary-PR-800, #143960);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 47.776px;
font-weight: 700;
line-height: 115%; /* 54.942px */
letter-spacing: -0.956px;
margin: 0 0 32px;
}
.news-article__date{
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--Primary-PR-800, #143960);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 125%; /* 18.75px */
letter-spacing: -0.15px;
margin: 0 0 32px;
}
.news-article__date img{ width: 18px; height: 18px; display: block; }
.news-article__content{
color: var(--Neutral-NTRL-800, #262626);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 125%; /* 20px */
}
.news-article__content p{ margin: 0 0 16px; }
/* ===== الشريط الجانبي ===== */
.news-aside__title{
color: var(--Primary-PR-800, #143960);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 21px;
font-weight: 700;
line-height: 100%; /* 21px */
letter-spacing: -0.42px;
margin: 0 0 12px;
}
.news-aside__text{
color: var(--Neutral-NTRL-900, #171717);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 125%; /* 20px */
margin: 0 0 8px;
}
.news-aside__link{
color: var(--Primary-PR-400, #249EDC);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 125%;
text-decoration: none;
}
.news-aside__link:hover{ text-decoration: underline; }
/* Share icons (SVG ملفات) */
.news-share{
margin-top: 16px;
display: flex; align-items: center; gap: 10px;
}
.news-share__item{
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid #E5E7EB;
display: inline-flex; align-items: center; justify-content: center;
background: #FFF;
}
.news-share__item img{ width: 18px; height: 18px; display: block; }
.news-back-parent{
background: #F3F4F6;
display: flex;
padding: 32px 60px;
justify-content: flex-start;
align-items: center;
align-self: stretch;
margin-bottom: 64px;
}
/* ========= Base spacing (حسب ما اعتمدتوه) ========= */
:root{
/* ألوان من النظام عندكم */
--Primary-PR-400: #249EDC;
--Primary-PR-800: #143960;
--Neutral-NTRL-800: #262626;
/* مسافات افتراضية للأقسام */
--section-y-mobile: 3.25rem; /* 52px */
--section-y-desktop: 80px; /* 128px */
}
/* ========= Layout ========= */
.awards-section{
background: #F6F9FB; /* إن أردت نفس خلفية الصورة الخافتة، غيّرها أو احذفها */
padding: var(--section-y-mobile) 1.25rem;
}
@media (min-width:1024px){
.awards-section{ padding: var(--section-y-desktop) 3.75rem; }
}
.awards-section .container{
text-align: center;
}
/* ========= Eyebrow (H4) ========= */
.awards-eyebrow{
color: var(--Primary-PR-400);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 1.728rem; /* 27.65px */
font-weight: 700;
line-height: 1; /* 100% */
letter-spacing: -0.553px;
margin: 0 0 0.875rem; /* تباعد بسيط تحت السطر */
}
/* ========= Title (H1) ========= */
.awards-title{
color: var(--Primary-PR-800);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 2.986rem; /* 47.776px */
font-weight: 700;
line-height: 1.15; /* 115% */
letter-spacing: -0.956px;
margin: 0 0 1.25rem;
}
/* ========= Description (Body 17/24) ========= */
.awards-desc{
color: var(--Neutral-NTRL-800);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 1.0625rem; /* 17px */
font-weight: 400;
line-height: 1.5; /* 24px */
margin: 0 auto;
max-width: 71rem; /* 768px لراحة القراءة */
}
/* ===== Scoped to your markup: .awards-grid ===== */
.awards-grid, .awards-grid * { box-sizing: border-box; }
.awards-grid{
padding-block:4rem;
@media (min-width:1024px){
padding-block:8rem;
}
}
/* Grid: 1 / 2 / 3 أعمدة */
.awards-grid .awards-grid__inner{
display: grid !important;
grid-template-columns: 1fr !important;
gap: 48px !important; /* 24px */
}
@media (min-width:640px){
.awards-grid .awards-grid__inner{ grid-template-columns: repeat(2,1fr) !important; }
}
@media (min-width:1024px){
.awards-grid .awards-grid__inner{ grid-template-columns: repeat(3,1fr) !important; }
}
/* Card design (حسب الخصائص المطلوبة) */
.awards-grid .award-card{
border-radius: 20px !important;
border: 1px solid #E5E7EB !important; /* Gray-200 */
background: #F9FAFB !important; /* Gray-50 */
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
height: 100% !important;
}
/* Top image area */
.awards-grid .award-card__media{
padding: 2.5rem 2rem 0 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
.awards-grid .award-card__logo{
max-width: 407px !important;
max-height: 213px !important;
width: 100% !important;
height: auto !important;
object-fit: contain !important;
display: block !important;
}
/* Text box (specs) */
.awards-grid .award-card__body{
display: flex !important;
padding: 32px 16px !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 16px !important;
align-self: stretch !important;
}
/* Title: H5 23.04px / 115% / -0.461px */
.awards-grid .award-card__title{
color: #143960 !important; /* Primary-PR-800 */
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
font-size: 23.04px !important;
font-weight: 700 !important;
line-height: 1.15 !important; /* ≈26.496px */
letter-spacing: -0.461px !important;
margin: 0 !important;
}
/* Excerpt: Body 16/20 */
.awards-grid .award-card__excerpt{
color: #262626 !important; /* Neutral-800 */
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.25 !important; /* 20px */
margin: 0 !important;
}
/* Equal heights across row */
.awards-grid .awards-grid__inner{ align-items: stretch !important; }
/* Optional: subtle hover */
.awards-grid .award-card{
transition: box-shadow .25s ease, transform .25s ease !important;
}
.awards-grid .award-card:hover{
box-shadow: 0 10px 30px rgba(20,57,96,.10) !important;
transform: translateY(-2px);
}
/* RTL readiness (لو عملت نسخة عربية بنفس الكلاسات) */
.awards-grid[dir="rtl"] .award-card__title,
.awards-grid[dir="rtl"] .award-card__excerpt{ text-align: right !important; }
/* =========== Schedule a Meeting (Figma accurate) =========== */
.schedule {
padding-block: 80px; /* أعلى/أسفل مثل بقية الأجزاء */
background: #F7FAFC;
}
.schedule .container {
max-width: 1200px;
margin-inline: auto;
padding-inline: 16px;
}
/* Grid: نص يسار + كارد Calendly يمين */
.schedule__grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
}
@media (min-width: 992px) {
.schedule__grid {
grid-template-columns: 1fr minmax(520px, 560px);
align-items: start;
}
}
/* Left text */
.schedule__eyebrow{
color: var(--Primary-PR-400, #249EDC);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 21px;
font-weight: 700;
line-height: 100%;
letter-spacing: -0.42px;
margin: 0;
}
.schedule__title{
color: var(--Primary-PR-800, #143960);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 47.776px;
font-weight: 700;
line-height: 115%;
letter-spacing: -0.956px;
margin: 8px 0 16px; /* padding-top: 8px */
}
.schedule__desc{
color: var(--Neutral-NTRL-800, #262626);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 24px; /* 141.176% */
max-width: 460px;
}
/* Right: Calendly card */
.schedule__card{
border-radius: 20px;
border: 1px solid #E5E7EB;
background: #FFFFFF;
box-shadow: 0 6px 18px rgba(16,24,40,.08);
padding: 12px;
overflow: hidden; /* احترام الحواف الدائرية */
}
.schedule__card .calendly-inline-widget{
min-width: 320px;
height: 700px; /* حسب طلبك */
}
/* RTL */
.schedule[dir="rtl"] .schedule__eyebrow,
.schedule[dir="rtl"] .schedule__title,
.schedule[dir="rtl"] .schedule__desc { text-align: start; }
.jWSwi_R_Xl7kPjUhuQoo {
display: none !important;
}
.WrdpezlzjKu1CoRihaXS {
display: none !important;
}
/* ===== About – Header ===== */
.about-hero{
background: var(--aboutbg, var(--Gradient-GRD-01, linear-gradient(180deg,#143960 0%, #249EDC 100%)));
padding-block: var(--aboutpad, 124px);
color: #fff;
}
.about-hero .container{
text-align: center;
}
.about-hero__title{
color: var(--Neutral-NTRL-50, #FAFAFA);
font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
font-weight: 700;
font-size: 57.2px;
line-height: 115%;
letter-spacing: -1.144px;
margin: 0 0 32px 0; /* مسافة بين العنوان والوصف */
}
.about-hero__desc{
color: var(--Neutral-NTRL-50, #FAFAFA);
font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
font-weight: 400;
font-size: 17px;
line-height: 24px; /* 141.176% */
opacity: 0.95; /* لمسة بصرية خفيفة */
width: 100%;
margin: auto;
}
@media (min-width: 768px){
.about-hero__desc{ width: 76%; }
}
@media (max-width: 768px){
.about-hero__title{ font-size: 36px; letter-spacing: -.6px; }
.about-hero__desc{ font-size: 16px; line-height: 22px; }
}
/* ===== About – Stats ===== */
.about-stats{
background: #F2F2F5;
padding: 40px 0; /* المسافة العامة */
}
.about-stats__grid{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 64px; /* المسافة بين البطاقات */
align-items: start;
}
.about-stats__card{
position: relative;
padding-left: 16px; /* المسافة بين البوردر والمحتوى */
}
[dir="rtl"] .about-stats__card{
padding-left: 0;
padding-right: 16px;
}
.about-stats__card::before{
content: "";
position: absolute;
inset-block: 0; /* top:0; bottom:0; */
left: 0;
width: 3px;
background: #143960;
border-radius: 2px;
}
[dir="rtl"] .about-stats__card::before{
left: auto;
right: 0;
}
.about-stats__title{
color: #143960;
font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
font-size: 23.04px;
font-weight: 700;
line-height: 120%; /* 27.648px */
letter-spacing: -0.461px;
margin: 0 0 8px 0;
}
.about-stats__text{
color: var(--Neutral-NTRL-800, #262626);
font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 125%; /* 20px */
}
@media (max-width: 1024px){
.about-stats__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
.about-stats{ padding: 32px 20px; }
.about-stats__grid{ grid-template-columns: 1fr; gap: 32px; }
}
/* ===== About – Our Story ===== */
.about-story{ padding: 80px 0; }
@media (min-width: 640px){
.about-story{ padding: 128px 0; }
}
.about-story__grid{
display: grid;
grid-template-columns: 1.05fr 1fr; /* صورة + نص */
align-items: center;
gap: 48px; /* المسافة بين الصورة والنص */
}
.about-story__media{
display: flex; /* طبقًا لطلبك */
height: 383px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
flex: 1 0 0;
border-radius: 20px;
overflow: hidden; /* حتى تنطبق الاستدارة على الصورة */
background: #EDEFF2; /* لون خلفية خفيف حين التحميل */
}
.about-story__img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.about-story__title{
color: var(--Primary-PR-800, #143960);
font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
font-size: 47.776px;
font-weight: 700;
line-height: 115%; /* 54.942px */
letter-spacing: -0.956px;
margin: 0;
}
.about-story__body{
color: var(--Neutral-NTRL-800, #262626);
font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 24px; /* 141.176% */
margin-top: 16px; /* المسافة المطلوبة */
}
/* اعكس الترتيب في RTL (الصورة يمين) */
[dir="rtl"] .about-story__media{ order: 2; }
[dir="rtl"] .about-story__text { order: 1; }
/* استجابة */
@media (max-width: 992px){
.about-story__grid{
grid-template-columns: 1fr;
}
.about-story__media{
height: 300px;
}
}
@media (max-width: 640px){
.about-story__media{
height: 240px;
}
.about-story__title{ font-size: 32px; letter-spacing: -0.6px; }
.about-story__body { font-size: 16px; line-height: 22px; }
}
/* ====== Brand Strip (Pure CSS Marquee) ====== */
.brand-strip { background:#F6F7F9; }
.brand-strip__inner { padding:80px 0; }
.brand-strip__viewport {
position: relative;
overflow: hidden;
}
.brand-strip__track {
--gap: 40px; /* المسافة بين الشعارات */
--speed: 10s; /* مدة اللفة - زوّدها/قللها حسب المطلوب */
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--gap);
list-style: none;
padding: 0;
margin: 0;
width: 100%; /* مهم كي لا يلف السطر */
animation: brand-scroll var(--speed) linear infinite;
}
.brand-strip.is-rtl .brand-strip__track {
animation-direction: reverse; /* يدعم RTL بدون أي JS */
}
.brand-strip__track--clone {
position: absolute;
top: 0;
left: 0;
transform: translateX(100%);
}
@keyframes brand-scroll {
from { transform: translateX(0); }
to { transform: translateX(-100%); } /* لأننا مكررين التراك */
}
.brand-strip__item { flex: 0 0 auto; }
.brand-strip__logo {
height: 42px; /* المطلوب */
/* width: 100px; */
display: block;
object-fit: contain;
object-position: center;
filter: grayscale(100%);
transition: opacity .2s ease, filter .2s ease;
}
.brand-strip__logo:hover {
opacity: 1;
filter: grayscale(0);
}
/* إيقاف الحركة عند الوقوف */
.brand-strip__viewport:hover .brand-strip__track {
animation-play-state: paused;
}
/* ريسبونسف */
@media (max-width: 1024px) {
.brand-strip__track { --gap: 60px; }
}
@media (max-width: 640px) {
.brand-strip__track { --gap: 40px; }
}
/* ===== Brand Strip (Pure CSS Marquee) ===== */
.brand-strip { background:#F6F7F9; }
.brand-strip__inner { padding:80px 0; }
.brand-strip__viewport {
position: relative;
overflow: hidden;
}
.brand-strip__track {
--gap: 40px; /* المسافة بين الشعارات */
--speed: 10s; /* مدة اللفة - زوّدها/قللها حسب المطلوب */
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--gap);
list-style: none;
padding: 0;
margin: 0;
width: 100%; /* مهم كي لا يلف السطر */
animation: brand-scroll var(--speed) linear infinite;
}
.brand-strip.is-rtl .brand-strip__track {
animation-direction: reverse; /* دعم RTL تلقائي */
}
.brand-strip__track--clone {
position: absolute;
top: 0;
left: 0;
transform: translateX(100%);
}
@keyframes brand-scroll {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
.brand-strip__item { flex: 0 0 auto; }
.brand-strip__logo {
height: 52px !important; /* الطول المطلوب */
/* width: 100px; */
display: block;
object-fit: contain;
object-position: center;
image-rendering: auto;
filter: grayscale(100%);
/* opacity: .85; */
transition: opacity .2s ease, filter .2s ease;
}
.brand-strip__logo:hover {
opacity: 1;
filter: grayscale(0);
}
/* إيقاف الحركة عند الوقوف */
.brand-strip__viewport:hover .brand-strip__track {
animation-play-state: paused;
}
/* ريسبونسف */
@media (max-width: 1024px) {
.brand-strip__track { --gap: 60px; }
}
@media (max-width: 640px) {
.brand-strip__track { --gap: 40px; }
}
/* ================== Hero: Regulations & Compliance (scoped) ================== */
.hrc{
/* خلفية داكنة مطابقة للمعاينة (عدّلها لو عندك قيمة Figma دقيقة) */
--hrc-bg-dark: #0F3752;
/* ألوان النصوص المطلوبة */
--hrc-text-light: #FFFFFF; /* Neutral-NTRL-50 */
--hrc-accent: #55B3E2; /* Primary-PR-300 */
/* تايبوجرافي (حسب مواصفاتك) */
--hrc-display: 3.575rem; /* 57.2px */
--hrc-h4: 1.728rem; /* 27.65px */
--hrc-body: 1.0625rem; /* 17px */
/* مسافات القسم العامة (تقدر توحّدها مع مشروعك لو أردت) */
--hrc-py-mobile: 3.25rem; /* 52px */
--hrc-py-desktop: 8rem; /* 128px */
/* مسافات داخلية أفقية للحاوية */
--hrc-px-mobile: 1.875rem; /* 30px */
--hrc-px-desktop: 3.75rem; /* 60px */
/* مسافات بين العناصر وفق المطلوب */
--hrc-gap-32: 2rem; /* 32px */
--hrc-gap-16: 1rem; /* 16px */
/* حد عرض الفقرة */
--hrc-desc-max: 64rem; /* 1024px */
background: var(--hrc-bg-dark);
padding-block: var(--hrc-py-mobile);
}
@media (min-width:1024px){
.hrc{ padding-block: var(--hrc-py-desktop); }
}
/* حاوية داخلية خاصة بالمكوّن (لا تستخدم .container العامة لتجنّب التعارض) */
.hrc__container{
width: 100%;
max-width: 90rem; /* 1440px */
margin-inline: auto;
padding-inline: var(--hrc-px-mobile);
}
@media (min-width:1024px){
.hrc__container{ padding-inline: var(--hrc-px-desktop); }
}
/* محتوى بمحاذاة مركزية */
.hrc__content{
text-align: center;
margin-inline: auto;
}
/* العنوان الرئيسي */
.hrc__title{
margin: 0; /* لا هوامش افتراضية */
color: var(--hrc-text-light);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: var(--hrc-display); /* 57.2px */
font-weight: 700;
line-height: 1.15; /* 115% ≈ 65.78px */
letter-spacing: -0.0715rem; /* -1.144px */
}
/* العنوان الثاني — يبعد 32px عن العنوان الرئيسي */
.hrc__subtitle{
margin: var(--hrc-gap-32) 0 0;
color: var(--hrc-accent);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: var(--hrc-h4); /* 27.65px */
font-weight: 700;
line-height: 1; /* 100% */
letter-spacing: -0.0346rem; /* -0.553px */
}
/* الفقرة — تبعد 16px عن العنوان الثاني وبحد عرض 1024px */
.hrc__desc{
margin: var(--hrc-gap-16) auto 0;
color: var(--hrc-text-light);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: var(--hrc-body); /* 17px */
font-weight: 400;
line-height: 1.41176; /* 24px على 17px ≈ 141.176% */
max-width: var(--hrc-desc-max);
width: min(100%, var(--hrc-desc-max));
}
/* تجاوب الموبايل/التابلت: تكبير قابل للتدرّج وقراءة مريحة */
@media (max-width: 1023.98px){
.hrc__title{
/* يتدرّج بين 32px و 48px حسب العرض */
font-size: clamp(2rem, 6.5vw, 3rem);
letter-spacing: -0.04rem; /* تقليل الشدّ قليلًا على الشاشات الصغيرة */
}
.hrc__subtitle{
/* يتدرّج بين 18px و 24px */
font-size: clamp(1.125rem, 4.5vw, 1.5rem);
}
.hrc__desc{
font-size: 1rem; /* 16px لراحة القراءة */
line-height: 1.5;
padding-inline: .25rem; /* تنفّس بسيط داخل الشاشة الصغيرة */
}
}
/* لو حابب تفعّل نسخة فاتحة مستقبلًا */
.hrc--light{
--hrc-bg-dark: #FFFFFF;
--hrc-text-light: #143960;
}
/* ---------------=========================== */
/* ================== Help Center Hero (scoped with .hhc) ================== */
.hhc{
/* خلفية جراديانت داكنة مشابهة للصورة */
--hhc-grad-top: #12395A; /* ازرق داكن أعلى */
--hhc-grad-bot: #1F7FB1; /* ازرق أفتح أسفل */
/* ألوان ونصوص حسب مواصفاتك */
--hhc-gray-50: #F9FAFB; /* var(--Gray-GRY-50) */
/* تايبوجرافي */
--hhc-display: 3.575rem; /* 57.2px */
--hhc-large: 1.125rem; /* 18px */
/* مسافات عامة (حسب المعايير اللي اعتمدناها) */
--hhc-py-mobile: 3.25rem; /* 52px */
--hhc-py-desktop: 8rem; /* 128px */
--hhc-px-mobile: 1.875rem; /* 30px */
--hhc-px-desktop: 3.75rem; /* 60px */
/* مسافة بين العنوان والتفاصيل */
--hhc-gap-32: 2rem; /* 32px */
background: linear-gradient(180deg, var(--hhc-grad-top) 0%, var(--hhc-grad-bot) 100%);
padding-block: var(--hhc-py-mobile);
}
@media (min-width:1024px){
.hhc{ padding-block: var(--hhc-py-desktop); }
}
/* حاوية داخلية خاصة */
.hhc__container{
width: 100%;
max-width: 90rem; /* 1440px */
margin-inline: auto;
padding-inline: var(--hhc-px-mobile);
text-align: center;
}
@media (min-width:1024px){
.hhc__container{ padding-inline: var(--hhc-px-desktop); }
}
/* العنوان */
.hhc__title{
margin: 0;
color: var(--hhc-gray-50);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: var(--hhc-display); /* 57.2px */
font-weight: 700;
line-height: 1.15; /* 115% */
letter-spacing: -0.0715rem; /* -1.144px */
}
/* التفاصيل — padding-top: 32px */
.hhc__desc{
margin: 0;
padding-top: 2rem; /* 32px */
color: var(--hhc-gray-50);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: var(--hhc-large); /* 18px */
font-weight: 400;
line-height: 1.2; /* 120% = 21.6px */
max-width: 64rem; /* عرض مريح */
width: min(100%, 64rem);
margin-inline: auto;
}
/* صندوق البحث */
.hhc__search{
position: relative;
max-width: 60rem; /* حجم الحقل حسب الصورة */
width: min(100%, 60rem);
margin: 2rem auto 0; /* مسافة مناسبة تحت النص */
}
/* أيقونة العدسة */
.hhc__icon{
position: absolute;
inset-inline-start: 1rem; /* داخلية من اليسار/اليمين حسب dir */
top: 50%;
transform: translateY(-50%);
display: inline-flex;
pointer-events: none;
}
/* حقل الإدخال — القيم المطلوبة */
.hhc__input{
width: 100%;
border-radius: 999px; /* pill */
border: 1px solid var(--hhc-gray-50); /* حسب الطلب */
background: transparent;
color: var(--hhc-gray-50);
padding: 1rem 1.5rem; /* 16px 24px */
padding-inline-start: 3rem; /* مساحة للأيقونة */
text-align: start; /* حسب المواصفات */
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 1rem; /* CTA 01 ≈ 16px */
font-weight: 400;
line-height: 1.15; /* 18.4px */
letter-spacing: -0.02rem; /* -0.32px تقريبًا */
outline: none;
transition: box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
/* placeholder بنفس اللون مع شفافية بسيطة */
.hhc__input::placeholder{
color: var(--hhc-gray-50);
opacity: .9;
}
/* Hover/Focus */
.hhc__input:hover{
background: rgba(255,255,255,0.03);
}
.hhc__input:focus{
border-color: #FFFFFF;
box-shadow: 0 0 0 3px rgba(255,255,255,0.16);
}
/* RTL: حافظ على تمركز النص والأيقونة تتحول تلقائيًا */
[dir="rtl"] .hhc__icon{ inset-inline-start: 1rem; }
/* تحسينات شاشة صغيرة */
@media (max-width: 639.98px){
.hhc__title{ font-size: clamp(2rem, 6.5vw, 3rem); }
.hhc__desc{ font-size: 1rem; line-height: 1.5; padding-top: 1.25rem; }
.hhc__search{ margin-top: 1.5rem; }
}
/* ================== Help Topics Grid (scoped with .hcg) ================== */
.hcg{
/* مسافات رأسية وفق معيار المشروع */
--hcg-py-mobile: 3.25rem; /* 52px */
--hcg-py-desktop: 8rem; /* 128px */
/* حواف الحاوية الأفقية (استعملنا نفس “الكنترول” السابق) */
--hcg-px-mobile: 1.875rem; /* 30px */
--hcg-px-desktop: 3.75rem; /* 60px */
/* ألوان النصوص */
--hcg-title: #143960; /* var(--Primary-PR-800) */
--hcg-body: #030712; /* var(--Gray-GRY-950) */
/* كارد */
--hcg-card-p: 2rem; /* 32px */
--hcg-card-radius: 1rem; /* 16px */
--hcg-card-border: #E6E9ED; /* حدود خفيفة */
--hcg-card-shadow: 0 6px 16px rgba(0,0,0,.05);
/* تايبوجرافي */
--hcg-h6: 1.3125rem; /* 21px */
--hcg-body-n: 1.0625rem; /* 17px */
--hcg-h6-ls: -0.026rem; /* ≈ -0.42px */
/* فجوات داخلية */
--hcg-gap-16: 1rem; /* 16px */
}
.hcg{ padding-block: var(--hcg-py-mobile); }
@media (min-width:1024px){
.hcg{ padding-block: var(--hcg-py-desktop); }
}
/* الحاوية */
.hcg__container{
width: 100%;
max-width: 90rem; /* 1440px */
margin-inline: auto;
padding-inline: var(--hcg-px-mobile);
}
@media (min-width:1024px){
.hcg__container{ padding-inline: var(--hcg-px-desktop); }
}
/* الشبكة */
.hcg__grid{
display: grid;
grid-template-columns: 1fr;
gap: 3rem; /* تباعد بين الكروت */
}
@media (min-width:640px){
.hcg__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width:1024px){
.hcg__grid{ grid-template-columns: repeat(3, 1fr); }
}
/* الكارد (clickable) */
.hcg__card{
display: flex;
align-items: flex-start;
gap: var(--hcg-gap-16); /* بين الأيقونة والنص */
padding: var(--hcg-card-p); /* 32px */
text-decoration: none;
background: #fff;
border: 1px solid var(--hcg-card-border);
border-radius: var(--hcg-card-radius);
transition: transform .10s ease, box-shadow .10s ease, border-color .10s ease;
will-change: transform;
}
.hcg__card:hover{
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(0,0,0,.07);
border-color: #D7DDE5;
}
.hcg__card:focus{
outline: none;
box-shadow: 0 0 0 3px rgba(36,158,220,.25);
}
/* الأيقونة (صورة خارجية) */
.hcg__icon{
flex: 0 0 auto;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.hcg__icon img{
width: 39px;
height: 37px;
display: block;
}
/* النصوص */
.hcg__text{ flex: 1; }
.hcg__title{
margin: 0 0 var(--hcg-gap-16);
color: var(--hcg-title);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: var(--hcg-h6); /* 21px */
font-weight: 700;
line-height: 1.2; /* 120% = 25.2px */
letter-spacing: var(--hcg-h6-ls);
}
.hcg__desc{
margin: 0;
color: var(--hcg-body);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: var(--hcg-body-n); /* 17px */
font-weight: 400;
line-height: 1.41176; /* 24px */
}
/* RTL دعم كامل بدون تعديل HTML */
[dir="rtl"] .hcg__card{
direction: rtl;
}
/* ================== Help Center CTA (scoped with .hcs) ================== */
.hcs{
/* خلفية حيادية خفيفة مثل المعاينة */
--hcs-bg: #F3F5F7; /* عدّلها إن لزم */
--hcs-title: #143960; /* var(--Primary-PR-800) */
--hcs-body: #262626; /* var(--Neutral-NTRL-800) */
/* تايبوجرافي حسب مواصفاتك */
--hcs-h1: 2.986rem; /* 47.776px */
--hcs-h1-ls: -0.05975rem; /* -0.956px */
--hcs-body-n: 1.0625rem; /* 17px */
/* مسافات رأسية/أفقية موحّدة */
--hcs-py-mobile: 3.25rem; /* 52px */
--hcs-py-desktop: 8rem; /* 128px */
--hcs-px-mobile: 1.875rem; /* 30px */
--hcs-px-desktop: 3.75rem; /* 60px */
/* مسافة بين العناصر */
--hcs-gap-32: 2rem; /* 32px */
background: var(--hcs-bg);
padding-block: var(--hcs-py-mobile);
}
@media (min-width:1024px){
.hcs{ padding-block: var(--hcs-py-desktop); }
}
/* الحاوية */
.hcs__container{
width: 100%;
max-width: 90rem; /* 1440px */
margin-inline: auto;
padding-inline: var(--hcs-px-mobile);
text-align: center;
}
@media (min-width:1024px){
.hcs__container{ padding-inline: var(--hcs-px-desktop); }
}
/* العنوان */
.hcs__title{
margin: 0 0 var(--hcs-gap-32);
color: var(--hcs-title);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: var(--hcs-h1); /* 47.776px */
font-weight: 700;
line-height: 1.15; /* 115% ≈ 54.942px */
letter-spacing: var(--hcs-h1-ls);
}
/* النص الثاني */
.hcs__desc{
margin: 0 0 var(--hcs-gap-32);
color: var(--hcs-body);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: var(--hcs-body-n); /* 17px */
font-weight: 400;
line-height: 1.41176; /* 24px */
max-width: 48rem; /* عرض مريح */
width: min(100%, 48rem);
margin-inline: auto;
}
/* الزر: نستخدم ستايل الأزرار العام عندك (hero__btn hero__btn--primary) */
/* نضيف فقط تموضعًا بسيطًا إن احتجت */
.hcs__btn{
display: inline-flex; /* في حال زرّك العام inline فقط */
min-width: 10rem; /* اختياري */
justify-content: center;
background: #143960;
color: #F9FAFB;
}
/* ================== Integrations Hero (scoped with .hip) ================== */
.hip{
/* الخلفية كما في التصميم */
--hip-gradient: linear-gradient(180deg, #143960 0%, #1E7CAE 100%); /* var(--Gradient-GRD-02) */
/* ألوان ونصوص */
--hip-gray-50: #F9FAFB; /* var(--Gray-GRY-50) */
/* تايبوجرافي حسب مواصفاتك */
--hip-display: 3.575rem; /* 57.2px */
--hip-large: 1.125rem; /* 18px */
--hip-letter: -0.0715rem; /* -1.144px */
/* مسافات عامة (معيار المشروع) */
--hip-py-mobile: 3.25rem; /* 52px */
--hip-py-desktop: 8rem; /* 128px */
--hip-px-mobile: 1.875rem; /* 30px */
--hip-px-desktop: 3.75rem; /* 60px */
/* بين العنوان والفقرة */
--hip-gap-32: 2rem; /* 32px */
background: var(--hip-gradient);
padding-block: var(--hip-py-mobile);
}
@media (min-width:1024px){
.hip{ padding-block: var(--hip-py-desktop); }
}
/* الحاوية */
.hip__container{
width: 100%;
max-width: 90rem; /* 1440px */
margin-inline: auto;
padding-inline: var(--hip-px-mobile);
text-align: center;
}
@media (min-width:1024px){
.hip__container{ padding-inline: var(--hip-px-desktop); }
}
/* العنوان */
.hip__title{
margin: 0 0 var(--hip-gap-32);
color: var(--hip-gray-50);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: var(--hip-display); /* 57.2px */
font-weight: 700;
line-height: 1.15; /* 115% ≈ 65.78px */
letter-spacing: var(--hip-letter);
}
/* الفقرة */
.hip__desc{
margin: 0;
color: var(--hip-gray-50);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: var(--hip-large); /* 18px */
font-weight: 400;
line-height: 1.2; /* 120% = 21.6px */
max-width: 64rem; /* عرض مريح للنص */
width: min(100%, 64rem);
margin-inline: auto;
}
/* تحسينات على الموبايل */
@media (max-width: 639.98px){
.hip__title{ font-size: clamp(2rem, 6.5vw, 3rem); }
.hip__desc{ font-size: 1rem; line-height: 1.5; }
}
/* ================== Integrations Cards Grid (scoped with .icg) ================== */
.icg{
/* حشو رأسي موحّد مثل بقية الأقسام */
--icg-py-mobile: 3.25rem; /* 52px */
--icg-py-desktop: 8rem; /* 128px */
/* تحكم جوانب الحاوية */
--icg-px-mobile: 1.875rem; /* 30px */
--icg-px-desktop: 3.75rem; /* 60px */
/* الهيدر */
--icg-h2: 2.488rem; /* 39.808px */
--icg-h2-ls: -0.05475rem; /* ≈ -0.876px */
--icg-h2-color: #143960; /* var(--Primary-PR-800) */
--icg-body-n: 1.0625rem; /* 17px */
--icg-body-950: #030712; /* var(--Gray-GRY-950) */
/* شبكة وبطاقة */
--icg-gap-cards: 3rem; /* 48px بين الكروت */
--icg-card-w: 18.375rem; /* 294px */
--icg-card-h: 15rem; /* 240px (min) */
--icg-card-p: 2rem; /* 32px */
--icg-card-radius: 1.25rem; /* 20px */
--icg-card-bg: #F9FAFB; /* var(--Gray-GRY-50) */
--icg-card-border: #E5E7EB; /* var(--Gray-GRY-200) */
--icg-title: #143960; /* var(--Primary-PR-800) */
--icg-desc: #262626; /* var(--Neutral-NTRL-800) */
/* تايبوجرافي للكارت */
--icg-h5: 1.44rem; /* 23.04px */
--icg-h5-ls: -0.0288rem; /* ≈ -0.461px */
--icg-card-body: 1rem; /* 16px */
background: #F9FAFB;
padding-block: var(--icg-py-mobile);
}
@media (min-width:1024px){
.icg{ padding-block: var(--icg-py-desktop); }
}
/* الحاوية */
.icg__container{
width: 100%;
max-width: 90rem; /* 1440px */
margin-inline: auto;
padding-inline: var(--icg-px-mobile);
text-align: center;
}
@media (min-width:1024px){
.icg__container{ padding-inline: var(--icg-px-desktop); }
}
/* العنوان والوصف */
.icg__heading{
margin: 0 0 2rem; /* 32px */
color: var(--icg-h2-color);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: var(--icg-h2);
font-weight: 700;
line-height: 1.15; /* 115% */
letter-spacing: var(--icg-h2-ls);
}
.icg__sub{
margin: 0 0 2.5rem;
color: var(--icg-body-950);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: var(--icg-body-n); /* 17px */
font-weight: 400;
line-height: 1.41176; /* 24px */
max-width: 64rem;
width: min(100%, 64rem);
margin-inline: auto;
}
/* قائمة الكروت: نستخدم Flex لضمان عرض ثابت 294px وتباعد 48px */
.icg__list{
display: flex;
flex-wrap: wrap;
gap: var(--icg-gap-cards);
justify-content: center;
}
/* الكارد */
.icg__card{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: var(--icg-card-w);
min-width: var(--icg-card-w);
max-width: var(--icg-card-w);
min-height: var(--icg-card-h);
padding: var(--icg-card-p);
gap: 0.5rem; /* 8px بين عناصر الكارد الداخلية */
text-align: center;
text-decoration: none;
transition: transform .10s ease, box-shadow .10s ease, border-color .10s ease;
will-change: transform;
border-radius: 20px;
border: 1px solid #E5E7EB;
background: #F9FAFB;
}
.icg__card:hover{
transform: translateY(-2px);
border-color: #D7DDE5;
box-shadow: 0 10px 22px rgba(0,0,0,.06);
}
.icg__card:focus{
outline: none;
box-shadow: 0 0 0 3px rgba(36,158,220,.25);
}
/* الأيقونة */
.icg__icon{
width: 4rem; /* 64px */
height: 4rem; /* 64px */
object-fit: contain;
aspect-ratio: 1 / 1;
}
/* نصوص الكارد */
.icg__title{
margin: 0.75rem 0 0.25rem;
color: var(--icg-title);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: var(--icg-h5); /* 23.04px */
font-weight: 700;
line-height: 1.2; /* 120% */
letter-spacing: var(--icg-h5-ls);
}
.icg__desc{
margin: 0;
color: var(--icg-desc);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: var(--icg-card-body); /* 16px */
font-weight: 400;
line-height: 1.25; /* 125% = 20px */
}
/* RTL دعم كامل بدون تغيير HTML */
[dir="rtl"] .icg__container{ text-align: center; } /* يظل مركزي */
/* ================== Integration Methods (scoped with .imc) ================== */
.imc{
/* الخلفية المطلوبة */
--imc-bg: #F3F4F6; /* var(--Gray-GRY-100) */
/* حواشي عامة (نفس سكيل المشروع) */
--imc-py-mobile: 3.25rem; /* 52px */
--imc-py-desktop: 8rem; /* 128px */
--imc-px-mobile: 1.875rem; /* 30px */
--imc-px-desktop: 3.75rem; /* 60px */
/* النصوص */
--imc-eyebrow: #249EDC; /* var(--Primary-PR-400) */
--imc-h1: #143960; /* var(--Primary-PR-800) */
--imc-body:#262626; /* var(--Neutral-NTRL-800) */
/* تايبوجرافي حسب المواصفات */
--imc-h4-size: 1.728rem; /* 27.65px */
--imc-h4-ls: -0.0346rem; /* -0.553px */
--imc-h1-size: 2.986rem; /* 47.776px */
--imc-h1-ls: -0.05975rem; /* -0.956px */
--imc-body-n: 1.0625rem; /* 17px */
/* الشبكة والكروت */
--imc-grid-gap: 3rem; /* 48px بين الكروت */
--imc-grid-mt: 5rem; /* 80px بين النص والشبكة */
--imc-card-radius: 1.25rem; /* 20px */
--imc-card-border: #D1D5DB; /* var(--Gray-GRY-300) */
--imc-card-bg: #F9FAFB; /* var(--Gray-GRY-50) */
--imc-card-p: 2rem; /* 32px */
--imc-inside-gap: 1rem; /* 16px داخل الكارد */
--imc-card-title: #143960; /* H5 داخل الكارد */
--imc-card-title-size: 1.44rem; /* 23.04px */
--imc-card-title-ls: -0.0288rem; /* -0.461px */
--imc-card-desc: #262626; /* 16px / 125% */
background: var(--imc-bg);
padding-block: var(--imc-py-mobile);
}
@media (min-width:1024px){
.imc{ padding-block: var(--imc-py-desktop); }
}
/* الحاوية */
.imc__container{
width: 100%;
max-width: 90rem; /* 1440px */
margin-inline: auto;
padding-inline: var(--imc-px-mobile);
text-align: center;
}
@media (min-width:1024px){
.imc__container{ padding-inline: var(--imc-px-desktop); }
}
/* السطر الأول (Eyebrow H4) */
.imc__eyebrow{
margin: 0;
color: var(--imc-eyebrow);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: var(--imc-h4-size);
font-weight: 700;
line-height: 1; /* 100% */
letter-spacing: var(--imc-h4-ls);
}
/* العنوان الرئيسي H1 — padding-top: 16px */
.imc__title{
margin: 0;
padding-top: 1rem; /* 16px */
color: var(--imc-h1);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: var(--imc-h1-size);
font-weight: 700;
line-height: 1.15; /* 115% ≈ 54.942px */
letter-spacing: var(--imc-h1-ls);
}
/* الوصف — padding-top: 32px */
.imc__sub{
margin: 0;
padding-top: 2rem; /* 32px */
color: var(--imc-body);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: var(--imc-body-n); /* 17px */
font-weight: 400;
line-height: 1.41176; /* 24px */
max-width: 64rem;
width: min(100%, 64rem);
margin-inline: auto;
}
/* الشبكة — تباعد 48px، وتبدأ بعد 80px من النص */
.imc__grid{
margin-top: var(--imc-grid-mt); /* 80px */
display: grid;
grid-template-columns: 1fr;
gap: var(--imc-grid-gap); /* 48px بين الكروت */
}
@media (min-width: 768px){
.imc__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1200px){
.imc__grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
/* الكارد */
.imc__card{
display: flex;
flex-direction: row;
align-items: flex-start; /* النص يبدأ من اليسار/يمين حسب dir */
gap: var(--imc-inside-gap); /* 16px بين (الأيقونة/العنوان/النص) */
padding: var(--imc-card-p); /* 32px */
background: var(--imc-card-bg);
border: 1px solid var(--imc-card-border);
border-radius: var(--imc-card-radius);
}
/* الأيقونة (الصورة) */
.imc__icon{
width: 3rem; /* 48px (يمكنك 64px إن رغبت) */
height: 3rem;
object-fit: contain;
aspect-ratio: 1 / 1;
}
/* عنوان الكارد */
.imc__card-title{
margin: 0;
color: var(--imc-card-title);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: var(--imc-card-title-size); /* 23.04px */
font-weight: 700;
line-height: 1.2; /* 120% */
letter-spacing: var(--imc-card-title-ls); /* -0.461px */
padding-bottom: 16px;
text-align: start;
}
/* وصف الكارد */
.imc__card-desc{
margin: 0;
color: var(--imc-card-desc);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 1rem; /* 16px */
font-weight: 400;
line-height: 1.25; /* 125% = 20px */
text-align: start;
}
/* RTL يدعم تلقائيًا عبر dir على */
[dir="rtl"] .imc__card{ align-items: flex-start; }
/* ================== Integrations Final CTA (scoped with .iic) ================== */
.iic{
/* خلفية حيادية خفيفة (اختياري) — غيّرها أو احذفها إذا كانت صفحتك تملك خلفية خاصة */
--iic-bg: #F7F9FB;
/* حشو القسم */
--iic-py-mobile: 3.25rem; /* 52px */
--iic-py-desktop: 8rem; /* 128px */
--iic-px-mobile: 1.875rem; /* 30px */
--iic-px-desktop: 3.75rem; /* 60px */
/* تايبوجرافي */
--iic-h2-size: 2.488rem; /* 39.808px */
--iic-h2-ls: -0.05475rem; /* -0.876px */
--iic-h2-color: #143960; /* var(--Primary-PR-800) */
--iic-body-size: 1.0625rem; /* 17px */
--iic-body-color: #262626; /* var(--Neutral-NTRL-800) */
/* مسافات داخلية */
--iic-gap-32: 2rem; /* 32px بين العنوان والوصف */
--iic-actions-gap: 1rem; /* 16px بين الأزرار */
--iic-actions-mt: 1.5rem; /* 24px فوق الأزرار */
background: var(--iic-bg);
padding-block: var(--iic-py-mobile);
}
@media (min-width:1024px){
.iic{ padding-block: var(--iic-py-desktop); }
}
.iic__container{
width: 100%;
max-width: 90rem; /* 1440px */
margin-inline: auto;
padding-inline: var(--iic-px-mobile);
text-align: center;
}
@media (min-width:1024px){
.iic__container{ padding-inline: var(--iic-px-desktop); }
}
/* العنوان: المواصفات المطلوبة + padding-bottom: 32px */
.iic__title{
margin: 0 0 var(--iic-gap-32);
color: var(--iic-h2-color);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: var(--iic-h2-size); /* 39.808px */
font-weight: 700;
line-height: 1.15; /* 115% ≈ 45.779px */
letter-spacing: var(--iic-h2-ls);
}
/* الوصف (17px/24px) */
.iic__desc{
margin: 0;
color: var(--iic-body-color);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: var(--iic-body-size);
font-weight: 400;
line-height: 1.41176; /* 24px */
max-width: 56rem;
width: min(100%, 56rem);
margin-inline: auto;
}
/* الأزرار — نستخدم ستايل الزر العام لديك، مع تجميع في المنتصف */
.iic__actions{
display: flex;
justify-content: center;
align-items: center;
gap: var(--iic-actions-gap);
margin-top: var(--iic-actions-mt);
flex-wrap: wrap;
}
/* تحجيم بسيط للأزرار على الشاشات الصغيرة إن لزم */
@media (max-width: 480px){
.iic__actions .hero__btn{ width: 100%; max-width: 20rem; }
}
.iic__actions .hero__btn.hero__btn--primary{
background: #143960 !important;
color: #F9FAFB !important;
}
.iic__actions .hero__btn.hero__btn--ghost{
border: 1px solid #143960 !important;
color: #143960 !important;
background: transparent !important;
}
/* ===== About – People ===== */
.about-people{
background: var(--Gray-GRY-100, #F3F4F6);
padding: 128px 0;
}
@media (max-width: 640px){
.about-people{
padding: 80px 0; /* موبايل */
}
}
/* استخدم نفس .container تبع الموقع — لا نضيف حشوات جانبية */
.about-people .container{}
/* تخطيط: نص يسار / صورة يمين (RTL ينعكس طبيعيًا لو تستخدم direction) */
.about-people__grid{
display: flex;
align-items: stretch; /* مهم ليأخذ العمودان نفس الارتفاع */
gap: 48px;
/* صفّ الأعمدة */
flex-wrap: nowrap;
}
@media (max-width: 1024px){
.about-people__grid{
flex-wrap: wrap; /* على التابلت/موبايل يصير ستاك */
}
}
/* عمود النص */
.about-people__content{
flex: 1 1 50%;
min-width: 280px;
display: flex;
flex-direction: column;
justify-content: center; /* يوسّط النص عموديًا لو كان قصير */
}
/* عمود الصورة */
.about-people__media{
flex: 1 1 50%;
min-width: 280px;
margin: 0;
border-radius: 20px;
overflow: hidden; /* حتى تنقص الصورة داخل الراديوس */
display: flex;
}
.about-people__img{
width: 100%;
height: 100%;
object-fit: cover; /* الطول على قد طول عمود النص */
display: block;
}
/* ===== Typography ===== */
.people__h1{
color: var(--Primary-PR-800, #143960);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 47.776px;
font-style: normal;
font-weight: 700;
line-height: 115%; /* 54.942px */
letter-spacing: -0.956px;
margin: 0 0 12px;
}
.people__h2{
color: var(--Primary-PR-400, #249EDC);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 21px;
font-style: normal;
font-weight: 700;
line-height: 120%; /* 25.2px */
letter-spacing: -0.42px;
margin: 0 0 16px;
}
.people__body{
color: var(--Neutral-NTRL-800, #262626);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 17px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 141.176% */
margin: 0 0 24px;
}
.people__body p{ margin: 0 0 12px; }
/* ===== Button ===== */
.people__btn{
display: inline-flex;
padding: 14px 32px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 999px;
background: var(--Primary-PR-800, #143960);
color: var(--Gray-GRY-50, #F9FAFB);
text-align: center;
text-decoration: none;
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 115%; /* 18.4px */
letter-spacing: -0.32px;
transition: opacity .2s ease, transform .15s ease;
width: fit-content;
}
.people__btn:hover{ opacity: .9; }
.people__btn:active{ transform: translateY(1px); }
/* ===== Responsive Stack ===== */
@media (max-width: 1024px){
.about-people__content, .about-people__media{
flex: 1 1 100%;
}
}
/* مسافات أدق على الموبايل */
@media (max-width: 640px){
.people__h1{ font-size: 36px; letter-spacing: -0.6px; }
.people__h2{ font-size: 18px; letter-spacing: -0.3px; }
.people__body{ font-size: 16px; line-height: 24px; }
}
/* ===== About – Offices ===== */
.about-offices{
background: var(--Gray-GRY-50, #F9FAFB);
padding: 124px 0;
}
@media (max-width: 640px){
.about-offices{
padding: 80px 0; /* نفس نمطك للموبايل */
}
}
/* تخطيط عمودين مع فجوة 48px */
.about-offices__grid{
display: flex;
align-items: center;
gap: 48px;
flex-wrap: nowrap;
}
/* في RTL نخلي اتجاه الصف معاكس (صورة يمين، نص يسار) */
[dir="rtl"] .about-offices__grid{
flex-direction: row-reverse;
}
@media (max-width: 1024px){
.about-offices__grid{
flex-wrap: wrap;
}
}
/* الصورة */
.about-offices__media{
flex: 1 1 50%;
min-width: 280px;
height: 460px;
margin: 0;
border-radius: 20px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.about-offices__img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* المحتوى */
.about-offices__content{
flex: 1 1 50%;
min-width: 280px;
}
/* H2 */
.offices__h2{
color: var(--Primary-PR-800, #143960);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 39.808px;
font-style: normal;
font-weight: 700;
line-height: 115%; /* 45.779px */
letter-spacing: -0.876px;
margin: 0 0 16px;
}
/* Subtitle (H6 style) */
.offices__sub{
color: var(--Primary-PR-400, #249EDC);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 21px;
font-style: normal;
font-weight: 700;
line-height: 120%; /* 25.2px */
letter-spacing: -0.42px;
margin: 0 0 16px;
}
/* Body */
.offices__body{
color: var(--Neutral-NTRL-800, #262626);
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 17px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 141.176% */
margin: 0 0 32px; /* 16px بين الفقرات داخليًا + 32 قبل الزر */
}
.offices__body p{ margin: 0 0 16px; }
/* Button (نفس الزر السابق) */
.offices__btn{
display: inline-flex;
padding: 14px 32px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 999px;
background: var(--Primary-PR-800, #143960);
color: var(--Gray-GRY-50, #F9FAFB);
text-align: center;
text-decoration: none;
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 115%;
letter-spacing: -0.32px;
transition: opacity .2s ease, transform .15s ease;
}
.offices__btn:hover{ opacity: .9; }
.offices__btn:active{ transform: translateY(1px); }
.schedule__left{
width: fit-content;
}
/* Responsive: عمود واحد */
@media (max-width: 1024px){
.about-offices__media,
.about-offices__content{
flex: 1 1 100%;
}
}
/* تحسينات موبايل */
@media (max-width: 640px){
.offices__h2{ font-size: 32px; letter-spacing: -0.6px; }
.about-offices__media{ height: 320px; }
}
/* ===== About – Values ===== */
.about-values{
background: var(--Gray-GRY-100, #F3F4F6);
padding: 128px 0;
}
@media (max-width: 640px){
.about-values{ padding: 80px 0; }
}
/* Title */
.av__h1{
color: var(--Primary-PR-800, #143960);
text-align: center;
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 47.776px;
font-style: normal;
font-weight: 700;
line-height: 115%; /* 54.942px */
letter-spacing: -0.956px;
margin: 0;
}
/* Lead / Description */
.av__lead{
color: var(--Neutral-NTRL-800, #262626);
text-align: center;
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 125%; /* 20px */
padding-top: 16px;
max-width: 940px;
margin: 0 auto;
}
.av__lead p{ margin: 0; }
/* Cards wrapper */
.about-values__cards{
display: flex;
align-items: flex-start;
gap: 48px;
align-self: stretch;
padding-top: 80px;
flex-wrap: wrap; /* للتجاوب */
}
/* Card */
.aval-card{
display: flex;
min-height: 240px;
padding: 32px;
justify-content: center;
align-items: center;
gap: 8px;
flex: 1 1 calc((100% - 3*48px) / 4); /* 4 أعمدة دسك توب */
max-width: calc((100% - 3*48px) / 4);
border-radius: 20px;
border: 1px solid var(--Gray-GRY-200, #E5E7EB);
background: var(--Gray-GRY-50, #F9FAFB);
flex-direction: column;
text-align: center;
}
@media (max-width: 1024px){
.aval-card{
flex-basis: calc((100% - 48px) / 2); /* 2 عمود تابلت */
max-width: calc((100% - 48px) / 2);
}
}
@media (max-width: 640px){
.aval-card{
flex-basis: 100%; /* عمود واحد موبايل */
max-width: 100%;
min-height: 220px;
}
}
/* Icon */
.aval-card__icon{
width: 64px;
height: 52px;
aspect-ratio: 16/13;
object-fit: contain;
display: block;
margin-bottom: 8px;
}
/* Card title (H5) */
.aval-card__title{
color: var(--Primary-PR-800, #143960);
text-align: center;
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 23.04px;
font-style: normal;
font-weight: 700;
line-height: 120%; /* 27.648px */
letter-spacing: -0.461px;
margin: 0;
}
/* Card text */
.aval-card__text{
color: var(--Neutral-NTRL-800, #262626);
text-align: center;
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 125%; /* 20px */
margin: 8px 0 0;
}
/* ===== Awards & Recognition ===== */
.awards-section{
background: var(--Gray-GRY-50, #F9FAFB);
padding: 128px 0;
}
@media (max-width: 768px){
.awards-section{ padding: 80px 0; }
}
.awards__title{
color: var(--Primary-PR-800, #143960);
text-align: center;
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 39.808px;
font-style: normal;
font-weight: 700;
line-height: 115%; /* 45.779px */
letter-spacing: -0.876px;
margin: 0;
}
.awards__desc{
color: var(--Neutral-NTRL-800, #262626);
text-align: center;
font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 125%; /* 20px */
padding-top: 16px;
max-width: 900px;
margin: 0 auto;
}
.awards__logos{
display: flex;
flex-direction: column;
align-items: center;
gap: 64px; /* المسافة بين السطرين */
padding-top: 80px;
}
/* كل سطر: 4 شعارات وسط الشاشة */
.awards__row{
display: flex;
justify-content: center;
align-items: center;
gap: 80px; /* حسب طلبك */
flex-wrap: wrap; /* يبقى متجاوب */
}
.awards__logo{
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform .2s ease, opacity .2s ease;
}
.awards__logo:hover{ transform: scale(1.05); opacity: .95; }
.awards__row img{
max-height: 60px;
width: auto;
object-fit: contain;
display: block;
}
/* Tablet: خليه 2×2 لكل سطر (المسافات أصغر قليلاً) */
@media (max-width: 1024px){
.awards__row{ gap: 56px; }
.awards__row img{ max-height: 56px; }
}
/* Mobile: شعارين في السطر ليظل جميل */
@media (max-width: 640px){
.awards__row{ gap: 32px; }
.awards__row img{ max-height: 48px; }
}
.industries-cov{background:var(--indcov-bg,transparent);color:var(--indcov-fg,inherit);}
.industries-cov .btn.btn--primary{background:var(--indcov-bg,#143960);color:var(--indcov-fg,#fff);border-color:var(--indcov-fg,#fff);}
.profiles-hero{background:var(--ph-bg,transparent);}
.atabs{background:var(--atabs-bg,transparent);color:var(--atabs-fg,inherit);}