.user-form-part {
  display : flex;
  align-items : center;
  justify-content : center;
  justify-content : space-between
}
.user-form-banner {
  width : 60%;
  height : 100vh;
  background : url(../../images/bg/03.jpg);
  background-repeat : no-repeat;
  background-position : center;
  background-size : cover;
  position : relative;
  z-index : 1
}
  .user-form-banner : :before {
  position : absolute;
  content : "";
  top : 0px;
  left : 0px;
  width : 100%;
  height : 100%;
  background : linear-gradient(to right, rgba(2, 33, 85, 0.7), rgba(21, 107, 255, 0.7));
  z-index : -1
}
.user-form-content {
  position : absolute;
  top : 50%;
  left : 50%;
  transform : translate(-50%, -50%);
  text-align : center;
  width : 600px
}
.user-form-content a {
  margin-bottom : 35px
}
.user-form-content a img {
  width : 250px;
  height : auto
}
.user-form-content h1 {
  color : var(--white);
  font-size : 45px;
  line-height : 55px;
  margin-bottom : 45px
}
.user-form-content h1 span {
  display : block
}
.user-form-content p {
  color : var(--white);
  font-size : 24px;
  line-height : 32px
}
.user-form-category {
  width : 40%;
  height : 100vh;
  background : #fbfbfb;
  overflow-y : scroll;
  overflow-x : hidden
}
.user-form-header {
  position : fixed;
  top : 50px;
  left : 50px;
  z-index : 1
}
  .user-form-header a : nth-child(1) {
  display : none
}
.user-form-header a i {
  width : 50px;
  height : 50px;
  line-height : 50px;
  text-align : center;
  border-radius : 50%;
  font-size : 16px;
  color : var(--primary);
  background : var(--white);
  text-shadow : var(--primary-tshadow);
  box-shadow : var(--primary-bshadow)
}
  .user-form-header a i : hover {
  color : var(--white);
  background : var(--primary)
}
.user-form-category-btn {
  margin-bottom : 50px
}
.user-form-title {
  text-align : center;
  margin-bottom : 45px
}
.user-form-title h2 {
  margin-bottom : 7px
}
.user-form-option {
  display : flex;
  align-items : center;
  justify-content : center;
  margin-bottom : 30px
}
.user-form-option li {
  margin : 0px 8px
}
.user-form-option li a {
  width : 125px;
  padding : 5px;
  color : var(--primary);
  border-radius : 8px
}
.user-form-option li a i {
  width : 32px;
  height : 32px;
  line-height : 32px;
  text-align : center;
  border-radius : 8px;
  font-size : 12px;
  margin-right : 8px;
  text-shadow : var(--primary-tshadow)
}
.user-form-option li a span {
  font-size : 14px;
  text-transform : capitalize;
  text-shadow : var(--primary-tshadow)
}
  .user-form-option li : nth-child(1) a {
  background : #4267B2
}
  .user-form-option li : nth-child(1) a i {
  background : #375797
}
  .user-form-option li : nth-child(2) a {
  background : #1DA1F2
}
  .user-form-option li : nth-child(2) a i {
  background : #1a95e2
}
  .user-form-option li : nth-child(3) a {
  background : #DB4437
}
  .user-form-option li : nth-child(3) a i {
  background : #be3a2e
}
.user-form-devider {
  position : relative;
  z-index : 1
}
  .user-form-devider : :before {
  position : absolute;
  content : "";
  top : 50%;
  left : 50%;
  transform : translate(-50%, -50%);
  width : 100%;
  height : 1px;
  background : #e8e8e8;
  z-index : -1
}
.user-form-devider p {
  width : 50px;
  height : 50px;
  line-height : 50px;
  text-align : center;
  border-radius : 50%;
  background : var(--white);
  border : 1px solid #e8e8e8;
  margin : 0px auto 30px
}
.user-form-direction {
  text-align : center;
  margin : 30px 0px 50px
}
.user-form-direction p {
  color : #666666;
  font-size : 18px;
  width : 290px;
  margin : 0 auto
}
.user-form-direction p span {
  font-weight : 500;
  color : var(--primary)
}
.form-group {
  margin-bottom : 20px;
  position : relative
}
  .form-group : focus-within .form-icon {
  visibility : visible;
  opacity : 1
}
  .form-group : focus-within .form-alert {
  display : block
}
.form-group .btn {
  width : 100%;
  padding : 10px 30px
}
.form-control {
  width : 100%;
  height : 45px;
  background : var(--white);
  padding : 0px 55px 0px 20px;
  transition : all linear .3s;-webkit-transition : all linear .3s;-moz-transition : all linear .3s;-ms-transition : all linear .3s;-o-transition : all linear .3s
}
  .form-control : focus {
  outline : none;
  box-shadow : none;
  color : var(--gray);
  background : var(--white);
  border-color : var(--primary)
}
.form-icon {
  border : none;
  background : none;
  line-height : 0px;
  position : absolute;
  top : 15px;
  right : 20px;
  visibility : hidden;
  opacity : 0;
  transition : all linear .3s;-webkit-transition : all linear .3s;-moz-transition : all linear .3s;-ms-transition : all linear .3s;-o-transition : all linear .3s
}
.form-icon-password {
  border : none;
  background : none;
  line-height : 0px;
  position : absolute;
  top : 15px;
  right : 20px;
  transition : all linear .3s;-webkit-transition : all linear .3s;-moz-transition : all linear .3s;-ms-transition : all linear .3s;-o-transition : all linear .3s
}
.form-icon i {
  font-size : 16px;
  color : #aaaaaa
}
.form-icon-password i {
  font-size : 16px;
  color : #aaaaaa
}
.form-alert {
  /*display : none;*/
  padding : 3px 20px
}
.form-forgot {
  font-size : 15px;
  color : var(--gray)
}
  .form-forgot : hover {
  color : var(--primary);
  text-decoration : underline
}
.custom-control-label {
  font-size : 15px;
  line-height : 26px;
  cursor : pointer
}
  .custom-control-label : :before {
  top : 5px
}
  .custom-control-label : :after {
  top : 5px
}
  .custom-control-input : checked ~ .custom-control-label : :before {
  border-color : var(--primary);
  background-color : var(--primary);
  box-shadow : none
}
.form-grid {
  display : flex;
  align-items : center;
  justify-content : center;
  justify-content : space-between;
  background : var(--primary);
  border-radius : 8px
}
.form-grid input {
  width : 100%;
  height : 45px;
  border : none;
  background : transparent;
  padding : 0px 20px
}
.form-grid .btn {
  width : 180px;
  height : 45px;
  padding : 14px 0px;
  text-align : center
}
  @media (max-width: 767px) {
  .user-form-option li a{width : auto
}
.user-form-option li a i {
  width : 60px;
  margin-right : 0px
}
.user-form-option li a span {
  display : none
}
  }@media (max-width: 575px) {
  .user-form-banner{display : none
}
.user-form-category {
  width : 100%
}
.user-form-header {
  display : flex;
  align-items : center;
  justify-content : center;
  justify-content : space-between;
  padding : 15px;
  top : 0px;
  left : 0px;
  z-index : 3;
  width : 100%;
  background : var(--white);
  box-shadow : 0px 5px 15px 0px rgba(0, 0,0, 0.1)
}
  .user-form-header a : nth-child(1) {
  display : block
}
.user-form-header a img {
  width : 150px
}
.user-form-header a i {
  width : 40px;
  height : 40px;
  line-height : 40px;
  color : var(--primary);
  background : var(--white)
}
  .user-form-header a i : hover {
  color : var(--white);
  background : var(--primary)
}
.user-form-category-btn {
  margin-top : 72px
}
.user-form-direction p {
  width : 100%
}
  }@media (min-width: 576px) and (max-width: 991px) {
  .user-form-header{top : 30px;
  left : 30px
}
  }@media (min-width: 576px) and (max-width: 767px) {
  .user-form-banner{width : 42%
}
.user-form-content {
  width : 230px
}
.user-form-content a img {
  width : 150px
}
.user-form-content h1 {
  font-size : 20px;
  line-height : 30px;
  margin-bottom : 25px
}
.user-form-content p {
  font-size : 16px
}
.user-form-category {
  width : 58%
}
.user-form-direction p {
  width : 260px
}
  }@media (min-width: 768px) and (max-width: 991px) {
  .user-form-banner{width : 40%
}
.user-form-content {
  width : 280px
}
.user-form-content a img {
  width : 200px
}
.user-form-content h1 {
  font-size : 28px;
  line-height : 36px;
  margin-bottom : 25px
}
.user-form-content p {
  font-size : 20px;
  line-height : 28px
}
.user-form-category {
  width : 60%
}
  }@media (min-width: 992px) and (max-width: 1199px) {
  .user-form-banner{width : 50%
}
.user-form-content {
  width : 460px
}
.user-form-content a img {
  width : 200px
}
.user-form-category {
  width : 50%
}
/* Ensure the parent container of the ul takes full width and height */
.user-form-options-container {
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100vh; /* Make the container full height of the viewport */
    width: 100%; /* Make the container full width */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

/* Style for the ul to remove list styling */
.user-form-options {
    list-style: none; /* Remove bullet points */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
}
}