/* =====================================================
   DevArc Custom Styles — Professional Redesign
   ===================================================== */

/* ---- Stats Bar ---- */
.stats-bar {
    background: #0D1323;
    padding: 30px 0;
    border-top: 1px solid rgba(237,123,14,0.15);
    border-bottom: 1px solid rgba(237,123,14,0.15);
}
.stat-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 20px;
    border-right: 1px solid rgba(237,123,14,0.12);
}
.stat-item:last-child { border-right: none; }
.stat-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 10px;
    background: rgba(237,123,14,0.08);
    border: 1px solid rgba(237,123,14,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #ED7B0E;
}
.stat-text-label {
    font-size: 13px;
    color: #616161;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 2px;
}
.stat-text-value {
    font-size: 15px;
    color: #fff;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
}

/* ---- Section Title (professional) ---- */
.section-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #ED7B0E;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 14px;
    font-family: 'Poppins', sans-serif;
}
.section-title-pro {
    margin-bottom: 50px;
}
.section-title-pro h2 {
    color: #fff;
    font-size: 38px;
    font-weight: 700;
    margin-bottom: 18px;
    font-family: 'Poppins', sans-serif;
    line-height: 1.2;
}
.section-title-pro p {
    color: #919191;
    font-size: 17px;
    line-height: 1.8;
    max-width: 600px;
}
.section-title-pro.centered { text-align: center; }
.section-title-pro.centered p { margin: 0 auto; }

/* ---- How We Work / Process Section ---- */
.process-section {
    background: #000616;
    padding: 90px 0;
}
.process-card {
    background: #0D1323;
    border: 1px solid rgba(237,123,14,0.1);
    border-radius: 12px;
    padding: 40px 30px;
    text-align: center;
    height: 100%;
    transition: all 0.3s;
    position: relative;
    margin-bottom: 25px;
}
.process-card:hover {
    border-color: rgba(237,123,14,0.45);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(237,123,14,0.08);
}
.process-card-num {
    font-size: 11px;
    font-weight: 700;
    color: #ED7B0E;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 20px;
    display: block;
    font-family: 'Poppins', sans-serif;
}
.process-card-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid rgba(237,123,14,0.35);
    background: rgba(237,123,14,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #ED7B0E;
    margin: 0 auto 22px;
    transition: all 0.3s;
}
.process-card:hover .process-card-icon {
    background: rgba(237,123,14,0.12);
    border-color: #ED7B0E;
}
.process-card h4 {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
    font-family: 'Poppins', sans-serif;
}
.process-card p {
    color: #919191;
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

/* ---- Service Cards (homepage) ---- */
.single-service-box {
    transition: all 0.3s;
}
.service-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #ED7B0E;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
    font-family: 'Poppins', sans-serif;
}

/* ---- Tech Stack Section ---- */
.tech-stack-section {
    background: #0D1323;
    padding: 70px 0;
}
.tech-category {
    margin-bottom: 30px;
}
.tech-category-title {
    font-size: 12px;
    font-weight: 600;
    color: #ED7B0E;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 14px;
    font-family: 'Poppins', sans-serif;
}
.tech-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tech-badge {
    background: rgba(237,123,14,0.06);
    border: 1px solid rgba(237,123,14,0.2);
    color: #c5c5c5;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s;
    white-space: nowrap;
}
.tech-badge:hover {
    background: rgba(237,123,14,0.15);
    border-color: #ED7B0E;
    color: #fff;
}

/* ---- Why Choose Us — Feature List ---- */
.why-feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    width: 100%;
}
.why-feature-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 10px;
    background: rgba(237,123,14,0.08);
    border: 1px solid rgba(237,123,14,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #ED7B0E;
    margin-top: 2px;
}
.why-feature-text h5 {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
    font-family: 'Poppins', sans-serif;
}
.why-feature-text p {
    color: #919191;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* ---- Contact Info Cards ---- */
.contact-info-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #0D1323;
    border: 1px solid rgba(237,123,14,0.12);
    border-radius: 10px;
    padding: 22px;
    margin-bottom: 16px;
    transition: all 0.3s;
}
.contact-info-card:hover {
    border-color: rgba(237,123,14,0.4);
    transform: translateX(4px);
}
.contact-info-card-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 10px;
    background: rgba(237,123,14,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #ED7B0E;
}
.contact-info-card h5 {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    font-family: 'Poppins', sans-serif;
}
.contact-info-card p,
.contact-info-card a {
    color: #919191;
    font-size: 14px;
    margin: 0;
    text-decoration: none;
    transition: color 0.3s;
}
.contact-info-card a:hover { color: #ED7B0E; }

/* ---- Footer layout fix — equal columns, top-aligned ---- */
.footer-area .row:first-child {
    align-items: flex-start;
}
.footer-area .footer-logo {
    margin-bottom: 20px;
}
.footer-area .footer-logo img {
    max-height: 60px;
}
.footer-area .footer-title h2 {
    margin-bottom: 24px;
}

/* ---- Footer Social ---- */
.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(237,123,14,0.08);
    border: 1px solid rgba(237,123,14,0.2);
    color: #ED7B0E;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s;
}
.footer-social a:hover {
    background: #ED7B0E;
    color: #000616;
    border-color: #ED7B0E;
}

/* =========================================================
   SERVICE DETAIL PAGES
   ========================================================= */

/* Hero */
.service-hero {
    background: linear-gradient(135deg, #000616 0%, #0a1428 60%, #000616 100%);
    padding: 160px 0 90px;
    position: relative;
    overflow: hidden;
}
.service-hero::after {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(237,123,14,0.07) 0%, transparent 70%);
    pointer-events: none;
}
.service-hero-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: rgba(237,123,14,0.1);
    border: 1px solid rgba(237,123,14,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: #ED7B0E;
    margin: 0 auto 28px;
}
.service-hero h1 {
    color: #fff;
    font-size: 46px;
    font-weight: 700;
    margin-bottom: 20px;
    font-family: 'Poppins', sans-serif;
    line-height: 1.2;
}
.service-hero p.lead {
    color: #919191;
    font-size: 18px;
    max-width: 700px;
    margin: 0 auto 35px;
    line-height: 1.8;
}
.hero-cta-group { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn-primary-cta {
    display: inline-block;
    padding: 14px 36px;
    background: #ED7B0E;
    color: #000616 !important;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 700;
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s;
    border: 2px solid #ED7B0E;
}
.btn-primary-cta:hover {
    background: #ff8c1a;
    border-color: #ff8c1a;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(237,123,14,0.3);
    text-decoration: none;
}
.btn-secondary-cta {
    display: inline-block;
    padding: 14px 36px;
    border: 2px solid rgba(237,123,14,0.5);
    color: #ED7B0E !important;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s;
}
.btn-secondary-cta:hover {
    background: rgba(237,123,14,0.1);
    border-color: #ED7B0E;
    text-decoration: none;
}

/* Overview Section */
.overview-section {
    background: #000616;
    padding: 90px 0;
}
.overview-text p {
    color: #919191;
    font-size: 16px;
    line-height: 1.9;
    margin-bottom: 18px;
}
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.feature-list li {
    color: #c5c5c5;
    font-size: 15px;
    padding: 9px 0 9px 24px;
    position: relative;
    line-height: 1.5;
    font-family: 'Poppins', sans-serif;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.feature-list li:last-child { border-bottom: none; }
.feature-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 2px;
    background: #ED7B0E;
}

/* Capabilities Section */
.capabilities-section {
    background: #0D1323;
    padding: 90px 0;
}
.capability-card {
    background: #000616;
    border: 1px solid rgba(237,123,14,0.1);
    border-radius: 12px;
    padding: 32px 28px;
    height: 100%;
    transition: all 0.3s;
    margin-bottom: 24px;
}
.capability-card:hover {
    border-color: rgba(237,123,14,0.4);
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(237,123,14,0.08);
}
.capability-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(237,123,14,0.08);
    border: 1px solid rgba(237,123,14,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ED7B0E;
    margin-bottom: 18px;
}
.capability-card h4 {
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 10px;
    font-family: 'Poppins', sans-serif;
}
.capability-card p {
    color: #919191;
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

/* Process Steps */
.process-steps-section {
    background: #000616;
    padding: 90px 0;
}
.process-step-card {
    background: #0D1323;
    border: 1px solid rgba(237,123,14,0.1);
    border-radius: 12px;
    padding: 35px 25px;
    text-align: center;
    transition: all 0.3s;
    margin-bottom: 25px;
    position: relative;
}
.process-step-card:hover {
    border-color: rgba(237,123,14,0.35);
    transform: translateY(-4px);
}
.step-badge {
    font-size: 10px;
    font-weight: 700;
    color: #ED7B0E;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 16px;
    display: block;
    font-family: 'Poppins', sans-serif;
}
.step-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid rgba(237,123,14,0.3);
    background: rgba(237,123,14,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #ED7B0E;
    margin: 0 auto 18px;
    transition: all 0.3s;
}
.process-step-card:hover .step-icon {
    border-color: #ED7B0E;
    background: rgba(237,123,14,0.1);
}
.process-step-card h4 {
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 10px;
    font-family: 'Poppins', sans-serif;
}
.process-step-card p {
    color: #919191;
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

/* Technologies */
.technologies-section {
    background: #0D1323;
    padding: 70px 0;
}

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, #0a1428 0%, #0D1323 100%);
    padding: 90px 0;
    text-align: center;
    border-top: 1px solid rgba(237,123,14,0.12);
}
.cta-section h2 {
    color: #fff;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 18px;
    font-family: 'Poppins', sans-serif;
}
.cta-section p {
    color: #919191;
    font-size: 17px;
    max-width: 580px;
    margin: 0 auto 38px;
    line-height: 1.7;
}

/* ---- Service Nav on detail pages ---- */
.service-detail-nav {
    background: rgba(13,19,35,0.95);
    backdrop-filter: blur(10px);
}

/* ---- Why Choose Us image — blend with page background ---- */
.why-choose-us-thumb {
    -webkit-mask-image: radial-gradient(ellipse 78% 75% at 50% 50%,
        black 30%,
        rgba(0,0,0,0.85) 50%,
        rgba(0,0,0,0.4) 68%,
        transparent 82%);
    mask-image: radial-gradient(ellipse 78% 75% at 50% 50%,
        black 30%,
        rgba(0,0,0,0.85) 50%,
        rgba(0,0,0,0.4) 68%,
        transparent 82%);
}

/* ---- Hero image — blend with page background ---- */
.hero-image-wrapper {
    -webkit-mask-image: radial-gradient(ellipse 78% 75% at 55% 48%,
        black 30%,
        rgba(0,0,0,0.85) 50%,
        rgba(0,0,0,0.4) 68%,
        transparent 82%);
    mask-image: radial-gradient(ellipse 78% 75% at 55% 48%,
        black 30%,
        rgba(0,0,0,0.85) 50%,
        rgba(0,0,0,0.4) 68%,
        transparent 82%);
}
.hero-main-image {
    max-width: 90%;
    margin: 0 auto;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

/* --- Tablet & below (< 992px) --- */
@media (max-width: 991px) {

    /* Stats bar: switch to bottom borders, remove side borders */
    .stat-item {
        border-right: none;
        border-bottom: 1px solid rgba(237,123,14,0.1);
        padding: 12px 16px;
    }
    .stat-item:last-child { border-bottom: none; }
    /* 2-per-row: also remove bottom border from the last item in each row */
    .stats-bar .col-md-6:nth-child(odd) .stat-item,
    .stats-bar .col-6:nth-child(odd) .stat-item { border-bottom: 1px solid rgba(237,123,14,0.1); }
    .stats-bar .col-md-6:nth-child(even) .stat-item,
    .stats-bar .col-6:nth-child(even) .stat-item { border-bottom: none; }

    /* Section titles */
    .section-title-pro h2 { font-size: 28px; }
    .section-title-pro p  { font-size: 16px; }

    /* Why Choose Us — image too tall on tablet */
    .why-choose-us-thumb { min-height: 350px !important; }

    /* Service hero */
    .service-hero   { padding: 130px 0 60px; }
    .service-hero h1 { font-size: 32px; }
    .service-hero p.lead { font-size: 16px; }

    /* Overview — remove inline right padding */
    .overview-text { padding-right: 0 !important; margin-bottom: 40px; }

    /* CTA */
    .cta-section h2 { font-size: 28px; }
    .cta-section p  { font-size: 15px; }

    /* Contact info: disable slide effect on touch */
    .contact-info-card:hover { transform: none; }
}

/* --- Mobile (< 768px) --- */
@media (max-width: 767px) {

    /* Sections padding tighter */
    .process-section   { padding: 55px 0; }
    .tech-stack-section { padding: 45px 0; }
    .overview-section,
    .capabilities-section,
    .process-steps-section,
    .technologies-section { padding: 55px 0; }
    .cta-section { padding: 60px 0; }

    /* Section title */
    .section-title-pro { margin-bottom: 35px; }

    /* Why Choose Us — shrink image height so it doesn't dominate */
    .why-choose-us-thumb { min-height: 250px !important; }

    /* Hero image — loosen the mask on mobile so less is cropped */
    .hero-image-wrapper {
        -webkit-mask-image: radial-gradient(ellipse 90% 85% at 50% 50%,
            black 40%, rgba(0,0,0,0.7) 65%, transparent 85%);
        mask-image: radial-gradient(ellipse 90% 85% at 50% 50%,
            black 40%, rgba(0,0,0,0.7) 65%, transparent 85%);
    }

    /* Service hero */
    .service-hero   { padding: 110px 0 50px; }
    .service-hero h1 { font-size: 26px; }
    .service-hero-icon { width: 65px; height: 65px; font-size: 26px; }

    /* Hero CTA buttons — stack vertically */
    .hero-cta-group {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .btn-primary-cta,
    .btn-secondary-cta {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }

    /* CTA section buttons */
    .cta-section .btn-primary-cta,
    .cta-section .btn-secondary-cta {
        display: block;
        max-width: 300px;
        margin: 0 auto 12px !important;
        text-align: center;
    }

    /* Process cards on homepage */
    .process-card { padding: 28px 20px; }

    /* Footer social icons — centre on mobile */
    .footer-social { justify-content: center; }
}

/* --- Small phones (< 576px) --- */
@media (max-width: 575px) {

    /* Stats bar: single column */
    .stats-bar .col-6 .stat-item { border-bottom: 1px solid rgba(237,123,14,0.1); }
    .stats-bar .col-6:last-child .stat-item { border-bottom: none; }

    /* Section title */
    .section-title-pro h2 { font-size: 24px; }

    /* Why Choose Us — hide image on very small phones to save space */
    .why-choose-us-thumb { min-height: 200px !important; }

    /* Service capability & process cards */
    .capability-card  { padding: 24px 20px; }
    .process-step-card { padding: 24px 18px; }
    .process-step-card h4 { font-size: 15px; }

    /* Service page overview feature list font */
    .feature-list li { font-size: 14px; }
}