/* =====================================================
   LIP THEME COLORS
   Main file to customize site colors
===================================================== */
:root {
  /* Site Colors */
  --site-primary: #600000;
  --site-primary-dark: #450000;
  --site-secondary: #0D213A;
  --site-accent: #1372BA;
  --site-light: #EBF3FA;

  /* Cards */
  --card-outer-bg: rgba(19,114,186,.30);
  --card-inner-bg: #ffffff;

  /* Banner/Footer */
  --banner-overlay: rgba(13,33,58,.70);
  --footer-bg: #0D213A;
  --copyright-bg: #04162C;

  /* ==========================
     Navigation
     ========================== */
--nav-bg: #ffffff;
--nav-text: #000000;
--nav-hover: #600000;
--nav-active: #600000;

--nav-dropdown-bg: #ffffff;
--nav-dropdown-text: #000000;
--nav-dropdown-hover-bg: #f7eeee;
--nav-dropdown-hover-text: #600000;

--nav-toggler-color: #600000;

/* Secondary Menu */
--secondary-nav-bg: #0D213A;
--secondary-nav-text: #ffffff;
--secondary-nav-hover-bg: #1372BA;
--secondary-nav-hover-text: #ffffff;
--secondary-nav-active-bg: #600000;
--secondary-nav-active-text: #ffffff;
--secondary-nav-dropdown-bg: #ffffff;
--secondary-nav-dropdown-text: #0D213A;
--secondary-nav-dropdown-hover-bg: #EBF3FA;
--secondary-nav-dropdown-hover-text: #600000;
--secondary-nav-border: #1372BA;
--secondary-nav-toggler-color: #ffffff;
}

/* General */
body {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: #333;
  background: #fff;
  overflow-x: hidden;
}

a {
  color: var(--site-accent);
  text-decoration: none;
}

a:hover {
  color: var(--site-primary);
}

/* Header / navbar */

.topbar {
  background: var(--site-primary);
  color: #fff;
}

.topbar a {
  color: #fff;
}

/* =====================================================
   MAIN NAVIGATION
===================================================== */

.navbar {
    background: var(--nav-bg) !important;
}

.navbar-brand {
    color: var(--nav-text) !important;
}

.navbar-brand img {
    max-width: 100%;
    height: 80px;
}

.navbar .nav-link {
    color: var(--nav-text) !important;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 32px 12px !important;

    border-bottom: 4px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--nav-hover) !important;
}

.navbar .nav-link.active {
    color: var(--nav-active) !important;
    border-bottom-color: var(--nav-active);
}

.navbar .show > .nav-link {
    color: var(--nav-active) !important;
    border-bottom-color: transparent;
}

/* Dropdown menu */
.navbar .dropdown-menu {
  background: var(--nav-dropdown-bg);
}

.navbar .dropdown-item {
  color: var(--nav-dropdown-text);
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background: var(--nav-dropdown-hover-bg);
  color: var(--nav-dropdown-hover-text);
}

/* Secondary menu */
.lip-secondary-nav {
  background: var(--secondary-nav-bg) !important;
  border-top: 1px solid var(--secondary-nav-border);
  border-bottom: 1px solid var(--secondary-nav-border);
  min-height: 46px;
}

.lip-secondary-nav .container-fluid {
  align-items: stretch;
}

.lip-secondary-nav .lip-secondary-nav-title,
.lip-secondary-nav .nav-link {
  color: var(--secondary-nav-text) !important;
}

.lip-secondary-nav .lip-secondary-nav-title {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  padding: 10px 14px 10px 0;
  text-transform: uppercase;
}

.lip-secondary-nav .nav-link {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  min-height: 44px;
  padding: 10px 14px !important;
  text-transform: uppercase;
}

.lip-secondary-nav .nav-link:hover,
.lip-secondary-nav .nav-link:focus {
  background: var(--secondary-nav-hover-bg);
  color: var(--secondary-nav-hover-text) !important;
}

.lip-secondary-nav .nav-link.active,
.lip-secondary-nav .show > .nav-link {
  background: var(--secondary-nav-active-bg);
  border-bottom: 0;
  color: var(--secondary-nav-active-text) !important;
}

.lip-secondary-nav .dropdown-menu {
  background: var(--secondary-nav-dropdown-bg);
  border-radius: 6px;
  margin-top: 0;
}

.lip-secondary-nav .dropdown-item {
  color: var(--secondary-nav-dropdown-text);
  font-size: 14px;
}

.lip-secondary-nav .dropdown-item:hover,
.lip-secondary-nav .dropdown-item:focus {
  background: var(--secondary-nav-dropdown-hover-bg);
  color: var(--secondary-nav-dropdown-hover-text);
}

.lip-secondary-nav .dropdown-item.active,
.lip-secondary-nav .dropdown-item:active {
  background: var(--secondary-nav-active-bg);
  color: var(--secondary-nav-active-text);
}

.lip-secondary-nav-toggler {
  border: 0;
  box-shadow: none !important;
}

.lip-secondary-nav-toggler .bi-list {
  color: var(--secondary-nav-toggler-color);
  font-size: 1.8rem;
}





/* Banner */
.inner_banner {
  position: relative;
  background: url(../images/inner_banner.jpg) no-repeat 0 0 / cover;
  z-index: 0;
  overflow: hidden;
}

.inner_banner::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  width: 100%;
  height: 100%;
  background: var(--banner-overlay);
  z-index: -1;
}

.inner_banner h1 {
  position: relative;
}

.inner_banner h1::after {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 0;
  right: 0;
  margin: auto;
  width: 90px;
  height: 4px;
  display: inline-block;
  background: #fff;
}

/* Page backgrounds */
.blue_light_bg {
  background: var(--site-light);
}

/* Main card layout */
.request_access .card {
  background: var(--card-outer-bg);
  box-shadow: 0 0 4px 4px #d8e4ee;
  border: none;
  border-radius: 6px;
  position: relative;
  margin-top: 15px;
  height: calc(100% - 15px);
  width: calc(100% - 15px);
}

.request_access .card .card-body {
  background: var(--card-inner-bg);
  overflow: hidden;
  border-radius: 6px;
  left: 15px;
  top: -15px;
  display: block;
  position: relative;
  padding: 30px;
}

/* Headings */
.heading_blue {
  color: var(--site-secondary);
  position: relative;
}

.heading_blue::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 0;
  width: 90px;
  height: 4px;
  display: inline-block;
  background: var(--site-secondary);
}


.login-form-wrap {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
}

/* Forms / login */
.login_section {
  box-sizing: border-box;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.login_section .form-control,
.login_section .form-select {
  height: 46px;
  border-radius: 4px !important;
  font-size: 16px;
  border: solid 1px #ccc;
  padding-left: 40px;
}

.login_section .user_icon,
.login_section .show_pass {
  color: var(--site-secondary);
}

.login_section .user_icon {
  position: absolute;
  bottom: 12px;
  left: 22px;
  z-index: 9;
  font-size: 20px;
}

.login_section .show_pass {
  position: absolute;
  bottom: 11px;
  right: 22px;
  z-index: 9;
  font-size: 20px;
}

.form-control:focus {
  border: solid 1px var(--site-accent) !important;
  box-shadow: none;
}

.form-check-input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 1px solid var(--site-accent);
}

.form-check-input:checked {
  background-color: var(--site-accent);
  border-color: var(--site-accent);
}

/* Buttons */
.btn_login,
.search_btn,
.btn_orange,
.btn-primary,
.btn-success,
.btn-info {
  background-color: var(--site-primary) !important;
  border-color: var(--site-primary) !important;
  color: #fff !important;
}

.btn_login:hover,
.search_btn:hover,
.btn_orange:hover,
.btn-primary:hover,
.btn-success:hover,
.btn-info:hover {
  background-color: var(--site-primary-dark) !important;
  border-color: var(--site-primary-dark) !important;
  color: #fff !important;
}

/* My Account links */
.custom-nav-link {
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem !important;
  margin-bottom: 0.5rem;
  background-color: #f8f9fa;
  transition: all 0.2s ease-in-out;
  color: #212529 !important;
}

.custom-nav-link:hover,
.custom-nav-link.active {
  background-color: var(--site-primary) !important;
  border-color: var(--site-primary) !important;
  color: #fff !important;
  text-decoration: none;
}

.custom-nav-link:hover small,
.custom-nav-link.active small {
  color: #fff !important;
}

/* Footer */
footer {
  width: 100%;
  background: var(--footer-bg);
}

footer h4,
footer p,
footer ul li,
footer ul li a {
  color: #fff;
}

footer h4 {
  margin-bottom: 40px;
  position: relative;
}

footer h4::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 90px;
  height: 4px;
  border-radius: 100px;
  display: inline-block;
  background: #fff;
}

.copyright {
  color: #fff;
  font-size: 14px;
  padding: 5px 0 0;
  background: var(--copyright-bg);
}

/* Helpers */
.font13 { font-size: 13px; }
.font14 { font-size: 14px; }
.text_light { color: #666; }
.red_text { color: var(--site-primary); }
.dark_blue_text { color: var(--site-secondary); }

/* Mobile */
@media (max-width: 768px) {
  body {
    font-size: 18px;
  }

  .navbar-nav .nav-link {
    font-size: 16px !important;
  }

  h1 {
    font-size: 28px !important;
  }

  h2 {
    font-size: 24px !important;
  }

  p,
  a,
  li {
    font-size: 18px !important;
  }
}

/* Mobile menu toggle */
.lip-nav-toggler {
    background: transparent !important;
    border: 0 !important;
    padding: .15rem .35rem;
    line-height: 1;
    box-shadow: none !important;
}

.lip-nav-toggler:focus,
.lip-nav-toggler:active {
    outline: none;
    box-shadow: none !important;
}

.lip-nav-toggler .bi-list {
    color: var(--nav-toggler-color);
    font-size: 2.4rem;
    line-height: 1;
}

/* Desktop-mode navbar: keep everything visible and left aligned */
.lip-desktop-nav > .container-fluid {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.lip-desktop-nav .navbar-collapse,
.lip-desktop-nav #navbarScroll {
  flex-grow: 0;
}

.lip-desktop-nav .navbar-nav {
  margin-left: 0 !important;
  margin-right: auto !important;
}