body {
  display: none;
}

section {
  max-width: 900px !important;
}


/* Bootstrap Color Overrides */
:root {
  --bs-primary: #BA2221;
  --bs-primary-rgb: 186, 34, 33;

  --bs-secondary: #76A0AA;
  --bs-secondary-rgb: 118, 160, 170;

  --bs-dark: #0C0D0E;
  --bs-dark-rgb: 12, 13, 14;

  --bs-light: #F4F4F4;
  --bs-light-rgb: 244, 244, 244;

  --bs-info: #76A0AA;
  --bs-info-rgb: 118, 160, 170;

  --bs-success: #4fa58a;
  --bs-success-rgb: 79, 165, 138;

  --bs-warning: #E6B566;
  --bs-warning-rgb: 230, 181, 102;

  --bs-danger: #BA2221;
  --bs-danger-rgb: 186, 34, 33;
}

/* Optional button hover overrides */
.btn-primary:hover {
  background-color: #9e1d1d;
  border-color: #9e1d1d;
}

.btn-secondary:hover {
  background-color: #648c95;
  border-color: #648c95;
}


.btn-primary {
  --bs-btn-bg: #BA2221;
  --bs-btn-border-color: #BA2221;
  --bs-btn-hover-bg: #B8112D;
  --bs-btn-hover-border-color: #B8112D;
  --bs-btn-active-bg: #9E0F26;
  --bs-btn-active-border-color: #9E0F26;
  --bs-btn-disabled-bg: #BA2221;
  --bs-btn-disabled-border-color: #BA2221;
}

.btn-success {
  --bs-btn-bg: #0C0D0E;
  --bs-btn-border-color: #0C0D0E;
  --bs-btn-hover-bg: #23272B;
  --bs-btn-hover-border-color: #23272B;
  --bs-btn-active-bg: #1A1D20;
  --bs-btn-active-border-color: #1A1D20;
  --bs-btn-disabled-bg: #0C0D0E;
  --bs-btn-disabled-border-color: #0C0D0E;
}

.bg-primary {
  background-color: #BA2221 !important;
}

.bg-success {
  background-color: #0C0D0E !important;
}

.text-primary {
  color: #BA2221 !important;
}

.text-success {
  color: #0C0D0E !important;
}

.border-primary {
  border-color: #BA2221 !important;
}

.border-success {
  border-color: #0C0D0E !important;
}

#btn-login {
  background-color: #BA2221 !important;
  border-color: #BA2221 !important;
  color: white !important;
}

#btn-login:hover {
  background-color: #B8112D !important;
  border-color: #B8112D !important;
}

#btn-register {
  background-color: #0C0D0E !important;
  border-color: #0C0D0E !important;
  color: white !important;
}

#btn-register:hover {
  background-color: #23272B !important;
  border-color: #23272B !important;
}

.welcome {
    position: relative; /* Constrains ::before to this section */
    background-image: url('/img/bg.webp');
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
    overflow: hidden;
  }

.welcome::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0; /* stays within parent bounds */
    background: rgba(241, 243, 245, 0.7);
    z-index: 0; /* under content */
}

.welcome > * {
    position: relative;
    z-index: 1; /* ensures content is above the overlay */
}

.hero-text {
  display: inline-block;
  backdrop-filter: blur(4px); /* optional: glassy effect */
}
 
.dropdown-menu {
  position: absolute !important; /* Prevent it from taking up space in layout */
  top: 100%; /* Align below the toggle */
  z-index: 1000;
}

.card {
  margin-left: auto;
  margin-right: auto;
}


#button-container {
  position: relative;
  z-index: 2;
}
/* Responsive tweaks for industry cards on small screens */

.industry-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.industry-card .industry-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: height 200ms ease;
}

.industry-card .card-title {
  font-size: 1rem;
  line-height: 1.1;
  transition: font-size 200ms ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
      
.industry-card .card-body {
  padding: 0 !important;
}

.industry-card:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

#btnCategoryBack {
  margin-bottom: 10px;
}

.toggle-btn[aria-expanded="true"] i {
  transform: rotate(45deg); /* turns plus into an 'x' */
}

.toggle-btn i {
  transition: transform 0.2s ease;
}

.multiSelectList {
    font-family: sans-serif;
    padding: 10px;
    border: 1px solid #ccc;
    width: 100%;
    overflow-y: auto;    /* enables vertical scroll */
    text-align: left;
}

.multiSelectList label:hover {
    background: #f8f8f8;
}

.select-match {
    height: calc(100% - 0px); /* Adjust if needed */
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.demand-header {
  max-width: 1316px !important;
  width: 100%;
  background-color: #ccc;
}

#demandAccordion .card {
  max-width: 900px !important; /* or any width you want */
  width: 100% !important;       /* take full accordion width */
  text-align:left;
}


.navbar {
  min-height: 80px;
}

.navbar-brand {
  background-image: url("/img/logo-sm.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 160px;
  height: 43px;
  cursor: pointer;
}

.page-link {cursor: pointer;}

button:disabled {
  background-color: #ddd !important; /* Light gray */
  color: #666 !important;            /* Darker text */
  border-color: #bbb !important;     /* Matching border */
}

#globalModal .modal-footer {
  border-top: none;
  background: transparent;  /* optional, makes it blend with body */
}

#imgView {
  max-width: 100%;
  max-height: 80vh; /* Ensures it fits within viewport height */
  width: auto;
  height: auto;
  object-fit: contain; /* Maintains aspect ratio */
}


/* Reduce image height and title size on very small screens to avoid overlap */
      @media (max-width: 576px) {
        
        .industry-card .industry-bg {
          height: 96px; /* smaller image to create room */
          background-size: cover;
        }
        .industry-card .card-title {
          font-size: 0.85rem;
        }
        .industry-box {
          padding-left: 4px;
          padding-right: 4px;
        }
      }

      /* VERY SMALL SCREENS (iPhone SE and similar) - keep two cards per row */
      @media (max-width: 375px) {
        /* Slightly larger gutters so two cards breathe on narrow phones */
        .row.g-3 {
          --bs-gutter-x: 0.80rem; /* horizontal gap between columns */
          --bs-gutter-y: 0.80rem; /* vertical gap between rows */
        }

        /* Reduce image height and allow title to wrap to two lines */
        .industry-card .industry-bg {
          height: 64px !important;
        }

        .industry-card .card-title {
          font-size: 0.72rem !important;
          white-space: normal !important;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        /* Tighter paddings so content fits */
        .industry-card .card-body {
          padding-top: 0.25rem;
          padding-bottom: 0.25rem;
        }

        .industry-box {
          padding-left: 4px;
          padding-right: 4px;
        }
      }

      /* EXTRA SMALL: very narrow phones (<=320px) */
      @media (max-width: 320px) {
        .industry-card .industry-bg { height: 64px !important; }
        .industry-card .card-title { font-size: 0.7rem !important; }
        .industry-box { margin-bottom: 0.4rem; }
      }

      /* Slightly larger but still constrained on small tablets */
      @media (min-width: 577px) and (max-width: 768px) {
        .industry-card .industry-bg { height: 120px; }
        .industry-card .card-title { font-size: 0.95rem; }
      }