.elementor-747 .elementor-element.elementor-element-bb83b56{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-747 .elementor-element.elementor-element-dba4672{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:99;}.elementor-747 .elementor-element.elementor-element-2ac0189{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-747 .elementor-element.elementor-element-2ac0189.e-con{--align-self:center;}.elementor-747 .elementor-element.elementor-element-e2e5802{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-747 .elementor-element.elementor-element-7c10576 img{border-radius:50% 50% 50% 50%;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-747 .elementor-element.elementor-element-f413589{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-747 .elementor-element.elementor-element-8e8d0d7.elementor-element{--align-self:center;}.elementor-747 .elementor-element.elementor-element-d6b9355{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overflow:auto;}.elementor-747 .elementor-element.elementor-element-d6b9355.e-con{--flex-grow:1;--flex-shrink:1;}@media(min-width:768px){.elementor-747 .elementor-element.elementor-element-e2e5802{--width:300px;}}/* Start custom CSS for text-editor, class: .elementor-element-08dd14a */.button {
    display: inline-block;
    background-color: #214060;
    color: white;
    padding: 10px 20px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #1a3551; /* Darker shade of #214060 for hover effect */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d6b9355 */.elementor-747 .elementor-element.elementor-element-d6b9355 {
  height: 500px !important;
  overflow-y: auto;
  

}
@media (max-width: 767px) {
  .scroll-content {
    height: 500px; 
    overflow-y: auto;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bb83b56 */html {
  scroll-behavior: smooth;
    height: 100vh !important;
}
html {
  scroll-behavior: smooth;
    height: 100vh !important;
}

/* ============================
   American Site – Faculty Page CSS
   Brand: Red #A81E32, Navy #0B1360
============================ */
:root {
  --red: #A81E32;
  --navy: #0B1360;
  --text: #1c1c1c;
  --muted: #6b7280;
  --card: #ffffff;
  --border: #e5e7eb;
  --tab-bg: #f7f7f9;
  --radius: 14px;
}

/* ----------------------------
   SECTION 1 – TOP INFO CARD
   Supports both .teacher_info (legacy) and .teacher-card (new)
---------------------------- */
.teacher_info,
.teacher-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
  margin-bottom: 16px;
}

/* Legacy inside rows */
.teacher_info > div {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  color: var(--text);
}
.teacher_info b,
.teacher_info strong {
  color: var(--navy);
}

/* New grid layout (recommended) */
.teacher-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 24px;
}
.info-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: baseline;
  gap: 8px;
}
.info-row .label {
  font-weight: 700;
  color: var(--navy);
}
.info-row .value a {
  color: var(--navy);
  text-decoration: none;
}
.info-row .value a:hover {
  color: var(--red);
  text-decoration: underline;
}

/* ----------------------------
   SECTION 2 – SCROLLABLE TABS
---------------------------- */
.scrollable-tabs {
  position: sticky;
  top: 0; /* adjust if site header is sticky */
  z-index: 3;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px;
  margin: 18px 0;
  background: var(--tab-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  scrollbar-width: thin; /* Firefox */
}
.scrollable-tabs::-webkit-scrollbar { height: 8px; }
.scrollable-tabs::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 8px;
}
.scrollable-tabs .tab,
.scrollable-tabs a {
  flex: 0 0 auto;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  text-decoration: none;
  font-weight: 600;
  transition: color .25s ease, background .25s ease, border-color .25s ease, transform .15s ease;
  will-change: transform;
  white-space: nowrap;
}
.scrollable-tabs .tab:hover,
.scrollable-tabs a:hover {
  color: var(--red);
  border-color: var(--red);
  transform: translateY(-1px);
}
/* Active tab (JS can add .is-active) */
.scrollable-tabs .tab.is-active,
.scrollable-tabs a.is-active {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

/* ----------------------------
   SECTION 3 – TAB CONTENT PANELS
---------------------------- */
.tab-panel,
.tab-content {
  scroll-margin-top: 84px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
}

.headings {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 10px;
}
.normal_text {
  color: var(--text);
  line-height: 1.6;
  font-size: 1rem;
}
.normal_text h3,
.normal_text h4 {
  color: var(--navy);
  margin: 16px 0 8px;
}
.normal_text a {
  color: var(--navy);
  text-decoration: underline;
}
.normal_text a:hover {
  color: var(--red);
}

/* Lists inside content (e.g., CV bullets) */
.cv-list,
.normal_text ul {
  margin: 0 0 8px 1.2em;
  padding: 0;
  list-style: disc;
}
.cv-list li,
.normal_text li {
  margin: 8px 0;
  padding-left: .2em;
}

/* Smooth anchor scrolling site-wide */
html { scroll-behavior: smooth; }

/* ----------------------------
   RESPONSIVE
---------------------------- */
@media (min-width: 768px) {
  .teacher-info-grid { grid-template-columns: 1fr 1fr; }
  /* Field row can span both columns */
  .teacher-info-grid .info-row:nth-child(3) { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .teacher_info > div,
  .info-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .teacher_info > div b,
  .info-row .label { margin-bottom: 2px; }
  .scrollable-tabs { padding: 8px; }
  .scrollable-tabs .tab,
  .scrollable-tabs a { padding: 8px 12p/* End custom CSS */