.modal-backdrop.show {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.modal-open header,
body.modal-open main,
body.modal-open footer {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  pointer-events: none;
}
textarea {
  resize: none;
}
/*---------  login modal --------- */
@media (min-width: 576px) {
  .auth-modal .modal-dialog {
    max-width: 570px;
  }
}
.auth-modal {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 9999;
}
  .auth-modal .modal-content, .descrip-modal .modal-content{
    background: #FFFFFF;
    border-radius: 0;
  }
  .auth-modal .modal-header, .descrip-modal .modal-header{
    padding: 25px 18px 20px;
    flex-flow: column;
    border-bottom: 0;
  }
  .auth-modal .btn-close, .descrip-modal .btn-close{
    background: none;
    position: absolute;
    top: 0;
    right: 0;
    margin: 25px 25px 0 0;
    padding: 0;
    opacity: 0.6;
    z-index: 1;
  }
  .auth-modal .btn-close:focus{
    box-shadow: none;
  }
  .auth-modal .btn-close:hover, .auth-modal .btn-close:focus, .descrip-modal .btn-close:hover, .descrip-modal .btn-close:focus{
    opacity: 1;
  }

  .auth-modal .modal-header h5{
    font-weight: 600;
    font-size: 28px;
    text-align: center;
    color: #000;
    text-transform: capitalize;
    margin-bottom: 10px;
  }
  .auth-modal .modal-header p{
    font-weight: 400;
    font-size: 13px;
    text-align: center;
    margin-bottom: 0;
  }
  .auth-modal .modal-header p a{
    color: #BB952A;
    font-weight: 700;
  }
  .auth-modal .modal-header p a::after, .interlink::after, .auth-modal .modal-body p a:after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0%;
    height: 2px;
    background: #BB952A;
    transition: width 0.9s ease-in-out;
    border-radius: 5px;
  }
  .auth-modal .modal-header p a:hover:after, .interlink:hover::after, .auth-modal .modal-body p a:hover:after{
    width: 100%;
    left: 0;
    right: auto;
  }
  .auth-modal .modal-body{
    padding: 20px 25px 30px;
  }
  #changePhone .modal-header, #verifyphone .modal-header, #changeemail .modal-header, #verifyemail .modal-header, #otp .modal-header, #changepwd .modal-header{
    padding: 20px 25px 0;
  }
   /* #changePhone .btn-close, #verifyphone .btn-close, #changeemail .btn-close{
    margin: 20px 25px 0px 0px;
  } */
  .interlink{
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    text-transform: capitalize;
    color: #BB952A;
    display: block;
    width: fit-content;
    margin: 0 auto 27px;
  }
  .interlink:hover{color: #BB952A;}
  .login-btn{
    font-weight: 600;
    font-size: 16px;
    text-transform: capitalize;
    color: #FFF;
    text-align: center;
    display: block;
    width: 100%;
    padding: 15px;
    margin: 0 auto 27px;
  }
  .auth-form .form-group{
    position: relative;
    margin-bottom: 16px;
  }
  .auth-form .form-group .form-control{
    background: #F5F5F5;
    border: 1px solid #F5F5F5;
    backdrop-filter: blur(26.066667556762695px);
    padding: 16px 18px;
    font-weight: 400;
    font-size: 14px;
    color: #000;
    border-radius: 17px;
  }
  .auth-form .form-group .form-control:focus{
    border-color: #BB952A;
    box-shadow: none;
  }
  .auth-form .form-group .form-control::placeholder{
    color: rgba(0, 0, 0, 0.40);
  }
  .auth-icon{
    position: absolute;
    top: 0;
    right: 0;
    margin: 15px 18px;
  }
  .toggle-hide-show{
    position: absolute;
    top: 0;
    right: 0;
    margin: 18px;
    font-size: 20px;
    color: #BB952A;
  }
  .auth-modal .modal-body p{
    font-weight: 400;
    font-size: 13px;
    text-align: center;
    margin-bottom: 27px;
  }
  .auth-modal .modal-body p strong{
    color: #545454;
    font-weight: 700;
  }
  .auth-modal .modal-body p a{
    color: #BB952A;
    font-weight: 700;
    text-decoration: underline;
  }
  .auth-modal .modal-body p a:hover{
    text-decoration: none;
  }
  .login-option{
    position: relative;
    margin-bottom: 27px;
  }
  .login-option span{
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    color: #000;
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 0 15px;
    background: #FFF;
    position: relative;
    z-index: 1;
  }
  .login-option::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.20);
    margin: 10px 0;
  }
  .login-btns{
    display: flex;
    align-items: center;
    gap: 27px;
    flex-flow: column;
  }
  .login-btns a{
    border: 1px solid #BB952A;
    box-shadow: 0px 5px 14px 0px #BC8A1F66;
    border-radius: 10px;
    width: 100%;
    padding: 13px 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    font-size: 16px;
    text-transform: capitalize;
    color: #000;
  }
  .login-btns a:hover{
    color: #BB952A;
  }
  /* ----General Modal--- */
  .btn-grps{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .resnd_txt {
    font-size: 14px;
    color: #000;
    font-size: 14px;
  }
  /* Checkbox */
  #remember-check:checked {
    background-color: #BB952A !important;
    border-color: #BB952A !important;
}
.form-check-label{
  font-size: 13px;
  color: #545454;
}
  /* iti */
  /* ------ intel --------- */
 
  .iti{display: block; width: auto;left: 50% !important;transform: translateX(-50%);z-index: 9999;}
  .iti--separate-dial-code .iti__selected-flag{background: transparent;}
  /* .iti__flag{display: none;} */
  .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code{color: rgba(0, 0, 0, 0.40);}
  .iti__arrow{
    border: none;
    background: url(../images/intel-arrow.png) no-repeat;
    width: 22px;
    height: 22px;
  }
  .iti__flag-box, .iti__country-name{
    color: #ccc;
  }
  /* ---------- login modal [END] ---------- */
  /* -----Media Query---- */
  @media (max-width: 991px) {
    .auth-modal .modal-body{padding: 20px;}
    .auth-modal .modal-header{padding: 20px 20px 10px;}
    .interlink{margin: 0 auto 15px;}
    .login-btn{padding: 12px;font-size: 14px;}
    .login-btns{gap: 15px;}
  }