/*!*******************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/global.scss ***!
  \*******************************************************************************************************************************************/
:root {
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-56: 3.5rem;
  --space-64: 4rem;
  --space-72: 4.5rem;
  --space-80: 5rem;
  --space-88: 5.5rem;
  --space-96: 6rem;
  --space-104: 6.5rem;
  --space-112: 7rem;
  --space-120: 7.5rem;
  --space-128: 8rem;
  --primary: #22A078;
  --primary-dark: #0F4836;
  --secondary: #999F9C;
  --tertiary: #94624C;
  --text: #000000;
  --accent: #A7BC67;
  --upcycled: #A6A6A6;
  --organic:#6BA539;
  --euro-eco:#2C5AA0;
  --bamboo:#91B189;
  --merino-wool: #E5DCC3;
  --nylon: #8B9CA7;
  --elastane: #C8CCD0;
}

/* Base styles for accordion content */
.elementor-accordion .elementor-accordion-item .elementor-accordion-content {
  max-height: 0;
  opacity: 0;
  transform-origin: top;
  transform: scaleY(0.95);
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, transform 0.4s ease;
}

/* Active (open) accordion content */
.elementor-accordion .elementor-accordion-item.elementor-active .elementor-accordion-content {
  max-height: 1000px;
  /* big enough to fit content */
  opacity: 1;
  transform: scaleY(1);
}

/* Optional for the trigger rotation */
.trigger.rotated {
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.trigger {
  transition: transform 0.3s ease;
  cursor: pointer;
}

/*
Usage:

Add the class "pill-tabs" to the outer container of your tabs widget:

<div class="elementor-element ... pill-tabs elementor-widget ...">
  <div class="e-n-tabs-heading" role="tablist">
    <button class="e-n-tab-title" aria-selected="true" role="tab">Tab 1</button>
    <button class="e-n-tab-title" aria-selected="false" role="tab">Tab 2</button>
  </div>
</div>

This styles the tab buttons inside the heading as centered pills,
with rounded left edges on the first tab and rounded right edges on the last tab.
The active tab is indicated by aria-selected="true".

*/
/* Center the two tab buttons inside the pill-tabs container */
.pill-tabs .e-n-tabs-heading {
  display: flex;
  justify-content: center;
  gap: 0;
  /* no gap for a seamless pill shape */
}

/* Base styling for both tab buttons */
.pill-tabs .e-n-tabs-heading .e-n-tab-title {
  padding: 0.5em 1.5em;
  border: 1px solid #333;
  background: #f0f0f0;
  cursor: pointer;
  font-weight: 600;
  user-select: none;
  transition: background-color 0.3s ease, color 0.3s ease;
  /* Prevent double border between buttons */
  margin: 0;
}

/* Round only the left side of the first tab */
.pill-tabs .e-n-tabs-heading .e-n-tab-title:first-of-type {
  border-right: none;
  border-radius: 50px 0 0 50px;
}

/* Round only the right side of the last tab */
.pill-tabs .e-n-tabs-heading .e-n-tab-title:last-of-type {
  border-left: none;
  border-radius: 0 50px 50px 0;
}

/* Highlight the active tab */
.pill-tabs .e-n-tabs-heading .e-n-tab-title[aria-selected=true] {
  background-color: #333;
  color: white;
  font-weight: 700;
  cursor: default;
}

.card-wrapper {
  border: none;
  display: flex;
  overflow: hidden;
}
.card-wrapper .card {
  display: flex;
}
.card-wrapper .card.single-metric-card .card-icon {
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  width: 100%;
}
.card-wrapper .card.single-metric-card .card-icon img {
  max-width: 100%;
  height: auto;
}
.card-wrapper .card.single-metric-card .card-content {
  display: flex;
  flex-direction: column;
}
.card-wrapper .card.single-metric-card.box {
  text-align: center;
}
.hover-info {
  display: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.hover-info.visible {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

ul.no-bullets {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}