.donate-button {
    position: relative;
    height: 48px;
    width: 144px;
    background-color: #C2A661;
    cursor: pointer;
    transition: background-color 0.3s;
    
  }
  .donate-button .label {
    position: absolute;
    left: 16px;
    top: 5px;
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: white ;
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    text-align: center;
    word-wrap: break-word;
    transition: color 0.3s;
    text-decoration: none;
  }

  .donate-button .line {
    position: absolute;
    height: 0;
    border: 0.5px solid #C2A661;
    opacity: 0.01;
  }

  .donate-button .line1 {
    width: 1px;
    left: 151px;
    top: 51px;
  }

  .donate-button .line2 {
    width: 1px;
    left: -3px;
    top: 56px;
    transform: rotate(-90deg);
    transform-origin: top left;
  }

  .donate-button .line3 {
    width: 1px;
    left: -8px;
    top: -4px;
  }

  .donate-button .line4 {
    width: 1px;
    left: 147px;
    top: -7px;
    transform: rotate(90deg);
    transform-origin: top left;
  }

  .donate-button:hover {
    background-color: #F9F4EF;
  }

  .donate-button:hover .label {
    color: #0E1C12;
  }

  .donate-button:hover .line {
    opacity: 1;
    border-color: #F9F4EF;
  }

  /* Optionally, update widths on hover if needed to match your hover visuals */
  .donate-button:hover .line1{
    width: 130px;
    left: 22px;
    transition: all 0.6s ease-in-out;
    
  }
  .donate-button:hover .line3{
      width: 130px;
      left: -8px;
      transition: all 0.5s ease;
  }

  .donate-button:hover .line2,
  .donate-button:hover .line4 {
    width: 64px;
  }
  .donate-button:hover .line2{
    transition: all 0.3s ease;
  }
  .donate-button:hover .line4{
    transition: all 0.7s ease-in-out;
  }

  .green-hover:hover{
    background-color: #264D32; 
  }

  .green-hover:hover .label {
    color: #ffffff;
  }

  .green-hover:hover .line {
    opacity: 1;
    border-color: #264D32;
  }

  .green-btn{
    background-color: #264D32;  
  }
  .white-btn{
    background-color: transparent;
    border: 1px solid #fff;
  }
  .big-btn{
    width: 235px;
    height: 56px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .big-btn .label{
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
  }
  .big-btn .line1{
    top: 58px;
  }
  .big-btn .line2{
    top: 65px;
  }
  .big-btn .line4{
    left: 239px;
  }
  .big-btn:hover .line1{
    width: 210px;
    left: 32px;
    transition: all 0.6s ease-in-out;
    
  }
  .big-btn:hover .line2,
  .big-btn:hover .line4 {
    width: 74px;
  }
  .big-btn:hover .line3{
    width: 210px;
    left: -8px;
    transition: all 0.5s ease;
}