.elementor-44 .elementor-element.elementor-element-055f76a{--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;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:10px;--padding-right:10px;}.elementor-44 .elementor-element.elementor-element-055f76a:not(.elementor-motion-effects-element-type-background), .elementor-44 .elementor-element.elementor-element-055f76a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0F172B;}.elementor-44 .elementor-element.elementor-element-f91f4d5{--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 10px;--row-gap:0px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-44 .elementor-element.elementor-element-0c7cfad .elementor-icon-list-icon i{color:#FF0000;transition:color 0.3s;}.elementor-44 .elementor-element.elementor-element-0c7cfad .elementor-icon-list-icon svg{fill:#FF0000;transition:fill 0.3s;}.elementor-44 .elementor-element.elementor-element-0c7cfad{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-44 .elementor-element.elementor-element-0c7cfad .elementor-icon-list-item > .elementor-icon-list-text, .elementor-44 .elementor-element.elementor-element-0c7cfad .elementor-icon-list-item > a{font-family:"Poppins", Sans-serif;font-size:12px;font-weight:400;}.elementor-44 .elementor-element.elementor-element-0c7cfad .elementor-icon-list-text{color:#C7C7C7;transition:color 0.3s;}.elementor-44 .elementor-element.elementor-element-debce14 .elementor-icon-list-icon i{color:#00FF70;transition:color 0.3s;}.elementor-44 .elementor-element.elementor-element-debce14 .elementor-icon-list-icon svg{fill:#00FF70;transition:fill 0.3s;}.elementor-44 .elementor-element.elementor-element-debce14{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-44 .elementor-element.elementor-element-debce14 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-44 .elementor-element.elementor-element-debce14 .elementor-icon-list-item > a{font-family:"Poppins", Sans-serif;font-size:12px;font-weight:400;}.elementor-44 .elementor-element.elementor-element-debce14 .elementor-icon-list-text{color:#C7C7C7;transition:color 0.3s;}.elementor-44 .elementor-element.elementor-element-d2897d7 .elementor-icon-list-icon i{color:#00FF70;transition:color 0.3s;}.elementor-44 .elementor-element.elementor-element-d2897d7 .elementor-icon-list-icon svg{fill:#00FF70;transition:fill 0.3s;}.elementor-44 .elementor-element.elementor-element-d2897d7{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-44 .elementor-element.elementor-element-d2897d7 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-44 .elementor-element.elementor-element-d2897d7 .elementor-icon-list-item > a{font-family:"Poppins", Sans-serif;font-size:12px;font-weight:400;}.elementor-44 .elementor-element.elementor-element-d2897d7 .elementor-icon-list-text{color:#C7C7C7;transition:color 0.3s;}.elementor-44 .elementor-element.elementor-element-7c8bde9{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-44 .elementor-element.elementor-element-d3b9f81 .elementor-icon-list-icon i{color:#00FF70;transition:color 0.3s;}.elementor-44 .elementor-element.elementor-element-d3b9f81 .elementor-icon-list-icon svg{fill:#00FF70;transition:fill 0.3s;}.elementor-44 .elementor-element.elementor-element-d3b9f81{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-44 .elementor-element.elementor-element-d3b9f81 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-44 .elementor-element.elementor-element-d3b9f81 .elementor-icon-list-item > a{font-family:"Poppins", Sans-serif;font-size:12px;font-weight:400;}.elementor-44 .elementor-element.elementor-element-d3b9f81 .elementor-icon-list-text{color:#C7C7C7;transition:color 0.3s;}.elementor-44 .elementor-element.elementor-element-5cc3a4d{--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:0px 0px;--row-gap:0px;--column-gap:0px;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);--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-44 .elementor-element.elementor-element-5cc3a4d:not(.elementor-motion-effects-element-type-background), .elementor-44 .elementor-element.elementor-element-5cc3a4d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-44 .elementor-element.elementor-element-1cf614f{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-theme-site-logo .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-44 .elementor-element.elementor-element-41fb7fb{--display:flex;--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 ), 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-44 .elementor-element.elementor-element-8177567.elementor-element{--align-self:flex-end;}.elementor-44 .elementor-element.elementor-element-8177567 .elementor-menu-toggle{margin:0 auto;}.elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu .elementor-item{font-size:12px;font-weight:600;}.elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu--main .elementor-item{color:#000000;fill:#000000;padding-left:10px;padding-right:10px;}.elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu--main .elementor-item:hover, .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu--main .elementor-item.highlighted, .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu--main .elementor-item:focus{color:#076E40;fill:#076E40;}.elementor-44 .elementor-element.elementor-element-8177567{--e-nav-menu-horizontal-menu-item-margin:calc( 5px / 2 );}.elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:5px;}.elementor-44 .elementor-element.elementor-element-76f412d{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--gap:0px 10px;--row-gap:0px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-44 .elementor-element.elementor-element-2b100f4 .elementor-button{background-color:#076E40;border-style:solid;border-width:1px 1px 1px 1px;border-color:#00FF8D;border-radius:10px 10px 10px 10px;}.elementor-44 .elementor-element.elementor-element-2b100f4 .elementor-button-content-wrapper{flex-direction:row;}.elementor-44 .elementor-element.elementor-element-3827af7 .elementor-button{background-color:#FFFFFFEB;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:10px 10px 10px 10px;}.elementor-44 .elementor-element.elementor-element-a9516ae{--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;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);--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-44 .elementor-element.elementor-element-a9516ae:not(.elementor-motion-effects-element-type-background), .elementor-44 .elementor-element.elementor-element-a9516ae > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-44 .elementor-element.elementor-element-308253a{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-44 .elementor-element.elementor-element-0b5c32b{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-44 .elementor-element.elementor-element-0660283 .elementskit-menu-container{height:80px;border-radius:0px 0px 0px 0px;}.elementor-44 .elementor-element.elementor-element-0660283 .elementskit-navbar-nav > li > a{color:#000000;padding:0px 15px 0px 15px;}.elementor-44 .elementor-element.elementor-element-0660283 .elementskit-navbar-nav > li > a:hover{color:#707070;}.elementor-44 .elementor-element.elementor-element-0660283 .elementskit-navbar-nav > li > a:focus{color:#707070;}.elementor-44 .elementor-element.elementor-element-0660283 .elementskit-navbar-nav > li > a:active{color:#707070;}.elementor-44 .elementor-element.elementor-element-0660283 .elementskit-navbar-nav > li:hover > a{color:#707070;}.elementor-44 .elementor-element.elementor-element-0660283 .elementskit-navbar-nav > li:hover > a .elementskit-submenu-indicator{color:#707070;}.elementor-44 .elementor-element.elementor-element-0660283 .elementskit-navbar-nav > li > a:hover .elementskit-submenu-indicator{color:#707070;}.elementor-44 .elementor-element.elementor-element-0660283 .elementskit-navbar-nav > li > a:focus .elementskit-submenu-indicator{color:#707070;}.elementor-44 .elementor-element.elementor-element-0660283 .elementskit-navbar-nav > li > a:active .elementskit-submenu-indicator{color:#707070;}.elementor-44 .elementor-element.elementor-element-0660283 .elementskit-navbar-nav > li.current-menu-item > a{color:#707070;}.elementor-44 .elementor-element.elementor-element-0660283 .elementskit-navbar-nav > li.current-menu-ancestor > a{color:#707070;}.elementor-44 .elementor-element.elementor-element-0660283 .elementskit-navbar-nav > li.current-menu-ancestor > a .elementskit-submenu-indicator{color:#707070;}.elementor-44 .elementor-element.elementor-element-0660283 .elementskit-navbar-nav > li > a .elementskit-submenu-indicator{color:#101010;fill:#101010;}.elementor-44 .elementor-element.elementor-element-0660283 .elementskit-navbar-nav > li > a .ekit-submenu-indicator-icon{color:#101010;fill:#101010;}.elementor-44 .elementor-element.elementor-element-0660283 .elementskit-navbar-nav .elementskit-submenu-panel > li > a{padding:15px 15px 15px 15px;color:#000000;}.elementor-44 .elementor-element.elementor-element-0660283 .elementskit-navbar-nav .elementskit-submenu-panel > li > a:hover{color:#707070;}.elementor-44 .elementor-element.elementor-element-0660283 .elementskit-navbar-nav .elementskit-submenu-panel > li > a:focus{color:#707070;}.elementor-44 .elementor-element.elementor-element-0660283 .elementskit-navbar-nav .elementskit-submenu-panel > li > a:active{color:#707070;}.elementor-44 .elementor-element.elementor-element-0660283 .elementskit-navbar-nav .elementskit-submenu-panel > li:hover > a{color:#707070;}.elementor-44 .elementor-element.elementor-element-0660283 .elementskit-navbar-nav .elementskit-submenu-panel > li.current-menu-item > a{color:#707070 !important;}.elementor-44 .elementor-element.elementor-element-0660283 .elementskit-submenu-panel{padding:15px 0px 15px 0px;}.elementor-44 .elementor-element.elementor-element-0660283 .elementskit-navbar-nav .elementskit-submenu-panel{border-radius:0px 0px 0px 0px;min-width:220px;}.elementor-44 .elementor-element.elementor-element-0660283 button.elementskit-menu-hamburger{float:right;}.elementor-44 .elementor-element.elementor-element-0660283 button.elementskit-menu-hamburger .elementskit-menu-hamburger-icon{background-color:#000000;}.elementor-44 .elementor-element.elementor-element-0660283 button.elementskit-menu-hamburger > .ekit-menu-icon{color:#000000;}.elementor-44 .elementor-element.elementor-element-0660283 button.elementskit-menu-hamburger:hover .elementskit-menu-hamburger-icon{background-color:rgba(0, 0, 0, 0.5);}.elementor-44 .elementor-element.elementor-element-0660283 button.elementskit-menu-hamburger:hover > .ekit-menu-icon{color:rgba(0, 0, 0, 0.5);}.elementor-44 .elementor-element.elementor-element-0660283 button.elementskit-menu-close{border-style:solid;color:#000000;}.elementor-44 .elementor-element.elementor-element-0660283 button.elementskit-menu-close:hover{color:rgba(0, 0, 0, 0.5);}.elementor-44 .elementor-element.elementor-element-1e4f570{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--gap:0px 10px;--row-gap:0px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-44 .elementor-element.elementor-element-45afb72 .elementor-button{background-color:#076E40;border-style:solid;border-width:1px 1px 1px 1px;border-color:#00FF8D;border-radius:10px 10px 10px 10px;}.elementor-44 .elementor-element.elementor-element-45afb72 .elementor-button-content-wrapper{flex-direction:row;}.elementor-44 .elementor-element.elementor-element-b30604e .elementor-button{background-color:#FFFFFFEB;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:10px 10px 10px 10px;}.elementor-44 .elementor-element.elementor-element-c8a5d7f{--display:flex;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}.elementor-44 .elementor-element.elementor-element-c8a5d7f:not(.elementor-motion-effects-element-type-background), .elementor-44 .elementor-element.elementor-element-c8a5d7f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-44 .elementor-element.elementor-element-d602617{--display:flex;}.elementor-44 .elementor-element.elementor-element-d602617.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-44 .elementor-element.elementor-element-abb600b{--display:flex;}.elementor-44 .elementor-element.elementor-element-439c469 .elementskit-menu-container{height:80px;border-radius:0px 0px 0px 0px;}.elementor-44 .elementor-element.elementor-element-439c469 .elementskit-navbar-nav > li > a{color:#000000;padding:0px 15px 0px 15px;}.elementor-44 .elementor-element.elementor-element-439c469 .elementskit-navbar-nav > li > a:hover{color:#707070;}.elementor-44 .elementor-element.elementor-element-439c469 .elementskit-navbar-nav > li > a:focus{color:#707070;}.elementor-44 .elementor-element.elementor-element-439c469 .elementskit-navbar-nav > li > a:active{color:#707070;}.elementor-44 .elementor-element.elementor-element-439c469 .elementskit-navbar-nav > li:hover > a{color:#707070;}.elementor-44 .elementor-element.elementor-element-439c469 .elementskit-navbar-nav > li:hover > a .elementskit-submenu-indicator{color:#707070;}.elementor-44 .elementor-element.elementor-element-439c469 .elementskit-navbar-nav > li > a:hover .elementskit-submenu-indicator{color:#707070;}.elementor-44 .elementor-element.elementor-element-439c469 .elementskit-navbar-nav > li > a:focus .elementskit-submenu-indicator{color:#707070;}.elementor-44 .elementor-element.elementor-element-439c469 .elementskit-navbar-nav > li > a:active .elementskit-submenu-indicator{color:#707070;}.elementor-44 .elementor-element.elementor-element-439c469 .elementskit-navbar-nav > li.current-menu-item > a{color:#707070;}.elementor-44 .elementor-element.elementor-element-439c469 .elementskit-navbar-nav > li.current-menu-ancestor > a{color:#707070;}.elementor-44 .elementor-element.elementor-element-439c469 .elementskit-navbar-nav > li.current-menu-ancestor > a .elementskit-submenu-indicator{color:#707070;}.elementor-44 .elementor-element.elementor-element-439c469 .elementskit-navbar-nav > li > a .elementskit-submenu-indicator{color:#101010;fill:#101010;}.elementor-44 .elementor-element.elementor-element-439c469 .elementskit-navbar-nav > li > a .ekit-submenu-indicator-icon{color:#101010;fill:#101010;}.elementor-44 .elementor-element.elementor-element-439c469 .elementskit-navbar-nav .elementskit-submenu-panel > li > a{padding:15px 15px 15px 15px;color:#000000;}.elementor-44 .elementor-element.elementor-element-439c469 .elementskit-navbar-nav .elementskit-submenu-panel > li > a:hover{color:#707070;}.elementor-44 .elementor-element.elementor-element-439c469 .elementskit-navbar-nav .elementskit-submenu-panel > li > a:focus{color:#707070;}.elementor-44 .elementor-element.elementor-element-439c469 .elementskit-navbar-nav .elementskit-submenu-panel > li > a:active{color:#707070;}.elementor-44 .elementor-element.elementor-element-439c469 .elementskit-navbar-nav .elementskit-submenu-panel > li:hover > a{color:#707070;}.elementor-44 .elementor-element.elementor-element-439c469 .elementskit-navbar-nav .elementskit-submenu-panel > li.current-menu-item > a{color:#707070 !important;}.elementor-44 .elementor-element.elementor-element-439c469 .elementskit-submenu-panel{padding:15px 0px 15px 0px;}.elementor-44 .elementor-element.elementor-element-439c469 .elementskit-navbar-nav .elementskit-submenu-panel{border-radius:0px 0px 0px 0px;min-width:220px;}.elementor-44 .elementor-element.elementor-element-439c469 button.elementskit-menu-hamburger{float:right;}.elementor-44 .elementor-element.elementor-element-439c469 button.elementskit-menu-hamburger .elementskit-menu-hamburger-icon{background-color:#000000;}.elementor-44 .elementor-element.elementor-element-439c469 button.elementskit-menu-hamburger > .ekit-menu-icon{color:#000000;}.elementor-44 .elementor-element.elementor-element-439c469 button.elementskit-menu-hamburger:hover .elementskit-menu-hamburger-icon{background-color:rgba(0, 0, 0, 0.5);}.elementor-44 .elementor-element.elementor-element-439c469 button.elementskit-menu-hamburger:hover > .ekit-menu-icon{color:rgba(0, 0, 0, 0.5);}.elementor-44 .elementor-element.elementor-element-439c469 button.elementskit-menu-close{border-style:solid;color:#000000;}.elementor-44 .elementor-element.elementor-element-439c469 button.elementskit-menu-close:hover{color:rgba(0, 0, 0, 0.5);}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.elementor-44 .elementor-element.elementor-element-8177567{--e-nav-menu-horizontal-menu-item-margin:calc( 0px / 2 );}.elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:0px;}.elementor-44 .elementor-element.elementor-element-0b5c32b{--justify-content:center;}.elementor-44 .elementor-element.elementor-element-0660283.elementor-element{--align-self:flex-end;}.elementor-44 .elementor-element.elementor-element-0660283 .elementskit-nav-identity-panel{padding:10px 0px 10px 0px;}.elementor-44 .elementor-element.elementor-element-0660283 .elementskit-menu-container{max-width:350px;border-radius:0px 0px 0px 0px;}.elementor-44 .elementor-element.elementor-element-0660283 .elementskit-navbar-nav > li > a{color:#000000;padding:10px 15px 10px 15px;}.elementor-44 .elementor-element.elementor-element-0660283 .elementskit-navbar-nav .elementskit-submenu-panel > li > a{padding:15px 15px 15px 15px;}.elementor-44 .elementor-element.elementor-element-0660283 .elementskit-navbar-nav .elementskit-submenu-panel{border-radius:0px 0px 0px 0px;}.elementor-44 .elementor-element.elementor-element-0660283 button.elementskit-menu-hamburger{padding:8px 8px 8px 8px;width:45px;border-radius:3px;}.elementor-44 .elementor-element.elementor-element-0660283 button.elementskit-menu-close{padding:8px 8px 8px 8px;margin:12px 12px 12px 12px;width:45px;border-radius:3px;}.elementor-44 .elementor-element.elementor-element-0660283 .elementskit-nav-logo > img{max-width:160px;max-height:60px;}.elementor-44 .elementor-element.elementor-element-0660283 .elementskit-nav-logo{margin:5px 0px 5px 0px;padding:5px 5px 5px 5px;}.elementor-44 .elementor-element.elementor-element-1e4f570{--justify-content:flex-end;--align-items:stretch;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-44 .elementor-element.elementor-element-439c469 .elementskit-nav-identity-panel{padding:10px 0px 10px 0px;}.elementor-44 .elementor-element.elementor-element-439c469 .elementskit-menu-container{max-width:350px;border-radius:0px 0px 0px 0px;}.elementor-44 .elementor-element.elementor-element-439c469 .elementskit-navbar-nav > li > a{color:#000000;padding:10px 15px 10px 15px;}.elementor-44 .elementor-element.elementor-element-439c469 .elementskit-navbar-nav .elementskit-submenu-panel > li > a{padding:15px 15px 15px 15px;}.elementor-44 .elementor-element.elementor-element-439c469 .elementskit-navbar-nav .elementskit-submenu-panel{border-radius:0px 0px 0px 0px;}.elementor-44 .elementor-element.elementor-element-439c469 button.elementskit-menu-hamburger{padding:8px 8px 8px 8px;width:45px;border-radius:3px;}.elementor-44 .elementor-element.elementor-element-439c469 button.elementskit-menu-close{padding:8px 8px 8px 8px;margin:12px 12px 12px 12px;width:45px;border-radius:3px;}.elementor-44 .elementor-element.elementor-element-439c469 .elementskit-nav-logo > img{max-width:160px;max-height:60px;}.elementor-44 .elementor-element.elementor-element-439c469 .elementskit-nav-logo{margin:5px 0px 5px 0px;padding:5px 5px 5px 5px;}}@media(max-width:767px){.elementor-44 .elementor-element.elementor-element-0660283 button.elementskit-menu-close{border-width:0px 0px 0px 0px;}.elementor-44 .elementor-element.elementor-element-0660283 .elementskit-nav-logo > img{max-width:120px;max-height:50px;}.elementor-44 .elementor-element.elementor-element-c8a5d7f{--content-width:95%;--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;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-44 .elementor-element.elementor-element-d602617{--width:40%;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-44 .elementor-element.elementor-element-abb600b{--width:60%;--justify-content:center;--align-items:flex-end;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-44 .elementor-element.elementor-element-439c469 button.elementskit-menu-close{border-width:0px 0px 0px 0px;}.elementor-44 .elementor-element.elementor-element-439c469 .elementskit-nav-logo > img{max-width:120px;max-height:50px;}}@media(min-width:768px){.elementor-44 .elementor-element.elementor-element-055f76a{--width:100%;}.elementor-44 .elementor-element.elementor-element-f91f4d5{--width:70%;}.elementor-44 .elementor-element.elementor-element-7c8bde9{--width:30%;}.elementor-44 .elementor-element.elementor-element-1cf614f{--width:20%;}.elementor-44 .elementor-element.elementor-element-41fb7fb{--width:75%;}.elementor-44 .elementor-element.elementor-element-76f412d{--width:30%;}.elementor-44 .elementor-element.elementor-element-308253a{--width:20%;}.elementor-44 .elementor-element.elementor-element-0b5c32b{--width:75%;}.elementor-44 .elementor-element.elementor-element-1e4f570{--width:30%;}}@media(max-width:1024px) and (min-width:768px){.elementor-44 .elementor-element.elementor-element-308253a{--width:30%;}.elementor-44 .elementor-element.elementor-element-0b5c32b{--width:38%;}.elementor-44 .elementor-element.elementor-element-1e4f570{--width:40%;}}/* Start custom CSS for nav-menu, class: .elementor-element-8177567 *//* ========================================================= DRISHTIPATH EYE HOSPITAL PREMIUM DESKTOP NAVIGATION ========================================================= DESIGN: • Clean medical-premium navigation • Text-only menu • No Appointment/Donate buttons • Proper submenu alignment • No hover bridge • No unwanted vertical separator • Smooth dropdown • Blue + emerald accent • Mobile menu remains untouched IMPORTANT: DELETE ALL PREVIOUS DESKTOP MENU CSS BEFORE USING THIS CODE. ========================================================= */ /* ========================================================= DESKTOP NAVIGATION ONLY ========================================================= */ @media (min-width: 768px) { /* ===================================================== 01 — NAVIGATION LIST ===================================================== */ .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu { display: flex; align-items: center; } /* ===================================================== 02 — MAIN MENU ITEMS ===================================================== */ .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu > li { position: relative; display: flex; align-items: center; margin: 0; padding: 0; } /* ===================================================== 03 — MAIN MENU LINKS ===================================================== */ .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu > li > .elementor-item { position: relative; display: inline-flex !important; align-items: center; justify-content: center; gap: 2px; height: 42px; padding: 8px 2px !important; margin: 0 14px !important; color: #172033 !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none !important; transition: color .3s ease, transform .3s cubic-bezier(.16,1,.3,1); } /* ===================================================== 04 — REMOVE ELEMENTOR DEFAULT UNDERLINE ===================================================== */ .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu > li > .elementor-item::after { display: none !important; content: none !important; } /* ===================================================== 05 — PREMIUM ACTIVE / HOVER LINE ===================================================== */ .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu > li > .elementor-item::before { content: ""; position: absolute; left: 50%; bottom: 1px; width: 0; height: 3px; border-radius: 999px; background: linear-gradient( 90deg, #168BFF 0%, #28C7FF 50%, #00A878 100% ); transform: translateX(-50%); opacity: 0; box-shadow: 0 2px 8px rgba(22,139,255,.22); transition: width .4s cubic-bezier(.16,1,.3,1), opacity .25s ease; } /* ===================================================== 06 — NORMAL HOVER ===================================================== */ .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu > li > .elementor-item:hover { color: #087FD1 !important; background: transparent !important; transform: translateY(-1px); } /* ===================================================== 07 — HOVER LINE ===================================================== */ .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu > li > .elementor-item:hover::before { width: 62%; opacity: 1; } /* ===================================================== 08 — ACTIVE MENU ===================================================== */ .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu > li > .elementor-item.elementor-item-active { color: #087FD1 !important; } /* ===================================================== 09 — ACTIVE LINE ===================================================== */ .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu > li > .elementor-item.elementor-item-active::before { width: 52%; opacity: 1; } /* ===================================================== 10 — SUBMENU PARENT ===================================================== */ .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu > li.menu-item-has-children { position: relative; } /* ===================================================== 11 — SUBMENU ARROW ===================================================== */ .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu > li.menu-item-has-children > .elementor-item { gap: 5px !important; } .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu > li.menu-item-has-children > .elementor-item > .sub-arrow { display: inline-flex !important; align-items: center; justify-content: center; width: 11px; height: 11px; margin: 0 0 0 1px !important; padding: 0 !important; color: #566476; font-size: 9px; line-height: 1; transform: translateY(0); transition: color .25s ease, transform .3s cubic-bezier(.16,1,.3,1); } /* ===================================================== 12 — ARROW ICON ===================================================== */ .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu > li.menu-item-has-children > .elementor-item > .sub-arrow i { font-size: 9px !important; line-height: 1; } /* ===================================================== 13 — ARROW HOVER ===================================================== */ .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu > li.menu-item-has-children:hover > .elementor-item > .sub-arrow { color: #168BFF; transform: rotate(180deg); } /* ===================================================== 14 — SUBMENU IMPORTANT: The submenu starts directly at the bottom of the parent item. No margin gap. ===================================================== */ .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu > li > .sub-menu { position: absolute !important; top: 100% !important; left: 0 !important; right: auto !important; min-width: 235px; margin: 0 !important; padding: 8px !important; background: rgba(255,255,255,.985) !important; border: 1px solid rgba(19,61,95,.10); border-radius: 15px; box-shadow: 0 20px 45px rgba(15,35,55,.14), 0 6px 18px rgba(22,139,255,.06); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(7px) scale(.985); transform-origin: top left; z-index: 99999; transition: opacity .22s ease, transform .3s cubic-bezier(.16,1,.3,1), visibility 0s linear .3s; } /* ===================================================== 15 — OPEN SUBMENU ===================================================== */ .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu > li:hover > .sub-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition: opacity .22s ease, transform .3s cubic-bezier(.16,1,.3,1), visibility 0s linear 0s; } /* ===================================================== 16 — SUBMENU TOP ACCENT ===================================================== */ .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu > li > .sub-menu::after { content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, transparent, #168BFF, #28C7FF, #00A878, transparent ); opacity: .65; pointer-events: none; } /* ===================================================== 17 — SUBMENU POINTER ===================================================== */ .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu > li > .sub-menu::before { content: ""; position: absolute; top: -5px; left: 28px; width: 9px; height: 9px; background: #ffffff; border-left: 1px solid rgba(19,61,95,.10); border-top: 1px solid rgba(19,61,95,.10); transform: rotate(45deg); pointer-events: none; } /* ===================================================== 18 — SUBMENU ITEMS ===================================================== */ .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu .sub-menu .elementor-sub-item { position: relative; display: flex; align-items: center; width: 100%; min-height: 44px; padding: 11px 14px !important; margin: 2px 0; color: #293746 !important; background: transparent !important; border: none !important; border-radius: 9px; font-size: 13.5px; font-weight: 500; line-height: 1.35; white-space: nowrap; box-shadow: none !important; transition: color .25s ease, background .25s ease, padding-left .3s cubic-bezier(.16,1,.3,1); } /* ===================================================== 19 — SUBMENU LEFT ACCENT ===================================================== */ .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu .sub-menu .elementor-sub-item::before { content: ""; position: absolute; left: 7px; top: 50%; width: 2px; height: 0; border-radius: 999px; background: linear-gradient( 180deg, #168BFF, #00A878 ); transform: translateY(-50%); opacity: 0; transition: height .25s ease, opacity .25s ease; } /* ===================================================== 20 — SUBMENU HOVER ===================================================== */ .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu .sub-menu .elementor-sub-item:hover { color: #087FD1 !important; background: linear-gradient( 90deg, rgba(22,139,255,.075), rgba(0,168,120,.035) ) !important; padding-left: 20px !important; } /* ===================================================== 21 — SUBMENU HOVER ACCENT ===================================================== */ .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu .sub-menu .elementor-sub-item:hover::before { height: 19px; opacity: 1; } /* ===================================================== 22 — ACTIVE SUBMENU ===================================================== */ .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu .sub-menu .elementor-sub-item.elementor-item-active { color: #087FD1 !important; background: rgba(22,139,255,.065) !important; } /* ===================================================== 23 — NESTED SUBMENU ===================================================== */ .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu .sub-menu .menu-item-has-children { position: relative; } .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu .sub-menu .menu-item-has-children > .sub-menu { position: absolute !important; top: -8px !important; left: 100% !important; margin: 0 0 0 7px !important; min-width: 220px; padding: 8px !important; background: rgba(255,255,255,.985) !important; border: 1px solid rgba(19,61,95,.10); border-radius: 14px; box-shadow: 0 18px 40px rgba(15,35,55,.13); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(7px); transition: opacity .2s ease, transform .25s ease, visibility 0s linear .25s; } .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu .sub-menu .menu-item-has-children:hover > .sub-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); transition: opacity .2s ease, transform .25s ease, visibility 0s linear 0s; } /* ===================================================== 24 — NESTED SUBMENU ARROW ===================================================== */ .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu .sub-menu .menu-item-has-children > .elementor-sub-item { justify-content: space-between; gap: 10px; } .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu .sub-menu .menu-item-has-children > .elementor-sub-item > .sub-arrow { margin-left: auto !important; color: #64748B; } /* ===================================================== 25 — APPOINTMENT TEXT ONLY — NO BUTTON ===================================================== */ .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu > li:nth-last-child(2) > .elementor-item { display: inline-flex !important; height: 42px; padding: 8px 2px !important; margin: 0 14px !important; color: #172033 !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu > li:nth-last-child(2) > .elementor-item:hover { color: #087FD1 !important; background: transparent !important; box-shadow: none !important; transform: translateY(-1px); } /* ===================================================== 26 — DONATE TEXT ONLY — NO BUTTON ===================================================== */ .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu > li:last-child > .elementor-item { display: inline-flex !important; height: 42px; padding: 8px 2px !important; margin: 0 14px !important; color: #172033 !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu > li:last-child > .elementor-item:hover { color: #087FD1 !important; background: transparent !important; box-shadow: none !important; transform: translateY(-1px); } /* ===================================================== 27 — APPOINTMENT / DONATE UNDERLINE ===================================================== */ .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu > li:nth-last-child(2) > .elementor-item::before, .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu > li:last-child > .elementor-item::before { display: block !important; } /* ===================================================== 28 — REMOVE ANY POSSIBLE MENU SEPARATORS ===================================================== */ .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu > li::after { content: none !important; display: none !important; border: none !important; background: none !important; box-shadow: none !important; } /* ===================================================== 29 — REMOVE POSSIBLE ELEMENTOR DIVIDERS ===================================================== */ .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu > li > .elementor-item { border-left: none !important; border-right: none !important; } /* ===================================================== 30 — KEYBOARD FOCUS ===================================================== */ .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu .elementor-item:focus-visible { outline: 2px solid rgba(22,139,255,.55); outline-offset: 4px; border-radius: 5px; } /* ===================================================== 31 — STICKY HEADER ===================================================== */ .elementor-44 .elementor-element.elementor-element-8177567.elementor-sticky--effects .elementor-nav-menu > li > .elementor-item { color: #ffffff !important; } .elementor-44 .elementor-element.elementor-element-8177567.elementor-sticky--effects .elementor-nav-menu > li > .elementor-item:hover { color: #35C9FF !important; } .elementor-44 .elementor-element.elementor-element-8177567.elementor-sticky--effects .elementor-nav-menu > li > .elementor-item.elementor-item-active { color: #35C9FF !important; } /* ===================================================== 32 — STICKY SUBMENU REMAINS WHITE ===================================================== */ .elementor-44 .elementor-element.elementor-element-8177567.elementor-sticky--effects .elementor-nav-menu .sub-menu .elementor-sub-item { color: #293746 !important; } .elementor-44 .elementor-element.elementor-element-8177567.elementor-sticky--effects .elementor-nav-menu .sub-menu .elementor-sub-item:hover { color: #087FD1 !important; } } /* ========================================================= MOBILE SAFETY NOTHING HERE REBUILDS THE MOBILE MENU. ELEMENTSKIT CAN HANDLE IT. ========================================================= */ @media (max-width: 767px) { .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu > li > .elementor-item { margin-left: 8px !important; margin-right: 8px !important; } } /* ========================================================= REDUCE MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu *, .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu *::before, .elementor-44 .elementor-element.elementor-element-8177567 .elementor-nav-menu *::after { animation: none !important; transition: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-2b100f4 *//* ========================================================= DRISHTI PATH — PREMIUM PRIMARY BUTTON Elementor Style Tab Controlled CSS ONLY HANDLES THE HOVER ANIMATION ========================================================= */ /* ========================================================= BUTTON BASE Elementor Style controls: Typography Padding Background Text color Border Border radius Box shadow ========================================================= */ .elementor-44 .elementor-element.elementor-element-2b100f4 .elementor-button { position: relative; overflow: hidden; isolation: isolate; transition: transform 0.45s cubic-bezier(.22,.61,.36,1), box-shadow 0.45s cubic-bezier(.22,.61,.36,1), border-color 0.35s ease; } /* ========================================================= SLIDING HOVER COLOUR ========================================================= */ .elementor-44 .elementor-element.elementor-element-2b100f4 .elementor-button::before { content: ""; position: absolute; inset: 0; /* DRISHTI PATH THEME Emerald → Teal → Medical Cyan */ background: linear-gradient( 115deg, #087A46 0%, #0A9B65 18%, #18C9A0 38%, #35E2C0 50%, #18C9A0 62%, #0A9B65 82%, #087A46 100% ); transform: translateX(-102%); transition: transform 0.65s cubic-bezier(.22,.61,.36,1); z-index: -1; pointer-events: none; } /* ========================================================= PREMIUM LIGHT SWEEP ========================================================= */ .elementor-44 .elementor-element.elementor-element-2b100f4 .elementor-button::after { content: ""; position: absolute; top: -20%; left: -120%; width: 35%; height: 140%; background: linear-gradient( 100deg, transparent 0%, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.35) 48%, rgba(255,255,255,0.70) 50%, rgba(255,255,255,0.18) 53%, rgba(255,255,255,0.03) 75%, transparent 100% ); transform: skewX(-18deg); opacity: 0; z-index: 2; pointer-events: none; } /* ========================================================= KEEP ELEMENTOR CONTENT ABOVE ANIMATION ========================================================= */ .elementor-44 .elementor-element.elementor-element-2b100f4 .elementor-button-content-wrapper { position: relative; z-index: 5; } /* ========================================================= TEXT ========================================================= */ .elementor-44 .elementor-element.elementor-element-2b100f4 .elementor-button-text { position: relative; z-index: 5; transition: color 0.35s ease, text-shadow 0.35s ease; } /* ========================================================= ICON WRAPPER ========================================================= */ .elementor-44 .elementor-element.elementor-element-2b100f4 .elementor-button-icon { position: relative; z-index: 6; display: inline-flex; align-items: center; justify-content: center; transition: color 0.35s ease, transform 0.45s cubic-bezier(.22,.61,.36,1); } /* ========================================================= FONT AWESOME / ICON FONT ========================================================= */ .elementor-44 .elementor-element.elementor-element-2b100f4 .elementor-button-icon i { transition: color 0.35s ease, transform 0.45s cubic-bezier(.22,.61,.36,1), filter 0.35s ease; } /* ========================================================= SVG ICON ========================================================= */ .elementor-44 .elementor-element.elementor-element-2b100f4 .elementor-button-icon svg { transition: color 0.35s ease, transform 0.45s cubic-bezier(.22,.61,.36,1), filter 0.35s ease; } /* ========================================================= HOVER ========================================================= */ .elementor-44 .elementor-element.elementor-element-2b100f4 .elementor-button:hover { transform: translateY(-4px) scale(1.025); border-color: rgba(112,255,194,0.95); box-shadow: 0 18px 38px rgba(0,55,40,0.25), 0 0 22px rgba(42,225,135,0.24), 0 0 42px rgba(31,204,176,0.12), inset 0 1px 2px rgba(255,255,255,0.35); } /* ========================================================= SLIDE COLOUR IN ========================================================= */ .elementor-44 .elementor-element.elementor-element-2b100f4 .elementor-button:hover::before { transform: translateX(0); } /* ========================================================= LIGHT SWEEP ========================================================= */ .elementor-44 .elementor-element.elementor-element-2b100f4 .elementor-button:hover::after { left: 145%; opacity: 1; transition: left 0.85s cubic-bezier(.22,.61,.36,1), opacity 0.15s ease; } /* ========================================================= HOVER TEXT ========================================================= */ .elementor-44 .elementor-element.elementor-element-2b100f4 .elementor-button:hover .elementor-button-text { color: #063D2A !important; text-shadow: 0 1px 1px rgba(255,255,255,0.30); } /* ========================================================= HOVER ICON WRAPPER ========================================================= */ .elementor-44 .elementor-element.elementor-element-2b100f4 .elementor-button:hover .elementor-button-icon { color: #063D2A !important; transform: translateX(5px); } /* ========================================================= HOVER ICON ========================================================= */ .elementor-44 .elementor-element.elementor-element-2b100f4 .elementor-button:hover .elementor-button-icon i { color: #063D2A !important; filter: drop-shadow( 0 1px 1px rgba(255,255,255,0.25) ); } /* ========================================================= HOVER SVG ========================================================= */ .elementor-44 .elementor-element.elementor-element-2b100f4 .elementor-button:hover .elementor-button-icon svg { color: #063D2A !important; fill: currentColor; stroke: currentColor; filter: drop-shadow( 0 1px 1px rgba(255,255,255,0.25) ); } /* ========================================================= ACTIVE / CLICK ========================================================= */ .elementor-44 .elementor-element.elementor-element-2b100f4 .elementor-button:active { transform: translateY(-1px) scale(0.975); } /* ========================================================= FOCUS ========================================================= */ .elementor-44 .elementor-element.elementor-element-2b100f4 .elementor-button:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,0.90), 0 0 0 5px rgba(48,220,135,0.30), 0 15px 35px rgba(0,60,40,0.25); }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-3827af7 *//* ================================================ DRISHTI PATH — PREMIUM SECONDARY BUTTON Frosted White → Deep Navy / Royal Blue Elementor Style Tab Controlled ================================================ */ /* MAIN BUTTON */ .elementor-44 .elementor-element.elementor-element-3827af7 .elementor-button { position: relative; overflow: hidden; isolation: isolate; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s cubic-bezier(.22,.61,.36,1), border-color .35s ease; } /* SLIDING NAVY / BLUE BACKGROUND */ .elementor-44 .elementor-element.elementor-element-3827af7 .elementor-button::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 115deg, #102B56 0%, #153F79 20%, #1766A7 40%, #258DCC 50%, #1766A7 65%, #153F79 82%, #102B56 100% ); transform: translateX(-102%); transition: transform .65s cubic-bezier(.22,.61,.36,1); z-index: 0; pointer-events: none; } /* PREMIUM WHITE LIGHT SWEEP */ .elementor-44 .elementor-element.elementor-element-3827af7 .elementor-button::after { content: ""; position: absolute; top: -20%; left: -120%; width: 38%; height: 140%; background: linear-gradient( 100deg, transparent 0%, rgba(255,255,255,.04) 25%, rgba(255,255,255,.35) 48%, rgba(255,255,255,.65) 50%, rgba(255,255,255,.18) 53%, transparent 75% ); transform: skewX(-18deg); z-index: 2; pointer-events: none; opacity: 0; } /* KEEP CONTENT ABOVE ANIMATION */ .elementor-44 .elementor-element.elementor-element-3827af7 .elementor-button-content-wrapper { position: relative; z-index: 5; } .elementor-44 .elementor-element.elementor-element-3827af7 .elementor-button-text { position: relative; z-index: 5; transition: color .35s ease, text-shadow .35s ease; } /* ICON — FONT AWESOME AND SVG */ .elementor-44 .elementor-element.elementor-element-3827af7 .elementor-button-icon { position: relative; z-index: 6; display: inline-flex; align-items: center; justify-content: center; transition: color .35s ease, transform .45s cubic-bezier(.22,.61,.36,1); } .elementor-44 .elementor-element.elementor-element-3827af7 .elementor-button-icon i, .elementor-44 .elementor-element.elementor-element-3827af7 .elementor-button-icon svg { color: inherit !important; transition: color .35s ease, transform .45s cubic-bezier(.22,.61,.36,1), filter .35s ease; } .elementor-44 .elementor-element.elementor-element-3827af7 .elementor-button-icon svg { fill: currentColor; } /* PREMIUM HOVER */ .elementor-44 .elementor-element.elementor-element-3827af7 .elementor-button:hover { transform: translateY(-4px) scale(1.025); border-color: rgba(155,220,255,.95); box-shadow: 0 18px 38px rgba(5,30,75,.30), 0 0 22px rgba(40,145,240,.24), 0 0 42px rgba(60,185,255,.12), inset 0 1px 2px rgba(255,255,255,.35); } /* SLIDE BLUE BACKGROUND IN */ .elementor-44 .elementor-element.elementor-element-3827af7 .elementor-button:hover::before { transform: translateX(0); } /* SLIDE WHITE LIGHT ACROSS */ .elementor-44 .elementor-element.elementor-element-3827af7 .elementor-button:hover::after { left: 145%; opacity: 1; transition: left .85s cubic-bezier(.22,.61,.36,1), opacity .15s ease; } /* HOVER TEXT */ .elementor-44 .elementor-element.elementor-element-3827af7 .elementor-button:hover, .elementor-44 .elementor-element.elementor-element-3827af7 .elementor-button:hover .elementor-button-text { color: #ffffff !important; } .elementor-44 .elementor-element.elementor-element-3827af7 .elementor-button:hover .elementor-button-text { text-shadow: 0 0 8px rgba(220,245,255,.35); } /* HOVER ICON */ .elementor-44 .elementor-element.elementor-element-3827af7 .elementor-button:hover .elementor-button-icon { color: #ffffff !important; transform: translateX(5px); } .elementor-44 .elementor-element.elementor-element-3827af7 .elementor-button:hover .elementor-button-icon i, .elementor-44 .elementor-element.elementor-element-3827af7 .elementor-button:hover .elementor-button-icon svg { color: #ffffff !important; filter: drop-shadow(0 0 5px rgba(255,255,255,.35)); } /* CLICK */ .elementor-44 .elementor-element.elementor-element-3827af7 .elementor-button:active { transform: translateY(-1px) scale(.975); } /* KEYBOARD FOCUS */ .elementor-44 .elementor-element.elementor-element-3827af7 .elementor-button:focus-visible { outline: 2px solid #b5e7ff; outline-offset: 4px; } /* MOBILE */ @media (max-width:767px) { .elementor-44 .elementor-element.elementor-element-3827af7 .elementor-button:hover { transform: translateY(-2px); } } /* REDUCED MOTION */ @media (prefers-reduced-motion:reduce) { .elementor-44 .elementor-element.elementor-element-3827af7 .elementor-button, .elementor-44 .elementor-element.elementor-element-3827af7 .elementor-button::before, .elementor-44 .elementor-element.elementor-element-3827af7 .elementor-button::after, .elementor-44 .elementor-element.elementor-element-3827af7 .elementor-button-text, .elementor-44 .elementor-element.elementor-element-3827af7 .elementor-button-icon { transition: none !important; } }/* End custom CSS */ /* Start custom CSS for ekit-nav-menu, class: .elementor-element-0660283 *//* ========================================================= DRISHTIPATH EYE HOSPITAL ELEMENTSKIT MOBILE NAVIGATION PREMIUM MEDICAL / GLASS / BLUE + EMERALD THEME Designed for: ElementsKit Nav Menu Mobile Menu / Offcanvas Navigation Appointment = Emerald CTA Donate = Premium Blue CTA ========================================================= */ /* ========================================================= ELEMENTSKIT MOBILE MENU PANEL ========================================================= */ .elementskit-menu-container { background: linear-gradient( 145deg, rgba(255,255,255,.99), rgba(248,252,255,.99) ) !important; border-left: 1px solid rgba(12,110,155,.08) !important; box-shadow: -18px 0 55px rgba(12,45,65,.12), -3px 0 15px rgba(12,90,125,.05) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } /* ========================================================= MENU LIST ========================================================= */ .elementskit-navbar-nav { padding: 18px 16px 24px !important; } /* ========================================================= NORMAL MENU ITEMS ========================================================= */ .elementskit-navbar-nav > li { margin: 3px 0 !important; } .elementskit-navbar-nav > li > a { position: relative; min-height: 48px !important; padding: 13px 15px !important; display: flex !important; align-items: center !important; border-radius: 12px !important; font-family: "Poppins", sans-serif !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: -.15px !important; color: #173b57 !important; background: transparent !important; transition: color .35s ease, background .35s ease, transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease !important; } /* ========================================================= SUBTLE LEFT ACTIVE BAR ========================================================= */ .elementskit-navbar-nav > li > a::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 5px 5px 0; background: linear-gradient( 180deg, #159cff, #16bfa0 ); opacity: 0; transform: scaleY(.4); transition: opacity .35s ease, transform .35s ease; } /* ========================================================= HOVER ========================================================= */ .elementskit-navbar-nav > li > a:hover { color: #087fc2 !important; background: linear-gradient( 90deg, rgba(11,145,205,.075), rgba(18,190,170,.035) ) !important; transform: translateX(3px); box-shadow: inset 0 0 0 1px rgba(15,140,190,.055); } .elementskit-navbar-nav > li > a:hover::before { opacity: 1; transform: scaleY(1); } /* ========================================================= ACTIVE MENU ITEM ========================================================= */ .elementskit-navbar-nav > li.current-menu-item > a, .elementskit-navbar-nav > li.current_page_item > a { color: #087fc2 !important; background: linear-gradient( 90deg, rgba(8,143,203,.09), rgba(22,183,157,.035) ) !important; } .elementskit-navbar-nav > li.current-menu-item > a::before, .elementskit-navbar-nav > li.current_page_item > a::before { opacity: 1; transform: scaleY(1); } /* ========================================================= SUBMENU / DROPDOWN ========================================================= */ .elementskit-navbar-nav .elementskit-submenu-panel { margin: 2px 0 7px 8px !important; padding: 5px 0 !important; border-left: 1px solid rgba(17,136,185,.12) !important; background: transparent !important; box-shadow: none !important; } /* Submenu items */ .elementskit-navbar-nav .elementskit-submenu-panel li a { min-height: 42px !important; padding: 10px 14px 10px 17px !important; border-radius: 9px !important; font-family: "Poppins", sans-serif !important; font-size: 12px !important; font-weight: 500 !important; color: #547083 !important; transition: color .3s ease, background .3s ease, padding-left .3s ease !important; } .elementskit-navbar-nav .elementskit-submenu-panel li a:hover { color: #0785c2 !important; background: rgba(12,143,197,.055) !important; padding-left: 21px !important; } /* ========================================================= DROPDOWN ARROW ========================================================= */ .elementskit-navbar-nav .elementskit-submenu-indicator { margin-left: auto !important; width: 30px !important; height: 30px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 9px !important; color: #34718e !important; background: rgba(10,130,180,.055) !important; border: 1px solid rgba(10,130,180,.08) !important; transition: transform .4s cubic-bezier(.16,1,.3,1), background .3s ease, color .3s ease !important; } /* Arrow hover */ .elementskit-navbar-nav li:hover > a .elementskit-submenu-indicator { color: #0785c2 !important; background: rgba(8,140,195,.10) !important; } /* Arrow open */ .elementskit-navbar-nav li.elementskit-dropdown-open > a .elementskit-submenu-indicator { color: #ffffff !important; background: linear-gradient( 135deg, #078fd0, #17b494 ) !important; transform: rotate(180deg); } /* ========================================================= LAST TWO ITEMS APPOINTMENT + DONATE This assumes they are the final two items in the menu, exactly as shown in your screenshot. ========================================================= */ /* --------------------------------------------------------- APPOINTMENT --------------------------------------------------------- */ .elementskit-navbar-nav > li:nth-last-child(2) { margin-top: 18px !important; } .elementskit-navbar-nav > li:nth-last-child(2) > a { min-height: 50px !important; justify-content: center !important; padding: 12px 20px !important; border-radius: 13px !important; color: #ffffff !important; background: linear-gradient( 135deg, #087f4f 0%, #079566 50%, #12aa7b 100% ) !important; border: 1px solid rgba(255,255,255,.18) !important; box-shadow: 0 9px 22px rgba(4,125,78,.20), inset 0 1px 0 rgba(255,255,255,.25) !important; font-family: "Montserrat", sans-serif !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .05px !important; text-align: center !important; transform: translateY(0) !important; overflow: hidden !important; } /* Appointment glow */ .elementskit-navbar-nav > li:nth-last-child(2) > a::after { content: ""; position: absolute; top: 0; left: -80%; width: 45%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.32), transparent ); transform: skewX(-18deg); transition: left .7s cubic-bezier(.16,1,.3,1); } .elementskit-navbar-nav > li:nth-last-child(2) > a:hover { color: #ffffff !important; transform: translateY(-2px) !important; background: linear-gradient( 135deg, #078653, #0aaa78, #17b98c ) !important; box-shadow: 0 14px 28px rgba(4,125,78,.25), inset 0 1px 0 rgba(255,255,255,.3) !important; } .elementskit-navbar-nav > li:nth-last-child(2) > a:hover::after { left: 135%; } /* Remove active left bar from CTA */ .elementskit-navbar-nav > li:nth-last-child(2) > a::before { display: none !important; } /* --------------------------------------------------------- DONATE --------------------------------------------------------- */ .elementskit-navbar-nav > li:last-child { margin-top: 9px !important; } .elementskit-navbar-nav > li:last-child > a { min-height: 49px !important; justify-content: center !important; padding: 11px 20px !important; border-radius: 13px !important; color: #0877bd !important; background: linear-gradient( 135deg, #ffffff, #f2faff ) !important; border: 1px solid rgba(8,128,190,.30) !important; box-shadow: 0 7px 18px rgba(8,115,165,.08), inset 0 1px 0 #ffffff !important; font-family: "Montserrat", sans-serif !important; font-size: 13px !important; font-weight: 700 !important; text-align: center !important; transition: background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease !important; } /* Donate hover */ .elementskit-navbar-nav > li:last-child > a:hover { color: #ffffff !important; background: linear-gradient( 135deg, #087fc7, #0b9ed0, #17b6c1 ) !important; border-color: transparent !important; transform: translateY(-2px) !important; box-shadow: 0 12px 26px rgba(8,127,190,.22), inset 0 1px 0 rgba(255,255,255,.25) !important; } /* Remove active bar */ .elementskit-navbar-nav > li:last-child > a::before { display: none !important; } /* ========================================================= CTA PRESS ========================================================= */ .elementskit-navbar-nav > li:nth-last-child(2) > a:active, .elementskit-navbar-nav > li:last-child > a:active { transform: translateY(1px) scale(.98) !important; } /* ========================================================= MOBILE MENU CLOSE BUTTON ========================================================= */ .elementskit-menu-close { width: 38px !important; height: 38px !important; margin: 14px 15px 4px auto !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 11px !important; color: #31556d !important; background: #f2f8fb !important; border: 1px solid rgba(10,125,170,.10) !important; transition: background .3s ease, color .3s ease, transform .3s ease !important; } .elementskit-menu-close:hover { color: #ffffff !important; background: linear-gradient( 135deg, #087fc7, #13a8bd ) !important; transform: rotate(90deg); } /* ========================================================= MOBILE MENU OPENING BACKDROP ========================================================= */ .elementskit-menu-overlay { background: rgba(5,22,35,.42) !important; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } /* ========================================================= SCROLLBAR ========================================================= */ .elementskit-menu-container::-webkit-scrollbar { width: 4px; } .elementskit-menu-container::-webkit-scrollbar-track { background: transparent; } .elementskit-menu-container::-webkit-scrollbar-thumb { background: linear-gradient( #159eff, #17b590 ); border-radius: 999px; } /* ========================================================= TABLET / MOBILE SPACING ========================================================= */ @media (max-width: 767px) { .elementskit-navbar-nav { padding: 18px 14px 25px !important; } .elementskit-navbar-nav > li > a { min-height: 50px !important; font-size: 13.5px !important; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 380px) { .elementskit-navbar-nav { padding-left: 11px !important; padding-right: 11px !important; } .elementskit-navbar-nav > li > a { min-height: 48px !important; padding-left: 13px !important; padding-right: 13px !important; font-size: 13px !important; } .elementskit-navbar-nav > li:nth-last-child(2) > a, .elementskit-navbar-nav > li:last-child > a { min-height: 47px !important; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementskit-navbar-nav *, .elementskit-menu-close { animation: none !important; transition: none !important; } } /* ========================================================= DRISHTIPATH ELEMENTSKIT PREMIUM MOBILE HAMBURGER FINAL SAFE VERSION ========================================================= */ /* ========================================================= HAMBURGER BUTTON ========================================================= */ .elementor-44 .elementor-element.elementor-element-0660283 .elementskit-menu-hamburger { position: relative !important; width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; border-radius: 14px !important; background: linear-gradient( 145deg, #ffffff 0%, #f1f9fc 100% ) !important; border: 1px solid rgba(9,130,190,.16) !important; box-shadow: 0 7px 20px rgba(15,78,105,.10), 0 2px 6px rgba(15,78,105,.05), inset 0 1px 0 rgba(255,255,255,.95) !important; overflow: hidden !important; cursor: pointer !important; transition: transform .35s cubic-bezier(.16,1,.3,1), background .35s ease, border-color .35s ease, box-shadow .35s ease !important; } /* ========================================================= SOFT BLUE AMBIENT GLOW ========================================================= */ .elementor-44 .elementor-element.elementor-element-0660283 .elementskit-menu-hamburger::before { content: "" !important; position: absolute !important; width: 75px !important; height: 75px !important; left: 50% !important; top: 50% !important; transform: translate(-50%,-50%) !important; border-radius: 50% !important; background: radial-gradient( circle, rgba(25,174,226,.13) 0%, rgba(25,174,226,.05) 40%, transparent 72% ) !important; opacity: 0 !important; pointer-events: none !important; transition: opacity .4s ease, transform .45s ease !important; } /* ========================================================= ELEMENTSKIT'S ACTUAL THREE HAMBURGER LINES ========================================================= */ .elementor-44 .elementor-element.elementor-element-0660283 .elementskit-menu-hamburger .elementskit-menu-hamburger-icon { position: relative !important; display: block !important; width: 22px !important; height: 2px !important; min-width: 22px !important; min-height: 2px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: linear-gradient( 90deg, #087fc2, #13b5cf ) !important; box-shadow: 0 0 7px rgba(8,127,194,.16) !important; opacity: 1 !important; transform: none !important; transition: width .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1), opacity .3s ease, background .3s ease !important; } /* ========================================================= SPACE BETWEEN THREE LINES ========================================================= */ .elementor-44 .elementor-element.elementor-element-0660283 .elementskit-menu-hamburger .elementskit-menu-hamburger-icon + .elementskit-menu-hamburger-icon { margin-top: 5px !important; } /* ========================================================= DIFFERENT LINE LENGTHS ========================================================= */ .elementor-44 .elementor-element.elementor-element-0660283 .elementskit-menu-hamburger .elementskit-menu-hamburger-icon:nth-child(1) { width: 22px !important; } .elementor-44 .elementor-element.elementor-element-0660283 .elementskit-menu-hamburger .elementskit-menu-hamburger-icon:nth-child(2) { width: 16px !important; } .elementor-44 .elementor-element.elementor-element-0660283 .elementskit-menu-hamburger .elementskit-menu-hamburger-icon:nth-child(3) { width: 20px !important; } /* ========================================================= HOVER ========================================================= */ .elementor-44 .elementor-element.elementor-element-0660283 .elementskit-menu-hamburger:hover { transform: translateY(-2px) !important; border-color: rgba(8,137,195,.30) !important; background: linear-gradient( 145deg, #ffffff, #eaf8fc ) !important; box-shadow: 0 12px 28px rgba(8,113,160,.14), 0 3px 8px rgba(8,113,160,.06), inset 0 1px 0 #ffffff !important; } .elementor-44 .elementor-element.elementor-element-0660283 .elementskit-menu-hamburger:hover::before { opacity: 1 !important; transform: translate(-50%,-50%) scale(1.15) !important; } /* ========================================================= HOVER LINE ANIMATION ========================================================= */ .elementor-44 .elementor-element.elementor-element-0660283 .elementskit-menu-hamburger:hover .elementskit-menu-hamburger-icon:nth-child(1) { width: 18px !important; } .elementor-44 .elementor-element.elementor-element-0660283 .elementskit-menu-hamburger:hover .elementskit-menu-hamburger-icon:nth-child(2) { width: 22px !important; } .elementor-44 .elementor-element.elementor-element-0660283 .elementskit-menu-hamburger:hover .elementskit-menu-hamburger-icon:nth-child(3) { width: 15px !important; } /* ========================================================= OPEN / ACTIVE BUTTON ========================================================= */ .elementor-44 .elementor-element.elementor-element-0660283 .elementskit-menu-hamburger[aria-expanded="true"] { background: linear-gradient( 135deg, #087fc7 0%, #0ca5c3 55%, #17b58e 100% ) !important; border-color: transparent !important; box-shadow: 0 12px 28px rgba(8,127,190,.24), inset 0 1px 0 rgba(255,255,255,.25) !important; transform: none !important; } /* ========================================================= OPEN STATE — WHITE LINES ========================================================= */ .elementor-44 .elementor-element.elementor-element-0660283 .elementskit-menu-hamburger[aria-expanded="true"] .elementskit-menu-hamburger-icon { background: #ffffff !important; box-shadow: 0 0 7px rgba(255,255,255,.22) !important; } /* ========================================================= OPEN STATE — MORPH INTO X ========================================================= */ .elementor-44 .elementor-element.elementor-element-0660283 .elementskit-menu-hamburger[aria-expanded="true"] .elementskit-menu-hamburger-icon:nth-child(1) { width: 21px !important; transform: translateY(7px) rotate(45deg) !important; } .elementor-44 .elementor-element.elementor-element-0660283 .elementskit-menu-hamburger[aria-expanded="true"] .elementskit-menu-hamburger-icon:nth-child(2) { width: 21px !important; opacity: 0 !important; transform: translateX(-5px) !important; } .elementor-44 .elementor-element.elementor-element-0660283 .elementskit-menu-hamburger[aria-expanded="true"] .elementskit-menu-hamburger-icon:nth-child(3) { width: 21px !important; transform: translateY(-7px) rotate(-45deg) !important; } /* ========================================================= PRESS EFFECT ========================================================= */ .elementor-44 .elementor-element.elementor-element-0660283 .elementskit-menu-hamburger:active { transform: scale(.94) !important; box-shadow: 0 5px 12px rgba(8,113,160,.10) !important; } /* ========================================================= KEYBOARD FOCUS ========================================================= */ .elementor-44 .elementor-element.elementor-element-0660283 .elementskit-menu-hamburger:focus-visible { outline: 2px solid rgba(20,160,220,.65) !important; outline-offset: 4px !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-44 .elementor-element.elementor-element-0660283 .elementskit-menu-hamburger { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; border-radius: 14px !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .elementor-44 .elementor-element.elementor-element-0660283 .elementskit-menu-hamburger { width: 46px !important; height: 46px !important; min-width: 46px !important; min-height: 46px !important; border-radius: 13px !important; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-44 .elementor-element.elementor-element-0660283 .elementskit-menu-hamburger, .elementor-44 .elementor-element.elementor-element-0660283 .elementskit-menu-hamburger *, .elementor-44 .elementor-element.elementor-element-0660283 .elementskit-menu-hamburger::before { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-45afb72 *//* ========================================================= DRISHTI PATH — PREMIUM PRIMARY BUTTON Elementor Style Tab Controlled CSS ONLY HANDLES THE HOVER ANIMATION ========================================================= */ /* ========================================================= BUTTON BASE Elementor Style controls: Typography Padding Background Text color Border Border radius Box shadow ========================================================= */ .elementor-44 .elementor-element.elementor-element-45afb72 .elementor-button { position: relative; overflow: hidden; isolation: isolate; transition: transform 0.45s cubic-bezier(.22,.61,.36,1), box-shadow 0.45s cubic-bezier(.22,.61,.36,1), border-color 0.35s ease; } /* ========================================================= SLIDING HOVER COLOUR ========================================================= */ .elementor-44 .elementor-element.elementor-element-45afb72 .elementor-button::before { content: ""; position: absolute; inset: 0; /* DRISHTI PATH THEME Emerald → Teal → Medical Cyan */ background: linear-gradient( 115deg, #087A46 0%, #0A9B65 18%, #18C9A0 38%, #35E2C0 50%, #18C9A0 62%, #0A9B65 82%, #087A46 100% ); transform: translateX(-102%); transition: transform 0.65s cubic-bezier(.22,.61,.36,1); z-index: -1; pointer-events: none; } /* ========================================================= PREMIUM LIGHT SWEEP ========================================================= */ .elementor-44 .elementor-element.elementor-element-45afb72 .elementor-button::after { content: ""; position: absolute; top: -20%; left: -120%; width: 35%; height: 140%; background: linear-gradient( 100deg, transparent 0%, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.35) 48%, rgba(255,255,255,0.70) 50%, rgba(255,255,255,0.18) 53%, rgba(255,255,255,0.03) 75%, transparent 100% ); transform: skewX(-18deg); opacity: 0; z-index: 2; pointer-events: none; } /* ========================================================= KEEP ELEMENTOR CONTENT ABOVE ANIMATION ========================================================= */ .elementor-44 .elementor-element.elementor-element-45afb72 .elementor-button-content-wrapper { position: relative; z-index: 5; } /* ========================================================= TEXT ========================================================= */ .elementor-44 .elementor-element.elementor-element-45afb72 .elementor-button-text { position: relative; z-index: 5; transition: color 0.35s ease, text-shadow 0.35s ease; } /* ========================================================= ICON WRAPPER ========================================================= */ .elementor-44 .elementor-element.elementor-element-45afb72 .elementor-button-icon { position: relative; z-index: 6; display: inline-flex; align-items: center; justify-content: center; transition: color 0.35s ease, transform 0.45s cubic-bezier(.22,.61,.36,1); } /* ========================================================= FONT AWESOME / ICON FONT ========================================================= */ .elementor-44 .elementor-element.elementor-element-45afb72 .elementor-button-icon i { transition: color 0.35s ease, transform 0.45s cubic-bezier(.22,.61,.36,1), filter 0.35s ease; } /* ========================================================= SVG ICON ========================================================= */ .elementor-44 .elementor-element.elementor-element-45afb72 .elementor-button-icon svg { transition: color 0.35s ease, transform 0.45s cubic-bezier(.22,.61,.36,1), filter 0.35s ease; } /* ========================================================= HOVER ========================================================= */ .elementor-44 .elementor-element.elementor-element-45afb72 .elementor-button:hover { transform: translateY(-4px) scale(1.025); border-color: rgba(112,255,194,0.95); box-shadow: 0 18px 38px rgba(0,55,40,0.25), 0 0 22px rgba(42,225,135,0.24), 0 0 42px rgba(31,204,176,0.12), inset 0 1px 2px rgba(255,255,255,0.35); } /* ========================================================= SLIDE COLOUR IN ========================================================= */ .elementor-44 .elementor-element.elementor-element-45afb72 .elementor-button:hover::before { transform: translateX(0); } /* ========================================================= LIGHT SWEEP ========================================================= */ .elementor-44 .elementor-element.elementor-element-45afb72 .elementor-button:hover::after { left: 145%; opacity: 1; transition: left 0.85s cubic-bezier(.22,.61,.36,1), opacity 0.15s ease; } /* ========================================================= HOVER TEXT ========================================================= */ .elementor-44 .elementor-element.elementor-element-45afb72 .elementor-button:hover .elementor-button-text { color: #063D2A !important; text-shadow: 0 1px 1px rgba(255,255,255,0.30); } /* ========================================================= HOVER ICON WRAPPER ========================================================= */ .elementor-44 .elementor-element.elementor-element-45afb72 .elementor-button:hover .elementor-button-icon { color: #063D2A !important; transform: translateX(5px); } /* ========================================================= HOVER ICON ========================================================= */ .elementor-44 .elementor-element.elementor-element-45afb72 .elementor-button:hover .elementor-button-icon i { color: #063D2A !important; filter: drop-shadow( 0 1px 1px rgba(255,255,255,0.25) ); } /* ========================================================= HOVER SVG ========================================================= */ .elementor-44 .elementor-element.elementor-element-45afb72 .elementor-button:hover .elementor-button-icon svg { color: #063D2A !important; fill: currentColor; stroke: currentColor; filter: drop-shadow( 0 1px 1px rgba(255,255,255,0.25) ); } /* ========================================================= ACTIVE / CLICK ========================================================= */ .elementor-44 .elementor-element.elementor-element-45afb72 .elementor-button:active { transform: translateY(-1px) scale(0.975); } /* ========================================================= FOCUS ========================================================= */ .elementor-44 .elementor-element.elementor-element-45afb72 .elementor-button:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,0.90), 0 0 0 5px rgba(48,220,135,0.30), 0 15px 35px rgba(0,60,40,0.25); }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-b30604e *//* ================================================ DRISHTI PATH — PREMIUM SECONDARY BUTTON Frosted White → Deep Navy / Royal Blue Elementor Style Tab Controlled ================================================ */ /* MAIN BUTTON */ .elementor-44 .elementor-element.elementor-element-b30604e .elementor-button { position: relative; overflow: hidden; isolation: isolate; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s cubic-bezier(.22,.61,.36,1), border-color .35s ease; } /* SLIDING NAVY / BLUE BACKGROUND */ .elementor-44 .elementor-element.elementor-element-b30604e .elementor-button::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 115deg, #102B56 0%, #153F79 20%, #1766A7 40%, #258DCC 50%, #1766A7 65%, #153F79 82%, #102B56 100% ); transform: translateX(-102%); transition: transform .65s cubic-bezier(.22,.61,.36,1); z-index: 0; pointer-events: none; } /* PREMIUM WHITE LIGHT SWEEP */ .elementor-44 .elementor-element.elementor-element-b30604e .elementor-button::after { content: ""; position: absolute; top: -20%; left: -120%; width: 38%; height: 140%; background: linear-gradient( 100deg, transparent 0%, rgba(255,255,255,.04) 25%, rgba(255,255,255,.35) 48%, rgba(255,255,255,.65) 50%, rgba(255,255,255,.18) 53%, transparent 75% ); transform: skewX(-18deg); z-index: 2; pointer-events: none; opacity: 0; } /* KEEP CONTENT ABOVE ANIMATION */ .elementor-44 .elementor-element.elementor-element-b30604e .elementor-button-content-wrapper { position: relative; z-index: 5; } .elementor-44 .elementor-element.elementor-element-b30604e .elementor-button-text { position: relative; z-index: 5; transition: color .35s ease, text-shadow .35s ease; } /* ICON — FONT AWESOME AND SVG */ .elementor-44 .elementor-element.elementor-element-b30604e .elementor-button-icon { position: relative; z-index: 6; display: inline-flex; align-items: center; justify-content: center; transition: color .35s ease, transform .45s cubic-bezier(.22,.61,.36,1); } .elementor-44 .elementor-element.elementor-element-b30604e .elementor-button-icon i, .elementor-44 .elementor-element.elementor-element-b30604e .elementor-button-icon svg { color: inherit !important; transition: color .35s ease, transform .45s cubic-bezier(.22,.61,.36,1), filter .35s ease; } .elementor-44 .elementor-element.elementor-element-b30604e .elementor-button-icon svg { fill: currentColor; } /* PREMIUM HOVER */ .elementor-44 .elementor-element.elementor-element-b30604e .elementor-button:hover { transform: translateY(-4px) scale(1.025); border-color: rgba(155,220,255,.95); box-shadow: 0 18px 38px rgba(5,30,75,.30), 0 0 22px rgba(40,145,240,.24), 0 0 42px rgba(60,185,255,.12), inset 0 1px 2px rgba(255,255,255,.35); } /* SLIDE BLUE BACKGROUND IN */ .elementor-44 .elementor-element.elementor-element-b30604e .elementor-button:hover::before { transform: translateX(0); } /* SLIDE WHITE LIGHT ACROSS */ .elementor-44 .elementor-element.elementor-element-b30604e .elementor-button:hover::after { left: 145%; opacity: 1; transition: left .85s cubic-bezier(.22,.61,.36,1), opacity .15s ease; } /* HOVER TEXT */ .elementor-44 .elementor-element.elementor-element-b30604e .elementor-button:hover, .elementor-44 .elementor-element.elementor-element-b30604e .elementor-button:hover .elementor-button-text { color: #ffffff !important; } .elementor-44 .elementor-element.elementor-element-b30604e .elementor-button:hover .elementor-button-text { text-shadow: 0 0 8px rgba(220,245,255,.35); } /* HOVER ICON */ .elementor-44 .elementor-element.elementor-element-b30604e .elementor-button:hover .elementor-button-icon { color: #ffffff !important; transform: translateX(5px); } .elementor-44 .elementor-element.elementor-element-b30604e .elementor-button:hover .elementor-button-icon i, .elementor-44 .elementor-element.elementor-element-b30604e .elementor-button:hover .elementor-button-icon svg { color: #ffffff !important; filter: drop-shadow(0 0 5px rgba(255,255,255,.35)); } /* CLICK */ .elementor-44 .elementor-element.elementor-element-b30604e .elementor-button:active { transform: translateY(-1px) scale(.975); } /* KEYBOARD FOCUS */ .elementor-44 .elementor-element.elementor-element-b30604e .elementor-button:focus-visible { outline: 2px solid #b5e7ff; outline-offset: 4px; } /* MOBILE */ @media (max-width:767px) { .elementor-44 .elementor-element.elementor-element-b30604e .elementor-button:hover { transform: translateY(-2px); } } /* REDUCED MOTION */ @media (prefers-reduced-motion:reduce) { .elementor-44 .elementor-element.elementor-element-b30604e .elementor-button, .elementor-44 .elementor-element.elementor-element-b30604e .elementor-button::before, .elementor-44 .elementor-element.elementor-element-b30604e .elementor-button::after, .elementor-44 .elementor-element.elementor-element-b30604e .elementor-button-text, .elementor-44 .elementor-element.elementor-element-b30604e .elementor-button-icon { transition: none !important; } }/* End custom CSS */ /* Start custom CSS for ekit-nav-menu, class: .elementor-element-439c469 *//* ========================================================= DRISHTIPATH EYE HOSPITAL ELEMENTSKIT MOBILE NAVIGATION PREMIUM MEDICAL / GLASS / BLUE + EMERALD THEME Designed for: ElementsKit Nav Menu Mobile Menu / Offcanvas Navigation Appointment = Emerald CTA Donate = Premium Blue CTA ========================================================= */ /* ========================================================= ELEMENTSKIT MOBILE MENU PANEL ========================================================= */ .elementskit-menu-container { background: linear-gradient( 145deg, rgba(255,255,255,.99), rgba(248,252,255,.99) ) !important; border-left: 1px solid rgba(12,110,155,.08) !important; box-shadow: -18px 0 55px rgba(12,45,65,.12), -3px 0 15px rgba(12,90,125,.05) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } /* ========================================================= MENU LIST ========================================================= */ .elementskit-navbar-nav { padding: 18px 16px 24px !important; } /* ========================================================= NORMAL MENU ITEMS ========================================================= */ .elementskit-navbar-nav > li { margin: 3px 0 !important; } .elementskit-navbar-nav > li > a { position: relative; min-height: 48px !important; padding: 13px 15px !important; display: flex !important; align-items: center !important; border-radius: 12px !important; font-family: "Poppins", sans-serif !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: -.15px !important; color: #173b57 !important; background: transparent !important; transition: color .35s ease, background .35s ease, transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease !important; } /* ========================================================= SUBTLE LEFT ACTIVE BAR ========================================================= */ .elementskit-navbar-nav > li > a::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 5px 5px 0; background: linear-gradient( 180deg, #159cff, #16bfa0 ); opacity: 0; transform: scaleY(.4); transition: opacity .35s ease, transform .35s ease; } /* ========================================================= HOVER ========================================================= */ .elementskit-navbar-nav > li > a:hover { color: #087fc2 !important; background: linear-gradient( 90deg, rgba(11,145,205,.075), rgba(18,190,170,.035) ) !important; transform: translateX(3px); box-shadow: inset 0 0 0 1px rgba(15,140,190,.055); } .elementskit-navbar-nav > li > a:hover::before { opacity: 1; transform: scaleY(1); } /* ========================================================= ACTIVE MENU ITEM ========================================================= */ .elementskit-navbar-nav > li.current-menu-item > a, .elementskit-navbar-nav > li.current_page_item > a { color: #087fc2 !important; background: linear-gradient( 90deg, rgba(8,143,203,.09), rgba(22,183,157,.035) ) !important; } .elementskit-navbar-nav > li.current-menu-item > a::before, .elementskit-navbar-nav > li.current_page_item > a::before { opacity: 1; transform: scaleY(1); } /* ========================================================= SUBMENU / DROPDOWN ========================================================= */ .elementskit-navbar-nav .elementskit-submenu-panel { margin: 2px 0 7px 8px !important; padding: 5px 0 !important; border-left: 1px solid rgba(17,136,185,.12) !important; background: transparent !important; box-shadow: none !important; } /* Submenu items */ .elementskit-navbar-nav .elementskit-submenu-panel li a { min-height: 42px !important; padding: 10px 14px 10px 17px !important; border-radius: 9px !important; font-family: "Poppins", sans-serif !important; font-size: 12px !important; font-weight: 500 !important; color: #547083 !important; transition: color .3s ease, background .3s ease, padding-left .3s ease !important; } .elementskit-navbar-nav .elementskit-submenu-panel li a:hover { color: #0785c2 !important; background: rgba(12,143,197,.055) !important; padding-left: 21px !important; } /* ========================================================= DROPDOWN ARROW ========================================================= */ .elementskit-navbar-nav .elementskit-submenu-indicator { margin-left: auto !important; width: 30px !important; height: 30px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 9px !important; color: #34718e !important; background: rgba(10,130,180,.055) !important; border: 1px solid rgba(10,130,180,.08) !important; transition: transform .4s cubic-bezier(.16,1,.3,1), background .3s ease, color .3s ease !important; } /* Arrow hover */ .elementskit-navbar-nav li:hover > a .elementskit-submenu-indicator { color: #0785c2 !important; background: rgba(8,140,195,.10) !important; } /* Arrow open */ .elementskit-navbar-nav li.elementskit-dropdown-open > a .elementskit-submenu-indicator { color: #ffffff !important; background: linear-gradient( 135deg, #078fd0, #17b494 ) !important; transform: rotate(180deg); } /* ========================================================= LAST TWO ITEMS APPOINTMENT + DONATE This assumes they are the final two items in the menu, exactly as shown in your screenshot. ========================================================= */ /* --------------------------------------------------------- APPOINTMENT --------------------------------------------------------- */ .elementskit-navbar-nav > li:nth-last-child(2) { margin-top: 18px !important; } .elementskit-navbar-nav > li:nth-last-child(2) > a { min-height: 50px !important; justify-content: center !important; padding: 12px 20px !important; border-radius: 13px !important; color: #ffffff !important; background: linear-gradient( 135deg, #087f4f 0%, #079566 50%, #12aa7b 100% ) !important; border: 1px solid rgba(255,255,255,.18) !important; box-shadow: 0 9px 22px rgba(4,125,78,.20), inset 0 1px 0 rgba(255,255,255,.25) !important; font-family: "Montserrat", sans-serif !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .05px !important; text-align: center !important; transform: translateY(0) !important; overflow: hidden !important; } /* Appointment glow */ .elementskit-navbar-nav > li:nth-last-child(2) > a::after { content: ""; position: absolute; top: 0; left: -80%; width: 45%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.32), transparent ); transform: skewX(-18deg); transition: left .7s cubic-bezier(.16,1,.3,1); } .elementskit-navbar-nav > li:nth-last-child(2) > a:hover { color: #ffffff !important; transform: translateY(-2px) !important; background: linear-gradient( 135deg, #078653, #0aaa78, #17b98c ) !important; box-shadow: 0 14px 28px rgba(4,125,78,.25), inset 0 1px 0 rgba(255,255,255,.3) !important; } .elementskit-navbar-nav > li:nth-last-child(2) > a:hover::after { left: 135%; } /* Remove active left bar from CTA */ .elementskit-navbar-nav > li:nth-last-child(2) > a::before { display: none !important; } /* --------------------------------------------------------- DONATE --------------------------------------------------------- */ .elementskit-navbar-nav > li:last-child { margin-top: 9px !important; } .elementskit-navbar-nav > li:last-child > a { min-height: 49px !important; justify-content: center !important; padding: 11px 20px !important; border-radius: 13px !important; color: #0877bd !important; background: linear-gradient( 135deg, #ffffff, #f2faff ) !important; border: 1px solid rgba(8,128,190,.30) !important; box-shadow: 0 7px 18px rgba(8,115,165,.08), inset 0 1px 0 #ffffff !important; font-family: "Montserrat", sans-serif !important; font-size: 13px !important; font-weight: 700 !important; text-align: center !important; transition: background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease !important; } /* Donate hover */ .elementskit-navbar-nav > li:last-child > a:hover { color: #ffffff !important; background: linear-gradient( 135deg, #087fc7, #0b9ed0, #17b6c1 ) !important; border-color: transparent !important; transform: translateY(-2px) !important; box-shadow: 0 12px 26px rgba(8,127,190,.22), inset 0 1px 0 rgba(255,255,255,.25) !important; } /* Remove active bar */ .elementskit-navbar-nav > li:last-child > a::before { display: none !important; } /* ========================================================= CTA PRESS ========================================================= */ .elementskit-navbar-nav > li:nth-last-child(2) > a:active, .elementskit-navbar-nav > li:last-child > a:active { transform: translateY(1px) scale(.98) !important; } /* ========================================================= MOBILE MENU CLOSE BUTTON ========================================================= */ .elementskit-menu-close { width: 38px !important; height: 38px !important; margin: 14px 15px 4px auto !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 11px !important; color: #31556d !important; background: #f2f8fb !important; border: 1px solid rgba(10,125,170,.10) !important; transition: background .3s ease, color .3s ease, transform .3s ease !important; } .elementskit-menu-close:hover { color: #ffffff !important; background: linear-gradient( 135deg, #087fc7, #13a8bd ) !important; transform: rotate(90deg); } /* ========================================================= MOBILE MENU OPENING BACKDROP ========================================================= */ .elementskit-menu-overlay { background: rgba(5,22,35,.42) !important; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } /* ========================================================= SCROLLBAR ========================================================= */ .elementskit-menu-container::-webkit-scrollbar { width: 4px; } .elementskit-menu-container::-webkit-scrollbar-track { background: transparent; } .elementskit-menu-container::-webkit-scrollbar-thumb { background: linear-gradient( #159eff, #17b590 ); border-radius: 999px; } /* ========================================================= TABLET / MOBILE SPACING ========================================================= */ @media (max-width: 767px) { .elementskit-navbar-nav { padding: 18px 14px 25px !important; } .elementskit-navbar-nav > li > a { min-height: 50px !important; font-size: 13.5px !important; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 380px) { .elementskit-navbar-nav { padding-left: 11px !important; padding-right: 11px !important; } .elementskit-navbar-nav > li > a { min-height: 48px !important; padding-left: 13px !important; padding-right: 13px !important; font-size: 13px !important; } .elementskit-navbar-nav > li:nth-last-child(2) > a, .elementskit-navbar-nav > li:last-child > a { min-height: 47px !important; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementskit-navbar-nav *, .elementskit-menu-close { animation: none !important; transition: none !important; } } /* ========================================================= DRISHTIPATH ELEMENTSKIT PREMIUM MOBILE HAMBURGER FINAL SAFE VERSION ========================================================= */ /* ========================================================= HAMBURGER BUTTON ========================================================= */ .elementor-44 .elementor-element.elementor-element-439c469 .elementskit-menu-hamburger { position: relative !important; width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; border-radius: 14px !important; background: linear-gradient( 145deg, #ffffff 0%, #f1f9fc 100% ) !important; border: 1px solid rgba(9,130,190,.16) !important; box-shadow: 0 7px 20px rgba(15,78,105,.10), 0 2px 6px rgba(15,78,105,.05), inset 0 1px 0 rgba(255,255,255,.95) !important; overflow: hidden !important; cursor: pointer !important; transition: transform .35s cubic-bezier(.16,1,.3,1), background .35s ease, border-color .35s ease, box-shadow .35s ease !important; } /* ========================================================= SOFT BLUE AMBIENT GLOW ========================================================= */ .elementor-44 .elementor-element.elementor-element-439c469 .elementskit-menu-hamburger::before { content: "" !important; position: absolute !important; width: 75px !important; height: 75px !important; left: 50% !important; top: 50% !important; transform: translate(-50%,-50%) !important; border-radius: 50% !important; background: radial-gradient( circle, rgba(25,174,226,.13) 0%, rgba(25,174,226,.05) 40%, transparent 72% ) !important; opacity: 0 !important; pointer-events: none !important; transition: opacity .4s ease, transform .45s ease !important; } /* ========================================================= ELEMENTSKIT'S ACTUAL THREE HAMBURGER LINES ========================================================= */ .elementor-44 .elementor-element.elementor-element-439c469 .elementskit-menu-hamburger .elementskit-menu-hamburger-icon { position: relative !important; display: block !important; width: 22px !important; height: 2px !important; min-width: 22px !important; min-height: 2px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: linear-gradient( 90deg, #087fc2, #13b5cf ) !important; box-shadow: 0 0 7px rgba(8,127,194,.16) !important; opacity: 1 !important; transform: none !important; transition: width .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1), opacity .3s ease, background .3s ease !important; } /* ========================================================= SPACE BETWEEN THREE LINES ========================================================= */ .elementor-44 .elementor-element.elementor-element-439c469 .elementskit-menu-hamburger .elementskit-menu-hamburger-icon + .elementskit-menu-hamburger-icon { margin-top: 5px !important; } /* ========================================================= DIFFERENT LINE LENGTHS ========================================================= */ .elementor-44 .elementor-element.elementor-element-439c469 .elementskit-menu-hamburger .elementskit-menu-hamburger-icon:nth-child(1) { width: 22px !important; } .elementor-44 .elementor-element.elementor-element-439c469 .elementskit-menu-hamburger .elementskit-menu-hamburger-icon:nth-child(2) { width: 16px !important; } .elementor-44 .elementor-element.elementor-element-439c469 .elementskit-menu-hamburger .elementskit-menu-hamburger-icon:nth-child(3) { width: 20px !important; } /* ========================================================= HOVER ========================================================= */ .elementor-44 .elementor-element.elementor-element-439c469 .elementskit-menu-hamburger:hover { transform: translateY(-2px) !important; border-color: rgba(8,137,195,.30) !important; background: linear-gradient( 145deg, #ffffff, #eaf8fc ) !important; box-shadow: 0 12px 28px rgba(8,113,160,.14), 0 3px 8px rgba(8,113,160,.06), inset 0 1px 0 #ffffff !important; } .elementor-44 .elementor-element.elementor-element-439c469 .elementskit-menu-hamburger:hover::before { opacity: 1 !important; transform: translate(-50%,-50%) scale(1.15) !important; } /* ========================================================= HOVER LINE ANIMATION ========================================================= */ .elementor-44 .elementor-element.elementor-element-439c469 .elementskit-menu-hamburger:hover .elementskit-menu-hamburger-icon:nth-child(1) { width: 18px !important; } .elementor-44 .elementor-element.elementor-element-439c469 .elementskit-menu-hamburger:hover .elementskit-menu-hamburger-icon:nth-child(2) { width: 22px !important; } .elementor-44 .elementor-element.elementor-element-439c469 .elementskit-menu-hamburger:hover .elementskit-menu-hamburger-icon:nth-child(3) { width: 15px !important; } /* ========================================================= OPEN / ACTIVE BUTTON ========================================================= */ .elementor-44 .elementor-element.elementor-element-439c469 .elementskit-menu-hamburger[aria-expanded="true"] { background: linear-gradient( 135deg, #087fc7 0%, #0ca5c3 55%, #17b58e 100% ) !important; border-color: transparent !important; box-shadow: 0 12px 28px rgba(8,127,190,.24), inset 0 1px 0 rgba(255,255,255,.25) !important; transform: none !important; } /* ========================================================= OPEN STATE — WHITE LINES ========================================================= */ .elementor-44 .elementor-element.elementor-element-439c469 .elementskit-menu-hamburger[aria-expanded="true"] .elementskit-menu-hamburger-icon { background: #ffffff !important; box-shadow: 0 0 7px rgba(255,255,255,.22) !important; } /* ========================================================= OPEN STATE — MORPH INTO X ========================================================= */ .elementor-44 .elementor-element.elementor-element-439c469 .elementskit-menu-hamburger[aria-expanded="true"] .elementskit-menu-hamburger-icon:nth-child(1) { width: 21px !important; transform: translateY(7px) rotate(45deg) !important; } .elementor-44 .elementor-element.elementor-element-439c469 .elementskit-menu-hamburger[aria-expanded="true"] .elementskit-menu-hamburger-icon:nth-child(2) { width: 21px !important; opacity: 0 !important; transform: translateX(-5px) !important; } .elementor-44 .elementor-element.elementor-element-439c469 .elementskit-menu-hamburger[aria-expanded="true"] .elementskit-menu-hamburger-icon:nth-child(3) { width: 21px !important; transform: translateY(-7px) rotate(-45deg) !important; } /* ========================================================= PRESS EFFECT ========================================================= */ .elementor-44 .elementor-element.elementor-element-439c469 .elementskit-menu-hamburger:active { transform: scale(.94) !important; box-shadow: 0 5px 12px rgba(8,113,160,.10) !important; } /* ========================================================= KEYBOARD FOCUS ========================================================= */ .elementor-44 .elementor-element.elementor-element-439c469 .elementskit-menu-hamburger:focus-visible { outline: 2px solid rgba(20,160,220,.65) !important; outline-offset: 4px !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-44 .elementor-element.elementor-element-439c469 .elementskit-menu-hamburger { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; border-radius: 14px !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .elementor-44 .elementor-element.elementor-element-439c469 .elementskit-menu-hamburger { width: 46px !important; height: 46px !important; min-width: 46px !important; min-height: 46px !important; border-radius: 13px !important; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-44 .elementor-element.elementor-element-439c469 .elementskit-menu-hamburger, .elementor-44 .elementor-element.elementor-element-439c469 .elementskit-menu-hamburger *, .elementor-44 .elementor-element.elementor-element-439c469 .elementskit-menu-hamburger::before { transition: none !important; animation: none !important; } }/* End custom CSS */