/* Aramko custom overrides */

/* ==========================================================================
   Header top-bar contact list — phone · hours · address.
   Self-contained `aramko-topbar` component (own namespace, so none of the
   theme's `.it-header-top-list-box ul li` rules apply — no !important needed).
   Flexbox lays out icon + text with a gap; a short centred rule divides items;
   the full text shows on desktop and the compact text on mobile; the address
   truncates gracefully when the bar runs out of room.
   ========================================================================== */
.aramko-topbar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.aramko-topbar__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
  padding: 0 24px;
  white-space: nowrap;
  font-family: var(--it-ff-body);
  font-size: 14px;
  line-height: 1;
  color: var(--it-common-white, #ffffff);
}
/* Logical (not left/right) so the bar mirrors correctly in RTL/Arabic. */
.aramko-topbar__item:first-child { padding-inline-start: 0; }
.aramko-topbar__item:last-child { padding-inline-end: 0; }

/* short, vertically-centred divider on each item's trailing edge */
.aramko-topbar__item:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  width: 1px;
  height: 14px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.22);
}

.aramko-topbar__icon {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
  color: var(--it-theme-1, #e30613);
}

.aramko-topbar__link {
  min-width: 0;
  color: inherit;
  transition: color 0.3s;
}
.aramko-topbar__link:hover { color: var(--it-theme-1, #e30613); }

/* Show one label at a time — full by default, compact on mobile. */
.aramko-topbar__text--compact { display: none; }

/* The address is the flexible item: it shrinks and ellipsises first. */
.aramko-topbar__item--address { flex: 0 1 auto; }
.aramko-topbar__item--address .aramko-topbar__link {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Smaller desktops / tablets — tighten the spacing. */
@media (max-width: 1199px) {
  .aramko-topbar__item { padding: 0 15px; gap: 6px; font-size: 12px; }
  .aramko-topbar__icon { font-size: 14px; }
}

/* Mobile — compact labels, no dividers, let the row fit. */
@media (max-width: 767.98px) {
  .aramko-topbar__item {
    padding: 0;
    margin-inline-end: 12px;
    gap: 5px;
    font-size: 10px;
  }
  .aramko-topbar__item:last-child { margin-inline-end: 0; }
  .aramko-topbar__item:not(:last-child)::after { display: none; }
  .aramko-topbar__icon { font-size: 12px; }
  .aramko-topbar__text--full { display: none; }
  .aramko-topbar__text--compact { display: inline; }
  .aramko-topbar__item--address { flex: 1 1 auto; min-width: 0; }
}

/* Sitewide mobile — comfortable horizontal gutters for text */
@media (max-width: 767.98px) {
  .it-header-area .container,
  .it-breadcrumb-area .container,
  .it-slider-area .container,
  .it-about-area .container,
  .it-service-area .container,
  .it-choose-area .container,
  .it-process-area .container,
  .it-faq-area .container,
  .it-brand-area .container,
  .it-funfact-area .container,
  .it-contact-area .container,
  .it-footer-area .container,
  .it-text-slider-area .container,
  .legal-content .container {
    padding-left: 22px;
    padding-right: 22px;
  }

  .it-slider-style-2 .it-slider-content {
    padding-left: 6px;
    padding-right: 6px;
  }

  .it-section-title-box,
  .it-about-right,
  .it-choose-left,
  .it-choose-right,
  .it-faq-left,
  .legal-content__body {
    padding-left: 4px;
    padding-right: 4px;
  }
}

/* Homepage hero — extra spacing on small phones */
@media (max-width: 767.98px) {
  .it-slider-area.it-slider-style-2 .container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .it-slider-style-2 .it-slider-subtitle {
    line-height: 1.45;
    margin-bottom: 12px;
  }

  .it-slider-style-2 .it-slider-title {
    margin-bottom: 14px;
  }

  .it-slider-style-2 .it-slider-text {
    margin-bottom: 4px;
  }
}

/* Desktop header: center main nav between logo and CTA */
@media (min-width: 1200px) {
  /* Enlarge logo visually without changing layout box/header height */
  .it-header-logo .site-logo {
    overflow: visible;
  }

  .it-header-logo .site-logo__img {
    transform: scale(1.48);
    transform-origin: left center;
  }

  .header-sticky .it-header-logo .site-logo__img {
    transform: scale(1.4);
  }

  .it-header-area.it-header-style-2 > .container > .p-relative > .row.align-items-center {
    position: relative;
  }

  .it-header-area.it-header-style-2 .it-header-menu {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
    z-index: 2;
  }

  .it-header-area.it-header-style-2 .it-header-menu > nav > ul {
    margin-left: 0 !important;
    text-align: center;
  }

}

/* Header switcher: contrast on the white header.
   These must sit OUTSIDE the min-width:1200px block above — the switcher is
   rendered with `d-none d-lg-block`, so it is already visible from 992px, and
   between 992–1199px it was falling back to the base style built for the black
   top bar (white text, white border) — invisible on white until hovered. */
.it-lang-switcher--sticky-visible .it-lang-switcher__toggle {
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #1f2937;
}

.it-lang-switcher--sticky-visible .it-lang-switcher__label,
.it-lang-switcher--sticky-visible .it-lang-switcher__caret {
  color: #1f2937;
  opacity: 1;
}

.it-lang-switcher--sticky-visible .it-lang-switcher__toggle:hover,
.it-lang-switcher--sticky-visible.is-open .it-lang-switcher__toggle {
  border-color: #ff6b00;
  color: #ff6b00;
}

.it-lang-switcher--sticky-visible .it-lang-switcher__toggle:hover .it-lang-switcher__label,
.it-lang-switcher--sticky-visible .it-lang-switcher__toggle:hover .it-lang-switcher__caret,
.it-lang-switcher--sticky-visible.is-open .it-lang-switcher__label,
.it-lang-switcher--sticky-visible.is-open .it-lang-switcher__caret {
  color: #ff6b00;
}

/* Language switcher dropdown — white menu (like the nav), and a consistent
   left-to-right option layout (flag on the left, name left-aligned) for every
   language, including Arabic, on both LTR and RTL pages. */
.it-lang-switcher__menu {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}
.it-lang-switcher:not(.it-lang-switcher--offcanvas) .it-lang-switcher__option {
  direction: ltr;
  justify-content: center;
  text-align: left;
  color: #1f2937;
}
.it-lang-switcher--offcanvas .it-lang-switcher__option {
  color: #1f2937;
}.it-lang-switcher__option:hover,
.it-lang-switcher__option.is-active {
  color: var(--it-theme-1, #e30613);
  background: rgba(0, 0, 0, 0.05);
}

/* Support/help icon in the header top-right contact group */
.it-support-icon {
  color: var(--it-theme-1, #e30613);
  margin-right: 6px;
}

/* Partner brand logos sit directly on the white section (no chip); each logo is
   a clickable link to the brand's site. Most spacing is on the <a>; Swiper
   spaceBetween adds only a small visual gap between slide cells. */
.it-brand-active .swiper-slide {
  width: auto;
  height: 158px;
}.it-brand-item {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 220px;
  padding: 28px 70px;  transition: transform 0.3s;
}
.it-brand-item:hover {
  transform: translateY(-3px);
}
.it-brand-logo {
  height: 72px;
  width: auto;
  max-width: 320px;
  object-fit: contain;
  pointer-events: none;
}
/* Logos whose artwork reads smaller at the shared height get an extra boost
   (Siemens wordmark, IKEA block). */
.it-brand-logo--tall {
  height: 100px;
  max-width: 340px;
}
.it-brand-area .it-section-subtitle {
  color: var(--it-theme-1);
}
/* The slider's edge fades were dark (built for the old black background) and read
   as shadows on the white section. Fade to white so the marquee softly enters/exits
   the edges with no visible shadow. */
.it-brand-scroll-hr::before {
  background: linear-gradient(90deg, #ffffff 4.11%, rgba(255, 255, 255, 0.8) 57.6%, rgba(255, 255, 255, 0) 101.94%);
}
.it-brand-scroll-hr::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 3.69%, rgba(255, 255, 255, 0.8) 60.29%, #ffffff 92.05%);
}

/* ==========================================================================
   Form controls — cancel the theme's global `text-transform: capitalize`.
   main.css sets it on every bare `input` / `textarea` (and on each placeholder),
   so an address typed as `max@gmail.com` renders `Max@Gmail.Com` and a message
   comes out Title Cased. It is display-only — the value POSTed is exactly what
   was typed — but it reads as a broken field and makes visitors retype. What a
   visitor enters must render as entered, in every language.

   Each placeholder prefix needs its own rule: browsers drop a whole selector
   list when one selector in it is unknown, so grouping -webkit-/-moz-/-ms-
   would make the rule a no-op everywhere.
   ========================================================================== */
input,
textarea,
select {
  text-transform: none;
}
input::placeholder,
textarea::placeholder {
  text-transform: none;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  text-transform: none;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  text-transform: none;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  text-transform: none;
}
/* The one class-scoped leftover in the theme (blog sidebar search) outranks the
   element selectors above, so it needs its own reset. */
.sidebar-search-box input {
  text-transform: none;
}

/* Submit button while a message is in flight (forms.js adds .is-sending and
   sets [disabled]). Both selectors are listed because the button is disabled
   for the whole request but only carries .is-sending on the AJAX path.
   pointer-events: none kills the theme's hover-2 sweep animation, which would
   otherwise keep animating under the cursor and read as still-clickable. */
button[disabled],
button.is-sending {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Contact-form message textarea (homepage): match the white inputs in the same
   panel; the theme's base textarea would otherwise fall back to a grey fill. */
.it-information-input-box textarea {
  background-color: var(--it-common-white);
  min-height: 150px;
  height: auto;
  line-height: 1.6;
  resize: vertical;
}

/* Cookie consent notice — compact fixed card, hidden until shown by cookie-consent.js.
   Center with left + transform only; do not set right or inset-inline-* with width
   (that over-constrains fixed layout and the browser drops left: 50%). */
#aramkoCookie.aramko-cookie {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);  z-index: 9999;
  width: calc(100% - 40px);
  max-width: 420px;
  background: #111417;
  color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  padding: 22px 24px;
}
.aramko-cookie.is-visible,
#aramkoCookie.aramko-cookie.is-visible {  display: block;
}
.aramko-cookie__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.aramko-cookie__text {
  margin: 0;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.6;
}
.aramko-cookie__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.aramko-cookie__link {
  color: #ffffff;
  text-decoration: underline;
  font-size: 14px;
  white-space: nowrap;
  margin-inline-end: auto;
}
.aramko-cookie__link:hover {
  color: var(--it-theme-1);
}
.aramko-cookie__btn {
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.aramko-cookie__btn--accept {
  background: var(--it-theme-1);
  color: #ffffff;
}
.aramko-cookie__btn--accept:hover {
  opacity: 0.9;
}
.aramko-cookie__btn--decline {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.aramko-cookie__btn--decline:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Icons next to the "Why partners choose Aramko" benefit points (about page). */
.it-choose-more-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--it-theme-1);
  margin-bottom: 14px;
}
.it-choose-more-icon svg {
  width: 30px;
  height: 30px;
}

/* Homepage contact form spans the full dark card now that the side panel is gone —
   drop the right margin that used to make room for it (avoids black gap on the right). */
.it-information-left--full {
  margin-right: 0;
}

/* Contact cards: make the whole card clickable. A stretched pseudo-element over
   each list item lets a click (and the link's hover underline) trigger from
   anywhere on the card, not just the link text. */
.it-contact-inner-list ul li {
  position: relative;
}
.it-contact-inner-list ul li:hover {
  cursor: pointer;
}
.it-contact-inner-list ul li a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Header nav: indicate current page */
.it-menu-content > ul > li.is-current > a {
  color: var(--it-theme-1);
  font-weight: 700;
}
.it-menu-content > ul > li.is-current > a::after {
  width: 100%;
  opacity: 1;
}

/* Service page CTA spacing: avoid touching shared button class */
.it-service-btn--cta-gap {
  margin-bottom: 32px;
}

/* Footer logo: enlarge visually without affecting footer layout flow */
@media (min-width: 1200px) {
  /* Align footer column 1 (logo + text) with other footer column tops */
  .it-footer-area .it-footer-col-1 {
    margin-top: -78px;
  }

  .it-footer-widget-logo .site-logo {
    overflow: visible;
  }

  .it-footer-widget-logo .site-logo__img {
    transform: scale(1.2);
    transform-origin: left top;
  }
}

/* Normalize section card/container heights for cleaner row alignment */
@media (min-width: 768px) {
  .it-service-2-item,
  .it-step-item,
  .it-funfact-item,
  .it-choose-2-item,
  .it-testimonial-2-item,
  .it-testimonial-item {
    height: 100%;
  }

  .it-service-2-item,
  .it-step-item,
  .it-choose-2-item,
  .it-testimonial-2-item,
  .it-testimonial-item {
    display: flex;
    flex-direction: column;
  }

  .it-service-2-item .it-btn-sm {
    margin-top: auto;
  }

  /* Keep process step icons centered after flex normalization */
  .it-step-item .it-step-icon {
    align-self: center;
  }
}

/* Services page (/services): equal card heights + aligned divider row — see aramko-app.css */

/* Homepage services list — hover background images (index.ejs) */
.it-service-area.it-service-style-3 .it-service-item-wrap {
  overflow: hidden;
}

.it-service-area.it-service-style-3 .it-service-item-bg {
  object-fit: cover;
  object-position: center;
}

.it-service-style-3.it-service-style-2 .it-service-item-wrap:hover .it-service-item-bg {
  object-fit: cover;
  object-position: center;
}

/* Contact page polish: professional spacing, balanced cards, subtle effects */
.it-contact-area--pro .it-contact-inner-list > p {
  color: #4b5563;
  line-height: 1.8;
  max-width: 42ch;
}

.it-contact-area--pro .it-contact-inner-list ul {
  display: grid;
  gap: 14px;
}

.it-contact-area--pro .it-contact-inner-list ul li {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.it-contact-area--pro .it-contact-inner-list ul li:hover {
  transform: translateY(-2px);
  border-color: rgba(252, 7, 43, 0.35);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
}

.it-contact-area--pro .it-contact-inner-list ul li i {
  width: 56px;
  height: 56px;
  min-width: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0f172a;
  border-radius: 8px;
}

.it-contact-area--pro .it-contact-inner-list ul li i svg {
  width: 24px;
  height: 24px;
}

.it-contact-area--pro .it-contact-inner-list ul li div span {
  font-weight: 700;
  color: #111827;
  margin-bottom: 2px;
}

.it-contact-area--pro .it-contact-inner-list ul li div a {
  color: #374151;
}

.it-contact-area--pro .it-contact-form-box {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.08);
}

.it-contact-area--pro .it-contact-input-box input,
.it-contact-area--pro .it-contact-textarea-box textarea {
  border-radius: 8px;
  border: 1px solid #d1d5db;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.it-contact-area--pro .it-contact-input-box input:focus,
.it-contact-area--pro .it-contact-textarea-box textarea:focus {
  border-color: rgba(252, 7, 43, 0.7);
  box-shadow: 0 0 0 3px rgba(252, 7, 43, 0.16);
  background-color: #fff;
}

.it-contact-area--pro .it-contact-btn .it-btn-orange {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.it-contact-area--pro .it-contact-btn .it-btn-orange:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(252, 7, 43, 0.3);
}

/* Mobile logo sizing + footer text centering */
@media (max-width: 1199.98px) {
  .it-header-logo .site-logo {
    overflow: visible;
  }

  .it-header-logo .site-logo__img {
    width: 122px !important;
    max-width: none !important;
    max-height: none !important;
    height: auto !important;
    transform: scale(1.28);
    transform-origin: left center;
  }

  .itoffcanvas__logo .site-logo {
    overflow: visible;
  }

  .itoffcanvas__logo .site-logo__img {
    width: 192px !important;
    max-width: none !important;
    max-height: none !important;
    height: auto !important;
    transform: scale(1.32);
    transform-origin: left center;
  }
}

/* Offcanvas close: SVG X (replaces Font Awesome for reliable rendering) */
.itoffcanvas__close-btn button.close-btn .itoffcanvas__close-icon {
  display: block;
  width: 22px;
  height: 22px;
  color: #ffffff;
  flex-shrink: 0;
  pointer-events: none;
}

.itoffcanvas__close-btn button.close-btn .itoffcanvas__close-icon path {
  stroke: currentColor;
}

/* Mobile-only: detach offcanvas close icon from logo — anchor to viewport top corner.
   These rules are deliberately NOT scoped to .opened: main.js drops that class on the
   first frame of the close while the panel keeps sliding for ~0.45s, so any geometry
   gated on .opened would stop matching mid-animation and let the button snap back to
   its main.css anchor (absolute, top 38px / right 39px, 0.2 opacity) — animated, because
   main.css puts `transition: all .3s` on it. That is the visible drift on close.
   Only interactivity is state-dependent below. */
@media (max-width: 991px) {
  .itoffcanvas .itoffcanvas__close-btn {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    left: auto !important;
    z-index: 999999 !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
    /* Closed panel: inherits visibility:hidden, but keep it unclickable regardless. */
    pointer-events: none !important;
  }

  .itoffcanvas.opened .itoffcanvas__close-btn {
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* RTL: mirror to opposite corner so close stays away from the logo */
  [dir="rtl"] .itoffcanvas .itoffcanvas__close-btn {
    right: auto !important;
    left: 20px !important;
  }

  /* Reserve space beside the logo (44px button + 30px gap) */
  .itoffcanvas .itoffcanvas__logo {
    padding-inline-end: 74px;
    box-sizing: border-box;
    max-width: 100%;
  }
  .itoffcanvas .itoffcanvas__close-btn button.close-btn {
    position: static !important;
    display: flex !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: rgba(0, 0, 0, 0.55) !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    cursor: pointer !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    /* main.css animates `all .3s` on this button; nothing here may move or fade. */
    transition: none !important;
    -webkit-tap-highlight-color: transparent;
  }
  .itoffcanvas.opened .itoffcanvas__close-btn button.close-btn {
    visibility: visible !important;
  }
  .itoffcanvas .itoffcanvas__close-btn button.close-btn .itoffcanvas__close-icon {
    display: block !important;
    opacity: 1 !important;
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0;
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: none !important;
    pointer-events: none;
  }
  .itoffcanvas.opened .itoffcanvas__close-btn button.close-btn .itoffcanvas__close-icon {
    visibility: visible !important;
  }
  .itoffcanvas .itoffcanvas__close-btn button.close-btn .itoffcanvas__close-icon path {
    stroke: #ffffff !important;
    opacity: 1 !important;
  }
}

@media (max-width: 991.98px) {
  .it-footer-widget,
  .it-footer-widget-title,
  .it-footer-widget-text,
  .it-footer-widget-menu,
  .it-footer-widget-menu ul,
  .it-footer-widget-menu ul li,
  .it-copyright-left,
  .it-copyright-link {
    text-align: center;
  }

  /* Contact column: full width, centered block (not xl-end aligned) */
  .it-footer-col-4 {
    justify-content: center !important;
    width: 100%;
  }

  .it-footer-col-4 > div {
    width: 100%;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }

  .it-footer-col-4 .it-footer-widget-title {
    margin-bottom: 20px;
  }

  /* Mobile contact rows: stacked cards (icon above, text below) */
  .it-footer-col-4 .it-footer-widget-tel-box {
    padding: 16px 20px !important;
    margin-bottom: 12px !important;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 320px;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px;
    text-align: center !important;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
  }

  .it-footer-col-4 .it-footer-widget-tel-box > span:first-child {
    position: static !important;
    top: auto !important;
    left: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 50%;
    background: rgba(252, 7, 43, 0.18);
    color: var(--it-theme-1);
    line-height: 1;
  }

  .it-footer-col-4 .it-footer-widget-tel-box > span:first-child svg {
    display: block;
  }

  .it-footer-col-4 .it-footer-widget-tel-box > a,
  .it-footer-col-4 .it-footer-widget-tel-box > span.it-footer-contact-text {
    display: block !important;
    width: 100%;
    max-width: none;
    text-align: center !important;
    line-height: 1.6;
  }

  .it-footer-widget-social {
    justify-content: center;
  }

  .it-footer-widget-menu ul {
    padding-left: 0;
  }

}

/* Offcanvas (hamburger menu) Get In Touch — stacked contact cards */
.itoffcanvas__info {
  padding-bottom: 24px;
  margin-bottom: 16px;
}

.itoffcanvas__info .offcanva-title {
  text-align: center;
  margin: 24px 0 18px;
}

.itoffcanvas__info .it-info-wrapper {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
  gap: 10px;
  padding: 16px 18px;
  margin-bottom: 12px !important;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.itoffcanvas__info .itoffcanvas__info-icon {
  flex-shrink: 0;
}

.itoffcanvas__info .itoffcanvas__info-icon a,
.itoffcanvas__info .itoffcanvas__info-icon > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: 0 !important;
  line-height: 1 !important;
  font-size: 18px;
  border-radius: 50%;
  background-color: var(--it-theme-1);
  color: var(--it-common-white);
}

.itoffcanvas__info .itoffcanvas__info-address {
  width: 100%;
}

.itoffcanvas__info .itoffcanvas__info-address > span:first-child {
  margin-bottom: 4px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.itoffcanvas__info .itoffcanvas__info-address a,
.itoffcanvas__info .itoffcanvas__info-address > span + span {
  font-size: 15px !important;
  font-weight: 600;
  line-height: 1.5;
}

.itoffcanvas__info .itoffcanvas__info-address a {
  display: block;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}

/* Offcanvas (hamburger menu) social icons */
.itoffcanvas__social--aramko {
  margin-top: 28px;
}

.itoffcanvas__social--aramko .social-icon {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.itoffcanvas__social--aramko .social-icon a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0 !important;
  line-height: 1 !important;
}

.itoffcanvas__social--aramko .social-icon a i {
  font-size: 18px;
  line-height: 1;
}

/* Floating WhatsApp button — offsets and breakpoint mirror #aramkoBackToTop
   (see aramko-app.css): desktop 30px / mobile 20px, same bottom distance,
   opposite horizontal side. */
.whatsapp {
  --float-offset: 30px;

  display: inline;
  position: fixed;
  bottom: var(--float-offset);
  left: var(--float-offset);
  right: auto;
  inset-inline-start: var(--float-offset);
  inset-inline-end: auto;
  z-index: 999999 !important;
}

/* Arabic/RTL only: mirror horizontal position (LTR = left, RTL = right) */
html[dir="rtl"] .whatsapp,
html[lang="ar"] .whatsapp {
  left: auto !important;
  right: var(--float-offset) !important;
}

@media (max-width: 767.98px) {
  .whatsapp {
    --float-offset: 20px;
  }
}

.whatsapp-float__btn img {
  display: block;
  width: 50px;
  height: 50px;
}

/* ==========================================================================
   Square media — 1:1 responsive crop (FAQ accordion, thumbnails, etc.)
   ========================================================================== */
.aramko-media-square {
  position: relative;
  flex: 0 0 auto;
  width: 220px;
  max-width: 220px;
  min-width: 0;
  height: 220px;
  max-height: 220px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.aramko-media-square img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* Homepage FAQ accordion — constrain flex layout so images cannot blow out */
.it-custom-accordion .accordion-body > p {
  flex: 1 1 auto;
  min-width: 0;
}

.it-custom-accordion .accordion-body .shine-effect.aramko-media-square {
  flex: 0 0 220px;
  width: 220px;
  max-width: 220px;
  height: 220px;
  max-height: 220px;
  align-self: center;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-custom-accordion .accordion-body .shine-effect.aramko-media-square {
    flex: 0 0 180px;
    width: 180px;
    max-width: 180px;
    height: 180px;
    max-height: 180px;
  }

  /* Theme hides accordion images on this breakpoint — restore for square media */
  .it-custom-accordion .accordion-body .shine-effect.aramko-media-square,
  .it-custom-accordion .accordion-body .shine-effect.aramko-media-square img {
    display: block;
  }
}

@media (max-width: 767.98px) {
  .it-custom-accordion .accordion-body {
    flex-direction: column;
    align-items: stretch;
  }

  .it-custom-accordion .accordion-body .shine-effect.aramko-media-square {
    flex: 0 0 auto;
    width: 160px;
    max-width: 160px;
    height: 160px;
    max-height: 160px;
    margin-top: 20px;
    margin-inline: auto;
  }

  .it-custom-accordion .accordion-body .shine-effect.aramko-media-square img {
    margin-top: 0;
  }
}


/* ===================================================================
   Inline icon layer — replaces the Font Awesome Pro webfont
   ===================================================================
   FA shipped three woff2 files (~1.05 MB) plus a 464 KB stylesheet to
   draw about a dozen glyphs, and each family was declared under several
   aliases so the same file downloaded more than once. The markup icons
   are now inline <svg class="am-icon"> (see views/partials/*.ejs) and the
   pseudo-element glyphs below are masked SVGs, so nothing loads a font.

   Icons are sized in em: every icon inherits the font-size its old <i>
   tag was given, so existing rules (topbar 16px, caret 11px, offcanvas
   18px …) keep working untouched. */
.am-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  line-height: 1;
  pointer-events: none;
}

/* Brand marks are solid shapes, not strokes. */
.am-icon--solid {
  fill: currentColor;
  stroke: none;
}

/* main.css sized these through the `i` element selector, which no longer matches. */
.it-footer-widget-tel-box > span:first-child .am-icon {
  font-size: 16px;
}

/* Back-to-top: the button inherits 16px, but a stroked chevron pair only inks
   the middle ~60% of its box, so it read far smaller than the old glyph inside
   the 48px circle. Sized to the button instead of the text. */
.scroll-top .am-icon {
  font-size: 26px;
  stroke-width: 2;
}

/* Accordion +/- and arrow indicators: same geometry main.css already sets
   (absolute, right 30px, 20px box), with the glyph drawn by a masked SVG so
   it still follows `color` on open/hover states. */
.it-custom-accordion .accordion-buttons::after,
.it-custom-accordion-style-2 .accordion-buttons::after,
.it-custom-accordion-style-3 .accordion-buttons::after {
  content: "";
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--am-accordion-icon) center / contain no-repeat;
  mask: var(--am-accordion-icon) center / contain no-repeat;
}

/* minus — open panel (base style) */
.it-custom-accordion .accordion-buttons::after {
  --am-accordion-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
/* plus — collapsed panel (base style) */
.it-custom-accordion .accordion-buttons.collapsed::after {
  --am-accordion-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
/* arrow up — open panel (style-2 / style-3, e.g. the FAQ page) */
.it-custom-accordion-style-2 .accordion-buttons::after,
.it-custom-accordion-style-3 .accordion-buttons::after {
  --am-accordion-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3C/svg%3E");
}
/* arrow down — collapsed panel (style-2 / style-3) */
.it-custom-accordion-style-2 .accordion-buttons.collapsed::after,
.it-custom-accordion-style-3 .accordion-buttons.collapsed::after {
  --am-accordion-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E");
}

/* Remaining FA codepoints in main.css belong to features this site does not
   render (the magic-cursor drag ball, dropdown carets — the nav is flat).
   Without the font they would paint as tofu boxes if ever switched on. */
#ball .ball-drag::before,
#ball .ball-drag::after,
.it-header-menu nav ul li.has-dropdown::after {
  content: none;
}