/*!
 * Start Bootstrap - Creative v5.0.3 (Dostosowane dla DBAM o Twój Dom)
 * Na bazie oryginalnego szablonu z poprawkami pod branżę czyszczenia kostki.
 */

body,
html {
  width: 100%;
  height: 100%;
}

body {
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  color: #212529;
}

/* Kolorystyka linii pomocniczych - teraz żółta */
hr {
  max-width: 50px;
  border-width: 3px;
  border-color: #ffcc00; /* Zmieniono z zielonego na żółty */
}

hr.light {
  border-color: #fff;
}

a {
  color: #ffcc00;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

a:hover {
  color: #e6b800;
  text-decoration: none;
}

/* Fix dla logo i nazwy */
.logo {
  position: relative;
  width: auto;
  max-height: 60px; /* Zredukowano z 115px dla lepszego dopasowania */
  padding: 5px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
}

/* Główne klasy kolorów */
.bg-primary {
  background-color: #ffcc00 !important; /* Zmieniono z zielonego na żółty */
}

.bg-dark {
  background-color: #1a1a1a !important; /* Ciemniejszy, głęboki czarny */[cite: 3]
}

.text-yellow {
  color: #ffcc00 !important;
}

/* Sekcje */
section {
  padding: 5rem 0; /* Zmniejszono z 8rem dla lepszej dynamiki */[cite: 3]
}

.section-heading {
  margin-top: 0;
}

/* --- NAWIGACJA --- */
#mainNav {
  border-bottom: 2px solid #ffcc00; /* Żółta linia pod menu */[cite: 3]
  background-color: #1a1a1a !important; /* Usunięto zielone tło i obrazek top.jpg */[cite: 3]
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#mainNav .navbar-brand {
  display: flex;
  align-items: center;
}

#mainNav .navbar-nav > li.nav-item > a.nav-link {
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff !important; /* Białe napisy w menu */[cite: 3]
  padding: 0.75rem 1rem;
}

#mainNav .navbar-nav > li.nav-item > a.nav-link:hover {
  color: #ffcc00 !important;
}

/* Aktywny link w menu */
#mainNav .navbar-nav > li.nav-item > a.nav-link.active {
  color: #000 !important;
  background-color: #ffcc00 !important; /* Żółte podświetlenie aktywnej sekcji */[cite: 3]
}

@media (min-width: 992px) {
  #mainNav {
    height: 80px; /* Stała wysokość menu */[cite: 3]
    background: #1a1a1a !important; /* Usunięto name.jpg z tła CSS */[cite: 3]
  }
  
  #mainNav .navbar-nav > li.nav-item > a.nav-link {
    box-shadow: none !important; /* Usunięto stary cień pod przyciskami */[cite: 3]
    margin-left: 5px;
    border-radius: 3px;
  }
}

/* --- GALERIA --- */
.portfolio-box {
  position: relative;
  display: block;
  margin-bottom: 30px;
  overflow: hidden;
}

.portfolio-box img {
  transition: transform 0.5s ease;
}

.portfolio-box:hover img {
  transform: scale(1.1); /* Efekt przybliżenia po najechaniu */
}

/* Nadpisanie masthead - używamy zdjęcia bezpośrednio w HTML, 
   więc masthead jest tu tylko zapasowo */
header.masthead {
  display: none; /* Ukrywamy stary, ogromny nagłówek meblowy */[cite: 3]
}

/* --- KONTAKT --- */
.contact-bg {
  background-color: #f8f9fa;
}

.sr-contact-1, .sr-contact-2 {
  color: #ffcc00; /* Zmieniono ikony kontaktu na żółte */[cite: 3]
}

/* --- RESPONSYWNOŚĆ --- */
@media (max-width: 768px) {
  h1 {
    font-size: 2.5rem !important;
  }
  
  .logo {
    max-height: 45px;
  }
}

/* Domyślny styl dla wszystkich urządzeń (w tym telefonów) */
.contact-box {
    width: 100%;       /* Na telefonie zajmuje całą dostępną szerokość */
    max-width: 100%;
    margin: 0 auto;    /* Wyśrodkowanie */
}

/* Styl tylko dla komputerów (ekrany szersze niż 992px) */
@media (min-width: 992px) {
    .contact-box {
        min-width: 860px; /* Twoja szerokość tylko dla dużych ekranów */
        width: auto;
    }
}

/* Styl dla głównego logotypu (postaci/sygnetu) */
.main-logo {
    height: 85px !important; /* Zwiększono z 60px */
    width: auto;
    transition: all 0.3s;
}

/* Styl dla napisu z nazwą */
.name-logo {
    height: 65px !important; /* Napis zwykle powinien być nieco mniejszy od sygnetu */
    width: auto;
    margin-left: 15px;
    transition: all 0.3s;
}

/* Dostosowanie wysokości całego paska menu do większego logo */
@media (min-width: 992px) {
    #mainNav {
        height: 110px !important; /* Zwiększono z 80px, aby zmieścić większe logo */
    }
}

/* Na telefonach loga muszą być nieco mniejsze, żeby nie zajęły całego ekranu */
@media (max-width: 768px) {
    .main-logo {
        height: 60px !important;
    }
    .name-logo {
        height: 45px !important;
        margin-left: 5px;
    }
    #mainNav {
        height: auto !important;
    }
}