/* ===================================
   SERVICES GLASS PRO
   MOBILE FIRST
=================================== */


.services-glass{

position:relative;

overflow:hidden;

padding:80px 20px;

background:

linear-gradient(
145deg,
#040915,
#0b1428
);

color:white;

isolation:isolate;

}




/* BACKGROUND LIGHTS */


.services-bg{

position:absolute;

width:350px;

height:350px;

border-radius:50%;

filter:blur(120px);

opacity:.25;

z-index:-1;

}



.bg-one{

background:#00d9ff;

top:-150px;

left:-120px;

}


.bg-two{

background:#743cff;

bottom:-150px;

right:-120px;

}





.services-container{

max-width:1200px;

margin:auto;

}





/* HEADER */


.services-header{

text-align:center;

max-width:750px;

margin:auto;

}



.services-tag{


display:inline-flex;

padding:10px 18px;

border-radius:50px;


background:

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


border:

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


backdrop-filter:blur(15px);


font-size:.8rem;

letter-spacing:1px;

margin-bottom:25px;


}





.services-header h2{


font-size:

clamp(
2rem,
6vw,
3.5rem
);


line-height:1.1;

margin-bottom:20px;


}



.services-header h2 span{

background:

linear-gradient(
90deg,
#00d9ff,
#7c5cff
);


-webkit-background-clip:text;

color:transparent;


}




.services-header p{


color:

rgba(255,255,255,.65);


line-height:1.7;

font-size:1rem;


}






/* GRID */


.services-grid{


display:grid;


grid-template-columns:1fr;


gap:22px;


margin-top:50px;


}






/* CARDS */


.service-card{


position:relative;


padding:30px;


border-radius:30px;


background:

linear-gradient(
145deg,
rgba(255,255,255,.14),
rgba(255,255,255,.04)
);


border:

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


backdrop-filter:blur(20px);


transition:

transform .45s,
border .45s;


overflow:hidden;


}





.service-card::before{


content:"";


position:absolute;


width:100px;

height:100px;


top:-50px;

right:-50px;


background:#00d9ff;


filter:blur(50px);


opacity:.3;


}





.service-icon{


width:65px;

height:65px;


display:flex;

align-items:center;

justify-content:center;


font-size:32px;


border-radius:22px;


background:

rgba(255,255,255,.1);


margin-bottom:25px;


}





.service-card h3{


font-size:1.35rem;

margin-bottom:15px;


}



.service-card p{


color:

rgba(255,255,255,.65);


line-height:1.7;


font-size:.95rem;


}



.service-card span{


display:inline-block;


margin-top:20px;


padding:8px 15px;


border-radius:30px;


font-size:.8rem;


background:

rgba(0,217,255,.12);


color:#00d9ff;


}





.service-card:hover{


transform:

translateY(-12px);


border-color:

rgba(0,217,255,.4);


}







/* CTA */


.services-action{


text-align:center;

margin-top:50px;


}



.services-action a{


display:inline-flex;


align-items:center;


justify-content:center;


height:60px;


padding:0 35px;


border-radius:20px;


text-decoration:none;


color:white;


font-weight:700;


background:

linear-gradient(
135deg,
#00d9ff,
#006eff
);


box-shadow:

0 20px 40px rgba(0,217,255,.25);


transition:.35s;


}



.services-action a:hover{


transform:translateY(-5px);


}

@media(min-width:768px){
.services-grid{
grid-template-columns:
repeat(2,1fr);
}
}
@media(min-width:1100px){
.services-glass{
padding:120px 40px;
}

.services-grid{
   grid-template-columns:
      repeat(4,1fr);
   }
   .service-card{
      min-height:350px;
   }
}

.reveal{
   opacity:0;
   transform:
   translateY(40px);
   transition:
   all .8s ease;
}


.reveal.active{
   opacity:1;
   transform:
   translateY(0);
}