.quote-box{
    position: relative;
    display: inline-block;
    /* border-left-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 1px; */
}

.quote-box.scrolled {
    border-color: #1b1b1b; /* Final border color after animation */
}

.quote-box::before{
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: 0;
    height: 0;
    background: transparent;
    border: 1px solid transparent;
    /* border-left-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 1px; */
}

.quote-box.scrolled::before{
    animation: animate 1s linear forwards;
}

@keyframes animate {
    0%{
        width: 0;
        height: 0;
        border-top-color: #1b1b1b;
        border-left-color: transparent;
        border-bottom-color: transparent;
        border-right-color: transparent;
    }
    50%{
        width: 100%;
        height: 0;
        border-top-color: #1b1b1b;
        border-left-color: #1b1b1b;
        border-bottom-color: transparent;
        border-right-color: transparent;
    }
    100%{
        width: 100%;
        height: 100%;
        border-top-color: #1b1b1b;
        border-left-color: #1b1b1b;
        border-bottom-color: #1b1b1b;
        border-right-color: transparent;
    }
    
}

.quote-box::after{
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: 0;
    height: 0;
    background: transparent;
    border: 1px solid transparent;
    /* border-left-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 1px; */
}

.quote-box.scrolled::after{
    animation: animate2 1s forwards;
}

@keyframes animate2 {
    0%{
        width: 0;
        height: 0;
        border-top-color: transparent;
        border-left-color: #1b1b1b;
        border-bottom-color: #1b1b1b;
        border-right-color: transparent;
    }
    50%{
        width: 0;
        height: 100%;
        border-top-color: #1b1b1b;
        border-left-color: #1b1b1b;
        border-bottom-color: transparent;
        border-right-color: transparent;
    }
    100%{
        width: 100%;
        height: 100%;
        border-top-color: #1b1b1b;
        border-left-color: transparent;
        border-bottom-color: transparent;
        border-right-color: transparent;
    }
    
}