/* ============================================================ SERVICES PAGE — css/services.css Only affects pages with ============================================================ */ /* ---- Contain sections so watermark shows behind content ---- */ /*.page-services .section { padding: 60px 80px; max-width: 900px; /* matches watermark width */ /*margin-left: auto; margin-right: auto; box-sizing: border-box; background: transparent; /* so watermark shows through */ /*} /* ---- Text same style as home page vision ---- */ /*.page-services .text-side p { font-size: 1.15rem; line-height: 1.85; font-style: normal; color: #111827; max-width: 600px; margin-bottom: 14px; } .page-services .text-side ul.list { max-width: 600px; font-size: 1.05rem; line-height: 1.8; color: #111827; } /* ---- Gallery inside watermark ---- */ /*.page-services .thumbnail-gallery { max-width: 620px; padding-left: 0; gap: 10px; margin-top: 20px; } /* ---- Section headings ---- */ /*.page-services .section h2 { font-size: 26px; margin-bottom: 16px; } /* ---- Alternate backgrounds — keep transparent so watermark shows ---- */ /*.page-services #import-export { background: rgba(243,246,251,0.6); } .page-services #farms-section { background: rgba(255,255,255,0.6); } .page-services #RC-section { background: rgba(243,246,251,0.6); } .page-services #FC-section { background: rgba(255,255,255,0.6); } @media (max-width: 768px) { .page-services .section { padding: 35px 20px; } .page-services .thumbnail-gallery { max-width: 100%; } } /* ============================================================ SERVICES PAGE — css/services.css Headings outside watermark, text+images inside watermark No coloured boxes — fully transparent background ============================================================ */ /* ---- Section spacing (keeps watermark visible) ---- */ .page-services .section { padding: 60px 80px; background: transparent; box-sizing: border-box; } /* ---- Headings: full width, outside watermark, left-aligned ---- */ .page-services .section h2 { max-width: none; margin-left: 0; margin-right: 0; font-size: 26px; margin-bottom: 18px; text-align: left; } /* ---- Text and gallery container: inside watermark (centered, max-width) ---- */ .page-services .text-side p, .page-services .text-side ul.list, .page-services .thumbnail-gallery { max-width: 800px; margin-left: auto; margin-right: auto; text-align: justify; } /* ---- Text styling (same as home/about) ---- */ .page-services .text-side p { font-size: 1.15rem; line-height: 1.85; font-style: normal; color: #111827; margin-bottom: 14px; } .page-services .text-side ul.list { font-size: 1.05rem; line-height: 1.8; color: #111827; } /* ---- Gallery inside watermark ---- */ .page-services .thumbnail-gallery { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; padding-left: 0; } /* ---- Remove all coloured background boxes ---- */ .page-services #import-export, .page-services #farms-section, .page-services #RC-section, .page-services #FC-section { background: transparent; } /* ---- Optional: keep the two-column layout flexible on large screens ---- */ .page-services .import-export-layout { max-width: 1200px; margin-left: auto; margin-right: auto; } /* Move content up for double-line headings */ .page-services #import-export .text-side p, .page-services #RC-section .text-side p, .page-services #FC-section .text-side p { margin-top: -100px; /* adjust 25-35px if needed */ } .page-services #farms-section .text-side p { margin-top: -60px; /* adjust 25-35px if needed */ } /* ---- Responsive ---- */ @media (max-width: 768px) { .page-services .section { padding: 35px 20px; } .page-services .text-side p, .page-services .text-side ul.list, .page-services .thumbnail-gallery { max-width: 100%; } /* Reset upward shift on mobile */ .page-services #import-export .text-side p, .page-services #import-export .thumbnail-gallery, .page-services #RC-section .text-side p, .page-services #RC-section .thumbnail-gallery, .page-services #FC-section .text-side p, .page-services #FC-section .thumbnail-gallery{ margin-top:0 !important; } } /* ============================================================ Force multi-line headings on Services page ============================================================ */ /* Force "Import & Export" to break after "&" */ .page-services #import-export h2 { max-width: 130px; white-space: normal; word-break: keep-all; line-height: 1.3; } /* Force "Financial Services" to break after "Financial" */ .page-services #FC-section h2 { max-width: 110px; white-space: normal; line-height: 1.3; } /* Force "Real Estate & Construction" to break after "Real Estate" */ .page-services #RC-section h2 { max-width: 180px; white-space: normal; line-height: 1.3; } /* Optional: add a small left margin if headings still touch watermark */ .page-services .section h2 { margin-left: 10px; /* adjust as needed (10px, 20px, etc.) */ }