*{
    margin: 0;
    padding: 0;
}

body{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: rgb(230, 234, 238);
}

a{
    text-decoration: none;
}

.header{
    width: 100%;
    height: 30vh;
    background-color: aliceblue;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    background-image: url(../img/lisbon.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.pass_cont{
    width: 90%;
    height: 6vh;
    display: inline-flex;
}

.passenger{
    width: 49%;
    height: 7vh;
    background-color: rgb(255, 255, 255);
    display: inline-flex;
    border-radius: 15px;
}

.profile_pic{
    width: 5.5vh;
    height: 5.5vh;
    border-radius: 100px;
    background-color: tomato;
    margin-top: 7px;
    margin-left: 10px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.info_cont{
    display: grid;
    text-align: left;
    margin-top: 0.3rem;
    margin-left: 0.5rem;
}

.lead{
    margin-left: 1rem;
    margin-top: 2rem;
}

.visit{
    background-color: #ffffff;
    width: 95%;
    height: 16rem;
    border-radius: 15px;
    text-decoration: none !important;
    color: #000;
}

.visit h2{
    font-size: 1.5;
}

.visit_img{
    width: 100%;
    height: 11.5rem;
    background-color: blue;
    border-radius: 15px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.category-container {
    display: flex;
    overflow-x: auto; /* Permet le défilement horizontal */
    -webkit-overflow-scrolling: touch; /* Améliore le défilement sur iOS */
    padding-bottom: 10px; /* Espace sous les pastilles si la scrollbar est visible */
    scrollbar-width: none; /* Cache la scrollbar pour Firefox */
    -ms-overflow-style: none;  /* Cache la scrollbar pour IE et Edge */
}

/* Cache la scrollbar pour Chrome, Safari, Opera */
.category-container::-webkit-scrollbar {
    display: none;
}

.category-pill {
    flex-shrink: 0; /* Empêche les pastilles de rétrécir */
    background-color: #007bff;
    color: white;
    padding: 8px 15px;
    border-radius: 20px; /* Rend la pastille arrondie */
    margin-right: 10px; /* Espacement entre les pastilles */
    text-decoration: none; /* Supprime le soulignement des liens */
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.category-pill:hover {
    background-color: #0056b3;
}

.category-pill.active {
    background-color: #282aa7; /* Couleur différente pour la pastille active */
    box-shadow: 0 2px 6px rgba(82, 40, 167, 0.3);
}

button{
    padding: 12px;
    font-size: 1.3rem;
    border: rgb(250, 250, 250) 1px solid;
    border-radius: 25px;
    background-color: rgba(250, 250, 250, 0.626);
    margin-top: 1rem;
    margin-left: 1rem;
}

.picgen{
    background-image: url(../img/belem.jpg);
    width: 90%;
    height: 35vh;
    background-position: center;
    background-size: cover;
    border-radius: 20px;
    margin-top: 1rem;
}

.cnt{
    width: 90%;
    text-align: left;
    margin-top: 1rem;
}

.look{
    display: inline-flex;
    width: 100%;
}

.sty{
    width: 6rem;
    height: 6.2rem;
    border-radius: 20px;
    border: rgb(250, 250, 250) 1px solid;
    border-radius: 25px;
    background-color: rgba(250, 250, 250, 0.626);
}