@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

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

html {
  font-size: 62.5%;
}

body {
  background-color: #000000;
}

.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-style: normal;
  color: #fff;
}

/* Header Element */

header {
  width: 74.17vw;
  height: 3.66vw;
  margin-top: 4.8rem;
  font-size: 1.86rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header > .nav-toggle {
  display: none;
}

.mobile-nav-sheet {
  display: none;
}

header > .logo {
  max-width: 9.8em;
  height: 100%;
}

header > .logo > a > img {
  height: 100%;
  width: 100%;
}

header > nav {
  height: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
}

nav > div {
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  line-height: 1.22em;
  padding: 0.72em;
  letter-spacing: 0.05em;
  transition: ease-in-out 0.3s;
}

nav > div:hover {
  background-color: #323232;
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
}

nav > div > a {
  text-decoration: none;
  color: #fff;
}

header > .icon-container {
  height: 37.4%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-container > .icon:nth-child(2) {
  margin-left: 0.43em;
}

.icon > a > img {
  width: 1.43em;
  height: 1.43em;
}

/* Banner */

.banner {
  width: 89.7vw;
  height: 40.14vw;
  margin-top: 10.6rem;
  font-size: min(7.45rem, 3.9vw);
  position: relative;
}

.banner > .left-line,
.banner > .right-line {
  border-top: #fff solid 2px;
  position: absolute;
  top: 50%;
  width: 5%;
  opacity: 0.5;
}

.banner > .left-line {
  left: 0;
}

.banner > .right-line {
  right: 0;
}

.banner > img {
  height: 100%;
  width: 100%;
}

.banner > .banner-header {
  text-transform: uppercase;
  color: #fff;
  font-size: 1em;
  font-weight: 200;
  width: min(800px, 48%);
  position: absolute;
  top: 36%;
  left: 17%;
  line-height: 0.89em;
  letter-spacing: 0;
}

.banner-header > italic {
  font-style: italic;
}

.banner > .view-more-btn {
  font-weight: 400;
  font-style: italic;
  font-size: 0.36em;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  width: 10.4vw;
  height: 10.4vw;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  position: absolute;
  left: 17.4%;
  top: 54%;
  transition: ease-in-out 0.3s;
  cursor: pointer;
}

.banner > .view-more-btn:hover {
  background-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
}

/* Adevertisement  */

.adver-container {
  width: 85.13vw;
  height: 28.54vw;
  margin-top: 9.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 400;
  font-size: min(4.12rem, 2.15vw);
}

.adver-container > .adver-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.adver-wrapper > .adver-card {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  text-align: center;
}

.adver-card > img {
  position: absolute;
  top: 14%;
  left: 30%;
  height: 60%;
  width: 40%;
  z-index: -1;
}

.adver-card > .blur {
  opacity: 0.2;
}

.adver-card > .adver-card-container {
  padding: min(3rem, 6%);
  padding-top: min(25rem, 50%);
}

.adver-card-container > .header {
  font-size: 1em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.8;
}

.adver-card-container > .content {
  margin-top: min(2.1rem, 4.3%);
  font-size: 0.7em;
  opacity: 0.7;
}

.adver-card-container > .view-more-btn {
  margin-top: min(5.3rem, 10.6%);
  font-size: 0.58em;
  font-style: italic;
  text-decoration: underline;
  text-underline-offset: 0.5rem;
  color: #d0b278;
  cursor: pointer;
}

/* Specials */

.special-container {
  width: 86.9vw;
  height: 40.43vw;
  margin-top: 12.6rem;
  font-size: min(6.65rem, 3.36vw);
  display: flex;
  align-items: center;
}

.special-container > .special-image {
  width: 55%;
  height: 95%;
}

.special-image > img {
  width: 100%;
  height: 100%;
}

.special-container > .special-content {
  width: 45%;
  height: 100%;
  color: #fff;
  padding-left: min(8rem, 10%);
}

.special-content > .header {
  font-size: 1em;
  line-height: 0.9em;
  font-weight: 400;
  text-transform: uppercase;
  margin-top: min(15rem, 27%);
}

.special-content > .content {
  font-size: 0.4em;
  margin-top: min(3rem, 5%);
}

.special-content > .view-more-btn {
  margin-top: min(6rem, 11%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40%;
  height: 9%;
  font-style: italic;
  font-size: 0.35em;
  cursor: pointer;
  transition: ease-in-out 0.3s;
  -webkit-transition: ease-in-out 0.3s;
  -moz-transition: ease-in-out 0.3s;
  -ms-transition: ease-in-out 0.3s;
  -o-transition: ease-in-out 0.3s;
}

.special-content > .view-more-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

/* Questions */

.questions-container {
  width: 86.9vw;
  height: 42.8vw;
  margin-top: 10.64rem;
  font-size: min(6.65rem, 3.36vw);
  display: flex;
}

.questions-container > .question-content {
  width: 53%;
  height: 100%;
  padding: min(6rem, 3.6%);
}

.question-content > .header {
  font-size: 1em;
  line-height: 0.9em;
  font-weight: 400;
  text-transform: uppercase;
}

.question-content > .question-list {
  margin-top: min(6rem, 7.8%);
  height: 90%;
  display: flex;
  flex-direction: column;
  row-gap: 1.8rem;
  overflow-y: scroll;
}

.question-list > .question {
  opacity: 0.8;
}

.question > .question-title {
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: min(2.5rem, 3.3%);
  padding-right: min(4rem, 5.3%);
  font-size: 0.46em;
  text-transform: uppercase;
  position: relative;
}

.question-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
}

.question-title > .question-trigger > .swallow-icon {
  width: 2.1vw;
  height: 2.1vw;
  padding: 0.26vw;
  /* backdrop-filter: saturate(180%) blur(20px); */
  position: relative;
}

.swallow-icon > span {
  width: 1.56vw;
  height: 0.586vw;
  position: absolute;
  top: calc(0.26vw + 0.586vw - 1px);
  left: calc(0.26vw - 1px);
  transition: transform 1s cubic-bezier(0.86, 0, 0.07, 1),
    transform-origin 1s cubic-bezier(0.86, 0, 0.07, 1);
}

.swallow-icon > span:before,
.swallow-icon > span:after {
  content: "";
  width: 0.78vw;
  height: 0.13vw;
  background-color: rgb(245, 245, 247);
  position: absolute;
  bottom: 0;
  transition: transform 1s cubic-bezier(0.86, 0, 0.07, 1),
    transform-origin 1s cubic-bezier(0.86, 0, 0.07, 1);
}

.swallow-icon span:before {
  right: 50%;
  border-radius: 4px 0 0 4px;
  transform-origin: 100% 100%;
  transform: rotate(40deg);
  -webkit-border-radius: 4px 0 0 4px;
  -moz-border-radius: 4px 0 0 4px;
  -ms-border-radius: 4px 0 0 4px;
  -o-border-radius: 4px 0 0 4px;
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  -o-transform: rotate(40deg);
}

.swallow-icon span:after {
  left: 50%;
  border-radius: 0 4px 4px 0;
  transform-origin: 0 100%;
  transform: rotate(-40deg);
  -webkit-border-radius: 0 4px 4px 0;
  -moz-border-radius: 0 4px 4px 0;
  -ms-border-radius: 0 4px 4px 0;
  -o-border-radius: 0 4px 4px 0;
  -webkit-transform: rotate(-40deg);
  -moz-transform: rotate(-40deg);
  -ms-transform: rotate(-40deg);
  -o-transform: rotate(-40deg);
}

.question-trigger[aria-expanded="true"] > .swallow-icon > span {
  transform: translateY(-0.416vw);
  -webkit-transform: translateY(-0.416vw);
  -moz-transform: translateY(-0.416vw);
  -ms-transform: translateY(-0.416vw);
  -o-transform: translateY(-0.416vw);
}

.question-trigger[aria-expanded="true"] > .swallow-icon > span::before {
  transform-origin: 100% 0;
  transform: rotate(-40deg);
  -webkit-transform: rotate(-40deg);
  -moz-transform: rotate(-40deg);
  -ms-transform: rotate(-40deg);
  -o-transform: rotate(-40deg);
}

.question-trigger[aria-expanded="true"] > .swallow-icon > span::after {
  transform-origin: 0 0;
  transform: rotate(40deg);
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  -o-transform: rotate(40deg);
}

/* .question-title > .swallow-icon {
  width: 2.1vw;
  height: 2.1vw;
  padding: 0.26vw;
  backdrop-filter: saturate(180%) blur(20px);
  position: relative;
}

.swallow-icon > input {
  display: none;
}

.swallow-icon > span {
  width: 1.56vw;
  height: 0.586vw;
  position: absolute;
  top: calc(0.26vw + 0.586vw - 1px);
  left: calc(0.26vw - 1px);
  transition: transform 1s cubic-bezier(0.86, 0, 0.07, 1),
    transform-origin 1s cubic-bezier(0.86, 0, 0.07, 1);
}

.swallow-icon > span:before,
.swallow-icon > span:after {
  content: "";
  width: 0.78vw;
  height: 0.13vw;
  background-color: rgb(245, 245, 247);
  position: absolute;
  bottom: 0;
  transition: transform 1s cubic-bezier(0.86, 0, 0.07, 1),
    transform-origin 1s cubic-bezier(0.86, 0, 0.07, 1);
}

.swallow-icon span:before {
  right: 50%;
  border-radius: 4px 0 0 4px;
  transform-origin: 100% 100%;
  transform: rotate(40deg);
  -webkit-border-radius: 4px 0 0 4px;
  -moz-border-radius: 4px 0 0 4px;
  -ms-border-radius: 4px 0 0 4px;
  -o-border-radius: 4px 0 0 4px;
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  -o-transform: rotate(40deg);
}

.swallow-icon span:after {
  left: 50%;
  border-radius: 0 4px 4px 0;
  transform-origin: 0 100%;
  transform: rotate(-40deg);
  -webkit-border-radius: 0 4px 4px 0;
  -moz-border-radius: 0 4px 4px 0;
  -ms-border-radius: 0 4px 4px 0;
  -o-border-radius: 0 4px 4px 0;
  -webkit-transform: rotate(-40deg);
  -moz-transform: rotate(-40deg);
  -ms-transform: rotate(-40deg);
  -o-transform: rotate(-40deg);
}

.swallow-icon > input:checked ~ span {
  transform: translateY(-0.416vw);
  -webkit-transform: translateY(-0.416vw);
  -moz-transform: translateY(-0.416vw);
  -ms-transform: translateY(-0.416vw);
  -o-transform: translateY(-0.416vw);
}

.swallow-icon > input:checked ~ span:before {
  transform-origin: 100% 0;
  transform: rotate(-40deg);
  -webkit-transform: rotate(-40deg);
  -moz-transform: rotate(-40deg);
  -ms-transform: rotate(-40deg);
  -o-transform: rotate(-40deg);
}

.swallow-icon > input:checked ~ span:after {
  transform-origin: 0 0;
  transform: rotate(40deg);
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  -o-transform: rotate(40deg);
} */

.question-description {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 1s, padding 500ms, opacity 1s;
  font-size: 0.38em;
  line-height: 1.36em;
  text-align: justify;
  -webkit-transition: grid-template-rows 1s, padding 500ms, opacity 1s;
  -moz-transition: grid-template-rows 1s, padding 500ms, opacity 1s;
  -ms-transition: grid-template-rows 1s, padding 500ms, opacity 1s;
  -o-transition: grid-template-rows 1s, padding 500ms, opacity 1s;
}

.question-description[aria-hidden="false"] {
  grid-template-rows: 1fr;
  opacity: 1;
  padding: min(2.5rem, 3.3%);
  padding-right: min(10.5rem, 15%);
}

.question-description > div {
  overflow: hidden;
}

.questions-container > .question-image {
  width: 47%;
  height: 100%;
}

.question-image > img {
  height: 100%;
  width: 100%;
}

/* Therapist */

.therapist-container {
  width: 86.9vw;
  margin-top: 23.7rem;
  font-size: min(6.65rem, 3.36vw);
}

.therapist-container > .therapist-header {
  width: 100%;
  height: 14.9vw;
}

.therapist-header > .title {
  font-size: 1em;
  line-height: 0.9em;
  font-weight: 400;
  text-transform: uppercase;
}

.therapist-header > .description {
  margin-top: min(1.5rem, 0.8vw);
  font-size: 0.38em;
  line-height: 1.36em;
  font-weight: 200;
  color: rgba(255, 255, 255, 0.9);
}

.therapist-header > .view-more-btn {
  margin-top: min(2rem, 1vw);
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.3em;
  font-style: italic;
  width: 14%;
  height: 18%;
  cursor: pointer;
  transition: ease-in-out 0.3s;
  -webkit-transition: ease-in-out 0.3s;
  -moz-transition: ease-in-out 0.3s;
  -ms-transition: ease-in-out 0.3s;
  -o-transition: ease-in-out 0.3s;
}

.therapist-header > .view-more-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.therapist-container > .therapist-grid {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: auto;
  gap: 1.4vw 1.4vw;
}

.therapist-grid > .therapist-card {
  width: 20.7vw;
  height: 18.3vw;
  cursor: pointer;
  transition: ease-in-out 0.3s;
  -webkit-transition: ease-in-out 0.3s;
  -moz-transition: ease-in-out 0.3s;
  -ms-transition: ease-in-out 0.3s;
  -o-transition: ease-in-out 0.3s;
}

.therapist-grid > .therapist-card:hover {
  opacity: 0.7;
}

.therapist-grid > .therapist-card > img {
  height: 100%;
  width: 100%;
}

/* Services */

.service-mobile-container {
  display: none;
}

.service-container {
  width: 87.4vw;
  /* height: 73.5vw; */
  margin-top: 10.9rem;
  font-size: min(6.65rem, 3.36vw);
}

.service-container > .service-header {
  width: 87.4vw;
  height: 13.1vw;
  text-align: center;
}

.service-header > .title {
  font-size: 1em;
  line-height: 0.9em;
  font-weight: 400;
  text-transform: uppercase;
}

.service-header > .description {
  margin: 0 auto;
  margin-top: min(1.7rem, 1%);
  font-size: 0.38em;
  line-height: 1.36em;
  width: 71%;
  font-weight: 200;
  color: rgba(255, 255, 255, 0.9);
}

.service-container > .service-grid {
  width: 87.4vw;
  /* height: 60.4vw; */
  display: grid;
  grid-template-columns: 27.55% 22% 1% 26.57% 0.88% 22%;
  row-gap: 1.6%;
}

.service-grid > .service-grid-card {
  height: 100%;
}

.service-grid > img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.service-grid > .service-grid-card.first {
  display: flex;
}

.service-grid > .service-grid-card > .content {
  padding: min(4rem, 8.9%);
  padding-top: min(5rem, 12.1%);
  background: #232323;
  height: 100%;
}

.service-grid > .service-grid-card.first > .content {
  width: 55%;
}

.service-grid > .service-grid-card > img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.service-grid > .service-grid-card.first > img {
  width: 45%;
  height: 100%;
  object-fit: cover;
}

.service-grid > .service-grid-card > .content > .title {
  font-size: 0.85em;
}

.service-grid > .service-grid-card > .content > .description {
  font-size: 0.42em;
  font-weight: 200;
  padding-right: 12%;
  margin-top: min(2rem, 5.4%);
}

.service-grid > .service-grid-card.first {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
}

.service-grid > .service-grid-card.second {
  grid-column: 5 / 6;
  grid-row: 1 / 2;
}

.service-grid > .service-grid-card.third {
  grid-column: 7 / 8;
  grid-row: 1 / 2;
}

.service-grid > .service-grid-card.fourth {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}

.service-grid > .service-grid-card.fifth {
  grid-column: 3 / 8;
  grid-row: 3 / 4;
}

/* Footer  */

.footer {
  width: 76vw;
  height: 15.3vw;
  margin-top: 27.13rem;
  margin-bottom: 12.5rem;
  font-family: "Open Sans", sans-serif;
  display: flex;
  font-size: min(1.9rem, 1vw);
}

.footer > div > .footer-title,
.footer > div > .footer-footnote {
  font-weight: 600;
  font-size: 1em;
  line-height: 0.8em;
  letter-spacing: 0.21em;
}

.footer > div > .footer-footnote {
  margin-top: 7.45rem;
}

.footer > div > .footer-description {
  font-weight: 400;
  font-size: 1em;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6em;
}

.footer > .abt-company {
  width: 25.4%;
}

.footer > .abt-company > .footer-description {
  width: 90%;
}

.footer > .links {
  width: 15.8%;
  margin-left: 4%;
}

.footer > .links > .footer-list {
  font-size: 1em;
  display: flex;
  flex-direction: column;
  row-gap: 4.26rem;
}

.footer > .links > .footer-list > a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.8);
}

.footer > .contact-us {
  width: 12.8%;
  margin-left: 11%;
}

.footer > .contact-us > .footer-description > p {
  margin-top: 1.5rem;
}

.footer > .contact-us > .footer-description > p:first-child {
  margin-top: 0rem;
}

.footer > .contact-us > .footer-icon-container {
  margin-top: 5.32rem;
  display: flex;
  column-gap: 1.5rem;
}

.footer > .contact-us > .footer-icon-container > img {
  width: 2rem;
  height: 2rem;
}

.footer > .opening-hour {
  width: 27%;
  margin-left: 4%;
}

.footer > .opening-hour > .opening-hour-table {
  display: flex;
  column-gap: 6rem;
  font-size: 1em;
}

.footer > div > .footer-description,
.footer > .links > .footer-list,
.footer > .opening-hour > .opening-hour-table,
.footer > .contact-us > .footer-icon-container {
  margin-top: 5.32rem;
}

.opening-hour > .opening-hour-table > .left-side,
.opening-hour > .opening-hour-table > .right-side {
  display: flex;
  flex-direction: column;
  row-gap: 3rem;
}

/* All Therapist Page */

.therapist-title-container {
  width: 90%;
  height: 28.3vw;
  margin-top: 10.7rem;
  background-image: url("../assets/images/therapist-title-banner-edited.jpg");
  background-position: center;
  font-size: 6.7rem;
  line-height: 8.2rem;
  padding-top: 17.41%;
  padding-left: 3.6%;
  padding-right: 5.7%;
}

.therapist-title-container > .therapist-banner {
  display: none;
}

.therapist-title-container > .title {
  font-size: 1em;
  line-height: 1em;
  text-transform: uppercase;
}

.therapist-title-container > .description {
  font-size: 0.37em;
  line-height: 1.4em;
}

.therapist-all-main-grid {
  margin-top: 24.3rem;
  margin-bottom: 20rem;
  width: 85%;
  height: auto;
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 1% 1.7%;
}

.therapist-all-main-grid.index-page {
  width: 100%;
  margin-top: 5.3rem;
  margin-bottom: 5rem;
  gap: 2% 1.7%;
}

.therapist-all-main-grid > .therapist-therapist-card {
  height: 30vw;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 72.76%
  );
  position: relative;
  cursor: pointer;
  transition: ease-in-out 0.3s;
}

.therapist-all-main-grid > .therapist-therapist-card:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

.therapist-all-main-grid > .therapist-therapist-card > img {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: -1;
  border-radius: 1.1vw;
  -webkit-border-radius: 1.1vw;
  -moz-border-radius: 1.1vw;
  -ms-border-radius: 1.1vw;
  -o-border-radius: 1.1vw;
}

.therapist-all-main-grid > .therapist-therapist-card > .therapist-name {
  position: absolute;
  bottom: 7%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 4rem;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}

/* Therapist Page  */

.therapist-therapist-title {
  margin-top: 21.4rem;
  font-size: 10.7rem;
}

.therapist-skill-grid {
  margin-top: 4.4rem;
  width: 75%;
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  gap: 0 2%;
}

.therapist-skill-grid > .skill-single-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0.2rem solid #fff;
  border-radius: 0.8rem;
  height: 2.8vw;
  -webkit-border-radius: 0.8rem;
  -moz-border-radius: 0.8rem;
  -ms-border-radius: 0.8rem;
  -o-border-radius: 0.8rem;
  gap: 0 6%;
  font-size: 2.13rem;
  line-height: 2.6rem;
}

.therapist-skill-grid > .skill-single-grid > .skill-icon {
  width: 2.67rem;
  height: 2.67rem;
}

.therapist-skill-grid > .skill-single-grid > .skill-icon > img {
  width: 100%;
  height: 100%;
}

.therapist-button-grid {
  margin-top: 6rem;
  display: grid;
  grid-template-columns: auto auto;
  gap: 0 10%;
}

.therapist-button-grid > div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 13.9vw;
  height: 3.26vw;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 2.93rem;
  border-radius: 1.6vw;
  -webkit-border-radius: 1.6vw;
  -moz-border-radius: 1.6vw;
  -ms-border-radius: 1.6vw;
  -o-border-radius: 1.6vw;
  cursor: pointer;
}

.therapist-button-grid > .ca-btn {
  background: #414141;
}

.therapist-button-grid > .book-btn {
  background: #ffffff;
  color: #000;
}

.therapist-photos-container {
  margin-top: 16rem;
  width: 88%;
}

.therapist-photos-container > .photos-title {
  font-size: 5.33rem;
  line-height: 6.53rem;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
}

.therapist-photos-container > .mobile-photo-swiper {
  display: none;
}

.therapist-photos-container > .desktop-photo-swiper {
  width: 100%;
  height: 34vw;
  margin-top: 8rem;
  display: flex;
  gap: 4% 0;
}

.therapist-photos-container > .desktop-photo-swiper > .main-swiper {
  width: 32%;
  height: 100%;
}

.therapist-photos-container > .desktop-photo-swiper > .thumbs-swiper {
  width: 64%;
  height: 100%;
}

.swiper-slide > img {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}

.therapist-therapist-description {
  margin-top: 12.8rem;
  font-size: 2.4rem;
  line-height: 2.93rem;
  text-align: center;
  width: 78%;
}

/* Availability Page  */

.availability-avail-title {
  margin-top: 21.2rem;
  font-size: 10.7rem;
  line-height: 12.9rem;
}

.availability-avail-description {
  margin-top: 0.7rem;
  font-size: 2.4rem;
  line-height: 2.93rem;
  width: 81%;
  text-align: center;
}

.apply-filter-container {
  margin-top: 4.5rem;
  font-size: 4rem;
  line-height: 4.8rem;
  padding: 0 11.9%;
  width: 100%;
  height: 9vw;
  background: #242323;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.apply-filter-title {
  font-size: 1em;
}

.apply-filter-input-container {
  width: 60%;
  display: flex;
  justify-content: space-between;
}

.single-input-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 31.5%;
}

.single-input-container > label {
  font-size: 0.53em;
  line-height: 2em;
}

.single-input-container > select {
  /*appearance: none;
  */
  background-color: transparent;
  border: 1px solid #fff;
  border-radius: 0.5em;
  padding: 5%;
  width: 100%;
  font-family: inherit;
  font-size: 0.53em;
  line-height: 1.53em;
  color: #fff;
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  -ms-border-radius: 0.5em;
  -o-border-radius: 0.5em;
  outline: none;
  cursor: pointer;
}

.single-input-container > select {
  background-color: #242323;
}

.single-input-container > input {
  background-color: transparent;
  border: 1px solid #fff;
  color: #fff;
  border-radius: 0.5em;
  padding: 5%;
  width: 100%;
  font-family: inherit;
  font-size: 0.53em;
  line-height: 1.53em;
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  -ms-border-radius: 0.5em;
  -o-border-radius: 0.5em;
}

.single-input-container > input[type="date"] {
  color-scheme: dark;
}

.single-input-container > input[type="date"]:hover {
  background-color: transparent;
  border: 1px solid #fff;
}

.apply-filter-input-container > .apply-filter-btn {
  background-color: transparent;
  border: none;
  font-size: 0.53em;
  line-height: 2em;
  width: 25%;
  border: 1px solid #fff;
  border-radius: 0.5em;
}

.availability-avail-therapist {
  margin-top: 7.2rem;
  font-size: 4rem;
  line-height: 4.84rem;
}

.search-btn {
  margin-top: 3.87rem;
  font-size: 1.9rem;
  line-height: 2.27rem;
  display: flex;
  align-items: center;
  position: relative;
  width: 37.2vw;
}

.search-input {
  width: 100%;
  height: 2.5vw;
  line-height: 2.27rem;
  padding: 0 1.33rem;
  padding-left: 9%;
  border: 2px solid transparent;
  border-radius: 8px;
  outline: none;
  background-color: #f3f3f4;
  color: #0d0c22;
  transition: 0.3s ease;
  font-size: inherit;
  font-family: inherit;
}

.search-input::placeholder {
  color: #9e9ea7;
}

.search-input:focus,
input:hover {
  outline: none;
  border-color: rgba(36, 35, 35, 0.4);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgb(36 35 35 / 10%);
}

.search-icon {
  position: absolute;
  left: 4%;
  fill: #9e9ea7;
  width: 2.67rem;
  height: 2.67rem;
}

.response-mobile-container {
  display: none;
}

.response-container {
  margin-top: 7.6rem;
  width: 100%;
  font-size: 2.4rem;
  line-height: 2.93rem;
  padding-bottom: 13rem;
  border-bottom: 1px solid #4f4f4f;
}

.table-header {
  display: flex;
  justify-content: space-between;
  padding-left: 10%;
  padding-right: 12%;
  padding-bottom: 5.73rem;
  border-bottom: 2px solid #fff;
}

.table-header > .name-column {
  width: 4%;
}

.table-header > .date-column {
  width: 3.2%;
}

.table-header > .timing-column {
  width: 4.8%;
}

.table-header > .ethinicity-column {
  width: 6.3%;
}

.table-header > .age-column {
  width: 8.5%;
}

.table-row {
  margin-top: 0.5vw;
  display: flex;
  width: 90%;
  height: 4.3vw;
  align-items: center;
  border-radius: 2.15vw;
  -webkit-border-radius: 2.15vw;
  -moz-border-radius: 2.15vw;
  -ms-border-radius: 2.15vw;
  -o-border-radius: 2.15vw;
  transform: translateX(8.5%);
  -webkit-transform: translateX(8.5%);
  -moz-transform: translateX(8.5%);
  -ms-transform: translateX(8.5%);
  -o-transform: translateX(8.5%);
  transition: ease-in-out 0.3s;
  -webkit-transition: ease-in-out 0.3s;
  -moz-transition: ease-in-out 0.3s;
  -ms-transition: ease-in-out 0.3s;
  -o-transition: ease-in-out 0.3s;
}

.table-row > .name-result {
  margin-left: 1.5vw;
  text-align: left;
  width: 15%;
}

.table-row > .date-result {
  margin-left: 3%;
  text-align: center;
  width: 8%;
}

.table-row > .timing-result {
  margin-left: 9%;
  text-align: center;
  width: 12%;
}

.table-row > .ethinicity-result {
  margin-left: 7%;
  text-align: center;
  width: 15%;
}

.table-row > .age-result {
  margin-left: 10%;
  text-align: center;
  width: 4%;
}

.book-now-table-btn {
  margin-left: 5%;
  background-color: #fff;
  color: #000;
  width: 10%;
  height: 100%;
  border-radius: 2.15vw;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-border-radius: 2.15vw;
  -moz-border-radius: 2.15vw;
  -ms-border-radius: 2.15vw;
  -o-border-radius: 2.15vw;
  opacity: 0;
  transition: ease-in-out 0.3s;
  -webkit-transition: ease-in-out 0.3s;
  -moz-transition: ease-in-out 0.3s;
  -ms-transition: ease-in-out 0.3s;
  -o-transition: ease-in-out 0.3s;
  cursor: pointer;
}

.table-row:hover {
  background: #242323;
  transform: translateX(3%);
  -webkit-transform: translateX(3%);
  -moz-transform: translateX(3%);
  -ms-transform: translateX(3%);
  -o-transform: translateX(3%);
}

.table-row:hover > .book-now-table-btn {
  opacity: 1;
}

/* Booking Page  */

.booking-title {
  margin-top: 21.3rem;
  font-size: 10.7rem;
  line-height: 12.9rem;
}

.booking-description {
  width: 81%;
  margin-top: 0.67rem;
  font-size: 2.4rem;
  line-height: 2.91rem;
  text-align: center;
}

.booking-main-container {
  margin-top: 20.53rem;
  font-size: 2.13rem;
  line-height: 2.59rem;
  width: 70%;
  height: 60vw;
  position: relative;
}

.booking-form-container {
  margin-left: auto;
  width: 60%;
  height: 100%;
  background: #ffffff;
  color: #2b2b2b;
  padding-left: 13.7%;
  padding-top: 3.7%;
  border-radius: 3rem;
  -webkit-border-radius: 3rem;
  -moz-border-radius: 3rem;
  -ms-border-radius: 3rem;
  -o-border-radius: 3rem;
}

.form-img {
  position: absolute;
  left: 0;
  top: 5.2%;
  width: 48%;
  height: 53.9vw;
}

.form-img > img {
  width: 100%;
  height: 100%;
  border-radius: 2rem;
  -webkit-border-radius: 2rem;
  -moz-border-radius: 2rem;
  -ms-border-radius: 2rem;
  -o-border-radius: 2rem;
}

.booking-form-wrapper {
  width: 90%;
}

.booking-form-wrapper > form > .input-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 5.8%;
}

.booking-form-wrapper > form > .input-container:first-child {
  margin-top: 0;
}

form > .input-container > input,
textarea {
  margin-top: 4.42%;
  width: 100%;
  height: 4.44vw;
  border: 1.39px solid #e7e7e7;
  box-shadow: none;
  outline: none;
  font-family: "Inter", sans-serif;
  font-size: 1.1em;
  background-color: transparent;
  padding: 3%;
  border-radius: 13.3px;
  -webkit-border-radius: 13.3px;
  -moz-border-radius: 13.3px;
  -ms-border-radius: 13.3px;
  -o-border-radius: 13.3px;
}

form > .input-container > textarea {
  height: 10vw;
}

.form-divider {
  border-bottom: 1px solid #d3d3d3;
  width: 110%;
  margin-top: 8%;
  position: relative;
  right: 5%;
}

form > .input-container > .radio-container {
  margin-top: 1%;
  width: 100%;
  display: flex;
  align-items: center;
}

.single-radio-group > label,
input {
  display: block;
}

.single-radio-group {
  display: flex;
  gap: 4%;
  width: 50%;
}

form > input[type="submit"] {
  margin-top: 8%;
  width: 100%;
  height: 3.9vw;
  background-color: #000;
  color: #d3d3d3;
  font-size: 2.67rem;
  line-height: 3.23rem;
  font-family: inherit;
  font-weight: 600;
  border-radius: 1.33rem;
  -webkit-border-radius: 1.33rem;
  -moz-border-radius: 1.33rem;
  -ms-border-radius: 1.33rem;
  -o-border-radius: 1.33rem;
}

/* About Us Page */

.about-us-header {
  position: relative;
  margin-top: 10.67rem;
  width: 90%;
  height: 31.2vw;
  font-size: 6.67rem;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  line-height: 8rem;
}

.about-us-header-container {
  width: 63.1%;
  margin-top: 25.9rem;
  margin-left: 14.4rem;
}

.about-us-header-container > .about-us-title {
  text-transform: uppercase;
}

.about-us-header-container > .about-us-description {
  font-size: 0.36em;
  line-height: 1.21em;
}

.about-us-header > .about-us-img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

.about-us-img > img {
  height: 100%;
  width: 100%;
  opacity: 0.4;
  object-fit: cover;
}

.about-us-content {
  margin-top: 8.27rem;
  width: 81%;
  font-size: 2.4rem;
  text-align: center;
}

.about-us-content > p {
  margin-top: 3.2rem;
}

/* Contact Us Page */

.contact-us-title {
  margin-top: 21.33rem;
  font-size: 10.7rem;
  line-height: 1.2em;
}

.contact-us-description {
  font-size: 2.4rem;
  width: 81%;
  text-align: center;
}

.contact-us-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 81%;
  margin-top: 21.33rem;
  font-size: 7.33rem;
  line-height: 1.22em;
}

.contact-us-info-description {
  font-size: 0.33em;
  line-height: 1.44em;
}

.contact-info-container {
  margin-top: 5.6rem;
}

.contact-info-container > .contact-info-title,
.contact-info-social-title {
  font-size: 2.93rem;
  line-height: 1.2em;
  font-weight: 600;
}

.contact-info-container > .single-contact-info-item {
  margin-top: 2.27rem;
  display: grid;
  grid-template-columns:
    [first-start] 4rem [first-end gap1-start] 1.33rem [gap1-end second-start] 6.93rem
    [second-end gap2-start] 4.8rem [gap2-end third-start] 32.2rem
    [third-end];
  font-size: 2.13rem;
  line-height: 1.2em;
}

.single-contact-info-item > .contact-info-logo {
  grid-column: first-start / first-end;
  width: 4rem;
  height: 4rem;
}

.single-contact-info-item > .contact-info-logo > img {
  height: 100%;
  width: 100%;
}

.single-contact-info-item > .contact-info-item-name {
  grid-column: second-start / second-end;
  line-height: 1.44em;
  margin-top: 10%;
}

.single-contact-info-item > .contact-info-item-value {
  grid-column: third-start / third-end;
  margin-top: 3%;
  font-weight: 400;
  color: #e5e5e5;
}

.contact-info-social-title {
  margin-top: 5.6rem;
}

.contact-info-social-container {
  display: flex;
  font-size: 4rem;
  line-height: 1em;
  gap: 0.67rem;
  margin-top: 1.33rem;
}

.contact-info-social-container > .single-social-icon {
  width: 4rem;
  height: 4rem;
}

.contact-info-social-container > .single-social-icon > a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.contact-info-social-container > .single-social-icon > a > img {
  height: 100%;
  width: 100%;
}

.contact-us-form-container {
  position: relative;
  display: flex;
  justify-content: center;
}

.contact-us-form-container > .form-rect {
  position: absolute;
  left: 0;
  bottom: -7%;
  z-index: -1;
  width: 100%;
  height: 57%;
  background: linear-gradient(
    159.69deg,
    rgba(214, 184, 129, 0.8) 13.51%,
    rgba(178, 145, 95, 0.8) 120.13%
  );
  border-bottom-left-radius: 6.67rem;
  border-bottom-right-radius: 6.67rem;
}

.contact-us-form-container > .contact-form-wrapper {
  width: 83%;
  padding: 7%;
  border-radius: 6%;
  background: #ffffff;
  height: 100%;
  -webkit-border-radius: 6%;
  -moz-border-radius: 6%;
  -ms-border-radius: 6%;
  -o-border-radius: 6%;
}

.contact-form-wrapper > form > .contact-single-form-item {
  color: #2b2b2b;
  font-size: 0.3em;
  font-weight: 400;
  line-height: 1.2em;
  margin-top: 2.7rem;
}

.contact-form-wrapper > form > div:first-child {
  margin-top: 0;
}

.contact-single-form-item > label {
  color: #2b2b2b;
  font-size: 0.84em;
}

.contact-single-form-item > input,
.contact-single-form-item > textarea {
  margin-top: 2.1rem;
  border: 1.17px solid #e7e7e7;
  width: 100%;
  padding: 3%;
  border-radius: 1.13rem;
  -webkit-border-radius: 1.13rem;
  -moz-border-radius: 1.13rem;
  -ms-border-radius: 1.13rem;
  -o-border-radius: 1.13rem;
  font-size: 2.13rem;
  font-family: "Inter", sans-serif;
  box-shadow: none;
  outline: none;
}

.contact-single-form-item > textarea {
  height: 16rem;
}

.contact-form-wrapper > form > input[type="submit"] {
  margin-top: 3.2rem;
  height: 6.27rem;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.25em;
  line-height: 1.2em;
}

.contact-single-form-item > input::placeholder,
.contact-single-form-item > textarea::placeholder {
  color: #cec7c7;
}