:root {
  --purple-gray: #898197; 
  /* #716d79 */
}

html,
body {
  scroll-behavior: smooth;
}

.lab-o-back-color {
  background-color: #633fb9;
}

.lab-back-color {
  background-color: #633fb9;
}

.lab-back-color:hover {
  background-color: #6f46cf;
}

.lab-back-color:active {
  background-color: #6741c0 !important;
}

.pointer {
  cursor: pointer;
}

.labs-btn-gradient {
  background: rgb(153,86,255);
  background: linear-gradient(82deg, rgba(153,86,255,1) 0%, rgba(118,69,237,1) 100%);
  transition: background 200ms;
}

.labs-btn-gradient:hover {
  background: linear-gradient(82deg, rgba(153,86,255,1) 0%, rgba(118,69,237,1) 100%);
}

.text-labs-gradient {
  background: linear-gradient(82deg, rgba(153,86,255,1) 0%, rgba(118,69,237,1) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-dark-labs-gradient {
  background: linear-gradient(82deg, rgb(135, 72, 230) 0%, rgb(102, 61, 196) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lab-font-color, .lab-font-color-btn {
  color: #633fb9;
}

.lab-font-color-btn:hover {
  color: #6e45cc;
}

.lab-font-color-btn:active {
  color: #6e45cc !important;
}

.lab-font-color-btn:focus {
  color: #6e45cc !important;
}

.purple-eyebrow-text {
  color: #9554fd;
}

@media only screen and (max-width: 533px) {
  .benefit-container .check-icon {
    width: 1.8rem !important;
  }
}

@media only screen and (max-width: 377px) {
  .hero-btn-font-fix {
    font-size: 0.95rem;
  }
}

@media only screen and (max-width: 345px) {
  .hero-btn-font-fix {
    font-size: 0.9rem;
  }
}

@media only screen and (max-width: 330px) {
  .hero-btn-font-fix {
    font-size: 0.85rem;
  }
}

@media only screen and (max-width: 337px) {
  .benefit-container .check-icon {
    width: 1.6rem !important;
  }
}