/*
Mobile (até 767px)

Tablet (768px a 1024px)

PC (acima de 1024px)
*/

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
@font-face {
font-family:'FontSobre' ;
src: url(../Font/TTF/Satoshi-Variable.ttf);
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
hr{
margin: 0 auto;
}
html,body{
    width: 100%;
    background-color:rgb(226, 230, 233);

}
header{
height: 9%;
background-image: url('../img/');
background-size: cover;
background-position: center;
background-color: black;
border-radius: 0 0 150PX 0;
display: flex;
}
.logo img{
position: relative;
top: -40px;
border-radius: 100px;
width: 150px;
}
.mobille-menu{
display: none;
top: 20px;
height: 27px;
width: 36px;
cursor: pointer
}
.mobille-menu div{
color: white;
width: 30px;
height: 3px;
margin: 4px;
background-color: white;
}
.nav-list{
display: inline;
height: 80vh;
border-radius: 830px 0 0 0;

}
.nav-list ul{
position: relative;
top: -40px;
display: none;
margin-top:15px ;
}
.nav-list li{
display: inline;
position: relative;
top: 50px;
left: 60px;
width: 80px;
margin: 10px;
margin-bottom: 60px;
}
.nav-list li:hover{
border-bottom: 1px solid darkgoldenrod;
padding-bottom: 3px;
}
.nav-list a:hover{
color: #ccc;
}
.nav-list a{
color: white;
}
.img-princip{
height: 75vh;
background-image: url('../img/meninaServico.jpg'); 
height: 90vh;
background-size: cover;
background-position: center ;
background-repeat: no-repeat;
}
.sect-conteudo{
background-color:  rgb(226, 230, 233);
width: 80%;
margin: 0 auto;
padding: 20px;
margin-bottom: -15px;
}
.conteudo{
margin-top: 20px;
text-align: center;
margin: 0 auto;
}
.conteudo h1{
text-align: center;
margin-bottom: 5px;
}
.conteudo hr{
width: 180px;
height: 3px;
background-color: rgb(228, 140, 32);
border: none;
margin:0 auto;
margin-bottom: 15px;
}
.caixas-servicos{
display: flex;
gap: 16px;
width: 100%;
flex-wrap: wrap;
}
.caixa-servicos{
display: inline-block;
width: 40%;
padding: 5px;
background-color: white; 
}
.caixa-servicos, .caixa-publico{
margin: 0 auto;
font-size: 13px;
margin-bottom: 15px;
}
.caixa-servicos h1{
margin-top: 20px;
color: darkgoldenrod;
}
.caixa-servicos img, .caixa-publico img{
margin-top: 4px;
margin-bottom: -5px;
height: 30px;
width: 40px;
}
.caixa-servicos p, .caixa-publico p{
padding: 5px;
max-width: 95%;
text-align: center;
font-size: 18px;
}
.publico-alvo{
background-color: black;
color: white;
padding-bottom: 30px;
text-align: center;    
}
.publico-alvo h1{
text-align: center;
padding-top: 15px;

}
.publico-alvo p{
width: 400px;
text-align: center;
margin:auto;
margin-top: 10px; 
margin-bottom: 10px;
}
.publico-alvo hr{
width: 200px;
height: 3px;
background-color: rgb(228, 140, 32);
border: none;
margin: 0 auto;
margin-top: 5px;

}
.caixas-publico{
display: inline-block;
gap: 16px;
margin: 0 auto;
flex-wrap: wrap;
text-align: center;
box-sizing: border-box;

border: 1px solid black;
}
.caixa-publico{
align-items: stretch;
}
.caixa-publico{
display: inline-block;
margin: 15px;
margin-left: 13px;
background-color: rgba(228, 140, 32, 0.699);
}
.caixa-publico p{    
color: white;
letter-spacing: 1px;
}
.caixa-publico h1{
margin-top: 5px;
color: black;
}
.principio{
background-color: black;
height: 300px;
margin-top: 25px;

}
.fundo-principio{
text-align: center;
background-color: rgba(228, 140, 32, 0.699);
height: 100%;
}
.item-principios{
display: inline-block;
background-color: black;
width: 40%;
height: 160px;
margin-top: 40px;
}
.fundo-principio h1{
padding-top: 30px;
}
.fundo-principio hr{
width: 120px;
height: 2px;
background-color: white;
margin-top: 5px;
margin-bottom: 10px;
}
.nav-list.active{
transform: translatex(-160px);
}
.slider-container {
position: relative;
width: 300px;
height: 180px;
overflow: hidden;
border: 1px solid #ccc;
border-radius: 10px;
margin:0 auto;
background-color: black;
color: white;
}
.slider-container h1{
color: darkgoldenrod;
}
.slide {
display: none;
position: absolute;
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
}
.active {
display: block;
}
.dots {
margin-top: 20px;
display: flex;
justify-content: center;
gap: 10px;
}
.dot {
width: 15px;
height: 15px;
background-color: black;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.3s;
}
.dot.active {
background-color: white;
}
/*SOBRE*/
.sobre-contain{
text-align: center;
background-color: white;
border-radius: 0 130px 0px 0px;
padding-bottom: 35px;
}
.apresentação{

margin: 0 auto;
}
.sobre-contain h1{
padding-top: 30px;
margin-bottom: 15px;  
}
.sobre-contain div h1{
padding: 0px;
margin: auto;
color: darkgoldenrod;
font-family: 'FontSobre';
margin-left: 30px;
}
.sobre-contain img{
width: 500px;
border-radius: 100px 0px 50px 0px;
margin-bottom: 20px;
margin-left: -45%;
}
.apresentação img ~ p{
position: relative;
top: -40vh;
left: 53% !important;
margin: 0;
max-width: 45%;
}
.sobre-contain p{
max-width: 400px;
margin: auto;
font-weight: 500;
font-family: 'FontSobre';
letter-spacing: 1px;
}
footer{
margin-top: 20px;
background-color: black;
color: white;        
}
span img{
cursor: pointer;
}
.contactos h1{
padding-top: 10px;
padding-left: 10px;
margin-bottom: 10px;
font-size: 25px;
}
.contactos a img{
width: 35px;
}
.contactos a{
color: white;
font-size: 14px;
margin: 15px;
}
.contactos a span{
position: relative;
left: 5px;
bottom: 14px;
}
.copy{
text-align: center;
}
/*TABLET*/
@media (min-width: 600px) and (max-width: 1024px){
.nav-list li{
    display: inline;
    position: relative;
    top: 50px;
    left: -22%;
    margin-left: -1px !important;
}
.nav-list ul {
    display: block;
    background-color: black;
}
.sobre-contain{
    background-color: white;
    border-radius: 0 130px 0px 0px;
    padding-bottom: 35px;
}
.apresentação{
    margin: 0 auto;
}
.sobre-contain h1{
    padding-top: 30px;
    margin-bottom: 15px;
}
.sobre-contain div h1{
    padding: 0px;
    color: darkgoldenrod;
    font-family: 'FontSobre';
    margin-left: 30px;
}
.sobre-contain img{
    width: 400px;
    border-radius: 100px 0px 50px 0px;
    margin-bottom: 20px;
    margin-left: -45%;
}
.apresentação img ~ p{
    position: relative;
    top: -40vh;
    left: 54% !important;
    max-width: 45%;
}
.sobre-contain p{
    max-width: 400px;
    margin: 0 auto;
    font-weight: 500;
    font-family: 'FontSobre';
    letter-spacing: 1px;
}
}

@media (max-width:480px) {
    .mobille-menu{
        position: relative;
        left: 20vw;
        top: 20px;
        height: 27px;
        width: 36px;
        cursor: pointer;
        
    }
}
/*Mobile*/
@media (max-width:768px) {
*{
    margin: 0;
    padding: 0;
}
@font-face {
    font-family:'FontSobre' ;
    src: url(../Font/TTF/Satoshi-Variable.ttf);
}
a{
    text-decoration: none;
}
ul{
    list-style: none;
}
body{
    background-color: rgb(226, 230, 233);
    
}
header{
    height: 9%;
    background-image: url('../img/');
    background-size: cover;
    background-position: center;
    border-radius: 0 0 150PX 0;
    display: flex;
    
}
.logo img{
    position: relative;
    top: -40px;
    border-radius: 100px;
    width: 150px;
}
.mobille-menu{
    display: block;
    position: relative;
    left: 10vw;
    top: 20px;
    height: 27px;
    width: 36px;
    cursor: pointer;
    
}
.mobille-menu div{
    color: white;
    width: 30px;
    height: 3px;
    margin: 4px;
    background-color: white;
    
}
.nav-list{
    opacity:0 ;
    pointer-events: none;
    display: block;
    position: absolute;
    top: 10px;
    right:0 ;
    background-color: black;
    height: 80vh;
    width: 180px;
    border-radius: 830px 0 0 0;
    transform: translateX(0%);
    transition: all transform 0.3s ease-in-out;
    z-index: 999;
}
.nav-list ul{
    position: relative;
    top: -40px;
    display: none;
    margin-top:15px ;

}
.nav-list li{
    display: block;
    position: relative;
    top: 150px;
    left: 60px;
    width: 80px;
    margin-bottom: 60px;
}

.nav-list a{
    color: white;
    margin-left: 10px;
}
.img-princip{
    height: 75vh;
    background-image: url('../img/meninaServico.jpg'); 
    z-index: 1;
    border: 1px solid black;
    width: 100%;
    background-size: cover;
}
main{
    width: 100%;
}
.sect-conteudo{
    width: 100% !important;
}
.conteudo{
    margin-top: 20px;
}
.conteudo h1{
    text-align: center;
    margin-bottom: 5px;
}
/*
.conteudo hr{
    text-align: center;
    position: relative;
    left: 35%;
    width: 180px;
    height: 3px;
    background-color: rgb(228, 140, 32);
    border: none;
    margin-bottom: 15px;
}*/
.caixas-servicos{
    display: flex;
    gap: 16px;
    width: 105%;
    margin-left: px;
    flex-wrap: wrap;
    align-items: stretch;
}
.caixa-servicos{
    width: 40%;
    font-size: 11px;
    margin: 5px;
    margin-left: 13px;
    padding: 5px;
    background-color: white;
    box-sizing: border-box;
}
.caixa-servicos, .caixa-publico{
    font-size: 13px;
    margin-bottom: 20px;
}
.caixa-servicos h1{
    margin-top: 20px;
    color: darkgoldenrod;
}
.caixa-servicos img, .caixa-publico img{
    margin-top: 4px;
    margin-bottom: -5px;
    height: 30px;
    width: 40px;
}

.caixa-publico p{    
    color: rgb(211, 209, 206);
    font-size: 15px;
}
.caixa-publico h1{
    margin-top: 5px;
    color: black;
}
.caixa-servicos p{
    font-size: 14px;
    
}
.caixas-publico p{
    max-width: 60%;
}
.caixa-servicos p, .caixa-publico p{
    padding: 5px;
    max-width: 95%;
    text-align: center;
    
}
.publico-alvo{
    background-color: black;
    color: white;
    padding-bottom: 30px;
    width: 113%;
    margin-left: -21px;
    border:  1px solid;
}
.publico-alvo h1{
    text-align: center;
    padding-top: 15px;
    
}
.publico-alvo hr{
    width: 200px;
    height: 3px;
    background-color: rgb(228, 140, 32);
    border: none;
    margin: 0 auto;
    margin-top: 5px;
}
.publico-alvo p{
    width: 400px;
    text-align: center;
    margin:auto;
    margin-top: 10px; 
    margin-bottom: 10px;
}
.caixas-publico{
   /* display: inline-block;
    gap: 16px;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
 */  
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 16px;
 box-sizing: border-box;
 align-items: stretch;
 
}

.caixa-publico{  
 /*   display: inline-block;      
    width: 40%;
    margin: 15px;*/
    flex: 1 1 40%;
    min-width: 144px;
    max-width: 145px;
    box-sizing: border-box;
    padding: 10px;
    flex-direction: column;
    justify-content: space-between;
    background-color: rgba(228, 140, 32, 0.699);

}
.principio{
    background-color: black;
    height: 300px;
    width: 112.5%;
    margin-top: 25px;
    margin-left: -20px;
}
.fundo-principio{
    text-align: center;
    background-color: rgba(228, 140, 32, 0.699);
    height: 100%;
    margin-left: -20px;
    width: 105.5% !important;
}

.fundo-principio h1{ 
    padding-top: 30px;
}
.fundo-principio hr{
    width: 120px;
    height: 2px;
    background-color: white;
    margin: 0 auto;
    margin-top: 5px;
    margin-bottom: 10px;
}
.slider-container{
    position: relative;
    width: 300px;
    height: 180px;
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin:0 auto ;
    background-color: black;
    color: white;
}
.slider-container h1{
    color: darkgoldenrod;
}
.slide {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
}
.dots {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
    text-align: center;
}
.dot {
    width: 15px;
    height: 15px;
    background-color: black;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}
.dot.active {
    background-color: white;
}
.nav-list.active{
    transform: translatex(0);
}
.active {
    display: block;
}
/*SOBRE*/
.main-sobre{
    width: 100%;
}
.sobre-contain{
    text-align: center;
    width: 100%;
    margin: 0 auto;
    background-color: white;
    border-radius: 0 130px 0px 0px;
    padding-bottom: 35px;
}
.apresentação{
    margin: 0 auto;
}
.sobre-contain h1{
    padding-top: 30px;
    margin-bottom: 15px;
    

}
.sobre-contain div h1{
    padding: 0px;
    color: darkgoldenrod;
    font-family: 'FontSobre';
    margin-left: 30px;
}
.sobre-contain img{
    width: 80%;
    border-radius: 100px 0px 50px 0px;
    margin-bottom: 20px;
    margin-left: 10px;
}
.apresentação img ~ p{
    position: relative;
    top: 0vh;
    left: 0 !important;
    max-width: 400px;
    margin: auto;
}
.sobre-contain p{
    max-width: 400px;
    margin: 0 auto;
    font-weight: 500;
    font-family: 'FontSobre';
    letter-spacing: 1px;
}
footer{
    margin-top: 20px;
    background-color: black;
    color: white;        
}
span img{
    cursor: pointer;
}
.contactos h1{
    padding-top: 10px;
    padding-left: 10px;
    margin-bottom: 10px;
    font-size: 25px;
}
.contactos a img{
    width: 35px;
}
.contactos a{
    color: white;
    font-size: 14px;
    margin: 15px;
}
.contactos a span{
    position: relative;
    left: 5px;
    bottom: 14px;
}
.copy{
    text-align: center;
}
}
@keyframes navLinkFade {
from{
    opacity: 0;
    transform: translateX(50px);
}
to{
    opacity: 1;
    transform: translateX(0);
}
}
.mobille-menu.active .line1{
transform: rotate(-45deg) translate(-4px, 4px);
}
.mobille-menu.active .line2{
opacity: 0;
}
.mobille-menu.active .line3{
transform: rotate(45deg) translate(-5px, -7px);
}
.nav-list.active{
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0%);
}