html {
  font-size: 20px;
}

.background {
  background: linear-gradient(171deg, #eee6db 51.26%, #928778 113.12%);
  background-blend-mode: hard-light;
  overflow: hidden;
}

.home {
  height: 100vh;
  background: url("images/doamna.png") center center no-repeat;
  background-size: contain;
  position: relative;
}

/* HEADER SECTION */

nav {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  bottom: 3rem;
  position: relative;
}
nav > a {
  color: black;
  text-decoration: none;
  padding-right: 1.5rem;
}
.navbar-brand > img {
  width: 180px;
  height: 200px;
}
nav > a:last-child {
  padding-right: 0;
}

.d-flex.flex-column.justify-content-center.align-items-center {
  padding-top: 2.3rem;
}
#navbarNav {
  padding-top: 2rem;
}
/* HEADER SECTION */

/* HERO SECTION */

.text {
  margin: auto;
  color: black;
  z-index: 0;
  font-weight: 700;
  text-align: center;
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-transform: uppercase;
  font-family: "Italiana", serif;
  font-size: 2rem;
  background: 50% 100% / 50% 50% no-repeat
    radial-gradient(ellipse at bottom, transparent, transparent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: reveal 1000ms ease-in-out forwards 200ms,
    glow 1500ms linear infinite 500ms;
}

/* HERO SECTION */

/* ABOUT PILATES SECTION */

.aboutpilates {
  display: grid;
  grid-template-areas:
    "text gridimage1 gridimage4"
    "text  gridimage2 gridimage5"
    "text1  gridimage3 gridimage6";
  row-gap: 1rem;
  column-gap: 1rem;
  margin: 8rem 3rem;
}
.abouttext {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  width: 100%;
}
.abouttext h2 {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
  padding-bottom: 1rem;
}
.abouttext > p {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.locationicon1,
.locationicon2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
.locationicon1 {
  margin-bottom: 0.5rem;
}
.locationicon1 > p,
.locationicon2 > p {
  font-size: 0.8rem;
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 0;
}
.aboutpilates img {
  width: 100%;
  height: 12rem;
}
.aboutpilates img:first-child {
  grid-area: gridimage1;
  width: 100%;
}
.aboutpilates img:nth-child(2) {
  width: 100%;
  grid-area: gridimage2;
}
.aboutpilates img:nth-child(3) {
  grid-area: gridimage3;
  width: 100%;
}
.aboutpilates img:nth-child(4) {
  grid-area: gridimage4;
  width: 100%;
}
.aboutpilates img:nth-child(5) {
  grid-area: gridimage5;
  width: 100%;
}
.aboutpilates img:nth-child(6) {
  grid-area: gridimage6;
  width: 100%;
}
.aboutpilates > p {
  grid-area: text1;
  width: 70%;
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: extralight;
}
.abouttext {
  grid-area: text;
}

.abouttext > button {
  border: none;
  display: block;
  position: relative;
  padding: 0.7em 2.4em;
  font-size: 18px;
  background: transparent;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  color: rgb(194, 170, 141);
  z-index: 1;
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  margin-bottom: 1rem;
}

.abouttext > button span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: -1;
  border: 4px solid rgb(194, 170, 141);
}

.abouttext > button span::before {
  content: "";
  display: block;
  position: absolute;
  width: 8%;
  height: 500%;
  background: var(--lightgray);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-60deg);
  transition: all 0.3s;
}

.abouttext > button:hover span::before {
  transform: translate(-50%, -50%) rotate(-90deg);
  width: 100%;
  background: rgb(194, 170, 141);
}

.abouttext > button:hover {
  color: white;
}

.abouttext > button:active span::before {
  background: rgb(194, 170, 141);
}

/* ABOUT PILATES SECTION */

/* TRAINER */
.trainerbox {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  align-items: center;
  justify-content: center;
  gap: 6rem;
  margin-bottom: 14rem;
  position: relative;
  width: 70%;
  left: 50%;
  transform: translate(-50%);
}

.antrenor {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.trainer > h1 {
  padding-bottom: 7rem;
  text-align: center;
  padding-top: 5rem;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
}

ul {
  list-style-type: disc;
}

.antrenor h5 {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
}
.antrenor li {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.antrenor > img {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
}

.cutieantrenor {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
  padding: 2rem 0;
  box-shadow: 5px 5px 20px black;
}

/* TRAINER */

/* SERVICES */

.services {
  border: 1px solid black;
  margin: 0 2rem;
  margin-bottom: 10rem;
  background-color: #efefef;
}
.pilatesreformerbox {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  height: 80vh;
}
.pilatesreformerbox h6,
.pilatessalteabox h6,
.masajbox h6 {
  font-family: "Playfair Display", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
}
.pilatesreformerbox h4,
.pilatessalteabox h4,
.masajbox h4 {
  font-family: "Italiana", system-ui;
  font-weight: 400;
  font-style: normal;
}
.pilatesreformerbox p,
.pilatessalteabox p,
.masajbox p {
  font-family: "Montserrat", system-ui;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: thin;
}
.pilatesreformertext {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-basis: 50%;
  padding: 2rem;
}
.imaginereformer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-basis: 50%;
}
.pilatesreformertext > h4 {
  padding-top: 3rem;
  padding-bottom: 1rem;
}
.pilatesreformertext > h6 {
  font-size: 0.7rem;
}
.pilatesreformertext > p {
  font-size: 0.8rem;
}

.imaginereformer > img {
  height: 60%;
  width: 100%;
}
.imaginereformer > .colorbox {
  height: 15rem;
  width: 100%;
  background-color: #575046;
}
.pilatessalteabox {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  height: 80vh;
}
.mattext {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-basis: 50%;
  padding: 0 4rem;
}
.mattext > h4,
.mattext > p {
  padding-bottom: 1.5rem;
}
.mattext > h6 {
  font-size: 0.7rem;
  padding-bottom: 3rem;
}
.mattext > p {
  font-size: 0.8rem;
}
.imaginemat {
  flex-basis: 50%;
  position: relative;
  border-top: 1px solid black;
  border-right: 1px solid black;
}
.imaginemat > img {
  height: 60%;
  width: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.masajbox {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  height: 80vh;
}
.masajbg {
  background-color: #575046;
  flex-basis: 50%;
  position: relative;
}
.masajbg > img {
  height: 95%;
  width: 70%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.masajtext {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-basis: 50%;
  padding: 0 4rem;
  background-color: #9e9485;
}
.masajtext > p {
  font-size: 0.8rem;
}
.masajtext > h6 {
  font-size: 0.7rem;
  padding-bottom: 3rem;
}
.masajtext > h4,
.masajtext > p {
  padding-bottom: 1.5rem;
}
.button {
  position: relative;
  overflow: hidden;
  height: 3rem;
  padding: 0 2rem;
  border-radius: 1.5rem;
  background: #575046;
  background-size: 400%;
  color: #fff;
  border: none;
  cursor: pointer;

  font-family: "Oswald", system-ui;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: semibold;
}

.button:hover::before {
  transform: scaleX(1);
}

.button-content {
  position: relative;
  z-index: 1;
  font-size: 0.8rem;
}

.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  width: 100%;
  height: inherit;
  border-radius: inherit;
  background: linear-gradient(
    82.3deg,
    rgba(130, 118, 100, 1) 10.8%,
    rgba(87, 80, 70, 1) 94.3%
  );
  transition: all 0.475s;
}

/* SERVICES */

/* PRICES SECTION */

.prices {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 140vh;
  margin: 0 2rem;
}
.pricelist {
  background-color: #ededed;
  width: 75%;
  height: 100%;
}
.pricelistrow {
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: center;
  gap: 2rem;
}
.pricelist > h1 {
  text-align: center;
  padding-top: 3rem;
}
.flexandflowunu,
.flexandflowdoi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.3rem;
}
.flexandflowunu > img,
.flexandflowdoi > img {
  width: 170px;
  height: 170px;
}
.flexandflowunu > .linie,
.flexandflowdoi > .linie {
  border-top: 1px solid black;
  width: 100%;
}

.flexandflowunu > ul,
.flexandflowdoi > ul {
  font-size: 0.7rem;
}
.flexandflowunu > h4,
.flexandflowdoi > h4 {
  font-size: 1.1rem;
}
.flexandflowunu > h5,
.flexandflowdoi > h5 {
  font-size: 0.9rem;
}
.imagepic {
  height: 100%;
  width: 25%;
  background-image: url(images/pricepic2.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.imagepic > img {
  height: 100%;
  width: 100%;
}

/* PRICES SECTION */

/* CONTACT SECTION */

.contact {
  background-color: #9e9485;
}

.contactbox {
  display: grid;
  grid-template-areas:
    "titlu titlu titlu"
    "adresa telefon program"
    "mapa mapa mapa";
  align-items: center;
  justify-content: center;
  padding: 8rem 3rem 0;
  margin-top: 10rem;
  row-gap: 3rem;
  column-gap: 3rem;
}
.contactbox h6 {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
  padding-bottom: 1rem;
}
.contactbox p,
.contactbox a {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 0.7rem;
}
.contactbox > h2 {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.address {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  grid-area: adresa;
  width: 100%;
  align-self: start;
}

.phoneandemail {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  grid-area: telefon;
  width: 100%;
  align-self: start;
}
.phoneandemail > a,
.phone > a {
  text-decoration: none;
  color: black;
  margin-bottom: 1rem;
}
.phone {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 0.7rem;
  margin: 0px 0px 20px;
}
.workschedule {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  grid-area: program;
  width: 100%;
  align-self: start;
}
.squeeze {
  height: 2.8em;
  width: 9em;
  background: transparent;
  -webkit-animation: jello-horizontal 0.9s both;
  animation: jello-horizontal 0.9s both;
  border: 2px solid rgba(87, 80, 70, 1);
  outline: none;
  color: rgba(87, 80, 70, 1);
  cursor: pointer;
  font-size: 17px;
}

.squeeze:hover {
  background: rgba(87, 80, 70, 1);
  color: #ffffff;
  animation: squeeze3124 0.9s both;
}
.socialbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 3rem;
}
.socialbox > h5 {
  font-family: "Playfair Display", system-ui;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: italic;
}
.socialbox > p,
.copyright {
  font-family: "Montserrat", system-ui;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
.socialicons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
@keyframes squeeze3124 {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.copyright {
  text-align: center;
  padding-top: 2rem;
}
.imaginelogo {
  height: 5rem;
  width: 9rem;
}
.map {
  grid-area: mapa;
  height: 20rem;
}

/* CONTACT SECTION */

/* KEYFRAMES */

@keyframes reveal {
  80% {
    letter-spacing: 1px;
  }
  100% {
    background-size: 300% 300%;
  }
}
@keyframes glow {
  10% {
    text-shadow: 0 0 3px black;
  }
}
@keyframes mymove {
  from {
    left: -14rem;
  }
  to {
    left: 0;
  }
}

/* KEYFRAMES */

/* RESPONSIVENESS */

@media (max-width: 481px) {
  .home {
    background-size: cover;
  }
}

@media (max-width: 1140px) {
  .pricelistrow {
    padding: 0 1.5rem;
  }
}
@media (max-width: 516px) {
  .container-fluid > button {
    position: relative;
    left: 50%;
    transform: translate(-50%);
  }
}
@media (max-width: 448px) {
  .navbar-brand > img {
    width: 150px;
    height: 180px;
  }
}
@media (max-width: 367px) {
  .navbar-brand > img {
    width: 120px;
    height: 150px;
  }
}
@media (max-width: 890px) {
  .pilatesreformertext {
    padding: 1rem;
  }
  .pilatesreformertext > h4 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .mattext {
    padding: 0 1rem;
  }
  .mattext > h4,
  .mattext > p {
    padding-bottom: 0.5rem;
  }
  .mattext > h6 {
    padding-bottom: 0.5rem;
  }

  .masajtext {
    padding: 0 1rem;
  }

  .masajtext > h6 {
    padding-bottom: 0.5rem;
  }
  .masajtext > h4,
  .masajtext > p {
    padding-bottom: 0.5rem;
  }
}
@media (max-width: 800px) {
  .aboutpilates {
    grid-template-areas:
      "text text1"
      "gridimage1 gridimage2"
      "gridimage3 gridimage4"
      "gridimage5 gridimage6";
  }
  .aboutpilates > p {
    width: 100%;
  }
}
@media (max-width: 870px) {
  .prices {
    flex-direction: column;
  }
  .imagepic {
    display: none;
  }
}
@media (max-width: 870px) {
  .prices {
    gap: 1rem;
  }
  .pricelist {
    width: 100%;
  }
}
@media (max-width: 697px) {
  .pricelistrow {
    flex-direction: column;
    align-items: center;
  }
  .prices {
    height: auto;
  }
  .pricelist {
    background-color: #928778;
  }
  .pricelist > h1 {
    padding-bottom: 2rem;
  }
  .flexandflowunu,
  .flexandflowdoi {
    background-color: #ededed;
    padding: 0 2rem 2rem;
  }
  .flexandflowunu {
    margin-bottom: 2rem;
  }
  .flexandflowunu > img,
  .flexandflowdoi > img {
    align-self: center;
  }
  .pricelist {
    width: 100%;
    height: 100%;
  }
}
@media (max-width: 703px) {
  .pilatesreformerbox {
    flex-direction: column;
    height: auto;
  }
  .button {
    height: 2rem;
    padding: 0 1rem;
  }
  .pilatessalteabox {
    flex-direction: column;
  }
  .mattext > p {
    padding-bottom: 0rem;
    margin-bottom: 0.5rem;
  }
  .masajtext {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .mattext {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .masajbox {
    flex-direction: column-reverse;
  }
  .mattext > button,
  .masajtext > button {
    margin-bottom: 1rem;
  }
}

@media (max-width: 500px) {
  .aboutpilates {
    margin: 8rem 1rem;
  }
}
@media (max-width: 820px) {
  .text {
    top: 70%;
    left: 50%;
  }
  .trainerbox {
    gap: 3rem;
  }
  .contactbox {
    column-gap: 1rem;
  }
}
@media (max-width: 740px) {
  .contactbox {
    grid-template-areas:
      "titlu"
      "adresa"
      "telefon"
      "program"
      "mapa";
  }
  .contactbox > h2 {
    text-align: center;
  }
  .map {
    height: 20rem;
    width: 20rem;
  }
  .address,
  .phoneandemail,
  .workschedule {
    align-items: center;
  }
}
@media (max-width: 600px) {
  .trainerbox {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
  .aboutpilates img {
    height: 8rem;
  }
  .aboutpilates img {
    height: 7rem;
  }
  .copyright {
    font-size: 0.8rem;
  }
  .imaginelogo {
    height: 4rem;
    width: 7rem;
  }
}
@media (max-width: 625px) {
  .socialicons svg {
    height: 80px;
    width: 30px;
  }
}

/* RESPONSIVENESS */