/* ==================================
   BASIC SETTINGS
================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  color: #18212b;

  background: #ffffff;

  line-height: 1.6;
}


/* ==================================
   PAGE WIDTH
================================== */

.container {
  width: min(1120px, 90%);

  margin: 0 auto;
}


/* ==================================
   NAVIGATION
================================== */

.site-header {
  background: rgba(255, 255, 255, 0.97);

  border-bottom: 1px solid #e7ebef;
}


.nav-container {
  min-height: 76px;

  display: flex;

  align-items: center;

  justify-content: space-between;
}


.site-name {
  color: #162f4d;

  text-decoration: none;

  font-size: 21px;

  font-weight: 700;
}


.nav-links {
  display: flex;

  gap: 32px;
}


.nav-links a {
  color: #485664;

  text-decoration: none;

  font-size: 15px;

  font-weight: 500;

  transition: color 0.2s ease;
}


.nav-links a:hover {
  color: #1769aa;
}



/* ==================================
   HERO
================================== */

.hero {
  padding: 85px 0 70px;
}


.hero-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.55fr)
    minmax(260px, 0.7fr);

  gap: 80px;

  align-items: center;
}



/* Student identity */

.student-label {
  margin: 0 0 15px;

  color: #1769aa;

  font-size: 14px;

  font-weight: 700;

  letter-spacing: 0.4px;
}



/* Main name */

.hero h1 {
  margin: 0;

  color: #142d4c;

  font-size: clamp(48px, 6vw, 70px);

  line-height: 1.05;

  letter-spacing: -2px;
}



/* Graduate Researcher / TA */

.role {
  margin: 22px 0 2px;

  color: #263c52;

  font-size: 22px;

  font-weight: 600;
}



/* University */

.institution {
  margin: 0;

  color: #66727e;

  font-size: 17px;
}



/* ==================================
   LAB AFFILIATION
================================== */

.lab-affiliation {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  margin-top: 20px;

  padding: 9px 14px;

  background: #f3f7fa;

  border: 1px solid #e3ebf1;

  border-radius: 7px;

  color: #465969;

  font-size: 14px;
}


.lab-dot {
  flex-shrink: 0;

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: #1769aa;
}


.separator {
  margin: 0 5px;

  color: #9aa8b5;
}



/* ==================================
   CURRENT RESEARCH
================================== */

.research-focus {
  margin: 28px 0 0;

  color: #65717c;

  font-size: 15px;
}


.research-focus strong {
  color: #273b50;

  font-weight: 600;
}



/* ==================================
   INTRODUCTION
================================== */

.hero-description {
  max-width: 700px;

  margin: 17px 0 0;

  color: #56616c;

  font-size: 17px;

  line-height: 1.75;
}



/* ==================================
   BUTTONS
================================== */

.hero-buttons {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 31px;
}


.button {
  display: inline-block;

  padding: 11px 19px;

  border-radius: 6px;

  text-decoration: none;

  font-size: 14px;

  font-weight: 600;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}


.button:hover {
  transform: translateY(-2px);
}


.primary-button {
  background: #1769aa;

  color: #ffffff;

  border: 1px solid #1769aa;
}


.primary-button:hover {
  background: #12578f;

  border-color: #12578f;
}


.secondary-button {
  background: #ffffff;

  color: #1769aa;

  border: 1px solid #cbd6df;
}


.secondary-button:hover {
  background: #f5f8fa;

  border-color: #b5c9d8;
}



/* ==================================
   RESEARCH INTEREST TAGS
================================== */

.research-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 9px;

  margin-top: 27px;
}


.research-tags span {
  padding: 6px 11px;

  background: #f2f6f9;

  border-radius: 20px;

  color: #455665;

  font-size: 13px;
}



/* ==================================
   PROFILE PHOTO
================================== */

.hero-image-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.profile-image {
  width: 100%;
  max-width: 325px;

  aspect-ratio: 4 / 5;
  object-fit: cover;

  border-radius: 12px;

  box-shadow:
    0 18px 45px rgba(32, 48, 64, 0.14);
}

.profile-icons {
  display: flex;
  justify-content: center;
  align-items: center;

  gap: 12px;

  margin-top: 20px;
}


.profile-icon {
  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #ffffff;

  border: 1px solid #d8e1e8;
  border-radius: 50%;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}


.profile-icon img {
  width: 20px;
  height: 20px;

  object-fit: contain;
}


.profile-icon:hover {
  transform: translateY(-3px);

  border-color: #b5c9d8;

  box-shadow: 0 6px 16px rgba(32, 48, 64, 0.12);
}

/* ==================================
   PROFILE ICONS
================================== */

.profile-icons {
  display: flex;

  justify-content: center;
  align-items: center;

  gap: 12px;

  margin-top: 22px;
}


.profile-icon {
  width: 42px;
  height: 42px;

  display: flex;

  align-items: center;
  justify-content: center;

  background: #ffffff;

  border: 1px solid #d8e1e8;
  border-radius: 50%;

  text-decoration: none;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}


.profile-icon img {
  width: 19px;
  height: 19px;

  object-fit: contain;
}


.profile-icon:hover {
  transform: translateY(-3px);

  border-color: #b5c9d8;

  box-shadow:
    0 6px 16px rgba(32, 48, 64, 0.12);
}

/* ==================================
   PHD OPPORTUNITY
================================== */

.opportunity-section {
  padding: 5px 0 75px;
}


.opportunity-card {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 35px;

  padding: 25px 30px;

  background: #f4f8fb;

  border: 1px solid #e2ebf2;

  border-radius: 12px;
}


.opportunity-content {
  max-width: 800px;
}


.opportunity-status {
  display: flex;

  align-items: center;

  gap: 9px;

  margin-bottom: 9px;

  color: #1769aa;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 1.5px;
}


.opportunity-dot {
  width: 8px;

  height: 8px;

  flex-shrink: 0;

  border-radius: 50%;

  background: #1769aa;
}


.opportunity-text {
  margin: 0;

  color: #596773;

  font-size: 15px;

  line-height: 1.7;
}


.opportunity-text strong {
  color: #24384d;

  font-weight: 700;
}


.opportunity-button {
  flex-shrink: 0;

  padding: 10px 17px;

  background: #ffffff;

  border: 1px solid #cbd6df;

  border-radius: 6px;

  color: #1769aa;

  text-decoration: none;

  font-size: 14px;

  font-weight: 600;

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}


.opportunity-button:hover {
  background: #edf4f9;

  transform: translateY(-2px);
}



/* ==================================
   GENERAL SECTIONS
================================== */

.section {
  padding: 90px 0;

  border-top: 1px solid #eef1f3;
}


.light-section {
  background: #f7f9fb;
}


.section-label {
  margin: 0 0 10px;

  color: #1769aa;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 1.5px;
}


.section-title {
  margin: 0;

  color: #162f4d;

  font-size: 34px;

  line-height: 1.25;
}


.section-intro {
  max-width: 720px;

  margin-top: 20px;

  color: #5d6873;

  font-size: 17px;

  line-height: 1.75;
}

/* ==================================
   RESEARCH SECTION
================================== */

.research-section {
  background: #ffffff;
}


/* Intro paragraph */

.research-overview {
  max-width: 820px;

  margin: 20px 0 55px;

  color: #5d6873;

  font-size: 17px;
  line-height: 1.8;
}


/* ==================================
   RESEARCH PROJECT
================================== */

.research-project {
  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.1fr);

  gap: 55px;

  align-items: center;

  padding: 45px 0;

  border-top: 1px solid #e8edf1;
}


/* Second project reverses visual balance */

.research-project-reverse {
  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(0, 0.9fr);
}


/* ==================================
   PROJECT IMAGE
  ================================== */

.research-project-image {
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(32, 48, 64, 0.08);
}


/* Normal research image */
.research-project-image img {
  display: block;
  width: 100%;
  height: auto;
}


/* Slideshow container */
.research-slideshow {
  position: relative;
  min-height: 320px;
}


/* Slideshow images */
.research-slideshow .research-slide {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;
  background: #ffffff;

  opacity: 0;
  transition: opacity 0.8s ease;
}


/* Visible slide */
.research-slideshow .research-slide.active {
  opacity: 1;
}


/* ==================================
   PROJECT TEXT
================================== */

.research-project-content {
  min-width: 0;
}


.research-project-status {
  display: inline-block;

  margin-bottom: 14px;

  padding: 5px 10px;

  background: #edf5fb;

  border-radius: 20px;

  color: #1769aa;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 1px;
}


.emerging-status {
  background: #f1f5f7;

  color: #58736e;
}


.research-project-content h3 {
  margin: 0 0 18px;

  color: #162f4d;

  font-size: 27px;
  line-height: 1.3;
}


.research-project-content p {
  margin: 0 0 14px;

  color: #596773;

  font-size: 16px;
  line-height: 1.75;
}


/* ==================================
   PROJECT TAGS
================================== */

.project-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 23px;
}


.project-tags span {
  padding: 6px 11px;

  background: #f2f6f9;

  border-radius: 20px;

  color: #455665;

  font-size: 12px;
}


/* ==================================
   METHODS SECTION
================================== */

.research-methods {
  margin-top: 35px;

  padding: 32px;

  background: #f4f8fb;

  border: 1px solid #e2ebf2;
  border-radius: 12px;
}


.research-methods-label {
  margin: 0 0 7px;

  color: #1769aa;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 1.4px;
}


.research-methods h3 {
  margin: 0 0 25px;

  color: #162f4d;

  font-size: 23px;
}


.methods-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 15px 25px;
}


.method-item {
  display: flex;

  align-items: center;

  gap: 9px;

  color: #53616d;

  font-size: 14px;
}


.method-dot {
  width: 6px;
  height: 6px;

  flex-shrink: 0;

  border-radius: 50%;

  background: #1769aa;
}

/* ==================================
   RESEARCH SECTION
================================== */

.research-section {
  background: #ffffff;
}

.research-overview {
  max-width: 820px;
  margin: 20px 0 55px;

  color: #5d6873;

  font-size: 17px;
  line-height: 1.8;
}


/* ==================================
   RESEARCH PROJECTS
================================== */

.research-project {
  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.1fr);

  gap: 55px;

  align-items: center;

  padding: 45px 0;

  border-top: 1px solid #e8edf1;
}


.research-project-reverse {
  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(0, 0.9fr);
}


/* Project images */

.research-project-image {
  width: 100%;

  overflow: hidden;

  border-radius: 12px;

  background: #f2f5f7;

  box-shadow:
    0 12px 32px rgba(32, 48, 64, 0.08);
}



/* Project text */

.research-project-content {
  min-width: 0;
}


.research-project-status {
  display: inline-block;

  margin-bottom: 14px;

  padding: 5px 10px;

  background: #edf5fb;

  border-radius: 20px;

  color: #1769aa;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 1px;
}


.emerging-status {
  background: #f1f5f7;

  color: #58736e;
}


.research-project-content h3 {
  margin: 0 0 18px;

  color: #162f4d;

  font-size: 27px;
  line-height: 1.3;
}


.research-project-content p {
  margin: 0 0 14px;

  color: #596773;

  font-size: 16px;
  line-height: 1.75;
}


/* Project tags */

.project-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 23px;
}


.project-tags span {
  padding: 6px 11px;

  background: #f2f6f9;

  border-radius: 20px;

  color: #455665;

  font-size: 12px;
}

/* ==================================
   EARLIER RESEARCH
================================== */

.earlier-research {
  margin-top: 45px;

  padding: 28px 30px;

  background: #f7f9fb;

  border: 1px solid #e3e9ee;
  border-radius: 12px;
}


.earlier-research-label {
  margin: 0 0 8px;

  color: #1769aa;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 1.4px;
}


.earlier-research h3 {
  margin: 0;

  color: #162f4d;

  font-size: 21px;
  line-height: 1.4;
}


.earlier-research-meta {
  margin: 7px 0 0;

  color: #7a8690;

  font-size: 13px;
}


.earlier-research-description {
  max-width: 820px;

  margin: 18px 0 0;

  color: #596773;

  font-size: 15px;
  line-height: 1.7;
}


.earlier-research-link {
  display: inline-block;

  margin-top: 18px;

  color: #1769aa;

  text-decoration: none;

  font-size: 14px;
  font-weight: 600;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}


.earlier-research-link:hover {
  color: #12578f;

  transform: translateX(3px);
}


/* ==================================
   PUBLICATIONS
================================== */

.publication-list {
  width: 100%;
  margin-top: 38px;
}


.publication-card {
  width: 100%;
  max-width: none;

  padding: 28px 30px;

  background: #ffffff;

  border: 1px solid #e2e9ef;
  border-radius: 12px;
}


.publication-card:hover {
  transform: translateY(-3px);

  border-color: #cbd9e4;

  box-shadow:
    0 10px 28px rgba(32, 48, 64, 0.08);
}


/* Review Article + Year */

.publication-top {
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 20px;

  margin-bottom: 15px;
}


.publication-type {
  padding: 5px 10px;

  background: #edf5fb;

  border-radius: 20px;

  color: #1769aa;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 0.7px;
  text-transform: uppercase;
}


.publication-year {
  color: #788590;

  font-size: 14px;
  font-weight: 600;
}


/* Publication title */

.publication-title {
  max-width: 800px;

  margin: 0 0 14px;

  color: #162f4d;

  font-size: 21px;
  line-height: 1.45;

  font-weight: 650;
}


/* Authors */

.publication-authors {
  margin: 0 0 7px;

  color: #53616d;

  font-size: 15px;
  line-height: 1.6;
}


.publication-authors strong {
  color: #1769aa;
}


/* Journal */

.publication-journal {
  margin: 0;

  color: #53616d;

  font-size: 15px;
  line-height: 1.6;
}


/* DOI */

.publication-doi {
  margin: 5px 0 0;

  color: #7a8690;

  font-size: 13px;
}


/* Article button */

.publication-actions {
  margin-top: 20px;
}


.publication-button {
  display: inline-block;

  padding: 9px 15px;

  background: #ffffff;

  border: 1px solid #cbd6df;
  border-radius: 6px;

  color: #1769aa;

  text-decoration: none;

  font-size: 13px;
  font-weight: 600;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}


.publication-button:hover {
  background: #edf4f9;

  border-color: #b5c9d8;

  transform: translateY(-2px);
}

/* ==================================
   ABSTRACTS & PRESENTATIONS
================================== */

.presentations-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 38px;
}


.presentation-card {
  padding: 28px 30px;

  background: #ffffff;

  border: 1px solid #e2e9ef;
  border-radius: 12px;
}


.presentation-card-with-image {
  display: grid;

  /* Make the image wider */
  grid-template-columns: 500px 1fr;

  gap: 30px;

  align-items: start;

  /* No fixed height — card grows automatically */
  height: auto;
}


.presentation-image {
  width: 100%;
}


.presentation-image img {
  width: 100%;
  height: auto;

  display: block;

  border-radius: 10px;

  object-fit: contain;
}


.presentation-body {
  min-width: 0;
}


.presentation-top {
  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 20px;

  margin-bottom: 16px;
}


.presentation-badge {
  padding: 5px 10px;

  background: #edf5fb;

  border-radius: 20px;

  color: #1769aa;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 0.8px;
}


.presentation-status {
  color: #58736e;

  font-size: 13px;
  font-weight: 700;
}


.presented-status {
  color: #1769aa;
}


.presentation-card h3 {
  max-width: 850px;

  margin: 0 0 14px;

  color: #162f4d;

  font-size: 21px;
  line-height: 1.45;
}


.presentation-authors,
.presentation-event,
.presentation-meta,
.presentation-description {
  margin: 5px 0;

  color: #596773;

  font-size: 15px;
  line-height: 1.6;
}


.presentation-authors strong {
  color: #1769aa;
}


.presentation-meta {
  color: #7a8690;
  font-size: 13px;
}


.presentation-description {
  margin-top: 12px;
}

/* ==================================
   TECHNICAL SKILLS
================================== */

.skills-section {
  padding: 90px 0;
}

.skills-intro {
  max-width: 780px;
  margin-top: 20px;
  color: #596773;
  font-size: 17px;
  line-height: 1.75;
}

.skills-layout {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 36px;
  align-items: start;
  margin-top: 38px;
}

/* Left side slideshow */
.skills-slideshow-box {
  width: 100%;
}

.skills-slideshow {
  position: relative;
  width: 100%;
  height: 430px;
  border-radius: 14px;
  overflow: hidden;
  background: #f4f7fa;
  box-shadow: 0 10px 26px rgba(32, 48, 64, 0.08);
}

.skills-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

.skills-slide.active {
  opacity: 1;
}

.skills-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dots */
.skills-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.skills-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cfd8e3;
  transition: background 0.3s ease;
}

.skills-dot.active {
  background: #2f67b2;
}

/* Right side content */
.skills-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.skill-group {
  padding: 22px 24px;
  background: #ffffff;
  border: 1px solid #e2e9ef;
  border-radius: 12px;
}

.skill-group h3 {
  margin: 0 0 16px;
  color: #162f4d;
  font-size: 20px;
  line-height: 1.35;
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.skill-tags span {
  padding: 7px 12px;
  background: #f2f6f9;
  border-radius: 20px;
  color: #455665;
  font-size: 13px;
  line-height: 1.4;
}

/* Responsive */
@media (max-width: 900px) {
  .skills-layout {
    grid-template-columns: 1fr;
  }

  .skills-slideshow {
    height: 380px;
  }
}

@media (max-width: 640px) {
  .skills-section {
    padding: 70px 0;
  }

  .skills-slideshow {
    height: 300px;
  }

  .skill-group {
    padding: 20px;
  }

  .skills-intro {
    font-size: 16px;
  }
}



/* ==================================
   LATEST NEWS
================================== */

.news-timeline {
  max-width: 850px;

  margin-top: 38px;
}


.news-item {
  display: grid;

  grid-template-columns: 110px 1fr;

  gap: 25px;

  padding: 20px 0;

  border-bottom: 1px solid #e3e9ee;
}


.news-date {
  color: #1769aa;

  font-size: 13px;
  font-weight: 700;
}


.news-content {
  position: relative;

  padding-left: 22px;
}


.news-dot {
  position: absolute;

  top: 8px;
  left: 0;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #1769aa;
}


.news-content p {
  margin: 0;

  color: #596773;

  font-size: 15px;
  line-height: 1.7;
}



/* ==================================
   EDUCATION
================================== */

.education-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 24px;

  margin-top: 38px;
}


.education-card {
  padding: 28px;

  background: #ffffff;

  border: 1px solid #e2e9ef;
  border-radius: 12px;
}


.education-year {
  margin-bottom: 12px;

  color: #1769aa;

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 0.8px;
}


.education-card h3 {
  margin: 0 0 10px;

  color: #162f4d;

  font-size: 22px;
}


.education-school {
  margin: 0;

  color: #465969;

  font-size: 16px;
  font-weight: 600;
}


.education-location {
  margin: 4px 0 18px;

  color: #7a8690;

  font-size: 14px;
}


.education-detail {
  color: #596773;

  font-size: 14px;
}


.education-note {
  margin-top: 10px;

  color: #6c7883;

  font-size: 13px;
}



/* ==================================
   TEACHING & SERVICE
================================== */

.teaching-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 24px;

  margin-top: 38px;
}


.teaching-card {
  padding: 28px;

  background: #ffffff;

  border: 1px solid #e2e9ef;
  border-radius: 12px;
}


.teaching-card-label {
  display: inline-block;

  margin-bottom: 12px;

  color: #1769aa;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 1px;
}


.teaching-card h3 {
  margin: 0 0 7px;

  color: #162f4d;

  font-size: 22px;
}


.teaching-meta {
  margin: 0 0 18px;

  color: #7a8690;

  font-size: 13px;
}


.teaching-card p {
  color: #596773;

  font-size: 15px;
  line-height: 1.7;
}


.service-highlight {
  margin-top: 12px;

  padding: 10px 12px;

  background: #f4f8fb;

  border-radius: 7px;

  color: #465969;

  font-size: 13px;
}

/* ==================================
   BUETPS SCROLL REVEAL CARD
================================== */

.buetps-card {
  position: relative;

  overflow: hidden;

  min-height: 360px;

  --buetps-reveal: 0;
}


/* Normal card underneath */

.buetps-card-content {
  position: relative;

  z-index: 1;
}


/* Photo layer */

.buetps-cover {
  position: absolute;

  inset: 0;

  z-index: 5;

  display: flex;
  flex-direction: column;

  background: #ffffff;

  transform:
    translateY(
      calc(var(--buetps-reveal) * -80%)
    );

  transition:
    transform 0.08s linear;

  pointer-events: none;

  box-shadow:
    0 4px 18px rgba(32, 48, 64, 0.08);
}


/* Photo */

.buetps-cover-image {
  flex: 1;

  min-height: 0;

  overflow: hidden;
}


.buetps-cover-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center 35%;
}


/* Minimal information below photo */

.buetps-cover-title {
  padding: 18px 22px;

  background: #ffffff;

  border-top: 1px solid #e5eaee;
}


.buetps-cover-title h3 {
  margin: 0 0 3px;

  color: #162f4d;

  font-size: 21px;
}


.buetps-cover-title p {
  margin: 0;

  color: #697680;

  font-size: 14px;
}


/* ==================================
   LIFE OUTSIDE RESEARCH
================================== */

.life-gallery {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 18px;

  margin-top: 35px;
}


.life-card {
  overflow: hidden;

  background: #ffffff;

  border: 1px solid #e2e9ef;
  border-radius: 12px;

  box-shadow:
    0 10px 26px rgba(32, 48, 64, 0.08);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}


.life-card:hover {
  transform: translateY(-4px);

  box-shadow:
    0 14px 32px rgba(32, 48, 64, 0.13);
}


/* Slideshow */

.life-slideshow {
  position: relative;

  width: 100%;
  height: 240px;

  overflow: hidden;

  background: #f4f7fa;
}


.life-slide {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  opacity: 0;

  transition:
    opacity 1.6s ease-in-out;
}


.life-slide.active {
  opacity: 1;
}


/* Card title */

.life-card-text {
  padding: 15px 17px;

  color: #162f4d;

  font-size: 15px;
  font-weight: 600;
}



/* ==================================
   FOOTER
================================== */

footer {
  padding: 30px 0;

  border-top: 1px solid #e7ebef;
}


.footer-content {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  color: #68747f;

  font-size: 14px;
}


.footer-links {
  display: flex;

  gap: 20px;
}


.footer-links a {
  color: #52616e;

  text-decoration: none;
}


.footer-links a:hover {
  color: #1769aa;
}



/* ==================================
   MOBILE
================================== */

@media (max-width: 760px) {

  .nav-container {
    min-height: 65px;
  }


  .nav-links {
    gap: 14px;
  }


  .nav-links a {
    font-size: 13px;
  }


  .hero {
    padding: 55px 0 55px;
  }


  .hero-grid {
    grid-template-columns: 1fr;

    gap: 40px;
  }


  .hero-image-wrapper {
    order: -1;
  }


  .profile-image {
    max-width: 245px;
  }


  .hero h1 {
    font-size: 48px;

    letter-spacing: -1px;
  }


  .role {
    font-size: 20px;
  }


  .institution {
    font-size: 16px;
  }


  .hero-description {
    font-size: 16px;
  }


  .lab-affiliation {
    align-items: flex-start;
  }


  .opportunity-section {
    padding-bottom: 55px;
  }


  .opportunity-card {
    flex-direction: column;

    align-items: flex-start;

    gap: 20px;

    padding: 23px;
  }


  .section {
    padding: 70px 0;
  }


  .footer-content {
    flex-direction: column;

    align-items: flex-start;
  }

    .publication-with-image {
    grid-template-columns: 1fr;

    gap: 22px;
  }


  .publication-thumbnail {
    width: 100%;
    max-width: 320px;
  }

    .research-overview {
    margin-bottom: 40px;
  }


  .research-project,
  .research-project-reverse {
    grid-template-columns: 1fr;

    gap: 28px;

    padding: 38px 0;
  }


  .research-project-reverse .research-project-content {
    order: 2;
  }


  .research-project-reverse .research-project-image {
    order: 1;
  }


  .research-project-image img {
    width: 100%;
    height: auto;
  }


  .research-project-content h3 {
    font-size: 24px;
  }


  .methods-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 14px 18px;
  }


  .research-methods {
    padding: 24px;
  }

    .education-grid,
  .teaching-grid {
    grid-template-columns: 1fr;
  }


  .news-item {
    grid-template-columns: 1fr;

    gap: 6px;
  }


  .news-content {
    padding-left: 18px;
  }


  .life-gallery {
    grid-template-columns: 1fr;
  }


  .life-gallery img {
    height: 260px;
  }

    .presentation-card-with-image {
    grid-template-columns: 1fr;
  }

    .skills-layout {
    grid-template-columns: 1fr;
  }

  .skills-photos img {
    height: 240px;
  }

  .skill-group {
    padding: 20px;
  }

   .about-layout {
    grid-template-columns: 1fr;

    gap: 30px;
  }


  @media (max-width: 760px) {

  .about-section {
    min-height: auto;

    padding: 75px 0;
  }


  .about-video-overlay {
  background:
    linear-gradient(
      90deg,
      rgba(10, 29, 49, 0.78) 0%,
      rgba(10, 29, 49, 0.68) 35%,
      rgba(10, 29, 49, 0.38) 62%,
      rgba(10, 29, 49, 0.041) 100%
    );
}


  .about-content {
    max-width: 100%;
  }


  .about-title {
    font-size: 30px;
  }


  .about-story p {
    font-size: 15px;
    line-height: 1.75;
  }

}

}

}

/* ==================================
   PUBLICATION THUMBNAIL SLIDESHOW
================================== */

.publication-with-image {
  display: grid;
  grid-template-columns: 200px 1fr;

  gap: 28px;

  align-items: start;
}


.publication-thumbnail {
  width: 200px;
  aspect-ratio: 4 / 3;

  position: relative;

  overflow: hidden;

  border-radius: 9px;

  background: #eef3f6;
}


.publication-thumbnail .slide {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;

  opacity: 0;

  transition: opacity 0.8s ease;
}


.publication-thumbnail .slide.active {
  opacity: 1;
}


.publication-details {
  min-width: 0;
}

/* ==================================
   PAPER BIOSENSOR SLIDESHOW
================================== */

.research-slideshow {
  position: relative;

  width: 100%;
  height: 320px;

  overflow: hidden;

  background: #ffffff;

  border-radius: 12px;
}


/* Both images occupy exactly the same space */
.research-slideshow .research-slide {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;

  opacity: 0;

  transition: opacity 2s ease;
}


/* Only the active image is visible */
.research-slideshow .research-slide.active {
  opacity: 1;
}

/* ==================================
   EDUCATION WITH LOGOS
================================== */

.education-card-header {
  display: flex;
  align-items: flex-start;

  gap: 18px;
}


.education-logo {
  width: 64px;
  height: 64px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;
}


.education-logo img {
  max-width: 100%;
  max-height: 100%;

  object-fit: contain;
}


.education-heading {
  min-width: 0;
}


.education-heading h3 {
  margin: 0 0 8px;

  color: #162f4d;

  font-size: 22px;
  line-height: 1.35;
}

/* ==================================
   ABOUT ME — VIDEO BACKGROUND
================================== */

.about-section {
  position: relative;

  width: 100%;

  min-height: 650px;

  display: flex;
  align-items: center;

  overflow: hidden;

  padding: 95px 0;
}


/* Full background video */

.about-background-video {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 100%;
  height: 100%;

  transform: translate(-50%, -50%);

  object-fit: cover;

  z-index: 0;
}


/* Left-to-right readability overlay */

.about-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;

  background:
    linear-gradient(
      90deg,
      rgba(10, 29, 49, 0.92) 0%,
      rgba(10, 29, 49, 0.84) 35%,
      rgba(10, 29, 49, 0.55) 62%,
      rgba(10, 29, 49, 0.18) 100%
    );
}


/* Content layer */

.about-container {
  position: relative;

  z-index: 2;

  width: min(1120px, 90%);

  margin: 0 auto;
}


.about-content {
  max-width: 700px;
}


/* Small section label */

.about-section-label {
  margin: 0 0 10px;

  color: #9fd1f4;

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 1.6px;
}


/* Main heading */

.about-title {
  margin: 0 0 28px;

  color: #ffffff;

  font-size: 36px;
  line-height: 1.25;
}


/* Story text */

.about-story p {
  margin: 0 0 18px;

  color: rgba(255, 255, 255, 0.88);

  font-size: 16px;
  line-height: 1.8;
}


.about-story p:last-child {
  margin-bottom: 0;
}


/* Ending line */

.about-story .about-ending {
  color: #ffffff;

  font-weight: 600;
}



/* ==================================
   HERO MOLECULAR BACKGROUND
================================== */

.hero {
  position: relative;
  overflow: hidden;

  background: #ffffff;
}