.elementor-24 .elementor-element.elementor-element-94ef7f5{--display:flex;--min-height:100px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--padding-top:0%;--padding-bottom:0%;--padding-left:4%;--padding-right:4%;--z-index:9999;}.elementor-24 .elementor-element.elementor-element-3e9f96c{--display:flex;--justify-content:center;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-24 .elementor-element.elementor-element-462c46d img{width:100%;}.elementor-24 .elementor-element.elementor-element-e26a150{--display:flex;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
					.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-24 .elementor-element.elementor-element-38ceda1 .elementor-menu-toggle{margin-left:auto;background-color:#FFFFFF;}.elementor-24 .elementor-element.elementor-element-38ceda1 .elementor-nav-menu .elementor-item{font-family:"Readex Pro", Sans-serif;font-weight:400;letter-spacing:1.5px;}.elementor-24 .elementor-element.elementor-element-38ceda1 .elementor-nav-menu--main .elementor-item{color:#FFFFFF;fill:#FFFFFF;}.elementor-24 .elementor-element.elementor-element-38ceda1 .elementor-nav-menu--main .elementor-item:hover,
					.elementor-24 .elementor-element.elementor-element-38ceda1 .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-24 .elementor-element.elementor-element-38ceda1 .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-24 .elementor-element.elementor-element-38ceda1 .elementor-nav-menu--main .elementor-item:focus{color:#FFFFFF;fill:#FFFFFF;}.elementor-24 .elementor-element.elementor-element-38ceda1 div.elementor-menu-toggle{color:#000000;}.elementor-24 .elementor-element.elementor-element-38ceda1 div.elementor-menu-toggle svg{fill:#000000;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:767px){.elementor-24 .elementor-element.elementor-element-3e9f96c{--width:50%;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-24 .elementor-element.elementor-element-e26a150{--width:42%;}}@media(min-width:768px){.elementor-24 .elementor-element.elementor-element-3e9f96c{--width:30%;}.elementor-24 .elementor-element.elementor-element-e26a150{--width:70%;}}/* Start custom CSS for container, class: .elementor-element-94ef7f5 *//* =========================================
   HEADER BASE STATE
   ========================================= */

.elementor-24 .elementor-element.elementor-element-94ef7f5 {
    background-color: rgba(255, 255, 255, 0);
    transition:
        background-color 0.8s ease,
        box-shadow 0.8s ease;
}

/* =========================================
   SCROLLED HEADER
   ========================================= */

.elementor-24 .elementor-element.elementor-element-94ef7f5.elementor-sticky--effects {
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}


/* =========================================
   LOGO CROSSFADE
   ========================================= */

.elementor-24 .elementor-element.elementor-element-94ef7f5 .quran-logo {
    position: relative;
}

/* White logo */
.elementor-24 .elementor-element.elementor-element-94ef7f5 .quran-logo-white {
    position: relative;
    opacity: 1;
    transition: opacity 0.8s ease;
}

/* Colour logo positioned directly over white logo */
.elementor-24 .elementor-element.elementor-element-94ef7f5 .quran-logo-colour {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease;
}

/* Crossfade logos after scroll */
.elementor-24 .elementor-element.elementor-element-94ef7f5.elementor-sticky--effects .quran-logo-white {
    opacity: 0;
}

.elementor-24 .elementor-element.elementor-element-94ef7f5.elementor-sticky--effects .quran-logo-colour {
    opacity: 1;
}


/* =========================================
   NAVIGATION COLOUR
   ========================================= */

.elementor-24 .elementor-element.elementor-element-94ef7f5 .quran-nav .elementor-nav-menu--main .elementor-item {
    color: #ffffff;
    transition: color 0.8s ease;
}

.elementor-24 .elementor-element.elementor-element-94ef7f5.elementor-sticky--effects
.quran-nav .elementor-nav-menu--main .elementor-item {
    color: #000000;
}


/* =========================================
   MOBILE MENU TOGGLE
   ========================================= */

.elementor-24 .elementor-element.elementor-element-94ef7f5 .quran-nav .elementor-menu-toggle {
    color: #ffffff;
    transition: color 0.8s ease;
}

.elementor-24 .elementor-element.elementor-element-94ef7f5.elementor-sticky--effects
.quran-nav .elementor-menu-toggle {
    color: #000000;
}

.elementor-24 .elementor-element.elementor-element-94ef7f5 {
    min-height: 100px;
    transition:
        min-height 0.8s ease,
        background-color 0.8s ease,
        box-shadow 0.8s ease;
}

.elementor-24 .elementor-element.elementor-element-94ef7f5.elementor-sticky--effects {
    min-height: 80px;
    padding-top:5px;
}

.elementor-24 .elementor-element.elementor-element-94ef7f5 .quran-logo {
    transition: width 0.8s ease;
}

.elementor-24 .elementor-element.elementor-element-94ef7f5.elementor-sticky--effects .quran-logo {
    width: 20%;
}

/* =========================================
   NAVIGATION COLOURS
   ========================================= */

/* Initial state — normal + hover = white */
.elementor-24 .elementor-element.elementor-element-94ef7f5 .quran-nav .elementor-nav-menu--main .elementor-item,
.elementor-24 .elementor-element.elementor-element-94ef7f5 .quran-nav .elementor-nav-menu--main .elementor-item:hover,
.elementor-24 .elementor-element.elementor-element-94ef7f5 .quran-nav .elementor-nav-menu--main .elementor-item:focus {
    color: #ffffff;
    transition: color 0.4s ease;
}

/* Scrolled state — normal + hover = black */
.elementor-24 .elementor-element.elementor-element-94ef7f5.elementor-sticky--effects
.quran-nav .elementor-nav-menu--main .elementor-item,
.elementor-24 .elementor-element.elementor-element-94ef7f5.elementor-sticky--effects
.quran-nav .elementor-nav-menu--main .elementor-item:hover,
.elementor-24 .elementor-element.elementor-element-94ef7f5.elementor-sticky--effects
.quran-nav .elementor-nav-menu--main .elementor-item:focus {
    color: #000000;
}
/* =========================================
   MOBILE LOGO SIZE
   ========================================= */

@media (max-width: 767px) {

    /* Initial logo size */
    .elementor-24 .elementor-element.elementor-element-94ef7f5 .quran-logo {
        width: 40%;
        max-width: 40%;
    }

    /* Keep the same size after scrolling */
    .elementor-24 .elementor-element.elementor-element-94ef7f5.elementor-sticky--effects .quran-logo {
        width: 40%;
        max-width: 40%;
    }
}/* End custom CSS */