*{
    font-family: "Noto Kufi Arabic", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
  }
  input::placeholder {
    font-weight: bold;
    opacity: 0.5;
    font-family: 'DroidKufi', sans-serif;
    font-size: 12px;
  }

  .bg-body-tertiary {
    background-color: #ffffff!important;
    border-bottom: 1px solid hsla(200, 9%, 59%, .5);
  }
  .fa-user {
      color: #ff375e;
      /* height: 24px; */
      font-size: 24px;
  }
  .fa {
      /* height: 24px; */
      font-size: 24px;
  }
  .user {
    border-right: 1px solid hsla(200, 9%, 59%, .5);
    height: 60px;
    width: 60px;
    align-items: center;
    display: flex;
    justify-content: center;
  }
  .navbar{
    padding: unset
  }
  .container-fluid {
    padding-left: unset;
  }
  .lists {
    display: flex;
  }
  .btn-primary {
    background-color: #ff375e;
    border-width: 0;
    color: #fff;
  }
  .services {
    background-color: #f3f3f1;
  }
  .serv-image {
    height: 48px !important;
    width: 48px !important;
  }
  .desc {
    font-size: 19px;
    letter-spacing: .5px;
    line-height: 30px;
    font-weight: normal;
  }
  footer {
    background: linear-gradient(264.71deg, #8736C4 2.11%, #4f008c 58.87%);
    padding-top: 90px;
  }
  footer p {
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: .5px;
    color: #f3f3f1;
    max-width: 220px;
    line-height: 22px;
  }
  .small {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .5px;
    line-height: 22px;
  }

  html {
      box-sizing: border-box;
    }
    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }
    .place {
      max-width: 600px;
      margin: auto;
      padding: 10px;
    }
    .form-row {
      display: flex;
      position: relative;
      margin: 20px 0 40px;
    }
    .inp {
      width: 100%;
      height: 40px;
      line-height: 20px;
      font-size: 1rem;
      padding: 0 10px;
      background:white;
      border-radius:0;
      border:unset;
      border-bottom: 1px solid #4f008c;
    }
    .placehold {
      position: absolute;
      right: 0;
      top: 0;
      padding: 0 11px;
      height: 40px;
      line-height: 40px;
      font-size: 1rem;
      opacity: 0.7;
      transition: all 0.3s ease;
      margin-right: 20px;
    }
    .placehold b {
      color: blue;
    }
    .inp:focus + .placehold,
    .inp:valid + .placehold {
      transform: translateY(-95%);
    }
    .inp:placeholder {
      visibility: hidden;
    }

    .inp::-webkit-input-placeholder {
      /* Chrome/Opera/Safari */
      color: transparent;
    }
    .inp::-moz-placeholder {
      /* Firefox 19+ */
      color: transparent;
    }
    .inp:-ms-input-placeholder {
      /* IE 10+ */
      color: transparent;
    }
    .inp:-moz-placeholder {
      /* Firefox 18- */
      color: transparent;
    }
    .inp:placeholder {
      /* No spec for this yet!! */
      color: transparent;
    }
    .inp:not(:placeholder-shown) + .placehold {
      transform: translateY(-95%);
    }
    .inp:invalid:not(:placeholder-shown) + .placehold b:after {
      content: " - Error";
      color: red;
      font-weight: bold;
    }

    /* code for optional input*/
    .inp.optional:placeholder-shown + .placehold {
      transform: translateY(0%);
    }
    .inp.optional:not(:placeholder-shown) + .placehold {
      transform: translateY(-95%);
    }
    .inp.optional:focus + .placehold {
      transform: translateY(-95%);
    }


    /* selects */
    select{-webkit-appearance: menulist-button;}/* safari*/

    select.inp:not(:valid) + .placehold {
      transform: translateY(0%);
    }
    /* remove this last :focus rule if you don't want label to move until a valid item is selected */
    select.inp:focus + .placehold {
      transform: translateY(-95%);
    }

    .phone input[type="tel"] {
      position: relative; 
      }
      
      input { font-family: 'FontAwesome'; } /* This is for the placeholder */
      
      .wrapper:before {
          font-family: 'FontAwesome';
          color:red;
          position: relative;
          left: -5px;
          content: "\f007";
      }

      .fa-mobile-screen {
        font-size: 30px;
      }

      
      .hide {
        display: none;
      }

      .sub {
        display: flex;
      }
      .card-image {
        height: 44px;
        width: 70px;
        height: 44px;
        width: 70px;
        float: left;
        margin-left: 27px;
      }
      .comment {
        color: #8e9aa0;
        font-size: 12px;
      }

     
      .cd {
        border-bottom: 1px solid #7b777d;
        padding-top: 27px;
        padding-bottom: 10px;
      }
      .form-row {
        margin: unset;
      }

      .offcanvas-footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        text-align: center;
      }

      .offcanvas {
        width: 100% !important;
      }
      .offcanvas-title {
        margin-right: 55px;
      }
      #newPrice
      {
        font-size: 15px;
        color: #eebcca;
      }

      .btn-primary[disabled] {
          opacity: unset;
          pointer-events: none;
          cursor: not-allowed;
          background-color: #faa7b7;
      }
      .summary {
        font-size: 14px;
        font-weight: 500;
        color: #8e9aa0;
        padding: 0 30px;
        margin-top: 10px;
      }
      .fa-trash-can {
        font-size: 24px;
        color: purple;
      }
      .bill-content {
        padding: 20px 20px 20px 10px;
        background-color: #f3f3f1;
      }
      .billn {
        font-size: 12px;
        letter-spacing: 0;
        font-weight: 400;
        line-height: 8px;
        color: #1d252d;
        padding-top: 10px;
      }
      .bill-price {
        font-size: 14px;
        line-height: 19px;
        font-weight: 700;
        letter-spacing: 0;
      }
      .bill-change {
        font-weight: 500;
        color: #ff375e;
        padding: 0;
        background-color: rgba(0, 0, 0, 0);
        font-size: 15px;
        float: left;
        text-decoration:none;
      }
      .center {
        margin: auto;
        text-align: center;
      }