.section_profile {
  & .container {
    width: 80%;

    & h2 {
      font-size: 1.8rem;
      font-weight: 600;
    }

    & p {
      font-size: 1rem;
      color: #696969;
      margin-top: 0.5rem;
    }

    & form {
      padding: 0.1rem;

      & .form_data {
        padding: 0.1rem;

        & .profile_pic {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;

          & figure {
            & img {
              border-radius: 50%;
            }
          }

          & .btn {
            padding: 0;
            background-color: var(--white);
          }
        }

        & table {
          & tbody {
            & tr {
              & th {
                text-align: left;
                text-transform: capitalize;
                font-size: 1rem;

                &::after {
                  content: ":";
                }

              }

              & td {
                & input {
                  padding: 0.2rem;
                  font-size: 1rem;

                  &:read-only {
                    background-color: var(--btn-disabled);
                    color: var(--white);
                  }
                }

                & .btn {
                  padding: 0.1rem;
                  width: 100%;
                }
              }
            }
          }
        }
      }
    }
  }
}

.section_interaction {
  & .container {
    width: 80%;
    margin-bottom: 4rem;

    & h2 {
      font-size: 1.8rem;
      font-weight: 600;
    }

    & p {
      color: var(--btn-disabled);
    }

    & .interaction_div {
      padding: 0.1rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
}