.tw-course-carousel-container {
    /* Contêiner geral para o carrossel de cursos */
    .tw-course-carousel-wrapper {
        /* Container para os itens do carrossel */

        /* background-color: #eddbcf!important; */
        /* Comentado: Antes possuía um fundo amarelo claro, agora removido */

        position: relative; /* Permite o uso de posicionamento absoluto em elementos filhos, como a navegação */
        
        .tw-course-image {
            object-fit: cover; /* Faz com que a imagem cubra o espaço disponível sem distorcer */
            object-position: center; /* Centraliza a imagem dentro do contêiner */
            border-radius: 20px; /* Bordas arredondadas nas imagens */
            aspect-ratio: 4/3; /* Define a proporção da imagem (largura/altura) para 4:3 */
            width: 100%; /* A imagem ocupa toda a largura disponível */
        }

        a {
            text-decoration: none !important; /* Remove o sublinhado padrão dos links */

            h3 {
                font-size: 16px; /* Define o tamanho da fonte do título do curso */
               /* font-weight: 600;  Define o peso da fonte como negrito */
                color: #222222; /* Cor do texto do título do curso */
                margin: 16px 0 0 0 !important; /* Margem superior de 16px, removendo margens nos outros lados */
				font-family: 'Funnel Display', sans-serif !important;
				font-weight: 500 !important;
            }

            .tw-course-types {
                font-size: 14px; /* Tamanho da fonte para informações de tipo de curso */
                font-weight: 400; /* Peso da fonte regular */
                color: #222222; /* Cor do texto das informações de tipo do curso */
				font-family: 'DM Sans', sans-serif !important;
				
            }
        }

        .tw-course-link {
            background-color: #f85a00; /* Cor de fundo laranja para o botão "Ingressar" */
            color: #fff; /* Cor do texto do botão */
            padding: 6px 48px; /* Espaçamento interno (6px de altura e 48px de largura) */
            border-radius: 100px; /* Bordas arredondadas para o botão */
            font-size: 14px; /* Tamanho da fonte do botão */
            font-weight: 600; /* Peso da fonte em negrito */
            margin-top: 16px !important; /* Margem superior de 16px para separar o botão do conteúdo */
            display: inline-block; /* Exibe o botão como um bloco inline, permitindo definir largura */
        }

        .owl-nav {
            position: absolute; /* Posiciona a navegação de controle do carrossel de forma absoluta */
            width: 100%; /* A largura é 100% do seu contêiner pai */
            top: 30%; /* A posição do topo é 30% da altura do contêiner */
            transform: translateY(-50%); /* Centraliza verticalmente */
            margin-top: 0;
            pointer-events: none; /* Desabilita a interação com a navegação, será ativada nos botões */
            z-index: 10; /* Garante que a navegação fique acima dos itens do carrossel */

            button.owl-prev,
            button.owl-next {
                position: absolute; /* Posiciona os botões de navegação de forma absoluta dentro do contêiner */
                width: 40px;
                height: 40px;
                background: #58326b !important; /* Cor de fundo dos botões de navegação */
                color: #f85a00 !important; /* Cor do ícone dos botões */
                border-radius: 50%; /* Bordas arredondadas para os botões */
                pointer-events: auto; /* Habilita a interação com os botões */
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra nos botões para destaque */
                transition: all 0.3s ease; /* Transição suave nas mudanças de estado */
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0;
                line-height: 0; /* Remover o espaço da linha no botão */
                
                svg,
                path {
                    color: #fff !important; /* Cor do ícone dentro do botão */
                    stroke: #fff !important; /* Cor do contorno do ícone */
                }

                &:hover {
                    background: #f85a00 !important; /* Cor de fundo do botão ao passar o mouse */
                    color: #fff !important; /* Cor do ícone ao passar o mouse */
                }

                span {
                    font-size: 24px; /* Tamanho do ícone de navegação */
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    line-height: 0;
                    height: auto;
                    width: auto;
                    margin-top: -2px;
                    margin-left: -1px;
                }
            }

            button.owl-prev span {
                margin-left: -2px; /* Ajuste para alinhar o ícone corretamente */
            }

            button.owl-next span {
                margin-right: -1px; /* Ajuste para alinhar o ícone corretamente */
            }

            button.owl-prev {
                left: -20px; /* Posiciona o botão de navegação anterior à esquerda */
            }

            button.owl-next {
                right: -20px; /* Posiciona o botão de navegação seguinte à direita */
            }
        }
    }

    .tw-course-filter-master {
        display: flex; /* Usa flexbox para organizar os filtros */
        justify-content: space-between; /* Espaço entre os elementos filhos */
        flex-direction: column; /* Organiza os elementos em coluna por padrão */
        align-items: center; /* Centraliza os itens no eixo transversal */
        gap: 16px; /* Espaçamento de 16px entre os itens */
        
        @media (min-width: 1000px) {
            flex-direction: row; /* Em telas maiores que 1000px, organiza os itens em linha */
            gap: 0; /* Remove o gap entre os itens na visualização de tela maior */
        }

        .tw-see-all-courses {
			font-family: 'Funnel Display', sans-serif !important;
            text-decoration: none; /* Remove o sublinhado do link */
            color: #58326b; /* Cor do link */
            font-size: 14px; /* Tamanho da fonte do link */
            font-weight: 600; /* Peso da fonte do link */
        }
    }

    .tw-course-filter-buttons {
        display: flex; /* Exibe os filtros como flexbox */
        flex-wrap: wrap; /* Permite que os itens se quebrem para a linha seguinte quando necessário */
        gap: 10px; /* Espaçamento de 10px entre os botões */
        justify-content: center; /* Centraliza os botões */
        
        @media (min-width: 1000px) {
            justify-content: center; /* Centraliza os botões em telas maiores */
        }
    }

    .tw-filter-btn {
		font-family: 'Funnel Display', sans-serif !important;
        padding: 8px 16px; /* Espaçamento interno dos botões de filtro */
        border-radius: 100px; /* Bordas arredondadas para os botões */
        font-size: 14px; /* Tamanho da fonte dos botões */
        font-weight: 600; /* Peso da fonte dos botões */
        cursor: pointer; /* Altera o cursor para indicar que é clicável */
        transition: all 0.3s ease; /* Transição suave ao passar o mouse */
        background-color: transparent; /* Fundo transparente */
        border: 2px solid #58326b; /* Borda do botão */
        color: #58326b; /* Cor do texto do botão */
    }

    .tw-filter-btn.active {
        background-color: #58326b; /* Cor de fundo quando o botão estiver ativo */
        color: #fff; /* Cor do texto quando o botão estiver ativo */
    }

    .tw-filter-btn:hover {
        transform: translateY(-2px); /* Efeito de elevação ao passar o mouse */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave no hover */
        background-color: #58326b; /* Cor de fundo ao passar o mouse */
        color: #fff; /* Cor do texto ao passar o mouse */
    }

    .tw-course-carousel.loading {
        opacity: 0.5; /* Torna o carrossel semitransparente durante o carregamento */
        pointer-events: none; /* Desabilita a interação com o carrossel durante o carregamento */
    }

    .tw-course-carousel-wrapper {
        margin-top: 20px; /* Espaço superior entre o carrossel e o conteúdo acima */
    }
}