/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

@media (max-width: 768px) {
  .third-block {
    -webkit-transform: scale(2.4);
    -ms-transform: scale(2.4);
    transform: scale(2.4);
  }
}

.third-block {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: 100px;
  pointer-events: all;
}

.third-block-container {
  max-width: 1437px;
  width: 100%;
}

.third-block__title {
  font-family: "Orbitron", sans-serif;
  color: white;
  font-size: 32px;
}

.third-block__app-showcase {
  position: relative;
  height: 756px;
  background: url("../assets/third-block/app-showcase-pc-bg.svg");
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.third-block__buttons-holder {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 614px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 13px;
}

.app-showcase__button {
  width: 194px;
  height: 150px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: url("../assets/third-block/button-bg.svg");
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.app-showcase__button object {
  width: 64px;
  height: auto;
  pointer-events: none;
}

.app-showcase__button object.active {
  /*z-index: 10;*/
  -webkit-filter: invert(0%) sepia(14%) saturate(1939%) hue-rotate(24deg)
    brightness(123%) contrast(84%);
  filter: invert(0%) sepia(14%) saturate(1939%) hue-rotate(24deg)
    brightness(123%) contrast(84%);
}

.app-showcase__button.active {
  /*background: linear-gradient(84.07deg, #A5782B -18.51%, #C99738 4.32%, #F4D362 23.46%, #FCF8B8 58.64%, #E3C56D 88.89%);*/
  /*-webkit-mask-image: inherit;*/
  /*mask-image: inherit;*/
  /*filter: invert(72%) sepia(67%) saturate(348%) hue-rotate(2deg) brightness(106%) contrast(91%);*/
  background: url("../assets/third-block/active-button.png");
}

.app-showcase__button--first {
  background: url("../assets/third-block/first-button-bg.svg");
}

.app-showcase__button--last {
  background: url("../assets/third-block/last-button-bg.svg");
}

.app-showcase__button--first.active {
  background: url("../assets/third-block/first-active-button.png");
}

.app-showcase__button--last.active {
  background: url("../assets/third-block/last-active-button.png");
}

.app-showcase__left-block {
  position: relative;
  height: 100%;
}

.app-showcase__right-block {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.app-showcase__right-block-container {
  max-width: 726px;
  width: 100%;
  position: relative;
}

.app-showcase__title {
  display: block;
  margin-top: 46px;
  /* font-size: 48px;
  font-family: "Orbitron", sans-serif;
  letter-spacing: -1.8px;
  text-align: left;
  background: -o-linear-gradient(
    5.93deg,
    #a5782b -18.51%,
    #c99738 4.32%,
    #f4d362 23.46%,
    #fcf8b8 58.64%,
    #e3c56d 88.89%
  );
  background: linear-gradient(
    84.07deg,
    #a5782b -18.51%,
    #c99738 4.32%,
    #f4d362 23.46%,
    #fcf8b8 58.64%,
    #e3c56d 88.89%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s; */
}

.app-showcase__title-with-span {
  background: white;
  -webkit-background-clip: text;
  -webkit-text-fill-color: white;
  margin-top: 20px;
}

.app-showcase__sub-title {
  margin-top: 20px;
  /* color: white;
  font-size: 19px; */
}

.app-showcase__title span {
  background: -o-linear-gradient(
    5.93deg,
    #a5782b -18.51%,
    #c99738 4.32%,
    #f4d362 23.46%,
    #fcf8b8 58.64%,
    #e3c56d 88.89%
  );
  background: linear-gradient(
    84.07deg,
    #a5782b -18.51%,
    #c99738 4.32%,
    #f4d362 23.46%,
    #fcf8b8 58.64%,
    #e3c56d 88.89%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.app-showcase__main-image {
  width: 726px;
  height: auto;
  position: absolute;
  top: 20%;
  left: 0;
}

.nft-marketplace-image {
  left: -8%;
}

.app-showcase-desc {
  margin-top: 55px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-left: 30px;
  position: relative;
  height: 100%;
  max-height: 350px;
}

.app-showcase__desc-container {
  max-width: 600px;
  width: 100%;
  letter-spacing: -0.2px;
  line-height: 24px;
  font-size: 19px;
  position: relative;
}

.app-showcase__desc-container-text {
}

.project-and-communities__desc {
  color: #363636;
  background: url("../assets/third-block/desc-bg-m.png") no-repeat;
  padding: 20px 20px;
}

.tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 20px;
}

.tag-element {
  white-space: nowrap;
  border: 1px white solid;
  border-radius: 50px;
  width: 180px;
  height: 43px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Для iPad в обеих ориентациях */
@media only screen and (max-device-width: 1024px) {
  .tag-element {
    font-size: 15px;
  }
}

.platypus {
  position: absolute;
  bottom: 0;
}

.circle {
  position: absolute;
  bottom: -45%;
  right: -20px;
}

.globe {
  position: absolute;
  bottom: -25%;
  right: 22%;
}

.do-and-earn__desc {
  max-width: 594px;
  max-height: 333px;
  height: 100%;
  background: url("../assets/third-block/do-and-earn/bg.svg") no-repeat;
  color: #363636;
  padding: 20px;
}

.daopeople-nft__desc {
  background: url("../assets/third-block/daopeople-nft/bg.svg") no-repeat;
  padding: 20px;
  color: #363636;
}

.daopeople-nft__sinusoid {
  position: absolute;
  bottom: -33%;
  left: 50%;
}

.nft-marketplace__first-desc {
  margin-top: 10px;
  height: 63px;
  padding: 20px;
  color: #363636;
  background: url("../assets/third-block/nft-marketplace/first-bg.svg")
    no-repeat;
}

.nft-marketplace__second-desc {
  margin-top: 60px;
  height: 63px;
  background: url("../assets/third-block/nft-marketplace/second-bg.svg")
    no-repeat;
  color: #363636;
  padding: 10px;
}

.business-matching__desc {
  height: 193px;
  padding: 20px;
  color: #363636;
  background: url("../assets/third-block/business-matching/desc-bg.svg")
    no-repeat;
}