/* 
Theme Name: szablon-3
Author: budowaniestron.pl
 */

/* ----- reset all ----- */
* {
   padding:0;
   margin:0;
}
*, *:before, *:after {
	box-sizing: border-box;
}
:root {

  /* ===== COLORS: BACKGROUNDS ===== */
  --color-light: #f9fafb;        /* jasny / główne tło */
  --color-light-grey: #F2F4F7;        /* jasnoszary */
  --color-golden: #FFC300;        /* złoty */
  --color-green: #079681; /* zielony */
  --color-light-green: #0BB99F; /* jasnozielony */
  --color-grey: #EAECF0;        /* szary */
  --color-deep-grey: #D0D5DD;        /* ciemniejszy szary */

  /* ===== COLORS: TEXT ===== */
  --color-text-main: #101828;      /* główny tekst / grafit */
  --color-text-secondary: #6b7280; /* opisy / ciemno szary */
  --color-text-muted: #9ca3af;     /* mniej ważne / szary */
  --color-text-main-pale: #344054;      /* główny tekst osłabiony / jasny grafit */

  /* ===== GRADIENTS ===== */
   --gradient-green: linear-gradient(90deg, var(--color-green) 0%, var(--color-light-green) 100%);
  
  /* ===== SHADOWS ===== */
  --shadow: 0 5px 40px rgba(0,0,0,.08);
  --shadow-darker: 0 5px 40px rgba(0,0,0,.14);

  /* ===== TYPO ===== */
  --main-font: "Inter", sans-serif;
  --header-font: 'Jost', sans-serif;

  /* ===== LAYOUT ===== */
  --header-height: 90px;
  --wrap-width: 1180px;
  --block-padding: 4.5em;

  /* ===== RADIUS ===== */
  --radius: 10px;
  --radius-small: 6px;
}
ul{list-style: none;}
@font-face {
      font-family: 'fontello';
      src: url('fonts/mlfont.eot?47843562');
      src: url('fonts/mlfont.eot?47843562#iefix') format('embedded-opentype'),
           url('fonts/mlfont.woff?47843562') format('woff'),
           url('fonts/mlfont.ttf?47843562') format('truetype'),
           url('fonts/mlfont.svg?47843562#fontello') format('svg');
      font-weight: normal;
      font-style: normal;
}
.font-icon {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
}


/* ----- general ----- */

html{height: 100%; min-width: 300px; }

body {
	font: 18px/26px  var(--main-font);
	font-weight: 400;
	letter-spacing: -1px;
	background-color: var(--bg);
	color: var(--color-text-main);
}
@media (max-width: 1024px) {
	body {
		font-size: 17px;
		line-height: 24px;
	}
}
@media (max-width: 768px) {
	body {
		font-size: 16px;
		line-height: 22px;
	}
}

a {color: var(--color-text-main); text-decoration: none; transition: all .2s ease-in-out;}
a:hover { text-decoration:underline;}
.content a {color: var(--color-text-main); text-decoration:underline;}
.content a:hover {color: var(--color-green);}
a span {cursor: pointer;}

strong{font-weight: 600;}

h1{
	font: 500 3.33em/1.2em var(--header-font);
	margin: 0;
	text-align: center;
}
h2{
	font: 500 2.22em/1.2em var(--header-font);
}
h2.small{
	font-size: 1.55em;
}
h3{
	font: 500 1.25em/1.2em var(--header-font);
}
h3.small{
	font-size: 1.111em;
}
h4{
	font: 500 1.1em/1.4em var(--header-font);
}
.content h2{
	margin-top: 1em;
	margin-bottom: .5em;
}
.content h3{
	margin-top: 1em;
	margin-bottom: 0.3em;
}
.content h4{
	margin-top: 1em;
	margin-bottom: 0.3em;
}
h2.section-title {
    margin-bottom: .5em;
}
.heading-border:after{
	content: "";
	height: 2px;
	width: 4em;
	background-color: var(--color-golden);
	margin-bottom: .7em;
	margin-top: .5em;
	display: block;
}
.content h2:first-child, .content h3:first-child, .content h4:first-child{
	margin-top: 0;
}
@media (max-width: 1024px) {
	h1{font-size: 3em;}
	h2{font-size: 2em;}
	h2.small{font-size: 1.4em;}
	h3{font-size: 1.2em;}
	h4{font-size: 1.07em;}
	.heading-border:after{
		margin-left: auto; margin-right: auto;
	}
}
@media (max-width: 768px) {
	h1{font-size: 2.8em;}
	h2{font-size: 1.6em;}
	h2.small{font-size: 1.3em;}
	h3{font-size: 1.15em;}
	h4{font-size: 1.05em;}
}
@media (max-width: 480px) {
	h1{font-size: 2.3em;}
	h2{font-size: 1.3em;}
	h2.small{font-size: 1.2em;}
	h3{font-size: 1.15em;}
	h4{font-size: 1.05em;}
}

img{border:0; max-width: 100%; height: auto;}
p{margin-bottom: 1em;}
blockquote{
	margin: 2em 0 2em 2em;
	padding-left: 2em;
	border-left: solid 5px #f19900;
}
@media (max-width: 768px) {
	blockquote{
		margin: 1em 0 1em 0;
		padding-left: 1em;
	}
}
@media (max-width: 480px) {
	blockquote{
		padding-left: .5em;
	}
}
.content .small{
	font-size: .8em; 
    line-height: 1.3em;
}

img {
    vertical-align: bottom;
}
#main .no-padding,
.is-root-container .no-padding{
	padding: 0;
}


@media (max-width: 1024px) {
	.section-heading{
		text-align: center;
	}
	.page-template-home-page .offer .section-text{
		margin-left: auto;
		margin-right: auto;
	}
}
.mobile{
	display: none;
}
@media (max-width: 768px) {
	.mobile{
		display: block;
	}
	.desktop{
		display: none;
	}
}

.fugitive-right{
	position: absolute;
	right: 0;
	top: 0;
	width: calc(50% - 3em);
	z-index: 2;
}
.why .fugitive-right{
	top: calc(100% - 9em);
}
@media (max-width: 768px) {
	.fugitive-right{
		position: relative;
		right: auto;
		top: auto;
		width: auto;
	}
	.why .fugitive-right{
		top: auto;
	}
}

/* ----- gutenberg ----- */

.has-smaller-font-size{font-size: .7em !important; line-height: 1.4em;}
.has-small-font-size{font-size: .85em !important; line-height: 1.4em;}
.has-normal-font-size{font-size: inherit !important; }
.has-large-font-size{font-size: 1.2em !important; line-height: 1.4em;}

.pelna-wysokosc{ min-height: calc(100vh - var(--header-height));}

.green-text{
	color: var(--color-green);
}


.light-font{
    color: var(--color-text-secondary);
    font-size: 0.888em;
    line-height: 1.4em;
}
.light-font strong{
    color: var(--color-text-main);
}
.margin-1{
	margin-bottom: 1rem;
}
.margin-2{
	margin-bottom: 2rem;
}
.margin-3{
	margin-bottom: 3rem;
}

/* ----- lists ----- */

.wp-block-list,
.content ul, .content ol,
.text ul, .text ol,
.page-template-default #main ul,
.page-template-default #main ol{
	margin-bottom: 1em;
	padding-left: 1em; 
}
ol.wp-block-list,
.content ol,
.text ol,
.page-template-default #main ol{
	padding-left: 2em; 
}
.wp-block-list > li,
.content ul > li,
.text ul > li,
.page-template-default #main ul > li{
    margin-left: 1em;
	margin-bottom: 0.4em;
	text-align: left;
    list-style: none;
}
ul.wp-block-list > li:before,
.content ul > li:before,
.text ul > li:before,
.page-template-default #main ul > li:before{
    content: "\2022";
    color: var(--text2);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}
ol.wp-block-list > li,
.content ol > li,
.text ol > li,
.page-template-default #main ol > li{
	margin-bottom: 0.4em;
	text-align: left;
}

/* ----- comin ----- */
.comin{
	opacity: 0;
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
    transform: translateY(15px);
	position:relative;
}
.comin.on-screen{
	opacity: 1;
    transform: translateY(0);
}
.comin-left{
	transition: opacity 1s ease-in-out, right 1s ease-in-out, left 1s ease-in-out;
	right: 500px;
	left: -500px;
	top: 0;
	bottom: 0;
}
.comin-left.on-screen{
	right: 0;
	left: 0;
}
.comin-right{
	transition: opacity 1s ease-in-out, right 1s ease-in-out, left 1s ease-in-out;
	right: -500px;
	left: 500px;
	top: 0;
	bottom: 0;
}
.comin-right.on-screen{
	right: 0;
	left: 0;
}
.comin-2{
	transition-delay: .2s;
}
.comin-3{
	transition-delay: .4s;
}
.comin-4{
	transition-delay: .6s;
}
.comin-5{
	transition-delay: .8s;
}
@media (max-width: 1024px){
	.comin-2,
	.comin-3,
	.comin-4,
	.comin-5{
		transition-delay: 0s;
	}
}

/* ----- image align ----- */
img.alignleft{
	float: left;
	margin: 0 2em 2em 0;
}
img.alignright{
	float: right;
	margin: 0 0 2em 2em;
}
img.aligncenter{
	margin: 0 auto 2em;
    display: block;
}
.wp-caption-text{
    font-size: .8em;
    line-height: 1.4em;
    color: #686868;
	margin-bottom: 0;
}
@media (max-width: 768px) {
	img.alignleft,
	img.alignright,
	img.aligncenter{
		float: none;
		display: block;
		margin: 0 auto 1.5em;
	}
}

/* ----- gallery ----- */

.ari-fancybox{
	opacity: 1;
	transition: opacity .2s ease-in-out;
}
.ari-fancybox:hover{
	opacity: .8;
}
.gallery br{
	display: none;
}
.content .gallery .ari-fancybox{
	margin: 0;
}
.gallery-columns-2{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
	column-gap: .4em;
}
.gallery-columns-3{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
	column-gap: .4em;
}
.gallery-columns-4{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
	column-gap: .4em;
}
.gallery-item{
	margin-bottom: .4em;
}
.gallery img{
	display: block;
}

/* ----- cols ----- */

.cols-2{ display: grid; grid-template-columns: repeat(2, 1fr); }
.cols-3{ display: grid; grid-template-columns: repeat(3, 1fr); }
.cols-4{ display: grid; grid-template-columns: repeat(4, 1fr); }
.cols-5{ display: grid; grid-template-columns: repeat(5, 1fr); }
.cols-6{ display: grid; grid-template-columns: repeat(6, 1fr); }
.cols-7{ display: grid; grid-template-columns: repeat(7, 1fr); }
.cols-8{ display: grid; grid-template-columns: repeat(8, 1fr); }
.cols-9{ display: grid; grid-template-columns: repeat(9, 1fr); }
.cols-10{ display: grid; grid-template-columns: repeat(10, 1fr); }
.cols-11{ display: grid; grid-template-columns: repeat(11, 1fr); }
.cols-12{ display: grid; grid-template-columns: repeat(12, 1fr); }

.col-2{ grid-column: auto / span 2; }
.col-3{ grid-column: auto / span 3; }
.col-4{ grid-column: auto / span 4; }
.col-5{ grid-column: auto / span 5; }
.col-6{ grid-column: auto / span 6; }
.col-7{ grid-column: auto / span 7; }
.col-8{ grid-column: auto / span 8; }
.col-9{ grid-column: auto / span 9; }
.col-10{ grid-column: auto / span 10; }
.col-11{ grid-column: auto / span 11; }
.col-12{ grid-column: auto / span 12; }


.gap-0{gap: 0;}
.gap-mini{gap: .4em;}
.gap-mini-2{gap: .888em;}
.gap-1{gap: 2em;}
.gap-2{gap: 4em;}
.gap-3{gap: 6em;}

.show-at-600{
	display: none;
}

.content-cols{
    align-items: center;
}

@media (max-width: 1300px) {
}
@media (max-width: 1024px) {
	.gap-2{ gap: 2em; }
	.gap-3{ gap: 4em; }
	.break-at-1024{
    	grid-template-columns: repeat(1, 1fr);
	}
	.break-at-1024 .col-5,
	.break-at-1024 .col-4,
	.break-at-1024 .col-3,
	.break-at-1024 .col-2{
		grid-column: auto / span 1;
	}
	.cols-2-at-1024{grid-template-columns: repeat(2, 1fr);}
	.cols-2-at-1024 .col-3{grid-column: auto / span 1;}
	.cols-2-at-1024 .col-2{grid-column: auto / span 1;}
	.cols-3-at-1024{grid-template-columns: repeat(3, 1fr);}
	.cols-3-at-1024 .col-2{grid-column: auto / span 1;}
}
@media (max-width: 768px) {
	.break-at-768{
    	grid-template-columns: repeat(1, 1fr);
	}
	.break-at-768 .col-5,
	.break-at-768 .col-4,
	.break-at-768 .col-3,
	.break-at-768 .col-2{
		grid-column: auto / span 1;
	}
	.cols-2-at-768{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 480px) {
	.break-at-480{
    	grid-template-columns: repeat(1, 1fr);
	}
	.break-at-480 .col-3,
	.break-at-480 .col-2{
		grid-column: auto / span 1;
	}
}

/* ----- form ----- */

.fluentform .ff-el-input--label{
	display: none;
}
input,
button,
textarea,
select{
	font: 1em/1.3em  var(--color-text-main);
}
input[type=text],
input[type=email],
input[type=password],
input[type=tel],
textarea,
select{
    width: calc(100% - 2em);
    border: solid 1px var(--color-grey);
	background-color: var(--color-light);
    color: var(--color-text-main);
    padding: .5em 1em;
	border-radius: 5px;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=tel]:focus,
textarea:focus,
select:focus{
    border: solid 1px var(--color-green) !important;
	box-shadow: 0 6px 16px rgba(7, 150, 129, .25);
}
select{
   width: auto;
    padding: .4em .5em;
}

input[type=submit]:focus{
	outline: none;
}


.fluentform .ff-el-form-check-label .ff-el-form-check-input{
    font-size: 2.1em;
    width: .5em;
    height: .5em;
	margin-right: .3em;
	accent-color: var(--color-green);
	cursor: pointer;
}
.fluentform .ff-el-form-check-label p{
	font-size: .77em;
	line-height: 1.4em;
	color: var(--color-text-secondary);
}
.fluentform .ff-el-form-check-label p a{
	color: var(--color-text-main);
	text-decoration: underline;
}
.fluentform .ff-el-form-check-label p a:hover{
	color: var(--color-green);
}

/* ----- quote-block ----- */
.quote-block{
	height: 600px;
	overflow: hidden;
}
.quote-block > div{
	height: 100%;
    overflow: hidden;
	position: relative;
    background-size: cover;
    background-position: center;
}
.quote-block > div:after{
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background-color: rgba(0,0,0, .0002);
}
#main .quote-block  .wrap {
    height: calc(100% - 7em);
    padding-top: 5em;
    padding-bottom: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    position: relative;
	color: #fff;
}
.quote-block h2,
.quote-block h3{
	color: #fff;
}
.quote-block h2{
}
.quote-block p{
	font-weight: 400;
	font-size: 1.2em;
	line-height: 1.3em;
	text-align: center;
}

/* ----- read-more ----- */

.wp-block-buttons{
	margin-top: 1.5em;
}
.wp-block-button__link,
.read-more > *,
#main .fluentform .ff-btn{
	padding: .5em 1em;
	transition: all .2s ease-in-out;
	border: 1px solid var(--color-golden);
	background-color: #fff;
	color: var(--color-text-main);
	border-radius: var(--radius-small);
	box-shadow: 0 4px 10px rgba(230, 184, 92, .25);
	font-weight: 500;
	font-family: var(--header-font);
	font-size: 1.11em;
	display: inline-flex;
	align-items: center;
	gap: .5em;
	text-decoration: none;
}
.wp-block-button__link:hover,
.read-more > *:hover,
#main .fluentform .ff-btn:hover{
	background-color: var(--color-golden);
	color: var(--color-text-main);
	box-shadow: 0 6px 16px rgba(230, 184, 92, .4);
	text-decoration: none;
}
.read-more > * > span{
	display: inline-flex;
	align-items: center;
	gap: .5em;
	z-index: 2;
}
#main .fluentform .ff-btn{
	padding: .7em 2em;
}
.read-more-white > *{
	background-color: var(--color-light);
	color: var(--color-text-main);
	border: none;
	box-shadow: 0 6px 16px rgba(7, 150, 129, .25);
}
.read-more-white > *:hover{
	background-color: var(--color-text-main);
	color: var(--color-light);
	border: none;
	box-shadow: 0 6px 16px rgba(7, 150, 129, .25);
}
.read-more-grey > *{
	background-color: var(--color-grey);
	color: var(--color-text-main);
	border: none;
	box-shadow: 0 6px 16px rgba(7, 150, 129, .25);
}
.read-more-grey > *:hover{
	background-color: var(--color-light);
	color: var(--color-text-main);
	border: none;
	box-shadow: 0 6px 16px rgba(7, 150, 129, .25);
}
.read-more-green > *{
	background: var(--color-green);
	color: var(--color-light);
	box-shadow: none;
	border: none;
	position: relative;
	overflow: hidden;
}
.read-more-green > *:hover{
	background: var(--color-green);
	color: var(--color-light);
	box-shadow: none;
	border: none;
}
.read-more-green > *::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-green);
  opacity: 0;
  transition: opacity .2s ease-in-out;
  z-index: 0;
}
.read-more-green > *:hover::before {
  opacity: 1;
}


.read-more-white-frame > *{
	background-color: rgba(255,255,255,0);
	border: 1px solid var(--color-light);
	box-shadow: none;
	color: var(--color-light);
}
.read-more-white-frame > *:hover{
	background-color: var(--color-golden);
	color: var(--color-text-main);
	box-shadow: none;
	border-color: var(--color-golden);
}


.read-more > * .icon{
	height: 1.2em;
	display: block;
}

.read-more-underline > *{
	background: none;
	border: none;
	box-shadow: none;
	padding: 0;
	text-decoration: underline;
}
.read-more-underline > *:hover{
	background: none;
	border: none;
	box-shadow: none;
	text-decoration: underline;
	color: var(--color-green);
}

@media (max-width: 768px) {
	.wp-block-button__link,
	.read-more > *,
	#main .fluentform .ff-btn{
		font-size: 1em;
	}
}

/* ----- bg-colors ----- */


.box{
	border-radius: var(--radius);
	padding: 2.2em 3.2em;
}
.shadow-box{
	box-shadow: var(--shadow);
}
.green-border{
	border: 1px solid var(--color-green);
}
.blue-border{
	border: 1px solid var(--color-text-main);
}

.tlo-1{
	position: relative;
}
.tlo-1:before{
	content: "";
	position: absolute;
	inset: 0;
	background-image: url('images/bg-1.jpg');
	background-repeat: repeat-y;
	background-position: top center;
	background-size: 100% auto;
	opacity: 0.15;
	z-index: 0;
}
.tlo-1 > *{
	position: relative;
	z-index: 1;
}

.tlo-2{
	background: linear-gradient(135deg, var(--color-green), var(--color-light-green));
	color: #fff;
}
.tlo-2.content ul > li:before{
    color: var(--color-light);
}
.tlo-3{
	background-color: var(--color-text-main);
	color: #fff;
}
.tlo-4{
	background-color: var(--color-grey);
}
.tlo-5{
	background-color: var(--color-light-grey);
}

.tlo-6{
	position: relative;
	background-color: var(--color-light-grey);
}
.tlo-6:before{
	content: "";
	position: absolute;
	inset: 0;
	background-image: url('images/bg-1.jpg');
	background-repeat: repeat-y;
	background-position: top center;
	background-size: 100% auto;
	opacity: 0.1;
	z-index: 0;
}
.tlo-6 > *{
	position: relative;
	z-index: 1;
}


.icon-golden{
  filter: invert(82%) sepia(96%) saturate(2200%) hue-rotate(-5deg) brightness(98%) contrast(102%);
}
.icon-green{
  filter: invert(47%) sepia(83%) saturate(425%) hue-rotate(132deg) brightness(92%) contrast(90%);
}
.icon-white {
  filter: invert(100%);
}


@media (max-width: 768px) {
	.box{
		padding-left: 2em;
		padding-right: 2em;
	}
}

/* ----- wraps  ----- */


.wrap{
	max-width: var(--wrap-width);
	min-width: 280px;
	margin: 0 auto;
	text-align: left;
	padding-top: var(--block-padding);
	padding-bottom: var(--block-padding);
	padding-left: 10px;
	padding-right: 10px;
}
.wrap-thin{
	padding-top: 1.5em;
	padding-bottom: 1.5em;
}
.wrap-flat{
	padding-top: 0;
	padding-bottom: 0;
}
.wp-block-group > .wp-block-group__inner-container{
	max-width: var(--wrap-width);
    margin-left: auto;
	margin-right: auto;
}
#main > .alignfull,
.alignfull > .wp-block-group__inner-container{ 
	max-width: none;
}

section{
	position: relative;
}

/* ----- main ----- */

main,
#main{
	overflow: clip;
}


/* ----- head ----- */

#head{
	background-color: var(--color-light-grey);
    z-index: 50;
	background-image: url('/wp-content/themes/szablon-3/images/budynki-tlo.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center 67%;
}
#head .head-top{
	width: 100%;
	position: fixed;
	padding: .5em 1em;
	transition: all .2s ease-in-out;
    display: flex;
    justify-content: space-between;
	align-items: center;
	background-color: rgba(242,244,247,0);
	z-index: 99;
}
#head .head-bottom{
}
.not-viewing-top #head .head-top{
	padding-top: .2em;
	padding-bottom: .2em;
	background-color: rgba(242,244,247,1);
}
#head .head-bottom{
	padding: var(--header-height) 1em 4em;
}
#head .head-top .read-more{
	font-size: .88em;
	margin-left: 1em;
}
#head .head-top .read-more .icon{
	font-size: 1.2em;
}

@media (max-width: 768px) {
	#head .head-top .read-more{
		font-size: 1em;
		margin-top: 2em;
	}
}

/* ----- logo ----- */

#logo{
	top: 0;
	bottom: 0;
}
#logo a img{
	width: auto;
	height: inherit;
	max-height: 3em;
	transition: all .2s ease-in-out;
}
.not-viewing-top #logo a img{
	max-height: 2.4em;
}
#logo a,
#logo img{
	display: block;
}
@media (max-width: 1024px) {
	#logo a img {
		max-height: 3em;
	}
	.not-viewing-top #logo a img {
		max-height: 2.5em;
	}
}

/* ----- menu ----- */
#menu {
    margin-right: 0;
    margin-left: auto;
}
#menu .menu{
	display: flex;
	
}
#menu h2, #menu h2 span{
    display: none;
}
#menu .menu-wrap > div > ul > li{
	display: inline-block;
	position:relative;
}
#menu .menu-wrap> div > ul > li:first-child{
	border: none;
}
#menu .menu-wrap > div > ul > li > a{
	font-size: .88em;
	line-height: 1.1em;
	font-weight: 500;
	padding: 0 1em;
	display: block;
	transition: all .2s ease-in-out;
	text-decoration: none;
}
#menu .menu-wrap > div > ul > li.menu-item-has-children > a:after{
    font-family: "fontello";
	content: "\e809";
	margin-left: .5em;
	display: inline-block;
	vertical-align: middle;
    line-height: 1em;
} 

#menu .menu-wrap > div > ul > li.current-menu-item > a,
#menu .menu-wrap > div > ul > li.current-menu-ancestor > a{
	text-decoration: underline;
}
#menu .menu-wrap > div > ul > li > a:hover, 
#menu .menu-wrap > div > ul > li.current-menu-item > a:hover{
	color: var(--color-green);
}
#menu .sub-menu{
    max-height: 0;
	min-width: 10em;
    overflow: hidden;
    transition: all .2s ease-in-out;
	transition-delay: .4s;
    position: absolute;
    left: 0;
    top: 100%;
	background-color: var(--color-light-grey);
	padding-top: 0;
}
#menu li:hover .sub-menu{
	max-height: 800px;
	padding-top: .5em;
	transition-delay: 0s;
}
#menu .sub-menu a{
	font-size: 0.9em;
	line-height: 1.2em;
	padding: .7em 1.2em;
	display: block;
	color: var(--bg);
	transition: all .2s ease-in-out;
	text-decoration: none;
}
#menu .sub-menu li.current-menu-item a{
	text-decoration: underline;
}
#menu .sub-menu a:hover,
#menu .sub-menu li.current-menu-item a:hover{
	color: var(--color-green);
}
.close{
	font-size: 1.5em;
	line-height: 1.4em;
	position: absolute;
	right: 1em;
	top: 1em;
	cursor: pointer;
	width: 1.4em;
	height: 1.4em;
	border-radius: 100%;
	text-align: center;
	transition: all .2s ease-in-out;
	display: block;
	background-color: var(--bg2);
	color: var(--bg);
}
.close:hover{
	color: var(--color-green);
}
#menu .close{
	display: none;
}

@media (max-width: 1024px) {
	#menu h2{
		font-size: 1em;
		font-weight: 400;
		margin: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#menu h2 i{
		display: inline-block;
		color: var(--text2);
		font-size: 2.8em;
		line-height: 1em;
		padding: 0; margin: 0;
		cursor: pointer;
		transition: all .2s ease-in-out;
		text-align: center;
		position: relative;
		z-index: 80;
		margin-left: .5em;
		vertical-align: middle;
	}
	#menu h2 i:hover{
		color: var(--color-green);
	}
	#menu .menu-wrap{
		position: fixed;
		left: 0;top: 0;right: 0;
		width: 100%;
		z-index: 170;
		max-height: 100vh;
		background-color: var(--text2);
		height: 0;
		overflow: hidden;
		transition: height .4s ease-in-out;
		background-color: var(--color-light-grey);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
	}
	#menu .menu-wrap.acti{
		height: 100vh;
	}
	#menu .menu-wrap > div > ul{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	#menu .close{
		display: block;
	}
	#menu .menu-wrap > div > ul > li{
		display: block;
		border-left: none;
		text-align: center;
	}
	#menu .menu-wrap > div > ul > li > a{
		text-align: center;
		padding: 1em;
		font-size: 1.3em;
		line-height: 1.4em;
		padding: .5em;
		margin: .3em 0;
		display: inline-block;
		width: 9em;
		transition: all .2s ease-in-out;
		text-align: left;
		font-weight: bold;
	}
	#menu .menu-wrap > div > ul > li.menu-item-has-children > a:after{
	} 
	#menu .menu-wrap > div > ul > li.current-menu-item > a, 
	#menu .menu-wrap > div > ul > li.current-menu-ancestor > a{
	}
	#menu .menu-wrap > div > ul > li > a:hover, 
	#menu .menu-wrap > div > ul > li.current-menu-item > a:hover{
	}
	#menu .sub-menu{
		max-height: none;
		position: relative;
		text-align: left;
		top: 0;
		background-color: transparent;
	}
	#menu li:hover .sub-menu{
		padding-top: 0;
	}
	#menu .sub-menu a,
	#menu .sub-menu li.current-menu-item a{
		background-color: transparent;
   	 	padding: .5em .7em;
		border: none;
	}
	#menu .sub-menu a:hover,
	#menu .sub-menu li.current-menu-item a:hover{
		background-color: transparent;
		color: var(--hover);
		border: none;
	}
}



/* ----- ppp popup  ----- */

.ppp{
	display: flex;
    position: fixed;
	left: 0; right: 0; top: 0; bottom: 0;
    z-index: 99;
    pointer-events: none;
    opacity: 0;
    justify-content: center;
    align-items: center;
	transition: opacity .2s ease-in-out, background-color .2s ease-in-out, z-index 0s ease-in-out;
	transition-delay: 0s, .4s;
}
.ppp.active {
    pointer-events: auto;
    opacity: 1;
	transition-delay: 0s, 0s;
}
#ppps-list .ppp{
	text-align: left;
}
.ppp .screen{
    position: fixed;
	left: 0; right: 0; top: 0; bottom: 0;
	background-color: rgba(20,107,28,0);
	z-index: 100;
	transition: background-color .2s ease-in-out, z-index 0s ease-in-out;
	transition-delay: .2s, 0s;
}
.ppp.active .screen{
	background-color: rgba(155,155,155,.7);
	transition-delay: 0s, 0s;
}
.ppp .close{
	right: -10px;
	top: -10px;
    background-color: var(--bg);
    color: var(--text);
}
.ppp .close:hover{
    color: var(--hover);
}
.ppp .box{
	z-index: 101;
    background-color: #fff;
	max-width: 58em;
	padding: 2em 2em 2em;
	margin-left: .5em;
	margin-right: .5em;
	position: relative;
	opacity: 0;
	transition: opacity .2s ease-in-out;
	box-shadow: 0 0 .5em rgba(0,0,0,.3)
}
.ppp.active .box{
	opacity: 1;
	transition: opacity .2s ease-in-out;
}
.ppp .box h3{
	margin: 0;
}
.ppp .box .job{
	margin-top: 0;
	margin-bottom: 1em;
}
.ppp .scroll{
    max-height: 500px;
    overflow: auto
}
.ppp .box .image{
	float: left; 
	margin-right: 2em;
}

.button-ppp{
	border: none;
	background-color: transparent;
	cursor: pointer;
	transition: color .2s ease-in-out;
	color: var(--text);
}
.button-ppp:hover{
	background: none;
	color: var(--text2);
}

.button-ppp .image img{
	opacity: 1;
	transition: opacity .2s ease-in-out;
}
.button-ppp:hover .image img{
	opacity: .9;
}
.ppp .scroll .text img{
	display: block;
}

@media (max-width: 1024px) {
	.ppp .box{
		padding: 1em;
	}
	.ppp .scroll{
		margin-top: 1em;
	}
}

@media (max-width: 768px) {
	.ppp .box > .image{
		display: none;
	}
	.ppp .box .scroll .image{
		float: none;
		display: block;
		text-align: center; 
		margin-right: 0;
		margin-bottom: 2em;
	}
	.ppp .box h3,
	.ppp .box .job{
		text-align: center;
	}
}


/* ----- breadcrumbs ----- */

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: .5em;
    flex-wrap: wrap;
	margin-bottom: 1em;
}

.breadcrumb-current {
    color: var(--color-text-secondary);
}

.breadcrumb-sep {
    height: .8em;
}

/* ----- home-page ----- */

.page-template-home-page #head .head-bottom{
	padding-bottom: 0;
}

.page-template-home-page .hero{
    max-width: 980px;
    margin: 0 auto;
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
}
.page-template-home-page .hero > .cols-2{
    align-items: end;
}
.page-template-home-page .hero__content{
	margin-bottom: 4em;
}
.page-template-home-page .hero h1{
	text-align: left;
	margin-bottom: .2em;
	line-height: 1.3em;
}
.page-template-home-page .hero h2{
	font-size: 1.66em;
	margin-bottom: .3em;
}
.page-template-home-page .hero__inner{
	padding-left: 4em;
	position: relative;
}
.page-template-home-page .hero__inner:before{
	content: "";
	position: absolute;
	left: 0;
	top: 1.1em;
	height: 2px;
	width: 3em;
	background-color: var(--color-green);
}
.page-template-home-page .hero .image{
}
.page-template-home-page .hero .read-more-green{
	font-size: 1.33em;
}
.page-template-home-page .hero .read-more-grey{
	font-size: 1.11em;
}
.page-template-home-page .hero .read-more-grey a{
	padding: .74em 1.3em;
}
.page-template-home-page .hero__buttons{
	margin-top: 3em;
}

.page-template-home-page .icon-list .icon-card{
	display: flex;
	gap: .7em;
}
.page-template-home-page .icon-list .icon-card__icon{
	width: 44px;
}
.page-template-home-page .icon-list .icon-card__content{
	width: calc(100% - .5em - 44px);
}
.page-template-home-page .icon-list .icon-card__title{
	font-size: 1em;
}
.page-template-home-page .icon-list .icon-card__text{
	font-size: .778em;
	line-height: 1.4em;
	color: var(--color-deep-grey);
}

.page-template-home-page .icon-list__items > * {
  position: relative;
}

.page-template-home-page .icon-list__items > *:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -2em; /* połowa gapu */
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-text-main-pale);
}

.page-template-home-page .offer .section-text{
	max-width: 600px;
}
.page-template-home-page .offer .services-list{
	margin-top: 2.5em;
}
.page-template-home-page .offer .services-list .service{
    padding: 2.2em 2.6em;
}
.page-template-home-page .offer .read-more-underline{
	text-align: center;
	margin-top: 2.5em;
}
.page-template-home-page .offer .services-list .read-more a{
	width: 100%;
    justify-content: center;
}

.page-template-home-page .why{
	position: relative;
}
.page-template-home-page .why__list{
	margin-top: 3em;
}
.page-template-home-page .why__list li{
	position: relative;
	padding-left: 4em;
	margin-left: 2em;
	margin-bottom: .2em;
}
.page-template-home-page .why__list li h3{
	margin-bottom: .4em;
	line-height: 1.3em;
}
.page-template-home-page .why-card__text{
	color: var(--color-text-secondary);
	font-size: .888em;
}
.page-template-home-page .why__list li:before{
	content: "";
	position: absolute;
	left: 0;
	top: .25em;
	width: 3em;
	height: 3em;
	background-image: url('/wp-content/themes/szablon-3/images/check.svg');
	background-size: contain;
	background-repeat: no-repeat;
	transition: all .2s ease-in-out;
	filter: invert(82%) sepia(96%) saturate(2200%) hue-rotate(-5deg) brightness(98%) contrast(102%);
}

.page-template-home-page .why .cta-tile{
	border-bottom-right-radius: 0;
	border-top-right-radius: 0;
    padding: 2.2em 4em;
}
.page-template-home-page .why .box-content{
	max-width: 24em;
}
.page-template-home-page .why .cta-tile h3{
	font-size: 1.333em;
	margin-bottom: .3em;
}
.page-template-home-page .why .description{
	font-size: .888em;
	line-height: 1.4em;
	color: var(--color-grey);
	margin-bottom: 1.5em;
}
.page-template-home-page .why .area-map,
.about-intro .area-map{
	margin-top: 1em;
    max-height: 600px;
    display: flex;
    align-items: center;
}
.area-map,
.about-intro .about-image{
    overflow: hidden;
	border-radius: var(--radius-small);
	border-bottom-right-radius: 0;
	border-top-right-radius: 0;
}
.page-template-home-page .why .area-map img{
	width: 100%;
}

.area .section-text ul{
	font-size: .888em;
	line-height: 1.4em;
	margin-top: 2em;
	margin-bottom: 2em;
}
.area .section-text ul strong{
	font-size: 1.25em;
	line-height: 1.4em;
	display: inline-block;
	margin-bottom: .3em;
	font-family: var(--header-font);
	color: var(--color-text-main);
}
.area .section-text ul li{
	color: var(--color-text-secondary);
	padding-top: 1em;
	padding-bottom: 1em;
	position: relative;
}
.area .section-text ul li:before{
	content: "";
	width: 1.5em;
	height: 1.5em;
    margin-left: -2em;
    margin-right: .5em;
    top: .25em;
    position: relative;
	background-image: url('/wp-content/themes/szablon-3/images/address-icon.svg');
	background-size: contain;
	background-repeat: no-repeat;
	transition: all .2s ease-in-out;
	filter: invert(47%) sepia(83%) saturate(425%) hue-rotate(132deg) brightness(92%) contrast(90%);
}
.area .section-text ul li:after{
	content: "";
	background-color: var(--color-text-secondary);
	width: calc(100% + 2em);
	height: 1px;
	position: absolute;
	bottom: 0;
	left: -2em;
}
.area .section-text ul li:last-child:after{
	display: none;
}
.area .section-text p:last-child{
	font-size: .888em;
	line-height: 1.4em;
}
.page-template-home-page .reviews .ti-widget{
	margin-top: 2em;
}
.home .ti-widget.ti-goog .ti-review-item>.ti-inner{
	border: 1px solid var(--color-green) !important;
}

@media (max-width: 1024px) {
	.page-template-home-page .hero{
		text-align: center;
	}
	.page-template-home-page .hero__content{
		margin-top: 4em;
		margin-bottom: 2em;
	}
	.page-template-home-page .hero h1{
		text-align: center;
	}
	.page-template-home-page .hero h2{
		font-size: 1.5em;
	}
	.page-template-home-page .hero__inner{
		padding-left: 0;
	}
	.page-template-home-page .hero__inner:before{
		display: none;
	}
	.page-template-home-page .hero__image img{
		max-width: 20em;
	}
	.page-template-home-page .icon-list__items{
		gap: 1.5em;
	}
	.page-template-home-page .icon-list__items > *:not(:last-child)::after{
		display: none;
	}
	.icon-list .wrap{
    	display: flex;
    	justify-content: center;
	}
}
@media (max-width: 768px) {
	.page-template-home-page .hero h2{
		font-size: 1.4em;
	}
	.page-template-home-page .why .cta-tile{
		border-radius: var(--radius);
		margin-top: 3em;
		padding-left: 2em;
		padding-right: 2em;
		text-align:center;
	}
	.page-template-home-page .why .box-content{
		margin-left: auto;
		margin-right: auto;
	}
	.area-map{
		border-radius: var(--radius-small);
	}
	.page-template-home-page .area .section-text ul{
		max-width: 500px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ----- cta section ----- */

.cta{
	position: relative;
}
.cta:before{
	content: "";
	position: absolute;
	inset: 0;
	background-image: url('images/domek.jpg');
	background-size: cover;
	background-position: center;
	background-size: 100% auto;
	opacity: 0.15;
	z-index: 0;
}
.tlo-1 > *{
	position: relative;
	z-index: 1;
}
.cta .wrap{
	position: relative;
}
.cta .cols-5{
    align-items: center;
}
.cta .image{
	margin-bottom: 0;
	margin-top: -2em;
	display: block;
}
.cta h2{
	line-height: 1.3em;
}

@media (max-width: 1024px) {
	.cta__image{
		display: none;
	}
	.cta__content{
		padding-top: 4em;
		padding-bottom: 3em;
		text-align: center;
	}
}

/* ----- services ----- */

.services-list .service{
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: all .2s ease-in-out;
}
.services-list .service:hover{
	background-color: var(--color-text-main);
	color: var(--color-light);
}

.services-list .box-inner{
}

.services-list .service-head{
	display: flex;
	align-items: center;
	gap: 1em;
	margin-bottom: 1em;
}

.services-list .service-head .image{
	margin: 0;
}

.services-list .service-head img{
	max-height: 63px;
	width: auto;
}

.services-list h2{
	margin: 0;
	max-width: calc(100% - 63px - 1em);
}

.services-list p{
	color: var(--color-text-secondary);
	margin-bottom: 1.5em;
	transition: all .2s ease-in-out;
}
.services-list .service:hover p{
	color: var(--color-light);
}

.services-list .price{
	background-color: var(--color-light);
	border-radius: var(--radius-small);
	padding: .4em .8em;
	margin-bottom: 1.5em;
	transition: all .2s ease-in-out;
}
.services-list .service:hover .price{
	background-color: var(--color-text-main-pale);
}

.services-list .features{
	margin-bottom: 1.5em;
}

.services-list .features li{
	color: var(--color-text-secondary);
	position: relative;
	padding-left: 1.5em;
	margin-bottom: .2em;
	transition: all .2s ease-in-out;
}
.services-list .service:hover .features li{
	color: var(--color-light);
}
.services-list .features li:before{
	content: "";
	position: absolute;
	left: 0;
	top: .25em;
	width: 1.1em;
	height: 1.1em;
	background-image: url('/wp-content/themes/szablon-3/images/check.svg');
	background-size: contain;
	background-repeat: no-repeat;
	transition: all .2s ease-in-out;
}
.services-list .service:hover .features li:before{
	filter: brightness(0) saturate(100%) invert(99%) sepia(55%) saturate(704%) hue-rotate(161deg) brightness(110%) contrast(97%);
}

.services-list .read-more{
	margin-top: auto;
	display: flex;
	justify-content: flex-end;
}

.services-list .cta-tile{
	align-items: center;
	justify-content: center;
	text-align: center;
}

.services-list .cta-tile h2{
	position: relative;
	margin-bottom: .5em;
	font-size: 2.22em;
	max-width: none;
}

.services-list .cta-tile h2:after{
	content: "";
	display: block;
	width: 3em;
	height: 2px;
	background: var(--color-golden);
	margin: .5em auto 0;
}

.services-list .cta-tile p{
	color: #fff;
}

.services-list .cta-tile .read-more{
	margin-top: 0;
}
.cta-phone{
	margin-bottom: .7em;
}



/* ----- pagination ----- */


.pagination span,
.pagination a{
    padding: 0.8em 1.2em 0.8em;
	margin-bottom: 4px;
	display: inline-block;
}

.pagination span.current,
.pagination a:hover,
.pagination span:hover{
    color: #313131;
    background-color: #f19900;
}
@media (max-width: 768px) {
}




/* ----- subpages ----- */

/* ----- o-nas ----- */

.page-template-o-nas #head .head-bottom{
	padding-bottom: 12em;
}
.about-hero .wrap{
	padding-top: 0;
	margin-top: -9em;
}
.about-video video {
    width: 100%;
    height: auto;
    display: block;
}
.about-video {
	margin-bottom: 2em;
}
.about-description{
	text-align: center;
	font-weight: 500;
	font-family: var(--header-font);
	font-size: 1.33em;
	margin: auto;
	max-width: 700px;
}
.about-description p{
	margin-bottom: 0;
}
.about-intro .about-image{
    max-height: 600px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.about-intro .text-content{
	color: var(--color-text-secondary);
}
.about-intro .text-content strong{
	color: var(--color-text-main);
}
@media (max-width: 768px) {	
	.about-hero .wrap{
		padding-bottom: 0;
	}
	.about-intro .about-image{
		border-radius: var(--radius-small);
	}
}

.page-template-o-nas .advantages-section .section-title{
	margin-bottom: 2em;
}
.advantage-item{
	text-align: center;
}
.advantage-item img{
	margin-bottom: 1em;
	height: 3em;
	width: auto;
}
.advantage-item h3{
	margin-bottom: .5em;
}
.advantage-item p{
	color: var(--color-text-secondary);
	font-size: 0.888em;
	line-height: 1.4em;
}

/* ===== HISTORY ===== */


.timeline {
    position: relative;
    max-width: 800px;
    margin: 3em auto 0;
    padding: 2em 0;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--color-golden);
}

.timeline-item {
    position: relative;
    width: calc(50% - 25px - 2em);
    margin: -3em 0;
}
.timeline-item:first-child{
	margin-top: 0;
}
.timeline-item:last-child{
	margin-bottom: 0;
}

.timeline-item.left {
    margin-right: auto;
}

.timeline-item.right {
    margin-left: calc(50% + 25px + 2em);
}

.timeline-item::before {
    content: "";
    position: absolute;
    top: 50%;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: var(--color-golden);
    border: 5px solid var(--color-light-grey);
    transform: translateY(-50%);
    z-index: 5;
}

.timeline-item.left::before {
    right: calc(-37px - 2em);
}

.timeline-item.right::before {
    left: calc(-36px - 2em);
}

.timeline-content {
    position: relative;
    background: #fff;
    border-radius: var(--radius);
    padding: 1.5em;
    text-align: center;
}

.timeline-item.left .timeline-content::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -15px;
    width: 40px;
    height: 40px;
    background: #fff;
    transform: translateY(-50%) rotate(45deg);
}

.timeline-item.right .timeline-content::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -15px;
    width: 40px;
    height: 40px;
    background: #fff;
    transform: translateY(-50%) rotate(45deg);
}

.timeline .year {
    font-family: var(--header-font);
    font-size: 3.33em;
    line-height: 1;
    font-weight: 500;
    color: var(--color-green);
    margin-bottom: 0.15em;
}

.timeline-content h3 {
    font-family: var(--header-font);
    font-size: 1.33em; 
    line-height: 1.3;
    margin-bottom: .5em;
    color: var(--color-text-main);
}

.timeline-content p {
    font-size: 0.89em;
    line-height: 1.6;
    color: var(--color-text-secondary);
	margin-bottom: 0;
}
.timeline .year,
.timeline-content h3,
.timeline-content p{
	position:relative;
	z-index:10;
}

@media (max-width: 768px) {

    .timeline::before {
        left: 18px;
    }

    .timeline-item,
    .timeline-item.left,
    .timeline-item.right {
        width: calc(100% - 50px);
        margin-left: 50px;
        margin-right: 0;
		margin-top: 0;
		margin-bottom: 1em;
    }

    .timeline-item::before,
	.timeline-item.right::before{
        left: -41px;
        right: auto;
    }

    .timeline-item.left .timeline-content::after,
    .timeline-item.right .timeline-content::after {
        left: -10px;
        right: auto;
    }

    .timeline .year {
        font-size: 2.5em;
    }
}

/* ===== PROJECTS ===== */

.projects-grid{
	margin-top: 3em;
	margin-bottom: 3em;
}
.project-item{
	margin-bottom: 2em;
}
.project-item img {
    display: block;
    width: 100%;
    height: auto;
}

.project-item .wp-block-image {
    overflow: hidden;
    border-radius: var(--radius);
    margin-bottom: 1.5em;
    box-shadow: var(--shadow-darker);
}
.zoom-image{
    position: relative;
    display: block;
}

.zoom-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 40, .45);
    opacity: 0;
    transition: opacity .3s ease;
    z-index: 1;
}

.zoom-image::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5em;
    height: 5em;
    background: url('/wp-content/themes/szablon-3/images/fi_zoom-in.svg') center center no-repeat;
    background-size: contain;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .3s ease;
    z-index: 2;
}

.zoom-image:hover::before,
.zoom-image:hover::after {
    opacity: 1;
}

.project-item .info{
	margin-right: 2em;
}
.project-item h3 {
    margin-bottom: .3em;
}

.project-item p,
.projects-info-item p{
    font-size: 0.89em;
    line-height: 1.4em;
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

.projects-info h3{
	margin-bottom: .3em;
}
.projects-info{
    row-gap: 0;
}
.projects-info-item{
	border-bottom: solid 1px var(--color-grey);
	margin-bottom: .5em;
	padding-bottom: .5em;
}
.projects-info-item:last-child,
.projects-info-item:nth-last-child(2) {
	border-bottom: none;
}


/* ----- single-service ----- */

.single-service h1{
	text-align: left;
}
.single-service .hero__subtitle{
	margin-bottom: .8em;
}
.single-service .hero__text{
	margin-bottom: 2em;
}
.single-service .hero__buttons{
	display: flex;
	gap: 1em;
	flex-wrap: wrap;
}
.single-service .hero__buttons .read-more{
	
    font-size: 1.11em;
}
.service-hero .wrap{
	padding-top: 0;
	padding-bottom: 0;
}
.service-hero .cols-7{
	align-items: center;
}

.service-hero .hero__image{
    margin-bottom: -8em;
	border-radius: var(--radius);
	overflow: hidden;
}

.service-sidebar-section {
    overflow: visible;
    position: relative;
    z-index: 10;
    position: sticky;
    top: 0; 
    align-self: start;
    pointer-events: none;
}
.service-sidebar {
    pointer-events: auto;
	margin-top: 1.5em;
	padding: 0;
	overflow: hidden;
}
.service-sidebar h2{
	padding: 1.5rem 2.5rem;
	background-color: var(--color-text-main);
	color: var(--color-light);
}
.service-sidebar-content{
	padding: 2rem 2.5rem;
}
.service-sidebar .service-feature{
    display: inline-flex;
    align-items: center;
    gap: .5em;
	font-family: var(--header-font);
	font-size: 1.111em;
	line-height: 1.3em;
	margin-bottom: .7em;
}
.service-sidebar .service-feature .icon {
    height: 1.2em;
    display: block;
}
.service-sidebar .service-features{
	margin-bottom: 1.5em;
	padding-bottom: 1em;
	border-bottom: solid 1px var(--color-golden);
}

.service-sidebar .service-price{
	font-family: var(--header-font);
	font-size: 1.111em;
	line-height: 1.3em;
	margin-bottom: .5em;
}
.service-sidebar .service-price span{
	font-size: 1.4em;
	line-height: 1.3em;
	font-weight: 500;
}
.service-sidebar .read-more{
	margin-top: 1.8em;
}
.service-sidebar .read-more a{
	width: 100%;
	text-align:center;
    font-size: 1.333em;
}
.service-sidebar .read-more a span{
    justify-content: center;
    width: 100%;
}


.single-service .advantages-section .content ul{
	margin-left: 2em;
}
.single-service .advantages-section .content li{
	color: var(--color-text-secondary);
	position: relative;
	padding-left: 1em;
	margin-bottom: .4em;
	transition: all .2s ease-in-out;
}
.single-service .advantages-section .content li:before{
	content: "";
	position: absolute;
	left: 0;
    top: 0;
    width: 1.3em;
    height: 1.3em;
	background-image: url('/wp-content/themes/szablon-3/images/check.svg');
	background-size: contain;
	background-repeat: no-repeat;
	transition: all .2s ease-in-out;
}
.single-service .advantages-section .content li:before{
	filter: brightness(0) saturate(100%) invert(41%) sepia(78%) saturate(464%) hue-rotate(122deg) brightness(96%) contrast(99%);
}

.single-service .advantages-section .image{
	border-radius: var(--radius);
	overflow: hidden;
}


@media (max-width: 1024px) {
	.service-layout{
		display: flex;
		flex-direction: column;
	}
	.service-section{
		order: 3;
	}
	.service-sidebar-section {
		position: relative;
		order: 2;
	}
	.service-section:nth-child(2){
		order: 1;
	}
	.service-hero .hero__image{
		margin-left: auto;
		margin-right: auto;
		max-width: 20em;
	}
	.about-service-section .wrap{
		padding-top: 8em;
	}
	.service-sidebar-section .wrap{
		padding-top: 0;
		padding-bottom: 0;
	}
	.service-sidebar{
		margin-top: 0;
	}
	.service-sidebar-section .col-4{
		display: none;
	}
}

.process-section h2{
	margin-bottom: 1em;
}
.process{
	margin-left: 2em;
}
.process-item{
	display: flex;
	align-items: flex-start;
	gap: 1em;
	margin-bottom: 1em;
	padding-bottom: 2em;
	background-image: url('/wp-content/themes/szablon-3/images/arrow-down.svg');
	background-repeat: no-repeat;
	background-position: 1.5em bottom;
}
.process-item:last-child{
	margin-bottom: 0;
	padding-bottom: 0;
	background-image: none;
}

.process-left{
	background-color: var(--color-green);
	color: var(--color-light);
	border-radius: var(--radius-small);
	padding: .5em;
	min-width: 4em;
	font-family: var(--header-font);
	text-align: center;
	text-transform: uppercase;
    font-weight: 700;
}
.process-left div:first-child{
	font-size: 0.666em;
	line-height: 1.3em;
	letter-spacing: 9%;
}
.process-left .step-number{
	font-size: 1.777em;
	line-height: 1em;
}
.process-right{
    margin-bottom: -2em;
}

/* ----- faq ----- */
.faq {
    display: flex;
    flex-direction: column;
    gap: .9em;
}

.question {
    position: relative;
    margin: 0;
    padding: .5em 3em .5em 1em;

    cursor: pointer;

    background-color: var(--color-light-grey);
    border-radius: var(--radius-small);
}

.question::after {
    content: '';
    position: absolute;
    top: 50%;
    right: .5em;

    width: 1.75rem;
    height: 1.75rem;

    transform: translateY(-50%);
    transform-origin: center;

    background: url('/wp-content/themes/szablon-3/images/faq-arrow.svg') center / contain no-repeat;

    transition:
        transform .3s ease,
        background-image .2s ease;
}

.question:hover::after {
    background-image: url('/wp-content/themes/szablon-3/images/faq-arrow-hover.svg');
}

.faq-item.active .question::after {
    transform: translateY(-50%) rotate(180deg);
}

.answer {
    max-height: 0;
    overflow: hidden;

    padding: 0 1em;

    transition:
        max-height .35s ease,
        padding-top .35s ease;
}

.faq-item.active .answer {
    padding-top: .75em;
}


/* ===== CASE STUDY ===== */

.case-study-lead .wrap{
	padding-bottom: 0;
}
.case-study-lead p{
	margin-bottom: 0;
}

.case-study-lead .content {
    max-width: 580px;
	text-align: center;
    margin: 0 auto;
	font-size: 1.33em;
	line-height: 1.4em;
	font-family: var(--header-font);
	font-weight: 500;
}

.case-study-item {
    margin-bottom: 3em;
}

.case-study-item:last-child {
    margin-bottom: 0;
}

.case-study-content-wrap {
    padding: 2.5em 8em 2.5em 3.5em;
	margin-right: -10em;
	border-radius: var(--radius);
}


.case-study-category {
	font-size: 1.33em;
	line-height: 1.4em;
    margin-bottom: .5em;
    color: var(--color-green);
	font-weight: 500;
	font-family: var(--header-font);
}

.case-study-title {
    margin-bottom: .5em;
}
.case-study-sidebar-wrap{
    position: relative;
	margin-top: 2em;
	border-radius: var(--radius);
    box-shadow: var(--shadow-darker);
	overflow: hidden;
	max-width: 376px;
}
.case-study-image img {
    display: block;
}

.case-study-steps {
    padding: 1.3em;
}


.case-study-steps h3 {
    margin-bottom: .4em;
    font-size: 1em;
    line-height: 1.3;
}

.case-study-steps li {
}


.case-study-steps li:last-child {
    margin-bottom: 0;
}


.case-study-steps ul {
    font-size: 0.888em;
    line-height: 1.4em;
	padding-left: .5em;
	margin-bottom: 0;
}


@media (max-width: 768px) {
	.case-study-content-wrap {
		padding: 2em 2em 4em 2em;
		margin-right: 0;
		margin-bottom: -2em;
	}
	.case-study-sidebar{
		margin-left: auto;
		margin-right: auto;
	}
	.case-study-sidebar-wrap{
        margin-top: -4em;
	}
}


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

.contact-description{
	text-align: center;
	font-size: 1.33em;
	line-height: 1.3em;
	margin-bottom: 4em;
	font-family: var(--header-font);
	font-weight: 500;
}
.contact-details{
	text-align:center;
	position: relative;
}

.contact-details > * {
  position: relative;
}

.contact-details > *:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -2em; /* połowa gapu */
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-grey);
}

.contact-details .icon{
	height: 2.16em;
	margin-bottom: .5em;
}
.contact-info{
	font-size: 0.88em;
	line-height: 1.4em;
	color: var(--color-text-secondary);
}
.form-section{
	margin-top: 8em;
}
.form-box{
	margin-top: -12em;
}
.form-description{
	color: var(--color-text-secondary);
}
.form-box .the-form{
	margin-top: 3.5em;
	max-width: 740px;
	margin-left: auto;
	margin-right: auto;
}
.contact-icon{
    display: inline-flex;
    align-items: center;
    gap: .5em;
}
a.contact-icon{
	font-weight: 500;
}
@media (max-width: 1024px) {	
	.contact-details > *:not(:last-child)::after {
	  right: -1em;
	}
}

/* ----- cookie notice ----- */

#cookie-notice{
	font-family: var(--main-font);
	background-color: var(--color-text-main) !important;
}
#cookie-notice .cn-button{
	font-family: var(--main-font);
	color: var(--color-light) !important;
	background-color: var(--color-green) !important;
}
#cookie-notice .cn-button:hover{
	color: var(--color-light) !important;
	background-color: var(--color-light-green) !important;
}

/* ----- foot ----- */

#foot .foot-row{
	font-size: .777em;
	line-height: 1.4em;
	color: var(--color-text-secondary);
	padding-top: 2.5em;
	padding-bottom: 2.5em;
	border-top: solid 1px var(--color-grey);
}
#foot .foot-row:first-child{
	padding-top: 0;
	border-top: none;
}
#foot .foot-row:last-child{
	padding-top: 1em;
	padding-bottom: 1em;
	font-size: .666em;
}
#foot .logo{
	margin-bottom: 1.5em;
}
#foot p:last-child{
	margin-bottom: 0;
}
#foot h3{
	font-family: var(--main-font);
	color: var(--color-text-main);
	font-weight: 600;
	font-size: 1.142em;
	margin-bottom: .4em;
}
#foot li{
	margin-bottom: .4em;
}
#foot .menu a{
	color: var(--color-text-secondary);
}
#foot .slowa-kluczowe{
	max-width: 800px;
    column-gap: 4em;
	margin-left: auto;
	margin-right: auto;
}
#menu-menu-w-stopce{
	text-align: right;
}
#menu-menu-w-stopce li{
	display: inline-block;
}
#menu-menu-w-stopce li:before{
	content: "|";
	display: inline-block;
}
#menu-menu-w-stopce li:first-child:before{
	display: none;
}
#menu-menu-w-stopce li a{
	padding-left: .5em;
	padding-right: .5em;
}

@media (max-width: 1024px) {	
	.foot-info{
		text-align:center;
	}
}
@media (max-width: 768px) {	
	#copyright, #menu-menu-w-stopce{
		text-align:center;
	}
}
@media (max-width: 480px) {	
	.foot-row{
		text-align:center;
	}
}