.subpage.services-page .values-live .content-box-wrap .img-box-2 img,
main .expertise .shape-2 img,
main .keep-update .shape-wrap .shape,
main .services .triangle img {
    width: 100%;
    animation: 5s ease-in-out infinite float
}

.subpage.cases-page .customers .arrow-down,
.subpage.client-page .customers .arrow-down,
main .expertise .arrow-down {
    display: flex;
    margin: 20px auto;
    max-height: 60px;
    justify-content: center
}

main .expertise .shape-1 img {
    width: 100%;
    animation: 4s ease-in-out infinite float
}

main .expertise {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    background: #fff
}

main .expertise .webotix-round {
    width: 80px;
    display: flex;
    margin: 0 auto;
    padding: 30px 0;
    justify-content: center
}

main .expertise .shape-1 {
    position: absolute;
    z-index: -1;
    left: -100px;
    top: 700px;
    max-width: 100px
}

main .expertise .shape-2 {
    position: absolute;
    z-index: -1;
    right: -100px;
    top: -500px;
    max-width: 80px
}

.menu-item {
    transition: .3s;
    cursor: pointer
}

@media (max-width:991px) {
  main .expertise .webotix-round {
          padding: 0 0 20px !important
      }
}

.menu-item,
.timeline-years {
    justify-content: space-between
}

.tech-wrapper {
    display: flex;
    width: 100%;
    min-height: 500px;
    padding: 20px;
    border-radius: 20px
}

.tech-menu {
    width: 28%;
    padding: 40px 25px;
    background: #f2f0ff;
    color: #5336ff;
    font-size: 20px;
    border-radius: 20px 0 0 20px
}

.menu-item {
    padding: 18px 20px;
    border-radius: 12px;
    margin-bottom: 12px;
    display: flex;
    align-items: center
}

.content-block,
.menu-item span {
    opacity: 0;
    transition: opacity .3s
}

.menu-item.active {
    background: #5b4ac0;
    color: #fff
}

.tech-content {
    width: 72%;
    padding: 40px;
    background: #fff;
    border-radius: 0 20px 20px 0;
    border: 2px solid #f2f0ff
}

.content-block {
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 25px
}

.content-block.active {
    display: grid;
    opacity: 1
}

.tech-card {
    background: #ffff;
    padding: 25px 15px;
    border-radius: 15px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    border: 2px solid #f2f0ff;
    transition: transform .25s
}

.tech-card img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin-bottom: 10px
}

.tech-card:hover {
    transform: translateY(-5px)
}

@media (max-width:1200px) {
  .tech-wrapper {
          flex-direction: column;
          padding: 0;
          background: 0 0
      }
}

@media (max-width:1200px) {
  .tech-menu {
          width: 100%;
          display: flex;
          overflow-x: auto;
          white-space: nowrap;
          padding: 15px 10px;
          background: #f2f0ff;
          border-radius: 20px 20px 0 0;
          gap: 10px
      }
}

@media (max-width:1200px) {
  .menu-item {
          flex: 0 0 auto;
          margin-bottom: 0;
          padding: 12px 20px;
          font-size: 16px;
          border-radius: 10px;
          background: 0 0;
          border: 1px solid rgba(255, 255, 255, .2)
      }
}

@media (max-width:1200px) {
  .menu-item.active {
          background: #3a22a0;
          border-color: transparent
      }
}

@media (max-width:1200px) {
  .menu-item span {
          display: none
      }
}

@media (max-width:1200px) {
  .tech-content {
          width: 100%;
          border-radius: 0 0 20px 20px;
          box-shadow: none;
          padding: 25px 15px;
          background: #fff
      }
}

@media (max-width:1200px) {
  .tech-card {
          padding: 20px 10px;
          font-size: 16px
      }
}

@media (max-width:1200px) {
  .tech-card img {
          width: 45px;
          height: 45px
      }
}

@media (max-width:1200px) {
  .content-block .col-6 {
          margin-bottom: 15px
      }
}