@media screen and (min-width: 576px) and (max-width: 992px) {
  /* Target planshet, landskape */

  .section-main-foto {
    width: 100%;
    height: 100vh;
  }

  .section-main-menu {
    width: 100%;
    height: 100vh;
  }

  .div-donec-auctor {
    width: 100%;
    height: 50vh;
  }

  .my-skills {
    width: 100%;
  }

  .blok-para1 {
    width: 100%;
    height: 50vh;
  }

  .blok-para2 {
    width: 100%;
    height: 50vh;
  }

  .section5 {
    width: 100%;
    flex-wrap: wrap;
  }

  .section5-block1 {
    width: 100%;
    height: 500px;
  }

  .section5-block2 {
    width: 50%;
    height: 500px;
  }
  
  .section5-block3 {
    width: 50%;
    height: 500px;
  }

  
}

@media screen and (max-width: 576px) {
  /* Target smartphones, portrait */

  .section-main-foto {
    width: 100%;
    height: 100vh;
  }

  .section-main-menu {
    width: 100%;
    height: 100vh;
  }

   .div-donec-auctor {
    width: 100%;
    height: 60vh;
  }
 
  .my-skills {
    width: 100%;
    flex-wrap: wrap-reverse;
  }

  .my-skills-foto {
    width: 100%;
    height: 50vh;
  }

  .my-skills-text {
    width: 100%;
    height: 50vh;
  }

  .blok-para1 {
    width: 100%;
    height: 100vh;
  }

  .blok-para2 {
    width: 100%;
    height: 100vh
  }

  .iterface-design {
    width: 100%;
  }

  .media-strategy {
    width: 100%;
  }
  
  .mobyle-app {
    width: 100%;
  }

  .coding-blok {
    width: 100%;
  }

  .section3 {
    width: 100%;
  }

  .section4 {
    background-position: top center;
  }

  .section3-content1,
  .section3-content2,
  .section3-content3,
  .section3-content4 {
    width: 100%;
    height: 300px;
    background-position: top center;
    background-size: 200%;
  }
  
  .section5 {
    width: 100%;
    flex-wrap: wrap;
  }

  .section5-block1 {
    width: 100%;
    height: 500px;
  }

  .section5-block2 {
    width: 100%;
    height: 500px;
  }
  
  .section5-block3 {
    width: 100%;
    height: 500px;
    padding: 40px;
  }

  
}