/*BANNER*/

#banner{
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(../img/bakcgrounds/cuidado.jpg);
    position: relative;
    z-index: 1;
    background-size: cover;
}

#banner::after {
    content: '';
    background-color: #fff;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0.5;
    z-index: -1;
}

#banner #banner-content{
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    position: absolute;
}

#banner #banner-content h1{
    font-size: 52px;
    color: #344e41;
    width: 60%;
    line-height:1.2em;
    margin-bottom: 20px;
}

#banner #banner-content p{
    color: #344e41;
    width: 40%;
    line-height:1.2em
}

#banner #banner-content a{
    font-size: 22px;
    background-color: #344e41;
    color: #fff;
    width: 40%;
    display: flex;
    justify-content: center;
    border-radius: 50px;
    padding: 10px;
    margin-top: 20px;
}

#banner #banner-content a:hover{
    background-color: #fff;
    color: #344e41;
    transition: background-color 0.2s ease-in;
    
}


/*SERVIÇOS PRESTADOS*/

#services{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #87986a;
    position: relative;
}

.botaobannerpassar{
    position:absolute;
    z-index: 1000;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    top: calc(50%);
    cursor: pointer;
    background-color: #344e41;
    color: #fff;
    font-size: 18px;
}

#button-left{
    left: 5%;
}

#button-right{
    right: 5%;
}

.servicos{
    opacity: 0.5;
    transition: opacity 1s ease-in;
}

#services #services-content{
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    margin: 60px 0 80px;
}

#services #services-content h1{
    font-size: 52px;
    color: #344e41;
    margin-bottom: 20px;
}

#services #services-content div{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#services #services-content span{
    display: none;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

#services #services-content span .servicos-mobi{
    display: flex;
    justify-content: center;
}

#services #services-content span nav{
    display: flex;
    justify-content:space-between;
    align-items: center;
    background-color: #fff;
    border-radius: 50px;
    width: 90%;
    margin-bottom: 20px;
}


#services #services-content .servicos nav{
    display: flex;
    justify-content:space-between;
    align-items: center;
    background-color: #fff;
    border-radius: 50px;
    width: 49%;
    margin-bottom: 20px;
}

#services #services-content div nav img{
    width: 35%;
    height: 100%;
    border-radius: 50px 0 0 50px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#services #services-content div nav #nutricao-idoso{
    background-image: url(../img/bakcgrounds/nutricao-idoso.jpg);
}

#services #services-content div nav #psicologia-idoso{
    background-image: url(../img/bakcgrounds/psicologia-idoso.jpg);
}

#services #services-content div nav #terapia-coupacional{
    background-image: url(../img/bakcgrounds/terapia-coupacional.jpg);
}

#services #services-content div nav #fioterapia{
    background-image: url(../img/bakcgrounds/fioterapia.jpg);
}

#services #services-content div nav span{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 2px;
    width: 65%;
}

#services #services-content div nav h3{
    font-size: 22px;
    color: #344e41;
    margin: 10px 0;
}

#services #services-content div nav p{
    color: #344e41;
    display: flex;
    margin: 10px;
    text-align: center;
    line-height: 1.3em;
}

#services #services-content div nav a{
    margin: 20px 0;
    background-color: #344e41;
    color: #fff;
    padding: 10px 30px;
    border-radius: 50px;
}

#services #services-content div nav a:hover{
    background-color: #87986a;
    transition: background-color 0.2s ease-in;
}


/*DEPOIMENTOS*/

#testimony{
    width: 100%;
    display:none;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}

#testimony #testimony-content{
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    margin: 60px 0 80px;
}

#testimony #testimony-content h1{
    font-size: 52px;
    color: #344e41;
}

#testimony #testimony-content nav{
    display: flex;
    justify-content: space-between;
}

#testimony #testimony-content span{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 28%;
    border: solid #344e41 1px;
    padding: 20px;
    border-radius: 30px;
}

#testimony #testimony-content img{
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

#testimony #testimony-content p{
    text-align: center;
    margin: 15px 0;
}

#testimony #testimony-content h3{
    margin: 0;
}


/*RESUMO EMPRESA*/

#sobre{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #faedcd;
}

#sobre #sobre-content{
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    margin: 60px 0 80px;
}

#sobre #sobre-content h1{
    font-size: 52px;
    color: #344e41;
    width: 100%;
    line-height:1.2em;
    margin-bottom: 20px;
}

#sobre #sobre-content p{
    color: #344e41;
    width: 100%;
    line-height:1.2em;
    text-align: left;
}

#sobre #sobre-content div{
    display: flex;
    justify-content: space-between;
}

#sobre #sobre-content div nav{
    display: flex;
    flex-wrap: wrap;
    flex-direction:row;
    width: 70%;
    justify-content: center;
    margin-top: 20px;
}

#sobre #sobre-content div img{
    width: 20%;
    margin: 20px;
}

#sobre #sobre-content div nav span{
    border: 2px solid #344e41;
    margin: 5px;
    padding: 10px 30px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/*SERVIÇOS CUIDADORA*/
.servicos-cuidadora{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #faedcd;
}
/*.servicos-cuidadora{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #9cc5a1;
}*/

.servicos-cuidadora .servicos-cuidadora-content{
    width: 80%;
    display: flex;
    justify-content:space-between;
    align-items: center;
    margin: 20px 0 30px 0;
}

.servicos-cuidadora .servicos-cuidadora-content h2{
    font-size: 52px;
    color: #344e41;
    width: 100%;
    line-height:1.2em;
    margin-bottom: 20px;
}

.servicos-cuidadora .servicos-cuidadora-content p{
    color: #344e41;
    width: 100%;
    line-height:1.2em;
    text-align: left;
}

.servicos-cuidadora .servicos-cuidadora-content nav{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.servicos-cuidadora .servicos-cuidadora-content ul{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.servicos-cuidadora .servicos-cuidadora-content ul li{
    color: #344e41;
    margin: 10px;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    display: flex;
    align-items: center;
    border: 1px #344e41 solid;
    padding: 10px 15px;
    border-radius: 20px;
}

.servicos-cuidadora .servicos-cuidadora-content a{
    font-size: 18px;
    background-color: #344e41;
    color: #fff;
    width: 90%;
    display: flex;
    justify-content: center;
    border-radius: 50px;
    padding: 10px;
    margin-top: 20px;
}

.servicos-cuidadora .servicos-cuidadora-content a:hover{
    background-color: #9cc5a1;
    color: #344e41;
    transition: background-color 0.2s ease-in;
}


@media(max-width: 1085px) {
    #banner #banner-content h1, #banner #banner-content p, #banner #banner-content a {
        width: 60%;
    }

    #banner {
        height: 400px;
    }

    #banner #banner-content, #services #services-content, #testimony #testimony-content, #sobre #sobre-content, .servicos-cuidadora .servicos-cuidadora-content{
        width: 85%;
    }

    #button-right{
        right: 3%;
    }

    #button-left{
        left: 3%;
    }
}

@media(max-width: 902px) {

    body{
        font-size: 14px;
    }

    #banner #banner-content, #services #services-content, #testimony #testimony-content, #sobre #sobre-content, .servicos-cuidadora .servicos-cuidadora-content{
        width: 90%;
    }

    #banner #banner-content h1{
        width: 70%;
    }

    #services #services-content, #sobre #sobre-content, #testimony #testimony-content{
        margin: 40px 0 50px;
    }

    #testimony #testimony-content span{
        width: 26%;
    }

    .botaobannerpassar{
        width: 30px;
        height: 30px;
    }

    #button-right{
        right: 1%;
    }

    #button-left{
        left: 1%;
    }
}

@media(max-width: 840px) {
    #banner #banner-content h1, #banner #banner-content p, #banner #banner-content a {
        width: 80%;
    }

    #banner{
        height: 400px;
    }

    #services #services-content, #sobre #sobre-content, #testimony #testimony-content{
        margin: 40px 0 50px;
    }

    #banner #banner-content h1, #services #services-content h1, #testimony #testimony-content h1, #sobre #sobre-content h1{
        font-size: 45px;
    }

    .servicos-cuidadora .servicos-cuidadora-content h2{
        font-size: 30px;
    }
}

@media(max-width: 761px) {
    
    #banner #banner-content h1, #banner #banner-content p, #banner #banner-content a {
        width: 90%;
    }

    #banner{
        height: 350px;
    }

    #button-right{
        right: 3%;
    }

    #button-left{
        left: 3%;
    }

    #services #services-content #serv{
        display: none;
    }

    #services #services-content span{
        display: flex;
    }

    #sobre #sobre-content div{
        flex-direction: column;
        align-items: center;
    }

    #sobre #sobre-content div nav{
        width: 90%;
    }

    #sobre #sobre-content div img{
        width: 30%;
        margin: 20px;
    }
}

@media(max-width: 710px) {
    #banner #banner-content h1, #banner #banner-content p, #banner #banner-content a {
        width: 100%;
    }

    #services #services-content div nav h3{
        font-size: 18px;
    }
    #services #services-content div nav p{
        margin: 0 5px;
    }

    #services #services-content div nav a{
        margin: 5px 0 10px;
    }

    #testimony #testimony-content nav{
        flex-direction: column;
        align-items: center;
    }

    #testimony #testimony-content span{
        width: 90%;
        margin: 5px 0;
        padding: 10px;
    }

    #banner #banner-content h1, #services #services-content h1, #testimony #testimony-content h1, #sobre #sobre-content h1{
        font-size: 40px;
    }

    .servicos-cuidadora .servicos-cuidadora-content{
        flex-direction: column;
        margin: 20px 0;
    }

    .servicos-cuidadora .servicos-cuidadora-content .imagem-servico-left, .servicos-cuidadora .servicos-cuidadora-content .imagem-servico-right{
        display: none;
    }

    .servicos-cuidadora .servicos-cuidadora-content nav{
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .servicos-cuidadora .servicos-cuidadora-content nav ul{
        width: 100%;
    }
}

@media(max-width: 635px) {
    #banner #banner-content h1, #services #services-content h1, #testimony #testimony-content h1, #sobre #sobre-content h1{
        font-size: 35px;
    }
}

@media(max-width: 550px) {
    #banner #banner-content h1, #services #services-content h1, #testimony #testimony-content h1, #sobre #sobre-content h1{
        font-size: 30px;
    }

    #banner #banner-content a{
        font-size: 20px;
        width: 95%;
    }

    #banner{
        height: 300px;
    }

    .servicos-cuidadora .servicos-cuidadora-content a{
        font-size: 16px;
    }
}

@media(max-width: 520px) {
    #banner #banner-content h1, #services #services-content h1, #testimony #testimony-content h1, #sobre #sobre-content h1{
        font-size: 25px;
    }
}

@media(max-width: 470px) {
    #services #services-content span nav{
        width: 85%;
    }

    #services #services-content span nav{
        width: 80%;
        border-radius: 20px;
        flex-direction: column;
    }

    #services #services-content div nav img{
        border-radius: 20px 20px 0 0;
        height: 200px;
        width: 100%;
    }
}

@media(max-width: 420px) {
    #banner #banner-content a{
        font-size: 18px;
    }

    #sobre #sobre-content div img{
        width: 30%;
        margin: 10px;
    }

    #sobre #sobre-content div nav{
        margin-top: 10px;
    }

    .servicos-cuidadora .servicos-cuidadora-content h2{
        font-size: 25px;
    }

    .servicos-cuidadora .servicos-cuidadora-content a{
        font-size: 14px;
    }
}


@media(max-width: 355px) {
    #banner #banner-content a{
        font-size: 14px;
    }

    

    #services #services-content span img{
        width: 80%;
        border-radius: 20px;
    }

    

    #services #services-content span nav a{
        margin: 5px 0 5px;
        padding: 10px 20px;
    }

    #services #services-content, #sobre #sobre-content, #testimony #testimony-content {
        margin: 30px 0 40px;
    }

    
}

@media(max-width: 300px) {


    .servicos-cuidadora .servicos-cuidadora-content h2{
        font-size: 16px;
    }

    .servicos-cuidadora .servicos-cuidadora-content p, .servicos-cuidadora .servicos-cuidadora-content li{
        font-size: 12px;
    }

    .servicos-cuidadora .servicos-cuidadora-content a{
        font-size: 14px;
    }
    
}

@media(max-width: 280px) {
    #banner #banner-content h1, #services #services-content h1, #testimony #testimony-content h1, #sobre #sobre-content h1{
        font-size: 20px
    }
}