/*    للهاتف فقط من حتي 1000بيكسل */
@media screen  and (max-width:800px) {

body{
font-family:'Cairo', sans-serif;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    z-index: -2;
}




/*اعدادات عامة*/

.yes-pay-new{
  background-color: white;
  position: absolute;
  padding-top: 100px;
  top: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 20px;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;
}

.yes-pay-new img{
  width: 40%;
  
}



.yes-pay-new button{
  display: block;
  width: 80%;
  margin-left: 10%;
  background-color: rgb(57, 69, 241);
  color: white;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding: 10px;
  font-size: 15px;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;

}










/*الصفحة العلوية*/


.boot-nwe{
  padding: 5px;
  border-radius: 15px;
  background-color: red;
  display: inline;
  color: white;
}

header{
    z-index: 2;
    top: 0px;
    position: fixed;
    padding: 0;
    background-color: rgb(2, 22, 65);
    width: 100%;
    display: flex;
    height: 60px;
}

header .loogo-img button{
border: none;
background-color: rgba(127, 255, 212, 0);
}


header .loogo-img button p{
    position: relative;
    margin-top: -7px;
    font-size: 13px;
    background-color: navy;
    color: white;
    padding: 1px;
    border-radius: 8px;
}

header .loogo-img button #no{
    position: relative;
    margin-top: -5px;
    font-size: 13px;
    background-color: black;
    color: white;
    padding: 3px;
    border-radius: 8px;
}





header .loogo-img img{
    width: 80px;
    height: 80px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0);
    border-width: 1px;
    border-radius: 50%;
}


.atop{
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 0px;
    background-color: #ffffff;
    z-index: 1;
    padding-top: 100px;
    overflow: hidden;
    transition: all 0.3s;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: bold;
  border-style: solid;
  border-width: 3px;
  border-radius: 8px;
  }
  
  .atop .closebth{
    color: black;
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 40px;
  }

  .atop .closebth:hover{
    color: red;
    transform: scale(1.1);
    transition: 0.4s;
  }
  


  .atop a{
   
    border:none;
    border-top-style: solid;
    border-top-color: white;
    border-color: white;
    border-bottom-style: solid;
    border-bottom-color: black;
    width: 100%;
    border-width: 1px;
    text-align: center;
    text-decoration: none;
    padding-top: 15px;
    padding-bottom: 15px;
  font-size: 20px;
  color: black;
  display: block;
  }

  .atop a:hover{
    transition: 0.6s;
    text-align: center;
    text-decoration: none;
    border: none;
    border-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-color: white;
  font-size: 20px;
  color: white;
  background-color: black;
  display: block;
  }



  #atop{
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
    text-decoration: none;
  font-size: 20px;
  color: white;
  background-color: black;
  display: block;
  }


  @keyframes glow {
    0% { color: rgb(255, 255, 255); }
    25% { color: rgb(194, 246, 7); }
    50% { color: rgb(251, 2, 2); }
    75% { color: rgb(0, 0, 0); }
    100% { color: rgb(1, 15, 95); }
  }
  
    

header .loogo-icon{
    flex: 1;
        animation: glow 3s infinite;
    text-align: right;
    font-weight:bold;
    font-size: 20px;
    padding:10px;
    margin: 10px;
    font-family:'Courier New', Courier, monospace;
    color: white;
}




header .disnone.list{
    padding: 10px;
    margin-right: 5px;
    margin-top: 1px;
    font-size: 30px;
    font-weight: bold;
    color: black;
    border-style: solid;
    border-color: black;
    background-color: white;
    border-radius: 8px;
    cursor: pointer;
    
}
header .disnone.list:hover{
box-shadow: 1px 1px 10px blue;
}




/*المحتوي*/

.name-hi{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin-top: 60px;
  width: 100%;
  background-color:#0030b3;
  padding: 10px 0;
  color: rgb(255, 255, 255);
  text-align: center;
  font-size: 17px;
  font-weight: bold;
}


.bool1{
  z-index: -1;
  position: absolute;
  margin-top: 40px;
  width: 100px;
  height: 100px;
  background-color: #06b3002f;
  border-radius: 50%;
  margin-left: 10%;
}





.bool3{
  z-index: -1;
  margin-left: -300px;
  position: absolute;
  margin-top: 600px;
  width: 500px;
  height: 500px;
  background-color: #00b38c3d;
  border-radius: 50%;
}

.bool4{
  z-index: -1;
  position: absolute;
  margin-top: 1250px;
  width: 200px;
  height: 200px;
  background-color: #06b30046;
  border-radius: 50%;
  margin-left: 30px;
}




















.hom-me{
margin-top: -10px;
text-align: center;
}


.hom-name{
  margin-top: -120px;
  padding: 10px;
  text-align: center;
}




.hom-name .img img{
  width: 80%;
}

.hom-name p{
  font-size: 16px;
  font-weight: bold;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}



.hom-img img{
  width: 150px;
  height: 150px;
}

.hom-img{
  text-align: center;
  margin-bottom: 150px;
  font-size: 16px;
  font-weight: bold;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.hom-img .cet{

  margin: 50px auto;
  border-radius: 50%;
  border-style: solid;
  border-width: 1px;
  border-color:rgba(0, 0, 0, 0);
  overflow: hidden;
  width: 150px;
}

.hom-img #pc{
  transform: scale(3);
  position:absolute;
  margin-left: -25px;
  margin-top: 120px;
  width: 20px;
  height: 20px;
}

.hom-img #pc:hover{
  outline: none;
  z-index: 10;
  rotate: 360deg;
  transform: scale(1.8);
  transition: 1.2s;

}


/* الاشتراك في الموقع*/

.button .dis{
  padding: 5px;
  background-color: red;
  display: inline;
  color: white;
  border-radius: 8px;
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  
}

.button{
margin-top: 70px;
text-align: center;
padding: 35px;
font-size: 25px;
font-weight: bold;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin-bottom: 20px;
}

.button button{
  rotate: 3deg;
  margin-top: 10px;
  width: 300px;
  font-size: 25px;
  padding: 5px;
  background-color: green;
  color:white;
  font-family: Georgia, 'Times New Roman', Times, serif;
  border:none;
  cursor: pointer;
  border-radius: 7px;
}

.button button:hover{
  transform: scale(1.1);
  transition: 0.2s;
  color: white;
  background-color: darkblue;

}


/*بوكس شادو في الصفحة للمميزات*/

.box{
  text-align: center;
  padding: 5px;
}

.box .bor{
 
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  width: 80%;
  min-height: 200px;
  margin: 30px auto;
  box-shadow: 1px 1px 10px black;
  border-radius: 8px;
  padding: 20px;
  color: blue;
}
.box .bor a{
  background-color: black;
  color: white;
  padding: 10px;
  margin: 40px ;
  display: block;
  text-decoration: none;
  border-radius: 8px;
}
.box .bor img{
  width: 60%;
  display: block;
  margin: 10px auto;
}

.box .bor p{
  margin-top: 50px;
  color: black;
  font-size: 16px;
}
/*تصميم نصوص وشرح للموقع*/

.text{
  width: 90%;
  margin-left: 9%;
}

.text-img{
  text-align: center;
  margin-bottom: 20px;
}

.text-img img{
  width: 80%;
}




.text h1{
  margin-top: 50px;
  text-align: center;
  color: blue;
  font-size: 22px;
  font-family: 'Courier New', Courier, monospace;
  margin-bottom: 0px;
}

.text h2{
  text-align: right;
  color:black;
  font-size: 22px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.text p{
text-align: right;
font-size: 18px;
font-weight: bold;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding: 5px;
}



.bot-text{

  margin-top: 200px;
  position: relative;
  text-align: center;
}


.bot-text p{
font-size: 18px;
font-weight: bold;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding: 5px;
  
}

.bot-text #p{
  color: blue;
}




/*خلفية متحركة*/

.slider {
    position: relative;
    max-width: 90%;
    margin: auto;
    overflow: hidden;
}

.slides {
  margin-top: 100px;
    position: relative;
}

.slides img {
    margin-left: 0%;
    margin-top: 30px;
    width: 100%;
    border: 2px solid black;
    border-radius: 8px;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.9s ease-in-out;
}

.dots {
  animation: slideinFromRight 0.7s ease;
    text-align: center;
    padding: 10px;
}

.dots span {
    height: 15px;
    width: 15px;
    margin: 0 5px;
    background-color: #d1ab00;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
}

.dots .active {
    background-color: black;
    transition: 0.6s;
    transform: scale(1.3);
}

.active-slide {
    opacity: 1 !important;
    position: relative !important;
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: 22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev {
    left: 0;
    border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
}





/*اشتراكات الموقع*/

.body-top p{
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 20px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.body-box{
    text-align: center;
    margin: 10px auto;
    padding: 10px;
    box-shadow: 1px 1px 10px black;
    border-radius: 8px;
    background-color: white;
    color: blue;
    font-size: 25px;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
    width: 75%;
    transform: scale(1);
  }
  
  .body-box p{
    margin-top: 10px;
    color: black;
    font-size: 15px;
    font-weight: bold;
    text-align: right;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  
  
  
  .body-boxtop{

      overflow: hidden;
      text-align: center;
      margin: 10px auto;
      padding: 15px;
      box-shadow: 1px 1px 10px black;
      border-radius: 8px;
      background-color:rgb(242, 246, 252);
      color: black;
      font-size: 25px;
      font-weight: bold;
      font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      width: 80%;
      min-height: 300px;
      transform: scale(1);
  }
  
  
  .body-boxtop .body-dis2{
      rotate: 35deg;
      font-size: 18px;
      padding: 10px;
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      margin-top: -5px;
      margin-left: 40%;
      text-align: center;
      background-color: red;
      color: white;
      width: 100%;
  }
  
  .body-boxtop p{
    margin-top: 10px;
    color: black;
    font-size: 15px;
    font-weight: bold;
    text-align: right;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  
  /*بوتن الاشتراك*/

.body-button{
    margin-top: 30px;
    text-align: center;
    padding: 5px;
    bottom: 0px;
}

.body-button a{
      text-decoration: none;
    border: none;
    display: inline-block;
    position: relative;
    border: none;
    border-radius: 8px;
    background-color: blue;
    color: white;
    font-size: 20px;
    font-weight: bold;
    padding: 10px;
}

.body-button a:hover{
    transform: scale(1.1);
    transition: 0.2s;
    background-color:green;
    color: white;
    cursor: pointer;
}


.body-box:hover{
  transition: 0.2s;
  background-color: rgb(241, 232, 232);
}




.body-fx{
  margin-top: 30px;
  margin-bottom: 10px;
  display: flex;
}

.body-fx .body-dis{
flex: 1;
text-align: center;
color: red;
text-decoration: line-through;
font-weight: bold;
font-family:Arial, Helvetica, sans-serif;
}


.body-fx .body-mone{
  flex: 1;
  color: green;
  font-size: 30px;
  font-weight: bold;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.test button{
  width: 50%;
  padding: 10px;
  font-size: 15px;
  font-weight: bold;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  border: none;
  border-radius: 8px;
  background-color: darkblue;
  color: white;
  margin-top: 20px;
  margin-bottom: 15px;
}

.test button:hover{
transition: 0.1s;
transform: scale(1.1);
background-color: black;
color: white;
cursor: pointer;
}



/*تصميم صور حسابات التواصل الاجتماعي*/


.so-img-hom{
  top: 55%;
  position: absolute;
  text-align: center;
  margin-bottom: 70px;

}


.so-img-pay{
  text-align: center;
}

.so-img-pay img{
width: 20%;
}


.so-img-hom i{
  display: none;
  color: black;
  padding: 10px;
  margin-top: 70px;
  transform: scale(1.5);
  margin-left: 0px;
  margin-right: 10px;
}


.so-img-hom i:hover{
  transform: scale(2);
  transition: 0.2s;
  color: #014128;
}






.so-img{
  margin-top: 80px;
  text-align: center;
  margin-bottom: 40px;
}

.so-img i{
  color: black;
  margin-top: 20px;
  margin-bottom: 50px;
  transform: scale(1.5);
  margin-left: 25px;
  margin-right: 25px;
}

.so-img i:hover{
transform: scale(2.5);
transition: 0.2s;
}

/* حسابي الشخصي*/

/*الصفحة الشخصية لحسابي*/

.me-form{
  text-align: center;
  background-color:#004e9713;
  border-radius: 8px;
  width: 90%;
  margin-left: 5%;
}

.me-form h2{
margin-top: 10%;
padding: 20px;
margin-bottom: 50px;
}


.me-form #button{
  width: 50%;
  background-color: black;
  border-top-style: solid;
  border-bottom-style: solid;
  border-color: black;
  color: white;
  border-radius: 8px;
  padding: 5px;
  font-size: 20px;
  font-weight: bold;
}


.me-form #button:hover{
  cursor: pointer;
  background-color: #0a0c0e;
  transition: 0.2s;
  border-top-style: solid;
  border-bottom-style: solid;
  border-color: rgb(197, 0, 197);

}

.me-form p{
  margin-top: 30px;
  text-align: right;
  padding: 20px;
  font-size: 18px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}



/*صميم بيانات الملف الشخصي*/


.hom-naw{
  position: fixed;
  bottom: 0;
  font-weight: bold;
  font-size: 17px;
  right: 0;
  text-decoration: none;
  background-color: #000000;
  color: white;
  padding: 10px;
  border-radius: 8px;
  border-style: solid;
  border-color: black;
  margin-right: 10px;
  margin-bottom: 20px;
}

.hom-naw:hover{
  transform: scale(1.1);
  transition: 0.2s;
  cursor: pointer;
  background-color: #2c1500;
  color: white;
  }







#body-me{
  background-color: #e6e9f0;
}

.add-user{
  display: none;
  position: absolute;
  margin-top: 10px;
  margin-bottom: 60px;
  background-color: rgb(255, 255, 255);
  box-shadow: 1px 1px 10px black;
  width: 40%;
  height: 500px;
  margin-left: 5%;
  padding: 5px;
  border-radius: 7px;
}

.add-user h3{
  text-align: right;
}

.add-user h2{
  margin-top: 20px;
  text-align: center;
}

.add-user h1{
  margin-top: 25px;
  text-align: center;
  color: #00af3a;
}

.add-user button{
  margin-top: 10px;
  width: 80%;
  margin-left: 10%;
  padding: 5px;
  font-size: 18px;
  background-color: #0e8356;
  color: white;
  border: none;
  border-radius: 10px;
}

.add-user button:hover{
  background-color: cadetblue;
  color: white;
  cursor: pointer;
}

.add-user p{
  text-align: center;
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
}

.add-user .tetel{
  overflow-x: hidden;
  height: 170px;
}


.add-user .adm-star{
  margin-top: 70px;
  margin-bottom: 70px;
}

.add-user .adm-star .bor{
width: 80%;
margin-left: 18%;
border: none;
border-bottom-style:  solid;
position: absolute;
border-color: black;
}

.add-user .adm-star p{
width: 90%;
margin-left: 8%;
text-align: right;
padding: 10px;
margin-left: 20px;
}

/*تصميم صفحة الرئيس*/

.boos-bak{
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}
.boos-bak .but{
  margin-top: 100px;
  margin-bottom: 100px;
}
.boos-bak .but button{
  padding: 5px;
  display: block;
  width: 70%;
  margin-left: 15%;
  margin-top: 15px;
  margin-bottom: 15px;
  font-size: 15px;
  padding: 10px;
  font-weight: bold;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  border: none;
  border-radius: 7px;
  background-color: #0030b3;
  color: white;
}

.boos-bak .but button:hover{
  transform: scale(1.05);
  transition: 0.2s;
  background-color: #014128;
  cursor: pointer;
}




/*1*/
.b1-boos{
  margin-top: 100px;
  text-align: center;
  color: black;
}

.b1-boos .v{
  margin-top: 50px;
  margin-bottom: 20px;
}

.b1-boos .v p{
font-size: 15px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
}

/*2*/

.b2-boos{
  text-align: center;
}

.b2-boos .box{
  margin-bottom: 50px;
  display: block;
  margin-top: 50px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 10px;
  border-radius: 8px;
  float: right;
  width: 40%;
  box-shadow: 1px 1px 10px black;
}

.b2-boos .but{
  margin-bottom: 50px;
}

.b2-boos .but button{
  width: 40%;
  padding: 5px;
  margin-top: 10px;
  font-size: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  background-color: #74207c;
  color: white;

}

.b2-boos .but button:hover{
  background-color: #6108b4;
  transition: 0.2s;
  cursor: pointer;
}

.b2-boos .box #p{
  height: 30px;
  font-size: 20px;
  background-color: blue;
  color: white;
  border-radius: 8px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bold;
}

.b2-boos .box p{
  height: 150px;
  font-size: 20px;
  font-family: 'Times New Roman', Times, serif;

}

.b2-boos .box img{
  height: 100px;
}

.b2-boos .box b{
  flex: 1;
  text-align: center;
  display: block;
  color: #037c0d;
  font-size: 30px;
}

.b2-boos .box #b{
  flex: 1;
  text-align: center;
  text-decoration: line-through;
  display: block;
  color: #990404;
  font-size: 30px;
}

.b2-boos .box button{
  width: 80%;
  padding: 5px;
  border: none;
  background-color: #002a9c;
  border-radius: 7px;
  margin-top: 5px;
  margin-bottom: 5px;
  color: white;
  font-size: 20px;
}

.b2-boos .box button:hover{
  transition: 0.2s;
  cursor: pointer;
  background-color: #0e008b;
}

.b2-boos .box #button{
  background-color: red;
}

.b2-boos .box #button:hover{
background-color: #a01a1a;
transition: 0.2s;
}

.b2-boos .box #button2{
  background-color: rgb(1, 165, 1);
}

.b2-boos .box #button2:hover{
  background-color: rgb(2, 87, 2);
  transition: 0.2s;
  }


.b2-boos .dis{
  position: absolute;
  margin-left: -220px;
  margin-top: -10px;
  padding: 5px;
  background-color: red;
  display: inline;
  color: white;
  border-radius: 8px;
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  
}

.b2-boos .fxb{
  display: flex;
}



.b2-top {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 2;
  animation: slideinFromRight 0.7s ease;
  background-color: white;
}

.b2-top input{
  width: 70%;
  margin-left: 20%;
  border: none;
  border-radius: 4px;
  border-bottom-style: solid;
  border-color: black;
  font-size: 20px;
  padding: 5px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: right;

}
.b2-top input:focus{
border: none;
outline: none;
border-bottom-style: solid;
border-color: #0a4afa;
}

.b2-top button{
  display: block;
  border: none;
  background-color: #0e008b;
  color: white;
  font-size: 20px;
  padding: 5px;
  width: 50%;
  margin-top: 50px;
  margin-left: 30%;
  border-radius: 10px;
}

.b2-top button:hover{
  transition: 0.2s;
  transform: scale(1.05);
  background-color: #0a4afa;
  cursor: pointer;
}


.bb1-boos{
  text-align: center;
  width: 80%;
  margin-left: 10%;
  margin-top: 50px;
  padding: 10px;
}

.bb1-boos  h2{
  text-align: center;
  background-color: #0030b3;
  border-radius: 7px;
  padding: 5px;
  color: white;
  width: 90%;
  margin-top: 0px;
  margin-bottom: 0px;
}

.bb1-boos table{
  margin-top: 0px;
  margin-top: 0px;
  text-align: center;
  background-color: black;
  border-radius: 9px;
  width: 90%;
  padding: 1px;
  font-size: 15px;
  margin-bottom: 50px;
}

.bb1-boos th{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #038d58;
  color: white;
  padding: 5px;

}

.bb1-boos td{
  background-color: #01412877;
  color: blanchedalmond;
  padding: 5px;
}

.bb1-boos button{
  width: 60%;
  margin-left: 5px;
  background-color: #0030b3;
  border-radius: 8px;
  border: none;
  font-size: 20px;
  padding: 5px;
  color: white;
}

.bb1-boos button:hover{
  transition: 0.2s;
  background-color: rgb(7, 161, 182);
  cursor: pointer;
}


.bb1-boos #button{
  width: 20%;
  background-color: red;
  border-radius: 8px;
  border: none;
  font-size: 20px;
  padding: 5px;
  color: white;
}


.bb1-boos #button:hover{
  transition: 0.2s;
  background-color: rgb(189, 91, 0);
  cursor: pointer;
}


.bb1-boos #button2{
  width: 80%;
  background-color: green;
  border-radius: 8px;
  border: none;
  font-size: 20px;
  padding: 5px;
  color: white;
}


.bb1-boos #button2:hover{
  transition: 0.2s;
  background-color: rgb(42, 182, 0);
  cursor: pointer;
}

.bb1-bu button{
  font-weight: bold;
  margin-top: 50px;
  background-color: rgb(0, 23, 156);
  color: white;
  padding: 5px;
  font-size: 18px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  width: 50%;
  margin-left: 25%;
  border: none;
  border-radius: 7px;
}


.bb1-bu button:hover{
  transition: 0.7s;
  background-color: black;
  cursor: pointer;
}




.add-user .link{
  border-style: solid;
  border-color: black;
  border-radius: 7px;
  padding: 10px;
  background-color: darkgrey;
  color: black;
  font-size: 20px;
  font-weight: bold;
  overflow-y:  hidden;
  width: 70%;
  margin-left: 15%;
  margin-bottom: 15px;
}
.add-user table{
  text-align: center;
  width: 80%;
  margin-left: 10%;
  background-color: black;
  border-radius: 7px;
}

.add-user td{
  background-color: #0e008b;
  color: white;
  font-size: 18px;
}

.add-user th{
  background-color: white;
  color: black;
}





















.me-data{
  position: relative;
  margin-top: 10px;
  margin-bottom: 100px;
  background-color: white;
  box-shadow: 1px 1px 10px black;
  width: 95%;
  margin-left: 1.5%;
  padding: 5px;
  border-radius: 7px;

}



.me-data h3{
  font-size: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-align: right;
}


.me-data .me-img{
  border-radius: 50%;
  width: 100px;
  height: 100px;
  margin-left: 40%;
  overflow: hidden;
  text-align: center;
  border-style: solid;
  border-color: black;
  border-width: 2px;
}

.me-data .me-img img{
  width: 100%;
  height: 100%;
}

.me-data p{
  text-align: right;
  font-size: 18px;
  margin-right:5% ;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.me-data input{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-align: right;
  width: 90%;
  margin-left: 5%;
  border: none;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 8px;
  border-bottom: 2px solid black;
  font-size: 18px;


}

.me-data input:focus {
  outline: none;
  border-bottom: 2px solid blue;
}

.me-data .a a{
  font-size: 17px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bold;
  color: #0030b3;
}


.me-data #button2{
  margin-left: 10%;
  width: 80%;
  margin-bottom: 30px;
  position: relative;
  margin-top: 60px;
  background-color: red;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px;
  font-weight: bold;
}

.me-data #button2:hover{
  background-color: rgb(179, 4, 4);
  transition: 0.2s;
  cursor: pointer;
}





.me-data #button{
  position: relative;
  margin-right: 60%;
  margin-top: 30px;
  margin-bottom: 10px;
  width: 30%;
  margin-left: 5%;
  padding: 5px;
  background-color: #0a4afa;
  border:none;
  color: white;
  border-radius: 8px;
  font-size: 17px;
  font-weight: bold;

}

.me-data #imageFrame {
  width: 120px;
  height: 120px;
  margin-left: 5%;
  border: 2px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  text-align: center;
}
.me-data #imageFrame:hover{
  box-shadow: 1px 1px 40px rgb(24, 30, 121);
}


.me-data #imageFrame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.me-data #changeText {
  position: absolute;
  bottom: -15px;
  width: 100%;
  background-color: rgba(45, 23, 235, 0.349);
  color: white;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding: 5px;
  padding-bottom: 30px;
  font-size: 9px;
  box-sizing: border-box;
}




.me-data #button:hover{
  transform: scale(1.07);
  cursor: pointer;
  transition: 0.2s;
  background-color: #0030b3;
}

.me-data .a{
  text-align: center;
  margin-top: 30px;
}



/*صفحة تسجيل الدخول للحساب*/

.open-hi{
  margin-top: 20%;
  text-align: center;
  box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.267);
  border-radius: 8px;
  padding: 10px;
  width: 90%;
  margin-left: 3%;
}

.open-box img{
  margin-left: 160%;
  margin-top: -30px;
}

.open-hi a{
 font-size: 18px;
 font-weight: 700;
 color: #002a9c;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.open-hi input{
  width: 50%;
  margin-left: 10%;
  margin-top: 40px;
  margin-bottom: 20px;
  border: none;
  border-bottom-style: solid;
  border-color: black;
  display: block;
  font-size: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.open-hi input:focus {
  outline: none;
  border-bottom: 2px solid blue;
}

.open-hi button{
  background-color: black;
  width: 50%;
  font-size: 20px;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 6px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.open-hi button:hover{
transition: 0.2s;
background-color: darkblue;
cursor: pointer;
}


.open-hi .open-box{
  position:absolute;
  margin-top: -4%;
  margin-left: 30%;
}


.open-hi p{
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
font-size: 20px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#eroor{
  font-size: 15px;
  font-weight: bold;
  color: red;

}



/*صفحة انشاء حساب حديد*/

.open-nwe{
  width: 90%;
  margin-left: 3%;
  padding: 10px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.308);
  border-radius: 8px;
  border: none;
  margin-top: 5%;
}


.open-nwe input{
  padding: 3px;
  text-align: right;
  width: 50%;
  margin-left: 50%;
  margin-top: 40px;
  margin-bottom: 20px;
  border: none;
  border-bottom-style: solid;
  border-radius: 9px;
  border-color: black;
  border-width: 2px;
  display: block;
  font-size: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}



.open-nwe input:focus {
  border-width: 2px;
  outline: none;
  border-bottom: 2px solid blue;
}




.open-nwe button{
  width: 50%;
  margin-left: 50%;
  margin-top: 20px;
  padding: 8px;
  background-color: black;
  color: white;
  border: none;
  font-size: 20px;
  border-radius: 9px;
}


.open-nwe button:hover{
  transition: 0.2s;
  background-color:rgb(45, 0, 54);
  cursor: pointer;
  color: white;
}

.open-nwe p{
  margin-top: 30px;
  font-size: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


.open-box{
  position: absolute;
  margin-top: -20%;
  margin-left: 5%;
}

.open-nwe img{
  margin-left: 10%;
  margin-top: -500px;
}


/*صفحة التواصل معي*/

.so-but{
  margin-top: 40%;
  margin-bottom: 20%;
  font-weight: bold;
  text-align: center;
}

.so-src{
  background-color: red;
  color: white;
  font-size: 18px;
  font-weight: bold;
  width: 200px;
  padding: 2px;
  margin-top: -35px;
  margin-left: 55%;
  text-align: center;
  position:static;
  rotate: 35deg;
  
}
.so-but i{
  margin-top: 15px;
  width: 65%;
  font-size: 18px;
 text-align: right;
  display: block;
}

.fa-solid.fa-check{
  color: #03237c;
}

.so-but .fx{
  margin-top: 50px;
  display: block;
  width: 100%;
  text-align: center;
}

.so-but .fx b{
  color: #037c0d;
  font-size: 50px;
}

.so-but .fx p{
  font-size: 23px;
}





.so-but button{
overflow: hidden;
width: 80%;
height: 40px;
font-size: 20px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
padding: 5px;
border: none;
background-color: rgb(2, 128, 23);
color: white;
border-radius: 8px;
}

.so-but button:hover{
  transition: 0.2s;
  background-color: #0e008b;
  color: white;
  cursor: pointer;
  border-bottom-style: solid;
  border-color: black;
}

.so-text{
  margin-top: 150px;
  width: 90%;
  margin-left: 5%;
  text-align: center;
  font-size: 20px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.so-text p{
  margin-top: 30px;
  text-align: right;
}


.so-a{
  text-align: center;
  padding: 10px;
}

.so-a a{
  font-size: 20px;
  text-decoration: none;
  color: black;
}


/*صفحة الطلب الخاصة بالزبون*/


.ser-text{
  text-align: center;
  font-size: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.ser-dns .dfx{
  animation: slideinFromRight 0.7s ease;
  text-align: center;
  width: 90%;
  margin-left: 5%;
  margin-top: 50px;
  overflow-x: hidden;
  display: block;
  height: 500px;
  background-color: white;
  border-style: solid;
  border-radius: 8px;
  border-color: black;
}

.ser-dns table{
  background-color: black;
  width: 100%;
}

.ser-dns td{
  text-align: center;
  background-color: black;
  color: white;
  font-size: 18px;
  padding: 6px;
  font-family: 'Courier New', Courier, monospace;
}



.ser-dns th{
  text-align: center;
  color: black;
  font-size: 18px;
  padding: 4px;
}


.ser-dns tr:nth-child(odd){
  background-color: #7da8ff;
  }
  
  .ser-dns tr:nth-child(even){
    background-color: rgb(0, 255, 242);
    
  }

.ser-yes{
  margin-top: 50px;
  width: 90%;
  margin-left: 5%;
  padding: 5px;
}

.ser-text .img{
  width: 60%;
  margin-left: 20%;
}

.ser-text .img img{
  width: 100%;
}







.ser-yes .box{
  display: block;
  margin-bottom: 25px;
  width: 100%;
  box-shadow: 1px 1px 6px black;
  min-height: 100px;
  border-radius: 8px;
  background-color: white;
}

.ser-yes .box h2{
  width: 80%;
  margin-left: 18%;
  font-size: 20px;
  color: blue;
  text-align: right;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}




.ser-yes .box h1{
  margin-top: -25px;
  position: relative;
  text-align: left;
  color: #014128;
}

.grn{
  background-color: #037c0d;
  width: 20px;
  height: 20px;
  border-radius: 50%;

}

.grn2{
  background-color: #0b1cad;
  width: 20px;
  height: 20px;
  border-radius: 50%;

}

.ser-yes  .nonon{
left: 0px;
margin-left: 7%;
margin-top: 10px;
position: absolute;
display: flex;
font-size: 20px;
font-weight: bold;
}

.ser-yes .box h3{
position: relative;
margin-right: 75%;
margin-top: -55px;
}

.ser-yes .box button{
  padding: 10px;
  width: 90%;
  background-color: dodgerblue;
  border-radius: 8px;
  border:none;
  font-size: 20px;
  color: white;
}


.ser-yes .box button:hover{
  background-color: rgb(6, 100, 194);
  transition: 0.3s;
  cursor: pointer;
}


/*اشعار الظهور*/

.con2{
  display: flex;
  position: absolute;
  font-size: 17px;
  margin-top: 10px;
  margin-left: -15px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bold;
}
.con{

  text-align: right;
  background-color: #00fc22;
  width: 15px;
  height: 15px;
  border-radius: 50%;
}


/*بوتن الاشتراك*/

.body-button{
  margin-top: 30px;
  text-align: center;
  padding: 5px;
  bottom: 0px;
}

.body-button button{
  position: relative;
  border: none;
  border-radius: 8px;
  background-color: blue;
  color: white;
  font-size: 20px;
  font-weight: bold;
  padding: 10px;
}

.body-button button:hover{
  transform: scale(1.1);
  transition: 0.2s;
  background-color:green;
  color: white;
  cursor: pointer;
}


.body-box:hover{
transition: 0.2s;
background-color: rgb(241, 232, 232);
}




.body-fx{
margin-top: 30px;
margin-bottom: 10px;
display: flex;
}

.body-fx .body-dis{
flex: 1;
text-align: center;
color: red;
text-decoration: line-through;
font-size: 20px;
font-weight: bold;
font-family:Arial, Helvetica, sans-serif;
}


.body-fx .body-mone{
flex: 1;
color: green;
font-size: 25px;
font-weight: bold;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/*بودي تصميم علي حسب ذوقكم*/

.hr-fx{
margin-top: 60px;
margin-bottom: 60px;
text-align: center;
font-size: 20px;
font-weight: bold;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.body-hr{
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 1px;
  background-color: blue;
  width: 40%;
  margin-left: 30%;
  border-style: solid;
  border-color: black;
  border-radius: 8px;
  border-width: 1px;
}

.body-buttontop{
  text-align: center;
}

.body-buttontop button{
  border: none;
  border-radius: 8px;
  background-color: indigo;
  color: white;
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin-bottom: 50px;
}


.body-buttontop button:hover{
  transform: scale(1.1);
  transition: 0.2s;
  cursor: pointer;
  background-color: crimson;
  color: white;
}




/* صفحة الخدمات*/


.aid-text{
  text-align: center;
  margin-top: 25%;
  width: 90%;
  margin-left: 5%;
  font: 1.3em sans-serif;

}


@keyframes slideinFromRight{
  from{
      transform: translateX(30px);
      opacity: 0;
  }
  to{
      transform: translateX(0);
      opacity: 1;
  }

}



.aid-box{
  animation: slideinFromRight 0.7s ease;
  margin-top: 50px;
  text-align: right;

}

.aid-box img{
  width: 30%;
}




.aid-fx .aid-box{
  width: 80%;
  margin-left: 7%;
  min-height: 240px;
  background-color: rgba(255, 255, 255, 0.363);
  color: black;
  padding: 10px;
  margin-bottom: 20px;
  border: none;
  border-bottom-style: solid;   
  border-top-style: solid;   
  border-color: black;
  border-radius: 10px;
  border-width: 2px;
  box-shadow: 1px 1px 100px rgba(8, 75, 218, 0.411);
}


.aid-fx button{
  position: relative;
  margin-right: 60%;
  margin-top: 20%;
  font-size: 20px;
  padding: 5px;
  background-color: #5e0afa;
  color: white;
  border: none;
  border-top-style: solid;
  border-bottom-style: solid;
  border-color: rgb(0, 0, 0);
  border-radius: 8px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}





.aid-fx button:hover{
  transition: 0.3s;
  border-top-style: solid;
  border-color: black;
  border-radius: 8px;
  cursor: pointer;
  color: white;
  background-color: #4d7cff;
}


.aid-fx b{
  font-size: 17px;
  font-weight: bold;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}



.aid-fx .money{
  display: flex;
  position: absolute;
  margin-right: -20px;
  margin-top: 20px;
}


.aid-fx .money #money{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 27px;
  margin-left: 10%;
  color: #00af3a;
}

.aid-fx .money #dis{
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-weight: lighter;
  font-size: 16px;
  color: red;
  position: relative;
  text-decoration: line-through;
  margin-left: 10%;

}

.aid-fx .dis-text{
  position: absolute;
  text-align: left;
  background-color: red;
  color: white;
  border-radius: 8px;
  font-size: 17px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding: 5px;
  margin-top: -15px;
  margin-left: -13px;
}

.aid-fx p{
  position:relative;
  margin-top: -15%;
  margin-left: 45%;
  width: 55%;
  height: 60px;
  font: 1em sans-serif;
  font-weight: bold;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.aid-fx img{
  position: relative;
  margin-right: 220px;
}





/*تصميم علي حسب ذوق العميل*/


#filterForm {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  width: 70%;
  margin-left: 7%;
  margin-top: 25%;
  margin-bottom: 20%;
  max-width: 400px;
  text-align: center;
}

#filterForm label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  background-color: white;
  color: black;
  padding: 5px;
  font-size: 19px;
  font-weight: bold;
  border-radius: 7px;
}


#filterForm select, #filterForm input {
  width: 100%;
  font-size: 20px;
  padding: 10px;
  text-align: center;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

#filterForm select:focus, #filterForm input:focus {
  border-color: #ff7e5f;
  box-shadow: 0 0 8px rgba(255, 126, 95, 0.5);
  outline: none;
}

#filterForm button {
  margin-top: 20px;
  font-size: 20px;
  background: #002a9c;
  color: #fff;
  padding: 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

#filterForm button:hover {
  background: #6108b4;
  transform: scale(1.05);
}




#filterForm #dis{
  font-size: 25px;
  font-weight: bold;
  position:relative;
  margin-right: 230px;
  margin-top: 2px;
}


#filterForm #money{
  font-size: 20px;
  font-weight: bold;
  position:relative;
  margin-right: 400px;
  font-size: 30px;
  margin-top: 20px;

}


#filterForm #distext{
  font-size: 22px;
  font-weight: bold;
  color: rgb(88, 0, 105);
  text-align: right;
}

/*الصورة*/

.imageContainer img{
  width: 100%;
  height: 100%;
}



.imageContainer {
  font-weight: bold;
  width: 20%;
  height: 200px;
  border: 2px solid #000;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 20px;

}

.imageContainer.pc{
  margin-top: -200px;
  margin-left: 25%;
  position: relative;
  width: 70%;
  height: 200px;
  border: 2px solid #000;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 20px;
}

.imageContainer:hover{
  border-color: #0030b3;
  box-shadow: 1px 1px 20px rgba(0, 0, 255, 0.438);
  transition: 0.4s;
}

.imagePreview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.placeholder {
  font-size: 16px;
  color: #888;
}
#fileInput {
  display: none;
}



/*//////*/


.imageFrame1{
  width: 30%;
  height: 250px;
  border: 2px solid #000;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 10px;
  overflow: hidden;
  font-weight: bold;
}

.imageFrame1:hover{
  cursor: pointer;
border-color: blue;
transition: 0.4s;
box-shadow: 1px 1px 10px rgba(1, 5, 250, 0.342);
}
.imageFrame1.img1{
position: relative;
margin-top: 0px;
margin-left: 0%;
margin-bottom: 30px;
}

.imageFrame1.img2{
  transform: scale(1.2);
  position: relative;
  margin-top: -260px;
  margin-left: 36%;
}

.imageFrame1.img3{
  position: relative;
  margin-top: -290px;
  margin-left: 72%;
  margin-bottom: 60px;
}



.imageFrame1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.imageFrame1 span {
  position: absolute;
  font-size: 18px;
  color: #000;
}




/*صفحة معرض الاعمال*/

.wep-fx{
  margin-top: 70px;
  text-align: center;
}

.wep-text{
  margin-top: 100px;
  width: 90%;
  margin-left: 5%;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.wep-box{
  animation: slideinFromRight 0.9s ease;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.534);
  border-style: solid;
  border-color: black;
  border-width: 1px;
  border-radius: 8px;
  text-align: center;
  padding: 5px;
  width: 90%;
  margin-left: 4%;
  padding-bottom: 30px;
  padding-top: 20px;
  margin-bottom: 40px;
  overflow: hidden;
}

.wep-box .ff{
  display: flex;
  margin-top: 5px;

}
.wep-box .ff h1{
  color: #014128;
  flex: 1;
  padding: 0px;
  text-align: center;
}

.wep-box .dis{
  background-color: red;
  color: white;
  position: relative;
  margin-top: -5%;
  margin-left: -80%;
  padding: 8px;
  font-size: 20px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  rotate: -20deg;

}

.wep-box b{
  text-align: center;
  border-top-style: solid;
  border-color: blue;
  border-radius: 9px;
  font-size: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


.wep-box .bortop{
  margin-top: 35px;
  width: 100%;
  height: 160px;
  margin-bottom: 10px;
}

.wep-box .top{
  width: 90%;
  height: 300px;
 margin-bottom: 10px;
}


.wep-box .top img{
  width: 100%;
  height: 100%;
}



.wep-box .top .xm1{
  position: relative;
  width: 33%;
  height: 250px;
  margin-left: 12%;
  margin-top: 40px;
  border-style: solid;
  border-radius: 5px;
  border-color: black;
  border-width: 2px;
  transform: scale(0.8);

}


.wep-box .top .xm2{
  position: relative;
  width: 33%;
  height: 250px;
  margin-top: -250px;
  margin-left: 40%;
  border-style: solid;
  border-radius: 6px;
  border-color: black;
  border-width: 2px;
  transform: scale(1);
}


.wep-box .top .xm3{
  z-index: -1;
  position: relative;
  width: 33%;
  height: 250px;
  margin-top: -260px;
  margin-left:  65%;
  border-style: solid;
  border-radius: 5px;
  border-color: black;
  border-width: 2px;
  transform: scale(0.8);
}







.wep-box #pc{
  border-style: solid;
  border-color: black;
  border-width: 2px;
  border-radius: 7px;
  margin-top: 10px;
  width: 80%;
}



.wep-box #no-pc{
  margin-top: -180px;
  margin-left: 65%;
  position:relative;
  border-style: solid;
  border-color: black;
  border-width: 2px;
  border-radius: 8px;
  width: 20%;
  z-index: 1;

}




.wep-box p{
  width: 80%;
   height: 80px;
  margin-left: 10%;
  text-align: center;
  font-size: 15px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


.wep-box button{
  margin-top: 15px;
  width: 70%;
  background-color:rgba(255, 255, 255, 0);
  color: black;
  border:none;
  border-bottom-style: solid;
  border-color: black;
  font-size: 20px;
  font-weight: bold;
  padding: 4px;

}


.wep-box button:hover{
  border-color: blue;
  transition: 0.2s;
  translate: 1rem;
  rotate: 0deg;
  cursor: pointer;
}





/*تصميم معرض اعمالي للموظفين*/

.adm-mypro .my{
  animation: slideinFromRight 0.8s ease;
  position: absolute;
  width: auto;
  height: 100%;
  background: #fff;
  border-radius: 12px;
  margin-top: 0px;
  margin-bottom: 0px;
  text-align: center;

}



.adm-mypro .my .pc img{
  position: relative;
  border-radius: 8px;
  border-style: solid;
  border-color: black;
  border-width: 1px;
  width: 60%;
  margin-right: 10%;
}
.adm-mypro .my .imageContainer.pc img{
width: 100%;
height: 100%;
margin-right: 0%;
}


.adm-mypro .pro-img img{
  width: 100%;
  height: 100%;
}



.adm-mypro .my .mo img{
  position: absolute;
  width: 20%;
  height: 200px;
  border-radius: 8px;
  border-style: solid;
  border-color: black;
  border-width: 1px;
  margin-top: -30%;
  margin-left: 20%;
}


.adm-mypro .my h2{
  margin-top: 50px;
}

.adm-mypro .my p{
  font-size: 18px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.adm-mypro .my button{
  width: 80%;
  padding: 5px;
  background-color: #0030b3;
  color: white;
  font-size: 18px;
  border: none;
  border-radius: 5px;
  margin-top: 20px;
}

.adm-mypro .my button:hover{
  transition: 0.3s;
  cursor: pointer;
  background-color: #0a4afa;
}




.adm-mypro .my #button{
  background-color: red;
  margin-bottom: 100px;
}

.adm-mypro .my #button:hover{
  background-color: #fa620a;
}

.adm-mypro .my{
  padding: 20px;
}

.adm-mypro .my .xm1{
  margin-right: 10px;
}

.adm-mypro .my .xm3{
  margin-left: 10px;
}

.adm-mypro .my .xm1 img{
  position: absolute;
  width: 20%;
  min-height: 220px;
  border-radius: 8px;
  border-style: solid;
  border-color: black;
  margin-left: -30%;
  transform: scale(0.9);
}



.adm-mypro .my .xm2 img{
  position: absolute;
  width: 20%;
  min-height: 220px;
  border-radius: 8px;
  border-style: solid;
  border-color: black;
  margin-left: -10%;
}




.adm-mypro .my .xm3 img{
  position: absolute;
  width: 20%;
  min-height: 220px;
  border-radius: 8px;
  border-style: solid;
  border-color: black;
  transform: scale(0.9);
  margin-left: 10%;
}




.adm-mypro .my .top{
  margin-top: 10px;
  margin-bottom: 250px;
}





.adm-mypro #filterForm {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  text-align: center;
  width: auto;
  position: relative;
  bottom: 0;
  

  
}

.adm-mypro #filterForm label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}

.adm-mypro #filterForm select, .adm-mypro #filterForm input {
  width: 100%;
  font-size: 20px;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.adm-mypro #filterForm select:focus, .adm-mypro #filterForm input:focus {
  border-color: #ff7e5f;
  box-shadow: 0 0 8px rgba(255, 126, 95, 0.5);
  outline: none;
}

.adm-mypro #filterForm button {
  margin-top: 20px;
  font-size: 20px;
  background: #74207c;
  color: #fff;
  padding: 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

.adm-mypro #filterForm button:hover {
  background: #6108b4;
  transform: scale(1.05);
}

.adm-mypro #filterForm button:focus{
  background: #ffae00;
}

.adm-mypro #filterForm #dis{
  font-size: 25px;
  font-weight: bold;
  position:relative;
  margin-right: 230px;
  margin-top: 2px;
}


.adm-mypro #filterForm #money{
  font-size: 20px;
  font-weight: bold;
  position:relative;
  margin-right: 400px;
  font-size: 30px;
  margin-top: 20px;

}

.adm-mypro h2{
  margin-top: 50px;
}

.adm-mypro #filterForm #distext{
  font-size: 22px;
  font-weight: bold;
  color: rgb(88, 0, 105);
  text-align: right;
}



/*عمليات الدفع*/

.book{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  background-color: white;
  animation: slideinFromRight 0.3s ease;
  z-index: 1;
}

.bay-min{
  width: 90%;
  margin-left: 4%;
  box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.322);
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  margin-top: 100px;
}


.bay-min .fx{
  display: flex;
  margin-top: 0px;
 width: 100%;
 text-align: center;
}

.bay-min .bo{
  margin-top: 5px;
  width: 100%;
  margin-left: 0%;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.37);
  border-width: 1px;
  border-radius: 8px;
}

.bay-min b{
  margin-top: 20px;
  flex: 1;
  text-align: center;
  color: #013ad6;
  font-size: 19px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.bay-min p{
  flex: 1;
  text-align: center;
  color: black;
  font-size: 19px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}







/*تعين كلمة المرور*/

.pass-top{
  width: 90%;
  min-height: 300px;
  margin-left: 3%;
  box-shadow: 1px 1px 100px rgba(0, 0, 0, 0.377);
  border-radius: 7px;
  padding: 10px;
  text-align: center;
  margin-top: 100px;
}

.pass-top h1{
  color: #002a9c;
}

.pass-top h2{
  margin-top: 50px;
  margin-bottom: 30px;
}

.pass-top input{
text-align: center;
font-size: 20px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
width: 50%;
margin-left: 25%;
padding: 10px;
border: none;
border-bottom-style: solid;
border-color: #0a0c0e;
display: block;
}

.pass-top input:focus{
  outline: none;
  border-color: #0e008b;
  transition: 0.3s;
  animation: slideinFromRight 0.4s ease;

}

.pass-top p{
  color: red;
  font-size: 20px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.pass-top #p{
  color: white;
  background-color: #00af3a;
  border-radius: 8px;
  display: inline-block;
  padding: 5px;
  font-size: 20px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.pass-top button{
  border: none;
  background-color: black;
  color: white;
  display: block;
  font-size: 20px;
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  padding: 5px;
  width: 30%;
  margin-left: 35%;
  border-radius: 8px;
  margin-top: 20px;
}
.pass-top button:hover{
  background-color: rgb(18, 31, 5);
  transition: 0.2s;
  cursor: pointer;
}






/* صفحة الدفع الخاصة للااتشتراكات*/


.bay-book{
  margin-top: 10%;
  margin-bottom: 10%;
  width: 95%;
  padding-top: 30px;
  padding-bottom: 30px;
  margin-left: 2.5%;
  background-color: white;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.404);
  border-radius: 10px;
}

.bay-book p{
  margin-top: 5px;
  margin-bottom: 25px;
  text-align: right;
  font-size: 18px;
  color: #000000;
  margin-right: 10px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bold;
}


.bay-book span{
  color: blue; padding: 5px;
}


.bay-book span{
  color: blue; padding: 5px;
}


.bay-book button{
  background-color: #ffd901;
  color: white;
  border: none;
  border-radius: 8px;
  width: 80%;
  margin-left: 10%;
  padding: 10px;
  font-size: 0px;
  font-weight: bold;
  margin-bottom: 40px;
}

.bay-book button:hover{
  transition: 0.3s;
  background-color: #ffe344;
  cursor: pointer;
}

.bay-book button img{
  height: 40px;
}

.bay-book #cn{
  text-align:center ;
  margin-top: 70px;
}

.bay-book .i{
  text-align: center;
}

.bay-book .i i{
  margin-right: 50px;
  text-align: center;
  font-size: 35px;
  color: black;
}


.bay-book i:hover{
  color: indigo;
  transform: scale(1.5);
  cursor: pointer;
  transition: 0.2s;
}








/*تحميل الصفحة والانتظار*/


.loader-body{
    position: fixed;
    z-index: 3;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.384);
}

.loader-body .loader span{
    font-size: 0px;
}
.loader {

    margin-left: 44%;
    margin-top: 300px;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    border-radius: 50%;
    border-top: 5px solid gold;
    position: fixed;
    z-index: 1;
    animation: load 2s linear infinite;
  }
  
  .loader::before,.loader::after {
    content: '';
    width: 50px;
    height: 50px;
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    border-radius: 50%;
  }
  
  .loader::before {
    border-top: 5px solid red;
    transform: rotate(120deg);
  }
  
  .loader::after {
    border-top: 5px solid blue;
    transform: rotate(240deg);
  }
  
  .loader span {
    position: absolute;
    font-size: small;
    width: 50px;
    height: 50px;
    color: #fff;
    text-align: center;
    line-height: 100px;
    animation: a2 2s linear infinite;
  }
  
  @keyframes load {
    to {
      transform: rotate(360deg);
    }
  }
  
  @keyframes a2 {
    to {
      transform: rotate(-360deg);
    }
  }

  
 /*خلفية متحركة لتصميم التلفون*/


 .loader3 {
  position: absolute;
  left: 50%;
  top: -20%;
  z-index: 1;
  width: 160px;
  height: 100px;
  margin-left: -80px;
  margin-top: -50px;
  border-radius: 5px;
  background: #1e3f57;
  animation: dot1_ 3s cubic-bezier(0.55,0.3,0.24,0.99) infinite;
}

.loader3:nth-child(2) {
  z-index: 1;
  width: 150px;
  height: 90px;
  margin-top: -45px;
  margin-left: -75px;
  border-radius: 3px;
  background: #3c517d;
  animation-name: dot2_;
}

.loader3:nth-child(3) {
  z-index: 1;
  width: 40px;
  height: 20px;
  margin-top: 50px;
  margin-left: -20px;
  border-radius: 0 0 5px 5px;
  background: #6bb2cd;
  animation-name: dot3_;
}

@keyframes dot1_ {
  3%,97% {
    width: 160px;
    height: 100px;
    margin-top: -50px;
    margin-left: -80px;
  }

  30%,36% {
    width: 80px;
    height: 120px;
    margin-top: -60px;
    margin-left: -40px;
  }

  63%,69% {
    width: 40px;
    height: 80px;
    margin-top: -40px;
    margin-left: -20px;
  }
}

@keyframes dot2_ {
  3%,97% {
    height: 90px;
    width: 150px;
    margin-left: -75px;
    margin-top: -45px;
  }

  30%,36% {
    width: 70px;
    height: 96px;
    margin-left: -35px;
    margin-top: -48px;
  }

  63%,69% {
    width: 32px;
    height: 60px;
    margin-left: -16px;
    margin-top: -30px;
  }
}

@keyframes dot3_ {
  3%,97% {
    height: 20px;
    width: 40px;
    margin-left: -20px;
    margin-top: 50px;
  }

  30%,36% {
    width: 8px;
    height: 8px;
    margin-left: -5px;
    margin-top: 49px;
    border-radius: 8px;
  }

  63%,69% {
    width: 16px;
    height: 4px;
    margin-left: -8px;
    margin-top: -37px;
    border-radius: 10px;
  }
}



/*عرض رسالة  */

#alertBox {
  text-align: center;
  z-index: 10;
  animation: slideinFromRight 0.7s ease;
  border: 1px solid #ccc;
  padding: 10px;
  width: 80%;
  margin-left: 5%;
  background-color: #f8f8f8;
  position: fixed;
  margin-top: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#alertBox p{
  font-size: 20px;
}


#closeBtn {
  font-weight: bold;
  transform: scale(2);
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 20px;
  color: black;
  font-weight: bold;
}
#closeBtn:hover {
  transition: 0.7s;
  transform: scale(2.5);
  color: red;
}


footer {
    background-color: #004e9727;
    color: black;
    text-align: center;
    padding: 20px;
    font-weight: bold;
}

.dop{
    text-align: center;
    display: block;
    padding: 20px;
}
.dop a{
    background-color: #00158f;
    text-decoration: none;
    color: white;
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}
*{
    font-family: 'Cairo', sans-serif;
}
body{
    font-family: 'Cairo', sans-serif;
}
}