.elementor-20 .elementor-element.elementor-element-e36bd63{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:80px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}@media(max-width:1024px){.elementor-20 .elementor-element.elementor-element-e36bd63{--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for wpo-istiqbal_service, class: .elementor-element-2f36987 *//* Service cards cleanup */
.service-card {
    position: relative !important;
    cursor: pointer !important;
    transition: transform .35s ease !important;
}

.service-card:hover {
    transform: translateY(-6px);
}

/* Remove Read More */
.service-card .text > a {
    display: none !important;
}

/* Remove number */
.service-card .top-number {
    display: none !important;
}

/* Remove icon/circle */
.service-card .icon {
    display: none !important;
}

/* Services page RTL */
.elementor-element-e36bd63 .service-card .text,
.elementor-element-e36bd63 .service-card .text h2,
.elementor-element-e36bd63 .service-card .text p {
    direction: rtl !important;
    text-align: right !important;
}

/* Urdu paragraph spacing */
.elementor-element-e36bd63 .service-card .text p {
    line-height: 2.1 !important;
}

/* Heading spacing */
.elementor-element-e36bd63 .service-card .text h2 {
    margin-bottom: 10px !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e36bd63 *//* ========================================================= 
   MUHAMMAD MASJID - SERVICES PAGE SECTION 
   SAME TWO LARGE MOVING LANTERNS + CARD ANIMATION 
   AS HOME PAGE
   ========================================================= */ 
 
.elementor-element-e36bd63 { 
    --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 LANTERN */ 
.elementor-element-e36bd63::before { 
    content: ""; 
    position: absolute; 
    left: -90px; 
    top: -10%; 
 
    width: 390px; 
    height: 520px; 
 
    background-image: var(--mm-lantern); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: contain; 
 
    opacity: .24; 
    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 LANTERN */ 
.elementor-element-e36bd63::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; 
} 
 
/* CONTENT ABOVE LANTERNS */ 
.elementor-element-e36bd63 > * { 
    position: relative !important; 
    z-index: 5 !important; 
} 
 
/* TITLE ENTRANCE */ 
.elementor-element-e36bd63 
.elementor-element-b2a0fa2 { 
    animation: 
        mmServiceTitleIn .8s ease both; 
} 
 
/* SERVICE CARDS */ 
.elementor-element-e36bd63 
.service-card { 
    position: relative !important; 
 
    transition: 
        transform .4s ease, 
        box-shadow .4s ease !important; 
 
    animation: 
        mmServiceCardFloat 5.8s ease-in-out infinite; 
} 
 
.elementor-element-e36bd63 
.service-wrap .row > div:nth-child(1) 
.service-card { 
    animation-delay: 0s; 
} 
 
.elementor-element-e36bd63 
.service-wrap .row > div:nth-child(2) 
.service-card { 
    animation-delay: .45s; 
} 
 
.elementor-element-e36bd63 
.service-wrap .row > div:nth-child(3) 
.service-card { 
    animation-delay: .9s; 
} 
 
.elementor-element-e36bd63 
.service-wrap .row > div:nth-child(4) 
.service-card { 
    animation-delay: 1.35s; 
} 
 
.elementor-element-e36bd63 
.service-wrap .row > div:nth-child(5) 
.service-card { 
    animation-delay: 1.8s; 
} 
 
.elementor-element-e36bd63 
.service-wrap .row > div:nth-child(6) 
.service-card { 
    animation-delay: 2.25s; 
} 
 
/* CARD HOVER */ 
.elementor-element-e36bd63 
.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 */ 
.elementor-element-e36bd63 
.service-card .image { 
    overflow: hidden; 
} 
 
.elementor-element-e36bd63 
.service-card .image img { 
    transition: 
        transform .6s ease !important; 
} 
 
.elementor-element-e36bd63 
.service-card:hover .image img { 
    transform: 
        scale(1.055); 
} 
 
/* SERVICE NUMBER */ 
.elementor-element-e36bd63 
.service-card .top-number { 
    transition: 
        transform .35s ease !important; 
} 
 
.elementor-element-e36bd63 
.service-card:hover .top-number { 
    transform: 
        translateY(-5px); 
} 
 
/* LEFT LANTERN */ 
@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 */ 
@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); 
    } 
} 
 
/* RTL */ 
.elementor-element-e36bd63 .service-card .text { 
    direction: rtl !important; 
    text-align: right !important; 
} 
 
.elementor-element-e36bd63 .service-card .text h2, 
.elementor-element-e36bd63 .service-card .text p { 
    direction: rtl !important; 
    text-align: right !important; 
    unicode-bidi: plaintext; 
} 
 
.elementor-element-e36bd63 .service-card .text p { 
    line-height: 2.1 !important; 
} 
 
/* TABLET */ 
@media (max-width: 991px) { 
 
    .elementor-element-e36bd63::before { 
        width: 300px; 
        height: 410px; 
        left: -100px; 
        opacity: .18; 
    } 
 
    .elementor-element-e36bd63::after { 
        width: 330px; 
        height: 440px; 
        right: -115px; 
        opacity: .17; 
    } 
} 
 
/* MOBILE */ 
@media (max-width: 767px) { 
 
    .elementor-element-e36bd63 { 
        padding-top: 25px !important; 
        padding-bottom: 30px !important; 
    } 
 
    .elementor-element-e36bd63::before { 
        width: 220px; 
        height: 300px; 
        left: -90px; 
        top: 8%; 
        opacity: .14; 
    } 
 
    .elementor-element-e36bd63::after { 
        width: 240px; 
        height: 330px; 
        right: -100px; 
        bottom: 10%; 
        opacity: .13; 
    } 
 
    .elementor-element-e36bd63 
    .service-card { 
        animation-duration: 6.5s; 
    } 
}/* End custom CSS */