.general-header {
  margin-top: 22rem;
  margin-bottom: 8rem;
}

.general-header-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
}

.general-header-title {
  color: #303030;
  font-weight: 700;
  font-size: 5.6rem;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.general-header-text {
  margin-top: 1rem;
  color: #707070;
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.4;
}

@media (max-width: 1100px) {
  .general-header {
    margin-top: 18rem;
    margin-bottom: 4rem;
  }

  .general-header-inner {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .general-header-title {
    font-size: 4.6rem;
  }

  .general-header-text {
    margin-top: 0;
    max-width: 82%;
  }
}

@media (max-width: 767px) {
  .general-header {
    margin-top: 12rem;
    margin-bottom: 3rem;
  }

  .general-header-inner {
    gap: 3rem;
  }

  .general-header-text {
    max-width: 100%;
    font-size: 1.5rem;
  }
}

.project-card {
  position: relative;
  width: 52rem;
  height: 36rem;
  background: #d9d9d9;
  border-radius: 2rem;
}

.project-card-title {
  z-index: 10;
  margin: 3.5rem 0 1.5rem 4rem;
  color: #fff;
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.2;
}

.project-card-text {
  z-index: 10;
  margin-right: 4rem;
  margin-left: 4rem;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.4;
}

.project-card-logo {
  z-index: 10;
  margin-top: auto;
  margin-bottom: 3rem;
  margin-left: 4rem;
  color: #fff;
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.4;
}

.project-card-title a {
  color: #fff;
}

.bg-foto {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.overflow-hidden {
  overflow: hidden;
}

.card-flex-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6rem;
  justify-content: space-between;
}

/* Стили карточки Camfrog Video Chat */
.camfrog-card {
  background: url("/themes/second/assets/img/new/projects/star3.png") no-repeat
      right 8.3rem bottom 25.87rem,
    url("/themes/second/assets/img/new/projects/star1.png") no-repeat right
      35.1rem bottom 13.9rem,
    url("/themes/second/assets/img/new/projects/star2.png") no-repeat right
      5.64rem bottom 6.07rem,
    url("/themes/second/assets/img/new/projects/Star.png") no-repeat right
      38.7rem bottom 17.4rem,
    url("/themes/second/assets/img/new/projects/Star.png") no-repeat right
      3.32rem bottom 21.03rem,
    url("/themes/second/assets/img/new/projects/StarSmall.png") no-repeat right
      7.66rem bottom 29.9rem,
    url("/themes/second/assets/img/new/projects/Screen1.png") no-repeat right
      20.36rem bottom,
    url("/themes/second/assets/img/new/projects/DellXPS13.png") no-repeat right
      bottom,
    linear-gradient(
      244.13deg,
      rgb(64 217 101 / 90%) 0%,
      rgb(0 106 129 / 90%) 99.22%
    );
}

.bg-foto-camfrog {
  background: url("/themes/second/assets/img/new/projects/cf-bg-people.png")
    left / cover no-repeat;
  opacity: 0.5;
}

@media (max-width: 1200px) {
  .project-card {
    width: 48rem;
  }
}

@media (max-width: 1100px) {
  .project-card {
    width: 100%;
    height: 32rem;
  }

  .card-container {
    gap: 3rem;
  }
}

@media (max-width: 991px) {
  .project-card-text {
    max-width: 30rem;
  }
}

@media (max-width: 767px) {
  .project-card {
    height: 26rem;
  }

  .project-card-title {
    margin: 3rem 0 1.5rem 3rem;
  }

  .project-card-text {
    margin-left: 3rem;
  }

  .project-card-logo {
    margin-top: auto;
    margin-bottom: 2.58rem;
    margin-left: 3rem;
  }

  .card-container {
    gap: 1.5rem;
  }

  .camfrog-card {
    background: linear-gradient(
      295.87deg,
      rgb(64 217 101 / 90%) 0%,
      rgb(0 106 129 / 90%) 99.22%
    );
  }
}

/* Стили карточки Virtual Background SDK */

.virtual-card {
  background: url("/themes/second/assets/img/new/projects/lady.png") right 2rem
      no-repeat,
    url("/themes/second/assets/img/new/projects/wall.png") right no-repeat;
}

.virtual-card::before {
  position: absolute;
  top: -27rem;
  right: 22.5rem;
  width: 79rem;
  height: 76rem;
  background: linear-gradient(
    180deg,
    rgb(48 44 205 / 93%) 0%,
    rgb(205 84 150 / 93%) 100%
  );
  border-radius: 2rem;
  transform: rotate(30deg);
  content: "";
}

.virtual-card::after {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: white;
  background-image: linear-gradient(
      45deg,
      #cacac9 25%,
      transparent 27%,
      transparent 73%,
      #cacac9 75%,
      #cacac9
    ),
    linear-gradient(
      45deg,
      #cacac9 25%,
      transparent 27%,
      transparent 73%,
      #cacac9 75%,
      #cacac9
    );
  background-position: 0 0, 1.4rem 1.4rem;
  background-size: 2.8rem 2.8rem;
  content: "";
}

.geometric-shapes::before {
  position: absolute;
  right: 25rem;
  bottom: 4.2rem;
  width: 5rem;
  height: 5rem;
  background: #3f8cff;
  border-radius: 10rem;
  content: "";
}

.geometric-shapes::after {
  position: absolute;
  bottom: 8.3rem;
  left: -4.15rem;
  width: 8.3rem;
  height: 8.3rem;
  background: #ffd43c;
  border-radius: 5.5rem 1rem 5.5rem 5.5rem;
  content: "";
}

@media (max-width: 1100px) {
  .geometric-shapes::before {
    right: 23rem;
    bottom: 3.7rem;
  }
}

@media (max-width: 767px) {
  .virtual-card {
    background: none;
  }

  .virtual-card::before {
    right: -10rem;
  }

  .geometric-shapes::before,
  .geometric-shapes::after {
    display: none;
  }
}

/* Стили карточки ManyCam */

.manycam-card {
  background: linear-gradient(118.32deg, #4ba1f2 1.33%, #3575d9 77.39%);
}

.manycam-card::before {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 359.09px;
  height: 201.37px;
  background: url("/themes/second/assets/img/new/projects/ManyCam2.png")
    no-repeat right bottom;
  content: "";
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgb(208 226 234 / 15%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.circle-size-1 {
  width: 298.06px;
  height: 298.06px;
}

.circle-size-2 {
  width: 420px;
  height: 420px;
}

.circle-size-3 {
  width: 544px;
  height: 544px;
}

@media (max-width: 767px) {
  .manycam-card::before {
    display: none;
  }

  .circle-size-1 {
    width: 189.58px;
    height: 189.58px;
  }

  .circle-size-2 {
    width: 267.13px;
    height: 267.13px;
  }

  .circle-size-3 {
    width: 346px;
    height: 346px;
  }
}

/* Стили карточки Paltalk Video Chat */

.paltalk-card {
  background: url("/themes/second/assets/img/new/projects/illustration.png")
      no-repeat right bottom,
    linear-gradient(
      116.47deg,
      rgb(24 149 255 / 90%) 3.11%,
      rgb(158 34 255 / 76.5%) 87.06%
    );
}

.bg-foto-paltalk {
  background: url("/themes/second/assets/img/new/projects/shutterstock.png")
    left / cover no-repeat;
}

@media (max-width: 767px) {
  .paltalk-card {
    background: linear-gradient(
      116.47deg,
      rgb(24 149 255 / 90%) 3.11%,
      rgb(158 34 255 / 76.5%) 87.06%
    );
  }
}

/* Стили карточки  TinyChat */

.tinychat-card {
  background: linear-gradient(
    0deg,
    rgb(22 135 171 / 90%) 0%,
    rgb(14 22 30 / 93%) 100%
  );
}

.tinychat-card::before {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 334.66px;
  height: 251.18px;
  background: url("/themes/second/assets/img/new/projects/tc_web_room_dark-mode1.png")
    no-repeat right bottom;
  content: "";
}

.ellipse-1 {
  width: 140px;
  height: 140px;
  background: #dc31a2;
  border-radius: 50%;
  opacity: 0.5;
  filter: blur(25px);
}

.ellipse-2 {
  width: 259.93px;
  height: 259.53px;
  background: #ffe600;
  border-radius: 50%;
  opacity: 0.25;
  filter: blur(50px);
}

.ellipse-3 {
  width: 109.89px;
  height: 109.89px;
  background: #37e6f1;
  border-radius: 50%;
  opacity: 0.5;
  filter: blur(20px);
}

.ellipse-position-1 {
  position: absolute;
  top: -9.85rem;
  left: 28.2rem;
}

.ellipse-position-2 {
  position: absolute;
  top: 13.15rem;
  left: 16.6rem;
}

.ellipse-position-3 {
  position: absolute;
  top: 17.45rem;
  left: -6.3rem;
}

@media (max-width: 991px) {
  .ellipse-position-1 {
    top: -9.85rem;
    left: 45rem;
  }

  .ellipse-position-2 {
    top: 13.15rem;
    left: 33.4rem;
  }

  .ellipse-position-3 {
    top: 17.45rem;
    left: 10.5rem;
  }
}

@media (max-width: 767px) {
  .tinychat-card {
    background: linear-gradient(
      0deg,
      rgb(22 135 171 / 90%) 0%,
      rgb(14 22 30 / 93%) 100%
    );
  }

  .tinychat-card::before {
    display: none;
  }
}

/* Стили карточки  DeskRoll */

.deskroll-card {
  background: url("/themes/second/assets/img/new/projects/illustration-deskroll.png")
      no-repeat right bottom,
    linear-gradient(297.69deg, #2198df 24.54%, #65c439 100%);
}

@media (max-width: 767px) {
  .deskroll-card {
    background: linear-gradient(297.69deg, #2198df 24.54%, #65c439 100%);
  }
}

/* Стили карточки  Filmillion */

.filmillion-card {
  background: url("/themes/second/assets/img/new/projects/illustration-filmillion.png")
      no-repeat right bottom,
    linear-gradient(120.89deg, #7a4bff 3.57%, #572175 87%);
}

@media (max-width: 767px) {
  .filmillion-card {
    background: linear-gradient(120.89deg, #7a4bff 3.57%, #572175 87%);
  }
}

.project-title {
  margin-top: 0;
  margin-bottom: 6rem;
  color: #303030;
  font-weight: 700;
  font-size: 5.6rem;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

@media (max-width: 991px) {
  .project-title {
    margin-top: 0;
    margin-bottom: 6rem;
    font-size: 4.6rem;
  }
}

@media (max-width: 767px) {
  .project-title {
    margin-top: 0;
    margin-bottom: 4rem;
  }
}

.project-info {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 6rem;
}

@media (max-width: 991px) {
  .project-info {
    grid-template-columns: 1fr 1fr;
    gap: 3rem 6rem;
  }
}

@media (max-width: 767px) {
  .project-info {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.project-info-title {
  margin-bottom: 1rem;
  color: #303030;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.4;
}

@media (max-width: 767px) {
  .project-info-title {
    margin-bottom: 0.5rem;
  }
}

.project-info-text {
  color: #707070;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.4;
}

.project-info-text a {
  color: #0083f1;
}

.project-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  margin-top: 6rem;
}

@media (max-width: 991px) {
  .project-body {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

.project-description-title {
  margin-bottom: 3rem;
  color: #303030;
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 1.2;
}

.project-description-text {
  margin-bottom: 5.6rem;
  color: #707070;
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.4;
}

.project-example {
  position: relative;
  z-index: -1;
  width: 100%;
  max-width: 52rem;
  margin-top: 16.7rem;
  margin-right: auto;
  margin-left: auto;
}

.project-example svg {
  width: 100%;
}

@media (max-width: 991px) {
  .project-example {
    margin-top: 8rem;
  }
}

.project-banner {
  position: relative;
  height: 36rem;
  margin-bottom: 8rem;
  border-radius: 0 8rem;
}

.project-wrapper {
  position: relative;
}

.logo-position {
  margin-top: 3rem;
  margin-left: 4rem;
}

@media (max-width: 767px) {
  .logo-position {
    display: none;
  }

  .project-banner {
    border-radius: 0 4rem;
  }
}

.mb-120 {
  margin-bottom: 12rem;
}

.mt-50 {
  margin-top: 5rem;
}

.mt-60 {
  margin-top: 6rem;
}

.mt-24 {
  margin-top: -2.4rem;
}

.mt-26 {
  margin-top: -6rem;
}

.mt-90 {
  margin-top: 9rem;
}

@media (max-width: 991px) {
  .project-banner {
    height: 30rem;
  }

  .mb-md-100 {
    margin-bottom: 10rem;
  }

  .mt-md-80 {
    margin-top: 8rem;
  }

  .mt-md-30 {
    margin-top: 3rem;
  }

  .mt-md-0c {
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .project-banner {
    height: 20rem;
  }
}

/* Стили для Paltalk Video Chat */
.paltalk-banner {
  background: url("/themes/second/assets/img/new/projects/uni-cool.png")
      no-repeat left 12% bottom,
    url("/themes/second/assets/img/new/projects/pt-iPhone13.png") no-repeat left
      22% bottom,
    url("/themes/second/assets/img/new/projects/pt-tablet.png") no-repeat left
      78% bottom,
    url("/themes/second/assets/img/new/projects/16.png") no-repeat left 76% top
      5%,
    url("/themes/second/assets/img/new/projects/pt-Macbook.png") no-repeat left
      50% bottom,
    linear-gradient(
      83.89deg,
      rgb(24 149 255 / 74%) 0%,
      rgb(85 89 255 / 74%) 100%
    );
}

.paltalk-el-1 {
  position: absolute;
  top: 115px;
  left: -28px;
}

.paltalk-el-2 {
  position: absolute;
  right: 80px;
  bottom: -45px;
}

.example-paltalk::before {
  position: absolute;
  top: 19%;
  right: 0;
  width: 100%;
  height: 100%;
  background: url("/themes/second/assets/img/new/projects/Macbook.png") center
    top / 100% no-repeat;
  content: "";
}

@media (max-width: 991px) {
  .paltalk-banner {
    background: url("/themes/second/assets/img/new/projects/uni-cool.png")
        no-repeat left 6% bottom,
      url("/themes/second/assets/img/new/projects/pt-iPhone13.png") no-repeat
        left 18% bottom -40px,
      url("/themes/second/assets/img/new/projects/pt-tablet.png") no-repeat left
        90% bottom -40px,
      url("/themes/second/assets/img/new/projects/16.png") no-repeat left 82%
        top 5%,
      url("/themes/second/assets/img/new/projects/pt-Macbook.png") no-repeat
        left 50% bottom -40px,
      linear-gradient(
        83.89deg,
        rgb(24 149 255 / 74%) 0%,
        rgb(85 89 255 / 74%) 100%
      );
  }
}

@media (max-width: 767px) {
  .paltalk-banner {
    background: linear-gradient(
      83.89deg,
      rgb(24 149 255 / 74%) 0%,
      rgb(85 89 255 / 74%) 100%
    );
  }

  .paltalk-el-1 {
    top: 30px;
    left: -15px;
    width: 50px;
  }

  .paltalk-el-2 {
    right: 15px;
    bottom: -30px;
    width: 64px;
  }
}

/* Стили для Camfrog Video Chat */
.camfrog-banner {
  background: url("/themes/second/assets/img/new/projects/star2.png") no-repeat
      right 5% bottom 18% / 46.76px 31.16px,
    url("/themes/second/assets/img/new/projects/Star.png") no-repeat right 25%
      bottom 25% / 11.74px,
    url("/themes/second/assets/img/new/projects/cf-Screen1.png") no-repeat left
      15% bottom,
    url("/themes/second/assets/img/new/projects/cf-tablet.png") no-repeat left
      94% bottom,
    url("/themes/second/assets/img/new/projects/cf-DellXPS13.png") no-repeat
      left 50% bottom,
    linear-gradient(
      263.84deg,
      rgb(64 217 101 / 90%) 0%,
      rgb(0 106 129 / 90%) 100.44%
    );
}

.camfrog-el-1 {
  position: absolute;
  bottom: -45px;
  left: 80px;
}

.camfrog-el-2 {
  position: absolute;
  top: -25px;
  right: 178px;
}

.example-camfrog::before {
  position: absolute;
  top: 19%;
  right: -4%;
  width: 105%;
  height: 100%;
  background: url("/themes/second/assets/img/new/projects/cf-Macbook.png")
    center top / 100% no-repeat;
  content: "";
}

@media (max-width: 991px) {
  .camfrog-banner {
    background: url("/themes/second/assets/img/new/projects/star2.png")
        no-repeat right 5% bottom 18% / 46.76px 31.16px,
      url("/themes/second/assets/img/new/projects/Star.png") no-repeat right 25%
        bottom 25% / 11.74px,
      url("/themes/second/assets/img/new/projects/cf-Screen1.png") no-repeat
        left 8% bottom -40px,
      url("/themes/second/assets/img/new/projects/cf-tablet.png") no-repeat left
        98% bottom -40px,
      url("/themes/second/assets/img/new/projects/cf-DellXPS13.png") no-repeat
        left 50% bottom -40px,
      linear-gradient(
        263.84deg,
        rgb(64 217 101 / 90%) 0%,
        rgb(0 106 129 / 90%) 100.44%
      );
  }

  .camfrog-el-1 {
    position: absolute;
    bottom: -45px;
    left: 35px;
  }

  .camfrog-el-2 {
    position: absolute;
    top: -25px;
    right: 50px;
  }
}

@media (max-width: 767px) {
  .camfrog-banner {
    background: linear-gradient(
      263.84deg,
      rgb(64 217 101 / 90%) 0%,
      rgb(0 106 129 / 90%) 100.44%
    );
  }

  .camfrog-el-1 {
    bottom: -36px;
    left: 73px;
    width: 67px;
  }

  .camfrog-el-2 {
    top: -34px;
    right: 21px;
    width: 60px;
  }
}

/* Стили для Virtual Background SDK */
.virtual-banner::after {
  position: absolute;
  top: 0;
  left: 54%;
  width: 530px;
  height: 600px;
  background: url("/themes/second/assets/img/new/projects/vb-wall.png") right
    top no-repeat;
  content: "";
}

.virtual-banner::before {
  position: absolute;
  top: -180px;
  right: 54%;
  z-index: -1;
  width: 530px;
  height: 600px;
  background: linear-gradient(
    180deg,
    rgb(48 44 205 / 93%) 0%,
    rgb(205 84 150 / 93%) 100%
  );
  transform: rotate(30deg);
  content: "";
}

.virtual-banner {
  z-index: -1;
  background-color: white;
  background-image: linear-gradient(
      45deg,
      #cacac9 25%,
      transparent 27%,
      transparent 73%,
      #cacac9 75%,
      #cacac9
    ),
    linear-gradient(
      45deg,
      #cacac9 25%,
      transparent 27%,
      transparent 73%,
      #cacac9 75%,
      #cacac9
    );
  background-position: 0 0, 1.4rem 1.4rem;
  background-size: 2.8rem 2.8rem;
}

.virtual-banner-2::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: url("/themes/second/assets/img/new/projects/lady.png") center top
    2rem no-repeat;
  content: "";
}

.virtual-el-1 {
  position: absolute;
  bottom: 4rem;
  left: 4rem;
  width: 8.3rem;
  height: 8.3rem;
  background: #ffd43c;
  border-radius: 5.5rem 1rem 5.5rem 5.5rem;
}

.virtual-el-2 {
  position: absolute;
  top: -2.8rem;
  left: 64%;
  width: 5rem;
  height: 5rem;
  background: #3f8cff;
  border-radius: 10rem;
}

.virtual-el-3 {
  position: absolute;
  right: 4.6rem;
  bottom: -4rem;
  width: 9.1rem;
  height: 19.3rem;
  background: url("/themes/second/assets/img/new/projects/vb-bg-lines.png")
    no-repeat #ff5f3c;
  border-radius: 5.5rem 1rem 5.5rem 5.5rem;
}

.example-virtual::before {
  position: absolute;
  top: -10%;
  right: -3%;
  width: 107%;
  height: 110%;
  background: url("/themes/second/assets/img/new/projects/vb-illustration.png")
    center top / 100% no-repeat;
  content: "";
}

@media (max-width: 991px) {
  .virtual-el-2 {
    left: 66%;
  }
}

@media (max-width: 767px) {
  .virtual-banner::before {
    top: -12rem;
    right: 56%;
    width: 34rem;
    height: 40rem;
  }

  .virtual-el-3 {
    right: 2.1rem;
    bottom: -3rem;
    width: 5rem;
    height: 10.6rem;
    border-radius: 3.5rem 1rem 3.5rem 3.5rem;
  }

  .virtual-el-2 {
    top: -1.7rem;
    left: calc(50% + 115px);
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 10rem;
  }

  .virtual-el-1 {
    bottom: 1.9rem;
    left: 1.8rem;
    width: 5.7rem;
    height: 5.7rem;
    border-radius: 5.5rem 1rem 5.5rem 5.5rem;
  }

  .virtual-banner::after {
    top: 0;
    right: 0;
    width: 343px;
    height: 244px;
  }
}

/* Стили для ManyCam */
.manycam-banner {
  background: linear-gradient(83.89deg, #57a4ed 0%, #3676da 100%);
}

.manycam-banner-img {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: url("/themes/second/assets/img/new/projects/mc-glossy.png")
      no-repeat left -1% bottom 48px,
    url("/themes/second/assets/img/new/projects/mc-matte.png") no-repeat left
      25% top 56px,
    url("/themes/second/assets/img/new/projects/mc-phone.png") no-repeat left
      26% bottom,
    url("/themes/second/assets/img/new/projects/mc-info.png") no-repeat left 94%
      bottom 180px,
    url("/themes/second/assets/img/new/projects/mc-tablet.png") no-repeat left
      81% bottom,
    url("/themes/second/assets/img/new/projects/mc-screen.png") no-repeat left
      10% bottom,
    url("/themes/second/assets/img/new/projects/mc-desktop.png") no-repeat
      center bottom;
}

.manycam-el-1 {
  position: absolute;
  top: -60px;
  left: 60%;
}

.manycam-el-2 {
  position: absolute;
  right: 3%;
  bottom: -65px;
  z-index: 2;
}

.example-manycam::before {
  position: absolute;
  top: 19%;
  right: 0;
  width: 100%;
  height: 100%;
  background: url("/themes/second/assets/img/new/projects/mc-Macbook.png")
    center top / 100% no-repeat;
  content: "";
}

@media (max-width: 991px) {
  .manycam-banner-img {
    background: url("/themes/second/assets/img/new/projects/mc-glossy.png")
        no-repeat left -1% bottom 48px,
      url("/themes/second/assets/img/new/projects/mc-matte.png") no-repeat left
        25% top 56px,
      url("/themes/second/assets/img/new/projects/mc-phone.png") no-repeat left
        26% bottom -40px,
      url("/themes/second/assets/img/new/projects/mc-info.png") no-repeat left
        94% bottom 140px,
      url("/themes/second/assets/img/new/projects/mc-tablet.png") no-repeat left
        81% bottom -40px,
      url("/themes/second/assets/img/new/projects/mc-screen.png") no-repeat left
        10% bottom -40px,
      url("/themes/second/assets/img/new/projects/mc-desktop.png") no-repeat
        center bottom -40px;
  }
}

@media (max-width: 767px) {
  .manycam-banner-img {
    background: none;
  }

  .manycam-el-1 {
    top: -34px;
    left: 57%;
    width: 72px;
  }

  .manycam-el-2 {
    right: 15%;
    bottom: -52px;
    z-index: 2;
    width: 100px;
  }
}

/* Стили для DeskRoll */
.deskroll-banner {
  background: url("/themes/second/assets/img/new/projects/dr-phone.png")
      no-repeat left 90% bottom,
    url("/themes/second/assets/img/new/projects/dr-desktop.png") no-repeat left
      50% bottom,
    url("/themes/second/assets/img/new/projects/dr-bg.svg") no-repeat left 50%
      bottom,
    linear-gradient(
      96.87deg,
      rgb(33 152 223 / 90%) 10.75%,
      rgb(101 196 57 / 90%) 89.25%
    );
}

.example-deskroll::before {
  position: absolute;
  top: 19%;
  right: 0;
  width: 100%;
  height: 100%;
  background: url("/themes/second/assets/img/new/projects/dr-Macbook.png")
    center top / 100% no-repeat;
  content: "";
}

@media (max-width: 991px) {
  .deskroll-banner {
    background: url("/themes/second/assets/img/new/projects/dr-phone.png")
        no-repeat left 90% bottom -40px,
      url("/themes/second/assets/img/new/projects/dr-desktop.png") no-repeat
        left 50% bottom / 600px,
      url("/themes/second/assets/img/new/projects/dr-bg.svg") no-repeat left 50%
        bottom,
      linear-gradient(
        96.87deg,
        rgb(33 152 223 / 90%) 10.75%,
        rgb(101 196 57 / 90%) 89.25%
      );
  }
}

@media (max-width: 767px) {
  .deskroll-banner {
    background: linear-gradient(
      96.87deg,
      rgb(33 152 223 / 90%) 10.75%,
      rgb(101 196 57 / 90%) 89.25%
    );
  }
}

/* Стили для TinyChat */
.tinychat-banner {
  background: linear-gradient(
    0deg,
    rgb(22 135 171 / 90%) 0%,
    rgb(14 22 30 / 93%) 100%
  );
}

.tinychat-banner-img {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: url("/themes/second/assets/img/new/projects/tc-banana.png")
      no-repeat right 6% bottom,
    url("/themes/second/assets/img/new/projects/tc-lion_smile.png") no-repeat
      right 3% top 30%,
    url("/themes/second/assets/img/new/projects/tc-music1.png") no-repeat left
      center,
    url("/themes/second/assets/img/new/projects/tc-web_room_dark-mode.png")
      no-repeat center bottom -10px;
}

.ellipse-position-4 {
  position: absolute;
  top: -9.85rem;
  left: 40%;
}

.ellipse-position-5 {
  position: absolute;
  right: -11rem;
  bottom: -14.8rem;
}

.ellipse-position-6 {
  position: absolute;
  bottom: 7.8rem;
  left: -6.8rem;
}

.tinychat-el-1 {
  position: absolute;
  bottom: -15px;
  left: 11%;
  z-index: 2;
}

.example-tinychat::before {
  position: absolute;
  top: 19%;
  right: 0;
  width: 100%;
  height: 100%;
  background: url("/themes/second/assets/img/new/projects/tc-Macbook.png")
    center top / 100% no-repeat;
  content: "";
}

@media (max-width: 991px) {
  .tinychat-banner-img {
    background: url("/themes/second/assets/img/new/projects/tc-lion_smile.png")
        no-repeat right 3% top 30%,
      url("/themes/second/assets/img/new/projects/tc-music1.png") no-repeat left
        center,
      url("/themes/second/assets/img/new/projects/tc-web_room_dark-mode.png")
        no-repeat center bottom -50px;
  }

  .tinychat-el-1 {
    bottom: -12px;
    left: 9%;
    width: 128px;
  }
}

@media (max-width: 767px) {
  .tinychat-banner-img {
    background: none;
  }

  .tinychat-el-1 {
    bottom: -5px;
    left: 5%;
    width: 93px;
  }
}

/* Стили для Filmillion */
.filmillion-banner {
  background: linear-gradient(95.63deg, #904bff 9.39%, #572175 114.45%);
}

.filmillion-banner-img {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: url("/themes/second/assets/img/new/projects/fm-phone2.png")
      no-repeat left 206px bottom,
    url("/themes/second/assets/img/new/projects/fm-phone1.png") no-repeat left
      176px bottom,
    url("/themes/second/assets/img/new/projects/fm-desktop.png") no-repeat left
      65% bottom;
}

.example-filmillion::before {
  position: absolute;
  top: 19%;
  right: 0;
  width: 100%;
  height: 100%;
  background: url("/themes/second/assets/img/new/projects/fm-final1.png") left
    40% top / 50% no-repeat;
  content: "";
}

@media (max-width: 991px) {
  .filmillion-banner-img {
    background: url("/themes/second/assets/img/new/projects/fm-phone2.png")
        no-repeat left 150px bottom -60px,
      url("/themes/second/assets/img/new/projects/fm-phone1.png") no-repeat left
        120px bottom -60px,
      url("/themes/second/assets/img/new/projects/fm-desktop.png") no-repeat
        left 65% bottom / auto 260px;
  }
}

@media (max-width: 767px) {
  .filmillion-banner-img {
    background: none;
  }
}

/* Аккардион */
.accordion-input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.collapsible-accordion {
  position: relative;
  overflow: hidden;
  margin-bottom: 32px;
}

.collapsible-item-label {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 1rem 3rem 0.8rem;
  color: #303030;
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 1.4;
  cursor: pointer;
}

.collapsible-item-label:hover {
  text-decoration: underline;
}

.collapsible-item-label:hover::after {
  background: #0083f1;
}

.collapsible-item-content {
  max-height: 0;
  color: #303030;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.4;
  transition: all 0.35s;
}

.collapsible-item-content li {
  margin-bottom: 0.4rem;
}

.collapsible-item-content li::marker {
  color: #707070;
}

.accordion-input:checked + .collapsible-item-label::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  text-align: center;
  background: #0083f1;
  border-radius: 4px;
  transition: all 0.35s;
  content: "";
}

.collapsible-item-label::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  text-align: center;
  background: #DAECFF;
  border-radius: 4px;
  transition: all 0.35s;
  content: "";
}

.collapsible-item-content ul {
  margin: 0;
  padding-top: 15px;
  padding-bottom: 5px;
  padding-left: 59px;
}

.accordion-input:checked ~ .collapsible-item-content {
  max-height: 100vh;
}

.accordion-wrapper {
  margin-top: 8rem;
}

@media (max-width: 991px) {
  .accordion-wrapper {
    margin-top: 0;
  }
}

.project-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  font-size: 0;
}

.projects {
  margin-bottom: 12rem;
}

@media (max-width: 1100px) {
  .projects {
    margin-bottom: 10rem;
  }
}

/* стили для страницы контактов */
.contacts {
  margin-bottom: 16rem;
}

.contacts-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  margin-top: 6rem;
}

@media (max-width: 991px) {
  .contacts-container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

.contact-item {
  margin-bottom: 2.2rem;
}

.contact-item:last-child {
  margin-bottom: 0;
}

.contact-title {
  color: #707070;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.4;
}

.contact-data {
  margin-top: 2px;
  color: #303030;
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.4;
}

.text-color-link {
  color: #0083f1;
}

.contacts-maps {
  width: 100%;
  height: 100%;
}

.contacts-maps iframe{
  border: none;
  border-radius: 10px;
}

@media (max-width: 991px) {
  .contacts-maps {
    width: 100%;
    height: 35.2rem;
  }

  .contacts-info {
    margin-bottom: 4rem;
  }
}

.btn-back-to-projects {
  display: inline-block;
  padding: 1.3rem 2.9rem;
  color: #0083f1;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.56px;
  border: 2px solid #0083f1;
  border-radius: 25px;
}

.btn-back-position {
  margin-top: 5rem;
  margin-bottom: 0;
  text-align: center;
}

.width-max-content {
  width: max-content;
}