@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');
*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: "Montserrat", Helvetica, Arial;
	color: #002760;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
html,body {
	font-size: 16px;
	min-width: 300px;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	scroll-behavior: smooth;
	background: #FFFEFE;
	background-repeat: no-repeat;
    background-attachment: fixed;
    background-attachment: fixed;
	/*
	#C0E6F6
	#BFE4F6 rgba(191, 228, 246, 1) LIGHT
	#0F66A0 rgba(15, 102, 160,1) MED
	#0271AF rgba(2, 113, 175,1) MED2
	#1C5587 rgba(28, 85, 135, 1) DARK
	*/
}
.noto-serif {
  font-family: "Noto Serif", serif;
}
.no-anim {
	-webkit-transition-property: none;
	-moz-transition-property: none;
	-o-transition-property: none;
	transition-property: none;
}
.text_shadow {text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;}
body { display: flex; flex-direction: column; min-height: 100dvh; }
main { flex-grow: 1;}
a { text-decoration: none; color: rgba(28, 85, 135, 1); }
a.inline { text-decoration: underline; font-style: italic;}
a:hover {color: rgba(2, 113, 175, 1);}
.clearfix::after { content: ""; clear: both;display: table;}

a.button, a.button-inv, a.button-inv-2 { padding: 14px; font-weight: 500; font-size: 1rem; border-radius: 8px;}
button.a-style, button.a-style-inv, button.a-style-inv-2 { border-radius: 8px; border: 0; padding: .5em 1em;}
a.button, button.a-style { background: rgba(255,255,255,1); color: rgba(0,0,0,1);}
a.button:hover, button.a-style:hover { background: rgba(28, 85, 135, 1); color: rgba(255,255,255,1);}
a.button-inv, button.a-style-inv { background: rgba(28, 85, 135, 1); color: rgba(255,255,255,1); }
a.button-inv:hover, button.a-style-inv:hover { background: rgba(15, 102, 160,1); color: rgba(255,255,255,1); }

header {
	position: -webkit-sticky; position: sticky;
	top: 0;
	background: rgba(255,255,255,.8);
	height: 100px;
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	/*border-bottom: solid 1px rgba(93, 115, 126, 0.8);*/
	z-index: 10005;
}

header section {height: 100px;}
header #logolink{
	position: absolute;
	top: 50%;
	left: 40px;
	-webkit-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	-o-transform: translate(0, -50%);
	transform: translate(0, -50%);
	z-index: 10001;
}
header .logo {
	height: 56px;
}

nav {
	position: absolute;
	top: 50%;
	right: 20px;
	-webkit-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	-o-transform: translate(0, -50%);
	transform: translate(0, -50%);
	background: rgba(255,255,255,0);
}
nav .hamburger { display: none;}
nav .menu { display: block; list-style-type: none; height: 60px;}
nav .menu .item{ display: inline-block; height: 60px; vertical-align: middle;}
nav a { display: inline-block; margin: 0 10px; line-height: 60px; font-weight: 600; font-size: 1.125rem; }

.hamburger { display: inline-block; cursor: pointer; background-color: transparent; border: 0; overflow: visible; }
.hamburger:hover { opacity: .5; }
.hamburger.is-active:hover { opacity: .5; }
.hamburger-box { width: 40px; height: 22px; display: inline-block; position: relative; }
.hamburger-inner { display: block; top: 50%; margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 30px; height: 4px; background-color: rgba(93, 115, 126, 1); border-radius: 4px; position: absolute; }

.hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; }
.hamburger--slider .hamburger-inner { top: 2px; }
.hamburger--slider .hamburger-inner::before { top: 10px;}
.hamburger--slider .hamburger-inner::after { top: 20px; }

.hamburger--slider.is-active .hamburger-inner {  -webkit-transform: translate3d(0, 10px, 0) rotate(45deg);  -moz-transform: translate3d(0, 10px, 0) rotate(45deg);  -ms-transform: translate3d(0, 10px, 0) rotate(45deg);  -o-transform: translate3d(0, 10px, 0) rotate(45deg);  transform: translate3d(0, 10px, 0) rotate(45deg); }
.hamburger--slider.is-active .hamburger-inner::before { -webkit-transform: translate3d(0,0, 0); -moz-transform: translate3d(0,0, 0); -ms-transform: translate3d(0,0, 0);  -o-transform: translate3d(0,0, 0); transform: translate3d(0,0, 0); opacity: 0;}
.hamburger--slider.is-active .hamburger-inner::after {  -webkit-transform: translate3d(0, -20px, 0) rotate(-90deg); -moz-transform: translate3d(0, -20px, 0) rotate(-90deg); -ms-transform: translate3d(0, -20px, 0) rotate(-90deg); -o-transform: translate3d(0, -20px, 0) rotate(-90deg); transform: translate3d(0, -20px, 0) rotate(-90deg);}

@media screen and (max-width: 820px) {
	header #logolink{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
	nav  { height: 100px; left: 20px; transition: all 0s; }
	nav .hamburger { display: block; height: 100px;}
	nav .menu { display: none; margin: 0 -20px; height: 100dvh; overflow-y: auto; background: rgba(255,255,255,.98);}
	nav .menu .item{ padding: 0 10px;display: block;}
	nav .menu .item:last-child{border-bottom: solid 1px rgba(15,101,158,.95);}
	nav a:hover {color: rgba(191, 228, 246,1);}
}
.no-select {-moz-user-select: none; -webkit-user-select: none; user-select: none;}
footer { bottom: 0; background: rgba(28, 85, 135, 1); position: relative; min-height: 100px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 10000; padding-bottom: 32px; color: #ffffff;}
footer  > svg { position: absolute; top: -45px; display: block; height: 50px; width: 100%;}
#footer-cont { padding-top: 30px; color: #FFF; display: flex; flex-flow: row wrap; }
#footer-contact  { flex: 1 1 45%; padding-left: 0px; }
#footer-contact label, #footer-social label{ display: block; color:rgba(255,255,255,1); font-size: 0.95rem; font-weight: 600; margin: 20px 0;}
#footer-contact span { color:rgba(255,255,255,1); font-size: 0.95rem; font-weight: 500;}
#footer-social { flex: 1 1 55%; padding-left: 20px; margin-top: 0px;}
#footer-social img { height:30px; border-radius: 8px; cursor: pointer; transform: rotateY(0deg);}
#footer-social img:hover { background: var(--bg, #0F66A0); transform: rotateY(360deg);}
#footer-contact-group div { margin-bottom: 4px;}
#footer-contact-group div:has(a:hover) { margin-left: 10px;}
#footer-contact-group img {height:16px; margin-right: 4px;}

@media screen and (max-width: 820px) {/* for mobile.*/
	#footer-cont {	flex-flow: column nowrap; }
	#footer-social { padding-left: 0px; margin-top: 20px;}
}
@media screen and (min-width: 1280px) {/* for large screen sizes.*/
	#footer-cont {	flex-flow: row wrap; }
}
h1 { font-size: 2rem; font-weight: 600; }
h2 { font-size: 1.25rem; font-weight: 500; }
.dblock { display: block; }

section { position: relative; width:100%; max-width:1280px; margin: 0 auto; padding: 0 40px;}
section.max { position: relative; width: 100%; max-width: 100dvw; margin: 0 auto; padding: 40px 0; color: #FFF; }
section.services { min-height: 120px;color: #FFF;}
section.services img { float: left; margin: -60px 20px 20px -20px; width: 360px; border-radius: 10px; }
section.services h2,section.services span { color: #FFF;  }
#welcome { padding-top: 150px; margin-top: 100px; margin-bottom:110px; padding-left: min(380px, 15%);}
#w_imgleft { position: absolute; z-index: 0; left: -20%; max-width: 600px; width: 100%; object-fit: cover; mix-blend-mode: multiply;}
#w_imgright { position: absolute; z-index: 0; right: -10%; max-width: 600px; width: 100%; object-fit: cover; mix-blend-mode: multiply;}

.carousel {
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	anchor-name: --carousel;
	display: flex;
	gap: 20px;
	padding: 10px;
	flex: column wrap;
		> .card {
			scroll-snap-align: center;
			scroll-snap-stop: always;
		}
}

.carousel--scroll-markers {
	scroll-marker-group: after;

	&::scroll-marker-group {
		position: fixed;
		position-anchor: --carousel;
		position-area: block-end;
		position-visibility: always;
		margin: 10px;

		display: grid;
		height: 30px;
		grid-auto-columns: 20px;
		grid-auto-flow: column;
		gap: 20px;
	}

	> .card {
		&::scroll-marker {
		  content: '' / attr(data-label);
		  width: 12px;
		  height: 12px;
		  border: 2px solid rgba(191, 228, 246, 1);
		  border-radius: 50%;
		  cursor: pointer;
		  background: rgba(191, 228, 246, 1);
		}
		&::scroll-marker:target-current {
			background: var(--accent);
			background-color: rgba(28, 85, 135, 1);
			border-color: rgba(28, 85, 135, 1);
		}
		&::scroll-marker:hover {}
	}
}
.carousel--scroll-buttons {
	&::scroll-button(*) {
		position: fixed;
		position-anchor: --carousel;
		position-visibility: always;
		font-family: "Material Symbols Outlined";
		border-radius: 50%;
		background: rgba(191, 228, 246, 1);
		width: 30px;
		height: 30px;
		border: 2px solid rgba(191, 228, 246, 1);
		color: rgba(28, 85, 135, 1);
	}
	&::scroll-button(*):hover {background: rgba(28, 85, 135, 1); border: 2px solid rgba(28, 85, 135, 1); color: rgba(255, 255, 255, 1);cursor: pointer;}
	&::scroll-button(right) {
		position-area: inline-end center;
		content: 'arrow_forward' / 'Next';
	}

	&::scroll-button(left) {
		position-area: inline-start center;
		content: 'arrow_back' / 'Previous';
	}
}
.carousel--inert {
  > .card {
    container-type: scroll-state;

    > div {
      @container not scroll-state(snapped) {
        interactivity: inert;
        opacity: .10;
      }
    }
  }
}
.card {flex: 0 0 90%; box-shadow: 0 3px 5px rgba(28, 85, 135, 0.1); border-radius: 8px;}
.card div { padding: 20px;}
.card img { float: left; margin-right: 10px; margin-bottom: 10px; width: 100px;}
.card label { display: block; font-size: 1rem; font-weight: 600; text-transform: capitalize; margin-bottom: 10px;}
.card span { display: block; font-size: 0.875rem; font-weight: 400;white-space: normal; }
div.divider { margin: 10px 0; height: 10px; position: relative; width: 100%; background: radial-gradient(ellipse farthest-side at top center, rgba(0,0,0,0.08), transparent);}
div.divider:before { content: ""; display: block; position: absolute; top: 0px; right: 0; left: 0; height: 3px; background: linear-gradient(left, transparent, rgba(0,0,0,0.02), rgba(0,0,0,0.02), transparent);}

blockquote { position: relative; font-size: 1rem; padding: 0 40px; margin: 20px 0;}
blockquote::before {
   content: "“";
   font-size: 5rem;
   position: absolute;
   top: 0; left:0;
   opacity: 0.5;
}
blockquote::after {
   content: "”";
   font-size: 5rem;
   position: absolute;
   bottom: -50px; right:0;
   opacity: 0.5;
}
.gallerygroup { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
.gallerygroup img { position: relative; width: max(150px, 18%); aspect-ratio: 1; cursor: pointer; object-fit: cover; border-radius: 5px;}
.gallerygroup img:hover, .modalclose:hover { transform: scale(1.1); }
.gallerymodal { display: none;
	position: fixed; z-index: 10005;
	top: 0; left: 0;
	width: 100dvw; height: 100dvh;
	background-color: rgba(255, 255, 255, 0.8);
	align-items: center;
	justify-content: center;
	transition: opacity 0.5s ease;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(8.1px);
	-webkit-backdrop-filter: blur(8.1px);
}
.gallerymodal-content {
	position: relative;
	width: 90%;
	height: auto;
	max-width: 90%;
	max-height: 90%;
	border-radius: 8px;
	overflow: hidden;
	object-fit: cover;
	box-shadow: 0 4px 6px rgba(28, 85, 135, 0.5);
}
.modalclose { position: absolute; top: 5px; right: 30px; color: #1C5587; font-size: 3.125rem; font-weight: bold; cursor: pointer;}

.teamgroup { display: flex; flex-flow: column wrap; gap: 20px;}
.teammember { display: flex; flex-flow: row nowrap; }
.teammember img { object-fit: cover; width: min(300px, 100%); border-radius: 8px 0 0 8px;}
.tm-text { background: #1C5587; color: #FFFFFF; padding: 20px; border-radius: 0 8px 8px 0;}
.tm-title { display: block; font-size: .875rem; color: #FFFFFF;}
.tm-name { display: block; font-size: 1.5rem; font-weight: bold; color: #FFFFFF; margin: 10px 0 10px 0;}
.tm-desc { display: block; font-size: 1rem; color: #FFFFFF;}

.valuesgroup { display: flex; flex-flow: row wrap; gap: 20px; justify-content: space-between;}
.valuemember { flex: 1 1 calc((100% - 40px) / 3); display: flex; flex-flow: row nowrap; align-items: flex-start; gap: 20px;}
.valuemember img { width: 60px; object-fit: contain; aspect-ratio: 1; -moz-user-select: none; -webkit-user-select: none; user-select: none;}
.valuetext span {display: block; font-size: 1rem; font-weight: 600;}
.valuetext p { font-size: 1rem;}

.servicesgroup { padding: 50px 20px 0px 20px; display: flex; flex-flow: row wrap; gap: 5px;}
.servicesgroup a { flex: 0 1 calc((100% - 40px) / 3); padding: 6px; border-radius: 8px; background: rgba(15, 102, 160, .5); }
.servicesgroup a:hover { background: rgba(15, 102, 160, .8);}
.servicesgroup span { display: block; text-align: center; color:#FFFFFF; }

.sinfogroup { display: flex; flex-flow: column wrap; gap: 20px; justify-content: space-between;}
.sinfomember { display: flex; flex-flow: row nowrap; align-items: flex-start; gap: 0px; overflow: hidden; border-radius: 8px; box-shadow: 0 3px 5px rgba(28, 85, 135, 0.1); }
.sinfomember img { width: max(200px, 20%); object-fit: contain; aspect-ratio: 1; -moz-user-select: none; -webkit-user-select: none; user-select: none;}
.sinfomember label {display: block; font-size: 1rem; font-weight: 600; margin-bottom: 10px;}
.sinfomember p { font-size: 1rem;}
.sinfomember div { padding: 10px 20px 20px 20px;}

details { border: 1px solid #ccc; border-radius: 8px; margin-bottom: 10px; width: 100%; box-shadow: 0 3px 5px rgba(28, 85, 135, 0.1); overflow: hidden;}
summary { background-color: #f1f1f1; padding: 18px; cursor: pointer; font-weight: bold; list-style: none; }
summary::before { content: '+'; float: right; margin-right: 10px; }
details[open] summary::before { content: '-'; }
.a_content { padding: 18px; background-color: white; }

.contactheader { min-height: 100px; color: #FFF;}
.contactheader img { margin: -60px 0 20px 0; width: 100%; max-height: 500px; border-radius: 10px; object-fit: cover;}
.contactheader h1 { color: #FFF; text-align: center;  }
.contactheader span { color: #FFF; width: 100%; display: block; text-align: center; }
.contactinfogroup { display: flex; flex-flow: row wrap; justify-content: center; gap: 30px;}
.contactinfogroup h1 { flex: 1 1 100%; text-align: left;}
.contactinfo {display: flex; flex-flow: column wrap; flex: 1;}
.officehoursgroup { flex: 0 0 auto;}
.officehoursgroup h2 { font-weight: bold; width: 280px;}
.officehours { flex: 0 0 auto;}
.officehours div { display: flex; flex-flow: row nowrap; justify-content: space-between; gap: 20px;}
.officehours div label{ flex: 0 0 min(100px);}
.officehours div span{ display: block; flex: 1 1 auto; text-align: center;}
.contactinfo span { display: block; width: 100%; text-align: left;}

#mobile-footer { display: none; position: -webkit-sticky; padding:0; position: sticky; bottom:0; width: 100%; height: 60px; background: rgba(15, 102, 160,.85); z-index: 10006; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(7px);-webkit-backdrop-filter: blur(7px); box-shadow: 0px -5px 10px rgba(255, 255, 255, .25);box-shadow: 0px -2px 1px rgba(255, 255, 255, .5);}
#mobile-footer span { }
#mobile-footer a { flex: 1 1 50%;}
#mobile-footer a:hover { background: rgba(28, 85, 135, 1);}
#mobile-footer a:hover span{ color:#FFF; }
#mobile-footer a:hover img { transform: rotateY(360deg);}
#mobile-footer a div { height: 60px; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center;}
#mobile-footer a div img { width: 30px; aspect-ratio: 1; margin-right: 20px;}

@media screen and (max-width: 620px) {/* for small mobile.*/
	#w_imgleft { opacity: 0;}
}
@media screen and (max-width: 820px) {/* for mobile.*/
	.contactinfo span { display: block; text-align: center;}
	.contactinfogroup h1 { text-align: center;}
	#mobile-footer { display: flex; flex-flow: row nowrap; align-items: center;  }
	section { padding: 0 20px;}
	section#welcome {margin-top: 40px;padding-left: min(280px, 5%);}
	#w_imgleft {left: -35%; min-width: 520px; max-width: 520px; width: 100%;}
	#w_imgright {right: -30%; min-width: 520px;  max-width: 520px; width: 100%;}
	section.services { min-height: 200px;}
	section.services img { float: none; margin: -60px -10px 20px -10px; width: calc(100vw - 20px); object-fit: cover; height: 200px;}
	.card img { display: block; float: none; margin-right: 0px; margin: 0 auto;}
	.card label { text-align: center;}
	.card span { text-align: center; }
	.teammember { display: flex; flex-flow: column wrap}
	.teammember img { width: 100%; border-radius: 8px 8px 0 0;}
	.tm-text { border-radius: 0 0 8px 8px;}
	.valuesgroup { flex-flow: column wrap;}
	.servicesgroup { flex-flow: column wrap; gap: 2px;}
	.servicesgroup a:hover { padding-left: 16px;}
	.servicesgroup span {text-align: left;}
	.sinfomember { display: flex; flex-flow: column wrap}
	.sinfomember img { width: 100%; border-radius: 8px 8px 0 0;}
	.contactheader { min-height: 200px;}
	.contactheader img { margin: -60px -10px 20px -10px; width: calc(100vw - 20px); height: 300px;}
}
@media screen and (min-width: 621px) and (orientation: landscape) {
	#mobile-footer { display: none; }
}
@media screen and (min-width: 1280px) {/* for large screen sizes.*/
	#footer-cont {	flex-flow: row wrap; }
}