/*
 * Site footer, rebuilt 2026-10-16 from measurements of the live smartmediajo.com footer
 * (1440 / 1840 / 390 px, English and Arabic). Live layout: a 1180px band split 32/18/25/25 %
 * with 10px column padding, #161616 background, a glow image behind the lower half and a strip
 * of bars under everything.
 */

.site-footer {
    position: relative;
    overflow: hidden;
    background: #161616;
    color: #808080;
    font-family:Poppins,"IBM Plex Sans Arabic",sans-serif;
    font-size: 14px;
    line-height: 28.22px;
}

html[dir=rtl] .site-footer { font-family: "IBM Plex Sans Arabic", Arial, sans-serif; }

/* Glow behind the lower half: live's 1418x392 image at its natural size, centred, sitting on the bars
   (narrower screens show it at full width). */
.site-footer::before {
    content: "";
    position: absolute;
    inset: auto auto 0 50%;
    width: min(1418px, 100%);
    transform: translateX(-50%);
    aspect-ratio: 1418 / 392;
    background: url('/wp-content/uploads/2020/07/Footer-Asset-02.png') center bottom / 100% auto no-repeat;
    pointer-events: none;
}

.site-footer > * { position: relative; }

.footer-grid {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 32% 18% 25% 25%;
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: 50px 0 18px;
}

.footer-grid > section { box-sizing: border-box; min-width: 0; padding: 9px 10px 0; }

.site-footer .footer-heading {
    margin: 0;
    color: #fff;
    font-size: 21.25px;
    font-weight: 700;
    line-height: 34px;
}

/* About column */
.footer-brand { display: flex; align-items: center; gap: 20px; margin-bottom: 26.5px; }
.footer-brand img { display: block; width: auto; height: 65px; }
.footer-brand .footer-gptw { width: 65px; border-radius: 10px; }
.footer-about .footer-heading { margin-bottom: 13px; }
.footer-about-text { max-width: 90%; margin: 0 0 47px; color: rgba(255, 255, 255, .35); }

.socials { display: flex; gap: 0; margin-bottom: 28px; }
.social-link { display: block; margin: 0 17px 5px 0; line-height: 0; text-decoration: none; }
html[dir=rtl] .social-link { margin: 0 12px 5px 5px; } /* live RTL: 12px before each circle, same 62px pitch */
.social-circle {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #32312d;
    color: #fff;
    transition: background-color .3s;
}
.footer-social-glyph { font: 400 16px/1 fontello, sans-serif; }
.footer-social-glyph-linkedin::before { content: "\e884"; }
.footer-social-glyph-instagram::before { content: "\e9c9"; }
.footer-social-glyph-youtube::before { content: "\e89a"; font-family: trx_addons_icons, sans-serif; }
.footer-social-glyph-facebook::before { content: "\e9c6"; }
.social-link-linkedin:is(:hover, :focus-visible) .social-circle { background: #0077b5; }
.social-link-instagram:is(:hover, :focus-visible) .social-circle { background: #c862dc; }
.social-link-youtube:is(:hover, :focus-visible) .social-circle { background: #f00; }
.social-link-facebook:is(:hover, :focus-visible) .social-circle { background: #3b5998; }

.payment-badges { display: flex; gap: 15px; }
.payment-badges img { display: block; width: 53px; height: auto; }

/* Quick links: 14px label on a 17px/28.22px line, 42px apart; hover = white + 1px rule growing under the label. */
.footer-links .footer-heading { margin-bottom: 22px; }
.footer-links a {
    display: block;
    margin-bottom: 13.78px;
    color: #808080;
    font-size: 17px;
    line-height: 28.22px;
    text-decoration: none;
    transition: color .3s;
}
.footer-links a > span { display: inline-block; position: relative; font-size: 14px; line-height: 16.8px; }
.footer-links a > span::after {
    content: "";
    position: relative;
    bottom: -5px;
    display: block;
    width: 0;
    height: 1px;
    background: #fff;
    transition: width .3s;
}
.footer-links a:is(:hover, :focus-visible) { color: #fff; }
.footer-links a:is(:hover, :focus-visible) > span::after { width: 100%; }

/* Offices */
.footer-office .footer-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 19px; }
.footer-office .office-flag { flex: none; width: 24px; height: 24px; }
.footer-address { margin: 0 0 18px; white-space: pre-line; }
html[dir=rtl] .footer-address { margin-bottom: 26px; }
html[dir=rtl] .footer-office .footer-heading { gap: 10px; }
html[dir=rtl] .footer-office .office-flag { margin-inline-start: 8px; }
.footer-line { margin: 0 0 13.8px; }
.footer-contact,
.footer-location { color: #808080; text-decoration: none; transition: color .3s, background-size .3s; }
.footer-location { display: inline-flex; align-items: center; color: #fff; }
.footer-location img { width: 20px; height: 28px; margin-inline-start: 10px; }

/* Live underline: 1px gradient 6px under the text, drawn in when it scrolls into view, shrinking away on hover. */
.site-footer [data-underline] {
    padding-bottom: 6px;
    background: linear-gradient(to right, currentColor 0%, currentColor 100%) 0 100% / 0 1px no-repeat;
    transition: background-size .6s ease, color .3s;
}
html[dir=rtl] .site-footer [data-underline] { background-position: 100% 100%; }
.site-footer [data-underline].is-drawn { background-size: 100% 1px; }
.site-footer a:is(:hover, :focus-visible) [data-underline],
.site-footer a[data-underline]:is(:hover, :focus-visible) { color: #fff; background-size: 0 1px; }
.footer-contact:is(:hover, :focus-visible) { color: #fff; }

/* Bottom bar */
.footer-divider { width: min(1180px, 100%); height: 1px; margin: 10px auto; background: #323641; }
.footer-bottom {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: 22px 10px 33.78px;
    font-size: 13px;
}
.footer-copyright { margin: 0; color: #666; }
.footer-legal { display: flex; margin: 0 -32px; padding: 0; list-style: none; }
.footer-legal li { position: relative; margin: 0 32px; }
.footer-legal span { display: inline-block; line-height: 28.22px; }
.footer-legal li + li::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: -32px;
    border-inline-start: 1px solid #888;
}
.footer-legal a { color: #888; text-decoration: none; transition: color .3s; }
.footer-legal a:is(:hover, :focus-visible) { color: #fff; }

.footer-bars { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 91; object-fit: cover; }

/* ---------- Phones (live: one column, 20px gutter) ---------- */
@media (max-width: 767px) {
    .footer-grid { grid-template-columns: 1fr; padding: 55px 10px 0; }
    .footer-grid > section { padding: 0 10px; }
    .site-footer .footer-heading { font-size: 17px; line-height: 27.2px; }
    .site-footer { line-height: 26.56px; }
    .footer-brand { margin-bottom: 21px; }
    .footer-about .footer-heading { margin-bottom: 8px; }
    .footer-about-text { max-width: 90%; margin-bottom: 42px; }
    .social-circle { width: 40px; height: 40px; }
    .social-link { margin-inline-end: 16px; }
    .socials { margin-bottom: 16px; }
    .footer-links { margin-top: 30px; }
    .footer-links .footer-heading { margin-bottom: 12px; }
    .footer-links a { margin-bottom: 4.8px; }
    .footer-links + .footer-office { margin-top: 23px; }
    .footer-office + .footer-office { margin-top: 20px; }
    .footer-office .footer-heading { margin-bottom: 14px; }
    .footer-address { margin-bottom: 9px; }
    .footer-line { margin-bottom: 7.8px; }
    .footer-divider { width: calc(100% - 30px); margin: 34px auto 0; }
    .footer-bottom { flex-direction: column-reverse; gap: 28px; padding: 28px 10px 24px; text-align: center; }
    .footer-copyright { line-height: 18.2px; }
    .footer-legal span { line-height: 26.56px; }
}

/* Same content grid as the page (site.css --sm-box): 1180px from 1440, 1120px from 1280, viewport - 40px below. */
@media (min-width: 1200px) {
    .footer-grid,
    .footer-divider,
    .footer-bottom { width: var(--sm-box); }
}

/* ---------- Tablets (live: About and Quick Links full width, the two offices side by side) ----------
   Live stacks the columns up to 1199px, but the theme only tightens the spacing up to 1023px,
   so 1024–1199px is the stacked layout with desktop spacing. */
@media (min-width: 768px) and (max-width: 1199px) {
    .footer-grid { grid-template-columns: 1fr 1fr; width: calc(100% - 40px); }
    .footer-about,
    .footer-links { grid-column: 1 / -1; }
    .site-footer .footer-heading { font-size: 19px; }
    .footer-office { margin-top: 32px; }
    .footer-divider,
    .footer-bottom { width: calc(100% - 40px); }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .footer-grid { padding-top: 46px; padding-bottom: 0; }
    .site-footer .footer-heading { line-height: 30.4px; }
    .footer-brand { margin-bottom: 20px; }
    .footer-about .footer-heading { margin-bottom: 9px; }
    .footer-about-text { margin-bottom: 45px; }
    .social-link { margin-inline-end: 11px; }
    html[dir=rtl] .social-link { margin: 0 0 5px 11px; }
    .socials { margin-bottom: 10px; }
    .footer-links { margin-top: 22px; }
    .footer-links .footer-heading { margin-bottom: 16px; }
    .footer-links a { margin-bottom: 11px; }
    .footer-office .footer-heading { margin-bottom: 13px; }
    .footer-address,
    html[dir=rtl] .footer-address { margin-bottom: 9px; }
    .footer-line { margin-bottom: 8.8px; }
    .footer-bottom { padding-bottom: 27px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
    .socials { margin-bottom: 20px; }
    .footer-grid { padding-bottom: 0; }
    .footer-links { margin-top: 29.5px; }
    .footer-links .footer-heading { margin-bottom: 18px; }
    .footer-office { margin-top: 36px; }
    .footer-office .footer-heading { margin-bottom: 16px; }
    .footer-address { margin-bottom: 15px; }
    .footer-bottom { padding-bottom: 36.78px; }
}

/* Live Arabic: on tablets the addresses keep 8px more space below them (like desktop Arabic), and from 1024px
   the Saudi address starts 7px lower than the Jordan one with 3px less below it. */
@media (min-width: 768px) and (max-width: 1023px) {
    html[dir=rtl] .footer-address { margin-bottom: 19px; }
}
@media (min-width: 1024px) {
    html[dir=rtl] .footer-office + .footer-office .footer-address { padding-top: 7px; margin-bottom: 23px; }
}

/* Live 1200–1279px: four columns, but headings already at the tablet size. */
@media (min-width: 1200px) and (max-width: 1279px) {
    .site-footer .footer-heading { font-size: 19px; line-height: 30.4px; }
    .footer-about .footer-heading { margin-bottom: 16px; }
    .footer-about-text { margin-bottom: 49px; }
    .socials { margin-bottom: 19px; }
}
@media (max-width: 767px) {
    html[dir=rtl] .footer-address { margin-bottom: 18px; }
}
@media (max-width: 479px) {
    html[dir=rtl] .footer-office + .footer-office { margin-top: 24px; }
}
/* Live 480–767px: 30px side gutter and a 34.56px link pitch (20px / 32.56px below 480). */
@media (min-width: 480px) and (max-width: 767px) {
    .footer-grid { padding-inline: 20px; }
    .footer-links a { margin-bottom: 6.8px; }
    .footer-divider { width: calc(100% - 50px); }
    .footer-bottom { padding-inline: 20px; }
}