body {
     line-height: 1.6;
     color: #333;
     /* max-width: 1200px; */
     margin: 0 auto;
     /* padding: 20px; */
}

body,
button,
input,
select,
textarea,
h2,
h3,
h4,
h5,
h6 {
     font-family: "Inter", sans-serif;
     font-optical-sizing: auto;
     font-weight: 500;
     font-style: normal;
}

h1 {
     text-align: center;
     margin-bottom: 40px;
     color: #2c3e50;
}

.director-card {
     display: flex;
     margin-bottom: 40px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     border-radius: 8px;
     overflow: hidden;
     border: solid #ccc 1px;
}

.director-image {
     width: 200px;
     /* height: 250px; */
     object-fit: cover;
}

.director-info {
     padding: 20px;
     flex: 1;
}

.director-name {
     font-size: 22px;
     font-weight: bold;
     margin-bottom: 5px;
     color: #2c3e50;
}

.director-position {
     font-size: 18px;
     color: #e74c3c;
     margin-bottom: 15px;
}

.director-description {
     font-size: 15px;
}


.directors-list {
     padding-left: 150px;
     padding-right: 150px;
}

@media (max-width: 600px) {
     .director-card {
          flex-direction: column;
          align-items: center;
          border: solid #ccc 1px;
     }

     .director-image {
          width: 230px;
          height: 100%;
     }

     .directors-list {
          padding-left: 10px;
          padding-right: 10px;
     }
}