.services-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 5px 0 0 0;}
.banner {margin-bottom: 0 !important;}
.text-content {margin-top: 30px !important;}
.text {max-width: 100% !important;}
.sub-title {display: block; font-size: 1.5625rem; line-height: 140%; color: #222; font-family: "Inter", normal; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; padding: 48px 0 8px 0;}
.text-content__text {-ms-flex: 0 1 100% !important; flex: 0 1 100% !important;} 
.service-card {border-radius: 16px; padding: 16px; border: 2px solid #f4f4f4; box-sizing: border-box; position: relative; cursor: pointer; background-color: #fff; display: block; text-decoration: none; color: #333; transition: transform 0.3s, box-shadow 0.3s;}
.service-card:hover {border: 2px solid #ff5c00; background-color: #fff4f4; transform: translateY(-5px);}
.service-icon {width: 60px; height: 60px; margin-bottom: 15px; background-color: #f0f0f0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #2a7fba; font-size: 24px;}
.service-icon img {border-radius: 0 !important;}
.service-title {display: block; font-size: 16px; font-weight: bold; margin-bottom: 10px; line-height: 120%;}
.service-desc {display: block; font-size: 14px; color: #666; line-height: 130%;}
@media (max-width: 1024px) {
    .services-grid {grid-template-columns: repeat(3, 1fr);} 
}
@media (max-width: 768px) {
    .sub-title {display: block; font-size: 1.2rem; line-height: 140%; color: #222; font-family: "Inter", normal; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; padding: 28px 0 8px 0;}

    .services-grid {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 480px) {
    .services-grid {grid-template-columns: 1fr;}
}