/* GLOBAL STYLES */
html {
  box-sizing: border-box;
  font-size: 62.5%;
  background-color: #40422b;
  scroll-behavior: auto;
  overflow-x: clip;
}
body {
  background-color: #fef3df;
  min-height: 100vh;
}
#footer {
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}
::-webkit-scrollbar {
  display: none;
}
*:before,
*:after {
  box-sizing: inherit;
}
main {
  padding: 0 2.22vw;
  background-color: #fef3df;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope/Manrope-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* MAIN PAGE */

/* HOMEPAGE */
/* INTRO */
.hero-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #40422b;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 1.2s ease-out;
}
.hero-animation svg {
  width: 85vw;
  max-width: 1100px;
}
/* Base stroke styles */
.text-path {
  fill: transparent;
  stroke: white;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* The drawing animation */
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
/* The fill animation (smooth ink fill) */
@keyframes fillIn {
  to {
    fill: white;
  }
}
/* Apply drawing to every path */
.text-path {
  stroke-dasharray: 3000; /* temporary value – JS will override with real length */
  stroke-dashoffset: 3000;
  animation: draw 1600ms ease-out forwards;
}
/* Stagger the paths so they write naturally (like Vivus "delayed") */
.text-path:nth-child(1) {
  animation-delay: 0ms;
}
.text-path:nth-child(2) {
  animation-delay: 80ms;
}
.text-path:nth-child(3) {
  animation-delay: 160ms;
}
.text-path:nth-child(4) {
  animation-delay: 240ms;
}
.text-path:nth-child(5) {
  animation-delay: 320ms;
}
.text-path:nth-child(6) {
  animation-delay: 400ms;
}
.text-path:nth-child(7) {
  animation-delay: 480ms;
}
.text-path:nth-child(8) {
  animation-delay: 560ms;
}
.text-path:nth-child(9) {
  animation-delay: 640ms;
}
.text-path:nth-child(10) {
  animation-delay: 720ms;
}
.text-path:nth-child(11) {
  animation-delay: 800ms;
}
/* Fill starts immediately after the last stroke finishes */
#brand-svg.filled .text-path {
  fill: white;
  transition: fill 0.9s ease;
  stroke: white;
}
/* Total time before fade-out of the whole screen (≈ drawing + 3s) */
.hero-animation {
  animation: fadeOutHero 1.2s ease-out forwards;
  animation-delay: 3500ms; /* 1600ms drawing + 800ms stagger + 2600ms pause = adjust as needed */
}
@keyframes fadeOutHero {
  to {
    opacity: 0;
    display: none;
  }
}
.background-image-as {
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1920 / 613;
  background-image: image-set(
    url("../images/homepage-as-full.webp") 1x,
    url("../images/homepage-as-retina.webp") 2x
  );
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 28%;
  padding: 0 2.22vw;
  margin-bottom: 2rem;
  position: relative;
}
@media (min-resolution: 2dppx) {
  .background-image-as {
    aspect-ratio: 2880 / 1280;
    background-position: center 50%;
  }
}
.background-image-as h1 {
  position: absolute;
  right: 2.22vw;
  bottom: 2vw;
  color: #ffffff;
  text-align: right;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  max-width: 37rem;
}
.background-image-as .ukr {
  max-width: 40rem;
}
.top-navigation-icons {
  display: flex;
  justify-content: space-between;
}
.top-navigation-flex-right {
  display: flex;
  gap: 2.22vw;
}
.shopping-bag {
  padding-top: 1.9rem;
  cursor: pointer;
}
.shopping-bag-wrapper {
  position: relative;
  display: inline-flex;
}
#cart-badge {
  position: absolute;
  top: 5rem;
  right: 0;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-weight: 600;
  color: #40422b;
  display: none;
  background-color: #fef3df;
  background-size: 1px;
}
#cart-badge[data-count]:not([data-count="0"]) {
  display: block;
}
.background-image-as #cart-badge[data-count]:not([data-count="0"]) {
  display: none;
}
.cart-count-white {
  color: white;
}
.languagepicker {
  background-color: transparent;
  display: flex;
  flex-direction: row;
  padding: 0;
  gap: 1rem;
  overflow: hidden;
  margin-top: 3.3rem;
  vertical-align: top;
  cursor: pointer;
}
.languagepicker a {
  color: #40422b;
  text-align: right;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  display: block;
  padding: 0.3rem 0;
  opacity: 0.45;
}
.languagepicker a.active {
  opacity: 1;
}
.languagepicker a:hover {
  color: #85876c;
}
.languagepicker .white-picker {
  color: white;
}
.homepage-image-wrapper {
  padding: 0 3.2rem;
}
.main-page-svg {
  display: block;
  width: 100%;
  margin-bottom: 2.2rem;
}
.main-page-alina-svg,
.main-page-alina-svg-ua,
.main-page-stoian-svg {
  display: none;
  margin-bottom: 0;
}

/* NAVIGATION */
.nav-toggle {
  width: 4.5rem;
  height: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  z-index: 1001;
  position: relative;
  padding-top: 3.3rem;
}
.nav-toggle .bar,
.nav-toggle .bar-homepage {
  width: 100%;
  height: 3px;
  transition: all 0.4s ease;
  border-radius: 1.5rem;
  transition: background-color 1s ease;
}
.nav-toggle .bar {
  background: #40422b;
}
.nav-toggle .bar-homepage {
  background: #ffffff;
}
/* Hamburger animation */
.nav-toggle.active .bar {
  background-color: #fef3df;
}
@media screen and (max-width: 768px) {
  main {
    padding: 0 4.1vw;
  }
  .background-image-as {
    padding: 0 4.1vw;
  }
  .background-image-as h1 {
    font-size: 1.8rem;
    bottom: 1rem;
    max-width: 23.8rem;
    margin-bottom: 1rem;
  }
  .nav-toggle {
    width: 3.4rem;
    height: 2.6rem;
    padding-top: 2rem;
  }
  .nav-toggle .bar,
  .nav-toggle .bar-homepage {
    height: 2px;
    transition: all 0.4s ease;
    border-radius: 0.2rem;
    transition: background-color 1s ease;
  }
  .nav-toggle.active .bar-homepage {
    background: #fff;
  }
  .top-navigation-flex-right {
    gap: 2.7rem;
  }
  .shopping-bag {
    padding-top: 1rem;
    cursor: pointer;
    width: 2.3rem;
    height: 3.2rem;
  }
  .languagepicker {
    margin-top: 1.8rem;
    height: 2rem;
  }
  .languagepicker a {
    font-size: 1.8rem;
  }
  .main-page-svg {
    display: none;
    margin-bottom: 0;
  }
  .main-page-alina-svg {
    display: block;
    margin-bottom: 0.5rem;
    width: 59.22%;
  }
  .main-page-stoian-svg {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
  }
  .main-page-alina-svg-ua {
    display: block;
    margin-bottom: 0.5rem;
    width: 60.51%;
  }
}
@media screen and (max-width: 480px) {
  .background-image-as {
    background-image: url("../images/homepage-as-mobile-v4.webp");
    width: 100%;
    aspect-ratio: 430 / 570;
    height: auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    margin-bottom: 1rem;
  }
  .nav-toggle .bar,
  .nav-toggle .bar-homepage {
    height: 2px;
    transition: all 0.4s ease;
    border-radius: 0.2rem;
    transition: background-color 1s ease;
  }
}

/* Overlay menu */
body.preload .nav-menu {
  transition: none !important;
}
.nav-menu {
  position: fixed;
  box-sizing: border-box;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background-color: #40422b;
  color: #ffffff;
  transform: translate3d(-100%, 0, 0);
  will-change: transform;
  display: flex;
  justify-content: center;
  z-index: 1000;
  padding: 15.47vh 2.22vw;
  transform: translate3d(-100%, 0, 0);
  transition: 0.7s ease-in-out;
}
.nav-menu.open {
  transform: translateX(0);
}
body.menu-open {
  height: 100vh;
  overflow: hidden;
  position: fixed;
  inset: 0;
  width: 100%;
}
.nav-content {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
}
.nav-left ul,
.nav-right ul {
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 2;
}
.nav-left li {
  position: relative;
  padding-bottom: 1.5rem;
}
.nav-left > li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 40.4%;
}
.nav-left a {
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  text-decoration: none;
}
.nav-right {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 31.67vw;
}
#contact-text-menu {
  font-size: 3.2rem;
  margin-bottom: 3rem;
}
#email-menu,
#phone-menu,
#socials-menu {
  padding: 1rem 1.5rem;
}
#email-menu h4,
#phone-menu h4 {
  align-self: center;
  font-size: 2rem;
}
#socials-menu h4 {
  align-self: start;
  font-size: 2rem;
}
#socials-menu ul {
  flex-direction: column;
  gap: 1rem;
}
.nav-right a {
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-decoration: none;
}
.nav-left a:hover {
  color: #85876c;
}
.nav-right a:hover {
  color: white;
}
.social li {
  margin-bottom: 1.78vh;
}
.social li a {
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: none;
}
.homepage-text-background {
  position: absolute;
}
.no-transition {
  transition: none !important;
}
@media screen and (max-width: 911px) {
  .nav-menu {
    padding: 16.7vh 4.1vw 6.63vh 4.1vw;
  }
  .nav-content {
    flex-direction: column;
    justify-content: space-between;
  }
  .nav-left li {
    padding-bottom: 2.5rem;
  }
  .nav-left a {
    font-size: 1.8rem;
  }
  .nav-right {
    gap: 0.8rem;
    width: 100%;
  }
  #contact-text-menu {
    font-size: 1.8rem;
    margin-bottom: 2rem;
    padding-bottom: 0;
    border-bottom: 0;
  }
  #email-menu,
  #phone-menu,
  #socials-menu {
    padding: 1rem 1rem;
    border-radius: 1.3rem;
  }
  #email-menu h4,
  #phone-menu h4,
  #socials-menu h4 {
    font-size: 1.5rem;
  }
  .nav-right a {
    font-size: 1.5rem;
  }
  #socials-menu ul li:nth-child(1),
  #socials-menu ul li:nth-child(2),
  #socials-menu ul li:nth-child(3) {
    padding: 0;
  }
}

/* Submenu */
.submenu-wrapper {
  display: flex;
  gap: 1.39vw;
  position: relative;
  top: 0;
  margin-left: 2rem;
  float: right;
  height: 1rem;
}
.has-submenu:hover .submenu,
.has-submenu:hover::after {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  display: block;
}
.submenu-wrapper .submenu {
  position: relative;
  margin-top: 1%;
  opacity: 0;
  transform: translateX(1rem);
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
.nav-line {
  margin-top: 4%;
  position: relative;
  width: 0;
  height: 0.1rem;
  background-color: white;
  transition: width 0.6s ease;
}
.has-submenu:hover .nav-line {
  width: 29.86vw;
}
.submenu li {
  margin-bottom: -1rem;
}
.submenu li a {
  color: white;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
}
.submenu li a:hover {
  color: #85876c;
}
.scrolling-text {
  position: absolute;
  bottom: -6rem;
  left: 0;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  background: transparent;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.scrolling-text.visible {
  opacity: 1;
}
.scroll-track {
  display: flex;
  width: max-content;
  align-items: center;
  will-change: transform;
  overflow: visible;
  opacity: 1;
  transition: opacity 0.1s ease;
}
.scroll-track.fading {
  opacity: 0;
}
.letter {
  flex-shrink: 0;
  stroke: #85876c;
  fill: none;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
@media screen and (max-width: 911px) {
  .submenu-wrapper {
    display: none;
  }
  .scroll-track {
    display: none;
  }
}

/* ABOUT ME */
.about-me-section {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: auto;
  column-gap: 1.6rem;
  border-top: 2px solid #40422b;
  margin-bottom: 18.08vh;
}
.about-me-section h1 {
  font-size: 2.4rem;
  font-weight: 500;
  line-height: normal;
  grid-row: 1/2;
  grid-column: 1/4;
  font-family: "Manrope", sans-serif;
  color: #40422b;
  margin-bottom: 8rem;
  margin-top: 2rem;
  text-transform: uppercase;
}
.about-block-1 {
  display: flex;
  box-sizing: border-box;
  grid-row: 2/4;
  grid-column: 1/5;
  background-color: #f0a145;
  border-radius: 2rem;
  padding: 4.11vh 3.47vw;
  gap: 2.23%;
  align-items: center;
  justify-content: center;
  max-height: 25.07vh;
}
.about-block-1 p,
.about-block-3 p,
.about-block-5 p {
  color: #40422b;
  margin: 0;
  line-height: normal;
}
.left-text-1,
.left-text-3,
.left-text-5 {
  font-family: "Manrope", sans-serif;
  font-size: clamp(5.63rem, 6.25vw, 9rem);
  font-weight: 600;
}
.about-text-block-1,
.about-text-block-3,
.about-text-block-5 {
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.39vw, 2rem);
  font-weight: 400;
}
.about-block-2 {
  box-sizing: border-box;
  grid-row: 2/4;
  grid-column: 9/13;
  border-radius: 2.5rem;
  box-shadow: inset 0 0 0 3px #40422b;
  padding: 3rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  overflow: hidden;
  transition:
    color 0.4s ease,
    border-color 0.4s ease;
  text-decoration: none;
  max-height: 25.07vh;
}
.about-block-2::before {
  content: "";
  position: absolute;
  top: var(--y);
  left: var(--x);
  transform: translate(-50%, -50%) scale(0);
  width: 300%;
  height: 300%;
  border-radius: 50%;
  background: #3d3d2f;
  transition: transform 0.6s ease-out;
  z-index: 2;
  pointer-events: none;
}
.about-block-2:hover::before {
  transform: translate(-50%, -50%) scale(1);
}
.about-block-2 p {
  position: relative;
  align-self: flex-start;
  color: #40422b;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 600;
  font-family: "Manrope", sans-serif;
  margin: 0;
  z-index: 3;
  transition:
    color 0.4s ease,
    fill 0.4s ease,
    stroke 0.4s ease;
}
.about-block-2 svg {
  position: relative;
  align-self: flex-end;
  z-index: 2;
  transition:
    color 0.4s ease,
    fill 0.4s ease,
    stroke 0.4s ease;
  stroke: #3d3d2f;
  fill: none;
}
.about-block-2:hover svg,
.about-block-2:hover svg path,
.about-block-2:hover p {
  color: #fff;
  stroke: #fff;
  fill: #fff;
}
.about-block-3 {
  display: flex;
  box-sizing: border-box;
  gap: 2.23%;
  align-items: center;
  justify-content: center;
  grid-row: 6/8;
  grid-column: 1/5;
  background-color: #df9357;
  border-radius: 2rem;
  padding: 4.11vh 2.01vw;
  max-height: 25.07vh;
}
.about-block-4 {
  box-sizing: border-box;
  position: relative;
  grid-row: 4/8;
  grid-column: 5/9;
  background-color: #b1a463;
  border-radius: 2.5rem;
  padding: 6.85vh 3.96vw 23.15vh 3.47vw;
  max-height: 52.19vh;
}
.about-block-4 p {
  font-size: clamp(1.6rem, 1.39vw, 2rem);
  color: #40422b;
  font-family: "Manrope", sans-serif;
  margin: 0;
  z-index: 2;
  position: relative;
  line-height: normal;
}
.about-block-4 img {
  position: absolute;
  bottom: 1.7rem;
  right: 2rem;
}
.about-block-5 {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.23%;
  grid-row: 6/8;
  grid-column: 9/13;
  background-color: #cad3ce;
  border-radius: 2rem;
  padding: 4.11vh 1.88vw;
  max-height: 25.07vh;
}
.about-text-block-5 {
  z-index: 1;
}
.about-block-5 img {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  width: 128px;
  height: 128px;
}
@media screen and (max-width: 768px) {
  .about-me-section {
    grid-template-columns: repeat(6, 1fr);
    column-gap: 0.8rem;
    border-top: 1.5px solid #40422b;
    margin-bottom: 9rem;
  }
  .about-me-section h1 {
    font-size: 1.8rem;
    grid-column: 1/7;
    margin-bottom: 6rem;
    margin-top: 1rem;
  }
  .about-block-1 {
    grid-row: 2/3;
    grid-column: 1/6;
    padding: 2.5rem;
    justify-content: unset;
    border-radius: 1.5rem;
  }
  .left-text-1,
  .left-text-3,
  .left-text-5 {
    font-size: clamp(3rem, 12.31vw, 4.8rem);
  }
  .about-text-block-1,
  .about-text-block-3,
  .about-text-block-5 {
    font-size: 1.5rem;
  }
  .about-block-2 {
    grid-row: 6/7;
    grid-column: 1/7;
    border-radius: 1.8rem;
    box-shadow: inset 0 0 0 2px #40422b;
    padding: 1.8rem 1.8rem 2rem 2rem;
    margin-top: 0.8rem;
  }
  .about-block-2 p {
    font-size: 1.8rem;
  }
  .about-block-2 svg {
    width: 5rem;
    height: 5rem;
    aspect-ratio: 1/1;
  }
  .about-block-3 {
    grid-row: 4/5;
    grid-column: 1/7;
    border-radius: 1.5rem;
    padding: 2.5rem;
    margin-top: 0.8rem;
    margin-left: 11.28vw;
  }
  .about-block-4 {
    grid-row: 3/4;
    grid-column: 1/7;
    border-radius: 2rem;
    padding: 2.5rem 9.6rem 2.5rem 2.5rem;
    margin-top: 0.8rem;
  }
  .about-block-4 p {
    font-size: 1.5rem;
  }
  .about-block-4 img {
    position: absolute;
    top: 50%;
    right: 1rem;
    height: 10.6rem;
    transform: translateY(-50%);
    aspect-ratio: 1/1;
  }
  .about-block-5 {
    grid-row: 5/6;
    grid-column: 1/7;
    border-radius: 1.5rem;
    padding: 2.5rem;
    margin-top: 0.8rem;
    justify-content: unset;
  }
  .about-block-5 img {
    top: 0.4rem;
    right: 0.4rem;
    width: 6.4rem;
    height: 6.4rem;
  }
}
/* SERVICES */
.services-section {
  display: flex;
  flex-direction: column;
  border-top: 2px solid #40422b;
  margin-bottom: 22rem;
}
.services-section h1 {
  font-size: 2.4rem;
  font-weight: 500;
  line-height: normal;
  font-family: "Manrope", sans-serif;
  color: #40422b;
  margin-top: 2rem;
  margin-bottom: 8rem;
  text-transform: uppercase;
}
.services-intro {
  text-align: center;
  max-width: 62.3rem;
  margin: 0 auto 13rem;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  color: #40422b;
  line-height: 1.5;
}
.services-layout {
  position: relative;
}
.services-list {
  width: 50%;
}
.service-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.9rem 0;
  cursor: pointer;
  border-bottom: 2px solid #40422b;
  text-decoration: none;
}
.service-name {
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  font-size: 2.4rem;
  color: #40422b;
}
.service-arrow {
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}
.service-row:hover .service-arrow {
  opacity: 1;
}
.services-card {
  position: absolute;
  background: #df9357;
  right: 0;
  width: 40%;
  border-radius: 20px;
  padding: 3.2rem 4rem;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    top 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
    background-color 0.35s ease;
}
.services-card.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.services-card p {
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.4vw, 2rem);
  color: #40422b;
  line-height: 1.5;
  margin: 0;
  transition: opacity 0.2s ease 0.1s;
}
.services-card:not(.visible) p {
  opacity: 0;
}
.card-business {
  background-color: #ffb55e;
}
.card-courses {
  background-color: #b1a463;
}
.card-free {
  background-color: #cad3ce;
}
.service-row .service-description {
  display: none;
}
@media screen and (max-width: 768px) {
  .services-section {
    border-top: 1.5px solid #40422b;
    margin-bottom: 9rem;
  }
  .services-section h1 {
    font-size: 1.8rem;
    grid-column: 1/3;
    margin-bottom: 6rem;
    margin-top: 1rem;
  }
  .services-intro {
    display: none;
  }
  .services-layout {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
  }
  .services-list {
    width: 100%;
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    flex-direction: column;
    gap: 0.8rem;
  }
  .service-row {
    flex-direction: column;
    align-items: flex-start;
    justify-content: unset;
    gap: 1rem;
    padding: 2rem;
    border-bottom: none;
    border-radius: 1.5rem;
  }
  .service-row[data-service="individual"] {
    background-color: #df9357;
  }
  .service-row[data-service="business"] {
    background-color: #ffb55e;
  }
  .service-row[data-service="courses"] {
    background-color: #b1a463;
  }
  .service-row[data-service="free"] {
    background-color: #cad3ce;
  }
  .service-row .service-description {
    font-family: "Manrope", sans-serif;
    font-size: 1.5rem;
    color: #40422b;
    line-height: normal;
    margin: 0;
    display: block;
  }
  .services-card {
    display: none !important;
  }
  .service-name {
    font-size: 1.8rem;
  }
  .service-arrow {
    display: none;
  }
}

/* REVIEWS */
.reviews-section {
  margin-bottom: 13rem;
  border-top: 2px solid #40422b;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1.6rem;
  grid-auto-rows: min-content;
}
.reviews-section h1 {
  grid-column: 1/3;
  grid-row: 1/2;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  margin-top: 2rem;
  margin-bottom: 8rem;
}
.before-reviews-text {
  grid-column: 2/12;
  grid-row: 2/3;
  justify-self: center;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-align: center;
}
.all-style {
  color: #40422b;
  font-family: "Playfair Display", sans-serif;
  font-size: clamp(1.6rem, 1.39vw, 2rem);
  font-style: italic;
  font-weight: 500;
  line-height: normal;
}
.review {
  background-color: #cad3ce;
  border-radius: 2.5rem;
  transition: all 0.4s ease;
  flex-shrink: 0;
  box-sizing: border-box;
  flex: 0 0 calc((100% - 1.6rem * 2) / 3);
  display: grid;
  grid-template-rows: 3.7rem auto;
  padding: 4rem 4rem 7rem 4rem;
  align-content: start;
}
.vector-icon {
  width: 5rem;
  height: 3.7rem;
  aspect-ratio: 50/37;
  align-self: end;
}
.review-text {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: normal;
  margin-top: 3rem;
}
.review-container {
  grid-column: 1/13;
  grid-row: 3/6;
  margin-top: 9.59vh;
  position: relative;
  overflow: hidden;
}
.review-track {
  display: flex;
  transition: transform 0.6s ease-in-out;
  gap: 1.6rem;
  will-change: transform;
}
/* Arrows */
.review-controls {
  grid-column: 1/13;
  grid-row: 6/7;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1.6rem;
}
.left-arrow,
.right-arrow {
  aspect-ratio: 1/1;
  box-sizing: border-box;
  border-radius: 2rem;
  border: 0.3rem solid #40422b;
  background-color: #fef3df;
  margin-top: 4rem;
  width: 10rem;
  height: 10rem;
  transition: all 0.3s ease;
  cursor: pointer;
}
.left-arrow {
  grid-column: 6/7;
  grid-row: 1/2;
  justify-self: end;
}
.right-arrow {
  grid-column: 7/8;
  grid-row: 1/2;
}
.left-arrow .desktop,
.right-arrow .desktop {
  display: block;
  max-width: 100%;
  max-height: 100%;
  flex-shrink: 0;
  aspect-ratio: 1.5/1;
  margin: 0 auto;
}
.left-arrow .mobile,
.right-arrow .mobile {
  display: none;
}
@media screen and (max-width: 768px) {
  .reviews-section {
    margin-bottom: 9rem;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 0.8rem;
    border-top: 1.5px solid #40422b;
  }
  .reviews-section h1 {
    font-size: 1.8rem;
    grid-column: 1/3;
    margin-bottom: 6rem;
    margin-top: 1rem;
  }
  .before-reviews-text {
    grid-column: 1/7;
    font-size: 1.5rem;
    max-width: 26.9rem;
  }
  .review {
    flex: 0 0 100%;
    padding: 2rem 2rem 4rem 2rem;
  }
  .vector-icon {
    grid-column: 1/3;
  }
  .review-text {
    font-size: 1.5rem;
  }
  .review-container {
    grid-column: 1/7;
    margin-top: 5rem;
  }
  .review-track {
    gap: 0.8rem;
  }
  .review-controls {
    grid-column: 1/7;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 0.8rem;
  }
  .left-arrow,
  .right-arrow {
    border-radius: 1.4rem;
    border: 2px solid #40422b;
    margin-top: 1.5rem;
    width: 7rem;
    height: 7rem;
  }
  .left-arrow {
    grid-column: 2/4;
    justify-self: end;
  }
  .right-arrow {
    grid-column: 4/6;
    justify-self: start;
  }
  .left-arrow .desktop,
  .right-arrow .desktop {
    min-height: 3rem;
    min-width: 3rem;
    justify-self: center;
  }
  .left-arrow .desktop path,
  .right-arrow .desktop path {
    stroke-width: 2px;
  }
  .left-arrow .mobile,
  .right-arrow .mobile {
    display: block;
    margin: 0 auto;
  }
  .left-arrow .desktop,
  .right-arrow .desktop {
    display: none;
  }
}
/* FAQ */
.faq-section {
  border-top: 2px solid #40422b;
  display: flex;
  flex-direction: column;
  margin-bottom: 26rem;
}
.faq-section h1 {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  margin-top: 2rem;
  margin-bottom: 8rem;
}
.faq-question {
  grid-column: 1/10;
  grid-row: 1/2;
  justify-self: start;
  margin: 0;
  align-self: center;
}
.button-accordion-faq {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  transition: 0.5s;
  column-gap: 1.6rem;
  cursor: pointer;
}
.plus-sign {
  grid-column: 12/13;
  grid-row: 1/2;
  justify-self: end;
  align-self: center;
  stroke: #40422b;
  width: 4rem;
  height: 4rem;
}
.plus-sign g {
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: 50% 50%;
}
.button-accordion-faq.open .plus-sign .vertical {
  transform: rotate(90deg);
}
.vertical line,
.horizontal line {
  stroke-width: 2px;
}
.accordion-content-faq {
  grid-column: 2/12;
  overflow: hidden;
  height: 0;
  opacity: 0;
  border-top: none;
  pointer-events: none;
  transition:
    height 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion-content-faq.active {
  opacity: 1;
  pointer-events: auto;
}
.accordion-content-faq p {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: none;
}
.accordion-inner-faq {
  padding: 6rem 5.1vw 9rem 0;
}
.faq-block {
  display: flex;
  flex-direction: column;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  background-color: #fef3df;
  border-top: 1.5px solid #40422b;
}
.faq-block:first-of-type {
  border-top: none;
}
.faq-block:last-child {
  border-bottom: 1.5px solid #40422b;
}
@media screen and (max-width: 768px) {
  .faq-section {
    margin-bottom: 18rem;
    border-top: 1.5px solid #40422b;
  }
  .faq-section h1 {
    font-size: 1.8rem;
    margin-bottom: 6rem;
    margin-top: 1rem;
  }
  .button-accordion-faq {
    grid-template-columns: repeat(6, 1fr);
  }
  .faq-question {
    grid-column: 1/5;
    font-size: 1.8rem;
  }
  .plus-sign {
    grid-column: 6/7;
    justify-self: end;
    margin: 0;
  }
  .vertical line,
  .horizontal line {
    stroke-width: 1.5px;
  }
  .accordion-content-faq p {
    font-size: 1.5rem;
  }
  .accordion-inner-faq {
    padding: 4rem 0 5rem 0;
  }
  .faq-block {
    font-size: clamp(1rem, 4.1vw, 1.6rem);
  }
}

/* FORM */
.form-section {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: auto;
}
.logo-original {
  display: block;
  grid-column: 1/13;
  grid-row: 1/2;
}
.logo-original img {
  display: block;
  width: 100%;
  padding-bottom: 2rem;
  border-bottom: 2px solid #40422b;
}
.logo-mobile,
.logo-mobile-ua {
  display: none;
}
/* Explore blocks */
.form-blocks {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  grid-column: 1/7;
  grid-row: 2/4;
  margin-top: 13rem;
}
.form-block-1,
.form-block-2 {
  box-sizing: border-box;
  border-radius: 2rem;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3rem;
  box-shadow: inset 0 0 0 3px #40422b;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition:
    color 0.4s ease,
    border-color 0.4s ease;
  text-decoration: none;
  flex: 1;
}
.form-block-1::before,
.form-block-2::before {
  content: "";
  position: absolute;
  top: var(--y);
  left: var(--x);
  transform: translate(-50%, -50%) scale(0);
  width: 300%;
  height: 300%;
  border-radius: 50%;
  background: #3d3d2f;
  transition: transform 0.6s ease-out;
  z-index: 2;
  pointer-events: none;
}
.form-block-1:hover::before,
.form-block-2:hover::before {
  transform: translate(-50%, -50%) scale(1);
}
.form-block-1 p,
.form-block-2 p {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  align-self: flex-start;
  margin: 0;
  z-index: 3;
  transition: color 0.4s ease;
}
.form-block-1:hover svg,
.form-block-1:hover svg path,
.form-block-1:hover p,
.form-block-2:hover svg,
.form-block-2:hover svg path,
.form-block-2:hover p {
  color: #fff;
  stroke: #fff;
  fill: #fff;
}
.arrow-form {
  position: relative;
  align-self: flex-end;
  z-index: 3;
  transition: stroke 0.4s ease;
  stroke: #3d3d2f;
  fill: none;
}
.arrow-form.mobile {
  display: none;
}
/* Form grid */
.form {
  grid-column: 8/13;
  grid-row: 2/4;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.6rem;
  margin-top: 12.74vh;
  align-content: start;
}
label {
  display: block;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  margin-top: 2rem;
  margin-bottom: 0.6rem;
  padding-left: 1.5rem;
  justify-self: flex-start;
}
input,
select,
textarea {
  box-sizing: border-box;
  width: 100%;
  border-radius: 1rem;
  border: 2px solid #40422b;
  background-color: #fef3df;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.39vw, 2rem);
  font-weight: 400;
  line-height: normal;
  padding: 1.1rem 1.5rem;
}
input::placeholder,
select option[disabled],
textarea::placeholder {
  color: #b1a463;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
}
select {
  appearance: none;
  cursor: pointer;
  color: #b1a463;
}
select:valid {
  color: #40422b;
}
.first-name-label {
  grid-column: 1/2;
  grid-row: 1/2;
  margin-top: 0;
}
#first-name {
  grid-column: 1/2;
  grid-row: 2/3;
}
.last-name-label {
  grid-column: 2/3;
  grid-row: 1/2;
  margin-top: 0;
}
#last-name {
  grid-column: 2/3;
  grid-row: 2/3;
}
[data-for="last-name"] {
  grid-column: 2/3;
  grid-row: 3/4;
}
.phone-label {
  grid-column: 1/3;
  grid-row: 4/5;
}
#telephone {
  grid-column: 1/3;
  grid-row: 5/6;
}
.email-label {
  grid-column: 1/3;
  grid-row: 6/7;
}
#email {
  grid-column: 1/3;
  grid-row: 7/8;
}
[data-for="email"] {
  grid-column: 1/3;
  grid-row: 8/9;
}
.consultation-label {
  grid-column: 1/3;
  grid-row: 9/10;
}
#consultation {
  grid-column: 1/3;
  grid-row: 10/11;
}
[data-for="consultation"] {
  grid-column: 1/3;
  grid-row: 11/12;
}
.datetime-label {
  grid-column: 1/3;
  grid-row: 12/13;
}
#datetime {
  grid-column: 1/3;
  grid-row: 13/14;
}
[data-for="appointment_picker"] {
  grid-column: 1/3;
  grid-row: 14/15;
}
.textarea-label {
  grid-column: 1/3;
  grid-row: 15/16;
}
#description {
  grid-column: 1/3;
  grid-row: 16/17;
  border-radius: 1.5rem;
  height: 23.5rem;
  resize: vertical;
}
.form-button {
  grid-column: 1/3;
  grid-row: 17/18;
  border-radius: 1rem;
  background: #40422b;
  color: white;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  border: none;
  margin-top: 4.52vh;
  min-height: 8rem;
  cursor: pointer;
  transition: background 0.3s ease;
}
.form-button:hover {
  background: #5a5c3a;
}
.field-error {
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: #df9357;
  text-align: start;
  padding-left: 1.5rem;
}
@media screen and (max-width: 768px) {
  .form-section {
    grid-template-columns: repeat(6, 1fr);
  }
  .logo-original {
    display: none;
  }
  :lang(en) .logo-mobile {
    display: flex;
    flex-direction: column;
    grid-column: 1/7;
    grid-row: 1/2;
    justify-content: center;
    padding-bottom: 1rem;
  }
  .to-svg-form {
    max-height: 7.82vh;
    margin-top: 0.2rem;
    margin-bottom: 0.3rem;
  }
  :lang(uk) .logo-mobile-ua {
    display: flex;
    flex-direction: column;
    grid-column: 1/7;
    grid-row: 1/2;
    justify-content: center;
    padding-bottom: 1rem;
  }
  :lang(uk) .logo-mobile-ua img:first-child {
    width: 82.4%;
    margin-bottom: -1.2rem;
  }
  :lang(uk) .logo-mobile-ua img:nth-child(2) {
    width: 100%;
  }
  .form {
    grid-column: 1/7;
    grid-row: 2/3;
    grid-template-columns: repeat(6, 1fr);
    padding-top: 6rem;
    border-top: 1.5px #40422b solid;
    margin-top: 0;
  }
  .form-blocks {
    grid-column: 1/7;
    grid-row: 3/4;
    margin-top: 4rem;
    gap: 1rem;
  }
  label {
    font-size: clamp(0.94rem, 3.85vw, 1.5rem);
    margin-top: 0.8rem;
    padding-left: 1rem;
  }
  .first-name-label {
    grid-column: 1/4;
    grid-row: 1/2;
    margin-top: 0;
  }
  #first-name {
    grid-column: 1/4;
    grid-row: 2/3;
  }
  .last-name-label {
    grid-column: 4/7;
    grid-row: 1/2;
    margin-top: 0;
  }
  #last-name {
    grid-column: 4/7;
    grid-row: 2/3;
  }
  .phone-label {
    grid-column: 1/7;
    grid-row: 3/4;
  }
  #telephone {
    grid-column: 1/7;
    grid-row: 4/5;
  }
  .email-label {
    grid-column: 1/7;
    grid-row: 5/6;
  }
  #email {
    grid-column: 1/7;
    grid-row: 6/7;
  }
  .consultation-label {
    grid-column: 1/7;
    grid-row: 7/8;
  }
  #consultation {
    grid-column: 1/7;
    grid-row: 8/9;
  }
  .textarea-label {
    grid-column: 1/7;
    grid-row: 11/12;
  }
  #description {
    grid-column: 1/7;
    grid-row: 12/13;
  }
  .form-button {
    grid-column: 1/7;
    grid-row: 13/14;
    font-size: 1.8rem;
    margin-top: 1.5rem;
    min-height: 7.11vh;
  }
  input,
  select {
    font-size: 1.5rem;
    border-radius: 1rem;
    border: 1.5px solid #40422b;
  }
  textarea {
    font-size: 1.5rem;
    border-radius: 1.2rem;
    border: 1.5px solid #40422b;
  }
  .form-block-1,
  .form-block-2 {
    height: 20rem;
    padding: 1.8rem 1.8rem 2rem 2rem;
    box-shadow: inset 0 0 0 2px #40422b;
    margin-top: 0;
    width: 100%;
    flex: unset;
  }
  .form-block-2 {
    align-self: start;
    flex: auto;
  }
  .form-block-1 p,
  .form-block-2 p {
    font-size: 1.8rem;
  }
  .form-block-2 p {
    width: 100%;
  }
  .arrow-form.mobile {
    display: block;
    width: 5rem;
    height: 5rem;
  }
  .arrow-form.desktop {
    display: none;
  }
}
/* Calendar */
#appointment_picker {
  grid-column: 1 / 3;
  cursor: pointer;
}
.flatpickr-calendar {
  display: none;
  position: absolute;
  z-index: 99999;
  visibility: hidden;
  border-radius: 2rem;
  background: #40422b;
  box-shadow: none;
  border: none;
  padding: 4rem 3rem;
  box-sizing: border-box;
  width: 47rem;
  min-width: 47rem;
  aspect-ratio: 1/1;
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  pointer-events: none;
}
.flatpickr-calendar.is-animating {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.flatpickr-calendar.open {
  display: inline-block;
  visibility: visible;
  z-index: 99999;
  border: 1px solid #fef3df;
}
.flatpickr-calendar.inline {
  display: block;
  position: relative;
  visibility: visible;
}
.flatpickr-calendar::before,
.flatpickr-calendar::after {
  display: none;
}
.flatpickr-months {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 0 2rem 0;
  gap: 3rem;
}
.flatpickr-months.date-selected {
  justify-content: start;
}
.flatpickr-days {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.dayContainer {
  display: grid;
  grid-template-columns: repeat(7, 5rem);
  grid-template-rows: repeat(5, 5rem);
  overflow: visible;
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 0;
  outline: 0;
  text-align: left;
  box-sizing: border-box;
  gap: 1rem;
}
.flatpickr-weekdays {
  display: flex;
  width: 100%;
  background: transparent;
  margin-bottom: 1rem;
}
.flatpickr-weekdaycontainer {
  display: grid;
  grid-template-columns: repeat(7, 5rem);
  gap: 1rem;
  width: 100%;
}
.flatpickr-current-month .numInputWrapper {
  display: inline-flex;
  align-items: center;
}
.flatpickr-current-month .numInputWrapper span {
  display: none;
}
.flatpickr-current-month input.cur-year:focus {
  border-bottom-color: #ffffff;
}
.flatpickr-month {
  align-items: center;
  background: transparent;
}
.flatpickr-current-month {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  text-align: right;
  overflow: visible;
  width: 100%;
  margin-left: 0;
}
.flatpickr-current-month .cur-year-display {
  direction: ltr;
}
.flatpickr-next-month,
.flatpickr-prev-month {
  display: block;
  cursor: pointer;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .numInputWrapper,
.flatpickr-current-month input.cur-year {
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: #ffffff;
  background: transparent;
  border: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding: 0;
}
.flatpickr-current-month select option {
  box-sizing: border-box;
  width: 100%;
  border-radius: 1rem;
  border: 2px solid #40422b;
  background-color: #fef3df;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.39vw, 2rem);
  font-weight: 400;
  line-height: normal;
  padding: 1.1rem 1.5rem;
  text-align: center;
}
.flatpickr-weekday {
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: #ffffff;
  background: transparent;
  flex: 1;
}
.flatpickr-day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  aspect-ratio: unset;
  padding: 0;
  box-sizing: border-box;
  font-size: 2rem;
  font-weight: 400;
  line-height: 2rem;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  border-radius: 0.5rem;
  cursor: pointer;
  background: #fef3df;
  border: none;
  min-width: unset;
  max-width: unset;
  flex: unset;
}
.flatpickr-day:hover {
  background: #df9357;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: #df9357;
}
.flatpickr-day.today:hover {
  background: #df9357;
}
.flatpickr-day.selected {
  cursor: pointer;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  visibility: hidden;
  pointer-events: none;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed:hover {
  background: #6b6d56;
  color: rgba(255, 255, 255, 0.25);
  opacity: 1;
  cursor: not-allowed;
}
.flatpickr-time {
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  height: auto;
  max-height: none;
}
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
  font-family: Manrope, sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: #ffffff;
  background: transparent;
  border: none;
  outline: none;
  text-align: center;
}
.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 0.4rem;
}
.flatpickr-time .flatpickr-time-separator {
  color: #ffffff;
  font-family: Manrope, sans-serif;
  font-size: 1.6rem;
}
.flatpickr-time .arrowUp,
.flatpickr-time .arrowDown {
  display: flex;
  border: none;
  padding: 0.2rem;
  opacity: 0.6;
}
.flatpickr-time .arrowUp:hover,
.flatpickr-time .arrowDown:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0.2rem;
}
.custom-time-picker {
  color: #fff;
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: 2rem;
}
.custom-time-option {
  cursor: pointer;
}
.flatpickr-back-btn {
  color: #85876c;
  font-family: "Manrope", sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  cursor: pointer;
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  display: none;
}
.flatpickr-months.date-selected .flatpickr-back-btn {
  display: block;
}
.flatpickr-months.date-selected .flatpickr-month,
.flatpickr-months.date-selected .flatpickr-prev-month,
.flatpickr-months.date-selected .flatpickr-next-month {
  display: none;
}
.custom-time-label {
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  margin-top: 6rem;
  margin-bottom: 2rem;
}
@media screen and (max-width: 768px) {
  #appointment_picker {
    grid-column: 1 / 7;
    grid-row: 10/11;
  }
  .datetime-label {
    grid-column: 1/7;
    grid-row: 9/10;
  }
  #consultation {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  select option {
    white-space: normal;
    word-break: break-word;
    font-size: 1.3rem;
  }
  .flatpickr-calendar {
    min-width: 0 !important;
    width: calc(100vw - 4rem) !important;
    max-width: 100% !important;
    padding: 1.4rem !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
  }
  .flatpickr-current-month .flatpickr-monthDropdown-months,
  .flatpickr-current-month input.cur-year {
    font-size: 1.8rem !important;
    align-self: center;
    line-height: 1;
  }
  .flatpickr-current-month .flatpickr-monthDropdown-months {
    padding-left: 2px;
  }
  .flatpickr-current-month input.cur-year {
    margin-bottom: -0.1rem !important;
  }
  .flatpickr-weekday {
    font-size: 1.8rem !important;
  }
  .dayContainer {
    gap: 0.4rem !important;
  }
  .flatpickr-day {
    font-size: 1.8rem !important;
    min-width: 0 !important;
    border-radius: 0.3rem !important;
  }
  .custom-time-picker {
    font-size: 1.6rem !important;
  }
}

/* FOOTER */
footer {
  margin-top: 15.75vh;
  background-color: #40422b;
  padding: 0 2.083%;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1.6rem;
  grid-auto-rows: auto;
}
.links-footer {
  grid-column: 1/4;
  grid-row: 1/7;
  border-radius: 1.5rem;
  background: #85876c;
  padding: 2rem 2rem 29rem 2rem;
  margin-top: 6rem;
  position: relative;
}
.links-header {
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  margin: 0;
}
.nav-links-footer {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  row-gap: 2.2rem;
  padding-left: 0;
  margin-top: 4rem;
}
.nav-links-footer li {
  display: inline-block;
  margin: 0;
}
.nav-links-footer li a {
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  text-decoration: none;
  margin: 0;
}
.nav-links-footer li a:hover {
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 6%;
  text-underline-offset: 15%;
  text-underline-position: from-font;
}
.link-icon {
  position: absolute;
  right: 0;
  bottom: 0;
}
.nav-links-footer li:nth-child(1) {
  grid-row: 1/2;
  grid-column: 1/4;
}
.nav-links-footer li:nth-child(2) {
  grid-row: 2/3;
  grid-column: 1/4;
}
.nav-links-footer li:nth-child(3) {
  grid-row: 3/4;
  grid-column: 1/4;
}
.nav-links-footer li:nth-child(4) {
  grid-row: 4/5;
  grid-column: 1/4;
}
.nav-links-footer li:nth-child(5) {
  grid-row: 5/6;
  grid-column: 1/4;
}
.nav-links-footer li:nth-child(6) {
  grid-row: 6/7;
  grid-column: 1/4;
}
.nav-links-footer li:nth-child(7) {
  grid-row: 7/8;
  grid-column: 1/4;
}
.nav-links-footer li:nth-child(8) {
  grid-row: 8/9;
  grid-column: 1/4;
}
.contact-grid {
  grid-column: 5/13;
  grid-row: 1/5;
  box-sizing: border-box;
  border-top: 2px solid white;
  margin-top: 6rem;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: auto;
  row-gap: 1rem;
  padding: 2rem 0 6rem 0;
}
.contact-text {
  grid-column: 1/3;
  grid-row: 1/2;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  margin: 0;
}
.address-block {
  grid-column: 4/10;
  grid-row: 1/2;
  border-radius: 1rem;
  background: #85876c;
  padding: 2.19vh 1.11vw 8.22vh 1.11vw;
  display: flex;
  justify-content: space-between;
  gap: 18.26vw;
}
.address-block h4 {
  align-self: start;
  margin: 0;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.address-block p {
  align-self: end;
  margin: 0;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.phone-block {
  grid-column: 4/10;
  grid-row: 2/3;
  border-radius: 1rem;
  background: #85876c;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding: 2.19vh 1.11vw;
  display: flex;
  justify-content: space-between;
}
.phone-block h4 {
  align-self: start;
  margin: 0;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.phone-block p {
  align-self: end;
  margin: 0;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.email-block {
  grid-column: 4/10;
  grid-row: 3/4;
  border-radius: 1rem;
  background: #85876c;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding: 2.19vh 1.11vw;
  display: flex;
  justify-content: space-between;
}
.email-block h4 {
  align-self: start;
  margin: 0;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.email-block p {
  align-self: end;
  margin: 0;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.socials-block {
  grid-column: 4/10;
  grid-row: 4/5;
  border-radius: 1rem;
  background: #85876c;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding: 2.19vh 1.11vw;
  display: flex;
  justify-content: space-between;
}
.socials-block h4 {
  align-self: center;
  margin: 0;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.socials-block ul {
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  align-self: center;
  gap: 0.5rem;
}
.socials-block ul li a img {
  display: block;
  height: 2.5rem;
  width: 2.5rem;
}
.socials-block ul li:nth-child(1) {
  padding-right: 0.5rem;
}
.socials-block ul li:nth-child(2) {
  padding-right: 0.5rem;
}
.mode-of-operation-block {
  grid-column: 5/13;
  grid-row: 5/7;
  border-top: 2px solid white;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: auto;
  row-gap: 1.37vh;
  padding: 2rem 0 0 0;
}
.mode-of-operation-text {
  grid-column: 1/4;
  grid-row: 1/2;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  margin: 0;
}
.offline-working-block {
  grid-column: 4/10;
  grid-row: 1/2;
  border-radius: 1rem;
  background: #85876c;
  padding: 1.6rem;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: auto;
  row-gap: 1.2rem;
}
.offline-working-block h4 {
  grid-column: 1/3;
  grid-row: 1/2;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0;
}
.monday,
.tuesday,
.wednesday,
.thursday,
.friday,
.saturday,
.sunday {
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0;
}
.monday {
  grid-column: 4/6;
  grid-row: 1/2;
}
.tuesday {
  grid-column: 4/6;
  grid-row: 2/3;
}
.wednesday {
  grid-column: 4/6;
  grid-row: 3/4;
}
.thursday {
  grid-column: 4/6;
  grid-row: 4/5;
}
.friday {
  grid-column: 4/6;
  grid-row: 5/6;
}
.saturday {
  grid-column: 4/6;
  grid-row: 6/7;
}
.sunday {
  grid-column: 4/6;
  grid-row: 7/8;
}
.workhours-monday,
.workhours-tuesday,
.workhours-wednesday,
.workhours-thursday,
.workhours-friday,
.workhours-saturday,
.workhours-sunday {
  color: #fff;
  text-align: right;
  font-family: "Manrope", sans-serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 0;
}
.workhours-monday {
  grid-column: 5/7;
  grid-row: 1/2;
}
.workhours-tuesday {
  grid-column: 5/7;
  grid-row: 2/3;
  text-transform: uppercase;
}
.workhours-wednesday {
  grid-column: 5/7;
  grid-row: 3/4;
}
.workhours-thursday {
  grid-column: 5/7;
  grid-row: 4/5;
  text-transform: uppercase;
}
.workhours-friday {
  grid-column: 5/7;
  grid-row: 5/6;
}
.workhours-saturday {
  grid-column: 5/7;
  grid-row: 6/7;
}
.workhours-sunday {
  grid-column: 5/7;
  grid-row: 7/8;
  text-transform: uppercase;
}
.copyright-text-footer {
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  margin: 0;
  margin-top: 6rem;
  padding-bottom: 6rem;
  justify-self: center;
}
.copyright-text-footer a {
  text-decoration: none;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
}
.legal-footer {
  grid-column: 1/13;
  grid-row: 7/8;
  background-color: #85876c;
  border-radius: 1.5rem;
  margin-top: 6rem;
  display: flex;
  flex-direction: row;
  gap: 13rem;
  padding: 2.2rem 2.2rem 2.2rem 2rem;
}
.legal-p {
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  align-self: center;
}
.flex-legal {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  gap: 6.25vw;
  align-items: center;
}
.flex-legal p {
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
}
.flex-legal p a {
  text-decoration: none;
  color: white;
}
@media screen and (max-width: 768px) {
  footer {
    margin-top: 9rem;
    padding: 0 4.1vw;
  }
  .footer-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .links-footer {
    grid-column: 1/7;
    grid-row: 9/10;
    padding: 2rem 0 10.2rem 2rem;
    margin-top: 4rem;
  }
  .links-header {
    font-size: 1.6rem;
  }
  .nav-links-footer {
    display: flex;
    flex-direction: column;
    margin-top: 4rem;
    row-gap: 2.2rem;
    margin-bottom: 0;
  }
  .nav-links-footer li a {
    font-size: 1.4rem;
  }
  .link-icon {
    width: 18rem;
    height: 18rem;
    aspect-ratio: 1/1;
  }
  .contact-grid {
    grid-column: 1/7;
    grid-row: 1/6;
    margin-top: 4rem;
    margin-bottom: 4rem;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border-top: none;
    row-gap: 0.8rem;
    padding: 0;
  }
  .contact-text {
    grid-column: 1/7;
    grid-row: 1/2;
    border-bottom: 1.5px white solid;
    font-size: 1.6rem;
    padding-bottom: 1rem;
  }
  .address-block {
    grid-column: 1/7;
    grid-row: 2/3;
    padding: 1rem 1rem 7.2rem 1rem;
    margin-top: 1.2rem;
  }
  .address-block h4 {
    font-size: 1.4rem;
    margin-top: 0;
  }
  .address-block p {
    font-size: 1.4rem;
  }
  .phone-block {
    grid-column: 1/7;
    grid-row: 3/4;
    font-size: 1.4rem;
    padding: 1.2rem 1rem;
    margin-top: 0;
  }
  .phone-block h4 {
    font-size: 1.4rem;
  }
  .phone-block p {
    font-size: 1.4rem;
  }
  .email-block {
    grid-column: 1/7;
    grid-row: 4/5;
    font-size: 1.4rem;
    padding: 1.2rem 1rem;
    margin-top: 0;
  }
  .email-block h4 {
    font-size: 1.4rem;
  }
  .email-block p {
    font-size: 1.4rem;
  }
  .socials-block {
    grid-column: 1/7;
    grid-row: 5/6;
    font-size: 1.4rem;
    padding: 1rem;
    margin-top: 0;
  }
  .socials-block h4 {
    font-size: 1.4rem;
  }
  .socials-block ul li a img {
    display: block;
  }
  .socials-block ul li:nth-child(1) {
    padding-right: 1rem;
  }
  .socials-block ul li:nth-child(2) {
    padding-right: 1rem;
  }
  .mode-of-operation-block {
    grid-column: 1/7;
    grid-row: 6/9;
    border-top: none;
    grid-template-columns: repeat(6, 1fr);
    row-gap: 1.5rem;
    padding: 0;
    margin-top: 0;
  }
  .mode-of-operation-text {
    grid-column: 1/7;
    grid-row: 1/2;
    font-size: 1.6rem;
    padding-bottom: 1rem;
    border-bottom: 1.5px white solid;
  }
  .offline-working-block {
    grid-column: 1/7;
    grid-row: 2/3;
    border-radius: 1rem;
    background: #85876c;
    padding: 1rem 1rem 1rem 1rem;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: auto;
    row-gap: 1.5rem;
  }
  .offline-working-block h4 {
    grid-column: 1/3;
    grid-row: 1/2;
    color: #fff;
    font-family: "Manrope", sans-serif;
    font-size: 1.4rem;
  }
  .monday,
  .tuesday,
  .wednesday,
  .thursday,
  .friday,
  .saturday,
  .sunday {
    color: #fff;
    font-family: "Manrope", sans-serif;
    font-size: 1.4rem;
  }
  .monday {
    grid-column: 3/5;
    grid-row: 1/2;
    text-align: left;
    margin-left: 4rem;
  }
  .tuesday {
    grid-column: 3/5;
    grid-row: 2/3;
    text-align: left;
    margin-left: 4rem;
  }
  .wednesday {
    grid-column: 3/5;
    grid-row: 3/4;
    text-align: left;
    margin-left: 4rem;
  }
  .thursday {
    grid-column: 3/5;
    grid-row: 4/5;
    text-align: left;
    margin-left: 4rem;
  }
  .friday {
    grid-column: 3/5;
    grid-row: 5/6;
    text-align: left;
    margin-left: 4rem;
  }
  .saturday {
    grid-column: 3/5;
    grid-row: 6/7;
    text-align: left;
    margin-left: 4rem;
  }
  .sunday {
    grid-column: 3/5;
    grid-row: 7/8;
    text-align: left;
    margin-left: 4rem;
  }
  .workhours-monday,
  .workhours-tuesday,
  .workhours-wednesday,
  .workhours-thursday,
  .workhours-friday,
  .workhours-saturday,
  .workhours-sunday {
    color: #fff;
    text-align: right;
    font-family: "Manrope", sans-serif;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 0;
  }
  .workhours-monday {
    grid-column: 5/7;
    grid-row: 1/2;
  }
  .workhours-tuesday {
    grid-column: 5/7;
    grid-row: 2/3;
  }
  .workhours-wednesday {
    grid-column: 5/7;
    grid-row: 3/4;
  }
  .workhours-thursday {
    grid-column: 5/7;
    grid-row: 4/5;
  }
  .workhours-friday {
    grid-column: 5/7;
    grid-row: 5/6;
  }
  .workhours-saturday {
    grid-column: 5/7;
    grid-row: 6/7;
  }
  .workhours-sunday {
    grid-column: 5/7;
    grid-row: 7/8;
  }
  .copyright-text-footer {
    font-size: 1.4rem;
    margin-top: 4rem;
    padding-bottom: 4rem;
    text-align: center;
  }
  .legal-footer {
    margin-top: 4rem;
    gap: 4rem;
    justify-content: space-between;
    padding: 2.2rem 2.2rem 2.2rem 2.2rem;
    flex-direction: column;
  }
  .legal-p {
    font-size: 1.6rem;
    align-self: start;
  }
  .flex-legal {
    flex-direction: column;
    gap: 2.2rem;
    justify-content: space-between;
    align-items: start;
  }
  .flex-legal p {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 480px) {
  .flex-legal {
    flex-direction: column;
    gap: 2rem;
  }
}

/* ABOUT ME PAGE */

/* INTRODUCTION */
.introduction-aboutme {
  padding: 0 2.22vw;
}
.background-aboutme {
  width: 100%;
  height: 68.5vh;
  background-color: #fef3df;
  margin-bottom: 2.44vh;
}
/* ABOUT ME SECTION */
.aboutmyself-img {
  position: relative;
  margin-bottom: -2.33vh;
  width: 100%;
}
.aboutme-mobile {
  display: none;
  height: 0;
}
.aboutme-mobile-ua {
  display: none;
}
.about-me-section-2 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: auto;
  border-top: 2px solid #40422b;
  margin-bottom: 13rem;
  gap: 1.6rem;
}
.about-me-section-2 h1 {
  grid-column: 1/13;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  margin-top: 2rem;
  margin-bottom: 8rem;
}
.block-1-aboutmetwice {
  grid-column: 4/10;
  grid-row: 2/4;
  border-radius: 2.5rem;
  background: #cad3ce;
  padding: 9rem 6rem 9rem 6rem;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: auto;
}
.aboutmetwice-text-1 {
  grid-column: 1/7;
  grid-row: 1/2;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 700;
  text-align: center;
}
.aboutmetwice-text-2 {
  grid-column: 1/7;
  grid-row: 2/3;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  text-align: left;
  line-height: normal;
  margin-top: 6rem;
  width: 100%;
}
.aboutmetwice-text-2 span {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  line-height: normal;
  font-weight: 700;
}
.aboutmetwice-text-3 {
  grid-column: 1/7;
  grid-row: 3/4;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  margin-top: 3rem;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  width: 100%;
}
.aboutmetwice-orange-block {
  grid-column: 1/4;
  grid-row: 2/3;
  border-radius: 2rem;
  background: #ffb55e;
  height: 100%;
}
.aboutmetwice-green-block {
  grid-column: 1/4;
  grid-row: 3/4;
  border-radius: 2rem;
  background: #b1a463;
  height: 100%;
}
.aboutmetwice-photo-block {
  box-sizing: border-box;
  grid-column: 10/13;
  grid-row: 2/4;
  background: url("../images/ASAboutMe.webp") lightgray 50% / cover no-repeat;
  border-radius: 2rem;
}
.aboutmetwice-flex {
  grid-column: 1/13;
  grid-row: 4/5;
  margin-top: 8rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 6.94vw;
  padding: 0 2.2rem;
}
.block-2-aboutmetwice {
  display: flex;
  gap: 1rem;
}
.block-2-aboutmetwice h2 {
  color: #40422b;
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: clamp(5.63rem, 6.25vw, 9rem);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 0;
  align-self: center;
}
.block-2-aboutmetwice p {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.39vw, 2rem);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0;
  align-self: center;
}
.block-3-aboutmetwice {
  display: flex;
  gap: 1rem;
}
.block-3-aboutmetwice h2 {
  color: #40422b;
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: clamp(5.63rem, 6.25vw, 9rem);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 0;
  align-self: center;
}
.block-3-aboutmetwice p {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.39vw, 2rem);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0;
  align-self: center;
}
.block-4-aboutmetwice {
  display: flex;
  gap: 1rem;
}
.block-4-aboutmetwice h2 {
  color: #40422b;
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: clamp(5.63rem, 6.25vw, 9rem);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 0;
  align-self: center;
}
.block-4-aboutmetwice p {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.39vw, 2rem);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0;
  align-self: center;
}
@media screen and (max-width: 768px) {
  .background-aboutme {
    height: 29.4rem;
    margin: 0;
  }
  .aboutmyself-img {
    display: none;
  }
  :lang(en) .aboutme-mobile {
    display: flex;
    flex-direction: column-reverse;
    position: relative;
    height: 100%;
  }
  :lang(en) .aboutme-mobile img:first-child {
    width: 100%;
    margin-bottom: 1rem;
  }
  :lang(en) .aboutme-mobile img:nth-child(2) {
    width: 68.3%;
    margin-bottom: -1rem;
    align-self: end;
    z-index: 5;
  }
  :lang(uk).aboutme-mobile-ua {
    display: flex;
    gap: 0.9rem;
    margin-bottom: 1rem;
  }
  :lang(uk).aboutme-mobile-ua img:first-child {
    width: 35%;
    margin-bottom: -3rem;
  }
  :lang(uk).aboutme-mobile-ua img:nth-child(2) {
    width: 65%;
  }
  .about-me-section-2 {
    grid-template-columns: repeat(6, 1fr);
    margin-bottom: 9rem;
    column-gap: 0.8rem;
    row-gap: 0.8rem;
    border-top: 1.5px solid #40422b;
  }
  .about-me-section-2 h1 {
    grid-column: 1/3;
    font-size: 1.8rem;
    margin-top: 1rem;
    margin-bottom: 5.2rem;
  }
  .block-1-aboutmetwice {
    grid-column: 1/7;
    grid-row: 2/3;
    border-radius: 2rem;
    padding: 3rem 3.2rem 4.8rem 3rem;
  }
  .aboutmetwice-text-1 {
    grid-column: 1/7;
    grid-row: 1/2;
    font-size: 1.8rem;
    margin: 0;
    margin-left: 0;
  }
  .aboutmetwice-text-2 {
    grid-column: 1/7;
    grid-row: 2/3;
    font-size: 1.5rem;
    margin: 0;
    margin-left: 0;
    margin-top: 3rem;
    padding-right: 0;
    max-width: none;
  }
  .aboutmetwice-text-2 span {
    font-size: 1.5rem;
  }
  .aboutmetwice-text-3 {
    grid-column: 1/7;
    grid-row: 3/4;
    font-size: 1.5rem;
    max-width: none;
    margin-top: 2.37vh;
    margin-left: 0;
  }
  .aboutmetwice-photo-block {
    box-sizing: border-box;
    grid-column: 4/7;
    grid-row: 3/5;
    background: url("../images/ASAboutMe.webp") lightgray 50% / cover no-repeat;
    aspect-ratio: 1/1;
    border-radius: 1.5rem;
  }
  .aboutmetwice-orange-block {
    grid-column: 1/4;
    grid-row: 3/4;
    width: 100%;
    margin-top: 0;
    justify-self: start;
    border-radius: 1rem;
  }
  .aboutmetwice-green-block {
    grid-column: 1/4;
    grid-row: 4/5;
    width: 100%;
    margin-top: 0;
    justify-self: end;
    border-radius: 1rem;
  }
  .aboutmetwice-flex {
    grid-column: 1/7;
    grid-row: 5/6;
    flex-direction: column;
    margin-top: 3.2rem;
    padding: 0;
    gap: 3rem;
  }
  .block-2-aboutmetwice {
    display: flex;
    gap: 1.5rem;
  }
  .block-2-aboutmetwice h2 {
    font-size: clamp(3rem, 12.31vw, 4.8rem);
  }
  .block-2-aboutmetwice p {
    font-size: 1.5rem;
    max-width: none;
  }
  .block-3-aboutmetwice {
    display: flex;
    gap: 1.5rem;
  }
  .block-3-aboutmetwice h2 {
    font-size: clamp(3rem, 12.31vw, 4.8rem);
  }
  .block-3-aboutmetwice p {
    font-size: 1.5rem;
    max-width: none;
  }
  .block-4-aboutmetwice {
    display: flex;
    gap: 1.5rem;
  }
  .block-4-aboutmetwice h2 {
    font-size: clamp(3rem, 12.31vw, 4.8rem);
  }
  .block-4-aboutmetwice p {
    font-size: 1.5rem;
    max-width: none;
  }
}

/* EDUCATION */
.education-section {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: auto;
  border-top: 2px solid #40422b;
  margin-bottom: 13rem;
  column-gap: 1.6rem;
}
.education-top {
  grid-column: 1/13;
  grid-row: 1/2;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  margin-top: 2rem;
  margin-bottom: 8rem;
}
.higher-education {
  grid-column: 1/13;
  grid-row: 2/3;
  justify-self: center;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.higher-education-container {
  grid-column: 1 / 13;
  grid-row: 3 / 4;
  margin-top: 7rem;
  position: relative;
  overflow: hidden;
}
.higher-education-track {
  display: flex;
  gap: 5rem;
  will-change: transform;
  padding: 0;
  transform: none;
  justify-content: center;
}
.higher-education-block {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 4rem 3.4vw;
  border-radius: 2rem;
  background: #df9357;
  flex: 0 0 calc((100% - 5rem * 2) / 3);
  box-sizing: border-box;
  transition: all 0.4s ease;
  max-width: 26.74vw;
  cursor: pointer;
}
.diplomas-blocks {
  position: relative;
}
.diplomas-blocks img {
  position: fixed;
  max-width: 350px;
  max-height: 350px;
  object-fit: contain;
  opacity: 0;
  pointer-events: auto;
  cursor: zoom-in;
  transition: opacity 0.3s ease;
  transform: translate(-25%, -90%);
  z-index: 3;
}
.diplomas-blocks img:hover {
  opacity: 1;
}
.ed-block-3 {
  padding: 4rem 2.99vw;
}
.higher-education-block h3 {
  color: #40422b;
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.67vw, 2.4rem);
  font-style: normal;
  font-weight: 700;
  line-height: 2.5rem;
  letter-spacing: -0.036rem;
}
.higher-education-block div {
  margin-bottom: 12.3rem;
}
.higher-education-block .higher-education-block-text-1 {
  margin-bottom: 0;
}
.higher-education-block .higher-education-block-text-1 h4 {
  color: #40422b;
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.03rem;
}
.higher-education-block-text-2 {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  justify-self: center;
  margin-top: 2rem;
  text-align: center;
}
.higher-education-controls {
  display: none;
}
.additional-courses {
  grid-column: 1/13;
  grid-row: 4/5;
  justify-self: center;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-top: 13rem;
}
.additional-courses-container {
  grid-column: 1 / 13;
  grid-row: 5/6;
  margin-top: 7rem;
  position: relative;
  overflow: hidden;
}
.additional-courses-track {
  display: flex;
  gap: 1.6rem;
  will-change: transform;
  justify-content: flex-start;
  align-items: flex-start;
}
.additional-courses-block {
  display: flex;
  flex-direction: column;
  padding: 4rem 1.39vw;
  box-sizing: border-box;
  border-radius: 2rem;
  background: #cad3ce;
  flex: 0 0 calc((100% - 1.6rem * 2) / 3);
  box-sizing: border-box;
  transition: all 0.4s ease;
  height: 37.1rem;
  cursor: pointer;
}
.additional-courses-block .add-course {
  margin-bottom: 2rem;
  align-self: center;
  text-align: center;
}
.additional-courses-block .add-course h3 {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.67vw, 2.4rem);
  font-style: normal;
  font-weight: 700;
  line-height: 2.5rem;
  letter-spacing: -0.036rem;
  max-width: 100%;
}
.course-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: auto;
}
.course-meta-1 {
  gap: 7.6rem;
}
.course-meta-2 {
  gap: 7.6rem;
}
.course-meta-3 {
  gap: 7.6rem;
}
.course-meta-4 {
  gap: 2.6rem;
}
.course-meta-5 {
  gap: 3.2rem;
}
.course-meta-6 {
  gap: 5.7rem;
}
.course-meta-7 {
  gap: 7.6rem;
}
.course-meta-8 {
  gap: 7.6rem;
}
.additional-courses-block-text-1 {
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  color: #40422b;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.03rem;
  max-width: 100%;
}
.additional-courses-block-text-2 {
  text-align: center;
  max-width: 100%;
}
.additional-courses-block-text-2 h4 {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.5rem, 1.39vw, 2rem);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.03rem;
}
:lang(uk) .additional-courses-block-text-2-en {
  display: none;
}
:lang(en) .additional-courses-block-text-2-ua {
  display: none;
}
.additional-courses-block-text-3 {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: clamp(2.4rem, 2.22vw, 3.2rem);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-align: center;
}
.additional-courses-controls {
  grid-column: 1 / 13;
  grid-row: 6 / 7;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1.6rem;
}
@media screen and (max-width: 768px) {
  .education-section {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: auto;
    border-top: 1.5px solid #40422b;
    margin-bottom: 8rem;
    column-gap: 0.8rem;
  }
  .education-top {
    grid-column: 1/7;
    grid-row: 1/2;
    color: #40422b;
    font-family: "Manrope", sans-serif;
    font-size: 1.8rem;
    font-weight: 500;
    margin-top: 1rem;
    margin-bottom: 6rem;
  }
  .higher-education {
    grid-column: 1/7;
    grid-row: 2/3;
    justify-self: center;
    color: #40422b;
    font-family: "Manrope", sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
  }
  .higher-education-container {
    grid-column: 1/7;
    grid-row: 3/4;
    margin-top: 6rem;
    position: relative;
    overflow: hidden;
  }
  .higher-education-track {
    display: flex;
    gap: 1.6rem;
    will-change: transform;
    justify-content: flex-start;
    align-items: flex-start;
    justify-self: unset;
    padding: 0;
    transform: none;
    width: 100%;
  }
  .higher-education-block {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border-radius: 2rem;
    background: #df9357;
    flex: 0 0 100%;
    box-sizing: border-box;
    transition: all 0.4s ease;
    height: 30rem;
    padding: 4rem 0;
    max-width: unset;
  }
  .higher-education-block h3 {
    color: #40422b;
    text-align: center;
    font-family: "Manrope", sans-serif;
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.036rem;
    align-self: center;
  }
  .higher-education-block div {
    margin-bottom: 11.2rem;
    justify-items: center;
  }
  .higher-education-block .higher-education-block-text-1 h4 {
    color: #40422b;
    text-align: center;
    font-family: "Manrope", sans-serif;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.03rem;
    align-self: center;
  }
  .higher-education-block-text-2 {
    color: #40422b;
    font-family: "Manrope", sans-serif;
    font-size: 2.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    justify-self: center;
    margin-top: 2rem;
    text-align: center;
  }
  .higher-education-controls {
    grid-column: 1/7;
    grid-row: 4/5;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 0.8rem;
  }
  .diplomas-blocks img {
    display: none;
  }
  .diplomas-blocks img:hover {
    opacity: 0;
  }
  .left-arrow.edu {
    grid-column: 2 / 4;
    justify-self: end;
  }
  .right-arrow.edu {
    grid-column: 4 / 6;
  }
  .right-arrow.edu,
  .left-arrow.edu {
    width: 7rem;
    height: 7rem;
    aspect-ratio: 1/1;
    box-sizing: border-box;
    margin-top: 1.5rem;
    border-radius: 1.4rem;
    border: 2px solid #40422b;
    background: transparent;
    cursor: pointer;
    padding: 0;
  }
  .right-arrow.edu .mobile,
  .left-arrow.edu .mobile {
    margin: 0 auto;
    display: block;
    max-width: 100%;
    max-height: 100%;
  }
  .additional-courses {
    grid-column: 1/7;
    grid-row: 5/6;
    justify-self: center;
    color: #40422b;
    font-family: "Manrope", sans-serif;
    font-size: 2.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-top: 13rem;
  }
  .additional-courses-container {
    grid-column: 1/7;
    grid-row: 6/7;
    margin-top: 7rem;
    position: relative;
    overflow: hidden;
  }
  .additional-courses-track {
    display: flex;
    gap: 1.6rem;
    will-change: transform;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .additional-courses-block {
    display: flex;
    flex-direction: column;
    padding: 4rem 0;
    box-sizing: border-box;
    border-radius: 2rem;
    background: #cad3ce;
    flex: 0 0 100%;
    box-sizing: border-box;
    transition: all 0.4s ease;
    height: 30rem;
  }
  .additional-courses-block .add-course {
    margin-bottom: 1.5rem;
  }
  .additional-courses-block .add-course h3 {
    color: #40422b;
    align-self: center;
    text-align: center;
    font-family: "Manrope", sans-serif;
    font-size: clamp(1.6rem, 1.67vw, 2.4rem);
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.036rem;
  }
  #block-2 h3 {
    max-width: 21.6rem;
  }
  #block-3 h3 {
    max-width: 20.5rem;
  }
  #block-4 h3 {
    max-width: 29.1rem;
  }
  #block-5 h3 {
    max-width: 26.6rem;
  }
  #block-6 h3 {
    max-width: 20.7rem;
  }
  .course-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: auto;
  }
  .course-meta-1 {
    gap: 7.6rem;
  }
  .course-meta-2 {
    gap: 7.6rem;
  }
  .course-meta-3 {
    gap: 7.6rem;
  }
  .course-meta-4 {
    gap: 4.4rem;
  }
  .course-meta-5 {
    gap: 4.4rem;
  }
  .course-meta-6 {
    gap: 6rem;
  }
  .additional-courses-block-text-1 {
    text-align: center;
    font-family: "Manrope", sans-serif;
    font-size: clamp(1.5rem, 1.39vw, 2rem);
    font-style: normal;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03rem;
    max-width: 100%;
  }
  .additional-courses-block-text-2 {
    text-align: center;
    max-width: 100%;
    margin-bottom: 2rem;
  }
  .additional-courses-block-text-2 h4 {
    color: #40422b;
    font-family: "Manrope", sans-serif;
    font-size: clamp(1.5rem, 1.39vw, 2rem);
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.03rem;
  }
  .additional-courses-block-text-3 {
    color: #40422b;
    font-family: "Manrope", sans-serif;
    font-size: clamp(2.4rem, 2.22vw, 3.2rem);
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    text-align: center;
  }
  .additional-courses-controls {
    grid-column: 1/7;
    grid-row: 7/8;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 0.8rem;
  }
}

/* VALUES AND PRINCIPLES*/
.values-and-principles-section {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: auto;
  border-top: 2px solid #40422b;
  margin-bottom: 13rem;
}
.values-and-principles-top {
  grid-column: 1 / 13;
  grid-row: 1 / 2;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  margin-top: 2rem;
  margin-bottom: 6.4rem;
}
.values-track {
  grid-column: 1/13;
  grid-row: 2/3;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: auto;
  gap: 1.6rem;
}
.values-green-block {
  grid-column: 2/7;
  grid-row: 2/3;
  border-radius: 2rem;
  box-sizing: border-box;
  background: #b1a463;
  height: 23.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3.7rem;
  position: relative;
  padding: 4.7rem 4.87vw 6.7rem 2.08vw;
}
.values-green-block img {
  width: 6.4rem;
  height: 6.4rem;
  aspect-ratio: 1/1;
  position: absolute;
  top: 3rem;
  left: 2.08vw;
}
.values-green-block h4 {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: clamp(2rem, 1.66vw, 2.4rem);
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.036rem;
  margin-left: 9.4rem;
}
.values-green-block p {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.38vw, 2rem);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.03rem;
}
.values-orange-block {
  grid-column: 7/12;
  grid-row: 2/3;
  border-radius: 2rem;
  box-sizing: border-box;
  background: #ffb55e;
  max-height: 23.5rem;
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: 3.7rem;
  position: relative;
  padding: 4.5rem 2.22vw 6.7rem 2.08vw;
}
.values-orange-block img {
  width: 6.4rem;
  height: 6.4rem;
  aspect-ratio: 1/1;
  position: absolute;
  top: 3rem;
  left: 2.08vw;
}
.values-orange-block h4 {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: clamp(2rem, 1.66vw, 2.4rem);
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.048rem;
  margin-left: 9.4rem;
}
.values-orange-block p {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.38vw, 2rem);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.03rem;
}
.values-blue-block {
  grid-column: 2/7;
  grid-row: 3/4;
  border-radius: 2rem;
  box-sizing: border-box;
  background: #cad3ce;
  max-height: 23.5rem;
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: 3.7rem;
  position: relative;
  padding: 4.7rem 2.78vw 9.4rem 2.08vw;
}
.values-blue-block img {
  width: 6.4rem;
  height: 6.4rem;
  aspect-ratio: 1/1;
  position: absolute;
  top: 3rem;
  left: 2.08vw;
}
.values-blue-block h4 {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: clamp(2rem, 1.66vw, 2.4rem);
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.048rem;
  margin-left: 9.4rem;
}
.values-blue-block p {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.38vw, 2rem);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.03rem;
}
.values-dark-orange-block {
  grid-column: 7/12;
  grid-row: 3/4;
  border-radius: 2rem;
  box-sizing: border-box;
  background: #df9357;
  max-height: 23.5rem;
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: 3.7rem;
  position: relative;
  padding: 4.6rem 2.08vw 4rem 2.08vw;
}
.values-dark-orange-block img {
  width: 6.4rem;
  height: 6.4rem;
  aspect-ratio: 1/1;
  position: absolute;
  top: 3rem;
  left: 2.08vw;
}
.values-dark-orange-block h4 {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: clamp(2rem, 1.66vw, 2.4rem);
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.048rem;
  margin-left: 9.4rem;
}
.values-dark-orange-block p {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.38vw, 2rem);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.03rem;
}
.values-controls {
  display: none;
}
@media screen and (max-width: 768px) {
  .values-and-principles-section {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: auto;
    border-top: 1.5px solid #40422b;
    margin-bottom: 9rem;
    column-gap: 0.8rem;
    overflow: hidden;
  }
  .values-and-principles-top {
    grid-column: 1/7;
    grid-row: 1/2;
    color: #40422b;
    font-family: "Manrope", sans-serif;
    font-size: 1.8rem;
    margin-top: 1rem;
    margin-bottom: 6rem;
  }
  .values-track {
    grid-column: 1/7;
    grid-row: 2/3;
    display: flex;
    will-change: transform;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .values-green-block,
  .values-orange-block,
  .values-blue-block,
  .values-dark-orange-block {
    flex: 0 0 100%;
  }
  .values-green-block {
    border-radius: 1.5rem;
    box-sizing: border-box;
    background: #b1a463;
    height: 23.8rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    position: relative;
    padding: 7.4rem 2rem;
    max-height: none;
  }
  .values-orange-block {
    border-radius: 1.5rem;
    box-sizing: border-box;
    background: #f0a145;
    height: 23.8rem;
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 2rem;
    position: relative;
    padding: 7.4rem 2rem 5.4rem 2rem;
    max-height: none;
  }
  .values-blue-block {
    border-radius: 2rem;
    box-sizing: border-box;
    background: #cad3ce;
    max-height: none;
    height: 23.8rem;
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 2rem;
    position: relative;
    padding: 7.4rem 2rem;
  }
  .values-dark-orange-block {
    border-radius: 1.5rem;
    box-sizing: border-box;
    background: #df9357;
    max-height: none;
    height: 23.8rem;
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 2rem;
    position: relative;
    padding: 7.3rem 2rem 3rem 2rem;
  }
  .values-green-block img,
  .values-orange-block img,
  .values-blue-block img,
  .values-dark-orange-block img {
    width: 4.8rem;
    height: 4.8rem;
    aspect-ratio: 1/1;
    position: absolute;
    transform: translateX(-50%);
    top: 2rem;
    left: 50%;
  }
  .values-green-block h4,
  .values-orange-block h4,
  .values-blue-block h4,
  .values-dark-orange-block h4 {
    color: #40422b;
    font-family: "Manrope", sans-serif;
    font-size: 2rem;
    text-align: center;
    font-style: normal;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.036rem;
    margin-left: 0;
    text-align: center;
  }
  .values-green-block p,
  .values-orange-block p,
  .values-blue-block p,
  .values-dark-orange-block p {
    color: #40422b;
    font-family: "Manrope", sans-serif;
    font-size: 1.6rem;
    text-align: center;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.03rem;
    text-align: center;
  }
  .values-controls {
    grid-column: 1 / 7;
    grid-row: 3 / 4;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 0.8rem;
  }
}
@media screen and (max-width: 900px) and (min-width: 768px) {
  .values-green-block,
  .values-blue-block,
  .values-dark-orange-block {
    gap: 1.1rem;
  }
}

/* I CAN HELP WITH */
.help-section {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1.6rem;
  grid-auto-rows: auto;
  border-top: 2px solid #40422b;
  margin-bottom: 75rem;
}
.help-top {
  grid-column: 1 / 13;
  grid-row: 1 / 2;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  margin-top: 2rem;
  margin-bottom: 16.1rem;
}
.text-1 {
  grid-column: 2/5;
  grid-row: 2/3;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.03rem;
  max-width: 28.9rem;
}
.text-2 {
  grid-column: 9/12;
  grid-row: 2/3;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.03rem;
  margin-top: 5.3rem;
  max-width: 33.1rem;
}
.text-3 {
  grid-column: 4/7;
  grid-row: 3/4;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.03rem;
  margin-top: 9.8rem;
  max-width: 31.3rem;
}
.text-4 {
  grid-column: 10/13;
  grid-row: 4/5;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.03rem;
  margin-top: 1.8rem;
  max-width: 22.5rem;
}
.text-5 {
  grid-column: 1/3;
  grid-row: 5/6;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.03rem;
  margin-top: 2.7rem;
  max-width: 21.6rem;
}
.text-6 {
  grid-column: 6/9;
  grid-row: 5/6;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.03rem;
  margin-top: 3.7rem;
  max-width: 30.9rem;
}
.text-7 {
  grid-column: 9/12;
  grid-row: 6/7;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.03rem;
  margin-top: 11.5rem;
  max-width: 27.3rem;
}
.text-8 {
  grid-column: 3/6;
  grid-row: 7/8;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.03rem;
  margin-top: 3.8rem;
  max-width: 34.2rem;
}
.text-9 {
  grid-column: 8/11;
  grid-row: 8/9;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.03rem;
  margin-top: 22.6rem;
  max-width: 24.4rem;
}
.text-9 span {
  color: #40422b;
  font-family: "Playfair Display", sans-serif;
  font-size: 2rem;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.03rem;
}
@media screen and (max-width: 768px) {
  .help-section {
    grid-template-columns: repeat(6, 1fr);
    column-gap: 0.8rem;
    border-top: 1.5px solid #40422b;
    margin-bottom: 54rem;
  }
  .help-top {
    grid-column: 1/7;
    grid-row: 1/2;
    font-size: 1.8rem;
    margin-top: 1rem;
    margin-bottom: 6rem;
  }
  .text-1 {
    grid-column: 1/5;
    grid-row: 2/3;
    font-size: 1.5rem;
    max-width: 21.4rem;
  }
  .text-2 {
    grid-column: 2/6;
    grid-row: 4/5;
    font-size: 1.5rem;
    margin-top: 12.5rem;
    max-width: 20.6rem;
  }
  .text-3 {
    grid-column: 4/7;
    grid-row: 3/4;
    font-size: 1.5rem;
    margin-top: 12.4rem;
    max-width: none;
  }
  .text-4 {
    grid-column: 1/4;
    grid-row: 6/7;
    font-size: 1.5rem;
    margin-top: 9.3rem;
    max-width: 15.8rem;
  }
  .text-5 {
    grid-column: 4/7;
    grid-row: 8/9;
    font-size: 1.5rem;
    margin-top: 14.7rem;
    max-width: 15.4rem;
  }
  .text-6 {
    grid-column: 4/7;
    grid-row: 5/6;
    font-size: 1.5rem;
    margin-top: 15.3rem;
    max-width: 14.1rem;
    justify-self: end;
  }
  .text-7 {
    grid-column: 1/5;
    grid-row: 9/10;
    font-size: 1.5rem;
    margin-top: 13.4rem;
    max-width: 20.6rem;
  }
  .text-8 {
    grid-column: 2/6;
    grid-row: 7/8;
    font-size: 1.5rem;
    margin-top: 11.5rem;
    max-width: 20.5rem;
    margin-left: 3.1rem;
  }
  .text-9 {
    grid-column: 1/7;
    grid-row: 10/11;
    font-size: 1.5rem;
    margin-top: 21.7rem;
    max-width: 19.6rem;
    justify-self: center;
  }
  .text-9 span {
    font-size: 1.5rem;
  }
}

/* BLOG PAGE */
.background-blog {
  position: relative;
  height: 32vh;
  background-color: #fef3df;
  padding: 0 2.22vw;
}
.search-header {
  padding: 0 2.2vw;
}
.blog-text {
  display: block;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  justify-self: center;
  text-align: center;
}
.blog-search {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 4rem;
  margin-bottom: 13rem;
  width: 100%;
}
.search-wrapper {
  position: relative;
  width: 100%;
  max-width: 71.2rem;
}
#search-input {
  box-sizing: border-box;
  width: 100%;
  height: 8.6rem;
  min-height: 8.6rem;
  border: 3px solid #40422b;
  border-radius: 1rem;
  padding: 1.4rem 8.5rem 1.4rem 3rem;
  background-color: transparent;
  outline: none;
  color: #b1a463;
  font-family: "Manrope", sans-serif;
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
#search-input::placeholder {
  font-size: 3.2rem;
}
.search-btn {
  position: absolute;
  right: 1.5rem;
  top: 0.9rem;
  z-index: 1;
  background: none;
  border: none;
  cursor: pointer;
}
.magnifier {
  pointer-events: none;
}
.magnifier-mobile {
  display: none;
}
#search-input::placeholder {
  color: #a59753;
  font-family: "Manrope", sans-serif;
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin: 0 auto;
}
#main-image {
  display: block;
  width: 100%;
  margin: 0;
}
#news-mobile {
  display: none;
}
#and-mobile {
  display: none;
}
#more-mobile {
  display: none;
}
#blog-section {
  padding-top: 2rem;
  border-top: 0.2rem solid #40422b;
  margin-top: 2rem;
}
#blog-section h1 {
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 3rem;
  font-family: "Manrope", sans-serif;
  color: #40422b;
  text-transform: uppercase;
  margin-bottom: 8rem;
}
.blog-categories {
  display: flex;
  gap: 1.6rem;
}
.blog-categories button:hover {
  cursor: pointer;
}
.category-btn {
  box-sizing: border-box;
  border: 3px solid #40422b;
  background: transparent;
  border-radius: 0.7rem;
  color: #40422b;
  text-align: center;
  font-family: "Manrope";
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  padding: 1.5rem 4.3rem;
}
.category-btn.active {
  background-color: #40422b;
  color: #ffffff;
}
.category-btn.category-mental-health,
.category-btn.category-mental-health-uk {
  box-sizing: border-box;
  border: 3px solid #cad3ce;
  background: transparent;
  border-radius: 0.7rem;
  color: #40422b;
  text-align: center;
  font-family: "Manrope";
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
}
.category-btn.category-mental-health.active,
.category-btn.category-mental-health-uk.active {
  background-color: #cad3ce;
  color: #40422b;
}
.category-btn.category-psychotherapy,
.category-btn.category-psychotherapy-uk {
  box-sizing: border-box;
  border: 3px solid #b1a463;
  background: transparent;
  border-radius: 0.7rem;
  color: #40422b;
  text-align: center;
  font-family: "Manrope";
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
}
.category-btn.category-psychotherapy.active,
.category-btn.category-psychotherapy-uk.active {
  background-color: #b1a463;
  color: #40422b;
}
.category-btn.category-work-growth,
.category-btn.category-work-growth-uk {
  box-sizing: border-box;
  border: 3px solid #df9357;
  background: transparent;
  border-radius: 0.7rem;
  color: #40422b;
  text-align: center;
  font-family: "Manrope";
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
}
.category-btn.category-work-growth.active,
.category-btn.category-work-growth-uk.active {
  background-color: #df9357;
}
.category-btn.category-relationships,
.category-btn.category-relationships-uk {
  box-sizing: border-box;
  border: 3px solid #ffb55e;
  background: transparent;
  border-radius: 0.7rem;
  color: #40422b;
  text-align: center;
  font-family: "Manrope";
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
}
.category-btn.category-relationships.active,
.category-btn.category-relationships-uk.active {
  background-color: #ffb55e;
}
.blog-posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1.6rem;
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: #fef3df;
  margin-bottom: 2.2rem;
  margin-top: 5.8rem;
}
.blog-card img {
  object-fit: cover;
  border-radius: 1.5rem;
  display: block;
  width: 100%;
  height: 100%;
}
.blog-meta {
  display: flex;
  justify-content: space-between;
  padding: 2rem 0;
}
.category {
  border-radius: 0.7rem;
  padding: 1.5rem 2.97vw;
  color: #40422b;
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
}
.date {
  color: #40422b;
  text-align: right;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  align-self: center;
}
.blog-card h3 {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.category-psychotherapy,
.category-psychotherapy-uk {
  background: #b1a463;
  padding: 1.5rem 2.57vw;
  border: 3px solid #b1a463;
}
.category-mental-health,
.category-mental-health-uk {
  background-color: #cad3ce;
  border: 3px solid #cad3ce;
}
.category-relationships,
.category-relationships-uk {
  background: #ffb55e;
  border: 3px solid #ffb55e;
}
.category-work-growth,
.category-work-growth-uk {
  background: #df9357;
  border: 3px solid #df9357;
}
.blog-card-content a {
  display: block;
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}
.pagination {
  display: flex;
  gap: 2.5rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 26rem;
  margin-top: 9.7rem;
}
#page-numbers {
  display: flex;
  gap: 0.4rem;
}
#page-numbers button {
  width: 5rem;
  height: 5rem;
  aspect-ratio: 1/1;
  border-radius: 0.7rem;
  color: #40422b;
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 500;
  background-color: transparent;
  border: none;
}
#page-numbers button:hover {
  cursor: pointer;
}
#page-numbers button.active {
  background-color: #cad3ce;
}
#next-page {
  width: 5rem;
  height: 5rem;
  aspect-ratio: 1/1;
  box-sizing: border-box;
  border: 2px solid #40422b;
  border-radius: 0.7rem;
  line-height: normal;
  background-color: transparent;
}
#next-page svg {
  cursor: pointer;
  margin: 0 auto;
  transform: translate(0px, 2px);
}
#prev-page {
  width: 5rem;
  height: 5rem;
  aspect-ratio: 1/1;
  box-sizing: border-box;
  border: 2px solid #40422b;
  border-radius: 0.7rem;
  line-height: normal;
  background-color: transparent;
}
#prev-page svg {
  cursor: pointer;
  margin: 0 auto;
  transform: rotate(180deg) translate(0px, -1px);
}
.blog-card a.post-link {
  display: block;
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}
.blog-posts > p {
  grid-column: 1/4;
  color: #a59753;
  font-family: "Manrope", sans-serif;
  font-size: clamp(2rem, 2.22vw, 3.2rem);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  justify-self: center;
  align-self: center;
  margin-top: 9.7rem;
}
@media screen and (max-width: 1100px) {
  .blog-categories {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.8rem;
  }
  .category-btn {
    font-size: 1.5rem;
    margin: 0;
    grid-column: 2/6;
    grid-row: 3/4;
    border: 1.5px solid #40422b;
    padding: 1.2rem 0;
  }
  .category-btn.category-mental-health,
  .category-btn.category-mental-health-uk {
    grid-column: 4/7;
    grid-row: 2/3;
    font-size: 1.5rem;
    border: 1.5px solid #cad3ce;
  }
  .category-btn.category-psychotherapy,
  .category-btn.category-psychotherapy-uk {
    grid-column: 4/7;
    grid-row: 1/2;
    font-size: 1.5rem;
    border: 1.5px solid #b1a463;
  }
  .category-btn.category-work-growth,
  .category-btn.category-work-growth-uk {
    grid-column: 1/4;
    grid-row: 1/2;
    font-size: 1.5rem;
    border: 1.5px solid #df9357;
  }
  .category-btn.category-relationships,
  .category-btn.category-relationships-uk {
    grid-column: 1/4;
    grid-row: 2/3;
    font-size: 1.5rem;
    border: 1.5px solid #ffb55e;
  }
  .category {
    font-size: 1.5rem;
    padding: 1.2rem 0;
    width: 19.3rem;
  }
}
@media screen and (max-width: 768px) {
  .background-blog {
    padding: 0 4.1vw;
  }
  #blog-section {
    padding-top: 0;
    margin-top: 1rem;
  }
  #blog-section h1 {
    font-size: 1.8rem;
    margin-bottom: 6rem;
    margin-top: 1rem;
  }
  .search-header {
    padding: 0 4.1vw;
  }
  .search-header p {
    font-size: 1.6rem;
  }
  .blog-text {
    font-size: 1.8rem;
  }
  #search-input {
    font-size: 1.8rem;
    max-height: 5rem;
    min-height: unset;
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1.5px solid #40422b;
  }
  #search-input::placeholder {
    font-size: 1.8rem;
  }
  .search-btn {
    top: 1rem;
    right: 1.3rem;
  }
  .magnifier {
    display: none;
  }
  .magnifier-mobile {
    display: block;
  }
  #main-image {
    display: none;
  }
  #news-mobile {
    display: block;
  }
  #news-mobile-en {
    display: block;
    width: 71.23%;
  }
  .and-more-flex {
    display: flex;
    justify-content: end;
    gap: 1rem;
    margin-top: 1rem;
  }
  #and-mobile {
    display: inline-block;
    justify-self: center;
    width: 17.6%;
  }
  #more-mobile {
    display: inline-block;
    justify-self: end;
    width: 61.17%;
  }
  #more-mobile-en {
    display: inline-block;
    justify-self: end;
    width: 69.55%;
  }
  .blog-posts {
    grid-template-columns: repeat(1, 1fr);
  }
  .blog-card {
    margin-top: 6rem;
  }
  .date {
    font-size: 1.5rem;
  }
  .blog-card h3 {
    font-size: 1.8rem;
  }
  .blog-card img {
    aspect-ratio: 3/2;
  }
  .blog-meta {
    padding: 1.5rem 0;
  }
  .blog-card {
    margin-bottom: 0;
  }
  #page-numbers button {
    font-size: 2.4rem;
  }
  .page-btn {
    width: 5rem;
    height: 5rem;
  }
  .pagination {
    gap: 2rem;
  }
}

/* POST */
.introduction-post {
  padding: 0 2.22vw;
  height: 27.4vh;
  position: relative;
}
.post-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0.87vw;
}
.post-header .flex-left {
  width: 31.11vw;
}
.post-header .flex-right {
  width: 55.28vw;
}
.flex-left h1 {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  max-width: 56.4rem;
}
.post-author {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2.08vw;
  margin-top: 5.48vh;
}
.post-author div {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.post-hero {
  flex-shrink: 0;
  border-radius: 1.7rem;
  aspect-ratio: 3/2;
  width: 100%;
  height: 100%;
}
.post-meta {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  margin-top: 2.74vh;
  overflow: hidden;
}
.post-topics {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#post-category-primary {
  color: #40422b;
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.39vw, 2rem);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  flex-shrink: 1;
  min-width: 0;
  white-space: nowrap;
}
#post-category-secondary {
  color: #40422b;
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.39vw, 2rem);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  flex-shrink: 1;
  min-width: 0;
  white-space: nowrap;
}
.reading-time-div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 0.8vw;
  align-items: center;
}
.reading-time-div img {
  width: 2.4rem;
  height: 2.4rem;
  align-self: center;
}
#post-reading-time {
  color: #40422b;
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.39vw, 2rem);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.date-post-div {
  display: flex;
  flex-direction: row;
  gap: 0.8vw;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
  white-space: nowrap;
}
#post-date {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.39vw, 2rem);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.line-meta {
  border-right: 0.1rem solid #40422b;
  align-self: stretch;
}
.post-author img {
  width: 7rem;
  height: 7rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
}
.post-grid {
  display: flex;
  gap: 9.16vw;
  align-items: stretch;
  margin-top: 17.53vh;
  overflow: visible;
  margin-bottom: 10.96vh;
  position: relative;
}
/* -----------------------------
   TOC WRAPPER
----------------------------- */
.toc-wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
  --toc-width: 31.11vw;
  width: var(--toc-width);
  align-self: stretch;
  box-sizing: border-box;
}

/* Only active when table is open */
body.table-open .toc-wrapper {
  position: relative;
  width: 31.11vw;
}

/* -----------------------------
   STICKY BLOCKS (TOP + BOTTOM)
----------------------------- */
.sticky-block,
.toc-bottom-sticky {
  position: sticky;
  align-self: start;
  top: 4rem; /* unified value */
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-self: flex-start;
  z-index: 5;
}
#toc-below-table {
  display: none;
  position: absolute;
  left: 0;
  width: 31.11vw;
  margin-top: 4rem;
}

body.table-open #toc-below-table {
  display: block;
}

/* -----------------------------
   SIDEBAR (TOC CONTAINER)
----------------------------- */
.toc-sticky {
  position: sticky;
  top: 4rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.post-sidebar {
  position: relative;
  width: 100%;
  max-width: 44.8rem;
  box-sizing: border-box;
  background: #cad3ce;
  padding: 0 3rem 3rem;
  border-radius: 1.5rem;
}

/* -----------------------------
   TOC BUTTON
----------------------------- */
.toc-button {
  padding: 2.47vh 6.11vw;
  border: none;
  border-radius: 0.7rem;
  background: #40422b;
  color: #fff;
  text-align: center;
  cursor: pointer;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.66vw, 2.4rem);
  font-weight: 500;
  text-decoration: none;
}

/* -----------------------------
   PROGRESS BAR
----------------------------- */
.progress-wrap {
  width: 100%;
  height: 4.2rem;
  margin-top: 5.48vh;

  background: #b9c7bf;
  border-radius: 0.5rem;
  overflow: hidden;
}

.progress-fill {
  width: 0%;
  height: 100%;
  background: #40422b;
  transition: width 0.12s linear;
}

#progress-bar.hidden {
  opacity: 0;
  pointer-events: none;
}

/* -----------------------------
   TOC LIST STYLING
----------------------------- */
#post-toc,
#post-toc-duplicate {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;

  font-family: "Manrope", sans-serif;
  font-size: clamp(1rem, 1.11vw, 1.6rem);
}

#post-toc ul,
#post-toc-duplicate ul {
  padding-left: 1rem;
  margin: 0;
  list-style-position: unset;
  font-size: unset;
}

#post-toc-list li,
#post-toc-duplicate ul li {
  margin-top: 2.74vh;
  color: #40422b;
}

#post-toc a,
#post-toc-duplicate a {
  display: block;
  padding: 0.2rem 0;
  text-decoration: none;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-weight: 500;
}

/* Active state */
#post-toc-list a.active,
#post-toc-duplicate a.active {
  font-weight: 800;
}
.post-article {
  width: 55.28vw;
  box-sizing: border-box;
}
.post-content {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.post-article h2 {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.post-article h3 {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 4rem;
}
.post-article p {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.39vw, 2rem);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.03rem;
  margin-bottom: 4rem;
}
.post-article p:has(+ p) {
  margin-bottom: -2rem;
}
.post-article p a {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.39vw, 2rem);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.03rem;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 6%;
  text-underline-offset: 15%;
  text-underline-position: from-font;
}
.post-article ul {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.39vw, 2rem);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.03rem;
  margin-top: -8rem;
  padding-left: 1.39vw;
  list-style-position: inside;
}
.post-article ul:has(+ p) {
  margin-bottom: -1rem;
}
.post-article ul:has(+ h2) {
  margin-bottom: 4rem;
}
.post-article ul li {
  margin-top: 3rem;
}
.post-block-inner {
  margin-top: 5.48vh;
}
.table-wrapper {
  position: relative;
}
.open-table {
  background: transparent;
  padding: 0;
  border: none;
  cursor: pointer;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.39vw, 2rem);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.03rem;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 6%;
  text-underline-offset: 15%;
  text-underline-position: from-font;
}
#big-table {
  display: none;
  width: calc(100vw - 4.44vw);
  position: relative;
  margin-left: calc(-1 * (var(--article-left)) + 2.22vw);
  z-index: 10;
  background: #fef3df;
}
#toc-stop-block {
  display: none;
  height: 10rem;
  width: calc(100vw - 4.44vw);
  position: relative;
  margin-left: calc(-1 * (var(--article-left)) + 2.22vw);
  pointer-events: none;
}
body.table-open #toc-stop-block {
  display: block;
}
#big-table table {
  border-collapse: collapse;
  width: 100%;
}
#big-table tr th {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.39vw, 2rem);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.03rem;
  padding-bottom: 2.74vh;
  padding-top: 1.78vh;
}
#big-table tr td {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.39vw, 2rem);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.03rem;
  border-left: 0.2rem solid #40422b;
  border-bottom: 0.2rem solid #40422b;
  text-align: left;
  padding: 5.89vh 2.22vw;
}
#big-table th:first-child {
  border-right: 0.2rem solid #40422b;
  border-bottom: 0.2rem solid #40422b;
  border-left: none;
  text-align: center;
}
#big-table tr td:first-child {
  border-right: 0.2rem solid #40422b;
  border-bottom: 0.2rem solid #40422b;
  border-left: none;
  text-align: left;
  padding: 5.89vh 2.22vw 5.89vh 0;
}
#big-table tr td:last-child {
  border-left: 0.2rem solid #40422b;
  border-bottom: 0.2rem solid #40422b;
  text-align: left;
  padding: 5.89vh 0 5.89vh 2.22vw;
}
#big-table th {
  border-left: 0.2rem solid #40422b;
  border-bottom: 0.2rem solid #40422b;
  text-align: center;
}
.section-related {
  margin-top: 10rem;
  margin-bottom: 11.5rem;
  border-top: 2px solid #40422b;
}
.section-related h2 {
  margin-top: 2rem;
  margin-bottom: 8rem;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1.6rem;
}
.no-related {
  grid-column: 2/3;
  color: #a59753;
  font-family: "Manrope", sans-serif;
  font-size: clamp(2rem, 2.22vw, 3.2rem);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  justify-self: center;
  align-self: center;
}
.no-related a {
  text-decoration: underline;
  color: #a59753;
}
.related-card {
  display: block;
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.related-card img {
  object-fit: cover;
  border-radius: 1.7rem;
  display: block;
  width: 100%;
  height: auto;
}
.related-meta {
  display: flex;
  justify-content: space-between;
  padding: 2.74vh 0;
}
.related-category {
  border-radius: 0.7rem;
  background: #cad3ce;
  padding: 1.5rem 4.4rem;
  color: #40422b;
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.39vw, 2rem);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.related-date {
  color: #40422b;
  text-align: right;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.39vw, 2rem);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  align-self: center;
}
.related-title {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
@media screen and (max-width: 1000px) {
  .related-category {
    padding: 1.5rem 1rem;
  }
}
@media screen and (max-width: 768px) {
  .post-header {
    flex-direction: column-reverse;
    gap: 3.5rem;
  }
  .post-header .flex-left,
  .post-header .flex-right {
    width: unset;
  }
  .reading-time-div {
    width: unset;
    gap: 0.2rem;
    min-width: 0;
    align-items: center;
  }
  .date-post-div {
    width: unset;
    gap: 0.2rem;
    min-width: 0;
    white-space: nowrap;
  }
  .post-hero {
    width: 100%;
    height: 100%;
    aspect-ratio: 3/2;
  }
  .post-meta {
    margin-top: 0;
    flex-wrap: nowrap;
    align-items: center;
  }
  #post-category-primary,
  #post-reading-time,
  #post-date {
    font-size: 1.5rem;
    align-self: center;
    white-space: nowrap;
  }
  #post-category-secondary,
  .category-secondary-line {
    display: none;
  }
  .reading-time-div img {
    margin: auto;
    height: 2rem;
    width: 2rem;
  }
  .date-post-div img {
    margin: auto;
    height: 1.8rem;
    width: 1.8rem;
  }
  .flex-right {
    display: flex;
    flex-direction: column-reverse;
    gap: 1.5rem;
  }
  .post-author {
    display: none;
  }
  #post-title {
    font-size: 2.4rem;
    text-align: center;
    font-weight: 700;
  }
  .post-grid {
    margin-top: 9rem;
    gap: 0;
    justify-content: start;
  }
  .introduction-post {
    padding: 0 4.1vw;
  }
  .post-article {
    width: unset;
  }
  .toc-wrapper {
    display: none;
  }
  .post-block {
    margin-bottom: 6rem;
  }
  .post-block h3 {
    font-size: 2.4rem;
  }
  .post-block-inner {
    margin-top: 2rem;
  }
  .post-block-inner p {
    font-size: 1.5rem;
    letter-spacing: -0.0225rem;
  }
  .section-related {
    margin-top: 3rem;
    margin-bottom: 13rem;
    border-top: 1.5px solid #40422b;
  }
  .section-related h1 {
    font-size: 1.8rem;
    margin-top: 1rem;
    margin-bottom: 6rem;
  }
  .related-grid {
    display: flex;
    flex-direction: column;
    gap: 6rem;
  }
  .related-grid img {
    aspect-ratio: 3/2;
  }
  .related-meta {
    padding: 1.5rem 0;
  }
  .related-category {
    font-size: 1.5rem;
    width: 19.3rem;
    padding: 1.2rem 0px;
  }
  .related-date {
    font-size: 1.5rem;
    font-weight: 400;
  }
  .related-title {
    font-size: 1.8rem;
  }
}

/* COURSES */

/* Header */
.courses-header {
  padding: 0 2.22vw;
}
.background-courses {
  position: relative;
  height: 71vh;
  padding: 0 2.22vw;
  background-color: #fef3df;
}
:lang(uk) .my-courses-svg-en {
  display: none;
}
.my-courses-svg-en {
  display: block;
  margin: 0;
  width: 100%;
  margin-bottom: -1.2rem;
}
.my-mobile-en {
  display: none;
}
.courses-mobile-en {
  display: none;
}
:lang(en) .online-courses {
  display: none;
}
.online-courses {
  display: block;
  margin: 0;
  width: 100%;
  margin-bottom: 2rem;
}
.online-mobile-ua {
  display: none;
}
.courses-mobile-ua {
  display: none;
}
.product-grid {
  grid-column: 1/13;
  grid-row: 2/5;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  flex-direction: row-reverse;
  gap: 1.6rem;
  justify-content: center;
}
.product-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  justify-content: center;
}
.product-card a {
  text-decoration: none;
}
.product-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.product-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  aspect-ratio: unset !important;
  border-radius: 1.5rem;
}
.woocommerce-placeholder.wp-post-image,
.attachment-woocommerce_thumbnail {
  width: 100%;
  height: 100%;
  border-radius: 1.5rem;
}
.product-card h3 {
  color: #40422b;
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.8rem, 1.38vw, 2rem);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: 2rem;
  min-height: 2.6em;
}
.price {
  color: #40422b;
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-top: auto;
}
.courses-section {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: auto;
  border-top: 2px solid #40422b;
  margin-bottom: 13rem;
  column-gap: 1.6rem;
}
.courses-section h2 {
  grid-column: 1 / 13;
  grid-row: 1/2;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 500;
  text-transform: uppercase;
  margin-top: 2rem;
  margin-bottom: 8rem;
}
@media screen and (max-width: 768px) {
  .background-courses {
    height: 29.6rem;
    padding: 0 4.1vw;
  }
  .my-courses-svg-en {
    display: none;
  }
  .my-courses-svg {
    display: none;
  }
  .online-courses {
    display: none;
  }
  :lang(uk) .my-mobile-en {
    display: none;
  }
  :lang(uk) .courses-mobile-en {
    display: none;
  }
  :lang(en) .my-mobile-en {
    display: block;
    position: relative;
    z-index: 2;
    width: 26.66%;
    margin-bottom: -1.1rem;
  }
  :lang(en) .courses-mobile-en {
    width: 100%;
    margin-bottom: 1rem;
    display: block;
  }
  .my-mobile {
    position: relative;
    width: 29.05%;
    margin-bottom: -1.2rem;
    z-index: 2;
  }
  .courses-mobile {
    width: 100%;
    margin-bottom: 1rem;
  }
  :lang(en) .online-mobile-ua {
    display: none;
  }
  :lang(en) .courses-mobile-ua {
    display: none;
  }
  :lang(uk) .online-mobile-ua {
    display: block;
    width: 80.73%;
    margin-bottom: 0.5rem;
  }
  :lang(uk) .courses-mobile-ua {
    width: 81.84%;
    margin-bottom: 1rem;
    display: block;
    justify-self: end;
  }
  .courses-header {
    padding: 0 4.1vw;
  }
  .courses-section {
    display: block;
    margin-bottom: 9rem;
    border-top: 1.5px solid #40422b;
  }
  .courses-section h2 {
    font-size: 1.8rem;
    margin-bottom: 6rem;
    margin-top: 1rem;
  }
  .product-grid {
    display: flex;
    flex-direction: column-reverse;
    gap: 6rem;
  }
  .product-card h3 {
    font-size: 1.8rem;
    margin-top: 1.5rem;
    font-weight: 500;
    min-height: unset;
  }
  .price {
    font-size: 1.8rem;
    margin-top: 0.5rem;
  }
}

/* HOW TO DEAL WITH TOXIC PEOPLE PAGE */
.toxic-header {
  padding: 0 2.22vw;
  position: relative;
}

/* FREE RESOURCES PAGE */
.background-resources {
  width: 100%;
  height: 50rem;
  background-color: #fef3df;
}
:lang(uk) .free-resources-svg {
  display: none;
}
.free-resources-svg {
  display: block;
  width: 100%;
  margin-bottom: 2rem;
}
:lang(en) .free-resources-flex.ua {
  display: none;
}
.free-resources-flex {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
}
.resources-svg {
  align-self: end;
  width: 48.33%;
}
.free-svg {
  width: 100%;
}
.free-1-svg,
.free-2-svg,
.resources-svg-ua {
  display: none;
}
.courses-section-free {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: auto;
  border-top: 2px solid #40422b;
  margin-bottom: 13rem;
  column-gap: 1.6rem;
}
.courses-section-free h2 {
  grid-column: 1 / 13;
  grid-row: 1/2;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  margin-top: 2rem;
  margin-bottom: 8rem;
}
.free-resources-mobile {
  display: none;
}
@media screen and (max-width: 768px) {
  .toxic-header {
    padding: 0 4.1vw;
  }
  .background-resources {
    height: 24.5rem;
  }
  .free-resources-svg {
    display: none;
  }
  .free-resources-flex.ua {
    display: none;
  }
  .free-svg {
    display: none;
  }
  .resources-svg {
    display: none;
  }
  .resources-svg-ua {
    margin-bottom: -1rem;
  }
  :lang(uk) .free-resources-mobile {
    display: none;
  }
  .free-resources-mobile {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    margin-bottom: 1rem;
    gap: 1rem;
  }
  :lang(en) .free-1-svg {
    display: none;
  }
  :lang(en) .free-2-svg {
    display: none;
  }
  :lang(en) .resources-svg-ua {
    display: none;
  }
  :lang(uk) .free-1-svg,
  .free-2-svg,
  .resources-svg-ua {
    display: block;
  }
  :lang(uk) .free-1-svg {
    width: 100%;
  }
  :lang(uk) .free-2-svg {
    width: 62%;
  }
  :lang(uk) .resources-svg-ua {
    width: 87%;
  }
  .free-resources-mobile img:first-child {
    width: 52.56%;
  }
  .courses-section-free h2 {
    font-size: 1.8rem;
    margin-bottom: 6rem;
    margin-top: 1rem;
  }
}

/* UNFINISHED DEVELOPMENT CYCLES PRODUCT PAGE */
/* ---------- SECTIONS ---------- */
.section-label {
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 3rem;
  text-transform: uppercase;
  margin-bottom: 8rem;
  padding-top: 2rem;
  color: #40422b;
  margin-top: 4rem;
  border-top: 2px #40422b solid;
}
.section-label.light {
  color: #ffffff;
  border: none;
  margin-top: 0;
  padding-top: 2rem;
}

/* ---------- HERO ---------- */
#hero {
  margin-top: 2rem;
  border-radius: 3rem;
  background: #40422b;
}
.hero-card {
  overflow: hidden;
  position: relative;
  height: 73rem;
  align-items: center;
  text-align: center;
}
/* circular arrows SVG decoration */
.hero-circle {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-circle svg:first-child {
  position: absolute;
  top: 0;
  left: calc(50% - 38.3px);
  transform: translateX(-50%);
}
.hero-circle svg:nth-child(2) {
  position: absolute;
  bottom: 0;
  left: calc(50% + 38.3px);
  transform: translateX(-50%);
}
.hero-circle-mobile {
  display: none;
}
.cta-circle-mobile {
  display: none;
}
.cta-circle {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cta-circle svg:first-child {
  position: absolute;
  top: 0;
  left: calc(50% - 38.3px);
  transform: translateX(-50%);
}
.cta-circle svg:nth-child(2) {
  position: absolute;
  bottom: 0;
  left: calc(50% + 38.3px);
  transform: translateX(-50%);
}
.hero-content {
  position: relative;
  z-index: 2;
}
.hero-pill {
  display: inline-block;
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
  border-radius: 3rem;
  background: #ffb55e;
  margin-top: 30.5rem;
}
.hero-pill h1 {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.hero-pill-mobile {
  display: none;
}
.hero-subtitle {
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 8rem;
}
.hero-cta {
  display: inline-block;
  background: #fef3df;
  border-radius: 0.7rem;
  padding: 1.8rem 3.4rem;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 2.4rem;
  color: #40422b;
  cursor: pointer;
  border: none;
  transition:
    background 0.2s,
    transform 0.2s;
}
.hero-cta:hover {
  background: #ded5c5;
}
.hero-badge {
  position: absolute;
  bottom: 3rem;
  right: 3rem;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 3rem;
  text-transform: uppercase;
  color: #ffffff;
}

/* ---------- ABOUT ---------- */
.about-quote-box {
  background: #ffb55e;
  border-radius: 2rem;
  margin: 0 auto;
  padding: 3rem 3.6rem;
  margin-bottom: 13rem;
}
.about-content {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
}
.about-quote-box p {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: normal;
  color: #40422b;
}
.about-body {
  max-width: 68rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.about-body .about-quote-box {
  margin-top: 10rem;
  border: 2px #40422b solid;
}
.about-body > p {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* ---------- FOR WHOM ---------- */
#for-whom {
  background: #40422b;
  margin: 0 -2.22vw;
  padding: 0 2.22vw 11rem 2.22vw;
}
.cards-grid {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.card-item {
  border-radius: 1rem;
  background: #ffb55e;
  padding: 0 2rem 2rem 2rem;
  position: relative;
  width: 22.92vw;
}
.card-num {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 3.2rem;
  color: #40422b;
  margin-bottom: 1rem;
  display: block;
}
.card-item p {
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  line-height: normal;
  color: #40422b;
}

/* row 2 of cards — centered 2 items */
.cards-grid-row2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 11rem;
  gap: 15vw;
}
.cards-grid-row2 .card-item:nth-child(1) {
  grid-column: 2;
}
.cards-grid-row2 .card-item:nth-child(2) {
  grid-column: 3;
}

/* ---------- FORMAT ---------- */
#format .section-label {
  border-top: none;
  padding-top: 0;
  margin-top: 2rem;
}
.format-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13.33vw;
  align-items: start;
}
.format-inner > div:nth-child(2) {
  height: 100%;
}
.format-list {
  display: flex;
  flex-direction: column;
  border-right: 2px #b1a463 solid;
  border-left: 2px #b1a463 solid;
}
.format-row {
  display: flex;
  align-items: flex-start;
  padding: 2.6rem 0 2.6rem 2.6rem;
  border-bottom: 2px solid #b1a463;
}
.format-row:first-child {
  border-top: 2px solid #b1a463;
}
.format-row p {
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* Pricing cards */
.pricing-title {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 700;
  line-height: 3.3rem;
  letter-spacing: -0.036rem;
  margin-bottom: 8rem;
  text-align: center;
}
.pricing-container {
  height: 32.8rem;
  display: flex;
  flex-direction: column;
}
.pricing-card {
  border: 2px solid #40422b;
  border-radius: 1rem;
  padding: 2rem 0 2.5rem 2.5rem;
  flex-grow: 1;
}
.pricing-card.dark {
  background: #40422b;
  border-color: #40422b;
  margin-top: 1.6rem;
  position: relative;
}
.circle-right {
  position: absolute;
  top: -1.5rem;
  right: -1.5rem;
  background: #ffb55e;
  width: 8rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
}
.circle-right svg {
  display: block;
  position: absolute;
  top: 1.4rem;
  right: 1.8rem;
}
.pricing-card h3 {
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  font-size: 2.4rem;
  margin-bottom: 2rem;
}
.pricing-card.dark h3 {
  color: white;
}
.pricing-card p {
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  line-height: normal;
  max-width: 39.2rem;
}
.pricing-card.dark p {
  color: white;
  max-width: 46.7rem;
}

/* ---------- RESULTS ---------- */
#results .section-label {
  margin-top: 26rem;
}
.results-list {
  margin-top: 20px;
}
.result-row {
  display: flex;
  align-items: center;
  padding: 3rem 0;
  border-bottom: 2px solid #b1a463;
  gap: 7rem;
}
.results-inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.result-num {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 5rem;
  color: #40422b;
  line-height: normal;
  align-self: baseline;
}
.result-title {
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  color: #40422b;
  font-style: normal;
  font-weight: 700;
  line-height: 3.3rem;
  letter-spacing: -0.036rem;
}
.result-desc {
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: #40422b;
}

/* ---------- CTA BAND ---------- */
#cta-band {
  background: #ffb55e;
  text-align: center;
  margin: 0 -2.22vw;
  padding: 8rem 2.22vw 13rem 2.22vw;
  position: relative;
  overflow: hidden;
  margin-top: 13rem;
  margin-bottom: 13rem;
}
.cta-band-circle {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0.18;
}
.cta-band-circle svg {
  width: 900px;
  height: 900px;
}
.cta-band-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  z-index: 2;
  align-items: center;
}
.cta-band-quote {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 2.4rem;
  line-height: normal;
  color: #40422b;
}
.cta-band-sub {
  color: #40422b;
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 4rem;
}
.cta-band-btn {
  display: inline-block;
  color: white;
  border-radius: 0.7rem;
  background: #40422b;
  padding: 1.8rem 3.4rem;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 2.4rem;
  cursor: pointer;
  border: none;
  transition:
    opacity 0.2s,
    transform 0.2s;
  max-width: 44.8rem;
}
.cta-band-btn:hover {
  background: #5a5c3a;
}

/* ---------- ANIMATION ---------- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-up {
  animation: fadeUp 0.7s ease both;
}
.delay-1 {
  animation-delay: 0.1s;
}
.delay-2 {
  animation-delay: 0.2s;
}
.delay-3 {
  animation-delay: 0.3s;
}
@media (max-width: 1300px) {
  .pricing-container {
    height: 35.6rem;
  }
}
@media (max-width: 1000px) {
  .pricing-container {
    height: 38.4rem;
  }
}
@media (max-width: 830px) {
  .pricing-container {
    height: 41.2rem;
  }
}
@media (max-width: 768px) {
  #hero {
    margin-top: 1.6rem;
    border-radius: 1.5rem;
  }
  .hero-card {
    height: 64.9rem;
  }
  .hero-pill {
    display: none;
  }
  .hero-pill-mobile {
    display: flex;
    flex-direction: column;
    margin-top: 23.8rem;
    margin-bottom: 1.5rem;
  }
  .hero-pill-mobile h1 {
    color: #40422b;
    text-align: center;
    font-family: "Manrope", sans-serif;
    font-size: 2.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
  .hero-pill-mobile h1:first-child {
    display: inline-block;
    padding: 1rem 1.5rem;
    border-radius: 2.2rem;
    max-width: 26.3rem;
    background: #ffb55e;
    margin: 0 auto;
    margin-bottom: -1.5rem;
    z-index: 1;
  }
  .hero-pill-mobile h1:nth-child(2) {
    display: inline-block;
    padding: 1rem 1.5rem;
    border-radius: 2.2rem;
    background: #ffb55e;
    margin: 0 auto;
  }
  .hero-subtitle {
    font-size: 1.5rem;
    text-align: center;
    max-width: 23.7rem;
    margin: 0 auto;
    margin-bottom: 19rem;
  }
  .hero-cta {
    padding: 1.8rem 1.7rem;
    font-size: 1.8rem;
    width: 91%;
  }
  .hero-badge {
    top: 1.8rem;
    left: 2rem;
    font-size: 1.8rem;
    text-align: left;
    line-height: 2rem;
  }
  .section-label {
    font-size: 1.8rem;
    margin-top: 1rem;
    margin-bottom: 6rem;
    border-top: 1.5px #40422b solid;
  }
  .about-quote-box {
    padding: 3rem 3.4rem 3.4rem 3.4rem;
    margin-bottom: 9rem;
  }
  .about-quote-box p {
    font-size: 1.8rem;
  }
  .about-body {
    gap: 2rem;
  }
  .about-body > p {
    font-size: 1.5rem;
  }
  .about-body .about-quote-box {
    margin-top: 6rem;
    border: 1.5px #40422b solid;
  }
  #for-whom {
    margin: 0 -4.1vw;
    padding: 0 4.1vw 9rem 4.1vw;
  }
  .cards-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    row-gap: 0.8rem;
  }
  .card-item {
    width: unset;
  }
  .card-num {
    font-size: 2.4rem;
  }
  .card-item p {
    font-size: 1.5rem;
  }
  .cards-grid .card-item:first-child {
    grid-column: 2/7;
    grid-row: 1/2;
  }
  .cards-grid .card-item:nth-child(2) {
    grid-column: 1/6;
    grid-row: 2/3;
  }
  .cards-grid .card-item:nth-child(3) {
    grid-column: 2/7;
    grid-row: 3/4;
  }
  .cards-grid-row2 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    row-gap: 0.8rem;
    margin-top: 0.8rem;
  }
  .cards-grid-row2 .card-item:nth-child(1) {
    grid-column: 1/6;
    grid-row: 1/2;
  }
  .cards-grid-row2 .card-item:nth-child(2) {
    grid-column: 2/7;
    grid-row: 2/3;
  }
  .pricing-title {
    margin-bottom: 6rem;
    font-size: 1.8rem;
  }
  .format-list {
    border-right: 1.5px #b1a463 solid;
    border-left: 1.5px #b1a463 solid;
  }
  .format-row:first-child {
    border-top: 1.5px solid #b1a463;
  }
  .format-row {
    padding: 2rem 0 2rem 2rem;
    border-bottom: 1.5px solid #b1a463;
  }
  .format-row p {
    font-size: 1.5rem;
  }
  .pricing-container {
    height: unset;
    display: block;
  }
  .pricing-card {
    border: 1.5px solid #40422b;
  }
  .pricing-card h3 {
    font-size: 1.8rem;
  }
  .pricing-card p {
    font-size: 1.5rem;
  }
  .format-inner {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .result-row {
    gap: 2.6rem;
    padding: 2.5rem 0;
    border-bottom: 1.5px solid #b1a463;
  }
  #results .section-label {
    margin-top: 15rem;
  }
  .result-num {
    font-size: 3.2rem;
    align-self: center;
  }
  .results-inner {
    gap: 1.5rem;
  }
  .result-title {
    font-size: 1.8rem;
  }
  .result-desc {
    grid-column: 2;
    font-size: 1.5rem;
  }
  #cta-band {
    margin: 0 -4.1vw;
    margin-top: 8rem;
    padding: 19rem 4.1vw 4rem 4.1vw;
  }
  .cta-band-quote {
    font-size: 1.8rem;
    max-width: 33.9rem;
  }
  .cta-band-sub {
    font-size: 1.5rem;
    max-width: 33.5rem;
    margin-bottom: 14.9rem;
  }
  .cta-band-btn {
    padding: 1.8rem 1.7rem;
    font-size: 1.8rem;
    width: 91%;
  }
  .cta-circle {
    display: none;
  }
  .cta-circle-mobile {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: block;
  }
  .cta-circle-mobile svg:first-child {
    position: absolute;
    left: 0;
    top: 5.92rem;
  }
  .cta-circle-mobile svg:nth-child(2) {
    position: absolute;
    right: 0;
    top: 2rem;
  }
}
@media (max-width: 600px) {
  .hero-circle {
    display: none;
  }
  .hero-circle-mobile {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: block;
  }
  .hero-circle-mobile svg:first-child {
    position: absolute;
    left: 0;
    top: 9.72rem;
  }
  .hero-circle-mobile svg:nth-child(2) {
    position: absolute;
    right: 0;
    top: 5.8rem;
  }
  .hero-pill h1 {
    font-size: 20px;
    white-space: normal;
  }
  .result-row {
    grid-template-columns: 1fr;
  }
  .result-num {
    font-size: 34px;
  }
}

/* PRODUCT PAGE */
.type-product {
  display: flex;
  flex-direction: row;
  margin-top: 6.7rem;
  gap: 8.05vw;
}
.woocommerce-message {
  display: none;
}
.woocommerce-product-gallery__wrapper {
  display: grid;
  grid-template-columns: 21.6rem 13.2rem 23.2rem;
  row-gap: 1.6rem;
}
.woocommerce-product-gallery__image:first-child {
  grid-column: 1/4;
  grid-row: 1/2;
}
.woocommerce-product-gallery__image:nth-child(2) {
  grid-column: 1/2;
  grid-row: 2/3;
  width: 10rem;
  height: 10rem;
  justify-self: end;
}
.woocommerce-product-gallery__image:nth-child(3) {
  grid-column: 2/3;
  grid-row: 2/3;
  width: 10rem;
  height: 10rem;
  justify-self: center;
}
.woocommerce-product-gallery__image:nth-child(4) {
  grid-column: 3/4;
  grid-row: 2/3;
  width: 10rem;
  height: 10rem;
}
.related.products {
  display: none;
}

/*CART*/
#cart-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 900;
}
#cart-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 51.67vw;
  max-width: 100%;
  height: 100vh;
  background: #fef3df;
  display: flex;
  flex-direction: column;
  padding: 0 2.22vw;
  transition: right 0.4s ease;
  z-index: 950;
  overflow: scroll;
}
.cart-open #cart-drawer {
  right: 0;
}
.cart-open #cart-backdrop {
  opacity: 1;
  pointer-events: auto;
}
.cart-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #40422b;
  padding-bottom: 1.37vh;
  margin-bottom: 6.85vh;
  margin-top: 4.52vh;
}
.cart-item .info {
  position: relative;
}
.cart-drawer-title {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  margin: 0;
}
#close-cart {
  color: #40422b;
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.39vw, 2rem);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.cart-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.6rem;
  margin-bottom: 6.85vh;
}
.price-subtotal {
  color: #40422b;
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.39vw, 2rem);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 6.85vh;
  justify-self: start;
}
.cart-item img {
  width: 21.6rem;
  height: 21.6rem;
  object-fit: cover;
  border-radius: 1rem;
}
.cart-item .name {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.39vw, 2rem);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  max-width: 32rem;
  margin-bottom: 1.98vh;
}
.cart-item .remove-btn {
  position: absolute;
  top: -1.37vh;
  right: -0.9rem;
  padding: 0;
}
.cart-item .price-row {
  display: flex;
  align-items: center;
  gap: 1.39vw;
  border-radius: 0.5rem;
  border: 2px solid #40422b;
  max-width: 9.79vw;
  justify-content: space-evenly;
}
.quantity-btn {
  background: none;
  border: none;
  font-family: "Manrope", sans-serif;
  font-size: 3rem;
  color: #40422b;
  cursor: pointer;
  padding: 0;
}
.price-row span {
  color: #40422b;
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.39vw, 2rem);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.remove-btn {
  border: none;
  background: none;
  cursor: pointer;
  align-self: start;
  justify-self: end;
}
.cart-drawer-footer {
  border-top: 2px solid #40422b;
  padding-top: 2.1rem;
}
.cart-total-row {
  display: flex;
  justify-content: space-between;
}
.cart-total-label {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
}
#cart-drawer-total {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
}
.checkout-button {
  display: block;
  border-radius: 1rem;
  background: #40422b;
  justify-content: center;
  width: 100%;
  padding: 2.6vh 0;
  border: none;
  cursor: pointer;
  margin-top: 8rem;
  margin-bottom: 11rem;
  text-decoration: none;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: clamp(2rem, 2.22vw, 3.2rem);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-align: center;
}
.checkout-btn--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
#empty-cart-overlay {
  position: fixed;
  inset: 0;
  background: #fef3df;
  display: none;
  place-items: center;
  z-index: 980;
  text-align: center;
}
.top-navigation-empty-cart {
  position: absolute;
  top: 0;
  right: 2.22vw;
  display: flex;
  flex-direction: row;
  gap: 2.22vw;
}
.empty-main {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: clamp(2rem, 2.22vw, 3.2rem);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.bottom-text-ref {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.39vw, 2rem);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.bottom-text-ref a {
  color: #40422b;
}
.cart-empty #empty-cart-overlay {
  display: flex;
  flex-direction: column;
  gap: 1.37vh;
  align-items: center;
  justify-content: center;
}
body.cart-open,
body.cart-empty {
  overflow: hidden;
}
.woocommerce-mini-cart {
  list-style: none;
  padding: 0;
}
div .woocommerce-error {
  display: none;
}
.checkout-inline-error-message {
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: #df9357;
  text-align: start;
}
@media screen and (max-width: 768px) {
  .top-navigation-empty-cart {
    right: 4.1vw;
  }
  #cart-drawer {
    padding: 0 4.1vw;
    z-index: 1002;
    width: 91.8vw;
  }
  .cart-drawer-title {
    font-size: 1.8rem;
  }
  .cart-drawer-header {
    border-bottom: 0.15rem solid #40422b;
  }
  .cart-drawer-footer {
    border-top: 0.15rem solid #40422b;
  }
  #close-cart {
    font-size: 1.5rem;
  }
  .cart-total-label,
  #cart-drawer-total {
    font-size: 1.8rem;
  }
  .checkout-button {
    font-size: 1.8rem;
  }
  .cart-item {
    gap: 3.9rem;
  }
  .cart-item img {
    width: 17.5rem;
    height: 17.5rem;
    aspect-ratio: 1/1;
  }
  .cart-item .price-row {
    max-width: 14.4rem;
    border: 0.15rem solid #40422b;
  }
  .cart-item .name {
    font-size: 1.5rem;
    max-width: 14.4rem;
  }
  .price-subtotal {
    font-size: 1.5rem;
    margin-bottom: 4rem;
  }
  .price-row span {
    font-size: 1.8rem;
  }
  .quantity-btn {
    padding: 0;
  }
  .checkout-button {
    padding: 1.5rem 0;
  }
  #cart-badge {
    top: 2.5rem;
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 400px) {
  .cart-item .name {
    max-width: 10rem;
  }
}

/*CHECKOUT PAGE*/
.background-checkout {
  height: 26.85vh;
  background-color: #fef3df;
  padding: 0 2.22vw;
  position: relative;
}
.checkout-main-section {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1.6rem;
}
.checkout.woocommerce-checkout {
  grid-column: 1/13;
  grid-row: 1/2;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1.6rem;
}
.woocommerce-info {
  display: none;
}
.woocommerce-billing-fields h3 {
  display: none;
}
.select2-container--default .select2-selection--single {
  background: transparent;
  box-sizing: border-box;
  width: 100%;
  border-radius: 1rem;
  border: 2px solid #40422b;
  background-color: #fef3df;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.39vw, 2rem);
  font-weight: 400;
  line-height: normal;
  padding: 1.1rem 1.5rem;
  height: auto;
}
.select2-container .select2-selection--single .select2-selection__rendered {
  color: #40422b;
  padding: 0;
}
.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  display: none;
}
.select2-dropdown {
  background-color: #fef3df;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.39vw, 2rem);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 2px solid #40422b;
}
.checkout-part-1 {
  grid-column: 1/6;
  grid-row: 1/2;
}
#billing_address_2 {
  margin-top: 0.6rem;
}
.checkout-part-2 {
  grid-column: 1/6;
  grid-row: 2/3;
  margin-top: 8rem;
}
.checkout-text-1 {
  display: flex;
  gap: 2.4rem;
  margin-bottom: 2rem;
}
.one-checkout,
.email-text,
.two-checkout,
.payment-method-text {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
}
.checkout-text-2 {
  display: flex;
  gap: 2.4rem;
  margin-bottom: 2rem;
}
.payment-form label {
  box-sizing: border-box;
  border-radius: 1rem;
  border: 2px solid #40422b;
  margin-top: 2.74vh;
  display: flex;
  flex-direction: row;
  width: 100%;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.39vw, 2rem);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding: 1.5rem;
  text-transform: none;
}
input[type="radio"] {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  align-self: center;
  background-color: #fef3df;
  margin-right: 1.5rem;
  appearance: none;
  border: 2px #40422b solid;
  display: grid;
  place-content: center;
  border-radius: 50%;
}
input[type="radio"]::before {
  content: "";
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em #40422b;
}
input[type="radio"]:checked::before {
  transform: scale(1);
}

/* Place Order Section */
label.required_field {
  display: none;
}
.wc_payment_methods {
  margin: 0;
  padding: 0;
}
.wc_payment_method::marker {
  font-size: 0;
}
.wc_payment_method label {
  display: none;
}
.payment_box p {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: 2rem;
}
.woocommerce-privacy-policy-text p {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: 3rem;
}
.woocommerce-privacy-policy-link {
  color: #40422b;
  text-decoration: underline;
}
.form-row {
  justify-items: center;
}
.form-row button {
  border-radius: 1rem;
  background: #40422b;
  color: white;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  border: none;
  margin-top: 3.3rem;
  padding: 1.8rem 0;
  width: 100%;
  cursor: pointer;
  transition: background 0.3s ease;
}
/*Checkout Cart Summary*/
.checkout-part-3 {
  grid-column: 7/13;
  grid-row: 1/3;
}
.order-summary-text {
  align-self: center;
  border-bottom: 2px solid #40422b;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  padding-bottom: 2rem;
  margin-bottom: 4rem;
  text-transform: uppercase;
}
.checkout-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.6rem;
  margin-bottom: 4rem;
  position: relative;
}
.checkout-item-title {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.39vw, 2rem);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  max-width: 32rem;
  margin-bottom: 1.98vh;
}
.checkout-item-price {
  color: #40422b;
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.39vw, 2rem);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 6.85vh;
  justify-self: start;
}
.checkout-item-img {
  width: 21.6rem;
  height: 21.6rem;
  object-fit: cover;
  border-radius: 1rem;
}
.checkout-item-info {
  flex: 1;
}
.checkout-item-quantity {
  display: flex;
  align-items: center;
  gap: 1.39vw;
  border-radius: 0.5rem;
  border: 2px solid #40422b;
  max-width: 14.1rem;
  justify-content: space-evenly;
}
.checkout-item-quantity span {
  color: #40422b;
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 1.39vw, 2rem);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.checkout-qty-minus,
.checkout-qty-plus {
  background: none;
  border: none;
  font-family: "Manrope", sans-serif;
  font-size: 3rem;
  color: #40422b;
  cursor: pointer;
}
.checkout-remove {
  position: absolute;
  top: -1.37vh;
  right: 0;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}
.checkout-total-row {
  border-top: 2px solid #40422b;
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
}
.checkout-total-label,
#checkout-total {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
}
#checkout-order-summary p {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: clamp(2rem, 2.22vw, 3.2rem);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-align: center;
  margin-bottom: 6.85vh;
}
@media screen and (max-width: 768px) {
  .checkout-main-section {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 0.8rem;
  }
  .checkout.woocommerce-checkout {
    grid-column: 1/7;
    grid-row: 1/2;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 0.8rem;
  }
  .background-checkout {
    height: 10rem;
    padding: 0 4.1vw;
  }
  .checkout-part-1 {
    grid-column: 1/7;
    grid-row: 2/3;
    margin-top: 5.5rem;
  }
  .email-text {
    font-size: 1.8rem;
  }
  .checkout-text-1 {
    margin-bottom: 1.5rem;
  }
  .one-checkout,
  .two-checkout {
    display: none;
  }
  .checkout-part-2 {
    grid-column: 1/7;
    grid-row: 3/4;
    margin-top: 5.5rem;
  }
  .payment-method-text {
    font-size: 1.8rem;
  }
  .checkout-part-3 {
    grid-column: 1/7;
    grid-row: 1/2;
  }
  .order-summary-text {
    padding-bottom: 1rem;
    border-bottom: 0.15rem solid #40422b;
    font-size: 1.8rem;
  }
  .checkout-item {
    display: flex;
    gap: 3.9rem;
  }
  .checkout-item img {
    width: 17.5rem;
    height: 17.5rem;
    aspect-ratio: 1/1;
  }
  .checkout-item-title,
  .checkout-item-price {
    font-size: 1.5rem;
  }
  .checkout-item-price {
    margin-bottom: 4rem;
  }
  .checkout-item-quantity {
    max-width: 14.4rem;
  }
  .checkout-total-row {
    padding-top: 1rem;
    border-top: 0.15rem solid #40422b;
  }
  .checkout-total-label,
  #checkout-total {
    font-size: 1.8rem;
  }
  .select2-container--default .select2-selection--single {
    border-radius: 1rem;
    border: 0.15rem solid #40422b;
    font-size: 1.5rem;
  }
  .select2-dropdown {
    font-size: 1.5rem;
  }
  .select2-container--default .select2-search--dropdown .select2-search__field {
    border: 0.15rem solid #40422b;
  }
}
@media screen and (max-width: 390px) {
  .checkout-item-title {
    max-width: 10rem;
  }
}

/* NOT-FOUND-PAGE */
.not-found-page {
  background-image: url(../images/not-found-back.jpg);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: cover;
  height: 100vh;
}
.not-found-page main {
  background: unset;
}
.not-found-page #cart-badge[data-count]:not([data-count="0"]) {
  display: none;
}
.not-found-header {
  padding: 0 2.22vw;
  height: 10rem;
  position: relative;
}
.main-flex {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  margin-top: 8.7rem;
}
.not-found-code-mobile {
  display: none;
}
.not-found-text {
  margin-top: 5rem;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  max-width: 55rem;
}
:lang(uk).not-found-text {
  display: none;
}
:lang(en).not-found-text-ukr {
  display: none;
}
.not-found-text-ukr {
  margin-top: 5rem;
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  max-width: 55rem;
}
.homepage-link {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 500;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-transform: uppercase;
}
.homepage-link a {
  color: #40422b;
}
@media screen and (max-width: 768px) {
  .not-found-page {
    background-image: url(../images/not-found-back-mobile.jpg);
  }
  .not-found-header {
    padding: 0 4.1vw;
    height: 3.5rem;
  }
  .main-flex {
    gap: 6rem;
    margin-top: 14.4rem;
  }
  .not-found-code-mobile {
    display: block;
    margin: 0 auto;
  }
  .not-found-code {
    display: none;
  }
  .not-found-text {
    margin-top: 0;
    font-size: 1.5rem;
    max-width: 26.1rem;
    align-self: center;
  }
  .homepage-link {
    margin-top: 17rem;
    font-size: 1.8rem;
  }
}

/* COMING SOON */
.coming-soon-overlay {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 50vh;
  gap: 0.5rem;
  justify-content: center;
  align-content: center;
}
.coming-soon-overlay p {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  align-self: center;
}
.coming-soon-overlay a {
  color: #40422b;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 6%;
  text-underline-offset: 15%;
  text-underline-position: from-font;
  cursor: pointer;
  align-self: center;
}
@media screen and (max-width: 768px) {
  .coming-soon-overlay p {
    color: #40422b;
    font-family: "Manrope", sans-serif;
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    align-self: center;
  }
  .coming-soon-overlay a {
    color: #40422b;
    font-family: "Manrope", sans-serif;
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: 6%;
    text-underline-offset: 15%;
    text-underline-position: from-font;
    cursor: pointer;
    align-self: center;
  }
}

/* SERVICES */
.services-hero {
  padding-bottom: 2rem;
  border-bottom: 0.2rem solid #40422b;
  margin-bottom: 0;
}
.services-hero img {
  width: 100%;
}
.desktop-img,
.desktop-img-ua {
  display: block;
}
.services-list-mobile,
.services-list-mobile-ua {
  display: none;
}
:lang(uk) .desktop-img {
  display: none;
}
:lang(en) .desktop-img-ua {
  display: none;
}
.services-hero-title {
  display: block;
  width: 100%;
  height: auto;
}
/* ===== SERVICE SECTION ===== */
.service-section {
  padding-top: 2rem;
  margin-bottom: 13rem;
}

.service-header h1 {
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-weight: 500;
  font-style: normal;
  color: #40422b;
  text-transform: uppercase;
  margin-bottom: 8rem;
}

/* ===== TWO COLUMN LAYOUT ===== */
.service-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto auto;
  gap: 0 17.22vw;
}
.service-col-left,
.service-col-right {
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
}
.service-col-right-bottom {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.service-col-right-bottom .service-sub-section {
  margin-bottom: 0;
}
.service-col-left .service-sub-section:nth-child(3),
.service-col-right .service-sub-section:nth-child(4) {
  margin-bottom: 4rem;
}

.service-sub-section {
  margin-bottom: 13rem;
}
.service-sub-section h2 {
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-weight: 500;
  color: #40422b;
  margin-bottom: 2rem;
}
.service-intro p {
  margin-bottom: 13rem;
}
.service-sub-section p,
.service-intro p {
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-weight: 400;
  color: #40422b;
  line-height: 1.5;
  max-width: 56.4rem;
}

/* ===== PRICE CARD ===== */
.service-price-card {
  background-color: #cad3ce;
  border-radius: 2rem;
  padding: 3rem 3.4rem;
  margin-bottom: 13rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-height: 13.5rem;
  min-height: 13.5rem;
  box-sizing: border-box;
}
.price-format-text {
  display: none;
}
.service-price-card div {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.service-price {
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-weight: 500;
  color: #40422b;
  margin: 0;
}

.service-price-label {
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-weight: 400;
  color: #40422b;
  margin: 0;
}

.service-location {
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-weight: 400;
  color: #40422b;
  text-align: right;
  margin: 0;
  line-height: 1.4;
}

/* ===== TOPIC CARDS GRID ===== */
.service-topics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2rem;
  margin-top: 4rem;
  align-items: stretch;
}

.service-topic-card {
  background-color: #b1a463;
  border-radius: 2rem;
  padding: 3rem;
}

.service-topic-card--full {
  grid-column: 1 / -1;
}

.service-topic-card h3 {
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-weight: 500;
  color: #40422b;
  margin-bottom: 1.5rem;
}

.service-topic-card ul {
  padding-left: 2rem;
  margin: 0;
}

.service-topic-card li {
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-weight: 400;
  color: #40422b;
  line-height: 1.5;
  margin-bottom: 0.6rem;
}

/* ===== STEPS ===== */
.service-steps {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  margin-top: 4rem;
  margin-bottom: 7.7rem;
}

.service-step {
  display: flex;
  align-items: center;
  gap: 6.2rem;
}

.service-step-number {
  flex-shrink: 0;
  width: 5.4rem;
  height: 5.4rem;
  border: 1.5px solid #40422b;
  border-radius: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-weight: 400;
  color: #40422b;
}

.service-step p {
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-weight: 400;
  color: #40422b;
  line-height: 1.5;
  margin: 0;
}

/* ===== DISCLAIMERS ===== */
.service-disclaimer-card {
  background-color: #df9357;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  margin-bottom: 0.8rem;
  max-height: 6.4rem;
}
.service-disclaimer-card:last-child {
  margin-bottom: 0;
}

.service-disclaimer-card p {
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.4rem, 1.38vw, 2rem);
  font-weight: 400;
  color: #40422b;
  line-height: 1.4;
  margin: 0;
}

/* ===== BOOKING SECTION ===== */
.service-booking {
  margin-bottom: 13rem;
}

.service-booking h2 {
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-weight: 500;
  color: #40422b;
  margin-bottom: 2rem;
}

.service-booking p {
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-weight: 400;
  color: #40422b;
  line-height: 1.5;
  text-align: center;
  width: 100%;
}
.business-p {
  margin-bottom: 13rem;
}
.service-sub-section .business-h2 {
  margin-bottom: 4rem;
}
.service-topics-grid.business {
  display: block;
}
#business-psychology {
  margin-bottom: 26rem;
  border-top: 0.2rem solid #40422b;
}
.service-booking a {
  text-decoration: none;
}
.service-booking p a {
  color: #40422b;
  text-decoration: underline;
}
.service-booking-buttons {
  display: flex;
  gap: 1.6rem;
  justify-content: center;
  margin-top: 4rem;
}
.service-sub-section.left-bottom {
  margin-top: auto;
}
.service-btn-filled,
.service-btn-outline {
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  padding: 1.8rem 2rem;
  border-radius: 0.7rem;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.3s ease;
  box-sizing: border-box;
  width: 33.2rem;
}

.service-btn-filled {
  background-color: #40422b;
  color: #fff;
  border: none;
}

.service-btn-outline {
  background-color: transparent;
  color: #40422b;
  box-shadow: inset 0 0 0 3px #40422b;
}

.service-btn-filled:hover,
.service-btn-outline:hover {
  opacity: 0.75;
}

/* ===== SERVICES RESPONSIVE ===== */

/* Large desktop — tighten the gap */
@media screen and (max-width: 1280px) {
  .service-content {
    gap: 0 8rem;
  }
}

/* Tablet — reduce font sizes and spacing, keep two columns */
@media screen and (max-width: 1024px) {
  .service-content {
    gap: 0 4rem;
  }

  .service-header h1 {
    font-size: 2rem;
    margin-bottom: 5rem;
  }

  .service-sub-section {
    margin-bottom: 8rem;
  }

  .service-intro p {
    margin-bottom: 8rem;
  }

  .service-sub-section p,
  .service-intro p {
    font-size: 1.6rem;
    max-width: 100%;
  }

  .service-topic-card h3 {
    font-size: 2rem;
  }

  .service-topic-card li {
    font-size: 1.8rem;
  }

  .service-step p {
    font-size: 1.8rem;
  }

  .service-step {
    gap: 3rem;
  }

  .service-price-card {
    margin-bottom: 8rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    min-height: 19.5rem;
    max-height: 19.5rem;
    align-items: center;
  }
  .service-price-card p {
    text-align: center;
  }

  .service-location {
    text-align: left;
  }

  .service-booking p {
    font-size: 1.8rem;
  }

  .service-btn-filled,
  .service-btn-outline {
    font-size: 2rem;
    width: 28rem;
    padding: 1.8rem 0;
  }
}

/* Tablet portrait — stack columns */
@media screen and (max-width: 768px) {
  .services-hero {
    padding-bottom: 1rem;
    border-bottom: 0.15rem solid #40422b;
  }
  .services-hero .desktop-img,
  .services-hero .desktop-img-ua {
    display: none;
  }
  :lang(uk) .services-list-mobile {
    display: none;
  }
  :lang(en) .services-list-mobile-ua {
    display: none;
  }
  .services-list-mobile,
  .services-list-mobile-ua {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .services-list-mobile img:first-of-type {
    align-self: flex-end;
    width: 32.3%;
  }
  .services-list-mobile-ua img:first-of-type {
    align-self: flex-start;
    width: 70.5%;
  }
  .service-content {
    display: flex;
    flex-direction: column;
  }

  /* Reset subgrid — no longer needed in single column */
  .service-col-left,
  .service-col-right {
    display: contents;
  }
  .service-col-left .service-intro {
    order: 1;
  }
  .service-col-left .service-sub-section:nth-child(2) {
    order: 2;
  }
  .service-col-right .service-sub-section:nth-child(3) {
    order: 3;
    margin-bottom: 10rem;
  }
  .service-col-left .service-sub-section:nth-child(3) {
    order: 4;
    margin-bottom: 3rem;
  }
  .service-col-left .service-sub-section:nth-child(4) {
    order: 5;
    margin-bottom: 9rem;
  }
  .service-col-right .service-sub-section:nth-child(4) {
    order: 6;
    margin-bottom: 3rem;
  }
  .service-col-right .service-col-right-bottom {
    order: 7;
    margin-bottom: 9rem;
  }
  .service-col-right .price-format-text {
    order: 8;
    display: block;
    color: #40422b;
    font-family: "Manrope", sans-serif;
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 1.5rem;
  }
  .service-price-card p {
    text-align: start;
  }
  .service-col-right .service-price-card {
    order: 9;
  }
  .service-col-right-bottom {
    height: auto;
  }

  .service-section {
    margin-bottom: 8rem;
  }

  .service-header h1 {
    font-size: 1.8rem;
    margin-bottom: 6rem;
  }

  .service-sub-section {
    margin-bottom: 10rem;
  }

  .service-intro p {
    margin-bottom: 9rem;
  }
  .service-sub-section p,
  .service-intro p {
    font-size: 1.5rem;
    max-width: 100%;
  }

  .service-sub-section h2 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
  }

  /* Topic cards — stack to single column on mobile */
  .service-topics-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1.6rem;
    margin-top: 0;
  }

  .service-topic-card--full {
    grid-column: 1;
  }

  .service-topic-card {
    padding: 2rem;
  }

  .service-topic-card h3 {
    font-size: 1.8rem;
  }

  .service-topic-card li {
    font-size: 1.6rem;
    margin-bottom: 0.8rem;
  }

  /* Steps */
  .service-steps {
    gap: 2rem;
    margin-top: 2rem;
    margin-bottom: 9rem;
  }

  .service-step {
    gap: 2rem;
    align-items: flex-start;
  }

  .service-step-number {
    width: 4.4rem;
    height: 4.4rem;
    font-size: 2rem;
  }

  .service-step p {
    font-size: 1.6rem;
    padding-top: 0.8rem;
  }

  /* Price card */
  .service-price-card {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding: 2rem;
    margin-bottom: 9rem;
    min-height: 9.5rem;
    max-height: 9.5rem;
  }
  .service-price-card div {
    gap: 1rem;
  }
  .service-price-card .service-price-label {
    font-size: 1.5rem;
  }
  .service-price {
    font-size: 1.8rem;
  }
  .service-location {
    text-align: left;
    font-size: 1.5rem;
  }
  /* Disclaimers */
  .service-disclaimer-card {
    max-height: none;
    padding: 1rem 1rem;
  }

  .service-disclaimer-card p {
    font-size: 1.5rem;
  }
  .business-p {
    margin-bottom: 9rem;
  }
  /* Booking */
  .service-booking {
    margin-bottom: 9rem;
  }

  .service-booking h2 {
    font-size: 2rem;
    text-align: left;
  }

  .service-booking p {
    font-size: 1.6rem;
    text-align: left;
    margin-top: 1rem;
  }

  .service-booking-buttons {
    margin-top: 6rem;
    flex-direction: column-reverse;
    align-items: center;
    gap: 0.8rem;
  }

  .service-btn-filled,
  .service-btn-outline {
    font-size: 1.8rem;
    width: 100%;
    max-width: 36rem;
  }

  #business-psychology {
    margin-bottom: 18rem;
  }
  .service-topics-grid.business {
    margin-top: 3rem;
  }
  .service-sub-section .business-h2 {
    margin-bottom: 1.5rem;
  }
  .service-col-right .service-sub-section.bottom-mobile {
    margin-bottom: 9rem;
  }
}
/* Mobile — small phones */
@media screen and (max-width: 480px) {
  .service-sub-section p,
  .service-intro p {
    font-size: 1.5rem;
  }

  .service-topic-card li {
    font-size: clamp(1rem, 3.1vw, 1.5rem);
  }

  .service-step p {
    font-size: 1.5rem;
  }

  .service-step {
    gap: 1.6rem;
  }

  .service-step-number {
    width: 4rem;
    height: 4rem;
    font-size: 1.8rem;
    flex-shrink: 0;
  }
}

/* THANK YOU PAGE */
.thank-you-page {
  background-color: #fef3df;
}
.thank-you-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ty-state--success,
.ty-state--failed {
  display: flex;
  justify-self: center;
  flex-direction: column;
  gap: 2rem;
}
.ty-icon {
  margin: 0 auto;
}
.ty-state--success h1,
.ty-state--failed h1 {
  color: #40422b;
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 1rem;
}
.ty-state--success > p,
.ty-state--failed p {
  color: #40422b;
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 3rem;
}
.ty-booking-details {
  border-radius: 2rem;
  background: #cad3ce;
  display: flex;
  flex-direction: column;
  padding: 4rem;
  gap: 2.4rem;
}
.ty-info-row img {
  width: 12rem;
  height: 12rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
}
.ty-info-row {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}
.ty-info-row-inner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 3rem 0;
}
.ty-info-row-inner p:first-child {
  color: #40422b;
  text-align: left;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.ty-info-row-inner p:nth-child(2) {
  color: #40422b;
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.ty-detail-row {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
}
.ty-detail-row p {
  color: #40422b;
  text-align: right;
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.ty-actions {
  display: flex;
  flex-direction: row;
  gap: 1.6rem;
  justify-content: center;
  width: 100%;
}
.ty-btn {
  display: block;
  width: 100%;
  color: #fff;
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-decoration: none;
  padding: 1.8rem 0;
  width: 100%;
  border-radius: 0.7rem;
  background: #40422b;
  align-self: center;
}
@media screen and (max-width: 768px) {
  .ty-state--success,
  .ty-state--failed {
    gap: 1rem;
    width: 100%;
  }
  .ty-state--success h1,
  .ty-state--failed h1 {
    font-size: 2.4rem;
  }
  .ty-state--success > p,
  .ty-state--failed p {
    font-size: 1.5rem;
    margin-bottom: 2rem;
  }
  .ty-booking-details {
    padding: 2rem;
    gap: 2rem;
  }
  .ty-info-row img {
    width: 7rem;
    height: 7rem;
  }
  .ty-info-row {
    gap: 1.5rem;
  }
  .ty-info-row-inner {
    padding: 1rem 0;
  }
  .ty-info-row-inner p:first-child {
    font-size: 1.8rem;
  }
  .ty-info-row-inner p:nth-child(2) {
    font-size: 1.4rem;
  }
  .ty-detail-row p {
    font-size: 1.5rem;
  }
  .ty-btn {
    font-size: 1.8rem;
  }
}