/* --- Zmienne Kolorystyczne --- */
:root {
    --bg-white: #ffffff;
    --bg-light-grey: #f4f4f4;
    --bg-mid-grey: #dddddd;
    /* --text-black: #000000; */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
   /* font-family: 'Segoe UI', Arial, sans-serif; 
    color: var(--text-black); */
    background-color: var(--bg-white);
    line-height: 1.6;
}


/* --- Nagłówek i Menu --- */
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
    background-color: var(--bg-white);
    border-bottom: 1px solid var(--bg-mid-grey);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo a { text-decoration: none; /* color: var(--text-black); */ font-size: 24px; letter-spacing: 1px; }

.logotyp { max-width: 200px; }

.dropdown { position: relative; display: inline-block; border: none; }
.dropbtn {
    background: none;  border: none; 
    padding: 8px 16px; cursor: pointer; font-size: 35px;
	font-style: Times New Roman;
}

.dropdown-content {
    display: none; position: absolute; right: 0;
    background-color: var(--bg-white); min-width: 160px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 1;
}

.dropdown-content a {
    color: /* var(--text-black); */ padding: 12px 16px;
    text-decoration: none; display: block;  border-bottom: 1px solid var(--bg-light-grey) ;
}

.dropdown-content a:hover { background-color: var(--bg-light-grey); }
.dropdown:hover .dropdown-content { display: block; }

/* --- Sekcje Główne --- */
.section-padding { 
padding: 60px 5%; 
max-width: 1400px; 
margin: 0 auto; 
text-align: center; 
}

.section-title { 
margin-bottom: 40px; 
text-transform: uppercase; 
letter-spacing: 2px;
font-family: "Montserrat", sans-serif; 
}

hr { border: 0; border-top: 1px solid var(--bg-mid-grey); max-width: 50%; margin: 0 auto; }

/* --- KARUZELA (80% szerokości, 3:2) --- */
.carousel-container {
    position: relative;
     /* 80% szerokości na komputerze */
    
    margin: 0 auto;
    overflow: hidden;
    background-color: var(--bg-light-grey);
}

.carousel-slide { display: none; width: 100%; height: 100%; }
.carousel-slide img {
    width: 100%; height: 100%; object-fit: cover; cursor: zoom-in;
}

/* Strzałki nawigacyjne - POPRAWIONE POKOŁOŻENIE */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Idealne centrowanie w pionie */
    width: auto;
    padding: 25px 15px;
    color: white;
    font-weight: bold;
    font-size: 30px;
    background-color: rgba(0,0,0,0.3);
    user-select: none;
    z-index: 10;
    text-decoration: none;
    transition: 0.3s;
}

.prev { left: 0; border-radius: 0 3px 3px 0; }
.next { right: 0; border-radius: 3px 0 0 3px; }
.prev:hover, .next:hover { background-color: rgba(0,0,0,0.7); }

.fade { animation: fadeEffect 1.5s; }
@keyframes fadeEffect { from {opacity: 0.4} to {opacity: 1} }

/* --- Oferta (3 boxy) --- */
.offers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 20px;
}

.offer-box {
    padding: 40px 20px;
     /* background-color: var(--bg-light-grey); */
    border-right: 1px solid #bdbdbd;
	border-left: 1px solid #bdbdbd;
	font-family: "Montserrat", sans-serif;
    /* font-size: 50px; */
    font-weight: 300;
    
}

.offer-box h3 { 
margin-bottom: 15px; 
margin-top: 10px;
text-transform: uppercase;
font-size: 35px;
color: #555;  }

.offer-box p { 
    }

.offer-head { 
font-family: "Montserrat", sans-serif;
  font-weight: 200;
  font-style: italic;
  color: #797979;

   }

.offer-name { 
    }

.offer-list	{ 
font-family: "Montserrat", sans-serif;
  font-weight: 300;
  font-style: italic;
  color: #797979;
  text-transform: uppercase;
    } 
	
.offer-list p { 
margin-top: 30px;
}
.price {
	color: #000;
	text-align: center;
	margin-top: 40px;
}

.contact {
	margin-top: 40px;
	display: block;
	border: 1px solid #555;
	border-radius: 5px;
	text-align: center;
	text-decoration: none;
	
} 
.con {
	text-decoration: none;
	color: black;
}

/*FORMULARZ KONTAKTOWY */



.pg-contact-wrapper {
        --pg-bg-color: #ffffff; 
        --pg-bg-sidebar: #f4f4f4; 
        --pg-text-color: #000000; 
        --pg-border-color: #e0e0e0; 
        --pg-label-color: #555555;
        
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        display: flex;
        background-color: var(--pg-bg-color);
        max-width: 1000px;
        width: 100%;
        margin: 40px auto;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        color: var(--pg-text-color);
        box-sizing: border-box;
    }

    .pg-contact-wrapper * { box-sizing: border-box; }

    .pg-contact-sidebar {
        flex: 1;
        background-color: var(--pg-bg-sidebar);
        padding: 50px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .pg-heading {
        font-size: 24px;
        margin: 0 0 30px 0;
        font-weight: 700;
    }

    .pg-info-item { margin-bottom: 25px; }

    .pg-info-item label {
        display: block;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 1px;
        color: #777;
        margin-bottom: 5px;
    }

    .pg-info-item p, .pg-info-item a {
        font-size: 16px;
        margin: 0;
        color: var(--pg-text-color);
        text-decoration: none;
        font-weight: 500;
    }

    .pg-social-links {
        margin-top: 40px;
        display: flex;
        gap: 15px;
    }

    .pg-social-links a {
        font-size: 14px;
        font-weight: 600;
        color: var(--pg-text-color);
        text-decoration: none;
        transition: opacity 0.3s;
    }

    .pg-social-links a:hover { opacity: 0.6; }

    .pg-form-section { flex: 2; padding: 50px; }

    .pg-contact-form { display: flex; flex-direction: column; gap: 20px; }

    .pg-form-group { display: flex; flex-direction: column; gap: 8px; }

    .pg-form-group label {
        font-size: 14px;
        font-weight: 600;
        color: var(--pg-label-color);
    }

    .pg-contact-form input, 
    .pg-contact-form textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid var(--pg-border-color);
        border-radius: 6px;
        background-color: #fff;
        font-size: 15px;
        color: var(--pg-text-color);
        font-family: inherit;
        transition: border-color 0.3s;
    }

    .pg-contact-form input:focus, 
    .pg-contact-form textarea:focus {
        outline: none;
        border-color: #000;
    }

    .pg-contact-form button {
        background-color: #000;
        color: #fff;
        border: none;
        padding: 15px 35px;
        border-radius: 6px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.3s;
        margin-top: 10px;
        align-self: flex-start;
    }

    .pg-contact-form button:hover { background-color: #333; }

  
/* --- O mnie --- */
.about-content { max-width: 800px; margin: 0 auto; font-size: 1.1rem; }

.profile img {
	
	max-width: 30%;
	display: block;
}

/* --- Stopka --- */
footer {
    text-align: center; padding: 40px;
   
    border-top: 1px solid var(--bg-mid-grey);
    font-size: 0.9rem;
}

/* --- Lightbox (Modal) --- */
.modal {
    display: none; position: fixed; z-index: 2000;
    left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.9); padding-top: 40px;
}

.modal-content {
    margin: auto; display: block; max-width: 90%; max-height: 80vh;
}

.close {
    position: absolute; top: 15px; right: 35px;
    color: #fff; font-size: 40px; cursor: pointer;
}

/* --- Responsywność --- */
@media (max-width: 1024px) {
    .carousel-container { max-width: 95%; }
    .offers-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .site-header { flex-direction: column; gap: 15px; }
    .carousel-container { max-width: 100%; aspect-ratio: 3 / 2; } /* Cała szerokość na telefonie */
    .prev, .next { padding: 15px 10px; font-size: 20px; }
    .section-padding { padding: 40px 20px; }
	
	  @media (max-width: 768px) {
        .pg-contact-wrapper { flex-direction: column; }
        .pg-contact-sidebar, .pg-form-section { padding: 30px; }
        .pg-contact-form button { width: 100%; }
    }
}