@import url('https://fonts.googleapis.com/css2?family=Inter   :wght@400;500;600;700&display=swap');

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      max-width: 100%;
    }

    body {
      font-family: 'Inter', sans-serif;
      background: linear-gradient(to bottom, #020817, #0f172a, #020817);
      color: white;
      overflow-x: hidden;
      width: 100%;
    }

    img {
      max-width: 100%;
      height: auto;
    }

    .container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 1rem;
    }

    nav {

      position: fixed;
      top: 0;
      width: 100%;
      background: rgba(2, 8, 23, 0.9);
      backdrop-filter: blur(10px);
      z-index: 50;
      border-bottom: 1px solid #1e293b;
    }

    .nav-content {
      display: flex;
      justify-content: center; /* Wyśrodkowanie trzech kontenerów */
      align-items: center;
      height: 64px;
      padding: 0 1rem;
      position: relative;
    }
	.nav-left, .nav-right{
	 width:258px;
	}
    .nav-left, .nav-center, .nav-right {
      display: flex;
      align-items: center;
      gap: 0.25rem; /* Odstęp między linkami lub logo i napisem */
    }

    .nav-left {
      /* Opcjonalnie: dodatkowy odstęp od środka */
      margin-right: 0.1rem;
    }

    .nav-right {
      /* Opcjonalnie: dodatkowy odstęp od środka */
      margin-left: 0.5rem;
    }

    .nav-center {
      /* Usunięto: position: absolute; left: 50%; transform: translateX(-50%); */
      /* Dodano: gap dla odstępu między ikoną a napisem */
      gap: 0.25rem;
      font-size: 1.25rem;
      font-weight: bold;
      z-index: 10; /* Upewnij się, że logo/nazwa są na wierzchu jeśli potrzebne */
      cursor: pointer; /* Zmienia kursor na pointer dla wskazania, że można kliknąć */
	padding: 2.5%
   }
	    /* Style dla mobilnego menu z wszystkimi linkami */
    .nav-links-mobile {
      display: none; /* Domyślnie ukryte */
      flex-direction: column;
      background: #0f172a;
      border-top: 1px solid #1e293b;
      padding: 1rem;
      gap: 1rem;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      z-index: 40;
    }

    /* Mobile */
    @media (max-width: 768px) {
      .nav-content {
        justify-content: space-between; /* Rozciągnięcie logo i przycisku menu */
      }

      /* Ukrycie lewego i prawego kontenera linków na mobilnych */
      .nav-left,
      .nav-right {
        display: none;
      }

      /* Logo/środek - wyśrodkowanie */
      .nav-center {
        position: static; /* Wyłączenie pozycjonowania absolutnego */
        flex-grow: 1; /* Opcjonalnie: pozwól, by logo zajęło dostępne miejsce */
        justify-content: center; /* Wyśrodkowanie logo/nazwy */
      }

      /* Przycisk menu mobilnego */
      .mobile-menu-btn {
        display: block;
      }

      /* Pokaż mobilne menu, gdy jest aktywne */
      .nav-links-mobile.mobile-active {
        display: flex;
      }

      /* --- NOWY STYL: Zmiana koloru czcionki w mobilnym menu --- */
      .nav-links-mobile a {
        color: #FAEBD7; /* Ustaw kolor tekstu, np. jasnozielony */
        text-decoration: none;
        font-weight: 500;
        transition: color 0.2s, background-color 0.2s, padding 0.2s;
        padding: 0.3rem 1.2rem;
        border-radius: 0.375rem;
        font-size: 0.95rem;
      }

      .nav-links-mobile a:hover,
      .nav-links-mobile a.active {
        color: greenyellow; /* Kolor przy najechaniu */
        background-color: rgba(245, 158, 11, 0.1);
      }
      /* --- KONIEC NOWEGO STYLU --- */
    }
    .nav-links a {
      color: #cbd5e1;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.2s, background-color 0.2s, padding 0.2s;
      padding: 0.3rem 1.2rem;
      border-radius: 0.375rem;
      font-size: 0.95rem;
    }

    .nav-links a:hover,
    .nav-links a.active {
      color: #f59e0b;
      background-color: rgba(245, 158, 11, 0.1);
    }

    .mobile-menu-btn {
      display: none;
      background: none;
      border: none;
      color: white;
      font-size: 1.5rem;
      cursor: pointer;
    }

    /* Mobile */
    @media (max-width: 768px) {
      .nav-content {
        justify-content: space-between; /* Powrót do rozciągnięcia */
      }

      .nav-left,
      .nav-right {
        display: none; /* Ukrycie linków po lewej i prawej */
      }

      .nav-center {
        position: static; /* Wyłączenie pozycjonowania absolutnego */
        /* order: 1; */ /* Jeśli chcesz, aby logo było na początku w trybie mobilnym */
        flex-grow: 1; /* Opcjonalnie: pozwól, by logo zajęło dostępne miejsce */
        justify-content: center; /* Wyśrodkowanie logo/nazwy w trybie mobilnym */
      }

      .nav-links {
        display: none;
        flex-direction: column;
        background: #0f172a;
        border-top: 1px solid #1e293b;
        padding: 1rem;
        gap: 1rem;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 40;
      }

      .mobile-menu-btn {
        display: block;
        /* order: 2; */ /* Jeśli używasz order dla nav-center */
      }

      .nav-links.mobile-active {
        display: flex;
      }
    }

    section {
      padding: 6rem 1rem;
    }

    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      padding-top: 64px;
    }

    .hero-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, rgba(2, 8, 23, 0.8), rgba(15, 23, 42, 0.8)), url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=1920&h=1080&fit=crop   ') no-repeat center center;
      background-size: cover;
      opacity: 1;
    }

    .hero-content {
      text-align: center;
      z-index: 10;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }

    .hero-content.animate {
      opacity: 1;
      transform: translateY(0);
    }

    .hero h1 {
      font-size: clamp(2.5rem, 8vw, 4.5rem);
      font-weight: 800;
      margin-bottom: 1.5rem;
    }

    .hero h1 span {
      background: linear-gradient(to right, #fbbf24, #f59e0b);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero p {
      font-size: 1.5rem;
      color: #94a3b8;
      max-width: 60ch;
      margin: 0 auto 3rem;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 1s ease 0.3s, transform 1s ease 0.3s;
	     }

    .hero p.animate {
      opacity: 1;
      transform: translateY(0);
    }

    .hero-buttons {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 1.2s ease 0.6s, transform 1.2s ease 0.6s;
    }

    .hero-buttons.animate {
      opacity: 1;
      transform: translateY(0);
    }

    .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* Odstęp między ikoną a tekstem */
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  vertical-align: middle; /* Dodana linia */
}

    .btn-primary {
      background: linear-gradient(to right, #f59e0b, #d97706);
      color: white;
    }

    .btn-primary:hover {
      background: linear-gradient(to right, #d97706, #b45309);
      transform: scale(1.05);
    }

    .btn-secondary {
      background: #1e293b;
      color: white;
      border: 1px solid #334155;
    }

    .btn-secondary:hover {
      background: #334155;
    }

    .section-title {
      text-align: center;
      margin-bottom: 4rem;
    }

    .section-title h2 {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 1rem;
    }

    .section-title p {
      color: #94a3b8;
      font-size: 1.25rem;
	   }

    /* Ogólna klasa dla kart, może być używana przez inne sekcje */
    .cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 2rem;
      width: 100%;
      max-width: 100%;
    }

    .card {
      padding: 2rem;
      background: rgba(30, 41, 59, 0.5);
      border-radius: 1rem;
      border: 1px solid #334155;
      transition: all 0.3s ease;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }

    .card:hover {
      border-color: rgba(245, 158, 11, 0.5);
      transform: scale(1.03);
      box-shadow: 0 10px 25px rgba(245, 158, 11, 0.1);
    }

    .card h3 {
      font-size: 1.5rem;
      margin: 1rem 0;
      color: #f59e0b;
    }

    .card p {
      color: #cbd5e1;
      line-height: 1.6;
    }

    /* --- Zaktualizowane style dla sekcji sytuacje i dlaczego --- */
    .sytuacje-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* Trzy kolumny */
      gap: 2rem;
      width: 100%;
      max-width: 100%;
    }

    .dlaczego-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr); /* Dwie kolumny na dużych ekranach */
      gap: 2rem;
      width: 100%;
      max-width: 100%;
    }
	/* --- NOWE STYLE DLA KOMUNIKATU FORMULARZA --- */
    /* --- NOWE STYLE DLA KOMUNIKATU FORMULARZA --- */
    .form-message {
      width: 100%;
      padding: 1rem;
      border-radius: 0.5rem;
      margin-top: 1.5rem; /* Zwiększone odstępie od przycisku */
      font-weight: 600;
      font-size: 1.1rem; /* Zwiększony rozmiar czcionki */
      text-align: center;
      border: 1px solid;
      background-color: #1e293b;
      border-color: #334155;
      color: #f59e0b;
    }

    .form-message.success {
      color: #22c55e;
      border-color: #22c55e;
    }

    .form-message.error {
      color: #ef4444;
      border-color: #ef4444;
    }
    /* --- KONIEC NOWYCH STYLÓW --- */
/* --- KONIEC NOWYCH STYLÓW --- */

    /* Responsywność dla sekcji dlaczego - 1 kolumna na małych ekranach */
    @media (max-width: 768px) {
      .dlaczego-grid {
        grid-template-columns: 1fr; /* Jedna kolumna na małych ekranach */
      }
    }

    /* Responsywność dla sekcji sytuacje - dopasowanie liczby kolumn na małych ekranach */
    @media (max-width: 900px) {
      .sytuacje-grid {
        grid-template-columns: repeat(2, 1fr); /* Dwie kolumny przy średnim ekranie */
      }
    }
    @media (max-width: 600px) {
      .sytuacje-grid {
        grid-template-columns: 1fr; /* Jedna kolumna na małych ekranach */
      }
	  .logodppw{
		display:none;
	  }
    }
    /* --- Koniec zaktualizowanych stylów --- */

    .about-section {
      background: #020817;
    }

    .about-content {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 3rem;
      justify-content: center;
    }

    .about-image {
      flex: 0 0 auto;
      position: relative;
    }

    .about-image img {
      width: 20rem;
      height: 20rem;
      object-fit: cover;
      border-radius: 1rem;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
    }

    .about-text {
      flex: 1;
      max-width: 600px;
    }

    .about-text h2 {
      font-size: 2.5rem;
      margin-bottom: 0.5rem;
    }

    .about-text p {
      color: #cbd5e1;
      line-height: 1.7;
      margin-bottom: 1rem;
	   text-align:justify;
    }

    .process-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 2rem;
      position: relative;
    }

    .process-step {
      text-align: center;
      padding: 1.5rem;
    }

    .process-step .number {
      font-size: 3rem;
      color: rgba(245, 158, 11, 0.2);
      margin-bottom: 1rem;
    }

    .process-step h3 {
      color: #f59e0b;
      font-size: 1.25rem;
      margin-bottom: 0.5rem;
    }

    .process-step p {
      color: #94a3b8;
    }

    .cta-section {
      background: linear-gradient(135deg, #0f172a, #1e293b);
      text-align: center;
      color: white;
      padding: 6rem 1rem;
    }

    .cta-section h2 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
      color: #f59e0b;
    }

    .cta-section p {
      font-size: 1.25rem;
      color: #cbd5e1;
      max-width: 60ch;
      margin: 0 auto 2rem;
    }

    .dlaczego-section {
      background: linear-gradient(to bottom, rgba(2, 8, 23, 0.8), rgba(15, 23, 42, 0.8)), url('photo/biurodoradcypodatkowegobielsko.webp') no-repeat center center;
      background-size: cover;
      position: relative;
      padding-top: 6rem;
      padding-bottom: 6rem;
    }

    .contact-section {
      background: linear-gradient(to bottom, rgba(2, 8, 23, 0.8), rgba(15, 23, 42, 0.8)), url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=1920&h=1080&fit=crop   ') no-repeat center center;
      background-size: cover;
      position: relative;
      padding-top: 6rem;
      padding-bottom: 6rem;
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: start;
    }

    @media (max-width: 768px) {
      .contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
      }
    }

    .contact-info {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .contact-info-item {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
    }

    .contact-info i {
      font-size: 1.5rem;
      color: #f59e0b;
    }

    .contact-info a {
      color: #cbd5e1;
      text-decoration: none;
      transition: color 0.2s;
    }

    .contact-info a:hover {
      color: #f59e0b;
    }
.contact-form {
      margin-top: 50px;
    }
    .contact-form input,
    .contact-form textarea {
      width: 100%;
      padding: 0.75rem 1rem;
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 0.5rem;
      color: white;
      margin-bottom: 1rem;
    }

    .contact-form textarea {
      min-height: 120px;
      resize: vertical;
    }

    .form-status {
      color: #f59e0b;
      font-weight: 600;
      margin-top: 1rem;
    }
   .hours-box {
        padding: 1.5rem; 
        background: rgba(30, 41, 59, 0.6); 
        border-radius: 0.75rem; 
        border: 1px solid #334155;
        margin-top: 1rem;
    }
    footer {
      background: #020817;
      border-top: 1px solid #1e293b;
      padding: 3rem 1rem;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
      margin-bottom: 2rem;
    }

    .footer-links a {
      color: #94a3b8;
      text-decoration: none;
      display: block;
      margin-bottom: 0.5rem;
      transition: color 0.2s;
    }

    .footer-links a:hover {
      color: #f59e0b;
    }

    .footer-bottom {
      text-align: center;
      padding-top: 2rem;
      border-top: 1px solid #1e293b;
      color: #64748b;
      font-size: 0.875rem;
    }
	 .seo-locations {
        font-size: 0.8rem;
        color: #475569;
        line-height: 1.4;
        margin-top: 1rem;
    }