@import url("https://use.typekit.net/brz1net.css");
/* ---------------------------------- COLOR --------------------------------- */
/* --------------------------------- PADDING -------------------------------- */
/* --------------------------------- FONTS --------------------------------- */
/* Hiding animation when needed */
svg {
  /* opacity: 0; */
  transition: opacity 0.3s;
}

.active.fp-completely svg {
  opacity: 1;
}

[data-aos][data-aos][data-aos-easing=custom-easing],
body[data-aos-easing=custom-easing] [data-aos] {
  transition-timing-function: cubic-bezier(0, 0, 0, 1);
}

[data-aos][data-aos][data-aos-easing=custom-easing-2],
body[data-aos-easing=custom-easing-2] [data-aos] {
  transition-timing-function: cubic-bezier(0.44, 0.04, 0.2, 1);
}

/* --------------------------- STYLING START HERE --------------------------- */
body {
  background-color: #94E0D4;
  min-height: 100vh;
  font-size: 1rem;
  overflow-x: hidden;
}

#fullPage {
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

.section404 {
  width: 100vw;
  height: 100vh;
}

h1,
h2 {
  font-family: "petala-pro", sans-serif;
  font-weight: 700;
}

h1,
h2 {
  color: #E84833;
}

p {
  font-family: "open-sans", sans-serif;
  font-size: 1.3rem;
  line-height: 2.15rem;
}

.section h1 {
  font-size: 5rem;
}

button {
  background-color: #E84833;
  color: white;
  font-family: "petala-pro", sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  border: none;
  padding: 1rem 2.5rem;
  margin-top: 1.25em;
  border-radius: 3rem;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.3s ease;
}
button:hover {
  border-radius: 0.5rem;
  background-color: #209653;
}

button::after {
  content: url(../img/icons/arrow-up.svg);
  display: inline-block;
  width: 1rem;
  margin-left: 1.75rem;
  transition: transform 0.3s ease;
  filter: brightness(200%) saturate(0);
  transform: translateY(0.3em);
}

#home button:hover,
#home404 button:hover {
  animation: float 1.5s linear infinite !important;
  box-shadow: 0.75rem 0.75rem 0 0 #57BEAD !important;
  background-color: #f77eb6 !important;
}

@keyframes float {
  0% {
    transform: translateY(0.5em);
  }
  50% {
    transform: translateY(0em);
  }
  100% {
    transform: translateY(0.5em);
  }
}
/* --------------------------------- HEADER --------------------------------- */
#home,
#home404 {
  position: relative;
  z-index: 1;
  background-color: #94E0D4;
  min-width: 100vw;
  width: 100%;
  min-height: -moz-fit-content;
  min-height: fit-content;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 10em;
  padding-top: 6rem;
  margin: 0;
}

#home::before,
#home404::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../img/svg/wave.svg);
  width: 100%;
  height: 100%;
  background-size: 100%;
  background-attachment: fixed;
  background-blend-mode: screen;
  background-position: center center;
  opacity: 0.12;
  background-repeat: repeat-x;
  animation: wave 90s linear infinite;
  mix-blend-mode: screen;
}

/* Keyframe reference: https://codepen.io/loaiabdalslam/pen/EEvpeP */
@keyframes wave {
  30% {
    background-position: left 2rem top 5rem;
  }
  55% {
    background-position: left 50rem top -3rem;
  }
  80% {
    background-position: left 2.5rem top -3rem;
  }
}
#home::after,
#home404::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../img/svg/bottom-grid.svg);
  width: 100%;
  height: 100%;
  background-size: 50%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: repeat;
  opacity: 0.25;
  z-index: -3;
}

#home404 .credit {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  margin: auto 0;
  width: 100%;
  color: #E84833;
  position: absolute;
  bottom: 4vh;
  text-align: center;
}
#home404 h2 {
  font-size: clamp(5rem, 6vw, 8rem) !important;
  text-transform: capitalize;
  color: #57BEAD;
  animation: textfloat 1.5s linear infinite !important;
  font-family: "petala-pro", sans-serif;
}

#home404 div {
  position: relative;
  z-index: 99;
}

.intro-ani {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 9rem;
  width: 100%;
  max-height: -moz-fit-content;
  max-height: fit-content;
  padding: 0 !important;
  /* margin-top: 1em; */
  z-index: 99;
  /* border: 1px solid black; */
}

.intro-ani.error-page {
  width: -moz-fit-content;
  width: fit-content;
  gap: 0;
  z-index: 0;
}
.intro-ani.error-page h1 {
  font-size: clamp(45rem, 41vw, 60rem) !important;
  line-height: 1em;
  color: #E84833;
  color: #57BEAD;
  animation: textfloat 2s linear infinite !important;
}

@keyframes textfloat {
  0% {
    transform: translateY(0.05em);
  }
  50% {
    transform: translateY(0em);
  }
  100% {
    transform: translateY(0.05em);
  }
}
.intro {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 30% !important;
  height: -moz-fit-content;
  height: fit-content;
  gap: 1.5rem;
  width: -moz-fit-content;
  width: fit-content;
  height: fit-content;
  text-align: left;
  color: black;
  transform: translateY(-3em);
}
.intro h2 {
  font-size: 3rem;
  line-height: 1.25em;
  /* color: #108d46; */
  color: #0b7927;
}

/* --------------------------------- NAV BAR -------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  padding: 0 5rem;
  transition: all 0.3s ease;
}

.nav ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  height: -moz-fit-content;
  height: fit-content;
  color: #E84833;
  list-style: none;
  padding: 0;
}
.nav ul #homepage {
  display: flex;
  flex-direction: row;
  gap: 1em;
}
.nav ul #homepage a {
  display: inline-block;
  font-size: 6.25rem !important;
  border: none !important;
}
.nav ul #homepage a img {
  width: clamp(24rem, 23.5vw, 30rem);
  height: auto;
  margin: 0 auto;
  padding: 2rem 0;
}

#navlinks {
  width: 100%;
  z-index: 3;
  transition: all 0.3s ease;
}
#navlinks li {
  position: relative;
  padding: 1em;
  cursor: pointer;
}
#navlinks li a {
  text-transform: capitalize;
  font-family: "petala-pro", sans-serif;
  font-size: clamp(1.25rem, 1.5vw, 2rem);
  font-weight: 700;
  color: #E84833;
  background: transparent;
}
#navlinks li::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: #E84833;
  top: 0.5em;
  left: 0;
  transform: scaleX(0);
  transform-origin: top left;
  transition: transform 0.3s ease-out;
}
#navlinks li::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: #E84833;
  bottom: 0.5em;
  left: 0;
  transform: scaleX(0);
  transform-origin: bottom left;
  transition: transform 0.3s ease-out;
}
#navlinks li:not(#homepage):hover::before,
#navlinks li:not(#homepage):hover::after {
  transform: scaleX(1);
}

/* --------------------------------- SECTION -------------------------------- */
#services,
#about,
#pricing,
#contact {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 6rem 0;
}

.services .sectionContainer {
  width: 100%;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end !important;
  padding: 3rem 15rem 0 15rem !important;
  flex-shrink: 0;
}

.sectionContainer.about {
  width: 100%;
  margin: 0 auto;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-items: stretch;
  padding: 0 15rem;
  color: #E84833;
}
.sectionContainer.about div {
  display: flex;
  align-items: start;
  justify-content: center;
  min-width: 50%;
  width: -moz-fit-content;
  width: fit-content;
  flex-direction: column;
  padding: 0 3rem;
}

/* --------------------------------- SLIDER --------------------------------- */
.slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.slider-tracker {
  width: 100%;
  height: 100%;
  display: flex;
  transition: transform 0.6s cubic-bezier(0, 0, 0, 1);
}

.sectionContainer {
  min-width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  /* flex-shrink: 0; */
}

#services:not(:has(:target)) .slider-tracker,
#services:has(#slide-1:target) .slider-tracker {
  transform: translateX(0%);
}

#services:has(#slide-2:target) .slider-tracker {
  transform: translateX(-100%);
}

#services:has(#slide-3:target) .slider-tracker {
  transform: translateX(-200%);
}

.slide-arrow {
  position: absolute;
  bottom: 12vh;
  z-index: 30;
  font-size: 2rem;
  padding: 1rem 1rem;
  border-radius: 50%;
  color: #E84833;
  text-decoration: none;
  transition: all 0.3s ease;
}

.slide-arrow:hover {
  background: #F8C7DC;
  opacity: 0.8;
}

.slide-arrow:active {
  background: inherit;
  transform: scale(0.8);
}

.slide-arrow.left {
  left: 25%;
}

.slide-arrow.right {
  right: 25%;
}

.state-1-prev,
.state-1-next,
.state-2-prev,
.state-2-next,
.state-3-prev,
.state-3-next {
  display: none;
}

/* Slide 1: both */
#services:not(:has(:target)) .state-1-prev,
#services:not(:has(:target)) .state-1-next,
#services:has(#slide-1:target) .state-1-prev,
#services:has(#slide-1:target) .state-1-next {
  display: block;
}

/* Slide 2: both */
#services:has(#slide-2:target) .state-2-prev,
#services:has(#slide-2:target) .state-2-next {
  display: block;
}

/* Slide 3: both */
#services:has(#slide-3:target) .state-3-prev,
#services:has(#slide-3:target) .state-3-next {
  display: block;
}

.slide-target {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  display: block;
  pointer-events: none;
  visibility: hidden;
}

/* Services container */
.section.services .sectionContainer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  /* border: 2px solid red !important; */
  color: #E84833;
}
.section.services .sectionContainer h1 {
  font-family: "Lumanosimo", sans-serif;
  font-size: 4rem;
  text-align: center;
}

.divCenter {
  display: flex;
  flex-direction: column;
  justify-content: center !important;
  align-items: center !important;
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  min-width: 50%;
  min-height: -moz-fit-content;
  min-height: fit-content;
  padding: 6rem 0 3rem 0;
  /* border: 1px solid black; */
}

.services .divCenter {
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  padding: 3rem 0 3rem 0 !important;
}

.pricing .divCenter {
  gap: 2em;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.375em;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

.priceContainer {
  width: 25.625em;
  height: -moz-fit-content;
  height: fit-content;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  padding: 3.125em 2.5em;
  background-color: #FFF7E5;
  border-radius: 2.5em;
  border: 3px solid #E84833;
  color: #E84833;
  text-align: center;
}
.priceContainer h2,
.priceContainer h3 {
  display: inline-block;
  font-family: "petala-pro", sans-serif;
  font-weight: 700;
}
.priceContainer h2 {
  font-size: 6rem;
}
.priceContainer h3 {
  font-size: 4rem;
}
.priceContainer p {
  width: 100%;
  font-size: 1.25rem !important;
  font-weight: 600;
  font-family: "open-sans", sans-serif;
  margin-bottom: 2rem;
}
.priceContainer .row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-family: "petala-pro", sans-serif;
  font-weight: 700;
  font-size: 2.75em;
}
.priceContainer button {
  background-color: #209653;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
.priceContainer button:hover {
  background-color: #f77eb6 !important;
}
.priceContainer:hover {
  transform: translateY(-1rem) rotate(1deg);
  box-shadow: 1rem 1.5rem 0 0 rgba(121, 194, 183, 0.432);
  transition: all 0.5s ease;
}

.pool-edge {
  background-color: #FFFBF2;
  width: 100%;
  height: 10rem;
  border-bottom: 3rem solid #E4DECF;
}

.services,
.pricing {
  background-color: #FFF7E5;
}

.services {
  height: -moz-fit-content;
  height: fit-content;
}

.pricing {
  padding-bottom: 6rem;
  z-index: 30;
}

.about,
.contact {
  background-color: #F8C7DC;
}

.about {
  position: relative;
  z-index: 50;
  padding: 6rem 0 3rem 0;
}
.about p {
  width: 40rem;
}
.about button {
  z-index: 99;
}

.pricing {
  opacity: 1;
  background-attachment: fixed;
  background-image: linear-gradient(#F2EBE5 5px, transparent 5px), linear-gradient(to right, #F2EBE5 5px, #FFF7E5 5px);
  background-size: 7rem 7rem;
}

.contact {
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact h1 {
  font-family: "Lumanosimo", sans-serif;
  color: #209653;
  font-weight: 500;
}

/* --------------------------------- MARQUEE -------------------------------- */
.green-mrq {
  background-color: #209653;
  color: #F8C7DC;
}

.pink-mrq {
  background-color: #F8C7DC !important;
  border-top: 3px solid #E84833;
  border-bottom: 3px solid #E84833;
  color: #E84833 !important;
}

.marquee {
  white-space: nowrap;
  overflow: hidden;
  display: inline-flex;
  animation: marquee 50s linear infinite;
}
.marquee div {
  display: flex;
  flex-direction: row;
  gap: 5rem;
  font-weight: 400;
  font-style: normal;
  margin: 0;
  padding: 1.5rem 0;
}
.marquee p {
  display: inline-block;
  margin: 0;
  font-family: "Lumanosimo", sans-serif;
  font-size: 2.5rem;
}

/* source: https://stackoverflow.com/questions/45847392/pure-css-continuous-horizontal-text-scroll-without-break */
@keyframes marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}
/* --------------------------------- CONTACT -------------------------------- */
.dog-paw {
  background-image: url(../img/svg/dog-paw.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top left;
  width: 18rem;
  height: 48rem;
  transform: rotate(37deg) translateY(0rem);
  position: absolute;
  top: -20rem;
  right: 15rem;
  animation: Paw 0.05s ease-in-out;
  pointer-events: none;
  /* animation-delay: 10s; */
  z-index: 3;
}

@keyframes Paw {
  0% {
    transform: rotate(0deg) translateY(-5rem);
  }
  100% {
    transform: rotate(37deg) translateY(0rem);
  }
}
.paper-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 60%;
  height: 70rem;
  background-color: #FFF7E5;
  /* transform: Form 3s ease-in-out; */
  transform: rotate(-3deg);
  animation: Form 0.3s ease-in-out;
  padding: 4rem 7.5rem 10rem 7.5rem;
}

@keyframes Form {
  0% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(-3deg);
  }
}
.paper-form form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  /* border: 1px solid red; */
  width: 100%;
}
.paper-form form button {
  margin-top: 2rem;
  margin-bottom: 3rem;
}

.input-group {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.25rem;
  width: 100%;
}

form label {
  color: #585656;
  text-align: left;
  font-family: "open-sans", sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 2em;
}

.paper-form input,
.paper-form textarea {
  width: 80%;
  color: #E84833;
  text-align: left;
  font-family: "open-sans", sans-serif;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  border-bottom: 1px dashed black;
  outline: none;
  padding-left: 3rem;
}

.paper-form #signature {
  width: 60%;
  font-family: "adobe-handwriting-ernie", sans-serif;
  font-size: 1.75em;
  color: #E84833;
  margin-left: 0.25rem;
  margin-bottom: 1.25em;
  text-transform: capitalize;
}

/* ---------------------------------- JSON ---------------------------------- */
#header-dog {
  height: 95%;
  /* border: 1px solid black; */
}

#header-leaves {
  position: absolute;
  top: 16rem;
  bottom: auto;
  width: 100%;
  height: auto;
  pointer-events: none;
}

#pricing-leaves {
  position: absolute;
  transform: translateY(-40rem);
  width: 100%;
  pointer-events: none;
  z-index: 99;
}

#service-daycare,
#service-grooming,
#service-inhome {
  width: 100%;
  height: 30rem;
  pointer-events: none;
}

/* ----------------------------------- SVG ---------------------------------- */
.tennis-ball {
  position: absolute;
  height: auto;
  animation: bounce 2s ease-in-out infinite;
}

.tennis-ball.ball-01 {
  width: 5rem;
  top: 13rem;
  left: 8rem;
}

.tennis-ball.ball-02 {
  width: 7rem;
  bottom: 15rem;
  right: 25rem;
}

#home404 .tennis-ball.ball-02 {
  right: 30% !important;
  top: 60%;
  z-index: 1000;
}

.tennis-ball.ball-03 {
  width: 7rem;
  bottom: 12vh;
  right: 25rem;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2rem);
  }
}
.stairs {
  position: absolute;
  bottom: 75.5%;
  right: 5rem;
  width: 20%;
  height: -moz-fit-content;
  height: fit-content;
  background: url(../img/svg/stairs.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  aspect-ratio: 1/1;
}

.photo-wrapper {
  position: relative;
  width: 41rem;
  height: 40rem;
  padding: 0;
  transform: translateY(6rem);
}

#photo-shape {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.clipped-photo {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  clip-path: url(#clip-path);
}

.paw {
  width: 5rem;
  height: 5rem;
}

/* --------------------------------- FOOTER --------------------------------- */
#footer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  width: 100%;
  min-height: -moz-fit-content;
  min-height: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  z-index: 999;
}

.pool {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: -5em;
  background-color: #94E0D4;
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  font-family: "petala-pro", sans-serif;
  font-weight: 700;
  color: #E84833;
  padding: 3rem 5rem;
  border-top: 3rem solid #57BEAD;
}

.pool ul {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 1.75rem;
  gap: 0.75rem;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

.info-container {
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  width: fit-content;
  height: fit-content;
  gap: 9rem;
}

.social-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding: 0;
  gap: 2.75rem;
}

#footer h1 {
  display: inline-block;
  font-size: 24em;
  line-height: 1em;
}

#footer .credit {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  margin: auto 0;
  width: 100%;
}

/* Other */
::-moz-selection {
  background-color: #f77eb6;
  color: white;
}
::selection {
  background-color: #f77eb6;
  color: white;
}

/* ------------------------- FULLPAGE INDICATOR DOTS ------------------------ */
#fp-nav ul li a span {
  background: #E84833 !important;
  width: 10px;
  height: 10px;
}

#fp-nav ul li a.active span {
  background: #B0E856 !important;
  width: 1.5rem;
  height: 1.5rem;
}

#fp-nav {
  right: 2rem;
}

#fp-nav ul li .fp-tooltip {
  color: #E84833;
  font-family: "petala-pro", sans-serif;
}

/* ------------------------------ MEDIA QUERIES ----------------------------- */
/* Desktop */
/* Tablets */
@media screen and (min-width: 768px) and (max-width: 992px) {
  .fp-section,
  .section {
    height: auto !important;
    min-height: -moz-fit-content !important;
    min-height: fit-content !important;
  }
  /* fullpage js content */
  .fp-tableCell,
  .fp-table {
    height: auto !important;
    display: block !important;
  }
  #home,
  #home404 {
    height: 100%;
    padding-bottom: 3rem !important;
  }
  .nav {
    padding: 1.5rem 2rem 0 2rem;
  }
  .nav ul #homepage a {
    font-size: 2.75rem !important;
  }
  .nav ul a:not(#homepage a) {
    font-size: 1.25rem !important;
  }
  .intro-ani {
    width: 100%;
    gap: 3rem;
    align-items: flex-end;
    padding: 0;
    margin-top: 4rem;
  }
  .intro-ani h2 {
    font-size: clamp(2rem, 3vw, 3rem) !important;
  }
  .intro-ani p {
    font-size: clamp(1rem, 1.5vw, 1.5rem) !important;
  }
  .intro-ani button {
    cursor: pointer;
  }
  /* --------------------------------- SECTION -------------------------------- */
  .divCenter {
    padding: 0;
    width: 100%;
    height: -moz-fit-content;
    height: fit-content;
    gap: 2.5em;
  }
  #about {
    padding: 0 0 5rem 0;
  }
  .sectionContainer.about {
    width: 100%;
    height: -moz-fit-content !important;
    height: fit-content !important;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    gap: 5rem;
    padding: 0 5rem;
  }
  .sectionContainer.about div {
    width: 100% !important;
    height: -moz-fit-content;
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
  }
  .sectionContainer.about p {
    width: 60%;
    font-size: 1.25em;
    text-align: center;
  }
  .clipped-photo {
    width: 50%;
    height: auto;
  }
  .pricing-grid {
    display: grid;
    grid-template-columns: 2fr 2fr;
    padding: 0 3rem;
  }
  .paper-form {
    width: 100%;
    height: -moz-fit-content;
    height: fit-content;
  }
  .input-group {
    gap: 0 !important;
  }
  .input-group.signature,
  .input-group.message {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
  .input-group label {
    width: 25%;
  }
  .input-group input,
  .input-group textarea {
    width: 75%;
    font-size: 1.25em;
  }
  .pool h1 {
    font-size: clamp(9rem, 5vw, 12rem) !important;
  }
  /* ---------------------------------- SLIDE --------------------------------- */
  .slide-arrow {
    bottom: 15vh;
  }
  .slide-arrow.left {
    left: 10% !important;
  }
  .slide-arrow.right {
    right: 10% !important;
  }
  .section.services .sectionContainer {
    width: 100% !important;
    flex-direction: column !important;
    padding: 0 !important;
    align-items: center !important;
    gap: 1rem;
  }
  .section.services .sectionContainer h1 {
    width: 100%;
    font-size: 3.5rem;
    text-align: center;
  }
  /* ----------------------------------- SVG ---------------------------------- */
  #header-dog {
    width: 50vw !important;
  }
  #header-leaves {
    top: clamp(35rem, 40vw, 45rem) !important;
    pointer-events: none;
  }
  .tennis-ball.ball-01 {
    top: 10rem;
  }
  .tennis-ball.ball-02 {
    display: none;
  }
  .tennis-ball.ball-03 {
    width: 5rem;
    bottom: 40vh !important;
  }
  .dog-paw {
    width: 12em;
    /* height: auto; */
    right: 3em;
    transform: translateY(5rem) rotate(37deg);
  }
  .stairs {
    display: none;
  }
}
/* Mobile */
@media screen and (max-width: 768px) {
  /* I asked chatGPT for forcing natural height on mobile */
  .fp-section,
  .section {
    height: auto !important;
    min-height: -moz-fit-content !important;
    min-height: fit-content !important;
  }
  /* fullpage js content */
  .fp-tableCell,
  .fp-table {
    height: auto !important;
    display: block !important;
  }
  /* Hero Area */
  #home,
  #home404 {
    width: 100%;
    height: 100vh;
  }
  #home::before,
  #home404::before {
    background-size: cover;
  }
  #home button,
  #home404 button {
    animation: float 1.5s linear infinite !important;
    box-shadow: 0.75rem 0.75rem 0 0 #57BEAD !important;
  }
  .nav {
    display: grid;
    grid-template-columns: 1fr;
    height: -moz-fit-content;
    height: fit-content;
  }
  .nav ul {
    width: 100%;
    height: auto;
    list-style: none;
    margin: 0 0 2em 0;
  }
  .nav ul #homepage a {
    display: inline-block;
    font-size: clamp(4rem, 6vw, 5rem) !important;
    border: none !important;
    text-align: center;
  }
  .nav ul a:not(#homepage a) {
    display: none !important;
    /* height: 0; */
  }
  .intro-ani {
    height: -moz-fit-content;
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 2em;
    margin-top: 2em;
  }
  .intro {
    width: 100% !important;
    text-align: center;
  }
  .intro h2 {
    width: 80%;
    margin: 0 auto;
    font-size: clamp(2rem, 5vw, 3rem) !important;
    text-align: center !important;
  }
  .intro p {
    font-size: 1.15rem;
  }
  .intro button {
    margin: 0 auto;
  }
  #home404 {
    min-height: 100vh !important;
  }
  #home404 h2 {
    font-size: clamp(2rem, 5vw, 3rem) !important;
  }
  .credit {
    padding-bottom: 5rem;
    font-size: clamp(1rem, 1.5vw, 2rem) !important;
  }
  #home404 #header-dog {
    width: clamp(15rem, 20vw, 25rem) !important;
  }
  #navlinks #homepage img {
    margin: 0 auto;
    padding: 2rem 0;
    width: clamp(12rem, 15vw, 18rem) !important;
  }
  .intro-ani.error-page {
    width: 100% !important;
    flex-direction: row;
    justify-content: center !important;
    align-items: center !important;
    gap: 0;
    margin-top: 5rem;
  }
  .intro-ani.error-page h1 {
    font-size: clamp(10rem, 12vw, 15rem) !important;
  }
  /* --------------------------------- SECTION -------------------------------- */
  .section:not(.section.contact) {
    height: auto !important;
    padding: 2rem 1em !important;
  }
  .section.services .sectionContainer h1 {
    font-size: 2.25rem !important;
  }
  .services .divCenter {
    padding: 0;
  }
  .divCenter {
    padding: 0;
    width: 100%;
    height: -moz-fit-content;
    height: fit-content;
    gap: 1.75em;
  }
  .pricing-grid {
    width: 60%;
    height: -moz-fit-content;
    height: fit-content;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    padding: 0 1em !important;
  }
  .priceContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: -moz-fit-content;
    height: fit-content;
  }
  .priceContainer button {
    font-size: 1.5rem !important;
  }
  .priceContainer h2 {
    font-size: clamp(3rem, 5vw, 4rem) !important;
  }
  .priceContainer h3 {
    font-size: clamp(3rem, 5vw, 3.75rem) !important;
  }
  .priceContainer h5 {
    font-size: clamp(1.5rem, 5vw, 3rem) !important;
  }
  .priceContainer p {
    font-size: clamp(1rem, 2vw, 1.5rem) !important;
  }
  #cta-btn::after {
    display: inline-flex;
    flex-wrap: wrap;
    flex-shrink: 0;
  }
  .sectionContainer.about {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    padding: 2em 0;
  }
  .sectionContainer.about div {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
  }
  .sectionContainer.about p {
    width: 100%;
    font-size: 1.25em;
    text-align: left;
  }
  .photo-wrapper {
    position: absolute;
    width: 100%;
    height: -moz-fit-content;
    height: fit-content;
    transform: translateY(0) !important;
    inset: 0 !important;
  }
  .about h1,
  .pricing h1,
  .services h1,
  .contact h1 {
    font-size: 4em !important;
    text-align: center;
  }
  .about button,
  .pricing button,
  .services button,
  .contact button {
    width: -moz-fit-content !important;
    width: fit-content !important;
  }
  .about button::after,
  .pricing button::after,
  .services button::after,
  .contact button::after {
    display: inline-flex;
    flex-wrap: wrap;
    flex-shrink: 0;
  }
  .contact .divCenter {
    align-items: flex-end;
    justify-content: flex-end;
  }
  .paper-form {
    width: 100%;
    height: 100%;
    transform: none !important;
    animation: none !important;
    padding: 3rem 1.5rem 6rem 1.5rem !important;
  }
  .input-group.signature,
  .input-group.message {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .input-group label {
    width: -moz-fit-content;
    width: fit-content;
  }
  .input-group input,
  .input-group textarea {
    width: 90% !important;
    font-size: 1em;
  }
  #footer {
    width: 100%;
    flex-direction: column;
    justify-content: space-between;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    text-align: center !important;
  }
  #footer .info-container {
    width: 100%;
    flex-direction: column;
    justify-content: center !important;
    align-items: center !important;
    gap: 0;
    padding: 0 !important;
    text-align: center !important;
    /* border: 1px solid red; */
  }
  #footer .pool {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* padding-top: 10rem !important; */
  }
  #footer .pool ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.25rem;
    width: 100%;
  }
  #footer h1 {
    font-size: 5em;
  }
  #footer .credit {
    width: 100% !important;
    text-align: center !important;
    padding: 1rem 0 !important;
  }
  .info-container {
    height: -moz-fit-content;
    height: fit-content;
    flex-direction: column;
    justify-content: center !important;
    align-items: center !important;
    gap: 1rem;
  }
  .social-container {
    width: 100%;
    z-index: 20;
  }
  .social-container img {
    width: 2rem !important;
    height: 2rem !important;
  }
  /* --------------------------------- SLIDER --------------------------------- */
  .slider-tracker {
    width: 100%;
  }
  .paw {
    width: 1.5em;
    height: 1.5em;
  }
  .slide-arrow {
    bottom: 15vh !important;
  }
  .slide-arrow:active {
    transform: scale(0.8) !important;
  }
  .slide-arrow.left {
    left: 5% !important;
  }
  .slide-arrow.right {
    right: 5% !important;
  }
  .section.services .sectionContainer {
    width: 100% !important;
    flex-direction: column !important;
    padding: 0 !important;
    align-items: center !important;
    gap: 1rem;
  }
  .section.services .sectionContainer h1 {
    width: 50%;
    font-size: 2rem;
    text-align: center;
  }
  .section.services .sectionContainer > div {
    width: 100% !important;
    min-width: unset !important;
    padding: 0 !important;
  }
  /* ----------------------------------- SVG ---------------------------------- */
  .tennis-ball.ball-01,
  .tennis-ball.ball-02 {
    display: none;
  }
  .tennis-ball.ball-03 {
    height: auto;
    right: 1.5rem;
    bottom: 5vh;
  }
  .photo-wrapper {
    position: relative;
    width: 60%;
    height: -moz-fit-content;
    height: fit-content;
    transform: translateY(0);
  }
  .dog-paw {
    width: 11.5rem;
    right: 5rem;
    transform: translateY(2rem) rotate(30deg) !important;
  }
  .stairs {
    display: none;
    /* width: 80%;
    height: auto;
    left: 50%;
    transform: translate(-50%, 0) !important;
    bottom: 30.75rem; */
  }
  .social-container img {
    width: 2.5rem !important;
    height: 2.5rem !important;
    padding: 2rem 0;
  }
  /* -------------------------------- ANIMATION ------------------------------- */
  svg {
    opacity: 1 !important;
  }
  #pricing-leaves {
    display: none;
  }
  #header-dog {
    width: 70% !important;
    margin: 0 auto;
  }
  #header-leaves {
    margin: 0 auto;
    left: 0;
    bottom: auto;
    top: 15vh;
  }
  #service-daycare,
  #service-grooming,
  #service-inhome {
    width: 100% !important;
    height: 15rem !important;
    display: block !important;
    pointer-events: none;
  }
}/*# sourceMappingURL=style.css.map */