@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/fontawesome.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/solid.min.css");
a { color: #2F8F98 }
.text-primary { color: #2F8F98 !important }
.body-content { padding: 0; overflow: hidden; }
.marifiLink, .marifiLink:hover { display: inline-flex; align-items:center; justify-content:center; width: auto; height: 46px;line-height: 43px; padding: 0 3rem; background-color: #2F8F98; color: #ffffff; font-size: 16px; text-decoration: none; border-radius: 10px;}
[dir=rtl] .marifiLink i:before {content:'\f060'; font-family:"Font Awesome 6 Free";}
.marifiLink i:before {content:'\f061'; font-family:"Font Awesome 6 Free";}
.marifiLink input{ background-color:transparent; border:none ;color: #ffffff; font-size: 16px; font-weight:bold;margin-bottom: 6px;}

.requiredFeild{ color:#ee1313; font-weight:bold}

/*Navigation*/
.toplinksContainer { background-color: #2f8f98; width: 100%; height: 54px; font-size: 12px; }

.toplinksContainer a { color: #ffffff; font-weight: normal }

.toplinks li { margin: 0 0.5rem !important; display: flex; align-items: center }

.toplinks, .socialLinks { display: flex; align-items:center; margin: 0; padding: 0; height: 30px; line-height: 30px; }

/*shrink*/
nav.navbar.shrink { position: fixed; top: 0; z-index: 1000; width: 100%; background-color: #2f8f98 !important; background-image: none; margin: 0; }

nav.navbar.shrink .navbar-brand { display: none }

.navContainer .navbar-nav.shrink { margin-top: 0 }

.toplinkWrapper { display: flex; justify-content: center; align-items: center; padding: 0; height: 54px; margin: 0; background-color: #2F8F98; z-index: 1000; position: relative; width: 100%; }

.toplinkWrapper li a, .toplinkWrapper li a:hover { color: #ffffff; text-decoration: none }

.toplinkWrapper li { list-style-type: none; margin: 0 5px; font-size: 13px; }

.toplinkWrapper li.sep { color: #ffffff }

.toplinksContainer ul.socialLinks li { margin: 0 0.3rem }

.toplinksContainer ul.socialLinks li a.socialLinks { height: 30px; width: 30px; color: #ffffff; border: 1px solid #ffffff; border-radius: 50%; display: flex; justify-content: center; align-items: center; text-decoration: none }

.toplinksContainer ul.socialLinks li a.socialLinks i { font-size: 1rem; line-height: normal; }
.headerContainer, .navbarmenuContainer, .navbar-brand { transition: 0.3s linear all }
.shrink, .headerContainer, .navbarmenuContainer, .navbar-brand { transition: 0.3s linear all }

.socialLinks.x-twitter svg { width: 15px; height: 15px }

.socialLinks.x-twitter path { fill: #ffffff }

.toplinks li, .socialLinks li { line-height: 30px; height: 30px; vertical-align: middle; list-style: none; margin: 0; padding: 0; color: #ffffff; }

/*do not remove color*/
.toplinks li a, .toplinks li a:hover, .toplinks li a:visited { display: block; color: #ffffff; text-decoration: none; }

.toplinks li.sep { margin: 0 5px }

.toplinks li a.adminLink { background-color: #ffffff; color: #2f8f98; border-radius: 5px; padding: 0 5px; font-weight: 600; height: 21px; line-height: 21px; font-size: 0.7rem; }

.toplinks li a.adminLink:hover { background-color: #11565d; color: #ffffff }


.headerContainer { /*height: 138px;*/ padding: 0; width: 100% }


.navbar { padding: 0; margin-top: 54px; background: #000000; background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); }
.navContainer .navbar-nav { display: flex; justify-content: center; width: 100%; margin-top: 10px }

.navContainer .navbar-nav .nav-link { color: #ffffff; font-weight: normal; font-size: 0.9rem }

.navContainer .navbar-nav .nav-link:hover { color: #5EC6CA }

.navContainer { display: flex; align-items: center; justify-content: space-between; }

.navbar-brand { height: 70px; display: inline-block; }

.navbar-brand img { height: 100% }
.nav.dropdown-submenu { background-color: rgba(0 0 0 / 0.5); }
/*height to set alignment of menu w.r.t zakat logo(bottom align)*/
.MaraLogo { height: 361px; display: flex; justify-content: center; align-items: center; flex-direction: column; }

.MaraLogo img { height: 185px; width: 175px; }

.navbarmenuContainer { display: flex; justify-content: space-between; padding: 0 3vw; height:80px }

.navbar-header { margin: 15px 0 }

.navbarmenuContainer .logo { height: 100px; margin-top: 20px }

nav.navbar.shrink .navbarmenuContainer { height: 52px; margin-top: 0 }

.navbar-menu { display: flex; justify-content: flex-end; align-items: center }

.navigationLink { color: #000000; padding: 0; font-size: 12px; font-weight: normal; text-decoration: underline; vertical-align: middle; line-height: 24px; display: inline-block; margin-bottom: 8px; }

.navbar-nav li a { font-size: 15px; font-weight: 700; }
/*
.navigationLink { color: #000000; padding: 0; font-size: 12px; font-weight: normal; text-decoration: underline; vertical-align: middle; line-height: 24px; display: inline-block; margin-bottom: 8px; }

.navbar-nav li a { font-size: 15px; font-weight: 700; }*/
.headerWrapper {
    background-image: url(../images/headerHPImg.jpg);
    background-size: 100% 100%;
    width: 100%;
    height: 100vh;
}


/*.VerseMosque {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    z-index: 1;
    top: auto;
    bottom: auto;
    position: absolute;
    height: 87vh;
    margin-top: 2rem
}

.VerseMosque img {
    width: 58%
}*/
#masajidSlider, #masajidSlider .carousel-inner { height: 94vh; width: 100% }
#masajidSlider .carousel-inner .carousel-item, #masajidSlider .carousel-inner .carousel-item img { height: 100%; width: 100% }
#masajidSlider .carousel-caption { width: 87vh; padding: 0; text-shadow: none; top: 0; bottom: 0; margin: auto; height: 177px; align-items: center; justify-content: center; }

#masajidSlider .carousel-caption h1 { font-size: 35px; color: #ffffff; font-weight: bold; margin: 0 }

/*================= https://bootsnipp.com/snippets/VE18Z ========================*/
#masajidSlider .carousel { margin-top: -22px; display: block }

#masajidSlider .carousel-inner .item img { height: 89vh; width: 100% }
/*
inspired from http://codepen.io/Rowno/pen/Afykb
& https://jsfiddle.net/q0rgL8ws/
*/
.carousel-fade .carousel-inner .item { opacity: 0; transition-property: opacity; overflow: hidden; }

.item.active img { transition: transform 5000ms linear 0s; /* This should be based on your carousel setting. For bs, it should be 5second*/ transform: scale(1.05, 1.05); }

.carousel-fade .carousel-inner .active { opacity: 1; }

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right { left: 0; opacity: 0; z-index: 1; }

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right { opacity: 1; }

.carousel-fade .carousel-control { z-index: 2; }

#masajidSlider .carousel-caption { display: block }

.navigateTo { position: absolute; bottom: 2.5rem; top: auto; left: 0; right: 0; margin: auto; z-index: 1; width: 100%; display: flex; justify-content: center }
.navigateTo img { height: 60px; width: 60px }

/*service category*/

.contentTab { padding: 0 }
.contentTab, .contentTab .nav-item, .contentTab .nav-link.active, .contentTab .nav-item.show .nav-link { border: none }
.nav-tabs.contentTab { padding: 2rem 0 }
.contentTab .nav-link[data-toggle]:not(.collapsed):after { content: "" }
.contentTab .nav-link { font-weight: normal; margin: 0 !important; border-radius: 0; border: none; color: #ffffff; background-color: transparent; font-size: 1.3rem }
/*#cfe2f3*/
.contentTab .nav-link.active { font-weight: bold; border-bottom: 2px solid #ffffff; background-color: transparent; color: #ffffff; }
.contentTab .nav-link.inactive, .contentTab .nav-link.inactive:hover { color: #a1a1a1; background-color: #dcdde0; font-size: 13px }

.serviceWrapper { background-color: #2F8F98; background-image: url("../images/Top-bg-img.png"); background-repeat: repeat-x; display: flex; flex-direction: row; height: auto; position: relative; padding:3rem 0}
.serviceWrapper:after { content: ""; position: absolute; height: 580px; background-image: url("../images/bottom-bg-img.png"); background-repeat: repeat-x; width: 100%; left: 0; right: 0; bottom: 0; top: auto; z-index:0 }
.serviceWrapper .eid-lantern-lhs,.serviceWrapper .eid-lantern-rhs{position: absolute; height:706px; background-image: url("../images/Eid-Lantern.png"); background-repeat: no-repeat; width: 234px; bottom: auto; top: 0; z-index:1}
.serviceWrapper .eid-lantern-rhs{ right:0; left:auto}
.serviceWrapper .eid-lantern-lhs{right:auto;left: 0;}
.serviceWrapper .ServiceSection { display: flex; flex-direction: column; flex: 2; padding: 1.5rem }
.serviceWrapper .ServiceSection .serviceHeading { font-weight: normal; font-size: 3rem; margin-bottom: 1rem; color: #ffffff; text-align: center }
.serviceContainer ul.nav { width: 100%; margin: 0; padding: 0; }
.serviceContainer ul.nav li.nav-item { border: none; margin-bottom: 0.7rem; }
.serviceContainer ul.nav li.nav-item a.nav-link { border: 1px solid #FFFFFF66; background-color: #0000000D; padding: 0.7rem; border-radius: 20px; color: #ffffff; margin: 0 !important; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 1.1rem; height: 170px; width: 100%; font-weight:bold }
.serviceContainer ul.nav li.nav-item a.nav-link i svg path { fill: #ffffff }
.serviceContainer ul.nav li.nav-item a.nav-link.active i svg path { fill: #2F8F98 }
.serviceContainer ul.nav li.nav-item a.nav-link.active { border: 1px solid #FFFFFF; padding: 0; background-color: #ffffff; color: #2F8F98; width: 100%; margin: 0; }
.serviceContainer ul.nav li.nav-item a.nav-link span { text-align: center; width: 100% }
.serviceContainer .tab-content { width: 100%; }
.serviceContainer .tab-content .tab-pane { padding: 0 }

.accordionSectionPanel { margin-bottom: 1rem; position: relative; background-color: #2D8890; border: 1px solid #FFFFFF80 !important; border-radius: 10px }
.accordionSectionHeader { color: #ffffff; font-size: 1.25rem; font-weight: 500; width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; cursor: pointer; padding: 1rem; }
[dir="rtl"] .accordionSectionHeader::after { content: "\f078"; font-family: 'FontAwesome'; width: 25px; display: block; position: absolute; top: 0; bottom: auto; left: 11px; right: auto; line-height: 55px !important }
.accordionSectionHeader::after { content: "\f078"; font-family: 'FontAwesome'; width: 25px; display: block; position: absolute; top: 0; bottom: auto; right: 11px; left: auto; line-height: 55px !important }
.accordionSectionHeader:not(.collapsed):after { content: "\f077"; font-family: 'FontAwesome'; color: #ffffff }
.accordionSectionBody .accordionSectionBodyContent { font-size: 1.1rem; padding: 1rem; color: #ffffff; }
.accordionSectionBody .accordionSectionBodyContent span { font-size: 1.1rem !important; }
.accordionSectionBody a { font-size: 1.1rem; color: #ffffff; padding: 5px 15px; border-radius: 5px; margin: 0 0.3rem; text-decoration: none; border: 1px solid #FFFFFF }
.accordionSectionBody a.regBtn { padding: 5px 15px; background: #FFFFFF; border-radius: 5px; color: #2F8F98; text-decoration: none }
.accordionSectionBody .badge-warning { font-size: 0.6rem; padding: 0.4rem 0.3rem; }

/*Advertisment section*/
.adSection .serviceHeading { font-weight: 500; font-size: 2.5rem; margin: 1.5rem 0 2rem 0}
.adSection{ background-image:url("../images/check-Auth-bg.png"); background-position:center bottom; background-repeat:repeat-x; background-color:#ffffff; padding:5rem 0}
.adSection form label{ margin-bottom:0.5rem; font-weight:bold}
.rc-anchor-content,.rc-anchor-normal,.adSection .rc-anchor-normal .rc-anchor-content{height:45px !important}
/*map*/
.mapWrapper{ background-image:url("../images/map-bg.png"); height:auto; width:100%; padding:5rem 0}
.mosqueHeading{ font-weight: normal; font-size: 3rem; margin-bottom: 3rem; color: #ffffff; text-align: center }
.mapSearchContainer{background-color:#2F8F98; padding:1rem}
.mapSearchContainer label{ color:#ffffff}
.mapSearchHeading{ color:#ffffff; font-size:1.2rem}

/*===============footer============================*/
.SiteFooter { position: relative; height: 666px; background-color: #194F53; display: flex; overflow: hidden; background-image: url("../images/Footer-city-outline.png"); background-repeat: repeat-x; background-position: bottom center }

.SiteFooter .top-ellipse { position: absolute; content: ''; border: 80px solid rgba(47, 143, 152, 0.2); border-radius: 50%; height: 826px; width: 826px; z-index: 0 }

.SiteFooter .side-ellipse { position: absolute; content: ''; border: 40px solid rgba(47, 143, 152, 0.2); border-radius: 50%; height: 224px; width: 224px; }

.SiteFooter p { margin: 0 }

.SiteFooter h1 { color: #ffffff; font-size: 16px; margin: 5px 0; }

.SiteFooter h1.bottom-border { position: relative; display: flex; flex-direction: column; height: 30px; }

.SiteFooter h1.bottom-border:after { content: ''; border-bottom: 2px solid #2F8F98; padding-bottom: 5px; position: absolute; bottom: 0; left: 0; right: 0; margin: auto }

.twitterContainer { display: flex; justify-content: center }

.twitterContainer iframe { min-width: 315px !important }

.SiteFooter ul { margin: 0; padding: 0; text-align: center }

.SiteFooter ul li { list-style: none; margin: 0; padding: 0; line-height: 25px; }

.SiteFooter ul li a { color: #292928; font-size: 13px; text-decoration: none; font-weight: bold }

.SiteFooter ul li a:hover { text-decoration: underline }

.SiteFooter label { color: #333333; font-size: 11px; font-weight: normal }

.SiteFooter input { line-height: 20px; width: 100%; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-style: none; border: 1px solid #cccccc }

.SiteFooter .btn { background-color: #bfbebe; line-height: 15px; color: #333333; padding: 3px 10px; font-size: 11px }

.SiteFooter .form-group { margin-bottom: 5px }

.comingSoonFooter { color: #a89b00; font-size: 10px; }

.outerFooter { background-color: #BEBBBB; width: 100%; height: 60px; }

.outerFooter p { color: #979797; line-height: 60px; background-color: #1e1e1e; margin: 0; padding: 0 }

.outerFooter a, .outerFooter a:hover { color: #979797; text-decoration: underline; margin: 0 5px }
/*site counter*/
.siteCounter { margin-top: 20px }

.siteCounterValueWrapper { display: inline-block; height: 29px; }

.siteCounterValue { position: relative; left: 2px; padding: 0 5px; color: #ffffff; line-height: 29px; text-align: center; height: 29px; letter-spacing: 0.35em; font-size: 18px; }

.SiteFooter ul.socialLinksfooter { margin-top: 20px; display: flex; justify-content: space-between; flex-direction: row-reverse; width: 201px; }

.SiteFooter ul.socialLinksfooter li a.socialLinks { height: 40px; width: 40px; color: #ffffff; border: 1px solid #ffffff; border-radius: 50%; display: flex; justify-content: center; align-items: center; text-decoration: none }

.SiteFooter ul.socialLinksfooter li a.socialLinks i { font-size: 1rem; line-height: normal; }

.SiteFooter ul.socialLinksfooter li a.iconShare { height: 30px; width: 30px; background-color: #BEBBBB; border-radius: 100%; display: block; text-decoration: none; text-align: center; font-size: 16px }

.copyrightContainer { display: flex; justify-content: space-between; flex-direction: column; height: 395px; width: 100%; background-color: #1F6E74; border-radius: 0 0 60px 60px; padding: 2rem 0; position: relative; z-index: 1 }

.MaraFooterLogo { height: auto; width: 205px; display: flex; justify-content: space-between; align-items: center; flex-direction: column; margin: auto }

.MaraFooterLogo img { height: 185px; width: 175px; }

.copyrightWrapper { color: #ffffff; font-size: 12px; display: flex; justify-content: center; flex-direction: column; text-align: center; margin-top: 7rem }

.copyrightWrapper a { color: #81DDE0; text-decoration: underline }

.copyrightWrapper p { margin-top: 10px }

.copyrightWrapper span { color: #81DDE0 }

.SiteFooter .footerIcons { margin-top: 1rem; z-index: 1 }

.SiteFooter .footerIcons li { display: flex; justify-content: start; align-items: center }

.SiteFooter .footerIcons li a { color: #ffffff; text-decoration: none; margin: 0 ;font-weight: normal; text-align:initial }

.SiteFooter .footerIcons li a:hover { color: #ffffff; text-decoration: underline; }
.SiteFooter .footerIcons li span.fa-stack{ width:24px; margin:0 0.3rem}
.contactUsIcon, .statsIcon, .maraLInkIcon, .TandCIcon, .PrivacyIcon, .EmailIcon, .callUsIcon { background-image: url("/images/Sprite-Footer.png"); height: 24px; width: 24px; display: inline-block }

.contactUsIcon { background-position: center top }

.statsIcon { background-position: center 11px }

.maraLInkIcon { background-position: center 0 }

.TandCIcon { background-position: center 0 }

.PrivacyIcon { background-position: center 0 }

.EmailIcon { background-position: center 0 }

.callUsIcon { background-position: center 0 }

.quicklinks { margin-top: 7rem }
/*do not change*/
.prayerTimeContainer { background-color: #1F6E74; width: 100%; height: 278px; border-radius: 10px; margin-top: 7rem }




@media (max-width: 767.98px){
    .navbar-header, .VerseMosque, .navigateTo,.eid-lantern-lhs, .eid-lantern-rhs { display: none }
    .navbar-menu { flex-direction: row; justify-content: space-between; width: 100% }
    #masajidSlider .carousel-caption{ width:auto}
    nav.navbar.navbar-fixed-top.shrink { top: 0 }

    nav.navbar.shrink .toplinksContainer { display: none }

    .navbar-toggler { background-color: transparent; border: none; color: #ffffff; border: none }

    .navbar-toggler .icon-bar { background-color: #000000; height: 3px }
    navbar-toggler:focus:not(:focus-visible) { outline: none }

    .navContainer, .navContainer .navbar-nav { flex-direction: column; height: auto; padding: 0 10px; margin: 0 }

    nav.navbar.shrink .headerContainer, nav.navbar.shrink .navbarmenuContainer { height: 60px }

    .headerContainer { height: 60px; }

     .navbar-nav .open .dropdown-menu { background-color: #ffffff }

    .navbar-nav > li > a { font-size: 12px; padding: 15px 10px; }

    .serviceWrapper .ServiceSection .serviceHeading{font-weight: bold;    font-size: 1.5rem;}
    .nav-tabs.contentTab{ padding:1rem 0}
    .contentTab .nav-link{ font-size:1.3rem}
    .serviceWrapper .ServiceSection{padding:1rem 0}
    .serviceContainer .tab-content h2{ font-size:1.1rem}
    .serviceContainer ul.nav li.nav-item a.nav-link{height: 85px;}
    .accordionSectionHeader{ font-size:1rem;padding: 1rem 1rem 1rem 2.3rem;}
    .accordionSectionBody .accordionSectionBodyContent{padding: 0 1rem 1rem 1rem;}
    .accordionSectionBody .accordionSectionBodyContent span{ font-size:0.9rem !important;line-height: normal; display:inline-block}
    .accordionSectionBody a.regBtn, .accordionSectionBody a{ font-size:0.9rem}
    .serviceContainer ul.nav li.nav-item a.nav-link span{display:none}
    .adSection .serviceHeading,.mosqueHeading{font-weight: bold;    font-size: 1.5rem;}
    
    /*based on fa-plus changed on 2nd feb 2026 as its affecting sidenav toggle icon after login in mobile*/
    [data-bs-toggle=collapse][aria-expanded=true].navbar-toggler i.fa:before { content: "\f00d"; }
    /*based on fa-minus */
    [data-bs-toggle=collapse][aria-expanded=false],navbar-toggler i.fa:before { content: "\f0c9"; }

}
@media (max-width: 991.98px) {
   .navbar-header, .VerseMosque,.navigateTo { display: none }
    nav.navbar.navbar-fixed-top.shrink { top: 0 }

    nav.navbar.shrink .toplinksContainer { display: none }

    .navbar-toggler:focus { box-shadow: none }

    .navbar-toggler { background-color: transparent; color: #ffffff; border: none; }

    .navbar-toggler .icon-bar { background-color: #000000; height: 3px }

    .navbar-toggler:focus:not(:focus-visible) { outline: none }

    .navContainer, .navContainer .navbar-nav { flex-direction: column; height: auto; padding: 0 10px; }

    .navbar-brand { height: 85px; display: block; }

    .navbar-brand img { height: 40px }

    nav.navbar.shrink a.navbar-brand img { width: auto }

    nav.navbar.shrink .headerContainer, nav.navbar.shrink .navbarmenuContainer { height: 50px; }

    .navbarmenuContainer { background-color: transparent; height: 60px; position: relative; margin-top: 0 }

    .clearfixResp { clear: both }

    .navbar-nav { margin: 0; }

    .nav > li > a:hover { border-radius: 0 }

    .nav .open > a:focus, .nav li a.dpl-menu-active { border-radius: 0 }

    .navbar-nav { margin: 0; }

    .navbar-collapse#toplinkToggler { background-color: #368d97; z-index: 1040; top: 53px; height: 195px; box-shadow: 6px 6px 8px #2e2e2ec7; }

    .toplinks li.sep { display: none }

    .toplinks li { height: 40px; line-height: 60px; }

    .navbar-collapse#toplinkToggler .toplinks { flex-direction: column }

    .navbar-brand { margin: 0; height: auto }

    .navbarmenuContainer .logo { height: 58px; margin-top: 0; }

    .navbar-nav { margin: 0; }

    .navbar-toggler:focus { box-shadow: none }
    /*.navbar-nav li { border-bottom: 1px solid #f5f5f5 }
    .nav > li > a:hover { border-radius: 0 }
    .nav .open > a:focus, .nav li a.dpl-menu-active { border-radius: 0 }*/
    .navbar-collapse { background-color: transparent; position: absolute; width: 100%; padding: 0; top: 58px; right: 0; left: auto; max-height: none !important }

    html[lang=ar].navbar-collapse { right: 0; left: auto; }

    .navbar-nav .open .dropdown-menu { background-color: #ffffff }

    .navbar-nav > li > a { font-size: 12px; padding: 8px 10px; }

    .navbar-nav > li > a { font-size: 17px }
    #masajidSlider, #masajidSlider .carousel-inner, #masajidSlider .carousel-inner .carousel-item img{width: 100%;height: 27vh;}
    .SiteFooter{ height: auto;
        padding-bottom: 2rem;
        flex-direction: column !important;
        align-items: center;}
    }