/* =================================================================== */
/* 
/*  Puremedia v1.0 Main Stylesheet
/*  url:styleshout.com
/*  10-10-2014
/*
/*  -----------------------------------------
------------------------- 

    TOC: 
    a. Webfonts and Iconfonts
    b. Document Setup
    c. Forms  
    d. Preloader
    e. Buttons
    f. Other Components
    g. Header Styles
    h. Content Styles
    i. Footer Styles
    j. Common and shared styles
    k. Hero Section
    l. Portfolio Section
    m. Services Section
    n. About Section
    o. Journal Section
    p. Contact Section
    q. Blog Entry
    r. Portfolio Entry

/* =================================================================== */

/* 
/* a. Webfonts and Iconfonts
/* =================================================================== */
@import url("fonts.css");
@import url("font-awesome/css/font-awesome.min.css");
@import url("simple-line-icons/simple-line-icons.css");

/* 
/* b. Document Setup
/* =================================================================== */

/* Body
---------------------------------------------------------------------- */
body {
	background: #0e1015;
	font: 15px/30px "merriweather-regular", serif;
	font-weight: normal;
	color: #0a72da;
}

/* Links
---------------------------------------------------------------------- */
a, a:visited {
	color: #f26522;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
a:hover, a:focus {
	color: black;
}

/* Typography
--------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	font-family: "raleway-bold", sans-serif;
	color: #252525;
	font-style: normal;
	text-rendering: optimizeLegibility;
	margin: 18px 0 15px;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	font-weight: inherit;
}
h1 {
	font-size: 30px;
	line-height: 36px;
	margin-top: 0;
	letter-spacing: -1px;
}
h2 {
	font-size: 24px;
	line-height: 30px;
}
h3 {
	font-size: 20px;
	line-height: 30px;
}
h4 {
	font-size: 17px;
	line-height: 30px;
}
h5 {
	font-size: 14px;
	line-height: 30px;
	margin-top: 15px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
h6 {
	font-size: 13px;
	line-height: 30px;
	margin-top: 15px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
p {
	margin: 15px 0 15px 0;
}
p img {
	margin: 0;
}
p.lead {
	font: 17px/33px "merriweather-light", serif;
	color: #0083c5;
}
em {
	font: 15px/30px "merriweather-italic", serif;
	font-style: normal;
}
strong, b {
	font: 15px/30px "merriweather-bold", serif;
	font-weight: normal;
}
small {
	font-size: 11px;
	line-height: inherit;
}
blockquote {
	margin: 18px 0px;
	padding-left: 40px;
	position: relative;
}
blockquote:before {
	content: "\201C";
	opacity: 0.45;
	font-size: 80px;
	line-height: 0px;
	margin: 0;
	font-family: arial, sans-serif;
	position: absolute;
	top: 30px;
	left: 0;
}
blockquote p {
	font-family: georgia, serif;
	font-style: italic;
	padding: 0;
	font-size: 18px;
	line-height: 30px;
}
blockquote cite {
	display: block;
	font-size: 12px;
	font-style: normal;
	line-height: 18px;
}
blockquote cite:before {
	content: "\2014 \0020";
}
blockquote cite a, blockquote cite a:visited {
	color: #00aaff;
	border: none;
}
abbr {
	font-family: "merriweather-bold", serif;
	font-variant: small-caps;
	text-transform: lowercase;
	letter-spacing: .5px;
	color: #003db6;
}
pre, code {
	font-family: Consolas, "Andale Mono", Courier, "Courier New", monospace;
}
pre {
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
}
code {
	padding: 3px;
	background: #ecf0f1;
	color: #009ceb;
	border-radius: 3px;
}
del {
	text-decoration: line-through;
}
abbr[title], dfn[title] {
	border-bottom: 1px dotted;
	cursor: help;
}
mark {
	background: #FFF49B;
	color: #000;
}
hr {
	border: solid white;
	border-width: 1px 0 0;
	clear: both;
	margin: 23px 0 12px;
	height: 0;
}

/* Lists
--------------------------------------------------------------------- */
ul, ol {
	margin-top: 15px;
	margin-bottom: 15px;
}
ul {
	list-style: disc;
	margin-left: 17px;
}
dl {
	margin: 0 0 15px 0;
}
dt {
	margin: 0;
	color: #f26522;
}
dd {
	margin: 0 0 0 20px;
}

/* Floated Image
--------------------------------------------------------------------- */
img.pull-right {
	margin: 12px 0px 0px 18px;
}
img.pull-left {
	margin: 12px 18px 0px 0px;
}

/* 
/* c. Forms
/* =================================================================== */
form {
	margin-bottom: 24px;
}
fieldset {
	margin: 0 0 24px 0;
	padding: 0;
	border: none;
}
input, button {
	-webkit-font-smoothing: antialiased;
}
input[type="text"], 
input[type="password"], 
input[type="email"], 
textarea, 
select {
	display: block;
	padding: 12px 15px;
	margin: 0 0 12px 0;
	border: 0;
	outline: none;
	color: #a3a4a6;
	font-family: "raleway-regular", sans-serif;
	font-size: 14px;
	line-height: 24px;
	border-radius: 3px;
	max-width: 100%;
	background: transparent;
	border: 3px solid #a9aaab;
}
textarea {
	min-height: 162px;
}
input[type="text"]:focus, 
input[type="password"]:focus, 
input[type="email"]:focus, 
textarea:focus {
	background: white;
}
label, legend {
	font: 15px/30px "raleway-bold", sans-serif;
	margin: 12px 0;
	color: #252525;
	display: block;
}
label span, legend span {
	color: #575859;
	font: 15px/30px "merriweather-bold", serif;
}
input[type="checkbox"], input[type="radio"] {
	font-size: 15px;
	color: #006dda;
}
input[type="checkbox"] {
	display: inline;
}

/* 
/* d. Preloader
/* =================================================================== */
#preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #12151b;
	z-index: 99999;
	height: 100%;
}
.no-js #preloader {
	display: none;
}

#status {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	padding: 0;
}
#status img {
	display: none;
}

.loader {
	margin: 0 auto;
	font-size: 10px;
	position: relative;
	text-indent: -9999em;
	border-top: 1.1em solid rgba(255, 255, 255, 0.2);
	border-right: 1.1em solid rgba(255, 255, 255, 0.2);
	border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
	border-left: 1.1em solid #f26522;
	-webkit-animation: load 1.1s infinite linear;
	animation: load 1.1s infinite linear;
}
.loader, .loader:after {
	border-radius: 50%;
	width: 60px;
	height: 60px;
}
@-webkit-keyframes load {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes load {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/* for ie8 */
.ie8 #status img {
	display: block;
}
.ie8 .loader {
	display: none;
}


/* 
/* e. Buttons
/* =================================================================== */
.button, 
.button:visited, 
button, 
input[type="submit"], 
input[type="reset"], 
input[type="button"] {
	display: inline-block;
	font: 15px/30px "raleway-bold", sans-serif;
	padding: 9px 16px;
	margin: 0 3px 6px 0;
	background: #818fab;
	color: white;
	text-decoration: none;
	cursor: pointer;
	height: auto;
	text-align: center;
	border: none;
	border-radius: 3px;
	-webkit-appearance: none;
	appearance: none;
	-webkit-font-smoothing: inherit;	
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.button:hover, 
button:hover, 
input[type="submit"]:hover, 
input[type="reset"]:hover, 
input[type="button"]:hover {
	background: #647495;
	color: white;
}
.button.primary, button.primary {
	background: #f26522;
}
.button.primary:hover, button.primary:hover {
	background: #e3520d;
}
button.medium, .button.medium {
	font: 15px/30px "raleway-bold", sans-serif;
	padding: 12px 18px !important;
}
button.large, .button.large {
	font: 15px/30px "raleway-bold", sans-serif;
	padding: 15px 20px !important;
}
button.round, .button.round {
	padding-left: 20px !important;
	padding-right: 20px !important;
	border-radius: 1000px;
	background-clip: padding-box;
}
button.stroke, .button.stroke {
	background: transparent !important;
	border: 3px solid transparent;
}
button.full-width, .button.full-width {
	width: 100%;
	margin-right: 0;
}

.button.pink {
	background: #ffadcb;
}
.button.pink:hover {
	background: #ff94bb;
}
.button.blue {
	background: #72bbf0;
}
.button.blue:hover {
	background: #5bb0ee;
}
.button.black {
	background: #2e3236;
}
.button.black:hover {
	background: #222528;
}
.button.yellow {
	background: #ffd900;
}
.button.yellow:hover {
	background: #f0cc00;
}
.button.red {
	background: #ff6163;
}
.button.red:hover {
	background: #ff474a;
}
.button.green {
	background: #9bc724;
}
.button.green:hover {
	background: #8ab120;
}
.button.grey {
	background: #8d8e91;
}
.button.grey:hover {
	background: #808184;
}
.button.purple {
	background: #b482c9;
}
.button.purple:hover {
	background: #a970c1;
}
.button.orange {
	background: #f5731c;
}
.button.orange:hover {
	background-color: #ed650a;
}
.button.stroke.pink {
	border-color: #ffadcb;
	color: #ffadcb;
}
.button.stroke.pink:hover {
	background: #ffadcb !important;
	color: #fff;
}
.button.stroke.blue {
	border-color: #72bbf0;
	color: #72bbf0;
}
.button.stroke.blue:hover {
	background: #72bbf0 !important;
	color: #fff;
}
.button.stroke.black {
	border-color: #2e3236;
	color: #2e3236;
}
.button.stroke.black:hover {
	background: #2e3236 !important;
	color: #fff;
}
.button.stroke.yellow {
	border-color: #ffd900;
	color: #ffd900;
}
.button.stroke.yellow:hover {
	background: #ffd900 !important;
	color: #fff;
}
.button.stroke.red {
	border-color: #ff6163;
	color: #ff6163;
}
.button.stroke.red:hover {
	background: #ff6163 !important;
	color: #fff;
}
.button.stroke.green {
	border-color: #9bc724;
	color: #9bc724;
}
.button.stroke.green:hover {
	background: #9bc724 !important;
	color: #fff;
}
.button.stroke.grey {
	border-color: #8d8e91;
	color: #8d8e91;
}
.button.stroke.grey:hover {
	background: #8d8e91 !important;
	color: #fff;
}
.button.stroke.purple {
	border-color: #b482c9;
	color: #b482c9;
}
.button.stroke.purple:hover {
	background: #b482c9 !important;
	color: #fff;
}
.button.stroke.orange {
	border-color: #f5731c;
	color: #f5731c;
}
.button.stroke.orange:hover {
	background: #f5731c !important;
	color: #fff;
}
button::-moz-focus-inner, input::-moz-focus-inner {
	border: 0;
	padding: 0;
}


/* 
/* f. Other Components
/* ================================================================== */

/* Alert Boxes
/* ------------------------------------------------------------------ */
.alert-box {
	padding: 21px 40px 21px 30px;
	position: relative;
	margin-bottom: 24px;
	border-radius: 3px;
	background-clip: padding-box;
	font-family: "raleway-semibold", sans-serif;
}
.error {
	background-color: #ffd1d2;
	color: #e65153;
}
.success {
	background-color: #c8e675;
	color: #758c36;
}
.info {
	background-color: #d7ecfb;
	color: #4a95cc;
}
.notice {
	background-color: #fff099;
	color: #c16527;
}
.close {
	position: absolute;
	right: 18px;
	top: 18px;
	cursor: pointer;
}

/* Drop Cap
/* ------------------------------------------------------------------ */
.drop-cap:first-letter {
	float: left;
	margin: 0;
	padding: 14px 6px 0 0;
	font-size: 84px;
	font-family: "raleway-bold", sans-serif;
	line-height: 60px;
	text-indent: 0;
	background: transparent;
	color: inherit;
}

/* Line Definition Style Markup
/* ------------------------------------------------------------------ */
.lining dt, .lining dd {
	display: inline;
	margin: 0;
}
.lining dt + dt:before, .lining dd + dt:before {
	content: "\A";
	white-space: pre;
}
.lining dd + dd:before {
	content: ", ";
}
.lining dd + dd:before {
	content: ", ";
}
.lining dd:before {
	content: ":";
	margin-left: -0.2em;
}

/* Dictionary Definition Style Markup
/* ------------------------------------------------------------------ */
.dictionary-style dt {
	display: inline;
	counter-reset: definitions;
}
.dictionary-style dt + dt:before {
	content: ", ";
	margin-left: -0.2em;
}
.dictionary-style dd {
	display: block;
	counter-increment: definitions;
}
.dictionary-style dd:before {
	content: counter(definitions, decimal) ". ";
}

/* 
/*  Pull Quotes Markup
/*

<aside class="pull-quote">
<blockquote>
<p></p>
</blockquote>
</aside>

/*
/* --------------------------------------------------------------------- */
.pull-quote {
	position: relative;
	padding: 18px 30px 18px 0px;
}
.pull-quote:before, .pull-quote:after {
	height: 1em;
	opacity: 0.45;
	position: absolute;
	font-size: 80px;
	font-family: Arial, Sans-Serif;
}
.pull-quote:before {
	content: "\201C";
	top: 33px;
	left: 0;
}
.pull-quote:after {
	content: '\201D';
	bottom: -33px;
	right: 0;
}
.pull-quote blockquote {
	margin: 0;
}
.pull-quote blockquote:before {
	content: none;
}

/* 
/*  Stats Tab Markup

<ul class="stats-tabs">
<li><a href="#">[value]<em>[name]</em></a></li>
</ul>


/*
/* --------------------------------------------------------------------- */
.stats-tabs {
	padding: 0;
	margin: 24px 0;
}
.stats-tabs li {
	display: inline-block;
	margin: 0 10px 18px 0;
	padding: 0 10px 0 0;
	border-right: 1px solid #ccc;
}
.stats-tabs li:last-child {
	margin: 0;
	padding: 0;
	border: none;
}
.stats-tabs li a {
	display: inline-block;
	font-size: 24px;
	font-family: "raleway-bold", sans-serif;
	border: none;
	color: #252525;
}
.stats-tabs li a:hover {
	color: #f26522;
}
.stats-tabs li a em {
	display: block;
	margin: 6px 0 0 0;
	font-size: 14px;
	font-family: "raleway-regular", sans-serif;
	color: #7d7e80;
}

/* Pagination
/* ------------------------------------------------------------------ */
.pagination {
	margin: 30px auto;
	text-align: center;
}
.pagination ul li {
	display: inline-block;
	margin: 0;
	padding: 0;
}
.pagination .page-numbers {
	font: 15px/24px "raleway-bold", sans-serif;
	display: inline-block;
	padding: 6px 12px;
	height: 36px;
	margin-right: 3px;
	margin-bottom: 6px;
	color: #707273;
	background-color: #dde4e6;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	border-radius: 3px;
	background-clip: padding-box;
}
.pagination .page-numbers:hover {
	background: #94aab0;
	color: white;
}
.pagination .current, .pagination .current:hover {
	background-color: #f26522;
	color: white;
}
.pagination .inactive, .pagination .inactive:hover {
	background-color: #ecf0f1;
	color: #a3a4a6;
}

/* 
/* g. Header Styles
/* =================================================================== */
header {
    height: 122

    padding-top:p 4x;
	width: 100%;
	position: fixed;
	left: 0;
	top: ;
	z-index: 990;
	text-align: center;
	background: #12151B;
	background: rgba(18, 21, 27, 0.5);
	-moz-transition: background 0.5s ease-in-out;
	-o-transition: background 0.5s ease-in-out;
	-webkit-transition: background 0.5s ease-in-out;
	-ms-transition: background 0.5s ease-in-out;
	transition: background 0.5s ease-in-out;
}
header .logo {
	display: inline-block;
	vertical-align: middle;
	margin: 22;
	padding: 22;
	margin-right: 15px;

	/* add position relative since z-index only applies to
	elements that have been given an explicit position */
	position: relative;
	z-index: 992;
}
header .logo a {
	display: block;
	margin: 0 20px 0 0;
	padding: 0;
	border: none;
	outline: none;
	font: 0/0 a;
	text-shadow: none;
	color: transparent;
	width: 124px;
	height: 68px;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-image: url("../images/logo.png");
}
@media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi) {
	header .logo a {
		background-image: url("../images/logo-@2x.png");
		-webkit-background-size: 124px 68px;
		-moz-background-size:  124px 68px;
		background-size:  124px 68px;
	}
}
.opaque {
	background: #12151b;
}

/* primary navigation
--------------------------------------------------------------------- */
#nav-wrap, #nav-wrap ul, #nav-wrap li, #nav-wrap a {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}

#nav a {
    color: #f7d400;
}
#nav a:hover {
    color: #ffffff;
}



/* nav-wrap */
#nav-wrap {
	font: 11px "raleway-heavy", sans-serif;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	display: inline-block;
}

/* hide toggle button */
#nav-wrap > a {
	display: none;
}
ul#nav {
	min-height: 72px;
	width: auto; 

	/* left align the menu */
	text-align: left;
}
ul#nav li {
	position: relative;
	list-style: none;
	height: 72px;
	display: inline-block;
}
ul#nav li a {
	display: inline-block;
	padding: 17px 12px;
	line-height: 38px;
	text-decoration: none;
	color: #c0cdd1;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
ul#nav li a:hover {
	color: white;
}
ul#nav li a:active {
	background-color: transparent !important;
}
ul#nav li.current a {
	background: #f26522;
	color: white;
}


/* 
/* h. Content Styles
/* =================================================================== */

#content {
	background: white;
	padding-top: 66px;
	padding-bottom: 102px;
}
#content #main {
	padding-top: 6px;
}
#content #sidebar {
	padding-top: 12px;
	padding-left: 30px;
}


/* sibebar styles
-------------------------------------------------------------------- */
#sidebar h5 {
	font: 14px/24px "raleway-heavy", sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-top: 0;
}
#sidebar .widget {
	margin-bottom: 15px;
}

/* search */
#sidebar .widget_search {
	padding-top: 0;
	margin-bottom: 24px;
}
#sidebar .widget_search h5 {
	display: none;
}
#sidebar .widget_search form {
	position: relative;
	margin: 0;
}
#sidebar .widget_search .text-search {
	padding-right: 40px;
	width: 100%;
	min-width: 150px;
	border-radius: 3px;
	background: white;
}
#sidebar .widget_search .submit-search {
	display: none;
}

/* link list */
#sidebar .widget_categories ul {
	margin-top: 15px;
	margin-bottom: 18px;
}
#sidebar .link-list {
	padding: 0;
	margin: 15px 10px 24px 0;
	list-style: none;
}
#sidebar .link-list li {
	font: 14px/24px "merriweather-regular", sans-serif;
	padding: 8px 0 8px 3px;
	margin: 0;
}
#sidebar .link-list li a {
	color: #7d7e80;
}
#sidebar .link-list li a:hover {
	color: #f26522;
}

/* tag cloud */
#sidebar .tagcloud {
	margin: 18px 0 24px -12px;
	padding: 0;
	font-size: 17px;
}
#sidebar .tagcloud a {
	font: 12px/24px "raleway-heavy", sans-serif !important;
	float: left;
	margin: 0 0 12px 12px;
	padding: 6px 15px;
	position: relative;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-radius: 3px;
	background: #ecf0f1;
	text-decoration: none;
	letter-spacing: .5px;
	color: #707273;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
#sidebar .tagcloud a:hover {
	color: white;
	background: #f26522;
}

/* photostream */
#sidebar .photostream {
	list-style: none;
	margin: 15px 0 24px -15px;
	padding: 0;
	overflow: hidden;
}
#sidebar .photostream li {
	display: inline-block;
	margin: 0 0 12px 12px;
	padding: 0;
}
#sidebar .photostream li a {
	display: block;
	height: 66px;
	width: 66px;
	background: #fff;
	padding: 9px;
	border: 1px solid #e3e9eb;
	border-radius: 3px;
}
#sidebar .photostream li a img {
	vertical-align: bottom;
}


/* 
/* i. Footer Styles
/* =================================================================== */
footer {
	padding-top: 11px;
	padding-bottom: 2px;
	font-size: 25px;
	line-height: 24px;
	position: relative;
	color: #00d5ff;	
}
footer a, footer a:visited {
	color: #a43b0a;
}
footer a:hover, footer a:focus {
	color: white;
}
footer h3 {
	font: 13px/24px "raleway-bold", sans-serif;
	margin-bottom: 0;
	color: white;
	text-transform: uppercase;
	letter-spacing: 1px;
}
footer p {
	margin: 12px 0;
}

footer .footer-about {
	padding-right: 60px;
}
footer .right-cols .columns {
	width: 50%;
	word-wrap: break-word;
}
footer ul {
	margin: 12px 0;
	padding: 0;
	list-style: none;
}
footer ul li {
	margin: 0;
	padding-left: 0;
	line-height: 24px;
}
footer ul li a, footer ul li a:visited {
	color: #3C4142;
}
footer .copyright {
	margin: 0;
	padding: 24px 18px 6px 18px;
	clear: both;
}

/* back to top */
footer #go-top {
	position: fixed;
	bottom: 0;
	right: 30px;
	z-index: 900;
	display: none;
}
footer #go-top a {
	display: block;
	padding: 12px 30px;
	background: #d44d0d;
	color: white;
	text-align: center;
	font: 12px/24px "raleway-heavy", sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
footer #go-top a span {
	margin-right: 10px;
}
footer #go-top a:hover {
	background: #faec09;
	color: #252525;
}


/* 
/* j. Common and shared styles
/* =================================================================== */

hr {
	border: solid #f26522;
	border-width: 3px 0 0;
	width: 90px;
	margin: 11px auto 15px;
	height: 0;
	clear: both;
	text-align: center;
}

/* section head
---------------------------------------------------------------------- */
.section-head {
	text-align: center;
}
.section-head h1 {
	font: 15px/24px "raleway-heavy", sans-serif;
	text-transform: uppercase;
	letter-spacing: 2.5px;
	color: #252525;
	margin-bottom: 18px;
}
.section-head h1 span {
	color: #f26522;
}
.section-head p {
	font: 18px/36px "merriweather-light", sans-serif;
	width: 95%;
	color: #707273;
	margin-left: auto;
	margin-right: auto;
}

/* page title
---------------------------------------------------------------------- */
#page-title {
	background: #12151b url(../images/tlo.png) no-repeat center center fixed;
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	background-size: cover !important;
	padding-top: 108px;
	padding-bottom: 60px;
	text-align: center;
}
#page-title .row {
	max-width: 724px;
}
#page-title h1 {
	font: 54px/1.3 "raleway-bold", sans-serif;
	color: white;
	letter-spacing: -1px;
	margin-bottom: 0;
	text-shadow: 0 0px 5px rgba(0, 0, 0, 0.5);	
}
#page-title h1 span {
	color: #f26522;
}
#page-title p {
	color: #cfd9db;
	margin: 0;
	text-shadow: 0 0px 5px rgba(0, 0, 0, 0.5);
}

/* entry
---------------------------------------------------------------------- */
.entry {
	padding-bottom: 12px;
	margin-bottom: 24px;
}
.entry header {
	height: auto;
	position: static;
	background: transparent;
	text-align: left;
}
.entry header h1 {	
	font: 30px/36px "raleway-bold", sans-serif;
	margin-bottom: 6px;
}
.entry header h1 a {
	color: #252525;
}
.entry .entry-meta ul {
	margin: 0 0 6px 3px;
	color: #8f9091;
	line-height: 24px;
}
.entry .entry-meta ul li {
	display: inline;
	margin: 0;
	padding: 0;
	font-size: 11px;
	letter-spacing: 1px;
	font-family: "raleway-regular", sans-serif;
	text-transform: uppercase;
}
.entry .entry-meta ul li a {
	color: #8f9091;
}
.entry .entry-meta ul .meta-sep {
	margin: 0 5px;
	color: #c0cdd1;
}
.entry .entry-content-media {
	margin: 24px 0 18px;
}

/* pagenav
---------------------------------------------------------------------- */
.pagenav {
	margin: 18px 0 6px;
	padding: 12px 0 0 0;
	font: 15px/30px "raleway-regular", sans-serif;
}
.pagenav a {
	font: 0/0 a;
	text-shadow: none;
	color: transparent;
}
.pagenav a[rel="next"]:after, 
.pagenav a[rel="prev"]:before {
	float: left;
	text-align: center;
	background: transparent;
	color: #f26522;
	border-radius: 3px;
	border: 3px solid #f26522;
	font-family: 'FontAwesome';
	font-size: 16px;
	padding: 21px 15px;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.pagenav a[rel="next"]:after {
	content: "\f054";
}
.pagenav a[rel="prev"]:before {
	content: "\f053";
	margin-right: 6px;
}
.pagenav a[rel="next"]:hover:after, .pagenav a[rel="prev"]:hover:before {
	color: white;
	background: #f26522;
}
.entries .pagenav {
	margin-top: -18px;
}

/* 
/* k. Hero Section
/* =================================================================== */
#hero {
	background: #12151b url(../images/tlo.png) no-repeat center center fixed;
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	background-size: cover !important;
	padding-top: 66px;
	padding-bottom: 90px;
	width: 100%;
	text-align: center;
	position: relative;
}
.ie8 #hero { background: #12151b; }

/* Flex slider settings
/* ------------------------------------------------------------------ */
.flexslider a:active, .flexslider a:focus {
	outline: none;
}/* Flexslider wrapper fix */
.flexslider {
    margin: 0 auto !important;
    border: none;
    box-shadow: none;
}
.flexslider .flex-control-nav {
  display: none !important;
}
.slides, .flex-control-nav, .flex-direction-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}
.slides li {
	margin: 0;
	padding: 0;
}

/* Necessary Styles */
.flexslider {
	position: relative;
	zoom: 1;
	margin: 0;
	padding: 0;
}
.flexslider .slides {
	zoom: 1;
}
.flexslider .slides > li {
	position: relative;
}

/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides > li {
	display: none;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* Suggested container for slide animation setups. Can replace this with your own */
.flex-container {
	zoom: 1;
	position: relative;
}

/* Clearfix for .slides */
.slides:before, .slides:after {
	content: " ";
	display: table;
}
.slides:after {
	clear: both;
}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child {
	display: block;
}

/* Slider Styles */
.slides {
	zoom: 1;
}
.slides > li {
	overflow: hidden;
}

/* hero slider
/* ------------------------------------------------------------------ */
/* --- KMZLOM COLORS --- */

/* Nagłówki slidera */
#hero-slider h1 {
    color: #f7d400 !important; /* żółty */
    font-weight: 800;
    text-shadow: 0 0 10px rgba(0,0,0,0.6);
}

/* Podpisy / opisy */
#hero-slider p {
    color: #ffffff !important;
    font-weight: 500;
    text-shadow: 0 0 10px rgba(0,0,0,0.8);
}

/* Przyciski */
.button.stroke {
    background: #f7d400 !important; /* żółty KMZŁOM */
    color: #000 !important;

}
/* Removed accidental HTML block that was embedded here. Move that markup into the appropriate HTML file. */
/* 
/* l. Portfolio Section
/* =================================================================== */
#portfolio {
	background: white;
	padding-top: 120px;
}
.ie #portfolio .row.items {
	width: 1140px;
}
#portfolio .row.items {
	max-width: 1200px;
}

/* Portfolio wrapper */
#portfolio-wrapper {
	margin-top: 36px;
}

/* portfolio items */
.item .item-wrap {
	overflow: hidden;
	position: relative;
}
.item .item-wrap a {
	display: block;
	cursor: pointer;
}
.item .item-wrap .overlay {
	background: #ed560e;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	opacity: 0;
	zoom: 1;
	-moz-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	-webkit-transition: opacity 0.3s ease-in-out;
	-ms-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;	
}
.item .item-wrap img {
	vertical-align: bottom;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.item .item-wrap .portfolio-item-meta {
	position: absolute;
	top: 10%;
	left: 10%;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	opacity: 0;
	zoom: 1;
	-moz-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	-webkit-transition: opacity 0.3s ease-in-out;
	-ms-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}
.item .item-wrap .portfolio-item-meta h5 {
	font: 15px/21px "raleway-heavy", sans-serif;
	margin: 0;
	color: white;
	word-wrap: break-word;
}
.item .item-wrap .portfolio-item-meta p {
	font: 14px/18px "raleway-semibold", sans-serif;
	color: #fbcab3;
	margin: 0;
}

/* on item hover */
.item:hover .overlay {
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	opacity: 1;
	zoom: 1;
}
.item:hover .portfolio-item-meta {
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	opacity: 1;
	zoom: 1;
}
.item:hover .item-wrap img {
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
}

/* 
/*  m. Services Section
/* =================================================================== */
#services {
	background: #ecf0f1;
	padding-top: 120px;
	padding-bottom: 120px;
	text-align: center;
}
.service-list {
	margin: 15px -22px 0 -22px;
}
.service-list .bgrid {
	margin-top: 15px;
	margin-bottom: 15px;
	padding: 0 22px;
}
.service-list .icon-part {
	background: #f26522;
	color: white;
	width: 72px;
	padding: 15px 3px;
	font-size: 40px;
	border-radius: 3px;
	margin: 0 auto;
}
.service-list h3 {
	font: 16px/24px "raleway-heavy", sans-serif;
	padding: 0;
}
.service-list p {
	color: #707273;
	position: relative;
	top: -6px;
}


/* 
/*  n. About Section
/* =================================================================== */

#about {
	background: white;
	padding-top: 120px;
	padding-bottom: 0;
}
#about .about-content {
	max-width: 934px;
}
#about h3 {
	font: 16px/36px "raleway-heavy", sans-serif;
	text-transform: none;
	padding: 0;
	margin-bottom: 0;
}
#about p {
	color: #707273;
}
#about .left {
	padding-right: 30px;
}
#about .right {
	padding-left: 30px;
}

/* Team Section
/* -------------------------------------------------------------------- */
#about #team {
	background: #ecf0f1;
	margin-top: 66px;
	padding-top: 78px;
	padding-bottom: 120px;
}
#team-wrapper {
	margin: 24px -18px 0 -18px;
}
#team-wrapper .bgrid {
	padding: 0 18px;
}
#team-wrapper .member {
	margin-top: 18px;
	margin-bottom: 36px;
}
#team-wrapper .member-header {
	position: relative;
	margin-bottom: 15px;
}
#team-wrapper .member-pic {
	width: 78px;
	height: 78px;
	display: inline-block;
	position: relative;
	top: 12px;
}
#team-wrapper .member-pic img {
	border-radius: 100%;
}
#team-wrapper .member-name {
	display: inline-block;
	padding-top: 9px;
	margin-left: 12px;
}
#team-wrapper .member-name h3 {
	line-height: 24px;
	margin-top: 0;
	margin-bottom: 6px;
}
#team-wrapper .member-name span {
	position: relative;
	top: -6px;
	font-size: 13px;
	line-height: 18px;
	color: #f26522;
	display: block;
}
#team-wrapper .member-social {
	font-size: 18px;
	font-weight: normal;
	line-height: 24px;
	margin: 12px 0 0 0;
	padding: 0;
}
#team-wrapper .member-social li {
	display: inline-block;
	margin-right: 15px;
}
#team-wrapper .member-social li a {
	color: #252525;
}
#team-wrapper .member-social li a:hover {
	color: #f26522;
}


/* 
/*  o. Journal Section
/* =================================================================== */
#journal {
	background: #a43b0a url(../images/blog-bg.jpg) no-repeat bottom center fixed;
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	background-size: cover !important;
	padding-top: 120px;
	padding-bottom: 108px;
	width: 100%;
}
#journal h1, #journal h3, #journal h3 a {
	color: white;
}
#journal h3 {
	font: 16px/27px "raleway-heavy", sans-serif;
	padding: 0;
	margin: 0;
}
#journal h5 {
	font-size: 13px;
	color: #f26522;
	margin: 0;
}
#journal p {
	color: #fffcfb;
}
#journal #blog-wrapper {
	margin: 24px 0 0 0;
}
#journal #blog-wrapper .bgrid {
	padding: 0 18px;
}
#journal #blog-wrapper article {
	margin-bottom: 24px;
}


/* 
/*  p. Contact Section
/* =================================================================== */
#contact {
	background: #12151b;
	padding-top: 120px;
	padding-bottom: 102px;
	overflow: hidden;
}
#contact .row {
	max-width: 784px;
}
#contact h1 {
	color: white;
}

/* contact form */
#contact form {
	margin-top: 30px;
	margin-bottom: 30px;
}
#contact label {
	font: 14px/30px "raleway-heavy", sans-serif;
	color: #7d7e80;
	display: none;
}
#contact label span {
	color: #f26522;
	display: inline-block;
}
#contact input, 
#contact textarea, 
#contact select {
	padding: 18px 20px;
	margin-bottom: 42px;
	font-size: 15px;
	width: 100%;
	background: #12151b;
	border: 3px solid #575859;
}
#contact textarea {
	height: 252px;
}
#contact input:focus, 
#contact textarea:focus, 
#contact select:focus {
	color: white;
	border-color: white;
}
#contact button.submit {
	text-transform: uppercase;
	letter-spacing: 3px;
	padding: 18px 20px;
	margin-bottom: 36px;
	line-height: 24px;
	display: block;
	border: 3px solid #f26522;
	color: #f26522;
	background: transparent;
}
#contact button.submit:hover {
	color: white;
	background: #f26522;
}

/* for ie9 and lower */
.ie #contact label {
	display: block;
}
.ie #contact input, .ie #contact select {
	margin-bottom: 6px;
}
.ie #contact textarea {
	margin-bottom: 48px;
}

/* messages */
#message-warning, #message-success {
	display: none;
	background: black;
	padding: 24px 24px;
	margin-bottom: 42px;
	border-radius: 3px;
}
#message-warning {
	color: #ff6163;
}
#message-success {
	color: #ffd900;
}
#message-warning i, #message-success i {
	margin-right: 10px;
}
#image-loader {
	display: none;
	text-align: center;
}
#image-loader img {
	height: 44px;
	width: 44px;
}

/* Style Placeholder Text */
::-webkit-input-placeholder {
	color: #575859;
}
:-moz-placeholder {
	/* Firefox 18- */
	color: #575859;
}
::-moz-placeholder {
	/* Firefox 19+ */
	color: #575859;
}
:-ms-input-placeholder {
	color: #575859;
}
.placeholder {
	color: #575859 !important;
}


/* 
/* q. Blog Entry
/* =================================================================== */

.entry .tags {
	margin-top: 18px;
	font-family: "raleway-regular", sans-serif;
	color: #707273;
}
.entry .tags a {
	font-family: "raleway-heavy", sans-serif;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #f26522;
}
.entry .tags a:hover {
	color: #12151b;
}

/* comments
-------------------------------------------------------------------- */
#comments {
	padding-top: 12px;
	padding-bottom: 12px;
}
#comments h3 {
	font: 20px/30px "raleway-bold", sans-serif;
	margin-bottom: 6px;
}
.commentlist {
	margin: 30px 0 54px 0;
	padding: 0;
}
.commentlist > li {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 18px 0 18px 0;
	padding-left: 14%;
}
.commentlist li .avatar {
	position: absolute;
	left: 0px;
	display: block;
	height: 48px;
	width: 48px;
}
.commentlist li .avatar img {
	margin-top: 6px;
	height: 48px;
	width: 48px;
	border-radius: 100%;
}
.commentlist li .comment-info cite {
	font: 14px/30px "raleway-heavy", sans-serif;
	color: #252525;
}
.commentlist li .comment-info .comment-meta {
	font-size: 13px;
	line-height: 24px;
	display: block;
	color: #707273;
}
.commentlist li .comment-info .comment-meta .reply {
	font-family: "raleway-bold", sans-serif;
}
.commentlist li .comment-info .comment-meta .sep {
	margin: 0 5px;
	color: #7d7e80;
}
.commentlist li .comment-text {
	clear: both;
	margin: 18px 0 0 0;
	padding: 0;
}
.commentlist li ul.children {
	margin: 0;
	padding: 18px 0 0 0;
	list-style: none;
}
.commentlist li ul.children li {
	padding-left: 5%;
	padding-top: 18px;	
}

/* comment form
-------------------------------------------------------------------- */
#comments form {
	margin-top: 36px;
}
#comments form fieldset {
	padding: 0;
}
#comments form label {
	padding-left: 24px;
	width: 41.66667%;
	float: right;
}
#comments form div {
	margin: 12px 0 18px 0;
}
#comments form input, 
#comments form textarea, 
#comments form select {
	width: 58.33333%;
	float: left;
}
#comments form .message label {
	display: none;
}
#comments form textarea {
	width: 100%;
}
#comments form span.required {
	color: #f26522;
	font-size: 15px;
}
#comments form button {
	padding-left: 24px;
	padding-right: 24px;
	color: #f26522 !important;
	border-color: #f26522 !important;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0;
}
#comments form button:hover {
	color: white !important;
	background: #f26522 !important;
}


/* 
/* r. Portfolio Entry
/* =================================================================== */

.portfolio-content .entry header {
	text-align: center;
}
.portfolio-content .entry .entry-content-media {
	margin: 30px 0 0;
}
.portfolio-content .entry .entry-content-media img {
	margin-bottom: 24px;
}
.portfolio-content .entry .pagenav {
	margin-top: 0;
}
.portfolio-content .entry .pagenav a[rel="next"]:after {
	float: right;
}

/* more projects
/* ------------------------------------------------------------------- */
.more-projects {
	margin-top: 60px;
}
.more-projects h1 {
	font: 30px/36px "raleway-bold", sans-serif;
	text-align: center;
	margin-bottom: 0;
}
.more-projects .portfolio-wrapper {
	text-align: left;
}

/* ---- HEADER BACKGROUND CUSTOM ---- */

#main-header {
    background-image: url("../images/header-bg.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* efekt parallax */
    padding: 20px 0;
}

#main-header .logo a {
    color: #f7d400 !important;    /* żółty kolor logo */
    font-weight: 800;
    font-size: 28px;
    text-transform: uppercase;
}

#nav a {
    color: #ffffff !important;     /* kolor tekstu */
    font-weight: 600;
}

#nav a:hover {
    color: #f7d400 !important;     /* żółty po najechaniu */
}
/* --- MOBILE SLIDER FIX --- */

#hero-slider img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Przyciemnienie zdjęć, aby tekst był czytelny */
#hero-slider li img {
    filter: brightness(0.55);
}

/* Centrum tekstów */
.flex-caption {
    max-width: 90%;
    text-align: center;
    margin: 0 auto;
}

/* Tekst na telefonie większy i czytelniejszy */
@media only screen and (max-width: 768px) {

    #hero-slider h1 {
        font-size: 26px !important;
        line-height: 34px !important;
    }

    #hero-slider p {
        font-size: 16px !important;
    }

    .flex-caption {
        padding: 20px 10px !important;
    }

    .button.stroke {
        font-size: 15px;
        padding: 10px 18px;
    }
}
@media only screen and (max-width: 768px) {
    #hero {
        padding-top: 80px;
        padding-bottom: 40px;
    }
    
    #hero-slider {
        min-height: 380px !important;
    }

    #hero-slider .slides li {
        min-height: 380px !important;
    }
}
#hero-slider li::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.45);
    pointer-events: none;
}
/* --- SKUP AUT SECTION --- */

.service-section {
    padding: 80px 0;
    background: #111; /* ciemne tło pod KMZŁOM */
    color: #fff;
}

.service-section h1 {
    color: #f7d400;
    font-weight: 800;
    font-size: 38px;
    text-align: center;
}

.service-section p {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px auto;
    color: #ddd;
}

.service-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.service-photo {
    width: 100%;
    border-radius: 8px;
    filter: brightness(0.8);
}

.service-list {
    list-style: none;
    margin: 0 0 25px 0;
    padding: 0;
    color: #fff;
    font-size: 17px;
}

.service-list li {
    margin-bottom: 8px;
}

.big-cta {
    display: inline-block;
    margin-top: 20px;
    font-size: 18px;
    padding: 14px 32px;
    border-radius: 6px;
}
/* --- SKUP AUT SECTION --- */

.service-section {
    padding: 80px 0;
    background: #111; /* ciemne tło pod KMZŁOM */
    color: #fff;
}

.service-section h1 {
    color: #f7d400;
    font-weight: 800;
    font-size: 38px;
    text-align: center;
}

.service-section p {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px auto;
    color: #ddd;
}

.service-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.service-photo {
    width: 100%;
    border-radius: 8px;
    filter: brightness(0.8);
}

.service-list {
    list-style: none;
    margin: 0 0 25px 0;
    padding: 0;
    color: #fff;
    font-size: 17px;
}

.service-list li {
    margin-bottom: 8px;
}

.big-cta {
    display: inline-block;
    margin-top: 20px;
    font-size: 18px;
    padding: 14px 32px;
    border-radius: 6px;
}
@media only screen and (max-width: 768px) {
    .service-section {
        padding: 50px 0;
    }

    .service-section h1 {
        font-size: 28px;
        line-height: 34px;
    }

    .service-box {
        flex-direction: column;
        text-align: center;
    }

    .service-photo {
        margin-bottom: 20px;
    }
}
@media only screen and (max-width: 768px) {
    .service-section {
        padding: 50px 0;
    }

    .service-section h1 {
        font-size: 28px;
        line-height: 34px;
    }

    .service-box {
        flex-direction: column;
        text-align: center;
    }

    .service-photo {
        margin-bottom: 20px;
    }
}
/* --- KASACJA POJAZDÓW --- */

.service-section-alt {
    padding: 80px 0;
    background: #181818; /* odróżnia się od sekcji powyżej */
    color: #fff;
}

.service-section-alt h1 {
    color: #f7d400;
    font-weight: 800;
    font-size: 38px;
    text-align: center;
}

.service-section-alt p {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px auto;
    color: #ccc;
}

.service-box-alt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.service-section-alt .service-photo {
    width: 100%;
    border-radius: 8px;
    filter: brightness(0.85);
}
@media only screen and (max-width: 768px) {
    .service-section-alt {
        padding: 50px 0;
    }

    .service-section-alt h1 {
        font-size: 28px;
        line-height: 34px;
    }

    .service-box-alt {
        flex-direction: column-reverse;
        text-align: center;
    }

    .service-section-alt .service-photo {
        margin-top: 20px;
    }
}
/* --- RECYKLING ODPADÓW / METALI --- */

.service-recycle {
    padding: 80px 0;
    background: #101010;
    color: #fff;
}

.service-recycle h1 {
    color: #f7d400;
    font-weight: 800;
    font-size: 38px;
    text-align: center;
}

.recycle-grid {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.recycle-box {
    background: #1a1a1a;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    flex: 1;
    max-width: 350px;
    min-width: 280px;
    border: 1px solid #333;
}

.recycle-box img {
    width: 100%;
    border-radius: 6px;
    margin-bottom: 15px;
    filter: brightness(0.9);
}

.recycle-box h3 {
    color: #f7d400;
    font-size: 22px;
    margin-bottom: 15px;
}

.recycle-box ul {
    list-style: none;
    padding: 0;
    color: #ddd;
    font-size: 16px;
}
/* --- SKLEP CZĘŚCI --- */

.parts-section {
    padding: 80px 0;
    background: #111;
    color: #fff;
}

.parts-section h1 {
    color: #f7d400;
    font-weight: 800;
    font-size: 38px;
    text-align: center;
}

.parts-grid {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.part-box {
    background: #1a1a1a;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    max-width: 350px;
    border: 1px solid #333;
}

.part-box img {
    width: 100%;
    border-radius: 6px;
    margin-bottom: 15px;
    filter: brightness(0.9);
}

.part-box h3 {
    color: #f7d400;
    font-size: 22px;
}
@media only screen and (max-width: 768px) {
    .parts-section {
        padding: 50px 0;
    }

    .parts-section h1 {
        font-size: 28px;
        line-height: 34px;
    }
}
/* --- FOOTER --- */

#footer {
    background: #0c0c0c;
    color: #fff;
    margin-top: 0;
    padding-top: 40px;
}

.footer-top {
    padding: 40px 0;
    border-bottom: 1px solid #333;
}

.footer-box h3 {
    color: #f7d400;
    font-weight: 700;
    margin-bottom: 15px;
}

.footer-box p {
    color: #ccc;
}

.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-list li {
    margin-bottom: 8px;
    color: #ccc;
}

.footer-list a {
    color: #f7d400;
    text-decoration: none;
}

.footer-bottom {
    text-align: center;
    padding: 20px 0;
    color: #888;
    font-size: 14px;
}
@media only screen and (max-width: 768px) {
    .footer-top .row {
        text-align: center;
    }
    .footer-box {
        margin-bottom: 30px;
    }
}
/* --- FLOATING CALL BUTTON (mobile only) --- */

.floating-call {
    position: fixed;
    right: 20px;
    bottom: 20px;
    background: #f7d400;
    color: #000;
    font-weight: 800;
    padding: 14px 20px;
    border-radius: 40px;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
    text-decoration: none;
    font-size: 17px;
    z-index: 9999;
    display: none;
    transition: 0.2s;
}

/* efekcik po kliknięciu */
.floating-call:active {
    transform: scale(0.95);
}

/* pokaz tylko na telefonach */
@media only screen and (max-width: 768px) {
    .floating-call {
        display: inline-block;
    }
}
/* --- MAPA DOJAZDU --- */

.map-section {
    padding: 80px 0;
    background: #0f0f0f;
    color: #fff;
}

.map-section h1 {
    color: #f7d400;
    font-weight: 800;
    font-size: 38px;
    text-align: center;
}

.map-section p {
    text-align: center;
    color: #ccc;
    margin-bottom: 40px;
}

.map-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 30px auto;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #333;
    box-shadow: 0 0 25px rgba(0,0,0,0.5);
}
@media only screen and (max-width: 768px) {
    .map-section {
        padding: 50px 0;
    }

    .map-section h1 {
        font-size: 28px;
    }

    .map-wrapper iframe {
        height: 350px;
    }
}
/* --- O FIRMIE --- */

.about-section {
    padding: 80px 0;
    background: #121212;
    color: #fff;
}

.about-box {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.about-photo img {
    width: 100%;
    border-radius: 8px;
    filter: brightness(0.9);
}

.about-text h1 {
    color: #f7d400;
    font-weight: 800;
    font-size: 38px;
}

.about-text p {
    color: #ccc;
    font-size: 17px;
    margin-bottom: 20px;
}

.about-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    color: #eee;
    font-size: 17px;
}

.about-list li {
    margin-bottom: 10px;
}
@media only screen and (max-width: 768px) {
    .about-section {
        padding: 50px 0;
    }

    .about-text h1 {
        font-size: 28px;
        line-height: 34px;
    }

    .about-box {
        flex-direction: column;
        text-align: center;
    }

    .about-photo {
        margin-bottom: 20px;
    }
}
/* --- CENNIK --- */

.pricing-section {
    padding: 80px 0;
    background: #0f0f0f;
    color: #fff;
}

.pricing-section h1 {
    color: #f7d400;
    font-weight: 800;
    font-size: 38px;
    text-align: center;
}

.pricing-section p {
    text-align: center;
    color: #ccc;
    margin-bottom: 40px;
}

.pricing-table {
    display: flex;
    justify-content: center;
}

.pricing-table table {
    width: 100%;
    max-width: 900px;
    border-collapse: collapse;
    background: #1a1a1a;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #333;
}

.pricing-table th {
    background: #000;
    color: #f7d400;
    text-align: left;
    padding: 15px;
    font-size: 18px;
}

.pricing-table td {
    padding: 14px 15px;
    border-bottom: 1px solid #2a2a2a;
    color: #ddd;
}

.pricing-table tr:last-child td {
    border-bottom: none;
}

.pricing-table tr:hover td {
    background: #222;
}
/* --- KONTAKT --- */
.contact-section {
    padding: 80px 0;
    background: #121212;
    color: #fff;
}

.contact-section h1 {
    color: #f7d400;
    font-weight: 800;
    font-size: 38px;
    text-align: center;
}

.contact-section p {
    text-align: center;
    color: #ccc;
    margin-bottom: 40px;
}

.contact-form label {
    display: block;
    color: #ccc;
    font-weight: 600;
    margin-bottom: 5px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #333;
    background: #1a1a1a;
    color: #fff;
    margin-bottom: 15px;
}

.contact-info h3 {
    color: #f7d400;
    margin-top: 20px;
}

.contact-info .contact-list {
    list-style: none;
    padding: 0;
    color: #ccc;
}

.contact-info .contact-list li {
    margin-bottom: 8px;
}

.contact-section .map-wrapper {
    margin-top: 15px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #333;
}

/* RESPONSYWNOŚĆ */
@media only screen and (max-width: 768px) {
    .form-wrapper {
        flex-direction: column;
        text-align: center;
    }
    .contact-form, .contact-info {
        width: 100%;
        margin-bottom: 30px;
    }
    .contact-section h1 {
        font-size: 28px;
    }
}

@media only screen and (max-width: 768px) {

    .pricing-section {
        padding: 50px 0;
    }

    .pricing-section h1 {
        font-size: 28px;
        line-height: 34px;
    }

    .pricing-table table {
        font-size: 15px;
    }

    .pricing-table th, 
    .pricing-table td {
        padding: 10px;
    }
}
/* --- PANEL IKON USŁUG --- */

.icon-section {
    padding: 80px 0;
    background: #111;
    color: #fff;
}

.icon-section h1 {
    color: #f7d400;
    font-weight: 800;
    font-size: 38px;
    text-align: center;
}

.icon-grid {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.icon-box {
    background: #1a1a1a;
    padding: 25px;
    text-align: center;
    width: 260px;
    border-radius: 8px;
    border: 1px solid #333;
    transition: 0.2s;
}

.icon-box:hover {
    transform: translateY(-5px);
    border-color: #f7d400;
}

.icon-box .icon {
    font-size: 48px;
    display: block;
    margin-bottom: 15px;
    color: #f7d400;
}

.icon-box h3 {
    color: #f7d400;
    font-size: 22px;
    margin-bottom: 10px;
}
@media only screen and (max-width: 768px) {
    .icon-box {
        width: 100%;
        max-width: 340px;
    }
}
/* HERO FULLSCREEN */
.hero-full { position: relative; height: 100vh; min-height: 600px; overflow: hidden; }
.hero-full .flexslider, .hero-full .slides { height: 100%; }
.hero-full .slide {
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.55) 100%);
  pointer-events:none;
}
.hero-caption {
  position:relative; z-index:5; text-align:center; max-width:1100px; padding:0 20px;
}
.hero-caption h1 { font-size:48px; line-height:1.05; color:var(--km-yellow); text-shadow:0 6px 20px rgba(0,0,0,0.6); }
.hero-caption p { margin-top:18px; }

/* ==============================
   🎨 ROOT COLORS & BASE
   ============================== */
:root {
    --km-yellow: #f7d400;
    --km-white: #f2f2f2;
    --km-dark: #0b0b0b;
}

body {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--km-white);
    background-color: #111;
    margin: 0;
}

/* ==============================
   FLEX GRID
   ============================== */
.row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}
.six.columns { flex: 1 1 48%; }
.four.columns { flex: 1 1 30%; }
.three.columns { flex: 1 1 22%; }

/* ==============================
   HERO SLIDER PREMIUM
   ============================== */
#hero {
    position: relative;
    width: 100%;
    height: 75vh;
    min-height: 460px;
    overflow: hidden;
    padding-top: 110px; /* dystans pod menu */
}

#hero-slider {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    height: 100%;
    pointer-events: none;
}

#hero-slider .slides li {
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    transform: translateZ(0);
    will-change: background-position;
    transition: opacity 0.9s ease-in-out;
}

#hero.parallax-active .slides li {
    animation: heroParallax 18s ease-in-out infinite alternate;
}
@keyframes heroParallax {
    0% { background-position: center 0px; }
    100% { background-position: center -120px; }
}

/* HERO OVERLAY & SPARKS */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.28);
    pointer-events: none;
    z-index: 5;
}

#hero .sparks-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 8;
    mix-blend-mode: screen;
}

.spark {
    position: absolute;
    width: 2px;
    height: 60px;
    background: linear-gradient(to bottom, rgba(255,255,120,1), rgba(255,230,50,0.6), rgba(255,200,0,0));
    opacity: 0;
    transform: rotate(-15deg);
    filter: brightness(2.5) drop-shadow(0 0 6px #ffd200) drop-shadow(0 0 12px #ffcf00) drop-shadow(0 0 20px #ffea00);
    animation: sparkFall 1.9s linear infinite;
}
@keyframes sparkFall {
    0% { opacity: 0; transform: translateY(-100px) translateX(0) rotate(-15deg); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translateY(420px) translateX(50px) rotate(-15deg); }
}

/* HERO TEXT */
.hero-caption {
    position: absolute;
    bottom: 130px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 90%;
    max-width: 900px;
    z-index: 10;
}
.hero-caption h1 {
    font-size: clamp(36px, 5vw, 52px);
    font-weight: 900;
    color: var(--km-white);
    text-shadow: 0 0 20px rgba(0,0,0,0.9);
}
.hero-caption p {
    font-size: clamp(16px, 2vw, 22px);
    color: #fff;
    text-shadow: 0 0 14px rgba(0,0,0,0.8);
}

/* ==============================
   NAVIGATION PREMIUM
   ============================== */
#nav-wrap { position: relative; }
#nav {
    display: flex;
    gap: 24px;
    list-style: none;
}
#nav li a {
    font-weight: 700;
    color: var(--km-white);
    transition: .25s;
}
#nav li a:hover {
    color: var(--km-yellow);
    text-shadow: 0 0 12px rgba(247,212,0,0.55);
}
#nav li.active a,
#nav li.current a {
    color: var(--km-yellow);
    border-bottom: 2px solid var(--km-yellow);
    padding-bottom: 4px;
    font-weight: 800;
    text-shadow: 0 0 12px rgba(247,212,0,0.55);
}

/* MOBILE HAMBURGER */
.mobile-btn { display: none; cursor: pointer; background: transparent; border: none; color: var(--km-white); }
@media(max-width:980px) {
    .mobile-btn { display: inline-block; }
    #nav { display: none; flex-direction: column; position: fixed; top: 60px; right: 10px; background: var(--km-dark); padding: 20px; border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,0.6); z-index: 9999; }
    #nav.show { display: flex; }
    #nav li { margin-bottom: 12px; }
}

/* ==============================
   SEKCJE USŁUG, CZĘŚCI, RECYKLING
   ============================== */
.service-box, .part-box, .recycle-box {
    transition: transform .35s ease, box-shadow .35s ease;
}
.service-box:hover, .part-box:hover, .recycle-box:hover {
    transform: translateY(-6px) scale(1.05);
    box-shadow: 0 12px 24px rgba(247,212,0,0.55);
}

/* SEKCJE TEXT */
.section-head h1,
.service-section h1,
.parts-section h1,
.service-recycle h1 {
    color: var(--km-yellow);
    font-weight: 900;
}
.section-head p,
.service-section p,
.parts-section p,
.service-recycle p {
    color: var(--km-white);
    font-size: 18px;
}

/* STATYSTYKI */
.stat-box { text-align: center; margin-bottom: 30px; }
.stat-icon { font-size: 38px; color: var(--km-yellow); margin-bottom: 8px; }
.stat-number { font-size: 34px; font-weight: 800; color: var(--km-white); }

/* ==============================
   RESPONSYWNOŚĆ
   ============================== */
@media(max-width:1100px) {
    .service-box, .parts-box, .recycle-box { flex-direction: column; width: 100%; }
}
@media(max-width:768px) {
    .hero-full { height: 55vh; min-height: 300px; }
    .hero-caption h1 { font-size: 26px !important; }
    .hero-caption p { font-size: 16px !important; }
    .service-box, .parts-box, .recycle-box { text-align: center; margin-bottom: 40px; }
    .service-box img, .parts-box img, .recycle-box img { max-width: 85%; margin: 0 auto; display: block; }
    .section-head h1 { font-size: 28px !important; }
    .stat-box { margin-bottom: 25px; }
    .faq-item { flex-direction: column; }
    .faq-icon { margin: 0 auto; font-size: 28px; color: var(--km-yellow); }
}

/* ==============================
   DODATKOWE EFETY PREMIUM
   ============================== */
.service-box img, .parts-box img, .recycle-box img {
    transition: transform .35s ease, box-shadow .35s ease;
}
.service-box:hover img, .parts-box:hover img, .recycle-box:hover img {
    transform: scale(1.05);
    box-shadow: 0 0 22px rgba(247,212,0,0.55);
}
.background-metal {
  background-image: url('../images/caletlo.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 4rem 2rem;
  color: white;
}
.content-box {
  background-color: rgba(0, 0, 0, 0.6); /* półprzezroczysta ramka */
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}.background-metal {
  background-image: url('../images/caletlo.png'); /* Twoje tło */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 3rem 2rem;
  color: white;
  text-align: center;
}

.services h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
}

.services-bar {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;              /* ustawia elementy w jednej linii */
  justify-content: center;    /* wyśrodkowanie */
  gap: 1rem;                  /* odstęp między elementami */
  flex-wrap: wrap;            /* pozwala zawijać wiersz na mniejszych ekranach */
}

.services-bar li {
  margin: 0;
}

.services-bar a {
  display: inline-block;
  background: rgba(0,0,0,0.6);
  color: #fff;
  text-decoration: none;
  padding: 0.8rem 1.2rem;
  border-radius: 8px;
  font-size: 1.1rem;
  transition: all 0.3s ease;
}

.services-bar a:hover {
  background: rgba(255, 215, 0, 0.8); /* złoty akcent */
  color: #000;
  transform: scale(1.05);
}

.services-bar {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.services-bar li {
  margin: 0;
}

.services-bar a {
  display: inline-block;
  background: rgba(0,0,0,0.6);
  color: #fff;
  text-decoration: none;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.services-bar a:hover {
  background: rgba(255, 215, 0, 0.8); /* złoty akcent */
  color: #000;
  transform: scale(1.05);
}.services-bar-section {
  background-image: url('../images/caletlo.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 1rem 0;
  text-align: center;
}

.services-bar {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.services-bar li {
  margin: 0;
}

.services-bar a {
  display: inline-block;
  background: rgba(0,0,0,0.6);
  color: #fff;
  text-decoration: none;
  padding: 1rem 1.8rem;
  border-radius: 8px;
  font-size: 1.4rem;          /* większy tekst */
  font-weight: bold;          /* pogrubienie */
  letter-spacing: 1px;        /* lekki odstęp między literami */
  transition: all 0.3s ease;
}

.services-bar a:hover {
  background: rgba(255, 215, 0, 0.85); /* złoty akcent */
  color: #000;
  transform: scale(1.1);
}

/* Animacja wejścia */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}.snow-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* żeby nie blokowało kliknięć */
  z-index: 9999;
}

.snowflake {
  position: absolute;
  top: -10px;
  color: #fff;
  font-size: 1.2rem;
  opacity: 0.8;
  animation: fall linear forwards;
}

@keyframes fall {
  to {
    transform: translateY(100vh);
    opacity: 0.3;
  }
}.section-background {
  background-image: url('../images/background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}.section {
  padding: 80px 20px;
  color: #f0f0f0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}

.section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5); /* przydymienie */
  z-index: -1;
}

.section.kasacja {
  background-image: url('images/bg-kasacja.jpg'); /* tło z dymem i gwiazdkami */
}

.section .content {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.section h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.section p {
  font-size: 1.2rem;
  line-height: 1.6;
}.section {
  padding: 80px 20px;
  text-align: center;
  position: relative;
  color: #f0f0f0;
}

.section .container {
  max-width: 1000px;
  margin: 0 auto;
}

.service-icon {
  font-size: 3rem;
  color: #e63946; /* czerwony akcent */
  margin-bottom: 20px;
}

.section-title {
  font-size: 2.5rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 15px;
}

.section-description {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #ddd;
}/* Ogólne ustawienia sekcji FAQ */
.section.faq {
  padding: 80px 20px;
  background: linear-gradient(135deg, #2c2c2c 0%, #3b2a1a 100%); /* ciemny brąz z przejściem */
  position: relative;
  color: #f0f0f0;
}

.section.faq::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../images/background.png') repeat; /* tło z dymem/gwiazdami */
  opacity: 0.15; /* subtelny efekt */
  z-index: 0;
}

.section.faq .container {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
}

/* Nagłówek FAQ */
.section-title {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 40px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Lista FAQ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Pojedynczy element FAQ */
.faq-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: rgba(255, 255, 255, 0.05);
  padding: 20px;
  border-radius: 10px;
  transition: transform 0.3s ease, background 0.3s ease;
}

.faq-item:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.1);
}

/* ===================== */
/* SEKCJE OGÓLNE */
/* ===================== */
.section {
  position: relative;
  color: #f0f0f0;
  padding: 80px 20px;
}

.section::before {
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.45);
  z-index:0;
}

.container {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
}

.section-title {
  text-align:center;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:2.2rem;
  margin-bottom:16px;
  background: linear-gradient(to right, var(--km-yellow), #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-description {
  text-align:center;
  max-width:800px;
  margin:0 auto 32px;
  color:#ddd;
  font-size:1.2rem;
}

/* ===================== */
/* TŁA SEKCJI */
/* ===================== */
.section.opinie     { background:url('../images/sekcje/opinie1.png') center/cover no-repeat; }
.section.faq        { background:url('../images/sekcje/faq.png') center/cover no-repeat; }
.section.skup-aut   { background:url('../images/sekcje/skup.png') center/cover no-repeat; }
.section.kasacja    { background:url('../images/sekcje/4s.png') center/cover no-repeat; }
.section.recykling  { background:url('../images/sekcje/recykling1.png') center/cover no-repeat; }
.section.czesci     { background:url('../images/sekcje/6s.png') center/cover no-repeat; }
.section.statystyki { background:url('../images/sekcje/7s.png') center/cover no-repeat; }
.section.blog       { background:url('../images/sekcje/blog.png') center/cover no-repeat; }
.section.o-firmie   { background:url('../images/sekcje/onas.png') center/cover no-repeat; }
.section.mapa       { background:url('../images/sekcje/10s.png') center/cover no-repeat; }
.section.cennik     { background:url('../images/sekcje/11s.png') center/cover no-repeat; }
.section.footer     { background:url('../images/sekcje/13s.png') center/cover no-repeat; }

/* ===================== */
/* FAQ */
/* ===================== */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.faq-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255,255,255,0.05);
  padding: 16px;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.faq-item:hover { transform: translateY(-4px); }

.faq-icon {
  font-size: 2rem;
  color: var(--km-yellow);
  flex-shrink: 0;
}

.faq-item h3 {
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.faq-item p {
  font-size: 1rem;
  line-height: 1.6;
  color: #ddd;
}

/* ===================== */
/* OPINIE */
/* ===================== */
.reviews-carousel {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.review-box {
  background: rgba(255, 255, 255, 0.05);
  padding: 20px;
  border-radius: 10px;
  width: 300px;
  text-align: center;
  transition: transform 0.3s ease;
}

.review-box:hover { transform: translateY(-5px); }

.review-avatar {
  font-size: 2rem;
  margin-bottom: 10px;
  color: var(--km-yellow);
}

.review-stars {
  color: gold;
  margin-bottom: 10px;
}

/* ===================== */
/* PRZYCISKI */
/* ===================== */
.button, .button.stroke, .big-cta {
  position: relative;
  overflow: hidden;
}

.button::after, .button.stroke::after, .big-cta::after {
  content: "";
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.3) 0%, transparent 80%);
  transform: skewX(-25deg);
  animation: shine 4s infinite;
}

@keyframes shine {
  0% { left: -75%; }
  100% { left: 125%; }
}

/* ===================== */
/* SMOKE LAYER */
/* ===================== */
.smoke-layer {
  position: absolute;
  inset: 0;
  background: url('../images/effects/smoke.png') repeat;
  opacity: 0.15;
  animation: smokeMove 60s linear infinite;
  z-index: 2;
  pointer-events: none;
}

@keyframes smokeMove {
  from { background-position: 0 0; }
  to { background-position: 1000px 1000px; }
}
/* Połysk na nagłówkach */
.section-title {
  background: linear-gradient(to right, var(--km-yellow), #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Search input w menu */
.search-input-menu {
  padding: 6px 10px;
  border-radius: 6px;
  border: none;
  font-size: 14px;
}

/* Hero CTA */
.hero-cta {
  position: relative;
  z-index: 11;
  margin-top: 20px;
  display: flex;
  gap: 12px;
  justify-content: center;
}

.hero-cta .button {
  font-size: 16px;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: transform 0.2s ease, background 0.3s ease;
}

.hero-cta .button:hover {
  transform: translateY(-3px);
  background: var(--km-yellow);
  color: #111;
}

/* Overlay i efekty nie blokują kliknięć */
.hero-overlay,
.smoke-layer,
.sparks-layer {
  pointer-events: none;
}

/* Hero caption */
.hero-caption {
  position: relative;
  z-index: 10;
}

/* Animacja fade-in + pulsowanie */
.fade-in {
  opacity: 0;
  animation: fadeInUp 1.2s ease forwards, pulse 3s infinite;
  animation-delay: 0.8s;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Kasacja sekcja */
.section.kasacja {
  background: linear-gradient(135deg, #111 0%, #222 100%);
  color: #eee;
  padding: 60px 0;
}

.kasacja-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.kasacja-list li {
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.5;
}

.kasacja-list i {
  color: var(--km-yellow);
  margin-right: 8px;
}

.cta-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #333;
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
  transition: background 0.3s ease, transform 0.3s ease;
}

.cta-box:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.02);
}

.kasacja-photo img {
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.kasacja-photo img:hover {
  transform: scale(1.05);
}

/* Śnieg elektryczny */
.snow-container {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9999;
  background: transparent;
}

.snowflake {
  position: absolute;
  top: -10px;
  width: 6px; height: 6px;
  background: var(--km-yellow);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--km-accent);
  animation: fall linear infinite;
}

.snowflake:nth-child(3n) {
  width: 10px; height: 10px;
  background: #fff;
  box-shadow: 0 0 12px var(--km-yellow);
}

@keyframes fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}/* Ogólne poprawki kontrastu dla sekcji */
.section {
  color: #fefefe;
  text-shadow: 0 0 6px rgba(0,0,0,0.6);
}

/* Nagłówki sekcji – większy kontrast + glow */
.section-title {
  font-size: 2.6rem;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 20px;
  background: linear-gradient(to right, var(--km-yellow), #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 8px rgba(255,255,255,0.3);
}

/* Opis sekcji – jaśniejszy tekst + cień */
.section-description {
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 40px;
  color: #e0e0e0;
  text-shadow: 0 0 4px rgba(0,0,0,0.5);
}

/* FAQ – lepszy kontrast i glow dla ikon i tekstów */
.faq-icon {
  font-size: 2rem;
  color: var(--km-yellow);
  text-shadow: 0 0 6px rgba(255,255,255,0.2);
}

.faq-item h3 {
  font-size: 1.5rem;
  color: #fff;
  text-shadow: 0 0 4px rgba(0,0,0,0.6);
}

.faq-item p {
  font-size: 1.1rem;
  color: #ddd;
  text-shadow: 0 0 3px rgba(0,0,0,0.5);
}

/* Opinie – większy kontrast i glow dla gwiazdek i tekstów */
.review-box {
  background: rgba(255,255,255,0.08);
  color: #fff;
  text-shadow: 0 0 4px rgba(0,0,0,0.6);
}

.review-stars {
  color: gold;
  font-size: 1.4rem;
  text-shadow: 0 0 6px rgba(255,215,0,0.5);
}

.review-avatar {
  color: var(--km-yellow);
  font-size: 2rem;
  text-shadow: 0 0 6px rgba(255,255,255,0.3);
}

/* Części – lepszy kontrast dla nazw kategorii */
.part-box h3 {
  font-size: 1.4rem;
  color: var(--km-yellow);
  text-shadow: 0 0 6px rgba(255,255,255,0.3);
}

.part-box p {
  font-size: 1rem;
  color: #eee;
  text-shadow: 0 0 3px rgba(0,0,0,0.5);
}.section.faq {
  color: #fefefe;
  text-shadow: 0 0 6px rgba(0,0,0,0.6);
}

.faq-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: rgba(255,255,255,0.08);
  padding: 20px;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.faq-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 12px rgba(255,255,255,0.2);
}

.faq-icon {
  font-size: 2.4rem;
  color: var(--km-yellow);
  text-shadow: 0 0 8px rgba(255,255,255,0.3);
  animation: pulseIcon 2.5s infinite;
}

.faq-item h3 {
  font-size: 1.6rem;
  color: #fff;
  text-shadow: 0 0 6px rgba(0,0,0,0.6);
}

.faq-item p {
  font-size: 1.2rem;
  color: #ddd;
  text-shadow: 0 0 4px rgba(0,0,0,0.5);
}

@keyframes pulseIcon {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}.section-title {
  font-size: 2.8rem;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 24px;
  background: linear-gradient(to right, var(--km-yellow), #fff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(255,255,255,0.3);
}

.section-description {
  font-size: 1.3rem;
  text-align: center;
  color: #e0e0e0;
  text-shadow: 0 0 6px rgba(0,0,0,0.5);
  margin-bottom: 40px;
}

/* Listy usług */
.kasacja-list li,
.service-box ul li,
.recycle-box p {
  font-size: 1.2rem;
  color: #eee;
  text-shadow: 0 0 4px rgba(0,0,0,0.5);
}

/* Ikony w listach */
.kasacja-list i,
.service-box ul li::before {
  color: var(--km-yellow);
  margin-right: 8px;
  font-size: 1.4rem;
  text-shadow: 0 0 6px rgba(255,255,255,0.3);
}

/* Recykling boxy */
.recycle-box {
  background: rgba(255,255,255,0.06);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  transition: transform 0.3s ease;
}

.recycle-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 12px rgba(255,255,255,0.2);
}

.recycle-box h3 {
  font-size: 1.5rem;
  color: var(--km-yellow);
  text-shadow: 0 0 6px rgba(255,255,255,0.3);
}.section.statystyki {
  color: #fff;
  text-shadow: 0 0 8px rgba(0,0,0,0.7);
}

.stat-box {
  background: rgba(255,255,255,0.08);
  padding: 24px;
  border-radius: 12px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 16px rgba(255,255,255,0.25);
}

.stat-icon {
  font-size: 2.6rem;
  color: var(--km-yellow);
  margin-bottom: 12px;
  text-shadow: 0 0 12px rgba(255,255,255,0.4);
  animation: pulseIcon 3s infinite;
}

.stat-number {
  font-size: 2.4rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 14px rgba(255,255,255,0.6);
  animation: glowNumber 2s infinite alternate;
}

.stat-box h3 {
  font-size: 1.3rem;
  color: #ddd;
  text-shadow: 0 0 6px rgba(0,0,0,0.6);
}

@keyframes pulseIcon {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

@keyframes glowNumber {
  from { text-shadow: 0 0 8px var(--km-yellow); }
  to   { text-shadow: 0 0 18px var(--km-yellow); }
}/* FAQ – powiększony tekst + efekt hover */
.faq-list .faq-item h3 {
  font-size: 2em;
  transition: color 0.3s ease;
}
.faq-list .faq-item p {
  font-size: 1.6em;
  line-height: 1.6;
}
.faq-list .faq-item:hover h3 {
  color: #0077ff; /* podświetlenie pytania */
}
.faq-list .faq-item:hover {
  background: rgba(0, 119, 255, 0.05);
  border-radius: 8px;
  transform: scale(1.02);
  transition: all 0.3s ease;
}

/* Nawigacja – większy font + efekt neonowy */
nav ul li a {
  font-size: 1.2em;
  font-weight: 600;
  position: relative;
  transition: color 0.3s ease;
}
nav ul li a:hover {
  color: #00ffcc;
  text-shadow: 0 0 8px #00ffcc;
}

/* Sekcje – tytuły powiększone + animacja */
.section-title {
  font-size: 2.2em;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
}
.section-title span {
  color: #00ffcc;
}
.section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #00ffcc;
  margin: 10px auto 0;
  border-radius: 2px;
  animation: glow 2s infinite alternate;
}

@keyframes glow {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

/* CTA przyciski – efekt pulsujący */
.button.big-cta {
  font-size: 1.3em;
  padding: 14px 28px;
  border-radius: 8px;
  transition: all 0.3s ease;
}
.button.big-cta:hover {
  background: #00ffcc;
  color: #000;
  box-shadow: 0 0 12px #00ffcc;
  transform: scale(1.05);
}/* FAQ – powiększony tekst + efekt hover */
.faq-list .faq-item h3 {
  font-size: 2em;
  transition: color 0.3s ease;
}
.faq-list .faq-item p {
  font-size: 1.6em;
  line-height: 1.6;
}
.faq-list .faq-item:hover h3 {
  color: #0077ff;
}
.faq-list .faq-item:hover {
  background: rgba(0, 119, 255, 0.05);
  border-radius: 8px;
  transform: scale(1.02);
  transition: all 0.3s ease;
}

/* Nawigacja – większy font + efekt neonowy */
nav ul li a {
  font-size: 1.2em;
  font-weight: 600;
  position: relative;
  transition: color 0.3s ease;
}
nav ul li a:hover {
  color: #00ffcc;
  text-shadow: 0 0 8px #00ffcc;
}

/* Sekcje – tytuły powiększone + animacja */
.section-title {
  font-size: 2.2em;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
}
.section-title span {
  color: #00ffcc;
}
.section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #00ffcc;
  margin: 10px auto 0;
  border-radius: 2px;
  animation: glow 2s infinite alternate;
}

@keyframes glow {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

/* CTA przyciski – efekt pulsujący */
.button.big-cta {
  font-size: 1.3em;
  padding: 14px 28px;
  border-radius: 8px;
  transition: all 0.3s ease;
}
.button.big-cta:hover {
  background: #00ffcc;
  color: #000;
  box-shadow: 0 0 12px #00ffcc;
  transform: scale(1.05);
}

/* --- Wersja mobilna --- */
@media (max-width: 767px) {
  .faq-list .faq-item h3 {
    font-size: 1.3em; /* mniejsze na telefonie */
  }
  .faq-list .faq-item p {
    font-size: 1.1em;
  }
  nav ul li a {
    font-size: 1em;
  }
  .section-title {
    font-size: 1.6em;
  }
  .button.big-cta {
    font-size: 1.1em;
    padding: 12px 20px;
  }
}/* Animacje wejścia dla sekcji */
.section {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
}

.section.aos-animate {
  opacity: 1;
  transform: translateY(0);
}

/* Dodatkowe warianty */
[data-aos="fade-left"] {
  transform: translateX(-40px);
}
[data-aos="fade-right"] {
  transform: translateX(40px);
}
[data-aos="zoom-in"] {
  transform: scale(0.9);
}
[data-aos="zoom-in"].aos-animate {
  transform: scale(1);
}/* Styl aktywnego linku w menu */
.nav li.current a {
  background-color: #ff6600; /* pomarańczowe tło */
  color: #fff !important;
  border-radius: 6px;
  padding: 6px 12px;
  transition: all 0.3s ease;
}/* Efekt przesuwania tła */
.hero-full,
.section.recykling,
.section.czesci {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  animation: scrollBackground 60s linear infinite;
}

@keyframes scrollBackground {
  0% { background-position: 0 0; }
  100% { background-position: 0 -1000px; }
}/* Ramki upscale */
.upscale-box {
  background: rgba(0,0,0,0.6); /* półprzezroczyste tło */
  border: 2px solid var(--km-yellow);
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 25px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.upscale-box:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 28px rgba(0,0,0,0.7);
}

/* Zdjęcia w ramkach */
.framed-photo {
  border-radius: 10px;
  border: 3px solid var(--km-yellow);
  box-shadow: 0 6px 16px rgba(0,0,0,0.6);
  max-width: 100%;
}

/* Listy wyróżnione */
.highlight-list li {
  background: rgba(255,255,255,0.08);
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: 6px;
  font-weight: 500;
}/* Sekcja opinii */
.background-overlay {
  background: rgba(0,0,0,0.7);
  padding: 60px 20px;
  color: #fff;
}

/* Ramki opinii */
.review-box {
  background: rgba(255,255,255,0.08);
  border: 2px solid var(--km-yellow);
  border-radius: 12px;
  padding: 25px;
  margin: 0 auto;
  max-width: 500px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.review-box:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 28px rgba(0,0,0,0.8);
  border-color: #fff; /* podświetlenie ramki na biało */
}

/* Avatar i gwiazdki */
.review-avatar {
  font-size: 36px;
  margin-bottom: 10px;
  color: var(--km-yellow);
}
.review-stars {
  font-size: 20px;
  color: var(--km-yellow);
  margin-bottom: 12px;
  letter-spacing: 2px;
}

/* Tekst opinii */
.review-box p {
  font-style: italic;
  margin-bottom: 10px;
}
.review-box h4 {
  margin-top: 10px;
  font-weight: 700;
  color: var(--km-yellow);
}/* Tło sekcji opinii */
.background-overlay {
  background: rgba(0,0,0,0.65);
  padding: 60px 20px;
  color: #fff;
}

/* Ramki opinii */
.review-box {
  text-align: center;
  padding: 25px;
}
.upscale-box {
  background: rgba(255,255,255,0.08);
  border: 2px solid var(--km-yellow);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.upscale-box:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 24px rgba(0,0,0,0.8);
}

/* Avatar i gwiazdki */
.review-avatar {
  font-size: 32px;
  margin-bottom: 10px;/* Tło i warstwa nad panoramą */
.background-overlay {
  background: rgba(0,0,0,0.75);
  padding: 60px 20px;
  color: #fff;
  position: relative;
  z-index: 5; /* nad tłem/overlayem z hero */
}

/* Flexslider — podstawy (gdy nie wczytano oficjalnego css) */
.flexslider { margin: 20px auto; max-width: 920px; position: relative; }
.flexslider .slides { list-style: none; margin: 0; padding: 0; }
.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; } /* ukryte poza aktywnym */
.flexslider .slides img { display: block; }
.flex-active-slide { display: block !important; }

/* Nawigacja Flexslidera */
.flex-control-nav { position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.flex-control-nav li a { width: 10px; height: 10px; display: block; border-radius: 50%; background: rgba(255,255,255,0.35); text-indent: -9999px; }
.flex-control-nav li a.flex-active { background: var(--km-yellow); box-shadow: 0 0 10px var(--km-yellow); }

.flex-direction-nav a { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; line-height: 34px; text-align: center; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; font-weight: 700; text-decoration: none; }
.flex-direction-nav .flex-prev { left: -50px; }
.flex-direction-nav .flex-next { right: -50px; }
.flex-direction-nav a:hover { background: rgba(255,255,255,0.22); }

/* Ramki opinii */
.review-box {
  background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.06) 100%);
  border: 2px solid var(--km-yellow);
  border-radius: 14px;
  padding: 28px 22px;
  margin: 0 auto;
  max-width: 640px;
  text-align: center;
  box-shadow: 0 10px 26px rgba(0,0,0,0.6);
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Subtelna poświata na krawędziach */
.review-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  box-shadow: inset 0 0 20px rgba(255, 204, 0, 0.15);
  pointer-events: none;
}

/* Neonowa krawędź na hover */
.review-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(0,0,0,0.75);
  border-color: #fff;
}

/* Pasek podświetlenia u dołu ramki */
.review-box::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--km-yellow), transparent);
  opacity: 0.7;
}

/* Avatar i gwiazdki */
.review-avatar {
  font-size: 38px;
  margin-bottom: 10px;
  color: var(--km-yellow);
  text-shadow: 0 0 12px rgba(255, 204, 0, 0.35);
}
.review-stars {
  font-size: 20px;
  color: var(--km-yellow);
  margin-bottom: 12px;
  letter-spacing: 2px;
}

/* Tekst opinii i podpis */
.review-box p {
  font-style: italic;
  margin-bottom: 10px;
}
.review-box h4 {
  margin-top: 10px;
  font-weight: 700;
  color: var(--km-yellow);
}

/* Fallback (gdy JS nie działa): pokaż wszystkie opinie w siatce */
.no-js .flexslider .slides > li,
.no-flexslider .flexslider .slides > li {
  display: inline-block !important;
  width: calc(50% - 12px);
  margin: 6px;
}
@media (max-width: 640px) {
  .no-js .flexslider .slides > li,
  .no-flexslider .flexslider .slides > li {
    width: 100%;
    margin: 6px 0;
  }
}
  color: var(--km-yellow);
}
.review-stars {
  font-size: 20px;
  color: var(--km-yellow);
  margin-bottom: 12px;
}.flexslider .slides > li {
  display: block !important;
}/* Sekcja opinii */
.background-overlay {
  background: rgba(0,0,0,0.75);
  padding: 60px 20px;
  color: #fff;
}

/* Flexslider fix */
.flexslider .slides > li {
  display: none;
}
.flexslider .slides > li.flex-active-slide {
  display: block;
}

/* Ramki opinii */
.review-box {
  background: rgba(255,255,255,0.08);
  border: 2px solid var(--km-yellow);
  border-radius: 12px;
  padding: 25px;
  margin: 0 auto;
  max-width: 600px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.review-box:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 28px rgba(0,0,0,0.8);
}

/* Avatar i gwiazdki */
.review-avatar {
  font-size: 36px;
  margin-bottom: 10px;
  color: var(--km-yellow);
}
.review-stars {
  font-size: 20px;
  color: var(--km-yellow);
  margin-bottom: 12px;
  letter-spacing: 2px;
}
.review-box p {
  font-style: italic;
  margin-bottom: 10px;
}
.review-box h4 {
  margin-top: 10px;
  font-weight: 700;
  color: var(--km-yellow);
}.flexslider .slides > li { display:none; }
.flexslider .slides > li.flex-active-slide { display:block; }#opinie-slider .slides > li { display:none; }
#opinie-slider .slides > li.flex-active-slide { display:block; }.search-wrapper {
  max-width: 600px;
  margin: 20px auto;
  text-align: center;
}

.search-input-modern {
  flex: 1;
  padding: 12px 16px;
  border-radius: 8px 0 0 8px;
  border: 2px solid var(--km-yellow);
  font-size: 16px;
  outline: none;
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.search-input-modern::placeholder {
  color: #ccc;
}

.search-btn-modern {
  padding: 12px 20px;
  border-radius: 0 8px 8px 0;
  border: none;
  background: var(--km-yellow);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s ease;
}
.search-btn-modern:hover {
  background: #fff;
  color: #111;
}

.search-results {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}
.search-results li {
  margin: 12px 0;
}
.search-results a {
  color: var(--km-yellow);
  font-weight: bold;
  text-decoration: none;
  font-size: 18px;
}
.search-results a:hover {
  text-decoration: underline;
}

.warning {
  color: #ff6666;
  font-weight: bold;
}

.search-btn-emergency {
  padding: 12px 20px;
  border-radius: 8px;
  border: none;
  background: #ff4444;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  animation: pulse 1.5s infinite;
}
.search-btn-emergency:hover {
  background: #ff0000;
}

@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(255,68,68,0.7); }
  50% { transform: scale(1.05); box-shadow: 0 0 20px rgba(255,68,68,0.9); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(255,68,68,0.7); }
}.search-wrapper {
  max-width: 600px;
  margin: 20px auto;
  text-align: center;
}

.search-input-modern {
  flex: 1;
  padding: 12px 16px;
  border-radius: 8px 0 0 8px;
  border: 2px solid var(--km-yellow);
  font-size: 16px;
  outline: none;
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.search-input-modern::placeholder {
  color: #ccc;
}

.search-btn-modern {
  padding: 12px 20px;
  border-radius: 0 8px 8px 0;
  border: none;
  background: var(--km-yellow);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s ease;
}
.search-btn-modern:hover {
  background: #fff;
  color: #111;
}

.search-results {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}
.search-results li {
  margin: 12px 0;
}
.search-results a {
  color: var(--km-yellow);
  font-weight: bold;
  text-decoration: none;
  font-size: 18px;
}
.search-results a:hover {
  text-decoration: underline;
}

.warning {
  color: #ff6666;
  font-weight: bold;
}

.search-btn-emergency {
  padding: 12px 20px;
  border-radius: 8px;
  border: none;
  background: #ff4444;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  animation: pulse 1.5s infinite;
}
.search-btn-emergency:hover {
  background: #ff0000;
}

@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(255,68,68,0.7); }
  50% { transform: scale(1.05); box-shadow: 0 0 20px rgba(255,68,68,0.9); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(255,68,68,0.7); }
}.search-wrapper {
  max-width: 600px;
  margin: 20px auto;
  text-align: center;
}

/* Formularz jako kapsułka */
.search-wrapper form {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08); /* półprzezroczyste tło */
  border: 2px solid var(--km-yellow);
  border-radius: 10px;
  overflow: hidden; /* żeby input i button były w jednej kapsule */
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* Input */
.search-input-modern {
  flex: 1;
  padding: 12px 16px;
  border: none;
  font-size: 16px;
  outline: none;
  background: transparent;
  color: #fff;
}
.search-input-modern::placeholder {
  color: #ccc;
}

/* Przycisk główny */
.search-btn-modern {
  padding: 12px 20px;
  border: none;
  background: var(--km-yellow);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s ease;
  color: #111;
}
.search-btn-modern:hover {
  background: #fff;
  color: #111;
}

/* Wyniki */
.search-results {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}
.search-results li {
  margin: 12px 0;
}
.search-results a {
  color: var(--km-yellow);
  font-weight: bold;
  text-decoration: none;
  font-size: 18px;
}
.search-results a:hover {
  text-decoration: underline;
}

/* Komunikat */
.warning {
  color: #ff6666;
  font-weight: bold;
}

/* Przycisk awaryjny */
.search-btn-emergency {
  padding: 12px 20px;
  border-radius: 8px;
  border: none;
  background: #ff4444;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  animation: pulse 1.5s infinite;
}
.search-btn-emergency:hover {
  background: #ff0000;
}

/* Animacja pulsowania */
@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(255,68,68,0.7); }
  50% { transform: scale(1.05); box-shadow: 0 0 20px rgba(255,68,68,0.9); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(255,68,68,0.7); }
}.search-results li {
  margin: 12px 0;
  background: rgba(255,255,255,0.05);
  padding: 10px;
  border-radius: 6px;
  transition: background 0.3s ease;
}
.search-results li:hover {
  background: rgba(255,255,255,0.15);
}
.search-results a {
  color: var(--km-yellow);
  font-weight: bold;
  text-decoration: none;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px; /* odstęp między ikonką a tekstem */
}.result-icon {
  width: 22px;
  height: auto;
  vertical-align: middle;
  margin-right: 8px;
}
.search-results a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--km-yellow);
  font-weight: bold;
  text-decoration: none;
  font-size: 18px;
}
.search-results a:hover {
  text-decoration: underline;
}.search-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  margin-top: 20px;
}

.search-card {
  flex: 1 1 180px;
  border-radius: 10px;
  padding: 15px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.search-card:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
}

.search-card .icon {
  font-size: 28px;
  margin-bottom: 10px;
}
.search-card .info span {
  font-size: 14px;
  font-weight: normal;
}/* Sekcja Skup Aut */
.cozy-section {
  background: rgba(255,255,255,0.05);
  padding: 60px 20px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.section-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--km-yellow);
  margin-bottom: 15px;
  text-align: center;
}

.section-description {
  font-size: 18px;
  margin-bottom: 30px;
  text-align: center;
  color: #ddd;
}

.service-photo {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}

.service-info {
  background: rgba(255,255,255,0.08);
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.highlight-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}
.highlight-list li {
  font-size: 20px; /* powiększony tekst */
  margin: 12px 0;
  color: #fff;
}

.cta-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.big-cta {
  font-size: 18px;
  padding: 14px 24px;
  border-radius: 8px;
  transition: all 0.3s ease;
}
.big-cta:hover {
  background: var(--km-yellow);
  color: #111;
  transform: scale(1.05);
}/* Sekcja */
.cozy-section {
  background: rgba(255,255,255,0.05);
  padding: 70px 24px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}

/* Nagłówki sekcji */
.section-title {
  font-size: 36px; /* większy */
  font-weight: 800;
  color: var(--km-yellow);
  margin-bottom: 8px;
  text-align: center;
}
.section-subtitle {
  font-size: 20px; /* większy */
  color: #dcdcdc;
  text-align: center;
  margin-bottom: 28px;
}

/* Zdjęcie w ramce */
.photo-frame {
  background: rgba(255,255,255,0.06);
  border: 2px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 12px;
}
.service-photo {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}

/* Info box */
.service-info {
  background: rgba(255,255,255,0.08);
  padding: 28px;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

/* Badges (nagłówki skrótowe) */
.headline-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 14px;
  color: #111;
}
.badge-fast { background: #ffd24d; }
.badge-legal { background: #8fe3ff; }
.badge-cash { background: #9cff8f; }

/* Lista z ikonami */
.icon-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 24px 0;
}
.icon-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px; /* większy tekst */
  margin: 12px 0;
  color: #fff;
}
.icon-list i {
  color: var(--km-yellow);
  font-size: 22px;
}

/* Dlaczego my */
.why-box {
  background: rgba(0,0,0,0.35);
  border: 2px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 18px;
}
.why-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--km-yellow);
  margin-bottom: 8px;
}
.why-text {
  font-size: 16px;
  color: #eaeaea;
}

/* CTA */
.cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
}
.big-cta {
  font-size: 18px;
  padding: 14px 24px;
  border-radius: 10px;
  transition: all 0.25s ease;
  background: rgba(255,255,255,0.08);
  border: 2px solid var(--km-yellow);
  color: #fff;
}
.big-cta:hover {
  background: var(--km-yellow);
  color: #111;
  transform: translateY(-2px);
}/* Sekcja Części */
.cozy-section {
  background: rgba(255,255,255,0.05);
  padding: 70px 24px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}

.section-title {
  font-size: 36px;
  font-weight: 800;
  color: var(--km-yellow);
  margin-bottom: 8px;
  text-align: center;
}
.section-subtitle {
  font-size: 20px;
  color: #dcdcdc;
  text-align: center;
  margin-bottom: 32px;
}

/* Karty części */
.part-card {
  background: rgba(255,255,255,0.08);
  padding: 24px;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.part-card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.part-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #111;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.part-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--km-yellow);
  margin-bottom: 10px;
}

.part-description {
  font-size: 16px;
  color: #eaeaea;
}

/* CTA */
.big-cta {
  font-size: 18px;
  padding: 14px 24px;
  border-radius: 10px;
  transition: all 0.25s ease;
  background: rgba(255,255,255,0.08);
  border: 2px solid var(--km-yellow);
  color: #fff;
}
.big-cta:hover {
  background: var(--km-yellow);
  color: #111;
  transform: translateY(-2px);
}/* Sekcja Części */
.cozy-section {
  background: rgba(255,255,255,0.05);
  padding: 80px 28px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}

.section-title {
  font-size: 40px; /* powiększony */
  font-weight: 800;
  color: var(--km-yellow);
  margin-bottom: 12px;
  text-align: center;
}
.section-subtitle {
  font-size: 22px; /* powiększony */
  color: #dcdcdc;
  text-align: center;
  margin-bottom: 36px;
}

/* Karty części */
.part-card {
  background: rgba(255,255,255,0.08);
  padding: 28px;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.part-card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.part-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #111;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.part-title {
  font-size: 26px; /* większy */
  font-weight: 700;
  color: var(--km-yellow);
  margin-bottom: 12px;
}

.part-description {
  font-size: 18px; /* większy */
  color: #eaeaea;
  margin-bottom: 12px;
}

.part-count {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,0.3);
  padding: 8px 12px;
  border-radius: 8px;
  display: inline-block;
  margin-top: 10px;
}

/* CTA */
.big-cta {
  font-size: 20px; /* większy */
  padding: 16px 28px;
  border-radius: 10px;
  transition: all 0.25s ease;
  background: rgba(255,255,255,0.08);
  border: 2px solid var(--km-yellow);
  color: #fff;
}
.big-cta:hover {
  background: var(--km-yellow);
  color: #111;
  transform: translateY(-2px);
}/* Ogólne */
.cozy-section {
  background: rgba(255,255,255,0.05);
  padding: 80px 28px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}

/* Nagłówki */
.section-title {
  font-size: 40px;
  font-weight: 900;
  margin-bottom: 12px;
  text-align: center;
}
.highlight-title {
  color: var(--km-yellow);
  text-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}
.section-subtitle {
  font-size: 22px;
  color: #dcdcdc;
  text-align: center;
  margin-bottom: 36px;
}

/* Recykling */
.recycle-card {
  background: rgba(255,255,255,0.08);
  padding: 28px;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.recycle-card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.recycle-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--km-yellow);
  margin-bottom: 12px;
}
.recycle-text {
  font-size: 18px;
  color: #eaeaea;
}

/* O Firmie */
.about-logo {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
.about-description {
  font-size: 20px;
  color: #fff;
  margin-bottom: 20px;
}
.about-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}
.about-list li {
  font-size: 20px;
  margin: 12px 0;
  color: #fff;
  font-weight: 700;
}.about-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}
.about-list li {
  font-size: 20px; /* większy font */
  margin: 14px 0;
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}
.about-list i {
  color: var(--km-yellow);
  font-size: 22px;
}.about-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}
.about-list li {
  font-size: 20px; /* większy font */
  margin: 14px 0;
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}
.about-list i {
  color: var(--km-yellow);
  font-size: 22px;
}.mini-banners {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.08);
  padding: 6px 10px;
  border-radius: 6px;
  transition: background 0.3s ease, transform 0.2s ease;
}
.banner:hover {
  background: var(--km-yellow);
  color: #111;
  transform: translateX(4px);
}

.banner img {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  object-fit: cover;
}

.banner span {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.banner:hover span {
  color: #111;
}.search-results li {
  list-style: none;
  margin: 10px 0;
  padding: 10px;
  background: rgba(255,255,255,0.1);
  border-radius: 6px;
  transition: background 0.3s ease;
}

.search-results li:hover {
  background: rgba(255,255,255,0.2);
}

.result-icon {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-right: 10px;
}.search-results li {
  list-style: none;
  margin: 10px 0;
  padding: 10px;
  background: rgba(255,255,255,0.1);
  border-radius: 6px;
  transition: background 0.3s ease;
}

.search-results li:hover {
  background: rgba(255,255,255,0.2);
}

.result-icon {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-right: 10px;
}.hero-caption-modern {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 40px 20px;
  text-align: center;
  color: #fff;
}

.news-box {
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid var(--km-yellow);
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}

.news-box h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--km-yellow);
  margin-bottom: 10px;
}

.news-box p {
  font-size: 16px;
  line-height: 1.4;
  color: #eee;
}.hero-caption-modern {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 40px 20px;
  text-align: center;
}

/* HERO BOXES – CZYTELNOŚĆ I PREMIUM LOOK */
.hero-caption-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: auto;
    padding: 60px 20px;
}

.banner-box {
    background: rgba(0, 0, 0, .65);
    backdrop-filter: blur(6px);
    color: #ffffff;
    padding: 32px;
    border-radius: 18px;
    text-decoration: none;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .45);
    transition: transform .3s ease, box-shadow .3s ease;
}

.banner-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 55px rgba(0, 0, 0, .6);
}

/* WYRÓŻNIONY SKUP AUT */
.banner-box.highlight {
    background: linear-gradient(135deg, #f4c400, #ffdd55);
    color: #111;
}

.banner-box.highlight .banner-icon,
.banner-box.highlight h2,
.banner-box.highlight p,
.banner-box.highlight li {
    color: #111;
}

/* IKONA */
.banner-icon {
    font-size: 42px;
    margin-bottom: 16px;
}

/* NAGŁÓWKI – DUŻE I CZYTELNE */
.banner-box h2 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 14px;
    letter-spacing: 0.5px;
}

/* OPIS – WYRAŹNY FONT */
.banner-desc {
    font-size: 1.15rem;
    line-height: 1.65;
    margin-bottom: 16px;
    font-weight: 500;
}

/* LISTA KORZYŚCI */
.banner-list {
    list-style: none;
    padding: 0;
    margin: 0 0 18px 0;
}

.banner-list li {
    font-size: 1.05rem;
    margin-bottom: 6px;
    font-weight: 600;
}

/* CTA */
.banner-cta {
    display: inline-block;
    margin-top: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
}

.banner-cta.strong {
    background: #111;
    color: #fff;
    padding: 10px 18px;
    border-radius: 30px;
}

.search-input-modern {
  width: 80%;
  padding: 12px;
  border: 2px solid var(--km-yellow);
  border-radius: 8px;
  font-size: 15px;
  outline: none;
}

.search-btn-modern {
  padding: 12px 20px;
  margin-left: 10px;
  background: var(--km-yellow);
  border: none;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s ease;
}

.search-btn-modern:hover {
  background: #ffcc00;
}.banner-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid var(--km-yellow);
  border-radius: 12px;
  padding: 25px;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.banner-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  background: rgba(0, 0, 0, 0.75);
}

.banner-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 15px;
  color: var(--km-yellow);
}

.banner-icon svg {
  width: 100%;
  height: 100%;
}

.banner-box h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--km-yellow);
  margin-bottom: 10px;
}

.banner-box p {
  font-size: 15px;
  line-height: 1.4;
  color: #eee;
}.search-wrapper {
  margin-top: 15px;
  width: 100%;
}

.search-input-modern {
  width: 80%;
  padding: 12px;
  border: 2px solid var(--km-yellow);
  border-radius: 8px;
  font-size: 15px;
  outline: none;
}

.search-btn-modern {
  padding: 12px 20px;
  margin-left: 10px;
  background: var(--km-yellow);
  border: none;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s ease;
}

.search-btn-modern:hover {
  background: #ffcc00;
}.animated-search {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeSlideUp 0.8s ease forwards;
  animation-delay: 0.3s; /* lekka zwłoka dla efektu */
}

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}.search-input-modern {
  width: 80%;
  padding: 12px;
  border: 2px solid var(--km-yellow);
  border-radius: 8px;
  font-size: 15px;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.search-input-modern:hover,
.search-input-modern:focus {
  border-color: #ffcc00;
  box-shadow: 0 0 8px rgba(255, 204, 0, 0.7);
}

.search-btn-modern {
  padding: 12px 20px;
  margin-left: 10px;
  background: var(--km-yellow);
  border: none;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.search-btn-modern:hover {
  background: #ffcc00;
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(255, 204, 0, 0.8);
}.banner-icon svg {
  width: 100%;
  height: 100%;
  transition: transform 0.4s ease, color 0.4s ease;
  animation: pulseIcon 2s infinite;
}

.banner-box:hover .banner-icon svg {
  transform: rotate(10deg) scale(1.1);
  color: #ffcc00; /* lekka zmiana koloru przy hover */
}

@keyframes pulseIcon {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}.hero-caption-modern .banner-box {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeSlideUp 0.8s ease forwards;
}

.hero-caption-modern .banner-box:nth-child(1) {
  animation-delay: 0.2s;
}

.hero-caption-modern .banner-box:nth-child(2) {
  animation-delay: 0.4s;
}

.hero-caption-modern .banner-box:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}.banner-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid var(--km-yellow);
  border-radius: 12px;
  padding: 25px;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease, border-color 0.4s ease;
  perspective: 1000px; /* dla efektu 3D */
}

.banner-box:hover {
  transform: translateY(-8px) rotateX(3deg) rotateY(3deg) scale(1.03);
  box-shadow: 0 10px 20px rgba(255, 204, 0, 0.5);
  background: rgba(0, 0, 0, 0.75);
  border-color: #ffcc00;
}.hero-full {
  opacity: 0;
  animation: heroFadeIn 1.2s ease forwards;
  animation-delay: 0.2s;
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
    background-position: center top;
    filter: brightness(0.6);
  }
  to {
    opacity: 1;
    background-position: center center;
    filter: brightness(1);
  }
}

/* Banery wchodzą sekwencyjnie */
.hero-caption-modern .banner-box {
  opacity: 0;
  transform: translateY(40px);
  animation: fadeSlideUp 0.9s ease forwards;
}

.hero-caption-modern .banner-box:nth-child(1) {
  animation-delay: 0.6s;
}
.hero-caption-modern .banner-box:nth-child(2) {
  animation-delay: 0.9s;
}
.hero-caption-modern .banner-box:nth-child(3) {
  animation-delay: 1.2s;
}

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero-background {
  background-image: linear-gradient(
      120deg,
      rgba(255, 204, 0, 0.25),
      rgba(0, 0, 0, 0.6)
    ),
    url('images/tlo.png');
  background-size: cover;
  background-position: center;
  animation: backgroundMove 15s ease-in-out infinite alternate;
}

@keyframes backgroundMove {
  from {
    background-position: center top;
    filter: brightness(0.9);
  }
  to {
    background-position: center bottom;
    filter: brightness(1.1);
  }
}.hero-full {
  position: relative;
  overflow: hidden;
}

.hero-full::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('images/tlo.png') center/cover no-repeat;
  transform: translateY(0);
  z-index: -1;
  will-change: transform;
}.hero-full {
  position: relative;
  overflow: hidden;
  height: 480px;
}

.hero-background {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      120deg,
      rgba(255, 204, 0, 0.25),
      rgba(0, 0, 0, 0.6)
    ),
    url('images/slider/karkonosze_zlom.jpg') center/cover no-repeat;
  z-index: -1;
  will-change: background-position;
}

/* Animacja gradientu */
.hero-background {
  animation: gradientShift 15s ease-in-out infinite alternate;
}

@keyframes gradientShift {
  from { background-position: center top; filter: brightness(0.9); }
  to   { background-position: center bottom; filter: brightness(1.1); }
}

/* Banery */
.hero-caption-modern {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 40px 20px;
  text-align: center;
  position: relative;
  z-index: 10;
}

.banner-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid var(--km-yellow);
  border-radius: 12px;
  padding: 25px;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease, border-color 0.4s ease;
  perspective: 1000px;
  opacity: 0;
  transform: translateY(40px);
  animation: fadeSlideUp 0.9s ease forwards;
}

.banner-box:nth-child(1) { animation-delay: 0.6s; }
.banner-box:nth-child(2) { animation-delay: 0.9s; }
.banner-box:nth-child(3) { animation-delay: 1.2s; }

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

.banner-box:hover {
  transform: translateY(-8px) rotateX(3deg) rotateY(3deg) scale(1.03);
  box-shadow: 0 10px 20px rgba(255, 204, 0, 0.5);
  background: rgba(0, 0, 0, 0.75);
  border-color: #ffcc00;
}

/* Ikony */
.banner-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 15px;
  color: var(--km-yellow);
}

.banner-icon svg {
  width: 100%;
  height: 100%;
  transition: transform 0.4s ease, color 0.4s ease;
  animation: pulseIcon 2s infinite;
}

.banner-box:hover .banner-icon svg {
  transform: rotate(10deg) scale(1.1);
  color: #ffcc00;
}

@keyframes pulseIcon {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Wyszukiwarka */
.search-wrapper {
  margin-top: 15px;
  width: 100%;
}

.search-input-modern {
  width: 80%;
  padding: 12px;
  border: 2px solid var(--km-yellow);
  border-radius: 8px;
  font-size: 15px;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.search-input-modern:hover,
.search-input-modern:focus {
  border-color: #ffcc00;
  box-shadow: 0 0 8px rgba(255, 204, 0, 0.7);
}

.search-btn-modern {
  padding: 12px 20px;
  margin-left: 10px;
  background: var(--km-yellow);
  border: none;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.search-btn-modern:hover {
  background: #ffcc00;
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(255, 204, 0, 0.8);
}/* HEADER */
#main-header {
  background: rgba(0,0,0,0.85);
  border-bottom: 3px solid var(--km-yellow);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

#main-header .logo a {
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
}

#nav-wrap {
  margin: 0;
}

#nav {
  list-style: none;
  display: flex;
  gap: 20px;
  align-items: center;
}

#nav li {
  position: relative;
}

#nav li a {
  color: #fff;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.3s ease;
  text-decoration: none;
}

#nav li a:hover {
  background: var(--km-yellow);
  color: #000;
  box-shadow: 0 0 8px rgba(255,204,0,0.7);
}

#nav li.current a {
  border-bottom: 3px solid var(--km-yellow);
}

/* Search in menu */
.search-input-menu {
  padding: 6px 10px;
  border-radius: 6px;
  border: 2px solid var(--km-yellow);
  font-size: 14px;
}

.search-btn {
  background: var(--km-yellow);
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.search-btn:hover {
  background: #ffcc00;
}.hero-cta {
  margin-top: 25px;
  display: flex;
  gap: 15px;
  justify-content: center;
  position: relative;
  z-index: 11;
}

.hero-cta .button {
  font-size: 16px;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  background: var(--km-yellow);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: transform 0.2s ease, background 0.3s ease;
}

.hero-cta .button:hover {
  transform: translateY(-3px);
  background: #ffcc00;
  color: #000;
}/* HEADER */
#main-header {
  background: rgba(0,0,0,0.9);
  border-bottom: 3px solid var(--km-yellow);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  animation: slideDown 0.8s ease forwards;
}

@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.logo a {
  font-size: 22px;
  font-weight: 800;
  color: var(--km-yellow);
  text-decoration: none;
}

.nav {
  list-style: none;
  display: flex;
  gap: 20px;
  align-items: center;
}

.nav li a {
  color: #fff;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.nav li a:hover {
  background: var(--km-yellow);
  color: #000;
  box-shadow: 0 0 8px rgba(255,204,0,0.7);
}

.nav li.current a {
  border-bottom: 3px solid var(--km-yellow);
}

/* Search in menu */
.search-input-menu {
  padding: 6px 10px;
  border-radius: 6px;
  border: 2px solid var(--km-yellow);
  font-size: 14px;
}

.search-btn {
  background: var(--km-yellow);
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.search-btn:hover {
  background: #ffcc00;
}

/* HERO */
.hero-full {
  position: relative;
  height: 480px;
  overflow: hidden;
}

.hero-background {
  background-image: url('images/slider/karkonosze_zlom.jpg');
  background-size: cover;
  background-position: center;
  height: 100%;
  position: relative;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}

.hero-cta .button {
  font-size: 16px;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  background: var(--km-yellow);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: transform 0.2s ease, background 0.3s ease;
}

.hero-cta .button:hover {
  transform: translateY(-3px);
  background: #ffcc00;
  color: #000;
}

/* Banner boxes */
.hero-caption-modern {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 40px 20px;
  text-align: center;
  position: relative;
  z-index: 10;
}

.banner-box {
  background: rgba(0,0,0,0.6);
  border: 2px solid var(--km-yellow);
  border-radius: 12px;
  padding: 25px;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease, border-color 0.4s ease;
}

.banner-box:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 10px 20px rgba(255,204,0,0.5);
  background: rgba(0,0,0,0.75);
  border-color: #ffcc00;
}

.banner-icon {
  font-size: 36px;
  margin-bottom: 15px;
  color: var(--km-yellow);
}/* HEADER */
#main-header {
  background: rgba(0,0,0,0.9);
  border-bottom: 3px solid var(--km-yellow);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  animation: slideDown 0.8s ease forwards;
}

@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.logo a {
  font-size: 22px;
  font-weight: 800;
  color: var(--km-yellow);
  text-decoration: none;
}

.nav {
  list-style: none;
  display: flex;
  gap: 20px;
  align-items: center;
}

.nav li a {
  color: #fff;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.nav li a:hover {
  background: var(--km-yellow);
  color: #000;
  box-shadow: 0 0 8px rgba(255,204,0,0.7);
}

.nav li.current a {
  border-bottom: 3px solid var(--km-yellow);
}

/* Search in menu */
.search-input-menu {
  padding: 6px 10px;
  border-radius: 6px;
  border: 2px solid var(--km-yellow);
  font-size: 14px;
}

.search-btn {
  background: var(--km-yellow);
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.search-btn:hover {
  background: #ffcc00;
}

/* HERO */
.hero-full {
  position: relative;
  height: 480px;
  overflow: hidden;
}

.hero-background {
  background-image: url('images/slider/karkonosze_zlom.jpg');
  background-size: cover;
  background-position: center;
  height: 100%;
  position: relative;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}

.hero-cta {
  margin-top: 25px;
  display: flex;
  gap: 15px;
  justify-content: center;
  position: relative;
  z-index: 11;
}

.hero-cta .button {
  font-size: 16px;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  background: var(--km-yellow);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: transform 0.2s ease, background 0.3s ease;
}

.hero-cta .button:hover {
  transform: translateY(-3px);
  background: #ffcc00;
  color: #000;
}

/* Banner boxes */
.hero-caption-modern {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 40px 20px;
  text-align: center;
  position: relative;
  z-index: 10;
}

.banner-box {
  background: rgba(0,0,0,0.6);
  border: 2px solid var(--km-yellow);
  border-radius: 12px;
  padding: 25px;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease, border-color 0.4s ease;
}

.banner-box:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 10px /* HEADER */
#main-header {
  background: rgba(0,0,0,0.95);
  border-bottom: 3px solid var(--km-yellow);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* NAV */
.nav {
  list-style: none;
  display: flex;
  gap: 15px;
  align-items: center;
  margin: 0;
  padding: 0;
}

.nav li {
  position: relative;
}

.nav li a {
  color: #fff;
  font-weight: 600;
  padding: 8px 14px;
  border: 2px solid transparent;
  border-radius: 6px;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

/* Hover efekt */
.nav li a:hover {
  background: var(--km-yellow);
  color: #000;
  border-color: var(--km-yellow);
  box-shadow: 0 0 10px rgba(255,204,0,0.7);
}

/* Aktywna sekcja */
.nav li.current a {
  border: 2px solid var(--km-yellow);
  background: rgba(255,204,0,0.15);
  color: var(--km-yellow);
}

/* Search w menu */
.search-input-menu {
  padding: 6px 10px;
  border-radius: 6px;
  border: 2px solid var(--km-yellow);
  font-size: 14px;
  background: #111;
  color: #fff;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.search-input-menu:focus {
  border-color: #ffcc00;
  box-shadow: 0 0 8px rgba(255,204,0,0.7);
  outline: none;
}

.search-btn {
  background: var(--km-yellow);
  border: 2px solid var(--km-yellow);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  color: #000;
}

.search-btn:hover {
  background: #ffcc00;
  transform: scale(1.05);
}/* HEADER */
#main-header {
  background: rgba(0,0,0,0.95);
  border-bottom: 3px solid var(--km-yellow);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  animation: slideDown 0.8s ease forwards;
}

@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* NAV */
.nav {
  list-style: none;
  display: flex;
  gap: 15px;
  align-items: center;
  margin: 0;
  padding: 0;
}

.nav li a {
  color: #fff;
  font-weight: 600;
  padding: 8px 14px;
  border: 2px solid transparent;
  border-radius: 6px;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

/* Hover efekt */
.nav li a:hover {
  background: var(--km-yellow);
  color: #000;
  border-color: var(--km-yellow);
  box-shadow: 0 0 10px rgba(255,204,0,0.7);
}

/* Aktywna sekcja */
.nav li.current a {
  border: 2px solid var(--km-yellow);
  background: rgba(255,204,0,0.15);
  color: var(--km-yellow);
}

/* Search w menu */
.search-input-menu {
  padding: 6px 10px;
  border-radius: 6px;
  border: 2px solid var(--km-yellow);
  font-size: 14px;
  background: #111;
  color: #fff;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.search-input-menu:focus {
  border-color: #ffcc00;
  box-shadow: 0 0 8px rgba(255,204,0,0.7);
  outline: none;
}

.search-btn {
  background: var(--km-yellow);
  border: 2px solid var(--km-yellow);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  color: #000;
}

.search-btn:hover {
  background: #ffcc00;
  transform: scale(1.05);
}/* HEADER podstawowy */
#main-header {
  background: rgba(0,0,0,0.95);
  border-bottom: 3px solid var(--km-yellow);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

/* HEADER po scrollu */
#main-header.scrolled {
  background: rgba(255, 204, 0, 0.95); /* żółte tło */
  box-shadow: 0 4px 20px rgba(255,204,0,0.6);
}

#main-header.scrolled .nav li a {
  color: #000; /* czarny tekst na żółtym tle */
}

#main-header.scrolled .nav li a i {
  color: #000; /* ikony też zmieniają kolor */
}/* HEADER podstawowy */
#main-header {
  background: linear-gradient(to right, rgba(0,0,0,0.95), rgba(30,30,30,0.95));
  border-bottom: 3px solid var(--km-yellow);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: background 0.6s ease, box-shadow 0.6s ease;
}

/* HEADER po scrollu */
#main-header.scrolled {
  background: linear-gradient(to right, rgba(255,204,0,0.95), rgba(255,230,150,0.95));
  box-shadow: 0 4px 20px rgba(255,204,0,0.6);
}

#main-header.scrolled .nav li a {
  color: #000;
}

#main-header.scrolled .nav li a i {
  color: #000;
}/* Aktywna sekcja */
.nav li.current a {
  border: 2px solid var(--km-yellow);
  background: rgba(255,204,0,0.15);
  color: var(--km-yellow);
  box-shadow: 0 0 12px rgba(255,204,0,0.7); /* efekt glow */
}

/* Glow pulsujący */
@keyframes glowPulse {
  0% { box-shadow: 0 0 6px rgba(255,204,0,0.5); }
  50% { box-shadow: 0 0 14px rgba(255,204,0,0.9); }
  100% { box-shadow: 0 0 6px rgba(255,204,0,0.5); }
}

.nav li.current a {
  animation: glowPulse 2s infinite;
}/* Ikony w menu */
.nav li a i {
  color: var(--km-yellow);
  font-size: 16px;
  transition: transform 0.3s ease, color 0.3s ease;
}

/* Hover: ikona podskakuje i zmienia kolor */
.nav li a:hover i {
  color: #000;
  transform: translateY(-3px) scale(1.2);
}

/* Aktywna sekcja: ikona pulsuje */
.nav li.current a i {
  color: var(--km-yellow);
  animation: iconPulse 1.5s infinite;
}

@keyframes iconPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}/* Sekcja kontakt */
.contact-section {
  text-align: center;
  padding: 60px 20px;
  background: #111; /* ciemne tło */
  color: #fff;
}

/* Wyróżniający przycisk KONTAKT */
.contact-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 14px 28px;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  color: #000;
  background: var(--km-yellow);
  border: 3px solid var(--km-yellow);
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(255,204,0,0.7);
  transition: all 0.3s ease;
}

/* Hover efekt */
.contact-btn:hover {
  background: #000;
  color: var(--km-yellow);
  border-color: var(--km-yellow);
  box-shadow: 0 0 20px rgba(255,204,0,1);
  transform: scale(1.08);
}/* HEADER */
#main-header {
  background: linear-gradient(to right, rgba(0,0,0,0.95), rgba(30,30,30,0.95));
  border-bottom: 3px solid var(--km-yellow);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: background 0.6s ease, box-shadow 0.6s ease;
}

/* Logo */
.logo a {
  font-size: 22px;
  font-weight: 800;
  color: var(--km-yellow);
  text-decoration: none;
}

/* Mobile toggle */
.mobile-btn {
  font-size: 24px;
  background: none;
  border: none;
  color: var(--km-yellow);
  cursor: pointer;
  display: none;
}

/* Navigation */
#nav-wrap {
  display: flex;
  justify-content: flex-end;
}

.nav {
  list-style: none;
  display: flex;
  gap: 15px;
  align-items: center;
  margin: 0;
  padding: 0;
}

.nav li a {
  color: #fff;
  font-weight: 600;
  padding: 8px 14px;
  border: 2px solid transparent;
  border-radius: 6px;
  transition: all 0.3s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav li a:hover {
  background: var(--km-yellow);
  color: #000;
  border-color: var(--km-yellow);
  box-shadow: 0 0 10px rgba(255,204,0,0.7);
}

.nav li.current a {
  border: 2px solid var(--km-yellow);
  background: rgba(255,204,0,0.15);
  color: var(--km-yellow);
  box-shadow: 0 0 12px rgba(255,204,0,0.7);
  animation: glowPulse 2s infinite;
}

@keyframes glowPulse {
  0% { box-shadow: 0 0 6px rgba(255,204,0,0.5); }
  50% { box-shadow: 0 0 14px rgba(255,204,0,0.9); }
  100% { box-shadow: 0 0 6px rgba(255,204,0,0.5); }
}

/* KONTAKT wyróżniony */
.nav li.contact-btn a {
  background: var(--km-yellow);
  color: #000;
  border: 2px solid var(--km-yellow);
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(255,204,0,0.8);
  transition: all 0.3s ease;
}

.nav li.contact-btn a:hover {
  background: #000;
  color: var(--km-yellow);
  border-color: var(--km-yellow);
  box-shadow: 0 0 18px rgba(255,204,0,1);
  transform: scale(1.08);
}

/* Search */
.search-input-menu {
  padding: 6px 10px;
  border-radius: 6px;
  border: 2px solid var(--km-yellow);
  font-size: 14px;
  background: #111;
  color: #fff;
}

.search-btn {
  background: var(--km-yellow);
  border: 2px solid var(--km-yellow);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  color: #000;
  transition: background 0.3s ease, transform 0.2s ease;
}

.search-btn:hover {
  background: #ffcc00;
  transform: scale(1.05);
}

/* Responsive */
@media screen and (max-width: 768px) {
  .mobile-btn {
    display: block;
  }

  #nav-wrap {
    position: absolute;
    top: 60px;
    right: 0;
    background: #000;
    width: 100%;
    display: none;
    flex-direction: column;
    padding: 20px;
  }

  #nav-wrap.open {
    display: flex;
  }

  .nav {
    flex-direction: column;
    gap: 12px;
  }

  .nav li a {
    width: 100%;
    justify-content: center;
  }

  .search-menu form {
    flex-direction: column;
    gap: 8px;
  }
}/* HEADER */
#main-header {
  background: linear-gradient(to right, rgba(0,0,0,0.95), rgba(30,30,30,0.95));
  border-bottom: 3px solid var(--km-yellow);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: background 0.6s ease, box-shadow 0.6s ease;
}

/* Logo */
.logo a {
  font-size: 22px;
  font-weight: 800;
  color: var(--km-yellow);
  text-decoration: none;
}

/* Mobile toggle */
.mobile-btn {
  font-size: 24px;
  background: none;
  border: none;
  color: var(--km-yellow);
  cursor: pointer;
  display: none;
}

/* Navigation */
#nav-wrap {
  display: flex;
  justify-content: flex-end;
}

.nav {
  list-style: none;
  display: flex;
  gap: 15px;
  align-items: center;
  margin: 0;
  padding: 0;
}

.nav li a {
  color: #fff;
  font-weight: 600;
  padding: 8px 14px;
  border: 2px solid transparent;
  border-radius: 6px;
  transition: all 0.3s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav li a:hover {
  background: var(--km-yellow);
  color: #000;
  border-color: var(--km-yellow);
  box-shadow: 0 0 10px rgba(255,204,0,0.7);
}

.nav li.contact-btn a {
  background: var(--km-yellow);
  color: #000;
  border: 2px solid var(--km-yellow);
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(255,204,0,0.8);
  transition: all 0.3s ease;
}

.nav li.contact-btn a:hover {
  background: #000;
  color: var(--km-yellow);
  border-color: var(--km-yellow);
  box-shadow: 0 0 18px rgba(255,204,0,1);
  transform: scale(1.08);
}

/* Search */
.search-input-menu {
  padding: 6px 10px;
  border-radius: 6px;
  border: 2px solid var(--km-yellow);
  font-size: 14px;
  background: #111;
  color: #fff;
}

.search-btn {
  background: var(--km-yellow);
  border: 2px solid var(--km-yellow);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  color: #000;
  transition: background 0.3s ease, transform 0.2s ease;
}

.search-btn:hover {
  background: #ffcc00;
  transform: scale(1.05);
}

/* Responsive */
@media screen and (max-width: 768px) {
  .mobile-btn {
    display: block;
  }

  #nav-wrap {
    position: absolute;
    top: 60px;
    right: 0;
    background: #000;
    width: 100%;
    display: none;
    flex-direction: column;
    padding: 20px;
  }

  #nav-wrap.open {
    display: flex;
  }

  .nav {
    flex-direction: column;
    gap: 12px;
  }

  .nav li a {
    width: 100%;
    justify-content: center;
  }

  .search-menu form {
    flex-direction: column;
    gap: 8px;
  }
}.top-contact-bar {
  background-color: #1a1a1a;
  color: #f0f0f0;
  font-size: 14px;
  padding: 8px 0;
  border-bottom: 1px solid #444;
}

.top-contact-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.contact-info span {
  margin-right: 20px;
  display: inline-block;
}

.contact-info i {
  margin-right: 6px;
  color: #ffcc00;
}

.contact-actions .btn-contact-top {
  background-color: #ffcc00;
  color: #000;
  padding: 6px 12px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.contact-actions .btn-contact-top:hover {
  background-color: #e6b800;
}/* Pasek kontaktowy */
.top-contact-bar {
  background: linear-gradient(to right, #111, #222);
  color: #f0f0f0;
  font-size: 14px;
  padding: 6px 0;
  border-bottom: 1px solid #444;
  box-shadow: 0 0 10px rgba(255, 255, 0, 0.3);
  position: relative;
  z-index: 1000;
}

.top-contact-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.contact-info span {
  margin-right: 20px;
}

.contact-info i {
  margin-right: 6px;
  color: #ffcc00;
}

.btn-contact-top {
  background-color: #ffcc00;
  color: #000;
  padding: 6px 12px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.btn-contact-top:hover {
  background-color: #e6b800;
}

/* HEADER + MENU */
#main-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: #1a1a1a;
  box-shadow: 0 0 15px rgba(255, 255, 0, 0.4);
  margin-top: -1px; /* podciąga header do góry */
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Logo */
.logo a {
  font-size: 24px;
  font-weight: bold;
  color: #ffcc00;
  text-decoration: none;
  text-shadow/* Cały header */
#main-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: #1a1a1a;
  box-shadow: 0 0 15px rgba(255, 255, 0, 0.4);
}

/* Pasek kontaktowy */
.top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to right, #111, #222);
  color: #f0f0f0;
  font-size: 21px;
  padding: 6px 20px;
  border-bottom: 5x solid #444;
}

.top-header .contact-info span {
  margin-right: 20px;
}

.top-header .contact-info i {
  margin-right: 6px;
  color: #ffcc00;
}

.btn-contact-top {
  background-color: #ffcc00;
  color: #000;
  padding: 1px 12px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.btn-contact-top:hover {
  background-color: #e6b800;
}

/* Logo + menu */
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.logo a {
  font-size: 24px;
  font-weight: bold;
  color: #ffcc00;
  text-decoration: none;
  text-shadow: 0 0 5px rgba(255, 255, 0, 0.6);
}/* MENU jako przyciski */
.nav a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 16px;
  margin: 4px;
  border: 1px solid #666;
  border-radius: 6px;
  background: linear-gradient(to bottom, #2c2c2c, #1a1a1a);
  box-shadow: inset 0 0 0 rgba(0,0,0,0), 0 2px 4px rgba(0,0,0,0.5);
  transition: all 0.3s ease;
}

.nav a:hover {
  background: linear-gradient(to bottom, #ffcc00, #e6b800);
  color: #000;
  border-color: #ffcc00;
  box-shadow: 0 0 8px rgba(255, 204, 0, 0.8);
}

/* Ikony w menu */
.nav a i {
  margin-right: 6px;
  color: #ffcc00;
}

/* Podciągnięcie menu bliżej loga */
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 20px;
  flex-wrap: wrap;
}

/* Logo */
.logo a {
  font-size: 26px;
  font-weight: bold;
  color: #ffcc00;
  text-decoration: none;
  text-shadow: 0 0 6px rgba(255, 255, 0, 0.7);
}/* ANIMACJA wejścia dla kontaktu i menu */
.top-header,
.header-inner {
  animation: fadeSlideDown 0.8s ease-out forwards;
  opacity: 0;
}

@keyframes fadeSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* EFEKT kliknięcia przycisku menu */
.nav a:active {
  transform: scale(0.96);
  box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
}
/* Aktywny element menu */
.nav a.active {
  background: linear-gradient(to bottom, #ffcc00, #e6b800);
  color: #000;
  border-color: #ffcc00;
  box-shadow: 0 0 12px rgba(255, 204, 0, 0.9);
  animation: ledPulse 1.5s infinite alternate;
}

/* LED pulsujący */
@keyframes ledPulse {
  0% {
    box-shadow: 0 0 6px rgba(255, 204, 0, 0.6), 0 0 12px rgba(255, 204, 0, 0.4);
  }
  100% {
    box-shadow: 0 0 16px rgba(255, 204, 0, 1), 0 0 24px rgba(255, 204, 0, 0.8);
  }
}/* Aktywny element menu */
.nav a.active {
  background: linear-gradient(to bottom, #ffcc00, #e6b800);
  color: #000;
  border-color: #ffcc00;
  box-shadow: 0 0 12px rgba(255, 204, 0, 0.9);
  animation: ledPulse 1.5s infinite alternate;
}

/* LED pulsujący */
@keyframes ledPulse {
  0% {
    box-shadow: 0 0 6px rgba(255, 204, 0, 0.6), 0 0 12px rgba(255, 204, 0, 0.4);
  }
  100% {
    box-shadow: 0 0 16px rgba(255, 204, 0, 1), 0 0 24px rgba(255, 204, 0, 0.8);
  }
}/* Header */
#main-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: #1a1a1a;
  box-shadow: 0 0 15px rgba(255, 255, 0, 0.4);
}

/* Logo + menu w jednej linii */
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center; /* wyrównanie pionowe */
  padding: 8px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Logo */
.logo a {
  font-size: 26px;
  font-weight: bold;
  color: #ffcc00;
  text-decoration: none;
  text-shadow: 0 0 6px rgba(255, 255, 0, 0.7);
}

/* Menu jako przyciski */
.nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav li {
  margin: 0 6px;
}

.nav a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 14px;
  border: 1px solid #666; /* obramowanie */
  border-radius: 5px;
  background: linear-gradient(to bottom, #2c2c2c, #1a1a1a);
  transition: all 0.3s ease;
}

.nav a:hover {
  background: linear-gradient(to bottom, #ffcc00, #e6b800);
  color: #000;
  border-color: #ffcc00;
  box-shadow: 0 0 8px rgba(255, 204, 0, 0.8);
}

/* Ikony w menu */
.nav a i {
  margin-right: 6px;
  color: #ffcc00;
}/* Logo + menu obok siebie */
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center; /* wyrównanie pionowe */
  padding: 8px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Menu jako przyciski */
.nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav li {
  margin: 0 6px;
}

.nav a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 14px;
  border: 1px solid #666; /* obramowanie */
  border-radius: 5px;
  background: linear-gradient(to bottom, #2c2c2c, #1a1a1a);
  transition: all 0.3s ease;
}

.nav a:hover {
  background: linear-gradient(to bottom, #ffcc00, #e6b800);
  color: #000;
  border-color: #ffcc00;
  box-shadow: 0 0 8px rgba(255, 204, 0, 0.8);
}

/* Ikony w menu */
.nav a i {
  margin-right: 6px;
  color: #ffcc00;
}/* ==== FIX: menu obok loga, bez sztywnej wysokości ==== */

/* Kontener nagłówka w jednej linii */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 20px;
}

/* #nav-wrap jako flex, nie inline-block */
#nav-wrap {
  display: flex !important;
  align-items: center;
  font: 12px "raleway-heavy", sans-serif; /* lekko większy */
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

/* Lista jako flex, bez min-height */
ul#nav {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  min-height: 0 !important;
  margin: 0;
  padding: 0;
  text-align: left;
}

/* Pozycje bez sztywnej wysokości */
ul#nav li {
  position: relative;
  list-style: none;
  height: auto !important;
  display: inline-flex;
  align-items: center;
  margin: 0 6px;
}

/* Linki jako przyciski z obramowaniem */
ul#nav li a {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 8px 14px !important;      /* mniejszy padding niż 17/38 */
  line-height: 1 !important;          /* usuwa 38px line-height */
  text-decoration: none;
  color: #e0e6ea;
  border: 1px solid #666;             /* obramowanie przycisków */
  border-radius: 5px;
  background: linear-gradient(to bottom, #2c2c2c, #1a1a1a);
  transition: all 0.2s ease-in-out;
}

/* Ikony w menu */
ul#nav li a i {
  color: #ffcc00;
}

/* Hover: żółty LED glow */
ul#nav li a:hover {
  color: #000;
  background: linear-gradient(to bottom, #ffcc00, #e6b800);
  border-color: #ffcc00;
  box-shadow: 0 0 8px rgba(255, 204, 0, 0.8);
}

/* Active/click */
ul#nav li a:active {
  transform: scale(0.96);
  box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
}

/* Aktualnie wybrany (zastępuje .current) */
ul#nav li.current a,
ul#nav li a.active {
  background: linear-gradient(to bottom, #ffcc00, #e6b800) !important;
  color: #000 !important;
  border-color: #ffcc00 !important;
  box-shadow: 0 0 12px rgba(255, 204, 0, 0.9);
}

/* Ukrycie zbędnego toggle w desktopie (jeśli jest) */
#nav-wrap > a {
  display: none;
}

/* Mobilka: kolumna, pełna szerokość przycisków */
@media (max-width: 768px) {
  #nav-wrap {
    display: none;              /* pokazywane przez .active po kliknięciu */
    flex-direction: column;
    width: 100%;
    background: #1a1a1a;
    padding: 8px 12px;
  }
  #nav-wrap.active {
    display: flex;
  }
  ul#nav {
    flex-direction: column;
    align-items: stretch;
  }
  ul#nav li {
    margin: 6px 0;
  }
  ul#nav li a {
    width: 100%;
    justify-content: center;
  }
}/* Header inner: logo + menu w jednej linii */
.header-inner {
  display: flex;
  align-items: center;   /* wyrównanie pionowe */
  justify-content: space-between;
  padding: 8px 20px;
}

/* Nav wrap jako flex */
#nav-wrap {
  display: flex !important;
  align-items: center;
}

/* Lista menu jako flex */
ul#nav {
  display: flex !important;
  align-items: center;
  margin: 0;
  padding: 0;
}

/* Pozycje menu bez sztywnej wysokości */
ul#nav li {
  position: relative;
  list-style: none;
  height: auto !important;   /* usuwa 72px */
  display: flex;
  align-items: center;
  margin: 0 6px;
}

/* Linki jako przyciski */
ul#nav li a {
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding: 8px 14px !important;
  line-height: 1.2 !important;   /* usuwa 38px line-height */
  text-decoration: none;
  color: #e0e6ea;
  border: 1px solid #666;
  border-radius: 5px;
  background: linear-gradient(to bottom, #2c2c2c, #1a1a1a);
  transition: all 0.3s ease;
}

/* Hover efekt */
ul#nav li a:hover {
  background: linear-gradient(to bottom, #ffcc00, #e6b800);
  color: #000;
  border-color: #ffcc00;
  box-shadow: 0 0 8px rgba(255, 204, 0, 0.8);
}

/* Ikony */
ul#nav li a i {
  color: #ffcc00;
}/* Ogólny box slajdu */
.slide-box {
  display: flex;
  align-items: center;
  padding: 20px;
  border-radius: 8px;
  margin: 10px;
  box-shadow: 0 0 10px rgba(255,255,255,0.2);
}

/* Ikona po lewej */
.slide-icon {
  font-size: 40px;
  margin-right: 20px;
  color: #ffcc00;
  text-shadow: 0 0 8px rgba(255,204,0,0.8);
}

/* Tekst po prawej */
.slide-text h3 {
  margin: 0 0 8px;
  font-size: 20px;
  color: #fff;
}

.slide-text p {
  margin: 0;
  color: #ddd;
}

/* Kolory tła dla różnych slajdów */
.slide-box.orange { background: rgba(245, 124, 10, 0.25); }
.slide-box.green { background: rgba(145, 252, 83, 0.25); }
.slide-box.purple { background: rgba(131, 15, 247, 0.25); }
.slide-box.white { background: rgba(255, 255, 255, 0.15); }

/* Animacja wejścia */
.slide-box {
  animation: fadeSlide 0.8s ease-in-out;
}

@keyframes fadeSlide {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}/* Strzałki nawigacyjne */
.flex-direction-nav a {
  display: block;
  width: 40px;
  height: 40px;
  margin: -20px 0 0;
  position: absolute;
  top: 50%;
  z-index: 10;
  overflow: hidden;
  opacity: 0.7;
  cursor: pointer;
  color: #fff;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  transition: all 0.3s ease;
}

.flex-direction-nav a:hover {
  opacity: 1;
  background: #ffcc00;
  color: #000;
  box-shadow: 0 0 10px rgba(255,204,0,0.8);
}

.flex-direction-nav .flex-prev { left: -50px; }
.flex-direction-nav .flex-next { right: -50px; }

/* Kropki pod sliderem */
.flex-control-nav {
  width: 100%;
  position: absolute;
  bottom: -30px;
  text-align: center;
}

.flex-control-nav li {
  display: inline-block;
  margin: 0 6px;
}

.flex-control-paging li a {
  display: block;
  width: 12px;
  height: 12px;
  background: #666;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.flex-control-paging li a:hover {
  background: #ffcc00;
  box-shadow: 0 0 6px rgba(255,204,0,0.8);
}

.flex-control-paging li a.flex-active {
  background: #ffcc00;
  box-shadow: 0 0 10px rgba(255,204,0,1);
}/* Tło slajdu */
.slide-bg {
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 250px;
  border-radius: 8px;
  overflow: hidden;
}

/* Overlay na tekst */
.slide-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.55); /* pół‑przezroczyste czarne tło */
  color: #fff;
  padding: 20px;
  border-top: 2px solid #ffcc00;
}

.slide-overlay h3 {
  margin: 0 0 8px;
  font-size: 20px;
  color: #ffcc00;
  text-shadow: 0 0 6px rgba(255,204,0,0.8);
}

.slide-overlay p {
  margin: 0;
  font-size: 15px;
  color: #eee;
}

/* Strzałki i kropki jak wcześniej */
.flex-direction-nav a {
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  color: #fff;
}
.flex-direction-nav a:hover {
  background: #ffcc00;
  color: #000;
}
.flex-control-paging li a {
  background: #666;
}
.flex-control-paging li a.flex-active {
  background: #ffcc00;
  box-shadow: 0 0 8px rgba(255,204,0,0.8);
}/* Powiększone nagłówki sekcji */
.section-title {
  font-size: 3rem;   /* około 2x większe niż standardowe 1.5rem */
  line-height: 1.2;
  font-weight: 700;
  color: #ffcc00;    /* możesz zmienić na inny kolor */
  text-shadow: 0 0 8px rgba(255, 204, 0, 0.7);
  margin-bottom: 20px;
}

/* Ikona obok nagłówka */
.section-title i {
  margin-right: 10px;
  font-size: 1.2em;  /* ikona też trochę większa */
  color: #ffcc00;
}/* Podtytuły sekcji */
.section-subtitle {
  font-size: 1.6rem;              /* większy rozmiar tekstu */
  font-weight: 500;
  color: #fff;
  background: rgba(0,0,0,0.5);    /* półprzezroczyste tło dla kontrastu */
  border: 2px solid #ffcc00;      /* żółte obramowanie */
  border-radius: 6px;
  padding: 12px 18px;
  margin: 15px 0;
  display: inline-block;          /* ramka dopasowana do tekstu */
  text-shadow: 0 0 6px rgba(255,204,0,0.7);
  box-shadow: 0 0 10px rgba(255,204,0,0.4);
  transition: all 0.3s ease;
}

/* Efekt hover – podtytuł reaguje jak przycisk */
.section-subtitle:hover {
  background: rgba(255, 204, 0, 0.2);
  color: #ffcc00;
  box-shadow: 0 0 15px rgba(255,204,0,0.9);
}#news-slider .slide-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.2));
    padding: 30px;
    border-left: 4px solid #f7d400;
    backdrop-filter: blur(2px);
}
#news-slider h3 {
    font-size: 32px;
    color: #f7d400;
    text-shadow: 0 0 12px rgba(0,0,0,0.6);
}
.custom-slider {
    max-width: 1000px;
    margin: 40px auto;
    position: relative;
    border: 4px solid #e5e5e5;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .35);
}

.slides {
    list-style: none;
    margin: 0;
    padding: 0;
}

.slides li {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .8s ease;
}

.slides li.active {
    opacity: 1;
    position: relative;
}

.slide-bg {
    height: 420px;
    background-size: cover;
    background-position: center;
}

.slide-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 25px 35px;
    background: linear-gradient(to top, rgba(0, 0, 0, .7), transparent);
    color: #fff;
}

.slide-overlay h3 {
    margin: 0 0 8px;
    font-size: 1.9em;
}

.slide-overlay p {
    margin: 0;
    font-size: 1.15em;
}

.slide-overlay small {
    display: block;
    margin-top: 6px;
    opacity: .85;
}

/* Strzałki */
.nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    color: #fff;
    cursor: pointer;
    padding: 10px 15px;
    background: rgba(0, 0, 0, .35);
    border-radius: 50%;
    user-select: none;
}

.nav:hover {
    background: rgba(0, 0, 0, .6);
}

.nav.prev {
    left: 15px;
}

.nav.next {
    right: 15px;
}

/* Kropki */
.dots {
    position: absolute;
    bottom: 15px;
    width: 100%;
    text-align: center;
}

.dots span {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 4px;
    background: rgba(255, 255, 255, .5);
    border-radius: 50%;
    cursor: pointer;
}

.dots span.active {
    background: #fff;
}/* FAQ FIX */
#faq {
    position: relative;
    background: #f6f6f6;
    color: #111;
    padding: 80px 20px;
    z-index: 1;
}

#faq h2 {
    text-align: center;
    font-size: 2.4rem;
    margin-bottom: 50px;
    color: #111;
}

/* Grid */
#faq .grid {
    display: grid;
    max-width: 1200px;
    margin: 0 auto;
}

/* Karty FAQ */
#faq .card {
    background: #ffffff;
    padding: 28px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    transition: transform .3s ease, box-shadow .3s ease;
}

/* Hover */
#faq .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .18);
}

/* Tytuły */
#faq .card h3 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 1.3rem;
    color: #000;
}

/* Tekst */
#faq .card p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: #444;
}

/* FIX animacji (jeśli masz JS scroll reveal) */
[data-anim] {
    opacity: 1 !important;
    transform: none !important;
}/* === FAQ VISIBILITY FIX === */
#faq {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    display: block !important;
}/* === FAQ PREMIUM === */
.faq-premium {
    background: linear-gradient(180deg, #f4f4f4, #ffffff);
    padding: 90px 20px;
}

.faq-premium h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px;
    color: #111;
}

.faq-box {
    max-width: 900px;
    margin: auto;
}

.faq-item {
    background: #fff;
    border-radius: 14px;
    margin-bottom: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
    overflow: hidden;
}

.faq-question {
    width: 100%;
    padding: 22px 26px;
    font-size: 1.15rem;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

.faq-question:hover {
    background: #f9f9f9;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 26px;
    color: #444;
    line-height: 1.6;
    transition: max-height .4s ease, padding .3s ease;
}

.faq-item.active .faq-answer {
    max-height: 200px;
    padding: 18px 26px 24px;
}

/* Strzałka */
.arrow {
    width: 10px;
    height: 10px;
    border-right: 2px solid #111;
    border-bottom: 2px solid #111;
    transform: rotate(45deg);
    transition: transform .3s ease;
}

.faq-item.active .arrow {
    transform: rotate(-135deg);
}/* === HARD FIX FAQ VISIBILITY === */
#faq.section {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}
.section {
    opacity: 1;
    transform: none;
}

.section.aos-init {
    opacity: 0;
    transform: translateY(40px);
}

.section.aos-animate {
    opacity: 1;
    transform: none;
}/* FAQ */
.faq {
    background: #f6f6f6;
}

.faq-grid {
    margin-top: 40px;
}

.faq-box {
    background: #ffffff;
    padding: 28px;
    border-radius: 14px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    transition: transform .3s ease, box-shadow .3s ease;
}

.faq-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .18);
}

.faq-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.faq-header i {
    font-size: 26px;
    color: #f4c400;
}

.faq-box h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #111;
}

.faq-box p {
    margin: 0;
    color: #444;
    line-height: 1.6;
}/* FAQ PREMIUM – spójne ze Statystykami */
.faq {
    background: #f6f6f6;
}

.faq-box {
    background: #fff;
    padding: 0;
    border-radius: 14px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    overflow: hidden;
}

.faq-toggle {
    width: 100%;
    background: none;
    border: none;
    padding: 26px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.faq-header i {
    font-size: 26px;
    color: #f4c400;
}

.faq-header h3 {
    margin: 0;
    font-size: 1.15rem;
    color: #111;
    text-align: left;
}

.faq-arrow {
    width: 12px;
    height: 12px;
    border-right: 2px solid #111;
    border-bottom: 2px solid #111;
    transform: rotate(45deg);
    transition: transform .3s ease;
}

.faq-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 26px;
    color: #444;
    line-height: 1.6;
    transition: max-height .4s ease, padding .3s ease;
}

.faq-box.active .faq-content {
    max-height: 300px;
    padding: 0 26px 24px;
}

.faq-box.active .faq-arrow {
    transform: rotate(-135deg);
}

/* FAQ lokalne – delikatne wyróżnienie */
.faq-local {
    border-left: 5px solid #f4c400;
}/* === GLOBAL READABILITY FIX === */
.hero-background,
.hero-full {
    position: relative;
}

.hero-overlay {
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.75),
            rgba(0, 0, 0, 0.85));
}

/* === HERO BOXES === */
.banner-box {
    background: rgba(0, 0, 0, 0.78);
    color: #ffffff;
    border: 2px solid rgba(255, 200, 0, 0.6);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65);
}

.banner-box h2,
.banner-box h3 {
    color: #ffd200;
    font-weight: 800;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.banner-box p,
.banner-box li {
    color: #f1f1f1;
    font-size: 1.05rem;
    line-height: 1.6;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

/* === HIGHLIGHT (SKUP AUT) === */
.banner-box.highlight {
    background: linear-gradient(135deg, #ffd200, #ffbf00);
    color: #111;
}

.banner-box.highlight h2,
.banner-box.highlight p,
.banner-box.highlight li {
    color: #111;
    text-shadow: none;
}

/* CTA */
.banner-cta,
.search-btn-modern {
    background: #ffd200;
    color: #111;
    font-weight: 800;
    border-radius: 30px;
    padding: 12px 22px;
    display: inline-block;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.banner-cta:hover,
.search-btn-modern:hover {
    background: #ffcc00;
    transform: translateY(-2px);
}

/* === SEARCH INPUT FIX === */
.search-input-modern {
    width: 100%;
    padding: 14px 18px;
    border-radius: 30px;
    border: 2px solid #ffd200;
    background: #0e0e0e;
    color: #ffffff;
    font-size: 1rem;
}

.search-input-modern::placeholder {
    color: #bbbbbb;
}

.search-input-modern:focus {
    outline: none;
    border-color: #ffdd33;
    box-shadow: 0 0 0 3px rgba(255, 210, 0, 0.25);
}.topbar {
    background: #0c0f14;
    color: #ffd400;
    font-size: 13px;
    padding: 6px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topbar a {
    color: #ffd400;
    text-decoration: none;
    margin-right: 15px;
    transition: color .2s;
}

.topbar a:hover {
    color: #ffffff;
}section:hover {
    background: inherit;
}

section a:hover,
button:hover {
    color: #000;
    background: #ffd400;
}section:hover {
  background:inherit;
}

section a:hover,
button:hover {
  color:#000;
  background:#ffd400;
}
section:hover {
  background:inherit;
}

section a:hover,
button:hover {
  color:#000;
  background:#ffd400;
}
.whatsapp-float {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background: #25D366;
    color: #fff;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
    z-index: 9999;
}.whatsapp-float {
    position: fixed !important;
    right: 24px;
    bottom: 24px;
    width: 60px;
    height: 60px;

    background: #25D366;
    color: #fff;
    font-size: 30px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 12px 35px rgba(0, 0, 0, .45);
    z-index: 2147483647 !important;
    /* najwyższy możliwy */
}/* nigdy nie zmieniaj koloru całej sekcji */
section:hover {
    color: inherit !important;
}

/* hover TYLKO na elementach interaktywnych */
a:hover,
button:hover,
.hero-box:hover {
    color: #000;
    background-color: #ffd400;
}body {
    scroll-behavior: smooth;
}

.premium-gold {
    position: sticky;
    top: 0;
    background: linear-gradient(to right, #111, #222);
    border-bottom: 2px solid gold;
    z-index: 999;
    padding: 10px 20px;
}

.premium-gold .logo a {
    font-family: 'Orbitron', sans-serif;
    font-size: 24px;
    color: gold;
    text-shadow: 0 0 5px #ff0;
}

.nav-link {
    color: #ccc;
    margin: 0 12px;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
    color: gold;
    border-bottom: 2px solid gold;
}

.topbar-right a {
    color: #ccc;
    margin-left: 10px;
    font-size: 18px;
}

.topbar-right a:hover {
    color: gold;
}

.header-search input {
    background: #222;
    color: #fff;
    border: 1px solid gold;
}

.header-search button {
    background: gold;
    color: #111;
}#jdmChat {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 330px;
    height: 420px;
    background: #0d0d0d;
    border: 2px solid #ff0000;
    border-radius: 10px;
    display: none;
    flex-direction: column;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
    overflow: hidden;
    font-family: 'Orbitron', sans-serif;
}

#jdmChatHeader {
    background: #ff0000;
    color: white;
    padding: 10px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#jdmChatMessages {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    color: white;
}

#jdmChatMessages .msg {
    margin-bottom: 8px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid #ff0000;
}

#jdmChatMessages .admin {
    border-left: 3px solid #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

#jdmChatInput {
    display: flex;
    border-top: 1px solid #ff0000;
}

#jdmChatInput input {
    flex: 1;
    padding: 10px;
    background: #111;
    color: white;
    border: none;
}

#jdmChatInput button {
    width: 50px;
    background: #ff0000;
    color: white;
    border: none;
    font-size: 18px;
}

#jdmChatOpen {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #ff0000;
    color: white;
    border: none;
    padding: 12px 16px;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.7);
}/* ================================
   SAFE MODE – VISIBILITY FIX
   PHU U KONESERA
   ================================ */

/* 1. NIGDY nie zmieniaj koloru całej sekcji */
section:hover,
section:focus,
section:active {
  color: inherit !important;
}

/* 2. Overlaye NIE łapią hovera */
.hero-overlay,
.smoke-layer,
.sparks-layer,
.hero::before,
.hero::after {
  pointer-events: none !important;
}

/* 3. Tekst zawsze NA WIERZCHU */
.hero *,
.hero-content,
.hero-caption-modern,
.hero-box,
.hero-card,
.hero-tile {
  position: relative;
  z-index: 5;
}

/* 4. Domyślna czytelność tekstu */
.hero,
.hero * {
  color: #ffffff;
}

/* 5. Hover TYLKO dla elementów klikalnych */
a:hover,
button:hover,
.hero-box:hover,
.hero-card:hover {
  background-color: #ffd400;
  color: #000000 !important;
}

/* 6. Zabezpieczenie przed tłem = tekst */
.hero-box,
.hero-card {
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 212, 0, 0.6);
  transition: background .25s ease, color .25s ease;
}

/* 7. Nawet jak coś zmieni kolor – tekst NIE zniknie */
.hero-box *,
.hero-card *,
.hero-caption-modern * {
  color: inherit !important;
}

/* 8. Inputy i wyszukiwarka zawsze czytelne */
input,
input:focus,
input:hover {
  color: #ffffff;
  background: #0f1218;
}

/* 9. WhatsApp – NIE DO ZAKRYCIA */
.whatsapp-float {
  position: fixed !important;
  right: 24px;
  bottom: 24px;
  z-index: 2147483647 !important;
  background: #25D366;
  color: #ffffff;
}

/* 10. Ostateczny bezpiecznik */
* {
  text-shadow: none;
}/* === SKUP AUT CTA === */
.skup-cta {
    position: relative;
    max-width: 420px;
    padding: 26px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.55);
    border: 2px solid #ffd400;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .55);
}

/* IKONA */
.banner-icon {
    font-size: 42px;
    margin-bottom: 10px;
}

/* LISTA */
.banner-list {
    margin: 14px 0;
    padding-left: 0;
    list-style: none;
}

.banner-list li {
    margin-bottom: 6px;
}

/* PRZYCISK */
.banner-cta {
    margin-top: 16px;
    background: #ffd400;
    color: #000;
    border: none;
    padding: 14px 22px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
}

/* PANEL WYBORU */
.skup-cta .cta-options {
    display: none;
    margin-top: 14px;
    background: #0c0f14;
    border-radius: 14px;
    padding: 12px;
}

/* POKAZYWANIE */
.skup-cta.active .cta-options {
    display: block;
}

/* OPCJE */
.cta-option {
    display: block;
    text-decoration: none;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 8px;
    color: #fff;
    background: #151a22;
}

.cta-option span {
    display: block;
    font-size: 13px;
    opacity: .85;
}

/* HOVER PREMIUM */
.cta-option.whatsapp:hover {
    background: #25D366;
    color: #000;
}

.cta-option.phone:hover {
    background: #ffd400;
    color: #000;
}.nav-link.highlight {
    color: #f7d400;
    font-weight: 700;
}

.header-social a {
    margin-left: 10px;
    font-size: 1.1rem;
}

.mobile-toggle {
    display: none;
}

/* MOBILE */
@media (max-width: 980px) {
    .nav {
        display: none;
        flex-direction: column;
        background: #0f1114;
        position: absolute;
        top: 100%;
        right: 0;
        width: 100%;
        padding: 20px;
    }

    .nav.open {
        display: flex;
    }

    .mobile-toggle {
        display: block;
    }
}.premium-gold {
    background: linear-gradient(90deg, #111, #1a1a1a);
    border-bottom: 2px solid #f7d400;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.nav-link.highlight {
    color: #f7d400;
    font-weight: 700;
}

.locations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.locations-grid a {
    padding: 10px 14px;
    background: #111;
    border-radius: 6px;
    color: #f7d400;
    text-decoration: none;
}.hero-slider {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.hero-slides {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease;
}

.hero-slide.active {
    opacity: 1;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25));
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8vw;
    max-width: 900px;
}

.hero-overlay h1 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    margin-bottom: 15px;
    color: #f7d400;
}

.hero-overlay p {
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.hero-overlay span {
    font-size: 1rem;
    opacity: 0.85;
}

/* NAV */
.hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3rem;
    background: none;
    border: none;
    color: #f7d400;
    cursor: pointer;
    z-index: 5;
}

.hero-nav.prev {
    left: 20px;
}

.hero-nav.next {
    right: 20px;
}

/* DOTS */
.hero-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.hero-dots span {
    width: 12px;
    height: 12px;
    background: #fff;
    opacity: 0.4;
    border-radius: 50%;
    cursor: pointer;
}

.hero-dots span.active {
    opacity: 1;
    background: #f7d400;
}