.menu-icon {

    display: none;

    color: #10243e;

}



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

   MAIN

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



main {

    background: #f6f8fa;

    border-top: 1px solid #dce3ea;

}



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

   CONTAINER

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



.container-macoin {

    max-width: 80%;

    margin: 0 auto;

    padding: 3rem 1.5rem;

}



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

   BREADCRUMB

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



.pages {

    display: flex;

    flex-direction: row;

    margin-bottom: 2rem;

    gap: 0.3rem;

    align-items: center;

}



p.namepages,

p.pagemanotcoin {

    margin: 0;

    font-size: 0.9rem;

    color: #7b8794;

    font-family: "Raleway", Arial, sans-serif;

}



i.fa-solid.fa-angle-right {

    color: #7b8794;

    font-size: 0.7rem;

}



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

   INTRO

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



.container-macoin-description {

    margin: 1rem 0;

    padding-bottom: 2.5rem;

    border-bottom: 1px solid #dce3ea;

}



.container-macoins {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

    padding-top: 1.5rem;

}



/* Etichetta categoria */



p.title {

    margin: 0;

    color: #1557d6;

    font-family: "Raleway", Arial, sans-serif;

    font-size: 0.8rem;

    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;

}



/* Titolo principale */



h3.titles {

    margin: 0;

    color: #1557d6;

    font-family: "DM Serif Display", Georgia, serif;

    font-size: clamp(2.5rem, 4vw, 4rem);

    font-weight: 400;

    line-height: 1;

    letter-spacing: -0.025em;

}



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

   INTRO DESCRIPTION

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



.img-des {

    display: flex;

    align-items: center;

    gap: 1.2rem;

}



/* Icona categoria */



.product-icon {

    color: #1f4fd8;

    font-size: 2.5rem;

    flex-shrink: 0;

}



/* Testo descrittivo */



p.description {

    max-width: 760px;

    margin: 1.5rem 0 0;

    color: #637181;

    font-family: "Raleway", Arial, sans-serif;

    font-size: 1rem;

    line-height: 1.8;

    text-align: left;

}



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

   PRODUCTS

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



.container-machine {

    display: flex;

    gap: 2rem;

    width: 100%;

    flex-wrap: wrap;

}



.con-mac {

    width: 300px;

    flex: 0 0 auto;

}



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

   PRODUCT CARD

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



.machine-block {

    overflow: hidden;

    width: 100%;

    position: relative;

    border-radius: clamp(8px, 0.625vw, 24px);

    background: #9ca3af42;

}



.machine-block img {

    width: 100%;

    height: 350px;

    object-fit: contain;

    display: block;

    transition: transform 0.5s ease-in-out;

}



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

   PRODUCT OVERLAY

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



a.amachine {

    display: flex;

    align-items: flex-start;

    gap: clamp(12px, 0.833vw, 72px);



    background: linear-gradient(

        0deg,

        rgba(250, 255, 254, 0.6) -2%,

        rgba(217, 245, 239, 0.6) 58.21%

    );



    backdrop-filter: blur(25px);

    -webkit-backdrop-filter: blur(25px);



    border-radius: clamp(12px, 0.833vw, 64px);



    padding: clamp(12px, 0.833vw, 40px);



    position: absolute;

    bottom: 0;



    overflow: hidden;

}



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

   PRODUCT TITLE

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



h5.name {

    margin: 0;

    color: #1557d6;

    font-family: "DM Serif Display", Georgia, serif;

    font-size: 1.5rem;

    font-weight: 400;

    line-height: 1.1;

}



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

   PRODUCT DESCRIPTION

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



.description-machine {

    height: 0;

    opacity: 0;

    overflow: hidden;

    transition: all 0.5s ease-in-out;

}



p.des {

    color: #45474f;

    font-family: "Raleway", Arial, sans-serif;

    line-height: 1.6;

}



p.detail {

    color: #1f4fd8;

    font-size: 1.3rem;

    font-family: "Raleway", Arial, sans-serif;

    margin-top: 0.5rem;

    transition: all 0.5s ease-in-out;

}



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

   DESKTOP HOVER

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



@media (hover: hover) and (pointer: fine) {



    .machine-block:hover img {

        transform: scale(1.1);

    }



    a:hover {

        transition: all 0.5s ease-in-out;

    }



    .machine-block:hover .description-machine {

        height: auto;

        opacity: 1;

        margin-top: clamp(12px, 0.833vw, 32px);

    }

}



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

   MOBILE

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



@media (max-width: 767px) {



    .container-macoin {

        width: 90%;

        padding: 2.5rem 0;

    }



    .pages {

        margin-bottom: 1.5rem;

    }



    .img-des {

        flex-direction: column;

        gap: 0;

        margin-top: 2rem;

    }



    .product-icon {

        font-size: 2.2rem;

    }



    p.description {

        width: 100%;

        max-width: none;

        margin: 0.5rem 0 0;

        font-size: 0.95rem;

        line-height: 1.7;

    }



    .container-machine {

        justify-content: center;

    }



    .con-mac {

        width: 100%;

        max-width: 360px;

    }



    .machine-block {

        border-radius: 16px;

        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);

        height: 510px;

    }



    a.amachine {

        position: relative;

        padding: 1.2rem;

        transform: none;

        top: -3rem;

    }



    .description-machine {

        height: auto;

        opacity: 1;

        margin-top: 0.8rem;

    }



    .machine-block:active {

        transform: scale(0.98);

        transition: transform 0.15s ease;

    }



    p.title {

        font-size: 0.75rem;

        text-align: left;

    }



    h3.titles {

        font-size: clamp(2.3rem, 10vw, 3rem);

    }



    h5.name {

        font-size: 1.3rem;

    }



    p.des {

        font-size: 1rem;

    }

}



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

   TABLET

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



@media (min-width: 768px) and (max-width: 1024px) {



    .img-des {

        flex-direction: row;

        align-items: center;

        margin-top: 1rem;

    }



    p.description {

        margin: 1rem 0 0;

        max-width: 680px;

    }



    .container-machine {

        flex-wrap: wrap;

    }



    .con-mac {

        flex: 0 0 265px;

    }



    .description-machine {

        height: auto;

        opacity: 1;

        margin-top: 1rem;

    }



    .machine-block img {

        transform: none;

    }



    a.amachine {

        position: relative;

    }

}