.connect-works-container {
  width: 960px;
  margin: auto;
  position: absolute;
  left: calc(50% - 480px);
  top: 42px;
}

.connect-works-circle-desc {
  color: #ffffff;
  width: 250px;
  position: absolute;
}
.connect-dev-title {
  padding-bottom: 100px;
}

.connect-works-box .connect-works-circle {
  background-image: url('../img/how/item_list_triangle_1.png'),
    url('../img/zitko_symbol.png');
  background-repeat: no-repeat;
  width: 470px;
  height: 470px;
  margin: 0 auto;
  position: relative;
  background-position: center;
  background-size: 100%, 130px;
}

.connect-works-inner-circle {
  position: absolute;
  width: 102px;
  height: 102px;
  cursor: pointer;
}

.circle1:hover {
  background: url('../img/how/1_ic_developers_blue.svg'),
    url('../img/how/item_circle_hover.png');
  background-size: 60%, 100%;
  background-repeat: no-repeat;
  background-position-x: 50%;
  background-position-y: 50%;
}

.circle2:hover {
  background: url('../img/how/1_ic_developers_blue.svg'),
    url('../img/how/item_circle_hover.png');
  background-size: 60%, 100%;
  background-repeat: no-repeat;
  background-position-x: 50%;
  background-position-y: 50%;
}

.circle3:hover {
  background: url('../img/how/2_ic_insurers_blue.svg'),
    url('../img/how/item_circle_hover.png');
  background-size: 60%, 100%;
  background-repeat: no-repeat;
  background-position-x: 50%;
  background-position-y: 50%;
}

.circle4:hover {
  background: url('../img//how/5_ic_inspectors_blue.svg'),
    url('../img/how/item_circle_hover.png');
  background-size: 60%, 100%;
  background-repeat: no-repeat;
  background-position-x: 50%;
  background-position-y: 50%;
}

.circle5:hover {
  background: url('../img/how/4_ic_users_blue.svg'),
    url('../img/how/item_circle_hover.png');
  background-size: 60%, 100%;
  background-repeat: no-repeat;
  background-position-x: 50%;
  background-position-y: 50%;
}

.circle6:hover {
  background: url('../img//how/3_ic_db_blue.svg'),
    url('../img/how/item_circle_hover.png');
  background-size: 60%, 100%;
  background-repeat: no-repeat;
  background-position-x: 50%;
  background-position-y: 50%;
}

/* Using */
.circle2 {
  left: 184px;
  top: -20px;
  background: url('../img/how/1_ic_developers_white.svg'),
    url('../img/how/item_circle.png');
  background-size: 60%, 100%;
  background-repeat: no-repeat;
  background-position-x: 50%;
  background-position-y: 50%;
}

/* Using */
.circle4 {
  left: -16px;
  bottom: 40px;
  background: url('../img/how/5_ic_inspectors_white.svg'),
    url('../img/how/item_circle.png');
  background-size: 60%, 100%;
  background-repeat: no-repeat;
  background-position-x: 50%;
  background-position-y: 50%;
}

/* Using */
.circle6 {
  left: 385px;
  bottom: 40px;
  background: url('../img/how/3_ic_db_white.svg'),
    url('../img/how/item_circle.png');
  background-size: 60%, 100%;
  background-repeat: no-repeat;
  background-position-x: 50%;
  background-position-y: 50%;
}

.inner-text {
  position: absolute;
  font-size: 1.2em;
  top: -40px;
  line-height: 1em;
  font-weight: 500;
  color: #ffffff;
  text-transform: uppercase;
  width: 100%;
  text-align: center;
}

.p-top {
  left: 184px;
  top: -20px;
}

.p-left {
  left: 385px;
  bottom: 40px;
}

.p-right {
  left: -16px;
  bottom: 40px;
}

.p-top-in,
.p-left-pa,
.p-right-us {
  left: 1.5rem;
}

.icon-circle1 {
  background: url('../img/how/2_ic_insurers_white.svg'),
    url('../img/how/item_circle.png') !important;
  background-size: 60%, 100% !important;
  background-repeat: no-repeat !important;
  background-position-x: 50% !important;
  background-position-y: 50% !important;
}

.icon-circle2 {
  background: url('../img/how/5_ic_inspectors_white.svg'),
    url('../img/how/item_circle.png') !important;
  background-size: 60%, 100% !important;
  background-repeat: no-repeat !important;
  background-position-x: 50% !important;
  background-position-y: 50% !important;
}

.icon-circle3 {
  background: url('../img/how/4_ic_users_white.svg'),
    url('../img/how/item_circle.png') !important;
  background-size: 60%, 100% !important;
  background-repeat: no-repeat !important;
  background-position-x: 50% !important;
  background-position-y: 50% !important;
}

.icon-circle1:hover {
  background: url('../img/how/2_ic_insurers_blue.svg'),
    url('../img/how/item_circle_hover.png') !important;
  background-size: 60%, 100% !important;
  background-repeat: no-repeat !important;
  background-position-x: 50% !important;
  background-position-y: 50% !important;
}

.icon-circle2:hover {
  background: url('../img/how/5_ic_inspectors_blue.svg'),
    url('../img/how/item_circle_hover.png') !important;
  background-size: 60%, 100% !important;
  background-repeat: no-repeat !important;
  background-position-x: 50% !important;
  background-position-y: 50% !important;
}

.icon-circle3:hover {
  background: url('../img/how/4_ic_users_blue.svg'),
    url('../img/how/item_circle_hover.png') !important;
  background-size: 60%, 100% !important;
  background-repeat: no-repeat !important;
  background-position-x: 50% !important;
  background-position-y: 50% !important;
}

.connect-works-container .inner-text {
  display: none;
}

@media (max-width: 959px) {
  .connect-works-container {
    width: 540px;
    left: 0;
    display: block;
    position: relative;
  }

  .connect-works {
    margin: 0;
  }

  .connect-works-inner-circle-1,
  .connect-works-inner-circle-2,
  .connect-works-inner-circle-3 {
    width: 102px;
    height: 102px;
    position: absolute;
  }

  .connect-works-container .inner-text {
    display: block;
  }

  .connect-works-circle-desc {
    opacity: 1 !important;
    display: block !important;
    position: relative;
    right: auto !important;
    top: 1px !important;
    text-align: left !important;
    left: 153px !important;
    width: calc(100% - 173px);
    height: 266px;
  }

  .works-circle-desc-long {
    display: block !important;
    position: relative;
    right: auto !important;
    top: 1px !important;
    text-align: left !important;
    left: 153px !important;
    width: calc(100% - 173px);
    height: 176px;
  }
}

@media (max-width: 768px) {
  .connect-works-inner-circle-1,
  .connect-works-inner-circle-2,
  .connect-works-inner-circle-3 {
    left: 1.5rem;
  }
}

@media (max-width: 576px) {
  .connect-works-inner-circle {
    width: 60px;
    height: 60px;
  }

  .connect-works-container {
    width: 360px;
    z-index: 2;
    position: relative;
    left: unset;
    top: -60px;
    height: 100px;
  }
  .connect-dev-title {
    padding-bottom: 0;
  }
  .connect-works-box .connect-works-circle {
    background-image: url('../img/how/item_list_triangle_1.png'),
      url('../img/zitko_symbol.png');
    background-repeat: no-repeat;
    width: 470px;
    height: 470px;
    margin: 0 auto;
    position: relative;
    background-position: center;
    background-size: 100%, 100px;
  }

  .connect-works-circle .inner-text {
    font-size: 0.8rem;
  }

  .connect-works-box .connect-works-circle {
    background-size: 100%, 100px;
    width: 320px;
    max-width: 470px;
  }

  .text2 {
    top: -30px !important;
  }

  .text4 {
    top: 70px !important;
  }

  .text6 {
    top: 70px !important;
  }

  .p-top {
    left: 130px;
    top: 80px;
  }

  .p-left {
    left: 247px;
    bottom: 114px;
  }

  .p-right {
    left: 14px;
    bottom: 114px;
  }
}

@media (max-width: 360px) {
  .connect-works-container {
    width: 100%;
  }
}

@media (max-width: 320px) {
  .connect-works-circle-desc,
  .connect-works-circle-desc.long {
    left: 156px !important;
    width: calc(100% - 176px);
  }
}

@media (max-width: 375px) {
  .connect-works-circle-desc {
    left: 153px !important;
    width: calc(100% - 172px);
  }
}

@media (max-width: 320px) {
}

.text1 {
  top: -25px;
}

.text2 {
  top: -40px;
}

.text3 {
  top: -30px;
}

.text4 {
  top: 125px;
}

.text5 {
  top: 125px;
}

.text6 {
  top: 125px;
}

.text2-2,
.text6-6,
.text4-4 {
  position: relative;
  top: 120px;
  font-size: 1rem;
}