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


.services{

padding:100px 5%;

background:#0f0c29;

}





.section-title{

max-width:700px;

margin:0 auto 60px;

text-align:center;

}



.section-title p{

color:#6c63ff;

font-size:14px;

font-weight:700;

letter-spacing:2px;

margin-bottom:15px;

}



.section-title h2{

font-size:45px;

line-height:1.2;

font-weight:800;

margin-bottom:20px;

}



.section-title span{

color:#bdbdbd;

font-size:17px;

line-height:1.7;

}






/* SERVICE GRID */


.service-container{


max-width:1200px;

margin:auto;


display:grid;

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

gap:30px;


}






/* CARD DESIGN */


.service-card{


padding:35px 30px;


border-radius:30px;


background:

rgba(255,255,255,.08);


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


backdrop-filter:blur(20px);


transition:.5s;


position:relative;

overflow:hidden;


}





.service-card::before{


content:"";

position:absolute;

width:150px;

height:150px;

background:#6c63ff;

filter:blur(80px);

top:-50px;

right:-50px;

opacity:0;

transition:.5s;


}





.service-card:hover::before{

opacity:.6;

}



.service-card:hover{


transform:

translateY(-15px)
rotateX(5deg);


border-color:#6c63ff;


box-shadow:

0 30px 60px rgba(0,0,0,.4);


}





.service-icon{


width:70px;

height:70px;


display:flex;

align-items:center;

justify-content:center;


font-size:35px;


border-radius:20px;


background:

linear-gradient(
135deg,
#6c63ff,
#00d4ff
);


margin-bottom:25px;


}




.service-card h3{


font-size:25px;

margin-bottom:15px;


}




.service-card p{


color:#c5c5c5;

line-height:1.7;

margin-bottom:25px;


}





.service-card a{


text-decoration:none;

color:#6c63ff;

font-weight:600;


}






.service-card a:hover{


color:white;


}