body {
		  background-image: url("../../assets/images/tlo.webp");
		  background-size: cover;
		  background-repeat: no-repeat;
		  background-position: center top;
		  max-width: 100%;
		  text-align: center;
		  min-height: 100vh;
		}
        html {
            font-size: 14px;
            font-family: 'Open Sans', sans-serif;
            color: #fff;
			font-weight:400;
        }
		h1 {
			font-size:24px;
            font-family: 'Open Sans', sans-serif;
            color: #fff;
			font-weight:700;
		}
		h2 {
			font-size:18px;
            font-family: 'Open Sans', sans-serif;
            color: #fff;
			font-weight:400;
		}
		a {
			text-decoration: none;
		}
.nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 80px;
	background-color: rgba(255, 255, 255, 0.1); /* lekko przezroczysty baner */
	z-index: 9999;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20px;
}

.nav .left {
	display: flex;
	align-items: center;
}

.nav .right {
	display: flex;
	align-items: center;
}

.nav .logo {
	height: 60px;
	margin-top: 2%px;
	margin-left: 10%; /* już zawarte w padding rodzica */
}

.nav .right img {
	height: 20px;
	margin-top: 2%;
	margin-right: 50px; /* już zawarte w padding rodzica */
}
.title {
	margin-top: 100px;
}

/* Główna ramka */
.menu-container {
    position: relative;
    width: 100%;
    height: 100vh;
}

/* Przycisk menu – ogólne */
.menu-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10vh;
    gap: 40px;
    flex-wrap: wrap;
}

.menu-button {
    display: inline-block;
    width: 200px;
    height: 50px;
    background-color: #c73131;
    color: #fff;
    text-align: center;
    line-height: 50px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.menu-button:hover {
    background-color: #a60505;
}

/* Ikony social media */
.social-icons {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.social-icons img {
    width: 50px;
    height: 50px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* lekki cień na dole */
}

/* WhatsApp chat */
.whatsapp-chat {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

.whatsapp-chat img {
    height: 60px;
}
.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;overflow:auto;background:rgba(0,0,0,.5)}
.modal-content{background:#fff;margin:5% auto;padding:1.5rem;border-radius:8px;max-width:800px;position:relative}
.close{position:absolute;top:.5rem;right:.75rem;font-size:1.5rem;font-weight:bold;color:#333;cursor:pointer}
img.pop{max-width:100%;height:auto;border-radius:4px;margin-top:1rem}
iframe{width:100%;height:480px;border:none;border-radius:4px}
button {
    padding: 1.2rem 5rem;
    border: none;
    border-radius: 2px;
    background: #c73131;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    margin-right: .5rem;
    font-weight: 600;
}
button:hover{background:#a60505}
/* MOBILE: inne tło dla smartfonów */
h2.pop {color:#000;}
p.pop {color:#000;}
@media screen and (max-width: 768px) {
	body {
		background-image: url("../../assets/images/tlo_mobile.webp");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		background-attachment: scroll;
		min-height: 100vh;
	}
    .menu-buttons {
        flex-direction: column;
        margin-top: 10vh;
        gap: 10px;
    }

    .menu-button {
    width: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1vh;
    gap: 10px;
    flex-wrap: wrap;		
    }

    .social-icons {
        margin-top: 40px;
    }

    .whatsapp-chat img {
        height: 50px;
    }	
.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;overflow:auto;background:rgba(0,0,0,.5)}
.modal-content{background:#fff;margin:20% auto;padding:1.5rem;border-radius:8px;max-width:800px;position:relative}
.close{position:absolute;top:.5rem;right:.75rem;font-size:3rem;font-weight:bold;color:#333;cursor:pointer}
img.pop{max-width:100%;height:auto;border-radius:4px;margin-top:1rem}
iframe{width:100%;height:480px;border:none;border-radius:4px}
button {
    padding: 1.2rem 5rem;
    border: none;
    border-radius: 2px;
    background: #c73131;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    margin-right: .5rem;
    font-weight: 600;
}
button:hover{background:#a60505}
/* MOBILE: inne tło dla smartfonów */
h2.pop {color:#000;}
p.pop {color:#000;}	
}