/* ═══════════════════════════════════════════════════════════════ manufacturing-software.css Add link in : NAV / PLAN / FOOTER — untouched ═══════════════════════════════════════════════════════════════ */ :root { --mfg-gold: #c9a84c; --mfg-gold-lt: #f5e6b8; --mfg-navy: #0f2044; --mfg-navy-lt: #1e3a6e; --mfg-bg: #f9f8f5; --mfg-white: #ffffff; --mfg-text: #2d3748; --mfg-muted: #64748b; --mfg-border: #e8e2d5; --mfg-radius: 16px; --mfg-shadow: 0 4px 24px rgba(15,32,68,0.09); } /* ════════════════════════════════ SECTION 1 — Hero (dark navy bg) ════════════════════════════════ */ .about-sec-wrap:first-of-type { background: linear-gradient(135deg, #0f2044 0%, #1a3160 50%, #0f2044 100%); padding-bottom: 70px !important; position: relative; overflow: hidden; } /* decorative glow */ .about-sec-wrap:first-of-type::before { content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(201,168,76,0.10) 0%, transparent 70%); top: -100px; right: -80px; pointer-events: none; } /* ── H1 Heading — centered, white ── */ .about-sec-wrap:first-of-type .heading { font-family: 'Playfair Display', serif; font-size: clamp(28px, 4vw, 48px); color: #ffffff !important; letter-spacing: -0.02em; text-align: center !important; display: block !important; /* fix: was inline-block, breaking centering */ width: 100%; margin-bottom: 0; } /* gold underline — centered */ .about-sec-wrap:first-of-type .heading::after { content: ''; display: block; width: 70px; height: 4px; background: linear-gradient(90deg, var(--mfg-gold), var(--mfg-gold-lt)); border-radius: 4px; margin: 14px auto 0; } /* ── H3 sub-heading — bright & clear ── */ .about-sec-wrap:first-of-type h3 { font-size: 22px; font-weight: 700; color: #ffffff !important; /* pure white — easy to read on navy */ margin-bottom: 16px; letter-spacing: -0.01em; position: relative; padding-bottom: 10px; } .about-sec-wrap:first-of-type h3::after { content: ''; display: block; width: 40px; height: 3px; background: var(--mfg-gold); border-radius: 3px; margin-top: 8px; } /* ── Body paragraph — bright white ── */ .about-sec-wrap:first-of-type p { color: rgba(255, 255, 255, 0.90) !important; /* bright, clearly readable */ font-size: 15.5px; line-height: 1.85; } /* ── Image — remove white box, add gold glow ── */ .about-sec-wrap:first-of-type img.img-fluid { border-radius: 20px; border: none !important; background: transparent !important; box-shadow: 0 0 0 2px rgba(201,168,76,0.40), 0 20px 55px rgba(0, 0, 0, 0.40); transform: perspective(900px) rotateY(4deg) scale(1.01); transition: transform 0.4s ease, box-shadow 0.4s ease; width: 100%; object-fit: cover; display: block; } .about-sec-wrap:first-of-type img.img-fluid:hover { transform: perspective(900px) rotateY(0deg) scale(1.02); box-shadow: 0 0 0 3px rgba(201,168,76,0.55), 0 28px 65px rgba(0, 0, 0, 0.45); } /* remove any Bootstrap card/wrapper white background on the image column */ .about-sec-wrap:first-of-type .col-lg-6:first-child, .about-sec-wrap:first-of-type .col-md-6:first-child { background: transparent !important; padding: 0 16px; } /* ════════════════════════════════ SECTION 2 — Content (white bg) ════════════════════════════════ */ .about-sec-wrap + .about-sec-wrap { background: var(--mfg-white); padding-bottom: 80px !important; } /* H2 headings */ .about-sec-wrap + .about-sec-wrap .heading { font-family: 'Playfair Display', serif; font-size: clamp(22px, 3.5vw, 34px); color: var(--mfg-navy); letter-spacing: -0.02em; line-height: 1.3; border-left: 4px solid var(--mfg-gold); padding-left: 16px; display: block; } /* H3 feature group titles */ .about-sec-wrap + .about-sec-wrap h3 { font-size: 19px; font-weight: 800; color: var(--mfg-navy); margin: 32px 0 10px; display: flex; align-items: center; gap: 10px; } .about-sec-wrap + .about-sec-wrap h3::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--mfg-gold); flex-shrink: 0; display: inline-block; } /* body paragraphs */ .about-sec-wrap + .about-sec-wrap p { font-size: 15px; line-height: 1.85; color: var(--mfg-text); margin-bottom: 14px; } /* feature paragraphs as cards */ .about-sec-wrap + .about-sec-wrap > .container > p { background: #fafafa; border: 1px solid var(--mfg-border); border-left: 4px solid var(--mfg-gold); border-radius: 12px; padding: 16px 20px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(15,32,68,0.04); transition: box-shadow 0.25s, border-color 0.25s; } .about-sec-wrap + .about-sec-wrap > .container > p:hover { box-shadow: 0 6px 22px rgba(15,32,68,0.09); border-left-color: var(--mfg-navy); } /* first intro paragraph — plain text, no card */ .about-sec-wrap + .about-sec-wrap > .container > p:first-of-type { background: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important; font-size: 16px; color: var(--mfg-muted); margin-bottom: 30px; } /* FAQ H4 */ .about-sec-wrap + .about-sec-wrap h4 { font-size: 15.5px; font-weight: 700; color: var(--mfg-navy); background: linear-gradient(135deg, #f0f4ff, #eaedff); border: 1px solid rgba(30,58,138,0.13); border-radius: 10px; padding: 14px 18px 14px 46px; margin-top: 18px; margin-bottom: 8px; position: relative; } .about-sec-wrap + .about-sec-wrap h4::before { content: 'Q'; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 6px; background: var(--mfg-gold); color: #fff; font-size: 12px; font-weight: 800; text-align: center; line-height: 22px; } /* FAQ answer */ .about-sec-wrap + .about-sec-wrap h4 + p { background: #f8faff !important; border: 1px solid #dde5f8 !important; border-left: 3px solid #7a9de0 !important; border-radius: 10px !important; padding: 14px 18px !important; margin-bottom: 6px !important; font-size: 14.5px !important; color: var(--mfg-muted) !important; box-shadow: none !important; } .about-sec-wrap + .about-sec-wrap h4 + p:hover { box-shadow: none !important; border-left-color: var(--mfg-navy-lt) !important; } /* links */ .about-sec-wrap + .about-sec-wrap a { color: var(--mfg-navy-lt); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--mfg-gold-lt); transition: color 0.2s, border-color 0.2s; } .about-sec-wrap + .about-sec-wrap a:hover { color: var(--mfg-gold); border-bottom-color: var(--mfg-gold); } /* CTA strip */ .about-sec-wrap + .about-sec-wrap > .container::after { content: '📞 Contact us today for a Free Demo of RPS Jewel Pro'; display: block; text-align: center; background: linear-gradient(135deg, var(--mfg-navy), var(--mfg-navy-lt)); color: #fff; font-size: 15px; font-weight: 600; padding: 18px 24px; border-radius: 14px; margin-top: 48px; box-shadow: var(--mfg-shadow); } /* ════════════════════════════════ DARK MODE ════════════════════════════════ */ body.dark-mode .about-sec-wrap + .about-sec-wrap { background: #0d1117; } body.dark-mode .about-sec-wrap + .about-sec-wrap .heading { color: #f1f5f9; } body.dark-mode .about-sec-wrap + .about-sec-wrap h3 { color: #e2e8f0; } body.dark-mode .about-sec-wrap + .about-sec-wrap p { color: #94a3b8; } body.dark-mode .about-sec-wrap + .about-sec-wrap > .container > p { background: #161b27; border-color: #2d3748; border-left-color: var(--mfg-gold); } body.dark-mode .about-sec-wrap + .about-sec-wrap h4 { background: #1a2540; border-color: #2d4070; color: #e2e8f0; } body.dark-mode .about-sec-wrap + .about-sec-wrap h4 + p { background: #131824 !important; border-color: #2d3748 !important; border-left-color: #4a6fa5 !important; color: #94a3b8 !important; } /* ════════════════════════════════ RESPONSIVE ════════════════════════════════ */ @media (max-width: 768px) { .about-sec-wrap:first-of-type img.img-fluid { transform: none; margin-bottom: 28px; } .about-sec-wrap:first-of-type .col-lg-6:first-child { padding: 0 12px 24px; } }