/* Purdue Catalysis Center – Common CSS Styles */

    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: #f5f5f5;
    }

    #wrapper {
      display: flex;
      min-height: 100vh;
    }

    #sidebar {
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      width: 250px;
      background: #222;
      color: white;
      padding: 20px;
      box-sizing: border-box;
      overflow-y: auto;
      z-index: 1000;
	  flex-shrink: 0;
    }

    #logo {
      text-align: center;
      margin-bottom: 30px;
    }

    #logo img {
      width: 100%;
      max-width: 225px;
    }

#menu ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    #menu ul li {
      margin: 10px 0;
    }
	
	#menu li {
	  position: relative;
	}

    #menu ul li a {
      color: white;
      text-decoration: none;
      display: block;
      padding: 8px 12px;
      border-radius: 4px;
      transition: background 0.2s;
    }

    #menu ul li a:hover {
      background: #444;
    }
	
	.menu-v {
	  list-style: none;
	  padding: 0;
	  margin: 0;
	}

	.menu-v li {
	  position: relative;
	}

	/* Menu links */
	.menu-v a {
	  display: block;
	  padding: 12px 16px;
	  color: white;
	  text-decoration: none;
	  background: #222;
	  border-bottom: 1px solid #333;
	}

	.menu-v a:hover {
	  background: #444;
	}
	
	.menu-v a {
  display: block;
  padding: 10px 15px;
  color: white;
  text-decoration: none;
  background: #222;
  border-bottom: 1px solid #333;
  transition: background 0.2s;
}

/* Submenu base style */
	.has-submenu {
	  position: relative;
	}

	/* Hide submenu by default */
	.submenu {
	  display: none;
	  position: absolute;
	  left: 0;
	  top: 100%; /* show below the parent */
	  background-color: #333;
	  padding: 0;
	  list-style: none;
	  min-width: 200px;
	  z-index: 10001;
	  border-radius: 4px;
	  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	  box-shadow: 3px 3px 8px rgba(0,0,0,0.3);
	  border-radius: 4px;
	}

	.submenu li {
	  margin: 0;
	}

	.submenu a {
	  display: block;
	  color: white;
	  padding: 10px;
	  text-decoration: none;
	  border-bottom: 1px solid #444;
	}

	.submenu a:hover {
	  background-color: #ab4d63;
	  color: white;
	}

	.has-submenu:hover .submenu {
	  display: block;
	}
	
	/* Submenu items */
	.submenu li a {
	  padding: 10px 15px;
	  color: #ccc;
	  text-decoration: none;
	  background-color: #333;
	  border-bottom: 1px solid #444;
	  font-size: 14px;
	}
		
	/* Optional: Add ▼ icon to submenu items */
	.has-submenu > a::after {
	  content: " ▼";
	  font-size: 10px;
	  margin-left: 6px;
	}
	
	.extra-links {
	  margin-top: 40px;
	  padding: 20px;
	  background: #f9f9f9;
	  border-top: 1px solid #ccc;
	  border-bottom: 1px solid #ccc;
	}

	.extra-links h3.title {
	  font-size: 18px;
	  margin-bottom: 10px;
	  color: #333;
	}

	.extra-links ul {
	  list-style: none;
	  padding-left: 0;
	  margin-bottom: 20px;
	}

	.extra-links li {
	  margin: 5px 0;
	}

	.extra-links a {
	  text-decoration: none;
	  color: #2c3e50;
	  font-size: 14px;
	}

	.extra-links a:hover {
	  color: #ab4d63;
	}

	/* Footer pushes down content */
.footer-box {
  width: 100%;
  padding: 20px;
  text-align: center;
  font-size: 10px;
  color: #666;
  background-color: #f1f1f1;
  border-top: 1px solid #ccc;
}

	
	/* New content wrapper with vertical layout */
#main-content-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 100vh;
  overflow: hidden;
  align-items: center;
  padding: 0 20px;
  
  margin-left: 250px;            /* 🟢 Offset to avoid fixed sidebar */
  width: calc(100% - 250px);     /* 🟢 Fills rest of the page */
  box-sizing: border-box;
}


	
#content {
  flex-grow: 1;
  padding: 40px 30px;
  width: 100%;
  max-width: 1300px;           /* optional for centered content */
  background: white;
  box-sizing: border-box;
  text-align: center;
}


    h1.title {
      font-size: 28px;
      margin-bottom: 10px;
      color: #222;
    }

	h4.title {
      font-size: 14px;
      margin-bottom: 8px;
      color: #222;
    }
	
    .line {
      height: 2px;
      background: #ccc;
      margin-bottom: 20px;
    }

    #filtering-nav {
      list-style: none;
      padding: 0;
      margin-bottom: 30px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    #filtering-nav li {
      display: inline-block;
    }

    #filtering-nav a {
      display: inline-block;
      padding: 6px 10px;
      text-decoration: none;
      background: #eee;
      color: #333;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 14px;
    }

    #filtering-nav a:hover {
      background-color: #ab4d63;
      color: white;
      border-color: #ab4d63;
    }

    .publications-section {
      margin-bottom: 40px;
    }

    .publications-section h2 {
      font-size: 22px;
      color: #ab4d63;
      margin-top: 40px;
      margin-bottom: 10px;
    }

    .publications-section li {
      font-size: 9px;
      line-height: 1.6;
      margin-bottom: 12px;
      list-style: disc;
      margin-left: 20px;
    }

    .publications-section a {
      color: #1a73e8;
    }

    .publications-section a:hover {
      text-decoration: underline;
    }

    .back-to-top {
      font-size: 12px;
      margin-left: 10px;
	  color: #ab4d63;        /* match h2 */
      text-decoration: none;
    }
	
	.year-block {
  background: #f9f9f9;
  border: 1px solid #ddd;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.year-block h2 {
  margin-top: 0;
  font-size: 20px;
  color: #ab4d63;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 5px 0;
}

.year-block ul {
  padding-left: 20px;
  margin-top: 10px;
}

.year-block li {
  margin-bottom: 8px;
  font-size: 11px;
  line-height: 1.4
}

.year-block em {
  color: #666;
  font-style: normal;
  font-size: 13px;
}

.carousel-container {
  position: relative;
  max-width: 1300px;
  margin: 30px auto;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.carousel {
  position: relative;
  width: 100%;
  height: 550px;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 2s ease;
}

.carousel-image.active {
  opacity: 1;
}

.carousel-controls {
  position: absolute;
  width: 100%;
  top: 50%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  padding: 0 20px;
  box-sizing: border-box;
}

.carousel-btn {
  background-color: rgba(0,0,0,0.5);
  border: none;
  color: white;
  font-size: 24px;
  padding: 8px 14px;
  cursor: pointer;
  border-radius: 20%;
  transition: background 2s ease;
}

.carousel-btn:hover {
  background-color: rgba(171, 77, 99, 0.8);
}

.carousel-caption {
  margin-top: 10px;
  text-align: center;
  font-size: 20px;
  color: #444;
  font-style: italic;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

.mission-box {
  margin-top: 30px;
  padding: 20px;
  background-color: #f9f9f9;
  border-left: 4px solid #ab4d63;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  font-size: 15px;
  line-height: 1.6;
  max-width: 100%;
  text-align: left
}

.mission-box ul {
  padding-left: 20px;
  margin-top: 10px;
}

.mission-box li {
  margin-bottom: 10px;
}

.statement-section {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.statement-card {
  background: #fdfdfd;
  padding: 30px;
  border-radius: 6px;
  text-align: left;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  max-width: 100%;
}

.mission-list {
  padding-left: 20px;
  margin-top: 15px;
}

.mission-list li {
  margin-bottom: 10px;
  line-height: 1.6;
}

.table-wrapper {
  overflow-x: auto;
  margin: 20px 0;
}

.objective-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.objective-table th,
.objective-table td {
  border: 1px solid #ccc;
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.objective-table th {
  background-color: #f0f0f0;
  color: #222;
}

.expertise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.expertise-card {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.expertise-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.expertise-card h4 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
  color: #ab4d63;
}

.expertise-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.mission-highlight {
  background: #fff7f9;
  border-left: 5px solid #ab4d63;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  margin-top: 40px;
}

.mission-intro {
  font-size: 15px;
  margin-bottom: 10px;
  color: #444;
}

.mission-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mission-box {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  background: #fff;
  border: 1px solid #eee;
  padding: 15px 20px;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.03);
  transition: box-shadow 0.3s ease;
}

.mission-box:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.mission-icon {
  font-size: 20px;
  color: #ab4d63;
  margin-top: 2px;
}

.meeting-section {
  margin-top: 50px;
  width: 100%;
}

.calendar-container {
  width: 100%;
  max-width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  background: #fff;
}


/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: #F5DEB3;
  width: 900px;
  height: 150px;
  border: 3px solid #191970;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}



/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateX(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: 	#FFFAFA;
  color: black;
}


/* Style the back side */
.flip-card-back {
  background-color: white;
  color: black;
  transform: rotateX(180deg);
}


.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.container {
  padding: 2px 16px;
}









* {
  box-sizing: border-box;
}


/* Set a background color
body {
  background-color: #474e5d;
  font-family: Helvetica, sans-serif;
}

*/

/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: black;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content */
.container1 {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */
.container1::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -13px;
  background-color: white;
  border: 4px solid #FF9F55;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.left {
  left: 0;
}

/* Place the container to the right */
.right {
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid black;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent black;
}

/* Add arrows to the right container (pointing left) */
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid black;
  border-width: 10px 10px 10px 0;
  border-color: transparent black transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after {
  left: -13px;
}

/* The actual content */
.content1 {
  padding: 20px 30px;
  background-color: #ADD8E6;
  position: relative;
  border-radius: 6px;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
/* Place the timelime to the left */
  .timeline::after {
    left: 31px;
  }

/* Full-width containers */
  .container1 {
    width: 65%;
    padding-left: 70px;
    padding-right: 25px;
  }

/* Make sure that all arrows are pointing leftwards */
  .container1::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }

/* Make sure all circles are at the same spot */
  .left::after, .right::after {
    left: 15px;
  }

/* Make all right containers behave like the left ones */
  .right {
    left: 0%;
  }
}


.faculty-section {
  margin-top: 60px;
  width: 100%;
  text-align: center;
}

.faculty-profile-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 16px;
  background-color: #ab4d63;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.faculty-profile-btn:hover {
  background-color: #922e4f;
}


.video-section {
  margin-top: 60px;
  text-align: center;
  width: 100%;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  justify-items: center;
  margin-top: 20px;
}

.video-grid iframe {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}


.themed-table {
  width: 80%;
  border-collapse: collapse;
  margin: 20px auto;
  font-size: 14px;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  border: 2px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
  margin-left: 130px
}

.themed-table thead {
  background-color: #ab4d63;
  color: white;
  border: 2px solid #ccc;
}

.themed-table thead th {
  padding: 12px 16px;
  font-weight: bold;
  text-align: center;
  border-bottom: 2px solid #912c45;
}

.themed-table tbody td {
  padding: 12px 16px;
  color: #333;
  border-bottom: 1px solid #eee;
  border: 1px solid #ccc;
}

.themed-table tbody tr:hover {
  background-color: #f9f1f3;
}