@font-face {
  font-family: CoconÆNextArabic;
  src: url(../fonts/coconnextarabic-light.ttf);
}

body {
  font-family: CoconÆNextArabic;
  text-align: right;
  direction: rtl;
}
a {
  text-decoration: none;
}
ul {
  padding-right: 0;
}
ul li {
  list-style-type: none;
}

/* start hero section */
.hero {
  background: url(../image/hero.png) no-repeat 100%;
  background-size: cover;
}
@media only screen and (max-width: 600px) {
  .hero {
    background-image: linear-gradient(to top, #009a93, #333a92);

    text-align: center;
  }
}
.navbar-brand img {
  width: 180px;
}

.navbar-nav li {
  transition: all 0.5s;
}

.navbar-nav li a {
  color: #939393 !important;
  transition: all 0.5s;
}

.navbar-nav li a:hover {
  color: #009a93 !important;
  transition: all 0.5s;
}

.header .doc {
  margin-bottom: 40px;
  margin-top: 100px;
  padding: 20px 40px;
}

.header .header-info {
  margin-top: 90px;
  transition: all ease 0.5s;
}

.header .header-info h1 {
  color: #fff;
  font-size: 60px;
}
.header .header-info h4 {
  color: #fff;
  font-size: 23px;
  line-height: 1.5;
  padding-bottom: 30px;
  width: 90%;
}
.btn-primary {
  padding: 8px 45px;
  background-image: linear-gradient(to right, #545baa, #333a92);
  border: 1px solid #545baa !important;
}

.header .header-info .btn-secondary {
  padding: 8px 45px;
  color: #fff;
  border: 1px solid #fff;
  background-color: transparent;
  transition: all ease 0.3s;
}
.header-info .btn-secondary:hover {
  background-image: linear-gradient(to left, #545baa, #333a92);
  border-color: #545baa !important;
  transition: all ease 0.3s;
}
.header .follow-us {
  margin-top: 180px;
}

.header .follow-us i {
  color: #939393;
  padding-right: 20px;
  font-size: 20px;
  opacity: 0.5;
}
.header .follow-us span {
  color: #939393;
  padding-left: 35px;
  font-size: 18px;
  opacity: 0.9;
}
@media only screen and (max-width: 600px) {
  .header .follow-us {
    margin-top: 50px;
  }
  .header .follow-us i {
    color: #fff;
  }
  .header .follow-us span {
    color: #fff;
  }
}
/* start why us */
.why-us {
  padding: 40px 0;
}
.head {
  text-align: center;
}
.head h2 {
  color: #333a92;
  padding-bottom: 10px;
}
.head p {
  color: #939393;
}
.skill {
  margin: 40px;
}
.skill img {
  padding: 20px 0;
}
.skill p {
  color: #939393;
  width: 80%;
  padding-bottom: 30px;
}

/* start services */
.main-timeline {
  position: relative;
}
.main-timeline:before {
  content: "";
  width: 1px;
  height: 100%;
  border-radius: 20px;
  margin: 0 auto;
  background: #acacae;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.main-timeline .timeline {
  display: block;
  margin-bottom: 50px;
  position: relative;
}
.main-timeline .timeline:before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: #d6d6d6;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
}
.main-timeline .timeline-icon {
  display: inline-block;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 35%;
  transform: translateY(-50%);
  padding-top: 30px;
}
.main-timeline .timeline-icon img {
  display: block;
  color: #fff;
  line-height: 100px;
  z-index: 1;
  position: relative;
}

.main-timeline .timeline-content {
  width: 50%;
  padding: 0 50px;
  margin: 52px 0 0;
  float: right;
  position: relative;
}
.main-timeline .timeline-content:before {
  content: "";
  width: 80%;
  height: 100%;
  border: 1px solid #d6d6d6;
  border-top: none;
  border-right: none;
  position: absolute;
  bottom: -6px;
  left: 36px;
}
.main-timeline .timeline-content:after {
  content: "";
  width: 37px;
  height: 1px !important;
  background: #d6d6d6;
  position: absolute;
  top: 5px;
  left: 0;
}
.main-timeline .con-s:before {
  width: 85%;
  bottom: -15px;
  left: 30px;
}
.main-timeline .con-s:after {
  top: 15px;
  width: 36px;
}

.main-timeline .title {
  font-size: 22px;
  font-weight: 600;
  color: #009a93;
  text-transform: uppercase;
  margin: 0 0 5px;
}
.main-timeline .description {
  display: inline-block;
  font-size: 18px;
  color: #939393;
  line-height: 1.3;
  letter-spacing: 1px;
  margin: 0;
  padding-bottom: 6px;
}
.main-timeline .timeline:nth-child(even) .timeline-icon {
  left: auto;
  right: 40%;
}
.main-timeline .timeline:nth-child(even) .timeline-icon:before {
  right: auto;
  left: -100px;
}
.main-timeline .timeline:nth-child(even) .timeline-icon:after {
  right: auto;
  left: -30px;
}
.main-timeline .timeline:nth-child(even) .timeline-content {
  float: left;
}
.main-timeline .timeline:nth-child(even) .timeline-content:before {
  left: auto;
  right: 35px;
  transform: rotateY(180deg);
}
.main-timeline .timeline:nth-child(even) .timeline-content:after {
  left: auto;
  right: 0;
}
.g::before {
  background-color: #009a93 !important;
  border: 0.5px solid #fff;
  box-shadow: 0px 0px 0px 1px #009a93;
}
.b::before {
  background-color: #333a92 !important;
  border: 0.5px solid #fff;
  box-shadow: 0px 0px 0px 1px #333a92;
}
.main-timeline .timeline:nth-child(2n) .timeline-content:after,
.main-timeline .timeline:nth-child(2n) .timeline-icon i,
.main-timeline .timeline:nth-child(2n) .timeline-icon:before,
.main-timeline .timeline:nth-child(2n):before {
  background: #d6d6d6;
}
.main-timeline .timeline:nth-child(2n) .timeline-icon {
  border-color: #d6d6d6;
}
.main-timeline .timeline:nth-child(2n) .title {
  color: #333a92;
}
.main-timeline .timeline:nth-child(2n) .timeline-content:before {
  border-left-color: #d6d6d6;
  border-bottom-color: #d6d6d6;
}
.main-timeline .timeline:nth-child(3n) .timeline-content:after,
.main-timeline .timeline:nth-child(3n) .timeline-icon i,
.main-timeline .timeline:nth-child(3n) .timeline-icon:before,
.main-timeline .timeline:nth-child(3n):before {
  background: #d6d6d6;
}
.main-timeline .timeline:nth-child(3n) .timeline-icon {
  border-color: #d6d6d6;
}
.main-timeline .timeline:nth-child(3n) .title {
  color: #009a93;
}
.main-timeline .timeline:nth-child(3n) .timeline-content:before {
  border-left-color: #d6d6d6;
  border-bottom-color: #d6d6d6;
}
.main-timeline .timeline:nth-child(4n) .timeline-content:after,
.main-timeline .timeline:nth-child(4n) .timeline-icon i,
.main-timeline .timeline:nth-child(4n) .timeline-icon:before,
.main-timeline .timeline:nth-child(4n):before {
  background: #d6d6d6;
}
.main-timeline .timeline:nth-child(4n) .timeline-icon {
  border-color: #d6d6d6;
}
.main-timeline .timeline:nth-child(4n) .title {
  color: #333a92;
}
.main-timeline .timeline:nth-child(4n) .timeline-content:before {
  border-left-color: #d6d6d6;
  border-bottom-color: #d6d6d6;
}
@media only screen and (max-width: 1200px) {
  .main-timeline .timeline-icon:before {
    width: 50px;
    right: -50px;
  }
  .main-timeline .timeline:nth-child(even) .timeline-icon:before {
    right: auto;
    left: -50px;
  }
  .main-timeline .timeline-content {
    margin-top: 75px;
  }
}
@media only screen and (max-width: 990px) {
  .main-timeline .timeline {
    margin: 0 0 10px;
  }
  .main-timeline .timeline-icon {
    left: 25%;
  }
  .main-timeline .timeline:nth-child(even) .timeline-icon {
    right: 25%;
  }
  .main-timeline .timeline-content {
    margin-top: 115px;
  }
}
@media only screen and (max-width: 767px) {
  .main-timeline {
    padding-top: 50px;
  }
  .main-timeline:before {
    left: 80px;
    right: 0;
    margin: 0;
  }
  .main-timeline .timeline {
    margin-bottom: 70px;
  }
  .main-timeline .timeline:before {
    top: 0;
    left: 83px;
    right: 0;
    margin: 0;
  }
  .main-timeline .timeline-icon {
    width: 60px;
    height: 60px;
    line-height: 40px;
    padding: 5px;
    top: 0;
    left: 0;
  }
  .main-timeline .timeline:nth-child(even) .timeline-icon {
    left: 0;
    right: auto;
  }
  .main-timeline .timeline-icon:before,
  .main-timeline .timeline:nth-child(even) .timeline-icon:before {
    width: 25px;
    left: auto;
    right: -25px;
  }
  .main-timeline .timeline-icon:after,
  .main-timeline .timeline:nth-child(even) .timeline-icon:after {
    width: 25px;
    height: 30px;
    top: 44px;
    left: auto;
    right: -5px;
  }
  .main-timeline .timeline-icon i {
    font-size: 30px;
    line-height: 45px;
  }
  .main-timeline .timeline-content,
  .main-timeline .timeline:nth-child(even) .timeline-content {
    width: 100%;
    margin-top: -15px;
    padding-left: 130px;
    padding-right: 5px;
  }
  .main-timeline .timeline:nth-child(even) .timeline-content {
    float: right;
  }
  .main-timeline .timeline-content:before,
  .main-timeline .timeline:nth-child(even) .timeline-content:before {
    width: 50%;
    left: 120px;
  }
  .main-timeline .timeline:nth-child(even) .timeline-content:before {
    right: auto;
    transform: rotateY(0);
  }
  .main-timeline .timeline-content:after,
  .main-timeline .timeline:nth-child(even) .timeline-content:after {
    left: 85px;
  }
}
@media only screen and (max-width: 479px) {
  .main-timeline .timeline-content,
  .main-timeline .timeline:nth-child(2n) .timeline-content {
    padding-left: 110px;
  }
  .main-timeline .timeline-content:before,
  .main-timeline .timeline:nth-child(2n) .timeline-content:before {
    left: 99px;
  }
  .main-timeline .timeline-content:after,
  .main-timeline .timeline:nth-child(2n) .timeline-content:after {
    left: 65px;
  }
}
.main-timeline .timeline-content:before {
  border-bottom-left-radius: 14px;
}
/* start down load */

.download-app {
  background-image: linear-gradient(to left, #009a93, #333a92);
  border-radius: 15px;
  margin-bottom: 40px;
}
@media only screen and (max-width: 600px) {
  .download-app {
    text-align: center;
  }
}
.download-app .logo-down img {
  padding-top: 20px;
  padding-right: 20px;
}
.logo-down {
  margin-top: 20px;
}
.app {
  margin-top: 30px;
}
.app img {
  padding: 10px;
}
.doc-down img {
  float: left;
  width: 80%;
}
/* start footer */
.footer {
  background-color: #303036;
  padding: 40px 0;
  text-align: right;
}
.footer h5 {
  color: #fff;
}
.footer ul li {
  margin-bottom: 7px;
  margin-top: 7px;
}
.footer ul li a {
  color: #acacae;
}

.footer .social-icon a {
  border: 1px solid #47bfba;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: block;
  font-size: 16px;
  text-align: center;
  margin-left: 5px;
}
.footer .social-icon ul {
  padding-right: 0;
}
.footer .social-icon ul li {
  display: inline-block;
}
.footer .social-icon {
  transition: all ease 0.3s;
}
.footer .social-icon i {
  color: #47bfba;
  padding: 7px 8px;
}

.footer .contact-footer {
  padding-top: 15px;
  transition: all ease 0.3s;
}
.footer .contact-footer i {
  background-color: #333a92;
  border-radius: 50%;
  margin-left: 10px;
  font-size: 12px;
}
.footer .contact-footer i:hover {
  background-color: #009a93;
  transition: all ease 0.3s;
}
.footer .contact-footer span {
  color: #acacae;
}
.footer .contact-footer i {
  padding: 10px;
  color: #fff;
}
/* head-color section */
.head-color {
  background: linear-gradient(to left, #009a93, #333a92);
}
.head-image {
  background: url(../image/shape-hero.png) top;
}
.head-color h3 {
  color: #fff;
  text-align: right;
  padding: 30px 0;
}
/* start know more */
.know-more {
  background-color: rgba(212, 212, 212, 0.171);
  padding: 40px 0;
  margin-bottom: 40px;
}
.know {
  margin-top: 60px;
  margin-right: 20px;
}
.know h3 {
  font-size: 36px;
  padding-bottom: 20px;
}
.know p {
  color: #939393;
  width: 80%;
}
.serv {
  color: #fff;
  background: linear-gradient(to right, #009a93, #333a92);
  margin-bottom: 140px;
  margin-top: 50px;
  margin-left: 1px;
}
@media only screen and (max-width: 600px) {
  .know {
    margin-top: 5px;
    text-align: center;
  }
  .know p {
    width: 100%;
    padding: 10px;
  }
  .serv {
    margin-bottom: 20px;
    margin-top: 20px;
  }
  .app {
    margin-bottom: 30px;
  }
  .info-serv h5 {
    width: 80%;
  }
}

.image-serv {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 300px;
}
.info-serv {
  padding: 30px;
}
.info-serv h5 {
  font-size: 16px;
}
/* start term */
.terms {
  padding: 40px 0;
}
.term p {
  color: #939393;
  font-size: 16px;
}
.term h2 {
  font-size: 24px;
}
/* start quest */
.quest {
  padding: 40px 0;
}
.answer {
  background-color: rgba(247, 245, 245, 0.527);
  padding: 10px;
  border-radius: 8px;
  border: 2px solid #acacae2d;
  margin-bottom: 20px;
}
.answer p {
  color: #939393;
  line-height: 1.7;
  font-size: 18px;
}
.Q h3 {
  font-size: 20px;
}
/*start send  */
.send {
  background: url(../image/box.png) -150px center no-repeat;
  padding: 40px 0;
  margin-bottom: 40px;
}
label {
  color: #3f4698 !important;
}
.send p {
  color: #939393;
}
.form-control {
  border: 2px solid #eff0f1;
  /* padding: 20px; */
}
.send .float-left {
  padding: 8px 70px;
}
/* start sign in */
.sign-in {
  padding: 40px 0;
}
.sign-in .container {
  border: 2px solid #eff0f1;
}
.sign-in h3 {
  color: #333a92;
  font-size: 32px;
  padding-bottom: 5px;
}
.sign-in p {
  color: #939393;
}
.sign-info,
.sign-form {
  margin: 40px;
}
.btn-danger,
.btn-warning {
  background-color: #333a92;
  border: 1px solid #333a92;
  color: #fff !important;
  transition: all ease 0.5;
}
.btn-danger:hover,
.btn-warning:hover {
  background-color: #009a93;
  border: 1px solid #009a93;
  transition: all ease 0.5;
}
.sign-info .btn-danger {
  margin-top: 75px;
}
.btn-danger {
  margin-bottom: 20px;
}
small {
  padding: 5px 0;
}
small i {
  padding-left: 5px;
}
@media only screen and (max-width: 600px) {
  .sign-info .btn-danger {
    margin-top: 20px;
  }
}
/* start signUp */

.sign-up {
  padding: 40px 0;
}

.sign-up h4 {
  padding-bottom: 5px;
}
.sign-up .signUp-head p {
  color: #939393;
  font-size: 14px;
}
.pop-up p {
  padding-top: 10px;
}
.pop-up a {
  color: #009a93;
}
#form1 input {
  padding: 5px;
  width: 45px;
  height: 45px;
  margin: 10px 5px;
  border: 2px solid #eff0f1;
  border-radius: 7px;
}
.modal-footer,
.modal-header {
  border: none;
}
.modal-content {
  border-radius: 0.7rem;
}
.modal {
  padding-left: 0px;
  padding-right: 0px;
}
.modal-footer .btn-primary {
  margin-bottom: 40px;
  margin-right: 40px;
  margin-left: 40px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.pass-word {
  padding: 40px 0;
}
select {
  background-image: linear-gradient(45deg, transparent 50%, #acacae 60%),
    linear-gradient(135deg, #acacae 40%, transparent 50%) !important;
  background-position: calc(10% - 30px) 14px, calc(10% - 20px) 14px, 100% 0;
  background-size: 10px 10px, 10px 10px;
  background-repeat: no-repeat;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.input-group > .input-group-prepend > .input-group-text {
  border: 2px solid #eff0f1;

  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background: transparent;
  border-left: 0;
}
.input-group > .custom-select:not(:first-child),
.input-group > .form-control:not(:first-child) {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-right: 0;
}
.sign-up .float-left {
  margin-top: 20px;
}

.sign-up .input-group-text span {
  color: #939393;
}
/* @media only screen and (max-width: 600px) {
  .sign-up .float-left{
margin-left: 70px;

}
} */

.rem label {
  padding-right: 20px;
}
/* start signUp-2 */

.sign-up-2 {
  padding: 40px 0;
}

.sign-up-2 h4,
.Pass2-head h4 {
  padding-bottom: 5px;
}
.sign-up-2 .signUp-head p,
.Pass2-head p {
  color: #939393;
  font-size: 14px;
}
.formSignUp span {
  color: #983f5d;
}

.formSignUp a {
  color: #009a93;
}
/* start forgetting Password  */
.pass-word .Pass2-head {
  margin-bottom: 50px;
}
.pass-word .pass-form .btn-primary {
  margin-top: 30px;
}
/* passWord2 */
.pass-word-2 {
  padding: 40px 0;
}

.pass-word-2 {
  padding: 40px 0;
}
.new-pass-word .btn-danger {
  margin-top: 40px;
}
/*
.selectMultiple {
  position: relative;
}
.selectMultiple select {
  display: none;
}
.selectMultiple > div {
  position: relative;
  z-index: 2;
  padding: 8px 12px 2px 12px;
  background: #fff;
  font-size: 14px;
  min-height: 44px;
  border: 2px solid #eff0f1;
  border-radius: 4px;
}

.selectMultiple > div .arrow {
  left: 15px;
  top: 0;
  bottom: 0;
  cursor: pointer;
  width: 28px;
  position: absolute;
}
.selectMultiple > div .arrow:before,
.selectMultiple > div .arrow:after {
  content: "";
  position: absolute;
  display: block;
  width: 2px;
  height: 8px;
  border-bottom: 8px solid #99a3ba;
  top: 43%;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.selectMultiple > div .arrow:before {
  right: 12px;
  -webkit-transform: rotate(-130deg);
  transform: rotate(-130deg);
}
.selectMultiple > div .arrow:after {
  left: 9px;
  -webkit-transform: rotate(130deg);
  transform: rotate(130deg);
}
.selectMultiple > div span {
  color: #99a3ba;
  display: block;
  position: absolute;
  left: 12px;
  cursor: pointer;
  top: 8px;
  line-height: 28px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.selectMultiple > div span.hide {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate(-4px, 0);
  transform: translate(-4px, 0);
}
.selectMultiple > div a {
  position: relative;
  padding: 0 24px 6px 8px;
  line-height: 28px;
  color: #1e2330;
  display: inline-block;
  vertical-align: top;
  margin: 0 6px 0 0;
}
.selectMultiple > div a em {
  font-style: normal;
  display: block;
  white-space: nowrap;
}
.selectMultiple > div a:before {
  content: "";
  left: 0;
  top: 0;
  bottom: 6px;
  width: 100%;
  position: absolute;
  display: block;
  background: rgba(228, 236, 250, 0.7);
  z-index: -1;
  border-radius: 4px;
}
.selectMultiple > div a i {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 28px;
  display: block;
}
.selectMultiple > div a i:before,
.selectMultiple > div a i:after {
  content: "";
  display: block;
  width: 2px;
  height: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  background: #009a93;
  border-radius: 1px;
}
.selectMultiple > div a i:before {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
}
.selectMultiple > div a i:after {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
  transform: translate(-50%, -50%) rotate(-45deg);
}
.selectMultiple > div a.notShown {
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.selectMultiple > div a.notShown:before {
  width: 28px;
  -webkit-transition: width 0.45s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.2s;
  transition: width 0.45s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.2s;
}
.selectMultiple > div a.notShown i {
  opacity: 0;
  -webkit-transition: all 0.3s ease 0.3s;
  transition: all 0.3s ease 0.3s;
}
.selectMultiple > div a.notShown em {
  opacity: 0;
  -webkit-transform: translate(-6px, 0);
  transform: translate(-6px, 0);
  -webkit-transition: all 0.4s ease 0.3s;
  transition: all 0.4s ease 0.3s;
}
.selectMultiple > div a.notShown.shown {
  opacity: 1;
}
.selectMultiple > div a.notShown.shown:before {
  width: 100%;
}
.selectMultiple > div a.notShown.shown i {
  opacity: 1;
}
.selectMultiple > div a.notShown.shown em {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
.selectMultiple > div a.remove:before {
  width: 28px;
  -webkit-transition: width 0.4s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0s;
  transition: width 0.4s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0s;
}
.selectMultiple > div a.remove i {
  opacity: 0;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.selectMultiple > div a.remove em {
  opacity: 0;
  -webkit-transform: translate(-12px, 0);
  transform: translate(-12px, 0);
  -webkit-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.selectMultiple > div a.remove.disappear {
  opacity: 0;
  -webkit-transition: opacity 0.5s ease 0s;
  transition: opacity 0.5s ease 0s;
}
.selectMultiple > ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  z-index: 1;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
  border-radius: 8px;
  -webkit-transform: translate(0, 20px) scale(0.8);
  transform: translate(0, 20px) scale(0.8);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-filter: drop-shadow(0 12px 20px rgba(22, 42, 90, 0.08));
  filter: drop-shadow(0 12px 20px rgba(22, 42, 90, 0.08));
  -webkit-transition: all 0.4s ease,
    -webkit-transform 0.4s cubic-bezier(0.87, -0.41, 0.19, 1.44),
    -webkit-filter 0.3s ease 0.2s;
  transition: all 0.4s ease,
    -webkit-transform 0.4s cubic-bezier(0.87, -0.41, 0.19, 1.44),
    -webkit-filter 0.3s ease 0.2s;
  transition: all 0.4s ease,
    transform 0.4s cubic-bezier(0.87, -0.41, 0.19, 1.44), filter 0.3s ease 0.2s;
  transition: all 0.4s ease,
    transform 0.4s cubic-bezier(0.87, -0.41, 0.19, 1.44), filter 0.3s ease 0.2s,
    -webkit-transform 0.4s cubic-bezier(0.87, -0.41, 0.19, 1.44),
    -webkit-filter 0.3s ease 0.2s;
}
.selectMultiple > ul li {
  color: #1e2330;
  background: #fff;
  padding: 12px 16px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  -webkit-transition: background 0.3s ease, color 0.3s ease,
    opacity 0.5s ease 0.3s, border-radius 0.3s ease 0.3s,
    -webkit-transform 0.3s ease 0.3s;
  transition: background 0.3s ease, color 0.3s ease, opacity 0.5s ease 0.3s,
    border-radius 0.3s ease 0.3s, -webkit-transform 0.3s ease 0.3s;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease 0.3s,
    opacity 0.5s ease 0.3s, border-radius 0.3s ease 0.3s;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease 0.3s,
    opacity 0.5s ease 0.3s, border-radius 0.3s ease 0.3s,
    -webkit-transform 0.3s ease 0.3s;
}
.selectMultiple > ul li:first-child {
  border-radius: 8px 8px 0 0;
}
.selectMultiple > ul li:first-child:last-child {
  border-radius: 8px;
}
.selectMultiple > ul li:last-child {
  border-radius: 0 0 8px 8px;
}
.selectMultiple > ul li:last-child:first-child {
  border-radius: 8px;
}
.selectMultiple > ul li:hover {
  background: #009a93;
  color: #fff;
}
.selectMultiple > ul li:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  border-radius: 100%;
  -webkit-transform: scale(1, 1) translate(-50%, -50%);
  transform: scale(1, 1) translate(-50%, -50%);
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
.selectMultiple > ul li.beforeRemove {
  border-radius: 0 0 8px 8px;
}
.selectMultiple > ul li.beforeRemove:first-child {
  border-radius: 8px;
}
.selectMultiple > ul li.afterRemove {
  border-radius: 8px 8px 0 0;
}
.selectMultiple > ul li.afterRemove:last-child {
  border-radius: 8px;
}
.selectMultiple > ul li.remove {
  -webkit-transform: scale(0);
  transform: scale(0);
  opacity: 0;
}
.selectMultiple > ul li.remove:after {
  -webkit-animation: ripple 0.4s ease-out;
  animation: ripple 0.4s ease-out;
}
.selectMultiple > ul li.notShown {
  display: none;
  -webkit-transform: scale(0);
  transform: scale(0);
  opacity: 0;
  -webkit-transition: opacity 0.4s ease, -webkit-transform 0.35s ease;
  transition: opacity 0.4s ease, -webkit-transform 0.35s ease;
  transition: transform 0.35s ease, opacity 0.4s ease;
  transition: transform 0.35s ease, opacity 0.4s ease,
    -webkit-transform 0.35s ease;
}
.selectMultiple > ul li.notShown.show {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}
.selectMultiple.open > div {
  box-shadow: 0 4px 20px -1px rgba(22, 42, 90, 0.12);
}
.selectMultiple.open > div .arrow:before {
  -webkit-transform: rotate(-50deg);
  transform: rotate(-50deg);
}
.selectMultiple.open > div .arrow:after {
  -webkit-transform: rotate(50deg);
  transform: rotate(50deg);
}
.selectMultiple.open > ul {
  -webkit-transform: translate(0, 12px) scale(1);
  transform: translate(0, 12px) scale(1);
  opacity: 1;
  visibility: visible;
  -webkit-filter: drop-shadow(0 16px 24px rgba(22, 42, 90, 0.16));
  filter: drop-shadow(0 16px 24px rgba(22, 42, 90, 0.16));
}
*/
@-webkit-keyframes ripple {
  0% {
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
    opacity: 1;
  }
  25% {
    -webkit-transform: scale(30, 30);
    transform: scale(30, 30);
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(50, 50);
    transform: scale(50, 50);
  }
}

@keyframes ripple {
  0% {
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
    opacity: 1;
  }
  25% {
    -webkit-transform: scale(30, 30);
    transform: scale(30, 30);
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(50, 50);
    transform: scale(50, 50);
  }
}
html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before,
*:after {
  box-sizing: inherit;
}

/* steps */
.step {
  height: 1.5px;
  margin-top: 15px;
  background-color: #939393;
  width: 100%;
  margin-right: 20px;
}
.head-step {
  color: #939393;
}
.cirecl {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 4px solid #93939393;
}
.green-1 {
  color: #009a93;
}
.green-2 {
  border: 4px solid #009a93;
}

.green-3 {
  background-color: #009a93;
}

.head-step-2 {
  margin-right: 0px;
  color: #939393;
}
.steps {
  padding: 30px 0;
}

@media only screen and (max-width: 600px) {
  .steps {
    display: none;
  }
}
.input-group > .input-group-append > .input-group-text {
  border: 2px solid #eff0f1;

  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  background: transparent;
  border-right: 0;
}
.input-group > .custom-select:not(:last-child),
.input-group > .form-control:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left: 0;
}
/* custom file */
.custom-file {
  margin-bottom: 20px;
  border-radius: 0px;
  cursor: pointer;
}
.custom-file-label::after {
  background-color: transparent;
  content: "";
  border-left: none;
  border-radius: 0;
  cursor: pointer;
}
.custom-file-input {
  border: none !important;
  cursor: pointer;
}
.custom-file img {
  width: 17px;
}

.custom-file span {
  display: block;
  position: relative;
  top: -12px;
  left: -48px;
}

.custom-file-label {
  border: 2px solid #eff0f1;
  padding: 20px 60px;
}
.formSignUp .btn-danger {
  padding: 8px 70px;
  margin-top: 20px;
}
.head-step ul {
  padding-right: 0;
}
.head-step ul li {
  display: inline-block;
}
.head-step ul .li-width {
  width: 58%;
}
.header .btn-primary {
  margin-left: 10px;
}
/* start index-2 */
.hero .navbar-nav .btn-info {
  background-color: #009a93;
  border-radius: 20px;
  padding: 5px 15px;
}
.hero .navbar-nav .btn-secondary {
  background-color: transparent;
  color: #231f20;
  border: none;
}
.hero .navbar-nav .btn-secondary:hover {
  background-color: transparent;
  color: #231f20;
  border: none;
}
.btn-secondary.focus,
.btn-secondary:focus {
  box-shadow: none;
}
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: none;
}
.hero .navbar-nav .dropdown-toggle::after {
  display: inline-block;
  margin-right: 8px;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
  padding-top: -3px;
}
.hero .navbar-nav .dropdown-item:hover {
  color: #983f5d;
}
.dropdown-menu {
  margin-top: 20px;
  text-align: right;
  padding-left: 40px;
  padding-bottom: 10px;
}
.dropdown button {
  font-size: 14px;
}
.mt-10 {
  margin-top: 11px;
}
.hero .navbar-nav .dropdown-toggle::after {
  display: none;
}
.hero .navbar-nav .profile-after::after {
  display: inline-block;
}
.notif-ul li {
  float: right;
}
ul.notif-ul:hover {
  background-color: #983f5d;
}
.drop-size {
  padding: 0;
  width: 300px;
}
.notif-ul {
  display: block;
  padding: 0;
}
.prof-name {
  margin-top: 5px;
}
.badge-danger {
  background-color: #983f5d;
  border-color: #983f5d;
  border-radius: 15px;
  padding: 0.25em 0.7em;
}
.notif-time span {
  font-size: 10px;
}
.notif-time {
  padding-right: 70px;
}
.s-time {
  color: #983f5d;
  padding-right: 10px;
}
.p-time {
  margin-top: 5px;
}
.p-time span {
  font-size: 12px;
}
.badge-2 {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  padding: 0;
  margin-right: 25px;
}
.msg-drop {
  margin-top: 19px;
}

@media only screen and (max-width: 600px) {
  .navbar-nav {
    text-align: right;
  }
}
.checked {
  color: orange;
}
.not-checked {
  color: #dddbd7;
}
.requsts {
  padding: 00px 0;
  margin: 20px;
}
.request-box {
  border: 2px solid #eff0f1;
  border-radius: 6px;
  margin: 10px 1px;
  width: 100%;
}
.rating-btn {
  margin-top: 50px;
}
.rating {
  margin-right: 22px;
  margin-top: 20px;
}
.rating span {
  font-size: 13px;
}

.rating-btn .btn-primary {
  background-color: #009a93 !important;
  background-image: none;
  border: none !important ;
  padding: 8px 50px;
}
.req-info h5 {
  color: #3f4698;
}
.req-info p {
  color: #939393;
  font-size: 16px;
}
.req-info p span {
  color: #039a93;
}
.req-img {
  margin: 15px 0;
}
.req-img img {
  width: 100px;
}

@media only screen and (max-width: 600px) {
  .req-img img {
    width: 80px;
    padding-left: 35px;
  }
  .rating-btn {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

.req-details {
  border: 2px solid #eff0f1;
  border-radius: 6px;
  margin: 10px;
  padding: 20px;
}
.badge-info {
  background-color: #009a93;
  border-color: #009a93;
  border-radius: 15px;
  padding: 0.25em 0.7em;
}
.badge-3 {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  padding: 0;
}
.new-req p {
  color: #009a93;
}
.req-details .req-body p {
  font-size: 14px;
  color: #939393;
  margin-bottom: 0;
  padding-bottom: 0;
}
.req-details .req-body h5 {
  font-size: 17px;
  margin-top: 2px;
  padding-top: 2px;
}
.req-details .req-body a {
  color: #039a93;
}
.req-body {
  border-bottom: 2px solid #eff0f1;
}
.req-btn .btn-primary {
  padding: 8px 50px;
}
.btn-edit {
  padding: 8px 60px !important;
}
.btn-cancl {
  background-color: rgba(78, 78, 78, 0.1) !important;
  background-image: none;
  color: #303036;
  border: none !important;
}
.btn-cancl:hover {
  background-color: rgba(78, 78, 78, 0.1) !important;
  background-image: none;
  color: #303036;
  border: none !important;
}
@media only screen and (max-width: 600px) {
  .btn-edit {
    margin-right: 17px;
    padding: 8px 63px !important;
  }
  .btn-cancl {
    margin-top: 10px;
  }
}
.req-btn .modal-footer {
  margin-left: 85px;
}
.req-btn .modal-footer .btn-primary {
  margin: 0;
  padding: 8px 50px;
}
.req-btn .modal-footer .btn-secondary {
  padding: 8px 48px;
  margin-right: 25px;
  background-color: rgba(78, 78, 78, 0.1) !important;
  background-image: none;
  color: #303036;
  border: none !important;
}
@media only screen and (max-width: 600px) {
  .req-btn .modal-footer {
    margin-left: 35px;
  }
}
.text-content .modal-header {
  display: block;
}

.t-group textarea.form-control {
  height: 70px;
}

.t-btn .req-btn .modal-footer .btn-primary {
  padding: 8px 50px;
  margin-top: 6px;
}

.t-btn .req-btn .modal-footer {
  margin-left: 5px !important;
}

/* start new request */

.send-1 {
  background: url(../image/man.png) -270px center no-repeat;
}
.text-content img {
  width: 100px;
}
.text-content h5 {
  width: 60%;
  margin: 0 auto;
}
.red span {
  color: #983f5d;
}
.red {
  color: #983f5d;
}
/* start pay */
.gee {
  color: #009a93;
}
.pay {
  background: url(../image/pay.png) -300px center no-repeat;
  padding: 60px 0;
  height: 85vh;
}

.pay p {
  color: #939393;
}

.pay .float-left {
  padding: 8px 70px;
}
/* start record request */

.rec-row {
  border: 2px solid #eff0f1;
  margin-top: 20px;
  padding-top: 30px;
  border-radius: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.rec-row-2 {
  margin-top: 20px;
  padding-top: 30px;
  border-radius: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: rgba(250, 250, 250, 0.6);

}
.record-row {
  border: 2px solid #eff0f1;
  padding: 15px;
  border-radius: 5px;
  margin-top: 50px;
  margin-bottom: 50px;
  margin-left: 10px;
  margin-right: 10px;
}
.record-row-2 {
  padding: 15px;
  border-radius: 5px;
  margin-top: 50px;
  margin-bottom: 50px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: rgba(250, 250, 250, 0.6);
}
.record-row-3{
  border-radius: 5px;
  margin-top: 41px;
  margin-left: 10px;
  margin-right: 10px;
}
.rec-box {
  border: 2px solid #eff0f1;
  padding-top: 20px;
  border-radius: 5px;
  margin-top: 20px;
  margin-bottom: 10px;
}
.rec-box-2 {
  padding: 15px;
  border-radius: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: rgba(250, 250, 250, 0.6);

}
.h-g {
  color: #009a93;
}
.h-d {
  color: #939393;
  font-size: 14px;
}
.btn-recive {
  background-color: #3f4698;
  color: #fff;
  padding: 8px 40px;
  transition: all ease 0.3s;
}
.btn-recive:hover {
  color: #fff;
  background-color: #009a93;
  transition: all ease 0.3s;
}
.record-row a {
  color: #009a93;
}
.btn-cancel-rec {
  background-color: #47bfba;
  color: #fff;
  margin: 0 auto;
}
.btn-cancel-rec:hover {
  background-color: #47bfba;
  color: #fff;
}
.req-rating span {
  font-size: 18px;
}
@media only screen and (max-width: 600px) {
  .new-badg{
float: right !important;  }
.record-ul li{
display: inline-block;
}
}
/*  */
.btn-record-edit {
  background-color: #333a92;
  color: #fff;
  padding: 8px 75px;
  margin-top: 10px;
}
.btn-record-edit:hover {
  background-color: #333a92;
  color: #fff;
  padding: 8px 75px;
  margin-top: 10px;
}
.btn-record-cancel {
  background-color: rgba(78, 78, 78, 0.103);
  color: #303036;
  padding: 8px 60px;
  margin-top: 10px;
}
.pop-p {
  width: 65%;
  margin: 0 auto;
}
.img-pop img {
  width: 50px;
}
.y-color {
  color: #ffaa00;
}
.y-color span {
  background-color: #ffaa00;
}
.rat-rec span {
  font-size: 10px;
}
.text-muted-rat {
  font-size: 14px;
  color: #939393;
}
/* start tabs */
.nav-new .nav-tabs .nav-link {
  border: none;
  color: #939393;
  font-size: 18px;
}
.nav-new .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: #009a93;
  border-bottom: 2px solid #009a93;
}
.h-b {
  color: #3f4698;
}
.order {
  background-color: #eff0f159;
  padding: 20px;
  margin-top: 10px;
}
.h-muted {
  color: #939393;
}
.badge-warn {
  background-color: #983f5d;
}

.h-r {
  color: #983f5d;
}
/* start chat */
.active-cyan-4 input[type="text"]:focus:not([readonly]) {
  border: 1px solid #3f4698;
  box-shadow: 0 0 0 1px #3f4698;
  background-color: #eff0f1b4;
}
.active-cyan-4 input {
  background-color: #eff0f1b4;
  border: none;
  padding: 25px 50px;
}
.hover-chat {
  overflow: hidden;
  transition: all ease 0.3s;
  border-radius: 5px;
}
.hover-chat:hover {
  background-color: #9b31542f;
  transition: all ease 0.3s;
}
.border-col {
  border: 2px solid #eff0f1;
  border-radius: 5px;
  margin-right: 10px;
  margin-left: 10px;
}
.pro img {
  width: 40px;
  margin-right: 40px;
}

@media only screen and (max-width: 600px) {
  .pro img {
    margin-right: 0px;
    padding-bottom: 5px;
  }
}
.pro {
  border-bottom: 1px solid #eff0f1;
}
.pro .dropdown-toggle::after {
  border: none;
  display: none;
}
.pro .dropdown-item {
  transition: all ease 0.3s;
}
.pro .dropdown-item:hover {
  color: #983f5d;
  transition: all ease 0.3s;
}

.pro .dropdown-item i {
  font-size: 25px;
  color: #009a93;
  margin-left: 20px;
  font-size: 20px;
}
.pro .dropdown-item i:hover {
  color: #983f5d !important;
}
.pro .btn {
  border: none;
}
.badge-chat {
  padding: 20px 40px;
  background-color: #333a92;
  color: #fff;
  border-bottom-left-radius: 40px;
  border-top-left-radius: 40px;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 0;
}
.badge-chat-1 {
  padding: 20px 40px;
  background-color: transparent;
  color: #334856a1;
  border-bottom-right-radius: 40px;
  border-top-right-radius: 40px;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 0;
  border: 1px solid #dddbd7;
}
.clr {
  clear: both;
}
.msg-text textarea {
  background-color: #eff0f1b4;
  border: none;
  padding: 10px;
  width: 90%;
}
.bro-btnn {
  background-color: #333a92;
  color: #fff;
}
.content-box {
  background-color: #eff0f180;
  padding: 20px;
}
.pro-row {
  border-bottom: 1px solid #acacae38;
}
.badge-boxx {
  background-color: #3f4698;
  padding: 8px 30px;
  color: #fff;
}
.bbb {
  margin-left: 0 !important;
}
.menue-nav img {
  width: 20px;
}
/* side menue */

#wrapper {
  padding-left: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#wrapper.toggled {
  padding-right: 250px;
}

@media only screen and (max-width: 768px) {
  #wrapper.toggled {
    padding-right: 0px;
  }
}

#sidebar-wrapper {
  z-index: 1000;
  position: fixed;
  right: 250px;
  width: 0;
  height: 100%;
  margin-right: -250px;
  overflow-y: auto;
  background: #000;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
  width: 250px;
}

#page-content-wrapper {
  width: 100%;
  position: absolute;
  padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
  position: absolute;
  margin-right: 0px;
}

/* Sidebar Styles */

.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar-nav li {
  text-indent: 20px;
  line-height: 40px;
}

.sidebar-nav li a {
  display: block;
  text-decoration: none;
  color: #999999;
}

.sidebar-nav li a:hover {
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
  height: 65px;
  font-size: 18px;
  line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
  color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
  color: #fff;
  background: none;
}

@media (min-width: 768px) {
  #wrapper {
    padding-left: 0px;
  }
  #wrapper.toggled {
    padding-right: 250px;
  }
  #sidebar-wrapper {
    width: 0;
  }
  #wrapper.toggled #sidebar-wrapper {
    width: 250px;
  }
  #page-content-wrapper {
    padding: 20px;
    position: relative;
  }
  #wrapper.toggled #page-content-wrapper {
    position: relative;
    margin-right: 0;
  }
}
/* ************* */
.after-none .dropdown-toggle::after {
  display: none;
}
.sidebar-nav li {
  text-indent: 35px;
  line-height: 40px;
  margin-bottom: 17px;
}
.last-logOut {
  margin-top: 60px;
}
.last-logOut a {
  color: #983f5d !important;
}
.sidebar-brand {
  margin-bottom: 60px !important;
}
#sidebar-wrapper {
  background-color: #303036;
}
.side-head h6 {
  font-size: 14px;
  color: #616166;
}
.side-head h5 {
  font-size: 22px;
  color: #fff;
}
.side-head  {
  margin-right: 20px;
}
.side-head a {
  color: #009a93 !important;
  margin-right: 60px;
  text-decoration: underline !important;
  font-size: 12px !important;
}
.sidebar-nav li a {
  font-size: 18px;
}
#page-content-wrapper {
  background-image: linear-gradient(to left, #009a93, #333a92);
}
.h-order {
  background-color: #fff;
  border-radius: 5px;
  padding: 30px;
}
.h-order a {
  font-size: 13px;
  color: #303036;
}
.h-order h5 {
  font-size: 20px;
  color: #303036;
}
.o-back {
  background-color: #f4f4f4;
  padding-bottom: 15px;
  padding-top: 20px;
  border-radius: 5px;
  position: relative;
}
.new-order h5 {
  font-size: 18px;
  color: #009a93;
}
.new-order h6 {
  font-size: 14px;
  color: #303036;
}
.h-gray {
  color: #939393 !important;
}
.new-order a {
  color: #333a92;
  text-decoration: underline !important;
  font-size: 14px;
}
.new-order li {
  margin-bottom: 10px;
}
.label-star {
  font-size: 13px;
  color: #039a93;
  position: absolute;
  top: 15px;
  left: -12px;
}
.acc-order {
  background-color: #039a93;
  color: #fff;
  padding: 10px 20px;
  border-radius: 7px;
}
.acc-order:hover {
  color: #fff;
}
.dis-order {
  background-color: rgba(78, 78, 78, 0.1);
  color: #000;
  padding: 10px 20px;
  border-radius: 8px;
  margin-right: 8px;
}

.n-order {
  background-color: #fff;
  border-radius: 5px;
  padding: 13px;
}
.chat-us {
  margin-left: 90px;
}
.btn-new-order li {
  display: inline-block;
}
@media only screen and (max-width: 600px) {

  .chat-us {
    margin-left: 0px;
    margin-top: 50px;
  }
  .btn-new-order  {
float: right !important;  }
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.btn-accsebt {
  background-color: #009a93;
  color: #fff;
}
.dis-order-2 {
  background-color: rgba(78, 78, 78, 0.1);
  color: #000;
}
.btn-block + .btn-block {
  margin-top: 0rem;
  margin-right: 10px;
}
.btn-accsebt:hover {
  color: #fff;
}

#navbarsExample02 .btn {
  padding: 5px !important;
}
.accept-form label {
  font-size: 18px;
  color: #3f4698;
}
.accept-form label .dark-note {
  font-size: 14px;
  color: #939393;
}
.accept-form label .red-astric {
  color: #983f5d;
}
.acc {
  padding-top: 0 !important;
}
.text-muted {
  color: #939393 !important;
}
.record-side {
  background-color: rgba(250, 250, 250, 0.98);
  padding-top: 20px;
  padding-bottom: 40px;
  border-radius: 5px;
  margin-top: 20px;
}
/* start developer-record-2 */
.back {
  height: 612px;
}
/* start developer chat */
.back-dash-chat {
  background-color: #fff;
}
/* start wallet */
.wallet-developer {
  background-image: linear-gradient(to left, #009a93, #333a92);
  border-radius: 5px;
}
.wallet-back {
  background: url(../image/wallet-shape.png) left bottom no-repeat;
  padding: 50px;
  color: #FAFAFA;
  border-radius: 5px;
}
.wallet-back h5 {
  font-size: 30px;
  margin-bottom: 10px;
}
.wallet-back h6 {
  font-size: 14px;
  color: rgba(244, 244, 244, 0.815) !important;
}

.wallet-info{
  border-radius: 5px;
}
.wallet-transform img{
  width: 45px;
}
@media only screen and (max-width: 600px) {
 .trans {
float: none !important;
 }
 .one {
margin-right: 10px;   }
}
.gray-small{
  color: #939393;
}
.wallet-info {
  background-color: #fff;
}
/*  start developer profile */
.btn-save {
  background-color: #009A93;
  color: #fff;
}
.btn-save:hover {
  color: #fff;
}
.profile-back{
  background-color: #FAFAFA;
  padding: 30px;
  border-radius: 5px;
}
.profile-image img{
  width: 100px;
}
.profile-image {
margin-top: 30px;
margin-bottom: 30px;
}
.info-edit{
  color: #939393;
  font-size: 12px;
}
.info-edit-2{
  color: #303036;
  font-size: 21px;
}
.input-group-prepend {
  background-color: #fff;
}
.input-group > .input-group-append > .input-group-text{
  background-color: #fff;

}
.custom-file-input:lang(en)~.custom-file-label::after {
  content: "";
}
#basic-addon2 img{
  width: 20px;
}
/* start developer request  */
.dev-rec-back{
  background-color: #fff;
  border-radius: 5px;
}
.dev-rec-back-2{
  background-color: #fff;
  border-radius: 5px;
  padding: 20px;
}
.circle{
  background-color: #fff;
  border-radius: 50%;
  width: 1.1em;
  height: 1.1em;
  border: 4px solid #9393933f;
  margin-top: 5px;
}
.circle-active{
  background-color: #fff;
  border-radius: 50%;
  width: 1.1em;
  height: 1.1em;
  border: 4px solid #009a93;
  margin-top: 5px;
}
.step-title{
  font-size: 12px ;
  color: #939393;
  margin-right: 10px;
}
.step-ver li{
  display: inline-block;
}
.step-ver {
  margin-bottom: 0 !important;
}
.line-vertical{
  height: 70px;
  width: 1.5px;
  background-color: #9393933f;
  margin-right: 7px;
}
.line-vertical-active{
  height: 70px;
  width: 1.5px;
  background-color: #009a93;
  margin-right: 7px;
}
.accept-box{
  padding: 10px ;
  border-radius: 5px;
  border: 1.5px solid #eff0f1c0;
  color: #303036;
  font-size: 19px;

}


.disable{
  padding: 22px ;
  border-radius: 5px;
background-color: #eff0f169;
color: #939393;
font-size: 19px;
}
.step-i{
  font-size: 12px !important;
  color: #939393;
}
.step-btn li{
  display: inline-block;
}
.btn-step{
  background-color: #009a93;
  color: #fff;
  padding-left: 30px;
  padding-right: 30px;

}
.btn-step:hover{
  background-color: #0db3aa;
  color: #fff;
}
.step-btn .btn-light{
  padding-left: 30px;
  padding-right: 30px;
}
.accept-box-2 {
  padding: 22px ;

}
.dash .dropdown-toggle::after {
  display: none;

}
.show-dash .dropdown-toggle::after {
  display: inline-block;

}

@media only screen and (max-width: 600px) {
  .logo-dis .logo-hide{
    display: none;
  }
  .step-btn{
    float: right !important;
  }
  .step-btn li{
margin-bottom: 10px;

}
  .step-btn .btn-bg .btn-light{
    padding-left: 23px;
    padding-right: 23px;

  }
}
.navbar-expand-lg .navbar-nav .nav-link {
  padding-right: 1rem;
  padding-left: 1rem;
}
.up-img{
  width: 100px;
  height: 100px;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}
#blah{
width:100px;
height: 100px;
border-radius: 50%;
}

.imgpo {
position: absolute;
top: 50%;
opacity: 0;
padding:50px 0;
z-index: 1;
cursor:pointer ;
width: 100%

}
.file-hover {
position: absolute;
top: 50%;
background: rgba(0 ,0 ,0 ,0.5);
width: 100%;
padding: 13px 0;
text-align: center;
color: #fff;
cursor:pointer ;


}
.ad {
  background-image: linear-gradient(to right , rgba(250, 250, 250, 0.007), rgba(255, 255, 255, 0.925)), url(../image/reyad.png);
  padding-top:40px;
  padding-bottom: 140px;
  background-repeat: no-repeat;
  padding-right: 20px;
  position: relative;

}
.back-ad{
  padding: 10px;
  background-image: linear-gradient(to left, #009a93, #333a92);
 width: 450px;
 color: #fff;
 padding-top: 15px;
 position: absolute;
 right: 0;
 border-top-left-radius:7px ;
 border-bottom-left-radius: 7px;

}
.ad-button {
  margin-left: 30px;
  background-color: #fff;
  border-radius: 30px;
  padding: 10px;
  margin-top: 50px;
}
.ad-button  a{
color: #009a93;}
.ad-button  i{
  color: #fff !important;
background-color:#3f4698 ;
border-radius: 50%;
width: 25px ;
height: 25px;
padding-top: 5px;
padding-right: 9px;
margin-right: 10px;

}
@media only screen and (max-width: 600px) {
  .back-ad{
   width: 97.6%;
margin-top: 18px;
border-radius: 0 !important;
text-align: center;


  }
  .ad-button {
float: right;
margin-top: 0px;

  }
  .download-app .logo-down img{
    padding-left: 30px;

  }
  .doc-down img {
    margin-left: 20px;
    float: left;
    width: 80%;
    margin-top: 20px;
}

}
.head-chat-image{
  margin-left: 20px;
}
.men-left{
  margin-left: 20px;
}
.ri-menue{
  position: absolute;
  top: 0;
  opacity: 0;
}
.up-down{
  cursor: pointer;
  position: relative;

}
.over-scrol{
  height: 530px;
  overflow-y: auto;
}
.bad-chat-2{
  margin-top: 60px;
}
.up-load{
  width: 150px;
  margin-bottom: 20px;
  margin-top: 100px;
  margin-right: 20px;

}
.carousel-indicators li {
  background-color: #3f4698 ;
}

@media only screen and (max-width: 600px) {
  .carousel-indicators {
margin-right: 0 !important;  }
}
.btn-send-msg {
  background-color: #3f4698;
  color: #fff;
}
.btn-send-msg:hover {
  background-color: #161d68;
  color: #fff;
}
.messages{
  height: 530px;
  overflow-y: auto;}
  .send-arrow {
    margin-top: 20px;
    margin-left: 20px;
  }
  @media only screen and (max-width: 600px) {
    .send-arrow {
      margin-top: 20px;
      margin-left: 0px;
    }
  }