.team {
  position: relative;

  .team-button {
    position: absolute;
    top: 80%;
    transform: translateY(-80%);
    z-index: 1;
    gap: 20px;
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px) ;

   
    
    @media screen and (max-width: 768px) {
      height: 100px;
      
     }

    a {

      text-decoration: none;
      } 

      .team-button-primary {
        background-color: var(--primary-color);
        color: var(--secondary-color);
        border-radius: 16px;
        padding: 20px 50px;  
        border-radius: 16px;
        font-size: 20px;
        font-weight: 700;


        @media screen and (max-width: 768px) {
          padding: 10px 20px;
          font-size: 16px;
          width: 100%;
          text-align: center;
          border-radius: 16px;
          margin-bottom: 10px;
         
          
         }

        &:hover {
          background-color: transparent; 
          border: 1px solid var(--primary-color);
          color: var(--primary-color);
          transition: all 0.3s ease;
          cursor: pointer;
          transform: scale(1.05);
          box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        }
      }

      .team-button-secondary {
        background-color: var(--secondary-color);
        color: var(--primary-color);
        border-radius: 16px;
        padding: 20px 50px;  
        border-radius: 16px;
        font-size: 20px;
        font-weight: 700;

        @media screen and (max-width: 768px) {
          padding: 10px 20px;
          font-size: 16px;
          width: 100%;
          text-align: center;
          border-radius: 16px;
          margin-bottom: 10px;
         
          
         }


        &:hover {
          background-color: transparent; 
          border: 1px solid var(--primary-color);
          color: var(--primary-color);
          transition: all 0.3s ease;
          cursor: pointer;
          transform: scale(1.05);
          box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        }
    }
  }



  h1 {
    font-size: 40px;
    font-weight: 700;
    direction: rtl;
    color: var(--secondary-color);

    @media (max-width: 768px) {
      font-size: 32px;
      padding-right: 10px;
      
  }
  }

  svg {
    width: 100%;
    height: 100%;
  }

}

.team-img {
  width: 100%;
  height: auto;
  mask-image: url('path-to-your-svg-mask.svg');
  mask-size: cover;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url('path-to-your-svg-mask.svg');
  /* for Safari */
  -webkit-mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}