
/* Colors class start */
@each $color, $shades in $colors {
    @each $shade, $value in $shades {
      .text-#{$color}-#{$shade} {
        color: var(--#{$color}-#{$shade}) !important;
      }
    }
  }
  
.text {
    &--white {
      color: hsl(var(--white));
    }
    &-heading {
      color: var(--main-two-600);
    }
    &-body {
      color: var(--neutral-500);
    }
    &-main {
      color: var(--main-600);
    }

    &-green {
      color: #00b67a;
    }
    &-pink {
      color: #fd1774;
    }
    &-sky {
      color: #41a5fa;
    }
    &-sky-deep {
      color: #1b89aa;
    }
    &-dark-deep {
      color: #31336b;
    }
    &-purple {
      color: #606df1;
    }
    &-paste {
      background-color: #3af062;
    }
    &-yellow {
      color: hsl(var(--yellow)) !important;
    }
    &-spring-green {
      color: hsl(var(--spring-green)) !important;
    }
    &-orange {
      color: hsl(var(--orange)) !important;
    }
    &-blue {
      color: var(--blue-color) !important;
    }
}

.product-bg {
  &-1 {
    background-color: #C4C4C4;
  }
  &-2 {
    background-color: #0B5FB5;
  }
  &-3 {
    background-color: #00A651;
  }
  &-4 {
    background-color: #FEE496;
  }
  &-5 {
    background-color: #BC25BF;
  }
}

.text-gradient-teal {
  background: linear-gradient(270deg, #06766E 0%, #20BA8B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-stroke-yellow {
  -webkit-text-fill-color: hsl(var(--yellow)) !important;
}

/* Colors class End */