/* ========================================
   SERVICES PAGE
======================================== */

/* ===== GRID LAYOUT ===== */
.services-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
gap:30px;
padding:60px 40px;
max-width:1100px;
margin:auto;
}

/* ===== CARD DESIGN ===== */
.card{
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 6px 20px rgba(0,0,0,0.08);
text-align:center;
transition:all 0.3s ease;
cursor:pointer;
}

/* ===== HOVER EFFECT ===== */
.card:hover{
transform:translateY(-5px);
box-shadow:0 10px 25px rgba(0,0,0,0.15);

/* Professional blue gradient */
background:linear-gradient(135deg, #1D3557, #457b9d);
color:white;

/* subtle border glow */
border:1px solid rgba(255,255,255,0.2);
}

/* ===== TEXT TRANSITIONS ===== */
.card h3{
margin-bottom:10px;
color:#1D3557;
transition:color 0.3s ease;
}

.card p{
color:#555;
transition:color 0.3s ease;
}

/* Change text color on hover */
.card:hover h3,
.card:hover p{
color:white;
}

/* ===== OPTIONAL: ICON SUPPORT ===== */
.card i{
font-size:32px;
margin-bottom:15px;
display:block;
color:#F77F00;
}

/* ===== MOBILE ===== */
@media (max-width:768px){
.services-grid{
padding:40px 20px;
}

.card{
padding:25px;
}
}