@import url('https://fonts.googleapis.com/css2?family=Almarai&display=swap');
body{ 
	font-weight:bold; 
	padding:0px;
	 margin:0; 
	  background:#F2F2F2;
	  font-family: 'Almarai', sans-serif;

}
::-webkit-scrollbar {
    display: none;
}

body input + label {
  position: fixed;
  top: 10px;
  right: 20px;
  height: 20px;
  width: 20px;
  z-index: 4;
}
body input + label span {
  position: absolute;
  width: 100%;
  height: 2px;
  top: 50%;
  margin-top: -1px;
  left: 0;
  display: block;
  background: #ffffff;
  transition: 0.5s;
}
body input + label span:first-child {
  top: 3px;
}
body input + label span:last-child {
  top: 16px;
}
body label:hover {
  cursor: pointer;
}
body input:checked + label span {
  opacity: 0;
  top: 50%;
}
body input:checked + label span:first-child {
  opacity: 1;
  transform: rotate(405deg);
}
body input:checked + label span:last-child {
  opacity: 1;
  transform: rotate(-405deg);
}
body input ~ nav {
  background: #5c1b77;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  z-index: 3;
  transition: 0.2s;
  transition-delay: 0.2s;
  overflow: scroll;
  
  

}
body input ~ nav > ul {
  text-align: center;
  position: absolute;
  top: 6%;
  
  list-style-type: none;
  width: 90%;

}
body input ~ nav > ul > li {
  opacity: 0;
  transition: 0.2s;
  transition-delay: 0s;
  	background:#6c3184;
	color:#fff;
	border-bottom:2px solid #bdc3c7;
  padding: 10px;


}
body input ~ nav > ul > li > a {
  color: #ffffff;

  font-weight: 600;
font-family: 'Cairo', sans-serif;
display: block;
    padding: 10px;

}
body input:checked ~ nav {
  height: 100%;
  transition-delay: 0s;
}
body input:checked ~ nav > ul > li {
  opacity: 1;
  transition-delay: 0.2s;
}
*{
    box-sizing: border-box;
    line-height:1.9;
    font-size:16px;

}
.flex-row {
    -webkit-flex-direction: row;
    -webkit-flex-wrap: wrap;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap
}

.flex-row-center {
    justify-content: center
}

a{
    text-decoration: none;
    color:#ffffff;
}

a:hover{
	color:#ffffff;
}
input{ border: 2px solid #dcdcdc; text-align:center; margin-top:6px;  margin-bottom:6px;  width:100%; max-width:200px; font-size: 16px;}

input[type='radio'] , input[type='checkboxx']{
   width:auto;
}

textarea { border: 2px solid #dcdcdc;}
select{ height:40px;  padding:5px;  margin-top:6px;  margin-bottom:6px; font-size: 16px;  border: 2px solid #dcdcdc; color:#000; background-color: #fff; }

/* For Firefox */
input[type='number'] {
    -moz-appearance:textfield;
}
/* Webkit browsers like Safari and Chrome */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}



footer{
    clear: both;
    position: relative;
background:#5c1b77;
color:#fff;
padding:5px;
border-top:4px solid #bdc3c7;
margin-bottom:0px;

}

.wrapper{
	margin:auto;
	max-width:1080px;

}

.wrapper1{
	margin:auto;
	max-width:1080px;
padding: 10px;

}

footer a{ color:#fff;}


.text-center{
	text-align:center;
}
.text-large{
    font-size: 36px;
}


.text-red{
color:red;
}

.text-note{
    border-right:6px solid #939ca3;
    background:#f2f3f4;
    padding:8px;
    display:inline-block;
    color:#4f585d;

}

h2{
    font-size:20px;
    padding:0;
    margin:0;
	color:#5c1b77;
	  text-align: center;

    
}
.box{
background:#fff;
padding:20px 15px;
 


 }
.box hr{
    border:1px solid #e8e8e8;
}

.box img{
max-width:100%;
}

.box-promote{
    background:#2C3E4F;
    margin:10px 5px;
    padding:10px 5px;
    border:1px solid #D6D6D6;
}

.box-promote-green{
    background:#edfbf3;
    margin:10px 5px;
    padding:10px 5px;
    box-shadow: 0px 0px 2px #208e4e;
}
.box-promote-green h2{
    color:#208e4e;
	
}

.box-ad{
padding: 0px!important;

 }
 
 
.result{
    color:#27ae60;
}

.ads{
    height: 300px;
}

@media only screen and (min-width:1px) and (max-width:479px) {
    .sc-show {
        display: block
    }
    .sc-hide {
        display: none
    }
    
    aside{
    	width:100%;
    }
    main{
    	width:100%;
        margin-top:58px;

    }
    
        .box{
 		margin:0px 0px 10px 0px;
    }    
       .menu-content {
    	margin:0px 0px 10px 0px;
    }

}

@media only screen and (min-width:480px) and (max-width:1023px) {

    .mc-show {
        display: block
    }
    .mc-hide {
        display: none
    }
    
    
        aside{
    	width:35%;
    	padding-right:20px;
            margin-top:78px;

        }
    main{
    	width:65%;
        margin-top:78px;
    }
    header{
    	margin-bottom:30px;
    }
    .box{
    	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    	margin:0px 0px 30px 0px;
    }
    
    .menu-content {
    	margin:0px 0px 30px 0px;
    }
}

@media only screen and (min-width:1024px) {

    .lc-show {
        display: block
    }
    .lc-hide {
        display: none
    }
    
     aside{
    width:30%;
    padding-right:20px;
         margin-top:78px;

     }
    main{
   width:70%;
        margin-top:78px;

    }
         header{
    	margin-bottom:30px;
    }
        .box{
    	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
		margin:0px 0px 30px 0px;
    }
    
    .menu-content {
    	margin:0px 0px 30px 0px;
    }

    .social-buttons{
    margin-bottom:0px;
    }

}


.menu-content {
	background:#77219c;
	

}
.menu-content a{
	display:block;
	border-bottom:2px solid #FFF;
	padding:12px 10px;
    font-size: 18px;

}
.menu-content a:nth-child(odd){
    background:#8210b3;

}

.menu-content a:hover{
	background:#782b99;

}

.menu-content h2 {
	
	background:#5c1b77;
	color:#fff;
 	padding:10px;
	border-bottom:4px solid #bdc3c7;

	 }

.table_a {width:100%;}
.table_a td{padding:6px 4px;transition:border-bottom 0.3s linear;border-top:3px solid transparent;border-bottom:3px solid transparent;}
.table_a tr:hover > td{border-bottom:3px solid #5c1b77;}
.table_a tr:nth-child(even){background-color:#f0f0f0;}
.table_a tr:nth-child(odd){background-color:#e6e6e6;}
.table_a tr.warm{background-color:#ffc3b1;}
.table_a tr.success{background-color:#cdf4dd;}
.table_a td.warm{background-color:#ffc3b1;}
.table_a td.success{background-color:#cdf4dd;}
.table_a tr th{background-color:#5c1b77;color:#fff;padding:8px 4px;}
.table_a tr th a{color:#ffffff;}
.table_a .thumb-imgae{margin:0 4px;width:40px;height:30px;float:right;}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.center-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
.responsive {
  width: 100%;
  height: auto;
}

#timer2 {
  display: flex;
  justify-content: center;
  text-align: center;
  margin: 2px;
  padding:5px;
direction: ltr;
}
#timer {
  display: flex;
  justify-content: center;
  text-align: center;
  margin: 2px;
  padding:5px;
direction: ltr;
}
.wmadaat{text-align: center;background:
#fff;
box-shadow: 0px 1px 14px -3px;
border-radius: 2px;padding: 2px;}
svg{width: 200px;}
@media only screen and (max-width: 600px) {

.number{
  padding: 10px;font-size: 50px;background:#5c1b77;color:#fff;
margin: 3px;
border-radius: 8px;
}
}
@media only screen and (max-width: 281px) {

.number{
  padding: 10px;font-size: 20px;background:#5c1b77;color:#fff;
margin: 3px;
border-radius: 8px;
}
}

@media only screen and (min-width: 601px) {
.number{
  padding: 10px;font-size: 100px;background:#5c1b77;color:#fff;
margin: 3px;
border-radius: 8px;
}
}

.labels{background:#5c1b77;
color:#fff;
border-radius: 2px;
margin: 2px;}
      .button {
        background-color: #909ea6;
        -webkit-border-radius: 60px;
        width: 300px;
        border-radius: 7px;
        border: none;
        color: #eeeeee;
        cursor: pointer;
        display: inline-block;
        font-size: 20px;
        padding: 10px ;
        text-align: center;
        text-decoration: none;
      }
      @keyframes glowing {
        0% {
          background-color: #674EA7;
          box-shadow: 0 0 5px #a29bfe;
        }
        50% {
          background-color: #674EA7;
          box-shadow: 0 0 20px #a29bfe;
        }
        100% {
          background-color: #674EA7;
          box-shadow: 0 0 5px #a29bfe;
        }
      }
      .button {
        animation: glowing 1300ms infinite;
      }
	  
	  
.header {
  display: flex;
justify-content: space-between;
background-color: #5c1b77;
  color: #fff;
  width: 100%;
  overflow: hidden;
  text-align:center;

}
.header1 {
  display: flex;
justify-content: center;
background-color: #fff;
  color: #5c1b77;
  width: 100%;
  overflow: hidden;
  text-align:center;

}


h1 {
  text-align: center;
      font-size:20px;
    padding:0;
    margin:0;

}
.logo-container {
  padding: 10px 10px;
  margin: auto 0;

}
img.center{
    text-align:center;
    margin: 0 auto;
    padding:0px;
}


h3 {
  margin: 0;
}

.nav-items {
  display: flex;
  justify-content: space-around;
  margin: 10px 20px;
  
}

.nav {
  margin: auto 30px;
 
}

.nav-close,
.menu-icon {
  display: none;

}

@media only screen and (max-width: 4000px) {
  .nav-items {
    position: absolute;
    top: 0;
    right: -100%;
    display: block;
    background-color: #5c1b77;
    margin: 0;
    height: 100%;
    box-shadow: -1px -1px 8px #3e3e3e99;
    width: 250px;
    transition: all 0.8s ease;
      z-index:100;


  }
  .show-nav{
    right: 0;
      z-index:100;


  }
  .nav-close {
    display: block;
    font-size: 30px;
    text-align: right;
    padding: 10px 30px;
    margin-bottom: 20px;
    cursor: pointer;
    z-index:100;

  }

  .nav {
    text-align: center;
    margin: 20px auto;
      z-index:100;
	  

  }

  .menu-icon{
    display: block;
    margin: auto 0;
    padding: 0 20px;
    font-size: 30px;
    cursor: pointer;
	
  }
}
.wrapper2{
	margin:auto;
	max-width:1080px;
padding: 10px;
height: 50px;
  }


.module {
  width: 300px;
  height: 80px;
  position: relative;
  margin: auto;
  border-radius: 3px;
  padding: 20px;
  box-sizing: padding-box;
  position: relative;
  border-right: 1px solid #5c1b77;
  border-bottom: 1px solid #5c1b77;
  border-left: 1px solid #5c1b77;
}

.module__top {
  cursor: auto;
  display: flex;
  flex-direction: row;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  
  &:before {
    border-radius: 3px 0 0 0;
    display: block;
    content: "";
    flex: 2 0 0;
    height: 1px;
    border-top: 1px solid #5c1b77;
  }
  &:after {
    border-radius: 0 3px 0 0;
    display: block;
    content: "";
    flex: 2 0 0;
    height: 1px;
    border-top: 1px solid #5c1b77;
  }
}

.top__content {
  height: 40px;
  color: #5c1b77;

font-size:23px;
  font-weight: bold;
  overflow: hidden;
  flex: 0 0 200px;
  margin-top: -30px;
  text-align: center;
}

.module__contents {
  background: #5c1b77;
  height: 100%;
  width: 100%;
  color: #ffff;
  text-align: center;
}
div1 {
  background-color: #fff;
}

/* customizable snowflake styling */
.snowflake {
  color: #fff;
  font-size: 1em;
  text-shadow: 0 0 1px #000;
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}
/* Demo Purpose Only*/
.share-icon{
    position: fixed;
    background: #674EA7;
    color:#fff;
    height: 40px;
    left:12px;
    bottom:40px;
    border-radius:20px;
    cursor: pointer;
    z-index: 1;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

}
.share-icon img{
    margin: 8px;
    width: 24px;
    height: 24px;
    filter: invert(1);
}