/* 1. MAIN FACULTY CARDS */
 .feature-1 {
     background: #fff;
     padding: 25px 15px;
     border: 1px solid #eee;
     /* Clean border */
     border-radius: 8px;
     text-align: center;
     transition: 0.3s;
     height: 100%;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
 }

 .feature-1:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
     border-color: #51BE78;
     /* Green hover */
 }

 /* 2. IMAGE STYLES (SHORT & CIRCLE) */
 .staff-img-main {
     width: 130px;
     /* Made Short */
     height: 130px;
     /* Made Short */
     object-fit: cover;
     border-radius: 50%;
     /* Circle */
     margin: 0 auto 15px;
     border: 3px solid #f8f9fa;
 }

 .staff-list-img {
     width: 40px;
     /* Very Small for Lists */
     height: 40px;
     object-fit: cover;
     border-radius: 50%;
     margin-right: 15px;
     border: 1px solid #ddd;
 }

 /* 3. TEXT STYLES */
 .feature-1 h2 {
     font-size: 18px;
     font-weight: 700;
     color: #333;
     margin-bottom: 5px;
 }

 .position {
     color: #51BE78;
     font-size: 13px;
     font-weight: 600;
     text-transform: uppercase;
     margin-bottom: 5px;
     display: block;
 }

 .center-text {
     font-size: 12px;
     color: #777;
     font-style: italic;
 }

 /* 4. LIST STYLES */
 .staff-list-ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .staff-list-li {
     display: flex;
     align-items: center;
     padding: 10px;
     border-bottom: 1px solid #f0f0f0;
 }

 .staff-list-li:last-child {
     border-bottom: none;
 }

 .about-img {
     border-radius: 20px;
     width: 100%;
     object-fit: cover;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }

 .read-more-btn {
     color: #51BE78;
     cursor: pointer;
     font-weight: bold;
     text-decoration: underline;
     background: none;
     border: none;
     padding: 0;
     margin-top: 10px;
 }

 .read-more-btn:hover {
     color: #2f8c50;
 }

 .about-text {
     font-size: 16px;
     line-height: 1.8;
     color: #666;
 }

 /* --- DYNAMIC LIST STYLES --- */
 .about-text ul,
 .about-text ol {
     margin-bottom: 1rem;
 }

 ul[data-list-style="disc"] {
     list-style-type: disc !important;
 }

 ul[data-list-style="circle"] {
     list-style-type: circle !important;
 }

 ul[data-list-style="square"] {
     list-style-type: square !important;
 }

 ul[data-list-style="check"] {
     list-style-type: none !important;
     padding-left: 0 !important;
 }

 ul[data-list-style="check"]>li {
     padding-left: 30px !important;
     position: relative;
     margin-bottom: 5px;
 }

 ul[data-list-style="check"]>li:before {
     content: "✓";
     position: absolute;
     left: 0;
     font-weight: bold;
     font-size: 18px;
     color: inherit;
 }

 /* Colors */
 ul[data-marker-color]>li::marker,
 ol[data-marker-color]>li::marker {
     color: var(--marker-color) !important;
 }

 ul[data-list-style="check"][data-marker-color]>li:before {
     color: var(--marker-color) !important;
 }

 ul[data-list-style="check"]>li[data-check-color]:before {
     color: attr(data-check-color color) !important;
 }


 .dynamic-section {
     scroll-margin-top: 120px;
 }