/* ===========================
   NorthForge Custom Colors
   custom.css
   =========================== */

/* Bootstrap 5 CSS Variables Override */
:root,
[data-bs-theme="light"] {
  /* Main Brand Palette */
  --bs-primary:     #3c455c;  /* dark blue */
  --bs-secondary:   #9aacb8;  /* light grey/blue */
  --bs-success:     #b37c57;  /* light brown */
  --bs-info:        #9aacb8;  /* reusing light grey/blue */
  --bs-warning:     #b37c57;  /* light brown */
  --bs-danger:      #60412b;  /* dark brown */
  --bs-light:       #dde2e3;  /* light grey */
  --bs-dark:        #3c455c;  /* dark blue */
  --bs-body-bg:     #dde2e3;  /* overall background */
  --bs-body-color:  #3c455c;  /* main text color (choose dark) */
  --bs-link-color:  #3c455c;
  --bs-link-hover-color: #b37c57;

  /* Grays updated for nuanced backgrounds/borders */
  --bs-gray-100: #dde2e3;       /* lightest */
  --bs-gray-200: #c3cace;
  --bs-gray-300: #bfcad3;
  --bs-gray-400: #b0bbc3;
  --bs-gray-500: #9aacb8;
  --bs-gray-600: #7e8b99;
  --bs-gray-700: #5e6d7b;
  --bs-gray-800: #3c455c;       /* also main dark */
  --bs-gray-900: #22282e;

  /* Special Browns */
  --bs-brown:     #b37c57;
  --bs-dark-brown: #60412b;

  /* For buttons, alerts, subtle backgrounds, etc */
  --bs-border-color: #9aacb8;

  /* Headings */
  --bs-heading-color: #3c455c;
}

.btn-primary {
  background-color: #3c455c !important;
  border-color: #3c455c !important;
}
.text-primary {
  color: #3c455c !important;
}

.video-wrapper.bg-overlay.bg-overlay-gradient:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.62; /* ensures strong contrast over video but keeps some motion visible */
    background: linear-gradient(
        120deg,
        rgba(60, 69, 92, 0.82) 55%,   /* #3c455c with higher opacity */
        rgba(154, 172, 184, 0.64) 100%  /* #9aacb8 light blue/grey tone */
    );
}

.footer.bg-dark, footer.bg-dark {
    background: #3c455c !important;
}

/* Make GLightbox modal video responsive and clean on mobile */
.glightbox-container .gvideo-container,
.glightbox-container .gslide-video,
.glightbox-container .gslide-media {
  max-width: 360px;
  height: auto !important;
  max-height: 80vh;
  margin: 0 auto !important;
  display: block;
  /* Remove width: 100% !important; and display: flex from earlier example */
}
@media (max-width: 575.98px) {
  .glightbox-container .gvideo-container,
  .glightbox-container .gslide-video,
  .glightbox-container .gslide-media {
    max-width: 83.9vw !important;
    max-height: 70vh !important;
    width: auto !important;
  }
}

.glightbox-container {
    background: rgba(221, 226, 227, 0.95) !important;
}

.footer-link:hover
 {
    color: #fff !important;
}

/* End custom.css */