/* LNTA Footer Style — cosmetic overrides only. Every selector is scoped under `footer` so nothing outside the site footer (e.g. other pages using the same FontAwesome/Elementor classes) is affected. No existing markup is altered, only repainted. */ /* ---- Brand ticker (new, injected right above the footer) ---- */ .lnta-brand-ticker { background: #021f07; overflow: hidden; white-space: nowrap; padding-block: 0.85rem; border-bottom: 1px solid rgba(240, 168, 24, 0.25); } .lnta-brand-ticker__track { display: inline-flex; align-items: center; animation: lnta-ticker-scroll 28s linear infinite; } .lnta-brand-ticker__item { display: inline-block; font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 1rem; letter-spacing: 0.03em; text-transform: uppercase; color: #ffffff; padding-inline: 1.5rem; } .lnta-brand-ticker__dot { color: #f0a818; font-size: 0.5rem; vertical-align: middle; } @keyframes lnta-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .lnta-brand-ticker__track { animation: none; } } /* ---- Footer logo: shrink from the raw 751x681 upload down to a small circular badge, and lay it out beside the brand-name text that lnta-footer-style.php's footer.js appends next to it. ---- */ footer .elementor-element-81df7cc img { width: 96px !important; height: 96px !important; max-width: 96px !important; object-fit: cover; border-radius: 50%; margin: 0; } footer .elementor-element-81df7cc .elementor-widget-container { display: flex !important; align-items: center !important; gap: 0.85rem !important; } .lnta-footer-brand-name { font-family: "Montserrat", sans-serif; color: #ffffff; font-weight: 700; font-size: 1.15rem; line-height: 1.3; } /* ---- Rebuild the footer row as a real 3-column grid, matching the offline reference layout: logo, description, and social icons are flat siblings in the markup, so they're explicitly stacked into column 1 (row 1/2/3); Useful Links and Get In Touch each get their own full-height column. Nothing in the HTML/Elementor data changes — this only changes how the existing 5 widgets are positioned. ---- */ footer .elementor-element-68fc584 > .e-con-inner { display: grid !important; grid-template-columns: 1.6fr 1fr 1fr !important; column-gap: 2.5rem !important; row-gap: 1rem !important; align-items: start !important; } /* Elementor's own inline styles set --padding-bottom:0px on this container, so whatever sits at the bottom of the grid (the social icons) touches the divider/copyright bar directly below it. Scoped to the top section specifically (541de88), not the outer 2429f76 wrapper — that wrapper also contains the copyright bar as a sibling, so padding there pushed empty space below the copyright line instead of just above the divider. */ footer .elementor-element-541de88 { padding-bottom: 2.5rem !important; } footer .elementor-element-9dd6063 { margin-bottom: 0.5rem; } footer .elementor-element-81df7cc, footer .elementor-element-986f25b, footer .elementor-element-9dd6063, footer .elementor-element-0284c90, footer .elementor-element-2b2dcf8 { width: 100% !important; max-width: 100% !important; flex-shrink: initial !important; flex-grow: initial !important; text-align: left !important; } footer .elementor-element-81df7cc { grid-column: 1 !important; grid-row: 1 !important; } footer .elementor-element-986f25b { grid-column: 1 !important; grid-row: 2 !important; } footer .elementor-element-9dd6063 { grid-column: 1 !important; grid-row: 3 !important; } footer .elementor-element-9dd6063 a.fa { margin: 0 8px 0 0; } footer .elementor-element-0284c90 { grid-column: 2 !important; grid-row: 1 / span 3 !important; } footer .elementor-element-2b2dcf8 { grid-column: 3 !important; grid-row: 1 / span 3 !important; } @media (max-width: 767px) { footer .elementor-element-68fc584 > .e-con-inner { grid-template-columns: 1fr !important; } footer .elementor-element-81df7cc { grid-column: 1 !important; grid-row: 1 !important; } footer .elementor-element-986f25b { grid-column: 1 !important; grid-row: 2 !important; } footer .elementor-element-9dd6063 { grid-column: 1 !important; grid-row: 3 !important; } footer .elementor-element-0284c90 { grid-column: 1 !important; grid-row: 4 !important; } footer .elementor-element-2b2dcf8 { grid-column: 1 !important; grid-row: 5 !important; } } /* ---- Footer widget headings: gold underline accent ---- */ footer .widget_title, footer .th-widget-contact .title { position: relative; padding-bottom: 0.6rem; margin-bottom: 1rem !important; /* "Useful Links" already had its own inline Montserrat rule from Elementor; "Get In Touch" (tourmcontactinfo widget) never got one and was rendering in Manrope instead. */ font-family: "Montserrat", sans-serif !important; } footer .widget_title::after { content: '' !important; display: block !important; position: absolute !important; left: 0; bottom: 0; width: 36px; height: 3px; background: linear-gradient(135deg, #f4c15c 0%, #f0a818 100%); border-radius: 2px; } /* ---- Footer menu links: gold hover ---- */ footer .menu a, footer .footer-widget a { transition: color 0.2s ease; } footer .menu a:hover, footer .footer-widget a:hover { color: #f4c15c !important; } /* ---- Social icons: circle buttons with gold hover fill. These are raw with inline styles, so !important is required to override them from a stylesheet. ---- */ footer a.fa { display: inline-flex !important; align-items: center; justify-content: center; width: 38px !important; height: 38px !important; font-size: 16px !important; padding: 0 !important; margin: 0 4px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; color: #ffffff !important; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease; } /* These icons use the old Font Awesome 4 single-class convention ("fa fa-facebook" instead of FA5/6's "fa-brands fa-facebook"). They used to render correctly only because a stray FA4 stylesheet (unified brand+solid glyphs in one font) happened to also be loaded on this page; removing that dead-weight stylesheet for performance exposed that the theme's own modern Font Awesome CSS deliberately zeroes out `content` for icon classes used without their required style prefix (its own icon-usage optimizer never sees "fa-facebook" written this way as "in use"), leaving these 4 icons with no glyph at all. Setting both the correct Brands font-family and the exact codepoint each one already uses elsewhere in that same stylesheet restores them with no added weight, instead of restoring the old library just for 4 icons. */ footer a.fa { font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; } footer a.fa-facebook::before { content: "\f09a" !important; } footer a.fa-instagram::before { content: "\f16d" !important; } footer a.fa-linkedin::before { content: "\f08c" !important; } footer a.fa-youtube::before { content: "\f167" !important; } footer a.fa:hover { border-color: #f0a818; background: #f0a818; color: #032902 !important; transform: translateY(-3px); } /* ---- Contact icons (phone/email/location): match the same circular bordered badge as the social icons above, instead of the filled light-blue circles the widget renders by default. These are plain icons (not a font/inline-SVG), so recoloring them white uses a brightness/invert filter rather than a color property. ---- */ footer .th-widget-contact .icon { width: 38px !important; height: 38px !important; background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; border-radius: 50% !important; display: flex !important; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; } footer .th-widget-contact .icon img { width: 16px !important; height: 16px !important; filter: brightness(0) invert(1); } footer .th-widget-contact .info-box_text:hover .icon { border-color: #f0a818 !important; background: #f0a818 !important; transform: translateY(-3px); }