.elementor-2186 .elementor-element.elementor-element-30790464{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;overflow:visible;}.elementor-2186 .elementor-element.elementor-element-2f14f01a{--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;--justify-content:space-between;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:8px;--padding-bottom:8px;--padding-left:15px;--padding-right:15px;overflow:visible;}.elementor-2186 .elementor-element.elementor-element-2f14f01a:not(.elementor-motion-effects-element-type-background), .elementor-2186 .elementor-element.elementor-element-2f14f01a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#273272;}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-2186 .elementor-element.elementor-element-cbf4cb5 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-bottom:calc(15px/2);}.elementor-2186 .elementor-element.elementor-element-cbf4cb5 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-top:calc(15px/2);}.elementor-2186 .elementor-element.elementor-element-cbf4cb5 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-right:calc(15px/2);margin-left:calc(15px/2);}.elementor-2186 .elementor-element.elementor-element-cbf4cb5 .elementor-icon-list-items.elementor-inline-items{margin-right:calc(-15px/2);margin-left:calc(-15px/2);}body.rtl .elementor-2186 .elementor-element.elementor-element-cbf4cb5 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{left:calc(-15px/2);}body:not(.rtl) .elementor-2186 .elementor-element.elementor-element-cbf4cb5 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{right:calc(-15px/2);}.elementor-2186 .elementor-element.elementor-element-cbf4cb5 .elementor-icon-list-icon i{color:#ffffff;transition:color 0.3s;}.elementor-2186 .elementor-element.elementor-element-cbf4cb5 .elementor-icon-list-icon svg{fill:#ffffff;transition:fill 0.3s;}.elementor-2186 .elementor-element.elementor-element-cbf4cb5{--e-icon-list-icon-size:1em;--icon-vertical-align:center;--icon-vertical-offset:-1px;}.elementor-2186 .elementor-element.elementor-element-cbf4cb5 .elementor-icon-list-icon{padding-right:0px;}.elementor-2186 .elementor-element.elementor-element-cbf4cb5 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-2186 .elementor-element.elementor-element-cbf4cb5 .elementor-icon-list-item > a{font-family:"Roboto", Sans-serif;font-weight:400;}.elementor-2186 .elementor-element.elementor-element-cbf4cb5 .elementor-icon-list-text{color:#ffffff;transition:color 0.3s;}.elementor-2186 .elementor-element.elementor-element-628bac71{--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;--justify-content:space-between;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:10px;--padding-bottom:10px;--padding-left:45px;--padding-right:45px;overflow:visible;}.elementor-2186 .elementor-element.elementor-element-628bac71:not(.elementor-motion-effects-element-type-background), .elementor-2186 .elementor-element.elementor-element-628bac71 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#2575fc;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-2186 .elementor-element.elementor-element-c9548c5 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-2186 .elementor-element.elementor-element-c9548c5.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-2186 .elementor-element.elementor-element-c9548c5{text-align:left;}.elementor-2186 .elementor-element.elementor-element-c9548c5 img{width:230px;}.elementor-2186 .elementor-element.elementor-element-92f3030{--display:flex;overflow:visible;}.elementor-2186 .elementor-element.elementor-element-92f3030.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before, .elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-2186 .elementor-element.elementor-element-c9e79ba.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-2186 .elementor-element.elementor-element-c9e79ba .elementor-menu-toggle{margin:0 auto;}.elementor-2186 .elementor-element.elementor-element-c9e79ba .elementor-nav-menu .elementor-item{font-family:"Roboto", Sans-serif;font-weight:600;}.elementor-2186 .elementor-element.elementor-element-c9e79ba .elementor-nav-menu--main .elementor-item{color:#FFFBFB;fill:#FFFBFB;}.elementor-2186 .elementor-element.elementor-element-c9e79ba .elementor-nav-menu--dropdown a, .elementor-2186 .elementor-element.elementor-element-c9e79ba .elementor-menu-toggle{color:#000000;fill:#000000;}.elementor-2186 .elementor-element.elementor-element-c9e79ba .elementor-nav-menu--dropdown a:hover, .elementor-2186 .elementor-element.elementor-element-c9e79ba .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-2186 .elementor-element.elementor-element-c9e79ba .elementor-nav-menu--dropdown a.highlighted, .elementor-2186 .elementor-element.elementor-element-c9e79ba .elementor-menu-toggle:hover{color:#0A0A0A;}.elementor-2186 .elementor-element.elementor-element-c9e79ba .elementor-nav-menu--dropdown a.elementor-item-active{color:#030303;}.elementor-2186 .elementor-element.elementor-element-c9e79ba .elementor-nav-menu--dropdown .elementor-item, .elementor-2186 .elementor-element.elementor-element-c9e79ba .elementor-nav-menu--dropdown .elementor-sub-item{font-family:"Roboto", Sans-serif;font-weight:500;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.elementor-2186 .elementor-element.elementor-element-cbf4cb5 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-bottom:calc(9px/2);}.elementor-2186 .elementor-element.elementor-element-cbf4cb5 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-top:calc(9px/2);}.elementor-2186 .elementor-element.elementor-element-cbf4cb5 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-right:calc(9px/2);margin-left:calc(9px/2);}.elementor-2186 .elementor-element.elementor-element-cbf4cb5 .elementor-icon-list-items.elementor-inline-items{margin-right:calc(-9px/2);margin-left:calc(-9px/2);}body.rtl .elementor-2186 .elementor-element.elementor-element-cbf4cb5 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{left:calc(-9px/2);}body:not(.rtl) .elementor-2186 .elementor-element.elementor-element-cbf4cb5 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{right:calc(-9px/2);}.elementor-2186 .elementor-element.elementor-element-cbf4cb5 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-2186 .elementor-element.elementor-element-cbf4cb5 .elementor-icon-list-item > a{font-size:13px;}.elementor-2186 .elementor-element.elementor-element-628bac71{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-2186 .elementor-element.elementor-element-c9548c5 > .elementor-widget-container{margin:10px 10px 10px 10px;padding:0px 0px 0px 0px;}}@media(min-width:768px){.elementor-2186 .elementor-element.elementor-element-2f14f01a{--content-width:1120px;}}@media(max-width:767px){.elementor-2186 .elementor-element.elementor-element-2f14f01a{--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:10px;--padding-bottom:6px;--padding-left:0px;--padding-right:0px;}.elementor-2186 .elementor-element.elementor-element-628bac71{--padding-top:10px;--padding-bottom:10px;--padding-left:5px;--padding-right:15px;}.elementor-2186 .elementor-element.elementor-element-c9548c5{width:var( --container-widget-width, 175px );max-width:175px;--container-widget-width:175px;--container-widget-flex-grow:0;}.elementor-2186 .elementor-element.elementor-element-92f3030{--width:76px;}.elementor-2186 .elementor-element.elementor-element-c9e79ba{width:var( --container-widget-width, 256px );max-width:256px;--container-widget-width:256px;--container-widget-flex-grow:0;}}/* Start custom CSS for nav-menu, class: .elementor-element-c9e79ba *//* --- Custom CSS for BODHIX Science - Mobile Menu ONLY (for screens up to 767px) --- */ /* All styles within this block apply ONLY to screens that are 767px wide or smaller (typical mobile phones). */ @media (max-width: 767px) { /* 1. Overall Mobile Menu Overlay Container */ /* This is critical for the light gray background and full-screen overlay for mobile */ .elementor-menu-nav-container, /* Elementor's main mobile overlay wrapper */ .elementor-widget-nav-menu .elementor-nav-menu-wrapper { /* Another common wrapper */ background-color: #f8f8f8 !important; /* Light gray background for the menu area */ padding: 20px !important; box-shadow: 0 4px 20px rgba(0,0,0,0.15); /* Subtle shadow for depth */ min-height: 100vh !important; /* Ensure it covers full viewport height */ width: 100% !important; /* Ensure it covers full viewport width */ position: fixed !important; /* Ensure it's fixed in the viewport */ top: 0 !important; left: 0 !important; z-index: 9999 !important; /* Make sure it's on top of everything */ display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: flex-start !important; overflow-y: auto !important; /* Allow scrolling for long menus */ /* Ensure it's always visible when triggered by Elementor's JS */ visibility: visible !important; opacity: 1 !important; transform: translateX(0) !important; } /* 2. Mobile Menu Header (BODHIX Logo and Close Button Area) */ /* This area appears as part of the overall blue header in your latest image */ .elementor-menu-toggle-wrapper { /* This is a common wrapper Elementor uses for the header area of the mobile menu */ width: 100% !important; display: flex !important; justify-content: space-between !important; /* Space between logo and X */ align-items: center !important; padding: 15px 20px !important; background-color: #3b5998 !important; /* Dark blue background for this header section */ margin-bottom: 20px !important; /* Space below this header part */ box-shadow: 0 2px 10px rgba(0,0,0,0.1); } /* Logo Styling within the mobile menu header */ .elementor-menu-toggle-wrapper .elementor-image, .elementor-menu-toggle-wrapper img { max-width: 120px !important; /* Adjust logo size */ height: auto !important; display: block !important; margin-right: 10px !important; /* Space if description is beside */ } /* "The IIT-NEET Academy" text styling within the mobile menu header */ .elementor-menu-toggle-wrapper .site-description, .elementor-menu-toggle-wrapper .elementor-heading-title { color: #ffffff !important; /* White text on blue header */ font-size: 0.85em !important; line-height: 1.2 !important; } /* 3. Close Button Styling (The "X" button) */ .elementor-menu-close-button { background-color: transparent !important; border: none !important; font-size: 2.5em !important; color: #ffffff !important; /* White 'X' on the blue header */ cursor: pointer !important; padding: 5px !important; border-radius: 50% !important; transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease !important; line-height: 1 !important; } .elementor-menu-close-button:hover { background-color: rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; transform: rotate(90deg) !important; } /* Ensure the main menu items start below the fixed blue header in the overlay */ .elementor-menu-nav-container.elementor-nav-menu--dropdown-mobile { padding-top: 80px !important; /* Adjust this if the blue header height changes */ } /* 4. Styling for Main Menu Items (List Items) */ .elementor-widget-nav-menu .elementor-nav-menu > li { width: calc(100% - 40px) !important; margin-left: 20px !important; margin-right: 20px !important; margin-bottom: 0 !important; border-bottom: 1px solid #eeeeee !important; /* Light separator line on light background */ padding-bottom: 0 !important; padding-top: 0 !important; } .elementor-widget-nav-menu .elementor-nav-menu > li:last-child { border-bottom: none !important; } /* 5. Styling for Main Menu Links (Anchor Tags) */ /* Text will be dark on the light gray background */ .elementor-widget-nav-menu .elementor-nav-menu > li > a.elementor-item { color: #333333 !important; /* Dark grey for readability */ background-color: transparent !important; /* Ensure no unwanted backgrounds */ font-size: 1.15em !important; font-weight: 400 !important; padding: 15px 0 !important; display: flex !important; justify-content: space-between !important; align-items: center !important; text-decoration: none !important; transition: background-color 0.2s ease, color 0.2s ease !important; border-radius: 0 !important; } /* Hover State for Main Menu Links */ .elementor-widget-nav-menu .elementor-nav-menu > li > a.elementor-item:hover { background-color: #f0f0f0 !important; /* Slightly darker gray on hover */ color: #007bff !important; /* Brand blue on hover */ } /* Styling for the currently active/selected page item */ .elementor-widget-nav-menu .elementor-nav-menu > li.current-menu-item > a.elementor-item, .elementor-widget-nav-menu .elementor-nav-menu > li.current_page_item > a.elementor-item, .elementor-widget-nav-menu .elementor-nav-menu > li.elementor-active > a.elementor-item, .elementor-widget-nav-menu .elementor-nav-menu > li.menu-item-active > a.elementor-item { color: #007bff !important; /* Blue text for active item */ font-weight: 500 !important; background-color: #e6f7ff !important; /* Very light blue background for active/current items */ } /* 6. Dropdown Indicator Styling (the small arrow) */ .elementor-widget-nav-menu .elementor-nav-menu > li > a.elementor-item .sub-arrow, .elementor-widget-nav-menu .elementor-nav-menu > li > a.elementor-item i.eicon-angle-down { color: #888888 !important; /* Softer grey for the arrow */ font-size: 0.9em !important; margin-left: 10px !important; transition: transform 0.3s ease !important; } /* Rotate arrow when dropdown is open */ .elementor-widget-nav-menu > li.elementor-active > a.elementor-item .sub-arrow, .elementor-widget-nav-menu > li.elementor-open > a.elementor-item .sub-arrow, .elementor-widget-nav-menu > li.elementor-active > a.elementor-item i.eicon-angle-down, .elementor-widget-nav-menu > li.elementor-open > a.elementor-item i.eicon-angle-down { transform: rotate(180deg) !important; } /* 7. Submenu Styling (the actual dropdown list) */ .elementor-widget-nav-menu .elementor-nav-menu .sub-menu { background-color: #f0f0f0 !important; /* Slightly darker light gray for submenus */ padding-left: 25px !important; margin-top: 5px !important; position: static !important; width: auto !important; box-shadow: none !important; border-left: 2px solid #e0e0e0 !important; padding-top: 5px !important; padding-bottom: 5px !important; margin-bottom: 10px !important; overflow: hidden !important; } /* Styling for individual submenu links */ .elementor-widget-nav-menu .elementor-nav-menu .sub-menu li a { color: #555555 !important; /* Darker gray for submenu text */ font-size: 1em !important; padding: 8px 10px !important; text-align: left !important; display: block !important; text-decoration: none !important; transition: background-color 0.2s ease, color 0.2s ease !important; border-radius: 3px !important; } /* Hover state for submenu links */ .elementor-widget-nav-menu .elementor-nav-menu .sub-menu li a:hover { background-color: #e5e5e5 !important; color: #007bff !important; } /* General responsive resets that might be needed */ .elementor-nav-menu--dropdown-mobile .elementor-item { background-color: transparent !important; box-shadow: none !important; } /* Ensure no horizontal scroll from elements pushing content */ body { overflow-x: hidden !important; } } /* End of @media (max-width: 767px) */ /* --- HIDING Mobile Menu Components on Tablet and Desktop Views (Screens larger than 767px) --- */ @media (min-width: 768px) { /* These .elementor-2186 .elementor-element.elementor-element-c9e79bas target the entire mobile menu overlay and its toggle button */ /* Hide the mobile menu overlay container itself */ .elementor-menu-nav-container, .elementor-widget-nav-menu-full-width, /* Common for full-width overlays */ .elementor-nav-menu--dropdown-mobile.elementor-active { /* Specific active state class for mobile dropdown */ display: none !important; visibility: hidden !important; opacity: 0 !important; transform: translateX(100%) !important; /* Push it far off-screen to the right */ pointer-events: none !important; /* Disable interaction */ z-index: -1 !important; /* Ensure it's behind everything if display:none fails */ } /* Hide the mobile hamburger icon (toggle button) */ .elementor-menu-toggle { display: none !important; } /* Ensure any Elementor lightbox overlay is also hidden, if it's part of the mobile menu system */ .elementor-lightbox { display: none !important; } /* Ensure the desktop main menu is visible and correctly positioned */ /* If your desktop menu is hidden by default or has incorrect positioning, these can help */ .elementor-nav-menu--main { /* Common class for desktop main menu in Elementor */ display: flex !important; /* Or block, inline-block, etc., depending on your desktop layout */ visibility: visible !important; opacity: 1 !important; position: relative !important; /* Reset position if it was absolute/fixed for mobile */ z-index: auto !important; /* Reset z-index */ /* You may need to add specific desktop-only styling here if it's still off */ } } @media (min-width: 768px) and (max-width: 1024px) { /* Ensure submenus are visible and positioned correctly */ .elementor-nav-menu--main .sub-menu { position: absolute !important; top: 100% !important; left: 0 !important; background-color: #ffffff !important; /* white or transparent if you prefer */ min-width: 200px !important; z-index: 9999 !important; box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important; display: none; } /* Show submenu when parent is hovered or active */ .elementor-nav-menu--main li:hover > .sub-menu, .elementor-nav-menu--main li.elementor-item-active > .sub-menu { display: block !important; } /* Optional: Style submenu links */ .elementor-nav-menu--main .sub-menu li a { color: #333 !important; padding: 10px 15px !important; font-size: 0.95em !important; display: block !important; text-align: left !important; white-space: nowrap !important; } /* Fix parent li positioning */ .elementor-nav-menu--main li { position: relative !important; } /* Allow container to overflow to show submenu */ .elementor-nav-menu--main { overflow: visible !important; } }/* End custom CSS */