/*===========================================
	GLOBALS
===========================================*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('hts-icons/hts-100.css');
:root{
	--text-color: #1f2f16;
	--background-color: #d7dae5;
	--top-nav-height: 0px;
	--max-content-width: 1080px;
	--slide-duration: 7s;
	--slide-count: 2;
	--news-background-color: #f7f7ff;
	--news-text-color: #2f4858;
	/* To change slide duration: modify --slide-duration (e.g., 5s, 10s)
	   To add more slides:
	   1. Update --slide-count to match number of slides
	   2. Add corresponding nth-child rules in hero section
	   3. Update fadeInOut keyframe percentages: visible until (100 / slide-count)% */
}

* {
	box-sizing: border-box;
	font-family: "Noto Sans", sans-serif;
}
html, body{
	margin: 0;
	padding: 0;
}
img{
	width: 100%;
	border-radius: 6px;
}
section{
	width: 100%;
	min-height: 640px;
	padding: 128px 32px 192px;
}

section .content, footer .content, header .content{
	width: min(90vw, var(--max-content-width));
	margin: 0px auto;
	min-height: 320px;
}

section .content .intro{
	padding-bottom: 64px;
}

section .content .intro p {
	max-width: 66%;
	font-size: 1.2em;
	line-height: 1.6em;
	font-weight: 200;
}
section .pill {
	background-color: #bdb4;
	padding: 16px 32px;
	display: inline-block;
	width: fit-content;
	font-weight: 600;
	font-size: 1.6em;
	border-radius: 64px;
}
section .pill.inactive {
	background-color: #bdb1;
	font-weight: 400;
}
.pill + .pill {
	margin-left: 16px;
}
.pill i.icon {
	font-size: 0.9em;
	vertical-align: middle;
}
section h1{

}
section h2{
	font-size: 3em;
	font-weight: 900;

}
section h3 {
	font-size: 2.4em;
}
@media screen and (max-width: 767px){
	section .content .intro p {
		max-width: 100%;
	}
} 

/*============================================
 HEADER
============================================*/
header{
	position: fixed;
	width: 100%;
	top: 0px;
	z-index: 90;
	color: var(--background-color);
	background-color: transparent;
	animation: NavigationBackgroundTransition;
	animation-timeline: scroll(y);
	font-size: 0.9em;
	font-weight: lighter;
}
header .headerlogo{
	font-size: 4em;
	line-height: 0;
	margin-bottom: -24px;
	margin-top: -24px;
}
header .content{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
	padding: 12px;
	min-height: auto;
}
header #menutrigger {
	display: none;
	padding: 16px;
	font-size: 2.5em;
	line-height: 0;
}
header nav#mobilemenu {
	background: var(--background-color);
	height: 100%;
	color: var(--text-color);
	position: fixed;
	width: max(460px, 80vw);
	left: -110vw;
	font-size: 1.5em;
	line-height: 3em;
	box-shadow: 6px 0px 15px -6px #000a;
	z-index: 80;
	top: 0px;
	transition: left 0.3s ease-in-out;
}
header nav#mobilemenu.active {
	left: 0;
}
header .logo-cont{
	height: 36px;
}
header nav#mobilemenu ul{
	list-style: none;
	padding: 0px;
}
header nav#mobilemenu ul li{
	padding: 12px 32px;
	font-weight: 400;
}
header nav#mobilemenu ul a{
	display: block;
	width: 100%;
	text-decoration: none;
}
header nav#mobilemenu ul li.active {
	background-color: var(--text-color);
	/* border-radius: 10px; */
	color: var(--background-color);
}
header nav#mobilemenu ul li:hover {
	background-color: #0001;
}
header nav#mobilemenu #mobilemenuclose {
	font-size: 3.5em;
	transform: rotate(45deg);
	width: fit-content;
	font-weight: 100;
	padding: 24px;
	user-select: none;
}
nav{
	padding: 0px;
}
ul.nav {
	list-style: none;
	padding: 0px;
	display: flex;
	gap: 20px;
	margin: 0;
	justify-content: end;
}
ul.nav li{

}
@media screen and (max-width: 767px){
	header .content{
		display: none;
	}
	header #menutrigger{
		display: block;
	}
}
/*============================================
 HERO SECTION
============================================*/
section#hero{
	height: calc(100vh - var(--top-nav-height));
	background: url('../images/hero-slides-01.jpg') center center;
	background-size: cover;
	overflow: hidden;
}
section#hero .content{
	height: 100%;
}
section#hero .heroslides{
	list-style: none;
	height: 100%;
	position: relative;
	margin: 0;
	padding: 0;
}
section#hero .heroslides li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 32px;
	justify-content: center;
	padding: 0px 15vw 0px 0px;
	color: white;
	opacity: 0;
	animation: fadeInOut calc(var(--slide-duration) * var(--slide-count)) infinite;
}
section#hero .heroslides li:nth-child(1) {
	animation-delay: calc(var(--slide-duration) * 0);
}
section#hero .heroslides li:nth-child(2) {
	animation-delay: calc(var(--slide-duration) * 1);
}
section#hero .heroslides li:nth-child(3) {
	animation-delay: calc(var(--slide-duration) * 2);
}
section#hero .heroslides li:nth-child(4) {
	animation-delay: calc(var(--slide-duration) * 3);
}
section#hero .heroslides li:nth-child(5) {
	animation-delay: calc(var(--slide-duration) * 4);
}
section#hero .heroslides li:nth-child(6) {
	animation-delay: calc(var(--slide-duration) * 5);
}
section#hero .heroslides li:nth-child(7) {
	animation-delay: calc(var(--slide-duration) * 6);
}
section#hero .heroslides li:nth-child(8) {
	animation-delay: calc(var(--slide-duration) * 7);
}
section#hero .heroslides li:nth-child(9) {
	animation-delay: calc(var(--slide-duration) * 8);
}
section#hero .heroslides li:nth-child(10) {
	animation-delay: calc(var(--slide-duration) * 9);
}
section#hero .heroslides li h3 {
	font-size: 3em;
}
section#hero .heroslides li p {
	font-size: 1.5em;
	line-height: 1.2;
	font-weight: 100;
}
section#hero .heroslides li .cta{
	padding: 2vh 0px 3vh 0px;
	text-align: right;
}
section#hero .heroslides li .cta button {
	font-size: 1.2em;
	background: none;
	border: 1px solid white;
	color: white;
	border-radius: 64px;
}

/* Slideshow animation - configured for 2 slides
   For different slide counts, adjust the visible duration:
   - 2 slides: visible until 50% (100/2)
   - 3 slides: visible until 33% (100/3)
   - 4 slides: visible until 25% (100/4), etc. */
@keyframes fadeInOut {
	0% { opacity: 0; z-index: 1; }
	2% { opacity: 1; z-index: 2; }
	48% { opacity: 1; z-index: 2; }
	50% { opacity: 0; z-index: 1; }
	100% { opacity: 0; z-index: 1; }
}

@media screen and (max-width: 767px){
	section#hero .content{
		font-size: 0.8em;
	}
	section#hero .pill{
		display: none;
	}
}

/*================================================
 KPIS
================================================*/
section#kpis{
	background: url("../images/kpis-bg_l.jpg") center center;
	background-size: cover;
	color: #012C22;
}
section#kpis .kpilist {
	list-style: none;
	display: flex;
	justify-content: space-between;
	padding: 0;
	animation: ScaleDown;
	animation-timeline: view();
}
section#kpis .kpilist li {
	background-color: #0002;
	width: 32%;
	padding: 36px;
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
section#kpis .kpilist li .kpivalue {
	font-size: 3em;
	font-weight: 700;
}
section#kpis .kpilist li .title {
	text-align: center;
	font-size: 1em;
	font-weight: 400;
	padding-top: 12px;
}

@media screen and (max-width: 767px){
	section#kpis .kpilist{
		flex-direction: column;
		gap: 24px;
	}
	section#kpis .kpilist li{
		width: 100%;
		padding: 64px 36px;
	}
}

/*================================================
  ABOUT SECTION
================================================*/
section#about, section#servicesintro {
	color: var(--background-color);
	background: var(--text-color);
}
/*================================================
 HOME PAGE SERVICES
================================================*/
section#services{
	background: url(../images/services-bg.jpg) center center;
	background-size: cover;
	background-attachment: fixed;
}
section#services .subcontainer{
	display: flex;
}
section#services .intro{
	flex-basis: 45%;
}
section#services .accordiongroup{
	flex-basis: 55%;
}
@media screen and (max-width: 767px){
	section#services .subcontainer{
		flex-direction: column;
	}
	section#services .intro{
		flex-basis: 100%;
	}
	section#services .accordiongroup{
		flex-basis: 100%;
	}
}
/*================================================
 CLIENTS SECTION
================================================*/
section#clients{
	background-color: #f8f9fa;
}

section#clients .logo-carousel {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 10%;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	animation: ScaleDown;
	animation-timeline: view();
}

section#clients .logo-carousel li {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	min-width: 200px;
	min-height: 120px;
}

section#clients .logo-carousel li img {
	max-width: 180px;
	max-height: 100px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(50%);
	opacity: 0.7;
	transition: filter 0.3s ease, opacity 0.3s ease;
}

section#clients .logo-carousel li:hover img {
	filter: grayscale(0%);
	opacity: 1;
}

@media screen and (max-width: 767px){
	section#clients .logo-carousel {
		gap: 24px;
	}

	section#clients .logo-carousel li {
		min-width: 150px;
		min-height: 100px;
	}

	section#clients .logo-carousel li img {
		max-width: 130px;
		max-height: 80px;
	}
}
/*================================================
 FOOTER SECTION
================================================*/
footer {
	background-color: var(--text-color);
	color: var(--background-color);
	padding: 48px 0px;
}
footer .content{

}
footer form {
	text-align: end;
}
footer form button {
	border-color: #888;
	color: inherit;
	font-size: inherit;
	min-width: 120px;
}
footer .contactus {
	line-height: 1.6em;
}
footer .contactus ul {
	list-style: none;
}
footer ul.social {
	display: flex;
	font-size: 1.5em;
}
/*================================================
 SERVICE PAGE
================================================*/
section#servicesintro p{
	line-height: 1.7em;
	font-weight: 100;
	font-size: 1.4em;
}

section#serviceslist{

}
/*================================================
 CONTRACTUAL SERVICES OVERRRIDES
================================================*/
.contractual section#servicesintro, .contractual footer{
	background-color: #2f4858;
	color: #f7f7ff;
}
.contractual section#servicesintro p{
	line-height: 1.7em;
	font-weight: 100;
	font-size: 1.4em;
}
.contractual header{
	background-color: #f7f7ff;
	color: #2f4858;
	animation: none;
}
/*================================================
 WIDGETS
================================================*/
.accordiongroup {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

/* Hide the default "none" radio button */
.accordiongroup > input[type="radio"] {
  display: none;
}

.accordionelement {
  border: 1px solid #ddd;
  margin-bottom: 10px;
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--background-color);
  transition: background-color 0.3s ease-in-out;
}

.accordionelement input[type="radio"] {
  display: none;
}

.accordion-header {
  margin: 0;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.3s ease-in-out;
}

.accordion-header:hover {
  background-color: #e9ecef;
}

/* Different hover color for expanded state */
.accordionelement:has(input[type="radio"]:checked) .accordion-header:hover {
  background-color: var(--text-color);
}

.accordion-header h3 {
  margin: 0;
  padding: 45px 20px;
  transition: color 0.3s ease-in-out;
  font-size: 1.3em;
}

/* By default, show the "open" label and hide the "close" label */
.accordion-open {
  display: block;
}

.accordion-close {
  display: none;
}

/* When expanded, hide the "open" label and show the "close" label */
.accordionelement input[type="radio"]:checked ~ .accordion-open {
  display: none;
}

.accordionelement input[type="radio"]:checked ~ .accordion-close {
  display: block;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease-in-out;
  padding: 0 20px;
}

.accordionelement input[type="radio"]:checked ~ .accordion-content {
  max-height: 500px; /* Adjust based on content height */
  padding: 15px 20px;
}

/* Expanded accordion styling - reversed colors for entire element */
.accordionelement input[type="radio"]:checked ~ .accordion-header h3,
.accordionelement input[type="radio"]:checked ~ .accordion-content {
  color: white;
}

.accordionelement:has(input[type="radio"]:checked) {
  background-color: rgb(50, 70, 66);
}

/* Optional: Add indicator arrow */
.accordion-header h3::after {
  content: "▼";
  float: right;
  transition: transform 0.3s ease-in-out;
  font-size: 12px;
  margin-top: 3px;
}

.accordionelement input[type="radio"]:checked ~ .accordion-header h3::after {
  transform: rotate(180deg);
}

.tri-images {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, auto);
	grid-column-gap: 16px;
	grid-row-gap: 16px;
}
.tri-images img{
	border-radius: 8px;
}
.tri-images img:nth-child(1) {
	grid-area: 1 / 1 / 3 / 2;
	aspect-ratio: 2/3;
	object-fit: cover;
	align-self: center;
}
.tri-images img:nth-child(2) {
	grid-area: 1 / 2 / 2 / 3;
	aspect-ratio: 1/1;
	object-fit: cover;
}
.tri-images img:nth-child(3) {
	grid-area: 2 / 2 / 3 / 3;
	aspect-ratio: 2/3;
	object-fit: cover;
}

/*================================================
 GENERICS
================================================*/
button, input[type=submit]{
	padding: 12px 24px;
	font-size: 1.2em;
	background: none;
	border: 1px solid var(--text-color);
	border-radius: 64px;
}

input, textarea {
	width: 100%;
	padding: 12px 24px;
	margin-bottom: 8px;
	border-radius: 8px;
	border: 1px solid #888;
	background-color: #fff2;
	color: inherit;
	font-size: inherit;
}

a, a.active, a.visited {
	color: inherit;
	text-decoration: none;
}

.columns{
	display: flex;
	gap: 32px;
	flex-direction: row;
}
.column{
	flex-basis: 50%;
}
i.icon {
	font-size: 1.4em;
	vertical-align: middle;
	padding-right: 0.15em;
	padding-left: 0.15em;
}
@media screen and (max-width: 767px){
	.columns{
		flex-direction: column;
	}
}

/*================================================
 ANIMATIONS
================================================*/
.scrollShow{
	animation: ScrollShow;
	animation-timeline: view();
}
.scrollShow .column:nth-child(odd){
	animation: EnterFromLeft;
	animation-timeline: view();
}
.scrollShow .column:nth-child(even){
	animation: EnterFromRight;
	animation-timeline: view();
}

@keyframes ScaleDown{
	0%{
		transform: scaleX(150%);
	}
	50%, 100%{
		transform: scaleX(100%);
	}
}

@keyframes NavigationBackgroundTransition{
	0%{
		background-color: transparent;
		color: var(--background-color);
	}
	10%, 100%{
		background-color: var(--background-color);
		color: var(--text-color);
		box-shadow: 0px 0px 10px 5px #0005;
	}
}

@keyframes ScrollShow{
	from{
		opacity: 0;
		transform: translateY(120px);
	}
	to{
		opacity: 1;
		transform: translateY(0px);
	}
}

@keyframes EnterFromLeft{
	0%{
		transform: translateX(-30vw);
	}
	50%,100%{
		transform: translateX(0);
	}
}

@keyframes EnterFromRight{
	0%{
		transform: translateX(+30vw);
	}
	50%,100%{
		transform: translateX(0);
	}
}
/* DESIGN IDENTIFIERS - NOT FOR PRODUCTION */
/*section:nth-child(odd){
	background: #f2f2f2;
}
section:nth-child(even){
	background: #ffffff;
}
section .content{
	border: 1px dotted silver;
}
section#hero .heroslides{
	border: 1px dotted red;
}
section#hero .heroslides li{
	border: 1px solid green;
}*/