*{  font-family: 'Noto Kufi Arabic', sans-serif; color:#000000;  }
body{ direction: rtl; margin: 0; padding: 0; font-weight: 400; }


#Header{ max-width: 1100px; margin: auto; height:100px; position:relative; }
#Logo{ width: 150px; height:50px; position:absolute; margin: auto; right:0px; top:0px; bottom:0px; background-image: url("../img/logo.png"); background-position: center; background-repeat: no-repeat; background-size: contain; }
#TopMenu{ position:absolute; margin: auto; left:0px; top:0px; bottom:0px; height:40px; }
.TopMenuLink1{ float:right; height: 40px; line-height: 40px; background-color: #773cbe; padding: 0px 20px 0px 20px; color: #ffffff; text-decoration: none; font-size: 14px; }
.TopMenuLink1:hover{ cursor: pointer; color:#ffffff; background-color: #945CD6; }
.TopMenuLink2{ float:right; height: 40px; line-height: 40px; background-color: #ededed; padding: 0px 20px 0px 20px; color: #000000; text-decoration: none; font-size: 14px; margin-left: 5px; }
.TopMenuLink2:hover{ opacity: 0.6; }
.TopMenuLink2.Selected{  }


/* .TopMenuLink2:hover{ cursor: pointer; color:#ededed; background-color: #000000; } */
.sep{ height: 20px; clear: both; display: block; }
.PageContent{ max-width:1100px; margin: auto; overflow: hidden; }
.BlockFull{ width: calc(100% - 42px);  background-color: #f8f8f8;  border: 1px solid #ededed;  padding: 20px; overflow: hidden; }
.Title{ font-size:18px; font-weight: 700; height:40px; line-height: 40px; border-bottom:1px solid #000000; margin-bottom: 20px; flex: 0 1 100%; }
.Title2{ font-size:18px; font-weight: 700; height:40px; line-height: 40px; border-bottom:1px solid #000000; flex: 0 1 100%; width: 100%; max-width: 700px; text-align: center; margin: auto; margin-bottom: 20px;  }
.Title3{ font-size:18px; font-weight: 700; margin-bottom: 20px; }
.Text{ font-size: 13px; line-height: 25px; text-align: justify; font-weight: 400; }

#LoaderBg{ position:fixed; top:0px; left:0px; right:0px; bottom:0px; margin:auto; background-color: rgba(0,0,0,0.85); z-index: 9996; }
#LoaderContent{ position:fixed;  top:0px; left:0px; right:0px; bottom:0px; margin:auto; width: 60px; height: 60px; border:20px solid #773cbe; border-radius: 10px; background-color: #773cbe; background-image: url("../img/spin.gif"); background-position: center; background-repeat: no-repeat; z-index: 9997; background-size: contain; }
#LightBoxBg{ position:fixed; top:0px; left:0px; right:0px; bottom:0px; margin:auto; background-color: rgba(0,0,0,0.85); z-index: 9998; }
#LightBoxContent{ position:fixed;  top:0px; left:0px; right:0px; bottom:0px; margin:auto; padding:20px; border-radius: 10px; background-color: #773cbe; color:#ffffff; text-align: center; z-index: 9998; }
#LightBoxBtn{ width: 100%; height: 40px; line-height: 40px; background-color: #ffffff; color: #000000; border-radius: 2px; border:0px; margin-top: 20px; }
#LightBoxBtn:hover{ cursor:pointer; opacity: 0.7; }

.FBTabContainer{ width: calc(100% - 40px); max-width: 500px; margin:auto; margin-top: 50px; padding: 20px; }

#Footer{ width: 100%; background-color: #f7f7f7; }
@media only screen and (min-width: 700px) {
    #FooterContent{ max-width: 1100px; width: 100%; display: flex; padding: 40px 0px 40px 0px; margin: auto; }
    #FooterSection1 {
        flex: 1;
        padding-left: 40px;
    }
    #FooterSection2 {
        flex: 1;
    }
    #FooterSection3 {
        flex: 1;
        padding-right: 40px;
    }
}@media only screen and (max-width: 700px) {
    #FooterContent{ max-width: 1100px; width: 100%; display: flex; flex-wrap: wrap; padding: 40px 0px 40px 0px; margin: auto; }
    #FooterSection1 {
        flex: 0 100%;
        padding: 0px 20px 0px 20px;
        margin-bottom: 40px;
    }
    #FooterSection2 {
        flex: 0 100%;
        padding: 0px 20px 0px 20px;
        margin-bottom: 40px;
    }#FooterSection3 {
         flex: 0 100%;
         padding: 0px 20px 0px 20px;
         margin-bottom: 40px;
     }
}
#FooterContent2{
    margin:10px 0px 20px 0px; width:100%; margin:auto; text-align: center; font-size: 11px; opacity: 0.8;
}

.FooterSection1SocialFacebook{ width: 28px; height: 28px; background-image: url("../img/social_fb.png"); background-position: center; background-repeat: no-repeat; display: inline-block; }
.FooterSection1SocialTwitter{ width: 28px; height: 28px; background-image: url("../img/social_twitter.png"); background-position: center; background-repeat: no-repeat; display: inline-block; }
.FooterSection1SocialGooglePLus{ width: 28px; height: 28px; background-image: url("../img/social_googleplus.png"); background-position: center; background-repeat: no-repeat; display: inline-block; }
.FooterSection1SocialFacebook:hover, .FooterSection1SocialTwitter:hover, .FooterSection1SocialGooglePLus:hover{ cursor: pointer; opacity: 0.7; }



.InputText{ border:1px solid #000000; background-color: transparent; width: calc(100% - 42px); padding: 0px 20px 0px 20px; height:40px; line-height: 40px; border-radius: 2px; margin-bottom: 10px; }
.InputSelect{ border:1px solid #000000; background-color: transparent; width: calc(100% - 0px); padding: 0px 20px 0px 20px; height:42px; line-height: 40px; border-radius: 2px; -webkit-appearance: none; margin-bottom: 10px; }
.InputSelect2{ border:1px solid #000000; background-color: transparent; width: calc(33.33% - 5px); margin-left: 5px; padding: 0px 20px 0px 20px; height:40px; line-height: 40px; border-radius: 2px; -webkit-appearance: none; margin-bottom: 10px; }
.InputText2{ border:0px; background-color: #ffffff; width: calc(100% - 42px); padding: 0px 20px 0px 20px; height:40px; line-height: 40px; border-radius: 2px; margin-bottom: 10px; color:#000000; }
.InputTextArea{ border:1px solid #000000; background-color: transparent; width: calc(100% - 42px); padding: 0px 20px 0px 20px; margin-bottom: 10px; border-radius: 2px; }
.InputDescription{ font-size: 11px; color: #000000; margin-bottom: 15px; text-align: justify; margin-top: -5px; }
.InputBtn{ height: 40px; line-height: 40px; border: 0px; border-radius:2px; width: 100%; padding-right: 20px; color:#ffffff; font-size: 12px; background-color: #000000; }
.InputBtn:hover{ background-color: #773cbe; cursor:pointer; }

.InputBtn2{ height: 40px; line-height: 40px; border: 0px; border-radius:2px; width: 100%; padding-right: 20px; color:#ffffff; font-size: 12px; background-color: #773cbe; }
.InputBtn2:hover{ background-color: #945CD6; cursor:pointer; }

@media only screen and (min-width: 1024px) {
    .MainMenu {
        max-width: 1100px;
        margin: auto;
        display: flex;
        flex-wrap: nowrap;
    }

    .MainMenuLink {
        text-decoration: none;
        flex: 1;
        text-align: center;
        font-size: 16px;
        height: 40px;
        line-height: 40px;
        font-weight: 700;
        position: relative;
    }
    .MainMenuSubMenu{
        position:absolute;
        top:40px;
        right: 0px;
        left:0px;
        background-color: #945CD6;
        color:#ffffff;
        overflow: hidden;
        display:none;
        z-index: 9999;
        width: 200px;
        margin: auto;
    }.MainMenuLink:hover {
        cursor: pointer;
        background-color: #773cbe;
        color: #ffffff;
    }
    .MainMenuLink:hover .MainMenuSubMenu {
         display:block;
    }
    .MainSubMenuLink{
        display:block;
        color:#ffffff; text-decoration: none; font-size: 12px; font-weight: 100;
        padding: 8px 10px 8px 10px;
        border-top: 1px solid rgba(255,255,255,0.3);
        line-height:22px;
    }
    .MainSubMenuLink:hover{ background-color:#773cbe;  }
    .MainMenuLinkMobile, .MainMenuMobile {
        display: none;
    }
}
@media only screen and (max-width: 1024px) {
    .MainMenu {
        margin: auto;
    }
    .MainMenuLink {
        display: none;
    }
    .MainMenuLinkMobile {
        display: block;
        width: 100%;
        height: 40px;
        background-color: #773cbe;
        background-image: url("../img/mobilemenu.png");
        background-repeat: no-repeat;
        background-position: center;
        float: left;
    }
    .MainMenuLinkMobile:hover {
        background-color: #945CD6;
        cursor: pointer;
    }
    .MainMenuMobile {
        display: block;
        clear: both;
        width: 100%;
    }
    .MainMenuLinkMobile2{
        text-align: center;
        height:40px;
        line-height: 40px;
        width: calc( 100% - 40px );
        padding: 0px 20px 0px 20px;
        display: block;
        clear: both;
        background-color: #e0e0e0;
        text-decoration: none;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }
    .MainMenuSubMenuMobile{
        background-color:#e0e0e0;
    }
    .MainSubMenuLinkMobile{
        text-align: center;
        height:36px;
        line-height: 36px;
        width: calc( 100% - 40px );
        padding: 0px 20px 0px 20px;
        display: block;
        clear: both;
        background-color: #ededed;
        text-decoration: none;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        font-size: 13px;
    }
}
.MainMenuLinkSelected{ background-color: #773cbe !important;  color: #ffffff  !important;  }

.SlideShowContainer{ position:relative; width: 100%; padding-bottom: 33.33%; background-color: #000000; overflow: hidden; }
.SlideShowSlide{  position:absolute; margin: auto; top:0px; left:0px; right: 0px; bottom:0px; background-size: cover; background-position: center; background-repeat: no-repeat; }
@media only screen and (min-width: 700px) {
    .SlideShowSlideText{ position: absolute; font-size: 36px; color: #ffffff; text-align: center; top: 40%; bottom: 0px; left: 0px; right: 0px; max-width: 1100px; margin: auto; font-weight: 700; }
    .SlideShowArrowLeft{ background-image: url("../img/ss_arrow_left.png"); width: 100px; position: absolute; left: 0px; top:0px; bottom:0px; background-position: center; background-repeat: no-repeat; background-size: 50px 70px; opacity: 0.5; }
    .SlideShowArrowLeft:hover{ background-image:url("../img/ss_arrow_left.png"), -webkit-linear-gradient(right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%); background-position: center,center; background-repeat: no-repeat; background-size: 50px 70px,auto; opacity:1; cursor: pointer; }
    .SlideShowArrowRight{ background-image: url("../img/ss_arrow_right.png"); width: 100px; position: absolute; right: 0px; top:0px; bottom:0px; background-position: center; background-repeat: no-repeat; background-size: 50px 70px; opacity: 0.5; }
    .SlideShowArrowRight:hover{ background-image:url("../img/ss_arrow_right.png"), -webkit-linear-gradient(right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%); background-position: center,center; background-repeat: no-repeat; background-size: 50px 70px,auto; opacity:1; cursor: pointer; }

}@media only screen and (max-width: 700px) {
    .SlideShowSlideText{ position: absolute; font-size: 14px; color: #ffffff; text-align: center; top: 40%; bottom: 0px; left: 30px; right: 30px; max-width: 1100px; margin: auto; font-weight: 700; }
    .SlideShowArrowLeft{ background-image: url("../img/ss_arrow_left.png"); width: 50px; position: absolute; left: 0px; top:0px; bottom:0px; background-position: center; background-repeat: no-repeat; background-size: 50px 70px; opacity: 0.5; }
    .SlideShowArrowLeft:hover{ background-image:url("../img/ss_arrow_left.png"), -webkit-linear-gradient(right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%); background-position: center,center; background-repeat: no-repeat; background-size: 50px 70px,auto; opacity:1; cursor: pointer; }
    .SlideShowArrowRight{ background-image: url("../img/ss_arrow_right.png"); width: 50px; position: absolute; right: 0px; top:0px; bottom:0px; background-position: center; background-repeat: no-repeat; background-size: 50px 70px; opacity: 0.5; }
    .SlideShowArrowRight:hover{ background-image:url("../img/ss_arrow_right.png"), -webkit-linear-gradient(right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%); background-position: center,center; background-repeat: no-repeat; background-size: 50px 70px,auto; opacity:1; cursor: pointer; }
}




@media only screen and (min-width: 700px) {
    .HomePageSection1 {
        width: calc(65% - 42px);
        background-color: #f8f8f8;
        border: 1px solid #ededed;
        padding: 20px;
        display: flex;
        flex-wrap: wrap;
        float: right;
    }
    .HomePageSection2 {
        width: calc(35% - 62px);
        margin-right: 20px;
        background-color: #f8f8f8;
        border: 1px solid #ededed;
        padding: 20px;
        float: right;
    }
    .HomePageSection3Section1 {
        flex: 1;
        width: 33%;
    }
    .HomePageSection3Section2 {
        flex: 1;
        width: 33%;
        object-fit: scale-down;
        object-position: center center;
        max-height:550px;
    }
    .HomePageSection3Section3 {
        flex: 1;
        width: 33%;
        text-align: center;
    }
}@media only screen and (max-width: 700px) {
    .HomePageSection1 {
        width: calc(100% - 42px);
        background-color: #f8f8f8;
        border: 1px solid #ededed;
        padding: 20px;
        display: flex;
        flex-wrap: wrap;
        float: right;
    }
    .HomePageSection2 {
        width: calc(100% - 42px);
        margin-top: 20px;
        background-color: #f8f8f8;
        border: 1px solid #ededed;
        padding: 20px;
        float: right;
    }
    .HomePageSection3Section1 {
        flex: 1;
        width: calc(50% - 40px);
        padding: 0px 20px 0px 20px;
    }
    .HomePageSection3Section2 {
        display: none;;
    }
    .HomePageSection3Section3 {
        flex: 1;
        width: calc(50% - 20px);
        text-align: center;
        padding-left:20px;
    }
}
.HomePageSection3 {
    width:100%;
    display: flex;
    flex-wrap: nowrap;
    align-items:center;
 }
.HomePageSection1Left { width:calc(30% - 20px); flex:1 calc(30% - 20px); margin-left: 20px; background-position: center; background-repeat: no-repeat; background-size: contain; }
.HomePageSection1Right{ width:70%; flex:1 70%; }
.HomePageSection1Img{ max-width: 100%; margin-top: 20px; height: auto; flex: 0 1 100%; width: auto; }
.HomePageSection3AppleStoreLink{ width: 100%; height:49px; background-image: url("../img/app_iphone.png"); background-position: center; background-repeat: no-repeat; background-size: contain; display: block; }
.HomePageSection3GooglePlayLink{ width: 100%; height:49px; background-image: url("../img/app_googleplay.png"); background-position: center; background-repeat: no-repeat; background-size: contain; display:block; }
.HomePageSection3Section3Icon{ object-fit: scale-down; object-position: center center; }


#ContactMapWrapper, #ContactMapCanvas{ width: 100%; height: 500px; }
@media only screen and (min-width: 700px) {
    .ContactSection1_1 {
        width: calc(50% - 10px);
        float: right;
    }
    .ContactSection1_2 {
        width: calc(50% - 10px);
        float: left;
    }
    .ContactSection1_3 {
        width: 400px;
        margin: auto;
    }
}
@media only screen and (max-width: 700px) {
    .ContactSection1_1 {
        width: 100%;
    }
    .ContactSection1_2 {
        width: 100%;
    }
    .ContactSection1_3 {
        width: 100%;
    }
}



.ContactSection2{ width:100%; background-image: url("../img/entasib.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover;  }
.ContactSection2_Inside{ max-width:1100px; margin:auto; position:relative; }
@media only screen and (min-width: 700px) {
    .ContactSection2_Section1{ position:absolute; top:0px; bottom:0px; right:0px; width: 50%; margin: auto; height:360px; text-align: center; }
}
@media only screen and (max-width: 700px) {
    .ContactSection2_Section1{ position:absolute; top:0px; bottom:0px; right:20px; left: 20px; margin: auto; height:360px; text-align: center; }
}
.ContactSection2_Section1_Inside{ max-width: 400px; margin: auto; width: 100%; color:#ffffff; }
.ContactSection2_Section1_Title{ font-size: 56px; color:#ffffff; }

@media only screen and (min-width: 700px) {
    .AboutLayout1_Bloc1{ width: calc(40% - 10px); float:left; height: 0px; position:relative; padding-bottom: calc(30% - 10px); }
    .AboutLayout2_Bloc1{ width: calc(40% - 10px); float:right; height: 0px; position: relative; padding-bottom: calc(30% - 10px) }
    .AboutLayout1_Bloc2{ width: calc(60% - 10px); float:right;  }
    .AboutLayout2_Bloc2{ width: calc(60% - 10px); float:left; }
}
@media only screen and (max-width: 700px) {
    .AboutLayout1_Bloc1{ width: 100%; height: 0px; position:relative; padding-bottom: 75%; }
    .AboutLayout2_Bloc1{ width: 100%; height: 0px; position:relative; padding-bottom: 75%; }
    .AboutLayout1_Bloc2{ width: 100%; margin-top: 20px; }
    .AboutLayout2_Bloc2{ width: 100%; margin-top: 20px; }
}
.AboutVideo, .AboutImg{ position: absolute; top:0px; left:0px; right:0px; bottom:0px; margin: auto; width: 100%; height:100%; }



.AboutLayout3_Bloc2{ width:100%;  }




.ActivitiesMainTitle{ font-size:16px; margin-bottom: 0px;  }
.ActivitiesMainDate{ font-size:14px; margin-bottom: 5px; color:#773cbe;  }
.ActivitiesMainDescription{ }

.ActivitiesBlock{ padding: 10px; background-color: rgba(0,0,0,0.05); overflow: hidden; display: block; text-decoration: none; border-bottom:1px solid #f8f8f8; }
.ActivitiesBlock:hover{ padding: 10px; overflow: hidden; background-color: rgba(0,0,0,0.08); display: block; text-decoration: none; cursor: pointer; }
.ActivitiesBlockLeft{ width: calc(100% - 160px); float: left; text-decoration: none; }
.ActivitiesBlockRight{ width: 150px; float: right; text-decoration: none; }
.ActivitiesGalleryImg{ width: 140px; height: 140px; background-position: center; background-repeat: no-repeat; background-size: cover; display: inline-block; margin-bottom: 5px; margin-left: 5px; }
.ActivitiesGallery{ display: block; overflow: hidden; clear:both; }
.ActivitiesVideoPLay{ position:absolute; top:0px; left:0px; right:0px; bottom:0px; margin: auto; background-image: url('../img/play.png'); background-size: 100px; background-position: center; background-repeat: no-repeat; opacity: 0.8; z-index: 2; }
.ActivitiesVideoPLay:hover{ opacity: 1; background-color: rgba(255,255,255,0.3); cursor: pointer; }
@media only screen and (min-width: 700px) {
    .ActivitiesFirstBlockRight{ width: 50%; float: right; }
    .ActivitiesFirstBlockLeft{ width: calc(50% - 20px); float: left; text-align: left; position:relative; padding-bottom: 37%; background-position: top; background-size: contain; background-repeat: no-repeat; position:relative; }
    .ActivitiesFirstBlockRight2{ width: 60%; float: right; }
    .ActivitiesFirstBlockLeft2{ width: calc(40% - 20px); float: left; text-align: left; position:relative; padding-bottom: 30%; background-position: top; background-size: contain; background-repeat: no-repeat; position:relative; }
}
@media only screen and (max-width: 700px) {
    .ActivitiesFirstBlockRight{ width: 100%; margin-bottom: 10px; }
    .ActivitiesFirstBlockLeft{ width: 100%; text-align: left; position:relative; padding-bottom: 75%; background-position: top; background-size: contain; background-repeat: no-repeat; position:relative; }
    .ActivitiesFirstBlockRight2{ width: 60%; float: right; }
    .ActivitiesFirstBlockLeft2{ width: calc(40% - 20px); float: left; text-align: left; position:relative; padding-bottom: 30%; background-position: top; background-size: contain; background-repeat: no-repeat; }
}

.FAQsQuestion{ padding: 20px; background: #f8f8f8; border: 1px solid #ededed; font-size: 16px; margin-bottom: 20px; }
.FAQsQuestion:hover{ cursor: pointer; background-color: #ededed; }
.FAQsAnswer{ font-size: 12px; padding-top: 20px; border-top:1px solid #000000; text-align: justify }

@media only screen and (min-width: 700px) {
    .DonateSection1{ width: calc(50% - 50px); float:right; padding: 20px; border:1px solid #ededed; background-color: #f8f8f8; text-align: center; text-decoration: none; margin-bottom: 20px; }
    .DonateSection2{ width: calc(50% - 50px); float:left; padding: 20px; border:1px solid #ededed; background-color: #f8f8f8; text-align: center; text-decoration: none; margin-bottom: 20px; }
    .DonateSection1:hover, .DonateSection2:hover{ background-color: #ededed; }
}@media only screen and (max-width: 699px) {
    .DonateSection1, .DonateSection2{ width: 100%; padding: 20px; border:1px solid #ededed; background-color: #f8f8f8; text-align: center; text-decoration: none; margin-bottom: 20px; overflow: hidden; display: block; }
    .DonateSection1:hover, .DonateSection2:hover{ background-color: #ededed; }
}

.DonateTitle{ font-size: 18px; font-weight: 700; text-align: center; }
.DonateImage{ width: 100px; height: 50px; background-position: center; background-repeat: no-repeat; background-size: contain; margin: auto; margin-top: 20px; }
.DonateText{ margin-top: 20px; text-align: center; }

.DonateTableHeader{ padding: 5px 20px 5px 20px; background-color:#773cbe; color:#ffffff; font-size: 12px; }
@media only screen and (min-width: 700px) {
    .DonateTableA{ width:calc(50% - 60px); float:right; margin:10px; border-bottom: 1px solid #ededed; background-color: #f8f8f8; padding: 20px; font-size: 12px; display: block; overflow: hidden; text-decoration: none; }
}@media only screen and (max-width: 699px) {
    .DonateTableA{ width:calc(100% - 60px); float:right; margin:10px; border-bottom: 1px solid #ededed; background-color: #f8f8f8; padding: 20px; font-size: 12px; display: block; overflow: hidden; text-decoration: none; }
}
.DonateTableTd span{ color:#773cbe; font-weight: 700; padding-left: 10px;  }
.DonateForm{ width:100%; max-width: 700px; }