html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.sg{
  scrollbar-gutter: stable;
}

body {
  padding-top: 72px;
}

.dropdown-menu .active .bi {
  display: block !important;
}

.bi {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
}

html[data-bs-theme="light"] {
  .navbar,.darkbg {
    background-color: var(--bs-primary) !important; /* Ensures primary color is applied */
    color: var(--bs-dark) !important; /* Adjust text color for readability if needed */
  }
  .nav-offside-primary-bg {
    background-color: var(--bs-primary) !important; /* Ensures primary color is applied */
    color: var(--bs-white) !important; /* Adjust text color for readability if needed */
  }
  .spcx-logo-light {
    display: block;
  }
  .spcx-logo-dark {
    display: none;
  }
  .navbar-nav-svg {
    fill: var(--bs-white) !important; /* Black for light mode */
    color: var(--bs-white) !important; /* Adjust text color for readability if needed */
  }
  .darkbg{
    background-color: #faf9f9 !important;
  }
}
html[data-bs-theme="dark"] {
  .navbar {
    background-color: var(--bs-body-bg) !important; /* Ensures primary color is applied */
    color: var(--bs-white) !important; /* Adjust text color for readability if needed */
  }
  .spcx-logo-dark {
    display: block;
  }
  .spcx-logo-light {
    display: none;
  }
  .navbar-nav-svg {
    fill: var(--bs-white) !important; /* Black for light mode */
    color: var(--bs-white) !important; /* Adjust text color for readability if needed */
  }

  .bg-primary {
    background-color: var(--bs-body-bg) !important; 
  }

}

.feature-icon-small {
    width: 3rem;
    height: 3rem;
}

.feature-icon {
    width: 4rem;
    height: 4rem;
    border-radius: .75rem;
}