* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { background: #fff; font-family: "Poppins", serif; font-weight: 300; font-style: normal; }

.wrapper { position: relative; width: 100%; display: flex; overflow: hidden; height: 100vh; align-items: center; justify-content: center; }

.box-top-left { position: absolute; width: 500px; height: 500px; top: -250px; left: -250px; background: #141C22; transform: rotate(45deg);  }
.box-top-right { position: absolute; width: 500px; height: 500px; top: -250px; right: -250px; background: #141C22; transform: rotate(45deg);  }
.box-bottom-right { position: absolute; width: 200px; height: 200px; bottom: -100px; right: -100px; background: #005E6D; transform: rotate(45deg); z-index: 20; }
.box-bottom-right-extra { position: absolute; width: 141px; height: 70px; bottom: 0; right: 0; background: #88D100; z-index: 10; }

.info-block { max-width: 500px; text-align: center; }
.info-block img { max-width: 100%; }
.info-block .content { margin-top: 30px; }
.info-block .content h1 { font-size: 2em; }
.info-block .content .contact { margin-top: 30px; }
.info-block .content .contact strong  { font-size: 18px; }

@media (max-width: 992px) {

    .box-top-left { width: 400px; height: 400px; top: -200px; left: -200px; }
    .box-top-right { width: 400px; height: 400px; top: -200px; right: -200px; }

}

@media (max-width: 768px) {

    .box-top-left { width: 150px; height: 150px; top: -75px; left: -75px; }
    .box-top-right { width: 150px; height: 150px; top: -75px; right: -75px; }

    .info-block { padding: 20px; }

    .box-bottom-right { width: 150px; height: 150px; bottom: -75px; right: -75px; }
    .box-bottom-right-extra { width: 106px; height: 50px;  }


}