@font-face {
  font-family: Inter;
  src: url("TikTokSans-Medium.ttf");
}

@font-face {
  font-family: InterBold;
  src: url("TikTokSans_18pt_Expanded-SemiBold.ttf");
}

@color-beige: #D9D5D1;
@color-green: #919E90;
@color-gray: #636363;
@color-white: #FAFAFA;
@color-black: #343434;

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.hidden {
  display: none !important;
}

/* typography structure — sizes are set per breakpoint below */
.make-h1(@size) {
  font-family: Inter, serif;
  font-size: @size;
  letter-spacing: 1%;
  line-height: 130%;
  text-transform: uppercase;
}

.make-h2(@size) {
  font-family: InterBold, serif;
  font-size: @size;
  letter-spacing: 5%;
  line-height: 130%;
  text-transform: uppercase;
}

.make-h3(@size) {
  font-family: InterBold, serif;
  font-size: @size;
  letter-spacing: 10%;
  line-height: 150%;
  text-transform: uppercase;
}

.make-p(@size) {
  font-family: Inter, serif;
  font-size: @size;
  letter-spacing: 0;
  line-height: 165%;
}

.make-text-btn(@size) {
  font-family: InterBold, serif;
  font-size: @size;
  letter-spacing: 10%;
  line-height: 150%;
  text-transform: uppercase;
}

/* button colors — identical across all breakpoints */
.btn-primary {
  background-color: @color-gray;
  color: @color-white;
}

.btn-light {
  background-color: @color-white;
  color: @color-black;
}

/* button structure — font size is set per breakpoint */
.btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* education button — identical across desktop and tablet */
.education-btn {
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: 1px;
  text-decoration-color: @color-gray;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* menu item hover — identical across all nav contexts */
.menu-container .menu-item:hover {
  color: @color-black;
  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-thickness: 1px;
}

/* desktop */
@media screen and (width >= 1440px) {
  .grid {
    margin: 0 auto;
    padding: 20px 80px;
    width: 1440px;

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: auto;
    gap: 20px;
  }


  .container {
    min-width: 1440px;
  }

  .h1 { .make-h1(36px); }
  .h2 { .make-h2(18px); }
  .h3 { .make-h3(9px); }
  .p { .make-p(12px); }
  .text-btn { .make-text-btn(9px); }

  .btn-group {
    display: flex;
    flex-direction: row;
    gap: 16px;
  }

  .btn {
    .text-btn();
  }

  .btn-text {
    padding: 16px 24px;
  }

  .menu-container {
    .container();
    background-color: @color-beige;

    .menu {
      .h3();
      .grid();

      .logo {
        color: @color-black;
        grid-column: 1 / span 2;
        text-decoration: none;
      }

      .menu-items {
        grid-column: 5 / -1;
        display: flex;
        gap: 20px;

        .menu-item {
          color: @color-black;
          text-decoration: none;
        }
      }
    }
  }

  .about-container {
    .container();
    background-color: @color-beige;

    .about {
      .grid();

      .header {
        .h1();
        display: flex;
        flex-direction: column;
        grid-column: 1 / span 12;

        .highlight {
          color: @color-green;
        }

        z-index: 1;
        position: relative;

        .about-image {
          line-height: 0;
          top: 90px;
          left: -16px;
          z-index: -1;
          position: absolute;
        }
      }

      .description-header {
        position: relative;
        grid-column: 8 / -1;
        display: flex;
        flex-direction: column;
        .h2();
      }

      .description-text {
        grid-column: 8 / -1;
        .p();
      }

      .description-buttons {
        grid-column: 8 / -1;
      }

      .description-bullets {
        margin-top: 200px;
        grid-column: 8 / -1;
        display: flex;
        flex-direction: column;
        gap: 8px;
        position: relative;
        .h3();
      }
    }
  }


  .education {
    position: absolute;
    border: 1px solid @color-gray;
    background-color: @color-white;
    color: @color-black;
    padding: 30px 30px 20px;
    width: 800px;
    top: 110px;
    left: -200px;
    z-index: 1;
    .education-inner {

      display: flex;
      flex-direction: column;

      .page-header {
        .h2();
      }

      .close {
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;
      }

      .bullets {
        padding-top: 20px;
        padding-left: 20px;
        .h3();

        .bullet {
          display: list-item;

          b {
            font-weight: bold;
          }
        }
      }

      .text {
        display: flex;
        flex-direction: column;
        padding-top: 20px;
        padding-left: 20px;
        .h3();
      }
    }
  }

  .inquiry-container {
    .container();
    background-color: @color-white;

    .inquiry {
      .grid();
      padding-bottom: 80px;

      .inquiry-bullets {
        margin-top: 100px;
        margin-bottom: 140px;
        grid-column: 8 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
        gap: 16px;

        .inquiry-bullet {
          display: flex;
          flex-direction: row;
          gap: 16px;
          .h3();
        }
      }

      .inquiry-page-header {
        grid-column: 1 / span 2;
        .h3();
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
      }

      .inquiry-header {
        grid-column: 1 / -1;
        .h1();

        .highlight {
          color: @color-green;
        }
      }

      .inquiry-text {
        grid-column: 1 / span 6;
        .p();

        p {
          margin: 10px 0;
        }
      }
    }
  }

  .troubles-container {
    .container();
    background-color: @color-green;
    color: @color-white;

    .troubles {
      .grid();
      padding-top: 60px;
      padding-bottom: 60px;

      .header {
        grid-column: 1 / span 6;
        .h2();
      }

      .trouble-bullets {
        grid-column: 1 / span 6;
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-left: 20px;
        .p();

        .trouble-bullet {
          display: list-item;

        }
      }

      .trouble-buttons {
        grid-column: 8 / -1;
        display: flex;
        flex-direction: column;

        .description {
          margin-top: auto;
          margin-bottom: 20px;
          .p();
        }
      }
    }
  }

  .process-container {
    .container();
    background-color: @color-white;
    color: @color-black;
    padding-top: 80px;
    padding-bottom: 80px;

    .process {
      .grid();

      .page-header {
        grid-column: 1 / -1;
        .h3();
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
      }

      .header {
        grid-column: 1 / span 8;
        grid-row: 2;
        .h1();
        display: flex;
        flex-direction: column;

        .highlight {
          color: @color-green;
        }
      }

      .text {
        grid-column: 8 / -1;
        grid-row: 2 / span 2;
        .p();

        p {
          margin-bottom: 10px;
        }
      }
    }
  }

  .solution-container {
    .container();
    background-color: @color-white;
    color: @color-black;
    padding-bottom: 80px;

    .solution {
      .grid();

      .page-header {
        grid-column: 8 / -1;
        .h3();
        padding-top: 80px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
      }

      .header {
        grid-column: 8 / -1;
        .h1();
        display: flex;
        flex-direction: column;

        .highlight {
          color: @color-green;
        }
      }

      .header-wide {
        grid-column: 1 / -1;
        .h1();
        display: flex;
        flex-direction: column;

        .highlight {
          color: @color-green;
        }
      }

      .text {
        grid-column: 8 / -1;
        grid-row: 3 / span 1;
        .p();

        p {
          margin-bottom: 10px;
        }
      }

      .image {
        background-color: @color-beige;
        grid-column: 1 / span 6;
        grid-row: 1 / span 4;
        line-height: 0;
        display: flex;
        justify-content: center;
        padding-bottom: 200px;
        padding-top: 180px;

        img {
          max-width: 220px;
          max-height: 280px;
          transform: rotateY(180deg);
        }
      }
    }
  }

  .conditions-container {
    .container();
    background-color: @color-green;
    color: @color-white;

    .conditions {
      .grid();
      padding-top: 60px;
      padding-bottom: 60px;

      .page-header {
        grid-column: 1 / span 6;
        .h3();
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
      }

      .price-header {
        grid-column: 1 / span 6;
        .h2();

        .price-value {
          padding: 10px 10px;
          white-space: nowrap;
          display: flex;
          flex-direction: column;
          gap: 6px;
          place-self: start;
          .h3();
        }
      }

      .conditions-bullets {
        grid-column: 7 / -1;
        grid-row: 2 / span 2;
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-left: 20px;
        .p();

        .conditions-bullet {
          display: list-item;
        }
      }

      .buttons {
        grid-column: 7 / -1;
        display: flex;
        flex-direction: column;

        .description {
          margin-top: auto;
          margin-bottom: 20px;
          .p();
        }
      }
    }
  }

  .footer-container {
    .container();
    background-color: @color-gray;
    color: @color-white;
    padding-top: 60px;
    padding-bottom: 40px;

    .footer {
      .grid();

      .logo {
        .h2();
        color: @color-white;
        grid-column: 1 / span 5;
        text-decoration: none;
      }

      .menu-items {
        .h3();
        grid-column: 10 / -1;
        display: flex;
        flex-direction: column;
        gap: 20px;

        .menu-item {
          color: @color-white;
          text-decoration: none;
        }
      }
    }
  }
  .mobile:not(.desktop) { display: none !important; }
  .tablet:not(.desktop) { display: none !important; }
}

/* tablet */
@media screen and (768px <= width < 1440px) {
  .mobile:not(.tablet)  { display: none !important; }
  .desktop:not(.tablet) { display: none !important; }

  .grid {
    margin: 0 auto;
    padding: 20px 40px;
    width: 768px;

    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: auto;
    gap: 20px;
  }

  .container {
    min-width: 768px;
  }

  .h1 { .make-h1(30px); }
  .h2 { .make-h2(18px); }
  .h3 { .make-h3(9px); }
  .p { .make-p(12px); }
  .text-btn { .make-text-btn(9px); }

  .btn-group {
    display: flex;
    flex-direction: row;
    gap: 12px;
  }

  .btn {
    .text-btn();
  }

  .btn-text {
    padding: 16px 8px;
  }

  .menu-container {
    .container();
    background-color: @color-beige;

    .menu {
      .h3();
      .grid();

      .logo {
        color: @color-black;
        grid-column: 1 / span 2;
        text-decoration: none;
      }
      .menu-button {
        grid-column: 8 / span 1;
        cursor: pointer;
      }

      .menu-items {
        grid-column: 5 / -1;
        display: flex;
        gap: 20px;

        .menu-item {
          color: @color-black;
          text-decoration: none;
        }
      }
    }

    .mobile-menu {
      position: fixed;
      background-color: transparent;

      top: 0;
      left: 0;
      bottom: 0;
      right: 0;

      z-index: 2;
      overflow: scroll;
      display: grid;
      grid-template-columns: 1fr 1fr;

      .mobile-menu-shadow {
        background-color: rgb(0 0 0 / 50%);
      }

      .mobile-menu-inner {
        .grid();
        .h3();
        background-color: @color-beige;
        opacity: 100%;
        height: 100%;
        width: 100%;
        margin-left: auto;
        margin-right: 0;

        grid-template-rows: 80px auto 50px;

        gap: 16px;
        padding: 16px 40px 30px;

        .logo {
          grid-column: 1 / span 3;
          grid-row: 1;
          text-decoration: none;
          color: @color-black;
        }

        .menu-button {
          grid-column: 8 / span 1;
          grid-row: 1;
          padding-right: 8px;
          justify-self: end;
          font-size: 19px;
          cursor: pointer;
        }

        .menu-items {
          align-self: start;
          justify-self: center;
          place-self: start;
          grid-column: 1 / -1;
          grid-row: 2;
          display: flex;
          flex-direction: column;
          gap: 36px;
          padding-left: 8px;

          .menu-item {
            color: @color-black;
            text-decoration: none;
          }
        }

        .btn-group {
          grid-column: 1 / -1;
        }
      }
    }

  }

  .about-container {
    .container();
    background-color: @color-beige;

    .about {
      .grid();

      .header {
        .h1();
        div {
          display: inline-block;
        }
        grid-column: 1 / -1;
        grid-row: 1;

        .highlight {
          color: @color-green;
        }

        z-index: 1;
        position: relative;

        .about-image {
          line-height: 0;
          top: 115px;
          left: -40px;
          z-index: -1;
          position: absolute;
          img {
            width: 374px;
          }
        }
      }

      .description-header {
        position: relative;
        grid-column: 5 / -1;
        grid-row: 2;
        div {
          display: inline-block;
        }
        .h2();
      }

      .description-text {
        grid-column: 5 / -1;
        grid-row: 3;
        .p();
      }

      .description-buttons {
        grid-column: 5 / -1;
      }

      .description-bullets {
        margin-top: 75px;
        grid-column: 5 / -1;
        display: flex;
        flex-direction: column;
        gap: 8px;
        position: relative;
        .h3();
      }
    }
  }


  .education {
    position: absolute;
    border: 1px solid @color-gray;
    background-color: @color-white;
    color: @color-black;
    padding: 30px 30px 20px;
    width: 400px;
    top: -190px;
    left: -100px;
    z-index: 1;
    .education-inner {

      display: flex;
      flex-direction: column;

      .page-header {
        .h2();
      }

      .close {
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;
      }

      .bullets {
        padding-top: 20px;
        padding-left: 20px;
        .h3();

        .bullet {
          display: list-item;

          b {
            font-weight: bold;
          }
        }
      }

      .text {
        display: flex;
        flex-direction: column;
        padding-top: 20px;
        padding-left: 20px;
        .h3();
      }
    }
  }

  .inquiry-container {
    .container();
    background-color: @color-white;

    .inquiry {
      .grid();
      padding-bottom: 80px;

      .inquiry-bullets {
        margin: 30px 80px 80px;
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
        gap: 16px;

        .inquiry-bullet {
          display: flex;
          flex-direction: row;
          gap: 16px;
          .h3();
        }
      }

      .inquiry-page-header {
        grid-column: 1 / span 2;
        .h3();
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        white-space: nowrap;
      }

      .inquiry-header {
        grid-column: 1 / -1;
        .h1();
        .highlight {
          color: @color-green;
        }
        div {
          display: inline;
        }
      }

      .inquiry-text {
        grid-column: 1 / span 6;
        .p();

        p {
          margin: 10px 0;
        }
      }
    }
  }

  .troubles-container {
    .container();
    background-color: @color-green;
    color: @color-white;

    .troubles {
      .grid();
      padding-top: 60px;
      padding-bottom: 60px;

      .header {
        grid-column: 1 / span 4;
        grid-row: 1;
        .h2();
      }

      .trouble-bullets {
        grid-column: 1 / span 4;
        grid-row: 2;
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-left: 20px;
        .p();

        .trouble-bullet {
          display: list-item;
        }
      }

      .trouble-buttons {
        grid-column: 5 / -1;
        grid-row: 1 / span 2;
        align-self: start;
        display: flex;
        flex-direction: column;

        .description {
          margin-top: auto;
          margin-bottom: 20px;
          .p();
        }
      }
    }
  }

  .process-container {
    .container();
    background-color: @color-white;
    color: @color-black;
    padding-top: 60px;
    padding-bottom: 60px;

    .process {
      .grid();

      .page-header {
        grid-column: 1 / -1;
        .h3();
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
      }

      .header {
        grid-column: 1 / span 7;
        grid-row: 2;
        .h1();
        display: flex;
        flex-direction: column;

        .highlight {
          color: @color-green;
        }
      }

      .text {
        grid-column: 4 / -1;
        grid-row: 3;
        .p();
        p {
          margin-bottom: 10px;
        }
      }
    }
  }

  .solution-container {
    .container();
    background-color: @color-white;
    color: @color-black;
    padding-bottom: 60px;

    .solution {
      .grid();

      .page-header {
        grid-column: 5 / -1;
        grid-row: 1;
        .h3();
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
      }

      .header {
        grid-row: 2;
        grid-column: 5 / -1;
        .h1();
        display: flex;
        flex-direction: column;

        .highlight {
          color: @color-green;
        }
      }

      .header-wide {
        grid-column: 1 / -1;
        .h1();
        display: block;
        div {
          display: inline;
        }
        .highlight {
          color: @color-green;
        }
      }

      .text {
        grid-column: 5 / -1;
        grid-row: 3;
        .p();

        p {
          margin-bottom: 10px;
        }
      }

      .image {
        background-color: @color-beige;
        grid-column: 1 / span 4;
        grid-row: 1 / span 4;
        line-height: 0;
        display: flex;
        justify-content: center;

        img {
          margin: auto auto;
          max-width: 150px;
          max-height: 190px;
          transform: rotateY(180deg);
        }
      }
    }
  }

  .conditions-container {
    .container();
    background-color: @color-green;
    color: @color-white;

    .conditions {
      .grid();
      padding-top: 60px;
      padding-bottom: 60px;

      .page-header {
        grid-column: 1 / span 4;
        grid-row: 1;
        .h3();
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
      }

      .price-header {
        grid-row: 2;
        grid-column: 1 / span 4;
        .h2();

        .price-value {
          padding: 10px 10px;
          white-space: nowrap;
          display: flex;
          flex-direction: column;
          gap: 6px;
          place-self: start;
          .h3();
        }
      }

      .conditions-bullets {
        grid-column: 5 / -1;
        grid-row: 1 / span 2;
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-left: 20px;
        .p();

        .conditions-bullet {
          display: list-item;
        }
      }

      .buttons {
        grid-column: 5 / -1;
        display: flex;
        flex-direction: column;

        .description {
          margin-top: auto;
          margin-bottom: 20px;
          .p();
        }
      }
    }
  }

  .footer-container {
    .container();
    background-color: @color-gray;
    color: @color-white;
    padding-top: 60px;
    padding-bottom: 40px;

    .footer {
      .grid();

      .logo {
        .h2();
        color: @color-white;
        grid-column: 1 / span 5;
        text-decoration: none;
      }

      .menu-items {
        .h3();
        grid-column: 10 / -1;
        display: flex;
        flex-direction: column;
        gap: 20px;

        .menu-item {
          color: @color-white;
          text-decoration: none;
        }
      }
    }
  }
}

/* mobile */
@media screen and (width < 768px) {
  .desktop:not(.mobile) { display: none !important; }
  .tablet:not(.mobile)  { display: none !important; }
  .grid {
    margin: 0 auto;
    padding: 16px 10px;
    width: 360px;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-rows: auto;
    gap: 20px;
  }

  .container {
    width: 100%;
    height: auto;
  }

  .h1 { .make-h1(23px); }
  .h2 { .make-h2(16px); }
  .h3 { .make-h3(10px); }
  .p { .make-p(14px); }
  .text-btn { .make-text-btn(10px); }

  .btn-group {
    display: flex;
    flex-direction: row;
    gap: 8px;
  }

  .btn {
    .text-btn();
  }

  .btn-text {
    padding: 16px 8px;
  }

  .menu-container {
    .container();
    background-color: @color-beige;

    .menu {
      .h3();
      .grid();

      .logo {
        color: @color-black;
        grid-column: 1;
        text-decoration: none;
      }

      .menu-button {
        grid-column: 4;
        cursor: pointer;
      }
    }

    .mobile-menu {
      position: fixed;
      background-color: @color-beige;

      top: 0;
      left: 0;
      bottom: 0;
      right: 0;

      z-index: 2;
      overflow: scroll;
      .mobile-menu-inner {
        .grid();
        .h3();
        height: 100%;

        grid-template-rows: 80px auto 50px;

        gap: 16px;
        padding: 16px 10px;

        .logo {
          grid-column: 1 / span 3;
          grid-row: 1;
          text-decoration: none;
          color: @color-black;
        }

        .menu-button {
          grid-column: 4 / span 1;
          grid-row: 1;
          padding-right: 8px;
          justify-self: end;
          font-size: 19px;
          cursor: pointer;
        }

        .menu-items {
          align-self: start;
          justify-self: center;
          place-self: start;
          grid-column: 1 / span 4;
          grid-row: 2;
          display: flex;
          flex-direction: column;
          gap: 36px;
          padding-left: 8px;

          .menu-item {
            color: @color-black;
            text-decoration: none;
          }

          .menu-item.game {
            padding-top: 40px;
            letter-spacing: 30%;

            span:nth-child(1) { color: #229ED9; }
            span:nth-child(2) { color: hotpink; }
            span:nth-child(3) { color: greenyellow; }
            span:nth-child(4) { color: orangered; }
          }
        }

        .btn-group {
          grid-column: 1 / -1;
        }
      }
    }
  }

  .about-container {
    .container();
    background-color: @color-beige;

    .about {
      .grid();

      .header {
        .h1();
        display: flex;
        flex-direction: column;
        grid-column: 1 / -1;
        grid-row: 1;

        .highlight {
          color: @color-green;
        }

        z-index: 1;
        position: relative;

        .about-image {
          position: absolute;
          line-height: 0;
          top: 90px;
          left: -10px;
          z-index: -1;
          img {
            width: 360px;
            //height: 487px;
          }
        }
      }

      .description-header {
        padding-top: 60px;
        grid-row: 4;
        position: relative;
        grid-column: 1 / -1;
        .h2();
      }

      .description-text {
        grid-row: 5;
        grid-column: 1 / -1;
        .p();
      }

      .description-buttons {
        z-index: 1;
        grid-column: 1 / -1;
        grid-row: 3;
        a.btn-primary {
          background-color: transparent;
          color: @color-white;
          border: 1px solid @color-white;
        }
      }

      .description-bullets {
        z-index: 1;
        margin-bottom: 210px;
        grid-column: 1 / span 2;
        grid-row: 2;
        color: @color-green;
        display: flex;
        flex-direction: column;
        gap: 8px;
        position: relative;
        .h3();
      }
    }
  }


  .education {
    position: fixed;
    background-color: @color-white;
    color: @color-black;
    display: grid;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    .education-inner {

      .h3();
      .grid();

      grid-template-rows: 30px auto 80px 50px;
      gap: 16px;
      padding: 16px 10px;

      overflow: scroll;

      .page-header {
        grid-column: 1 / span 3;
        grid-row: 1;
        text-decoration: none;
        color: @color-black;
        padding-left: 8px;
      }

      .close {
        grid-column: 4 / span 1;
        grid-row: 1;
        padding-right: 8px;
        justify-self: end;
        font-size: 19px;
        cursor: pointer;
      }

      .bullets {
        grid-column: 1 / -1;
        grid-row: 2;
        padding-left: 20px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        .h3();

        .bullet {
          display: list-item;

          b {
            font-weight: bold;
          }
        }
      }

      .text {
        grid-column: 1 / -1;
        grid-row: 3;
        display: flex;
        flex-direction: column;
        padding-top: 10px;
        padding-left: 20px;
        .h3();
      }

      .back {
        grid-column: 1 / -1;
        grid-row: 4;
      }
    }
  }

  .inquiry-container {
    .container();
    background-color: @color-white;

    .inquiry {
      .grid();
      padding-bottom: 60px;
      padding-top: 40px;

      .inquiry-bullets {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        gap: 16px;

        .inquiry-bullet {
          display: flex;
          flex-direction: row;
          gap: 16px;
          .h3();
        }
        .btn {
          margin-top: 20px;
        }
      }

      .inquiry-page-header {
        padding-top: 60px;
        grid-column: 1 / -1;
        .h3();
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
      }

      .inquiry-header {
        display: none;
        grid-column: 1 / -1;
        .h1();

        .highlight {
          color: @color-green;
        }
      }

      .inquiry-text {
        grid-column: 1 / -1;
        .p();

        p {
          margin: 10px 0;
        }
      }
    }
  }

  .troubles-container {
    .container();
    background-color: @color-green;
    color: @color-white;

    .troubles {
      .grid();
      padding-top: 60px;
      padding-bottom: 60px;

      .header {
        grid-column: 1 / span 4;
        .h2();
      }

      .trouble-bullets {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-left: 10px;
        .p();

        .trouble-bullet {
          display: list-item;

        }
        padding-bottom: 60px;
      }

      .trouble-buttons {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;

        .description {
          margin-top: auto;
          margin-bottom: 20px;
          .p();
        }
      }
    }
  }

  .process-container {
    .container();
    background-color: @color-white;
    color: @color-black;
    padding-top: 60px;

    .process {
      .grid();

      .page-header {
        grid-column: 1 / -1;
        .h3();
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
      }

      .header {
        grid-column: 1 / -1;
        .h1();
        display: flex;
        flex-direction: column;

        .highlight {
          color: @color-green;
        }
      }

      .text {
        grid-column: 1 / -1;
        .p();

        p {
          margin-bottom: 10px;
        }
      }
    }
  }

  .solution-container {
    .container();
    background-color: @color-white;
    color: @color-black;
    padding-bottom: 60px;
    padding-top: 60px;

    .solution {
      .grid();

      .page-header {
        grid-column: 1 / -1;
        .h3();
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
      }

      .header {
        grid-column: 1 / -1;
        .h1();
        display: flex;
        flex-direction: column;

        .highlight {
          color: @color-green;
        }
      }

      .header-wide {
        grid-column: 1 / -1;
        .h1();
        display: flex;
        flex-direction: column;

        .highlight {
          color: @color-green;
        }
      }

      .text {
        grid-column: 1 / -1;
        .p();

        p {
          margin-bottom: 10px;
        }
      }

      .image {
        background-color: @color-beige;
        grid-column: 1 / span 6;
        line-height: 0;
        display: flex;
        justify-content: center;
        padding-bottom: 200px;
        padding-top: 180px;

        img {
          max-width: 220px;
          max-height: 280px;
          transform: rotateY(180deg);
        }
      }
    }
  }

  .conditions-container {
    .container();
    background-color: @color-green;
    color: @color-white;

    .conditions {
      .grid();
      padding-top: 60px;
      padding-bottom: 60px;

      .page-header {
        grid-column: 1 / -1;
        .h3();
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
      }

      .price-header {
        grid-column: 1 / -1;
        .h2();

        .price-value {
          padding: 10px 0;
          white-space: nowrap;
          display: flex;
          flex-direction: column;
          gap: 6px;
          place-self: start;
          .h3();
        }
      }

      .conditions-bullets {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-left: 10px;
        .p();

        .conditions-bullet {
          display: list-item;
        }
      }

      .buttons {
        padding-top: 40px;
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;

        .description {
          margin-top: auto;
          margin-bottom: 20px;
          .p();
        }
      }
    }
  }

  .footer-container {
    .container();
    background-color: @color-gray;
    color: @color-white;
    padding-top: 60px;
    padding-bottom: 40px;

    .footer {
      .grid();

      .logo {
        .h2();
        color: @color-white;
        grid-column: 1 / -1;
        text-decoration: none;
      }

      .menu-items {
        .h3();
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        gap: 20px;

        .menu-item {
          color: @color-white;
          text-decoration: none;
        }
      }
    }
  }
}