.tituloTutorial {
    color: #000000; 
    font-size: 44px; 
    margin-left: 10px; 
    font-weight: bold;
}

.spinner {
    border: 6px solid #f3f3f3;
    border-top: 6px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;

    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


.tutorial-container {
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.secaoContainer h2 {
    font-size: 28px;
}

.secaoContainer {
    flex-direction: column;
    display: flex;
    position: relative;
    padding: 10px;
    height: auto;
    justify-content: center;
    width: 100%;
    align-items: center;
    background-color: #f7f7f7; /* Cinza claro para não selecionado */
    transition: background-color 0.3s ease;
}

.secaoContainer.selecionada {
    background-color: #e0e0e0 !important; /* Cinza mais forte para selecionado */
}


.barrinha {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background-color: #0053b8;
    display: none;
}

.tituloSecao {
    display: flex;
    align-items: left;
    justify-content: left;
    width: 100%;
    cursor: pointer; /* Indicate clickable */
    position: relative;
    padding: 10px 0; /* Add padding for better click area */
}

.tituloSecao:hover {
    background-color: #e8ecef; /* Subtle hover effect */
}

.tituloSecao h2 {
    color: #000000;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 0; /* Remove margin for compact layout */
    margin-left: 8px;
    text-align: left;
    flex-grow: 1; /* Ensure h2 takes available space */
}

.dropdown-arrow {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #000000;
    margin-left: 10px;
    transition: transform 0.3s ease; /* Smooth arrow rotation */
}

.secaoContainer.selecionada .dropdown-arrow {
    transform: rotate(180deg); /* Rotate arrow when section is open */
}

/* Exibe as seções em uma coluna */
.secoes {
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Estilo das subseções */
.subSecoes {
    display: none; /* Hide by default */
    flex-direction: column; /* Stack subsections vertically */
    justify-content: left;
    align-items: left;
    margin-top: 10px;
    width: 100%;
    transition: all 0.3s ease; /* Smooth opening/closing */
}

.secaoContainer.selecionada .subSecoes {
    display: flex; /* Show subsections for selected section */
}

/* Estilo do título das subseções */
.subsecaoTitulo {
    color: #0c0c0c;
    cursor: pointer;
    margin-bottom: 5px;
    position: relative;
    margin-left: 10px;
    text-align: left;
    width: 100%;
    font-size: 22px;
}

.subsecaoTitulo:hover {
    color: #000000;
    font-weight: bold;
}

/* Estilo do contêiner do GIF */
.gif-container {
    margin-left: 20px;
    background-color: #f2f4f5;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 800px;
    height: 475px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 8px;
}

/* Estilo do GIF */
.gif {
    width: 787px;
    height: 444px;
    object-fit: cover;
    border-radius: 8px;
}

.orientation-popup {
    display: none; /* Oculto por padrão */
    position: fixed;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
    z-index: 1000;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

@media (max-width: 1200px) {
    .tutorial-container {
        width: 100% !important; /* Garante que ocupa 100% */
    }

    .gif-container {
        width: 68%;
        height: fit-content;
    }
    .gif {
        width: 95%;
        height: 100%;
        object-fit: contain;
    }
    .tituloTutorial {
        font-size: 36px;
    }
}

@media (max-width: 991px) {
    .gif-container {
        height: fit-content;
    }

    .gif {
        width: 100%; 
        height: auto; 
        object-fit: contain;
    }
}

/* Container principal */
@media (max-width: 930px) {
    .tituloTutorial {
        font-size: 24px;
        text-align: center;
        color: #000000;
    }

    .tutorial-container {
        margin: 0 auto; /* Centraliza horizontalmente */
        display: flex;
        flex-direction: column;
        width: 90vw; 
        max-width: 90vw; 
        box-sizing: border-box; 
        padding: 10px; 
    }

    .secoes {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centraliza os itens internamente */
        width: 100%; /* Garante que não ultrapassa o container pai */
        text-align: center; /* Centraliza o texto */
    }

    .secao {
        width: 100%; /* Garante que cada seção ocupa 100% do container pai */
        box-sizing: border-box; /* Inclui padding/border */
    }

    .barrinha {
        width: 3px; /* Reduz a largura da barrinha */
        position: absolute;
        left: -5px; /* Ajusta posição para a esquerda */
    }

    .secaoContainer {
        display: flex;
        flex-direction: column;
        align-items: left; /* Centraliza os itens */
        justify-content: left; /* Centraliza o conteúdo */
        width: 100%;
        box-sizing: border-box; /* Padding/border incluídos */
    }

    .tituloSecao {
        display: flex;
        justify-content: left !important; /* Centraliza o título */
        text-align: left; /* Alinha o texto */
        width: 100%; /* Ocupa toda a largura */
    }

    .subSecoes {
        width: 100%; /* Ocupa toda a largura */
        text-align: left; /* Centraliza o texto */
        margin-left: 0; /* Remove deslocamento lateral */
    }

    .gif-container {
        display: none !important; /* Oculta GIFs no mobile */
    }

    .subsecaoTitulo {
        font-size: 20px; /* Ajusta o tamanho da fonte */
        text-align: left; /* Centraliza o texto */
    }

    #modalGif {
        max-height: 80vh; /* Limita a altura máxima do GIF a 80% da altura da tela */
        object-fit: contain; /* Mantém as proporções do GIF sem cortá-lo */
        width: auto; /* Ajusta automaticamente a largura para manter as proporções */
    }

    .modal-content {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 20px;
        background: white;
        border-radius: 8px;
        max-height: 100%;
        width: 90%;
        text-align: center;
    }
    
    .modal {
        display: none; /* Oculto por padrão */
        position: fixed;
        z-index: 99999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.5); /* Fundo semi-transparente */
    }

    .modal-content video {
        width: 100%;
        height: auto;
        border-radius: 8px;
    }
    
    .close {
        position: absolute;
        top: 5px;
        right: 10px;
        color: #aaa;
        font-size: 24px;
        font-weight: bold;
        cursor: pointer;
    }
    
    .close:hover, .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    .secaoContainer h2 {
        font-size: 24px;
    }

    .subsecaoTitulo {
        font-size: 20px;
    }
}