@media screen and (width <= 767px) {
    header {
        background:url('../image/backProfile.png') center / cover no-repeat;
    }

    .triangulo {
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-top: 100px solid var(--preto);
    }
    
    .sobreMim {
        flex-direction: column;
    }

    .cont {
        width:90%;
    }

    .cont > h1 {
        font-size:1.6em;
    }
    
    .cont > p {
        height:auto;
        font-size: 1em;
        margin-bottom: 40px;
    }
    
    .minhaFoto {
        display: none;
    }

    .meusProjetos, .clientServices {
        height: 70vh;
    }

    .titleMyProject, .titleMyProjectServices {
        font-size: 1.6em;
    }

    .titleMyProject::after, .titleMyProject::before, .titleMyProjectServices::after, .titleMyProjectServices::before {
        width:150px;
    }

    .project, .service {
        width: auto;
        height: 90%;
    }

    .project:hover {
        width:auto;
        height: 90%;
    }

    .project > p, .service > p {
        font-size: 1.4em;
    }    
    
    .ferramentas {
        height:90vh;
    }

    .ferramentas > h1 {
        height:20%;
        font-size: 1.4em;
        text-align: center;
    }

    .ferramentas::after {
        width: 150px;
        height: 150px;
    }

    .icones {
        display: none;
    }

    .iconesMobile {
        width:100%;
        height:80%;
        display: flex;
        flex-direction: column;
    }

    .icons {
        height: 35%;
        flex-direction: row;
        gap: 40px;
        z-index: 1;
    }

    .icons > img {
        width: 60px;
        height: 60px;
    }

    .estudos {
        height:80vh;
    }

    .estudos > h1 {
        font-size: 1.4em;
        text-align: center;
    }

    /* Certificados e Conquistas*/

    .certificados_section > h1 {
        margin-bottom:20px;
        height:15vh;
        font-size: 1.4em;
        text-align: center;
        z-index: 2;
    }

    .certificados_section > h1::after {
        width:20px;
        z-index: -5;
    }

    .certificados_section > h1::before {
        width:40px;
        z-index: -5;
    }

    .instituicoes {
        height: 22vh;
        width: 90%;
        padding: 10px;
    }

    .instituicoes > img {
        top: 1vh;
        width: 80px;
        height:60px;
    }

    .instituicoes > span {
        font-size: 1em;
    }

    .instituicoes > button {
        bottom: 1vh;
        height: 40px;
        width: 95%;
    }

    /*Avaliações*/

    .avaliacao {
        height:75vh;
        margin-bottom:0px;
    }

    .avaliacao > h1 {
        height:15%;
        font-size: 1.4em;
        text-align: center;
        z-index: 2;
    }

    .avaliacao > h1::after {
        border-right: 80px solid transparent;
        border-top: 80px solid var(--vermelhoPadrao);
        z-index: 1;
    }

    .avaliacao > h1::before {
        border-right: 80px solid transparent;
        border-top: 80px solid var(--preto);
        z-index: -5;
    }

    .avalia {
        margin-top: 10px;
        height: 55vh;
    }

    .avaliacoes {
        width: 350px;
        height: 90%;
    }

    .nameAvaliador > h1 {
        width:160px;
        height:50px;
    }

    .avaliadorPhoto > img {
        width:90px;
        height: 90px;
    }

    .avaliadorPhoto > button {
        right: 7vw;
        bottom: 2vh;
    }

    .avaliadorPhoto > button > span {
        font-size: 2.5em;
    }

    .contAvaliacao {
        height: 80%;
    }

    .stars {
        font-size: 2em;
        height:20%;
    }

    .contAvaliacao > p {
        font-size: 1.1em;
    }

    .descAvaliacao {
        font-size: 1em;
        height: 50%;
    }

    .qrCode {
        width: 60%;
        margin-left: 0px;
        padding-left: 10px;
    }

    .contactRedes {
        margin-block: -20px;
    }

    .qrCode > h1 {
        font-size: 1.4em;
        height: auto;
        text-align: center;
    }

    .qrCode > img {
        width: 95%;
        height: 40%;
    }

    .redesContact {
        width: 40%;
    }

    .redesContact > a {
        width: 60%;
        height: 15%;
    }

    .buttonAllProjects {
        width: 60%;
    }

    .buttonAllProjects:hover {
        width: 60%;
        height: 60%;
    }
}

@media screen and (width >= 767px) and (width <= 1023px) {
    header {
        background:url('../image/backProfile.png') center / cover no-repeat;
    }

    .sobreMim {
        height: 65vh;
    }

    .cont {
        width:90%;
        height:100%;
        gap:0px;
    }

    .cont > h1 {
        font-size:2em;
    }
    
    .cont > p {
        font-size: 1.4em;
    }

    .minhaFoto {
        display: none;
    }
   
  .project, .service {
    width: 700px;
  }
  
  .project:hover {
    width:700px;
    height: 90%;
  }

  .project > p,  .service > p {
    font-size: 2em;
  }


  .icones {
    display: none;
}

.iconesMobile {
    width:100%;
    height:80%;
    display: flex;
    flex-direction: column;
}

.icons {
    width: 100%;
    height: 35%;
    flex-direction: row;
    gap: 40px;
    z-index: 1;
}

.icons > img {
    width:100px;
    height: 100px;
}

.estudos {
    height:80vh;
}

.estudos > h1 {
    height:30%;
    width: 100%;
    font-size: 2em;
    text-align: center;
}

    /* Certificados */

    .certificados_section > h1 {
        height:15vh;
        font-size: 2em;
        text-align: center;
        z-index: 2;
    }

    .certificados_section > h1::after {
        width:20px;
        z-index: -5;
    }

    .certificados_section > h1::before {
        width:40px;
        z-index: -5;
    }

    .instituicoes {
        height: 10vh;
    }

    .instituicoes > img {
        width: 100px;
        height: 80px;
    }

    .instituicoes > span {
        font-size: 1.2em;
    }

    .instituicoes > button {
        height: 60px;
        width: 150px;
    }

    /* Avaliações */

.avaliacao {
    height:80vh;
    margin-bottom:0px;
}

.avaliacao > h1 {
    height:15%;
    font-size: 2em;
    text-align: center;
    z-index: 2;
}

.avaliacao > h1::after {
    border-right: 80px solid transparent;
    border-top: 80px solid var(--vermelhoPadrao);
    z-index: 1;
}

.avaliacao > h1::before {
    border-right: 80px solid transparent;
    border-top: 80px solid var(--preto);
    z-index: 1;
}

.avalia {
    margin-top: 10px;
}

.avaliacoes {
    width: 500px;
    height: 80%;
}

.nameAvaliador > h1 {
    height:70px;
    font-size: 1.6em;
}

.avaliadorPhoto > img {
    width:130px;
    height: 130px;
}

.avaliadorPhoto > button {
    right: 6vw;
    bottom: 3vh;
}

.avaliadorPhoto > button > span {
    font-size: 4em;
}

.contAvaliacao {
    height: 80%;
}

.stars {
    font-size: 2.5em;
    height:20%;
}

.contAvaliacao > p {
    font-size: 1.4em;
}

.descAvaliacao {
    font-size: 1.4em;
}

.qrCode {
    width: 60%;
    margin-left: 0px;
    padding-left: 10px;
}

.contactRedes {
    margin-block: -20px;
}

.qrCode > h1 {
    font-size: 2em;
    color: var(--branco);
    height: 20%;
    text-align: center;
}

.qrCode > img {
    width: 85%;
    height: 50%;
    border-radius:20px;
}

.redesContact {
    width: 40%;
}

.redesContact > a {
    width: 50%;
    height: 12%;
}

.buttonAllProjects {
    width: 60%;
}

.buttonAllProjects:hover {
    width: 60%;
    height: 60%;
}

.card {
    position: relative;
    width: 300px;
    height: 300px;
    background-color: #000;
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    box-sizing: border-box;
    overflow: hidden;
    border: 4px solid #1b1b1b;
    transition: all 0.3s ease;
    transform: rotate3d(20, -10, 1, 60deg);
}


}

@media screen and (height <= 500px) {
    .sobreMim {
        height: 180vh;
    }

    .cont > h1 {
        font-size:2em;
    }
    
    .cont > p {
        height: auto;
        font-size: 1.2em;
    }

    .meusProjetos, .clientServices {
        height: 260vh;
    }

    .ferramentas {
        height:180vh;
    }

    .estudos {
        height:150vh;
    }
    
    /* Certificados */

    .certificados_section {
        height: 350vh;
    }

    .instituicoes {
        height: 30vh;
    }

    .instituicoes > img {
        width: 100px;
        height:80px;
    }

    .instituicoes > span {
        font-size: 1em;
    }

    .instituicoes > button {
        height: 40px;
        width: 150px;
    }

    /* Avaliações */

.avaliacao {
    height:280vh;
    margin-bottom:0px;
}

.avaliacao > h1 {
    height:15%;
    font-size: 2em;
    text-align: center;
    z-index: 2;
}

.avaliacao > h1::after {
    border-right: 80px solid transparent;
    border-top: 80px solid var(--vermelhoPadrao);
    z-index: 1;
}

.avaliacao > h1::before {
    border-right: 80px solid transparent;
    border-top: 80px solid var(--preto);
    z-index: 1;
}

.avalia {
    height: 80%;
}

.avaliacoes {
    width: 500px;
    height: 80%;
}

.nameAvaliador > h1 {
    height:70px;
    font-size: 1.6em;
}

.avaliadorPhoto > img {
    width:130px;
    height: 130px;
}

.avaliadorPhoto > button {
    right: 6vw;
    bottom: 3vh;
}

.avaliadorPhoto > button > span {
    font-size: 4em;
}

.contAvaliacao {
    height: 60%;
}

.stars {
    font-size: 2.5em;
    height:20%;
}

.contAvaliacao > p {
    font-size: 1.4em;
}

.descAvaliacao {
    font-size: 1.4em;
}


    .contactRedes {
        height: 180vh;
    }

    .redesContact > a {
        width: 35%;
    }

    .qrCode {
        gap:0px;
    }

    .qrCode > h1 {
        height: auto;
    }

    .qrCode > img {
        width: 60%;
        height: 90%;
    }

    .icons > img {
        width:70px;
        height:70px;
    }
    
}

@media screen and (width <= 450px) {
    .buttonAllProjects {
        width: 80%;
    }
    
    .buttonAllProjects:hover {
        width: 80%;
        height: 60%;
    }

    .triangulo {
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-top: 100px solid var(--preto);
    }
    
    .sobreMim {
        height: auto;
        flex-direction: column;
    }

    .cont {
        width:90%;
        height:100%;
    }

    .cont > h1 {
        font-size:1.6em;
    }
    
    .cont > p {
        overflow-y: auto !important;
        font-size: 1em;
    }
    
    .minhaFoto {
        display: none;
    }

    .titleMyProject, .titleMyProjectServices {
        font-size: 1.4em;
        position: relative;
    }

    .titleMyProject::after, .titleMyProject::before, .titleMyProjectServices::after, .titleMyProjectServices::before {
        width:150px;
        height: 5px;
    }

    .project > p, .service > p{
        font-size: 1.4em;
    }    

    .meusProjetos {
        height: 80vh;
        gap: 10px;
    }

    .service > video {
        width: 90%;
        height: 60%;
    }

    .project > video {
        width: 90%;
        height: 60%;
    }


    .project:hover > img {
        width: 450px;
        height: 100%;
    }
    
    .ferramentas {
        width:100%;
        height:90vh;
        flex-direction: column;
        position: relative;
    }

    .ferramentas > h1 {
        height:20%;
        font-size: 1.2em;
        text-align: center;
    }

    .ferramentas::after {
        width:150px;
        height: 150px;
    }

    .icones {
        display: none;
    }

    .iconesMobile {
        width:100%;
        height:80%;
        display: flex;
        flex-direction: column;
    }

    .icons {
        width: 100%;
        height: 35%;
        flex-direction: row;
        gap: 40px;
        z-index: 1;
    }

    .icons > img {
        width:60px;
        height:60px;
    }

    .estudos {
        height:80vh;
    }

    .estudos > h1 {
        height:30%;
        width: 100%;
        font-size: 1.2em;
        text-align: center;
    }

    /*Certificados e Conquistas*/

    .certificados_section > h1 {
        height:15vh;
        font-size: 1.2em;
        text-align: center;
        z-index: 2;
    }

    .certificados_section > h1::after {
        width:20px;
        z-index: -5;
    }

    .certificados_section > h1::before {
        width:40px;
        z-index: -5;
    }

    .instituicoes {
        height: 35vh;
    }

    .instituicoes > img {
        top: 1vh;
        width: 80px;
        height:60px;
    }

    .instituicoes > span {
        font-size: 1em;
        text-align: center;
    }

    .instituicoes > button {
        bottom: 1vh;
        height: 40px;
        width: 95%;
    }

    /*Avaliações*/

.avaliacao {
    height: 80vh;
    margin-bottom:0px;
}

.avaliacao > h1 {
    height:15%;
    font-size: 1.2em;
    text-align: center;
    z-index: 3;
}

.avaliacao > h1::after {
    border-right: 80px solid transparent;
    border-top: 80px solid var(--vermelhoPadrao);
    z-index: -5;
}

.avaliacao > h1::before {
    border-right: 80px solid transparent;
    border-top: 80px solid var(--preto);
    z-index: -5;
}

.avalia {
    margin-top: 10px;
    height: 100%;
}

.avaliacoes {
    width: 300px;
    height: 100%;
}

.nameAvaliador > h1 {
    width:160px;
    height:50px;
}

.avaliadorPhoto > img {
    width:90px;
    height: 90px;
}

.avaliadorPhoto > button {
    right: 7vw;
    bottom: 4vh;
}

.avaliadorPhoto > button > span {
    font-size: 2.5em;
}

.contAvaliacao {
    height: 80%;
}

.stars {
    font-size: 2em;
    height:20%;
}

.contAvaliacao > p {
    font-size: 1.1em;
}

.descAvaliacao {
    font-size: 1em;
}

.qrCode {
    gap: 20px;
    margin-left: 0px;
    padding-left: 10px;
}

.contactRedes {
    margin-block: -20px;
}

.qrCode > h1 {
    font-size: 1.2em;
    color: var(--branco);
    height:auto;
    text-align: center;
}

.qrCode > img {
    width: 95%;
    height: 40%;
    border-radius:20px;
}

.redesContact {
    width: 40%;
    gap: 10px;
}

.redesContact > a {
    width: 60%;
    height: 15%;
}

.redesContact > a > img {
    width: 35px;
    height: 35px;
}

}