/* ===== Full-screen background ===== */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

body {
  background-image: url('indexscreen.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.title-image {
  position: absolute;
  top: 40px;        /* adjust as needed */
  left: 50%;        /* center horizontally */
  transform: translateX(-50%);  /* perfect centering */
  width: 992px;     /* set to your title PNG width */
  height: 92px;    /* set to your title PNG height */
  background-image: url('title.png');
  background-size: contain;
  background-repeat: no-repeat;
}

/* ===== Preload hover images ===== */
.preload {
  background-image: 
    url('EOC_hover.png'),
    url('EAA_hover.png'),
    url('AFW_hover.png'),
    url('PNP_hover.png');
  width: 0;
  height: 0;
  overflow: hidden;
  position: absolute;
  left: -9999px;
}


/* ===== EOC ===== */
.eoc-btn {
  position: absolute;
  bottom: 50px;
  left: 140px;
  width: 104px;
  height: 104px;
  background-image: url('EOC.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.eoc-btn:hover {
  background-image: url('EOC_hover.png');
}

/* ===== EAA ===== */
.eaa-btn {
  position: absolute;
  bottom: 251px;
  right: 107px;
  width: 204px;
  height: 86px;
  background-image: url('EAA.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.eaa-btn:hover {
  background-image: url('EAA_hover.png');
}

/* ===== AFW ===== */
.afw-btn {
  position: absolute;
  bottom: 132px;
  right: 111px;
  width: 194px;
  height: 102px;
  background-image: url('AFW.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.afw-btn:hover {
  background-image: url('AFW_hover.png');
}

/* ===== PNP ===== */
.pnp-btn {
  position: absolute;
  bottom: 54px;
  right: 85px;
  width: 238px;
  height: 60px;
  background-image: url('PNP.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.pnp-btn:hover {
  background-image: url('PNP_hover.png');
}

.eoc-title-image {
  position: absolute;
  top: 30px;              /* adjust as needed */
  left: 52%;              /* center horizontally */
  transform: translateX(-50%);
  width: 760px;           /* adjust to your image size */
  height: 100px;          /* adjust to your image size */
  background-image: url('eoctitleline.png');
  background-size: contain;
  background-repeat: no-repeat;
}

/* ===== Footer Links ===== */
.footer-links {
  position: absolute;
  bottom: 20px;
  left: 50%;                 /* center horizontally */
  transform: translateX(-50%); /* perfect centering */
  text-align: center;
  font-size: 18px;
  white-space: nowrap;
}

.footer-links a {
  color: #fff;
  text-decoration: none;
  margin: 0 10px;
}

.footer-links span {
  color: orange;
}

/* EOC page override */
.no-bg .footer-links a,
.no-bg .footer-links {
  color: #000; /* black text on white background */
}

/* ===== Back Button ===== */
.back-btn {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-size: 20px;
  z-index: 9999;
}


.back-btn a {
  color: #000; /* black for EOC page */
  text-decoration: none;
  font-weight: bold;
}

body.no-bg {
  overflow-y: auto !important;
}

.eoc-container ul {
   list-style-type: disc;
  padding-left: 20px;      /* keeps bullets close */
  margin: 0 auto;          /* centers the UL block */
  width: fit-content;      /* prevents UL from stretching full width */
  text-align: left;        /* keeps bullets + text aligned */
  font-size: 20px;         /* larger text */
  font-weight: bold;       /* bold text */
}

.eoc-container ul li::marker {
  color: orange;
  font-size: 22px;      /* optional: makes bullet slightly larger */
}