.elementor-5855 .elementor-element.elementor-element-2ab3d178{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;box-shadow:0px 0px 20px 0px rgba(0, 0, 0, 0.15);--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:0px;--padding-right:0px;--z-index:99;}.elementor-5855 .elementor-element.elementor-element-2ab3d178:not(.elementor-motion-effects-element-type-background), .elementor-5855 .elementor-element.elementor-element-2ab3d178 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FCF9F3;}.elementor-5855 .elementor-element.elementor-element-10a7e50{--display:flex;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family );font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-5855 .elementor-element.elementor-element-11778293{text-align:start;}.elementor-5855 .elementor-element.elementor-element-11778293 img{width:40%;}.elementor-5855 .elementor-element.elementor-element-78c969c6{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family );font-size:var( --e-global-typography-primary-font-size );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 );font-weight:var( --e-global-typography-accent-font-weight );}.elementor-5855 .elementor-element.elementor-element-279a024 .elementor-menu-toggle{margin:0 auto;}.elementor-5855 .elementor-element.elementor-element-279a024 .elementor-nav-menu .elementor-item{font-family:"Haffer";font-size:16px;font-weight:500;}.elementor-5855 .elementor-element.elementor-element-279a024 .elementor-nav-menu--main .elementor-item:hover, .elementor-5855 .elementor-element.elementor-element-279a024 .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-5855 .elementor-element.elementor-element-279a024 .elementor-nav-menu--main .elementor-item.highlighted, .elementor-5855 .elementor-element.elementor-element-279a024 .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-primary );fill:var( --e-global-color-primary );}.elementor-5855 .elementor-element.elementor-element-1cc07fb3{--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:flex-end;--align-items:center;--gap:20px 30px;--row-gap:20px;--column-gap:30px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-5855 .elementor-element.elementor-element-492a93a5.elementor-element{--align-self:center;}.elementor-5855 .elementor-element.elementor-element-492a93a5 .elementor-icon-wrapper{text-align:center;}.elementor-5855 .elementor-element.elementor-element-492a93a5.elementor-view-stacked .elementor-icon{background-color:#47433B;}.elementor-5855 .elementor-element.elementor-element-492a93a5.elementor-view-framed .elementor-icon, .elementor-5855 .elementor-element.elementor-element-492a93a5.elementor-view-default .elementor-icon{color:#47433B;border-color:#47433B;}.elementor-5855 .elementor-element.elementor-element-492a93a5.elementor-view-framed .elementor-icon, .elementor-5855 .elementor-element.elementor-element-492a93a5.elementor-view-default .elementor-icon svg{fill:#47433B;}.elementor-5855 .elementor-element.elementor-element-492a93a5 .elementor-icon{font-size:27px;}.elementor-5855 .elementor-element.elementor-element-492a93a5 .elementor-icon svg{height:27px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family );font-weight:var( --e-global-typography-accent-font-weight );}.elementor-5855 .elementor-element.elementor-element-19d37840 .elementor-button{background-color:#FFFFFF00;font-family:"Haffer";font-size:16px;fill:#DD2C00;color:#DD2C00;border-style:solid;border-width:1px 1px 1px 1px;border-color:#DD2C00;border-radius:20px 20px 20px 20px;}.elementor-5855 .elementor-element.elementor-element-19d37840{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-5855 .elementor-element.elementor-element-4cb1880e{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5855 .elementor-element.elementor-element-4cb1880e:not(.elementor-motion-effects-element-type-background), .elementor-5855 .elementor-element.elementor-element-4cb1880e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FCF9F3;}.elementor-5855 .elementor-element.elementor-element-789df5c6{--display:flex;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5855 .elementor-element.elementor-element-d04356c .elementor-menu-toggle{margin:0 auto;background-color:#FCF9F3;}.elementor-5855 .elementor-element.elementor-element-d04356c .elementor-nav-menu .elementor-item{font-family:"Haffer";font-size:16px;}.elementor-5855 .elementor-element.elementor-element-d04356c .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-primary );fill:var( --e-global-color-primary );}.elementor-5855 .elementor-element.elementor-element-d04356c .elementor-nav-menu--dropdown a, .elementor-5855 .elementor-element.elementor-element-d04356c .elementor-menu-toggle{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-5855 .elementor-element.elementor-element-d04356c .elementor-nav-menu--dropdown{background-color:#FCF9F3;}.elementor-5855 .elementor-element.elementor-element-d04356c .elementor-nav-menu--dropdown a:hover, .elementor-5855 .elementor-element.elementor-element-d04356c .elementor-nav-menu--dropdown a:focus, .elementor-5855 .elementor-element.elementor-element-d04356c .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-5855 .elementor-element.elementor-element-d04356c .elementor-nav-menu--dropdown a.highlighted, .elementor-5855 .elementor-element.elementor-element-d04356c .elementor-menu-toggle:hover, .elementor-5855 .elementor-element.elementor-element-d04356c .elementor-menu-toggle:focus{color:var( --e-global-color-primary );}.elementor-5855 .elementor-element.elementor-element-d04356c .elementor-nav-menu--dropdown a:hover, .elementor-5855 .elementor-element.elementor-element-d04356c .elementor-nav-menu--dropdown a:focus, .elementor-5855 .elementor-element.elementor-element-d04356c .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-5855 .elementor-element.elementor-element-d04356c .elementor-nav-menu--dropdown a.highlighted{background-color:#FCF9F3;}.elementor-5855 .elementor-element.elementor-element-d04356c .elementor-nav-menu--dropdown a.elementor-item-active{color:var( --e-global-color-primary );background-color:#FCF9F3;}.elementor-5855 .elementor-element.elementor-element-d04356c .elementor-nav-menu--dropdown .elementor-item, .elementor-5855 .elementor-element.elementor-element-d04356c .elementor-nav-menu--dropdown .elementor-sub-item{font-family:"Haffer";}.elementor-5855 .elementor-element.elementor-element-d04356c div.elementor-menu-toggle{color:#6B6B6B;}.elementor-5855 .elementor-element.elementor-element-d04356c div.elementor-menu-toggle svg{fill:#6B6B6B;}.elementor-5855 .elementor-element.elementor-element-2c5c22f6{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5855 .elementor-element.elementor-element-2c5c22f6.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-5855 .elementor-element.elementor-element-511d153d.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-5855 .elementor-element.elementor-element-511d153d img{width:85%;height:74px;}.elementor-5855 .elementor-element.elementor-element-2b02f8f{--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:center;--align-items:center;--gap:20px 30px;--row-gap:20px;--column-gap:30px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5855 .elementor-element.elementor-element-20b02414.elementor-element{--align-self:center;}.elementor-5855 .elementor-element.elementor-element-20b02414 .elementor-icon-wrapper{text-align:center;}.elementor-5855 .elementor-element.elementor-element-20b02414.elementor-view-stacked .elementor-icon{background-color:#686868;}.elementor-5855 .elementor-element.elementor-element-20b02414.elementor-view-framed .elementor-icon, .elementor-5855 .elementor-element.elementor-element-20b02414.elementor-view-default .elementor-icon{color:#686868;border-color:#686868;}.elementor-5855 .elementor-element.elementor-element-20b02414.elementor-view-framed .elementor-icon, .elementor-5855 .elementor-element.elementor-element-20b02414.elementor-view-default .elementor-icon svg{fill:#686868;}.elementor-5855 .elementor-element.elementor-element-20b02414 .elementor-icon{font-size:27px;}.elementor-5855 .elementor-element.elementor-element-20b02414 .elementor-icon svg{height:27px;}.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-5855 .elementor-element.elementor-element-2ab3d178{--content-width:1440px;}.elementor-5855 .elementor-element.elementor-element-10a7e50{--width:25%;}.elementor-5855 .elementor-element.elementor-element-78c969c6{--width:50%;}.elementor-5855 .elementor-element.elementor-element-1cc07fb3{--width:25%;}.elementor-5855 .elementor-element.elementor-element-4cb1880e{--content-width:1440px;}.elementor-5855 .elementor-element.elementor-element-789df5c6{--width:25%;}.elementor-5855 .elementor-element.elementor-element-2c5c22f6{--width:50%;}.elementor-5855 .elementor-element.elementor-element-2b02f8f{--width:25%;}}@media(max-width:1024px){.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-primary-font-size );}.elementor-5855 .elementor-element.elementor-element-789df5c6{--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:0px;}.elementor-5855 .elementor-element.elementor-element-d04356c.elementor-element{--align-self:flex-start;}}@media(max-width:767px){.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-primary-font-size );}.elementor-5855 .elementor-element.elementor-element-789df5c6{--width:32%;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:15px;--padding-right:0px;}.elementor-5855 .elementor-element.elementor-element-d04356c .elementor-nav-menu .elementor-item{font-size:16px;font-weight:560;}.elementor-5855 .elementor-element.elementor-element-d04356c .elementor-nav-menu--dropdown .elementor-item, .elementor-5855 .elementor-element.elementor-element-d04356c .elementor-nav-menu--dropdown .elementor-sub-item{font-size:16px;font-weight:560;}.elementor-5855 .elementor-element.elementor-element-2c5c22f6{--width:34.774%;}.elementor-5855 .elementor-element.elementor-element-511d153d{width:var( --container-widget-width, 95.537% );max-width:95.537%;--container-widget-width:95.537%;--container-widget-flex-grow:0;text-align:end;}.elementor-5855 .elementor-element.elementor-element-511d153d img{width:100%;max-width:100%;height:56px;}.elementor-5855 .elementor-element.elementor-element-2b02f8f{--width:32%;--align-items:flex-end;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:0px;}.elementor-5855 .elementor-element.elementor-element-2b02f8f.e-con{--align-self:center;}.elementor-5855 .elementor-element.elementor-element-20b02414 .elementor-icon{font-size:20px;}.elementor-5855 .elementor-element.elementor-element-20b02414 .elementor-icon svg{height:20px;}}/* Start custom CSS for nav-menu, class: .elementor-element-279a024 *//* ========================================================== ICREON CUSTOM MEGA MENU Default panels: 815px What We Do panel: 1300px Centered on viewport No overlay ========================================================== */ /* ========================================================== 1. MAIN MEGA MENU WRAPPER ========================================================== */ .icreon-mega-menu { position: fixed; /* Adjust this if you want the dropdown slightly higher/lower */ top: 78px; /* True viewport centering */ left: 50%; /* Default width for Industries + About Us */ width: min(815px, calc(100vw - 80px)); transform: translateX(-50%); z-index: 99999; pointer-events: none; } /* ========================================================== 2. WHAT WE DO - WIDER WRAPPER ========================================================== */ .icreon-mega-menu:has( .icreon-mega-panel[data-mega-menu="what-we-do"].is-active ) { width: min(1440px, calc(100vw - 80px)); } /* ========================================================== 3. INDIVIDUAL MEGA MENU PANELS ========================================================== */ .icreon-mega-panel { position: absolute; top: 0; left: 0; width: 100%; max-width: none; margin: 0; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease; pointer-events: none; border-radius: 0 0 10px 10px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.10); overflow: hidden; } /* ========================================================== 4. ACTIVE PANEL ========================================================== */ .icreon-mega-panel.is-active { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } /* ========================================================== 5. ELEMENTOR TEMPLATE WIDTH FIX ========================================================== */ .icreon-mega-panel > .elementor { width: 100%; max-width: 100%; } .icreon-mega-panel .elementor-section { width: 100%; max-width: 100%; } .icreon-mega-panel .elementor-container { width: 100%; max-width: 100%; } .icreon-mega-panel .e-con { width: 100%; max-width: 100%; } .icreon-mega-panel .e-con-inner { width: 100%; max-width: 100%; } /* ========================================================== 6. MENU TRIGGER ITEMS ========================================================== */ .mega-trigger > a { position: relative; } /* Active menu underline */ /*.mega-trigger.is-mega-active > a::after {*/ /* content: "";*/ /* position: absolute;*/ /* left: 0;*/ /* right: 0;*/ /* bottom: -8px;*/ /* width: 100%;*/ /* height: 2px;*/ /* background: currentColor;*/ /*}*/ /* ========================================================== 7. PAGE OVERLAY WHEN MEGA MENU IS OPEN ========================================================== */ body.mega-menu-open::after { content: ""; position: fixed; /* Same vertical starting point as mega menu */ top: 0px; left: 0; width: 100vw; height: 100vh; /* Overlay darkness */ background: rgba(0, 0, 0, 0.35); /* * Must be: * above page content * below header and mega menu */ z-index: 9990; opacity: 1; visibility: visible; pointer-events: none; transition: opacity 0.25s ease; } /* Keep header above overlay */ .elementor-location-header { position: relative; z-index: 99998; } /* Mega menu always above overlay */ .icreon-mega-menu { z-index: 99999; } /* ========================================================== 8. HEADER STACKING ========================================================== */ .elementor-location-header { position: relative; z-index: 99998; overflow: visible !important; } /* ========================================================== 9. PREVENT ELEMENTOR FROM CLIPPING DROPDOWN ========================================================== */ .elementor-location-header .e-con { overflow: visible !important; } .elementor-location-header .elementor-element { overflow: visible; } /* ========================================================== 10. HIDDEN PANELS MUST NOT BLOCK PAGE ========================================================== */ .icreon-mega-panel:not(.is-active) { pointer-events: none; } /* ========================================================== 11. ACTIVE PANEL CONTENT CLICKABLE ========================================================== */ .icreon-mega-panel.is-active, .icreon-mega-panel.is-active a, .icreon-mega-panel.is-active button, .icreon-mega-panel.is-active input, .icreon-mega-panel.is-active select { pointer-events: auto; } /* ========================================================== 12. DESKTOP ========================================================== */ @media (min-width: 1025px) { /* * Industries + About Us */ .icreon-mega-menu { position: fixed; top: 100px; left: 50%; width: min(815px, calc(100vw - 80px)); transform: translateX(-50%); } /* * What We Do only */ .icreon-mega-menu:has( .icreon-mega-panel[data-mega-menu="what-we-do"].is-active ) { width: min(1300px, calc(100vw - 80px)); } .icreon-mega-panel { width: 100%; } } /* ========================================================== 13. TABLET / MOBILE ========================================================== */ @media (max-width: 1024px) { /* * Reset both default and What We Do widths. */ .icreon-mega-menu, .icreon-mega-menu:has( .icreon-mega-panel[data-mega-menu="what-we-do"].is-active ) { position: relative; top: auto; left: auto; width: 100%; max-width: none; transform: none; pointer-events: auto; z-index: 99999; } /* * Individual mobile panels */ .icreon-mega-panel { position: relative; top: auto; left: auto; width: 100%; max-width: none; margin: 0; display: none; opacity: 1; visibility: visible; transform: none; transition: none; background: #ffffff; border-radius: 0; box-shadow: none; overflow: visible; pointer-events: auto; } /* * Active mobile panel */ .icreon-mega-panel.is-active { display: block; opacity: 1; visibility: visible; transform: none; pointer-events: auto; } /* * Remove desktop active underline */ .mega-trigger.is-mega-active > a::after { display: none; } /* * No page overlay */ body.mega-menu-open::before, body.mega-menu-open::after { display: none !important; content: none !important; } } /* ========================================================== 14. SMALL MOBILE ========================================================== */ @media (max-width: 767px) { .icreon-mega-menu, .icreon-mega-panel { width: 100%; } } /* ========================================================== FINAL MEGA MENU NAV STYLE Single arrow only - no clashes ========================================================== */ /* ---------------------------------------------------------- 1. RESET BUILT-IN / OLD ARROWS ---------------------------------------------------------- */ .elementor-location-header .mega-trigger > a::after { content: none !important; display: none !important; } /* Hide actual submenu icon elements if the widget outputs them */ .elementor-location-header .mega-trigger .sub-arrow, .elementor-location-header .mega-trigger .dropdown-menu-toggle, .elementor-location-header .mega-trigger .menu-item-toggle, .elementor-location-header .mega-trigger > a > svg, .elementor-location-header .mega-trigger > a > i { display: none !important; } /* ---------------------------------------------------------- 2. NORMAL MENU ITEM ---------------------------------------------------------- */ .elementor-location-header .mega-trigger > a { position: relative !important; color: #222222 !important; padding-right: 20px !important; border: none !important; box-shadow: none !important; text-decoration: none !important; /* * ONE down arrow only. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23222222' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 1px center !important; background-size: 10px 6px !important; } /* ---------------------------------------------------------- 3. HOVER / OPEN TEXT COLOR ---------------------------------------------------------- */ .elementor-location-header .mega-trigger:hover > a, .elementor-location-header .mega-trigger.is-mega-active > a { color: #ed3324 !important; } /* ---------------------------------------------------------- 4. OPEN STATE - UP ARROW ---------------------------------------------------------- */ .elementor-location-header .mega-trigger.is-mega-active > a { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 5l4-4 4 4' fill='none' stroke='%23ed3324' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } /* ---------------------------------------------------------- 5. HOVER DOWN ARROW RED ---------------------------------------------------------- */ .elementor-location-header .mega-trigger:hover:not(.is-mega-active) > a { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ed3324' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } /* ========================================================== 6. RED UNDERLINE ========================================================== */ .elementor-location-header .mega-trigger > a::before { content: "" !important; display: block !important; position: absolute !important; left: 21px !important; /* * Stops underline before the arrow */ right: 14px !important; bottom: 0px !important; height: 1px !important; background: #ed3324 !important; border: none !important; opacity: 0 !important; transform: scaleX(0) !important; transform-origin: left center !important; transition: transform 0.25s ease, opacity 0.25s ease !important; } /* Show underline on hover/open */ .elementor-location-header .mega-trigger:hover > a::before, .elementor-location-header .mega-trigger.is-mega-active > a::before { opacity: 1 !important; transform: scaleX(1) !important; } /* ========================================================== 7. REMOVE ELEMENTOR ACTIVE/PAGE COLOR INTERFERENCE ========================================================== */ .elementor-location-header .mega-trigger.current-menu-item > a, .elementor-location-header .mega-trigger.current_page_item > a, .elementor-location-header .mega-trigger.current-menu-parent > a, .elementor-location-header .mega-trigger.current-menu-ancestor > a { color: #222222 !important; border: none !important; box-shadow: none !important; } /* Our mega-menu OPEN state wins */ .elementor-location-header .mega-trigger.is-mega-active > a { color: #ed3324 !important; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 1024px) { .elementor-location-header .mega-trigger > a::before { display: none !important; } } /* ========================================================== WHAT WE DO MEGA MENU ESG-SAFE NESTED TABS FIX Preserve original Elementor template layout ========================================================== */ /* ---------------------------------------------------------- 1. DO NOT ALTER THE ORIGINAL NESTED TABS LAYOUT ---------------------------------------------------------- */ #icreon-mega-menu .icreon-mega-panel[data-mega-menu="what-we-do"] .e-n-tabs { width: 100% !important; } /* Keep Elementor's original heading structure */ #icreon-mega-menu .icreon-mega-panel[data-mega-menu="what-we-do"] .e-n-tabs-heading { width: auto !important; height: auto !important; margin: 0 !important; transform: none !important; } /* Do NOT force Build / Think / Run into circles */ #icreon-mega-menu .icreon-mega-panel[data-mega-menu="what-we-do"] .e-n-tab-title { width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; transform: none !important; } /* ---------------------------------------------------------- 2. FIX THE SVG ICON PROBLEM ONLY ---------------------------------------------------------- */ /* * ESG page was blowing Elementor's built-in tab SVGs * up into those giant circular controls. * * Hide only Elementor's tab icon SVG. */ #icreon-mega-menu .icreon-mega-panel[data-mega-menu="what-we-do"] .e-n-tab-icon { display: none !important; } #icreon-mega-menu .icreon-mega-panel[data-mega-menu="what-we-do"] .e-n-tab-title svg { display: none !important; } /* ---------------------------------------------------------- 3. RECREATE THE SMALL RED RIGHT ARROW ---------------------------------------------------------- */ #icreon-mega-menu .icreon-mega-panel[data-mega-menu="what-we-do"] .e-n-tab-title::after { content: ""; display: inline-block !important; width: 6px !important; height: 6px !important; margin-left: 10px !important; border: 0 !important; border-top: 1.5px solid #ed3324 !important; border-right: 1.5px solid #ed3324 !important; background: transparent !important; transform: rotate(45deg) !important; position: relative !important; flex: 0 0 auto !important; } /* Do not create any other pseudo content */ #icreon-mega-menu .icreon-mega-panel[data-mega-menu="what-we-do"] .e-n-tab-title::before { content: none !important; } /* ---------------------------------------------------------- 4. TAB CONTENT VISIBILITY ---------------------------------------------------------- */ /* * Hide inactive Elementor Nested Tab panels. */ #icreon-mega-menu .icreon-mega-panel[data-mega-menu="what-we-do"] .e-n-tabs-content > .e-con:not(.e-active) { display: none !important; } /* * Show the active panel only. * * Importantly, we do NOT force its width, flex-direction, * padding, grid structure etc. Elementor controls those. */ #icreon-mega-menu .icreon-mega-panel[data-mega-menu="what-we-do"] .e-n-tabs-content > .e-con.e-active { display: flex !important; } /* ---------------------------------------------------------- 5. PREVENT ESG PAGE TRANSFORMS FROM BREAKING TAB CONTENT ---------------------------------------------------------- */ #icreon-mega-menu .icreon-mega-panel[data-mega-menu="what-we-do"] .e-n-tabs-content { transform: none !important; } /* ---------------------------------------------------------- 6. BASIC BOX-SIZING SAFETY ---------------------------------------------------------- */ #icreon-mega-menu .icreon-mega-panel[data-mega-menu="what-we-do"] *, #icreon-mega-menu .icreon-mega-panel[data-mega-menu="what-we-do"] *::before, #icreon-mega-menu .icreon-mega-panel[data-mega-menu="what-we-do"] *::after { box-sizing: border-box; } /* ========================================================== WHAT WE DO MEGA MENU FORCE DESIRED TWO-COLUMN NESTED TABS LAYOUT ========================================================== */ /* Main nested-tabs layout */ #icreon-mega-menu .icreon-mega-panel[data-mega-menu="what-we-do"] .e-n-tabs { display: grid !important; grid-template-columns: 350px minmax(0, 1fr) !important; width: 100% !important; align-items: stretch !important; } /* ========================================================== LEFT COLUMN - BUILD / THINK / RUN ========================================================== */ #icreon-mega-menu .icreon-mega-panel[data-mega-menu="what-we-do"] .e-n-tabs-heading { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; width: 350px !important; padding: 28px 32px !important; margin: 0 !important; gap: 12px !important; border-right: 1px solid rgba(0, 0, 0, 0.10) !important; background: transparent !important; } /* Individual tabs */ #icreon-mega-menu .icreon-mega-panel[data-mega-menu="what-we-do"] .e-n-tab-title { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; width: auto !important; min-width: 0 !important; max-width: max-content !important; height: auto !important; min-height: 0 !important; padding: 10px 16px !important; margin: 0 !important; border: 0 !important; border-radius: 30px !important; background: transparent !important; box-shadow: none !important; transform: none !important; color: #222222 !important; } /* Active tab - Think */ #icreon-mega-menu .icreon-mega-panel[data-mega-menu="what-we-do"] .e-n-tab-title[aria-selected="true"] { background: #efede8 !important; } /* Tab text */ #icreon-mega-menu .icreon-mega-panel[data-mega-menu="what-we-do"] .e-n-tab-title-text { width: auto !important; margin: 0 !important; padding: 0 !important; color: inherit !important; } /* ========================================================== TAB ICON ========================================================== */ /* Hide Elementor's original tab icon */ #icreon-mega-menu .icreon-mega-panel[data-mega-menu="what-we-do"] .e-n-tab-icon, #icreon-mega-menu .icreon-mega-panel[data-mega-menu="what-we-do"] .e-n-tab-title svg { display: none !important; } /* Custom small red arrow */ #icreon-mega-menu .icreon-mega-panel[data-mega-menu="what-we-do"] .e-n-tab-title::after { content: ""; display: inline-block !important; width: 6px !important; height: 6px !important; margin-left: 12px !important; border-top: 1.5px solid #ed3324 !important; border-right: 1.5px solid #ed3324 !important; background: transparent !important; transform: rotate(45deg) !important; position: relative !important; flex: 0 0 auto !important; } /* Remove other pseudo-element */ #icreon-mega-menu .icreon-mega-panel[data-mega-menu="what-we-do"] .e-n-tab-title::before { display: none !important; content: none !important; } /* ========================================================== RIGHT COLUMN - ACTIVE TAB CONTENT ========================================================== */ #icreon-mega-menu .icreon-mega-panel[data-mega-menu="what-we-do"] .e-n-tabs-content { width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; transform: none !important; } /* Hide inactive tabs */ #icreon-mega-menu .icreon-mega-panel[data-mega-menu="what-we-do"] .e-n-tabs-content > .e-con:not(.e-active) { display: none !important; } /* Show active Think content */ #icreon-mega-menu .icreon-mega-panel[data-mega-menu="what-we-do"] .e-n-tabs-content > .e-con.e-active { display: flex !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; } /* ========================================================== PREVENT ESG PAGE CSS FROM DISTORTING THIS WIDGET ========================================================== */ #icreon-mega-menu .icreon-mega-panel[data-mega-menu="what-we-do"] .e-n-tabs, #icreon-mega-menu .icreon-mega-panel[data-mega-menu="what-we-do"] .e-n-tabs-heading, #icreon-mega-menu .icreon-mega-panel[data-mega-menu="what-we-do"] .e-n-tabs-content, #icreon-mega-menu .icreon-mega-panel[data-mega-menu="what-we-do"] .e-n-tab-title { transform: none !important; } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 1024px) { #icreon-mega-menu .icreon-mega-panel[data-mega-menu="what-we-do"] .e-n-tabs { display: block !important; } #icreon-mega-menu .icreon-mega-panel[data-mega-menu="what-we-do"] .e-n-tabs-heading { width: 100% !important; padding: 20px !important; border-right: 0 !important; } }/* End custom CSS */