.leaders-section {
  padding: 100px 20px;        
  color: #fff;               
  display: flex;             
  flex-direction: column;    
  align-items: center; 
  overflow: hidden;     
}

.astronaut-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.leaders-header {
  text-align: center;        
  margin-bottom: 80px;       
}

.leaders-title {
  font-size: 70px;           
  text-transform: uppercase;
  margin: 0;                 
  letter-spacing: 2px;       
  font-family: 'Teko', sans-serif; 
}

.leaders-subtitle {
  font-size: 18px;           
  opacity: 0.7;              
  margin-top: 5px;           
  font-family: 'Teko', sans-serif;
}

.leaders-container {
  width: 100%;               
  max-width: 950px;          
  position: relative;        
}

.leaders-inner {
  position: relative;        
  width: 100%;
  height: 480px;             
}

.figma-frame {
  position: absolute;        
  inset: 0;                  
  z-index: 1;                
}

.leader-block {
  position: absolute;        
  display: flex;            
  align-items: center;       
  z-index: 5;                
}

.male-leader {
  top: -90px;               
  right: -150px;             
}

.female-leader {
  bottom: -90px;             
  left: -170px;           
}

.leader-photo {
  width: 350px;              
  height: auto;              
  z-index: 10;               
  filter: drop-shadow(0 0 25px rgba(138, 43, 226, 0.4));
}

.leader-card {
  display: flex;           
  width: 400px;              
  height: 120px;             
  padding: 20px;             
  flex-direction: column;    
  align-items: center;       
  border-radius: 8px;        
  background: rgba(255, 255, 255, 0.30);
  bottom: 0%;
}

.male-leader .leader-card {
  margin-right: -150px;       
  text-align: end;        
}

.female-leader .leader-card {
  margin-left: -150px;        
  text-align: end;
}

.leader-card h2 {
  font-size: 34px;           
  font-family: 'Teko', sans-serif;
  margin: 0;
  text-transform: capitalize; 
  line-height: 1.2;          
}

.leader-card span {
  font-size: 16px;           
  font-family: 'Teko', sans-serif;
  opacity: 0.8;              
}

.socials {
  display: flex;             
  gap: 8px;                 
}

.socials img {
  cursor: pointer;           
  opacity: 0.6;              
  transition: 0.3s;          
}

.socials a:hover img {
  color: #9d81ff;          
}

/* ===============================
   Mobile Responsive
================================ */

@media (max-width: 768px) {

  .leaders-section {
    padding: 50px 15px;
  }

  .leaders-header {
    margin-bottom: 20px;
  }

  .leaders-title {
    font-size: 30px;
  }

  .leaders-container {
    max-width: 100%;
  }

  .leaders-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 90px;
    height: auto;
  }

  .figma-frame {
    display: none;
  }

  /* إلغاء absolute في الهاتف */
  .leader-block {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
  }

  .male-leader,
  .female-leader {
    top: unset;
    bottom: unset;
    left: unset;
    right: unset;
  
  }


  .leader-photo {
    width: 220px;
    /* max-width: 40%; */
    z-index: 100;
  }

  .male-leader .leader-photo {
    transform: translate(40px, -60px);
  }

  .female-leader .leader-photo {
    transform: translate(-40px, -60px);
  }


  .leader-card {
    width: 100%;
    height: 100px;
    padding: 20px;
    box-sizing: border-box;
  }

  .male-leader .leader-card {
    text-align: right;
  }

  .female-leader .leader-card {
    text-align: left;
  }

  .leader-card h2 {
    font-size: 28px;
    margin-bottom: 5px;
  }

  .socials {
    margin-top: 15px;
  }

  .male-leader .socials {
    justify-content: flex-end;
  }

  .female-leader .socials {
    justify-content: flex-start;
  }
}