/* Globalny styl */
body {
    height: 100%;
    font-family: 'Ropa Sans', sans-serif;
    background-color: #f6f2e4;
    color: #000;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex-grow: 1; /* Sprawia, że sekcja główna wypełnia przestrzeń */
}

.container, .contact-bar, .footer {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

/* Pasek kontaktowy */
.contact-bar {
    background-color: #746418;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    flex-direction: row;
}

@media (min-width: 1236px) {
    .contact-bar {
        height: 60px !important;
        padding: 0 !important;
    }
}

@media (max-width: 1236px) {
    .contact-bar {
        flex-direction: column;
        height: auto;
    }

    .contact-bar span {
        width: 100%;
        justify-content: center;
        margin: 5px 0;
    }
}

/* Pasek nawigacyjny */
.navbar {
    background-color: #f6f2e4;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 10;
}

.navbar .navbar-brand img {
    height: 80px;
}

.navbar .navbar-brand {
    margin-left: 70px;
}

@media (max-width: 1200px) {
    .navbar-collapse.show {
        background-color: #746418 !important;
        padding: 15px !important;
    }

    .navbar-nav .nav-link {
        color: #ebe5c0 !important;
        font-size: 1.2rem;
        padding: 10px 0;
        display: block;
        text-align: center;
    }

    .navbar-nav .nav-link:hover {
        color: #deb422 !important;
    }
}

@media (max-width: 768px) {
    .navbar {
        height: 70px;
    }

    .navbar .navbar-brand img {
        height: 60px;
    }

    .navbar .navbar-brand {
        margin-left: 70px;
    }

    .navbar-toggler {
        margin: 0;
        padding: 0.25rem 0.75rem;
    }

    .navbar-toggler-icon {
        width: 1.5rem;
        height: 1.5rem;
    }
}

.navbar .navbar-nav {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}

.navbar .navbar-nav .nav-item {
    margin: 0 20px;
}

.navbar .nav-link {
    font-family: 'Ropa Sans', sans-serif;
    font-size: 1.25rem;
    color: #000000;
    text-transform: uppercase;
    text-align: center;
}

.navbar .nav-link:hover {
    color: #deb422;
}


/* Sekcja banera */
.banner-section {
    height: 100px;
    background-size: cover;
    background-position: center;
    padding: 100px 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    justify-content: center; /* Wyśrodkowanie poziome */
    align-items: center; /* Wyśrodkowanie pionowe */
}

.banner-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(153, 132, 132, 0.7); /* Przezroczystość 70% */
}

/* Wyśrodkowanie tekstu i z-index, aby napis był widoczny nad obrazem */
.banner-section .container {
    position: relative;
    z-index: 1;
}

.banner-section h1 {
    font-family: 'Ropa Sans', sans-serif;
    color: #ebe5c0;
    font-size: 4rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Przyciski */
.btn-primary {
    background-color: #746418;
    border: none;
}

.btn-primary:hover {
    background-color: #b6a450;
}

/* Formularz kontaktowy */
.contact-form-section {
    flex-grow: 1; /* Wypełnia przestrzeń */
    padding: 40px 0;
}

/* Stopka */
.footer {
    background-color: #483f1b;
    padding: 20px;
    color: #ebe5c0;
    min-height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100vw;
    position: relative;
    box-sizing: border-box;
}

.footer a {
    color: #ebe5c0;
}
/* Styl tekstu w sekcji kontaktowej */
.contact-form-section p {
    font-size: 1.25rem; /* Powiększony rozmiar czcionki */
    font-family: 'Ropa Sans', sans-serif;
    line-height: 1.6; /* Zwiększona wysokość linii dla lepszej czytelności */
    color: #000; /* Upewnij się, że kolor jest zgodny z resztą strony */
}
/* Styl sekcji formularza */
.contact-form-section .col-lg-8 {
    max-width: 55%; /* Zmniejszenie szerokości formularza kontaktowego */
    margin-right: 100px; /* Dodanie odstępu od informacji kontaktowych */
}

.contact-form-section .col-lg-4 {
    max-width: 45%; /* Upewnij się, że kolumna z informacjami kontaktowymi zajmuje pozostałą przestrzeń */
}
.contact-form-section textarea {
    height: 200px; /* Zwiększenie wysokości pola tekstowego */
    width: 100%; /* Zajmowanie całej szerokości dostępnej w formularzu */
    resize: vertical; /* Umożliwia użytkownikowi zmienianie tylko wysokości */
}
/* Styl pól formularza z cieniem wewnętrznym tylko od góry */
.contact-form-section .form-control {
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2); /* Cień wewnętrzny tylko od góry */
    border: 1px solid #ccc; /* Ramka dla pól formularza */
    padding: 10px; /* Dodanie odstępów wewnętrznych */
    transition: box-shadow 0.3s ease; /* Płynny efekt podczas zmiany cienia */
}

.contact-form-section .form-control:focus {
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.4); /* Zwiększenie intensywności cienia przy fokusie */
    border-color: #deb422; /* Zmiana koloru ramki na fokus */
}
/* Styl ikon w informacjach kontaktowych */
/* Styl ikon w informacjach kontaktowych */
.contact-info i {
    font-size: 1.5rem; /* Powiększenie ikon */
    color: #746418; /* Ten sam kolor, co przycisk "Wyślij" */
    margin-right: 10px; /* Odstęp między ikoną a tekstem */
}

/* Styl tekstu w informacjach kontaktowych */
.contact-info li {
    font-size: 1.25rem; /* Powiększenie tekstu */
    margin-bottom: 15px; /* Odstęp między pozycjami */
}

/* Wyrównanie drugiego numeru telefonu */
.secondary-phone {
    display: block; /* Wyświetla numer w nowej linii */
    margin-left: 38px; /* Przesunięcie w prawo, aby uniknąć kolizji z ikonką */
}


/* Przesunięcie sekcji z informacjami kontaktowymi niżej */
.contact-info {
    margin-top: 50px; /* Dostosuj tę wartość, aby wyrównać z napisem "Nazwa" */
}

.contact-address-title {
    margin-top: 50px; /* Przesunięcie tytułu sekcji niżej */
    border-bottom: 2px solid #746418; 
    display: inline-block;
}
.contact-info .address-details {
    margin-left: 36px; /* Przesunięcie kodu pocztowego i miasta w prawo */
}
.street {
    margin-left: 5px;  
}
.nip-icon {
    font-size: 1.5rem;  /* Taki sam rozmiar jak ikony */
    color: #746418;  /* Kolor identyczny jak ikon */
    margin-right: 10px; /* Odstęp między napisem NIP a numerem */
    font-weight: bold; /* Grubsza czcionka, aby przypominała ikonę */
    margin-left: -3px;  
}
.contact {
    border-bottom: 2px solid #746418; 
    display: inline-block;    
}

.contact-bar span {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px 10px;
    width: auto;
}

.contact-bar i {
    margin-right: 8px;
}
/* Ustawienia dla urządzeń mobilnych */
@media (max-width: 768px) {

    /* Formularz kontaktowy oraz informacje kontaktowe w jednej kolumnie */
    .contact-form-section .row {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Formularz kontaktowy */
    .contact-form-section .col-lg-8,
    .contact-form-section .col-lg-4 {
        max-width: 100%;
        margin: 0; /* Usuń margines dla lepszego dopasowania */
        padding: 0 15px; /* Dodaj padding wewnętrzny dla odstępu */
    }

    /* Zmniejszenie rozmiaru fontów dla formularza i informacji kontaktowych */
    .contact-form-section p,
    .contact-info li,
    .contact-info i {
        font-size: 1rem;
    }

    /* Zmniejszenie odstępów między elementami formularza i ikonami */
    .contact-info li {
        margin-bottom: 10px;
    }

    /* Zmniejszenie paddingu w sekcji formularza */
    .contact-form-section {
        padding: 20px 0;
    }

    /* Ustawienia dla przycisku */
    .btn-primary {
        width: 100%; /* Przycisk na całą szerokość */
    }

    /* Zmniejszenie marginesów i szerokości inputów oraz tekstarea */
    .contact-form-section .form-control {
        padding: 8px; /* Zmniejszenie paddingu wewnątrz inputów */
    }

    /* Usunięcie marginesu z prawej strony */
    .contact-form-section .col-lg-8 {
        margin-right: 0;
    }

    /* Wyśrodkowanie napisu kontaktowego i adresu */
    .contact-info {
        text-align: center;
    }

    /* Zmniejszenie marginesów i przesunięć ikon */
    .contact-info .address-details, .secondary-phone, .street, .nip-icon, .hours-details {
        margin-left: 0;
    }
}
.form-container {
    width: 100%; /* Szerokość kontenera */
    max-width: 90%; /* Maksymalna szerokość kontenera */
    margin-left: 5%; /* Ustawienie marginesu, który zmienia się wraz z szerokością ekranu */
}

/* Opcjonalnie: Dopasowanie dla dużych ekranów */
@media (min-width: 1200px) {
    .form-container {
        max-width: 80%; /* Mniejszy margines przy większej rozdzielczości */
        margin-left: 10%; /* Większy margines po lewej stronie */
    }
}
.contact-form-section .row {
    display: flex;
    justify-content: center; /* Wyśrodkowanie w poziomie */
    flex-wrap: wrap; /* Pozwolenie na "zawijanie" elementów jeden pod drugim */
}

.form-container {
    width: 100%;
    max-width: 600px; /* Ustal maksymalną szerokość kontenera */
    margin: 0 auto; /* Wyśrodkowanie kontenera na mniejszych ekranach */
    padding: 0 15px; /* Dodanie odstępu wewnętrznego */
}
@media (max-width: 768px) {
    .form-container {
        width: 90%; /* Zajmowanie 90% szerokości ekranu na mniejszych urządzeniach */
        margin-left: auto;
        margin-right: auto;
    }
}
.contact-form-section .btn-primary {
    margin-bottom: 20px; /* Dodanie odstępu pod przyciskiem */
}
.contact-form-section .col-lg-4 {
    margin-top: 20px; /* Dodanie odstępu nad sekcją Informacje kontaktowe */
}
.contact-info i.fa-clock {
    font-size: 1.5rem; /* Rozmiar ikony */
    color: #746418; /* Dopasowany kolor */
    margin-right: 10px; /* Odstęp od tekstu */
}
.hours-details {
    display: block; /* Wyświetla numer w nowej linii */
    margin-left: 38px; /* Przesunięcie w prawo, aby uniknąć kolizji z ikonką */
}
.rodo-section {
    background-color: #f6f2e4; /* Jasny kolor tła */
    padding: 20px 15px;
    border-top: 1px solid #746418; /* Cienka ozdobna linia u góry */
    font-family: 'Ropa Sans', sans-serif;
    font-size: 0.5rem; /* Mniejszy rozmiar czcionki (14px) */
    color: #000;
}

.rodo-section .rodo-title {
    font-size: 1.25rem; /* Tytuł mniejszy (20px) */
    font-weight: bold;
    margin-bottom: 15px;
    color: #746418; /* Kolor zgodny z motywem */
}

.rodo-section a {
    color: #746418; /* Dopasowany kolor linku */
    text-decoration: underline;
}
.rodo-section p {
    font-size: 1rem;
    margin-bottom: 10px;
}