/* Shared visual system for Hadaf ICT service pages. */
:root {
    --hadaf-navy: #1a237e;
    --hadaf-blue: #4063f8;
    --hadaf-blue-dark: #2449d8;
    --hadaf-red: #bb000e;
    --hadaf-ink: #172033;
    --hadaf-muted: #596579;
    --hadaf-surface: #f4f6fb;
}

.service-page,
.services-hero-section,
.app-dev-hero-section,
.network-hero-section,
.job-services-hero-section,
.domain-hero,
.homepage-hero {
    color: var(--hadaf-ink);
}

.services-hero-section,
.service-page .hero-section,
.service-page .services-hero-section {
    background: linear-gradient(135deg, var(--hadaf-navy), var(--hadaf-blue)) !important;
}

.service-page .bg-success,
.service-page .bg-info,
.service-page .bg-danger,
.service-page .bg-warning,
.services-hero-section .bg-success,
.services-hero-section .bg-info {
    background-color: var(--hadaf-navy) !important;
}

.service-page .text-success,
.service-page .text-info,
.service-page .text-danger,
.service-page .text-warning,
.services-hero-section .text-success {
    color: var(--hadaf-blue) !important;
}

.service-page .btn-success,
.service-page .btn-info,
.service-page .btn-warning,
.service-page .btn-primary,
.services-hero-section .btn-primary {
    color: #fff;
    background-color: var(--hadaf-navy) !important;
    border-color: var(--hadaf-navy) !important;
}

.service-page .btn-outline-success,
.service-page .btn-outline-info,
.service-page .btn-outline-warning,
.service-page .btn-outline-primary {
    color: var(--hadaf-navy) !important;
    border-color: var(--hadaf-navy) !important;
}

.service-page .btn-outline-success:hover,
.service-page .btn-outline-info:hover,
.service-page .btn-outline-warning:hover,
.service-page .btn-outline-primary:hover {
    color: #fff !important;
    background-color: var(--hadaf-navy) !important;
}

.service-page .card,
.service-page .services-hero-section .card,
.services-hero-section .service-card,
.app-dev-hero-section .stat-card,
.network-hero-section .highlight-item {
    border-radius: 0.85rem;
}

.service-page section[id$="contact-form"],
#contact-form,
#emergency {
    background: var(--hadaf-navy) !important;
    color: #fff;
}

.service-page section[id$="contact-form"] a,
#contact-form a,
#emergency a {
    overflow-wrap: anywhere;
}

.service-page .breadcrumb a,
.services-hero-section a:not(.btn) {
    color: var(--hadaf-navy);
}

/* Shared public service and project header, based on the Job Portal page. */
.service-page-hero {
    background: linear-gradient(135deg, #fff 0%, #f4f7ff 100%) !important;
    border: 0 !important;
    border-bottom: 3px solid var(--hadaf-red) !important;
    border-radius: 0 !important;
    color: var(--hadaf-ink) !important;
    isolation: isolate;
    padding-block: clamp(2rem, 4vw, 3.5rem) !important;
    position: relative;
}

.service-page-hero::before {
    background: radial-gradient(circle, rgba(64, 99, 248, .1), transparent 68%);
    content: "";
    height: min(26rem, 80vw);
    left: -9rem;
    pointer-events: none;
    position: absolute;
    top: -13rem;
    width: min(26rem, 80vw);
    z-index: -1;
}

.service-page-hero h1,
.service-page-hero h2 {
    color: var(--hadaf-blue-dark) !important;
    font-family: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 750;
    letter-spacing: -.035em;
    line-height: 1.15;
}

.service-page-hero h1::after {
    background: var(--hadaf-red);
    border-radius: 2px;
    content: "";
    display: block;
    height: 3px;
    margin: .7rem auto 0;
    width: 48px;
}

.service-page-hero p,
.service-page-hero .text-white,
.service-page-hero .text-white-50 {
    color: var(--hadaf-muted) !important;
}

.service-page-hero .text-primary,
.service-page-hero .text-success,
.service-page-hero .text-info {
    color: var(--hadaf-blue) !important;
}

.service-page-hero .text-warning { color: var(--hadaf-red) !important; }
.service-page-hero .bg-primary { background-color: rgba(64, 99, 248, .1) !important; }
.service-page-hero .btn-primary { background: var(--hadaf-blue) !important; border-color: var(--hadaf-blue) !important; color: #fff !important; }
.service-page-hero .btn-primary:hover { background: var(--hadaf-blue-dark) !important; border-color: var(--hadaf-blue-dark) !important; }
.service-page-hero .btn-light { background: var(--hadaf-blue) !important; border-color: var(--hadaf-blue) !important; color: #fff !important; }
.service-page-hero .btn-outline-light { border-color: var(--hadaf-blue) !important; color: var(--hadaf-blue-dark) !important; }
.service-page-hero .btn-outline-light:hover { background: var(--hadaf-blue) !important; color: #fff !important; }
.service-page-hero .icon-wrapper { background: #fff !important; border: 1px solid rgba(64, 99, 248, .16); box-shadow: 0 8px 26px rgba(24, 42, 88, .08); }
.service-page-hero .trust-item,
.service-page-hero .stat-card,
.service-page-hero .feature-card { color: var(--hadaf-ink); }

/* Keep service inquiry sections and the shared submission form consistent. */
.service-page section[id$="contact-form"],
#contact-form {
    background: #f4f7ff !important;
    border-top: 1px solid #e1e8fb;
    color: var(--hadaf-ink) !important;
}

#contact-form h2,
#contact-form > .container h3:not(.contact-container h3) {
    color: var(--hadaf-blue-dark) !important;
    font-family: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
}

#contact-form .text-white { color: var(--hadaf-muted) !important; }
#contact-form .contact-container,
#contact-form .card {
    background: #fff;
    border: 1px solid #e2e8f2;
    border-radius: .9rem;
    box-shadow: 0 12px 34px rgba(24, 42, 88, .08);
}

#contact-form .form-label { color: #344054; font-weight: 650; }
#contact-form .form-control,
#contact-form .form-select { border-color: #ccd5e2; border-radius: .55rem; color: #172033; min-height: 46px; }
#contact-form textarea.form-control { min-height: 120px; }
#contact-form .form-control:focus,
#contact-form .form-select:focus { border-color: var(--hadaf-blue) !important; box-shadow: 0 0 0 3px rgba(64, 99, 248, .14) !important; }
#contact-form .btn-primary { background: var(--hadaf-blue) !important; border-color: var(--hadaf-blue) !important; color: #fff !important; }
#contact-form .btn-primary:hover { background: var(--hadaf-blue-dark) !important; border-color: var(--hadaf-blue-dark) !important; }
#contact-form a:not(.btn) { color: var(--hadaf-blue-dark) !important; }

.project-detail-hero {
    background: linear-gradient(135deg, #fff 0%, #f4f7ff 100%) !important;
    border-bottom: 3px solid var(--hadaf-red);
    border-radius: .9rem;
    color: var(--hadaf-ink) !important;
    padding: clamp(1.5rem, 3.5vw, 2.5rem) !important;
}
.project-detail-hero h1 { color: var(--hadaf-blue-dark) !important; font-family: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif; }
.project-detail-hero .badge { background: #eef2ff !important; color: var(--hadaf-blue-dark) !important; }

@media (max-width: 575.98px) {
    .service-page .display-4,
    .service-page .display-5,
    .services-hero-section .display-4 {
        font-size: clamp(2rem, 9vw, 2.7rem);
    }

    .service-page-hero { padding-block: 1.75rem !important; }
    .service-page-hero h1,
    .service-page-hero h2 { font-size: clamp(1.7rem, 7.5vw, 2.25rem); }
    .service-page-hero .container { padding-inline: 1rem; }
    .project-detail-hero { padding: 1.25rem !important; }
    #contact-form .card-body { padding: 1.25rem !important; }

    .service-page .btn-lg,
    .services-hero-section .btn-lg {
        width: 100%;
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-page *,
    .services-hero-section * {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}