/* ===== Landing page redesign ===== */
:root{
  --bg:#0b1220; /* Original: #131313 New: #0b1220 */
  --panel:#0f0f10;
  --panel-soft:#17181a;
  --text:#f8f9fa;
  --muted:#b7bec8;
  --accent:#c49b20;
  --line:rgba(255,255,255,.10);
}

.hero-card{
  max-width: 850px;
  border:1px solid var(--line);
  border-radius:1rem;
  padding:2rem 1.25rem;
    text-shadow:
    0 1px 2px #000,
    0 2px 8px rgba(0, 0, 0, .9);
  background:
    linear-gradient(rgba(8,10,14,.62), rgba(8,10,14,.62)),
    url('../images/holosite/RC-Chambers-refitted.png') center/cover no-repeat;
    /* url('../images/holosite/RC-Chambers-refitted.png') center/cover no-repeat; */

}

.hero-kicker {
  color: var(--accent);
  text-shadow:
    0 1px 2px #000,
    0 2px 8px rgba(0, 0, 0, .9);
  letter-spacing: .3em;
}


@media (min-width: 992px){
  .access-frame{ padding:0.5rem; }
}


.login-card a {
  margin-top: auto;
}

.login-card{
  border:1px solid rgba(255, 255, 255, 0.993);
  border-radius:1.9rem;
  padding:1rem;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  background-color:rgba(0,0,0,.22);
  backdrop-filter: blur(2px);
}

.login-card-guest{
  border-color:rgba(196,155,32,.45);
  background:
    linear-gradient(rgba(8,10,14,.62), rgba(8,10,14,.62)),
    url('../images/holosite/guestlobby.png') center/cover no-repeat;
    /* url('../images/holosite/HF-1.png') center/cover no-repeat; */
}

.login-card-member{
  border-color:rgba(196,155,32,.45);
  background:
    linear-gradient(rgba(8,10,14,.62), rgba(8,10,14,.62)),
    url('../images/holosite/Landing\ Logo.png') center/cover no-repeat;
    /* url('../images/holosite/memberlobby.png') center/cover no-repeat; */
}


/* Permanent elements */

/*  ---- Template Global Settings   -----  */
body {
  background-color: #131313; /* #000 as default dark, #131313 for lighter */
  color: #f8f9fa; /* #f8f9fa as default light text */
  font-family: 'Segoe UI', sans-serif;
}

/*  ---- Recruitment Portal Nav Tabs   -----  */
/* Non-active and non-hovered nav links */
.nav-tabs .nav-link {
    color: #6c757d; /* Gray color for non-active links */
    border-bottom: 3px solid transparent; /* Invisible bottom border to all non-active cards to keeping nav links from "jumping" with the active bottom border */
}

/* Active nav link */
.nav-tabs .nav-link.active {
    /*background-color: transparent !important;*/
    background-color: rgba(13, 67, 214, 0.144);
    border-color: transparent !important;
    color: #ffc107bd; /* Gold color for active tab text */
    border-bottom: 3px solid #ffc107bd; /* Add gold border under active tab */
}

/* Hover effect for non-active links */
.nav-tabs .nav-link:hover {
    color: #ffc107bd; /* Change color on hover */
    background-color: rgba(13, 67, 214, 0.329);
    border-bottom: 3px solid #ffc107bd; /* Make gold bottom border visible on hover */
}


/*  ---- Cards   -----  */
.card {
  background-color: #0a0a0a;  /* #131313 */
  border-radius: 0.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  padding: 1rem;
}

/* Card-interactive: effects */
.card-interactive:hover {
  transform: scale(1.02);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

/*  ---- Header Dropdown elements   -----  */
/* Dropdown menu background */
.dropdown-menu {
  background-color: rgba(0, 0, 0, 0.600); /* Dark colour, with lowered opacity */
}

/* Dropdown menu item text colour */
.dropdown-item {
  color: rgb(230, 230, 230);
  font-weight: lighter;
  transition: all 0.2s ease;
}

/* Dropdown menu item hover effect */
.dropdown-item:hover {
  background-color: rgba(196, 155, 32, 0.733);
  color: #ffffff;
}

/* Modal: Gallery CSS */
    .modal-content {
    background-color: rgba(0, 0, 0, 0.877);
    border-radius: 1rem;
    border-color:#ffffff;
    color:rgb(255, 255, 255);
    }

    .modal-footer {
    justify-content: flex-end;
    }

    .gallery-title {
    font-weight: 600;
    text-align: center;
    margin-bottom: 0.5rem;
    }

    .gallery-img {
    cursor: pointer;
    transition: transform 0.2s ease;
    }

    .gallery-img:hover {
    transform: scale(1.03);
    }

/* TECH GALLERY STYLES */
.gallery-title-overlay {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-container:hover .gallery-title-overlay {
  opacity: 1;
}

/* CIVIL RANKS TABLES */
.table_custom {
  --bs-table-bg: transparent !important;
}


/*  ---- Notes   -----  */

/* White setup: body background #ffffff
                card background #1b1b1b
                Comment: Needs card borders, but has potential

   Grey setup:  body background #131313
                card background #0a0a0a
                Comment: Snazzy 

  Black setup:  body background #0a0a0a
                card background #131313
                Comment: Snazziest