/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/
    :root {
      --block-height: 3rem;
      --en-arrow-width: 4.6%;
    }
:root {
    --marker-red: #BC2C2C;
    --marker-blue: #1263C2;
    --marker-yellow: #F0D339;
    --link_color: #008ACE;
}
/* unbounded-regular - cyrillic_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  src: url('/wp-content/uploads/unbounded-v11-cyrillic_latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* unbounded-500 - cyrillic_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  src: url('/wp-content/uploads/unbounded-v11-cyrillic_latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* unbounded-600 - cyrillic_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  src: url('/wp-content/uploads/unbounded-v11-cyrillic_latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* unbounded-700 - cyrillic_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  src: url('/wp-content/uploads/unbounded-v11-cyrillic_latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* unbounded-800 - cyrillic_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  src: url('/wp-content/uploads/unbounded-v11-cyrillic_latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
    .diagram {
      position: relative;
      width: 100%;
      max-width: 1380px;
      padding-top: 22%;
      background: #000;
      margin: 0 auto;
      font-family: Helvetica, sans-serif;
    }

    .block {
      position: absolute;
      top: calc(50% - var(--block-height));
      width: 8%;
      height: var(--block-height);
      background: #fff;
      border-radius: 7.5px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #000;
      font-size: clamp(0.875rem, 0.4733rem + 0.6276vw, 1.25rem);
      text-align: center;
      padding-left: 14px;
      padding-right: 14px;
      z-index: 2;
    }

    .block.launch {
      background: #1263c2;
      color: #fff;
    }

    .block.support {
      background: #e5e1cd;
    }

    .block.development {
      width: 10.3%;
      left: 47%;
    }


    .block.request {
      left: 0%;
      width: 7.4%;
    }

    .block.analysis {
      left: 12%;
      width: 7.5%;
    }

    .block.planning {
      left: 23.9%;
      width: 7.5%;
    }

    .block.design {
      left: 35.9%;
      width: 6.5%;
    }

    .block.testing {
      left: 61.8%;
      width: 15.6%;
      height: 100px;
      top: calc(50% - 73px);
      clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
      background: #f0d339;
      font-size: clamp(0.875rem, 0.4733rem + 0.6276vw, 1.25rem);
      z-index: 20;
    }

    .block.launch {
      left: 81.9%;
      width: 6.7%;
    }

    .block.support {
      left: 93%;
      width: 7%;
    }


    .connector {
      position: absolute;
      top: calc(50% - 24.1px);
      height: 2px;
      background: #fff;
    }

    .connector.req-anal {
      left: 7.4%;
      width: var(--en-arrow-width);
    }

    .connector.anal-plan {
      left: 19.3%;
      width: var(--en-arrow-width);
    }

    .connector.plan-design {
      left: 31.2%;
      width: var(--en-arrow-width);
    }

    .connector.design-develop {
      left: 42.4%;
      width: var(--en-arrow-width);
    }

    .connector.dev-test {
      left: 57.3%;
      width: var(--en-arrow-width);
    }

    .connector.test-launch {
      left: 77.3%;
      width: var(--en-arrow-width);
    }

    .connector.launch-support {
      left: 88.3%;
      width: var(--en-arrow-width);
    }

    /* Стрелочный наконечник */
    .connector::before,
    .connector::after {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      width: 10px;
      height: 2px;
      background: #fff;
      transform-origin: right center;
    }

    .connector::before {
      transform: translateY(-50%) rotate(45deg);
    }

    .connector::after {
      transform: translateY(-50%) rotate(-45deg);
    }

    .connector {
      /* вместо instant появления — сразу встанет в 0 ширины */
      transform: scaleX(0);
      transform-origin: left center;
      /* чтобы анимация сработала автоматически */
      animation: drawArrow 0.6s ease-out forwards;
    }

    /* Можно добавить небольшую задержку для каждой стрелки */
    .connector.req-anal {
      animation-delay: 0.2s;
    }

    .connector.anal-plan {
      animation-delay: 0.4s;
    }

    .connector.plan-design {
      animation-delay: 0.6s;
    }

    .connector.design-develop {
      animation-delay: 0.8s;
    }

    .connector.dev-test {
      animation-delay: 1.0s;
    }

    .connector.test-launch {
      animation-delay: 1.2s;
    }

    .connector.launch-support {
      animation-delay: 1.4s;
    }



    .from-sup-to-req,
    .from-test-to-design,
    .from-test-to-develop {
      position: absolute;
      top: calc(50% + 2px);
      border: 2px solid #fff;
      border-top: unset;
      width: 94%;
      height: 130px;
      left: 50%;
      transform: translateX(-50%);
      border-bottom-left-radius: 24px;
      border-bottom-right-radius: 24px;

      &:after {
        content: '';
        position: absolute;
        left: -3px;
        top: 7px;
        width: 10px;
        height: 2px;
        background: #fff;
        transform-origin: right center;
        transform: translateY(-50%) rotate(50deg);
        z-index: 4;
      }

      &:before {
        content: '';
        position: absolute;
        left: -9px;
        top: -1px;
        width: 10px;
        height: 2px;
        background: #fff;
        transform: translateY(-50%) rotate(-50deg);
        transform-origin: right center;
        z-index: 4;
        transition: opacity ease .1s;
      }
    }

    .from-test-to-design {
      width: 30.7%;
      height: 92px;
      left: 54.4%;
    }

    .from-test-to-develop {
      width: 17.8%;
      height: 64px;
      left: 60.8%;
    }

    .curved-arrow-wrapper {
      position: absolute;
      background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);
      background-position: 0% 0%;
      background-size: 201% 100%;
      background-repeat: no-repeat;
      border: unset;

      animation: fill-arrow forwards 1.5s;
      animation-delay: 2.5s;
    }

    .arrow-bg {
      background-color: #000;
      position: absolute;
      top: 0;
      left: 2px;
      width: calc(100% - 4px);
      height: calc(100% - 2px);
      border-bottom-left-radius: 22px;
      border-bottom-right-radius: 22px;
    }

    .arrow-to-top {
      position: absolute;
      left: 0px;
      top: 0;
      width: 2px;
      background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);
      height: calc(100% - 25px);
      background-size: 100% 201%;
      background-position: 0% 0%;
      z-index: 2;

      animation: fill-arrow-to-top forwards .2s;
      animation-delay: 3.8s;
    }

    .from-sup-to-req {
      &:before {
        opacity: 0;
        animation: from-sup-to-req-arrow-anim forwards .1s;
        animation-delay: 3.8s;
      }

      &:after {
        opacity: 0;
        animation: from-sup-to-req-arrow-anim forwards .1s;
        animation-delay: 3.8s;
      }
    }

    /* from test to design */
    .from-test-to-design {
      &:before {
        opacity: 0;
        animation: from-test-to-design-arrow-anim forwards .1s;
        animation-delay: 2.7s;
      }

      &:after {
        opacity: 0;
        animation: from-test-to-design-arrow-anim forwards .1s;
        animation-delay: 2.7s;
      }
    }

    .from-test-to-design.curved-arrow-wrapper {
      position: absolute;
      background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);
      background-position: 0% 0%;
      background-size: 201% 100%;
      background-repeat: no-repeat;
      border: unset;

      animation: fill-arrow-from-test-to-design forwards 1.5s;
      animation-delay: 1.3s;
      z-index: 3;
    }

    .from-test-to-design .arrow-to-top {
      position: absolute;
      left: 0px;
      top: 0;
      width: 2px;
      background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);
      height: calc(100% - 25px);
      background-size: 100% 201%;
      background-position: 0% 0%;
      z-index: 2;

      animation: fill-arrow-to-top-from-test-to-design forwards .2s;
      animation-delay: 2.6s;
    }

    /* from-test-to-develop */
    .from-test-to-develop {
      &:before {
        opacity: 0;
        animation: from-test-to-develop-arrow-anim forwards .1s;
        animation-delay: 2.7s;
      }

      &:after {
        opacity: 0;
        animation: from-test-to-develop-arrow-anim forwards .1s;
        animation-delay: 2.7s;
      }
    }

    .from-test-to-develop.curved-arrow-wrapper {
      position: absolute;
      background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);
      background-position: 0% 0%;
      background-size: 201% 100%;
      background-repeat: no-repeat;
      border: unset;

      animation: fill-arrow-from-test-to-develop forwards 1.5s;
      animation-delay: 1.3s;
      z-index: 3;
    }

    .from-test-to-develop .arrow-to-top {
      position: absolute;
      left: 0px;
      top: 0;
      width: 2px;
      background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);
      height: calc(100% - 25px);
      background-size: 100% 201%;
      background-position: 0% 0%;
      z-index: 2;

      animation: fill-arrow-to-top-from-test-to-develop forwards .2s;
      animation-delay: 2.6s;
    }


    .ua-diagram .block.request {
      width: 6%;
    }



    .ua-diagram .block.analysis {
      left: 10.7%;
      width:6.4%;
    }

    .ua-diagram .block.support {
      left: 91%;
		width:8.9%;
    }

    .ua-diagram .block.planning {
     left: 21.7%;
    	width: 10.1%;
    }

    .ua-diagram .block.design {
		left: 36.4%;
		width: 6.9%;
    }

    .ua-diagram .block.development {
    	width: 8.9%;
    	left: 47.9%;
    }

    .ua-diagram .block.testing {
      left: 61.5%;
      width: 14.1%;
    }

    .ua-diagram .block.launch {
      left: 80.2%;
      width: 6.5%;
    }

    .ua-diagram .connector.anal-plan {
      left: 17.1%;
    }

    .ua-diagram .connector.req-anal {
      left: 6.1%;
    }

    .ua-diagram .connector.dev-test {
     	left: 56.9%;
    }

    .ua-diagram .connector.test-launch {
      left: 75.6%;
    }

    .ua-diagram .connector.launch-support {
      left: 86.4%;
    }

    .ua-diagram .from-test-to-develop {
		width: 16.7%;
		left: 60.3%;
    }

    .ua-diagram .from-test-to-design {
      width: 28.3%;
      left: 54.5%;
    }

    .ua-diagram .from-sup-to-req {
      width: 93%;
      left: 49.2%;
    }
	.ua-diagram .connector.plan-design {
		left: 31.8%;
	}
	.ua-diagram .connector.design-develop {
		left: 43.3%;
		width: var(--en-arrow-width);
	}
    @keyframes fill-arrow-to-top-from-test-to-develop {
      0% {
        background-position: 0% 0%;
      }

      100% {
        background-position: 0% 100%;
      }
    }

    @keyframes drawArrow {
      to {
        transform: scaleX(1);
      }
    }

    @keyframes fill-arrow {
      0% {
        background-position: 0% 0;
      }

      100% {
        background-position: 100% 0%;
      }
    }

    @keyframes fill-arrow-to-top {
      0% {
        background-position: 0% 0%;
      }

      100% {
        background-position: 0% 100%;
      }
    }

    @keyframes from-sup-to-req-arrow-anim {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    @keyframes from-test-to-design-arrow-anim {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    @keyframes fill-arrow-from-test-to-design {
      0% {
        background-position: 0% 0;
      }

      100% {
        background-position: 100% 0%;
      }
    }

    @keyframes fill-arrow-to-top-from-test-to-design {
      0% {
        background-position: 0% 0%;
      }

      100% {
        background-position: 0% 100%;
      }
    }

    @keyframes fill-arrow-from-test-to-develop {
      0% {
        background-position: 0% 0;
      }

      100% {
        background-position: 100% 0%;
      }
    }

    @keyframes from-test-to-develop-arrow-anim {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }
.connector,
.curved-arrow-wrapper,
.arrow-to-top,
.curved-arrow-wrapper:after,
.curved-arrow-wrapper:before{
  /* здесь перечислены все элементы, которые анимируются */
  animation-play-state: paused !important;
}
.diagram.animate .connector,
.diagram.animate .curved-arrow-wrapper,
.diagram.animate .arrow-to-top,
.diagram.animate  .curved-arrow-wrapper:after,
.diagram.animate .curved-arrow-wrapper:before{
  animation-play-state: running !important;
}

.cases-grid-wrapper {
    padding: 0;
}

.cases-grid-wrapper ul li {
    list-style: none;
}

.cases-grid-wrapper ul li:hover {
    animation: shake 0.5s ease-in-out infinite;
    transition: all ease .2s;
}

.cases-grid-wrapper .cases-grid-list {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, 1fr);
    padding: 0;
}

.cases-grid-item a {
    text-decoration: none;
}

.cases-grid-item img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 0.313rem;
    transition: opacity ease .3s;
    width: 100%;
}

.cases-grid-item:hover img {
    opacity: 0.9;
}

.cases-grid-info {
    text-align: center;
    padding: 1.5rem 0.625rem;
}

.cases-grid-item .cases-grid-item--title {
    font-size: clamp(2rem, 1.8832rem + 0.4984vw, 2.5rem) !important;
    text-decoration: none;
    line-height: 1;
    letter-spacing: -0.09rem;
    font-weight: 700;
    color: #000;
    width: 100%;
    margin: 0 0 0.25rem 0;
}

.cases-grid-item .cases-grid-item--desc {
    font-size: 1.25rem;
    font-family: "Inter", sans-serif !important;
    color: #000;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: -0.019rem;
    margin: 0;
}
--------------------------------------------------