@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{
    .logo-carousel{
        width: 100%;
        height: 70px;
        margin: 100px 0;
        background: var(--background-third);
        overflow: hidden;

        .swiper-wrapper{
            display: flex;
            gap: 90px;
            height: 100%;
            animation: scroll 25s linear infinite;
            transition: all .2s ease-in-out;
            cursor: pointer;

            .swiper-slide{
                display: flex;
                align-items: center;
                height: 100%;

                div{
                    font-size: 1.2rem;
                    width: auto;
                    white-space: nowrap;
                    object-fit: contain;
                    filter: grayscale(100%);
                    opacity: 0.7;
                    transition: all 0.3s ease;

                    &:hover {
                        filter: grayscale(0%);
                        opacity: 1;
                    }
                }

                .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: 900px){
    main{
        .logo-carousel{
            .swiper-wrapper{
                animation: scroll 10s linear infinite;
            }
        }
    }
}