.elementor-2268 .elementor-element.elementor-element-e122b6a .e-gallery-item:hover .elementor-gallery-item__overlay, .elementor-2268 .elementor-element.elementor-element-e122b6a .e-gallery-item:focus .elementor-gallery-item__overlay{background-color:rgba(0,0,0,0.5);}.elementor-2268 .elementor-element.elementor-element-e122b6a{--image-border-radius:10px;--image-transition-duration:800ms;--overlay-transition-duration:800ms;--content-text-align:center;--content-padding:20px;--content-transition-duration:800ms;--content-transition-delay:800ms;--galleries-title-color-normal:#333333;--galleries-title-color-hover:#fff;--galleries-pointer-bg-color-hover:#D3B03C;--gallery-title-color-active:#FFFFFF;--galleries-pointer-bg-color-active:#D3B03C;}/* Start custom CSS for gallery, class: .elementor-element-e122b6a *//* =========================================================
   MUHAMMAD MASJID - SAFE PREMIUM GALLERY
   NO MASONRY BREAK
   COLORS:
   #d3b03c
   #333333
   #f9efe5
   ========================================================= */


/* MAIN GALLERY SECTION */
.elementor-1403 .elementor-element-e590cd5 {
    position: relative !important;
    overflow: hidden !important;
    padding-top: 55px !important;
    padding-bottom: 65px !important;
    isolation: isolate;
}


/* LARGE BACKGROUND DECORATION - SAFE */
.elementor-1403 .elementor-element-e590cd5::before {
    content: "";
    position: absolute;

    width: 620px;
    height: 620px;

    top: -360px;
    right: -300px;

    border: 2px solid rgba(211,176,60,.16);
    border-radius: 50%;

    box-shadow:
        0 0 0 70px rgba(211,176,60,.025),
        0 0 0 140px rgba(211,176,60,.012);

    pointer-events: none;
    z-index: 0;

    animation: mmGalleryRing 28s linear infinite;
}


/* LARGE CRESCENT */
.elementor-1403 .elementor-element-e590cd5::after {
    content: "☾";

    position: absolute;

    left: -35px;
    top: 28%;

    font-size: 220px;
    line-height: 1;

    color: rgba(211,176,60,.07);

    pointer-events: none;
    z-index: 0;

    animation: mmGalleryMoon 8s ease-in-out infinite;
}


/* KEEP WIDGET ABOVE DECORATIONS */
.elementor-1403 .elementor-element-cb790fd {
    position: relative !important;
    z-index: 2 !important;
}


/* =========================================================
   FILTER BUTTONS
   ========================================================= */

.elementor-1403 .elementor-gallery__titles-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;

    gap: 8px !important;

    margin-bottom: 24px !important;
}


/* NORMAL FILTER */
.elementor-1403 .elementor-gallery-title {
    padding: 9px 16px !important;

    color: #333333 !important;
    background: transparent !important;

    border: 1px solid rgba(211,176,60,.55) !important;
    border-radius: 30px !important;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease !important;
}


/* ACTIVE FILTER */
.elementor-1403 .elementor-gallery-title.elementor-item-active {
    background: #d3b03c !important;
    color: #333333 !important;
}


/* FILTER HOVER */
.elementor-1403 .elementor-gallery-title:hover {
    background: #333333 !important;
    color: #f9efe5 !important;

    transform: translateY(-2px);
}


/* =========================================================
   GALLERY ITEMS
   IMPORTANT:
   NO width/height/position/transform on base state
   ========================================================= */

.elementor-1403 .e-gallery-item {
    overflow: hidden !important;

    border-radius: 12px !important;

    box-shadow:
        0 8px 18px rgba(51,51,51,.10);

    transition:
        box-shadow .35s ease !important;
}


/* IMAGE */
.elementor-1403 .e-gallery-image {
    border-radius: 12px !important;

    background-position: center center !important;
    background-size: cover !important;

    transition:
        filter .35s ease !important;
}


/* =========================================================
   SAFE HOVER
   No scale on parent because masonry uses transforms
   ========================================================= */

.elementor-1403 .e-gallery-item:hover {
    box-shadow:
        0 15px 30px rgba(51,51,51,.18);
}


/* IMAGE COLOR POLISH */
.elementor-1403 .e-gallery-item:hover .e-gallery-image {
    filter:
        brightness(.94)
        saturate(1.08);
}


/* =========================================================
   GOLD INNER BORDER
   ========================================================= */

.elementor-1403 .e-gallery-item::before {
    content: "";

    position: absolute;

    inset: 8px;

    border: 1px solid transparent;
    border-radius: 8px;

    z-index: 4;

    pointer-events: none;

    transition:
        border-color .3s ease !important;
}


.elementor-1403 .e-gallery-item:hover::before {
    border-color:
        rgba(211,176,60,.90);
}


/* =========================================================
   OVERLAY
   ========================================================= */

.elementor-1403 .elementor-gallery-item__overlay {
    background:
        linear-gradient(
            180deg,
            rgba(51,51,51,0) 45%,
            rgba(51,51,51,.42) 100%
        ) !important;

    opacity: 0 !important;

    transition:
        opacity .3s ease !important;
}


.elementor-1403
.e-gallery-item:hover
.elementor-gallery-item__overlay {
    opacity: 1 !important;
}


/* =========================================================
   SUBTLE GOLD GLOW
   ========================================================= */

.elementor-1403 .e-gallery-item::after {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    right: -70px;
    bottom: -70px;

    border-radius: 50%;

    background:
        rgba(211,176,60,.22);

    filter: blur(30px);

    opacity: 0;

    pointer-events: none;
    z-index: 3;

    transition:
        opacity .3s ease !important;
}


.elementor-1403 .e-gallery-item:hover::after {
    opacity: .8;
}


/* =========================================================
   BACKGROUND ANIMATION
   ========================================================= */

@keyframes mmGalleryRing {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


@keyframes mmGalleryMoon {
    0%,
    100% {
        transform:
            translateY(0)
            rotate(-5deg);
    }

    50% {
        transform:
            translateY(-20px)
            rotate(4deg);
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .elementor-1403 .elementor-element-e590cd5 {
        padding-top: 45px !important;
        padding-bottom: 55px !important;
    }

    .elementor-1403 .elementor-element-e590cd5::before {
        width: 450px;
        height: 450px;

        top: -270px;
        right: -220px;
    }

    .elementor-1403 .elementor-element-e590cd5::after {
        font-size: 150px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .elementor-1403 .elementor-element-e590cd5 {
        padding-top: 35px !important;
        padding-bottom: 45px !important;
    }

    .elementor-1403 .elementor-gallery__titles-container {
        gap: 6px !important;
        margin-bottom: 18px !important;
    }

    .elementor-1403 .elementor-gallery-title {
        padding: 7px 11px !important;
        font-size: 12px !important;
    }

    .elementor-1403 .e-gallery-item,
    .elementor-1403 .e-gallery-image {
        border-radius: 8px !important;
    }

    .elementor-1403 .elementor-element-e590cd5::after {
        font-size: 100px;
        left: -20px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .elementor-1403 .elementor-element-e590cd5::before,
    .elementor-1403 .elementor-element-e590cd5::after {
        animation: none !important;
    }
}/* End custom CSS */