:root {
  --cassiopeia-color-primary: #556b2f; /* Your main brand color */
  --cassiopeia-color-hover: #0d2640;   /* A darker version for hover states */
  --cassiopeia-color-link: #556b2f;    /* Link color */
}



.homepage footer {
  margin-top: -50px;
}

.homeboxtan {
  display: block;
  width: 100%;
background: #f2f2f2;
background: -webkit-linear-gradient(360deg,rgba(242, 242, 242, 1) 0%, rgba(245, 242, 239, 1) 100%);
background: -moz-linear-gradient(360deg,rgba(242, 242, 242, 1) 0%, rgba(245, 242, 239, 1) 100%);
background: linear-gradient(360deg,rgba(242, 242, 242, 1) 0%, rgba(245, 242, 239, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr="#F2F2F2",
  endColorstr="#F5F2EF",
  GradientType=0
);
  color: #000;
  padding: 20px;
  font-size: 18px;
}

.homeboxgreen {
  cleaR: left;
  display: block;
  width: 100%;
  background: #556B2F;
background: -webkit-linear-gradient(360deg, rgba(85, 107, 47, 1) 0%, rgba(127, 153, 81, 1) 100%);
background: -moz-linear-gradient(360deg, rgba(85, 107, 47, 1) 0%, rgba(127, 153, 81, 1) 100%);
background: linear-gradient(360deg, rgba(85, 107, 47, 1) 0%, rgba(127, 153, 81, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#556B2F", endColorstr="#7F9951", GradientType=0);
  color: #F5F2EF;
  padding: 20px;
  font-size: 18px;
}

.homeboxblue {
  display: block;
  width: 100%;
background: #7891AD;
background: -webkit-linear-gradient(360deg, rgba(120, 145, 173, 1) 0%, rgba(70, 103, 143, 1) 100%);
background: -moz-linear-gradient(360deg, rgba(120, 145, 173, 1) 0%, rgba(70, 103, 143, 1) 100%);
background: linear-gradient(360deg, rgba(120, 145, 173, 1) 0%, rgba(70, 103, 143, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7891AD", endColorstr="#46678F", GradientType=0);
  color: #F5F2EF;
  padding: 20px;
  font-size: 18px;
}
.homeboxblue img,
.homeboxtan img,
.homeboxgreen img {
  display: block; 
  float: right;
  width: 30%;
  max-width: 420px;
  min-width: 320px;
  margin: 0px 15px 0 15px;
  border: #ccc double 4px;
}
.homeboxblue img.left,
.homeboxtan img.left,
.homeboxgreen img.left {
  display: block; 
  float: left;
  width: 30%;
  margin: 0px 15px 0 15px;
  border: #ccc double 4px;
}

/* Container stays the same */
.homeicons ul {
  display: flex;
  flex-wrap: wrap;       /* Allows wrapping */
  justify-content: center; 
  gap: 10px;             /* Space between buttons */
  padding: 0;
  margin: 0 0 30px 0;
  list-style: none;
}

/* The LI is now the sizing engine */
.homeicons li {
  /* This ensures all boxes grow to fill the row equally */
  flex: 1 1 200px;       
  /* 200px is the "breaking point" - if the screen is 400px wide, 
     you'll get 2 columns. If it's 800px, you'll get 4 columns. */
  
  display: flex;         /* Allows the anchor inside to fill the LI */
  max-width: 200px;      /* Optional: prevents boxes from getting too wide on huge screens */
}

/* The Link (The Button) */
.homeicons li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  width: 100%;           /* Fill the LI container */
  min-height: 140px;     /* Forces all buttons to the same height */
  padding: 10px;
  text-align: center;
  text-decoration: none;
  color: #7891ad;
  
  border: none;
  border-radius: 15px;
  transition: all 0.3s ease;
  box-sizing: border-box; /* Crucial for keeping padding inside the width */
}

.homeicons li a:hover {
  background-color: #7891ad;
  color: #ffffff !important;
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(120, 145, 173, 0.3);
}

/* Icon Styles */
.homeicons em {
  display: block;
  font-size: 45px;
  margin-bottom: 12px;
  color: #7891ad;
  transition: color 0.3s ease;
}

.homeicons li a:hover em {
  color: #ffffff !important;
}


.container-header {
    background-color: #f5f2ef;
    background-image: none;
}
.container-topbar {
  /* background-color: #ece2d8; */
  background-color: #f5f2ef;
  background-image: none;
  height: 40px;
}

.social-icons {
  display: block;
  width: 100px !important;
  height: 40px;
  float: right;
  white-space: nowrap;
}

.social-icons img {
  padding: 5px;
  height: 40px;
}
.patient-link {
  display: block;
  width: auto;
  float: right;
  padding: 8px;
  height: 40px;
  overflow: hidden;
}
.patient-link a {
  color: #ece2d8 !important;
  text-decoration: none;
  background-color: #556b2f;
  border-radius: 7px;
  padding: 6px;
}

.logoimg {
  display: block;
  float: left;
  width: 125px;
  margin: 15px !important;
}

.logotext {
  display: block;
  float: left;
  width: 525px;
  color: #556b2f;
  padding: 25px;
}
.logotext .family-care-name {
  font-size: 28px;
  font-weight: bold;
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
  text-transform: uppercase;
}



.hours {
    display: block;
    float: left;
    width: 200px;
    min-width: 200px;
    color: #7891ad;
    white-space: nowrap;
    font-size: 16px;
    margin: 30px 15px 15px 15px;
  font-weight: bold;
}
.hours div em, .address div em {
    display: block;
    float: left;
    width: auto;
    font-size: 28px;
    padding-top: 10px;
    padding-right: 15px;
    margin-bottom: 40px;
    color: #7891ad;
}
.address {
    display: block;
    float: left;
    width: 250px;
    color: #7891ad;
    font-size: 16px;
  font-weight: bold;
  margin: 30px 15px 15px 15px;
}

.address a,
.address a:hover,
.address a:visited,
.address a:link,
.hours a,
.hours a:hover,
.hours a:visited,
.hours a:link {
  text-decoration: none;
  color: #7891ad !important;
}

.mem-includes {
    display: block;
    font-size: 20px;
    background-color: #f5f2ef;
    border-radius: 20px;
    padding: 15px;
    margin: 20px;
}
.mem-includes li {
    display: block;
    text-align: center;
    padding: 10px 0px 10px 0px;
}



.footer .grid-child {
  display: block;
}

.footer {
    background-color: #556b2f;
    background-image: none;
    color: #ffffff; /* Sets text color */
}

/* To change the color of links inside the footer */
.footer a {
    color: #ffcc00;
}

@media screen and (max-width: 640px) {
.logoimg {
  width: 75px;
  padding-top: 30px;
  }
.logotext {
  display: block;
  float: left;
  width: 245px;
  color: #556b2f;
  padding: 15px 5px 15px 5px;
}
.logotext .family-care-name {
  font-size: 18px;
  font-weight: bold;
}
.logotext .doctor-title {
  font-size: 14px;
}
.hours {
    width: 125px;
    min-width: 125px;
    font-size: 14px;
    clear: both;
    margin: 10px 15px 0px 25px; }

.address {
    width: 150px;
    font-size: 14px;
    margin: 10px 15px 0px 15px;
    }


}


/* ==========================================
   5. RESPONSIVE TABLE LOGIC = */
   
table.responsivetable { 
  width: 100%; 
  border-collapse: collapse;
}
/* Zebra striping */
table.responsivetable tr:nth-of-type(odd) { 
  background: #eee; 
}
table.responsivetable th { 
  background: #556b2f; 
  color: white; 
  font-weight: bold; 
}
table.responsivetable td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
  
}
table.columnterm tr td:last-child  { 
  width: 25%; 
  max-width: 25%;
}

.colbg1,
.colbg3,
.colbg5,
.colbg7,
.colbgodd
{
    text-align: center !important; 
    background-color: #b0bed1  !important;
    color: #001e3b !important;
}

.colbg2,
.colbg4,
.colbg6,
.colbg8,
.colbgeven
{
    text-align: center !important; 
    background-color: #e4e9f0 !important;
    color: #001e3b !important;
}




@media (max-width: 767px) {
/* Force table to not be like tables anymore */
  table.responsivetable,
  table.responsivetable .thead,
  table.responsivetable tbody,
  table.responsivetable th,
  table.responsivetable td,
  table.responsivetable tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	table.responsivetable tr.thead { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	table.responsivetable tr { border: 1px solid #ccc; }
	
  
  /* Behave  like a "row" */

    table.memberships td
       { 
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
	}

	
	/* position data from the left */

    table.memberships td
       { 
		padding-left: 40%;
	}
	
	table.memberships td.colbg0
       { 
		padding-left: 5% !important;
		text-align: left !important;
	}
		
	 
	
	table.responsivetable td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		white-space: nowrap;
	}
	
	/*	Label the data */
	table.memberships td:nth-of-type(1):before { content: "Membership:"; font-weight: bold; font-style: italic; }
		table.memberships td:nth-of-type(1) {
		    background-color: #556b2f;
		    color: #FFFFFF;
		}
        table.board td:nth-of-type(1) {background-color: #003366; color: #fff;}
	table.memberships td:nth-of-type(2):before { content: "Enrollment Fee:"; font-weight: bold; font-style: italic; }
	table.memberships td:nth-of-type(3):before { content: "Membership Fee:"; font-weight: bold; font-style: italic; }

  
 
	
}