html,body{direction: rtl;padding:0px;margin:0px;heigth:100vh;overflow: hidden;font-family: 'Noto Kufi Arabic', sans-serif;}
      .nav-btn{background: white;padding:10px 0px;border-radius: 3px;}
      .nav-btn span{margin: 0px 10px;}
      .nav-btn span a{text-decoration: none;padding:10px 0px;font-weight: 700;color: #4f5e72;
    }
      .btn:hover{margin:2px 0px;opacity: 1;}
      .btn{text-align: right;margin:auto;margin:2px 2px;opacity: .8;padding: 4px 0px;box-shadow: 1px 1px 10px grey;}
      .server{width: 95%;
        border: 1px grey solid;
        text-align: right;
        padding: 10px 0px;
        margin:10px auto;
        box-shadow: 1px 1px 10px grey;
        border-radius: 5px;
        color: #0e71c4;
        overflow: hidden;        position: relative;
    }


    .search{display: none;}
    .login-input{padding:1rem  .5rem;margin:10px auto;width:70%;border-radius: .24rem;border:1px #42d1ff solid;}
    .login-form{width:40%;display: inline-block;position: relative;vertical-align: top;text-align: center;}
    .login-btn{padding:.5rem;margin:2px 10%;width:50%;border-radius: .24rem;color:white;font-weight: 900;font-size: 109%;border:0px;}
    .badg{top:0px;right:0px;width:100%;text-align: center;background: red;color: white;padding:.5rem 0rem;border-radius: .24rem;}
      .announcement{width:40%;display: inline-block;}
      .anncol{width:42% !important;}
    @media screen and (min-width: 993px) {

      .search{display: none;}
      .login-input{margin:10px auto;width:70%;border-radius: .24rem;}
      .login-form{width:40%;display: inline-block;position: relative;margin:80px 2%;}
      .login-btn{padding:.5rem;margin:2px 10%;width:50%;border-radius: .24rem;}
        .announcement{width:55%;}
    }
    @media screen and (max-width: 992px) {
      .login-input{margin:10px auto;width:70%;border-radius: .24rem;}
      .login-form{width:40%;display: inline-block;position: relative;margin:80px 2%;}
      .login-btn{padding:.5rem;margin:2px 10%;width:50%;border-radius: .24rem;}
        .announcement{width:55%;}

    }
    @media screen and (max-width: 700px) {
      .login-input{margin:10px auto;width:70%;border-radius: .24rem;}
      .login-form{width:60%;display: inline-block;position: relative;}
      .login-btn{padding:.5rem;width:50%;border-radius: .24rem;}
        .announcement{width:100%;}

    }
    @media screen and (max-width: 600px) {
      .section-title {margin:16px!important;text-align: center;}
      .section-desc {
    font-size: 110%;
    text-align: right;

    margin: 37px 0px 38px 0px!important;
    overflow-wrap: break-word;}
      .login-input{margin:10px auto;width:70%;border-radius: .24rem;}
      .login-form{width:100%;display: inline-block;position: relative;}
      .login-btn{padding:.5rem;width:50%;border-radius: .24rem;}

        .announcement{width:100%;}
    }


/*header */

.login-card{font-size: 80%;}
a {
    text-decoration: none;
    color: #103249;
}
.row{text-align:center;overflow-y: scroll;max-height: 78vh;
    min-height: 68vh;}

.nav{height:85vh;position: relative;display: inline-block;float: right;width:200px;padding-top: 5px;background:#cbcbcb;
  padding: 5px 0px 0px 0px;
      background: #f6f6f6;
      box-shadow: -5px 0px 10px grey;
      overflow-y: scroll;
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
      max-height: 80vh;
 }
 /* Hide scrollbar for Chrome, Safari and Opera */
.nav::-webkit-scrollbar {
  display: none;
}
.row::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.row {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
 .login-btn{color: #b6d1e3;
    background: #103249;
    text-align: center;}
.burger{display: none;}
.title{
  color: white;
  /* color: black; */
  position: absolute;
  right: 70px;
  top: 17px;
  font-weight: 900;
  font-size: 120%;
}
.sub-title{
  color: white;
  /* color: black; */
  position: absolute;
  right: 70px;
  top: 41px;
  font-weight: 500;
  font-size: 75%;
}
.phone{
  color: white;
  /* color: black; */
  position: absolute;
  left: 150px;
  top: 10px;
  font-weight: 900;
  font-size: 120%;
  float: left;
  color: #0e71c4;
}
.header{
  background: #103249;
    box-shadow: 0px 5px 8px grey;
}
@media only screen and (max-width: 599px) {
  .service{width:88%!important;}
  .row{width:100%;padding-bottom: 30px!important;}
  .login-card{display: inline-block;width:40%;overflow: hidden;}
  .header{height:70px;width:100%; }
  .logo{z-index: 1000;width:50px;height:50px;position: absolute;top:10px;right:10px;border:.24rem grey sold;border-radius: 25px;}
  .auth-mark{float: left;direction: rtl;text-align: center;color: #103249;margin: 79px 10px 22px 0px;height:48px;width:100%;border-radius: .24rem;}
  .auth-btn{
    display: inline;
    width: 29%;
    background: #31435d;
    margin:2px 2px 2px 2px;
    height: 25px;
      padding: 6px !important;
    vertical-align: middle;
    border-radius: 0.24rem;
    float: left;;
    color: white;
    text-align: center;
  }
  .auth-btn span{}
  .auth-btn span a{text-decoration: none;color:white;text-align: center;}
  .nav{border-left: inset 3px #4c3d5f;height:85vh;position: relative;display: none;float: right;width:200px;padding-top: 50px;background:#cbcbcb; }
  .burger{width:35px;height:35px;float: right;margin:2px 2px;display: block;background: #31435d;border-radius: 5px;padding:0px;}
  .burger .line{width: 50%;margin:6.7px auto;border-bottom: 2px white solid;}
  .title{
    color: white;
    /* color: black; */
    position: absolute;
    right: 70px;
    top: 11px;
    font-weight: 900;
    font-size: 120%;
  }
  .sub-title{
    color: white;
    /* color: black; */
    position: absolute;
    right: 70px;
    top: 41px;
    font-weight: 500;
    font-size: 75%;
  }
  .phone{
    color: white;
    /* color: black; */
    position: absolute;
    text-align: center;
    left: 10px;
    top: 15px;
    font-weight: 900;
    font-size: 90%;
    color: #0e71c4;
  }
}
@media only screen and (min-width: 600px) and (max-width: 1023px) {
  .row{margin-right:200px;overflow-y: scroll;}

  .header{height:70px;width:100%;}
  .logo{z-index: 1000;width:50px;height:50px;position: absolute;top:10px;right:10px;border:.24rem grey sold;border-radius: 25px;}
  .auth-mark{float: left;direction: rtl;text-align: center;color: #cbcbcb;margin:2px 10px;height:48px;width:200px;border-radius: .24rem;}
  .auth-btn{
    background: #31435d;
    margin: 2px 2px;
    padding: 0.27rem;
    border-radius: 0.24rem;
    color: white;
text-align: center;
  }
  .auth-btn span{}
  .auth-btn span a{text-decoration: none;color:white;}
  .nav{padding-top:10px;}
}
@media only screen and (min-width: 1024px) {
  .row{margin-right:200px;overflow-y: scroll;}

  .header{height:15vh;width:100%; }
  .logo{z-index: 1000;width:50px;height:50px;position: absolute;top:25px;right:50px;border:.24rem grey sold;border-radius: 100px;}
  .auth-mark{float: left;direction: rtl;text-align: center;color: #cbcbcb;margin:1vh 10px;height:13vh;width:30vh;border-radius: 1vh;}
  .auth-btn{
    background: #31435d;
    margin: 2px 2px;
    padding: 0.2rem;
    border-radius: 0.24rem;
    color: white;text-align: center;}
  .auth-btn span{}
  .auth-btn span a{text-decoration: none;color:white;}

  .title{
    color: white;
    /* color: black; */
    position: absolute;
    right: 174px;
    top: 11px;
    font-weight: 900;
    font-size: 174%;
  }
  .sub-title{
    color: white;
    /* color: black; */
    position: absolute;
    right: 175px;
    top: 62px;
    font-weight: 600;
    font-size: 100%;
  }
}
@media only screen and (min-width: 899px)and (max-width: 1023px)and (orientation: landscape) {
  .auth-btn{
    padding: 0.27rem;
  }
}



/*home*/


  .section{padding:10px 0px; min-height: 25vh;display:block;position: relative;
}
.sec1{
  *background: linear-gradient(181deg, #7a8eb0, transparent);
  background: white;
}
.sec2{
  background: #f6f6f6;

  background: linear-gradient(181deg, #7ab082, transparent);

}
.sec3{
  background: linear-gradient(181deg, #7a8eb0, transparent);
  background: #c8c8c8;
}
.sec4{
  background: linear-gradient(181deg, #7a8eb0, transparent);
}
.sec5{
  background: linear-gradient(181deg, #7a8eb0, transparent);
}
  .section-cont{margin:0px 10px;}
  .section-title{
    font-size: 140%;
    text-align: right;
    margin: 33px;
    font-weight: 900;
  }
    .section-desc{
      font-size: 110%;
    text-align: right;
    margin: 37px 56px 38px 77px;
    overflow-wrap: break-word;
    }
      .section-btn{ position: absolute;bottom:20px;left:20px;height:20px;border-radius: .24rem;background: #1a93f9;color:white;padding:7px 20px;text-align: center;}
      .price{ text-align: center;color: #007122;
        margin: 57px auto;
font-size: 120%;
font-weight: bolder;
      }


      /* proxy*/


      .item{display: inline-block;width:200px;margin:10px auto;vertical-align: top;
        border:1px grey solid;font-weight: 800;border-radius: .24rem;padding:25px 0px;box-shadow: -7px 5px 12px grey;

      }
      .item-title{font-size: 120%;}
      .desc{font-size: 90%;}
      .features{width:90%;padding:25px 0px;margin:10px auto;border-radius: .24rem;border:1px grey solid;text-align: right;font-weight: 600;}
      .f-item{margin:5px 15px 5px auto;vertical-align: top;font-size: 70%;}
      .f-item::before{content:"»";color: teal;}
      .f-price{ text-align: center;color: #007122;
        margin: 10px auto;
font-size: 100%;
font-weight: bolder;
      }

/* regestratiin*/



    .search{display: none;}
    .login-input{padding:1rem  .5rem;margin:10px auto;width:70%;border-radius: .24rem;border:1px #42d1ff solid;}
    .login-form{width:40%;display: inline-block;position: relative;vertical-align: top;text-align: center;}
    .login-btn{padding:.5rem;margin:2px 10%;width:50%;border-radius: .24rem;color:white;font-weight: 900;font-size: 109%;border:0px;}
    .badg{top:0px;right:0px;width:100%;text-align: center;background: red;color: white;padding:.5rem 0rem;border-radius: .24rem;}
      .announcement{width:40%;display: inline-block;}
      .anncol{width:42% !important;}
    @media screen and (min-width: 993px) {
        .features{width:60%;margin:10px;}
        .item{display: inline-block;width:95%;margin:10px auto;position: relative;}
.f-item{margin:5px 15px 5px auto; width:30%;display: inline-block;}
  .f-price{ position: absolute;
    left: 20px;
    top: -3px;}
  .buy{position: absolute;left: 10px;
    bottom: 0px;
    text-align: center;width:38%;}
      .search{display: none;}
      .login-input{margin:10px auto;width:70%;border-radius: .24rem;}
      .login-form{width:40%;display: inline-block;position: relative;margin:40px 2%;}
      .login-btn{padding:.5rem;margin:2px 10%;width:50%;border-radius: .24rem;}
        .announcement{width:55%;}
    }
    @media screen and (max-width: 992px) {
      .features{width:60%;margin:10px;}
      .item{display: inline-block;width:95%;margin:10px auto;position: relative;}
.f-item{margin:5px 15px 5px auto; width:95%;display: inline-block;}
.f-price{position: absolute;
    left: 21px;
    top: 84px;
    width: 35%;}
.buy{position: absolute;left: 10px;
  bottom: 25px;
  width: 38%;
  text-align: center;;}
      .login-input{margin:10px auto;width:70%;border-radius: .24rem;}
      .login-form{width:40%;display: inline-block;position: relative;margin:80px 2%;}
      .login-btn{padding:.5rem;margin:2px 10%;width:50%;border-radius: .24rem;}
        .announcement{width:55%;}
.row{width: 70vw;}
    }
    @media screen and (max-width: 700px) {
      .features{width:60%;margin:10px;}
      .item{display: inline-block;width:95%;margin:10px auto;position: relative;}
.f-item{margin:5px 15px 5px auto; width:90%;display: inline-block;}
.f-price{ position: absolute;
  left: 10px;
  top: 86px;  width: 35%;}
.buy{position: absolute;left: 10px;
  bottom: 25px;
  width: 38%;
  text-align: center;}
      .login-input{margin:10px auto;width:70%;border-radius: .24rem;}
      .login-form{width:60%;display: inline-block;position: relative;}
      .login-btn{padding:.5rem;width:50%;border-radius: .24rem;}
        .announcement{width:100%;}
        .row{width: 65vw;}

    }
    @media screen and (max-width: 600px) {
      .features{width:95%;margin:10px;}
      .item{display: inline-block;width:95%;margin:10px auto;position: relative;}
.f-item{margin:5px 15px 5px auto; width:90%;display: inline-block;}
.f-price{ margin: 32px auto;
    left: auto!important;
    top: auto!important;
    width:95%;
}
.buy{
position: relative;

  width: 95%;
  text-align: center;
  left: auto;
      bottom: auto;
      display: block;
      margin: 105px auto 10px auto;
}
      .row{width: 98vw;}

      .login-input{margin:10px auto;width:70%;border-radius: .24rem;}
      .login-form{width:100%;display: inline-block;position: relative;}
      .login-btn{padding:.5rem;width:50%;border-radius: .24rem;}

        .announcement{width:100%;}
    }