/* Basic Reset */
* {
  margin: 0;
  padding: 0;  
  box-sizing: border-box;
}

@keyframes pulseBorder {
  0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.6); }
  70% { box-shadow: 0 0 0 6px rgba(255, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
}

.canvas-invalid {
  border: 2px solid red !important;
  animation: pulseBorder 0.6s ease;
}

.sig-error-msg {
  color: red;
  font-size: 0.9em;
  margin-top: 4px;
  display: none;
}


.page-container {
  position: relative;
}

.header-email {
  margin-right: 3rem;
  font-size: 1.5rem;
  color: #c6c2af; /* Ensure visibility on dark background */
  font-weight: bold;
}

.content-container {
  min-height: calc(100vh - 13.4rem);
}

body {
  font-family: 'Quicksand', serif;
  line-height: 1.6;
  background-color: white;
  color: #333;
  overflow-x: hidden;
}

/* Make the container span the entire width of the screen */
.container {
  width: 100vw; /* Full width */
  max-width: 100vw; /* Remove any previous width limitations */
  margin: 0; /* Remove default margin */
  padding: 0 1.25rem; /* Optional padding for content on smaller screens */
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.title {
  flex: auto;
}

.phone-number {
  font-size: 1.5rem;
  color: #c6c2af; /* Ensure visibility on dark background */
  font-weight: bold;
  padding-right: 0.094rem;
}

.contact-section {
  width: 100%;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  padding: 3rem 1rem;
}

.contact-intro > * + * {
  margin-top: 1rem;
}

.contact-title {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
}

.contact-content {
  margin-bottom: 5rem;
}

#contact-message {
  height: 5rem !important;
}

.privacy-policy {
  text-align: center;
}

.form-group-container {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-label {
  margin-bottom: 0.5rem;
}

.form-input,
.form-textarea {
  padding: 0.5rem;
  border: 1px solid #e5e7eb;
  display: flex;
  height: 2.5rem;
  width: 100%;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.form-textarea {
  width: 80% !important;
}

.form-input::placeholder,
.form-textarea:focus-visible {
  color: #6b7280;
}

.form-input:focus-visible,
.form-textarea:focus-visible {
  outline: 0.2rem solid #4e7f85;
  outline-offset: 0.1rem;
}

.form-textarea {
  min-height: 20rem;
}

.form-submit {
  margin-left: 0;
  margin-right: 0;
  margin-top: 1.2rem;
  background-color: #4e7f85;
  color: #fff;
  padding: 1rem 0.25rem;
  border-radius: 0.375rem;
  width: 10rem;
}

.submit-container {
  text-align: center;
}

.canvas-container {
  align-items: center;
  text-align: center;
}

.signature-btns {
  align-items: center;
  text-align: center;
}

.sig-submitBtn {
  background-color: #4e7f85;
  color: #fff;
  padding: 0.5rem 0.3rem;
  border-radius: 0.375rem;
}

.sig-canvas {
  border: 0.14rem solid #c6c2af;
  border-radius: 0.7rem;
  cursor: crosshair;
}


/* Navigation Styling */
.non-hamburger-menu {
  display: flex;
  justify-content: right; /* Center navigation items */
  padding-right: 0.094rem;
}

.non-hamburger-menu a {
  text-decoration: none;
  color: black;
  font-size: 1rem;
}

.non-hamburger-menu a:hover {
  text-decoration: underline;
}

.navbar {
  padding: 1em;
}

.nav-list {
  list-style: none;
  display: flex;
}

.nav-list li {
  position: relative;
}

.nav-list li a {
  color: white;
  text-decoration: none;
  padding: 1em;
  display: block;
}

.disabled {
  opacity: 0.5; /* Visual cue for disabled state */
}

/* Popup Styles */
.vet-popup {
    border: 0.14rem solid #c6c2af; /* Matches your .sig-canvas */
    border-radius: 0.7rem;        /* Matches your .sig-canvas */
    padding: 2rem;
    max-width: 400px;
    width: 90%;
    margin: auto;
    background-color: white;
    text-align: center;
}

.vet-popup::backdrop {
    background: rgba(0, 0, 0, 0.7);
}

.popup-title {
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    font-weight: bold;
}

/* Reusing your existing .intro-button styles */
.vet-popup .intro-button {
    display: block;
    margin: 0 auto 1.5rem auto; /* Centers the button */
    width: 100%;
    max-width: 250px;
    height: auto;
    min-height: 4rem;
    padding: 1rem;
    text-decoration: none;
    box-shadow: 0.3rem 0.4rem 0.8rem rgba(40, 63, 66, 0.3);
}

.popup-close {
    background: #e5e7eb;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    font-family: 'Quicksand', serif;
    color: #333;
    width: 30%;
}

/* Dropdown Styles */
.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #73aab1;
  min-width: 200px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1;
  list-style: none;  
}

.dropdown-content:first-child {
  border-top: none;
}

.dropdown-content li {
  width: 100%;
  border-top: 0.1rem solid #c6c2af;
}

.dropdown-content li:first-child {
  border-top: none;
}

.dropdown-content li a {
  padding: 0.8em 1em;
  color: #fff;
  text-decoration: none;
  text-align: left;
}

.dropdown-content li a:hover {
  background-color: #30575c;
  color: #fff !important;
}

.business-hours-header {
  color: #4e7f85;
  font-size: larger;
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.business-hours-header-2 {
  font-size: large;
  font-weight: bold;
  margin-bottom: 1rem;
}

/* Hover effect for main nav items */
.nav-list li a:hover {
  color: #868686;
}

/* Hero Section */
.hero {
  background: url('vet_landing_splash.jpg') center center / cover no-repeat; /* Fallback for older browsers */
  background-image: url('vet_landing_splash.webp'); /* Modern browsers use WebP */
  height: 28rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #f1f1f1;
  position: relative;
  margin-top: 5rem;
}

.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* Dark overlay for text contrast */
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 100vw;
  margin: 0 auto;
  margin-top: 4rem;
}

.hero h2 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}

.hero p {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.hero a.btn {
  background-color: #4e7f85;
  padding: 0.625rem 0.563rem;
  color: white;
  text-decoration: none;
}

.hero a.btn:hover {
  background-color: #003366;
}

.invalid {
  border: 0.14rem solid red !important;
  animation: horizontal-shaking 0.35s;
}

@keyframes horizontal-shaking {
  0% { transform: translateX(0) }
  25% { transform: translateX(0.313rem) }
  50% { transform: translateX(-0.313rem) }
  75% { transform: translateX(0.313rem) }
  100% { transform: translateX(0) }
}

.call-schedule-h2 {
  margin-top: 2rem;
  margin-left: 1rem;
  margin-right:  1rem;
  font-size: 1.4rem !important;
  font-weight: bold;
  color: #333 !important;
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-decoration-color: #4e7f85;
}

.call-schedule-h3 {
  margin-top: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
  font-size: 1.4rem !important;
  font-weight: bold;
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-decoration-color: #4e7f85;
}

.call-schedule-link {
  text-decoration-color: #4e7f85;
}

.call-schedule-link:hover {
  color: #fff !important;
}

/* Intro Section */
.intro {
  text-align: center;
}

/* Text Row */
.intro-text {
  margin: 3rem 10rem; /* Space between text and buttons */
  padding: 1rem;
}

.intro-header {
  font-size: 2rem;
  color: #333;
  margin: 1.875rem; /* Space between text and buttons */
  padding: 1rem;
  font-size: 1.2rem;
}

.intro-header p {
  margin-top: 1rem;
}

.intro-text p {
  font-size: 1.2rem;
  color: #666;
}

.intro-btn {
  background-color: #4e7f85; /* Matching color */
  color: #f1f1f1;
  padding: 1.25rem;
  width: 12.5rem;
  height: 12.5rem;
  text-align: center;
  line-height: 10rem; /* Adjust to vertically center text */
  font-size: 1.125rem;
  font-weight: bold;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  border-radius: 1rem;
}

.intro-btn:hover {
  background-color: #4e7f85;
}

/* Footer */
.footer {
  position: absolute;
}

.footer-container {
  width: 100vw; /* Full width */
  max-width: 100vw; /* Remove any previous width limitations */
  margin: 0; /* Remove default margin */
  padding: 1rem 3rem 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  background-color: #4e7f85;
}

.home-footer-container {
  display: flex;
  gap: 40rem;
  margin: 1.25rem
}

.footer-left {
  flex: auto;
  width: 33%;
  margin: 1.25rem;
}

.footer-right {
  flex: auto;
  width: 33%;
  text-align: right;
  margin: 1.25rem;
}

.footer-left h3 {
  font-size: 1.2rem;
  color: #f1f1f1;
  margin-bottom: 0.625rem;
}

.footer-left ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-left ul li {
  font-size: 1rem;
  margin-bottom: 0.28rem;
}

.footer-left ul li strong {
  color: #f1f1f1;
}

.footer-right p {
  margin: 0;
  font-size: 1rem;
}

.footer-nav { 
  display: flex;
  vertical-align: middle;
}

.footer-nav a {
  color: #f1f1f1;
  text-decoration: none;
  margin: 0 0.625rem;
  font-size: 1rem;
}

.footer-nav a:hover {
  color: #28a745;
}

.footer-right a {
  color: #f1f1f1;
  text-decoration: none;
  margin: 0 0.313rem;
}

.footer-right a:hover {
  color: #28a745;
}

.footer-container-bottom {
  text-align: center;  
}

.footer-copyright {
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
  background-color: #4e7f85;
}

.footer-center {
  text-align: center;
  margin-top: 1.25rem;
}

.footer-request-appointment {
  margin: 0.625rem;
}

.footer-request-appointment a.btn {
  margin: 0.625rem;
  padding: 0.625rem 1.25rem;
  background-color: #4e7f85;
  color: white;
  text-decoration: none;
}

.footer-request-appointment a.btn:hover {
  background-color: #4e7f85;
}

.footer-phone-number {
  color: #c6c2af;
}

/* Business Hours Section */
.business-hours {
  background-color: #c6c2af;
  padding: 1rem 0;
}

/* Make the container span the entire width of the screen */
.business-hours-container {
  width: 100%; /* Full width of the screen */
  max-width: 100%; /* No maximum width constraint */
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  margin-left: 0;
}

/* Business Hours Section Styling */
.hours-info {
  text-align: center; /* Center the text inside the business hours section */
  width: 50%; /* Adjust width as needed */
}

.hours-info h2 {
  font-size: 1.4rem;
  color: #4e7f85;
}

.hours-info hr {
  width: 6rem;
  border: 0.1rem solid #00457c;
  margin-bottom: 0.938rem;
}

.hours-info h3 {
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
  color: #333;
}

.hours-info ul {
  list-style: none;
  padding: 0;
  text-align: center; /* Center the list content */
}

.hours-info ul li {
  font-size: 1.125rem;
  margin-bottom: 0.625rem;
}

.hours-info ul li strong {
  color: #f1f1f1;
}

.call-schedule-button {
  width: 28rem !important;
}

.call-schedule-button-container {
  align-self: center;
  margin-bottom: 3rem;
}

/* Address Section (adjust as needed) */
.address-info {
  width: 50%;
  height: 100%;
}

.address-image {
  height: 100%;
  background: url('address-image.jpg') center center / cover no-repeat; /* Fallback for older browsers */
  background-image: url('address-image.webp'); /* Modern browsers use WebP */
  position: relative;
  min-height: 30rem; /* Ensure minimum height */
}

.address-image-contact {
  height: 100%;
  background: url('rupert_snow_river.jpg.jpg') center center / cover no-repeat; /* Fallback for older browsers */
  background-image: url('rupert_snow_river.webp'); /* Modern browsers use WebP */
  position: relative;
  min-height: 30rem; /* Ensure minimum height */
}

.address-details {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  color: white;
}

.address-details h3 {
  font-size: 1.3rem;
  margin-bottom: -0.313rem;
}

.address-details p {
  font-size: 1.2rem;
  margin-bottom: 0.938rem;
}

.address-details .btn {
  background-color: #4e7f85;
  color: white;
  padding: 0.625rem 1.25rem;
  text-decoration: none;
}

.address-details .btn:hover {
  background-color: #003366;
}

.registration-form {
  margin-top: 0rem !important;
}


/* Main Header */
header {
  background-color: #4e7f85; /* Blue color matching your example */
  position: fixed;
  height: 8rem; /* Adjust height as needed */
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  z-index: 10; /* Ensures the header stays above other content */
  transition: height 0.25s ease, background-color 0.25s ease; /* Smooth transition for height and background */
  width: 100vw;
  top: 0;
  left: 0;
  padding: 1.25rem 1.25rem; /* Add padding to ensure space for content */
  border-bottom: 1px solid #c6c2af;
}

/* Left Cutout */
header::after {
  content: '';
  position: absolute;
  width: 25%;
  min-width: 16.25rem;
  background: inherit;
  top: calc(100% - 1rem);
  height: 3.7rem;
  left: 0;
  z-index:10;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  -webkit-clip-path: polygon(0 0, 100% 0%, 85% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0%, 85% 100%, 0% 100%);
  border-bottom: 1px solid #c6c2af;
}

header::before {
  content: '';
  position: absolute;
  width: 25%;
  min-width: 16.25rem;
  top: calc(100% - 1rem);
  height: 3.7rem;
  left: 0;
  z-index: 9; /* Position behind ::after */
  background: #c6c2af;
  clip-path: polygon(95.5% 27.8%, 95% 27.8%, 84.5% 98%, 85% 98%);
  border: 1px solid #c6c2af;
}


.appointment-row.shrink {
  margin-bottom: 0;
}

header #logo {
  display: block;
  height: 100%;
  width: 100%;
  transition: font-size 0.3s ease; /* Adjust logo size smoothly */
  position: relative;
  z-index: 11;
}

.appointment-btn {
  margin-left: 1.875rem;
  background-color: #f1f1f1;
  color: #4e7f85;
  padding: 0.625rem 1.25rem;
  text-decoration: none;
}

.large_animal_placeholder_center {
  text-align: center;
}

.appointment-btn:hover {
  background-color: #f1f1f1;
}

/* New styles for the appointment row */
.appointment-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 0.75rem;
  margin-bottom: 0.25rem;
}

.appointment-row .btn {
  margin-right: 1.25rem;
  color: #f1f1f1;
}

.copyright-container {
  width: 100vw; /* Full width */
  max-width: 100vw; /* Remove any previous width limitations */
  margin: 0; /* Remove default margin */
  padding: 0 1.25rem; /* Optional padding for content on smaller screens */
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  background-color: #4e7f85;
}


/* Services Section */
/* .services {
  padding: 3.125rem 0;
  text-align: center;
}

.services-container h2 {  
  text-align: center;
}

.services-container hr {  
  width: 20%;
  margin: auto;
}

.services-container {
  width: 100%; 
  max-width: 100%; 
  display: block;
  justify-content: center; 
  align-items: center; 

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto); 
  gap: 1.25rem;
  max-width: 75rem; 
  margin: 0 auto;
  padding-top: 1.25rem;
}

.service-item {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1rem solid #ddd;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-item img {
  width: 100%;
  height: auto;
}

.service-item p {
  padding: 0.938rem;
  text-align: center;
  font-size: 2rem;
  background-color: #f9f9f9;
}

.service-item:hover {
  transform: scale(1.05);
  box-shadow: 0 4rem 8rem rgba(0, 0, 0, 0.2);
} */

.fa-solid, .fa-regular {
  color: #c6c2af;
}

.fa-2xl {
  margin-bottom: 0.8rem;
}

.intro-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.875rem;
}

.intro-button {
  flex-direction: column;
  background-color: #4e7f85; /* Matching color */
  padding: 0.625rem;
  width: 14.063rem;
  height: 12.5rem;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  color: white;
  box-shadow: 0.5rem 0.8rem 1rem 0.1rem #283f42;
  border-radius: 0.4rem;
}

.intro-button:hover {
  background-color: #6da6ad;
  transform: scale(1.05);
}

.intro-button img {
  height: 30%;
}

.intro-button span {
  margin-top: 1.563rem;
  font-size: 0.875rem;
}

.on-call-schedule-cta {
  margin-top: 2rem !important;
  font-size: large !important;
}

.services, .new-clients, .base {
  margin-left: 7.5%;
  margin-right: 7.5%;
  margin-top: 10rem;
  font-size: larger;
}

.reg-form-base {
  font-size: x-large;
}

.wrap-breakword {
  overflow-wrap: break-word;
}

.padding-left-2rem {
  padding-left: 2rem;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Creates 4 equal-width columns */
  gap: 2rem;
  padding: 1.25rem;
}

.bison-services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Creates 2 equal-width columns */
  grid-template-rows: repeat(2, auto);   /* Creates 2 rows, height adjusts to content */
  gap: 2rem;
  padding: 1.25rem;
}

.bovine-services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Creates 2 equal-width columns */
  grid-template-rows: repeat(2, auto);   /* Creates 2 rows, height adjusts to content */
  gap: 2rem;
  padding: 1.25rem;
}

.dairy-services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Creates 2 equal-width columns */
  grid-template-rows: repeat(2, auto);   /* Creates 2 rows, height adjusts to content */
  gap: 2rem;
  padding: 1.25rem;
}

.equine-services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Creates 2 equal-width columns */
  grid-template-rows: repeat(2, auto);   /* Creates 2 rows, height adjusts to content */
  gap: 2rem;
  padding: 1.25rem;
}

.service-item {
  border-radius: 0.5rem;
  overflow: hidden;
  text-align: center;
  padding: 0.938rem;
  transition: transform 0.2s;
  height: auto;
  width: 100%;
}

.service-item:hover {
  transform: scale(1.05);
}

.service-item img {
  width: 100%;
  height: auto;
  border-bottom: 1px solid #e0e0e0;
}

.service-item h3 {
  font-size: 1.2em;
  color: #333;
  margin: 0.625rem 0;
}

.services-content, .new-clients-content, .base-content {
  margin-right: 2rem;
  margin-bottom: 2rem;
}

.schedule-content {
  margin-top: 0rem !important;
}

.schedule-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* Creates 2 equal-width columns */
  grid-template-rows: repeat(6, auto);   /* Creates 3 rows, height adjusts to content */
  gap: 2rem;
  padding: 1.25rem;
}

.schedule-item {
  border-radius: 0.5rem;
  overflow: hidden;
  text-align: center;
  padding: 0.938rem;
  transition: transform 0.2s;
  height: auto;
  width: 100%;
}

.schedule-item img {
  width: 100%;
  height: auto;
  border-bottom: 1px solid #e0e0e0;
}

.about-container, .services-container, .new-clients-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.base-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.base-title, .about-title, .contact-title {
  text-decoration: underline;
}

.base-title {
  text-align: center;
}

.base-image {  
  width: 100%;
  margin: 0 auto;
  margin-top: 2rem;
  text-align: center;
}

.our-practice-image {
  width: 70%;
  margin: 0 auto;
  margin-top: 2rem;
  text-align: center;
}

.base-image img, .our-practice-image img {
  border: 3px solid #c6c2af;
  border-radius: 2px;
  width: 50%;
}

.base-content {
  margin-top: 3rem;
}

.about-us {
  margin-top: 12rem;
}

.about-content {  
  margin-left: 7.5%;
  margin-right: 3rem;  
  margin-bottom: 1.5rem;
}

.about-image-container {
  align-content: center;
  margin-top: 1.5rem;
}

.about-image {
  border: 3px solid #c6c2af;
  border-radius: 2px;
  max-width: none;
}


img {
  max-width: 100%;
  height: auto;
}

h1 {
  font-size: 2rem; /* Instead of a fixed size */
}

.non-hamburger-menu {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}  

.hamburger-menu {
  display: none;
}   

a:hover {
  color: #c6c2af;
}

#menuToggle {
  display: block;
  position: relative;
  top: 50px;
  right: 50px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
  right: 0rem;
  top: 1rem; 
}

#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: auto;
  right: -5px; /* Position checkbox at the right */
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  -webkit-touch-callout: none;
}

/*
* Just a quick hamburger
*/
#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;

  background: #cdcdcd;
  border-radius: 3px;

  z-index: 1;

  transform-origin: 4px 0px;

  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
  background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
  opacity 0.55s ease;
}

#menuToggle span:first-child {
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

/*
* Transform all the slices of hamburger
* into a crossmark.
*/
#menuToggle input:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(2px, -1px);
  background: #c6c2af;
}

/*
* But let's hide the middle one.
*/
#menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
* Ohyeah and the last one should go the other direction
*/
#menuToggle input:checked ~ span:nth-last-child(2) {
  transform: rotate(-45deg) translate(2px, -1px);
}

/*
* Make this absolute positioned
* at the top left of the screen
*/
#menu {
  position: absolute;
  width: 15rem;
  margin: 1.2rem -2.125rem 0 0; 
  right: 0;
  background: #73aab1;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */

  transform-origin: 100% 0%;
  transform: translate(100%, 0);

  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

#menu a {
  text-decoration: none;
  color: white;
  transition: color 0.3s ease;
}

#menu li {
  padding: 10px 0;
  font-size: 22px;
  border-bottom: 1px solid #c6c2af;
}

#menu li:last-child {
  border-bottom: none;
}

/*
* And let's slide it in from the left
*/
#menuToggle input:checked ~ ul {
  transform: translate(0, 0); /* Bring the menu fully into view */
}

.onclick-menu:focus {
  /* clicking on label should toggle the menu */
  pointer-events: none;
}

.onclick-menu-content {
  list-style: none;
  max-height: 0;  /* Set max-height to 0 to hide */
  overflow: hidden;  /* Hide content that extends beyond max-height */
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease;
}

.onclick-menu-content.show {
  max-height: 30rem;  /* Set max-height to 0 to hide */
  opacity: 1;
  visibility: visible;
}

.onclick-menu-content li {
  list-style: none;  
  border-bottom: none !important;
}

.submenu-item {
  font-size: medium;
}

.header-container-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 6rem;
  width: 19rem;
  margin-top: 1.8rem;
  margin-left: 1rem;
}

.header-container-right {
  display: flex;
  flex-direction: column;
  align-items: end;
  text-align: center;
  padding-right: 0.5rem;
}

.contact {
  display: flex;
  flex-direction: column;
  margin-top: 12rem;
}

.contact-container {
  margin-left: 7.5%;
  min-height: 33.1rem;
}

.contact-content-phone-email, .contact-content-socials {
  display: flex;
}

.contact-content-phone, .contact-content-email, .facebook-container, .instagram-container {
  width: 50%;
}

.contact-pic-container {
  width: 50%;
  margin: auto;
}

.contact-pic-container img {
  width: 28rem;
  height: auto;
}

.contact-flex-col {
  display: flex;
  flex-direction: column;
}

.display-inline {
  display: inline;
}

.instagram-icon {
  width: 3rem;
  height: 3rem;
}

.contact-form {
  width: 90%;
  margin-bottom: 2rem;
}

.centered-checkbox-label {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: larger;
}

.non-footer-container {
  display: flex;
  min-height: calc(100vh - 3.6rem); 
}

/* Sidebar styling */
.sidebar {
  width: 13rem;
  height: 20%;
  margin-top: 15rem;
  margin-right: 6rem;
  background-color: #4e7f85;
  border-left: 1px solid #c6c2af;
  border-radius: .25rem;
}

.sidebar h2 {
  font-size: 1.4em;
  margin-bottom: 1em;
}

.sidebar ul {
  width: 13rem;
  list-style: none;
}

.sidebar ul li {
  margin: 0.625rem 0;
  padding: 3.125rem 0;
  border-bottom: 1px solid #c6c2af;
  transition: transform 0.2s ease;
}

.sidebar ul li:last-child {
  border-bottom: none;
}

.sidebar ul li:hover a {
  transform: scale(1.1);
  color: #333;
  font-weight: bold;
}

.sidebar ul li:hover a i {
  transform: scale(1.1);
}

.sidebar ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 1.5em;
  padding: 0.313rem 0;
  display: block;
  transition: color 0.3s;
  text-align: center;
}

.sidebar ul li a i {
  display: inline-block;
  text-align: center;
  width: 100%;
  margin-bottom: 2rem;
  transition: transform 0.2s ease;
}

.sidebar ul li a.active {
  color: #333;
  font-weight: bold;
}

.content-container-sidebar {
  margin-right: 0rem; /* Adjust for sidebar width on the right */
  padding: 1.25rem;
  width: calc(100% - 15rem);
}

@media (max-width: 1019px) {
  .appointment-row a {
    font-size: 1rem;
  }
}


/* SMALL SCREEEEEEEEEEEEN SMALL SCREEEEEEEEEEEENSMALL
 SCREEEEEEEEEEEENSMALL SCREEEEEEEEEEEENSMALL SCREEEEEEEEEEEENSMALL SCREEEEEEEEEEEENSMALL SCREEEEEE
 EEEEEENSMALL SCREEEEEEEEEEEENSMALL SCREEEEEEEEEEEENSMALL SCREEEEEEEEEEEENSMALL SCREEEEEEEEEEEENSMALL SCREEEEEE
 SMALL SCREEEEEEEEEEEEN
 SMALL SCREEEEEEEEEEEEN
 SMALL SCREEEEEEEEEEEEN
 SMALL SCREEEEEEEEEEEEN
 SMALL SCREEEEEEEEEEEEN
 EEEEEENSMALL SCREEEEEEEEEEEENSMALL SCREEEEEEEEEEEENSMALL SCREEEEEEEEEEEENSMALL SCREEEEEEEEEEEENSMALL SCREEEEEEEEEEEENSMALL SCREEEEEEEEEEEENSMALL SCREEEEEEEEEEEENSMALL SCREEEEEEEEEEEENSMALL SCREEEEEEEEEEEEN */
@media (max-width: 768px) {
  .header-container-right,
  .header-container-left {
    flex-direction: column;
    width: 100%;
  }

  .header-container-right {
    padding-right: 0;
  }

  .header-container-left {
    height: 4.3rem;
    width: 25rem;
    margin-top: 0;
    margin-left: 0.5rem;
  }

  header {
    padding: 0.75rem;
  }

  header::after, header::before {
    display: none;
  }

  .appointment-row {
    padding-right: 0;
  }

  .footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .non-hamburger-menu {
    display: none;
  }  

  .hamburger-menu {  
    display: block;
    padding: 0.625rem;
  }  

  h1 {
    font-size: 1.5rem;
  }

  .services-content, .new-clients-content {
    margin: 0;
    margin-top: 3.3rem;
    margin-bottom: 2rem;
  }

  .about-content {
    margin-left: 3rem;
    margin-right: 1.8rem;
  }

  .about-content p {
    padding: 0.625rem;
  }

  .right-sidebar {
    position: relative;
    width: 100%;
    margin: 1.25rem 0;
    box-shadow: none;
  }

  .about-container, .services-container, .new-clients-container {
    flex-direction: column;
  }

  .services, .new-clients, .contact {
    margin-top: 9rem;
  }

  .about-us {
    margin-top: 10rem;
  }

  .about-image-container {
    text-align: center;
    margin-bottom: 1rem;
  }

  .about-image {
    max-width: 100%;
  }

  .right-sidebar {
    margin-top: 1.25rem;
  }

  .right-sidebar ul li {
    list-style-position: inside;
    border: 1px solid #c6c2af;
  }

  .right-sidebar ul li a {
    text-decoration: none;
    color: white; /* White text for better contrast */
    font-size: 1rem;
    font-weight: bold;
    display: block;
    padding: 0.938rem; /* Increase padding for square buttons */
    background-color: #4e7f85; /* Darker blue for each button */
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: center; /* Center text inside the button */
    align-content: center;
    height: 10rem;
    width: 100%;
  }  

  .hours-info ul li {
    font-size: 0.73rem;
  }

  .hours-info h3 {
    font-size: 0.9rem;
  }

  .footer {
    height: 0.5rem;            /* Footer height */
  }

  .home-footer-container {
    gap: 0;
  }

  .footer-left {
    width: 75%;
  }

  .footer-right {
    text-align: center;
    width: 70%;
  }

  .footer-right a {
    margin: 0;
  }

  .footer-nav {
    width: 100%;
    margin: 0;
    display: inline-block;
    flex-wrap: nowrap;
  }

  .footer-nav a {
    display: inline;
    border-bottom: none;
  }   

  .content-container {
    min-height: calc(80vh - 80rem);    
  }

  .menu-toggle {
    background-size: 1.875rem 0.375rem;
    width: 1.875rem;
    height: 1.25rem;
    position: absolute;
    right: 1.5rem;
    bottom: 2.1rem;
    cursor: pointer;    
  }

  .menu-toggle:before,
  .menu-toggle:after,
  .menu-toggle div {
    background: #c6c2af;
    content: "";
    display: block;
    height: 0.344rem;
    border-radius: 3px;
    margin: 0.275rem 0;
    transition: 0.5s;
  }
  .menu-toggle.active:before {
    transform: translateY(12px) rotate(135deg);
  }
  .menu-toggle.active:after {
    transform: translateY(-12px) rotate(-135deg);
  }
  .menu-toggle.active div {
    transform: scale(0);
  }

  .hamburger-nav-list {
    position: absolute;
    top: 8rem;
    right: 0.01rem;
    width: 5rem;
    flex-direction: column;
    display: none;
    justify-content: flex-start;    
    min-width: 8rem !important;
  }

  .nav-shrink {
    top: 2.6rem;
  }

  .hamburger-nav-list li {
    display: block;    
    padding: 0.6rem 0;
  }

  .hamburger-nav-list.active {
    display: flex;
  }  

  .hamburger-nav-list li a {
    color: #f1f1f1;
    text-decoration: none;
    padding: 0.625rem;
    display: block;
    text-align: center;
  }
  
  .hamburger-nav-list li a:hover {
    background-color: #555;
  }

  .intro-text {
    margin: 1.875rem 3rem; /* Space between text and buttons */
    text-align: left;
  }

  .contact-container {
    margin-left: 7.5%;
    min-height: 0rem;
  }

  .contact-content-phone-email {
    margin-bottom: 3rem;
    flex-direction: column;
  }  

  .contact-content-email {
    margin-top: 3rem;
    width: 95%;
  }

  .phone-number {
    font-size: 1rem;
  }

  .phone-number-contact {
    font-size: 1.4rem;
    width: 100%;
  } 

  .base-title {
    font-size: 2.4rem;
  }

  .base {
    margin-top: 7.5rem;
  }

  .base-content {
    margin-right: 0;
  }

  .base-image {
    width: 100%;
  }

  .form-input,
  .form-textarea {
    width: 100%;
  }

  .services-grid, .schedule-grid, .equine-services-grid, .bovine-services-grid {
    display: flex;
    flex-direction: column;
  }

  .content-container-sidebar {
    width: 100%;
    margin: auto;
  }

  .non-footer-container {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    margin-top: 2rem;
    border-radius: 0;
    border-left: none;
    border-bottom: 1px solid #c6c2af;
  }

  .sidebar ul {
    width: 100%;
  }

  .sidebar ul li {
    padding: 2.5rem 0;
  }

  .base-image img {
    border: 1px solid #c6c2af;
    width: 100%;
  }

  .our-practice-image img {
    width: 100%;
  }

  .header-email {
    display: none;
  }

  .appointment-row a {
    font-size: 1.1rem;
  }

  .schedule-base {
    margin-left: 0;
    margin-right: 0;
  }

  .schedule-content-container-sidebar {
    padding: 0;
  }

  .schedule-title {
    margin-left: 6.5%;
    margin-right: 6.5%;
    margin-top: 1rem;   
    margin-bottom: 2rem; 
  }

  .schedule-grid {
    padding: 0;
  }

  .schedule-item {
    padding: 0;
  }
  
  .bovine-services-title, .equine-services-title {
    margin-top: 1rem;
  }

  .call-schedule-button-container {
    margin-bottom: 0.1rem;
  }

  .call-schedule-button {
    width: 100vw !important;
    border-radius: 0 !important;
    box-shadow: none;
  }
}