.services-section{

background:#19272B;

}


.services-grid{

display:grid;

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

gap:30px;

}



.service-card{

padding:35px;

background:

rgba(36,49,53,.65);

border:

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

border-radius:24px;

transition:.4s;

position:relative;

overflow:hidden;

}



.service-card::before{

content:"";

position:absolute;

width:150px;

height:150px;

right:-50px;

top:-50px;

background:

radial-gradient(
circle,
rgba(79,140,255,.25),
transparent 70%
);

opacity:0;

transition:.4s;

}



.service-card:hover{

transform:translateY(-10px);

border-color:

rgba(79,140,255,.5);

}



.service-card:hover::before{

opacity:1;

}



.service-icon{

width:65px;

height:65px;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

background:

rgba(79,140,255,.15);

border-radius:18px;

margin-bottom:25px;

}



.service-card h3{

color:#fff;

font-size:24px;

margin-bottom:15px;

}



.service-card p{

color:#B8C7CC;

line-height:1.7;

font-size:16px;

}

@media(max-width:768px){


.services-grid{

grid-template-columns:1fr;

}


.service-card{

padding:25px;

}


.service-card h3{

font-size:22px;

}

}

/*svg styles*/
.service-icon svg{

width:32px;

height:32px;

fill:none;

stroke:#00E5FF;

stroke-width:1.8;

stroke-linecap:round;

stroke-linejoin:round;

}

/*cardline light*/
.service-card::after{

content:"";

position:absolute;

inset:0;

border-radius:24px;

padding:1px;

background:
linear-gradient(
120deg,
transparent,
#4F8CFF,
transparent
);

-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

opacity:0;

transition:.5s;

}


.service-card:hover::after{

opacity:1;

}

/*hover light sweep*/
.service-card{

overflow:hidden;

}


.service-card::before{

animation:none;

}


.service-card:hover::before{

animation:
serviceGlow 2s infinite;

}


@keyframes serviceGlow{


0%{

transform:translateX(-100%);

}


100%{

transform:translateX(200%);

}


}

/*btn*/
.service-btn{

margin-top:50px;

display:flex;

width:max-content;

margin-left:auto;

margin-right:auto;

}

.service-btn:hover{
    color:#fff;
}