/*
Theme Name: Cornerstone Systems 2026
Theme URI: https://cornerstone-systems.com
Description: Cornerstone Systems 2026
Version: 1.1
Author: Lab Digital Creative
Author URI: https://labdigitalcreative.com
Tags: 
*/

/* =============================================================================
   HTML5 CSS Reset Minified - Eric Meyer
   ========================================================================== */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
li{list-style:none}

textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
.input-checkbox {
-webkit-appearance: none;
border-radius: 0;
}

:root {
    --text: #0a0a0a;
    --textalt: #6c757e;
    --white: #ffffff;
    --lblue: #62aedf;
    --green: #389c93;
    --blue: #003d6a;
    --border: #e5e5e5;
    --mblue: #124773;
    --mgray: #e5ebf0;
    --ggray: #eff9f7;
    --lblueh: #5da3cf;
    --lgray: #fdfeff;
    --footlink:#d2d8df;
 	--copytext: #92acc0;
	--footline: #184f79;   
	--navhover: #e8f3f8;
	--grayalt: #f2f6f7;
}

/* 
==========================================================================
GLOBAL & WP SPECIFIC STYLES
==========================================================================
*/

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-text-size-adjust: none; 	
}

input, textarea, select {
    -webkit-border-radius:0; 
    border-radius:0;
}

img,
audio,
video,
canvas {
	max-width: 100%;
}

html {
	min-height: 100%;
	margin-bottom: 1px;
	overflow: -moz-scrollbars-vertical!important; 
}

::selection {
	background: var(--blue);
	color: var(--white);
}

::-moz-selection {
	background: var(--blue);
	color: var(--white);
}

::-webkit-selection {
	background: var(--blue);
	color: var(--white);
}

.cf:before,.cf:after {content: " "; /* 1 */    display: table; /* 2 */}
.cf:after {clear: both;}
.cf {clear: both;}

strong, b {
	font-weight:bold;
}

em, i {
	font-style:italic;
}

img.alignright {
	float:right;
	margin:0 0 2em 1em;
}

img.alignleft {
	float:left;
	margin:0 2em 1em 0;
}

img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignright {
	float:right;
	margin:0 0 2em 1em;
}

.alignleft {
	float:left;
	margin:0 0 2em 1em;
}

img.wp-smiley {
	float: none;
	margin: 0 0 0 5px;
	vertical-align:middle;
}

p {
	margin: 0 0 20px 0;
}

a {
	color: var(--blue);
	text-decoration: none;
}

a:hover {
	color: var(--text);
	text-decoration: none;
}


/* 
==========================================================================
H & LINKS
==========================================================================
*/

h1 {
	font: 30px 'Inter', Helvetica , Arial, sans-serif;	
	margin:0 0 20px 0;
	padding:0;
}

h2 {
	font: 26px 'Inter', Helvetica , Arial, sans-serif;	
	margin:0 0 20px 0;
	padding:0;
}

h3 {
	font: 22px 'Inter', Helvetica , Arial, sans-serif;
	margin:0 0 20px 0;
	padding:0;
}

h4 {
	font: 20px 'Inter', Helvetica , Arial, sans-serif;
	margin:0 0 20px 0;
	padding:0;
}

h5 {
	font: 18px 'Inter', Helvetica , Arial, sans-serif;
	margin:0 0 20px 0;
	padding:0;
}


/* 
==========================================================================
GENERAL
==========================================================================
*/

body {
	background: var(--white);
	color: var(--textalt);
	font: 16px/1.45 'Inter', Helvetica, Arial, sans-serif;
  	margin: 0;
  	-webkit-font-smoothing: antialiased;
  	overflow-x: hidden;
	letter-spacing: -0.01em;
  	font-variant-numeric: tabular-nums;
}

.container {
	position: relative;
	width:100%;
	margin: 0 auto;
}

.inner {
	position: relative;
	width: 100%;
	max-width: 1450px;
	margin: 0 auto;
	padding: 0 25px;
}

/* 
==========================================================================
HEADER
==========================================================================
*/

.main-header {
  width: 100%;
  margin: 0;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  padding: 15px 0;
  height: 80px;
  transition: all .3s ease-in-out;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99999;
  height: 70px;
  padding: 10px 0;
  transition: all .3s ease-in-out;
}

.header-grid {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-items: stretch;
  align-items: center;
}

.header-col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.header-col li {
	display: inline-block;
	margin: 0 20px;
	padding: 0;
	list-style: none;
}

.header-col nav a {
	color: var(--text);
	font-size: 14px;
	font-weight: 600;
}

.header-col nav a:hover {
	color: var(--blue);
}

.hcr {
	text-align: right;
}

.hcm {
	text-align: center;
}


.logo {
	display: block;
    width: 250px;
    height: auto;
    margin: 0;  
}

.logo img {
	display: block;
    width: 100%;
    height: auto;
    margin: 0;  
}

.head-search {
	width: 18px;
	height: 18px;
	position: absolute;
	right:25px;
	top:16px;
		background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.head-search img {
	display: block;
    width: 100%;
    height: auto;
    margin: 0;  
}

.head-search:hover {
  opacity: 0.7;
  transition: all 0.2s ease-in-out;
}


.search-popout-wrap {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 130px 20px 40px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.22s ease, visibility 0.22s ease;
	z-index: 2000;
}

.search-popout-wrap.active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.search-popout {
	position: relative;
	width: 100%;
	max-width: 600px;
	background: #fff;
	border: 1px solid #d9d9d9;
	border-radius: 10px;
	box-shadow: 0 18px 40px rgba(0,0,0,0.18);
	padding: 26px 24px 28px;
	transform: translateY(12px);
	transition: transform 0.22s ease;
}

.search-popout-wrap.active .search-popout {
	transform: translateY(0);
}

.search-popout h3 {
	margin: 0 0 8px;
	font: 700 20px 'Inter', Helvetica, Arial, sans-serif;
	color: var(--text);
}

.search-popout p {
	margin: 0 0 18px;
	font: 16px 'Inter', Helvetica, Arial, sans-serif;
	color: var(--textalt);
}

.search-form {
	margin: 0;
}

.search-field {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 58px;
	background: var(--lgray);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 0 16px;
}

.search-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	opacity: 0.7;
}

.search-icon img {
	display: block;
	width: 18px;
	height: 18px;
}

.search-field input {
	width: 100%;
	border: 0!important;
	outline: none;
	background: var(--white)!important;
	font: 16px 'Inter', Helvetica, Arial, sans-serif;
	color: var(--text);
}

.search-field input::placeholder {
	color: var(--textalt);
}

.search-close {
	position: absolute;
	top: 12px;
	right: 14px;
	width: 34px;
	height: 34px;
	border: 0;
	background: none;
	font-size: 28px;
	line-height: 1;
	color: var(--text);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.search-close:hover {
	color: var(--blue);
}

body.search-open {
	overflow: hidden;
}

@media (max-width: 767px) {
	.search-popout-wrap {
		padding: 120px 16px 20px;
		align-items: flex-start;
	}

	.search-popout {
		padding: 22px 18px 22px;
		border-radius: 10px;
	}

	.search-popout h3 {
		font-size: 18px;
	}

	.search-popout p,
	.search-field input {
		font-size: 16px;
	}
}


/* 
==========================================================================
HOME
==========================================================================
*/

.home-hero {
  position: relative;
  width: 100%;
  height: 650px;
  display: flex;
  align-items: center;
}

.home-hero:before {
	content: "";
	background: linear-gradient(90deg,rgba(0, 0, 0, 0.6) 25%, rgba(0, 0, 0, 0.2) 100%);
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.inner-hero,
.inner-hero-alt {
  position: relative;
  width: 100%;
  height: 450px;
  display: flex;
  align-items: center;
}

.inner-hero:before {
	content: "";
	background: linear-gradient(90deg,rgba(0, 61, 106, 0.8) 25%, rgba(0, 61, 106, 0.7) 100%);
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.inner-hero-alt:before {
	content: "";
	background: rgba(0, 0, 0, 0.5);
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}


.hero-inner {
	max-width: 650px;	
}

.hero-inner h1 {
	font-size: 65px;
	font-weight: 800;
	color: var(--white);
	margin: 0 0 20px 0;
	line-height: 70px;
}

.hero-inner h5 {
	font-size: 22px;
	font-weight: 500;
	color: var(--white);
	margin: 0 0 20px 0;
	line-height: 30px;
}

.inner-hero-alt .hero-inner h1,
.inner-hero .hero-inner h1 {
	font-size: 45px;
	font-weight: 700;
	color: var(--white);
	margin: 0 0 20px 0;
	line-height: 55px;
}

.inner-hero-alt .hero-inner h5 {
	font-size: 18px;
	font-weight: 400;
	color: var(--white);
	margin: 0 0 20px 0;
	line-height: 24px;
}

.button-block {
	margin: 25px 0 0 0;
}

.lblue-button {
	display: inline-block;
	background: var(--lblue);
	color: var(--white);
	padding: 10px 25px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
	margin: 0 35px 0 0;
	transition: all 0.2s ease-in-out;
}

.lblue-button:hover {
	display: inline-block;
	background: var(--lblue);
	color: var(--white);
	opacity: 0.8;
	transition: all 0.2s ease-in-out;
}

.blue-button {
	position: relative;
	display: inline-block;
	background: var(--lblue);
	border: 2px solid var(--lblue);
	color: var(--white);
	padding: 10px 25px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	margin: 0 15px 0 0;
	transition: all 0.2s ease-in-out;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

.blue-button:hover {
	display: inline-block;
	background: var(--lblueh);
	border: 2px solid var(--lblueh);
	color: var(--white);
	transition: all 0.2s ease-in-out;
}

.white-button {
	display: inline-block;
	background: none;
	border: 2px solid var(--white);
	color: var(--white);
	padding: 10px 25px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	margin: 0 15px 0 0;
	transition: all 0.2s ease-in-out;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

.white-button:hover {
	display: inline-block;
	background: var(--white);
	border: 2px solid var(--white);
	color: var(--blue);
	transition: all 0.2s ease-in-out;
}

.arr-after {
	padding: 10px 40px 10px 25px;
}

.arr-after:after {
	content: "";
	background: url('images/arrow.svg');
	background-size: cover;
	position: absolute;
	right:10px;
	top: 14px;
	width: 14px;
	height: 14px;
}

.white-block {
	position: relative;
	background: var(--white);
	padding: 75px 0;
}

.white-block-alt {
	position: relative;
	background: var(--white);
	padding: 50px 0;
}

.white-block-alt h2 {
	font-size: 35px;
	font-weight: 700;
	color: var(--text);
	margin: 0 0 15px 0;
	line-height: 40px;
}


.green-block {
	position: relative;
	background: var(--ggray);
	background: linear-gradient(180deg,rgba(240, 248, 246, 1) 30%, rgba(240, 248, 246, 0.4) 100%);
	padding: 75px 0;
	font-weight: 500;
	color: var(--text);
}

.gray-block {
	position: relative;
	background: var(--lgray);
	padding: 75px 0;
}

.gray-alt {
	background: var(--grayalt);
}

.green-block h2 {
	font-size: 35px;
	font-weight: 700;
	color: var(--text);
	margin: 0 0 15px 0;
	line-height: 40px;
}


.block-intro {
	position: relative;
	margin: 0 0 50px 0;
	display: block;
}

.bi-center {
	text-align: center;
}

.block-intro h2 {
	font-size: 30px;
	font-weight: 700;
	color: var(--text);
	margin: 0 0 10px 0;
	line-height: 35px;
}

.block-intro p {
	font-size: 18px;
	font-weight: 500;
	color: var(--textalt);
	margin: 0 0 0px 0;
	line-height: 24px;
}

.map-block {
	background: url('images/topbgo.webp');
	background-size: cover;
	background-position: center;
}

.map-block-alt {
	background: url('images/mapo.webp');
	background-size: cover;
	background-position: center;
}

.five-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    justify-items: stretch;
    align-items: inital;
}

.five-card {
	position: relative;
	background: var(--white);
	padding: 30px 25px;
	border-radius: 15px;
	border:1px solid var(--border);
	transition: all 0.2s ease-in-out;
}

.card-icon {
	display: block;
	width: 50px;
	margin: 0 0 20px 0;
}

.card-icon img {
	display: block;
    width: 100%;
    height: auto;
    margin: 0;  
}

.five-card h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--text);
	margin: 0 0 10px 0;
}

.five-card p {
	font-size: 14px;
	font-weight: 600;
	color: var(--textalt);
	margin: 0 0 0px 0;
	line-height: 18px;
}

.more-card {
	opacity: 0;
	position: absolute;
	background: rgba(0, 61, 106, 0.9);
	width: 100%;
	height: 100%;
	top:0;
	left:0;
	right: 0;
	bottom: 0;
	border-radius: 15px;
	border:1px solid rgba(0, 61, 106, 0.2);
	transition: all 0.2s ease-in-out;
}

.more-card span {
	display: block;
	position: relative;
  	top: 50%;
  	transform: translateY(-50%);
  	color: var(--white);
  	z-index: 3;
  	text-align: center;
  	font-size: 16px;
  	font-weight: 700;
  	text-decoration: underline;
  	 text-decoration-thickness: 2px;
  	text-underline-offset: 4px;
  	margin: 0 auto;
}

.five-card:hover .more-card,
.four-card:hover .more-card {
	opacity: 1;
	transition: all 0.2s ease-in-out;
}

.two-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 50px;
    grid-row-gap: 50px;
    justify-items: stretch;
    align-items: center;
}

.card-img {
	padding: 30px;
}

.card-img img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: 15px;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

.check-col {
	margin: 20px 5px;
}

.check-col li {
	position: relative;
	padding: 0 0 0 28px;
	margin: 0 0 15px 0;
	font-size:15px;
}

.check-col li::before {
	content: "";
	width: 20px;
	height: 20px;
    background-image: url('images/li.svg');
    background-size: cover;
    position: absolute;
    left:0;
    top: 2px;
}

.two-col .blue-button {
	margin: 10px 0 0 0;
}

.four-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 25px;
    grid-row-gap: 25px;
    justify-items: stretch;
    align-items: inital;
}

.four-card {
	position: relative;
	background: var(--white);
	border-radius: 15px;
	border:1px solid var(--border);
	transition: all 0.2s ease-in-out;
}

.four-card-image {
	height: 175px;
	width: 100%;
	display: block;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;	
}

.four-card-content {
	padding: 25px 25px;
}

.four-card h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--text);
	margin: 0 0 10px 0;
}

.four-card p {
	font-size: 14px;
	font-weight: 600;
	color: var(--textalt);
	margin: 0 0 0px 0;
	line-height: 18px;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
  position: relative;
  background: var(--white);
  padding: 25px;
  border-radius: 15px;
  border: 1px solid var(--border);
  transition: all 0.2s ease-in-out;
	margin: 0 10px;
}

.clients-quotes {
  display: block;
  margin: 0 0 50px 0;
}

.clients-quote {
	position: relative;
	padding: 50px 0 0 0;
}

.clients-quote:before {
	content: "";
	background: url('images/quote.svg');
	background-size: cover;
	width: 35px;
	height: 26px;
	top:0px;
	left: 0px;
	position: absolute;
}

.auth-quote {
	color: var(--text);
	font-style: italic;
	font-weight: 500;
	margin: 0 0 20px 0;
}

.auth-name {
	color: var(--text);
	font-weight: 600;
	margin: 0;
}

.auth-role {
	color: var(--textalt);
	font-size: 14px;
	font-weight: 500;
	margin: 0;
}

.cta-block {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
	background: rgba(0, 61, 107, 0.85);
	border-radius: 20px;
	padding: 50px 100px;
	text-align: center;
}

.cta-block h2 {
  font-size: 35px;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 10px 0;
  line-height: 40px;
}

.cta-block p {
  font-size: 18px;
  font-weight: 400;
  color: var(--white);
  margin: 0 0 30px 0;
  line-height: 24px;
}

/* 
==========================================================================
INNER
==========================================================================
*/

.two-grid-image-text {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  justify-items: stretch;
  align-items: inital;
}

.tg-image-text-item {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-items: stretch;
  align-items: inital;	
  border: 1px solid var(--border);
  border-radius: 15px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

.tg-image {
  width: 100%;
  height: 100%;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}

.tg-text {
  padding: 20px 15px 20px 5px;
}

.tg-text h3 {
  font: 20px 'Inter', Helvetica , Arial, sans-serif;
  margin: 0 0 10px 0;
  padding: 0;
  color: var(--text);
  font-weight: 700;
}

.tg-text p {
  margin: 0 0 15px 0;
  font-size: 14px;
}

.key-title {
  color: var(--blue);
  font-weight: 600;
   margin: 0 0 5px 0;
}

.tg-text .check-col {
  font-size: 14px;
   color: var(--text);
}

.three-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  justify-items: stretch;
  align-items: inital;
}

.three-card {
	position: relative;
	background: var(--white);
	border-radius: 15px;
	border:1px solid var(--border);
	padding: 25px;
	transition: all 0.2s ease-in-out;
}

.three-card h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--text);
	margin: 0 0 20px 0;
}

.three-card p {
	font-size: 16px;
	font-weight: 400;
	color: var(--textalt);
	margin: 0 0 0px 0;
}

.three-img-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  justify-items: stretch;
  align-items: inital;
}

.three-img-card {
	position: relative;
	border-radius: 15px;
	padding: 35px;
	transition: all 0.2s ease-in-out;
}

.three-img-card:before {
	content: "";
  background: rgba(0, 61, 106, 0.8);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  	border-radius: 15px;
}

.three-img-content {
	position: relative;
	z-index: 1;
	text-align: center;
}

.three-img-icon {
	margin: 0 auto 15px auto;
	width: 40px;
	height: 40px;
}

.three-img-card h5 {
	font-size: 18px;
	font-weight: 600;
	color: var(--white);
	margin: 0 0 10px 0;
}

.three-img-card p {
	font-size: 14px;
	font-weight: 500;
	color: var(--white);
	margin: 0 0 0px 0;
	line-height: 18px;
}


.contact-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  justify-items: stretch;
  align-items: inital;
 max-width: 1200px;
  margin: 0 auto; 
}

.contact-col h3 {
  font: 24px 'Inter', Helvetica , Arial, sans-serif;
  margin: 0 0 30px 0;
  padding: 0;
  color: var(--text);
  font-weight: 700;
}

.contact-card {
	position: relative;
  background: var(--white);
  padding: 30px 25px;
  border-radius: 15px;
  border: 1px solid var(--border);
  transition: all 0.2s ease-in-out;
}

.touch-row {
  width: 100%;
  display: grid;
  grid-template-columns: 50px auto;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  justify-items: stretch;
  align-items: start;
  margin: 0 0 20px 0;
}

.touch-row-icon {
  background: var(--navhover);
  padding: 12px;
  border-radius: 10px;
}

.touch-row-icon img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

.touch-row-info h5 {
  font: 18px 'Inter', Helvetica , Arial, sans-serif;
  margin: 0 0 5px 0;
  padding: 0;
  color: var(--text);
  font-weight: 700;
}

.touch-row-info p {
  margin: 0;
}

.one-card-block {
	margin: 0 auto;
	max-width: 1000px;
}

.one-card {
	position: relative;
  background: var(--white);
  border-radius: 15px;
  border: 1px solid var(--border);
  padding: 30px;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}


.about-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  justify-items: stretch;
  align-items: inital;
  margin: 0 auto 50px auto;
}

.about-col h2 {
	font-size: 30px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 20px 0;
  line-height: 35px;
}

.two-info-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  justify-items: stretch;
  align-items: inital;
}

.two-info-card {
	position: relative;
	background: var(--white);
	border-radius: 15px;
	border:1px solid var(--border);
	padding: 25px;
	transition: all 0.2s ease-in-out;
}

.two-info-card h3 {
	font-size: 20px;
	font-weight: 700;
	color: var(--text);
	margin: 0 0 20px 0;
}

.two-info-card p {
	font-size: 16px;
	font-weight: 400;
	color: var(--textalt);
	margin: 0 0 0px 0;
}

.two-video-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  justify-items: stretch;
  align-items: center;
  margin: 0 auto 50px auto;
}

.three-video-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  justify-items: stretch;
  align-items: center;
}

.video-embed {
	display: flex; 
	justify-content: center;
	border-radius: 15px 15px 0 0;
}

.video-embed iframe {
	border-radius: 15px 15px 0 0;
}

.video-content {
  position: relative;
  background: var(--white);
  border-radius: 0 0 15px 15px;
  border: 1px solid var(--border);
  padding: 25px;
  transition: all 0.2s ease-in-out;
}

.video-content h5 {
  font: 18px 'Inter', Helvetica , Arial, sans-serif;
  margin: 0 0 10px 0;
  padding: 0;
  color: var(--text);
  font-weight: 600;
}

.video-content p {
  margin: 0;
  color: var(--textalt);
  font-size: 14px;
}

.two-video-col p {
	color: var(--textalt);
	font-weight: 400;
}

.block-narrow {
	max-width: 800px;
	position: relative;
	margin: 0 0 50px 0;
	display: block;
}

.block-narrow h2 {
	font-size: 30px;
	font-weight: 700;
	color: var(--text);
	margin: 0 0 10px 0;
	line-height: 35px;
}

.block-narrow p {
	font-size: 16px;
	font-weight: 500;
	color: var(--textalt);
	margin: 0 0 20px 0;
	line-height: 24px;
}

.three-center {
	text-align: center;
}

.three-center-icon {
	width: 50px;
	margin: 0 auto 25px auto;
}

.three-center-icon img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

.val-alt {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  justify-items: stretch;
  align-items: inital;
}

.about-alt {
  align-items: center;
  margin: 0 auto;
}

.cta-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  justify-items: stretch;
  align-items: center;
}


.cta-block-alt {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
	background: var(--blue);
	border-radius: 15px;
	padding: 50px 50px;
	text-align: left;
}

.cta-block-alt h2 {
  font-size: 25px;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 10px 0;
  line-height: 35px;
}

.cta-block-alt p {
  font-size: 16px;
  font-weight: 400;
  color: var(--white);
  margin: 0 0 30px 0;
  line-height: 24px;
}

.cta-image {
	height: 100%;
	width: 100%;
	border-radius: 15px;
}

.block-narrow-center {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

.three-grid-icon {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  justify-items: stretch;
  align-items: inital;
margin: 50px auto 0 auto;
}

.three-grid-icon-card {
  position: relative;
  background: var(--white);
  border-radius: 15px;
  border: 1px solid var(--border);
  transition: all 0.2s ease-in-out;
}

.three-grid-icon-image {
  padding: 50px 0;
  width: 100%;
  display: block;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background: var(--navhover);
}

.three-grid-icon-content {
  padding: 25px 25px;
}

.three-grid-icon-image img {
	width: 60px;
	height: 60px;
	margin: 0 auto;
	display: block;
}

.three-grid-icon-content h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--text);
	margin: 0 0 10px 0;
}

.three-grid-icon-content p {
	font-size: 14px;
	font-weight: 600;
	color: var(--textalt);
	margin: 0 0 0px 0;
	line-height: 18px;
}

.wide-button-grid {
    width: 100%;
    max-width: 1200px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    justify-items: stretch;
    align-items: center;
    margin: 30px auto 0 auto;
}

.wide-button {
	  position: relative;
  background: var(--white);
  border-radius: 15px;
  padding: 15px 25px;
  text-align: center;
  border: 1px solid var(--border);
  transition: all 0.2s ease-in-out;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}

.wide-button:hover {
  background: var(--white);
  border: 1px solid var(--border);
  transition: all 0.2s ease-in-out;
  box-shadow: 0 6px 3px rgba(0, 0, 0, 0.1);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}


.cta-grid h6 {
  color: var(--white);
  font: 14px 'Inter', Helvetica, Arial, sans-serif;
  margin: -20px 0 15px 0;
}


.works-item {
  position: relative;
  background: var(--white);
  border-radius: 15px;
  border: 1px solid var(--border);
  padding: 25px;
  transition: all 0.2s ease-in-out;
  width: 100%;
  max-width: 900px;
  margin: 0 auto 20px auto;
}

.works-grid {
    width: 100%;
    max-width: 1200px;
    display: grid;
    grid-template-columns: 50px auto;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    justify-items: stretch;
    align-items: center;
    margin: 0 auto;
}

.works-grid-no {
  background: var(--blue);
  color: var(--white);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 20px;
  font-weight: 600;
  padding: 10px;
  text-align: center;
}

.works-grid-text h5 {
	font-size: 18px;
	font-weight: 700;
	color: var(--text);
	margin: 0 0 5px 0;
}

.works-grid-text p {
	font-size: 15px;
	font-weight: 400;
	color: var(--textalt);
	margin: 0 0 0px 0;
}

.doc-embed {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}

.doc-embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.two-col h2 {
  font-size: 30px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 15px 0;
  line-height: 35px;
}



.blog-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 25px;
    grid-row-gap: 25px;
    justify-items: stretch;
    align-items: inital;
}

.blog-card {
	position: relative;
	background: var(--white);
	border-radius: 15px;
	border:1px solid var(--border);
	transition: all 0.2s ease-in-out;
}

.blog-card-image {
	height: 175px;
	width: 100%;
	display: block;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;	
}

.blog-card-content {
	padding: 30px 40px;
}

.blog-card h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--text);
	margin: 0 0 10px 0;
}

.blog-card p {
	font-size: 15px;
	font-weight: 400;
	color: var(--textalt);
	margin: 0 0 0px 0;
	line-height: 18px;
}

.blog-button {
	position: relative;
	display: block;
	background: var(--lblue);
	border: 2px solid var(--lblue);
	color: var(--white);
	padding: 8px 20px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	margin: 20px 0 0 0;
text-align: center;
	transition: all 0.2s ease-in-out;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

.blog-button:hover {
	display: block;
	background: var(--lblueh);
	border: 2px solid var(--lblueh);
	color: var(--white);
	transition: all 0.2s ease-in-out;
}

.blog-tag {
	background: var(--blue);
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 600;
	border-radius: 10px;
	display: inline-block;
	margin: 0 0 15px 0;
	color: var(--white);
}
.blog-tag a, .blog-tag a:hover {
	color:var(--white);
}


textarea, 
 input[type="text"], 
 input[type="email"], 
 select,
input[type="tel"],
.input-checkbox {
  border-radius: 0;
  color: var(--text);
  font: 16px 'Inter', Helvetica, Arial, sans-serif;
  padding: 10px;
  border: 1px solid var(--grayalt);
  background: var(--grayalt);
outline:none;
}

.label-above .nf-field-label {
  margin-bottom: 5px;
  font-size: 15px;
  color: var(--text);
}

.nf-form-fields-required {
  display: none;
}

input[type="submit"],
.field-wrap button, 
.field-wrap input[type="button"], 
.field-wrap input[type="submit"] {
	position: relative;
	display: block!important;
	background: var(--lblue)!important;
	border: 2px solid var(--lblue)!important;
	color: var(--white)!important;
	padding: 10px 25px!important;
	border-radius: 8px!important;
	font: 16px 'Inter', Helvetica, Arial, sans-serif!important;
	font-weight: 600!important;
	margin: 0px 0 0!important;
width:100%!important;
text-align:center!important;
	transition: all 0.2s ease-in-out;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
cursor:pointer;
}

input[type="submit"]:hover,
.field-wrap button:hover, 
.field-wrap input[type="button"]:hover, 
.field-wrap input[type="submit"]:hover {
	display: block!important;
	background: var(--lblueh)!important;
	border: 2px solid var(--lblueh)!important;
	color: var(--white)!important;
	transition: all 0.2s ease-in-out;
}

.blcat a, .blcat a:hover {
	color:var(--white);
}

.mob-but {
	display:none;
}

/* 
==========================================================================
FOOTER
==========================================================================
*/

footer {
	position: relative;
	padding: 50px 0 0 0;
	background: var(--blue);
}

.footer-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 50px;
    grid-row-gap: 50px;
    justify-items: stretch;
    align-items: inital;
}

.foot-logo {
	width: 200px;
	margin: 0 0 20px 0;
	display: block;
}

.foot-logo img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

.foot-social {
	display: block;
}

.foot-social a {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin: 0 10px 5px 0;
	transition: all 0.2s ease-in-out;
}

.foot-social a:hover {
	opacity: 0.7;
	transition: all 0.2s ease-in-out;
}

.foot-social img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

footer h5 {
	font-size: 15px;
	font-weight: 600;
	color: var(--white);
	margin: 0 0 15px 0;
}

footer ul {
	margin: 0;
	display: block;
	list-style: none;
}

footer li {
	font-size: 14px;
	margin: 0 0 10px 0;
}

footer li a {
	color: var(--footlink);
	font-size: 14px;
	transition: all 0.2s ease-in-out;
}

footer li a:hover {
	color: var(--white);
	font-size: 14px;
	transition: all 0.2s ease-in-out;
}

.footer-col-mob {
	display: none;
}

.colophon {
	border-top: 1px solid var(--footline);
	display: block;
	margin: 30px 0 0 0;
	padding: 25px 0;
}

.colophon-grid {
	width: 100%;
    display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    justify-items: stretch;
    align-items: center;
}

.colo-left {
	text-align: left;
}

.colo-right {
	text-align: right;
}

.colophon p {
	margin: 0;
	color: var(--copytext);
	font-size: 13px;
}

.colophon a {
	color: var(--copytext);
	font-size: 13px;
	transition: all 0.2s ease-in-out;
	margin: 0 0 0 15px;
}

.colophon a:hover {
	color: var(--white);
	font-size: 13px;
	transition: all 0.2s ease-in-out;
}

/* 
==========================================================================
MEDIA QUERIES
==========================================================================
*/

@media screen and (max-width: 1300px) {
.header-col li {
  display: inline-block;
  margin: 0 15px;
  padding: 0;
  list-style: none;
}
}

@media screen and (max-width: 1150px) {

.header-grid {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-items: stretch;
  align-items: center;
}

	
}

@media screen and (max-width: 1100px) {

.five-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    justify-items: stretch;
    align-items: inital;
}

.footer-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    justify-items: stretch;
    align-items: inital;
}

.fc1 {
	display: none;
}

.footer-col-mob {
	display: block;
	margin: 0 auto 30px auto;
	text-align: center;
}

.footer-col-mob .foot-logo {
	margin: 0 auto 15px auto;
}

footer {
  position: relative;
  padding: 40px 0 0 0;
}

.contact-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  justify-items: stretch;
  align-items: inital;
}

}

@media screen and (max-width: 1050px) {
.tg-image {
  width: 100%;
  height: 200px;
  border-radius: 15px 15px 0 0;
}

.tg-image-text-item {
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-items: stretch;
  align-items: inital;
}

.tg-text {
  padding: 0 20px 20px 20px;
}

}

@media screen and (max-width: 1000px) {
.about-grid {
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-items: stretch;
  align-items: inital;
  margin: 0 auto 20px auto;
}

.about-alt {
  margin: 0 auto;
}

.about-col.ab-img {
  order: -1;
}
}

@media screen and (max-width: 950px) {

.white-block-alt,
.gray-block,
.white-block,
.green-block {
	padding: 50px 0;
}

.two-grid {
    width: 100%;
    display: grid;
    grid-template-columns: auto;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    justify-items: stretch;
    align-items: center;
}

.two-img {
  order: -1;
  max-width: 800px;
  margin: 0 auto;
}

.four-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    justify-items: stretch;
    align-items: inital;
}

.card-img {
  padding: 0;
}

.wide-button-grid {
  width: 100%;
  max-width: 1200px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-items: stretch;
  align-items: center;
  margin: 30px auto 0 auto;
}

.blog-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  justify-items: stretch;
  align-items: inital;
}	
	
}


@media screen and (max-width: 850px) {

.five-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    justify-items: stretch;
    align-items: inital;
}


.footer-grid {
    width: 100%;
    display: none;
}

.footer-col-mob {
	display: block;
	margin: 0 auto;
	text-align: center;
}

.colophon-grid {
	width: 100%;
    display: grid;
    grid-template-columns: auto;
    grid-column-gap: 0px;
    grid-row-gap: 10px;
    justify-items: stretch;
    align-items: center;
}

.colo-right,
.colo-left {
	text-align: center;
}

}


@media screen and (max-width: 800px) {
.home-hero {
  position: relative;
  width: 100%;
  height: 450px;
  display: flex;
  align-items: center;
}

.hero-inner h1 {
  font-size: 50px;
  font-weight: 800;
  color: var(--white);
  margin: 0 0 20px 0;
  line-height: 55px;
}

.inner-hero .hero-inner h1 {
  font-size: 40px;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 20px 0;
  line-height: 45px;
}

.hero-inner h5 {
  font-size: 18px;
  font-weight: 500;
  color: var(--white);
  margin: 0 0 20px 0;
  line-height: 26px;
}

.inner-hero {
  position: relative;
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
}

.contact-grid {
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-items: stretch;
  align-items: inital;
}

.two-video-grid {
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-items: stretch;
  align-items: center;
  margin: 0 auto 30px auto;
}

.three-video-grid {
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-items: stretch;
  align-items: center;
}

.cta-grid {
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-items: stretch;
  align-items: center;
}

.cta-image {
  display: none;
}

.three-grid-icon {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  justify-items: stretch;
  align-items: inital;
  margin: 50px auto 0 auto;
}

}


@media screen and (max-width: 750px) {
.cta-block {
  padding: 50px 50px;
  text-align: center;
}

.white-block-alt h2,
.green-block h2 {
  font-size: 30px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 15px 0;
  line-height: 35px;
}

.three-grid,
.three-img-grid {
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-items: stretch;
  align-items: inital;
}

}


@media screen and (max-width: 700px) {
.two-grid-image-text {
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  justify-items: stretch;
  align-items: inital;
}
}

@media screen and (max-width: 650px) {

.five-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    justify-items: stretch;
    align-items: inital;
}

  .white-block-alt, .gray-block, .white-block, .green-block {
    padding: 30px 0;
  }

header .lblue-button {
	display: none;
}

.two-info-grid {
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-items: stretch;
  align-items: inital;
}

.mob-but {
	display:block;
}	
	
}


@media screen and (max-width: 550px) {

.three-grid-icon {
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-items: stretch;
  align-items: inital;
  margin: 30px auto 0 auto;
}

.wide-button-grid {
  width: 100%;
  max-width: 1200px;
  display: grid;
  grid-template-columns: auto;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-items: stretch;
  align-items: center;
  margin: 30px auto 0 auto;
}

}

@media screen and (max-width: 500px) {
.blog-grid {
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-items: stretch;
  align-items: inital;
}
}

@media screen and (max-width: 480px) {
.four-grid {
    width: 100%;
    display: grid;
    grid-template-columns: auto;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    justify-items: stretch;
    align-items: inital;
}

.logo {
  display: block;
  width: 200px;
  height: auto;
  margin: 6px 0 0 -10px;
}

}

@media screen and (max-width: 420px) {
.five-grid {
    width: 100%;
    display: grid;
    grid-template-columns: auto;
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    justify-items: stretch;
    align-items: inital;
}

.button-block a,
.button-block a:hover {
  display: block;
  margin: 15px 0;
}

.cta-block h2 {
  font-size: 30px;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 10px 0;
  line-height: 35px;
}

}


@media screen and (max-width: 380px) {
  .hero-inner h1 {
    font-size: 40px;
    font-weight: 800;
    color: var(--white);
    margin: 0 0 15px 0;
    line-height: 45px;
  }

  .hero-inner h5 {
    font-size: 16px;
    font-weight: 500;
    color: var(--white);
    margin: 0 0 20px 0;
    line-height: 24px;
  }

  .cta-block {
    padding: 35px 25px;
    text-align: center;
  }

}

@media screen and (max-width: 320px) {

 .container {
	min-width:240px;
	width:100%;
 }
 
}




.main-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 0px;
}

.menu-item {
	position: relative;
}

.menu-item > a,
.desktop-link,
.menu-trigger {
	color: var(--text);
 font: 14px 'Inter', Helvetica, Arial, sans-serif;
  font-weight: 600;
	text-decoration: none;
	background: none;
	border: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.menu-item > a:hover,
.desktop-link:hover,
.menu-trigger:hover {
	color: var(--blue);
 font: 14px 'Inter', Helvetica, Arial, sans-serif;
  font-weight: 600;
	text-decoration: none;
	background: none;
	cursor: pointer;
}


.desktop-link {
	display: inline-flex;
}

.mobile-only-trigger {
	display: none;
	width: 100%;
	justify-content: space-between;
	padding: 22px 0;
}

.caret {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	margin-top: -3px;
	margin-right: 3px;
	transition: transform 0.2s ease;
}

.menu-item.active > .menu-trigger .caret,
.menu-item.active > .mobile-only-trigger .caret {
	transform: rotate(225deg);
	margin-top: 5px;
}

.mega-menu {
	position: absolute;
	left: 0;
	top: calc(100% + 29px);
	width: max-content;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 0 0 15px 15px;
	box-shadow: 0 12px 28px rgba(0,0,0,0.08);
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: 0.22s ease;
	pointer-events: none;
	z-index: 1000;
}

.sticky .mega-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 24px);
}

.menu-item.active > .mega-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	z-index: 999;
}



.mega-menu.one-col {
	width: 450px;
	max-width: 450px;
}

.mega-menu.two-col {
	width: 700px;
	max-width: 700px;
}

.mega-top {
	padding: 25px;
}

.mega-grid {
	display: grid;
	gap: 10px 70px;
}

.mega-grid.cols-1 {
	grid-template-columns: 1fr;
	max-width: 100%;
	align-items: start;
}

.mega-grid.cols-2 {
	grid-template-columns: 1fr 1fr;
	max-width: 100%;
	align-items: start;
}
.mega-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 10px 15px;
	text-decoration: none;
}

.mega-link:hover {
	background: var(--navhover);
	border-radius: 10px;
}

.mega-link h4 {
	margin: 0;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  color: var(--text);
}

.mega-link:hover h4 {
	color: var(--blue);
}

.mega-link p {
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	text-align: left;
	color: var(--textalt);
}

.mega-link span {
	font-size: 28px;
	color: #7d7d7d;
	flex-shrink: 0;
}

.mega-link svg {
	position: relative;
	width: 18px;
	height: 18px;
	display: block;
	margin: 0;
	right: 0;
}

.mega-link .nav-arrow {
	fill: var(--textalt);
}

.mega-link:hover .nav-arrow {
	fill: var(--blue);
}

.mega-link:hover svg{
	right: -3px;
}

	.current-menu-item a {
		color:var(--blue)!important;
	}


.callout-arrow {
  display: inline-block;
  vertical-align: middle;
  margin: -1px 0 0 5px;
}

.callout-arrow svg {
	position: relative;
	width: 12px;
	height: 12px;
	display: block;
	margin: 0;
}

.callout-arrow .call-arrow {
	fill: var(--footlink);
}

.callout-arrow:hover .call-arrow {
	fill: var(--white);
}

.mega-callout:hover .callout-arrow {
  margin: -1px 0 0 7px;
}


.mega-bottom {
	background: var(--blue);
	padding: 25px;
}

.mega-callout {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	color: var(--white);
}

.mega-callout h3 {
margin: 0 0 5px;
  font-size: 18px;
  color: var(--white);
  text-align: left;
  font-weight: 800;
}

.mega-callout p {
	margin: 0 0 10px;
	font-size: 13px;
	color: var(--footlink);
	text-align: left;
}

.mega-callout a {
	text-align: left !important;
  color: var(--white) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  margin: 0 !important;
  display: block;
}

.mega-menu.one-col .mega-callout img {
	width: 140px;
	height: 140px;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}


.mega-menu.two-col .mega-callout img {
	width: 220px;
	height: 140px;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}

.menu-toggle {
	display: none;
	width: 42px;
	height: 42px;
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	position: relative;
	z-index: 1002;
	 transition: all 0.2s ease-in-out;
}

.menu-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background: #111;
	position: absolute;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.menu-toggle span:nth-child(1) {
	transform: translateY(-7px);
}

.menu-toggle span:nth-child(2) {
	transform: translateY(0);
}

.menu-toggle span:nth-child(3) {
	transform: translateY(7px);
}

.menu-toggle.active span:nth-child(1) {
	transform: rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
	opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
	transform: rotate(-45deg);
}

.menu-toggle:hover {
  opacity: 0.7;
  transition: all 0.2s ease-in-out;
}

.mobile-submenu {
	display: none;
	padding: 0 0 14px;
}

.mobile-submenu a {
	display: block;
	padding: 10px 0;
	text-decoration: none;
	color: #444;
}

body.menu-open {
	overflow: hidden;
}

@media (max-width: 1150px) {

	nav {
		position: static;
	}

	.menu-toggle {
		display: flex;
		position: fixed;
		top: 20px;
		right: 10px;
		z-index: 1003;
		cursor: pointer;
		transition: all 0.2s ease-in-out;
	}

	.main-menu.open + .menu-toggle,
	.main-menu.open ~ .menu-toggle {
		right: 24px;
	}

	.main-menu {
		position: fixed;
		top: 0;
		right: 0;
		width: min(300px, 88%);
		height: 100vh;
		background: #fff;
		box-shadow: -10px 0 30px rgba(0,0,0,0.12);
		padding: 90px 24px 30px;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		transform: translateX(100%);
		transition: transform 0.25s ease;
		overflow-y: auto;
		overflow-x: hidden;
		z-index: 1001;
	}


	.main-menu.open {
		transform: translateX(0);
		padding: 80px 0 40px 0;
	}

.menu-item.active > .menu-trigger .caret, .menu-item.active > .mobile-only-trigger .caret {
  transform: rotate(225deg);
  margin-top: 0px;
}

	.menu-item > a.desktop-link {
		display: none;
	}

	.menu-item.has-mega > .menu-trigger,
	.mobile-only-trigger {
		display: block;
		width: 100%;
		font-size: 15px;
		font-weight: 500;
		text-align: left;
		padding: 15px!important;
		position: relative;
	}

	.menu-item.has-mega > .menu-trigger:hover,
	.mobile-only-trigger:hover {
		display: block;
		width: 100%;
		font-size: 15px;
		font-weight: 500;
		text-align: left;
		padding: 15px!important;
		background: var(--navhover);
		border-radius: 10px;
	}

.caret {

  position: absolute;
  top: 23px;
  right: 10px;
}

	


	.mega-menu {
		position: static;
		width: 100%;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
		display: none;
		padding: 0 0 18px;
	}

	.menu-item.active > .mega-menu {
		display: block;
	}

	.mega-top {
		padding: 0;
	}

	.mega-grid,
	.mega-grid.cols-1,
	.mega-grid.cols-2 {
		display: block;
		max-width: none;
	}

	.mega-link {
		padding: 10px 0;
	}

	.mega-link h4 {
		font-size: 14px;
		color: var(--textalt);
		padding: 0px 20px;
		font-weight: 500;
	}

	.mega-link p {
		display: none;
	}

	.mobile-submenu a {
		font-size: 14px!important;
		color: var(--textalt)!important;
		padding: 10px 20px!important;
		font-weight: 500!important;
		text-align: left!important;
	}

	.mobile-submenu a:hover {

		background: var(--navhover);
		border-radius: 10px;
	}

	.mega-link span {
		display: none;
	}

.mega-bottom {
	display: none;
}

	.menu-item.active > .mobile-submenu {
		display: block;
	}

	
	.menu-item.nomega a {
  display: block;
  width: 100%;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  padding: 15px !important;
  position: relative;
}

	.menu-item.nomega a:hover {
		display: block;
		width: 100%;
		font-size: 15px;
		font-weight: 500;
		text-align: left;
		padding: 15px!important;
		background: var(--navhover);
		border-radius: 10px;
	}
	
.head-search {
  width: 18px;
  height: 18px;
  position: absolute;
  right: 65px;
  top: 17px;
}


.lblue-button {
  margin: 0 80px 0 0;
}

.sticky .menu-toggle {
    top: 15px;
    right: 10px;
    z-index: 1003;
    transition: all 0.2s ease-in-out;
  }

.sticky .mega-menu {
	position: relative;
	left: auto;
	top: auto;
}


}



@media (max-width: 1280px) {
	
.mega-menu.two-col {
  width: 450px;
  max-width: 450px;
}	
	
	.mega-grid.cols-2 {
		grid-template-columns: auto;
		gap: 10px;
	}
}


.blog-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 30px 0;
}

.blog-filter-btn {
	  position: relative;
  background: var(--white);
  border-radius: 10px;
  padding: 8px 20px;
  text-align: center;
  border: 2px solid var(--border);
  transition: all 0.2s ease-in-out;
  color: var(--text);
  font: 14px 'Inter', Helvetica, Arial, sans-serif;
  font-weight: 600;
	cursor:pointer;
}

.blog-filter-btn:hover {
  background: var(--lblue);
  border: 2px solid var(--lblue);
  transition: all 0.2s ease-in-out;
  color: var(--white);

}

.blog-filter-btn.is-active {
	background: var(--blue);
	border-color: var(--blue);
	color: var(--white);
}

#blog-posts-wrap {
	transition: opacity 0.2s ease;
}

#blog-posts-wrap.is-loading {
	opacity: 0.5;
	pointer-events: none;
}