﻿/** Ramadan Header **/
.ramadanHeader { display: inline-block; float: right; width: 100%; height: 200px; position: relative; margin-bottom: 40px; overflow: hidden; }
.ramadanHeader .RSide{display:inline-block;float:right;}
.ramadanHeader .RSide p{display:inline-block;float:right;line-height:156px;font-family:AllGenderBold , Arial;font-size:48px;margin-left:10px;margin-right: 40px;}
.ramadanHeader .RSide img{display:inline-block;float:right;height:auto;    margin: 34px 0;}
.ramadanHeader .LSide{display:inline-block;float:left;width:400px;height:calc(100% - 44px)}
.ramadanHeader .LSide img{display:inline-block;width:auto;height:100%;float:left}
.ramadanHeader .headerMenu { position: absolute; bottom: 0; width: 100%; height: 44px; background-color:rgba(40, 11, 75, .8);}
.ramadanHeader .headerMenu li { display: inline-block; float: right; position: relative; float: right; width: auto; height: 44px; }
.ramadanHeader .headerMenu li:last-child { margin-left: 0 }
.ramadanHeader .headerMenu li a { display: inline-block; width: auto; height: 100%; float: right; color: #fff;  font-size: 14px; line-height: 44px; padding: 0 22px; }
.ramadanHeader .headerMenu li a:hover{color: #F19B06;}
 .ramadanHeader .headerMenu li a.select { font-family:DroidKufiBold, Arial }
.regBtn.regBtnHeader{display:none}
#quizbtnLogin{display:inline-block}
.alarabiSponser{display:inline-block;position:absolute;width:210px;top: 50px;left:500px}
.alarabiSponser img{display:inline-block;width:100%;height:auto}



/*

.ramadanHeader a.regBtn{display: inline-block;width: 145px;height: 40px;float: left;margin-top: 15px;margin-left:15px;background-color: #160343;font-family: DroidKufiLight, Arial;font-size: 16px;font-weight: 400;color: #fff;text-align: center;line-height: 40px;border:1px solid #fff}
.ramadanHeader a.regBtn p{text-align:center;display:inline-block;}
.ramadanHeader a.regBtn.userLogin{background-color:transparent;border:0;width:auto;height:auto;z-index:2;position:relative}
.ramadanHeader a.regBtn.userLogin .usericon{display:inline-block;width:42px;height:42px;border-radius:50%;background-color:#160343;border:1px solid #c6afcc;float:left;position:relative;overflow:hidden}
.ramadanHeader a.regBtn.userLogin .usericon.noImg:before{content:'<';position:absolute;font-size:30px;bottom:0;left:50%;transform:translateX(-50%);line-height:1;color:#c6afcc}
.ramadanHeader a.regBtn.userLogin .usericon img{display: inline-block;float: left;position: absolute;left: 0;top: 0;z-index: 2;width: 42px;height: auto;}
.ramadanHeader a.regBtn.userLogin p{float:left;margin-left:10px}
.ramadanHeader .regBtn p.logout{display:none}


.findLogo{position:absolute;z-index:3}
.findLogoHint{DISPLAY: none;position: fixed;width: 100%;height: 100%;top:0;right:0;background-color: rgba(0,0,0,.5);z-index: 4;opacity:0;visibility:hidden;
               -webkit-transition: width 0.2s, -webkit-transform 0.2s; -moz-transition: width 0.2s, -moz-transform 0.2s; transition: width 0.2s, transform 0.2s;}
.regBtn .textHint{display:inline-block;position:absolute;width:300px;height:50px;background-color:#fff;padding:0 10px;border:1px solid #160343; left: -8px;top: 60px;opacity:0;visibility:hidden}
.regBtn .textHint:before{content:'';  width: 0;  height: 0;      border-left: 12px solid transparent;border-right: 12px solid transparent;border-bottom: 15px solid #fff;position: absolute;top: -15px;left: 15px;}
.regBtn .textHint p{display:inline-block;width:100%;text-align:center;color:#000;font-size:16px;font-weight:400;line-height:50px}
.show .findLogoHint{display:inline-block}

.show .findLogoHint{opacity:1;visibility:visible}
.show .ramadanHeader a.regBtn.userLogin{z-index:5}
.show .textHint{visibility:visible;opacity:1}
.hintMessage .rules{    display: inline-block;
    width: 100%;
    float: right;
    font-family: DroidKufiLight, Arial;
    font-size: 16px;
    color: #FFE440;text-align:center}
.hintMessage .rules, .rulesPopupHint{display:none}
 .firstScreen .rules, .firstScreen .rulesPopupHint{display:inline-block}
.firstScreen .hintMessage{height:102px}

 
.openRulesPopupHint .rulesPopupHint{visibility:visible;opacity:1}
.openRulesPopupHint.ItemListing:hover{transform:none}
.rulesPopupHint{position:fixed;display:inline-block;width:100%;height:100%;top: 0;right: 0;bottom: 0;left: 0;z-index:9999999999;opacity: 0;visibility: hidden}
.rulesPopupHint:before{position: absolute;top: 0;left: 0;z-index: 3;width: 100%;height: 100%;background: rgba(0,0,0,0.8);content: '';
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transition: opacity 0.3s, -webkit-transform 0s 0.3s;
    transition: opacity 0.3s, transform 0s 0.3s;}
.rulesPopupHint .ruleBox{display:inline-block;position:absolute;width:900px;height:auto;background-color:#F4E0CE;left:50%;transform:translate(-50% , -50%);top:50%;padding: 20px 60px 40px; max-height: 440px;overflow-y:auto;z-index:4}
.rulesPopupHint .ruleBox:before{content:'';position:absolute;background:url(../Images/ramdan24/objectRight.png) right bottom no-repeat;bottom:0;right:0;width:50%;height:100%;background-size:100% auto;pointer-events:none}
.rulesPopupHint .ruleBox:after{content:'';position:absolute;background:url(../Images/ramdan24/objectRight.png) left top no-repeat;top:0;left:0;width:50%;height:100%;background-size:100% auto;transform:rotateX(3.142rad) rotateY(180deg);pointer-events:none}
.rulesPopupHint .ruleBox .closeRulesHint{display:inline-block;position:absolute;top:20px;left:15px;width:15px;height:20px;z-index:2;right:auto;background-color:unset!important}
.rulesPopupHint .ruleBox .closeRulesHint:before{content:'O';position:absolute;top:0;left:0;font-size:19px;color:#000;font-weight:bold;line-height:1}
.rulesPopupHint .ruleBox .title{display:inline-block;float:left;width:100%;}
.rulesPopupHint .ruleBox span{display:inline-block;color:#330D46;font-size:24px;text-align:center;font-family:DroidKufiBold, Arial ;margin:25px 0 15px ;width:100%}
.rulesPopupHint .ruleBox ul{display:inline-block;float:right;width:100%;margin-top:15px;}
.rulesPopupHint .ruleBox ul li{display:list-item;float:right;width:100%;background-color:transparent;font-family:DroidKufiLight, Arial;font-size:18px;color:#000;border:0;margin-bottom:10px; list-style-type: disc;list-style-position:inside;overflow:visible}
.rulesPopupHint .ruleBox ul li::marker{font-size:15px}


 .random-div {    position: absolute; cursor: pointer;transition: all 0.10s ease;z-index:3;animation: pulse 2s infinite;border-radius:50%}
  #ramadanHeader{    position: relative; float:left;   width: 1px; height: 1px;width:100%}
  @keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}*/

@media screen and (min-width:1680px) and (max-width:1919px) {
        .ramadanHeader .headerMenu li a { padding: 0 16px }
        .alarabiSponser{left:460px}
}

@media screen and (min-width:1600px) and (max-width:1679px) {
    .ramadanHeader .headerMenu li a { padding: 0 16px }
    .alarabiSponser{left:460px}
}

@media screen and (min-width:1536px) and (max-width:1599px) {
        .ramadanHeader .headerMenu li a { padding: 0 16px }
        .alarabiSponser{left:460px}
}

@media screen and (min-width:1440px) and (max-width:1535px) {
            .ramadanHeader .headerMenu li a { padding: 0 16px }
            .alarabiSponser{left:460px}
}

@media screen and (min-width:1360px) and (max-width:1439px) {
        .ramadanHeader .headerMenu li a { padding: 0 16px }
        .ramadanHeader .RSide p{font-size:44px}
         .ramadanHeader .RSide img { width: 40px !important;  margin: 55px 0;}
          .ramadanHeader .RSide.emsakyah img { width: 52px !important;}
          .alarabiSponser{left:460px}
}

@media screen and (min-width:1280px) and (max-width:1359px) {
        .ramadanHeader .headerMenu li a { padding: 0 13px; font-size: 13px; }
    .buttonsBox .rules{font-size:13PX}
 
    .ramadanHeader a.regBtn{width: 140px;height: 38px;line-height: 38px;font-size:14px}
    .ramadanHeader a.regBtn.userLogin .usericon{width:35px;height:35px}
    .ramadanHeader a.regBtn.userLogin .usericon:before{font-size:26px}

       .regBtn .textHint{    width: 250px;height: 40px;top:51px}
    .regBtn .textHint p{    font-size: 14px;line-height: 40px;}
    .ramadanHeader .RSide p{font-size:44px}
    .ramadanHeader .RSide img { width: 40px !important;  margin: 55px 0;}

     .ramadanHeader .RSide.emsakyah img { width: 52px !important;    margin: 50px 0;}
     .alarabiSponser{left:410px}
}

@media screen and (min-width:1152px) and (max-width:1279px) {
        .ramadanHeader .headerMenu li a { padding: 0 7px; font-size: 12px; }
    .ramadanHeader .headerMenu ul li a::-webkit-scrollbar { display: none; }
          .buttonsBox .rules{font-size:13PX}

    .ramadanHeader a.regBtn{width: 140px;height: 38px;line-height: 38px;font-size:14px}
    .ramadanHeader a.regBtn.userLogin .usericon{width:35px;height:35px}
    .ramadanHeader a.regBtn.userLogin .usericon:before{font-size:26px}

       .regBtn .textHint{    width: 250px;height: 40px;top:51px}
    .regBtn .textHint p{    font-size: 14px;line-height: 40px;}

    .ramadanHeader .RSide p{font-size:34px;margin-right:10px}
    .ramadanHeader .RSide img { width: 66px!important;}

    .ramadanHeader .RSide.tvguide p{font-size:26px;margin-left:20px}
    .ramadanHeader .RSide.tvguide img{width:58px!important;margin: 18px 0;}

    .ramadanHeader .RSide.drama p{margin-left:20px}
    .ramadanHeader .RSide.drama img{width:46px!important;margin: 54px 0;}

      .ramadanHeader .RSide.sofra p{margin-left:20px}
    .ramadanHeader .RSide.sofra img{width:46px!important;margin: 58px 0;}

     .ramadanHeader .RSide.trivia p{margin-left:20px}
    .ramadanHeader .RSide.trivia img{width: 60px !important;    margin: 64px 0;}

           .ramadanHeader .RSide.zakah p{margin-left:20px}
        .ramadanHeader .RSide.zakah img{ width: 35px !important;margin: 58px 0;}

        .ramadanHeader .RSide.donation p{    margin-left: 22px;}
        .ramadanHeader .RSide.donation img {width: 35px !important; margin: 62px 0;}

        .ramadanHeader .RSide.survery p{    margin-left: 22px;}
        .ramadanHeader .RSide.survery img { width: 35px !important;margin: 58px 0;}

             .ramadanHeader .RSide.emsakyah img { width: 52px !important;    margin: 50px 0;}
   .alarabiSponser{width: 156px; left: 400px;}

}

@media screen and (min-width:1024px) and (max-width:1151px) {
        .ramadanHeader .headerMenu li a { padding: 0 12px; font-size: 14px }
     .buttonsBox .rules{font-size:13PX}

    .ramadanHeader a.regBtn{width: 140px;height: 38px;line-height: 38px;font-size:14px}
    .ramadanHeader a.regBtn.userLogin .usericon{width:35px;height:35px}
    .ramadanHeader a.regBtn.userLogin .usericon:before{font-size:26px}
        .ramadanHeader .headerMenu ul li a { font-size: 12px; padding: 0px 7px; }

           .ramadanHeader .RSide p{font-size:34px;margin-right:10px}
    .ramadanHeader .RSide img { width: 66px!important;}
    
    .ramadanHeader .RSide.tvguide p{font-size:26px;margin-left:20px}
    .ramadanHeader .RSide.tvguide img{width:58px!important;margin: 18px 0;}

    .ramadanHeader .RSide.drama p{margin-left:20px}
    .ramadanHeader .RSide.drama img{width:46px!important;margin: 54px 0;}

          .ramadanHeader .RSide.sofra p{margin-left:20px}
    .ramadanHeader .RSide.sofra img{width:46px!important;margin: 58px 0;}

     .ramadanHeader .RSide.trivia p{margin-left:20px}
 .ramadanHeader .RSide.trivia img{width: 60px !important;    margin: 64px 0;}

        .ramadanHeader .RSide.zakah p{margin-left:20px}
.ramadanHeader .RSide.zakah img{ width: 35px !important;margin: 58px 0;}

   .ramadanHeader .RSide.donation p{    margin-left: 22px;}
        .ramadanHeader .RSide.donation img {width: 35px !important; margin: 62px 0;}

        
        .ramadanHeader .RSide.survery p{    margin-left: 22px;}
        .ramadanHeader .RSide.survery img { width: 35px !important;margin: 58px 0;}

             .ramadanHeader .RSide.emsakyah img { width: 52px !important;    margin: 50px 0;}
   .alarabiSponser{width: 156px; left: 400px;}

}

@media only screen and (max-width: 1023px) {
         .buttonsBox .rules{font-size:13PX}

    .ramadanHeader a.regBtn{width: 108px;height: 32px;line-height: 32px;font-size:13px;margin-top: 10px;margin-left: 10px;}
    .ramadanHeader a.regBtn.userLogin .usericon{width:35px;height:35px}
    .ramadanHeader a.regBtn.userLogin .usericon:before{font-size:26px}

     .ramadanHeader { height: 140px; margin-bottom: 30px; }
    .thanawia{background:url(../Images/Thanawya/thanawiaamma200.png)  top 5px center no-repeat #b6b5b3;background-size:100%}
    /*  .ramadanHeader:before{background: url(../Images/Rampattern.png); background-size: cover;}*/
    .RHeaderLogo { background: url(../Images/Ramlogo.png) top 24px right 24px no-repeat; background-size: 120px auto; }
    /* .ramadanHeader:before {background: url(../Images/ramadanPatternBG.png?ref=0.1) top -14px right repeat;background-size: 60px auto;}*/
    /* .ramadanHeader:after {
            background: url(../Images/Ramlogo.png) top 14px right 16px no-repeat, url(../Images/RamVector.png) top 14px left 10px no-repeat;
            background-size: 120px auto, 34px auto;
        }*/
    .ramadanHeader .headerMenu { padding: 0 0 }
    .ramadanHeader .headerMenu ul { column-count: unset; column-gap: unset; -moz-column-count: unset; -moz-column-gap: unset; -webkit-column-count: unset; -webkit-column-gap: unset; -o-column-count: unset; -o-column-gap: unset; -ms-column-count: unset; -ms-column-gap: unset; display: inline-block; float: right; width: 100%; white-space: nowrap; overflow-x: auto; overflow-y: hidden; z-index: 0; -webkit-overflow-scrolling: touch; -webkit-transform: translateZ(0); transform: translateZ(0); }
    .ramadanHeader .headerMenu ul li { position: relative; display: inline-block; float: right; width: 100%; -moz-page-break-inside: avoid; -webkit-column-break-inside: avoid; break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; page-break-inside: avoid; float: none; width: auto; margin: 0; }
    .ramadanHeader .headerMenu ul li a { font-size: 11px; padding: 0px 6px; }

       .ramadanHeader .RSide p{font-size:31px;line-height: 96px;margin-right:10px}
    .ramadanHeader .RSide img { width: 66px!important;margin:10px 0}

    
    .ramadanHeader .RSide.tvguide p{font-size:26px;margin-left:20px}
    .ramadanHeader .RSide.tvguide img{width:58px!important;margin: 18px 0;}

    .ramadanHeader .RSide.drama p{margin-left:20px}
    .ramadanHeader .RSide.drama img{width:46px!important;margin: 26px 0;}

         .ramadanHeader .RSide.sofra p{margin-left:20px}
    .ramadanHeader .RSide.sofra img{width:46px!important;margin: 30px 0;}

          .ramadanHeader .RSide.news p{margin-left:20px}
    .ramadanHeader .RSide.news img{margin: 24px 0;}

    .ramadanHeader .RSide.style img {margin: 10px 0;}

    .ramadanHeader .RSide.islamic img {  width: 58px !important;  margin: 28px 0;}

     .ramadanHeader .RSide.feeling p{margin-left:20px}
    .ramadanHeader .RSide.feeling img{width: 32px !important; margin: 28px 0;}

      .ramadanHeader .RSide.donation p{margin-left:20px}
    .ramadanHeader .RSide.donation img{width: 32px !important;    margin: 32px 0;}

    
        .ramadanHeader .RSide.survery p{    margin-left: 20px;}
        .ramadanHeader .RSide.survery img { width: 32px !important;margin: 30px 0;}

       .ramadanHeader .RSide.trivia p{margin-left:20px}
 .ramadanHeader .RSide.trivia img{width: 60px !important;    margin: 35px  0;}


        .ramadanHeader .RSide.zakah p{margin-left:20px}
 .ramadanHeader .RSide.zakah img{width: 31px !important;  margin: 29px 0;}
      .ramadanHeader .RSide.emsakyah img { width: 52px !important;    margin: 27px 0;}

 .alarabiSponser{width: 156px; left:280px;top:20px}
}


@media screen and (min-width: 320px) and (max-width: 767px) {
         .ramadanHeader a.regBtn { width: 75px; height: 26px;line-height: 26px; font-size: 10px; margin-top: 6px;margin-left: 6px;}
      .ramadanHeader a.regBtn.userLogin .usericon{width:30px;height:30px}
    .ramadanHeader a.regBtn.userLogin .usericon:before{font-size:22px}
        .ramadanHeader .headerMenu ul li a { font-size: 12px; padding: 0px 10px; }

           .ramadanHeader .RSide p{margin-right:10px;line-height:96px;margin-left:0}
   .ramadanHeader .RSide img{width:33px!important; margin: 28px 0 0;}
   .ramadanHeader .LSide{width:144px}

   .ramadanHeader .RSide.emsakyah p{margin-left:10px;font-size: 25px;}
   .ramadanHeader .RSide.emsakyah img{width:43px!important}

            .ramadanHeader .RSide.tvguide{width:156px;margin-top: 26px;}
    .ramadanHeader .RSide.tvguide p{font-size:26px;margin-left:16px;line-height:1}
    .ramadanHeader .RSide.tvguide img{width:29px!important;margin: -16px 0 8px 0;}

    .ramadanHeader .RSide.drama img{width:33px!important}
     .ramadanHeader .RSide.drama p {  margin-left: 15px; }

    .ramadanHeader .RSide.news img{width:32px!important;}

     .ramadanHeader .RSide.sofra img{width:46px!important;    margin: 28px 0;}
     .ramadanHeader .RSide.sofra p {  margin-left: 15px; }

        .ramadanHeader .RSide.style p { font-size: 30px;    margin-left: 10px;}
       .ramadanHeader .RSide.style img{width:22px!important;        margin: 24px 0;}

       .ramadanHeader .RSide.islamic p {margin-left: 18px;}
    .ramadanHeader .RSide.islamic img {  width: 33px !important;margin:34px 0}

  .ramadanHeader .RSide.feeling{width:156px;margin-top: 22px;position:relative}
    .ramadanHeader .RSide.feeling p{font-size:26px;margin-left:16px;line-height:1.3}
    .ramadanHeader .RSide.feeling img{width:29px!important;margin: 0;position: absolute;  top: 50%; transform: translateY(-50%);left: 8px;}

   .ramadanHeader .RSide.trivia p{margin-left:20px; line-height: 65px;   font-size: 30px;}
    .ramadanHeader .RSide.trivia img{width: 48px !important;  margin: 23px 0;}
    .ramadanHeader .RSide.trivia  .alarabiSponser {  width: 107px;  left: auto;  right: 10px;  top: auto; bottom: 50px; }
     .ramadanHeader .RSide.trivia   .alarabiSponser img{width:100%!important;margin:0}


    .ramadanHeader .RSide.zakah{width:156px;margin-top: 22px;position:relative}
    .ramadanHeader .RSide.zakah p{font-size:26px;margin-left:16px;line-height:1.3}
    .ramadanHeader .RSide.zakah img{width:33px!important;margin: 0;position: absolute;  top: 50%;  transform: translateY(-50%); right: 95px;}

      
}

@media screen and (max-width:767px) and (orientation:portrait) {
        .ramadanHeader { margin-bottom: 30px; }

}


@media screen and (min-width:1360px) and (max-width:1919px) {
  .ramadanHeader{background:url(../Images/ramdan24/masrawyhelal.png) top 10px right 10px no-repeat, url(../Images/ramdan24/ramdanDesk.jpg) top -42px center no-repeat;background-size:3%,100%}
  .ramadanHeader:before{width:245px;height:135px;left:150px}
  .ramadanHeader:after{width:330px;height:53px;right:175px}
  }

@media screen and (min-width:1280px) and (max-width:1359px) {
  .ramadanHeader{background:url(../Images/ramdan24/masrawyhelal.png) top 10px right 10px no-repeat, url(../Images/ramdan24/ramdanDesk.jpg) top -35px center no-repeat;background-size:3%,100%}
  .ramadanHeader:before{width:225px;height:124px;left:130px}
  .ramadanHeader:after{width:310px;height:49px;right:155px}
  }


@media screen  and (min-width: 1024px) and (max-width: 1279px){
  .ramadanHeader{background:url(../Images/ramdan24/masrawyhelal.png) top 10px right 10px no-repeat, url(../Images/ramdan24/ramdanDesk.jpg) top 3px center no-repeat;background-size:3%,100%}
  .ramadanHeader:before{width:208px;height:114px;left:116px}
  .ramadanHeader:after{width:255px;height:40px;right:105px}  
.thanawia{background:url(../Images/Thanawya/thanawiaamma200.png)  top 40px center no-repeat #b6b5b3;background-size:100%}
}
@media screen and (min-width:768px) and (max-width:1023px) {
/*    .ramadanHeader { background: url(../Images/RamdanGround.webp) top -84px left 0px no-repeat; background-size: auto; height: 140px; margin-bottom: 30px; }
    .ramadanHeader:before { background: url(../Images/starRight.webp)top 0px right -48px no-repeat; background-size: 145px auto; }
    .RHeaderLogo { background: url(../Images/Ramlogo.webp) top 22px right 80px no-repeat; background-size: 120px auto; }
    .ramadanHeader::after { background: url(../Images/starLeft.webp) bottom 44px left -18px no-repeat; background-size: 140px auto; }*/

.ramadanHeader{background:url(../Images/ramdan24/masrawyhelal.png) top 10px right 10px no-repeat, url(../Images/ramdan24/ramdanDesk.jpg) top -35px center no-repeat;background-size:3%,100%}
  .ramadanHeader:before{width:145px;height:80px;left:116px}
  .ramadanHeader:after{width:228px;height:36px;right:122px;top:48px}  
}
@media screen and (min-width:500px) and (max-width:767px) {
    /*.ramadanHeader { background: url(../Images/RamdanGround.webp) top 0px left 0px no-repeat; background-size: 750px auto; height: 140px; margin-bottom: 30px; }
    .ramadanHeader:before { background: url(../Images/starRight.webp)top 0px right -48px no-repeat; background-size: 125px auto; }
    .RHeaderLogo {*/ /*  background: url(../Images/Ramlogo.webp) top 24px right 50px no-repeat;
        background-size: 90px auto;*/ /*background: url(../Images/Ramlogo.webp) top 28px right 80px no-repeat; background-size: 90px auto; } 
    .ramadanHeader::after { background: url(../Images/starLeft.webp) bottom 44px left -15px no-repeat; background-size: 110px auto; }*/
                         .thanawia{background:url(../Images/Thanawya/thanawiaammaMobb.png)  top 50% center no-repeat #b6b5b3;background-size:100% auto;}

}
@media screen and (min-width:320px) and (max-width:767px) {
    /*.ramadanHeader:before { background: url(../Images/starRight.webp)top 0px right -27px no-repeat; background-size: 88px auto; }
    .RHeaderLogo {*/ /*  background: url(../Images/Ramlogo.webp) top 24px right 50px no-repeat;
        background-size: 90px auto;*/ /*background: url(../Images/Ramlogo.webp) top 28px right 52px no-repeat; background-size: 85px auto; }
    .ramadanHeader { background: url(../Images/RamdanGround.webp) top 0px left -100px no-repeat; background-size: 700px auto; height: 140px; margin-bottom: 30px; }
    .ramadanHeader::after { background: url(../Images/starLeft.webp) top 15px left 0px no-repeat; background-size: 80px auto; }*/

   .ramadanHeader{    background: url(../Images/ramdan24/masrawyhelal.png) top 10px right 10px no-repeat, url(../Images/ramdan24/masrawyMob.jpg) top right -32px no-repeat;
    background-size: 6%,160%;}
   .ramadanHeader:before{left:50%;transform:translateX(-50%);height:90px;width:163px}
   .ramadanHeader:after{top: 45px;left: 50%;transform: translateX(-50%);width: 172px;height: 24px;right:auto;background:url(../Images/ramdan24/ramdankmasMob.png) center center no-repeat;background-size:100%}

}