:root{--content-width: 1230px;--content-edge-padding-x: 15px;--content-edge-padding-y: 30px;--font-size-body: 14px;--palette1: #ca0000!important;--palette2: #0a4275!important;--palette3: #222222!important;--palette4: #666666!important;--palette5: #777777!important;--palette6: #888888!important;--palette7: #f2f2f2!important;--palette8: #f6f6f6!important;--palette9: #ffffff!important;--palette10: #212121!important;--palette11: #ca0000!important;}@media (min-width: 1025px){.container {max-width:1230px;}}@media (min-width: 1025px){.container {max-width:1230px;}}.hero-section .page-title-wrapper{min-height:120px;}/* --- FIX: Force Menu to Show on Homepage (Behaviour 1) --- */ /* 1. Force the menu content to be visible on the homepage */ body#index #_desktop_verticalmenu .avaorg-menu-vertical .menu-content { display: block !important; } /* 2. Re-enable click events on the menu title on the homepage This is for safety, though the menu is permanently open now. */ body#index #_desktop_verticalmenu .avaorg-menu-vertical .title_vertical { pointer-events: auto !important; cursor: pointer !important; /* Ensure the mouse shows a pointer */ } /* 3. Re-enable hover/toggle ability on the menu title on ALL non-homepage pages (This addresses the second part of your goal: clickable on other pages) */ body:not(#index) #_desktop_verticalmenu .avaorg-menu-vertical .title_vertical { pointer-events: auto !important; cursor: pointer !important; } /* 1. Turn the column list into a Flex row */ .avaorg-menu-col13 .ul-column { display: flex !important; flex-direction: row; justify-content: space-between; /* Spacing between images */ align-items: flex-start; /* Align top */ gap: 15px; /* Add space between the two images */ padding: 0; } /* 2. Force the list items (li) to take up 50% width each */ .avaorg-menu-col13 .submenu-item { width: 50%; list-style: none; margin-bottom: 0 !important; } /* 3. Ensure images are responsive and don't overflow */ .avaorg-menu-col13 .submenu-item img { max-width: 100%; height: auto; display: block; } /* 1. Stop the individual items from being the "Anchor" */ .avaorg-menu-vertical .menu-item { position: static !important; } /* 2. Make the main menu wrapper the new "Anchor" */ .avaorg-menu-vertical { position: relative !important; } /* 3. Force the sub-menu to stick to the top-left of the main wrapper */ .avaorg-menu-vertical .avaorg-sub-menu { top: 0 !important; left: 100% !important; /* Move it to the right side */ margin-top: 0 !important; min-height: 100% !important; /* Optional: Make it as tall as the menu */ } /* 4. Fix inner container spacing */ .popup_vertical { margin-top: 0 !important; padding-top: 0 !important; } .horiztonalmenuimages002 .ul-column { display: flex !important; flex-direction: row !important; justify-content: space-between; padding: 0; } .horiztonalmenuimages002 .submenu-item { width: 50%; /* Fits 2 items in one row with small gaps */ } .horiztonalmenuimages002 img { max-width: 100%; height: auto; } .horiztonalmenuimages002 .ul-column { display: flex !important; flex-direction: row !important; justify-content: space-between; padding: 0; } .horiztonalmenuimages003 .submenu-item { width: 32%; /* Fits 3 items in one row with small gaps */ } .horiztonalmenuimages003 img { max-width: 100%; height: auto; } .perso-container { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; width: 100%; max-width: 100%; flex-wrap: wrap; margin-top: 40px; } .perso-item { flex: 1; text-align: center; min-width: 0; max-width: 25%; cursor: pointer; } .perso-icon-wrapper { position: relative; background-color: white; border-radius: 50%; width: 100px; height: 100px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .perso-item:hover .perso-icon-wrapper { transform: scale(1.05); } .perso-icon-wrapper img { transition: opacity 0.3s ease; display: block; } .perso-icon-default { opacity: 1; position: relative; } .perso-icon-hover { position: absolute; opacity: 0; } .perso-item:hover .perso-icon-default { opacity: 0; } .perso-item:hover .perso-icon-hover { opacity: 1; } .perso-title { color: #333; padding: 5px 0; font-size: 13px; font-weight: bold; text-transform: uppercase; margin-top: 5px; transition: color 0.3s ease; } .perso-item:hover .perso-title { color: #d32f2f; } /* Make the ul-column a flex container for better control */ .avaorg-menu-col22 .ul-column { display: flex !important; flex-wrap: wrap !important; } /* First li (icons) takes full width */ .avaorg-menu-col22 .submenu-item:first-child { flex: 0 0 100% !important; width: 100% !important; margin-bottom: 15px !important; } .avaorg-menu-col22 .submenu-item:nth-child(2), .avaorg-menu-col22 .submenu-item:nth-child(3), .avaorg-menu-col22 .submenu-item:nth-child(4) { flex: 0 0 32% !important; width: 32% !important; margin-right: 2% !important; } /* Remove margin from last image */ .avaorg-menu-col22 .submenu-item:nth-child(4) { margin-right: 0 !important; } /* Make sure images fit properly */ .avaorg-menu-col22 .submenu-item img { max-width: 100%; height: auto; display: block; } /* Mobile responsive - 2 columns for images */ @media (max-width: 767px) { /* Keep icons in a row on mobile (might need to adjust) */ .perso-container { gap: 5px; } .perso-item { max-width: 40%; min-width: 40%; } .perso-icon-wrapper { width: 70px; height: 70px; } .perso-title { font-size: 10px; } /* Images: 2 columns on mobile */ .avaorg-menu-col22 .submenu-item:nth-child(2), .avaorg-menu-col22 .submenu-item:nth-child(3) { flex: 0 0 48% !important; width: 48% !important; margin-right: 4% !important; margin-bottom: 10px !important; } .avaorg-menu-col22 .submenu-item:nth-child(3) { margin-right: 0 !important; } /* Third image takes full width or centered */ .avaorg-menu-col22 .submenu-item:nth-child(4) { flex: 0 0 48% !important; width: 48% !important; margin-right: 0 !important; margin-left: auto !important; } } @media (min-width: 767px) { /* NEW: Clean menu item styling without padding hacks */ .avaorg-menu-horizontal .menu-item > a { padding-bottom: 15px !important; /* Normal padding only */ margin-bottom: 0 !important; /* No negative margin */ position: relative; z-index: 10; } /* REMOVE THE OLD TRANSITION DELAY - Replace these lines: OLD CODE TO REMOVE/COMMENT OUT: .avaorg-menu-horizontal .avaorg-sub-menu { display: block !important; opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out; transition-delay: 0.4s !important; } .avaorg-menu-horizontal .menu-item:hover .avaorg-sub-menu { opacity: 1; visibility: visible; transition-delay: 0s !important; } */ /* NEW: Let JavaScript handle the display/visibility */ .avaorg-menu-horizontal .avaorg-sub-menu { display: none !important; /* Hidden by default */ opacity: 0; visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 9999; margin-top: 0; transition: opacity 0.2s ease-in-out; /* NO transition-delay - JS handles timing */ } /* When JS adds the show-submenu class */ .avaorg-menu-horizontal .menu-item.show-submenu > .avaorg-sub-menu { display: block !important; opacity: 1; visibility: visible; } /* Remove CSS hover behavior - let JS handle it */ .avaorg-menu-horizontal .menu-item:hover > .avaorg-sub-menu { /* Don't automatically show on hover - JS controls this now */ /* Remove or comment out any automatic display/opacity changes here */ } /* Optional: Smooth fade-in animation */ .avaorg-menu-horizontal .menu-item.show-submenu > .avaorg-sub-menu { animation: menuFadeIn 0.2s ease-in-out; } @keyframes menuFadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } /* Prevent slider/elements below from triggering menu */ .avaorg-menu-horizontal { position: relative; z-index: 1000; margin-bottom: 0; padding-bottom: 0; } #_desktop_megamenu .menu-content > li.dropdown-mega > .avaorg-sub-menu { width: 125% !important; min-width: 125% !important; left: -240px !important; margin-left: 0 !important; box-sizing: border-box !important; } } /* Mobile menu - keep your existing behavior */ @media (max-width: 767px) { .avaorg-menu-horizontal .menu-item { pointer-events: auto; } .avaorg-sub-menu { position: relative !important; } } /* --- FIX: Apply Image Layout to ALL Submenus --- */ /* 1. Turn the column list into a Flex row for ALL listed columns */ #_desktop_verticalmenu .avaorg-menu-col19 .ul-column, /* 3X3 */ #_desktop_verticalmenu .avaorg-menu-col53 .ul-column, /* 2X2 */ #_desktop_verticalmenu .avaorg-menu-col50 .ul-column, /* 2X3 */ #_desktop_verticalmenu .avaorg-menu-col56 .ul-column, /* 3X4.5 */ #_desktop_verticalmenu .avaorg-menu-col59 .ul-column, /* 3X6 */ #_desktop_verticalmenu .avaorg-menu-col62 .ul-column, /* 4X4 */ #_desktop_verticalmenu .avaorg-menu-col74 .ul-column, /* 4X6 */ #_desktop_verticalmenu .avaorg-menu-col72 .ul-column, /* 4X8 */ #_desktop_verticalmenu .avaorg-menu-col70 .ul-column, /* 5X5 */ #_desktop_verticalmenu .avaorg-menu-col68 .ul-column /* 6X9 */ { display: flex !important; flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 15px; padding: 0; } /* 2. Force the list items (li) to take up 50% width each */ #_desktop_verticalmenu .avaorg-menu-col19 .submenu-item, #_desktop_verticalmenu .avaorg-menu-col53 .submenu-item, #_desktop_verticalmenu .avaorg-menu-col50 .submenu-item, #_desktop_verticalmenu .avaorg-menu-col56 .submenu-item, #_desktop_verticalmenu .avaorg-menu-col59 .submenu-item, #_desktop_verticalmenu .avaorg-menu-col62 .submenu-item, #_desktop_verticalmenu .avaorg-menu-col74 .submenu-item, #_desktop_verticalmenu .avaorg-menu-col72 .submenu-item, #_desktop_verticalmenu .avaorg-menu-col70 .submenu-item, #_desktop_verticalmenu .avaorg-menu-col68 .submenu-item { width: 50%; list-style: none; margin-bottom: 0 !important; } /* 3. Ensure images are responsive and don't overflow */ #_desktop_verticalmenu .avaorg-menu-col19 .submenu-item img, #_desktop_verticalmenu .avaorg-menu-col53 .submenu-item img, #_desktop_verticalmenu .avaorg-menu-col50 .submenu-item img, #_desktop_verticalmenu .avaorg-menu-col56 .submenu-item img, #_desktop_verticalmenu .avaorg-menu-col59 .submenu-item img, #_desktop_verticalmenu .avaorg-menu-col62 .submenu-item img, #_desktop_verticalmenu .avaorg-menu-col74 .submenu-item img, #_desktop_verticalmenu .avaorg-menu-col72 .submenu-item img, #_desktop_verticalmenu .avaorg-menu-col70 .submenu-item img, #_desktop_verticalmenu .avaorg-menu-col68 .submenu-item img { max-width: 100%; height: auto; display: block; } .avaorg-menu-col.avaorg-menu-col77.col-xs-12.col-lg-8 { float: right; } /* --- FIX: Vertical Menu Stability (Allow JS Control) --- */ @media (min-width: 767px) { /* 1. Hide Vertical Submenus by default (Let JS handle it) */ .avaorg-menu-vertical .avaorg-sub-menu { display: none !important; opacity: 0; visibility: hidden; transition: opacity 0.2s ease-in-out; } /* 2. Show Submenu when JS adds 'show-submenu' class */ .avaorg-menu-vertical .menu-item.show-submenu > .avaorg-sub-menu { display: block !important; opacity: 1; visibility: visible; } }