/*
==================================================
SMITECH WEBSITE
FILE      : products.css
SECTION   : Products & Platforms
PURPOSE   : Product Cards Design
==================================================
*/


.our-products{

padding:80px 0;

background:#ffffff;

}



.products-grid{

display:grid;

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

gap:25px;

margin-top:40px;

}



.product-card{

background:#ffffff;

padding:30px;

border-radius:18px;

border:1px solid #e5e7eb;

box-shadow:0 10px 25px rgba(0,0,0,.06);

transition:.3s ease;

position:relative;

}



.product-card:hover{

transform:translateY(-8px);

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

}



/* Featured CRM Product */

.featured-product{

border:2px solid #2563eb;

background:linear-gradient(
135deg,
#ffffff,
#eff6ff
);

}



.product-badge{

position:absolute;

top:18px;

right:18px;

background:#2563eb;

color:#fff;

font-size:12px;

padding:6px 12px;

border-radius:20px;

font-weight:600;

}



.product-card h3{

font-size:22px;

color:#111827;

margin-bottom:15px;

}



.product-card p{

color:#64748b;

line-height:1.7;

font-size:15px;

}



.product-card ul{

padding-left:18px;

margin:20px 0;

}



.product-card ul li{

margin-bottom:8px;

color:#374151;

font-size:14px;

}



.product-platform{

font-weight:600;

color:#2563eb !important;

margin-top:15px;

}



.product-status{

display:inline-block;

padding:7px 15px;

border-radius:20px;

font-size:13px;

font-weight:600;

margin-top:15px;

}



.product-status.delivered{

background:#dcfce7;

color:#166534;

}



.products-cta{

text-align:center;

margin-top:45px;

}




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

@media(max-width:1100px){

.products-grid{

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

}

}



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

@media(max-width:600px){

.our-products{

padding:50px 0;

}


.products-grid{

grid-template-columns:1fr;

}


.product-card{

padding:25px;

}

.product-card h3{

font-size:20px;

}

}