@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&family=Leckerli+One&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&family=Send+Flowers&display=swap');

:root{
    --background-main: #faf9f6;
    --background-sec: #F0F2F5;
    --background-third: #F7F6F3;
    --background-fourth: #121212;
    --accent-gold: #CCac00;
    --box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);

    --text-regular1: Roboto;
    --text-regular2: Open Sans;
    --text-bold: Cal Sans;          
    --text-stylish: Leckerli One;
}

main{
    .slider-container {
        overflow: hidden;
        width: 100%;
        background: var(--background-third);
        margin: 150px 0;
        padding: 40px 0;

        .slider-track {
            display: flex;
            gap: 80px;
            animation: scroll 30s linear infinite;
            filter: grayscale(100%);
            opacity: 0.7;

            .brand-item {
                flex-shrink: 0;
                font-size: 1.1rem;
                font-weight: bold;
                color: #333;
            }
            .design-1{
                font-family: var(--text-stylish);
            }
            .design-2{
                font-family: var(--text-regular2);
            }
            .design-3{
                font-family: var(--text-bold);
            }
            .design-4{
                font-family: Send Flowers;
            }

            &:hover {
                animation-play-state: paused;
            }
        }
    }
}
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
@media(max-width: 850px){
    main{
        .slider-container{
            .slider-track{
                width: max-content;
            }
        }
    }
}