body {
    font-family: 'yekan-bakh', sans-serif;
    margin: auto;
}

::-webkit-scrollbar {
    width: 5px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f5f5f5 !important;
    border-radius: 10px !important;
}

::-webkit-scrollbar-thumb {
    background-color: rgb(0, 31, 51) !important;
    border: 2px solid rgb(0, 31, 51) !important;
    border-radius: 500px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgb(0, 31, 51) !important;
}

.collection-wrapper .card {
    border: none;
    border-radius: 0;
}

.collection-wrapper .card-text {
    border: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.collection-wrapper .card img {
    border-radius: 0;
}

.collection-wrapper .card a {
    text-decoration: none;
    color: #7A7A7A;
}

.collection-wrapper .card-text {
    display: flex;
    flex-direction: column;
}

.collection-wrapper .text-title {
    text-align: start;
    line-height: 26px;
    color: rgb(0, 31, 51);
    font-size: 20px;
    font-weight: 600;
}

.collection-wrapper .card-info {
    text-align: start;
    color: #7A7A7A;
    font-weight: 300;
    line-height: 23px;
    font-size: 14px;
}

.collection-wrapper .card {
    --c: #926C15; /* the border color */
    --b: 1px; /* the border thickness*/
    --g: 5px; /* the gap on hover */

    padding: calc(var(--g) + var(--b));
    --_g: #0000 25%, var(--c) 0;
    background: conic-gradient(from 180deg at top var(--b) right var(--b), var(--_g)) var(--_i, 200%) 0  /200% var(--_i, var(--b)) no-repeat,
    conic-gradient(at bottom var(--b) left var(--b), var(--_g)) 0 var(--_i, 200%)/var(--_i, var(--b)) 200% no-repeat;
    transition: .8s, background-position .8s .8s;
    cursor: pointer;
}

.collection-wrapper .card:hover {
    --_i: 100%;
    transition: .8s, background-size .8s .8s;
}