* {
    font-family: "Poppins", sans-serif;

}


#location-container .row {
    height: 100vh;
    align-items: center;
}

#location-container .row img {
    transform: scale(1.2);
}



#second-section h1,
#third-section h1,
#fourth-section h1 {
    font-size: 1.5625vw;
    color: #8D9B69;
}

#second-section h2,
#fourth-section h2 {
    font-size: 3.6458vw;
    color: #102A4F;
}

#fourth-section h2 {
    font-size: 3.6458vw;
    color: white;
}

#second-section p {
    font-weight: 300;
    font-size: 1.0417vw;
    color: #102A4F;
}



#fourth-section {
    background-color: #102A4F;
    height: auto;
    background-image: url("../images/photos/Group992.png");
    background-size: cover;
    background-position: bottom;
    /* background-attachment: fixed; */
}

.circle {
    width: 7.5vw;
    height: 7.5vw;
    background-color: #8D9B69;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle img {
    width: 60%;
    /* Dopasowanie obrazka do środka kółka */
    height: auto;
}

.feature {
    display: flex;
    align-items: center;
}

.feature span {
    margin-left: 100px;
    font-size: 1.5625vw;
    color: white;
    /* Odstęp między kółkiem a tekstem */
}

#map {
    height: 828px;
    /* Ustawienie wysokości mapy */
    width: 100%;
    /* Ustawienie szerokości mapy */
}

.image-section {
    padding: 0 !important;
}

.navbar {
    /* font-size: 20px; */
    background-color: rgba(255, 255, 255, 0) !important;
    /* Białe tło z przezroczystością */
    position: absolute !important;
    /* Pozycjonowanie absolutne, aby był na panoramie */
    width: 100% !important;
    /* Szerokość na całą stronę */
    top: 0 !important;
    /* Przyklejony do góry strony */
    z-index: 1000 !important;
    /* Wyższy indeks z-index, aby był nad panoramą */
}

.navbar-nav li a {
    /* color: black; */
    /* font-weight: 600; */
}

#panorama {
    width: 100%;
    height: 100vh;
    position: relative;
    /* Konieczne, aby dziecko o pozycji absolutnej było względem tego rodzica */

}

.pnlm-controls-container {
    display: none;
}

.custom-hotspot {
    width: 18.23vw;
    height: 18.23vw;
    background: rgba(0, 128, 0, 0.5);
    /* 50% przezroczystości */
    border: 2px solid rgba(255, 255, 255, 0.5);
    /* 50% przezroczystości */
    border-radius: 50%;

}

.custom-hotspot2 {
    width: 400px;
    height: 400px;
    background: green;
    border: 2px solid white;
    /* border-radius: 50%; */
}

.custom-hotspot1 {
    width: 10px;
    height: 10px;
    background: blue;
    border: 2px solid white;
    border-radius: 50%;
}


@media (max-width: 768px) {
    .navbar-nav li a {
        color: white !important;
        /* font-weight: 600; */
    }

    #panorama {
        width: 100%;
        height: 50vh;
        position: relative;
        /* Konieczne, aby dziecko o pozycji absolutnej było względem tego rodzica */

    }

    #location-container .row {
        height: auto;
        /* width: 90vw; */
    }

    #location-container .row img {
        transform: scale(1);
    }


    #second-section h1,
    #fourth-section h1 {
        font-size: 20px;
    }

    #second-section h2,
    #fourth-section h2 {
        font-size: 30px;
    }

    #fourth-section h2,
    #fourth-section .row {
        margin: 0 !important;
    }

    #second-section p {
        font-size: 18px;
    }

    .p-5 {
        padding: 2rem !important;
    }

    .my-5 {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
    }

    .image-section {
        padding: 0 !important;
    }

    #fourth-section {
        height: auto;
    }

    #fourth-section .col-6 {
        padding-right: 0 !important;
    }

    .circle {
        width: 50px;
        height: 50px;
    }

    .circle img {
        width: 50%;
        /* Dopasowanie obrazka do środka kółka */
        height: auto;
    }


    .feature span {
        margin-left: 2vw;
        font-size: 10px;
        /* Odstęp między kółkiem a tekstem */
    }

    #map {
        height: 400px;
        /* Ustawienie wysokości mapy */
        width: 100%;
        /* Ustawienie szerokości mapy */
    }

    .splide__slide img {
        max-width: 703px;
        max-height: 250px;
        object-fit: cover;
        /* Zachowanie proporcji zdjęcia */
    }

    #fifth-section {
        height: 33vh;
        background-size: cover;

        /* background-attachment: fixed; */
    }


}