main {
    padding: 0 20px;  /* Margines 20px od lewej i prawej strony ekranu */
    margin-top: 20px; /*Margines 20px od góry */
  }
  
/* Ustawienie kontenera na flex, aby mapa i dane kontaktowe były odpowiednio rozmieszczone */
.contact-container {
    display: flex;  /* Flexbox dla kontenera */
    justify-content: space-between;  /* Rozstawienie elementów na szerokość */
    align-items: flex-start;  /* Wyrównanie elementów do góry */
    gap: 20px;  /* Odstęp między mapą a sekcją danych kontaktowych */
    flex-wrap: wrap;  /* Elementy mogą przechodzić do nowej linii, jeśli nie ma wystarczająco dużo miejsca */
    margin-top: 20px;
  }
  
  /* <---      Styl mapy     ---> */
  .contact-map {
    flex: 1 1 45%;  /* Mapa zajmuje 45% dostępnej szerokości */
    min-width: 300px;  /* Ustawia minimalną szerokość mapy */
    height: 65vh;  /* Wysokość mapy ustawiona na 33% wysokości okna */
  }
  
  .contact-map iframe {
    width: 100%;  /* Szerokość mapy na 100% kontenera */
    height: 100%;  /* Wysokość mapy na 100% kontenera */
    border: none;  /* Usuwa obramowanie */
  }
  
  /* <---      Styl sekcji z danymi kontaktowymi     ---> */
.contact-details {
    flex: 1 1 45%;  /* Sekcja z danymi kontaktowymi zajmuje 45% szerokości */
    min-width: 300px;  /* Minimalna szerokość dla tej sekcji */
    background-color: #f9f9f9;  /* Tło sekcji */
    padding: 20px;  /* Padding dla sekcji kontaktowej */
    border-radius: 3px;  /* Zaokrąglone rogi */
    min-height: 33vh;  /* Ustalamy wysokość sekcji danych kontaktowych na 33% wysokości ekranu na dużych ekranach */
    text-align: center;  /* Wyśrodkowanie tekstu */
    display: flex;  /* Dodajemy flexbox */
    flex-direction: column;  /* Ustawiamy kolumnowy układ */
    justify-content: center;  /* Wyrównanie w pionie */
    align-items: center;  /* Wyśrodkowanie w poziomie */
  }
  
  .contact-item {
    display: flex;  /* Flexbox dla elementów kontaktowych */
    align-items: center;  /* Wyrównanie ikon i tekstów */
    justify-content: center; /* Wyśrodkowanie ikon i tekstów */
    gap: 10px;  /* Odstęp między ikoną a tekstem */
    margin-bottom: 10px;  /* Odstęp między elementami */
  }
  
  .contact-details h2 {
    margin-bottom: 20px; /* Dodanie większego odstępu pod nagłówkiem */
}

.contact-details p {
    margin-bottom: 30px; /* Dodanie większego odstępu pod paragrafem */
}


  /* Styl dla linków kontaktowych */
.contact-link {
    display: flex;
    align-items: center;
    text-decoration: none;  /* Usunięcie podkreślenia */
    gap: 10px;
  }

  .contact-text {
    font-size: 1rem;  /* Wielkość tekstu */
    color: #FFCC00;  /* Kolor tekstu */
    transition: color 0.3s ease; /* Płynna zmiana koloru przy najechaniu */
    font-weight: bold;
 }

  .contact-link :hover {
    color: #e42929;  /* Zmienia kolor po najechaniu */
  }

  .contact-icon {
    font-size: 1.5rem;
    color: #e42929;
    transition: color 0.3s ease; /* Płynna zmiana koloru przy najechaniu */
}

.contact-icon:hover {
    color: #FFCC00;  /* Zmienia kolor po najechaniu */
  }

  /* Responsywność: Zmniejszamy wysokość mapy na małych ekranach */
  @media (max-width: 768px) {
    .contact-map {
      width: 50%;
      height: 250px;  /* Ustawiamy wysokość mapy na 250px dla małych ekranów */
      
    }
  }