/* Base font size */
    html {
        font-size: calc(16 / 1920 * 100vw);
    }

  /* Media queries for different screen resolutions */
  .min-vh-100 {
    min-height: 100vh;
  }
  @media (max-width: 768px) {
    body:not(.isapp):not(.logged-in) > #getapp {
      display: none!important;
    }
    body:has(#getapp).logged-in:not(.isapp) > #content-area {
      display: none!important;
    }

    #menu:before {
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      position: fixed;
      content: "";
      z-index: -1;
      background-color: rgba(0,0,0,.5);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease-in-out;
    }
    #menu:has(> .dropdown-menu.show):before {
      opacity: 1;
      visibility: visible;
      background-color: rgba(0,0,0,.5);
      z-index: -1;
    }
    #menu .disclaimer {
      display: none;
    }
    :root {
      --header-height: 5rem;
    }
    body:not(.dashboard) {
      --bs-body-font-size: 1rem;
    }
    input, textarea, .form-control {
      font-size: 16px!important;
      direction: ltr;
    }
    .max-vh-100 {
      max-height: 100vw!important;
    }
    .max-vh-75 {
      max-height: 75vh!important;
    }
    .max-vh-auto {
      max-height: auto!important;
    }
    .btn {
      --bs-btn-font-size: var(--bs-body-font-size);
      --bs-btn-line-height: 2;
      --bs-border-radius-lg: 2rem;
    }
    .dropdown-menu {
      font-size: var(--bs-body-font-size);
    }
    .btn-group-lg>.btn, .btn-lg {
      --bs-btn-padding-y: 0.75rem;
      --bs-btn-padding-x: 1.25rem;
      --bs-btn-font-size: 1.2rem;
      --bs-btn-border-radius: var(--bs-border-radius-lg);
    }
    .form-floating>.form-control-plaintext~label, .form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label {
      line-height: 2.5rem;
    }

    .form-check-input {
      width: 1.25rem;
      height: 1.25rem;
    }
    .form-floating>.form-control-plaintext:focus, .form-floating>.form-control-plaintext:not(:placeholder-shown), .form-floating>.form-control:focus, .form-floating>.form-control:not(:placeholder-shown) {
      padding-bottom: .625rem;
    }
    .form-floating>.form-control, .form-floating>.form-control-plaintext, .form-floating>.form-select {
      height: calc(4rem + calc(var(--bs-border-width)* 2));
      min-height: calc(4rem + calc(var(--bs-border-width)* 2));
      line-height: 1.25;
    }

  .showonview {
    opacity: 0;
  }
    #conversationform {
    }
    #conversationform .conversation {
      background-color: transparent;
    }
    .page-template-dashboard header {
      left: 0!important;
    }
    .page-template-dashboard #notifications {
      border-top: 1px solid rgba(0,0,0,.5);
      width: 60vw;
    }
    .page-template-dashboard header {
      padding: 0;
    }
    .page-template-dashboard header .header-btn:not(:last-child) {
      border-right: 1px solid rgba(0,0,0,.5);
      border-left: 1px solid rgba(0,0,0,.5);
    }
    .page-template-dashboard header .header-btn:first-child {
      border-left: none;
    }
    .page-template-dashboard .content-area > aside #logo {
      display: none!important;
    }
    .page-template-dashboard .menu-item.logout {
      display: none;
    }
    .page-template-dashboard:not(.hidenav) .content-area > aside {
      left: 0;
      visibility: visible;
      opacity: 1;
      overscroll-behavior: contain;
    }

    .logo {
      height: 2rem;
    }
    body.opennav {
      height: 100%;
      overflow-y: hidden;
    }
    body.opennav .main-navigation.sticky .btn {
      border-color: white!important;
      color: white!important;
    }
    body.opennav .togglenav .btn-bar {
      background-color: white!important;
    }
    .main-navigation.sticky .togglenav .btn-bar {
      background-color: var(--blue-regular);
    }
    .main-navigation.fixed-top + main .header, .main-navigation.fixed-top + main .header ~ .container {
      padding-top: 70px;
    }
    html {
        font-size: calc(16 / 480 * 100vw);
    }
    .content-area.dashboard aside nav a .icon {
      font-size: 1.5rem;
      height: auto;
      width: 30px;
    }
    #logo {
      width: 100px;
    }
    .nav-primary {
      position: fixed;
      right: 0;
      left: 0;
      top: 0;
      bottom: 0;
      opacity: 0;
      visibility: hidden;
      background-color: #fffffff5;
    }
    .nav-primary {
      transition: z-index 0.01s ease-in-out 0.2s;
    }
    .nav-primary .background {
      position: absolute;
      display: flex;
      flex-flow: column;
      align-items: stretch;
      top: 0;
      left: 0;
      right: 0;
      bottom: -2px;
      z-index: -1;
    }
    .nav-primary .background .portion {
      background: #a772ff;
      flex: 1 1 100%;
    }
    .nav-primary .background .portion:nth-child(odd) {
      transform: translateX(-100%);
    }
    .nav-primary .background .portion:nth-child(even) {
      transform: translateX(100%);
    }
    .nav-primary .background .portion:not(:first-child) {
      margin-top: -1px;
    }


    .togglenav {
      display: flex;
      flex-flow: column;
      align-items: center;
      position: relative;
      cursor: pointer;
      margin: auto;
      flex: 0;
      padding: 5px;
      z-index: 10;
      width: 45px;
    }
    .togglenav .btn-bar {
      position: relative;
      width: 1.34em;
      height: 3px;
      border-radius: 5px;
      background: rgba(var(--bs-primary-rgb), 1)!important;
    }
    .togglenav .btn-bar.menu {
      transition: transform 0.3s ease-in-out 0.2s, opacity 0.15s ease-in-out 0.2s;
    }
    .togglenav .btn-bar.menu:not(:first-child) {
      margin-top: 3px;
    }
    .togglenav .btn-bar.menu:nth-child(even) {
        width: 1.8em;
    }
    .togglenav .btn-bar.close {
      transform-origin: center center;
      position: absolute;
      margin-top: -1.5px;
      opacity: 0;
      top: 50%;
      transition: transform 0.2s ease-in-out, opacity 0.05s ease-in-out 0.2s;
    }
    .pricing-box-price {
      flex-direction: column;
      font-size: 55px;
    }
    .pricing-box-price .small {
      margin: 0;
      width: 100%;
      text-align: center;
    }
    body.opennav .nav-section, body.opennav .btn {
      z-index: 1;
      color: white!important;
      border-color: white!important;
    }
    body.opennav .nav-primary {
      transition: z-index 0.01s ease-in-out 0.3s;
      visibility: visible;
      opacity: 1;
      display: flex;
      width: 100%;
      align-items: center;
    }
    body.opennav .nav-primary .background .portion {
      transform: translateX(0%);
      transition: transform 0.1s ease-in-out 0.15s;
    }
    body.opennav .togglenav .btn-bar.close:last-child {
      transform: rotate(-45deg);
    }
    body.opennav .togglenav .btn-bar.menu {
      opacity: 0;
    }
    body.opennav .togglenav .btn-bar.close {
      opacity: 1;
    }
    body.opennav .togglenav .btn-bar.menu {
        transition: transform 0.15s ease-in-out, opacity 0.15s ease-in-out 0.15s;
    }
    body.opennav .togglenav .btn-bar.menu:nth-child(even) {
      transform: translateX(200%);
    }
    body.opennav .togglenav .btn-bar.menu:nth-child(odd) {
        transform: translateX(-400%);
    }
    body.opennav .togglenav .btn-bar.close {
      transition: transform 0.2s ease-in-out 0.15s, opacity 0.05s ease-in-out 0.15s;
    }
    body.opennav .togglenav .btn-bar.close:not(:last-child) {
        transform: rotate(45deg);
    }
    body.opennav .main-navigation ul {
      z-index: 1;
      color: white;
    }
    .main-navigation ul {
      gap: 1rem;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin: auto;
    }
    .main-navigation.sticky a {
      color: var(--blue-regular);
    }
    .main-navigation .nav-item a {
      font-size: 2rem;
      color: white;
    }
    .heroconversation.frame .message {
      margin: 0 20px;
    }
    .heroconversation .message .sender, .heroconversation .message .sender svg {
      width: 30px!important;
      height: 30px!important;
    }
    .main-navigation {
      padding-left: 1rem;
      padding-right: 1rem;
    }
    .main-navigation.sticky {

    }
  }
  @media (min-width: 768px) {
    #getapp {
      display: none!important;
    }
    .fs-md-1 {
      font-size: 2.1875rem!important
    }
    .fs-md-2 {
      font-size: 1.75rem!important
    }
    .fs-md-3 {
      font-size: 1.53125rem!important
    }
    .fs-md-4 {
      font-size: 1.3125rem!important
    }
    .fs-md-5 {
      font-size: 1.09375rem!important;
    }
    .ri-md-xl {
      font-size: 1.5em;
      line-height: .6666em;
      vertical-align: -0.075em;
    }
    .vh-100-b {
        height: Calc(100vh - var(--header-height))!important;
    }
    .vh-75-b {
        height: Calc(75vh - var(--header-height))!important;
    }
    .main-navigation.sticky .logo {
      height: 30px;
    }
    .h-md-100 {
      height: 100% !important;
    }
    .mh-md-100 {
      max-height: 100%!important;
    }
    .w-md-auto {
      width: auto!important;
    }
    .w-md-100 {
      width: 100%!important;      
    }
    .vh-md-100 {
      height: 100vh!important;
    }
    .min-vh-md-100 {
      min-height: 100vh!important;
    }
    .max-vh-md-100 {
      max-height: 100vw!important;
    }
    .max-vh-md-auto {
      max-height: auto!important;
    }
    .mh-md-auto {
      max-height: auto;
    }
    .site-header .btn-outline {
      color: #fff;
      border: 1px solid #fff;
    }
    .shape-divider-bottom {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    .main-navigation .btn-solid,
    .btn-check:active + .navigation .btn-solid,
    .btn-check:checked + .navigation .btn-solid,
    .main-navigation .btn-solid.active,
    .main-navigation .btn-solid:active {
      color: #161c2d;
      background-color: #fff;
      border-color: #fff;
    }
    .display-md-2 {
      font-size: 4.5rem!important;
    }
  }
  /* Media queries for different screen resolutions */
  @media (max-width: 480px) {
    /* Adjust font size for smaller screens */
    html {
        font-size: calc(16 / 480 * 100vw);
    }
    .content-area.dashboard aside nav a .icon {
      font-size: 1rem;
      height: auto;
      width: 30px;
    }
  }
  @media (min-width: 481px) and (max-width: 768px) {
    /* Adjust font size for medium-sized screens */
    html {
      font-size: calc(16 / 768 * 100vw);
    }
  }
  
  @media (min-width: 769px) and (max-width: 1200px) {
    /* Adjust font size for larger screens */
    html {
        font-size: calc(18 / 1200 * 100vw);
    }
  }
  @media (min-width: 1201px) {
    /* Default font size for extra-large screens */
    html {
        font-size: 16px;
    }
  }

  @media (min-width: 1400px) {
    .col-xxl-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-xxl-1-5 {
        flex: 0 0 auto;
        width: 12.5%
    }

    .col-xxl-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-xxl-2-5 {
        flex: 0 0 auto;
        width: 20.83333333%
    }

    .col-xxl-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-xxl-3-5 {
        flex: 0 0 auto;
        width: 29.16666667%
    }

    .col-xxl-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-xxl-4-5 {
        flex: 0 0 auto;
        width: 37.5%
    }

    .col-xxl-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-xxl-5-5 {
        flex: 0 0 auto;
        width: 45.83333333%
    }

    .col-xxl-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-xxl-6-5 {
        flex: 0 0 auto;
        width: 54.16666667%
    }

    .col-xxl-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-xxl-7-5 {
        flex: 0 0 auto;
        width: 62.5%
    }

    .col-xxl-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-xxl-8-5 {
        flex: 0 0 auto;
        width: 70.83333333%
    }

    .col-xxl-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-xxl-9-5 {
        flex: 0 0 auto;
        width: 79.16666667%
    }

    .col-xxl-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-xxl-10-5 {
        flex: 0 0 auto;
        width: 87.5%
    }

    .col-xxl-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .col-xxl-11-5 {
        flex: 0 0 auto;
        width: 95.83333333%
    }

    .col-xxl-12 {
        flex: 0 0 auto;
        width: 100%
    }

}