/* =============================
   ESA Indico – Banner & Buttons with Orange Accents
   - Banner scaled to 68%
   - Adds small gap between banner and title
   - Subbanner centered and styled
   ============================= */

:root {
  --esa-blue: #061F2B;
  --esa-orange: #ff8c00;
  --esa-orange-dark: #e67e00;
  --original-bg: #f5faff;
}

/* ---- Header ---- */
.confTitleBox {
  display: block;
  background: #061F2B;
  border-top: 4px solid var(--esa-orange);
  border-bottom: 2px solid var(--esa-orange);
  padding: 5;
}

/* Banner scaling */
.confLogoBannerBox img {
  width: 70%;
  height: auto;
  display: block;
  margin: 10px; /* center the banner */
  margin-left: 2px;
  margin-bottom: 20px;
  border-radius: 4px;
}

/* Title with breathing space */
.conference-title-link {
  display: block;
  font-size: 22pt;
  color: white;
  margin-top: 8px; /* more space between banner and title */
  margin-bottom: 8px;
  text-align: left;
}

/* ---- Subbanner (subtitle box) centered ---- */
.confSubTitleBox {
  background: var(--original-bg);
  border-top: 2px solid var(--esa-orange);
  border-bottom: 2px solid var(--esa-orange);
  padding: 1rem 0; /* more padding for elegance */
  text-align: left; /* center text */
}

.confSubTitleContent {
  color: var(--esa-blue);
  font-size: 14pt;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* ---- Buttons ESA branding ---- */
.btn,
.support_box > h3 {
  background-color: var(--esa-orange);
  color: #fff;
  border-radius: 4px;
  padding: 8px 16px;
  border: none;
}

.btn:hover {
  background-color: var(--esa-orange-dark);
}

/* ---- Links and accents ---- */
a {
  color: var(--esa-orange);
}

hr {
  border: none;
  border-top: 2px solid var(--esa-orange);
}