/* main container */
.main_container {
    max-width: 80%;
    
    display:flex;
    flex-direction:column;
    margin:45px auto 0px;
    align-items:center;
    margin:70px auto;
 }



 /* section container  */
 .section_container{
   max-width:900px;
    width:100%;
    display: flex;
    flex-direction:column; 
    align-items: center;
    margin:10px auto 10px;
    padding: 5px 5px;    
    color: var(--cor-secundary);
    
 }



/* boxsections sãos as caixas que vão guardar as seções */ 
 .boxSection {

    
    width:100%;
       
    margin:20px auto 20px;
    color:var(--cor-primary);
    display:flex;
    flex-direction:column;
    justify-content: space-between;
    align-items: center;
    background-image: var(--cor-primary-linear-gradient); 
    box-shadow: 2px 2px 3px black;
    padding:10px;
    border-radius: 25px;
    
 } 






/* cabeçãlho da caixa de seção */


 .header_boxSection {
    
    width:100%;
    height:50px;  
    padding:0px 5px;
    display:flex;
    flex-direction:row;
    justify-content: space-between;
    align-items: center;    
 }  


 /* Conteudo expandido */

 .content {
    
    width:100%;
    max-height: 0px;
    overflow:hidden;
    opacity:0;    
    
    transition: max-height 0.01s ease; 
}



.content.active {
    
    max-height: 10000px;    
    display:flex;
    overflow:visible;
    opacity:1;
    padding:0px 10px;
    margin:15px 0px;
    text-align: justify;
    
    
    transition:opacity 1.5s ease, max-height 0.5s ease;
}




 /* Titulo do cabeçalho da seções */

 .title_section_container{
    display: flex;
    align-items:center;
    justify-content: start;    
    gap:20px;
}



/* Icone da seção */
.iconImage{
    max-width:40px;
    height: 40px;
    margin:0px 0px 0px 10px;
    padding: 0px 0px 0px 0px;
    object-fit:cover;
    filter: drop-shadow(0 0 0.20rem var(--cor-secundary));
}


/* icone da seta que vai abrir e fechar a seção */
.btn_arrowImage{ 
    max-width:20px;
    height: 20px;
    margin:0px 10px 0px 0px;
    padding: 0px 0px 0px 0px;
    cursor:pointer;
 }



/* Sub Sections estilos */

/* Container sub BoxSections  */

.container_subBoxSection{
   width:100%;
   display: flex;
   flex-direction: column;
   align-items:center;
   margin:0px;
   padding: 15px 0px 5px 0px;
      
}

/* Botão seta para abrir a subSection */
.btn_arrowImage_subBoxSection{
   max-width:20px;
   height: 20px;
   margin:0px 10px 0px 0px;
   padding: 0px 0px 0px 0px;
   cursor:pointer;
}


/* Card que estao idicando em tramite */
.em_Elaboração{
   width:100%;
   height:235px;
   text-align:center;
   display:flex;
   align-items:center;
   justify-content:center;
}

.em_Elaboração h1 {
   transform:rotateZ(-50deg);
   color:var(--cor-primary);
}


/* Conteudos da subsection*/

.container_subSection {

   width:100%;
   display:flex;
   flex-direction:column;
   margin-bottom:20px;
   padding:15px 5px;
   color:var(--cor-secundary);
   background: var(--cor-primary); 
   
   border: 1px solid var(--cor-primary); 
   border-radius:20px;
  
}

.header_subSection {
   display:flex;
   align-items:center;
   justify-content:space-between;
    
}

.title_header{
   display:flex;
   align-items:center;
   gap:10px;
}

.content_subSection{
   
   width:100%;
   max-height: 0px;
   overflow:hidden;
   opacity:0;    
   
   transition: max-height 0.1s ease;  

}






/* Efeito ativar o conteudo da subsection  */

.content_subSection.active{
   overflow:visible;
   opacity:1;

   max-height: 10000px;
    
   display:flex;
   overflow:visible;
   opacity:1;
   padding:0px 10px;
   margin:15px 0px;
   text-align: justify;

   transition:opacity 1.5s ease, max-height 0.5s ease;
}


/* Responsividade telas mairoes que 800px */