:root {
--fm-panel: #f7f7f7;        
--fm-line: #eceded;         
--fm-placeholder: #969698;  
--fm-muted: #646567;        
--fm-ink: #030915;          
--fm-dash: #d9d9d9;         
--fm-orange-100: #fdebe0;   
--fm-orange-hover: #d45100; 
--fm-modal-ink: #2a2929;
--fm-close-bg: #efeff0;     
--fm-close-fg: #7e7e80;
--fm-success: #22d180;      
--fm-error: #d92d20;
--fm-error-50: #fef3f2;
--fm-ring: 0 0 0 3px rgba(238, 91, 0, 0.14);
--fm-ring-error: 0 0 0 3px rgba(217, 45, 32, 0.14);
}
.btn--orange {
--btn-bg: var(--c-orange); --btn-bd: transparent; --btn-fg: var(--c-white);
--btn-mark: var(--c-white); --btn-hover-bg: var(--fm-orange-hover); --btn-hover-fg: var(--c-white);
padding: 15px 23px; 
font-weight: 600;
}
.btn--orange .btn__mark {
rotate: 45deg; margin-inline: 2.485px;
transition: rotate var(--dur) var(--ease), translate var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
[dir='rtl'] .btn--orange .btn__mark { rotate: -45deg; }
@media (hover: hover) {
.btn--orange:hover .btn__mark { translate: 3px 0; }
[dir='rtl'] .btn--orange:hover .btn__mark { translate: -3px 0; }
}
.btn--orange:active { background: var(--fm-orange-hover); }
.btn.is-loading { cursor: progress; pointer-events: none; }
.btn.is-loading .btn__mark {
clip-path: none; border-radius: 50%; background: transparent;
border: 2px solid rgba(255, 255, 255, 0.35); border-block-start-color: var(--c-white);
animation: fm-spin 700ms linear infinite;
}
@keyframes fm-spin { to { rotate: 405deg; } }
.btn[disabled]:not(.is-loading) { opacity: 0.6; cursor: not-allowed; }
.page-hero--forms { padding-block-end: clamp(140px, calc(140px + 75 * (100vw - 390px) / 1050), 215px); }
.page-hero--forms .page-hero__strip { transform: scaleX(-1); }
[dir='rtl'] .page-hero--forms .page-hero__strip { transform: none; }
.page-hero--careers { padding-block-start: calc(var(--header-h) + clamp(40px, calc(40px + 39 * (100vw - 390px) / 1050), 79px)); }
.page-hero--careers .page-hero__title, .page-hero--careers .page-hero__text { max-inline-size: 837px; }
:lang(ar) .page-hero--careers .page-hero__title { max-inline-size: 712px; }
:lang(ar) .page-hero--careers .page-hero__text { max-inline-size: 740px; }
.page-hero--job {
min-block-size: clamp(340px, calc(340px + 125 * (100vw - 390px) / 1050), 465px);
padding-block: calc(var(--header-h) + clamp(44px, calc(44px + 39 * (100vw - 390px) / 1050), 83px)) clamp(64px, calc(64px + 45 * (100vw - 390px) / 1050), 109px);
}
.page-hero--job .page-hero__content { gap: 32px; }
.page-hero--job .page-hero__title { max-inline-size: none; }
.page-hero--job .page-hero__cta { margin-block-start: 0; }
.contact-split { display: flex; align-items: flex-start; gap: 80px; }
.contact-split__form { flex: 0 0 639px; min-inline-size: 0; }
.contact-info { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.contact-info__head { display: flex; flex-direction: column; gap: 16px; }
.contact-info__title { font-size: var(--fs-h2); font-weight: 700; line-height: 44px; color: var(--c-ink); }
.contact-info__text { font-size: 16px; line-height: 1.5; color: var(--c-neutral-950); }
.contact-info--compact .contact-info__title { font-size: 28px; line-height: 1.4; color: var(--c-black); }
.contact-list { display: flex; flex-direction: column; gap: 14px; }
.contact-info--compact .contact-list { gap: 12px; }
.contact-list__item { display: flex; align-items: center; gap: 8px; }
.contact-list__item--address { align-items: flex-start; }
.contact-info--compact .contact-list__item--address { align-items: center; }
.contact-list__link {
font-size: 16px; line-height: 1.5; color: var(--c-black);
text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px;
transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
.contact-list__link--address { max-inline-size: 364px; }
.contact-list .icon-tile { transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
@media (hover: hover) {
.contact-list__link:hover { color: var(--c-orange); text-decoration-color: currentColor; }
.contact-list__item:has(.contact-list__link:hover) .icon-tile { background: var(--c-orange); color: var(--c-white); }
}
.form-card { position: relative; background: var(--fm-panel); border: 1px solid var(--fm-line); padding: 31px; }
.form { display: flex; flex-direction: column; }
.form__fields { display: flex; flex-direction: column; gap: 24px; }
.form__actions { display: flex; justify-content: flex-end; margin-block-start: 32px; }
.form__hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form__status:not(:empty) {
display: flex; gap: 10px; align-items: flex-start; margin-block-start: 24px; padding: 12px 16px;
background: var(--fm-error-50); border: 1px solid rgba(217, 45, 32, 0.25); color: var(--fm-error);
font-size: 14px; line-height: 1.5; animation: fm-rise 240ms var(--ease-out) both;
}
.form__status:not(:empty)::before { content: ''; inline-size: 8px; block-size: 8px; margin-block-start: 7px; flex: none; background: currentColor; }
.field { display: flex; flex-direction: column; gap: 8px; min-inline-size: 0; }
.field__label { font-size: 16px; line-height: 1.5; color: var(--fm-ink); }
.field__opt { font-size: 14px; color: var(--fm-muted); }
.field__control {
display: block; inline-size: 100%; block-size: 56px; margin: 0; padding: 0 15px;
background: var(--c-white); border: 1px solid var(--fm-line); border-radius: 0;
font: inherit; font-size: 14px; line-height: 1.5; color: var(--fm-ink);
-webkit-appearance: none; appearance: none;
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.field__control::placeholder { color: var(--fm-placeholder); opacity: 1; }
.field__control--area { block-size: 125px; min-block-size: 125px; max-block-size: 360px; padding-block: 15px; resize: none; overflow-y: auto; }
@supports (field-sizing: content) { .field__control--area { field-sizing: content; block-size: auto; } }
.field__control--ltr { direction: ltr; }
:lang(ar) .field__control--ltr { text-align: right; }
.field__control:focus, .field__control:focus-visible { outline: none; }
@media (hover: hover) { .field__control:hover { border-color: var(--c-line); } }
.field__control:focus { border-color: var(--c-orange); box-shadow: var(--fm-ring); }
.field__select { position: relative; display: block; }
.field__select .field__control { padding-inline: 15px 47px; cursor: pointer; text-overflow: ellipsis; }
.field__select .field__control:invalid { color: var(--fm-placeholder); }
.field__select option { color: var(--fm-ink); }
.field__chevron { position: absolute; inset-block: 0; inset-inline-end: 15px; display: grid; place-items: center; color: var(--fm-muted); pointer-events: none; }
.field__chevron .icon { inline-size: 20px; block-size: 20px; transition: rotate var(--dur) var(--ease); }
.field__select:focus-within .field__chevron, .field__code:focus-within .field__chevron { color: var(--c-orange); }
.field__phone {
display: flex; block-size: 56px; background: var(--c-white); border: 1px solid var(--fm-line);
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
@media (hover: hover) { .field__phone:hover { border-color: var(--c-line); } }
.field__phone:focus-within { border-color: var(--c-orange); box-shadow: var(--fm-ring); }
.field__code { position: relative; flex: none; display: flex; border-inline-end: 1px solid var(--fm-line); }
.field__code-select {
inline-size: auto; block-size: 100%; margin: 0; padding: 0 43px 0 15px; border: 0; border-radius: 0;
background: transparent; font: inherit; font-size: 14px; line-height: 1.5; color: var(--fm-placeholder);
-webkit-appearance: none; appearance: none; cursor: pointer; transition: color var(--dur) var(--ease);
}
.field__code-select:focus { outline: none; }
.field__phone:has(.field__control:not(:placeholder-shown)) .field__code-select { color: var(--fm-ink); }
:lang(ar) .field__code-select { padding: 0 15px 0 43px; text-align: right; text-align-last: right; }
.field__phone .field__control { flex: 1 1 auto; min-inline-size: 0; block-size: 100%; border: 0; padding-inline: 16px 15px; box-shadow: none; background: transparent; }
:lang(ar) .field__phone .field__control { padding: 0 16px 0 15px; }
.field__error {
display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--fm-error);
animation: fm-rise 220ms var(--ease-out) both;
}
.field__error::before { content: ''; inline-size: 6px; block-size: 6px; margin-block-start: 7px; flex: none; background: currentColor; }
.field.is-invalid .field__control, .field.is-invalid .field__phone { border-color: var(--fm-error); }
.field.is-invalid .field__control:focus, .field.is-invalid .field__phone:focus-within { box-shadow: var(--fm-ring-error); }
.field.is-invalid .field__phone .field__control { border-color: transparent; }
.field.is-valid .field__control:not(:focus), .field.is-valid .field__phone:not(:focus-within) { border-color: var(--fm-line); }
@keyframes fm-rise { from { opacity: 0; translate: 0 -4px; } }
.upload {
position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 15px; background: var(--c-white); border: 1px dashed var(--fm-dash); text-align: center; cursor: pointer;
transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.upload__input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.upload__icon { transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), scale var(--dur) var(--ease); }
.upload__text { font-size: 16px; line-height: 1.5; color: var(--c-black); }
.upload__browse {
color: var(--c-orange); text-decoration: underline; text-decoration-skip-ink: none; text-underline-offset: 3px;
transition: color var(--dur) var(--ease);
}
.upload__formats { font-size: 14px; line-height: 1.5; color: var(--fm-placeholder); }
@media (hover: hover) {
.upload:hover { border-color: var(--c-orange); background: var(--c-orange-50); }
.upload:hover .upload__icon { background: var(--c-orange); color: var(--c-white); }
.upload:hover .upload__browse { color: var(--fm-orange-hover); }
}
.upload:focus-within { border-color: var(--c-orange); box-shadow: var(--fm-ring); }
.upload.is-dragover { border-style: solid; border-color: var(--c-orange); background: var(--c-orange-50); }
.upload.is-dragover .upload__icon { background: var(--c-orange); color: var(--c-white); scale: 1.12; }
.field.is-invalid .upload { border-color: var(--fm-error); }
.upload__list { display: flex; flex-direction: column; gap: 8px; }
.upload__item {
display: flex; align-items: center; gap: 12px; padding: 7px; padding-inline-start: 7px;
background: var(--c-white); border: 1px solid var(--fm-line); animation: fm-rise 220ms var(--ease-out) both;
}
.upload__file-icon { display: grid; place-items: center; inline-size: 36px; block-size: 36px; flex: none; background: var(--c-orange-50); color: var(--c-orange); }
.upload__file-icon .icon { inline-size: 20px; block-size: 20px; }
.upload__meta { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; }
.upload__name { font-size: 14px; line-height: 1.45; color: var(--fm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upload__size { display: block; font-size: 12px; line-height: 1.45; color: var(--fm-placeholder); }
:lang(ar) .upload__size { text-align: right; }
.upload__remove {
display: grid; place-items: center; inline-size: 36px; block-size: 36px; flex: none; border-radius: 999px;
color: var(--fm-close-fg); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.upload__remove .icon { inline-size: 20px; block-size: 20px; }
@media (hover: hover) { .upload__remove:hover { background: var(--fm-error-50); color: var(--fm-error); } }
.clients__grid--wall { inline-size: min(1195px, 100%); }
@media (min-width: 768px) {
.clients__grid--wall .logo-tile { padding-block: 23px; padding-inline: clamp(12px, calc((100% - 113px) / 2), 43px); }
}
.section--partners-why .pattern-panel, .section--positions .pattern-panel {
inset-block-start: -141px;
background-image: url('../../img/forms/l-pattern-warm-tall.svg'); background-size: 724.44px 988px;
}
.section--partners-why > .container, .section--positions > .container { position: relative; }
.why .sec-head--partners-why { max-inline-size: 650px; }
:lang(ar) .why .sec-head--partners-why { max-inline-size: 764px; }
:lang(ar) .sec-head--partners-why .h-section { max-inline-size: 540px; }
:lang(ar) .sec-head--partners-why .sec-head__text { font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--c-neutral-950); max-inline-size: 764px; }
@media (min-width: 1024px) { :lang(ar) .section--partners-why .feat-card { min-block-size: 196px; } }
.section--partners-why .why__grid { inline-size: min(1196px, 100%); }
:lang(ar) .section--partners-why .why__grid { inline-size: min(1198px, 100%); }
.section--partners-why .feat-card { --c-line: var(--fm-line); }
.page-partners .cta-band__copy { max-inline-size: 793px; }
.page-partners .cta-band .btn { padding-block: 15px; }
.why--join { gap: 40px; }
.why--join .why__grid { inline-size: min(1192px, 100%); }
:lang(ar) .why--join .why__grid { inline-size: min(1198px, 100%); }
@media (min-width: 768px) { .why--join .feat-card, .section--partners-why .feat-card { padding: 24px; } }
.why--join .sec-head { max-inline-size: 640px; gap: 12px; }
:lang(ar) .why--join .sec-head { max-inline-size: 700px; }
.h-section--lh44 { line-height: 44px; padding-block-start: 2px; }
.positions { display: flex; flex-direction: column; align-items: center; gap: 60px; }
.sec-head--positions { max-inline-size: 760px; }
.sec-head--positions .h-section { max-inline-size: 540px; }
.jobs-grid { inline-size: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.job-card {
position: relative; display: flex; flex-direction: column;
padding: 24px; background: var(--c-white); border: 1px solid var(--fm-line);
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.job-card__body { display: flex; flex-direction: column; gap: 16px; padding-inline-end: 72px; }
.job-card__head { display: flex; flex-direction: column; gap: 8px; }
.job-card__title { font-size: 20px; font-weight: 700; line-height: 1.5; color: var(--c-black); transition: color var(--dur) var(--ease); }
.job-card__link { color: inherit; }
.job-card__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.job-card__link:focus-visible { outline: none; }
.job-card:has(.job-card__link:focus-visible) { outline: 2px solid var(--c-orange); outline-offset: 2px; z-index: 3; }
.job-card__type { font-size: 16px; line-height: 1.5; color: var(--c-black); }
.job-card__text { font-size: 16px; line-height: 1.5; color: var(--fm-muted); }
.job-card__btn {
position: absolute; inset-inline-end: 24px; inset-block-end: 24px;
display: grid; place-items: center; inline-size: 48px; block-size: 48px;
background: var(--c-orange-50); border: 1px solid var(--fm-orange-100);
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.job-card__mark {
inline-size: 12px; block-size: 12px; background: var(--c-orange); clip-path: var(--notch);
transition: rotate var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
[dir='rtl'] .job-card__mark { scale: -1 1; }
@media (hover: hover) {
.job-card:hover { border-color: var(--c-orange); box-shadow: -2px 3px 6px 5px rgba(0, 0, 0, 0.03); z-index: 2; }
.job-card:hover .job-card__title { color: var(--c-orange); }
.job-card:hover .job-card__btn { background: var(--c-orange); border-color: var(--c-orange); }
.job-card:hover .job-card__mark { background: var(--c-white); rotate: 45deg; }
[dir='rtl'] .job-card:hover .job-card__mark { rotate: -45deg; }
}
.job-layout { display: flex; flex-direction: column; align-items: center; gap: 80px; }
.job-panels { display: flex; align-items: stretch; gap: 24px; inline-size: 100%; }
.job-panel {
flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; gap: 24px;
padding: 31px; background: var(--fm-panel); border: 1px solid var(--fm-line);
}
.job-panel__title { font-size: 24px; font-weight: 700; line-height: 1.4; color: var(--c-ink); }
.job-list { display: flex; flex-direction: column; gap: 16px; }
.job-list li { display: flex; gap: 16px; font-size: 14px; line-height: 1.5; color: var(--c-neutral-950); }
.job-list li::before { content: ''; inline-size: 10px; block-size: 10px; margin-block-start: 5.5px; flex: none; background: var(--c-orange); }
.job-apply { inline-size: min(639px, 100%); }
.modal {
position: fixed; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; max-block-size: none;
margin: 0; padding: 16px; border: 0; background: transparent; color: inherit;
overflow-y: auto; overscroll-behavior: contain;
}
.modal[open] { display: grid; place-items: center; }
.modal::backdrop { background: rgba(0, 0, 0, 0.25); }
.modal__panel { position: relative; inline-size: min(668px, 100%); background: var(--c-white); box-shadow: 4px 4px 50px 0 rgba(11, 9, 32, 0.1); }
.modal__panel:focus, .modal__panel:focus-visible { outline: none; }
.modal__top { display: flex; justify-content: flex-end; padding: 24px 24px 0; }
.modal__close {
display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 999px;
background: var(--fm-close-bg); color: var(--fm-close-fg);
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.modal__close .icon { inline-size: 24px; block-size: 24px; transition: rotate var(--dur) var(--ease); }
@media (hover: hover) {
.modal__close:hover { background: #e3e3e5; color: var(--fm-modal-ink); }
.modal__close:hover .icon { rotate: 90deg; }
}
.modal__body { display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 24px 24px 56px; text-align: center; }
.modal__content { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.modal__icon { display: block; inline-size: 100px; block-size: 100px; }
.modal__copy { display: flex; flex-direction: column; gap: 8px; max-inline-size: 427px; }
.modal__title { font-size: 28px; font-weight: 700; line-height: 1.4; color: var(--fm-modal-ink); }
.modal__text { font-size: 18px; line-height: 1.5; color: var(--fm-placeholder); }
@media (min-width: 640px) {
.modal .modal__home, .page-become-partner .form__submit { inline-size: 184px; padding-inline: 0; }
}
.success-check { display: block; inline-size: 100px; block-size: 100px; overflow: visible; }
.success-check__disc { fill: var(--fm-success); transform-box: fill-box; transform-origin: center; }
.success-check__ring { fill: none; stroke: var(--fm-success); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.success-check__tick { fill: none; stroke: var(--c-white); stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.modal[open]::backdrop { animation: fm-fade 240ms var(--ease) both; }
.modal[open] .modal__panel { animation: fm-panel-in 360ms var(--ease-out) both; }
.modal[open] .success-check__disc { animation: fm-pop 560ms 80ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.modal[open] .success-check__tick { animation: fm-draw 420ms 360ms var(--ease-out) both; }
.modal[open] .success-check__ring { animation: fm-ring 900ms 260ms var(--ease-out) both; }
.modal.is-closing::backdrop { animation: fm-fade 200ms var(--ease) reverse both; }
.modal.is-closing .modal__panel { animation: fm-panel-out 200ms var(--ease) both; }
@keyframes fm-fade { from { opacity: 0; } }
@keyframes fm-panel-in { from { opacity: 0; translate: 0 16px; scale: 0.97; } }
@keyframes fm-panel-out { to { opacity: 0; translate: 0 10px; scale: 0.98; } }
@keyframes fm-pop { from { opacity: 0; scale: 0.25; } 55% { opacity: 1; } }
@keyframes fm-draw { from { stroke-dashoffset: 1; } }
@keyframes fm-ring { 0% { opacity: 0.55; scale: 1; } 100% { opacity: 0; scale: 1.5; } }
@media (max-width: 1199.98px) {
.contact-split { gap: 48px; }
.contact-split__form { flex: 0 1 600px; }
}
@media (max-width: 1023.98px) {
.contact-split { flex-direction: column; align-items: stretch; gap: 32px; }
.contact-split__form { flex: none; }
.contact-info { gap: 24px; }
.job-panels { flex-direction: column; gap: 16px; }
.job-layout { gap: 48px; }
.positions { gap: 40px; }
}
@media (max-width: 767.98px) {
.contact-info__title { line-height: 1.25; }
.contact-info--compact .contact-info__title { font-size: 24px; line-height: 1.3; }
.contact-info__head { gap: 12px; }
.form-card { padding: 23px 19px; }
.form__fields { gap: 20px; }
.form__actions { margin-block-start: 28px; }
.field__control, .field__code-select { font-size: 16px; }
.upload { padding: 19px 15px; }
.upload__formats { font-size: 13px; }
.job-panel { padding: 23px 19px; gap: 20px; }
.job-panel__title { font-size: 20px; }
.jobs-grid { grid-template-columns: minmax(0, 1fr); }
.job-card { padding: 19px; }
.job-card__title { font-size: 18px; }
.job-card__btn { inset-inline-end: 19px; inset-block: 19px auto; inline-size: 40px; block-size: 40px; }
.job-card__body { padding-inline-end: 0; }
.job-card__head { padding-inline-end: 52px; min-block-size: 40px; }
.h-section--lh44 { line-height: 1.25; }
.positions { gap: 32px; }
.why--join { gap: 32px; }
.page-hero--job .page-hero__content { gap: 24px; }
.modal { padding: 16px; }
.modal__top { padding: 16px 16px 0; }
.modal__body { gap: 24px; padding: 8px 20px 36px; }
.modal__content { gap: 12px; }
.modal__icon, .success-check { inline-size: 84px; block-size: 84px; }
.modal__title { font-size: 22px; }
.modal__text { font-size: 16px; }
}
@media (max-width: 639.98px) {
.form__actions .btn, .modal__home { inline-size: 100%; }
}
@media (max-width: 1023.98px) {
.clients__grid--wall > .is-repeat { display: none; }
.contact-info { flex: none; }
}