body {
  margin: 0;
  color: #434d4b;
  background: #efe9cf;
  font-family: Arial, "Arial MT", Helvetica, sans-serif;
  font-family: "Open Sans", sans-serif;
}

.header{
	padding:40px;
	background-image:url('img/bg-1.png');
	background-position:center;
	background-size:cover;
	position:relative;
	
}

.header h1{
	font-size:38px;
	font-weight:750;
	line-height:45px;
	margin-top:150px;
}

.header p{
	margin:0px;
	font-size:20px;
	font-weight:600;
}

.img-m{
	margin:0px 20px;
}

.header-left img{
	height:40px;
}

.header-right{
	text-align:right;
}

.header-right img{
	height:34px;
}

.header .container{
	position:relative;
	padding-bottom:250px;

	
}

.gm1{
	position:absolute;
	left:0px;
	bottom:24px;
}	

.gm1 img{
	height:22px;
}


.gm2{
	    position: absolute;
    right: 25%;
    top: 40px;
    height: 50px;
}	
.gm2 img{
	height:100px;
	animation: gm2SideHint 2.8s ease-in-out infinite;
	filter: drop-shadow(0 5px 8px rgba(67, 77, 75, .14));
	will-change: transform;
}

.gm3{
	position:absolute;
	right:0px;
	bottom:0px;;
}

.gm3 img{
	height: 70px;
    opacity: 0.6;
}

.middle{
	padding:50px 0px;
}


.middle h2{
	margin: 0 0 30px;
    font-size: 25px;
    line-height: 30px;
    font-weight: 700;
    letter-spacing: 0;
}

.middle p{
	margin: 0 0 15px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

.middle-right{
	    padding-top: 94px;
}

.tiles{
	padding:70px 0px;
	padding-bottom:45px;
	background-image:url('img/bg-2.jpg');
	background-position:Center;
	background-size: cover;
}

.tiles a{
	display:block;
	background-color:#efe9cf;
	text-align:center;
	padding:25px;
	color:#434d4b;
	text-decoration:none;
	position:relative;
	padding-bottom:35px;
	margin-bottom:25px;
	box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.25);
	
}

.tiles a span{
	display:block;
}

.tiles .icon{
	background-color:#ffffff;
	width:100px;
	line-height:100px;
	border-radius:50%;
	text-align:center;
	display:inline-block;
}

.tiles .icon img{
	width:40%;
}

.tiles .name{
	margin-top:20px;margin-bottom:0px;
	font-weight:700;
	font-size:22px;
	
	min-height:50px;
	line-height:25px;
}

.tiles .info{
	position:absolute;
	left:30px;right:30px;
	bottom:15px;
	font-size:11px;
	border:1px solid #e94e1b;
	border-radius:5px;
	line-height:22px;
}

.tiles a:hover{
	background-color:#434d4b;
	color:#efe9cf;
}

.footer {
	background-color:#434d4b;
	color:#dfdfdf;
	padding:50px 0px;
}

.footer a{
	color:#dfdfdf;
	text-decoration:none;
	font-size:14px;
}


.footer-left img{
	height:40px;
}

.footer p{
	margin:0px;
	line-height:18px;
}

.footer strong{
	display:block;margin-bottom:15px;
	font-size:20px;
}

/* --- Dynamic effects --- */
.header-right img {
	cursor: pointer;
	transition: transform .25s ease, opacity .25s ease, filter .25s ease;
}

.header-right img:hover {
	transform: scale(1.08) rotate(2deg);
	opacity: .85;
}

/* Subtelne podpowiedzi ruchu */
.gm1 img {
	animation: scrollHint 1.55s ease-in-out infinite;
	filter: drop-shadow(0 5px 7px rgba(67, 77, 75, .16));
	will-change: transform;
}

.gm3 img {
	animation: sideMoveHint 3.1s ease-in-out infinite;
	filter: drop-shadow(0 5px 8px rgba(67, 77, 75, .14));
	will-change: transform;
}

@keyframes scrollHint {
	0%, 100% { transform: translateY(0); opacity: .62; }
	50% { transform: translateY(5px); opacity: .82; }
}

@keyframes sideMoveHint {
	0%, 100% { transform: translateX(0); opacity: .52; }
	50% { transform: translateX(-5px); opacity: .66; }
}

@keyframes gm2SideHint {
	0%, 100% { transform: translateX(0); opacity: .78; }
	50% { transform: translateX(7px); opacity: .95; }
}

/* Tiles: entrance + hover animation */
.tiles .col-12 {
	animation: tileFadeUp .75s ease both;
}

.tiles .col-12:nth-child(1) { animation-delay: .05s; }
.tiles .col-12:nth-child(2) { animation-delay: .12s; }
.tiles .col-12:nth-child(3) { animation-delay: .19s; }
.tiles .col-12:nth-child(4) { animation-delay: .26s; }
.tiles .col-12:nth-child(5) { animation-delay: .33s; }
.tiles .col-12:nth-child(6) { animation-delay: .40s; }
.tiles .col-12:nth-child(7) { animation-delay: .47s; }
.tiles .col-12:nth-child(8) { animation-delay: .54s; }

.tiles a {
	overflow: hidden;
	transition: transform .32s ease, background-color .32s ease, color .32s ease, box-shadow .32s ease;
}

.tiles a::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.32) 45%, transparent 70%);
	transform: translateX(-120%);
	transition: transform .65s ease;
	pointer-events: none;
}

.tiles a:hover {
	transform: translateY(-8px) scale(1.02);
	box-shadow: 0 16px 24px rgba(0, 0, 0, .28);
}

.tiles a:hover::before {
	transform: translateX(120%);
}

.tiles .icon {
	transition: transform .32s ease, box-shadow .32s ease;
}

.tiles a:hover .icon {
	transform: rotate(-4deg) scale(1.08);
	box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}

.tiles a:hover .icon img {
	animation: iconPop .45s ease;
}

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

@keyframes iconPop {
	0% { transform: scale(1); }
	50% { transform: scale(1.16); }
	100% { transform: scale(1); }
}

/* Offcanvas w stylu wizualizacji */
#menu.offcanvas {
	width: min(405px, 100vw);
	background: linear-gradient(145deg, #f7ecd7 0%, #efe9cf 54%, #f6ddc6 100%);
	color: #434d4b;
	border-left: 1px solid rgba(67, 77, 75, .18);
	box-shadow: -18px 0 42px rgba(0, 0, 0, .20);
	overflow: hidden;
}

#menu::before,
#menu::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

#menu::before {
	right: -115px;
	bottom: -75px;
	width: 300px;
	height: 430px;
	background: linear-gradient(145deg, rgba(233, 78, 27, .92), #ff5630);
	transform: skewX(-34deg);
	transform-origin: bottom right;
}

#menu::after {
	right: 64px;
	bottom: -60px;
	width: 38px;
	height: 430px;
	background: rgba(255, 255, 255, .72);
	transform: skewX(-34deg);
}

#menu .offcanvas-header,
#menu .offcanvas-body {
	position: relative;
	z-index: 1;
}

#menu .offcanvas-header {
	align-items: center;
	padding: 48px 29px 26px;
	border-bottom: 0;
}

#menu .offcanvas-title {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: .3px;
	color: #434d4b;
	text-transform: uppercase;
}

#menu .btn-close {
	width: 34px;
	height: 34px;
	padding: 0;
	background-size: 24px;
	opacity: .95;
	box-shadow: none;
	transition: transform .25s ease, opacity .25s ease;
}

#menu .btn-close:hover {
	transform: scale(1.08) rotate(2deg);
	opacity: .78;
}

#menu .offcanvas-body {
	display: flex;
	flex-direction: column;
	min-height: calc(100% - 108px);
	padding: 44px 29px 28px;
}

#menu .slide-menu-nav {
	display: flex;
	flex-direction: column;
	gap: 0;
}

#menu .slide-menu-nav a {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 72px;
	padding: 10px 48px 10px 0;
	color: #434d4b;
	text-decoration: none;
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.8px;
	border-bottom: 1px solid rgba(67, 77, 75, .18);
	transition: transform .25s ease, color .25s ease, padding-left .25s ease, border-color .25s ease;
}

#menu .slide-menu-nav a::after {
	content: "";
	position: absolute;
	right: 4px;
	top: 50%;
	width: 14px;
	height: 14px;
	border-top: 3px solid currentColor;
	border-right: 3px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
	transition: right .25s ease, transform .25s ease, color .25s ease;
}

#menu .slide-menu-nav a:hover {
	padding-left: 10px;
	transform: translateX(-4px);
	color: #e94e1b;
	border-color: rgba(233, 78, 27, .35);
}

#menu .slide-menu-nav a:hover::after {
	right: 0;
	transform: translateY(-50%) rotate(45deg) scale(1.08);
}

#menu .menu-footer {
	margin-top: auto;
	padding-top: 56px;
	font-size: 17px;
	line-height: 1.25;
	color: #434d4b;
}

#menu .menu-footer strong {
	display: block;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -.4px;
}

#menu .menu-footer span {
	display: block;
	margin-top: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
	}
}

@media (max-width: 767px) {
	.tiles a:hover { transform: translateY(-4px); }
	#menu.offcanvas { width: 100vw; }
	#menu .offcanvas-header { padding: 48px 29px 24px; }
	#menu .offcanvas-body { padding: 42px 29px 28px; }
	#menu .slide-menu-nav a { min-height: 71px; font-size: 32px; }
	#menu::before { right: -130px; bottom: -85px; width: 285px; height: 390px; }
	#menu::after { right: 70px; bottom: -75px; height: 390px; }
}


/* Rower w headerze jako osobny obrazek — płynna animacja przez transform */
.header .container {
	position: relative;
	overflow: hidden;
}

.header .row,
.header .gm1,
.header .gm2,
.header .gm3 {
	position: relative;
	z-index: 2;
}

.header .gm1,
.header .gm2,
.header .gm3 {
	position: absolute;
}

.bike-float-bg {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 86%;
	width: auto;
	max-width: none;
	pointer-events: none;
	user-select: none;
	z-index: 1;
	transform: translate3d(-50%, -50%, 0);
	animation: bikeImgFloat 5.5s ease-in-out infinite;
	will-change: transform;
	backface-visibility: hidden;
}

@keyframes bikeImgFloat {
	0%, 100% {
		transform: translate3d(-50%, -50%, 0);
	}
	50% {
		transform: translate3d(-50%, calc(-50% + 10px), 0);
	}
}

.only-mobile{
	display:none;
}


@media (max-width: 991.98px) {

	.middle2{
		display:none;
	}
	
	.middle .middle-right{
		padding-top:0px;
	}
	
	.gm1{
		display:none;
	}
	
	.gm2{
		display:none;
	}
	
	.header{
		background-position:right center;
	}
	
	.header .container .bike-float-bg{
		display:none;
	}
	
	.only-mobile{
		display:block;
	}
	
	.header .container{
		padding-bottom:330px;
	}
	
	
	
	.bike-float-bg{
	
	    left: 18%;
		top: 73%;
		height: 49%;
	}
	
	
	
}