/* ==========================================================================



   1. VARIABILI GLOBALI E RESET



   ========================================================================== */



:root {



    --primary-color: #1a365d;



    /*--primary-color: #7d7e7c;*/

    --grigio-logo: rgb(144,146,149);

        

    --primary-dark: #1a202c;



    --accent-color: rgb(245,95,14);



    --accent-hover: #c53535;



    --bg-light: #f7fafc;



    --bg-card: #ffffff;



    --bg-overlay: rgba(255, 255, 255, 0.1);



    --bg-overlay-dark: rgba(119, 136, 153, 0.4);



    --text-main: #2d3748;



    --text-muted: #718096;



    --text-light: #e2e8f0;



    --border-color: #e2e8f0;



    --border-dark: #cbd5e0;



    --gold: #ffd700;



    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;



    --transition-smooth: all 0.3s ease;



    font-size: medium;



}







* {



    box-sizing: border-box;



    margin: 0;



    padding: 0;

    

    -webkit-tap-highlight-color: transparent !important;



}







body {



    width: 100%;



    min-height: 100vh;



    font-family: var(--font-family);



    color: var(--text-main);



    background-color: var(--bg-light);



    line-height: 1.6;



    -webkit-user-select: none;



    -ms-user-select: none;



    user-select: none;



}







/* ==========================================================================



   2. LAYOUT STRUTTURALE E MACRO-AREE



   ========================================================================== */



main {



    min-height: calc(100vh - 200px);



}







header {

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 1000;

    background-color: var(--primary-color);

    display: flex;

    flex-direction: row;

    gap: 40px;

    align-items: center;

    justify-content: space-between;

    padding: 10px 40px;

    border-bottom: 4px solid var(--accent-color);

    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

    transition: transform 0.4s ease;

    transition-behavior: allow-discrete;

}



#retractheader{

    position: absolute;

    right: 20px;

    bottom: -50px;

}



#retractheader>div{

    transition: transform 0.4s ease;

    font-weight: 600;

    width: 0;

    height: 0;

    border-left: 7px solid transparent;

    border-right: 7px solid transparent;

    border-bottom: 15px solid var(--bg-card);

}



header.closed{

    transform: translateY(-100%);

    #retractheader>div{

        transform: rotate(-180deg);

    }

}







#home, #chisiamo, #prodotti, #retrofit, #servizi, iframe {



    width: 100%;



}







iframe{



    height: 100%;



}







.par {



    margin-bottom: 8vh;



    width: 100%;



    position: relative;



    z-index: 10;



    padding: 3vh 5vw !important;



    /*padding: 40px calc((100% - 2000px) / 2);*/



}







.parVariant {



    z-index: 9 !important;



}







footer {



    width: 100% !important;



    padding: 7vh 3vw;



    background-color: var(--primary-dark);



    color: var(--text-light);



    border-top: 4px solid var(--accent-color);



    z-index: 100;



}







footer strong {



    color: var(--bg-card);



    font-size: 1.2rem;



    display: block;



    margin-bottom: 12px;



}







footer p {



    color: var(--text-muted);



    font-size: 0.9rem;



    margin-bottom: 8px;



}







footer .grid{



    gap: 30px;



}











/* ==========================================================================



   3. GRID SYSTEM



   ========================================================================== */



.grid {



    width: 100%;



    display: grid;



    gap: 1.5vh;



}



/*



.grid2, .grid3, .grid4 {



    grid-template-columns: 1fr;



}



*/



/* ==========================================================================



   4. COMPONENTI UI INTERATTIVI (BOTTONI, DROPDOWN, CAROUSEL)



   ========================================================================== */



#logo {



    height: 10vh;

    

    max-height: 100px;



    object-fit: contain;



}



#logo:hover{

    cursor:pointer;

}







#buttoncontainer {



    width: fit-content;



}







#scroll-ind-c{



    width: fit-content;



    position: relative;



}







#scroll-ind-l{



    display: none;



    position: absolute;



    left: -20px;



    top: 15%;







    color: white;



}







#scroll-ind-r{



    display: none;



    position: absolute;



    right: -20px;



    top: 15%;



    color: white;



}









#divimg, #divbtn {



    display: flex;



    align-items: center;



    gap: 50px;



}







#divimg{



    transition: max-height 0.3s ease-out;



    max-height: 20vh;



}







#divbtn {



    gap: 15px;



}







button {



    white-space: nowrap;



    padding: 8px 18px;



    font-family: var(--font-family);



    color: var(--bg-card);



    background-color: var(--accent-color);



    border-radius: 5px;



    border: 2px solid transparent;



    cursor: pointer;



    transition: var(--transition-smooth);



    border: 1px solid transparent;

}



button:hover {

    cursor: pointer;

    background-color: #b74304;

    border: 1px solid #7d7e7c;

}



#divbtn>button {

    background-color: transparent;

    font-weight: 600;

    font-size: 0.95rem;

}



#divbtn>button:hover {

    background-color: var(--bg-overlay);

    border-color: rgba(255, 255, 255, 0.3);

}



#divbtn>button.active {

    background-color: var(--accent-color);

    border-color: var(--accent-color);

    color: var(--bg-card);

}





/* Dropdown Menu e Lingua */



#language {



    appearance: none; 



    width: fit-content;



    min-width: 100px;



    font-family: var(--font-family, sans-serif);



    font-weight: 600;



    font-size: 0.95rem;



    color: var(--bg-card);



    background-color: var(--primary-color); 



    border: none;



    cursor: pointer;



    white-space: nowrap;



    transition: background-color 0.2s ease, border-color 0.2s ease;



}







#languageTxt {



    display: flex;



    justify-content: start;



    align-items: center;



}







#languageTxt img {



    height: 3vh;

    min-height: 25px;

    min-width: 40px;



    border: none;



    border-radius: 3px;



    overflow: hidden;



    object-fit: cover; 



}







.drop-container {



    position: relative;



}







#language > .drop-menu{



    padding: 7%;



}



.drop-menu {



    position: relative;



    box-sizing: border-box;



    width: 100%;



    border: 1px solid var(--border-color);



    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);



    height: fit-content;



    border-radius: 8px;







    z-index: 20;



}







.retrofit-container {



    display: flex;



    flex-direction: column; 



    gap: 10px;



    justify-content: space-between;



}







.retrofit-container .drop-container .drop-menu {



    background-color: var(--bg-card);



}







.drop-menu:hover, .drop-menu:focus {



    background-color: var(--bg-overlay-dark) !important;



    cursor: pointer;



}







#language .drop-menu:hover, #language .drop-menu:focus {



    background-color: var(--bg-overlay);



    border-color: rgba(255, 255, 255, 0.3);



}

.drop-content {

    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    border-radius: 8px;

    border: 1px solid transparent;

    background-color: var(--bg-card);

    z-index: 999;

    overflow: hidden;

    /* Discrete transition for display/overlay + opacity/transform for smoothness */

    display: none;

    opacity: 0;

    transform: translateY(0px);

    transition: 

        display 0.2s allow-discrete,

        opacity 0.2s ease-out,

        transform 0.2s ease-out,

        border-color 0.2s ease-out;

}



.drop-content.open {

    display: block;

    opacity: 1;

    transform: translateY(4px);

    border-color: var(--border-color);

    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);

    

    /* Sets starting point for entry animation when display becomes block */

    @starting-style {

        opacity: 0;

        transform: translateY(0px);

    }

}





@starting-style {



    .drop-content.open {



        height: 0;



    }



}







/* Slider / Carousel */



.carousel-container {



    user-select: none;



    position: relative;



    width: 100%;



    height: 100%;



    overflow: hidden;



    overflow-x: auto;



    cursor: grab;



    user-select: none;



    touch-action: none;



    scroll-behavior: auto !important;



}







@media (pointer:coarse) {



    .carousel-container {



        -webkit-overflow-scrolling: touch;



        touch-action: pan-y pan-x;



    }

    #buttoncontainer {

        scrollbar-color: transparent transparent !important;

    }

    html{

        overscroll-behavior-y: auto !important;

    }

}







.carousel-container:active {



    cursor: grabbing;



}







.carousel-track {



    user-select: none;



    gap: 10px;



    display: flex;



    flex-direction: row;



    width: 100%;



    height: 100%;



    transition: transform 0.7s cubic-bezier(0.77, 0, 0.175, 1);



}







.r-div {



    display: flex;



    flex-direction: column;



    align-items: center;



    justify-content: center;



    border-radius: 8px;



    border: var(--border-dark) solid 1px;



    min-width: 100%;



    gap: 10px;



    overflow: hidden;



}







.r-text {



    width: 100%;



    height: 10vh;



    overflow-y: scroll;



    padding: 10px;



}







.r-img {



    height: 100%;



    border: 0;



    overflow: hidden;



    object-fit: cover;



    object-position: center;



}







.prev { left: 5%; }



.next { right: 5%; }







/* ==========================================================================



   5. CARDS (SCHEDE PRODOTTI)



   ========================================================================== */



.card {



    background-color: var(--bg-card);



    padding: 30px;



    border: 1px solid var(--border-color);



    border-radius: 8px;



    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);



    transition: var(--transition-smooth);



    display: flex;



    flex-direction: column;



    gap: 12px;



    position: relative;



    z-index: 10;



}







.card h3 {



    color: var(--primary-color);



    font-size: 1.25rem;



    margin-bottom: 5px;



}







.card p {



    color: var(--text-muted);



}







.card.hover:hover {



    transform: translateY(-5px);



    border-color: var(--accent-color);



    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);



}







.card.prodotto {



    position: relative;



    padding: 0;



    gap: 0;



}







.card.prodotto h3 {



    height: 100px;



    display: flex;



    text-align: center;



    align-items: center;



    justify-content: center;



    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 



                box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1),



                border-color 0.4s ease;



}







.card.prodotto.expand {



    z-index: 10;



    width: 100%;



    min-height: fit-content;



    top: 0;



}







.card.prodotto.expand:hover {



    transform: none;



}







.simbol-character {



    height: 50px;



    width: 50px;



    border-radius: 50%;



    color: var(--bg-card);



    background-color: var(--accent-color);



    font-weight: bold;



    font-size: 1.1rem;



    display: flex;



    align-items: center;



    justify-content: center;



    margin-bottom: 10px;



}







/* ==========================================================================



   6. ELEMENTI TIPOGRAFICI E TEXT STYLING



   ========================================================================== */



.titolo, .sub-titolo {



    height: 100vh;



    background-color: var(--primary-color);



    color: var(--bg-card);



    text-align: center;



    display: flex;



    flex-direction: column;



    justify-content: center;



    align-items: center;



    padding: 80px 20px;



    background-attachment: scroll;



    background-position: center;



    box-shadow: 0px 2px 10px rgba(26, 54, 93, 0.8);



    background-repeat: no-repeat; 



    background-size: cover;



}







.titolo h1, .sub-titolo h2 {



    font-size: 3rem;



    letter-spacing: 1px;



}







.titolo p, .sub-titolo p {



    max-width: 700px;



    color: var(--text-light);



    font-size: 1.1rem;



}







.text-center {



    text-align: center;



    display: flex;



    justify-content: center;



    flex-direction: column;    



    align-items: center;



    width: 100%;



    padding-left: 10%;



    padding-right: 10%;



}







.text-center h2, .text-center h3 {



    color: var(--primary-color);



    margin-bottom: 15px;



    font-size: 2rem;



}







/* Liste e Punti Evidenziati */



.pointed-text, .pointed-text-double {



    display: flex;



    align-items: center;



    gap: 13px;



    margin-top: 10px;



}







.pointed-text-double {



    display: grid;



    grid-template-columns: 35px auto;



}







.pointed-text-double .title {



    grid-row: 1 / 1;



    grid-column: 2 / 3;



}







.pointed-text-double .text {



    grid-row: 2 / 3;



    grid-column: 2 / 3;



}







.pointer {



    color: var(--bg-card);



    justify-self: start;



    align-self: center;



    background-color: var(--primary-color);



    height: 5px;



    width: 5px;



    min-height: 5px;



    min-width: 5px;



    border-radius: 5px;



    border: 0;



    grid-row: 1 / 2;



    grid-column: 1 / 1;



}







.pointer.num{



    display: flex;  



    align-items: center;



    justify-content: center;



    font-weight: bold !important;



    height: 3vh !important;



    width: 3vh !important;

    

    min-width: 15px;

    

    min-height: 15px;



    max-width: 35px;



    max-height: 35px;

    

    font-size: 2vh;



}



/*



.pointed-text-double .num {



    display: flex;



    align-items: center;



    justify-content: center;



    font-weight: bold !important;



    height: 3vh !important;



    width: 3vh !important;



    max-width: 30px;



    max-height: 30px;



}



*/



.pointed-text .pointer {



    /*color: var(--accent-color);*/



    font-weight: bold;



    font-size: 0.8rem;



    line-height: 1;



}







/* Badge ed Evoluzioni */



.rbase, .revoluta {



    display: flex;



    align-items: center;



    justify-content: center;



    height: 20px;



    width: 20px;



    min-width: 20px;



    border-radius: 50px;



}







.rbase {



    color: var(--accent-color);



    background-color: var(--primary-color);



    border: 0;



}







.base {



    z-index: 12;



}







.base:hover {



    transform: scale(1.02) !important;



    box-shadow: 0 0 5px -1px var(--accent-color) !important;



}







.revoluta {



    color: var(--text-main) !important;



    background-color: var(--gold);



}







.evoluta, .base {



    justify-content: space-between;



    flex-grow: 1;



}







.evoluta {



    z-index: 11;



    border: 2px solid var(--gold);



}







.evoluta:hover {



    transform: scale(1.02);



    box-shadow: 0 0 15px -1px var(--gold);



}







/* ==========================================================================



   7. FORM DI CONTATTO



   ========================================================================== */



#contact-form, #form-submit {



    display: flex;



    flex-direction: column;



    gap: 3.5vh;



}







#contact-form {



    padding-left: 5%;



    padding-right: 5%;



}







.checkbox{



    display: flex; gap: 1vw; align-items: center;



}







#contact-form .grid {



    padding: 0;



    margin: 0;



    width: 100%;



    gap: 3.5vh;



}



#form-grid{



    padding: 0;



    margin: 0;



    width: 100%;



}



.text-input{



    display: flex;



    flex-direction: column;



    gap: 2vh;



}











.span-2 {



    grid-column-end: span 2;



}















.text-form {

    padding: 10px;

    background-color: var(--bg-light);

    border: transparent solid 1px;

    border-bottom: var(--accent-color) solid 1px;

    color: var(--text-main);

    transition: all 0.2s ease-in;

    font-family: var(--font-family);

    font-size: medium;



}







.text-form:hover {

    background-color: var(--bg-card);

    transform: scale(1.01);



}







.text-form:focus, .text-form:active {



    transform: scale(1.0);



    outline: none;



    transition: all 0.2s ease-in;



    background-color: var(--border-color);



    border: var(--border-color) solid 1px;



}







input[type="checkbox"] {



    accent-color: #3498db; /* Cambia il colore del quadratino quando è spuntato */



    transform: scale(1.5);  /* Opzionale: per ingrandire la checkbox */



    cursor: pointer;



    align-self: center; /* or baseline */



}











form .grid.grid2{



    height: 100%;



}







#message {



    resize: none;



    height: 300px;



}







#btn-form {



    transition: all 0.2s ease-in;



    width: fit-content;



    border-radius: 8px;



    padding: 10px;



    background-color: var(--accent-hover);



    border: none;



    color: var(--bg-card);



}







#btn-form:hover {



    background-color: var(--text-muted);



    transform: scale(1.02);



    cursor: pointer;



}







#btn-form:active {



    transition: all 0.1s ease-in;



    background-color: var(--border-dark);



}







.checkbox-text{



    line-height: 1;



}







.privacy-text{



    text-decoration: underline;



}







.privacy-text:hover {



    color: var(--text-muted);



    cursor: pointer;



}







/* ==========================================================================



   8. SEZIONI SPECIFICHE (PRODOTTI / STORY / RESULTS BOX)



   ========================================================================== */







._prodotti_ {



    margin-top: 100px;



    position: relative;



    min-height: 400px;



}







.bg1{

    background-image: linear-gradient(to bottom, rgba(26, 54, 93, 0.8), rgba(26, 54, 93, 0.90)), url(../../content/it/retrofitEvolute/1/Avvolgitrice.png) !important;

}



.bg2{

    background-image: linear-gradient(to bottom, rgba(26, 54, 93, 0.7), rgba(26, 54, 93, 0.90)), url(../img/azienda.jpeg) !important;

}



.bg3{

    background-image: linear-gradient(to bottom, rgba(26, 54, 93, 0.7), rgba(26, 54, 93, 0.90)), url(../img/revamping.png) !important;

}



.bg4{

    background-image: linear-gradient(to bottom, rgba(26, 54, 93, 0.7), rgba(26, 54, 93, 0.90)), url(../img/servizi.png) !important;

}



#prodotti .sub-titolo {



    background-image: linear-gradient(to bottom, rgba(26, 54, 93, 0.8), rgba(26, 54, 93, 0.90)), url(../img/explode.png) !important;







    /*background-image: linear-gradient(to bottom, rgba(125, 126, 124, 0.8), rgba(125, 126, 124, 0.90)), url(../img/explode.png) !important;*/



}







#chisiamo .sub-titolo {



    background-image: linear-gradient(to bottom, rgba(26, 54, 93, 0.7), rgba(26, 54, 93, 0.90)), url(../img/azienda2.jpeg) !important;



    /*background-image: linear-gradient(to bottom, rgba(125, 126, 124, 0.7), rgba(125, 126, 124, 0.90)), url(../img/azienda.jpeg) !important;*/



}







#retrofit .sub-titolo {



    background-image: linear-gradient(to bottom, rgba(26, 54, 93, 0.7), rgba(26, 54, 93, 0.90)), url(../img/revamping.png) !important;



}







#servizi .sub-titolo {



    background-image: linear-gradient(to bottom, rgba(26, 54, 93, 0.7), rgba(26, 54, 93, 0.90)), url(../img/servizi.png) !important;



}







#contatti .sub-titolo {



    background-image: linear-gradient(to bottom, rgba(26, 54, 93, 0.7), rgba(26, 54, 93, 0.90)), url(../img/contattaci.png) !important;



}







.storyimg {



    height: 300px;



    border: 0;



    shape-outside: url(web/img/azplaceholder.jpg);



    border-radius: 50%;



}







.circle {



    width: 200px;



    height: 200px;



    float: left;



    border-radius: 50%;



    shape-outside: circle();



    object-fit: cover;



    object-position: center;



    overflow: hidden;



    margin: 20px;



}







/* Scatola dei Risultati */



.results-box {



    margin-top: 0;



    width: 100%;



    background: var(--bg-light);



    color: var(--text-main);



    border-radius: 8px;



    position: relative;



    display: none;



    max-height: fit-content(500px);



    overflow: hidden;



    padding: 0 10px;



}







.results-box.open {



    display: grid;



    max-height: fit-content;



    margin-top: 15px;



    padding: 15px 10px;



    border-top: 2px solid var(--accent-color);



}







.results-box.open .grid2 > img,



.results-box.open .grid2 > * {



    display: block;



    width: 100%;



}







.results-box p {



    color: var(--text-muted);



    font-size: 0.95rem;



    line-height: 1.5;



    margin: 0;



}







/* Carousel interno alla Results Box */



.results-box .carousel-container {



    overflow-x: scroll;



    overflow-y: hidden;



    width: 100%;



    border: 2px solid var(--border-dark);



    border-top-left-radius:8px ;



    border-top-right-radius:8px ;



    scroll-behavior: smooth;



    -webkit-overflow-scrolling: touch;



}







.results-box .carousel-track {



    display: flex;



    gap: 15px; 



    width: fit-content;



    padding: 15px;



}







.results-box .grid.grid2 {



    flex-shrink: 0;



    min-width: 0 !important;



    height: 100%;



    width: 70vw;



    max-width: 500px;



    margin: 0; 



    display: grid !important;



    grid-template-rows: auto 1fr;



    grid-template-columns: 1fr !important;



    border: 1px solid var(--border-color);



    border-radius: 4px;



    overflow: hidden;



    box-shadow: 0 2px 4px rgba(0,0,0,0.1);



    padding: 0;



}







.results-box .grid.grid2 img {



    height: 100%;



    object-fit: cover;



    object-position: center;



}







.img-container {



    display: flex !important;



    justify-content: center;



    border-bottom: 1px solid var(--border-color);



    overflow: hidden;



    align-items: center;



    background-color: var(--bg-card);



    height: 50vh;



    max-height: 50vh;



    width: 100%;



    



  pointer-events: none;



}







.img-container > img{



    /*touch-action: pan-y;*/



    -webkit-user-select: none;



  -khtml-user-select: none;



  -moz-user-select: none;



  -o-user-select: none;



  user-select: none;



  -webkit-user-drag: none;



  pointer-events: none;



}







.results-box .grid.grid2 p {



    width: 100%;



    height: 100%;



    margin: 0;



    padding: 10px;



    font-size: 0.9em;



    background-color: var(--bg-card);



    text-align: left;



}







.results-box .grid.grid2 p:last-child {



    padding-top: 5px;



}







/* ==========================================================================



   9. CORE ANIMATIONS



   ========================================================================== */



@keyframes fromtop {



    from {



       transform: translateY(-100%);



       opacity: 0;



    }



    to {



       transform: translateY(0);



       opacity: 1;



    }



}







@keyframes fadein {



    from { opacity: 0; }



    50% { opacity: 1; }



}







@keyframes frombottom {



    from { transform: translateY(100%); }



    20% { transform: translateY(0); }



}







/* ==========================================================================



   10. MEDIA QUERIES (RESPONSIVENESS)



   ========================================================================== */



@media (min-width: 768px) {



    .grid2, .grid3, .grid4 { 



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



    }



}







@media (min-width: 425px){



    :root,input,textarea,.servizihome{



        font-size: x-small !important;



    }







}







@media (min-width: 768px){



    :root,input,textarea,.servizihome{



        font-size: small !important;



    }







}







@media (min-width: 1024px) {



    .grid3 { grid-template-columns: repeat(3, 1fr); }



    .grid4 { grid-template-columns: repeat(4, 1fr); }



}







@media (min-width: 1440px){



    :root,input,textarea,.servizihome{



        font-size: large !important;



    }







    

    #language {

        width: 8vw;

        max-width: 150px;

    }



    .simbol-character {



        height: 8vh;



        width: 8vh;



    }



}







@media (min-width: 2000px){



    :root,input,textarea,.servizihome{



        font-size: x-large !important;



    }



    header{



        padding: 1% 2%;



    }



    .simbol-character {



        height: 6vh;



        width: 6vh;



    }



    input[type="checkbox"]{



        transform: scale(2.5);



    }



}







@media (min-width: 2400px){



    #Main,input,textarea,.servizihome{



        font-size: xx-large !important;



    }



    



}







@media (max-width: 768px) {

    

    #logo{

        max-height: 60px;

    }



    #buttoncontainer { 



        overflow: hidden; 



        overflow-x: scroll; 



        width: 100%;

        

        scrollbar-color: #888 transparent;

        

        scrollbar-width: thin;

        scrollbar-gutter: stable;



    }



    #scroll-ind-c{



        width: 100%;



        display: flex;



        align-items: center;



        justify-content: center;



    }



    #scroll-ind-r{



        display: inline;



    }



    #scroll-ind-l{



        display: inline;



    }



    #buttoncontainer::-webkit-scrollbar:hover { 



        cursor: pointer; 



    }



    .pointed-text-double .pointer { 



        display: none !important; 



    }







    .pointed-text-double {



        display: flex !important;



        flex-direction: column !important;



        align-items: start !important;



    }



    .checkbox{



        gap: 8px;



    }



}







@media (max-width: 600px){



    .no-img{



        display: none;



    }



    .span-2 { 



        grid-column-end: span 1 !important; 



    }



    .flex-row{



        flex-direction: column;



        gap: 5vh;



    }



    .title-container div{



        flex-direction: column;



    }







}







@media (max-width: 1024px) {



    header { 



        flex-direction: column;



        gap: 10px; 



    }



    #divimg{



        width: 100%;



        justify-content: space-between;



        gap: 0;



    }



    .titolo title, .sub-titolo h2 { 



        font-size: 2rem !important; 



    }



    .par { 



        padding-left: 8px; 



        padding-right: 8px; 



    }



    .grid { 



        padding: 0; 



    }



}







@media (max-width: 1220px) {



    .carousel-track .grid.grid2 { grid-template-columns: 1fr !important; }



}







@media (max-width: 1400px) {



    .results-box.open .grid2 { grid-template-columns: 1fr; }



    .r-text { height: 15vh; }



}







/* ==========================================================================



   11. CSS PER LA PAGINA PRODOTTI



   ========================================================================== */



.grid.grid2.table {



    height: auto !important;



    gap: 0;



    grid-template-columns: auto;



    width: 100%;



}







.product-container {



    position: relative !important;



    display: flex !important; 



    align-items: flex-start !important;



    min-width: 0 !important;



}







.table-container.open {



    transition: all 0.2s ease-in-out;



    display: flex;



    flex-direction: column;



    justify-content: flex-start;



}







.table-container {



    transition: all 0.2s ease-in-out;



    display: none;



    overflow-y: scroll;



    width: 100%;



    height: 0;



}







.showtable {



    color: var(--text-main);



}







.card.hover-alt:hover {



    border-color: var(--accent-color);



    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);



}







#termOfService:hover {



    cursor: pointer;



}











.retrofit-container .drop-menu{



    padding: 2%;



}







#retrofitB,#retrofitE{



    height: fit-content;



}



.title-container{



    display: flex;



    flex-direction: column;



    align-items: center;



    justify-content: center;



    gap: 5vh;



    z-index: 10;

}







#divis-machine{



color: var(--accent-color);



text-shadow: 1px 1px 5px #1a202c;



}







.flex-row{



    display: flex;



    justify-content: space-evenly;



    margin-top: 5%;



}







.invisible{



    display: none !important;



}







#cookieContainer{

    

    position:sticky;



    bottom: 0vh;



    height: 100vh;



    width: 100%;



    margin-top: -100vh;



    z-index: 9999;



    display: flex;



    align-items: flex-end;



    justify-content: center;



    background-color:rgb(26, 32, 44,0.8);



}







.cookie-banner{

    

    z-index: 9999;



    width: 100%;



    min-width: fit-content;



    background-color: #f7fafc;



    padding: 1.5vh;



    -webkit-text-size-adjust: none;



    text-size-adjust: none;



    font-size: 2vh !important;



    display: flex;



    flex-direction: column;



    gap: 1.5vh;



}







.cookie-buttons{



    display: flex;



    gap: 1.5vw;



}







.cookie-btn{



    color:#f7fafc;



    background-color: #e25304;



    height: 5vh;



    width: fit-content;



    padding: 0;



    padding-left: 2vw;



    padding-right: 2vw;



    font-size: 2vh !important;



    transition: none !important;



    border-radius: 2vh;



}







.cookie-btn:hover{



    background-color: #b74304;



    color:#dadbdc;



}







#map{



    width: 100%;



    height: 50vh;



}







#map img{



    width: 100%;



    height: 100%;



    object-fit: cover;



    overflow: hidden;



    -webkit-user-select: none;



    -khtml-user-select: none;



    -moz-user-select: none;



    -o-user-select: none;



    user-select: none;



    -webkit-user-drag: none;



    position: relative;



}







#map:hover{



    cursor: pointer;



    .popup-box{



        display: block;



    }



}







/* 1. Make the main area act as an anchor for the popup */











/* 2. Hide the popup box by default */



.popup-box {



  display: none;



  position: absolute;



  bottom: 0; /* Places the popup above the text */



  left: 50%;



  transform: translateX(-50%);



  background-color: #333;



  color: #fff;



  padding: 8px;



  border-radius: 5px;



  width: 150px;



  text-align: center;



}







#cookie-privacy{



    display: none;



    height: 40vh;



    overflow-y: scroll;



    background-color:#dadbdc;



    border-radius: 1.5vh;



    border: none;



}



#cookie-privacy.show{



    display: block;



}



#ToMachine {

    background-color: var(--accent-color);

    border-radius: 5px;

    border: none;

    display: flex;

    align-items: center;

    justify-content: center;

    height: 7vh;

    width: 100%;

    max-width: 800px;

    min-width: fit-content;

    min-height: fit-content;

    padding: 10px;

    color: var(--bg-light);

    text-decoration: none;

    overflow: hidden;

    transition: background-color 0.4s ease;

}



#ToMachine:hover {

    cursor: pointer;

    background-color: var(--primary-color);

    border: 1px solid var(--primary-dark);

}



#language .drop-content button {

    white-space: nowrap;

    padding: 8px 18px;

    font-family: var(--font-family);

    font-weight: 600;

    font-size: 0.95rem;

    color: var(--bg-card);

    background-color: transparent;

    border-radius: 5px;

    border: 2px solid transparent;

    cursor: pointer;

    transition: var(--transition-smooth);

}



#language .drop-content button:hover {

    background-color: var(--bg-overlay);

    border-color: rgba(255, 255, 255, 0.3);

}



.showtable{

    background-color: transparent;

    font-weight: 600;

}



.showtable:hover{

    background-color: transparent;

    border-color:var(--border-dark);

    border-radius:0;

}



html {

  /* Sintassi: <colore-barra> <colore-sfondo> */

  scrollbar-color: #888 transparent;

  /* Può essere: auto, thin (sottile), o none (nascondi) */

  scrollbar-width: thin;

  scrollbar-gutter: stable;

    overscroll-behavior-y: none;

}



#totop {

    position: fixed;

    bottom: 20px;

    right: 20px;

    height: 46px; /* Arrotondato leggermente per bilanciare l'ombra */

    width: 46px;

    

    /* Usa la sfumatura arancione definita nelle tue variabili */

    background: var(--accent-color);

    

    /* Il testo/icona interno sarà chiaro per fare contrasto con l'arancione */

    color: var(--bg-card); 

    

    border: none;

    border-radius: 50%;

    z-index: 100;

    cursor: pointer;

    

    /* Ombra morbida basata sul colore scuro principale del tuo sito */

    box-shadow: 0 4px 14px rgba(51, 51, 51, 0.3);

    

    display: flex;

    align-items: center;

    justify-content: center;

    

    opacity: 0;

    pointer-events: none;

    transform: translateY(10px); /* Parte leggermente più in basso per l'effetto comparsa */

    transition: var(--transition-smooth); /* Sfrutta la tua variabile per le transizioni */

    -webkit-tap-highlight-color: transparent;

}



#totop.show {

    opacity: 1;

    pointer-events: auto;

    transform: translateY(0);

}



#totop:hover {

    /* Si sposta leggermente verso l'alto e l'ombra si fa più profonda */

    transform: translateY(-3px) scale(1.03); 

    box-shadow: 0 6px 20px rgba(51, 51, 51, 0.4);

    

    /* Rende il gradiente leggermente più luminoso al passaggio del mouse */

    filter: brightness(1.1); 

}



.servizihome {

    width: 100%;

    height: 100%;

    padding: 8px 18px;

    min-width: fit-content;

    border: none;

    overflow: hidden;

    position: relative;

    display: block;

    text-overflow: ellipsis;

    white-space: normal;

}



.servizihome:hover {

    border: none;



    .servizihome-cover {

        transform: translateX(-15%) translateY(-30%) rotate(20deg);

    }

}



.servizihome-cover {

    display: flex;

    align-items: center;

    justify-content: center;

    position: absolute;

    height: 1000px;

    width: 200%;

    min-width: 500px;

    background-color: var(--primary-color);

    top: -150%;

    left: 0;

    transform: translateX(100%) translateY(-30%) rotate(20deg);

    transition: transform 0.4s ease;

    z-index: 1;

}



.servizihome h4 {

    position: relative;

    z-index: 2;

}



.titolo{

    position: relative;

}



.title-hiddenLayer{

    position: absolute;

    width: 100%;

    height: 100%;

    opacity: 0;

    background-attachment: scroll;



    background-position: center;



    background-repeat: no-repeat; 



    background-size: cover;

    transition: opacity ease-in-out 1s;

}



.button-titolo {

    width: 80%;

    max-width: 400px;

    display: flex;

    align-items: center;

    justify-content: center; /* Centra il testo naturalmente */

    position: relative;      /* Fa da punto di riferimento per la freccia */

    cursor: pointer;

    padding: 10px 20px;     /* Evita che la freccia sia visibile fuori dal bottone prima dell'hover */

}



.button-titolo:hover {

    border: 1px solid transparent;

}



/* IL TESTO: Pulito, senza percentuali rigide, si centra da solo */

.testob-titolo {

    margin: 0;

    padding: 0;

    transition: transform 0.4s ease; /* Transizione fluida se vuoi che si sposti all'hover */

}



/* LA FRECCIA: Posizionata a destra, invisibile e spostata all'inizio */

.freccia-titolo {

    margin: 0;

    padding: 0;

    position: absolute;

    right: 30px;             /* Allineata al bordo destro del bottone */

    opacity: 0;

    transform: translateX(-20px); /* Spostata verso destra, fuori visuale */

    transition: opacity 0.4s ease, transform 0.4s ease;

}



/* --- EFFETTI ALL'HOVER --- */



/* La freccia compare e si sposta verso sinistra nella sua posizione */

.button-titolo:hover .freccia-titolo {

    opacity: 1;

    transform: translateX(0);

}



/* FACOLTATIVO: Sposta leggermente il testo a sinistra all'hover per non farlo coprire dalla freccia */

.button-titolo:hover .testob-titolo {

    transform: translateX(-5vw); 

}



/* --- MEDIA QUERY (Molto più semplice ora) --- */

@media (max-width: 424px) {

    .button-titolo {

        /* Se serve, puoi stringere il padding sui telefoni piccoli */

        padding: 10px 15px; 

    }

    .freccia-titolo {

        right: 10px; /* Avvicina la freccia al bordo sui display piccoli */

    }

}