:root {
	--s-grey: #f2d9de;
	--s-green: #def2d9;
	--s-purple: #e2daf2;
	--s-orange: #fce2d4;
	--s-blue: #d9ebf2;
	--s-red: #f2d9de;
	--p-yellow: #FDFD95;
	--p-blue: #CDEAF6;
	--d-grey: #969696;

	--bs-navbar-padding-y: 0rem;
}

.animated.fast {
	font-family: inherit;
}

body, html {
	margin: 0;
	padding: 0;
	height: 100vh;
	/* background-color: var(--s-purple); */
	/* font-family: sans-serif; */
	/* color: #333; */
	/* min-width: 360px; */
	/* min-height: 100vh; */
	/* scroll-padding-top: 60px; */
	/* overflow:hidden; */
}

/* #################################################################### */
/* ##########################  Parallax Setup ######################### */
/* #################################################################### */
.parallax-section {
	height: 100vh;
	/* Full viewport height */
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	align-items: center;
	text-align: center;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	/* padding: 0px; !important 
	margin: 0px; !important */
}

/* .my-icon {
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
} */

@keyframes pulse {
	0% {
		transform: scale(1);
		/* Start at normal size */
	}

	50% {
		transform: scale(1.1);
		/* Scale up to 110% */
	}

	100% {
		transform: scale(0.9);
		/* Return to normal size */
	}
}

.fa-icon:hover {
	color: rgb(43, 248, 111);
	/* animation: zoomInOut 10s infinite alternate ease-in-out; */
}

#pawsend {
	color: rgb(253, 226, 105);
}

.fa-icon {
	color: rgb(110, 58, 9);

	transform: translateX(-50%);
	--fa-beat-scale: 1.1;
	--fa-animation-duration: 4s;
}

.page-1-header {
	color: rgb(248, 248, 248);
	padding: 20px;
}

#page1 {
	h1 {
		text-transform: uppercase;
		font-size: 38px;
	}

	h2 {
		text-transform: uppercase;
		font-size: 28px;
	}
}

.successH1 {
	font-size: 6rem;
	padding: 20px;
}

.successH2 {
	font-size: 3rem;
	padding: 20px;
}

.freeResources {
	text-transform: uppercase;
	font-size: 38px;

	h1 {
		text-transform: uppercase;
		font-size: 38px;
	}

	h2 {
		text-transform: uppercase;
		font-size: 28px;
		font-weight: 300;
	}
}

.page1-subhead1 {
	font-size: 26px;
	padding-left: 20px;
	padding-right: 20px;
	line-height: 0.99em;
	font-weight: 400;
}

.page1-subhead2 {
	font-size: 20px;
	padding-left: 20px;
	padding-right: 20px;
	font-weight: 400;
}

.page1-subhead3 {
	font-size: 18px;
	padding-left: 15%;
	padding-right: 15%;
}

.page1-subhead4 {
	font-size: 18px;
	padding-left: 15%;
	padding-right: 15%;
	font-weight: 500;
}

.text-content {
	position: relative;
	/* To keep text above the image */
	z-index: 2;
	/* Ensure text is on top */
	/* color: white; */
	/* Or another contrasting color */
}

.formbuttons {
	margin-left: 5px;

	#sendusamessage {
		background-color: white;

		:hover {
			box-shadow: none;
		}
	}

	#bookameeting {
		background-color: white;

		:hover {
			box-shadow: none;
		}
	}
}

/* ################################################################## */
/* ###################   Images to be used in Parallax    ########### */
/* ################################################################## */

.parallax-bg-dogs1 {
	background-image: url('../img/dogs1.jpeg');
	background-attachment: fixed;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% cover;
	object-fit: cover;
}

.parallax-dogs2 {
	background-image: url('../img/dogwithlead.jpeg');
	background-attachment: fixed;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% cover;
}

.parallax-dogs3 {
	background-image: url('../img/manwithdog-illustrated.jpeg');
	background-attachment: fixed;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% cover;
}

.parallax-dogs4 {
	background-image: url('../img/woman-and-dog-line.png');
	background-attachment: fixed;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% cover;
}

.parallax-dogs5 {
	background-image: url('../img/d4.png');
	background-attachment: fixed;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% cover;
}

.parallax-dogs6 {
	background-image: url('../img/d1.png');
	background-attachment: fixed;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% cover;
}

.parallax-bg-Z {
	background-color: darkgrey;
}

.parallax-bg-git {
	background-image: url('../img/happy.jpeg');
	background-attachment: fixed;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% cover;
}

.parallax-bg-sad {
	background-image: url('../img/sad.jpeg');
	background-attachment: fixed;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% cover;
}

/* ################################################################## */
/* ################### Normal section coding and changes  ########### */
/* ################################################################## */

.dog-service-intro {
	p {
		padding-left: 10%;
		padding-right: 10%;
	}
}
.normal-section {
	/* padding: 20px 0px; */
	background-color: var(--s-green);
	text-align: center;
	/* justify-content: center; */
	/* align-items: center; */
}

.services-section {
	/* padding: 20px 0px; */
	background-color: var(--s-blue);
	text-align: center;
}

.normal-section2 {
	padding: 30px 20px;
	background-color: var(--s-red);
	text-align: center;
}

.normal-section3 {
	/* display: grid; */
	/* flex-flow: column wrap; */
	padding: 50px 0px 0px 0px;
	/* background-color: var(--s-orange); */
	text-align: center;
	margin: 0px;
	height: 100vh;
	justify-content: center;
	/* justify-content: center;
	align-items: center; */
	/* padding-bottom: 20px */
}

.whyus-section {
	/* display: grid; */
	/* flex-flow: column wrap; */
	/* padding: 50px 0px 0px 0px; */
	/* background-color: var(--s-orange); */
	display: flex;
	flex-flow: column wrap;
	text-align: center;
	margin: 0px;
	height: 100vh;
	justify-content: center;
	/* justify-content: center;
	align-items: center; */
	/* padding-bottom: 20px */
}

.whoweare {
	padding: 10%;
}

.contact-section {
	/* We need the padding below so the body is clear of the navbar */
	/* Applies 20px padding to top, right, bottom, and left */
	padding: 80px 0px 0px 0px;
	/* background-color: var(--s-green); */
	/* text-align: center; */

	h1 {
		font-weight: 700;
		text-align: left;
		padding-left: 20px;
	}

	#problemrow {
		--bs-gutter-x: 0rem;
	}

	.contact-body {
		text-align: left;
		font-weight: 300;
		padding-left: 25px;
		padding-top: 20px;
	}

	.contact-body2 {
		text-align: left;
		font-weight: 300;
		padding-left: 25px;
		/* padding-top: 20px; */
	}

	.contact-text {
		width: 75%;
		max-width: 1000px;
		justify-content: flex-start;
	}

	.btn-contactus {
		align-items: left;
		/* justify-content: flex-start; */
		/* align-self:self-start ; */
		/* display: block; */
		/* margin-left:22px; */
		/* margin-top: 20px; */
		font-size: 0.7em;
	}

	.contactusbuttons {
		padding-left: 20px;

		.card {
			border-color: none;
			box-shadow: none;
			align-items: left;
		}
	}
}

/* ################################################################## */
/* ######################    FOOTER stuff    ######################## */
/* ################################################################## */

.footer-block {
	display: flex;
	/* Makes the container a flex container */
	flex-direction: row;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 20px;
	;
	/* Arranges flex items horizontally (default) */
	/* Optional: Add other flex properties like justify-content, align-items, etc. */
}

.footer-section {
	padding: 50px 0px;
	background-color: var(--p-blue);
	text-align: center;
	min-height: 200px;
	font-size: 6em;
}

.footer-row {
	margin-left: 0px;
	margin-right: 0px;
	--bs-gutter-x: 0rem;
}

#myFooterRow {
	margin-left: 0px;
	margin-right: 0px;
	--bs-gutter-x: 0rem;
}

#footer-stravaig-name {
	text-shadow: 2px 2px 4px rgb(134, 134, 134);
	text-transform: uppercase;
	font-weight: 800;
}

.footer-company-text {
	font-size: 0.8em;
	text-shadow: #333;
}

.footer-services-info p {
	font-size: 0.7em;
	margin-bottom: 0.5em;
}

.footer-contact-info p {
	/* font-size: 14px; */
	font-size: 0.7em;
	margin-bottom: 0.9em;
}

.footer-company-text-sm {
	font-size: 0.7em;
	text-shadow: #333;
}

.no-italics {
	font-style: normal;
}

.footer-container, .bg-body-tertiary {
	/* max-width: 1000px; */
	align-items: center;
	text-align: center;
	/* max-width: 1050px ; */
}


.footer-copyright {
	font-size: 0.6em;
	color: var(--d-grey);
	text-transform: uppercase;
	/* border-radius: 10px; */
}

.footer-card {
	text-align: left;
}

.footer-card-text {
	font-size: 1em;
	padding-bottom: 0px;
	padding-top: 0px;
}

.footer-card-text2 {
	font-size: 1.1em;
}

.footer-card-text.p {
	padding: 0px;
}

.card-body .p .footer-card-text {
	margin-bottom: 0px;
}

.card h6 {
	font-size: 1.2em;
	color: darkslateblue;
}

/* #############################################################  */
/* ###################### END OF Footer     ####################  */
/* #############################################################  */


/* ################################################################## */
/* ###################### Content Block stuff ####################### */
/* ################################################################## */

#element {
	/* Top-left, Top-right, Bottom-right, Bottom-left */
	border-radius: 10px 20px 30px 40px;
}

.content {
	background-color: rgba(223, 223, 223, 0.6);
	/* Semi-transparent background for readability */
	padding: 10px 0px 0px 0px;
	border-radius: 20px;
	max-width: 1000px;
	min-width: 350px;
	/* min-height: 500px; */
	margin: 0 auto;
	/* width: 1200px; */
}

.services-content {
	background-color: rgba(255, 255, 255, 0.8);
	/* Semi-transparent background for readability */
	padding: 5px 10px 10px 10px;
	border-radius: 12px;
	max-width: 90%;
	min-width: 350px;
	margin: 0 auto;
	justify-content: center;
	align-items: center;

	h2 {
		text-transform: uppercase;
	}

	/* Top / right / Bottom / left */
	.services-intro {
		font-size: .8em;
		padding: 0px 50px 0px 50px;
	}
}


.content-contact {
	/* background-color: rgba(211, 211, 211, 0.8); */
	/* Semi-transparent background for readability */
	/* padding: 20px 0px 0px 0px; */
	/* border-radius: 12px; */
	/* max-width: 1800px; */
	/* min-width: 350px; */
	margin: 0 0;
	/* width: 1200px; */
	padding-bottom: 10px;
	padding-top: 10px;
	/* padding-left: 20px; */
	/* background-color: grey; */
	/* color: var(--s-blue) */
	/* margin-top: 10px;  */
}

.content2 {
	/* background-color: rgba(255, 255, 255, 0.8); */
	/* Semi-transparent background for readability */
	padding: 20px 0px;
	/* border-radius: 12px 20px 20px 20px; */
	max-width: 1000px;
	/* min-width: 450px; */
	margin: 0 auto;
	/* width: 1200px; */
}

.content3 {
	background-color: rgba(var(--p-yellow), 0.8);
	/* Semi-transparent background for readability */
	padding: 20px;
	border-radius: 12px;
	max-width: 1000px;
	/* min-width: 350px; */
	margin: 0 auto;
	/* width: 1200px; */
}

.content4 {
	background-color: rgba(227, 206, 185, 0.8);
	/* Semi-transparent background for readability */
	padding: 20px;
	border-radius: 12px;
	max-width: 1000px;
	/* min-width: 350px; */
	margin: 0 auto;
	/* width: 1200px; */
}

/* ################################################################## */
/* ###################### Navbar stuff       ######################## */
/* ################################################################## */

/* Style the navigation bar */
.navbar {
	/* position: fixed; */
	top: 0;
	width: 100%;
	transition: top 0.3s;
	min-width: 354px;
	z-index: 9999;
	background-color: rgba(224, 182, 91, 0.99);
	text-decoration: none;
	--bs-navbar-padding-y: 0px;
	padding-top: 0px;
	margin-top: -20px;

}

.navbar-container {
	padding-top: 20px;
}

/* .navbar-inner {
	background: transparent;
} */

/* Navbar links */
.navbar a {
	/* float: left; */
	/* text-align: center; */
	/* padding: 10px; */
	/* color: rgb(239, 255, 233); */
	/* text-decoration: none; */
	/* Font size for the navbar link text */
	font-size: 18px;
}

.logoimg img {
	max-width: 60%;
	padding: 0px;
	margin-bottom: 0px;
	;
}

/* Navbar links on mouse-over */
.navbar a:hover {
	/* background-color: #888888; */
	text-decoration: underline;
	text-underline-offset: 7px;
	text-decoration-color: brown;
	text-decoration-thickness: 3px;
}



/* .navbar-nav .nav-item.active .nav-link {
	text-decoration: underline;
} */

/* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */

/* .navbar li a:hover {
	-webkit-box-shadow: 0 2px 10px -12px #999;
	-moz-box-shadow: 0 8px 6px -6px #999;
	box-shadow: 0 8px 6px -6px #999;
} */


.column {
	flex: 1;
	/* Allows columns to grow and shrink proportionally */
	padding: 10px;
	/* Adds some spacing within the columns */
	box-sizing: border-box;
	/* Ensures padding is included in the element's total width */
}

/* Optional: Add specific styles for each column */
.left-column {
	background-color: #f0f0f0;
}

.right-column {
	background-color: #d0d0d0;
	align-content: right;
	text-align: right;
}

/* ########################################################################## */
/* ####################  Migration of Card Settings ######################### */
/* ########################################################################## */

.card-container {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	/* For demonstration, centers the card vertically */
	background-color: #504d4d;
}

.card {
	/* width: 300px;
  	padding: 20px; */
	background-color: #f7f7f7;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	/* Smooth transition for changes */
	/* text-align: center;
	flex-direction: column;
	margin-top: auto; */
}

.card:hover {
	background-color: #e0e0e0;
	/* Change background on hover */
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	/* Enhance shadow on hover */
	transform: translateY(-5px);
	/* Lift the card slightly */
}

.card h3 {
	color: #333;
	margin-bottom: 10px;
	font-size: 1.5em;

}

.services-cards {
	display: flex;
	align-items: stretch;
}

.card h5 {
	color: #333;
	margin-bottom: px;
	font-size: 1.2em;
	text-transform: uppercase;
}

.card p {
	color: #666;
	font-size: 0.8em;
}

.card-img-top {
	width: 100%;
	height: 10vw;
	max-height: 120px;
	object-fit: cover;
}

.card-img-top2 {
	width: 100%;
	height: 12vw;
	max-height: 200px;
	object-fit: cover;
	border-radius: 7px 7px 0px 0px;
	border: solid #868686 1px;
	/* vertical-align: middle; */
	/* Top-left, Top-right, Bottom-right, Bottom-left */
}

.myblockquote {

	/* margin-left: 20px; */
	p {
		font-weight: 400;
		font-size: .8em;
		/* width: 50%; */
		text-shadow: #333;
		font-style: italic;
		color: darkblue;
		text-align: left;
		padding-left: 10px;
	}

	/* margin-inline-start: 5%; */
}

.bookimg {
	max-width: 300px;
	/* align-content: flex-end; */
}

.wovenimg {
	text-align: center;
	margin-top: 20px;

}

.card-li {
	font-size: 0.7em;
	text-align: left;
	margin-left: 20px;
	color: rgb(100, 100, 100)
}

.card-list {
	text-align: left;
	margin-left: 40px;
}

/* ################################################################## */
/* ###################### Grid Container for Services ############### */
/* ################################################################## */

.grid-container1 {
	display: grid;
	grid-template-columns: 1fr 2fr;
	/* Creates two different-width columns */
	/* gap: 1px; */
	/* Space between columns */
	padding: 20px 0px;
	/* box-sizing: border-box; */
	max-width: 1000px;
	border-radius: 12px 20px 20px 20px;

	/* Include padding in element's total width and height */
	h2, p {
		text-align: left;
	}
}

.column #Systems {
	border-radius: 12px 20px 20px 20px;
}

.grid-container2 {
	display: grid;
	grid-template-columns: 2fr 1fr;
	/* Creates two different-width columns */
	/* gap: 1px; */
	/* Space between columns */
	padding: 20px 0px;
	box-sizing: border-box;
	max-width: 1000px;
	border-radius: 10px;

	/* Include padding in element's total width and height */
	h2, p {
		text-align: right;
	}
}

.grid-container1, .grid-container2 {
	h2 {
		font: Montserrat, sans-serif;
		text-transform: uppercase;
		font-size: 1.5em;
	}

	/* align-items: center; */
	p {
		font: atpos, sans-serif;
		font-size: 0.8em;
	}

	/* border-radius: 10px 10px 10px 10px; */
}

.grid-image {
	img {
		width: 100%;
		height: auto;
		border-radius: 10px;
		/* display: flex; */
	}

	vertical-align: middle;
	/* align-items: center; */
	align-items: center;
	/* margin:auto; */
	display: flex;
	/* justify-content: center; */

}

.column {
	background-color: #f0f0f0;
	padding: 15px;
	border: 0px solid #ccc;

}


.WhyUs-Header {
	min-width: 900px;
}

/* This is to compensate for the navbar, and scrolls down the page to IDs  */
#Specialists, #Results, #Vetted, #Care {
	scroll-margin-top: 70px;
	/* Adjust this value to your fixed header's height or desired offset */
}


#myBtn {
	display: none;
	/* Hidden by default */
	position: fixed;
	/* Fixed/sticky position */
	bottom: 50px;
	/* Place the button at the bottom of the page */
	right: 10px;
	/* Place the button 30px from the right */
	z-index: 99;
	/* Make sure it does not overlap */
	border: none;
	/* Remove borders */
	outline: none;
	/* Remove outline */
	background-color: rgb(117, 117, 117, 0.5);
	/* Set a background color */
	color: white;
	/* Text color */
	cursor: pointer;
	/* Add a mouse pointer on hover */
	padding: 10px;
	/* Some padding */
	border-radius: 8px;
	/* Rounded corners */
	/* font-size: 14px; */
	/* Increase font size */
}

#myBtn:hover {
	background-color: #555;
	/* Add a dark-grey background on hover */
}

#contactBtn {
	display: none;
	/* Hidden by default */
	position: fixed;
	/* Fixed/sticky position */
	bottom: 50%;
	/* Place the button at the bottom of the page */
	right: 10px;
	/* Place the button 30px from the right */
	z-index: 99;
	/* Make sure it does not overlap */
	border: none;
	/* Remove borders */
	outline: none;
	/* Remove outline */
	background-color: rgb(117, 117, 117, 0.5);
	/* Set a background color */
	color: white;
	/* Text color */
	cursor: pointer;
	/* Add a mouse pointer on hover */
	padding: 8px;
	/* Some padding */
	border-radius: 6px;
	/* Rounded corners */
	/* font-size: 18px; */
	/* Increase font size */
}

#contactBtn:hover {
	background-color: #555;
	/* Add a dark-grey background on hover */
}

/* Hidden form until enabled */
.hidden-form {
	display: hidden;
	padding-left: 20px;
	padding-top: 0px;
	/* align-items: flex-start; */
	justify-content: flex-start
}

/* Content specific to the online form */


/* body {
	margin: 2em;
} */

/* aside {
	background: #1f8dd6;
	padding: 0.3em 1em;
	border-radius: 3px;
	color: #fff;
	margin-bottom: 2em;
} */

textarea {
	width: 80%;
}

.content-head {
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 2em 0 1em;
}

.is-center {
	text-align: center;
}

.button-success {
	color: white;
	border-radius: 4px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
	background: rgb(28, 184, 65);
}

.button-xlarge {
	font-size: 125%;
}

/* button {
	float: right;
} */

/* #name, #email {
	width: 50%;
} */

.honeypot-field {
	display: none;
}



/* .slideContainer {
	height: 100px;
} */

.mySection {
	/* height: 100px; */
	align-content: flex-start;
	background-color: white;
	/* max-width: 400px; */
	/* align-items: top; */
}

.preSlides {
	p {
		padding: 0px;
	}
}

#nextSlide, #prevSlide {
	color: red;
}

/* Stuff relating to resources and sizing the cards so they are smaller */
.resource-card {
	h5 {
		text-transform: uppercase;
		font-size: 0.7em;
	}

	p {
		font-size: 0.6em;
	}
}

.leading-icon {
	color: rgb(92, 75, 1);
}
.resource-card-footer {

	/* small {
			font-size: 0.6em;;
		} */
	.text-muted {
		font-size: 0.6em;
		/* line-height: 12px; */
		/* padding-bottom: 0; */
	}

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

.thankyou_message {
	h2 {
		padding-top: 10px;
		font-size: 22px;
		font-weight: 600;
	}

	color: green;
}