/* ========================================= BSCPL MOBILE HEADER Logo + BSCPL + Menu Mobile only ========================================= */ @media screen and (max-width: 480px) { /* Keep logo and site name side-by-side */ .theme-branding-info { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 6px !important; width: auto !important; min-width: 0 !important; } /* Compact premium logo */ .theme-logo-parent { flex: 0 0 auto !important; width: 80px !important; min-width: 80px !important; margin: 0 !important; padding: 0 !important; } .theme-logo-parent img { width: 80px !important; height: auto !important; display: block !important; } /* Mobile-only BSCPL wordmark */ .theme-site-name-caption { margin: 0 !important; padding: 0 !important; min-width: 0 !important; display: flex !important; align-items: center !important; } .theme-site-name { font-size: 0 !important; line-height: 1 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; } .theme-site-name::after { content: "BSCPL"; display: inline-block; color: #FC3D00; font-size: 24px; font-weight: 600; letter-spacing: 0.01em; line-height: 1; white-space: nowrap; } } /* ========================================= BSCPL TABLET HEADER 481px – 991px Logo + Full Company Name Side-by-Side ========================================= */ @media screen and (min-width: 481px) and (max-width: 991px) { .theme-branding-info { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; min-width: 0 !important; } .theme-logo-parent { flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; } .theme-site-name-caption { margin: 0 !important; padding: 0 !important; min-width: 0 !important; display: flex !important; align-items: center !important; } .theme-site-name { font-size: inherit !important; line-height: 1 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; } .theme-site-name::after { content: none !important; } } @media only screen and (min-width: 1200px) { .theme-header .zpcontainer { width: 100%; max-width: none; padding-inline-start: 10px; padding-inline-end: 10px; } .theme-header .zpcontainer .theme-branding-info { margin-inline-end: auto; } .theme-header .zpcontainer .theme-navigation-and-icons { margin-inline-start: auto; justify-content: flex-end; } } @media all and (min-width: 992px) { .zpheader-style-04 .theme-header .zpcontainer { padding-block-start: 32px !important; padding-block-end: 32px !important; } } /* ========================================= BSCPL HERO — REMOVE ZOHO SECTION GAPS ========================================= */ /* Remove outer section spacing */ .bscpl-hero { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: none !important; } /* Remove Zoho's inner section/container spacing */ .bscpl-hero .zpcontainer { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: none !important; } /* Remove any spacing around the Code Snippet element */ .bscpl-hero .zpelement { margin: 0 !important; padding: 0 !important; } /* Make the coded hero fill the section */ .bscpl-hero > .zpcontainer, .bscpl-hero > .zpcontainer > * { width: 100% !important; } /* ========================================= BSCPL — SECTION 03 ABOUT CARD Premium Floating Glass Panel ========================================= */ /* ========================================= BSCPL — SECTION 03 ABOUT CARD Premium Soft Glass ========================================= */ .bscpl-about-card { background: rgba(255, 255, 255, 0.70) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: 1px solid rgba(255, 255, 255, 0.85) !important; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.10), 0 8px 24px rgba(0, 0, 0, 0.04) !important; border-radius: 4px !important; } /* ========================================= BSCPL — SECTION 04 WHY BSCPL ========================================= */ .bscpl-why-section { background: #101214 !important; padding-top: 110px !important; padding-bottom: 110px !important; } /* Section heading */ .bscpl-why-section h1, .bscpl-why-section h2, .bscpl-why-section h3 { color: #ffffff !important; } /* Supporting text */ .bscpl-why-section p { color: rgba(255,255,255,0.68) !important; } /* Eyebrow / accent text */ .bscpl-why-section .bscpl-eyebrow { color: #FC3D00 !important; letter-spacing: 0.14em !important; font-size: 11px !important; font-weight: 600 !important; } /* Feature cards */ .bscpl-why-card { background: rgba(255,255,255,0.035) !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 4px !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease !important; } /* Card hover */ .bscpl-why-card:hover { background: rgba(255,255,255,0.065) !important; border-color: rgba(255,106,0,0.45) !important; transform: translateY(-4px) !important; } /* Card headings */ .bscpl-why-card h2, .bscpl-why-card h3, .bscpl-why-card h4 { color: #ffffff !important; } /* Card descriptions */ .bscpl-why-card p { color: rgba(255,255,255,0.62) !important; } /* Orange accent links/arrows */ .bscpl-why-card a { color: #FF6A00 !important; } /* ========================================= BSCPL — WHY SECTION CUSTOM ICON SYSTEM Lucide Icons + CSS Mask ========================================= */ /* Hide original Zoho icons/images */ .bscpl-why-card .zpelement-image, .bscpl-why-card img { display: none !important; } /* Make each card the positioning reference */ .bscpl-why-card { position: relative !important; } /* ========================================= BASE CUSTOM ICON ========================================= */ .bscpl-why-card::before { content: ""; position: absolute; left: 34px; bottom: 48px; width: 44px; height: 44px; background-color: #FF6A00 !important; background-repeat: no-repeat; background-position: center; background-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; opacity: 1; transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease !important; } /* ========================================= 01 — QUALITY Lucide: Shield Cog Corner ========================================= */ /* ========================================= 01 — QUALITY / SHIELD CHECK ========================================= */ .bscpl-why-01::before { content: ""; position: absolute; left: 34px; bottom: 48px; width: 44px; height: 44px; background-color: #FF6A00 !important; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-8 9-4.5-1.5-8-4-8-9V5l8-3 8 3v8z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-8 9-4.5-1.5-8-4-8-9V5l8-3 8 3v8z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* ========================================= 02 — ADVANCED TECHNOLOGY Lucide: CPU ========================================= */ .bscpl-why-02::before { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtY3B1Ij48cGF0aCBkPSJNMTIgMjB2MiIvPjxwYXRoIGQ9Ik0xMiAydjIiLz48cGF0aCBkPSJNMTcgMjB2MiIvPjxwYXRoIGQ9Ik0xNyAydjIiLz48cGF0aCBkPSJNMiAxMmgyIi8+PHBhdGggZD0iTTIgMTdoMiIvPjxwYXRoIGQ9Ik0yIDdoMiIvPjxwYXRoIGQ9Ik0yMCAxMmgyIi8+PHBhdGggZD0iTTIwIDE3aDIiLz48cGF0aCBkPSJNMjAgN2gyIi8+PHBhdGggZD0iTTcgMjB2MiIvPjxwYXRoIGQ9Ik03IDJ2MiIvPjxyZWN0IHg9IjQiIHk9IjQiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcng9IjIiLz48cmVjdCB4PSI4IiB5PSI4IiB3aWR0aD0iOCIgaGVpZ2h0PSI4IiByeD0iMSIvPjwvc3ZnPg=="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtY3B1Ij48cGF0aCBkPSJNMTIgMjB2MiIvPjxwYXRoIGQ9Ik0xMiAydjIiLz48cGF0aCBkPSJNMTcgMjB2MiIvPjxwYXRoIGQ9Ik0xNyAydjIiLz48cGF0aCBkPSJNMiAxMmgyIi8+PHBhdGggZD0iTTIgMTdoMiIvPjxwYXRoIGQ9Ik0yIDdoMiIvPjxwYXRoIGQ9Ik0yMCAxMmgyIi8+PHBhdGggZD0iTTIwIDE3aDIiLz48cGF0aCBkPSJNMjAgN2gyIi8+PHBhdGggZD0iTTcgMjB2MiIvPjxwYXRoIGQ9Ik03IDJ2MiIvPjxyZWN0IHg9IjQiIHk9IjQiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcng9IjIiLz48cmVjdCB4PSI4IiB5PSI4IiB3aWR0aD0iOCIgaGVpZ2h0PSI4IiByeD0iMSIvPjwvc3ZnPg=="); } /* ========================================= 03 — FOUNDRY EXPERTISE Lucide: Trophy ========================================= */ .bscpl-why-03::before { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtdHJvcGh5Ij48cGF0aCBkPSJNMTAgMTQuNjZWMTdhMSAxIDAgMCAxLTEgMSAyIDIgMCAwIDAtMiAydjIiLz48cGF0aCBkPSJNMTQgMTQuNjZWMTdhMSAxIDAgMCAwIDEgMSAyIDIgMCAwIDEgMiAydjIiLz48cGF0aCBkPSJNMTcuOTE2IDEwSDE5LjVBMi41IDIuNSAwIDAgMCAyMiA3LjVWNWExIDEgMCAwIDAtMS0xaC0zIi8+PHBhdGggZD0iTTQgMjJoMTYiLz48cGF0aCBkPSJNNiA5YTYgNiAwIDAgMCAxMiAwVjNhMSAxIDAgMCAwLTEtMUg3YTEgMSAwIDAgMC0xIDF6Ii8+PHBhdGggZD0iTTYuMDg0IDEwSDQuNUEyLjUgMi41IDAgMCAxIDIgNy41VjVhMSAxIDAgMCAxIDEtMWgzIi8+PC9zdmc+"); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtdHJvcGh5Ij48cGF0aCBkPSJNMTAgMTQuNjZWMTdhMSAxIDAgMCAxLTEgMSAyIDIgMCAwIDAtMiAydjIiLz48cGF0aCBkPSJNMTQgMTQuNjZWMTdhMSAxIDAgMCAwIDEgMSAyIDIgMCAwIDEgMiAydjIiLz48cGF0aCBkPSJNMTcuOTE2IDEwSDE5LjVBMi41IDIuNSAwIDAgMCAyMiA3LjVWNWExIDEgMCAwIDAtMS0xaC0zIi8+PHBhdGggZD0iTTQgMjJoMTYiLz48cGF0aCBkPSJNNiA5YTYgNiAwIDAgMCAxMiAwVjNhMSAxIDAgMCAwLTEtMUg3YTEgMSAwIDAgMC0xIDF6Ii8+PHBhdGggZD0iTTYuMDg0IDEwSDQuNUEyLjUgMi41IDAgMCAxIDIgNy41VjVhMSAxIDAgMCAxIDEtMWgzIi8+PC9zdmc+"); } /* ========================================= 04 — RELIABLE DELIVERY Lucide: Mail Badge ========================================= */ .bscpl-why-04::before { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtbWFpbC1iYWRnZSI+PHBhdGggZD0iTTIyIDcuN1Y2YTIgMiAwIDAgMC0yLTJINGEyIDIgMCAwIDAtMiAydjEyYTIgMiAwIDAgMCAyIDJoOC4yNSIvPjxwYXRoIGQ9Ik0xMiAxMi45OTZhMS45NCAxLjk0IDAgMCAxLTEuMDMtLjI5NkwyIDciLz48cGF0aCBkPSJtMjAuNjkgMTYuNDc5IDEuMjkgNC44OGEuNS41IDAgMCAxLS42OTguNTkxbC0xLjg0My0uODQ5YTEgMSAwIDAgMC0uODc5LjAwMWwtMS44NDYuODVhLjUuNSAwIDAgMS0uNjkyLS41OTNsMS4yOS00Ljg4Ii8+PGNpcmNsZSBjeD0iMTkiIGN5PSIxNCIgcj0iMyIvPjwvc3ZnPg=="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtbWFpbC1iYWRnZSI+PHBhdGggZD0iTTIyIDcuN1Y2YTIgMiAwIDAgMC0yLTJINGEyIDIgMCAwIDAtMiAydjEyYTIgMiAwIDAgMCAyIDJoOC4yNSIvPjxwYXRoIGQ9Ik0xMiAxMi45OTZhMS45NCAxLjk0IDAgMCAxLTEuMDMtLjI5NkwyIDciLz48cGF0aCBkPSJtMjAuNjkgMTYuNDc5IDEuMjkgNC44OGEuNS41IDAgMCAxLS42OTguNTkxbC0xLjg0My0uODQ5YTEgMSAwIDAgMC0uODc5LjAwMWwtMS44NDYuODVhLjUuNSAwIDAgMS0uNjkyLS41OTNsMS4yOS00Ljg4Ii8+PGNpcmNsZSBjeD0iMTkiIGN5PSIxNCIgcj0iMyIvPjwvc3ZnPg=="); } /* ========================================= 05 — RIGOROUS TESTING Lucide: Biceps Flexed ========================================= */ .bscpl-why-05::before { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtYmljZXBzLWZsZXhlZCI+PHBhdGggZD0iTTEyLjQwOSAxMy4wMTdBNSA1IDAgMCAxIDIyIDE1YzAgMy44NjYtNCA3LTkgNy00LjA3NyAwLTguMTUzLS44Mi0xMC4zNzEtMi40NjItLjQyNi0uMzE2LS42MzEtLjgzMi0uNjItMS4zNjJDMi4xMTggMTIuNzIzIDIuNjI3IDIgMTAgMmEzIDMgMCAwIDEgMyAzIDIgMiAwIDAgMS0yIDJjLTEuMTA1IDAtMS42NC0uNDQ0LTItMSIvPjxwYXRoIGQ9Ik0xNSAxNGE1IDUgMCAwIDAtNy41ODQgMiIvPjxwYXRoIGQ9Ik05Ljk2NCA2LjgyNUM4LjAxOSA3Ljk3NyA5LjUgMTMgOCAxNSIvPjwvc3ZnPg=="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtYmljZXBzLWZsZXhlZCI+PHBhdGggZD0iTTEyLjQwOSAxMy4wMTdBNSA1IDAgMCAxIDIyIDE1YzAgMy44NjYtNCA3LTkgNy00LjA3NyAwLTguMTUzLS44Mi0xMC4zNzEtMi40NjItLjQyNi0uMzE2LS42MzEtLjgzMi0uNjItMS4zNjJDMi4xMTggMTIuNzIzIDIuNjI3IDIgMTAgMmEzIDMgMCAwIDEgMyAzIDIgMiAwIDAgMS0yIDJjLTEuMTA1IDAtMS42NC0uNDQ0LTItMSIvPjxwYXRoIGQ9Ik0xNSAxNGE1IDUgMCAwIDAtNy41ODQgMiIvPjxwYXRoIGQ9Ik05Ljk2NCA2LjgyNUM4LjAxOSA3Ljk3NyA5LjUgMTMgOCAxNSIvPjwvc3ZnPg=="); } /* ========================================= 06 — CUSTOM ENGINEERING Lucide: Cog ========================================= */ .bscpl-why-06::before { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtY29nIj48cGF0aCBkPSJNMTEgMTAuMjcgNyAzLjM0Ii8+PHBhdGggZD0ibTExIDEzLjczLTQgNi45MyIvPjxwYXRoIGQ9Ik0xMiAyMnYtMiIvPjxwYXRoIGQ9Ik0xMiAydjIiLz48cGF0aCBkPSJNMTQgMTJoOCIvPjxwYXRoIGQ9Im0xNyAyMC42Ni0xLTEuNzMiLz48cGF0aCBkPSJtMTcgMy4zNC0xIDEuNzMiLz48cGF0aCBkPSJNMiAxMmgyIi8+PHBhdGggZD0ibTIwLjY2IDE3LTEuNzMtMSIvPjxwYXRoIGQ9Im0yMC42NiA3LTEuNzMgMSIvPjxwYXRoIGQ9Im0zLjM0IDE3IDEuNzMtMSIvPjxwYXRoIGQ9Im0zLjM0IDcgMS43MyAxIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMiIvPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjgiLz48L3N2Zz4="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtY29nIj48cGF0aCBkPSJNMTEgMTAuMjcgNyAzLjM0Ii8+PHBhdGggZD0ibTExIDEzLjczLTQgNi45MyIvPjxwYXRoIGQ9Ik0xMiAyMnYtMiIvPjxwYXRoIGQ9Ik0xMiAydjIiLz48cGF0aCBkPSJNMTQgMTJoOCIvPjxwYXRoIGQ9Im0xNyAyMC42Ni0xLTEuNzMiLz48cGF0aCBkPSJtMTcgMy4zNC0xIDEuNzMiLz48cGF0aCBkPSJNMiAxMmgyIi8+PHBhdGggZD0ibTIwLjY2IDE3LTEuNzMtMSIvPjxwYXRoIGQ9Im0yMC42NiA3LTEuNzMgMSIvPjxwYXRoIGQ9Im0zLjM0IDE3IDEuNzMtMSIvPjxwYXRoIGQ9Im0zLjM0IDcgMS43MyAxIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMiIvPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjgiLz48L3N2Zz4="); } /* ========================================= HOVER ========================================= */ .bscpl-why-card:hover::before { transform: translateY(-3px) scale(1.05); filter: drop-shadow(0 0 8px rgba(255, 106, 0, 0.22)); } /* BSCPL WHY SECTION — KEEP ARROW NEUTRAL */ .bscpl-why-card a { color: rgba(255, 255, 255, 0.55) !important; transition: color 0.25s ease, transform 0.25s ease !important; } .bscpl-why-card a:hover { color: rgba(255, 255, 255, 0.9) !important; } /* ========================================= BSCPL WHY SECTION KEEP ARROW VISIBLE ON TABLET + MOBILE ========================================= */ .bscpl-why-card { position: relative !important; } /* Keep the existing Zoho arrow/link visible */ @media screen and (max-width: 991px) { .bscpl-why-card a { display: block !important; visibility: visible !important; opacity: 1 !important; position: absolute !important; right: 34px !important; bottom: 48px !important; width: auto !important; height: auto !important; color: rgba(255, 255, 255, 0.55) !important; z-index: 10 !important; } .bscpl-why-card a:hover { color: rgba(255, 255, 255, 0.9) !important; } } /* ========================================= BSCPL — SECTION 05 PRODUCT CARD + FULL WIDTH IMAGE ========================================= */ /* PRODUCT CARD */ /* ========================================= BSCPL — SECTION 05 PREMIUM PRODUCT CARD ========================================= */ .bscpl-product-card { position: relative !important; overflow: hidden !important; /* Subtle glass surface */ background: rgba(255, 255, 255, 0.76) !important; /* Soft premium border */ border: 1px solid rgba(255, 255, 255, 0.90) !important; border-radius: 10px !important; /* Soft glass shadow */ box-shadow: 0 10px 30px rgba(20, 24, 28, 0.07), 0 2px 8px rgba(20, 24, 28, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.90) !important; /* Glass blur */ backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important; } /* ========================================= BSCPL PRODUCTS — FULL WIDTH IMAGE ========================================= */ .bscpl-product-card { overflow: hidden !important; } /* Image element */ .bscpl-product-card .bscpl-product-image { width: calc(100% + 68px) !important; max-width: none !important; margin-left: -34px !important; margin-right: -34px !important; padding: 0 !important; overflow: hidden !important; display: block !important; } /* Zoho image wrappers */ .bscpl-product-card .bscpl-product-image > *, .bscpl-product-card .bscpl-product-image .zpimage-container, .bscpl-product-card .bscpl-product-image .zpimage { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* Actual image */ .bscpl-product-card .bscpl-product-image img { display: block !important; width: 100% !important; max-width: none !important; height: 220px !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center !important; } /* ========================================= IMAGE HOVER ========================================= */ .bscpl-product-card:hover .zpelement-image img { transform: scale(1.035) !important; } /* ========================================= CARD HOVER ========================================= */ /* ========================================= PREMIUM CARD HOVER ========================================= */ .bscpl-product-card:hover { transform: translateY(-5px) !important; border-color: rgba(255, 106, 0, 0.20) !important; box-shadow: 0 20px 42px rgba(20, 24, 28, 0.11), 0 4px 12px rgba(20, 24, 28, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important; } /* ========================================= BSCPL PRODUCTS — ARROW ON TABLET + MOBILE ========================================= */ @media screen and (max-width: 991px) { .bscpl-product-card { position: relative !important; } .bscpl-product-card a { display: block !important; visibility: visible !important; opacity: 1 !important; position: absolute !important; right: 24px !important; bottom: 24px !important; width: auto !important; height: auto !important; z-index: 20 !important; color: #FF6A00 !important; text-decoration: none !important; } .bscpl-product-card a:hover { color: #FF6A00 !important; } } /* ========================================= BSCPL — SECTION 06 INDUSTRIES & APPLICATIONS PREMIUM EDITORIAL SYSTEM ========================================= */ /* ========================================= SECTION BACKGROUND + OVERLAY ========================================= */ .bscpl-industries-section { position: relative !important; background-color: #0F1113 !important; padding-top: 110px !important; padding-bottom: 110px !important; overflow: hidden !important; } /* Dark overlay over the background image */ .bscpl-industries-section::before { content: ""; position: absolute; inset: 0; background: linear-gradient( rgba(8, 10, 12, 0.72), rgba(8, 10, 12, 0.78) ); z-index: 0; pointer-events: none; } /* Keep all real content above overlay */ .bscpl-industries-section > * { position: relative !important; z-index: 1 !important; } /* ========================================= PREMIUM CENTER LINE ========================================= */ .bscpl-industries-section::after { content: ""; position: absolute; top: 225px; bottom: 110px; left: 50%; width: 1px; background: linear-gradient( to bottom, transparent 0%, rgba(255,255,255,0.18) 12%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.18) 88%, transparent 100% ); transform: translateX(-50%); z-index: 0; pointer-events: none; } /* ========================================= TEXT / GLASS PANELS ========================================= */ .bscpl-industry-panel { position: relative !important; background: rgba(255,255,255,0.075) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; border: 1px solid rgba(255,255,255,0.14) !important; border-radius: 6px !important; box-shadow: 0 20px 50px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.06) !important; transition: transform 0.35s ease, background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important; } /* Small orange technical accent */ .bscpl-industry-panel::before { content: ""; position: absolute; left: 28px; top: 28px; width: 34px; height: 2px; background: #FF6A00 !important; opacity: 0.95; } /* ========================================= PANEL TEXT ========================================= */ .bscpl-industry-panel h1, .bscpl-industry-panel h2, .bscpl-industry-panel h3, .bscpl-industry-panel h4 { color: #F5F5F3 !important; } .bscpl-industry-panel p { color: rgba(255,255,255,0.68) !important; } /* ========================================= INDUSTRY PANEL HOVER ========================================= */ .bscpl-industry-panel:hover { transform: translateY(-4px) !important; background: rgba(255,255,255,0.095) !important; border-color: rgba(255,106,0,0.32) !important; box-shadow: 0 28px 60px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.08) !important; } /* ========================================= IMAGE BOX ========================================= */ .bscpl-industry-image { position: relative !important; overflow: hidden !important; border-radius: 6px !important; box-shadow: 0 18px 42px rgba(0,0,0,0.20) !important; } /* Image */ .bscpl-industry-image img { width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; transition: transform 0.7s ease, filter 0.5s ease !important; } /* Slight cinematic image treatment */ .bscpl-industry-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(0,0,0,0.04), rgba(0,0,0,0.18) ); pointer-events: none; } /* Image hover */ .bscpl-industry-image:hover img { transform: scale(1.045) !important; filter: brightness(0.92) !important; } /* ========================================= BSCPL — SECTION 07 SERVICES & CAPABILITIES PREMIUM BUTTERFLY CARDS ========================================= */ /* ========================================= SECTION ========================================= */ .bscpl-services-section { position: relative !important; background: #F6F6F3 !important; padding-top: 105px !important; padding-bottom: 105px !important; overflow: hidden !important; } /* ========================================= SERVICE CARD — BASE ========================================= */ .bscpl-service-card { position: relative !important; min-height: 320px !important; height: auto !important; box-sizing: border-box !important; background: linear-gradient( 145deg, rgba(255,255,255,0.82), rgba(249,249,247,0.62) ) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; border: 1px solid rgba(255,255,255,0.92) !important; box-shadow: 0 14px 35px rgba(22,26,30,0.07), inset 0 1px 0 rgba(255,255,255,0.95) !important; transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease !important; } /* ========================================= SUBTLE GLASS SHEEN ========================================= */ .bscpl-service-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(255,255,255,0.18), transparent 42% ); pointer-events: none !important; opacity: 0.8; } /* ========================================= BUTTERFLY SHAPE ========================================= */ /* TOP ROW */ .bscpl-service-01 { border-radius: 100px 0 100px 100px !important; } .bscpl-service-02 { border-radius: 0 100px 100px 100px !important; } .bscpl-service-03 { border-radius: 100px 0 100px 100px !important; } .bscpl-service-04 { border-radius: 0 100px 100px 100px !important; } /* BOTTOM ROW */ .bscpl-service-05 { border-radius: 100px 100px 100px 0 !important; } .bscpl-service-06 { border-radius: 100px 100px 0 100px !important; } .bscpl-service-07 { border-radius: 100px 100px 100px 0 !important; } .bscpl-service-08 { border-radius: 100px 100px 0 100px !important; } * ========================================= ICONS ========================================= */ .bscpl-service-card img { width: 58px !important; height: 58px !important; object-fit: contain !important; display: block !important; margin-left: auto !important; margin-right: auto !important; transition: transform 0.35s ease, filter 0.35s ease !important; } /* ========================================= ICON HOVER ========================================= */ .bscpl-service-card:hover img { transform: translateY(-4px) scale(1.04) !important; filter: drop-shadow(0 5px 10px rgba(255,106,0,0.16)) !important; } /* ========================================= TITLE ========================================= */ .bscpl-service-card h1, .bscpl-service-card h2, .bscpl-service-card h3, .bscpl-service-card h4 { color: #151719 !important; font-weight: 500 !important; letter-spacing: -0.01em !important; transition: color 0.25s ease !important; } /* ========================================= DESCRIPTION ========================================= */ .bscpl-service-card p { color: #62686D !important; line-height: 1.65 !important; } /* ========================================= CARD HOVER ========================================= */ .bscpl-service-card:hover { transform: translateY(-5px) !important; background: linear-gradient( 145deg, rgba(255,255,255,0.93), rgba(249,249,247,0.76) ) !important; border-color: rgba(255,106,0,0.18) !important; box-shadow: 0 24px 50px rgba(22,26,30,0.11), inset 0 1px 0 rgba(255,255,255,1) !important; } /* ========================================= ORANGE ACCENT ========================================= */ .bscpl-service-card:hover h1, .bscpl-service-card:hover h2, .bscpl-service-card:hover h3, .bscpl-service-card:hover h4 { color: #FF6A00 !important; } /* ========================================= TABLET ========================================= */ @media screen and (max-width: 991px) { .bscpl-services-section { padding-top: 80px !important; padding-bottom: 80px !important; } .bscpl-service-card { min-height: 300px !important; } .bscpl-service-card img { width: 52px !important; height: 52px !important; } } /* ========================================= MOBILE ========================================= */ @media screen and (max-width: 767px) { .bscpl-services-section { padding-top: 70px !important; padding-bottom: 70px !important; } .bscpl-service-card { min-height: 300px !important; border-radius: 70px !important; } .bscpl-service-card img { width: 50px !important; height: 50px !important; } } /* ========================================= BSCPL — SECTION 07 LUCIDE SERVICE ICON SYSTEM ========================================= */ /* Keep original Zoho icon space, but make it invisible */ .bscpl-service-card .zpelement-image, .bscpl-service-card .zpelement-image img { opacity: 0 !important; visibility: hidden !important; } /* ========================================= BASE CUSTOM ICON ========================================= */ .bscpl-service-card::before { content: ""; position: absolute; top: 38px; left: 50%; width: 54px; height: 54px; transform: translateX(-50%); background-color: #FF6A00 !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-position: center !important; mask-position: center !important; -webkit-mask-size: 50px 50px !important; mask-size: 50px 50px !important; z-index: 5 !important; transition: transform 0.3s ease, filter 0.3s ease !important; } /* ========================================= 01 — CASTING Lucide Flame ========================================= */ .bscpl-icon-01::before { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWZsYW1lIj48cGF0aCBkPSJNMTIgM3ExIDQgNCA2LjV0MyA1LjVhMSAxIDAgMCAxLTE0IDAgNSA1IDAgMCAxIDEtMyAxIDEgMCAwIDAgNSAwYzAtMi0xLjUtMy0xLjUtNXEwLTIgMi41LTQiLz48L3N2Zz4="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWZsYW1lIj48cGF0aCBkPSJNMTIgM3ExIDQgNCA2LjV0MyA1LjVhMSAxIDAgMCAxLTE0IDAgNSA1IDAgMCAxIDEtMyAxIDEgMCAwIDAgNSAwYzAtMi0xLjUtMy0xLjUtNXEwLTIgMi41LTQiLz48L3N2Zz4="); } /* ========================================= 02 — HEAT TREATMENT Lucide Thermometer Sun ========================================= */ .bscpl-icon-02::before { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtdGhlcm1vbWV0ZXItc3VuIj48cGF0aCBkPSJNMTIgMnYyIi8+PHBhdGggZD0iTTEyIDhhNCA0IDAgMCAwLTEuNjQ1IDcuNjQ3Ii8+PHBhdGggZD0iTTIgMTJoMiIvPjxwYXRoIGQ9Ik0yMCAxNC41NGE0IDQgMCAxIDEtNCAwVjRhMiAyIDAgMCAxIDQgMHoiLz48cGF0aCBkPSJtNC45MyA0LjkzIDEuNDEgMS40MSIvPjxwYXRoIGQ9Im02LjM0IDE3LjY2LTEuNDEgMS40MSIvPjwvc3ZnPg=="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtdGhlcm1vbWV0ZXItc3VuIj48cGF0aCBkPSJNMTIgMnYyIi8+PHBhdGggZD0iTTEyIDhhNCA0IDAgMCAwLTEuNjQ1IDcuNjQ3Ii8+PHBhdGggZD0iTTIgMTJoMiIvPjxwYXRoIGQ9Ik0yMCAxNC41NGE0IDQgMCAxIDEtNCAwVjRhMiAyIDAgMCAxIDQgMHoiLz48cGF0aCBkPSJtNC45MyA0LjkzIDEuNDEgMS40MSIvPjxwYXRoIGQ9Im02LjM0IDE3LjY2LTEuNDEgMS40MSIvPjwvc3ZnPg=="); } /* ========================================= 03 — 3D DESIGN Lucide Shield Check ========================================= */ .bscpl-icon-03::before { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtc2hpZWxkLWNoZWNrIj48cGF0aCBkPSJNMjAgMTNjMCA1LTMuNSA3LjUtNy42NiA4Ljk1YTEgMSAwIDAgMS0uNjctLjAxQzcuNSAyMC41IDQgMTggNCAxM1Y2YTEgMSAwIDAgMSAxLTFjMiAwIDQuNS0xLjIgNi4yNC0yLjcyYTEuMTcgMS4xNyAwIDAgMSAxLjUyIDBDMTQuNTEgMy44MSAxNyA1IDE5IDVhMSAxIDAgMCAxIDEgMXoiLz48cGF0aCBkPSJtOSAxMiAyIDIgNC00Ii8+PC9zdmc+"); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtc2hpZWxkLWNoZWNrIj48cGF0aCBkPSJNMjAgMTNjMCA1LTMuNSA3LjUtNy42NiA4Ljk1YTEgMSAwIDAgMS0uNjctLjAxQzcuNSAyMC41IDQgMTggNCAxM1Y2YTEgMSAwIDAgMSAxLTFjMiAwIDQuNS0xLjIgNi4yNC0yLjcyYTEuMTcgMS4xNyAwIDAgMSAxLjUyIDBDMTQuNTEgMy44MSAxNyA1IDE5IDVhMSAxIDAgMCAxIDEgMXoiLz48cGF0aCBkPSJtOSAxMiAyIDIgNC00Ii8+PC9zdmc+"); } /* ========================================= 04 — QUALITY TESTING Lucide Box ========================================= */ .bscpl-icon-04::before { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtYm94Ij48cGF0aCBkPSJNMjEgOGEyIDIgMCAwIDAtMS0xLjczbC03LTRhMiAyIDAgMCAwLTIgMGwtNyA0QTIgMiAwIDAgMCAzIDh2OGEyIDIgMCAwIDAgMSAxLjczbDcgNGEyIDIgMCAwIDAgMiAwbDctNEEyIDIgMCAwIDAgMjEgMTZaIi8+PHBhdGggZD0ibTMuMyA3IDguNyA1IDguNy01Ii8+PHBhdGggZD0iTTEyIDIyVjEyIi8+PC9zdmc+"); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtYm94Ij48cGF0aCBkPSJNMjEgOGEyIDIgMCAwIDAtMS0xLjczbC03LTRhMiAyIDAgMCAwLTIgMGwtNyA0QTIgMiAwIDAgMCAzIDh2OGEyIDIgMCAwIDAgMSAxLjczbDcgNGEyIDIgMCAwIDAgMiAwbDctNEEyIDIgMCAwIDAgMjEgMTZaIi8+PHBhdGggZD0ibTMuMyA3IDguNyA1IDguNy01Ii8+PHBhdGggZD0iTTEyIDIyVjEyIi8+PC9zdmc+"); } /* ========================================= 05 — CHEMICAL ANALYSIS ========================================= */ .bscpl-icon-05::before { background-color: transparent !important; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtYmljZXBzLWZsZXhlZCI+PHBhdGggZD0iTTEyLjQwOSAxMy4wMTdBNSA1IDAgMCAxIDIyIDE1YzAgMy44NjYtNCA3LTkgNy00LjA3NyAwLTguMTUzLS44Mi0xMC4zNzEtMi40NjItLjQyNi0uMzE2LS42MzEtLjgzMi0uNjItMS4zNjJDMi4xMTggMTIuNzIzIDIuNjI3IDIgMTAgMmEzIDMgMCAwIDEgMyAzIDIgMiAwIDAgMS0yIDJjLTEuMTA1IDAtMS42NC0uNDQ0LTItMSIvPjxwYXRoIGQ9Ik0xNSAxNGE1IDUgMCAwIDAtNy41ODQgMiIvPjxwYXRoIGQ9Ik05Ljk2NCA2LjgyNUM4LjAxOSA3Ljk3NyA5LjUgMTMgOCAxNSIvPjwvc3ZnPg==") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 50px 50px !important; filter: brightness(0) saturate(100%) invert(48%) sepia(99%) saturate(3036%) hue-rotate(4deg) brightness(103%) contrast(103%) !important; } /* ========================================= 06 — MECHANICAL TESTING ========================================= */ .bscpl-icon-06::before { background-color: transparent !important; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtZmxhc2stY29uaWNhbCI+PHBhdGggZD0iTTE0IDJ2NmEyIDIgMCAwIDAgLjI0NS45Nmw1LjUxIDEwLjA4QTIgMiAwIDAgMSAxOCAyMkg2YTIgMiAwIDAgMS0xLjc1NS0yLjk2bDUuNTEtMTAuMDhBMiAyIDAgMCAwIDEwIDhWMiIvPjxwYXRoIGQ9Ik02LjQ1MyAxNWgxMS4wOTQiLz48cGF0aCBkPSJNOC41IDJoNyIvPjwvc3ZnPg==") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 50px 50px !important; filter: brightness(0) saturate(100%) invert(48%) sepia(99%) saturate(3036%) hue-rotate(4deg) brightness(103%) contrast(103%) !important; } /* ========================================= 07 — NDT TESTING ========================================= */ .bscpl-icon-07::before { background-color: transparent !important; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtc2VhcmNoLWNoZWNrIj48cGF0aCBkPSJtOCAxMSAyIDIgNC00Ii8+PGNpcmNsZSBjeD0iMTEiIGN5PSIxMSIgcj0iOCIvPjxwYXRoIGQ9Im0yMSAyMS00LjMtNC4zIi8+PC9zdmc+") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 50px 50px !important; filter: brightness(0) saturate(100%) invert(48%) sepia(99%) saturate(3036%) hue-rotate(4deg) brightness(103%) contrast(103%) !important; } /* ========================================= 08 — MACHINING & FABRICATION ========================================= */ .bscpl-icon-08::before { background-color: transparent !important; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtcm9ib3QtYXJtIj48cGF0aCBkPSJNMTIgMjEgNy41IDguMzIyIi8+PHBhdGggZD0ibTE0IDcgMS43NS0zLjc2N2EuNS41IDAgMCAxIC42NjItLjE3MkwyMCA1LjAwNSIvPjxwYXRoIGQ9Im0yMCA4Ljk5OC0zLjU4OCAxLjk0NGEuNS41IDAgMCAxLS42NjItLjE3MkwxNCA3SDgiLz48cGF0aCBkPSJNMy40ODYgMjFoMTAiLz48cGF0aCBkPSJNNSAyMVY4LjczMiIvPjxjaXJjbGUgY3g9IjYiIGN5PSI3IiByPSIyIi8+PC9zdmc+") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 50px 50px !important; filter: brightness(0) saturate(100%) invert(48%) sepia(99%) saturate(3036%) hue-rotate(4deg) brightness(103%) contrast(103%) !important; } /* ========================================= BSCPL — SECTION 09 FACILITY GRID ZOHO WRAPPER FIX ========================================= */ /* ========================================= RIGHT COLUMN ========================================= */ .bscpl-facility-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; align-items: stretch !important; } /* ========================================= IMPORTANT ZOHO FIX Remove the extra wrapper's layout effect ========================================= */ .bscpl-facility-grid > * { display: contents !important; } /* ========================================= FACILITY CARD ========================================= */ .bscpl-facility-card { position: relative !important; width: 100% !important; min-width: 0 !important; min-height: 145px !important; height: auto !important; box-sizing: border-box !important; padding: 24px !important; margin: 0 !important; overflow: visible !important; background: rgba(255,255,255,0.62) !important; border: 1px solid rgba(255,255,255,0.90) !important; border-radius: 10px !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; box-shadow: 0 10px 28px rgba(20,24,28,0.06), inset 0 1px 0 rgba(255,255,255,0.92) !important; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important; } /* ========================================= ORANGE ACCENT ========================================= */ .bscpl-facility-card::before { content: ""; position: absolute; left: 24px; top: 20px; width: 28px; height: 2px; background: #FF6A00 !important; } /* ========================================= CARD CONTENT ========================================= */ .bscpl-facility-card h1, .bscpl-facility-card h2, .bscpl-facility-card h3, .bscpl-facility-card h4 { color: #123F55 !important; font-weight: 600 !important; margin-bottom: 8px !important; } .bscpl-facility-card p { color: #687177 !important; line-height: 1.5 !important; margin-bottom: 0 !important; } /* ========================================= HOVER ========================================= */ .bscpl-facility-card:hover { transform: translateY(-3px) !important; border-color: rgba(255,106,0,0.20) !important; box-shadow: 0 18px 36px rgba(20,24,28,0.10), inset 0 1px 0 rgba(255,255,255,0.96) !important; } /* ========================================= TABLET ========================================= */ @media screen and (max-width: 991px) { .bscpl-facility-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } .bscpl-facility-card { min-height: 140px !important; padding: 20px !important; } } /* ========================================= MOBILE ========================================= */ @media screen and (max-width: 767px) { .bscpl-facility-grid { grid-template-columns: 1fr !important; gap: 12px !important; } .bscpl-facility-card { min-height: 125px !important; height: auto !important; } }