.elementor-1403 .elementor-element.elementor-element-3b545a9 .elementor-tab-title, .elementor-1403 .elementor-element.elementor-element-3b545a9 .elementor-tab-title:before, .elementor-1403 .elementor-element.elementor-element-3b545a9 .elementor-tab-title:after, .elementor-1403 .elementor-element.elementor-element-3b545a9 .elementor-tab-content, .elementor-1403 .elementor-element.elementor-element-3b545a9 .elementor-tabs-content-wrapper{border-width:1px;}.elementor-1403 .elementor-element.elementor-element-3b545a9 .elementor-tab-title.elementor-active, .elementor-1403 .elementor-element.elementor-element-3b545a9 .elementor-tab-title.elementor-active a{color:#D3B03C;}.elementor-1403 .elementor-element.elementor-element-3b545a9 .elementor-tab-title{font-size:27px;line-height:68px;}.elementor-1403 .elementor-element.elementor-element-3b545a9 .elementor-tab-content{color:#FFFFFF;}.elementor-1403 .elementor-element.elementor-element-af03a4b .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-1403 .elementor-element.elementor-element-cf0150c .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-1403 .elementor-element.elementor-element-1da7f81 .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-1403 .elementor-element.elementor-element-c377a4b .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-1403 .elementor-element.elementor-element-276af85 .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-1403 .elementor-element.elementor-element-dc723d2 .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-1403 .elementor-element.elementor-element-4e6e8e6 .elementor-wrapper{--video-aspect-ratio:1.77777;}/* Start custom CSS for tabs, class: .elementor-element-3b545a9 *//* ========================================================= MUHAMMAD MASJID — GALLERY TABS FINAL Theme: Gold : #d3b03c Dark : #333333 Cream : #f9efe5 ========================================================= */ /* ========================================================= MAIN TABS WRAPPER ========================================================= */ .elementor-widget-tabs .elementor-tabs-wrapper { width: 100% !important; display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: stretch !important; gap: 10px !important; margin: 0 0 28px !important; padding: 0 !important; border: 0 !important; overflow: visible !important; } /* ========================================================= EACH DESKTOP TAB EQUAL WIDTH ========================================================= */ .elementor-widget-tabs .elementor-tabs-wrapper .elementor-tab-title { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; min-height: 68px !important; margin: 0 !important; padding: 12px 16px 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; color: #333333 !important; background: rgba(249,239,229,.92) !important; border: 1px solid rgba(211,176,60,.58) !important; border-radius: 28px !important; font-family: "Mehr Nastaliq", "Noto Nastaliq Urdu", serif !important; font-size: 23px !important; font-weight: 700 !important; line-height: 1.65 !important; text-align: center !important; cursor: pointer !important; overflow: hidden !important; box-shadow: 0 6px 16px rgba(51,51,51,.055) !important; transition: transform .32s ease, background .32s ease, color .32s ease, border-color .32s ease, box-shadow .32s ease !important; } /* ========================================================= SOFT SHINE ========================================================= */ .elementor-widget-tabs .elementor-tabs-wrapper .elementor-tab-title::before { content: ""; position: absolute !important; top: -70% !important; left: -45% !important; width: 25% !important; height: 240% !important; background: rgba(255,255,255,.28) !important; transform: rotate(24deg) !important; transition: left .6s ease !important; pointer-events: none !important; } /* ========================================================= HOVER ========================================================= */ .elementor-widget-tabs .elementor-tabs-wrapper .elementor-tab-title:hover { color: #333333 !important; background: #d3b03c !important; border-color: #d3b03c !important; transform: translateY(-3px) !important; box-shadow: 0 12px 26px rgba(211,176,60,.20) !important; } .elementor-widget-tabs .elementor-tabs-wrapper .elementor-tab-title:hover::before { left: 125% !important; } /* ========================================================= ACTIVE TAB ========================================================= */ .elementor-widget-tabs .elementor-tabs-wrapper .elementor-tab-title.elementor-active { color: #333333 !important; background: linear-gradient( 135deg, #d3b03c, #e4c94f ) !important; border-color: #d3b03c !important; transform: translateY(-2px) !important; box-shadow: 0 10px 24px rgba(211,176,60,.23), inset 0 -3px 0 rgba(51,51,51,.09) !important; } /* ========================================================= REMOVE DUPLICATE MOBILE TITLES THESE WERE SHOWING: 2024 2025 2026 AGAIN BELOW THE TOP TABS ========================================================= */ .elementor-widget-tabs .elementor-tab-mobile-title { display: none !important; } /* ========================================================= TABS CONTENT WRAPPER ========================================================= */ .elementor-widget-tabs .elementor-tabs-content-wrapper { width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; border: 0 !important; background: transparent !important; } /* ========================================================= INDIVIDUAL TAB CONTENT ========================================================= */ .elementor-widget-tabs .elementor-tab-content { width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; overflow: visible !important; border: 0 !important; background: transparent !important; } /* ACTIVE CONTENT */ .elementor-widget-tabs .elementor-tab-content.elementor-active { height: auto !important; max-height: none !important; overflow: visible !important; } /* ========================================================= GALLERY CONTAINERS PREVENT CROP / HIDDEN HEIGHT ========================================================= */ .elementor-widget-tabs .elementor-tab-content .elementor-gallery, .elementor-widget-tabs .elementor-tab-content .e-gallery-container, .elementor-widget-tabs .elementor-tab-content .gallery, .elementor-widget-tabs .elementor-tab-content .gallery-grid, .elementor-widget-tabs .elementor-tab-content .grid, .elementor-widget-tabs .elementor-tab-content .elementor-image-gallery { width: 100% !important; max-width: 100% !important; min-height: 1px !important; max-height: none !important; overflow: visible !important; clear: both !important; } /* ========================================================= GALLERY ITEMS ========================================================= */ .elementor-widget-tabs .elementor-tab-content .gallery-item, .elementor-widget-tabs .elementor-tab-content .grid-item, .elementor-widget-tabs .elementor-tab-content .elementor-gallery-item, .elementor-widget-tabs .elementor-tab-content .e-gallery-item { visibility: visible !important; opacity: 1; max-height: none !important; overflow: hidden !important; } /* ========================================================= GALLERY IMAGES ========================================================= */ .elementor-widget-tabs .elementor-tab-content .gallery-item img, .elementor-widget-tabs .elementor-tab-content .grid-item img, .elementor-widget-tabs .elementor-tab-content .elementor-gallery-item img, .elementor-widget-tabs .elementor-tab-content .e-gallery-item img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto; object-fit: cover !important; visibility: visible !important; opacity: 1 !important; transition: transform .55s ease, filter .55s ease !important; } /* IMAGE HOVER */ .elementor-widget-tabs .elementor-tab-content .gallery-item:hover img, .elementor-widget-tabs .elementor-tab-content .grid-item:hover img, .elementor-widget-tabs .elementor-tab-content .elementor-gallery-item:hover img, .elementor-widget-tabs .elementor-tab-content .e-gallery-item:hover img { transform: scale(1.035) !important; filter: brightness(.96) !important; } /* ========================================================= TABLET ========================================================= */ @media (min-width: 768px) and (max-width: 991px) { .elementor-widget-tabs .elementor-tabs-wrapper { gap: 8px !important; } .elementor-widget-tabs .elementor-tabs-wrapper .elementor-tab-title { min-height: 58px !important; padding: 9px 12px 11px !important; font-size: 19px !important; border-radius: 22px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { /* Keep the SAME top horizontal tabs. Do NOT show Elementor's duplicate mobile titles. */ .elementor-widget-tabs .elementor-tabs-wrapper { display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 7px !important; margin-bottom: 20px !important; padding-bottom: 3px !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .elementor-widget-tabs .elementor-tabs-wrapper::-webkit-scrollbar { display: none !important; } .elementor-widget-tabs .elementor-tabs-wrapper .elementor-tab-title { flex: 1 0 105px !important; min-width: 105px !important; min-height: 48px !important; padding: 6px 10px 8px !important; border-radius: 18px !important; font-size: 16px !important; line-height: 1.7 !important; } .elementor-widget-tabs .elementor-tab-mobile-title { display: none !important; } .elementor-widget-tabs .elementor-tab-content { padding: 0 !important; overflow: visible !important; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .elementor-widget-tabs .elementor-tabs-wrapper .elementor-tab-title { flex: 1 0 95px !important; min-width: 95px !important; min-height: 44px !important; font-size: 14px !important; } }/* End custom CSS */