body.offcanvas-backdrop-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
  }

.navbar-toggler {
    border: none !important;
}

.offcanvas .btn-main {
    width: 100%;
}

.offcanvas .btn-slide {
    justify-content: center;
}

.offcanvas-body {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.navbar-nav {
    justify-content: flex-start;
}
.navbar-nav a.nav-link {
    font-size: 24px;
}

.container {
    width: 90%;
}

/* mobile.css */

.text-lg {
    font-size: calc(var(--font-size-lg) * 0.8);
  }
  
  .text-xl {
    font-size: calc(var(--font-size-xl) * 0.8);
  }
  
  .text-2xl {
    font-size: calc(var(--font-size-2xl) * 0.8);
  }
  
  .text-3xl {
    font-size: calc(var(--font-size-3xl) * 0.8);
  }
  
  .text-4xl {
    font-size: calc(var(--font-size-4xl) * 0.8);
  }
  
  .kenburns-wrapper {
    aspect-ratio: 1/1;
  }

  .package-nav {
    width: 100%;
  }

  .package-title-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* smooth scroll for iOS */
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Firefox */
    width: 100%;
  }
  .package-title-nav::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
  
  .package-title-nav .nav-link {
    width: fit-content;
    flex-shrink: 0;
    scroll-snap-align: start;
    text-align: center;
  }

  .img-tab {
    height: 25px;
    margin: 0 auto;
  }

  .mobile-ratio-1x1  { aspect-ratio: 1 / 1; }
  .mobile-ratio-4x5  { aspect-ratio: 4 / 5; }
  .mobile-ratio-2x3  { aspect-ratio: 2 / 3; }
  .mobile-ratio-3x4  { aspect-ratio: 3 / 4; }
  .mobile-ratio-9x16 { aspect-ratio: 9 / 16; }
  .mobile-ratio-16x9 { aspect-ratio: 16 / 9; }