/* Fidar Widgets — shared defaults. Every visual rule is scoped to a Fidar widget. */ .fidar-section, .fidar-header, .fidar-footer { --fidar-navy: #182b3b; --fidar-navy-2: #1e3447; --fidar-yellow: #ffea17; --fidar-olive: #777b2f; --fidar-text: #ffffff; --fidar-muted: #b9c4ce; --fidar-border: rgba(255, 255, 255, .28); --fidar-radius: 22px; font: inherit; box-sizing: border-box; } .fidar-section *, .fidar-header *, .fidar-footer * { box-sizing: border-box; } .fidar-section { width: 100%; background: var(--fidar-navy); color: var(--fidar-text); } .fidar-section__inner { width: 100%; max-width: 1440px; margin-inline: auto; padding: 52px 24px; } .fidar-section__heading { margin: 0 0 36px; color: var(--fidar-yellow); text-align: center; font-weight: 800; line-height: 1.25; } .fidar-card { color: inherit; text-decoration: none; } .fidar-card:focus-visible, .fidar-section a:focus-visible, .fidar-header a:focus-visible, .fidar-footer a:focus-visible, .fidar-section button:focus-visible, .fidar-header button:focus-visible { outline: 2px solid var(--fidar-yellow); outline-offset: 3px; } /* Header */ .fidar-header { width: 100%; background: var(--fidar-navy); padding: 10px 16px; color: #fff; } .fidar-header__inner { width: 100%; max-width: 1440px; min-height: 66px; margin-inline: auto; padding: 8px 18px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; display: flex; align-items: center; gap: 24px; } .fidar-header__logo { display: inline-flex; align-items: center; flex: 0 0 auto; } .fidar-header__logo img { display: block; width: 96px; max-height: 42px; object-fit: contain; } .fidar-header__wordmark { color: var(--fidar-yellow); font-weight: 900; font-size: 24px; line-height: 1; text-decoration: none; letter-spacing: 1px; } .fidar-header__nav { margin-inline: auto; } .fidar-header__menu { list-style: none; display: flex; align-items: center; justify-content: center; gap: 30px; margin: 0; padding: 0; } .fidar-header__menu ul { list-style: none; margin: 0; padding: 10px 0; } .fidar-header__nav a { color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; } .fidar-header__nav a:hover { color: var(--fidar-yellow); } .fidar-header__cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px 22px; border-radius: 999px; background: var(--fidar-yellow); color: var(--fidar-navy); text-decoration: none; font-weight: 800; border: 1px solid var(--fidar-yellow); white-space: nowrap; } .fidar-header__toggle { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--fidar-border); border-radius: 50%; background: transparent; color: var(--fidar-yellow); cursor: pointer; } .fidar-header__toggle svg { width: 20px; height: 20px; fill: currentColor; } /* Services */ .fidar-services__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } .fidar-services__card { min-height: 180px; padding: 24px 16px 20px; border: 1px solid var(--fidar-border); border-radius: 20px; background: var(--fidar-navy-2); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; text-decoration: none; color: #fff; overflow: hidden; } .fidar-services__card:hover { transform: translateY(-2px); } .fidar-services__icon { display: inline-flex; align-items: center; justify-content: center; color: var(--fidar-yellow); font-size: 52px; margin-bottom: 14px; } .fidar-services__icon svg { width: 1em; height: 1em; fill: currentColor; } .fidar-services__image { width: 64px; height: 64px; object-fit: contain; margin-bottom: 14px; } .fidar-services__title { margin: 0; font-size: 15px; line-height: 1.5; color: #fff; } .fidar-services__description { margin-top: 8px; color: var(--fidar-muted); font-size: 13px; line-height: 1.7; } .fidar-services__description p { margin: 0; } /* Why Fidar */ .fidar-why__panel { border: 1px solid var(--fidar-border); border-radius: 80px; padding: 36px 32px; background: var(--fidar-navy-2); box-shadow: 0 12px 34px rgba(0,0,0,.18); } .fidar-why__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; } .fidar-why__item { text-align: center; padding: 10px; } .fidar-why__value { display: flex; direction: ltr; align-items: baseline; justify-content: center; gap: 3px; color: #fff; font-weight: 900; line-height: 1; } .fidar-why__number { font-size: clamp(42px, 5vw, 74px); } .fidar-why__prefix, .fidar-why__suffix { font-size: clamp(24px, 3vw, 42px); } .fidar-why__title { margin: 12px 0 0; color: var(--fidar-yellow); font-size: 16px; } .fidar-why__description { margin: 6px 0 0; color: #fff; font-size: 14px; } /* Advantages */ .fidar-advantages__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; } .fidar-advantages__card { min-height: 230px; padding: 34px 28px 28px; border: 1px solid var(--fidar-border); border-radius: 24px; background: var(--fidar-navy-2); display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; } .fidar-advantages__card::after { content: ""; position: absolute; inset-inline: 24px; bottom: 52px; border-top: 1px solid rgba(255,234,23,.42); } .fidar-advantages__icon { color: var(--fidar-yellow); font-size: 42px; margin-bottom: auto; } .fidar-advantages__icon svg { width: 1em; height: 1em; fill: currentColor; } .fidar-advantages__image { width: 64px; height: 64px; object-fit: contain; margin-bottom: auto; } .fidar-advantages__title { margin: 0 0 12px; color: #fff; font-size: 18px; position: relative; z-index: 1; } .fidar-advantages__description { color: var(--fidar-muted); font-size: 14px; position: relative; z-index: 1; } .fidar-advantages__description p { margin: 0; } /* Process */ .fidar-process__list { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 28px; } .fidar-process__item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; } .fidar-process__orb { width: 110px; height: 110px; border-radius: 50%; border: 1px dashed var(--fidar-yellow); position: relative; display: flex; align-items: center; justify-content: center; background: transparent; } .fidar-process__orb::before { content: ""; position: absolute; width: 58%; height: 58%; border-radius: 50%; background: rgba(160,160,55,.78); filter: blur(10px); } .fidar-process__step { position: absolute; top: 8px; inset-inline-start: 8px; color: var(--fidar-yellow); font-weight: 800; font-size: 20px; z-index: 2; } .fidar-process__icon { position: relative; z-index: 2; display: inline-flex; color: var(--fidar-yellow); font-size: 30px; } .fidar-process__icon svg { width: 1em; height: 1em; fill: currentColor; } .fidar-process__image { position: relative; z-index: 2; width: 58%; height: 58%; object-fit: contain; border-radius: 50%; } .fidar-process__title { margin: 0; color: #fff; font-size: 15px; } .fidar-process__description { margin: 6px 0 0; color: var(--fidar-muted); font-size: 13px; } /* Clients */ .fidar-clients__viewport { overflow: hidden; width: 100%; touch-action: pan-y; } .fidar-clients__track { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 14px; } .fidar-clients__item { min-width: 0; min-height: 88px; padding: 14px; border: 1px solid var(--fidar-border); border-radius: 16px; background: var(--fidar-navy-2); color: #fff; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; } .fidar-clients__logo { max-width: 100%; width: 78px; height: 42px; object-fit: contain; opacity: .92; } .fidar-clients__placeholder { display: block; width: 100%; height: 46px; border-radius: 10px; background: rgba(255,255,255,.035); } .fidar-clients__company { font-size: 11px; color: var(--fidar-muted); text-align: center; } .fidar-clients--carousel .fidar-clients__track { display: flex; gap: var(--fidar-client-gap, 16px); will-change: transform; transition: transform .45s ease; } .fidar-clients--carousel .fidar-clients__item { flex: 0 0 calc((100% - (var(--fidar-client-gap, 16px) * 5)) / 6); } .fidar-clients__nav-wrap { display: flex; justify-content: center; gap: 10px; margin-top: 18px; } .fidar-clients__nav { width: 38px; height: 38px; border: 1px solid var(--fidar-border); border-radius: 50%; background: transparent; color: var(--fidar-yellow); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .fidar-clients__nav svg { width: 16px; height: 16px; fill: currentColor; } .fidar-clients__pagination { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 12px; } .fidar-clients__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #647585; cursor: pointer; } .fidar-clients__dot.is-active { background: var(--fidar-yellow); } /* Portfolio */ .fidar-portfolio__layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 28px; align-items: stretch; direction: ltr; } .fidar-portfolio__preview, .fidar-portfolio__grid { direction: rtl; } .fidar-portfolio__preview { min-height: 460px; border: 1px solid var(--fidar-border); border-radius: 24px; background: var(--fidar-navy-2); overflow: hidden; position: relative; } .fidar-portfolio__preview-image { width: 100%; height: 100%; min-height: 460px; display: block; object-fit: cover; } .fidar-portfolio__preview-placeholder { position: absolute; inset: 0; background: rgba(255,255,255,.02); } .fidar-portfolio__preview-copy { position: absolute; inset-inline: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: rgba(24,43,59,.82); border-radius: 14px; backdrop-filter: blur(6px); } .fidar-portfolio__preview-copy span { color: var(--fidar-yellow); font-size: 13px; } .fidar-portfolio__preview-copy strong { color: #fff; font-size: 20px; } .fidar-portfolio__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-content: start; } .fidar-portfolio__card { padding: 18px; border: 1px solid var(--fidar-border); border-radius: 20px; background: var(--fidar-navy-2); color: #fff; text-decoration: none; min-height: 118px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .fidar-portfolio__image { width: 100%; height: 110px; object-fit: cover; border-radius: 12px; margin-bottom: 12px; } .fidar-portfolio__category { color: var(--fidar-yellow); font-size: 12px; } .fidar-portfolio__title { color: #fff; margin: 6px 0 0; font-size: 15px; } .fidar-portfolio__description { color: var(--fidar-muted); font-size: 12px; margin-top: 8px; } .fidar-portfolio__description p { margin: 0; } .fidar-portfolio__button, .fidar-blog__button, .fidar-about__button { width: min(100%, 520px); margin: 22px auto 0; padding: 12px 24px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--fidar-yellow); border-bottom-width: 7px; border-radius: 12px; color: #fff; background: transparent; text-decoration: none; } .fidar-portfolio__button-icon svg, .fidar-blog__button-icon svg, .fidar-about__button-icon svg { width: 1em; height: 1em; fill: currentColor; } /* Blog */ .fidar-blog__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px; } .fidar-blog__card { min-width: 0; border: 1px solid var(--fidar-border); border-radius: 24px; background: var(--fidar-navy-2); overflow: hidden; padding: 10px 10px 18px; } .fidar-blog__image-link { display: block; } .fidar-blog__image { width: 100%; aspect-ratio: 3 / 4; height: auto; display: block; object-fit: cover; border: 1px solid rgba(255,255,255,.22); border-radius: 18px; background: rgba(255,255,255,.025); } .fidar-blog__image--placeholder { min-height: 240px; } .fidar-blog__card-body { padding: 14px 6px 0; } .fidar-blog__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--fidar-yellow); font-size: 11px; } .fidar-blog__title { margin: 10px 0 0; font-size: 16px; line-height: 1.5; } .fidar-blog__title a { color: #fff; text-decoration: none; } .fidar-blog__excerpt { color: var(--fidar-muted); font-size: 13px; line-height: 1.8; margin-top: 8px; } .fidar-blog__excerpt p { margin: 0; } .fidar-blog__read-more { display: inline-block; margin-top: 10px; color: var(--fidar-yellow); text-decoration: none; font-size: 13px; } /* About */ .fidar-about__layout { display: flex; flex-direction: row; align-items: center; gap: 40px; } .fidar-about__content { flex: 1 1 0; min-width: 0; } .fidar-about__heading { text-align: start; margin-bottom: 20px; } .fidar-about__text { color: #fff; line-height: 2; } .fidar-about__text p { margin-top: 0; } .fidar-about__media { flex: 0 1 48%; min-width: 0; } .fidar-about__image { display: block; width: 100%; height: auto; border-radius: 24px; object-fit: cover; } .fidar-about__button { margin-inline-start: 0; } /* Contact */ .fidar-contact__layout { display: flex; flex-direction: row; align-items: stretch; gap: 50px; } .fidar-contact__content { flex: 0 1 38%; min-width: 0; } .fidar-contact__form { flex: 1 1 0; min-width: 0; padding: 16px; border-radius: 20px; } .fidar-contact__heading { text-align: start; margin-bottom: 16px; } .fidar-contact__description { margin: 0 0 22px; color: #fff; line-height: 1.9; } .fidar-contact__info { display: flex; flex-direction: column; gap: 14px; } .fidar-contact__item { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; } .fidar-contact__icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; color: var(--fidar-yellow); border: 1px solid var(--fidar-border); border-radius: 50%; flex: 0 0 auto; } .fidar-contact__icon svg { width: 17px; height: 17px; fill: currentColor; } .fidar-contact__item-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .fidar-contact__label { color: var(--fidar-yellow); font-size: 12px; } .fidar-contact__value { color: #fff; font-size: 14px; overflow-wrap: anywhere; } .fidar-contact__form input:not([type="submit"]):not([type="button"]), .fidar-contact__form textarea, .fidar-contact__form select { width: 100%; min-height: 44px; padding: 10px 14px; color: #fff; background: transparent; border: 1px solid var(--fidar-border); border-radius: 999px; outline: none; } .fidar-contact__form textarea { min-height: 150px; border-radius: 18px; resize: vertical; } .fidar-contact__form input:focus, .fidar-contact__form textarea:focus, .fidar-contact__form select:focus { border-color: var(--fidar-yellow); } .fidar-contact__form button[type="submit"], .fidar-contact__form input[type="submit"], .fidar-contact__form .elementor-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 22px; border: 1px solid var(--fidar-yellow); border-radius: 999px; background: var(--fidar-yellow); color: var(--fidar-navy); cursor: pointer; font-weight: 800; } /* Footer */ .fidar-footer { background: var(--fidar-navy); color: #fff; } .fidar-footer__inner { width: 100%; max-width: 1440px; margin-inline: auto; padding: 52px 24px 28px; border-top: 1px solid rgba(255,255,255,.12); } .fidar-footer__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 38px; } .fidar-footer__column { min-width: 0; } .fidar-footer__logo { display: inline-flex; margin-bottom: 16px; } .fidar-footer__logo img { width: 110px; height: auto; object-fit: contain; } .fidar-footer__wordmark { display: inline-block; color: var(--fidar-yellow); font-size: 28px; font-weight: 900; margin-bottom: 16px; } .fidar-footer__heading { margin: 0 0 14px; color: var(--fidar-yellow); font-size: 18px; } .fidar-footer__about-text { color: #fff; font-size: 14px; line-height: 1.9; } .fidar-footer__about-text p { margin-top: 0; } .fidar-footer__menu { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; } .fidar-footer__menu a { color: #fff; text-decoration: none; } .fidar-footer__contacts { display: flex; flex-direction: column; gap: 12px; } .fidar-footer__contact-item { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; } .fidar-footer__contact-icon { color: var(--fidar-yellow); display: inline-flex; } .fidar-footer__contact-icon svg { width: 18px; height: 18px; fill: currentColor; } .fidar-footer__contact-copy { display: flex; flex-direction: column; gap: 2px; } .fidar-footer__contact-copy small { color: var(--fidar-yellow); } .fidar-footer__socials { display: flex; flex-wrap: wrap; gap: 10px; } .fidar-footer__social-link { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; color: var(--fidar-yellow); border: 1px solid var(--fidar-border); border-radius: 50%; text-decoration: none; } .fidar-footer__social-link svg { width: 18px; height: 18px; fill: currentColor; } .fidar-footer__copyright { margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); color: var(--fidar-muted); text-align: center; font-size: 13px; } /* ============================================================ * Fidar 2.0.7 — Collaboration Process / Illustrator geometry * The desktop timeline below uses the actual six alternating hairpin * segments and x-centres from the supplied 1440px Illustrator artwork. * ============================================================ */ .fidar-process__inner { max-width: 1440px; } .fidar-process__heading { margin-bottom: 28px; } .fidar-process__chain { --fidar-process-track-height: 354px; --fidar-process-dash: 11.85; --fidar-process-gap: 11.85; position: relative; width: 100%; max-width: 1440px; height: var(--fidar-process-track-height); min-height: 300px; margin-inline: auto; overflow: visible; } .fidar-process__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; pointer-events: none; } .fidar-process__stroke { fill: none; stroke: var(--fidar-yellow); stroke-width: 1; stroke-linecap: round; stroke-linejoin: miter; vector-effect: non-scaling-stroke; } .fidar-process__path { stroke-dasharray: var(--fidar-process-dash) var(--fidar-process-gap); } .fidar-process__cap { stroke-dasharray: none; } .fidar-process__items { position: absolute; inset: 0; direction: ltr; } .fidar-process__item { position: absolute; top: 0; bottom: 0; left: var(--fidar-process-x, 50%); width: 1px; height: 100%; min-width: 0; display: block; flex: none; align-items: initial; gap: 0; text-align: center; direction: rtl; } .fidar-process__glow-wrap { --fidar-process-glow-size: 112px; position: absolute; left: 0; width: var(--fidar-process-glow-size); height: var(--fidar-process-glow-size); transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; isolation: isolate; } .fidar-process__item--upper .fidar-process__glow-wrap { top: 29.95%; } .fidar-process__item--lower .fidar-process__glow-wrap { top: 70.55%; } .fidar-process__glow { position: absolute; inset: 8%; z-index: -1; border-radius: 50%; background: #777b2f; filter: blur(13px); opacity: .92; } .fidar-process__step { position: absolute; top: -7px; left: -2px; z-index: 3; color: var(--fidar-yellow); font-size: 27px; font-weight: 800; line-height: 1; } .fidar-process__icon, .fidar-process__image { position: relative; z-index: 2; } .fidar-process__icon { display: inline-flex; color: var(--fidar-yellow); font-size: 32px; } .fidar-process__icon svg { width: 1em; height: 1em; fill: currentColor; } .fidar-process__image { width: 62%; height: 62%; object-fit: contain; border-radius: 50%; } .fidar-process__copy { position: absolute; left: 0; width: 230px; max-width: 230px; transform: translateX(-50%); text-align: center; } .fidar-process__item--upper .fidar-process__copy { top: 56.2%; } .fidar-process__item--lower .fidar-process__copy { top: 32.2%; } .fidar-process__title { margin: 0; color: #fff; font-size: 17px; font-weight: 300; line-height: 1.45; } .fidar-process__description { margin-top: 2px; color: #fff; font-size: 17px; font-weight: 300; line-height: 1.45; } .fidar-process__extra { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 34px; } .fidar-process__extra-item { position: relative; padding: 24px 18px; border: 1px dashed var(--fidar-yellow); border-radius: 24px; text-align: center; } .fidar-process__extra-step { color: var(--fidar-yellow); font-size: 26px; font-weight: 800; margin-bottom: 8px; } /* ============================================================ * Fidar 2.0.5 — Clients * Two independent, continuously looping rows. Row one moves from * left to right; row two moves from right to left. Each row shows * 11 cards on desktop and uses an opposite directional 100% -> 5% * fade while the cards keep a white artwork background. * ============================================================ */ .fidar-clients { --fidar-client-gap: 22px; --fidar-client-row-gap: 16px; --fidar-client-columns: 11; --fidar-client-card-width: 120px; background: #182734; } .fidar-clients__inner { width: 100%; max-width: 2048px; margin-inline: auto; padding: 50px 70px; } .fidar-clients__heading { text-align: center; margin-inline: auto; margin-bottom: 44px; } .fidar-clients__viewport { overflow: hidden; width: 100%; max-width: 100%; margin-inline: auto; touch-action: pan-y; } .fidar-clients--carousel .fidar-clients__viewport { display: flex; flex-direction: column; gap: var(--fidar-client-row-gap); } .fidar-clients__row { position: relative; width: 100%; overflow: hidden; direction: ltr; -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-repeat: no-repeat; mask-size: 100% 100%; mask-mode: alpha; } .fidar-clients__row--ltr { -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,.05) 100%); mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,.05) 100%); } .fidar-clients__row--rtl { -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,.05) 100%); mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,.05) 100%); } .fidar-clients__row-track { display: flex; width: max-content; will-change: transform; animation-duration: var(--fidar-client-duration, 44000ms); animation-timing-function: linear; animation-iteration-count: infinite; } .fidar-clients__row--ltr .fidar-clients__row-track { animation-name: fidar-clients-marquee-ltr; } .fidar-clients__row--rtl .fidar-clients__row-track { animation-name: fidar-clients-marquee-rtl; } .fidar-clients.is-paused .fidar-clients__row-track { animation-play-state: paused; } .fidar-clients__row:hover .fidar-clients__row-track, .fidar-clients__row:focus-within .fidar-clients__row-track { animation-play-state: paused; } .fidar-clients__sequence { display: flex; flex: 0 0 auto; gap: var(--fidar-client-gap); padding-inline-end: var(--fidar-client-gap); } .fidar-clients--carousel .fidar-clients__item { flex: 0 0 var(--fidar-client-card-width); width: var(--fidar-client-card-width); aspect-ratio: 1 / 1; } .fidar-clients .fidar-clients__item { min-width: 0; min-height: 0; display: block; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: inherit; text-decoration: none; } .fidar-clients__visual { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 100%; min-height: 0; padding: 14px; background: #fff; border: 1px solid rgba(255,255,255,.92); border-radius: 25px; overflow: hidden; } .fidar-clients__logo { display: block; max-width: 78%; width: 78px; height: 42px; object-fit: contain; opacity: .92; } .fidar-clients__company { display: block; font-size: 11px; color: #182734; text-align: center; } .fidar-clients--grid .fidar-clients__track { display: grid; } .fidar-clients--grid .fidar-clients__item { aspect-ratio: 1 / 1; } @keyframes fidar-clients-marquee-ltr { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } } @keyframes fidar-clients-marquee-rtl { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .fidar-clients__row-track { animation-play-state: paused; } } /* ============================================================ * Fidar 2.0.2 — Blog * Real WordPress query + the original card styling, with a 16:9 image. * ============================================================ */ .fidar-blog__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px; } .fidar-blog__card { min-width: 0; border: 1px solid var(--fidar-border); border-radius: 24px; background: var(--fidar-navy-2); overflow: hidden; padding: 10px 10px 18px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .fidar-blog__card:hover { transform: translateY(-4px); } .fidar-blog__image-link { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgba(255,255,255,.22); border-radius: 18px; background: rgba(255,255,255,.025); text-decoration: none; } .fidar-blog__image { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border: 0; border-radius: inherit; background: rgba(255,255,255,.025); transition: transform .35s ease, filter .35s ease; } .fidar-blog__card:hover .fidar-blog__image { transform: scale(1.035); } .fidar-blog__image--placeholder { min-height: 0; } .fidar-blog__card-body { padding: 14px 6px 0; } .fidar-blog__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--fidar-yellow); font-size: 11px; } .fidar-blog__title { margin: 10px 0 0; font-size: 16px; line-height: 1.5; } .fidar-blog__title a { color: inherit; text-decoration: none; } .fidar-blog__excerpt { color: var(--fidar-muted); font-size: 13px; line-height: 1.8; margin-top: 8px; } .fidar-blog__excerpt p { margin: 0; } .fidar-blog__read-more { display: inline-block; margin-top: 10px; color: var(--fidar-yellow); text-decoration: none; font-size: 13px; } .fidar-blog__empty { padding: 30px; border: 1px dashed var(--fidar-border); border-radius: 22px; color: var(--fidar-muted); text-align: center; } .fidar-blog__button { width: min(100%, 520px); margin: 22px auto 0; padding: 12px 24px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--fidar-yellow); border-bottom-width: 7px; border-radius: 12px; color: #fff; background: transparent; text-decoration: none; } /* ============================================================ * Fidar 2.0.6 — Illustrator alignment pass * Widget roots stay transparent so the Elementor/page background owns * the canvas. Header, footer and portfolio proportions follow the * supplied 1440px Illustrator composition. * ============================================================ */ .fidar-section, .fidar-header, .fidar-footer, .fidar-clients { background: transparent; } /* Header: full-width outlined capsule from the Illustrator file. */ .fidar-header { width: 100%; padding: 20px 22px; color: #fff; } .fidar-header__inner { width: 100%; max-width: 1396px; min-height: 72px; margin-inline: auto; padding: 10px 24px; border: 1px solid rgba(174, 184, 192, .58); border-radius: 999px; background: transparent; display: flex; align-items: center; gap: 18px; } .fidar-header__logo img { /* 2.1.2: match the larger Illustrator wordmark and do not cap * Elementor's Logo > Width control with a hard max-width. */ width: 142px; max-width: none; max-height: 52px; height: auto; object-fit: contain; } .fidar-header__wordmark { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 118px; color: var(--fidar-yellow); font-weight: 900; font-size: 25px; line-height: .82; letter-spacing: .7px; } .fidar-header__wordmark small { margin-top: 7px; font-size: 8px; letter-spacing: 4px; line-height: 1; } .fidar-header__nav { flex: 1 1 auto; min-width: 0; margin-inline: 18px; } .fidar-header__menu { width: 100%; justify-content: space-evenly; gap: 24px; } .fidar-header__nav a { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 34px; color: #fff; font-size: 16px; font-weight: 750; line-height: 1.2; } .fidar-header__nav .current-menu-item > a, .fidar-header__nav .current_page_item > a { color: var(--fidar-yellow); } .fidar-header__nav .current-menu-item > a::after, .fidar-header__nav .current_page_item > a::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; transform: translateX(-50%); } .fidar-header__cta { flex: 0 0 auto; min-width: 182px; min-height: 46px; padding: 10px 24px; font-size: 16px; font-weight: 850; } /* Portfolio: left preview and right 2x3 stack + button share one baseline. */ .fidar-portfolio__layout { display: grid; grid-template-columns: minmax(0, 1.69fr) minmax(360px, 1fr); gap: 32px; align-items: stretch; direction: ltr; } .fidar-portfolio__preview, .fidar-portfolio__side, .fidar-portfolio__grid { min-height: 0; } .fidar-portfolio__preview { height: 100%; min-height: 420px; aspect-ratio: 1.97 / 1; border-radius: 28px; } .fidar-portfolio__preview-image { width: 100%; height: 100%; min-height: 0; object-fit: cover; } .fidar-portfolio__side { direction: rtl; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 16px; height: 100%; } .fidar-portfolio__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 14px; align-content: stretch; height: 100%; } .fidar-portfolio__card { height: 100%; min-height: 0; padding: 14px; border-radius: 24px; justify-content: center; align-items: stretch; } .fidar-portfolio__image { width: 100%; height: clamp(52px, 6vw, 86px); min-height: 0; object-fit: cover; border-radius: 14px; margin-bottom: 8px; } .fidar-portfolio__category, .fidar-portfolio__title, .fidar-portfolio__description { text-align: center; } .fidar-portfolio__button { width: 100%; min-height: 58px; margin: 0; border-radius: 20px; border-bottom-width: 7px; } .fidar-portfolio__layout--no-preview { grid-template-columns: 1fr; } /* Footer: exact three-part visual hierarchy from the Illustrator source. */ .fidar-footer--ai .fidar-footer__inner { max-width: 1396px; padding: 44px 40px 46px; border-top: 0; } .fidar-footer__ai-grid { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(170px, .64fr) minmax(260px, 1fr); gap: 42px; align-items: stretch; direction: rtl; } .fidar-footer--ai .fidar-footer__column, .fidar-footer__form-column { min-width: 0; } .fidar-footer--ai .fidar-footer__heading { margin: 0 0 24px; color: var(--fidar-yellow); font-size: 25px; font-weight: 500; line-height: 1.3; text-align: center; } .fidar-footer__about-column { padding-inline-start: 42px; border-inline-start: 1px solid rgba(190, 199, 206, .76); } .fidar-footer--ai .fidar-footer__about-text { color: #c6cdd3; font-size: 14px; line-height: 1.6; text-align: center; } .fidar-footer--ai .fidar-footer__about-text p { margin: 0; } .fidar-footer--ai .fidar-footer__contacts { display: flex; flex-direction: column; align-items: center; gap: 12px; } .fidar-footer--ai .fidar-footer__contact-item { justify-content: center; color: #cbd2d8; font-size: 16px; line-height: 1.5; text-align: center; } .fidar-footer--ai .fidar-footer__contact-copy { display: block; color: inherit; } .fidar-footer__form-column { align-self: stretch; } .fidar-footer__form, .fidar-footer__embedded-form form, .fidar-footer__embedded-form .wpcf7-form, .fidar-footer__embedded-form .wpforms-form { display: flex; flex-direction: column; gap: 14px; height: 100%; margin: 0; } .fidar-footer__form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .fidar-footer--ai .fidar-footer__form input:not([type="hidden"]):not([type="submit"]), .fidar-footer--ai .fidar-footer__form textarea, .fidar-footer__embedded-form input:not([type="hidden"]):not([type="submit"]), .fidar-footer__embedded-form textarea, .fidar-footer__embedded-form select { width: 100%; min-width: 0; border: 1px solid rgba(214, 220, 225, .82); background: transparent; color: #fff; outline: 0; box-shadow: none; } .fidar-footer--ai .fidar-footer__form input:not([type="hidden"]):not([type="submit"]), .fidar-footer__embedded-form input:not([type="hidden"]):not([type="submit"]), .fidar-footer__embedded-form select { height: 52px; padding: 0 18px; border-radius: 999px; } .fidar-footer--ai .fidar-footer__form textarea, .fidar-footer__embedded-form textarea { flex: 1 1 auto; min-height: 180px; padding: 16px 18px; border-radius: 22px; resize: vertical; } .fidar-footer--ai .fidar-footer__form input::placeholder, .fidar-footer--ai .fidar-footer__form textarea::placeholder, .fidar-footer__embedded-form input::placeholder, .fidar-footer__embedded-form textarea::placeholder { color: #8d989f; opacity: 1; } .fidar-footer--ai .fidar-footer__form button, .fidar-footer--ai .fidar-footer__form input[type="submit"], .fidar-footer__embedded-form button, .fidar-footer__embedded-form input[type="submit"], .fidar-footer__embedded-form .elementor-button { align-self: flex-start; min-height: 50px; padding: 10px 24px; border: 1px solid var(--fidar-yellow); border-radius: 999px; background: var(--fidar-yellow); color: var(--fidar-navy); font-size: 16px; font-weight: 850; cursor: pointer; } .fidar-footer__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .fidar-footer__form-status { font-size: 13px; line-height: 1.5; } .fidar-footer__form-status.is-success { color: var(--fidar-yellow); } .fidar-footer__form-status.is-error { color: #ffb4b4; } /* Illustrator footer button sits on the lower-left edge of the message box. */ .fidar-footer--ai .fidar-footer__form button, .fidar-footer--ai .fidar-footer__form input[type="submit"], .fidar-footer__embedded-form button, .fidar-footer__embedded-form input[type="submit"], .fidar-footer__embedded-form .elementor-button { align-self: flex-end; position: relative; z-index: 2; margin-top: -34px; margin-inline-end: 14px; } /* 2.0.8 — the large portfolio artwork is an independent banner, never a card preview. */ .fidar-portfolio__preview-link { display: block; width: 100%; height: 100%; } .fidar-portfolio__preview-link .fidar-portfolio__preview-image { display: block; width: 100%; height: 100%; } .fidar-portfolio__preview-placeholder { display: block; width: 100%; height: 100%; background: transparent; } /* ============================================================ * Fidar 2.0.9 — header CTA color fix + Illustrator footer rebuild * The footer geometry below is measured from the supplied 1440px * Illustrator artwork: 570px form / 255px contact / 368px about. * ============================================================ */ /* Header CTA: Elementor color controls now always win. */ .fidar-header__cta { min-width: 178px; min-height: 48px; background-color: var(--fidar-header-cta-bg, #ffea17); border-color: var(--fidar-header-cta-border, var(--fidar-header-cta-bg, #ffea17)); color: var(--fidar-header-cta-text, #182b3b); } .fidar-header__cta *, .fidar-header__cta-text { color: inherit; } .fidar-header__cta:hover, .fidar-header__cta:focus-visible { background-color: var(--fidar-header-cta-hover-bg, var(--fidar-header-cta-bg, #ffea17)); border-color: var(--fidar-header-cta-hover-border, var(--fidar-header-cta-border, var(--fidar-header-cta-bg, #ffea17))); color: var(--fidar-header-cta-hover-text, var(--fidar-header-cta-text, #182b3b)); } @media (min-width: 1101px) { .fidar-header { padding: 24px 23px; } .fidar-header__inner { min-height: 80px; } } /* Footer desktop composition — physical positions mirror the AI file. */ .fidar-footer--ai .fidar-footer__inner { width: calc(100% - 100px); max-width: 1340px; margin-inline: auto; padding: 56px 0 48px; border: 0; background: transparent; } .fidar-footer--ai .fidar-footer__ai-grid { display: grid; grid-template-columns: 570px 255px 368px; gap: 0; justify-content: space-between; align-items: start; direction: rtl; width: 100%; } .fidar-footer--ai .fidar-footer__form-column { width: 570px; max-width: 100%; align-self: start; direction: rtl; } .fidar-footer--ai .fidar-footer__contact-column, .fidar-footer--ai .fidar-footer__about-column { margin-top: 36px; align-self: start; direction: rtl; } .fidar-footer--ai .fidar-footer__about-column { position: relative; padding: 0 48px 0 0; border: 0; } .fidar-footer--ai .fidar-footer__about-column::before { content: ""; position: absolute; top: 8px; bottom: 0; right: 0; width: 1px; background: rgba(224, 230, 235, .88); } .fidar-footer--ai .fidar-footer__heading { margin: 0 0 27px; color: #ffea17; font-size: 28px; font-weight: 500; line-height: 1.2; text-align: center; } .fidar-footer--ai .fidar-footer__about-text { max-width: 305px; margin: 0 auto; color: #c7cdd2; font-size: 13.5px; font-weight: 400; line-height: 1.58; text-align: center; } .fidar-footer--ai .fidar-footer__about-text p { margin: 0; } .fidar-footer--ai .fidar-footer__contacts { display: flex; flex-direction: column; align-items: center; gap: 9px; margin: 0; } .fidar-footer--ai .fidar-footer__contact-item { min-height: 31px; justify-content: center; color: #d2d8dd; font-size: 18px; font-weight: 400; line-height: 1.55; text-align: center; text-decoration: none; } .fidar-footer--ai .fidar-footer__contact-copy, .fidar-footer--ai .fidar-footer__contact-copy * { color: inherit; font: inherit; } /* Built-in form — exact pill / message-box proportions from the artwork. */ .fidar-footer--ai .fidar-footer__form { position: relative; display: grid; grid-template-rows: 60px 258px; gap: 9px; width: 100%; height: auto; margin: 0; overflow: visible; } .fidar-footer--ai .fidar-footer__form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; height: 60px; direction: rtl; } .fidar-footer--ai .fidar-footer__form input:not([type="hidden"]):not([type="submit"]), .fidar-footer--ai .fidar-footer__form textarea { width: 100%; margin: 0; border: 1px solid rgba(231, 235, 238, .9); background: transparent; color: #fff; box-shadow: none; outline: 0; font-size: 14px; font-weight: 400; line-height: 1.5; text-align: right; direction: rtl; } .fidar-footer--ai .fidar-footer__form input:not([type="hidden"]):not([type="submit"]) { height: 60px; padding: 0 22px; border-radius: 999px; } .fidar-footer--ai .fidar-footer__form textarea { height: 258px; min-height: 258px; max-height: 258px; padding: 14px 22px; border-radius: 22px; resize: none; } .fidar-footer--ai .fidar-footer__form input::placeholder, .fidar-footer--ai .fidar-footer__form textarea::placeholder { color: #8f999f; opacity: 1; } .fidar-footer--ai .fidar-footer__form button[type="submit"] { position: absolute; left: 0; right: auto; bottom: -12px; z-index: 3; min-width: 264px; height: 60px; min-height: 60px; margin: 0; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #ffea17; border-radius: 999px; background: #ffea17; color: #182b3b; font-size: 18px; font-weight: 850; line-height: 1; white-space: nowrap; cursor: pointer; } .fidar-footer--ai .fidar-footer__form-status { position: absolute; top: calc(100% + 22px); right: 0; font-size: 12px; } /* Shortcode forms receive the same shell without making assumptions about markup. */ .fidar-footer--ai .fidar-footer__embedded-form, .fidar-footer--ai .fidar-footer__embedded-form form, .fidar-footer--ai .fidar-footer__embedded-form .wpcf7-form, .fidar-footer--ai .fidar-footer__embedded-form .wpforms-form { width: 100%; max-width: 570px; margin: 0; } .fidar-footer--ai .fidar-footer__embedded-form input:not([type="hidden"]):not([type="submit"]), .fidar-footer--ai .fidar-footer__embedded-form select { height: 60px; border-radius: 999px; } .fidar-footer--ai .fidar-footer__embedded-form textarea { min-height: 258px; border-radius: 22px; } /* 2.0.9 pixel-position refinements from the footer artwork. */ .fidar-footer--ai .fidar-footer__contact-column { transform: translateX(-27px); } .fidar-footer--ai .fidar-footer__contact-column .fidar-footer__heading { margin-bottom: 31px; } .fidar-footer--ai .fidar-footer__about-column { min-height: 257px; } .fidar-footer--ai .fidar-footer__about-column .fidar-footer__heading { text-align: right; } .fidar-footer--ai .fidar-footer__about-text { max-width: 290px; } .fidar-footer--ai .fidar-footer__contacts { gap: 11px; } .fidar-footer--ai .fidar-footer__form button[type="submit"] { width: 264px; max-width: 264px; min-width: 264px; padding-inline: 12px; } @media (min-width: 1101px) { .fidar-footer--ai .fidar-footer__about-column .fidar-footer__heading { margin-bottom: 19px; } .fidar-footer--ai .fidar-footer__about-text { transform: translateX(23px); } } /* ============================================================ * Fidar 2.1.0 — footer rebuilt from website Ai(1).ai * The widget stays transparent; only the artwork separator line is drawn. * ============================================================ */ .fidar-footer--ai { background: transparent; } .fidar-footer--ai .fidar-footer__inner { position: relative; width: calc(100% - 160px); max-width: 1280px; margin-inline: auto; padding: 86px 0 74px; border: 0; border-top: 1px solid rgba(171, 184, 194, .32); background: transparent; } .fidar-footer--ai .fidar-footer__ai-grid { display: grid; grid-template-columns: 570px 220px 350px; gap: 0; justify-content: space-between; align-items: start; direction: rtl; width: 100%; min-height: 405px; } .fidar-footer--ai .fidar-footer__form-column { width: 570px; max-width: 100%; margin: 0; align-self: start; } .fidar-footer--ai .fidar-footer__contact-column, .fidar-footer--ai .fidar-footer__about-column { margin-top: 52px; transform: none; } .fidar-footer--ai .fidar-footer__contact-column { width: 220px; } .fidar-footer--ai .fidar-footer__about-column { position: relative; width: 350px; min-height: 286px; padding: 0 44px 0 8px; } .fidar-footer--ai .fidar-footer__about-column::before { content: ""; position: absolute; top: 8px; right: 0; bottom: 4px; width: 1px; height: auto; background: rgba(188, 199, 207, .72); } .fidar-footer--ai .fidar-footer__heading { margin: 0 0 28px; color: #ffea17; font-size: 27px; font-weight: 500; line-height: 1.25; text-align: center; } .fidar-footer--ai .fidar-footer__about-column .fidar-footer__heading { margin-bottom: 22px; text-align: center; } .fidar-footer--ai .fidar-footer__about-text { max-width: 285px; margin: 0 auto; transform: none; color: #c7cdd2; font-size: 14px; font-weight: 400; line-height: 1.7; text-align: center; } .fidar-footer--ai .fidar-footer__contacts { display: flex; flex-direction: column; align-items: center; gap: 9px; margin: 0; } .fidar-footer--ai .fidar-footer__contact-item { min-height: 30px; padding: 0; justify-content: center; color: #d2d8dd; font-size: 17px; font-weight: 400; line-height: 1.55; text-align: center; } .fidar-footer--ai .fidar-footer__form { position: relative; display: grid; grid-template-rows: 58px 250px; gap: 10px; width: 570px; max-width: 100%; margin: 0; overflow: visible; } .fidar-footer--ai .fidar-footer__form-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; height: 58px; } .fidar-footer--ai .fidar-footer__form input:not([type="hidden"]):not([type="submit"]) { height: 58px; padding: 0 22px; border-radius: 999px; } .fidar-footer--ai .fidar-footer__form textarea { height: 250px; min-height: 250px; max-height: 250px; padding: 15px 22px; border-radius: 22px; } .fidar-footer--ai .fidar-footer__form input:not([type="hidden"]):not([type="submit"]), .fidar-footer--ai .fidar-footer__form textarea { border: 1px solid rgba(225, 232, 237, .9); background: transparent; box-shadow: none; outline: none; text-align: right; direction: rtl; } .fidar-footer--ai .fidar-footer__form input::placeholder, .fidar-footer--ai .fidar-footer__form textarea::placeholder { opacity: 1; } .fidar-footer--ai .fidar-footer__form button[type="submit"] { left: 0; right: auto; bottom: -13px; width: 250px; min-width: 250px; max-width: 250px; height: 58px; min-height: 58px; padding: 0 16px; border-radius: 999px; white-space: nowrap; } .fidar-footer--ai .fidar-footer__form-status { top: calc(100% + 28px); right: 0; } @media (max-width: 1100px) { .fidar-footer--ai .fidar-footer__inner { width: calc(100% - 48px); max-width: none; padding: 62px 0 56px; } .fidar-footer--ai .fidar-footer__ai-grid { grid-template-columns: minmax(0, 1.55fr) minmax(170px, .62fr) minmax(240px, .9fr); gap: 28px; min-height: 0; } .fidar-footer--ai .fidar-footer__form-column, .fidar-footer--ai .fidar-footer__form { width: 100%; } .fidar-footer--ai .fidar-footer__about-column, .fidar-footer--ai .fidar-footer__contact-column { width: 100%; } } @media (max-width: 900px) { .fidar-footer--ai .fidar-footer__ai-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(210px, .8fr); grid-template-areas: "form contact" "about about"; gap: 42px 28px; } .fidar-footer--ai .fidar-footer__form-column { grid-area: form; } .fidar-footer--ai .fidar-footer__contact-column { grid-area: contact; margin-top: 42px; } .fidar-footer--ai .fidar-footer__about-column { grid-area: about; max-width: none; margin-top: 0; padding: 34px 0 0; } .fidar-footer--ai .fidar-footer__about-column::before { top: 0; right: 0; left: 0; bottom: auto; width: auto; height: 1px; } } @media (max-width: 767px) { .fidar-footer--ai .fidar-footer__inner { width: calc(100% - 32px); padding: 44px 0 42px; } .fidar-footer--ai .fidar-footer__ai-grid { display: flex; flex-direction: column; gap: 42px; } .fidar-footer--ai .fidar-footer__form-column, .fidar-footer--ai .fidar-footer__contact-column, .fidar-footer--ai .fidar-footer__about-column { width: 100%; margin-top: 0; } .fidar-footer--ai .fidar-footer__form { display: flex; flex-direction: column; gap: 10px; } .fidar-footer--ai .fidar-footer__form-row { grid-template-columns: 1fr; height: auto; } .fidar-footer--ai .fidar-footer__form input:not([type="hidden"]):not([type="submit"]) { height: 54px; } .fidar-footer--ai .fidar-footer__form textarea { height: 180px; min-height: 180px; max-height: none; } .fidar-footer--ai .fidar-footer__form button[type="submit"] { position: static; width: 100%; max-width: none; min-width: 0; height: 56px; min-height: 56px; } .fidar-footer--ai .fidar-footer__about-column { padding-top: 34px; } } /* ============================================================ * Fidar 2.1.1 — typography matched to website Ai 2.ai * Illustrator source uses Peyda with ExtraLight / Light / ExtraBold / Black. * These are structural fallbacks; Elementor Typography controls remain editable * and use the same values as their defaults. * ============================================================ */ .fidar-section, .fidar-header, .fidar-footer { font-family: "Peyda", sans-serif; font-weight: 200; letter-spacing: 0; } /* Shared section titles — Peyda Black 32 */ .fidar-section__heading, .fidar-services__heading, .fidar-why__heading, .fidar-advantages__heading, .fidar-process__heading, .fidar-clients__heading, .fidar-portfolio__heading, .fidar-blog__heading, .fidar-about__heading, .fidar-contact__heading { font-family: "Peyda", sans-serif; font-size: 32px; font-weight: 900; line-height: 1.2; letter-spacing: 0; } /* Header — menu: Black 20.82 / CTA: ExtraBold 20.82 */ .fidar-header__nav a { font-family: "Peyda", sans-serif; font-size: 20.82px; font-weight: 900; line-height: 1.2; letter-spacing: 0; } .fidar-header__cta { font-family: "Peyda", sans-serif; font-size: 20.82px; font-weight: 800; line-height: 1.2; letter-spacing: 0; } /* Services — ExtraLight 26.86 */ .fidar-services__title { font-family: "Peyda", sans-serif; font-size: 26.86px; font-weight: 200; line-height: 1.2; letter-spacing: 0; } .fidar-services__description { font-family: "Peyda", sans-serif; font-size: 26px; font-weight: 200; line-height: 1.2; letter-spacing: 0; } /* Why Fidar — large metric ExtraBold, first line ExtraBold, second line Black */ .fidar-why__number, .fidar-why__prefix, .fidar-why__suffix { font-family: "Peyda", sans-serif; font-size: 84.34px; font-weight: 800; line-height: 1; letter-spacing: 0; } .fidar-why__title { font-family: "Peyda", sans-serif; font-size: 26.45px; font-weight: 800; line-height: 1.2; letter-spacing: 0; } .fidar-why__description { font-family: "Peyda", sans-serif; font-size: 26.45px; font-weight: 900; line-height: 1.2; letter-spacing: 0; } /* Advantages — Light 46 / body ExtraLight 26 */ .fidar-advantages__title { font-family: "Peyda", sans-serif; font-size: 46px; font-weight: 300; line-height: 1.2; letter-spacing: 0; } .fidar-advantages__description { font-family: "Peyda", sans-serif; font-size: 26px; font-weight: 200; line-height: 1.2; letter-spacing: 0; } /* Collaboration process — step ExtraBold 42.54 / copy ExtraLight 26.98 */ .fidar-process__step, .fidar-process__extra-step { font-family: "Peyda", sans-serif; font-size: 42.54px; font-weight: 800; line-height: 1; letter-spacing: 0; } .fidar-process__title, .fidar-process__description { font-family: "Peyda", sans-serif; font-size: 26.98px; font-weight: 200; line-height: 1.2; letter-spacing: 0; } /* Client labels are auxiliary; logos remain artwork. */ .fidar-clients__company { font-family: "Peyda", sans-serif; font-size: 14px; font-weight: 200; line-height: 1.2; letter-spacing: 0; } /* Portfolio — labels ExtraLight 26.86 / CTA ExtraLight 30.16 */ .fidar-portfolio__category, .fidar-portfolio__title { font-family: "Peyda", sans-serif; font-size: 26.86px; font-weight: 200; line-height: 1.2; letter-spacing: 0; } .fidar-portfolio__description { font-family: "Peyda", sans-serif; font-size: 14px; font-weight: 200; line-height: 1.2; letter-spacing: 0; } .fidar-portfolio__button, .fidar-blog__button, .fidar-about__button { font-family: "Peyda", sans-serif; font-size: 30.16px; font-weight: 200; line-height: 1.2; letter-spacing: 0; } /* Blog auxiliary typography. */ .fidar-blog__title { font-family: "Peyda", sans-serif; font-size: 26px; font-weight: 200; line-height: 1.2; letter-spacing: 0; } .fidar-blog__meta, .fidar-blog__excerpt, .fidar-blog__read-more { font-family: "Peyda", sans-serif; font-size: 14px; font-weight: 200; line-height: 1.2; letter-spacing: 0; } /* About / Contact body copy. */ .fidar-about__text, .fidar-contact__description { font-family: "Peyda", sans-serif; font-size: 26px; font-weight: 200; line-height: 1.2; letter-spacing: 0; } .fidar-contact__label, .fidar-contact__value { font-family: "Peyda", sans-serif; font-size: 21.75px; font-weight: 200; line-height: 1.2; letter-spacing: 0; } .fidar-contact__form input:not([type="submit"]):not([type="button"]), .fidar-contact__form select { font-family: "Peyda", sans-serif; font-size: 19.47px; font-weight: 200; line-height: 1.2; letter-spacing: 0; } .fidar-contact__form textarea { font-family: "Peyda", sans-serif; font-size: 15.33px; font-weight: 200; line-height: 1.2; letter-spacing: 0; } .fidar-contact__form button[type="submit"], .fidar-contact__form input[type="submit"], .fidar-contact__form .elementor-button { font-family: "Peyda", sans-serif; font-size: 19.47px; font-weight: 800; line-height: 1.2; letter-spacing: 0; } /* Footer — exact type roles from the Illustrator artboard. */ .fidar-footer--ai .fidar-footer__heading { font-family: "Peyda", sans-serif; font-size: 36.14px; font-weight: 200; line-height: 1.2; letter-spacing: 0; } .fidar-footer--ai .fidar-footer__about-text { font-family: "Peyda", sans-serif; font-size: 14px; font-weight: 200; line-height: 1.2; letter-spacing: 0; } .fidar-footer--ai .fidar-footer__contact-copy, .fidar-footer--ai .fidar-footer__contact-copy *, .fidar-footer--ai .fidar-footer__contact-item { font-family: "Peyda", sans-serif; font-size: 21.75px; font-weight: 200; line-height: 1.2; letter-spacing: 0; } .fidar-footer--ai .fidar-footer__form input:not([type="hidden"]):not([type="submit"]), .fidar-footer--ai .fidar-footer__embedded-form input:not([type="hidden"]):not([type="submit"]), .fidar-footer--ai .fidar-footer__embedded-form select { font-family: "Peyda", sans-serif; font-size: 19.47px; font-weight: 200; line-height: 1.2; letter-spacing: 0; } .fidar-footer--ai .fidar-footer__form textarea, .fidar-footer--ai .fidar-footer__embedded-form textarea { font-family: "Peyda", sans-serif; font-size: 15.33px; font-weight: 200; line-height: 1.2; letter-spacing: 0; } .fidar-footer--ai .fidar-footer__form button[type="submit"], .fidar-footer--ai .fidar-footer__embedded-form button, .fidar-footer--ai .fidar-footer__embedded-form input[type="submit"], .fidar-footer--ai .fidar-footer__embedded-form .elementor-button { font-family: "Peyda", sans-serif; font-size: 19.47px; font-weight: 800; line-height: 1.2; letter-spacing: 0; } @media (max-width: 767px) { .fidar-section__heading, .fidar-services__heading, .fidar-why__heading, .fidar-advantages__heading, .fidar-process__heading, .fidar-clients__heading, .fidar-portfolio__heading, .fidar-blog__heading, .fidar-about__heading, .fidar-contact__heading { font-size: 28px; } .fidar-header__nav a { font-size: 18px; } .fidar-services__title, .fidar-process__title, .fidar-process__description { font-size: 21px; } .fidar-why__number, .fidar-why__prefix, .fidar-why__suffix { font-size: 54px; } .fidar-advantages__title { font-size: 36px; } .fidar-footer--ai .fidar-footer__heading { font-size: 30px; } } /* ============================================================ * Fidar 2.1.3 — exact Illustrator typography enforcement * Measurements are read from website Ai 2.ai (1440px artboard). * This block intentionally uses so old Elementor post CSS and * legacy widget rules cannot silently replace the supplied artwork type. * The exact mode can be disabled per Header/Footer widget. * ============================================================ */ /* Header: AI uses Peyda Black 20.6667px for navigation and * Peyda ExtraBold 20.6667px for the consultation CTA. */ .fidar-header.fidar-header--ai-type .fidar-header__nav a, .fidar-header.fidar-header--ai-type .fidar-header__nav a:visited, .fidar-header.fidar-header--ai-type .fidar-header__nav a:hover, .fidar-header.fidar-header--ai-type .fidar-header__nav a:focus-visible { font-family: "Peyda-Black", "Peyda Black", "Peyda", sans-serif; font-size: 20.6667px; font-style: normal; font-weight: 900; line-height: 1.2; letter-spacing: 0; text-transform: none; font-synthesis: none; } .fidar-header.fidar-header--ai-type .fidar-header__cta, .fidar-header.fidar-header--ai-type .fidar-header__cta *, .fidar-header.fidar-header--ai-type .fidar-header__cta-text { font-family: "Peyda-ExtraBold", "Peyda ExtraBold", "Peyda", sans-serif; font-size: 20.6667px; font-style: normal; font-weight: 800; line-height: 1.2; letter-spacing: 0; text-transform: none; font-synthesis: none; } /* Footer headings: Peyda ExtraLight 36px. */ .fidar-footer--ai.fidar-footer--ai-type .fidar-footer__heading, .fidar-footer--ai.fidar-footer--ai-type .fidar-footer__contact-column .fidar-footer__heading, .fidar-footer--ai.fidar-footer--ai-type .fidar-footer__about-column .fidar-footer__heading { font-family: "Peyda-ExtraLight", "Peyda ExtraLight", "Peyda", sans-serif; font-size: 36px; font-style: normal; font-weight: 200; line-height: 1.2; letter-spacing: 0; text-transform: none; font-synthesis: none; } /* Footer about copy: Peyda ExtraLight 14px. */ .fidar-footer--ai.fidar-footer--ai-type .fidar-footer__about-text, .fidar-footer--ai.fidar-footer--ai-type .fidar-footer__about-text p, .fidar-footer--ai.fidar-footer--ai-type .fidar-footer__about-text span, .fidar-footer--ai.fidar-footer--ai-type .fidar-footer__about-text a { font-family: "Peyda-ExtraLight", "Peyda ExtraLight", "Peyda", sans-serif; font-size: 14px; font-style: normal; font-weight: 200; line-height: 1.2; letter-spacing: 0; text-transform: none; font-synthesis: none; } /* Footer contact values: Peyda ExtraLight 22px. */ .fidar-footer--ai.fidar-footer--ai-type .fidar-footer__contact-item, .fidar-footer--ai.fidar-footer--ai-type .fidar-footer__contact-copy, .fidar-footer--ai.fidar-footer--ai-type .fidar-footer__contact-copy *, .fidar-footer--ai.fidar-footer--ai-type .fidar-footer__contact-item span, .fidar-footer--ai.fidar-footer--ai-type .fidar-footer__contact-item a { font-family: "Peyda-ExtraLight", "Peyda ExtraLight", "Peyda", sans-serif; font-size: 22px; font-style: normal; font-weight: 200; line-height: 1.2; letter-spacing: 0; text-transform: none; font-synthesis: none; } /* Footer form — exact three type roles from the AI file. */ .fidar-footer--ai.fidar-footer--ai-type .fidar-footer__form input:not([type="hidden"]):not([type="submit"]), .fidar-footer--ai.fidar-footer--ai-type .fidar-footer__embedded-form input:not([type="hidden"]):not([type="submit"]), .fidar-footer--ai.fidar-footer--ai-type .fidar-footer__embedded-form select, .fidar-footer--ai.fidar-footer--ai-type .fidar-footer__form input::placeholder, .fidar-footer--ai.fidar-footer--ai-type .fidar-footer__embedded-form input::placeholder { font-family: "Peyda-ExtraLight", "Peyda ExtraLight", "Peyda", sans-serif; font-size: 19.3333px; font-style: normal; font-weight: 200; line-height: 1.2; letter-spacing: 0; text-transform: none; font-synthesis: none; } .fidar-footer--ai.fidar-footer--ai-type .fidar-footer__form textarea, .fidar-footer--ai.fidar-footer--ai-type .fidar-footer__embedded-form textarea, .fidar-footer--ai.fidar-footer--ai-type .fidar-footer__form textarea::placeholder, .fidar-footer--ai.fidar-footer--ai-type .fidar-footer__embedded-form textarea::placeholder { font-family: "Peyda-ExtraLight", "Peyda ExtraLight", "Peyda", sans-serif; font-size: 15.3333px; font-style: normal; font-weight: 200; line-height: 1.2; letter-spacing: 0; text-transform: none; font-synthesis: none; } .fidar-footer--ai.fidar-footer--ai-type .fidar-footer__form button[type="submit"], .fidar-footer--ai.fidar-footer--ai-type .fidar-footer__form button[type="submit"] *, .fidar-footer--ai.fidar-footer--ai-type .fidar-footer__embedded-form button, .fidar-footer--ai.fidar-footer--ai-type .fidar-footer__embedded-form button *, .fidar-footer--ai.fidar-footer--ai-type .fidar-footer__embedded-form input[type="submit"], .fidar-footer--ai.fidar-footer--ai-type .fidar-footer__embedded-form .elementor-button, .fidar-footer--ai.fidar-footer--ai-type .fidar-footer__embedded-form .elementor-button * { font-family: "Peyda-ExtraBold", "Peyda ExtraBold", "Peyda", sans-serif; font-size: 19.3333px; font-style: normal; font-weight: 800; line-height: 1.2; letter-spacing: 0; text-transform: none; font-synthesis: none; } /* ============================================================ * Fidar 2.1.4 — Illustrator exact-match pass * Source: website Ai(2).ai, 1440px artboard. * These two sections intentionally prioritize the supplied artwork geometry * over the older generic card/timeline defaults on full desktop canvases. * ============================================================ */ .fidar-advantages--ai-exact, .fidar-process--ai-exact { --fidar-ai-bg: #192734; --fidar-ai-card: #233e5a; --fidar-ai-yellow: #fff200; background: var(--fidar-ai-bg); } .fidar-advantages--ai-exact .fidar-advantages__inner, .fidar-process--ai-exact .fidar-process__inner { width: 100%; max-width: 1440px; padding-inline: 0; margin-inline: auto; } .fidar-advantages--ai-exact .fidar-advantages__heading, .fidar-process--ai-exact .fidar-process__heading { font-family: "Peyda-Black", "Peyda Black", "Peyda", sans-serif; font-size: 32px; font-style: normal; font-weight: 900; line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--fidar-ai-yellow); text-align: center; font-synthesis: none; } /* ---- Advantages / وجه تمایز ---- */ .fidar-advantages--ai-exact .fidar-advantages__heading { margin: 0 0 24px; } @media (min-width: 1440px) { .fidar-advantages--ai-exact .fidar-advantages__grid--ai-exact { position: relative; display: block; width: 1440px; height: 352.25px; margin: 0 auto; overflow: visible; } .fidar-advantages--ai-exact .fidar-advantages__grid--ai-exact .fidar-advantages__card { position: absolute; top: var(--fidar-adv-y, 0); left: var(--fidar-adv-x, 0); width: 266.722px; height: 350.295px; min-height: 350.295px; padding: 0; margin: 0; border: 1px solid #fff; border-radius: 40.009px; background: var(--fidar-ai-card); box-shadow: 0 9px 22px rgba(150, 190, 220, .13); overflow: hidden; transform: none; display: block; } .fidar-advantages--ai-exact .fidar-advantages__grid--ai-exact .fidar-advantages__card:hover { transform: none; } .fidar-advantages--ai-exact .fidar-advantages__grid--ai-exact .fidar-advantages__card::after { content: ""; position: absolute; left: 50%; right: auto; bottom: 91.78px; width: 211.76px; height: 0; border: 0; border-top: .25px solid var(--fidar-ai-yellow); transform: translateX(-50%); opacity: 1; } .fidar-advantages--ai-exact .fidar-advantages__title { position: absolute; left: 0; right: 0; bottom: 91.5px; z-index: 2; margin: 0; padding: 0 10px; font-family: "Peyda-Light", "Peyda Light", "Peyda", sans-serif; font-size: 46px; font-style: normal; font-weight: 300; line-height: 1.2; letter-spacing: 0; text-align: center; color: #fff; font-synthesis: none; } .fidar-advantages--ai-exact .fidar-advantages__description { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 2; margin: 0; padding: 0 8px; font-family: "Peyda-ExtraLight", "Peyda ExtraLight", "Peyda", sans-serif; font-size: 26px; font-style: normal; font-weight: 200; line-height: 1.2; letter-spacing: 0; text-align: center; color: #fff; font-synthesis: none; } .fidar-advantages--ai-exact .fidar-advantages__description p { margin: 0; } .fidar-advantages--ai-exact .fidar-advantages__icon, .fidar-advantages--ai-exact .fidar-advantages__image { display: none; } } /* ---- Collaboration process / فرایند همکاری ---- */ .fidar-process--ai-exact .fidar-process__heading { margin: 0 0 18.67px; } .fidar-process--ai-exact .fidar-process__chain { --fidar-process-track-height: 354px; --fidar-process-dash: 11.85; --fidar-process-gap: 11.85; width: 100%; max-width: 1440px; height: 354px; min-height: 354px; margin-inline: auto; overflow: visible; } .fidar-process--ai-exact .fidar-process__stroke { stroke: var(--fidar-ai-yellow); stroke-width: 1; stroke-linecap: butt; stroke-linejoin: miter; filter: drop-shadow(0 0 2.4px rgba(255, 242, 0, .10)); } .fidar-process--ai-exact .fidar-process__path { stroke-dasharray: 11.85 11.85; } .fidar-process--ai-exact .fidar-process__glow-wrap { --fidar-process-glow-size: 210px; width: 210px; height: 210px; } .fidar-process--ai-exact .fidar-process__item--upper .fidar-process__glow-wrap { top: 30.06%; } .fidar-process--ai-exact .fidar-process__item--lower .fidar-process__glow-wrap { top: 70.60%; } .fidar-process--ai-exact .fidar-process__glow { inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(119, 123, 47, .86) 0%, rgba(119, 123, 47, .86) 38%, rgba(119, 123, 47, .82) 48%, rgba(119, 123, 47, .65) 57%, rgba(119, 123, 47, .35) 67%, rgba(119, 123, 47, .10) 76%, rgba(119, 123, 47, 0) 86%); filter: none; opacity: 1; box-shadow: none; } .fidar-process--ai-exact .fidar-process__step { top: 26px; left: 40px; color: var(--fidar-ai-yellow); font-family: "Peyda-ExtraBold", "Peyda ExtraBold", "Peyda", sans-serif; font-size: 42.5424px; font-style: normal; font-weight: 800; line-height: 1; letter-spacing: 0; font-synthesis: none; } .fidar-process--ai-exact .fidar-process__item:nth-child(1) .fidar-process__step { left: 49px; top: 30px; } .fidar-process--ai-exact .fidar-process__item:nth-child(2) .fidar-process__step { left: 28px; top: 39px; } .fidar-process--ai-exact .fidar-process__item:nth-child(3) .fidar-process__step { left: 49px; top: 29px; } .fidar-process--ai-exact .fidar-process__item:nth-child(4) .fidar-process__step { left: 42px; top: 24px; } .fidar-process--ai-exact .fidar-process__item:nth-child(5) .fidar-process__step { left: 45px; top: 28px; } .fidar-process--ai-exact .fidar-process__item:nth-child(6) .fidar-process__step { left: 35px; top: 31px; } .fidar-process--ai-exact .fidar-process__copy { width: 230px; max-width: 230px; } .fidar-process--ai-exact .fidar-process__item--upper .fidar-process__copy { top: 50.85%; } .fidar-process--ai-exact .fidar-process__item--lower .fidar-process__copy { top: 28.25%; } .fidar-process--ai-exact .fidar-process__title, .fidar-process--ai-exact .fidar-process__description { font-family: "Peyda-ExtraLight", "Peyda ExtraLight", "Peyda", sans-serif; font-size: 26.98px; font-style: normal; font-weight: 200; line-height: 1.2; letter-spacing: 0; color: #fff; text-align: center; font-synthesis: none; } .fidar-process--ai-exact .fidar-process__title { margin: 0; } .fidar-process--ai-exact .fidar-process__description { margin: 0; } .fidar-process--ai-exact .fidar-process__icon, .fidar-process--ai-exact .fidar-process__image { display: none; } @media (max-width: 1439px) { .fidar-advantages--ai-exact .fidar-advantages__grid--ai-exact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-inline: 24px; } .fidar-advantages--ai-exact .fidar-advantages__grid--ai-exact .fidar-advantages__card { position: relative; inset: auto; width: auto; height: 300px; min-height: 300px; padding: 0; border-radius: 34px; border: 1px solid #fff; background: var(--fidar-ai-card); box-shadow: 0 8px 18px rgba(150, 190, 220, .12); } .fidar-advantages--ai-exact .fidar-advantages__title { font-size: 40px; } .fidar-advantages--ai-exact .fidar-advantages__description { font-size: 23px; } } @media (max-width: 767px) { .fidar-advantages--ai-exact .fidar-advantages__inner, .fidar-process--ai-exact .fidar-process__inner { padding-inline: 18px; } .fidar-advantages--ai-exact .fidar-advantages__grid--ai-exact { grid-template-columns: 1fr; padding-inline: 0; } .fidar-advantages--ai-exact .fidar-advantages__grid--ai-exact .fidar-advantages__card { height: 280px; } .fidar-advantages--ai-exact .fidar-advantages__title { font-size: 36px; } .fidar-advantages--ai-exact .fidar-advantages__description { font-size: 21px; } /* Preserve the existing readable mobile timeline instead of squeezing the 1440px artwork. */ .fidar-process--ai-exact .fidar-process__chain { height: auto; min-height: 0; } .fidar-process--ai-exact .fidar-process__glow-wrap { width: 105px; height: 105px; } .fidar-process--ai-exact .fidar-process__step { top: 12px; left: 20px; font-size: 28px; } .fidar-process--ai-exact .fidar-process__title, .fidar-process--ai-exact .fidar-process__description { font-size: 21px; text-align: start; } } /* ============================================================ * Fidar 2.1.6 — Illustrator artwork mode, viewport anchored * The artwork must align to the browser viewport, not to whatever * nested RTL/Flex container Elementor happens to place the widget in. * JS writes --fidar-ai-viewport-shift after measuring the real shell. * ============================================================ */ .fidar-advantages--artwork-exact, .fidar-process--artwork-exact { position: relative; width: 100%; max-width: none; margin: 0; padding: 0; background: #192734; overflow: visible; line-height: 0; } .fidar-ai-artwork-shell { position: relative; left: auto; right: auto; width: min(100vw, 1440px); max-width: none; margin: 0; padding: 0; transform: translate3d(var(--fidar-ai-viewport-shift, 0px), 0, 0); transform-origin: left top; line-height: 0; overflow: hidden; background: #192734; will-change: transform; } .fidar-ai-artwork-image { display: block; width: 100%; height: auto; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; object-fit: contain; object-position: center top; user-select: none; -webkit-user-drag: none; } .fidar-ai-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* The unshifted Elementor box can be far outside the viewport. Once the * artwork is visually re-anchored, suppress that stale horizontal overflow. */ html.fidar-ai-artwork-active, body.fidar-ai-artwork-active { overflow-x: hidden; overflow-x: clip; } /* ============================================================ * Fidar 2.1.6.2 — media overlays for the untouched AI artwork. * IMPORTANT: these rules do not replace/reflow either section. * They only place user-selected media over the existing PNG. * ============================================================ */ .fidar-advantages--artwork-exact .fidar-ai-artwork-shell, .fidar-process--artwork-exact .fidar-ai-artwork-shell { position: relative; } .fidar-ai-media-layer { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; padding: 0; pointer-events: none; line-height: normal; overflow: visible; } .fidar-ai-media { position: absolute; left: var(--fidar-media-x); top: var(--fidar-media-y); transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; overflow: visible; } .fidar-ai-media--advantage { width: 8.333333%; /* 120 / 1440 */ aspect-ratio: 1 / 1; } .fidar-ai-media--process-step { width: 6.111111%; /* 88 / 1440 */ aspect-ratio: 1 / 1; } .fidar-advantages--artwork-exact .fidar-ai-media__image, .fidar-process--artwork-exact .fidar-ai-media__image { display: block; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; object-fit: contain; object-position: center center; border: 0; box-shadow: none; } .fidar-advantages--artwork-exact .fidar-ai-media__icon, .fidar-process--artwork-exact .fidar-ai-media__icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; padding: 0; color: var(--fidar-ai-yellow, #FFF200); font-size: min(5.5vw, 79px); line-height: 1; } .fidar-advantages--artwork-exact .fidar-ai-media--advantage .fidar-ai-media__icon { font-size: min(6.5vw, 94px); } .fidar-ai-media__icon i, .fidar-ai-media__icon svg { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; fill: currentColor; } /* ============================================================ * Fidar 2.1.6.4 — Internal service page, supplied Illustrator artwork. * Each Elementor widget is an exact crop of the 1440px AI artboard. * Header/footer are intentionally NOT duplicated here. * ============================================================ */ .fidar-service-artwork { position: relative; width: 100%; max-width: none; margin: 0; padding: 0; background: #182734; overflow: visible; line-height: 0; } .fidar-service-artwork .fidar-service-artwork__shell { position: relative; line-height: 0; background: #182734; } .fidar-service-artwork__overlay { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; margin: 0; padding: 0; pointer-events: none; line-height: normal; } .fidar-service-media-slot { position: absolute; left: var(--slot-x); top: var(--slot-y); width: var(--slot-w); height: var(--slot-h); transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; box-sizing: border-box; margin: 0; padding: 0; background: var(--slot-bg, transparent); border: 0; border-radius: var(--slot-radius, 0); overflow: hidden; pointer-events: none; } .fidar-service-media-slot__image { display: block; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 7%; object-fit: contain; object-position: center center; border: 0; box-shadow: none; background: transparent; } .fidar-service-media-slot--mascot .fidar-service-media-slot__image, .fidar-service-media-slot--seo-illustration .fidar-service-media-slot__image { padding: 0; } .fidar-service-media-slot--project-featured .fidar-service-media-slot__image { padding: 4%; } .fidar-service-media-slot--project-small .fidar-service-media-slot__image { padding: 10%; } .fidar-service-artwork__link-zone { position: absolute; z-index: 20; display: block; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; text-decoration: none; pointer-events: auto; cursor: pointer; } /* Keep the exact AI crop behavior on desktop/tablet. On very small screens * the artwork scales as one piece so relative geometry never changes. */ @media (max-width: 767px) { .fidar-service-artwork .fidar-ai-artwork-shell { width: 100vw; } } /* ============================================================ * Fidar 2.1.6.8 — Illustrator-rebuilt editable service-page widgets. * Defaults mirror the supplied 1440px Illustrator layout, while every * visible block remains real HTML/media and is editable in Elementor. * ============================================================ */ .fidar-service-editable, .fidar-service-editable * { box-sizing: border-box; } .fidar-service-editable { /* Every internal-service widget uses the same 1440px Illustrator artboard. * Elementor containers may be narrower, so the widget is deliberately * centered out of its parent while keeping one identical outer width. */ width: 1440px; max-width: 1440px; margin-left: calc(50% - 720px); margin-right: calc(50% - 720px); background: #182734; color: #fff; font-family: Peyda, Tahoma, Arial, sans-serif; } .fidar-service-editable a { text-decoration: none; } .fidar-service__button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 72px; padding: 14px 30px; border: 1px solid #fff200; border-radius: 22px; background: #182734; color: #fff; box-shadow: 0 11px 0 #fff200; line-height: 1.1; transition: all .2s ease; } .fidar-service__button:hover { transform: translateY(-2px); } .fidar-service__button svg { fill: currentColor; } .fidar-service__placeholder { display:flex; align-items:center; justify-content:center; width:100%; height:100%; } /* Hero */ .fidar-service-hero-editable { min-height: 580px; padding: 58px 68px 74px; } .fidar-service-hero__inner { width: 100%; max-width: 1304px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); grid-template-areas: "media content"; gap: 78px; align-items: center; direction:ltr; } .fidar-service-hero__content { grid-area: content; direction:rtl; display:flex; flex-direction:column; align-items:flex-start; } .fidar-service-hero__heading { margin:0 0 24px; color:#fff200; font-size:64px; font-weight:800; line-height:1.05; } .fidar-service-hero__description { margin:0 0 26px; color:#f4f4f4; font-size:22px; font-weight:300; line-height:1.72; text-align:right; } .fidar-service-hero__description p { margin:0; } .fidar-service-hero__media { grid-area:media; width:100%; aspect-ratio: 590 / 448; border:1px solid #c7ced3; border-radius:58px; display:flex; align-items:center; justify-content:center; overflow:hidden; direction:rtl; } .fidar-service-hero__image { display:block; width:100%; height:100%; object-fit:contain; } .fidar-service-hero__placeholder { color:#fff; font-size:31px; } .fidar-service-hero__button { align-self:flex-start; } /* Benefits */ .fidar-service-benefits-editable { padding:4px 49px 24px; } .fidar-service-benefits__grid { max-width:1342px; margin:0 auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:35px; } .fidar-service-benefits__card { min-height:282px; padding:27px 32px 34px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; background:#1f364e; border:1px solid #65727a; border-radius:56px; color:#fff; } .fidar-service-benefits__media { width:150px; height:150px; flex:0 0 150px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#203954; border:1px solid #79838b; border-radius:14px; } .fidar-service-benefits__image { width:100%; height:100%; object-fit:contain; padding:12px; } .fidar-service-benefits__placeholder { color:#fff; font-size:28px; font-weight:300; } .fidar-service-benefits__title { margin:24px 0 0; color:#fff200; font-size:30px; font-weight:800; line-height:1.25; text-align:center; } /* Workflow — rebuilt from the supplied Illustrator coordinates (1440px artboard). */ .fidar-service-workflow-editable { position:relative; height:420px; min-height:420px; padding:0; overflow:hidden; } .fidar-service-workflow__inner { position:relative; width:100%; height:420px; max-width:none; margin:0; direction:ltr; } .fidar-service-workflow__intro { position:absolute; inset:0 3.225% 0 auto; width:34.2375%; height:420px; direction:rtl; } .fidar-service-workflow__heading { position:absolute; top:8px; right:0; margin:0; color:#f9ee20; font-family:"Peyda-Black","Peyda Black","Peyda",sans-serif; font-size:32px; font-weight:900; line-height:1.1; white-space:nowrap; } .fidar-service-workflow__subtitle { position:absolute; top:72px; right:3px; margin:0; color:#fff; font-family:"Peyda-ExtraBold","Peyda ExtraBold","Peyda",sans-serif; font-size:31.52px; font-weight:800; line-height:1.15; white-space:nowrap; } .fidar-service-workflow__description { position:absolute; top:118px; right:3px; width:calc(100% - 3px); margin:0; color:#fff; font-family:"Peyda-ExtraLight","Peyda ExtraLight","Peyda",sans-serif; font-size:26.85px; font-weight:200; line-height:1.2; text-align:right; } .fidar-service-workflow__description p { margin:0; } .fidar-service-workflow__button { position:absolute; top:307px; right:4px; width:290px; min-width:290px; height:72px; min-height:72px; padding:10px 28px; border-color:#f9ee20; border-radius:22px; box-shadow:0 11px 0 #f9ee20; font-family:"Peyda-ExtraBold","Peyda ExtraBold","Peyda",sans-serif; font-size:30px; font-weight:800; line-height:1.1; } .fidar-service-workflow__steps { position:absolute; inset:0; width:100%; height:420px; direction:ltr; } .fidar-service-workflow__step { position:absolute; top:0; width:150px; height:315px; min-width:0; text-align:center; } /* Exact centres read from the 1440px Illustrator artwork: 109, 334, 559, 793px. */ .fidar-service-workflow__step:nth-child(1) { left:34px; } .fidar-service-workflow__step:nth-child(2) { left:259px; } .fidar-service-workflow__step:nth-child(3) { left:484px; } .fidar-service-workflow__step:nth-child(4) { left:718px; } .fidar-service-workflow__step:nth-child(n+5) { position:relative; float:left; margin-left:18px; } /* Illustrator connectors are 96px long at y=187, with intentionally non-uniform anchors. */ .fidar-service-workflow__step:not(:last-child)::after { content:""; position:absolute; top:187px; width:96px; border-top:1px dashed rgba(249,238,32,.62); opacity:1; } .fidar-service-workflow__step:nth-child(1)::after { left:131px; } .fidar-service-workflow__step:nth-child(2)::after { left:134px; } .fidar-service-workflow__step:nth-child(3)::after { left:141px; } .fidar-service-workflow__glow { position:absolute; top:98px; left:50%; transform:translateX(-50%); width:170px; height:170px; border-radius:50%; overflow:visible; background-color:#182734; background-image:url('../images/service-workflow-glow-reference.png'); background-repeat:no-repeat; background-position:center; background-size:170px 170px; box-shadow:none; } .fidar-service-workflow__number { position:absolute; z-index:2; top:28px; left:30px; color:#f9ee30; font-family:"Peyda-ExtraBold","Peyda ExtraBold","Peyda",sans-serif; font-size:34.78px; font-weight:800; line-height:1; } .fidar-service-workflow__step-image { position:absolute; inset:34px; width:calc(100% - 68px); height:calc(100% - 68px); object-fit:contain; border-radius:50%; z-index:1; } .fidar-service-workflow__step-title { position:absolute; top:246px; left:50%; width:170px; margin:0; color:#fff; font-family:"Peyda-Medium","Peyda Medium","Peyda",sans-serif; font-size:21px; font-weight:500; line-height:1.2; text-align:center; } .fidar-service-workflow__step:nth-child(1) .fidar-service-workflow__step-title { transform:translateX(calc(-50% - 8px)); } .fidar-service-workflow__step:nth-child(2) .fidar-service-workflow__step-title { transform:translateX(calc(-50% - 24px)); } .fidar-service-workflow__step:nth-child(3) .fidar-service-workflow__step-title { transform:translateX(calc(-50% - 5px)); } .fidar-service-workflow__step:nth-child(4) .fidar-service-workflow__step-title { transform:translateX(calc(-50% + 2px)); } /* Projects */ .fidar-service-projects-editable { padding:30px 58px 42px; min-height:510px; } .fidar-service-projects__heading { max-width:1324px; margin:0 auto 26px; color:#fff200; font-size:31px; font-weight:800; text-align:right; } .fidar-service-projects__layout { max-width:1324px; margin:0 auto; display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.12fr); grid-template-areas:"small featured"; gap:38px; direction:ltr; align-items:start; } .fidar-service-projects__featured { grid-area:featured; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; direction:rtl; } .fidar-service-projects__featured-card { min-height:282px; padding:42px 28px 30px; background:#1d3348; border:1px solid #60707c; border-radius:32px; display:flex; flex-direction:column; align-items:center; color:#fff; } .fidar-service-projects__featured-logo-box { width:140px; height:105px; display:flex; align-items:center; justify-content:center; border:1px solid #65727a; overflow:hidden; } .fidar-service-projects__featured-logo { width:100%; height:100%; object-fit:contain; padding:10px; } .fidar-service-projects__featured-placeholder { color:#fff; font-size:25px; font-weight:300; } .fidar-service-projects__featured-name { margin:34px 0 0; color:#fff200; font-size:29px; font-weight:800; text-align:center; } .fidar-service-projects__small-side { grid-area:small; display:flex; flex-direction:column; align-items:flex-start; } .fidar-service-projects__small-grid { width:100%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px 12px; } .fidar-service-projects__small-card { min-height:129px; display:flex; align-items:center; justify-content:center; background:#1a2d3f; border:1px solid #52616d; border-radius:18px; overflow:hidden; color:#fff; } .fidar-service-projects__small-logo { width:100%; height:100%; max-height:128px; object-fit:contain; padding:13px; } .fidar-service-projects__small-placeholder { color:#fff; font-size:28px; font-weight:300; } .fidar-service-projects__button { margin-top:18px; } /* SEO explainer — rebuilt from Illustrator coordinates. */ .fidar-service-seo-editable { position:relative; height:475px; min-height:475px; padding:0; overflow:hidden; } .fidar-service-seo__inner { position:absolute; top:16px; left:4.0972%; right:3.2639%; height:456px; margin:0; padding:0; border:1px solid #65727a; border-radius:38px; background:#1c2f41; overflow:hidden; direction:ltr; } .fidar-service-seo__content { position:absolute; top:0; right:.825%; width:49.25%; height:100%; direction:rtl; } .fidar-service-seo__heading { position:absolute; top:20px; right:4px; margin:0; color:#f9ee20; font-size:32px; font-weight:900; line-height:1.1; white-space:nowrap; } .fidar-service-seo__subtitle { position:absolute; top:73px; right:3px; margin:0; color:#fff; font-size:31.52px; font-weight:800; line-height:1.15; white-space:nowrap; } .fidar-service-seo__description { position:absolute; top:128px; right:0; width:100%; margin:0; color:#fff; font-size:26.85px; font-weight:200; line-height:1.2; text-align:right; } .fidar-service-seo__description p { margin:0; } .fidar-service-seo__button { position:absolute; top:326px; right:3px; min-width:220px; min-height:72px; padding:10px 27px; border-color:#f9ee20; border-radius:22px; box-shadow:0 11px 0 #f9ee20; font-size:30px; font-weight:800; line-height:1.1; } .fidar-service-seo__media { position:absolute; left:2.324%; top:24px; width:42.35%; height:400px; min-height:0; display:flex; align-items:center; justify-content:center; overflow:visible; } .fidar-service-seo__image { display:block; width:100%; height:100%; max-height:none; object-fit:contain; } .fidar-service-seo__placeholder { color:#fff; font-size:28px; } /* More services — rebuilt from Illustrator coordinates. */ .fidar-service-more-editable { position:relative; height:370px; min-height:370px; padding:0; overflow:hidden; } .fidar-service-more__heading { position:absolute; top:43px; right:3.3333%; margin:0; color:#f9ee20; font-size:32px; font-weight:900; line-height:1.1; text-align:right; white-space:nowrap; } .fidar-service-more__list { position:absolute; top:124px; left:54px; right:44px; height:62px; margin:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:23px; direction:rtl; } .fidar-service-more__chip { height:62px; min-height:62px; padding:0 8px 0 14px; display:flex; flex-direction:row-reverse; align-items:center; justify-content:space-between; gap:8px; border:1px solid #65727a; border-radius:18px; background:#1c2f41; color:#fff; overflow:hidden; } .fidar-service-more__chip-title { color:#fff; font-size:27.49px; font-weight:400; line-height:1; white-space:nowrap; } .fidar-service-more__chip-image { display:block; width:60px; height:60px; object-fit:contain; flex:0 0 60px; } .fidar-service-more__chip-icon { display:flex; align-items:center; justify-content:center; width:52px; height:52px; color:#f9ee20; flex:0 0 52px; } .fidar-service-more__chip-icon svg { width:48px; height:48px; fill:currentColor; } .fidar-service-more__button { position:absolute; top:214px; left:55px; min-width:308px; min-height:72px; margin:0; padding:10px 28px; border-color:#f9ee20; border-radius:22px; box-shadow:0 11px 0 #f9ee20; font-size:29.69px; font-weight:800; line-height:1.1; } /* 2.1.6.8: identical outer artboard width for all six service-page widgets. */ @media (max-width: 1439px) { .fidar-service-editable { width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); } } @media (max-width: 1024px) { .fidar-service-hero-editable { padding:42px 34px 52px; } .fidar-service-hero__inner { gap:38px; } .fidar-service-hero__heading { font-size:48px; } .fidar-service-hero__description { font-size:18px; } .fidar-service-benefits-editable { padding-inline:28px; } .fidar-service-benefits__grid { gap:18px; } .fidar-service-benefits__card { min-height:250px; border-radius:42px; } .fidar-service-benefits__media { width:125px; height:125px; flex-basis:125px; } .fidar-service-workflow__inner { grid-template-columns:1fr; grid-template-areas:"intro" "steps"; } .fidar-service-workflow__steps { width:100%; } .fidar-service-projects__layout { grid-template-columns:1fr; grid-template-areas:"featured" "small"; } .fidar-service-projects__small-side { align-items:stretch; } .fidar-service-seo__inner { grid-template-columns:1fr 1fr; gap:32px; } .fidar-service-more__list { grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width: 767px) { .fidar-service-editable { margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); } .fidar-service-hero-editable { padding:32px 20px 44px; } .fidar-service-hero__inner { grid-template-columns:1fr; grid-template-areas:"content" "media"; } .fidar-service-hero__heading { font-size:42px; } .fidar-service-hero__description { font-size:17px; } .fidar-service-benefits__grid { grid-template-columns:1fr; } .fidar-service-benefits__card { min-height:0; } .fidar-service-workflow-editable { padding-inline:20px; } .fidar-service-workflow__steps { overflow-x:auto; justify-content:flex-start; padding-bottom:10px; } .fidar-service-workflow__step { flex:0 0 145px; } .fidar-service-projects-editable { padding-inline:20px; } .fidar-service-projects__featured { grid-template-columns:1fr; } .fidar-service-projects__small-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .fidar-service-seo-editable { padding:12px 20px; } .fidar-service-seo__inner { grid-template-columns:1fr; grid-template-areas:"content" "media"; padding:28px 20px; } .fidar-service-more-editable { padding:40px 20px 54px; } .fidar-service-more__list { grid-template-columns:1fr; } .fidar-service__button { min-height:58px; padding:12px 22px; } } /* 2.1.6.8 responsive overrides for the three Illustrator-rebuilt service sections. */ @media (max-width: 1100px) { .fidar-service-workflow-editable { height:auto; min-height:0; padding:34px 28px 42px; overflow:visible; } .fidar-service-workflow__inner { height:auto; display:flex; flex-direction:column; gap:34px; direction:rtl; } .fidar-service-workflow__intro { position:relative; inset:auto; width:100%; height:auto; display:flex; flex-direction:column; align-items:flex-start; } .fidar-service-workflow__heading, .fidar-service-workflow__subtitle, .fidar-service-workflow__description, .fidar-service-workflow__button { position:relative; inset:auto; } .fidar-service-workflow__heading { margin:0 0 14px; } .fidar-service-workflow__subtitle { margin:0 0 10px; white-space:normal; } .fidar-service-workflow__description { margin:0 0 22px; } .fidar-service-workflow__steps { position:relative; inset:auto; width:100%; height:auto; display:flex; gap:30px; overflow-x:auto; padding:8px 0 14px; } .fidar-service-workflow__step, .fidar-service-workflow__step:nth-child(1), .fidar-service-workflow__step:nth-child(2), .fidar-service-workflow__step:nth-child(3), .fidar-service-workflow__step:nth-child(4), .fidar-service-workflow__step:nth-child(n+5) { position:relative; inset:auto; float:none; margin:0; flex:0 0 150px; } .fidar-service-workflow__step:not(:last-child)::after { display:none; } .fidar-service-seo-editable { height:auto; min-height:0; padding:16px 24px 32px; overflow:visible; } .fidar-service-seo__inner { position:relative; inset:auto; height:auto; min-height:0; padding:28px 24px 30px; display:flex; flex-direction:column; gap:28px; } .fidar-service-seo__content { position:relative; inset:auto; width:100%; height:auto; display:flex; flex-direction:column; align-items:flex-start; } .fidar-service-seo__heading, .fidar-service-seo__subtitle, .fidar-service-seo__description, .fidar-service-seo__button { position:relative; inset:auto; } .fidar-service-seo__heading { margin:0 0 14px; } .fidar-service-seo__subtitle { margin:0 0 10px; white-space:normal; } .fidar-service-seo__description { margin:0 0 22px; } .fidar-service-seo__media { position:relative; inset:auto; width:min(100%,565px); height:auto; aspect-ratio:565/400; margin:0 auto; order:2; } .fidar-service-more-editable { height:auto; min-height:0; padding:44px 24px 54px; overflow:visible; } .fidar-service-more__heading { position:relative; inset:auto; margin:0 0 28px; white-space:normal; } .fidar-service-more__list { position:relative; inset:auto; height:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } .fidar-service-more__button { position:relative; inset:auto; margin-top:28px; } } @media (max-width: 640px) { .fidar-service-workflow-editable { padding:28px 18px 36px; } .fidar-service-workflow__heading, .fidar-service-seo__heading, .fidar-service-more__heading { font-size:28px; } .fidar-service-workflow__subtitle, .fidar-service-seo__subtitle { font-size:25px; } .fidar-service-workflow__description, .fidar-service-seo__description { font-size:18px; line-height:1.6; } .fidar-service-seo-editable { padding:12px 16px 26px; } .fidar-service-seo__inner { padding:24px 18px 28px; border-radius:28px; } .fidar-service-more-editable { padding:34px 16px 44px; } .fidar-service-more__list { grid-template-columns:1fr; } .fidar-service-more__chip-title { font-size:22px; } .fidar-service-workflow__button, .fidar-service-seo__button, .fidar-service-more__button { min-width:0; width:auto; min-height:58px; font-size:23px; } } /* ============================================================ * Fidar 2.1.7 — live editable Advantages + Collaboration Process * The old Illustrator PNG mode is kept only as an optional reference. * No locks are used here so Elementor-generated CSS can win. * ============================================================ */ .fidar-advantages--editable, .fidar-process--editable { --fidar-editable-card: #233e5a; --fidar-editable-yellow: #fff200; background: transparent; } .fidar-advantages--editable .fidar-advantages__inner, .fidar-process--editable .fidar-process__inner { width: 100%; max-width: 1440px; margin-inline: auto; } .fidar-advantages--editable .fidar-advantages__heading, .fidar-process--editable .fidar-process__heading { text-align: center; color: var(--fidar-editable-yellow); } .fidar-advantages--editable .fidar-advantages__heading { margin: 0 0 24px; } .fidar-advantages--editable .fidar-advantages__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } .fidar-advantages--editable .fidar-advantages__card { min-height: 350px; padding: 28px 26px 24px; border: 1px solid rgba(255,255,255,.96); border-radius: 40px; background: var(--fidar-editable-card); box-shadow: 0 9px 22px rgba(150,190,220,.13); display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; } .fidar-advantages--editable .fidar-advantages__card::after { content: ""; position: absolute; left: 50%; right: auto; bottom: 96px; width: 80%; border: 0; border-top: 1px solid var(--fidar-editable-yellow); transform: translateX(-50%); opacity: .78; } .fidar-advantages--editable .fidar-advantages__icon, .fidar-advantages--editable .fidar-advantages__image { position: relative; z-index: 2; margin-bottom: auto; } .fidar-advantages--editable .fidar-advantages__icon { font-size: 72px; color: var(--fidar-editable-yellow); } .fidar-advantages--editable .fidar-advantages__image { width: 96px; height: 96px; object-fit: contain; } .fidar-advantages--editable .fidar-advantages__title, .fidar-advantages--editable .fidar-advantages__description { position: relative; z-index: 2; text-align: center; } .fidar-advantages--editable .fidar-advantages__title { margin: 0 0 20px; font-size: 46px; font-weight: 300; line-height: 1.2; color: #fff; } .fidar-advantages--editable .fidar-advantages__description { margin: 0; font-size: 26px; font-weight: 200; line-height: 1.2; color: #fff; } .fidar-advantages--editable .fidar-advantages__description p { margin: 0; } .fidar-process--editable .fidar-process__heading { margin: 0 0 18px; } .fidar-process--editable .fidar-process__chain { --fidar-process-track-height: 354px; --fidar-process-dash: 11.85; --fidar-process-gap: 11.85; height: var(--fidar-process-track-height); min-height: 300px; } .fidar-process--editable .fidar-process__stroke { stroke: var(--fidar-editable-yellow); stroke-width: 1; stroke-linecap: round; } .fidar-process--editable .fidar-process__path { stroke-dasharray: var(--fidar-process-dash) var(--fidar-process-gap); } .fidar-process--editable .fidar-process__glow-wrap { --fidar-process-glow-size: 210px; width: var(--fidar-process-glow-size); height: var(--fidar-process-glow-size); } .fidar-process--editable .fidar-process__item--upper .fidar-process__glow-wrap { top: 30.06%; } .fidar-process--editable .fidar-process__item--lower .fidar-process__glow-wrap { top: 70.60%; } .fidar-process--editable .fidar-process__glow { inset: 12%; background: #777b2f; filter: blur(13px); opacity: .92; } .fidar-process--editable .fidar-process__step { top: 26px; left: 40px; color: var(--fidar-editable-yellow); font-size: 42.54px; font-weight: 800; } .fidar-process--editable .fidar-process__copy { width: 230px; max-width: 230px; } .fidar-process--editable .fidar-process__item--upper .fidar-process__copy { top: 50.85%; } .fidar-process--editable .fidar-process__item--lower .fidar-process__copy { top: 28.25%; } .fidar-process--editable .fidar-process__title, .fidar-process--editable .fidar-process__description { font-size: 26.98px; font-weight: 200; line-height: 1.2; color: #fff; text-align: center; } .fidar-process--editable .fidar-process__icon { color: var(--fidar-editable-yellow); } @media (max-width: 1024px) { .fidar-advantages--editable .fidar-advantages__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .fidar-advantages--editable .fidar-advantages__card { min-height: 300px; } .fidar-advantages--editable .fidar-advantages__title { font-size: 40px; } .fidar-advantages--editable .fidar-advantages__description { font-size: 23px; } } @media (max-width: 767px) { .fidar-advantages--editable .fidar-advantages__grid { grid-template-columns: 1fr; } .fidar-advantages--editable .fidar-advantages__card { min-height: 280px; } .fidar-advantages--editable .fidar-advantages__title { font-size: 36px; } .fidar-advantages--editable .fidar-advantages__description { font-size: 21px; } } /* ======================================================================== About page — Illustrator-matched editable sections ======================================================================== */ .fidar-about-story, .fidar-about-timeline, .fidar-about-values, .fidar-about-team { box-sizing: border-box; width: 100%; background: transparent; font-family: Peyda, Tahoma, Arial, sans-serif; } .fidar-about-story *, .fidar-about-timeline *, .fidar-about-values *, .fidar-about-team * { box-sizing: border-box; } /* Story */ .fidar-about-story__inner { width: 100%; max-width: 1340px; margin: 0 auto; padding: 55px 32px 60px; } .fidar-about-story__heading { margin: 0 0 44px; text-align: center; color: #fcee32; font-size: 55px; font-weight: 900; line-height: 1.15; } .fidar-about-story__layout { display: grid; grid-template-columns: minmax(260px, 390px) minmax(0, 1fr); gap: 62px; align-items: center; direction: ltr; } .fidar-about-story__layout.is-text-only { grid-template-columns: minmax(0, 1fr); } .fidar-about-story__media { width: 390px; max-width: 100%; min-height: 320px; border: 1px dashed #69727a; border-radius: 42px; display: flex; align-items: center; justify-content: center; overflow: hidden; justify-self: start; background: transparent; } .fidar-about-story__media img { display: block; width: 100%; height: 100%; min-height: inherit; object-fit: cover; } .fidar-about-story__placeholder { color: #999; font-size: 30px; font-weight: 300; } .fidar-about-story__content { direction: rtl; min-width: 0; } .fidar-about-story__text { color: #f2f2f2; font-size: 30px; font-weight: 300; line-height: 1.2; text-align: right; } .fidar-about-story__text > :first-child { margin-top: 0; } .fidar-about-story__text > :last-child { margin-bottom: 0; } /* Timeline — rebuilt from the Illustrator artboard (1440px reference). */ .fidar-about-timeline { --fidar-about-count: 7; --fidar-about-node-size: 96px; --fidar-about-label-offset: 34px; --fidar-about-line-color: #fff200; --fidar-about-line-h: 1px; --fidar-about-dash: 12px; --fidar-about-glow-gradient-color: #6a6e33; --fidar-about-glow-blur: 28px; --fidar-about-glow-spread: 12px; } .fidar-about-timeline__inner { width: 100%; max-width: 1340px; margin: 0 auto; padding: 42px 0 62px; overflow: visible; } .fidar-about-timeline__heading { margin: 0 0 48px; padding-right: 47px; text-align: right; color: #fcee32; font-size: 55px; font-weight: 900; line-height: 1.15; } .fidar-about-timeline__scroller { width: 100%; overflow: visible; padding: 18px 0 12px; scrollbar-width: none; -ms-overflow-style: none; } .fidar-about-timeline__scroller::-webkit-scrollbar { display: none; width: 0; height: 0; } .fidar-about-timeline__items { position: relative; display: grid; grid-template-columns: repeat(var(--fidar-about-count), minmax(0, 1fr)); align-items: center; width: 1304px; max-width: none; height: 235px; margin: 0 0 0 3px; padding: 0; } .fidar-about-timeline__line { display: none; } .fidar-about-timeline__item { position: relative; z-index: 1; min-width: 0; height: 100%; } .fidar-about-timeline__item:not(:last-child)::after { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; width: 100%; height: var(--fidar-about-line-h); background: repeating-linear-gradient(90deg, var(--fidar-about-line-color) 0 var(--fidar-about-dash), transparent var(--fidar-about-dash) calc(var(--fidar-about-dash) + var(--fidar-about-dash))); transform: translateY(-50%); } .fidar-about-timeline__node { position: absolute; z-index: 2; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: var(--fidar-about-node-size); height: var(--fidar-about-node-size); border-radius: 50%; background: transparent; box-shadow: none; transform: translate(-50%, -50%); } /* Illustrator node glow: sampled from the source artwork. The visible field is ~170px at the 1440px reference, with a solid olive core and Gaussian-like fade. */ .fidar-about-timeline__node::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; width: calc(var(--fidar-about-node-size) + var(--fidar-about-glow-blur) + var(--fidar-about-glow-blur) + var(--fidar-about-glow-spread) + var(--fidar-about-glow-spread) - 6px); height: calc(var(--fidar-about-node-size) + var(--fidar-about-glow-blur) + var(--fidar-about-glow-blur) + var(--fidar-about-glow-spread) + var(--fidar-about-glow-spread) - 6px); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(circle, var(--fidar-about-node-color, #6a6e33) 0%, var(--fidar-about-node-color, #6a6e33) 35.3%, color-mix(in srgb, var(--fidar-about-glow-gradient-color, #6a6e33) 98.7%, transparent) 41.2%, color-mix(in srgb, var(--fidar-about-glow-gradient-color, #6a6e33) 94.7%, transparent) 47.1%, color-mix(in srgb, var(--fidar-about-glow-gradient-color, #6a6e33) 90.1%, transparent) 52.9%, color-mix(in srgb, var(--fidar-about-glow-gradient-color, #6a6e33) 80.3%, transparent) 58.8%, color-mix(in srgb, var(--fidar-about-glow-gradient-color, #6a6e33) 64.5%, transparent) 64.7%, color-mix(in srgb, var(--fidar-about-glow-gradient-color, #6a6e33) 46.7%, transparent) 70.6%, color-mix(in srgb, var(--fidar-about-glow-gradient-color, #6a6e33) 30.9%, transparent) 76.5%, color-mix(in srgb, var(--fidar-about-glow-gradient-color, #6a6e33) 16.5%, transparent) 82.4%, color-mix(in srgb, var(--fidar-about-glow-gradient-color, #6a6e33) 5.9%, transparent) 88.2%, color-mix(in srgb, var(--fidar-about-glow-gradient-color, #6a6e33) 1.3%, transparent) 94.1%, transparent 100% ); } .fidar-about-timeline__year { position: relative; z-index: 2; color: #f2f2f2; font-size: 31px; font-weight: 400; line-height: 1; white-space: nowrap; } .fidar-about-timeline__label { position: absolute; left: 50%; width: max-content; max-width: 170px; color: #f2f2f2; font-size: 25px; font-weight: 400; line-height: 1.4; text-align: center; white-space: normal; transform: translateX(-50%); } .fidar-about-timeline__item.is-top .fidar-about-timeline__label { bottom: calc(50% + var(--fidar-about-node-size) / 2 + var(--fidar-about-label-offset)); } .fidar-about-timeline__item.is-bottom .fidar-about-timeline__label { top: calc(50% + var(--fidar-about-node-size) / 2 + var(--fidar-about-label-offset)); } /* Values */ .fidar-about-values__inner { width: 100%; max-width: 1360px; margin: 0 auto; padding: 48px 22px 62px; } .fidar-about-values__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 68px; align-items: stretch; } .fidar-about-values__card { position: relative; min-width: 0; min-height: 178px; padding: 64px 28px 30px; border: 1px solid #69727a; border-radius: 34px; background: #1c2f41; text-align: center; } .fidar-about-values__title { position: absolute; top: 0; right: 0; left: auto; width: 82%; max-width: calc(100% - 24px); padding: 13px 18px; border-radius: 30px; background: #fcee32; color: #000; font-size: 30px; font-weight: 700; line-height: 1.3; transform: translateY(-50%); white-space: normal; } .fidar-about-values__icon { margin: 0 auto 12px; color: #fcee32; font-size: 28px; line-height: 1; } .fidar-about-values__icon svg { width: 1em; height: 1em; fill: currentColor; } .fidar-about-values__description { color: #f2f2f2; font-size: 30px; font-weight: 300; line-height: 1.2; } /* Team — fixed Illustrator-matched stage carousel. No scroll track, no hover recentering. */ .fidar-about-team { --fidar-team-card-w: 238px; --fidar-team-card-h: 330px; --fidar-team-active-scale: 1.191; --fidar-team-stage-center: 52.566%; --fidar-team-nav-size: 42px; --fidar-team-nav-offset: 34px; } .fidar-about-team__inner { width: 100%; max-width: 1360px; margin: 0 auto; padding: 48px 22px 88px; overflow: visible; } .fidar-about-team__heading { margin: 0; color: #fcee32; font-size: 55px; font-weight: 900; line-height: 1.15; text-align: center; } .fidar-about-team__carousel { position: relative; width: 100%; margin-top: 90px; } .fidar-about-team__scroller { position: relative; width: 100%; height: 452px; overflow: hidden; padding: 0; touch-action: pan-y; user-select: none; cursor: grab; direction: ltr; scrollbar-width: none; -ms-overflow-style: none; } .fidar-about-team__scroller.is-dragging { cursor: grabbing; } .fidar-about-team__scroller::-webkit-scrollbar { display: none; width: 0; height: 0; } .fidar-about-team__rail { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; } .fidar-about-team__card { --fidar-team-x: 0px; --fidar-team-scale: .65; --fidar-team-opacity: 1; --fidar-team-y: 0px; position: absolute; left: var(--fidar-team-stage-center); top: 32px; z-index: 1; display: flex; width: var(--fidar-team-card-w); height: var(--fidar-team-card-h); flex-direction: column; background: #192734; border: 1px solid #000; border-radius: 24px; box-shadow: 0 12px 24px rgba(0,0,0,.35); color: inherit; text-decoration: none; overflow: hidden; opacity: var(--fidar-team-opacity); transform: translate3d(calc(-50% + var(--fidar-team-x)), var(--fidar-team-y), 0) scale(var(--fidar-team-scale)); transform-origin: center center; transition: transform .46s cubic-bezier(.22,.61,.36,1), opacity .18s ease, box-shadow .24s ease; will-change: transform, opacity; } .fidar-about-team__card.is-active { box-shadow: 0 18px 36px rgba(0,0,0,.42); } .fidar-about-team__card.is-hidden-slot { pointer-events: none; } .fidar-about-team__card.is-wrap-jump { transition: none; opacity: 0; } .fidar-about-team.is-no-motion .fidar-about-team__card, .fidar-about-team:not(.is-ready) .fidar-about-team__card { transition: none; } /* Important: hover never changes transform/scale/position. */ .fidar-about-team__card:hover { box-shadow: 0 18px 36px rgba(0,0,0,.42); } .fidar-about-team__photo { flex: 1 1 auto; min-height: 0; margin: 34px 23px 14px; border: 1px dashed #69727a; border-radius: 23px; overflow: hidden; background: transparent; } .fidar-about-team__photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .fidar-about-team__meta { flex: 0 0 auto; padding: 0 18px 8px; text-align: center; direction: rtl; } .fidar-about-team__name { color: #fcee32; font-size: 21px; font-weight: 700; line-height: 1.25; white-space: nowrap; } .fidar-about-team__role { margin-top: 4px; color: #fff; font-size: 20px; font-weight: 700; line-height: 1.25; white-space: nowrap; } .fidar-about-team__nav { position: absolute; top: 53%; z-index: 80; display: inline-flex; align-items: center; justify-content: center; width: var(--fidar-team-nav-size); height: var(--fidar-team-nav-size); padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #fcee32; cursor: pointer; transform: translateY(-50%); transition: color .2s ease, opacity .2s ease, transform .2s ease; -webkit-tap-highlight-color: transparent; } .fidar-about-team__nav:hover { background: transparent; transform: translateY(-50%) scale(1.08); } .fidar-about-team__nav:active { opacity: .68; transform: translateY(-50%) scale(.96); } .fidar-about-team__nav:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } .fidar-about-team__nav svg { display: block; width: 26px; height: 26px; } .fidar-about-team__nav--prev { left: calc(-1 * var(--fidar-team-nav-offset)); } .fidar-about-team__nav--next { right: calc(-1 * var(--fidar-team-nav-offset)); } @media (max-width: 1024px) { .fidar-about-story__layout { grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: 36px; } .fidar-about-timeline__scroller { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; } .fidar-about-timeline__items { width: 1304px; min-width: 1304px; margin-left: 3px; } .fidar-about-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px 28px; } .fidar-about-team { --fidar-team-stage-center: 50%; } } @media (max-width: 767px) { .fidar-about-story__inner, .fidar-about-timeline__inner, .fidar-about-values__inner, .fidar-about-team__inner { padding-left: 20px; padding-right: 20px; } .fidar-about-story__heading, .fidar-about-timeline__heading, .fidar-about-team__heading { font-size: 36px; } .fidar-about-story__layout { grid-template-columns: 1fr; direction: rtl; } .fidar-about-story__media { justify-self: center; width: min(100%, 390px); } .fidar-about-story__text { font-size: 20px; line-height: 1.55; } .fidar-about-timeline__heading { padding-right: 0; } .fidar-about-timeline__items { width: 1304px; min-width: 1304px; } .fidar-about-values__grid { grid-template-columns: 1fr; gap: 54px; } .fidar-about-team { --fidar-team-card-w: min(68vw, 238px); --fidar-team-card-h: min(94vw, 330px); --fidar-team-active-scale: 1.08; --fidar-team-stage-center: 50%; --fidar-team-nav-size: 40px; } .fidar-about-team__carousel { margin-top: 28px; } .fidar-about-team__scroller { height: min(128vw, 430px); overflow: hidden; } .fidar-about-team__card { top: 24px; } .fidar-about-team__card[data-team-distance="-2"], .fidar-about-team__card[data-team-distance="2"], .fidar-about-team__card[data-team-distance="-3"], .fidar-about-team__card[data-team-distance="3"] { opacity: 0; pointer-events: none; } .fidar-about-team { --fidar-team-nav-offset: 8px; } .fidar-about-team__nav--prev { left: calc(-1 * var(--fidar-team-nav-offset)); } .fidar-about-team__nav--next { right: calc(-1 * var(--fidar-team-nav-offset)); } } @media (prefers-reduced-motion: reduce) { .fidar-about-team__card { transition: none; } } /* ============================================================ * Fidar 2.2.6 — About timeline: exact 1440px Illustrator geometry * Source: "دربازه ما اصلاح(5).ai" PDF-compatible artboard. * Seven node centers measured from the rendered 1440px source and are * supplied per item via --fidar-ai-x. Glow opacity was sampled radially * from the source instead of approximated with box-shadow. * ============================================================ */ @media (min-width: 1025px) { .fidar-about-timeline--ai-exact { --fidar-ai-node-y: 295.30px; --fidar-ai-line-y: 290.59px; --fidar-ai-top-label-y: 162.79px; --fidar-ai-bottom-label-y: 369.99px; --fidar-ai-glow-size: 140px; --fidar-ai-line-left: 9.9283%; --fidar-ai-line-right: 12.4310%; --fidar-about-node-color: #6a6e33; --fidar-about-glow-gradient-color: #6a6e33; --fidar-about-line-color: #fff200; background: transparent; overflow: visible; } .fidar-about-timeline--ai-exact .fidar-about-timeline__inner { position: relative; left: 50%; width: min(1440px, 100vw); max-width: none; height: 445px; margin: 0; padding: 0; transform: translateX(-50%); overflow: visible; } .fidar-about-timeline--ai-exact .fidar-about-timeline__heading { position: absolute; z-index: 5; top: 0; right: 6.7330%; left: auto; margin: 0; padding: 0; color: #fcee32; font-family: "Peyda-Black", "Peyda Black", "Peyda", sans-serif; font-size: 55px; font-style: normal; font-weight: 900; line-height: 1.15; letter-spacing: 0; text-align: right; white-space: nowrap; } .fidar-about-timeline--ai-exact .fidar-about-timeline__scroller { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; overflow: visible; } .fidar-about-timeline--ai-exact .fidar-about-timeline__items { position: absolute; inset: 0; display: block; width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0; } .fidar-about-timeline--ai-exact .fidar-about-timeline__line { display: block; position: absolute; z-index: 0; left: var(--fidar-ai-line-left); right: auto; width: 77.6407%; top: var(--fidar-ai-line-y); height: 1px; background: repeating-linear-gradient( 90deg, var(--fidar-about-line-color) 0 12px, transparent 12px 23px ); transform: rotate(0.4525deg); transform-origin: 0 50%; pointer-events: none; } .fidar-about-timeline--ai-exact .fidar-about-timeline__item { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; min-width: 0; pointer-events: none; } .fidar-about-timeline--ai-exact .fidar-about-timeline__item::after { display: none; content: none; } .fidar-about-timeline--ai-exact .fidar-about-timeline__node { position: absolute; z-index: 2; left: var(--fidar-ai-x); top: var(--fidar-ai-node-y); display: flex; align-items: center; justify-content: center; width: var(--fidar-ai-glow-size); height: var(--fidar-ai-glow-size); border: 0; border-radius: 50%; box-shadow: none; transform: translate(-50%, -50%); background: radial-gradient(circle at center, var(--fidar-about-node-color) 0%, var(--fidar-about-node-color) 35.7%, color-mix(in srgb, var(--fidar-about-glow-gradient-color) 92.8%, transparent) 42.9%, color-mix(in srgb, var(--fidar-about-glow-gradient-color) 83.6%, transparent) 50%, color-mix(in srgb, var(--fidar-about-glow-gradient-color) 69.1%, transparent) 57.1%, color-mix(in srgb, var(--fidar-about-glow-gradient-color) 50.7%, transparent) 64.3%, color-mix(in srgb, var(--fidar-about-glow-gradient-color) 32.2%, transparent) 71.4%, color-mix(in srgb, var(--fidar-about-glow-gradient-color) 17.1%, transparent) 78.6%, color-mix(in srgb, var(--fidar-about-glow-gradient-color) 6.6%, transparent) 85.7%, color-mix(in srgb, var(--fidar-about-glow-gradient-color) 1.3%, transparent) 92.9%, transparent 100% ); } .fidar-about-timeline--ai-exact .fidar-about-timeline__node::before { display: none; content: none; } .fidar-about-timeline--ai-exact .fidar-about-timeline__year { position: relative; z-index: 3; color: #f2f2f2; font-family: "Peyda", sans-serif; font-size: 31px; font-style: normal; font-weight: 400; line-height: 1.575; letter-spacing: 0; white-space: nowrap; } .fidar-about-timeline--ai-exact .fidar-about-timeline__label { position: absolute; z-index: 4; left: var(--fidar-ai-x); bottom: auto; width: 170px; max-width: 170px; margin: 0; padding: 0; color: #f2f2f2; font-family: "Peyda", sans-serif; font-size: 25px; font-style: normal; font-weight: 400; line-height: 1.575; letter-spacing: 0; text-align: center; white-space: normal; transform: translateX(-50%); } .fidar-about-timeline--ai-exact .fidar-about-timeline__item.is-top .fidar-about-timeline__label { top: var(--fidar-ai-top-label-y); bottom: auto; } .fidar-about-timeline--ai-exact .fidar-about-timeline__item.is-bottom .fidar-about-timeline__label { top: var(--fidar-ai-bottom-label-y); bottom: auto; } } /* Header current page: one visual state, regardless of whether the source is a WordPress menu or Elementor fallback items. */ .fidar-header__nav .is-current > a, .fidar-header__nav .current-menu-item > a, .fidar-header__nav .current_page_item > a, .fidar-header__nav a[aria-current="page"] { color: var(--fidar-yellow); } .fidar-header__nav .is-current > a::after, .fidar-header__nav .current-menu-item > a::after, .fidar-header__nav .current_page_item > a::after, .fidar-header__nav a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 6px; height: 6px; border-radius: 50%; background: var(--fidar-yellow); transform: translateX(-50%); } \n\n/* ============================================================ * Fidar 2.2.7 — Elementor editable-first cascade * Static plugin CSS is a visual default only. Elementor's per-widget * generated selectors intentionally have higher specificity and must win. * No visual property in the reference presets is locked with !important. * ============================================================ */ .elementor-element .fidar-about-story, .elementor-element .fidar-about-timeline, .elementor-element .fidar-about-values, .elementor-element .fidar-about-team, .elementor-element .fidar-header, .elementor-element .fidar-advantages, .elementor-element .fidar-process { --fidar-editable-controls: 1; } /* ======================================================================== Fidar 2.3.0 — About Timeline: source-faithful Illustrator reconstruction The glow alpha-mask and dashed-line mask are extracted directly from the PDF-compatible Illustrator file. Geometry is mapped from the 1440px artboard. ======================================================================== */ .fidar-timeline-source { --fidar-source-line: #fcee32; --fidar-source-glow: #fcee32; width: 100%; background: transparent; overflow: visible; font-family: Peyda, "Peyda Regular", Tahoma, Arial, sans-serif; } .fidar-timeline-source__canvas { position: relative; width: min(100%, 1440px); aspect-ratio: 1440 / 530; margin: 0 auto; padding: 0; container-type: inline-size; overflow: visible; } .fidar-timeline-source__heading { position: absolute; z-index: 5; top: 0.57217%; right: 6.733%; margin: 0; padding: 0; color: #fcee32; font-family: "Peyda Black", "Peyda-Black", Peyda, sans-serif; font-size: 3.8426cqw; font-weight: 900; line-height: 1.15; letter-spacing: 0; text-align: right; white-space: nowrap; } .fidar-timeline-source__line { position: absolute; z-index: 1; left: 0; top: 54.71698%; width: 100%; height: 3.39623%; background: var(--fidar-source-line); -webkit-mask-image: var(--fidar-source-line-mask); mask-image: var(--fidar-source-line-mask); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; pointer-events: none; } .fidar-timeline-source__glow { position: absolute; z-index: 2; width: 11.458333%; aspect-ratio: 165 / 166; background: var(--fidar-source-glow); -webkit-mask-image: var(--fidar-source-glow-mask); mask-image: var(--fidar-source-glow-mask); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; pointer-events: none; } .fidar-timeline-source__year { position: absolute; z-index: 4; width: 4.232361%; transform: translateX(-50%); margin: 0; padding: 0; color: #fff; font-family: "Peyda Regular", "Peyda-Regular", Peyda, sans-serif; font-size: 2.1759cqw; font-weight: 400; line-height: 1.558; letter-spacing: 0; text-align: center; white-space: nowrap; direction: rtl; } .fidar-timeline-source__label { position: absolute; z-index: 4; width: 9.30035%; transform: translateX(-50%); margin: 0; padding: 0; color: #fff; font-family: "Peyda Regular", "Peyda-Regular", Peyda, sans-serif; font-size: 1.75926cqw; font-weight: 400; line-height: 1.554; letter-spacing: 0; text-align: center; white-space: nowrap; direction: ltr; } @media (max-width: 767px) { .fidar-timeline-source { overflow-x: auto; overflow-y: visible; scrollbar-width: none; -ms-overflow-style: none; } .fidar-timeline-source::-webkit-scrollbar { display: none; } .fidar-timeline-source__canvas { width: 920px; max-width: none; margin-inline: 0; } } /* Fidar 2.4.0 mobile process SVG */ .fidar-process__mobile-svg { display: none; } /* Fidar 2.4.0 — mobile-only home controls stay hidden on desktop. */ .fidar-services__mobile-button { display: none; } /* Fidar 2.5.22.83: desktop mega menu */ @media (min-width:768px) { .fidar-header {position:relative;z-index:100;overflow:visible;} .fidar-header .fidar-header__inner,.fidar-header .fidar-header__nav,.fidar-header .fidar-header__menu {overflow:visible;} .fidar-header .fidar-header__menu>li {position:relative;} .fidar-header .fidar-header__menu>li.menu-item-has-children {position:static;} .fidar-header .fidar-header__menu>li.menu-item-has-children>a::before {content:'⌄';font-size:17px;color:#ffea17;order:2;margin-inline-start:7px;transition:transform .2s ease;} .fidar-header .fidar-header__menu>li.menu-item-has-children:is(:hover,:focus-within)>a::before {transform:rotate(180deg);} .fidar-header .fidar-header__menu>li>.sub-menu {position:absolute;z-index:1000;top:calc(100% - 2px);left:50%;width:min(1060px,calc(100vw - 40px));max-width:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 14px;direction:rtl;list-style:none;margin:0;padding:28px;border:1px solid rgba(255,234,23,.24);border-top:3px solid #ffea17;border-radius:24px 0 24px 24px;background:linear-gradient(135deg,#213a4e 0%,#142532 100%);box-shadow:0 24px 65px rgba(1,10,19,.48);opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,12px);transition:opacity .18s,transform .2s,visibility .18s;} .fidar-header .fidar-header__menu>li:is(:hover,:focus-within,.fidar-submenu-open)>.sub-menu {opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);} .fidar-header .fidar-header__menu>li>.sub-menu li {display:block;min-width:0;margin:0;padding:0;} .fidar-header .fidar-header__menu>li>.sub-menu a {display:flex;justify-content:flex-start;align-items:center;min-height:58px;height:100%;padding:13px 16px;border:1px solid rgba(255,255,255,.09);border-radius:14px 0 14px 14px;background:rgba(255,255,255,.045);color:#fff;font-size:15px;font-weight:650;line-height:1.5;white-space:normal;text-align:right;transition:background .2s,color .2s,transform .2s,border-color .2s;} .fidar-header .fidar-header__menu>li>.sub-menu a::before {content:'↗';font:700 16px/1 Arial,sans-serif;color:#ffea17;margin-left:11px;opacity:.85;} .fidar-header .fidar-header__menu>li>.sub-menu a:hover,.fidar-header .fidar-header__menu>li>.sub-menu a:focus-visible {color:#ffea17;background:rgba(255,234,23,.10);border-color:rgba(255,234,23,.45);transform:translateY(-2px);} .fidar-header .fidar-header__menu>li>.sub-menu a::after {display:none!important;} } /* v158: keep workflow CTA below editable, multi-paragraph text on service pages. */ .elementor-widget-fidar-service-workflow .fidar-service-workflow__intro{ display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; height:auto; min-height:420px; padding-bottom:24px; } .elementor-widget-fidar-service-workflow .fidar-service-workflow__heading, .elementor-widget-fidar-service-workflow .fidar-service-workflow__subtitle, .elementor-widget-fidar-service-workflow .fidar-service-workflow__description, .elementor-widget-fidar-service-workflow .fidar-service-workflow__button{ position:relative; top:auto; right:auto; bottom:auto; left:auto; flex-shrink:0; } .elementor-widget-fidar-service-workflow .fidar-service-workflow__heading{margin:8px 0 22px;} .elementor-widget-fidar-service-workflow .fidar-service-workflow__subtitle{margin:0 0 12px;} .elementor-widget-fidar-service-workflow .fidar-service-workflow__description{ width:100%; max-width:100%; margin:0 0 24px; flex-shrink:1; overflow-wrap:anywhere; } .elementor-widget-fidar-service-workflow .fidar-service-workflow__button{ margin:0; width:max-content; max-width:100%; align-self:flex-start; } @media(min-width:1025px){ .elementor-widget-fidar-service-workflow .fidar-service-workflow-editable, .elementor-widget-fidar-service-workflow .fidar-service-workflow__inner{ height:auto; min-height:420px; overflow:visible; } } /* v159: content-driven workflow layout. No clipped CTA or overlap for long Elementor text. */ @media (min-width:1024px) { .elementor-widget-fidar-service-workflow .fidar-service-workflow-editable { height:auto !important; min-height:420px; overflow:visible !important; padding-bottom:18px; box-sizing:border-box; } .elementor-widget-fidar-service-workflow .fidar-service-workflow__inner { position:relative; height:auto !important; min-height:420px; overflow:visible !important; display:block; box-sizing:border-box; } .elementor-widget-fidar-service-workflow .fidar-service-workflow__intro { position:relative !important; inset:auto !important; margin:0 3.225% 0 auto; width:34.2375%; height:auto !important; min-height:420px; padding:0 0 34px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; overflow:visible !important; box-sizing:border-box; } .elementor-widget-fidar-service-workflow .fidar-service-workflow__heading, .elementor-widget-fidar-service-workflow .fidar-service-workflow__subtitle, .elementor-widget-fidar-service-workflow .fidar-service-workflow__description, .elementor-widget-fidar-service-workflow .fidar-service-workflow__button { position:relative !important; inset:auto !important; flex:none; max-width:100%; box-sizing:border-box; } .elementor-widget-fidar-service-workflow .fidar-service-workflow__heading { margin:8px 0 20px !important; white-space:normal; } .elementor-widget-fidar-service-workflow .fidar-service-workflow__subtitle { margin:0 0 14px !important; white-space:normal; } .elementor-widget-fidar-service-workflow .fidar-service-workflow__description { width:100%; margin:0 0 28px !important; overflow:visible; overflow-wrap:anywhere; flex-shrink:0; } .elementor-widget-fidar-service-workflow .fidar-service-workflow__button { display:inline-flex; align-items:center; justify-content:center; width:max-content; max-width:100%; min-height:72px; height:auto; padding:10px 28px; margin:0 0 11px !important; white-space:normal; text-align:center; align-self:flex-start; line-height:1.25; } .elementor-widget-fidar-service-workflow .fidar-service-workflow__steps { position:absolute; inset:0 auto auto 0; width:62%; height:420px; pointer-events:none; } } @media (max-width:1023px) { .elementor-widget-fidar-service-workflow .fidar-service-workflow-editable, .elementor-widget-fidar-service-workflow .fidar-service-workflow__inner, .elementor-widget-fidar-service-workflow .fidar-service-workflow__intro { height:auto !important; overflow:visible !important; } .elementor-widget-fidar-service-workflow .fidar-service-workflow__button { position:relative !important; inset:auto !important; flex-shrink:0; height:auto !important; min-height:0; max-width:100%; margin-bottom:8px !important; } } /* v2.5.22.171 — full-viewport left-edge turquoise fade for Service Hero. Scoped to the Hero widget; the overlay is translucent, preserving the site's existing background color and avoiding a sharp opaque cyan rectangle. */ .elementor-widget-fidar-service-hero .fidar-service-hero-editable { position: relative; isolation: isolate; background: transparent; } .elementor-widget-fidar-service-hero .fidar-service-hero-editable::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; pointer-events: none; z-index: 0; background: linear-gradient( to right, rgba(0, 139, 181, 0.85) 0%, rgba(0, 139, 181, 0.85) 12%, rgba(0, 139, 181, 0.72) 20%, rgba(0, 139, 181, 0.38) 32%, rgba(0, 139, 181, 0.10) 45%, rgba(0, 139, 181, 0) 60% ); } .elementor-widget-fidar-service-hero .fidar-service-hero__inner { position: relative; z-index: 1; }