.color-ivory-background {
  background-color: #F8F3EE;
}

.color-sand-background {
  background-color: #DED3CE;
}

.color-cocoa-background {
  background-color: #544339;
}

.color-odd {
  background-color: rgb(255, 255, 255);
}

.color-even {
  background-color: rgb(161, 175, 150);
}

.color-pink {
  background-color: #FA9EBC;
}

.color-white {
  color: #FFF;
}

.color-ivory {
  color: #F8F3EE;
}

@font-face {
  font-family: "Kumbh Sans";
  src: url("../fonts/Kumbh_Sans/KumbhSans-VariableFont_YOPQ,wght.ttf");
}
.kumbh-sans-dental {
  font-family: "Kumbh Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "YOPQ" 300;
}

.kumbh-sans-lounge {
  font-family: "Kumbh Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-variation-settings: "YOPQ" 250;
}

.kumbh-sans-web {
  font-family: "Kumbh Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 350;
  font-style: normal;
  font-variation-settings: "YOPQ" 300;
}

.kumbh-sans-head {
  font-family: "Kumbh Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "YOPQ" 300;
  font-size: 1.1rem;
}

.kumbh-sans-head1 {
  font-family: "Kumbh Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings: "YOPQ" 300;
  font-size: 1.2rem;
}

.kumbh-sans-header {
  font-family: "Kumbh Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 350;
  font-style: normal;
  font-variation-settings: "YOPQ" 300;
  font-size: 2.8rem;
}

.font-color {
  color: #544339;
}

.font-size-13 {
  font-size: 1.3rem;
}

.font-size-08 {
  font-size: 0.8rem;
}

.font-bold {
  font-weight: bold;
}

.font-oblique {
  font-style: oblique;
}

.font-about {
  font-weight: 500;
}

.line-heigh-13 {
  line-height: 1.3;
}

.text-align-center {
  text-align: center;
}

.display-block {
  display: block;
}

.nowraplinks {
  white-space: nowrap;
}

.mt-2r {
  margin-top: 2em;
}

.padding-5 {
  padding: 5px;
}

.padding-top-5 {
  padding-top: 5px;
}

.padding-bottom-5 {
  padding-bottom: 5px;
}

.padding-top-bottom-5 {
  padding-top: 5px;
  padding-bottom: 5px;
}

.padding-left-5 {
  padding-left: 5px;
}

.padding-10 {
  padding: 10px;
}

.padding-top-10 {
  padding-top: 10px;
}

.padding-bottom-10 {
  padding-bottom: 10px;
}

.padding-top-bottom-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.padding-left-10 {
  padding-left: 10px;
}

.padding-15 {
  padding: 15px;
}

.padding-top-15 {
  padding-top: 15px;
}

.padding-bottom-15 {
  padding-bottom: 15px;
}

.padding-top-bottom-15 {
  padding-top: 15px;
  padding-bottom: 15px;
}

.padding-left-15 {
  padding-left: 15px;
}

.padding-20 {
  padding: 20px;
}

.padding-top-20 {
  padding-top: 20px;
}

.padding-bottom-20 {
  padding-bottom: 20px;
}

.padding-top-bottom-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.padding-left-20 {
  padding-left: 20px;
}

.padding-25 {
  padding: 25px;
}

.padding-top-25 {
  padding-top: 25px;
}

.padding-bottom-25 {
  padding-bottom: 25px;
}

.padding-top-bottom-25 {
  padding-top: 25px;
  padding-bottom: 25px;
}

.padding-left-25 {
  padding-left: 25px;
}

.padding-30 {
  padding: 30px;
}

.padding-top-30 {
  padding-top: 30px;
}

.padding-bottom-30 {
  padding-bottom: 30px;
}

.padding-top-bottom-30 {
  padding-top: 30px;
  padding-bottom: 30px;
}

.padding-left-30 {
  padding-left: 30px;
}

.about {
  display: grid;
  grid-area: about;
  grid-template-columns: 1em 17.75em 2.5em 17.75em 1em;
  grid-template-rows: 1em 6em auto 1em;
  grid-template-areas: ". . . . ." "about-header about-header about-header about-header about-header" ". about-content . about-picture ." ". . . . .";
  align-content: baseline;
  justify-content: center;
  gap: 15px;
}

@media (min-width: 768px) {
  .about {
    display: grid;
    grid-area: about;
    grid-template-columns: 18.75em 2.5em 18.75em;
    grid-template-rows: 1em 6em auto 5em;
    grid-template-areas: ". . ." "about-header about-header about-header" "about-content . about-picture" ". . .";
    align-content: baseline;
    justify-content: center;
    gap: 15px;
  }
}
@media (min-width: 1350px) {
  .about {
    display: grid;
    grid-area: about;
    grid-template-columns: 37.5em 5em 37.5em;
    grid-template-rows: 1em 6em auto 5em;
    grid-template-areas: ". . ." "about-header about-header about-header" "about-content . about-picture" ". . .";
    align-content: baseline;
    justify-content: center;
    gap: 15px;
  }
}
.about-header {
  grid-area: about-header;
}

.about-header-content {
  grid-area: about-header-content;
}

.about-picture {
  grid-area: about-picture;
}

.about-picture-img {
  max-height: 100%;
  width: 100%;
}

.about-content {
  display: grid;
  grid-area: about-content;
  align-content: start;
  font-size: 1.1rem;
}

.accordion-gbt {
  border-radius: 100px;
  cursor: pointer;
  width: 100%;
  border: none;
  padding-left: 10px;
  outline: none;
  transition: 0.4s;
  background-color: #FFFFFF;
  text-align: left;
}

.accordion-gbt.active, .accordion-gbt:hover {
  background-color: #F9F7F3;
}

.accordion {
  border-radius: 100px;
  cursor: pointer;
  width: 100%;
  border: none;
  padding-left: 10px;
  outline: none;
  transition: 0.4s;
  background-color: #DED3CE;
  text-align: center;
}

.accordion.active {
  background-color: #EFECE5;
}

@media (min-width: 768px) {
  .accordion:hover {
    background-color: #EFECE5;
  }
}
.contact {
  display: grid;
  grid-area: contacts;
  grid-template-columns: repeat(2, 19.5em);
  grid-template-rows: 1em 6em auto auto 1em auto auto 1em;
  grid-template-areas: ". ." "contact-header contact-header" "contact-contact contact-address" "contact-contact-content contact-address-content" ". ." "contact-hours contact-follow" "contact-hours-content contact-follow-content" ". .";
  align-content: baseline;
  justify-content: center;
  gap: 15px;
}

@media (min-width: 768px) {
  .contact {
    display: grid;
    grid-area: contacts;
    grid-template-columns: repeat(2, 19.5em);
    grid-template-rows: 1em 6em auto auto 1em auto auto 1em;
    grid-template-areas: ". ." "contact-header contact-header" "contact-contact contact-address" "contact-contact-content contact-address-content" ". ." "contact-hours contact-follow" "contact-hours-content contact-follow-content" ". .";
    align-content: baseline;
    justify-content: center;
    gap: 15px;
  }
}
@media (min-width: 1350px) {
  .contact {
    display: grid;
    grid-area: contacts;
    grid-template-columns: repeat(4, 19.5em);
    grid-template-rows: 1em 6em auto 1em auto 1em;
    grid-template-areas: ". . . . " "contact-header contact-header contact-header contact-header" "contact-contact contact-address contact-hours contact-follow" ". . . ." "contact-contact-content contact-address-content contact-hours-content contact-follow-content" ". . . .";
    align-content: baseline;
    justify-content: center;
    gap: 15px;
  }
}
.contact-header {
  grid-area: contact-header;
}

.contact-address {
  grid-area: contact-address;
}

.contact-hours {
  grid-area: contact-hours;
}

.contact-contact {
  grid-area: contact-contact;
}

.contact-follow {
  grid-area: contact-follow;
}

.contact-header-content {
  grid-area: contact-header-content;
}

.contact-address-content {
  grid-area: contact-address-content;
}

.contact-hours-content {
  grid-area: contact-hours-content;
}

.contact-hours-content-wrapper {
  display: grid;
  grid-template-columns: 5em 1fr;
  grid-template-areas: "day time";
}

.contact-contact-content {
  grid-area: contact-contact-content;
}

.contact-follow-content {
  grid-area: contact-follow-content;
}

.contact-phone-icon {
  width: 15px;
  height: 13px;
}

.contact-mail-icon {
  width: 15px;
  height: 12px;
}

.contact-mail::before {
  content: "";
  display: inline-block;
  margin-right: 10px;
  width: 20px;
  height: 16px;
  mask-image: url("/img/icons/mail.svg");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  -webkit-mask-image: url("/img/icons/mail.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  background-color: #000;
}

.faq {
  display: grid;
  grid-area: faq;
  grid-template-columns: 40em;
  grid-template-rows: 1em auto 1em auto;
  grid-template-areas: "." "faq-header" "." "faq-content";
  align-content: baseline;
  justify-content: center;
  gap: 15px;
}

@media (min-width: 768px) {
  .faq {
    display: grid;
    grid-area: faq;
    grid-template-columns: 40em;
    grid-template-rows: 1em 6em 1em auto;
    grid-template-areas: "." "faq-header" "." "faq-content";
    align-content: baseline;
    justify-content: center;
    gap: 15px;
  }
}
@media (min-width: 1350px) {
  .faq {
    display: grid;
    grid-area: faq;
    grid-template-columns: 80em;
    grid-template-rows: 1em 6em 1em auto;
    grid-template-areas: "." "faq-header" "." "faq-content";
    align-content: baseline;
    justify-content: center;
    gap: 15px;
  }
}
.faq-header {
  grid-area: faq-header;
}

.faq-content {
  grid-area: faq-content;
}

.faq-wrapper {
  display: grid;
  grid-template-rows: auto auto 2em;
  grid-template-areas: "faq-content-header" "faq-content-content" ".";
}

.faq-content-header {
  grid-area: faq-content-header;
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
  padding: 1em;
}

@media (min-width: 768px) {
  .faq-content-header {
    text-align: left;
  }
}
.faq-content-content {
  display: none;
  grid-area: faq-content-content;
  padding: 1em;
  text-align: left;
}

.gallery {
  display: grid;
  grid-area: gallery;
  grid-template-columns: repeat(2, 20em);
  grid-template-rows: repeat(15, 5em) 1em;
  gap: 5px;
  grid-auto-flow: dense;
  align-content: baseline;
  justify-content: center;
  gap: 15px;
}

.gallery-item1 {
  grid-row: 1/5;
  grid-column: 1/3;
}

.gallery-item2 {
  grid-row: 5/9;
  grid-column: 1/2;
}

.gallery-item4 {
  grid-row: 9/14;
  grid-column: 1/2;
}

.gallery-item7 {
  grid-row: 14/16;
  grid-column: 1/2;
}

.gallery-item3 {
  grid-row: 5/9;
  grid-column: 2/3;
}

.gallery-item5 {
  grid-row: 9/11;
  grid-column: 2/3;
}

.gallery-item6 {
  grid-row: 11/16;
  grid-column: 2/3;
}

@media (min-width: 1350px) {
  .gallery {
    grid-template-columns: repeat(2, 40em);
    grid-template-rows: repeat(33, 5em) 2em;
  }
  .gallery-item1 {
    grid-row: 1/10;
    grid-column: 1/3;
  }
  .gallery-item2 {
    grid-row: 10/20;
    grid-column: 1/2;
  }
  .gallery-item4 {
    grid-row: 20/30;
    grid-column: 1/2;
  }
  .gallery-item7 {
    grid-row: 30/34;
    grid-column: 1/2;
  }
  .gallery-item3 {
    grid-row: 10/20;
    grid-column: 2/3;
  }
  .gallery-item5 {
    grid-row: 20/24;
    grid-column: 2/3;
  }
  .gallery-item6 {
    grid-row: 24/34;
    grid-column: 2/3;
  }
}
.gallery img {
  display: block;
  max-height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 15px;
}

.gallery-logo-image {
  border: 1px solid #000000;
  border-radius: 10px;
}

.gbt {
  display: grid;
  grid-area: gbt;
  grid-template-columns: 40em;
  grid-template-rows: 1em auto auto 1em repeat(8, auto) 5em;
  grid-template-areas: "." "gbt-header" "gbt-header-content" "." "gbt-step1" "gbt-step2" "gbt-step3" "gbt-step4" "gbt-step5" "gbt-step6" "gbt-step7" "gbt-step8" ".";
  align-content: baseline;
  justify-content: center;
  gap: 15px;
  background-color: #FA9EBC;
}

@media (min-width: 768px) {
  .gbt {
    display: grid;
    grid-area: gbt;
    grid-template-columns: repeat(2, 20em);
    grid-template-rows: 1em 6em auto 1em auto auto 1em auto auto 5em;
    grid-template-areas: ". ." "gbt-header gbt-header" "gbt-header-content gbt-header-content" ". ." "gbt-step1 gbt-step2" "gbt-step3 gbt-step4" ". ." "gbt-step5 gbt-step6" "gbt-step7 gbt-step8" ". .";
    align-content: baseline;
    justify-content: center;
    gap: 15px;
    background-color: #FA9EBC;
  }
}
@media (min-width: 1350px) {
  .gbt {
    display: grid;
    grid-area: gbt;
    grid-template-columns: repeat(4, 20em);
    grid-template-rows: 1em 6em auto 1em auto 1em auto 5em;
    grid-template-areas: ". . . . " "gbt-header gbt-header gbt-header gbt-header" "gbt-header-content gbt-header-content gbt-header-content gbt-header-content" ". . . ." "gbt-step1 gbt-step2 gbt-step3 gbt-step4" ". . . ." "gbt-step5 gbt-step6 gbt-step7 gbt-step8" ". . . .";
    align-content: baseline;
    justify-content: center;
    gap: 15px;
    background-color: #FA9EBC;
  }
}
.gbt-left {
  grid-area: gbt-left;
  background-color: #FA9EBC;
}

.gbt-right {
  grid-area: gbt-right;
  background-color: #FA9EBC;
}

.gbt-header {
  display: grid;
  grid-area: gbt-header;
  justify-content: center;
  align-content: center;
}

.gbt-header-content {
  display: grid;
  grid-area: gbt-header-content;
  justify-content: center;
  align-content: center;
}

.gbt-wrapper {
  display: grid;
  grid-template-rows: 80px 3em 1fr;
  gap: 10px;
  grid-template-areas: "gbt-picture" "gbt-head" "gbt-content";
}

.gbt-step1 {
  grid-area: gbt-step1;
}

.gbt-step2 {
  grid-area: gbt-step2;
}

.gbt-step3 {
  grid-area: gbt-step3;
}

.gbt-step4 {
  grid-area: gbt-step4;
}

.gbt-step5 {
  grid-area: gbt-step5;
}

.gbt-step6 {
  grid-area: gbt-step6;
}

.gbt-step7 {
  grid-area: gbt-step7;
}

.gbt-step8 {
  grid-area: gbt-step8;
}

.gbt-step-picture {
  overflow: hidden;
  object-fit: cover;
  max-width: 100%;
  max-height: 100%;
}

.gbt-content {
  display: none;
  padding-left: 1em;
  padding-right: 1em;
  grid-area: gbt-content;
}

.gbt-counter {
  color: rgb(225, 34, 26);
}

.gbt-picture {
  display: grid;
  grid-area: gbt-picture;
}

.gbt-picture-img {
  max-height: 100%;
  width: 100%;
}

.logo {
  display: grid;
  grid-area: logo;
  justify-content: center;
}

.logo_text1 {
  text-align: center;
  font-size: 0.8rem;
}

.logo_text2 {
  text-align: center;
  font-size: 1.2rem;
}

.map_area {
  display: grid;
  grid-area: map;
}

.map_area iframe {
  height: auto;
  width: 100%;
}

.navbar {
  display: grid;
  grid-area: navbar;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-areas: "logo menu hamburger";
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #FFF;
}

.menu-items {
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-items a {
  padding: 14px 16px;
  text-decoration: none;
  font-size: 1.2rem;
}

.menu-items a:hover {
  background: #ddd;
}

.menu-hamburger {
  display: none;
}

.bar {
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background: black;
}

@media (max-width: 60em) {
  .bar {
    display: block;
  }
  .menu-hamburger {
    display: grid;
    grid-area: hamburger;
    justify-content: center;
    justify-items: right;
  }
  .menu-hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }
  .menu-hamburger.active .bar:nth-child(1) {
    transform: rotate(45deg) translateY(18.5px);
  }
  .menu-hamburger.active .bar:nth-child(3) {
    transform: rotate(-45deg) translateY(-18.5px);
  }
  .menu-items {
    justify-content: right;
    justify-items: right;
    position: fixed;
    right: -100%;
    top: 75px;
    flex-direction: column;
    width: 100%;
    text-align: center;
    background: white;
    transition: 0.3s;
  }
  .menu-items.active {
    right: 0;
  }
}
.menu-logo {
  width: auto;
  height: 100px;
}

.office {
  display: grid;
  grid-area: office;
}

.office-img {
  max-height: 100%;
  width: 100%;
}

.price-list {
  display: grid;
  grid-area: pricelist;
  grid-template-columns: 40em;
  grid-template-rows: 1em 6em 1em auto 1em;
  grid-template-areas: "." "price-list-header" "." "price-list-content" ".";
  align-content: baseline;
  justify-content: center;
  gap: 15px;
}

@media (min-width: 768px) {
  .price-list {
    display: grid;
    grid-area: pricelist;
    grid-template-columns: 40em;
    grid-template-rows: 1em 6em 1em auto 1em;
    grid-template-areas: "." "price-list-header" "." "price-list-content" ".";
    align-content: baseline;
    justify-content: center;
    gap: 15px;
  }
}
@media (min-width: 1350px) {
  .price-list {
    display: grid;
    grid-area: pricelist;
    grid-template-columns: 80em;
    grid-template-rows: 1em 6em 1em auto 1em;
    grid-template-areas: "." "price-list-header" "." "price-list-content" ".";
    align-content: baseline;
    justify-content: center;
    gap: 15px;
  }
}
.price-list-header {
  grid-area: price-list-header;
}

.price-list-header-content {
  grid-area: price-list-header-content;
}

.price-list-content {
  grid-area: price-list-content;
}

.price-list-wrapper {
  display: grid;
  grid-template-columns: auto max-content;
  grid-template-areas: "entry price";
  align-items: baseline;
  gap: 0 0.25rem;
  padding-top: 1em;
}

.price-list-entry {
  grid-area: entry;
  position: relative;
  overflow: hidden;
  padding: 5px;
}

.price-list-entry::after {
  position: absolute;
  padding-left: 1ch;
  padding-right: 1ch;
  content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
  text-align: right;
}

.price-list-price {
  grid-area: price;
}

.row-pictures-one {
  display: grid;
  grid-area: row-pictures-one;
  grid-template-rows: repeat(3, 25em);
  grid-template-columns: 20em;
  grid-template-areas: "row-pictures-one-one" "row-pictures-one-two" "row-pictures-one-three";
  align-content: baseline;
  justify-content: center;
  gap: 15px;
}

@media (min-width: 768px) {
  .row-pictures-one {
    display: grid;
    grid-area: row-pictures-one;
    grid-template-rows: repeat(3, 25em);
    grid-template-columns: 40em;
    grid-template-areas: "row-pictures-one-one" "row-pictures-one-two" "row-pictures-one-three";
    align-content: baseline;
    justify-content: center;
    gap: 15px;
  }
}
@media (min-width: 1350px) {
  .row-pictures-one {
    display: grid;
    grid-area: row-pictures-one;
    grid-template-columns: repeat(3, 26.6666667em);
    grid-template-rows: 25em;
    grid-template-areas: "row-pictures-one-one row-pictures-one-two row-pictures-one-three";
    align-content: baseline;
    justify-content: center;
    gap: 15px;
  }
}
.row-pictures-one-one {
  grid-area: row-pictures-one-one;
  background-color: #544339;
}

.row-pictures-one-two {
  grid-area: row-pictures-one-two;
  background-color: #F8F3EE;
}

.row-pictures-one-three {
  grid-area: row-pictures-one-three;
  background-color: #DED3CE;
}

.service {
  display: grid;
  grid-area: service;
  grid-template-rows: 1em auto auto 1em auto auto auto 5em;
  grid-template-columns: 40em;
  grid-template-areas: "." "service-header" "service-header-content" "." "service-dh" "service-pl" "service-bz" ".";
  align-content: baseline;
  justify-content: center;
  gap: 15px;
}

@media (min-width: 768px) {
  .service {
    display: grid;
    grid-area: service;
    grid-template-rows: 1em 6em auto 1em auto auto auto 5em;
    grid-template-columns: 41em;
    grid-template-areas: "." "service-header" "service-header-content" "." "service-dh" "service-pl" "service-bz" ".";
    align-content: baseline;
    justify-content: center;
    gap: 15px;
  }
}
@media (min-width: 1350px) {
  .service {
    display: grid;
    grid-area: service;
    grid-template-rows: 1em 6em auto 1em auto 5em;
    grid-template-columns: 25em 2.5em 25em 2.5em 25em;
    grid-template-areas: ". . . . ." "service-header service-header service-header service-header service-header" "service-header-content service-header-content service-header-content service-header-content service-header-content" ". . . . ." "service-dh . service-pl . service-bz" ". . . . .";
    align-content: baseline;
    justify-content: center;
    gap: 15px;
  }
}
.service-wraper {
  display: grid;
  grid-template-rows: 6em auto;
  grid-template-areas: "service-header" "service-content";
}

.service-header {
  display: grid;
  grid-area: service-header;
  justify-content: center;
  align-content: center;
}

.service-header-content {
  display: grid;
  grid-area: service-header-content;
  justify-content: center;
  align-content: center;
}

.service-card-dh {
  grid-area: service-dh;
}

.service-card-pl {
  grid-area: service-pl;
}

.service-card-bz {
  grid-area: service-bz;
}

.service-content {
  display: none;
  grid-area: service-content;
  display: none;
  padding: 1em 1em;
}

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

html {
  scroll-padding-top: 75px;
  min-height: 100vh;
}

.main-container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: min-content auto minmax(25em, auto) minmax(50em, auto) auto minmax(25em, auto) repeat(5, auto);
  grid-template-areas: "navbar" "office" "service" "gbt" "gbt-picture" "about" "pricelist" "faq" "gallery" "contacts" "map";
}

/*# sourceMappingURL=style.css.map */