.eds_box1 {
    padding: 16rem 5rem;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}


.eds_box14 .eds_boxContent2 {
    background-color: #6c757d;
}








/* ตัวการ์ดหลัก */
.modern-leader-card {
    background: #ffffff;
    border-radius: 24px; /* มุมโค้งมนของตัวการ์ด */
    padding: 20px; /* ระยะห่างจากขอบการ์ดถึงรูปภาพ */
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.05); /* เงานุ่มนวล */
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
                box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    width: 100%;
    max-width: 360px; /* กำหนดความกว้างสูงสุดของการ์ดไม่ให้ล้น */
    margin: 0 auto;
}

/* กล่องเก็บรูปภาพ (กำหนดขนาดและรูปทรงสี่เหลี่ยมมุมโค้ง) */
.leader-image-wrapper {
    width: 100%;
    height: 380px; /* ปรับเพิ่ม/ลด ความสูงของรูปภาพสี่เหลี่ยมตรงนี้ได้ตามต้องการ */
    border-radius: 16px; /* มุมโค้งมนของรูปภาพ */
    overflow: hidden; /* ล็อคขอบไว้ไม่ให้รูปที่ขยายล้นออกมา */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    position: relative;
}

/* ตัวรูปภาพผู้นำ */
.leader-photo {
    width: 100%;
    height: 100%;
    object-fit: cover; /* จัดสัดส่วนรูปอัจฉริยะ ไม่ให้รูปเบี้ยวหรือยืด */
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); /* เอฟเฟกต์ตอนซูมออก */
}

/* ส่วนข้อมูลข้อความใต้รูป */
.leader-details {
    padding-top: 22px;
    padding-bottom: 10px;
}

/* ชื่อผู้นำ */
.leader-name {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #003163; /* สีน้ำเงินกรมท่าตามธีมเดิม */
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

/* ตำแหน่ง */
.leader-title {
    font-size: 14px;
    color: #8a92a6;
    margin-bottom: 0;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* ==========================================
   HOVER EFFECTS: เอฟเฟกต์เมื่อวางเมาส์
   ========================================== */

/* 1. ตัวการ์ดยกตัวขึ้นเล็กน้อยและเงาเข้มขึ้นมีมิติ */
.modern-leader-card:hover {
    transform: translateY(-10px); 
    box-shadow: 0 20px 40px rgba(0, 49, 99, 0.12);
    border-color: rgba(0, 49, 99, 0.08);
}

/* 2. รูปภาพด้านในขยายใหญ่ขึ้นอย่างนุ่มนวล (Zoom In Effect) */
.modern-leader-card:hover .leader-photo {
    transform: scale(1.08); /* ขยายใหญ่ขึ้น 8% (กำลังสวย ไม่แตกและไม่เวียนหัว) */
}