/*
Theme Name: Maxintegrative
Theme URI: https://max.integrativecom
Author: devaDesign
Author URI: https://devadesign.eu/
Description: Modular WP theme for fast development with variables.
Version: 1.0
License: DevaDesign License v1page-template-page-integrative-medicine
License URI: https://devadesign.eu/license
Tags: custom-theme, modular, responsive
Text Domain: dDtheme
*/

/* ===================================================================================================
   Global CSS Variables
   =================================================================================================== */
:root {
	--primary: #5c7480;
	--primary-dark: #485a64;
	--primary-light: #768b98;

	--secondary: #a0785f;
	--secondary-dark: #6f625c;
	--secondary-light: #b68f76;

	/* CTA */
	--cta: #e57417;file
	--cta-hover: #cf6815;
	--cta-text: #fff;

	/* Buttons */
	--btn: var(--primary);
	--btn-hover: var(--primary-dark);
	--btn-text: #fff;

	/* Neutrals / background - light */
	--bcg: #fff;
	--bcg-alt: #f5f1ec;

	/* Neutrals / background - dark */
	--bcg-dark: #161818;
	--bcg-dark-soft: #212425;

	/* Text on light */
	--text: #1a1c1d;
	--title: var(--text);
	--text-muted: #5f6467;
	--text-subtle: #8c9194;

	/* Text on dark */
	--text-on-dark: #f6f7f7;
	--text-on-dark-muted: #c8ced1;

	/* Status */
	--success: #5f7668;
	--warning: #c7923a;
	--error: #b14b3b;
	--info: #5c7480;
    
    --success-dark: color-mix(in srgb, var(--success) 54%, #000);
    --success-light: color-mix(in srgb, var(--success) 9%, #fff);
    --success-border: color-mix(in srgb, var(--success-dark) 18%, transparent);

    --warning-dark: color-mix(in srgb, var(--warning) 54%, #000);
    --warning-light: color-mix(in srgb, var(--warning) 9%, #fff);
    --warning-border: color-mix(in srgb, var(--orange-warning) 18%, transparent);

    --error-dark: color-mix(in srgb, var(--error) 54%, #000);
    --error-light: color-mix(in srgb, var(--error) 9%, #fff);
    --error-border: color-mix(in srgb, var(--error-dark) 18%, transparent);

    --info-dark: color-mix(in srgb, var(--info) 54%, #000);
    --info-light: color-mix(in srgb, var(--info) 9%, #fff);
    --info-border: color-mix(in srgb, var(--info-dark) 18%, transparent);

	/* spacing */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-7: 2rem;
	--space-8: 3rem;
	--space-9: 4.5rem;
	--space-10: 6rem;
	--space-11: 7.5rem;
	--space-12: 9rem;
    
	/* Semantic aliases */
	--space-2xs: var(--space-1);
	--space-xs: var(--space-2);
	--space-s: var(--space-4);
	--space: var(--space-6);
	--space-l: var(--space-7);
	--space-xl: var(--space-8);
	--space-2xl: var(--space-9);
	--space-3xl: var(--space-10);
	--space-4xl: var(--space-12);

	/* Borders */
	--border: #d4ccc3;
    --border-focus: #84807d;
	--border-dark: #2b2d2f;
	--radius: 9px;
	--radius-full: 100%;

	/* Shadows */
	--shadow-alpha-color: color-mix(in srgb, var(--primary-dark) 18%, transparent);
	--shadow: 0 4px 24px var(--shadow-alpha-color);


	/* Transition */
	--transition: 0.27s ease-in-out;
	--transition-slow: 0.54s ease-in-out;

	/* Container width */
	--container-max: 1440px;
	--container-med: 900px;
	--container-min: 720px;
    @media (max-width: 1920px) {
        --container-max: 1280px;
        --container-med: 810px;
        --container-min: 630px;
    }
    
	/* Header & Navigation */
	--header-height: 90px;
	--nav-link-margin: 36px;
	--nav-link-height: 90px;
	--nav-link-lh: 90px;
	--nav-sub-link-height: 54px;
	--nav-sub-link-lh: 54px;
	--nav-sub-link-padding: 0 18px;
    
	/* Footer */
	--footer-bg: var(--bcg-dark-soft);
	--footer-text: var(--text-on-dark-muted);
    
	/* Typography */
	--font-base: 18px;
	--font-big: 1.15rem;
	--font-small: .85rem;
    @media (max-width: 1920px) {--font-base: 16px;}
    
	--light: 300;
	--normal: 400;
	--semi-bold: 600;
	--bold: 700;
	--black: 900;
}

/* ===================================================================================================
   Fonts
   =================================================================================================== */
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Regular.woff2') format('woff2'),
        url('fonts/OpenSans-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Bold.woff2') format('woff2'),
        url('fonts/OpenSans-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans Condensed';
    src: url('fonts/OpenSansCondensed-Bold.woff2') format('woff2'),
        url('fonts/OpenSansCondensed-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ===================================================================================================
   Reset & Box Sizing / Rendering
   =================================================================================================== */
html {
	font-size: var(--font-base);
	box-sizing: border-box;
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
    scrollbar-width: thin;
}

*, *::before, *::after {
	box-sizing: inherit;
}

section,
.footer{
    content-visibility: auto;
	contain-intrinsic-size: 540px;
}

/* ===================================================================================================
   Base Typography
   =================================================================================================== */
body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
	font-size: 1rem;
	font-weight: var(--normal);
    line-height: 1.5;
	color: var(--text);
	background: var(--bcg);
	text-align: left;
	text-rendering: optimizeLegibility;
    text-rendering: auto;
	-webkit-font-smoothing: auto;
	-moz-osx-font-smoothing: auto;
	font-variant-ligatures: normal;
    opacity: 0;
    animation: body-fade-in var(--transition) forwards;
}

h1, h2, h3, h4, h5, h6, .title1, .title2, .title3, .title4, .title5, .title6 {
    font-family: 'Open Sans Condensed', sans-serif;
	color: var(--title);
	margin-top: 0;
    font-kerning: normal;
    font-feature-settings: "kern" 1, "liga" 1;
    text-wrap: balance;
    letter-spacing: -0.027em;
}

/*h1, .title1 {
	font-size: clamp(1.5259rem, 0.458rem + 5.34vw, 3.0518rem);
	line-height: 1.15;
	margin-bottom: var(--space);
}*/

h1, .title1,
h2, .title2 {
	font-size: clamp(1.5rem, 0.367rem + 4.27vw, 2.4414rem);
	line-height: 1.2;
	margin-bottom: var(--space-l);
}

h3, .title3 {
	font-size: clamp(1.5rem, 0.293rem + 3.42vw, 1.9531rem);
	line-height: 1.25;
	margin-bottom: var(--space);
}

h4, .title4 {
	font-size: clamp(1.25rem, 0.234rem + 2.74vw, 1.5625rem);
	line-height: 1.3;
	margin-bottom: var(--space-5);
}

h5, .title5,
h6, .title6 {
	font-size: clamp(1rem, 0.187rem + 2.19vw, 1.25rem);
	line-height: 1.3;
	margin-bottom: var(--space-s);
}

blockquote, ul, ol, dl, form, table, pre {
	margin-bottom: var(--space);
}
p{margin: 0 0 var(--space) 0;}

table,
input,
textarea,
select,
li,
button,
p{
    font-family: inherit;
}

table{
    width:100%;
    border-collapse:collapse;
    display:table;
    border:1px solid #ebe4de;
    margin-bottom: var(--space);
}	
th, td{padding:.5em 1em;
    line-height:1.5em;
    vertical-align:top;
    border-bottom:1px solid #ebe4de;
}			
tr:nth-child(odd) td{
    background: var(--bcg-alt);
}			
tr:first-child td{
    color: #fff;
    background: var(--primary);
}

@media (max-width: 600px){

	.entry-content table{
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.entry-content table tbody,
	.entry-content table thead,
	.entry-content table tr{
		width: 100%;
	}

}

/* ===================================================================================================
   Lists
   =================================================================================================== */
ul, ol, dl{padding:0;}
ul ul, ul ol, ol ol, ol ul, dd{margin:0;}
ul li,
ol li{
    position:relative;
    margin:0 0 0 1rem;
    counter-increment:li;
    display:list-item;
    list-style-position:outside;
}
ul { list-style: disc outside; }
ol { list-style: decimal outside; }

small { font-size: 0.8rem; }
strong, b { font-weight: var(--bold); }
em, cite, q { font-style: italic; }

abbr, acronym {
	text-transform: uppercase;
	border-bottom: 1px dotted var(--border-dark);
	cursor: help;
}

/* ===================================================================================================
   Code & Pre, Blockquote, Caption
   =================================================================================================== */
pre, code, kbd, samp, var {
	font-family: 'Fira Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
	font-size: 0.96em;
}
code {
	background: var(--bcg-alt);
	border: 1px solid var(--border);
	padding: 0 3px;
	border-radius: var(--radius);
	color: var(--text-muted);
}
pre {
	background: var(--bcg-alt);
	border: 1px solid var(--border);
	padding: var(--space-s);
	overflow-x: auto;
}
blockquote {
	margin-left: 2rem;
	border-left: 3px solid var(--border-dark);
	padding-left: 1rem;
	font-style: italic;
	color: var(--text-muted);
}
caption {
	font-style: italic;
	color: var(--text-muted);
	margin: .5em 0;
}

/* ===================================================================================================
   Images & Figures
   =================================================================================================== */
img {
	display: block;
	max-width: 100%;
	height: auto;
	border: none;
}
figure {
	margin: 0;
}
figcaption {
	color: var(--text);
	font-size: 1rem;
	margin: .25rem 0;
	text-align: center;
}

/* ===================================================================================================
   Forms
   =================================================================================================== */
input, textarea, select, button {
	font-family: inherit;
	font-size: inherit;
}
input, select, textarea {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bcg);
	padding: 0.7em 1em;
	transition: border-color var(--transition);
}
input:focus, textarea:focus, select:focus {
	border: 1px solid var(--border-focus);
    outline: none;
}

input[type="submit"], input[type="reset"], input[type="button"], a.button {
    display: inline-block;
    padding: 0 2.5em;
    height: 54px;
    line-height: 54px;
    text-transform: uppercase;
    text-decoration: none;
    font-size: var(--font-small);
    font-weight: var(--bold);
    color: var(--btn-text);
    border: none;
    border-radius: var(--radius);
    background: var(--btn);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
@media (max-width: 1920px) {
    input[type="submit"], input[type="reset"], input[type="button"], a.button {height: 48px;line-height: 48px;padding: 0 2em;}
}
input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, a.button:hover {
    color: var(--btn-text);
    background: var(--btn-hover);
}

/* Hide browser default checkboxes/radios (keep only for generic) */
input[type="checkbox"], input[type="radio"] {
	accent-color: var(--primary);
}

/* Layout the CF7 form in two columns with a 5% gap */
.wpcf7-form {
	display: flex;
	flex-wrap: wrap;
	gap: 5%;
	box-sizing: border-box;
}

.wpcf7-form fieldset.hidden-fields-container {
	display: none;
}

/* Each label is a column item */
.wpcf7-form > label {
	display: flex;
	flex-direction: column;
	flex: 0 1 47.5%;
	margin: var(--space) 0 0;
	box-sizing: border-box;
}

.wpcf7-form .wpcf7-form-control {
	width: 100%;
	box-sizing: border-box;
}

.wpcf7-form label:has(.wpcf7-textarea) {
	flex-basis: 100%;
}

.wpcf7-form input[type="submit"] {
	flex: 0 0 auto;
	width: auto;
	display: inline-block;
	margin-top: 1rem;
	align-self: flex-start;
    height: 50px;
}

.success{
    background: var(--success-light);
    color: var(--success-dark);
    border: 1px solid var(--success-border);
    width:90% !important;
}
.success span{
    background: var(--success);
}

.warning{
    background: var(--warning-light);
    color: var(--warning-dark);
    border: 1px solid var(--warning-border);
    width:90% !important;
}
.warning span{
    background: var(--warning);
}

.error{
    background: var(--error-light);
    color: var(--error-dark);
    border: 1px solid var(--error-border);
    width:90% !important;
}
.error span{
    background: var(--error);
}

/* radio buttons */
.radioBox {
    width:100%;
    padding-top: var(--space);
}
.radioBox .wpcf7-form-control-wrap {display: block;}
.radioBox .wpcf7-radio{
    text-align: left;
    display: block;
}
.radioBox .wpcf7-radio .wpcf7-list-item {
    display: inline-block;
    margin: 0 var(--space) 0 0;
}
.radioBox .wpcf7-radio .wpcf7-list-item label,
.radioBox .wpcf7-radio .wpcf7-list-item label input[type="radio"] {
    cursor: pointer;
}

.radioBox .wpcf7-radio .wpcf7-list-item label {min-width:54px;}

.radioBox .wpcf7-radio .wpcf7-list-item label input[type="radio"],
.radioBox .wpcf7-radio .wpcf7-list-item label span.wpcf7-list-item-label {
    display: inline-block !important;
}

.file-upload small {margin-bottom: 8px;}
.file-upload .wpcf7-form-control-wrap input {
    padding: 0;
    margin-bottom: 0;
}

.file-upload .codedropz-upload-handler {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bcg);
	padding: 0.7em 1em;
}

.file-upload .codedropz-upload-container {
    padding: 0;
    margin: 0;
}

.file-upload .codedropz-upload-inner {
    text-align: left;
    font-size: var(--font-small);
}

.file-upload .dnd-upload-counter {
    right: 1em;
    bottom: 0.7em;
}

/* acceptance */
.acceptanceBox {
    width:100%;
    margin-bottom: var(--space-s);
    padding-top: var(--space);
}
.acceptanceBox .wpcf7-form-control-wrap {display: block;}
.acceptanceBox .wpcf7-form-control-wrap .wpcf7-acceptance{
    text-align: left;
    display: block;
}
.acceptanceBox .wpcf7-form-control-wrap .wpcf7-acceptance .wpcf7-list-item {
    display: inline-block;
    margin: 0 var(--space) 0 0;
}
.acceptanceBox .wpcf7-form-control-wrap .wpcf7-acceptance .wpcf7-list-item label {
    font-size: var(--font-small);
    cursor: pointer;
}

.acceptanceBox .wpcf7-form-control-wrap .wpcf7-acceptance .wpcf7-list-item label a{text-decoration: underline;}
.acceptanceBox .wpcf7-form-control-wrap .wpcf7-acceptance .wpcf7-list-item label a:hover{text-decoration: none;}

.group-hidden > label,
.group-hidden > div.group-cigarete,
.group-diabtes > label{
    float: left;
    width: 47.5%;
    margin-left:5%;
    margin-top: var(--space);
}
.group-hidden label.clear{margin-left:0;}
.group-hidden label.block,
.group-diabtes label.block {
    width: 100%;
    margin-left:0;
}

/* Hide only CF7 validation tips until user attempts submit
.wpcf7 form:not([data-tried-submit="1"]) .wpcf7-not-valid-tip {
	display: none;
}

.wpcf7 .wpcf7-response-output {
	display: none;
}
.wpcf7 .wpcf7-response-output:not(:empty) {
	display: block;
} */

.wpcf7 form:not([data-tried-submit="1"]) .wpcf7-not-valid-tip {
	font-size: var(--font-small);
}

/* Making CF7 response message occupy full width under the button */
.wpcf7-form .wpcf7-response-output {
	flex-basis: 100%;
}

@media (max-width: 600px) {
	.wpcf7-form label {flex-basis: 100%;}
    .group-hidden > label,
    .group-hidden > div.group-cigarete,
    .group-diabtes > label{
        display: block;
        float: none;
        width: 100%;
        margin-left:0;
    }
}

/* ===================================================================================================
   Number display
   =================================================================================================== */

.number_display{font-variant-numeric: tabular-nums;}

/* ===================================================================================================
   Links
   =================================================================================================== */
a {
	color: var(--btn);
    text-decoration: none;
}
a:hover, a:focus {
	color: var(--btn-hover);
}
a:focus {
    outline: none;
}

a:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px;
}

p a{text-decoration: underline;}
p a:hover{text-decoration: none;}

.footer p a{text-decoration: none;}

/* ===================================================================================================
   Helpers & Utilities
   =================================================================================================== */
.hidden {display: none !important;}
.clear {clear: both;}
.block {display: block; clear: both;}
.no_link > a,
a.no_link {
    pointer-events: none;
    cursor: pointer;
}

/* ===================================================================================================
   Container (basic)
   =================================================================================================== */
.site-container{}
.site-main {
    overflow: hidden;
    padding-top:90px; /* header height */
}

.container {
	position: relative;
	width: 90%;
	max-width: var(--container-max);
	margin: 0 auto;
    padding: var(--space-3xl) 0;
    text-align: center;
}

.inner{
	width: 90%;
	max-width: var(--container-max);
	margin: 0 auto;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	box-sizing: border-box;
}

/* ===================================================================================================
   Flex section (img + content)
   =================================================================================================== */
.flex-container {
	display: flex;
	align-items: stretch;
	gap: var(--space-3xl);
	margin: 0 auto;
}

.flex-container .flex-media,
.flex-container .flex-content {
	flex: 0 0 calc(50% - var(--space-3xl) / 2);
	min-width: 0;
    animation: fadeInUp;
    opacity: 0;
    transform: translateY(18px);
    animation: fadeInUp 0.9s ease-in-out forwards;
}
.flex-container .flex-media {
	position: relative;
	align-self: stretch;
	box-sizing: content-box;
	padding-block: 20px;
    aspect-ratio: 1 / 1;
    min-height: 0;
    border-radius: var(--radius);
    overflow: hidden;
}
.flex-container .flex-media img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.flex-container .flex-content {
    align-self: center;
    text-align: left;
}

@media (max-width: 1200px){
	.flex-container{
		flex-direction: column;
	}

	.flex-container .flex-media,
	.flex-container .flex-content{
		flex: 0 0 100%;
		width: 100%;
        text-align: center;
	}
    .flex-container .flex-media {
        padding-block: 0;
        aspect-ratio: 3 / 4;
        max-width: 540px;
        margin: 0 auto;
    }
    .flex-container .flex-content ul li {list-style-position: inside;}
    .flex-container .flex-content h3 {margin-top: var(--space-2xl);}
}


/* ===================================================================================================
   HR
   =================================================================================================== */
hr {
	border: none;
	border-bottom: 1px solid var(--border-dark);
	margin: var(--space) 0;
	clear: both;
	height: 1px;
}

/* ===================================================================================================
   Selection
   =================================================================================================== */
::selection {
	background: var(--primary-dark);
	color: var(--text-on-dark);
}
::-moz-selection {
	background: var(--primary-dark);
	color: var(--text-on-dark);
}

/* ===================================================================================================
   Skip Link
   =================================================================================================== */
  .skip-link{
    position:absolute;
    left:-9999px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden
}
.skip-link:focus{
    left:1rem;
    top:1rem;
    width:auto;
    height:auto;
    padding:.5rem .75rem;
    background: var(--bcg-dark);
    color: var(--text-on-dark);
    z-index:999999999
}

/* ===================================================================================================
   Header
   =================================================================================================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: auto;
    background: var(--bcg);
    box-shadow: 0 2px 7px color-mix(in srgb, var(--primary-dark) 9%, transparent);
    transition: background-color var(--transition);
    z-index: 100;
}
.page-template-homepage .header {
    background: #000000;
    background: linear-gradient(90deg,rgba(0, 0, 0, 0) 36%, rgba(0, 0, 0, 0.54) 100%);
    box-shadow: none;
}

.header > .inner {
    height: var(--header-height);
    transition: all var(--transition);
}

.header .site-branding {
    position: absolute;
    top:50%;
    left:0;
    transform: translateY(-50%);
    width: auto;
    height: auto;
}
.header .site-branding a {
    display: block;
    width: auto;
    height: auto;
}
.header .site-branding a img {
    display: block;
    width: auto;
    height: 72px;
    opacity: 1;
}
.header .site-branding a:hover img {
    opacity: .63;
}

body.active .header,
body.active .page-template-homepage .header{
    background: var(--bcg);
    box-shadow: 0 2px 7px color-mix(in srgb, var(--primary-dark) 9%, transparent);
}
body.active .header .site-branding a img {
    height: 40px;
}
body.active .header .inner{
    height: 54px;
}

/* ===================================================================================================
   Main Navigation
   =================================================================================================== */
.main-navigation {
    margin: 0 0 0 auto;
    display: flex;
    align-items: center;
    transition: none;
}

.main-navigation .nav {
    display: flex;
    align-items: center;
}

nav ul, nav li {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-small);
}

/* Main Navigation Items */
.main-navigation .nav > li {
    position: relative;
    display: flex;
    align-items: center;
}

.main-navigation .nav > li:not(:first-child) {
    margin-left: var(--nav-link-margin);
}

.main-navigation .nav > li:first-child {
    margin-left: 0;
}

.main-navigation #menu-menu > li:first-child {
    display: none;
}

.main-navigation .nav > li > a {
    display: flex;
    align-items: center;
    height: var(--nav-link-height);
    line-height: var(--nav-link-lh);
    color: var(--text);
    font-weight: 500;
    padding: 0;
    position: relative;
}
.main-navigation .nav > li > a:hover {color: var(--primary);}

.main-navigation .nav > li.nav-button > a {
    padding: 0 1.5rem;
    height: 44px;
    line-height: 44px;
    font-weight: var(--bold);
    letter-spacing: -0.5px;
    color: var(--cta-text) !important;
    background: var(--cta);
    border: none;
    border-radius: 5px;
    transition: all var(--transition);
    cursor: pointer;
}

body.active .main-navigation .nav > li > a{
    height: 54px;
}
body.active .main-navigation .nav > li > a{
    line-height: 54px;
}
body.active .main-navigation .nav > li.menu-item-has-children > .submenu-trigger {
    top: 17px;
}
body.active .main-navigation .nav > li.nav-button > a {
    height: 36px;
    line-height: 36px;
    color: var(--cta-text);
}

/* Submenu trigger */
.main-navigation .nav > li.menu-item-has-children > a{padding-right: 22px;}
.main-navigation .nav > li.menu-item-has-children > .submenu-trigger {
    display: block;
    position: absolute;
    right: -4px;
    top: 35px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    border: none;
    color: var(--text);
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    line-height: 1;
    appearance: none;
    z-index: 10;
}
.main-navigation .nav > li.menu-item-has-children > .submenu-trigger svg {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(90deg);
    display: block;
    width: 100%;
    height: 100%;
}
.main-navigation .nav > li.menu-item-has-children.active > .submenu-trigger svg {
    transform: rotate(-90deg);
}

body.active .main-navigation .nav > li > a,
body.active .main-navigation .nav > li.menu-item-has-children > .submenu-trigger {
    color: var(--text);
}
body.active .main-navigation .nav > li > a:hover {color: var(--primary);}

.page-template-homepage .main-navigation .nav > li > a,
.page-template-homepage .main-navigation .nav > li.menu-item-has-children > .submenu-trigger {
    color: var(--text-on-dark);
}

/* ===================================================================================================
   Submenu (Desktop)
   =================================================================================================== */
.main-navigation .sub-menu{
	position: absolute;
	left: -18px;
	top: 100%;
	min-width: 220px;
	background: var(--bcg);
	box-shadow: 0 4px 16px color-mix(in srgb, var(--primary-dark) 8%, transparent);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity var(--transition), transform var(--transition);
	z-index: 10;
	pointer-events: none;
    border-radius: 0 0 var(--radius) var(--radius);
    overflow: hidden;
}

/* Show submenu on hover/focus */
.main-navigation .nav > li:hover > .sub-menu,
.main-navigation .nav > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.main-navigation .sub-menu > li {
	position: relative;
}

.main-navigation .sub-menu > li > a {
	display: flex;
	align-items: center;
	height: var(--nav-sub-link-height);
	line-height: var(--nav-sub-link-lh);
	padding: var(--nav-sub-link-padding);
	color: var(--text);
	white-space: nowrap;
}
.main-navigation .sub-menu > li.menu-item-has-children > a{padding-right: 45px;}

.main-navigation .sub-menu > li > a:hover {
	background: var(--bcg-alt);
}

/* Submenu trigger for nested submenus */
.main-navigation .sub-menu .submenu-trigger {
    position: absolute;
    right: 18px;
    top: 36%;
    width: 20px;
    height: 20px;
    border: none;
    color: var(--text);
    z-index: 10;
    display: block;
    cursor: pointer;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    line-height: 1;
    appearance: none;
}
.main-navigation .sub-menu .submenu-trigger svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ===================================================================================================
   NAV-END: Align sub-menu right under parent, third level to the left
   =================================================================================================== */
.main-navigation .nav > li.nav-end > .sub-menu {
    left: auto;
    right: -9px;
}
.main-navigation .nav > li.nav-end > .sub-menu > li > a{
    padding-right: 36px;
}

.main-navigation .nav > li.nav-end > .sub-menu .sub-menu {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 0;
    /* Show third level from the left side */
    transform: translateX(-20px);
    /* Transitions same as other menus */
    transition: opacity var(--transition), transform var(--transition);
}

.main-navigation .nav > li.nav-end > .sub-menu > li:hover > .sub-menu,
.main-navigation .nav > li.nav-end > .sub-menu > li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

/* Right-align text in all sub-menus under nav-end */
.main-navigation .nav > li.nav-end > .sub-menu,
.main-navigation .nav > li.nav-end > .sub-menu .sub-menu {
    text-align: right;
}

.main-navigation .nav > li.nav-end > .sub-menu a,
.main-navigation .nav > li.nav-end > .sub-menu .sub-menu a {
    justify-content: flex-end;
}

/* Submenu trigger for nested submenus under nav-end */
.main-navigation .nav li.nav-end .sub-menu .submenu-trigger {
    right: auto;
    left: 18px;
}
.main-navigation .nav li.nav-end .sub-menu .submenu-trigger svg {transform: rotate(180deg);}

/* ===================================================================================================
   Hamburger
   =================================================================================================== */
.menu-toggle {
	display: none;
	cursor: pointer;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin-left: auto;
	z-index: 9999;
}

.menu-toggle .bar {
	width: 36px;
	height: 3px;
	background: var(--primary);
	margin: 3px 0;
	border-radius: 2px;
	transition: all var(--transition);
}

.menu-toggle.open .bar:nth-child(1) {
	transform: translateY(9px) rotate(45deg);
}
.menu-toggle.open .bar:nth-child(2) {
	opacity: 0;
}
.menu-toggle.open .bar:nth-child(3) {
	transform: translateY(-9px) rotate(-45deg);
}

.home .menu-toggle .bar {background: #fff;}
.home.active .menu-toggle .bar {background: var(--primary);}

/* ===================================================================================================
   Language Navigation
   =================================================================================================== */
.main-navigation .navLang{margin-left: 30px;}
.main-navigation .navLang > li{}
.main-navigation .navLang > li.no_link{
    cursor: pointer;
}
.main-navigation .navLang > li > a{
    display: block;
    text-indent: -999999999px;
    width: 40px;
    height: 100%;
    padding-right: 18px;
    mask-size: 26px;
    mask-repeat: no-repeat;
    mask-position: left center;
    mask-image: url("svg/globe.svg");
    background-color: var(--text);
    }
.main-navigation .navLang > li:hover > a {background-color: var(--primary);}


.home .main-navigation .navLang > li > a{background-color: #fff;}
.home .main-navigation .navLang > li:hover > a{background-color: #fff;}
body.home.active .main-navigation .navLang > li > a{background-color: var(--text);}
body.home.active .main-navigation .navLang > li:hover > a{background-color: var(--primary);}

.main-navigation .navLang .sub-menu{
    min-width: 72px;
}
.main-navigation .navLang .sub-menu > li {
    padding: 0;
    margin: 16px;
}
.main-navigation .navLang .sub-menu > li > a {
	display: block;
	align-items: center;
    width: 36px;
	height: auto;
	line-height: normal;
	padding: 0;
	color: var(--text);
    border-radius: 5px;
    aspect-ratio: 4/3;
    text-indent: -999999999px;
    opacity: 1;
    transition: opacity var(--transition);
}
.main-navigation .navLang .sub-menu > li > a:hover {opacity: .54;}
.main-navigation .navLang .sub-menu > li.is-active a {
	pointer-events: none;
    opacity: .54;
}

.main-navigation .navLang .sub-menu > li.lang-hr > a {
    background: url("svg/flag-hr.svg") no-repeat center;
    background-size: contain;
}
.main-navigation .navLang .sub-menu > li.lang-en > a {
    background: url("svg/flag-en.svg") no-repeat center;
    background-size: contain;
}

@media (max-width: 1170px) {
    .main-navigation .nav > li:not(:first-child) {margin-left: 24px;}
    .main-navigation .navLang{margin-left: 20px;}
}

/* ===================================================================================================
   Social Icons
   =================================================================================================== */
.navSocial {
    display: flex;
    flex-direction: row;
    gap: .25rem;
    margin: 0;
}
.navSocial li {
    margin-bottom: 0;
    border-radius: 100%;
    overflow: hidden;
}
.navSocial a {
    display: block;
    width: 30px;
    height: 30px;
    text-indent: -999999999px;
    overflow: hidden;
    position: relative;
    background: var(--primary-dark);
}
.navSocial a:focus-visible {
    outline-offset: -4px;
}

.navSocial .youtube a:hover{
    background: #ff0000;
}
.navSocial .linkedin a:hover{
    background: #0a66c2;
}
.navSocial .facebook a:hover{
    background: #0862f7;
}

.navSocial li.instagram {
    background: url("svg/bg-instagram.svg") no-repeat center;
    background-size: contain;
}

.navSocial a::after {/* social media icons - size and color */
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: var(--bcg);
    mask-size: contain;
    mask-repeat: no-repeat;
}

.navSocial .youtube a::after {
    mask-image: url("svg/social-youtube.svg");
}

.navSocial .linkedin a::after {
    mask-image: url("svg/social-linkedin.svg");
}
.navSocial .facebook a::after {
    mask-image: url("svg/social-facebook.svg");
}

.navSocial a:hover::after {
    background-color: var(--bcg);
}

/* Main navigation Social Icons */
.main-navigation .navSocial{
    display: none;
}

/* Top bar Social Icons */
.top-bar .navSocial {
    gap: 0;
}
.top-bar .navSocial li{
    margin-left:9px;
}
/* ===================================================================================================
   Breadcrumbs
   =================================================================================================== */
.breadcrumbs {
  font-size: 0.9rem;
  margin: 1rem 0;
  color: var(--text-muted);
}

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-1, 0.35rem) 0;
	list-style: none;
	padding: 0;
	margin: 0;
}

.breadcrumbs li {
	display: inline-flex;
	align-items: baseline;
	min-width: 0;
	white-space: nowrap;
}
.breadcrumbs li:last-child {
	white-space: normal;
	overflow-wrap: anywhere;
}

.breadcrumbs li:not(:last-child)::after {
  content: ">";
  margin: 0 0.5rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.breadcrumbs a {
  color: var(--btn);
  transition: color 0.27s;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus {
  color: var(--btn-hover);
}

.breadcrumbs [aria-current="page"] {
  color: var(--text);
  pointer-events: none;
  cursor: default;
}

/* ===================================================================================================
   Home Page
   =================================================================================================== */
.page-template-homepage .site-main > section:nth-of-type(even) {
	background: var(--bcg-alt);
}

/* ===================================================================================================
   Hero Section
   =================================================================================================== */
.hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 100%;
	height: 50vh;
	min-height: 486px;
	overflow: hidden;
	color: var(--text-on-dark);
    margin-top: -90px; /* header height */
}

.hero--image {
	background-size: cover !important;
	background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Content centering and overlay */
.hero__content {
	position: relative;
	z-index: 2;
	display: inline-block;
    width: 100%;
}
.hero__content .box {
	position: relative;
	border-radius: 9px;
	display: block;
	text-align: left;
	color: var(--text-on-dark);
    width: 54%;
}
.hero__content .box.no_bcg h1{
	font-size: clamp(1.9074rem, 0.571rem + 6.68vw, 3.8147rem);
	line-height: 1.1;
	margin-bottom: var(--space);
    color: var(--text-on-dark);
}

.hero__content .box.dark_bcg{
	padding: 2rem 2rem;
    color: var(--text-on-dark);
	background: rgba(0,0,0,.54);
}
.hero__content .box.dark_bcg h1{
	font-size: clamp(1.9074rem, 0.571rem + 6.68vw, 3.8147rem);
	line-height: 1.1;
	margin-bottom: var(--space-l);
    color: var(--text-on-dark);
}

.hero__content .box.light_bcg{
	padding: 2rem 2rem;
    color: var(--text);
	background: rgba(255,255,255,.54);
}
.hero__content .box.light_bcg h1{
	font-size: clamp(1.9074rem, 0.571rem + 6.68vw, 3.8147rem);
	line-height: 1.1;
	margin-bottom: var(--space-l);
    color: var(--text);
}

.hero__slogan {
	margin-bottom: 1rem;
}
.hero__desc {
	font-size: 1rem;
	margin-bottom: 2rem;
}
.hero__cta.button {
    color: var(--btn-text);
    background: var(--cta);
}
.hero__cta.button:hover {
    background: var(--cta-hover);}

.hero .inner.box_center{
	justify-content: center;
}
.hero .inner.box_left{
	justify-content: flex-start;
}
.hero .inner.box_right{
	justify-content: flex-end;
}

.hero_video {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 21.33%;
    min-width: 225px;
    height: auto;
	aspect-ratio: 1 / 1;
}
.hero_video .videoBox{
	border-radius: 50%;
	overflow: hidden;
}
.hero_video::after{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,120%) scale(.27);
    content: '';
    width: 100%;
    aspect-ratio: 8/3;
    background: url("images/sphere-shadow.png") no-repeat center;
    background-size: contain;
    opacity: 0;
    animation: fadeInScale 0.9s ease-in-out forwards;
    animation-delay: .5s;
}

.hero_video__media {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hero__content .box,
.hero__content .hero_video .hero_video__media{
    opacity: 0;
    transform: translateY(18px);
    animation: fadeInUp 0.9s ease-in-out forwards;
}

.hero__content .box {animation-delay: .25s;}
.hero__content .hero_video .hero_video__media {animation-delay: .5s;}

/* Responsive */
@media (max-width: 900px) {
	.hero__desc {font-size: 1rem;}
	.hero__content {padding: 1rem;}
    .hero_video {transform: translate(0,-50%);}
}

@media (max-width: 768px){
    .hero {        
        height: auto;
        min-height: auto;
        padding: 6rem 0;
    }
    .hero::after{
        position: absolute;
        bottom:0;
        left:0;
        right:0;
        height: 63%;
        content: '';
        background: #261D12;
        background: linear-gradient(0deg, rgba(38, 29, 18, 1) 0%, rgba(38, 29, 18, 0) 90%);
    }
    
	.hero__content{
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var(--space-m);
	}
	.hero__content .box{
        order: 2;
		width: 100%;
		max-width: 42rem;
		text-align: center;
	}
	.hero_video{
        order: 1;
		position: relative;
		top: auto;
		right: auto;
		transform: none;
		width: 100%;
		max-width: 225px;
		min-width: 0;
		margin: 0 auto 3rem;
	}
}

/* ===================================================================================================
   Cards w/ icons
   =================================================================================================== */
.cards-icons-container{}
.cards-icons {
    display: flex;
    width: 100%;
    gap: var(--space-xl);
    justify-content: stretch; /* ensures cards stretch to fill space */
    align-items: stretch;
    padding: var(--space-xl) 0 0;
    margin-bottom: var(--space-xl);
}
.cards-icons-description{
    width: 100%;
    max-width: var(--container-med);
    margin: 0 auto;
}

.cards-icons .card {
    position: relative;
    flex: 1 1 0;
    background: var(--bcg);
    border-radius: var(--radius);
    overflow: visible;
    display: flex;
    flex-direction: column;
    min-width: 0; /* for overflow content */
}

.cards-icons .card .txtHolder {
    position: relative;
    padding: 3rem;
    text-align: left;
}

.cards-icons .card .txtHolder h3 {
    position: relative;
    padding-left: 63px;
}
.cards-icons .card .txtHolder h3 span{
    display: block;
    position: absolute;
    top:-17px;
    left:-17px;
    width: 72px;
    height: 72px;
    color: var(--primary);
}
.cards-icons .card .txtHolder h3 span svg{
    display: block;
    width: 100%;
    height: auto;
    
}

.cards-icons .card .txtHolder .card-text {
    font-size: 1rem;
    color: var(--text);
}
.cards-icons .card .txtHolder .card-text p {
    font-weight: var(--bold);
    letter-spacing: -1px;
}
.cards-icons .card .txtHolder .card-text ul{
    margin-bottom: 0;
    text-wrap: pretty;
}

@media (max-width: 1920px) {
    .cards-icons .card .txtHolder h3 {padding-left: 54px;}
    .cards-icons .card .txtHolder h3 span{
    top:-15px;
    left:-15px;
    width: 63px;
    height: 63px;
    }
    
}
@media (max-width: 768px) {
    .cards-icons {
        flex-direction: column;
        gap: var(--space-xl);
    }
    .cards-icons .card {
        flex: 1 1 100%;
        max-width: 100%;
    }
}
@media (max-width: 540px) {
    .cards-icons .card .txtHolder {
        padding: 3rem 1.5rem;
    }
}

/* ===================================================================================================
   Cards w/ images
   =================================================================================================== */
.cards-container{}

.cards-description{
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}
.cards-description p{
    font-size: 1.08rem;
}

.cards {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	gap: 1.5rem;
	align-items: stretch;
	padding-top: var(--space);
	margin-bottom: var(--space-xl);
}

.cards .card {
    position: relative;
    flex: 0 0 calc((100% - 3rem) / 3);
    background: var(--bcg);
    border-radius: 14px;
    padding-top: 36px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.cards .card-double {
	flex: 0 0 calc(2 * ((100% - 3rem) / 3) + 1.5rem); /* 2 cards + 1 gap */
    background: #5c7480;
}

.cards .card ul{
    list-style: none;
    margin-top:-.1rem;
}

.cards .card .imgHolder {
    position: relative;
    width: 72px;
    height: 72px;
    margin: 0 auto;
    color: var(--primary);
    z-index: 2;
}
@media (max-width: 1920px) {
    .cards .card .imgHolder {
        width: 63px;
        height: 63px;
    }
}

.cards .card .imgHolder svg {
    display: block;
    width: 100%;
    height: auto;
}

.cards .card .txtHolder {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 3rem;
    flex: 1 1 auto;
    text-align: center;
}

.cards .card .txtHolder h3 {
    margin-top: -.5rem;
    line-height: 1;
}

.cards .card .txtHolder .card-text {
    color: var(--text);
}
.cards .card.card-double .imgHolder,
.cards .card.card-double .txtHolder .card-title,
.cards .card.card-double .txtHolder .card-text{    
    color: #fff;
}
.cards .card.card-double .txtHolder .card-text a {
    color: #fff;
    text-decoration: underline;
}
.cards .card.card-double .txtHolder .card-text a:hover {
    color: #fff;
    text-decoration: none;
}

@media (max-width: 1024px) {
    .cards {
        flex-direction: column;
        gap: 2rem;
    }
    .cards .card {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* ===================================================================================================
   Cards Child List
   =================================================================================================== */
.cards-child-list-section{}
.cards-child-list-container{}
.cards-child-list {
    display: flex;
    width: 100%;
    gap: 1rem;
    justify-content: stretch; /* ensures cards stretch to fill space */
    align-items: stretch;
    margin-bottom: 0;
}
.cards-child-list-description{
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}
.cards-child-list-description p{
    font-size: 1.08rem;
}

.cards-child-list .card {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-width: 0; /* for overflow content */
    overflow: hidden;
    margin-bottom: var(--space-xl);
    border-radius: 14px;
}

.cards-child-list .card .imgHolder {
    position: relative;
    width: 100%;
    height: auto;
    background: var(--bcg-alt);
    z-index: 2;
}

.cards-child-list .card .imgHolder img {
    display: block;
    width: 100%;
    height: auto;
}

.cards-child-list .card .txtHolder {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px 20px 16px;
    flex: 1 1 auto;
    text-align: center;
}

.cards-child-list .card .txtHolder .card-title {
    font-size: 1.14rem;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: var(--text);
}

.cards-child-list .card .txtHolder .card-text {
    font-size: 1rem;
    color: var(--text);
}

@media (max-width: 768px) {
    .cards-child-list {
        flex-direction: column;
        gap: var(--space-xl);
    }
    .cards-child-list .card {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* ===================================================================================================
   Home About Section
   =================================================================================================== */
.home-about-section {}
.about-container .top-box {
	display: flex;
	align-items: center;
	gap: var(--space-3xl);
	margin: 0 auto;
}

.about-image,
.about-content {
	flex: 0 0 calc(50% - var(--space-3xl) / 2);
	min-width: 0;
    animation: fadeInUp;
    opacity: 0;
    transform: translateY(18px);
    animation: fadeInUp 0.9s ease-in-out forwards;
}
.about-image {animation-delay: .75s;}
.about-content {animation-delay: 1s;}

.about-content {text-align: left;}

.about-image-link{
    display: block;
	width: 100%;
	max-width: 360px;
    aspect-ratio: 1/1;
    margin: 0 auto;
    overflow: hidden;
	border-radius: var(--radius-full);
}
.about-image-link img {
	display: block;
	width: 100%;
	height: auto;
    transition: transform var(--transition-slow);
}
.about-image-link:hover img,
.about-image-link:focus-visible img {
	transform: scale(1.044); /* Image zoom on hover */
}

.about-text {}

.bottom-box{padding-top: var(--space-2xl);}
.bottom-box .about-partners {
	display: flex;
	gap: 13.5%;
    margin-bottom: 0;
}

.bottom-box .about-partners li{
    list-style: none;
    margin-left: 0;
}
.bottom-box .about-partners li a {
    position: relative;
	display: block;
}

.bottom-box .about-partners li a img {
	display: block;
	width: 100%;
	height: auto;
}
.bottom-box .about-partners li a img.logo-mono {
    position: absolute;
    top:0;
    left:0;
    opacity: 1;
}
.bottom-box .about-partners li a:hover img.logo-mono {opacity: 0;}

@media (max-width: 1024px) {
    .bottom-box .about-partners {gap: 8%;}
}

@media (max-width: 900px) {
	.about-container .top-box {
		flex-direction: column;
		gap: var(--space);
	}
	.about-container .about-image img {
		width: 100%;
		max-width: 25rem;
	}
    
    .about-container .about-content {text-align: center;}
}

@media (max-width: 720px){
	.bottom-box .about-partners{
		display: flex;
		flex-wrap: wrap;
		gap: 16px 18%;
		justify-content: center;
		align-items: center;
	}

	.bottom-box .about-partners li{
		flex: 0 1 calc((100% - 2 * 18%) / 3);
		display: flex;
		justify-content: center;
		align-items: center;
	}
    .bottom-box .about-partners li:nth-child(2) {order: 4;}
    .bottom-box .about-partners li:nth-child(3) {order: 5;}
    .bottom-box .about-partners li:nth-child(4) {order: 2;}
    .bottom-box .about-partners li:last-child {order: 3;}
    
	.bottom-box .about-partners li:nth-child(2),
	.bottom-box .about-partners li:nth-child(3){
		flex: 0 1 calc((100% - 18%) / 2);
	}
}

@media (max-width: 400px){
	.bottom-box .about-partners{gap: 16px 9%;align-items: center;}
	.bottom-box .about-partners li{flex: 0 1 calc((100% - 2 * 9%) / 3);}
}

/* ===================================================================================================
   Home Help section
   =================================================================================================== */
.home-help-text {
    max-width: var(--container-med);
    margin: 0 auto;
}

.home-help-items{
	margin: 0 auto var(--space);
	padding-top: var(--space);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 3rem;
	row-gap: 1rem;
	width: fit-content;
	max-width: 100%;
	text-align: left;
}

.home-help-item{
    list-style: none;
	margin: 0;
    padding: 8px 16px;
	text-align: left;
    align-content: center;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: normal;
    color: #000;
    background: var(--bcg-alt);
    border-radius: var(--radius);
}

@media (max-width: 720px){
	.home-help-items{
		grid-template-columns: 1fr;
		width: fit-content;
	}
}

/* ===================================================================================================
   Home Services section
   =================================================================================================== */
.home-services-img-section {}
.home-services-img-container {
	display: flex;
	align-items: center;
	gap: var(--space-3xl);
	margin: 0 auto;
    padding: var(--space-l) 0;
}

.home-services-img-image,
.home-services-img-content {
	flex: 0 0 calc(50% - var(--space-3xl) / 2);
	min-width: 0;
}

.home-services-img-content {text-align: left;}

.home-services-img-image-link{
    display: block;
    aspect-ratio: 1/1;
    overflow: hidden;
	border-radius: var(--radius);
}
.home-services-img-image-link img {
	display: block;
	width: 100%;
	height: auto;
    transition: transform var(--transition-slow);
}
.home-services-img-image-link:hover img,
.home-services-img-image-link:focus-visible img {
	transform: scale(1.044); /* Image zoom on hover */
}

@media (max-width: 1024px){
    .home-services-img-container {padding: var(--space-2xl) 0;}
}

@media (max-width: 768px){
	.home-services-img-container{
		flex-direction: column;
		align-items: stretch;
        gap: var(--space-s);v
        padding: var(--space-2xl) 0 0;
	}

	.home-services-img-image,
	.home-services-img-content{
		flex: 0 0 100%;
		width: 100%;
        text-align: center;
	}
}

/* ===================================================================================================
   Page Intro
   =================================================================================================== */
.page-intro{
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 1;
}
.page-intro::after{
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom: 0;
    width: 100%;
    height: 100%;
    content: '';
    background: rgba(0,0,0,.36);
    z-index: 2;
}

.page-intro .container{
    max-width: var(--container-med);
    padding: var(--space-4xl) 0;
    color:#fff;
    z-index: 3;
}
.page-intro .container h1{color:#fff;}

/* ===================================================================================================
   About Page
   =================================================================================================== */
/* main section */
.page-template-page-about .site-main > section:nth-of-type(odd) {
	background: var(--bcg-alt);
}
.page-template-page-about .site-main > section:nth-of-type(even) {
    direction: rtl;
}

/* secondary sections */
.about-section{}
.page-template-page-about .site-main > section:nth-of-type(even) .flex-container .flex-content{direction: ltr;}

/* ===================================================================================================
   Archive Services
   =================================================================================================== */
.post-type-archive-services .content-area {background: var(--bcg-alt);}

.post-type-archive-services .archive-main{
    max-width: var(--container-med);
    margin-left: auto;
    margin-right: auto;
}

/* ===================================================================================================
   Single Service
   =================================================================================================== */
.single-services .content-area{
    position: relative;
    background: var(--bcg-alt) url("images/service-intro-bcg.webp") no-repeat center;
    background-size: cover;
    z-index: 0;
}
.single-services .content-area::after{
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom: 0;
    width: 100%;
    height: 100%;
    content: '';
    background: rgba(0,0,0,.36);
    z-index: 1;
}

.services-intro {
    position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-3xl);
	margin: 0 auto;
    text-align: left;
    z-index: 2;
}

.services-intro *{direction: ltr;}

.services-intro .flex-content {
    width:100%;
    max-width: 540px;
    animation: fadeInUp;
    opacity: 0;
    transform: translateY(18px);
    animation: fadeInUp 0.9s ease-in-out forwards;
}

.services-intro h1,
.services-intro .entry-intro p {
    color: #fff;
}

.services-intro .entry-intro ul li{
    color: #fff;
    list-style: none;
    margin-left: 0;
}

.single-services .more-info .entry-content ul{margin-top: -1.5rem;}
.single-services .more-info .entry-content > *:last-child {margin-bottom: 0;}

.more-info-container{
	display:flex;
	align-items:flex-start;
	justify-content:center;
	gap:var(--space-xl);
}

.more-info-content{
	flex:1 1 0;
	min-width:0;
    text-align: left;
}

.more-info-media{
	flex:1 1 0;
	min-width:0;
	margin:0;
	line-height:0;
    color: var(--primary);
}

.more-info-media svg{
	display:block;
    width: 100%;
    max-width: 270px;
    height: auto;
    margin: 0;
}

/* ===================================================================================================
   Integrative Medicine Page
   =================================================================================================== */
.page-template-page-integrative-medicine .page-intro {background-position: 18% center;}

.page-template-page-integrative-medicine:lang(en) .page-intro .container {max-width: 954px;}

@media (max-width:1920px){
    .page-template-page-integrative-medicine:lang(en) .page-intro .container {max-width: 918px;}
}

.page-template-page-integrative-medicine .site-main{overflow:visible;}

.section-principles .container{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	gap: var(--space-xl);
	align-items:start;
    text-align: left;
}

.section-principles .main_content_left{
	position:sticky;
	top:90px;
	align-self:start;
	height:fit-content;
}

.section-principles .main_content_right ul li{
    position: relative;
    list-style: none;
    margin-left: 0;
    margin-bottom: 3rem;
    padding-left: 80px;
}
.section-principles .main_content_right ul li:last-of-type{
    margin-bottom: 0;
}

.principles-list__item span.principles-list__icon{
    position: absolute;
    top: -2px;
    left: 0;
    width: 54px;
    height: 54px;
    padding: .5rem;
    color: #fff;
    background: var(--primary);
    border-radius: 100%;
}
.principles-list__item:nth-child(2) span.principles-list__icon {background: #84807d;}
.principles-list__item:nth-child(3) span.principles-list__icon {background: #a0785f;}
.principles-list__item:nth-child(4) span.principles-list__icon {background: #6f625c;}
.principles-list__item:nth-child(5) span.principles-list__icon {background: #413d3e;}
.principles-list__item:last-child span.principles-list__icon {background: #84807d;}

.principles-list__item span.principles-list__icon svg{
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width:900px){
	.section-principles .container{
		grid-template-columns:1fr;
		gap:2rem;
	}

	.section-principles .main_content_left{
		position:static;
		top:auto;
	}
}

.section-methods {background: var(--bcg-alt);}

.section-methods .top-box {
    width: 100%;
    max-width: var(--container-med);
    margin: 0 auto;
}
.section-methods .bottom-box {
    width: 100%;
    max-width: var(--container-med);
    margin: -3rem auto 0;
}

.section-methods .cards .card:last-of-type {
	flex: 0 0 calc(2 * ((100% - 3rem) / 3) + 1.5rem); /* 2 cards + 1 gap */
    background: #5c7480;
}
.section-methods .cards .card:last-of-type .imgHolder,
.section-methods .cards .card:last-of-type .card-title,
.section-methods .cards .card:last-of-type .card-text{    
    color: #fff;
}

.section-additional .page-content ul{margin-top: -1.5rem;}

/* ===================================================================================================
   How it works Page
   =================================================================================================== */
.page-template-page-how-work .content-area {
    background: var(--bcg-alt);
}

.page-template-page-how-work .content-area .container,
.page-template-page-how-work .content-phases .container {
    max-width: var(--container-med);
    text-align: left;
}

.page-template-page-how-work .content-phases .container {padding: var(--space-3xl) 0;}
.page-template-page-how-work .content-phases .container > ul {
    position: relative;
    z-index: 1;
}
.page-template-page-how-work .content-phases .container > ul::after {
    position: absolute;
    top: 0;
    left: 4px;
    bottom: 0;
    height: 100%;
    content: '';
    width: 2px;
    background: #5C7480;
    background: linear-gradient(0deg, rgba(92, 116, 128, 1) 0%, rgba(92, 116, 128, 0.36) 100%);
}

.page-template-page-how-work .content-phases .container > ul li {
    position: relative;
    list-style: none;
    margin-left: 64px;
    margin-bottom: 3rem;
    padding: 1.5rem;
    background: var(--bcg-alt);
    border: 1px solid #ebe4de;
    border-radius: var(--radius);
    z-index: 2;
}
.page-template-page-how-work .content-phases .container > ul li:nth-child(2) {
    background: #ede6df;
}
.page-template-page-how-work .content-phases .container > ul li:nth-child(3) {
    background: #e6dbd3;
}
.page-template-page-how-work .content-phases .container > ul li:last-child {
    background: #ded0c6;
}
.page-template-page-how-work .content-phases .container > ul li::before {
    position: absolute;
    top: 2.75rem;
    left: -60px;
    content: '';
    width: 32px;
    height: 32px;
    background: #fff;
    border-radius: 100%;
    transform: translate(-50%, -50%)
}
.page-template-page-how-work .content-phases .container > ul li:first-child::before {width: 24px; height: 24px;}
.page-template-page-how-work .content-phases .container > ul li:nth-child(2)::before {width: 28px; height: 28px;}
.page-template-page-how-work .content-phases .container > ul li:nth-child(3)::before {width: 32px; height: 32px;}
.page-template-page-how-work .content-phases .container > ul li:last-child::before {width: 36px; height: 36px;}

.page-template-page-how-work .content-phases .container > ul li::after {
    position: absolute;
    top: 2.75rem;
    left: -60px;
    content: '';
    width: 16px;
    height: 16px;
    background: var(--primary);
    border-radius: 100%;
    transform: translate(-50%, -50%)
}
.page-template-page-how-work .content-phases .container > ul li:first-child::after {width: 12px; height: 12px;}
.page-template-page-how-work .content-phases .container > ul li:nth-child(2)::after {width: 14px; height: 14px; background: #4b5f69;}
.page-template-page-how-work .content-phases .container > ul li:nth-child(3)::after {width: 16px; height: 16px; background: #334046;}
.page-template-page-how-work .content-phases .container > ul li:last-child::after {width: 18px; height: 18px; background: #000;}

.page-template-page-how-work .content-phases .container > ul li:first-child h3 {color: var(--primary);}
.page-template-page-how-work .content-phases .container > ul li:nth-child(2) h3 {color: #4b5f69;}
.page-template-page-how-work .content-phases .container > ul li:nth-child(3) h3 {color: #334046;}
.page-template-page-how-work .content-phases .container > ul li:last-child h3 {color: #000;}

/* ===================================================================================================
   FAQ Page
   =================================================================================================== */
.page-template-page-faq .content-area .container {
    max-width: var(--container-med);
    text-align: left;
}

/* ===================================================================================================
   Contact Page
   =================================================================================================== */
.page-template-page-contact .content-area .container {text-align: left;}

.page-template-page-contact .page-content {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: var(--space-4xl);
}

.page-template-page-contact .content-area .info-box h2 {
	font-size: clamp(1rem, 0.234rem + 2.74vw, 1.5625rem);
	line-height: 1.3;
	margin-bottom: var(--space-5);
}

.page-template-page-contact .content-area .info-box ul li {
    list-style: none;
    margin-left: 0;
}
.page-template-page-contact .content-area .info-box ul li span {
    display: inline-block;
    vertical-align: middle;
    padding-top: 3px;
    margin-right: 5px;
    color: var(--primary);
}

@media (max-width: 1024px){
	.page-template-page-contact .page-content{
		grid-template-columns: 1fr;
		gap: var(--space-2xl);
	}
}

/* ===================================================================================================
   Blog
   =================================================================================================== */
.blog .content-area .container {
    padding-top: var(--space-l);
    text-align: left;
}
.blog .page-header p.subtitle {
    margin-bottom: 0;
    font-size: var(--font-big);
}

.posts {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-xl);
}

.posts li {
    list-style: none;
    margin-left: 0;
    margin-bottom: var(--space);
}

.posts li .post-thumbnail {
    display: block;
    aspect-ratio: 16/9;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: var(--space);
}
.posts li .post-thumbnail img {
	display: block;
	height: auto;
    transition: transform var(--transition-slow);
}
.posts li .post-thumbnail:hover img,
.posts li .post-thumbnail:focus-visible img {
	transform: scale(1.044); /* Image zoom on hover */
}

.posts li .post-content .info{
    font-size: var(--font-small);
    color: var(--primary);
    margin-bottom: var(--space-xs);
}

.posts li .post-content h2{
	font-size: clamp(1.125rem, 0.293rem + 3.42vw, 1.9531rem);
	line-height: 1.25;
    margin-bottom: var(--space-xs);
}
.posts li .post-content h2 a {color: var(--text);}
.posts li .post-content h2 a:hover {color: var(--primary);}

.posts li .post-content p{
    margin-bottom: var(--space-xs);
}

.posts li:first-child {
	grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: var(--space-l);
}
.posts li:first-child .post-thumbnail {margin-bottom: 0;}
.posts li:first-child .post-content {
    align-content: center;
    padding-left: var(--space-xl);
}
.posts li:first-child .post-content h2{
	font-size: clamp(1.2207rem, 0.367rem + 4.27vw, 2.4414rem);
	line-height: 1.2;
}

.posts li .post-content .more a{display: inline-block;}
.posts li .post-content .more a span {
    display: inline-block;
    width: auto;
    height: 100%;
    vertical-align: middle;
}
.posts li .post-content .more a span svg {
    display: block;
    width: 18px;
    height: auto;
    margin-top: -2px;
}

@media (max-width: 1024px){
	.posts{grid-template-columns: 1fr 1fr;}

	.posts li:first-child{
		grid-column: 1 / -1;
		grid-template-columns: 1fr;
	}
	.posts li:first-child .post-thumbnail{margin-bottom: var(--space);}
	.posts li:first-child .post-content{padding-left: 0;}
}
@media (max-width: 600px){
	.posts{grid-template-columns: 1fr;}
}

/* ===================================================================================================
   Single Post
   =================================================================================================== */
.single-post .content-area .container {
    padding-top: var(--space-l);
}

.single-post .entry-header {
    max-width: var(--container-med);
    text-align: left;
    margin: 0 auto var(--space);
}
.single-post .entry-header .entry-meta {
    font-size: var(--font-small);
    color: var(--primary);
}

.single-post .entry-image {
    border-radius: var(--radius);
    overflow: hidden;
    margin: 0 auto var(--space);
}

.single-post .entry-content {
    max-width: var(--container-med);
    text-align: left;
    margin: 0 auto;
}

.single-post .entry-content h2{
	padding-top: var(--space-l);
}

/* ===================================================================================================
   CTA Section
   =================================================================================================== */
.cta-section {
    color: var(--cta-text);
    background-color: #d1cabe !important;
    background-size: cover !important;
    background-position: 100% 27% !important;
    background-repeat: no-repeat !important;
    text-align: left;
    padding: var(--space-3xl) 0;
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.cta-section::after{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background: rgba(0, 0, 0, 0.05);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.54) 45%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
}

.cta-section .container {
    position: relative;
    z-index: 2;
}

.cta-section .container .cta-box{
    width: 100%;
    max-width: 630px;
    text-align: left;
}

.cta-section h2 {
    color: var(--text-on-dark);
}

.cta-section .cta-text {
    margin-bottom: var(--space);
    color: var(--cta-text);
}

.cta-section .cta-action {
    margin-top: var(--space-s);
}
 .cta-section .cta-action a.button {
  background: var(--cta);
  color: var(--cta-text);
}
.cta-section .cta-action a.button:hover {
  background: var(--cta-hover);
  color: var(--cta-text);
}

@media (max-width: 700px) {
    .cta-section {
        padding: var(--space) 0;
    }
    .cta-section .container {
        padding-left: var(--space-s);
        padding-right: var(--space-s);
    }
    .cta-section .cta-button {
        padding: var(--space-xs) var(--space);
    }
}

/* ===================================================================================================
   Legal
   =================================================================================================== */
.page-template-page-legal .container {
    max-width: var(--container-med);
    text-align: left;
}
.page-template-page-legal .container h2 {padding-top: var(--space-xl);}

/* ===================================================================================================
   Footer
   =================================================================================================== */
.footer {
    background: var(--footer-bg);
    color: var(--footer-text);
    font-size: .9rem;
}

.footer a {
    color: #7592a1;
}

.footer a:hover{color: var(--btn);}

.footer .inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-2xl) 0;
}

.footer-row {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
}

.footer-col {
	display: flex;
	flex-direction: column;
}

.footer-col--main {
	flex: 0 1 50%;
	max-width: 414px;
}

.footer-right {
	display: flex;
	flex-direction: row;
	gap: 9%;
	align-items: flex-start;
	justify-content: flex-end;
	flex: 1;
}

.footer-col h2{
	font-size: 1.25rem;
	line-height: 1.3;
	margin-bottom: var(--space-3);
    color: var(--text-on-dark);
}

.footer-col>ul{
    margin-top: 0;
    margin-bottom: 0;
}

.footer-col li{
    list-style: none;
    margin-left: 0;
}

.footer-col .working-hours p{margin-bottom: 1.6em;}
.footer-col .working-hours p:last-child{margin-bottom: 0;}

.footer .site-branding {
    width: auto;
    height: auto;
}
.footer .site-branding a {
    display: block;
    width: auto;
    height: auto;
}
.footer .site-branding a img {
    display: block;
    width: 100%;
    max-width: 243px;
    height: auto;
    opacity: 1;
}

@media (max-width: 1080px){
	.footer-right{
        padding-top: 3rem;
		flex: 0 0 100%;
		width: 100%;
        justify-content: flex-start;
	}

    .footer-right > .footer-col{
        flex: 0 1 auto;
        max-width: 100%;
    }

    .footer-right > .footer-col:last-child{
        margin-left: auto;
    }
}

@media (max-width: 680px){
	.footer-row{
		flex-direction: column;
		align-items: center;
	}

	.footer-col--main,
	.footer-right{
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
		align-items: center;
		text-align: center;
	}

	.footer-right{
		flex-direction: column;
		justify-content: flex-start;
		gap: 2rem;
	}

	.footer-right > .footer-col{
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
		align-items: center;
		text-align: center;
		margin-left: 0;
	}
	.footer .site-branding{
		width: 100%;
		max-width: 243px;
	}

	.footer .site-branding a{
		width: 100%;
	}
}

.footer .site-branding a:hover img {
    opacity: .63;
}

.footer_slogan p{
    margin-top: .9em;
    margin-bottom: 0;
    font-style: italic;
}

/* footer menu */
.footer-menu{margin-bottom: var(--space);}

/* Footer Social Icons */
.footer .social-box{}

.footer-social .navSocial {
    gap: .5rem;
}
.footer-social .navSocial li {
    border-radius: 5px;
}
.footer-social .navSocial a {
    width: 36px;
    height: 36px;
}
.footer-social .navSocial a::after {
    background-color: var(--text-on-dark-muted);
}
.footer-social .navSocial a:hover::after {
    background-color: #fff;
}

/* ===================================================================================================
   Bottom Bar
   =================================================================================================== */
.bottom-bar{background: rgba(0,0,0,.36);}

.bottom-bar .inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-s) 0;
}

.bottom-bar .inner p {
	margin-bottom: 0;
}

.bottom-bar .container p small{}
.bottom-bar .container p small a{color: var(--primary);}

@media (max-width: 680px){
	.bottom-bar .inner{
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		gap: var(--space-s);
	}
}

/* ===================================================================================================
   Interactive Elements
   =================================================================================================== */
/* EXPAND */
.expand {
    margin-bottom: var(--space-xl);
    border-bottom: 1px solid var(--bcg-alt);
}
.expand > .expand-item {
    position: relative;
    list-style: none;
    margin: 0 0 2px;
}
.expand > .expand-item.expanded {}
.expand > .expand-item .source {
    position: relative;
    margin: 0;
    cursor: pointer;
    user-select: none;
    border-radius: var(--radius);
    background: var(--bcg-alt);
    transition: background-color var(--transition);
}
.expand > .expand-item .source button{
    display: block;
    width: 100%;
    padding: 1.5rem 4rem 1.5rem 1.5rem;
    margin: 0;
    border: none;
    font-weight: var(--bold);
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 1rem;
    text-align: left;
    background: none;
    cursor: pointer;
}
.expand > .expand-item .source span{
    position: absolute;
    top:50%;
    right: 1.5rem;
    transform: translateY(-50%) rotate(0deg);
    transition: var(--transition);
    width:18px;
    height: 18px;
    opacity: .54;
}
.expand > .expand-item.expanded .source span {
    transform: translateY(-50%) rotate(135deg);
    opacity: 1;
}
.expand > .expand-item .source span::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width:100%;
    height: 2px;
    background: var(--bcg-dark);
}
.expand > .expand-item .source span::after{
    content: '';
    position: absolute;
    top:0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: var(--bcg-dark);
}

.expand > .expand-item .target {
    margin: 0;
    padding: 0 1.5rem;
    overflow: hidden;
    display: block;
    height: 0;
    background: var(--bcg);
    transition: height var(--transition);
	will-change: height;
}
.expand > .expand-item .target p {
    margin: 1.5rem 0;
}

/* ===================================================================================================
   To top
   =================================================================================================== */
.totop{
    position: fixed;
    right: 9px;
    bottom: 9px;
    width: 36px;
    height: 36px;
    background: color-mix(in srgb, var(--bcg-dark) 45%, transparent);
    border-radius: 5px;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition);
    z-index: 999;
}
.totop.visible {
    opacity: 1;
    pointer-events: auto;
}
.totop a{
    display: block;
    height: 100%;
}
.totop a svg{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: var(--text-on-dark);
    transform: rotate(-90deg);
}

/* ===================================================================================================
   Clearfix
   =================================================================================================== */
.clearfix::after {
	content: "";
	display: table;
	clear: both;
}

/* ===================================================================================================
   Transitions
   =================================================================================================== */
a {
    transition: color var(--transition), background var(--transition);
}
a::before, a::after, a svg, a img, .transition {
    transition: all var(--transition);
}

/* ===================================================================================================
   Responsive (1440px)
   =================================================================================================== */
@media (max-width: 1440px) {
}

/* ===================================================================================================
   Responsive (1200px)
   =================================================================================================== */
@media (max-width: 1200px) {
}

/* ===================================================================================================
   Responsive (1024px)
   =================================================================================================== */
@media (max-width: 1024px) {
	html { font-size: 17px; }
	/* Main navigation as sidebar */    
	.menu-toggle {display: flex;}
    .site-main {padding-top:54px;}
    .header {
        top: 0;
        position: fixed;
        background: var(--bcg);
    }
    .page-template-homepage .header{
        box-shadow: 0 2px 7px color-mix(in srgb, var(--primary-dark) 9%, transparent);
    }
    .header .inner{height: 54px;}
    
    .header .site-branding a img {height: 40px;}
    
	.main-navigation {
		display: block;
		position: fixed;
		top: 54px;
		right: -100%;
		width: 100%;
		height: 100vh;
		padding: 0 5% 6rem;
		background: var(--primary);
		transition: right var(--transition);
		overflow-y: auto;
		z-index: 150;
	}
	.main-navigation.open,    
    .main-navigation.open::after{
		right: 0;
	}
	.main-navigation .nav {
		flex-direction: column;
		align-items: stretch;
		height: auto;
		padding-top: 0;
	}
	.main-navigation .nav:first-of-type {
		padding-top: 54px;
	}
	.main-navigation .nav > li {
        position: relative;
		width: 100%;
		margin-left: 0 !important;
		height: auto !important;
		align-items: stretch;
		display: flex;
		flex-direction: column;
	}
    .main-navigation #menu-menu > li:first-child {
        display: flex;
    }
	.main-navigation .nav > li > a {
		width: 100%;
		height: var(--nav-sub-link-height);
		line-height: var(--nav-sub-link-lh);
		justify-content: flex-start;
		border-bottom: 1px solid rgba(255,255,255,.18);
		flex-shrink: 0;
        font-size: var(--font-big);
        color: #fff !important;
	}

    .main-navigation .nav > li.nav-button > a,
    body.active .main-navigation .nav > li.nav-button > a {
        padding: 0;
		border-bottom: 1px solid rgba(255,255,255,.18);
        border-radius: 0;
        background: none;
        color: #fff !important;
        font-weight: 400;
        cursor: pointer;
        transition: background-color var(--transition), color var(--transition);
		height: var(--nav-sub-link-height);
		line-height: var(--nav-sub-link-lh);
    }
    .main-navigation .nav > li.nav-button > a:hover {
        background: none;
    }
    
    
	.main-navigation .nav > li.menu-item-has-children > a {
		position: relative;
	}
	/* Submenu trigger for mobile */
    .main-navigation .nav > li.menu-item-has-children > .submenu-trigger,
	body.active .main-navigation .nav > li.menu-item-has-children > .submenu-trigger {
		display: block;
		position: absolute;
		right: -5px;
		top: 0;
		width: var(--nav-sub-link-height);
		height: var(--nav-sub-link-height);
		cursor: pointer;
		border: none;
        color: #fff !important;
		z-index: 10;
	}
    .main-navigation .nav > li.menu-item-has-children > .submenu-trigger svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%) rotate(90deg);
        width: 36px;
        height: 36px;
    }
    .main-navigation .nav > li.menu-item-has-children.active > .submenu-trigger svg {
        transform: translate(-50%,-50%) rotate(-90deg);
    }    
	/* Submenu mobile styles */
	.main-navigation .sub-menu {
		position: static !important;
		background: none;
		box-shadow: none;
		border-bottom: 1px solid rgba(255,255,255,0);
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		max-height: 0;
		overflow: hidden;
		transition: max-height var(--transition-slow);
		pointer-events: auto;
        border-radius: 0;
	}
	.main-navigation .sub-menu.open {
		border-bottom: 1px solid rgba(255,255,255,.18);
	}
	.main-navigation .sub-menu.open {
		max-height: 600px;
		transition: max-height var(--transition-slow);
	}
	/* Always show submenus on hover/focus */
	.main-navigation .nav > li:hover > .sub-menu,
	.main-navigation .nav > li:focus-within > .sub-menu,
	.main-navigation .sub-menu > li:hover > .sub-menu,
	.main-navigation .sub-menu > li:focus-within > .sub-menu {
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
	}
	.main-navigation .sub-menu > li > a {
		padding-left: 27px;
        color: #fff !important;
	}

    .main-navigation .sub-menu > li > a:hover {
        background: none;
    }
	.main-navigation .sub-menu .sub-menu > li > a {
		padding-left: 54px;
	}
	.main-navigation .sub-menu .sub-menu > li > a:hover {
		background: none;
	}

    /* Left-align all sub-menus under nav-end on mobile */
    .main-navigation .nav > li.nav-end > .sub-menu,
    .main-navigation .nav > li.nav-end > .sub-menu .sub-menu {

        text-align: left;
    }
    .main-navigation .nav > li.nav-end > .sub-menu a,
    .main-navigation .nav > li.nav-end > .sub-menu .sub-menu a {
        justify-content: flex-start;
    }

	/* Submenu trigger for nested mobile submenus */
	.main-navigation .sub-menu .submenu-trigger,
    .main-navigation .nav li.nav-end .sub-menu .submenu-trigger {
		position: absolute;
		right: 27px;
        left: auto;
		top: 0;
		width: var(--nav-sub-link-height);
		height: var(--nav-sub-link-height);
		border: none;
		color: var(--text);
		z-index: 10;
		display: block;
        cursor: pointer;
	}
    .main-navigation .sub-menu .submenu-trigger svg,
    .main-navigation .nav li.nav-end .sub-menu .submenu-trigger svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%) rotate(90deg);
        width: 27px;
        height: 27px;
    }
    .main-navigation .sub-menu li.active .submenu-trigger svg,
    .main-navigation .nav li.nav-end .sub-menu li.active .submenu-trigger svg {
        transform: translate(-50%,-50%) rotate(-90deg);
    }
    
    /* lang navigation */
    .main-navigation .navLang{
        margin-left: 0;
		border-bottom: 1px solid rgba(255,255,255,.18);
    }
    .main-navigation .navLang > li{
        padding-right: 0;
    }
    .main-navigation .navLang > li.active .sub-menu {
		border-bottom: none;
    }
    .main-navigation .navLang > li > a,
    .main-navigation .navLang > li:hover > a{
        background-color: #fff;
    }
    body.home.active .main-navigation .navLang > li > a{background-color: #fff;}
    
	.main-navigation .navLang > li.menu-item-has-children > .submenu-trigger,
	body.active .main-navigation .navLang > li.menu-item-has-children > .submenu-trigger {
		right: 4px;
		width: 100%;
	}
    .main-navigation .navLang > li.menu-item-has-children > .submenu-trigger svg {
        top: 50%;
        left: 100%;
        transform: translate(-100%,-50%) rotate(90deg);
    }
    .main-navigation .navLang > li.menu-item-has-children.active > .submenu-trigger svg {
        transform: translate(-100%,-50%) rotate(-90deg);
    }
    .main-navigation .navLang .sub-menu{
        min-width: 100%;
    }
}

/* ===================================================================================================
   Responsive (900px)
   =================================================================================================== */
@media (max-width: 900px) {
}

/* ===================================================================================================
   Responsive (768px)
   =================================================================================================== */
@media (max-width: 768px) {
    .more-info-container{
        flex-wrap: wrap;
        align-items:flex-start;
        justify-content:flex-start;
        gap:var(--space);
    }

    .more-info-content{
        padding-top: 0;
        flex:0 0 100%;
    }

    .more-info-media{
        flex:0 0 100%;
        text-align: center;
    }

    .more-info-media svg{
        max-width: 180px;
        margin: 0 auto;
    }

}

/* ===================================================================================================
   Responsive (600px)
   =================================================================================================== */
@media (max-width: 600px) {
    .page-template-page-how-work .content-phases .container ul li {margin-left: 36px;}
    .page-template-page-how-work .content-phases .container ul li::before,
    .page-template-page-how-work .content-phases .container ul li::after {
        left: -32px;
    }
}

/* ===================================================================================================
   Responsive (480px)
   =================================================================================================== */

/* ===================================================================================================
   Responsive (375px)
   =================================================================================================== */
@media (max-width: 375px) {
}

/* ===================================================================================================
   Animations
   =================================================================================================== */
@keyframes body-fade-in {
    from {opacity: 0;}
    to {opacity: 1;}
}
@keyframes fadeInScale {
  to {opacity: .54;transform: translate(-50%,120%) scale(1);}
}
@keyframes fadeInUp {
  to {opacity: 1; transform: none;}
}

/* ===================================================================================================
   Accessibility
   =================================================================================================== */
.screen-reader-text {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	height: 1px; width: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background: var(--bcg-alt);
	clip: auto !important;
	color: var(--primary);
	display: block;
	font-size: 1rem;
	font-weight: bold;
	left: 5px; top: 5px;
	height: auto; width: auto;
	padding: 15px 23px 14px;
	z-index: 100000;
}

.main-navigation a:focus-visible,
.main-navigation .submenu-trigger:focus-visible,
.menu-toggle:focus-visible {
  outline: 2px solid var(--primary, #1a73e8);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .main-navigation .sub-menu,
  .main-navigation .nav > li > a,
  .menu-toggle .bar,
  .main-navigation.open,
  .main-navigation.open::after {
    transition: none !important;
  }
}