/* Generale */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

header {
    background: #333;
    color: white;
    padding: 10px 20px;
}

header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
}

header nav ul li {
    margin-right: 20px;
}

header nav ul li a {
    color: white;
    text-decoration: none;
}

/* Hero Section */
.hero {
    position: relative;
    height: 70vh;
    overflow: hidden;
    background: url('images/sintrapena.jpg') center/cover no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
}

/* Titolo nella Hero Section */
.hero h1 {
    font-family: 'Lexend Giga', sans-serif; /* Applica il nuovo font */
    font-size: 2.5rem;
    margin-bottom: 20px;
    z-index: 1;
}

/* Testo descrittivo nella Hero Section */
.hero p {
    font-family: 'Lexend Giga', sans-serif; /* Applica il nuovo font */
    font-size: 1.2rem;
    z-index: 1;
}

/* Pulsante nella Hero Section */
.hero button {
    font-family: 'Lexend Giga', sans-serif; /* Applica il nuovo font */
    font-size: 1rem;
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 15px 30px;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 20px;
    transition: background-color 0.3s ease;
    z-index: 1;
}

.hero button:hover {
    background-color: #0056b3;
}

/* Sovrapposizione scura per migliorare leggibilità */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Sovrapposizione semi-trasparente */
    z-index: 0; /* Dietro il contenuto */
}

/* Footer */
footer {
    background: #ffffff;
    color: black;
    text-align: center;
    padding: 20px; 
font-family: 'Lexend Giga', sans-serif; /* Nuovo font */ 
    font-size: 14px; /* Modifica anche la dimensione se necessario */
}

/* Logo */
.logo {
    display: flex;
    justify-content: flex-start; /* Posiziona il logo a sinistra */
    align-items: center;
    margin-bottom: 10px; /* Spazio tra logo e menu di navigazione */
}

.logo img {
    height: 80px; /* Altezza del logo */
    width: auto; /* Mantieni le proporzioni */
}

/* Header */
header {
    background: #333;
    color: white;
    padding: 10px 20px;
    display: flex;
    flex-direction: column; /* Disposizione verticale */
    align-items: center; /* Centra il logo */
    position: relative;
}

/* Logo */
.logo {
    text-align: center; /* Centra il logo */
    margin-bottom: 10px; /* Spazio sotto il logo */
}

.logo img {
    height: 150px; /* Dimensione del logo */
    width: auto; /* Mantieni proporzioni */
}

/* Menu di navigazione */
header nav {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%); /* Centra verticalmente il menu rispetto all'header */
}

header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start; /* Allinea a sinistra */
}

header nav ul li {
    margin-right: 20px; /* Spaziatura tra i link */
}

header nav ul li a {
    color: white;
    text-decoration: none;
}

header nav ul li {
    margin: 0 15px; /* Spazio tra i link */
}

header nav ul li a {
    color: black;
    text-decoration: none;
}


/* Logo */
.logo {
    flex: 1; /* Occupa spazio a sinistra */
    text-align: center; /* Centra il logo */
}

.logo img {
    height: 120px; /* Dimensione del logo */
    width: auto; /* Mantiene proporzioni */
}

/* Menu di navigazione */
header nav {
    flex: 1; /* Occupa spazio a destra */
}

header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Disposizione in riga */
    justify-content: flex-start; /* Allinea a sinistra */
}

header nav ul li {
    margin: 0 15px; /* Spaziatura tra i link */
}

header nav ul li a {
    color: white;
    text-decoration: none;
} 

/* Font personalizzato per le voci del menu */
header nav ul li a {
    font-family: 'Lexend Giga', sans-serif; /* Applica il nuovo font */
    font-size: 16px; /* Dimensione del testo */
    font-weight: 400; /* Spessore normale */
}


/* Colore del testo e link nell'header */
header {
    background: #FFFFFF; /* Sfondo bianco */
    color: black; /* Colore generale del testo */
    padding: 10px 20px;
}

/* Colore dei link nel menu */
header nav ul li a {
    color: black; /* Colore dei link */
    text-decoration: none;
}

/* Colore dei link al passaggio del mouse */
header nav ul li a:hover {
    color: #007BFF; /* Cambia il colore dei link quando il mouse passa sopra */
}

/* Posizionamento centrato verticalmente a destra */
/* Posizionamento e stile del link WhatsApp */
.whatsapp-link {
    position: absolute;
    top: 50%; /* Centra verticalmente */
    right: 80px; /* Allinea a destra */
    transform: translateY(-50%); /* Centra verticalmente rispetto all'header */
    z-index: 10;
}

/* Stile per l'immagine di WhatsApp */
.whatsapp-link img {
    width: 40px; /* Dimensione dell'icona */
    height: 40px;
    cursor: pointer; /* Cambia il cursore in mano */
    transition: transform 0.3s ease; /* Aggiunge un effetto hover */
}

.whatsapp-link img:hover {
    transform: scale(1.2); /* Effetto zoom al passaggio del mouse */
}

/* Tooltip (numero di telefono) */
.whatsapp-link .tooltip {
    display: none; /* Nasconde il numero di default */
    position: absolute;
    top: 50%; /* Posiziona il tooltip accanto all'immagine */
    left: -150%; /* Sposta il tooltip a sinistra dell'immagine */
    transform: translateY(-50%);
    background: #25D366; /* Verde WhatsApp */
    color: white;
    font-family: Arial, sans-serif;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
    z-index: 20;
}

/* Mostra il tooltip al passaggio del mouse */
.whatsapp-link:hover .tooltip {
    display: inline-block;
}

footer p {
    margin-top: -5px; /* Sposta il testo leggermente verso l'alto */
}

#about {
    padding: 60px 20px;
    background-color: #f9f9f9; /* Colore di sfondo */
    text-align: center;
}

#about h2 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 20px;
}

#about p {
    font-size: 1.2rem;
    color: #555;
    line-height: 1.8;
    max-width: 800px;
    margin: 10px auto;
}

#about img {
    width: 150px; /* Dimensione dell'immagine */
    height: auto;
    border-radius: 50%; /* Trasforma l'immagine in un cerchio */
    margin: 20px auto;
    display: block;
   }

#about {
    font-family: 'Lexend Giga', sans-serif; /* Font della Hero Section */
    padding: 60px 20px;
    background-color: #f9f9f9; /* Sfondo chiaro */
    text-align: center;
}

#about h2 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 20px;
}

#about p {
    font-size: 1.2rem;
    color: #555;
    line-height: 1.8;
    max-width: 800px;
    margin: 10px auto;
}

html {
    scroll-behavior: smooth;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: #FFFFFF;
    color: black;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

footer {
    position: fixed; /* Blocca il footer nella parte inferiore */
    bottom: 0; /* Posiziona il footer in basso */
    left: 0;
    width: 100%; /* Il footer copre l'intera larghezza */
    z-index: 1000; /* Porta il footer in primo piano */
    background: #222; /* Colore dello sfondo */
    color: white; /* Colore del testo */
    text-align: center;
    padding: 10px 20px;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Ombra opzionale */
}

body {
    margin: 0;
    padding: 70px 0; /* Compensa l'altezza dell'header (50px) e del footer (20px) */
}

:target {
    scroll-margin-top: 100px; /* Altezza dell'header fisso */
}


.search-section {
    padding: 40px 20px;
    background-color: #f4f4f4;
    text-align: center;
    font-family: 'Lexend Giga', sans-serif; /* Applica il font */
}

.search-section h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.search-section .filters {
    display: flex;
    justify-content: center;
    gap: 20px; /* Spaziatura tra i campi */
    flex-wrap: wrap; /* Per adattarsi a schermi più piccoli */
}

.search-section .filters div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.search-section label {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.search-section select,
.search-section input {
    width: 200px;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.search-section button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 1rem;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.search-section button:hover {
    background-color: #0056b3;
}

/* Sezione dedicata ai tour (titolo, sfondo, ecc.) */
.tour-section {
    padding: 40px 20px;
    background-color: #f4f4f4;
    text-align: center;
}

.tour-section h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    font-family: 'Lexend Giga', sans-serif;
}

/* Contenitore principale delle card */
.tour-cards {
    display: flex; /* Disposizione orizzontale */
    flex-wrap: wrap; /* Permette di andare a capo su schermi piccoli */
    gap: 20px; /* Spazio tra le card */
    justify-content: center; /* Centra le card nella pagina */
    align-items: stretch; /* Rende le card della stessa altezza */
}

.card {
    width: 300px; /* Larghezza fissa per le card */
    max-width: 100%; /* Evita che si allarghino troppo */
    background: white;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: left;
}

/* Immagine nella card */
.card img {
    max-width: 100%;
    height: auto;
}

/* Titolo della card */
.card h3 {
    font-size: 1.5rem;
    margin: 15px;
    color: #333;
}

/* Testo descrittivo nella card */
.card p {
    font-size: 1rem;
    margin: 15px;
    color: #555;
}

/* Contenitore pulsanti Info e Prenota */
.card-buttons {
    display: flex;
    justify-content: space-between;
    padding: 15px;
}

/* Stile dei pulsanti Info e Prenota */
.card-buttons button {
    padding: 10px 20px;
    font-size: 1rem;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Hover effetto pulsanti */
.card-buttons button:hover {
    background-color: #0056b3;
}


.hero {
  position: relative;
  height: 70vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* Overlay */
  z-index: 0;
}

.hero h1,
.hero p {
  position: relative;
  z-index: 1;
  font-family: 'Lexend Giga', sans-serif;
}

/* Hero per la pagina Tours */
.hero-tours {
    background: url('images/sintracaboroca.jpg') center/cover no-repeat;
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    position: relative;
}

/* Sovrapposizione scura per migliorare leggibilità */
.hero-tours::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Effetto scurente */
    z-index: 0;
}


/* HERO SECTION personalizzata per servizio clienti */
.hero-servizio {
    background: url('images/lisboacomercio.jpg') center/cover no-repeat;
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    position: relative;
}

/* Sovrapposizione scura per migliorare leggibilità */
.hero-servizio::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 0;
}

/* SEZIONE TESTUALE */
.servizio-content {
    padding: 60px 20px;
    text-align: center;
    font-family: 'Lexend Giga', sans-serif;
    background: #f9f9f9;
}

.servizio-content h2 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 20px;
}

.servizio-content p, .servizio-content ul {
    font-size: 1.2rem;
    color: #555;
    line-height: 1.8;
    max-width: 800px;
    margin: 10px auto;
}

.servizio-content ul {
    list-style: none;
    padding: 0;
}

.servizio-content ul li {
    padding: 10px;
    background: white;
    border-radius: 5px;
    margin-bottom: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Pulsante */
.servizio-content button {
    font-family: 'Lexend Giga', sans-serif;
    font-size: 1rem;
    background: #007BFF;
    color: white;
    border: none;
    padding: 15px 30px;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

.servizio-content button:hover {
    background-color: #0056b3;
}





.search-section {
    padding: 40px 20px;
    background-color: #f4f4f4;
    text-align: center;
    font-family: 'Lexend Giga', sans-serif;
}

.search-section h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.filters {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.filters div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.search-section label {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.search-section select {
    width: 200px;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.search-section button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 1rem;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.search-section button:hover {
    background-color: #0056b3;
}




.tour-cards {
    display: flex !important;  /* Assicura l'allineamento orizzontale */
    flex-wrap: wrap;           /* Permette alle card di andare a capo se necessario */
    gap: 20px;                 /* Distanza tra le card */
    justify-content: center;   /* Centra le card */
    align-items: stretch;      /* Mantiene la stessa altezza */
}

.card {
    display: block !important; /* Forziamo la disposizione corretta */
    width: 300px !important;   /* Dimensione fissa per uniformità */
}



#tour-container {
    display: flex !important;  /* Allinea le card orizzontalmente */
    flex-wrap: wrap;           /* Permette alle card di andare a capo se necessario */
    gap: 20px;                 /* Distanza tra le card */
    justify-content: center;   /* Centra le card */
    align-items: stretch;      /* Mantiene la stessa altezza */
}



.card img {
    width: 100%;
    height: 200px; /* Imposta un'altezza uniforme */
    object-fit: cover;
}


/* Stile per le card */
.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: white;
    border: 1px solid #ccc;
    border-radius: 10px;
    width: 300px;
    height: 100%; /* Nuova altezza dinamica */
    min-height: 700px; /* Imposta un'altezza minima */
    max-height: 800px; /* Imposta un'altezza massima per uniformità */
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: left;
    font-family: 'Lexend Giga', sans-serif; 
    padding-bottom: 20px;
}

/* Contenitore pulsante */
.card-buttons {
    margin-top: auto;
    padding: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex-grow: 1; /* Assicura che il contenitore si espanda */
}

/* Stile del pulsante */
.card-buttons button {
    width: 100%; /* Pulsante a tutta larghezza */
    padding: 10px 20px;
    font-size: 1rem;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.card-buttons button:hover {
    background-color: #0056b3;
}






header {
    display: flex;
    flex-wrap: wrap; /* Permette di andare a capo se necessario */
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

nav ul {
    display: flex;
    flex-wrap: wrap; /* Permette di adattarsi */
    justify-content: center;
    gap: 15px;
}






@media screen and (max-width: 768px) {
    /* Correzione Header */
    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: white; /* Mantiene l'header pulito */
        padding: 10px 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 1002;
    }

    /* Correzione WhatsApp */
    .whatsapp-link {
        position: fixed;
        top: 75px; /* Abbassa il pulsante per renderlo visibile */
        right: 30px; /* Lo mantiene sulla destra */
        z-index: 1003;
    }

    .whatsapp-link img {
        width: 40px;
        height: 40px;
    }

    /* Correzione Hamburger */
    .hamburger-menu {
        display: block;
        font-size: 32px;
        cursor: pointer;
        color: black;
        position: fixed;
        left: 30px; /* Sposta il menu hamburger a sinistra */
        top: 50px;
        z-index: 1003; /* Porta sopra tutto */
    }

    /* Menu di navigazione */
    nav {
        position: fixed;
        top: 120px !important;
        left: 10%;
        width: 70%;
        background: rgba(0, 0, 0, 0.95); /* Sfondo più scuro per maggiore contrasto */
        text-align: center;
        padding: 10px 0;
        display: none;
        z-index: 1002;
    }

    nav.show {
        display: block;
    }

    nav ul {
        flex-direction: column;
        list-style: none;
        padding: 0;
    }

    nav ul li {
        padding: 12px 0;
    }

     nav ul li a {
        color: white !important; /* Scritte bianche */
        font-size: 18px;
        text-decoration: none;
        display: block;
        padding: 10px 0;
    }

    nav ul li a:hover {
        color: #FFD700; /* Cambia colore in oro al passaggio del mouse */
    }
}