/* ============================
   Global Reset & Base Styling
   ============================ */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-family: Arial, sans-serif;
    background-color: black;
    color: white;
}

/* ============================
   Background Video
   ============================ */
#bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
  background: black;
}


/* ============================
   Overlay Containers
   ============================ */
.overlay {
  position: absolute;
  color: white;
  text-shadow: 2px 2px 4px black;
  z-index: 10;
}


.overlay-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.overlay-bottom-right {
    bottom: 20px;
    right: 20px;
    font-size: 1.2em;
}

/* ============================
   Branch Page Styling
   ============================ */
.branch-container {
    padding: 40px;
    text-align: center;
}

.branch-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.branch-card {
    background-color: rgba(0,0,0,0.6);
    padding: 20px;
    border-radius: 10px;
    width: 250px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.branch-card:hover {
    transform: scale(1.05);
}

/* ============================
   Veteran Detail Page
   ============================ */
.veteran-detail {
    padding: 40px;
    text-align: center;
}

.veteran-photo {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
}

/* ============================
   Army Theme (Gold on Black)
   ============================ */

.army-page {
    background: rgba(0, 0, 0, 0.85);
    min-height: 100vh;
    padding: 40px;
    color: #f0e6d2;
    position: relative;
    z-index: 0;
}

.army-header {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 40px;
    color: #d4af37;
    text-shadow: 3px 3px 6px black;
}

.army-page::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("/static/images/army_insignia.png") center/contain no-repeat;
    opacity: 0.10;
    z-index: -1;
    pointer-events: none;
}

.army-card {
    background-color: rgba(20, 20, 20, 0.85);
    border: 3px solid #d4af37;
    padding: 20px;
    width: 260px;
    text-align: center;
    box-shadow: 0 0 12px rgba(0,0,0,0.8);
    color: #f0e6d2;
}

.army-card:hover {
    transform: scale(1.05);
    border-color: #f0e6d2;
}

.army-card h3 {
    color: #d4af37;
}

.army-card p {
    margin: 6px 0;
}

/* ============================
   Navy Theme (Gold on Blue)
   ============================ */

.navy-page {
    background: rgba(0, 38, 84, 0.85); /*Navy blue with translucency*/
    min-height: 100vh;
    padding: 40px;
    color: #f0e6d2;
    position: relative;
    z-index: 0;
}

.navy-header {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 40px;
    color: #FFD700; /* Navy gold */
    text-shadow: 3px 3px 6px black;
}

.navy-page::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("/static/images/navy_insignia.png") center/contain no-repeat;
    opacity: 0.10;
    z-index: -1;
    pointer-events: none;
}

.navy-card {
    background-color: rgba(20, 20, 20, 0.85);
    border: 3px solid #FFD700; /* Navy gold */
    padding: 20px;
    width: 260px;
    text-align: center;
    box-shadow: 0 0 12px rgba(0,0,0,0.8);
    color: #f0e6d2;
}

.navy-card:hover {
    transform: scale(1.05);
    border-color: #f0e6d2;
}

.navy-card h3 {
    color: #FFD700;
}

.navy-card p {
    margin: 6px 0;
}
/* ============================
   Air Force Theme (Gold on Blue)
   ============================ */

.airforce-page {
    background: rgba(0, 51, 160, 0.85); /*Airforce blue with translucency*/
    min-height: 100vh;
    padding: 40px;
    color: #0033a0;
    position: relative;
    z-index: 0;
}

.airforce-header {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 40px;
    color: #FFD000; /* Airforce gold */
    text-shadow: 3px 3px 6px black;
}

.airforce-page::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("/static/images/airforce.png") center/contain no-repeat;
    opacity: 0.10;
    z-index: -1;
    pointer-events: none;
}

.airforce-card {
    background-color: rgba(255, 213, 32, 0.85);
    border: 3px solid #FFD700; /* Airforce gold */
    padding: 20px;
    width: 260px;
    text-align: center;
    box-shadow: 0 0 12px rgba(0,0,0,0.8);
    color: #f0e6d2;
}

.airforce-card:hover {
    transform: scale(1.05);
    border-color: #f0e6d2;
}

.airforce-card h3 {
    color: #FFD700;
}

.airforce-card p {
    margin: 6px 0;
}
/*=====================================
     Marines Theme
========================================*/

.marines-page {
    background: rgba(122, 15, 18, 0.90); /* Dark Scarlet */
    min-height: 100vh;
    padding: 40px;
    color: #FFD700; /* Gold text */
    position: relative;
    z-index: 0;
}

.marines-header {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 40px;
    color: #FFD700;
    text-shadow: 3px 3px 6px black;
}

.marines-page::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("/static/images/marines.png") center/contain no-repeat;
    opacity: 0.10;
    z-index: -1;
    pointer-events: none;
}

.marines-card {
    background-color: rgba(218, 41, 28, 0.85); /* Scarlet */
    border: 3px solid #FFD700; /* Gold */
    padding: 20px;
    width: 260px;
    text-align: center;
    box-shadow: 0 0 12px rgba(0,0,0,0.8);
    color: white;
}

.marines-card:hover {
    transform: scale(1.05);
    border-color: white;
}

.marines-card h3 {
    color: #FFD700;
}

.marines-card p {
    margin: 6px 0;
}
/*==================================================
           Coast Guard Theme
====================================================*/
.coastguard-page {
    background: rgba(0, 42, 92, 0.90); /* Dark Coast Guard Blue */
    min-height: 100vh;
    padding: 40px;
    color: #FFFFFF;
    position: relative;
    z-index: 0;
}

.coastguard-header {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 40px;
    color: #CE1126; /* Coast Guard Red */
    text-shadow: 3px 3px 6px black;
}

.coastguard-page::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("/static/images/coastguard.png") center/contain no-repeat;
    opacity: 0.10;
    z-index: -1;
    pointer-events: none;
}

.coastguard-card {
    background-color: rgba(0, 63, 135, 0.85); /* Coast Guard Blue */
    border: 3px solid #CE1126; /* Red */
    padding: 20px;
    width: 260px;
    text-align: center;
    box-shadow: 0 0 12px rgba(0,0,0,0.8);
    color: white;
}

.coastguard-card:hover {
    transform: scale(1.05);
    border-color: white;
}

.coastguard-card h3 {
    color: #CE1126;
}

.coastguard-card p {
    margin: 6px 0;
}
/*=========================================================================
      National Guard Theme
==========================================================================*/
.nationalguard-page {
    background: rgba(122, 10, 30, 0.90); /* Dark Red */
    min-height: 100vh;
    padding: 40px;
    color: #FFFFFF;
    position: relative;
    z-index: 0;
}

.nationalguard-header {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 40px;
    color: #0033A0; /* Guard Blue */
    text-shadow: 3px 3px 6px black;
}

.nationalguard-page::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("/static/images/nationalguard.png") center/contain no-repeat;
    opacity: 0.10;
    z-index: -1;
    pointer-events: none;
}

.nationalguard-card {
    background-color: rgba(200, 16, 46, 0.85); /* Guard Red */
    border: 3px solid #0033A0; /* Guard Blue */
    padding: 20px;
    width: 260px;
    text-align: center;
    box-shadow: 0 0 12px rgba(0,0,0,0.8);
    color: white;
}

.nationalguard-card:hover {
    transform: scale(1.05);
    border-color: white;
}

.nationalguard-card h3 {
    color: #0033A0;
}

.nationalguard-card p {
    margin: 6px 0;
}
/*===========================================================================
                        Space Force Theme
===========================================================================*/
.spaceforce-page {
    background: rgba(30, 30, 30, 0.90); /* Dark Gray */
    min-height: 100vh;
    padding: 40px;
    color: #C0C0C0; /* Silver */
    position: relative;
    z-index: 0;
}

.spaceforce-header {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 40px;
    color: #C0C0C0;
    text-shadow: 3px 3px 6px black;
}

.spaceforce-page::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("/static/images/spaceforce.png") center/contain no-repeat;
    opacity: 0.10;
    z-index: -1;
    pointer-events: none;
}

.spaceforce-card {
    background-color: rgba(74, 74, 74, 0.85); /* Delta Gray */
    border: 3px solid #C0C0C0; /* Silver */
    padding: 20px;
    width: 260px;
    text-align: center;
    box-shadow: 0 0 12px rgba(0,0,0,0.8);
    color: white;
}

.spaceforce-card:hover {
    transform: scale(1.05);
    border-color: white;
}

.spaceforce-card h3 {
    color: #C0C0C0;
}

.spaceforce-card p {
    margin: 6px 0;
}