.elementor-9025 .elementor-element.elementor-element-ff02ab3{--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:flex-end;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;--border-radius:20px 20px 0px 0px;}.elementor-9025 .elementor-element.elementor-element-ff02ab3:not(.elementor-motion-effects-element-type-background), .elementor-9025 .elementor-element.elementor-element-ff02ab3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-blocksy_palette_6 );}.elementor-9025 .elementor-element.elementor-element-c2c1fe8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-9025 .elementor-element.elementor-element-60c7de8 img{width:180px;}.elementor-9025 .elementor-element.elementor-element-a26d5fb{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;}.elementor-9025 .elementor-element.elementor-element-a3add02 .elementor-icon-box-wrapper{align-items:center;gap:15px;}.elementor-9025 .elementor-element.elementor-element-a3add02 .elementor-icon-box-title{margin-block-end:0px;}.elementor-9025 .elementor-element.elementor-element-a3add02 .elementor-icon{font-size:20px;}.elementor-9025 .elementor-element.elementor-element-dda6cb6 .elementor-icon-box-wrapper{align-items:center;gap:15px;}.elementor-9025 .elementor-element.elementor-element-dda6cb6 .elementor-icon-box-title{margin-block-end:0px;}.elementor-9025 .elementor-element.elementor-element-dda6cb6 .elementor-icon{font-size:20px;}.elementor-9025 .elementor-element.elementor-element-e57e5aa .elementor-icon-box-wrapper{align-items:center;gap:15px;}.elementor-9025 .elementor-element.elementor-element-e57e5aa .elementor-icon-box-title{margin-block-end:0px;}.elementor-9025 .elementor-element.elementor-element-e57e5aa .elementor-icon{font-size:20px;}.elementor-9025 .elementor-element.elementor-element-523f18a .elementor-icon-box-wrapper{align-items:center;gap:15px;}.elementor-9025 .elementor-element.elementor-element-523f18a .elementor-icon-box-title{margin-block-end:0px;}.elementor-9025 .elementor-element.elementor-element-523f18a .elementor-icon{font-size:20px;}.elementor-9025 .elementor-element.elementor-element-7fd0b1e{--divider-border-style:solid;--divider-border-width:1px;width:100%;max-width:100%;}.elementor-9025 .elementor-element.elementor-element-7fd0b1e .elementor-divider-separator{width:100%;}.elementor-9025 .elementor-element.elementor-element-7fd0b1e .elementor-divider{padding-block-start:0px;padding-block-end:0px;}.elementor-9025 .elementor-element.elementor-element-98a5445{--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:flex-start;}.elementor-9025 .elementor-element.elementor-element-6b2921d{width:auto;max-width:auto;z-index:999;--e-nav-menu-horizontal-menu-item-margin:calc( 5px / 2 );}.elementor-9025 .elementor-element.elementor-element-6b2921d > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-9025 .elementor-element.elementor-element-6b2921d .elementor-menu-toggle{margin-right:auto;}.elementor-9025 .elementor-element.elementor-element-6b2921d .elementor-nav-menu .elementor-item{font-family:"Shabnam", Sans-serif;font-size:15px;font-weight:400;}.elementor-9025 .elementor-element.elementor-element-6b2921d .elementor-nav-menu--main .elementor-item{padding-left:8px;padding-right:8px;padding-top:10px;padding-bottom:10px;}.elementor-9025 .elementor-element.elementor-element-6b2921d .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:5px;}.elementor-9025 .elementor-element.elementor-element-6b2921d .elementor-nav-menu--dropdown .elementor-item, .elementor-9025 .elementor-element.elementor-element-6b2921d .elementor-nav-menu--dropdown .elementor-sub-item{font-weight:var( --e-global-typography-text-font-weight );}.elementor-9025 .elementor-element.elementor-element-6b2921d .elementor-nav-menu--dropdown{border-radius:8px 8px 8px 8px;}.elementor-9025 .elementor-element.elementor-element-6b2921d .elementor-nav-menu--dropdown li:first-child a{border-top-left-radius:8px;border-top-right-radius:8px;}.elementor-9025 .elementor-element.elementor-element-6b2921d .elementor-nav-menu--dropdown li:last-child a{border-bottom-right-radius:8px;border-bottom-left-radius:8px;}.elementor-9025 .elementor-element.elementor-element-bd623a1{--divider-border-style:solid;--divider-border-width:1px;width:100%;max-width:100%;}.elementor-9025 .elementor-element.elementor-element-bd623a1 .elementor-divider-separator{width:100%;}.elementor-9025 .elementor-element.elementor-element-bd623a1 .elementor-divider{padding-block-start:0px;padding-block-end:0px;}.elementor-9025 .elementor-element.elementor-element-e028ef3{--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:flex-end;}.elementor-9025 .elementor-element.elementor-element-14f8e7e{width:auto;max-width:auto;}.elementor-9025 .elementor-element.elementor-element-14f8e7e > .elementor-widget-container{margin:0px 0px 0px 10px;}.elementor-9025 .elementor-element.elementor-element-14f8e7e .elementor-button-content-wrapper{flex-direction:row;}.elementor-9025 .elementor-element.elementor-element-14f8e7e .elementor-button .elementor-button-content-wrapper{gap:10px;}.elementor-9025 .elementor-element.elementor-element-14f8e7e .elementor-button{font-family:"ShabnamFN", Sans-serif;font-weight:500;border-radius:5px 5px 5px 5px;padding:15px 20px 15px 20px;}.elementor-9025 .elementor-element.elementor-element-d574975{width:auto;max-width:auto;}.elementor-9025 .elementor-element.elementor-element-d574975 > .elementor-widget-container{margin:0px 0px 0px 10px;}.elementor-9025 .elementor-element.elementor-element-d574975 .elementor-button-content-wrapper{flex-direction:row;}.elementor-9025 .elementor-element.elementor-element-d574975 .elementor-button .elementor-button-content-wrapper{gap:8px;}.elementor-9025 .elementor-element.elementor-element-d574975 .elementor-button{font-family:"ShabnamFN", Sans-serif;font-weight:500;border-radius:5px 5px 5px 5px;padding:12px 12px 12px 12px;}.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-9025 .elementor-element.elementor-element-e028ef3{--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}}@media(min-width:768px){.elementor-9025 .elementor-element.elementor-element-c2c1fe8{--width:20%;}.elementor-9025 .elementor-element.elementor-element-a26d5fb{--width:66.6666%;}.elementor-9025 .elementor-element.elementor-element-98a5445{--width:70%;}.elementor-9025 .elementor-element.elementor-element-e028ef3{--width:25%;}}@media(max-width:1024px) and (min-width:768px){.elementor-9025 .elementor-element.elementor-element-a26d5fb{--width:15%;}.elementor-9025 .elementor-element.elementor-element-98a5445{--width:20%;}}@media(max-width:767px){.elementor-9025 .elementor-element.elementor-element-ff02ab3{--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:center;--border-radius:10px 10px 0px 0px;}.elementor-9025 .elementor-element.elementor-element-c2c1fe8{--width:50%;}.elementor-9025 .elementor-element.elementor-element-60c7de8 img{width:150px;}.elementor-9025 .elementor-element.elementor-element-a26d5fb{--width:15%;}.elementor-9025 .elementor-element.elementor-element-523f18a .elementor-icon{font-size:25px;}.elementor-9025 .elementor-element.elementor-element-98a5445{--width:15%;}.elementor-9025 .elementor-element.elementor-element-6b2921d .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, .elementor-9025 .elementor-element.elementor-element-6b2921d .elementor-nav-menu__container.elementor-nav-menu--dropdown{margin-top:20px !important;}.elementor-9025 .elementor-element.elementor-element-6b2921d{--nav-menu-icon-size:25px;}.elementor-9025 .elementor-element.elementor-element-bd623a1 .elementor-divider{padding-block-start:5px;padding-block-end:5px;}.elementor-9025 .elementor-element.elementor-element-e028ef3{--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-around;--gap:5px 5px;--row-gap:5px;--column-gap:5px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9025 .elementor-element.elementor-element-14f8e7e .elementor-button{font-size:15px;border-radius:4px 4px 4px 4px;padding:8px 8px 8px 8px;}.elementor-9025 .elementor-element.elementor-element-d574975{width:var( --container-widget-width, 47% );max-width:47%;--container-widget-width:47%;--container-widget-flex-grow:0;}.elementor-9025 .elementor-element.elementor-element-d574975.elementor-element{--flex-grow:1;--flex-shrink:0;}.elementor-9025 .elementor-element.elementor-element-d574975 .elementor-button{font-size:15px;border-radius:4px 4px 4px 4px;padding:15px 5px 15px 5px;}}/* Start custom CSS for container, class: .elementor-element-ff02ab3 */:root { --nazh-vsh-navy-dark: #0f172a; --nazh-vsh-navy-surface: #1e293b; --nazh-vsh-gold-primary: #ffd477; --nazh-vsh-gold-hover: #fdc156; --nazh-vsh-royal-blue: #1e3a8a; --nazh-vsh-text-main: #334155; --nazh-vsh-text-muted: #64748b; --nazh-vsh-bg-card: #ffffff; --nazh-vsh-bg-light: #f8fafc; --nazh-vsh-border: #e2e8f0; --nazh-vsh-radius: 16px; --nazh-vsh-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04); --nazh-vsh-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* ========================================================= QOM TAMIRAT - ELEMENTOR MULTI LEVEL MEGA MENU Desktop only ========================================================= */ @media (min-width: 992px) { /* --------------------------------------------------------- 1. کانتینر اصلی منو --------------------------------------------------------- */ .elementor-nav-menu--main { position: relative !important; z-index: 99999 !important; } /* --------------------------------------------------------- 2. منوی سطح اول مثال: خدمات └── تعمیر ماشین لباسشویی └── برندها --------------------------------------------------------- */ .elementor-nav-menu--main > .elementor-nav-menu > li.menu-item-has-children { position: relative !important; } /* --------------------------------------------------------- 3. باکس زیرمنوی سطح اول --------------------------------------------------------- */ .elementor-nav-menu--main > .elementor-nav-menu > li.menu-item-has-children > ul.sub-menu { position: absolute !important; top: 100% !important; right: 0 !important; left: auto !important; width: 260px !important; min-width: 260px !important; height: auto !important; max-height: none !important; overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; display: flex !important; flex-direction: column !important; padding: 10px 8px !important; margin-top: 12px !important; background: rgba(17, 29, 51, 0.98) !important; border: 1px solid rgba(255, 212, 119, 0.20) !important; border-radius: 14px !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(255, 212, 119, 0.05) !important; backdrop-filter: blur(12px); z-index: 99999 !important; } /* --------------------------------------------------------- 4. آیتم سطح اول که خودش زیرمنوی دوم دارد بسیار مهم: position: static باعث می‌شود Mega Menu نسبت به باکس زیرمنوی اصلی موقعیت بگیرد و داخل آیتم گیر نکند. --------------------------------------------------------- */ .elementor-nav-menu--main > .elementor-nav-menu > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children { position: static !important; width: 100% !important; } /* --------------------------------------------------------- 5. MEGA MENU عرض کل = 800px 25% = 200px 75% = 600px یعنی: ┌───────────────┬─────────────────────────────────────┐ │ 200px داخل │ 600px خارج │ │ منوی اول │ │ └───────────────┴─────────────────────────────────────┘ --------------------------------------------------------- */ .elementor-nav-menu--main > .elementor-nav-menu > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children > ul.sub-menu { /* ----------------------------------------------------- موقعیت ----------------------------------------------------- */ position: absolute !important; /* * زیرمنوی اول 260px عرض دارد. * * Mega Menu = 800px * * می‌خواهیم 200px از Mega Menu روی زیرمنوی اول باشد. * * بنابراین: * * 260 - 200 = 60px * * پنل را 60px از لبه چپ زیرمنوی اول * به سمت چپ می‌بریم. */ left: -740px !important; right: auto !important; top: -10px !important; /* ----------------------------------------------------- ابعاد دقیق ----------------------------------------------------- */ width: 800px !important; min-width: 800px !important; max-width: 800px !important; height: auto !important; min-height: 100px !important; max-height: none !important; /* ----------------------------------------------------- جلوگیری کامل از Crop شدن ----------------------------------------------------- */ overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; /* ----------------------------------------------------- Grid سه ستونه ----------------------------------------------------- */ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-flow: row !important; column-gap: 14px !important; row-gap: 4px !important; /* ----------------------------------------------------- فاصله داخلی ----------------------------------------------------- */ box-sizing: border-box !important; padding: 16px !important; /* ----------------------------------------------------- ظاهر ----------------------------------------------------- */ background: rgba(17, 29, 51, 0.98) !important; border: 1px solid rgba(255, 212, 119, 0.25) !important; border-radius: 14px !important; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.38), 0 5px 15px rgba(255, 212, 119, 0.05) !important; backdrop-filter: blur(14px); z-index: 100000 !important; /* ----------------------------------------------------- وضعیت اولیه ----------------------------------------------------- */ visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; transform: translateX(8px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease !important; } /* --------------------------------------------------------- 6. نمایش Mega Menu هنگام Hover --------------------------------------------------------- */ .elementor-nav-menu--main > .elementor-nav-menu > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children:hover > ul.sub-menu { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; transform: translateX(0) !important; } /* --------------------------------------------------------- 7. آیتم‌های داخل Mega Menu --------------------------------------------------------- */ .elementor-nav-menu--main > .elementor-nav-menu > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children > ul.sub-menu > li { width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* --------------------------------------------------------- 8. لینک‌های داخل Mega Menu --------------------------------------------------------- */ .elementor-nav-menu--main > .elementor-nav-menu > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children > ul.sub-menu > li > a.elementor-sub-item { display: flex !important; align-items: center !important; width: 100% !important; min-width: 0 !important; min-height: 40px !important; box-sizing: border-box !important; padding: 8px 11px !important; margin: 0 !important; color: #fff !important; background: transparent !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.7 !important; text-decoration: none !important; white-space: normal !important; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease !important; } /* --------------------------------------------------------- 9. Hover لینک‌های Mega Menu --------------------------------------------------------- */ .elementor-nav-menu--main > .elementor-nav-menu > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children > ul.sub-menu > li > a.elementor-sub-item:hover { background: rgba(255, 212, 119, 0.12) !important; color: #FFD477 !important; transform: translateX(-3px) !important; } /* --------------------------------------------------------- 10. فلش برای آیتم دارای زیرمنو --------------------------------------------------------- */ .elementor-nav-menu--main > .elementor-nav-menu > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children > a.elementor-sub-item { position: relative !important; padding-left: 30px !important; } .elementor-nav-menu--main > .elementor-nav-menu > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children > a.elementor-sub-item::after { content: "‹" !important; position: absolute !important; left: 10px !important; top: 50% !important; transform: translateY(-50%) !important; color: #FFD477 !important; font-size: 18px !important; line-height: 1 !important; } /* --------------------------------------------------------- 11. جلوگیری از دخالت CSS عمومی Elementor --------------------------------------------------------- */ .elementor-nav-menu--main > .elementor-nav-menu > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children > ul.sub-menu { flex-direction: initial !important; flex-wrap: initial !important; float: none !important; } /* --------------------------------------------------------- 12. جلوگیری از اسکرول داخلی Mega Menu --------------------------------------------------------- */ .elementor-nav-menu--main > .elementor-nav-menu > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children > ul.sub-menu { scrollbar-width: none !important; -ms-overflow-style: none !important; } .elementor-nav-menu--main > .elementor-nav-menu > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children > ul.sub-menu::-webkit-scrollbar { display: none !important; } /* --------------------------------------------------------- 13. لایه والد هم نباید Mega Menu را قطع کند --------------------------------------------------------- */ .elementor-nav-menu--main, .elementor-nav-menu--main .elementor-nav-menu, .elementor-nav-menu--main .menu-item, .elementor-nav-menu--main .sub-menu { overflow: visible !important; } /* --------------------------------------------------------- 14. Z-INDEX نهایی --------------------------------------------------------- */ .elementor-nav-menu--main, .elementor-nav-menu--main .elementor-nav-menu, .elementor-nav-menu--main .sub-menu { z-index: 99999 !important; } .elementor-nav-menu--main > .elementor-nav-menu > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children > ul.sub-menu { z-index: 100000 !important; } } /* ========================================================= MOBILE / TABLET هیچ تغییری در رفتار منوی Elementor ایجاد نمی‌کنیم ========================================================= */ @media (max-width: 991px) { .elementor-nav-menu--main .sub-menu { position: static !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; max-height: none !important; overflow: visible !important; } } .elementor-nav-menu--main > .elementor-nav-menu > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children > a.elementor-sub-item{ color: #fff !important;}/* End custom CSS */