.elementor-7610 .elementor-element.elementor-element-3a177c6{--display:flex;--background-transition:0.3s;--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;--z-index:1000;}.elementor-7610 .elementor-element.elementor-element-3a177c6:hover{background-color:#FAF9FC9E;}.elementor-7610 .elementor-element.elementor-element-9efd103 > .elementor-widget-container{border-style:none;border-radius:10px 10px 10px 10px;}.elementor-7610 .elementor-element.elementor-element-9efd103 .elementor-menu-toggle{margin-left:auto;}.elementor-7610 .elementor-element.elementor-element-9efd103 .elementor-nav-menu .elementor-item{font-size:15px;text-transform:capitalize;letter-spacing:1px;}.elementor-7610 .elementor-element.elementor-element-9efd103 .elementor-nav-menu--main .elementor-item{color:#5F5961;fill:#5F5961;padding-left:25px;padding-right:25px;padding-top:0px;padding-bottom:0px;}.elementor-7610 .elementor-element.elementor-element-9efd103 .elementor-nav-menu--main .elementor-item:hover, .elementor-7610 .elementor-element.elementor-element-9efd103 .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-7610 .elementor-element.elementor-element-9efd103 .elementor-nav-menu--main .elementor-item.highlighted, .elementor-7610 .elementor-element.elementor-element-9efd103 .elementor-nav-menu--main .elementor-item:focus{color:#A37D7D;fill:#A37D7D;}.elementor-7610 .elementor-element.elementor-element-9efd103 .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#B10A0A;}.elementor-7610 .elementor-element.elementor-element-9efd103{--e-nav-menu-horizontal-menu-item-margin:calc( 20px / 2 );--nav-menu-icon-size:30px;}.elementor-7610 .elementor-element.elementor-element-9efd103 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:20px;}.elementor-7610 .elementor-element.elementor-element-9efd103 .elementor-nav-menu--dropdown a, .elementor-7610 .elementor-element.elementor-element-9efd103 .elementor-menu-toggle{color:#000000;fill:#000000;}.elementor-7610 .elementor-element.elementor-element-9efd103 .elementor-nav-menu--dropdown{background-color:#FFFFFF;border-radius:0px 0px 0px 0px;}.elementor-7610 .elementor-element.elementor-element-9efd103 .elementor-nav-menu--dropdown a:hover, .elementor-7610 .elementor-element.elementor-element-9efd103 .elementor-nav-menu--dropdown a:focus, .elementor-7610 .elementor-element.elementor-element-9efd103 .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-7610 .elementor-element.elementor-element-9efd103 .elementor-nav-menu--dropdown a.highlighted, .elementor-7610 .elementor-element.elementor-element-9efd103 .elementor-menu-toggle:hover, .elementor-7610 .elementor-element.elementor-element-9efd103 .elementor-menu-toggle:focus{color:#FFFFFF;}.elementor-7610 .elementor-element.elementor-element-9efd103 .elementor-nav-menu--dropdown a:hover, .elementor-7610 .elementor-element.elementor-element-9efd103 .elementor-nav-menu--dropdown a:focus, .elementor-7610 .elementor-element.elementor-element-9efd103 .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-7610 .elementor-element.elementor-element-9efd103 .elementor-nav-menu--dropdown a.highlighted{background-color:#00000012;}.elementor-7610 .elementor-element.elementor-element-9efd103 .elementor-nav-menu--dropdown a.elementor-item-active{color:#C89CFF;background-color:#00000012;}.elementor-7610 .elementor-element.elementor-element-9efd103 .elementor-nav-menu--dropdown li:first-child a{border-top-left-radius:0px;border-top-right-radius:0px;}.elementor-7610 .elementor-element.elementor-element-9efd103 .elementor-nav-menu--dropdown li:last-child a{border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.elementor-7610 .elementor-element.elementor-element-9efd103 .elementor-nav-menu--main .elementor-nav-menu--dropdown, .elementor-7610 .elementor-element.elementor-element-9efd103 .elementor-nav-menu__container.elementor-nav-menu--dropdown{box-shadow:0px 0px 30px 0px rgba(0, 0, 0, 0.1);}.elementor-7610 .elementor-element.elementor-element-9efd103 .elementor-nav-menu--dropdown a{padding-left:15px;padding-right:15px;padding-top:15px;padding-bottom:15px;}.elementor-7610 .elementor-element.elementor-element-9efd103 .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, .elementor-7610 .elementor-element.elementor-element-9efd103 .elementor-nav-menu__container.elementor-nav-menu--dropdown{margin-top:15px !important;}.elementor-7610 .elementor-element.elementor-element-9efd103 div.elementor-menu-toggle{color:#000000;}.elementor-7610 .elementor-element.elementor-element-9efd103 div.elementor-menu-toggle svg{fill:#000000;}.elementor-7610 .elementor-element.elementor-element-06a7e87{margin-top:0px;margin-bottom:0px;padding:80px 0px 0px 0px;}.elementor-7610 .elementor-element.elementor-element-65078ad > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 15px 0px 15px;}.elementor-7610 .elementor-element.elementor-element-3f665ed > .elementor-widget-container{margin:0px 0px 50px 0px;}.elementor-7610 .elementor-element.elementor-element-3f665ed{text-align:center;}.elementor-7610 .elementor-element.elementor-element-3f665ed .elementor-heading-title{font-family:"Amiri", Sans-serif;}.elementor-7610 .elementor-element.elementor-element-5eacfb1{--grid-columns:1;--grid-row-gap:10px;--grid-column-gap:10px;}.elementor-7610 .elementor-element.elementor-element-e29e16e{--display:flex;}.elementor-7610 .elementor-element.elementor-element-1f543da{--display:flex;}body.elementor-page-7610:not(.elementor-motion-effects-element-type-background), body.elementor-page-7610 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FAF9FC;}@media(min-width:768px){.elementor-7610 .elementor-element.elementor-element-65078ad{width:100%;}}@media(max-width:1550px){.elementor-7610 .elementor-element.elementor-element-3a177c6{--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-7610 .elementor-element.elementor-element-06a7e87{padding:80px 0px 0px 0px;}}@media(max-width:1199px){.elementor-7610 .elementor-element.elementor-element-3a177c6{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7610 .elementor-element.elementor-element-9efd103{--nav-menu-icon-size:20px;}.elementor-7610 .elementor-element.elementor-element-5eacfb1{--grid-columns:2;}}@media(max-width:767px){.elementor-7610 .elementor-element.elementor-element-9efd103{--nav-menu-icon-size:15px;}.elementor-7610 .elementor-element.elementor-element-65078ad > .elementor-element-populated{padding:40px 15px 40px 15px;}.elementor-7610 .elementor-element.elementor-element-ffa7a86 > .elementor-widget-container{padding:0px 20px 0px 20px;}.elementor-7610 .elementor-element.elementor-element-5eacfb1{--grid-columns:1;}}/* Start custom CSS for nav-menu, class: .elementor-element-9efd103 *//*Check mobile menu to get the CSS class to target and remove top margin*/ .elementor-7610 .elementor-element.elementor-element-9efd103 .elementor-nav-menu__container.elementor-nav-menu--dropdown{ margin-top: 0px !important; } /* ==================================================================== HYBRID MOBILE DROPDOWN - iOS 26 GLASSMORPHISM CONTAINER + CLEAN ITEMS ==================================================================== Replace .premium-glass-nav with your actual CSS class Design approach: - Dropdown container: Premium iOS 26 liquid glass effect - Menu items: Clean, minimal styling for readability - Perfect balance of visual appeal and functionality ==================================================================== */ /* Mobile Menu Toggle Button - Clean Circular Design */ @media (max-width: 1199px) { .premium-glass-nav .elementor-menu-toggle { /* Transparent background - blends with page */ background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; /* Perfect circle styling */ width: 48px !important; height: 48px !important; border-radius: 50% !important; padding: 0 !important; /* Center the icon */ display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: none !important; transition: all 0.2s ease !important; outline: none !important; } .premium-glass-nav .elementor-menu-toggle:hover { /* Subtle hover effect */ background: rgba(0, 0, 0, 0.05) !important; border-radius: 50% !important; } /* Hamburger Icon Styling */ .premium-glass-nav .elementor-menu-toggle i { color: rgba(0, 0, 0, 0.7) !important; font-size: 18px !important; transition: all 0.2s ease !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; } .premium-glass-nav .elementor-menu-toggle:hover i { color: rgba(0, 0, 0, 0.9) !important; transform: scale(1.05) !important; } /* Active state when menu is open */ .premium-glass-nav .elementor-menu-toggle[aria-expanded="true"] { background: rgba(0, 0, 0, 0.08) !important; border-radius: 50% !important; } .premium-glass-nav .elementor-menu-toggle[aria-expanded="true"] i { color: rgba(0, 0, 0, 0.9) !important; } } /* Clean Mobile Dropdown Container with iOS 26 Glassmorphism */ @media (max-width: 1199px) { /* Main dropdown wrapper */ .premium-glass-nav .elementor-nav-menu--dropdown { background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin-top: 8px !important; border-radius: 0 !important; } /* The actual menu container - iOS 26 Liquid Glass Effect */ .premium-glass-nav .elementor-nav-menu--dropdown .elementor-nav-menu { /* iOS 26 gradient background (matches JavaScript button) */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 100% ) !important; /* Premium backdrop effects (matches JavaScript button) */ backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; /* Matching border and styling */ border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 20px !important; padding: 16px !important; margin: 16px 16px !important; /* iOS 26 shadow system (matches JavaScript button) */ box-shadow: /*0 8px 32px rgba(0, 0, 0, 0.12),*/ 0 2px 6px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; /* Premium transitions */ transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; /* Performance optimization (matches JavaScript button) */ transform: translateZ(0) !important; will-change: transform, box-shadow, background, backdrop-filter !important; isolation: isolate !important; } /* Enhanced hover state for dropdown container */ .premium-glass-nav .elementor-nav-menu--dropdown .elementor-nav-menu:hover { /* Enhanced iOS 26 background on hover */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.15) 100% ) !important; /* Enhanced backdrop effects */ backdrop-filter: blur(25px) saturate(200%) !important; -webkit-backdrop-filter: blur(25px) saturate(200%) !important; /* Enhanced border */ border: 1px solid rgba(255, 255, 255, 0.25) !important; /* Enhanced shadow system */ box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16), 0 8px 16px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; /* Subtle lift effect */ transform: translateY(-2px) translateZ(0) !important; } } /* Fallback for devices with width < 390px (matches JavaScript logic) */ @media (max-width: 1199px) and (max-width: 389px) { .premium-glass-nav .elementor-nav-menu--dropdown .elementor-nav-menu { /* Simplified background for smaller devices */ background: rgba(255, 255, 255, 0.85) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; will-change: auto !important; isolation: auto !important; } .premium-glass-nav .elementor-nav-menu--dropdown .elementor-nav-menu:hover { background: rgba(255, 255, 255, 0.95) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important; } } /* Additional fallback for devices that don't support backdrop-filter */ @media (max-width: 1199px) and (min-width: 390px) { @supports not (backdrop-filter: blur(1px)) { .premium-glass-nav .elementor-nav-menu--dropdown .elementor-nav-menu { background: rgba(255, 255, 255, 0.9) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; } } } /* Clean Menu Items */ @media (max-width: 1199px) { .premium-glass-nav .elementor-nav-menu--dropdown .elementor-item { color: rgba(0, 0, 0, 0.85) !important; font-size: 16px !important; font-weight: 500 !important; font-family: 'Average', serif !important; letter-spacing: 0.5px !important; padding: 14px 20px !important; margin: 4px 0 !important; border-radius: 12px !important; text-decoration: none !important; display: block !important; position: relative !important; /* Clean transparent background */ background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; box-shadow: none !important; transition: all 0.15s ease !important; } /* Clean hover state */ .premium-glass-nav .elementor-nav-menu--dropdown .elementor-item:hover { color: rgba(0, 0, 0, 1) !important; /* Subtle hover background */ background: rgba(0, 0, 0, 0.05) !important; /* Gentle movement */ transform: translateX(3px) !important; /* Minimal shadow */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; } /* Clean active menu item */ .premium-glass-nav .elementor-nav-menu--dropdown .elementor-item.elementor-item-active, .premium-glass-nav .elementor-nav-menu--dropdown .current-menu-item a { color: #B10A0A !important; font-weight: 600 !important; /* Subtle active background */ background: rgba(139, 69, 19, 0.1) !important; /* Clean active shadow */ box-shadow: 0 2px 6px rgba(139, 69, 19, 0.15) !important; } } /* Alternative Menu Item Selectors - Clean Approach */ @media (max-width: 1199px) { .premium-glass-nav .elementor-nav-menu--dropdown .menu-item a { color: rgba(0, 0, 0, 0.85) !important; font-size: 16px !important; font-weight: 500 !important; font-family: 'Average', serif !important; letter-spacing: 0.5px !important; padding: 14px 20px !important; margin: 4px 0 !important; border-radius: 12px !important; text-decoration: none !important; display: block !important; position: relative !important; /* Clean styling */ background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; box-shadow: none !important; transition: all 0.15s ease !important; } .premium-glass-nav .elementor-nav-menu--dropdown .menu-item a:hover { color: rgba(0, 0, 0, 1) !important; background: rgba(0, 0, 0, 0.05) !important; transform: translateX(3px) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; } /* Current menu item styling */ .premium-glass-nav .elementor-nav-menu--dropdown .current-menu-item a { color: #B10A0A !important; font-weight: 600 !important; background: rgba(139, 69, 19, 0.1) !important; box-shadow: 0 2px 6px rgba(139, 69, 19, 0.15) !important; } } /* Hardware acceleration optimization - Enhanced for glassmorphism */ @media (max-width: 1199px) { .premium-glass-nav .elementor-nav-menu--dropdown .elementor-nav-menu { transform: translateZ(0) !important; will-change: transform, box-shadow, background, backdrop-filter !important; isolation: isolate !important; } } /* Accessibility and performance for reduced motion */ @media (prefers-reduced-motion: reduce) { .premium-glass-nav .elementor-nav-menu--dropdown .elementor-nav-menu, .premium-glass-nav .elementor-nav-menu--dropdown .elementor-item, .premium-glass-nav .elementor-nav-menu--dropdown .menu-item a, .premium-glass-nav .elementor-menu-toggle { transition: none !important; animation: none !important; transform: none !important; will-change: auto !important; } .premium-glass-nav .elementor-menu-toggle:hover i { transform: none !important; } /* Maintain circular shape and glassmorphism without transforms */ .premium-glass-nav .elementor-menu-toggle { border-radius: 50% !important; } .premium-glass-nav .elementor-nav-menu--dropdown .elementor-nav-menu:hover { transform: translateZ(0) !important; } } /* Touch device optimizations */ @media (max-width: 1199px) and (pointer: coarse) { .premium-glass-nav .elementor-nav-menu--dropdown .elementor-item, .premium-glass-nav .elementor-nav-menu--dropdown .menu-item a { padding: 16px 20px !important; font-size: 17px !important; min-height: 48px !important; } /* Larger touch target for toggle */ .premium-glass-nav .elementor-menu-toggle { width: 52px !important; height: 52px !important; border-radius: 50% !important; } .premium-glass-nav .elementor-menu-toggle i { font-size: 20px !important; } } /* Tablet optimizations */ @media (min-width: 768px) and (max-width: 1199px) { .premium-glass-nav .elementor-nav-menu--dropdown .elementor-nav-menu { padding: 20px !important; margin: 20px 20px !important; border-radius: 20px !important; } .premium-glass-nav .elementor-nav-menu--dropdown .elementor-item, .premium-glass-nav .elementor-nav-menu--dropdown .menu-item a { font-size: 18px !important; padding: 16px 24px !important; border-radius: 14px !important; } .premium-glass-nav .elementor-menu-toggle { width: 50px !important; height: 50px !important; } .premium-glass-nav .elementor-menu-toggle i { font-size: 19px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3a177c6 *//* ==================================================================== ULTRA-CLEAN TRANSPARENT NAVIGATION ==================================================================== Transparent navigation that blends seamlessly with page background: - Completely transparent container - Subtle hover effects - Clean typography - Minimal visual interference Instructions: 1. Copy this entire CSS code 2. Go to your sub-container in Elementor (the one containing your menu) 3. Advanced → Custom CSS 4. Paste this code ==================================================================== */ /* Base Container - Fully Transparent */ .elementor-7610 .elementor-element.elementor-element-3a177c6 { /* Position at top */ position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 10000 !important; /* Reset container sizing */ height: auto !important; min-height: auto !important; margin: 0 !important; padding: 20px !important; /* Completely transparent background */ background: transparent !important; /* No backdrop effects */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; /* No borders */ border: none !important; border-image: none !important; /* Smooth transitions */ transition: all 0.3s ease !important; /* No shadows */ box-shadow: none !important; } /* HOVER STATE - Subtle Enhancement */ .elementor-7610 .elementor-element.elementor-element-3a177c6:hover { /* Very subtle background on hover (optional) */ background: rgba(255, 255, 255, 0.02) !important; /* No backdrop effects */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; /* No borders */ border-image: none !important; /* No shadows */ box-shadow: none !important; /* No transformation */ transform: none !important; } /* Remove animated pseudo-element */ .elementor-7610 .elementor-element.elementor-element-3a177c6::before { display: none !important; } /* Inner Container Adjustments */ .elementor-7610 .elementor-element.elementor-element-3a177c6 .elementor-container { height: auto !important; min-height: auto !important; background: transparent !important; padding: 10px 0 !important; position: relative !important; z-index: 2 !important; } /* ==================================================================== CLEAN TRANSPARENT MENU STYLING ==================================================================== */ /* WordPress Menu Widget Adjustments */ .elementor-7610 .elementor-element.elementor-element-3a177c6 .elementor-widget-wp-widget-nav_menu { position: relative !important; z-index: 3 !important; background: transparent !important; } /* Menu Container - Transparent base */ .elementor-7610 .elementor-element.elementor-element-3a177c6 .elementor-widget-wp-widget-nav_menu .elementor-widget-container { background: transparent !important; backdrop-filter: none !important; box-shadow: none !important; padding: 16px 0 !important; transition: all 0.3s ease !important; } /* Clean Menu Items Layout */ .elementor-7610 .elementor-element.elementor-element-3a177c6 .elementor-widget-wp-widget-nav_menu .menu { display: flex !important; justify-content: center !important; align-items: center !important; gap: 40px !important; margin: 0 !important; padding: 0 40px !important; list-style: none !important; position: relative !important; } .elementor-7610 .elementor-element.elementor-element-3a177c6 .elementor-widget-wp-widget-nav_menu .menu li { margin: 0 !important; padding: 0 !important; position: relative !important; } /* Clean Menu Link Styling */ .elementor-7610 .elementor-element.elementor-element-3a177c6 .elementor-widget-wp-widget-nav_menu .menu li a { color: rgba(0, 0, 0, 0.8) !important; text-decoration: none !important; font-size: 15px !important; font-weight: 500 !important; letter-spacing: 0.8px !important; transition: all 0.3s ease !important; font-family: 'Average', serif !important; padding: 14px 20px !important; display: block !important; border-radius: 16px !important; position: relative !important; /* Completely transparent background */ background: transparent !important; backdrop-filter: none !important; border: none !important; /* No shadows */ box-shadow: none !important; } /* Clean Menu Link Hover Effects */ .elementor-7610 .elementor-element.elementor-element-3a177c6 .elementor-widget-wp-widget-nav_menu .menu li a:hover { color: rgba(0, 0, 0, 1) !important; /* Very subtle background on hover */ background: rgba(0, 0, 0, 0.05) !important; /* No backdrop effects */ backdrop-filter: none !important; border: none !important; /* Subtle lift */ transform: translateY(-1px) !important; /* Minimal shadow for depth */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; /* No text effects */ text-shadow: none !important; } /* Clean Active Menu Item */ .elementor-7610 .elementor-element.elementor-element-3a177c6 .elementor-widget-wp-widget-nav_menu .menu li.current-menu-item a { color: #8B4513 !important; font-weight: 600 !important; /* Subtle active background */ background: rgba(139, 69, 19, 0.1) !important; /* No backdrop effects */ backdrop-filter: none !important; border: none !important; /* Minimal active shadow */ box-shadow: 0 1px 4px rgba(139, 69, 19, 0.2) !important; } /* Clean Effects During Container Hover */ .elementor-7610 .elementor-element.elementor-element-3a177c6:hover .elementor-widget-wp-widget-nav_menu .menu li a { color: rgba(0, 0, 0, 0.85) !important; text-shadow: none !important; backdrop-filter: none !important; } .elementor-7610 .elementor-element.elementor-element-3a177c6:hover .elementor-widget-wp-widget-nav_menu .menu li a:hover { /* Enhanced hover during container hover */ background: rgba(0, 0, 0, 0.08) !important; /* No backdrop effects */ backdrop-filter: none !important; transform: translateY(-2px) !important; /* Slightly enhanced shadow */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; } /* ==================================================================== RESPONSIVE ENHANCEMENTS ==================================================================== */ /* Tablet Clean Design */ @media (max-width: 1024px) and (min-width: 769px) { .elementor-7610 .elementor-element.elementor-element-3a177c6:hover { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .elementor-7610 .elementor-element.elementor-element-3a177c6 .elementor-widget-wp-widget-nav_menu .menu { gap: 28px !important; padding: 0 30px !important; } .elementor-7610 .elementor-element.elementor-element-3a177c6 .elementor-widget-wp-widget-nav_menu .menu li a { font-size: 14px !important; padding: 12px 16px !important; border-radius: 14px !important; } } /* Mobile Clean Design */ @media (max-width: 768px) { .elementor-7610 .elementor-element.elementor-element-3a177c6 { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .elementor-7610 .elementor-element.elementor-element-3a177c6:hover { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .elementor-7610 .elementor-element.elementor-element-3a177c6 .elementor-widget-wp-widget-nav_menu .elementor-widget-container { padding: 14px 0 !important; } .elementor-7610 .elementor-element.elementor-element-3a177c6 .elementor-widget-wp-widget-nav_menu .menu { gap: 15px !important; padding: 0 20px !important; flex-wrap: wrap !important; } .elementor-7610 .elementor-element.elementor-element-3a177c6 .elementor-widget-wp-widget-nav_menu .menu li a { font-size: 13px !important; padding: 10px 14px !important; border-radius: 12px !important; } } /* Very Small Mobile Clean Design */ @media (max-width: 480px) { .elementor-7610 .elementor-element.elementor-element-3a177c6 .elementor-widget-wp-widget-nav_menu .menu { gap: 10px !important; padding: 0 15px !important; } .elementor-7610 .elementor-element.elementor-element-3a177c6 .elementor-widget-wp-widget-nav_menu .menu li a { font-size: 12px !important; padding: 8px 12px !important; border-radius: 10px !important; } } /* ==================================================================== ACCESSIBILITY & PERFORMANCE ==================================================================== */ @media (prefers-reduced-motion: reduce) { .elementor-7610 .elementor-element.elementor-element-3a177c6 { transition: none !important; } .elementor-7610 .elementor-element.elementor-element-3a177c6:hover { transform: none !important; } .elementor-7610 .elementor-element.elementor-element-3a177c6 .elementor-widget-wp-widget-nav_menu .menu li a { transition: none !important; } .elementor-7610 .elementor-element.elementor-element-3a177c6 .elementor-widget-wp-widget-nav_menu .menu li a:hover { transform: none !important; } } /* ==================================================================== OPTIONAL: SUBTLE BACKGROUND ON SCROLL ==================================================================== */ /* Uncomment this section if you want a subtle background to appear when scrolling: .elementor-7610 .elementor-element.elementor-element-3a177c6.scrolled { background: rgba(255, 255, 255, 0.95) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important; } *//* End custom CSS */ /* Start custom CSS for loop-grid, class: .elementor-element-5eacfb1 */.elementor-7610 .elementor-element.elementor-element-5eacfb1 { display: none; }/* End custom CSS */ /* Start custom CSS for section, class: .elementor-element-06a7e87 */.faqs-header-title{ font-size: 50px; font-family: Amiri; font-weight: 400; letter-spacing: 0.8px; margin-bottom: 0px; color: rgb(95, 89, 97); text-shadow: rgba(0, 0, 0, 0.3) 0px 2px 4px; -webkit-text-fill-color: transparent; line-height: 1.2; padding-top: 10px; background: linear-gradient(45deg, rgb(44, 24, 16), rgb(95, 89, 97), rgb(114, 47, 55)) text; }/* End custom CSS */ /* Start custom CSS *//* ================================= FAQ Page Complete Updated CSS Purple color scheme: #C89CFF Updated with Toggle Button Centering Fixes ================================= */ /* Loading indicators */ .faq-loading, .loading-categories { text-align: center; padding: 40px 20px; color: #718096; font-size: 1rem; font-style: italic; } .loading-categories { padding: 12px 20px; background: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0; } /* Smooth transition when content appears */ .faq-category-section, .category-btn { animation: fadeInUp 0.3s ease-out; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Global Styles */ .faq-search-container, .faq-categories-nav, .faq-list { line-height: 1.6; color: #1a202c; } /* Hide Loop Grid initially for JavaScript processing */ .elementor-loop-container { display: none; } /* Main Layout - Single Column */ .faq-page-container { max-width: 800px; margin: 0 auto; padding: 40px 20px; background: #f7fafc; } /* Search Box - Fixed icon positioning with more spacing */ .faq-search-container { margin-bottom: 40px; } .search-box { position: relative; max-width: 600px; margin: 0 auto; } .search-box input { width: 100%; padding: 15px 20px 15px 60px; /* Increased left padding significantly */ border: 2px solid #e2e8f0; border-radius: 12px; font-size: 1rem; transition: border-color 0.2s ease; background: white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); } .search-box input:focus { outline: none; border-color: #C89CFF; /* Changed to purple */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(200, 156, 255, 0.1); /* Purple shadow */ } .search-box .search-icon { position: absolute; left: 22px; /* Moved further right */ top: 50%; transform: translateY(-50%); color: #a0aec0; font-size: 1rem; pointer-events: none; /* Prevent icon from blocking input */ z-index: 1; } /* Category Navigation - Modern filter button styling */ .faq-categories-nav { margin-bottom: 30px !important; text-align: center !important; } .category-nav-container { display: flex !important; gap: 15px !important; flex-wrap: wrap !important; justify-content: center !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; } .category-btn { font-family: 'Amiri', serif !important; padding: 12px 24px !important; border: 2px solid #ddd !important; background: white !important; color: #666 !important; border-radius: 25px !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.3s ease !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; display: flex !important; align-items: center !important; gap: 8px !important; white-space: nowrap !important; } .category-btn:hover { border-color: #999 !important; color: #333 !important; transform: translateY(-2px) !important; } .category-btn.active { background: #EEE7F5!important; color: #000000 !important; border-color: #666 !important; } /* Hide FAQ counts in filter buttons */ .category-btn .count { display: none !important; } /* FAQ List Container */ .faq-list { max-width: 800px; margin: 0 auto; } /* Category Sections */ .faq-category-section { margin-bottom: 40px; } .faq-category-section h3 { font-family: 'Amiri', serif !important; font-size: 1.3rem; font-weight: 600; color: #5F5961; margin-bottom: 20px; padding-bottom: 10px; /*border-bottom: 2px solid #e2e8f0;*/ } /* FAQ Items */ .faq-item { background: white; border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 10px; transition: all 0.2s ease; overflow: hidden; outline: none !important; /* Remove focus outline */ } .faq-item:hover { border-color: #cbd5e0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .faq-item:focus { outline: none !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important; /* Keep hover shadow, remove outline */ } .faq-item:active { outline: none !important; } /* FAQ Question - KEEPING ORIGINAL PADDING */ .faq-question { padding: 24px 24px 10px 24px; /* Keep your original padding */ cursor: pointer; display: flex; align-items: center; /* Improved vertical centering */ justify-content: space-between; user-select: none; outline: none !important; /* Remove focus outline */ border: none !important; /* Remove any borders */ min-height: 60px; /* Add minimum height for consistent alignment */ } .faq-question:focus { outline: none !important; box-shadow: none !important; border: none !important; } .faq-question:active { outline: none !important; box-shadow: none !important; border: none !important; } .faq-question h3 { font-size: 19px; font-weight: 600; color: #5F5961; margin: 0; flex: 1; padding-right: 20px; line-height: 1.4; /* Consistent line height */ align-self: center; /* Ensure text aligns properly with button */ } /* FAQ Toggle - MANUALLY CENTERED WITH TRANSFORM */ .faq-toggle { width: 24px; height: 24px; border-radius: 50%; background: #FAF9FC; border: 1.5px solid #a9a5cb; display: flex; align-items: center; justify-content: center; font-size: 0; /* Hide any text content like + */ font-weight: bold; color: #C89CFF; /* Purple arrow when collapsed */ transition: all 0.2s ease; flex-shrink: 0; position: relative; /* Manual centering adjustment */ align-self: center; line-height: 1; vertical-align: middle; transform: translateY(-7px); /* Move up 7px to visually center with asymmetric padding */ } .faq-toggle::before { content: '▼'; /* Down arrow */ font-size: 0.8rem; /* Set specific size for arrow */ color: #a9a5cb; /* Purple arrow color */ transition: transform 0.2s ease; display: block; /* Perfect centering for the arrow */ line-height: 1; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -40%); /* Perfect center positioning */ } .faq-item.active .faq-toggle { background: #a9a5cb; /* Changed to purple */ border-color: #a9a5cb; /* Changed to purple */ color: white; } .faq-item.active .faq-toggle::before { content: '▲'; /* Up arrow */ color: white; /* White arrow when active */ transform: translate(-50%, -50%); /* Maintain perfect centering when active */ } /* Hide any text content inside toggle button */ .faq-toggle * { display: none; } /* FAQ Answer */ .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .faq-answer-content { padding: 0 24px 10px; /* Keep your original answer padding */ color: #4a5568; line-height: 1.7; font-size: 15px !important; /* Removed border-top for seamless look */ } .faq-item.active .faq-answer { max-height: 300px; } /* Loading State */ .faq-loading { text-align: center; padding: 60px 20px; color: #718096; font-size: 1.1rem; } /* No Results State */ .no-results { text-align: center; padding: 60px 20px; color: #718096; } .no-results h3 { color: #4a5568; margin-bottom: 10px; } /* Search Highlighting */ .search-highlight { background: #fef5e7; padding: 1px 2px; border-radius: 2px; } /* Featured FAQ Styling */ .faq-item.featured { border-color: #C89CFF; /* Changed to purple */ box-shadow: 0 2px 8px rgba(200, 156, 255, 0.1); /* Purple shadow */ } .faq-item.featured .faq-question::before { content: '⭐'; margin-right: 8px; font-size: 0.9rem; } /* Mobile Responsive - Improved for dynamic categories */ @media (max-width: 768px) { .faq-page-container { padding: 20px 15px; } .faq-search-container { margin-bottom: 30px; } .search-box input { padding: 12px 16px 12px 55px; /* Increased mobile left padding */ font-size: 0.95rem; } .search-box .search-icon { left: 20px; /* Adjusted for mobile */ font-size: 0.9rem; } /* Category Navigation - Mobile optimized with wrapping */ .faq-categories-nav { margin-bottom: 30px; } .category-nav-container { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 12px !important; padding: 0 !important; max-width: 100% !important; } .category-btn { padding: 10px 18px !important; font-size: 13px !important; min-height: 44px !important; /* Touch-friendly minimum */ border-radius: 22px !important; margin-bottom: 4px !important; /* Add small margin for wrapped rows */ } .faq-question { padding: 18px; /* Even padding for mobile centering */ min-height: 50px; /* Adjusted for mobile */ } .faq-question h3 { font-size: 19px !important; padding-right: 15px; line-height: 1.4; } .faq-answer-content { padding: 0 18px 6px; /* Keep your original mobile answer padding */ font-size: 15px !important; line-height: 1.6; } .faq-category-section h3 { font-size: 19px; padding-bottom: 0px; /*margin-bottom: 15px;*/ } .faq-toggle { width: 22px; height: 22px; font-size: 0; /* Keep text hidden */ transform: translateY(0px); } .faq-toggle::before { font-size: 0.7rem; } } @media (max-width: 480px) { .faq-page-container { padding: 15px 10px; } .search-box input { padding: 10px 14px 10px 50px; /* Increased small mobile left padding */ font-size: 0.9rem; } .search-box .search-icon { left: 18px; font-size: 0.85rem; } .category-nav-container { gap: 8px !important; } .category-btn { padding: 8px 16px !important; font-size: 12px !important; min-height: 40px !important; border-radius: 20px !important; margin-bottom: 3px !important; } .faq-question { padding: 15px; /* Even padding for small mobile centering */ min-height: 45px; /* Adjusted for small mobile */ } .faq-question h3 { font-size: 1.0rem; padding-right: 12px; } .faq-answer-content { padding: 0 15px 8px; /* Keep your original small mobile answer padding */ font-size: 0.85rem; } .faq-toggle { width: 20px; height: 20px; font-size: 0; /* Keep text hidden */ transform: translateY(0px); /* Adjusted for small mobile */ } .faq-toggle::before { font-size: 0.65rem; } .faq-category-section h3 { font-size: 1.2rem; padding-bottom: 0px; /*margin-bottom: 12px;*/ } } /* Animation Classes */ .fade-in { animation: fadeIn 0.3s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Accessibility */ .faq-question:focus { outline: none !important; /* Use subtle background change instead of outline */ background: rgba(0, 0, 0, 0.02) !important; } .category-btn:focus { outline: 2px solid #666 !important; outline-offset: 2px !important; } /* Remove browser default focus behaviors that cause lines */ .faq-item *:focus, .faq-question *:focus, .faq-answer *:focus { outline: none !important; } .faq-item[tabindex]:focus { outline: none !important; } /* Force single column layout for Loop Grid */ .elementor-loop-container { grid-template-columns: 1fr !important; gap: 10px !important; } /* Ensure Loop Grid items have proper spacing */ .elementor-loop-container .faq-item { width: 100% !important; margin-bottom: 10px; } /* Print Styles */ @media print { .faq-search-container, .faq-categories-nav { display: none; } .faq-item { border: 1px solid #ccc; break-inside: avoid; margin-bottom: 20px; } .faq-answer { max-height: none !important; } .faq-toggle { display: none; } }/* End custom CSS */