@charset "utf-8";
/* CSS Document */

* html{
	margin:0;
	padding:0;
}
:root {
	--brand:#006548;	
	--white:#fff;
	
	--bg-color:#efefef;
	--text-base:#222;
	
	--hl:#00a651; /*hightlighted */
	--black:#000; /* black*/	
	--elgrey:#f5f5f5 ; /*Extra Light Grey*/	
	--lgrey:#e2e2e2 ; /*Light Grey*/	
	--mgrey:#999; /*Mid Grey*/
	--dgrey:#333; /*Dark Grey*/

	--beige:#bab2a7;
	--pg-width:1200px;
	--font-size:19px;
	--border-radius: 8px;

}




body {
    color: var(--text-base); 
  	font-family: "Roboto", sans-serif;
  	font-weight: 300;
    font-size: var(--font-size);
    margin: 0;
    padding: 0;
	
	width:100%
}

a{
    /*transition:all ease .3s;*/
    text-decoration: none;
    color: var(--hl);

}
a:hover {
    color: var(--hl);
}

ul {
   margin-bottom: 1.25rem;
}
ul li,
p {
    margin: 0 0 1rem;
    line-height: 1.75;
}
h1 {
    font-weight: weight;
    font-size: 2.5rem;
    margin: 0 0 .35em;
	color: var(--brand);
/*
	letter-spacing: .2rem;
    text-transform: uppercase;
*/
	color: var(--jk-grey);
}
h2 {
	color: var(--brand);
    font-weight: 700;
    font-size: 2rem;
	line-height: 1.5;
    margin: 0 0 .5em;
    text-transform: uppercase;
}
h3 {
    color: var(--jk-grey);
    font-size: 1rem;
    margin: 0 0 .5rem;
    line-height: 1.5;
	font-weight: bold;

}
h4 {
    font-size: 1.35em;
    margin: 0 0 .5em;
    font-weight: 400;
}
h5 {
    font-size: 1.15em;
    margin: 0 0 .5em;
    font-weight: 400;
}

a.button{
    display: inline-block;
    margin: 0 0 1vw;
    background: #f7f7f7;
    padding: 1em 1.25rem;

    font-weight: bold;
    transition: .25s ease all;
}

.centered-heading{
	text-align: center;
}



/*WRAPPERS--------------------*/

.wrapper-width {
	padding: 0 2rem;
    position: relative;
    margin-left: auto;
    margin-right: auto;
	max-width: var(--pg-width);
}

.wrapper-100-width{
	padding: 0 ;
    position: relative;
    margin: 1rem 0;
	
}
.max-cap-wrapper{
	max-width:1900px;
	padding: 0;
	margin: 0 auto;
}


.page-content{
	
	
}
.color01-section{
	background:var(--brand);
	color: var(--white);
	margin: 2rem auto;
}
.color02-section{
	background: url("../img/bg-mission.jpg");
	background-size: cover;
	color: var(--white);
	margin: 3rem auto;

}
/*HEADER--------------------*/
header.mobile{
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items:center;
	height:50px;
	margin:0;
	padding:0 1em 0 .75em;
	z-index:100;
}

header.mobile a.logo{/* logo wrapper a tag*/
	width:70%; /*original 508x58*/
	height:calc(50px - 10px); /*32px*/
	padding: 5px 0;
	overflow:hidden;
	padding:0;
	margin:0;
	
}
header a.logo img{
    height:100%;
}



header a.logo span{
	font-weight: bold;
	margin: 0 0 0 1.5rem;
	padding: 0;
	letter-spacing: .25rem;
	color: var(--brand);

}

a.hamburger{
	display:block;
	margin:0 0;
	padding:0;
	font-size:1em;
	color:var(--brand);
}
a.hamburger i{

	font-size: 1.5rem;
}

.mm-menu a, 
.mm-menu a:active, 
.mm-menu a:hover, 
.mm-menu a:link, 
.mm-menu a:visited{
	
	color: var(--white);
	
}
.mm-listitem--selected>.mm-listitem__text{
	background:var(--hl);
}



/*--------------------------------------------------------------
MENU
--------------------------------------------------------------*/
.main-navigation {/*General Menu Area */
	position:relative;
	padding:.75em .5em;
    display: none;
}
.main-navigation ul { /*Main Cat Menu Area */
	position:absolute;
	right:0;
	list-style:none;  
	font-size:95%;
	margin:1.25em 0 0;
	padding:0;
	
}
.main-navigation li { /*Main Cat Menu List/Buttons */
	float:left;
	font-weight: 600;
	display:block; 
	text-transform: uppercase; 
    margin:0 .5em 0;  
	width:auto;
}
.main-navigation a {
	display: block;
	text-decoration: none;
    padding:.5em .75em; 
	line-height:1.3em; 
	color: var(--white); 
	font-size:1.1em;
	transition: all .5s ease;
}


.button-area{
	display: flex;
	
}
/*--------------------------------------------------------------
Slick SLIDER 
--------------------------------------------------------------*/
.slick-slides{
    position: relative;

}

.slick-slides div{
    width: 100%;
}


.slick-slides .static-image img {
    width: 100%;
    
}
.slick-slides .static-image a {
    width: 100%;
}


.slick-slides i.fa-angle-left{
    left: 0;
    top: 40%;
    position: absolute;
    bottom: 0;
    width: 10vw;
    height: 8vh;
} 
.slick-slides i.fa-angle-right{
    right: 0;
    top: 40%;
    position: absolute;
    bottom: 0;
    width: 10vw;
    height: 8vh;

/*    overflow: hidden;*/
    
}
.slick-slides i{
    display: block;
    text-align: center;
    width: 100%;
    font-size: 7em;
    transition: all ease .25s;
    text-decoration: none;
    color: rgba(0,0,0,.05); /*this transitions from opaque white to 0 opacity*/
    cursor: pointer;
    z-index: 1000;
}

.slick-slides i:hover {
    color: rgba(255,255,255,1);
}

.slick-dotted
{
    margin-bottom: 20px;
}

.slick-dots
{
    position: absolute;
    bottom: -20px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;
    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 2vh;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}


/*--------------------------------------------------------------
 Home Page Video Slider
--------------------------------------------------------------*/

.video-clip-area {
    position: relative;
	margin-bottom: 0;
}


.video-clip-area .video-text{
    position: absolute;
    color: var(--white);
    padding: 0 5%;
    text-align: center;
    top: 15vw;
    width: 90%;
    z-index: 100;
}

.video-clip-area .video-text a{
    color: var(--white);
}

.video-clip-area .video-text h1{
    color: var(--white);
    font-size: 5vw;
    font-weight: 500;
    line-height: 1;
    margin-bottom: .5rem;
    padding: 0;
}

.video-clip-area .video-text p{
    color: var(--white);
    font-size:  1em;
    margin-bottom: .5rem;
    line-height: 1.5;

}

.video-clip-area .video-text p.video-title {
    color: var(--white);
    font-size: 5vw;
    font-weight: 500;
    line-height: 1;
    margin-bottom: .75rem;
    padding: 0;

}
.video-clip-area a {
	width:100%;
}
.video-clip-area video{
    margin:0; 
    padding: 0;
    width: 100%;

}



.our-brands-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
    padding: 0;
}

.brand-item {
    text-align: center;
	
}

.brand-item img {
    max-width: 100%;
    height: auto;
    margin-bottom: 1rem;
	
		background:var(--elgrey);
	border-radius: 6px;

}

.brand-item h3 {
    font-size: 1.25rem;
    margin: 0;
}

.page-title-area{
	
	position: relative;
    width: 100%;
    height: 180px; /* Adjust the height as needed */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff; /* Text color */
    text-align: center;
	margin-bottom: 1.5rem;
}

.page-title-area::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,102,73, 0.75); /* Adjust the tint strength here */
    z-index: 1; /* Ensure the overlay is above the background image */
}

.page-title-area h1{
	
    position: relative;
    z-index: 2; /* Ensure the text is above the overlay */
    margin: 0;
    padding: 20px;
	text-transform: uppercase;
	letter-spacing: .5rem;
	
}


h1.homepage{
	text-align: center;
	font-size: 1rem;
	opacity: 0;
	margin: 0;
	padding: 0;
}

.each-segment{
	margin:1rem 0;
}
/*--------------------------------------------------------------
HOME News PANELS
--------------------------------------------------------------*/
h1.homepage{
	margin-left: -1000px;
	font-size: 1px;
	color: blue;
}



/*--------------------------------------------------------------
PAGE MAIN IMAGE
--------------------------------------------------------------*/

.page-image{
	background: none;
	}

.page-image img{
	width:100%;
	height:auto;
	}

/*--------------------------------------------------------------
PAGE CONTENT
--------------------------------------------------------------*/

.page-content{


	}
	

.page-content ul{
}

.page-content ul li{
/*
	margin:0 0 .5em;
    line-height: 1.5;
*/
}




/*-------------------------------------------------------------------------
YOUTUBE VIDEO
--------------------------------------------------------------------------*/


.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%;
}




/*-------------------------------------------------------------------------
Pagnation Number Navigation
--------------------------------------------------------------------------*/
.paging-navigation {
	display: block;
	margin-bottom: 2em;
}
.paging-navigation ul.page-numbers{
	display: block;
	padding:0;
	margin:1em 0;
	text-align: center;
    font-size: 1.25em;
}
.paging-navigation li { display: inline; }

a.page-numbers,
span.page-numbers {
     padding: .5em .7em ;
	 font-weight:400;
}

a:hover.page-numbers {
    color: var(--white);
	text-decoration:none;
	background:var(--brand);
}

.paging-navigation .current {
    font-weight: bold;
	color:var(--white);
	background:var(--brand);
}
      
	
/*----------------------------------------
list table view pages
----------------------------------------*/

.list-page-image img{
	width:100%;
	height:auto;
	}

a.download{
	float:left;
	border:1px solid #aaa;
	background:#eee;
	padding:.5em .75em;
	font-size:1.5em;
	clear:both;
	margin:.5em  1em 0 0;
	transition: all .2s ease;
	text-decoration:none;
	}
	
a.download:hover{
	background:var(--brand);/*wm orange color*/
	color:var(--white);
}
.press-plain-text{
	float:left;
	clear:both;
	position:relative;
	background: var(--white);
	box-shadow: inset 0px 0px 233px 2px #f8f8f8;
	margin:1em auto 2em;
	padding:2em 2.5em;
	font-size:1.25em;
	border: 1px solid #f8f8f8;
	
	}

.list-table tr.headingTr{/* hiding parts of table for mobile*/
    display: none;
}

.data-area{
	}

.data-row { /*repeated area*/
	position:relative;
  	width: 98%;
	padding:4% 2%;
}
.data-row td { /*repeated area*/
	padding:.75em 1.25em;
}
.data-row td p.post-date {
    margin:.5em 0 0;
    font-size: .9em;
    
}

.data-row td:first-child,
.data-row td:nth-child(n+3) { /* hiding parts of table for mobile: hide 3rd column and beyond*/
    display: none;
}

.thought-leadership-table .data-row td:first-child {
    display: block;
}

.data-row:nth-child(odd) {
  background: #eee;
}

.data-row:nth-child(even) {
  background: #f8f8f8;
}

.data-row a.post-title{
	font-size:1.25em;
	text-align:left;
	font-weight:400;
}

.data-icon-area { 
	display:block;
	float:left;
	text-align:center;
	padding:.5em 0 5% .5em;
	width:10%;
}
.data-text-area{
	position:relative;
	margin-left:20%;
	padding-left:5%;
	display:block;
	width:75%;
	
	border-left:1px solid #A8A8A8;
}

.data-text-area a:hover{
	text-decoration:none;
}

.data-text-area .post-date{
	display:block;
	font-size:1em;
	margin:0;
	clear:both;	

}
.file-size{
	display:block;
	font-size:.75em;
	margin-top:.25em;
	font-style:normal;
	}

.fa-file-pdf-o{
	text-align:center;
}
.file-type .fa,
.file-size .fa{
	color:#7a7067;
	}
a{
	color:var(--brand);
}





/*--------------------------------------------------------------
Individual Press View
--------------------------------------------------------------*/
.press-page-image img{
    width: 100%;
}

h1.news-heading{
	font-size:1.75em;

	}

.download-info-area{
    display: flex;
    width: 100%;
    justify-content: flex-start;
}
a.download-button{
	border:1px solid #aaa;
	background:#eee;
	padding:.5em .75em;
	font-size:1em;
	transition: all .2s ease;
	text-decoration:none;
	}
	

.plain-text{
	position:relative;
	background: #f8f8f8;
	margin:1em auto; 
	padding:1em;
	font-size:1em;
	}
.file-size{
	border:1px solid #aaa;
	border-left:none;
	padding:.5em .75em;
	font-size:1em;
	margin:0;
	color:#7a7067;
	
	}

/*-------------------------------------------------------------------------
ABOUT
--------------------------------------------------------------------------*/

.mission-area, 
.vision-area {
    display: flex;
    align-items: center;
	flex-wrap: wrap;
    margin: 0;
	padding: 0;
}


.mission-area .mission-image,
.vision-area .vision-image  {
    width: 100%;
	padding: 0;
}

.mission-area .mission-text,
.vision-area .vision-text {
	margin:1rem 0;

    padding: 0 1.5rem ;
}

.mission-area .mission-image img, 
.vision-area .vision-image img {
    width: 100%;
    height: auto;
}

.mission-area .mission-text h2, 
.vision-area .vision-text h2 {
    margin-top: 0;
	color: var(--hl);
/*		text-align: center;*/

}


.values-area{
	margin: 2rem 0 3rem;
	
/*	text-align: center;*/
}


.ref-links-container {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    gap: 2rem; /* Adds space between items */
    margin-bottom: 2rem;
}

.each-link-item {
    width: 100%; /* Take full width */
    max-width: 300px; /* Optional: Limit the width of each item */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: #f9f9f9; /* Light background color for items */
    border: 1px solid #ddd; /* Border around each item */
    padding: 1rem;
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth transition for hover effects */
}

.each-link-item a {
    text-decoration: none;
    color: inherit; /* Inherit the text color */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.each-link-item img {
    width: 50%; /* Adjust as needed */
    height: auto; /* Maintain aspect ratio */
    border-bottom: 1px solid #ddd; /* Divider between image and title */
    margin-bottom: 10px; /* Space between image and title */
}

.each-link-item h3 {
    margin: 0; /* Reset margins */
    font-size: 1.2em; /* Adjust font size as needed */
    color: var(--dgrey); /* Text color */
    transition: color 0.3s; /* Smooth transition for text color */
}

.each-link-item:hover {
    transform: scale(1.05); /* Slightly enlarge item on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add subtle shadow on hover */
}

/*--------------------------------------------------------------
BRANDS
--------------------------------------------------------------*/


.main-brand-area{
	display: block;
	margin-bottom: 1rem;
}

.main-brand-area .each-main-brand{
	display: grid;
	grid-template-columns:1fr ;
	grid-gap:1rem;
	
}
.main-brand-area .each-main-brand img{
	width: 100%;
	
	
}
.main-brand-area .each-main-brand video.the-video{
	width: 100%;
	
	
}
.main-brand-area .each-main-brand .content-side{
	
	align-self: center;
	padding: 0;
	
}
.main-brand-area .each-main-brand .content-side h3{
	
	font-size: 1.4rem;
	
}

.sub-brand-area {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 1rem;
}

.sub-brand-area .each-sub-brand{
	border: 1px solid var(--lgrey);
	padding: 1rem 1.5rem;
	width: calc(100% - 3rem);
	
	background:var(--elgrey);
	text-align: center;

}

.sub-brand-area .each-sub-brand img{
	width:100%;
}
.sub-brand-area .each-sub-brand h3{
font-size: 1.25rem;
}

/*--------------------------------------------------------------
CONTACT
--------------------------------------------------------------*/

/* Container for the contact areas */
.contact-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem; /* Adjust the gap between the columns as needed */
    align-items: start; /* Align items at the start of the grid */
	
	margin-bottom: 1rem;
}

/* Contact left area */
.contact-left-area {
	 background-color: #f9f9f9; /* Example background color */
}

/* Contact right area */
.contact-right-area {
    padding: 2rem; /* Add padding as needed */
    background-color: #f1f1f1; /* Example background color */
	
}

.contact-info{
	margin-bottom: 2rem;
}

.acf-map {
    width: 100%;
    height: 500px;
    margin:  0;
}

.acf-map img {
   max-width: inherit !important;
}


/*--------------------------------------------------------------
Contact form 7
--------------------------------------------------------------*/

/* Container */
.wpcf7 form {
    grid-column: span 2;
	width:calc( 100% - 0);
	margin: 0 auto;
    padding: 2rem 0;
}

/* Input fields */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea {
    width: calc(100% - 2rem);
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: var(--elgrey);
    transition: border-color 0.3s ease;
    text-align: left; /* Ensures text within input fields is left-aligned */
}

/* Submit button */
.wpcf7 input[type="submit"] {
    display: inline-block;
    padding: 1rem 1.5rem;
    font-size: 16px;
    color: #fff;
    background-color: var(--brand);
    border: none;
	border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 10px;
	
}

.wpcf7 input[type="submit"]:hover {
    background-color: var(--hl);
}

/* Label */
.wpcf7 label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
    text-align: left; /* Align labels to the left */
}

/* Error messages */
.wpcf7 .wpcf7-not-valid-tip {
    color: #d9534f;
    font-size: 14px;
    margin-top: -10px;
    margin-bottom: 10px;
}

/* Success message */
.wpcf7 .wpcf7-mail-sent-ok {
    color: #28a745;
    font-size: 16px;
    margin-bottom: 15px;
}

/* Validation error box */
.wpcf7-validation-errors {
    border: 1px solid #d9534f;
    padding: 10px;
    background-color: #f8d7da;
    color: #721c24;
    margin-bottom: 15px;
    border-radius: 4px;
}

/* Additional styles for specific form elements */
.wpcf7 select {
    width: 100%;
    padding: 10px;
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    transition: border-color 0.3s ease;
    font-size: 16px;
    text-align: left; /* Ensures text within select elements is left-aligned */
}



/*--------------------------------------------------------------
FOOTER
--------------------------------------------------------------*/

footer {
	display: grid;
	grid-gap: 10px;
	background-color: var(--brand);
	margin-top: 3rem;
	width: 100%;
	padding: 1.5rem 0 0;
	
	color: var(--white);
}


footer .copyright-sitemap-area{
	text-align: center;

}

footer .copyright-sitemap-area .copyright {
	text-align: center;
}


footer .social-media-icons  {
	display: flex;
	justify-content: space-between;
	align-items: center;
	align-content: center;

    list-style: none;
    margin:  1rem auto;
    padding: 0;
	width: 60%;
}
footer .social-media-icons li {
	margin-right: 1rem;
}
footer .social-media-icons li:last-of-type{
	margin-right: 0;
}
footer .social-media-icons li a {
    color: var(--hl);
}
footer .social-media-icons li a i {
    font-size: 2rem;
}


footer .footer_menu{
	
  	display: flex;
    align-items: center;
    justify-content: center;
    list-style-type: none;
	font-size: 1rem;
	padding: 1rem 0;
	margin: 0 auto 1rem;
	
	border-top: 1px solid var(--hl);
	
	width:70%;
	
	

}

footer .footer_menu li {
	margin: 0 .5rem;
}

footer .footer_menu li a {
	font-weight: 300;
	color: var(--white);
	text-transform: uppercase;

}


