body {font-family: Arial, Helvetica, sans-serif;margin:0;background:#f9f9f9;color:#333;}
.site-header {display:flex;align-items:center;background:#fff;padding:15px 25px;border-bottom:3px solid #003366;}
.header-left {flex:0 0 auto;}
.logo {height:60px;}
.header-center {flex:1;text-align:center;}
.header-center h1 {margin:0;color:#003366;}
.header-center .subtitle {margin:0;color:#333;font-size:16px;}
.header-center .date {margin:0;color:#333;font-size:14px;}
nav {background:#e6e6e6;padding:10px;text-align:center;}
nav a {margin:0 10px;text-decoration:none;color:#003366;font-weight:bold;}
main {max-width:1000px;margin:auto;background:white;padding:30px;line-height:1.6;}
footer {background:#e6e6e6;text-align:center;padding:15px;margin-top:40px;}



.slideshow {
  position: relative;
  width: 100%;   /* adjust */
  height: 240px;
  overflow: hidden;
}

.slideshow:hover .slide {
  animation-play-state: paused;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;   /* ❗ block clicks by default */
  animation: fade 20s infinite;
}

/* Each slide delay */
.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 4s; }
.slide:nth-child(3) { animation-delay: 8s; }
.slide:nth-child(4) { animation-delay: 12s; }
.slide:nth-child(5) { animation-delay: 16s; }

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

/* ACTIVE slide becomes clickable */
@keyframes fade {
  0%   { opacity: 0; pointer-events: none;}
  8%   { opacity: 1; pointer-events: auto;}
  25%  { opacity: 1; pointer-events: auto;}
  33%  { opacity: 0; pointer-events: none;}
  100% { opacity: 0; pointer-events: none;}
}




.section-header {background:#1f6d8c;color:white;padding:2px 24px;font-size:22px;font-weight:bold;position:relative;margin-top:32px;}
.section-header::before {content:'';position:absolute;left:0;top:0;width:6px;height:100%;background:#f0c14b;}
.people {display:flex;gap:150px;justify-content:center;flex-wrap:wrap;margin-top:20px;}
.people-best-paper {display:flex;gap:90px;justify-content:center;flex-wrap:wrap;margin-top:20px;}
.person {text-align:center;width:200px;margin-bottom: 10px;}
.person img {max-width:100%;height:auto;border-radius:18px;}
.affiliation {font-size:14px;color:#555;}
.updates ul {list-style:none;padding-left:0;}
.updates li {margin:8px 0;}
.highlight {color:red;font-weight:bold;}
.key-dates {display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:20px;text-align:center;}
.key-dates2 {display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px;text-align:center;}
.key-date .date {color:#c9a227;font-weight:bold;font-size:18px;}
.key-date .desc {margin-top:8px;font-size:16px;line-height:1.2;}
.topics {display:grid;grid-template-columns:1fr 1fr;gap:10px 40px;margin-top:20px;}
.flyer-thumb {display:block;margin:20px auto;width:25%;border:1px solid #ccc;}
.hero {position:relative;margin:-30px -30px 30px -30px;}
.hero img {width:100%;height:auto;display:block;}
.hero .hero-text {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:white;font-size:48px;font-weight:bold;text-shadow:0 2px 6px rgba(0,0,0,0.6);white-space: nowrap;} 
.hero .hero-text2 {position:absolute;top:70%;left:50%;transform:translate(-50%,-50%);color:white;font-size:48px;font-weight:bold;text-shadow:0 2px 6px rgba(0,0,0,0.6);white-space: nowrap;} 
.hero .hero-text3 {position:absolute;top:85%;left:50%;transform:translate(-50%,-50%);color:white;font-size:48px;font-weight:bold;text-shadow:0 2px 6px rgba(0,0,0,0.6);white-space: nowrap;} 
.qsr-banner {text-align:left;margin-bottom:25px;}
.qsr-banner img {width:75%;height:auto;}
.speakers {display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:40px;}
.speaker {text-align:center;}
.speaker img {max-width:50%;height:auto;border-radius:18px;}
.speaker-name {font-weight:bold;font-size:18px;margin-top:10px;}
.speaker-affil {font-size:14px;color:#555;line-height:1.4;margin-top:6px;}
/* Deadline highlight */
.deadline-highlight {
  color: #c9a227;
  font-weight: bold;
}

/* Button group */
.button-group {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 30px 0;
  flex-wrap: wrap;
}

/* Fancy buttons */
.fancy-btn {
  background: linear-gradient(135deg, #1f6d8c, #003366);
  color: white;
  border: none;
  padding: 14px 26px;
  font-size: 16px;
  border-radius: 30px;
  cursor: pointer;
  min-width: 260px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Glow + lift */
.fancy-btn:hover {
  box-shadow:
    0 0 8px rgba(31,109,140,0.8),
    0 0 16px rgba(31,109,140,0.6),
    0 4px 14px rgba(0,0,0,0.25);
  transform: translateY(-2px);
}

/* Fade-in animation */
.fade-in-btn {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp 0.8s ease-out forwards;
}

.fade-in-btn:nth-child(1) { animation-delay: 0.2s; }
.fade-in-btn:nth-child(2) { animation-delay: 0.4s; }

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Bullet spacing */
.spaced-list li {
  margin-bottom: 18px;
}

/* Mobile */
@media (max-width: 600px) {
  .button-group {
    flex-direction: column;
    align-items: center;
  }

  .fancy-btn {
    width: 100%;
    max-width: 320px;
  }
}


/* ===============================
   Fancy Table – Data Challenge
   =============================== */

.fancy-table {
  width: 90%;
  margin-left: 45px;
  border-collapse: collapse;
  margin-top: 20px;
  background: #ffffff;
  font-size: 15px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* Table header */
.fancy-table thead th {
  background: #1f6d8c;
  color: white;
  padding: 14px 16px;
  text-align: left;
  font-size: 16px;
}

/* Table body cells */
.fancy-table td {
  padding: 14px 16px;
  vertical-align: top;
  border-bottom: 1px solid #e6e6e6;
}

/* Zebra striping */
.fancy-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* Hover highlight */
.fancy-table tbody tr:hover {
  background-color: #eef6fa;
}

/* Date column emphasis */
.fancy-table td:first-child {
  font-weight: bold;
  color: #003366;
  white-space: nowrap;
  width: 100px;
}

/* Links inside table */
.fancy-table a {
  color: #1f6d8c;
  font-weight: bold;
  text-decoration: none;
}

.fancy-table a:hover {
  text-decoration: underline;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .fancy-table,
  .fancy-table thead,
  .fancy-table tbody,
  .fancy-table th,
  .fancy-table td,
  .fancy-table tr {
    display: block;
  }

  .fancy-table thead {
    display: none;
  }

  .fancy-table tr {
    margin-bottom: 16px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: white;
  }

  .fancy-table td {
    border: none;
    padding: 6px 0;
  }

  .fancy-table td:first-child {
    font-size: 16px;
    margin-bottom: 6px;
  }
}