/* ==========================================================
   INDUSTRIES
========================================================== */

.industries{

    position:relative;

    overflow:hidden;

}

/* ==========================================================
   Background
========================================================== */

.industries::before{

    content:"";

    position:absolute;

    top:-220px;

    right:-180px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:rgba(37,99,235,.08);

    filter:blur(130px);

    pointer-events:none;

}

.industries::after{

    content:"";

    position:absolute;

    left:-200px;

    bottom:-220px;

    width:480px;

    height:480px;

    border-radius:50%;

    background:rgba(6,182,212,.08);

    filter:blur(120px);

    pointer-events:none;

}

/* ==========================================================
   Grid
========================================================== */

.industries-grid{

    display:grid;

    grid-template-columns:

        repeat(

            3,

            minmax(0,1fr)

        );

    gap:2rem;

}

/* ==========================================================
   Card
========================================================== */

.industry-card{

    position:relative;

    padding:2.5rem;

    border-radius:28px;

    background:var(--gradient-card);

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

    backdrop-filter:blur(18px);

    overflow:hidden;

    transition:

        transform .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;

}

.industry-card:hover{

    transform:translateY(-10px);

    border-color:rgba(37,99,235,.35);

    box-shadow:var(--shadow-lg);

}

/* ==========================================================
   Hover Glow
========================================================== */

.industry-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at top right,

            rgba(37,99,235,.18),

            transparent 55%

        );

    opacity:0;

    transition:.35s;

}

.industry-card:hover::before{

    opacity:1;

}

/* ==========================================================
   Icon
========================================================== */

.industry-card img{

    width:64px;

    height:64px;

    object-fit:contain;

    margin-bottom:1.8rem;

    padding:14px;

    border-radius:18px;

    background:rgba(37,99,235,.12);

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

}

/* ==========================================================
   Heading
========================================================== */

.industry-card h3{

    margin-bottom:1rem;

    font-size:1.45rem;

    font-weight:700;

    color:#ffffff;

}

/* ==========================================================
   Text
========================================================== */

.industry-card p{

    color:var(--text-secondary);

    line-height:2;

    font-size:1rem;

}

/* ==========================================================
   Accent Line
========================================================== */

.industry-card::after{

    content:"";

    position:absolute;

    right:0;

    bottom:0;

    width:0;

    height:3px;

    background:var(--gradient-primary);

    transition:.35s;

}

.industry-card:hover::after{

    width:100%;

}

/* ==========================================================
   Reveal Animation
========================================================== */

.industry-card.reveal{

    opacity:0;

    transform:translateY(50px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.industry-card.reveal.active{

    opacity:1;

    transform:none;

}

/* ==========================================================
   Responsive
========================================================== */

@media(max-width:1100px){

    .industries-grid{

        grid-template-columns:

            repeat(

                2,

                1fr

            );

    }

}

@media(max-width:768px){

    .industries-grid{

        grid-template-columns:1fr;

    }

    .industry-card{

        padding:2rem;

    }

    .industry-card img{

        width:56px;

        height:56px;

        padding:12px;

    }

    .industry-card h3{

        font-size:1.3rem;

    }

}

@media(max-width:576px){

    .industry-card{

        padding:1.75rem;

        border-radius:22px;

    }

}