* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    margin: 0;
   
    font-weight: bold;
    font-family: 'Arial', sans-serif;
    font-size: 15px;
    background-color: #163E64;  /*Sky: 9AD9EA */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden; /* Impede a rolagem */

}

header {
    text-align: center;
}

section {
    background-color: #00104f;
    border-radius: 10px;
    padding: 15px;
    width: 500px;
    margin: auto;
     
     
}
 

section.sectionsadapt{
    border-radius: 10px;
    padding: 6px;
    width: 500px;
    margin: auto;
}
section.sectionsadaptinicial {
    background-color: #00104f;
    padding: 15px;
    width: 500px;
    margin: auto;
    font-size: 18px;
    border-radius: 3px;
    box-shadow: 3px 3px  10px rgba(0, 0, 0, 0.717);
    color: #000;
    }

    div {
        text-align: center;
        padding: 5px;  
        font-family:  'Arial', sans-serif;
        font-size: 14px;
        font-weight: bold;
    }
/*container do chatGpt*/
    .container {
        display: flex;
        flex-direction: row; /* Elementos lado a lado */
        height: 100vh; /* Altura total da janela */
    }
    
    /* Área principal */
    .content {
        flex: 0 0 78%; /* Ocupa 78% da largura */
        background: transparent;
        padding: 20px;
        box-shadow: none;
    }
    
    /* Barra lateral */
    .sidebar {
        flex: 0 0 20%; /* Ocupa 20% da largura */
        background: #00125b;
        padding: 20px;
    }

    div.classdivbutton {
        min-height: 50px;
    }

    p {    
        font-size: 20px;
        /*font-weight: bolder;*/
        text-align: center;
        color: rgb(0, 0, 0);
        
        /*font-family: "Rowdies", Arial, sans-serif;*/ /*usei no menu tb*/
        font-family: "Original Surfer", sans-serif;
        font-weight: 700;
        }

    .textoTitulos {
        color: #FFFFFF;
        text-shadow: 
        0 0 13px #F1D311, /* Brilho próximo */
        0 0 24px #F1D311, /* Brilho intermediário */
        0 0 35px #F1D311; /* Brilho mais intenso */
                

    }
 
    footer{
        height: 15px;
        border-top: 3px solid #00c8ff;
      }
      
      p#pfooter {
        font-family:  "Quicksand", sans-serif;
        font-size: 11px; /* Tamanho do texto */
                  font-weight: bold;
                  color: #ffffff;  
                  text-shadow: 
          0 0 13px #00c8ff, /* Brilho próximo */
          0 0 24px #00c8ff, /* Brilho intermediário */
          0 0 35px #00c8ff; /* Brilho mais intenso */
      }
      

        p.neon-text {
            font-size: 4rem; /* Tamanho do texto */
            font-weight: bold;
            color: #ffffff;  
            text-shadow: 
    0 0 13px #ff0080, /* Brilho próximo */
    0 0 24px #ff0080, /* Brilho intermediário */
    0 0 35px #ff0080; /* Brilho mais intenso */
            
        }

        a.a-limpo {
            all: unset;
            cursor: pointer;
          }

/* -----------------------menus ----------------------------*/

/* --------------------------------------- */  
@media only screen and (min-width: 800px) {
         
    #menusanduiche {  /*<!--  menu sanduíche-->*/
        display: none;  /*<!--  menu sanduíche-->*/
    }
}
@media only screen and (max-width: 800px) {  /*<!--  menu sanduíche-->*/
    #menuhorizontal { /*<!--  menu sanduíche-->*/
        display: none;    /*<!--  menu sanduíche-->*/
    }
}


/*  início  css menu horizontal   */

ul#menuhorizontal {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
    
    font-size: 12px;
    font-family: 'Arial', sans-serif;
    font-weight: 700;
     
    }
ul#menusanduiche {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
     
    color: #000000;  
 
    font-size: 12px;
    font-family: 'Arial', sans-serif;
    font-weight: 700;
     
    }
    
    li {
    float: left;
    }
    
    li a, .dropbtn {
    display: inline-block;
    background-color: #C9CEBD;
    color: #000000;
    text-align: center;
    padding: 4px 16px;
    text-decoration: none;
    font-size: 14px;
     
    }
    
    li a:hover, .dropdown:hover .dropbtn {
        background-color: #C9CEBD;
    }
    
    li.dropdown {
    display: inline-block;
    }
    
    .dropdown-content {
    /*display: none;*/
    position: absolute;
    background-color: transparent;
    padding: 0 5px;

    min-width: 160px;
     
    z-index: 1;
    clip-path: inset(0 0 100% 0); /*para fazer o submenu aparecer com animação*/
    transition: clip-path 0.5s ease-out;
    }
 
    
    
    .dropdown-content a { /* menus que descem*/
    color: #000000;
    padding: 0px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-family: 'Arial', sans-serif;
    font-weight: 700;
    font-size: 14px;
    border-radius: 10px;
    margin: 1px;
    background-color: #F5E4D7;
    border: 2px solid black;
    box-shadow:
    inset -4px -4px 6px rgba(0, 0, 0, 0.5),
    inset 4px 4px 6px rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    }
    .dropdown-content a:hover {
        background-color: #F5E4D7;
        color: #256EFF;    
    }
 
    
    
    .dropdown:hover .dropdown-content {
    /*display: block;*/
    clip-path: inset(0 0 0 0);
    }

    .classmenuhoriz { 
        background-color: #FFFFFF;
        border: 2px solid black;
        box-shadow:
        inset -4px -4px 6px rgba(0, 0, 0, 0.5),
        inset 4px 4px 6px rgba(255, 255, 255, 0.3);
        border-radius: 5px;
        text-decoration: none;
        display: inline-block;
        position: relative;
        transition: 0.2s ease-in-out;
        /*box-shadow: 4px 4px 0px black;*/
        padding: 5px 30px;
        margin: 5px;
        
        font-size: 11px;
        }
    .classmenuhoriz:hover:not(.active) { 
        background-color: #FFFFFF;
        color: #256EFF; 
           
            } 

   
            
                  
    /*.classsubmenuhoriz { 
        background-color: #00aeff;
        color: #000000;  
        font-size: 14px;
        }
        .classsubmenuhoriz:hover:not(.active) { 
            background-color: #C9CEBD;
            color: #000000;  
             
            }  */
              
    /*de outro*/

    
    /*  fim css menu horizontal   */
    /*<!--  iníciomenu sanduíche-->*/
    


    a.classmenusand { 
        background-color: #FFFFFF;
        color: #000000;  
        font-size: 12px;
        }
    a#menusandini { 
        background-color: #FFFFFF;
        color: #000000;  
        margin: 1px;
         
        border: 2px solid #000000;
        border-radius: 10px;
        font-size: 14px;
        }
    a.classmenusand:hover:not(.active) { 
        background-color: #C9CEBD;
        color: #256EFF;  
       
        }    
    a.classsubmenusand { 
        background-color: #F5E4D7;
        color: #000000;  
        
        font-size: 12px;
        }
    a.classsubmenusand:hover:not(.active) { 
        background-color: #F5E4D7;
        color: #256EFF; 
        
        }   
     /*BOTÃO DO MENU SANDUÍCHE EM NEON - ACESSO AOS JOGOS ESCUROS*/
     a.classmenusandDark { 
        background-color: #000000;
        color: #ffffff; 
        text-shadow: 
        0 0 13px #ff0080, /* Brilho próximo */
        0 0 24px #ff0080, /* Brilho intermediário */
        0 0 35px #ff0080; /* Brilho mais intenso */  
        font-size: 11px;
        border: 2px solid black;
        box-shadow:
        inset -4px -4px 6px rgba(0, 0, 0, 0.5),
        inset 4px 4px 6px rgba(255, 255, 255, 0.3);
        border-radius: 5px;
        }
     
    a.classmenusandDark:hover:not(.active) { 
        background-color: #070700;
        color: #ffffff; 
        text-shadow: 
        0 0 13px #F5E4D7, /* Brilho próximo */
        0 0 24px #F5E4D7, /* Brilho intermediário */
        0 0 35px #F5E4D7; /* Brilho mais intenso */ 
       
        }    
    a.classsubmenusandDark { 
        background-color: #000000;
        color: #ffffff; 
        text-shadow: 
        0 0 3px #ff0080, /* Brilho próximo */
        0 0 14px #ff0080, /* Brilho intermediário */
        0 0 16px #ff0080; /* Brilho mais intenso */ 
        
        font-size: 12px;
        }
    a.classsubmenusandDark:hover:not(.active) { 
        background-color: #000000;
        color: #ffffff; 
        text-shadow: 
        0 0 3px #F5E4D7, /* Brilho próximo */
        0 0 14px #F5E4D7, /* Brilho intermediário */
        0 0 16px #F5E4D7; /* Brilho mais intenso */ 
        
        }
     /*FIM DO BOTÃO DO MENU EM NEON - aCESSO AOS JOGOS ESCUROS*/

/*BOTÃO DO MENU HORIZONTAL EM NEON - ACESSO AOS JOGOS ESCUROS*/
.dropbtn {
    display: inline-block;
    background-color: #000000;
    color: #ffffff; 
    text-shadow: 
    0 0 13px #ff0080, /* Brilho próximo */
    0 0 24px #ff0080, /* Brilho intermediário */
    0 0 35px #ff0080; /* Brilho mais intenso */ 
    text-align: center;
    padding: 4px 16px;
    text-decoration: none;
    font-size: 14px;
     
    }

    .classmenuhorizDark { 
        background-color: #000000;
        border: 4px solid black;
        border-radius: 10px;
        text-decoration: none;
        display: inline-block;
        position: relative;
        transition: 0.2s ease-in-out;
        /*box-shadow: 4px 4px 0px black;*/
        padding: 5px 30px;
        margin: 5px;
        font-size: 11px;
        color: #ffffff; 
        text-shadow: 
        0 0 13px #ff0080, /* Brilho próximo */
        0 0 24px #ff0080; /* Brilho intermediário */
          
        }
    .classmenuhorizDark:hover:not(.active) { 
        background-color: #000000;
        color: #ffffff; 
        text-shadow: 
        0 0 13px #ff0080, /* Brilho próximo */
        0 0 24px #ff0080; /* Brilho intermediário */
    }
    
    .classsubmenuhorizDark { 
        background-color: #000000;
        border: 4px solid black;
        border-radius: 10px;
        text-decoration: none;
        display: inline-block;
        position: relative;
        transition: 0.2s ease-in-out;
        /*box-shadow: 4px 4px 0px black;*/
        padding: 5px 30px;
        margin: 5px;
        font-size: 14px;
        color: #ffffff; 
        text-shadow: 
        0 0 13px #ff0080, /* Brilho próximo */
        0 0 24px #ff0080; /* Brilho intermediário */
          
        }
    .classsubmenuhorizDark:hover:not(.active) { 
        background-color: #000000;
        color: #ffffff; 
        text-shadow: 
        0 0 13px #ff0080, /* Brilho próximo */
        0 0 24px #ff0080; /* Brilho intermediário */
    }
    #amenu5-1, #amenu5-2, #amenu5-3, #amenu5-4, #amenu5-5 {
        background-color: #000000;
    }
    #amenu5-1:hover:not(.active), #amenu5-2:hover:not(.active), #amenu5-3:hover:not(.active), #amenu5-4:hover:not(.active), #amenu5-5:hover:not(.active), #menu1Dark {
        background-color: #000000;
        color: #ffffff; 
        text-shadow: 
        0 0 13px #ff0080, /* Brilho próximo */
        0 0 24px #ff0080, /* Brilho intermediário */
        0 0 35px #ff0080; /* Brilho mais intenso */ 
    }
/*BOTÃO DO MENU HORIZONTAL EM NEON - ACESSO AOS JOGOS ESCUROS*/

    /*<!--  fimmenu sanduíche-->*/
    /* ---------------------- fim menus -----------------------*/


      #indexContainer {
      background-color: transparent;
      height: 85vh; /* 80% da altura da tela */
  overflow-y: auto; /* Permite rolagem vertical dentro da section */
  overflow-x: hidden; /* Evita rolagem horizontal */
  
  padding: 15px;
    }
 


    section.box {
  background-color: #00c8ff22;
  box-shadow: none;
  min-height: 300px;
  padding: 0;
  padding-top: 30px;
  /*flex: 1; /* Faz cada seção ocupar o mesmo espaço */
  text-align: center;
  width: 300px;
  border-radius: 10px;
}

section.box:hover {
  background-color: #00c8ff32;
  box-shadow: 0 1px  1px 0 black;
 
}


section.box100 {
    background-color: #00c8ff22;
    box-shadow: none;
    
    padding: 20px 10px 20px 10px;
     
    flex: 1; /* Faz cada seção ocupar o mesmo espaço */
    text-align: center;
    border-radius: 2px;
    display: block;
    width: 100%;
    margin-bottom: 1rem;
  }

  section.box100:hover {
    background-color: #00c8ff32;
    box-shadow: 0 1px  1px 0 black;
   
  }
  
  .container-topo {
    margin-top: 50px;
    padding: 0 20px;
    /*background-color: #1D4E7C; /* Um tom um pouco mais claro que #163E64 */
    border-top: 8px solid #FFffff; /* linha dourada motivacional */
    border-left: 4px solid #FFffff;
    border-right: 4px solid #FFffff;
    border-radius: 24px 24px 0 0;
     background-color: transparent;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap; /* Permite que os elementos quebrem para a próxima linha */
    justify-content: center; /* centraliza horizontalmente */
    align-items: center;    /* centraliza verticalmente */
    gap: 30px; /* Espaço entre as sections */
    width: 100%;
    position: relative;
  }
  .container-topo-fim {
    margin-top: 50px;
    padding: 0 20px;
    /*background-color: #1D4E7C; /* Um tom um pouco mais claro que #163E64 */
    border-bottom: 8px solid #FFffff; /* linha dourada motivacional */
    border-left: 4px solid #FFffff;
    border-right: 4px solid #FFffff;
    border-radius:  0 0 24px 24px;
     background-color: transparent;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap; /* Permite que os elementos quebrem para a próxima linha */
    justify-content: center; /* centraliza horizontalmente */
    align-items: center;    /* centraliza verticalmente */
    gap: 30px; /* Espaço entre as sections */
    width: 100%;
    min-height: 30px;
    position: relative;
  }
  .container-livros-sobre-fim {
    margin-top: 50px;
    margin-bottom: 50px;
    padding: 0 20px;
    /*background-color: #1D4E7C; /* Um tom um pouco mais claro que #163E64 */
    border-bottom: 8px solid #FFD580; /* linha dourada motivacional */
    border-left: 4px solid #FFD580;
    border-right: 4px solid #FFD580;
    border-radius:  0 0 24px 24px;
     background-color: transparent;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap; /* Permite que os elementos quebrem para a próxima linha */
    justify-content: center; /* centraliza horizontalmente */
    align-items: center;    /* centraliza verticalmente */
    gap: 30px; /* Espaço entre as sections */
    width: 100%;
    min-height: 30px;
    position: relative;
  }
  .container-livros {
    background-color: transparent;
    box-shadow: none;
    display: flex;
    margin: 60px 0 20px 0;
    flex-direction: row;
    flex-wrap: wrap; /* Permite que os elementos quebrem para a próxima linha */
    justify-content: center; /* centraliza horizontalmente */
    align-items: center;     /* centraliza verticalmente */
    gap: 30px; /* Espaço entre as sections */
    width: 100%;
    position: relative;
  }
/*
  div.boxLivros {
    background-color: #C2F2FF;
    box-shadow: none;
    
    padding: 20px 10px 20px 10px;
     
    flex: 1; // Faz cada seção ocupar o mesmo espaço
    text-align: center;
    border-radius: 2px;
    display: block;
    width: 100%;
    margin-bottom: 1rem;
  }*/

  



.textTitlePrincipal {
  color: #ffffff;
  font-size: 40px;
  padding-top: 10px;
  letter-spacing: 2px;
  font-family: "Original Surfer", sans-serif;
  text-shadow: 
        -2px -2px 0 black, 
        2px -2px 0 black, 
        -2px 2px 0 black, 
        2px 2px 0 black; /* Cria o contorno preto */
}
.textTitlePage {
    color: #ffffff;
    font-size: 40px;
    padding-top: 10px;
    margin: 0 0 20px 0;
    font-family: "Original Surfer", sans-serif;
    text-shadow: 
          -2px -2px 0 black, 
          2px -2px 0 black, 
          -2px 2px 0 black, 
          2px 2px 0 black; /* Cria o contorno preto */
  }

.textTitles {
  color: #ffffa9;
  text-shadow: 
        -1px -1px 0 black, 
        1px -1px 0 black, 
        -1px 1px 0 black, 
        1px 1px 0 black; /* Cria o contorno preto */
  animation: moveDiagonalText 2s ease-in-out infinite alternate;
  font-family: "Original Surfer", sans-serif;
  letter-spacing: 2px;
  font-weight: bolder;
  font-size: 15px;
  min-height: 60px;
  padding: 0 8px;
  text-transform: uppercase;
}
/*animações do texto mais abaixo*/

.imagem-redonda {
  width: 100px;       /* ou qualquer tamanho */
  height: 100px;      /* tem que ser igual ao width pra ficar redonda */
  border-radius: 50%; /* faz a mágica da forma redonda */
  object-fit: cover;  /* opcional, ajuda a manter o foco da imagem */
  filter: drop-shadow(0 0 9px #00c8ff)
          drop-shadow(0 0 16px #00c8ff)
          drop-shadow(0 0 23px #00c8ff);
}

div.div-descri {
  height: 100px;
} 

div.div-topicos {
    min-height:50px;
  }
  div.div-explic {
    min-height:10px;
    text-align: center;
    margin-bottom: 30px;
  }
p.p-descri {
    font-family: "Sour Gummy", sans-serif;
    letter-spacing: 1px;
  color: #ffffab;
  font-size: 16px;
  font-weight: bold;
  margin: 10px 3px 2px 3px;
  text-shadow: 
        -1px -1px 0 black, 
        1px -1px 0 black, 
        -1px 1px 0 black, 
        1px 1px 0 black; /* Cria o contorno preto */
}

p.p-topico {
    font-family: "Englebert", cursive, Arial;
    font-size: 22px;
    letter-spacing: 2px;
    font-weight: bold;
    text-align: justify;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    margin: 10px 3px 2px 3px;
 
}
p.p-explic {
    font-family: "Englebert", cursive, Arial;
    font-size: 25px;
    margin-bottom: 15px;
    letter-spacing: 2px;
    font-weight: bold;
    text-align: justify;
    color: #ffffff;
     
    font-weight: bold;
    margin: 10px 3px 2px 3px;
 
}

.book-card {
    background-color: #FFF8EB;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    max-width: 400px;
    transition: transform 0.2s ease;
    border-left: 6px solid #FFD580;
     

  }
  
  .book-card:hover {
 
    filter: drop-shadow(0 0 1px #00c8ff9c)
    drop-shadow(0 0 3px #00c8ff9c)
    drop-shadow(0 0 10px #00c8ff9c);
  }
  .container-livros-sobre {
    margin-top: 50px;
    padding: 30px 20px;
    /*background-color: #1D4E7C; /* Um tom um pouco mais claro que #163E64 */
    border-top: 8px solid #FFD580; /* linha dourada motivacional */
    border-left: 4px solid #FFD580;
    border-right: 4px solid #FFD580;
    border-radius: 24px 24px 0 0;
     
    display: flex;
    flex-direction:row;
    flex-wrap: wrap; /* Permite que os elementos quebrem para a próxima linha */
    justify-content: center; /* centraliza horizontalmente */
    align-items: flex-start;    /* centraliza verticalmente */
    gap: 30px; /* Espaço entre as sections */
    width: 100%;
    position: relative;
  }
 
  p.p-livros-sobre {
    margin: 10px 10px 30px 10px;
    font-family: 'Lato', sans-serif;
    font-weight: bolder;
    text-transform: uppercase;
    color: #FFD580;
        }
        h2.h2-livros-sobre {
            margin: 20px 10px 30px 10px;
            font-family: "Original Surfer", sans-serif;
            letter-spacing: 2px;
            font-size: 30px;
            font-weight: bolder;
            text-transform: uppercase;
            color: #FFFFFF;
            text-shadow: 
        -1px -1px 0 #000000, 
        1px -1px 0 black, 
        -1px 1px 0 black, 
        1px 1px 0 black; /* Cria o contorno preto */
                }

    h2.h2-topo {
                    margin: 60px 10px 30px 10px;
                    font-family: "Original Surfer", sans-serif;
                    font-size: 30px;
                    letter-spacing: 2px;
                    font-weight: bolder;
                    text-transform: uppercase;
                    color: #ffffff;
                    text-shadow: 
                -1px -1px 0 #000000, 
                1px -1px 0 black, 
                -1px 1px 0 black, 
                1px 1px 0 black; /* Cria o contorno preto */
                        }
  
  .p-book-title {
    font-family: 'Lato', sans-serif;
    font-weight: bolder;
    text-transform: uppercase;
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: bolder;
    color: #0D2C4B;
  }
  
  .p-book-authors {
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: #4A6FA1;
    margin-bottom: 1rem;
  }
  
 .p-book-summary {
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: #3E4C5E;
    line-height: 1.6;
  }


 
 
 

.containerTemas {
  background-color: transparent;
  box-shadow: none;
  display: flex;
  flex-wrap: wrap; /* Permite que os elementos quebrem para a próxima linha */
  gap: 20px; /* Espaço entre as sections */
  width: 100%;
  position: relative;
}



@keyframes moveDiagonalText {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(3px, 1px); /* Move 0 */
    }
}

@keyframes moveDiagonalImage {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(5px, 4px); /* Move  */
    }
}

@keyframes sway {
            from {
                transform: rotate(-3deg);
            }
            to {
                transform: rotate(3deg);
            }
        }

        @keyframes swayH {
            from {
                transform: rotate(-1deg);
            }
            to {
                transform: rotate(1deg);
            }
        }
.gameImagesT1 {
  animation: sway 2s ease-in-out infinite alternate;
}

.gameImagesT2 {
  animation: moveDiagonalImage 3s ease-in infinite alternate;
}

.gameImagesT3 {
  animation: sway 4s ease-out infinite alternate;
}


    button {
        background-color: #FFFFFF;
        padding: 5px;
        margin: 10px;
         
        color: #000000; /* Cor principal do texto */
        
        font-size: 15px;
        border-radius: 5px;
        box-shadow: 3px 3px  5px rgba(0, 0, 0, 0.717);
        font-weight: bold;
    
    }
    button:hover {
        background-color: #90e3ff;
        color: #000000; /* Cor principal do texto */
      
        
    }

    button#button-all1 {
      background-color: #C9CEBD;
      color: #000000;
      font-family: 'Arial', sans-serif;
      height: 300px;
      width: 200px;
      font-size: 20px;
      border: 4px solid #000000; 
      border-radius: 50px;

    }

    button#button-all1:hover {
        background-color: #C9CEBD;  
        font-size: 35px;
 
    }


 

    div.classdivbutton {
        min-height: 50px;
    }

    hr {
        border: none; /* Remove a borda padrão */
        height: 2px; /* Define a espessura */
         background-color: #00c8ff;
        border-radius: 5px; /* Bordas arredondadas */
         
        margin-top: 50px; /* Adiciona espaço acima do <hr> */
        margin-bottom: 50px;
 
    }




/* ----------------- início cartas que viram ------------------ */
div.cards-problemas {
    background-color: transparent;
    box-shadow: none;
    display: flex;
    flex-direction:row;
    flex-wrap: wrap; /* Permite que os elementos quebrem para a próxima linha */
    justify-content: center; /* centraliza horizontalmente */
    align-items: center;     /* centraliza verticalmente */
    gap: 30px; /* Espaço entre as sections */
    width: 100%;
    position: relative;
  }


.card-container {
    perspective: 1000px;
    width: 300px;
    height: 300px;
    cursor: pointer;
  }

  .card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s;
  }

  .card.is-flipped {
    transform: rotateY(180deg);
  }

  .card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 20px;
    font-family: "Englebert", cursive, Arial;
    font-size: 22px;
    letter-spacing: 2px;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    
    border: 1px solid #ccc;
    border-radius: 12px;
    background: #0F2A43;
    color: #FFFFFF;
    background-image: url('images/fundo-card-face.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .card-back {
    background: #5cdcff;
    transform: rotateY(180deg);
    color: #000;
    padding: 25px;
    font-size: 16px;
    font-family:  "Englebert", cursive, Arial;
    background-image: url('images/fundo-card-back.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

/* ----------------- fim cartas que viram ------------------ */



/* ----------------- início aside ------------------ */



aside {
    display: none;
    color: white;
    /*padding: 5px;
    margin: 10px;
    min-height: 100px;*/
    
}
/*aside#esquerda {
    float: left;
    width: 20%;
    height: 100%;
    background-image: linear-gradient(to right, #ffffff, #1292c9);
}
aside#direita {
    float: right;
    width: 20%;
    background-image: linear-gradient(to right, #1292c9, rgb(255, 255, 255));
    
}
div.classdivasideesq {
    text-align: left;
}
div.classdivasidedir {
    text-align: right;
}*/

@media only screen and (min-width: 1000px) {
aside {
    display: block;
    
}

}

/* ----------------- fim aside ------------------ */

    /* ----- início do adapta largura em celular ----- */
img.class480 {
    width: 400px;
    height: 400px;
    text-align: auto;
} 
img.class3x1 {
    width: 399px;
    height: 133px;
    text-align: auto;
}
img.original600x300 {
    width: 400px;
    height: 200px;
    text-align: auto;
} 

@media only screen and (max-width: 520px) {
section.sectionsadapt {
    width: 90%;

}
section.sectionsadaptinicial {
    width: 90%;

}

.divsadapt {
    width: 90%;
}
}
@media only screen and (max-width: 520px) {
    img.class480 {
    width: 340px;
    height: 340px;
}
img.class3x1 {
    width: 339;
    height: 113px;
    text-align: auto;
}
}
@media only screen and (max-width: 480px) {
    img.class480 {
    width:  322px;
    height:  322px;
}
img.class3x1 {
    width: 321px;
    height: 107px;
    text-align: auto;
}
}
@media only screen and (max-width: 440px) {
    img.class480 {
    width:  264px;
    height:  264px;
}
img.class3x1 {
    width: 264px;
    height: 88px;
    text-align: auto;
}
section#sectionad1 {
    display: none 
}
section#sectionad2 {
    display: none 
}
section#sectionad3 {
    display: none 
}
}
@media only screen and (max-width: 400px) {
    img.class480 {
    width:  220px;
    height:  220px;
}
img.class3x1 {
    width: 219px;
    height: 73px;
    text-align: auto;
}
}
@media only screen and (max-width: 350px) {
    img.class480 {
    width:  160px;
    height:  160px;
}
img.class3x1 {
    width: 159px;
    height: 53px;
    text-align: auto;
}}
@media only screen and (max-width: 300px) {
    img.class480 {
    width:  120px;
    height:  40px;
}}
/*fim do adapta largura em celular*/


/*início carrossel*/

.carousel-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 800px;
    margin: auto;
    background-color: #21A9E8;
}

.carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
}

.carousel-item {
    flex: 0 0 auto;
    width: 100%;
    text-align: center;
}

.carousel-item img {
    width: 50%;
    height: auto;
    border-radius: 8px;
}

p.carousel-title {
    color: #F9C84E;
}
.prev-btn, .next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.5rem;
    padding: 10px;
    z-index: 10;
}

.prev-btn {
    left: 10px;
}

.next-btn {
    right: 10px;
}

@media (max-width: 768px) {
    .prev-btn, .next-btn {
        font-size: 1.2rem;
        padding: 8px;
    }
}

/*fim carrossel*/

/* Barra de rolagem inteira */
::-webkit-scrollbar {
    width: 10px; /* Largura da barra vertical */
    height: 10px; /* Altura da barra horizontal */
}

/* Cor do fundo da barra */
::-webkit-scrollbar-track {
    background: black;
}

/* Cor da "alça" da barra de rolagem */
::-webkit-scrollbar-thumb {
    background: #C9CEBD ;  
    border-radius: 5px; /* Deixa arredondada */
}

/* Efeito quando passa o mouse */
::-webkit-scrollbar-thumb:hover {
    background: #00c8ff;
}