[v-cloak] {display: none;}
.hide {display: none;}
.invisible {visibility: hidden;}

:root,body.light {
--primary:#bc004b;
--on-primary:#ffffff;
--primary-container:#ffd9de;
--on-primary-container:#400014;
--secondary:#75565b;
--on-secondary:#ffffff;
--secondary-container:#ffd9de;
--on-secondary-container:#2c1519;
--tertiary:#795831;
--on-tertiary:#ffffff;
--tertiary-container:#ffddba;
--on-tertiary-container:#2b1700;
--error:#ba1a1a;
--on-error:#ffffff;
--error-container:#ffdad6;
--on-error-container:#410002;
--background:#fffbff;
--on-background:#201a1b;
--surface:#fff8f7;
--on-surface:#201a1b;
--surface-variant:#f3dddf;
--on-surface-variant:#524345;
--outline:#847375;
--outline-variant:#d6c2c3;
--shadow:#000000;
--scrim:#000000;
--inverse-surface:#362f2f;
--inverse-on-surface:#fbeeee;
--inverse-primary:#ffb2be;
--surface-dim:#e3d7d8;
--surface-bright:#fff8f7;
--surface-container-lowest:#ffffff;
--surface-container-low:#fdf1f1;
--surface-container:#f8ebeb;
--surface-container-high:#f2e5e6;
--surface-container-highest:#ece0e0;
}
/* body.dark { } */


.fade-enter-active, .fade-leave-active {transition: opacity 0.5s ease;}
.fade-enter-from, .fade-leave-to {opacity: 0;}




.carousel{
  display: flex;
  overflow-x: auto; /* Enable horizontal scrolling */
  scroll-behavior: smooth; /* Smooth scrolling when using nav links */
  scroll-snap-type: x mandatory; /* Ensure items snap into view */
  -webkit-overflow-scrolling: touch; /* for iOS smooth scrolling */
  scrollbar-color: #000000 #333333;
}

.carousel::-webkit-scrollbar {height: 20px;}
.carousel::-webkit-scrollbar-track {background: #333333;}
.carousel::-webkit-scrollbar-thumb {background: #000000;}




.carousel-item {
  flex: 0 0 100%; /* Each item takes full width of the wrapper at any given time */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  scroll-snap-align: start; 
  /* Snap to the start of the item */
 
}