:root {
  --text-color: var(--zinc-100);
  --background-color: #131513;

  --nav-text-color: var(--lime-100);
  --nav-background-color: var(--zinc-950);
  --nav-text-color-hover: white;
  --nav-background-color-hover: var(--zinc-700);
  --nav-text-color-current: var(--zinc-100);
  --nav-background-color-current: var(--zinc-800);
}

#hypno-coaching {
  color: var(--text-color);
  background-color: var(--zinc-900);

  h1 {
    text-align: center;
    margin: 0 auto;
    padding: var(--gap) 0;
  }

  section:not(:first-child) {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;

    padding: var(--gap);
    min-height: calc(100vh - 80px);

    article {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
    }
  }

  h2 {
    padding-bottom: 20px;
    color: white;
  }

  h3 {
    color: white;
  }

  p {
    font-family: var(--font-family-serif);
    font-size: var(--font-size-serif) !important;
  }

  .card-text {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    gap: var(--gap);
  }

  .card-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    mask-size: contain;
    mask-position: right;
    mask-repeat: no-repeat;
  }

  .bg-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    filter: brightness(0.5);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }

  .icon-button {
    width: 50px !important;
    height: 50px !important;
    padding: 7px;
    margin: var(--gap-x2) 0 0 0;
    user-select: none;
    cursor: pointer;
    color: var(--zinc-200);
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
    position: absolute;
    bottom: 0;
  }

  .icon-button:hover {
    color: var(--zinc-050);
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
  }

  .mdi-36px {
    font-size: 36px;
    height: 36px;
    line-height: 36px;
    vertical-align: middle;
  }
}

/* === #service-card01 ======================================================= */

#service-card01 {
  background-color: var(--zinc-900);

  article {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    align-content: center;
    gap: var(--gap);

    content {
      flex: 1 1;
      display: flex;
      flex-wrap: wrap;
      gap: var(--gap);
      flex-direction: row !important;
      align-items: stretch !important;

      .card-text {
        flex: 3 1;
        padding: var(--gap) 0;
      }

      .card-image {
        flex: 2 1;
        background-image: url("/pages/services/hypno-coaching/card01.jpg");
        mask-image: url("/pages/services/hypno-coaching/circle-right.svg");
        align-items: center;
      }
    }
  }
}

/* === #service-card02 ======================================================== */

#service-card02 {
  background-color: var(--zinc-800);
  padding: calc(var(--gap) * 3) var(--gap) !important;

  content {
    position: relative;

    .card-image {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 30%;
      background-image: url("/pages/services/hypno-coaching/card02.jpg");
      mask-image: none;
      align-items: center;
    }

    .card-text {
      margin-left: 30%;
      padding-left: var(--gap);
    }
  }
}

/* === #service-card03 ======================================================== */

#service-card03 {
  background-color: var(--zinc-900);
  padding: calc(var(--gap) * 3) var(--gap) !important;
  justify-content: flex-end !important;

  .bg-image {
    background-image: url("/pages/services/hypno-coaching/card03.jpg");
  }

  article {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--gap);

    content {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: center;
      gap: var(--gap-x2);

      > div {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: var(--gap);

        flex: 1 1 260px;
        text-align: left;

        * {
          text-align: left;

          p {
            font-family: var(--font-family-serif);
            font-size: 120% !important;
          }
        }
      }
    }
  }
}

/* === #service-card04 ======================================================== */

#service-card04 {
  background-color: var(--zinc800);
  padding: var(--gap) !important;
}

#service-card04 > .bg-image {
  background-image: url("/pages/services/hypno-coaching/card04.jpg");
}

#service-card04 article {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
}

#service-card04 content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}

#service-card04 content > div {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--gap);

  flex: 1 1 240px;
  text-align: left;
}

#service-card04 content > div > div:nth-child(1) {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#service-card04 content > div > div:nth-child(2) {
  padding: 0 20px 20px 20px;
  text-align: left;
}

#service-card04 content > div > p {
  font-family: var(--font-family-serif);
  font-size: 120% !important;
}

#service-card04 .arrow {
  position: relative;

  .front {
    position: absolute;
    top: 0;
    right: 0;
    width: 15px;
    height: 60px;
    background-image: url(/images/arrow-white-front.svg);
    background-size: initial;
    background-position: right center;
    background-repeat: no-repeat;
  }

  .middle {
    position: absolute;
    top: 0;
    left: 15px;
    right: 15px;
    height: 60px;
    background-image: url(/images/arrow-white-middle.svg);
    background-size: initial;
    background-position: center center;
    background-repeat: repeat-x;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .back {
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 60px;
    background-image: url(/images/arrow-white-back.svg);
    background-size: initial;
    background-position: left center;
    background-repeat: no-repeat;
  }
}

/* === #service-card05 ======================================================== */

#service-card05 {
  background-color: var(--zinc-900);
}

#service-card05 article {
  flex: 1 1;
}

#service-card05 content {
  flex: 1 1;
  gap: var(--gap);
  flex-direction: row !important;
  align-items: stretch !important;
}

#service-card05 .card-image {
  flex: 2 1;
  background-image: url("/pages/services/hypno-coaching/card05.jpg");
  mask-image: url("/pages/services/hypno-coaching/circle-left.svg");
  align-items: center;
}

#service-card05 .card-text {
  flex: 3 1;
  padding: var(--gap) !important;
}

#service-card05 .card-text > div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: var(--gap);
}

#service-card05 .card-text > div > div {
  flex: 1 1 260px;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  background-color: rgba(255, 255, 255, 0.25);
  padding: var(--gap);
  border-radius: 4px;
}

@media screen and (width < 600px) {
  #service-card05 .card-image {
    display: none;
  }
}

/* === #service-card06 ======================================================== */

#service-card06 {
  background-color: var(--zinc-800);
  padding: var(--gap) !important;

  h2{
    padding-bottom: 0;
    margin-bottom: 0;
  }

  article {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;

    content {
      position: relative;

      width: 100%;
      min-height: 600px;
      padding: var(--gap);
      gap: var(--gap);

      align-items: center !important;

      > div > p {
        font-family: var(--font-family-serif);
        font-size: 120% !important;
      }

      .I {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        margin: var(--gap);

        .I-content {
          position: relative;
          width: 300px;
          height: 300px;
          padding: var(--gap);
          margin: auto;
          background-image: url(/images/cycle-4-arrows-white.svg);
          background-position: center center;
          background-size: contain;
          background-repeat: no-repeat;
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-template-rows: 1fr 1fr;
          align-items: center;
          justify-content: center;
          align-content: center;
          justify-items: center;
          gap: 50px;
        }
      }

      .A,
      .B,
      .C,
      .D {
        display: flex;
        flex-direction: row;
        gap: var(--gap);
        justify-content: center;
        text-align: left;
        align-items: flex-start;
        width: 100%;
      }

      .A > div:nth-child(1),
      .B > div:nth-child(1),
      .C > div:nth-child(1),
      .D > div:nth-child(1) {
        display: block;
      }

      .A > div:nth-child(2),
      .B > div:nth-child(2),
      .C > div:nth-child(2),
      .D > div:nth-child(2) {
        width: 100%;
      }
    }
  }
}

@media screen and (width < 800px) {
  #service-card06 {
    article {
      content {
        .A,
        .B,
        .C,
        .D {
          display: flex;
          flex-direction: row;
          gap: var(--gap);
          justify-content: center;
          text-align: left;
          align-items: flex-start;
          width: 100%;
        }

        .A > div:nth-child(1),
        .B > div:nth-child(1),
        .C > div:nth-child(1),
        .D > div:nth-child(1) {
          display: block;
        }

        .A > div:nth-child(2),
        .B > div:nth-child(2),
        .C > div:nth-child(2),
        .D > div:nth-child(2) {
          flex: 1 1;
        }
      }
    }
  }
}

@media screen and (width >= 800px) {
  #service-card06 {
    article {
      content {
        position: relative;

        width: 100%;
        min-height: 400px;
        padding: var(--gap);
        gap: var(--gap);

        align-items: center !important;

        .A,
        .B,
        .C,
        .D {
          position: absolute;
          width: calc(50% - 170px);
          height: 50%;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        .A {
          top: 0;
          left: 0;
          text-align: right;
          align-items: flex-end;
        }

        .B {
          top: 0;
          right: 0;
          text-align: left;
          align-items: flex-start;
        }

        .C {
          bottom: 0;
          right: 0;
          text-align: left;
          align-items: flex-start;
        }

        .D {
          bottom: 0;
          left: 0;
          text-align: right;
          align-items: flex-end;
        }

        .A > div:nth-child(1),
        .B > div:nth-child(1),
        .C > div:nth-child(1),
        .D > div:nth-child(1) {
          display: none;
        }
      }
    }
  }
}

/* === #service-card07 ======================================================== */

#service-card07 {
  background-color: var(--zinc-900);
  background-image: url("/images/wallpapers/GradianBlackWall.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  h3 {
    line-height: 200%;

    big1 {
      border-radius: 6px;
      background-color: var(--lighter-10);
      padding: 10px 20px;
      box-shadow: var(--box-shadow-SL);
    }
  }

  article {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    align-content: center;
    gap: var(--gap);

    content {
      flex: 1 1;
      gap: var(--gap);
      flex-direction: row !important;
      align-items: stretch !important;

      .card-text {
        flex: 3 1;
        padding: var(--gap) !important;

        h3 {
          line-height: 200%;
        }

        p {
          text-align: center;
        }

        > div {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          align-items: flex-start;
          justify-content: center;
          gap: var(--gap);
          text-align: center;

          > div {
            flex: 1 1 200px;
            padding: var(--gap) 0;
          }
        }
      }

      .card-image {
        flex: 2 1;
        background-image: url("/pages/services/hypno-coaching/card07.jpg");
        mask-image: url("/pages/services/hypno-coaching/circle-right.svg");
        align-items: center;
      }

      .buttons {
        justify-content: center;
        align-items: center;
      }
    }
  }
}

@media screen and (width < 600px) {
  #service-card07 .card-image {
    display: none;
  }
}

#booking {
  background-color: var(--zinc-800);
  min-height: calc(100vh - var(--nav-height)) !important;
}