/* ======================
SERVICES
====================== */

.services{

padding:140px 20px;

background:#0b0b0b;

color:white;

display:flex;
justify-content:center;

}

.services-container{

max-width:1200px;
width:100%;

text-align:center;

}

/* título */

.services h2{

font-size:36px;

margin-bottom:10px;

}

.services-subtitle{

opacity:0.7;

margin-bottom:60px;

}

/* grid */

.services-grid{

display:grid;

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

gap:25px;

}

/* card */

.service-card{

position:relative;

background:rgba(255,255,255,0.03);

padding:40px 30px;

border-radius:18px;

border:1px solid rgba(255,255,255,0.05);

overflow:hidden;

transition:0.35s;

}
.services h2{

font-size:38px;

position:relative;

display:inline-block;

margin-bottom:15px;

}

.services h2::after{

content:"";

width:60px;
height:3px;

background:#0086f3;

display:block;

margin:10px auto 0;

}
.service-card::before{

content:"";

position:absolute;

width:200px;
height:200px;

background:#0086f3;

filter:blur(120px);

opacity:0;

top:-50px;
left:-50px;

transition:0.4s;

}
/* hover */

.service-card:hover{

transform:translateY(-10px) scale(1.02);

border-color:#0086f3;

}

.service-card:hover::before{

opacity:0.15;

}

/* ícone */

.service-icon{

width:65px;
height:65px;

display:flex;
align-items:center;
justify-content:center;

background:rgba(0, 47, 255, 0.08);

border-radius:50%;

font-size:28px;

margin:0 auto 20px auto;

border:1px solid rgba(25, 0, 255, 0.2);

transition:0.3s;

}
/* ícone anima */

.service-card:hover .service-icon{

background:#0069be;

color:#000;

transform:scale(1.1);

}

.service-card h3{

font-size:20px;

margin-bottom:12px;

}


/* texto */

.service-card p{

font-size:14px;

opacity:0.7;

line-height:1.6;

color: #cccccc;

}
/* título card */

/* ======================
/* ======================


/* ======================
RESPONSIVO
====================== */

@media (max-width:900px){

.services-grid{

grid-template-columns:1fr 1fr;

}

}

@media (max-width:500px){

.services-grid{

grid-template-columns:1fr;

}


}