@charset "utf-8";
@font-face {
	font-family: 'Arvo';
	src: url('fonts/Arvo-Regular.eot');
	src: url('fonts/Arvo-Regular.woff') format('woff'), url('fonts/Arvo-Regular.ttf') format('truetype'), url('fonts/Arvo-Regular.svg') format('svg');
}
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		6;
	dw-num-cols-tablet:		6;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */

body { background-color: #091e49; }

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	background-color: #FFFFFF;
}

.center { display: block; text-align: center; }
.indent { max-width: 98%; padding: 2%; }
.smaller { font-size: 90%; }
.sidemargins { margin-left: 20px; margin-right: 20px; }
.leftimg { float: left; margin-right: 20px; }
.rightimg { float: right; margin-left: 20px; }
.clear { clear: both; }

.call { display: block; }
.nocall { display: none; }

h1, h2, h3 { font-family: Arvo, Times, serif; color: #49A6C5; text-align: center; }

h1 {
	margin-top: 0;
  	font-size: 30px;
  	text-shadow: 1px 1px 1px #091e49;
}
h2 { font-size: 24px; }
h3 { font-size: 20px; }
p { font-size: 16px; text-align: justify; }

a:link, a:visited { color: #49A6C5; } 
a:hover { color: #49A6C5; }

ul.center { padding: 0; }
li, .space { line-height: 150%; }

dt { font-weight: bold; color: #49A6C5; }
dd { margin: 10px 0 30px; text-align: justify; }

header { background-color: #091e49; overflow: hidden; }

#LayoutLogo {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#LayoutContact1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#LayoutContact1 { color: #FFF; }
#LayoutContact1 h3 { font-size: 24px; }
#LayoutContact1 p { font-size: 20px; text-align: center; }
#LayoutContact1 .emailus, 
.contact2 p.emailus { font-size: 90%; }

#LayoutNav {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#LayoutNav { background-color: #49A6C5; padding: 6px 0; }
#LayoutNav ul { width: 270px; margin: 0 auto; padding: 0 10px; list-style-type: none; }
#LayoutNav li {
  background-color: #091e49;
  background-image: url("images/heart-paw-cs.png");
  background-position: 6px center;
  background-repeat: no-repeat;
  background-size: 24px auto;
  border: 1px solid #fff;
  float: left;
  margin: 6px;
  padding: 10px;
  width: 100px;
}
#LayoutNav li a:link,
#LayoutNav li a:visited { 
	color: #fff; 
	font-size: 16px;
	padding: 5px 10px 5px 34px;  
	text-decoration: none; 
}
#LayoutNav li a:hover { color: #e3e3e3; }
/* Specific style for "Book Now" tab */
#page_booknow {
    width: 160px; 
  }

/* Optional hover effect for "Book Now" tab */
#page_booknow:hover {
   
  color: #ffd700; /* Gold text on hover */
}


#LayoutMainContent {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#LayoutSlider { 
	clear: both;  
	float: left;  
	margin-left: 0;  
	width: 100%;  
	display: block;
}
#LayoutSlider { margin-left: 5%; } /* center on phone */
#LayoutSlider object { display: block; margin: 0 auto; } /* center everywhere else */
#LayoutSlider h3 { margin-left: -5%; }

#LayoutServices1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#LayoutServices2 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#LayoutServices3 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#LayoutServcies1,
#LayoutServices2,
#LayoutServices3 { padding: 0 14px; }

#LayoutCertified {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#LayoutCertified { margin-top: 20px; }
.certs3, .certs4 { clear: both; width: 100%; float: none; margin: 0 auto; }
.certs3 img, .certs4 img { margin-bottom: 16px; }

#LayoutServiceArea {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.svcslist { list-style-type: none; }
.svcslist li a {
  border: 2px solid #49a6c5;
  border-radius: 10px;
  float: left;
  margin: 4px;
  padding: 4px 6px;
  text-decoration: none;
}
.svcsdetails { text-align: center; margin: -10px 0 10px; }
.svcsdetails a { 
	font-size: 90%;
	font-weight: bold;
	padding: 4px 8px; 
	border: 2px solid #49A6C5; 
	text-decoration: none; 
	border-radius: 10px;
}

#LayoutSidebar { 
	clear: both;  
	float: left;  
	margin-left: 0;  
	width: 100%;  
	display: block; 
}
#LayoutSidebar h2 { margin-top: 0; text-align: center; }

.contact2 p { font-size: 120%; font-weight: bold; text-align: center; }
.contact2 img { display: block; margin: 0 auto; }

#LayoutMainFull { 
	clear: both;  
	float: left;  
	margin-left: 0;  
	width: 100%;  
	display: block; 
}

.petsvcs { margin-top: 30px; }
.petsvcs h2 { clear: both; }
.petsvcs img { float: left; margin-right: 20px; max-width: 160px; padding-bottom: 20px; }

footer {
	background-color: #49A6C5;
	clear: both;
	font-size: 95%;
	overflow: auto;
	margin-top: 30px;
}

#LayoutCopyright {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#LayoutHosting {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#LayoutCopyright p,
#LayoutHosting p { font-size: 90%; text-align: center; }

#LayoutHosting a { color: #fff; }
#LayoutHosting a:hover { color: #e3e3e3; }

#TopBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 0;
  z-index: 99;
  border: none;
  outline: none;
  background-color: #49A6C5;
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 10px;
}


/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
	
body { background: url("images/paw-bk.jpg"); }

.gridContainer {
	width: 92.8%;
	padding-left: 0;
	padding-right: 0;
	body, .gridContainer {
  margin: 0;
  padding: 0;
}

.nocall { display: block; }
.call { display: none; }

#LayoutLogo {
	clear: both;
	float: left;
	margin-left: 0;
	width: 65.5172%;
	display: block;
}
#LayoutContact1 {
	clear: none;
	float: left;
	margin-left: 3.4482%;
	width: 31.0344%;
	display: block;
}
#LayoutContact1 { padding-top: 20px; }

#LayoutNav {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#LayoutNav { padding: 5; }
#LayoutNav ul { width: 100%; margin: 0 0; }
#LayoutNav li {
  background-position: 10px center;
  background-size: 28px auto;
  padding: 8px 10px 8px 12px;
}

#LayoutMainContent {
  clear: both;
  float: none; /* Remove float */
  margin: 0 auto; /* Center content if needed */
  width: 100%; /* Full width */
  display: block;
}
#LayoutMainContent h1,
#LayoutMainFull h1, 
#LayoutMainContent h2, 
#LayoutMainContent h3 { text-align: left; }

#LayoutSlider { 
	clear: none;  
	float: left;  
	margin-left: 3.4482%;  
	width: 48.2758%;  
	display: block; 
}
#LayoutServices1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 31.0344%;
	display: block;
}
#LayoutServices2 {
	clear: none;
	float: left;
	margin-left: 3.4482%;
	width: 31.0344%;
	display: block;
}
#LayoutServices3 {
	clear: none;
	float: left;
	margin-left: 3.4482%;
	width: 31.0344%;
	display: block;
}
#LayoutCertified {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.certs3 { clear: none; width: 31%; float: left; margin: 0 1%; }
.certs4 { clear: none; width: 22%; float: left; margin: 0 1%; }

#LayoutServiceArea { 
	clear: both;  
	float: left;  
	margin-left: 0;  
	width: 100%;  
	display: block; 
}

#LayoutMainFull { 
	clear: both;  
	float: left;  
	margin-left: 0;  
	width: 100%;  
	display: block; 
}

#LayoutSidebar { 
	clear: none;  
	float: left;  
	margin-left: 3.4482%;  
	width: 48.2758%;  
	display: block; 
}

.petsvcs h2,
.petsvcs h3 { text-align: left; }

#LayoutCopyright {
	clear: both;
	float: left;
	margin-left: 0;
	width: 48.2758%;
	display: block;
}
#LayoutHosting {
	clear: none;
	float: left;
	margin-left: 3.4482%;
	width: 48.2758%;
	display: block;
}
#LayoutHosting p, #LayoutCopyright p { text-align: center; }

#TopBtn { right: 44px; }

}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
.gridContainer {
	width: 88.5%;
	max-width: 1232px;
	padding-left: 0;
	padding-right: 0;
	margin: auto;
}
#LayoutLogo {
	clear: both;
	float: left;
	margin-left: 0;
	width: 66.1016%;
	display: block;
}
#LayoutContact1 {
	clear: none;
	float: left;
	margin-left: 1.6949%;
	width: 32.2033%;
	display: block;
}
#LayoutNav {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#LayoutNav { padding: 6px 0; }
#LayoutNav li { margin: 0 8px 0; }

#LayoutMainContent {
	clear: both;
	float: left;
	margin-left: 0;
	width: 66.1016%;
	display: block;
}
#LayoutMainContent .intro { font-size: 18px; line-height: 140%; }

#LayoutSlider {
	clear: none;
	float: left;
	margin-left: 1.6949%;
	width: 32.2033%;
	display: block;
}
#LayoutSlider div { max-width: 100%; margin-right: 1%; } /* portrait tablet */

#LayoutServices1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 32.2033%;
	display: block;
}
#LayoutServices2 {
	clear: none;
	float: left;
	margin-left: 1.6949%;
	width: 32.2033%;
	display: block;
}
#LayoutServices3 {
	clear: none;
	float: left;
	margin-left: 1.6949%;
	width: 32.2033%;
	display: block;
}
#LayoutCertified {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#LayoutServiceArea {
	clear: both;
	float: left;
	margin-left: 0;
	width: 57.6271%;
	display: block;
}
#LayoutSidebar {
	clear: none;
	float: left;
	margin-left: 1.6949%;
	width: 32.2033%;
	display: block;
}
#LayoutMainFull {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#LayoutCopyright {
	clear: both;
	float: left;
	margin-left: 0;
	width: 49.1525%;
	display: block;
}
#LayoutHosting {
	clear: none;
	float: left;
	margin-left: 1.6949%;
	width: 49.1525%;
	display: block;
}

}
/* --- Jake override patch --- */
header {
  background-color: #091E49 !important;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

#LayoutLogo,
#LayoutContact1 {
  background-color: transparent !important;
  margin: 0 !important;
  padding: 10px 0;
  width: 100% !important;
}
/* --- FORCE HORIZONTAL HEADER FIX --- */
header {
  display: flex !important;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  background-color: #091E49 !important;
  padding: 20px;
}

#LayoutLogo,
#LayoutContact1 {
  float: none !important;
  clear: none !important;
  width: auto !important;
  display: block;
  margin: 0;
}

#LayoutLogo {
  flex: 1;
}

#LayoutContact1 {
  flex: 1;
  text-align: right;
  color: #fff;
}

@media screen and (max-width: 768px) {
  header {
    flex-direction: column !important;
    text-align: center;
  }

  #LayoutLogo,
  #LayoutContact1 {
    width: 100% !important;
    text-align: center;
  }
}
/* Existing styles */

/* Add Facebook icon styling below */
#social-icons {
  display: flex; /* Enables flexbox for centering */
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
  margin-top: 10px; /* Adjust spacing from other elements */
}

#social-icons a {
  color: #ffffff; /* White icon color */
  font-size: 36px; /* Increase icon size */
  text-decoration: none; /* Remove underline */
}

#social-icons a:hover {
  color: #49A6C5; /* Light blue on hover */
}