.elementor-7987 .elementor-element.elementor-element-1786fb1{--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:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:none;--border-style:none;--margin-top:0px;--margin-bottom:50px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7987 .elementor-element.elementor-element-2760b2a{--display:flex;--background-transition:0.3s;--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;--z-index:1000;}.elementor-7987 .elementor-element.elementor-element-2760b2a:hover{background-color:#FAF9FC9E;}.elementor-7987 .elementor-element.elementor-element-3234518 > .elementor-widget-container{border-style:none;border-radius:10px 10px 10px 10px;}.elementor-7987 .elementor-element.elementor-element-3234518 .elementor-menu-toggle{margin-left:auto;}.elementor-7987 .elementor-element.elementor-element-3234518 .elementor-nav-menu .elementor-item{font-size:15px;text-transform:capitalize;letter-spacing:1px;}.elementor-7987 .elementor-element.elementor-element-3234518 .elementor-nav-menu--main .elementor-item{color:#5F5961;fill:#5F5961;padding-left:25px;padding-right:25px;padding-top:0px;padding-bottom:0px;}.elementor-7987 .elementor-element.elementor-element-3234518 .elementor-nav-menu--main .elementor-item:hover, .elementor-7987 .elementor-element.elementor-element-3234518 .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-7987 .elementor-element.elementor-element-3234518 .elementor-nav-menu--main .elementor-item.highlighted, .elementor-7987 .elementor-element.elementor-element-3234518 .elementor-nav-menu--main .elementor-item:focus{color:#A37D7D;fill:#A37D7D;}.elementor-7987 .elementor-element.elementor-element-3234518 .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#B10A0A;}.elementor-7987 .elementor-element.elementor-element-3234518{--e-nav-menu-horizontal-menu-item-margin:calc( 20px / 2 );--nav-menu-icon-size:30px;}.elementor-7987 .elementor-element.elementor-element-3234518 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:20px;}.elementor-7987 .elementor-element.elementor-element-3234518 .elementor-nav-menu--dropdown a, .elementor-7987 .elementor-element.elementor-element-3234518 .elementor-menu-toggle{color:#000000;fill:#000000;}.elementor-7987 .elementor-element.elementor-element-3234518 .elementor-nav-menu--dropdown{background-color:#FFFFFF;border-radius:0px 0px 0px 0px;}.elementor-7987 .elementor-element.elementor-element-3234518 .elementor-nav-menu--dropdown a:hover, .elementor-7987 .elementor-element.elementor-element-3234518 .elementor-nav-menu--dropdown a:focus, .elementor-7987 .elementor-element.elementor-element-3234518 .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-7987 .elementor-element.elementor-element-3234518 .elementor-nav-menu--dropdown a.highlighted, .elementor-7987 .elementor-element.elementor-element-3234518 .elementor-menu-toggle:hover, .elementor-7987 .elementor-element.elementor-element-3234518 .elementor-menu-toggle:focus{color:#FFFFFF;}.elementor-7987 .elementor-element.elementor-element-3234518 .elementor-nav-menu--dropdown a:hover, .elementor-7987 .elementor-element.elementor-element-3234518 .elementor-nav-menu--dropdown a:focus, .elementor-7987 .elementor-element.elementor-element-3234518 .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-7987 .elementor-element.elementor-element-3234518 .elementor-nav-menu--dropdown a.highlighted{background-color:#00000012;}.elementor-7987 .elementor-element.elementor-element-3234518 .elementor-nav-menu--dropdown a.elementor-item-active{color:#C89CFF;background-color:#00000012;}.elementor-7987 .elementor-element.elementor-element-3234518 .elementor-nav-menu--dropdown li:first-child a{border-top-left-radius:0px;border-top-right-radius:0px;}.elementor-7987 .elementor-element.elementor-element-3234518 .elementor-nav-menu--dropdown li:last-child a{border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.elementor-7987 .elementor-element.elementor-element-3234518 .elementor-nav-menu--main .elementor-nav-menu--dropdown, .elementor-7987 .elementor-element.elementor-element-3234518 .elementor-nav-menu__container.elementor-nav-menu--dropdown{box-shadow:0px 0px 30px 0px rgba(0, 0, 0, 0.1);}.elementor-7987 .elementor-element.elementor-element-3234518 .elementor-nav-menu--dropdown a{padding-left:15px;padding-right:15px;padding-top:15px;padding-bottom:15px;}.elementor-7987 .elementor-element.elementor-element-3234518 .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, .elementor-7987 .elementor-element.elementor-element-3234518 .elementor-nav-menu__container.elementor-nav-menu--dropdown{margin-top:15px !important;}.elementor-7987 .elementor-element.elementor-element-3234518 div.elementor-menu-toggle{color:#000000;}.elementor-7987 .elementor-element.elementor-element-3234518 div.elementor-menu-toggle svg{fill:#000000;}.elementor-7987 .elementor-element.elementor-element-b16844f{--display:flex;}.elementor-7987 .elementor-element.elementor-element-53d175c{border-style:none;padding:0px 0px 0px 0px;}.elementor-7987 .elementor-element.elementor-element-0762f3f{--display:flex;}.elementor-7987 .elementor-element.elementor-element-e48a3a3 > .elementor-widget-container{padding:0px 20px 0px 20px;}.elementor-7987 .elementor-element.elementor-element-df3f8f4{--display:flex;}.elementor-7987 .elementor-element.elementor-element-29dbbb3 > .elementor-widget-container{padding:0px 20px 0px 20px;}.elementor-7987 .elementor-element.elementor-element-ee2c52b{--n-tabs-heading-wrap:wrap;--n-tabs-heading-overflow-x:initial;--n-tabs-title-white-space:initial;--n-tabs-title-gap:50px;--n-tabs-gap:0px;--n-tabs-title-border-radius:16px 16px 16px 16px;--n-tabs-title-padding-top:0px;--n-tabs-title-padding-right:0px;--n-tabs-title-padding-bottom:0px;--n-tabs-title-padding-left:0px;--n-tabs-title-font-size:21px;--n-tabs-title-color:#5F5961;--n-tabs-title-color-active:#000000;}.elementor-7987 .elementor-element.elementor-element-ee2c52b > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected='false']:not( :hover ){background:#FFFFFF00;}.elementor-7987 .elementor-element.elementor-element-ee2c52b.elementor-widget-n-tabs > .elementor-widget-container > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:#FFFFFF00;border-style:solid;border-width:3px 3px 3px 3px;border-color:#999999;}.elementor-7987 .elementor-element.elementor-element-ee2c52b.elementor-widget-n-tabs > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-7987 .elementor-element.elementor-element-ee2c52b.elementor-widget-n-tabs > .elementor-widget-container > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:#EEE7F5;border-style:solid;border-width:3px 3px 3px 3px;border-color:#666666;}.elementor-7987 .elementor-element.elementor-element-ee2c52b.elementor-widget-n-tabs > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:not( :hover ){border-style:solid;border-width:3px 3px 3px 3px;border-color:#DDDDDD;}.elementor-7987 .elementor-element.elementor-element-ee2c52b.elementor-widget-n-tabs > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ){font-family:"Amiri", Sans-serif;font-weight:600;}.elementor-7987 .elementor-element.elementor-element-ee2c52b [data-touch-mode="false"] .e-n-tab-title[aria-selected="false"]:hover{--n-tabs-title-color-hover:#000000;}.elementor-7987 .elementor-element.elementor-element-b5b465d{--display:flex;}body.elementor-page-7987:not(.elementor-motion-effects-element-type-background), body.elementor-page-7987 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FAF9FC;}@media(max-width:1550px){.elementor-7987 .elementor-element.elementor-element-2760b2a{--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}}@media(max-width:1199px){.elementor-7987 .elementor-element.elementor-element-2760b2a{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7987 .elementor-element.elementor-element-3234518{--nav-menu-icon-size:20px;}.elementor-7987 .elementor-element.elementor-element-e48a3a3 > .elementor-widget-container{padding:0px 15px 0px 15px;}}@media(max-width:767px){.elementor-7987 .elementor-element.elementor-element-3234518{--nav-menu-icon-size:15px;}.elementor-7987 .elementor-element.elementor-element-e48a3a3 > .elementor-widget-container{padding:0px 15px 0px 15px;}.elementor-7987 .elementor-element.elementor-element-ee2c52b > .elementor-widget-container{margin:0px 0px 0px 0px;}}/* Start custom CSS for nav-menu, class: .elementor-element-3234518 *//*Check mobile menu to get the CSS class to target and remove top margin*/ .elementor-7987 .elementor-element.elementor-element-3234518 .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-2760b2a *//* ==================================================================== 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-7987 .elementor-element.elementor-element-2760b2a { /* 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-7987 .elementor-element.elementor-element-2760b2a::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-7987 .elementor-element.elementor-element-2760b2a: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-7987 .elementor-element.elementor-element-2760b2a .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-7987 .elementor-element.elementor-element-2760b2a .elementor-widget-wp-widget-nav_menu { position: relative !important; z-index: 3 !important; background: transparent !important; } /* Menu Container - Premium transparent base */ .elementor-7987 .elementor-element.elementor-element-2760b2a .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-7987 .elementor-element.elementor-element-2760b2a .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-7987 .elementor-element.elementor-element-2760b2a .elementor-widget-wp-widget-nav_menu .menu li { margin: 0 !important; padding: 0 !important; position: relative !important; } /* Ultra-Premium Menu Link Styling */ .elementor-7987 .elementor-element.elementor-element-2760b2a .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-7987 .elementor-element.elementor-element-2760b2a .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-7987 .elementor-element.elementor-element-2760b2a .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-7987 .elementor-element.elementor-element-2760b2a: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-7987 .elementor-element.elementor-element-2760b2a: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-7987 .elementor-element.elementor-element-2760b2a .elementor-widget-wp-widget-nav_menu .menu { gap: 28px !important; padding: 0 30px !important; } .elementor-7987 .elementor-element.elementor-element-2760b2a .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-7987 .elementor-element.elementor-element-2760b2a { 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-7987 .elementor-element.elementor-element-2760b2a .elementor-widget-wp-widget-nav_menu .elementor-widget-container { padding: 14px 0 !important; } .elementor-7987 .elementor-element.elementor-element-2760b2a .elementor-widget-wp-widget-nav_menu .menu { gap: 15px !important; padding: 0 20px !important; flex-wrap: wrap !important; } .elementor-7987 .elementor-element.elementor-element-2760b2a .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-7987 .elementor-element.elementor-element-2760b2a .elementor-widget-wp-widget-nav_menu .menu { gap: 10px !important; padding: 0 15px !important; } .elementor-7987 .elementor-element.elementor-element-2760b2a .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-7987 .elementor-element.elementor-element-2760b2a, .elementor-7987 .elementor-element.elementor-element-2760b2a::before { transition: none !important; animation: none !important; } .elementor-7987 .elementor-element.elementor-element-2760b2a:hover { transform: none !important; } .elementor-7987 .elementor-element.elementor-element-2760b2a .elementor-widget-wp-widget-nav_menu .menu li a { transition: none !important; } .elementor-7987 .elementor-element.elementor-element-2760b2a .elementor-widget-wp-widget-nav_menu .menu li a:hover { transform: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-1786fb1 */.wedding-calendar-wrapper { display: flex; justify-content: center; align-items: center; padding: 30px 20px; width: 100%; margin: 0 auto; position: relative; min-height: 600px; overflow: hidden; /*border-radius: 20px;*/ } /* Background Carousel Styles - Infinite Sliding */ .background-carousel { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; /*border-radius: 20px;*/ overflow: hidden; } .carousel-track { display: flex; width: calc(500px * 20); /* Width for 20 images (10 original + 10 duplicates) */ height: 100%; animation: infiniteSlide 100s linear infinite; } /* Pause animation on hover */ .background-carousel:hover .carousel-track { animation-play-state: paused; } .carousel-image { flex: 0 0 500px; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; transition: transform 0.3s ease; } /* Subtle hover effect on individual images */ .carousel-image:hover { transform: scale(1.05); cursor: pointer; } @keyframes infiniteSlide { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-500px * 11)); /* Move by the width of 11 images */ } } .calendar-container { background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 30%, rgba(255, 255, 255, 0.06) 70%, rgba(255, 255, 255, 0.02) 100% ); backdrop-filter: blur(40px) saturate(200%) brightness(110%); -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(110%); border-image: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 75%, rgba(255, 255, 255, 0.4) 100% ) 1; border-radius: 18px; padding: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08), 0 8px 25px rgba(0, 0, 0, 0.05), 0 3px 10px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05); position: relative; overflow: hidden; transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); cursor: pointer; max-width: 350px; width: 100%; margin: 0 auto; z-index: 10; /* Hardware acceleration */ will-change: transform, box-shadow, background, backdrop-filter, border; isolation: isolate; /* Floating effect */ transform: translateZ(0) perspective(1000px) rotateX(2deg); } .calendar-container::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 50% ), radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.06) 0%, transparent 40% ); border-radius: 18px; pointer-events: none; z-index: 1; } @keyframes liquidShimmer { 0% { transform: translateX(-100%) translateY(-100%) rotate(30deg); } 50% { transform: translateX(0%) translateY(0%) rotate(30deg); } 100% { transform: translateX(100%) translateY(100%) rotate(30deg); } } .calendar-container:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0.10) 70%, rgba(255, 255, 255, 0.06) 100% ); transform: translateY(-8px) translateZ(0) perspective(1000px) rotateX(0deg) scale(1.02); box-shadow: 0 35px 80px rgba(0, 0, 0, 0.12), 0 15px 35px rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.05), 0 3px 10px rgba(0, 0, 0, 0.03), inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.15); backdrop-filter: blur(50px) saturate(220%) brightness(115%); -webkit-backdrop-filter: blur(50px) saturate(220%) brightness(115%); border-image: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0.6) 100% ) 1; } .calendar-container:hover::before { animation-duration: 3s; opacity: 0.8; } .calendar-header { text-align: center; color: rgba(0, 0, 0, 0.8); z-index: 2; position: relative; } .month-year { font-size: 50px; font-family: Amiri; font-weight: 400; letter-spacing: 0.8px; margin-bottom: 0px; color: #5F5961; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); background: linear-gradient(45deg, #2c1810, #5F5961, #722F37); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.2; padding-top: 10px; } .calendar-subtitle { font-size: 20px; font-family: Amiri; opacity: 0.7; font-weight: 300; letter-spacing: 0.2px; color: #5F5961; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); background: linear-gradient(45deg, #3d3d3d, #5F5961, #8B1538); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; opacity: 1; transition: all 0.6s ease; padding-bottom: 10px; } .day-header { text-align: center; font-size: 0.6rem; font-weight: 600; color: #5F5961; padding: 4px 2px; letter-spacing: 0.4px; text-transform: uppercase; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); background: linear-gradient(45deg, #4a4a4a, #5F5961, #6d6d6d); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .calendar-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 500; color: rgba(0, 0, 0, 0.8); border-radius: 50%; transition: all 0.3s ease; position: relative; background: rgba(238, 231, 245, 0.3); border: 1px solid rgba(0, 0, 0, 0.1); min-height: 24px; } .calendar-day:not(.empty):hover { background: rgba(0, 0, 0, 0.1); transform: scale(1.1); color: rgba(0, 0, 0, 0.9); } .calendar-day.empty { background: transparent; border: none; color: transparent; } .calendar-day.today { background: rgba(0, 0, 0, 0.15); font-weight: 700; border: 2px solid rgba(0, 0, 0, 0.3); } .wedding-day { background: linear-gradient(135deg, #722F37, #8B1538) !important; border: 2px solid #fff !important; font-weight: 700 !important; font-size: 0.8rem !important; color: white !important; animation: heartbeat 2s ease-in-out infinite; position: relative; z-index: 2; border-radius: 50% !important; box-shadow: 0 0 0 2px rgba(114, 47, 55, 0.3), 0 6px 12px rgba(114, 47, 55, 0.4) !important; } @keyframes heartbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } /* Feature detection for backdrop-filter support */ @supports (backdrop-filter: blur(1px)) { .calendar-container { backdrop-filter: blur(40px) saturate(200%) brightness(110%); -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(110%); } .calendar-container:hover { backdrop-filter: blur(50px) saturate(220%) brightness(115%); -webkit-backdrop-filter: blur(50px) saturate(220%) brightness(115%); } } /* Fallback for browsers without backdrop-filter support */ @supports not (backdrop-filter: blur(1px)) { .calendar-container { background: rgba(255, 255, 255, 0.8) !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; } .calendar-container:hover { background: rgba(255, 255, 255, 0.9) !important; } } /* Countdown overlay styles */ .countdown-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.4) 100% ), url('https://conswedskai.com/wp-content/uploads/2025/06/7-Jan-Contance-ZK-ROM-33-2.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; backdrop-filter: blur(25px) saturate(200%); -webkit-backdrop-filter: blur(25px) saturate(200%); border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transform: scale(0.9); transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); pointer-events: none; z-index: 10; } .calendar-container:hover .countdown-overlay { opacity: 1; transform: scale(1); pointer-events: all; } .calendar-container:hover .calendar-grid { opacity: 0; transform: scale(0.9); } .countdown-title { color: white; font-size: 1rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 15px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .countdown-timer { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; } .countdown-unit { text-align: center; color: white; } .countdown-number { font-size: 1.6rem; font-weight: 700; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); line-height: 1; margin-bottom: 3px; background: linear-gradient(45deg, #ffffff, #ffe8f0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .countdown-label { font-size: 0.65rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.8px; opacity: 0.9; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .countdown-separator { font-size: 1.3rem; color: rgba(255, 255, 255, 0.7); font-weight: 300; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .celebration-mode .countdown-overlay { background-image: linear-gradient(135deg, rgba(255, 215, 0, 0.8) 0%, rgba(255, 193, 7, 0.6) 50%, rgba(255, 215, 0, 0.8) 100% ), url('https://conswedskai.com/wp-content/uploads/2025/06/7-Jan-Contance-ZK-ROM-33-2.jpg'); } .celebration-mode .countdown-number, .celebration-mode .countdown-separator, .celebration-mode .countdown-title { color: #2c1810 !important; text-shadow: 0 2px 4px rgba(255, 255, 255, 0.5) !important; } /* Responsive design */ @media (max-width: 768px) { .wedding-calendar-wrapper { min-height: 450px; padding: 20px 15px; /*border-radius: 15px;*/ } .background-carousel { /*border-radius: 15px;*/ } .carousel-track { width: calc(400px * 20); animation: infiniteSlide 80s linear infinite; } .background-carousel:hover .carousel-track { animation-play-state: paused; } .carousel-image { flex: 0 0 400px; } .carousel-image:hover { transform: scale(1.05); } @keyframes infiniteSlide { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-400px * 10)); } } .calendar-container { max-width: 280px; padding: 10px; } .calendar-grid { gap: 6px; /* FIXED: Increased from 3px to 6px to prevent circles clashing */ } .month-year { font-size: 30px; } .calendar-day { font-size: 0.65rem; min-height: 20px; /* FIXED: Reduced from 22px to 20px to prevent vertical clashing */ } .countdown-number { font-size: 1.3rem; } .countdown-timer { gap: 10px; } .countdown-title { font-size: 0.9rem; margin-bottom: 12px; } } /* Optimize for very small devices only (<390px) */ @media (max-width: 389px) { .wedding-calendar-wrapper { padding: 15px 10px; min-height: 380px; /*border-radius: 12px;*/ } .background-carousel { /*border-radius: 12px;*/ } .carousel-track { width: calc(300px * 20); animation: infiniteSlide 70s linear infinite; } .background-carousel:hover .carousel-track { animation-play-state: paused; } .carousel-image { flex: 0 0 300px; } .carousel-image:hover { transform: scale(1.05); } @keyframes infiniteSlide { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-300px * 10)); } } .calendar-container { /* Remove backdrop-filter for very small devices */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(255, 255, 255, 0.85) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; max-width: 240px; padding: 8px; } .calendar-container:hover { background: rgba(255, 255, 255, 0.95) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: translateY(-2px) scale(1.02); } .calendar-grid { gap: 4px; /* FIXED: Increased from 2px to 4px to prevent circles clashing */ } .calendar-day { font-size: 0.6rem; min-height: 18px; /* FIXED: Reduced from 20px to 18px to prevent vertical clashing */ } .countdown-number { font-size: 1.1rem; } .countdown-timer { gap: 8px; } .countdown-title { font-size: 0.8rem; margin-bottom: 10px; } } /* Disable effects for users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { .carousel-track { animation: none !important; } .calendar-container { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(255, 255, 255, 0.9) !important; transition: opacity 0.2s ease !important; } .calendar-container:hover { transform: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .wedding-day { animation: none !important; } }/* End custom CSS */ /* Start custom CSS for nested-tabs, class: .elementor-element-ee2c52b */@media (max-width: 767px) { .elementor-7987 .elementor-element.elementor-element-ee2c52b.elementor-widget-n-tabs > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ){ margin: 0 10px; } }/* End custom CSS */ /* Start custom CSS *//* Timeline Styles - FIXED LINE LENGTH & IPAD PRO ALIGNMENT */ .timeline-section { margin-bottom: 80px; /* Increased from 60px for better separation */ } .section-header { text-align: center; margin-bottom: 40px; } .section-title { display: none; font-size: 2.5rem; font-weight: 700; color: #1e293b; margin-bottom: 10px; } .section-subtitle { font-size: 1.1rem; color: #64748b; } /* Updated Timeline Container for Image Widgets - PHASE 3 SCROLLABLE */ .timeline-scroll-wrapper { position: relative; padding: 0; /* Removed padding since buttons are now at edges */ } /* Timeline Container - No Scrollbar, Arrow Navigation Only */ .timeline-container-new { position: relative; padding: 60px 20px 60px; /* Increased bottom padding from 40px to 60px */ width: 100%; max-width: none; /* Remove width constraint completely */ margin: 0 auto 40px; /* Add bottom margin */ overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; display: flex; justify-content: flex-start; /* Changed from space-between for scrolling */ box-sizing: border-box; /* Hide scrollbar for all browsers */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE and Edge */ } /* Hide scrollbar for webkit browsers */ .timeline-container-new::-webkit-scrollbar { display: none; } /* CORRECTED Timeline Line - PROPER LEFT/RIGHT POSITIONING */ .timeline-container-new::before { content: ''; position: absolute; top: 120px; /* Center of 120px logos (60px from top) */ left: 80px !important; /* Center of first logo (60px from edge + 20px padding) */ right: -20px !important; /* Center of last logo (60px from edge + 20px padding) */ height: 4px; background: #B8A5C4 !important; box-shadow: 0 2px 10px rgba(216, 199, 232, 0.4) !important; border-radius: 2px; /* Remove problematic width calculation - let left/right handle it */ width: auto !important; } /* Remove alternative line - not needed */ .timeline-container-new::after { display: none; } /* Individual Timeline Item Containers - SCROLLABLE SUPPORT */ .timeline-item-widget { flex: 0 0 300px; /* Fixed width for scrolling */ text-align: center; position: relative; min-width: 280px; max-width: 300px; padding: 0 20px; margin-right: 20px; /* Gap between items */ } .timeline-item-widget:last-child { margin-right: 0; } /* Navigation Buttons - PROPER ASPECT RATIO ARROWS */ .timeline-nav-button { position: absolute; top: calc(50% + 20px); /* Better alignment with timeline content */ transform: translateY(-50%); background: transparent; border: none !important; outline: none !important; box-shadow: none !important; width: 60px; /* Adequate size for proper proportions */ height: 40px; /* Rectangular to match arrow proportions */ cursor: pointer; transition: all 0.2s ease; z-index: 10; display: flex; align-items: center; justify-content: center; /* Custom arrow image - maintain original proportions */ background-image: url('https://conswedskai.com/wp-content/uploads/2025/06/next.png'); background-size: contain; /* This maintains the original aspect ratio */ background-repeat: no-repeat; background-position: center; opacity: 0.8; } .timeline-nav-button:hover { transform: translateY(-50%) scale(1.15); opacity: 1; } .timeline-nav-button:active { transform: translateY(-50%) scale(0.95); } .timeline-nav-button.prev { left: 0px; /* Position at the far left edge */ transform: translateY(-50%) rotate(180deg); background-color: transparent; } .timeline-nav-button.prev:hover { transform: translateY(-50%) rotate(180deg) scale(1.15); opacity: 1; } .timeline-nav-button.prev:active { transform: translateY(-50%) rotate(180deg) scale(0.95); } .timeline-nav-button.next { right: 0px; /* Position at the far right edge */ background-color: transparent; } .timeline-nav-button:disabled { opacity: 0.3; cursor: not-allowed; transform: translateY(-50%) scale(1); } .timeline-nav-button.prev:disabled { transform: translateY(-50%) rotate(180deg) scale(1); } .timeline-nav-button:disabled:hover { transform: translateY(-50%) scale(1); opacity: 0.3; } .timeline-nav-button.prev:disabled:hover { transform: translateY(-50%) rotate(180deg) scale(1); opacity: 0.3; } /* Full-Width Container Support */ .elementor-section-full_width .timeline-container-new { max-width: none; /* Remove width constraint completely */ padding: 60px 60px 40px; /* More side padding for full width */ } .elementor-section-full_width .timeline-item-widget { min-width: 280px; /* Larger minimum for full width */ max-width: 350px; /* Larger maximum for full width */ padding: 0 25px; /* More padding for full width */ } .elementor-section-full_width .timeline-container-new::before { left: 120px !important; /* More space from edges on full width (100px + 20px) */ right: 120px !important; /* More space from edges on full width (100px + 20px) */ } /* ENHANCED Image Widget Styling - PROPER ALIGNMENT */ .timeline-logo-image { width: 120px !important; height: 120px !important; border-radius: 50% !important; margin: 0 auto 0 !important; display: block !important; position: relative !important; z-index: 2 !important; transition: all 0.3s ease !important; object-fit: cover !important; background: linear-gradient(135deg, #ffffff, #f8fafc) !important; border: 4px solid #B8A5C4 !important; box-shadow: 0 8px 25px rgba(216, 199, 232, 0.2) !important; } /* Hover Effects for Timeline Logo Images */ .timeline-item-widget:hover .timeline-logo-image { transform: translateY(-5px) scale(1.1) !important; border-color: #A888A8 !important; box-shadow: 0 8px 25px rgba(255,254,239, 0.6) !important; } /* ENHANCED Timeline Content - BOXES REMOVED & TIGHTER SPACING */ .timeline-content { background: none !important; /* Remove background */ border-radius: 0 !important; /* Remove border radius */ padding: 0 10px !important; /* Much tighter padding */ box-shadow: none !important; /* Remove shadow */ border: none !important; /* Remove border */ transition: none !important; /* Remove transition effects */ position: relative; overflow: visible !important; /* Remove overflow hidden */ } /* Remove the top colored border */ .timeline-content::before { display: none !important; } /* Remove hover effects for the removed boxes */ .timeline-item-widget:hover .timeline-content { transform: none !important; box-shadow: none !important; } /* ENHANCED Timeline Text - TIGHTER SPACING */ .timeline-time { font-size: 1.6rem !important; font-weight: 800; color: #B8A5C4 !important; margin: 0px !important; padding: 0 6px !important; border-radius: 4px !important; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important; font-family: 'Amiri' !important; } /* Timeline Title - TIGHTER SPACING */ .timeline-title { font-size: 25px !important; font-weight: 500 !important; color: #5F5961 !important; margin: 0px 0px 8px 0px !important; padding: 0 6px !important; border-radius: 4px !important; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important; font-family: 'Amiri' !important; font-style: italic !important; line-height: 0.8 !important; } /* Timeline Description - TIGHTER SPACING */ .timeline-description { color: #64748b; line-height: 1.4 !important; font-size: 0.9rem !important; margin: 0 !important; background: rgba(255, 255, 255, 0.8) !important; padding: 6px 8px !important; border-radius: 4px !important; } /* Legacy Timeline Styles (for backward compatibility) - ENHANCED */ .timeline-container { position: relative; padding: 60px 20px 60px; /* Increased bottom padding */ overflow-x: auto; margin-bottom: 40px; /* Add bottom margin */ } /* CORRECTED Legacy Timeline Line */ .timeline-line { position: absolute; top: 95px; left: 80px !important; /* Center of first logo */ right: 80px !important; /* Center of last logo */ height: 4px; background: linear-gradient(90deg, #D8C7E8, #EEE7F5) !important; box-shadow: 0 2px 10px rgba(216, 199, 232, 0.4) !important; border-radius: 2px; width: auto !important; /* Remove width calculation */ } .timeline-grid { display: flex; justify-content: space-between; align-items: flex-start; min-width: 800px; position: relative; } .timeline-item { flex: 1; text-align: center; padding: 0 15px; position: relative; } .timeline-logo { width: 70px; height: 70px; background: linear-gradient(135deg, #ffffff, #f8fafc); border-radius: 50%; margin: 0 auto 15px !important; /* Reduced from 20px */ display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; transition: all 0.3s ease; overflow: hidden; border: 4px solid #D8C7E8 !important; box-shadow: 0 8px 25px rgba(216, 199, 232, 0.4) !important; } .timeline-logo::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, #D8C7E8, #C8B5DC) !important; opacity: 0; transition: opacity 0.3s ease; } .timeline-logo::after { content: '💎'; font-size: 28px; position: relative; z-index: 1; transition: all 0.3s ease; } .timeline-item:hover .timeline-logo { transform: translateY(-5px) scale(1.1); border-color: #C8B5DC !important; } .timeline-item:hover .timeline-logo::before { opacity: 0.1; } /* Info Cards - MATCH TIMELINE WIDTH */ .info-cards-section { max-width: none; /* Match timeline container */ width: 100%; margin: 0 auto; padding: 0 20px; } .info-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; max-width: none; /* Remove width constraint */ width: 100%; } /* FIXED: More specific transition that doesn't conflict with ::before */ .info-card { background: linear-gradient(135deg, #ffffff, #f8fafc); border-radius: 20px; padding: 40px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08), 0 0 20px rgba(255, 245, 230, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.2); /* FIXED: Specific properties instead of 'all' to avoid ::before conflict */ transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease; margin-bottom: 30px; } .info-card:hover { transform: translateY(-5px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12); } .info-card-header { display: flex; align-items: center; justify-content: center !important; } .info-card-icon { width: 50px; height: 50px; background: linear-gradient(135deg, #D8C7E8, #C8B5DC) !important; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-right: 15px; font-size: 20px; color: white; } .info-card-title { font-size: 40px !important; font-weight: 400 !important; color: #5F5961 !important; font-family: Amiri !important; margin: 10px !important; font-style: italic !important; text-align: center !important; line-height: 1.2 !important; } /* ENHANCED INFO LIST STYLES WITH RICH TEXT SUPPORT */ .info-list { list-style: none; padding: 0; margin: 0; } .info-list li { padding: 12px 0; position: relative; padding-left: 10px; color: #475569; line-height: 1.6; /* Enhanced for better rich text readability */ } .info-list li:last-child { border-bottom: none; } /* Rich Text Elements in Info Lists */ .info-list li strong { color: #1e293b; font-weight: 700; } .info-list li em { font-style: italic; color: #64748b; } .info-list li u { text-decoration: underline; text-decoration-color: #D8C7E8 !important; } .info-list li a { color: #B8A5C4 !important; text-decoration: none; font-weight: 500; } .info-list li a:hover { color: #A888A8 !important; text-decoration: underline; } /* Handle Paragraphs in Rich Text Fields within Info Lists */ .info-list li p { margin: 0; padding: 0; } /* Handle Lists Within Rich Text in Info Lists */ .info-list li ul, .info-list li ol { margin: 8px 0 8px 20px; padding: 0; } .info-list li ul li, .info-list li ol li { border-bottom: none; padding: 4px 0; padding-left: 0; position: relative; } /* Placeholder styling for empty ACF fields */ .info-placeholder { padding: 20px; text-align: center; background: rgba(216, 199, 232, 0.08) !important; border-radius: 8px; margin-top: 10px; } .info-placeholder p { color: #64748b; font-style: italic; margin: 0; } /* ENHANCED SPECIAL NOTES WITH RICH TEXT SUPPORT */ .special-notes { background: radial-gradient(ellipse at left center, transparent 85%, rgba(235, 226, 240, 0.1) 100%), radial-gradient(ellipse at right center, transparent 85%, rgba(235, 226, 240, 0.1) 100%), linear-gradient( 135deg, #ffffff 0%, #f8f4f9 30%, #fdf8ec 60%, #f0f4f9 85%, #ffffff 100%); border-radius: 20px; position: relative; overflow: hidden; margin: 50px 0; padding: 0 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08), 0 0 20px rgba(255, 245, 230, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.5); } .special-notes::before { display: none; content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(-20px, -20px) rotate(180deg); } } .special-notes-header { text-align: center; margin-bottom: 30px; position: relative; z-index: 2; } .special-notes-title { margin-bottom: 10px; font-size: 45px !important; font-weight: 400 !important; color: #5F5961 !important; font-family: Amiri !important; font-style: italic !important; } .special-notes-subtitle { font-size: 1.1rem; opacity: 0.9; display: none; } .notes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; position: relative; z-index: 2; padding: 0 40px 40px 40px; } .note-item { background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); border-radius: 16px; padding: 25px; border: 1.2px solid rgba(255, 255, 255, 0.4); transition: all 0.3s ease; } .note-item:hover { background: rgba(255, 255, 255, 0.8); transform: translateY(-3px); } .note-icon { font-size: 25px; margin-bottom: 10px; display: block; font-family: Amiri; line-height: 1.2; color: #5F5961 !important; } /* ENHANCED NOTE TEXT WITH RICH TEXT SUPPORT */ .note-text { line-height: 1.6; font-size: 1rem; margin: 0; font-family: Poppins !important; color: #5F5961 !important; } /* Rich Text Elements in Special Notes */ .note-text strong { font-weight: 700; } .note-text em { font-style: italic; opacity: 0.9; } .note-text u { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.7); } .note-text a { text-decoration: none; font-weight: 500; border-bottom: 1px solid rgba(255, 255, 255, 0.3); } .note-text a:hover { color: black; border-bottom-color: rgba(255, 255, 255, 0.7); } /* Handle Paragraphs in Rich Text Fields within Notes */ .note-text p { margin: 0 0 10px 0; color: #5F5961 !important; font-family: Poppins !important; } .note-item p { color: #5F5961 !important; font-family: Poppins !important; } .note-text p:last-child { margin-bottom: 0; } /* Handle Lists Within Rich Text in Notes */ .note-text ul, .note-text ol { margin: 10px 0; padding-left: 20px; } .note-text li { margin: 5px 0; padding: 0; border: none; color: inherit; } /* Info Cards Background Images - Simple Hardcoded Version */ /* First Info Card - Attire Guidelines Background */ .info-cards-grid .info-card:nth-child(1) { background-image: url('https://conswedskai.com/wp-content/uploads/2025/06/Info-Cards-BG-Attire-Guidelines.png'); background-size: contain; background-position: center; background-repeat: no-repeat; position: relative; overflow: hidden; } /* Second Info Card - Transport Information Background */ .info-cards-grid .info-card:nth-child(2) { background-image: url('https://conswedskai.com/wp-content/uploads/2025/06/Info-Cards-BG-Transport-Parking.png'); background-size: contain; background-position: center; background-repeat: no-repeat; position: relative; overflow: hidden; } /* White overlay for better text readability - applies to both cards */ .info-cards-grid .info-card:nth-child(1)::before, .info-cards-grid .info-card:nth-child(2)::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at left center, transparent 85%, rgba(235, 226, 240, 0.08) 100%), radial-gradient(ellipse at right center, transparent 85%, rgba(235, 226, 240, 0.08) 100%), linear-gradient( 135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 244, 249, 0.95) 30%, rgba(253, 248, 236, 0.95) 60%, rgba(240, 244, 249, 0.95) 85%, rgba(255, 255, 255, 0.95) 100% ); z-index: 1; /* Enhanced smooth transition for buttery hover effect */ transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Reduce overlay on hover for more image visibility */ .info-cards-grid .info-card:nth-child(1):hover::before, .info-cards-grid .info-card:nth-child(2):hover::before { background: radial-gradient(ellipse at left center, transparent 85%, rgba(235, 226, 240, 0.06) 100%), radial-gradient(ellipse at right center, transparent 85%, rgba(235, 226, 240, 0.06) 100%), linear-gradient( 135deg, rgba(255, 255, 255, 0.80) 0%, rgba(248, 244, 249, 0.80) 30%, rgba(253, 248, 236, 0.80) 60%, rgba(240, 244, 249, 0.80) 85%, rgba(255, 255, 255, 0.80) 100% ); /* Same smooth transition for consistent bidirectional animation */ transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Ensure all content appears above the overlay */ .info-cards-grid .info-card .info-card-header, .info-cards-grid .info-card .info-list, .info-cards-grid .info-card .info-placeholder { position: relative; z-index: 2; } /* Enhanced text contrast for better readability */ .info-cards-grid .info-card:nth-child(1) .info-card-title, .info-cards-grid .info-card:nth-child(2) .info-card-title { color: #1e293b; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8); } .info-cards-grid .info-card:nth-child(1) .info-list li, .info-cards-grid .info-card:nth-child(2) .info-list li { color: #374151; } .info-cards-grid .info-card:nth-child(1) .info-list li strong, .info-cards-grid .info-card:nth-child(2) .info-list li strong { color: #1f2937; } /* Enhanced icons with subtle shadow */ .info-cards-grid .info-card:nth-child(1) .info-card-icon, .info-cards-grid .info-card:nth-child(2) .info-card-icon { box-shadow: 0 4px 15px rgba(216, 199, 232, 0.4) !important; border: 2px solid rgba(255, 255, 255, 0.8); } /* RESPONSIVE DESIGN - ENHANCED WITH PROPER LINE FIXES */ @media (max-width: 1200px) { .timeline-container-new { max-width: 1100px; /* Only constrain on smaller screens */ } .timeline-item-widget { min-width: 240px; padding: 0 20px; } /* Timeline line adjusts automatically with left/right positioning */ .timeline-container-new::before { left: 70px !important; right: -400px !important; } } @media (max-width: 900px) { .timeline-container-new { padding: 60px 15px 40px; gap: 15px; max-width: 900px; } .timeline-item-widget { min-width: 200px; max-width: 250px; padding: 0 15px; } .timeline-logo-image { width: 60px !important; height: 60px !important; margin: 0 auto 12px !important; /* Tighter spacing on tablet */ } .timeline-content { padding: 10px 5px !important; /* Tighter padding on tablet */ margin-top: 8px !important; } .timeline-time { margin-bottom: 4px !important; font-size: 1.3rem !important; } .timeline-title { font-size: 1.3rem !important; margin-bottom: 6px !important; } .timeline-description { font-size: 0.85rem !important; } /* Fix timeline line position for smaller logos */ .timeline-container-new::before { top: 60px !important; /* Center of 60px logos */ left: 45px !important; /* Center of smaller logo + padding */ right: -1005px !important; } } /* ENHANCED: iPad Pro Portrait & Landscape Fix */ @media (min-width: 769px) and (max-width: 1024px) { .timeline-logo-image { width: 100px !important; height: 100px !important; } .timeline-container-new::before { top: 110px !important; /* Center of 100px logos */ left: 70px !important; /* Adjusted for iPad Pro */ right: -350px !important; } .timeline-item-widget { min-width: 250px; max-width: 280px; } } /* Additional iPad-specific adjustments */ @media (min-width: 769px) and (max-width: 900px) { .timeline-logo-image { width: 90px !important; height: 90px !important; } .timeline-container-new::before { top: 105px !important; /* Center of 90px logos */ left: 60px !important; right: -550px !important; } } @media (max-width: 768px) { /* Hide Navigation Buttons on Mobile - Timeline is Vertical */ .timeline-nav-button { display: none !important; /* Hide all navigation buttons on mobile */ } /* New Timeline Mobile Layout - ENHANCED */ .timeline-container-new { flex-direction: column; gap: 30px; padding: 40px 20px 30px; } .timeline-container-new::before { display: none; } .timeline-item-widget { display: flex; align-items: flex-start; text-align: left; padding-left: 90px; max-width: none; position: relative; flex: 0; margin: 0px; } .timeline-logo-image { position: absolute !important; left: 0 !important; top: 10px !important; margin: 0 !important; width: 80px !important; height: 80px !important; } .timeline-content { flex: 1; margin-left: 0; padding: 8px 5px !important; /* Even tighter on mobile */ margin-top: 8px !important; } /* Mobile Timeline Text Adjustments */ .timeline-time { margin-bottom: 4px !important; font-size: 1.3rem !important; } .timeline-title { margin-bottom: 6px !important; font-size: 1.3rem !important; } .timeline-description { font-size: 0.85rem !important; } /* Legacy Timeline Mobile Layout */ .timeline-container { padding: 40px 20px 50px; /* Increased bottom padding */ margin-bottom: 30px; } .timeline-line { display: none; } .timeline-grid { flex-direction: column; min-width: auto; gap: 30px; } .timeline-item { display: flex; align-items: flex-start; text-align: left; padding: 0; position: relative; padding-left: 90px; } .timeline-logo { position: absolute; left: 0; top: 10px; margin: 0 auto 12px !important; /* Tighter spacing */ width: 60px; height: 60px; } .timeline-content { flex: 1; margin-left: 0; } .section-title { font-size: 2rem; } .notes-grid { grid-template-columns: 1fr; padding: 0px !important; } .info-cards-section { padding: 0 15px; /* Match responsive timeline padding */ } .info-cards-grid { grid-template-columns: 1fr; /* Stack on mobile */ gap: 20px; } .info-card { padding: 25px; } .special-notes { padding: 25px; } /* Mobile Rich Text Adjustments */ .info-list li { font-size: 0.9rem; line-height: 1.5; } .note-text { font-size: 0.95rem; } /* Mobile Background Image Adjustments */ .info-cards-grid .info-card:nth-child(1)::before, .info-cards-grid .info-card:nth-child(2)::before { background: radial-gradient(ellipse at left center, transparent 85%, rgba(235, 226, 240, 0.08) 100%), radial-gradient(ellipse at right center, transparent 85%, rgba(235, 226, 240, 0.08) 100%), linear-gradient( 135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 244, 249, 0.95) 30%, rgba(253, 248, 236, 0.95) 60%, rgba(240, 244, 249, 0.95) 85%, rgba(255, 255, 255, 0.95) 100% ); /* More overlay on mobile */ } .info-cards-grid .info-card:nth-child(1):hover::before, .info-cards-grid .info-card:nth-child(2):hover::before { background: radial-gradient(ellipse at left center, transparent 85%, rgba(235, 226, 240, 0.06) 100%), radial-gradient(ellipse at right center, transparent 85%, rgba(235, 226, 240, 0.06) 100%), linear-gradient( 135deg, rgba(255, 255, 255, 0.80) 0%, rgba(248, 244, 249, 0.80) 30%, rgba(253, 248, 236, 0.80) 60%, rgba(240, 244, 249, 0.80) 85%, rgba(255, 255, 255, 0.80) 100% ); } } @media (max-width: 480px) { /* Navigation Buttons Stay Hidden on Small Mobile */ .timeline-nav-button { display: none !important; /* Keep hidden on all mobile screens */ } .timeline-container-new { padding: 30px 15px 25px; } .timeline-item-widget { padding-left: 75px; } .timeline-logo-image { width: 68px !important; height: 68px !important; margin: 0 auto 10px !important; /* Even tighter spacing on small mobile */ } .timeline-content { padding: 8px 5px !important; /* Adjust for very small screens */ } .timeline-time { margin-bottom: 0px !important; font-size: 1.3rem !important; line-height: 1.5 !important; } .timeline-title { font-size: 1.3rem !important; margin-bottom: 5px !important; } .timeline-description { font-size: 0.8rem !important; } /* Small Mobile Rich Text Adjustments */ .info-list li { font-size: 0.85rem; } .note-text { font-size: 0.9rem; } .note-item p { font-size: 0.85rem !important; } } /* ===== BEAUTIFUL TAB BUTTONS - ALL SCREEN SIZES ===== */ /* Base styling for all screen sizes */ .e-n-tabs .e-n-tab-title { /* Base styling - purple gradient as default */ background: linear-gradient(135deg, #B8A5C4 0%, #C8B5DC 100%) !important; border: 2px solid #A888A8 !important; border-radius: 50px !important; padding: 10px 15px !important; cursor: pointer !important; /* Typography */ font-weight: 600 !important; font-size: 18px !important; color: white !important; text-align: center !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; /* Visual enhancements */ box-shadow: 0 4px 15px rgba(184, 165, 196, 0.2) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; overflow: hidden !important; /* Add a subtle pulse animation to indicate interactivity */ animation: subtle-pulse 3s ease-in-out infinite !important; } /* Hover state - make it clearly interactive */ .e-n-tabs .e-n-tab-title:hover { background: linear-gradient(135deg, #A888A8 0%, #967BA0 100%) !important; border-color: #8B6F93 !important; color: white !important; transform: translateY(-2px) !important; box-shadow: 0 8px 25px rgba(168, 136, 168, 0.4) !important; animation: none !important; } /* Active state - when tab is selected */ .e-n-tabs .e-n-tab-title[aria-selected="true"] { background: linear-gradient(135deg, #967BA0 0%, #7D6B85 100%) !important; border-color: #6A5A72 !important; color: white !important; transform: translateY(-1px) !important; box-shadow: 0 6px 20px rgba(150, 123, 160, 0.5) !important; animation: none !important; } /* Pressed/clicked state */ .e-n-tabs .e-n-tab-title:active { transform: translateY(1px) !important; box-shadow: 0 2px 10px rgba(184, 165, 196, 0.2) !important; } /* Enhanced focus state for accessibility */ .e-n-tabs .e-n-tab-title:focus { outline: 3px solid rgba(184, 165, 196, 0.5) !important; outline-offset: 2px !important; } /* Pulse animation */ @keyframes subtle-pulse { 0%, 100% { box-shadow: 0 4px 15px rgba(184, 165, 196, 0.2); } 50% { box-shadow: 0 4px 15px rgba(184, 165, 196, 0.4); } } /* Entrance animation */ @keyframes slideInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* ===== MOBILE SPECIFIC STYLING ===== */ @media (max-width: 768px) { .e-n-tabs .e-n-tab-title { margin-bottom: 16px !important; /*animation: slideInUp 0.6s ease-out, subtle-pulse 3s ease-in-out infinite !important;*/ } .e-n-tabs .e-n-tab-title:nth-child(2) { animation-delay: 0.1s !important; } /* Add clickable indicator arrow on mobile */ .e-n-tabs .e-n-tab-title::after { content: '▼' !important; position: absolute !important; right: 20px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 14px !important; color: rgba(255, 255, 255, 0.8) !important; transition: all 0.3s ease !important; opacity: 0.8 !important; font-weight: bold !important; } /* Hover arrow animation on mobile */ .e-n-tabs .e-n-tab-title:hover::after { color: white !important; opacity: 1 !important; transform: translateY(-50%) scale(1.1) !important; } /* Active arrow - rotate to indicate open on mobile */ .e-n-tabs .e-n-tab-title[aria-selected="true"]::after { transform: translateY(-50%) rotate(180deg) !important; color: white !important; opacity: 1 !important; } /* Ensure tabs are stacked vertically on mobile */ .e-n-tabs .e-n-tabs-heading { /*display: flex !important;*/ flex-direction: column !important; position: relative !important; } /* Remove any margin from the last tab on mobile */ .e-n-tabs .e-n-tab-title:last-child { margin-bottom: 10px !important; } /* Ensure tab content appears below the tabs on mobile */ .e-n-tabs .e-n-tabs-content { margin-top: 10px !important; } /* Add a subtle background pattern for extra visual interest on mobile */ .e-n-tabs .e-n-tabs-heading::before { content: '' !important; position: absolute !important; /*top: -10px !important; left: -10px !important; right: -10px !important; bottom: -10px !important;*/ background: radial-gradient(circle at 20% 80%, rgba(184, 165, 196, 0.05) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(200, 181, 220, 0.05) 0%, transparent 50%) !important; border-radius: 20px !important; z-index: -1 !important; pointer-events: none !important; } } /* ===== TABLET STYLING ===== */ @media (min-width: 769px) and (max-width: 1024px) { .e-n-tabs .e-n-tab-title { margin-right: 16px !important; margin-bottom: 10px !important; min-width: 200px !important; /*animation: slideInUp 0.6s ease-out, subtle-pulse 3s ease-in-out infinite !important;*/ } .e-n-tabs .e-n-tab-title:nth-child(2) { animation-delay: 0.1s !important; } /* Ensure proper spacing between tabs on tablet */ .e-n-tabs .e-n-tabs-heading { gap: 10px !important; display: flex !important; flex-wrap: wrap !important; } } /* ===== DESKTOP STYLING ===== */ @media (min-width: 1025px) { .e-n-tabs .e-n-tab-title { margin-right: 20px !important; margin-bottom: 10px !important; min-width: 250px !important; font-size: 20px !important; padding: 24px 32px !important; /*animation: slideInUp 0.6s ease-out, subtle-pulse 3s ease-in-out infinite !important;*/ } .e-n-tabs .e-n-tab-title:nth-child(2) { animation-delay: 0.1s !important; } /* Enhanced hover effects on desktop */ .e-n-tabs .e-n-tab-title:hover { transform: translateY(-3px) !important; box-shadow: 0 10px 30px rgba(168, 136, 168, 0.4) !important; } /* Ensure proper spacing between tabs on desktop */ .e-n-tabs .e-n-tabs-heading { gap: 15px !important; display: flex !important; flex-wrap: wrap !important; } } /* ===== FUNCTIONAL CSS FOR TAB BEHAVIOR ===== */ @media (max-width: 768px) { /* Standard Elementor behavior - hide content without e-active class */ .e-n-tabs [id^="e-n-tab-content-"]:not(.e-active), .e-n-tabs [role="tabpanel"]:not(.e-active) { display: none !important; } /* Show active content normally */ .e-n-tabs [id^="e-n-tab-content-"].e-active, .e-n-tabs [role="tabpanel"].e-active { display: block !important; } } /* ===== END BEAUTIFUL TAB BUTTONS ===== *//* End custom CSS */