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


.services{

padding:120px 0;

background:#f7fafc;

}



/* HEADER */

.section-header{

max-width:750px;

margin:auto;

text-align:center;

margin-bottom:70px;

}


.section-header span{

color:#0066ff;

font-size:14px;

font-weight:700;

letter-spacing:4px;

}


.section-header h2{

margin-top:20px;

font-size:45px;

line-height:1.2;

font-weight:800;

color:#031b34;

}



.section-header p{

margin-top:25px;

font-size:17px;

line-height:1.8;

color:#64748b;

}




/* GRID */

.services-grid{


display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;


}




/* CARD */


.service-card{


background:white;

padding:40px 35px;

border-radius:30px;

position:relative;

overflow:hidden;

box-shadow:

0 15px 40px rgba(0,0,0,.06);

transition:.45s;


}



.service-card::before{


content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:

linear-gradient(

90deg,

#0066ff,

#00d4ff

);


transform:scaleX(0);

transition:.4s;

}



.service-card:hover::before{


transform:scaleX(1);

}




.service-card:hover{


transform:translateY(-15px);

box-shadow:

0 30px 70px rgba(0,100,255,.15);

}




/* ICON */


.service-icon{


width:75px;

height:75px;

border-radius:25px;

background:

linear-gradient(

135deg,

#0066ff,

#00d4ff

);


display:flex;

align-items:center;

justify-content:center;

color:white;

font-size:30px;

margin-bottom:30px;

transition:.4s;

}




.service-card:hover .service-icon{


transform:rotate(10deg) scale(1.1);

}





.service-card h3{


font-size:25px;

font-weight:700;

color:#031b34;

margin-bottom:15px;

}



.service-card p{


font-size:15px;

line-height:1.8;

color:#64748b;

margin-bottom:25px;

}



.service-card a{


color:#0066ff;

font-weight:600;

display:flex;

align-items:center;

gap:10px;

}





/* TABLETTE */

@media(max-width:992px){


.services{

padding:90px 0;

}


.services-grid{


grid-template-columns:

repeat(2,1fr);


}


.section-header h2{


font-size:38px;

}



}




/* MOBILE */

@media(max-width:600px){


.services{


padding:70px 0;

}


.services-grid{


grid-template-columns:1fr;

}


.section-header h2{


font-size:32px;

}


.section-header p{


font-size:15px;

}


.service-card{


padding:30px;

}


}