/* WP2Static — FontAwesome icon fallback CSS
   Avada's UCSS strips most icon rules. This file ensures phone/email/social
   icons render correctly on every page. */

/* @font-face — point to existing webfont files */
@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("/assets/themes/Avada/includes/lib/assets/fonts/fontawesome/webfonts/fa-solid-900.woff2") format("woff2"),
         url("/assets/themes/Avada/includes/lib/assets/fonts/fontawesome/webfonts/fa-solid-900.woff") format("woff"),
         url("/assets/themes/Avada/includes/lib/assets/fonts/fontawesome/webfonts/fa-solid-900.ttf") format("truetype");
}
@font-face {
    font-family: "Font Awesome 6 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("/assets/themes/Avada/includes/lib/assets/fonts/fontawesome/webfonts/fa-brands-400.woff2") format("woff2"),
         url("/assets/themes/Avada/includes/lib/assets/fonts/fontawesome/webfonts/fa-brands-400.woff") format("woff"),
         url("/assets/themes/Avada/includes/lib/assets/fonts/fontawesome/webfonts/fa-brands-400.ttf") format("truetype");
}
@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("/assets/themes/Avada/includes/lib/assets/fonts/fontawesome/webfonts/fa-regular-400.woff2") format("woff2"),
         url("/assets/themes/Avada/includes/lib/assets/fonts/fontawesome/webfonts/fa-regular-400.woff") format("woff"),
         url("/assets/themes/Avada/includes/lib/assets/fonts/fontawesome/webfonts/fa-regular-400.ttf") format("truetype");
}

/* Base classes */
.fa, .fas, .fa-solid, .far, .fa-regular, .fab, .fa-brands,
[class^="fa-"]:before, [class*=" fa-"]:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display, inline-block);
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}
.fa, .fas, .fa-solid { font-family: "Font Awesome 6 Free"; font-weight: 900; }
.far, .fa-regular   { font-family: "Font Awesome 6 Free"; font-weight: 400; }
.fab, .fa-brands    { font-family: "Font Awesome 6 Brands"; font-weight: 400; }

/* Most-common solid icons */
.fa-phone:before, .fa-phone-alt:before { content: "\f095"; }
.fa-phone-square:before              { content: "\f098"; }
.fa-envelope:before, .fa-mail:before { content: "\f0e0"; }
.fa-envelope-open:before             { content: "\f2b6"; }
.fa-map-marker-alt:before, .fa-location-dot:before { content: "\f3c5"; }
.fa-map-marker:before                { content: "\f041"; }
.fa-home:before, .fa-house:before    { content: "\f015"; }
.fa-user:before                      { content: "\f007"; }
.fa-users:before                     { content: "\f0c0"; }
.fa-search:before, .fa-magnifying-glass:before { content: "\f002"; }
.fa-bars:before, .fa-menu:before     { content: "\f0c9"; }
.fa-times:before, .fa-xmark:before, .fa-close:before { content: "\f00d"; }
.fa-chevron-down:before              { content: "\f078"; }
.fa-chevron-up:before                { content: "\f077"; }
.fa-chevron-left:before              { content: "\f053"; }
.fa-chevron-right:before             { content: "\f054"; }
.fa-angle-down:before                { content: "\f107"; }
.fa-angle-up:before                  { content: "\f106"; }
.fa-angle-left:before                { content: "\f104"; }
.fa-angle-right:before               { content: "\f105"; }
.fa-arrow-down:before                { content: "\f063"; }
.fa-arrow-up:before                  { content: "\f062"; }
.fa-arrow-left:before                { content: "\f060"; }
.fa-arrow-right:before               { content: "\f061"; }
.fa-arrow-alt-circle-down:before, .fa-circle-arrow-down:before { content: "\f358"; }
.fa-check:before                     { content: "\f00c"; }
.fa-plus:before                      { content: "\2b"; }
.fa-minus:before                     { content: "\f068"; }
.fa-star:before                      { content: "\f005"; }
.fa-heart:before                     { content: "\f004"; }
.fa-clock:before                     { content: "\f017"; }
.fa-calendar:before                  { content: "\f133"; }
.fa-cog:before, .fa-gear:before      { content: "\f013"; }
.fa-info-circle:before, .fa-circle-info:before { content: "\f05a"; }
.fa-question-circle:before           { content: "\f059"; }
.fa-exclamation-circle:before        { content: "\f06a"; }
.fa-globe:before                     { content: "\f0ac"; }
.fa-print:before                     { content: "\f02f"; }
.fa-download:before                  { content: "\f019"; }
.fa-upload:before                    { content: "\f093"; }
.fa-share:before, .fa-share-alt:before, .fa-share-nodes:before { content: "\f1e0"; }
.fa-link:before                      { content: "\f0c1"; }
.fa-external-link:before, .fa-external-link-alt:before, .fa-arrow-up-right-from-square:before { content: "\f08e"; }
.fa-spin                             { animation: fa-spin 2s linear infinite; }
.fa-shopping-cart:before, .fa-cart-shopping:before { content: "\f07a"; }
.fa-bag-shopping:before, .fa-shopping-bag:before { content: "\f290"; }
.fa-comment:before                   { content: "\f075"; }
.fa-comments:before                  { content: "\f086"; }
.fa-image:before                     { content: "\f03e"; }
.fa-camera:before                    { content: "\f030"; }
.fa-video:before                     { content: "\f03d"; }
.fa-bell:before                      { content: "\f0f3"; }
.fa-bookmark:before                  { content: "\f02e"; }
.fa-eye:before                       { content: "\f06e"; }
.fa-pencil:before, .fa-pen:before    { content: "\f303"; }
.fa-edit:before, .fa-pen-to-square:before { content: "\f044"; }
.fa-trash:before                     { content: "\f1f8"; }
.fa-save:before, .fa-floppy-disk:before { content: "\f0c7"; }
.fa-folder:before                    { content: "\f07b"; }
.fa-file:before                      { content: "\f15b"; }
.fa-lock:before                      { content: "\f023"; }
.fa-unlock:before                    { content: "\f09c"; }
.fa-quote-left:before                { content: "\f10d"; }
.fa-quote-right:before               { content: "\f10e"; }
.fa-play:before                      { content: "\f04b"; }
.fa-pause:before                     { content: "\f04c"; }
.fa-stop:before                      { content: "\f04d"; }
.fa-music:before                     { content: "\f001"; }
.fa-bolt:before                      { content: "\f0e7"; }
.fa-fire:before                      { content: "\f06d"; }
.fa-rocket:before                    { content: "\f135"; }
.fa-gift:before                      { content: "\f06b"; }
.fa-shield:before, .fa-shield-alt:before, .fa-shield-halved:before { content: "\f3ed"; }
.fa-mobile:before, .fa-mobile-screen-button:before { content: "\f3cd"; }
.fa-tablet:before                    { content: "\f10a"; }
.fa-desktop:before                   { content: "\f108"; }
.fa-database:before                  { content: "\f1c0"; }
.fa-cloud:before                     { content: "\f0c2"; }
.fa-wifi:before                      { content: "\f1eb"; }

/* Brand icons (social) */
.fa-facebook:before, .fa-facebook-f:before { content: "\f39e"; }
.fa-facebook-square:before, .fa-square-facebook:before { content: "\f082"; }
.fa-twitter:before, .fa-x-twitter:before  { content: "\f099"; }
.fa-instagram:before                       { content: "\f16d"; }
.fa-linkedin:before, .fa-linkedin-in:before { content: "\f0e1"; }
.fa-youtube:before                         { content: "\f167"; }
.fa-pinterest:before, .fa-pinterest-p:before { content: "\f231"; }
.fa-pinterest-square:before                { content: "\f0d3"; }
.fa-tumblr:before                          { content: "\f173"; }
.fa-whatsapp:before                        { content: "\f232"; }
.fa-google:before                          { content: "\f1a0"; }
.fa-google-plus:before, .fa-google-plus-g:before { content: "\f0d5"; }
.fa-reddit:before                          { content: "\f1a1"; }
.fa-snapchat:before                        { content: "\f2ab"; }
.fa-tiktok:before                          { content: "\e07b"; }
.fa-telegram:before                        { content: "\f2c6"; }
.fa-github:before                          { content: "\f09b"; }
.fa-vimeo:before, .fa-vimeo-v:before       { content: "\f27d"; }
.fa-skype:before                           { content: "\f17e"; }
.fa-discord:before                         { content: "\f392"; }
.fa-twitch:before                          { content: "\f1e8"; }

@keyframes fa-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Search icon visibility — make sure search trigger is clickable even if icon font fails */
.fusion-main-menu-search a, .fusion-main-menu-icon[aria-label="Search"] {
    display: inline-block; min-width: 24px; min-height: 24px;
    position: relative;
}
.fusion-main-menu-search a:before, .fusion-main-menu-icon[aria-label="Search"]:before {
    content: "\f002";  /* magnifying glass */
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    display: inline-block;
}

/* Ensure social icon links have visible click area even if font fails to load */
.fusion-social-networks a, .fusion-social-networks-icons a,
.fusion-social-links a {
    display: inline-block; min-width: 32px; min-height: 32px;
    margin: 0 4px;
}

/* Fix: "About Us" dropdown menu wasn't opening. The submenu (.elementor-
   nav-menu--dropdown) is `display:none` by default in the theme's own
   CSS with no matching `:hover` reveal rule anywhere — Elementor Pro's
   JS toggles it, and that JS doesn't run reliably in a static export.
   Restoring a plain CSS hover-reveal fixes desktop; the top-level link
   was also missing an href entirely (fixed directly in the markup so
   mobile/touch clicking works too, since hover doesn't apply there). */
.menu-item-has-children:hover > .elementor-nav-menu--dropdown,
.menu-item-has-children:hover > ul.sub-menu {
    display: block !important;
}

/* Fix: "Clients We Work With" logo carousel (Elementor image-carousel /
   Swiper) was flickering — same root cause as other client sites: Swiper
   needs its own JS to lay out slides, and without it slides fight each
   other for the same space, causing a flicker/flash. Replaced the whole
   carousel with a plain static grid (see index.php) — no JS, no Swiper,
   so nothing left to flicker. */
.egs-clients-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 24px 40px;
    padding: 20px 0;
}
.egs-clients-grid-item img {
    max-width: 130px;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity .2s ease;
}
.egs-clients-grid-item img:hover {
    opacity: 1;
}

/* Fix: "About Us" / "Our Services" dropdown background was cutting
   through its own text. The plugin's own default CSS hardcodes the
   dropdown to width:12em (192px) regardless of content — way too
   narrow for items like "Digital Marketing & Lead Generation", so
   the text was overflowing past the right edge of the blue background
   box. Widen it and let it size to content instead. */
.elementor-nav-menu--main .elementor-nav-menu ul.elementor-nav-menu--dropdown {
    width: max-content !important;
    min-width: 220px !important;
    max-width: 300px !important;
    left: 0 !important;
    right: auto !important;
}

/* Fix: dropdown vanished while moving the mouse toward it. The page's
   own inline styles put a gap between the nav link and its dropdown
   panel (margin-top, and the dropdown is position:absolute so it
   doesn't extend the parent <li>'s hoverable area into that gap at
   all). Belt-and-suspenders fix: zero out every spacing property that
   could be causing it, AND add an invisible "bridge" pseudo-element
   that extends the hoverable zone to cover the gap completely, so
   the hover chain can never break no matter what's producing the
   space. */
.elementor-nav-menu--dropdown {
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: 100% !important;
}
.menu-item-has-children {
    padding-bottom: 20px !important;
    margin-bottom: -20px !important;
}
.menu-item-has-children > .elementor-nav-menu--dropdown {
    margin-top: -20px !important;
    padding-top: 20px !important;
}

/* Convert the "Clients We Work With" section from a static grid into
   an actual continuously-sliding marquee, per client request — a
   pure-CSS infinite scroll, no JS/Swiper involved so it can't flicker
   or stall. The logo list is duplicated once in the HTML so the loop
   wraps seamlessly; animating exactly -50% moves through one full
   original set before snapping invisibly back to the start. */
.egs-marquee {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.egs-marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 48px;
    animation: egs-marquee-scroll 30s linear infinite;
}
.egs-marquee:hover .egs-marquee-track {
    animation-play-state: paused;
}
.egs-marquee-item {
    flex: 0 0 auto;
}
.egs-marquee-item img {
    max-width: 130px;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.85;
}
@keyframes egs-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}