body {
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    background-color: #f1f5f9;
    color: #333;
    margin: 0;
    padding: 0;
}

.btx-section { max-width: 1200px; margin: 0 auto 40px auto; padding: 0 20px; }
.section-title { font-size: 26px; font-weight: 600; color: #0f172a; margin: 40px 0 20px 0; padding-left: 10px; border-left: 4px solid #FDB813; }

.btx-section-items {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 20px; padding: 10px 5px 20px 5px;
    &::-webkit-scrollbar { height: 8px; }
    &::-webkit-scrollbar-track { background: #e2e8f0; border-radius: 4px; }
    &::-webkit-scrollbar-thumb { background-color: #94a3b8; border-radius: 4px; }
    &::-webkit-scrollbar-thumb:hover { background-color: #64748b; }
}

.btx-col-joshua {
    flex: 0 0 240px; background-color: #ffffff; border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer; text-align: center; overflow: hidden;
}
.btx-col-joshua:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.07); }
.btx-col-joshua.inactive { opacity: 0.7; filter: grayscale(50%); }

.image-container {
    width: 100%; height: 180px; background-color: #e2e8f0; position: relative;
}
.member-photo-main { width: 100%; height: 100%; object-fit: cover; }
.btx-team-body { padding: 15px; }
.btx-team-name { font-size: 1.15em; font-weight: 600; color: #1e293b; margin: 0 0 5px 0; }
.btx-team-role { font-size: 0.85em; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; }

.country-flag {
    position: absolute; top: 10px; right: 10px; width: 30px; height: 30px;
    border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    object-fit: cover; z-index: 2;
}



.modal {
    display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(17, 24, 39, 0.85); overflow: auto; animation: fadeIn 0.3s ease-out; display: flex; align-items: center; justify-content: center; padding: 20px;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { transform: translateY(20px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

.modal-content {
    background-color: #fff; padding: 0; border-radius: 12px; max-width: 700px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); animation: slideIn 0.35s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative;
}
.close-button { position: absolute; top: 12px; right: 12px; font-size: 30px; font-weight: 300; line-height: 1; color: #9ca3af; cursor: pointer; transition: color 0.2s, transform 0.2s; z-index: 10; }
.close-button:hover { color: #111827; transform: rotate(90deg); }

.modal-header { padding: 25px 30px; border-bottom: 1px solid #e5e7eb; }
#modalNameContainer { display: flex; align-items: center; gap: 15px; }
#modalName { font-size: 2em; font-weight: 700; color: #111827; margin: 0; line-height: 1.2; }
#modalType { font-size: 1.1em; font-weight: 500; color: #64748b; margin: 5px 0 0 0; text-transform: uppercase; letter-spacing: 0.5px; }
.modal-country-flag { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1px solid #e2e8f0; flex-shrink: 0; }

.modal-body { display: flex; flex-direction: column; padding: 30px; gap: 30px; }
@media (min-width: 640px) { .modal-body { flex-direction: row; } }

.modal-image { flex-shrink: 0; text-align: center; }
.modal-image img { width: 160px; height: 200px; object-fit: cover; border-radius: 8px; display: inline-block; }
.modal-details { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }

#modalContent { font-size: 1em; line-height: 1.7; color: #374151; flex-grow: 1; }
#modalContent span { display: block; font-size: 1.3em; font-weight: 600; color: #B91C1C; margin-bottom: 15px; padding-bottom: 5px; border-bottom: 2px solid #f8d7da; }

.modal-links {
    display: flex;
    flex-direction: column;   
    align-items: flex-start;  
    gap: 10px;                
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

.modal-links a {
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; font-weight: 600; padding: 10px 20px;
    border-radius: 8px; transition: all 0.2s ease;
}
#modalWebpage a { background-color: #1e293b; color: #fff; }
#modalWebpage a:hover { background-color: #0f172a; transform: translateY(-2px); }
#modalEmail a { background-color: #e2e8f0; color: #334155; }
#modalEmail a:hover { background-color: #cbd5e1; transform: translateY(-2px); }