:root,
[data-bs-theme=light] {
  --bi-bizcompass-ceo: #fff;
  --bi-bizcompass-menu: #F6F4FF;
  --bi-bizcompass-features: #fff;


  --bi-bizcompass-features-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);


  --bi-bizcompass-ceo-position: #1D1D1D;
  --bi-bizcompass-features-title: #1F165B;

  .light-img{display: block;}
  .dark-img{display: none;}
}

[data-bs-theme=dark] {
  color-scheme: dark;
  --bi-bizcompass-ceo: #0E0C15;
  --bi-bizcompass-menu: #15131c;
  /* --bi-bizcompass-features: #20242D; */
  --bi-bizcompass-features: #0E0C15;


  --bi-bizcompass-features-shadow: 0px 0px 4px rgb(255 255 255 / 15%);

  --bi-bizcompass-ceo-position: #D0D0D0;
  --bs-black: #fff;
  --bi-bizcompass-features-title: #fff;

  .light-img{display: none;}
  .dark-img{display: block;}
}

body{font-family: "Montserrat", sans-serif;font-optical-sizing: auto;font-weight: 400;font-style: normal;display: swap;line-height: normal;scroll-behavior: smooth;background-color: var(--bi-white);}
.container {max-width: 500px;}
.bizcompass-card {border-radius: 25px;margin: 2rem 0;height: calc( 100svh - 4rem);}
.bizcompass-card-body {height: calc( 100svh - 144px);}
.bizcompass-card-body::-webkit-scrollbar {width: 4px;height: 2px;background-color: #aaa;border-radius: 4px;overflow: hidden;}
.bizcompass-card-body::-webkit-scrollbar-thumb {background: #a725bc;}
.bizcompass-logo {/* background: url(../images/header-bg.webp); */padding: 22px 22px 40px 22px;/* background-repeat: no-repeat; *//* background-position: center; *//* background-size: cover; */}
.bizcompass-logo p {color: #FFF;text-align: center;font-size: 16px;font-weight: 400;line-height: 23px;z-index: 1;}

.bizcompass-ceo {padding: 80px 0 18px 0;background-color: var(--bi-bizcompass-ceo);}
.bizcompass-ceo-name{color: var(--bi-black);font-size: 18px;font-weight: 600;}
.bizcompass-ceo-position{color: var(--bi-bizcompass-ceo-position);text-align: center;font-size: 14px;font-weight: 500;line-height: 20px;}
.bizcompass-ceo .btn {border-radius: 5.606px;background: linear-gradient(0deg, #1E4497 0%, #1E4497 100%), #1F165B;padding: 6px 14px;color: #FFF;font-size: 14px;font-weight: 500;border: 0;}
.bizcompass-ceo-img {border: 2px solid #FFF;width: 100px;height: 100px;position: absolute;top: -36px;}

/* .bizcompass-menu {background-color: var(--bi-bizcompass-menu);height: 49svh;overflow-y: auto;overflow-x: hidden;padding: 20px;} */
.bizcompass-menu {background-color: var(--bi-bizcompass-menu);overflow-y: auto;overflow-x: hidden;padding: 20px;}
/* .bizcompass-menu::-webkit-scrollbar {width: 4px;height: 2px;background-color: #aaa;border-radius: 4px;overflow: hidden;}
.bizcompass-menu::-webkit-scrollbar-thumb {background: #a725bc;} */
.bizcompass-features {width: 340px;padding: 20px 11px;background-color: var(--bi-bizcompass-features);box-shadow: var(--bi-bizcompass-features-shadow);border-radius: 14px;}
.bizcompass-features-title {color: var(--bi-bizcompass-features-title);text-align: center;font-family: Montserrat;font-size: 18px;font-style: normal;font-weight: 700;line-height: normal;margin-bottom: 16px;}
.bizcompass-features ul {display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 2rem 18px;}
.bizcompass-features ul li a img {max-width: 30px;max-height: 30px;}
.bizcompass-features ul li a {color: var(--bi-black);font-size: 12px;font-weight: 500;text-align: center;}
.bizcompass-features > img {top: 36px;max-width: 116px;max-height: 218px;right: -89px;}

.bizcompass-bottommenu {border-radius: 25px 25px 0px 0px;background: #1E4497;position: absolute;bottom: 0;width: 100%;z-index: 2;}
.bizcompass-bottommenu ul li{width: 100%;}
.bizcompass-bottommenu a{color: #FFF;text-align: center;font-size: 14px;font-weight: 500;padding: 14px 0;}

.bizcompass-save {position: absolute;right: 1rem;bottom: 90px;z-index: 9;}
.bizcompass-save span{color: var(--bi-black);text-align: center;font-size: 12px;font-weight: 500;}

.btn-mode-span .theme-text-one{display: block;}
.btn-mode-span .theme-text-two{display: none;}
.btn-mode-span.active .theme-text-one{display: none;}
.btn-mode-span.active .theme-text-two{display: block;}

@media only screen and (max-width: 580px) {
  .container {padding: 0;}
  .bizcompass-card{margin: 0 0 0 0;height: 100svh;}
  .bizcompass-logo > span svg {width: 145px;height: 24px;}
  .bizcompass-logo p {font-size: 14px;line-height: 1.5;}
  .bizcompass-logo {padding: 16px 14px 28px 14px;}
  .bizcompass-ceo-img {width: 80px;height: 80px;}
  .bizcompass-ceo {padding: 50px 0 16px 0;}
  .bizcompass-ceo-name {font-size: 16px;}
  .bizcompass-ceo .btn,.bizcompass-ceo-position {font-size: 12px;}
  /* .bizcompass-menu {padding: 14px;height: calc(100svh - 334px);} */
  .bizcompass-menu {padding: 14px;}
  .bizcompass-features {width: 300px;padding: 16px 10px;border-radius: 10px;}
  .bizcompass-features ul {grid-template-columns: 1fr 1fr 1fr;gap: 1rem 14px;}
  .bizcompass-features ul li a img {max-width: 26px;max-height: 26px;}
  .bizcompass-features ul li a {font-size: 10px;}
  .bizcompass-features > img {top: 0;}
  .bizcompass-card-body {height: calc( 100svh - 80px);}
}

@media only screen and (max-width: 480px) {
  .bizcompass-card {border-radius: 0;}
  .bizcompass-features {width: calc(100% - 70px);}
  .bizcompass-features ul {gap: 14px;}
  .bizcompass-features > img {top: 14px;max-width: 100px;max-height: 190px;right: -76px;}
  .bizcompass-bottommenu a {font-size: 10px;padding: 12px 0;}
  .bizcompass-bottommenu a span svg {width: 20px;height: 21px;}
  .bizcompass-save span a svg {width: 50px;height: 50px;}
  .bizcompass-save {right: 0.5rem;bottom: 76px;}
  .bizcompass-card-body {height: calc( 100svh - 66px);}
}