@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Playwrite+DE+Grund:wght@100..400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap');

/* SEMPRE QUE HOUVER UMA BARRA LATERAL, A LINHA A BAIXO AJUDARÁ A IDENTIFICAR QUE ELEMENTO ESTÁ EMPURRANDO A BARRA */

/* * {
    outline: 1px solid red;
  } */


html {
    scroll-behavior: smooth;
    overflow-x: hidden; 
}


body {
    display: flex;
    flex-direction: column;
    justify-content: center; 
    font-family: "Google Sans Flex", sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
}

.insc_aqui:hover {
    color: #19ea24;
    text-align: center;
}


.instrumentos {
    text-align: center;
    margin-right: 15%;
    margin-left: 15%;
    padding: 5%;

}

.cursos_line {
    background-color: #f6f8fb;
}

.instrumento {
    width: 75px;
    margin-bottom: 5%;
    transition: transform 0.3s ease;

}

/* Efeito de zoom na imagem ao fazer hover */
.instrumento:hover {
    transform: scale(1.07);
}


.instrumento-img {
    margin-bottom: 3%;

}


.navbar {
    height: 65px;
    padding: 0; /* Remove padding da navbar para evitar deslocamento */
    background-color: rgba(255, 255, 255, 0.8);
}

.navbar-brand {
    margin-left: 0; /* Remove qualquer margem da esquerda */
    padding-left: 5px; /* Pequeno padding para ajustar a posição da imagem */
    padding-top: 0; /* Remove padding superior */
    padding-bottom: 0; /* Remove padding inferior */
}

.navbar .container {
    padding: 0; /* Remove o padding do container para alinhar o conteúdo */
    margin: 0; /* Remove qualquer margem do container */
    max-width: 100%; /* Garante que o container ocupe toda a largura */
}


/* CARROUSSEL E CONTEÚDO DA CAPA - INÍCIO */

.eduTa{
    -webkit-text-stroke: 0.2px black; /* Contorno com 0.2px de largura e cor preta (para WebKit) */
    font-family: "Noto Sans JP", sans-serif;
}

/* Aplica a imagem de background à área de conteúdo */
.content {
    position: relative;
    width: 100%;
    height: calc(100vh - 65px); /* A altura total da tela */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Evita que imagens saiam da área visível */
    opacity: 0.7;
    transition: opacity 2s ease-in-out; /* Transição de opacidade de 2 segundos */
}

/* Quando a página carregar, a opacidade será aumentada para 100% */
.content.show {
    opacity: 1;
}

/* Container para o slideshow */
.slideshow-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Coloca o carrossel de imagens abaixo do texto */
}

/* Estilo para cada imagem do carrossel */
.slideshow-container img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
    z-index: 0; /* As imagens também ficam abaixo do texto */
}

.slideshow-container img.active {
    opacity: 1;
    z-index: 1;
    transform: translateX(0); /* Imagem ativa no centro */
}

.slideshow-container img.prev {
    transform: translateX(-100%); /* Imagem anterior fora da tela à esquerda */
}

.slideshow-container img.next {
    transform: translateX(100%); /* Imagem nova entrando da direita */
}

/* Texto sobreposto ao slideshow */
.text-carousel-capa {
    position: relative;
    z-index: 2; /* Garante que o texto fique visível acima das imagens */
    color: white;
    font-size: 3.5rem;
    text-align: center;
    font-family: 'Raleway';
    font-weight: 600;
    padding: 1rem;
}

.text-btn-capa {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-capa {
    background-color:  #2e8732;
    font-size: 1.3rem;
    font-weight: 200;
    color: #ffffff;
    font-family: 'Google Sans Flex';
    padding: 1rem 2rem;
    border-radius: 10px;
    border: solid 0.1px #48724a;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-capa:hover {
    background-color: #47a14be9 ;
}

.btn-capa a {
    text-decoration: none;
    color: inherit;
    display: block;
    width: 100%;
    height: 100%;
}

/* CARROUSSEL E CONTEÚDO DA CAPA - FIM */

/* TÍTULO - CURSOS */

.text-3 {
    color: #00427d;
    text-align: center;
    margin-top: 3%;
    margin-bottom: 3%;
}

#cursos {
    font-weight: 300;
}


.text-insc {
    text-align: justify;
    padding-right: 15%;
    padding-left: 15%;
    font-size: 1.2rem;
    margin-top: 6%;
}



.div-sobreNos {
    color: #00427d;
    text-align: center;
    margin-top: 5%;
    margin-bottom: 5%;
}

#sobreNos {
    margin-bottom: 2%;
    color: #00427d;
    margin-top: 0 !important;
    font-weight: 300;
}


/* Ajusta o tamanho das imagens do carousel */
.carousel-inner img {
    width: 600px;   
    height: 400px;  
    object-fit: contain; 
    background-color: #88accd; 
}

.carousel-control-prev, .carousel-control-next {
    width: 5%;
    border: none;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    background-image: none; /* Remove o ícone padrão */
    background-color: white; /* Cor de fundo do ícone */
    border-radius: 50%; /* Torna o ícone redondo */
}

.carousel-control-prev-icon::before, .carousel-control-next-icon::before {
    font-family: 'Font Awesome 5 Free'; /* Usa Font Awesome para os ícones */
    font-weight: 900; /* Ajusta o peso da fonte */
    color: black; /* Cor dos ícones */
}

.carousel-control-prev-icon::before {
    content: '\f053'; /* Código Unicode para o ícone de seta para a esquerda */
}

.carousel-control-next-icon::before {
    content: '\f054'; /* Código Unicode para o ícone de seta para a direita */
}



/* SUBTÍTULO TEXT-INSC */
.subTitle {
    color: #00427d;
    margin-bottom: 5%;
    text-align: center;
    font-weight: 300;
}



.arrow-up {
    position: fixed;
    bottom: 80px;
    right: 30px;
    padding: 15px;
    display: none; /* Oculta por padrão */
    color: #00427d;
    cursor: pointer;
    transition: opacity 0.3s ease;
    font-size: 20px;
    transition: color 0.3s ease-in-out, font-size 0.3s ease-in-out;
}

.arrow-up.show {
    display: block; /* Mostra a seta quando a classe 'show' é aplicada */
    opacity: 1;
}

.arrow-up:hover {
    font-size: 25px;
    background-color: rgba(128, 128, 128, 0.4);
    color: #ffffff; /* Escurece ao passar o mouse */
}


/* Estilos do container do modal */
.modal-container {
    display: none; /* Oculto por padrão */
    position: fixed;
    top: 0;
    right: 0; /* Alinhado à direita */
    width: 40%; /* 40% da largura da tela */
    height: 100%; /* 100% da altura */
    background-color: #fff;
    z-index: 2;
    transform: translateX(100%); /* Inicialmente fora da tela */
    transition: transform 0.5s ease-out; /* Transição suave para a entrada */
    border-left: 3px solid #4981b3a7; /* Borda esquerda */
    overflow-y: auto; /* Rolagem para conteúdo longo */
    box-shadow: -3px 0 10px rgba(0, 0, 0, 0.1); /* Sombra leve para destaque */
}

/* Classe para mostrar o modal */
.modal-container.show {
    transform: translateX(0); /* Move o modal para dentro da tela */
}

/* Estilos do container do modal 2 */
.modal-container-2 {
    display: none; /* Oculto por padrão */
    position: fixed;
    top: 0;
    left: 0; /* Alinhado à esquerda */
    width: 60%; /* 60% da largura da tela */
    height: 100%; /* 100% da altura */
    background-color: rgba(255, 255, 255, 0.8); /* Fundo translúcido */
    z-index: 1; /* Um índice z inferior ao modal da direita */
    transform: translateX(-100%); /* Inicialmente fora da tela à esquerda */
    transition: transform 0.5s ease-out, opacity 0.5s ease-out; /* Transição suave para a entrada */
    opacity: 0; /* Inicialmente invisível */
}

/* Classe para mostrar o modal 2 */
.modal-container-2.show {
    transform: translateX(0); /* Move o modal para dentro da tela */
    opacity: 1; /* Torna o modal visível */
}

/* Estilos para a imagem */
.modal-container-2 img {
    width: 100%; /* Ocupa toda a largura do container */
    height: 100%; /* Ocupa toda a altura do container */
    object-fit: cover; /* Mantém a proporção da imagem e cobre o espaço */
}

/* Imagem dentro do modal */
.image-content {
    max-width: 100%; /* Ajusta a imagem para não exceder o contêiner */
    height: auto; /* Mantém a proporção */
}

/* Estilo para o cursor em forma de circunferência */
.cursor-circle {
    position: fixed;
    border: 2px solid rgba(255, 255, 255, 0.7); /* Cor e transparência do círculo */
    border-radius: 50%; /* Forma circular */
    width: 50px; /* Largura do círculo */
    height: 50px; /* Altura do círculo */
    pointer-events: none; /* Não impede o clique nos elementos */
    transform: translate(-50%, -50%); /* Centraliza o círculo no cursor */
    transition: opacity 0.3s ease; /* Transição suave */
    opacity: 0; /* Inicialmente invisível */
    z-index: 10; /* Certifique-se de que esteja acima dos outros elementos */
}

/* Efeito de cursor em forma de circunferência */
.cursor-effect {
    position: relative;
}

.cursor-effect::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px; /* Tamanho do efeito */
    height: 80px; /* Tamanho do efeito */
    background: rgba(255, 255, 255, 0.3); /* Cor e transparência do efeito */
    border-radius: 50%; /* Para fazer uma circunferência */
    transform: translate(-50%, -50%) scale(0); /* Começa invisível */
    transition: transform 0.4s ease; /* Transição suave */
    pointer-events: none; /* Para não interferir com cliques */
}

/* Quando o mouse está sobre a imagem */
.cursor-effect:hover::before {
    transform: translate(-50%, -50%) scale(1); /* Mostra o efeito */
}

.cursor-text {
    position: absolute;
    color: white; /* Cor do texto */
    padding: 5px 10px; /* Espaçamento */
    white-space: nowrap; /* Impede que o texto quebre em várias linhas */
    pointer-events: none; /* Para não interferir com cliques */
    transform: translate(-50%, -100%); /* Centraliza o texto em relação ao cursor */
    opacity: 0; /* Começa invisível */
    transition: opacity 0.3s ease; /* Transição suave */
    z-index: 1000; /* Certifique-se de que o texto esteja acima de outros elementos */
}

/* Quando o mouse está sobre a imagem */
.modal-container-2:hover .cursor-text {
    opacity: 1; /* Mostra o texto */
}
/* Estilos para o fundo escurecido (overlay) */
.overlay {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Fundo escurecido */
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

/* Classe para mostrar o overlay */
.overlay.show {
    display: block;
    opacity: 1;
}

/* Estilos do título dentro do modal */
.details-title {
    margin-top: 7%;
    text-align: center;
    font-size: 24px;

}

.link_insc a {
    display: inline-block;
    padding: 10px 20px;
    background-color: #22c08b; /* Cor inicial */
    color: white;
    text-decoration: none;
    transition: background-color 0.5s ease-in-out;
}

.link_insc a:hover {
    background-color: #6eb3fd; /* Cor ao passar o mouse */
}

.link_insc {
    text-align: center;
    font-size: 1.5rem;
    margin-top: 4%;
}

footer{
    background-color: #f6f8fb;
}

.details-btn-insc {
    text-align: center;
    text-decoration: underline;
    color: #007bff;
    font-weight: 500;
    font-size: 1.1rem;
    margin-bottom: 10%;
}

.details-text {
    margin: 7%;
}

/* Botão de fechar */
.close {
    position: fixed;
    top: 10px;
    right: 20px;
    font-size:50px;
    font-weight: bold;
    color: #000;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: rgb(194, 1, 1);
    text-decoration: none;
}

/* Classe para bloquear o scroll na página principal */
.no-scroll {
    width: 100%;
    height: 100%;
    overflow-y: hidden; /* Desativa o scroll vertical */
}


#container1 {
    width: 100%;
    height: 80vh; /* Define uma altura responsiva com base na altura da viewport */
    -webkit-perspective: 1200px; /* Aumentando o valor da perspectiva para uma sensação mais profunda */
    perspective: 1200px;
    -webkit-perspective-origin: 50% 225px;
    perspective-origin: 50% 225px;
    background-color: #e7eef9;
    margin-top: 5%;
    margin-bottom: 5%;
}

#stage {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(-500px); /* Mantenha o efeito 3D */
    transform: translateZ(-500px);
    position: relative; /* Para garantir que a posição seja relativa ao pai */
}

.ring {
    margin: 0 auto; /* Centraliza o elemento horizontalmente */
    transform-origin: 50% 50%; /* Define o centro de rotação no centro do elemento */
}

#shape {
    position: relative;
    top: 21%;
    margin: 0 auto;
    height: 50vh; /* Usando viewport height para ser responsivo */
    width: 50vh; /* Mantendo a proporção */
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;

}

.rotate {
    transition: transform 2.5s ease; /* Altere a duração se necessário */
    transform: rotateY(-360deg); /* Gira 360 graus */
}

.plane {
    position: absolute;
    height: 300px; /* Altura fixa para todos os planos */
    width: 350px;  /* Largura fixa para todos os planos */
    overflow: hidden; /* Oculta qualquer parte da imagem que exceda o contêiner */
    border: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform 1s ease, opacity 1s ease;
    opacity: 0.7; /* Aumentar a opacidade para maior clareza */
}




.img_full {
    width: 100%; /* A imagem ocupa a largura total do plano */
    height: 100%; /* A imagem ocupa a altura total do plano */
    object-fit: cover; /* Mantém a proporção e cobre todo o plano */
    transition: transform 1s ease, opacity 1s ease;
}

/* Ajustes nas translações e rotações */
.ring > .one {
    transform: translateZ(400px); /* Aumentar ainda mais a distância */
}

.ring > .two {
    transform: rotateY(30deg) translateZ(400px);
}

.ring > .three {
    transform: rotateY(60deg) translateZ(400px);
}

.ring > .four {
    transform: rotateY(90deg) translateZ(400px);
}

.ring > .five {
    transform: rotateY(120deg) translateZ(400px);
}

.ring > .six {
    transform: rotateY(150deg) translateZ(400px);
}

.ring > .seven {
    transform: rotateY(180deg) translateZ(400px);
}

.ring > .eight {
    transform: rotateY(210deg) translateZ(400px);
}

.ring > .nine {
    transform: rotateY(240deg) translateZ(400px);
}

.ring > .ten {
    transform: rotateY(270deg) translateZ(400px);
}

.ring > .eleven {
    transform: rotateY(300deg) translateZ(400px);
}

.ring > .twelve {
    transform: rotateY(330deg) translateZ(400px);
}


#prev, #next {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.8); border: none; padding: 10px; cursor: pointer; z-index: 10; }

#prev { left: 10px; /* Alinha o botão à esquerda */ }

#next { right: 10px; /* Alinha o botão à direita */ }

.content-cr3 {
    position: relative;
    width: 100%;
    height: 100%; /* Ajuste de altura total */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Evita que imagens saiam da área visível */
    transition: opacity 2s ease-in-out; /* Transição de opacidade de 2 segundos */
    margin-top: 10%;
    margin-bottom: 15%;
}

.content-cr3.show {
    opacity: 1;
}

.carousel-container {
    position: relative;
    width: 100%; /* Largura do carrossel */
    height: 40vh; /* Altura do carrossel */
    overflow: hidden; /* Oculta partes das imagens que saem da área */
    margin: 0 auto; /* Centraliza o carrossel */
}

.carousel-container img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.carousel-container img.active {
    opacity: 1;
    z-index: 1;
}

.carousel-control-prev2, .carousel-control-next2 {
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
    width: 10%; /* 20% total, dividido entre as duas setas */
    height: 30%; /* Alinhado à altura do container */
    border: none; /* Remove bordas */
    cursor: pointer; /* Muda o cursor para pointer */
    z-index: 10; /* Certifique-se de que os botões fiquem acima das imagens */
}

.carousel-control-prev2 {
    left: 0; /* Posiciona a seta à esquerda */
    
}

.carousel-control-next2 {
    right: 0; /* Posiciona a seta à direita */

}

.sobreNos-text {
    font-size: 1.2rem;
    color: #000000;
    text-align: justify;
    margin-right: 10%;
    margin-left: 10%;
    opacity: 1; /* Visível por padrão */
    max-height: 1000px; /* Altura máxima definida para garantir que o conteúdo seja exibido */
    overflow: hidden; /* Impede estouro de conteúdo */
    transition: opacity 1.5s ease-in-out, max-height 1.5s ease-in-out; /* Transição suave de opacidade e altura */
}


#button_whatsapp {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 70px;
    height: 70px;
    z-index: 9999;
  }

  .container-footer {
    max-width: 100%;   /* ou 100% se preferir */
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
  }

  .politica-de-privacidade {
    margin-top: 1%;
  }


@media (max-width: 768px) {
    .text-carousel-capa {
        font-size: 2.5rem;
    }

    .text-btn-capa {
        gap: 10px;
    }

    .btn-capa {
        padding: 0.6rem 1.2rem;
        font-size: 1rem;
    }

    /* Ajuste para o modal da imagem */
    .modal-container-2 {
        top: 0;
        left: 0;
        width: 100%;
        height: 35%; /* 60% da altura da tela */
        transform: translateY(-100%);
        transition: transform 0.5s ease-out;
    }

    .modal-container-2.show {
        transform: translateY(0);
    }

    /* Ajuste para o modal de texto */
    .modal-container {
        left: 0;
        width: 100%;
        height: 65%; /* 40% da altura da tela */
        top: 35%; /* Posiciona abaixo do modal da imagem */
        transform: translateY(100%);
        transition: transform 0.5s ease-out;
    }

    .modal-container.show {
        transform: translateY(0);
    }

    /* Ajuste para o overlay */
    .overlay {
        display: block;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6); /* Fundo escurecido */
        transition: opacity 0.5s ease-out;
    }

    /* Ajuste para a circunferência e o texto do cursor */
    .custom-cursor {
        width: 50px; /* Ajusta o tamanho da circunferência */
        height: 50px;
    }

    .cursor-text {
        font-size: 12px; /* Tamanho menor para dispositivos móveis */
    }

    .close {
        position:sticky;
        top: 3%;
        right: 3%;
    }

    .details-text {
        margin: 8%;
    }
    .instrumento-img {
        margin-top: 10%;
        
    }

    .sobreNos-text {
        opacity: 1; /* Visível por padrão */
        max-height: none !important; /* Altura ajustada para o conteúdo */
        margin-top: 5%;

    }    

    .text-3 {
        margin-top: 10%;
        margin-bottom: 10%;
    }

    .link_insc {
        margin-top: 10%;

    }

    .contacts-footer {
        margin-top: 5%;
    }

    
    

}


/* Exibe o "container1" apenas em dispositivos grandes e oculta o "content-cr3" */
@media (min-width: 768px) {
    #container1 {
        display: block; /* Exibe o carrossel principal */
    }
    .content-cr3 {
        display: none; /* Oculta o segundo carrossel */
    }
    

}


/* Exibe o "content-cr3" apenas em dispositivos pequenos e oculta o "container1" */
@media (max-width: 767px) {
    #container1 {
        display: none; /* Oculta o carrossel principal */
    }
    .content-cr3 {
        display: block; /* Exibe o segundo carrossel */
    }
    
    
    
}

@media (max-width: 480px) {
    .text-carousel-capa {
        font-size: 2rem;
    }

    .btn-capa {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }

    
    
}