.img-thumbnail {
    width: 150px;
}

.nav-logo {
    max-height: 50px;
}

.product-card-header {
    min-height: 70px;
}

.tag-badge {
    padding: 0.6em;
    font-size: 0.9em;
}

.text-justify {
    text-align: justify;
}

.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}

@media (min-width: 768px) {
.bd-placeholder-img-lg {
    font-size: 3.5rem;
}
}

.b-example-divider {
width: 100%;
height: 3rem;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
}

.bi {
vertical-align: -.125em;
fill: currentColor;
}

.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}

.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}

.btn-bd-primary {
--bd-violet-bg: #712cf9;
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;

--bs-btn-font-weight: 600;
--bs-btn-color: var(--bs-white);
--bs-btn-bg: var(--bd-violet-bg);
--bs-btn-border-color: var(--bd-violet-bg);
--bs-btn-hover-color: var(--bs-white);
--bs-btn-hover-bg: #6528e0;
--bs-btn-hover-border-color: #6528e0;
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
--bs-btn-active-color: var(--bs-btn-hover-color);
--bs-btn-active-bg: #5a23c8;
--bs-btn-active-border-color: #5a23c8;
}

.bd-mode-toggle {
z-index: 1500;
}

.bd-mode-toggle .dropdown-menu .active .bi {
display: block !important;
}

.callout {
    padding: 20px;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
}

.balloon-container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    opacity: 0.2;
    width: 100%;
    height: 100%;
}

.balloon {
    width: 100px;
    height: 200px;
    position: absolute;
}

.balloon.red {
    top: 10%;
    left: 10%;
    animation: float 2s ease-in-out infinite, side-to-side 4s ease-in-out infinite;
}

.balloon.blue {
    top: 20%;
    left: 30%;
    animation: float 7s ease-in-out infinite, side-to-side 5s ease-in-out infinite;
}

.balloon.green {
    top: 30%;
    left: 50%;
    animation: float 8s ease-in-out infinite, side-to-side 6s ease-in-out infinite;
}

.balloon.yellow {
    top: 40%;
    left: 70%;
    animation: float 9s ease-in-out infinite, side-to-side 7s ease-in-out infinite;
}

.balloon.pink {
    top: 40%;
    left: 20%;
    animation: float 10s ease-in-out infinite, side-to-side 8s ease-in-out infinite;
}

.balloon.purple {
    top: 60%;
    left: 40%;
    animation: float 11s ease-in-out infinite, side-to-side 9s ease-in-out infinite;
}

.balloon.orange {
    top: 60%;
    left: 60%;
    animation: float 12s ease-in-out infinite, side-to-side 10s ease-in-out infinite;
}

.balloon.bluetwo {
    top: 55%;
    left: 80%;
    animation: float 12s ease-in-out infinite, side-to-side 7s ease-in-out infinite;
}

.balloon.redtwo {
    top: 20%;
    left: 90%;
    animation: float 13s ease-in-out infinite, side-to-side 8s ease-in-out infinite;
}

.balloon.greentwo {
    top: 55%;
    left: 5%;
    animation: float 10s ease-in-out infinite, side-to-side 9s ease-in-out infinite;
}

.balloon path {
    animation: sway 5s ease-in-out infinite;
}

.border-radius-small {
    border-radius: 0.2rem;
}

@keyframes float {
0% {
    transform: translateY(0) rotate(0deg);
}
25% {
    transform: translateY(-80px) rotate(-2deg); /* Add upward movement and slight counterclockwise rotation */
}
50% {
    transform: translateY(0) rotate(0deg); /* Return to original position with no rotation */
}
75% {
    transform: translateY(60px) rotate(2deg); /* Add downward movement and slight clockwise rotation */
}
100% {
    transform: translateY(0) rotate(0deg); /* Return to original position */
}
}

@keyframes side-to-side {
0% {
    transform: translateX(0);
}
50% {
    transform: translateX(30px); /* Move slightly to the side */
}
100% {
    transform: translateX(0);
}
}

@keyframes sway {
0% {
transform: translateY(0) translateX(0);
}
50% {
transform: translateX(3px); /* Subtle upward and sideways movement */
}
100% {
transform: translateY(0) translateX(0);
}
}

.balloon-float {
    animation: float var(--float-duration) ease-in-out infinite alternate;
}

@keyframes float {
    0% { transform: translate(0, 0); }
    20% { transform: translate(var(--float-offset-x), var(--float-offset-y)); }
    40% { transform: translate(calc(var(--float-offset-x) * -0.8), calc(var(--float-offset-y) * -0.8)); }
    60% { transform: translate(calc(var(--float-offset-x) * 0.6), calc(var(--float-offset-y) * 0.6)); }
    80% { transform: translate(calc(var(--float-offset-x) * -0.4), calc(var(--float-offset-y) * -0.4)); }
    100% { transform: translate(0, 0); }
}

@font-face {
    font-family: 'DynaPuff';
    src: url('/font/DynaPuff/DynaPuff-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-display: swap;
}
:root {
    --bs-primary: #8e12d6;
    --bs-secondary: #6c757d;
    --bs-body-bg: #ffffff;
    --bs-body-color: #212529;
    --bs-border-color: #dee2e6;
    --bs-link-color: #0d6efd;
    --bs-link-hover-color: #7f10c0;
    --bs-modal-width: 750px;
  }
  
  /* Dark Mode Styles */
  @media (prefers-color-scheme: dark) {
    :root {
      --bs-primary: #8e12d6;
      --bs-secondary: #aaaaaa;
      --bs-body-bg: #121212;
      --bs-body-color: #dee2e6;
      --bs-border-color: #333;
      --bs-link-color: #0d6efd;
      --bs-link-hover-color: #7f10c0;
      --bs-table-color: #dee2e6;
      --bs-secondary-color: #ccd0d3;
    }
    .select2-container {
      background-color: #121212 !important;
    }
    .select2-dropdown--below {
      background-color: #121212 !important;
    }
    .select2-dropdown {
      background-color: #121212 !important;
    }
    .select2-selection__choice {
      background-color: #121212 !important;
    }
  }

  .table>:not(caption)>*>* {
    color: inherit !important; /* Ensures it takes the theme’s text color */
}
  
  /* Apply Background and Text Colors */
  body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
  }
  
  /* Button Styles */
  .btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
  }
  
  .btn-primary:hover {
    background-color: var(--bs-link-hover-color);
    border-color: var(--bs-link-hover-color);
  }
  
  /* Links */
  a {
    color: var(--bs-link-color);
    text-decoration: none;
  }
  
  a:hover {
    color: var(--bs-link-hover-color);
    text-decoration: underline;
  }
  
  /* Card Styles */
  .card {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
  }
  
  /* Navbar */
  .navbar {
    background-color: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
  }
  
  .navbar .nav-link {
    color: var(--bs-body-color);
  }
  
  .navbar .nav-link:hover {
    color: var(--bs-primary);
  }
  
  /* Forms */
  input, textarea, select {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
  }
  
  input:focus, textarea:focus, select:focus {
    border-color: var(--bs-primary);
    outline: none;
    box-shadow: 0 0 5px var(--bs-primary);
  }
  
  /* Table */
  .table {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
  }
  
  .table thead {
    background-color: var(--bs-primary);
  }
  
  .table tbody tr {
    border-bottom: 1px solid var(--bs-border-color);
  }
  
  .table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
  }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: 120px; /* Adjust according to your fixed header height */
  }

  .status-pulse {
      display: inline-block;
      animation: pulse 2s infinite ease-in-out;
  }
  .bg-color {
      background-color: var(--bs-body-bg);
  }
  @keyframes pulse {
      0% { transform: scale(0.85); opacity: 1; }
      50% { transform: scale(1.15); opacity: 0.5; }
      100% { transform: scale(0.85); opacity: 1; }
  }
  .o-50 {
    opacity: 0.5;
    transition: opacity 0.3s ease;
  }

  .o-50:hover {
    opacity: 1;
  }