/*
cores Instagram
background: linear-gradient(#7f37c9 #ff2992 #ff9807);

Cor Facebook
background-color: #4267b3;

Cor Whatsapp
background-color: #25d366;


TAGS HTML
Sublinhado - <u> </u>       EX.: <u> Cursos BBS Solar </u>
Itálico - <i> </i>
Negrito - <b> </b>
*/


@import url('https://fonts.googleapis.com/css2?family=Asap:ital,wght@1,700&family=Inter:wght@100;200;300;400;500;600&family=Nunito:wght@700&family=Yellowtail&display=swap');

@media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
}    
   
target {
    /*background-color: gold;/**/
    scroll-margin-top: .8em;/**/
}

* {    
    font-family: 'Inter', sans-serif;   
    margin: 0;
    padding: 0;   
    box-sizing: border-box;
    letter-spacing: 1px;       
}

body{
   /*font-family: Nunito, sans-serif;*/
    color: #1c1c1c;    
}

h1, h2, h3{
    font-family: Asap, sans-serif;
    color: #000;    
}

.botao{
    color: #fff;
    text-decoration: none;
    padding: 10px 40px;
    font-size: 1em;
    border-radius: 3px;
    font-family: Nunito, sans-serif;    
}

.topo{  
    width: auto;  
    display: flex;    
    flex-direction: row; 
    flex-wrap: wrap;    
    justify-content: center;
    align-items: center;
    background-color: #111;/*#191970*/    
}
.topo img{
    width:80px;
    padding: 10px;
    /*border: 1px solid #fff;/**/
    /*border-radius: 100px;/**/
    /*background-color: #25d366;*/
}

.topo > a{
    text-decoration: none;
    color: #fff;
    font-weight: 200;
    font-size: 32px;
    font-family: Yellowtail, sans-serif;
    margin-top: 0px;
}

nav{
    display: flex;
    flex-direction: column;
    align-items: center;   
    background-color: #222;/*#191970*/    
}

nav > a{
    text-decoration: none;
    color: #fff;
    font-weight: 200;
    font-size: 32px;
    font-family: Yellowtail, sans-serif;
    margin-top: 20px;
}

nav ul{
    display: flex;
    flex-direction: column;
    align-items: center;
    list-style: none;
    padding: 0;
    width: 100%;
} 
nav ul li{
     text-align: center;
     width: 100%;
}
nav ul li a{
    display: inline-block;
    margin-bottom: 5px;
    padding: 10px 0;
    width: 90%;
    text-decoration: none;
    color: #fff;  
    border: #555 1px solid;
}
nav ul li a:hover{
    display: inline-block;
    margin-bottom: 5px;
    padding: 10px 0;
    width: 90%;
    text-decoration: none;
    color: #fff;  
    border: #999 1px solid;
    border-radius: 5px;
    /*background-color: #f1f1f1;*/
    cursor: pointer;
}
header{ 
    width: auto;  
    height: auto;/*60vh*/
    display: flex;
    flex-direction: column;        
    align-items: center;
    background-image: url("./img/site/sistemaBaixaResolucao.jpeg");/*PainelFV.jpg*/    
    background-size: cover;
    background-repeat: no-reapt;
    background-position: center;    
    padding: 10px 10px;   
}
header > h1{
    width: 90%;
    color: #fff;
    font-size: 1.9em;
    text-align: center;
    /*border:1px solid #000;*/
    /*background-color:filter: #666;*/
    /*backdrop-filter: blur(10px);*/
    filter:drop-shadow(2px 1px 1px #000);
    /*margin: 0px 0px;*/ 
    
}
header div{
    width: 100%;    
    backdrop-filter: contrast(50%); blur(2px); /*blur(3px); invert(20%); contrast(50%);*/   
}
header div p{      
    color: #fff;
    text-align: justify;
    font-size: 1em;
    padding: 5px 20px;
    line-height: 25px; 
    
    /*
    Esse comando filtro em a referencia no documento txt na pasta site unificado do goolge drive, com documentação de um sitema que explica o comando.
    Basicamente aplica um sobreamento no texto para facilitar a leitura por conta da imagem!*/
    /*filter:drop-shadow(1px 1px 0px #000);   */   
}
header > a{      
    margin: 20px 0px;  
}

#topo1 .botao{
    background-color: #f1f1f1;
    color: #1c1c1c;   
}
#botaozap{      
    /*border: #00ffff 1px solid; */  
    /*border: #000 1px solid;*/
    display: flex;    
}

#botaozap > a{
    margin: 15px auto;
    text-decoration: none;    
    padding: 17px 40px;       
    background-color: #25d366;/*#21e839*/
    border-radius: 5px;
    color: #fff;    
}
#botaozap i{
    width: 40px;    
    color: #fff;  /*#21e839*/         
}
#topo2{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;    
    text-align: center;
    padding: 30px;
    margin: 0px 0px;
}
#topo2 h1{
    color: #300;
    text-align: center;    
}
#topo2 div{            
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:space-around;
    gap: 10px;
       
}

#topo2 div.imagens > p{            
    padding: 25px;
    border: #a6f5a4 1px solid;
    border-radius: 100px;    
    background-color: #ebf1f1;
    font-size: 15pt;
}
#topo2 div.imagens > p:hover{            
    padding: 25px;
    border: #000 1px solid;
    border-radius: 100px;
    background-color: #a6f5a4;
    cursor: pointer;
}
#topo2 div.imagens > i{  
    color: #25d366;  
    padding: 45px 25px;     
    border: #658a47 1px solid;
    border-radius: 100px;;
    background-color: #ffffff;
}
#topo2 div.imagens p > a{            
    text-decoration: none;
    color: #191970;
}
#topo2 > h3{        
    margin-top: 40px;
    margin-bottom: 0px;
}
#sobre{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 20px;
    background-color: #191970;
    color: #fff;
    margin: 0;
}
#sobre > h1{
    color: #fff;    
}
#sobre h2{
    color: #fff;
    margin-top: 10px;
    margin-bottom: 25px;
}
#sobre p{
    margin-bottom: 1.0em;
    color: #fff;
    text-align: justify;
    line-height:1.3em;    
}

#sobre .botao{
    background-color: #f1f1f1;
    color: #1c1c1c;
    margin: 10px 0px;
}
#serviços{    
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;     
   
}
#serviços > h1{  
    width: 89%; 
    text-align: center;
    margin-top: 40px; 
    margin-bottom: 0px;      
}
#serviços div{    
    display: flex;
    flex-direction: column;    
   
    align-items: center; 
    text-align: center;   
    margin-top: 20px;

    padding: 20px 2px 20px 2px;
    border: 1px solid #11111452;
    border-radius: 3px;
    /*box-shadow: 0px 10px 40px -12px #70b3f152;*/
}
#serviços div .bordaimagem{  
    width: 292px; /*95%*/
    height: 220px;
    
    margin: 0;
    padding: 0;

    background-color:none; /* #25d366*/ 
    border: none;

    display: flex;
    flex-direction: row;
    align-items: center;
}

#serviços div img{  
    width: 290px; /*95%*/
    margin: 0;
    padding: 0;        
}

#serviços div h2{  
    width: 95%; 
    margin: 0;
    padding: 10px;       
}
#serviços div p{  
    width: 95%;  
    text-align: justify;
    text-justify: newspaper;
    margin: 0;
    padding-bottom: 10px;    
}

#serviços div div.novaturma{
    width: 100%;
    margin: 0;
    padding: 0px 0px  20px 0px;

    border: none;

    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    gap: 20px;
}
#serviços div div.novaturma p{
    width: auto;
    margin: 5px auto;
    padding: 0;
    
}
#serviços div div.novaturma p a{    
    text-decoration: none;
    color: rgb(37, 29, 151);
    
    padding: 10px 65px;
    background-color: #e7ddcb;

    border: none;
    border-radius: 5px;
    
    font-family:'Nunito', Verdana, sans-serif; 
    letter-spacing: 2px;
}
#serviços div div.novaturma p a:hover{
    text-decoration: none;
    color: #fff;
    padding: 10px 65px;
    background: #111;
    border-radius: 5px;
    cursor: pointer;    
}

#serviços div div.novaturma p a.saibamais{
    text-decoration: none;
    color: rgb(37, 29, 151);
    
    padding: 10px 83px;
    background-color: #e7ddcb;

    border: none;
    border-radius: 5px;
    
    font-family:'Nunito', Verdana, sans-serif; 
    letter-spacing: 2px;
}
#serviços div div.novaturma p a.saibamais:hover{
    text-decoration: none;
    color: #fff;
    padding: 10px 83px;
    background: #111;
    border-radius: 5px;
    cursor: pointer;    
}
#depoimentos{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 5px; 
    /*gap: 10px;*/
    background-color: #f1f1f1;       
}

#depoimentos h2{
    margin: 0;    
}
#depoimentos img{
    width: 95%;
    border: #191970 1px solid; 
}

#fotos1{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0px; 
    gap: 10px;
    background-color: #f1f1f1;       
}

#fotos1 h2{
    margin: 0;    
}
#fotos1 img{
    width: 95%;
    border: #191970 1px solid; 
}

#fotos{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
}
#fotos h2{
    margin-bottom: 2.5em;
}
#fotos img{
    width: 100%;
}

#contato{
    display: flex;
    flex-direction: column;
    align-items: center;     
    text-align: center;
    padding: 20px;
}

#contato h2{
    color: #000;
}
@media only screen and (min-width: 768px){

    nav{        
        height: auto;
        padding: 16px 0px;       
        flex-direction: row;        
        justify-content: space-around;
        background-color: #222;/*#191970*/ 
        
    }
    
    nav > a{
        margin-top: 0;        
    }
        
    nav ul{
        flex-direction: row;
        width: 70%;
    }
    nav ul li a{        
        width: 90%;
        margin-bottom: 0;        
        border: #666 1px solid;
        border-radius: 5px;
    }
    nav ul li a:hover{        
        width: 90%;
        margin-bottom: 0;         
        border: #999 1px solid;
        border-radius: 5px;
        /*background-color: #f1f1f1;*/
        cursor: pointer;
    }
    header{ 
        padding: 40px 0px;
        gap: 40px;
    } 
    
    header h1{
       font-size: 30pt; 
       margin-bottom: 20px;              
    }
   
    #topo1 div  > p{
        max-width: 1350px;
        margin: 0px auto;
    }
    #topo2 h1{
        color: #333;
        text-align: center;
        font-size: 30pt; 
        margin-bottom: 40px;       
    }
    #topo2 div .imagens{        
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-items: center;
        /*justify-content: center; 
        /*max-width: 1000px;*/
        margin: 0px 0px;
        gap: 0px 50px;
    }
    #topo2 img{        
        width: 150px;
    }
    
    #sobre{        
        height: auto; /*30vh*/
        justify-content: center;        
    }

    #sobre > h1{        
        margin: 10px 0px 20px 0px;
        padding: 0; 
        color: #fff;
        font-size: 23pt;      
    }

    #sobre > p{
        max-width: 1350px;
    }

    #serviços{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap; /*quebra de linha*/
        justify-content: center;
       
       /* width: auto;*/
        max-width: 1600px;
        /*border: 1px solid #000;*/
        margin: 0 auto;
       
    }
    #serviços h1{
        text-align: center;
        width: 80%;
        margin-bottom: 20px;
        
    }
    #serviços div h2{
        text-align: center;
        width: 95%;
        font-size: 18pt;
    }
    #serviços div{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        flex-grow: 1;
        flex-basis: 150px;
        margin: 0px 10px 20px 10px;
        padding: 10px 5px 30px 5px; 
        gap: 10px 10px; 
    }
    #serviços div .bordaimagem{  
        width: 300px; /* 292px 95%*/        
    }
    #serviços div p{        
        width: 95%;
    }
   
    #serviços div div.novaturma{
        width:100%;
        margin: 0;
        padding: 0px 0px  20px 0px;
    
        border: none;
    
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        gap: 5px;
    }
    #serviços div div.novaturma p{
        width: auto;
        margin: 15px auto;
        padding: 0;
        
    }
    #serviços div div.novaturma p a{ 
        
        text-decoration: none;
        color: rgb(37, 29, 151);
        
        padding: 10px 65px;
        background-color: #e7ddcb;
    
        border: none;
        border-radius: 5px;
        
        font-family:'Nunito', Verdana, sans-serif; 
        letter-spacing: 2px;
    }
    #serviços div div.novaturma p a:hover{
        text-decoration: none;
        color: #fff;
        padding: 10px 65px;
        background: #111;
        border-radius: 5px;
        cursor: pointer;    
    }

    #depoimentos{        
        padding: 20px 40px;              
    }
    #depoimentos h2{        
    }
    #depoimentos img{        
    }
    
    #fotos1{
        flex-direction: row;
        flex-wrap: wrap; /*quebra de linha*/
        justify-content: space-evenly;
        gap: 20px 0px;
    }

    #fotos1 h2{
        text-align: center;
        width: 100%;
    }

    #fotos1 img{
        width: 47%;
        border: #1c1c1c 1px solid;
        border-radius: 3px;
    }


    #fotos{
        flex-direction: row;
        flex-wrap: wrap; /*quebra de linha*/
    }

    #fotos h2{
        text-align: center;
        width: 100%;
    }

    #fotos img{
        width: 33.3333333%;
    }

    #contato{
        flex-direction: row;
        flex-wrap: wrap; /*quebra de linha*/
        justify-content: space-around;
        max-width: 500px;
        margin: 0 auto;

    }
    #contato h2, #contato p{
        width: 100%;        
    }
    /*
    footer div.mobile{
        display: none;
    }
    */
}