.elementor-6477 .elementor-element.elementor-element-88b66a > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-6477 .elementor-element.elementor-element-88b66a > .elementor-container{max-width:1350px;}.elementor-6477 .elementor-element.elementor-element-88b66a{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:20px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-6477 .elementor-element.elementor-element-88b66a > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-6477 .elementor-element.elementor-element-13b8e434 > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){margin-block-end:0px;}.elementor-6477 .elementor-element.elementor-element-38ff85ee{text-align:center;}.elementor-6477 .elementor-element.elementor-element-38ff85ee img{width:160px;}.elementor-bc-flex-widget .elementor-6477 .elementor-element.elementor-element-43848c3c.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-6477 .elementor-element.elementor-element-43848c3c.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-6477 .elementor-element.elementor-element-43848c3c.elementor-column > .elementor-widget-wrap{justify-content:flex-end;}.elementor-6477 .elementor-element.elementor-element-43848c3c > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){margin-block-end:0px;}.elementor-6477 .elementor-element.elementor-element-43848c3c > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-6477 .elementor-element.elementor-element-57d39bb1 .elementor-menu-toggle{margin:0 auto;}.elementor-6477 .elementor-element.elementor-element-57d39bb1 .elementor-nav-menu .elementor-item{font-family:"Poppins", Sans-serif;font-size:14px;font-weight:500;text-transform:capitalize;letter-spacing:0.4px;}.elementor-6477 .elementor-element.elementor-element-57d39bb1 .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#000000;}.elementor-bc-flex-widget .elementor-6477 .elementor-element.elementor-element-45df4e6d.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-6477 .elementor-element.elementor-element-45df4e6d.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-6477 .elementor-element.elementor-element-45df4e6d.elementor-column > .elementor-widget-wrap{justify-content:flex-end;}.elementor-6477 .elementor-element.elementor-element-45df4e6d > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){margin-block-end:0px;}.elementor-6477 .elementor-element.elementor-element-45df4e6d > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-6477 .elementor-element.elementor-element-5a66b54c .elementor-button{background-color:#84cc16;font-family:"Poppins", Sans-serif;font-size:16px;font-weight:700;border-radius:5px 5px 5px 5px;padding:15px 30px 15px 30px;}.elementor-6477 .elementor-element.elementor-element-5a66b54c .elementor-button:hover, .elementor-6477 .elementor-element.elementor-element-5a66b54c .elementor-button:focus{background-color:#221638;color:#FFFFFF;}.elementor-6477 .elementor-element.elementor-element-5a66b54c > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border-radius:50px 50px 50px 50px;}.elementor-6477 .elementor-element.elementor-element-5a66b54c .elementor-button:hover svg, .elementor-6477 .elementor-element.elementor-element-5a66b54c .elementor-button:focus svg{fill:#FFFFFF;}.elementor-6477 .elementor-element.elementor-element-59250d09 .elementor-button{background-color:#84cc16;font-family:"Poppins", Sans-serif;font-size:16px;font-weight:700;border-radius:5px 5px 5px 5px;padding:15px 30px 15px 30px;}.elementor-6477 .elementor-element.elementor-element-59250d09 .elementor-button:hover, .elementor-6477 .elementor-element.elementor-element-59250d09 .elementor-button:focus{background-color:#221638;color:#FFFFFF;}.elementor-6477 .elementor-element.elementor-element-59250d09 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border-radius:50px 50px 50px 50px;}.elementor-6477 .elementor-element.elementor-element-59250d09 .elementor-button:hover svg, .elementor-6477 .elementor-element.elementor-element-59250d09 .elementor-button:focus svg{fill:#FFFFFF;}@media(max-width:1024px){.elementor-6477 .elementor-element.elementor-element-88b66a{padding:30px 40px 20px 40px;}.elementor-6477 .elementor-element.elementor-element-38ff85ee > .elementor-widget-container{margin:10px 0px 0px 0px;}.elementor-6477 .elementor-element.elementor-element-38ff85ee{text-align:center;}.elementor-6477 .elementor-element.elementor-element-38ff85ee img{width:154px;}.elementor-6477 .elementor-element.elementor-element-43848c3c > .elementor-element-populated{padding:0px 0px 0px 0px;}.elementor-6477 .elementor-element.elementor-element-45df4e6d > .elementor-element-populated{padding:0px 0px 0px 0px;}}@media(max-width:767px){.elementor-6477 .elementor-element.elementor-element-88b66a{margin-top:0px;margin-bottom:0px;padding:20px 10px 20px 10px;}.elementor-6477 .elementor-element.elementor-element-13b8e434{width:50%;}.elementor-6477 .elementor-element.elementor-element-13b8e434 > .elementor-element-populated{padding:0px 0px 0px 0px;}.elementor-6477 .elementor-element.elementor-element-38ff85ee > .elementor-widget-container{margin:10px 0px 10px 0px;padding:0px 0px 0px 0px;}.elementor-6477 .elementor-element.elementor-element-38ff85ee{text-align:start;}.elementor-6477 .elementor-element.elementor-element-38ff85ee img{width:120px;}.elementor-6477 .elementor-element.elementor-element-43848c3c{width:50%;}.elementor-6477 .elementor-element.elementor-element-43848c3c.elementor-column > .elementor-widget-wrap{justify-content:flex-end;}.elementor-6477 .elementor-element.elementor-element-43848c3c > .elementor-element-populated{padding:0px 0px 0px 0px;}.elementor-6477 .elementor-element.elementor-element-57d39bb1{--nav-menu-icon-size:24px;}.elementor-6477 .elementor-element.elementor-element-57d39bb1 .elementor-menu-toggle{border-width:0px;}.elementor-6477 .elementor-element.elementor-element-45df4e6d{width:100%;}.elementor-6477 .elementor-element.elementor-element-45df4e6d.elementor-column > .elementor-widget-wrap{justify-content:flex-end;}.elementor-6477 .elementor-element.elementor-element-45df4e6d > .elementor-element-populated{padding:0px 0px 0px 0px;}}@media(min-width:768px){.elementor-6477 .elementor-element.elementor-element-13b8e434{width:20%;}.elementor-6477 .elementor-element.elementor-element-43848c3c{width:55%;}.elementor-6477 .elementor-element.elementor-element-45df4e6d{width:24.333%;}}@media(max-width:1024px) and (min-width:768px){.elementor-6477 .elementor-element.elementor-element-13b8e434{width:100%;}.elementor-6477 .elementor-element.elementor-element-43848c3c{width:100%;}.elementor-6477 .elementor-element.elementor-element-45df4e6d{width:100%;}}/* Start custom CSS for nav-menu, class: .elementor-element-57d39bb1 *//* ========================================================= SEHAT KHANI OLP ELEMENTOR NAV MENU FIGMA STYLE ========================================================= */ /* ========================================================= 1. NAVIGATION CONTAINER ========================================================= */ .elementor-element-79f8224 { position: relative; z-index: 100000; } .elementor-element-79f8224 .elementor-widget-container { position: relative; z-index: 100000; } /* ========================================================= 2. MAIN MENU PILL ========================================================= */ .elementor-element-79f8224 .elementor-nav-menu--main > ul.elementor-nav-menu { display: flex; align-items: center; gap: 2px; margin: 0; padding: 5px; background: #F8F9FA; border: 1px solid #E5E7EB; border-radius: 30px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } /* ========================================================= 3. MAIN MENU LINKS ========================================================= */ .elementor-element-79f8224 .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item { height: 38px; display: flex; align-items: center; justify-content: center; padding: 0 15px; border-radius: 22px; color: #697180 !important; font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 400; line-height: 1; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } /* ========================================================= 4. COMPLETELY REMOVE ELEMENTOR UNDERLINE ========================================================= */ .elementor-element-79f8224 .elementor-nav-menu--main .elementor-item::before, .elementor-element-79f8224 .elementor-nav-menu--main .elementor-item::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; opacity: 0 !important; visibility: hidden !important; background: transparent !important; border: none !important; } /* Elementor underline pointer */ .elementor-element-79f8224 .elementor-nav-menu--main .e--pointer-underline .elementor-item:after { display: none !important; } /* ========================================================= 5. NORMAL HOVER ========================================================= */ .elementor-element-79f8224 .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item:hover { color: #333333 !important; background: #FFFFFF; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); } /* ========================================================= 6. ACTIVE MENU ========================================================= */ .elementor-element-79f8224 .elementor-nav-menu--main > ul.elementor-nav-menu > li.current-menu-item > a.elementor-item, .elementor-element-79f8224 .elementor-nav-menu--main > ul.elementor-nav-menu > li.current_page_item > a.elementor-item { color: #333333 !important; background: #FFFFFF; font-weight: 500; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07); } /* ========================================================= 7. COURSES ITEM ========================================================= */ .elementor-element-79f8224 .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item-has-children { position: relative; } /* ========================================================= 8. COURSES ARROW ========================================================= */ .elementor-element-79f8224 .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item-has-children > a.elementor-item { gap: 5px; } .elementor-element-79f8224 .elementor-nav-menu--main .sub-arrow { padding: 0 !important; margin-left: 2px !important; color: #697180 !important; } .elementor-element-79f8224 .elementor-nav-menu--main .sub-arrow i { font-size: 9px !important; color: #697180 !important; } /* ========================================================= 9. COURSES DROPDOWN ========================================================= */ /* Hidden by default */ .elementor-element-79f8224 .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item-has-children > ul.sub-menu { position: absolute !important; width: 440px !important; min-width: 440px !important; max-width: 440px !important; /* * Keep the visual gap from Courses to modal */ top: calc(100% + 10px) !important; left: -10px !important; margin: 0 !important; padding: 20px 22px !important; background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 10px !important; display: none !important; grid-template-columns: 1fr 1fr !important; column-gap: 32px !important; row-gap: 5px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10), 0 3px 10px rgba(0, 0, 0, 0.04) !important; z-index: 99999 !important; } /* ========================================================= 10. SHOW COURSES MODAL ONLY ON COURSES HOVER ========================================================= */ .elementor-element-79f8224 .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item-has-children:hover > ul.sub-menu { display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: 32px !important; row-gap: 5px !important; } /* ========================================================= 11. INVISIBLE HOVER BRIDGE ========================================================= */ /* * This is the important fix. * * It fills the 10px gap between Courses and the modal. * It is completely transparent and does not affect the design. */ .elementor-element-79f8224 .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item-has-children > ul.sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; background: transparent; display: block; z-index: -1; } /* ========================================================= 12. SMARTMENU WIDTH ========================================================= */ .elementor-element-79f8224 .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item-has-children > ul.sub-menu.sm-nowrap { width: 440px !important; min-width: 440px !important; max-width: 440px !important; } /* ========================================================= 13. DROPDOWN LIST ITEMS ========================================================= */ .elementor-element-79f8224 .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item-has-children > ul.sub-menu > li { width: 100% !important; margin: 0 !important; padding: 0 !important; display: block !important; } /* ========================================================= 14. DROPDOWN TEXT ========================================================= */ .elementor-element-79f8224 .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item-has-children > ul.sub-menu > li > a.elementor-sub-item { display: flex !important; align-items: center; width: 100%; min-height: 30px; padding: 5px 0 !important; margin: 0 !important; color: #697180 !important; background: transparent !important; border: none !important; border-radius: 0 !important; font-family: "Poppins", sans-serif; font-size: 14px !important; font-weight: 400 !important; line-height: 1.4; white-space: nowrap; transition: color 0.15s ease, padding-left 0.15s ease; } /* ========================================================= 15. DROPDOWN LINK HOVER ========================================================= */ .elementor-element-79f8224 .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item-has-children > ul.sub-menu > li > a.elementor-sub-item:hover { color: #7CC707 !important; background: transparent !important; padding-left: 3px !important; } /* ========================================================= 16. REMOVE SUBMENU UNDERLINES ========================================================= */ .elementor-element-79f8224 .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item-has-children > ul.sub-menu > li > a.elementor-sub-item::before, .elementor-element-79f8224 .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item-has-children > ul.sub-menu > li > a.elementor-sub-item::after { content: none !important; display: none !important; } /* ========================================================= 10. SMARTMENU WIDTH ========================================================= */ .elementor-element-79f8224 .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item-has-children > ul.sub-menu.sm-nowrap { width: 440px !important; min-width: 440px !important; max-width: 440px !important; } /* ========================================================= 11. DROPDOWN LIST ITEMS ========================================================= */ .elementor-element-79f8224 .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item-has-children > ul.sub-menu > li { width: 100% !important; margin: 0 !important; padding: 0 !important; display: block !important; } /* ========================================================= 12. DROPDOWN TEXT ========================================================= */ .elementor-element-79f8224 .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item-has-children > ul.sub-menu > li > a.elementor-sub-item { display: flex !important; align-items: center; width: 100%; min-height: 30px; padding: 5px 0 !important; margin: 0 !important; color: #697180 !important; background: transparent !important; border: none !important; border-radius: 0 !important; font-family: "Poppins", sans-serif; font-size: 14px !important; font-weight: 400 !important; line-height: 1.4; white-space: nowrap; transition: color 0.15s ease, padding-left 0.15s ease; } /* ========================================================= 13. DROPDOWN ITEM HOVER ========================================================= */ /*.elementor-element-79f8224*/ /*.elementor-nav-menu--main*/ /*> ul.elementor-nav-menu*/ /*> li.menu-item-has-children*/ /*> ul.sub-menu*/ /*> li*/ /*> a.elementor-sub-item:hover {*/ /* color: #7CC707 !important;*/ /* background: transparent !important;*/ /* padding-left: 3px !important;*/ /*}*/ /* ========================================================= 14. REMOVE ANY DROPDOWN UNDERLINE ========================================================= */ .elementor-element-79f8224 .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item-has-children > ul.sub-menu > li > a.elementor-sub-item::before, .elementor-element-79f8224 .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item-has-children > ul.sub-menu > li > a.elementor-sub-item::after { display: none !important; content: none !important; }/* End custom CSS */