Sevices css

/* General container */
.page-container {
background-color: #ffffff;
padding: 40px 0;
}

.service-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 30px;
}

/* Card styling /
.service-card {
position: relative;
width: 320px;
/ border-radius: 12px; */
overflow: hidden;
cursor: pointer;
background-color: rgb(255, 255, 255);
transition: transform 0.4s ease;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
border-radius:5px;
}

.service-card:hover {
transform: scale(1.05);
}

/* Hover animation with pseudo element /
.service-card::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0%;
/ height: 0%; /
background-color: #17144b;
z-index: 0;
transition: width 0.5s ease, height 0.5s ease;
transform: translate(-50%, -50%);
/ border-radius: 12px; */
}

.service-card:hover::before {
width: 100%;
height: 100%;
}

/* Content inside card */
.service-content {
position: relative;
z-index: 1;
padding: 20px;
display: flex;
gap: 15px;
align-items: flex-start;
color: #0a1c4d;
background-color: transparent;
transition: color 0.4s ease;
}

.icon-box {
font-size: 28px;
background-color: #0078d4;
color: white;
padding: 10px;
border-radius: 10px;
transition: background-color 0.4s ease, color 0.4s ease;
}

/* Text styling */
.text-content {
flex: 1;
}

.service-title {
font-size: 18px;
font-weight: bold;
margin: 0;
color: #0a1c4d;
text-decoration: underline;
transition: color 0.4s ease;
}

.service-desc {
font-size: 14px;
margin: 10px 0;
color: #0a1c4d;
transition: color 0.4s ease;
}

.service-link {
font-weight: bold;
color: #0078d4;
text-decoration: none;
display: inline-block;
margin-top: 10px;
transition: color 0.4s ease;
}

/* Hover color adjustments */
.service-card:hover .service-content,
.service-card:hover .service-desc,
.service-card:hover .service-title {
color: white;
}

.service-card:hover .icon-box {
background-color: white;
color: #0a1c4d;
}

.service-card:hover .service-link {
color: rgb(0, 255, 251);
}