@media screen and (max-width: 1300px) {
    .card-graphiste{
        width: 300px;
    }
    .container-card-graphiste{
        width: 1150px;
    }
  }
  @media screen and (max-width: 1150px) {
    .card-graphiste{
        width: 300px;
    }
    .container-card-graphiste{
        width: 1000px;
    }
  }
  @media screen and (max-width: 1000px) {
    .card-graphiste{
        width: 280px;
    }
    .container-card-graphiste{
        width: 900px;
    }
    .img-partner img{
        width: 150px;
    }
    .subtitle-portfolio{
        width: 800px;
    }
  }
  @media screen and (max-width: 900px) {
      .container-card-graphiste{
        width: 800px;
      }
  }
  @media screen and (max-width: 860px) {
    .img-partner img{
        width: 100px;
    }
}
@media screen and (max-width: 820px) {
    .container-card-graphiste{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .subtitle-portfolio{
        width:auto;
    }
    .container-card-graphiste{
        width: auto;
    }
    .card-graphiste{
        height: 235px;
    }
    .btns-contact{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .btn-contact{
        margin-top: 10px;
        margin-bottom: 10px;
    }
    #crayon1{
        top: 2%;
    }
}
@media screen and (max-width: 400px) {
    .logo-complet{
        width: 300px;
    }
    header .logo{
        margin-left: 20px;
    }
}




/* responsive bg part 1 */
@media screen and (max-width: 1740px) {
   #cercle1{
        left: -5%;
        top:4%;
    }
    .img-para1{
        width: 270px;
    }
    .img-para5{
        width: 450px;
    }
    #chaine1{
        top: 9%;
    }
    #barre1{
        top: 9%;
    }
}
@media screen and (max-width: 1000px) {
    .img-para6{
        width: 100px;
    }
    #chaine1{
        top:9%;
    }
    .img-para2{
        width: 120px;
    }
    .img-para3{
        width: 180px;
    }
    .container-img-portfolio{
        display: none;
    }
    .container-img-portfolio-res{
        display: flex;
        align-items: center;
        flex-direction: column;
        padding-bottom: 50px;
    }
    .img-portfolio-res{
        margin-top: 20px;
        margin-bottom: 20px;
        border-radius: 20px;
        box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.06);
        filter: drop-shadow(0px 10px 36px rgba(0, 0, 0, 0.16));
    }
    
}
@media screen and (max-width: 768px) {
    #barre1{
        left: 15%;
    }
    .img-para1{
        width: 200px;
    }
    #cercle1{
        top: 5%;
    }
    #chaine1{
        left: 1%;
    }
    .img-para5{
        width: 300px;
    }
    #barre1{
        top: 20%;
    }
}
@media screen and (max-width: 630px) {
    #carre1{
        top:6%;
        left: 65%;
    }
    .img-para4{
        width: 170px;
    }
    .img-para3{
        width: 160px;
    }
    #triangle1{
        top:2%;
    }
    #chaine1{
        left: 3%;
    }
}

@media screen and (max-width: 500px) {
    .bg-part1{
        display: none;
    }
    #triangle1{
        left: 6%;
        top: 15%;
    }
    .color-part{
        height: 1720px;
    }
    .img-partner img{
        margin-top: 80px
    }
    .img-para2{
        width: 100px;
    }
    #crayon1{
        top: 2%;
    }
    .img-para1{
        width: 150px;
    }
    #carre1{
        top: 2%;
        left: 65%;
    }
    .img-para4{
        width: 140px;
    }
    #barre1{
        top: 9%;
        left: 20%;
    }
    #chaine1{
        top: 8%;
    }
    .img-partner{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .part4{
        background:url("../assets/img/background/part-5/amortisseur.svg") no-repeat center 20px, url(../assets/img/background/part-5/chaine.svg) no-repeat center 500px;
    }
}
@media screen and (max-width: 375px) {
    .img-para3{
        width: 130px;
    }
    .img-para4{
        width: 120px;
    }
    #chaine1{
        top: 8%;
        left: 60%;
    }
    .img-para5{
        width: 200px;
    }
}
@media screen and (max-width: 350px) {
    .img-portfolio-res{
        width: 300px;
    }
}
@media screen and (max-width: 344px) {
    .img-para5{
        display: none;
    }
    .img-para4{
        width: 100px;
    }
    #carre1{
        top: 95%;
        left: 70%;
    }
    #chaine1{
        top: 93%;
    }
    .img-para3{
        width: 120px;
    }
}