/*==================================================================
	Atera Soft - custom components

	Site-specific blocks that are not part of the original template.
	(The slide caption fixes live in atera-slider.css, they are a
	self-contained override of the Revolution Slider layout.)

	Brand accent: #2198fe - the same blue the template uses for the
	"corporate" variant of its components.
==================================================================*/

:root {
	--atera-main-title-size: 50px;
	--atera-main-title-line: 1.15;
}

@media (min-width: 1600px) {
	:root {
		--atera-main-title-size: clamp(50px, 3vw, 64px);
	}
}

@media (max-width: 1366px) {
	:root {
		--atera-main-title-size: 40px;
	}
}

@media (max-width: 767px) {
	:root {
		--atera-main-title-size: 30px;
	}
}

.section-title h1,
.about-section .mission-section h2,
#aplikacije h1,
#cta h5:first-of-type {
	font-size: var(--atera-main-title-size) !important;
	line-height: var(--atera-main-title-line) !important;
	letter-spacing: 0 !important;
}

/*-- Section rhythm -------------------------------------------------

	The template gives every section 120px of padding top and bottom, so
	two neighbours leave a 240px band of empty page between them. Halved
	here, and the sections that carried their own figures (services 70,
	clients 60, the portfolio, the about/mission pair) are pulled onto
	the same value so every gap on the page matches.

	Specificity note: `.wrapper > section` outranks the single-class
	utilities the template puts on individual sections (.pb-0, .pb-70,
	.sm-pt-80...), so no !important is needed.
-------------------------------------------------------------------*/

.wrapper > section,
.wrapper > .dark-bg {
	padding-top: 60px;
	padding-bottom: 60px;
}

@media (max-width: 991px) {
	.wrapper > section,
	.wrapper > .dark-bg {
		padding-top: 45px;
		padding-bottom: 45px;
	}
}

@media (max-width: 767px) {
	.wrapper > section,
	.wrapper > .dark-bg {
		padding-top: 30px;
		padding-bottom: 30px;
	}
}

/* Novosti and Kontakt are the only two neighbours that share the same
   white background. Everywhere else a dark section falls inside the gap
   and cuts it in two, so 60 + 60 reads as two separate gaps; here it is
   one uninterrupted white band and looks twice as big as the rest.
   Halved so it matches the others optically. */
#blog {
	padding-bottom: 30px;
}

#contact {
	padding-top: 30px;
}

@media (max-width: 767px) {
	#blog {
		padding-bottom: 20px;
	}

	#contact {
		padding-top: 20px;
	}
}


/*-- About + Mission blocks -----------------------------------------

	The two split-screen blocks are a pair and stay flush against each
	other, but the pair as a whole needs air above and below so it does
	not run straight into the slider above or the testimonials below.
	Margin rather than padding: these blocks have their background image
	positioned to their own edges, so padding would just stretch the
	image instead of creating a gap.
-------------------------------------------------------------------*/

#about {
	margin-top: 60px;
}

#mission {
	margin-bottom: 60px;
}

@media (max-width: 991px) {
	#about {
		margin-top: 45px;
	}

	#mission {
		margin-bottom: 45px;
	}
}

@media (max-width: 767px) {
	#about {
		margin-top: 30px;
	}

	#mission {
		margin-bottom: 30px;
	}
}

/*-- Tekst o kompaniji i misiji: obostrano poravnat -------------------

	Justify izgleda uredno dok red ima dovoljno znakova. Ispod 768px je
	kolona preuska (oko 45 znakova po redu) pa justify pravi rupe između
	reči - tamo prelazi u centrirano. */
#about .mission-section p,
#mission .mission-section p {
	text-align: justify;
}

@media (max-width: 767px) {
	#mission .mission-lead-in {
		text-align: center;
	}
}


/*-- Mission block --------------------------------------------------

	The mission text sits on the brand blue half of the split-screen block,
	so the theme's skill bars have to invert: their default fill is the
	same #2198fe as the background and would be invisible on it.
-------------------------------------------------------------------*/

/* space between the mission statement and the line introducing the bars */
#mission .mission-lead-in {
	margin-top: 28px;
}

/* The theme reserves 65px above every bar for the absolutely positioned
   title. The first bar follows the lead-in line, so it needs less. */
#mission .mission-bars .skillbar {
	margin-top: 48px;
}

#mission .mission-bars .skillbar:first-child {
	margin-top: 42px;
}

#mission .mission-bars .skillbar:last-child {
	margin-bottom: 0;
}

/* inverted for the blue ground: white fill on a translucent track, white
   label, and a white badge with dark text */
#mission .mission-bars .skillbar {
	background-color: rgba(255, 255, 255, 0.25);
}

#mission .mission-bars .skillbar-bar {
	background: #fff;
}

#mission .mission-bars .skillbar-title {
	color: #fff;
}

#mission .mission-bars .skill-bar-percent {
	background: #fff;
	color: #1d2124;
}

#mission .mission-bars .skill-bar-percent::after {
	border-top-color: #fff;
}

/* "Pouzdano i bez komplikacija" is long and the 100% badge sits on the
   same line, so the title steps down on narrow columns to stay clear. */
@media (max-width: 480px) {
	#mission .mission-bars .skillbar-title {
		font-size: 13px;
	}
}

@media (max-width: 360px) {
	#mission .mission-bars .skillbar-title {
		font-size: 12px;
	}
}


/*-- Testimonials: lighter overlay ----------------------------------

	The theme's .dark-overlay-bg is rgba(0,0,0,0.9), which hides the photo
	behind it almost completely. Lowered so the office picture reads
	through, but not further: the quote is set in white at a very light
	weight (font-200), so it still needs a dark ground underneath.
-------------------------------------------------------------------*/

#testimonial .dark-overlay-bg {
	background: rgba(0, 0, 0, 0.75);
}


/*-- Contact section ------------------------------------------------

	Rebuilt to the agreed design: details card on the left, form card on
	the right, both in the same bordered box style. Icons come from the
	et-line set the theme already loads.
-------------------------------------------------------------------*/

.contact-lead {
	margin: 18px 0 0;
	font-size: 18px;
	color: #1d2124;
}

.section-intro {
	max-width: 760px;
	margin: 18px auto 0;
	font-size: 17px;
	line-height: 1.8;
	color: #7d7d7d;
}

.contact-row {
	margin-top: 50px;
}

/* No frame around either column - only the horizontal rules that
   separate address / phone / email / company details remain. */

.contact-card {
	background: none;
	border: 0;
}

/* --- details --- */

.contact-card-row {
	display: flex;
	align-items: flex-start;
	padding: 26px 0;
	border-bottom: 1px solid #d9e0ea;
}

/* first row lines up with the form's first label, last row has no rule */
.contact-card-row:first-child {
	padding-top: 0;
}

.contact-card-row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.contact-card-icon {
	flex: none;
	width: 56px;
	height: 56px;
	margin-right: 22px;
	border: 1px solid #cfe4fd;
	border-radius: 8px;
	background: #f5f9ff;
	color: #2198fe;
	font-size: 26px;
	line-height: 54px;
	text-align: center;
}

.contact-card-body h4 {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 700;
	color: #1d2124;
	text-transform: none;
}

.contact-card-body p {
	margin: 0 0 4px;
	font-size: 15px;
	line-height: 1.6;
}

.contact-card-body p:last-child {
	margin-bottom: 0;
}

.contact-card-body a {
	color: #888;
}

.contact-card-body a:hover,
.contact-card-body a:focus {
	color: #2198fe;
}

.contact-card-link {
	display: inline-block;
	margin-top: 6px;
	color: #2198fe !important;
	font-size: 15px;
	font-weight: 600;
}

.contact-card-link i {
	margin-left: 4px;
	font-size: 13px;
}

/* --- form --- */

.contact-form-card {
	padding: 0;
}

.contact-form-card .form-group {
	margin-bottom: 22px;
}

.contact-form-card label {
	display: block;
	margin-bottom: 10px;
	font-size: 15px;
	font-weight: 400;
	color: #1d2124;
}

.contact-form-card .input-with-icon {
	position: relative;
}

.contact-form-card .input-with-icon i {
	position: absolute;
	top: 16px;
	left: 16px;
	color: #8b96a5;
	font-size: 20px;
	pointer-events: none;
}

.contact-form-card input,
.contact-form-card textarea {
	width: 100%;
	padding: 14px 18px 14px 50px;
	border: 1px solid #cfd7e3;
	background: #fff;
	color: #1d2124;
	font-size: 15px;
	line-height: 1.5;
	transition: border-color .2s, box-shadow .2s;
}

.contact-form-card textarea {
	min-height: 150px;
	resize: vertical;
}

.contact-form-card input::placeholder,
.contact-form-card textarea::placeholder {
	color: #9aa3b0;
}

.contact-form-card input:focus,
.contact-form-card textarea:focus {
	outline: none;
	border-color: #2198fe;
	box-shadow: 0 0 0 3px rgba(33, 152, 254, 0.12);
}

.contact-form-card .help-block.with-errors {
	margin: 6px 0 0;
	color: #d9534f;
	font-size: 13px;
}

.contact-submit {
	display: block;
	width: 100%;
	padding: 17px 20px;
	border: 0;
	background: #2198fe;
	color: #fff;
	font-family: 'Raleway', sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	transition: background .2s;
}

.contact-submit:hover,
.contact-submit:focus {
	background: #0d84e8;
	color: #fff;
	outline: none;
}

.contact-submit i {
	margin-left: 8px;
	vertical-align: middle;
}

/* --- reassurance line under both cards --- */

.contact-note {
	margin: 30px 0 0;
	font-size: 15px;
	text-align: center;
}

.contact-note i {
	margin-right: 8px;
	color: #2198fe;
	font-size: 18px;
	vertical-align: -2px;
}

/* --- layout --- */

@media (min-width: 992px) {
	.contact-row {
		display: flex;
	}

	.contact-row > [class*="col-"] {
		float: none;
	}

	/* without the frames the two columns would sit almost against each
	   other, so the form gets extra breathing room on its left */
	.contact-col-form {
		padding-left: 55px;
	}
}

@media (max-width: 991px) {
	.contact-col-form {
		margin-top: 30px;
	}
}

@media (max-width: 480px) {
	.contact-card-row {
		padding: 22px 0;
	}

	.contact-card-icon {
		width: 46px;
		height: 46px;
		margin-right: 16px;
		font-size: 22px;
		line-height: 44px;
	}
}


/*-- Services --------------------------------------------------------

	The template floats .feature-box left, and a float with no width
	shrinks to fit its content. Each of the six boxes therefore ended up
	as wide as its own longest line, so "right aligned" meant a different
	right edge for every box - the icons and text looked scattered rather
	than aligned to a column. Full width fixes the edges.

	The min-height then keeps the pairs on either side of the phone level
	with each other, whatever length the descriptions are.
-------------------------------------------------------------------*/

#service .feature-box {
	float: none;
	width: 100%;
	min-height: 168px;
	margin-bottom: 40px;
}

#service .feature-box:last-child {
	min-height: 0;
	margin-bottom: 0;
}

/* the icon sits on its own line, flush with the edge the text aligns to */
#service .feature-box i {
	display: block;
	margin-bottom: 16px;
	font-size: 38px;
	line-height: 1;
}

#service .feature-box h3 {
	margin-bottom: 10px;
	font-size: 20px;
	line-height: 1.3;
}

#service .feature-box p {
	max-width: 330px;
	margin-bottom: 0;
	line-height: 1.7;
}

/* keep that max-width hugging the side the block is aligned to */
#service .feature-box.text-right p {
	margin-left: auto;
}

#service .feature-box.text-left p {
	margin-right: auto;
}

@media (min-width: 992px) {
	#service > .container > .row.mt-50 {
		display: flex;
		align-items: flex-start;
	}

	#service > .container > .row.mt-50 > .col-md-4 {
		float: none;
	}

	#service > .container > .row.mt-50 > .col-md-4:first-child,
	#service > .container > .row.mt-50 > .col-md-4:last-child {
		width: 28%;
	}

	#service > .container > .row.mt-50 > .col-md-4:nth-child(2) {
		width: 44%;
	}
}

.service-phone-preview {
	max-width: 100%;
	margin: 0 auto;
	text-align: center;
}

.service-phone-shell {
	position: relative;
	display: inline-block;
	width: 100%;
	max-width: 360px;
	vertical-align: top;
}

.service-phone-frame {
	position: relative;
	z-index: 1;
	width: 100%;
	height: auto;
}

.service-phone-screen {
	position: absolute;
	top: 5%;
	right: 19.3%;
	bottom: 6.9%;
	left: 18.9%;
	z-index: 2;
	overflow: hidden;
	border-radius: 34px;
	background: #1d2124;
	box-shadow: 0 -2px 0 #1d2124, inset 0 0 0 1px rgba(0, 0, 0, 0.08);
	--service-phone-preview-width: 390px;
	--service-phone-preview-height: 844px;
	--service-phone-preview-scale: 1;
	--service-phone-safe-top: 0px;
}

.service-phone-shell::after {
	content: "";
	position: absolute;
	top: 6.4%;
	left: 50%;
	z-index: 3;
	width: 18%;
	height: 3.1%;
	border-radius: 999px;
	background: #030303;
	transform: translateX(-50%);
	box-shadow: inset -10px 0 12px rgba(255, 255, 255, 0.08);
}

.service-phone-preview-frame {
	position: absolute;
	z-index: 1;
	top: calc(var(--service-phone-safe-top) - 2px);
	left: 0;
	display: block;
	width: var(--service-phone-preview-width);
	height: calc(var(--service-phone-preview-height) + 2px);
	max-width: none;
	max-height: none;
	border: 0;
	background: #fff;
	transform: scale(var(--service-phone-preview-scale));
	transform-origin: top left;
}

.service-phone-screen::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	height: calc(var(--service-phone-safe-top) + 2px);
	background: #1d2124;
	pointer-events: none;
}

html.phone-preview-mode #loader-overlay,
html.phone-preview-mode #return-to-top,
html.phone-preview-mode .service-phone-column {
	display: none !important;
}

html.phone-preview-mode nav.navbar.bootsnav .navbar-header > .logo img {
	max-height: 42px !important;
}

html.phone-preview-mode nav.navbar.bootsnav {
	background: #1d2124 !important;
	border: 0 !important;
	box-shadow: none !important;
}

@media (max-width: 767px) {
	nav.navbar.bootsnav .navbar-header > .logo img {
		max-height: 46px;
	}

	html.phone-preview-mode nav.navbar.bootsnav .navbar-header > .logo img {
		max-height: 39px !important;
	}
}

html.phone-preview-mode,
html.phone-preview-mode body {
	height: auto;
	min-height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

html.phone-preview-mode .wrapper {
	height: auto;
	min-height: 100%;
	overflow: visible;
}

html.phone-preview-mode::-webkit-scrollbar,
html.phone-preview-mode body::-webkit-scrollbar {
	width: 0;
	height: 0;
}

@media (max-width: 991px) {
	#service .feature-box {
		min-height: 0;
		margin-bottom: 45px;
	}
}

/* Na tabletu se kolone slažu jedna ispod druge, pa desno poravnat tekst
   nema smisla - čita se levo. Na telefonu je sve centrirano, što je
   podešeno u bloku za male ekrane na vrhu fajla. */
@media (min-width: 768px) and (max-width: 991px) {
	#service .feature-box.text-right {
		text-align: left;
	}

	#service .feature-box.text-right p {
		margin-left: 0;
		margin-right: auto;
	}
}


/*-- Header: side-panel hamburger and search ------------------------

	.attr-nav holds exactly two things, the trigger for the slide-out side
	panel and the search button, and both are switched off:

	 - the hamburger appeared next to the full menu, which already carries
	   every link, so it was redundant there; between 992 and 1024px it was
	   worse still, sitting right beside the collapsed menu's own toggle,
	   so the header showed two hamburgers at once
	 - search is hidden for now, on every width

	The markup stays in place (side panel, search overlay), so either can
	be brought back by dropping this rule.
-------------------------------------------------------------------*/

.attr-nav {
	display: none !important;
}

.language-switcher .language-toggle {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	font-family: 'Raleway', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space: nowrap;
}

.language-switcher .language-toggle i {
	color: #2198fe;
	font-size: 18px;
	line-height: 1;
	text-shadow: 0 0 12px rgba(33, 152, 254, 0.35);
	transform: translateY(1px);
}

.language-switcher .language-code {
	color: inherit;
	font-weight: 700;
	letter-spacing: inherit;
}

.language-switcher .language-code.is-current {
	color: #2198fe;
}

.language-switcher .language-divider {
	color: rgba(255, 255, 255, 0.45);
	font-weight: 400;
}

nav.navbar.bootsnav ul.nav > li.language-switcher > a {
	padding-left: 12px;
	padding-right: 0;
}

@media (max-width: 991px) {
	nav.navbar.bootsnav ul.nav > li.language-switcher > a {
		padding-left: 15px;
		padding-right: 15px;
	}

	.language-switcher .language-toggle {
		justify-content: flex-start;
	}
}


/*-- Floating WhatsApp / Instagram ----------------------------------

	Bottom left, because the template's back-to-top button already sits
	bottom right. WhatsApp opens a small list first - there are two
	numbers, so it cannot link straight through.
-------------------------------------------------------------------*/

.floating-contact {
	position: fixed;
	right: 22px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 999;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: opacity .25s, visibility .25s;
}

/* skriva se kad footer uđe u vidno polje (postavlja skripta u index.html) */
.floating-contact.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.floating-item {
	position: relative;
}

.floating-btn {
	display: block;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: #fff;
	font-size: 26px;
	line-height: 52px;
	text-align: center;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
	transition: transform .2s, box-shadow .2s;
}

.floating-btn:hover,
.floating-btn:focus {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 7px 18px rgba(0, 0, 0, 0.28);
	outline: none;
}

.floating-whatsapp {
	background: #25d366;
}

.floating-instagram {
	background: linear-gradient(45deg, #f09433 0%, #dc2743 45%, #bc1888 100%);
}

/* the number picker */

/* opens beside the button, not above or below it - either of those would
   cover the Instagram button sitting next to it in the stack */
.floating-numbers {
	position: absolute;
	right: 64px;
	top: 50%;
	transform: translateY(-50%);
	min-width: 220px;
	padding: 16px 18px;
	background: #fff;
	border: 1px solid #e6e9ee;
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.floating-numbers-title {
	display: block;
	margin-bottom: 10px;
	color: #8b96a5;
	font-size: 12px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* no font-family here on purpose: the numbers inherit the same stack as
   the rest of the page's text, so they cannot end up in a different
   typeface (neither Raleway nor Open Sans is actually loaded, so the two
   stacks can resolve to different system fonts) */
.floating-numbers a {
	display: block;
	padding: 7px 0;
	color: #1d2124;
	font-size: 16px;
	font-weight: 700;
}

.floating-numbers a:hover,
.floating-numbers a:focus {
	color: #25d366;
}

#return-to-top {
	background: #2198fe;
}

#return-to-top:hover {
	background: #0d84e8;
}

/*-- Footer contact -------------------------------------------------*/

.footer-copyright {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 24px 0 34px;
	background-color: #1d2124;
	background-image: none;
}

.footer-copyright::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: radial-gradient(circle at 50% 110%, rgba(33, 152, 254, 0.035), transparent 32%);
	pointer-events: none;
}

.footer-copyright::after {
	display: none;
}

.footer-copyright > .container {
	position: relative;
	z-index: 1;
	width: min(1320px, calc(100% - 48px));
	max-width: 1320px;
}

.footer-copyright .footer-logo img {
	width: clamp(145px, 10vw, 180px);
	height: auto;
	filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.28));
}

.footer-copyright .copy-right {
	margin-top: 8px;
	color: #c2c9d5;
	font-size: 13px;
	line-height: 1.5;
}

.footer-contact-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	max-width: 980px;
	margin: 19px auto 0;
	padding: 0;
	list-style: none;
}

.footer-contact-list li {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	min-height: 80px;
	min-width: 0;
	margin: 0;
	padding: 0 20px;
	text-align: center;
}

.footer-contact-list li + li::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 1px;
	background: linear-gradient(180deg, transparent, rgba(126, 162, 204, 0.24), transparent);
}

.footer-contact-list a {
	display: block;
	color: inherit;
}

.footer-contact-list a:hover,
.footer-contact-list a:focus {
	color: #fff;
}

.footer-contact-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 9px;
	color: #168dff;
	line-height: 1;
}

.footer-contact-icon i {
	font-size: 23px;
	line-height: 1;
}

.footer-contact-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
}

.footer-contact-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.25px;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
}

.footer-contact-head::after {
	content: "";
	display: block;
	width: 28px;
	height: 2px;
	margin: 7px auto 0;
	background: #2198fe;
	border-radius: 999px;
	box-shadow: 0 0 10px rgba(33, 152, 254, 0.48);
}

.footer-contact-values {
	display: block;
	margin-top: 8px;
	color: #c8cfdb;
	font-size: 12px;
	line-height: 1.35;
}

.footer-contact-values > span {
	display: block;
}

.footer-copyright ul.social-media.corporate {
	position: relative;
	display: flex !important;
	float: none;
	justify-content: center;
	gap: 16px;
	margin: 22px 0 0 !important;
	padding: 0;
}

.footer-copyright ul.social-media.corporate::before {
	content: "";
	position: absolute;
	top: -14px;
	left: 50%;
	width: min(1080px, 88vw);
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(126, 162, 204, 0.22), transparent);
	transform: translateX(-50%);
}

.footer-copyright ul.social-media.corporate li {
	margin: 0;
}

.footer-copyright ul.social-media.corporate li a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 2px solid rgba(255, 255, 255, 0.86);
	border-radius: 50%;
	color: #fff;
	font-size: 15px;
	line-height: 1;
	transition: border-color .2s, color .2s, transform .2s, box-shadow .2s;
}

.footer-copyright ul.social-media.corporate li a:hover,
.footer-copyright ul.social-media.corporate li a:focus {
	border-color: #2198fe;
	color: #2198fe;
	transform: translateY(-2px);
	box-shadow: 0 0 24px rgba(33, 152, 254, 0.2);
}

@media (min-width: 768px) and (max-width: 1199px) {
	.footer-copyright {
		padding: 24px 0 36px;
	}

	.footer-copyright .footer-logo img {
		width: clamp(140px, 19vw, 170px);
	}

	.footer-contact-list {
		grid-template-columns: repeat(2, minmax(240px, 1fr));
		max-width: 640px;
		margin-top: 18px;
	}

	.footer-contact-list li {
		min-height: 88px;
		padding: 11px 24px;
	}

	.footer-contact-list li + li::before {
		display: none;
	}

	.footer-contact-list li:nth-child(even)::before {
		content: "";
		position: absolute;
		top: 14px;
		bottom: 14px;
		left: 0;
		display: block;
		width: 1px;
		background: linear-gradient(180deg, transparent, rgba(126, 162, 204, 0.24), transparent);
	}

	.footer-contact-list li:nth-child(n+3)::after {
		content: "";
		position: absolute;
		top: 0;
		left: 22px;
		right: 22px;
		height: 1px;
		background: linear-gradient(90deg, transparent, rgba(126, 162, 204, 0.2), transparent);
	}

	.footer-copyright ul.social-media.corporate {
		margin-top: 20px !important;
	}

	.footer-copyright ul.social-media.corporate::before {
		display: none;
	}
}

@media (max-width: 767px) {
	.footer-copyright {
		padding: 24px 0 52px;
	}

	.footer-copyright > .container {
		width: calc(100% - 28px);
	}

	.footer-copyright::after {
		height: 70px;
		background-size: auto 100%;
		opacity: 0.34;
	}

	.footer-copyright .footer-logo img {
		width: min(50vw, 155px);
	}

	.footer-copyright .copy-right {
		margin-top: 8px;
		font-size: 12px;
	}

	.footer-contact-list {
		grid-template-columns: 1fr;
		gap: 0;
		max-width: 360px;
		margin-top: 18px;
	}

	.footer-contact-list li {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 74px;
		padding: 12px 8px;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		text-align: center;
	}

	.footer-contact-list li + li::before {
		display: none;
	}

	.footer-contact-list li:nth-child(even)::before {
		display: none;
	}

	.footer-contact-list li:nth-child(n+2)::after {
		content: "";
		position: absolute;
		top: 0;
		left: 24px;
		right: 24px;
		display: block;
		height: 1px;
		background: linear-gradient(90deg, transparent, rgba(126, 162, 204, 0.2), transparent);
	}

	.footer-contact-icon {
		align-self: auto;
		margin: 0 0 7px;
		border-right: 0;
	}

	.footer-contact-icon i {
		font-size: clamp(21px, 5.8vw, 27px);
	}

	.footer-contact-body {
		align-items: center;
		padding-left: 0;
	}

	.footer-contact-head {
		align-items: center;
		font-size: clamp(10px, 2.9vw, 12px);
		letter-spacing: 0.2px;
	}

	.footer-contact-head::after {
		width: 24px;
		height: 2px;
		margin: 5px auto 0;
	}

	.footer-contact-values {
		margin-top: 5px;
		font-size: clamp(10px, 2.9vw, 12px);
		line-height: 1.35;
	}

	.footer-copyright ul.social-media.corporate {
		gap: 16px;
		margin-top: 18px !important;
	}

	.footer-copyright ul.social-media.corporate::before {
		display: none;
	}

	.footer-copyright ul.social-media.corporate li a {
		width: 32px;
		height: 32px;
		font-size: 15px;
	}
}

@media (max-width: 430px) {
	.footer-contact-list li {
		min-height: 72px;
		padding: 11px 6px;
	}

	.footer-contact-body {
		padding-left: 0;
	}

	.footer-contact-values {
		font-size: 10px;
	}
}

/* Na telefonu idu u donji levi ugao - desni je zauzet dugmetom za vrh,
   a na sredini desne ivice su prekrivali oznake na barovima u Misiji. */
@media (max-width: 767px) {
	.floating-contact {
		left: 14px;
		right: auto;
		top: auto;
		bottom: 16px;
		transform: none;
		flex-direction: column-reverse;
		gap: 10px;
	}

	.floating-numbers {
		left: 56px;
		right: auto;
		top: auto;
		bottom: 0;
		transform: none;
	}

	/* dugme za povratak na vrh je bilo 35px i tamno - lako se promaši */
	#return-to-top {
		width: 44px;
		height: 44px;
		right: 14px;
		bottom: 16px;
		background: #2198fe;
	}

	#return-to-top i {
		font-size: 18px;
		line-height: 45px;
	}

	#return-to-top:hover {
		background: #0d84e8;
	}

	.floating-btn {
		width: 46px;
		height: 46px;
		font-size: 23px;
		line-height: 46px;
	}

	.floating-numbers {
		min-width: 195px;
		padding: 13px 15px;
	}
}


/*-- Loader ---------------------------------------------------------

	The template's spinner dots are the old red accent; they take the
	brand blue instead. The ring around them stays grey.
-------------------------------------------------------------------*/

#loader-overlay .spinner-double-dot-in:before,
#loader-overlay .spinner-double-dot-in:after {
	background: #2198fe;
}


/*-- Portfolio tiles ------------------------------------------------

	Live projects use the whole tile as the anchor, while projects whose
	sites are offline stay as static tiles. Both variants keep the same
	visual treatment.
-------------------------------------------------------------------*/

#portfolio-gallery .portfolio {
	display: block;
	position: relative;
	overflow: hidden;
}

/* Even grid. The app and logo shots are 4:3 while the site mockups are
   1.4:1, and cubeportfolio takes each row's height from its content, so
   the tiles came out different heights side by side. Forcing one 4:3
   box makes every tile identical; the mockups lose about 2% off each
   side, which their flat grey surround hides. */
#portfolio-gallery .portfolio img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: #2e2e2e;
}

/* Visina pločice ispadne razlomljena (npr. 292.5px), a cubeportfolio
   redove pozicionira na cele piksele (0, 291, 582...) - između redova je
   zato ostajala bela linija. Negativna margina skrati kutiju pločice za
   2px, pa slika prelije preko šava i pokrije ga.

   Zato .cbp-item ovde NE sme da ima overflow: hidden - to bi odseklo
   upravo taj preliv. Susedna pločica se ionako iscrtava preko. */
#portfolio-gallery .portfolio {
	margin-bottom: -2px;
}

#portfolio-gallery .cbp-item {
	overflow: visible;
}

/* Nothing extra for #work here: the template's "pb-0" ran the grid edge
   to edge into the next section, which the section-rhythm block at the
   top of this file already overrides. */

/* Filter tabs on phones. Between 320 and 680px the template sets
   "padding: 20px 0 0 0" on them, which strips the side padding - the
   active tab's blue fill then hugs the letters with a tall empty band
   above, and with four tabs the row runs out of width. Real padding on
   all four sides, smaller type and vertical margins so the tabs can wrap
   into two tidy rows. */
@media (max-width: 680px) {
	#portfolio-gallery-filter .cbp-filter-item {
		padding: 7px 14px;
		margin: 4px 3px;
		font-size: 12px;
		line-height: 18px;
		border-radius: 3px;
	}
}


/* The slides carry company values now, not quotes: the value name sits
   above the sentence as an uppercase label, where the client name used
   to sit below it. */
/* weight comes from the theme's .font-700 utility on the element - it is
   declared !important there, so setting font-weight here would not win */
#testimonial .value-label {
	margin: 0;
	font-size: 20px;
	color: #2198fe !important;
}

/* Phones: smaller label, and the sentence under it steps down too - at
   24px it ran to five lines on a narrow screen. */
@media (max-width: 767px) {
	#testimonial .value-label {
		font-size: 16px;
	}

	#testimonial .testimonial-content h3 {
		font-size: 18px;
		line-height: 30px;
	}
}


/*==================================================================
	MALI EKRANI

	Sve prepravke za telefone i uske prozore na jednom mestu, da se ne
	traže po celom fajlu. Granice prate šablon: 991px je tačka na kojoj
	se dvokolonski blokovi slažu jedan ispod drugog, 767px je telefon.
==================================================================*/

/*-- O nama i Misija: prvo tekst, pa slika ---------------------------

	Šablon slaže sliku iznad teksta jer je u markup-u prva (na desktopu
	je apsolutno pozicionirana levo/desno). Na telefonu je prirodnije da
	se prvo pročita tekst, pa da se vidi slika - zato se blok pretvara u
	flex kolonu i redosled obrće.
-------------------------------------------------------------------*/

@media (max-width: 991px) {
	.about-section {
		display: flex;
		flex-direction: column;
	}

	.about-section > .container-fluid {
		order: 1;
	}

	.about-section > .bg-flex {
		order: 2;
		position: relative !important;
		width: 100%;
		height: auto;
		min-height: 0;
		margin: 0;
		padding: 0 0 69.8%;   /* odnos slike 1501:1048 - ništa se ne seče */
	}

	/* tekstualna kolona je na tabletu bila polovina sa pomakom; kad je
	   blok složen jedan ispod drugog treba joj cela širina */
	.about-section > .container-fluid > [class*="col-"] {
		width: 100%;
		margin-left: 0;
		left: auto;
		float: none;
	}

	.about-section .col-inner.spacer {
		padding: 55px 30px 60px;
	}
}

@media (max-width: 767px) {
	/* Naslov u jednom redu - šablon ima prelom (<br>) posle prve reči,
	   što na telefonu pravi dva reda od dve kratke reči. */
	.about-section .mission-section h2 br,
	#cta h5 br {
		display: none;
	}

	.about-section .mission-section h2 {
		font-size: 30px;
		line-height: 1.25;
	}

	/* na telefonu se učitava uža verzija slike */
	.about-section .about-photo {
		background-image: url(../images/bg-left-img-2-mobile.webp) !important;
	}

	.about-section .mission-photo {
		background-image: url(../images/bg-left-img-mobile.webp) !important;
	}

	.about-section .col-inner.spacer {
		padding: 45px 20px 50px;
	}
}

/*-- Naslovi na dve banner sekcije -----------------------------------

	"Aplikacije po vašoj meri" je na telefonu bio 40px, a "Od ideje do
	rešenja" čak 50px - taj drugi uopšte nije imao mobilnu vrednost, pa
	je zadržavao desktop veličinu.
-------------------------------------------------------------------*/

@media (max-width: 991px) {
	#aplikacije h1 {
		font-size: 34px !important;
		line-height: 44px !important;
	}

	#aplikacije h3 {
		font-size: 18px;
		line-height: 28px;
	}

	#cta h5:first-of-type {
		font-size: 32px;
		line-height: 42px;
	}

	#cta h5 + hr + h5 {
		font-size: 19px;
		line-height: 28px;
	}
}

@media (max-width: 767px) {
	#aplikacije h1 {
		font-size: 27px !important;
		line-height: 35px !important;
	}

	#aplikacije h3 {
		font-size: 16px;
		line-height: 25px;
	}

	#cta h5:first-of-type {
		font-size: 25px;
		line-height: 33px;
	}

	#cta h5 + hr + h5 {
		font-size: 16px;
		line-height: 24px;
		margin-bottom: 22px;
	}
}

/*-- Brojači: broj je na telefonu bio 60px --------------------------*/

@media (max-width: 991px) {
	.counter-wrap h2 {
		font-size: 44px;
		line-height: 52px;
	}

	.counter-wrap h3 {
		font-size: 14px;
		line-height: 20px;
	}
}

@media (max-width: 767px) {
	.counter-wrap h2 {
		font-size: 36px;
		line-height: 42px;
	}

	.counter-wrap h3 {
		font-size: 13px;
		line-height: 18px;
		letter-spacing: 0.5px;
	}

	.counter-wrap {
		margin-bottom: 26px;
	}
}

/*-- Usluge: na telefonu sve centrirano ------------------------------*/

@media (max-width: 767px) {
	#service .service-phone-column {
		margin-top: 28px !important;
	}

	#service .service-phone-preview {
		padding-top: 0 !important;
	}

	#service .feature-box,
	#service .feature-box.text-right,
	#service .feature-box.text-left {
		text-align: center;
	}

	#service .feature-box p {
		margin-left: auto;
		margin-right: auto;
	}
}

/*-- Kontakt na telefonu: sve centrirano -----------------------------*/

@media (max-width: 767px) {
	.contact-card-row {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 24px 0;
	}

	.contact-card-icon {
		margin: 0 0 14px;
	}
}

/*-- Footer ----------------------------------------------------------

	Lebdeća dugmad stoje pri dnu ekrana i preklapala su donji red footera
	kad se doskroluje do kraja; dodatni razmak ispod ih skloni sa puta.
-------------------------------------------------------------------*/

@media (max-width: 991px) {
	.footer .footer-copyright {
		padding-bottom: 36px;
	}
}

@media (max-width: 767px) {
	.footer .footer-copyright {
		padding-bottom: 52px;
	}
}

/*-- Dugmad u bloku "O nama" -----------------------------------------

	Bila su dva inline-block dugmeta različitih širina; na uskom ekranu
	su se prelomila u stepenik. Sada su pune širine, jedno ispod drugog.
-------------------------------------------------------------------*/

@media (max-width: 767px) {
	.about-section .mission-section .btn {
		display: block;
		width: 100%;
		margin: 0 0 12px;
		text-align: center;
	}

	.about-section .mission-section .btn:last-child {
		margin-bottom: 0;
	}
}


/*-- Telefon u landscape položaju ------------------------------------

	Kad se telefon okrene, širina je 700-950px pa se gornja pravila za
	"male ekrane" ne primenjuju iako je i dalje telefon. Prepoznaje se po
	niskom prozoru (do 500px visine), ne po širini.

	Tu ima dovoljno širine da blokovi "O nama" i "Misija" opet stanu u
	jedan red, pa se slaganje jedno ispod drugog poništava.
-------------------------------------------------------------------*/

@media (max-width: 991px) and (max-height: 500px) {
	.about-section {
		display: block;
	}

	.about-section > .bg-flex {
		position: absolute !important;
		width: 50%;
		height: 100%;
		padding: 0;
	}

	.about-section > .container-fluid > [class*="col-"] {
		width: 50%;
		float: left;
	}

	#about .container-fluid > [class*="col-"] {
		margin-left: 50%;
	}

	.about-section .col-inner.spacer {
		padding: 45px 35px;
	}

	#about .mission-section p,
	#mission .mission-section p {
		text-align: justify;
	}

	#service .feature-box,
	#service .feature-box.text-right,
	#service .feature-box.text-left {
		text-align: center;
	}

	#service .feature-box p {
		margin-left: auto;
		margin-right: auto;
	}

	/* lebdeća dugmad idu dole, kao na telefonu u portretu - na sredini
	   desne ivice bi u niskom prozoru pala preko sadržaja */
	.floating-contact {
		left: 14px;
		right: auto;
		top: auto;
		bottom: 14px;
		transform: none;
		flex-direction: row;
		gap: 10px;
	}

	.floating-btn {
		width: 42px;
		height: 42px;
		font-size: 21px;
		line-height: 42px;
	}

	.floating-numbers {
		left: 0;
		right: auto;
		top: auto;
		bottom: 52px;
		transform: none;
	}

	#return-to-top {
		right: 14px;
		bottom: 14px;
	}
}

/* Keep this after the responsive section-specific rules so every main
   heading uses the same scale. */
.section-title h1,
.about-section .mission-section h2,
#aplikacije h1,
#cta h5:first-of-type {
	font-size: var(--atera-main-title-size) !important;
	line-height: var(--atera-main-title-line) !important;
	letter-spacing: 0 !important;
}

/*-- Srednji ekrani --------------------------------------------------

	Mobile portrait i veliki desktop su dobri; problematičan je opseg
	između njih: landscape telefoni, tableti i manji laptopi. Tu se split
	layout lako sabije, pa se sekcije ponašaju bliže mobilnoj verziji:
	tekst je punom širinom, naslovi su mirniji, a slike se prikazuju kao
	samostalni media blokovi umesto da seku polovinu ekrana.
-------------------------------------------------------------------*/

@media (min-width: 768px) and (max-width: 1366px) {
	.wrapper > section,
	.wrapper > .dark-bg {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	#about {
		margin-top: 40px;
	}

	#mission {
		margin-bottom: 40px;
	}

	.section-title {
		margin-bottom: 22px;
	}

	.section-title h1 {
		font-size: clamp(32px, 4vw, 44px);
		line-height: 1.15;
		letter-spacing: 0;
	}

	.about-section {
		display: flex;
		flex-direction: column;
	}

	.about-section > .container-fluid {
		order: 1;
	}

	.about-section > .bg-flex {
		order: 2;
		position: relative !important;
		width: 100%;
		height: clamp(300px, 42vw, 540px);
		min-height: 0;
		margin: 0;
		padding: 0;
	}

	.about-section > .bg-flex .bg-flex-holder {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		min-height: 0;
		background-size: contain;
		background-position: center center;
	}

	#about .about-photo {
		background-color: #eef3f8;
	}

	#mission .mission-photo {
		background-color: #2198fe;
	}

	#about .container-fluid > [class*="col-"],
	#mission .container-fluid > [class*="col-"],
	.about-section > .container-fluid > [class*="col-"] {
		width: 100%;
		margin-left: 0;
		left: auto;
		float: none;
	}

	.about-section .col-inner.spacer {
		padding: 42px clamp(28px, 6vw, 72px) 48px;
	}

	.about-section .mission-section {
		max-width: 920px;
		margin: 0 auto;
		text-align: center;
	}

	.about-section .mission-section h2 br,
	#cta h5 br {
		display: none;
	}

	.about-section .mission-section h2 {
		font-size: clamp(30px, 4vw, 42px);
		line-height: 1.15;
	}

	.about-section .mission-section hr.left-line {
		margin-left: auto;
		margin-right: auto;
	}

	#about .mission-section p,
	#mission .mission-section p,
	#mission .mission-lead-in {
		max-width: 860px;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	#mission .mission-bars {
		max-width: 760px;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
	}

	.contact-row {
		display: block;
	}

	.contact-row > [class*="col-"] {
		width: 100%;
		float: none;
	}

	.contact-col-form {
		margin-top: 30px;
		padding-left: 15px;
	}

	.contact-card-row {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 24px 0;
	}

	.contact-card-icon {
		margin: 0 0 14px;
	}

	#service .feature-box,
	#service .feature-box.text-right,
	#service .feature-box.text-left {
		text-align: center;
	}

	#service .feature-box p {
		margin-left: auto;
		margin-right: auto;
	}

	#service > .container > .row.mt-50 {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
		gap: 0 36px;
		max-width: 1040px;
		margin-left: auto;
		margin-right: auto;
	}

	#service > .container > .row.mt-50 > .col-md-4 {
		float: none;
	}

	#service > .container > .row.mt-50 > .col-md-4:first-child {
		order: 1;
		width: calc(50% - 18px);
		max-width: 430px;
	}

	#service > .container > .row.mt-50 > .col-md-4:last-child {
		order: 2;
		width: calc(50% - 18px);
		max-width: 430px;
	}

	#service > .container > .row.mt-50 > .col-md-4:nth-child(2) {
		order: 3;
		width: 100%;
		max-width: 390px;
		margin: 6px auto 0;
	}

	#service .feature-box {
		min-height: 0;
		margin-bottom: 30px;
	}

	#service .feature-box:last-child {
		margin-bottom: 0;
	}

	#service .service-phone-preview {
		padding-top: 0 !important;
	}

	#service .service-phone-shell {
		max-width: 330px;
	}
}

@media (min-width: 768px) and (max-width: 860px) {
	#service > .container > .row.mt-50 {
		gap: 28px 0;
	}

	#service > .container > .row.mt-50 > .col-md-4:first-child,
	#service > .container > .row.mt-50 > .col-md-4:last-child {
		width: 100%;
		max-width: 540px;
	}
}

@media (max-width: 1366px) and (max-height: 500px) {
	.wrapper > section,
	.wrapper > .dark-bg {
		padding-top: 28px;
		padding-bottom: 28px;
	}

	#about {
		margin-top: 28px;
	}

	#mission {
		margin-bottom: 28px;
	}

	.about-section {
		display: flex;
		flex-direction: column;
	}

	.about-section > .container-fluid {
		order: 1;
	}

	.about-section > .bg-flex {
		order: 2;
		position: relative !important;
		width: 100%;
		height: 230px;
		min-height: 0;
		margin: 0;
		padding: 0;
	}

	.about-section > .bg-flex .bg-flex-holder {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		min-height: 0;
		background-size: contain;
		background-position: center center;
	}

	#about .about-photo {
		background-color: #eef3f8;
	}

	#mission .mission-photo {
		background-color: #2198fe;
	}

	#about .container-fluid > [class*="col-"],
	#mission .container-fluid > [class*="col-"],
	.about-section > .container-fluid > [class*="col-"] {
		width: 100%;
		margin-left: 0;
		left: auto;
		float: none;
	}

	.about-section .col-inner.spacer {
		padding: 28px 34px 32px;
	}

	.about-section .mission-section {
		max-width: 760px;
		margin: 0 auto;
		text-align: center;
	}

	.about-section .mission-section h2 br,
	#cta h5 br {
		display: none;
	}

	.about-section .mission-section h2 {
		font-size: 28px;
		line-height: 1.15;
	}

	.about-section .mission-section hr.left-line {
		margin: 14px auto 16px;
	}

	#about .mission-section p,
	#mission .mission-section p,
	#mission .mission-lead-in {
		max-width: 720px;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		font-size: 13px;
		line-height: 1.7;
	}

	#mission .mission-lead-in {
		margin-top: 16px;
	}

	#mission .mission-bars {
		max-width: 680px;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
	}

	#mission .mission-bars .skillbar {
		margin-top: 36px;
	}

	#mission .mission-bars .skillbar:first-child {
		margin-top: 30px;
	}

	.about-section .mission-section .btn {
		padding: 9px 16px;
		font-size: 12px;
		line-height: 20px;
		margin: 0 4px 8px;
	}

	.contact-card-row {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 22px 0;
	}

	.contact-card-icon {
		margin: 0 0 14px;
	}

	/* lebdeca dugmad idu dole, kao na telefonu u portretu - na sredini
	   desne ivice bi u niskom prozoru pala preko sadrzaja */
	.floating-contact {
		left: 14px;
		right: auto;
		top: auto;
		bottom: 14px;
		transform: none;
		flex-direction: row;
		gap: 10px;
	}

	.floating-btn {
		width: 42px;
		height: 42px;
		font-size: 21px;
		line-height: 42px;
	}

	.floating-numbers {
		left: 0;
		right: auto;
		top: auto;
		bottom: 52px;
		transform: none;
	}

	#return-to-top {
		right: 14px;
		bottom: 14px;
	}
}