/* Premium visual layer based on the GTP redesign */

:root {
	--premium-ink: #17212b;
	--premium-muted: #5f6f7d;
	--premium-paper: #ffffff;
	--premium-soft: #f3f7fa;
	--premium-line: rgba(23, 33, 43, .12);
	--premium-blue: #155e75;
	--premium-cyan: #23a6b7;
	--premium-green: #16865a;
	--premium-shadow: 0 18px 44px rgba(13, 28, 39, .14);
}

body {
	background:
		linear-gradient(180deg, #eaf3f7 0, #f7fafc 360px),
		#f7fafc;
	color: var(--premium-ink);
	padding-left: 28px;
	padding-right: 28px;
}

.tm-container {
	max-width: 1360px;
	padding: 22px 28px 34px;
	border-radius: 0 0 18px 18px;
	box-shadow: 0 26px 70px rgba(13, 28, 39, .16);
	overflow: hidden;
}

.navbar-container {
	left: 28px;
	right: 28px;
	width: auto;
	margin: 0 auto;
	padding: 20px 24px;
	background: rgba(21, 94, 117, .96);
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: 14px;
	box-shadow: var(--premium-shadow);
	backdrop-filter: blur(12px);
}

.navbar-container.sticky {
	background: rgba(21, 94, 117, .96);
	border-radius: 0 0 14px 14px;
	padding: 12px 24px;
}

.navbar-container > .btn.p100 {
	border: 0;
	background: var(--premium-green);
	border-radius: 999px;
	font-weight: 700;
	box-shadow: 0 12px 24px rgba(22, 134, 90, .28);
}

.navbar-nav .nav-link,
.navbar-nav .nav-link:focus {
	border-radius: 999px;
	font-weight: 600;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
	background-color: rgba(255, 255, 255, .16);
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}

.navbar-toggler {
	border-radius: 10px;
	background: rgba(255, 255, 255, .14);
	color: #fff;
}

.tm-page-content {
	margin-top: 100px;
}

.tm-section {
	position: relative;
	min-height: 650px;
	margin-bottom: 28px;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: var(--premium-shadow);
	isolation: isolate;
}

.tm-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(5, 20, 30, .18), rgba(5, 20, 30, .02));
	z-index: -1;
}

.tm-white-curve-left,
.tm-white-curve-right {
	margin-top: 0;
	margin-bottom: 0;
}

.tm-white-curve-left-rec,
.tm-white-curve-left-circle,
.tm-white-curve-right-rec,
.tm-white-curve-right-circle {
	background: rgba(255, 255, 255, .96);
}

.tm-white-curve-text,
.tm-home-right {
	color: var(--premium-ink);
}

.tm-white-curve-text {
	padding: 42px;
}

.tm-home-right {
	padding: 82px 56px;
	color: #fff;
	text-shadow: 0 1px 18px rgba(0, 0, 0, .32);
}

.tm-home-right .tm-section-header,
.tm-home-right .thin-font,
.tm-home-right .tm-section-text {
	color: #fff;
}

.tm-section-header {
	font-weight: 700;
	letter-spacing: 0;
}

.blue-text,
.red-text,
.gray-text {
	color: var(--premium-blue);
}

.thin-font,
.tm-section-text {
	color: var(--premium-muted);
}

.tm-img {
	max-height: 430px;
	object-fit: contain;
	filter: drop-shadow(0 18px 30px rgba(13, 28, 39, .22));
	transition: transform .2s ease, filter .2s ease;
}

.tm-section:hover .tm-img {
	transform: translateY(-4px);
	filter: drop-shadow(0 24px 38px rgba(13, 28, 39, .28));
}

.btn-success,
.btn-success:hover,
.btn-success:focus {
	background: var(--premium-green);
	border-color: var(--premium-green);
}

.btn.p100 {
	border-radius: 999px;
	font-weight: 700;
	box-shadow: 0 12px 24px rgba(22, 134, 90, .22);
}

.tm-white-curve-text .btn.p100 + br {
	display: block;
	content: "";
	margin-bottom: 14px;
}

.module-actions {
	margin-bottom: 16px;
}

.tm-footer {
	min-height: 160px;
	border-radius: 18px;
	box-shadow: var(--premium-shadow);
}

.tm-footer .btn.p100 {
	min-width: 230px;
	padding: 14px 22px;
}

@media screen and (min-width: 992px) {
	.navbar-container {
		max-width: 1304px;
	}

	.navbar-nav .nav-link,
	.navbar-nav .nav-link:focus {
		padding: 0.55em 0.72em;
	}
}

@media screen and (max-width: 991px) {
	body {
		padding-left: 16px;
		padding-right: 16px;
	}

	.tm-container {
		padding: 14px;
	}

	.navbar-container {
		left: 16px;
		right: 16px;
		padding: 14px;
		border-radius: 12px;
	}

	.navbar {
		background: rgba(21, 94, 117, .98);
		border-radius: 12px;
		box-shadow: var(--premium-shadow);
	}

	.tm-page-content {
		margin-top: 92px;
	}

	.tm-section {
		border-radius: 14px;
		margin-bottom: 18px;
	}

	.tm-home-right {
		padding: 42px 28px;
		background: rgba(21, 94, 117, .82);
	}

	.tm-white-curve-text {
		padding: 34px 28px;
	}
}

@media screen and (min-width: 801px) and (max-width: 991px) {
	body {
		min-width: 0;
		padding-left: 0;
		padding-right: 0;
	}

	.tm-container {
		width: 1280px;
		max-width: none;
		margin-left: auto;
		margin-right: auto;
		zoom: .76;
		transform: translateX(-8px);
		padding: 22px 28px 34px;
	}

	.navbar-container {
		left: 20px;
		right: 28px;
		width: 1224px;
		transform: none;
		padding: 20px 24px;
	}

	.tm-page-content {
		margin-top: 100px;
	}

	.tm-section {
		display: flex !important;
		flex-direction: row !important;
		align-items: stretch !important;
		min-height: 650px;
		height: 650px !important;
		margin-bottom: 28px;
	}

	#tm-section-1 {
		min-height: 760px;
		height: 760px !important;
	}

	#tm-section-2,
	#tm-section-3,
	#tm-section-4,
	#tm-section-5 {
		display: flex !important;
		flex-direction: row !important;
		justify-content: initial !important;
	}

	.tm-section .col-lg-7 {
		width: 58.333333% !important;
	}

	.tm-section .col-lg-5 {
		width: 41.666667% !important;
	}

	.tm-section .col-xl-6 {
		width: 50% !important;
	}

	.tm-home-right {
		padding: 82px 56px;
	}

	#tm-section-1 .tm-home-right {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.tm-white-curve-text {
		padding: 42px;
	}

	.tm-white-curve-left-rec,
	.tm-white-curve-right-rec {
		width: 300px !important;
	}

	.tm-white-curve-left-circle,
	.tm-white-curve-right-circle {
		width: 520px !important;
	}

	.tm-white-curve-left-circle {
		right: 0 !important;
	}

	.tm-white-curve-right-circle {
		left: 0 !important;
	}

	.tm-img {
		padding: 15px !important;
		max-height: 430px;
	}

	.module-actions {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 6px;
		align-items: center;
		justify-content: flex-start;
		margin-bottom: 10px;
	}

	.module-actions .btn.p100 {
		flex: 0 0 auto;
		margin: 0 !important;
		padding: 7px 12px;
		font-size: 0.82rem;
		white-space: nowrap;
	}
}

@media screen and (max-width: 800px) {
	body {
		padding-left: 0;
		padding-right: 0;
	}

	.tm-container {
		border-radius: 0;
		padding: 10px;
	}

	.navbar-container {
		left: 10px;
		right: 10px;
		width: auto;
	}

	.tm-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 0 !important;
		height: auto !important;
		margin-left: auto;
		margin-right: auto;
		padding: 18px 10px 24px;
		text-align: center;
	}

	.tm-white-curve-left,
	.tm-white-curve-right,
	.tm-flex-center,
	.tm-home-right {
		width: 100%;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		float: none;
		text-align: center;
	}

	.tm-section > [class*="col-"] {
		display: block;
		width: 100%;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		float: none;
		text-align: center;
	}

	.tm-white-curve-left-rec,
	.tm-white-curve-left-circle,
	.tm-white-curve-right-rec,
	.tm-white-curve-right-circle {
		display: none;
	}

	.tm-white-curve-text {
		width: 100%;
		max-width: 680px;
		margin-left: auto;
		margin-right: auto;
		background: rgba(255, 255, 255, .97);
		border-radius: 14px;
		box-shadow: 0 12px 26px rgba(13, 28, 39, .12);
		text-align: center;
	}

	.tm-flex-center {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 6px 0 4px;
		width: 100%;
		max-width: 100%;
	}

	.tm-home-right {
		text-align: center;
	}

	.tm-white-curve-text .thin-font,
	.tm-home-right .thin-font,
	.tm-section-header {
		text-align: center;
	}

	.tm-img {
		display: block;
		width: min(96vw, 560px);
		max-width: 100%;
		max-height: none;
		margin-left: auto;
		margin-right: auto;
		padding: 0;
	}

	#tm-section-2 .btn.p100,
	#tm-section-4 .btn.p100 {
		display: block !important;
		width: min(100%, 430px);
		margin: 8px auto !important;
		float: none !important;
		text-align: center !important;
	}

	.module-actions {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		max-width: 430px;
		margin: 0 auto 18px;
		text-align: center;
		padding: 0;
	}

	.module-actions .btn.p100 {
		display: block !important;
		width: 100% !important;
		margin: 8px auto !important;
		float: none !important;
		clear: both;
	}

	#tm-section-1 .tm-white-curve-left > .tm-white-curve-text {
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: center !important;
	}

	#tm-section-1 .tm-white-curve-left {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	#tm-section-1 .tm-white-curve-left > .tm-white-curve-text {
		width: calc(100% - 32px) !important;
		max-width: 520px !important;
	}

	#tm-section-2 .tm-white-curve-right,
	#tm-section-3 .tm-white-curve-left,
	#tm-section-4 .tm-white-curve-right,
	#tm-section-5 .tm-white-curve-left {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	#tm-section-2 .tm-white-curve-right > .tm-white-curve-text,
	#tm-section-3 .tm-white-curve-left > .tm-white-curve-text,
	#tm-section-4 .tm-white-curve-right > .tm-white-curve-text,
	#tm-section-5 .tm-white-curve-left > .tm-white-curve-text {
		width: calc(100% - 32px) !important;
		max-width: 520px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: center !important;
	}

	#tm-section-1 .tm-white-curve-text .thin-font,
	#tm-section-2 .tm-white-curve-text .thin-font,
	#tm-section-3 .tm-white-curve-text .thin-font,
	#tm-section-4 .tm-white-curve-text .thin-font,
	#tm-section-5 .tm-white-curve-text .thin-font {
		text-align: left !important;
	}

	#tm-section-1 .tm-home-right {
		text-align: left !important;
	}

	#tm-section-1 .tm-home-right .tm-section-text {
		text-align: center !important;
	}

	#tm-section-2 .tm-white-curve-text,
	#tm-section-4 .tm-white-curve-text,
	#tm-section-2 .tm-white-curve-text center,
	#tm-section-4 .tm-white-curve-text center {
		text-align: center !important;
	}

	#tm-section-2.tm-section .tm-white-curve-right > .tm-white-curve-text,
	#tm-section-4.tm-section .tm-white-curve-right > .tm-white-curve-text {
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 18px !important;
		padding-right: 18px !important;
	}

	#tm-section-2 .module-actions,
	#tm-section-4 .module-actions {
		position: relative;
		left: 50%;
		width: min(100%, 430px);
		max-width: 430px;
		margin-left: 0 !important;
		margin-right: 0 !important;
		transform: translateX(-50%);
	}
}

@media screen and (max-width: 550px) {
	.tm-page-content {
		margin-top: 90px;
	}

	.navbar-container > .btn.p100 {
		max-width: calc(100% - 52px);
		padding: 10px 14px;
	}

	.tm-white-curve-text,
	.tm-home-right {
		padding: 24px 18px;
	}

	.tm-section-header {
		font-size: 1.25rem;
	}

	.tm-img {
		width: min(98vw, 520px);
		max-width: 100%;
		max-height: none;
	}

	.thin-font,
	.tm-home-right {
		font-size: .92rem;
		line-height: 1.5;
	}

	.tm-footer .btn.p100 {
		min-width: 0;
		width: 100%;
	}
}
.tm-white-curve-left-rec,
.tm-white-curve-left-circle,
.tm-white-curve-right-rec,
.tm-white-curve-right-circle {
	background: #fff;
}
/* Desktop menu fix: the 8 nav links did not fit inside .tm-container (max-width 1360px)
   and overflow:hidden clipped them. Was: .nav-item font-size 1.45em (=21px) + 0.72em
   padding -> the menu needed 1254px while only ~994px was available, so the last links
   ("Drugi platformi", "Telemarketing") were cut off. Now the size is fluid, so the menu
   fits on ONE row at every desktop width without being clipped. */
@media screen and (min-width: 992px) {
	.nav-item {
		font-size: clamp(11px, calc(1.5vw - 4px), 17px);
	}

	.navbar-nav .nav-link,
	.navbar-nav .nav-link:focus {
		padding: 0.5em 0.45em;
		white-space: nowrap;
	}
}
/* ===== Sticky header: no resize / no jump on scroll =====
   templatemo-style.css scales .navbar-container responsively:
     >1400px: 1em | <=1400px: 0.82em | <=1199px: 0.6em
   but .navbar-container.sticky hard-codes font-size:0.6em at EVERY width, so the moment you
   scrolled past 180px the whole bar (phone button, brand, menu) shrank to 60%. It also used
   position:fixed + left:0/right:0, stretching it to the full viewport width instead of the
   page container. Below we mirror the normal font at each breakpoint and reproduce the
   in-flow width, so the bar only gets PINNED - nothing resizes.
     in-flow width = container - 78px  (container padding 28*2 + bootstrap col padding ~11*2)
     container     = min(viewport - 56px, 1360px)   (28px page margin per side, capped 1360) */
@media screen and (min-width: 992px) {
	.navbar-container.sticky {
		width: calc(min(100% - 56px, 1360px) - 78px);
		max-width: none;
		margin-left: auto;
		margin-right: auto;
		padding: 20px 24px;
		border-radius: 0 0 14px 14px;
	}
}

/* The sticky font must equal the non-sticky font at the same width. */
@media screen and (min-width: 1401px) {
	.navbar-container.sticky { font-size: 1em; }
}

@media screen and (min-width: 1200px) and (max-width: 1400px) {
	.navbar-container.sticky { font-size: 0.82em; }
}

/* <=1199px the non-sticky header is already 0.6em, so the sticky 0.6em matches it - leave it. */

@media screen and (max-width: 991px) {
	.navbar-container.sticky {
		left: 3px;
		right: 3px;
		width: auto;
		max-width: none;
		margin: 0;
		padding: 14px;
		border-radius: 0 0 14px 14px;
	}
}
/* Hero banner at the top of the page (image already contains title / how-it-works / phone).
   Sits inside .tm-page-content which has margin-top:180px, so it clears the floating header. */
.hero-banner { margin: 0 auto 24px; text-align: center; }
.hero-banner img {
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
	border-radius: 16px;
	box-shadow: 0 18px 50px -18px rgba(13, 28, 39, .5);
}
@media screen and (max-width: 991px) {
	.hero-banner { margin-bottom: 16px; }
	.hero-banner img { border-radius: 12px; }
}