.categories{

padding:120px 0;

background:

linear-gradient(

180deg,

#07131F,

#0B1525

);

}

.categories h2{

    text-align:center;

    font-size:42px;

    margin-bottom:60px;

}

.category-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

}
.card{

    background:linear-gradient(
        180deg,
        #132238,
        #0D1828
    );

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

    border-radius:18px;

    padding:35px;

    transition:.35s;

    overflow:hidden;

    position:relative;

    box-shadow:0 15px 40px rgba(0,0,0,.25);

}
.card::before{

content:"";

position:absolute;

width:220px;

height:220px;

background:var(--primary);

filter:blur(120px);

opacity:.12;

right:-80px;

top:-80px;

transition:.4s;

}

.card:hover{

    transform:translateY(-12px);

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

    box-shadow:

    0 20px 45px rgba(13,110,253,.25);

}
.card:hover::before{

opacity:.35;

}

.icon{

width:80px;

height:80px;

display:flex;

justify-content:center;

align-items:center;

background:#16263B;

border-radius:20px;

font-size:38px;

margin-bottom:25px;

transition:.3s;

}

.card:hover .icon{

transform:rotate(8deg) scale(1.15);

background:var(--primary);

}
.card::after{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:4px;

background:linear-gradient(

90deg,

#0d6efd,

#00c6ff

);

}
.card h3{

font-size:26px;

font-weight:700;

margin-bottom:10px;

}

.card p{

color:#9AA4B2;

line-height:1.8;

font-size:15px;

}

.read-more{

display:inline-block;

margin-top:25px;

color:var(--primary);

font-weight:600;

text-decoration:none;

transition:.3s;

}

.read-more:hover{

letter-spacing:2px;

}