html {
	direction: ltr;
	overflow-x: hidden;
	overflow-y: scroll;
	scrollbar-gutter: stable;
}

body {
	background-color: #FFF;
	color: #777;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 14px;
	line-height: 22px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body a {
	outline: none !important;
}

li {
	line-height: 24px;
}

/* Utility */
.ws-nowrap { white-space: nowrap; }

/* ===============================
   CONTAINER & PAGE WRAP
================================ */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	padding-left: 15px;
  	padding-right: 15px;
	background-color: #f8f8f8;
}

.page-wrap {
	padding-left: 20px;
	padding-right: 20px;
}

/* ===============================
   STICKY HEADER + HERO STACK
================================ */
.sticky-stack {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Breadcrumb */
.breadcrumb {
	background-color: #171717;
	margin: 0;
	padding: 0;
}

/* COLUMN SECTIONS */
.one-column,
.two-column,
.features-section,
.content-section {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 2rem;
}

/* 1 COLUMN SECTION */
.one-column {
	display: flex;
	flex-wrap: wrap;
	padding: .5rem;
	gap: 1rem;
	background-color: #f8f8f8;
	color: #777;
	font-size: 14px;
	line-height: 20px;
}

.one-column > div {
	flex: 1;
	min-width: 250px;
	background-color: #ebe8e8;
	padding: 2rem;
	border-width: 0.1px;
	border-style: solid;
	border-radius: 8px;
}

/* 2 COLUMN SECTION */
.two-column {
	display: flex;
	flex-wrap: wrap;
	padding: 2rem;
	gap: 2rem;
	background-color: #f8f8f8;
	color: #777;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 22px;
}

.two-column > div {
	flex: 1;
	min-width: 250px;
	background-color: #f8f8f8;
	padding: 2rem;
}

/* 4 COLUMN / IMAGE GRID */
.row {
	display: flex;
	flex-wrap: wrap;
	padding: 0 4px;
}

.row-tight {
	margin-top: 1px;
	margin-bottom: 1px;
}

.column {
	flex: 25%;
	max-width: 25%;
	padding: 0 4px;
}

.column img {
	margin-top: 8px;
	vertical-align: middle;
	width: 100%;
}

@media (max-width: 800px) {
	.column {
		flex: 50%;
		max-width: 50%;
	}
}

@media (max-width: 600px) {
	.column {
		flex: 100%;
		max-width: 100%;
	}
}

/* 404 PAGE */
.page-not-found {
	margin: 50px 0;
}

.page-not-found h2 {
	font-size: 140px;
	font-weight: 600;
	letter-spacing: -10px;
	line-height: 140px;
}

.page-not-found h4 {
	color: #777;
}

.page-not-found p {
	font-size: 1.4em;
	line-height: 36px;
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 479px) {
	body {
		font-size: 13px;
	}
}

/* =====================================
   SCROLLED STATE (GLOBAL)
===================================== */
body.is-scrolled .sticky-stack {
	box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* ===============================
   MOBILE DROPDOWNS (theme header) - legacy
================================ */
@media (max-width: 991px) {
	#header .header-nav-main nav > ul > li.dropdown > .dropdown-menu {
		display: none;
		position: static;
		float: none;
		width: 100%;
		opacity: 1;
		box-shadow: none;
		border: 0;
		margin: 0;
		padding: 6px 0 6px 12px;
		background: transparent;
	}

	#header .header-nav-main nav > ul > li.dropdown.open > .dropdown-menu {
		display: block;
	}

	#header .header-nav-main nav > ul > li.dropdown > a.nav-label {
		cursor: pointer;
		user-select: none;
	}
}

/* Keyboard users: always see where focus is */
:focus { outline: none; }

:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

/* Make focus obvious on custom buttons/links */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	border-radius: 6px;
}

/* ===============================
   Section title underline (global)
   Usage: <h2 class="section-title">...</h2>
================================ */
.section-title {
  position: relative;
  display: block;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  color: rgb(113, 113, 141);
  font-size: 2rem;
  font-weight: 600;
}

.section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: rgba(45, 147, 145, 0.4); /* #2d9391 */
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s ease-out;
}

.section-title.in-view::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .section-title::after {
    transition: none;
    transform: scaleX(1);
  }
}

/* ===============================
   SCROLLBAR (prevent layout shift + subtle brand styling)
   - scrollbar-gutter: stable reserves space to stop the page “jump”
   - overflow-y: scroll ensures consistent layout on older browsers
================================ */
html {
	/* keep existing declarations above; see html rule at top */
}

/* Firefox */
* {
	scrollbar-width: thin;
	scrollbar-color: rgba(45, 147, 145, 0.55) rgba(0, 0, 0, 0.06);
}

/* WebKit (Chrome/Edge/Safari) */
::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}
::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.06);
}
::-webkit-scrollbar-thumb {
	background-color: rgba(45, 147, 145, 0.55);
	border-radius: 999px;
	border: 3px solid rgba(0, 0, 0, 0.06);
}
::-webkit-scrollbar-thumb:hover {
	background-color: rgba(45, 147, 145, 0.75);
}