/* Basic styles for the body and main elements */
body {
  font-family: 'Qucksand', sans-serif;
  margin: 0;
}

/* Styles for the header */
header {
  background-color: #4b00bc;
  padding: 20px;
  text-align: center;
}

header img {
  max-width: 200px;
}

/* Styles for each section */
#title {
  background-color: #4b00bc;
  text-align: center;
  padding: 5px 0px;
  margin: 0;
}

#title-spacer {
  background: linear-gradient(#4b00bc 0%, #ffd34e 100%);
  padding: 0 0 50px 0;
}

#get-to-know-us {
  background-color: #ffd34e;
  padding: 10px 20px 10px 20px;
}

#start-off {
  background: linear-gradient(#ffd34e 0%, #0071bc 100%);
  padding: 10px 20px 10px 20px;
}

#our-services {
  background-color: #0071bc;
  padding: 10px 20px 10px 20px;
}

#contact-us {
  background: linear-gradient(#0071bc 0%, #7D2AE8 70%);
  padding: 10px 20px 10px 20px;
}

/* Text styles */
.description {
  font-size: large;
}

#title-text {
  color: #00C4CC;
}

#get-to-know-us-header {
  color: #7D2AE8;
}

#start-off-header {
  color: #7D2AE8;
}

#our-services-header {
  color: #46ebef;
}

#training-dogs-header {
  color: #46ebef;
}

#training-cats-header {
  color: #46ebef;
}

#help-other-pets-header {
  color: #46ebef;
}

#contact-us-header {
  color: #46ebef;
}

/* Style for spacer divs */
.small-spacer-div {
  max-width: 5%;
  min-width: 50px;
}

.med-spacer-div {
  max-width: 10%;
  min-width: 100px;
}

.large-spacer-div {
  max-width: 15%;
  min-width: 150px;
}

/* Styles for spacer images */
.spacer-image {
  text-align: center;
}

.spacer-image img {
  max-width: 50%;
  max-height: 250px;
}

/* Styles for text-image pair containers */
.text-img-container {
  display: flex;
  /* Make items the same height */
  align-items: stretch;
}

.text-img-container img {
  /* Maintain aspect ratio */
  height: auto;
  max-width: 25%;
  object-fit: contain;
}

/* Styles for the service divs */
.service {
  margin-bottom: 20px;
}

.header-with-logo {
  display: flex;
}

.header-with-logo img {
  max-width: 50px;
  max-height: 50px;
}

/* Styles for the footer */
footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  width: 100%;
}