/* Estilos responsivos para telas com largura máxima de 480px */
@media (max-width: 480px) {

    /* Ajustes no cabeçalho para telas pequenas */
    header {
        .list-microsoft {
            display: none;
            /* Esconde a lista principal da Microsoft */
        }

        .list-microsoft-resp {
            display: block;
            /* Exibe a lista alternativa para mobile */
        }
    }

    /* Ajustes no carrossel para telas pequenas */
    .slide {
        .carousel-inner {
            height: 520px;
            /* Define a altura do carrossel */
            box-shadow: 0.125rem .25rem rgba(0, 0, 0, .13), 0 0.0625rem 0 rgba(0, 0, 0, .11) !important;
        }

        .carousel-control-prev,
        .carousel-control-next {
            top: -50px;
            /* Ajusta a posição dos botões de navegação */

        }

        .img-carousel {
            display: none;
            /* Esconde a imagem principal do carrossel */
        }

        .img-carousel-resp {
            display: block;
            /* Exibe a imagem responsiva */
        }


        .carousel-item .slider-items {
            width: 80%;
            /* Aumenta a largura do conteúdo para melhor adaptação */
            position: static;
            margin-top: 20px;


            h2 {
                font-size: 1.5rem;
                /* Reduz o tamanho do título para melhor legibilidade */
                margin-bottom: 10px;
            }
        }

    }

    /* Ajustes na seção de links */
    .links {
        flex-wrap: wrap;
        /* Permite que os itens se ajustem automaticamente */
        padding: 10px;
        margin: 20px 0;
    }

    /* Ajustes nos cartões para telas menores */
    .wrapper-cards {
        flex-direction: column;
        /* Empilha os cartões verticalmente */
        align-items: center;
    }

    /* Ajustes no banner para telas pequenas */
    .banner {
        flex-direction: column;
        /* Empilha os elementos verticalmente */
        margin: 40px 0;

        .card {
            width: 100%;
            /* Faz com que o cartão ocupe toda a largura disponível */
            position: static;
            padding: 5px;
        }
    }

    /* Ajuste no botão de início */
    .btn-start {
        position: static;
        /* Remove a posição fixa para melhor adaptação */
    }

    /* Ajustes no rodapé para telas pequenas */
    .footer {
        flex-direction: column;
        /* Empilha os itens do rodapé */

    }
}