@keyframes Jumping {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}
@keyframes Floating {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
@keyframes Rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes showPaw {
  0%, 40% {
    opacity: 0;
  }
  50% {
    opacity: 0.6;
  }
  70% {
    opacity: 1;
  }
}
.homepage {
  padding: 0;
  margin: 0;
}
.homepage h1,
.homepage h2,
.homepage h3,
.homepage a {
  font-family: "Beautiful Freak Bold";
}
.homepage p, .homepage h5 {
  font-family: "Franklin Gothic Book";
  color: black;
}
.homepage .hero {
  background-color: #FFE6BB;
  padding: 4vw 6vw;
  padding-bottom: 0;
  margin: 0;
}
.homepage .hero h1 {
  font-size: 5vw;
  color: #801919;
  width: 70%;
  margin-bottom: 0;
}
.homepage .hero .hero-text-image-flex {
  display: flex;
  justify-content: end;
  gap: 5vw;
}
.homepage .hero .hero-text-image-flex .hero-text {
  flex: 2;
}
.homepage .hero .hero-text-image-flex .hero-text p {
  font-size: 2vw;
  margin: 1.2rem;
}
.homepage .hero .hero-text-image-flex .hero-image {
  padding-right: 5rem;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}
.homepage .hero .hero-text-image-flex .hero-image .hero-dog {
  width: 100%;
  height: auto;
}
.homepage .hero .hero-text-image-flex .hero-image .hero-hat {
  width: 50%;
  height: auto;
  position: absolute;
  top: -30%;
  max-width: 100%;
}
.homepage .hero .hero-buttons {
  margin-left: 1.2vw;
  margin-top: 5vw;
}
.homepage .hero .btn {
  text-decoration: none;
  padding: 1.5vw 2.5vw;
  font-size: 2vw;
}
.homepage .hero .btn.primary {
  background-color: #EA9139;
  color: #801919;
}
.homepage .hero .btn.secondary {
  color: #801919;
  text-decoration: underline;
}
@media (max-width: 700px) {
  .homepage .hero h1 {
    text-align: center;
    font-size: 7vw;
    width: 100%;
  }
  .homepage .hero .hero-text-image-flex {
    flex-direction: column;
    text-align: center;
  }
  .homepage .hero .hero-text-image-flex .hero-text p {
    font-size: 4vw;
  }
  .homepage .hero .hero-text-image-flex .hero-image {
    margin-top: 14vw;
  }
  .homepage .hero .hero-text-image-flex .hero-image .hero-dog {
    width: 45%;
  }
  .homepage .hero .hero-text-image-flex .hero-image .hero-hat {
    width: 22%;
  }
  .homepage .hero .btn {
    text-decoration: none;
    padding: 2vw 3vw;
    font-size: 4vw;
  }
}
.homepage .services {
  background-color: #7A3C1A;
  color: #FFF3DF;
  padding: 8vw 5vw;
  text-align: center;
}
.homepage .services h1 {
  font-size: 4vw;
  margin: 0;
}
.homepage .services p, .homepage .services h5 {
  font-size: 2vw;
  color: #FFF3DF;
}
.homepage .services .services-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4vw;
  padding: 4vw 2vw;
  margin-bottom: 8vw;
}
.homepage .services .services-element {
  align-content: left;
  text-align: left;
  width: 30%;
}
.homepage .services .services-element p {
  font-size: 1.3vw;
}
.homepage .services .services-element h5 {
  font-size: 1.5vw;
  font-weight: bold;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.homepage .services .btn {
  text-decoration: none;
  padding: 1.5vw 2.5vw;
  font-size: 2.5vw;
  background-color: #EA9139;
  color: #801919;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  display: inline-block;
  position: relative;
  z-index: 2; /* Keep button above by default */
}
@media (max-width: 900px) {
  .homepage .services {
    padding: 5vw;
  }
  .homepage .services .services-flex {
    gap: 6vw;
    padding: 0;
  }
	.homepage .services p {
		font-size: 4vw;
	}
  .homepage .services .services-element .services-flex {
    padding: 0;
  }
  .homepage .services .services-element h5 {
    font-size: 2.5vw;
  }
  .homepage .services .services-element p {
    font-size: 2vw;
  }
  .homepage .services .services-element img {
    width: 10vw;
    height: auto;
    margin: 0;
  }
}
@media (max-width: 600px) {
  .homepage .services .services-flex {
    flex-direction: column;
    padding: 0;
  }
  
  .homepage .services h1 {
  font-size: 5vw;
  margin: 0;
  }

  .homepage .services .services-element {
    width: 60%;
    align-content: center;
    text-align: center;
  }
  .homepage .services .services-element h5 {
    font-size: 4vw;
    margin: 0;
  }
  .homepage .services .services-element p {
    font-size: 3vw;
  }
  .homepage .services .btn {
    padding: 1.5vw 2.5vw;
    font-size: 4vw;
  }
}
.homepage .testimonial-section {
  display: grid;
  grid-template-columns: 2fr 1fr;
  background-color: #7A7932;
  color: #FFF3DF;
  padding: 0 5vw;
  padding-top: 7vw;
}
.homepage .testimonial-section .text {
  z-index: 1;
}
.homepage .testimonial-section .image {
  position: relative;
  z-index: 10;
}
.homepage .testimonial-section .image img {
  position: absolute;
  bottom: -4vw;
  right: 3vw;
}
.homepage .testimonial-section h2 {
  font-size: 4vw;
  margin-bottom: 1vw;
}
.homepage .testimonial-section p {
  font-size: 2vw;
  color: #FFF3DF;
}
@media (max-width: 600px) {
  .homepage .testimonial-section h2 {
    font-size: 5vw;
  }
  .homepage .testimonial-section p {
    font-size: 2.4vw;
  }
}
@media (width > 1600px) {
  .homepage .testimonial-section p {
    font-size: 1.2vw;
  }
}
.homepage .our-impact {
  background-color: #FFE6BB;
  text-align: center;
  padding-top: 10vw;
  padding-bottom: 0;
  margin-bottom: 0;
}
.homepage .our-impact .top-section {
  position: relative;
  margin-bottom: 8vw;
}
.homepage .our-impact .top-section .logo-icon1 {
  position: absolute;
  right: 7vw;
  top: -10vw;
}
.homepage .our-impact .top-section .logo-icon2 {
  position: absolute;
  left: 15vw;
  bottom: -5vw;
}
.homepage .our-impact .top-section h2 {
  font-size: 7vw;
  color: #801919;
  margin: 0;
  margin-bottom: 2vw;
}
.homepage .our-impact .top-section h4 {
  font-size: 2.5vw;
  color: #7A7932;
  margin-top: 0;
  margin-bottom: 2vw;
}
.homepage .our-impact .top-section .impact-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}
.homepage .our-impact .top-section .impact-list p {
  font-size: 1.8vw;
  margin: 2vw;
}
.homepage .our-impact .bottom-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.homepage .our-impact .bottom-section h1 {
  color: #7A3C1A;
  font-size: 5vw;
  margin: 0;
  position: absolute;
  top: -8%;
  left: 20%;
  right: 20%;
  z-index: 1;
}
.homepage .our-impact .bottom-section .cta-dog-img {
  align-content: center;
  position: relative;
  z-index: 10;
}
.homepage .our-impact .bottom-section .btn {
  align-content: center;
  text-decoration: none;
  padding: 0.8vw 2.5vw;
  font-size: 4vw;
  background-color: #EA9139;
  color: #801919;
  z-index: 11;
  position: absolute;
  bottom: -1vw;
  left: 51%;
  transform: translate(-50%, -50%);
}
.homepage .our-impact .bottom-section .big-paw-left {
  position: absolute;
  left: 18vw;
  top: 8vw;
}
.homepage .our-impact .bottom-section .middle-paw-left {
  position: absolute;
  left: 14vw;
  top: 18vw;
}
.homepage .our-impact .bottom-section .small-paw-left {
  position: absolute;
  left: 11vw;
  top: 26vw;
}
.homepage .our-impact .bottom-section .big-paw-right {
  position: absolute;
  right: 18vw;
  top: 8vw;
}
.homepage .our-impact .bottom-section .middle-paw-right {
  position: absolute;
  right: 14vw;
  top: 18vw;
}
.homepage .our-impact .bottom-section .small-paw-right {
  position: absolute;
  right: 11vw;
  top: 26vw;
}
@media (max-width: 1200px) {
  .homepage .our-impact .top-section .logo-icon1 {
    width: 16vw;
    height: auto;
  }
  .homepage .our-impact .top-section .logo-icon2 {
    width: 10vw;
    height: auto;
  }
  .homepage .our-impact .bottom-section .cta-dog-img {
    width: 30vw;
    height: auto;
  }
  .homepage .our-impact .bottom-section img {
    width: 6vw;
    height: auto;
  }
}

@media (max-width: 1200px) {
    .homepage .our-impact .top-section .impact-list p {
        font-size: 3.5vw;
        
    }
}

.homepage .who-we-are {
  background-color: #EA9139;
  padding: 3vw 6vw;
  padding-bottom: 10vw;
}
.homepage .who-we-are h3 {
  color: #7A3C1A;
  font-size: 6vw;
  margin-bottom: 0;
  padding-bottom: 0;
}
.homepage .who-we-are .who-we-are-flex {
  display: flex;
}
.homepage .who-we-are .who-we-are-flex p {
  font-size: 1.8vw;
}
.homepage .who-we-are .who-we-are-flex .text {
  flex: 2;
  margin: 3vw;
}
.homepage .who-we-are .who-we-are-flex .images {
  flex: 1;
}
.homepage .who-we-are .learn-about-us-btn {
  color: #FFE6BB;
  background-color: #7A3C1A;
  padding: 1vw 2vw;
  font-size: 2vw;
  text-decoration: none;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  display: inline-block;
  position: relative;
  z-index: 2; /* Keep button above by default */
}
@media (max-width: 800px) {
  .homepage .who-we-are {
    text-align: center;
  }
  .homepage .who-we-are .who-we-are-flex {
    flex-direction: column;
  }
  .homepage .who-we-are .who-we-are-flex p {
    font-size: 4vw;
  }
  .homepage .who-we-are .who-we-are-flex .images {
    order: -1;
    margin-top: 3vw;
  }
  .homepage .who-we-are .who-we-are-flex .images img {
    width: 50vw;
    height: auto;
  }
  .homepage .who-we-are .learn-about-us-btn {
    padding: 2vw 4vw;
    font-size: 3vw;
    text-decoration: none;
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  display: inline-block;
  position: relative;
  z-index: 2; /* Keep button above by default */
  }
}

.Jumping {
  animation-name: Jumping;
  animation-duration: 3.5s;
  animation-iteration-count: infinite;
}

.Rotate {
  animation-name: Rotate;
  animation-timeline: view();
}

.showPaw {
  animation-name: showPaw;
  animation-timeline: view();
}

.Floating {
  animation-name: Floating;
  animation-duration: 3.5s;
  animation-iteration-count: infinite;
}
.btn-cto {
	position: relative;
    margin: 0 auto;
	width: 24vw;
}

.btn-cto1 {
	position: relative;
	width: 21vw;
}

@media only screen and (max-width: 600px) {
	.btn-cto1, .btn-cto {
		width: 35vw;
		margin: 0 auto;
	}
}
/*# sourceMappingURL=homepage.css.map */