.homeLoginPage{
  height: 100vh;
}

.loginPart {
  background: #317A53;
  box-shadow: 5px 5px 5px 5px black;
}
.loginPart .btn {
  color: white;
}
.boxLogin .boxLoginBody {
  padding: 10px;
  border-radius: 10px;
  box-shadow: 1px 17px 12px -19px black;
  background-color: white;
}
.boxLoginBody h5 {
  font-size: 25px;
  color: #317A53;
  font-family: "Cairo", sans-serif;
}
.boxLoginBody label,
.boxLoginBody a {
  color: #317A53;
}
.boxLoginBody input {
  background-color: rgba(128, 128, 128, 0.089);
  border: 0px;
}
.boxLoginUserIcons {
  height: 120px;
  width: 120px;
  border-radius: 250px;
  margin: auto;
  margin-top: -70px;
  margin-bottom: 20px;
  background-color: #317A53;
  text-align: center;
}
.boxLoginRemeber a {
  font-size: 14px;
  color: gray;
}
.boxLoginUserIcons i {
  font-size: 110px;
  color: white;
  margin-top: 5px;
}
.backgroundPart {
  height: 100vh;
  background-color: #123322e6;
  box-shadow: inset 0px 0px 50px 0px #000000ab;
}

.bkgLoginpage {
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-size: 2000px;
  animation-name: bgLoginPage;
  animation-iteration-count: infinite;
  animation-duration: 30s;
  animation-direction: alternate;
  padding: 0px;
  background-image: url("../images/bkg.jpg");
}
@keyframes bgLoginPage {
  0% {
    background-size: 2000px;
    background-position: left;
  }

  100% {
    rotate-: overflow-y;
    background-size: 2500px;
    background-position: 75%;
  }
}
.boxBackgroundLogin img {
  width: 150px;
}

.boxBackgroundLogin p {
  color: white;
}
.boxBackgroundLogin .boxLoginNotis {
  color: white;
  font-family: "Cairo", sans-serif;
  background-color: rgba(0, 0, 0, 0.472);
  padding: 8px 15px;
  border-radius: 200px;
}
.boxBackgroundLogin .boxLoginNotis a:not([href]):hover {
  color: white;
}
.boxBackgroundLogin .boxLoginPhoneNumber {
  color: white;
  font-size: 40px;
  letter-spacing: 5px;
  margin-top: 10px;
}
.boxBackgroundLogin a:not([href]):hover {
  color: white;
}
.boxLoginFooter {
  border-top: 1px solid rgba(180, 180, 180, 0.479);
  margin-top: 15px;
  padding-top: 10px;
}
.boxLoginFooter a {
  font-size: 13px;
  color: gray;
}
.boxLoginFooter a:hover {
  color: #317A53;
  cursor: pointer;
}
.msgMobile {
  font-size: 14px;
  margin-top: 15px;
}
.msgMobile a {
  color: gray;
}

.boxBackgroundLogin {
}

.boxBackgroundLogin h1 {
  color: rgb(255, 219, 118);
  font-family: "Cairo", sans-serif;
}

.pinkBg {
  background-color: #ffa600 !important;
  background-image: linear-gradient(90deg, #06d3ee, #07d6f1);
}
.intro-banner-vdo-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  margin: -30px 0 0 -30px;
  border-radius: 100px;
  z-index: -1;
}
.intro-banner-vdo-play-btn i {
  line-height: 56px;
  font-size: 30px;
}
.intro-banner-vdo-play-btn .ripple {
  position: absolute;
  width: 220px;
  height: 220px;
  z-index: -1;
  left: 50%;
  top: 50%;
  opacity: 0;
  margin: -80px 0 0 -80px;
  border-radius: 500px;
  -webkit-animation: ripple 1.8s infinite;
  animation: ripple 1.8s infinite;
}

@-webkit-keyframes ripple {
  0% {
    opacity: 1;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes ripple {
  0% {
    opacity: 1;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.intro-banner-vdo-play-btn .ripple:nth-child(2) {
  animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
}
.intro-banner-vdo-play-btn .ripple:nth-child(3) {
  animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
}

.LoginPanel{
  height: 100vh;
}
.Programmer2 a{
  color: #88b19b;
  font-size: 12px;
  font-family: tahoma;
  font-weight: 100;
  position: absolute;
  bottom: -35px;
  text-align: center;
  left: 54px;
  text-shadow: 0px 1px 1px black;
}
.Programmer2:hover{
  color:#90dfef;
}

.boxBackgroundLogin .d-flex{
  display: block!important;
}
.boxLogin{
  margin: auto;
  /*padding-top: 38%;*/
  max-width: 400px;
}
.boxBackgroundLogin{
  margin: auto;
  /*padding-top: 20%;*/
  max-width: 500px;
}

/* //////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////// */

/* iPad Pro rotate*/
@media (max-width: 1366px){
.d-flex{
  display: block!important;
}
.boxLogin{
  margin: auto;
  padding-top: 54%;
  max-width: 400px;
}
.boxBackgroundLogin{
  margin: auto;
  padding-top: 31%;
  max-width: 500px;
}
.Programmer2 a{
  color: #88b19b;
  font-size: 11px;
  font-family: tahoma;
  font-weight: 100;
  position: absolute;
  bottom: -37px;
  text-align: center;
  width: 350px;
  left: 25px;
  text-shadow: 0px 1px 1px black;
  font-size: 0.8rem;
}
}

/* iPad Pro Rotate*/
@media (max-width: 1024px){
  .d-flex{
    display: block!important;
  }
  .boxLogin{
    margin: auto;
    padding-top: 54%;
    max-width: 400px;
  }
  .boxBackgroundLogin{
    margin: auto;
    padding-top: 31%;
    max-width: 500px;
  }
  .Programmer2 a{
    color: #88b19b;
    font-size: 11px;
    font-family: tahoma;
    font-weight: 100;
    position: absolute;
    bottom: -32px;
    text-align: center;
    width: 350px;
    left: 17px;
    text-shadow: 0px 1px 1px black;
  }
  }

  @media (max-width: 768px){
    .Programmer2 a{
      left: -28px;
      bottom: -31px;
    }
    }



@media (max-width: 414px) {
  
/* منطقة الدخول */
.d-flex{
  display: block!important;
}
  .bkgLoginpage{
    display: block;
  }
.loginPart{
  flex: none!important;
    max-width: 100%!important;
    height: 100vh;
    display: none;
}
.boxLogin{
  max-width: 330px;
    margin:0px!important;
}
.boxLoginBody{
  position: relative;
  right: 25px;
  bottom: 25px;
}


/* منطقة عرض الشعار وزر الدخول */
.boxBackgroundLogin{
  max-width: 350px;
  padding-top: 53%;
}
.boxBackgroundLogin h1{
  font-size: 25px;
  width: 300px;
}
.boxBackgroundLogin p{
display: none;
}
.boxLoginNotis{
  display: none;
}
.boxLoginPhoneNumber{
  display: none;
}
.btnMobilePage{
  border-radius: 50px;
  margin-top: 10px;
  box-shadow: 0px 2px 2px #000000b3;
  display: block!important;
}

.Programmer{
  width: 350px;
  display: block!important;
}
.Programmer a{
  color: #9E9E9E;
  font-size: 11px;
  font-family: tahoma;
  font-weight: 100;
  position: absolute;
  bottom: -228px;
  text-align: center;
  left: 40px;
  text-shadow: 0px 2px 2px black;
   
}
.Programmer2 a{
  color: #88b19b;
  font-size: 11px;
  font-family: tahoma;
  font-weight: 100;
  position: absolute;
  bottom: -5px;
  text-align: center;
  width: 350px;
  left: -20px;
  text-shadow: 0px 1px 1px black;
}
.Programmer:hover{
  color: white;
}

.btnMobilePage{
  position: relative;
  right: 64px;
  top: 10px;
}


}

@media (max-width: 375px){ 
  .boxLoginBody{ 
    right: 8px; 
  }
  .Programmer a{
    bottom: -183px;
  }
 }
@media (max-width: 360px){ 
  .boxLogin{
    max-width: 315px;
  }
  .boxLoginBody{ left: 0px; }
  .Programmer a {
    bottom: -165px;
}
 }
 
@media (max-width: 320px){ 
  .boxLoginBody{
    right:7px;
    bottom: 50px;
  }
  .Programmer2{
    bottom: 15px;
    right: 191px;
}
  .boxLogin{
    max-width: 275px;
  }
  .Programmer a{
    bottom: -112px;
    left: 15px;
  }
 }