.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before, .elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-1440 .elementor-element.elementor-element-ec2901c .elementor-menu-toggle{margin:0 auto;}.elementor-1440 .elementor-element.elementor-element-ec2901c .elementor-nav-menu .elementor-item{font-family:"Oswald", Sans-serif;font-size:0.9rem;font-weight:400;}.elementor-1440 .elementor-element.elementor-element-ec2901c .elementor-nav-menu--main .elementor-item{color:#FFFFFF;fill:#FFFFFF;}.elementor-1440 .elementor-element.elementor-element-ec2901c .elementor-nav-menu--main .elementor-item:hover, .elementor-1440 .elementor-element.elementor-element-ec2901c .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-1440 .elementor-element.elementor-element-ec2901c .elementor-nav-menu--main .elementor-item.highlighted, .elementor-1440 .elementor-element.elementor-element-ec2901c .elementor-nav-menu--main .elementor-item:focus{color:#7ADD1F;fill:#7ADD1F;}.elementor-1440 .elementor-element.elementor-element-ec2901c .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-1440 .elementor-element.elementor-element-ec2901c .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:#FFFFFF;}.elementor-1440 .elementor-element.elementor-element-ec2901c .e--pointer-framed .elementor-item:before, .elementor-1440 .elementor-element.elementor-element-ec2901c .e--pointer-framed .elementor-item:after{border-color:#FFFFFF;}.elementor-1440 .elementor-element.elementor-element-ec2901c .e--pointer-framed .elementor-item:before{border-width:1px;}.elementor-1440 .elementor-element.elementor-element-ec2901c .e--pointer-framed.e--animation-draw .elementor-item:before{border-width:0 0 1px 1px;}.elementor-1440 .elementor-element.elementor-element-ec2901c .e--pointer-framed.e--animation-draw .elementor-item:after{border-width:1px 1px 0 0;}.elementor-1440 .elementor-element.elementor-element-ec2901c .e--pointer-framed.e--animation-corners .elementor-item:before{border-width:1px 0 0 1px;}.elementor-1440 .elementor-element.elementor-element-ec2901c .e--pointer-framed.e--animation-corners .elementor-item:after{border-width:0 1px 1px 0;}.elementor-1440 .elementor-element.elementor-element-ec2901c .e--pointer-underline .elementor-item:after, .elementor-1440 .elementor-element.elementor-element-ec2901c .e--pointer-overline .elementor-item:before, .elementor-1440 .elementor-element.elementor-element-ec2901c .e--pointer-double-line .elementor-item:before, .elementor-1440 .elementor-element.elementor-element-ec2901c .e--pointer-double-line .elementor-item:after{height:1px;}.elementor-1440 .elementor-element.elementor-element-ec2901c{--e-nav-menu-horizontal-menu-item-margin:calc( 30px / 2 );}.elementor-1440 .elementor-element.elementor-element-ec2901c .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:30px;}.elementor-1440 .elementor-element.elementor-element-ec2901c .elementor-nav-menu--dropdown a, .elementor-1440 .elementor-element.elementor-element-ec2901c .elementor-menu-toggle{color:#FFFFFF;fill:#FFFFFF;}.elementor-1440 .elementor-element.elementor-element-ec2901c .elementor-nav-menu--dropdown{background-color:#121212;border-style:solid;border-color:#4E4E4E;}.elementor-1440 .elementor-element.elementor-element-ec2901c .elementor-nav-menu--dropdown .elementor-item, .elementor-1440 .elementor-element.elementor-element-ec2901c .elementor-nav-menu--dropdown .elementor-sub-item{font-family:"Roboto", Sans-serif;font-weight:500;}.elementor-1440 .elementor-element.elementor-element-ec2901c .elementor-nav-menu--dropdown li:not(:last-child){border-style:solid;border-color:#4E4E4E;border-bottom-width:1px;}.elementor-1440 .elementor-element.elementor-element-ec2901c div.elementor-menu-toggle{color:#FFFFFF;}.elementor-1440 .elementor-element.elementor-element-ec2901c div.elementor-menu-toggle svg{fill:#FFFFFF;}.elementor-widget-lottie{--caption-color:var( --e-global-color-text );}.elementor-widget-lottie .e-lottie__caption{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-1440 .elementor-element.elementor-element-ae40f5f{--lottie-container-width:75px;}.elementor-1440 .elementor-element.elementor-element-063b8ce{--lottie-container-width:75px;}.elementor-1440 .elementor-element.elementor-element-ba98b23{--lottie-container-width:75px;}.elementor-1440 .elementor-element.elementor-element-1e2a798{--lottie-container-width:75px;}.elementor-1440 .elementor-element.elementor-element-294373e{--lottie-container-width:103px;}.elementor-1440 .elementor-element.elementor-element-34fd640{--lottie-container-width:103px;}.elementor-1440 .elementor-element.elementor-element-29a053e{--lottie-container-width:103px;}.elementor-1440 .elementor-element.elementor-element-460b71b{--lottie-container-width:103px;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-1440 .elementor-element.elementor-element-cdd8cb8{--divider-border-style:solid;--divider-color:#FFFFFF;--divider-border-width:2px;}.elementor-1440 .elementor-element.elementor-element-cdd8cb8 .elementor-divider-separator{width:131px;margin:0 auto;margin-left:0;}.elementor-1440 .elementor-element.elementor-element-cdd8cb8 .elementor-divider{text-align:left;padding-block-start:30px;padding-block-end:30px;}.elementor-1440 .elementor-element.elementor-element-f20c86d{--divider-border-style:solid;--divider-color:#7ADD1F;--divider-border-width:2px;}.elementor-1440 .elementor-element.elementor-element-f20c86d .elementor-divider-separator{width:131px;margin:0 auto;margin-center:0;}.elementor-1440 .elementor-element.elementor-element-f20c86d .elementor-divider{text-align:center;padding-block-start:2px;padding-block-end:2px;}.elementor-1440 .elementor-element.elementor-element-8fd644a{background-color:#000000;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:5px 0px 0px 0px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#FFFFFF;border-radius:6px 6px 6px 6px;--lottie-container-width:75px;}.elementor-1440 .elementor-element.elementor-element-8fd644a .e-lottie__container{filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-1440 .elementor-element.elementor-element-00bb78a{background-color:#000000;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:5px 0px 0px 0px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#FFFFFF;border-radius:6px 6px 6px 6px;--lottie-container-width:75px;}.elementor-1440 .elementor-element.elementor-element-00bb78a .e-lottie__container{filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-1440 .elementor-element.elementor-element-57fb9e5{background-color:#000000;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:5px 0px 0px 0px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#FFFFFF;border-radius:6px 6px 6px 6px;--lottie-container-width:75px;}.elementor-1440 .elementor-element.elementor-element-57fb9e5 .e-lottie__container{filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-1440 .elementor-element.elementor-element-c8f3f99{background-color:#000000;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:5px 0px 0px 0px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#FFFFFF;border-radius:6px 6px 6px 6px;--lottie-container-width:75px;}.elementor-1440 .elementor-element.elementor-element-c8f3f99 .e-lottie__container{filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-1440 .elementor-element.elementor-element-92be7d7{--divider-border-style:solid;--divider-color:#7ADD1F;--divider-border-width:2px;}.elementor-1440 .elementor-element.elementor-element-92be7d7 .elementor-divider-separator{width:131px;margin:0 auto;margin-center:0;}.elementor-1440 .elementor-element.elementor-element-92be7d7 .elementor-divider{text-align:center;padding-block-start:2px;padding-block-end:2px;}.elementor-1440 .elementor-element.elementor-element-c1f704d{width:var( --container-widget-width, 980px );max-width:980px;--container-widget-width:980px;--container-widget-flex-grow:0;}.elementor-1440 .elementor-element.elementor-element-904ccf4{--lottie-container-width:75px;}.elementor-1440 .elementor-element.elementor-element-31a1b7d{--lottie-container-width:75px;}.elementor-1440 .elementor-element.elementor-element-ec9cdbc{--lottie-container-width:75px;}.elementor-1440 .elementor-element.elementor-element-20c2e7a{--lottie-container-width:75px;}.elementor-1440 .elementor-element.elementor-element-71825e3{--lottie-container-width:75px;}.elementor-1440 .elementor-element.elementor-element-870a446{--lottie-container-width:75px;}.elementor-1440 .elementor-element.elementor-element-c31c328{--lottie-container-width:75px;}.elementor-1440 .elementor-element.elementor-element-440a7fb{--lottie-container-width:75px;}.elementor-1440 .elementor-element.elementor-element-99c906e{--lottie-container-width:75px;}.elementor-1440 .elementor-element.elementor-element-5e4dd57{background-color:#0000007D;padding:10px 10px 12px 13px;border-style:solid;border-width:2px 2px 2px 2px;border-color:#7ADD1F;border-radius:100px 100px 100px 100px;--lottie-container-width:70px;}.elementor-1440 .elementor-element.elementor-element-62b05cf{background-color:#0000007D;padding:10px 10px 10px 10px;border-style:solid;border-width:2px 2px 2px 2px;border-color:#7ADD1F;border-radius:100px 100px 100px 100px;--lottie-container-width:70px;}.elementor-1440 .elementor-element.elementor-element-d8d01ac{background-color:#0000007D;padding:10px 10px 10px 10px;border-style:solid;border-width:2px 2px 2px 2px;border-color:#7ADD1F;border-radius:100px 100px 100px 100px;--lottie-container-width:70px;}@media(max-width:1250px){.elementor-1440 .elementor-element.elementor-element-294373e{--lottie-container-width:75px;}.elementor-1440 .elementor-element.elementor-element-34fd640{--lottie-container-width:75px;}.elementor-1440 .elementor-element.elementor-element-29a053e{--lottie-container-width:75px;}.elementor-1440 .elementor-element.elementor-element-460b71b{--lottie-container-width:75px;}.elementor-1440 .elementor-element.elementor-element-cdd8cb8 .elementor-divider{text-align:center;}.elementor-1440 .elementor-element.elementor-element-cdd8cb8 .elementor-divider-separator{margin:0 auto;margin-center:0;}.elementor-1440 .elementor-element.elementor-element-8fd644a{--lottie-container-width:60px;}.elementor-1440 .elementor-element.elementor-element-00bb78a{--lottie-container-width:60px;}.elementor-1440 .elementor-element.elementor-element-57fb9e5{--lottie-container-width:60px;}.elementor-1440 .elementor-element.elementor-element-c8f3f99{--lottie-container-width:60px;}.elementor-1440 .elementor-element.elementor-element-c1f704d{width:initial;max-width:initial;}.elementor-1440 .elementor-element.elementor-element-5e4dd57{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}}@media(max-width:767px){.elementor-1440 .elementor-element.elementor-element-ec2901c .elementor-nav-menu--dropdown{border-width:1px 1px 1px 1px;}.elementor-1440 .elementor-element.elementor-element-ec2901c .elementor-nav-menu--dropdown a{padding-top:16px;padding-bottom:16px;}.elementor-1440 .elementor-element.elementor-element-cdd8cb8 .elementor-divider{text-align:center;}.elementor-1440 .elementor-element.elementor-element-cdd8cb8 .elementor-divider-separator{margin:0 auto;margin-center:0;}.elementor-1440 .elementor-element.elementor-element-8fd644a{--lottie-container-width:50px;}.elementor-1440 .elementor-element.elementor-element-00bb78a{--lottie-container-width:50px;}.elementor-1440 .elementor-element.elementor-element-57fb9e5{--lottie-container-width:50px;}.elementor-1440 .elementor-element.elementor-element-c8f3f99{--lottie-container-width:50px;}.elementor-1440 .elementor-element.elementor-element-c1f704d{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-1440 .elementor-element.elementor-element-904ccf4{--lottie-container-width:75px;}.elementor-1440 .elementor-element.elementor-element-31a1b7d{--lottie-container-width:75px;}.elementor-1440 .elementor-element.elementor-element-ec9cdbc{--lottie-container-width:75px;}.elementor-1440 .elementor-element.elementor-element-20c2e7a{--lottie-container-width:75px;}.elementor-1440 .elementor-element.elementor-element-71825e3{--lottie-container-width:75px;}.elementor-1440 .elementor-element.elementor-element-870a446{--lottie-container-width:75px;}.elementor-1440 .elementor-element.elementor-element-c31c328{--lottie-container-width:75px;}.elementor-1440 .elementor-element.elementor-element-440a7fb{--lottie-container-width:75px;}.elementor-1440 .elementor-element.elementor-element-99c906e{--lottie-container-width:75px;}}/* Start custom CSS for html, class: .elementor-element-c1f704d *//* ========================================================= ABOUT-IDEALS-VIDEO COMPLETE CUSTOM VIMEO PLAYER ========================================================= */ #ABOUT-IDEALS-VIDEO { --frame-padding: 1rem; --accent-inset: 0.5rem; --accent-width: 2px; position: relative; isolation: isolate; width: 100%; max-width: 100%; min-width: 0; margin-left: auto; margin-right: auto; padding: var(--frame-padding); box-sizing: border-box; align-self: center; overflow: visible; background: rgba(5, 6, 5, 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid #7ADD1F; border-radius: 1.35rem; box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.65), 0 0 8px rgba(122, 221, 31, 0.58), 0 0 18px rgba(122, 221, 31, 0.38), 0 0 34px rgba(122, 221, 31, 0.24), 0 0 60px rgba(122, 221, 31, 0.14); } /* ========================================================= REMOVE OLD BEFORE LAYER ========================================================= */ #ABOUT-IDEALS-VIDEO::before { content: none !important; display: none !important; } /* ========================================================= DECORATIVE EDGE DASHES ========================================================= */ #ABOUT-IDEALS-VIDEO::after { content: ""; position: absolute; inset: calc( var(--accent-inset) - var(--accent-width) / 2 ); z-index: 3; pointer-events: none; background: linear-gradient( to bottom, transparent 0% 34%, #7ADD1F 34% 47%, transparent 47% 53%, rgba(122, 221, 31, 0.80) 53% 66%, transparent 66% 100% ) left center / var(--accent-width) 100% no-repeat, linear-gradient( to bottom, transparent 0% 34%, #7ADD1F 34% 47%, transparent 47% 53%, rgba(122, 221, 31, 0.80) 53% 66%, transparent 66% 100% ) right center / var(--accent-width) 100% no-repeat, linear-gradient( to right, transparent 0% 34%, #7ADD1F 34% 47%, transparent 47% 53%, rgba(122, 221, 31, 0.80) 53% 66%, transparent 66% 100% ) center top / 100% var(--accent-width) no-repeat, linear-gradient( to right, transparent 0% 34%, #7ADD1F 34% 47%, transparent 47% 53%, rgba(122, 221, 31, 0.80) 53% 66%, transparent 66% 100% ) center bottom / 100% var(--accent-width) no-repeat, linear-gradient(#050505, #050505) left center / var(--accent-width) 100% no-repeat, linear-gradient(#050505, #050505) right center / var(--accent-width) 100% no-repeat, linear-gradient(#050505, #050505) center top / 100% var(--accent-width) no-repeat, linear-gradient(#050505, #050505) center bottom / 100% var(--accent-width) no-repeat; filter: drop-shadow( 0 0 0.25rem rgba(122, 221, 31, 0.28) ); } /* ========================================================= ELEMENTOR WRAPPER ========================================================= */ #ABOUT-IDEALS-VIDEO > .elementor-widget-container { position: relative; z-index: 1; width: 100%; max-width: 100%; min-width: 0; margin: 0 auto; padding: 0; box-sizing: border-box; overflow: hidden; border-radius: 0.85rem; } /* ========================================================= VIDEO WRAPPER ========================================================= */ #ABOUT-IDEALS-VIDEO .pil-video { position: relative; z-index: 1; width: 100%; max-width: 100%; height: 0; padding-top: 56.25%; margin: 0 auto; box-sizing: border-box; overflow: hidden; border-radius: 0.85rem; background: #000; } /* ========================================================= FULLSCREEN WRAPPER ========================================================= */ #ABOUT-IDEALS-VIDEO .pil-video:fullscreen, #ABOUT-IDEALS-VIDEO .pil-video:-webkit-full-screen { width: 100vw !important; height: 100vh !important; padding-top: 0 !important; border-radius: 0 !important; background: #000; } /* ========================================================= VIMEO IFRAME ========================================================= */ #ABOUT-IDEALS-VIDEO .pil-video iframe { position: absolute !important; inset: 0 !important; display: block; width: 100% !important; height: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0; border-radius: 0.85rem; z-index: 1; } #ABOUT-IDEALS-VIDEO .pil-video:fullscreen iframe, #ABOUT-IDEALS-VIDEO .pil-video:-webkit-full-screen iframe { border-radius: 0; } /* ========================================================= SHARED COMPACT BUTTON APPEARANCE ========================================================= */ #ABOUT-IDEALS-VIDEO .pil-audio-toggle, #ABOUT-IDEALS-VIDEO .pil-fullscreen-toggle { appearance: none; -webkit-appearance: none; border: 1px solid rgba(122, 221, 31, 0.85); background: linear-gradient( 145deg, rgba(27, 40, 18, 0.96) 0%, rgba(10, 15, 8, 0.96) 55%, rgba(3, 5, 3, 0.98) 100% ); color: #ffffff; cursor: pointer; box-sizing: border-box; box-shadow: inset 0 1px 0 rgba(210, 255, 170, 0.22), inset 0 -0.15rem 0.3rem rgba(0, 0, 0, 0.75), 0 0 0.65rem rgba(0, 0, 0, 0.28), 0 0 0.65rem rgba(122, 221, 31, 0.10); transition: transform 0.15s ease, opacity 0.20s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } /* ========================================================= INITIAL LARGE UNMUTE BUTTON ========================================================= */ #ABOUT-IDEALS-VIDEO .pil-initial-unmute { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); transform-origin: center center; z-index: 6; width: 12rem; height: 3.75rem; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; appearance: none; -webkit-appearance: none; border: 1px solid #7ADD1F; border-radius: 0.65rem; background: linear-gradient( 145deg, #293d19 0%, #14200d 35%, #080c06 70%, #030503 100% ); color: #ffffff; font-family: inherit; font-size: 1.35rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.1rem; text-transform: uppercase; white-space: nowrap; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); box-shadow: inset 0 1px 0 rgba(210, 255, 170, 0.35), inset 0 -0.2rem 0.4rem rgba(0, 0, 0, 0.80), 0 0 0.75rem rgba(0, 0, 0, 0.20); cursor: pointer; opacity: 1; pointer-events: auto; transition: opacity 0.25s ease, visibility 0.25s ease, box-shadow 0.15s ease, background 0.15s ease, transform 0.12s ease; } /* ========================================================= HIDE INITIAL BUTTON AFTER FIRST UNMUTE ========================================================= */ #ABOUT-IDEALS-VIDEO .pil-video[data-audio-activated="true"] .pil-initial-unmute { opacity: 0; visibility: hidden; pointer-events: none; } /* ========================================================= INITIAL BUTTON HOVER ========================================================= */ @media (hover: hover) and (pointer: fine) { #ABOUT-IDEALS-VIDEO .pil-initial-unmute:hover { background: linear-gradient( 145deg, #385621 0%, #1c3010 35%, #0c1408 70%, #050805 100% ); } } /* ========================================================= INITIAL BUTTON PRESS ========================================================= */ #ABOUT-IDEALS-VIDEO .pil-initial-unmute:active { transform: translateX(-50%) scale(0.96); box-shadow: inset 0 0.25rem 0.5rem rgba(0, 0, 0, 0.85), inset 0 -1px 0 rgba(190, 255, 140, 0.18), 0 0 0.4rem rgba(122, 221, 31, 0.15); } /* ========================================================= WINDOWED FULLSCREEN BUTTON ========================================================= */ #ABOUT-IDEALS-VIDEO .pil-fullscreen-toggle { position: absolute; right: 1rem; top: 1rem; z-index: 8; width: 3.25rem; height: 3.25rem; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 0.55rem; transform-origin: center center; } /* ========================================================= FULLSCREEN ICON ========================================================= */ #ABOUT-IDEALS-VIDEO .pil-fullscreen-toggle svg { display: block; width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; transition: width 0.2s ease, height 0.2s ease; } /* ========================================================= AUDIO CONTROL GROUP ========================================================= */ #ABOUT-IDEALS-VIDEO .pil-audio-control-group { position: absolute; top: 4.9rem; right: 1rem; z-index: 9; width: 3.25rem; height: 3.25rem; opacity: 0; visibility: hidden; pointer-events: none; transform: scale(0.72); transform-origin: center center; transition: width 0.2s ease, height 0.2s ease, top 0.2s ease, right 0.2s ease; } /* ========================================================= SHOW AUDIO GROUP ========================================================= */ #ABOUT-IDEALS-VIDEO .pil-video[data-audio-activated="true"] .pil-audio-control-group { opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1); } /* ========================================================= COMPACT AUDIO BUTTON ========================================================= */ #ABOUT-IDEALS-VIDEO .pil-audio-toggle { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 0.55rem; z-index: 3; } /* ========================================================= AUDIO ICONS ========================================================= */ #ABOUT-IDEALS-VIDEO .pil-audio-icon { display: none; width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; transition: width 0.2s ease, height 0.2s ease; } /* MUTED */ #ABOUT-IDEALS-VIDEO .pil-video[data-muted="true"] .pil-audio-icon--muted { display: block; } /* SOUND ON */ #ABOUT-IDEALS-VIDEO .pil-video[data-muted="false"] .pil-audio-icon--on { display: block; } /* ========================================================= INVISIBLE HOVER BRIDGE Lets the pointer move downward from the speaker into the slider without immediately losing access. ========================================================= */ #ABOUT-IDEALS-VIDEO .pil-audio-control-group::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 0.7rem; pointer-events: auto; background: transparent; z-index: 1; } /* ========================================================= VOLUME PANEL ========================================================= */ #ABOUT-IDEALS-VIDEO .pil-volume-panel { position: absolute; top: calc( 100% + 0.55rem ); left: 50%; width: 3.25rem; height: 8.5rem; display: flex; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid rgba(122, 221, 31, 0.78); border-radius: 0.6rem; background: linear-gradient( 145deg, rgba(24, 35, 17, 0.98) 0%, rgba(8, 12, 7, 0.98) 58%, rgba(3, 5, 3, 0.99) 100% ); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(210, 255, 170, 0.18), inset 0 -0.15rem 0.3rem rgba(0, 0, 0, 0.75), 0 0 0.8rem rgba(0, 0, 0, 0.35), 0 0 1rem rgba(122, 221, 31, 0.16); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(-0.45rem) scale(0.92); transform-origin: top center; transition: opacity 0.35s ease, visibility 0s linear 0.35s, transform 0.35s ease; z-index: 10; } /* ========================================================= VOLUME PANEL OPEN STATE JavaScript adds/removes .pil-volume-open. This intentionally does NOT use :focus-within because range controls remain focused after dragging and were causing the slider to remain permanently visible. ========================================================= */ @media (hover: hover) and (pointer: fine) { #ABOUT-IDEALS-VIDEO .pil-audio-control-group.pil-volume-open .pil-volume-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); transition: opacity 0.2s ease, visibility 0s linear 0s, transform 0.22s cubic-bezier( 0.20, 0.80, 0.25, 1.10 ); } } /* ========================================================= VOLUME SLIDER ========================================================= */ #ABOUT-IDEALS-VIDEO .pil-volume-slider { --pil-volume: 100%; position: absolute; width: 6.4rem; height: 1.25rem; margin: 0; padding: 0; transform: rotate(-90deg); transform-origin: center center; cursor: pointer; background: transparent; appearance: none; -webkit-appearance: none; outline: none; } /* ========================================================= WEBKIT SLIDER TRACK ========================================================= */ #ABOUT-IDEALS-VIDEO .pil-volume-slider::-webkit-slider-runnable-track { height: 0.32rem; border-radius: 999px; background: linear-gradient( to right, #7ADD1F 0%, #7ADD1F var(--pil-volume), rgba(255, 255, 255, 0.22) var(--pil-volume), rgba(255, 255, 255, 0.22) 100% ); box-shadow: 0 0 0.4rem rgba(122, 221, 31, 0.14); } /* ========================================================= WEBKIT SLIDER THUMB ========================================================= */ #ABOUT-IDEALS-VIDEO .pil-volume-slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 1rem; height: 1rem; margin-top: -0.34rem; border: 1px solid rgba(122, 221, 31, 0.95); border-radius: 50%; background: #ffffff; box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.55), 0 0 0.55rem rgba(122, 221, 31, 0.38); cursor: pointer; } /* ========================================================= FIREFOX SLIDER TRACK ========================================================= */ #ABOUT-IDEALS-VIDEO .pil-volume-slider::-moz-range-track { height: 0.32rem; border-radius: 999px; background: rgba(255, 255, 255, 0.22); } /* ========================================================= FIREFOX SLIDER PROGRESS ========================================================= */ #ABOUT-IDEALS-VIDEO .pil-volume-slider::-moz-range-progress { height: 0.32rem; border-radius: 999px; background: #7ADD1F; } /* ========================================================= FIREFOX SLIDER THUMB ========================================================= */ #ABOUT-IDEALS-VIDEO .pil-volume-slider::-moz-range-thumb { width: 1rem; height: 1rem; border: 1px solid rgba(122, 221, 31, 0.95); border-radius: 50%; background: #ffffff; box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.55), 0 0 0.55rem rgba(122, 221, 31, 0.38); cursor: pointer; } /* ========================================================= COMPACT CONTROL HOVER ========================================================= */ @media (hover: hover) and (pointer: fine) { #ABOUT-IDEALS-VIDEO .pil-audio-toggle:hover, #ABOUT-IDEALS-VIDEO .pil-fullscreen-toggle:hover { background: linear-gradient( 145deg, rgba(48, 76, 27, 0.98) 0%, rgba(20, 32, 12, 0.98) 55%, rgba(5, 8, 5, 0.98) 100% ); border-color: #7ADD1F; box-shadow: inset 0 1px 0 rgba(210, 255, 170, 0.30), inset 0 -0.15rem 0.3rem rgba(0, 0, 0, 0.75), 0 0 0.8rem rgba(122, 221, 31, 0.25); } } /* ========================================================= BUTTON PRESS ========================================================= */ #ABOUT-IDEALS-VIDEO .pil-fullscreen-toggle:active, #ABOUT-IDEALS-VIDEO .pil-audio-toggle:active { transform: scale(0.92); } /* ========================================================= STRONG CONTROL ENTRANCE ========================================================= */ #ABOUT-IDEALS-VIDEO .pil-control-enter { animation: pilControlPopIn 0.68s cubic-bezier( 0.16, 0.88, 0.28, 1.30 ) both; } @keyframes pilControlPopIn { 0% { opacity: 0; transform: translateY(-1rem) scale(0.32); filter: drop-shadow( 0 0 0 rgba(122, 221, 31, 0) ); } 42% { opacity: 1; transform: translateY(0.15rem) scale(1.23); filter: drop-shadow( 0 0 1.4rem rgba(122, 221, 31, 0.82) ); } 64% { transform: translateY(0) scale(0.91); filter: drop-shadow( 0 0 0.9rem rgba(122, 221, 31, 0.52) ); } 82% { transform: scale(1.065); filter: drop-shadow( 0 0 0.55rem rgba(122, 221, 31, 0.28) ); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: drop-shadow( 0 0 0 rgba(122, 221, 31, 0) ); } } /* ========================================================= FULLSCREEN CONTROLS ========================================================= */ #ABOUT-IDEALS-VIDEO .pil-video:fullscreen .pil-fullscreen-toggle, #ABOUT-IDEALS-VIDEO .pil-video:-webkit-full-screen .pil-fullscreen-toggle { top: 1.35rem; right: 1.35rem; width: 4.5rem; height: 4.5rem; border-radius: 0.75rem; } #ABOUT-IDEALS-VIDEO .pil-video:fullscreen .pil-fullscreen-toggle svg, #ABOUT-IDEALS-VIDEO .pil-video:-webkit-full-screen .pil-fullscreen-toggle svg { width: 2rem; height: 2rem; } /* ========================================================= FULLSCREEN AUDIO CONTROL ========================================================= */ #ABOUT-IDEALS-VIDEO .pil-video:fullscreen .pil-audio-control-group, #ABOUT-IDEALS-VIDEO .pil-video:-webkit-full-screen .pil-audio-control-group { top: 6.5rem; right: 1.35rem; width: 4.5rem; height: 4.5rem; } #ABOUT-IDEALS-VIDEO .pil-video:fullscreen .pil-audio-toggle, #ABOUT-IDEALS-VIDEO .pil-video:-webkit-full-screen .pil-audio-toggle { border-radius: 0.75rem; } #ABOUT-IDEALS-VIDEO .pil-video:fullscreen .pil-audio-icon, #ABOUT-IDEALS-VIDEO .pil-video:-webkit-full-screen .pil-audio-icon { width: 2rem; height: 2rem; } /* ========================================================= FULLSCREEN VOLUME PANEL ========================================================= */ #ABOUT-IDEALS-VIDEO .pil-video:fullscreen .pil-volume-panel, #ABOUT-IDEALS-VIDEO .pil-video:-webkit-full-screen .pil-volume-panel { top: calc( 100% + 0.7rem ); width: 4rem; height: 10rem; border-radius: 0.7rem; } /* ========================================================= FULLSCREEN SLIDER LENGTH ========================================================= */ #ABOUT-IDEALS-VIDEO .pil-video:fullscreen .pil-volume-slider, #ABOUT-IDEALS-VIDEO .pil-video:-webkit-full-screen .pil-volume-slider { width: 7.7rem; } /* ========================================================= INITIAL UNMUTE IN FULLSCREEN ========================================================= */ #ABOUT-IDEALS-VIDEO .pil-video:fullscreen .pil-initial-unmute, #ABOUT-IDEALS-VIDEO .pil-video:-webkit-full-screen .pil-initial-unmute { top: 1.35rem; left: 50%; transform: translateX(-50%); } /* ========================================================= KEYBOARD FOCUS ========================================================= */ #ABOUT-IDEALS-VIDEO .pil-initial-unmute:focus-visible, #ABOUT-IDEALS-VIDEO .pil-audio-toggle:focus-visible, #ABOUT-IDEALS-VIDEO .pil-fullscreen-toggle:focus-visible, #ABOUT-IDEALS-VIDEO .pil-volume-slider:focus-visible { outline: 0.15rem solid #b6ff7a; outline-offset: 0.3rem; } /* ========================================================= ACCESSIBILITY STATUS ========================================================= */ #ABOUT-IDEALS-VIDEO .pil-video-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { #ABOUT-IDEALS-VIDEO { --frame-padding: 0.875rem; --accent-inset: 0.4375rem; border-radius: 1.15rem; } #ABOUT-IDEALS-VIDEO > .elementor-widget-container, #ABOUT-IDEALS-VIDEO .pil-video, #ABOUT-IDEALS-VIDEO .pil-video iframe { border-radius: 0.75rem; } } /* ========================================================= TOUCH DEVICES ========================================================= */ @media (hover: none), (pointer: coarse) { #ABOUT-IDEALS-VIDEO .pil-volume-panel { display: none !important; } #ABOUT-IDEALS-VIDEO .pil-audio-control-group::after { display: none; } } /* ========================================================= MOBILE PORTRAIT ========================================================= */ @media (max-width: 767px) { #ABOUT-IDEALS-VIDEO { --frame-padding: 0.75rem; --accent-inset: 0.375rem; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: auto !important; margin-right: auto !important; align-self: center !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; translate: none !important; border-radius: 1rem; } #ABOUT-IDEALS-VIDEO > .elementor-widget-container { width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; border-radius: 0.65rem; } #ABOUT-IDEALS-VIDEO .pil-video, #ABOUT-IDEALS-VIDEO .pil-video iframe { border-radius: 0.65rem; } /* INITIAL UNMUTE */ #ABOUT-IDEALS-VIDEO .pil-initial-unmute { top: 0.6rem; width: 8rem; height: 2.6rem; font-size: 0.84rem; letter-spacing: 0.064rem; border-radius: 0.52rem; } /* WINDOWED FULLSCREEN BUTTON */ #ABOUT-IDEALS-VIDEO .pil-fullscreen-toggle { right: 0.6rem; top: 0.6rem; width: 2.2rem; height: 2.2rem; border-radius: 0.4rem; } #ABOUT-IDEALS-VIDEO .pil-fullscreen-toggle svg { width: 1rem; height: 1rem; } /* WINDOWED AUDIO */ #ABOUT-IDEALS-VIDEO .pil-audio-control-group { top: 3.2rem; right: 0.6rem; width: 2.2rem; height: 2.2rem; } #ABOUT-IDEALS-VIDEO .pil-audio-toggle { border-radius: 0.4rem; } #ABOUT-IDEALS-VIDEO .pil-audio-icon { width: 1rem; height: 1rem; } /* ===================================================== MOBILE FULLSCREEN ===================================================== */ #ABOUT-IDEALS-VIDEO .pil-video:fullscreen .pil-fullscreen-toggle, #ABOUT-IDEALS-VIDEO .pil-video:-webkit-full-screen .pil-fullscreen-toggle { top: 0.9rem; right: 0.9rem; width: 3rem; height: 3rem; border-radius: 0.52rem; } #ABOUT-IDEALS-VIDEO .pil-video:fullscreen .pil-fullscreen-toggle svg, #ABOUT-IDEALS-VIDEO .pil-video:-webkit-full-screen .pil-fullscreen-toggle svg { width: 1.35rem; height: 1.35rem; } #ABOUT-IDEALS-VIDEO .pil-video:fullscreen .pil-audio-control-group, #ABOUT-IDEALS-VIDEO .pil-video:-webkit-full-screen .pil-audio-control-group { top: 4.45rem; right: 0.9rem; width: 3rem; height: 3rem; } #ABOUT-IDEALS-VIDEO .pil-video:fullscreen .pil-audio-toggle, #ABOUT-IDEALS-VIDEO .pil-video:-webkit-full-screen .pil-audio-toggle { border-radius: 0.52rem; } #ABOUT-IDEALS-VIDEO .pil-video:fullscreen .pil-audio-icon, #ABOUT-IDEALS-VIDEO .pil-video:-webkit-full-screen .pil-audio-icon { width: 1.35rem; height: 1.35rem; } #ABOUT-IDEALS-VIDEO .pil-video:fullscreen .pil-initial-unmute, #ABOUT-IDEALS-VIDEO .pil-video:-webkit-full-screen .pil-initial-unmute { top: 0.9rem; left: 50%; transform: translateX(-50%); } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { #ABOUT-IDEALS-VIDEO .pil-initial-unmute, #ABOUT-IDEALS-VIDEO .pil-audio-toggle, #ABOUT-IDEALS-VIDEO .pil-fullscreen-toggle, #ABOUT-IDEALS-VIDEO .pil-volume-panel, #ABOUT-IDEALS-VIDEO .pil-audio-control-group { transition: none; } #ABOUT-IDEALS-VIDEO .pil-control-enter { animation: none; } }/* End custom CSS */ /* Start custom CSS *//* ========================================================= PIL — FEATHERED ANGULAR GLASS FIELD Black / charcoal / green Small → massive shapes Scroll driven / performance optimized ========================================================= */ html, body { background: #010201 !important; overflow-x: hidden; } body { position: relative; isolation: isolate; } /* ========================================================= MASTER BACKGROUND ========================================================= */ #pil-feathered-planes { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; overflow: hidden; pointer-events: none; contain: layout paint style; background: radial-gradient( ellipse at 20% 10%, rgba(122, 221, 31, 0.045) 0%, transparent 42% ), radial-gradient( ellipse at 85% 75%, rgba(48, 55, 48, 0.12) 0%, transparent 48% ), linear-gradient( 140deg, #010201 0%, #070907 42%, #030403 70%, #010201 100% ); } /* ========================================================= ELEMENTOR ABOVE BACKGROUND ========================================================= */ .elementor-1440 { position: relative; z-index: 1; background: transparent !important; } .elementor-location-header, .elementor-location-footer { position: relative; z-index: 2; } /* ========================================================= SHARED SHAPE SETTINGS ========================================================= */ #pil-feathered-planes .pil-shape { position: absolute; pointer-events: none; backface-visibility: hidden; transform-style: preserve-3d; will-change: transform, opacity; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: scroll(root block); } /* ========================================================= SHAPE 1 MASSIVE DARK PLANE ========================================================= */ #pil-feathered-planes .shape-1 { width: 145vw; height: 68vh; left: -55vw; top: -23vh; opacity: 0.94; background: linear-gradient( 132deg, transparent 0%, rgba(3, 4, 3, 0.24) 5%, rgba(7, 9, 7, 0.90) 14%, rgba(32, 38, 32, 0.72) 48%, rgba(122, 221, 31, 0.075) 62%, rgba(12, 15, 12, 0.82) 82%, rgba(2, 3, 2, 0.18) 95%, transparent 100% ); transform-origin: center; animation-name: pil-feather-1; } @keyframes pil-feather-1 { 0% { transform: translate3d(-18vw, -15vh, 0) rotate(-20deg) skewX(-8deg) scale(1); } 35% { transform: translate3d(-3vw, -3vh, 0) rotate(-12deg) skewX(-5deg) scale(1.10); } 70% { transform: translate3d(14vw, 15vh, 0) rotate(-3deg) skewX(-2deg) scale(1.18); } 100% { transform: translate3d(28vw, 35vh, 0) rotate(7deg) skewX(2deg) scale(1.12); } } /* ========================================================= SHAPE 2 MEDIUM CHARCOAL PLANE ========================================================= */ #pil-feathered-planes .shape-2 { width: 72vw; height: 33vh; right: -17vw; top: 5vh; opacity: 0.84; background: linear-gradient( 118deg, transparent 0%, rgba(13, 16, 13, 0.12) 6%, rgba(32, 37, 32, 0.72) 18%, rgba(66, 74, 66, 0.34) 46%, rgba(122, 221, 31, 0.10) 58%, rgba(24, 29, 24, 0.48) 78%, rgba(5, 7, 5, 0.12) 94%, transparent 100% ); animation-name: pil-feather-2; } @keyframes pil-feather-2 { 0% { transform: translate3d(16vw, 4vh, 0) rotate(16deg) skewX(8deg) scale(0.94); } 40% { transform: translate3d(3vw, 3vh, 0) rotate(8deg) skewX(4deg) scale(1.08); } 100% { transform: translate3d(-20vw, 25vh, 0) rotate(-7deg) skewX(-3deg) scale(1.17); } } /* ========================================================= SHAPE 3 HUGE CROSS-PAGE GREEN/BLACK PLANE ========================================================= */ #pil-feathered-planes .shape-3 { width: 175vw; height: 42vh; left: -36vw; top: 25vh; opacity: 0.91; background: linear-gradient( 108deg, transparent 0%, rgba(5, 7, 5, 0.15) 5%, rgba(14, 17, 14, 0.82) 14%, rgba(45, 53, 45, 0.46) 38%, rgba(122, 221, 31, 0.15) 50%, rgba(177, 255, 102, 0.09) 54%, rgba(35, 42, 35, 0.42) 66%, rgba(7, 9, 7, 0.77) 84%, rgba(2, 3, 2, 0.15) 95%, transparent 100% ); animation-name: pil-feather-3; } @keyframes pil-feather-3 { 0% { transform: translate3d(24vw, 8vh, 0) rotate(16deg) skewX(-7deg) scale(1); } 38% { transform: translate3d(5vw, 0vh, 0) rotate(8deg) skewX(-3deg) scale(1.10); } 72% { transform: translate3d(-17vw, 9vh, 0) rotate(1deg) skewX(2deg) scale(1.19); } 100% { transform: translate3d(-34vw, 24vh, 0) rotate(-8deg) skewX(5deg) scale(1.12); } } /* ========================================================= SHAPE 4 SMALL GREEN SHARD ========================================================= */ #pil-feathered-planes .shape-4 { width: 28vw; height: 14vh; min-width: 300px; left: 9vw; top: 42vh; opacity: 0.82; background: linear-gradient( 115deg, transparent 0%, rgba(122, 221, 31, 0.02) 8%, rgba(122, 221, 31, 0.16) 30%, rgba(190, 255, 118, 0.24) 48%, rgba(122, 221, 31, 0.12) 64%, rgba(122, 221, 31, 0.015) 91%, transparent 100% ); animation-name: pil-feather-4; } @keyframes pil-feather-4 { 0% { transform: translate3d(-14vw, 14vh, 0) rotate(-17deg) skewX(-12deg) scale(0.75); } 46% { transform: translate3d(1vw, 0vh, 0) rotate(-6deg) skewX(-5deg) scale(1.10); } 100% { transform: translate3d(18vw, -13vh, 0) rotate(9deg) skewX(4deg) scale(1.30); } } /* ========================================================= SHAPE 5 LARGE VERTICAL GLASS PLANE ========================================================= */ #pil-feathered-planes .shape-5 { width: 45vw; height: 135vh; right: -15vw; top: -23vh; opacity: 0.68; background: linear-gradient( 166deg, transparent 0%, rgba(3, 4, 3, 0.18) 5%, rgba(14, 17, 14, 0.78) 16%, rgba(51, 59, 51, 0.30) 48%, rgba(122, 221, 31, 0.07) 63%, rgba(10, 13, 10, 0.72) 84%, rgba(2, 3, 2, 0.16) 96%, transparent 100% ); animation-name: pil-feather-5; } @keyframes pil-feather-5 { 0% { transform: translate3d(12vw, -11vh, 0) rotate(10deg) skewY(-5deg) scale(0.95); } 42% { transform: translate3d(1vw, 5vh, 0) rotate(4deg) skewY(-2deg) scale(1.08); } 100% { transform: translate3d(-13vw, 31vh, 0) rotate(-8deg) skewY(4deg) scale(1.17); } } /* ========================================================= SHAPE 6 TINY HIGHLIGHT SHARD ========================================================= */ #pil-feathered-planes .shape-6 { width: 15vw; height: 7vh; min-width: 180px; right: 22vw; top: 34vh; opacity: 0.90; background: linear-gradient( 108deg, transparent 0%, rgba(122, 221, 31, 0.00) 9%, rgba(122, 221, 31, 0.12) 27%, rgba(196, 255, 132, 0.30) 49%, rgba(122, 221, 31, 0.09) 71%, transparent 100% ); animation-name: pil-feather-6; } @keyframes pil-feather-6 { 0% { transform: translate3d(10vw, -15vh, 0) rotate(18deg) scale(0.65); } 50% { transform: translate3d(-2vw, 3vh, 0) rotate(4deg) scale(1.15); } 100% { transform: translate3d(-17vw, 19vh, 0) rotate(-12deg) scale(1.40); } } /* ========================================================= SHAPE 7 MASSIVE LOWER BLACK PLANE ========================================================= */ #pil-feathered-planes .shape-7 { width: 160vw; height: 58vh; left: -30vw; bottom: -27vh; opacity: 0.92; background: linear-gradient( 142deg, transparent 0%, rgba(2, 3, 2, 0.16) 4%, rgba(6, 8, 6, 0.94) 15%, rgba(33, 39, 33, 0.70) 45%, rgba(122, 221, 31, 0.08) 57%, rgba(16, 20, 16, 0.82) 75%, rgba(2, 3, 2, 0.18) 95%, transparent 100% ); animation-name: pil-feather-7; } @keyframes pil-feather-7 { 0% { transform: translate3d(-16vw, 19vh, 0) rotate(-15deg) skewX(-6deg) scale(1); } 38% { transform: translate3d(0vw, 7vh, 0) rotate(-8deg) skewX(-3deg) scale(1.10); } 75% { transform: translate3d(16vw, -7vh, 0) rotate(1deg) skewX(2deg) scale(1.20); } 100% { transform: translate3d(29vw, -24vh, 0) rotate(10deg) skewX(5deg) scale(1.13); } } /* ========================================================= SHAPE 8 MEDIUM GREEN GLASS PANEL ========================================================= */ #pil-feathered-planes .shape-8 { width: 52vw; height: 24vh; left: 31vw; bottom: 13vh; opacity: 0.73; background: linear-gradient( 123deg, transparent 0%, rgba(7, 9, 7, 0.10) 7%, rgba(31, 38, 30, 0.54) 22%, rgba(122, 221, 31, 0.13) 47%, rgba(174, 255, 100, 0.08) 53%, rgba(19, 24, 19, 0.44) 76%, transparent 100% ); animation-name: pil-feather-8; } @keyframes pil-feather-8 { 0% { transform: translate3d(13vw, 14vh, 0) rotate(-12deg) skewX(6deg) scale(0.88); } 48% { transform: translate3d(0vw, 1vh, 0) rotate(-4deg) skewX(2deg) scale(1.08); } 100% { transform: translate3d(-17vw, -14vh, 0) rotate(6deg) skewX(-4deg) scale(1.24); } } /* ========================================================= SHAPE 9 LONG THIN ENERGY PLANE ========================================================= */ #pil-feathered-planes .shape-9 { width: 135vw; height: 6vh; left: -17vw; top: 60vh; opacity: 0.78; background: linear-gradient( 90deg, transparent 0%, rgba(122, 221, 31, 0.00) 16%, rgba(122, 221, 31, 0.035) 31%, rgba(122, 221, 31, 0.15) 46%, rgba(198, 255, 134, 0.25) 50%, rgba(122, 221, 31, 0.11) 54%, rgba(122, 221, 31, 0.025) 69%, transparent 86% ); animation-name: pil-feather-9; } @keyframes pil-feather-9 { 0% { transform: translate3d(-22vw, 18vh, 0) rotate(17deg) skewX(-8deg); } 50% { transform: translate3d(0vw, 0vh, 0) rotate(6deg) skewX(-2deg); } 100% { transform: translate3d(24vw, -20vh, 0) rotate(-7deg) skewX(5deg); } } /* ========================================================= SHAPE 10 SMALL DARK SHARD ========================================================= */ #pil-feathered-planes .shape-10 { width: 23vw; height: 19vh; min-width: 260px; left: 55vw; top: 13vh; opacity: 0.76; background: linear-gradient( 137deg, transparent 0%, rgba(7, 9, 7, 0.12) 8%, rgba(48, 55, 48, 0.46) 36%, rgba(122, 221, 31, 0.07) 56%, rgba(8, 10, 8, 0.21) 89%, transparent 100% ); animation-name: pil-feather-10; } @keyframes pil-feather-10 { 0% { transform: translate3d(9vw, -9vh, 0) rotate(20deg) scale(0.72); } 47% { transform: translate3d(-1vw, 4vh, 0) rotate(6deg) scale(1.06); } 100% { transform: translate3d(-13vw, 22vh, 0) rotate(-10deg) scale(1.32); } } /* ========================================================= SUBTLE OVERALL VIGNETTE ========================================================= */ #pil-feathered-planes::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient( ellipse at center, transparent 34%, rgba(0, 0, 0, 0.08) 66%, rgba(0, 0, 0, 0.43) 100% ), linear-gradient( to bottom, rgba(0, 0, 0, 0.12) 0%, transparent 22%, transparent 72%, rgba(0, 0, 0, 0.22) 100% ); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { #pil-feathered-planes .shape-2, #pil-feathered-planes .shape-5, #pil-feathered-planes .shape-6, #pil-feathered-planes .shape-10 { display: none; } #pil-feathered-planes .pil-shape { opacity: 0.66; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { #pil-feathered-planes .pil-shape { animation: none !important; } } #get-quote-button { display: inline-flex !important; align-items: center; justify-content: center; flex-flow: row nowrap; white-space: nowrap; gap: 10px; } #get-quote-button::after { content: "→"; display: block; flex: 0 0 auto; margin-left: 0; font-size: 1.2em; line-height: 1; transition: transform 0.25s ease; } #get-quote-button:hover::after { transform: translateX(5px); } #smarter-way { display: flex; align-items: center; gap: 14px; } #smarter-way::after { content: ""; width: 70px; height: 2px; background: #75bf44; display: block; flex-shrink: 0; color: #75bf44; } #explore-solutions { display: inline-flex; align-items: center; justify-content: center; } #explore-solutions::after { content: ""; display: inline-block; width: 22px; height: 12px; margin-left: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12' viewBox='0 0 22 12'%3E%3Cpath d='M1 6H20M15 1L20 6L15 11' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; flex-shrink: 0; transition: transform 0.25s ease; } #explore-solutions:hover::after { transform: translateX(5px); } .industries-tabs { position: relative; min-height: 100vh; } .industries-tabs .e-n-tabs, .industries-tabs .elementor-tabs { min-height: 100vh; } .industries-tabs .e-n-tabs-heading, .industries-tabs .elementor-tabs-wrapper { position: absolute !important; right: 0; bottom: 0; left: 0; z-index: 10; width: 100%; margin: 0 !important; background: rgba(0, 0, 0, 0.88); } .industries-tabs .e-n-tabs-content, .industries-tabs .elementor-tabs-content-wrapper { min-height: 100vh; } #HERO { position: relative; isolation: isolate; min-height: 100vh; -webkit-mask: none !important; mask: none !important; background-size: 0 0 !important; background-repeat: no-repeat !important; background-color: transparent !important; } /* Background-only fade with a softer start */ #HERO::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: inherit; background-position: center center; background-size: cover; background-repeat: no-repeat; -webkit-mask-image: linear-gradient( to bottom, #000 0%, #000 90%, rgba(0, 0, 0, 0.95) 92%, rgba(0, 0, 0, 0.80) 94%, rgba(0, 0, 0, 0.55) 96%, rgba(0, 0, 0, 0.25) 98%, transparent 100% ); mask-image: linear-gradient( to bottom, #000 0%, #000 90%, rgba(0, 0, 0, 0.95) 92%, rgba(0, 0, 0, 0.80) 94%, rgba(0, 0, 0, 0.55) 96%, rgba(0, 0, 0, 0.25) 98%, transparent 100% ); } #pil-description u { color: #7add1f; text-decoration: none; } /* Heavier bold text only inside this paragraph */ #CONTACT-METHOD-BOLD strong, #CONTACT-METHOD-BOLD b { font-weight: 900 !important; font-size: 1.8em; } #pil-quote s, #pil-quote del { display: inline-block; color: #7ADD1F; font-family: "Arial Rounded MT Bold", "Arial Black", sans-serif; font-size: 1.75em; font-weight: 900; line-height: 0; text-decoration: none; vertical-align: baseline; transform: translateY(0.50em) scaleY(1.75); } #ABOUT { position: relative; isolation: isolate; min-height: 100vh; /* Remove the mask from the content */ -webkit-mask: none !important; mask: none !important; /* Keep the image assigned in Elementor, but display it only on the layer below */ background-size: 0 0 !important; background-repeat: no-repeat !important; background-color: transparent !important; } /* Background image with transparent edges */ #ABOUT::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: inherit; background-position: center center; background-size: cover; background-repeat: no-repeat; -webkit-mask-image: linear-gradient( to bottom, transparent 0%, #000 10%, #000 90%, transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0%, #000 10%, #000 90%, transparent 100% ); } #CONTACT { position: relative; isolation: isolate; /* Keep content above the fade */ -webkit-mask: none !important; mask: none !important; /* Display the background on its own layer */ background-size: 0 0 !important; background-repeat: no-repeat !important; background-color: transparent !important; } /* Background image with top transparency fade */ #CONTACT::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background-image: inherit; background-position: center center; background-size: cover; background-repeat: no-repeat; -webkit-mask-image: linear-gradient( to bottom, transparent 0%, #000 10%, #000 100% ); mask-image: linear-gradient( to bottom, transparent 0%, #000 10%, #000 100% ); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* Remove the left-side black gradient */ #CONTACT::after { content: none; } /* ========================================================= ABOUT-IDEALS UNIFORM BLACK GLASS VERSION ========================================================= */ #ABOUT-IDEALS { position: relative; isolation: isolate; box-sizing: border-box; overflow: visible; /* ----------------------------------------------------- UNIFORM BLACK GLASS BACKGROUND ----------------------------------------------------- */ background: rgba(5, 6, 5, 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); /* ----------------------------------------------------- BORDER ----------------------------------------------------- */ border: 1px solid #7ADD1F; border-radius: 1.35rem; /* ----------------------------------------------------- DEPTH + GREEN GLOW ----------------------------------------------------- */ box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.65), 0 0 8px rgba(122, 221, 31, 0.58), 0 0 18px rgba(122, 221, 31, 0.38), 0 0 34px rgba(122, 221, 31, 0.24), 0 0 60px rgba(122, 221, 31, 0.14); background-clip: padding-box; /* ----------------------------------------------------- POSITION SAFETY ----------------------------------------------------- */ top: auto; right: auto; bottom: auto; left: auto; transform: none; translate: none; } /* ========================================================= DISABLE OLD ::BEFORE BACKGROUND ========================================================= */ #ABOUT-IDEALS::before { content: none !important; display: none !important; } /* ========================================================= DECORATIVE SIDE LINES ========================================================= */ #ABOUT-IDEALS::after { content: ""; position: absolute; top: 50%; left: -0.75rem; right: -0.75rem; height: 74%; transform: translateY(-50%); z-index: -1; pointer-events: none; background: /* LEFT GREEN CENTER */ linear-gradient( to bottom, transparent 0%, transparent 29%, rgba(122, 221, 31, 0.25) 36%, rgba(122, 221, 31, 0.85) 46%, #7ADD1F 50%, rgba(122, 221, 31, 0.85) 54%, rgba(122, 221, 31, 0.25) 64%, transparent 71%, transparent 100% ) left center / 1px 100% no-repeat, /* RIGHT GREEN CENTER */ linear-gradient( to bottom, transparent 0%, transparent 29%, rgba(122, 221, 31, 0.25) 36%, rgba(122, 221, 31, 0.85) 46%, #7ADD1F 50%, rgba(122, 221, 31, 0.85) 54%, rgba(122, 221, 31, 0.25) 64%, transparent 71%, transparent 100% ) right center / 1px 100% no-repeat, /* LEFT BLACK BASE */ linear-gradient( to bottom, transparent 0%, rgba(0, 0, 0, 0.65) 8%, #000 28%, #000 72%, rgba(0, 0, 0, 0.65) 92%, transparent 100% ) left center / 1px 100% no-repeat, /* RIGHT BLACK BASE */ linear-gradient( to bottom, transparent 0%, rgba(0, 0, 0, 0.65) 8%, #000 28%, #000 72%, rgba(0, 0, 0, 0.65) 92%, transparent 100% ) right center / 1px 100% no-repeat; filter: drop-shadow( 0 0 4px rgba(122, 221, 31, 0.28) ); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { #ABOUT-IDEALS { border-radius: 1.15rem; } #ABOUT-IDEALS::after { left: -0.65rem; right: -0.65rem; height: 72%; } } /* ========================================================= MOBILE HARD POSITION RESET ========================================================= */ @media (max-width: 767px) { #ABOUT-IDEALS { /* ------------------------------------------------- FLEX / SIZE RESET ------------------------------------------------- */ width: calc(100% - 1rem) !important; max-width: calc(100% - 1rem) !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; flex: 0 1 auto !important; align-self: center !important; box-sizing: border-box !important; /* ------------------------------------------------- POSITION RESET ------------------------------------------------- */ position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; transform: none !important; translate: none !important; /* ------------------------------------------------- MARGIN RESET ------------------------------------------------- */ margin-top: 0 !important; margin-right: auto !important; margin-bottom: 0 !important; margin-left: auto !important; /* ------------------------------------------------- MOBILE APPEARANCE ------------------------------------------------- */ border-radius: 1rem; background: rgba(5, 6, 5, 0.86); background-position: center center; background-size: 100% 100%; background-repeat: no-repeat; overflow: visible; } /* ----------------------------------------------------- SIDE LINES ----------------------------------------------------- */ #ABOUT-IDEALS::after { top: 50%; left: -0.5rem; right: -0.5rem; height: 68%; transform: translateY(-50%); filter: drop-shadow( 0 0 3px rgba(122, 221, 31, 0.22) ); } } /* ========================================================= ABOUT-IDEALS-BOTH FULL STABLE VERSION ========================================================= */ #ABOUT-IDEALS-BOTH { position: relative; isolation: isolate; box-sizing: border-box; overflow: visible; /* ----------------------------------------------------- GLASS BACKGROUND ----------------------------------------------------- */ background: linear-gradient( 135deg, rgba(255, 255, 255, 0.025) 0%, rgba(28, 31, 28, 0.30) 18%, rgba(8, 10, 8, 0.62) 42%, rgba(122, 221, 31, 0.055) 58%, rgba(8, 10, 8, 0.72) 76%, rgba(3, 4, 3, 0.84) 100% ); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); /* ----------------------------------------------------- BORDER ----------------------------------------------------- */ border: 1px solid #7ADD1F; border-radius: 1.35rem; /* ----------------------------------------------------- DEPTH + GLOW ----------------------------------------------------- */ box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.65), 0 0 8px rgba(122, 221, 31, 0.58), 0 0 18px rgba(122, 221, 31, 0.38), 0 0 34px rgba(122, 221, 31, 0.24), 0 0 60px rgba(122, 221, 31, 0.14); background-clip: padding-box; /* ----------------------------------------------------- POSITION SAFETY ----------------------------------------------------- */ top: auto; right: auto; bottom: auto; left: auto; transform: none; translate: none; } /* ========================================================= DISABLE OLD ::BEFORE BACKGROUND ========================================================= */ #ABOUT-IDEALS-BOTH::before { content: none !important; display: none !important; } /* ========================================================= DECORATIVE SIDE LINES ========================================================= */ #ABOUT-IDEALS-BOTH::after { content: ""; position: absolute; top: 50%; left: -0.75rem; right: -0.75rem; height: 74%; transform: translateY(-50%); z-index: -1; pointer-events: none; background: /* LEFT GREEN CENTER */ linear-gradient( to bottom, transparent 0%, transparent 29%, rgba(122, 221, 31, 0.25) 36%, rgba(122, 221, 31, 0.85) 46%, #7ADD1F 50%, rgba(122, 221, 31, 0.85) 54%, rgba(122, 221, 31, 0.25) 64%, transparent 71%, transparent 100% ) left center / 1px 100% no-repeat, /* RIGHT GREEN CENTER */ linear-gradient( to bottom, transparent 0%, transparent 29%, rgba(122, 221, 31, 0.25) 36%, rgba(122, 221, 31, 0.85) 46%, #7ADD1F 50%, rgba(122, 221, 31, 0.85) 54%, rgba(122, 221, 31, 0.25) 64%, transparent 71%, transparent 100% ) right center / 1px 100% no-repeat, /* LEFT BLACK BASE */ linear-gradient( to bottom, transparent 0%, rgba(0, 0, 0, 0.65) 8%, #000 28%, #000 72%, rgba(0, 0, 0, 0.65) 92%, transparent 100% ) left center / 1px 100% no-repeat, /* RIGHT BLACK BASE */ linear-gradient( to bottom, transparent 0%, rgba(0, 0, 0, 0.65) 8%, #000 28%, #000 72%, rgba(0, 0, 0, 0.65) 92%, transparent 100% ) right center / 1px 100% no-repeat; filter: drop-shadow( 0 0 4px rgba(122, 221, 31, 0.28) ); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { #ABOUT-IDEALS-BOTH { border-radius: 1.15rem; } #ABOUT-IDEALS-BOTH::after { left: -0.65rem; right: -0.65rem; height: 72%; } } /* ========================================================= MOBILE HARD POSITION RESET ========================================================= */ @media (max-width: 767px) { #ABOUT-IDEALS-BOTH { /* ------------------------------------------------- FLEX / SIZE RESET ------------------------------------------------- */ width: calc(100% - 1rem) !important; max-width: calc(100% - 1rem) !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; flex: 0 1 auto !important; align-self: center !important; box-sizing: border-box !important; /* ------------------------------------------------- POSITION RESET ------------------------------------------------- */ position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; transform: none !important; translate: none !important; /* ------------------------------------------------- MARGIN RESET ------------------------------------------------- */ margin-top: 0 !important; margin-right: auto !important; margin-bottom: 0 !important; margin-left: auto !important; /* ------------------------------------------------- MOBILE APPEARANCE ------------------------------------------------- */ border-radius: 1rem; background-position: center center; background-size: 100% 100%; background-repeat: no-repeat; overflow: visible; } /* ----------------------------------------------------- SIDE LINES ----------------------------------------------------- */ #ABOUT-IDEALS-BOTH::after { top: 50%; left: -0.5rem; right: -0.5rem; height: 68%; transform: translateY(-50%); filter: drop-shadow( 0 0 3px rgba(122, 221, 31, 0.22) ); } } #PRODUCT-GREEN-BORDER { position: relative; overflow: visible !important; z-index: 1; background: #050805; border: 1px solid rgba(122, 221, 31, 0.38); border-radius: 14px; box-shadow: 0 0 2px rgba(122, 221, 31, 0.20); } /* BRIGHT BORDER HOTSPOTS */ #PRODUCT-GREEN-BORDER::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: 2; padding: 1px; background: radial-gradient( ellipse 30% 12% at 18% 0%, rgba(122, 221, 31, 1) 0%, rgba(122, 221, 31, 0.75) 20%, rgba(122, 221, 31, 0.20) 48%, transparent 72% ), radial-gradient( ellipse 20% 9% at 43% 0%, rgba(122, 221, 31, 0.85) 0%, rgba(122, 221, 31, 0.28) 40%, transparent 72% ), rgba(122, 221, 31, 0.34); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } /* OUTSIDE-ONLY VISIBLE GLOW */ #PRODUCT-GREEN-BORDER::after { content: ""; position: absolute; inset: -2px; border-radius: 16px; pointer-events: none; z-index: -1; border: 1px solid rgba(122, 221, 31, 0.18); box-shadow: 0 0 8px rgba(122, 221, 31, 0.20), 0 0 18px rgba(122, 221, 31, 0.13), 0 0 34px rgba(122, 221, 31, 0.08), 0 0 55px rgba(122, 221, 31, 0.045); } /* ALLOW THE MASTER CONTAINER'S GLOW TO ESCAPE ITS PARENT */ .elementor-element:has(> #PRODUCT-WHITE-BORDER) { overflow: visible !important; } /* MASTER CONTAINER */ #PRODUCT-WHITE-BORDER { position: relative !important; z-index: 1; border-radius: 14px; /* Keeps inner flexbox backgrounds/images inside the radius */ overflow: hidden !important; /* Solid white border */ border: 1px solid #FFFFFF !important; /* Outer white glow */ box-shadow: 0 0 6px rgba(255, 255, 255, 0.45), 0 0 14px rgba(255, 255, 255, 0.28), 0 0 28px rgba(255, 255, 255, 0.16), 0 0 50px rgba(255, 255, 255, 0.09) !important; } /* ALLOW THE MASTER CONTAINER'S GLOW TO ESCAPE ITS PARENT */ .elementor-element:has(> #PRODUCT-GREEN-BORDER-TPBG) { overflow: visible !important; } /* MASTER CONTAINER */ #PRODUCT-GREEN-BORDER-TPBG { position: relative !important; z-index: 1; border-radius: 14px; /* Keeps inner flexbox backgrounds/images inside the radius */ overflow: hidden !important; /* Solid border */ border: 1px solid #7ADD1F !important; /* Outer glow */ box-shadow: 0 0 6px rgba(122, 221, 31, 0.45), 0 0 14px rgba(122, 221, 31, 0.28), 0 0 28px rgba(122, 221, 31, 0.16), 0 0 50px rgba(122, 221, 31, 0.09) !important; } #industries-glow { position: relative; isolation: isolate; overflow: visible; /* SAME ROUNDED BORDER */ border: 1px solid #7ADD1F; border-radius: 1.35rem; /* SAME OUTER GLOW */ box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.65), 0 0 8px rgba(122, 221, 31, 0.58), 0 0 18px rgba(122, 221, 31, 0.38), 0 0 34px rgba(122, 221, 31, 0.24), 0 0 60px rgba(122, 221, 31, 0.14); } /* GLASS BACKGROUND */ #industries-glow::before { content: ""; position: absolute; inset: 0; box-sizing: border-box; z-index: -2; pointer-events: none; border-radius: 1.35rem; clip-path: inset(0 round 1.35rem); -webkit-clip-path: inset(0 round 1.35rem); background: linear-gradient( 135deg, rgba(16, 18, 12, 0.93) 0%, rgba(10, 12, 9, 0.95) 25%, rgba(7, 8, 7, 0.96) 50%, rgba(10, 12, 9, 0.95) 75%, rgba(16, 18, 12, 0.93) 100% ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* LEFT VERTICAL LINE ACCENT */ #industries-glow::after { content: ""; position: absolute; left: -2.5rem; top: 10%; width: 3px; height: 80%; z-index: 1; pointer-events: none; background: /* THICKER GREEN CENTER ACCENT */ linear-gradient( to bottom, transparent 0% 36%, #7ADD1F 36% 64%, transparent 64% 100% ) center / 3px 100% no-repeat, /* THIN GREEN BASE LINE */ linear-gradient( to bottom, rgba(122, 221, 31, 0.42), rgba(122, 221, 31, 0.42) ) center / 1px 100% no-repeat; filter: drop-shadow(0 0 0.25rem rgba(122, 221, 31, 0.28)); } @media (max-width: 767px) { #industries-glow { border-radius: 1rem; } #industries-glow::before { border-radius: 1rem; clip-path: inset(0 round 1rem); -webkit-clip-path: inset(0 round 1rem); } #industries-glow::after { left: -1.25rem; } } #solution-tech-card { position: relative; isolation: isolate; /* CLIPS CONTENT CLEANLY TO ROUNDED CORNERS */ overflow: hidden; border: 1px solid #7ADD1F; border-radius: 1.35rem; box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.65), 0 0 8px rgba(122, 221, 31, 0.58), 0 0 18px rgba(122, 221, 31, 0.38), 0 0 34px rgba(122, 221, 31, 0.24), 0 0 60px rgba(122, 221, 31, 0.14); } /* SHORT LEFT-SIDE TECH ACCENT */ #solution-tech-card::before { content: ""; position: absolute; left: 0.75rem; top: 14%; width: 2px; height: 11rem; z-index: 3; pointer-events: none; background: #7ADD1F; box-shadow: 0 0 5px rgba(122, 221, 31, 0.65), 0 0 10px rgba(122, 221, 31, 0.30); border: 0; border-radius: 0; } /* LOWER-LEFT ANGLED TECH ACCENTS */ #solution-tech-card::after { content: ""; position: absolute; left: 0; bottom: 0; width: 7rem; height: 7rem; z-index: 3; pointer-events: none; border: 0; border-radius: 0; background: /* BRIGHT INNER DIAGONAL */ linear-gradient( 45deg, transparent 48.5%, #7ADD1F 48.5%, #7ADD1F 50.5%, transparent 50.5% ) left bottom / 5.5rem 5.5rem no-repeat, /* DIM OUTER DIAGONAL */ linear-gradient( 45deg, transparent 49%, rgba(122, 221, 31, 0.55) 49%, rgba(122, 221, 31, 0.55) 50.5%, transparent 50.5% ) left bottom / 7rem 7rem no-repeat; filter: drop-shadow( 0 0 0.18rem rgba(122, 221, 31, 0.35) ); } /* MOBILE */ @media (max-width: 767px) { #solution-tech-card { border-radius: 1rem; } #solution-tech-card::before { left: 0.75rem; top: 14%; height: 11rem; } #solution-tech-card::after { width: 7rem; height: 7rem; } } #industries-glow-right { position: relative; isolation: isolate; overflow: visible; /* SAME ROUNDED BORDER */ border: 1px solid #7ADD1F; border-radius: 1.35rem; /* SAME OUTER GLOW */ box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.65), 0 0 8px rgba(122, 221, 31, 0.58), 0 0 18px rgba(122, 221, 31, 0.38), 0 0 34px rgba(122, 221, 31, 0.24), 0 0 60px rgba(122, 221, 31, 0.14); } /* GLASS BACKGROUND */ #industries-glow-right::before { content: ""; position: absolute; inset: 0; box-sizing: border-box; z-index: -2; pointer-events: none; border-radius: 1.35rem; clip-path: inset(0 round 1.35rem); -webkit-clip-path: inset(0 round 1.35rem); background: linear-gradient( 135deg, rgba(16, 18, 12, 0.93) 0%, rgba(10, 12, 9, 0.95) 25%, rgba(7, 8, 7, 0.96) 50%, rgba(10, 12, 9, 0.95) 75%, rgba(16, 18, 12, 0.93) 100% ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* RIGHT VERTICAL LINE ACCENT */ #industries-glow-right::after { content: ""; position: absolute; right: -2.5rem; top: 10%; width: 3px; height: 80%; z-index: 10; pointer-events: none; background: /* THICKER GREEN CENTER ACCENT */ linear-gradient( to bottom, transparent 0% 36%, #7ADD1F 36% 64%, transparent 64% 100% ) center / 3px 100% no-repeat, /* THIN GREEN BASE LINE */ linear-gradient( to bottom, rgba(122, 221, 31, 0.42), rgba(122, 221, 31, 0.42) ) center / 1px 100% no-repeat; filter: drop-shadow( 0 0 0.25rem rgba(122, 221, 31, 0.28) ); } /* FORCE THE ACTUAL IMAGE PIXELS INSIDE THE RADIUS */ #industries-glow-right img { display: block !important; width: 100% !important; height: auto; border-radius: 1.25rem !important; clip-path: inset(0 round 1.25rem) !important; -webkit-clip-path: inset(0 round 1.25rem) !important; } /* ALSO REMOVE ANY IMAGE-WIDGET OVERFLOW */ #industries-glow-right .elementor-widget-image, #industries-glow-right .elementor-widget-container, #industries-glow-right a { border-radius: 1.25rem; } /* MOBILE */ @media (max-width: 767px) { #industries-glow-right { border-radius: 1rem; } #industries-glow-right::before { border-radius: 1rem; clip-path: inset(0 round 1rem); -webkit-clip-path: inset(0 round 1rem); } #industries-glow-right::after { right: -1.25rem; } #industries-glow-right img { border-radius: 0.9rem !important; clip-path: inset(0 round 0.9rem) !important; -webkit-clip-path: inset(0 round 0.9rem) !important; } } body.elementor-page-1440 .e-form-select-base { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 15px center !important; background-size: 12px 8px !important; padding-right: 35px !important; } #industries-glow-transparent { position: relative; isolation: isolate; overflow: visible; /* Background color controlled in Elementor */ /* ROUNDED BORDER */ border: 1px solid #7ADD1F; border-radius: 1.35rem; /* OUTER GLOW */ box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.65), 0 0 8px rgba(122, 221, 31, 0.58), 0 0 18px rgba(122, 221, 31, 0.38), 0 0 34px rgba(122, 221, 31, 0.24), 0 0 60px rgba(122, 221, 31, 0.14); } /* TRANSPARENT LAYER WITH INNER HIGHLIGHT */ #industries-glow-transparent::before { content: ""; position: absolute; inset: 0; box-sizing: border-box; z-index: -2; pointer-events: none; border-radius: 1.35rem; clip-path: inset(0 round 1.35rem); -webkit-clip-path: inset(0 round 1.35rem); background: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10); backdrop-filter: none; -webkit-backdrop-filter: none; } /* LEFT VERTICAL LINE ACCENT */ #industries-glow-transparent::after { content: ""; position: absolute; left: -2.5rem; top: 10%; width: 3px; height: 80%; z-index: 1; pointer-events: none; background: /* THICKER GREEN CENTER ACCENT */ linear-gradient( to bottom, transparent 0% 36%, #7ADD1F 36% 64%, transparent 64% 100% ) center / 3px 100% no-repeat, /* THIN GREEN BASE LINE */ linear-gradient( to bottom, rgba(122, 221, 31, 0.42), rgba(122, 221, 31, 0.42) ) center / 1px 100% no-repeat; filter: drop-shadow(0 0 0.25rem rgba(122, 221, 31, 0.28)); } @media (max-width: 767px) { #industries-glow-transparent { border-radius: 1rem; } #industries-glow-transparent::before { border-radius: 1rem; clip-path: inset(0 round 1rem); -webkit-clip-path: inset(0 round 1rem); } #industries-glow-transparent::after { left: -1.25rem; } }/* End custom CSS */