/* Resetando estilos padrões */
.content {
    width: 100vw;
    height: 100vh;
    position: relative; /* Para garantir que os elementos absolutos fiquem dentro do contêiner */
}

.square {
    position: absolute;
    width: 6vw; /* Tamanho do quadrado ajustado proporcionalmente */
    height: 6vw; /* Mantém a proporção quadrada */
    background-color: #000000; /* Cor de fundo preta */
    border: 3px solid #0f0; /* Borda verde */
    top: 18vh; /* Posição vertical inicial */
    left: 20vw; /* Posição horizontal inicial */
}

.square1 {
    position: absolute; /* Linha vertical */
    width: 2px; /* Largura da linha vertical */
    height: 100%; /* Altura da linha vertical que ocupa toda a tela */
    background-color: #0f0; /* Cor verde */
    top: 0; /* Começa no topo */
    left: 23vw; /* Posiciona a linha à direita do quadrado */
}

.square2 {
    position: absolute; /* Linha horizontal */
    width: 100%; /* Largura total da tela */
    height: 2px; /* Espessura da linha horizontal */
    background-color: #0f0; /* Cor verde */
    top: calc(18vh + 3vw); /* A linha passa no meio do quadrado */
    left: 0; /* Começa na borda esquerda */
}

/* Media Query para telas menores que 1024px (tablets e dispositivos com telas médias) */
@media (max-width: 1024px) {
    .square {
        width: 8vw; /* Ajusta o tamanho do quadrado */
        height: 8vw; /* Ajusta o tamanho proporcionalmente */
        top: 20vh; /* Ajusta o topo */
        left: 22vw; /* Ajusta a posição à esquerda */
    }

    .square1 {
        height: calc(100vh - 20vh); /* Ajusta a altura da linha vertical */
        left: calc(23vw + 2vw); /* Ajusta a posição da linha vertical */
    }

    .square2 {
        top: calc(20vh + 4vw); /* Ajusta a linha horizontal */
    }
}

/* Media Query para telas menores que 768px (dispositivos móveis) */
@media (max-width: 768px) {
    .square {
        width: 12vw; /* Ajusta o tamanho do quadrado */
        height: 12vw; /* Ajusta proporcionalmente */
        top: 25vh; /* Ajusta o topo */
        left: 25vw; /* Ajusta a posição à esquerda */
    }

    .square1 {
        height: calc(100vh - 25vh); /* Ajusta a altura da linha vertical */
        left: calc(26vw + 2vw); /* Ajusta a posição da linha vertical */
    }

    .square2 {
        top: calc(25vh + 6vw); /* Ajusta a linha horizontal */
    }
}

/* Media Query para telas menores que 480px (dispositivos móveis pequenos) */
@media (max-width: 480px) {
    .square {
        width: 15vw; /* Ajusta o tamanho do quadrado */
        height: 15vw; /* Ajusta proporcionalmente */
        top: 30vh; /* Ajusta o topo */
        left: 30vw; /* Ajusta a posição à esquerda */
    }

    .square1 {
        height: calc(100vh - 30vh); /* Ajusta a altura da linha vertical */
        left: calc(28vw + 2vw); /* Ajusta a posição da linha vertical */
    }

    .square2 {
        top: calc(30vh + 7.5vw); /* Ajusta a linha horizontal */
    }
}

/* Media Query para telas menores que 1033px e 929px, onde o layout estava quebrando */
@media (max-width: 1033px) and (max-height: 929px) {
    .square {
        width: 10vw; /* Ajuste do tamanho do quadrado */
        height: 10vw; /* Mantém a proporção quadrada */
        top: 22vh; /* Ajusta o topo para telas menores */
        left: 20vw; /* Ajuste da posição à esquerda */
    }

    .square1 {
        height: calc(100vh - 22vh); /* Ajusta a altura da linha vertical */
        left: calc(23vw + 2vw); /* Ajuste da posição da linha vertical */
    }

    .square2 {
        top: calc(22vh + 5vw); /* Ajusta a posição da linha horizontal */
    }
}











* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    background: linear-gradient(to bottom, #000 10%, #000 70%, #000 0%, #0f0 100%); /* Gradiente contínuo de preto para verde */
    font-family: Arial, sans-serif; /* Fonte básica para o corpo */
}

/* Barra de navegação */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #111;
    padding: 10px 20px;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 10;
}

nav a {
    color: #0f0;
    text-decoration: none;
    font-size: 18px;
    padding: 10px;
    transition: background-color 0.3s;
}

nav a:hover {
    background-color: #0f0;
    color: #000;
}

/* Campo de pesquisa */
.search-container {
    display: flex;
    align-items: center;
}

.search-container input[type="text"] {
    padding: 10px;
    margin-right: 10px;
    border: 2px solid #0f0;
    background-color: #222;
    color: #0f0;
    font-size: 16px;
}

.search-container button {
    padding: 10px 15px;
    background-color: #0f0;
    color: #000;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

.search-container button:hover {
    background-color: #111;
}



h1 {
    text-align: center;
    color: rgb(237, 246, 237);
    font-size: 30px;
    margin-bottom: 10px;
}

.turmas-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* Faz com que os itens se adaptem ao tamanho da tela */
}

.turma {
    background-color: #222;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.6);
    width: 250px;
    margin: 10px;
    transition: transform 0.3s;
}

.turma img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 15px;
}

.turma h3 {
    color: #0f0;
    font-size: 24px;
}

/* Efeito de hover nas turmas */
.turma:hover {
    transform: scale(1.05); /* Leve aumento no tamanho da turma */
}

/* Certificando-se de que o layout ocupe toda a página */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: flex-start; /* Garantir que o conteúdo comece de cima */
}







* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    background: linear-gradient(to bottom, #000 10%, #000 70%, #000 0%, #0f0 100%); /* Gradiente contínuo de preto para verde */
    font-family: Arial, sans-serif; /* Fonte básica para o corpo */
}

/* Barra de navegação */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-color: #111; */
    padding: 10px 20px;
    /* position: sticky; */
    top: 0;
    width: 100%;
    z-index: 10;
}

nav a {
    color: #0f0;
    text-decoration: none;
    font-size: 18px;
    padding: 10px;
    transition: background-color 0.3s;
}

nav a:hover {
    background-color: #0f0;
    color: #000;
}

/* Campo de pesquisa */
.search-container {
    display: flex;
    align-items: center;
}

.search-container input[type="text"] {
    padding: 10px;
    margin-right: 10px;
    border: 2px solid #0f0;
    border-radius: 10px;
    background-color: #f1ecec;
    color: rgb(8, 8, 8);
    font-size: 16px;
}

.search-container button {
    padding: 10px 15px;
    background-color: #0f0;
    color: #000;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
}

.search-container button:hover {
    background-color: #111;
}

/* Título e área de turmas */
.content {
    padding: 40px 20px;
    color: #0f0;
    text-align: center;
    flex-grow: 1; /* Garante que o conteúdo ocupe o restante da altura da página */
}

.content h1 {
    color: #0f0;
    font-size: 30px;
    margin-bottom: 10px;
}

.turmas-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* Faz com que os itens se adaptem ao tamanho da tela */
}

.turma {
    background-color: #222;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.6);
    width: 250px;
    margin: 10px;
    transition: transform 0.3s;
}

.turma img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 15px;
}

.turma h3 {
    color: #0f0;  /* titulo centro : turmas*/
    font-size: 24px;
}

/* Efeito de hover nas turmas */
.turma:hover {
    transform: scale(1.05); /* Leve aumento no tamanho da turma */
}

/* Certificando-se de que o layout ocupe toda a página */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: flex-start; /* Garantir que o conteúdo comece de cima */
}

/* Estilo para o menu dropdown */
details {
    position: relative;
}

details summary {
    cursor: pointer;
    font-size: 16px;
    padding: 10px;
    background-color: #f1f1f1;
    border: 1px solid #ddd;
    border-radius: 4px;
}

details[open] summary {
    background-color: #ddd;
}

/* Quando o mouse passar por cima do <details>, mostrar o conteúdo */
details:hover .menu-dropdown-content {
    display: block;
}

.menu-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #0f0;
    border: 1px solid #ddd;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.menu-dropdown-content a {
    display: block;
    padding: 8px 16px;
    text-decoration: none;
    color: #000;
}

.menu-dropdown-content a:hover {
    background-color: #ddd;
}

/* Estilo para os cards */
.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: space-around;
    margin-top: 20px;
        
    }


.card {
    width: 220px;
    /* border: 1px solid #ddd; */
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    position: relative;
}

.card img {
    width: 100%;
    height: auto;
    border-radius: 22px;
    border: 3px solid #0f0;
}

/* .card-info {
    padding: 10px;
}

.card-info h2 {
    font-size: 18px;
    margin-bottom: 10px;
}

.card-info p {
    font-size: 14px;
    color: #555;
}

/* Efeito de hover nos cards */
.card:hover {
    transform: translateY(-5px);
} */

/* Barra de navegação */
nav {
    background-color: #333;
    padding: 10px;
    color: white;
}

.logo img {
    height: 40px;
}

.search-container {
    float: right;
}

.menu a {
    color: white;
    text-decoration: none;
    margin-right: 20px;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 25
}