:root {
  --main-color: #f8ed1c;
  --text-color: #000;
}

@media (max-width: 1024px) {
  p.soudan {
    padding: 0 20px;

    span {
      font-size: 16px;
    }
  }

  .breadcrumbs {
    margin-bottom: 30px;
  }

  header {
    height: 50px;

    nav {
      height: auto;

      &.slide {
        display: block;

        h1 {
          line-height: 50px;
          margin: 0;
          text-align: center;
        }

        ul {
          justify-content: end;
          background: #fff;
          padding: 0;

          li {
            padding: 0 2%;
            display: flex;
            align-items: center;

            a {
              padding: 0 10px;
            }

            &::after {
              height: 1px;
              transform: translateY(-5px);
            }
          }
        }
      }
    }

    @media (max-width: 768px) {
      height: 50px;

      nav {
        display: block;

        &.slide {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-right: 20px;

          h1 {
            margin: 0;
            flex: 1;

            a {
              font-size: clamp(
                1.25rem,
                calc(0.682rem + 2.424vw),
                2.5rem
              ); /* min: 20px, max: 40px */
            }
          }

          div.menu {
            padding: 10px 0;
            background: #ffffff;

            div.menu_btn {
              width: 25px;
              height: 25px;
              cursor: pointer;
              margin: auto;
              transition: 0.3s;

              span {
                border-top: 3px solid black;
                display: block;
                margin-bottom: 6px;
                transition: 0.3s;
              }

              &.on {
                span {
                  &.top {
                    transform: rotate(45deg) translate(12.5px);
                  }

                  &.middle {
                    opacity: 0;
                  }

                  &.bottom {
                    transform: rotate(-45deg) translate(12.5px);
                    margin-bottom: 0;
                  }
                }
              }
            }
          }

          ul {
            height: auto;
            width: 100%;
            background: #fff;
            transition: 0.4s;
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 50px;
            left: 100%;

            li {
              text-align: center;
              padding: 0;

              &:last-child {
                background: none;

                a {
                  background: #f8ed1c;
                }
              }

              a {
                width: 100%;
              }
            }

            &.on {
              left: 0;
            }
          }
        }

        ul {
          padding-bottom: 30px;

          li {
            height: 60px;

            a {
              font-size: 16px;
              display: inline-block;
            }
          }
        }
      }
    }
  }

  section {
    &#hero {
      margin-bottom: 50px;

      .title-content {
        margin-left: 5%;

        p.main-title {
          font-size: 7.5vw;
        }

        p.catch {
          .br-span {
            display: inline-block;
            font-size: clamp(
              1rem,
              calc(0.773rem + 0.97vw),
              1.5rem
            ); /* min: 16px, max: 24px */
          }
        }
      }

      @media (max-width: 768px) {
        margin-bottom: 50px;
        max-height: 700px;

        .title-content {
          margin-top: 0;

          p.catch {
            .br-span {
              font-size: clamp(
                0.875rem,
                calc(0.705rem + 0.727vw),
                1.25rem
              ); /* min: 14px, max: 20px */
            }
          }
        }
      }
    }

    &#about {
      div.wrap {
        width: 100%;

        div.flex {
          flex-direction: column;

          div.content {
            padding: 0 5%;
            width: 100%;

            img {
              margin-bottom: 30px;
              padding: 0 20%;
            }
          }
        }
      }
      @media (max-width: 768px) {
        div.wrap {
          padding-top: 50px;
          padding-bottom: 60px;

          div.flex {
            flex-direction: column;

            div.content {
              padding: 0 5%;
              width: 100%;

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

    &#about,
    &#skills,
    &#works,
    &#blog,
    &#contact,
    &#price,
    &#detail {
      h2 {
        font-size: 1.8rem;
        margin-bottom: 20px;

        span {
          font-size: 0.9rem;
        }
      }

      h3 {
        font-size: 1.3rem;
        margin-bottom: 30px;
        margin-top: -10px;
        text-align: center;

        span {
          font-size: 0.9rem;
        }
      }

      p {
        margin-bottom: 20px;
      }

      div.container {
        width: 100%;
        margin-bottom: 70px;
        flex-direction: column;
        padding: 0 20px;

        div.content {
          padding: 0 5%;

          &:first-child {
            width: 50%;
            margin: auto;
            margin-bottom: 50px;
          }

          &:last-child {
            width: 100%;
          }

          ul {
            margin: auto;
            margin: 50px 0;
            text-align: center;

            li {
              margin: auto;

              &:first-child {
                margin: auto;
              }
            }
          }
        }
      }
    }

    &#detail {
      padding: 100px 20px;

      article {
        h2 {
          font-size: 1.5rem;
        }

        h3 {
          font-size: 1.3rem;
        }

        p.category {
          margin-bottom: 30px;
        }
      }
    }

    &#works,
    &#blog,
    &#price {
      margin-bottom: 30px;

      div.content {
        ul {
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 60px;
          padding: 0 2%;

          li {
            width: 50%;
            padding: 0 1%;
          }
        }
      }
    }

    &#works.sub,
    &#detail {
      padding-top: 100px;

      @media (max-width: 768px) {
        padding-top: 0;
      }
    }

    &#works.sub,
    &#detail {
      nav {
        ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 1em;
          margin: 0;
          margin-bottom: 30px;

          li {
            padding: 0;
            margin: 0;
            margin-bottom: 10px;

            a {
              display: block;
              padding: 10px 20px;

              &.btn {
                font-size: 12px;
              }
            }
          }
        }
      }
    }

    &#price {
      h2 {
        margin-bottom: -50px;
      }

      & > div {
        padding-top: 100px;
      }
    }

    &#skills {
      h2 {
        margin-bottom: 30px;
      }
    }

    &#contact {
      p {
        margin-bottom: 30px;
      }

      ul {
        li {
          a {
            img {
              width: 60px;
            }
          }
        }
      }
    }
  }

  footer {
    small {
      p {
        font-size: 14px;
      }
    }
  }

  .flat {
    .column {
      .column-item {
        span.price-value {
          font-size: 24px;
        }

        .column-item-data {
          font-size: 14px !important;
        }
      }

      .column-item-header {
        padding: 20px;

        span.pricingtable-header-name {
          font-size: 18px;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  html {
    font-size: 15px;
  }

  p.soudan {
    padding: 0 20px;

    span {
      font-size: 16px;
    }
  }

  .breadcrumbs {
    margin-bottom: 30px;
    font-size: 12px;
  }

  section {
    padding-top: 50px;

    p.works {
      text-align: center;
    }

    &#about,
    &#skills,
    &#works,
    &#contact,
    &#detail,
    &#price,
    &#blog {
      padding-bottom: 50px;

      h2 {
        font-size: 1.8rem;
        margin-bottom: 20px;

        span {
          font-size: 1rem;
        }
      }

      h3 {
        font-size: 1.3rem;
        margin-bottom: 20px;
        margin-top: -10px;
        text-align: center;

        span {
          font-size: 1rem;
        }
      }

      p {
        margin-bottom: 20px;
        font-size: 14px;
      }

      div.container {
        width: 100%;
        margin-bottom: 50px;
        flex-direction: column;
        padding: 0 20px;

        div.content {
          padding: 0;

          &:first-child {
            width: 50%;
            margin: auto;
            margin-bottom: 50px;
          }

          &:last-child {
            width: 100%;
          }

          ul {
            margin: 50px 0;
            flex-direction: column;
            text-align: center;

            li {
              &:first-child {
                margin: 0;
                margin-bottom: 50px;
              }
            }
          }
        }
      }

      .cat-ttl {
        font-size: 1.2rem;
      }
    }

    &#detail {
      article {
        h2 {
          font-size: 1.2rem;
        }

        h3 {
          font-size: 20px;
        }
      }
    }

    &#works,
    &#blog {
      margin-bottom: 30px;

      div.content {
        ul {
          display: block;
          margin-bottom: 60px;

          li {
            width: 100%;
            padding: 0 3%;
          }
        }
      }
    }

    &#detail {
      padding-top: 0;

      article {
        padding-bottom: 0;

        div.content {
          ul {
            li {
              font-size: 0.9rem;
            }
          }
        }
      }
    }

    &#works.sub,
    &#detail {
      nav {
        ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 1em;
          margin: 0;
          margin-bottom: 30px;

          li {
            padding: 0;
            margin: 0;

            a {
              display: block;
              padding: 10px 20px;
              margin: 0;

              &.btn {
                font-size: 12px;
              }
            }
          }
        }
      }
    }

    &#price {
      width: 90%;
      margin: auto;
      padding-bottom: 100px;
      padding-top: 50px;

      h2 {
        margin-bottom: -50px;
      }

      .pricingtable .column {
        margin-bottom: 20px !important;
        width: 100% !important;
      }
    }

    &#skills {
      h2 {
        margin-bottom: 30px;
      }
    }

    &#contact {
      padding-bottom: 100px;

      p {
        margin-bottom: 30px;
      }

      ul {
        li {
          a {
            img {
              width: 60px;
            }
          }
        }
      }
    }
  }

  footer {
    small {
      font-size: 0.8rem;
    }
  }

  .flat {
    .column {
      width: 70% !important;

      .column-item {
        span.price-value {
          font-size: 24px;
        }
      }

      .column-item-header {
        padding: 20px;

        span.pricingtable-header-name {
          font-size: 18px;
        }
      }
    }
  }
}