.elementor-1963 .elementor-element.elementor-element-3b5337b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0.76rem;--padding-bottom:0.76rem;--padding-left:0rem;--padding-right:0rem;--z-index:1000;}.elementor-1963 .elementor-element.elementor-element-a3e6afa{--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;--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-1963 .elementor-element.elementor-element-447612d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-image .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-1963 .elementor-element.elementor-element-530e351{--e-transform-origin-x:left;--e-transform-origin-y:center;}.elementor-1963 .elementor-element.elementor-element-530e351 img{width:100%;}.elementor-1963 .elementor-element.elementor-element-8278146{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--gap:5px 5px;--row-gap:5px;--column-gap:5px;}.elementor-1963 .elementor-element.elementor-element-51e983a{--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;border-style:solid;--border-style:solid;border-width:0px 0px 2px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:2px;--border-left-width:0px;border-color:#7A7A7A6E;--border-color:#7A7A7A6E;}.elementor-1963 .elementor-element.elementor-element-5592280{--display:flex;}.elementor-widget-icon-box.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon-box.elementor-view-framed .elementor-icon, .elementor-widget-icon-box.elementor-view-default .elementor-icon{fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-icon-box .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box:has(:hover) .elementor-icon-box-title, .elementor-widget-icon-box:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-1963 .elementor-element.elementor-element-b8dcced{--e-transform-origin-x:left;--e-transform-origin-y:center;--icon-box-icon-margin:15px;}.elementor-1963 .elementor-element.elementor-element-b8dcced .elementor-icon-box-wrapper{align-items:start;}.elementor-1963 .elementor-element.elementor-element-b8dcced.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-920d7ed );}.elementor-1963 .elementor-element.elementor-element-b8dcced.elementor-view-framed .elementor-icon, .elementor-1963 .elementor-element.elementor-element-b8dcced.elementor-view-default .elementor-icon{fill:var( --e-global-color-920d7ed );color:var( --e-global-color-920d7ed );border-color:var( --e-global-color-920d7ed );}.elementor-1963 .elementor-element.elementor-element-b8dcced .elementor-icon{font-size:26px;}.elementor-1963 .elementor-element.elementor-element-b8dcced .elementor-icon-box-description{color:var( --e-global-color-920d7ed );}.elementor-1963 .elementor-element.elementor-element-3d4b103{--display:flex;}.elementor-1963 .elementor-element.elementor-element-d0a130b{--e-transform-origin-x:left;--e-transform-origin-y:center;--icon-box-icon-margin:15px;}.elementor-1963 .elementor-element.elementor-element-d0a130b .elementor-icon-box-wrapper{align-items:start;}.elementor-1963 .elementor-element.elementor-element-d0a130b.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-920d7ed );}.elementor-1963 .elementor-element.elementor-element-d0a130b.elementor-view-framed .elementor-icon, .elementor-1963 .elementor-element.elementor-element-d0a130b.elementor-view-default .elementor-icon{fill:var( --e-global-color-920d7ed );color:var( --e-global-color-920d7ed );border-color:var( --e-global-color-920d7ed );}.elementor-1963 .elementor-element.elementor-element-d0a130b .elementor-icon{font-size:26px;}.elementor-1963 .elementor-element.elementor-element-d0a130b .elementor-icon-box-description{color:var( --e-global-color-920d7ed );}.elementor-1963 .elementor-element.elementor-element-a596325{--display:flex;--justify-content:center;}.elementor-1963 .elementor-element.elementor-element-d4adef9{--e-transform-origin-x:left;--e-transform-origin-y:center;--icon-box-icon-margin:15px;}.elementor-1963 .elementor-element.elementor-element-d4adef9 .elementor-icon-box-wrapper{align-items:start;}.elementor-1963 .elementor-element.elementor-element-d4adef9.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-920d7ed );}.elementor-1963 .elementor-element.elementor-element-d4adef9.elementor-view-framed .elementor-icon, .elementor-1963 .elementor-element.elementor-element-d4adef9.elementor-view-default .elementor-icon{fill:var( --e-global-color-920d7ed );color:var( --e-global-color-920d7ed );border-color:var( --e-global-color-920d7ed );}.elementor-1963 .elementor-element.elementor-element-d4adef9 .elementor-icon{font-size:26px;}.elementor-1963 .elementor-element.elementor-element-d4adef9 .elementor-icon-box-description{color:var( --e-global-color-920d7ed );}.elementor-1963 .elementor-element.elementor-element-d22913f{--display:flex;}.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-1963 .elementor-element.elementor-element-9ef8b02{--e-transform-origin-x:left;--e-transform-origin-y:center;}.elementor-1963 .elementor-element.elementor-element-9ef8b02 .elementor-menu-toggle{margin:0 auto;}.elementor-1963 .elementor-element.elementor-element-9ef8b02 .elementor-nav-menu .elementor-item{font-family:"Inter", Sans-serif;font-size:1rem;font-weight:500;}.elementor-1963 .elementor-element.elementor-element-9ef8b02 .elementor-nav-menu--main .elementor-item:hover, .elementor-1963 .elementor-element.elementor-element-9ef8b02 .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-1963 .elementor-element.elementor-element-9ef8b02 .elementor-nav-menu--main .elementor-item.highlighted, .elementor-1963 .elementor-element.elementor-element-9ef8b02 .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-920d7ed );fill:var( --e-global-color-920d7ed );}.elementor-1963 .elementor-element.elementor-element-9ef8b02 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-1963 .elementor-element.elementor-element-9ef8b02 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-920d7ed );}.elementor-1963 .elementor-element.elementor-element-9ef8b02 .e--pointer-framed .elementor-item:before, .elementor-1963 .elementor-element.elementor-element-9ef8b02 .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-920d7ed );}.elementor-1963 .elementor-element.elementor-element-9ef8b02 .elementor-nav-menu--main .elementor-item.elementor-item-active{color:var( --e-global-color-920d7ed );}.elementor-1963 .elementor-element.elementor-element-9ef8b02 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item.elementor-item-active:before, .elementor-1963 .elementor-element.elementor-element-9ef8b02 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item.elementor-item-active:after{background-color:var( --e-global-color-920d7ed );}.elementor-1963 .elementor-element.elementor-element-9ef8b02 .e--pointer-framed .elementor-item.elementor-item-active:before, .elementor-1963 .elementor-element.elementor-element-9ef8b02 .e--pointer-framed .elementor-item.elementor-item-active:after{border-color:var( --e-global-color-920d7ed );}.elementor-1963{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-1963 .elementor-element.elementor-element-447612d{--width:25%;}.elementor-1963 .elementor-element.elementor-element-8278146{--width:75%;}.elementor-1963 .elementor-element.elementor-element-5592280{--width:50%;}.elementor-1963 .elementor-element.elementor-element-3d4b103{--width:68%;}}/* Start custom CSS for container, class: .elementor-element-3b5337b */.parent__container { --site-transition: 350ms linear; /* Transition duration and timing function */ --bg-color__before: #000000; /* Initial background color (transparent) */ --bg-color__after: #fff; /* Background color after scroll (white) */ --max__height: 140px; /* Maximum height of the container */ --min__height: 100px; /* Minimum height of the container */ --min-height: 140px; /* Set the initial minimum height to the maximum height */ background-color: #00000000; /* Apply initial background color */ /* If you already added a negative margin on your header, you can ignore margin-block-end & margin-bottom CSS rules*/ margin-block-end: -120px; margin-bottom: -120px; } /* Define transition properties for the sticky header container */ .sticky-header-container { transition: background-color 350ms linear, /* Transition for background color */ backdrop-filter 350ms linear, /* Transition for backdrop filter */ box-shadow 350ms linear; /* Transition for box shadow */ } /* Apply styles when the elementor sticky effects are active */ .elementor-sticky--effects.sticky-header-container { background: #fff; --bg-color__before: #fff; /* Change initial background color to the 'after' color */ box-shadow: hsl(0deg 0% 0% / 14%) 0 2px 40px;*/ /* Apply a box shadow /* If you're using backdrop filter CSS properties, remove background color CSS properties and box-shadow CSS rule backdrop-filter: blur(10px); */ /* * Just enable one of them * mix-blend-mode: difference; * mix-blend-mode: normal; * mix-blend-mode: multiply; */ } /* * Elementor Sticky Header change color on Scroll & Shrink sticky Header */ .elementor-sticky--effects.sticky-header-container { --max__height: 100px; /* Change max height to min height when sticky */ --bg-color__before: #fff; /* Change background color to the 'after' color when sticky */ /*box-shadow: hsl(0deg 0% 0% / 14%) 0 2px 40px;*/ /* Apply a box shadow when sticky */ /* * If using backdrop filter CSS properties, uncomment the line below * backdrop-filter: blur(10px); * If using WebKit-specific box shadow, uncomment the line below * -webkit-box-shadow: hsl(0deg 0% 0% / 14%) 0 2px 40px; */ } /* * Site Logo widget * Using transform CSS property is much better than width properties to scale in terms of performance */ .site--logo{ transform: scale(1); transform-origin: center; transition: transform 350ms linear, transform-origin 350ms linear; } .elementor-sticky--effects .site--logo{ transform: scale(.9); } /* * Search icon */ .search-icon .elementor-search-form__toggle{ --e-search-form-toggle-background-color: #00000000; } .elementor-sticky--effects .search-icon .elementor-search-form__toggle{ --bg-color__before: transparent } .search-icon .e-font-icon-svg{ --e-search-form-toggle-color: #fff; -webkit-transition: fill 350ms linear; -o-transition: fill 350ms linear; transition: fill 350ms linear; } .elementor-sticky--effects .search-icon svg.e-font-icon-svg, .elementor-sticky--effects .search-icon i.e-font-icon-svg{ --bg-color__after: #fff; --bg-color__after: #fff; } /* * Button */ .elementor-button { --_button-bg: #000; /* Default background color for button */ --_button-text: #fff; /* Default text color for button */ --_button-bg-sticky: #fff; /* Background color for button when sticky */ --_button-text-sticky: #000; /* Text color for button when sticky */ } .sticky-btn .elementor-button { border-radius: 0; /* Remove border radius */ border: none; /* Remove border */ font-weight: var(--_fw-600, 300); /* Font weight with a fallback to 300 */ transition: background-color 350ms linear; /* Transition for background color */ } .sticky-btn .elementor-button-text { color: var(--_button-text); /* Set text color */ transition: color 350ms linear; /* Transition for text color */ } .sticky-btn .elementor-button { background-color: var(--_button-bg, #000); /* Set background color with a fallback to black */ } /* Styles for the button when sticky effects are applied */ .elementor-sticky--effects .sticky-btn .elementor-button { --_button-bg: var(--_button-bg-sticky); /* Set background color to sticky background color */ } .elementor-sticky--effects .sticky-btn .elementor-button-text { --_button-text: var(--_button-text-sticky); /* Set text color to sticky text color */ } /* * Navigation */ .site-nav .elementor-nav-menu--main .elementor-item { /* * Add your own color */ --_nav__before: #fff; /* Initial navigation item color, set to the background color after scroll */ --_nav__before_hover: #fff; /* Navigation item color on hover */ --_fw-600: 300; /* Default font weight */ --_font-size: clamp(1rem, 0.8182rem + 0.6061vw, 1.25rem); /* Responsive font size */ font-weight: var(--_fw-600); /* Apply the font weight */ font-size: var(--_font-size); /* Apply the responsive font size */ text-decoration: none; /* Remove text decoration */ color: var(--_nav__before); /* Set the initial color */ /* Transitions for color, font size, and font weight */ transition: color 350ms linear, font-size 350ms linear, font-weight 350ms linear; } /* Hover state for the main navigation menu items */ .site-nav .elementor-nav-menu--main .elementor-item:hover { --_nav__before: var(--_nav__before_hover); /* Change color on hover */ /* --_fw-600: 600; Uncomment to change font weight on hover */ } /* Sticky state for the main navigation menu items */ .elementor-sticky--effects .site-nav .elementor-nav-menu--main .elementor-item { --_font-size: clamp(1rem, 0.8636rem + 0.4545vw, 1.1875rem); /* Responsive font size for sticky state */ --_nav__before: #000; /* Change navigation item color to white when sticky */ /* --_fw-600: 500; Uncomment to change font weight when sticky */ } /* * WordPress Menu Toggle Style * Style for the menu toggle button * Dropdown style and sub-menu is not included */ .site-nav .elementor-menu-toggle { transition: background-color 350ms linear; /* Transition for background color */ border-radius: 0; /* Remove border radius */ } /* Menu Toggle when focus state */ /* Add transition for color */ .site-nav .elementor-menu-toggle { transition: color 350ms linear; /* Transition for color */ } /* Style for the menu toggle button when focused */ .site-nav .elementor-menu-toggle:focus { outline: 2px solid #fff; /* Outline color when focused */ } /* Style for the menu toggle button when focused and sticky effects are applied */ .elementor-sticky--effects .site-nav .elementor-menu-toggle:focus { outline: 2px solid var(--bg-color__color); /* Outline color when focused and sticky */ } /* * Hamburger and close icon fill color state * Style for the SVG icons inside the menu toggle button */ .site-nav .elementor-menu-toggle .e-font-icon-svg { fill: #fff; /* Set the fill color */ color: #fff; /* Set the color */ transition: fill 350ms linear, /* Transition for fill color */ color 350ms linear; /* Transition for color */ } /* Styles for the SVG icons when sticky effects are applied */ .elementor-sticky--effects .site-nav .elementor-menu-toggle .e-font-icon-svg { --bg-color__after: var(--bg-color__color); /* Change fill and color when sticky */ } /* * Original logo styles */ .site--logo { transform: scaleX(1); /* Initial scale */ transform-origin: center; /* Set the transform origin to the center */ transition: opacity 350ms linear, /* Opacity transition */ transform 350ms linear; /* Transform transition */ } /* * Sticky effect for the logo when scrolling */ .elementor-sticky--effects .site--logo { transform: scale(.95); /* Reduce scale on sticky */ } /* *Sticky effect for the red logo when scrolling */ .elementor-sticky--effects .site--logo-red { opacity: 1; /* Make red logo visible on sticky */ transform: scale(.95); /* Reduce scale on sticky */ } /* *Default styles for the logo */ .site--logo { opacity: 1; /* Make the logo fully visible by default */ } /* *Default styles for the red logo */ .site--logo-red { opacity: 0; /* Make the red logo fully transparent by default */ } /* *Additional effect for the logo when scrolling */ .elementor-sticky--effects .site--logo { opacity: 0; /* Make the logo fully transparent on sticky */ } /* * Additional effect for the red logo when scrolling */ .elementor-sticky--effects .site--logo-red { opacity: 1; /* Make the red logo fully visible on sticky */ transform: scale(.95); /* Reduce scale on sticky */ }/* End custom CSS */