/*==================================================
                INDUSTRIAL SOLUTIONS
==================================================*/

.industrial-solutions-page{
    width:100%;
    background:#07111f;
    padding:40px 0 70px;
}

/*==================================================
                PAGE CONTAINER
==================================================*/

.industrial-solutions-page .container{
    max-width:1600px;
    margin:auto;
    padding:0 15px;
}

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

.solutions-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
}

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

.solution-card{

    position:relative;
    overflow:visible;

    height:720px;

    border-radius:18px;

    display:flex;
    align-items:flex-end;

    padding:25px;

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

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    transition:transform .25s ease;

    transform:translateZ(0);

    backface-visibility:hidden;

    will-change:transform;

}

.solution-card::before{

    content:"";

    position:absolute;

    inset:0;

    background: linear-gradient(
to top,
rgba(5,10,18,.75) 0%,
rgba(5,10,18,.35) 45%,
rgba(5,10,18,0) 100%
);

}

.solution-card:hover{
    transform:translateY(-10px);
}
   

}

.solution-overlay{

    position:relative;

    z-index:2;

    width:100%;

}

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

.partner-card{

    background-image:url('/assets/img/solutions/partner.jpg');

}

.control-card{

    background-image:url('/assets/img/solutions/panel-design.jpg');

}

.training-card{

    background:#151515;

}

.engineering-card{

    background:#151515;

}

.support-card{

    background:#151515;

}

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

@media(max-width:1200px){

    .solutions-grid{

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

    }

}

@media(max-width:768px){

    .solutions-grid{

        grid-template-columns:1fr;

    }

    .solution-card{

        height:650px;

    }

}