.hero {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 16px;
  align-items: start;
}
.hero-video {
  position: relative;
  padding-top: 56.25%;
  border: 1px solid #c6c6c6;
  background: #000;
}
.hero-video iframe {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%; border: 0;
}
.news-list { margin: 0; padding-left: 16px; }
.news-gallery {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.news-thumb { width: 128px; height: 128px; object-fit: cover; border: 1px solid #c6c6c6; }
/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
  font-family: 'eras';
  src: url('Font/eras-itc-demi.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  background-color: #e5e5e5;
  background-image: url('Images/Skybox1.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  color: #000000;
  font-family: 'eras', Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  margin: 0;
}

/* Layout */
.site-wrap {
  width: 960px;
  margin: 0 auto;
}

/* Page frame - light gray border around the central panel */
.page-frame {
  width: 980px;
  margin: 12px auto;
  background: #ffffff;
  border: 1px solid #bdbdbd;
}

/* Header */
.site-header {
  background: linear-gradient(to bottom, #a9c0d4 0%, #dbe4ea 50%, #a1b7c7 100%);
  color: #000000;
  border-bottom: 1px solid #8aa1b6;
}
.site-header .site-wrap {
  padding: 10px 12px;
}
.site-logo {
  height: 36px;
  vertical-align: middle;
  margin-right: 8px;
}
.site-title {
  font-size: 20px;
  margin: 0;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
}
.site-tagline {
  font-size: 11px;
  margin: 2px 0 0 0;
  opacity: .9;
}

/* Nav (classic tabs) */
.site-nav {
  background: #6e99c9; /* classic blue */
  border-top: 1px solid #2f5e8c;
  border-bottom: 1px solid #2f5e8c;
}
.site-nav .site-wrap {
  padding: 0 12px;
}
.tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.tabs li {
  margin: 0;
  border-right: 1px solid #2f5e8c;
}
.tabs a {
  display: block;
  padding: 8px 12px;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
}
.tabs a:hover {
  background: #5c88b9;
}
.tabs .active {
  background: #e8f0fa;
  color: #1b3b63;
  font-weight: bold;
}

/* Content */
.content {
  background: transparent;
}
.content .site-wrap {
  background: #c1c1c1;
  background-image: url('Images/Stud1.png');
  background-repeat: repeat;
  background-size: 32px 32px;
  border: 1px solid #b5b5b5;
  border-top: none;
  padding: 12px;
  position: relative;
}

.content .site-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  z-index: 1;
}

.content .site-wrap > * {
  position: relative;
  z-index: 2;
}
.columns {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
}
/* column hooks retained for future tweaks */

/* Sidebar promo panels */
.panel {
  background: #f3f3f3;
  border: 1px solid #c6c6c6;
  margin-bottom: 12px;
}
.panel-title {
  background: #e3e3e3;
  border-bottom: 1px solid #c6c6c6;
  font-weight: bold;
  padding: 6px 8px;
  font-size: 12px;
}
.panel-body { padding: 8px; }
.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.link-list li { margin: 6px 0; }
.box {
  background: #f5f5f5;
  border: 1px solid #cfcfcf;
  padding: 10px;
  margin: 12px 0;
}
.box h2 {
  margin: 0 0 8px 0;
  font-size: 14px;
}

/* Footer */
.site-footer {
  color: #333333;
  font-size: 11px;
  text-align: center;
  padding: 12px 0 24px 0;
}
.footer-links {
  font-size: 10px;
  color: #666666;
  margin-top: 6px;
}
.footer-links a { color: #666666; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }

/* Links */
a { color: #0b3b75; }
a:hover { text-decoration: underline; }

/* Clickable images */
.news-image {
  width: 128px;
  height: 128px;
  cursor: pointer;
  border: 2px solid #cfcfcf;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.news-image:hover {
  border-color: #6e99c9;
  transform: scale(1.05);
}

/* Modal for full-size image */
.image-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
  cursor: pointer;
}

.modal-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 90%;
  margin-top: 5%;
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}