/* General styles */

:root {
    --color-primary: #4568A1; /* primary color */
    --color-secondary: #252122; /* secondary color */
    --color-focus-outline: rgba(255, 165, 0, 1); /* keyboard focus outline color */
}


body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: var(--color-secondary);
	font-size: 18px;
	line-height: 1.7;
	background: var(--color-secondary); /* overcomes issue where chrome showed white after footer */
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
  scroll-behavior: smooth;
}

/* horizontal rule styles */
hr {
    height: 1px; 
    border: none;
    background-color: #E5E7F2;
    margin: 35px 0; /*increase top and bottom margins from browser defaults */
}
/* Blockquotes */
blockquote {
    border-left: 3px solid var(--color-primary);
    padding: 15px 20px;
    margin: 1.75rem 0;
}

blockquote > :first-child {
    margin-top: 0 !important;
} /* remove top margins from first children because of blockquote padding */


blockquote p:last-child,
blockquote ul:last-child,
blockquote ol:last-child {
    margin-bottom: 0; /* remove bottom margins from last children because of blockquote padding */
}

blockquote ul, ol {
    padding-left: 1.5rem; 
}

/* Responsive banners on home page */
.responsive-banner {
  max-width: 100%;
  height: auto;
  display: block; /* removes bottom inline gap */
  margin: 0;
  transition: box-shadow 0.3s ease-in-out; /*eases box shadow on hover in and out */
}

.responsive-banner:hover {
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.6); /*display box shadow on home page desktop banner links on hover */
}

@media (max-width: 767px) {
    .responsive-banner {
  margin: 0; /*reduce top and bottom margin on banners on mobile*/
    }
}

/*Stack the responsive banners vertically with flex and have a gap between them by adding a class to parent container*/
.banner-stack {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

@media (max-width: 767px) {
    .banner-stack {
        gap: 30px;
    }
}

.white-bg {
	background: #fff; /* give sections a white background */
}

.grey-bg {
	background: #F5F6F7 /* give sections a grey background */
}

/* prevent cms editable regions from being able to display underlining with classes and pseudo-class*/
.editable [style*="underline"] {
  text-decoration: none !important;
}

u {
  text-decoration: none !important;
}

.editable u {
  text-decoration: none !important;
}

/*smooth text */
body { -webkit-font-smoothing: antialiased; }

/*Fluid Video CSS */
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


img {
	max-width: 100%;/* restrict images to max of 100% size or 100% of their parent container */
}

.banner {
	margin-bottom: 0;
}

.banner p {
	padding: 0;
	margin: 0; /* prevents cms from adding padding to image if adds p tages when publishing */
}


/* Typography */

h1, h2, h3, h4, h5, h6 {
	color: var(--color-secondary);
	font-weight: 700;
	line-height: 1.1;	
	margin-bottom: 0.75rem;
	margin-top: 0.75rem;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color: inherit;
	text-decoration: none;
}

h1 {
	font-size: clamp(1.75rem, 1.5318rem + 1.0909vw, 2.5rem);
}
h2 {
	font-size: clamp(1.65rem, 1.5773rem + 0.3636vw, 1.9rem);
}
.content h2 { 
    margin-top: clamp(1.75rem, 1.5318rem + 1.0909vw, 2.5rem); /* increased top margin on h2 in content on standard pages */
}

h3 {
	font-size: clamp(1.25rem, 1.5773rem + 0.3636vw, 1.4rem);
}

p {
	margin-bottom: 1.5rem;
	margin-top: 0;
}

p, ul, ol, li {
	font-size: 1rem;
}

ul, ol {
	margin-top: 0;
	margin-bottom: 1.5rem; /* Margins before and after a list */
    padding-left: 1.5rem; /* reduce amount of left padding */
}
 

#main ul {
	list-style-type: disc /* can change the standard disc bullet point to a circle*/
}

#main li {
  margin-bottom: 0.5rem;
} /* bottom margin of list items */

a {
	color: #396FAC;
	text-decoration: underline;
}
a:hover {
	color: #1ea8a8;
	text-decoration: none;
}

/*==== ACCESSIBILITY ====*/

/* Apply focus effect across site for keboard users only - some other more specific css is needed for search box and buttons*/	
  :focus:not(:focus-visible) {
    outline: none; /* no outline for mouse users */
  }
  :focus-visible {
    outline: 4px solid var(--color-focus-outline); /* outline for keyboard users */
    outline-offset: 1px;
  }
  /* Target image links in main container for keyboard focus */
  #main a:focus-visible img {
    outline: 4px solid var(--color-focus-outline); /* apply the outline to image links */
  }
  /* Target banner image links on home page for keyboard focus */
  #banners a:focus-visible img {
    outline: 4px solid var(--color-focus-outline); /* apply the outline to image links */
  }

  /* Only plain text links to get a focus background 
  p a:focus-visible {
    background-color: var(--color-focus-outline);
  } */

  /* Skip Nav */

.skip-link {
  left: 50%;
  margin-top: -2px;
  padding: 10px 8px 10px 8px;
  position: absolute;
  transform: translateY(-100%);
  transition: transform 0.3s;
  color: white;
  background: var(--color-secondary);
  }

.skip-link:focus {
  transform: translateY(0%);
   margin-top: 15px;
   background: var(--color-secondary);
  border-bottom: none;
  text-decoration: none;
}

/*==== END ACCESSIBILITY ====*/

/* Main Section spacing , background colours etc to override standard section styles */

.main-section {
   background: #f5f6f7;
}
/* Deprecated: .main-grid-section {
   background: #f5f6f7;
}
.main-grid-alt-section {
   background: #f5f6f7;
}

.main-grid-alt2-section {
   background: #f5f6f7;
}


.main-grid-alt4-section {
   background: #f5f6f7;
}

.main-grid-alt5-section {
   background: #f5f6f7;
} */

.custom-grid-section {
   background: var(--color-primary); /* This month section */
}

.intro-banner-section {
  padding-top: 0 !important; /* Removed top & bottom padding from this section - change as required */
  padding-bottom: 0 !important;
  margin-top: -10px; /* Nudge section up a little closer to home intro text */
}

/* Navigation Styles */
.navigation {
    background-color: var(--color-primary); /* Blue background */
    color: white;             /* Text color */
    padding-top: 0;               /* Remove top padding */
	padding-bottom: 3px;               /* little bit of bottom padding aligns desktop navigation better */
    height: 70px;             /* Set a height for the navigation section */
    display: flex;            /* Use Flexbox for vertical alignment */
    align-items: flex-end;      /* Vertically center the container */
    justify-content: start  /* Horizontally center the container */
}

@media (max-width: 1200px) {
.navigation {
	height: 3px; /*Reduce the nav background to effectively be a 4px separator line when mobile menu shows*/
	}
}

.nav-container {
    display: flex;            /* Use Flexbox for content alignment */
    align-items: center;      /* Vertically center the text links */
    gap: 20px;                /* Optional: space between links */
}

.navigation a {
    color: white;             /* Link color */
    text-decoration: none;    /* Remove underline from links */
    font-size: clamp(0.9375rem, 0.9011rem + 0.1818vw, 1.0625rem);        /* Font size for links */
    line-height: 1.2;        /* Match the height of the container to align text vertically */
	text-transform: none;
	font-weight: 400;	
}

.navigation a:hover {
    text-decoration: none;
}

/*=== Home page grid and cards with icons ===*/

.home-icon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.home-icon-grid a {
  text-decoration: none !important;
  color: inherit;
}

@media (max-width: 1030px) {
  .home-icon-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
}
@media (max-width: 767px) {
  .home-icon-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
}
@media (max-width: 380px) {
  .home-icon-grid {
    grid-template-columns: 1fr;
  }
}

.home-icon-grid .grid-item {
  position: relative; /* containing block for the stretched-link overlay */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  width: 100%;
  background: var(--color-primary);
  padding: 40px 30px;
  transition: background ease-in-out .3s;
}

/* mouse hover: whole card background swap, driven by :has() since the
   anchor now only wraps the title, not the whole grid-item */
.home-icon-grid .grid-item:has(.stretched-link:hover) {
  background: var(--color-secondary);
}

/* keyboard focus: same background swap, plus a visible outline on the card */
.home-icon-grid .grid-item:has(.stretched-link:focus-visible) {
  background: var(--color-secondary);
  outline: 3px solid var(--color-focus-outline);
  outline-offset: 1px;
}

/* the actual anchor shouldn't show its own tiny outline, since the
   card itself is now carrying the focus indicator */
.home-icon-grid .stretched-link:focus-visible {
  outline: none;
}

.home-icon-grid .grid-item-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.home-icon-grid .grid-item .number {
  font-size: clamp(1.4rem, 1.2836rem + 0.5818vw, 1.8rem);
  color: white;
  font-weight: 700;
  margin-bottom: 10px;
}

.home-icon-grid .grid-item .title {
  color: white;
  margin: 0;
  font-size: clamp(1rem, 0.95rem + 0.3636vw, 1.1rem);
  font-weight: 400;
  line-height: 1.35;
}

.home-icon-grid .grid-item i {
  font-size: clamp(2.5rem, 2.5318rem + 1.0909vw, 3rem);
  color: white;
  font-weight: 700;
  margin-bottom: 20px;
}

.home-icon-grid .grid-item img {
  max-width: clamp(3.25rem, 3.0318rem + 1.0909vw, 4rem);
  color: white;
  margin-bottom: 14px;
}

@media (max-width: 767px) {
  .home-icon-grid .grid-item {
    padding: 25px 20px;
  }
  .home-icon-grid .grid-item i {
    margin-top: 15px;
  }
  .home-icon-grid .grid-item img {
    margin-top: 15px;
  }
}

/* --- stretched link behaviour --- */
.home-icon-grid .stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/*=== Home Page Grid Alternative Styles ===*/

.main-grid-alt {
  display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three equal columns */
    grid-template-rows: auto; /* Rows adjust to the tallest item */
    gap: 30px; /* Gap between items */
}

.main-grid-alt a {
    text-decoration: none !important; /* removes any default underlining of links */
  }

@media (max-width: 1200px) {
  .main-grid-alt {
    grid-template-columns: repeat(3, 1fr); /*  Keep number of columns in grid row at 3 */
    gap: 25px; /* Reduce gap size */
  }
}

@media (max-width: 1023px) {
    .main-grid-alt {
    grid-template-columns: repeat(2, 1fr); /*  Reduce number of columns in grid row to 2 */
    gap: 25px; /* Reduce gap size */
  }
}

@media (max-width: 767px) {
    .main-grid-alt {
    grid-template-columns: repeat(2, 1fr); /* Keep number of columns in grid row at 2*/
    gap: 25px; /* Reduce gap size */
  }
}
 
 @media (max-width: 575px) {
    .main-grid-alt {
    grid-template-columns: 1fr; /* Reduce number of columns in grid row to 1 */
    gap: 20px; /* Reduce gap size */
  }
}

.main-grid-alt .grid-item {
  position: relative; /* containing block for the stretched-link overlay */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  background: #fff;
  height: 100%;
  width: 100%;
  padding: 20px;
  border: 2px solid transparent;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
  transition: background .3s ease-in-out, border .3s ease-in-out;
}

/* mouse hover still works directly on .grid-item — it doesn't depend
   on the anchor's position, so no :has() needed here */
.main-grid-alt .grid-item:hover {
  background: #fff;
  border: 2px solid var(--color-primary);
}

/* keyboard focus: mirror the hover border AND add the outline treatment */
.main-grid-alt .grid-item:has(.stretched-link:focus-visible) {
  background: #fff;
  /* border: 2px solid var(--color-primary); re-enable if also want blue border effect */
  outline: 3px solid var(--color-focus-outline);
  outline-offset: 1px;
}

/* the anchor itself shouldn't show its own small outline, since the
   card now carries the focus indicator */
.main-grid-alt .stretched-link:focus-visible {
  outline: none;
}

.main-grid-alt .grid-item p {
  margin: 15px 0 0 0;
  text-align: left;
  color: var(--color-secondary);
  font-size: inherit;
  font-weight: inherit;
  display: inline-block;
}

.main-grid-alt .grid-item h2 {
  font-size: clamp(1.3rem, 1.1418rem + 0.2909vw, 1.4rem);
  margin-bottom: 0;
}

.main-grid-alt .grid-item:hover p {
  color: var(--color-secondary);
}

.main-grid-alt .grid-item a {
  text-decoration: none;
  color: var(--color-secondary); /* was #fff — see note below */
}

.main-grid-alt .grid-item i {
  font-size: 24px;
  color: white;
  max-width: 48px;
  font-weight: 700;
  padding: 12px;
  background: var(--color-primary);
  border-radius: 5px;
  margin-bottom: 0;
}

/* --- stretched link behaviour --- */
.main-grid-alt .stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/*=== Home Page Grid Alternative 2 Styles ===*/

.main-grid-alt2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 25px;
}

.main-grid-alt2 a {
  text-decoration: none !important;
  color: inherit;
}

@media (max-width: 1200px) {
  .main-grid-alt2 {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }
}
@media (max-width: 1023px) {
  .main-grid-alt2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (max-width: 767px) {
  .main-grid-alt2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (max-width: 575px) {
  .main-grid-alt2 {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.main-grid-alt2 .grid-item {
  position: relative; /* containing block for the stretched-link overlay */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  background: #fff;
  height: 100%;
  width: 100%;
  padding: 15px;
  border: 2px solid #d8d7d7;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
  transition: background .3s ease-in-out, border .3s ease-in-out;
}

/* mouse hover — reacts directly to the div, unaffected by anchor position */
.main-grid-alt2 .grid-item:hover {
  background: #fff;
  border: 2px solid var(--color-primary);
}

/* keyboard focus — outline only, no border/background swap */
.main-grid-alt2 .grid-item:has(.stretched-link:focus-visible) {
  outline: 3px solid var(--color-focus-outline);
  outline-offset: 1px;
}

.main-grid-alt2 .stretched-link:focus-visible {
  outline: none;
}

.main-grid-alt2 .grid-item p {
  margin: 15px 0 0 0;
  text-align: left;
  color: var(--color-secondary);
  font-size: inherit;
  font-weight: inherit;
  display: inline-block;
}

.main-grid-alt2 .grid-item h2 {
  font-size: clamp(1.3rem, 1.1418rem + 0.2909vw, 1.4rem);
  font-weight: 600;
  display: inline-block;
  margin: 0;
}

.main-grid-alt2 .grid-item:hover p {
  color: var(--color-secondary);
}

.main-grid-alt2 .grid-item i {
  font-size: 24px;
  color: white;
  max-width: 48px;
  font-weight: 700;
  padding: 12px;
  background: var(--color-primary);
  border-radius: 5px;
  margin: 0 15px 0 0;
}

/* --- stretched link behaviour --- */
.main-grid-alt2 .stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/*=== Home Page Grid Alternative 4 Styles ===*/

.main-grid-alt4 {
  display: grid;
    grid-template-columns: repeat(3, 1fr); /* three equal columns */
    grid-template-rows: auto; /* Rows adjust to the tallest item */
    gap: 30px; /* Gap between items */
}

.main-grid-alt4 a {
    text-decoration: none !important; /* removes any default underlining of links */
  }

@media (max-width: 1200px) {
  .main-grid-alt4 {
    grid-template-columns: repeat(3, 1fr); /* maintain number of columns in grid row to 3 */
    gap: 25px; /* Reduce gap size */
  }
}

@media (max-width: 1023px) {
    .main-grid-alt4 {
    grid-template-columns: repeat(2, 1fr); /*  Reduce number of columns in grid row to 2 */
    gap: 25px; /* Reduce gap size */
  }
}

@media (max-width: 767px) {
    .main-grid-alt4 {
    grid-template-columns: repeat(2, 1fr); /* Keep number of columns in grid row at 2*/
    gap: 25px; /* Reduce gap size */
  }
}
 
 @media (max-width: 600px) {
    .main-grid-alt4 {
    grid-template-columns: 1fr; /* Reduce number of columns in grid row to 1 at non standard breakpoint */
    gap: 20px; /* Reduce gap size */
  }
}

.main-grid-alt4 .grid-item {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* Ensure all children stretch across the grid item */
  justify-content: space-between; /* Distribute space, button goes to the bottom */
  text-align: left; /* Left align the text content */
  background: #fff;
  height: 100%; /* Ensure the grid item fills 100% of row height */
  width: 100%; /* Ensure the grid item fills 100% of available width */
  padding: 0 0 35px 0; /* Set padding */
  border-bottom: 1px solid #ccc; /* add a bottom border */
  /* border: none ! important; Set border color as transparent for hover-effect */
  /* box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);  Add light box shadow to grid item */
}

.main-grid-alt4 .grid-item:hover {
  /* Add styles as needed */
}

.main-grid-alt4 .grid-item .grid-item-content {
  padding: 0 25px 10px 25px !important; /* padding on internal content div in grid item containing headline and text*/
}

.main-grid-alt4 .grid-item p  {
  margin: 15px 0 0 0;
  text-align: center; /* align the text horizontally */
  color: var(--color-secondary);
  font-size: inherit;
  font-weight: inherit;
  display: inline-block; /* adding this restricts the hover underline effect to the width of the text not the whole div */
}

.main-grid-alt4 .grid-item h2  {
  font-size: clamp(1.425rem, 1.3377rem + 0.4364vw, 1.525rem);
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0;
  text-align: center; /* align the heading horizontally */
}

/* h3 rule in case need to use h3 in structure */
.main-grid-alt4 .grid-item h3  {
  font-size: clamp(1.425rem, 1.3377rem + 0.4364vw, 1.525rem);
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0;
  text-align: center; /* align the heading horizontally */
}

.main-grid-alt4 .grid-item:hover p {
  color: var(--color-secondary); /* set text colour on hover of wrapper div */
}

.main-grid-alt4 .grid-item img {
    margin-bottom: 0; /* Space between image and text content if required*/
}

.main-grid-alt4 .grid-item .button1 {
   width: calc(100% - 40px); /* button 100% width minus 20px margin each side */
   align-self: stretch; /* Ensure the button stretches to fill the width */
   box-sizing: border-box; /* Include padding and border in the element's total width and height */
   text-align: center;
   margin-top: auto; /* Pushes the button to the bottom of the container */
   margin-left: 20px; margin-right: 20px; /* add space outside of button to match padding of the div with headline and text */
}

.main-grid-alt4 .grid-item:hover img {
  /* Add styles as needed */
}

/*=== Grid alternative 4 with modifier for grey card background as used on learning disability leaflets page ===*/
.main-grid-alt4--greycard .grid-item  {
        background: #f5f6f7 !important;
    }
.main-grid-alt4--greycard .grid-item h2, h3  {
  margin-top: 1rem !important; 
  font-size: clamp(1.1rem, 1.3377rem + 0.4364vw, 1.2rem); /*smaller font size due to headline length */
}

.main-grid-alt4--greycard .grid-item  {
  border: 1px solid #7e7e7e !important; /* 1px border around whole grid item */
}



/*=== Grid alternative 4 with modifiers for a page with sidebar ===*/
.main-grid-alt4--sidebar {
    grid-template-columns: repeat(2, 1fr); /* 2 columns default */
    margin-top: 30px; /*add some top margin to text content avove */
}

@media (max-width: 980px) {
    .main-grid-alt4--sidebar {
        grid-template-columns: 1fr; /* 1 column at tablet size */
        margin-top: 30px; /* reduce top margin to text content above*/
    }
}

.main-grid-alt4--sidebar .grid-item {
    background: #f5f6f7; /* These grid cells need a light grey background */
    padding-top: 25px; /* add padding missing from standard grid variant 4 images */
    text-align: center !important; /* center align the  content */
}

.main-grid-alt4--sidebar .grid-item img {
    width: 200px; /* image size */
    height: 200px;
    border-radius: 50%; /* make images round */
    object-fit: cover; /* fit to circle even if rectangles */
    object-position: center center; /* which part of image to show */
    
}
.main-grid-alt4--sidebar .grid-item .grid-item-content {
    display: flex;
    flex-direction: column; /* align content vertically stacked */
    margin-top: -20px;
}

.main-grid-alt4--sidebar .grid-item h2, h3  {
  margin-top: 2rem !important;
}

/* Home Page Grid Alternative 5 Styles */

.main-grid-alt5 {
  display: grid;
    grid-template-columns: repeat(4, 1fr); /* four equal columns */
    grid-template-rows: auto; /* Rows adjust to the tallest item */
    gap: 30px; /* Gap between items */
}

.main-grid-alt5 a {
    text-decoration: none !important; /* removes any default underlining of links */
  }

@media (max-width: 1300px) {
  .main-grid-alt5 {
    grid-template-columns: repeat(3, 1fr); /*  reduce number of columns in grid row to 3 */
    gap: 25px; /* Reduce gap size */
  }
}

@media (max-width: 1023px) {
    .main-grid-alt5 {
    grid-template-columns: repeat(2, 1fr); /*  Reduce number of columns in grid row to 2 */
    gap: 25px; /* Reduce gap size */
  }
}

@media (max-width: 767px) {
    .main-grid-alt5 {
    grid-template-columns: repeat(2, 1fr); /* Keep number of columns in grid row at 2*/
    gap: 25px; /* Reduce gap size */
  }
}
 
 @media (max-width: 600px) {
    .main-grid-alt5 {
    grid-template-columns: 1fr; /* Reduce number of columns in grid row to 1 at non standard breakpoint */
    gap: 20px; /* Reduce gap size */
  }
}

.main-grid-alt5 .grid-item {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* Ensure all children stretch across the grid item */
  /* justify-content: space-between; /* Distribute space, button goes to the bottom */
  text-align: center; /* center align the text content (affects the h2) */
  background: #fff;
  height: 100%; /* Ensure the grid item fills 100% of row height */
  width: 100%; /* Ensure the grid item fills 100% of available width */
  padding: 0; /* Set padding to zero so image is fulll width of div*/
  /* border: 2px solid #d8d7d7; /* Set initial border color for hover-effect */
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); /* Add light box shadow to grid item */
  border: none;  /* Add borders as required */
}

.main-grid-alt5 .inner-div {
  flex-grow: 1; /* Make inner-div fill the remaining height */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Space out the paragraph and button */
  padding: 20px 20px 8px 20px; /* Add some padding around the text and button */
}

.main-grid-alt5 .grid-item:hover {
  /* Add styles as needed */
}

.main-grid-alt5 .grid-item p  {
  text-align: center; /* center align the text horizontally */
  color: var(--color-secondary);
  font-size: inheit;
  font-weight: inherit;
  display: inline-block; /* adding this restricts the hover underline effect to the width of the text not the whole div */
}

.main-grid-alt5 .grid-item h2  {
  font-size: clamp(1.425rem, 1.3377rem + 0.4364vw, 1.625rem);
  font-weight: 600;
  margin: 10px 20px 0 20px; /* Add left and right margin to h2 so alignment is consistent with inner div with padding that follows it */
}

.main-grid-alt5 .grid-item:hover p {
  color: var(--color-secondary); /* set text colour on hover of wrapper div */
}

.main-grid-alt5 .grid-item img {
    margin-bottom: 15px; /* Space between image and text */
}

.main-grid-alt5 .grid-item .inner-div .button1 {
   width: 100%; /* Make sure the button width is 100% */
   align-self: stretch; /* Ensure the button stretches to fill the width */
   box-sizing: border-box; /* Include padding and border in the element's total width and height */
   text-align: center;
   margin-top: auto; /* Pushes the button to the bottom of the container */
   margin-bottom: 0;
}

.main-grid-alt5 .grid-item:hover img {
  /* Add styles as needed */
}


/* Custom Grid styles - This Month in numbers grid */

.custom-grid-section h2 {
	text-align: center; /* Centre align the section's h2 text horizontally */
	color: #fff;
	font-size: clamp(1.75rem, 1.5318rem + 1.0909vw, 2.5rem);
	margin: 20px 0 15px 0; /*Add margin above and below h2 */
}


.custom-grid-section .thank-you {
	max-width: 1150px; /* restrict this div width on larger devices to 980px */
	width: 100%;
    color: white;
	line-height: 1.5;
    text-align: center;
	margin: 50px auto 0 auto; /* add 50px margin to the top and center the div horizontally with margin auto */
}

.custom-grid .number {
	font-size: clamp(1.4rem, 1.2836rem + 0.5818vw, 1.8rem);/* set size & colour of the number */
	color: white;
	font-weight: 700;
	margin-bottom: 10px;
}

.custom-grid .grid-item .title {
    color: white;
    margin: 0; /* Remove default paragraph margin */
	font-size: clamp(1.1rem, 0.9273rem + 0.3636vw, 1.25rem);
	line-height:1.35;
}


.custom-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns */
    gap: 30px; /* 30px gap */
}

@media (max-width: 1030px) {
    .custom-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns */
    }
}

@media (max-width: 767px) {
    .custom-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
		gap: 25px; /* 25px gap */
    }
}

@media (max-width: 575px) {
    .custom-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
		 }
}

.custom-grid .grid-item {
    display: flex;
    align-items: flex-start;
    justify-content: center;
	height: 100%; /* make sure the grid item fills 100% of row height */
}

.custom-grid .grid-item-content {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    text-align: center;
}

.custom-grid .grid-item i {
    font-size: clamp(1.875rem, 1.5841rem + 1.4545vw, 2.875rem); /* Icon size */
    color: white;
	font-weight: 700;
    margin-bottom: 0; /* Space between icon and number*/
	margin-top: 35px; /* add some extra top margin above icon */
}

.custom-grid .grid-item img {
    max-width: clamp(3.125rem, 2.9432rem + 0.9091vw, 3.75rem);/* SVG icon size */
    color: white;
	margin-bottom: 0; /* If using svg icon instead of font awesome icon */
	margin-top: 35px;
}

@media (max-width: 767px) {
    .custom-grid .grid-item i {
	margin-top: 15px; /* reduce extra top margin above icon */
	}
	
	.custom-grid .grid-item img {
	margin-top: 15px; /* If using svg icon instead of font awesome icon */
	}
}

/* Standard page style grid - reduced to 2 columns by default and one on mobile due to narrower container div - based on alt 2. Needs less breakpoints */

.standard-page-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  gap: 25px;
}

.standard-page-grid a {
  text-decoration: none !important;
  color: inherit;
}

@media (max-width: 767px) {
  .standard-page-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 575px) {
  .standard-page-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.standard-page-grid .grid-item {
  position: relative; /* needed as the containing block for the stretched-link overlay */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  background: #fff;
  height: 100%;
  width: 100%;
  padding: 25px;
  border: 2px solid #d8d7d7;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
  transition: background .3s ease-in-out, border .3s ease-in-out;
}

.standard-page-grid .grid-item:hover {
  background: #fff;
  border: 2px solid var(--color-primary);
}

.standard-page-grid .grid-item p {
  margin: 15px 0 0 0;
  text-align: left;
  color: var(--color-secondary);
  font-size: inherit;
  font-weight: inherit;
  display: inline-block;
}

.standard-page-grid .grid-item h2 {
  font-size: clamp(1rem, 1.1418rem + 0.2909vw, 1.15rem);
  font-weight: 600;
  display: inline-block;
  margin: 0 !important;
}

.standard-page-grid .grid-item:hover p {
  color: var(--color-secondary);
}

.standard-page-grid .grid-item i {
  font-size: 19px;
  color: var(--color-primary);
  max-width: 48px;
  font-weight: 700;
  padding: 0;
  background: none;
  border-radius: 5px;
  margin: 0 8px 0 0;
}

.standard-page-grid .grid-item.grid-item--stacked {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 25px;
}

/* --- stretched link behaviour --- */

.standard-page-grid .stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* keyboard focus: ring the whole card, not just the h2 text */
.standard-page-grid .stretched-link:focus-visible {
  outline: none;
}
.standard-page-grid .stretched-link:focus-visible::after {
  outline: 3px solid var(--color-focus-outline);
  outline-offset: 1px;
}


/* Footer Styles */
.footer {
    background-color: var(--color-secondary);
    color: #f5f6f7;
    padding-left: 35px;
	padding-right: 35px;
    box-sizing: border-box;
    overflow: hidden;
}

.footer .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Four equal columns */
    gap: 50px;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 1023px) {
       .footer .grid {
        grid-template-columns: repeat(2, 1fr); /* Reduce number of columns in footer grid row to 2*/
		gap: 25px; /* Reduce gap size */
    }
}

@media (max-width: 575px) {
      .footer .grid {
        grid-template-columns: 1fr; /* Reduce number of columns in footer grid row to 1 */
		gap: 20px; /* Reduce gap size */
    }
  
  .footer .footer-column {
	  padding: 0; /* Remove right padding from footer grid columns when reaches mobile */
  } 
}

@media (max-width: 1300px) {
   .footer {
	Padding-bottom: 125px; /*increase footer section bottom padding above standard section padding to accommodate translation widget on smaller devices */
   }
}

@media (max-width: 767px) {
  #fcol-3 {
	  display: none; /*hide last 2 footer columns on tablet * mobile */
  }
  #fcol-4 {
	  display: none;
  }
  .footer {
    padding-left: 20px; /* reduce side padding */
	padding-right: 20px;
  }

}

.footer .footer-column {
    padding: 0 20px 0 0;
    box-sizing: border-box;
    word-wrap: break-word;
} 

.footer a {
	color: #f5f6f7;
	text-decoration: none !important;

}
.footer a:hover {
	color: #1ea8a8; /* lighter color on dark footer for accessibility and readability */
	text-decoration: underline;
}

.footer h3 {
	color: #f5f6f7 /* Change colour of h3 heading in footer */
}
.footer p { 
	font-size: clamp(0.9375rem, 0.8568rem + 0.0909vw, 0.9375rem); /* reduce size of p text in footer */
}
.footer ul {
	list-style-type: none; /* remove bullet points, padding and margin from footer lists */
	margin: 0;
	padding: 0;
}
.footer li { 
	font-size: clamp(0.9375rem, 0.8568rem + 0.0909vw, 0.9375rem); /* reduce size of p text in footer */
	Line-height: 3.5; /* increase line height of list items */
}
.footer li:not(:last-child) { 
	border-bottom: 1px solid #3a3a3a; /* add a border between list items except final one in list */
} 

/* Footer social links */
.social-links {
  display: flex;
  gap: 20px;
}

.social-links a {
  color: #fff;
  font-size: 24px;
}

.social-links a:hover {
  color: #1ea8a8;
}

/* Footer final row - with veterans logo and copyright */
.footer-final-row {
  display: flex;
  flex-direction: row;
  gap: 35px;
  align-items: center;
  border-top: solid 1px #3a3a3a;
  padding-top: 35px;
}

.footer-final-col {
  flex: 1; 
}

.footer-final-copyright {
  margin-top: 35px;
  display: flex;
  justify-content: flex-end; /* justify content to the right of this column */
}

@media (max-width: 767px) {
  .footer-final-row {
    flex-direction: column; /* change to column layout & stack at 767 px and below */
  }
}

@media (max-width: 767px) {
  .footer-final-row {
    flex-direction: column;
    align-items: flex-start; /* move everything to left alignment*/
  }

  .footer-final-copyright {
    justify-content: flex-start; /*Ensure copyright column is left justified */
  }
}

/*=== Responsive Page Layout Styles ===*/

section {
    width: 100%;
    box-sizing: border-box; /* Ensure full width does not exceed container */
	padding-left: 20px; /*Stanard L-R Padding on sections - override on individual section classes if need to change */
	padding-right: 20px;
	padding-top: clamp(2.1875rem, 1.642rem + 2.7273vw, 3.75rem); /* Clamp that takes padding top & bottom from 35px on mobile to around 60px on desktop */
	padding-bottom: clamp(2.1875rem, 1.642rem + 2.7273vw, 3.75rem); 
    background-color: #f5f6f7; /* default section background colour */
	/* outline: 2px solid red; */
}

@media (max-width: 767px) {
  section {
    padding-left: 15px; /* reduce left and right padding on smaller screen sizes */
    padding-right: 15px;
  }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
	/* outline: 2px solid red; */
}

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
	max-width: 100%;
	box-sizing: border-box;
	}
.column {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1; /* Make columns flexible */
    max-width: 100%;
	/* outline: 2px solid yellow; */
}

/* Main Layout 2 column */
.mainrow {
  	display: flex;
	max-width: 100%;
	box-sizing: border-box;
  	/* outline: 2px solid blue; */
}

.column.left {
  flex: 0 0 70%; /* Left column 70% of row width */
  padding-right: 30px; /*Not ideal but flex gap seems to break layout */
}

.content {
	padding: 30px; /* div containing text content in left column */
	background: #ffffff;
}

@media (max-width: 767px) {
  /*.main-section {
    background: #fff;  change background to white and remove grey bordered effect around content 
  }*/
  .content {
   /* padding: 20px 0 0 0;  remove all but top padding on left column content as no longer bound by grey background*/
    padding: 15px;
  }
}

.column.right {
  flex: 0 0 30%; /* Right column 30% of row width */
  /* background: #ffffff; */
  /* outline: 2px solid yellow; */
}
.sidebar-content {
	padding: 0; /* Add padding and white background andbottom border to sidebar content in right column */
	background: #fff;
	border-bottom: solid 1px #ccc;
    margin-bottom: 25px; /* adds vertical space between sidebar features */
}

.sidebar-text {
  padding: 20px; /* Add padding aroud the sidebar text */
}

.sidebar-text p {
	font-size: clamp(0.9375rem, 0.8568rem + 0.0909vw, 0.9375rem); /* reduce size of text in sidebar */ 
}

.sidebar-text h2 {
  font-size: 1.4rem !important;
  margin-top: 0 !important;
  line-height: 1.2;
}


@media (max-width: 980px) {
  .column.left {
    flex: 0 0 100%; /* Left column 100% of row width */
  }
  .column.right {
    /* flex: 0 0 40%; Right column 40% of row width */
    display: none; /* Hide the right column */
  }
}

@media (max-width: 767px) {
  .mainrow {
    flex-direction: column;
  }

  .column {
    flex: 1 0 auto;
  }
  
  .column.left {
   padding-right: 0; /*remove right padding */
	}
.column.right {
	display: none; /* Hide the right column */
	}
}

/* Responsive Breakpoint Styling */

/* Desktop */
@media (min-width: 1201px) {
  /* Add styles as required*/
}

/* 1200px and below */
@media (max-width: 1200px) {
    /* Add styles as required */
}

/* 1023px and below */
@media (max-width: 1023px) {
      /* Add styles as required */
}

/* 767px and below */
@media (max-width: 767px) {
  /* Add styles as required */
  }
}

/* 575px and below */
@media (max-width: 575px) {
    /* add styles as required */
}

/* Button Styles */

	.button1 {
		-webkit-appearance: none;
		display: inline-block;
		text-decoration: none;
        text-align: center;
		cursor: pointer;
		border: 0;
		color: white;
		border-radius: 5px;
		background: var(--color-primary);
		font-weight: 600;
		outline: 0;
		-moz-transition: background-color .25s ease-in-out;
		-webkit-transition: background-color .25s ease-in-out;
		-ms-transition: background-color .25s ease-in-out;
		transition: background-color .25s ease-in-out;
		font-size: clamp(0.925rem, 0.8205rem + 0.2727vw, 1.0625rem);
		line-height: 1.2;
		padding: 18px 25px 18px 25px;
	}
	
		.button1:hover {
			background: var(--color-secondary);
			color: white;
		}
		
	/* Add the focus effect to this button only for keyboard users */
   .button1:focus-visible {
    outline: 4px solid var(--color-focus-outline); 
	background: var(--color-secondary) ;
	border: none;
	}	
	/* Remove focus effect for this button when clicked with a mouse */
	.button1:focus:not(:focus-visible) {
		background: var(--color-secondary);
		outline: none; /* Removes the orange dotted border */
 	 }

			.button1:active {
			background: var(--color-secondary);
		}

.button1 i {
  margin-right: 8px !important; /* add right space to button icon */
}

.twobuttons {
    margin: 10px 20px 10px 0 !important; /* additional modifying class for 2 side-by-side buttons to give them space above and below for when they stack and right margin to give them space when on same line */
}

@media (max-width: 420px) {
    .twobuttons {
        margin-right: 0 !important;/* remove unecessary right margin when they are stacked vertically on smllest screens */
    }
}

/* Alternative Button */

			.button1.alt {
			background: var(--color-primary);
			color: #fff !important;
		}

			button1.alt:hover,
			.button1.alt:hover {
				background: var(--color-secondary);
			}
			
	/* Add the focus effect to this button only for keyboard users */
   .button1:focus-visible {
    outline: 4px solid var(--color-focus-outline); 
	background: var(--color-secondary);
	border: none;
	}	
	/* Remove focus effect for this button when clicked with a mouse */
	.button1:focus:not(:focus-visible) {
		background: var(--color-secondary);
		outline: none; /* Removes the orange dotted border */
 	 }
	 
			.button1.alt:active {
				background: var(--color-secondary);
			}

	/* Icon before button text */
		.button1.icon:before {
			opacity: 0.35;
			position: relative;
			top: 0.05em;
			margin-right: 0.75em;
		}

		
	/* Make sidebar buttons 100% width */	
		.sidebarbutton {
			width: 100%; /* Additional class to make sidebar buttons full width */
			text-align: center;
		}

/*=== Home Intro Content ===*/

.home-intro-content {
    text-align: center;
    max-width: 1080px; /* Set a max width to make text length more readable *./
    margin: auto; /*center the div inside parent section */
}

.home-intro-content h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0; /* remove top spacing from this intro heading */
    padding-top: 0;
}

.home-intro-content h1::before,
.home-intro-content h1::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #ccc;
}

.home-intro-content h1::before {
    margin-right: 15px;
}

.home-intro-content h1::after {
    margin-left: 15px;
}

.home-intro-content p:last-of-type {
    margin-bottom: 0 !important; /* remove bottom margin from final paragraph */
    padding-bottom: 0 !important;
}

/* === Below 767px: left-align text, remove the lines from H1 entirely ===*/
@media (max-width: 767px) {
    .home-intro-content {
        text-align: left;
    }

    .home-intro-content h1 {
        display: block; /* drop flex — no longer need line elements to lay out */
    }

    .home-intro-content h1::before,
    .home-intro-content h1::after {
        display: none;
    }
}

/*=== Alert Card ===*/
.alertcard {
	background-color: #F5F6F7;
	border: 1px solid #ccc;
	padding: 25px 25px 0 25px;
  	margin-bottom: 30px;
    margin-top: 30px;
}
.alertcard h2 {
  margin-top: 0 !important;
}

/*=== Google Map directions form ===*/
.directions-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.directions-form input[type="text"] {
  flex: 1;
  min-width: 0;
}

/* stack Google Map directions button under input on small screens */
@media (max-width: 480px) {
  .directions-form input[type="text"] {
    flex: 1 1 100%; /* input takes its own full line */
  }
  .directions-form .form-button {
    flex: 0 0 auto; /* button stays its natural width, wraps below input */
  }
}

/*=== General Form Styling ===*/
.form-field,
.form-button { /* shared attributes of form field and buton */
  box-sizing: border-box;
  font-size: 0.925rem;
  line-height: 1.2;
  border-radius: 6px;
  margin-bottom: 1rem
}

.form-field {
  padding: 18px 12px;
  font-weight: 300;
  border: 1px solid #ccc;
  color: #ccc !important;
}

.form-field::placeholder {
  color: #666;
}

.form-field:focus-visible {
  outline: 4px solid var(--color-focus-outline);
  outline-offset: 1px;
  box-shadow: 0 0 5px rgba(69, 104, 161, 0.75);
}


.form-button {
  padding: 18px !important;
  background-color: var(--color-primary);
  color: #fff !important; /* adjust if needed */
  border: none; /* buttons don't need the grey border like inputs do — remove this line if you want the border too */
  font-weight: 600;
  cursor: pointer;
  transition: background-color .25s ease-in-out;
}

.form-button:hover {
  background-color: var(--color-secondary);
}


.form-button:focus-visible {
  background-color: var(--color-secondary);
  outline: 4px solid var(--color-focus-outline);
  outline-offset: 1px;
}                                                                                                                                                                                                                                                                                                                    /* ==================================================
   Accordion Styling - right aligned icon
   ================================================== */

/* Style accordian toggle */

  .accordion-toggle {
  display: flex;                   /* align icon and text */
  align-items: center;             /* vertical alignment */
  position: relative;              /* needed for ::before */
  padding-left: 0;            /* space for pseudo-icon */
  padding-right: 0;             /* NEW: reserves space for the right-hand icon circle so text never touches it, even on mobile */
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit; /* inherits the h2's font instead of default button font */
  box-sizing: border-box;          /* NEW: ensures padding is included in the 100% width, not added on top — fixes text running under the icon on narrow screens */
}

/*Style accordian toggle h2 */
  .card-header h2 button.accordion-toggle {
  display: block;
  color: #333 !important;
  font-size: clamp(1.15rem, 1.1209rem + 0.1455vw, 1.25rem) !important;
  text-decoration: none !important;
  margin: 0 !important;      /* was 12px 0 — caused margin collapse above the grey bg */
  line-height: 1.5 !important;
}


/* Add + sign using pseudo-element */
.accordion-heading .accordion-toggle::before {
  content: "+";
  position: absolute;
  right: 0.5rem;                  /* CHANGED from left:0 — now sits inset from the right edge */
  top: 50%;
  transform: translateY(-50%);
  /* width: 28px;                     /* NEW: fixed circle size */
  /* height: 28px;                    /* NEW: fixed circle size */
  display: flex;                   /* NEW: centers the +/- inside the circle */
  align-items: center;
  justify-content: center;
  flex-shrink: 0;                  /* NEW: stops the circle squashing on narrow screens */
  /* background-color: #4568A1;       /* NEW: blue circle */
  /* border-radius: 50%;              /* NEW: makes it round */
  /* color: #fff;                     /* NEW: white icon */
  font-size: 1.5rem !important;      /* separate from heading text size */
  line-height: 1;
  transition: transform 0.3s ease, content 0.3s ease;
}

/* When accordion is active, change + to − */
.accordion-heading .accordion-toggle.active::before {
  content: "−";
}

/* Basic card/border styling (was coming from Bootstrap originally) */
.accordion .card {
  border: 1px solid rgba(0,0,0,0.125);
  border-radius: 4px;
  margin-bottom: 0.75rem;
}
.accordion .card-header {
  background-color: rgba(0,0,0,0.03);
  border-bottom: 1px solid rgba(0,0,0,0.125);
}

.accordion .card-body {
  padding: 1rem 1.25rem;
}

.accordion .card-body > :first-child {
    margin-top: 0 !important; /* no top margin on first element in card */
}

.accordion .card-body > :last-child {
    margin-bottom: 0 !important; /* no bottom margin on last element in card */
}

/* Vanilla collapse behavior (was Bootstrap's .collapse) */
.accordion .collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-toggle:focus-visible {
  outline-offset: 4px; /* increase to push keyboard focus further out, e.g. 6px or 8px */
}

/* ==================================================
   Card Header & Heading Spacing
   ================================================== */

/* Adjust card-header padding */
.accordion .card-header {
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 1rem;
  padding-right: 1rem;
}
.accordion .card-header h2.accordion-heading {
  margin: 0 !important;
}

/* ==================================================
   CMS Editing Override — forces accordion panels open
   inside Surreal CMS editor only, no effect on front end
   ================================================== */
.is-cms .accordion .collapse {
  max-height: none !important;   /* overrides both the 0 default and any inline JS-set max-height */
  overflow: visible !important;  /* ensures content isn't clipped even if max-height calc is off */
}

.is-cms .accordion [inert] {
  /* placeholder in case inert still causes issues in the editor — test first */
}

/* ==================================================
   CLINIC TABLE
   ================================================== */

.tableheadertext {font-weight: 600; 
  line-height: 1.25em;
  }

.clinictable {
	background-color: #CCC;
	border-spacing: 1px;
	line-height: 1.4rem;
    margin-top: 0.5em;
	border-radius: 0;
    width: 100%;
}

.clinictable th {padding: 12px; text-align: left; font-weight: 600; font-size: 1em; background-color: #f7f7f7 }
.clinictable td {padding: 12px; text-align: left;}
.clinictable tr:nth-child(even) {background-color: #f7f7f7}	
.clinictable tr:nth-child(odd) {background-color: #ffffff}	
.clinictable p {margin-bottom:1.25em; padding-bottom:0;}
.clinictable h2 {font-size: 1.25em; line-height: 1.3em; margin-bottom: 1em;}
.clinictable h3 {font-size: 1.25em; line-height: 1.3em; margin-bottom: 1em;}

.clinictable .oh-label {width: 50%} /* make opening hours table 50% equal columns */
.clinictable .oh-value {width: 50%}

/* Logoflex row for google reviews etc home page */
.logo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* horizontal centering */
  align-items: center;     /* vertical centering within the row */
  gap: 35px; /* space between logos */
  margin-top: 40px; /* space after intro content */
}

.logo-row img {
  height: 50px;
  width: auto;
  display: block;
}

@media (max-width: 767px) {
  .logo-row {
    justify-content: flex-start; /*left align logos at 767px and below */
  }
  .logo-row img {
  height: 40px; /* reduce logo size at 767px and below */
  }
}
@media (min-width: 768px) {
  #cqc-logo-home {
    display: none !important; /* Hide CQC logo from row at 768px and above where appears in header */
  }
}