@charset "UTF-8";
/*
Theme Name:   	Cedar Vets 2026 Theme
Theme URI:    	https://www.cedarvet.com
Author:       	Vicki Ball
Author URI:     https://www.rubberdesign.co.uk
Description:  	This is a 2026 theme for Cedar Vets
Version:      	2.0.0

*/
:root 
{
--navy: #00476A;
--turq: #00A9E0;
--green: #86B110;
--greige: #03A5D3;
--hdBlack: 'Colby Condensed Black', sans-serif;
--hdBold: 'Colby Condensed Bold', sans-serif;
--hdMed: 'Colby Medium', sans-serif;
--bdCopy: 'Open Sans', sans-serif;
--btnRadius: 30px;
--sidePadding: 30px;
--tbPadding: 75px;
--contentPadding: 30px;
--headerHeight: 135px;
--slide-gap: 16px;
--slides-visible: 1;        /* mobile default */
--radius-map:  18px;
--radius-card: 14px;
--CHAR_LIMIT:   220;              /* visual reference — controlled in JS */
}
*, *::before, *::after {
  box-sizing: border-box;
	margin: 0;
  padding: 0;
}

/* FONTS */
@font-face {
    font-family: 'Colby Medium';
    src: url('fonts/Colby-Medium.woff2') format('woff2'),
         url('fonts/Colby-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'Colby Condensed Bold';
    src: url('fonts/ColbyCondensed-Bold.woff2') format('woff2'),
        url('fonts/ColbyCondensed-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Colby Condensed Black';
    src: url('fonts/ColbyCondensed-Black.woff2') format('woff2'),
        url('fonts/ColbyCondensed-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

/* GENERIC PAGE CONTENT */

html {
    height:100%;
    box-sizing: border-box;
    background-color: #FFF;
    min-width:320px;
    font-size:16px;
    overflow-x: hidden;
}
body{
    font-family: var(--bdCopy);
    height:100%;
    padding: 0;
    margin: 0;
    background-color: #FFF;
    overflow-x: hidden;
}
.content {
	display:grid;
	padding-top: 160px;
	position:relative;
	z-index: 0;
	
}
.content-hero {
	display:grid;
	padding-top: var(--headerHeight);
	position:relative;
	z-index: 0;
	
}
.content-block {
	display:grid;
	width:100%;
	justify-items: center;
}
.content-block.neutral {
	background-image: url(images/NeutralBG.jpg);
  	background-size: 175px 175px;
}
.content-block.green {
	background-image: url(images/GreenBG.jpg);
  	background-size: 175px 175px;
}
.content-block.turq {
	background-image: url(images/TurqBG.jpg);
  	background-size: 175px 175px;
}
.content-inner-hm {
	width:100%;
	display:grid;
	grid-gap: var(--sidePadding);
	padding-left:var(--sidePadding);
	padding-right:var(--sidePadding);
	padding-top:var(--tbPadding);
	padding-bottom:var(--tbPadding);
	text-align: center;
	max-width: 1490px;
	grid-gap:var(--sidePadding);
}
.content-inner {
	width:100%;
	display:block;
	padding-top:var(--sidePadding);
	padding-left:var(--sidePadding);
	padding-right:var(--sidePadding);
	padding-bottom:var(--tbPadding);
	grid-gap: 0;
	text-align: left;
	max-width: 1490px;
}
.two-col-img {
	padding:0;
}

.two-col-img > figure {
  display: block; /* or grid with align/justify items stretch */
  height: 367px;
  width: 100%;
  overflow: hidden;
  margin: 0; /* remove default browser margin */
}

.two-col-img > figure > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block; /* removes the small gap below inline images */
}
.two-col-img > .content-text {
	display:grid;
	padding-left:var(--sidePadding);
	padding-right:var(--sidePadding);
	padding-top:var(--tbPadding);
	padding-bottom:var(--tbPadding);
	text-align: center;
	align-items: center;
  justify-items: center;
	grid-gap:30px;
	position: relative;
}

.two-col-img-grid > figure {
  display: block; /* or grid with align/justify items stretch */
  width: 100%;
  overflow: hidden;
  margin: 0; /* remove default browser margin */
	border-radius: 20px;
}
.two-col-img-grid > figure > img {
	border-radius: 20px;
	width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
	max-height:324px;
}
.TitleLine {
  border: none;
  margin: 20px 0 40px 0;
	height:23px;
  width: 100%;
	display:grid;
	background-image: url("images/Rule_Grey.svg");
background-repeat: no-repeat;
  background-size: 100% 100%;
}
.wp-block-separator {
  border: none;
  margin: 30px 0;
	height:23px;
  width: 100%;
	display:grid;
	background-image: url("images/Rule_Grey.svg");
background-repeat: no-repeat;
  background-size: 100% 100%;
}
.wp-block-separator:nth-of-type(2n) {
	transform: rotate(180deg)
}
.template-page h1 {
	font-family: var(--hdBlack);
	font-size: 35px;
	line-height: 1.2;
	color: var(--navy);
	margin: 0 0 30px 0;
}
h2 {
	font-family: var(--hdBold);
	font-size: 29px;
	line-height: 1.2;
	color: var(--turq);
	margin: 0;
}
.template-page h2 {
  margin: 12px 0;
}
h3 {
	font-family: var(--hdBlack);
	font-size: 20px;
	line-height: 1.2;
	color: var(--navy);
	margin: 0;
}
.alt_h3 {
  font-family: var(--hdMed);
  font-size: 16px;
	font-weight: normal;
}
.template-page h3 {
  margin: 10px 0;
}
h4 {
  font-family: var(--hdBold);
  font-size: 20px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--green);
}
.template-page h4 {
  margin: 10px 0;
}
h5 {
  font-family: var(--hdBold);
  font-size: 16px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--navy);
}
.template-page h5 {
  margin: 10px 0;
}
p {
	font-family: var(--bdCopy);
	font-size: 14px;
	line-height: 1.4;
}
.template-page p {
	margin: 10px 0;
	line-height: 1.7;
}
/*.template-page p:last-child {
	margin: 7px 0 0 0;
}
h2:last-of-type,
h3:last-of-type,
h4:last-of-type, 
h5:last-of-type, 
p:last-of-type {
  margin-bottom:0;
}
h1:first-of-type,
h2:first-of-type,
h3:first-of-type,
h4:first-of-type, 
h5:first-of-type, 
p:first-of-type {
  margin-top:0;
}*/
a {
	color: inherit;
}

blockquote > p {
  font-family: var(--bdCopy);
  font-size: 16px;
  color: #666;
  line-height: 1.6;
}
.wp-block-list {
  font-family: var(--bdCopy);
  font-size: 14px;
  line-height: 1.6;
  padding: 0 0 0 2rem;
}
.float-right {
  display: block;
  width: 100%;
  margin: 0 auto 30px auto;
}
.float-left {
  display: block;
  width: 100%;
  margin: 0 auto 30px auto;
}
.turq-text {
	color:var(--turq);
}
.white-text {
	color:white;
	text-shadow: 0px 0px 6px rgba(0,0,0,0.20);
}
.green-text {
	color:var(--green);
}
.navy-text {
	color:var(--navy);
}
.cedarshapes {
	position:absolute;
	display:block;
}
.cedar-banner-lft-bullets,
.cedar-banner-expand {
  display: grid;
  grid-gap: 2rem;
  align-items: center;
}

@media (min-width: 900px) {
	.cedar-banner-lft-bullets,
	.cedar-banner-expand {
	  display: grid;
	  grid: auto / 1fr 1fr;
	  grid-gap: 3rem;
	  align-items: center;
	}
	.cedar-banner-expand {
	  grid: auto / 1fr 300px;
	}
}
@media (min-width: 1280px) {
	.cedar-banner-lft-bullets,
	.cedar-banner-expand {
	  display: grid;
	  grid: auto / 1fr 2fr;
	  grid-gap: 3rem;
	  align-items: center;
	}
	.cedar-banner-expand {
	  grid: auto / 1fr 300px;
	}
}
.blobList {
	background-image: url("images/Blob_DkBlue.png");
    background-repeat: no-repeat;
    background-size:100% 100%;
	padding: 5rem 4rem;
	display:grid;
	grid-gap:0.7rem;
	list-style: none;
	margin: 0 auto;
  max-width: 550px;
}
.blobList li {
	font-family: var(--hdMed);
	  font-size: 1rem;
	display:grid;
	grid:auto / 18px 1fr;
	line-height: 1.3;
  grid-gap: 0.5rem;
}
.blobList li::before {
	content:"";
	background-image: url("images/starTurq.svg");
    background-repeat: no-repeat;
    background-size:100% 100%;
	width:18px;
	height:18px;
	margin-top: 0.1rem;
	display:block;
}
.blobList li:nth-of-type(3n+1)::before {
	rotate:90deg;
}
.blobList li:nth-of-type(3n+2)::before {
	rotate:180deg;
}
.blobNavy {
	background-image: url("images/Blob_DkBlue.png");
}
.blobNavy li {
	color:#FFF;
}
.starList {
  display: grid;
  grid-gap: 1rem;
  list-style: none;
  margin: 30px 0;
  padding: 0;
}
.starList li {
	font-family: var(--hdMed);
	  font-size: 1rem;
	display:grid;
	grid:auto / 18px 1fr;
	line-height: 1.3;
  grid-gap: 0.5rem;
	color: var(--navy);
}
.starList li::before {
	content:"";
	background-image: url("images/starGreen.svg");
    background-repeat: no-repeat;
    background-size:100% 100%;
	width:18px;
	height:18px;
	margin-top: 0.1rem;
	display:block;
}
.starList li:nth-of-type(3n+1)::before {
	rotate:90deg;
}
.starList li:nth-of-type(3n+2)::before {
	rotate:180deg;
}
.starListBold {
  display: grid;
  grid-gap: 1rem;
  list-style: none;
  margin: 30px 0;
  padding: 0;
}
.starListBold li {
	font-family: var(--hdMed);
	  font-size: 1rem;
	display:grid;
	grid: auto / 18px auto 1fr;
	line-height: 1.3;
  grid-gap: 0.5rem;
	color: var(--navy);
}
.starListBold li::before {
	content:"";
	background-image: url("images/starGreen.svg");
    background-repeat: no-repeat;
    background-size:100% 100%;
	width:18px;
	height:18px;
	margin-top: 0.1rem;
	display:block;
}
.starListBold li:nth-of-type(3n+1)::before {
	rotate:90deg;
}
.starListBold li:nth-of-type(3n+2)::before {
	rotate:180deg;
}
.tickList {
  display: grid;
  grid-gap: 1rem;
  list-style: none;
  margin: 30px 0;
  padding: 0;
}
.tickList li {
	font-family: var(--hdMed);
	  font-size: 1rem;
	display:grid;
	grid:auto / 18px 1fr;
	line-height: 1.3;
  grid-gap: 0.5rem;
	color: var(--navy);
}
.tickList li::before {
	content:"";
	background-image: url("images/GreenTick.svg");
    background-repeat: no-repeat;
    background-size:100% 100%;
	width:18px;
	height:18px;
	margin-top: 0.1rem;
	display:block;
}
@media (min-width: 700px) {
	.float-right {
	  float: inline-end;
	  margin: 0 0 30px 30px;
	}
	.float-left {
	  float: inline-start;
	  margin: 0 30px 30px 0;
	}
}

@media (min-width: 900px) {
	.content {
		padding-top: 175px;
	}
	.template-page h1 {
		font-size: 40px;
	}
	h2 {
		font-size: 34px;
	}
	h3 {
		font-size: 25px;
	}
	.alt_h3 {
	  font-size: 19px;
	}
	h4 {
	  font-size: 25px;
	}
	h5 {
	  font-size: 19px;
	}
	p,
	.wp-block-list {
		font-size: 15px;
	}
	.two-col-img {
	  	grid: auto / 1fr 1fr;
		padding-left:var(--sidePadding);
		padding-right:var(--sidePadding);
		padding-top:var(--tbPadding);
		padding-bottom:var(--tbPadding);
		grid-gap:var(--sidePadding);
	}
	.two-col-img > .content-text {
		  padding: 0 var(--sidePadding);
	}
	.two-col-img > figure {
	  border-radius: 20px;
	}
	.two-col-img-grid {
 	 	grid: auto / 1fr 1fr;
	}
	.two-col-img-grid > h2 {
		
	  grid-area: 1 / 2 / 2 / 3;
		align-self: end;
	}
	.two-col-img-grid > figure {
	  grid-area: 1 / 1 / 3 / 2;

	}
	.two-col-img-grid > nav {
	  grid-area: 2 / 2 / 3 / 3;
		align-self: start;
	}
	.two-col-img-grid > figure > img {
	  max-height: unset;
	}
	.wp-block-separator {
	  margin: 50px 0;
	}
}
@media (min-width: 1280px) {
	.content {
		padding-top: 130px;
	}
	.template-page h1 {
		font-size: 45px;
	}
	h2 {
		font-size: 39px;
	}
	h3 {
		font-size: 30px;
	}
	.alt_h3 {
	  font-size: 24px;
	}
	h4 {
	  font-size: 30px;
	}
	h5 {
	  font-size: 24px;
	}
	p,
	.wp-block-list {
		font-size: 16px;
	}
	.two-col-img {
		grid-gap:var(--tbPadding);
	}
	.two-col-img {
		grid-gap:60px;
	}
	 .two-col-img > .content-text {
		text-align: left;
		justify-items: start;
	  }
}
@media (min-width: 1380px) {
	.content {
		padding-top: 154px;
	}
}


@media (min-width: 900px) {
	:root {
		--headerHeight: 150px;
	  }
}
@media (min-width: 1100px) {
	:root {
		--headerHeight: 175px;
	  }
}
@media (min-width: 1280px) {
	:root {
		--tbPadding: 100px;
	  }
	:root {
		--headerHeight: 150px;
	  }
}
@media (min-width: 1440px) {
	:root {
		--sidePadding: 45px;
		--tbPadding: 150px;
	  }
	
}

/* GENERIC PAGE CONTENT */

/* SLIDESHOW */

/* ─── Slideshow wrapper ──────────────────────────────── */
    .slideshow-new {
      position: relative;
		width: 100%;
		margin-bottom: 15px;
    }

    .slideshow__track-wrapper {
      overflow: hidden;
      border-radius: 16px;
		/*VB*/
		width: calc(100% + 60px);
  margin-left: -30px;
    }

    .slideshow__track {
      display: flex;
      gap: var(--slide-gap);
      will-change: transform;
    }

    /* ─── Individual slide / image container ─────────────── */
    /*
      Slide width formula:
        (100% of wrapper  −  gaps between visible slides)  ÷  number of visible slides

      Written with calc() so CSS itself lays out the correct width at every breakpoint.
      JS reads the resulting offsetWidth — no pixel values duplicated in JavaScript.
    */
    .slideshow__slide {
      flex-shrink: 0;
      width: calc(
        (100% - var(--slide-gap) * (var(--slides-visible) - 1))
        / var(--slides-visible)
      );
      aspect-ratio: 4 / 3;
      border-radius: 12px;
      overflow: hidden;
      position: relative;
      background: #ddd;
    }

    .slideshow__slide img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      pointer-events: none;
      user-select: none;
    }

    /* ─── Arrow buttons ──────────────────────────────────── */
    .slideshow__btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      background: #fff;
      color: #1a3a5c;
      box-shadow: 0 2px 12px rgba(0,0,0,.18);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .2s, box-shadow .2s, opacity .2s;
    }

    .slideshow__btn:hover       { background: var(--turq); }
    .slideshow__btn:disabled    { opacity: .35; cursor: default; }
    .slideshow__btn--prev       { left: 12px; }
    .slideshow__btn--next       { right: 12px; }
	

    .slideshow__btn svg {
      width: 14px;
      height: 21px;
    }

.slideshow__btn--prev svg 	{ transform: rotate(180deg); }

    /* ─── Dot indicators ─────────────────────────────────── */
    .slideshow__dots {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 14px;
    }

    .slideshow__dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #c8c2b8;
      border: none;
      cursor: pointer;
      padding: 0;
      transition: background .2s, transform .2s;
    }

    .slideshow__dot.is-active {
      background: #1a3a5c;
      transform: scale(1.3);
    }
@media (min-width: 800px) {
      :root { --slides-visible: 2; }
    }

    @media (min-width: 1280px) {
      :root { --slides-visible: 3; }
		.slideshow__btn {
		  width: 67px;
		  height: 67px;
		}
		.slideshow__btn svg {
		  width: 24px;
		  height: 35px;
		}
		.slideshow__btn--prev {
			  left: 30px;
			}
		.slideshow__btn--next {
		  right: 30px;
		}

    }
/* SLIDESHOW */

/* HEADER */
.top-header {
	display: grid;
	grid-template-rows: auto auto auto;
	grid-template-columns: 1fr 1fr;
	position: fixed;
	width: 100%;
	z-index: 120;
}

#main_nav {
	display:none;
}
#main_nav > ul > .has-dropdown button {
	padding: 0;
	text-align: left;
	display: grid;
	align-content: center;
	background: none;
	border: none;
	justify-self: start;
}
#main_nav > ul {
	list-style: none;
	padding: 0;
	margin: 10px 0;
}
#main_nav.navOpen {
	display:none;
	z-index: 100;
	min-width: 100%;
	background-image: url(images/GreenBG.jpg);
	background-size: 175px 175px;
	position: absolute;
	top: var(--headerHeight);
	height: calc(100vh - 135px); /* subtract the top offset so it doesn't exceed viewport */
	overflow-y: auto;
}

#main_nav.navOpen > ul {
	display: grid;
	align-content: start;
	justify-items: stretch;
}
#main_nav.navOpen > ul > li {
	list-style: none;
	padding: 0;
	display:grid;
	grid: auto / auto auto;
	justify-content: center;
	align-items: center;
	font-family: var(--hdBold);
	line-height: 1;
	font-size: 30px;
	color:white;
	text-transform: uppercase;
	background-image: url(images/Rule_White25.svg);
	background-repeat: no-repeat;
	background-position-y: bottom;
	background-size: 100% 10px;
}
#main_nav.navOpen > ul > li:last-child {
	background-image: none;
}
#main_nav.navOpen > ul > li > a {
	color:white;
	padding:28px 0px;
	justify-self: end;
	text-shadow: 0px 0px 6px rgba(0,0,0,0.20);
}
#main_nav.navOpen > ul > .has-dropdown button {
	width: 45px;
	height: 45px;
}
#main_nav.navOpen > ul > .has-dropdown button span svg {
	transition: 0.3s rotate;
}
#main_nav.navOpen > ul a {
	text-decoration: none;
}
#main_nav.navOpen .has-dropdown.dropdown-open > a {
	padding: 28px 0px 10px 40px;
}
#main_nav.navOpen .has-dropdown.dropdown-open > .dropdown-menu {
	display: grid;
	list-style: none;
	padding: 0;
	grid-area: 2 / 1 / 3 / 3;
	text-align: center;
	margin-bottom: 30px;
}
#main_nav.navOpen > ul > .has-dropdown.dropdown-open button span svg {
	margin-top: 16px;
	rotate: 90deg;
}
.dropdown-menu a {
	text-transform: none;
	text-decoration: none;
	color: var(--navy);
	font-family: var(--hdMed);
	font-size: 22px;
	padding: 10px;
	display: block;
}
.arc {
	display: grid;
	position:relative;
	width:100%;
	min-height:28px;
	grid-area: 3 / 1 / 4 / 3;
	align-items: center;
	z-index: 110;
	background-image: url("images/Arc_Banner_Mobile.svg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
#main_nav.navOpen .has-dropdown {
	grid-gap:5px;
}
#main_nav.navOpen .has-dropdown > ul {
	display:none;
}
#main_nav.navOpen > ul > .has-dropdown > a {
	padding-left: 40px;
}
#nav_contact {
	grid-column: 1 / 3;
	display: grid;
	grid-template-columns: 1fr 1fr;
	background-color: var(--navy);
	z-index: 120;
}
.nav_contact_buttons  {
	font-family: var(--hdBlack);
	line-height: 1;
	font-size:20px;
	color: white;
	display: grid;
	grid: auto / auto auto;
	align-items: center;
	gap: 5px;
	height:48px;
	cursor: pointer;
	text-decoration:none;
	padding:0 10px;
}

.nav_contact_buttons > strong  {
	padding-top:2px;
}
#nav_contact_emergencies {
	grid-column: 1;
	justify-self: start;
}

#nav_contact_callus {
	grid-column: 2;
	justify-self: end;
	text-transform: uppercase;
}

.main-header {
	grid-column: 1 / 3;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	padding: 20px 20px 0px 20px;
	background-color: #ffffff;
	grid-gap: 40px;
	z-index: 110;
}

.cedar_vets_logo {
	width: 250px;
	grid-column: 1;
	justify-self: start;
}

@media (min-width: 900px) {
	.top-header {
	  grid-template-columns: 370px 1fr;
	}
	.arc {
  		min-height: 38px;
	}
	#button_mobile {
		display:none;
	}
	.cedar_vets_logo {
		width: 300px;
		grid-area: 1 / 1 / 2 / 3;
	}
	.main-header {
	  grid-area: 2 / 1 / 3 / 2;
	}
	#main_nav {
	  transform: unset !important;
	  opacity: 1 !important;
	  visibility: visible !important;
	  display: grid !important;
		grid-area: 2 / 2 / 3 / 3;
		background: white;
		justify-items: end;
    padding: 0;
		padding-right:var(--sidePadding);
    align-items: end;
	}
	#main_nav .dd_arrow {
	  fill: var(--green);
	}
	#main_nav > ul {
		display: flex;
		gap: 15px;
		margin: 10px 0 20px 0;
	}
	#main_nav > ul > li {
	  list-style: none;
	  padding: 0;
	  display: grid;
	  grid: auto / auto auto;
	  justify-content: center;
	  align-items: center;
	  line-height: 1;
	}
	#main_nav > ul > li > a {
	  font-family: var(--hdBold);
	  text-decoration: none;
	  color: var(--navy);
	  text-transform: uppercase;
	  font-size: 22px;
		padding-bottom: 2px;
	}
	#main_nav > ul > li > a:hover,
	#main_nav > ul > .dropdown-open > a {
	  background-image: url("images/Nav_Underline.svg");
		background-repeat: no-repeat;
		background-size: 100% 3px;
		background-position: bottom;
	}
	#main_nav > ul > .has-dropdown.dropdown-open button span svg {
		transition: 0.3s rotate;
	  margin-top: 0;
	  rotate: 90deg;
	}
	#main_nav .has-dropdown {
	  gap: 3px;
		position: relative;
	}
	#main_nav .has-dropdown svg {
	  width: 8px;
	  height: 12px;
	}
	#main_nav .has-dropdown > .dropdown-menu {
		  position: absolute;
		  top: 20px;
		  left: 0;
		list-style:none;
		z-index:115;
		width: max-content;
		padding: 17px 0 0 0;
	}
	.dropdown-menu::before {
		display: block;
		content: "";
		height: 16px;
		width: 100%;
		background-image: url("images/DropDownBoxTop.svg");
		background-repeat: no-repeat;
		background-size: 100% 16px;
	  }
	.dropdown-menu::after {
		display: block;
		content: "";
		height: 16px;
		width: 100%;
		background-image: url("images/DropDownBoxBottom.svg");
		background-repeat: no-repeat;
		background-size: 100% 16px;
	  }
	
	#main_nav .has-dropdown > .dropdown-menu li {
		background:var(--navy);
	}
	#main_nav .has-dropdown > .dropdown-menu li a {
		color:white;
		font-size: 17px;
		padding: 7px 25px;
		transition: 0.3s color;
	}
	#main_nav .has-dropdown > .dropdown-menu li a:hover {
		color:var(--green);
	}
}

@media (min-width: 1280px) {
	.top-header {
		grid-template-rows: auto auto;
		grid-template-columns: 370px 1fr auto;
	}
	#nav_contact,
	.main-header,
	#main_nav, 
	.arc
	{
		z-index:110;
	}
	#nav_contact {
		grid-area: 1 / 3 / 2 / 4;
		grid-template-columns: auto auto;
  		background-color: white;
		grid-gap: 10px;
		align-items: center;
		padding-top: 20px;
		padding-right: 24px;
	}
	.nav_contact_buttons {
		background:var(--navy);
		border-radius: var(--btnRadius);
		padding: 0 15px 0 10px;
		text-transform:uppercase;
		transition: 0.3s transform;
	}
	.nav_contact_buttons:hover {
		transform: translateY(-10px);
	}
	.main-header {
		grid-area: 1 / 1 / 2 / 2;
	}
	#main_nav {
		grid-area: 1 / 2 / 2 / 3;
	}

	.arc {
		grid-area: 2 / 1 / 3 / 4;
	}
}

@media (min-width: 1380px) {
	 .top-header {
		/*grid-template-columns: 460px 1fr auto;*/
		 grid-template-columns: auto minmax(0, 665px) auto;
	  }
	 .cedar_vets_logo {
		width: 415px;
	  }
		  #main_nav > ul {
		margin: 10px 0 32px 0;
	  }
	.main-header {
		width: 100%;
		justify-self: end;
		justify-items: end;
		grid: auto / auto;
		padding-left: var(--sidePadding);
	  }
	  #nav_contact {
    	padding-top: 25px;
		width: 100%;
    	grid: auto / max-content max-content;
	}
}
@media (min-width: 1440px) {
  #nav_contact {
    padding-right: var(--sidePadding);
  }
}

/* CONTACT POP UP */
#surgery_contacts {
	display:none;
	z-index: 110;
	min-width: 100%;
	background-image: url(images/TurqBG.jpg);
	background-size: 175px 175px;
	position: absolute;
	top: 48px;
	height: calc(100vh - 48px);
	overflow-y: auto;
	justify-items: center;
	align-content: start;
	grid-gap: 40px;
}
.surgery-contacts {
	display: grid;
	align-content: start;
	grid-gap: 10px;
	width: 100%;
	margin: 30px 0 0 0;
}
.surgery-contacts > div {
	width: 100%;
	padding: 15px 0 35px 0;
	display: grid;
	grid-gap: 10px;
	justify-content: center;
	align-items: center;
	font-family: var(--hdBold);
	line-height: 1;
	font-size: 30px;
	color: white;
	background-image: url(images/Rule_White25.svg);
	background-repeat: no-repeat;
	background-position-y: bottom;
	background-size: 100% 10px;
	text-align: center;
}
.surgery-contacts dt {
	text-shadow: 0px 0px 6px rgba(0,0,0,0.20);
}
.surgery-contacts dd {
	display: flex;
	margin: 0;
	gap: 15px;
  align-items: center;
}
.surgery-contacts dd a {
	background: #ffffffb5;
	padding: 9px 15px;
	border-radius: var(--btnRadius);
	display: block;
	text-decoration: none;
	color: var(--navy);
	font-family: var(--hdMed);
}
.button_mobile,
.button_contact {
	display:grid;
	grid-column: 2;
	justify-self: end;
	background: none;
	border: none;
	height: 48px;
	width: 48px;
	padding: 0;
	align-items: center;
	cursor: pointer;
}
.button_contact {
	position: absolute;
	top: 10px;
	right: 10px;
	transition: 0.3s rotate;
}
.button_contact:hover {
	rotate: 10deg;
}
.cta_button {
	background: #fff;
	padding: 9px 15px;
	border-radius: 20px;
	display: grid;
	grid-gap:5px;
	text-decoration: none;
	color: var(--navy);
	font-family: var(--hdBlack);
	text-transform:uppercase;
	font-size:25px;
	line-height:1;
	width: fit-content;
	height: fit-content;
	align-items: center;
	grid: auto / auto auto;
	min-height:30px;
	transition: 0.3s background, color 0.3s ease;
}
.cta_button:hover {
	background: var(--navy);
	color: white;
}
#surgery_bookappt {
	margin-bottom: 40px;
}
.surgery-contact-cat, 
.surgery-contact-paw , 
.surgery-contact-heart,
.surgery-contact-phone {
	display:none;
}


@media (min-width: 900px) {
	#surgery_contacts {
		align-content: center;
	}
	.surgery-contacts {
	  grid: auto auto / 1fr 1fr;
		z-index: 101;
		max-width: 1500px;
	}
	.surgery-contacts > div {
  		background-image: none;
	}
	.surgery-contacts dd a {
	  background: none;
		font-size: 48px;
		padding: 0;
	}
	.surgery-contact-phone {
	  display: block;
	}
	.surgery-contact-cat {
	  display: block;
	  position: absolute;
	  bottom: 30px;
	  left: 30px;
	}
	.surgery-contact-paw {
	  display: block;
	  position: absolute;
	  top: 15%;
	  left: 10%;
	}
	.surgery-contact-heart {
	  display: block;
	  position: absolute;
	  bottom: 20%;
	  right: 20%;
	}
	.button_contact {
	  top: 30px;
	  right: 30px;
	}
	.surgery-contacts > div {
	  font-size: 38px;
	}
	.cta_button {
	  padding: 9px 25px;
	  border-radius: 40px;
	  grid-gap: 8px;
	  font-size: 35px;
	  min-height: 65px;
		z-index: 101;
	}
	.cta_button img {
	  width: 30px;
	}
}
@media (min-width: 1280px) {
	#surgery_contacts {
		z-index:100;
		top: 100px;
		  height: calc(100vh - 100px);
	}
	.button_contact {
	  top: 70px;
	  right: 50px;
	  height: 50px;
	  width: 50px;
		
	}
	.button_contact img {
	  width: 50px;
	  height: 50px;
	}
}
@media (min-width: 1380px) {
  #surgery_contacts {
    z-index: 100;
    top: 125px;
    height: calc(100vh - 125px);
  }
}

/* FOOTER */

footer {
	display:grid;
	min-width: 100%;
	background-image: url(images/NavyBG.jpg);
	background-size: 175px 175px;
	padding: 80px 20px;
	justify-items: center;
  text-align: center;
	grid-gap:50px;
}
.social-nav p,
footer h3
{
 font-family: var(--hdBold);
	font-size: 27px;
  line-height: 1;
	color:white;
	margin:0;
}
footer h3 {
	text-transform:uppercase;
	color:var(--turq);
}
.social-nav {
  display: grid;
  grid-gap: 20px;
}
.social-nav ul {
  display: flex;
  list-style: none;
  gap: 15px;
  padding: 0;
  margin: 0;
}
.social-nav ul li a img {
  transition: transform 0.3s ease;
}
.social-nav ul li a:hover img {
  transform:scale(108%)
}
footer .surgeries,
.surgeries.locations {
  display: grid;
  grid-gap: 50px;

}
.surgeries.locations {
  background-image: url("images/NeutralBG.jpg");
  background-size: 175px 175px;
	padding:var(--sidePadding);
	border-radius: 30px;
}
footer .surgery,
.surgeries.locations .surgery {
  display: grid;
  grid-gap: 15px;
	text-align: center;
  justify-items: center;
}
footer .surgery .phone {
  color:white;
	font-family: var(--hdMed);
	font-size:35px;
	text-decoration:none;
}
.surgeries.locations .surgery .phone {
  color:var(--turq);
	font-family: var(--hdMed);
	font-size:35px;
	text-decoration:none;
}
.accreditations {
  display: grid;
  grid-gap: 20px;
}
.legal-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
	display:grid;
	grid-gap:10px;
}
.legal-nav ul li a {
  color:white;
	text-decoration:none;
	border-bottom:1px solid var(--turq);
	font-size:14px;
	
}
.footer-meta {
  display:grid;
	grid-gap:5px;
}
.footer-meta p {
  margin:0;
}
footer small {
  font-size: 12px;
  color: white;
}
.footer-logo,
.footer-rule {
	display:none;
}
#footer_recruit {
}

@media (min-width: 750px) {
	.footer-rule {
		display:block;
		grid-area: 2 / 1 / 3 / 3;
	}
	.footer-logo {
		display:block;
		width: 260px;
	}
	footer {
	  grid: auto / 1fr 1fr;
		padding: 35px 0;
    grid-gap: 20px;
		justify-items: start;
	}
	footer .surgeries {
	  grid-area: 3 / 1 / 4 / 3;
		grid: auto / 1fr 1fr;
		width: 100%;
		margin: 30px 0;
		grid-column-gap: 30px;
		grid-row-gap: 50px;
	}
	.surgeries.locations {
		grid: auto / 1fr 1fr;
		width: 100%;
		margin: 30px 0;
		grid-column-gap: 30px;
		grid-row-gap: 50px;
	}
	.accreditations {
	  grid-area: 4 / 2 / 5 / 3;
	  align-items: center;
		grid: auto / auto auto;
    justify-self: end;
		padding-right:var(--sidePadding);
	}
	.footer-meta {
	  grid-area: 4 / 1 / 6 / 2;
		align-self: start;
    text-align: left;
		padding-left:var(--sidePadding);
		grid-gap: 20px;
	}
	.social-nav {
		width: 100%;
		grid: auto / auto max-content;
	  align-items: center;
		justify-self: end;
		padding-right:var(--sidePadding);
		justify-items: end;
	}
	.legal-nav {
	  justify-self: end;
		padding-right:var(--sidePadding);
		align-self: start;
	}
	#footer_recruit {
		padding-left:var(--sidePadding);
	}

}
@media (min-width: 900px) {
  .footer-logo {
    width: 360px;
  }
}
@media (min-width: 1050px) {
  footer .surgeries {
    grid-area: 3 / 1 / 4 / 3;
    grid: auto / 1fr 1fr 1fr 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 50px;
	  padding-left:var(--sidePadding);
	  padding-right:var(--sidePadding);
  }
  .surgeries.locations {
    grid: auto / 1fr 1fr 1fr 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 50px;
	  
  }
}
@media (min-width: 1380px) {
	#footer_recruit {
	  width: 100%;
	  max-width: 735px;
	  justify-self: end;
	  display: flex;
	}
  .social-nav {
  max-width: 735px;
  justify-self: start;
  justify-items: end;
}
	footer .surgeries {
    max-width: 1490px;
	  justify-self: center;
	  width: 100%;
  }
	.surgeries.locations {
    max-width: 1490px;
	  justify-self: center;
	  width: 100%;
  }
	.footer-meta {
	  width: 100%;
	  max-width: 735px;
	  justify-self: end;
	}
	.accreditations{
	  max-width: 735px;
	  justify-self: start;
	  justify-items: end;
	  width: 100%;
	  grid: auto / auto max-content;

	}
	.legal-nav {
		max-width: 735px;
  justify-self: start;
  width: 100%;
  justify-items: end;
  display: grid;
	}
	
	
}
/* FOOTER */




/* HOME HERO */
.hero{
  display: grid;
	text-align:center;
	grid-gap: 18px;
	padding-bottom: 60px;
	/*padding-bottom: var(--contentPadding);
	min-height: calc(100vh - 128px);*/
}
.hero-banner {
	position:relative;
	z-index: 0;
	display: grid;
  justify-items: center;
	padding-top: 40px;
	grid-gap: 20px;
}
.hero-content,
.hero-image-wrapper{
	position:relative;
	z-index: 10;
}
.hero-image-wrapper {
  margin: 0;
}
.hero-image-wrapper > img {
	padding-left: var(--sidePadding);
	padding-right: var(--sidePadding);
  width: 100%;
	max-width: 500px;
}
.hero-content{
	justify-items: center;
	grid-gap:10px;
	display:grid;
}
.hero-heading{
font-family: var(--hdBold);
  line-height: 1;
  font-size: clamp(39px, 5vw, 86px);
  color: white;
	margin:0;
  text-shadow: 0px 0px 6px rgba(0,0,0,0.20);
}
.hero-subheading {
	font-family: var(--hdMed);
  line-height: 1;
	font-size: clamp(20px, 2vw, 29px);
	margin:0;
  color: var(--navy);
	text-transform:uppercase;
}
.hero-subheading strong {
	font-weight: 300;
}
.hero-rating {
  display: grid;
  grid: auto / max-content max-content max-content;
  align-items: center;
  width: auto;
  grid-gap: 10px;
}
.hero-rating-score {
  color: var(--navy);
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 600;
}
.hero-image {
	filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.2));
}
.hero-background {
  background-image: url(images/GreenBG.jpg);
  background-size: 175px 175px;
  position: absolute;
  width: 100%;
  height: 95%;
	top: 0;
  left: 0;
  z-index: 0;
}
.hero-background > .paw-icon {
  display: block;
  position: absolute;
  top: 100px;
  right: 35px;
	transform:rotate(20deg)
}
.hero-background > .heart-icon {
  display: block;
  position: absolute;
  top: 160px;
  left: 35px;
	transform:rotate(-40deg)
}
.hero-background::before {
	content:"";
  background-image: url(images/HeroArc-Top.svg);
 background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  width: 100%;
  height: 52px;
	top: 0;
  left: 0;
  z-index: 5;
	display:none;
}
.hero-background::after {
	content:"";
  background-image: url(images/HeroArc-Bottom-Mobile.svg);
 background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  width: 100%;
  height: 50px;
	bottom: 0;
  left: 0;
  z-index: 5;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
padding-left: var(--contentPadding);
  padding-right: var(--contentPadding);
  align-items: center;
  justify-content: center;
}
.hero-announcement {
  
  margin-left: var(--contentPadding);
  margin-right: var(--contentPadding);
  display: grid;
	align-content: start;
}
.hero-announcement::before {
    display: block;
    content: "";
    height: 10px;
    width: 100%;
    background-image: url("images/DropDownBoxTop.svg");
    background-repeat: no-repeat;
    background-size: 100% 10px;
  }
.hero-announcement::after {
    display: block;
    content: "";
    height: 10px;
    width: 100%;
    background-image: url("images/DropDownBoxBottom.svg");
    background-repeat: no-repeat;
    background-size: 100% 10px;
  }
.hero-announcement-content {
	padding:0 10px;
	display:grid;
	background: var(--navy);
  grid: auto / min-content auto;
  align-items: center;
	grid-gap: 2px;
	text-decoration:none;
}
.hero-announcement-text {
	
  font-family: var(--hdBold);
  font-size: 19px;
	font-size: clamp(19px, 3vw, 29px);
  line-height: 1;
  margin: 0;
  color: white;
}
.hero-announcement-text > strong {
  font-family: var(--hdBlack);

}
.hero-countdown-number {
	background-image: url(images/Number_bg_Green.svg);
 background-repeat: no-repeat;
  background-size: 100% 100%;
	padding:5px;
	color: white;
	text-shadow: 0px 0px 2px rgba(0,0,0,0.20);
	min-width: 50px;
}
.hero-heading,
	.hero-subheading{
		display: grid;
	}
.em_dtop,
.hero-doodlestar {
	display:none;
}
@media (min-width: 550px) {
	.hero-heading,
	.hero-subheading{
		display: block;
	}
	.hero-banner {
	  padding-top: 60px;
	}
	.hero-background > .paw-icon {
		  top: 70px;
	}
	.hero-background > .heart-icon {
		  top: 130px;
	}
}
@media (min-width: 1100px) {
	.hero {
  grid: auto / 1fr 1fr;

}
	  .hero-banner {
    padding-top: 0px;
		  grid: auto / 1fr 1fr;
		  align-items: center;
		  grid-area: 1 / 1 / 2 / 3;
		  max-height: 570px;
  }
	.hero-content {
  align-content: center;
		padding-left: var(--contentPadding);
		justify-items: start;
  grid-gap: 20px;
}
	.hero-heading {
		width:100%;
		display: grid;
		text-align: left;
  font-size: clamp(56px, 5vw, 86px);
	}
	.hero-heading strong, 
	.hero-subheading, 
	.hero-rating {
  padding-left: 50px;
}
	.hero-image-wrapper > img {
	  max-width: unset;
	}
	.hero-background::before {
		display:block;
	}
	.hero-background::after {
	  background-image: url(images/HeroArc-Bottom.svg);
		height: 52px;
	}
	  .hero-background > .paw-icon {
		top: 80px;
    left: 50px;
    width: 30px;
	  }
	.hero-background > .heart-icon {
  top: unset;
  left: 47%;
  transform: rotate(00deg);
  bottom: 130px;
  width: 30px;
}
	.hero-star {
		width:30px;
	}
	.hero-rating-score {
	  font-size: 16px;
	}
	.hero-rating > img {
  width: 40px;
  height: 40px;
	}
	.hero-actions {
	  gap: 20px;
	  align-self: start;
	}
	.em_dtop {
		display:block;
	}
	.em_mobile {
		display:none;
	}
	.hero-announcement-text {
	  color: var(--navy);
	}
	.hero-announcement-content {
	  background: none;
		grid: auto / auto;
	}
	.hero-announcement::before, 
	.hero-announcement::after {
	  display: none;
	}
	.hero-announcement-text {
	  font-size:35px;
		display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px;

	}
	.hero-announcement-text > strong {
	  text-transform: uppercase;
	}
	.hero-announcement-countdown {
	  display: flex;
	  flex-wrap: wrap;
	  align-items: center;
	  gap: 5px;
	}
	.hero-doodlestar {
		display:inline;
	}
	.hero-announcement-month {
	  padding-top: 10px;
	}
	.hero-countdown-number {
	  padding: 10px;
	  text-shadow: 0px 0px 3px rgba(0,0,0,0.40);
	}
}

@media (min-width: 1300px) {
	  .hero-announcement-text {
    font-size: 40px;
	}
}
@media (min-width: 1380px) {
	.hero-image-wrapper {
	  width: 100%;
	  max-width: 745px;
	  justify-self: start;
	}
	.hero-content {
	  width: 100%;
	  max-width: 715px;
	  justify-self: end;
	}
	.hero-actions {
	  width: 100%;
	  max-width: 720px;
	  justify-self: end;
	}
	.hero-announcement {
	  width: 100%;
	  max-width: 665px;
	  align-self: start;
	}

}
/* HOME HERO */

/* BUTTONS */
.cedars_button,
.wp-block-button__link,
.button_list li a {
  background: #fff;
  padding: 9px 15px;
  border-radius: 20px;
  display: grid;
  grid-gap: 5px;
  text-decoration: none;
  color: var(--navy);
  font-family: var(--hdBlack);
  text-transform: uppercase;
  font-size: 21px;
  line-height: 1;
  width: fit-content;
  height: fit-content;
  align-items: center;
  grid: auto / auto auto;
  min-height: 44px;
  transition: 0.3s transform ease;
	border:none;
	cursor: pointer;
}
.cedars_button.callus {
    cursor:pointer;
  }
.cedars_button:hover,
.wp-block-button__link:hover{
  transform: translatey(-6px);
}
.cedars_button.white {
  background: white;
	color: var(--navy);
}
.cedars_button.green {
  background: var(--green);
	color: white;
	text-shadow: 0px 0px 3px rgba(0,0,0,0.20);
}
.cedars_button.turq {
  background: var(--turq);
	color: white;
	text-shadow: 0px 0px 3px rgba(0,0,0,0.20);
}
.cedars_button.white {
  background: white;
	color: var(--navy);
	text-shadow: none;
}
.cedars_button.navy {
  background: var(--navy);
	color: white;
}
.surgery .cedars_button {
	  padding: 9px 15px;
	  border-radius: 20px;
	  grid-gap: 5px;
	  font-size: 21px;
	}

.button_list {
  list-style: none;
  margin-top: 30px;
	display:flex;
	flex-direction:column;
	gap: 20px;
	padding-left: 0;

}
.button_list li a:after {
	content:"";
  background-image: url(images/ArrowDouble.svg);
	background-size: 25px;
	background-repeat:no-repeat;
	display: block;
  width: 25px;
  height: 16px;
}
@media (min-width: 1100px) {
	.cedars_button,
.wp-block-button__link,
.button_list li a {
	  padding: 12px 16px;
	  border-radius: 25px;
	  grid-gap: 5px;
	  font-size: 29px;
	}	
	.cedars_button img {
	  width:25px;
	}
	.cedars_button.callus img {
		width:35px;
	}
	
}
@media (min-width: 1300px) {
	.cedars_button {
	  padding: 15px 20px;
	  border-radius: 30px;
	  grid-gap: 5px;
	  font-size: 34px;
	}	
	
	.cedars_button img {
	  width:30px;
	}
	.cedars_button.callus img {
		width:40px;
	}

}


/* SVG FILLS */
.greenarrow .icon_fill {
	fill: var(--green);
}
.turqarrow .icon_fill {
	fill: var(--turq);
}
.navyqarrow .icon_fill {
	fill: var(--navy);
}
.whiteqarrow .icon_fill {
	fill: #FFFFFF;
}

/*THREE PILLARS*/
.three-pillars {
  list-style: none;
  padding: 0;
  margin: 0;
display: flex;
  gap: 20px;
  flex-direction: column;
align-items: center;
	justify-content: center;
}
.three-pillars li {
  display: grid;
  position: relative;
	flex-basis:100%;
	max-width: 450px;
}
.three-pillars li > img {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.three-pillars article {
  padding: 70px 30px 40px 30px;
  background-image: url("images/RectBack1.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 40px;
	display: grid;
  grid-gap: 10px;
	align-items: end;
}
.three-pillars .collar article {
	margin-top: 20px;
}
.three-pillars h3 {
  line-height: 1.1;
  text-transform: uppercase;
}
.three-pillars p {
  margin:0;
}
@media (min-width: 900px) {
	.three-pillars {
	 flex-direction: row;
		flex-wrap:wrap;
		align-items: unset;
	}
	.three-pillars li {
  		flex-basis:45%;
	}
	.three-pillars article {
  		padding: 100px 60px 60px 60px;
    	margin-top: 45px;
	}
	.three-pillars article .collar {
    	margin-top: 35px;
	}
	.tree img {
		width:110px;
	}
	.shield img {
		width:100px;
	}
	.collar img {
		width:145px;
	}
}
@media (min-width: 1280px) {
	.three-pillars li {
		flex: 1 1 0px;
	  }
	.three-pillars .collar article {
	  margin-top: 48px;
	  padding: 80px 50px 40px 50px;
	}
}

/*INDEPENDENCE MATTERS*/
.charlie-quote {
	display:grid;
	grid-gap:20px;
}
.charlie-quote > figcaption {
	display:grid;
	grid-gap:5px;
	text-align: left;
}
.charlie-quote > figcaption > cite {
	font-family:var(--hdBold);
	color:var(--navy);
	font-style:normal;
	font-size:18px;
}
.charlie-quote > figcaption > span {
	font-family:var(--hdMed);
	color:var(--navy);
	font-style:normal;
	font-size:14px;
	text-transform:uppercase;
}
#independence .cedarshapes.paw {
  top: 40px;
  left: 40px;
}
#independence .cedarshapes.bone {
  bottom: 70px;
  right: 40px;
}
@media (min-width: 900px) {
	#independence .cedarshapes.paw {
	  top: 0;
	  left: 20px;
	}
	#independence .cedarshapes.bone {
	  bottom: 40px;
	  right: 40px;
	}
}
@media (min-width: 1280px) {
 #independence .cedarshapes.paw {
    top: -40px;
    left: -40px;
  }
}

/* LIFETIMECARE CLUB */

#lcc .float-right {
  display: block;
  width: 100%;
  max-width: 230px;
}
#lcc h4 {
  margin: 30px 0 8px 0;
}
#lcc .content-inner-hm {
  grid-gap: 40px;
	justify-items: center;
}
#lcc article {
  width: 100%;
}
@media (min-width: 700px) {
	#lcc .content-inner-hm {
	  text-align: left;
	  justify-items: start;
		padding-left: 50px;
    padding-right: 50px;
	}
}
@media (min-width: 1280px) {
	#lcc .content-inner-hm {
		padding-left: 80px;
    	padding-right: 80px;
	}
	#lcc .float-right {
	  max-width: 300px;
	}
}
/* LIFETIMECARE CLUB */

/* SURGERY MAP */

#locations_map {
  position:relative;
}
#locations_map .content-inner-hm {
  grid-gap: 20px;
	justify-items: center;
}
#locations_map .cedarshapes.heart {
	width:21px;
	transform: rotate(-30deg);
  top: 10%;
  left: 20%;
}
#locations_map .cedarshapes.paw {
	width:23px;
	transform: rotate(30deg);
  bottom: 10%;
  right: 10%;
}
@media (min-width: 900px) {
	#locations_map .cedarshapes.heart {
		width:36px;
	}
	#locations_map .cedarshapes.paw {
		width:36px;
		right: 20%;
	}
}
/* ══════════════════════════════════════════════════════════
   MAP WRAPPER
══════════════════════════════════════════════════════════ */
.cv-map-wrap {
  position: relative;
  width: 100%;
 /*max-width: 1100px;*/
  margin: 30px auto 30px auto;
  border-radius: var(--radius-map);
  overflow: hidden;
  box-shadow: 0 3px 6px rgba(0,0,0,.22);
}

#cv-map {
  width: 100%;
  height: 400px;   /* small screens */
  display: block;
}

@media (min-width: 640px)  { #cv-map { height: 480px; } }
@media (min-width: 1024px) { #cv-map { height: 560px; } }

/* ── Loading overlay ───────────────────────────────────── */
.cv-map-loader {
  position: absolute;
  inset: 0;
  background: #c5e8b0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  transition: opacity .4s ease;
}
.cv-map-loader.hidden {
  opacity: 0;
  pointer-events: none;
}
.cv-spinner {
  width: 42px; height: 42px;
  border: 4px solid rgba(255,255,255,.4);
  border-top-color: white;
  border-radius: 50%;
  animation: cv-spin .75s linear infinite;
}
@keyframes cv-spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════
   INFO CARD  (hover + click)
══════════════════════════════════════════════════════════ */
.cv-info-card {
      position: absolute;
      /* top/left set dynamically by JS */
      top: 0;
      left: 0;
      width: 270px;
      background: white;
      border-radius: var(--radius-card);
      box-shadow: 0 6px 30px rgba(0,0,0,.20);
      overflow: hidden;
      z-index: 10;
      pointer-events: none;

      /* hidden state — scale from marker outward */
      opacity: 0;
      transform: scale(.92);
      transform-origin: top left;   /* updated by JS to match flip direction */
      transition: opacity .2s ease, transform .2s ease;
    }
.cv-info-card.visible {
  opacity: 1;
      transform: scale(1);
      pointer-events: auto;
}
/* Tail / pointer triangle connecting card to marker */
    .cv-info-card::before {
      content: "";
      position: absolute;
      top: 22px;
      width: 0; height: 0;
      border-top: 9px solid transparent;
      border-bottom: 9px solid transparent;
      z-index: 1;
    }
    /* Default: tail on left side (card sits to the right of marker) */
    .cv-info-card.tail-left::before {
      left: -9px;
      border-right: 9px solid white;
    }
    /* Flipped: tail on right side (card sits to the left of marker) */
    .cv-info-card.tail-right::before {
      right: -9px;
      left: auto;
      border-right: none;
      border-left: 9px solid white;
    }


/* Photo */
.cv-info-card__photo {
  width: 100%;
  height: 148px;
  object-fit: cover;
  display: block;
}

.cv-info-card__placeholder {
  width: 100%;
  height: 148px;
  background: #EEEFEC;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cv-info-card__placeholder svg { width: 56px; opacity: .45; }

/* Body */
.cv-info-card__body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 14px 15px;
}
.cv-info-card__text { 
	flex: 1; 
	min-width: 0;
	text-align:left;
}

.cv-info-card__name {
	font-family:var(--hdBold);
  font-size: 16px;
  color: var(--navy);
  text-transform: uppercase;
  margin-bottom: 5px;
}
.cv-info-card__address,
.cv-info-card__phone,
.cv-info-card__hours {
  font-size: 12px;
  color: #444;
  line-height: 1.45;
}
.cv-info-card__phone,
.cv-info-card__hours { margin-top: 3px; }

/* Arrow button */
.cv-info-card__arrow {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--turq);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  text-decoration: none;
  transition: background .18s;
}
.cv-info-card__arrow:hover { background: var(--navy); }
.cv-info-card__arrow svg {
  width: 11px;
  height: 15px;
}
/* SURGERY MAP */

/* GOOGLE REVIEWS */

#google_reviews {
  position: relative;
}
#google_reviews h2 {
  margin: 0 var(--contentPadding) 40px var(--contentPadding);
}
.cv-reviews {
  background-image: url(images/NeutralBG.jpg);
	background-size: 175px 175px;
  padding: 0;
  overflow: hidden;
}
.cv-reviews__inner {
	  max-width: 1490px;
	  margin: 0 auto;
	  padding:  var(--tbPadding) 0;
	  text-align: center;
  }

    /* CAROUSEL TRACK + VIEWPORT */

    .cv-carousel {
      position: relative;
    }

    /* Overflow window */
    .cv-carousel__viewport {
      overflow: hidden;
      /* Fade edges on desktop */
      -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 5%,
        black 88%,
        transparent 100%
      );
      mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 5%,
        black 88%,
        transparent 100%
      );
    }

    

    /* Sliding track */
    .cv-carousel__track {
      display: flex;
      gap: 20px;
      transition: transform .42s cubic-bezier(.4,0,.2,1);
      will-change: transform;
		margin-left: var(--sidePadding);
		margin-right: var(--sidePadding);
		padding-left: 15px;
    }

    /* CARDS */

    /*
      Mobile:  1 card fills viewport
      Desktop: 3.5 cards visible  → each card = (100% - gaps) / 3.5
    */
    .cv-card {
      flex: 0 0 calc(100% - 0px);   /* mobile: 1 card */
      background: white;
      border-radius: 20px;
      box-shadow: 0 3px 18px rgba(0,0,0,.10);
      padding: 26px 24px 22px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      /* Equal height via flex column + min-height */
      min-height: 240px;
		text-align: left;
    }



    /* Name */
    .cv-card__name {
      font-size: 20px;
      text-transform: uppercase;
      color: var(--green);
		font-family: var(--hdBold);
    }

	#cvTrack div:nth-child(2n) > .cv-card__name {
		color: var(--turq);
	}

    /* Review text area — grows to fill available space */
    .cv-card__body {
      flex: 1;
      font-size: 14px;
      line-height: 1.6;
    }

    .cv-card__excerpt { display: inline; }

    .cv-card__more-btn {
      background: none;
      border: none;
      cursor: pointer;
      font-weight: 700;
      color: var(--navy);
      padding: 0 0 0 4px;
      text-decoration: underline;
      text-underline-offset: 2px;
      white-space: nowrap;
    }
    .cv-card__more-btn:hover { color: var(--navy); }

    /* Stars */
    .cv-card__stars {
      display: flex;
      margin-top: auto;
    }
	
	#cvTrack div .cv-card__stars .rate_star {
		width:22px;
		height:22px;
		background-image: url(images/Star1-filled.svg);
		background-repeat: no-repeat;
		background-size: 20px 20px;
	}
	#cvTrack div:nth-child(2n) > .cv-card__stars .rate_star {
	  background-image: url(images/Star1Turq-filled.svg);
	}

	#cvTrack div .cv-card__stars .rate_star.star-on:nth-of-type(2) { 
		background-image: url(images/Star2-filled.svg);
	}
	#cvTrack div:nth-child(2n) > .cv-card__stars .rate_star.star-on:nth-of-type(2) { 
		background-image: url(images/Star2Turq-filled.svg);
	}

	#cvTrack div .cv-card__stars .rate_star.star-on:nth-of-type(3) { 
		background-image: url(images/Star3-filled.svg);
	}
	#cvTrack div:nth-child(2n) > .cv-card__stars .rate_star.star-on:nth-of-type(3) { 
		background-image: url(images/Star3Turq-filled.svg);
	}


	#cvTrack div .cv-card__stars .rate_star.star-on:nth-of-type(4) { 
		background-image: url(images/Star4-filled.svg);
	}
	#cvTrack div:nth-child(2n) > .cv-card__stars .rate_star.star-on:nth-of-type(4) { 
		background-image: url(images/Star4Turq-filled.svg);
	}


	#cvTrack div .cv-card__stars .rate_star.star-on:nth-of-type(5) { 
		background-image: url(images/Star5-filled.svg);
	}
	#cvTrack div:nth-child(2n) > .cv-card__stars .rate_star.star-on:nth-of-type(5) { 
		background-image: url(images/Star5Turq-filled.svg);
	}

	#cvTrack div .cv-card__stars .rate_star.star-off {
		width:22px;
		height:22px;
		background-image: url(images/Star5-empty.svg);
		background-repeat: no-repeat;
		background-size: 20px 20px;
	}
    /* NAV BUTTONS  (green circles, left / right of carousel) */
    .cv-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: var(--green);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 3px 14px rgba(0,0,0,.18);
      z-index: 10;
      transition: background .18s, transform .18s;
    }
    .cv-nav:hover { background: var(--navy); }
    .cv-nav:disabled { opacity: .4; cursor: default; transform: translateY(-50%); }

    .cv-nav svg {
      width: 14px; height: 21px;
    }

    .cv-nav--prev { left: 4px; }
      .cv-nav--next { right: 4px; }
.cv-nav--prev svg { transform:rotate(180deg); }


    /* FOOTER  — avg rating + Google logo + CTA */

    .cv-reviews__footer {
      margin-top: 36px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    .cv-avg {
      display: flex;
      align-items: center;
      gap: 10px;
		margin-bottom: 25px;
    }

    .cv-avg__stars {
      display: flex;
		gap: 3px;
    }

    .cv-avg__stars .rate_star {
		width:25px;
		height:25px;
		background-image: url(images/Star1.svg);
		background-repeat: no-repeat;
		background-size: 25px 25px;
	}

	.cv-avg__stars .rate_star.star-off { 
		background-image: url(images/Star5-emptyDk.svg);
	}	

	.cv-avg__stars .rate_star.star-half {
	  background-image: url(images/Star-qtr.svg);
	  background-size: 27px 27px;
	  width: 27px;
	  height: 27px;
	}
	.cv-avg__stars .rate_star.star-on:nth-of-type(2) { 
		background-image: url(images/Star2.svg);
	}	
	.cv-avg__stars .rate_star.star-on:nth-of-type(3) { 
		background-image: url(images/Star3.svg);
	}	
	.cv-avg__stars .rate_star.star-on:nth-of-type(4) { 
		background-image: url(images/Star4.svg);
	}	
	.cv-avg__stars .rate_star.star-on:nth-of-type(5) { 
		background-image: url(images/Star1.svg);
	}	

    .cv-avg__label {
      font-size: 1rem;
      font-weight: 700;
      color: var(--navy);
    }

    /* Google "G" logo — inline SVG replica */
    .cv-avg__google {
      width: 32px;
      height: 32px;
    }
@media (max-width: 699px) {
      .cv-carousel__viewport {
        -webkit-mask-image: none;
        mask-image: none;
      }
    }
	    @media (min-width: 700px) {
			.cv-reviews__inner {
		  padding-left: var(--sidePadding);
		  padding-right: var(--sidePadding);
		}
      .cv-card {
        /* (viewport - gaps) / 3.5  → approximately 27% */
        flex: 0 0 calc((100% - 3 * 20px) / 2.5);
      }
    }


    @media (min-width: 1200px) {
		#google_reviews h2 {
		  margin: 0 var(--contentPadding) 70px var(--contentPadding);
		}
		.cv-reviews__footer {
		  margin-top: 60px;
		}
      .cv-card {
        /* (viewport - gaps) / 3.5  → approximately 27% */
        flex: 0 0 calc((100% - 3 * 20px) / 3.5);
      }
		.cv-avg__stars .rate_star {
		  width: 30px;
		  height: 30px;
		  background-size: 30px 30px;
		}
		.cv-avg__stars .rate_star.star-half {
		  background-size: 32px 32px;
		  width: 32px;
		  height: 32px;
		}
		.cv-avg > img {
		  width: 30px;
		  height: 30px;
		}
		.cv-avg {
		  margin-bottom: 40px;
		}
    }


	
/* GOOGLE REVIEWS */
	
/* COMMUNTITY */
#community .content-inner-hm {
  align-items: center;
  justify-items: center;
}
.community-buttons {
  display: flex;
  gap: 15px;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 700px) {
	.community-buttons {
	  gap: 20px;
	  flex-direction: row;
	}
}
/* COMMUNTITY */

/* FACILITIES */
.facilities {
	display:grid;
	width:100%;
	gap: var(--sidePadding);
}
.facilities > .facility {
	display:grid;
	width:100%;
	align-content: start;
}
.facilities > .facility .facimg {
  width: 100%;
  border-radius: var(--radius-card);
	margin-bottom: 20px;
}
@media (min-width: 700px) {
	.facilities {
		grid: auto / 1fr 1fr;
	}
}
 @media (min-width: 1280px) {
	 .facilities {
		grid: auto / 1fr 1fr 1fr;
	}
}
/* FACILITIES */


/* LOCATION */
/* Hero Section */
.location-template .hero-background {
  background-image: url("images/TurqBG.jpg");
}
.location-template .hero-heading {
  font-size: clamp(36px, 5vw, 68px);
}
.location-template .hero-background > .heart-icon,
.location-template .hero-background > .paw-icon {
  top: 80px;
}
.location-template .hero-announcement {
  align-content: center;
	grid-gap: 10px;
}
.location-template .hero-announcement p {
  font-family: var(--hdMed);
	color:var(--navy);
	font-size:15px;
}

.location-template .hero-announcement::before, 
.location-template .hero-announcement::after {
  display: none;
}
.location-template .hero-announcement .hero-rating {
  justify-self: center;
}

@media (min-width: 550px) {
	.location-template .hero-background > .heart-icon, 
	.location-template .hero-background > .paw-icon {
	  top: 120px;
	}
}
@media (min-width: 1100px) {
  .location-template .hero-background > .paw-icon {
    top: 60px;
  }
	.location-template .hero-background > .heart-icon {
		top: unset;
	  bottom: 60px;
	}
	.location-template .hero-announcement {
	  padding: 0 20px;
		align-self: center;
	}
	.location-template .hero-announcement p {
	  font-size: 18px;
	}
}
@media (min-width: 1280px) {
  .location-template .hero-announcement p {
	  font-size: 20px;
	}
}
/* Map and Hours*/
.location-contact {
  display: grid;
  width: 100%;
}
.location-template #cv-map {
  height: 350px;
}
.location-contact-surgery {
  display: grid;
  text-align: left;
  grid-gap: 15px;
}
.location-contact-surgery h3 {
  color: white;
  text-shadow: 0px 0px 4px rgba(0,0,0,0.20);
  text-transform: uppercase;
	margin-top:15px;
}
.location-contact-surgery address, 
.location-contact-surgery p {
  font-family: var(--hdMed);
	color:var(--navy);
	font-size:20px;
	font-style:normal;
}
.location-contact-phonemail {
	display:grid;
	grid: auto / 36px 1fr;
	grid-gap: 20px;
  align-items: center;
}
.location-contact-phonemail img {
	width:36px;
	justify-self:center;
}
.location-contact-phonemail.mailicon img {
	width:30px;
}
.location-contact-phonemail a {
	text-decoration:none;
}
.opening-hours {
  display: grid;
  gap: 0.5rem;
}

.opening-hours > div {
  display: grid;
	grid: auto / 90px 1fr;
  gap: 10px;
	color: var(--navy);
	font-size:17px;
}

.opening-hours dt,
.opening-hours dd {
  font-weight: 600;
}

.opening-hours dd {
  margin: 0;
}
.white-announcement {
	width:100%;
  display: grid;
  align-content: start;
}
.location-template .white-announcement {
	margin-top:20px;
	max-width: 400px;
}
.white-announcement-content {
  padding: 0px 10px;
  display: grid;
  background: white;
  grid: auto / min-content auto;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}
.white-announcement::before {
  display: block;
  content: "";
  height: 10px;
  width: 100%;
  background-image: url("images/DropDownBoxTopWhite.svg");
  background-repeat: no-repeat;
  background-size: 100% 10px;
}
.white-announcement::after {
  display: block;
  content: "";
  height: 10px;
  width: 100%;
  background-image: url("images/DropDownBoxBottomWhite.svg");
  background-repeat: no-repeat;
  background-size: 100% 10px;
}
.white-announcement .white-announcement-text {
  font-family: var(--hdMed);
  color: var(--navy);
  font-size: 16px;
  text-transform: uppercase;
  text-align: center;
}
.location-rule {
  border: none;
  margin: 10px 0;
  height: 23px;
  width: 100%;
  display: grid;
  background-image: url("images/Rule_White25.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.surgery-intel {
  display: grid;
  align-items: center;
  justify-items: center;
  grid-gap: 30px;
}
.surgery-intel-text {
  display: grid;
  align-items: center;
  justify-items: center;
  grid-gap: 15px;
	color: white;
	align-self: center;
}
.surgery-intel-text p {
  font-family: var(--hdMed);
  font-size: 16px;
  line-height: 1.2;
}
.surgery-intel-text h5 {
  color: white;
	text-shadow: 0px 0px 4px rgba(0,0,0,0.20);
	margin-top:10px;
}
.location-template #locations_map .cedarshapes.paw {
  bottom: unset;
top: 35%;
  right: 10%;
}
@media (min-width: 900px) {
	
  .location-contact {
	  grid: auto / 1fr 1fr;
	  column-gap: 70px;
	  row-gap: 20px;
    align-items: start;
	}
	.location-template #locations-heading {
	  grid-area: 1 / 2 / 2 / 3;
		text-align: left;
	}
	.location-contact-surgery {
	  grid-area: 2 / 2 / 3 / 3;

	}
	.location-template .cv-map-wrap {
	  	grid-area: 1 / 1 / 3 / 2;
		margin: 0 auto;
    	height: 100%;
	}
	.location-template #cv-map {
	  height: 100%;
	}
	.location-rule {
	  margin: 30px 0;
	}
	.surgery-intel {
	  grid: auto / min-content 1fr min-content;
		align-items: start;
	}
	.surgery-intel-text {
	  grid-area: 1 / 2 / 2 / 3;
		color:var(--navy);
	}
	.location-template #locations_map .cedarshapes.paw {
	  top: 25%;
	}
}
@media (min-width: 1280px) {
	.location-rule {
	  margin: 50px 0;
	}
}

/* what makes us diff */
.location-template .three-pillars article {
  padding: 70px 0px 0px 0px;
  background-image: none;
  margin-top: 40px;
  display: grid;
  grid-gap: 10px;
  align-items: end;
}
.location-template .three-pillars h5 {
  font-family: var(--hdMed);
  font-size: 16px;
  line-height: 1.2;
  text-transform: none;
  color: var(--navy);
}
.location-template .three-pillars article .WMD-list {
  padding: 40px 30px;
  background-image: url("images/RectBack1Grey.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: grid;
  grid-gap: 10px;
  align-items: end;
}
.WMD-list {
  text-align: left;
  font-size: 14px;
  display: grid;
  grid-gap: 8px;
}
.WMD-list ul {
  display: grid;
  grid-gap: 8px;
}
.WMD-list li {
  display: grid;
  grid: auto / 18px 1fr;
  line-height: 1.3;
  grid-gap: 5px;
}
.WMD-list li::before {
  content: "";
  background-image: url("images/starGreen.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 18px;
  height: 18px;
  margin-top: 0.1rem;
  display: block;
}
.WMD-list li:nth-of-type(3n+1)::before {
  rotate: 90deg;
}
.WMD-list li:nth-of-type(3n+2)::before {
  rotate: 180deg;
}
@media (min-width: 900px) {
	.location-template .three-pillars {
  gap: 40px;
}
  .location-template .three-pillars article {
    padding: 100px 0 0 0;
    margin-top: 45px;
  }
	.WMD-list {
	  font-size: 15px;
	  grid-gap: 10px;
	}
}
@media (min-width: 1280px) {
 .WMD-list {
	  font-size: 16px;
	 padding: 50px 40px;
	}
	.WMD-list li {
	  grid: auto / 25px 1fr;
	  line-height: 1.6;
	  grid-gap: 7px;
	}
	.WMD-list li::before {
	  width: 20px;
	  height: 20px;
	}
	.location-template .three-pillars h5 {
	  font-size: 18px;
	}
}

/* Lookaround*/
#lookaround p {
  color: white;
  font-weight: 500;
}
#lookaround .content-inner-hm {
  padding-bottom: 50px;
}
#lookaroundss {
  padding: 0 50px var(--tbPadding) 50px;
}
#lookaroundss .slideshow-new {
  margin-bottom: 0;
	max-width: 1330px;
  justify-self: center;
}
#lookaroundss .slideshow__btn--prev {
  left: -40px;
}
#lookaroundss .slideshow__btn--next {
  right: -40px;
}
@media (min-width: 800px) {
	#lookaround .content-inner-hm {
	  padding-bottom: 70px;
	}
	#lookaroundss {
	  padding: 0 70px var(--tbPadding) 70px;
	}
}


/* Team */

#teamsection .content-inner-hm {
  justify-items: center;
	grid-gap:10px;
	padding-bottom: var(--contentPadding);
}
.team-ss-container {
  width: calc(100% - 40px);
  margin-top: 30px;
}
.team-ss-container .slideshow-new {
  margin-bottom: 0;
}
.team-ss-container .slideshow__btn {
  background: var(--green);
}
.team-ss-container .slideshow__btn--prev {
  left: -40px;
}
.team-ss-container .slideshow__btn--next {
  right: -40px;
}

.team-ss-container .slideshow__slide {
  aspect-ratio: unset;
  background: #f0ece6;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.team-ss-container .slideshow__slide .img-cont {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 2; /* portrait crop for headshots */
  overflow: hidden;
  flex-shrink: 0;
}

.team-ss-container .slideshow__slide .img-cont img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* favour the face */
  display: block;
}

.team-ss-container .slideshow__slide figcaption {
  padding: 14px 16px 18px;
  background: #EEEFEC;
	text-align: left;
}

.team-ss-container .slideshow__slide figcaption h4 {
  margin: 0 0 4px;
  font-size: 20px;
  color: var(--green);
}

.team-ss-container .slideshow__slide figcaption p {
  margin: 0;
  font-size: 12px;
  font-family: var(--hdMed);
  text-transform: uppercase;
  color: var(--navy);
}

/* Location LCC */
.location-template #lcc .content-inner-hm {
  padding-top: var(--contentPadding);
}
@media (min-width: 900px) {
	.location-template #lcc .content-inner-hm {
	  padding-top: 50px;
	}
}
@media (min-width: 1280px) {
  .location-template #lcc .content-inner-hm {
    padding-top: 70px;
  }
}
@media (min-width: 1380px) {
  .location-template #lcc .content-inner-hm {
	  padding-left: var(--sidePadding);
  padding-right: var(--sidePadding);
  }
}

/* Services */
.services-section {
  width: 100%;
	display: grid;
  grid-gap: 20px;
}
.services-nav {
  margin-top: 20px;
}
.services-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
 
  /* ── List layout ── */
  .services-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
 
  /* ── Button ── */
  .service-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background-color: var(--turq);
    border-radius: 10px;
    text-decoration: none;
    color: #ffffff;
    transition: background-color 0.2s ease;
  }
 
  .service-btn:hover,
  .service-btn:focus-visible {
    background-color: var(--navy);
  }
 
  .service-btn:hover .services_arrow,
  .service-btn:focus-visible .services_arrow {
    fill: white;
  }
 
  /* ── Label ── */
  .service-btn__label {
    flex: 1;
    font-family: var(--hdBold);
    font-size: 18px;
	  text-align: left;
  }
 
  /* ── Location badge ── */
  .service-btn__meta {
    display: flex;
    align-items: center;
  }
 
  .service-btn__location {
    display: inline-block;
    padding: 3px 8px;
    background-color: #EEEFEC;
    color: var(--navy);
    font-family: var(--hdMed);
    font-size: 10px;
    text-transform: uppercase;
    border-radius: 4px;
  }
 
  /* ── Arrow ── */
  .service-btn__arrow {
    line-height: 1;
    flex-shrink: 0;
  }
@media (min-width: 700px) {
  .services-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}
@media (min-width: 1100px) {
  .services-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
	.service-btn__label {
	  font-size: 20px;
	}
}
@media (min-width: 1280px) {
  .service-btn__label {
	  font-size: 22px;
	}
}

/*Petsapp Section*/

.petsapp-section {
  display: grid;
}
.petsapp-section figure {
  display: none;
}
.petsapp-section figure img {
  border-radius: 20px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.petsapp-section .col2-txt {
  display: grid;
  justify-items: center;
  grid-gap: 20px;
}
.qrcode-petsapp {
  display: grid;
  justify-items: center;
}
.qrcode-petsapp .qr-code {
  display: none;
}
.qrcode-petsapp > p {
  font-family: var(--hdMed);
  font-weight: normal;
  color: var(--navy);
  font-size: 16px;
	position:relative;
}
.qrcode-petsapp > p::before {
		content:"";
		display:none;
		width:76px;
		height:50px;
		background-image: url("images/BluePointyDownLeft.svg");
background-repeat: no-repeat;
  background-size: 76px 50px;
		position: absolute;
		left: 0;
	}

@media (min-width: 900px) {
	.qrcode-petsapp {
	  justify-items: center;
	  grid: auto / min-content 1fr;
	  grid-gap: 40px;
	  align-items: center;
	  max-width: 600px;
		margin-top: 30px;
	}
  .qrcode-petsapp .qr-code {
	  display: block;
	}
	.qrcode-petsapp > p {
	  padding-left: 80px;
	}
	.qrcode-petsapp > p::before {
		display:block;
	}
}
@media (min-width: 1100px) {
	.petsapp-section {
	  grid: auto / 1fr 1fr;
	  grid-gap: 40px;
	  align-items: center;
	  margin-top: 20px;
	}
	.petsapp-section .col2-txt {
	  justify-items: start;
	}
	.petsapp-section figure {
	  display: block;
	}
	.qrcode-petsapp > p {
	  font-size:19px;
	}
}
@media (min-width: 1280px) {
	.petsapp-section {
	  margin-top: 40px;
	}
	.qrcode-petsapp > p {
	  font-size:20px;
	}
}

.cv-reviews.green {
  background-image: url(images/GreenBG.jpg);
}
.cv-reviews.green .cv-nav {
  background: var(--navy);
}
.location-template #google_reviews h2 {
  margin: 0 var(--contentPadding) 10px var(--contentPadding);
}
.location-template #google_reviews p {
  color: white;
  font-weight: 400;
  margin: 0 var(--contentPadding) 40px var(--contentPadding);
  font-size: 16px;
}
@media (min-width: 1200px) {
	.location-template #google_reviews p {
    margin: 0 var(--contentPadding) 70px var(--contentPadding);
  }
}

/* Out and About */
#outandabout .content-inner-hm {
  padding-bottom: 50px;
	grid-gap: 20px;
}

@media (min-width: 800px) {
	#outandabout .content-inner-hm {
	  padding-bottom: 70px;
	}

}
@media (min-width: 1280px) {
	#outandabout h2, #outandabout h3 {
	  text-align: left;
	}

}


#outandaboutss {
  padding: 0 var(--sidePadding) var(--tbPadding) var(--sidePadding);
	max-width: 1490px;
  justify-self: center;
}
.outabout-ss-container .slideshow-new {
  overflow: hidden;
}

.outabout-ss-container .slideshow__track-wrapper {
  width: 100%;
  margin-left: 0;
  position: relative;
  overflow: hidden; 
	border-radius: 0;
}

.outabout-ss-container .slideshow__slide {
  aspect-ratio: unset;
  display: flex;
  flex-direction: column;
  background: transparent;
}

.outabout-ss-container .slideshow__slide .img-cont {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3; 
  overflow: hidden;
  border-radius: 12px;
  flex-shrink: 0;
}

.outabout-ss-container .slideshow__slide .img-cont img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.outabout-ss-container .slideshow__slide figcaption {
  padding: 10px 4px 0;
  background: transparent;
}

.outabout-ss-container .slideshow__slide figcaption p {
  margin: 0;
  font-size: 12px;
  font-family: var(--bdCopy);
  color: var(--navy);
  line-height: 1;
}
.outabout-ss-container .slideshow__btn--prev {
  left: 3px;
}
.outabout-ss-container .slideshow__btn--next {
  right: 3px;
}

/* bottom buttons*/
.location-bottom .bottom-txt {
  display: grid;
  grid-gap: 10px;
	align-self: end;
}

.location-rule-grey {
  border: none;
  margin: 10px 0;
  height: 23px;
  width: 100%;
  display: grid;
  background-image: url("images/Rule_Grey.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
@media (min-width: 900px) {
  .location-rule-grey {
    margin: 30px 0;
  }
}
@media (min-width: 1280px) {
  .location-rule-grey {
    margin: 50px 0;
  }
}

/* Location Page */
/* LOCATION */