.contact-section {
    display: flex;
    flex-wrap: wrap;
    /* Flexbox automatycznie dopasuje elementy */
}

.contact-info,
.map-container {
    flex: 1;
    /* Elementy mają równą szerokość */
    margin: 10px;
    /* Odstępy między elementami */
}

.map-container iframe {
    width: 100%;
    /* Ustawienie szerokości iframe na 100% kontenera */
    height: 400px;
    /* Ustalona wysokość iframe */
}

@media (max-width: 768px) {

    .contact-info,
    .map-container {
        flex: 0 0 100%;
        /* Każdy element zajmuje całą szerokość */
    }

    .map-container iframe {
        height: 300px;
        /* Zmniejszenie wysokości mapy na mniejszych ekranach */
    }
}

/* Ogólne style dla topnav */
.topnav {
    display: flex;
    justify-content: space-between;
    /* Rozdzielenie logo i linków */
    align-items: center;
    /* Wyśrodkowanie w pionie */
    background-color: #04AA6D;
    opacity: 0.9;
    padding: 10px 20px;
    position: fixed;
    /* Topnav podąża za użytkownikiem */
    width: 100%;
    z-index: 1000;
    transform: translateY(0);
    /* Domyślnie widoczny */
    transition: transform 0.3s ease;
    /* Animacja ukrywania/pokazywania */
}

.topnav .left-section,
.topnav .right-section {
    display: flex;
    align-items: center;
}

/**/

@media screen and (max-width: 600px) {
    .topnav.responsive {
        position: relative;
    }

    .topnav.responsive .icon {
        right: 0;
        top: 0;
    }

    .topnav.responsive a {
        float: none;
        display: block;
        text-align: center;

    }
}

.topnav a {
    color: black;
    text-decoration: none;
    font-size: 20px;
    margin: 0 15px;

    transition: color 0.3s ease;
}

.topnav a:hover {
    color: white;
}

.topnav .logo img {
    height: 60px;
}

.menu-links {
    display: flex;
    gap: 15px;
}

.topnav a.icon {
    display: none;
    /* Ukryj ikonę menu na większych ekranach */
    color: black;
    font-size: 26px;
}

/* Styl responsywny */
@media screen and (max-width: 768px) {
    .menu-links {
        display: none;
        /* Ukryj linki menu na mniejszych ekranach */
        flex-direction: column;
        width: 100%;
        background-color: #04AA6D;
        position: absolute;
        top: 70px;
        left: 0;
    }

    .menu-links a {
        margin: 10px 0;
        text-align: center;
    }

    .topnav.responsive .menu-links {
        display: flex;
        /* Wyświetl menu w trybie responsywnym */
    }

    .topnav a.icon {
        display: block;
        /* Pokaż ikonę menu na mniejszych ekranach */
    }
}