.director-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
  width: max-content;
align-items: center;
    margin: auto;
}



.director {
     	display: flex;
  	align-items: center;
  	background-color: #00a1ff;
  	padding: 15px 20px;
  	margin: 12px 0;
  	border-radius: 30px;
  	transition: transform 0.2s ease;
  	width: 100%; 

    }

    .director:hover {
      transform: scale(1.02);
    }

    .number {
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      background-color: #00a1ff;
      color: white;
      font-weight: bold;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 15px;
      font-size: 16px;
      border: 2px solid #ffffff;
    }

    .text {
      font-size: 16px;
      font-weight: 800;
      color: #fff;
    }

@media (max-width: 575px){
.director-container {
 
  width: auto;

}
}


    @media (max-width: 600px) {
      .director {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px;
        border-radius: 20px;
      }

      .number {
        margin-right: 0;
        margin-bottom: 10px;
      }

      .text {
        font-size: 15px;
      }