/*
==================================================
SMITECH WEBSITE
FILE      : ai-solutions.css
SECTION   : AI Solutions
PURPOSE   : AI Service Cards Design
==================================================
*/


.ai-solutions{

padding:80px 0;

background:#f8fafc;

}


.ai-grid{

display:grid;

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

gap:25px;

margin-top:40px;

}


.ai-card{

background:#ffffff;

padding:30px;

border-radius:18px;

box-shadow:0 10px 30px rgba(0,0,0,0.08);

transition:all .3s ease;

border:1px solid #e5e7eb;

}


.ai-card:hover{

transform:translateY(-8px);

box-shadow:0 18px 40px rgba(0,0,0,0.15);

}


.ai-icon{

width:65px;

height:65px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#2563eb;

color:#ffffff;

font-size:28px;

margin-bottom:20px;

}


.ai-card h3{

font-size:22px;

margin-bottom:15px;

color:#111827;

}


.ai-card p{

color:#64748b;

line-height:1.7;

font-size:15px;

}


.ai-card ul{

padding-left:18px;

margin-top:20px;

}


.ai-card ul li{

margin-bottom:8px;

color:#374151;

font-size:14px;

}



/* ==========================
   TABLET
========================== */


@media(max-width:1100px){

.ai-grid{

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

}

}



/* ==========================
   MOBILE
========================== */


@media(max-width:600px){

.ai-solutions{

padding:50px 0;

}


.ai-grid{

grid-template-columns:1fr;

}


.ai-card{

padding:25px;

}

}