/*
Theme Name: INFOTECH
Theme URL: 
Description: 
Version: 1.0
Author: eFabryka.net

*/

@import "css/fonts.css";

html>body #content {
	height: auto;
}


html, body {min-height: 100%;}

body{
	padding: 0px;
	margin: 0px;
	font: 62.5% '', sans-serif; /* Resets 1em to 10px */
	overflow-y: scroll;	
	animation: fadein 1000ms ease;	
	color: var(--f-color);
	background: #fff;
	height: 100%;
}

:root {
	--f-color: #000;
	--s-color: #ffd700;
}

/************************************************
*	HEAD										*
************************************************/

/*============================*/
/* WATERMARK (SVG w CSS) + animowany gradient */
body{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Crect width='400' height='400' fill='none'/%3E%3Cg stroke='%23ffffff' stroke-opacity='0.12' fill='none' stroke-width='3'%3E%3Cpath d='M60 80 l40 -20 a20 20 0 1 1 28 28 l-20 40 l-48 -48 z'/%3E%3Ccircle cx='138' cy='88' r='6' fill='%23ffffff' fill-opacity='0.12'/%3E%3Crect x='260' y='60' width='14' height='80' rx='4'/%3E%3Cpolygon points='267,40 280,60 254,60'/%3E%3Crect x='70' y='240' width='16' height='90' rx='5'/%3E%3Crect x='40' y='230' width='60' height='16' rx='3'/%3E%3Ccircle cx='300' cy='290' r='28'/%3E%3Ccircle cx='300' cy='290' r='12'/%3E%3Cline x1='300' y1='248' x2='300' y2='266'/%3E%3Cline x1='300' y1='314' x2='300' y2='332'/%3E%3Cline x1='258' y1='290' x2='276' y2='290'/%3E%3Cline x1='324' y1='290' x2='342' y2='290'/%3E%3Cline x1='278' y1='268' x2='292' y2='282'/%3E%3Cline x1='322' y1='268' x2='308' y2='282'/%3E%3Cline x1='278' y1='312' x2='292' y2='298'/%3E%3Cline x1='322' y1='312' x2='308' y2='298'/%3E%3C/g%3E%3C/svg%3E") center/1100px no-repeat,
    linear-gradient(135deg,#061a3a 0%,#10316b 35%,#315efb 60%,#f94144 100%) 0% 50% / 200% 200% no-repeat;
  animation:gradientMove 18s ease-in-out infinite;
}

@keyframes gradientMove{
  0%{background-position:center,0% 50%}
  50%{background-position:center,100% 50%}
  100%{background-position:center,0% 50%}
}


#head{
		padding: 20px 0;
		position: fixed;
		left: 0;
		right: 0;
		margin: 0 auto;
		z-index: 999;
		transition: 200ms;
		border-bottom: 1px solid #d1d5db;
	}
	
#head.scroll {
	background: rgba(30, 69, 170, .6);
	backdrop-filter: blur(6px);
	transition: 200ms;
}	
	
#head .inside {
	display: flex;
	justify-content: space-between;
	align-items: center;
}	

.brand-sep {
	width: 1px;
    height: 26px;
    background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.15));
    box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset;
}

.brand-contact {
	  display: flex;
		gap: 8px;
		font-size: 0.875rem;
		line-height: 2rem;
		flex-direction: column;
		font-weight: 600;
}

.brand-contact a {
	transition: 100ms;
}

.brand-contact a:hover {
	filter: brightness(1.12);
    transform: translateY(-1px);
	transition: 100ms;
}


.logo {
	display: flex;
	align-items: center;
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: .6px;
	color: #fff;
	gap: 20px;
	text-shadow: 0 2px 6px rgba(0,0,0,.6);
	margin-left: 10px;
}


#head h5 {display: none;}


#head .menu {
		}
		
#head ul.menu {
		margin: 0 0 0 10px;
		padding: 0;
		}

#head .menu li {
		list-style: none; 
		display: inline-block;
		}
		
#head .menu li a{
		font-size: 1.25rem;
		color: #fff !important;
		font-weight: 800;
		letter-spacing: .8px;
		text-transform: uppercase;
		text-shadow: 0 2px 6px rgba(0, 0, 0, .8);
		transition: color .2s, transform .18s, text-shadow .18s, filter .18s;
		padding: 0 1rem;
		transition: 200ms; 
		display: inline-block;
		}
		
#head .menu li a:hover {
    color: #ffe6e6 !important;
    transform: scale(1.05);
    text-shadow: 0 3px 10px rgba(0, 0, 0, .85);
    filter: brightness(1.2);
		transition: 200ms;
		}
		
#head .menu li.current-menu-item a #head .menu li a:hover {transform: scale(1);}		

#head .menu li.current-menu-item a {
	color: var(--s-color) !important;
}		
		
#head .menu li.menu-item-has-children {
	position: relative;
}	
	
#head .menu li.menu-item-has-children:after {
	content: url(images/li-after.svg);
	margin-left: 5px;
	transition: 200ms;
	display: inline-block;
	
}	

#head .menu li.menu-item-has-children:hover:after {
	transform: rotate(90deg);
	transition: 200ms;
}

	
#head ul.sub-menu {
		display: flex;
		width:250px;
		flex-direction: column;
		padding: 30px 0 0 0;
		position: absolute;
		left: -70px;
		transform-origin: top;
		transition: 500ms ease;
		z-index: 666;
		transform: scale(1,0);
		opacity: 0;
}

#head ul.sub-menu li {
	padding: 10px 10px;
	text-align: center;
	margin: 4px 0;
}

#head ul.sub-menu li a {
	padding: 10px 10px;
	text-align: center;
}

#head ul.sub-menu li a:hover {
}

#head li.menu-item-has-children:hover > ul.sub-menu {
	transform: scale(1,1);
	opacity: 1;
	transition: 500ms;
}

.top-space {padding-top: 112px;}


/************************************************
*	TEXT										*
************************************************/

.okruszki {
	margin: 30px 0 0 0;
	padding: 10px;
	background: rgba(255,255,255,.05);
	font-size: .8rem;
	color: rgba(255,255,255,.8);
	text-shadow: 1px 2px 5px #000;
}

.okruszki a {transition: 200ms;}
.okruszki a:hover {opacity: .6; transition: 200ms;}

.text-content {
	text-shadow: 0 2px 6px rgba(0,0,0,.45), 0 0 2px rgba(0,0,0,.6);
	color: #fff;
	font-size: 1rem;
	line-height: 1.6rem;
}


a img,:link img,:visited img { border:none }    
a, a:link {text-decoration: none; color: var(--page-color);}
a:hover {text-decoration: none;}
strong, b {font-weight: bold;}
em, i {font-style: italic;}
ul {margin: 0;}

::selection {color: #fff;background: #333;}

.text-content h1 {
        font-size: 2.0rem;
		line-height: 2.5rem;
		text-shadow: 0 2px 6px rgba(0,0,0,.45), 0 0 2px rgba(0,0,0,.6);
}

.text-content h2 {
        font-size: 1.875rem;
		line-height: 2.2rem;
		text-shadow: 0 2px 6px rgba(0,0,0,.45), 0 0 2px rgba(0,0,0,.6);
		font-weight: 600;
		color: #fff;
}

.text-content h3 {
		font-size: 1.5rem;
		font-weight: 600;
		line-height: 1.3em;
		margin: 0 0 20px 0;
}

/************************************************
*	LAYOUT										*
************************************************/
.kolumny {
	display: flex;
	flex-direction: row;
}

.kolumny > div {
	width: 50%; 
	padding: 20px;
	box-sizing: border-box;
}

.kolumny img {
	border-radius: 8px;
	border: 2px solid #fff;
	max-width: 100%;
	height: auto;
}

.pliki-pdf {
	border-radius: 5px;
	border: 1px solid #fff;
	padding: 20px;
	width: 70%;
	margin: 40px auto 20px auto;
	background: rgba(255,255,255,.1);
	backdrop-filter: blur(10px);
}

.pliki-pdf h2 {
	font-size: 1.2rem;
	text-align: center; 
	font-weight: 600;
	margin: 0 0 20px 0;
	border-bottom: 1px solid #fff;
}

.pliki-pdf a {transition: 200ms; display: inline-block; margin: 0 0 10px 0;}

.pliki-pdf a:before {
	content: '';
	width: 25px;
	height: 18px;
	background: #fff;
	display: inline-block;
	margin-right: 0;
	mask: url(images/pobierz.svg) left bottom / auto 100% no-repeat;
	transition: 200ms;
}

.pliki-pdf a:hover {color: var(--s-color); transition: 200ms; transform: translateX(3px);}
.pliki-pdf a:hover:before {background: var(--s-color); transition: 200ms;}

.mapa iframe {
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	}

.kontakt .fl-module {
	background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    padding: 24px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	transition: 200ms;
}

.kontakt .fl-module:hover {
	background: rgba(255, 255, 255, 0.2);
}

.kontakt a {
	text-decoration: underline;
	transition: 200ms;
}

.kontakt a:hover {
	opacity: .6;
	transition: 200ms;
}

.forminator-response-message.forminator-success {
	background: #0f3f7f !important;
	box-shadow: none !important;
	color: #fff !important;
	font-weight: 700 !important;
}


.formularz .fl-module{
	background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    padding: 24px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	transition: 200ms;

}

.formularz input, .formularz textarea {
	background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px !important;
    padding: 24px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	transition: 200ms;

	
}


.inside {
        width: 1240px;
		margin: 0 auto;
}

.alignleft {float: left;margin-right: 20px;}
.alignright {float: right;margin-left: 20px;}
.aligncenter {display: block;text-align: center;margin: 0 auto !important;}
.item p a{text-decoration: none;}
.clear {clear: both;}


/************************************************
*	FOOTER									*
************************************************/
#foot {
	padding: 60px 0;
	color: #fff;
	font-size: 1rem;
	line-height: 1.6rem;
    background: rgba(6, 26, 58, 0.5);
    backdrop-filter: blur(6px);
    min-height: 60px;
    border-top: 2px solid rgba(255,255,255,0.25);
}
#foot a  {
	color: #fff;
	transition: 200ms;
}
#foot a:hover {
	opacity: .6;
	transition: 200ms;
}
#foot .footer {display: flex; justify-content: space-between;}
#foot .footer > div:first-of-type {margin-left: 10px;}
#foot .footer > div:last-of-type {margin-right: 10px;}
#foot ul {margin: 0; padding: 0; list-style: none;}

#foot h5 {display: none;}

#foot p {margin: 0 10px 0 0;}

/************************************************
*	PLUGINS										*
************************************************/				
.fl-button {
	box-shadow: 0 6px 16px rgba(0,0,0,0.4) !important;
	text-shadow: none !important;
	background: linear-gradient(180deg, #ffffff, #dfe6f7) !important;
	color: #0a2a66 !important;
	font-weight: 700 !important;
	border-radius: 4px !important;
	padding: 15px 30px !important;
	transition: 100ms;
}

.fl-button span {
	color: #0a2a66 !important;
	transition: 200ms;
}

.fl-button:hover {
	box-shadow: 0 3px 6px rgba(0,0,0,0.4) !important;
	transform: translateY(2px) !important;
	transition: 100ms;
}

.singlepage {
	padding: 0 20px;
}

.singlepage .fl-button {
	float: right !important;
	display: inline-block !important;
	margin: 0 10px 20px 0 !important;
}

.category-container {padding: 0 20px;}

.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
	margin-bottom: 20px;
}

.category-grid a {
	
	transition: 200ms;
}

.category-grid a:hover {
	box-shadow: 0 0 1px 2px rgba(255,255,255,1);
	
}

.category-tile {
    position: relative;
    display: block;
    width: 100%;
    height: 250px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.1s ease;
    text-decoration: none;
}


.category-tile:hover {
    transform: translateY(-5px);
}

.category-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));
}

.category-name {
    position: absolute;
    left: 15px;
    bottom: 15px;
    font-size: 1.2rem;
    font-weight: 600;
    z-index: 2;
	color: #fff;
	padding: 10px 20px;
	background: rgba(0,0,0,.3);
	backdrop-filter: blur(10px);
	border-radius: 10px;
}

.category-header h1 {
	color: #fff;
	text-shadow: 0 2px 6px rgba(0,0,0,.6);
	margin: 60px 0 40px 0;
}

.singlepage h1 {
	color: #fff;
	text-shadow: 0 2px 6px rgba(0,0,0,.6);
	margin: 20px 0 20px 0;
	text-align: center;
}

.category-tile:hover .category-name {color: VAR(--s-color);}


.cky-btn-revisit-wrapper.cky-revisit-bottom-left {
	display: none !important;
}


/************************************************
*	ANIMATION									*
************************************************/	
@keyframes fadein {
	0%{opacity: 0;}
	100%{opacity: 1;}
}


/************************************************
*	RESPONSIVE									*
************************************************/	
@media(max-width:1240px) {
	.inside {width: 100%;}
}

@media(max-width:768px) {
	.kolumny  {	flex-direction: column;	}	
	.kolumny  >div {width: 100%;}	
	.kolumny  >div img {margin: 0 auto; display: block;}
	.pliki-pdf {width: 100%; padding: 0 20px; box-sizing: border-box;}
	}
@media(max-width:720px) {.category-grid {  grid-template-columns: repeat(2, 1fr);  gap: 20px;}
@media(max-width:500px) {.category-grid {  grid-template-columns: repeat(1, 1fr);  gap: 20px;}