/* Rimuove margini e padding extra */
body,
html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    /* Evita scrollbar orizzontali */
}
/* Imposta altezza dinamica per il carosello */
.carousel-item {
    position: relative;
    width: 100%; /* Larghezza piena */
    height: auto; /* Imposta l'altezza al 100% della finestra */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Immagini nel carosello */
.carousel-item img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Copre tutta l'area senza distorsioni */
}

/* Contenitore del carosello */
.carousel-inner {
    position: relative;
    width: 100%;
    height: auto;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Contenitore dei bottoni */
.buttons {
    display: flex;
    justify-content: center;
    /* Centra i bottoni */
    flex-wrap: wrap;
    /* Permette di impilarli su schermi piccoli */
    gap: 20px;
    /* Distanza tra i bottoni */
}

/* Bottoni su mobile */
.category-btn {
    width: 100%;
    /* Occupa tutta la larghezza su mobile */
    max-width: 400px;
    /* Evita che diventino troppo grandi */
    height: auto;
    /* Altezza adattabile */
}

/* Stile immagine */
.btn-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Evita il taglio delle immagini */
}


.shipping-info {
    background-color: #f8f9fa;
    /* Sfondo leggermente grigio per differenziare */
    padding: 20px;
    margin: 30px auto;
    text-align: center;
    border-radius: 10px;
    max-width: 800px;
}

.shipping-info h2 {
    font-size: 1.8rem;
    color: #333;
    margin-bottom: 15px;
}

.shipping-info p {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 10px;
}

.shipping-info .highlight {
    color: #28a745;
    /* Verde per evidenziare la spedizione gratuita */
    font-weight: bold;
}

.newsletter-section {
    background-color: #f8f9fa;
    padding: 30px;
    margin: 40px auto;
    text-align: center;
    border-radius: 10px;
    max-width: 800px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 60px;
}

.newsletter-section h2 {
    font-size: 1.8rem;
    color: #2c3e50;
    margin-bottom: 15px;
}

.newsletter-section p {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 10px;
}

.highlight {
    color: #28a745;
    font-weight: bold;
}
/* Rimuovi margini e padding extra per evitare spazi vuoti */
#homevideo {
    width: 100%; /* Adatta la larghezza del video */
    height: auto; /* Assicurati che l'altezza sia sempre al 100% */
    object-fit: contain; /* Rende il video responsivo senza distorsioni */
    margin: 0; /* Rimuove margini extra */
    padding: 0; /* Rimuove padding extra */
}
.plant-card:hover {
    transform: scale(1.05);
    transition: 0.3s ease-in-out;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}
video {
    width: 100%;
    height: auto;
}

video[poster] {
    object-fit: contain;  /* Adatta l'immagine mantenendo le proporzioni */
    background-color: #fff;  /* Imposta un colore di sfondo bianco se lo spinner è troppo piccolo */
}
/* Nascondere il carosello e il video in base alla larghezza dello schermo */
@media (max-width: 430px) {
    #imageCarousel {
        display: none !important;  /* Nascondi il carosello */
    }

    #homevideo {
        display: block !important; /* Mostra il video */

    }
}

@media (min-width: 431px) {
    #homevideo {
        display: none !important; /* Nascondi il video */
    }

    #imageCarousel {
        display: block !important; /* Mostra il carosello */
    }
}

/* Su desktop (min 992px) i bottoni si affiancano e si ridimensionano */
@media (min-width: 992px) {
    .buttons {
        flex-wrap: nowrap;
        /* Evita che vadano a capo */
        margin-bottom: 20px;
    }

    .category-btn {
        width: 33%;
        /* Ogni bottone occupa 1/3 dello spazio */
        max-width: 500px;
        /* Mantiene una dimensione massima */
        height: 500px;
        /* Altezza fissa */
    }
}

/* Ridurre lo spazio tra banner e bottoni su mobile */
@media (max-width: 991px) {
    .carousel-item {
        margin-bottom: 0px;
        /* Riduce lo spazio sotto il banner (aggiungi 0px) */
        padding-bottom: 0px;
        /* Rimuove padding sotto il banner */
        min-height: 400px;
        /* Altezza minima */
        overflow: hidden;
        /* Nasconde le parti tagliate */
    }

    .carousel-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Taglia l'immagine se necessario per adattarsi */
    }

    .buttons {
        gap: 10px;
        /* Distanza tra i bottoni */
        margin-top: 0px;
        /* Rimuove lo spazio sopra i bottoni */
        margin-bottom: 20px;
    }

}

/* Sezione novità e tropical box */
.new-plants-section {
    margin: 50px 0;
    padding: 20px;
    background-color: #f8f9fa;
}

.tropical-box-section{
    margin: 50px 0;
    padding: 20px;
    background-color: #f8f9fa;
}

.plant-tag-section{
        margin-bottom: 50px; 
        width: 100%;
        height: auto;
        display: block;
}
/* Contenitore delle card in orizzontale */
.new-plants-carousel {
    display: flex;
    flex-wrap: nowrap; /* Permette alle card di andare a capo se necessario */
    gap: 20px;
    justify-content: center;
    padding-bottom: 40px;
    overflow-x: hidden;  /* Nasconde qualsiasi barra di scorrimento orizzontale */
    overflow-y: hidden;  /* Nasconde la barra di scorrimento verticale */
    position: relative;  /* Necessario per i dots */
}


/* Aggiungi stile per i punti di navigazione (dots) */
.new-plants-carousel .slick-dots {
    position: absolute;
    bottom: 10px; /* Posiziona i dots sopra al fondo del carosello */
    left: 50%;
    transform: translateX(-50%); /* Centra i dots */
    text-align: center;
    width: 100%;
    z-index: 10; /* Assicura che i punti siano sopra il carosello */
    margin: 0;
    padding: 0;
    list-style: none;
}


/* Centratura del contenuto all'interno dei div */
.register-invite, .newsletter-invite {
    background-color: #B2D3FE; /* Azzurro chiaro */
    padding: 20px;
    margin-bottom: 20px;

    /* Aggiungi questa riga per togliere margini orizzontali */
    margin-left: 0;
    margin-right: 0;

    /* Imposta larghezza al 100% */
    width: 100%;

    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 250px;
    box-sizing: border-box; /* Include padding e bordi nella larghezza */
}

/* Cambia colore del testo per il titolo */
.register-invite h3, .newsletter-invite h3 {
    color: #007bff; /* Colore blu per i titoli */
    margin-bottom: 10px;
}

/* Cambia colore dei paragrafi */
.register-invite p, .newsletter-invite p {
    color: #333; /* Colore grigio scuro per il testo */
    margin-bottom: 20px;
}

/* Styling per i bottoni */
.register-invite a, .newsletter-invite a {
    background-color: #007bff; /* Blu per il bottone */
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
}

.register-invite a:hover, .newsletter-invite a:hover {
    background-color: #0056b3; /* Blu più scuro al passaggio del mouse */
}