.join-us-section{
    display: flex;
padding: 32px 64px;
flex-direction: column;
align-items: center;
gap: 32px;
align-self: stretch;
}
.join-us-section h1{
    color: var(--brand-Black-Shade-1, #2C2C31);
font-size: 45px;
font-style: normal;
font-weight: 300;
line-height: 52px; /* 115.556% */
}

.join-us-1, .join-us-2{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.join-us-1 h2, .join-us-2 h2{
    color: #000;
font-size: 32px;
font-style: normal;
font-weight: 300;
line-height: 40px; /* 125% */
flex: 1 0 0;
}
.join-us-1 p, .join-us-2 p{
    color: #000;
font-size: 16px;
font-style: normal;
font-weight: 300;
line-height: 24px; /* 150% */
letter-spacing: 0.5px;
align-self: stretch;
}


.opportunities-section{
    display: flex;
padding: 16px 16px 32px 16px;
flex-direction: column;
align-items: flex-start;
gap: 32px;
align-self: stretch;
border-radius: 8px;
background: var(--Color, rgba(255, 245, 238, 0.2));
border: 1px solid var(--Schemes-Secondary, #7a580c);
}
.opportunities-writeup{
    width: 100%;
  }
  .top-opportunities-{
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  .top-opportunities- h3{
    color: var(--brand-Black-Shade-1, #2C2C31);
text-align: start;
font-size: 32px;
font-style: normal;
font-weight: 300;
line-height: 40px; /* 125% */
  }
  .opportunities-con{
    display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
align-self: stretch;
  }
  .opportunities-item{
    display: flex;
    padding: 8px 0px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    border-bottom: 0.5px solid var(--brand-Black-Shade-1, #2C2C31);
  }
  .top-opportunities-item{
    width: 100%;
    display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  }
  .top-opportunities-item h5{
    color: var(--brand-Black-Shade-1, #2C2C31);
font-size: 24px;
font-style: normal;
font-weight: 300;
line-height: 32px; /* 133.333% */
}
.opportunities-item p{
  color: var(--A-Slate-Gray, #4B4B4B);
font-size: 16px;
font-style: normal;
font-weight: 300;
line-height: 24px; /* 150% */
letter-spacing: 0.5px;
display: none;
}


.how-to-join{
  display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}
.how-to-join h2{
  color: #000;
font-size: 32px;
font-style: normal;
font-weight: 300;
line-height: 40px; /* 125% */
}
.how-to-join-item-top{
  display: flex;
width: 34px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
}
.how-to-join-item-top p{
  display: flex;
width: 30px;
height: 30px;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 3000px;
background: var(--brand-Brand-Purple, #8C62FF);
color: #FFF;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
letter-spacing: 0.5px;
align-self: stretch;
}
.how-to-join-item-top span{
  color: var(--brand-Black-Shade-1, #2C2C31);
text-align: center;
font-size: 12px;
font-style: normal;
font-weight: 300;
line-height: 16px; /* 133.333% */
letter-spacing: 0.4px;
}
.how-to-join-items{
  display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
align-self: stretch;
}
.how-to-join-item-writeup{
  display: flex;
padding: 12px;
flex-direction: column;
align-items: flex-start;
gap: 8px;
align-self: stretch;
border-radius: 4px;
background: var(--brand-Yellow-Shade-2, #F9D885);
}
.how-to-join-item-writeup h3{
  color: #000;
font-size: 24px;
font-style: normal;
font-weight: 300;
line-height: 32px; /* 133.333% */
}
.how-to-join-item-writeup p{
  color: #000;
font-size: 16px;
font-style: normal;
font-weight: 300;
line-height: 24px; /* 150% */
letter-spacing: 0.5px;
}
.how-to-join-container{
  display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}

.fundraiser-banner{
  display: flex;
padding: 32px;
flex-direction: column;
align-items: center;
gap: 16px;
align-self: stretch;
border-radius: 8px;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.60) 100%), url(./image/image_fx_.jpg) lightgray 50% / cover no-repeat;

/* hero shadow */
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.20);
}
.fundraiser-banner h2{
  color: var(--Color, #FFF5EE);
font-size: 32px;
font-style: normal;
text-align: center;
font-weight: 400;
flex: 1 0 0;
line-height: 40px; /* 125% */
}
.fundraiser-banner p{
  color:  #FFF;
text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  letter-spacing: 0.5px;
}

@media (max-width:1120px) {
  .join-us-section{
    display: flex;
padding: 24px 32px;
flex-direction: column;
align-items: center;
gap: 32px;
align-self: stretch;
  }
  .join-us-section h1{
    font-size: 36px;
    line-height: 44px; 
  }
  .join-us-1 h2, .join-us-2 h2, .how-to-join{
    font-size: 28px;
    line-height: 36px;
  }
}

@media (max-width:430px) {
  .join-us-section{
    display: flex;
padding: 24px 16px;
flex-direction: column;
align-items: center;
gap: 24px;
align-self: stretch;
  }
  .join-us-section h1{
    font-size: 36px;
    line-height: 44px; 
  }
}