/* Web Development page styles moved from inline <style> in webdevelopment.html */

/* transparent background and theme-aware text/icons */
.service-section { background: transparent; border-radius: 12px; padding: 36px 24px; color: var(--text-color, inherit); }
.service-list .service-item { display:flex; align-items:flex-start; gap:12px; padding:12px 0; }
.service-icon { width:40px; height:40px; border-radius:50%; background:transparent; color:currentColor; border:2px solid currentColor; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; }
.service-title { font-weight:600; color:currentColor; margin-bottom:6px; }
/* Stronger selector to override Bootstrap utilities like .text-muted and .text-body-emphasis */
.service-section .text-muted { color: var(--muted, #6c757d) !important; }
.service-section .text-body-emphasis, .service-section h2, .service-section .service-title { color: currentColor !important; }
.service-cta .btn { min-width:160px; }

/* Value Snapshot styles */
.value-snapshot { background: transparent !important; border-radius: 12px; padding: 28px 20px; margin-top: 20px; color: var(--text-color, inherit) !important; }
.value-snapshot .snap-heading { font-size: 1.6rem; font-weight:700; margin-bottom: 8px; color: currentColor !important; }
.value-snapshot .snap-sub { font-size:1rem; color: var(--muted, #6c757d); margin-bottom:14px; }
.value-snapshot .snap-row { display:flex; gap:24px; align-items:center; flex-wrap:wrap; }
.value-snapshot .snap-media { flex:1 1 320px; max-width:520px; }
.value-snapshot .snap-media img { width:100%; height:auto; border-radius:12px; display:block; box-shadow: 0 10px 30px rgba(2,175,244,0.08); }
.value-snapshot .snap-content { flex:1 1 300px; }
.value-snapshot .snap-list { list-style: none; padding: 0; margin: 0; display:flex; gap:12px; flex-direction:column; }
.value-snapshot .snap-list li { display:flex; gap:12px; align-items:flex-start; padding:8px 0; }
.value-snapshot .snap-bullet { width:44px; height:44px; border-radius:10px; background:transparent; border:2px solid currentColor; color:currentColor; display:inline-flex; align-items:center; justify-content:center; font-weight:700; }
.value-snapshot .snap-desc { color: currentColor; font-weight:700; font-size:1.02rem; }
.value-snapshot .snap-note { color: var(--muted, #6c757d); font-weight:400; }
.value-snapshot .snap-cta { margin-top:16px; display:flex; gap:12px; }
@media (max-width:767px){ .value-snapshot .snap-row{flex-direction:column-reverse; } .value-snapshot .snap-media{max-width:100%} }

@media (max-width:767px){ .service-section{padding:24px 12px} }

/* Process Overview jumbotron styles */
.process-hero { padding: 0; }
.process-hero .container { max-width: 1180px; }
.process-hero .process-inner { padding:48px 20px; border-radius:10px; background: transparent !important; }
.process-hero .process-title { font-size:1.8rem; font-weight:800; margin-bottom:8px; color: var(--text-color, currentColor) !important; }
.process-hero .process-lead { color: var(--muted, #6c757d); margin-bottom:20px; }
.process-hero .process-steps { display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
.process-hero .step { background: transparent; border-radius:10px; padding:16px; border:1px solid rgba(255,255,255,0.04); }
.process-hero .step h4 { margin:0 0 6px 0; color: currentColor !important; font-weight:700; }
.process-hero .step p { margin:0; color: var(--muted, #6c757d) !important; }

/* Force all text inside these sections to inherit the theme color */
.service-section, .value-snapshot, .process-hero { color: var(--text-color, currentColor) !important; background: transparent !important; }
.service-section *, .value-snapshot *, .process-hero * { color: inherit !important; }
.service-section .text-muted, .value-snapshot .snap-note, .process-hero .step p { color: var(--muted, #6c757d) !important; }
/* Ensure icons / borders use currentColor */
.service-icon, .snap-bullet { border-color: currentColor !important; color: currentColor !important; }
/* Keep images and buttons visually distinct while allowing their text to inherit */
.service-section img, .value-snapshot img { opacity:1; }
.service-section .btn, .value-snapshot .btn, .process-hero .btn { color: inherit !important; }
@media (max-width:991px){ .process-hero .process-steps{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:575px){ .process-hero .process-steps{ grid-template-columns: 1fr; } .process-hero .process-inner{ padding:28px 14px } }