$main-background: #111111;
$main-color: #185AA8;
$secondary-text: #9CA3AF;
$ai-background: #0F1627;
$ai-border: #192435;
$pattern-color: #1b1d1d;

.front {
  background-color: $main-background;
}

.header {
  margin-top: 30px;
  margin-bottom: 70px;

  .container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
    min-height: 55px;
    align-items: center;
    border-radius: 15px;
    padding: 0 20px;
  }

  .title {
    font-weight: 400;
    font-size: 30px;
    color: #fff;
    margin: 0;
    margin-bottom: -7px;
    z-index: 1;
    text-decoration: none;
  }

  .title:visited,
  .title:active,
  .title:focus,
  .title:hover {
    color: #fff;
    text-decoration: none;
    outline: none;
  }

  .button {
    border: 1px solid #fff;
    border-radius: 10px;
    font-weight: 400;
    font-size: 17px;
    color: #fff;
    padding: 8px 35px;
    background-color: transparent;
    z-index: 1;
    transition: all .2s;
  }

  .button:hover,
  .button:active,
  .button:focus {
    // background-color: $main-color;
    // border-color: $main-color;
    background-color: #fff;
    color: $main-color;
    border-color: $main-color;
  }

  .blur-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(33px);
    opacity: 0.7;
    background-color: $main-color;
  }

  .circle-1 {
    width: 300px;
    height: 300px;
    top: 11%;
    left: -2%;
  }

  .circle-2 {
    width: 300px;
    height: 300px;
    bottom: 24%;
    right: 49%;
  }

  .circle-3 {
    width: 350px;
    height: 350px;
    top: 46%;
    left: 80%;
  }

  .title-not-home {
    padding-left: 30px;
    position: relative;

    svg {
      position: absolute;
      left: 5px;
      bottom: 18px;
      transition: all .2s;
    }
  }

  .title-not-home:hover,
  .title-not-home:active,
  .title-not-home:focus {
    svg {
      left: -3px;
    }
  }
}

section {
  margin-bottom: 100px;
}

.main {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .left-side {
    .title {
      font-weight: 400;
      font-size: 70px;
      color: #fff;
    }

    .description {
      font-weight: 400;
      font-size: 20px;
      color: $main-color;
      text-align: right;
    }
  }

  .right-side {
    display: flex;
    flex-direction: column;
    align-items: center;

    .title {
      font-weight: 400;
      font-size: 15px;
      color: #fff;
      margin-bottom: 15px;
    }

    .skills {
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: $ai-background;
      border: 1px solid $ai-border;
      border-radius: 10px;
      padding: 20px;
      margin-bottom: 35px;
    }

    .skills-cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }

    .skill-card {
      font-weight: 400;
      font-size: 15px;
      text-align: center;
      color: #fff;
      padding: 4px 30px 1px 30px;
      border: 1px solid $main-color;
      border-radius: 100px;
      background-color: transparent;
      flex: 0 0 (100% - 60px) / 4;
      cursor: pointer;
      transition: all .2s;
    }

    .skill-card:hover,
    .skill-card:active,
    .skill-card:focus {
      background-color: #262e44;
    }

    .terminal-container {
      background-color: #101729;
      border-radius: 10px;
      border: 1px solid #1a222f;
      display: flex;
      flex-direction: column;
      padding: 20px;
      max-width: 367px;
      font-family: 'Courier New', monospace !important;
      font-size: 14px;

      .top-side {
        display: flex;
        flex-direction: row;
        align-items: center;
        border-bottom: 1px solid #212b3f;
        padding-bottom: 10px;
        margin-bottom: 20px;
      }

      .red-circle {
        width: 12px;
        height: 12px;
        background-color: #ef4444;
        border-radius: 50%;
        margin-right: 7px;
      }

      .yellow-circle {
        width: 12px;
        height: 12px;
        background-color: #eab308;
        border-radius: 50%;
        margin-right: 7px;
      }

      .green-circle {
        width: 12px;
        height: 12px;
        background-color: #22c55e;
        border-radius: 50%;
        margin-right: 15px;
      }

      .terminal-title {
        color: #fff;
        margin: 0;
      }

      .line {
        color: #fff;
      }

      .line:not(:last-child) {
        margin-bottom: 12px;
      }

      .dollar {
        color: #2282f4;
        margin-right: 15px;
      }

      .green-line {
        margin-bottom: 12px;
        color: #46cf79;
      }

      .line-1 {
        animation: green-color 4s infinite;
      }

      .line-2 {
        animation: green-color 4.5s infinite;
      }

      .line-3 {
        animation: green-color 3s infinite;
      }
    }

    .blur-circle {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.7;
      background-color: $main-color;
      z-index: -10;
    }

    .circle-1 {
      width: 300px;
      height: 300px;
      top: 36%;
      left: 57%;
    }
  }
}

@keyframes green-color {
  0% {
    color: #2a7151;
  }

  50% {
    color: #46cf79;
  }

  100% {
    color: #2a7151;
  }
}

.portfolio {
  .title {
    font-weight: 400;
    font-size: 50px;
    color: #fff;
    text-align: center;
    margin-bottom: 60px;
  }

  .portfolio-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .portfolio-card {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      border: 1px solid #fff;
      border-radius: 20px;
      padding: 21px 250px 18px 21px;
      margin-right: 65px;
      margin-bottom: 20px;
      overflow: hidden;
      cursor: pointer;

      .title {
        font-weight: 400;
        font-size: 20px;
        color: #fff;
        margin: 0;
        margin-bottom: 12px;
      }

      .description {
        font-weight: 400;
        font-size: 13px;
        color: #9ca3af;
        margin: 0;
      }

      .date {
        position: absolute;
        right: 16px;
        bottom: 5px;
        font-weight: 400;
        font-size: 12px;
        color: #9ca3af;
        margin: 0;
      }

      .crown-icon {
        margin-bottom: 2px;
      }

      .hover-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        z-index: 2;
        justify-content: flex-end;

        .hover-image {
          width: 25%;
          height: 100%;
          object-fit: cover;
          transform: translateX(-100%);
          transition: transform 0.2s ease-out;
          background-color: $main-background;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
        }

        .preview-image {
          width: 60%;
        }

        .hover-overlay {
          width: 75%;
          height: 100%;
          backdrop-filter: blur(10px);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          opacity: 0;
          transition: opacity 0.2s;
        }

        .open-text {
          font-size: 12px;
          color: $secondary-text;
        }
      }

      .hover-content.without-logo {
        .hover-overlay {
          width: 100%;
        }
      }
    }

    .portfolio-card:hover {
      .hover-image {
        transform: translateX(0);
      }

      .hover-overlay {
        opacity: 1;
      }
    }

    .primary-card {
      border-color: $main-color;
      margin-right: 20px;
    }
  }
}

.feedback {
  position: relative;

  .title {
    font-weight: 400;
    font-size: 50px;
    color: #fff;
    text-align: center;
    margin-bottom: 60px;
  }

  .feedback-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .left-side {
      // Блок
      position: relative;
      background-color: #1F2937;
      border-radius: 10px;
      padding: 25px;
      overflow: hidden;

      .title {
        position: relative;
        font-weight: 400;
        font-size: 25px;
        color: #fff;
        margin: 0;
        margin-bottom: 23px;
        z-index: 1;
      }
    }

    .right-side {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .top-side {
        // Блок
        position: relative;
        background-color: #1F2937;
        border-radius: 10px;
        padding: 25px;
        overflow: hidden;

        .main-contacts {
          display: flex;
          flex-direction: column;
          margin-bottom: 20px;

          .information {
            position: relative;
            display: flex;
            flex-direction: row;
            z-index: 1;

            img {
              margin-right: 18px;
            }

            .information-name {
              font-weight: 300;
              font-size: 13px;
              color: $secondary-text;
              margin: 0;
            }

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

            .value {
              font-weight: 300;
              font-size: 16px;
              color: #fff;
              margin: 0;
            }
          }

          .information:not(:last-child) {
            margin-bottom: 30px;
          }
        }

        .links {
          position: relative;
          display: flex;
          flex-direction: row;
          justify-content: center;
          z-index: 1;

          .link:not(:last-child) {
            margin-right: 20px;
          }

          .link:hover,
          .link:active,
          .link:focus {
            outline: none;
          }
        }
      }

      .bottom-side {
        // Блок
        position: relative;
        background-color: #1F2937;
        border-radius: 10px;
        overflow: hidden;
        padding: 25px;

        .contact {
          display: flex;
          flex-direction: row;
          justify-content: space-between;

          img {
            position: relative;
            z-index: 1;
          }

          .contact-button {
            position: relative;
            font-weight: 400;
            font-size: 14px;
            color: #fff;
            padding: 13px 25px;
            background-color: transparent;
            border: 1px solid #fff;
            border-radius: 10px;
            transition: all .2s;
            z-index: 1;
            text-decoration: none;
          }

          .contact-button:hover,
          .contact-button:active,
          .contact-button:focus {
            border-color: $main-color;
            outline: none;
          }
        }
      }

      .title {
        position: relative;
        font-weight: 400;
        font-size: 20px;
        color: #fff;
        margin: 0;
        margin-bottom: 23px;
        text-align: left;
        z-index: 1;
      }
    }
  }

  .wpcf7 {
    position: relative;
    z-index: 1;

    label {
      font-weight: 300;
      font-size: 15px;
      color: #fff;
      margin-left: 15px;
    }

    input,
    textarea {
      font-weight: 300;
      font-size: 16px;
      color: #fff;
      border: none;
      outline: none;
      background-color: #343f4e;
      border-radius: 10px;
      padding: 10px;
      padding-right: 5px;
    }

    textarea {
      max-height: 145px;
      width: 100%;
    }

    input:not([type="submit"]) {
      width: 100%;
    }

    p:not(:last-child) {
      margin-bottom: 20px;
    }

    .form-submit {
      text-align: center;
    }

    .wpcf7-spinner {
      display: none;
      opacity: 0;
      margin: 0;
      padding: 0;
      width: 0;
      height: 0;
    }

    .wpcf7-response-output {
      color: #fff;
    }

    .wpcf7-submit {
      border: 1px solid $main-color;
      padding: 10px 25px;
    }
  }

  .blur-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.7;
    background-color: $main-color;
  }

  .circle-1 {
    width: 600px;
    height: 600px;
    top: 9%;
    left: 20%;
  }

  .circle-2 {
    width: 600px;
    height: 600px;
    top: 20%;
    left: -53%;
  }

  .circle-3 {
    width: 600px;
    height: 600px;
    top: -300%;
    left: -59%;
  }
}

.footer {
  .left-side {
    display: flex;
    flex-direction: column;

    .main-title {
      font-weight: 400;
      font-size: 35px;
      color: #fff;
      margin: 0;
      margin-bottom: 70px;
    }

    .slogan-container {
      width: 90%;

      .slogan {
        font-weight: 400;
        font-size: 15px;
        line-height: 1.6523;
        color: $secondary-text;
        margin: 0;
      }

      .slogan-reload {
        margin-right: 5px;
        margin-top: -2px;
        cursor: pointer;
        transition: rotate .2s;
      }

      .slogan-reload.active {
        rotate: 360deg;
      }
    }
  }

  .right-side {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;

    .nav-col {
      display: flex;
      flex-direction: column;

      .nav-title {
        font-weight: 400;
        font-size: 20px;
        color: #fff;
        margin-bottom: 25px;
      }

      .menu {
        margin: 0;
        padding: 0;

        .menu-item {
          list-style-type: none;
          position: relative;

          a {
            font-weight: 400;
            font-size: 16px;
            color: $secondary-text;
            text-decoration: none;
            cursor: pointer;
          }

          a:visited,
          a:focus,
          a:active,
          a:hover {
            color: $secondary-text;
            text-decoration: none;
          }
        }

        .menu-item:not(:last-child) {
          margin-bottom: 10px;
        }

        .menu-item::before {
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          width: 0;
          height: 1px;
          background-color: $main-color;
          transition: all .3s;
        }

        .menu-item:hover::before {
          width: 100%;
        }
      }

      .contact-container {
        .description {
          font-weight: 400;
          font-size: 16px;
          color: $secondary-text;
          margin: 0;
        }

        .value {
          font-weight: 400;
          font-size: 16px;
          color: #fff;
          margin: 0;
        }

        .telegram {
          font-weight: 400;
          font-size: 16px;
          color: $secondary-text;
          margin: 0;
          cursor: pointer;
        }

        .telegram-white {
          color: #fff;
        }
      }

      .contact-container:not(:last-child) {
        margin-bottom: 20px;
      }

      .language-switcher {
        margin-top: 10px;

        .change-lang {
          font-size: 16px;
          color: #fff;
        }

        .change-lang:visited,
        .change-lang:focus,
        .change-lang:active {
          color: #fff;
          outline: none;
        }

        // .russian-version {
        //   padding-left: 25px;
        //   background-image: url('../images/russian-flag.png');
        //   background-position: left center;
        //   background-repeat: no-repeat;
        //   background-size: 16px;
        // }

        // .english-version {
        //   padding-left: 25px;
        //   background-image: url('../images/american-flag.png');
        //   background-position: left center;
        //   background-repeat: no-repeat;
        //   background-size: 16px;
        // }
      }
    }

    .nav-col:not(:last-child) {
      margin-right: 80px;
    }
  }
}


// -------------------------------

@keyframes background-green-color {
  0% {
    background-color: #2a7151;
  }

  50% {
    background-color: #46cf79;
  }

  100% {
    background-color: #2a7151;
  }
}

.about-me {
  background-color: $main-background;

  .content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 100px;
  }

  .about-title {
    font-weight: 400;
    font-size: 60px;
    color: #fff;
    text-align: center;
    margin: 0;
  }

  .subtitle {
    font-weight: 400;
    font-size: 16px;
    color: $secondary-text;
    text-align: center;
    margin: 0;
    margin-bottom: 80px;
  }

  .block {
    background-image: linear-gradient(0deg, transparent 24%, $pattern-color 25%, $pattern-color 26%, transparent 27%, transparent 74%, $pattern-color 75%, $pattern-color 76%, transparent 77%, transparent),
      linear-gradient(90deg, transparent 24%, $pattern-color 25%, $pattern-color 26%, transparent 27%, transparent 74%, $pattern-color 75%, $pattern-color 76%, transparent 77%, transparent);
    background-size: 55px 55px;
    border: 1px solid $pattern-color;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 50px;

    .title {
      font-weight: 400;
      font-size: 28px;
      color: #fff;
      margin: 0;
      margin-bottom: 20px;
      text-align: left;
    }

    .description {
      font-weight: 400;
      font-size: 16px;
      line-height: 1.7;
      color: $secondary-text;
      margin: 0;
    }

    .links {
      position: relative;
      display: flex;
      flex-direction: row;
      justify-content: center;
      z-index: 1;

      .link:not(:last-child) {
        margin-right: 20px;
      }
    }

    .description-white {
      color: #fff;
    }

    .achievement {
      display: flex;
      flex-direction: row;
      align-items: center;

      .image {
        margin-right: 10px;
      }

      .title {
        font-weight: 400;
        font-size: 20px;
        color: #fff;
        margin: 0;
        text-align: left;
        margin-bottom: 5px;

        display: flex;
        flex-direction: row;
      }

      .description {
        line-height: 1;
      }

      .year {
        font-weight: 400;
        font-size: 12px;
        color: $main-color;
        border: 1px solid $main-color;
        border-radius: 100px;
        padding: 3px 10px 0 10px;
        margin: 0;
        margin-bottom: 3px;
        margin-left: 5px;
      }

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

    .achievement:not(:last-child) {
      margin-bottom: 30px;
    }

    .skills {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      .skill {
        font-weight: 400;
        font-size: 12px;
        color: #fff;
        border: 1px solid $main-color;
        border-radius: 100px;
        padding: 4px 20px;
        margin-bottom: 10px;
        cursor: pointer;
        transition: all .2s;
      }

      .skill:not(:last-child) {
        margin-right: 15px;
      }

      .skill:hover,
      .skill:active,
      .skill:focus {
        background-color: #262e44;
      }
    }

    .info {
      display: flex;
      flex-direction: row;

      .image {
        margin-right: 10px;
      }

      .text {
        display: flex;
        flex-direction: column;

        .description {
          font-weight: 400;
          font-size: 12px;
          line-height: 1;
          color: $secondary-text;
          margin-bottom: 10px;
        }

        .value {
          font-weight: 400;
          font-size: 16px;
          line-height: 1;
          color: #fff;

          display: flex;
          flex-direction: row;
          align-items: center;
        }

        .status {
          display: block;
          animation: background-green-color 2s infinite;
          border-radius: 50%;
          width: 10px;
          height: 10px;
          margin-left: 7px;
        }
      }
    }

    .info:not(:last-child) {
      margin-bottom: 30px;
    }

    .interests {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      .interest {
        font-weight: 400;
        font-size: 12px;
        color: #fff;
        border: 1px solid $main-color;
        border-radius: 100px;
        padding: 4px 20px;
        margin-bottom: 10px;
        cursor: pointer;
        transition: all .2s;
      }

      .interest:not(:last-child) {
        margin-right: 15px;
      }

      .interest:hover,
      .interest:active,
      .interest:focus {
        background-color: #262e44;
      }
    }
  }
}

.custom-modal {
  section {
    margin: 0;
  }

  .feedback {
    margin-top: 10px;
  }

  .custom-modal-container {
    .title {
      font-weight: 400;
      font-size: 30px;
      color: #fff;
      text-align: center;
      margin: 0;
      margin-bottom: 20px;
    }

    .swiper {
      border-radius: 15px;
      margin-right: 20px;
    }

    .subtitle {
      font-weight: 400;
      font-size: 18px;
      color: $secondary-text;
    }

    .date {
      font-weight: 400;
      font-size: 16px;
      color: $secondary-text;
    }

    .top-content {
      display: flex;
      flex-direction: row;
      margin-bottom: 40px;

      .right-side {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .description {
        font-weight: 400;
        font-size: 14px;
        color: #fff;
      }

      .link {
        a {
          font-weight: 400;
          font-size: 16px;
          color: #fff;
        }

        a:visited {
          color: #fff;
        }
      }

      .link:hover,
      .link:active,
      .link:focus {
        box-shadow: none;
      }

      .skills {
        display: flex;
        flex-direction: column;
        margin-top: 5px;

        .skills-cards {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;

          .skill-card {
            font-weight: 400;
            font-size: 14px;
            color: #fff;
            border: 1px solid $main-color;
            border-radius: 100px;
            padding: 4px 20px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all .2s;
          }

          .skill-card:not(:last-child) {
            margin-right: 15px;
          }

          .skill-card:hover,
          .skill-card:active,
          .skill-card:focus {
            background-color: #262e44;
          }
        }
      }
    }

    .bottom-content {
      .description {
        font-weight: 400;
        font-size: 13px;
        color: #fff;
      }

      .work-list {
        margin: 0;
        padding-bottom: 0;
        padding-left: 15px;
      }

      .work {
        list-style-type: none;
        font-weight: 400;
        font-size: 13px;
      }
    }
  }
}

#can-copy {
  cursor: pointer;
}


@media(max-width: 1200px) {
  .portfolio {
    .portfolio-cards {
      .portfolio-card {
        padding-right: 160px;
      }
    }
  }
}

@media(max-width: 992px) {
  .main {
    flex-direction: column;
    align-items: center;

    .left-side {
      .description {
        margin-bottom: 40px;
      }
    }

    .right-side {
      .circle-1 {
        top: 50%;
        left: 33%;
      }
    }
  }

  .portfolio {
    .portfolio-cards {
      .portfolio-card {
        margin-right: 20px;
        padding-right: 120px;

        .title {
          font-size: 18px;
        }

        .description {
          font-size: 12px;
        }
      }
    }
  }

  .feedback {
    .feedback-content {
      flex-direction: column;

      .left-side {
        margin-bottom: 30px;
      }

      .right-side {
        .top-side {
          margin-bottom: 30px;
        }
      }
    }
  }

  .custom-modal-content {
    height: 85%;
    overflow: auto;
  }

  .custom-modal {
    .custom-modal-container {
      .top-content {
        flex-direction: column;

        .left-side {
          margin-bottom: 20px;
        }

        .right-side {
          .skills {
            margin-bottom: 20px;
          }

          .short-description {
            margin-bottom: 20px;
          }
        }
      }
    }
  }

  .about-me {
    .block {
      .title {
        font-size: 20px;
      }

      .description {
        font-size: 14px;
      }

      .achievement {
        .title {
          align-items: center;
          font-size: 16px;
        }
      }

      .interests {
        .interest {
          text-align: center;
        }
      }

      .info {
        .text {
          .vaLue {
            font-size: 14px;
          }
        }
      }
    }
  }
}

@media(max-width: 768px) {
  .footer {
    .container-fluid {
      flex-direction: column;
      align-items: center;
      background-position: bottom center;

      .left-side {
        align-items: center;
        margin-bottom: 50px;

        .main-title {
          margin-bottom: 20px;
        }

        .slogan-container {
          width: unset;
        }
      }

      .right-side {
        justify-content: center;
      }
    }
  }

  .portfolio {
    .portfolio-cards {
      .portfolio-card {
        width: 100%;
      }
    }
  }

  .about-me {
    .content {
      flex-direction: column;
      margin-bottom: 50px;
    }

    .subtitle {
      margin-bottom: 40px;
    }

    .block {
      margin-bottom: 30px;
    }
  }
}

@media(max-width: 576px) {
  .header {
    margin-top: 0;
    margin-bottom: 40px;

    .container {
      flex-direction: column;
      padding: 15px 0;

      .title {
        margin-bottom: 10px;
      }
    }
  }

  section {
    margin-bottom: 50px;
  }

  .main {
    .left-side {
      .title {
        font-size: 40px;
      }
    }

    .right-side {
      .skills-cards {
        grid-template-columns: repeat(2, 1fr);
      }

      .circle-1 {
        left: 0;
      }
    }
  }

  .portfolio {
    .title {
      font-size: 30px;
      margin-bottom: 20px;
    }

    .portfolio-cards {
      .portfolio-card {
        .title {
          font-size: 16px;
        }

        .description {
          font-size: 11px;
        }
      }
    }
  }

  .feedback {
    .title {
      font-size: 30px;
      margin-bottom: 20px;
    }

    .feedback-content {
      .right-side {
        .bottom-side {
          .contact {
            flex-direction: column;

            img {
              margin-bottom: 20px;
            }
          }
        }
      }
    }
  }

  .footer {
    text-align: center;

    .container-fluid {
      .right-side {
        flex-direction: column;
      }

      .nav-col:not(:last-child) {
        margin: 0;
        margin-bottom: 50px;
      }
    }
  }

  .custom-modal-content {
    width: 100%;
    height: 100%;
  }
}