body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: "Roboto", Arial, serif;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAIAAADYhlU4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M0U0MzA3RDI4NjA0MTFFNEExMjRDMTA1MUUxNzhGMjgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6M0U0MzA3RDM4NjA0MTFFNEExMjRDMTA1MUUxNzhGMjgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozRTQzMDdEMDg2MDQxMUU0QTEyNEMxMDUxRTE3OEYyOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozRTQzMDdEMTg2MDQxMUU0QTEyNEMxMDUxRTE3OEYyOCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqMVmRUAAAMESURBVHjafJZJgsIwDAQHE/j/U7myTzsFhXASfABHXqRuLdbudDodDofn8/n3Hplfr9fH47Hf77O02+2e82itMXF1miaE+Ywwk2keHLnNI/OWv8vlkpkK8qkCJPf7PUIOZByPx1wdIcoi0RruzZHM0deNYwc4sDG/KsjIXRzLb+ZYk1UQRBg1kQxqItHuid35ztYYu6qg75stigVcl/3Zk89sYDWXRJ55hBzheKc0a9XYLQXqkPcc3FIjFA42KALybwU6LEvwA5rqG6zE7U7a0smDArwFiMgxH2f08+9PQ4sIjNAAa1tOFgFCHJ7DxivoRYMp3BZhmwd7mgoIg1WK7vMgHGEc9EYaugkc3COrXQe4qmhAYPhnjhuIQFaJItLQxBR6Vl+JMuQBVMJGhDqQY1zHSZM527aSvN82UCSz+gCtpAWMw4zbllWE2/RT++1kKAYyCMgnSEMx+ioC9hNv/VpCu5YXTIs8dSlyIvt8PnNphPkUNCiJ44Ei6O1mbSnAOiqghmNah99exZRgMZE/Ppj5wJo2KOC3RqGoTT3y2QDFowMCwuyVVUOpqJtMqHxSz4f3o1bfgSLrdCNCpMh6WYsg93LM2pxVn69VH3wVnuoDhmpAg899DMBKwGwpAIFA+1Zrosq4q1Yh4hjSTEZLhTVGBPUlnmoG3d4DH6DGBOKhzbGoiVlE81IBOaSrOmNYjb3mIGANgQgljXtxRq2SKpAiyWzQIuO8u0gMtqUQ3ijgBrEvyuC8Hh42E9QDJKsvqF7hItPbalTr7ocGWKqbrKkWxNoP6D+MNQ9sTQyt/Tw6MlSJV/0knSxXN9QmqmY7CNSq7mai6XBP+lDTUfh6D02UmQRuGzuVTYSgGQQhGrXsbmx5fNBgIr+1UphG/b2xItXSpntrdzOgqU+nhZUN8Gzb8Ao+zlsYMMp+YJU0XhffSqsAcL86jUhrB+aDMYTQD9Jq56gvfcc6JmMOA2sCf/X3bzSVtNV23daZnO/FhgDA4WapVpAZ5vbvPhqtljW5+hdgAJj+SWe6+wa1AAAAAElFTkSuQmCC);
  background-attachment: fixed;
}
.container {
  margin: 0%;
}
.container .row {
  /* display:flexbox; */
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: center;
  margin: auto;
}
.container .row .col-sm {
  position: relative;
  /* width: 350px;
    padding:10px; */
  /* background: #fff; */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  margin: 5px, 5px;
  box-sizing: border-box;
  overflow: hidden;
}
.container .row .col-sm .box::before {
  content: "";
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.2);
  z-index: 2;
  pointer-events: none;
}
.container .row .col-sm .box .icon {
  position: relative;
  width: 80px;
  height: 80px;
  color: #fff;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px auto;
  border-radius: 50%;
  font-size: 40px;
  font-weight: 700;
  transition: 1s;
}
.rt1 {
  color: #007cc2;
  text-shadow: 1px 2px 2px #040446;
}
.container .row .col-sm .box:nth-child(1) .icon {
  box-shadow: 0 0 0 0 #1757af;
  background: #1757af;
}
.container .row .col-sm .box:nth-child(1):hover .icon {
  box-shadow: 0 0 0 400px #1757af;
}

.container .row .col-sm .box:nth-child(2) .icon {
  box-shadow: 0 0 0 0 #1757af;
  background: #1757af;
}
.container .row .col-sm .box:nth-child(2):hover .icon {
  box-shadow: 0 0 0 400px #1757af;
}
.container .row .col-sm .box:nth-child(3) .icon {
  box-shadow: 0 0 0 0 #da251c;
  background: #da251c;
}
.container .row .col-sm .box:nth-child(3):hover .icon {
  box-shadow: 0 0 0 400px #da251c;
}

/* текст */
.container .row .col-sm .box .content {
  position: relative;
  z-index: 1;
  transition: 0.5s;
}
.container .row .col-sm .box:hover .content {
  color: #fff;
}
.container .row .col-sm .box .content h3 {
  font-size: 20px;
  margin: 0 10px;
  padding: 0;
}
.container .row .col-sm .box .content p {
  margin: 0;
  padding: 0;
}
a {
  display: inline-block;
  padding: 10px 20px;
  /* background: #fff; */
  border-radius: 4px;
  text-decoration: none;
  color: #000;
  font-weight: 500;
  margin-top: 20px;
  /* box-shadow: 0 2px 5px rgba(0,0,0,.2); */
}

.row .footer {
  position: relative;
  top: 0px;
  bottom: 0;
  width: 100%;
  padding: 0px 0px 20px 0px;
  margin-top: 0;

  color: #000;
  margin-left: 12px;
}
.col-sm-3 {
  /* position:relative; */
}
/* .col-sm{
    border-style: solid;
    border-width: 1px;
} */