html, body {
   height: 100%;
   margin: 0;
   padding: 0;
   background: #2b281f;
   justify-content: center;
}

div.static {
  position: static;
}

/* Centered gallery layout + hover border */
.gallery {
  display: flex;
  justify-content: center;
  background: #2b281f;
}

.gallery:hover {
  border: 1px solid #777;
}

.gallery img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

div.desc {
  padding: 15px;
  text-align: center;
}

.fit {
  max-width: 99%;
  max-height: 99%;
}

.hr {
  border-top: 20px solid #666;
}

.hr1 {
  display: flex;
  justify-content: top;
  border-top: 10px solid #666;
}

/* ===== HEADER SECTION ===== */
#banner {
  width: 100%;
  background: linear-gradient(to bottom, #2b281f 0%, #1f1c14 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #3a3225;
}

/* === BACK LINK (TOP LEFT) === */
.back-top {
  position: absolute;
  top: 20px;
  left: 30px;
}

.back-top a {
  color: #b6b3aa;
  text-decoration: none;
  font-size: 16px;
  font-family: Tahoma, Geneva, sans-serif;
  transition: color 0.3s ease;
}

.back-top a:hover {
  color: #d8c27c; /* soft gold hover */
}

.header-content {
  text-align: center;
}

.title {
  color: #e6e1d0;
  font-size: 42px;
  font-family: Tahoma, Geneva, sans-serif;
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 2px solid #c4a24f;
  display: inline-block;
}

.subtitle {
  color: #b6b3aa;
  font-size: 18px;
  font-family: Tahoma, Geneva, sans-serif;
  margin-top: 10px;
}

/* === CENTER ABOUT PAGE IMAGE === */
.about-image {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px 0 40px;
}

.about-image img {
  max-width: 700px;     /* keeps it nicely proportioned */
  width: 100%;
  height: auto;
  border: 1px solid #3a3225;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

#container1 {
  display: flex;
  justify-content: center;
  background: #2b281f;
}

#container2 {
  display: flex;
  justify-content: center;
  background: #2b281f;
}

.player {
  display: flex;
  justify-content: center;
  background: #2b281f;
}

/* === ABOUT CG6 SECTION === */
.about-cg6 {
  max-width: 900px;
  margin: 0 auto 40px;
  padding: 0 20px;
  color: #e6e1d0;
  font-family: Tahoma, Geneva, sans-serif;
  line-height: 1.6;
}

.about-cg6 h2 {
  text-align: center;
  color: #e6e1d0;
  border-bottom: 2px solid #c4a24f;
  padding-bottom: 8px;
  margin-bottom: 25px;
}

.about-cg6 h3 {
  color: #d8c27c;
  margin-top: 30px;
  margin-bottom: 10px;
  font-size: 20px;
  text-align: left;
}

.about-cg6 p {
  margin-bottom: 16px;
  color: #ddd6c7;
}

.about-cg6 ol {
  margin: 0 0 20px 20px;
  color: #ccc;
}
.about-cg6 li strong {
  color: #e6e1d0;
}

.about-cg6 em {
  color: #d8c27c;
}

.footer {
color: #CCC;
  font-size: 18px;
  font-family: Tahoma, Geneva, sans-serif;
  padding-top: 10px;
  padding-bottom: 10px;
  height: 50px;
  text-align: center;
  background: #2b281f;
}

/* === EMAIL LINK COLOR FIX === */
a[href^="mailto"] {
  color: #b6b3aa;                 /* same as your text color */
  text-decoration: none;          /* remove underline */
  transition: color 0.3s ease;
}

a[href^="mailto"]:hover {
  color: #d8c27c;                 /* subtle warm gold hover */
  text-decoration: underline;     /* gentle cue on hover */
}

#security {
  float: center;
}

/* === MAIN CENTERING === */
body {
  background: #2b281f;
  color: #ccc;
  font-family: Tahoma, Geneva, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center; /* horizontally center everything */
  justify-content: flex-start;
  margin: 0;
  padding: 0;
}

/* Wrap all main content inside this */
.main-wrapper{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  max-width:900px;
  margin:0 auto;
  gap: 24px;            /* <-- adds space between video & each image */
}

/* Optional: subtle gold underline for the header */
.title {
  color: #ddd;
  font-size: 40px;
  text-align: center;
  border-bottom: 2px solid #c4a24f;
  padding-bottom: 10px;
  margin-bottom: 5px;
}

/* Email line under title */
.subtitle {
  color: #a9a9a9;
  font-size: 18px;
  margin-bottom: 30px;
  text-align: center;
}

/* match the same width as your main content */
.header-content{
  width:100%;
  max-width:900px;
  margin:0 auto;
  text-align:center;
}

.title{
  /* remove the <u> in HTML if you use this underline */
  margin:0;
  font: 700 42px Tahoma, Geneva, sans-serif;
  color:#e6e1d0;
  display:inline-block;
  position:relative;
  padding-bottom:8px;
}

.title::after{
  /* elegant gold underline */
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:#c4a24f;
  opacity:0.95;
}

.subtitle {
  margin: 10px 0 0;
  font: 400 18px Tahoma, Geneva, sans-serif;
  color: #b6b3aa;
  text-align: center;
}

/* === INLINE LOGO WITH TITLE === */
.title-line {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px; /* space between logo & title */
}

.logo-inline {
  width: 48px;    /* sweet spot for balance */
  height: auto;
  filter: drop-shadow(0 0 3px rgba(0,0,0,0.6));
}

/* base link style */
.subtitle a {
  color: #b6b3aa;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* hover effect */
.subtitle a:hover {
  color: #d8c27c; /* subtle warm gold on hover */
  text-decoration: underline;
}

/* keep the main column centered */
.main-wrapper{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  max-width:900px;
  margin:0 auto;
}

.player video{ max-width:100%; height:auto; }
.gallery{ display:flex; justify-content:center; background:#2b281f; }
.gallery img{ max-width:100%; height:auto; display:block; }

/* === CALL-TO-ACTION LINK === */
.cta {
  margin: 40px 0 20px;
  text-align: center;
}

.cta-button {
  display: inline-block;
  background: linear-gradient(to bottom, #3a3225, #2b281f);
  color: #e6e1d0;
  text-decoration: none;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 18px;
  padding: 10px 28px;
  border: 1px solid #c4a24f;
  border-radius: 3px;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.cta-button:hover {
  background: #c4a24f;
  color: #1b180f;
  box-shadow: 0 0 8px rgba(196, 162, 79, 0.6);
}

.help-list li {
  margin: 14px 0;         /* adds vertical breathing room between bullets */
  line-height: 1.7;        /* improves readability */
  color: #ddd6c7;
}

/* === GLOBAL LINK COLOR FIX === */
a {
  color: #b6b3aa;                /* neutral text color */
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #d8c27c;                /* soft gold on hover */
  text-decoration: underline;
}

/* optional: if you have visited link color showing purple */
a:visited {
  color: #b6b3aa;
}

.title sup {
  font-size: 60%;                /# trademark 
  vertical-align: super;
}


