.page-joomla .intro .img-wrap{
  background: url(/images/img-joom/dev-joom1.jpg) no-repeat center top / cover;
  border-radius: var(--border-radius-20);
  padding-bottom: 51.5%;
}
.page-joomla .serv-list li{
  width: calc(50% - 30px);
  border: var(--border-03);
  border-right: none;
  position: relative;
  padding: 80px 0 80px 60px;
}
.page-joomla .serv-list li:before{
  counter-increment: list;
  content: counter(list);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 40px;
  box-sizing: border-box;
  border-radius: 50px;
  border: var(--border-15);
  font-family: var(--cousine);
  font-size: 16px;
  line-height: 1;
  color: var(--text);
  position: absolute;
  top: 80px;
  left: 60px;
}
.page-joomla .serv-list .ico{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(255, 255, 255, .03);
  background-size: contain;
  margin: 0 0 20px auto;
}
.page-joomla .serv-list .text{
  max-width: 395px;
  font-size: 18px;
}
.page-joomla .serv-list strong{
  color: #fff;
}
.page-joomla .benefits-list{
  max-width: 1720px;
  margin-left: auto;
  margin-right: auto;
}
.page-joomla .benefits-list li{
  width: calc(33.3% - 8px);
  border-radius: var(--border-radius);
  border: var(--border-05);
  padding: 30px 40px;
  margin: 0 4px 8px;
}
.page-joomla .benefits-list li:before{
  margin-bottom: 30px;
}
.page-joomla .inplement .text-box{
  width: 42%;
}
.page-joomla .inplement .text-box .text{
  max-width: 650px;
}
.page-joomla .inplement .img-box{
  width: calc(50% - 4px);
}
.page-joomla .inplement .img-box img{
  border-radius: var(--border-radius);
}
.page-joomla .tasks{
  background: url(/images/services/style/indent-bg.jpg) no-repeat right top / 20%;
  border-bottom: var(--border-05);
}
.page-joomla .tasks .item{
  width: 45.5%;
}
.page-joomla .cta1{
  max-width: 1920px;  
  background: url(/images/img-joom/cta-bg.png) no-repeat right 37% / cover;
  margin-left: auto;
  margin-right: auto;
}
.page-joomla .cta1 .text-box{
  width: calc(40%);
}
.page-joomla .faqPage .accordion {
  margin-top: 30px;
}


@media screen and (max-width: 1408px){
  .page-joomla .inplement .text-box{width: calc(50% - 16px);}
  .page-joomla .benefits-list{margin-left: -4px; margin-right: -4px}
  .page-joomla .benefits-list li{padding: 30px 15px}
}
@media screen and (max-width: 1024px){
  .page-joomla .inplement .text-box{width: 100%; margin-bottom: 40px}
  .page-joomla .inplement .ttl.lg{margin-bottom: 30px}
  .page-joomla .inplement .img-box{width: 100%}
  .page-joomla .benefits-list li{width: calc(50% - 8px);}
  .joomla-cta {
    grid-template-columns: 1fr;
    padding: 60px 40px;
  }

  .joomla-cta__logo {
    margin-top: 40px;
  }

  .joomla-cta__logo::before {
    width: 200px;
    height: 200px;
  }
}
@media screen and (max-width: 768px){
  .page-joomla .serv-list{margin-top: 40px}
  .page-joomla .serv-list li{border: none; background: unset; padding: 0; margin-bottom: 60px}
  .page-joomla .serv-list li:before{top: 0; left: 0}
  .page-joomla .benefits-list li{width: calc(100% - 8px);}
  .page-joomla .tasks .item{width: 100%; margin-bottom: 40px}
  .page-joomla .tasks .item:last-child{margin-bottom: 0}
  .page-joomla .cta1 {padding: 40px 0 50%}
  .page-joomla .cta1 .text-box {width: 100%}
}
@media screen and (max-width: 480px){
  .page-joomla .serv-list li{width: 100%}
}