:root {
  --no-bg: #0294D8;
}
h1, h2, h3, h4 {
  margin: 0;
}
ul li {
  background-image: none;
}
.portfol-wrapper .igrotrade p {
  margin: 0;
}
.btn {
  background: transparent;
  border: none;
  cursor: pointer;
}

/* section head */
.title-h2 {
  font-size: 48px;
  line-height: 50px;
  font-weight: 700;
}
.title-h3 {
  font-size: 36px;
  line-height: 42px;
  font-weight: 700;
}
.portfol-wrapper .igrotrade .title-desc {
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  margin: 0;
}

.scroll {
  overflow-y: auto !important;
  scrollbar-width: none;
}
.scroll::-webkit-scrollbar {
  display: none;
  width: 0;
}


/* page */
.igrotrade {
  font-family: "PT Sans", Arial, Helvetica, sans-serif;
}
.igrotrade .portfol {
  position: relative;
}
/* hero */
.hero {
  position: relative;
  padding-top: 40px;
  padding-bottom: 105px;
  background: linear-gradient(279.48deg, #D1FBE1 17.36%, #B4E2FF 70.82%);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: url(/image/new/site/igrotrade-redesign/zubs-white.svg);
}
.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: url(/image/new/site/igrotrade-redesign/zubs-0294D8.svg);
}
.hero__list {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}
.hero__item-item {
  width: 180px;
  text-align: center;
  color: #0395D9;
}
.hero__item-item-text {
  color: #313131;
}
.hero__center {
  display: flex;
  justify-content: center;
}
.hero__center-tablet {
  width: 1160px;
  height: 678px;
  border-radius: 32px;
  background: var(--no-bg);
  overflow: hidden;
  outline: 2px solid #FFFFFF99;
  outline-offset: -2px;
  box-shadow: 0px 107.3px 40.21px -79.27px #0A214B66,
              0px 0px 193.33px 0px #1E97C333;
}
.hero__center-tablet-media {
  position: relative;
  width: 100%;
  height: 100%;
}
.hero__center-tablet-media-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}
.hero__center-tablet-media-banner {
  position: absolute;
  top: 158px;
  left: 50px;
  right: 50px;
  height: 292px;
  z-index: 3;
}
.hero__center-tablet-media-banner-screen {
  width: 100%;
  height: 292px;
  border-radius: 14px;
  overflow: hidden;
  background: #FFFFFF;
}
.hero__center-tablet-media-banner-screen-list {
  display: flex;
}
.hero__center-tablet-media-banner-screen-list img {
  flex-shrink: 0;
  width: 100%;
  height: 292px;
  object-fit: cover;
  background-color: rgba(255, 0, 0, 0.1);
}
.hero__center-tablet-media-banner-arrow {
  position: absolute;
  top: 117px;
  width: 50px;
  height: 50px;
  background: url(/image/new/site/igrotrade-redesign/banner-arrow.svg) no-repeat;
  background-size: contain;
}
.banner-left {
  left: -24px;
}
.banner-right {
  right: -24px;
  transform: scale(-1, 1);
}


.hero__bg-1 {
  position: absolute;
  top: 274px;
  left: -142px;
}
.hero__bg-2 {
  position: absolute;
  top: 590px;
  left: -200px;
}
.hero__bg-3 {
  position: absolute;
  top: 330px;
  right: -146px;
}
.hero__bg-4 {
  position: absolute;
  top: 602px;
  right: -182px;
}

/* project */
.project {
  overflow: hidden;
}
.project__section-head {
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: #0294D8;
  background: linear-gradient(187.3deg, #0294D8 0%, #0294D8 723px, #ECF5FF 725px, #ECF5FF 100%);
}
.project__section-head-divider {
  display: flex;
}
.project__section-head-left {
  flex-shrink: 0;
  width: 500px;
  color: #FFFFFF;
}
.project__title-h2 {
  color: #FFFFFF;
  margin-bottom: 40px;
}
.project__section-text-1 {
  color: #FFFFFF;
  font-size: 20px;
  line-height: 30px;
  padding-bottom: 40px;
  border-bottom: 1px solid #FFFFFF;
}
.project__section-text-2 {
  color: #FFFFFF;
  font-size: 20px;
  line-height: 30px;
  padding-top: 52px;
}
.project__section-head-right {
  flex-grow: 2;
  position: relative;
}
.project__section-laptop {
  position: absolute;
  top: 0;
  left: 0;
  width: 707px;
  height: 438px;
  margin-top: 42px;
  background: url(/image/new/site/igrotrade-redesign/img_macbook-min.png) no-repeat;
  background-size: contain;
}
.project__section-laptop-screen  {
  position: absolute;
  top: 10px;
  left: 94px;
  right: 93px;
  height: 344px;
  border-radius: 16px 16px 0 0;
  background: gray;
}
.project__section-laptop-screen-content {
  display: flex;
} 
.project__section-laptop-screen-content img {
  width: 100%;
}
.project__section-laptop-scrollmsg {
  position: absolute;
  top: 19px;
  right: 43px;
  width: 20px;
  height: 317px;
  background: url(/image/new/site/igrotrade-redesign/swipe.png) no-repeat;
}
.project__section-head-timeline-title {
  color: #313131;
  margin-top: 238px;
  margin-bottom: 40px;
}
.project__section-head-timeline-graph {
  position: relative;
  width: 100%;
  height: 511px;
  background: url(/image/new/site/igrotrade-redesign/timeline-tablet.svg) no-repeat;
  object-fit: contain;
}
.project__section-head-timeline-graph-item {
  position: absolute;
  box-sizing: border-box;
}
.project__section-head-timeline-graph-item-ico {
  position: absolute;
  top: 0;
  left: 0;
  height: 56px;
  width: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  z-index: 3;
}
.project__section-head-timeline-graph-item-text {
  padding-left: 60px;
  padding-right: 22px;
  height: 56px;
  display: flex;
  align-items: center;
  border-radius: 56px;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  box-sizing: border-box;
  clip-path: inset(0 100% 0 0 round 28px);
  transition: clip-path 1s ease;
}

.project__section-head-timeline-graph-item.timeline-item-white .project__section-head-timeline-graph-item-ico {
  background: #FFFFFF;
}
.project__section-head-timeline-graph-item.timeline-item-white .project__section-head-timeline-graph-item-text {
  color: #0394D8;
  background: #FFFFFF;
}
.project__section-head-timeline-graph-item.timeline-item-green .project__section-head-timeline-graph-item-ico {
  background: #4ABE21;
}
.project__section-head-timeline-graph-item.timeline-item-green .project__section-head-timeline-graph-item-text {
  color: #FFFFFF;
  background: #4ABE21;
}
.project__section-head-timeline-graph-item.timeline-item-blue .project__section-head-timeline-graph-item-ico {
  background: #0394D8;
}
.project__section-head-timeline-graph-item.timeline-item-blue .project__section-head-timeline-graph-item-text {
  color: #FFFFFF;
  background: #0394D8;
}

.project__section-head-timeline-graph-item:nth-child(1) {
  top: 72px;
  left: 6px;
}
.project__section-head-timeline-graph-item:nth-child(2) {
  top: 143px;
  left: 161px;
}
.project__section-head-timeline-graph-item:nth-child(3) {
  top: 215px;
  left: 250px;
}
.project__section-head-timeline-graph-item:nth-child(4) {
  top: 287px;
  left: 370px;
}
.project__section-head-timeline-graph-item:nth-child(5) {
  top: 359px;
  left: 712px;
}
.project__section-head-timeline-graph-item:nth-child(6) {
  top: 431px;
  left: 911px;
}

.project__structure {
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: #FFFFFF;
}
.project__structure-title {
  margin-bottom: 40px;
  color: #313131;
}
.portfol-wrapper .igrotrade .project__structure-desc {
  margin-bottom: 60px;
  color: #313131;
}

.project__structure-graph {
  width: 100%;
  height: 1381px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.project__structure-graph-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.project__structure-graph-top-item {
  padding: 0 28px;
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #C2DFFF;
  border-radius: 56px;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
}

.project__structure-graph-pages {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.project__structure-graph-pages-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 56px;
  font-family: "Onest", Arial, Helvetica, sans-serif;
  color: #151616;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  background: #C2DFFF;
  border-radius: 40px;
}

.project__structure-graph-products {
  width: 100%;
  display: flex;
  justify-content: center;
}
.project__structure-graph-products-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 56px;
  font-family: "Onest", Arial, Helvetica, sans-serif;
  color: #151616;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  background: #C2DFFF;
  border-radius: 40px;
}

.project__structure-graph-catalog {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 228px 232px 232px 264px;
  gap: 32px 42px;
  padding-top: 52px;
}
.project__structure-graph-catalog-item {
  position: relative;
  grid-row: span 2;
  padding: 20px 40px 0;
  background: #ECF5FF;
  border-radius: 24px;
  z-index: 2;
}
.project__structure-graph-catalog-item.project-item-short {
  grid-row: span 1;
}
.project__structure-graph-catalog-item-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
}
.project__structure-graph-catalog-item-name {
  font-family: "Onest", Arial, Helvetica, sans-serif;
  color: #151616;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  margin-bottom: 8px;
}
.project__structure-graph-catalog-item-bullet {
  font-family: "Onest", Arial, Helvetica, sans-serif;
  color: #151616;
  font-weight: 300;
  font-size: 15px;
  line-height: 22px;
  margin-bottom: 8px;
}
.project__structure-graph-catalog-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  z-index: 1;
}
.project__structure-graph-catalog-bg img {
  width: 822px;
  height: 1000px;
}


.project__concept {
  padding: 80px 0;
  background: linear-gradient(279.48deg, #D1FBE1 17.36%, #B4E2FF 70.82%);
  overflow: hidden;
}
.project__concept-head-title {
  color: #313131;
  margin-bottom: 40px;
}
.portfol-wrapper .igrotrade .project__concept-head-desc {
  margin-bottom: 60px;
}

.project__concept-visual {
  width: 1920px;
  height: 914px;
  margin: 0 auto;
  overflow: hidden;
}
.project__concept-visual-slider {
  width: 100%;
  display: flex;
  cursor: pointer;
  transition: transform 1s ease;
}
.project__concept-visual-slider-wrapper {
  display: flex;
}
.project__concept-visual-slider-item {
  flex-shrink: 0;
  position: relative;
  width: 1058px;
  height: 914px;
  opacity: .6;
  transition: opacity 1s ease;
}
.project__concept-visual-slider-item.swiper-slide-active {
  opacity: 1;
}
.project__concept-visual-slider-item.--invisible {
  opacity: 0;
}
.project__concept-visual-slider-item img {
  position: absolute;
  top: 0;
  left: -54px;
  width: 1076px;
  height: 914px;
}

/* design */
.design {
  position: relative;
  overflow: hidden;
}
.design::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 0;
  width: 100%;
  height: 5px;
  background: url(/image/new/site/igrotrade-redesign/zubs-0294D8.svg);
}
.design__section-head {
  padding-top: 80px;
  padding-bottom: 350px;
  color: #FFFFFF;
  background: #0294D8 url(/image/new/site/igrotrade-redesign/design-bottom.webp) no-repeat;
  background-position: bottom center;
  overflow: hidden;
}
.design__title-h2 {
  color: #FFFFFF;
  margin-bottom: 40px;
}
.portfol-wrapper .igrotrade .design__section-text {
  color: #FFFFFF;
  margin-bottom: 60px;
}
.design__page-layout {
  display: flex;
  gap: 60px;
}
.design__page-layout-main {
  width: 800px;
  height: 2950px;
  position: relative;
  display: flex;
  z-index: 3;
}
.design__page-layout-main-image {
  max-width: auto;
  position: absolute;
  top: 0;
  right: -24px;
  left: -24px;
}
.design__page-layout-main-arrow {
  position: absolute;
  top: 2215px;
  right: -110px;
}
.design__page-layout-secondary {
  position: relative;
  width: 240px;
  z-index: 2;
}
.design__page-layout-secondary img {
  position: absolute;
  left: -24px;
}

.design__page-layout-secondary img:nth-child(1) {
  top: 44px;
}
.design__page-layout-secondary img:nth-child(2) {
  top: 632px;
}
.design__page-layout-secondary img:nth-child(3) {
  left: 34px;
  top: 1962px;
}

.design__page-layout-bg {
  position: absolute;
  top: 1838px;
  left: 643px;
  z-index: 1;
}

.design__uikit {
  padding-top: 60px;
  padding-bottom: 85px;
  background: #FFFFFF;
}
.design__uikit-title {
  color: #313131;
  margin-bottom: 40px;
}
.design__uikit-preview-colors {
  display: flex;
  justify-content: space-between;
  margin-bottom: 120px;
}
.design__uikit-slider-wrapper {
  position: relative;
  padding-top: 150px;
  max-width: 1920px;
  height: 620px;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  overflow: hidden;
}
.design__uikit-slider {
  position: relative;
  width: 1920px;
  height: 620px;
  background: url(/image/new/site/igrotrade-redesign/design-slider-ellipse.svg) no-repeat;
  mask-image: url(/image/new/site/igrotrade-redesign/design-slider-ellipse.svg);
  flex-shrink: 0;
  position: relative;
}
.design__uikit-slider-text {
  position: absolute;
  right: 50%;
  top: 130px;
  margin-right: 96px;
  width: 480px;
  z-index: 2;
}
.portfol-wrapper .igrotrade .design__uikit-slider-text p {
  color: #313131;
}
.design__uikit-slider-icons {
  position: absolute;
  top: 300px;
  left: 50%;
  width: 0;
  height: 0;
}
.design__uikit-slider-icons-item {
  position: absolute;
  top: -290px;
  width: 580px;
  height: 580px;
  transform: translate(640px, 0) scale(0);
  transition: transform 1s ease;
}


/* position */
.slider-position-item-main {
  transform: translate(-90px, 0) scale(1);
}

.slider-position-item-right-1 {
  transform: translate(440px, 0) scale(.47);
}
.slider-position-item-right-2 {
  transform: translate(720px, 0) scale(0);
}

.slider-position-item-left-1 {
  transform: translate(-575px, 0) scale(.44);
}
.slider-position-item-left-2 {
  transform: translate(-876px, 0) scale(.36);
}
.slider-position-item-left-3 {
  transform: translate(-1115px, 0) scale(.25);
}
.slider-position-item-left-4 {
  transform: translate(-1280px, 0) scale(0);
}
/**/

.design__innerpage {
  position: relative;
  display: flex;
  justify-content: center;
  background: #0294D8;
  height: 2225px;
  overflow: hidden;
}
.design__innerpage-bg {
  width: 1920px;
  height: 2225px;
  display: flex;
}
.design__innerpage-bg {
  position: relative;
  max-width: 1920px;
  width: 1920px;
  z-index: 1;
}
.design__innerpage-content {
  position: absolute;
  z-index: 3;
  top: 80px;
  left: 50%;
}
.design__innerpage-content-title {
  color: #FFFFFF;
  margin-bottom: 40px;
}
.portfol-wrapper .igrotrade .design__innerpage-content-desc {
  width: 536px;
  color: #FFFFFF;
}

.design__catalog {
  padding-top: 40px;
  padding-bottom: 80px;
  background: #ECF5FF;
}

.design__catalog-title {
  color: #313131;
  margin-bottom: 40px;
}

.portfol-wrapper .igrotrade .design__catalog-desc {
  margin-bottom: 60px;
}

.design__catalog-main-images {
  position: relative;
  width: 100%;
  height: 658px;
  padding-bottom: 72px;
}
.design__catalog-main-images-laptop {
  position: absolute;
  top: 0;
  left: -150px;
  width: 1289px;
  height: 664px;
  display: flex;
}
.design__catalog-main-images-phone {
  position: absolute;
  top: 230px;
  right: -244px;
  width: 700px;
  height: 517px;
  display: flex;
}
.design__catalog-cards {
  position: relative;
  margin-top: 200px;
  height: 994px;
}
.design__catalog-cards-text1 {
  position: absolute;
  top: -200px;
  left: 0;
  width: 438px;
  color: #313131;
}
.design__catalog-cards-list {
  position: absolute;
  top: -28px;
  right: 88px;
  width: 977px;
  height: 340px;
  display: flex;
  justify-content: space-between;
}
.design__catalog-cards-list-item {
  position: relative;
  display: flex;
  width: 226px;
  height: 320px;
  box-shadow: 0px 3.16px 15.82px 0px #0000001A;
}
.design__catalog-cards-list-item img:nth-child(1) {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.design__catalog-cards-list-item:nth-child(3) {
  transform: translateY(-60px);
}
.design__catalog-cards-list-item-label {
  position: absolute;
  top: 9px;
  left: 40px;
  transform: translate(0) scale(1);
  opacity: 1;
  transition: transform 1s ease, opacity 1s ease;
}
.design__catalog-cards-list-item-finger-1 {
  position: absolute;
  top: 24px;
  left: 24px;
  transform: translate(0) scale(1);
  opacity: 1;
  transition: transform 1s ease, opacity 1s ease;
}
.design__catalog-cards-list-item-quicklook {
  position: absolute;
  top: 98px;
  left: 48px;
  width: 126px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Onest", Arial, Helvetica, sans-serif;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 10px;
  line-height: 14px;
  background: #BC54D9E5;
  border-radius: 4px;
  transform: scale(1);
  opacity: 1;
  transition: opacity 1s ease, transform 1s ease;
}
.design__catalog-cards-list-item-finger-2 {
  position: absolute;
  top: 120px;
  left: 120px;
  transform: translate(0) scale(1);
  opacity: 1;
  transition: transform 1s ease, opacity 1s ease;
}

.design__catalog-cards-text2 {
  position: absolute;
  top: 392px;
  left: 0;
  width: 640px;
  color: #313131;
}
.design__catalog-cards-quick {
  position: absolute;
  top: 512px;
  left: 94px;
  outline: 5px solid #FFFFFF;
  outline-offset: -5px;
  border-radius: 24px;
  box-shadow: 0px 4px 28px 0px #0000001A;
}
.design__catalog-cards-robot {
  position: absolute;
  top: 660px;
  right: 32px;
}
.design__catalog-cards-arrow1 {
  position: absolute;
  top: -154px;
  left: 300px;
}
.design__catalog-cards-arrow2 {
  position: absolute;
  top: 77px;
  right: 74px;
}

.design__detail {
  padding-top: 80px;
  padding-bottom: 80px;
  background: linear-gradient(279.48deg, #D1FBE1 17.36%, #B4E2FF 70.82%);
  overflow: hidden;
}
.design__detail-title {
  color: #313131;
  margin-bottom: 40px;
}
.portfol-wrapper .igrotrade .design__detail-desc {
  margin-bottom: 128px;
}
.design__detail-graph {
  position: relative;
  width: 100%;
  height: 501px;

}
.design__detail-graph-list {
  width: 100%;
  height: 498px;
  display: flex;
  justify-content: space-between;
}
.design__detail-graph-list-item {
  position: relative;
  border-radius: 24px;
  box-shadow: 0px 4px 28px 0px #0000001A;
  z-index: 2;
}
.design__detail-graph-list-item:nth-child(2) {
  transform: translateY(-68px);
}
.design__detail-graph-left {
  position: absolute;
  top: 110px;
  left: -292px;
  z-index: 1;
}
.design__detail-graph-right {
  position: absolute;
  top: 16px;
  right: -366px;
  z-index: 3;
}
.design__detail-graph-bg-1 {
  position: absolute;
  top: -32px;
  left: -200px;
}
.design__detail-graph-bg-2 {
  position: absolute;
  top: -144px;
  right: -210px;
}
.design__detail-graph-bg-3 {
  position: absolute;
  top: 325px;
  right: -200px;
}

/* realize */
.realize {
  position: relative;
  background: #F4F4F4;
  overflow: hidden;
}
.realize::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 0;
  width: 100%;
  height: 5px;
  background: url(/image/new/site/igrotrade-redesign/zubs-0294D8.svg);
}

.realize__section-head {
  padding-top: 80px;
  background: #0294D8;
}

.realize__title-h2 {
  color: #FFFFFF;
  margin-bottom: 40px;
}

.realize__section-head-divider {
  display: flex;
  gap: 80px;
  padding-bottom: 80px;
}

.realize__section-head-divider-left {
  width: 822px;
}
.realize__section-head-divider-right {
  flex-shrink: 0;
  position: relative;
  width: 275px;
}
.realize__section-head-divider-right img{
  position: absolute;
  top: -20px;
  width: 275px;
  height: 258px;
}

.realize__section-head-title {
  color: #FFFFFF;
  margin-bottom: 40px;
}

.portfol-wrapper .igrotrade .realize__section-head-desc {
  color: #FFFFFF;
  padding-bottom: 40px;
}

.realize__basket {
  padding-bottom: 54px;
}
.realize__basket-background {
  background-color: #0294D8;
  background: linear-gradient(352.8deg,
              #ECF5FF 0%, 
              #ECF5FF 244px, 
              #0294D8 246px, 
              #0294D8 100%);
}
.realize__basket-head-title {
  color: #FFFFFF;
  margin-bottom: 40px;
}
.portfol-wrapper .igrotrade .realize__basket-head-desc {
  color: #FFFFFF;
  margin-bottom: 60px;
}
.realize__basket-graph {
  position: relative;
  width: 100%;
  height: 1290px;
}
.realize__basket-screen-1 {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 24px;
  outline: 5px solid #FFFFFF;
  outline-offset: -5px;
  box-shadow: 0px 4px 28px 0px #0000001A;
}
.realize__basket-screen-2 {
  position: absolute;
  top: 232px;
  right: 0;
  border-radius: 24px;
  outline: 5px solid #FFFFFF;
  outline-offset: -5px;
  box-shadow: 0px 4px 28px 0px #0000001A;
}
.realize__basket-screen-3 {
  position: absolute;
  top: 740px;
  right: 0;
  border-radius: 24px;
  outline: 5px solid #FFFFFF;
  outline-offset: -5px;
  box-shadow: 0px 4px 28px 0px #0000001A;
}
.realize__basket-phone {
  position: absolute;
  top: 690px;
  left: -256px;
}
.realize__basket-line-1 {
  position: absolute;
  top: 100px;
  right: 274px;
}
.realize__basket-text-1 {
  position: absolute;
  top: 124px;
  right: 0;
  width: 252px;
  color: #FFFFFF;
}
.realize__basket-line-2 {
  position: absolute;
  top: 615px;
  left: 265px;
}
.realize__basket-text-2 {
  position: absolute;
  top: 570px;
  left: 0;
  width: 260px;
  color: #FFFFFF;
}

.realize__favourites-background {
  background: #ECF5FF;
  background-image: url(/image/new/site/igrotrade-redesign/realize-children_bottom.webp);
  background-repeat: no-repeat;
  background-position: center bottom -6px;
  background-size: 1920px 638px;
}
.realize__favourites {
  padding-top: 56px;
  padding-bottom: 280px;
}
.realize__favourites-title {
  color: #313131;
  margin-bottom: 18px;
}
.portfol-wrapper .igrotrade .realize__favourites-desc {
  margin-bottom: 60px;
}
.realize__favourites-graph {
  position: relative;
  height: 1012px;
}
.realize__favourites-graph-screen-1 {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 24px;
  outline: 5px solid #FFFFFF;
  outline-offset: -5px;
  box-shadow: 0px 4px 28px 0px #0000001A;
}
.realize__favourites-graph-screen-2 {
  position: absolute;
  top: 520px;
  right: 0;
  border-radius: 24px;
  outline: 5px solid #FFFFFF;
  outline-offset: -5px;
  box-shadow: 0px 4px 28px 0px #0000001A;
}
.realize__favourites-graph-line-1 {
  position: absolute;
  top: 52px;
  left: 668px;
}
.realize__favourites-graph-text-1 {
  position: absolute;
  top: 42px;
  left: 830px;
  width: 210px;
  color: #313131;
}
.realize__favourites-graph-line-2 {
  position: absolute;
  top: 124px;
  left: 712px;
}
.realize__favourites-graph-text-2 {
  position: absolute;
  top: 114px;
  left: 830px;
  width: 310px;
  color: #313131;
}
.realize__favourites-graph-line-3 {
  position: absolute;
  top: 356px;
  left: 688px;
}
.realize__favourites-graph-text-3 {
  position: absolute;
  top: 284px;
  left: 830px;
  width: 330px;
  color: #313131;
}

.realize__interface-background {
  background: #0294D8;
}
.realize__interface {
  padding-top: 55px;
  padding-bottom: 80px;
}
.realize__interface-title {
  color: #FFFFFF;
  margin-bottom: 40px;
}
.realize__interface-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
}
.realize__interface-list-item {
  position: relative;
  padding-left: 32px;
  color: #FFFFFF;
}
.realize__interface-list-item::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 14px;
  width: 5px;
  height: 5px;
  background: #FFFFFF;
  border-radius: 50%;
}
.realize__interface-graph {
  position: relative;
  width: 1113px;
  height: 642px;
  padding-left: 26px;
  display: flex;
  justify-content: center;
}
.realize__interface-laptop {
  flex-shrink: 0;
  width: 1113px;
  height: 642px;
  background: url(/image/new/site/igrotrade-redesign/mockup-laptop-min.png) no-repeat;
}
.realize__interface-laptop-screen {
  position: absolute;
  top: 6px;
  right: 100px;
  left: 125px;
  height: 572px;
  background: gray;
  border-radius: 7px 7px 0 0;
  overflow: hidden;
}
.realize__interface-laptop-screen-content-upper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
.realize__interface-laptop-screen-content {
  position: relative;
  display: flex;
  z-index: 1;
}
.realize__interface-laptop-screen-content img {
  width: 100%;
}
.realize__interface-phone {
  position: absolute;
  top: 256px;
  right: -64px;
  z-index: 4;
  pointer-events: none;
}

.portfol-wrapper .igrotrade  .ingrotrade-nav {
  height: 24px;
  padding-bottom: 80px;
}

/* fx */
.portfol-wrapper .pl-content {
  display: flex;
  justify-content: space-between;
  margin-top: 23px;
}
.portfol-wrapper .coll-3 {
  margin-left: 0;
}
.to-op {
  opacity: 0;
  transition: 1s ease .2s
}
.to-op.--start-anim {
  opacity: 1
}
.to-up {
  opacity: 0;
  transform: translateY(50%);
  transition: ease 1s
}
.to-up.--start-anim {
  opacity: 1;
  transform: translateY(0)
}
.to-down {
  opacity: 0;
  transform: translateY(-20%);
  transition: ease 1.4s
}
.to-down.--start-anim {
  opacity: 1;
  transform: translateY(0)
}
.to-left {
  opacity: 0;
  transform: translateX(50%);
  transition: ease 1s
}
.to-left.--start-anim {
  opacity: 1;
  transform: translateX(0)
}
.to-right {
  opacity: 0;
  transform: translateX(-50%);
  transition: ease 1s
}
.to-right.--start-anim {
  opacity: 1;
  transform: translateX(0)
}
.delay-02s {
  transition-delay: .2s;
}
.delay-04s {
  transition-delay: .4s;
}
.delay-06s {
  transition-delay: .6s;
}
.delay-08s {
  transition-delay: .8s;
}
.delay-1s {
  transition-delay: 1s;
}
.delay-1_2s {
  transition-delay: 1.2s;
}
.delay-1_4s {
  transition-delay: 1.4s;
}
.delay-1_6s {
  transition-delay: 1.6s;
}
.delay-1_8s {
  transition-delay: 1.8s;
}
.delay-2s {
  transition-delay: 2s;
}
.delay-2_2s {
  transition-delay: 2.2s;
}
.delay-4s {
  transition-delay: 4s;
}
.delay-4_4s {
  transition-delay: 4s;
}

/* anims */
.hero__center-tablet-media-banner-screen-list {
  animation: heroSlider 20s ease infinite;
}
@keyframes heroSlider {
  0% { transform: translateX(0); }
  18% { transform: translateX(-100%); }
  33% { transform: translateX(-100%); }
  51% { transform: translateX(-200%); }
  66% { transform: translateX(-200%); }
  85% { transform: translateX(-300%); }
  100% { transform: translateX(-300%); }
}

.realize__interface-laptop.--start-anim .realize__interface-laptop-screen-content {
  animation: interfaceScrollContent 14s linear infinite alternate;
}
@keyframes interfaceScrollContent {
  0% { transform: translateY(0); }
  5% { transform: translateY(0); }
  95% { transform: translateY(-934px); }
  100% { transform: translateY(-934px); }
}
.realize__interface-laptop.--start-anim .realize__interface-laptop-screen-content-upper {
  animation: interfaceUpperScroll 14s ease infinite alternate;
}
@keyframes interfaceUpperScroll {
  0% { transform: translateY(-100%); }
  25% { transform: translateY(-100%); }
  30% { transform: translateY(0); }
  100% { transform: translateY(0); }
}

.project__section-head-timeline-graph.--start-anim .project__section-head-timeline-graph-item-text {
  clip-path: inset(0 0 0 0 round 28px);
}

.project__section-head-timeline-graph-item:nth-child(1) .project__section-head-timeline-graph-item-text {
  transition-delay: 1s;
}
.project__section-head-timeline-graph-item:nth-child(2) .project__section-head-timeline-graph-item-text {
  transition-delay: 1.25s;
}
.project__section-head-timeline-graph-item:nth-child(3) .project__section-head-timeline-graph-item-text {
  transition-delay: 1.5s;
}
.project__section-head-timeline-graph-item:nth-child(4) .project__section-head-timeline-graph-item-text {
  transition-delay: 1.75s;
}
.project__section-head-timeline-graph-item:nth-child(5) .project__section-head-timeline-graph-item-text {
  transition-delay: 2s;
}
.project__section-head-timeline-graph-item:nth-child(6) .project__section-head-timeline-graph-item-text {
  transition-delay: 2.25s;
}


.project__structure-graph .project__structure-graph-pages-item {
  opacity: 0;
  transform: translateY(24px);
  transition: transform 1s ease, opacity 1s ease;
}
.project__structure-graph .project__structure-graph-pages-item:nth-child(1) {
  transition-delay: .25s;
}
.project__structure-graph .project__structure-graph-pages-item:nth-child(2) {
  transition-delay: .5s;
}
.project__structure-graph .project__structure-graph-pages-item:nth-child(3) {
  transition-delay: .75s;
}
.project__structure-graph .project__structure-graph-pages-item:nth-child(4) {
  transition-delay: 1s;
}
.project__structure-graph .project__structure-graph-pages-item:nth-child(5) {
  transition-delay: 1.25s;
}
.project__structure-graph .project__structure-graph-pages-item:nth-child(6) {
  transition-delay: 1.5s;
}
.project__structure-graph .project__structure-graph-line-1 {
  clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0);
  transition: clip-path .5s ease;
  transition-delay: 2.5s;
}
.project__structure-graph .project__structure-graph-logo {
  transform: scale(0);
  transition: transform 1s cubic-bezier(0.25, 0.1, 0.35, 1.3);
  transition-delay: 3s;
}
.project__structure-graph .project__structure-graph-line-2 {
  clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0);
  transition: clip-path .5s ease;
  transition-delay: 4s;
}
.project__structure-graph .project__structure-graph-products-item {
  opacity: 0;
  transition: transform 1s ease, opacity 1s ease;
  transition-delay: 4.25s;
}
.project__structure-graph .project__structure-graph-catalog-bg {
  clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0);
  transition: clip-path 2s ease;
  transition-delay: 5.25s;
}
.project__structure-graph .project__structure-graph-catalog-item {
  opacity: 0;
  transform: translateY(24px);
  transition: transform 1s ease, opacity 1s ease;
}
.project__structure-graph .project__structure-graph-catalog-item:nth-child(1) {
  transition-delay: 6s;
}
.project__structure-graph .project__structure-graph-catalog-item:nth-child(2) {
  transition-delay: 6.25s;
}
.project__structure-graph .project__structure-graph-catalog-item:nth-child(3) {
  transition-delay: 6.5s;
}
.project__structure-graph .project__structure-graph-catalog-item:nth-child(4) {
  transition-delay: 6.75s;
}
.project__structure-graph .project__structure-graph-catalog-item:nth-child(5) {
  transition-delay: 7s;
}
.project__structure-graph .project__structure-graph-catalog-item:nth-child(6) {
  transition-delay: 7.5s;
}
.project__structure-graph .project__structure-graph-catalog-item:nth-child(7) {
  transition-delay: 7.75s;
}
.project__structure-graph .project__structure-graph-catalog-item:nth-child(8) {
  transition-delay: 7.25s;
}

.project__structure-graph.--start-anim .project__structure-graph-pages-item {
  opacity: 1;
  transform: translateY(0);
}
.project__structure-graph.--start-anim .project__structure-graph-line-1 {
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
}
.project__structure-graph.--start-anim .project__structure-graph-logo {
  transform: scale(1);
}
.project__structure-graph.--start-anim .project__structure-graph-line-2 {
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
}
.project__structure-graph.--start-anim .project__structure-graph-products-item {
  opacity: 1;
  transform: translateY(0);
}
.project__structure-graph.--start-anim .project__structure-graph-catalog-bg {
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
}
.project__structure-graph.--start-anim .project__structure-graph-catalog-item {
  opacity: 1;
  transform: translateY(0);
}


.design__uikit-preview .design__uikit-preview-colors-item {
  transform: scale(0);
  transition: transform 1s cubic-bezier(0.25, 0.1, 0.35, 1.3);
}
.design__uikit-preview .design__uikit-preview-colors-item:nth-child(1) {
  transition-delay: .25s;
}
.design__uikit-preview .design__uikit-preview-colors-item:nth-child(2) {
  transition-delay: .5s;
}
.design__uikit-preview .design__uikit-preview-colors-item:nth-child(3) {
  transition-delay: .75s;
}
.design__uikit-preview .design__uikit-preview-colors-item:nth-child(4) {
  transition-delay: 1s;
}
.design__uikit-preview .design__uikit-preview-colors-item:nth-child(5) {
  transition-delay: 1.25s;
}
.design__uikit-preview .design__uikit-preview-colors-item:nth-child(6) {
  transition-delay: 1.5s;
}
.design__uikit-preview.--start-anim .design__uikit-preview-colors-item {
  transform: scale(1);
}

.design__uikit-preview .design__uikit-preview-font {
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay: 2.5s;
}
.design__uikit-preview.--start-anim .design__uikit-preview-font {
  opacity: 1;
}



.design__catalog-cards .design__catalog-cards-list-item-label {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 1s ease, transform 1s ease;
  transition-delay: 1.15s;
}
.design__catalog-cards .design__catalog-cards-list-item-finger-1 {
  opacity: 0;
  transform: translate(-120px, 86px);
  transition: opacity .5s ease, transform 1s ease;
  transition-delay: .25s;
}

.design__catalog-cards .design__catalog-cards-list-item:nth-child(3) {
  transform: translateY(0);
  transition: transform 1s ease;
  transition-delay: 1.5s;
}
.design__catalog-cards .design__catalog-cards-text1 {
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay: 3s;
}
.design__catalog-cards .design__catalog-cards-arrow1 {
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay: 2.25s;
}
.design__catalog-cards .design__catalog-cards-list-item-finger-2 {
  opacity: 0;
  transform: translate(-180px, -80px);
  transition: opacity .5s ease, transform 1s ease;
  transition-delay: 5s;
}
.design__catalog-cards .design__catalog-cards-list-item-quicklook {
  opacity: 0;
  transition: opacity .5s ease;
  transition-delay: 5.75s;
}
.design__catalog-cards .design__catalog-cards-arrow2 {
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay: 6.5s;
}
.design__catalog-cards .design__catalog-cards-text2 {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 1s ease, transform 1s ease;
  transition-delay: 7.25s;
}
.design__catalog-cards .design__catalog-cards-quick {
  opacity: 0;
  transform: translateY(56px);
  transition: opacity 1s ease, transform 1s ease;
  transition-delay: 8s;
}

.design__catalog-cards.--start-anim .design__catalog-cards-list-item-label {
  opacity: 1;
  transform: translateX(0);
}
.design__catalog-cards.--start-anim .design__catalog-cards-list-item-finger-1 {
  opacity: 1;
  transform: translate(0, 0);
}
.design__catalog-cards.--start-anim .design__catalog-cards-list-item:nth-child(3) {
  transform: translateY(-60px);
}
.design__catalog-cards.--start-anim .design__catalog-cards-text1 {
  opacity: 1;
}
.design__catalog-cards.--start-anim .design__catalog-cards-arrow1 {
  opacity: 1;
}
.design__catalog-cards.--start-anim .design__catalog-cards-list-item-finger-2 {
  opacity: 1;
  transform: translate(0, 0);
}
.design__catalog-cards.--start-anim .design__catalog-cards-list-item-quicklook {
  opacity: 1;
}
.design__catalog-cards.--start-anim .design__catalog-cards-arrow2 {
  opacity: 1;
}
.design__catalog-cards.--start-anim .design__catalog-cards-text2 {
  opacity: 1;
  transform: translateX(0);
}
.design__catalog-cards.--start-anim .design__catalog-cards-quick {
  opacity: 1;
  transform: translateY(0);
}

.design__detail-graph .design__detail-graph-left {
  transform: translateY(68px);
  transition: transform 1s ease;
  transition-delay: 1s;
}
.design__detail-graph .design__detail-graph-right {
  transform: translateY(68px);
  transition: transform 1s ease;
  transition-delay: 1.2s;
}
.design__detail-graph .design__detail-graph-list-item:nth-child(2) {
  transform: translateY(0);
  transition: transform 1s ease;
  transition-delay: 1.4s;
}

.design__detail-graph.--start-anim  .design__detail-graph-left {
  transform: translateY(0);
}
.design__detail-graph.--start-anim  .design__detail-graph-right {
  transform: translateY(0);
}
.design__detail-graph.--start-anim  .design__detail-graph-list-item:nth-child(2) {
  transform: translateY(-68px);
}

.realize__section-head-desc {
  border-bottom: 1px solid transparent;
  transition: border 1s ease;
  transition-delay: .4s;
}
.realize__section-head-desc.--start-anim {
  border-bottom: 1px solid #FFFFFF;
}

.realize__basket .realize__basket-head-title  {
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay: .5s;
}
.realize__basket .realize__basket-head-desc  {
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay: .6s;
}
.realize__basket .realize__basket-screen-1 {
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay: 1s;
}
.realize__basket .realize__basket-line-1 {
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay: 1.75s;
}
.realize__basket .realize__basket-text-1 {
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay: 2s;
}
.realize__basket .realize__basket-screen-2 {
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay: 3s;
}
.realize__basket .realize__basket-screen-3 {
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay: 3.5s;
}
.realize__basket .realize__basket-phone {
  opacity: 0;
  transform: translateX(-68px);
  transition: opacity 1s ease, transform 1s ease;
  transition-delay: 4.5s;
}
.realize__basket .realize__basket-line-2 {
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay: 5.5s;
}
.realize__basket .realize__basket-text-2 {
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay: 5s;
}

.realize__basket.--start-anim .realize__basket-head-title  {
  opacity: 1;
}
.realize__basket.--start-anim .realize__basket-head-desc  {
  opacity: 1;
}
.realize__basket.--start-anim .realize__basket-screen-1 {
  opacity: 1;
}
.realize__basket.--start-anim .realize__basket-line-1 {
  opacity: 1;
}
.realize__basket.--start-anim .realize__basket-text-1 {
  opacity: 1;
}
.realize__basket.--start-anim .realize__basket-screen-2 {
  opacity: 1;
}
.realize__basket.--start-anim .realize__basket-screen-3 {
  opacity: 1;
}
.realize__basket.--start-anim .realize__basket-phone {
  opacity: 1;
  transform: translateX(0);
}
.realize__basket.--start-anim .realize__basket-line-2 {
  opacity: 1;
}
.realize__basket.--start-anim .realize__basket-text-2 {
  opacity: 1;
}



.realize__favourites-graph .realize__favourites-graph-text-1 {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 1s ease, transform 1s ease;
  transition-delay: .5s;
}
.realize__favourites-graph .realize__favourites-graph-line-1 {
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay: .75s;
}
.realize__favourites-graph .realize__favourites-graph-text-2 {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 1s ease, transform 1s ease;
  transition-delay: 1.5s;
}
.realize__favourites-graph .realize__favourites-graph-line-2 {
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay: 1.75s;
}
.realize__favourites-graph .realize__favourites-graph-text-3 {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 1s ease, transform 1s ease;
  transition-delay: 2.5s;
}
.realize__favourites-graph .realize__favourites-graph-line-3 {
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay: 2.75s;
}
.realize__favourites-graph .realize__favourites-graph-screen-2 {
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay: 3.5s;
}

.realize__favourites-graph.--start-anim  .realize__favourites-graph-text-1 {
  opacity: 1;
  transform: translateX(0);
}
.realize__favourites-graph.--start-anim  .realize__favourites-graph-line-1 {
  opacity: 1;
}
.realize__favourites-graph.--start-anim  .realize__favourites-graph-text-2 {
  opacity: 1;
  transform: translateX(0);
}
.realize__favourites-graph.--start-anim  .realize__favourites-graph-line-2 {
  opacity:1;
}
.realize__favourites-graph.--start-anim  .realize__favourites-graph-text-3 {
  opacity: 1;
  transform: translateY(0);
}
.realize__favourites-graph.--start-anim  .realize__favourites-graph-line-3 {
  opacity: 1;
}
.realize__favourites-graph.--start-anim  .realize__favourites-graph-screen-2 {
  opacity: 1;
}