/* CATALOG */
.catalog__content {
  display: flex;
  padding: 120px 120px 35px 120px;
  justify-content: space-between;
  gap: 45px;
}

.catalog__section {
  display: flex;
  flex-direction: column;
}

.catalog__text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.catalog__section--left {
  justify-content: start;
  flex: 1.5;
  --delay: 0s;
}

.catalog__section--right {
  justify-content: end;
  flex: 1.5;
  --delay: 0.8s;
}

.catalog__section--center {
  flex: 4;
  --delay: 0.4s;
}

.catalog__image {
  border-radius: 8px;
  animation-name: rise;
  opacity: 0;
  animation-duration: 1.8s;
  animation-delay: var(--delay);
  animation-fill-mode: forwards;
  position: relative;
  margin-left: 15px;
}

.catalog__heading {
  font-size: 44px;
  font-weight: 350;
}

.catalog__heading--blue {
  color: var(--color-blue);
  font-style: normal;
  line-height: 115%;
  opacity: 0;
  animation-name: rise;
  animation-duration: 1.8s;
  animation-delay: var(--delay);
  animation-fill-mode: forwards;
  position: relative;
}

.catalog__heading--red {
  color: var(--color-red);
  font-style: normal;
  line-height: 115%;
  opacity: 0;
  animation-name: rise;
  animation-duration: 1.8s;
  animation-delay: var(--delay);
  animation-fill-mode: forwards;
  position: relative;
}

.catalog__paragraph {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-text);
}
.catalog__paragraph--blue {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;

  background-image: linear-gradient(
    to right,
    #18202f 0%,
    #18202f 50%,
    #1213af 74%,
    #255ef0 81%,
    #1cb9ff 87%,
    white 100%
  );
  background-position-x: 300%;
  background-repeat: no-repeat;
  background-size: 200% 300px;
  background-color: #fff;
  color: transparent;
  background-clip: text;
  opacity: 0;

  animation-fill-mode: forwards;
  animation-name: text-burn;
  animation-delay: calc(var(--delay) + 0.3s);
  animation-duration: 4s;
}
.catalog__paragraph--red {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;

  background-image: linear-gradient(
    to right,
    #18202f 0%,
    #18202f 50%,
    #ff007f 74%,
    #f15a23 81%,
    #fea800 87%,
    white 100%
  );
  background-position-x: 300%;
  background-repeat: no-repeat;
  background-size: 200% 300px;
  background-color: #fff;
  color: transparent;
  background-clip: text;
  opacity: 0;

  animation-fill-mode: forwards;
  animation-name: text-burn;
  animation-delay: calc(var(--delay) + 0.3s);
  animation-duration: 4s;
}

.catalog__button--red {
  width: 100%;
  height: 38px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  align-self: stretch;
  padding: 12px 24px;
  border: none;
  border-radius: 30px;
  font-weight: 700;
  font-size: 12px;
  text-wrap-mode: nowrap;

  background-image: linear-gradient(
    to right,
    #ffa700 0%,
    #ff027e 50%,
    #ff4fa5 62%,
    #ffb5e3 82%,
    white 100%
  );
  background-position-x: 200%;
  background-repeat: no-repeat;
  background-size: 200% 100px;
  background-color: #fff;
  animation-fill-mode: forwards;
  animation-name: cta-burn;
  animation-delay: calc(var(--delay) + 0.3s);
  animation-duration: 2.5s;
  color: rgba(24, 32, 47, 0);
}
.catalog__button--blue {
  width: 100%;
  height: 38px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  align-self: stretch;
  padding: 12px 24px;
  border: none;
  border-radius: 30px;
  font-weight: 700;
  font-size: 12px;
  color: var(--color-midnight);
  background-image: linear-gradient(
    to right,
    #17bbeb 0%,
    #3070e7 50%,
    #4b7cff 62%,
    #b5cfff 82%,
    white 100%
  );
  background-position-x: 200%;
  background-repeat: no-repeat;
  background-size: 200% 100px;
  background-color: #fff;
  animation-fill-mode: forwards;
  animation-name: cta-burn;
  animation-delay: calc(var(--delay) + 0.3s);
  animation-duration: 2.5s;
  color: rgba(24, 32, 47, 0);
}

.catalog__button-icon {
  margin-top: 3px;
  opacity: 0;
  animation-fill-mode: forwards;
  animation-name: cta-arrow-burn;
  animation-delay: calc(var(--delay) + 0.3s);
  animation-duration: 2.5s;
}

.catalog__button-span {
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 115%;
}

.catalog__button--blue:hover {
  cursor: pointer;
  background: #00a5e2 !important;
}

.catalog__button--red:hover {
  cursor: pointer;
  background: #fea800 !important;
}