/* ============================ */
/* Root Variables       */
/* ============================ */
:root {
  --primary-color: #11243e;
  --accent-color: #f3b229;
  --text-color: #ffffff;
  --bg-color: #f5f5f5; /* This is mostly overridden by body background or section colors */
  --hamburger-bar-color: var(--text-color);
}

/* ============================ */
/* CSS Reset            */
/* ============================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden; /* Prevent sideways scrolling */
}

/* Optional: Remove weird spacing on Chrome */
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

/* ============================ */
/* General Styles       */
/* ============================ */
body {
  font-family: 'Montserrat', sans-serif;
  color: #333;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
  width: 80%;
  margin: 0 auto;
  max-width: 1200px;
}

.section {
  padding: 1.5rem 2rem;
  flex-grow: 1;
  /* Default background, will be overridden for specific sections to show body background */
  background-color:#e9eff5;
}

/* Sections that should show the body background */
/* Add the ID of your first section (conference title) here if it's not #header */
/* Assuming the first section in your HTML is the one with the main title */
section#header, /* The section in your HTML that has the main conference title */
#Information,
#organziations, /* (Typo? Should it be #organizations?) */
#committee,
#contact
{
    background-color:#e9eff5; /* Allows body background to show through */
}

/* For other sections not listed above, apply alternating colors */
.section:not(#header):not(#Information):not(#organziations):not(#committee):not(#contact):nth-child(even) {
  background-color: #e9eff5;
}
.section:not(#header):not(#Information):not(#organziations):not(#committee):not(#contact) {
  background-color:#e9eff5; /* Default for sections not showing body background */
}

#conference-title {
  text-align: center;
  font-family: 'Georgia', serif;
  font-size: 2.5rem;
  font-weight: bold;
  color: #b22222;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
}

.section h1, .section h2, .section h3, .section h4, .section h5 {
  color: var(--primary-color);
  margin-bottom: 1rem;
  text-align: center;
}

.section h1 { font-size: 2.2rem; } /* For the main title section like section#header */
.section h2 { font-size: 2.2rem; } /* For section titles like "Organizing Committee" */
.section h3 { font-size: 1.3rem; }
.section h4, .section h5 {
  font-size: 1.2rem;
  text-align: left;
  font-weight: normal;
}

/* Container within sections - provides the content background */
.section .container {
  background-color: rgba(255, 255, 255, 0.95);
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}


/* ============================ */
/* Header (Nav Bar)   */
/* ============================ */
header {
  background-color: var(--primary-color);
  padding: 1rem 0;
  color: var(--text-color);
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
}

.header-container { /* This is the .container inside <header> */
  display: flex;
  /* flex-direction: column; Will be changed to row in media queries */
  align-items: center;
  width: 100%; /* Ensure it uses the full width of the header padding box */
  /* Remove background-color, padding, border-radius, box-shadow if it's inheriting from .section .container */
  background-color: transparent;
  padding: 0; /* Reset padding specific to header's container */
  border-radius: 0;
  box-shadow: none;
}

.logo-link {
  display: flex;
  align-items: center;
  margin: 0 1rem 0 0; /* Adjusted margin for better balance */
  flex-shrink: 0; /* Prevent logo from shrinking too much */
}

.logo {
  height: 60px;
  vertical-align: middle;
}

/* ============================ */
/* Nav               */
/* ============================ */
nav#main-nav { /* Be more specific for the main navigation */
    flex-grow: 1; /* Allow nav to take remaining space */
    display: flex;
    justify-content: center; /* Center nav items on desktop */
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  /* min-width: 100px; */ /* Likely not needed */
}

nav ul li {
  margin: 0.5rem 1rem;
}

nav ul li a {
  text-decoration: none;
  color: var(--text-color);
  font-weight: 600;
  transition: color 0.3s;
}

nav ul li a:hover {
  color: var(--accent-color);
}

/* HAMBURGER BASE STYLE */
.hamburger {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px;
  position: absolute; /* This might be an issue if .header-container isn't position:relative */
  top: 50%; /* Adjust to vertically center with logo */
  transform: translateY(-50%);
  right: 1rem;
  z-index: 101;
}

/* ... (rest of hamburger styles are good) ... */
.hamburger-box {
  width: 30px;
  height: 20px;
  position: relative;
  display: inline-block;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  background-color: var(--hamburger-bar-color, #ffffff);
  position: absolute;
  width: 30px;
  height: 3px;
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
}

.hamburger-inner {
  top: 50%;
  transform: translateY(-50%);
}

.hamburger-inner::before,
.hamburger-inner::after {
  content: "";
  left: 0;
}

.hamburger-inner::before {
  top: -10px; /* More spacing for the bars */
}

.hamburger-inner::after {
  top: 10px;  /* More spacing for the bars */
}

/* ANIMATION TO X */
.hamburger.is-active .hamburger-inner {
  transform: translateY(-50%) rotate(45deg); /* Adjust rotation center */
}

.hamburger.is-active .hamburger-inner::before {
  top: 0;
  transform: rotate(90deg);
}

.hamburger.is-active .hamburger-inner::after {
  top: 0;
  transform: rotate(90deg);
}

/* ============================ */
/* Committee Table       */
/* ============================ */
#committee .container { text-align: center; }

#committee table { /* Renamed to #committee-table in HTML, update selector or HTML */
  width: 80%;
  margin: 1em auto;
  border-collapse: collapse;
  max-width: 1000px;
}

#committee-table th, #committee-table td { 
  padding: 0.75em;
  border: 1px solid #ddd;
  text-align: left; /* Default for most cells */
  margin: 0;
}

#committee th[colspan="2"] {
  text-align: center;
  background-color: #f0f0f0;
  font-weight: bold;
}

#committee-table td[colspan="2"] { /* Targets the content cells for Scientific Secretary & Members */
  text-align: center; /* Center the text within these cells for desktop view */
}

/* Hide ::before label for desktop colspan cells */
#committee td[colspan="2"]::before {
  content: none;
}


#committee-table,
#advisory-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em auto;
  max-width: 900px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  border: 1px solid #ddd;
}

#committee-table th, #committee-table td,
#advisory-table th, #advisory-table td {
  padding: 12px 15px;
  border: 1px solid #ddd;
  text-align: center;
  vertical-align: top;
  font-size: 1rem;
}

#committee-table th,
#advisory-table th {
  background-color: #f0f0f0;
  color: #11243e;
  text-align: center;
  font-weight: 600;
}

/* ============================ */
/* Organization Block    */
/* ============================ */
/* ... (Your organization block styles seem okay, review if issues persist) ... */
.organization-section {
  text-align: center;
  /* margin:2rem auto; */
  padding: 0rem;
  max-width: 900px;

}


.organization-unit {
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  background-color: rgba(255, 255, 255, 0.85);
  padding: 1rem;
 }

.support-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding-bottom: 1rem; 
  /* flex-direction: row; */
}


.support-logos {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.support-logos img {
  max-height: 85px;
  max-width: 220px;
  object-fit: contain;
  transition: transform 0.5s ease;
}

.support-logos img:hover {
  transform: scale(1.10);
}



.organization-text {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
  position: relative;
  display: block;
  text-align: center;
  padding-left: 1rem;
}

.organization-text::after {
  content: "";
  display: block;
  width: 200px;
  height: 3px;
/*   background-color: #b22222; /* Red underline */ */
  margin: 0.4rem auto 1rem;
  border-radius: 2px;
}

/*.organization-logo {
  max-height: 200px;
  max-width: 220px;
  margin: 2rem auto 0;
  display: block;
  vertical-align: middle;
  object-fit: contain;
}*/

#intro {
background-image: url("images/background.png");
background-repeat: no-repeat;
background-size: auto; /* or 'contain' if you want it fully visible */
background-position: -100px top;
background-attachment: scroll;
}
/* ============================ */
/* MAPS (from previous) */
/* ============================ */
.map-container {
  margin: 2rem 0;
  text-align: center;
  position: relative;
}

.map-container iframe {
  border: 1px solid #ddd;
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.map-container .map-link-mobile {
  display: none;
  margin: 1rem 0;
  font-weight: 600;
}

.map-container .map-link-mobile a {
  color: var(--primary-color);
  text-decoration: underline;
}

/* ============================ */
/* Footer              */
/* ============================ */
footer {
  background-color: var(--primary-color);
  color: var(--text-color);
  text-align: center;
  padding: 2rem 1rem;
  margin-top: auto; /* keep footer at the bottom */
}


/* ============================================================== */
/* IMPORTANT DATES WITH PARTICIPATION FEES TABLE/ CODE TO HIDE THE NOTES WITH DATES BELOW   */
/* ============================================================== */
.registration-notes-mobile {
  display: none; /* Hidden by default on larger screens */
}

/* ============================================================== */
/* SHOW THE VENUE COVER PICTURE IN THE FULL MODE   */
/* ============================================================== */


.cover-image {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
  height: auto;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  background-color: #fff;
  margin: 0 0 2rem 0;
  /* padding:1rem; */
  /* padding-top: 0.5rem; */
  /* box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); */
}


/* ============================================================== */
/* Media Queries (MERGED AND REFINED)                     */
/* ============================================================== */
@media (max-width: 810px) {

   /* HIDE VENUE COVER PICTURE */
   #cover-section {
    display: none !important; /* Hide this section on mobile screens */
  }

  /* --- Header and Nav for Mobile --- */
  .header-container { /* This is the .container inside <header> */
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative; /* For absolute positioning of hamburger and nav */
  }

  .logo { height: 40px; margin-right: 0; } /* Removed margin-right as .logo-link handles spacing */
  .logo-link { margin: 0; padding: 0 0.5rem; } /* Simplified margin/padding */

  .hamburger {
    display: inline-block; /* Show hamburger */
    /* top: 50%; transform: translateY(-50%); /* Already set in base, confirm it works */
  }

  nav#main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: rgba(17, 36, 62, 0.98);
    padding: 1rem 0;
    z-index: 100;
    border-top: 1px solid var(--accent-color);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }

  nav#main-nav.is-active { display: block; }
  nav ul { flex-direction: column; align-items: center; }
  nav ul li { margin: 0.8rem 0; }
  nav ul li a { font-size: 1.1rem; }

/* --- Committee Tables Responsive Styles for Mobile --- */
/* 1. Ensure all relevant table parts behave as blocks and take full width on mobile */
#committee-table, #advisory-table,
#committee-table thead, #advisory-table thead,
#committee-table tbody, #advisory-table tbody,
#committee-table tr, #advisory-table tr,
#committee-table th, #advisory-table th,
#committee-table td, #advisory-table td {
  display: block;
  width: 100%;
  text-align: left; /* Default text alignment for most cells */
}

/* 2. Hide the original table header and any th elements within the tbody on mobile */
#committee-table thead, #advisory-table thead {
  display: none; /* Hides the entire desktop table header */
}
#committee-table tbody th, #advisory-table tbody th {
  display: none; /* Hides specific th elements like "Scientific Secretary" or "Members" headers */
}

/* 3. Style individual table rows (tr) to look like distinct "cards" */
#committee-table tr, #advisory-table tr {
  border: 1px solid #ccc; /* Border around the entire card (person's entry) */
  background-color: #fff; /* Background for each card */
  border-radius: 0; /* Removed rounded corners from individual cards */
  overflow: hidden; /* Ensures content and borders are clipped correctly */
}

/* 4. Style table data cells (td) for mobile view - MODIFIED FOR REGULAR MEMBERS */
/* This now applies to all TDs that are NOT colspan (i.e., regular members' Name/Institution) */
#committee-table td:not([colspan]), #advisory-table td:not([colspan]) {
  border: none;
  padding: 0.25em 0.75em;
  /* word-wrap: break-word; */
  /* overflow-wrap: break-word; */
  /* NEW: Changed for stacking and centering labels above content */
  display: flex;
  flex-direction: column; /* Stack children vertically */
  align-items: center; /* Center children horizontally */
  text-align: center; /* Fallback for any inline content not directly flex-centered */
}

/* Labels for regular committee members (Name and Institution) - MODIFIED SELECTORS */
/* These selectors now target TDs with data-label="Name" or data-label="Institution" */
#committee-table tr td[data-label="Name:"]::before,
#advisory-table tr td[data-label="Name:"]::before,
#committee-table tr td[data-label="Institution:"]::before, /* NEW data-label for Institution */
#advisory-table tr td[data-label="Institution:"]::before {
  content: attr(data-label); /* Use data-label for content (e.g., "Name", "Institution") */
  display: block; /* Make it appear above the content */
  font-weight: bold;
  font-size: 0.9em; /* Match Chair/Vice-Chair/Scientific Secretary label size */
  color: var(--primary-color);
  /* margin-bottom: 0.6em; Add space below label */
  text-align: center; /* Center the label text itself */
  padding: 0;
}

/* 5. Specific styling for cells that span multiple columns (e.g., Scientific Secretary) */
#committee-table td[colspan="2"], #advisory-table td[colspan="2"] {
  display: flex; /* Make it a flex container */
  flex-direction: column; /* Stack children vertically */
  align-items: center; /* Center children horizontally within the cell */
  padding: 0.25em 0.75em;
  border-bottom: none;
  /* word-wrap: break-word; */
  overflow-wrap: break-word;
}

/* Label for Scientific Secretary from data-label */
#committee-table td[data-label="Scientific Secretary:"]::before,
#advisory-table td[data-label="Scientific Secretary:"]::before {
  content: attr(data-label);
  display: block;
  font-weight: bold;
  font-size: 0.87em;
  color: var(--primary-color);
  /* margin-bottom: 0.6em; */
  text-align: center;
  padding: 0;
}

/* 6. Specific styling for Chair/Vice-Chair cells and their labels */
#committee-table tbody tr:first-child td[data-label="Chair"], #advisory-table tbody tr:first-child td[data-label="Chair"],
#committee-table tbody tr:first-child td[data-label="Vice-Chair"], #advisory-table tbody tr:first-child td[data-label="Vice-Chair"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* padding: 1em; */
  border-bottom: none;
}
/* Styles for the Chair/Vice-Chair ::before labels */
#committee-table tbody tr:first-child td[data-label="Chair"]::before, #advisory-table tbody tr:first-child td[data-label="Chair"]::before,
#committee-table tbody tr:first-child td[data-label="Vice-Chair"]::before, #advisory-table tbody tr:first-child td[data-label="Vice-Chair"]::before {
  content: attr(data-label);
  display: block;
  position: static;
  width: auto;
  font-weight: bold;
  font-size: 1.15em;
  color: var(--primary-color);
  /* margin-bottom: 0.6em; */
  text-align: center;
  padding: 0;
}

/* 7. Overall table container styling */
#committee-table, #advisory-table {
  margin: 1em auto;
  background-color: #fff;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid #ddd;
}

  /* --- Map Container Responsive Styles for Mobile --- */
  .map-container iframe {
    display: none;
  }
  .map-container .map-link-mobile {
    display: block;
  }
  /* --- Organization Logos Responsive for Mobile --- */
  .organization-support { /* If you have this class */
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .organization-logo { /* General adjustment for logos on mobile */
    max-width: 80%;
  }

  .important-dates-table th,
  .important-dates-table td {
    padding: 8px 10px;
  }

  .support-logos{
    width: 60%;
    margin: 0 auto;
  }

  #conference-title {
    font-size: 1.5rem;
  }

} /* End of @media (max-width: 810px) */

/* Desktop Styles (Overrides/Resets from Mobile if necessary) */
@media (min-width: 811px) {
  .header-container {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start; /* Align items to the start */
  }
  /* Remove if nav#main-nav already handles this or ensure logo and nav are spaced well */
  /* header h1 {
    margin-right: 0;
    text-align: center;
    margin-bottom: 1rem;
  } */
  nav#main-nav { /* Ensure nav is visible and styled for desktop */
      display: flex !important; /* Override inline style from JS if hamburger was active */
      position: static;
      width: auto;
      background-color: transparent;
      padding: 0;
      border-top: none;
      box-shadow: none;
  }
  nav ul {
      flex-direction: row;
  }
}

/* Styles from style.css specific to topics.html and other pages */
.numbered-list {
  list-style-type: none;
  padding-left: 0;
  counter-reset: beautiful-counter;
}

.numbered-list > li > h3 {
  margin-bottom: 0.75em;
  padding-left: 2em;
  position: relative;
  text-align: left;
}

.numbered-list > li > h3::before {
  content: counter(beautiful-counter);
  counter-increment: beautiful-counter;
  position: absolute;
  right: 20;
  left:0;
  top: 0;
  background-color: var(--primary-color);
  color: var(--text-color);
  font-weight: bold;
  width: 1.5em;
  height: 1.5em;
  border-radius: 20%;
  text-align: center;
  line-height: 1.5em;
  margin-right: 0.3em;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.numbered-list {
  list-style-type: none;
  padding-left: 0;
  counter-reset: beautiful-counter;
  width: fit-content;     /* shrink to content */
  margin: 0 auto;         /* center the block */
}

.numbered-list > li > ul > li {
  text-align: left;
  margin-bottom: 0.25em;
}

/* Important Dates Table - From style.css */
.important-dates-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  border: 1px solid #e0e0e0;
}

.important-dates-table th,
.important-dates-table td {
  padding: 10px 15px;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
}

.important-dates-table th {
  background-color: #f0f0f0;
  font-weight: bold;
}

.important-dates-table tr:last-child td {
  border-bottom: none;
}

@media (max-width: 480px) {

  .logo { height: 35px; }
  .hamburger { right: 0.5rem; }
  
  .section { padding: 2rem 1rem; }
  .container { width: 95%; }

  #committee td { padding-left: 40%; } /* More space for content if labels are short */
  #committee td::before { width: 35%; }

  .organization-logo { max-width: 100%; }

  .important-dates-table thead {
    display: none; /* Hides the original desktop header */
  }

  .important-dates-table tr {
    display: block;
    margin-bottom: 15px; /* Spacing between each "row card" */
    /* border: 1px solid #e0e0e0; Frames the entire row as a cohesive card */
    /* border-radius: 8px; */
    overflow: hidden; /* Ensures borders and content respect border-radius */
    background-color: #fff; /* Ensure a background if the section is transparent */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Subtle shadow for depth */
  }

  .important-dates-table td {
    display: flex; /* Makes the td a flex container for better vertical alignment of content */
    align-items: center; /* Vertically centers the text content within the td */
    text-align: right; /* Aligns the actual data (e.g., "450 EUR") to the right */
    padding-left: 150px; /* Provides space for the absolute label on the left */
    position: relative;
    border-bottom: 1px solid #eee; /* Light separator line between each stacked cell */
    min-height: 50px; /* Ensures ample vertical space for labels, especially if they wrap */
    box-sizing: border-box; /* Includes padding in the element's total width/height */
    padding-top: 8px; /* Consistent vertical padding */
    padding-bottom: 8px; /* Consistent vertical padding */
  }

  /* Removes the border-bottom from the last cell within each stacked row */
  .important-dates-table tr td:last-child {
    border-bottom: none;
  }

  .important-dates-table td:before {
    content: attr(data-label);
    position: absolute;
    left: 10px; /* Positions the label 10px from the left edge of the td */
    top: 50%; /* Vertically centers the label */
    transform: translateY(-50%); /* Adjusts position for true vertical centering */
    width: 130px; /* Fixed width for the label area */
    padding-right: 10px; /* Small gap between the label and the main content */
    text-align: left; /* Ensures the label text itself is left-aligned within its width */
    font-weight: bold;
    color: var(--primary-color);
    white-space: normal; /* Allows the label text to wrap to the next line */
    overflow-wrap: break-word; /* Ensures long words break within the label's width */
    line-height: 1.2; /* Adjusts line-height for wrapped labels for better readability */
  }

   
  /* Show and style the registration notes for mobile */
  .registration-notes-mobile {
    display: block; /* Make it visible on mobile */
    margin-top: 20px; /* Space above the notes */
    padding: 10px 0;
    text-align: left; /* Align text to the left */
    font-size: 0.95rem; /* Slightly smaller font for notes */
    color: #555; /* A softer color for notes */
  }

  .registration-notes-mobile p {
    margin-bottom: 5px; /* Space between each note */
    line-height: 1.4;
  }

  .registration-notes-mobile p span {
    font-weight: bold;
    color: var(--primary-color);
  }

}

/* Abstract Template Box - From style.css */
.abstract-template-box {
  background-color: #f7f7f7;
  border: 2px solid #ddd;
  padding: 20px;
  border-radius: 10px;
  margin-top: 20px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.abstract-template-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.abstract-template-box a {
  font-size: 1.2rem;
  font-weight: 600;
  color:  #990000;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.abstract-template-box a:hover {
  color:#cc0000;
  text-decoration: underline;
}

/* Conference Description and H4 styles - From style.css */
h4, .conference-description {
  text-align: justify;
  line-height: 1.7;
  font-family: 'Open Sans', sans-serif;
  color: #444;
  font-size: 1.1rem;
  font-weight: 400;
  text-shadow: 0.2px 0.2px 0.5px rgba(0, 0, 0, 0.03);
  margin-bottom: 1.5rem;
}

h4 b, .conference-description b {
  font-weight: 600;
  color: #222;
}

h4 p, .conference-description p {
  margin-bottom: 1em;
  text-indent: 1em;
}

/* Background Image Properties on #Information section - From style.css */
/* #Information { */
/*   background-image: url("images/background.png"); */
/*   background-repeat: no-repeat; */
/*   background-size: 500px auto; */
/*   background-position: left center, right center ; */
/*   background-attachment: absolute; */
/* } */

/* Flex Container for general layout (if used) - From style.css */
.flex-container {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.column {
  flex: 1;
  min-width: 300px;
}

.column ul {
  padding-left: 20px;
}

/* ===================== IMAGE GALLERIES ===================== */

.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.image-gallery img {
  width: 100%;
  height: 260px;
  object-fit: cover;

  border-radius: 14px;
  border: 1px solid #ddd;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);

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

.image-gallery img:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

@media (max-width: 768px) {
  .image-gallery {
    flex-wrap: wrap;
  }

  .image-gallery img {
    width: 100%;
  }
}


%%%%%
.contact-section {
  background: linear-gradient(135deg, #f9f9f9, #e9f0ff);
  padding: 4rem 1rem;
  text-align: center;
  border-top: 2px solid #b22222;
}

.contact-container {
  max-width: 800px;
  margin: 0 auto;
}

.contact-heading {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  position: relative;
}

.contact-heading::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
/*   background-color: #b22222; */
  margin: 0.8rem auto 1.5rem;
  border-radius: 2px;
}

.image-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
}

.image-gallery img {
  width: 40%;
  height: 250px; /* or any fixed height you want */
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .image-gallery {
    flex-wrap: wrap;
  }

  .image-gallery img {
    width: 100%;
  }
}
.contact-text {
  font-size: 1.2rem;
  color: #333;
  text-align: center;
}

.contact-email {
  font-weight: bold;
  color: #b22222;
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-email:hover {
  color: #8b1a1a;
  text-decoration: underline;
}

.travel-information {
    margin-bottom: 2em;
}

/*PROGRAMME STYLE */

.program-section .container {
  margin-left: 6rem;   /* shifts the whole thing to the right */
  /* or: padding-left: 2rem; */
}

.program-header {
  border: 2px solid #b22222;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  margin-bottom: 2rem;
}
.program-header h1 {
  color: #b22222;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.program-header h2 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}
.program-header p {
  color: #555;
  font-size: 1rem;
}

.day-box {
  margin-bottom: 2rem;
}
.day-box h3 {
  color: #b22222;
  text-decoration: underline;
  margin-bottom: 0.5rem;
}
.program-list {
  list-style: none;
  padding: 0;
}
.program-list li {
  margin: 0.3rem 0;
}
.session-box {
  border: 1px solid #b22222;
  border-radius: 6px;
  padding: 1rem;
  margin: 1rem 0;
}
.session-box h4 {
  color: #b22222;
  margin-bottom: 0.5rem;
}
table.talks {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}

table.talks td {
  padding: 0.3rem 0.6rem;
  vertical-align: top;
}

table.talks td.time {
  width: 80px;           /* narrower so it hugs the text */
/*  font-weight: bold;*/
  text-align: right;     /* align the numbers to the right edge */
  white-space: nowrap;   /* prevent times like '09:00' from breaking */
}

table.talks td:nth-child(2) {
  text-align: left;      /* makes sure name+institution start right after the time */
}


.blink {
  font-weight: bold;
  color: #000000; /* bright red */
  animation: blink 1.8s step-start infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* ============================ */
/* Countdown Timer Section */
/* ============================ */
/* Remove the white "card" background just for the countdown section */
#countdown-section .container {
  background: none;
  box-shadow: none;
  border: none;
  padding: 0; /* optional — removes inner spacing */
}


#countdown {
display: flex;
justify-content: center;
align-items: center;
gap: 1.5rem;
margin-top: 1rem;
}

#countdown .time-box {
background-color: var(--primary-color);
color: var(--text-color);
border-radius: 10px;
padding: 1rem 1.2rem;
min-width: 80px;
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

#countdown .time-box span {
font-size: 2.5rem;
font-weight: 700;
display: block;
}

#countdown .time-box small {
font-size: 0.9rem;
color: var(--accent-color);
text-transform: uppercase;
letter-spacing: 1px;
}

#countdown-message {
font-size: 1.2rem;
color: var(--primary-color);
font-weight: bold;
margin-top: 1rem;
}

@media (max-width: 600px) {
  #countdown {
  flex-wrap: wrap;
  gap: 1rem;
  }
  #countdown .time-box {
  min-width: 70px;
  padding: 0.8rem;
  }
  #countdown .time-box span {
  font-size: 2rem;
  }
}

/* Countdown: fluid sizing + safer box layout */
#countdown {
  gap: clamp(0.6rem, 2vw, 1.5rem);
}

#countdown .time-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* allow box width to breathe but never be too small/big */
  min-width: clamp(72px, 18vw, 120px);
  padding: clamp(0.6rem, 2vw, 1rem);
  overflow: hidden;          /* prevents text overflow artifacts */
}

#countdown .time-box span {
  font-variant-numeric: tabular-nums; /* monospace numerals to avoid jitter */
  line-height: 1;
  /* Fluid number size: min/max bounds with viewport-based middle */
  font-size: clamp(1.6rem, 6vw, 2.5rem);
}

#countdown .time-box small {
  /* Fluid label size too */
  font-size: clamp(0.7rem, 1.8vw, 0.9rem);
  letter-spacing: 0.06em;
}