.elementor-9876 .elementor-element.elementor-element-2bd3456{--display:flex;--min-height:100vh;--overflow:hidden;}.elementor-9876 .elementor-element.elementor-element-2bd3456.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-9876 .elementor-element.elementor-element-7f5a690{--display:flex;--background-transition:0.3s;--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;--z-index:1000;}.elementor-9876 .elementor-element.elementor-element-7f5a690:hover{background-color:#FAF9FC9E;}.elementor-9876 .elementor-element.elementor-element-bba430c > .elementor-widget-container{border-style:none;border-radius:10px 10px 10px 10px;}.elementor-9876 .elementor-element.elementor-element-bba430c .elementor-menu-toggle{margin-left:auto;}.elementor-9876 .elementor-element.elementor-element-bba430c .elementor-nav-menu .elementor-item{font-size:15px;text-transform:capitalize;letter-spacing:1px;}.elementor-9876 .elementor-element.elementor-element-bba430c .elementor-nav-menu--main .elementor-item{color:#5F5961;fill:#5F5961;padding-left:25px;padding-right:25px;padding-top:0px;padding-bottom:0px;}.elementor-9876 .elementor-element.elementor-element-bba430c .elementor-nav-menu--main .elementor-item:hover, .elementor-9876 .elementor-element.elementor-element-bba430c .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-9876 .elementor-element.elementor-element-bba430c .elementor-nav-menu--main .elementor-item.highlighted, .elementor-9876 .elementor-element.elementor-element-bba430c .elementor-nav-menu--main .elementor-item:focus{color:#A37D7D;fill:#A37D7D;}.elementor-9876 .elementor-element.elementor-element-bba430c .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#B10A0A;}.elementor-9876 .elementor-element.elementor-element-bba430c{--e-nav-menu-horizontal-menu-item-margin:calc( 20px / 2 );--nav-menu-icon-size:30px;}.elementor-9876 .elementor-element.elementor-element-bba430c .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:20px;}.elementor-9876 .elementor-element.elementor-element-bba430c .elementor-nav-menu--dropdown a, .elementor-9876 .elementor-element.elementor-element-bba430c .elementor-menu-toggle{color:#000000;fill:#000000;}.elementor-9876 .elementor-element.elementor-element-bba430c .elementor-nav-menu--dropdown{background-color:#FFFFFF;border-radius:0px 0px 0px 0px;}.elementor-9876 .elementor-element.elementor-element-bba430c .elementor-nav-menu--dropdown a:hover, .elementor-9876 .elementor-element.elementor-element-bba430c .elementor-nav-menu--dropdown a:focus, .elementor-9876 .elementor-element.elementor-element-bba430c .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-9876 .elementor-element.elementor-element-bba430c .elementor-nav-menu--dropdown a.highlighted, .elementor-9876 .elementor-element.elementor-element-bba430c .elementor-menu-toggle:hover, .elementor-9876 .elementor-element.elementor-element-bba430c .elementor-menu-toggle:focus{color:#FFFFFF;}.elementor-9876 .elementor-element.elementor-element-bba430c .elementor-nav-menu--dropdown a:hover, .elementor-9876 .elementor-element.elementor-element-bba430c .elementor-nav-menu--dropdown a:focus, .elementor-9876 .elementor-element.elementor-element-bba430c .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-9876 .elementor-element.elementor-element-bba430c .elementor-nav-menu--dropdown a.highlighted{background-color:#00000012;}.elementor-9876 .elementor-element.elementor-element-bba430c .elementor-nav-menu--dropdown a.elementor-item-active{color:#C89CFF;background-color:#00000012;}.elementor-9876 .elementor-element.elementor-element-bba430c .elementor-nav-menu--dropdown li:first-child a{border-top-left-radius:0px;border-top-right-radius:0px;}.elementor-9876 .elementor-element.elementor-element-bba430c .elementor-nav-menu--dropdown li:last-child a{border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.elementor-9876 .elementor-element.elementor-element-bba430c .elementor-nav-menu--main .elementor-nav-menu--dropdown, .elementor-9876 .elementor-element.elementor-element-bba430c .elementor-nav-menu__container.elementor-nav-menu--dropdown{box-shadow:0px 0px 30px 0px rgba(0, 0, 0, 0.1);}.elementor-9876 .elementor-element.elementor-element-bba430c .elementor-nav-menu--dropdown a{padding-left:15px;padding-right:15px;padding-top:15px;padding-bottom:15px;}.elementor-9876 .elementor-element.elementor-element-bba430c .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, .elementor-9876 .elementor-element.elementor-element-bba430c .elementor-nav-menu__container.elementor-nav-menu--dropdown{margin-top:15px !important;}.elementor-9876 .elementor-element.elementor-element-bba430c div.elementor-menu-toggle{color:#000000;}.elementor-9876 .elementor-element.elementor-element-bba430c div.elementor-menu-toggle svg{fill:#000000;}.elementor-9876 .elementor-element.elementor-element-c9a0c1e{width:100%;max-width:100%;}:root{--page-title-display:none;}@media(max-width:1550px){.elementor-9876 .elementor-element.elementor-element-7f5a690{--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}}@media(max-width:1199px){.elementor-9876 .elementor-element.elementor-element-7f5a690{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9876 .elementor-element.elementor-element-bba430c{--nav-menu-icon-size:20px;}}@media(max-width:767px){.elementor-9876 .elementor-element.elementor-element-bba430c{--nav-menu-icon-size:15px;}}@media(min-width:768px){.elementor-9876 .elementor-element.elementor-element-2bd3456{--width:100%;}}@media(max-width:1550px) and (min-width:768px){.elementor-9876 .elementor-element.elementor-element-2bd3456{--width:100%;}}/* Start custom CSS for nav-menu, class: .elementor-element-bba430c *//*Check mobile menu to get the CSS class to target and remove top margin*/ .elementor-9876 .elementor-element.elementor-element-bba430c .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-7f5a690 *//* ==================================================================== ULTRA-PREMIUM iOS 26 LIQUID GLASS NAVIGATION ==================================================================== Next-generation liquid glass with advanced visual effects: - Dynamic gradient morphing - Edge lighting systems - Advanced blur compositions - Animated frosted glass - Depth-based shadows - Color temperature shifts 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 - Ultra-Premium Liquid Glass */ .elementor-9876 .elementor-element.elementor-element-7f5a690 { /* 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; /* Advanced liquid glass base state */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 25%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.06) 75%, rgba(255, 255, 255, 0.18) 100% ), radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.1) 0%, transparent 50% ), radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.08) 0%, transparent 50% ) !important; /* Multi-layered backdrop effects */ backdrop-filter: blur(15px) saturate(1.4) contrast(1.1) brightness(1.05) !important; -webkit-backdrop-filter: blur(15px) saturate(1.4) contrast(1.1) brightness(1.05) !important; /* Advanced border system */ /*border: 1px solid transparent !important;*/ border-image: linear-gradient( 90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.3) 20%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.3) 80%, rgba(255, 255, 255, 0.1) 100% ) 1 !important; /* Smooth premium transitions */ transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1) !important; /* Multi-layered shadow system */ box-shadow: /* Primary depth shadow */ 0 2px 8px rgba(0, 0, 0, 0.06), /* Secondary ambient shadow */ 0 8px 32px rgba(0, 0, 0, 0.04), /* Edge highlight */ inset 0 1px 0 rgba(255, 255, 255, 0.2), /* Bottom edge definition */ inset 0 -1px 0 rgba(255, 255, 255, 0.1), /* Subtle outer glow */ 0 0 0 1px rgba(255, 255, 255, 0.05) !important; } /* Animated gradient pseudo-element for extra depth */ .elementor-9876 .elementor-element.elementor-element-7f5a690::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: linear-gradient( 45deg, transparent 0%, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0.03) 75%, transparent 100% ) !important; opacity: 0 !important; transition: opacity 0.8s ease !important; pointer-events: none !important; z-index: 1 !important; } .elementor-9876 .elementor-element.elementor-element-7f5a690:hover::before { opacity: 1 !important; animation: gradientShift 3s ease-in-out infinite !important; } /* Gradient animation */ @keyframes gradientShift { 0%, 100% { background-position: 0% 50% !important; } 50% { background-position: 100% 50% !important; } } /* Inner Container Adjustments */ .elementor-9876 .elementor-element.elementor-element-7f5a690 .elementor-container { height: auto !important; min-height: auto !important; background: transparent !important; padding: 10px 0 !important; position: relative !important; z-index: 2 !important; } /* ==================================================================== ULTRA-ENHANCED MENU STYLING ==================================================================== */ /* WordPress Menu Widget Adjustments */ .elementor-9876 .elementor-element.elementor-element-7f5a690 .elementor-widget-wp-widget-nav_menu { position: relative !important; z-index: 3 !important; background: transparent !important; } /* Menu Container - Premium transparent base */ .elementor-9876 .elementor-element.elementor-element-7f5a690 .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.4s cubic-bezier(0.23, 1, 0.32, 1) !important; } /* Ultra-Enhanced Menu Items Layout */ .elementor-9876 .elementor-element.elementor-element-7f5a690 .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-9876 .elementor-element.elementor-element-7f5a690 .elementor-widget-wp-widget-nav_menu .menu li { margin: 0 !important; padding: 0 !important; position: relative !important; } /* Ultra-Premium Menu Link Styling */ .elementor-9876 .elementor-element.elementor-element-7f5a690 .elementor-widget-wp-widget-nav_menu .menu li a { color: rgba(0, 0, 0, 0.85) !important; text-decoration: none !important; font-size: 15px !important; font-weight: 500 !important; letter-spacing: 0.8px !important; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important; font-family: 'Average', serif !important; padding: 14px 20px !important; display: block !important; border-radius: 16px !important; position: relative !important; overflow: hidden !important; /* Base micro-glass effect */ background: rgba(255, 255, 255, 0.05) !important; backdrop-filter: blur(5px) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Subtle base shadow */ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } /* Ultra-Premium Menu Link Hover Effects */ .elementor-9876 .elementor-element.elementor-element-7f5a690 .elementor-widget-wp-widget-nav_menu .menu li a:hover { color: rgba(0, 0, 0, 0.95) !important; /* Enhanced micro-glass background */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.4) 100% ), radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 60% ) !important; backdrop-filter: blur(15px) saturate(1.3) brightness(1.1) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; /* Dynamic transform */ transform: translateY(-2px) scale(1.02) !important; /* Enhanced shadow system */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.08), inset 0 2px 4px rgba(255, 255, 255, 0.4), inset 0 -1px 2px rgba(255, 255, 255, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1) !important; /* Text enhancement */ text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5) !important; } /* Ultra-Premium Active Menu Item */ .elementor-9876 .elementor-element.elementor-element-7f5a690 .elementor-widget-wp-widget-nav_menu .menu li.current-menu-item a { color: #8B4513 !important; font-weight: 600 !important; /* Enhanced active state background */ background: linear-gradient(135deg, rgba(139, 69, 19, 0.15) 0%, rgba(139, 69, 19, 0.08) 50%, rgba(139, 69, 19, 0.2) 100% ), radial-gradient(circle at 50% 50%, rgba(139, 69, 19, 0.1) 0%, transparent 60% ) !important; backdrop-filter: blur(12px) saturate(1.4) !important; border: 1px solid rgba(139, 69, 19, 0.2) !important; /* Enhanced active shadow */ box-shadow: 0 2px 8px rgba(139, 69, 19, 0.2), 0 4px 16px rgba(139, 69, 19, 0.1), inset 0 1px 2px rgba(255, 255, 255, 0.3), inset 0 -1px 1px rgba(139, 69, 19, 0.1) !important; } /* Enhanced Effects During Container Hover */ .elementor-9876 .elementor-element.elementor-element-7f5a690:hover .elementor-widget-wp-widget-nav_menu .menu li a { color: rgba(0, 0, 0, 0.9) !important; text-shadow: 0 1px 3px rgba(255, 255, 255, 0.6) !important; backdrop-filter: blur(8px) saturate(1.2) !important; } .elementor-9876 .elementor-element.elementor-element-7f5a690:hover .elementor-widget-wp-widget-nav_menu .menu li a:hover { /* Ultra-enhanced hover during container hover */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.35) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.35) 75%, rgba(255, 255, 255, 0.45) 100% ), radial-gradient(circle at 40% 30%, rgba(255, 255, 255, 0.2) 0%, transparent 70% ), radial-gradient(circle at 60% 70%, rgba(255, 255, 255, 0.15) 0%, transparent 60% ) !important; backdrop-filter: blur(20px) saturate(1.5) brightness(1.2) !important; transform: translateY(-3px) scale(1.03) !important; /* Maximum shadow enhancement */ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), 0 12px 40px rgba(0, 0, 0, 0.1), 0 20px 60px rgba(0, 0, 0, 0.05), inset 0 3px 6px rgba(255, 255, 255, 0.5), inset 0 -2px 4px rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 30px rgba(255, 255, 255, 0.15) !important; } /* ==================================================================== RESPONSIVE ENHANCEMENTS ==================================================================== */ /* Tablet Ultra-Premium */ @media (max-width: 1024px) and (min-width: 769px) { .elementor-9876 .elementor-element.elementor-element-7f5a690 .elementor-widget-wp-widget-nav_menu .menu { gap: 28px !important; padding: 0 30px !important; } .elementor-9876 .elementor-element.elementor-element-7f5a690 .elementor-widget-wp-widget-nav_menu .menu li a { font-size: 14px !important; padding: 12px 16px !important; border-radius: 14px !important; } } /* Mobile Ultra-Premium */ @media (max-width: 768px) { .elementor-9876 .elementor-element.elementor-element-7f5a690 { background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.25) 100% ), radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 60% ) !important; backdrop-filter: blur(18px) saturate(1.5) contrast(1.08) !important; -webkit-backdrop-filter: blur(18px) saturate(1.5) contrast(1.08) !important; } .elementor-9876 .elementor-element.elementor-element-7f5a690 .elementor-widget-wp-widget-nav_menu .elementor-widget-container { padding: 14px 0 !important; } .elementor-9876 .elementor-element.elementor-element-7f5a690 .elementor-widget-wp-widget-nav_menu .menu { gap: 15px !important; padding: 0 20px !important; flex-wrap: wrap !important; } .elementor-9876 .elementor-element.elementor-element-7f5a690 .elementor-widget-wp-widget-nav_menu .menu li a { font-size: 13px !important; padding: 10px 14px !important; border-radius: 12px !important; } } /* Very Small Mobile Ultra-Premium */ @media (max-width: 480px) { .elementor-9876 .elementor-element.elementor-element-7f5a690 .elementor-widget-wp-widget-nav_menu .menu { gap: 10px !important; padding: 0 15px !important; } .elementor-9876 .elementor-element.elementor-element-7f5a690 .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-9876 .elementor-element.elementor-element-7f5a690, .elementor-9876 .elementor-element.elementor-element-7f5a690::before { transition: none !important; animation: none !important; } .elementor-9876 .elementor-element.elementor-element-7f5a690:hover { transform: none !important; } .elementor-9876 .elementor-element.elementor-element-7f5a690 .elementor-widget-wp-widget-nav_menu .menu li a { transition: none !important; } .elementor-9876 .elementor-element.elementor-element-7f5a690 .elementor-widget-wp-widget-nav_menu .menu li a:hover { transform: none !important; } }/* End custom CSS */ /* Start custom CSS *//* ==================================================================== ORIENTATION-RESPONSIVE CAROUSEL CSS ==================================================================== This CSS includes support for different images in landscape vs portrait orientations. TO REPLACE PORTRAIT IMAGES: 1. Upload your portrait-optimized images to WordPress Media Library 2. Replace the "Portrait-1.jpg" through "Portrait-10.jpg" URLs in the HTML 3. Ensure portrait images are optimized for vertical viewing MANUAL HEADER POSITIONING GUIDE: - DESKTOP: Line ~200 - transform: translateX(-20px); - TABLET: Line ~400 - transform: translateX(-20px); - MOBILE: Line ~460 - transform: translateX(0px); - SMALL MOBILE: Line ~500 - transform: translateX(-10px); - LANDSCAPE MOBILE: New section for phones in landscape mode ==================================================================== */ /* FORCE NO SCROLLING - CRITICAL (except for landscape mobile) */ body, html { height: 100vh !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } /* Container-based structure */ .elementor-element.elementor-element-container { height: 100vh !important; max-height: 100vh !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; position: relative !important; } /* Container widget area */ .elementor-container { height: 100vh !important; position: relative !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; } /* Position WordPress Menu ABSOLUTELY (removes from document flow) */ .elementor-widget-wp-widget-nav_menu { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 9999 !important; height: auto !important; margin: 0 !important; padding: 0 !important; width: 100% !important; display: block !important; visibility: visible !important; opacity: 1 !important; } /* Style the menu container */ .elementor-widget-wp-widget-nav_menu .elementor-widget-container { background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(10px) !important; padding: 15px 0 !important; box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important; margin: 0 !important; display: block !important; visibility: visible !important; opacity: 1 !important; } /* Center and style menu items */ .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 20px !important; list-style: none !important; } .elementor-widget-wp-widget-nav_menu .menu li { margin: 0 !important; padding: 0 !important; } .elementor-widget-wp-widget-nav_menu .menu li a { color: #666 !important; text-decoration: none !important; font-size: 16px !important; font-weight: 400 !important; letter-spacing: 1px !important; transition: all 0.3s ease !important; font-family: 'Average', serif !important; padding: 10px 0 !important; display: block !important; } .elementor-widget-wp-widget-nav_menu .menu li a:hover { color: #333 !important; } .elementor-widget-wp-widget-nav_menu .menu li.current-menu-item a { color: #8B4513 !important; font-weight: 500 !important; } /* Make HTML widget fill entire viewport */ .elementor-widget-html { position: absolute !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; margin: 0 !important; padding: 0 !important; z-index: 1 !important; overflow: hidden !important; } .elementor-widget-html .elementor-widget-container { height: 100vh !important; width: 100vw !important; margin: 0 !important; padding: 0 !important; } /* Reset for this section */ .elementor-carousel-section * { margin: 0; padding: 0; box-sizing: border-box; } /* Carousel Container */ .elementor-carousel-container { position: relative; width: 100vw; height: 100vh; overflow: hidden; margin: 0; } /* Background Carousel */ .background-carousel { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } /* ==================================================================== ORIENTATION-RESPONSIVE CAROUSEL TRACKS ==================================================================== */ /* Base carousel track styles */ .carousel-track { display: flex; height: 100%; width: calc(100vw * 20); /* 10 images + 10 duplicates */ transition: transform 0.8s ease-in-out; transform: translateX(0); position: absolute; top: 0; left: 0; } /* LANDSCAPE ORIENTATION - Default (Desktop, Laptop, Landscape Tablet/Phone) */ .landscape-track { display: flex; /* Show landscape by default */ } .portrait-track { display: none; /* Hide portrait by default */ } /* PORTRAIT ORIENTATION - Mobile Portrait, Tablet Portrait */ @media screen and (orientation: portrait) { .landscape-track { display: none; /* Hide landscape in portrait */ } .portrait-track { display: flex; /* Show portrait in portrait orientation */ } } /* ==================================================================== CAROUSEL IMAGE STYLES ==================================================================== */ .carousel-image { flex: 0 0 100vw; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; } /* Landscape-optimized images */ .landscape-image { background-size: cover; /* Standard cover for landscape */ } /* Portrait-optimized images */ .portrait-image { background-size: cover; /* Cover for portrait images */ background-position: center top; /* Adjust positioning for portrait orientation */ } /* Overlay for text readability */ .carousel-image::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 100% ); z-index: 1; } /* Content Overlay - Enhanced with padding to prevent cutoff */ .content-overlay { position: absolute; bottom: 80px; left: 0; width: 100%; z-index: 100; display: flex; align-items: center; justify-content: center; text-align: center; pointer-events: none; padding: 0 20px; /* Added padding to prevent edge cutoff */ } /* Main Content - Enhanced for better text display */ .main-content { color: white; max-width: 100%; /* Changed from 1200px to 100% for full width utilization */ padding: 0 20px; /* Reduced padding */ position: relative; width: 100%; /* Ensure full width utilization */ } /* Welcome Text - Enhanced with subtle halo effect and manual positioning */ .welcome-text { color: #867f8b !important; font-size: clamp(4.4rem, 15vw, 8rem) !important; font-weight: 400 !important; font-family: 'WindSong' !important; letter-spacing: clamp(2px, 0.5vw, 4px); /* Responsive letter spacing */ opacity: 0; animation: fadeInUp 2s ease-out 1s forwards; line-height: 0.9 !important; /* Enhanced text display properties */ width: 100%; text-align: center; overflow: visible; white-space: nowrap; /* Prevent text wrapping */ /* === MANUAL POSITIONING CONTROL === */ /* HORIZONTAL & VERTICAL POSITIONING OPTIONS: --welcome-x: -20px; // Move left/right (negative = left, positive = right) --welcome-y: 0px; // Move up/down (negative = up, positive = down) EXAMPLES: --welcome-x: -50px; --welcome-y: -30px; // Move 50px left, 30px up --welcome-x: 20px; --welcome-y: 15px; // Move 20px right, 15px down --welcome-x: -5vw; --welcome-y: -2vh; // Use viewport units for responsive positioning */ --welcome-x: -38px; /* CHANGE THIS VALUE TO ADJUST HORIZONTAL POSITION */ --welcome-y: 65px; /* CHANGE THIS VALUE TO ADJUST VERTICAL POSITION */ /* Subtle Halo Effect - Reduced by 50% */ text-shadow: /* Inner bright glow */ 0 0 8px rgba(255, 255, 255, 0.9), 0 0 16px rgba(255, 255, 255, 0.7), 0 0 24px rgba(255, 255, 255, 0.5), /* Mid-range halo */ 0 0 32px rgba(255, 255, 255, 0.4), 0 0 40px rgba(255, 255, 255, 0.3), /* Outer glow */ 0 0 50px rgba(255, 255, 255, 0.2), 0 0 60px rgba(255, 255, 255, 0.1); /* Shimmery effect with subtle glow interaction */ /*background: linear-gradient( 45deg, #fff 25%, #f8f8f8 35%, #fff 45%, #f8f8f8 55%, #fff 65%, #f8f8f8 75%, #fff 85% ); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;*/ animation: shimmer 3s ease-in-out infinite, fadeInUpCustom 2s ease-out 1s forwards, haloGlow 4s ease-in-out infinite; } /* Subtitle - Enhanced spacing and alignment with manual positioning */ .subtitle { font-size: clamp(1.7rem, 2.4vw, 1.7rem) !important; font-weight: 400 !important; letter-spacing: 1.8px; margin-bottom: 40px; opacity: 0; animation: fadeInUpCustomSubtitle 2s ease-out 1.5s forwards; font-family: 'Amiri' !important; font-style: italic; line-height: 1.4; text-shadow: 2px 2px 4px rgba(134, 127, 139, 0.8), 0 0 8px rgba(134, 127, 139, 0.4), 0 0 16px rgba(134, 127, 139, 0.2); text-align: center; width: 100%; color: #fffbf7 !important; /* === MANUAL SUBTITLE POSITIONING CONTROL === */ /* SUBTITLE POSITIONING OPTIONS: --subtitle-x: 0px; // Move left/right (negative = left, positive = right) --subtitle-y: 0px; // Move up/down (negative = up, positive = down) EXAMPLES: --subtitle-x: -30px; --subtitle-y: -10px; // Move 30px left, 10px up --subtitle-x: 15px; --subtitle-y: 20px; // Move 15px right, 20px down --subtitle-x: -3vw; --subtitle-y: -1vh; // Use viewport units for responsive positioning */ --subtitle-x: 0px; /* CHANGE THIS VALUE TO ADJUST HORIZONTAL POSITION */ --subtitle-y: 50px; /* CHANGE THIS VALUE TO ADJUST VERTICAL POSITION */ } /* Enhanced Animations */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* NEW: Custom fadeInUp animation that respects manual positioning */ @keyframes fadeInUpCustom { from { opacity: 0; transform: translate(var(--welcome-x), calc(var(--welcome-y) + 30px)); } to { opacity: 1; transform: translate(var(--welcome-x), var(--welcome-y)); } } /* NEW: Custom fadeInUp animation for subtitle that respects manual positioning */ @keyframes fadeInUpCustomSubtitle { from { opacity: 0; transform: translate(var(--subtitle-x), calc(var(--subtitle-y) + 30px)); } to { opacity: 1; transform: translate(var(--subtitle-x), var(--subtitle-y)); } } /* New subtle halo glow animation for dynamic effect */ @keyframes haloGlow { 0%, 100% { filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.4)); } 50% { filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.6)); } } /* ==================================================================== RESPONSIVE DESIGN WITH ORIENTATION SUPPORT ==================================================================== */ /* TABLET SPECIFIC (768px - 1024px) */ @media (max-width: 1024px) and (min-width: 769px) { .elementor-widget-wp-widget-nav_menu { position: absolute !important; z-index: 9999 !important; display: block !important; visibility: visible !important; } .elementor-widget-wp-widget-nav_menu .menu { display: flex !important; justify-content: center !important; gap: 30px !important; padding: 0 20px !important; } .elementor-widget-wp-widget-nav_menu .menu li a { font-size: 15px !important; } /* Adjust content positioning for tablet */ .content-overlay { bottom: 70px !important; } /* Adjust halo effect for tablet */ .welcome-text { /* MANUAL POSITIONING FOR TABLET */ --welcome-x: -20px; /* ADJUST THIS VALUE FOR TABLET HORIZONTAL POSITIONING */ --welcome-y: 0px; /* ADJUST THIS VALUE FOR TABLET VERTICAL POSITIONING */ text-shadow: 0 0 6px rgba(255, 255, 255, 0.8), 0 0 12px rgba(255, 255, 255, 0.6), 0 0 18px rgba(255, 255, 255, 0.4), 0 0 24px rgba(255, 255, 255, 0.3), 0 0 30px rgba(255, 255, 255, 0.2); } /* Subtitle positioning for tablet */ .subtitle { /* MANUAL SUBTITLE POSITIONING FOR TABLET */ --subtitle-x: 0px; /* ADJUST THIS VALUE FOR TABLET HORIZONTAL POSITIONING */ --subtitle-y: 0px; /* ADJUST THIS VALUE FOR TABLET VERTICAL POSITIONING */ } } /* MOBILE SPECIFIC (max-width: 768px) */ @media (max-width: 768px) { .elementor-widget-wp-widget-nav_menu { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 9999 !important; display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; width: 100% !important; } .elementor-widget-wp-widget-nav_menu .elementor-widget-container { display: block !important; visibility: visible !important; padding: 12px 0 !important; background: rgba(255, 255, 255, 0.98) !important; } .elementor-widget-wp-widget-nav_menu .menu { display: flex !important; justify-content: center !important; align-items: center !important; gap: 15px !important; padding: 0 10px !important; margin: 0 !important; list-style: none !important; flex-wrap: wrap !important; } .elementor-widget-wp-widget-nav_menu .menu li { margin: 0 !important; padding: 0 !important; display: block !important; } .elementor-widget-wp-widget-nav_menu .menu li a { color: #666 !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 0.5px !important; padding: 8px 5px !important; display: block !important; text-decoration: none !important; } /* Enhanced mobile content positioning */ .content-overlay { bottom: 60px !important; z-index: 100 !important; padding: 0 10px !important; /* Less padding on mobile */ } .main-content { padding: 0 10px !important; /* Reduced padding for mobile */ } .welcome-text { margin-bottom: 5px; letter-spacing: 2px !important; /* Reduce letter spacing on mobile */ white-space: normal !important; /* Allow wrapping on very small screens if needed */ /* MANUAL POSITIONING FOR MOBILE */ --welcome-x: 0px; /* ADJUST THIS VALUE FOR MOBILE HORIZONTAL POSITIONING */ --welcome-y: 0px; /* ADJUST THIS VALUE FOR MOBILE VERTICAL POSITIONING */ /* Reduced halo effect for mobile performance */ text-shadow: 0 0 4px rgba(255, 255, 255, 0.8), 0 0 8px rgba(255, 255, 255, 0.6), 0 0 12px rgba(255, 255, 255, 0.4), 0 0 16px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 255, 255, 0.2); } .subtitle { margin-bottom: 30px; letter-spacing: 1.3px !important; /* MANUAL SUBTITLE POSITIONING FOR MOBILE */ --subtitle-x: 0px; /* ADJUST THIS VALUE FOR MOBILE HORIZONTAL POSITIONING */ --subtitle-y: 0px; /* ADJUST THIS VALUE FOR MOBILE VERTICAL POSITIONING */ } } /* VERY SMALL MOBILE (max-width: 480px) */ @media (max-width: 480px) { .elementor-widget-wp-widget-nav_menu .menu { gap: 8px !important; padding: 0 5px !important; } .elementor-widget-wp-widget-nav_menu .menu li a { font-size: 12px !important; padding: 6px 3px !important; } /* Additional text adjustments for very small screens */ .content-overlay { padding: 0 5px !important; } .main-content { padding: 0 5px !important; } /* Minimal halo effect for very small screens */ .welcome-text { /* MANUAL POSITIONING FOR VERY SMALL MOBILE */ --welcome-x: -10px; /* ADJUST THIS VALUE FOR VERY SMALL MOBILE HORIZONTAL POSITIONING */ --welcome-y:10px; /* ADJUST THIS VALUE FOR VERY SMALL MOBILE VERTICAL POSITIONING */ text-shadow: 0 0 3px rgba(255, 255, 255, 0.7), 0 0 6px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.3); } /* Subtitle positioning for very small screens */ .subtitle { /* MANUAL SUBTITLE POSITIONING FOR VERY SMALL MOBILE */ --subtitle-x: 5px; /* ADJUST THIS VALUE FOR VERY SMALL MOBILE HORIZONTAL POSITIONING */ --subtitle-y: -5px; /* ADJUST THIS VALUE FOR VERY SMALL MOBILE VERTICAL POSITIONING */ } } /* ==================================================================== LANDSCAPE MOBILE OPTIMIZATION - NEW SECTION ==================================================================== */ /* LANDSCAPE MOBILE SPECIFIC (phones in landscape orientation) */ @media screen and (orientation: landscape) and (max-height: 500px) and (min-width: 600px) { /* Allow controlled scrolling for landscape mobile ONLY */ body, html { overflow-y: auto !important; /* Allow vertical scrolling */ height: auto !important; min-height: 100vh !important; } .elementor-element.elementor-element-container, .elementor-container { height: auto !important; min-height: 100vh !important; overflow-y: auto !important; } .elementor-widget-html { height: auto !important; min-height: 100vh !important; } .elementor-widget-html .elementor-widget-container { height: auto !important; min-height: 100vh !important; } .elementor-carousel-container { height: 100vh !important; min-height: 100vh !important; } /* Optimize navigation menu for landscape mobile */ .elementor-widget-wp-widget-nav_menu .elementor-widget-container { padding: 8px 0 !important; /* Reduce padding */ background: rgba(255, 255, 255, 0.92) !important; } .elementor-widget-wp-widget-nav_menu .menu { gap: 12px !important; /* Reduce gap between menu items */ } .elementor-widget-wp-widget-nav_menu .menu li a { font-size: 12px !important; /* Smaller menu text */ padding: 6px 3px !important; } /* CRITICAL: Reposition content overlay for landscape mobile */ .content-overlay { bottom: 20px !important; /* Much lower positioning */ left: 0 !important; right: 0 !important; padding: 0 15px !important; z-index: 100 !important; } .main-content { padding: 0 10px !important; max-width: 100% !important; } /* Dramatically reduce text size for landscape mobile */ .welcome-text { font-size: clamp(2.5rem, 8vw, 4rem) !important; /* Much smaller */ line-height: 0.8 !important; margin-bottom: 2px !important; letter-spacing: 1px !important; /* MANUAL POSITIONING FOR LANDSCAPE MOBILE */ --welcome-x: 0px !important; /* ADJUST THIS VALUE FOR LANDSCAPE MOBILE HORIZONTAL POSITIONING */ --welcome-y: 0px !important; /* ADJUST THIS VALUE FOR LANDSCAPE MOBILE VERTICAL POSITIONING */ /* Reduced halo effect for landscape mobile */ text-shadow: 0 0 3px rgba(255, 255, 255, 0.9), 0 0 6px rgba(255, 255, 255, 0.7), 0 0 10px rgba(255, 255, 255, 0.5), 0 0 15px rgba(255, 255, 255, 0.3) !important; } .subtitle { font-size: clamp(1rem, 2.2vw, 1.1rem) !important; /* Much smaller subtitle */ margin-bottom: 15px !important; letter-spacing: 0.8px !important; line-height: 1.2 !important; /* MANUAL SUBTITLE POSITIONING FOR LANDSCAPE MOBILE */ --subtitle-x: 0px !important; /* ADJUST THIS VALUE FOR LANDSCAPE MOBILE HORIZONTAL POSITIONING */ --subtitle-y: 0px !important; /* ADJUST THIS VALUE FOR LANDSCAPE MOBILE VERTICAL POSITIONING */ /* Simpler text shadow for landscape mobile */ text-shadow: 1px 1px 2px rgba(134, 127, 139, 0.8), 0 0 4px rgba(134, 127, 139, 0.4) !important; } } /* VERY SMALL LANDSCAPE SCREENS (like iPhone in landscape) */ @media screen and (orientation: landscape) and (max-height: 400px) { .welcome-text { font-size: clamp(2rem, 6vw, 3rem) !important; /* Even smaller for very short screens */ margin-bottom: 0px !important; } .subtitle { font-size: clamp(0.9rem, 2vw, 1rem) !important; /* Even smaller subtitle */ margin-bottom: 10px !important; } .content-overlay { bottom: 15px !important; /* Even lower for very short screens */ } } /* ==================================================================== PORTRAIT ORIENTATION SPECIFIC ADJUSTMENTS ==================================================================== */ /* Portrait orientation adjustments */ @media screen and (orientation: portrait) { /* Adjust content positioning for portrait orientation */ .content-overlay { bottom: 15vh !important; /* Higher positioning in portrait */ } /* Adjust text sizing for portrait */ .welcome-text { font-size: clamp(4.9rem, 12vw, 6rem) !important; /* Slightly smaller in portrait */ } .subtitle { font-size: clamp(1.25rem, 2vw, 1.25rem) !important; /* Adjust subtitle for portrait */ } /* Portrait-specific image positioning */ .portrait-image { background-position: center center; /* Center positioning for portrait images */ } } /* FORCE OVERRIDE ANY THEME HIDING */ @media (max-width: 768px) { .elementor-widget-wp-widget-nav_menu, .elementor-widget-wp-widget-nav_menu .elementor-widget-container, .elementor-widget-wp-widget-nav_menu .menu { display: flex !important; visibility: visible !important; opacity: 1 !important; transform: none !important; max-height: none !important; overflow: visible !important; } } /* Reduced motion preferences */ @media (prefers-reduced-motion: reduce) { .carousel-track { transition: none; } .welcome-text, .subtitle { animation: none; opacity: 1; } /* Disable glow animation for reduced motion but keep custom positioning */ .welcome-text { animation: fadeInUpCustom 2s ease-out 1s forwards; } .subtitle { animation: fadeInUpCustomSubtitle 2s ease-out 1.5s forwards; } }/* End custom CSS */