/* General styles */

body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
	font-weight: normal;
	color: #252122;
	font-size: 15px;
	line-height: 1.7;

}

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

html {
  scroll-behavior: smooth;
}

/* Horizontal rules */
hr {
    height: 1px;
    border: none;
    margin: 20px 0; /* optional, adjust or remove */
    background-color: #dedede;
    box-shadow: none;
}

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

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

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

.white-bg {
	background: #fff; /* give sections a white 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%;
}

/* Clinic table */

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

.clinictable {
	background-color: #CCC;
	border-spacing: 1px;
	line-height: 1.25em;
	-khtml-border-radius: 0px;
	-moz-border-radius: 0px;
	-khtml-border-radius: 0px;
	border-radius: 0px;
	margin-top:0.5em;
	margin-bottom: 2em;
    width: 100%;

}
.clinictable th {padding: 12px; text-align: left; font-weight:600; font-size: 1rem; }
.clinictable td {padding: 12px; text-align: left;}
.clinictable tr:nth-child(even) {background-color: #ffffff}	
.clinictable tr:nth-child(odd) {background-color: #f7f7f7}
.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;}

/* Remove default paragraph margin inside clinic tables */
.clinictable p {
    margin: 0 !important; /* removes extra space for single-paragraph cells */
}

/* Add spacing only between multiple paragraphs in the same cell */
.clinictable p + p {
    margin-top: 1rem !important; /* adjust as needed */
}

/* Red Alert Box */
.redalert {background-color: #d5281b; padding: 15px 20px 0 20px ; color:#ffffff; border-bottom: 5px solid #d5281b; position: relative;}
.redalert:after {
    content:'';
    position: absolute;
    left: 35px;
    right: 0;
    margin-top: 0 ;
    width: 0;
    height: 0;
    border-top: 20px solid #d5281b;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
}

/*=============================================
Responsive Data Table that collapses to cards
=============================================*/

/* Desktop Table Styles */
.data-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #dedede;
    background: white;
    margin-bottom: 2rem;
}

.data-table thead {
    display: table-header-group;
}

.data-table tbody {
    display: table-row-group;
}

.data-table tr {
    display: table-row;
}

.data-table th,
.data-table td {
    display: table-cell;
    border: 1px solid #dedede;
    padding: 12px;
    text-align: left;
}

.data-table th {
    background-color: #f7f7f7;
}

.data-table td {
    background-color: white;
}

.data-table p {
    margin: 0;
}

.data-table p + p {
    margin-top: 1rem;
}

/* Specific widths for desktop */
.data-table1 th:first-child,
.data-table1 td:first-child {
    width: 40%;
}

.data-table2 th:nth-child(1),
.data-table2 td:nth-child(1) { width: 20%; }
.data-table2 th:nth-child(2),
.data-table2 td:nth-child(2) { width: 40%; }
.data-table2 th:nth-child(3),
.data-table2 td:nth-child(3) { width: 20%; }
.data-table2 th:nth-child(4),
.data-table2 td:nth-child(4) { width: 20%; }

/* Remove pseudo content by default */
.data-table td::before { content: none; }

/*=============================================
Responsive Styles - breakpoint 1023px
=============================================*/
@media (max-width: 1023px) {
    .data-table {
        border: none;
    }

    .data-table thead {
        display: none;
    }

    .data-table tbody {
        display: block;
    }

    .data-table tr {
        display: block;
        background: white;
        border: 1px solid #dedede;
        margin-bottom: 16px;
        padding: 16px;
    }

    .data-table tr:last-child {
        margin-bottom: 0;
    }

    /* Force all table cells and headers to 100% width */
    .data-table td,
    .data-table th,
    .data-table2 th:nth-child(1),
    .data-table2 td:nth-child(1),
    .data-table2 th:nth-child(2),
    .data-table2 td:nth-child(2),
    .data-table2 th:nth-child(3),
    .data-table2 td:nth-child(3),
    .data-table2 th:nth-child(4),
    .data-table2 td:nth-child(4) {
        display: block;
        border: none;
        padding: 0;
        margin-bottom: 12px;
        text-align: left;
        width: 100% !important; /* important to override desktop widths */
    }

    .data-table td:last-child {
        margin-bottom: 0;
    }

    /* Pseudo-element for labels */
    .data-table td::before {
        content: attr(data-label);
        display: block;
        font-weight: bold;
        margin-bottom: 8px;
    }
}



/* Blue Alert Box */
.bluealert {background-color: #2C71B3; padding: 15px 20px 0 20px ; color:#ffffff; border-bottom: 5px solid #2C71B3; position: relative;}
.bluealert:after {
    content:'';
    position: absolute;
    left: 35px;
    right: 0;
    margin-top: 0 ;
    width: 0;
    height: 0;
    border-top: 20px solid #2C71B3;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
}

/* Blue Alert heading */
.bluealert h2, .redalert h2 {
    color: #fff;
    font-size:1.25em;
    margin-top: 0.25em !important;
    margin-bottom: 0.75em !important;
}

/*Alert Box Background & Border */
.alertbox {
	background-color:#fff;
	border: 1px solid #dedede;
	padding:40px 20px 20px 20px;
}
.alertbox-outer {
    margin-bottom: 35px;
}
.alertbox ul, ol {
	margin-left: 20px; /* add or remove left margin to lists */
	padding-left: 0; /* add or remove left padding to lists */
}
.alertbox h2, h3 {
	font-size: 1.25rem !important; /* Set size of headings inside alert box content */
}
/* Green check mark list */
.checklist ul {
    list-style-type: none;
    position: relative;
}

.checklist ul li {
    position: relative;
    padding-left: 30px; /* Adjust padding to make space for the icon */
}

.checklist ul li::before {
    font-family: "Font Awesome 5 Free";
    content: "\f00c"; /* Tick mark icon */
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    font-weight: bold;
    font-size: 1.2em;
    color: #007f3b;
    line-height: 1.5; /* Ensure the icon is vertically aligned with the text */
}

/* Red X mark list */
.xmarklist ul {
    list-style-type: none;
    margin-left: 0; /* add or remove left margin to lists */
	padding-left: 0; /* add or remove left padding to lists */
    position: relative;
}

.xmarklist ul li {
    position: relative;
    padding-left: 30px; /* Adjust padding to make space for the icon */
}

.xmarklist ul li::before {
    font-family: "Font Awesome 5 Free";
    content: "\f00d"; /* Tick mark icon */
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    font-weight: bold;
    font-size: 1.2em;
    color: #d5281b;
    line-height: 1.5; /* Ensure the icon is vertically aligned with the text */
}


/*-- End alert box and checklist */

/* Banner Home Page */
@media (min-width: 768px) {
.banner-desktop {
	display: block;
	margin-bottom: clamp(1.25rem, 1.0682rem + 0.9091vw, 1.875rem); /* margin beneath banners */
	}
.banner-mobile {
	display: none; /* hide mobile versions of home page banners on desktop */
	}
}

@media (max-width: 767px) {
.banner-desktop {
	display: none; /* hide desktop banner on mobile devices */
	}
.banner-mobile {
	display: block; /* show mobile versions of home page banners on mobile devices*/
	margin-bottom: clamp(1.25rem, 1.0682rem + 0.9091vw, 1.875rem); /* margin beneath banners */
	}
}

img {
	max-width: 100%;/* restrict images to max of 100% size or 100% of their parent container */
}
.sitelogo {
	max-width: 165px; /* set a maximum width for the site's logo */
	align-self: flex-start; /* Ensure the logo is aligned to the left */	
    margin-top: auto; /* push to bottom */
}
@media (max-width: 575px) {
	.sitelogo {
		max-width: 130px; /* Reduce size of logo at 575px to avoid overcrowding in header */
	}
}

@media (max-width: 380px) {
	.sitelogo {
		max-width: 110px; /* Reduce size of logo on smaller mobiles to avoid overcrowding in header */
	}
}


@media (min-width: 576px) and (max-width: 1200px) {
	.cqc {
		margin-right: 50px; /* add right margin to cqc logo between 546px and 1200px */
	}
}

.banner {
	margin-bottom: 0;
}

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

/* GTranslate position Responsive overrides */
/* Default: large screens (center horizontally, 20px from top) */
#gt_float_wrapper {
  /* position: fixed !important;
  position: relative !important; /* moves with content - or just omit position */
  top: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 999999 !important;
}

/* Screens 980px down to 768 px (shift to fixed value from left) */
@media (max-width: 980px) {
  #gt_float_wrapper {
    right: auto !important;
    left: 210px !important;
    top: 20px !important;
    transform: none !important;
  }
}

/* Screens 980px and below (fix 80px from right, 20px from top) */
@media (max-width: 767px) {
  #gt_float_wrapper {
    left: auto !important;
    right: 80px !important;
    top: 20px !important;
    transform: none !important;
  }
}
/* Screens 380px and below (fix 875px from right, 20px from top) */
@media (max-width: 380px) {
  #gt_float_wrapper {
    left: auto !important;
    right: 75px !important;
    top: 20px !important;
    transform: none !important;
  }
}
/* Header CQC and google reviews */
.google-reviews {
	max-width: 140px; /* set a maximum width for the google reviews logo in the header */
	align-self: flex-end; /* Align to the right */
	margin-bottom: 0;
}

.cqc {
	max-width: 162px; /* set a maximum width for the cqc logo in the header */
	align-self: flex-end; /* Align to the right */
	margin-bottom: 0;
}

.cqc-reviews {
  display: flex;          /* put children in a row */
  gap: 18px;              /* space between images */
  align-items: center;    /* optional: vertically align if images differ in height */
}
    @media screen and (max-width: 767px) {
  .cqc-reviews {
    display: none; /* hide from header on smaller screens */
  }
}

/* Additional style for CQC and Google reviews on home page */
.cqc-reviews-home {
  display: flex;          /* put children in a row */
  gap: 15px;              /* space between images */
  align-items: center;    /* vertically align items */
  justify-content: center; /* center items horizontally */
  margin-bottom: 20px;
}
    @media screen and (min-width: 768px) {
  .cqc-reviews-home {
    display: none; /* hide from home page on larger screens where they display in the header instead */
  }
}
.google-reviews-home, .cqc-home {
	width: 180px; /* set a width for the google reviews & cqc logos on home page */
}

@media (max-width: 400px) {
	.google-reviews-home, .cqc-home {
		width: 130px; /* resize google reviews & cqc logos on smaller screens */
	}
}

/* Typography */

/* Add a bit more spacing on h2s and h3s in main area of pages */
#main-content h2, h3 {
    margin-top: 1.75rem;
    margin-bottom: 1.75rem;
}
#main-content h1 {
    margin-bottom: 1.75rem;   
}

h1, h2, h3, h4, h5, h6 {
	color: #252122;
	font-weight: 700;
	line-height: 1.25;	
	margin-bottom: 1rem;
	margin-top: 1rem;
}

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);
}
h3 {
	font-size: clamp(1.5rem, 1.5773rem + 0.3636vw, 1.75rem);
}

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

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

ul, ol {
	margin-top: 0;
	margin-bottom: 2rem;
}

ul {
	list-style-type: disc /* change the standard bullet point to a solid circle - change as required */
}

li {
    margin-bottom: 1rem;
}

a {
	color: #396FAC;
	text-decoration: underline;
}
a:hover {
	color: #009FD6;
	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 dotted #F89823; /* outline for keyboard users */
  }
  
  /* Target banner image links on home page for keyboard focus */
  #banners a:focus-visible img {
    outline: 4px dotted #F89823; /* apply the outline to image links */
  }

  /* 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: #252122;
  }

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

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

/* Header and Main Section spacing , background colours etc to override standard section styles */
.header-section {
   background: white;
   padding-top: 20px; /* Override section padding with clamp that takes padding top and bottom from 20px to 30px */
	padding-bottom: 20px;
}
.banner-section {
   background: #f5f6f7;
}
.main-section {
   background: #ffffff;
}
.main-grid-section {
   background: #f5f6f7;
}
.main-grid-alt-section {
   background: #f5f6f7;
}

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

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

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

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

.custom-grid-section {
   background: #2C71B3; /* This month section */
}


/* Header CSS */

.header {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.header .column {
    flex: 1;
    display: flex;
    flex-direction: column;
	margin-top: auto;
	min-height:0;
}

.header .column:first-child {
    justify-content: flex-end; /* align the content to the bottom */
    align-items: flex-start/* aligns the content to the left */
}

.header .column:last-child {
    justify-content: flex-end; /* align the content to the bottom */
    align-items: flex-end/* aligns the content to the left */
}

.search-container {
    display: flex;
    align-items: flex-end; /* Vertically align the search box and button to bottom */
    justify-content: flex-end; /* Align the search box and button to the right */
}

.search-box {
    align-self: flex-end; /* Align the search box to the bottom */
	max-width: 100%;
	border: 1px solid #ccc;
	padding: 6px;
	border-radius: 5px; /* Rounded corners  */
	font-size: 0.95rem;
	color: #8a8a8a;
}

.search-box:focus {
    border: 1px solid #2C71B3; /* change border colour */
	outline: none;
    box-shadow: 0 0 5px rgba(69, 104, 161, 0.75); /* Apply a 5px blur box shadow when focused */
}
	
.search-button {
	align-self: flex-end; /* Align the search box to the bottom */
    padding: 8px 10px;
    background-color: #2C71B3; /* Blue background */
    color: white;
    text-decoration: none;
	line-height: 1;
    font-size: 0.925rem;
	margin-left: 10px; /* margin-to the search box */
    border-radius: 5px; /* Rounded corners  */
    transition: background-color 0.3s ease;
}

.search-button:hover {
    background-color: #009FD6; /* change background on hover */
	color: white; /*ensure button text remains white on hover */
}

/* Responsive change to header layout at 575px and below */
@media (max-width: 575px) {
    .header {
        flex-direction: column; /* Stack header colums vertically on mobile */
    }

    .header .column {
        width: 100%;
        align-items: flex-start; /* Align header columns to the left on mobile */
    }
	
	.search-container {
        width: 100%; /* Make the search container take full width */
        justify-content: flex-start; /* Align the search box and button to the left */
    }

    .search-box {
        align-self: flex-start; /* Align the search box to the left on mobile*/
		margin-top: 15px; /* add top margin */
		width: calc(100vw - 40px); /* Use calc to make search box full width minus the search button width */
    }
}

/* Navigation Styles */
.navigation {
    background-color: #2C71B3; /* 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: 65px;             /* 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 one 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;
}

.hero-section {
	height: clamp(21.875rem, 18.2386rem + 18.1818vw, 34.375rem);
	padding: 20px 20px 20px 20px; /* overwrite default section padding */
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center center;
    position: relative;
    text-align: left; 
}

.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Black overlay with 30% opacity */
    z-index: 0;
}

.hero-container {
    position: relative;
    z-index: 2;
    padding: 0; /* add padding  as required */
}

.text-content {
	width: 100%;
    max-width: 750px; /* restrict width of div with text in */
	text-align: left;
	color: white;/* Make text  white */
}

.text-content .heading {
    font-size: clamp(2rem, 1.6852rem + 1.4815vw, 3rem);
    font-weight: 600; 
    text-transform: uppercase;
    margin: 0.5em 0;
    line-height: 1.2;
}

.text-content .subheading {
    font-size: clamp(1.3rem, 1.1898rem + 0.5185vw, 1.65rem);;
    font-weight: 600; 
    text-transform: uppercase;
    margin: 0.5em 0;
    line-height: 1.2;
}

/* Home Page Grid Styles */

.main-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns as default */
  gap: 30px;
  grid-auto-rows: minmax(min-content, max-content); /* Auto-adjust row heights */
}

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

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

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

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

.main-grid .grid-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  display: inline-block; /*adding this restricts the hover underline effect to the width of the text not the whole div */
  text-align: center; /* Center the inline-block horizontally */
  height: 100%; /* make sure the grid item fills 100% of row height */
  width: 100%; /* make sure the grid item fills 100% of available width */
  background: #2C71B3;
  padding-bottom: 20px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15); /* add light box shadow to grid item */
}

.main-grid .grid-item:hover {
  background: #00AC60; /* Change grid item background colour on hover */
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); /* darken box shadow on grid item on hover */
}

.main-grid .grid-item p  {
  margin: 15px 0 0 0;
  text-align: center; /* Center the text horizontally */
  color: #fff;
  font-size: 1.25rem;
  font-weight: 600;
  display: inline-block; /* adding this restricts the hover underline effect to the width of the text not the whole div */
}

.main-grid .grid-item:hover p {
  color: #fff; /* change text colour on hover of wrapper div */
}

.main-grid .grid-item a {
   color: #fff;
}

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

/* 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 {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* left align items */
  /*display: inline-block;  adding this restricts the hover underline effect to the width of the text not the whole div */
  text-align: left; /* Left align the text content */
  background: #fff;
  height: 100%; /* make sure the grid item fills 100% of row height */
  width: 100%; /* make sure the grid item fills 100% of available width */
  padding: 20px; /* Set padding */
  border: 2px solid transparent; /* Set border color as transparent for hover-effect */
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15); /* Add light box shadow to grid item */
  transition: background .3s ease-in-out, border .3s ease-in-out; /* Set transitions for grid item hover effects */
}

.main-grid-alt .grid-item:hover {
  background: #fff; /* set grid item background on hover */
  border: 2px solid #2C71B3; /* Set border color on hover */
  /*box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);  /* darken box shadow on grid item on hover */
}

.main-grid-alt .grid-item p  {
  margin: 15px 0 0 0;
  text-align: left; /* left align the text horizontally */
  color: #252122;
  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-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: #252122; /* set text colour on hover of wrapper div */
}

.main-grid-alt .grid-item a {
   text-decoration: none; /* Remove default underline from text as removing it from the grid p doesn't work*/
   color: #fff;
}

.main-grid-alt .grid-item i {
    font-size: 24px; /* icon size */
    color: white; /* icon colour */
	max-width: 48px;
	font-weight: 700;
	padding: 12px; /* add padding around icon */
	background: #2C71B3; /* set background colour behind icon */
	border-radius: 5px; /* Add some curve radius to icon background */
    margin-bottom: 0; /* Space between icon and text */
}

.main-grid-alt .grid-item:hover img {
  /* Add styles if needed */
}

/* Home Page Grid Alternative 2 Styles */

.main-grid-alt2 {
  display: grid;
    grid-template-columns: repeat(2, 1fr); /* Three equal columns */
    grid-template-rows: auto; /* Rows adjust to the tallest item */
    gap: 25px; /* Gap between items */
}
.main-grid-alt2 a {
    text-decoration: none !important; /* removes any default underlining of links */
  }

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

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

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

.main-grid-alt2 .grid-item {
  display: flex;
  flex-direction: row; /* Ensure items are arranged in a row */
  align-items: center; /* Vertically center align items */
  justify-content: flex-start; /* Horizontally align items to the left */
  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: 15px; /* Set padding */
  border: 2px solid #d8d7d7; /* Set border color for hover-effect */
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);  /* Add light box shadow to grid item */
  transition: background .3s ease-in-out, border .3s ease-in-out; /* Set transitions for grid item hover effects */
}


.main-grid-alt2 .grid-item:hover {
  background: #fff; /* set grid item background on hover */
  border: 2px solid #2C71B3; /* Set border color on hover */
  /*box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);  /* darken box shadow on grid item on hover */
}

.main-grid-alt2 .grid-item p  {
  margin: 0;
  text-align: left; /* left align the text horizontally */
  color: #252122;
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 600;
  display: inline-block; /* adding this restricts the hover underline effect to the width of the text not the whole div */
}

.main-grid-alt2 .grid-item h2  {
  font-size: clamp(1.3rem, 1.1418rem + 0.2909vw, 1.4rem);
  font-weight: 600;
  display: inline-block; /* Ensure h2 does not take up the entire row */
  margin: 0; /* Reset any default margins */
}

.main-grid-alt2 .grid-item:hover p {
  color: #252122; /* set text colour on hover of wrapper div */
}

.main-grid-alt2 .grid-item i {
    font-size: 24px; /* icon size */
    color: white; /* icon colour */
	max-width: 48px;
	font-weight: 700;
	padding: 12px; /* add padding around icon */
	background: #2C71B3; /* set background colour behind icon */
	border-radius: 5px; /* Add some curve radius to icon background */
    margin: 0 15px 0 0; /* right margin between icon and text */
}

.main-grid-alt2 .grid-item:hover img {
  /* Add styles if needed */
}


/* Home Page Grid Alternative 3 Styles */

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

.main-grid-alt3 a {
	text-decoration: none !important; /* remove any default underliing of links */
}

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

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

@media (max-width: 575px) {
    .main-grid-alt3 {
        grid-template-columns: 1fr; /* 1 columns at mobile breakpoint */
		 }
}

.main-grid-alt3 .grid-item {
    display: flex;
    align-items: flex-start;
    justify-content: center;
	height: 100%; /* make sure the grid item fills 100% of row height */
	width: 100%; /* make sure takes up 100% width */
	background: #2C71B3; /* background colour of grid items */
	padding: 30px; /* set padding on grid items */
	transition: background ease-in-out .3s; /* set transition for hover effect on grid items */
}

.main-grid-alt3 .grid-item a {
text-decoration: none !important; /* remove any default link underlining on grid items*/
}

.main-grid-alt3 .grid-item:hover {
    background: #252122; /* set background colour on hover */
}

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

.main-grid-alt3 .grid-item .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;
}

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

.main-grid-alt3 .grid-item i {
    font-size: clamp(2.75rem, 2.5318rem + 1.0909vw, 3.5rem); /* Icon size */
    color: white;
	font-weight: 700;
    margin-bottom: 14px; /* Space between icon and text*/
}

.main-grid-alt3 .grid-item img {
    max-width: clamp(3.25rem, 3.0318rem + 1.0909vw, 4rem); /* SVG icon size */
    color: white;
	margin-bottom: 14px; /* If using svg icon instead of font awesome icon */
}

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

/* Home Page Grid Alternative 4 Styles Using Buttons */

.main-grid-alt4 {
  display: grid;
    grid-template-columns: repeat(2, 1fr); /* two 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(2, 1fr); /*  keep number of columns in grid row to 2 */
    gap: 25px; /* Reduce gap size */
  }
}

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

@media (max-width: 767px) {
    .main-grid-alt4 {
    grid-template-columns: repeat(2, 1fr);  /* push number number of columns in grid row back to 2 at non standard breakpoint */
    gap: 25px; /* Reduce gap size */
  }
}
 
 @media (max-width: 650px) {
    .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;
  justify-content: space-between; /* push button to bottom */
  text-align: left;
  background: #fff;
  height: 100%;
  width: 100%;
}

.main-grid-alt4 .grid-item .grid-button1 {
  display: flex;
  align-items: center;     /* vertically center text + icon */
  justify-content: flex-start; /* everything left-aligned */
  width: 100%;
  padding: 12px 16px;
  box-sizing: border-box;
  color: #252122;
  background: #fff;
  border: 2px solid #d8d7d7;
  box-shadow: 0 0 10px rgba(0,0,0,0.15);
  cursor: pointer;
  font-size: clamp(1rem, 0.9213rem + 0.3704vw, 1.25rem);
  font-weight: 600;
  line-height: 1.2;
  transition: border 0.3s ease-in-out;
}

.main-grid-alt4 .grid-item .grid-button1:hover {
  border: 2px solid #2C71B3;
}

/* Pseudo-element for arrow inside blue square */
.main-grid-alt4 .grid-item .grid-button1::before {
  content: "\f061"; /* Font Awesome right arrow */
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900;
  display: flex;
  justify-content: center;
  align-items: center;
  width: clamp(2.375rem, 2.2176rem + 0.7407vw, 2.875rem);    /* square size */
  height: clamp(2.375rem, 2.2176rem + 0.7407vw, 2.875rem);   /* square size */
  margin-right: 15px;  /* space between icon and text */
  background: #2C71B3; /* blue square */
  color: #fff;         /* white arrow */
  border-radius: 5px;  /* optional rounded corners */
  font-size: clamp(1.125rem, 1.0463rem + 0.3704vw, 1.375rem);  /*icon size */
  flex-shrink: 0;      /* prevent shrinking */
}



/* 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: 0px 0px 10px 0px 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: #252122;
  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: #252122; /* 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 */
}


/* 4 button Grid Styles */
.button-grid a {
    text-decoration: none; /* Remove underlines */
	color: white;
	display: block; /* Make the entire grid item clickable */
}

.button-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Four equal columns */
    gap: 0; /* No gap between grid items initially */
	font-size: clamp(3.125rem, 3.3977rem + -1.3636vw, 2.1875rem);
	margin-top: -110px; /*shift grid up to overlap hero section */
	box-shadow: 
        -3px 0 5px rgba(0, 0, 0, 0.15),  /* Left shadow */
         3px 0 5px rgba(0, 0, 0, 0.15),  /* Right shadow */
         0 3px 5px rgba(0, 0, 0, 0.15);  /* Bottom shadow */
}

@media (max-width: 1023px) {
    .button-grid {
        grid-template-columns: repeat(2, 1fr); /* Two columns on smaller screens */
        gap: 15px; /* 15px gap between grid items */
		margin-top: 0; /* remove the margin top and overlay of hero when drops to 2 columns */
		box-shadow: none; /* remove box shadow when goes to 2 columns */
    }
}

@media (max-width: 575px) {
    .button-grid {
        grid-template-columns: 1fr; /* One column on mobile screens */
        gap: 15px; /* 15px gap between grid items */
    }
}

.button-grid .grid-item {
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    height: clamp(3.75rem, 2.6591rem + 5.4545vw, 7.5rem); /* variable height for grid items */
    background-color: #3c82c2; /* Default background color */
    transition: background-color .25s ease-in-out; /* Smooth transition */
    padding: 0 20px; /* Add some left and right space */
    position: relative; /* Position relative for ::after pseudo element*/
    color: #fff; /* set text color */
	font-size: clamp(0.9375rem, 0.883rem + 0.2727vw, 1.125rem);
	font-weight: 500;
	text-transform: uppercase;
}

.button-grid .grid-item::after {
    content: "\f061"; /* Font Awesome right arrow icon (using Unicode value) */
    font-family: "Font Awesome 5 Free"; /* Ensure Font Awesome font family is used */
    font-weight: 900; /* Font Awesome icons require font-weight 900 */
    margin-left: 12px; /* Space between text and icon */
    display: inline-block;
	color: white;
    transition: transform .25s ease-in-out; /* Smooth transition for movement */
    transform: translateX(0); /* Initial position */
}

/* Background colors for different grid items */
.button-grid .grid-item:nth-child(2) {
    background-color: #3375b7;
}

.button-grid .grid-item:nth-child(3) {
    background-color: #2c65a3;
}

.button-grid .grid-item:nth-child(4) {
    background-color: #24528f;
}

.button-grid .grid-item:hover {
    background-color: #009FD6; /* Change background of all grid-items to this colour on hover */
}

.button-grid .grid-item:hover::after {
    transform: translateX(5px); /* Move the arrow 5px to the right */
}



/* 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 */
	}
}


/* Footer Styles */
.footer {
    background-color: #252122;
    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 .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: #009FD6;
	text-decoration: underline;
}

.footer h3 {
	color: #f5f6f7; /* Change colour of h3 heading in footer */
    margin-bottom: 1.75rem !important;
}
.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: 1;
	padding-bottom: 1rem !important;
	border-bottom: 1px solid #3a3a3a; /* add a border between list items */
}
/* .footer li:not(:last-child) { 
	border-bottom: 1px solid #a1a1a1; /* add a border between list items 
} */

/* Responsive 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(1.875rem, 1.4205rem + 2.2727vw, 3.4375rem); /* Clamp that takes padding top and bottom from 30px on mobile to 55px on desktop */
	padding-bottom: clamp(1.875rem, 1.4205rem + 2.2727vw, 3.4375rem);
	/* outline: 2px solid red; */
}

.container {
    max-width: 1350px;
    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 Pages 2-column Layout*/
.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: 20px 0 0 0; /* div containing text content in left column */
	background: #ffffff;
}

.column.right {
  flex: 0 0 30%; /* Right column 30% of row width */
  /* background: #ffffff; */
  /* outline: 2px solid yellow; */
}
.sidebar-content {
	padding: 20px; /* Add padding and white background andbottom border to sidebar content in right column */
	background: #f5f6f7; 
	border-bottom: solid 1px #ccc;
}
.sidebar-content p {
	font-size: clamp(0.9375rem, 0.8568rem + 0.0909vw, 0.9375rem); /* reduce size of text in sidebar */ 
}


@media (max-width: 1023px) {
  .column.left {
    flex: 0 0 60%; /* Left column 60% of row width */
  }

  .column.right {
    flex: 0 0 40%; /* Right column 40% of row width */
  }
}

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

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

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

.column.homeleft {
    flex: 0 0 60%; /* Left column 60% of row width */
    padding-right: 30px; /* Not ideal but colum gap seems to break design */
    box-sizing: border-box;
    display: flex; /* Enable Flexbox */
    justify-content: center; /* Vertically center the content */
    align-items: flex-start; /* Horizontally lef align the content */
    min-height: 100%; /* Ensure the column takes full height of the row */
}

.column.homeright {
    flex: 0 0 40%; /* Right column 40% of row width */
    box-sizing: border-box;
    min-height: 100%; /* Ensure the column takes full height of the row */
    background-size: cover;
    background-position: center;
	min-height: clamp(21.25rem, 20.1591rem + 5.4545vw, 25rem); /* Minimum height of column to display background image */
}

@media (max-width: 1200px) {
  .column.homeleft {
    flex: 0 0 50%; /* Left column 50% of row width */
  }

  .column.homeright {
    flex: 0 0 50%; /* Right column 50% of row width */
  }
}

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

  .column {
    flex: 1 0 auto; /* reduce to 1 column layout */
  }
  
  .column.homeleft {
   padding-right: 0px; /*remove right padding */
   padding-bottom: 20px; /* add bottom to create space between content and pictures on mobile */
	}
.column.homeright {
	display: block; /* Show or 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 */

/* Ensure Font Awesome is included in your HTML head or CSS */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css'); /* Example for Font Awesome 6 */

/* Base styles for the button */
.button1 {
    -webkit-appearance: none;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    color: white;
    border-radius: 0;
    background: #2C71B3;
    font-weight: 500;
    text-transform: uppercase;
    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.9375rem, 0.883rem + 0.2727vw, 1.125rem);
    line-height: 1.2;
    padding: 18px 25px;
    position: relative; /* Ensure the pseudo-element is positioned relative to the button */
    margin-right: 15px;
    margin-bottom: 1rem;
}

/* Styles for the button when hovered */
.button1:hover {
    background: #009FD6;
    color: white;
}

/* Adding Font Awesome icon using ::after pseudo-element */
.button1::after {
    content: "\f061"; /* Font Awesome right arrow icon (using Unicode value) */
    font-family: "Font Awesome 5 Free"; /* Ensure Font Awesome font family is used */
    font-weight: 900; /* Font Awesome icons require font-weight 900 */
    margin-left: 12px; /* Space between text and icon */
    display: inline-block;
    transition: transform .25s ease-in-out; /* Smooth transition for movement */
    transform: translateX(0); /* Initial position */
}

/* Animation effect for hover */
.button1:hover::after {
    transform: translateX(5px); /* Move the arrow 5px to the right */
}

		
	/* Add the focus effect to this button only for keyboard users */
   .button1:focus-visible {
    outline: 4px dotted #F89823; 
	background: #009FD6;
	border: none;
	}	
	/* Remove focus effect for this button when clicked with a mouse */
	.button1:focus:not(:focus-visible) {
		background: #009FD6;
		outline: none; /* Removes the orange dotted border */
 	 }

			.button1:active {
			background: #009FD6;
		}

/* Alternative Button */

			.button1.alt {
			background: #2C71B3;
			color: #fff !important;
		}

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

	/* 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;
		}

/* Base styles for button2 without icon */
.button2 {
    -webkit-appearance: none;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    color: white;
    border-radius: 0;
    background: #2C71B3;
    font-weight: 500;
    text-transform: uppercase;
    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.9375rem, 0.883rem + 0.2727vw, 1.125rem);
    line-height: 1.2;
    padding: 18px 25px;
    position: relative; /* Ensure the pseudo-element is positioned relative to the button */
    margin-right: 15px;
    margin-bottom: 1rem;
}

/* Styles for the button2 when hovered */
.button2:hover {
    background: #009FD6;
    color: white;
}
/* Add the focus effect to this button2 only for keyboard users */
   .button2:focus-visible {
    outline: 4px dotted #F89823; 
	background: #009FD6;
	border: none;
	}	
	/* Remove focus effect for this button2 when clicked with a mouse */
	.button1:focus:not(:focus-visible) {
		background: #009FD6;
		outline: none; /* Removes the orange dotted border */
 	 }

			.button2:active {
			background: #009FD6;
		}
/* Accordian Styles */
.accordion {
  width: 100%;
  border: 1px solid #dedede;
  border-radius: 0;
  overflow: hidden;
  margin-bottom:2.75rem;
}

.accordion-item {
  border-top: 1px solid #dedede;
}

.accordion-item:first-child {
  border-top: none;
}

.accordion-header {
  width: 100%;
  background: #f7f7f7;
  padding: 15px;
  text-align: left;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion-header p {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0; /* Removes default paragraph spacing */
  padding: 0;
}

.accordion-header::after {
  font-family: "Font Awesome 6 Free"; /* ensure FA is loaded */
  content: "\f067"; /* fa-plus */
  font-weight: 900;
  margin-left: 10px;
}

.accordion-header.active::after {
  content: "\f068"; /* fa-minus */
}

.accordion-content {
  background: #fff;
  padding: 15px;
  display: none;
}

/* Blockquote Styling */
blockquote {
  border-left: 3px solid #2C71B3;
  margin: 1.5rem 0 2.75rem 0; /* space above and below, no extra left/right margin */
  padding-left: 2rem; /* space between border and content */
}

/* Horizontal Rule (HR) Styling */
hr {
  border: none;               /* Remove default border */
  height: 1px;                /* 1px high */
  background-color: #dedede;  /* Set color */
  margin-bottom: 2rem;     /* Space below */
}