.elementor-1109 .elementor-element.elementor-element-9ee45a6{--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;--margin-top:30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:100;}.elementor-1109 .elementor-element.elementor-element-5d2ba16{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:100px;--margin-right:0px;}.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-1109 .elementor-element.elementor-element-045a5ca > .elementor-widget-container{margin:-5px 0px 0px 0px;}.elementor-1109 .elementor-element.elementor-element-045a5ca img{max-width:70%;}.elementor-1109 .elementor-element.elementor-element-e120844{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:25px;}.elementor-1109 .elementor-element.elementor-element-e120844.e-con{--align-self:center;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
					.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-1109 .elementor-element.elementor-element-36d9e7e > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-1109 .elementor-element.elementor-element-36d9e7e.elementor-element{--align-self:flex-end;}.elementor-1109 .elementor-element.elementor-element-36d9e7e .elementor-menu-toggle{margin:0 auto;background-color:#02010100;}.elementor-1109 .elementor-element.elementor-element-36d9e7e .elementor-nav-menu .elementor-item{font-family:"Poppins", Sans-serif;font-size:14px;font-weight:600;}.elementor-1109 .elementor-element.elementor-element-36d9e7e .elementor-nav-menu--main .elementor-item{color:#FFFFFF;fill:#FFFFFF;}.elementor-1109 .elementor-element.elementor-element-36d9e7e .elementor-nav-menu--main .elementor-item:hover,
					.elementor-1109 .elementor-element.elementor-element-36d9e7e .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-1109 .elementor-element.elementor-element-36d9e7e .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-1109 .elementor-element.elementor-element-36d9e7e .elementor-nav-menu--main .elementor-item:focus{color:#FE6400;fill:#FE6400;}.elementor-1109 .elementor-element.elementor-element-36d9e7e .elementor-nav-menu--dropdown a, .elementor-1109 .elementor-element.elementor-element-36d9e7e .elementor-menu-toggle{color:#FFFFFF;fill:#FFFFFF;}.elementor-1109 .elementor-element.elementor-element-36d9e7e .elementor-nav-menu--dropdown{background-color:#02010100;}.elementor-1109 .elementor-element.elementor-element-36d9e7e div.elementor-menu-toggle{color:#FFFFFF;}.elementor-1109 .elementor-element.elementor-element-36d9e7e div.elementor-menu-toggle svg{fill:#FFFFFF;}.elementor-1109 .elementor-element.elementor-element-219b433{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:50px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1109 .elementor-element.elementor-element-219b433.e-con{--align-self:center;}.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-1109 .elementor-element.elementor-element-2066c99 .elementor-button{background-color:#FE6400;border-radius:20px 20px 20px 20px;}.elementor-1109 .elementor-element.elementor-element-2066c99 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1109 .elementor-element.elementor-element-2066c99.elementor-element{--align-self:flex-start;}.elementor-1109 .elementor-element.elementor-element-2066c99 .elementor-button-content-wrapper{flex-direction:row;}.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-widget-nav-menu .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-primary-font-size );}}@media(max-width:767px){.elementor-1109 .elementor-element.elementor-element-9ee45a6{--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1109 .elementor-element.elementor-element-5d2ba16{--width:70%;--margin-top:0px;--margin-bottom:0px;--margin-left:20px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1109 .elementor-element.elementor-element-045a5ca > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-1109 .elementor-element.elementor-element-045a5ca{text-align:left;}.elementor-1109 .elementor-element.elementor-element-045a5ca img{max-width:50%;}.elementor-1109 .elementor-element.elementor-element-e120844{--width:20%;--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-size:var( --e-global-typography-primary-font-size );}.elementor-1109 .elementor-element.elementor-element-36d9e7e > .elementor-widget-container{margin:015px 0px 0px 20px;}.elementor-1109 .elementor-element.elementor-element-219b433{--width:100%;}}@media(min-width:768px){.elementor-1109 .elementor-element.elementor-element-5d2ba16{--width:20%;}.elementor-1109 .elementor-element.elementor-element-e120844{--width:70%;}.elementor-1109 .elementor-element.elementor-element-219b433{--width:10%;}}/* Start custom CSS for container, class: .elementor-element-9ee45a6 *//* =================================================================================
   WORDPRESS/ELEMENTOR TRANSPARENT HEADER CSS
   Copy and paste this code into your WordPress site's Additional CSS section
   (Appearance > Customize > Additional CSS) or your child theme's style.css
   ================================================================================= */

/* METHOD 1: Basic Transparent Header (Most Common) */
/* Targets most Elementor headers and common WordPress themes */
header,
.site-header,
.elementor-location-header,
.header-wrapper,
#masthead {
    background-color: transparent !important;
    background: transparent !important;
    backdrop-filter: none;
}

/* Remove any box shadows from header */
header,
.site-header,
.elementor-location-header {
    box-shadow: none !important;
    border-bottom: none !important;
}

/* METHOD 2: Glassmorphism Effect (Semi-transparent with blur) */
/* Uncomment this section if you want a frosted glass effect instead */
/*
header,
.site-header,
.elementor-location-header {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}
*/

/* METHOD 3: Sticky/Fixed Header Transparency */
/* For headers that become sticky on scroll */
.sticky-header,
.elementor-sticky,
.elementor-sticky--active,
.fixed-header {
    background-color: transparent !important;
    background: transparent !important;
}

/* Optional: Add transparency on scroll with smooth transition */
.elementor-sticky--active {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.3s ease !important;
}

/* METHOD 4: Theme-Specific Selectors */
/* Uncomment and modify based on your specific theme */

/* Astra Theme */
/*
.main-header-bar,
.ast-main-header-wrap,
.site-header {
    background-color: transparent !important;
}
*/

/* GeneratePress */
/*
.main-navigation,
.site-header {
    background-color: transparent !important;
}
*/

/* OceanWP */
/*
#site-header,
.header-wrapper {
    background-color: transparent !important;
}
*/

/* Divi Theme */
/*
#main-header,
.et_pb_header {
    background-color: transparent !important;
}
*/

/* METHOD 5: Elementor Widget Specific */
/* Target specific Elementor header widgets */
.elementor-widget-nav-menu,
.elementor-widget-site-logo,
.elementor-section[data-element_type="section"] {
    background-color: transparent !important;
}

/* Remove background from Elementor sections in header */
.elementor-location-header .elementor-section {
    background-color: transparent !important;
    background-image: none !important;
}

/* METHOD 6: Navigation Menu Transparency */
/* Make navigation menus transparent too */
.main-navigation,
.nav-menu,
.elementor-nav-menu,
.menu-main-menu-container {
    background-color: transparent !important;
}

/* Dropdown menus (keep these visible) */
.sub-menu,
.elementor-nav-menu--dropdown {
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
}

/* METHOD 7: Advanced - Transparent Header with Content Overlap */
/* Use this if you want content to appear behind the header */
header,
.site-header,
.elementor-location-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
    background: transparent !important;
}

/* Adjust main content to account for overlapping header */
.site-content,
main,
#main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* METHOD 8: Mobile Responsive Transparency */
/* Ensure transparency works on mobile devices */
@media (max-width: 768px) {
    .mobile-header,
    .elementor-location-header,
    header {
        background-color: transparent !important;
    }
    
    /* Mobile menu button transparency */
    .mobile-menu-toggle,
    .elementor-menu-toggle {
        background: transparent !important;
    }
    
    /* Keep mobile menu dropdown visible */
    .mobile-menu,
    .elementor-nav-menu--mobile {
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
    }
    
    /* MOBILE MEGA MENU HOVER EFFECTS */
    /* Force mobile hover/tap effects for mega menu */
    .mobile-menu a:hover,
    .mobile-menu a:active,
    .mobile-menu a:focus,
    .elementor-nav-menu--mobile a:hover,
    .elementor-nav-menu--mobile a:active,
    .elementor-nav-menu--mobile a:focus,
    .mobile-navigation a:hover,
    .mobile-navigation a:active,
    .mobile-navigation a:focus,
    .responsive-menu a:hover,
    .responsive-menu a:active,
    .responsive-menu a:focus,
    .mobile-nav a:hover,
    .mobile-nav a:active,
    .mobile-nav a:focus,
    .hamburger-menu a:hover,
    .hamburger-menu a:active,
    .hamburger-menu a:focus {
        color: #fe6400 !important;
        background-color: rgba(254, 100, 0, 0.1) !important;
        transition: all 0.3s ease !important;
    }
    
    /* Mobile mega menu items tap/touch effects */
    .mobile-menu .menu-item a:active,
    .mobile-menu .menu-item a:focus,
    .elementor-nav-menu--mobile .elementor-item:active,
    .elementor-nav-menu--mobile .elementor-item:focus {
        color: #fe6400 !important;
        background-color: rgba(254, 100, 0, 0.15) !important;
    }
    
    /* Mobile sub-menu hover effects */
    .mobile-menu .sub-menu a:hover,
    .mobile-menu .sub-menu a:active,
    .mobile-menu .sub-menu a:focus,
    .elementor-nav-menu--mobile .elementor-sub-item:hover,
    .elementor-nav-menu--mobile .elementor-sub-item:active,
    .elementor-nav-menu--mobile .elementor-sub-item:focus {
        color: #fe6400 !important;
        background-color: rgba(254, 100, 0, 0.1) !important;
        padding-left: 25px !important;
        transition: all 0.3s ease !important;
    }
}

/* METHOD 9: Text Color Adjustments */
/* Ensure text remains visible on transparent background */
header a,
.site-header a,
.elementor-location-header a,
.nav-menu a {
    color: #ffffff !important; /* Change to your preferred text color */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important; /* Optional text shadow for better readability */
}

/* Logo adjustments */
.site-logo img,
.custom-logo {
    /* Add any logo-specific styling here */
}

/* METHOD 10: Conditional Transparency (Only on Homepage) */
/* Uncomment if you only want transparency on the homepage */
/*
.home header,
.home .site-header,
.home .elementor-location-header {
    background-color: transparent !important;
}
*/

/* METHOD 11: Hover Effects */
/* Optional: Add hover effects to navigation items */
.nav-menu a:hover,
.elementor-nav-menu a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 5px !important;
    transition: all 0.3s ease !important;
}

/* MEGA MENU HOVER EFFECTS */
/* Mega menu text hover color #fe6400 */
.mega-menu a:hover,
.elementor-nav-menu--main .elementor-item:hover,
.elementor-nav-menu .elementor-item:hover,
.nav-menu li:hover > a,
.main-navigation a:hover,
.primary-navigation a:hover,
.site-navigation a:hover,
.header-navigation a:hover,
.elementor-widget-nav-menu a:hover,
.elementor-nav-menu--dropdown a:hover,
.sub-menu a:hover,
.dropdown-menu a:hover,
.mega-menu-item:hover,
.mega-menu-link:hover,
.menu-item a:hover,
.navigation-menu a:hover {
    color: #fe6400 !important;
    transition: color 0.3s ease !important;
}

/* Mega menu dropdown hover effects */
.mega-menu .sub-menu a:hover,
.elementor-nav-menu--dropdown .elementor-sub-item:hover,
.dropdown-content a:hover,
.mega-dropdown a:hover {
    color: #fe6400 !important;
    background-color: rgba(254, 100, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}

/* Advanced mega menu .elementor-1109 .elementor-element.elementor-element-9ee45a6s for different themes */
.ast-header-menu a:hover,
.ast-main-header-menu a:hover,
.oceanwp-mobile-menu a:hover,
.generate-menu-item a:hover,
.et_pb_menu a:hover {
    color: #fe6400 !important;
}

/* MOBILE MEGA MENU - Additional Support (All Screen Sizes) */
/* Touch and tap effects for mobile devices */
.mobile-menu a,
.elementor-nav-menu--mobile a,
.mobile-navigation a,
.responsive-menu a,
.mobile-nav a,
.hamburger-menu a {
    -webkit-tap-highlight-color: rgba(254, 100, 0, 0.2) !important;
    transition: all 0.3s ease !important;
}

/* Mobile menu active/focus states */
.mobile-menu a:active,
.mobile-menu a:focus,
.elementor-nav-menu--mobile a:active,
.elementor-nav-menu--mobile a:focus,
.mobile-navigation a:active,
.mobile-navigation a:focus {
    color: #fe6400 !important;
    background-color: rgba(254, 100, 0, 0.1) !important;
    outline: none !important;
}

/* Force mobile menu visibility */
.mobile-menu,
.elementor-nav-menu--mobile,
.mobile-navigation,
.responsive-menu,
.mobile-nav,
.hamburger-menu {
    display: block !important;
    visibility: visible !important;
}

/* Mobile hamburger button hover */
.mobile-menu-toggle:hover,
.elementor-menu-toggle:hover,
.hamburger-toggle:hover {
    color: #fe6400 !important;
    transition: color 0.3s ease !important;
}

/* TROUBLESHOOTING NOTES:
   
   1. If transparency isn't working, try adding more specific .elementor-1109 .elementor-element.elementor-element-9ee45a6s
   2. Use browser developer tools (F12) to inspect your header and find the exact CSS classes
   3. The !important declaration forces the style - remove if it conflicts with your theme
   4. Test on different devices and browsers
   5. Some themes may require additional specific .elementor-1109 .elementor-element.elementor-element-9ee45a6s
   
   COMMON ISSUES:
   - If text becomes unreadable, adjust the text colors in METHOD 9
   - If header content disappears, remove the backdrop-filter properties
   - For sticky headers, you might need to adjust METHOD 3 .elementor-1109 .elementor-element.elementor-element-9ee45a6s
   
   HOW TO IMPLEMENT:
   1. Go to WordPress Admin > Appearance > Customize > Additional CSS
   2. Copy and paste the relevant methods above
   3. Click "Publish" to save changes
   4. Clear any caching plugins
   5. Test on frontend
*//* End custom CSS */