@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');


.roboto-thin {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: normal;
  }
  
  .roboto-light {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .roboto-medium {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
  }
  
  .roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .roboto-black {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: normal;
  }
  
  .roboto-thin-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: italic;
  }
  
  .roboto-light-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: italic;
  }
  
  .roboto-regular-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .roboto-medium-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: italic;
  }
  
  .roboto-bold-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: italic;
  }
  
  .roboto-black-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: italic;
  }
  

/* Reset CSS */
html, body {
    margin: 0;
    padding: 0;
    background: linear-gradient(90deg, #0b3e27, #197149);
}

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    font-family: Arial, sans-serif;
    letter-spacing: 0.06rem;
    line-height: calc(1 + 0.8 / 1);
    font-style: normal;
    /*font-weight: 400;*/
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    
}

a{
    text-decoration: none;
    color: #000000;
}
a:hover {
    color:rgba(0, 0, 0, 0.579);
  }


/* Header */
header {
    background: linear-gradient(90deg, #0b3e27, #197149);
    color: #fff;
    padding: 5px 5%;
    display: flex;
    flex-direction:column-reverse;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
}

.logo img {
    height: 150px;
    display: block;
    margin: 0 auto;
    
}

.figure-logo{
    margin-top: 2px;
    margin-bottom: 2px;
}
.div-logo {
    align-items: center;
    
}
@media (max-width: 768px) {
    .logo img {
        height: 75px;
    }
}
@media (min-width: 768px){
    .div-logo {
        margin-bottom: 5px;      
    }
}

/* Navigation */


nav ul li {
    margin-right: 30px;
}

ul{
    margin-top: 0px!important;
    margin-bottom: 0px!important;
}

.ul-menu{
    text-align: left;
    padding: 0;
    padding-left: 30px!important;
    margin: auto;
    list-style: none;
    display: flex;
    /*gap: 20px;*/
    padding-top: 89px!important;
    margin: 0px!important;

}

nav ul li a {
    color: #ffffff;
    text-decoration: none;
    position: relative;
}

nav ul li a:hover {
    text-decoration: none;
    color: #ffffff!important;
}

nav ul li a::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    background: #fff;
    position: absolute;
    bottom: -1px;
    left: 0;
    transition: width 0.1s ease-in-out;
}

nav ul li a:hover::after {
    width: 100%;
}
@media (max-width: 768px) {
    nav ul li a::after {
        display: none;
    }
}

nav ul li a.current {
    /*text-decoration: underline;*/
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Stili per il menu a tendina */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: static!important;
}

.menu-toggle {
    display: none; /* Nascondi il pulsante del menu per impostazione predefinita */
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    z-index: 3;
}
.menu-toggle span {
    color: #fff;
}

.wa-header {
    display: none; /* Nascondi whatsapp */
    align-items: center;
    
}

/* Stili per il menu a tendina attivato */
@media (max-width: 768px) {
    header {
        flex-direction:row;
        padding: 0 5%;
    }

    .ul-menu {
        /*display: none; /* Nascondi il menu a tendina per impostazione predefinita */
        flex-direction: column;
        background-color: #0b3e27;
        padding: 10px;
        position: absolute;
        top: 0;
        left: -100%;
        width: 80%;
        min-height: 100vh;
        z-index: 2;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Aggiungi ombra */
        transition: left 0.5s ease;

    }
    .ul-menu.open {
        left: 0;
        margin: 0px!important;
    }
    .ul-menu-tr {
        /*display: none; /* Nascondi il menu a tendina per impostazione predefinita */
        flex-direction: column;
        background-color: #0b3e2700;
        padding: 0px;
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        min-height: 100vh;
        z-index: 1;
        transition: left 0.5s ease;
        margin: 0px!important;

    }
    .ul-menu-tr.opentr {
        left: 0;
    }

    .submenu {
        /*display: block !important; /* Mostra sempre le sottocategorie */
        padding-left: 20px;
    }

    .ul-menu li {
        margin: 10px 0; /* Aggiungi spazio tra i link */

    }

    nav ul li a {
        color: #ffffff;
        text-decoration: none;
    }

    .menu-toggle {
        z-index: 3;
        display: flex; /* Mostra il pulsante del menu */
        transform: rotate(0deg);
        transition: transform 0.3s ease-in-out;
    }
    .attivo{
        transform: rotate(90deg);
    }
    .menu-toggle:hover {
        background: transparent;
        background-color: transparent;
    }

    .wa-header {
        display: flex; /* Mostra il pulsante di WA */
        justify-content: center;
        width: 100%;
        padding: 10px 0px;
    }
    .wa-header a{
        margin: 0px 10px;
    }
    
    p.registrato {
        font-size: 12px;
        margin-right: 0px !important;
    }
}
@media (min-width: 768px) {
    .ul-menu {
        display: flex !important;
        height: auto !important;
        padding: 0 !important;
        padding-left: 30px !important;
        flex-direction: row;
    }
    .submenu {
        padding-left: 0px;
    }
}

/*SOTTOCATEGORIE MENU*/
.submenu {
    display: none;
    list-style: none;
    font-size: 13px;
}
@media (min-width: 768px) {
    .submenu {
        position: absolute; /* Posiziona il submenu in modo assoluto */
        top: calc(100% + 0px); /* Posiziona il submenu sotto il menu di appartenenza */
        left: 50%; /* Posiziona il submenu a metà della finestra */
        transform: translateX(-37%); /* Sposta indietro il submenu di metà della sua larghezza */
        width: auto; /* Larghezza del submenu pari al menu di appartenenza */
        background: linear-gradient(90deg, #0b3e27, #197149);
        /*border: 1px solid #ccc; /* Bordo grigio per il submenu */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombra leggera per il submenu */
        z-index: 1000; /* Assicura che il submenu sia sopra gli altri contenuti */
        padding: 10px;
        
    }
    .subm1{
        left: calc(50% - 125px)!important;
    }
}


.submenu.active {
    display: block;

}

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

.fa-chevron-down {
    margin-left: 5px;
}
.submenu a {
    display: block;
    padding: 5px 0;
    color: inherit;
}
.submenu a::after {
    content: "";
    display: block;
    width: 0;
    height: 1px;
    background: #ffffff;
    position: absolute;
    bottom: -3px;
    left: 0;
    transition: width 0.25s ease-in-out;
}

.submenu a:hover {
    text-decoration: none;
}

.submenu a:hover::after {
    width: 100%;
}
@media (max-width: 768px) {
    .submenu a::after {
        display: none;
    }
}

.submenu li {
    margin-right: 0px!important;
}
/*@media (max-width: 768px) {
    .fa-chevron-down {
        display: none;
    }
}*/


/* Footer */
footer {
    background: linear-gradient(90deg, #0b3e27, #197149);
    color: #fff;
    text-align: center;
    padding: 20px 1%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: auto;
    max-height: none;
}

p.registrato {
    align-items: center;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 0px;
}
@media (max-width: 768px) {
    .contact-footer {
        display: none;
    }
}


.contact-footer p{
    align-items: center;
    margin-top: auto;
    margin-bottom: auto;
}
.contact-footer a{
    color: white;
}

/* Main content */

.main-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
}

.main-content{
    background: white;
}

/* HERO */
.hero {
    width: 100%;
   /** height: 400px;*/
    height: auto;
    background-color: rgb(255, 255, 255);
    padding: 10px 5%;
    overflow: hidden; /* Evita che l'immagine esca dal contenitore */
    position: relative; /* Per utilizzare position:absolute nell'immagine */
    min-height: 100%;
}

.hero img {
    width: 100%; /* Imposta la larghezza dell'immagine al 100% del contenitore */
    height: 100%; /* Imposta l'altezza dell'immagine al 100% del contenitore */
    max-width: 100%;
    object-fit: cover; /* Imposta la modalità di adattamento dell'immagine*/
    object-position: center center; /* Posiziona l'immagine al centro del contenitore */
    display: block; /* Rimuove eventuali spazi bianchi sotto l'immagine */
    position: absolute; /* Per posizionare l'immagine rispetto al contenitore */
    top: 0;
    left: 0;
}

/* EVIDENZA */
.evidenza {
    width: 100%;
    background-color: rgb(255, 255, 255);
    padding: 10px 0%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 16px;
}
.evidenza h1 {
    text-align: center;
    border-bottom: solid 1px gray;
    font-size: 16px;
    width: 90%;
    margin: 0;
    margin-top: 16px;
    margin-bottom: 3px;
}

/* Storia del negozio */
.store-story {
    width: 100%;
    /*height: 800px;*/
    background-color: rgb(255, 255, 255);
    padding: 10px 5%;
    padding-bottom: 25px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.img-story{
    width: 45%;
    /*height: 100%;*/
    background-color: rgba(255, 255, 255, 0);
    /*float: left;*/
    /* Altezza relativa alla larghezza */
    height: 0;
    padding-top: 23%; /* Altezza uguale al 45% della larghezza */
    padding-bottom: 23%; /* Altezza uguale al 45% della larghezza */
    overflow: hidden; /* Evita che l'immagine esca dal contenitore */
    position: relative; /* Per utilizzare position:absolute nell'immagine */
    min-height: 100%;
    display: flex;
    align-items: center;
}

.img-story img {
    width: 120%; /* Imposta la larghezza dell'immagine al 100% del contenitore */
    /*/*max-width: 100%;
    /*object-fit: cover; /* Imposta la modalità di adattamento dell'immagine */
    /*object-position: center center; /* Posiziona l'immagine al centro del contenitore */
    display: block; /* Rimuove eventuali spazi bianchi sotto l'immagine */
    /*position: absolute; /* Per posizionare l'immagine rispetto al contenitore 
    border-radius: 50%;*/
    position: absolute;
    top: 0;
    right: 0;
    
}

.story{
    width: 55%;
    /*height: 100%;*/
    background-color: rgb(255, 255, 255);
    /*float: left;*/
    padding: 2% 2%;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.story h2{
    font-size: 1.6vw; /* Adatta la dimensione del testo in base alla larghezza della finestra */
    line-height: 1.6; /* Altezza della linea */
    font-weight: 700;
    color: #000;
}
.paragrafi p {
    font-size: 1.2vw; /* Adatta la dimensione del testo in base alla larghezza della finestra */
    color: #000;
}

@media (max-width: 768px) {
    .store-story {
        flex-direction: column;
    }
    .story h2{
        font-size: 3.2vw; /* Adatta la dimensione del testo in base alla larghezza della finestra */
        margin-top: 20px;
    }
    .paragrafi p {
        font-size: 2.8vw; /* Adatta la dimensione del testo in base alla larghezza della finestra */
    }
    .img-story img {
        position:absolute;
    }
    .img-story{
        width: 100%;
        padding-top: 53%; /* Altezza uguale al 45% della larghezza */
        padding-bottom: 53%; /* Altezza uguale al 45% della larghezza */
    }

    .story{
        width: 100%;
        padding: 0%;
    }
    .hero {
        /*height: 280px;*/
        height: auto;
        padding: 0;
    }
}

/*PERCORSO*/
.percorso{
    margin-bottom: 0;
    margin-top: 2px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    width: calc(100% - 120px);
}
@media (max-width: 768px) {
    .percorso{
        width: calc(100% - 75px);
    }
    .percorso nav{
        width: 215px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.li-percorso{
    display: flex;
    
    padding: 3px;
    margin-bottom: 0;
    font-size: 12px;
    list-style: none;
    background-color: white;
}
.li-percorso li {
    margin-right: 3px;
    
}
.li-percorso li p{
    margin-bottom: 0;
}
.cont-prod{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.cont-prod p{
    margin-bottom: 0;
    text-align: center;
    font-size: 10px;
    margin-right: 3px;
    color: #201d1d;
}

/* FILTRI */
#filtersButton{
    margin: auto;
    padding: 0px 5%;
    margin-top: auto !important;
    margin-bottom: 3px;
    padding: 0px 0px;
    border: none;
    border-radius: 4px;
    background-color: transparent !important;
    color: black !important;
    cursor: pointer;
}

#filtersButton:hover {
    background-color: white !important;
}

.filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0px;
    margin-top: 0px;
    flex-wrap: wrap;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 10px;
    width: 100%;
}

.filters label {
    margin-right: 10px;
}

.cont-filtro{
   /* width: 40%;*/
    margin-bottom: 3px;
}
.cont-bottone{
    width: 20%;
    margin-bottom: 3px;
    text-align: center;
}

.filters select {
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    /* margin-right: 10px; */
    width: 90%;
    max-width: 122px;
    color: #000000;
}


.filters button {
    margin-bottom: 3px;
    padding: 2px 16px;
    border: none;
    border-radius: 4px;
    background-color: transparent;
    color: black;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.filters button:hover {
    background-color: transparent;
}

#sortByPriceCresButton.active {
    color: rgb(0, 129, 0); /* Cambia il colore a tuo piacimento */
}
#sortByPriceDescButton.active {
    color: rgb(0, 129, 0); /* Cambia il colore a tuo piacimento */
}  
#sortByPriceCresButton:hover {
    background: transparent;
}
#sortByPriceDescButton:hover {
    background: transparent;
}  

/*Barra di ricerca*/
.search-bar {
    display: none;
    align-items: center;
}
.search-bar input {
    padding: 0;
    border: 0px solid #ccc;
}

.search-bar input[type="text"],
.search-bar button {
    display: none;
    /* Stili per la barra di ricerca nascosta */
}

.search-icon {
    cursor: pointer;
    /* Stili per l'icona di ricerca */
}
.searchDiv{
    width: 100%;
}
@media (max-width: 768px) {
    .search-bar {
        display: flex;
        align-items: center;
        width: 41px;
        justify-content: center;
    }
}

.active {
    display: block !important;
    /* ... altri stili per la visualizzazione attiva */
}
@media (min-width: 768px) {
    .filters {
        display: flex !important;
        width: 80%;
        justify-content: space-between;
        max-width: 1122px;
        /* ... altri stili per la visualizzazione attiva */
        
    }
    .cont-filtro{
        width: 160px;
        margin: 3px;
    }
    .cont-bottone{
        width: 80px;
        margin: 3px;
        text-align: center;
    }

    .li-percorso{
        font-size: 17px;
    }
    .cont-prod p{
        font-size: 15px;
        color: #201d1d;
    }
}

/*TENDINA FILTRI*/
.cont-filtri {
    position: absolute;
    top: 0;
    right: -70%; /* Inizialmente nascosto verso destra */
    width: 0; /* Inizialmente chiuso */
    height: 100vh; /* Altezza dello schermo */

    background-color: #ffffff; /* Colore di sfondo */
    transition: width 0.5s ease, right 0.5s ease; /* Aggiungi transizione */
    z-index: 999; /* Assicurati che il filtro sia sopra gli altri elementi */
    overflow-y: auto; /* Scroll se l'altezza supera lo schermo */
    box-shadow: -20px 0 10px rgba(0, 0, 0, 0.1); /* Aggiungi ombra laterale */
    padding: 0px; /* Spaziatura interna */

    /* Modifica lo stile a tuo piacimento */
}
.cont-uno{
    width: 100%;
    padding-bottom: 20px;
    border-bottom: 1px solid rgb(161, 161, 161);
    margin-bottom: 20px;
}

.cont-uno a{
    height: 30px;
    width: 30px;
    margin-right: 20px;
}

.cont-uno p{
    display: inline;
    font-size: 12px;
    padding: 0 20px;
}
.cont-due{
    display: flex;
    flex-direction: column;
}
.due-prezzo{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.due-prezzo p{
    display: inline;
    font-size: 12px;
    margin-right: 20px;
    margin-bottom: 0;
    align-self: center;
}
.due-prezzo input{
    width: 50px;
    padding: 2px;
    border-radius: 0;
    margin-right: 2px;
}
.due-cancella{
    border-top: 1px solid rgb(161, 161, 161);
    text-align: center;
}
.due-cancella p{
    font-size: 14px;
    margin: 20px 0px;
}


/* ICONE SOCIAL */
.social-icons a {
    color: #fff;
    font-size: 24px;
    margin: 0 10px;
    text-decoration: none;
}

.instagram-icon {
    color: white;
    font-size: 25px;
}

#whatsapp-link {
    display: block;
    font-size: 25px;
    color: white; /* Cambia colore come preferisci */
}

/*FORM DI CONTATTO*/
.container-form {
    max-width: 1200px;
    width: 80%;
    margin: 0 auto;
    padding: 50px;
}

h1 {
    text-align: center;
    font-size: 36px;
    margin-bottom: 30px;
}

form {
    display: flex;
    flex-direction: column;
}

.form-group {
    margin-bottom: 20px;

}

label {
    font-size: 18px;
}

input,
textarea {
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
    width: 100%;
}

button {
    padding: 10px;
    font-size: 16px;
    background-color: #197149;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background: linear-gradient(90deg, #0b3e27, #197149);
    /*background-color: #00420e;*/
}
@media (max-width: 768px) {
    .container-form {
        width: 100%;
    }
}

/*Mappa Google*/

.location-section {
    text-align: center;
}

.map-container {
    margin-bottom: 20px;
}

.map-container iframe {
    border: none;
    border-radius: 10px;
    width: 100%;
    height: 400px;
}

.address,
.contact-info {
    margin-bottom: 20px;
}

.address h2,
.contact-info h2 {
    font-size: 20px;
    margin-bottom: 10px;
}


/* PRODOTTI CARD */

.colonna{
    display: flex;
    flex-wrap: wrap;
    padding-right: 0; 
    padding-left: 0; 
    margin-top: 0; 
}
.colonna-2{
    flex: 0 0 auto;
    width: 50%;
}
@media (min-width:768px){
    .colonna-md-3{
        flex: 0 0 auto;
        width: 33.33333333%;
    }
}
.card-col{
    padding: 1%;
}
.card-col a{
    text-decoration: none;
}
.card-main {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border: 0.0px solid gray;
    border-radius: 0;
    overflow: hidden;
}

.availability-green {
    position: absolute;
    top: 10px; /* Regola il posizionamento verticale */
    right: 10px; /* Regola il posizionamento orizzontale */
    background-color: rgba(79, 178, 30, 0.664); /* Sfondo nero leggermente trasparente */
    color: white;
    padding: 2px 2px;
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
}
.availability-orange {
    position: absolute;
    top: 10px; /* Regola il posizionamento verticale */
    right: 10px; /* Regola il posizionamento orizzontale */
    background-color: rgba(177, 112, 33, 0.712); /* Sfondo nero leggermente trasparente */
    color: white;
    padding: 2px 2px;
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
}

.disponibilita{
    margin-top: 0;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .availability-green {
        top: 10px; /* Regola il posizionamento verticale */
        right: 5px; /* Regola il posizionamento orizzontale */
        
    }
    .availability-orange {
        top: 10px; /* Regola il posizionamento verticale */
        right: 5px; /* Regola il posizionamento orizzontale */
        
    }
    .disponibilita{
        font-size: 8px; /* Puoi regolare la dimensione del testo secondo le tue preferenze */
        font-weight: bold;
        font-family: 'Times New Roman', Times, serif;
    }
    .vedi-prodotto-btn {
        width: 100%;
    }
}

.card-image {
    display: flex;
    align-items: center;
    justify-content: center;
   /* height: 30vh; /* Altezza desiderata per le immagini */
    overflow: hidden; /* Assicura che le immagini non fuoriscano dalla loro area */
    border-radius: 0;
}

.card-image img{
    width: 100%; /* Imposta la larghezza dell'immagine al 100% del contenitore */
    height: 100%; /* Imposta l'altezza dell'immagine al 100% del contenitore */
    object-fit: cover; /* Imposta la modalità di adattamento dell'immagine*/
    object-position: center center; /* Posiziona l'immagine al centro del contenitore */
    display: block; /* Rimuove eventuali spazi bianchi sotto l'immagine */
}


.card-info{
    text-align: left;
    padding: 2%;
    /*background-image: url('../immagini/rolex-texture.jpeg');*/
    background-size: cover; /* scala l'immagine per coprire l'intero contenitore */
    background-position: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    /*height: 110px;*/
    height: 125px;
}
@media (max-width: 768px) {
    .card-info{
        height: 125px;
    }
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: rgba(244, 206, 50, 0.15);
    /*background-color: rgba(157, 147, 123, 0.5); /* Imposta il colore e l'opacità desiderati */
    /* Modifica l'opacità (0.5 nell'esempio) per regolare il livello di scurità */
}
.card-info h6{
    color: #000000;
    position: relative;
    font-size: 18px;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    overflow: hidden;
}
.titolo{
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    width: 100%;
    text-align: center;
}
.card-info p{
    color: #000000;
    position: relative;
}
.prezzo{
    text-align: center;
    color: #000000;
    font-size: 15px; /* Puoi regolare la dimensione del testo secondo le tue preferenze */
    font-weight: 300;
    font-family: 'Roboto', sans-serif;
    position: relative;
    margin-bottom: 0.5rem;
}
.padmin{
    padding-top: 10px!important;
    padding-bottom: 3rem!important;
}

.vedi-prodotto-btn {
    border: 1px solid #197149;
    border-radius: 20px;
    padding: 2px 13px;
    background-color: white; /* Sfondo bianco */
    color: black; /* Testo nero */
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-size: 14px;
    
}

.vedi-prodotto-btn:hover {
    background: #dddddd; /* Sfondo grigio al passaggio del mouse */
    color: #555555; /* Cambia il colore del testo al passaggio del mouse */
}


/*PRODOTTI PAGINA DETTAGLI*/
.tool{
    position: absolute;
    top: 89px;
    left: 0;
    z-index: 1;
    margin: 5px 0px;
    width: 100%;
    padding-left: 2px;
    padding-right: 5%;
}
.tool p{
    margin: 0px;
    font-size: 12px !important;
}
@media (max-width: 768px) {
    .tool{
        display: none;
    }
}
.dettagli-titolo{
    display: flex;
    text-align: center;
    margin-top: 10px;
    margin-left: 5%;
    margin-right: 5%;
    width: 330px;
    /*padding-left: 5%;
    padding-right: 5%;
    justify-content: center;*/
}
.dettagli-titolo-web h6{
    margin: 20px 0;
    /*font-family: 'Billabong', sans-serif;*/
    font-size: 1.3rem; /* Regola la dimensione del font a tuo piacimento */
    color: #000;
    width: 300px;
    /*font-size: 18px; /* Puoi regolare la dimensione del testo secondo le tue preferenze */
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
}

.dettaglio-prodotto{
    margin: 0px 0;
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
}
@media (max-width:768px){
    .dettaglio-prodotto{
        margin: 0px 0;
        width: 100%;
        padding-left: 0%;
        padding-right: 0%;
    }
    .dettagli-titolo-web{
        display: none;
    }
}
.dettagli-div{
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    width: 100%;
    justify-content: center;
}

.dettagli-image{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; /* Altezza desiderata per le immagini */
    overflow: hidden; /* Assicura che le immagini non fuoriscano dalla loro area */
    margin: 0;
    height: 320px;

}
.dett-img{
    display: flex;
    flex-wrap: wrap;
    width: 330px;
    justify-content: center;
    margin-top: 10px;
}
@media (min-width:768px){
    .tool{
        top: 195px;
    }
    .dettagli-titolo{
        display: none;
        margin-top: 20px;
    }
    .dettagli-image{
        /*height: 600px; /* Altezza desiderata per le immagini */
        overflow: hidden; /* Assicura che le immagini non fuoriscano dalla loro area */
        margin: 0px;
        /*max-height: 600px;*/
        width: 100%;
        height: auto;
    
    }
    .dett-img{
        width: calc(100vw - 700px);
        margin-top: 30px;
        min-width: 332px;
        max-width: 1000px;
    }
    .dettagli-info{
        width: auto;
        max-width: 470px;
        margin: 10px 5%;
        margin-right: 0px;
    
    }
    .dettagli-image img{
        width: calc(100% - 59px)!important;
    }
    .arrow-buttons{
        display: none!important;
    }
}
.dettagli-image img{
    width: 100%; /* Imposta la larghezza dell'immagine al 100% del contenitore */
    height: 100%; /* Imposta l'altezza dell'immagine al 100% del contenitore */
    object-fit: cover; /* Imposta la modalità di adattamento dell'immagine*/
    object-position: center center; /* Posiziona l'immagine al centro del contenitore */
    display: block; /* Rimuove eventuali spazi bianchi sotto l'immagine */
}
.num-foto{
    font-size: 1rem;
    color: #545454a9;
    font-weight: 200;
}
.arrow-buttons {
    display: flex;
    justify-content: space-between;
    width: auto;
    padding-left: 2px;
    padding-right: 2px;
}

.arrow-buttons button {
    font-size: 1rem;
    font-weight: 200;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #545454a9;
    font-weight: 200;
    padding: 0;
    cursor: pointer;
    transition: color 0.3s; /* Aggiungi una transizione al cambio di colore */
}
.arrow-buttons button:hover {
    color: #545454; /* Cambia colore al passaggio del mouse */
}
@media (max-width:768px){
    .dettagli-info{
        width: 330px;
        margin: 5%;

    }
}
.dettagli-info a {
    background-color: #25D366;
    color: #fff;
    padding: 10px 5px;
    text-decoration: none;
    font-size: 15px;
    width: 330px;
    text-align: center;
  }

.wa{
    margin: 30px 0;
    display: flex;
    justify-content: center;
}

.dettagli-titolo h6{
    font-family: 'Billabong', sans-serif;
    font-size: 1.3rem; /* Regola la dimensione del font a tuo piacimento */
    color: #000;
    margin-bottom: 0px;
    /*width: 330px;*/
}
.dettagli-info p{
    margin-bottom: 7px;

}
.dettagli-prezzo{
    margin: 20px 0;
    width: 330px;
    text-align: center;
    color: #000000;
    font-size: 18px; /* Puoi regolare la dimensione del testo secondo le tue preferenze */
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
    /*margin-bottom: 0.5rem;*/
}

@media (max-width:768px){
    .dettagli-div{
        justify-content: center;
    }
}

.arrow-b {
    display: none; /* Nascondi di default su schermi piccoli */
    position: relative; /* Posiziona i pulsanti sopra l'immagine */
    
}

@media (min-width: 768px) {
    .arrow-b {
        display: block; /* Mostra su schermi di almeno 768px */
    }
}


/* Stile per l'overlay o la modale */
.overlay {
    display: none; /* Nascondi di default */
    position: fixed; /* Posizionamento fisso rispetto alla finestra visualizzata */
    z-index: 999; /* Assicura che l'overlay sia al di sopra di tutti gli altri elementi */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9); /* Colore di sfondo scuro */
}

/* Stile per il contenuto dell'overlay o della modale */
.overlay-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Stile per l'immagine ingrandita */
#expandedImage {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Impedisce il ridimensionamento dell'immagine */
}

/* Stile per il pulsante di chiusura */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1000; /* Assicura che il pulsante di chiusura sia sopra il contenuto */
}

.close:hover,
.close:focus {
    color: #999;
    text-decoration: none;
    cursor: pointer;
}

/* Stile per il body con lo scroll bloccato */
.body-scroll-lock {
    overflow: hidden;
}

/***** COOKIES ******/
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    /*width: 100%;*/
    background-color: #173d00;
    color: #fff;
    padding: 10px;
    text-align: left;
    z-index: 999;
    font-size: 15px;
    margin: 20%;
    margin-bottom: 15px;
    border-radius: 20px; /* Imposta il bordo tondeggiante */
}

.cookie-consent a {
    color: #fff;
    font-weight: 800;
}

.cookie-consent a:hover {
    text-decoration: underline;
}


/***** VIDEO ****/

#fullscreen-video {
    width: 100%; /* Imposta la larghezza dell'immagine al 100% del contenitore */
    height: 100%; /* Imposta l'altezza dell'immagine al 100% del contenitore */
    max-width: 100%;
    object-fit: cover; /* Imposta la modalità di adattamento dell'immagine*/
    object-position: center center; /* Posiziona l'immagine al centro del contenitore */
    display: block; /* Rimuove eventuali spazi bianchi sotto l'immagine */
    position: absolute; /* Per posizionare l'immagine rispetto al contenitore */
    top: 0;
    left: 0;
}

#scopri-di-piu {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    background-color: #333; /* Colore di sfondo grigio scuro */
    color: #fff; /* Colore del testo bianco */
    border: none; /* Rimuove il bordo */
    border-radius: 20px; /* Rende il pulsante tondeggiante */
    padding: 10px 20px; /* Spaziatura interna */
    cursor: pointer; /* Cambia il cursore al passaggio del mouse */
    transition: background-color 0.3s ease; /* Effetto di transizione */
}

#scopri-di-piu:hover {
    background-color: #555!important; /* Cambia il colore di sfondo al passaggio del mouse */
    background: #555!important;
}

/** HERO **/
.hero-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.hero-item {
    position: relative;
    overflow: hidden;
    padding-top: 177.78%; /* Rapporto di aspetto 9:16 */
}

.hero-item .bkidem { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Per ritagliare il video mantenendo il rapporto di aspetto */
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; /* Aggiunto transition per il filtro */
    background-color: rgba(85, 96, 74, 0.85);
}

.hero-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.57); /* Overlay semi-trasparente */
    opacity: 0; /* Inizialmente invisibile */
    transition: opacity 0.3s ease-in-out; /* Transizione di opacità */
}

.hero-item h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 24px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.hero-item:hover .bkidem {
    transform: scale(1.1);
    filter: brightness(0.4); /* Scurisci il video al passaggio del mouse */
}

.hero-item:hover::before {
    opacity: 1; /* Mostra l'overlay al passaggio del mouse */
}

.hero-item:hover h2 {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.5);
}

/* Media query per adattare il layout ai dispositivi mobili */
@media screen and (max-width: 767px) {
    /*.hero {
        padding: 0px;
    }*/
    .hero-grid {
        grid-template-columns: 1fr; /* Cambia la disposizione in una sola colonna */
        /*gap: 0px;*/
    }
    .hero-item {
        padding-top: 120%; /* Rapporto di aspetto  */
    }
}
.hero-item.visible .bkidem {
    filter: brightness(0.4); /* Scurisci il video */
}

.hero-item.visible h2 {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.5); /* Mostra il titolo */
}

/**BARRA RICERCA PC**/
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body{
  background: #f2f2f2;
  font-family: 'Open Sans', sans-serif;
}

.search {
  width: 100%;
  position: relative;
  display: flex;
}

.searchTerm {
  width: 100%;
  border: 3px solid #197149;
  border-right: none;
  padding: 5px;
  height: 36px;
  border-radius: 5px 0 0 5px;
  outline: none;
  color: #5f5f5f;
}

.searchTerm:focus{
  color: #000000;
}

.searchButton {
  width: 40px;
  height: 36px;
  border: 1px solid #197149;
  background: #197149;
  text-align: center;
  color: #fff;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  font-size: 20px;
  padding: 0px;
}

/*Resize the wrap to see the search bar change!*/
.wrap{
  width: 30%;
  position: absolute;
  top: 267px;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (max-width: 768px) {
    .wrap{
        display: none;
      }
}
@media (min-width: 768px) {
    .padmin{
        padding-top: 56px!important;

    }
}