/* ---------- Base styles ---------- */
body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222;
  background: #fff;
  line-height: 1.6;
}
a { color: #0047ab; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Top Navigation Bar ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
}
.navbar .inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}
.navbar .name {
  font-weight: bold;
  font-size: 1.1rem;
}
.navbar nav a {
  margin-left: 20px;
  color: #333;
  font-weight: 500;
}
.navbar nav a:hover {
  color: #0047ab;
}

/* ---------- Layout Containers ---------- */
.outercontainer {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 16px;
}
.heading {
  border-bottom: 1px solid #ccc;
  padding-bottom: 1.5em;
  margin-top: 1.5em;
}
.intro {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.intro .img {
  flex: 0 0 200px;
}
.intro img {
  width: 100%;
  border-radius: 6px;
}
.intro .info {
  flex: 1;
  min-width: 250px;
}
.intro h1 { margin-top: 0; }
.intro ul { list-style: none; padding-left: 0.5em; margin: 0; }
.intro li { margin-bottom: 4px; }

.intro .text { 
  margin-top: 0em;   
  border-left: 2px solid #dedede;
  padding-left: 1em;
  /* background-color: #f5f7fa;  */
}
.intro .text p { margin: 0.6em 0; }

/* ---------- News Section ---------- */
.news {
  font-weight: bold;
  margin-top: 2em;
  font-size: 1.2em;
}
.scroll-container {
  max-height: 200px;
  overflow-y: auto;
  border-left: 2px solid #c8c8c8;
  padding-left: 1em;
  background-color: #f5f7fa;

}
.scroll-container ul { margin: 0; padding-left: 1em; }
.scroll-container li { margin-bottom: 0.4em; }

/* ---------- Recent Work ---------- */
.recent-work {
  margin-top: 2em;
  overflow-x: auto;
  white-space: nowrap;
}
.recent-work img, .recent-work video {
  height: 140px;
  margin-right: 10px;
  border-radius: 4px;
}

/* ---------- Publications ---------- */
.publications {
  margin-top: 3em;
}
.publications h2 {
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.3em;
}
.publication {
  margin-top: 1.5em;
  display: flex;
  gap: 16px;
}
.publication img, .publication video {
  width: 200px;
  height: auto;
  border-radius: 4px;
}
.publication .text {
  flex: 1;
}
.publication .title {
  font-weight: bold;
}
imgfooter {
  text-align: center;
  color: #666;
  font-size: 0.9em;
  margin-top: 0em;
  padding-bottom: 1em;
}
@media (max-width: 700px) {
  .intro { flex-direction: column; }
  .publication { flex-direction: column; }
  .navbar .inner { flex-direction: column; align-items: flex-start; }
  .navbar nav a { margin-left: 0; margin-right: 14px; }
}


/* ---------- Tabs ---------- */
.tab {
  display: flex;
  border-bottom: 1px solid #ccc;
  margin-bottom: 1em;
  flex-wrap: wrap;
}
.tablinks {
  background: none;
  border: none;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 1rem;
  color: #333;
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
}
.tablinks:hover {
  color: #0047ab;
}
.tablinks.active {
  border-bottom: 3px solid #0047ab;
  font-weight: 600;
  color: #0047ab;
}
/* .tabcontent {
  display: none;
}
.tabcontent.active {
  display: block;
} */


.tabcontent {
    display: none;
    padding: 0px 0px;
    border: 0px solid #ccc;
    border-top: none;
}

/* Show the default tab (TAB0) by default */
#TAB0 {
    display: block;
}


pre { 
    display: block; padding: 10px; margin: 0 0 10.5px; font-size: 14px; line-height: 1.428571429; word-break: break-all; word-wrap: break-word; color: #333333; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px; 
}
pre { 
    overflow-x: auto; font-size: 10px; max-width: 600px;
}


.tracker {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 200px;
}