.circ-title {
  stroke: none;
  fill: #fff;
  font-weight: 400;
  font-size: 32px;
}

.circl-desc {
  stroke: none;
  fill: #8f939c;
  font-weight: 100;
  font-size: 26px;
}

.scale-on-hover {
  transition: transform 0.3s ease-in-out;
  transform-origin: center;
  transform-box: fill-box;
}

.scale-on-hover:hover {
  transform: scale(2);
}

.plus-icon-bg {
  background: linear-gradient(180deg, #7A90FF 0%, #455AFF 100%);
}

.menu-items-selected {
  background: linear-gradient(180deg, #667AFF 0%, #3951E5 100%);
}

.subscription-card {
  background: linear-gradient(135deg, #6F78EA 0%, #435AF8 100%);
}

.buy-button {
  background: linear-gradient(180deg, #6579FE 0%, #3C57FF 100%);
  border-radius: 8px;
}

/* Wheel labels */
.circ-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.2px;
  fill: #e9eefc;
}
.circl-desc {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.15px;
  fill: #aab4c7;
}




   /* Page background pattern (subtle) */
/* Page background: your image + subtle radial overlay */
body {
  background-color: #0b0e16;
  background-image:
    radial-gradient(transparent 70%, rgba(0,0,0,.25)),
    radial-gradient(transparent 70%, rgba(0,0,0,.25)),
    url("images/background2.jpg");
  background-size: 600px 600px, 600px 600px, 600px 600px; /* all repeating */
  background-position: 0 0, 300px 300px, 0 0;
  background-repeat: repeat, repeat, repeat;
  background-attachment: fixed, fixed, fixed;
  color: #c7cfdd;
}




    .scale-on-hover { transition: transform .2s ease; }
    .scale-on-hover:hover { transform: scale(1.06); }

    /* Wheel text styles */
    .circ-title { fill: #cbd4e1; font-size: 16px; font-weight: 600; letter-spacing: .2px;}
    .circl-desc { fill: #9aa6bd; font-size: 12px; letter-spacing: .3px;}

    /* Lab cards: equal heights */
    .lab-card       { min-height: 188px; }
    .lab-card-title { min-height: 40px;  text-align: center; }
    .lab-card-cat   { min-height: 32px;  text-align: center; color:#aeb6c5; }

    /* Hide default text selection glow on dark bg for nicer look */
    ::selection{ background:#5a6fff66; }


  /* Smooth grow on hover for SVG <image> (rim icons) and HTML <img> (center art) */
  .scale-on-hover{
    transition: transform 220ms cubic-bezier(.22,1,.36,1);
    will-change: transform;
    transform-origin: center center; /* for normal <img> */
  }
  /* Make transforms originate from the icon’s own box inside the SVG */
  svg image.scale-on-hover{
    transform-box: fill-box;
    transform-origin: center center;
  }
  @media (hover:hover) and (pointer:fine){
    .scale-on-hover:hover{ transform: scale(1.10); } /* tweak 1.06–1.14 if you want */
  }
  @media (prefers-reduced-motion: reduce){
    .scale-on-hover{ transition: none; }
  }






/* Left Sidebar Menu Hover Background Only */

/* Targets the default background of the list items inside the sidebar */
.bg-\[\#1d212c\] {
  background-color: #1a1e29 !important; /* Slightly darker default state */
}

/* Targets the hover state class */
.hover\:bg-\[\#232839\]:hover {
  background-color: #10131d !important; /* Very dark blue for hover */
}

/* Targets the selected state (if used) which was previously a gradient/brighter color */
.menu-items-selected {
  background: #10131d; /* Dark Blue for selected/active items */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}