.header-container {
            display: flex !important;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .header-container div {
            display: none;
        }

        .view-all {
            justify-self: center;
            margin-top: 10px;
        }

        @media (max-width: 768px) {


            .title {
                font-size: 24px;
                margin-bottom: 10px;
            }



        }
        .brand-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            text-decoration: none;
        }

        .brand-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
        }

        .fade-out {
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .fade-in {
            opacity: 1;
            transition: opacity 0.5s ease;
        }