:root {
  --clr-pink-200: #fad8ea;
  --clr-pink-300: #ffb9dc;
  --clr-pink-400: #fc93cf;
  --clr-pink-800: #b05488;

  --clr-yellow-200: #e7ddaf;
  --clr-yellow-400: #f4e57e;
  --clr-yellow-800: #ecd54b;

  --clr-turquoise-300: #a3d2ca;
  --clr-turquoise-400: #5eaaa8;
  --clr-turquoise-800: #03a6a6;

  --clr-neutral-100: #ffffff;
  --clr-neutral-900: #000000;

  --ff-primary: "Montserrat", sans-serif;
  --ff-accent: "Montserrat", sans-serif;
  /* --ff-accent: "Roboto", sans-serif; */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: var(--ff-primary);
  font-size: 16px;
  font-weight: 400;
  line-height: 1 rem;
  background-color: black;
}

.container {
  margin-inline: auto;
  width: min(90%, 80rem);
}

.serviceCard{
  margin: 2em; 
}

.bg-turq {
  color: #000000;
  background: var(--clr-turquoise-400);

}

.bg-pink {
  color: #000000;
  background: var(--clr-pink-200);

}

.bg-yellow {
  color: #000000;
  background: var(--clr-yellow-200);
}

/*TITLE*/

h1 {
  color: #03a6a6;
  font-family: var(--ff-accent);
  font-size: 3em;
  font-weight: 200;
  margin: 0 auto;
  margin-top: .5em;
  text-align: center;
}
.titleH2 {
  color: whitesmoke;
  font-family: var(--ff-primary);
  font-size: 2em;
  line-height: 1.5em;
  margin-top: 1.5em;
  margin-bottom: 0.5rem;
  text-align: center;
}

.titleH3 {
  color: whitesmoke;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5em;
  line-height: 1.2em;
  padding: 0;
  margin-top: 2em;
  margin-bottom: 2em;

  text-align: center;
}

@media (min-width: 600px) {
  h1 {
    font-size: 10em;
  }

  .titleH2 {
    font-size: 3em;
  }

  .titleH3 {
    font-size: 1.8em;
  }
}

.welcomeImages {
  border-radius: 10px;
  box-shadow: #4a503d 3px 3px;
  display: block;
  margin: 0 auto;
  margin-top: 5em;
  max-width: 100%;
  max-height: auto;
}

/* custom divider */
.pawDivider-header {
  color: darkgrey;
  font-size: 1em;
  line-height: 3em;
  margin-bottom: 2em;
  text-align: center;
}
.pawDivider-page {
  color: darkgrey;
  font-size: 1em;
  margin-top: 1.5em;
  text-align: center;
}

@media (min-width: 600px) {
  .pawDivider-header {
    font-size: 3em;
    padding: 1em;
  }
}

.navbar {
  font-family: var(--ff-accent);
}

/*SERVICES*/

.services {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  padding: 0;
}

.bg-turq {
  color: #000000;
  background: var(--clr-turquoise-400);
  border-radius: 20px;
}

.bg-turq:hover {
  background: var(--clr-turquoise-800);
}

.bg-pink {
  color: #000000;
  background: var(--clr-pink-200);
  border-radius: 20px;
}

.bg-pink:hover {
  background: var(--clr-pink-400);
}

.bg-yellow {
  color: #000000;
  background: var(--clr-yellow-200);
  border-radius: 20px;
}

.bg-yellow:hover {
  background: var(--clr-yellow-400);
}

h2 {
  font-family: var(--ff-accent);
  font-size: 2em;
  font-weight: 200;
  padding-top: 1em;
  text-align: center;
  text-decoration: none;
}

h3 {
  color: var(--clr-neutral-900);
  font-family: var(--ff-accent);
  font-size: 0.69em;
  font-weight: 100;
  margin-bottom: 2rem;
  text-align: center;
}

ul {
  font-size: 0.9em;
  line-height: 2em;
  list-style: none;
}

li {
  list-style: none;
}

.servicesUL {
  margin-top: 1.5em;
}

.servicesGraphic {
  max-width: 100%;
}

@media (min-width: 600px) {
  h2 {
    font-size: 2em;
  }

  h3 {
    font-size: 1.5em;
  }
  ul {
    font-size: 1em;
  }
}

/*Price List on Cards */

.price-forServices {
  font-family: var(--ff-accent);
  font-size: 1.5em;
  margin: 1em 10em;
  border: 1px solid;
  border-radius: 10px;
  text-align: center;
}
.price-forServices:hover {
  color: var(--clr-neutral-100);
}

a {
  color: var(--clr-neutral-900);
  text-decoration: none;
}

.split {
  display: flex;
  flex-direction: column;
}

@media (min-width: 40em) {
  .split {
    flex-direction: row;
  }
  .split > * {
    flex-basis: 100%;
  }
  /* for anything that has a sibling directly before it, so that the initial sibling isnt affected! */
  .split > * + * {
    margin-left: 2em;
  }
}

/* About Section */
.aboutMe {
  color: var(--clr-neutral-100);

  line-height: 1.5em;
}

.aboutMePhoto {
  border-radius: 100%;
  display: block;
  margin: 0 auto;
  margin-top: 1em;
  margin-bottom: 2em;
  max-width: 75%;
  max-height: auto;
}

@media (min-width: 600px) {
  .aboutMePhoto {
    max-width: 50%;
    max-height: auto;
  }
}

.aboutMeTitle {
  font-size: 2.5em;
  margin-bottom: 0;
}

.titleLi {
  font-size: 1.5em;
  font-weight: 100;
  padding-bottom: 1em;
  text-decoration: underline;
}

.aboutMeText {
  font-family: var(--ff-primary);
  font-size: 0.8em;
  line-height: 1.5em;
  margin-top: 1rem;
  margin-left: 2em;
  margin-right: 2em;
  padding-top: 1rem;
  text-align: left;
}

.aboutMeLi {
  font-size: 0.72em;
}

@media (min-width: 600px) {
  .aboutMeText {
    font-size: 1em;
    line-height: 2em;
    margin-left: 0;
    margin-right: 0;
  }

  .titleLi {
    font-size: 1.5em;
  }

  .aboutMeLi {
    font-size: 1em;
  }
}

.contactButton {
  background: var(--clr-pink-200);
  border-radius: 10px;
  color: var(--clr-turquoise-800);
  font-family: var(--ff-accent);
  display: block;
  margin: 0 auto;
  margin-bottom: 2.5em;
  padding: 1em;
  text-decoration: none;
  transition: ease-in-out 150ms;
}

.contactButton:hover {
  background: var(--clr-turquoise-300);
  color: var(--clr-pink-800);
}

.contactButtonLink {
  text-decoration: none;
  color: var(--clr-turquoise-800);
}
.contactButtonLink:hover {
  text-decoration: none;
  color: var(--clr-pink-800);
}
/*Testimonials*/

.testimonials {
  color: #ffffff;
  font-size: 1em;
}

.testimonialsH2 {
  margin-bottom: 2rem;
}
.testimonial-clientReview {
  color: var(--clr-turquoise-300);
  font-family: var(--ff-primary);
  font-size: 1em;
  margin: 2em;
}

.boneIcon {
  color: var(--clr-yellow-400);
  font-size: 0.5em;
}

.testimonial-clientName {
  color: var(--clr-yellow-400);
  font-family: var(--ff-primary);
  font-size: 1em;
  text-align: right;
}

.starIcon {
  color: var(--clr-yellow-800);
}
.moreReviews {
  margin-top: 3em;
  text-align: center;
}

.reviewLink {
  color: var(--clr-turquoise-400);
}

.reviewLink:hover {
  color: var(--clr-pink-400);
}

footer {
  color: var(--clr-neutral-100);
  margin-top: 5rem;
  margin-bottom: 1.5rem;
  padding-top: 1.5rem;
  text-align: center;
}

.whiteLine {
  color: var(--clr-neutral-100);
}