html {
/*background-color:#000000;*/
background: url(../images/woodbackground2.jpg) no-repeat top center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
  padding: 0px;
  margin: 0;
font-size: 16px;   
}

img, object, embed, video {
	max-width: 100%;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

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

.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;        
}

#headercontainer{
	display:block;
	margin:auto;
	background-color:#fff;	
}

.logocontainer{
	display:block;
	text-align:center;
	padding:20px 40px;
	padding-bottom:0px;
}

.contactcontainer{
	display:block;
	text-align:center;
	padding:20px;
	font-family:'Poppins', serif;
	font-weight:800;
	font-size:28px;
}

#vaccines {
	font-size:9pt;
}

@media screen and (min-width: 700px) {
.logocontainer{
width:50%;
float:left;
}

.contactcontainer{
width:50%;
float:left;
padding-top:60px;
}

#vaccines {
	font-size:10pt;
	padding:10px
}
}

@media screen and (min-width: 1200px) {
#vaccines td {
	font-size:12pt;
	padding:10px
}
}

#headerSlides{
	width:100%;
	/*max-width:1200px;*/
	background-color:#fff;
}

#headerSlides img{
	width:100%;
}

.staffname {
  font-weight: 700;
  color: #800000;
  /*font-style: italic;*/
}

.fbborder{
	margin:auto;
	width:95%;
      border: 5px solid #500000;
      outline: 5px solid #000000; /* Acts as a visual separation */
      outline-offset: 5px; /* Pulls the outline inwards */
}

/* The Magic Float Center Code For Menu */
.float_center {
  float: right!important;
  position: relative!important;
  left: -50%!important; /* or right 50% */
  text-align: left!important;
}

.float_center > .child {
  position: relative!important;
  left: 50%!important;
}

.table {
	display: table;   /* Allow the centering to work */
	margin: 0 auto;
}


.button-container input {
display: inline;
vertical-align: middle;
margin: 0px 5px 10px 0px;
}

.button-container form, .button-container form div {
display: inline;
}

.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
max-width:800px;
margin-left:auto;
margin-right:auto;
}

.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.img {
border: 1px solid #ccc;
padding: 5px;
margin-bottom: 20px;
background: #f2f2f2;
-webkit-box-shadow: 0 28px 16px -26px rgba(0, 0, 0);
-moz-box-shadow: 0 28px 16px -26px rgba(0, 0, 0);
box-shadow: 0 28px 16px -26px rgba(0, 0, 0);
 }
 
.colBackground {
background-color:rgba(0,0,0,0.05);
padding:20px 10px!important;
}

.colBackground ol {
margin-left:30px;
list-style-type:lower-alpha;
color:rgba(0,0,0,0.70);
padding:5px;
}

.colBackground ul {
margin-left:30px;
}

.colBackground ul li {
padding:5px;
color:rgba(0,0,0,0.80);
display: list-item;
list-style-type: square;
}

.colBackground p{
margin:10px 5px;
}

.colBackground img {
border: 1px solid #ccc;
padding: 5px;
margin: 5px;
margin-bottom: 5px;
margin-bottom: 20px;
background: #f2f2f2;
-webkit-box-shadow: 0 28px 16px -26px rgba(0, 0, 0);
-moz-box-shadow: 0 28px 16px -26px rgba(0, 0, 0);
box-shadow: 0 28px 16px -26px rgba(0, 0, 0);
}

.colBackground a:link    {color:#9a3b01; text-decoration:none; font-weight:bold;}
.colBackground a:visited {color:#9a3b01; text-decoration:none; font-weight:bold;}
.colBackground a:active  {color:#9a3b01; text-decoration:none; font-weight:bold;}
.colBackground a:hover   {color:#c17400; text-decoration:none; font-weight:bold;}


hr {
border:1px solid rgba(0,0,0,0.20);
margin:10px auto!important;
}   


/* Back to Top  */

#return-to-top {
position: fixed;
bottom: 20px;
left: 20px;
background: rgb(0, 0, 0);
background: rgba(111,9,31,1);
width: 50px;
height: 50px;
display: block;
text-decoration: none;
text-align:center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display: none;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}

#return-to-top i {
color: #fff;
margin: 0;
position: relative;
left: 0px;
top: 20px;
font-size: 30px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#return-to-top:hover {
background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
color: #fff;
top: 5px;
}

.services{ /*header of 1st demo*/
cursor: hand;
cursor: pointer;
padding: 5px;
border: 1px solid gray;
border-radius:5px;
color:#ffffff;
max-width:1200px;
margin:10px auto;
text-align:center;
background:#2F2F2F;
}

.openservices{ /*class added to contents of 1st demo when they are open*/
background: #631b26; 
}

.theService{
background: rgba(0,0,0,0.15); 
	padding:10px;
}

.theService p{
	/*color:#ffffff!important;*/
font-size: 1.2rem;	
}

.theService ul{
	/*color:#ffffff!important;*/
font-size: 1rem;	
}

#mainContent {
	max-width:1200px;
	display:block;
	margin-left:auto;
	margin-right:auto;
	-webkit-box-shadow: 0px 0px 20px 5px #000;-moz-box-shadow: 0px 0px 20px 5px #000; box-shadow: 0px 0px 20px 5px #000;
	margin-bottom:20px;

}


.content {
    clear:both;
	background:#ffffff;
}

.footercontent {
    clear:both;
	font-size:1rem;
	font-family: 'Poppins', Arial, serif;
	color:#000000;
	background:url('../images/petbackground.jpg')no-repeat top center;
    -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
    padding-top:100px;
   	line-height:1.25;
}

.footercontent p{
	font-size:1rem;
}
.reviewscontent {
    clear:both;
    text-align:center;
	background:url('../images/reviewsBackground.jpg')no-repeat bottom center;
    -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
   height:463px;
   padding:80px 20px;
}

.footer {
	font-family: Arial, serif;
	color:#ffffff;
	height:79px;
	padding-top:79px;
background: url('../images/bottom-arch.png') no-repeat bottom center;
    background-size: contain;        /* shows entire image without stretching/squishing */
    background-attachment: fixed;
    background-position: bottom center;
 }

a:link { color: #660E0D; text-decoration: none; }
a:visited { color: #660E0D; text-decoration: none; }
a:active { color: #660E0D; text-decoration: none; }
a:hover { color: #6E6F71; text-decoration: none; }

a:link.white { color: #FFFFFF; text-decoration: none; }
a:visited.white { color: #FFFFFF; text-decoration: none; }
a:active.white { color: #FFFFFF; text-decoration: none; }
a:hover.white { color: #A38657; text-decoration: none; }

a:link.menu,
a:visited.menu,
a:active.menu,
a:hover.menu { 
	color: #ffffff; 
	text-decoration: none; 
	/*text-transform:uppercase;*/ 
	font-size:1.1rem; 
	font-family: 'Poppins', Serif; 
}

a:link.sm{ color: #ffffff; text-decoration: none; }
a:visited.sm { color: #ffffff; text-decoration: none; }
a:active.sm { color: #ffffff; text-decoration: none; }
a:hover.sm { color: #E79E5C; text-decoration: none; }

a:link.footertext { color: #ffffff; text-decoration: none; }
a:visited.footertext { color: #ffffff; text-decoration: none; }
a:active.footertext { color: #ffffff; text-decoration: none; }
a:hover.footertext { color: #E79E5C; text-decoration: none; }




/*==============================================*/
/*1: GLOBAL STYLES*/
/*==============================================*/

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body {
font-size: 1.2rem;
font-family: 'Poppins', sans-serif;
}

.gridContainer {
margin-left: auto;
margin-right: auto;
width: 100%;
max-width:1200px;
padding-left: 0.0%;
padding-right: 0.0%;
clear: none;
float: none;
overflow:hidden;
}

.gridContainer {
box-sizing: border-box;
}


/*page content*/

h1, h2, h3, h4 {
font-family: "Poppins", sans-serif;
font-weight: normal;
}

p {
font-family: "Poppins", sans-serif;
font-size: 1.2rem;
font-weight: normal;
line-height: 145%;
color: #464646;
}

a {
text-decoration: none;
}

ul li a {
text-decoration: none;
}


/*==============================================*/
/*2: MOBILE STYLES*/
/*==============================================*/

@media only screen and (min-width: 275px) { 
   
.container {
width: 90%;
margin: 0 auto;
padding: 1rem;
}	 

.main-content {
margin: 0 auto;
padding-top:30px;
}

.container {
margin-bottom: 0.5rem;
}	

p {
/*if font is too big:*/
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
 	
/*=intro:*/

.intro {
margin: 0 auto;
margin-top: 0;
text-align: center;
}

.intro .container {
width: 95%;
padding: 0;
padding-bottom: 1rem;
margin: 0 auto;
}

.intro h1 {
position: relative;
display: inline-block;
font-weight: 700;
font-size: 2rem;
line-height: 115%;
padding-top: 1rem;
padding-bottom: 0.5rem;
margin: 0 auto;
color: #631b26;
}

.intro h1 span {
color: #6e6f71;
}

.intro h2 {
font-weight: 500;
font-size: 1.25rem;
color: #631b26;
line-height: 135%;
margin: 0 0 1rem 0;  
} 
 
/*horizontal bar*/
.intro h2::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 50%;              
height: 5px;
margin-top: 2.5rem;
background-color: #6e6f71;  
} 
 
.intro p {
color: black;
} 


/*=overview sections*/ 

/*section class*/
.overview {}

.overview-photo {}

.overview-photo img {
vertical-align: bottom;
width: 100%;
height: 100%;
object-fit: cover;
overflow:hidden;
}

.overview-content {
text-align: center;
padding: 1.5rem;
}

.overview h2 {
font-size: 1.75rem;
color: white;
letter-spacing: 1px;
font-weight: 700;
margin-bottom: 1rem;
}

.overview p {
margin-bottom: 1rem;
color: white;
}

.overview a {
color:#631b26;
padding: 0.75rem;
display: table;
margin: 0 auto;
font-weight: 700;
background-color: white;
border-radius: 10px;
}

.overview a:hover {
background-color: white;
color: #de0000;
}

/*colors for boxes, text, links*/

/*red box*/
.overview.red .overview-content,
.overview.red .overview-photo {
background-color: #631b26;
} 

/*silver box*/
.overview.silver .overview-content,
.overview.silver .overview-photo {
background-color: #6e6f71;
} 

/*=mission statement:*/
	
.mission {
margin: 0 auto;
margin-top: 0;
text-align: center;
}

.mission .container {
width: 90%;
padding: 0;
padding-top: 1rem;
margin: 0 auto;
}
	
.mission-content {
display: flex;
flex-direction: column;
} 
 
.mission-content .container {
display: flex;
flex-direction: column!important;
}

.mission-text {
order: 2;
padding-bottom: 2rem;
width: 85%;
margin: 0 auto;
}

.mission p {
color: black;
text-align:left;
}

.mission-header.container {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
  
.mission-header h1 {
font-size: 1.9rem;
color: #631b26;
font-weight: 700;
margin-bottom: 1rem;
padding-top:20px;
}
 
.mission-header h1 span {
color: #6e6f71;
} 
 
/*horizontal bar*/

.mission h1::after {
position: relative;
display: inline-block; 
content: '';
display: block;
width: 60px;
width: 275px;
height: 5px;
background: #6e6f71;
margin-top: 1rem;
margin-left: auto;
margin-right: auto;
}
  
.mission-text p   {
margin-top: 2rem;
text-align:left;
line-height:1.15;
}

.mission-image {
order:1;
}

.mission-image img {
width: 100%;
height:100%;
object-fit: cover;
overflow:hidden;
object-position: top left;
margin-top: 1rem;
margin-bottom: 1.25rem;
box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.5);
}

/*don't touch*/
}
/*don't touch*/

 
 
 
/*==============================================*/
/*3: =TABLET AND ADDITIONAL MOBILE STYLES*/
/*==============================================*/

/*phone landscape*/

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 1112px) 
and (orientation: landscape){ 

 
/*don't touch*/
}
/*don't touch*/



/*-------------------------------------*/
/*tablet general*/

@media only screen and (min-device-width : 768px) 
	and (max-device-width : 1024px) { 


 .intro h1 {
font-size: 2.5rem!important;
}

.intro h2 {
font-size: 1.25rem!important;
width: 90%!important;
margin: 0 auto!important;
margin-bottom: 1.5rem!important;
}

.intro h2:after {
margin-top: 3.25rem!important;
}

.intro p {
font-size: 1rem;
line-height: 170%!important;
margin-top: 1rem!important;
}

.overview-content {
padding-top: 2.5rem!important;
padding-bottom: 2.5rem!important;
}

.overview h2 {
font-size: 2.5rem!important;
}

.overview p {
font-size: 1.25rem!important;
margin-bottom: 1.5rem!important;
line-height: 160%!important;
}

.overview a {
font-size: 1.5rem!important;
padding: 1rem!important;
}

.mission-image img {
width: 80%!important;
margin-top: 2rem!important;
margin-bottom: 2rem!important;
}

.mission p {
font-size: 1rem!important;
line-height: 170%!important;
margin-top: 1rem!important;
}

 
/*don't touch*/
}
/*don't touch*/


/*-------------------------------------*/
/*tablet landscape only*/

@media only screen 
	and (min-device-width: 768px) 
	and (max-device-width: 1024px) 
	and (orientation: landscape) {

 
 .intro h1 {
font-size: 3rem!important;
}
 
.intro h2 {
font-size: 2rem!important;
width: 90%!important;
margin-top: 0.5rem!important;
margin-bottom: 1rem!important;
} 
 
.intro h2:after {
margin-top: 4rem!important;
margin-bottom: 0!important;
width: 350px!important;
} 

.intro p {
margin-top: 0!important;
}

.mission p {
font-size: 1rem!important;
}

.mission-image {
margin-right: 1rem!important;
}
 
/*don't touch*/
}
/*don't touch*/

 

/*==============================================*/
/*4: =DESKTOP STYLES*/
/*==============================================*/

@media only screen and (min-width: 900px) { 

 
		/*turn these styles on for a fixed width site:*/
		.gridContainer, footer  {
		max-width: 1200px;
		}
		
.container {
width: 100%;
}  
  
/*keep main main-content centered on page*/
.main-content {
margin: 0 auto;
}	 

h1 {
font-size: 3rem;
}

h2 {
font-size: 2rem;
}

p {
margin-bottom: 0.5rem;
font-size: 1.2rem;
font-weight: normal;
} 
		
/*intro-desktop*/

.intro {
padding-bottom: 2rem;
}

.intro .container {
width: 100%;
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
margin: 0 auto;
}

.intro h1 {
font-size: clamp(1rem, 3.25vw, 3.25rem);
letter-spacing: normal;
letter-spacing: -1px;
padding-top: 3rem;
padding-bottom: 0.5rem;
}

.intro h2 {
font-size: clamp(1rem, 2.25vw, 2.25rem);
margin-bottom: 3rem;
font-weight: 300;
letter-spacing: -1px;
}

/*horizontal bar*/

.intro h2::after {
width: 20%;              
height: 10px;
margin-top: 5vw;
}

.intro p {
font-size: clamp(1rem, 1.25vw, 1.25rem);
line-height: 175%;
padding-left: 2.75rem;
padding-right: 2.75rem;
margin-bottom: 1.5rem;
}

/*animation for intro*/

/* -------------------------------------------------
   1. Intro container (flex for easy layout)
   ------------------------------------------------- */
.intro {
  display: flex;
  flex-direction: column;
  gap: 2rem;               /* space between the two .container blocks */
}

/* -------------------------------------------------
   2. Initial hidden state
   ------------------------------------------------- */
.intro h1,
.intro h2,
.intro p {
  opacity: 0;
  transform: translateY(60px);   /* start below */
}

/* -------------------------------------------------
   3. When .visible is added → slide up + fade
   ------------------------------------------------- */
.intro.visible h1 {
  animation: slideUp 0.9s ease-out forwards;
}
.intro.visible h2 {
  animation: slideUp 0.9s ease-out 0.25s forwards;
}
.intro.visible p {
  animation: slideUp 0.9s ease-out 0.45s forwards;
}

/* -------------------------------------------------
   4. Keyframe
   ------------------------------------------------- */
@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/*=overview sections--desktop*/ 
 
/*medical services*/

.overview.medical-services .overview-photo {
order: 1;
}
.overview.medical-services .overview-content {
order: 2;
}

/*pet resort*/

.overview.pet-resort .overview-photo {
order: 2;
}
.overview.pet-resort .overview-content {
order: 1;
}

/*our staff*/

.overview.staff .overview-photo {
order: 1;
}
.overview.staff .overview-content {
order: 2;
}

/*section styles and animation*/

.overview {
display: flex;
text-align: left;
}

.overview-content,
.overview-photo {
width: 50%;
}

.overview-content {
display: flex;
text-align: left;
flex-direction: column;
justify-content: center;
padding-left: 3rem;
padding-right: 3rem;
}

/* Initial state (when not visible) */
.overview h2,
.overview p,
.overview a {
opacity: 0;
}

.overview h2,
.overview p {
transform: translateX(-50px); /* Start off-screen left */
}

.overview a {
transform: translateY(50px); /* Start below */
}

.overview h2 {
font-size: 2.5vw;
font-weight: 700;
margin-bottom: 1rem;
}

.overview p {
margin-bottom: 1rem;
font-size: 1.25vw;
}

.overview-content p {
color: white!important;
}

.overview-content a {
display: table;
padding: 1.25rem;
padding-left: 1.75rem;
padding-right: 1.75rem;
margin-left: 0;
margin-top: 1rem;
font-size: 1.25rem;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.35);
}

.overview-content a:hover {
background-color: black;
color: white;
}


/*=mission statement--desktop*/ 

.mission {}

.mission .container {
width: 100%;
max-width: 1500px;
margin: 0 auto;
}

.mission-content.container {
display: inline-flex;
flex-direction: row;
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 2rem;
padding-bottom: 2rem;
}

.mission-text{
width: 50%;
order: 1;
text-align: left;
padding:10px;
}

.mission-header.container {
width: auto;
}

.mission-icon {
margin-top: 1rem;
width: 15px;
height: 35px;
margin-left: 0;
}
  
.mission-header h1 {
text-align: left;
font-size: 1.75vw;
font-weight: 700;
padding-top: 1rem;
padding-bottom: 0.5rem;
}

/*horizontal bar*/

.mission h1::after {
position: relative;
display: inline-block; 
content: '';
display: block;
width: 16.5vw;
height: 5px;
background: #6e6f71;
margin-top: 0.75rem;
margin-left: 0;
margin-right: 0;
}
 
.mission-text p {
font-size: 1.25vw;
line-height: 1.15;
margin-bottom: 1rem;
margin-top: 0;
padding-right: 1rem;
}
 
.mission-text a {
font-size: 1rem;
}

.mission-text a:hover {
color: #0066A1;
}

.mission-image {
width: 50%;
padding:10px;
/*width: 35%;*/
order: 2;
}
 
.mission-image img {
width: 95%;
padding-top: 0;
margin-top: 0;
box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.35);
}

/* --------------------------------------------------------------
   ANIMATION 
   -------------------------------------------------------------- */

/* 1. Hidden start state – applies to everything that should animate */
.animate-once h1, .animate-once h2, .animate-once p, .animate-once a, .animate-once img,
.animate-repeat h2, .animate-repeat p, .animate-repeat a, .animate-repeat img,
.mission h1, .mission p, .mission img {
  opacity: 0;
  transform: translateX(-40px);    
}
.animate-once a, .animate-repeat a, .mission a {
  transform: translateY(40px);
}

/* 2. The visible animation – same speed & feel everywhere */
.animate-once.visible h1,
.animate-once.visible h2,
.animate-repeat.visible h2,
.mission.visible h1 {
  animation: slideInLeft 0.75s ease-out forwards;
}
.animate-once.visible p,
.animate-repeat.visible p,
.mission.visible p {
  animation: slideInLeft 0.75s ease-out 0.18s forwards;
}
.animate-once.visible a,
.animate-repeat.visible a {
  animation: slideInUp 0.75s ease-out 0.28s forwards;
}
.animate-once.visible img,
.animate-repeat.visible img,
.mission.visible img,
.animate-repeat.visible .overview-wrapper,
.animate-once.visible .overview-wrapper {
  animation: slideInLeft 0.75s ease-out 0.15s forwards;
}

/* Keyframes – distance & timing */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}


/*don't touch*/	
}
/*don't touch*/


/*-------ADDITIONAL DESKTOP STYLES---------*/ 
 
 /*...*/

a:link.btn {color:#fff!important; text-decoration:none!important;}
a:visited.btn {color:#fff!important; text-decoration:none!important;}
a:active.btn {color:#fff!important; text-decoration:none!important;}
a:hover.btn {color:#fff!important; text-decoration:none!important;}

.btn {
	display: inline-block;
	margin: 0;
	padding: .5em .75em;
	border: 0;
	border-radius: .3em;
	color: #fff;
	background-color: #550000;
	line-height: 1;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12pt;
}

.btn:focus {
	background-color: #500000;
}

.btn:hover {
	background-color: #000000;
}

.btn:active {
	background-color: #5000000;
}


/*FLEX CONTAINER*/
#hpBackground{
background: url(images/bg6.jpg) no-repeat bottom center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 30px;
}
.hp-container {
  display: flex;
  flex-wrap: wrap;
  margin-top:0px;
  margin-bottom:20px;
}

.hp-item {
background-color:rgba(255,255,255,0.05);
  padding: 20px;
  flex: 32%;
  margin:5px;
  text-align:center;
}

.hp-item img{
	width:100%;
	text-align:center;
}

.hp-item h1{
    font-size:26px;
    font-weight:bold;
    padding:10px;
}

.hp-item h2{
    font-size:26px;
    font-weight:600;
}

.hp-item p{
    text-align:left;
}

.hp-item ul{
    text-align:left;
    margin-left:30px;
}

/* Responsive layout - makes a two column-layout instead of a three-column layout */
@media (max-width: 1200px) {
  .hp-item {
    flex: 48%;
  }
}


/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 600px) {
  .hp-item {
    flex: 100%;
  }
}



/****** SQUARE GRID STUFF ****/
.honeycomb {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  list-style: none;
  transform: translateY(80px);
}

.honeycomb-cell {
  flex: 0 1 300px;
  max-width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.honeycomb-cell:hover {
  transform: translateY(-8px);
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.3);
}

.honeycomb-cell_link {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  filter: grayscale(100%);
  transition: filter 350ms ease;
}

/* Dark gradient overlay */
.honeycomb-cell_link::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(130deg, rgba(95,27,34,1) 0%, rgba(83,23,0,1) 50%, rgba(80,0,0,1) 100%);
  opacity: 0.75;
  transition: opacity 350ms ease;
  z-index: 1;
}

/* Title */
.honeycomb-cell_title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.25em;
  margin: 0;
  padding: 0 20px;
  opacity: 1;
  transition: opacity 350ms ease;
  z-index: 2;
  pointer-events: none;
}

.honeycomb-cell_title > small {
  display: block;
  font-weight: 300;
  font-size: 0.7em;
  margin-top: 0.5em;
  opacity: 0.9;
}

/* Hover effects */
.honeycomb-cell:hover .honeycomb-cell_link {
  filter: grayscale(0%);
}

.honeycomb-cell:hover .honeycomb-cell_title {
  opacity: 0;
}

.honeycomb-cell:hover .honeycomb-cell_link::before {
  opacity: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .honeycomb { gap: 20px; padding: 30px 15px; }
  .honeycomb-cell { flex: 0 1 300px; height: 300px; }
  .honeycomb-cell_title { font-size: 1.3em; }
}

@media (max-width: 480px) {
  .honeycomb-cell { flex: 0 1 300px; height: 300px; margin: 0 auto; }
  .honeycomb-cell_title { font-size: 1.4em; }
}

/* Card background animation */
.card {
  margin: 0;
  padding: 0px 15px;
  width: 100%;
  background: linear-gradient(115deg, #5D1A22, #500000, #000000, #500000, #5D1A22);
  background-size: 300% 300%;
  animation: AnimationName 10s ease infinite;
}

@keyframes AnimationName {
  0%   { background-position: 0% 2%; }
  50%  { background-position: 100% 99%; }
  100% { background-position: 0% 2%; }
}



/* OUR TEAM */

#teamBackground{
background: url(images/bg6.jpg) no-repeat bottom center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 30px;
}
.team-container {
  display: flex;
  flex-wrap: wrap;
  margin-top:0px;
 /* margin-bottom:20px;*/
  padding-top:20px;
  padding-bottom:20px;
}

.team-item {
  padding: 20px;
  flex: 32%;
  margin:5px;
  margin-bottom:20px;
  text-align:center;
    border:1px solid #ffffff;
    background-color:#fff;
     -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow:    0px 0px 5px 0px rgba(0, 0, 0, 0.25);
    box-shadow:         0px 0px 5px 0px rgba(0, 0, 0, 0.25); 
}

.team-item:hover {
/*background-color:rgba(0,0,0,0.0);*/
}

.team-item .name {
	font-size:20px;
	font-weight:bold;
  color: #800000;
}

.team-item .title {
	font-size:18px;
	font-weight:normal;
	color:#000000;
	margin-bottom:20px;
}

.team-item img{
    border:0px double #B2975D;
    margin:5px;
  	object-fit: cover;
    height:275px;
    width:auto;
    border-radius:5px;
    /*padding:5px;
    background:#000;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow:    0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow:         0px 0px 5px 0px rgba(0, 0, 0, 0.75);*/
}

.team-item h1{
    font-size:26px;
    font-weight:bold;
    padding:10px;
}

.team-item p{
    text-align:left;
}
/* Responsive layout - makes a two column-layout instead of a three-column layout */
@media (max-width: 1000px) {
  .team-item {
    flex: 48%;
  }
}


/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 600px) {
  .team-item {
    flex: 100%;
  }
}


/* =============================================
   TEAM MODAL STYLES
   ============================================= */

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal.show {
  display: flex;
}

.modal-content {
  background: white;
  max-width: 90%;
  width: 1000px;
  max-height: 90vh;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 70px rgba(0,0,0,0.35);
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 32px;
  font-weight: bold;
  background: none;
  border: none;
  color: #555;
  cursor: pointer;
  line-height: 1;
  padding: 0 8px;
  z-index: 10;
}

.modal-close:hover,
.modal-close:focus {
  color: #000;
  outline: none;
}

.modal-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px 16px;
  border-bottom: 1px solid #eee;
  background: #f9f9f9;
}

.modal-photo {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.modal-title-block h2 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.2;
}

.modal-title-block p {
  margin: 6px 0 0;
  color: #666;
  font-size: 1rem;
}

.modal-body {
  padding: 28px;
  padding-top:10px;
  line-height: 1.65;
  font-size: 0.85rem;
  color: #333;

  /* Scrollable bio area */
  max-height: 60vh;                    /* ← adjust this value if needed (50–60vh common) */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;   /* smooth iOS scrolling */
}

/* Scrollbar styling (most modern browsers) */
.modal-body::-webkit-scrollbar {
  width: 8px;
}

.modal-body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .modal-content {
    width: 94%;
  }

  .modal-header {
    flex-direction: column;
    text-align: center;
    padding: 20px 16px 12px;
    gap: 16px;
  }

  .modal-photo {
    width: 120px;
    height: 120px;
  }

  .modal-body {
    padding: 20px 24px;
    font-size: 1rem;
  }
}

.bio-link {
  margin-top: 8px;
  font-size: 0.9rem;
  color: #fff;                
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.bio-link span {
  /* Optional: make it look more button-like */
  padding: 4px 10px; 
  border: 1px solid #800000; 
  border-radius: 4px; 
  background-color:#800000;
}

.bio-link:hover,
.bio-link:focus {
  color: #ffffff;               /* darker on hover */
  text-decoration: none;
}

/* If you made it button-like, add hover styles */
.bio-link span:hover {
  padding: 4px 10px; 
  border: 1px solid #800000; 
  border-radius: 4px; 
  background-color:#6e6f71;
  color:#ffffff;
}

.bio-teaser {
  margin-top: 10px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #000;
  text-align:left;
}

.bio-teaser p {
  margin: 0 0 8px 0;
  text-align:left;
  color:#000;
}

.read-more {
  color: #800000;          /* change to match your site colors */
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}

.read-more:hover {
  color: #6e6f71;
  text-decoration: none;
}


/* =============================================
   LARGE SCREEN / TV FIX
   ============================================= */
@media only screen and (min-width: 1921px) {

    /* 1. Widen the main container a bit (still centered) */
    .gridContainer,
    #mainContent,
    .honeycomb,
    .mission .container {
        max-width: 1600px;          /* ← change to 1500px or 1700px if you prefer */
    }

    /* 2. Increase the root font size so everything scales nicely */
    html {
        font-size: 20px;            /* was ~16px base → bigger but not crazy */
    }

    /* 3. Tone down the huge vw-based headings */
    .intro h1 {
        font-size: clamp(1.8rem, 3.5vw, 3.8rem);
    }
    .intro h2 {
        font-size: clamp(1.4rem, 2.4vw, 2.6rem);
    }

    /* 4. Fix the overview / team / honeycomb cards so images don't crop badly */
    .overview-photo img,
    .team-item img,
    .honeycomb-cell_link,
    .hp-item img {
        height: auto;
        height:100%;
        /*min-height: 450px;  */        /* adjust if needed */
        object-fit: cover;
    }

    /* 5. Make the team items a little bigger but not ridiculous */
    .team-item {
        flex: 30%;                  /* was 32% */
    }
    .team-item img {
        height: 320px;
    }

    /* 6. Slightly larger padding on big containers */
    .overview-content,
    .mission-content.container {
        padding-left: 4rem;
        padding-right: 4rem;
    }

    /* Optional: make the wood background feel less empty on sides */
    html {
        background-size: 100% auto;   /* or keep cover – test both */
    }
}