.elementor-30659 .elementor-element.elementor-element-cccfcc5{--display:flex;--position:fixed;--min-height:0px;--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-radius:100px 100px 100px 100px;top:60px;--z-index:100;}.elementor-30659 .elementor-element.elementor-element-cccfcc5:not(.elementor-motion-effects-element-type-background), .elementor-30659 .elementor-element.elementor-element-cccfcc5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}body:not(.rtl) .elementor-30659 .elementor-element.elementor-element-cccfcc5{left:145px;}body.rtl .elementor-30659 .elementor-element.elementor-element-cccfcc5{right:145px;}.elementor-30659 .elementor-element.elementor-element-75e827b{--display:flex;}.elementor-30659 .elementor-element.elementor-element-d9b86c9{margin:2px 12px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-30659 .elementor-element.elementor-element-c5bb5f9{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), 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-30659 .elementor-element.elementor-element-e2c692e{margin:0px -68px calc(var(--kit-widget-spacing, 0px) + 7px) 0px;padding:0px 0px 0px 0px;--nav-menu-icon-size:19px;}.elementor-30659 .elementor-element.elementor-element-e2c692e .elementor-menu-toggle{margin:0 auto;background-color:#FFFFFF;}.elementor-30659 .elementor-element.elementor-element-e2c692e .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, .elementor-30659 .elementor-element.elementor-element-e2c692e .elementor-nav-menu__container.elementor-nav-menu--dropdown{margin-top:6px !important;}.elementor-30659 .elementor-element.elementor-element-005c5a6{--display:flex;}.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-30659 .elementor-element.elementor-element-b1ca3fb{text-align:end;}.elementor-30659 .elementor-element.elementor-element-b1ca3fb img{width:21%;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:767px){.elementor-30659 .elementor-element.elementor-element-cccfcc5{--justify-content:space-around;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );top:19px;}body:not(.rtl) .elementor-30659 .elementor-element.elementor-element-cccfcc5{left:0px;}body.rtl .elementor-30659 .elementor-element.elementor-element-cccfcc5{right:0px;}.elementor-30659 .elementor-element.elementor-element-75e827b{--width:12px;}.elementor-30659 .elementor-element.elementor-element-d9b86c9{margin:0px -27px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-30659 .elementor-element.elementor-element-c5bb5f9{--width:11px;}.elementor-30659 .elementor-element.elementor-element-005c5a6{--width:100px;}.elementor-30659 .elementor-element.elementor-element-b1ca3fb img{width:100%;}}@media(min-width:768px){.elementor-30659 .elementor-element.elementor-element-cccfcc5{--width:75%;}.elementor-30659 .elementor-element.elementor-element-75e827b{--width:13%;}.elementor-30659 .elementor-element.elementor-element-c5bb5f9{--width:12%;}}/* Start custom CSS for html, class: .elementor-element-d9b86c9 */```html
<div class="custom-search">
    <button class="custom-search-toggle" type="button" aria-label="Open search">
        <svg viewBox="0 0 24 24" aria-hidden="true">
            <circle cx="11" cy="11" r="7"></circle>
            <line x1="16.5" y1="16.5" x2="22" y2="22"></line>
        </svg>
    </button>

    <form class="custom-search-form" action="/" method="get">
        <input 
            type="search" 
            name="s" 
            placeholder="Search..."
            aria-label="Search"
        >
    </form>
</div>

<style>
/* Search container */
.custom-search {
    position: relative;
    display: inline-block;
}

/* Search button */
.custom-search-toggle {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #000 !important;
    cursor: pointer;
    transition: none !important;
}

/* Remove ALL hover effects */
.custom-search-toggle:hover,
.custom-search-toggle:focus,
.custom-search-toggle:active {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: #000 !important;
    transform: none !important;
}

/* Black icon */
.custom-search-toggle svg {
    width: 24px;
    height: 24px;
    display: block;
    fill: none;
    stroke: #000;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: none !important;
}

/* Search form BELOW the icon */
.custom-search-form {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    z-index: 9999;
}

/* Show search form */
.custom-search.active .custom-search-form {
    display: block;
}

/* Search input */
.custom-search-form input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
}

/* No input hover effect */
.custom-search-form input:hover,
.custom-search-form input:focus {
    box-shadow: none;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.custom-search').forEach(function(search) {

        const button = search.querySelector('.custom-search-toggle');
        const input = search.querySelector('input');

        button.addEventListener('click', function(e) {
            e.stopPropagation();

            search.classList.toggle('active');

            if (search.classList.contains('active')) {
                setTimeout(function() {
                    input.focus();
                }, 150);
            }
        });

        document.addEventListener('click', function(e) {
            if (!search.contains(e.target)) {
                search.classList.remove('active');
            }
        });
    });
});
</script>
```/* End custom CSS */