/* ------------------------------------------------------------
   Team Profile Section – generic styles (no layout magic)
   ------------------------------------------------------------ */

/* ---------- Container --------------------------------------- */
.teamprofile-section {
  display: flex;
  flex-direction: column;
  align-items: center;          /* centre cards horizontally */
  padding: 50px;
  background: #EFF1FE;
}

/* ---------- Title ------------------------------------------ */
.title-div {
  width: 100%;
  padding-top: 100px;
  padding-bottom: 40px;
  border-bottom: 1px solid #C1C7E5;
}

.meet-our-team {
  margin: 0;
  color: #071F95;
  font-family: Urbanist, sans-serif;
  font-size: 60px;
  font-weight: 700;
  line-height: 63px;
  text-align: center;
}

/* ---------- Cards wrapper ----------------------------------- */
.team-div {
  display: flex;
  flex-wrap: wrap;          /* stack on small screens */
  gap: 25px;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 40px;
}

/* ---------- Profile card ------------------------------------ */
.profile-card {
  flex: 1 1 0;
  max-width: 375px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.newprofile-card {
  flex: 1 1 0;
  max-width: 375px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Image frame (keeps a square, adds inner padding) */
.img-frame {
  width: 100%;
  height: auto;          /* same as original */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-frame img {
  width: 100%;            /* fill the frame, keep aspect ratio */
  height: 100%;
}

/* Card body -------------------------------------------------- */
.card-div {
  width: 100%;
  min-height: 185px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* title + footer */
  align-items: center;
}

/* Heading (name & LinkedIn) --------------------------------- */
.heading-div {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px;
}

.nametitle-div {
  display: flex;
  flex-direction: column;
  gap: 10px;
}



.title {                     /* role / title */
  margin: 0;
  color: #071F95;
  font-family: Lexend, sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 14.4px;
}

.name {                      /* person’s name */
  margin: 0;
  color: #071F95;
  font-family: Urbanist, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 25.2px;
}



/* LinkedIn icon --------------------------------------------- */
.linkedin {
  width: 40px;
  height: 40px;
  padding: 10px 20px;          /* top/bottom + left/right */
  background: #030D40;
  display: flex;
  justify-content: center;
  align-items: center;
}

.vector {                      /* placeholder – replace with SVG or image */
  width: 20px;
  height: 20px;
  background: #ffffff00;            /* white icon on dark bg */
}

/* Footer (placeholder for arrow or other actions) ----------- */
.arrow-div {
  width: 100%;
  height: 39px;
  display: flex;
  justify-content: flex-end;   /* right‑align any content */
  padding: 25px;
}


/* ---------- Expandable section (hidden by default) ---------- */
.expandable {
  max-height: 0;
  overflow: hidden;
  transition: max-height .8s ease-out; /* transition duration */
  padding-left: 20px;
  padding-right: 20px;
  

}

/* Show the expandable when parent has .expanded class */
.card-div.expanded .expandable {
  display: block;
  margin-top: 25px;        /* same gap as original layout */
  max-height: 1000px;
}

/* Bio text – matches Figma’s typography */
.bio-div .bio {
  color:#071F95;
  font-family:Urbanist, sans-serif;
  font-size:12px;
  line-height:18px;
  font-weight:400;
  margin:0;
}

.bio-div-new .bio-new {
  color:#071F95;
  font-family:Urbanist, sans-serif;
  font-size:12px;
  line-height:18px;
  font-weight:400;
  margin:0;
  padding-bottom: 25px;
  padding-left: 25px;
  padding-right: 25px;
}
/* Education & Licensure styles --------------------------------- */
.edlic-div {
  margin-top:15px;         /* spacing between bio and education */
}

.education-title {
  color:#071F95;
  font-family:Lexend, sans-serif;
  font-size:12px;
  font-weight:800;
  text-decoration:underline;
  text-transform:uppercase;
  line-height:14.4px;
  margin:0 0 5px 0;
}

.edu-list {
  list-style:none;
  padding:0;
  margin:0;
  color:#071F95;
  font-family:Lexend, sans-serif;
  font-size:12px;
  line-height:18px;
  font-weight:500;
}

.edu-list li + li { /* space between list items */
  margin-top:10px;
}

.licence {
  color:#071F95;
  font-family:Lexend, sans-serif;
  font-size:12px;
  line-height:18px;
  font-weight:500;
}

/* ---------- Arrow button styles --------------------------------- */
.arrow-div {
  width:100%;
  height:39px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  cursor:pointer;          /* indicate clickable */
}

.arrow-div img {
  transition: transform .3s ease;   /* rotate when expanded */
}

/* Rotate arrow when card is expanded */
.card-div.expanded .arrow-div img {
  transform:rotate(180deg);
}


/* ------------------------------------------------------------
   Mobile‑first overrides – stack cards vertically
   ------------------------------------------------------------ */
@media screen and (max-width: 800px) {

    /* 1️⃣ Make the container a column so cards are stacked */
    .team-div {
        flex-direction: column;          /* <– was row by default */
        align-items: stretch;            /* make cards take full width */
    }

    /* 2️⃣ Each card should fill the available width and drop the
       max‑width restriction that keeps them narrow on larger screens. */
    .profile-card {
        flex-basis: auto;                /* let it grow/shrink freely */
        max-width: none;                 /* remove desktop cap (375px) */
        margin-bottom: 20px;             /* space between stacked cards */
    }

    /* 3️⃣ Adjust the image frame so the picture stays square but
       scales with the card width. */
    .img-frame {
        height: auto;                    /* allow it to grow vertically */
        aspect-ratio: 1 / 1;             /* keep a 1:1 ratio */
    }

    /* Optional – tweak padding inside the card body so text isn’t too
       cramped on narrow screens. */
    .card-div {
        padding: 20px;
    }
}