/* =====================================================
   SERVICES COMPACT OVERRIDES
   Applied site-wide to all Service/* pages to reduce
   vertical padding and tighten typography so content
   fits above the fold with minimal scrolling.
   ===================================================== */

/* --- Hero --- */
.hero-section {
    padding: 70px 0 32px !important;
    min-height: 0 !important;
}

.hero-section h1 {
    font-size: clamp(1.7rem, 3.2vw, 2.4rem) !important;
    margin-bottom: 10px !important;
}

.hero-badge,
.hero-section .hero-badge {
    padding: 6px 18px !important;
    font-size: 0.72rem !important;
    margin-bottom: 12px !important;
    letter-spacing: 1.2px !important;
}

.hero-subtitle {
    font-size: 1rem !important;
    margin-bottom: 16px !important;
    line-height: 1.5 !important;
}

/* Breadcrumb hidden on all service pages */
.hero-section .breadcrumb,
.hero-section nav.breadcrumb {
    display: none !important;
}

/* --- Generic section spacing (all *-section blocks) --- */
section[class$="-section"],
.content-section,
.rpa-section,
.design-section,
.tech-section,
.expertise-section,
.summary-section,
.branding-section,
.api-section,
.security-section,
.app-dev-section,
.bi-section,
.tools-section,
.services-intro-section,
.services-grid-section,
.why-choose-section,
.staffing-section,
.info-section,
.trial-section {
    padding: 32px 0 !important;
}

/* --- Section headings --- */
.section-title {
    font-size: clamp(1.4rem, 2.8vw, 1.9rem) !important;
    margin-bottom: 12px !important;
    line-height: 1.25 !important;
}

.section-description {
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    margin-bottom: 14px !important;
}

.section-label {
    margin-bottom: 10px !important;
    gap: 10px !important;
}

.label-line {
    width: 28px !important;
    height: 2px !important;
}

.label-text {
    font-size: 0.75rem !important;
    letter-spacing: 1.4px !important;
}

.section-header {
    margin-bottom: 24px !important;
}

.section-subtitle {
    font-size: 0.95rem !important;
}

.section-badge {
    padding: 5px 16px !important;
    font-size: 0.75rem !important;
    margin-bottom: 10px !important;
}

/* --- Feature cards --- */
.feature-list {
    gap: 10px !important;
    margin-top: 14px !important;
}

.feature-item {
    padding: 12px 14px !important;
    border-radius: 10px !important;
    gap: 12px !important;
    border-width: 1px !important;
}

.feature-item:hover {
    transform: none !important;
}

.feature-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
}

.feature-icon i {
    font-size: 0.95rem !important;
}

.feature-content h4 {
    font-size: 0.98rem !important;
    margin-bottom: 3px !important;
}

.feature-content p {
    font-size: 0.85rem !important;
    line-height: 1.45 !important;
}

/* --- Design cards (UX/UI, Mobile, etc.) --- */
.design-content {
    gap: 12px !important;
}

.design-card {
    padding: 14px 16px !important;
    border-radius: 12px !important;
    gap: 14px !important;
    border-width: 1px !important;
}

.design-card:hover {
    transform: none !important;
}

.design-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
}

.design-icon i {
    font-size: 1.2rem !important;
}

.design-text h3 {
    font-size: 1.1rem !important;
    margin-bottom: 2px !important;
}

.design-text h5 {
    font-size: 0.88rem !important;
    margin-bottom: 5px !important;
}

.design-text p {
    font-size: 0.85rem !important;
    line-height: 1.45 !important;
}

/* --- Images --- */
.content-image-wrapper {
    border-radius: 14px !important;
}

.rpa-image {
    max-width: 200px !important;
}

.design-image {
    max-width: 220px !important;
}

/* --- Tech cards / tech grid --- */
.tech-grid {
    margin-top: 20px !important;
}

.tech-card {
    padding: 16px 12px !important;
}

.tech-card i {
    font-size: 2rem !important;
    margin-bottom: 8px !important;
}

.tech-card span {
    font-size: 0.88rem !important;
}

.tech-stack {
    gap: 8px !important;
    margin-top: 14px !important;
}

.tech-badge {
    padding: 6px 14px !important;
    font-size: 0.82rem !important;
}

/* --- CTA --- */
.cta-section {
    padding: 32px 0 !important;
}

.cta-title {
    font-size: clamp(1.4rem, 2.8vw, 2rem) !important;
    margin-bottom: 8px !important;
}

.cta-description {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
}

.btn-cta {
    padding: 11px 26px !important;
    font-size: 0.95rem !important;
    gap: 8px !important;
}

/* --- Services Index grid cards (Service/Index) --- */
.service-card {
    padding: 18px !important;
}

.service-card h3,
.service-card h4 {
    font-size: 1.05rem !important;
    margin-bottom: 6px !important;
}

.service-card p {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
}

/* --- Tighten generic row/column top margins inside sections --- */
.content-section .row + .row,
.rpa-section .row + .row,
.design-section .row + .row {
    margin-top: 18px !important;
}

/* --- Responsive: keep things compact on tablets/mobile too --- */
@media (max-width: 992px) {
    .hero-section {
        padding: 60px 0 26px !important;
    }

    section[class$="-section"],
    .content-section,
    .rpa-section,
    .design-section,
    .tech-section,
    .cta-section,
    .expertise-section,
    .summary-section,
    .branding-section,
    .api-section,
    .security-section,
    .app-dev-section,
    .bi-section,
    .tools-section,
    .services-intro-section,
    .services-grid-section,
    .why-choose-section,
    .staffing-section,
    .info-section,
    .trial-section {
        padding: 26px 0 !important;
    }

    .rpa-content {
        padding-left: 0 !important;
        margin-top: 14px !important;
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding: 55px 0 22px !important;
    }

    .feature-item,
    .design-card {
        padding: 12px !important;
    }
}