/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.5.15,
* Autoprefixer: v10.5.0
* Browsers: last 4 version
*/

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.5.15,
* Autoprefixer: v10.5.0
* Browsers: last 4 version
*/

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* COLORS 

logo(company name)
#CD8376
white
#FFF9F9
grey
#4C4B4B
main(background)
#EFD8D1
accent
#6E825F
*/

/* FONTS

sizes

  FONT SIZE SYSTEM (px)
  10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
  SPACING SYSTEM (px)
  2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

*/
:root {
  --color-primary: #efd8d1;
  --color-grey: #4c4b4b;
  --color-accent: #6e825f;
  --color-white: #fff9f9;
  --color-white-opacity: rgba(255, 249, 249, 0.5);
  --color-white-opacity-2: rgba(255, 249, 249, 0.75);
}
* {
  margin: 0;
  padding: 0;

  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;

  /* Solving selecting issue */
}
html {
  font-size: 62.5%;
  font-family: "Raleway", sans-serif;
  background-color: var(--color-white);
  color: var(--color-grey);

  scroll-behavior: smooth;
}
body {
  width: 100%;

  -ms-overflow-x: hidden;
  overflow-x: hidden;

  font-size: 1.6rem;
  letter-spacing: 0.2rem;
  line-height: 1.5;
}
.main-nav {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 60%;
  flex: 0 0 60%;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;

  position: absolute;
  right: 2.4rem;

  -webkit-transition: 1s ease;
  transition: 1s ease;
  margin-top: 0.8rem;
  opacity: 100%;
}
.menu-btn-container {
  display: none;
}
.mobile-menu-btn {
  background-color: transparent;
  border: none;

  font-size: 4.4rem;
  color: var(--color-accent);
}
.mobile-menu-btn.hidden {
  display: none;
  visibility: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.section img {
  border-radius: 1000rem;
  -webkit-box-shadow: 2.5rem 2.5rem 5rem rgba(0, 0, 0, 0.15);
  box-shadow: 2.5rem 2.5rem 5rem rgba(0, 0, 0, 0.15);
}
/* GENERAL stylings */
.wrapper {
  overflow: visible;
  display: none;
}
.wrapper.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 9.6rem;
}
.section {
  width: 100%;
  max-width: 120rem;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8rem;

  position: relative;

  margin: 0 auto;
  padding-top: 12.5rem;
  /* margin-bottom: 4.8rem; */

  -webkit-transition: opacity 2s ease;
  transition: opacity 2s ease;
  overflow: visible;
}
.lg {
  height: auto !important;
  height: 100vh;
  min-height: 100vh;
}
.section-heading {
  -ms-flex-item-align: start;
  align-self: flex-start;
  display: block;

  font-size: 6.2rem;
  font-family: "Merriweather", serif;
  color: var(--color-accent);
  text-align: left;

  position: relative;

  padding-left: 1.6rem;
  padding-bottom: 1.2rem;
}
.data-impressum {
  max-width: 100rem;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 0.2rem;
}
.data-impressum h1,
h2,
h3 {
  color: var(--color-accent);
}
.data-impressum h1 {
  font-size: 4.4rem;
}
.data-impressum h2 {
  font-size: 2.4rem;
}
.data-impressum h3 {
  margin-top: 1.2rem;
  font-size: 2rem;
}
.data-impressum h4 {
  margin-top: 0.6rem;
}
.data-impressum ul {
  padding-left: 1.6rem;
}
.section-heading span {
  display: inline-block;

  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  font-size: 1.8rem;
  color: var(--color-grey);

  -webkit-transform: translatey(0.8rem);
  -ms-transform: translatey(0.8rem);
  transform: translatey(0.8rem);

  position: absolute;
  bottom: 0;
}
.article {
  width: 100%;
  max-width: 100rem;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 8rem;

  padding: 2.4rem;
}
.article section {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 0px;
  flex: 1 0 0;
}
/* .section.lg::before {
  content: "";
  display: inline-block;
  position: absolute;

  width: 200%;
  aspect-ratio: 2/0.99;

  -webkit-border-radius: 70rem;
  -moz-border-radius: 70rem;
  -ms-border-radius: 70rem;
  -o-border-radius: 70rem;
  border-radius: 70rem;

  background-color: var(--color-primary);

  z-index: -1;
}
.section.lg:nth-child(even)::before {
  -webkit-transform: translate(-85rem, 0);
  -moz-transform: translate(-85rem, 0);
  -ms-transform: translate(-85rem, 0);
  -o-transform: translate(-85rem, 0);
  transform: translate(-85rem, 0);
}
.section.lg:nth-child(odd)::before {
  -webkit-transform: translate(85rem, 0);
  -moz-transform: translate(85rem, 0);
  -ms-transform: translate(85rem, 0);
  -o-transform: translate(85rem, 0);
  transform: translate(85rem, 0);
} */
.wellness-container > *,
.treatment-container > * {
  position: relative;
}
.section.hero::before,
.section.about::before,
.section.services::before,
.treatment-container > *::before,
.wellness-container > *::before,
.main-footer::before {
  content: "";

  display: block;

  width: 100vw;
  height: 100%;

  position: absolute;
  top: 0;
  bottom: 0;

  background-repeat: no-repeat;

  z-index: -1;
}
.section.hero::before {
  background-image: url(/images/backgrounds/background-bottom.svg);
  background-position: bottom;
}
.section.about::before {
  background-image: url(/images/backgrounds/background-top.svg);
  background-position: top;
}
.section.services::before {
  background-image: url(/images/backgrounds/background-bottom.svg);
  background-position: bottom;
}
.treatment-container > *:nth-child(1)::before,
.wellness-container > *:nth-child(1)::before {
  background-image: url(/images/backgrounds/background-bottom.svg);
  background-position: bottom;
}
.wrapper::before {
  background-image: url(/images/backgrounds/background-top.svg);
  background-position: top;
}
.main-footer:not(.background-bottom)::before {
  background-image: url(/images/backgrounds/background-top.svg);
  background-position: top;
}
/*  -HEADER- */
.hidden {
  -khtml-opacity: 0%;
  -moz-opacity: 0%;
  opacity: 0%;
  filter: alpha(opacity=NaN);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=NaN)";
}
.main-footer.background-bottom::before {
  background-image: url(/images/backgrounds/background-bottom.svg);
  background-position: bottom;
}
.main-header {
  width: 100%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;

  position: fixed;

  background-color: rgba(255, 255, 255, 0);
  backdrop-filter: blur(8rem);

  z-index: 1;

  -webkit-transition: background-color 1s ease;
  transition: background-color 1s ease;
}
.main-header.intro {
  background-color: var(--color-white);
}
.main-header.intro .container {
  height: 100vh;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  position: relative;

  margin: 0 auto;
}
.main-header.intro .main-nav {
  right: -100%;
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.main-header.intro .logo {
  left: 50%;

  margin: auto;
  -webkit-transform: translate(-50%, 0) scale(5);
  -ms-transform: translate(-50%, 0) scale(5);
  transform: translate(-50%, 0) scale(5);
}
.main-header .container {
  -webkit-transition: height 1s ease;
  transition: height 1s ease;

  width: 100%;
  max-width: 120rem;
  height: 12rem;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;

  position: relative;

  margin: 0 auto;
  padding: 1.2rem 2.4rem;
}
/*  -LOGO- */
.logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;

  position: absolute;
  left: 2.4rem;

  gap: 0.4rem;
  text-decoration: none;

  -webkit-transition: 1s ease;
  transition: 1s ease;
}
.logo:hover {
  cursor: pointer;
}
.logo-img {
  max-width: 8rem;
  margin-left: 2.2rem;
}
.company-name {
  font-size: 1.4rem;
  color: #cd8376;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  font-weight: bold;
}
.logo-name {
  font-size: 2rem;
  color: var(--color-accent);
  font-family: "Great Vibes", sans-serif;
  letter-spacing: 0.1rem;

  -webkit-transform: translateY(-0.4rem);

  -ms-transform: translateY(-0.4rem);

  transform: translateY(-0.4rem);
}
.nav-list {
  list-style: none;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 6.4rem;

  font-size: 1.8rem;
  font-family: "Raleway", serif;
}
.nav-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.nav-link {
  text-align: center;
  text-decoration: none;
  color: var(--color-grey);
  text-transform: uppercase;
  letter-spacing: 0.1rem;

  word-break: break-word;

  position: relative;
}
.nav-link::before {
  content: "";

  display: inline-block;

  position: absolute;

  left: 0;
  bottom: -0.2rem;

  width: 0rem;
  height: 0.2rem;

  border-radius: 10rem;

  background-color: var(--color-accent);

  -webkit-transition: 0.3s ease;

  transition: 0.3s ease;
}
.nav-link:hover,
.nav-link.active {
  position: relative;
}
.nav-link:hover::before,
.nav-link.active::before {
  width: 2.4rem;
}
.hero {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 6.4rem;

  position: relative;

  font-weight: bold;
  letter-spacing: 0.1rem;
}
.hero-img:last-child {
  display: none;
}
.hero-heading {
  font-family: "Merriweather";
  font-size: 4.4rem;
  line-height: 1.4;
  color: var(--color-accent);
}
.hero-heading span {
  font-size: 2.2rem;
}
.hero-subheading {
  color: var(--color-grey);
  font-size: 2rem;
  line-height: 1.4;
}
.hero-subheading span {
  font-size: 1.6rem;
  font-weight: normal;
}
.hero-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1.6rem;
}
.img-container {
  position: relative;
}
.img-container img {
  width: 100%;
}
.img-container::before {
  content: "";
  width: 120%;
  aspect-ratio: 1/1;

  position: absolute;
  top: -7%;
  left: 50%;

  background-color: var(--color-accent);

  border-radius: 50%;

  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);

  z-index: -1;
}
.socials {
  width: 40%;

  -ms-flex-item-align: start;

  align-self: flex-start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 4.8rem;

  position: relative;

  background-color: var(--color-accent);

  padding: 1rem 2.4rem;

  -ms-grid-row-align: start;

  align-self: start;

  width: -webkit-fit-content;

  width: -moz-fit-content;

  width: fit-content;

  border-radius: 100rem;

  /*-webkit-border-top-right-radius: 100rem;
  -moz-border-top-right-radius: 100rem;
  -ms-border-top-right-radius: 100rem;
  -o-border-top-right-radius: 100rem;
  border-top-right-radius: 100rem;

  -webkit-border-bottom-right-radius: 100rem;
  border-bottom-right-radius: 100rem;
  -moz-border-radius-bottomright: 100rem;*/ /* FF 1.0 - 12.0 */

  -webkit-box-shadow: 2.5rem 2.5rem 5rem rgba(0, 0, 0, 0.15);
  box-shadow: 2.5rem 2.5rem 5rem rgba(0, 0, 0, 0.15);

  filter: progid:DXImageTransform.Microsoft.dropshadow(
    OffX=0, OffY=0, Color='black', Positive='false'
); /* IE 5.5 */
  border-collapse: separate; /* Required by IE 9 */
}
/* .socials:before {
  content: "";

  display: inline-block;

  width: 75vw;
  height: 100%; */

/* background-color: var(--color-accent); */

/* background-image: linear-gradient(to left, var(--color-accent), #efd8d1); */

/* -webkit-box-shadow: 2.5rem 2.5rem 5rem rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 2.5rem 2.5rem 5rem rgba(0, 0, 0, 0.15);
  box-shadow: 2.5rem 2.5rem 5rem rgba(0, 0, 0, 0.15); */

/* -webkit-border-top-right-radius: 100rem;
  -moz-border-top-right-radius: 100rem;
  -ms-border-top-right-radius: 100rem;
  -o-border-top-right-radius: 100rem;
  border-top-right-radius: 100rem;

  -webkit-border-bottom-right-radius: 100rem;
  border-bottom-right-radius: 100rem;
  -moz-border-radius-bottomright: 100rem; */ /*FF 1.0 - 12.0*/

/* position: absolute;

  top: 0;
  bottom: 0;
  right: -1.2rem;

  z-index: -1;
} */
.social-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;

  height: -webkit-fit-content;

  height: -moz-fit-content;

  height: fit-content;

  -webkit-transition: -webkit-transform 0.3s ease;

  transition: -webkit-transform 0.3s ease;

  transition: transform 0.3s ease;

  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.social-link:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
.contact-card .socials {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 4.8rem;

  width: 100%;

  background-color: var(--color-white);
  -webkit-box-shadow: none;
  box-shadow: none;

  /* justify-content: space-between; */
}
.contact-card .socials .social-icon {
  color: var(--color-accent);

  font-size: 3.6rem;
}
.social-icon {
  color: var(--color-white);
  font-size: 5.2rem;
}
.about-text {
  font-size: 2rem;
  letter-spacing: 0.1rem;
  line-height: 1.6;
}
.about-text span {
  font-family: "Merriweather";
  font-size: 2.4rem;
  color: var(--color-accent);
  font-weight: bold;
}
.about-text span:last-child {
  font-family: "Great Vibes";
  font-size: 7.4rem;
  font-weight: normal;
  text-shadow: 0.8rem 0.8rem 0.8rem rgba(0, 0, 0, 0.15);

  text-shadow: 2.5rem 2.5rem 5rem rgba(0, 0, 0, 0.15);
}
.about-text br:last-child {
  display: none;
}

.about .img-container::before {
  content: "";

  width: 130%;
  aspect-ratio: 1/1;

  position: absolute;
  top: -5rem;
  left: 50%;

  border-radius: 100rem;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);

  background-color: var(--color-accent);

  z-index: -1;
}
/* SERVICES SECTION ---------------------------------------- */
.sec-nav {
  width: 100%;
  max-width: 100rem;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.sec-nav--list {
  list-style: none;

  width: 100%;

  display: -ms-grid;

  display: grid;
  -ms-grid-columns: 1fr 4.8rem 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 4.8rem;

  padding: 0 2.4rem;
}
.sec-nav--item {
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;

  text-align: center;
  border-radius: 2rem;
}
.sec-nav--item {
  background-image: url(/images/Dermazeutische_Behandlungen/ultra-sensitiv.jpg);
  -ms-background-size: cover;
  background-size: cover;

  background-position: center;
  background-repeat: no-repeat;

  box-shadow: 2rem 2rem 2rem rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: 2.5rem 2.5rem 5rem rgba(0, 0, 0, 0.15);
  box-shadow: 2.5rem 2.5rem 5rem rgba(0, 0, 0, 0.15);

  filter: progid:DXImageTransform.Microsoft.dropshadow(
    OffX=0, OffY=0, Color='black', Positive='false'
); /* IE 5.5 */
  border-collapse: separate; /* Required by IE 9 */
}
.sec-nav--item:last-child {
  background-image: url(/images/Wellness_Massagen/Ayurvedische_Massagen/Upanasveda\ -\ Rückenmassage.jpg);
}
.sec-nav--item .sec-nav--link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 1.6rem;
}
.sec-nav--link {
  display: inline-block;
  width: 100%;
  height: 100%;

  font-family: "Merriweather", serif;
  font-size: 3.6rem;
  text-transform: uppercase;
  line-height: 1.2;
  letter-spacing: 0.2rem;
  text-decoration: none;
  font-weight: bold;
  color: var(--color-accent);

  padding: 2.4rem;

  background-color: var(--color-white-opacity-2);
  border-radius: 2rem;
}
.sec-nav--item:hover,
.sec-nav--link:hover {
  -webkit-transition: 1s ease;
  transition: 1s ease;
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
.services {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 9.6rem;

  font-family: "Merriweather", serif;
}
.services-container {
  width: 100%;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
}
/* .service-container {
  flex: 0 0 45%;
  aspect-ratio: 1/1;

  background-image: url(/images/Dermazeutische_Behandlungen/ultra-sensitiv.jpg);
  background-size: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  box-shadow: 2rem 2rem 2rem rgba(0, 0, 0, 0.15);
  box-shadow: 2.5rem 2.5rem 5rem rgba(0, 0, 0, 0.15);
}
.service-container:last-child {
  background-image: url(/images/Wellness_Massagen/Ayurvedische_Massagen/Upanasveda\ -\ Rückenmassage.jpg);
}
.service-link {
  display: inline-block;
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 4.6rem;
  color: var(--color-accent);

  background-color: var(--color-white-opacity);
} 
.service-container:hover,
.service-link:hover {
  transform: scale(1.1);
  transition: 1s ease;
}
.service-container:hover {
  box-shadow: 2.2rem 2.2rem 2.2rem rgba(0, 0, 0, 0.15);
}
*/
/* FOOTER ---------------------------------------- */
.contacts,
.contact-card,
.contact-section,
.contact-content,
.required-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
}
.main-footer {
  padding: 2.4rem;
}
.contacts {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 0px;
  flex: 1 0 0;
  width: 100%;
  max-width: 100rem;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

  -ms-flex-direction: row;

  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 3.2rem;
}
.contact-card {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 0px;
  flex: 1 0 0;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;

  gap: 1.6rem;

  font-family: "Merriweather", serif;
  text-align: center;
  letter-spacing: 0.2rem;
  color: var(--color-white);

  padding: 1.8rem;
  padding-bottom: 4.8rem;

  border-radius: 2rem;
  background-color: var(--color-accent);
  -webkit-box-shadow: 2.5rem 2.5rem 5rem rgba(0, 0, 0, 0.15);
  box-shadow: 2.5rem 2.5rem 5rem rgba(0, 0, 0, 0.15);

  filter: progid:DXImageTransform.Microsoft.dropshadow(
   OffX=0, OffY=0, Color='black', Positive='false'
); /* IE 5.5 */
  border-collapse: separate; /* Required by IE 9 */
}
.contact-card:nth-child(2) {
  background-color: var(--color-white);
  color: var(--color-grey);
}
.contact-heading {
  font-family: "Great Vibes";
  font-size: 5.2rem;
  font-weight: normal;
}
.contact-card:nth-child(2) .contact-heading {
  color: var(--color-accent);
}
.contact-card:nth-child(2) .contact-link {
  color: var(--color-grey);
}
.contact-text {
  font-family: "Raleway", serif;
  font-size: 2rem;
  line-height: 1.5;
}
.contact-section {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 0px;
  flex: 1 0 0;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;
  gap: 1.6rem;
}
.contact-card:nth-child(2) .contact-section {
  /* gap: 0; */
}
.contact-link {
  font-size: 2rem;
  text-decoration: none;
  color: var(--color-white);
}
.contact-icon {
  font-size: 2.4rem;
  color: var(--color-white);

  padding: 0.4rem;

  border-radius: 50%;
}
.contact-card:nth-child(2) .contact-icon {
  color: var(--color-accent);
}
.contact-logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.6rem;
}
.contact-logo .company-name {
  font-family: "Raleway", sans-serif;
  font-size: 2rem;
}
.contact-logo .logo-name {
  font-size: 2.8rem;
}
.required-links {
  gap: 0.2rem;
}
.required-link {
  font-size: 2rem;
  font-weight: bold;

  color: var(--color-accent);
}
.contact-link:hover,
.required-link:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

/*   FONT SIZE SYSTEM (px)
  10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
  SPACING SYSTEM (px)
  2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 */
/* 
*/
@media (min-width: 800px) and (max-width: 820px) {
  .about-text span:last-child {
    font-size: 7rem;
  }
}
@media (min-width: 50em) and (max-width: 64em) {
}
@media (max-width: 71.5em) {
  html {
    font-size: 56.25%;
  }
}
@media (max-width: 61.25em) {
  html {
    font-size: 50%;
  }
  .main-header .container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    gap: 3.2rem;
  }
  .hero .img-container,
  .about .img-container {
    /* flex: 0 0 30%; */
  }
  .hero .img-container::before,
  .about .img-container::before {
    /* width: 120%;
    height: 120%;

    top: 50%;
    left: 50%;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); */

    /* display: none; */
  }
}
/* 880 px */
@media (max-width: 55em) {
  html {
    font-size: 46%;
  }
}
@media (max-width: 48em) {
  body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;

    gap: 19rem;
  }
  .section.hero::before,
  .section.services::before,
  .treatment-container > *:nth-child(1)::before,
  .wellness-container > *:nth-child(1)::before {
    -webkit-transform: translateY(13rem);
    -ms-transform: translateY(13rem);
    transform: translateY(13rem);
  }
  .section.about::before,
  .main-footer:not(.background-bottom)::before {
    -webkit-transform: translateY(-10rem);
    -ms-transform: translateY(-10rem);
    transform: translateY(-10rem);
  }
  .lg {
    height: auto;
  }
  /* MAIN HEADER ---------------------------------------- */
  .section.lg::before {
    /* display: none; */
  }
  .main-header {
    background-color: var(--color-white);
  }
  .main-header .container {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .main-header.intro .logo {
    -webkit-transform: translate(-50%, 0) scale(2.5);
    -ms-transform: translate(-50%, 0) scale(2.5);
    transform: translate(-50%, 0) scale(2.5);
  }
  .menu-btn-container {
    display: inline-block;
  }
  .mobile-menu-btn{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .main-nav {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 3.2rem;
  }
  .main-nav.active {
    width: 100%;
    height: 100vh;

    bottom: -100vh;
    right: 0;

    background-color: var(--color-white);
    -webkit-transition: 0s;
    transition: 0s;
  }
  .main-nav.active .mobile-menu-btn {
    font-size: 6.2rem;
  }
  .main-nav.active .nav-list {
    height: 40%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-family: "Merriweather", serif;
  }
  .main-nav .nav-list {
    display: none;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
    gap: 3.2rem;

    font-size: 3.6rem;
    letter-spacing: 0rem;
  }
  .nav-link {
    color: var(--color-accent);
  }
  .sec-nav--list {
    /* -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    grid-gap: 8rem; */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  /* SECTIONS ---------------------------------------- */
  .section {
    padding: 0 2.4rem;
    padding-top: 15rem;
    height: auto !important; /* @see: http://css-tricks.com/snippets/css/cross-browser-min-height/ */

    gap: 0;
  }
  .section.hero,
  .section.about {
    position: relative;
  }
  .section-heading {
    position: initial;
    padding-left: 0;
  }
  .section.hero,
  .section.about {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    /* padding-top: 80px; */
    padding: 0;
    padding-top: 12.5rem;
  }
  .section.hero {
    /* background-color: var(--color-white-opacity-2); */
    gap: 6.4rem;
  }
  .article.hero {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0px;
    flex: 1 0 0;
    width: 100%;
    height: auto;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    position: relative;

    margin-bottom: 0;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
  }
  .article.about {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 12.4rem;
  }
  .socials {
    /* width: fit-content; */
    width: 100%;
    border-radius: 0rem;
    -ms-flex-item-align: start;
    align-self: flex-start;
    margin-bottom: 4.8rem;

    gap: 8rem;

    -webkit-box-pack: space-evenly;

    -ms-flex-pack: space-evenly;

    justify-content: space-evenly;

    padding: 2.4rem;

    -webkit-box-shadow: none;

    box-shadow: none;
  }
  .social-icon {
    font-size: 7.4rem;
  }
  .hero-text {
    -ms-flex-item-align: start;
    align-self: flex-start;
    width: 100%;
  }
  .hero .img-container::before {
    display: none;
  }
  .about .img-container::before {
    width: 110%;
    height: 110%;
  }
  .hero .img-container {
    /* width: 50%; */
    width: 100%;

    -webkit-box-ordinal-group: 0;

    -ms-flex-order: -1;

    order: -1;

    /* position: absolute;
    top: 0%;
    left: 50%; */

    /* -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); */

    /* -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0); */

    z-index: -1;
  }
  .hero .hero-img:first-child {
    display: none;
  }
  .hero .hero-img {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0 auto;

    /* -webkit-box-shadow: 2.5rem 2.5rem 5rem rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 2.5rem 2.5rem 5rem rgba(0, 0, 0, 0.15);
    box-shadow: 2.5rem 2.5rem 5rem rgba(0, 0, 0, 0.15); */

    -webkit-box-shadow: none;
    box-shadow: none;

    border-radius: 0rem;

    filter: progid:DXImageTransform.Microsoft.dropshadow(
    OffX=0, OffY=0, Color='black', Positive='false'
); /* IE 5.5 */
    border-collapse: separate; /* Required by IE 9 */
  }
  .about-text {
    text-align: center;
    font-size: 2.4rem;
  }
  .about-text span {
    font-size: 3rem;
  }
  /* SERVICES SECTION ---------------------------------------- */
  .services-container {
    height: 100%;
    width: 100%;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;
    gap: 4.8rem;
  }
  .service-container {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    width: 100%;
    max-width: 75rem;
  }
  .sec-nav--link {
    letter-spacing: 0.4rem;
  }
  /* FOOTER SECTION ---------------------------------------- */
  .main-footer {
    padding-bottom: 19rem;
  }
  .contacts {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .contact-card {
    width: 100%;
    max-width: 60rem;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
  }
  .contact-heading {
    font-size: 6.2rem;
    letter-spacing: 0.4rem;

    padding: 1.2rem 0;
  }
  .contact-text,
  .contact-link {
    font-size: 2.4rem;
  }
  .contact-content {
    gap: 0.8rem;
  }
  .contact-icon {
    font-size: 3rem;
  }
  .contact-logo .company-name {
    font-size: 3rem;
  }
  .contact-logo .logo-name {
    font-size: 3.6rem;
  }
  .contact-card .required-link {
    font-size: 2.4rem;
  }
  .contact-card .socials .social-icon {
    font-size: 5.2rem;
  }
}
@media (max-width: 36em) {
  html {
    font-size: 41%;
  }
  .main-header.intro .logo {
    text-align: center;
  }
  .logo {
    text-align: left;
    gap: 0;
  }
  .logo-name,
  .company-name {
    width: 100%;
  }
  .company-name {
    font-size: 1.8rem;
  }
  .logo-name {
    font-size: 2rem;
  }
  .main-header .logo-img {
    display: none;
  }
  .main-footer {
    padding-bottom: 8rem;
  }
  .section-heading {
    font-size: 5.7rem;
  }
}
@media (max-width: 20em) {
  .company-name {
    font-size: 1.2rem;
  }
  .logo-name {
    font-size: 1.6rem;
  }
  .sec-nav--link {
    font-size: 2rem;
  }
  .section-heading {
    font-size: 3rem;
    margin-bottom: 3.2rem;
    word-break: break-word;
  }
  .about-text {
    font-size: 2rem;
  }
  .about-text span {
    font-size: 2.4rem;
  }
  .about-text br:last-child {
    display: inline-block;
  }
  .socials,
  .contact-card .socials {
    gap: 2.4rem;
  }
}
@media (max-width: 15em) {
  .company-name {
    font-size: 1rem;
  }
  .logo-name {
    font-size: 1.4rem;
  }
}