/* Figma-like reflected yellow CTA style with hover -> blue */
 
 .skill-bloomer-yellow {
     background: linear-gradient(135deg, #FFD700 0%, #FFC107 100%);
     color: #000;
     border-radius: .75rem;
     /* rounded-lg */
     box-shadow: 0 8px 0 rgba(0, 0, 0, 0.15), 0 10px 18px rgba(0, 0, 0, 0.06);
     /* match the transition used for button transforms */
     transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
     display: inline-flex;
     /* keeps icon and text aligned */
     align-items: center;
     gap: .5rem;
     position: relative;
 }

 /* on hover, turn blue and change text/icon color to white */
 .skill-bloomer-yellow:hover {
     background: linear-gradient(135deg, #0745FF 0%, #004ff8 100%);
     color: #fff !important;
     transform: translateY(-3px);
     box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
 }

 /* a soft, offset shadow backing (Figma-style) */
 .skill-bloomer-yellow::after {
     content: '';
     position: absolute;
     left: 8px;
     top: 8px;
     right: -8px;
     bottom: -8px;
     background: rgba(0, 0, 0, 0.08);
     border-radius: .75rem;
     z-index: -1;
     transition: opacity 0.2s ease, transform 0.2s ease;
 }

 .skill-bloomer-yellow:hover::after {
     opacity: 0.2;
     transform: translate(2px, 6px) scale(1.02);
 }

 /* focus-visible for accessibility */
 .skill-bloomer-yellow:focus-visible {
     outline: 2px solid rgba(7, 69, 255, 0.2);
     outline-offset: 2px;
 }




 /* instructor details page css */
.hide-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
    height: 0;
    width: 0;
}