<link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet'>

img {
    max-width: 100%;
}

.row {
    margin-left: 0;
    margin-right: 0;
}

.mobile-banner {
    width: 90%;
    max-width: 600px;
    margin: auto;
    padding: 15px;
    border-radius: 20px;
    background: linear-gradient(white, white) padding-box, 
                linear-gradient(to right, #0064ff, #4f89db) border-box;
    border: 8px solid transparent;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
}

.gradient-title {
    margin: 0;
    font-weight: bold;
    font-size: 1.8rem;
    background: -webkit-linear-gradient(#0064ff, #4f89db);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (max-width: 768px) {
    .gradient-title {
        font-size: 1.5rem;
    }

    .mobile-banner {
        padding: 10px;
        border-radius: 15px;
        width: 95%;
    }
}



/* Ticker CSS */
/* ===== SCGC Ticker (from scratch) ===== */
#scgcTicker{
  --track-bg: var(--scgc-color-sage-green-900, #0f2a22);
  --pill-bg:  var(--scgc-color-pale-sage-green, #e6f0ea);
  --pill-fg:  var(--scgc-color-subtle-gray, #24322c);
  --gap: .75rem;

  overflow: hidden;
  width: 100%;
  background: var(--track-bg);
  padding: .5rem 0;
  position: relative;
  line-height: 0; /* kill stray gaps */
}
#scgcTicker .scgc-ticker__track{
  display: inline-flex;
  align-items: center;
  gap: var(--gap);
  white-space: nowrap;
  will-change: transform;
  transform: translateX(0);
  min-height: 38px; /* keeps rail steady */
}
#scgcTicker .scgc-ticker__row{
  display: inline-flex;
  gap: var(--gap);
}
#scgcTicker .scgc-ticker__item{ display: inline-flex; }

#scgcTicker .scgc-ticker__badge{
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .38rem .9rem;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-weight: 600; font-size: .9rem; line-height: 1;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
#scgcTicker .scgc-ticker__badge .uil{
  font-size: 1rem; color: #d23b3b;
}

/* Hover = pause (nice UX) */
#scgcTicker:hover .scgc-ticker__track { /* JS handles speed; this just signals intent */ }

/* Mobile sizing */
@media (max-width: 768px){
  #scgcTicker{ --gap: .5rem; }
  #scgcTicker .scgc-ticker__badge{ font-size: .82rem; padding: .34rem .7rem; }
}


/* TICKER END */



/* DESKTOP ONLY and MOBILE ONLY*/
@media (min-width: 769px) {
    .desktop-only {
        display: block !important;
    }
}

@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .mobile-only {
        display: block !important;
    }
}

/* Login Button in Header */
.header-misc-login {
  display: flex;
  align-items: center;
  margin-left: 15px; /* Adjust spacing as needed */
}

.header-misc-login .button {
  padding: 5px 15px;
  font-size: 14px;
  display: inline-block;
  text-align: center;
}

.unit-name-overlay {
    background-color: rgba(11.8, 22.7, 54.1, 0.6); /* Dark semi-transparent background */
    font-size: 10px; /* Adjust the font size */
    font-weight: bold;
    padding: 5px;
    color: white;
    text-align: right; /* Align text to the right */
    max-width: 100%; /* Ensure it doesn't exceed the image size */
    white-space: nowrap; /* Prevent text wrapping */
    text-overflow: ellipsis; /* Add ellipsis if the text is too long */
    overflow: hidden;
    font-family: 'Helvetica Neue', sans-serif;
}

/* ===== Brand tokens (tweak if needed) ===== */
:root{
  --scgc-accent-1: #ffeead;
  --scgc-accent-2: #29B6F6;
  --scgc-ink: #0f172a;
  --scgc-surface: transparent;         /* keep page bg showing */
  --scgc-cutout: rgba(255,255,255,.02);/* tiny lift if you want */
  --scgc-radius: 14px;
}

/* ===== Wrapper (kept for your current HTML) ===== */
.movingBorder-main{
  width:100%;
  margin:0 !important;
  padding:0;
  background: var(--scgc-surface);
}

/* Gradient border WITHOUT animation (but still flashy) */
.movingBorder-border{
  padding:6px;
  border-radius: var(--scgc-radius);
  /* Border trick: gradient on border-box, solid center on padding-box */
  background:
    linear-gradient(90deg, var(--scgc-accent-1), var(--scgc-accent-2)) border-box,
    linear-gradient(var(--scgc-surface), var(--scgc-surface)) padding-box;
  border:2px solid transparent;
}

/* Inner panel – subtle cutout; remove if you want fully transparent */
.movingBorder-inner-cutout{
  margin:0;
  padding:18px 22px;
  border-radius: calc(var(--scgc-radius) - 4px);
  background: var(--scgc-cutout);
  backdrop-filter: saturate(110%); /* safe, optional */
}

/* ===== The Title ===== */
.movingBorder-knockout{
  text-align:center;
}

.movingBorder-knockout .scalingText-h1{
  /* responsive, but capped so it doesn’t get clown-big */
  font-size: clamp(28px, 5vw, 64px);
  line-height: 1.05;
  margin: 0;
  font-weight: 800;
  /* static gradient text (no jank) */
  background: linear-gradient(110deg, var(--scgc-accent-1) 0%, var(--scgc-accent-2) 100%);
  background-size: 200% 100%;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
  /* one-time entrance: GPU-friendly (opacity/transform), not infinite */
  opacity: 0;
  transform: translateY(6px);
  animation: titleFadeUp .45s ease-out .05s forwards;
  will-change: transform, opacity;
  position: relative;
}

/* Classy underline “accent bar” (static) */
.movingBorder-knockout .scalingText-h1::after{
  content:"";
  display:block;
  height:4px;
  width:min(220px, 40%);
  margin: 10px auto 0;
  border-radius:999px;
  background: linear-gradient(90deg, var(--scgc-accent-1), var(--scgc-accent-2));
  /* slight glow without animation */
  box-shadow: 0 0 10px rgba(41,182,246,.25);
}

@keyframes titleFadeUp{
  to { opacity:1; transform:translateY(0); }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce){
  .movingBorder-knockout .scalingText-h1{
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.movingBorder-knockout .scalingText-h1{
  font-weight: 800;
  font-size: clamp(28px,5vw,64px);
  line-height:1.05;
  margin:0;
  color:#0f172a;                    /* solid ink */
  -webkit-text-fill-color: currentColor;
  background:none;                  /* kill gradient fill */
  text-shadow: 0 1px 0 rgba(255,255,255,.3); /* subtle lift (optional) */
}

/* Reduce the section padding specifically for this header block */
.movingBorder-main.section{
  padding-block: 16px !important;   /* replaces pt-5 pb-5 */
}

/* Trim internal padding too */
.movingBorder-border{ padding:4px; }
.movingBorder-inner-cutout{ padding:12px 16px; }

/* Make sure the H1 isn’t adding extra space */
.movingBorder-knockout .scalingText-h1{ margin:0; }


/* END Moving border for SCGC Mission */

.menu-link {
    color: --var(scgc-color-deep-blue);
}

/* Color Scheme Variables */
:root {
  --scgc-color-black: #000000;
  --scgc-color-red: #E63946;
  --scgc-color-gray: #6E6E6E;
  --scgc-color-teal-green: #1DE9B6;
  --scgc-color-bright-blue: #29B6F6;
  --scgc-color-deep-blue: #1E3A8A;
  --scgc-color-digital-lavender: #CEB4F1;
  --scgc-color-sage-green: #A3B18A;
  --scgc-color-burnt-coral: #E9897E;
  --scgc-color-sunset-orange: #FF6F61;
  --scgc-color-soft-beige: #F5E6CC;
  --scgc-color-deep-maroon: #7B2E00;
  --scgc-color-metallic-gold: #D4AF37;
  --scgc-color-light-sage-green: #c9d5b8;
  --scgc-color-very-light-sage-green: #e1e9d7;
  --scgc-color-pale-sage-green: #f0f4ec;
  --scgc-color-subtle-gray: #6E6E6E;
  --button-text-color: #fff;
  --button-transition: all 0.2s ease-in-out;
  --button-box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15);
  --button-hover-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}

/* SCGC Custom Background Color Classes */
.bg-scgc-black {
    background-color: var(--scgc-color-black);
    color: white; /* Ensure text is readable */
}

.bg-scgc-red {
    background-color: var(--scgc-color-red);
    color: white;
}

.bg-scgc-gray {
    background-color: var(--scgc-color-gray);
    color: white;
}

.bg-scgc-teal-green {
    background-color: var(--scgc-color-teal-green);
    color: black; /* Dark text for contrast */
}

.bg-scgc-bright-blue {
    background-color: var(--scgc-color-bright-blue);
    color: white;
}

.bg-scgc-deep-blue {
    background-color: var(--scgc-color-deep-blue);
    color: white;
}
        .bg-scgc-deep-blue-2 {
            background-color: #3B82F6; /* Medium blue */
            color: white;
        }

        .bg-scgc-deep-blue-3 {
            background-color: #93C5FD; /* Lighter blue */
            color: white;
        }

.bg-scgc-digital-lavender {
    background-color: var(--scgc-color-digital-lavender);
    color: black; /* Dark text for contrast */
}
    .bg-scgc-digital-lavender-2 {
    background-color: #D1B3FF; /* Medium lavender */
    color: black;
    }

    .bg-scgc-digital-lavender-3 {
        background-color: #E6D3FF; /* Lighter lavender */
        color: black;
    }

.bg-scgc-sage-green {
    background-color: var(--scgc-color-sage-green);
    color: black;
}

.bg-scgc-burnt-coral {
    background-color: var(--scgc-color-burnt-coral);
    color: white;
}

.bg-scgc-sunset-orange {
    background-color: var(--scgc-color-sunset-orange);
    color: white;
}

.bg-scgc-soft-beige {
    background-color: var(--scgc-color-soft-beige);
    color: black;
}

.bg-scgc-deep-maroon {
    background-color: var(--scgc-color-deep-maroon);
    color: white;
}

.bg-scgc-metallic-gold {
    background-color: var(--scgc-color-metallic-gold);
    color: black;
}

.bg-scgc-light-sage-green {
    background-color: var(--scgc-color-light-sage-green);
    color: black;
}

.bg-scgc-very-light-sage-green {
    background-color: var(--scgc-color-very-light-sage-green);
    color: black;
}

.bg-scgc-pale-sage-green {
    background-color: var(--scgc-color-pale-sage-green);
    color: black;
}

.bg-scgc-subtle-gray {
    background-color: var(--scgc-color-subtle-gray);
    color: white;
}




/* TYPOGRAPHY */

.fit-text {
    font-weight: 900;
    letter-spacing: 0.07em;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    text-transform: uppercase;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
    margin: 0 auto;
    text-align: center !important;
    font-size: clamp(1rem, 3vw, 2.5rem) !important; /* Ensure responsive font size */
    max-width: 100% !important; /* Allow full width usage */
    white-space: normal !important; /* Allow text to wrap */
    overflow-wrap: break-word !important; /* Prevent overflow by breaking long words */
    line-height: 1.2 !important; /* Reduce line height for better fit */
}





/* Bold Minimalism */
.h1-bold-minimalism {
    font-weight: 900;
    letter-spacing: 0.07em;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    text-transform: uppercase;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
    margin: 0 auto;
    text-align: center; /* Keep the text centered */
    font-size: calc(10px + 5vw); /* Responsive scaling based on viewport width */
    max-width: 75%; /* Limit the text to 75% of the container width */
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden; /* Hide any overflow, just in case */
}
.h1-bold-minimalism-gradient {
    
    /*font-size: clamp(2rem, 5vw, 4rem);*/
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: 'Helvetica Neue', sans-serif;
    background: linear-gradient(to right, var(--scgc-color-teal-green), var(--scgc-color-bright-blue), var(--scgc-color-sunset-orange));
    
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Outline Style */
    .h1-outline {
        font-size: 2rem;
        font-weight: 900;
        font-family: 'Arvo', sans-serif;
        color: transparent;
        -webkit-text-stroke: 2px #000;
}

.scgc-fancy-title h1, .scgc-fancy-title .h1,
.scgc-fancy-title h2, .scgc-fancy-title .h2,
.scgc-fancy-title h3, .scgc-fancy-title .h3,
.scgc-fancy-title h4, .scgc-fancy-title .h4,
.scgc-fancy-title h5, .scgc-fancy-title .h5,
.scgc-fancy-title h6, .scgc-fancy-title .h6 {
  margin-bottom: 0;
  color: var(--scgc-color-sunset-orange);
}

.scgc-fancy-title::before, .scgc-fancy-title::after {
  content: "";
  flex-grow: 1;
  height: 0;
  border-top: calc(var(--scgc-fancy-title-border-size) * 3) double rgba(var(--scgc-color-dark-blue-rgb), 0.1);
}

.scgc-fancy-title::before {
  display: none;
  margin-right: var(--scgc-fancy-title-padding);
}

.scgc-fancy-title::after {
  margin-left: var(--scgc-fancy-title-padding);
}

.scgc-title-border::before, .scgc-title-border::after {
  border-top-width: var(--scgc-fancy-title-border-size);
  border-top-style: solid;
}

.scgc-title-border-color::before, .scgc-title-border-color::after {
  border-top: var(--scgc-fancy-title-border-size) solid var(--scgc-color-deep-blue);
}

.scgc-title-center::before, .scgc-title-right::before {
  display: block;
}

.scgc-title-right::after {
  display: none;
}

.scgc-title-bottom-border::before, .scgc-title-bottom-border::after {
  display: none;
}

.scgc-title-bottom-border h1, .scgc-title-bottom-border .h1,
.scgc-title-bottom-border h2, .scgc-title-bottom-border .h2,
.scgc-title-bottom-border h3, .scgc-title-bottom-border .h3,
.scgc-title-bottom-border h4, .scgc-title-bottom-border .h4,
.scgc-title-bottom-border h5, .scgc-title-bottom-border .h5,
.scgc-title-bottom-border h6, .scgc-title-bottom-border .h6 {
  width: 100%;
  padding: 0 0 var(--scgc-fancy-title-padding);
  border-bottom: calc(var(--scgc-fancy-title-border-size) * 2) solid var(--scgc-color-deep-blue);
}


/* General Button Styles */
.button-scgc {
  color: var(--button-text-color);
  border: none;
  transition: var(--button-transition);
}

.button-scgc:hover {
  color: var(--button-text-color);
}

.button-scgc-3d {
  box-shadow: var(--button-box-shadow);
}

.button-scgc-3d:hover {
  box-shadow: var(--button-hover-box-shadow);
}

/* Outline Button Styles */
.button-scgc-outline {
  background-color: transparent;
  transition: var(--button-transition);
}

/* Rounded Button Styles */
.button-scgc-rounded {
  border-radius: 50px;
  border: none;
  transition: var(--button-transition);
}

/* SCGC Color Buttons */
.button-scgc-teal-green { background-color: var(--scgc-color-teal-green); }
.button-scgc-teal-green:hover { background-color: #21867a; } /* Manually darkened teal-green */

.button-scgc-bright-blue { background-color: var(--scgc-color-bright-blue); }
.button-scgc-bright-blue:hover { background-color: var(--scgc-color-deep-blue); }

.button-scgc-digital-lavender { background-color: var(--scgc-color-digital-lavender); }
.button-scgc-digital-lavender:hover { background-color: #aa86c5; } /* Manually darkened lavender */

.button-scgc-sunset-orange { background-color: var(--scgc-color-sunset-orange); }
.button-scgc-sunset-orange:hover { background-color: #e57c3f; } /* Manually darkened orange */

.button-scgc-sage-green { background-color: var(--scgc-color-sage-green); }
.button-scgc-sage-green:hover { background-color: #81997c; } /* Manually darkened sage green */

.button-scgc-deep-maroon { background-color: var(--scgc-color-deep-maroon); }
.button-scgc-deep-maroon:hover { background-color: #631828; } /* Manually darkened maroon */

.button-scgc-metallic-gold { background-color: var(--scgc-color-metallic-gold); }
.button-scgc-metallic-gold:hover { background-color: #d4a537; } /* Manually darkened gold */

/* 3D Button Styles for Each Color */
.button-scgc-teal-green-3d { background-color: var(--scgc-color-teal-green); }
.button-scgc-teal-green-3d:hover { background-color: #21867a; }

.button-scgc-bright-blue-3d { color: var(--scgc-color-deep-blue); background-color: var(--scgc-color-bright-blue); /* Bright Blue */ }
.button-scgc-bright-blue-3d:hover { background-color: var(--scgc-color-deep-blue) !important; /* Ensure it's a darker blue */ }

.button-scgc-digital-lavender-3d { background-color: var(--scgc-color-digital-lavender); }
.button-scgc-digital-lavender-3d:hover { background-color: #aa86c5; }

.button-scgc-sunset-orange-3d { background-color: var(--scgc-color-sunset-orange); }
.button-scgc-sunset-orange-3d:hover { background-color: #D65A30 !important; }

.button-scgc-sage-green-3d { background-color: var(--scgc-color-sage-green); }
.button-scgc-sage-green-3d:hover { background-color: #81997c; }

.button-scgc-deep-maroon-3d { background-color: var(--scgc-color-deep-maroon); }
.button-scgc-deep-maroon-3d:hover { background-color: #631828; }

.button-scgc-deep-blue-3d { background-color: var(--scgc-color-deep-blue); }
.button-scgc-deep-blue-3d:hover { background-color: var(--scgc-color-bright-blue); }

.button-scgc-metallic-gold-3d { background-color: var(--scgc-color-metallic-gold); }
.button-scgc-metallic-gold-3d:hover { background-color: #d4a537; }

/* Outline Button Styles for Each Color */
.button-scgc-teal-green-outline {
  color: var(--scgc-color-teal-green);
  border: 2px solid var(--scgc-color-teal-green);
}
.button-scgc-teal-green-outline:hover { background-color: var(--scgc-color-teal-green); }

.button-scgc-bright-blue-outline {
  color: var(--scgc-color-bright-blue);
  border: 2px solid var(--scgc-color-bright-blue);
}
.button-scgc-bright-blue-outline:hover { background-color: var(--scgc-color-bright-blue); }

.button-scgc-digital-lavender-outline {
  color: var(--scgc-color-digital-lavender);
  border: 2px solid var(--scgc-color-digital-lavender);
}
.button-scgc-digital-lavender-outline:hover { background-color: var(--scgc-color-digital-lavender); }

.button-scgc-sunset-orange-outline {
  color: var(--scgc-color-sunset-orange);
  border: 2px solid var(--scgc-color-sunset-orange);
}
.button-scgc-sunset-orange-outline:hover { background-color: var(--scgc-color-sunset-orange); }

.button-scgc-sage-green-outline {
  color: var(--scgc-color-sage-green);
  border: 2px solid var(--scgc-color-sage-green);
}
.button-scgc-sage-green-outline:hover { background-color: var(--scgc-color-sage-green); }

.button-scgc-deep-maroon-outline {
  color: var(--scgc-color-deep-maroon);
  border: 2px solid var(--scgc-color-deep-maroon);
}
.button-scgc-deep-maroon-outline:hover { background-color: var(--scgc-color-deep-maroon); }

.button-scgc-metallic-gold-outline {
  color: var(--scgc-color-metallic-gold);
  border: 2px solid var(--scgc-color-metallic-gold);
}
.button-scgc-metallic-gold-outline:hover { background-color: var(--scgc-color-metallic-gold); }

/* Rounded Button Styles for Each Color */
.button-scgc-deep-blue-rounded {
  background-color: var(--scgc-color-deep-blue);
  color: var(--button-text-color);
  border: none;
  border-radius: 50px; /* Makes the button rounded */
  padding: 10px 20px; /* Adjust padding as needed */
  transition: var(--button-transition);
  display: inline-block;
  text-align: center;
}

.button-scgc-deep-blue-rounded:hover {
  background-color: var(--scgc-color-sunset-orange);
}

.button-scgc-teal-green-rounded { background-color: var(--scgc-color-teal-green); }
.button-scgc-teal-green-rounded:hover { background-color: darken(var(--scgc-color-teal-green), 10%); }

.button-scgc-bright-blue-rounded { background-color: var(--scgc-color-bright-blue); }
.button-scgc-bright-blue-rounded:hover { background-color: darken(var(--scgc-color-bright-blue), 10%); }

.button-scgc-digital-lavender-rounded { background-color: var(--scgc-color-digital-lavender); }
.button-scgc-digital-lavender-rounded:hover { background-color: darken(var(--scgc-color-digital-lavender), 10%); }

.button-scgc-sunset-orange-rounded { background-color: var(--scgc-color-sunset-orange); }
.button-scgc-sunset-orange-rounded:hover { background-color: darken(var(--scgc-color-sunset-orange), 10%); }

.button-scgc-sage-green-rounded { background-color: var(--scgc-color-sage-green); }
.button-scgc-sage-green-rounded:hover { background-color: darken(var(--scgc-color-sage-green), 10%); }

.button-scgc-deep-maroon-rounded { background-color: var(--scgc-color-deep-maroon); }
.button-scgc-deep-maroon-rounded:hover { background-color: darken(var(--scgc-color-deep-maroon), 10%); }

.button-scgc-metallic-gold-rounded { background-color: var(--scgc-color-metallic-gold); }
.button-scgc-metallic-gold-rounded:hover { background-color: darken(var(--scgc-color-metallic-gold), 10%); }

/* Fancy Title Styles */
.scgc-fancy-title {
  --scgc-fancy-title-bg: var(--scgc-color-white);
  --scgc-fancy-title-padding: 0.75rem;
  --scgc-fancy-title-border-size: 1px;
  --scgc-fancy-title-border-color: rgba(var(--scgc-color-dark-blue-rgb), 0.1);
  --scgc-fancy-title-dotted-border: images/icons/dotted.png;
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
}

/* Overlay Modal Styles */
#overlay {
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  z-index: 999;
  background: rgba(30, 30, 30, 0.7);
  top: 0;
  left: 0;
}

#pagecontainer {
  position: fixed;
  z-index: 1000;
  display: none;
  width: 95%;
  height: 95%;
  background: #2a3f54;
  left: 2.5%;
  top: 2.5%;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

#close {
  cursor: pointer;
  float: right;
  color: #ffffff;
  font-size: 1.5rem;
}

#page {
  display: none;
  width: 100%;
  height: 100%;
  border: none;
}