.elementor-71 .elementor-element.elementor-element-7d488636{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--padding-top:70px;--padding-bottom:10px;--padding-left:20px;--padding-right:20px;}.elementor-71 .elementor-element.elementor-element-11833c10{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;border-style:solid;--border-style:solid;border-width:0px 0px 0px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;--border-radius:40px 40px 40px 40px;--padding-top:48px;--padding-bottom:26px;--padding-left:42px;--padding-right:42px;}.elementor-71 .elementor-element.elementor-element-361aa018{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:-15px;--margin-left:0px;--margin-right:0px;--padding-top:10px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-71 .elementor-element.elementor-element-361aa018.e-con{--align-self:center;}.elementor-71 .elementor-element.elementor-element-621bff1e{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:22px 22px;--row-gap:22px;--column-gap:22px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-71 .elementor-element.elementor-element-d272347.elementor-element{--align-self:center;}.elementor-71 .elementor-element.elementor-element-d272347 img{width:50%;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-71 .elementor-element.elementor-element-28b57d4a{text-align:center;font-family:"PFX1 Font", Sans-serif;font-size:12px;font-weight:400;line-height:1.9em;color:var( --e-global-color-7574741 );}.elementor-71 .elementor-element.elementor-element-686e879{--grid-template-columns:repeat(0, auto);text-align:center;}.elementor-71 .elementor-element.elementor-element-686e879.elementor-element{--align-self:center;}.elementor-71 .elementor-element.elementor-element-7ecde1fd{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:16px 16px;--row-gap:16px;--column-gap:16px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );word-spacing:var( --e-global-typography-primary-word-spacing );color:var( --e-global-color-primary );}.elementor-71 .elementor-element.elementor-element-744b6d07 .elementor-heading-title{font-family:"PFX1 Font", Sans-serif;font-size:18px;font-weight:600;line-height:1.5em;color:var( --e-global-color-a24524e );}.elementor-71 .elementor-element.elementor-element-744b6d07 .elementor-heading-title a:hover, .elementor-71 .elementor-element.elementor-element-744b6d07 .elementor-heading-title a:focus{color:var( --e-global-color-e991d17 );}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-71 .elementor-element.elementor-element-6d618c6 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-71 .elementor-element.elementor-element-6d618c6 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-71 .elementor-element.elementor-element-6d618c6{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-71 .elementor-element.elementor-element-6d618c6 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-71 .elementor-element.elementor-element-6d618c6 .elementor-icon-list-item > a{font-family:"PFX1 Font", Sans-serif;font-size:12px;line-height:2em;}.elementor-71 .elementor-element.elementor-element-6d618c6 .elementor-icon-list-text{color:var( --e-global-color-7574741 );transition:color 0.3s;}.elementor-71 .elementor-element.elementor-element-6d618c6 .elementor-icon-list-item:hover .elementor-icon-list-text{color:var( --e-global-color-486fdd4 );}.elementor-71 .elementor-element.elementor-element-639e71fb{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:16px 16px;--row-gap:16px;--column-gap:16px;}.elementor-71 .elementor-element.elementor-element-5ef8eae4 .elementor-heading-title{font-family:"PFX1 Font", Sans-serif;font-size:18px;font-weight:600;line-height:1.5em;color:var( --e-global-color-a24524e );}.elementor-71 .elementor-element.elementor-element-5ef8eae4 .elementor-heading-title a:hover, .elementor-71 .elementor-element.elementor-element-5ef8eae4 .elementor-heading-title a:focus{color:var( --e-global-color-e991d17 );}.elementor-71 .elementor-element.elementor-element-61a619bc .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-71 .elementor-element.elementor-element-61a619bc .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-71 .elementor-element.elementor-element-61a619bc{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-71 .elementor-element.elementor-element-61a619bc .elementor-icon-list-item > .elementor-icon-list-text, .elementor-71 .elementor-element.elementor-element-61a619bc .elementor-icon-list-item > a{font-family:"PFX1 Font", Sans-serif;font-size:12px;line-height:2em;}.elementor-71 .elementor-element.elementor-element-61a619bc .elementor-icon-list-text{color:var( --e-global-color-7574741 );transition:color 0.3s;}.elementor-71 .elementor-element.elementor-element-61a619bc .elementor-icon-list-item:hover .elementor-icon-list-text{color:var( --e-global-color-486fdd4 );}.elementor-71 .elementor-element.elementor-element-54adcab5{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:0px;--padding-bottom:10px;--padding-left:0px;--padding-right:0px;}.elementor-71 .elementor-element.elementor-element-4204aeaf{width:var( --container-widget-width, 53% );max-width:53%;margin:7px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--container-widget-width:53%;--container-widget-flex-grow:0;font-family:"PFX1 Font", Sans-serif;font-size:12px;color:var( --e-global-color-7bebb59 );}.elementor-71 .elementor-element.elementor-element-c69885{width:var( --container-widget-width, 19% );max-width:19%;margin:7px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--container-widget-width:19%;--container-widget-flex-grow:0;font-family:"PFX1 Font", Sans-serif;font-size:12px;color:var( --e-global-color-7bebb59 );}.elementor-71 .elementor-element.elementor-element-c69885.elementor-element{--align-self:center;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-71 .elementor-element.elementor-element-11833c10{--width:1180px;}.elementor-71 .elementor-element.elementor-element-621bff1e{--width:100%;}.elementor-71 .elementor-element.elementor-element-7ecde1fd{--width:60%;}.elementor-71 .elementor-element.elementor-element-639e71fb{--width:60%;}}@media(max-width:1024px){.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-71 .elementor-element.elementor-element-28b57d4a{font-size:16px;line-height:1.9em;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );word-spacing:var( --e-global-typography-primary-word-spacing );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}@media(max-width:767px){.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-71 .elementor-element.elementor-element-28b57d4a{font-size:15px;line-height:1.9em;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );word-spacing:var( --e-global-typography-primary-word-spacing );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}/* Start custom CSS for container, class: .elementor-element-7d488636 *//* ========================================================= PFX1 FOOTER V5.7 UNIVERSAL PAGE-ACCENT SYNC ORIGINAL FORM / GEOMETRY / RESPONSIVE PRESERVED ELEMENTOR FIRST ========================================================= Elementor owns: - Typography - Normal / Hover text colors - Image / Logo size - Width / Height / Min-height - Margin / Padding / Gap - Alignment - Responsive controls PFX CSS owns: - Default structure - Premium shell - 1180px default width - Social icon visual system - Fixed interaction geometry GLOBAL RULE: NO SCALE NO TRANSLATE NO POSITION MOVEMENT ON HOVER ========================================================= */ /* ========================================================= 01) TOKENS ========================================================= */ .elementor-71 .elementor-element.elementor-element-7d488636 { --pfx-footer-width: 1180px; --pfx-footer-inner: 930px; --pfx-footer-radius: 18px; --pfx-footer-outer-top: 4px; --pfx-footer-outer-x: 12px; --pfx-footer-outer-bottom: 0px; --pfx-footer-shell-top: 14px; --pfx-footer-shell-x: 24px; --pfx-footer-shell-bottom: 6px; --pfx-footer-main-gap: 30px; --pfx-footer-bottom-width: 1040px; --pfx-footer-bottom-top: 6px; --pfx-footer-bottom-padding: 6px; /* Social icons — same family as Header actions */ --pfx-social-size: 36px; --pfx-social-icon-size: 14px; --pfx-social-gap: 7px; --pfx-social-radius: 9px; /* ===================================================== GLOBAL PAGE-THEME CONTRACT Site Settings owns these variables on body: --pfx-accent --pfx-accent-rgb --pfx-accent-deep --pfx-accent-deep-rgb --pfx-accent-highlight --pfx-accent-highlight-rgb --pfx-page-bg Footer only consumes them. It does not define a separate page palette, so Header / Page / Footer always stay synced. ===================================================== */ --pfx-footer-page-bg: var(--pfx-page-bg, #020610); --pfx-footer-accent: var(--pfx-accent, #00B8FF); --pfx-footer-accent-rgb: var(--pfx-accent-rgb, 0, 184, 255); --pfx-footer-accent-deep: var(--pfx-accent-deep, #007BFF); --pfx-footer-accent-deep-rgb: var(--pfx-accent-deep-rgb, 0, 123, 255); --pfx-footer-accent-highlight: var( --pfx-accent-highlight, var(--pfx-accent, #00B8FF) ); --pfx-footer-accent-highlight-rgb: var( --pfx-accent-highlight-rgb, var(--pfx-accent-rgb, 0, 184, 255) ); --pfx-footer-theme-gradient: linear-gradient( 105deg, var(--pfx-footer-accent) 0%, var(--pfx-footer-accent-deep) 62%, var(--pfx-footer-accent-highlight) 100% ); --pfx-white: #FFFFFF; --pfx-text: #D6E3F3; --pfx-muted: #8FA6BF; --pfx-bg-1: rgba(4, 13, 22, .97); --pfx-bg-2: rgba(2, 7, 14, .995); --pfx-footer-surface-rest: var(--pfx-footer-surface-rest); --pfx-border: rgba(var(--pfx-footer-accent-deep-rgb), .42); --pfx-border-hover: rgba(var(--pfx-footer-accent-highlight-rgb), .76); --pfx-border-soft: rgba(var(--pfx-footer-accent-deep-rgb), .30); } /* ========================================================= 02) SAFE BASE ========================================================= */ .elementor-71 .elementor-element.elementor-element-7d488636, .elementor-71 .elementor-element.elementor-element-7d488636 * { box-sizing: border-box; } .elementor-71 .elementor-element.elementor-element-7d488636 img { max-width: 100%; height: auto; } /* ========================================================= 03) ROOT ========================================================= */ .elementor-71 .elementor-element.elementor-element-7d488636 { width: 100%; margin: 0; padding: var(--pfx-footer-outer-top) var(--pfx-footer-outer-x) var(--pfx-footer-outer-bottom); direction: rtl; background: transparent !important; background-color: transparent !important; background-image: none !important; } /* ========================================================= 04) PREMIUM SHELL ========================================================= */ .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-shell) { width: min(100%, var(--pfx-footer-width)); margin-inline: auto; padding: var(--pfx-footer-shell-top) var(--pfx-footer-shell-x) var(--pfx-footer-shell-bottom); position: relative; border: 1px solid var(--pfx-border); border-radius: var(--pfx-footer-radius); background: radial-gradient( 620px 230px at 94% -8%, rgba(var(--pfx-footer-accent-rgb), .18), transparent 70% ), radial-gradient( 520px 230px at 58% -18%, rgba(var(--pfx-footer-accent-deep-rgb), .13), transparent 72% ), radial-gradient( 500px 220px at 4% 112%, rgba(var(--pfx-footer-accent-highlight-rgb), .085), transparent 74% ), linear-gradient( 180deg, rgba(var(--pfx-footer-accent-rgb), .035), rgba(var(--pfx-footer-accent-deep-rgb), .018) ), linear-gradient( 180deg, var(--pfx-bg-1), var(--pfx-bg-2) ); box-shadow: inset 0 1px 0 rgba(255,255,255,.065), inset 0 -1px 0 rgba(var(--pfx-footer-accent-deep-rgb),.025), 0 14px 34px rgba(0,0,0,.24), 0 0 20px rgba(var(--pfx-footer-accent-rgb),.07), 0 0 34px rgba(var(--pfx-footer-accent-deep-rgb),.065), 0 0 44px rgba(var(--pfx-footer-accent-highlight-rgb),.035); overflow: hidden; isolation: isolate; transform: none !important; transition-property: border-color, box-shadow, background-color, background-image; transition-duration: 180ms; transition-timing-function: ease; } /* Shell interaction: brighter accent only — no movement, no scale */ .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-shell):hover, .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-shell):focus-within { transform: none !important; border-color: var(--pfx-border-hover); box-shadow: inset 0 1px 0 rgba(255,255,255,.085), inset 0 -1px 0 rgba(var(--pfx-footer-accent-deep-rgb),.035), 0 14px 34px rgba(0,0,0,.24), 0 0 22px rgba(var(--pfx-footer-accent-rgb),.17), 0 0 42px rgba(var(--pfx-footer-accent-deep-rgb),.13), 0 0 58px rgba(var(--pfx-footer-accent-highlight-rgb),.065); } /* ========================================================= 05) PREMIUM TOP LIGHT ========================================================= */ .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-shell)::before { content: ""; position: absolute; top: 0; left: 13%; right: 13%; height: 1px; pointer-events: none; background: linear-gradient( 90deg, transparent, var(--pfx-footer-accent), rgba(255,255,255,.20), var(--pfx-footer-accent-deep), var(--pfx-footer-accent-highlight), transparent ); box-shadow: 0 0 12px rgba(var(--pfx-footer-accent-rgb),.16), 0 0 20px rgba(var(--pfx-footer-accent-deep-rgb),.11), 0 0 28px rgba(var(--pfx-footer-accent-highlight-rgb),.055); } /* Subtle texture */ .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-shell)::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .016; background-image: linear-gradient( rgba(255,255,255,.03) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.03) 1px, transparent 1px ); background-size: 78px 78px; } /* ========================================================= 06) MAIN CONTENT ========================================================= */ .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-main) { width: min(100%, var(--pfx-footer-inner)); margin-inline: auto; min-width: 0; position: relative; background: transparent; } /* ========================================================= 07) DESKTOP DEFAULT LAYOUT ========================================================= */ @media (min-width: 1025px) { .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-main) { display: flex; flex-direction: row; justify-content: center; align-items: flex-start; gap: var(--pfx-footer-main-gap); } .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-brand) { width: 300px; } .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-links-col) { width: 185px; } .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-legal-col) { width: 225px; } } /* ========================================================= 08) COLUMN DIVIDERS ========================================================= */ @media (min-width: 1025px) { .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-links-col), .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-legal-col) { position: relative; } .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-links-col)::before, .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-legal-col)::before { content: ""; position: absolute; top: 4px; bottom: 4px; right: -15px; width: 1px; pointer-events: none; background: linear-gradient( 180deg, transparent, rgba(var(--pfx-footer-accent-rgb), .10), rgba(var(--pfx-footer-accent-deep-rgb), .13), rgba(var(--pfx-footer-accent-highlight-rgb), .08), transparent ); } } /* ========================================================= 09) LOGO SIZE / ALIGNMENT = ELEMENTOR ========================================================= */ .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-logo img) { height: auto; object-fit: contain; filter: drop-shadow( 0 0 10px rgba(var(--pfx-footer-accent-rgb), .18) ) drop-shadow( 0 0 17px rgba(var(--pfx-footer-accent-deep-rgb), .10) ) drop-shadow( 0 0 23px rgba(var(--pfx-footer-accent-highlight-rgb), .045) ); } /* ========================================================= 10) BRAND DESCRIPTION ========================================================= */ .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-desc p) { margin-block: 0; } /* ========================================================= 11) TITLES FULL ELEMENTOR CONTROL ========================================================= */ /* pfx-footer-title Elementor controls: Font Size Weight Line Height Color Hover Padding Margin Alignment */ /* Dynamic section color for footer headings */ .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-title .elementor-heading-title) { color: var(--pfx-footer-accent) !important; text-shadow: 0 0 12px rgba(var(--pfx-footer-accent-rgb), .12), 0 0 20px rgba(var(--pfx-footer-accent-deep-rgb), .055); transition: color 180ms ease, text-shadow 180ms ease; } /* ========================================================= 12) ICON LIST FULL ELEMENTOR CONTROL ========================================================= */ .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-list) { width: 100%; } .elementor-71 .elementor-element.elementor-element-7d488636 :where( .pfx-footer-list .elementor-icon-list-items ) { margin: 0; padding: 0; } .elementor-71 .elementor-element.elementor-element-7d488636 :where( .pfx-footer-list .elementor-icon-list-text a ) { color: inherit; font: inherit; text-decoration: inherit; } /* Normal link color remains controlled by Elementor. Interaction color follows the active section accent. */ .elementor-71 .elementor-element.elementor-element-7d488636 :where( .pfx-footer-list a, .pfx-footer-copy a, .pfx-footer-credit a ):hover, .elementor-71 .elementor-element.elementor-element-7d488636 :where( .pfx-footer-list a, .pfx-footer-copy a, .pfx-footer-credit a ):focus-visible { color: var(--pfx-footer-accent) !important; text-shadow: 0 0 10px rgba(var(--pfx-footer-accent-rgb), .18), 0 0 18px rgba(var(--pfx-footer-accent-deep-rgb), .10), 0 0 24px rgba(var(--pfx-footer-accent-highlight-rgb), .05); } /* Current-page links use the same page accent without changing geometry. */ .elementor-71 .elementor-element.elementor-element-7d488636 :where( .pfx-footer-list .current-menu-item > a, .pfx-footer-list .current-menu-ancestor > a, .pfx-footer-list a[aria-current="page"], .pfx-footer-copy a[aria-current="page"], .pfx-footer-credit a[aria-current="page"] ) { color: var(--pfx-footer-accent) !important; text-shadow: 0 0 10px rgba(var(--pfx-footer-accent-rgb), .20), 0 0 18px rgba(var(--pfx-footer-accent-deep-rgb), .11), 0 0 26px rgba(var(--pfx-footer-accent-highlight-rgb), .055); } /* ========================================================= 13) SOCIAL ICON WRAPPER ========================================================= */ .elementor-71 .elementor-element.elementor-element-7d488636 :where( .pfx-footer-socials .elementor-social-icons-wrapper ) { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: var(--pfx-social-gap); } /* ========================================================= 14) SOCIAL ICONS SAME VISUAL LANGUAGE AS HEADER ACTION ICONS ========================================================= */ .elementor-71 .elementor-element.elementor-element-7d488636 .pfx-footer-socials .elementor-social-icon { /* FIXED DEFAULT GEOMETRY Prevents every network having a different size. */ width: var(--pfx-social-size); min-width: var(--pfx-social-size); max-width: var(--pfx-social-size); height: var(--pfx-social-size); min-height: var(--pfx-social-size); max-height: var(--pfx-social-size); flex: 0 0 var(--pfx-social-size); display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0; color: var(--pfx-text); background-color: rgba(4, 14, 24, .92); background-image: radial-gradient( circle at 50% 0%, rgba(var(--pfx-footer-accent-rgb), .075), transparent 62% ), linear-gradient( 180deg, rgba(10, 24, 38, .94), rgba(3, 11, 20, .92) ); border: 1px solid var(--pfx-border-soft); border-radius: var(--pfx-social-radius); box-shadow: inset 0 1px 0 rgba(255,255,255,.065), 0 0 10px rgba(var(--pfx-footer-accent-rgb),.035); overflow: hidden; vertical-align: middle; transform: none; transition-property: color, background-color, background-image, border-color, box-shadow; transition-duration: 180ms; transition-timing-function: ease; } /* ========================================================= 15) REMOVE BRAND-SPECIFIC BACKGROUNDS ========================================================= */ .elementor-71 .elementor-element.elementor-element-7d488636 .pfx-footer-socials .elementor-social-icon-facebook, .elementor-71 .elementor-element.elementor-element-7d488636 .pfx-footer-socials .elementor-social-icon-facebook-f, .elementor-71 .elementor-element.elementor-element-7d488636 .pfx-footer-socials .elementor-social-icon-instagram, .elementor-71 .elementor-element.elementor-element-7d488636 .pfx-footer-socials .elementor-social-icon-youtube, .elementor-71 .elementor-element.elementor-element-7d488636 .pfx-footer-socials .elementor-social-icon-twitter, .elementor-71 .elementor-element.elementor-element-7d488636 .pfx-footer-socials .elementor-social-icon-x-twitter, .elementor-71 .elementor-element.elementor-element-7d488636 .pfx-footer-socials .elementor-social-icon-telegram, .elementor-71 .elementor-element.elementor-element-7d488636 .pfx-footer-socials .elementor-social-icon-linkedin, .elementor-71 .elementor-element.elementor-element-7d488636 .pfx-footer-socials .elementor-social-icon-discord, .elementor-71 .elementor-element.elementor-element-7d488636 .pfx-footer-socials .elementor-social-icon-whatsapp { background-color: rgba(4, 14, 24, .92); background-image: radial-gradient( circle at 50% 0%, rgba(var(--pfx-footer-accent-rgb), .075), transparent 62% ), linear-gradient( 180deg, rgba(10, 24, 38, .94), rgba(3, 11, 20, .92) ); color: var(--pfx-text); } /* ========================================================= 16) SOCIAL ICON GLYPH ========================================================= */ .elementor-71 .elementor-element.elementor-element-7d488636 .pfx-footer-socials .elementor-social-icon i { width: var(--pfx-social-icon-size); height: var(--pfx-social-icon-size); line-height: var(--pfx-social-icon-size); font-size: var(--pfx-social-icon-size); display: inline-flex; align-items: center; justify-content: center; color: currentColor; margin: 0; padding: 0; transform: none; } .elementor-71 .elementor-element.elementor-element-7d488636 .pfx-footer-socials .elementor-social-icon svg { width: var(--pfx-social-icon-size); height: var(--pfx-social-icon-size); min-width: var(--pfx-social-icon-size); max-width: var(--pfx-social-icon-size); min-height: var(--pfx-social-icon-size); max-height: var(--pfx-social-icon-size); display: block; fill: currentColor; color: currentColor; margin: 0; padding: 0; transform: none; } /* ========================================================= 17) SOCIAL HOVER ABSOLUTELY NO MOVEMENT ========================================================= */ .elementor-71 .elementor-element.elementor-element-7d488636 .pfx-footer-socials .elementor-social-icon:hover, .elementor-71 .elementor-element.elementor-element-7d488636 .pfx-footer-socials .elementor-social-icon:focus-visible, .elementor-71 .elementor-element.elementor-element-7d488636 .pfx-footer-socials .elementor-social-icon:active { animation: none !important; translate: none !important; rotate: none !important; scale: 1 !important; width: var(--pfx-social-size); height: var(--pfx-social-size); min-width: var(--pfx-social-size); min-height: var(--pfx-social-size); max-width: var(--pfx-social-size); max-height: var(--pfx-social-size); flex-basis: var(--pfx-social-size); transform: none !important; color: var(--pfx-white); border-color: rgba(var(--pfx-footer-accent-highlight-rgb), .76); background-color: rgba(7, 24, 40, .96); background-image: radial-gradient( circle at 50% 0%, rgba(255,255,255,.18), transparent 48% ), var(--pfx-footer-theme-gradient); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 16px rgba(var(--pfx-footer-accent-rgb), .18), 0 0 28px rgba(var(--pfx-footer-accent-deep-rgb), .14), 0 0 38px rgba(var(--pfx-footer-accent-highlight-rgb), .07); } /* Kill Elementor hover animation movement */ .elementor-71 .elementor-element.elementor-element-7d488636 .pfx-footer-socials .elementor-social-icon:hover i, .elementor-71 .elementor-element.elementor-element-7d488636 .pfx-footer-socials .elementor-social-icon:hover svg, .elementor-71 .elementor-element.elementor-element-7d488636 .pfx-footer-socials .elementor-social-icon:focus-visible i, .elementor-71 .elementor-element.elementor-element-7d488636 .pfx-footer-socials .elementor-social-icon:focus-visible svg { transform: none !important; } /* ========================================================= 18) BOTTOM BAR ========================================================= */ .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-bottom) { width: min(100%, var(--pfx-footer-bottom-width)); margin: var(--pfx-footer-bottom-top) auto 0; padding-top: var(--pfx-footer-bottom-padding); display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid rgba(var(--pfx-footer-accent-deep-rgb), .16); } /* Elementor still controls: Width Height Margin Padding Gap Alignment */ .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-copy p), .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-credit p) { margin: 0; padding: 0; } .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-copy a), .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-credit a) { color: inherit; font: inherit; text-decoration: inherit; } /* ========================================================= 19) TABLET ========================================================= */ @media (min-width: 768px) and (max-width: 1024px) { .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-main) { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 26px; } .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-brand) { grid-column: 1 / -1; width: auto; } .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-links-col), .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-legal-col) { width: auto; } .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-links-col)::before, .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-legal-col)::before { display: none; } } /* ========================================================= 20) MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-71 .elementor-element.elementor-element-7d488636 { --pfx-footer-outer-x: 8px; --pfx-footer-shell-top: 12px; --pfx-footer-shell-x: 14px; --pfx-footer-shell-bottom: 5px; --pfx-footer-radius: 15px; --pfx-social-size: 36px; --pfx-social-icon-size: 14px; } .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-shell) { width: 100%; } .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-main) { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 16px; } .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-brand), .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-links-col), .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-legal-col) { width: auto; } .elementor-71 .elementor-element.elementor-element-7d488636 :where(.pfx-footer-bottom) { width: 100%; flex-direction: column; align-items: flex-start; gap: 3px; margin-top: 5px; padding-top: 5px; } } /* ========================================================= 21) EDITOR SAFETY ========================================================= */ body.elementor-editor-active .elementor-71 .elementor-element.elementor-element-7d488636 .pfx-footer-shell::before, body.elementor-editor-active .elementor-71 .elementor-element.elementor-element-7d488636 .pfx-footer-shell::after { display: none; } /* ========================================================= 22) ACCESSIBILITY ========================================================= */ .elementor-71 .elementor-element.elementor-element-7d488636 :where(a:focus-visible) { outline: 2px solid var(--pfx-footer-accent-highlight); outline-offset: 3px; } /* ========================================================= 23) PAGE COLOR BEHAVIOR Example: When Site Settings assigns the course page: --pfx-accent: #24C2FF; --pfx-accent-deep: #3568FF; --pfx-accent-highlight: #6C5CFF; This footer automatically changes: - Shell border and glow - Top light - Background accent tint - Column dividers - Heading colors - Link hover/current states - Social icon hover/focus - Bottom divider and focus outline Footer form, dimensions and responsive layout stay unchanged. ========================================================= */ /* ========================================================= 24) REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-71 .elementor-element.elementor-element-7d488636 *, .elementor-71 .elementor-element.elementor-element-7d488636 *::before, .elementor-71 .elementor-element.elementor-element-7d488636 *::after { transition-duration: .01ms; animation-duration: .01ms; } } /* ========================================================= END — PFX1 FOOTER V5.7 UNIVERSAL PAGE-ACCENT ========================================================= *//* End custom CSS */