.elementor-55 .elementor-element.elementor-element-b34e03a{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-55 .elementor-element.elementor-element-7c3edff .hero-slider .hero-shape svg path{fill:#fff;}.elementor-55 .elementor-element.elementor-element-7c3edff .hero-slider .slide-inner:before{background-color:#020101;}.elementor-55 .elementor-element.elementor-element-7c3edff .hero-slider .slide-title h2{font-size:42px;}.elementor-55 .elementor-element.elementor-element-7c3edff .hero-slider .slide-btns .theme-btn{padding:0px 0px 0px 0px;}.elementor-55 .elementor-element.elementor-element-7c3edff .hero-slider .slide-btns .theme-btn{background-color:#D2AF3B;}.elementor-55 .elementor-element.elementor-element-c853568.elementor-element{--align-self:flex-start;}.elementor-55 .elementor-element.elementor-element-1247773{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-55 .elementor-element.elementor-element-3f573bd .istiqbal-prayer .prayertine-wrap, .prayertine-section-s3{background-color:#D2AF3B;}.elementor-55 .elementor-element.elementor-element-7bc23a9{--display:flex;--padding-top:50px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-55 .elementor-element.elementor-element-fe0bac3 .istiqbal-about .section-title p{line-height:100px;}.elementor-55 .elementor-element.elementor-element-fe0bac3 .istiqbal-about .theme-btn{padding:0px 0px 0px 0px;color:#02010100;background-color:#02010100;}.elementor-55 .elementor-element.elementor-element-fe0bac3 .about-section .about-bottom .call i:before{color:#02010100;}.elementor-55 .elementor-element.elementor-element-68ae9b2 img{width:90%;border-radius:20px 20px 20px 20px;box-shadow:5px 5px 10px 5px rgba(0, 0, 0, 0.39);}.elementor-55 .elementor-element.elementor-element-358bc81{width:var( --container-widget-width, 80% );max-width:80%;--container-widget-width:80%;--container-widget-flex-grow:0;text-align:end;}.elementor-55 .elementor-element.elementor-element-083f2bd{width:var( --container-widget-width, 80% );max-width:80%;margin:20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--container-widget-width:80%;--container-widget-flex-grow:0;text-align:end;}.elementor-55 .elementor-element.elementor-element-25de481{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.7;--padding-top:110px;--padding-bottom:110px;--padding-left:0px;--padding-right:0px;}.elementor-55 .elementor-element.elementor-element-25de481:not(.elementor-motion-effects-element-type-background), .elementor-55 .elementor-element.elementor-element-25de481 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://muhammadmasjid.org/wp-content/uploads/2023/12/bg-shape.png");background-position:center center;}.elementor-55 .elementor-element.elementor-element-25de481::before, .elementor-55 .elementor-element.elementor-element-25de481 > .elementor-background-video-container::before, .elementor-55 .elementor-element.elementor-element-25de481 > .e-con-inner > .elementor-background-video-container::before, .elementor-55 .elementor-element.elementor-element-25de481 > .elementor-background-slideshow::before, .elementor-55 .elementor-element.elementor-element-25de481 > .e-con-inner > .elementor-background-slideshow::before, .elementor-55 .elementor-element.elementor-element-25de481 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#F9EFE5;--background-overlay:'';}.elementor-55 .elementor-element.elementor-element-6c55cb6{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:80px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-55 .elementor-element.elementor-element-8e688bb{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:80px;--padding-bottom:120px;--padding-left:0px;--padding-right:0px;}.elementor-55 .elementor-element.elementor-element-8e688bb:not(.elementor-motion-effects-element-type-background), .elementor-55 .elementor-element.elementor-element-8e688bb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://muhammadmasjid.org/wp-content/uploads/2024/02/funfact-bg-s2.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-55 .elementor-element.elementor-element-5d94da1{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:80px;--padding-bottom:120px;--padding-left:0px;--padding-right:0px;}.elementor-55 .elementor-element.elementor-element-c190142{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.7;--padding-top:80px;--padding-bottom:120px;--padding-left:0px;--padding-right:0px;}.elementor-55 .elementor-element.elementor-element-c190142:not(.elementor-motion-effects-element-type-background), .elementor-55 .elementor-element.elementor-element-c190142 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://muhammadmasjid.org/wp-content/uploads/2024/02/bg.png");background-position:center center;}.elementor-55 .elementor-element.elementor-element-c190142::before, .elementor-55 .elementor-element.elementor-element-c190142 > .elementor-background-video-container::before, .elementor-55 .elementor-element.elementor-element-c190142 > .e-con-inner > .elementor-background-video-container::before, .elementor-55 .elementor-element.elementor-element-c190142 > .elementor-background-slideshow::before, .elementor-55 .elementor-element.elementor-element-c190142 > .e-con-inner > .elementor-background-slideshow::before, .elementor-55 .elementor-element.elementor-element-c190142 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#F6F6F6;--background-overlay:'';}.elementor-55 .elementor-element.elementor-element-812b264{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}@media(min-width:768px){.elementor-55 .elementor-element.elementor-element-812b264{--content-width:1360px;}}@media(max-width:1024px){.elementor-55 .elementor-element.elementor-element-7c3edff .hero-slider{height:500px;}.elementor-55 .elementor-element.elementor-element-7c3edff .hero-slider .slide-title h2{font-size:28px;}.elementor-55 .elementor-element.elementor-element-7c3edff .hero-slider .slide-text p{font-size:20px;}.elementor-55 .elementor-element.elementor-element-7bc23a9{--padding-top:80px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-55 .elementor-element.elementor-element-358bc81{margin:99px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-55 .elementor-element.elementor-element-25de481{--padding-top:90px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-55 .elementor-element.elementor-element-6c55cb6{--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-55 .elementor-element.elementor-element-8e688bb{--padding-top:50px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-55 .elementor-element.elementor-element-5d94da1{--padding-top:40px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-55 .elementor-element.elementor-element-c190142{--padding-top:60px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-55 .elementor-element.elementor-element-812b264{--padding-top:0px;--padding-bottom:40px;--padding-left:0px;--padding-right:0px;}}@media(max-width:767px){.elementor-55 .elementor-element.elementor-element-b34e03a{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-55 .elementor-element.elementor-element-b34e03a.e-con{--align-self:center;}.elementor-55 .elementor-element.elementor-element-7c3edff .hero-slider .slide-inner .slide-content{margin:0px 0px 0px 0px;}.elementor-55 .elementor-element.elementor-element-7c3edff .hero-slider{height:230px;}.elementor-55 .elementor-element.elementor-element-7c3edff .hero-slider .slide-title h2{font-size:16px;}.elementor-55 .elementor-element.elementor-element-7c3edff .hero-slider .slide-text p{font-size:12px;}.elementor-55 .elementor-element.elementor-element-358bc81{margin:60px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-55 .elementor-element.elementor-element-083f2bd{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;font-size:8px;}}/* Start custom CSS for wpo-istiqbal_slider, class: .elementor-element-7c3edff *//* ===== Muhammad Masjid Hero Slider ===== */ .hero-slider .slide-inner .container-fluid { position: relative !important; } .hero-slider .slide-inner .slide-content { width: 70% !important; max-width: 850px !important; margin-left: auto !important; margin-right: 100px !important; text-align: right !important; } /* Same width + same right edge */ .hero-slider .slide-inner .slide-content .slide-title, .hero-slider .slide-inner .slide-content .slide-text, .hero-slider .slide-inner .slide-content .slide-btns { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; text-align: right !important; } /* Heading */ .hero-slider .slide-inner .slide-content .slide-title h2 { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; text-align: right !important; } /* Paragraph */ .hero-slider .slide-inner .slide-content .slide-text p { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; text-align: right !important; } /* Button */ .hero-slider .slide-inner .slide-content .slide-btns { display: block !important; } .hero-slider .slide-inner .slide-content .slide-btns .theme-btn { float: none !important; display: inline-block !important; margin-left: 0 !important; margin-right: 0 !important; } /* ===== Mobile ===== */ @media (max-width: 767px) { .hero-slider .slide-inner .slide-content { width: 90% !important; max-width: 90% !important; margin-left: auto !important; margin-right: 20px !important; } } /* ========================================== REPLAY ANIMATION ON EVERY SLIDE CHANGE ========================================== */ /* Reset whenever slide is inactive */ .swiper-slide:not(.swiper-slide-active) .slide-title h2, .swiper-slide:not(.swiper-slide-active) .slide-text p { opacity: 0; animation: none !important; } /* Active slide - Arabic heading */ .swiper-slide-active .slide-title h2 { opacity: 0; animation: mmTitleIn 1s cubic-bezier(.22, 1, .36, 1) 0.15s forwards !important; } /* Active slide - Urdu text */ .swiper-slide-active .slide-text p { opacity: 0; animation: mmTextIn 0.9s cubic-bezier(.22, 1, .36, 1) 0.55s forwards !important; } /* Arabic Heading Animation */ @keyframes mmTitleIn { 0% { opacity: 0; transform: translateY(45px) scale(.94); filter: blur(6px); } 60% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } /* Urdu Translation Animation */ @keyframes mmTextIn { 0% { opacity: 0; transform: translateY(30px); filter: blur(4px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } } /* Performance */ .slide-title h2, .slide-text p { will-change: transform, opacity, filter; } /* ================================ SLIDER TEXT ANIMATION Replays on every slide change ================================ */ /* RESET INACTIVE SLIDES */ .swiper-slide:not(.swiper-slide-active) .slide-title h2, .swiper-slide:not(.swiper-slide-active) .slide-text p { opacity: 0 !important; animation: none !important; } /* ================================ HEADING H2 ANIMATION ================================ */ .swiper-slide-active .slide-title h2 { opacity: 0; transform: translateY(50px) scale(0.85); animation: headingReveal 1.1s cubic-bezier(.16, 1, .3, 1) 0.15s forwards !important; } @keyframes headingReveal { 0% { opacity: 0; transform: translateY(50px) scale(0.85); filter: blur(8px); } 60% { opacity: 1; transform: translateY(-5px) scale(1.03); filter: blur(0); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } /* ================================ PARAGRAPH / URDU TEXT ================================ */ .swiper-slide-active .slide-text p { opacity: 0; transform: translateY(30px); animation: textReveal 0.9s ease-out 0.65s forwards !important; } @keyframes textReveal { 0% { opacity: 0; transform: translateY(30px); filter: blur(4px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } } /* Performance */ .slide-title h2, .slide-text p { will-change: transform, opacity, filter; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b34e03a *//* ========================================================= MUHAMMAD MASJID HERO FULL SCREEN ISLAMIC DECORATION LAYER ========================================================= */ /* Make sure decorations stay inside hero */ .hero-slider { position: relative; overflow: hidden; isolation: isolate; } /* ========================================================= FULL SCREEN STAR FIELD ========================================================= */ .hero-slider .slide-inner::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: radial-gradient(circle at 5% 15%, rgba(255,244,195,.95) 0 2px, transparent 3px), radial-gradient(circle at 12% 30%, rgba(255,255,255,.75) 0 1px, transparent 2px), radial-gradient(circle at 18% 72%, rgba(255,235,170,.80) 0 2px, transparent 3px), radial-gradient(circle at 25% 20%, rgba(255,255,255,.60) 0 1px, transparent 2px), radial-gradient(circle at 31% 58%, rgba(255,245,205,.85) 0 2px, transparent 3px), radial-gradient(circle at 38% 12%, rgba(255,255,255,.75) 0 1px, transparent 2px), radial-gradient(circle at 43% 80%, rgba(255,235,175,.70) 0 2px, transparent 3px), radial-gradient(circle at 50% 28%, rgba(255,255,255,.55) 0 1px, transparent 2px), radial-gradient(circle at 57% 68%, rgba(255,240,190,.75) 0 2px, transparent 3px), radial-gradient(circle at 65% 18%, rgba(255,255,255,.80) 0 1px, transparent 2px), radial-gradient(circle at 70% 78%, rgba(255,235,175,.70) 0 2px, transparent 3px), radial-gradient(circle at 77% 32%, rgba(255,255,255,.65) 0 1px, transparent 2px), radial-gradient(circle at 83% 62%, rgba(255,242,195,.85) 0 2px, transparent 3px), radial-gradient(circle at 90% 20%, rgba(255,255,255,.75) 0 1px, transparent 2px), radial-gradient(circle at 95% 76%, rgba(255,235,170,.80) 0 2px, transparent 3px), radial-gradient(circle at 8% 88%, rgba(255,255,255,.55) 0 1px, transparent 2px), radial-gradient(circle at 35% 91%, rgba(255,242,195,.70) 0 2px, transparent 3px), radial-gradient(circle at 61% 92%, rgba(255,255,255,.60) 0 1px, transparent 2px), radial-gradient(circle at 88% 90%, rgba(255,240,180,.75) 0 2px, transparent 3px); opacity: .75; animation: mmFullStars 7s ease-in-out infinite alternate; } /* ========================================================= LARGE CRESCENT - TOP LEFT ========================================================= */ .hero-slider::before { content: "☾"; position: absolute; top: 6%; left: 5%; z-index: 4; font-size: 82px; line-height: 1; color: rgba(245,216,115,.90); text-shadow: 0 0 12px rgba(245,216,115,.40), 0 0 30px rgba(245,216,115,.20), 0 10px 25px rgba(0,0,0,.18); pointer-events: none; animation: mmBigMoon 6s ease-in-out infinite; } /* ========================================================= SMALL CRESCENT + STAR - RIGHT SIDE ========================================================= */ .hero-slider::after { content: "☾ ✦"; position: absolute; right: 5%; top: 16%; z-index: 4; font-size: 34px; letter-spacing: 8px; color: rgba(245,216,115,.70); text-shadow: 0 0 12px rgba(245,216,115,.25); pointer-events: none; animation: mmSmallMoon 8s ease-in-out infinite; } /* ========================================================= LANTERN #1 - TOP RIGHT ========================================================= */ .hero-slider .swiper-wrapper::before { content: "🏮"; position: absolute; top: 6%; right: 16%; z-index: 5; font-size: 44px; transform-origin: top center; pointer-events: none; filter: drop-shadow(0 10px 12px rgba(0,0,0,.28)); animation: mmLanternOne 4.5s ease-in-out infinite; } /* ========================================================= LANTERN #2 - LEFT MIDDLE ========================================================= */ .hero-slider .swiper-wrapper::after { content: "🏮"; position: absolute; left: 8%; top: 46%; z-index: 5; font-size: 34px; transform-origin: top center; pointer-events: none; filter: drop-shadow(0 10px 12px rgba(0,0,0,.24)); animation: mmLanternTwo 5.5s ease-in-out infinite; } /* ========================================================= LANTERN #3 - BOTTOM RIGHT ========================================================= */ .hero-slider .swiper-pagination::before { content: "🏮"; position: absolute; right: 7%; bottom: 50px; z-index: 5; font-size: 38px; transform-origin: top center; pointer-events: none; filter: drop-shadow(0 10px 12px rgba(0,0,0,.25)); animation: mmLanternThree 6s ease-in-out infinite; } /* ========================================================= EXTRA FLOATING STAR GROUP ========================================================= */ .hero-slider .swiper-pagination::after { content: "✦ ✧ ✦ ✧ ✦"; position: absolute; left: 17%; bottom: 55px; z-index: 5; font-size: 17px; letter-spacing: 10px; color: rgba(255,244,200,.72); text-shadow: 0 0 10px rgba(255,235,170,.25); pointer-events: none; animation: mmBottomStars 5s ease-in-out infinite alternate; } /* ========================================================= DECORATION NEAR CONTENT ========================================================= */ .hero-slider .slide-content::before { content: "✦"; position: absolute; top: -24px; right: -18px; font-size: 25px; color: rgba(245,216,115,.70); text-shadow: 0 0 12px rgba(245,216,115,.28); pointer-events: none; animation: mmContentSparkle 3s ease-in-out infinite alternate; } .hero-slider .slide-content::after { content: "✧"; position: absolute; left: -15px; bottom: 20px; font-size: 22px; color: rgba(255,245,210,.60); pointer-events: none; animation: mmContentSparkleTwo 4s ease-in-out infinite alternate; } /* ========================================================= ANIMATIONS ========================================================= */ @keyframes mmFullStars { 0% { opacity: .45; transform: translateY(0); } 100% { opacity: .90; transform: translateY(-8px); } } @keyframes mmBigMoon { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-16px) rotate(4deg); } } @keyframes mmSmallMoon { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(6deg); } } @keyframes mmLanternOne { 0%, 100% { transform: translateY(0) rotate(-7deg); } 50% { transform: translateY(12px) rotate(7deg); } } @keyframes mmLanternTwo { 0%, 100% { transform: translateY(0) rotate(6deg); } 50% { transform: translateY(-16px) rotate(-6deg); } } @keyframes mmLanternThree { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-12px) rotate(6deg); } } @keyframes mmBottomStars { 0% { opacity: .35; transform: translateX(0) translateY(0); } 100% { opacity: .90; transform: translateX(12px) translateY(-10px); } } @keyframes mmContentSparkle { from { opacity: .35; transform: scale(.75) rotate(0); } to { opacity: 1; transform: scale(1.15) rotate(22deg); } } @keyframes mmContentSparkleTwo { from { opacity: .30; transform: translateY(0) scale(.8); } to { opacity: .85; transform: translateY(-8px) scale(1.1); } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .hero-slider::before { font-size: 50px; top: 5%; left: 4%; } .hero-slider::after { font-size: 22px; right: 4%; top: 10%; } .hero-slider .swiper-wrapper::before { font-size: 28px; top: 5%; right: 18%; } .hero-slider .swiper-wrapper::after { font-size: 23px; left: 4%; top: 53%; } .hero-slider .swiper-pagination::before { font-size: 25px; right: 4%; bottom: 35px; } .hero-slider .swiper-pagination::after { font-size: 10px; letter-spacing: 5px; left: 10%; bottom: 35px; } .hero-slider .slide-content::before, .hero-slider .slide-content::after { display: none; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .hero-slider::before, .hero-slider::after, .hero-slider .slide-inner::after, .hero-slider .swiper-wrapper::before, .hero-slider .swiper-wrapper::after, .hero-slider .swiper-pagination::before, .hero-slider .swiper-pagination::after, .hero-slider .slide-content::before, .hero-slider .slide-content::after { animation: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-1247773 *//* ========================================================= MUHAMMAD MASJID - PREMIUM PRAYER TIMES CENTERED GOLD BLOCK + FALLING CREAM STARS COLORS: GOLD : #d3b03c DARK : #333333 CREAM : #f9efe5 ========================================================= */ /* ========================================================= 1. MAIN GOLD SECTION NOT FULL SCREEN WIDTH ========================================================= */ .prayertine-section-s2 { position: relative !important; overflow: hidden !important; isolation: isolate !important; width: calc(100% - 60px) !important; max-width: 1320px !important; margin-top: 40px !important; margin-bottom: -120px !important; margin-left: auto !important; margin-right: auto !important; padding: 18px 12px !important; background: #d3b03c !important; border: 1px solid rgba(249, 239, 229, 0.45) !important; border-radius: 30px !important; box-shadow: 0 10px 25px rgba(51, 51, 51, 0.10), 0 24px 55px rgba(51, 51, 51, 0.14) !important; } /* ========================================================= 2. LARGE DECORATIVE CRESCENT ========================================================= */ .prayertine-section-s2::before { content: "☾"; position: absolute; left: -25px; top: -55px; font-size: 230px; line-height: 1; color: rgba(249, 239, 229, 0.12); z-index: 0; pointer-events: none; animation: mmPrayerMoon 7s ease-in-out infinite; } /* ========================================================= 3. STAR FIELD Multiple visible star shapes ========================================================= */ .prayertine-section-s2::after { content: "✦ ★ ✧ ✦ ★ ✧ ✦" "\A" " ✧ ✦ ★ ✦ ✧ ★" "\A" "★ ✦ ✧ ★ ✦ ✧" "\A" " ✦ ★ ✧ ✦ ★" "\A" "✧ ★ ✦ ✧ ★ ✦" "\A" " ★ ✧ ✦ ★ ✧" "\A" "✦ ✧ ★ ✦ ✧ ★"; white-space: pre; position: absolute; left: 0; top: -380px; width: 100%; height: 700px; overflow: hidden; color: #f9efe5; font-size: 20px; line-height: 85px; letter-spacing: 15px; text-align: center; opacity: 0.88; text-shadow: 0 0 5px rgba(249, 239, 229, 0.70), 0 0 12px rgba(249, 239, 229, 0.35); pointer-events: none; z-index: 1; animation: mmStarFall 8s linear infinite, mmStarGlow 2.2s ease-in-out infinite alternate; } /* ========================================================= 4. KEEP CONTENT ABOVE STARS ========================================================= */ .prayertine-section-s2 > .container { position: relative !important; z-index: 5 !important; width: 100% !important; max-width: 100% !important; padding-left: 15px !important; padding-right: 15px !important; } /* ========================================================= 5. PRAYER WRAPPER ========================================================= */ .prayertine-section-s2 .prayertine-wrap, .prayertine-wrap { position: relative !important; z-index: 5 !important; overflow: visible !important; padding: 25px 0 !important; background: transparent !important; } /* ========================================================= 6. PRAYER COLUMNS ========================================================= */ .prayertine-wrap .row > div { padding: 8px !important; } /* ========================================================= 7. PRAYER CARDS ========================================================= */ .prayertine-wrap .item { position: relative !important; overflow: hidden !important; min-height: 145px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; padding: 25px 15px !important; background: #f9efe5 !important; border: 2px solid #d3b03c !important; border-radius: 22px !important; box-shadow: 0 10px 22px rgba(51, 51, 51, 0.12), 0 18px 35px rgba(51, 51, 51, 0.08) !important; transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease !important; animation: mmPrayerFloat 5s ease-in-out infinite; } /* ========================================================= 8. GOLD TOP ACCENT ========================================================= */ .prayertine-wrap .item::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 65px; height: 5px; background: #d3b03c; border-radius: 0 0 10px 10px; transition: width 0.35s ease !important; } /* ========================================================= 9. SUBTLE CARD DECORATION ========================================================= */ .prayertine-wrap .item::after { content: "✦"; position: absolute; left: 14px; bottom: 8px; color: rgba(211, 176, 60, 0.18); font-size: 32px; line-height: 1; pointer-events: none; transition: transform 0.4s ease, opacity 0.4s ease; } /* ========================================================= 10. PRAYER NAME ========================================================= */ .prayertine-wrap .item h2 { position: relative !important; z-index: 2 !important; margin: 0 0 12px !important; color: #333333 !important; font-weight: 700 !important; text-align: center !important; transition: color 0.35s ease, transform 0.35s ease !important; } /* ========================================================= 11. PRAYER TIME ========================================================= */ .prayertine-wrap .item span { position: relative !important; z-index: 2 !important; display: inline-block !important; color: #333333 !important; background: #f9efe5 !important; padding: 7px 16px !important; border-radius: 30px !important; border: 1px solid #d3b03c !important; font-weight: 600 !important; text-align: center !important; transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease !important; } /* ========================================================= 12. CARD HOVER ========================================================= */ .prayertine-wrap .item:hover { transform: translateY(-10px) scale(1.025) !important; background: #d3b03c !important; box-shadow: 0 16px 28px rgba(51, 51, 51, 0.16), 0 28px 50px rgba(51, 51, 51, 0.14) !important; animation-play-state: paused; } /* Expand top line */ .prayertine-wrap .item:hover::before { width: 100%; } /* Decorative star movement */ .prayertine-wrap .item:hover::after { transform: rotate(90deg) scale(1.3); opacity: 0.45; } /* Prayer heading hover */ .prayertine-wrap .item:hover h2 { color: #333333 !important; transform: translateY(-3px) scale(1.05); } /* Prayer time hover */ .prayertine-wrap .item:hover span { background: #333333 !important; color: #f9efe5 !important; border-color: #333333 !important; transform: translateY(2px); } /* ========================================================= 13. DIFFERENT FLOATING TIMINGS ========================================================= */ .prayertine-wrap .row > div:nth-child(1) .item { animation-delay: 0s; } .prayertine-wrap .row > div:nth-child(2) .item { animation-delay: 0.4s; } .prayertine-wrap .row > div:nth-child(3) .item { animation-delay: 0.8s; } .prayertine-wrap .row > div:nth-child(4) .item { animation-delay: 1.2s; } .prayertine-wrap .row > div:nth-child(5) .item { animation-delay: 1.6s; } .prayertine-wrap .row > div:nth-child(6) .item { animation-delay: 2s; } /* ========================================================= 14. PRAYER CARD FLOAT ========================================================= */ @keyframes mmPrayerFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } /* ========================================================= 15. FALLING STARS Stars move from above to below ========================================================= */ @keyframes mmStarFall { 0% { transform: translateY(-100px) translateX(0); } 25% { transform: translateY(100px) translateX(10px); } 50% { transform: translateY(300px) translateX(-8px); } 75% { transform: translateY(500px) translateX(8px); } 100% { transform: translateY(750px) translateX(0); } } /* ========================================================= 16. STAR TWINKLE ========================================================= */ @keyframes mmStarGlow { 0% { opacity: 0.55; text-shadow: 0 0 3px rgba(249, 239, 229, 0.45); } 100% { opacity: 1; text-shadow: 0 0 7px rgba(249, 239, 229, 0.90), 0 0 16px rgba(249, 239, 229, 0.45); } } /* ========================================================= 17. CRESCENT FLOAT ========================================================= */ @keyframes mmPrayerMoon { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(15px) rotate(3deg); } } /* ========================================================= 18. TABLET ========================================================= */ @media (max-width: 991px) { .prayertine-section-s2 { width: calc(100% - 40px) !important; margin: -60px auto !important; padding: 15px 8px !important; border-radius: 26px !important; } .prayertine-section-s2::before { font-size: 170px; left: -20px; top: -35px; } .prayertine-section-s2::after { font-size: 17px; letter-spacing: 10px; line-height: 75px; } } /* ========================================================= 19. MOBILE ========================================================= */ @media (max-width: 767px) { .prayertine-section-s2 { width: calc(100% - 24px) !important; margin: 22px auto !important; padding: 10px 4px !important; border-radius: 22px !important; box-shadow: 0 10px 22px rgba(51, 51, 51, 0.10), 0 18px 35px rgba(51, 51, 51, 0.10) !important; } .prayertine-section-s2 > .container { padding-left: 8px !important; padding-right: 8px !important; } .prayertine-wrap { padding: 15px 0 !important; } .prayertine-wrap .row > div { padding: 6px !important; } .prayertine-wrap .item { min-height: 120px !important; padding: 20px 10px !important; border-radius: 18px !important; } .prayertine-wrap .item h2 { margin-bottom: 9px !important; } /* Smaller moon on mobile */ .prayertine-section-s2::before { font-size: 125px; left: -18px; top: -20px; opacity: 0.8; } /* Keep stars visible on mobile */ .prayertine-section-s2::after { font-size: 14px; letter-spacing: 5px; line-height: 62px; opacity: 0.9; } } /* ========================================================= 20. VERY SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .prayertine-section-s2 { width: calc(100% - 16px) !important; margin-left: auto !important; margin-right: auto !important; border-radius: 18px !important; } } /* ========================================================= 21. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .prayertine-wrap .item, .prayertine-section-s2::before, .prayertine-section-s2::after { animation: none !important; } }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-a722441 *//* ========================================================= MUHAMMAD MASJID - HOME NEXT PRAYER COUNTER MATCH ABOUT PAGE STYLE COLORS: GOLD : #d3b03c DARK : #333333 CREAM : #f9efe5 ========================================================= */ /* MAIN COUNTER */ .mmpt-countdown { position: relative !important; overflow: hidden !important; width: 100% !important; max-width: 760px !important; margin: 0 auto !important; padding: 28px 32px !important; direction: rtl !important; text-align: center !important; background: #333333 !important; border: 1px solid rgba(211,176,60,.75) !important; border-radius: 20px !important; box-shadow: 0 14px 30px rgba(51,51,51,.15) !important; transition: transform .35s ease, box-shadow .35s ease !important; animation: mmHomeCounterFloat 6s ease-in-out infinite !important; } /* GOLD INNER GLOW */ .mmpt-countdown::before { content: "" !important; position: absolute !important; width: 240px !important; height: 240px !important; right: -130px !important; top: -155px !important; border-radius: 50% !important; background: rgba(211,176,60,.16) !important; filter: blur(42px) !important; pointer-events: none !important; } /* DECORATIVE STAR */ .mmpt-countdown::after { content: "✦" !important; position: absolute !important; left: 22px !important; top: 17px !important; font-size: 34px !important; line-height: 1 !important; color: rgba(211,176,60,.35) !important; pointer-events: none !important; animation: mmHomeCounterStar 3.5s ease-in-out infinite !important; } /* KEEP CONTENT ABOVE DECORATION */ .mmpt-countdown > * { position: relative !important; z-index: 2 !important; } /* اگلی نماز */ .mmpt-countdown-kicker { margin: 0 0 5px !important; color: #f9efe5 !important; font-size: 14px !important; font-weight: 600 !important; opacity: .80; } /* PRAYER NAME */ .mmpt-next-name { margin: 0 0 10px !important; color: #d3b03c !important; font-weight: 800 !important; line-height: 1.4 !important; text-shadow: 0 2px 10px rgba(211,176,60,.15) !important; } /* COUNTDOWN TIME */ .mmpt-countdown-time { display: inline-block !important; min-width: 280px !important; margin: 4px auto 8px !important; padding: 11px 22px !important; color: #333333 !important; background: #f9efe5 !important; border: 1px solid #d3b03c !important; border-radius: 50px !important; font-weight: 800 !important; box-shadow: 0 7px 16px rgba(0,0,0,.16) !important; transition: transform .3s ease, background .3s ease !important; } /* باقی وقت */ .mmpt-countdown-label { margin: 3px 0 0 !important; color: #f9efe5 !important; font-size: 13px !important; opacity: .72; } /* HOVER */ .mmpt-countdown:hover { transform: translateY(-5px) !important; box-shadow: 0 20px 38px rgba(51,51,51,.20) !important; animation-play-state: paused !important; } .mmpt-countdown:hover .mmpt-countdown-time { transform: scale(1.025); background: #d3b03c !important; } /* FLOAT */ @keyframes mmHomeCounterFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* STAR TWINKLE */ @keyframes mmHomeCounterStar { 0%, 100% { transform: rotate(0deg) scale(1); opacity: .28; } 50% { transform: rotate(90deg) scale(1.15); opacity: .65; } } /* MOBILE */ @media (max-width: 767px) { .mmpt-countdown { max-width: 100% !important; padding: 23px 15px !important; border-radius: 17px !important; } .mmpt-countdown-time { min-width: 0 !important; width: auto !important; max-width: 100% !important; padding: 9px 14px !important; font-size: 14px !important; } .mmpt-countdown::after { left: 13px !important; top: 13px !important; font-size: 26px !important; } }/* End custom CSS */ /* Start custom CSS for wpo-istiqbal_about, class: .elementor-element-fe0bac3 *//* ========================================= MUHAMMAD MASJID - ABOUT SECTION FINAL CLEAN VERSION ========================================= */ /* ========================================= CONTENT WRAPPER ========================================= */ .istiqbal-about.about-section-s2 .content { width: 100% !important; text-align: right !important; padding-right: 40px !important; padding-left: 0 !important; box-sizing: border-box !important; } /* ========================================= SECTION TITLE WRAPPER ========================================= */ .istiqbal-about.about-section-s2 .section-title { width: 100% !important; margin: 0 !important; padding: 0 !important; text-align: right !important; } /* ========================================= HEADING ========================================= */ .istiqbal-about.about-section-s2 .section-title h2, .istiqbal-about.about-section-s2 .section-title h3 { width: 100% !important; margin-top: 0 !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 20px !important; padding: 0 !important; text-align: right !important; } /* ========================================= ALL PARAGRAPHS ========================================= */ .istiqbal-about.about-section-s2 .section-title p { width: 100% !important; max-width: 100% !important; margin-top: 0 !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 20px !important; padding: 0 !important; text-align: right !important; /* Important for Urdu Nastaliq */ line-height: 2.4 !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: 0 !important; } /* ========================================= LAST PARAGRAPH ========================================= */ .istiqbal-about.about-section-s2 .section-title p:last-child { margin-bottom: 25px !important; } /* ========================================= REMOVE STRONG / BOLD BLACK SECTION Even if HTML contains it will look exactly like normal text ========================================= */ .istiqbal-about.about-section-s2 .section-title p strong, .istiqbal-about.about-section-s2 .section-title strong { display: inline !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; /* Same weight as paragraph */ font-weight: inherit !important; /* Same text color as paragraph */ color: inherit !important; /* Same font */ font-family: inherit !important; /* Same size */ font-size: inherit !important; /* Same line-height */ line-height: inherit !important; /* Remove any theme styling */ background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-decoration: none !important; text-align: inherit !important; } /* ========================================= REMOVE STRONG PSEUDO ELEMENTS In case theme adds decoration ========================================= */ .istiqbal-about.about-section-s2 .section-title strong::before, .istiqbal-about.about-section-s2 .section-title strong::after { content: none !important; display: none !important; } /* ========================================= ABOUT BOTTOM AREA ========================================= */ .istiqbal-about.about-section-s2 .about-bottom { width: 100% !important; margin: 0 !important; padding: 15px 0 0 !important; text-align: right !important; display: block !important; } /* ========================================= BUTTON ========================================= */ .istiqbal-about.about-section-s2 .about-bottom .theme-btn { float: right !important; display: inline-block !important; width: fit-content !important; margin: 0 !important; text-align: center !important; } /* ========================================= CONTACT AREA ========================================= */ .istiqbal-about.about-section-s2 .about-bottom .call { text-align: right !important; } .istiqbal-about.about-section-s2 .about-bottom .call .text { text-align: right !important; } .istiqbal-about.about-section-s2 .about-bottom .call .text span, .istiqbal-about.about-section-s2 .about-bottom .call .text a { text-align: right !important; } /* ========================================= CLEAR FLOAT ========================================= */ .istiqbal-about.about-section-s2 .about-bottom::after { content: ""; display: block; clear: both; } /* ========================================= TABLET ========================================= */ @media (max-width: 991px) { .istiqbal-about.about-section-s2 .content { padding-right: 25px !important; padding-left: 25px !important; } .istiqbal-about.about-section-s2 .section-title p { line-height: 2.3 !important; margin-bottom: 19px !important; } .istiqbal-about.about-section-s2 .section-title h2, .istiqbal-about.about-section-s2 .section-title h3 { margin-bottom: 18px !important; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .istiqbal-about.about-section-s2 .content { padding-right: 20px !important; padding-left: 20px !important; } .istiqbal-about.about-section-s2 .section-title h2, .istiqbal-about.about-section-s2 .section-title h3, .istiqbal-about.about-section-s2 .section-title p { text-align: right !important; } .istiqbal-about.about-section-s2 .section-title p { line-height: 2.25 !important; margin-bottom: 18px !important; } .istiqbal-about.about-section-s2 .section-title h2, .istiqbal-about.about-section-s2 .section-title h3 { margin-bottom: 16px !important; } .istiqbal-about.about-section-s2 .about-bottom { padding-top: 15px !important; } .istiqbal-about.about-section-s2 .about-bottom .theme-btn { float: right !important; margin: 0 !important; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .istiqbal-about.about-section-s2 .content { padding-right: 15px !important; padding-left: 15px !important; } .istiqbal-about.about-section-s2 .section-title p { line-height: 2.5 !important; margin-bottom: 16px !important; } } .about-bottom .icon { display: none !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-7bc23a9 *//* ========================================================= MUHAMMAD MASJID — ABOUT SECTION EXACT SELECTOR: .istiqbal-about.about-section-s2 COLORS: Gold : #d3b03c Dark : #333333 Cream : #f9efe5 ========================================================= */ /* ========================= MAIN SECTION ========================= */ .istiqbal-about.about-section-s2 { position: relative; overflow: hidden; background: #f9efe5 !important; padding: 100px 0 !important; isolation: isolate; } /* ========================= BACKGROUND DECORATION ========================= */ .istiqbal-about.about-section-s2::before { content: ""; position: absolute; width: 420px; height: 420px; right: -210px; top: -190px; border: 1px solid #d3b03c; border-radius: 50%; box-shadow: 0 0 0 45px rgba(211,176,60,.08), 0 0 0 90px rgba(211,176,60,.04); opacity: .55; pointer-events: none; z-index: -1; animation: mmAboutRing 18s linear infinite; } /* Crescent decoration */ .istiqbal-about.about-section-s2::after { content: "☾ ✦"; position: absolute; left: 4%; bottom: 8%; color: #d3b03c; font-size: 50px; letter-spacing: 10px; opacity: .22; pointer-events: none; animation: mmAboutMoon 6s ease-in-out infinite; } /* ========================= WRAPPER ========================= */ .istiqbal-about.about-section-s2 .wrap { position: relative; z-index: 2; } /* ========================================================= IMAGE SIDE ========================================================= */ .istiqbal-about.about-section-s2 .image { position: relative; width: 92%; margin-left: 0; margin-right: auto; border-radius: 32px; z-index: 2; transform: perspective(1200px) rotateY(5deg) rotateX(1deg); transition: transform .55s cubic-bezier(.2,.8,.2,1); } /* GOLD FRAME BEHIND IMAGE */ .istiqbal-about.about-section-s2 .image::before { content: ""; position: absolute; top: 22px; left: 22px; right: -22px; bottom: -22px; border: 2px solid #d3b03c; border-radius: 32px; z-index: -1; transition: transform .5s ease, background .5s ease; } /* Decorative corner */ .istiqbal-about.about-section-s2 .image::after { content: "✦"; position: absolute; top: -24px; left: -18px; width: 55px; height: 55px; display: flex; align-items: center; justify-content: center; background: #333333; color: #d3b03c; border: 2px solid #d3b03c; border-radius: 50%; font-size: 21px; box-shadow: 0 10px 25px rgba(51,51,51,.20); animation: mmAboutStar 4s ease-in-out infinite; } /* IMAGE */ .istiqbal-about.about-section-s2 .image img { display: block; width: 100% !important; border-radius: 32px !important; border: 4px solid #f9efe5; box-shadow: 0 25px 55px rgba(51,51,51,.20); transition: transform .55s ease, box-shadow .55s ease; } /* IMAGE HOVER */ .istiqbal-about.about-section-s2 .image:hover { transform: perspective(1200px) rotateY(0deg) rotateX(0deg) translateY(-10px); } .istiqbal-about.about-section-s2 .image:hover::before { transform: translate(-8px, 8px); background: rgba(211,176,60,.08); } .istiqbal-about.about-section-s2 .image:hover img { transform: scale(1.025); box-shadow: 0 35px 70px rgba(51,51,51,.26); } /* ========================================================= CONTENT SIDE ========================================================= */ .istiqbal-about.about-section-s2 .content { position: relative; width: 100% !important; padding: 40px 40px 40px 0 !important; margin: 0 !important; text-align: right !important; box-sizing: border-box; } /* ========================= SECTION TITLE ========================= */ .istiqbal-about.about-section-s2 .section-title { width: 100% !important; margin: 0 !important; padding: 0 !important; text-align: right !important; } /* "ہمارے بارے میں" */ .istiqbal-about.about-section-s2 .section-title h2 { position: relative; display: inline-block; width: auto !important; margin: 0 0 18px auto !important; padding: 8px 18px !important; background: #d3b03c; color: #333333 !important; border-radius: 30px; font-weight: 700; text-align: right !important; box-shadow: 0 8px 20px rgba(51,51,51,.10); transition: transform .35s ease, box-shadow .35s ease; } .istiqbal-about.about-section-s2 .section-title h2:hover { transform: translateY(-3px); box-shadow: 0 13px 28px rgba(51,51,51,.16); } /* Main heading */ .istiqbal-about.about-section-s2 .section-title h3 { position: relative; width: 100% !important; color: #333333 !important; text-align: right !important; margin: 0 0 25px !important; padding: 0 0 18px !important; font-weight: 700; } /* Gold line */ .istiqbal-about.about-section-s2 .section-title h3::after { content: ""; position: absolute; right: 0; bottom: 0; width: 80px; height: 4px; background: #d3b03c; border-radius: 50px; transition: width .45s ease; } .istiqbal-about.about-section-s2 .content:hover .section-title h3::after { width: 145px; } /* ========================= PARAGRAPHS ========================= */ .istiqbal-about.about-section-s2 .section-title p { width: 100% !important; max-width: 100% !important; color: #333333 !important; text-align: right !important; margin: 0 0 15px !important; padding: 0 !important; line-height: 2 !important; } /* Final dua */ .istiqbal-about.about-section-s2 .section-title p:last-child { position: relative; margin-top: 22px !important; padding: 18px 22px !important; background: #333333; border-right: 5px solid #d3b03c; border-radius: 14px; box-shadow: 0 12px 28px rgba(51,51,51,.14); transition: transform .4s ease, box-shadow .4s ease; } .istiqbal-about.about-section-s2 .section-title p:last-child:hover { transform: translateX(-6px); box-shadow: 0 18px 38px rgba(51,51,51,.20); } .istiqbal-about.about-section-s2 .section-title p:last-child strong { display: block; color: #f9efe5 !important; text-align: right !important; line-height: 2; } /* ========================================================= BUTTON + CONTACT AREA ========================================================= */ .istiqbal-about.about-section-s2 .about-bottom { width: 100% !important; margin: 0 !important; padding: 28px 0 0 !important; display: flex !important; flex-direction: row-reverse !important; justify-content: flex-start !important; align-items: center !important; gap: 25px; text-align: right !important; } /* ========================= BUTTON ========================= */ .istiqbal-about.about-section-s2 .about-bottom .theme-btn { float: none !important; display: inline-flex !important; align-items: center; justify-content: center; margin: 0 !important; padding: 14px 28px !important; background: #d3b03c !important; color: #333333 !important; border: 2px solid #d3b03c !important; border-radius: 50px !important; font-weight: 700; box-shadow: 0 10px 25px rgba(51,51,51,.14); transition: transform .35s ease, background .35s ease, color .35s ease, box-shadow .35s ease !important; } .istiqbal-about.about-section-s2 .about-bottom .theme-btn:hover { background: #333333 !important; color: #f9efe5 !important; transform: translateY(-5px); box-shadow: 0 18px 35px rgba(51,51,51,.22); } /* ========================================================= CONTACT BOX ========================================================= */ .istiqbal-about.about-section-s2 .about-bottom .call { display: flex !important; flex-direction: row-reverse !important; align-items: center !important; gap: 12px; margin: 0 !important; padding: 8px 14px; border-radius: 50px; transition: transform .35s ease, background .35s ease; } .istiqbal-about.about-section-s2 .about-bottom .call:hover { background: rgba(211,176,60,.15); transform: translateY(-3px); } /* Phone icon */ .istiqbal-about.about-section-s2 .about-bottom .call .icon { width: 48px; height: 48px; min-width: 48px; display: flex; align-items: center; justify-content: center; background: #333333; color: #d3b03c; border: 2px solid #d3b03c; border-radius: 50%; box-shadow: 0 8px 20px rgba(51,51,51,.18); transition: transform .35s ease; } .istiqbal-about.about-section-s2 .about-bottom .call:hover .icon { transform: rotate(-10deg) scale(1.08); } /* Contact text */ .istiqbal-about.about-section-s2 .about-bottom .call .text { text-align: right !important; } .istiqbal-about.about-section-s2 .about-bottom .call .text span { display: block; color: #333333 !important; text-align: right !important; } .istiqbal-about.about-section-s2 .about-bottom .call .text a { display: block; color: #333333 !important; text-align: right !important; font-weight: 700; } /* ========================================================= ANIMATIONS ========================================================= */ @keyframes mmAboutRing { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes mmAboutMoon { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(5deg); } } @keyframes mmAboutStar { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(20deg); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .istiqbal-about.about-section-s2 { padding: 75px 0 !important; } .istiqbal-about.about-section-s2 .image { width: 90%; margin: 0 auto 65px; transform: none; } .istiqbal-about.about-section-s2 .content { padding: 20px 25px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .istiqbal-about.about-section-s2 { padding: 55px 0 !important; } .istiqbal-about.about-section-s2 .image { width: calc(100% - 30px); margin: 0 auto 55px; transform: none; } .istiqbal-about.about-section-s2 .image::before { top: 12px; left: 12px; right: -12px; bottom: -12px; } .istiqbal-about.about-section-s2 .image::after { width: 42px; height: 42px; top: -18px; left: -8px; font-size: 16px; } .istiqbal-about.about-section-s2 .content { padding: 15px 18px !important; } .istiqbal-about.about-section-s2 .about-bottom { flex-direction: column !important; align-items: flex-end !important; gap: 18px; } .istiqbal-about.about-section-s2 .section-title p:last-child { padding: 16px !important; } }/* End custom CSS */ /* Start custom CSS for text-editor, class: .elementor-element-083f2bd */.elementor-55 .elementor-element.elementor-element-083f2bd p { font-size: 17px !important; }/* End custom CSS */ /* Start custom CSS for wpo-istiqbal_gallery, class: .elementor-element-a2d539b */.pillars-card h2 { font-size: 18px !important; line-height: 1.5 !important; } @media (max-width: 767px) { .pillars-card h2 { font-size: 15px !important; } }/* End custom CSS */ /* Start custom CSS for wpo-istiqbal_service, class: .elementor-element-24052ab *//* ========================================= SERVICE CARD CLEANUP ========================================= */ /* Full card clickable feel */ .service-card { position: relative !important; cursor: pointer !important; } /* Remove Read More */ .service-card .text > a { display: none !important; } /* Remove service number e.g. 04 */ .service-card .top-number, .service-card .top-number span { display: none !important; } /* Remove icon / circle area */ .service-card > .icon, .service-card .icon { display: none !important; } /* In case circle is created with pseudo-elements */ .service-card::before, .service-card::after, .service-card .text::before, .service-card .text::after, .service-card .image::before, .service-card .image::after { /* Don't blindly kill image overlays if theme needs them */ } /* Remove common decorative circle elements */ .service-card .circle, .service-card .service-circle, .service-card .shape, .service-card .round-shape, .service-card .icon-wrap, .service-card .icon-box { display: none !important; } /* Keep title/image clickable behavior clean */ .service-card h2, .service-card p, .service-card img { pointer-events: none; } /* Optional clean hover */ .service-card { transition: transform .35s ease, box-shadow .35s ease !important; } .service-card:hover { transform: translateY(-6px); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-6c55cb6 *//* ========================================================= MUHAMMAD MASJID - SERVICES SECTION TWO LARGE MOVING LANTERNS + CARD ANIMATION NO CARD REDESIGN ========================================================= */ /* ========================================================= MAIN SERVICES SECTION ========================================================= */ .elementor-element-6c55cb6 { /* YAHAN APNI LANTERN IMAGE KA URL PASTE KARO */ --mm-lantern: url("/wp-content/uploads/2026/08/S866b16fa216a4a05a4905bfa16edff0as.jpg_720x720q80-removebg-preview.png"); position: relative !important; overflow: hidden !important; isolation: isolate !important; padding-top: 35px !important; padding-bottom: 45px !important; } /* ========================================================= LEFT LARGE LANTERN ========================================================= */ .elementor-element-6c55cb6::before { content: ""; position: absolute; left: -90px; width: 390px; height: 520px; background-image: var(--mm-lantern); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: .24; top: -10%; pointer-events: none; z-index: 0; transform-origin: 50% 5%; filter: sepia(.25) saturate(1.15) drop-shadow( 0 15px 28px rgba(51,51,51,.15) ) drop-shadow( 0 0 30px rgba(211,176,60,.30) ); animation: mmLanternLeft 6.5s ease-in-out infinite; } /* ========================================================= RIGHT LARGE LANTERN ========================================================= */ .elementor-element-6c55cb6::after { content: ""; position: absolute; right: -105px; top: -12%; width: 430px; height: 570px; background-image: var(--mm-lantern); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: .20; pointer-events: none; z-index: 0; transform-origin: 50% 5%; filter: sepia(.25) saturate(1.15) drop-shadow( 0 18px 32px rgba(51,51,51,.15) ) drop-shadow( 0 0 38px rgba(211,176,60,.32) ); animation: mmLanternRight 7.5s ease-in-out infinite; } /* ========================================================= KEEP ALL REAL CONTENT ABOVE LANTERNS ========================================================= */ .elementor-element-6c55cb6 > * { position: relative !important; z-index: 5 !important; } /* ========================================================= TITLE AREA SUBTLE ENTRANCE ========================================================= */ .elementor-element-6c55cb6 .elementor-element-14b1cfb { animation: mmServiceTitleIn .8s ease both; } /* ========================================================= SERVICE CARDS EXISTING DESIGN UNTOUCHED ========================================================= */ .elementor-element-6c55cb6 .service-card { position: relative !important; transition: transform .4s ease, box-shadow .4s ease !important; animation: mmServiceCardFloat 5.8s ease-in-out infinite; } /* Different timings */ .elementor-element-6c55cb6 .service-wrap .row > div:nth-child(1) .service-card { animation-delay: 0s; } .elementor-element-6c55cb6 .service-wrap .row > div:nth-child(2) .service-card { animation-delay: .45s; } .elementor-element-6c55cb6 .service-wrap .row > div:nth-child(3) .service-card { animation-delay: .9s; } .elementor-element-6c55cb6 .service-wrap .row > div:nth-child(4) .service-card { animation-delay: 1.35s; } .elementor-element-6c55cb6 .service-wrap .row > div:nth-child(5) .service-card { animation-delay: 1.8s; } .elementor-element-6c55cb6 .service-wrap .row > div:nth-child(6) .service-card { animation-delay: 2.25s; } /* ========================================================= CARD HOVER ========================================================= */ .elementor-element-6c55cb6 .service-card:hover { animation-play-state: paused; transform: translateY(-11px) scale(1.018) !important; box-shadow: 0 20px 42px rgba(51,51,51,.17) !important; } /* ========================================================= IMAGE MOTION ON HOVER ========================================================= */ .elementor-element-6c55cb6 .service-card .image { overflow: hidden; } .elementor-element-6c55cb6 .service-card .image img { transition: transform .6s ease !important; } .elementor-element-6c55cb6 .service-card:hover .image img { transform: scale(1.055); } /* ========================================================= SERVICE NUMBER SUBTLE MOVEMENT ========================================================= */ .elementor-element-6c55cb6 .service-card .top-number { transition: transform .35s ease !important; } .elementor-element-6c55cb6 .service-card:hover .top-number { transform: translateY(-5px); } /* ========================================================= LEFT LANTERN ANIMATION Slow hanging swing + vertical movement ========================================================= */ @keyframes mmLanternLeft { 0%, 100% { transform: translateY(0) rotate(-4deg) scale(1); } 25% { transform: translateY(-12px) rotate(2deg) scale(1.015); } 50% { transform: translateY(-20px) rotate(5deg) scale(1.025); } 75% { transform: translateY(-9px) rotate(-1deg) scale(1.01); } } /* ========================================================= RIGHT LANTERN ANIMATION Opposite movement ========================================================= */ @keyframes mmLanternRight { 0%, 100% { transform: translateY(0) rotate(5deg) scale(1); } 25% { transform: translateY(-18px) rotate(-2deg) scale(1.02); } 50% { transform: translateY(-28px) rotate(-6deg) scale(1.03); } 75% { transform: translateY(-12px) rotate(1deg) scale(1.015); } } /* ========================================================= CARD FLOAT ========================================================= */ @keyframes mmServiceCardFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } /* ========================================================= TITLE ENTRANCE ========================================================= */ @keyframes mmServiceTitleIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .elementor-element-6c55cb6::before { width: 300px; height: 410px; left: -100px; opacity: .18; } .elementor-element-6c55cb6::after { width: 330px; height: 440px; right: -115px; opacity: .17; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-element-6c55cb6 { padding-top: 25px !important; padding-bottom: 30px !important; } /* Lanterns mobile par bhi visible rahengi */ .elementor-element-6c55cb6::before { width: 220px; height: 300px; left: -90px; top: 8%; opacity: .14; } .elementor-element-6c55cb6::after { width: 240px; height: 330px; right: -100px; bottom: 10%; opacity: .13; } .elementor-element-6c55cb6 .service-card { animation-duration: 6.5s; } } /* ========================================================= ACCESSIBILITY ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-element-6c55cb6::before, .elementor-element-6c55cb6::after, .elementor-element-6c55cb6 .service-card, .elementor-element-6c55cb6 .elementor-element-14b1cfb { animation: none !important; } } /* ========================================= SERVICES CARD TEXT - RTL ========================================= */ .elementor-element-6c55cb6 .service-card .text { direction: rtl !important; text-align: right !important; } .elementor-element-6c55cb6 .service-card .text h2, .elementor-element-6c55cb6 .service-card .text p { direction: rtl !important; text-align: right !important; unicode-bidi: plaintext; } /* Urdu paragraph readability */ .elementor-element-6c55cb6 .service-card .text p { line-height: 2.1 !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-8e688bb *//* ========================================================= MUHAMMAD MASJID - FUNFACT / MISSION PERFECT CONTENT EDGE ALIGNMENT COLORS: #d3b03c #333333 #f9efe5 ========================================================= */ /* ========================================================= MAIN SECTION ========================================================= */ .funfact-section { position: relative !important; overflow: hidden !important; padding: 85px 0 !important; isolation: isolate !important; } /* ========================================================= BACKGROUND RING ========================================================= */ .funfact-section::before { content: ""; position: absolute; width: 820px; height: 620px; right: -310px; top: -300px; border-radius: 50%; border: 2px solid rgba(211,176,60,.14); box-shadow: 0 0 0 70px rgba(211,176,60,.030), 0 0 0 140px rgba(211,176,60,.015); pointer-events: none; z-index: 0; animation: mmFunfactRing 28s linear infinite; } /* ========================================================= BACKGROUND CRESCENT ========================================================= */ .funfact-section::after { content: "☾"; position: absolute; left: -35px; bottom: -60px; font-size: 230px; line-height: 1; color: rgba(211,176,60,.07); pointer-events: none; z-index: 0; animation: mmFunfactMoon 8s ease-in-out infinite; } /* ========================================================= CONTAINER ========================================================= */ .funfact-section .container { position: relative !important; z-index: 3 !important; } /* ========================================================= WIDER COLUMN SAME ORIGINAL POSITION ========================================================= */ @media (min-width: 992px) { .funfact-section .row > .col-lg-6 { width: 70% !important; max-width: 70% !important; flex: 0 0 70% !important; margin-left: 0 !important; margin-right: 0 !important; } } /* ========================================================= MAIN DARK BOX ========================================================= */ .funfact-section .funfact-content { position: relative !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 35px 32px !important; box-sizing: border-box !important; direction: rtl !important; text-align: right !important; background: rgba(51,51,51,.96) !important; border-radius: 24px !important; box-shadow: 0 18px 45px rgba(51,51,51,.18) !important; overflow: hidden !important; } /* ========================================================= INNER GOLD GLOW ========================================================= */ .funfact-section .funfact-content::before { content: ""; position: absolute; width: 300px; height: 300px; right: -180px; bottom: -190px; border-radius: 50%; background: rgba(211,176,60,.10); filter: blur(40px); pointer-events: none; } /* ========================================================= VERY IMPORTANT: ALL MAIN CONTENT USES EXACT SAME WIDTH ========================================================= */ .funfact-section .top-content, .funfact-section .funfact, .funfact-section .theme-btn { box-sizing: border-box !important; } /* ========================================================= TOP CONTENT EXACT SAME LEFT / RIGHT EDGE AS CARDS ========================================================= */ .funfact-section .top-content { position: relative !important; z-index: 2 !important; display: block !important; width: 100% !important; max-width: 100% !important; min-width: 100% !important; margin: 0 0 32px 0 !important; padding: 0 !important; direction: rtl !important; text-align: right !important; transform: none !important; } /* ========================================================= MISSION TITLE ========================================================= */ .funfact-section .top-content .title { position: relative !important; display: inline-block !important; margin: 0 0 18px !important; padding: 0 0 13px !important; color: #d3b03c !important; direction: rtl !important; text-align: right !important; font-weight: 700 !important; } /* GOLD UNDERLINE */ .funfact-section .top-content .title::after { content: ""; position: absolute; right: 0; bottom: 0; width: 60px; height: 3px; background: #d3b03c; border-radius: 20px; transition: width .35s ease; } .funfact-section .funfact-content:hover .top-content .title::after { width: 105px; } /* ========================================================= PARAGRAPH NO EXTRA THEME WIDTH / MARGIN ========================================================= */ .funfact-section .top-content .text { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 100% !important; margin: 0 !important; padding: 0 !important; color: #f9efe5 !important; direction: rtl !important; text-align: right !important; line-height: 2 !important; box-sizing: border-box !important; transform: none !important; opacity: .94; } /* ========================================================= STATS GRID CRITICAL FIX: RESET ALL THEME MAX-WIDTH / MARGINS / PADDING ========================================================= */ .funfact-section .funfact { position: relative !important; z-index: 2 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-columns: minmax(0, 1fr) !important; gap: 16px !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; margin: 0 0 28px 0 !important; padding: 0 !important; left: auto !important; right: auto !important; transform: none !important; float: none !important; clear: both !important; align-items: stretch !important; justify-content: stretch !important; box-sizing: border-box !important; } /* ========================================================= COUNTER CARD RESET ORIGINAL THEME WIDTHS ========================================================= */ .funfact-section .funfact .item { position: relative !important; overflow: hidden !important; width: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 140px !important; height: 100% !important; margin: 0 !important; float: none !important; flex: none !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 22px 18px !important; box-sizing: border-box !important; background: #f9efe5 !important; border: 1px solid rgba(211,176,60,.70) !important; border-radius: 16px !important; text-align: center !important; box-shadow: 0 8px 20px rgba(0,0,0,.12) !important; transition: transform .35s ease, background .35s ease, box-shadow .35s ease !important; animation: mmStatFloat 5.5s ease-in-out infinite; } /* ========================================================= GOLD TOP ACCENT ========================================================= */ .funfact-section .funfact .item::before { content: ""; position: absolute; top: 0; left: 50%; width: 55px; height: 4px; transform: translateX(-50%); background: #d3b03c; border-radius: 0 0 10px 10px; transition: width .35s ease; } /* ========================================================= NUMBER ========================================================= */ .funfact-section .funfact .item h2 { position: relative !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; min-height: 44px !important; margin: 0 0 12px !important; padding: 0 !important; color: #333333 !important; direction: ltr !important; text-align: center !important; line-height: 1 !important; font-weight: 800 !important; box-sizing: border-box !important; } /* ========================================================= ODOMETER HARD ALIGNMENT RESET ========================================================= */ .funfact-section .funfact .item .odometer { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; direction: ltr !important; text-align: center !important; line-height: 1 !important; vertical-align: middle !important; } .funfact-section .funfact .item .odometer-inside { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; direction: ltr !important; } .funfact-section .funfact .item .odometer-digit, .funfact-section .funfact .item .odometer-digit-spacer, .funfact-section .funfact .item .odometer-digit-inner, .funfact-section .funfact .item .odometer-ribbon, .funfact-section .funfact .item .odometer-ribbon-inner { margin: 0 !important; padding: 0 !important; } .funfact-section .funfact .item .odometer, .funfact-section .funfact .item .odometer * { color: #333333 !important; } /* ========================================================= COUNTER LABEL ========================================================= */ .funfact-section .funfact .item h4 { position: relative !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; min-height: 46px !important; margin: 0 !important; padding: 0 5px !important; color: #333333 !important; direction: rtl !important; text-align: center !important; line-height: 1.6 !important; font-weight: 600 !important; box-sizing: border-box !important; } /* ========================================================= CARD HOVER ========================================================= */ .funfact-section .funfact .item:hover { background: #d3b03c !important; transform: translateY(-8px) scale(1.025) !important; box-shadow: 0 18px 34px rgba(0,0,0,.20) !important; animation-play-state: paused !important; } .funfact-section .funfact .item:hover::before { width: 100%; } .funfact-section .funfact .item:hover h2 { transform: scale(1.08); } /* ========================================================= FLOAT DELAYS ========================================================= */ .funfact-section .funfact .item:nth-child(1) { animation-delay: 0s; } .funfact-section .funfact .item:nth-child(2) { animation-delay: .45s; } .funfact-section .funfact .item:nth-child(3) { animation-delay: .9s; } .funfact-section .funfact .item:nth-child(4) { animation-delay: 1.35s; } /* ========================================================= BUTTON SAME RIGHT START EDGE ========================================================= */ .funfact-section .theme-btn { position: relative !important; z-index: 2 !important; float: right !important; display: inline-block !important; margin: 3px 0 0 0 !important; padding: 12px 25px !important; background: #d3b03c !important; color: #333333 !important; border: 1px solid #d3b03c !important; border-radius: 8px !important; font-weight: 700 !important; box-shadow: 0 8px 20px rgba(0,0,0,.15) !important; transition: transform .3s ease, background .3s ease, color .3s ease, box-shadow .3s ease !important; } .funfact-section .theme-btn:hover { transform: translateY(-4px); background: #f9efe5 !important; color: #333333 !important; box-shadow: 0 14px 28px rgba(0,0,0,.20) !important; } /* CLEAR BUTTON */ .funfact-section .funfact-content::after { content: ""; display: block; clear: both; } /* ========================================================= ANIMATIONS ========================================================= */ @keyframes mmFunfactRing { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes mmFunfactMoon { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-18px) rotate(4deg); } } @keyframes mmStatFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .funfact-section { padding: 65px 0 !important; } .funfact-section .funfact-content { padding: 30px 25px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .funfact-section { padding: 50px 0 !important; } .funfact-section .funfact-content { padding: 26px 18px !important; border-radius: 18px !important; } .funfact-section .top-content { margin-bottom: 25px !important; } .funfact-section .funfact { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px !important; } .funfact-section .funfact .item { min-height: 120px !important; padding: 17px 10px !important; border-radius: 12px !important; } .funfact-section .funfact .item h2 { min-height: 36px !important; margin-bottom: 7px !important; } .funfact-section .funfact .item h4 { min-height: 40px !important; font-size: 13px !important; line-height: 1.45 !important; } .funfact-section::before { width: 400px; height: 400px; right: -230px; top: -220px; } .funfact-section::after { font-size: 140px; left: -25px; } .funfact-section .theme-btn { margin-top: 5px !important; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .funfact-section::before, .funfact-section::after, .funfact-section .funfact .item { animation: none !important; } }/* End custom CSS */ /* Start custom CSS for wpo-istiqbal_event, class: .elementor-element-ed04ab4 *//* ========================================= MUHAMMAD MASJID - EVENTS REMOVE IMAGE TOP ROUNDED CORNERS ========================================= */ .elementor-element-5d94da1 .event-single-card .image, .elementor-element-5d94da1 .event-single-card .image img { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } /* Agar theme image wrapper par complete radius laga rahi ho */ .elementor-element-5d94da1 .event-single-card .image { overflow: hidden !important; } /* Image itself */ .elementor-element-5d94da1 .event-single-card .image img { display: block !important; width: 100% !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-5d94da1 *//* ========================================================= MUHAMMAD MASJID - EVENTS SECTION TWO LARGE MOVING LANTERNS + CARD ANIMATION NO EVENT CARD REDESIGN ========================================================= */ /* ========================================================= MAIN EVENT SECTION ========================================================= */ .elementor-element-5d94da1 { --mm-event-lantern: url("/wp-content/uploads/2026/08/S866b16fa216a4a05a4905bfa16edff0as.jpg_720x720q80-removebg-preview.png"); position: relative !important; overflow: hidden !important; isolation: isolate !important; padding-top: 35px !important; padding-bottom: 45px !important; } /* ========================================================= LEFT LARGE LANTERN ========================================================= */ .elementor-element-5d94da1::before { content: ""; position: absolute; left: -95px; top: -8%; width: 390px; height: 520px; background-image: var(--mm-event-lantern); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: .25; pointer-events: none; z-index: 0; transform-origin: 50% 5%; filter: sepia(.20) saturate(1.15) drop-shadow(0 15px 28px rgba(51,51,51,.16)) drop-shadow(0 0 32px rgba(211,176,60,.32)); animation: mmEventLanternLeft 6.5s ease-in-out infinite; } /* ========================================================= RIGHT LARGE LANTERN ========================================================= */ .elementor-element-5d94da1::after { content: ""; position: absolute; right: -110px; top: -10%; width: 430px; height: 570px; background-image: var(--mm-event-lantern); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: .22; pointer-events: none; z-index: 0; transform-origin: 50% 5%; filter: sepia(.20) saturate(1.15) drop-shadow(0 18px 32px rgba(51,51,51,.16)) drop-shadow(0 0 38px rgba(211,176,60,.34)); animation: mmEventLanternRight 7.5s ease-in-out infinite; } /* ========================================================= KEEP CONTENT ABOVE LANTERNS ========================================================= */ .elementor-element-5d94da1 > * { position: relative !important; z-index: 5 !important; } /* ========================================================= TITLE ENTRANCE ========================================================= */ .elementor-element-5d94da1 .elementor-element-15f3da2 { animation: mmEventTitleIn .8s ease both; } /* ========================================================= EVENT CARDS EXISTING STYLE UNTOUCHED ========================================================= */ .elementor-element-5d94da1 .event-single-card { position: relative !important; transition: transform .4s ease, box-shadow .4s ease !important; animation: mmEventCardFloat 6s ease-in-out infinite; } /* Different timings */ .elementor-element-5d94da1 .event-single-card:nth-child(2n) { animation-delay: .5s; } .elementor-element-5d94da1 .event-single-card:nth-child(3n) { animation-delay: 1s; } /* ========================================================= IMAGE MOTION ========================================================= */ .elementor-element-5d94da1 .event-single-card .image { overflow: hidden !important; } .elementor-element-5d94da1 .event-single-card .image img { transition: transform .6s ease !important; } .elementor-element-5d94da1 .event-single-card:hover .image img { transform: scale(1.055); } /* ========================================================= CONTENT SUBTLE MOTION ========================================================= */ .elementor-element-5d94da1 .event-single-card .content { transition: transform .35s ease !important; } .elementor-element-5d94da1 .event-single-card:hover .content { transform: translateY(-3px); } /* ========================================================= LEFT LANTERN ANIMATION ========================================================= */ @keyframes mmEventLanternLeft { 0%, 100% { transform: translateY(0) rotate(-4deg) scale(1); } 25% { transform: translateY(-12px) rotate(2deg) scale(1.015); } 50% { transform: translateY(-20px) rotate(5deg) scale(1.025); } 75% { transform: translateY(-9px) rotate(-1deg) scale(1.01); } } /* ========================================================= RIGHT LANTERN ANIMATION ========================================================= */ @keyframes mmEventLanternRight { 0%, 100% { transform: translateY(0) rotate(5deg) scale(1); } 25% { transform: translateY(-18px) rotate(-2deg) scale(1.02); } 50% { transform: translateY(-28px) rotate(-6deg) scale(1.03); } 75% { transform: translateY(-12px) rotate(1deg) scale(1.015); } } /* ========================================================= EVENT CARD FLOAT ========================================================= */ @keyframes mmEventCardFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* ========================================================= TITLE ENTRANCE ========================================================= */ @keyframes mmEventTitleIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .elementor-element-5d94da1::before { width: 300px; height: 410px; left: -100px; opacity: .19; } .elementor-element-5d94da1::after { width: 330px; height: 440px; right: -115px; opacity: .18; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-element-5d94da1 { padding-top: 25px !important; padding-bottom: 30px !important; } .elementor-element-5d94da1::before { width: 220px; height: 300px; left: -90px; top: 5%; opacity: .14; } .elementor-element-5d94da1::after { width: 240px; height: 330px; right: -100px; top: 8%; opacity: .13; } .elementor-element-5d94da1 .event-single-card { animation-duration: 6.5s; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-element-5d94da1::before, .elementor-element-5d94da1::after, .elementor-element-5d94da1 .event-single-card, .elementor-element-5d94da1 .elementor-element-15f3da2 { animation: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-812b264 *//* ========================================================= MUHAMMAD MASJID - LATEST NEWS ONLY ANIMATION + MOON/STARS BACKGROUND NO BLOG CARD REDESIGN COLORS: #d3b03c #333333 #f9efe5 ========================================================= */ /* ========================================================= MAIN NEWS SECTION ========================================================= */ .elementor-element-812b264 { position: relative !important; overflow: hidden !important; isolation: isolate !important; padding-top: 35px !important; padding-bottom: 45px !important; } /* ========================================================= BIG MOVING MOON ========================================================= */ .elementor-element-812b264::before { content: "☾"; position: absolute; left: -25px; top: 4%; font-size: 210px; line-height: 1; color: rgba(211,176,60,.10); text-shadow: 0 0 18px rgba(211,176,60,.12); pointer-events: none; z-index: 0; animation: mmNewsMoonMove 8s ease-in-out infinite; } /* ========================================================= MANY MOVING STARS ========================================================= */ .elementor-element-812b264::after { content: "✦ ✧ ★ ✦ ✧ ★ ✦\A" " ★ ✦ ✧ ★ ✦ ✧\A" "✧ ✦ ★ ✧ ✦ ★ ✧\A" " ✦ ★ ✧ ✦ ★ ✧\A" "★ ✧ ✦ ★ ✧ ✦ ★\A" " ✧ ★ ✦ ✧ ★ ✦\A" "✦ ★ ✧ ✦ ★ ✧ ✦"; white-space: pre; position: absolute; top: -180px; left: -5%; width: 110%; height: 900px; color: #d3b03c; font-size: 18px; line-height: 90px; letter-spacing: 16px; text-align: center; opacity: .30; text-shadow: 0 0 4px rgba(211,176,60,.55), 0 0 10px rgba(211,176,60,.22); pointer-events: none; z-index: 0; animation: mmNewsStarsDrift 11s linear infinite, mmNewsStarsGlow 2.8s ease-in-out infinite alternate; } /* ========================================================= KEEP REAL CONTENT ABOVE BACKGROUND ========================================================= */ .elementor-element-812b264 > .e-con-inner, .elementor-element-812b264 .elementor-widget, .elementor-element-812b264 .blog-section, .elementor-element-812b264 .container { position: relative !important; z-index: 4 !important; } /* ========================================================= TITLE SUBTLE ENTRANCE ========================================================= */ .elementor-element-812b264 .elementor-element-dadf162 { animation: mmNewsTitleIn .9s ease both; } /* ========================================================= BLOG CARDS EXISTING STYLE UNTOUCHED ========================================================= */ .elementor-element-812b264 .blog-card { position: relative !important; transition: transform .4s ease !important; animation: mmNewsCardFloat 6s ease-in-out infinite; } /* Different timings */ .elementor-element-812b264 .blog-wrap .row > div:nth-child(1) .blog-card { animation-delay: 0s; } .elementor-element-812b264 .blog-wrap .row > div:nth-child(2) .blog-card { animation-delay: .55s; } .elementor-element-812b264 .blog-wrap .row > div:nth-child(3) .blog-card { animation-delay: 1.1s; } /* ========================================================= CLEAN CARD HOVER NO EXTRA SQUARE SHADOW ========================================================= */ .elementor-element-812b264 .blog-card:hover { animation-play-state: paused; transform: translateY(-8px) !important; box-shadow: none !important; } /* ========================================================= IMAGE HOVER MOTION ========================================================= */ .elementor-element-812b264 .blog-card .image { overflow: hidden !important; } .elementor-element-812b264 .blog-card .image img { transition: transform .6s ease, filter .4s ease !important; } .elementor-element-812b264 .blog-card:hover .image img { transform: scale(1.05); filter: brightness(.97) saturate(1.05); } /* ========================================================= CONTENT MICRO MOTION ========================================================= */ .elementor-element-812b264 .blog-card .contnet { transition: transform .35s ease !important; } .elementor-element-812b264 .blog-card:hover .contnet { transform: translateY(-2px); } /* ========================================================= READ MORE SUBTLE MOTION ========================================================= */ .elementor-element-812b264 .blog-card .more { transition: transform .3s ease !important; } .elementor-element-812b264 .blog-card:hover .more { transform: translateX(-4px); } /* ========================================================= PAGINATION MOTION ========================================================= */ .elementor-element-812b264 .page-numbers li, .elementor-element-812b264 .page-numbers a, .elementor-element-812b264 .page-numbers span { transition: transform .3s ease !important; } .elementor-element-812b264 .page-numbers li:hover { transform: translateY(-3px); } /* ========================================================= MOON ANIMATION ========================================================= */ @keyframes mmNewsMoonMove { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-22px) rotate(5deg); } } /* ========================================================= STAR DRIFT ========================================================= */ @keyframes mmNewsStarsDrift { 0% { transform: translate3d(-15px,-80px,0) rotate(-2deg); } 50% { transform: translate3d(25px,120px,0) rotate(2deg); } 100% { transform: translate3d(-10px,320px,0) rotate(-2deg); } } /* ========================================================= STAR TWINKLE ========================================================= */ @keyframes mmNewsStarsGlow { 0% { opacity: .18; } 100% { opacity: .42; } } /* ========================================================= CARD FLOAT ========================================================= */ @keyframes mmNewsCardFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* ========================================================= TITLE ENTRANCE ========================================================= */ @keyframes mmNewsTitleIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .elementor-element-812b264::before { font-size: 155px; left: -30px; } .elementor-element-812b264::after { font-size: 15px; line-height: 78px; letter-spacing: 10px; opacity: .26; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-element-812b264 { padding-top: 25px !important; padding-bottom: 30px !important; } .elementor-element-812b264::before { font-size: 105px; left: -20px; top: 3%; opacity: .8; } .elementor-element-812b264::after { font-size: 12px; line-height: 65px; letter-spacing: 6px; opacity: .25; } .elementor-element-812b264 .blog-card { animation-duration: 6.5s; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-element-812b264::before, .elementor-element-812b264::after, .elementor-element-812b264 .blog-card, .elementor-element-812b264 .elementor-element-dadf162 { animation: none !important; } }/* End custom CSS */ /* Start custom CSS for image-carousel, class: .elementor-element-f9fce9c *//* ========================================================= MUHAMMAD MASJID - IMAGE CAROUSEL Equal Height + Hover Zoom + Continuous Motion ========================================================= */ /* Slide wrapper */ .elementor-image-carousel-wrapper .swiper-slide { overflow: hidden !important; } /* Figure wrapper */ .elementor-image-carousel-wrapper .swiper-slide-inner { position: relative !important; overflow: hidden !important; width: 100% !important; height: 330px !important; margin: 0 !important; border-radius: 0 !important; } /* All carousel images same height */ .elementor-image-carousel-wrapper .swiper-slide-image { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; border-radius: 0 !important; transform: scale(1.02); transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .5s ease !important; animation: mmGalleryBreath 7s ease-in-out infinite; } /* Different animation timing for natural look */ .elementor-image-carousel-wrapper .swiper-slide:nth-child(2n) .swiper-slide-image { animation-delay: -2s; } .elementor-image-carousel-wrapper .swiper-slide:nth-child(3n) .swiper-slide-image { animation-delay: -4s; } /* ========================================================= HOVER ZOOM ========================================================= */ .elementor-image-carousel-wrapper .swiper-slide:hover .swiper-slide-image { animation-play-state: paused; transform: scale(1.11) !important; filter: brightness(.97) saturate(1.05); } /* ========================================================= SUBTLE OVERLAY ON HOVER ========================================================= */ .elementor-image-carousel-wrapper .swiper-slide-inner::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 180deg, transparent 55%, rgba(0,0,0,.10) ); opacity: 0; transition: opacity .45s ease; } .elementor-image-carousel-wrapper .swiper-slide:hover .swiper-slide-inner::after { opacity: 1; } /* ========================================================= CONTINUOUS SOFT IMAGE MOTION ========================================================= */ @keyframes mmGalleryBreath { 0%, 100% { transform: scale(1.02) translate3d(0,0,0); } 50% { transform: scale(1.055) translate3d(0,-3px,0); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .elementor-image-carousel-wrapper .swiper-slide-inner { height: 290px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-image-carousel-wrapper .swiper-slide-inner { height: 240px !important; } .elementor-image-carousel-wrapper .swiper-slide-image { animation-duration: 8s; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .elementor-image-carousel-wrapper .swiper-slide-inner { height: 215px !important; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-image-carousel-wrapper .swiper-slide-image { animation: none !important; transition: none !important; } }/* End custom CSS */