.btn {
  border: none !important;
  outline: 0 !important;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  &-primary {
    border-radius: 25px;
    font-size: 14px;
    font-weight: 500;

    text-decoration: none;
    padding: 7px 0px 7px 14px;
    position: relative;
    border: 1px solid var(--p-brand-green) !important;
    background-color: #d9d9d9;
    color: var(--brand-dark) !important;
    transition: all 0.3s;

    span {
      background-color: var(--up-primary);
      padding: 8px 13px;
      border-radius: 25px;
      margin-left: 3px;
    }

    &:hover {
      background-color: var(--white-color);
     
      span {
      
      background-color: var(--white-color);
      }
    }
  }
  &-secondary {
    border-radius: 25px;
    font-size: 14px;
    font-weight: 400;

    text-decoration: none;
    padding: 7px 0px 7px 14px;
    position: relative;
    border: 1px solid var(--p-brand-green) !important;
    background-color: var(--brand-dark);
    color: var(--white-color) !important;
    transition: all 0.3s;

    span {
      background-color: var(--up-primary);
      padding: 8px 13px;
      border-radius: 25px;
      margin-left: 3px;
    }

    &:hover {
      background-color: var(--brand-dark);
     
      
    }
  }
  &-primary-black {
    border-radius: 25px;
    font-size: 14px;
    font-weight: 400;

    text-decoration: none;
    padding: 7px 0px 7px 14px;
    position: relative;
    border: 1px solid var(--p-brand-green) !important;
    background-color: var(--brand-dark);
    color: var(--white-color) !important;
    transition: all 0.3s;

    span {
      background-color: var(--white-color);
      padding: 8px 13px;
      border-radius: 25px;
      margin-left: 3px;
    }

    &:hover {
      background-color: var(--brand-dark);
     
      
    }
  }
  &-search {
    height: 40px;
    img {
      height: 20px;
    }
  }
}