/* ===========================
   VARIABLES - easy to change
   =========================== */
:root {
  --navbar-bg: #cccccc;      /* Navigation bar background */
  --navbar-hover: #bbbbbb;   /* Navigation link hover background */
  --navbar-text: #000000;    /* Navigation link color */
  --font-main: 'Georgia', serif;
}

/* ===========================
   GLOBAL STYLES
   =========================== */
body {
  font-family: var(--font-main);
  margin: 0;
  padding: 0;
  background-color: #D6E4C5;
  color: #000000;
  font-size: 16px;
}

/* ===========================
   BANNER / HERO
   =========================== */
.banner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;                        
  background-color: #ffffff;
  padding: 30px 0;
  border-bottom: 1px solid #e0e0e0;
}

.banner-img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ===========================
   NAVIGATION BAR
   =========================== */
.navbar {
  background-color: var(--navbar-bg);
  border-bottom: 1px solid #888888;
}

.navbar ul {
  list-style: none;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.navbar li {
  margin: 0;
  border-right: 1px solid #888888;
  background: linear-gradient(to bottom, #f8f8f8 0%, #e0e0e0 50%, #d8d8d8 100%);
}

.navbar li:last-child {
  border-right: none;
}

.navbar a {
  display: block;
  padding: 1rem 1.5rem;
  color: var(--navbar-text);
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s;
  background: transparent;
}

.navbar a:hover,
.navbar a.active {
  background: linear-gradient(to bottom, #dddddd, #cccccc);
}

/* ===========================
   MAIN CONTENT
   =========================== */
.content {
  max-width: 1080px;
  margin: 0 auto;      /* remove gap around content */
  padding: 0 1rem;     /* optional horizontal padding */
}

/* Sections inside main */
main section {
  border-bottom: 1px solid #e0e0e0;
  margin: 0 0 1rem 0;  /* remove top margin, keep bottom margin small */
  background-color: #ffffff;
  padding: 1rem;       /* inner padding for readability */
  border-radius: 5px;
}

/* Remove top margin for the first section and its heading */
main section:first-of-type {
  margin-top: 0;
  padding-top: 1rem;  /* optional, keeps inner padding */
}

main section:first-of-type h2 {
  margin-top: 0;
}

/* Example: adjust heading inside sections globally */
main section h2 {
  color: #2B6B2E;
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 0.5rem; /* space below heading */
}

/* ===========================
   SLIDESHOW STYLES
   =========================== */
.slideshow-container {
  display: flex;
  max-width: 1080px;
  height: 200px;
  margin: 0rem auto;
  background-color: #ffffff;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #e0e0e0;
  position: relative;
}

.slide-image {
  width: 760px;
  height: 100%;
  object-fit: cover;
}

.slide-text {
  width: 320px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #f9f9f9;
}

.slide-text h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
}

.slide-text p {
  margin: 0;
  font-size: 0.9rem;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  padding: 0;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  z-index: 10;
}

.prev { left: 10px; }
.next { right: 10px; }

/* ===========================
   FOOTER
   =========================== */
.footer {
  background-color: #ffffff;
  color: #000000;
  text-align: center;
  padding: 1rem 0;
  margin-top: 2rem;
  border-top: 1px solid #e0e0e0;
}

.statcounter {
  margin-top: 0.5rem;
}

/* ===========================
   RESPONSIVE / MOBILE STYLES
   =========================== */
@media (max-width: 768px) {
  /* Navbar stacked */
  .navbar ul {
    flex-direction: column;
    align-items: stretch;
  }
  .navbar li {
    border-right: none;
    border-bottom: 1px solid #888888;
  }
  .navbar a {
    padding: 0.75rem 1rem;
  }

  /* Slideshow stacked */
  .slideshow-container {
    flex-direction: column;
    height: auto;
  }
  .slide-image,
  .slide-text {
    width: 100%;
    height: auto;
  }
  .prev {
    left: 10px;
  }
  .next {
    right: 10px;
  }
}

@media (max-width: 480px) {
  /* Reduce padding/margins on very small devices */
  .content {
    padding: 0 0.5rem;
  }
  main section {
    padding: 1rem;
  }

  /* Smaller font sizes */
  body {
    font-size: 14px;
  }
  .slide-text p {
    font-size: 0.85rem;
  }

  /* Banner image padding */
  .banner {
    padding: 20px 0;
  }
}

/* ===========================
   HAMBURGER MENU
   =========================== */
.hamburger {
  display: none; /* hidden by default on desktop */
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 25px;
  cursor: pointer;
  margin: 0 1rem;
}

.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: #000;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Transform hamburger to X when active */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile menu hidden by default */
.navbar ul {
  transition: max-height 0.3s ease;
  overflow: hidden;
}

/* Show menu when active (mobile) */
.navbar ul.active {
  max-height: 1000px; /* large enough to show all links */
}

/* Show hamburger on small screens */
@media (max-width: 768px) {
  .hamburger {
    display: flex;
  }
  .navbar ul {
    max-height: 0; /* hidden by default on mobile */
    flex-direction: column;
  }
}


/* Reduce gap between slideshow and main content */
.content {
  margin-top: 1rem;   /* previously 2rem */
}

main section:first-of-type {
  margin-top: 0;         /* remove top margin */
  padding-top: 0.5rem;   /* optional */
}

main section:first-of-type h2 {
  margin-top: 0;         /* remove heading margin */
}

main section h2 {
  color: #2B6B2E;  /* SeaGreen */
font-size: 1.8rem; /* bigger font size */
text-align: center;   /* center the text */
}

main section p {
  text-align: justify;
}

/* Research Highlights Grid */
.research-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0rem;
  padding-left: 0rem;   /* push cards inward from left */
  margin-top: 1rem;
}

/* Individual research card */
.research-card {
  width: 320px;            /* slightly wider than image */
  background-color: #ffffff;
  border-radius: 20px;     /* round corners */
  overflow: hidden;
  text-align: center;
  border: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 1rem;
}

/* Card image */
.research-card img {
  width: 310px;            /* original image width */
  height: 236px;           /* original image height */
  object-fit: cover;       /* cover the area without distortion */
  display: block;
  margin: 0 auto;          /* center horizontally */
  border-radius: 15px 15px 0 0; /* round top corners */
  border-bottom: 1px solid #e0e0e0;
}

/* Card title */
.research-card h3 {
  color: #2e7d32; /* green */
  margin: 0.5rem 0 0.25rem 0;
  font-size: 1.1rem;
}

/* Card description */
.research-card p {
  font-size: 0.9rem;
  padding: 0 0.75rem 1rem 0.75rem;
  text-align: justify;
  margin: 0;
}

/* Responsive tweaks for small screens */
@media (max-width: 768px) {
  .research-grid {
    grid-template-columns: 1fr;
  }
}

/* Add shadow and hover effect to research cards */
.research-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* subtle shadow */
}

.research-card:hover {
  transform: translateY(-5px); /* slight lift */
  box-shadow: 0 8px 15px rgba(0,0,0,0.2); /* stronger shadow on hover */
}

.read-more-btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1.2rem;
  background: linear-gradient(
    135deg,
    #f9f9f9 0%,
    #d9d9d9 20%,
    #b0b0b0 40%,
    #e0e0e0 60%,
    #c0c0c0 80%,
    #fdfdfd 100%
  );
  color: #000000;
  font-weight: bold;
  text-decoration: none;
  border-radius: 10px;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
  border: 1px solid #a0a0a0;
  transition: all 0.3s ease;
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.7),
              inset 0 -2px 6px rgba(0,0,0,0.3),
              0 4px 12px rgba(0,0,0,0.4);
}

.read-more-btn:hover {
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #d0d0d0 25%,
    #a0a0a0 50%,
    #dcdcdc 75%,
    #fefefe 100%
  );
  transform: scale(1.08);
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.9),
              inset 0 -2px 6px rgba(0,0,0,0.4),
              0 0 25px rgba(220,220,220,0.9),
              0 0 40px rgba(180,180,180,0.6);
}

/* ===========================
   RESEARCH PAGE SECTIONS
   =========================== */
.research-section {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin: 0.25rem 0;
  gap: 2rem;
  background-color: #ffffff;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.research-section img {
  width: 300px;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.research-section .research-text {
  flex: 1;
}

.research-section h3 {
  color: #2e7d32;
  margin-top: 0;
}

.research-section p {
  text-align: justify;
  margin-bottom: 0.5rem;
}

/* Responsive for mobile */
@media (max-width: 768px) {
  .research-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .research-section img {
    width: 100%;
    max-width: 300px;
    margin-bottom: 1rem;
  }
}


/* ===========================
   RESEARCH PAGE HEADING
   =========================== */
#Our-Research {
  margin: 0;           /* remove default top/bottom margin */
  padding: 0.5rem 0;   /* small vertical padding */
}

#Our-Research h2 {
  margin: 0;           /* remove heading margins */
  font-size: 2rem;
  text-align: center;
  color: #2e7d32;
}

#Our-Research {
  margin-top: -1rem; /* adjust until it touches navbar */
}


/* ===========================
   NEWS HEADING
   =========================== */

#News {
  margin-top: -1rem; /* adjust until it touches navbar */
padding: 1rem 4rem; /* 1rem top/bottom, 2rem left/right */
}


/* Alumni tables */
.alumni-table {
  width: 100%;
  max-width: 1060px;   /* adjust if needed */
  margin: 20px auto;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: #ffffff;
  table-layout: fixed; /* ensures column widths are respected */
}

.alumni-table th,
.alumni-table td {
  border: 1px solid #333;
  padding: 10px;
  text-align: left;
  vertical-align: top;
  word-wrap: break-word; /* prevents overflow */
}

.alumni-table th {
  background-color: #f2f2f2;
  font-weight: bold;
  text-align: center; /* <-- center text inside table headers */
  vertical-align: middle; /* <-- keeps text vertically centered */
}


/* body cells */
.alumni-table td {
  background-color: #ffffff; /* force white */
  text-align: left; /* keep text aligned left */
}


.section-title {
  text-align: center;
  margin: 40px 0 20px;
  font-size: 1.6rem;
}

@media (max-width: 768px) {
  .alumni-table {
    table-layout: auto; /* let columns resize naturally */
    font-size: 0.85rem;
  }

  .alumni-table col {
    width: auto !important; /* override fixed widths */
  }
}


/* Member table */
.member-table {
  width: 100%;
  max-width: 900px;   /* adjust as needed */
  margin: 20px auto;
  border-collapse: collapse;
  font-size: 1rem;
  background: #ffffff;
}

.member-table td {
  border: 1px solid #333;  /* adds borders like alumni-table */
  padding: 15px;
  vertical-align: top;
}

.member-table img {
  border-radius: 8px;     /* rounded corners for photo */
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;         /* center image in its cell */
}

.member-table strong {
  font-size: 1.2rem;
  display: inline-block;
  margin-bottom: 8px;
}


#cai h3,
#cai p {
  padding-left: 4.5rem; /* moves only the text below the table 1rem from the left */
}


/* =============================
   Photo Gallery Styling
   ============================= */

.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem; /* space between photos */
  padding: 2rem 1rem; /* top/bottom and left/right padding */
}

.photo-gallery figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f9f9f9;
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.photo-gallery figure:hover {
  transform: scale(1.03);
}

.photo-gallery img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  cursor: pointer;
}

.photo-gallery figcaption {
  margin-top: 0.8rem;
  font-size: 0.95rem;
  color: #333;
  text-align: center;
  line-height: 1.4;
}

.photo-gallery figcaption a {
  color: #1a73e8;
  text-decoration: none;
}

.photo-gallery figcaption a:hover {
  text-decoration: underline;
}


/* ===========================
   Publications Section
   =========================== */
#publications {
  width: 100%
  max-width: 1080px;
  margin: 0 auto 50px auto;  /* Center and bottom spacing */
  background-color: #fff;
  padding: 20px 30px;
  box-sizing: border-box;
}

#publications h2 {
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 10px;
  text-decoration: underline;
}

#publications h3 {
  margin-top: 30px;
  font-size: 1.6rem;
  color: #337136;
}

#publications h4 {
  margin-top: 25px;
  font-size: 1.4rem;
  color: #337136;
}

.publication {
  margin-bottom: 25px;  /* spacing between publications */
  line-height: 1.5;
  font-size: 1rem;
  color: #222;
}

.publication a {
  color: #1a73e8;  /* link color */
  text-decoration: none;
}

.publication a:hover {
  text-decoration: underline;
}

.publication img {
  display: block;
  margin: 10px auto;  /* center image */
  max-width: 100%;
  height: auto;
  border: 1px solid #ccc;  /* optional border for better appearance */
  border-radius: 4px;       /* optional rounded corners */
}


/* ===========================
   Search-Container region
   =========================== */

.search-container {
  text-align: center;
  margin: 20px 0;
justify-content: center
}

.search-container input {
  padding: 8px 12px;
  font-size: 1rem;
  width: 250px;
  max-width: 80%;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.search-container label {
  margin-left: 10px;
  font-size: 1rem;
  color: #555;
}