:root{
    --pri-color: #bff2e1;
    --pri-dark: #20c997;
    --white: #f6f6f6;
    --black: #1a1a1a;
    --open-sans-font: "Open Sans", sans-serif;
    --poppins: "Poppins", sans-serif;
    --border-color: rgb(211, 211, 211);
    --border-color2: rgb(138, 138, 138);
    --text-color: #6c6c6c;
    --marquee: rgb(242, 242, 242);
}

.marquee{
    margin-top: 3rem;
    display: flex;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background-color: white;
    overflow: hidden;
    gap: 3rem;
    padding: 1rem;
}

.marquee > div {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 3rem;
    animation: scroll 30s linear infinite;
}

.marquee > div:hover{
    animation-play-state: paused;
}

.marquee img{
    width: 1.3rem;
    opacity: 0.8;
    /* border: 1px solid rgba(255, 255, 255, 0.248); */
}

.marquee > div p{
    display: inline-block;
    text-transform: capitalize;
    white-space: nowrap;
    font-weight: 600;
    font-family: var(--open-sans-font);
}

@keyframes scroll{
    0%{
        transform: translateX(0%);
    }

    100%{
        transform: translateX(calc(-50%));
    }
}