@font-face {

    font-family: 'testo';

    src: url('font4.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;

}



body {

    font-family: 'testo', sans-serif;

    padding: 0;

    margin: 0;

    background-color: rgb(254, 238, 248);

}



a {

    -webkit-tap-highlight-color: transparent;

    text-decoration: none;

}



.testo21 {

    font-family: Arial, Helvetica, sans-serif;

}



.titolo {

    font-family: 'titolo', sans-serif;

}



#container {

    text-align: center;

    padding: 0 10px;

}



header {

    position: sticky;

    top: 0;

    background-color: white;

    height: 110px;

    padding-bottom: 10px;

    text-align: center;

    margin: 0;

    z-index: 3;

}



#logo {

    width: 80%;

}



.menu_div {

    position: sticky;

    top: 120px;

    display: block;

    width: 100%;

    height: 32px;

    padding-bottom: 10px;

    background-color: rgb(254, 238, 248);

}



#menu {

    float: right;

    margin-top: 5px;

    margin-right: 20px;

}



.overlay {

    height: 100%;

    width: 0;

    position: fixed;

    z-index: 1;

    top: 120px;

    left: 0;

    background-color: rgb(255, 255, 255);

    z-index: 20;

    overflow-x: hidden;

    transition: 0.5s;

}



.overlay-content {

    position: relative;

    top: 50PX;

    display: flex;

    flex-direction: column;

    text-align: left;

    padding: 16px;

}



.overlay-content a {

    font-size: 1.2rem;

    padding: 7px 0;

    -webkit-tap-highlight-color: transparent;

    text-decoration: none;

    color: rgb(230, 0, 87);

}



.overlay-content hr {

    width: 100%;

    border: none;

    height: 1px;

    background-color: rgb(230, 0, 87);

}



.closebtn {

    position: absolute;

    top: 13px;

    right: 13px;

    font-size: 23px;

    background-color: transparent;

    border: none;

    text-decoration: none;

}



#sfondo1 {

    width: 90%;

    margin: 0 5px;

    border-radius: 5px;

    box-shadow: inset;

}



#sfondo13 {

    display: none;

}



.titolo1 {

    margin: 40px 0 30px 0;

}



.titoli {

    color: rgb(230, 0, 87);

}



.text1 {

    text-align: left;

    margin: 30px 25px;

    font-size: 16px;

}



.ax {

    color: rgb(230, 0, 87);

}



.pulsante {

    padding: 20px;

    padding-bottom: 10px;

    border: 2px solid rgb(230, 0, 87);

    border-radius: 5px;

    width: 150px;

    margin: 35px auto;

}



.pulsante img {

    width: 35px;

}



.pulsanteb {

    width: 250px;

    background-color: transparent;

    border: 3px solid rgb(230, 0, 87);

    color: black;

    border-radius: 8px;

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 20px auto;



}



.pulsanteb img {

    width: 45px;

    float: left;

    /* immagine a sinistra */

    margin: 0 10px;

}



.b3 p {

    width: 100%;

}



.b3 img {

    margin: 10px;

}



.pulsanteb p {

    text-align: center;

}



#toggle-btn {

    background-color: transparent;

    color: rgb(230, 0, 87);

    text-decoration: underline;

    text-underline-offset: 4px;

    border: none;

    cursor: pointer;

    margin: 0 auto;

    font-size: 14px;

}



#full-text {

    max-height: 0;

    opacity: 0;

    overflow: hidden;

    transition: max-height 100.8s ease, opacity 1.6s ease;

}



/* quando è visibile */

#full-text.show {

    max-height: 500px;

    /* un valore più grande del contenuto */

    opacity: 1;

}



.text-box {

    margin: 10px 0 30px 0;

}



#mapsb {

    width: 70px;

    margin-top: 5px;

}



.pulsantec {

    width: 300px;

    background-color: transparent;

    border: 3px solid rgb(230, 0, 87);

    color: black;

    border-radius: 8px;

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 20px auto;



}



.pulsantec img {

    width: 35px;

    float: left;

    /* immagine a sinistra */

    margin: 0 20px;

}



.steps-carousel {

    text-align: center;

    margin: 40px 0;

}



.carousel {

    display: flex;

    gap: 30px;

    overflow-x: auto;

    padding: 20px;

    scroll-snap-type: x mandatory;

    -webkit-overflow-scrolling: touch;

}



.carousel::-webkit-scrollbar {

    display: none;

}



.step-card {

    min-width: 260px;

    background: transparent;

    border: 2px solid rgb(230, 0, 87);

    border-radius: 13px;

    padding: 20px 13px;

    scroll-snap-align: center;

    text-align: center;

    transition: transform 0.2s ease;

    z-index: 0;

}



.step-card:hover {

    transform: translateY(-13px);

}



.step-card img {

    width: 100%;

    margin-bottom: 15px;

}



.step-card a {

    border: 1px solid rgb(230, 0, 87);

    border-radius: 5px;

    padding: 7px 20px;

    color: black;

    text-decoration: none;

}



.process-grid {

    display: grid;

    grid-template-columns: 1fr auto 1fr;

    grid-auto-rows: minmax(40px, auto);

    gap: 10px;

    align-items: center;

    max-width: 900px;

    margin: 0 auto;

    margin-bottom: 100px;

}



.pulsantef {

    width: 130px;

    height: 180px;

    background-color: transparent;

    border: 3px solid rgb(230, 0, 87);

    color: black;

    border-radius: 8px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    margin: 20px auto;

}



.pulsantef img {

    width: 65px;

    margin: 20px 0 10px 0;

}



.pulsantef.full {

    grid-column: 1 / -1;

    /* occupa tutte le colonne */

    width: 300px;

    height: 150px;

}



.full img {

    width: 90px;

}



.arrow {

    width: 40px;

    /* dimensione desiderata */

    height: auto;

    /* mantiene le proporzioni */

    display: block;

    margin: 0 auto;

    /* centra l’icona nella cella */

}



#contatti {

    margin-top: 40px;

}



.contattib {

    display: flex;

    flex-direction: column;

    gap: 25px;

    justify-content: center;

    margin-bottom: 25px;

}



.contattib img {

    width: 70px;

}



.contattib .testo21 {

    color: rgb(230, 0, 87);

    text-decoration: none;

    font-size: 13px;

}



.masonry {

    column-gap: 10px;

    column-count: 1;

    max-width: 800px;

    margin: auto;

}



.masonry img {

    width: 100%;

    margin: 0 0 10px;

    display: block;

    object-fit: cover;

    border-radius: 3px;

}



/* 

.masonry {

    column-count: 3;

}

        */



#cont-galleria {

    margin: 15px 10px;

    margin-bottom: 100px;

}



.card-fioritura {

    padding: 28px;

    border-radius: 20px;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);

    max-width: 600px;

}



.card-fioritura .icon1 {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    margin-bottom: 13px;

}



.card-fioritura img {

    width: 45px;

}



.card-fioritura h3 {

    margin: 0 0 6px 0;

    font-size: 1.2rem;

    color: rgb(230, 0, 87);

}



.card-fioritura .periodo {

    margin: 0;

    font-weight: 600;

    font-size: 1.05rem;

}



.card-fioritura .nota {

    margin-top: 8px;

    font-size: 0.9rem;

    line-height: 1.5;

}



.pulsanteb4 {

    width: 110px;

    max-height: 35px;

    background-color: transparent;

    border: 3px solid rgb(230, 0, 87);

    color: black;

    border-radius: 5px;

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 20px auto;



}



.pulsanteb4 img {

    width: 20px;

    float: left;

    /* immagine a sinistra */

    margin: 0 10px;

}



.i1 {

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

    gap: 10px;

    margin: 25px 0 8px 0;

    max-height: 35px;

}



.i2 {

    margin: 5px auto;

    font-size: 0.8rem;

}



.i1 img {

    width: 23px;

    height: 23px;

}



.a1 {

    position: fixed;

    bottom: 15px;

    right: 3px;

    padding: 5px;

    background-color: rgb(254, 238, 248);

    border: 1px solid rgb(230, 0, 87);

    border-radius: 8px;

    font-size: 0.7rem;

}



.a1 img {

    width: 53px;

    height: 53px;

}



.a1 h3 {

    margin: 3px;

}



/* Container principale */

.container-prezzi {

    max-width: 600px;

    margin: 0 auto 25px auto;

    padding: 0 15px;

}



/* Stile Tabella */

.table-wrapper {

    overflow-x: auto;

    /* Per rendere la tabella leggibile su smartphone */

}



.tabella-tulipani {

    width: 100%;

    border-collapse: collapse;

    background: white;

    border-radius: 10px;

    overflow: hidden;

}



.tabella-tulipani thead {

    background-color: rgb(230, 0, 87);

    /* Colore petalo */

    color: rgb(254, 238, 248);

}



.tabella-tulipani th,

.tabella-tulipani td {

    padding: 15px;

    text-align: center;

    border-bottom: 1px solid #fce4ec;

}



.tabella-tulipani th {

    font-weight: 600;

    text-transform: uppercase;

    font-size: 0.9rem;

}



.quantita {

    font-weight: bold;

    color: #444;

}



.prezzo {

    font-weight: 700;

}



.prezzo-bulbo {

    font-weight: 700;

}



/* Effetto al passaggio del mouse */

.tabella-tulipani tbody tr:hover {

    background-color: #fce4ec;

    transition: 0.3s;

}



.navbar {

    display: none;

}



.div_menu {

    display: block;

    width: 100%;

    height: 32px;

}



.ccx {

    display: none;

}



.messaggio {

    font-size: 23px;

    border: 1px solid rgb(230, 0, 87);

    border-radius: 8px;

    padding: 10px;

    margin: 0 auto;

    max-width: 300px;

}



.pulsantep {

    width: 180px;

    background-color: transparent;

    border: 3px solid rgb(230, 0, 87);

    color: black;

    border-radius: 5px;

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 10px auto;

}



.pulsantep img {

    width: 25px;

    float: left;

    /* immagine a sinistra */

    margin: 0 10px;

}



.pulsantep p {

    margin: 7px auto;

    font-size: 1.3rem;

}



@media (min-width: 480px) {



    #container {

        width: 60%;

        margin: 0 auto;

        text-align: center;

        padding: 0 10px;

    }



    .menu_div {

        display: none;

    }



    .navbar {

        position: sticky;

        top: 170px;

        padding: 15px;

        display: block;

        width: 100%;

        background-color: rgb(254, 238, 248);



    }



    .menu {

        text-align: center;

        justify-content: center;

        display: flex;

        flex-direction: row;

        gap: 25px;

    }



    .menu a {

        color: rgb(230, 0, 87);

        text-decoration: none;

        cursor: pointer;

    }



    header {

        position: sticky;

        top: 30px;

        background-color: white;

        width: 100%;

        height: 140px;

        margin: 0 auto;

        padding-bottom: 10px;

        text-align: center;

    }



    #logo {

        width: 60%;

    }



    .titolo1 {

        margin-top: 60px;

    }



    #sfondo13 {

        display: block;

        width: 90%;

        margin: 0 auto;

        border-radius: 5px;

        box-shadow: inset;

    }



    #sfondo1 {

        display: none;

    }



    .pulsanti {

        display: grid;

        grid-template-columns: repeat(3, 1fr);

        justify-items: center;

        gap: 25px;

        max-width: 900px;

        /* opzionale, per centrare meglio */

        margin: 0 auto;

    }



    .pulsanteb {

        width: 210px;

        height: 70px;

        /* o la tua dimensione */

        text-align: center;

    }



    .div_menu {

        display: none;

    }



    #ccz {

        width: 60%;

    }



    .ccx {

        display: block;

        position: sticky;

        top: 0;

        width: 100%;

        height: 30px;

        background-color: rgb(254, 238, 248);

        z-index: 3;

    }



    .pulsantef.full {

        width: 500px;

        height: 150px;

    }



    .full img {

        width: 90px;

    }



    .a1 {

        display: none;

    }



    .messaggio {

        max-width: none;

    }



    .masonry {

        column-count: 3;

    }



}



@media (min-width: 1100px) {

    .navbar {

        top: 220px;

    }





    header {

        height: 210px;

    }

}



@media (min-width: 2000px) {

    .navbar {

        top: 310px;

    }





    header {

        height: 300px;

    }

}