.navbar-fixed {
  position: absolute;
  z-index:999999999;
}

.nav {
  box-shadow:none;
  background-color: #204282;
}

/* Navigation responsive adjustments */
@media only screen and (max-width: 1300px) and (min-width: 993px) {
  nav ul li a {
    font-size: 13px !important;
    padding: 0 8px !important;
  }
}

@media only screen and (max-width: 1100px) and (min-width: 993px) {
  nav ul li a {
    font-size: 12px !important;
    padding: 0 6px !important;
  }
}

.banner{
  max-width:100%;
  height: 500px;
  margin: auto;
  overflow: auto;
  background-image: url("../img/johannes-plenio-J9oL7OBGSns-unsplash.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  /*position: relative;*/
  top: 0;
  left: 0;
}

#logos{
  position: relative; 
  bottom: 0;
  left: 0%; 
  width: 100%;
}

@media only screen and (min-width: 1400px) {
  #logos {
    left: 20%;
    width: 60%;
  }
}

#logos-cont{
  position: absolute;
  bottom: -5px;
  width: 100%;
  text-align: center;
}



#main-title{
  padding:10px;
  font-size: 15px;
  font-weight: bold;
  color: black;
  background-color: #B89E8F;
}

#secondary-title{
  padding:10px;
  background-color: #204282;
  word-break: break-word;
}

#secondary-title-text{
  color:#ffffff;
  font-size:12px;
  line-height: normal;
  word-break: break-word;
  white-space: normal;
}

#third-title {
  padding: 10px;
  background-color: #19305c;
  word-break: break-word;
}

#third-title-text {
  color: #fff;               /* 白色字体 */
  font-size: 12px;           /* 稍大一点更醒目 */
  line-height: normal;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  font-weight: bold;         /* 加粗 */
  letter-spacing: 0.5px;     /* 稍微拉开字距，提升可读性 */
}


.banner-heading{
  text-align:center;
  font-weight:bold;
  color:#ebf0f4;
}

.banner-subheading{
  text-align:center;
  font-weight:bold;
  color: #ebf0f4;
}

.sponsor-row{
  background-color: #204282;
  font-size: 25px;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  color:white;
}

.sponsor-row a{
  /*color: #204282;*/
}

.section-gray-section{
  background-color: #ebeef2;
}

.section-gray-header{
  color: black;
  font-weight: bold;
}

.section-gray-body{
  color: black;
  font-size:17px;
}

.section-white-section{
  background-color:#ffffff;
}

.section-white-header{
  color: black;
  font-weight: bold;
}

.section-white-body{
  color: black;
  font-size:17px;
}

.card-title {
  white-space: normal;       /* let it wrap */
  word-break: break-word;    /* break long words */
  overflow-wrap: anywhere;   /* modern safe fallback */
}

@media only screen and (max-width: 600px) {
  .card-title {
    white-space: normal;
    font-size: 1.15em;
    word-break: break-word;
    line-height: 1.15;
  }
}

#footer{
  margin-top:0px;
  padding-top:0px;
}

.carousel .carousel-item {
  width:320px !important;
}

.google-maps {
  position: relative;
  padding-bottom: 75%;
  height: 0;
  overflow: hidden;
}

.google-maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

.schedule tbody td {
  width: 80%;
}

.schedule tbody th {
  color: #a9b2b9;
  /*padding-top: 40px;  */
  font-size: 14px;
  /*font-weight: 400;*/
  /*text-transform: uppercase;*/
  /*vertical-align: top;*/
  width: 20%;
  text-align: right;
  padding-right: 45px;
}

.papers {

}

.papers tbody th {
  color: #a9b2b9;
  /*padding-top: 40px;  */
  font-size: 14px;
  /*font-weight: 400;*/
  /*text-transform: uppercase;*/
  /*vertical-align: top;*/
  width: 20%;
  text-align: right;
  padding-right: 45px;
}

.papers tbody td {
  width: 80%;
}

.posters tbody td {
  width: 80%;
  padding-right: 15px;
  padding-left: 15px;
}

.center-images {
    display: flex;
    justify-content: center;
    align-items: center;
}
.qr-code {
    width: 200px; 
    height: auto; 
}
.responsive-img {
    max-height: 100px;
    max-width: 100%;
    display: block;
    margin: 0 auto; 
  }

/* White container box for logos */
.center-images {
    background-color: white !important;
    padding: clamp(0px, 6vw, 2px) clamp(5px, 4vw, 10px) !important;
    margin: 15px auto;
    width: clamp(200px, 60vw, 800px);
    overflow: hidden;
    box-sizing: border-box;
}

.organizers-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: nowrap;
    width: clamp(200px, 60vw, 800px);
    margin: 0 auto;
}

.organizer-logo {
    height: clamp(55px, 10vh, 110px);
    /* width: calc((100% - 20px) / 3); */
    max-width: 250px;
    object-fit: contain;
    flex-shrink: 1;
    flex-grow: 0;
}

.vertical-separator {
    width: 3px;
    height: clamp(55px, 10vw, 95px);
    background-color: #ccc;
    margin: 0 5px;
    flex-shrink: 0;
}

/* Mobile responsive: keep logos in one row but smaller */
@media (max-width: 1090px) {
    .organizers-container {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 0 10px;
    }
    .vertical-separator {
        width: 3px;
        height: 60px;
        margin: 0 5px;
    }
    .organizer-logo {
        height: 65px;
        max-width: 160px;
        flex-shrink: 1;
    }
}

@media (max-width: 790px) {
    .organizers-container {
        gap: 5px;
        padding: 0 5px;
    }
    .vertical-separator {
        width: 3px;
        height: 55px;
        margin: 0 3px;
    }
    .organizer-logo {
        height: 55px;
        max-width: 120px;
        flex-shrink: 1;
    }
}

@media (max-width: 590px) {
    .organizers-container {
        gap: 5px;
        padding: 0 5px;
    }
    .vertical-separator {
        width: 2px;
        height: 55px;
        margin: 0 3px;
    }
    .organizer-logo {
        height: 35px;
        max-width: 90px;
        flex-shrink: 1;
    }
}

@media (max-width: 450px) {
    .center-images {
        background-color: white;
        padding: 0;                /* remove inner gap */
        margin: 0;                 /* remove outer gap */
        width: 100%;               /* full width */
        box-sizing: border-box;    /* consistent sizing */
    }
    .organizers-container {
        display: flex;  
        flex-wrap: wrap;
        /* justify-content: space-between; */
        width: 100%; 
    }

    .organizer-logo {
        width:50%;
        height: auto;   /* maintain aspect ratio */
    }

    .half-width-logo {
        flex: 0 0 48%; /* default size for half-width containers */
        margin-bottom: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 80px; /* Set minimum height for the containers */
    }

    /* Make HKBU logo container larger */
    .half-width-logo:first-child {
        flex: 0 0 60%; /* HKBU container takes more space */
    }

    /* Make second logo container smaller */
    .half-width-logo:nth-child(3) {
        flex: 0 0 36%; /* Sponsor 4 container takes less space */
    }

    .half-width-logo .organizer-logo {
        width: 90%;                /* logo takes most of container width */
        height: auto;
        display: block;
    }

    /* Make HKBU logo take full width of its container */
    .half-width-logo:first-child .organizer-logo {
        width: 100% !important;    /* Take full width of the half-width container */
        height: auto !important;   /* Maintain aspect ratio */
        max-width: none !important; /* Remove any max-width constraints */
    }

    /* last row logo full-width and centered */
    .full-width-logo {
        flex-basis: 100%;
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }

    .full-width-logo .organizer-logo {
        width: auto; /* keeps proportion, or use width: 60% if you want it larger */
        max-width: 55%;
    }

    /* hide separators on small screens */
    .vertical-separator {
        display: none;
    }
}

  /* 添加空白间距元素 */
  .spacer {
    height: 15px; /* 控制空白高度 */
  }
  
  /* 其他样式保持不变 */
  .speakers-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
  }
  
  .speaker-card {
    flex: 0 0 240px;
    max-width: 240px;
    margin-bottom: 20px;
  }
  
  .avatar-container {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #e0e0e0;
    background: #f5f5f5;
    margin-bottom: 30px; / 增加下边距 /

  }
  
  .speaker-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  
  .card.hoverable:hover .speaker-avatar {
    transform: scale(1.05);
  }
  
  .card-title {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    display: block;
    padding: 0 10px;
  }
  
  /* 响应式调整 */
  @media (max-width: 1200px) {
    .speaker-card {
      flex: 0 0 calc(33.333% - 25px);
      max-width: calc(33.333% - 25px);
    }
  }
  
  @media (max-width: 800px) {
    .speaker-card {
      flex: 0 0 calc(50% - 25px);
      max-width: calc(50% - 25px);
    }
  }
  
  @media (max-width: 600px) {
    .speaker-card {
      flex: 0 0 100%;
      max-width: 280px;
    }
  }

/* Hotel card equal height fix */
.hotel-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.hotel-card .card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hotel-links {
  margin-top: auto;
  padding-top: 10px;
}

/* Ensure consistent hotel card layout */
@media (min-width: 601px) {
  .hotel-card {
    min-height: 300px;
  }
}

/* Mobile responsive styles for banner heading and subheading */
@media (max-width: 767px) {
  .banner {
    height: 400px;
    background-position: center center;
  }
  
  .banner-heading {
    font-size: 20px !important;
    line-height: 1.3;
    margin-bottom: 10px;
  }
  
  .banner-subheading {
    font-size: 16px !important;
    line-height: 1.3;
    margin-bottom: 5px;
  }
}

@media (max-width: 480px) {
  .banner {
    height: 350px;
    background-position: center 30%;
    background-size: cover;
  }
  
  .banner-heading {
    font-size: 22px !important;
    line-height: 1.2;
    padding: 0 10px;
  }
  
  .banner-subheading {
    font-size: 16px !important;
    line-height: 1.2;
    padding: 0 10px;
    margin-bottom: 3px;
  }
}