@tailwind base;
@tailwind components;
@tailwind utilities;

.feature-box .icon-box{
   background-color: #FCCC42;
   padding: 8px;
   border-radius: 50%;
}

.feature-box .active .icon-box{
    background-color: #6844DF;

} 

.feature-box .active .icon-box svg path{ 
   stroke: white;
    
} 

html {
  scroll-behavior: smooth;
}

.toc-link div {
    background-color: #f5f5f5; /* default bg */
    color: #737373; /* default text */
    font-weight: normal;
    transition: all 0.2s ease;
  }

  .toc-link:hover div {
    background-color: #e5e5ff; /* hover bg */
    color: #27272a; /* hover text */
  }

  .toc-link.active div {
    background-color: #ede9fe; /* active bg */
    color: #18181b; /* active text */
    font-weight: 600;
  }

  .step-tab .step-text {
    display: none;

  }
  .step-tab.active .step-text {
    display: inline-block;

  }
  .step-tab.active {
    padding-inline: calc(var(--spacing) * 3);

  }