/* common styles */

:root {
  --index: calc(1vw + 1vh);
  --CardsBorderColor: #000aff;
  --CardsBorderOpacity: 0.8;
  --CardsOpacity: 1;
  --CardsBorderRadius: 10px;
}

ul {
  list-style: none;
}
.decorated ul li {
  position: relative;
  padding-left: 30px;
}
.decorated ul li:before {
  content: url(/wp-content/uploads/2024/03/deco-arrow.svg);
  position: absolute;
  top: 0;
  left: 0;
}
.paddings {
  padding-left: 40px;
  padding-right: 40px;
}

.home-callback {
  margin-top: 50px;
  padding-top: 100px !important;
  padding-bottom: 80px;
}
.home-callback .connect-title__overlay {
  display: block;
  clip-path: inset(0% 0% 100% 0%);
}
/* common styles */

.main__section {
  display: grid;
  grid-template-columns: 308px 1fr;
  padding-top: 5.2vw;
  overflow: hidden;
  margin-top: 0 !important;
}
.services-menu a {
  color: #fff;
  opacity: 0.5;
  padding: 0;
  box-shadow: 0 0 0 transparent !important;
  margin: 0;
  position: relative;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: -1px;
  display: inline-block;
  transition: all 0.3s;
}
.services-menu .sub-menu a {
  text-transform: none;
}
.services-menu a:hover {
  opacity: 1;
}
.services-menu a:after {
  content: "";
  width: 0;
  height: 1px;
  background-color: #fff;
  display: block;
  transition: all 0.3s;
  position: absolute;
  left: 0;
  bottom: -5px;
}
.services-menu a:hover:after {
  width: 100%;
}

/* .services-menu .current_page_item a */
.services-menu > .current_page_item > a,
.services-menu .sub-menu > .current-menu-item > a {
  opacity: 1;
}

.services-menu > .current_page_item > a:before,
.services-menu .sub-menu > .current-menu-item > a:before {
  content: "";
  display: block;
  width: 19px;
  height: 19px;
  background-image: url(/wp-content/uploads/2024/02/menu_arrow.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  position: absolute;
  right: -50px;
  top: 0;
}

.main__content {
  position: relative;
  padding-left: 10.995%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 156px;
  padding-bottom: 33px;
  min-height: 550px;
}
.main__decor,
.main__decor--text {
  position: absolute;
  right: 5%;
  z-index: 1;
}
.main__decor {
  top: 15%;
}
.decor__mobile {
  display: none;
}

.main__decor--text {
  bottom: 5%;
  font-size: 13px;
  color: #fff;
}

.main__title {
  max-width: 950px;
  margin-top: -3.5%;
}
.main__title h1 {
  color: #fff;
  font-size: clamp(54px, 12vw, 135px);
  line-height: 0.89;
  font-weight: 900;
  text-transform: uppercase;

  overflow-wrap: anywhere;
}
.main__text {
  font-size: 18px;
  font-weight: bold;
  line-height: 20px;
  color: #fff;
  max-width: 591px;
}
.main__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin-right: -40px;
  clip-path: inset(0% 0% 0% 100%);
}
.main__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.services-menu {
  list-style: none;
  padding-left: 0;
}
.services-menu li {
  margin-bottom: 34px;
  line-height: 1;
}
.services-menu .sub-menu {
  text-transform: none;
  list-style: none;
  padding-left: 27px;
  margin-top: 27px;
  margin-bottom: 37px;
}
.services-menu .sub-menu li {
  margin-bottom: 17.5px;
}

.introduce__wrapper {
  position: relative;
  margin-top: 8%;
  padding-bottom: 140px;
}
.video__bg {
  position: absolute;
  z-index: -1;
  inset: 0;
}
.video__bg video {
  width: 100%;
}
.introduce__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 auto;
  max-width: 1100px;
  margin: 0 auto;
  margin-left: 26vw;
}
.introduce__left {
  margin-top: 282px;
}
.introduce__right {
  grid-column-start: 2;
  padding-left: 64px;
}

.introduce__title {
  color: #fff;
  font-size: 30px;
  line-height: 1.2;
  font-weight: bold;
  margin-bottom: 40px;
  letter-spacing: -1px;
}
.introduce__right .introduce__title {
  margin-bottom: 40px;
}
.introduce__list {
  color: #fff;
  font-size: 16px;
  margin-bottom: 15.5px;
}
.introduce__list ul {
  padding-left: 0;
}

.introduce__list li {
  padding-left: 30px;
  line-height: 25px;
  padding-bottom: 10px;
}

.introduce__right .introduce__list li {
  line-height: 25px;
  margin-bottom: 23.5px;
}

.stages__wrap {
  margin-top: 15.3%;
}
.stages__main-title {
}
.stages {
  /* display: grid;
  grid-template-columns: repeat(5, 1fr); */
  display: flex;
  /* gap: 26px; */
  margin-top: 107px;
  /* padding-right: 23px; */
}
.stages__item {
  /* background: rgba(255, 255, 255, 0.5); */
  display: flex;
  color: #fff;
  padding: 2px;
  position: relative;
  /* flex-basis: 356px; */
  width: 20%;
  overflow: hidden;
  flex: 1;
  transition: flex 0.7s;
  height: 400px;
  border-left: 1px solid #000aff;
}

.stages__content {
  padding-left: 30px;
  position: relative;
  z-index: 5;
  background-color: #000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  width: 100%;
}

.stages__text--wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
}
.stages:hover > .stages__item::after {
  opacity: 1;
}

.stages__item:hover::before {
  opacity: 1;
}

/* .stages__item::before,
.stages__item::after {
  border-radius: inherit;
  content: "";
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  transition: opacity 500ms;
  width: 100%;
}

.stages__item::before {
  background: radial-gradient(
    600px circle at var(--mouse-x) var(--mouse-y),
    var(--CardsBorderColor),
    transparent 40%
  );
  z-index: 3;
}

.stages__item::after {
  background: radial-gradient(
    400px circle at var(--mouse-x) var(--mouse-y),
    var(--CardsBorderColor),
    transparent 40%
  );
  z-index: 1;
} */
.content {
  position: relative;
  z-index: 5;
  background-color: bisque;
  padding: 15px;
}

.stages__icon {
  /* text-align: center; */
  font-size: 50px;
  font-weight: 800;
  -webkit-text-stroke: 1px #858e8e;
  display: inline;
  color: transparent;
}
.stages__icon img {
  height: 100%;
}
.stages__decor {
  position: absolute;
  top: -170px;
  opacity: 0;
  transition: all 0.7s;
}

.stages__title {
  font-size: 24px;
  line-height: 1.2;
  font-weight: bold;
  /* padding-top: 18%;
  padding-bottom: 3%; */
  flex-basis: 220px;
  flex-shrink: 0;
}
.stages__text {
  font-size: 15px;
  font-weight: 200;
  line-height: 29px;
  visibility: hidden;
  opacity: 1;
  position: absolute;
  bottom: 0;
  width: 311px;
  left: 18vw;
  transition: all 0.5s;
  /* color: #858e8e; */
}
.stages:hover .stages__item {
  flex: 0.5;
}

.stages:hover .stages__item:hover {
  flex: 1.5;
}
.stages__item:hover .stages__decor {
  opacity: 1;
  top: -70px;
}
.stages__item:hover .stages__text {
  visibility: visible;
  opacity: 1;
}

.expertise {
  /* display: grid;
  grid-template-columns: 60% 40%; */
  margin-top: 15.3%;
}
.expertise__left h2 {
  line-height: 0.84;
}
.expertise__title {
}
.expertise__left {
  font-size: clamp(46px, 7vw, 135px);
}
.expertise__right {
  max-width: 700px;
  margin-left: 55%;
  margin-top: 40px;
}
.expertise__description {
  font-size: 30px;
  line-height: 30px;
  font-weight: bold;
  color: #fff;
  max-width: 630px;
}
.expertise__list ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  grid-gap: 10px;
  font-size: 16px;
  color: #fff;
  font-weight: 200;
  margin-top: 55px;
  padding-left: 0;
}
.expertise__list ul li {
  margin-bottom: 4.5px;
}
.reviews__wrapper > div {
  padding-bottom: 30px;
}
.projects-row__wrapper {
  margin-top: 70px;
}
.projects__wrapper > div {
  padding-top: 9%;
  padding-bottom: 100px;
}
@media screen and (max-width: 1590px) {
  .stages:hover .stages__item:hover {
    flex: 1.7;
  }
  /* .stages__text {
    left: auto;
    right: 20px;
  } */
  .stages__title {
    font-size: 21px;
    flex-basis: 160px;
  }
}
@media screen and (max-width: 1441px) {
  .main__section {
    /* padding-top: 34px; */
    grid-template-columns: 314px 1fr;
  }
  .main__content {
    padding-left: 7%;
    gap: 81px;
    padding-bottom: 48px;
  }
  .main__title {
    max-width: 682px;
  }
  .introduce__content {
    /* margin-left: calc(var(--index) * 18.5); */
    grid-template-columns: 508px 478px;
  }
  .introduce__right {
    padding-left: 0;
  }
  .stages {
    margin-top: 87px;
    padding-right: 0;
  }
  .stages__content {
    padding-left: 25px;
  }
  /* .stages__title {
    padding-top: 22%;
    padding-bottom: 7%;
  } */
  .stages__icon {
    max-height: 70px;
  }
  .stages__text {
    font-size: 14px;
    font-weight: 200;
    line-height: 22px;
  }

  .expertise {
    margin-top: 111px;
  }
  .expertise__list ul {
    margin-top: 35px;
  }
  .clients__wrapper {
    margin-top: 28px;
  }
}

@media screen and (max-width: 1356px) {
  .paddings {
    padding-left: 25px;
    padding-right: 25px;
  }
  .expertise {
    display: grid;
    grid-template-columns: 55% 45%;
  }
  .stages__container {
    overflow: auto;
  }
  .stages {
    min-width: 1360px;
  }
  .stages__wrap {
    padding-right: 0;
  }

  .stages__text {
    width: 250px;
  }
  .introduce__content {
    margin-inline: auto;
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 1230px) {
  .sidebar {
    display: none;
  }
  .main__section {
    grid-template-columns: 1fr;
    padding-top: 95px;
  }
  .main__content {
    gap: 15vw;
  }
  .expertise {
    display: grid;
    grid-template-columns: 1fr;
  }
  .expertise__right {
    max-width: 70%;
    margin-left: auto;
    margin-top: 80px;
  }
}
@media screen and (max-width: 1050px) {
  .common__title h2,
  .expertise__left {
    font-size: clamp(46px, 12vw, 135px);
  }
  .main__title {
    max-width: 50%;
  }
  .main__section {
    padding-top: 195px;
  }
  .introduce__content {
    padding: 0 20px;
  }
  .expertise__right {
    max-width: 74%;
  }
  .main__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .expertise__list ul {
    margin-top: 55px;
  }
  .home-callback {
    margin-top: 50px;
    padding-top: 50px !important;
  }
  .stages__text--wrap {
    flex-direction: column;
    align-items: flex-start;
  }
  .stages__text {
    position: static;
    opacity: 1;
    visibility: visible;
    width: auto;
  }
  .stages__content {
    padding-right: 25px;
  }
  .stages:hover .stages__item {
    flex: 1;
  }
  .stages:hover .stages__item:hover {
    flex: 1;
  }
  .stages__title {
    flex-basis: auto;
  }
  .stages__text--wrap {
    flex-basis: 50%;
    justify-content: space-between;
  }
  .introduce__wrapper {
    padding-bottom: 60px;
  }
}
@media screen and (max-width: 800px) {
  .expertise__right {
    max-width: 100%;
    margin-left: 0;
    margin-top: 80px;
  }
  .introduce__content {
    grid-template-columns: 1fr;
  }
  .introduce__left {
    margin-top: 0;
  }
  .introduce__right {
    grid-column-start: 1;
    margin-top: 60px;
  }
  .introduce__right .introduce__title {
    margin-bottom: 30px;
  }
  .map__title {
    padding-left: 10px;
  }
  .home-callback {
    margin-top: 0px;
    padding-top: 0px !important;
  }
}

@media screen and (max-width: 676px) {
  .paddings {
    padding-left: 12px;
    padding-right: 12px;
  }
  .main__title {
    max-width: 97%;
    margin-top: -3px;
  }
  .main__content {
    padding-top: 35px;
    padding-left: 0;
  }
  .main__section {
    padding-top: 0;
    margin-top: 0;
  }
  .main__text {
    font-size: 15px;
  }
  .main__bg {
    margin-left: -25px;
    top: 60px;
  }
  .main__bg img {
    object-position: 75%;
  }
  .main__bg:after {
    content: "";
    display: block;
    inset: 0;
    position: absolute;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.1);
    top: 0;
  }
  .expertise__description {
    font-size: 24px;
    line-height: 1;
  }
  .expertise__right {
    margin-top: 30px;
  }
  .map__wrapp svg,
  .map__wrapp img {
    width: 130%;
  }
  .map__decor {
    right: 10px;
  }
  .home-callback {
    margin-top: 0px;
    padding-top: 0 !important;
  }
}
@media screen and (max-width: 533px) {
  .expertise__list ul {
    grid-template-columns: repeat(2, minmax(110px, 1fr));
  }
  .introduce__title br {
    display: none;
  }
  .decor__mobile {
    display: block;
    position: static;
    margin-top: 20px;
    margin-left: 10px;
  }
  .decor__desktop {
    display: none;
  }
  .introduce__wrapper {
    margin-top: 16%;
  }
  .introduce__list {
    margin-bottom: 0;
  }
  .introduce__right {
    margin-top: 16%;
  }
  .stages__wrap {
    margin-top: 16%;
  }
  .stages {
    margin-top: 8%;
  }
  .expertise {
    margin-top: 24%;
  }
  .projects__wrapper > div {
    padding-top: 24%;
  }
  .projects-row__wrapper {
    margin-top: 16%;
  }
  .projects__wrapper > div {
    padding-bottom: 0;
  }
  .reviews__title {
    padding-top: 24% !important;
  }
  .new_clients__wrapper {
    padding: 36px 0 !important;
    margin-top: 0px;
  }
  .connect__wrapper {
    margin-top: 24%;
  }
  .home-callback {
    padding-bottom: 20px;
  }
  .video__bg {
    overflow: hidden;
  }
  .video__bg video {
    width: 300%;
  }
}

/* heading semantics: visually identical to the former h2 */
.common__title .h2-like{margin:0;padding:0;font-weight:900;letter-spacing:-1px;line-height:1;text-transform:uppercase;color:rgb(227,229,229)}
@media screen and (max-width:1050px){.common__title .h2-like{font-size:clamp(46px,12vw,135px)}}

/* H1 of service pages: --lw = longest word length (set in services.php), so long words never break mid-word (29.10) */
.main__section .main__title h1{font-size:clamp(28px,min(6.8vw,calc(900px / var(--lw,8))),98px)}
@media screen and (max-width:1050px){.main__section .main__title h1{font-size:clamp(28px,min(6.8vw,calc(56vw / var(--lw,8))),98px)}}
@media screen and (max-width:676px){.main__section .main__title h1{font-size:clamp(26px,calc(115vw / var(--lw,8)),46px)}}

/* long-word H1 (КОРПОРАТИВНИЙ, ПРОСУВАННЯ): widen the title column on desktop instead of shrinking the font */
@media screen and (min-width:1231px){.main__section .main__title--wide{max-width:min(900px,calc(100vw - 520px))}.main__section .main__title--wide h1{font-size:clamp(28px,min(6.8vw,calc(min(900px,100vw - 520px) / (0.76 * var(--lw,8)))),98px)}}

/* pricing group titles on mobile/tablet: shrink only when the longest word would break (ОПТИМІЗАЦІЯ, ВЕБАНАЛІТИКА) (29.10) */
@media screen and (max-width:767px){.pricing-title__wrapper h2[style*="--lw"]{font-size:min(13vw,calc(118vw / var(--lw,9)))}}
@media screen and (min-width:768px) and (max-width:1023px){.pricing-title__wrapper h2[style*="--lw"]{font-size:min(12vw,calc(118vw / var(--lw,9)))}}

/* stages + connect titles on mobile: shrink only when a word of 10+ letters would break (29.10) */
@media screen and (max-width:767px){.stages__main-title h2[style*="--lw"],.connect__wrapper>h2[style*="--lw"]{font-size:calc(118vw / var(--lw))}}
/* 31.10: desktop request form (#form-3, blue circle) opens fixed in the centre of the screen, not next to the clicked button; global - services.css is enqueued on every page */
@media (min-width:918px){#form-3.form-connect{position:fixed!important;inset:0!important;margin:auto!important;z-index:10000!important}}
/* 31.10: request form (#form-3, blue circle) more opaque everywhere: was 0.4, now 0.8 */
#form-3.form-connect{background:rgba(0,10,255,.8)!important}