@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');


*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}

body {
    font-size: 100%;
    background-color: #fff;
    width:100%;
    overflow-x: hidden;
    }

    p {
    font-family: 'Roboto', sans-serif;
    font-size: 21px;
    font-weight: 300;
    line-height: 30px;
    }

 /*///////////////////////// cabeçalho /////////////////////*/
.cabecalho{
    display: flex;
    padding: 50px;
}

.cabecalho-logo{
    height: 40px;
}


 /*///////////////////////// introdução /////////////////////*/
.introducao{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;   
    margin-top:-150px;
    height:600px;
    
    padding: 10%;
    background-image: url(../img/bgimage.jpg);
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
}

.introducao-texto{
    display: flex;
    justify-content: space-around;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 42px;
    color:#FFF2E7;
    padding: 24px; 
    border-bottom: 1px solid #FFF2E7; 
    text-align: center;  
     
}


 /*///////////////////////// quem sou /////////////////////*/

.quem-sou{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 100px;  
    background-color: #FFF2E7; 
    padding: 5% 10% 5% 10%;    
}

.quem-sou-img{
    display: flex;  
    align-self: center;
    justify-content: space-between;    
    height:250px;     
}

.quem-sou-title{
    display: flex;
    flex-wrap:wrap;
    justify-content: space-around;

    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 34px;
    color:#383737;

    margin-top:100px;    
    padding: 24px; 
    border-bottom: 5px  solid #383737; 
    
    text-align: center;
}

.quem-sou-paragrafo{
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color:#383737;
    width:100%;
    /*padding:  0 10% 10% 10%; */
    
}


 /* ///////////////////////// break-image /////////////////////*/

.break-image{
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: bottom; 
    background-image: url(../img/break-img.jpg);
    height:550px;
    border-bottom:#E1B775 5px solid;

}


 /* ///////////////////////// nossa proposta de trabalho /////////////////////*/

.proposta{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 100px;  
    background-color: #ffffff; 
    padding: 5% 10% 5% 10%;       
}

.proposta-title{
    display: flex;
    flex-wrap:wrap;
    justify-content: space-around;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 34px;
    color:#E1B775;
    margin-top:10px;    
    padding: 24px; 
    border-bottom: 5px solid #E1B775;     
    text-align: center;
}

.proposta-paragrafo{
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color:#383737;
    width:100%;
}


/* ///////////////////////// depoimentos /////////////////////*/

.depoimentos-header{
    background-color: #FFF2E7;
    padding: 5% 5% 1% 5%;    
    display:flex;
    justify-content: space-around;
    align-items: center; 
    margin-bottom: -60px;
}

.depoimentos-header-title{ 
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 34px;
    color:#E1B775;
    padding: 25px; 
    border-bottom: 5px  solid #E1B775;  
    text-align: center;    
}

/* ///////////////////// texto depoimentos //////////////////////*/

.depoimentos{
    display: flex;
    flex-direction: row;
    justify-content: center;    
    align-items: center;    
    flex-wrap: wrap;     
    background-color: #FFF2E7;   
}

.item{     
    height:350px; 
    width:700px;
    align-items: center; 
    margin-top: 60px;   
}

.item-depoimentos-container-text{
    display: flex;   
    align-items: center;    
    flex-basis: 400px;
    text-align: center;  
    padding:10% 4% 4% 4%;         
}

.item-depoimentos-container-name{
    align-items: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 16px;
    text-align: center;
    justify-content: space-around;
}

.item-depoimentos-container-foto{
    display: flex;   
    margin-bottom: -30px;  
    margin-top: 30px;  
    justify-content: center;
}

/*///////////////////////////////// Mídias //////////////////////////////////////*/
.midia{
    display: flex;
    flex-direction: row;
    justify-content: center;    
    align-items: center;    
    flex-wrap: wrap;       
}

.midia-title{
    display: flex;
    justify-content: space-around;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 34px;
    color:#E1B775;
    padding: 5% 5% 1% 5%;    
    border-bottom: 5px solid #E1B775;     
    text-align: center;
}


/*//////////////////////////////// conteudo midia //////////////////////////////*/

.midia-content{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 5% 15% 5% 15%;
}

.midia-item{

}



/* /////////////////////////////// Investimento /////////////////////////////////*/

.invest{
    display: flex;
    flex-direction: row;
    justify-content: center;    
    align-items: center;    
    flex-wrap: wrap;
    gap: 100px;  
    background-color: #FFF2E7; 
    padding-bottom: 2%;       
}

.invest-title{
    display: flex;
    flex-wrap:wrap;
    justify-content: space-around;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 34px;
    color:#E1B775;
    margin-top:30%;    
    padding: 24px; 
    border-bottom: 5px solid #E1B775;     
    text-align: center;
}

.invest-box{
    margin-top: -60px;
    font-family: 'Roboto', sans-serif;
    float:left;
    width:100%;
    text-align:justify;
    padding: 20px;    
    color:#383737;
}

.invest-subbox
{   
    display: block;
    border-color: #E1B775;
    border-width: 1px;
    border-style: solid;
    width:100%;
    text-align:justify;
    padding: 20px;    
    color:#383737;
    margin-left: auto;
    margin-right: auto;
}

.invest-copy{
    display: flex;
    flex-direction: column;
    /*justify-content: flex-end;*/
    font-family: 'Roboto', sans-serif;
    font-weight: 300;    
    font-size:16px;
    text-align: center;
    line-height: 25px;
    color:#383737;
    width:100%;
    align-items: center;
    padding: 2% 5% auto 5%;
}

/* /////////////////////////// cards //////////////////////////*/

section.cards {
    display: flex;
    padding: 32px;
    justify-content: center;
    background-color: #FFF2E7;
    align-items: center;
}

section.cards section.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: white;
    padding: 1rem 1.5rem;
    
    max-height: 468px;
    margin-left: 32px;
    height: 400px;
    width: 300px;
    border-bottom: 10px solid #E1B775;
    margin-bottom:5%;
}

section.cards section.card:first-child {
    margin-left: 0;
}

.section.cards section.card .icon {
    width: 64px;
    height: 64px;
}

section.cards section.card img {
    width: 60px;
    padding-top: 50px;
}

section.cards section.card span {
    font-weight: 300;
    max-width: 240px;
    font-size: 80%;
    margin-bottom: 16px;
}

.text{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;    
    font-size:21px;
    line-height: 25px;
    color:#383737;
    width:100%;
    height:350;
    /*align-items: center;*/  
    margin-top: 50%;  
}

/* ///////////////////////// CTA /////////////////////*/

.cta{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    width:100%; 
    /*height:700px;*/
}

.cta-title{
    display: flex;
    flex-wrap:wrap;    
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 34px;
    text-align: center;
    color:#383737;
    padding: 5% 5% 0 5%;
}

.cta-paragrafo{
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 26px;
    text-align: center;
    color:#383737;
    display: flex;
    flex-direction: row;
    align-items: center; 
    padding-top: 50px; 

}

.cta-icons{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    gap: 80px;
    width:40px;
    margin-top: 100px;
    margin-bottom:100px;

}

/*////////////////// footer ///////////////////*/

.rodape{
    display: flex;
    justify-content: center;
    background-color: #383737;
    height: 70px;
    border-top: 5px solid #E1B775;
}

.rodape-text{
    font-family: 'Roboto', sans-serif;
    font-weight: 300;    
    color:#fff;
    font-size: 16px;
    padding-top: 15px;
}


/* /////////////////////// Responsivo ////////////////////////// */

@media screen and (max-width: 720px) {
    section.cards {
        flex-direction: column;
    }

    section.cards section.card {
        margin-left: 0;
        margin-bottom: 32px;
    }

    section.cards section.card:last-child {
        margin-bottom: 0;
    }

    section.cards section.card button {
        font-size: 70%;
    }

}