:root{
  --stg-accent: #cfe0e6;
  --stg-text: #222;
}
.stg-team-grid {
  display: grid;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  grid-template-columns: repeat(4, 1fr);

  /* Center items inside grid cells */
  justify-items: center;   /* horizontal centering */
  align-items: center;     /* vertical alignment */
}


/* Make each team member's content centered */
.stg-member {
  display: block;
  flex-direction: column;
  align-items: center;        /* content centered horizontally */
  text-align: center;         /* text centered */
}

.stg-social {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.stg-social i { font-size: 14px; line-height: 1; }

/* Hover states (customize colors as desired) */
.stg-social:hover { transform: translateY(-3px); border-color: rgba(0,0,0,0.12); background: rgba(0,0,0,0.04); }

/* Brand-specific (optional) */
.stg-social.stg-twitter:hover { color: #1da1f2; border-color: rgba(29,161,242,0.14); }
.stg-social.stg-linkedin:hover { color: #0a66c2; border-color: rgba(10,102,194,0.12); }
.stg-social.stg-facebook:hover { color: #1877f2; border-color: rgba(24,119,242,0.12); }













/* responsive columns */
@media (max-width:1100px){ .stg-team-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width:780px){ .stg-team-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:480px){ .stg-team-grid{ grid-template-columns: repeat(1,1fr); } }

.stg-avatar-wrap{
  position:relative;
  width:150px;
  height:150px;
  border-radius:50%;
  overflow:hidden;
  margin-bottom:18px;
    margin: auto; 
}
.stg-avatar-wrap img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(100%) contrast(.95);
  transition: transform .28s ease, filter .28s ease;
}
.stg-avatar-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(218, 70, 30, 0.1);
  z-index:-1;
  transform:translateY(-12px);
  border-radius:50%;
  width: 176px;
  height: 176px;
}
.stg-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.36);
  opacity:0;
  transition:opacity .18s ease;
}
.stg-read-more{
  background:rgba(255,255,255,0.96);
  padding:6px 12px;
  border-radius:20px;
  font-size:14px;
  border:1px solid rgba(0,0,0,0.06);
  cursor:pointer;
}
.stg-avatar-wrap:hover img{ transform:scale(1.06); filter:grayscale(0); }
.stg-avatar-wrap:hover .stg-overlay{ opacity:1; }

.stg-name{ font-size:15px; margin:0 0 6px 0; font-weight:600; color:var(--stg-text); }
.stg-role{ font-size:12px; color:#666; margin:0; }

/* modal */
.stg-modal-backdrop{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:9999; background:rgba(0,0,0,0.6);
}
.stg-modal{
  background:#fff; border-radius:10px; width:100%; max-width:760px; box-shadow:0 30px 60px rgba(0,0,0,0.18);
  display:flex; gap:22px; padding:22px; align-items:flex-start; position:relative; max-height: 500px;
    overflow-y: auto;
}
.stg-modal-left{ width:180px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.stg-modal-left img{ width:160px;height:160px;border-radius:50%;object-fit:cover; display:block; }
.stg-modal-right{ flex:1; }
.stg-modal-name{ font-size:20px; margin:0 0 6px 0; }
.stg-modal-role{ color:#666; margin:0 0 12px 0; font-size:13px; }
.stg-modal-bio{ font-size:14px; line-height:1.45; color:#333; }
.stg-modal-socials{ margin-top:12px; }
.stg-modal-socials a{ margin-right:10px; text-decoration:none; font-size:18px; color:#1a1a1a; }

.stg-close{ position:absolute; top:10px; right:12px; background:transparent; border:0; font-size:26px; cursor:pointer; color:#333; }

/* hide modal by default (we toggle with inline style display:none added server-side) */




.stg-modal-toggle-wrap{ margin-top:12px; }
.stg-toggle-btn{
  background:#f4f4f4;
  border:1px solid #ddd;
  padding:6px 12px;
  border-radius:6px;
  cursor:pointer;
  font-size:14px;
}

#stg-modal-img{
float:left;
width:200px; 
padding:10px;

}


/