body{
    padding: 0;
    margin: 0;
    font-family: 'Inter', sans-serif;
}

:root{
    --cor-primaria: #522C27;
    --cor-secundaria: #311C19;
    --cor-fundo: #ffffff;
    --cor-texto: #484848;
}


/* ISOLAMENTO DO STYLE.CSS */

.sobrenosimg, 
.sobrenosimg *, 
.container, 
.container *, 
.roda, 
.roda * {
  all: unset;
  all: revert;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}


/* Cabeçalho */

.sob:hover{
    transform: scale(1.04);
    filter: brightness(1.04);
    transition: all 0.4s ease-in-out;
}

.sobrenosimg{
    width: 100%;
    height: 160px;
    background-image: url('../img/imagem_sobre_nos/perfect.jpg');
    background-size: cover;
    background-position: center 36%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--cor-fundo);
    overflow: hidden;
}

.sobrenosimg h2 {
    font-size: 2rem;
    position: relative;
    display: inline-block;
    border-bottom: 3px solid var(--cor-fundo);
    padding-bottom: 2px;
}
/* Fim do cabeçalho */

/* Conteúdo principal */
.container {
    display: grid;
    width: 80%;
    margin:100px auto;
    gap: 5rem 1rem;
    margin: 100px auto 10px;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "item-1 item-2"
                         "item-3 item-4"
                         "item-5 item-6";
}

/* Grid dos itens */
.item-3{grid-area: item-3;}
.item-4{grid-area: item-4;}


.bloco{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.bloco .text{
    max-width: 500px;
    font-size:23px;
    text-align: justify;
    text-indent: 1rem;
    color: var(--cor-secundaria);
}


.hv:hover{
    transform: scale(1.03);
    filter: brightness(1.05);
    transition: all 0.4s ease-in-out;
}

.um:hover{
    box-shadow: 0 0 10px rgba(128, 78, 70, 0.247);
}

/*  Titulo com destaque e separado lado a lado*/
.titulo-outro,
.titulo-lado {
    position: relative;
    display: inline-block;
}

.titulo-outro::after,
.titulo-lado::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 3px;
    background-color: var(--cor-primaria);
    bottom: -5px;
}

.titulo-outro::after {left: 0;}

.titulo-lado::after {right: 0;}

.titulo-lado {
    text-align: right;
    margin-left: 37%;
}

/* Design das imagens*/
.logo img{
    max-width: 300px;
    margin: 2rem;
}

.fotos img{
    max-width: 500px;
    border-radius: 13px;
}

/* Negrito e cores */
.skbld{font-weight: bold;}

.blod{font-weight: 750;}

.titulo1{
    color: var(--cor-texto);
    font-weight: 500;
}

.titub{
    color: var(--cor-primaria);
    font-weight: 700;
}

.nosbold{
    color: var(--cor-primaria);
    font-weight: 700;
    text-shadow: 1px 1px 8px rgba(255, 255, 255, 0.459);
}

/* Rodapé */
.roda {
    text-align: center;
    padding: 2rem 3rem;
    color: var(--cor-secundaria);
    margin: 1rem 10.7%;
    font-size: 20px !important;
}


/* Bloco de comentarios */


.comentario{
    margin-left: auto;
    margin-right: 0;
    margin-top: 40px;
    margin-bottom: 60px;
    max-width: 86%;
    display: flex;
    overflow-x: auto;
    mask-image: linear-gradient(to right, transparent, black 10px, black 95%, transparent 100%);
}


.comentario::-webkit-scrollbar{
    width: 0;
    scrollbar-width: none;
    display: none;
    cursor: all-scroll;
}

.comentario .bfundo{
    margin-left: 6px;
    min-width: 320px;
    height: 170px;
    background: linear-gradient(#EBC7B8, #DE908D);
    margin-right: 8px;
    border-radius: 23px;
}

.um{
    display: flex;
}

.blocob{
    height: 91%;
    margin: 0.45rem;
    background: var(--cor-fundo);
    border-radius: 18px;
    text-align: center;
}

.avlmedia{ 
    margin-top: 1.4rem;
}

.ref{
    margin: 10px;
    margin-top: 0.5rem;
    font-size: 15px;
}

.superior{
    display: flex;
    margin: 10px 10px;
    align-items: center;
}

.superior img{
    max-width: 32px;
    border: solid 2px black;
    border-radius: 50%;
}

.cliente {
    margin-left: 0.5rem
}

.av{
    margin-left: auto;
    margin-right: 0.04rem;
    background: var(--cor-fundo);
    padding: 4px 10px;
    border-radius: 15px;
}

.blocobranco{
    background: var(--cor-fundo);
    margin: 0.45rem;
    border-radius: 18px;
    padding: 0.5rem 0.8rem;
    height: 63%;
    text-decoration-line: underline;
    text-underline-offset: 5px;
    text-decoration-color: rgba(236, 124, 116, 0.212);
    text-decoration-thickness: 2px;
}


/*   Profissionais  */

.profissionais{
    margin: 5rem 11% 2rem;
}

#profi1{
    text-align: center;
    font-size: 25px !important;
    margin-bottom: 3rem;
}

.prf{
    justify-content: space-between;
    gap: 2rem;
    display: flex;
    text-align: center;
    margin-bottom: 5rem;
}

.primg{
    width: 150px;
    height: 150px;
    object-fit: cover;
    object-position: center;
    border: solid 3px var(--cor-primaria);
    border-radius: 50%;
}

.separar:hover{
    transform: scale(1.15);
    transition: all 0.4s ease-in-out;
}

.separar:hover .primg{
    box-shadow: 0 0 15px rgba(82, 44, 39, 0.377);
}



/* Responsividade */
@media (max-width: 768px){

    .container{
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
        grid-template-areas:
            "item-1"
            "item-2"
            "item-4"
            "item-3"
            "item-5"
            "item-6";
    }

    .bloco{
        gap: 1rem;
    }

    .bloco .text{
        max-width: 300px;
        font-size: 14px;
        text-indent: 1rem;
    }

    .logo img{
        max-width: 200px;
        margin: 1rem;
    }
    .fotos img{
        max-width: 270px;
    }

    /* trocar a posição das linhas do texto*/
    .titulo-outro::after,
    .titulo-lado::after {
        width: 100px;
        height: 2px;
    }

    .titulo-lado {
        margin-left: 26%;
    }

    .roda{font-size: 13px !important;
        margin: 1rem 1.5rem;
    }

    .comentario{
        max-width: 93%;
    }

    .prf{
    justify-content: center;
    display: grid;
    text-align: center;
}

}

@media (max-width: 908px){

    .container{
        display: grid;
        gap: 2rem;
    }

    .bloco{
        gap: 1rem;
    }

    .bloco .text{
        max-width: 310px;
        font-size: 15px;
        text-indent: 1rem;
    }

    .logo img{
        max-width: 210px;
        margin: 1rem;
    }
    .fotos img{
        max-width: 290px;
    }

    /* trocar a posição das linhas do texto*/
    .titulo-outro::after,
    .titulo-lado::after {
        width: 100px;
        height: 2px;
    }

    .titulo-lado {
        margin-left: 26%;
    }

    .roda{font-size: 15px !important;
    margin: 1rem 1rem;
    }

}

@media (min-width: 908px) and (max-width: 1100px){

    .container{
        display: grid;
        gap: 2rem;
    }

    .bloco{
        gap: 1rem;
    }

    .bloco .text{
        max-width: 350px;
        font-size: 17px;
        text-indent: 1rem;
    }

    .logo img{
        max-width: 200px;
        margin: 1rem;
    }
    .fotos img{
        max-width: 350px;
    }

    /* trocar a posição das linhas do texto*/
    .titulo-outro::after,
    .titulo-lado::after {
        width: 100px;
        height: 2px;
    }

    .titulo-lado {
        margin-left: 26%;
    }

    .roda{font-size: 16px !important;}

}

@media (min-width: 1100px) and (max-width: 1280px){

    .container{
        display: grid;
        gap: 2rem;
    }

    .bloco{
        gap: 1rem;
    }

    .bloco .text{
        max-width: 400px;
        font-size: 18px;
        text-indent: 1rem;
    }

    .logo img{
        max-width: 250px;
        margin: 1rem;
    }
    .fotos img{
        max-width: 400px;
    }

    /* trocar a posição das linhas do texto*/
    .titulo-outro::after,
    .titulo-lado::after {
        width: 150px;
        height: 2px;
    }

    .titulo-lado {
        margin-left: 32%;
    }

    .roda{font-size: 20px !important;
        margin: 1rem 10.7%;}

}