/**
 * EHRM - custom styles.
 */
#form-container {
    position: relative;
	border-color: transparent !important;
}

#form-container::before {
    content: "";
    position: absolute;
    inset: -2px;
    padding: 2px;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        #409744 37%,
        #757AC5 51%
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;
}
#form-container button[type="submit"]{
	min-height:44px;
    background: linear-gradient(90deg, #6DB573 0%, #468D4C 100%);
}
#form-container button[type="submit"]:hover{
    background: linear-gradient(90deg, #5FA665 0%, #397D40 100%);
    transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(70, 141, 76, 0.25); 
}

.border-gradient{
	    position: relative;
	border-color: transparent !important;
}

.border-gradient::before{
	    content: "";
    position: absolute;
    inset: 0px;
    padding: 2px;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        #409744 37%,
        #757AC5 51%
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
		z-index:5;
    pointer-events: none;
}

.fit-content{
	width: fit-content !important;
}


.ehrm-header-gradient-1 {
    background: linear-gradient(
        90deg,
        #409744 37%,
        #757AC5 51%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* onas */
.about-glow {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* GREEN GLOW — LEFT */
.about-glow::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 550px;

    left: -180px;
    top: 100px;

    background: #45B24A;
    filter: blur(140px);
    opacity: 0.55;

    pointer-events: none;
    z-index: -1;
}

/* YELLOW + PURPLE GLOW — RIGHT */
.about-glow::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;

    right: -200px;
    top: 350px;

    background: radial-gradient(
        circle,
        #F9D69B 0%,
        rgba(139, 105, 249, 0.51) 55%,
        rgba(139, 105, 249, 0) 100%
    );

    filter: blur(120px);

    pointer-events: none;
    z-index: -1;
}

.gradient-2 {
    background: linear-gradient(90deg, #6DB573 0%, #468D4C 100%);
}


/* TOP WAVE */
.wave-background::before {
    content: "";
    position: absolute;
    z-index: 0;

    left: 0;
    bottom: 100%;

    width: 100%;
    height: var(--wave-top-height);

    background: var(--wave-color);

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 82' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 82V82C150 82 150 0 360 0C570 0 570 82 720 82C870 82 870 0 1080 0C1290 0 1290 82 1440 82V82H0Z' fill='black'/%3E%3C/svg%3E");

    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;

    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 82' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 82V82C150 82 150 0 360 0C570 0 570 82 720 82C870 82 870 0 1080 0C1290 0 1290 82 1440 82V82H0Z' fill='black'/%3E%3C/svg%3E");

    mask-size: 100% 100%;
    mask-repeat: no-repeat;

    pointer-events: none;
}


/* BOTTOM WAVE */
.wave-background::after {
    content: "";
    position: absolute;
    z-index: 0;

    left: 0;
    top: 100%;

    width: 100%;
    height: var(--wave-bottom-height);

    background: var(--wave-color);

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 120' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H1440V20C1150 20 1000 120 720 120C440 120 290 20 0 20V0Z' fill='black'/%3E%3C/svg%3E");

    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;

    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 120' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H1440V20C1150 20 1000 120 720 120C440 120 290 20 0 20V0Z' fill='black'/%3E%3C/svg%3E");

    mask-size: 100% 100%;
    mask-repeat: no-repeat;

    pointer-events: none;
}


/* Keep Elementor content above the shapes */
.wave-background > * {
    position: relative;
    z-index: 1;
}


.gradient-green-2 {
    background: linear-gradient(
        90deg,
        #6DB573 0%,
        #468D4C 100%
    );
}



.icon-glow {
    position: relative;
    isolation: isolate;
		z-index: 0;
}

.icon-glow > * {
    z-index: 2;
}

/* Card hover: grey border -> green/purple gradient border, smoothly.
   --card-hover goes 0 -> 1 on hover (animatable thanks to @property) and mixes
   each gradient colour from the border colour to its real colour. */
@property --card-hover {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

.card-hover {
	--card-border: #cecece;
	--card-hover: 0;
	position: relative;
}

/* ".elementor" to win over the Elementor global class (transition: 200ms), which is kept for the rest. */
.elementor .card-hover {
	transition: all 0.2s, --card-hover 0.45s ease, border-color 0.45s ease;
}

.card-hover:hover {
	--card-hover: 1;
	border-color: transparent !important;
}

.card-hover::before {
	content: "";
	position: absolute;
	inset: 0px;
	padding: 2px;
	border-radius: inherit;
	background: linear-gradient(
		90deg,
		color-mix(in srgb, #409744 calc(var(--card-hover) * 100%), var(--card-border)) 37%,
		color-mix(in srgb, #757AC5 calc(var(--card-hover) * 100%), var(--card-border)) 51%
	);

	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	z-index: 5;
	pointer-events: none;
}

body.page-id-725 .card-hover {
	--card-border: #fff;
	--glow-color: #409744;
}

/* Gradient background */
.icon-glow::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, #40974433 0%,rgba(255, 255, 255, 0.3) 100%);

    z-index: 0;
}
/* Glow under the icon: always there but invisible, fades + grows in on card hover. */
.icon-glow::after {
    content: "";
    position: absolute;
    z-index: -1;

    width: 34px;
    height: 26px;

    left: 45%;
    top: 100%;

    transform:
        translate(-50%, -50%)
        rotate(20deg)
        scale(0.6);

    border-radius: 50%;

    background: var(--glow-color);
    opacity: 0;

    filter: blur(13px);

    pointer-events: none;
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.card-hover:hover .icon-glow::after {
    opacity: 0.43;
    transform:
        translate(-50%, -50%)
        rotate(20deg)
        scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.elementor .card-hover,
	.icon-glow::after {
		transition: none;
	}
}



.ehrm-post-terms .elementor-post-info__terms-list-item{
	background-color:#E1F2E2;
	color:#409744;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 12px;
}

.ehrm-post-info .elementor-icon-list-item::after{
	border-radius: 50%;
}

.ehrm-post-terms-image .elementor-post-info__terms-list-item{
	background-color: #409744;
	color: #fff;
	padding: 4px 12px;
	font-size: 16px;
	line-height: 20px;
	border-radius: 999px;;
}

.fix-paragraph{
	 width: 100% !important;
   min-width: 0 !important;
   max-width: 100% !important;
   white-space: normal !important;
   overflow-wrap: break-word !important;
}

#home-tab #home-tabs-menu button.e--selected .toggle-content {
    display: flex !important;
}

/* Home tabs: the gradient border fades in/out (same technique as .card-hover).
   --tab-active goes 0 -> 1 on the selected/hovered tab. */
@property --tab-active {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

#home-tab #home-tabs-menu button {
	--tab-active: 0;
	position: relative;
	transition:
		background 0.3s ease,
		border-color 0.4s ease,
		box-shadow 0.4s ease,
		transform 0.4s ease,
		--tab-active 0.4s ease;
}

#home-tab #home-tabs-menu button.e--selected{
		box-shadow: 0 4px 14.6px 0 rgba(139, 105, 249, 0.59);
}
#home-tab #home-tabs-menu button.e--selected,
#home-tab #home-tabs-menu button:hover{
	--tab-active: 1;
	border-color: transparent !important;
}

#home-tab #home-tabs-menu button:before{
		content: "";
    position: absolute;
    inset: 0px;
    padding: 2px;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, #409744 calc(var(--tab-active) * 100%), transparent) 37%,
        color-mix(in srgb, #757AC5 calc(var(--tab-active) * 100%), transparent) 51%
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
		z-index:5;
    pointer-events: none;
}
#home-tab #home-tabs-menu button:hover{
	background-color: #fff;
}

/* Home tabs: the image on the right fades in when its tab is selected. */
#home-tab .home-tab-content.e--selected {
	animation: ehrm-tab-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ehrm-tab-in {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.98);
	}
}

@media (prefers-reduced-motion: reduce) {
	#home-tab #home-tabs-menu button {
		transition: none;
	}

	#home-tab .home-tab-content.e--selected {
		animation: none;
	}
}
.ai-gradient {
    background: linear-gradient(
        90deg,
        #32AE7E 0%,
        #704097 100%
    );
}

.ai-gradient-text {
    background: linear-gradient(
        90deg,
        #32AE7E 0%,
        #704097 100%
    );

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;
}

.ai-border-gradient {
    position: relative;
    border-color: transparent !important;

    /* Gradient text */
    background: linear-gradient(
        90deg,
        #32AE7E 0%,
        #704097 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.ai-border-gradient::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;

    background: linear-gradient(
        90deg,
        #32AE7E 0%,
        #704097 100%
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    z-index: 5;
    pointer-events: none;
}
.icon-glow-yellow {
    position: relative;
    isolation: isolate;
    z-index: 0;
}

/* Keep SVG above everything */
.icon-glow-yellow > * {
    position: relative;
    z-index: 2;
}

/* Sticky header */
.ehrm-header {
	/* Smooth changes between normal / sticky / menu open. */
	transition:
		background-color 0.35s ease,
		box-shadow 0.35s ease,
		border-radius 0.3s ease,
		padding 0.35s ease;
}

.ehrm-header.is-sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	/* Pill shape. A real value (not 999px) so it can animate to the open-menu shape. */
	border-radius: 50px;
	background-color: #fff;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.13);
	padding: var(--space-6);
}
.ehrm-header:has(.e-n-menu-content.e-active) {
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.13);
}
@media (prefers-reduced-motion: reduce) {
	.ehrm-header {
		transition: none;
	}
}

/* Keep it below the WP admin bar when logged in */
.admin-bar .ehrm-header.is-sticky {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .ehrm-header.is-sticky {
		top: 46px;
	}
}

.image-gradient {
    position: relative;
    overflow: hidden;
}

/* Gradient overlay */
.image-gradient::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

/* Image is below gradient */
.image-gradient img {
    position: relative;
    z-index: 1;
}

/* Image/card on LEFT
   transparent on left → white on right */
.image-gradient-left::before {
    background: linear-gradient(
        90deg,
        rgba(250, 250, 250, 0) 0%,
        #FAFAFA 100%
    );
}

/* Image/card on RIGHT
   white on left → transparent on right */
.image-gradient-right::before {
    background: linear-gradient(
        90deg,
        #FAFAFA 0%,
        rgba(250, 250, 250, 0) 100%
    );
}
/* ==========================================================================
   Mint Minds timeline (scroll-driven, see assets/js/script.js)
   .mint-timeline      -> wrapper
   .mint-timeline-item -> each entry
   ========================================================================== */
.mint-timeline {
	position: relative;
	--timeline-x: 36px;             /* horizontal position of line + dots */
	--timeline-gap: 24px;           /* space between line and content */
	--timeline-color: #9DCEA5;
	--timeline-bg: #E8E8E8;
	--timeline-progress: 0;
	--timeline-trigger: 25%;        /* line tip position on screen: 50% = middle, lower % = higher up */
	--timeline-smooth: 4;        /* seconds the line takes to catch up with the scroll (0 = instant) */
	--timeline-dot-size: 10px;
	--timeline-dot-top: 10px;       /* dot centre from top of item (level with the year) */
	--timeline-start: 0px;          /* set by JS: first dot centre */
	--timeline-length: 100%;        /* set by JS: first dot -> last dot */
}

/* Gray background line + green progress line */
.mint-timeline::before,
.mint-timeline::after {
	content: "";
	position: absolute;
	top: var(--timeline-start);
	left: var(--timeline-x);
	height: var(--timeline-length);
	transform-origin: top;
	pointer-events: none;
}

.mint-timeline::before {
	width: 1px;
	background: var(--timeline-bg);
	transform: translateX(-50%);
	z-index: 1;
}

.mint-timeline::after {
	width: 2px;
	background: var(--timeline-color);
	transform: translateX(-50%) scaleY(var(--timeline-progress));
	z-index: 2;
}

/* Items keep their natural height; content moves right of the line */
.mint-timeline .mint-timeline-item {
	position: relative;
	--item-inset: 0px;              /* set by JS: item left offset inside .mint-timeline */
	padding-inline-start: calc(var(--timeline-x) - var(--item-inset) + var(--timeline-gap));
}

.mint-timeline .mint-timeline-item > * {
	position: relative;
	z-index: 4;
}

/* Dot */
.mint-timeline .mint-timeline-item::before {
	content: "";
	position: absolute;
	top: var(--timeline-dot-top);
	left: calc(var(--timeline-x) - var(--item-inset));
	width: var(--timeline-dot-size);
	height: var(--timeline-dot-size);
	border-radius: 50%;
	background: #D9D9D9;
	transform: translate(-50%, -50%) scale(1);
	transition: background-color 0.3s ease, transform 0.3s ease;
	z-index: 3;
	pointer-events: none;
}

.mint-timeline .mint-timeline-item.is-active::before {
	background: var(--timeline-color);
	transform: translate(-50%, -50%) scale(1.25);
}

@media (max-width: 1024px) {
	.mint-timeline {
		--timeline-x: 24px;
		--timeline-gap: 20px;
	}
}

@media (max-width: 767px) {
	.mint-timeline {
		--timeline-x: 16px;
		--timeline-gap: 16px;
		--timeline-dot-size: 8px;
	}
}

/* Reduced motion: show the finished timeline, no animation */
@media (prefers-reduced-motion: reduce) {
	.mint-timeline::after {
		transform: translateX(-50%) scaleY(1);
	}

	.mint-timeline .mint-timeline-item::before {
		background: var(--timeline-color);
		transition: none;
	}
}

/* ==========================================================================
   Hero image cards hover (home page, "Right" container -> class ehrm-hover-images)
   Desktop only: the card pops up, grows a little and gets a shadow.
   Skip an image: add class "no-hover" to the image or to a container around it.
   ========================================================================== */
@media (hover: hover) and (min-width: 1025px) {
	.ehrm-hover-images img:not(.no-hover, .no-hover img) {
		position: relative;
		transform-origin: center;
		transition: transform 0.35s ease, filter 0.35s ease;
		will-change: transform;
	}

	.ehrm-hover-images img:not(.no-hover, .no-hover img):hover {
		z-index: 5;
		transform: translateY(-8px) scale(1.15);
		/* drop-shadow follows the rounded card shape (box-shadow would be square) */
		filter: drop-shadow(0 18px 30px rgba(15, 67, 19, 0.18)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.08));
	}
}

@media (prefers-reduced-motion: reduce) {
	.ehrm-hover-images img {
		transition: none;
	}
}

/* Images with class "no-hover" are hidden on screens up to 1280px.
   !important: Elementor's own image style (display: block) would win otherwise. */
@media screen and (max-width: 1280px) {
	.no-hover {
		display: none !important;
	}
}

/* ==========================================================================
   Flip cards (home page, IMPLEMENTACIJA steps)
   .ehrm-card-hover -> the "Hover" container. Its parent (the card) is found
   automatically, so only this one class is needed.
   On hover the normal content fades out and the hover content fades in.
   ========================================================================== */
:where(.e-con):has(> .ehrm-card-hover) {
	position: relative;
}

:where(.e-con):has(> .ehrm-card-hover) > :not(.ehrm-card-hover) {
	transition: opacity 0.3s ease;
}

:where(.e-con):has(> .ehrm-card-hover) > .ehrm-card-hover {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	min-height: 100%;
	z-index: 5;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	box-shadow: 0 18px 40px rgba(15, 67, 19, 0.12);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

:where(.e-con):has(> .ehrm-card-hover):hover > .ehrm-card-hover,
:where(.e-con):has(> .ehrm-card-hover):focus-within > .ehrm-card-hover {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

:where(.e-con):has(> .ehrm-card-hover):hover > :not(.ehrm-card-hover),
:where(.e-con):has(> .ehrm-card-hover):focus-within > :not(.ehrm-card-hover) {
	opacity: 0;
}

/* Touch devices (no hover): show the detailed content directly */
@media (hover: none) {
	:where(.e-con):has(> .ehrm-card-hover) > :not(.ehrm-card-hover) {
		display: none;
	}

	:where(.e-con):has(> .ehrm-card-hover) > .ehrm-card-hover {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

/* Elementor editor: show both so they can be edited */
.elementor-editor-active :where(.e-con):has(> .ehrm-card-hover) > .ehrm-card-hover {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
}

.elementor-editor-active :where(.e-con):has(> .ehrm-card-hover) > :not(.ehrm-card-hover) {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	:where(.e-con):has(> .ehrm-card-hover) > *,
	:where(.e-con):has(> .ehrm-card-hover) > .ehrm-card-hover {
		transition: none;
	}
}

/* ==========================================================================
   AI demo (home "AI POMOČNIK"): typing prompt + AI answer
   ========================================================================== */

.ai-gradient-text.is-typing::after {
	content: "";
	display: inline-block;
	width: 2px;
	height: 1em;
	margin-left: 2px;
	vertical-align: -0.1em;
	background: #704097;
	animation: ehrm-ai-caret 0.9s steps(1) infinite;
}

.ehrm-ai-demo-ready .ai-button {
	transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.ehrm-ai-demo-ready .ai-button.is-active {
	/* background: linear-gradient(90deg, #32AE7E 0%, #704097 100%); */
	color: #fff;
	-webkit-text-fill-color: #fff;
	box-shadow: 0 6px 16px rgba(112, 64, 151, 0.25);
	transform: translateY(-2px);
}

.ehrm-ai-result {
	position: relative;
	width: 100%;
	height: var(--ehrm-ai-result-height, 8.5em); /* Fixed: long answers scroll inside. */
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	padding: 16px 20px;
	border: 1px solid #CECECE;
	border-radius: 13px;
	background: #fff;
	font-size: 15px;
	line-height: 1.55;
	color: #333;
	text-align: left;
	opacity: 0.5;
	transition: opacity 0.4s ease, box-shadow 0.4s ease;
}

.ehrm-ai-result.is-visible {
	opacity: 1;
	box-shadow: 0 10px 30px rgba(112, 64, 151, 0.12);
}

.ehrm-ai-result__text {
	margin: 0;
	white-space: pre-line;
}

.ehrm-ai-result__dots {
	display: none;
	gap: 5px;
}

.ehrm-ai-result.is-thinking .ehrm-ai-result__dots {
	display: inline-flex;
}

.ehrm-ai-result__dots i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: linear-gradient(90deg, #32AE7E 0%, #704097 100%);
	animation: ehrm-ai-dot 1s ease-in-out infinite;
}

.ehrm-ai-result__dots i:nth-child(2) { animation-delay: 0.15s; }
.ehrm-ai-result__dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes ehrm-ai-caret {
	50% { opacity: 0; }
}

@keyframes ehrm-ai-dot {
	0%, 100% { opacity: 0.3; transform: translateY(0); }
	50% { opacity: 1; transform: translateY(-4px); }
}

/* Shortcode markup (same look as the Elementor "Input" box and .ai-button). */
.ehrm-ai-demo {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: var(--ehrm-ai-width, 500px); /* Fixed size: long texts never resize the box. */
	max-width: 100%;
	margin-inline: auto;
}

.ehrm-ai-demo__input {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 18px 12px;
	border: 1px solid #CECECE;
	border-radius: 13px;
	background: #fff;
}

.ehrm-ai-demo__icon {
	flex: none;
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.ehrm-ai-demo__field {
	flex: 1;
	min-width: 0;
	margin: 0;
	overflow: hidden; /* One line: long questions slide left instead of wrapping. */
	white-space: nowrap;
	min-height: 1.5em;
	font-family: "Inter", sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
}

.ehrm-ai-demo__buttons {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 24px 0;
}

.ehrm-ai-demo .ai-button {
	margin: 0;
	padding: 10px 16px;
	border: 1px solid #E1F2E2;
	border-radius: 10px;
	background: transparent;
	color: #E1F2E2;
	font-family: var(--font-primary, "Poppins", sans-serif);
	font-size: 14px;
	font-weight: 600;
	line-height: 24px;
	cursor: pointer;
}

.ehrm-ai-demo .ai-button:hover:not(.is-active) {
	background: rgba(255, 255, 255, 0.12);
}

@media (prefers-reduced-motion: reduce) {
	.ehrm-ai-result,
	.ehrm-ai-demo-ready .ai-button {
		transition: none;
	}
}

/* ==========================================================================
   Zoom reveal (home): icon zooms in on scroll down, then the content shows
   Add class "ehrm-zoom-reveal" to the container with the icon + content.
   ========================================================================== */

.ehrm-zoom-reveal.ehrm-zoom-ready {
	--zoom-icon-filter: saturate(4) brightness(0.85); /* Icon colour at the start; "none" = real colour. */
	--zoom-icon-grow: 2.5;  /* How big the icon gets while the section scrolls into view. */
	--zoom-length: 1.2;     /* How long the section stays on screen while zooming, in screen heights. */
	--zoom-smooth: 0.12;    /* 0–1: lower = smoother/slower catch-up, 1 = follows the scroll exactly. */
	position: relative;
	display: block;
	/* Taller than the screen: the stage inside sticks while you scroll through this height. */
	height: calc(100vh * (1 + var(--zoom-length))) !important;
	max-height: none !important;
	padding: 0 !important;
	overflow: visible !important;
}

/* The part you see: sticks to the top of the screen while the section scrolls. */
.ehrm-zoom-stage {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
}

.ehrm-zoom-ready .ehrm-zoom-icon {
	position: relative;
	z-index: 1;
	width: var(--zoom-icon-size, 127px) !important;
	max-width: none;
	height: auto !important;
	min-height: 0 !important;
}

.ehrm-zoom-stage > .ehrm-zoom-content,
.ehrm-zoom-ready > .ehrm-zoom-content {
	position: absolute;
	inset: 0;
	z-index: 2;
	min-height: 100%;
	/* Block Elementor "Interactions" (scale/fade in) here: the scroll animation handles it. */
	transform: none !important;
	transition: none !important;
}

/* No animation (reduced motion): a normal one-screen section with the content. */
.ehrm-zoom-reveal.ehrm-zoom-ready.is-done {
	display: flex;
	height: 100vh !important;
	overflow: hidden !important;
}

/* No animation (reduced motion): normal section, no icon. */
.ehrm-zoom-ready.is-done .ehrm-zoom-icon {
	display: none !important;
}

/* Wave under a zoom reveal: add class "ehrm-zoom-wave" next to "ehrm-zoom-reveal".
   Drawn on the section itself, because the sticky stage clips anything outside it. */
.ehrm-zoom-wave {
	--zoom-wave-color: #E1F2E2;
	--zoom-wave-height: 130px;
	position: relative;
}

.ehrm-zoom-wave::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(var(--zoom-wave-height) * -1);
	z-index: 3;
	height: var(--zoom-wave-height);
	background-color: var(--zoom-wave-color);
	-webkit-mask: url("../img/wave-bottom.svg") no-repeat 0 0 / 100% 100%;
	mask: url("../img/wave-bottom.svg") no-repeat 0 0 / 100% 100%;
	pointer-events: none;
}

.ehrm-zoom-wave.ehrm-zoom-ready.is-done {
	overflow: visible !important;
}

@media (max-width: 1200px) {
	.ehrm-zoom-wave {
		--zoom-wave-height: 50px;
	}
}

.ehrm-header-mint-minds {
	color: #9FCBA2 !important;
}
/* [ehrm_excerpt]: max lines (--ehrm-excerpt-lines, set by the shortcode), "..." at the end. */
.ehrm-excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--ehrm-excerpt-lines, 3);
	line-clamp: var(--ehrm-excerpt-lines, 3);
	overflow: hidden;
	margin: 0;
}

@media screen and (max-width: 1280px) {
	.no-hover{
		display: none;
	}
}

/* *{
	outline: 1px solid red;
} */
/* ==========================================================================
   Header menu (.ehrm-menu) on mobile/tablet: a simple list instead of the mega menu.
   Desktop is not changed. 1024px = the Elementor menu's "tablet" breakpoint.
   ========================================================================== */
@media (max-width: 1024px) {
	/* The open menu: white panel under the header, scrolls if it is long. */
	.ehrm-menu .e-n-menu-wrapper {
		box-sizing: border-box;
		max-height: calc(100vh - 130px);
		padding: 6px 18px;
		overflow-y: auto;
		border-radius: 20px;
		background: #fff !important;
		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
	}

	.ehrm-menu .e-n-menu-heading {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.ehrm-menu .e-n-menu-heading,
	.ehrm-menu .e-n-menu-item {
		box-sizing: border-box;
		width: 100% !important;
		max-width: 100%;
	}

	/* One row per link, with a divider. */
	.ehrm-menu .e-n-menu-item {
		border-bottom: 1px solid #eee;
	}

	.ehrm-menu .e-n-menu-item:last-child {
		border-bottom: 0;
	}

	.ehrm-menu .e-n-menu-title {
		justify-content: space-between !important;
		padding: 14px 2px !important;
		border: 0 !important;
		background: transparent !important;
	}

	.ehrm-menu .e-n-menu-title-container {
		flex: 1;
		justify-content: flex-start !important;
	}

	.ehrm-menu .e-n-menu-title-text {
		font-size: 16px;
		font-weight: 500;
		text-align: left;
	}

	/* Arrow to open a dropdown (the widget has no icon set), turns when open. */
	.ehrm-menu .e-n-menu-dropdown-icon {
		display: flex !important;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 36px !important;
		height: 36px;
		color: #409744;
	}

	.ehrm-menu .e-n-menu-dropdown-icon::after {
		content: "";
		width: 8px;
		height: 8px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform 0.25s ease;
	}

	.ehrm-menu .e-n-menu-dropdown-icon[aria-expanded="true"]::after {
		transform: translateY(2px) rotate(-135deg);
	}

	/* Dropdown: only the list of links (no "DEMO" card, no small title, no card styling). */
	.ehrm-menu .e-n-menu-content > .e-con {
		padding: 0 0 12px !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
	}

	.ehrm-menu .e-n-menu-content .e-con-inner > .e-con,
	.ehrm-menu .e-n-menu-content .e-con-inner > .e-con > .e-con:first-child {
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
	}

	.ehrm-menu .e-n-menu-content .e-con-inner > .e-con > .e-con:not(:first-child),
	.ehrm-menu .e-n-menu-content .e-con-inner > .e-con > .e-con:first-child > :first-child {
		display: none !important;
	}

	/* The links one under the other (some dropdowns have them side by side on desktop). */
	.ehrm-menu .e-n-menu-content .e-con-inner > .e-con > .e-con:first-child > .e-con {
		flex-direction: column !important;
		align-items: stretch;
		width: 100%;
	}
}

/* ==========================================================================
   Green CTA banner (module pages): add class "ehrm-cta-banner" to the container.
   ========================================================================== */
.ehrm-cta-banner {
	position: relative;
	overflow: hidden;
	width: min(1260px, calc(100% - 32px)) !important;
	margin: 80px auto 0 !important;
	padding: 96px 24px !important;
	border-radius: 24px;
	background: linear-gradient(135deg, #6CB472 0%, #5CA462 50%, #49904F 100%) !important;
}

.ehrm-cta-banner :is(h1, h2, h3, h4, p, .elementor-heading-title) {
	color: #fff !important;
	-webkit-text-fill-color: #fff;
}

/* White button on the green background. */
.ehrm-cta-banner .e-button-base {
	background: #fff !important;
	color: #409744 !important;
}

/* ==========================================================================
   Module pages: card illustrations ("Ena rešitev. Tri perspektive.") and the
   integration card (MojeDelo / Optius logos + ninja).
   ========================================================================== */
.ehrm-perspective-card {
	position: relative;
	overflow: hidden;
	min-height: 471px;
}

.ehrm-perspective-card > :not(.ehrm-card-illustration) {
	position: relative;
	z-index: 1;
}

.ehrm-card-illustration {
	position: absolute !important;
	right: -24px;
	bottom: -48px;
	width: 260px !important;
	height: 260px !important;
	pointer-events: none;
}

.ehrm-integration-card {
	position: relative;
	overflow: hidden;
	min-height: 600px;
}

.ehrm-integration-logos {
	align-items: center;
	justify-content: flex-end !important;
	gap: 48px !important;
	margin-top: auto;
	padding: 0 32px 120px 0 !important;
}

.ehrm-integration-logo {
	width: 200px !important;
	max-width: 40%;
	height: auto !important;
	object-fit: contain;
}

.ehrm-integration-logo:last-child {
	width: 178px !important;
}

.ehrm-integration-ninja {
	position: absolute !important;
	z-index: 2;
	left: 0;
	bottom: 0;
	width: 285px !important;
	height: auto !important;
	pointer-events: none;
}

@media (max-width: 767px) {
	.ehrm-perspective-card {
		min-height: 380px;
	}

	.ehrm-card-illustration {
		width: 180px !important;
		height: 180px !important;
	}

	.ehrm-integration-ninja {
		width: 160px !important;
	}

	.ehrm-integration-logos {
		justify-content: center !important;
		padding: 24px 0 180px !important;
	}

	.ehrm-integration-logo {
		width: 140px !important;
	}

	.ehrm-integration-logo:last-child {
		width: 120px !important;
	}
}

/* ==========================================================================
   Legal pages (privacy, terms, cookies, accessibility): readable text column.
   The Text Editor widget has the class "ehrm-legal".
   ========================================================================== */
.ehrm-legal {
	width: 100%;
	max-width: 860px;
	margin-inline: auto;
	color: #4b4b4b;
	font-size: 16px;
	line-height: 1.7;
}

.ehrm-legal :is(h1, h2, h3, h4, h5, h6) {
	margin: 2em 0 0.6em;
	color: #111;
	font-weight: 600;
	line-height: 1.3;
}

.ehrm-legal h2,
.ehrm-legal h5 {
	font-size: 24px;
}

.ehrm-legal h3,
.ehrm-legal h6 {
	font-size: 19px;
}

.ehrm-legal p,
.ehrm-legal ul,
.ehrm-legal ol {
	margin: 0 0 1em;
}

.ehrm-legal ul,
.ehrm-legal ol {
	padding-left: 1.4em;
}

.ehrm-legal li {
	margin-bottom: 0.35em;
}

.ehrm-legal a {
	color: #409744;
	text-decoration: underline;
}

.ehrm-legal table {
	width: 100%;
	margin: 0 0 1.5em;
	border-collapse: collapse;
	font-size: 14px;
}

.ehrm-legal th,
.ehrm-legal td {
	padding: 10px 12px;
	border-bottom: 1px solid #e5e5e5;
	text-align: left;
	vertical-align: top;
}

.ehrm-legal th {
	background: #eff4ef;
	color: #111;
	font-weight: 600;
}

/* Tables scroll sideways on phones instead of breaking the layout. */
@media (max-width: 767px) {
	.ehrm-legal {
		font-size: 15px;
	}

	.ehrm-legal table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}

/* ==========================================================================
   Copyright menu (Elementor "Nav Menu" widget with the class "ehrm-copyright-menu").
   Only the menu itself is styled here; the footer layout is done in Elementor.
   Result: "link · link · link" in small grey text.
   ========================================================================== */
.ehrm-copyright-menu .elementor-nav-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: 4px;
}

.ehrm-copyright-menu .elementor-nav-menu > li {
	display: flex;
	align-items: center;
}

/* Dot before every link (also between "© 2026 eHRM" and the first link). */
.ehrm-copyright-menu .elementor-nav-menu > li::before {
	content: "";
	flex: none;
	width: 3px;
	height: 3px;
	margin: 0 10px;
	border-radius: 50%;
	background: #717171;
}

.ehrm-copyright-menu .elementor-item {
	padding: 0 !important;
	color: #717171 !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 16px !important;
	letter-spacing: normal !important;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.ehrm-copyright-menu .elementor-item:hover,
.ehrm-copyright-menu .elementor-item.elementor-item-active {
	color: #409744 !important;
}

/* ==========================================================================
   Gradient glow (Figma "Vector_hero_moduli", exact SVG: wave shape, gradient, blur).
   Use: add an empty Container, give it the class "ehrm-glow" and position it
   with Elementor (Advanced → Position: Absolute + offsets, Z-index if needed).
   Optional tweaks in Custom CSS of that container, e.g.
     selector { --glow-w: 80vw; --glow-rotate: 20deg; --glow-opacity: .7; }
   Tip: use vw for the Elementor offsets too (e.g. Left -48vw) so the glow keeps its place on every screen.
   Put "ehrm-glow-clip" on the section around it so the glow never adds a horizontal scrollbar.
   ========================================================================== */
.ehrm-glow {
	/* Size follows the screen: 1622px at the 1440px design width (112.6vw),
	   never smaller than 700px so it stays soft on phones. Height follows the SVG. */
	--glow-w: max(700px, 112.6vw);
	--glow-rotate: 0deg;
	--glow-opacity: 1;

	position: absolute;
	z-index: 0;
	width: var(--glow-w) !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	aspect-ratio: 1622 / 825;
	padding: 0 !important;
	border: 0 !important;
	background: url("../img/glow-hero.svg") center / 100% 100% no-repeat !important;
	pointer-events: none;
	opacity: var(--glow-opacity);
	transform: rotate(var(--glow-rotate)) translateZ(0);  /* Own layer: drawn once, smooth scrolling. */
	backface-visibility: hidden;
}

/* Green only (same shape, green fading out). */
.ehrm-glow--green {
	background-image: url("../img/glow-green.svg") !important;
}

/* Flip it (mirror) e.g. for the right side of a section. */
.ehrm-glow--flip {
	transform: rotate(var(--glow-rotate)) scaleX(-1) translateZ(0);
}

/* Smaller on phones so it stays soft and light. */

/* Section around a glow: clip it so the page never scrolls sideways. */
.ehrm-glow-clip {
	position: relative;
	overflow: clip;
}

/* Content above the glow. */
.ehrm-glow-clip > :not(.ehrm-glow) {
	position: relative;
	z-index: 1;
}

/* In the Elementor editor: show a faint outline so the empty container can be selected. */
.elementor-editor-active .ehrm-glow {
	pointer-events: auto;
	outline: 1px dashed rgba(69, 178, 74, 0.5);
}

.ehrm-accordion .e-n-accordion > .e-n-accordion-item[open] > .e-n-accordion-item-title{
	border-radius: 12px 12px 0 0 !important;
}
.ehrm-accordion .e-n-accordion-item-title-icon{
	background-color: #EAEAEA !important;
	border-radius: 50px;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
}