.skill-toggle-btn {
    cursor: pointer;
    display: inline-flex; /* Changed to inline-flex */
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    padding: 4px 8px;
    color: white;
    border-radius: 4px;
    width: 40px; /* Initial width to fit '+' */
    overflow: hidden; /* Hide overflowing content */
    transition: width 0.3s ease; /* Animate width */
}

.skill-toggle-btn .add-skill-text {
    white-space: nowrap; /* Prevent text wrapping */
    margin-left: 9px;
    opacity: 0; /* Hide text initially */
    visibility: hidden; /* Hide text initially */
    transition: opacity 0.3s ease, visibility 0.9s ease; /* Animate opacity and visibility */
}

.skill-toggle-btn:hover {
    width: 120px; /* Width on hover to fit full text */
}

.skill-toggle-btn:hover .plus {
    display: none; /* Hide '+' symbol */
}

.skill-toggle-btn:hover .add-skill-text {
    opacity: 1; /* Show text */
    visibility: visible; /* Show text */
}

.plus{
    margin-left:102px;
}

.bg-purple {
    background-color: #CD9FCC;
}

.text-purple{
    color: #CD9FCC;
}

.bg-danger-light {
    background-color: #ff989c;
    color: white;
}

.bg-primary-light {
    background-color: #509ebb;
    color: white;
}

.bg-success-light {
    background-color: #62d9cd;
    color: white;
}

.bg-purple-light {
    background-color: #e5c0e4;
    color: white;
}

.block {
    width: 20%; /* Adjust as needed */
    height: 12px;
    border: 1px solid #ddd; /* Grey border */
    margin-right: 5px; /* Space between blocks */
}

.bg-grey {
    background-color: #ccc; /* Grey background */
}


/*Confetti animation*/

body, html {
    width: 100%;
    height: 100%;
}

.confetti {
    left: 0;
    pointer-events: none ;
    position: fixed;
    top: 0;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    height: 100%;
    width: 100%;
}

   .confetti-item {
       position: absolute;
       transform: translate3d(0, 0, 0);
       will-change: transform;
   }

@keyframes confetti-fall {
    0% {
        transform: translateY(-100%)
    }
    95%{
        animation-timing-function: ease-in-out;
        transform: translateY(calc(100vh - 55%))
    }
    100% {
        transform: translateY(calc(150vh - 65%))
    }
}

.scrollable-container {
    overflow-x: scroll;
    overflow-y: hidden;
    max-width: 90vw !important;
    white-space: nowrap;
    padding-bottom: 1rem; /* Optional: Add some space for better appearance */
}

.scrollable-container .row {
    display: flex;
    flex-wrap: nowrap; /* Prevent columns from wrapping to the next line */
}

.scrollable-container .col-md-6,
.scrollable-container .col-lg-4,
.scrollable-container .col-xl-4,
.scrollable-container .col-xxl-3 {
    flex: 0 0 auto; /* Prevent columns from shrinking or growing */
}

.skill-cards{
    overflow-y: scroll;
    max-height: 75vh !important;
}

.dn{
    height: 0 !important;
}

.skill-column{
    min-width: 350px !important ;
}