:root {
  --primary-color: #0ff;
  --secondary-color: #111;
  --background-color: #1a1a1a;
  --text-color: #fff;
  --hover-color: #00ffff;
}

/*     

body {
  background: var(--secondary-color);
  color: var(--text-color);
}

.feature-card {
  box-shadow: 0 0 10px var(--primary-color);
}

.feature-card:hover {
  box-shadow: 0 0 20px var(--hover-color);
}

*/


/*--------------------------------------------------------------
LINE
# ADDED F6F6F6  3498DB
font-size: 5vw;
Blue  #0071f8
Blue #2a4362
white #ffffff
  background: linear-gradient(to bottom, #3498DB, #3498DB);
   background: #000000;
   
  background: linear-gradient(to bottom, #2a4362, #2a4362);  
  #2a2a2a is body background
  3e3e3e
  text-transform: uppercase;

  border-bottom:thin #0ff8 solid; glow border
  border-top:thin #0ff8 solid;  glow border
  text-shadow: 0 0 14px #0ff8;  
nice thin border
  border-bottom:thin #444 solid;
  border-top:thin #444 solid;  
  padding-bottom: 6px;
  padding-top: 6px;
  
--------------------------------------------------------------*/
.line-container-section-label{
  background: #111;
  color: #0071f8; /* overriden in style*/
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  
  font-weight:bold;
  font-size:40px;
  text-align:center;
  text-shadow: 0 0 5px #0ff8, 0 0 10px #0ff8;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 1px;
}

@media (max-width: 520px) {
  .line-container-section-label {
  font-weight:normal;
  font-size:24px;
  }

}


/*--------------------------------------------------------------
LINE
--------------------------------------------------------------*/



/* 
Glow  #00ffaa 

the whole site should be default background #111
borders should be  border-top: 1px solid #444;

background-image: url(../images/nav.png); 

  height: 75vh; 
  width: 100vw;

*/

/*
doesn't seem to do anything
.main-wrapper {
  width: 100%;
  height: auto;
  overflow: visible;
}
*?



/* Reset default margins/padding */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/*--------------------------------------------------------------
THIS MAKES JUMPING AND SCROLLING IN FILES SMOOTH
the bottom banner uses it to jump to the top
--------------------------------------------------------------*/

html {
  scroll-behavior: smooth;
}


/*--------------------------------------------------------------
THIS MAKES OnCLick events have the mouse pointer to click.

 a[onclick] {
      cursor: pointer;
    }
--------------------------------------------------------------*/
/*

html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden; 
  background: #000;   
  scroll-behavior: smooth;
  font-family: 'Segoe UI', sans-serif;  
}

*/

/************************************************************/
/* NAV 
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
*/


/************************************************************/
/*
body {
  font-family: 'Segoe UI', sans-serif;
  padding-bottom: 90px;
  background: #f5f5f5;
}

 background: #fff;
  background: #f5f5f5;
  
  #2a2a2a  sort of a dark near black background
    background: #2a2a2a;
    background: #111;
the whole site should be default background #111
*/





body {
  font-family: 'Segoe UI', sans-serif;
  padding-bottom: 90px;
  background: #111;
  color: white;
}


/*
<a></a>
To prevent links from showing an underline after being clicked, you can use CSS to style all link states (visited, hover, active, focus) to have no text decoration. This will remove the underline for all interactive states, not just the initial state. 
*/
a, a:hover, a:active, a:visited, a:focus { text-decoration: none; }



.content {
  padding: 20px;
  text-align: center;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  border-top: 1px solid #333;
  transition: background 0.8s ease; /* smooth fade  was 4s*/
  

/************************************************************/
/* background images */
/***********************************************************
  background-image: url(../images/nav-bg.jpg); 
*/
  background: rgba(1, 1, 1, 0.50); 

  background-size: cover;
  background-position: center;
  backdrop-filter: blur(10px);  /* keep if you want just a color */
  
}

/************************************************************/
/* darken the background images */
/************************************************************/
.popup-menu::before,
.bottom-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1); /* overlay change to make darker or lighter*/
  pointer-events: none;
  z-index: 0;
}



.bottom-nav.scrolling {
  background: rgba(17, 17, 17, 0.0); /* 0.1 works lower transparency while scrolling */
  /*could get rid of blur backdrop-filter: blur(0px);  */
    
}


.nav-item {
  flex: 1;
  text-align: center;
  transition: transform 0.2s ease, background 0.3s;
  padding: 5px 0;
  cursor: pointer;
  color: #ccc;
  font-size: 12px;
  user-select: none;
}

.nav-item img {
  width: 26px;
  height: 26px;
  filter: grayscale(100%) brightness(0.8);
  transition: transform 0.3s, filter 0.3s;
}

.nav-label {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #aaa;
  transition: color 0.3s;
}

.nav-item:hover img {
  filter: brightness(1.5) drop-shadow(0 0 6px #00ffff);
  transform: scale(1.2);
}

.nav-item:hover .nav-label {
  color: #00ffff;
}

/* Active state styles */
.nav-item.active img {
  filter: brightness(2) drop-shadow(0 0 6px #00ffaa);
  transform: scale(1.2);
}

.nav-item.active .nav-label {
  color: #00ffaa;
  font-weight: bold;
}

/* Click animation */
.nav-item:active {
  transform: scale(0.95);
}

/* Mobile responsiveness */
@media (max-width: 600px) {
  .bottom-nav {
    height: 70px;
  }

  .nav-item img {
    width: 22px;
    height: 22px;
  }

  .nav-label {
    font-size: 10px;
  }
}
/************************************************************/
/* NAV */
/************************************************************/













/************************************************************/
/*
  NAV Popup   border-radius: 12px;
  border-top-left-radius: 10px 80px;
  border-top-right-radius: 10px 10px;  
  bottom: 80px; was 90
*/
/************************************************************/
.popup-menu {
  position: fixed;
  bottom: 80px;
  left:50%;
  border: 1px ridge #1c191c;

/*     
 left: 50%;
transform: translateX(-50%) translateY(20px);
*/

  border-top-left-radius: 10px;
  border-top-right-radius: 10px;  

  box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);

  padding-top:10px;
  padding-bottom:0px;
  padding-left:0px;
  padding-right:16px;

  
  /* add this to make all popup menus the same size   min-width: 200px;    */
  width:auto;


  text-align: center;
  z-index: 1100;
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
  pointer-events: none;
  
/************************************************************/
/*
  background images  
  background: rgba(17, 17, 17, 0.85); 
  background-image: url(../images/popup-bg.jpg); 
  padding: 1px 10px;
*/
/************************************************************/
  background: rgba(1, 1, 1, 0.50); 
  background-size: cover;
  background-position: center;
  backdrop-filter: blur(10px);  /* keep if you want just a color */
  
}


.popup-menu.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}


.popup-header {
  display: flex;
  justify-content: space-between;
  
  padding-top:1px;
  padding-bottom:10px;
  padding-left:0px;
  padding-right:0px;

}

.popup-header span {
  cursor: pointer;
  color: #ccc;
  font-size: 18px;
  transition: color 0.3s;
}

.popup-header span:hover {
  color: #ff6666;
}


.popup-item {
  display: flex;
  align-items: left;

  row-gap: 10px;
  column-gap: 6px;
  
  justify-content: flex-start;
  color: #ccc;
  /*
  gap: 10px;  
 padding: 10px 20px;  
     */
 

  padding-top:10px;
  padding-bottom:12px;
  padding-left:10px;
  padding-right:0px;
  width:100%;
  white-space: nowrap;
  
  font-size: 15px;
  transition: background 0.3s, color 0.3s;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  animation: popupItemIn 0.3s forwards;
}

.popup-item:nth-child(2) { animation-delay: 0.1s; }
.popup-item:nth-child(3) { animation-delay: 0.2s; }
.popup-item:nth-child(4) { animation-delay: 0.3s; }

@keyframes popupItemIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.popup-item:hover {
  background: rgba(0, 255, 255, 0.1);
  color: #00ffff;
}


.popup-icon {
  width: 20px;
  height: 20px;
  filter: brightness(0.9);
}


/*--------------------------------------------------------------
MOBILE
--------------------------------------------------------------*/
@media (max-width: 500px) {
/*     

  .popup-menu {
   bottom: 70px;
   min-width: 60%; 
   max-width: 90%;
  }
*/

.popup-menu {
   bottom: 70px;
  }


  .popup-item {
  font-size: 15px;
  padding-top:10px;
  padding-bottom:12px;
  padding-left:10px;
  padding-right:0px;
  }

  .popup-header span {
    font-size: 18px;
  }
}
/*--------------------------------------------------------------
MOBILE
--------------------------------------------------------------*/





/************************************************************/
/* END Popup */
/************************************************************/






/************************************************************/
/* NEW LOGIN BUTTON 
THIS BUTTON SHOWS UP ON SMALL SCREENS!!!
*/
/************************************************************/
.top-stay-buttons button {
      padding-left:10px;
      padding-right:10px;
      padding-top:6px;
      padding-bottom:6px;

 	  margin-right:10px;
   	  margin-left:10px;

      border: none;
      border-radius: 4px;
      
      /*     
      background: #00ffe0;
      background: #188a42; 186a46
      */
      background: #186a46;
      background: url(../images/f-button-background.jpg) no-repeat center center/cover;      
      border:1px #00ffe0 solid; 

      color: #fff;
      
      font-weight: bold;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.3s ease;
    }

    .top-stay-buttons button:hover {
      transform: scale(1.1);
      box-shadow: 0 0 10px #00ffe0;
    }
    
    
/************************************************************/
/* NEW LOGIN BUTTON */
/************************************************************/







/************************************************************/
/* NEW LOGIN BUTTON 
THIS BUTTON DOES NOT SHOW UP ON SMALL SCREENS!!!
*/
/************************************************************/
.top-buttons button {
      padding-left:8px;
      padding-right:8px;
      padding-top:6px;
      padding-bottom:4px;

 	  margin-right:10px;
   	  margin-left:10px;

      border: none;
      border-radius: 4px;
      
      /*     
      background: #00ffe0;
      background: #188a42; 186a46
      */
      background: #186a46;
      background: url(../images/f-button-background.jpg) no-repeat center center/cover;      
      border:1px #00ffe0 solid; 

      color: #fff;
      
      font-weight: bold;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.3s ease;
    }

    .top-buttons button:hover {
      transform: scale(1.1);
      box-shadow: 0 0 10px #00ffe0;
    }
    

    /* Responsive */
    @media (max-width: 500px) {
 
	.top-buttons {
      display:none;
    }
    }
    
/************************************************************/
/* NEW LOGIN BUTTON */
/************************************************************/



/************************************************************/
/* Login Button *INDEX PAGE ONLY (top right corner) */
/************************************************************/
.login-button {
  position: absolute;
  top: 20px;
  right: 50px;
  padding: 10px 18px;
  background: rgba(0, 255, 255, 0.8);
  color: #000;
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
  z-index: 2;
}

.login-button:hover {
  background: #00ffff;
  transform: scale(1.05);
}

/* Optional: Use a dark theme button style if needed */
.login-button.dark {
  background: rgba(255, 255, 255, 0.8);
  color: #111;
}


@media (max-width: 768px) {
  .login-button {
    align-self: flex-start;
  }
}

@media (max-width: 480px) {
  .login-button {
    font-size: 0.9rem;
    right: 12px;
/*  padding: 8px 16px;   */

    padding-top:8px;
    padding-right:16px;

  }
}

/************************************************************/
/* Login Button (top right corner) */
/************************************************************/

















/***********************************************************
Promo Ticker 
background-image: url(../images/ticker-bg.jpg);     
color: #f33;
***********************************************************/

.promo-label {
  color: #000;
  font-weight: bold;
  margin-right: 20px;
  text-shadow: 0 0 5px #f33, 0 0 10px #f33;
  flex-shrink: 0;
}



#promo-ticker {
  position: relative;
  height: 50px;
  overflow: hidden;
  background: #111;
  
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 10px solid #111;
  border-right: 10px solid #111;

  display: flex;
  align-items: center;
  justify-content: center;
/*  padding: 0 10px;*/

}

.ticker-message {
  position: absolute;
  white-space: nowrap;
  font-size: 1.2rem;
  color: #0ff;
  text-shadow: 0 0 5px #0ff, 0 0 10px #0ff;
  animation: slideMessage 5s linear forwards;
  cursor: default;
  letter-spacing: 3px;
}

@keyframes slideMessage {
  0% {
    transform: translateX(100%);
    opacity: 1;
  }
  30% {
    transform: translateX(0%);
  }
  70% {
    transform: translateX(-100%);
  }
  100% {
    opacity: 0;
  }
}

/* Pause animation on hover */
#promo-ticker:hover .ticker-message {
  animation-play-state: paused;
}

/* Mobile-friendly font size */
@media (max-width: 600px) {
  .ticker-message {
    font-size: 1.2rem;
  }
}

/***********************************************************
Promo Ticker 
***********************************************************/





















/***********************************************************
FEATURES #1 SECTION
  border-top: 1px solid #333;
***********************************************************/
.features-section {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 60px 5%;
  background-color: #111;
/*     
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
 */
   border-bottom: 1px solid #333;
}

.feature-card {
  flex: 1 1 calc(25% - 20px);
  background: #1a1a1a;
  padding: 20px;
  border-radius: 20px;
  text-align: center;
  color: #fff;
  box-shadow: 0 0 10px #0ff2;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  opacity: 0;
  transform: translateY(50px);
}

.feature-card img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #0ff;
  box-shadow: 0 0 15px #0ff6;
  margin-bottom: 15px;
  transition: all 0.4s ease;
}


.feature-card h3 {
  font-size: 1.2rem;
  margin: 0;
  color: #0ff;
  text-shadow: 0 0 8px #0ff6;
  transition: text-shadow 0.4s ease, color 0.4s ease;
}

.feature-card p {
  font-size: 1.0rem;
  margin: 0;
  color: #0ff;
  text-align: left;
  text-shadow: 0 0 8px #0ff6;
  transition: text-shadow 0.4s ease, color 0.4s ease;
}


/* Hover effects */
.feature-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px #0ff8;
}

.feature-card:hover img {
  box-shadow: 0 0 25px #0ffb;
  transform: rotate(3deg);
}

.feature-card:hover h3 {
  color: #fff;
  text-shadow: 0 0 12px #fff;
}

.feature-card:hover p {
  color: #fff;
  text-shadow: 0 0 12px #fff;
}


/* Slide-in animation on scroll */
@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.feature-card.visible {
  animation: slideUp 0.8s ease forwards;
}

/* Mobile responsive layout */
@media (max-width: 768px) {
  .features-section {
    flex-direction: column;
  }

  .feature-card {
    flex: 1 1 100%;
  }
}

/***********************************************************
FEATURES #1 SECTION
***********************************************************/












/***********************************************************
GAME CARDS
 border-top: 1px solid #333; 111
   background: #0c0c0c;
***********************************************************/
.game-cards-section {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 10px 5%;
  padding-bottom:25px;
  justify-content: center;
  background: #111;
  border-bottom: 1px solid #333;
}

.game-card {
  perspective: 1000px;
  width: calc(100% / 6 - 20px);
  min-width: 250px;
  height: 420px;
  transition: all 0.5s ease;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.game-card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #1a1a1a;
  color: #fff;
  border-radius: 20px;
  box-shadow: 0 0 12px var(--glow-color, #0ff);
  backface-visibility: hidden;
  overflow: hidden;
}

.card-front {
  z-index: 2;
}

.card-back {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  transform: rotateY(180deg);
  background: linear-gradient(to bottom right, #111, #222);
  font-size: 1rem;
  text-align: center;
}

.card-image {
  width: 100%;
  height: 250px;
  background-size: cover;
  background-position: center;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  position: relative;
}

.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,255,255,0.1), rgba(255,255,255,0.05));
  mix-blend-mode: screen;
}

.game-info {
  padding: 15px;
  text-align: center;
}

.game-info h4 {
  margin: 10px 0 5px;
  font-size: 1.1rem;
  color: #0ff;
  text-shadow: 0 0 6px #0ff4;
}

.game-info .price {
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 15px;
  color: #fff;
}

.details-btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 10px;
  background: #0ff;
  color: #000;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 0 10px #0ff8;
  transition: background 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}

.details-btn:hover {
  background: #fff;
  transform: scale(1.05);
  box-shadow: 0 0 15px #fff;
}

/* Glow Variants */
.game-card {
  --glow-color: #0ff;
}

.game-card[data-color="#0ff"] { --glow-color: #0ff; }
.game-card[data-color="#39ff14"] { --glow-color: #39ff14; }
.game-card[data-color="#ff1493"] { --glow-color: #ff1493; }
.game-card[data-color="#ffa500"] { --glow-color: #ffa500; }
.game-card[data-color="#00ced1"] { --glow-color: #00ced1; }
.game-card[data-color="#ff4500"] { --glow-color: #ff4500; }


/* ZORK NOT USED I THINK REPLACED BY MY SECTION LINE UP TOP*/
/* Game Card Section Title  3e3e3e*/
.game-cards-title {
  background: #3e3e3e;
  text-align: center;
  font-size: 2.5rem;
  color: #e5e5e5;
  margin: 40px auto 30px;
  text-shadow: 0 0 10px #0ff8;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 1px;
}


/* Back content container */
.card-back .back-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  gap: 20px;
  padding: 20px;
  text-align: center;
}

/* Adjust back-side button slightly */
.back-btn {
  background: #fff;
  color: #000;
  box-shadow: 0 0 10px #fff;
}

.back-btn:hover {
  background: #0ff;
  color: #000;
  box-shadow: 0 0 15px #0ff;
}




/* Responsive Adjustments */
@media (max-width: 1400px) {
  .game-card {
    width: calc(100% / 4 - 20px);
  }
}

@media (max-width: 1000px) {
  .game-card {
    width: calc(100% / 2 - 20px);
  }
}

@media (max-width: 600px) {
  .game-card {
    width: 100%;
  }
}



/***********************************************************
GAME CARDS
***********************************************************/




















/***********************************************************
FOOTER
***********************************************************/
/* === Footer Styles === */
.site-footer {
  margin-top: 100px;
  padding: 60px 20px 30px;
  background: linear-gradient(180deg, #0f0f0f, #1a1a1a);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -5px 30px rgba(0, 255, 255, 0.2);
  position: relative;
  z-index: 5;

  /* existing styles... */
  animation: glowPulse 4s ease-in-out infinite;
 
}

.footer-inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

/* Banner Ad Styling */
.banner-link {
  display: inline-block;
  max-width: 100%;
}

.banner-image {
  width: 100%;
  max-width: 600px;
  height: auto;
  border-radius: 0px;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.banner-image:hover {
  transform: scale(1.02);
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.6);
}


.banner-link {
  position: relative;
  display: inline-block;
  overflow: hidden;
  z-index: 1; /* Ensure this is relatively high if needed */
}

.banner-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.1) 100%
  );
  transform: skewX(-20deg);
  opacity: 0;
  pointer-events: none;
  z-index: 2; /* This is the key! Make sure it's above the image */
}


.banner-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0.1) 100%
  );
  transform: skewX(-20deg);
  opacity: 0;
  pointer-events: none;
}

.banner-link:hover::before {
  animation: sweep 0.75s ease forwards;
}

@keyframes sweep {
  0% {
    left: -75%;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    left: 125%;
    opacity: 0;
  }
}








/* Create a glowing background panel around the image for widescreen */
.footer-inner::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  height: 180px;
  background: radial-gradient(circle at center, rgba(0, 255, 255, 0.1), transparent 70%);
  /* 
  z-index: -1;
  z-index: 1000;  
  */
  z-index: -1;

  pointer-events: none;
}

/* Copyright ff0505*/
copyright {
  color: #aaa;
  font-size: 0.85rem;
  margin-top: 25px;
  font-family: 'Orbitron', sans-serif;
  text-shadow: 0 0 5px rgba(0,255,255,0.3);
}

/* Responsive */
@media (max-width: 640px) {
  .banner-image {
    max-width: 100%;
  }
}



@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 -5px 30px rgba(0, 255, 255, 0.15);
  }
  50% {
    box-shadow: 0 -5px 40px rgba(0, 255, 255, 0.4);
  }
}






/***********************************************************
END FOOTER

***********************************************************/

















/***********************************************************
SUB PAGE HEADER
***********************************************************/
.page-header {
  position: relative;
  width: 100%;
  height: 120px;
  background: url(../images/header-bg-subpage.jpg) center center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
  z-index: 10;
}

.header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
/*Dark overlay for contrast  */
  background: rgba(10, 10, 25, 0.01);  
  backdrop-filter: blur(4px);
  z-index: 1;
}

.header-content {
  position: relative;
  width: 100%;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
}

.page-title {
  font-size: 2rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 0 8px #0ff, 0 0 16px #0ff;
  animation: fadeInLeft 1s ease forwards;
}



@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    gap: 10px;
  }

  .page-title {
    font-size: 1.4rem;
    text-align: left;
  }

}

@media (max-width: 480px) {
  .page-title {
    font-size: 1.0rem;
  }

}



/*
.login-button {
  padding: 10px 20px;
  background: linear-gradient(135deg, #0ff, #00f6ff);
  border: none;
  border-radius: 6px;
  color: #000;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 0 10px #0ff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.login-button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px #0ff, 0 0 25px #00f6ff;
}
*/

/* Optional animation */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/***********************************************************
TBD
***********************************************************/

.login-button-sp {
  padding: 10px 20px;
  background: linear-gradient(135deg, #0ff, #00f6ff);
  border: none;
  border-radius: 4px;
  color: #000;
  font-weight: bold;
  font-size: 0.9rem;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 0 10px #0ff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.login-button-sp:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px #0ff, 0 0 25px #00f6ff;
}




/***********************************************************
END SUBPAGE HEADER
***********************************************************/

















/***********************************************************
INFO CARDS
  background-color: #111;
    border-top: 1px solid #333;  didnt need this becasue of line section title
***********************************************************/
.info-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 5%;

  background-color: #111;

  padding-bottom:30px;
  border-bottom: 1px solid #333;
}

.info-card {
  flex: 1 1 calc(25% - 20px);
  background: #1a1a1a;
  box-shadow: 0 0 10px #0ff3;
  color: #fff;
  overflow: hidden;
  padding-bottom: 20px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;


/*
  border-radius: 16px;
  opacity: 0;
  transform: translateY(50px);
  */
}

.info-card.visible {
  animation: slideUp 0.8s ease forwards;
}

.info-banner {
  width: 100%;
  /*     
  height: 60px;
  */
    height: auto;
  object-fit: cover;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  filter: brightness(0.85) contrast(1.2);
  transition: filter 0.3s ease;
}

.info-title {
  font-size: 1.1rem;
  color: #0ff;
  margin: 15px;
  text-align: center;
  text-shadow: 0 0 8px #0ff4;
}

.info-card p {
  font-size: 0.95rem;
  padding: 0 15px;
  text-align: left;
  line-height: 1.6;
  color: #ddd;
}

/* Hover Effects */
.info-card:hover {
  transform: scale(1.04);
  box-shadow: 0 0 20px #0ff8;
}

.info-card:hover .info-banner {
  filter: brightness(1.1) contrast(1.3);
}

.info-card:hover .info-title {
  color: #fff;
  text-shadow: 0 0 12px #fff;
}

/* Responsive Layout */
@media (max-width: 1024px) {
  .info-card {
    flex: 1 1 calc(50% - 20px);
  }
}

@media (max-width: 600px) {
  .info-card {
    flex: 1 1 100%;
  }
}









/***********************************************************
END INFO CARDS
***********************************************************/





























/***********************************************************
VIDEO SECTION (SIDE BY SIDE)
  border-top: 1px solid #333;
***********************************************************/

.info-videos-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 5%;
  background-color: #111;

  padding-bottom:80px;
  border-bottom: 1px solid #333;
  position: relative;
}

.video-card {
  flex: 1 1 calc(50% - 20px);
  background: #1a1a1a;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 10px #0ff2;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  opacity: 1;
  transform: translateY(50px);
}

.video-card.visible {
  animation: slideUp 0.8s ease forwards;
}

.video-banner img {
  width: 100%;
  height: 60px;
  object-fit: cover;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: 0 0 15px #0ff5;
}

.video-wrapper {
  padding: 20px;
  background-color: #111;
}

.video-card:hover {
  transform: scale(1.02);
  box-shadow: 0 0 20px #0ff8;
}

/* Responsive layout */
@media (max-width: 768px) {
  .video-card {
    flex: 1 1 100%;
  }
}

/* Circuit title styling (same as info cards section) */
.section-title {
  font-size: 2rem;
  color: #0ff;
  text-align: center;
  margin-bottom: 10px;
  text-shadow: 0 0 10px #0ff8;
}

.circuit-line {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10px;
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;  
}

.circuit-line::before {
  content: "";
  position: absolute;
  width: 80%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #0ff, transparent);
  box-shadow: 0 0 10px #0ff5;
}

.circuit-node {
  width: 10px;
  height: 10px;
  background-color: #0ff;
  border-radius: 50%;
  margin: 0 30px;
  animation: nodePulse 2.5s infinite ease-in-out;
}

@keyframes nodePulse {
  0%, 100% {
    box-shadow: 0 0 8px #0ff5;
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 15px #0ffb;
    transform: scale(1.2);
  }
}

/***********************************************************
VIDEO SECTION (SIDE BY SIDE)
***********************************************************/


































/***********************************************************
POP UP BOX (STAND ALONE)
CODE IS IN PARTS.HTML
***********************************************************/
.confirmation-popup {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.8);
      color:white;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }

    .popup-box {
      background: #121212;
      padding: 30px;
      border-radius: 16px;
      box-shadow: 0 0 20px #00ffe0;
      text-align: center;
    }

    .popup-box h3 {
      color: #00ffe0;
      margin-bottom: 15px;
    }

    .popup-box button {
      padding: 10px 20px;
      border: none;
      background: #00ffe0;
      color: #000;
      border-radius: 8px;
      cursor: pointer;
    }
/***********************************************************
POP UP BOX (STAND ALONE)
***********************************************************/











/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/


/***********************************************************
TBD
***********************************************************/