/* ==========================================================
   PREMIUM PRODUCT SHOWCASE V5
========================================================== */

.machine-showcase-v5{

    position:relative;

    background:#F8FAFC;

    overflow:hidden;

}


/*=========================================
HEADER
=========================================*/

.machine-header-v5{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}


/*=========================================
GRID
=========================================*/

.machine-grid-v5{

    display:grid;

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

    gap:32px;

}


/*=========================================
CARD
=========================================*/

.machine-card-v5{

    position:relative;

    border-radius:34px;

    overflow:hidden;

    background:#fff;

    border:1px solid rgba(15,23,42,.05);

    box-shadow:

        0 12px 30px rgba(15,23,42,.05),

        0 28px 70px rgba(15,23,42,.06);

}


/*=========================================
IMAGE AREA
=========================================*/

.machine-image-v5{

    position:relative;

    height:480px;

    overflow:hidden;

    background:#EDF2F7;

}


.machine-image-v5 img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}


/*=========================================
OVERLAY
=========================================*/

.machine-overlay-v5{

    position:absolute;

    inset:0;

    background:linear-gradient(

        180deg,

        rgba(0,0,0,0) 35%,

        rgba(8,14,20,.20) 60%,

        rgba(8,14,20,.88) 100%

    );

}


/*=========================================
CATEGORY CHIP
=========================================*/

.machine-chip-v5{

    position:absolute;

    top:22px;

    left:22px;

    z-index:5;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(255,255,255,.94);

    backdrop-filter:blur(18px);

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

    color:#1D4E89;

    font-size:12px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}


/*=========================================
BOTTOM CONTENT
=========================================*/

.machine-content-v5{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    z-index:5;

    padding:28px;

}


/*=========================================
TITLE
=========================================*/

.machine-content-v5 h3{

    margin:0;

    color:#fff;

    font-size:31px;

    font-weight:700;

    line-height:1.20;

    letter-spacing:-.03em;

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

    max-width:92%;

}


/*=========================================
SMOOTH TRANSITIONS
=========================================*/

.machine-card-v5,

.machine-image-v5,

.machine-image-v5 img,

.machine-chip-v5,

.machine-overlay-v5,

.machine-content-v5{

    transition:

        all .65s cubic-bezier(.22,1,.36,1);

}


/*=========================================================
    PREMIUM HOVER EFFECT
=========================================================*/

.machine-card-v5{

    cursor:pointer;

    transform:translateY(0);

    will-change:transform;

}

.machine-card-v5:hover{

    transform:
        translateY(-14px)
        scale(1.015);

    box-shadow:

        0 20px 45px rgba(15,23,42,.10),

        0 40px 90px rgba(15,23,42,.12),

        0 80px 140px rgba(15,23,42,.08);

}


/*==================================================
IMAGE ZOOM
==================================================*/

.machine-card-v5:hover img{

    transform:
        scale(1.08);

}


/*==================================================
OVERLAY
==================================================*/

.machine-card-v5:hover .machine-overlay-v5{

    background:

    linear-gradient(

        180deg,

        rgba(0,0,0,0) 25%,

        rgba(8,14,20,.30) 55%,

        rgba(8,14,20,.95) 100%

    );

}


/*==================================================
CHIP
==================================================*/

.machine-card-v5:hover .machine-chip-v5{

    background:#ffffff;

    color:#1D4E89;

    transform:
        translateY(-2px);

}


/*==================================================
TITLE
==================================================*/

.machine-content-v5 h3{

    transition:

        transform .6s cubic-bezier(.22,1,.36,1),

        opacity .6s cubic-bezier(.22,1,.36,1);

}

.machine-card-v5:hover h3{

    transform:translateY(-4px);

}


/*==================================================
SHINE EFFECT
==================================================*/

.machine-card-v5::before{

    content:"";

    position:absolute;

    top:0;

    left:-140%;

    width:60%;

    height:100%;

    background:

    linear-gradient(

        110deg,

        transparent,

        rgba(255,255,255,.28),

        transparent

    );

    transform:skewX(-25deg);

    transition:1.2s;

    z-index:8;

}

.machine-card-v5:hover::before{

    left:150%;

}


/*==================================================
BORDER GLOW
==================================================*/

.machine-card-v5::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:34px;

    border:1px solid rgba(255,255,255,.08);

    pointer-events:none;

    transition:.6s;

}

.machine-card-v5:hover::after{

    border-color:

    rgba(212,175,55,.35);

}


/*==================================================
IMAGE SATURATION
==================================================*/

.machine-image-v5 img{

    filter:

    saturate(1)

    contrast(1);

}

.machine-card-v5:hover img{

    filter:

    saturate(1.08)

    contrast(1.04);

}


/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1200px){

.machine-grid-v5{

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

gap:28px;

}

.machine-image-v5{

height:430px;

}

.machine-content-v5 h3{

font-size:28px;

}

}



@media(max-width:992px){

.machine-image-v5{

height:390px;

}

.machine-content-v5{

padding:24px;

}

.machine-content-v5 h3{

font-size:24px;

}

}



@media(max-width:768px){

.machine-grid-v5{

grid-template-columns:1fr;

gap:24px;

}

.machine-header-v5{

margin-bottom:50px;

}

.machine-image-v5{

height:380px;

}

.machine-content-v5{

padding:22px;

}

.machine-content-v5 h3{

font-size:22px;

line-height:1.35;

max-width:100%;

}

.machine-chip-v5{

top:18px;

left:18px;

padding:8px 15px;

font-size:11px;

}

}



@media(max-width:480px){

.machine-image-v5{

height:340px;

}

.machine-content-v5{

padding:20px;

}

.machine-content-v5 h3{

font-size:20px;

}

.machine-chip-v5{

font-size:10px;

padding:7px 14px;

}

}