/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--bs-body-font-family);
  }
  html {
  font-family: sans-serif;
  text-size-adjust: 100%;
  }
   body {
  background: #f5f5f5;
  color: #4c4d4d;
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  line-height: 22px;
  /* No bottom clearance. This 60px existed to keep content out from under the
     position:fixed footer; now that the footer sits in the flow, it was 60px
     of empty page BELOW the footer -- the footer stopped being the last thing
     you saw. The chat widget is fixed and overlays, so it needs none either. */
  }
    /* ===== Brand color palette (unified navy theme) ===== */
    :root {
      --brand-navy:       #6d3fd1;
      --brand-navy-dark:  #2e1a5c;
      /* Was #8b5cf6. Every primary button is a navy->light-navy gradient,
         so white 12-14px label text sits on the LIGHT end: 4.17:1, under
         the 4.5 body-text bar. #8b5cf6 is the same blue one step down and
         takes it to 5.01:1. */
      --brand-navy-light: #8b5cf6;
      --brand-accent:     #36C2A2;
    }

    /* Sidebar */
    .sidebar {
      width: 240px;
      background: linear-gradient(180deg, #6d3fd1 0%, #2e1a5c 55%, #1f1440 100%);
      color: #fff;
      height: 100vh;
      position: fixed;
      left: 0;
      top: 0;
      padding: 10px 0 0;
      z-index: 1;
      overflow-y: auto;
      overflow-x: hidden;
      box-shadow: 2px 0 18px rgba(12, 49, 96, 0.25);

  /* hide scrollbar cross-browser */
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE/Edge */
    }
    .sidebar::-webkit-scrollbar {
      display: none;  /* Chrome, Safari, Opera */
    }

    .sidebar .navbar-brand {
      text-align: center;
      margin-bottom: 18px;
      display: block;
    }

    .sidebar .navbar-brand img {
        width: 78%;
        margin-left: 6px;
        filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
    }

    .sidebar hr {
      border: 0;
      height: 1px;
      margin: 0 22px 16px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
      opacity: 1;
    }

    .sidebar ul {
      list-style: none;
      padding: 0 12px;
    }

    .sidebar ul li {
      margin: 2px 0;
    }

    .sidebar ul li a {
      color: rgba(255, 255, 255, 0.82);
      text-decoration: none;
      padding: 11px 16px;
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.2px;
      border-radius: 10px;
      position: relative;
      transition: background 0.25s ease, color 0.25s ease, transform 0.15s ease;
    }

    .sidebar ul li a i {
      width: 22px;
      margin-right: 12px;
      text-align: center;
      font-size: 15px;
      opacity: 0.9;
      transition: transform 0.2s ease;
    }

    /* No transform on hover. Nudging the row sideways and scaling its icon
       makes a 14-item column twitch as the pointer travels down it; the
       background change already says "this one". */
    .sidebar ul li a:hover {
      background: rgba(255, 255, 255, 0.10);
      color: #fff;
    }

    .sidebar ul li a:hover i {
      color: var(--brand-accent);
      opacity: 1;
    }

    .sidebar ul li a.active {
      background: linear-gradient(90deg, rgba(54, 194, 162, 0.22), rgba(255, 255, 255, 0.06));
      color: #fff;
      font-weight: 600;
      box-shadow: inset 3px 0 0 var(--brand-accent), 0 4px 12px rgba(0, 0, 0, 0.12);
    }

    .sidebar ul li a.active i {
      color: var(--brand-accent);
      opacity: 1;
    }

    /* Main content */
    .main-content {
    margin-left: 245px;
    padding: 4px;
    width: calc(100% - 253px);
    }

    .topbar {
    background: #fff;
    padding: 0px 18px 13px 19px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    font-weight: 500;
}

    .topbar h2,
    .topbar h4 {
      color: #6d3fd1;
    }

    .topbar .user {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .topbar .user img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }

    /* Dashboard cards */
    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 20px;
    }

    .card {
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .card h3 {
      font-size: 18px;
      color: #6d3fd1;
      margin-bottom: 10px;
    }

    .card p {
      font-size: 14px;
      color: #555;
    }

    .card .value {
      font-size: 24px;
      font-weight: bold;
      color: #6d3fd1;
    }




    .card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}
.card-header1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #e0e0e0;
}
.card-body {
  padding: 16px;
}
.investment-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chart-legend {
  list-style: none;
  padding: 0;
  margin-top: 15px;
  display: flex;
}
.chart-legend li {
  display: flex;
  align-items: center;
  margin-right: 15px;
  font-size: 0.9em;
}
.legend-color-box {
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border-radius: 2px;
}
.view-more-button {
  display: inline-block;
  padding: 8px 16px;
  /* background-image: linear-gradient(to right, #8b5cf6, #5b32b8); */
  background: linear-gradient(to right, #6d3fd1, #8b5cf6) !important;
  color: white;
  border: none;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.9em;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(109, 63, 209, 0.25);
  transition: background 0.3s, box-shadow 0.3s, transform 0.15s;
  float: inline-end;
}
.clr-icn-tbl {
  color: #6d3fd1;
}
.view-more-button:hover {
  background: linear-gradient(to right, #2e1a5c, #6d3fd1) !important;
  color: #fff;
  box-shadow: 0 4px 12px rgba(109, 63, 209, 0.35);
  transform: translateY(-1px);
}

.rest-button {
    display: inline-block;
    padding: 7px 16px;
    /* background-color: #6d3fd1; */
    color: #6d3fd1;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    border: 1px solid #6d3fd1;
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.3s;
    float: right;
    margin: 2px;
    background: none;
}
.dashboard-opt {
  display: grid;
  grid-template-columns: repeat(2, 318px);
  gap: 0px;
}
.card-opt {
  background-color: #ffffff;
  /* border-radius: 8px; */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  transition: transform 0.2s;
  cursor: pointer;
  border: 1px solid #f5f5f5;
}
.card-opt:hover {
  transform: scale(1.05);
}
.icon {
  font-size: 24px;
  margin-bottom: 10px;
}
.value {
  font-size: 28px;
  font-weight: bold;
  color: #333;
}
.label {
  font-size: 14px;
  color: #666;
}
.percentage {
  font-size: 12px;
  margin-top: 5px;
}
.percentage.up {
  color: #4caf50;
}
#views .icon { color: #8e44ad; }
#bugs .icon { color: #3498db; }
#reports .icon { color: #e74c3c; }
#profiles .icon { color: #2ecc71; } 
.chart-card {
  display: flex;
  flex-direction: column;
  align-items: center;  /* Center horizontally */
  justify-content: center; /* Center vertically if parent allows */
  text-align: center;
  width: 100%;
}
/* Header styling */
.chart-header {
  font-size: 1.5em;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}
.bg-gradient-incomp {
  background-image: linear-gradient(159deg,#f68686,#e81a1a);
}
.chart-container {
  width: 500px;   /* Fixed width */
  height: 300px;  /* Fixed height */
  margin: auto;   /* Center it */
}

.chart-container canvas {
  width: 100% !important;  
  height: 100% !important;
}
.incmchrt {
    display: block;
    box-sizing: border-box;
    height: 250px;
    width: 200px;
}
.table tr, .table th, {
    border-color: inherit;
    border-width: inherit;
    border-style: inherit;
    text-transform: inherit;
    font-weight: 700;
    font-size: 13px;
    color: #333;
    height: inherit;
    min-height: inherit;
}
tbody td {
    border-color: inherit;
    border-width: inherit;
    border-style: inherit;
    text-transform: inherit;
    font-weight: 500;
    font-size: 13px;
    color: #333 !important;
    height: inherit;
    min-height: inherit;
}
.dblue {
    color: #2e1a5c !important;
}
.green {
    color: #00bc05 !important;
}
.red {
    color: #ff0000;
}
.page-title {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 0px 11px 0px 11px;
}
.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: 1px solid #c5c5c5;
    border-radius: 5px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.btm-bdr {
  border-bottom:1px solid #dee2e6;
}
.ibox-title {
   background: linear-gradient(90deg, #6d3fd1 0%, #7c4ddb 100%);
    color: #ffffff;
    padding: 14px 15px;
    margin-bottom: 0;
    border-radius: 6px 6px 0 0;
}
.ibox-title {
    padding: 10px 15px 7px !important;
    min-height: 46px !important;
}
.ibox-content-editpro {
    background-color: #ffffff;
    color: inherit;
    padding: 15px 20px 10px 20px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0;
    height: auto;
    border: 1px solid #d7d7d7;
    border-radius: 0px 0px 5px 5px;
}
.back-more-button {
    background: #6c757d;
    display: inline-block;
    padding: 8px 16px;
    color: white;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9em;
    cursor: pointer;
    transition: background 0.3s, transform 0.15s;
    float: inline-end;
}

.back-more-button:hover {
    background: #565e64;
    color: #fff;
    transform: translateY(-1px);
}

.profile-banner {
    background-image: linear-gradient(to right, #6d3fd1, #8b5cf6);
    height: 175px;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 12px 12px 0px 0px;
}
.tab1 button.active {
    background: #fff;
    border-bottom: 3px solid #ff6f61;
    font-weight: bold;
    width: 100%;
    text-align: left;
}
.tab1 .tablinks {
      flex: 1;
      padding: 12px 15px;
      cursor: pointer;
      border: none;
      outline: none;
      font-size: 15px;
      background: #120c64;
      transition: 0.3s;
      width: 100%;
      text-align: left;
      color: black;
    }
    .tab1 .tablinks:hover {
      background: #f1f1f1;
    }
    .tab1 .tablinks.active {
      background: #fff;
      background: #e4dbfc;
      border-bottom: 3px solid #7c4ddb;
      font-weight: bold;
      color: #7c4ddb;
    }

    /* Tab Content */
    .tabcontent {
      display: none;
      padding: 20px;
      background: #fff;
      border: 1px solid #ccc;
      border-top: none;
    }
    .tabcontent.active {
      display: block;
    }
.rounded1 {
    border-radius: 3.25rem !important;
}

 
.profile-thumb-edit {
    position: absolute;
    /* bottom: 5px; */
    /* right: 5px; */
    background: #7c4ddb;
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: 56px;
    margin-top: 44px;
}

.profile-thumb-edit i {
  font-size: 13px;
  color: #fff;
}

.profile-thumb-edit input[type="file"] {
  position: absolute;
  inset: 0; /* covers the whole circle */
  opacity: 0;
  cursor: pointer;
}

input[type="file"] {
    display: block;
}
.custom-file-input {
    cursor: pointer;
    position: relative;
    z-index: 2;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    margin: 0;
    opacity: 0;
}
.btn-blue {
    background-color: #02afe8;
    border-color: #02afe8;
}

.btn-link {
background-image: linear-gradient(to right, #8b5cf6, #5b32b8);
color: white;
}
.btn-link:hover{
color:white;
background: #8b5cf6;
}
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    color:white;
    background: #8b5cf6;
}
.btn-sbmt1 {
    background: #7c4ddb;
    color: #fff;
    border-radius: 2px;
    border: 1px solid #7c4ddb;
    padding: 5px 10px;
    font-size: 12px;
}
.btn-sbmt1:hover {
    background: #8b5cf6;
    color:  white;
}
.tablinks {
    background: #292929;
    color: #ffffff;
    border: navajowhite;
    font-size: 13px;
    padding: 6px;
    border-radius: 4px 4px 0px 0px;
}
.ibox-content {
    background-color: #ffffff;
    color: inherit;
    padding: 15px 20px 10px 20px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0;
    height: 238px;
    border: 1px solid #d7d7d7;
    border-radius: 0px 0px 5px 5px;
}
.ibox-content-ip {
    background-color: #ffffff;
    color: inherit;
    padding: 15px 20px 10px 20px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0;
    height: auto;
    border: 1px solid #d7d7d7;
    border-radius: 0px 0px 5px 5px;
}
.ibox-content-cre {
    background-color: #ffffff;
    color: inherit;
    padding: 15px 20px 10px 20px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0;
    height: auto;
    border: 1px solid #d7d7d7;
    border-radius: 0px 0px 5px 5px;
}
.ibox-content1 {
    background-color: #ffffff;
    color: inherit;
    padding: 15px 20px 10px 20px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0;
    height: auto;
    border: 1px solid #d7d7d7;
    border-radius: 0px 0px 5px 5px;
}

/* =================================== */
/*  Header
/* =================================== */
#header {
  background-image: linear-gradient(to left, #1081ad, #00b6bf);
  border-radius: 8px;
  width: 100%;
  margin: 2px 0px 0px 7px;
  margin-left: 0px;
}

#header .navbar {
  padding: 20px 0px;
}

#header.bg-transparent {
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  box-shadow: none;
  border-bottom: 1px solid rgba(250, 250, 250, 0.3);
}

#header .logo {
  position: relative;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-item-align: stretch;
  align-self: stretch;
}

#header .header-row {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  max-height: 100%;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-item-align: stretch;
  align-self: stretch;
}

#header .header-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-item-align: stretch;
  align-self: stretch;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

#header .header-column .header-row {
  -webkit-box-pack: inherit;
  -ms-flex-pack: inherit;
  justify-content: inherit;
}

.navbar-light .navbar-nav .active > .nav-link {
  color: #1f1440;
}

.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show {
  color: #1f1440;
}

.navbar-light .navbar-nav .show > .nav-link {
  color: #1f1440;
}

.primary-menu, .login-signup {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  height: auto !important;
  -webkit-box-ordinal-group: 0;
  -ms-flex-item-align: stretch;
  align-self: stretch;
}

.primary-menu.navbar, .login-signup.navbar {
  position: inherit;
}

.primary-menu ul.navbar-nav > li, .login-signup ul.navbar-nav > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
}

.primary-menu ul.navbar-nav > li > a:not(.btn), .login-signup ul.navbar-nav > li > a:not(.btn) {
  height: 50px;
  *height: 80px;
  padding-left: 0.85em;
  padding-right: 0.85em;
  color: #4c4d4d;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  position: relative;
  text-transform: uppercase;
  font-weight: 400;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.primary-menu ul.navbar-nav > li:hover > a:not(.btn), .primary-menu ul.navbar-nav > li.active > a:not(.btn), .login-signup ul.navbar-nav > li:hover > a:not(.btn), .login-signup ul.navbar-nav > li.active > a:not(.btn) {
  color: #00b6bf;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.primary-menu ul.navbar-nav > li.dropdown .dropdown-menu li > a:not(.btn), .login-signup ul.navbar-nav > li.dropdown .dropdown-menu li > a:not(.btn) {
  padding: 8px 0px;
  background-color: transparent;
  color: #777;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.primary-menu ul.navbar-nav > li.dropdown .dropdown-menu li > a:not(.btn) > i:not(.arrow), .login-signup ul.navbar-nav > li.dropdown .dropdown-menu li > a:not(.btn) > i:not(.arrow) {
  font-size: .875rem;
  width: 18px;
  text-align: center;
  margin-right: 7px;
}

.primary-menu ul.navbar-nav > li.dropdown .dropdown-menu li:hover > a:not(.btn), .login-signup ul.navbar-nav > li.dropdown .dropdown-menu li:hover > a:not(.btn) {
  color: #00b6bf;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.primary-menu ul.navbar-nav > li.dropdown:hover > a:after, .login-signup ul.navbar-nav > li.dropdown:hover > a:after {
  clear: both;
  content: ' ';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
  position: absolute;
  border-width: 0px 7px 6px 7px;
  bottom: 0px;
  left: 50%;
  margin: 0 0 0 -5px;
  z-index: 1022;
}

.primary-menu ul.navbar-nav > li.dropdown .dropdown-menu, .login-signup ul.navbar-nav > li.dropdown .dropdown-menu {
  -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.176);
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.176);
  border: 0px none;
  padding: 10px 15px;
  min-width: 230px;
  margin: 0;
  font-size: 14px;
  font-size: 0.875rem;
  z-index: 1021;
  top: 100%;
  left: 0;
}

/* Ensure dropdown menus open on hover (same as admin portal) */
.primary-menu ul.navbar-nav > li.dropdown:hover > .dropdown-menu,
.login-signup ul.navbar-nav > li.dropdown:hover > .dropdown-menu {
    display: block;
}

/* Force dropdowns to overlay instead of pushing layout */
.primary-menu ul.navbar-nav > li.dropdown,
.login-signup ul.navbar-nav > li.dropdown {
  position: relative; /* anchor for absolute child */
}

.primary-menu ul.navbar-nav > li.dropdown .dropdown-menu,
.login-signup ul.navbar-nav > li.dropdown .dropdown-menu {
  position: absolute !important;
  top: 100%;
  left: 0;
  z-index: 9999;
  display: none; /* hidden by default */
}

/* Right-align for profile/notifications */
.login-signup ul.navbar-nav > li.dropdown .dropdown-menu {
  left: auto;
  right: 0;
}

/* Show on hover or when .show is applied by Bootstrap */
.primary-menu ul.navbar-nav > li.dropdown:hover > .dropdown-menu,
.login-signup ul.navbar-nav > li.dropdown:hover > .dropdown-menu,
.primary-menu ul.navbar-nav > li.dropdown.show > .dropdown-menu,
.login-signup ul.navbar-nav > li.dropdown.show > .dropdown-menu {
  display: block;
}

/* Make sure header does not clip dropdown */
#header {
  overflow: visible;
}



.primary-menu ul.navbar-nav > li.dropdown.language .dropdown-menu, .login-signup ul.navbar-nav > li.dropdown.language .dropdown-menu {
  min-width: 140px;
}

.primary-menu ul.navbar-nav > li.dropdown.notifications .dropdown-menu, .login-signup ul.navbar-nav > li.dropdown.notifications .dropdown-menu {
  width: 265px;
}

.primary-menu ul.navbar-nav > li.dropdown.notifications .dropdown-menu li > a:not(.btn), .login-signup ul.navbar-nav > li.dropdown.notifications .dropdown-menu li > a:not(.btn) {
  white-space: normal;
  padding-left: 24px;
  position: relative;
}

.primary-menu ul.navbar-nav > li.dropdown.notifications .dropdown-menu li > a:not(.btn) > i:not(.arrow), .login-signup ul.navbar-nav > li.dropdown.notifications .dropdown-menu li > a:not(.btn) > i:not(.arrow) {
  position: absolute;
  top: 12px;
  left: 0px;
}

.primary-menu .dropdown-menu-end, .login-signup .dropdown-menu-end {
  left: auto !important;
  right: 100% !important;
}

.primary-menu ul.navbar-nav > li.dropdown-mega, .login-signup ul.navbar-nav > li.dropdown-mega {
  position: static;
}

.primary-menu ul.navbar-nav > li.dropdown-mega > .dropdown-menu, .login-signup ul.navbar-nav > li.dropdown-mega > .dropdown-menu {
  width: 100%;
  padding: 20px 20px;
}

.primary-menu ul.navbar-nav > li.dropdown-mega .dropdown-mega-content > .row > div, .login-signup ul.navbar-nav > li.dropdown-mega .dropdown-mega-content > .row > div {
  padding: 5px 5px 5px 20px;
  border-right: 1px solid #eee;
}

.primary-menu ul.navbar-nav > li.dropdown-mega .dropdown-mega-content > .row > div:last-child, .login-signup ul.navbar-nav > li.dropdown-mega .dropdown-mega-content > .row > div:last-child {
  border-right: 0;
}

.primary-menu ul.navbar-nav > li.dropdown-mega .sub-title, .login-signup ul.navbar-nav > li.dropdown-mega .sub-title {
  display: block;
  font-size: 16px;
  margin-top: 1rem;
  padding-bottom: 5px;
}

.primary-menu ul.navbar-nav > li.dropdown-mega .dropdown-mega-submenu, .login-signup ul.navbar-nav > li.dropdown-mega .dropdown-mega-submenu {
  list-style-type: none;
  padding-left: 0px;
}

.primary-menu ul.navbar-nav > li a.btn, .login-signup ul.navbar-nav > li a.btn {
  font-size: 14px;
  padding: 0.65rem 2rem;
  text-transform: uppercase;
}

.primary-menu ul.navbar-nav > li.dropdown .dropdown-menu .dropdown-menu, .login-signup ul.navbar-nav > li.dropdown .dropdown-menu .dropdown-menu {
  left: 100%;
  margin-top: -40px;
}

.primary-menu ul.navbar-nav > li.dropdown .dropdown-menu .dropdown-toggle:after, .login-signup ul.navbar-nav > li.dropdown .dropdown-menu .dropdown-toggle:after {
  border-top: .4em solid transparent;
  border-right: 0;
  border-bottom: 0.4em solid transparent;
  border-left: 0.4em solid;
}

.primary-menu ul.navbar-nav > li.dropdown .dropdown-toggle .arrow, .login-signup ul.navbar-nav > li.dropdown .dropdown-toggle .arrow {
  position: absolute;
  min-width: 30px;
  height: 100%;
  right: 0px;
  top: 0;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.primary-menu ul.navbar-nav > li.dropdown .dropdown-toggle .arrow:after, .login-signup ul.navbar-nav > li.dropdown .dropdown-toggle .arrow:after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  border-color: #000;
  border-top: 1px solid;
  border-right: 1px solid;
  width: 6px;
  height: 6px;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
}

.primary-menu ul.navbar-nav > li.dropdown .dropdown-toggle .arrow.arrow-end:after, .login-signup ul.navbar-nav > li.dropdown .dropdown-toggle .arrow.arrow-end:after {
  -webkit-transform: translate(-50%, -50%) rotate(225deg);
  transform: translate(-50%, -50%) rotate(225deg);
}

.primary-menu .dropdown-toggle:after, .login-signup .dropdown-toggle:after {
  content: none;
}

.rtl .primary-menu ul.navbar-nav > li.dropdown .dropdown-menu li > a:not(.btn) > i:not(.arrow), .rtl .login-signup ul.navbar-nav > li.dropdown .dropdown-menu li > a:not(.btn) > i:not(.arrow) {
  margin-right: 0px;
  margin-left: 7px;
}

.rtl .primary-menu ul.navbar-nav > li.dropdown:hover > a:after, .rtl .login-signup ul.navbar-nav > li.dropdown:hover > a:after {
  left: auto;
  right: 50%;
  margin: 0 -5px 0 0;
}

.rtl .primary-menu ul.navbar-nav > li.dropdown.notifications .dropdown-menu li > a:not(.btn), .rtl .login-signup ul.navbar-nav > li.dropdown.notifications .dropdown-menu li > a:not(.btn) {
  padding-left: 0;
  padding-right: 24px;
}

.rtl .primary-menu ul.navbar-nav > li.dropdown.notifications .dropdown-menu li > a:not(.btn) > i:not(.arrow), .rtl .login-signup ul.navbar-nav > li.dropdown.notifications .dropdown-menu li > a:not(.btn) > i:not(.arrow) {
  left: auto;
  right: 0px;
}

.rtl .primary-menu .dropdown-menu-end, .rtl .login-signup .dropdown-menu-end {
  left: 100% !important;
  right: auto !important;
}

.rtl .primary-menu ul.navbar-nav > li.dropdown-mega .dropdown-mega-content > .row > div, .rtl .login-signup ul.navbar-nav > li.dropdown-mega .dropdown-mega-content > .row > div {
  padding: 5px 20px 5px 5px;
  border-left: 1px solid #eee;
  border-right: 0px;
}

.rtl .primary-menu ul.navbar-nav > li.dropdown-mega .dropdown-mega-content > .row > div:last-child, .rtl .login-signup ul.navbar-nav > li.dropdown-mega .dropdown-mega-content > .row > div:last-child {
  border-left: 0;
}

.rtl .primary-menu ul.navbar-nav > li.dropdown-mega .dropdown-mega-submenu, .rtl .login-signup ul.navbar-nav > li.dropdown-mega .dropdown-mega-submenu {
  padding-right: 0px;
}

.rtl .primary-menu ul.navbar-nav > li.dropdown .dropdown-menu .dropdown-menu, .rtl .login-signup ul.navbar-nav > li.dropdown .dropdown-menu .dropdown-menu {
  left: auto;
  right: 100%;
}

.rtl .primary-menu ul.navbar-nav > li.dropdown .dropdown-menu .dropdown-toggle:after, .rtl .login-signup ul.navbar-nav > li.dropdown .dropdown-menu .dropdown-toggle:after {
  border-left: 0;
  border-right: 0.4em solid;
}

.rtl .primary-menu ul.navbar-nav > li.dropdown .dropdown-toggle .arrow, .rtl .login-signup ul.navbar-nav > li.dropdown .dropdown-toggle .arrow {
  right: auto;
  left: 0px;
}

.rtl .primary-menu ul.navbar-nav > li.dropdown .dropdown-toggle .arrow:after, .rtl .login-signup ul.navbar-nav > li.dropdown .dropdown-toggle .arrow:after {
  left: auto;
  right: 50%;
  border-top: 0px;
  border-right: 0px;
  border-bottom: 1px solid;
  border-left: 1px solid;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
}

.rtl .primary-menu ul.navbar-nav > li.dropdown .dropdown-toggle .arrow.arrow-end:after, .rtl .login-signup ul.navbar-nav > li.dropdown .dropdown-toggle .arrow.arrow-end:after {
  -webkit-transform: translate(-50%, -50%) rotate(225deg);
  transform: translate(-50%, -50%) rotate(225deg);
}

.dropdown-menu {
  -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.176);
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.176);
  border: 0px none;
  font-size: 14px;
  font-size: 0.875rem;
}

.dropdown-divider {
  border-color: rgba(0, 0, 0, 0.1);
}

.header-text-light .navbar-toggler span {
  background: #fff;
}

.header-text-light .login-signup ul.navbar-nav > li > a:not(.btn) {
  color: rgba(250, 250, 250, 0.85);
}

.header-text-light .login-signup ul.navbar-nav > li:hover > a:not(.btn), .header-text-light .login-signup ul.navbar-nav > li.active > a:not(.btn) {
  color: #fff;
}

@media (min-width: 992px) {
  .header-text-light .primary-menu ul.navbar-nav > li > a:not(.btn) {
    color: rgba(250, 250, 250, 0.85);
  }
  .header-text-light .primary-menu ul.navbar-nav > li:hover > a:not(.btn), .header-text-light .primary-menu ul.navbar-nav > li.active > a:not(.btn) {
    color: #fff;
  }
}

.primary-menu.navbar-dropdown-dark ul.navbar-nav > li.dropdown .dropdown-menu, .login-signup.navbar-dropdown-dark ul.navbar-nav > li.dropdown .dropdown-menu {
  background-color: #252A2C;
  color: #fff;
}

.primary-menu.navbar-dropdown-dark ul.navbar-nav > li.dropdown .dropdown-menu .dropdown-menu, .login-signup.navbar-dropdown-dark ul.navbar-nav > li.dropdown .dropdown-menu .dropdown-menu {
  background-color: #272c2e;
}

.primary-menu.navbar-dropdown-dark ul.navbar-nav > li.dropdown .dropdown-menu .dropdown-divider, .login-signup.navbar-dropdown-dark ul.navbar-nav > li.dropdown .dropdown-menu .dropdown-divider {
  border-color: rgba(250, 250, 250, 0.2);
}

.primary-menu.navbar-dropdown-dark ul.navbar-nav > li.dropdown:hover > a:after, .login-signup.navbar-dropdown-dark ul.navbar-nav > li.dropdown:hover > a:after {
  border-color: transparent transparent #252A2C transparent;
}

.primary-menu.navbar-dropdown-dark ul.navbar-nav > li.dropdown .dropdown-menu li > a:not(.btn), .login-signup.navbar-dropdown-dark ul.navbar-nav > li.dropdown .dropdown-menu li > a:not(.btn) {
  color: #a3a2a2;
}

.primary-menu.navbar-dropdown-dark ul.navbar-nav > li.dropdown .dropdown-menu li:hover > a:not(.btn), .login-signup.navbar-dropdown-dark ul.navbar-nav > li.dropdown .dropdown-menu li:hover > a:not(.btn) {
  color: #fff;
}

.primary-menu.navbar-dropdown-dark ul.navbar-nav > li.dropdown-mega .dropdown-mega-content > .row > div, .login-signup.navbar-dropdown-dark ul.navbar-nav > li.dropdown-mega .dropdown-mega-content > .row > div {
  border-color: #3a3a3a;
}

.primary-menu.navbar-dropdown-primary ul.navbar-nav > li.dropdown .dropdown-menu, .login-signup.navbar-dropdown-primary ul.navbar-nav > li.dropdown .dropdown-menu {
  background-color: #2dbe60;
  color: #fff;
}

.primary-menu.navbar-dropdown-primary ul.navbar-nav > li.dropdown .dropdown-menu .dropdown-menu, .login-signup.navbar-dropdown-primary ul.navbar-nav > li.dropdown .dropdown-menu .dropdown-menu {
  background-color: #2dbe60;
}

.primary-menu.navbar-dropdown-primary ul.navbar-nav > li.dropdown .dropdown-menu .dropdown-divider, .login-signup.navbar-dropdown-primary ul.navbar-nav > li.dropdown .dropdown-menu .dropdown-divider {
  border-color: rgba(250, 250, 250, 0.3);
}

.primary-menu.navbar-dropdown-primary ul.navbar-nav > li.dropdown:hover > a:after, .login-signup.navbar-dropdown-primary ul.navbar-nav > li.dropdown:hover > a:after {
  border-color: transparent transparent #2dbe60 transparent;
}

.primary-menu.navbar-dropdown-primary ul.navbar-nav > li.dropdown .dropdown-menu li > a:not(.btn), .login-signup.navbar-dropdown-primary ul.navbar-nav > li.dropdown .dropdown-menu li > a:not(.btn) {
  color: rgba(250, 250, 250, 0.95);
}

.primary-menu.navbar-dropdown-primary ul.navbar-nav > li.dropdown .dropdown-menu li:hover > a:not(.btn), .login-signup.navbar-dropdown-primary ul.navbar-nav > li.dropdown .dropdown-menu li:hover > a:not(.btn) {
  color: #fff;
}

.primary-menu.navbar-dropdown-primary ul.navbar-nav > li.dropdown-mega .dropdown-mega-content > .row > div, .login-signup.navbar-dropdown-primary ul.navbar-nav > li.dropdown-mega .dropdown-mega-content > .row > div {
  border-color: rgba(250, 250, 250, 0.2);
}

@media (max-width: 991.98px) {
  #header .navbar-dropdown-dark.primary-menu:before, .primary-menu.navbar-dropdown-dark ul.navbar-nav > li.dropdown .dropdown-menu .dropdown-menu {
    background-color: #252A2C;
  }
  #header .navbar-dropdown-primary.primary-menu:before {
    background-color: #2dbe60;
  }
  .primary-menu.navbar-dropdown-primary ul.navbar-nav > li.dropdown .dropdown-menu .dropdown-menu {
    background-color: #2dbe60;
  }
  .primary-menu.navbar-dropdown-dark ul.navbar-nav li {
    border-color: #444;
  }
  .primary-menu.navbar-dropdown-dark ul.navbar-nav > li > a {
    color: #a3a2a2;
  }
  .primary-menu.navbar-dropdown-dark ul.navbar-nav > li:hover > a {
    color: #fff;
  }
  .primary-menu.navbar-dropdown-primary ul.navbar-nav li {
    border-color: rgba(250, 250, 250, 0.2);
  }
  .primary-menu.navbar-dropdown-primary ul.navbar-nav > li > a {
    color: rgba(250, 250, 250, 0.8);
  }
  .primary-menu.navbar-dropdown-primary ul.navbar-nav > li:hover > a {
    color: #fff;
  }
}

@media (min-width: 992px) {
  .navbar-toggler {
    display: none;
  }
  .primary-menu ul.navbar-nav > li + li {
    margin-left: 2px;
    padding: 2px 0px;
  }
  .primary-menu ul.navbar-nav > li.dropdown .dropdown-menu li:hover > a:not(.btn) {
    margin-left: 5px;
  }
  .primary-menu ul.navbar-nav > li.dropdown .dropdown-menu li:hover > a .arrow {
    right: -3px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
  }
  .primary-menu ul.navbar-nav > li.dropdown > .dropdown-toggle {
    padding-right: 1.6rem;
  }
  .primary-menu ul.navbar-nav > li.dropdown > .dropdown-toggle .arrow:after {
    -webkit-transform: translate(-50%, -50%) rotate(134deg);
    transform: translate(-50%, -50%) rotate(134deg);
    width: 8px;
    height: 8px;
    top: calc(50% - 3px);
  }
  .primary-menu ul.navbar-nav > li.dropdown-mega .sub-title:first-child {
    margin-top: 0px;
  }
  .rtl .primary-menu ul.navbar-nav > li + li {
    margin-left: 0px;
    margin-right: 2px;
  }
  .rtl .primary-menu ul.navbar-nav > li.dropdown .dropdown-menu li:hover > a:not(.btn) {
    margin-left: 0px;
    margin-right: 5px;
  }
  .rtl .primary-menu ul.navbar-nav > li.dropdown .dropdown-menu li:hover > a .arrow {
    right: auto;
    left: -3px;
  }
  .rtl .primary-menu ul.navbar-nav > li.dropdown > .dropdown-toggle {
    padding-right: 0.85em;
    padding-left: 1.6rem;
  }
  .rtl .primary-menu ul.navbar-nav > li.dropdown > .dropdown-toggle .arrow:after {
    -webkit-transform: translate(60%, -50%) rotate(-45deg);
    transform: translate(60%, -50%) rotate(-45deg);
    top: calc(50% - 3px);
  }
}

.login-signup ul.navbar-nav > li.dropdown:not(.notifications) .dropdown-menu li:hover > a:not(.btn) {
  margin-left: 5px;
}

.login-signup ul.navbar-nav > li.dropdown:not(.notifications) .dropdown-menu li:hover > a .arrow {
  right: -3px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.login-signup ul.navbar-nav > li.dropdown:not(.notifications) > .dropdown-toggle {
  padding-right: 1.6rem;
}

.login-signup ul.navbar-nav > li.dropdown:not(.notifications) > .dropdown-toggle .arrow:after {
  -webkit-transform: translate(-50%, -50%) rotate(134deg);
  transform: translate(-50%, -50%) rotate(134deg);
  width: 8px;
  height: 8px;
  top: calc(50% - 3px);
}

.login-signup ul.navbar-nav > li.dropdown.notifications > .dropdown-toggle .arrow, .login-signup ul.navbar-nav > li.dropdown.profile > .dropdown-toggle .arrow {
  display: none;
}

.login-signup ul.navbar-nav > li.dropdown.notifications.notifications .count, .login-signup ul.navbar-nav > li.dropdown.profile.notifications .count {
  -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  position: relative;
  top: -8px;
  left: 0;
  font-size: 11px;
  background-color: #dc3545;
  border-radius: 50px;
  height: 16px;
  line-height: 16px;
  color: #fff;
  min-width: 16px;
  text-align: center;
  padding: 0 5px;
  display: inline-block;
  vertical-align: top;
  margin-left: -6px;
  margin-right: -5px;
}

.login-signup ul.navbar-nav > li.dropdown-mega .sub-title:first-child {
  margin-top: 0px;
}

.rtl .login-signup ul.navbar-nav > li.dropdown:not(.notifications) .dropdown-menu li:hover > a:not(.btn) {
  margin-left: 0px;
  margin-right: 5px;
}

.rtl .login-signup ul.navbar-nav > li.dropdown:not(.notifications) .dropdown-menu li:hover > a .arrow {
  right: auto;
  left: -3px;
}

.rtl .login-signup ul.navbar-nav > li.dropdown:not(.notifications) > .dropdown-toggle {
  padding-right: 0.85em;
  padding-left: 1.6rem;
}

.rtl .login-signup ul.navbar-nav > li.dropdown:not(.notifications) > .dropdown-toggle .arrow:after {
  -webkit-transform: translate(60%, -50%) rotate(-45deg);
  transform: translate(60%, -50%) rotate(-45deg);
}

@media (max-width: 991.98px) {
  /* Mobile Menu Button */
  .navbar-toggler {
    width: 25px;
    height: 30px;
    padding: 10px;
    margin: 18px 10px;
    position: relative;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    cursor: pointer;
    display: block;
  }
  .navbar-toggler span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #3c3636;
    border-radius: 2px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
  }
  .navbar-toggler span:nth-child(1) {
    top: 6px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }
  .navbar-toggler span:nth-child(2) {
    top: 12px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }
  .navbar-toggler span:nth-child(3) {
    top: 18px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }
  .navbar-toggler.open span:nth-child(1) {
    top: 5px;
    left: 4px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .navbar-toggler.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
  }
  .navbar-toggler.open span:nth-child(3) {
    top: 21px;
    left: 4px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .navbar-toggler:focus {
    box-shadow: none;
  }
  #header .primary-menu {
    position: absolute;
    top: 99%;
    right: 0;
    left: 0;
    background: transparent;
    margin-top: 0px;
    z-index: 1000;
  }
  #header .primary-menu:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    background: #fff;
    z-index: -1;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  }
  #header .primary-menu > div {
    overflow: hidden;
    overflow-y: auto;
    max-height: 65vh;
    margin: 18px 0;
  }
  .primary-menu ul.navbar-nav li {
    display: block;
    border-bottom: 1px solid #eee;
    margin: 0;
    padding: 0;
  }
  .primary-menu ul.navbar-nav li:last-child {
    border: none;
  }
  .primary-menu ul.navbar-nav li.dropdown > .dropdown-toggle > .arrow.open:after {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg);
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
  }
  .primary-menu ul.navbar-nav > li > a:not(.btn) {
    height: auto;
    padding: 20px 0;
    position: relative;
  }
  .primary-menu ul.navbar-nav > li > span {
    height: auto;
    padding: 20px 0;
    position: relative;
  }
  .primary-menu ul.navbar-nav > li.dropdown .dropdown-menu li > a:not(.btn) {
    padding: 8px 0;
    position: relative;
  }
  .primary-menu ul.navbar-nav > li.dropdown:hover > a:after {
    content: none;
  }
  .primary-menu ul.navbar-nav > li.dropdown .dropdown-toggle .arrow:after {
    -webkit-transform: translate(-50%, -50%) rotate(134deg);
    transform: translate(-50%, -50%) rotate(134deg);
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    width: 8px;
    height: 8px;
  }
  .primary-menu ul.navbar-nav > li.dropdown .dropdown-menu {
    margin: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    padding: 0px 0px 0px 15px;
  }
  .primary-menu ul.navbar-nav > li.dropdown .dropdown-menu .dropdown-menu {
    margin: 0;
  }
  .primary-menu ul.navbar-nav > li.dropdown-mega .dropdown-mega-content > .row > div {
    padding: 0px 15px;
  }
  .rtl .primary-menu ul.navbar-nav > li.dropdown .dropdown-menu {
    padding: 0px 15px 0px 0px;
  }
  .rtl .primary-menu ul.navbar-nav > li.dropdown .dropdown-toggle .arrow:after, .rtl .login-signup ul.navbar-nav > li.dropdown .dropdown-toggle .arrow:after {
    -webkit-transform: translate(50%, -50%) rotate(45deg);
    transform: translate(50%, -50%) rotate(45deg);
  }
  #header {
    margin: 2px 0px 0px 2px;
}
}

@media (max-width: 575.98px) {
  .login-signup ul.navbar-nav > li a.btn {
    padding: 0.65rem 0.8rem;
  }
}

@media (max-width: 380px) {
  #header .logo img {
    max-width: 140px;
  }
}

/* Page Header */
.page-header {
  margin: 0 0 30px 0;
  padding: 30px 0;
}

.page-header h1 {
  font-weight: normal;
  font-size: 30px;
  margin: 0;
  padding: 5px 0;
}

.page-header .breadcrumb {
  background: none;
  margin: 0 0 8px 2px;
  padding: 0;
  position: relative;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.page-header .breadcrumb > li {
  display: inline-block;
  font-size: 0.85em;
  text-shadow: none;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.page-header .breadcrumb > li + li:before {
  color: inherit;
  opacity: 0.7;
  font-family: 'Font Awesome 5 Free';
  content: "\f105";
  padding: 0 7px 0 5px;
  font-weight: 900;
}

.page-header .breadcrumb > li a {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.page-header .breadcrumb > li a:hover {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.page-header.page-header-text-light {
  color: #fff;
}

.page-header.page-header-text-light h1 {
  color: #fff;
}

.page-header.page-header-text-light .breadcrumb > li {
  color: rgba(250, 250, 250, 0.8);
}

.page-header.page-header-text-light .breadcrumb > li a {
  color: rgba(250, 250, 250, 0.8);
}

.page-header.page-header-text-light .breadcrumb > li a:hover {
  color: #fff;
}

.page-header.page-header-text-dark h1 {
  color: #1e1d1c;
}

.page-header.page-header-text-dark .breadcrumb > li {
  color: #707070;
}

.page-header.page-header-text-dark .breadcrumb > li a {
  color: #707070;
}

.page-header.page-header-text-dark .breadcrumb > li a:hover {
  color: #2dbe60;
}

.rtl .page-header .breadcrumb {
  margin-right: 2px;
  margin-left: 0px;
}

.rtl .page-header .breadcrumb > li + li:before {
  padding: 0 5px 0 7px;
}

/* =================================== */
/*  Footer
/* =================================== */
/* The page is a column: content, then footer, with the content taking up any
   slack. Without this the footer simply sat wherever the content stopped --
   on Search before you have searched that is 390px above the bottom of the
   window, which reads as the footer being in the middle of the page.

   This is not the same as pinning it: on a long page the footer still flows
   after the content and scrolls away with it, which is what it should do.
   The sidebar is position:fixed, so it is out of flow and not a flex item. */
body { display: flex; flex-direction: column; min-height: 100vh; }
body > .main-content { flex: 1 0 auto; }
body > #footer { flex: 0 0 auto; }

#footer {
  /* In the flow, at the end of the page's content -- not pinned to the window.

     It was position:fixed because the include sat outside <body> and had
     nowhere sensible to land. Pinned, it also sat permanently on top of the
     last rows of any long table, and on a short screen it ate a strip of the
     page that the content could not use. */
  margin-left: 245px;              /* line up with .main-content, clear the sidebar */
  margin-top: 24px;
  background-color: #ffffff;
  color: #67727c;
  text-align: center;
  padding: 9px 0;
  font-size: 13px;
  border-top: 1px solid #e3e8ef;
}
/* On small screens the sidebar layout collapses — let the footer fill the row */
@media (max-width: 768px) {
  #footer { margin-left: 0; }
}

#footer .nav .nav-item {
  display: inline-block;
  line-height: 12px;
  margin: 0;
  padding: 0 10px;
}

#footer .nav .nav-item .nav-link {
  padding: 0;
  margin: 0.5rem 0px;
  color: #252b33;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

#footer .nav .nav-item .nav-link:focus {
  color: #2dbe60;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

#footer .nav .nav-link:hover {
  color: #2dbe60;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

#footer .footer-copyright {
  padding: 0px 0px;
  color: #67727c;
}

#footer .footer-copyright .nav .nav-item .nav-link {
  color: #67727c;
}

#footer .footer-copyright .nav .nav-link:hover {
  color: #2dbe60;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

#footer .nav.flex-column .nav-item {
  padding: 0px;
}

#footer .nav.flex-column .nav-item .nav-link {
  margin: 0.7rem 0px;
}

#footer.footer-text-light {
  color: rgba(250, 250, 250, 0.8);
}

#footer.footer-text-light .nav .nav-item .nav-link {
  color: rgba(250, 250, 250, 0.8);
}

#footer.footer-text-light .nav .nav-item .nav-link:hover {
  color: #fafafa;
}

#footer.footer-text-light .footer-copyright {
  border-color: rgba(250, 250, 250, 0.15);
  color: rgba(250, 250, 250, 0.5);
}

#footer.footer-text-light:not(.bg-primary) .social-icons-light.social-icons li a {
  color: rgba(250, 250, 250, 0.8);
}

#footer.footer-text-light:not(.bg-primary) .social-icons-light.social-icons li a:hover {
  color: #fafafa;
}

#footer.footer-text-light.bg-primary {
  color: #fff;
}

#footer.footer-text-light.bg-primary .nav .nav-item .nav-link {
  color: #fff;
}

#footer.footer-text-light.bg-primary .nav .nav-item .nav-link:hover {
  color: rgba(250, 250, 250, 0.7);
}

#footer.footer-text-light.bg-primary .footer-copyright {
  border-color: rgba(250, 250, 250, 0.15);
  color: rgba(250, 250, 250, 0.9);
}

#footer.footer-text-light.bg-primary :not(.social-icons) a {
  color: #fff;
}

#footer.footer-text-light.bg-primary :not(.social-icons) a:hover {
  color: rgba(250, 250, 250, 0.7);
}

body:not(.rtl) #footer .nav .nav-item:first-child {
  padding-left: 0px;
}

body:not(.rtl) #footer .nav .nav-item:last-child {
  padding-right: 0px;
}

.rtl #footer .nav .nav-item:first-child {
  padding-right: 0px;
}

.rtl #footer .nav .nav-item:last-child {
  padding-left: 0px;
}



.pricing-card {
            width: 350px;
            background: #fff;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .pricing-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
        }
        
        .pricing-top {
            background: linear-gradient(90deg, #6d3fd1 0%, #7c4ddb 100%);
            color: white;
            padding: 25px;
            display: flex;
            position: relative;
        }
        
        .left {
            flex: 1;
            text-align: left;
        }
        
        .left span {
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
            opacity: 0.9;
        }
        
        .left h2 {
            font-size: 38px;
            margin-top: 5px;
            font-weight: 700;
            text-align: center;
        }
        
        .left h2 sup {
            font-size: 20px;
            position: relative;
            top: -10px;
        }
        
        .left h2 sub {
            font-size: 14px;
            font-weight: 400;
            opacity: 0.9;
            position: relative;
            bottom: -2px;
            left: 5px;
        }
        
        .right {
            position: relative;
            width: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .tag-txt {
            position: absolute;
            z-index: 2;
            color: white;
            text-align: center;
            font-size: 16px;
            font-weight: 700;
            line-height: 1.2;
        }
        
        .tag-txt span {
            font-size: 12px;
            font-weight: 500;
        }
        
        .offer-tag {
            position: absolute;
            right: 0;
            top: 0;
            width: 80px;
            height: 80px;
            overflow: hidden;
        }
        
        .offer-tag::before {
            content: '';
            position: absolute;
            width: 160px;
            height: 160px;
            background: #00b4be;
            transform: rotate(45deg);
            right: -80px;
            top: -80px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .card-body {
            padding: 25px;
        }

        [align="right"] {
            text-align: right;
        }
        
        /* Hover Overlay Styles */
        .hover-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            border-radius: 15px;
        }

.view-button {
            background: #00b4be;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 24px;
            cursor: pointer;
            transform: scale(0.8);
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 180, 190, 0.4);
        }
        
        .view-button:hover {
            background: #0099a3;
            transform: scale(0.9);
        }
        
        .pricing-card:hover .hover-overlay {
            opacity: 1;
            visibility: visible;
        }
        
        /* Responsive Design */
        @media (max-width: 400px) {
            .pricing-card {
                width: 100%;
                max-width: 320px;
            }
            
            .pricing-top {
                padding: 20px;
            }
            
            .left h2 {
                font-size: 32px;
            }
        }
        /* Detailed View Styles */
        .plan-details {
            display: none; /* Hidden by default, will be shown in fancybox */
            max-width: 800px;
            padding: 14px;
            background: white;
            border-radius: 15px;
        }
        
        .details-header {
            background: linear-gradient(90deg, #6d3fd1 0%, #7c4ddb 100%);
            color: white;
            padding: 12px 14px 0px 14px;
            border-radius: 10px;
            margin-bottom: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .details-header h2 {
            font-size: 20px;
            margin-bottom: 5px;
        }
        
        .details-header p {
            opacity: 0.9;
        }
        
        .details-content {
            display: block;   /* let the inner Bootstrap row/cols lay out the cards */
        }

        .detail-card {
            background: #f8f9fa;
            padding: 14px 16px;
            border-radius: 10px;
            border-left: 4px solid #6d3fd1;
            height: 100%;
        }

        .detail-card h3 {
            color: #6d3fd1;
            margin-bottom: 8px;
            font-size: 14px;
            font-weight: 700;
        }

        .detail-card p {
            color: #7f8c8d;
            font-size: 14px;
        }
        
        .features-list {
            grid-column: span 2;
            background: #f8f9fa;
            padding: 10px 10px 0px 10px;
            border-radius: 10px;
        }
        
        .features-list h3 {
            color: #2c3e50;
            margin-bottom: 15px;
            font-size: 16px;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }
        
        .feature-item {
            display: flex;
        }
        
        .feature-item i {
    color: #3498db;
    margin-right: 10px;
    font-size: 12px;
    margin-top: 4px;
}
        
        .action-buttons {
            grid-column: span 2;
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 3px;
        }
        
        .btn {
    padding: -1px 123px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 12px;
    
}

.btn {
    --bs-btn-padding-x: 0.25rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-family: ;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    --bs-btn-color: white;
      /* background-image: linear-gradient(to right, #8b5cf6, #5b32b8); */
      background: #5b32b8 !important;
    --bs-btn-border-width: var(--bs-border-width);
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: var(--bs-border-radius);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(va  r(--bs-btn-focus-shadow-rgb), .5);
    display: inline-block;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    color: var(--bs-btn-color);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--bs-btn-bg);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
        
        .btn-primary {
            background: #6d3fd1;
            color: white;
            border: none;
        }
        
        .btn-primary:hover { 
        }
        
        .btn-outline {
            background: linear-gradient(to right, #6d3fd1, #8b5cf6);
            color: white;
            border: none;
            padding: 9px 22px;
            border-radius: 6px;
            font-size: 0.9em;
            cursor: pointer;
            transition: background 0.3s, transform 0.15s;
        }

        .btn-outline:hover {
            background: linear-gradient(to right, #2e1a5c, #6d3fd1);
            color: white;
            transform: translateY(-1px);
        }
        
        /* Responsive Design */
        @media (max-width: 400px) {
            .pricing-card {
                width: 100%;
                max-width: 320px;
            }
            
            .pricing-top {
                padding: 20px;
            }
            
            .left h2 {
                font-size: 32px;
            }
            
            .details-content {
                grid-template-columns: 1fr;
            }
            
            .features-list, .action-buttons {
                grid-column: 1;
            }
            
            .features-grid {
                grid-template-columns: 1fr;
            }
        }
        .fnt-12 {
            font-size: 13px;
        }
        .profile-img-container {
    text-align: center;
}

.profile-img {
    display: inline-block;
    position: relative;
}

/* .profile-thumb-edit {
    position: relative;
    bottom: 5px;
    right: 5px;
    cursor: pointer;
} */
.fancybox__nav .carousel__button.is-next {display: none;}
.fancybox__nav .carousel__button.is-prev {display: none;}

button.is-close {
    position: absolute;
    top: -3px !important;
    right: 0;
    color: var(--fancybox-color, #317cb0) !important;
    /* width: 8%; */
}

#back-to-top {
    display: none;
    position: fixed;
    z-index: 1030;
    bottom: 20px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.2);
    text-align: center;
    color: rgb(255, 255, 255);
    font-size: 16px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px;
    border-radius: 0.25rem;
    transition: 0.3s ease-in-out;
}
a, a:focus {
    color: white
}

/* =========================================================
   Pagination — shared design used on Usage Logs, Payments,
   Datasets (and any page using .pagination-container)
   ========================================================= */
.pagination-container {
  padding: 14px 4px 4px;
}

/* "Show N entries" selector */
.entries-per-page {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #6c757d;
}
.entries-per-page select {
  padding: 5px 10px;
  border: 1px solid #d8e0ea;
  border-radius: 8px;
  font-size: 13px;
  color: #6d3fd1;
  background-color: #fff;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.entries-per-page select:focus {
  outline: none;
  border-color: #6d3fd1;
  box-shadow: 0 0 0 3px rgba(109, 63, 209, 0.12);
}

/* "Showing X to Y of Z" text */
.pagination-info {
  font-size: 13px;
  color: #6c757d;
  text-align: center;
}
.pagination-info span { font-weight: 600; color: #6d3fd1; }

/* =========================================================
   The page buttons
   =========================================================

   Why every colour is !important. theme.css colours links with

     a:not([class*="btn"]):not(.nav-link):not(.dropdown-item):not(.lp-nav a):not(.sidebar a)

   and a :not() carries the specificity of what is inside it, so that chain
   weighs (0,5,1). `.pagination .active a` is (0,2,1) and loses to it -- which
   is why the current page was drawing the teal link colour on its own navy
   chip at 1.54:1, and why the other numbers came out teal rather than navy.
   Winning on specificity alone would take six classes, which is an arms race;
   saying so outright is clearer.

   Widths come from tables.css. Every slot is a fixed size, so the control
   cannot change width as you page -- and the number of slots follows the
   number of pages, so a two-page table draws a two-page control rather than
   holding seven slots' worth of empty space open. */
.pagination {
  display: flex;
  flex-wrap: nowrap;        /* keep all buttons on a single line */
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  float: none;
}
.pagination li { list-style: none; }

.pagination a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  color: #6d3fd1 !important;
  background-color: var(--c-card, #fff);
  border: 1px solid var(--c-line, #d8e0ea);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.pagination a:hover {
  background-color: #f5f3ff;
  border-color: #6d3fd1;
  color: #2e1a5c !important;
}
.pagination a:focus-visible {
  outline: 2px solid #6d3fd1;
  outline-offset: 1px;
}

/* Where you are. */
.pagination .active a {
  background: linear-gradient(90deg, #6d3fd1 0%, #7c4ddb 100%);
  border-color: #6d3fd1;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(109, 63, 209, 0.28);
}
.pagination .active a:hover {
  color: #fff !important;
  border-color: #6d3fd1;
}

/* Nowhere to go. */
.pagination .disabled a,
.pagination .disabled a:hover {
  color: #626f86 !important;  /* on the #f6f8fa fill: #aeb7c2 was 2.4:1, #64748b 4.47 */
  background-color: #f6f8fa;
  border-color: #e6ebf1;
  cursor: not-allowed;
  pointer-events: none;
}
ul.dropdown-menu,
li.nav-item {
  list-style: none;
}


#dropdown-menu {
  display: none;
}
#dropdown-menu.show {
  display: block;
}



/* ===============credits page style==================== */
.ibox-content-sen {
    background-color: #ffffff;
    color: inherit;
    padding: 15px 20px 10px 20px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0;
    height: auto;
    border: 1px solid #d7d7d7;
    border-radius: 0px 0px 5px 5px;
}


/* ===================profile style=============== */

.tablinks {
  padding: 10px 20px;
  border: none;
  background: #6d3fd1;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
  margin-right: 5px;
  border-radius: 6px 6px 0 0;
}
.tablinks.active {
  background: #2e1a5c;
  color: #fff;
}
.tabcontent {
  display: none;
  margin-top: 10px;
  border: 1px solid #ddd;
  border-radius: 0 6px 6px 6px;
  padding: 15px;
}

/***********search & profile****************/

.search-form {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            padding: 10px 16px 7px 16px;
            border-radius: 8px;
        }
        
        .form-group {
            display: flex;
            flex-direction: column;
        }
        
        .form-group label {
            font-weight: 600;
            margin-bottom: 8px;
            color: #2c3e50;
            font-size: 14px;
        }
        
        input, select {
            padding: 7px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 13px;
            transition: border-color 0.3s;
        }
        
        input:focus, select:focus {
            outline: none;
            border-color: #8b5cf6;
            box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
        }
        
        .buttons {
            display: flex;
            gap: 15px;
            align-items: flex-end;
        }
        
        button {
            padding: 12px 25px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s;
        }
        
        .search-btn {
            background-color: #8b5cf6;
            color: white;
        }
        
        .search-btn:hover {
            background-color: #8b5cf6;
        }
        
        .reset-btn {
            background-color: #f2f2f2;
            color: #666;
        }
        
        .reset-btn:hover {
            background-color: #e6e6e6;
        }
        
        .divider {
            height: 1px;
            background: #eee;
            margin: 25px 0;
        }
        
        .results-table {
            width: 100%;
            border-collapse: collapse;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            border-radius: 8px;
            overflow: hidden;
        }
        
        .results-table th {
            background-color: #f8f8f8;
            color: #000000;
            text-align: left;
            padding: 15px;
            font-weight: 600;
        }
        
        .results-table td {
            padding: 15px;
            border-bottom: 1px solid #eee;
        }
        
        .results-table tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        
        .results-table tr:hover {
            background-color: #f5f3ff;
        }
        
        .no-results {
            text-align: center;
            padding: 40px;
            color: #777;
            font-style: italic;
        }
        
        .section-title {
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 15px;
            font-size: 18px;
        }
        
        @media (max-width: 900px) {
            .search-form {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 600px) {
            .search-form {
                grid-template-columns: 1fr;
            }
            
            .buttons {
                flex-direction: column;
            }
            
            button {
                width: 100%;
            }
        }
        .img-bg {
    background-image: url("../images/bg/profile_bg.jpg");
    background-color: red;   /* ✅ don't overwrite background-image */
    height: 18vh;
    border-radius: 10px;
    background-size: cover;   /* optional: fit image */
    background-position: center; /* optional: center it */
}

        .profile-card {
    margin: -32px auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex
;
    align-items: center;
    padding: 9px;
}

    .profile-img {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    overflow: hidden;
    margin-right: 15px;
      flex-shrink: 0;
    }

    .profile-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .profile-info {
      flex: 1;
    }

    .profile-info h2 {
      margin: 0;
      font-size: 20px;
      color: #222;
    }

    .profile-info p {
      margin: 2px 0 0;
      font-size: 14px;
      color: #6c757d;
    }

    .tabs {
      border-bottom: 1px solid #ccc;
    }

    .tabs button {
      color: black;
      background: none;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 10px 20px;
      font-size: 16px;
      transition: 0.3s;
    }

    .tabs button:hover {

        background: #c4c4c4;
        border-radius: 0px;
    }

    .tabs button.active {
    background-image: linear-gradient(to right, #8b5cf6, #5b32b8); 
    font-weight: bold;
    color:  white;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

    .tabcontent {
      display: none;
      padding: 20px;
      border: 1px solid #ccc;
      border-top: none;
    }
    @media (max-width: 600px) {
      .profile-card {
        flex-direction: column;
        text-align: center;
      }
      .tabs {
        margin: 15px auto 0;
      }
    }
    .prof-fnt {
    color: white;
    padding: 20px 0px 0px 25px;
}
.ie-hid {
    float: inline-end;
}
.ibox-content-sen {
    background-color: #ffffff;
    color: inherit;
    padding: 15px 20px 10px 20px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0;
    height: auto;
    border: 1px solid #d7d7d7;
    border-radius: 0px 0px 5px 5px;
}





/* ===== FANCYBOX MODAL FIXES ===== */
.fancybox__container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1050 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.fancybox__content {
    display: inline-table !important;
    width: 90% !important;
    max-width: 900px !important;
    height: 85% !important;
    max-height: 90vh !important;
    margin: auto !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.fancybox__content iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

@media (max-width: 767.98px) {
    .fancybox__container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;

        height: 100% !important;
    }
    
    .fancybox__content {
        display: flex;
        width: 95% !important;
        height: 90% !important;
        margin: auto !important;
    }
}


/**************modal report********************/
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "Rubik", -apple-system, BlinkMacSystemFont, sans-serif;
            line-height: 1.6;
            background: #f8fafc;
        }

        /* Main Report Container */
        .report-container {
            max-width: 900px;
            background: white;
            overflow: hidden;
        }

        /* Header Section */
        .report-header {
            background: linear-gradient(135deg, #6d3fd1 0%, #8b5cf6 100%);
            color: white;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

       .report-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url('data:image/svg+xml,...');
    z-index: 0;
   pointer-events: none;          /* ✅ push behind */
}

#logModal .modal-content {
    pointer-events: auto;
}

.classification-bar,
.main-header {
    position: relative;
    z-index: 1;           /* ✅ bring text/buttons above overlay */
}


        .classification-bar {
            padding: 12px 20px;
            font-weight: 600;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(8px);
            position: relative;
            z-index: 1;
        }

        .classification-bar img {
            filter: brightness(0) invert(1);
            border-radius: 4px;
        }

        .main-header {
            padding: 30px 20px;
            position: relative;
            z-index: 1;
        }

        .main-header h2 {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 12px;
            opacity: 0.9;
        }

        .main-header h1 {
            font-size: 32px;
            font-weight: 700;
            margin: 16px 0;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .report-info {
            font-size: 13px;
            opacity: 0.8;
            margin-top: 20px;
            line-height: 1.5;
        }

        /* Statistics Grid */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 1px;
            background: #e2e8f0;
        }

        .stat-card {
            background: white;
            padding: 24px 20px;
            text-align: center;
            position: relative;
            transition: all 0.3s ease;
        }

        .stat-card:hover {
    background: #f8fafc;
    transform: translateY(-2px);
}

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(135deg, #8B5CF6, #EC4899);
        }

        .stat-number {
            font-size: 36px;
            font-weight: 800;
            color: #4e4696;
            margin-bottom: 8px;
            display: block;
        }

        .stat-label {
            color: #64748b;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* Data Table Section */
        .data-section {
            margin: 0;
        }

        .section-header {
            background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
            color: white;
            padding: 16px 24px;
            font-weight: 600;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
        }

        .data-table thead th {
            background: #f1f5f9;
            color: #475569;
            padding: 16px 12px;
            font-weight: 600;
            font-size: 12px;
            text-transform: uppercase;
            text-align: left;
            border-bottom: 2px solid #e2e8f0;
        }

        .data-table tbody td {
            padding: 14px 12px;
            border-bottom: 1px solid #f1f5f9;
            font-size: 13px;
            color: #475569;
        }

        .data-table tbody tr:hover {
            background: #f8fafc;
        }

        .data-table tbody tr:nth-child(even) {
            background: rgba(248, 250, 252, 0.5);
        }

        /* Risk Analysis */
        .risk-section {
            background: #f8fafc;
        }

        .risk-header {
            background: linear-gradient(135deg, #6d3fd1 0%, #8b5cf6 100%);
            color: white;
            padding: 16px 24px;
            font-weight: 600;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-align: center;
        }

        /* Footer */
        .report-footer {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            padding: 32px 24px;
        }

        .footer-header {
            background: linear-gradient(135deg, #6d3fd1 0%, #8b5cf6 100%);
            color: white;
            padding: 12px 20px;
            text-align: center;
            font-weight: 600;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
            border-radius: 8px;
            margin-bottom: 20px;
        }

        .compliance-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 12px;
        }

        .compliance-item {
            background: white;
            padding: 12px 16px;
            border-radius: 8px;
            border-left: 4px solid #4e4696;
            font-size: 13px;
            color: #4e4696;
            font-weight: 500;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            transition: all 0.2s ease;
        }

        .compliance-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 8px rgba(78, 70, 150, 0.15);
}

/* Copyright Footer Styling */
.copyright-footer {
  background: #2c3e50;
  color: #ecf0f1;
  padding: 16px 24px;
  text-align: center;
  font-size: 12px;
  margin: 0;
}

.copyright-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

        /* Responsive Design */
        @media (max-width: 768px) {
            .report-container {
                margin: 10px;
                border-radius: 12px;
            }
            
            .main-header {
                padding: 20px 15px;
            }
            
            .main-header h1 {
                font-size: 24px;
            }
            
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .data-table {
                font-size: 11px;
            }
            
            .data-table thead th,
            .data-table tbody td {
                padding: 10px 8px;
            }
            
            .compliance-list {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 480px) {
            .stats-grid {
                grid-template-columns: 1fr;
            }
            
            .stat-card {
                padding: 20px 15px;
            }
        }

        /* Print Styles */
        @media print {
            body {
                background: white;
            }
            
            .report-container {
                box-shadow: none;
                margin: 0;
                max-width: none;
            }
            
            .report-header,
            .section-header,
            .risk-header,
            .footer-header {
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
            .copyright-content {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
        }
    
/*************packages******************/

   

    .status-badge {
      position: absolute;
      top: 15px;
      right: 15px;
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      z-index: 10;
    }
    
    .status-active {
      background: #d4edda;
      color: #155724;
    }
    
    .status-inactive {
      background: #f8d7da;
      color: #721c24;
    }
    
    .action-icons {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin-top: 20px;
      padding: 0 20px 20px;
    }
    
    .action-icons a {
      color: #6c757d;
      transition: color 0.3s ease;
    }
    
    .action-icons a:hover {
      color: #4e54c8;
    }
    
    .hover-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(78, 84, 200, 0.9);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;
      border-radius: 12px;
    }
    .pricing-card {
  position: relative; /* Needed for hover overlay */
  width: 100%;        /* Ensure full width inside the column */
}

    .pricing-card:hover .hover-overlay {
      opacity: 1;
    }
    

    
/* Optional: fix row spacing if needed */
#packages-container {
  margin-left: -15px;
  margin-right: -12px;
}

#packages-container .col-xl-4,
#packages-container .col-md-6,
#packages-container .col-sm-12 {
  padding-left: 15px;
  padding-right: 15px;
}


    .view-button {
      color: white;
      font-size: 24px;
      cursor: pointer;
      padding: 15px 25px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      transition: all 0.3s ease;
    }
    
    .view-button:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: scale(1.1);
    }
    
    .plan-details {
      display: block;            /* stack header + content vertically */
      background: white;
      border-radius: 12px;
      padding: 30px;
      max-width: 650px;
      margin: 0 auto;
    }
    
    .details-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;
      padding-bottom: 20px;
      border-bottom: 1px solid #eee;
    }
    
    .details-content {
      padding: 10px 0;
    }
    
    .detail-card {
      background: #f8f9fa;
      padding: 15px;
      border-radius: 8px;
      margin-bottom: 15px;
    }
    
    .features-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
      margin-top: 15px;
    }
    
    .feature-item {
      display: flex;
      align-items: center;
    }
    
    .feature-item i {
      color: #28a745;
      margin-right: 10px;
    }
    
    .action-buttons {
      display: flex;
      gap: 15px;
      margin-top: 25px;
      justify-content: flex-end;
    }
    
    .fnt-12 {
      font-size: 12px;
    
    }




/**************password*********************/
  .password-field {
  position: relative;
}

.password-field .toggle-password {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
  color: #6c757d;
}

.password-field .toggle-password:hover {
  color: #4e54c8;
}


/* "Font Awesome 6 Pro" is not loaded here -- the kit in partials/head.html is
   the free one -- so this named a font that does not exist and every
   `fa-regular` icon in the console fell back to a missing glyph: an empty box
   where a paper plane or a trash can should be. The free kit's own regular
   family is what those icons are actually drawn from, and the colour goes with
   it: an icon should take the colour of the thing it sits in, not a teal of
   its own that turned white buttons' icons pale blue. */
.fa-regular, .far {
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
}
hr {
    margin: 10px 0;
    color: inherit;
    border: 0;
    border-top: var(--bs-border-width) solid;
    opacity: .25;
}
.pdng-lst {
    padding: 0px 10px 10px 10px !important;
}
.hader-bg {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    margin-bottom: 0;
    color: white !important;
    background: linear-gradient(90deg, #6d3fd1 0%, #7c4ddb 100%);
    border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
}
.butn-see {
    padding: 5px 11px 5px 11px;
    border-radius: 3px;
    font-size: 11px;
    text-decoration: none;
}
.pdng-crd {
    padding: 9px 0px 3px 15px;
}
.tbl-hd {
    font-size: 13px;
    font-weight: 700;
}
.fw-bolder {
    font-weight: 700;
    font-size: 17px;
}
.icn-stl {
    padding: 6px 18px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s 
ease;
    font-size: 12px;
}
[align="right"] {
    text-align: right;
}
.pd-titl {
    padding: 0px 11px 0px 11px;
}
.vieew-more-button {
    display: inline-block;
    padding: 8px 16px;
    background-color: #6d3fd1;
    color: white;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.3s;
    float: right;
    margin: 2px;
}
.view-more-button {
    display: inline-block;
    padding: 8px 16px;
    background-image: linear-gradient(to right, #6d3fd1, #8b5cf6);
    color: white;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9em;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(109, 63, 209, 0.25);
    transition: background 0.3s, box-shadow 0.3s, transform 0.15s;
    float: inline-end;
}

.srch-filtr {
    padding: 6px 18px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 12px;
}
.fancybox__slide {
  overflow:  hidden !important;
}


  .required-field::before {
    content: "* ";
    color: red;
    font-weight: bold;
  }

/* ============================================================
   Unified navy theme — Bootstrap primary overrides
   Keeps dashboard accents consistent with the sidebar
   ============================================================ */
.text-primary { color: #6d3fd1 !important; }

.btn-outline-primary {
  color: #6d3fd1;
  border-color: #6d3fd1;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: #6d3fd1;
  border-color: #6d3fd1;
  color: #fff;
}

.badge.bg-info { background-color: #7c4ddb !important; }

/* Active link state in topbars / pills */
a.text-primary:hover { color: #2e1a5c !important; }