{"id":8,"date":"2026-06-09T12:38:56","date_gmt":"2026-06-09T12:38:56","guid":{"rendered":"https:\/\/staging.samplesite.top\/binnaeng\/?page_id=8"},"modified":"2026-10-28T05:51:41","modified_gmt":"2026-10-28T05:51:41","slug":"home","status":"publish","type":"page","link":"https:\/\/staging.samplesite4u.com\/binnaeng\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"8\" class=\"elementor elementor-8\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5002330 e-con-full e-flex e-con e-parent\" data-id=\"5002330\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-b7c7ba5 e-con-full e-flex e-con e-child\" data-id=\"b7c7ba5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5efbcd1 elementor-widget elementor-widget-html\" data-id=\"5efbcd1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Swiper CSS & Font Awesome -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.css\" \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\" \/>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;700;800;900&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n.hero-slider {\r\n    position: relative;\r\n    height: 750px;\r\n    overflow: hidden;\r\n    background: #08152E;\r\n    font-family: 'Montserrat', sans-serif;\r\n    --mx: 0;\r\n    --my: 0;\r\n    --gx: 70%;\r\n    --gy: 40%;\r\n}\r\n\r\n.hero-slider h1,\r\n.hero-slider h2,\r\n.hero-slider p,\r\n.hero-slider a,\r\n.hero-slider .hero-eyebrow,\r\n.hero-slider .hero-counter {\r\n    font-family: 'Montserrat', sans-serif !important;\r\n}\r\n\r\n.hero-slider .swiper-slide {\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n\/* ---------- DIRECTION: each slide enters from its own side (set with data-dir on the slide) ---------- *\/\r\n\/* --ox \/ --oy  = where text, buttons and labels start from\r\n   --tx \/ --ty  = where the title lines start from (inside their mask)\r\n   --bx \/ --by  = where the background photo drifts in from *\/\r\n.hero-slider .swiper-slide[data-dir=\"left\"] {\r\n    --ox: -90px; --oy: 0px;\r\n    --tx: -112%; --ty: 0%;\r\n    --bx: -3%;   --by: 0%;\r\n}\r\n.hero-slider .swiper-slide[data-dir=\"right\"] {\r\n    --ox: 90px;  --oy: 0px;\r\n    --tx: 112%;  --ty: 0%;\r\n    --bx: 3%;    --by: 0%;\r\n}\r\n.hero-slider .swiper-slide[data-dir=\"top\"] {\r\n    --ox: 0px;   --oy: -60px;\r\n    --tx: 0%;    --ty: -112%;\r\n    --bx: 0%;    --by: -3%;\r\n}\r\n.hero-slider .swiper-slide[data-dir=\"bottom\"] {\r\n    --ox: 0px;   --oy: 60px;\r\n    --tx: 0%;    --ty: 112%;\r\n    --bx: 0%;    --by: 3%;\r\n}\r\n\r\n\/* ---------- BACKGROUND: Ken Burns + mouse parallax ---------- *\/\r\n.hero-parallax {\r\n    position: absolute;\r\n    inset: -34px;\r\n    z-index: 0;\r\n    transform: translate3d(calc(var(--mx) * -22px), calc(var(--my) * -16px), 0);\r\n    transition: transform .5s ease-out;\r\n    will-change: transform;\r\n}\r\n\r\n.hero-bg {\r\n    position: absolute;\r\n    inset: 0;\r\n    background-size: cover;\r\n    background-position: center;\r\n    transform: scale(1.18) translate3d(var(--bx, 0%), var(--by, 0%), 0);   \/* DIRECTION: photo starts offset toward the entry side *\/\r\n    transition: transform 0s 1.4s;\r\n}\r\n\r\n.hero-bg.o2 { transform-origin: 20% 50%; }\r\n.hero-bg.o3 { transform-origin: 80% 70%; }\r\n\r\n.swiper-slide-active .hero-bg {\r\n    transform: scale(1.02) translate3d(0, 0, 0);                            \/* DIRECTION: photo drifts into place *\/\r\n    transition: transform 9s cubic-bezier(.2, .6, .2, 1);\r\n}\r\n\r\n\/* OVERLAY *\/\r\n.hero-overlay {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 1;\r\n    background: linear-gradient(\r\n        90deg,\r\n        rgba(8, 21, 46, 0.85) 0%,\r\n        rgba(8, 21, 46, 0.60) 40%,\r\n        rgba(8, 21, 46, 0.30) 100%\r\n    );\r\n}\r\n\r\n\/* Orange light that follows the mouse *\/\r\n.hero-glow {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 2;\r\n    pointer-events: none;\r\n    background: radial-gradient(520px circle at var(--gx) var(--gy), rgba(255, 107, 0, .20), transparent 65%);\r\n    mix-blend-mode: screen;\r\n}\r\n\r\n\/* ---------- INNER CONTAINER ---------- *\/\r\n.hero-inner {\r\n    position: relative;\r\n    z-index: 5;\r\n    box-sizing: border-box;\r\n    max-width: 1200px;\r\n    margin: auto;\r\n    height: 100%;\r\n    display: flex;\r\n    align-items: center;\r\n    padding-left: 0;\r\n    padding-right: 40px;\r\n}\r\n\r\n.hero-content {\r\n    max-width: 750px;\r\n    margin: 0;\r\n    text-align: left;\r\n}\r\n\r\n\/* ---------- TEXT ANIMATION SYSTEM ---------- *\/\r\n\/* Generic entrance (resets only after the slide has faded out) *\/\r\n.hero-slider .fx {\r\n    opacity: 0;\r\n    transform: translate3d(var(--ox, 0px), var(--oy, 34px), 0);   \/* DIRECTION: starts from the slide's entry side *\/\r\n    transition: opacity 0s 1.4s, transform 0s 1.4s;\r\n}\r\n\r\n.hero-slider .swiper-slide-active .fx {\r\n    opacity: 1;\r\n    transform: none;\r\n    transition:\r\n        opacity .9s cubic-bezier(.2, .8, .2, 1) var(--d, .9s),\r\n        transform .9s cubic-bezier(.2, .8, .2, 1) var(--d, .9s);\r\n}\r\n\r\n\/* Eyebrow label with drawing line *\/\r\n.hero-eyebrow {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 14px;\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    letter-spacing: 3px;\r\n    text-transform: uppercase;\r\n    color: #FF6B00 !important;\r\n    margin-bottom: 22px;\r\n}\r\n\r\n.hero-eyebrow::before {\r\n    content: \"\";\r\n    width: 0;\r\n    height: 2px;\r\n    background: #FF6B00;\r\n    transition: width 0s 1.4s;\r\n}\r\n\r\n.hero-slider .swiper-slide-active .hero-eyebrow::before {\r\n    width: 56px;\r\n    transition: width .9s cubic-bezier(.2, .8, .2, 1) .8s;\r\n}\r\n\r\n\/* Title: each line slides out of a mask, from the slide's entry side *\/\r\n.hero-title {\r\n    font-size: 52px;\r\n    line-height: 1.1;\r\n    font-weight: 900;\r\n    color: #FFFFFF !important;\r\n    text-transform: uppercase;\r\n    margin: 0 0 20px;\r\n    white-space: normal;\r\n}\r\n\r\n.hero-title .line {\r\n    display: block;\r\n    overflow: hidden;\r\n    padding-bottom: .08em;\r\n}\r\n\r\n.hero-title .line > span {\r\n    display: block;\r\n    color: #FFFFFF !important;\r\n    transform: translate3d(var(--tx, 0%), var(--ty, 112%), 0);   \/* DIRECTION *\/\r\n    transition: transform 0s 1.4s;\r\n}\r\n\r\n.hero-slider .swiper-slide-active .hero-title .line > span {\r\n    transform: none;\r\n    transition: transform 1s cubic-bezier(.2, .8, .2, 1) calc(.8s + var(--i) * .13s);\r\n}\r\n\r\n.hero-text {\r\n    font-size: 18px;\r\n    line-height: 1.6;\r\n    color: rgba(255, 255, 255, 0.9) !important;\r\n    margin: 0 0 30px;\r\n    max-width: 600px;\r\n}\r\n\r\n.hero-buttons {\r\n    display: flex;\r\n    gap: 20px;\r\n    justify-content: flex-start;\r\n}\r\n\r\n\/* ---------- BUTTONS ---------- *\/\r\n.btn-primary {\r\n    position: relative;\r\n    overflow: hidden;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n    background: #FF6B00;\r\n    color: #fff !important;\r\n    padding: 16px 30px;\r\n    text-decoration: none;\r\n    font-weight: 700;\r\n    letter-spacing: 1px;\r\n    border-radius: 4px;\r\n    box-shadow: 0 10px 30px rgba(255, 107, 0, .35);\r\n    transition: background .3s ease, transform .25s ease, box-shadow .3s ease;\r\n    animation: btnpulse 2.8s ease-out infinite;\r\n}\r\n\r\n.btn-primary::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 0;\r\n    left: -80%;\r\n    width: 50%;\r\n    height: 100%;\r\n    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);\r\n    transform: skewX(-20deg);\r\n    transition: left .7s ease;\r\n}\r\n\r\n.btn-primary:hover {\r\n    background: #F58220;\r\n    box-shadow: 0 14px 36px rgba(255, 107, 0, .5);\r\n}\r\n\r\n.btn-primary:hover::before { left: 130%; }\r\n.btn-primary i { transition: transform .3s ease; }\r\n.btn-primary:hover i { transform: translateX(6px); }\r\n\r\n@keyframes btnpulse {\r\n    0%   { box-shadow: 0 10px 30px rgba(255, 107, 0, .35), 0 0 0 0 rgba(255, 107, 0, .55); }\r\n    70%, 100% { box-shadow: 0 10px 30px rgba(255, 107, 0, .35), 0 0 0 16px rgba(255, 107, 0, 0); }\r\n}\r\n\r\n.btn-secondary {\r\n    border: 1px solid #FFFFFF;\r\n    color: #FFFFFF;\r\n    padding: 15px 30px;\r\n    text-decoration: none;\r\n    font-weight: 700;\r\n    border-radius: 4px;\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n.btn-secondary:hover {\r\n    background: #FFFFFF;\r\n    color: #08152E;\r\n}\r\n\r\n\/* ---------- SLIDE-CHANGE CURTAIN (DIRECTION: sweeps from the same side the next slide enters) ---------- *\/\r\n.hero-wipe {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 8;\r\n    pointer-events: none;\r\n    overflow: hidden;\r\n}\r\n\r\n.hero-wipe span {\r\n    position: absolute;\r\n    inset: 0;\r\n    transform: scaleX(0);\r\n    transform-origin: left;\r\n}\r\n\r\n.hero-wipe .w1 { background: #FF6B00; }\r\n.hero-wipe .w2 { background: #08152E; }\r\n\r\n\/* default = from the left *\/\r\n.hero-wipe.go .w1 { animation: wipeL 1.2s cubic-bezier(.77, 0, .18, 1) forwards; }\r\n.hero-wipe.go .w2 { animation: wipeL 1.2s .12s cubic-bezier(.77, 0, .18, 1) forwards; }\r\n\r\n.hero-wipe[data-dir=\"right\"].go .w1,\r\n.hero-wipe[data-dir=\"right\"].go .w2  { animation-name: wipeR; }\r\n\r\n.hero-wipe[data-dir=\"top\"].go .w1,\r\n.hero-wipe[data-dir=\"top\"].go .w2    { animation-name: wipeT; }\r\n\r\n.hero-wipe[data-dir=\"bottom\"].go .w1,\r\n.hero-wipe[data-dir=\"bottom\"].go .w2 { animation-name: wipeB; }\r\n\r\n@keyframes wipeL {\r\n    0%      { transform: scaleX(0); transform-origin: left; }\r\n    50%     { transform: scaleX(1); transform-origin: left; }\r\n    50.01%  { transform: scaleX(1); transform-origin: right; }\r\n    100%    { transform: scaleX(0); transform-origin: right; }\r\n}\r\n\r\n@keyframes wipeR {\r\n    0%      { transform: scaleX(0); transform-origin: right; }\r\n    50%     { transform: scaleX(1); transform-origin: right; }\r\n    50.01%  { transform: scaleX(1); transform-origin: left; }\r\n    100%    { transform: scaleX(0); transform-origin: left; }\r\n}\r\n\r\n@keyframes wipeT {\r\n    0%      { transform: scaleY(0); transform-origin: top; }\r\n    50%     { transform: scaleY(1); transform-origin: top; }\r\n    50.01%  { transform: scaleY(1); transform-origin: bottom; }\r\n    100%    { transform: scaleY(0); transform-origin: bottom; }\r\n}\r\n\r\n@keyframes wipeB {\r\n    0%      { transform: scaleY(0); transform-origin: bottom; }\r\n    50%     { transform: scaleY(1); transform-origin: bottom; }\r\n    50.01%  { transform: scaleY(1); transform-origin: top; }\r\n    100%    { transform: scaleY(0); transform-origin: top; }\r\n}\r\n\r\n\/* ---------- EXPERIENCE BOX ---------- *\/\r\n.experience-box {\r\n    position: absolute;\r\n    right: 100px;\r\n    top: 120px;\r\n    width: 170px;\r\n    height: 170px;\r\n    background: #08152E;\r\n    color: #fff;\r\n    z-index: 10;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: center;\r\n    box-shadow: 0 30px 60px rgba(0,0,0,.3);\r\n    border: 1px solid rgba(255,255,255,0.1);\r\n    animation:\r\n        boxIn 1s .3s cubic-bezier(.2, .8, .2, 1) both,\r\n        floaty 5s 1.3s ease-in-out infinite;\r\n}\r\n\r\n.experience-box::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    border: 1px solid #FF6B00;\r\n    pointer-events: none;\r\n    animation: ring 2.8s ease-out infinite;\r\n}\r\n\r\n.experience-box::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    left: 0;\r\n    bottom: 0;\r\n    width: 100%;\r\n    height: 4px;\r\n    background: #FF6B00;\r\n    transform-origin: left;\r\n    animation: bar 6s linear infinite;\r\n}\r\n\r\n.experience-box h2 {\r\n    color: #ffffff !important;\r\n    font-size: 60px;\r\n    line-height: 1;\r\n    font-weight: 800;\r\n    margin: 0;\r\n}\r\n\r\n.experience-box p {\r\n    font-size: 12px;\r\n    letter-spacing: 2px;\r\n    text-transform: uppercase;\r\n    text-align: center;\r\n    color: #fff !important;\r\n    margin: 6px 0 0;\r\n}\r\n\r\n@keyframes boxIn {\r\n    from { opacity: 0; transform: translateY(-40px) scale(.85); }\r\n    to   { opacity: 1; transform: none; }\r\n}\r\n@keyframes floaty {\r\n    0%, 100% { transform: translateY(0); }\r\n    50%      { transform: translateY(-10px); }\r\n}\r\n@keyframes ring {\r\n    0%   { transform: scale(1); opacity: .7; }\r\n    100% { transform: scale(1.28); opacity: 0; }\r\n}\r\n@keyframes bar {\r\n    from { transform: scaleX(0); }\r\n    to   { transform: scaleX(1); }\r\n}\r\n\r\n\/* ---------- BOTTOM CONTROLS ---------- *\/\r\n.hero-controls {\r\n    position: absolute;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 44px;\r\n    z-index: 20;\r\n    box-sizing: border-box;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    pointer-events: none;\r\n}\r\n\r\n.hero-controls > * { pointer-events: auto; }\r\n\r\n.hero-left {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 22px;\r\n}\r\n\r\n.hero-counter {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    color: #fff;\r\n    font-weight: 800;\r\n    font-size: 15px;\r\n    letter-spacing: 2px;\r\n    font-variant-numeric: tabular-nums;\r\n}\r\n\r\n.hero-counter .tot { opacity: .5; }\r\n.hero-counter .sep { width: 28px; height: 1px; background: rgba(255,255,255,.5); }\r\n.hero-counter .cur.tick { animation: tick .5s ease; }\r\n\r\n@keyframes tick {\r\n    from { opacity: 0; transform: translateY(10px); }\r\n    to   { opacity: 1; transform: none; }\r\n}\r\n\r\n\/* progress-bar pagination *\/\r\n.hero-slider .swiper-pagination {\r\n    position: static !important;\r\n    width: auto !important;\r\n    display: flex;\r\n    gap: 10px;\r\n    transform: none !important;\r\n}\r\n\r\n.hero-slider .swiper-pagination-bullet {\r\n    position: relative;\r\n    width: 56px;\r\n    height: 3px;\r\n    margin: 0 !important;\r\n    border-radius: 0;\r\n    background: rgba(255, 255, 255, 0.3);\r\n    opacity: 1;\r\n    overflow: hidden;\r\n    cursor: pointer;\r\n}\r\n\r\n.hero-slider .swiper-pagination-bullet i {\r\n    position: absolute;\r\n    left: 0;\r\n    top: 0;\r\n    height: 100%;\r\n    width: 0;\r\n    background: #FF6B00;\r\n}\r\n\r\n.hero-slider .swiper-pagination-bullet-active i {\r\n    animation: fill 6s linear forwards;\r\n}\r\n\r\n.hero-slider:hover .swiper-pagination-bullet-active i {\r\n    animation-play-state: paused;\r\n}\r\n\r\n@keyframes fill { to { width: 100%; } }\r\n\r\n.swiper-nav {\r\n    display: flex;\r\n    gap: 10px;\r\n}\r\n\r\n.hero-slider .swiper-prev,\r\n.hero-slider .swiper-next {\r\n    width: 48px;\r\n    height: 48px;\r\n    background: rgba(255, 255, 255, 0.15);\r\n    color: #fff;\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    transition: background .3s ease, transform .3s ease, border-color .3s ease;\r\n    border: 1px solid rgba(255, 255, 255, 0.2);\r\n    backdrop-filter: blur(4px);\r\n    -webkit-backdrop-filter: blur(4px);\r\n}\r\n\r\n.hero-slider .swiper-prev:hover,\r\n.hero-slider .swiper-next:hover {\r\n    background: #FF6B00;\r\n    border-color: #FF6B00;\r\n    transform: translateY(-3px);\r\n}\r\n\r\n\/* ---------- RESPONSIVE ---------- *\/\r\n@media(max-width:1240px){\r\n    .hero-inner { padding-left: 20px; }\r\n    .hero-controls { padding: 0 20px; }\r\n}\r\n\r\n@media(max-width:991px){\r\n    .hero-title { font-size: 42px; }\r\n    .experience-box {\r\n        right: 40px;\r\n        top: 90px;\r\n        width: 140px;\r\n        height: 140px;\r\n    }\r\n    .experience-box h2 { font-size: 48px; }\r\n}\r\n\r\n@media(max-width:768px){\r\n    .hero-slider { height: 650px; }\r\n\r\n    .hero-inner {\r\n        padding: 70px 15px 90px;\r\n    }\r\n\r\n    .hero-title { font-size: 30px; }\r\n\r\n    .hero-eyebrow {\r\n        font-size: 11px;\r\n        letter-spacing: 2px;\r\n        margin-bottom: 16px;\r\n    }\r\n\r\n    .hero-text {\r\n        font-size: 15px;\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n    .hero-buttons {\r\n        flex-direction: column;\r\n        align-items: flex-start;\r\n        gap: 10px;\r\n    }\r\n\r\n    \/* DIRECTION: shorter travel distance on phones *\/\r\n    .hero-slider .swiper-slide[data-dir=\"left\"]   { --ox: -40px; }\r\n    .hero-slider .swiper-slide[data-dir=\"right\"]  { --ox: 40px; }\r\n    .hero-slider .swiper-slide[data-dir=\"top\"]    { --oy: -40px; }\r\n    .hero-slider .swiper-slide[data-dir=\"bottom\"] { --oy: 40px; }\r\n\r\n    \/* 25+ box: small, pinned to the TOP RIGHT so it never covers the text *\/\r\n    .experience-box {\r\n        width: 86px;\r\n        height: 86px;\r\n        right: 14px;\r\n        top: 14px;\r\n        box-shadow: 0 10px 24px rgba(0,0,0,.3);\r\n    }\r\n    .experience-box h2 { font-size: 28px; }\r\n    .experience-box p {\r\n        font-size: 8px;\r\n        letter-spacing: 1px;\r\n        line-height: 1.3;\r\n        margin-top: 3px;\r\n        padding: 0 6px;\r\n    }\r\n    .experience-box::after { height: 3px; }\r\n\r\n    .hero-controls {\r\n        bottom: 22px;\r\n        padding: 0 16px;\r\n    }\r\n    .hero-counter { display: none; }\r\n    .hero-slider .swiper-pagination-bullet { width: 36px; }\r\n    .hero-slider .swiper-prev,\r\n    .hero-slider .swiper-next {\r\n        width: 40px;\r\n        height: 40px;\r\n    }\r\n}\r\n\r\n@media(max-width:480px){\r\n    .hero-title { font-size: 26px; }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce){\r\n    .hero-slider .fx,\r\n    .hero-title .line > span {\r\n        opacity: 1 !important;\r\n        transform: none !important;\r\n        transition: none !important;\r\n    }\r\n    .hero-bg,\r\n    .hero-parallax,\r\n    .experience-box,\r\n    .experience-box::before,\r\n    .experience-box::after,\r\n    .btn-primary,\r\n    .hero-wipe span {\r\n        animation: none !important;\r\n        transition: none !important;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<div class=\"swiper hero-slider\">\r\n    <div class=\"swiper-wrapper\">\r\n\r\n        <!-- SLIDE 1: enters from the LEFT -->\r\n        <div class=\"swiper-slide\" data-dir=\"left\">\r\n            <div class=\"hero-parallax\">\r\n                <div class=\"hero-bg o1\" style=\"background-image:url('https:\/\/staging.samplesite4u.com\/binnaeng\/wp-content\/uploads\/2026\/10\/makei.png');\"><\/div>\r\n            <\/div>\r\n            <div class=\"hero-overlay\"><\/div>\r\n            <div class=\"hero-glow\"><\/div>\r\n            <div class=\"hero-inner\">\r\n                <div class=\"hero-content\">\r\n                    <div class=\"hero-eyebrow fx\" style=\"--d:.7s\">Quality Assured<\/div>\r\n                    <h1 class=\"hero-title\">\r\n                        <span class=\"line\" style=\"--i:0\"><span>GUARANTEED QUALITY<\/span><\/span>\r\n                        <span class=\"line\" style=\"--i:1\"><span>IN MODERN<\/span><\/span>\r\n                        <span class=\"line\" style=\"--i:2\"><span>CONSTRUCTION<\/span><\/span>\r\n                    <\/h1>\r\n                    <p class=\"hero-text fx\" style=\"--d:1.2s\">\r\n                        Bring to the table win-win survival strategies to ensure proactive domination.\r\n                    <\/p>\r\n                    <div class=\"hero-buttons fx\" style=\"--d:1.35s\">\r\n                        <a href=\"https:\/\/staging.samplesite4u.com\/binnaeng\/get-a-quote\/\" class=\"btn-primary\">GET A QUOTE <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- SLIDE 2: enters from the RIGHT -->\r\n        <div class=\"swiper-slide\" data-dir=\"right\">\r\n            <div class=\"hero-parallax\">\r\n                <div class=\"hero-bg o2\" style=\"background-image:url('https:\/\/staging.samplesite4u.com\/binnaeng\/wp-content\/uploads\/2026\/10\/ima.png');\"><\/div>\r\n            <\/div>\r\n            <div class=\"hero-overlay\"><\/div>\r\n            <div class=\"hero-glow\"><\/div>\r\n            <div class=\"hero-inner\">\r\n                <div class=\"hero-content\">\r\n                    <div class=\"hero-eyebrow fx\" style=\"--d:.7s\">Engineering Excellence<\/div>\r\n                    <h1 class=\"hero-title\">\r\n                        <span class=\"line\" style=\"--i:0\"><span>BUILDING THE FUTURE<\/span><\/span>\r\n                        <span class=\"line\" style=\"--i:1\"><span>WITH UNMATCHED<\/span><\/span>\r\n                        <span class=\"line\" style=\"--i:2\"><span>EXCELLENCE<\/span><\/span>\r\n                    <\/h1>\r\n                    <p class=\"hero-text fx\" style=\"--d:1.2s\">\r\n                        Creating world-class projects with precision engineering and innovation.\r\n                    <\/p>\r\n                    <div class=\"hero-buttons fx\" style=\"--d:1.35s\">\r\n                        <a href=\"https:\/\/staging.samplesite4u.com\/binnaeng\/contactus\/\" class=\"btn-primary\">CONTACT US <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- SLIDE 3: enters from the BOTTOM -->\r\n        <div class=\"swiper-slide\" data-dir=\"bottom\">\r\n            <div class=\"hero-parallax\">\r\n                <div class=\"hero-bg o3\" style=\"background-image:url('https:\/\/staging.samplesite4u.com\/binnaeng\/wp-content\/uploads\/2026\/06\/construction-certifications-hero.png');\"><\/div>\r\n            <\/div>\r\n            <div class=\"hero-overlay\"><\/div>\r\n            <div class=\"hero-glow\"><\/div>\r\n            <div class=\"hero-inner\">\r\n                <div class=\"hero-content\">\r\n                    <div class=\"hero-eyebrow fx\" style=\"--d:.7s\">Commercial &amp; Industrial<\/div>\r\n                    <h1 class=\"hero-title\">\r\n                        <span class=\"line\" style=\"--i:0\"><span>MODERN STRUCTURES<\/span><\/span>\r\n                        <span class=\"line\" style=\"--i:1\"><span>FOR A BETTER<\/span><\/span>\r\n                        <span class=\"line\" style=\"--i:2\"><span>TOMORROW<\/span><\/span>\r\n                    <\/h1>\r\n                    <p class=\"hero-text fx\" style=\"--d:1.2s\">\r\n                        Delivering premium commercial and industrial construction solutions.\r\n                    <\/p>\r\n                    <div class=\"hero-buttons fx\" style=\"--d:1.35s\">\r\n                        <a href=\"https:\/\/staging.samplesite4u.com\/binnaeng\/contactus\/\" class=\"btn-primary\">CONTACT US <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- Curtain that sweeps across on every slide change (direction follows the incoming slide) -->\r\n    <div class=\"hero-wipe\" data-dir=\"left\"><span class=\"w1\"><\/span><span class=\"w2\"><\/span><\/div>\r\n\r\n    <div class=\"experience-box\">\r\n        <h2><span class=\"count\" data-to=\"25\">25<\/span>+<\/h2>\r\n        <p>Years of Experience<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"hero-controls\">\r\n        <div class=\"hero-left\">\r\n            <div class=\"hero-counter\">\r\n                <span class=\"cur\">01<\/span><span class=\"sep\"><\/span><span class=\"tot\">03<\/span>\r\n            <\/div>\r\n            <div class=\"swiper-pagination\"><\/div>\r\n        <\/div>\r\n\r\n        <div class=\"swiper-nav\">\r\n            <div class=\"swiper-prev\"><i class=\"fas fa-arrow-left\"><\/i><\/div>\r\n            <div class=\"swiper-next\"><i class=\"fas fa-arrow-right\"><\/i><\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.js\"><\/script>\r\n\r\n<script>\r\n(function(){\r\n    var slider = document.querySelector('.hero-slider');\r\n    if(!slider) return;\r\n\r\n    var wipe    = slider.querySelector('.hero-wipe');\r\n    var curEl   = slider.querySelector('.hero-counter .cur');\r\n    var totEl   = slider.querySelector('.hero-counter .tot');\r\n    var countEl = slider.querySelector('.experience-box .count');\r\n    var reduce  = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n    var total   = slider.querySelectorAll('.swiper-slide').length; \/\/ count before Swiper clones slides\r\n    var raf     = null;\r\n\r\n    function pad(n){ return (n < 10 ? '0' : '') + n; }\r\n    if(totEl) totEl.textContent = pad(total);\r\n\r\n    \/* count 0 -> 25 *\/\r\n    function countUp(){\r\n        if(!countEl) return;\r\n        var to = parseInt(countEl.getAttribute('data-to'), 10) || 25;\r\n        if(reduce){ countEl.textContent = to; return; }\r\n        cancelAnimationFrame(raf);\r\n        var t0 = null, dur = 1600;\r\n        countEl.textContent = 0;\r\n        function step(t){\r\n            if(!t0) t0 = t;\r\n            var k = Math.min(1, (t - t0) \/ dur);\r\n            var e = 1 - Math.pow(1 - k, 3);\r\n            countEl.textContent = Math.round(to * e);\r\n            if(k < 1) raf = requestAnimationFrame(step);\r\n        }\r\n        raf = requestAnimationFrame(step);\r\n    }\r\n\r\n    \/* DIRECTION: read which side the incoming slide enters from *\/\r\n    function slideDir(sw){\r\n        var s = sw.slides[sw.activeIndex];\r\n        return (s && s.getAttribute('data-dir')) || 'left';\r\n    }\r\n\r\n    \/* curtain sweep (DIRECTION: same side as the incoming slide) *\/\r\n    function runWipe(dir){\r\n        if(reduce || !wipe) return;\r\n        wipe.setAttribute('data-dir', dir);\r\n        wipe.classList.remove('go');\r\n        void wipe.offsetWidth;\r\n        wipe.classList.add('go');\r\n    }\r\n\r\n    function updateCounter(i){\r\n        if(!curEl) return;\r\n        curEl.textContent = pad(i + 1);\r\n        curEl.classList.remove('tick');\r\n        void curEl.offsetWidth;\r\n        curEl.classList.add('tick');\r\n    }\r\n\r\n    new Swiper(slider, {\r\n        effect: 'fade',\r\n        fadeEffect: { crossFade: true },\r\n        speed: 1200,\r\n        loop: true,\r\n        grabCursor: true,\r\n        keyboard: { enabled: true },\r\n        autoplay: {\r\n            delay: 6000,\r\n            disableOnInteraction: false,\r\n            pauseOnMouseEnter: true\r\n        },\r\n        pagination: {\r\n            el: slider.querySelector('.swiper-pagination'),\r\n            clickable: true,\r\n            renderBullet: function(i, cls){\r\n                return '<span class=\"' + cls + '\" aria-label=\"Go to slide ' + (i + 1) + '\"><i><\/i><\/span>';\r\n            }\r\n        },\r\n        navigation: {\r\n            nextEl: slider.querySelector('.swiper-next'),\r\n            prevEl: slider.querySelector('.swiper-prev')\r\n        },\r\n        on: {\r\n            slideChangeTransitionStart: function(){\r\n                runWipe(slideDir(this));\r\n                setTimeout(countUp, 500);\r\n            },\r\n            slideChange: function(){\r\n                updateCounter(this.realIndex);\r\n            }\r\n        }\r\n    });\r\n\r\n    setTimeout(countUp, 500);\r\n\r\n    \/* mouse parallax + following glow + magnetic buttons (desktop only) *\/\r\n    var canHover = window.matchMedia && window.matchMedia('(hover: hover)').matches;\r\n    if(canHover && !reduce){\r\n        slider.addEventListener('mousemove', function(e){\r\n            var r = slider.getBoundingClientRect();\r\n            var x = (e.clientX - r.left) \/ r.width;\r\n            var y = (e.clientY - r.top) \/ r.height;\r\n            slider.style.setProperty('--mx', (x - .5).toFixed(3));\r\n            slider.style.setProperty('--my', (y - .5).toFixed(3));\r\n            slider.style.setProperty('--gx', (x * 100).toFixed(1) + '%');\r\n            slider.style.setProperty('--gy', (y * 100).toFixed(1) + '%');\r\n        });\r\n        slider.addEventListener('mouseleave', function(){\r\n            slider.style.setProperty('--mx', 0);\r\n            slider.style.setProperty('--my', 0);\r\n            slider.style.setProperty('--gx', '70%');\r\n            slider.style.setProperty('--gy', '40%');\r\n        });\r\n\r\n        slider.querySelectorAll('.btn-primary').forEach(function(b){\r\n            b.addEventListener('mousemove', function(e){\r\n                var r = b.getBoundingClientRect();\r\n                var x = e.clientX - r.left - r.width \/ 2;\r\n                var y = e.clientY - r.top - r.height \/ 2;\r\n                b.style.transform = 'translate(' + (x * .18) + 'px,' + (y * .25) + 'px)';\r\n            });\r\n            b.addEventListener('mouseleave', function(){ b.style.transform = ''; });\r\n        });\r\n    }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a49aa26 elementor-widget elementor-widget-html\" data-id=\"a49aa26\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- External Dependencies: Montserrat Font & Font Awesome Icons -->\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n\r\n<style>\r\n\/* Scoped Section Wrapper to isolate styles inside Elementor *\/\r\n.bcr-infobar-section {\r\n    --bc-accent: #f58220;\r\n    --bc-accent-light: #ffb36b;\r\n    --bc-dark: #0c1524;\r\n    --bc-tint: #fdf5e9;\r\n    width: 100%;\r\n    background-color: #ffffff;\r\n    font-family: 'Montserrat', sans-serif;\r\n    padding: 60px 20px;\r\n    box-sizing: border-box;\r\n    overflow-x: clip;\r\n}\r\n.bcr-infobar-section *,\r\n.bcr-infobar-section *::before,\r\n.bcr-infobar-section *::after {\r\n    box-sizing: border-box;\r\n}\r\n.bcr-infobar-section .bcr-info-title,\r\n.bcr-infobar-section .bcr-info-desc,\r\n.bcr-infobar-section .bcr-count {\r\n    font-family: 'Montserrat', sans-serif;\r\n}\r\n.bcr-infobar-section i.fa-solid {\r\n    font-family: \"Font Awesome 6 Free\" !important;\r\n    font-weight: 900 !important;\r\n    font-style: normal;\r\n}\r\n\r\n\/* 4-Column Grid Container *\/\r\n.bcr-infobar-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    display: grid;\r\n    grid-template-columns: repeat(4, 1fr);\r\n    gap: 30px;\r\n}\r\n\r\n\/* ================= ITEM (becomes a lifted, tilting card on hover) ================= *\/\r\n.bcr-info-item {\r\n    --rx: 0deg;\r\n    --ry: 0deg;\r\n    --mx: 50%;\r\n    --my: 50%;\r\n    position: relative;\r\n    display: flex;\r\n    align-items: flex-start;\r\n    gap: 18px;\r\n    padding: 30px 22px 26px;\r\n    border-radius: 6px;\r\n    background-color: transparent;\r\n    transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));\r\n    translate: 0 0;\r\n    transition:\r\n        transform .25s ease-out,\r\n        translate .5s cubic-bezier(.2, .8, .2, 1),\r\n        box-shadow .5s ease,\r\n        background-color .5s ease;\r\n}\r\n.bcr-info-item:is(:hover, .hot) {\r\n    translate: 0 -8px;\r\n    background-color: #ffffff;\r\n    box-shadow: 0 26px 50px rgba(12, 21, 36, .13);\r\n}\r\n\r\n\/* top rail: grey track + orange line that draws *\/\r\n.bcr-info-item::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    left: 0;\r\n    right: 0;\r\n    top: 0;\r\n    height: 2px;\r\n    background: #e6e8ec;\r\n}\r\n.bcr-info-item::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    left: 0;\r\n    top: 0;\r\n    width: 100%;\r\n    height: 2px;\r\n    background: linear-gradient(90deg, var(--bc-accent), var(--bc-accent-light));\r\n    transform: scaleX(.28);\r\n    transform-origin: left;\r\n    transition: transform .8s cubic-bezier(.7, 0, .2, 1);\r\n}\r\n.bcr-info-item:is(:hover, .hot)::after {\r\n    transform: scaleX(1);\r\n}\r\n\r\n\/* light that follows the cursor *\/\r\n.bcr-glow {\r\n    position: absolute;\r\n    inset: 0;\r\n    border-radius: 6px;\r\n    pointer-events: none;\r\n    background: radial-gradient(240px circle at var(--mx) var(--my), rgba(245, 130, 32, .14), transparent 65%);\r\n    opacity: 0;\r\n    transition: opacity .4s ease;\r\n}\r\n.bcr-info-item:is(:hover, .hot) .bcr-glow {\r\n    opacity: 1;\r\n}\r\n\r\n\/* ================= ICON ================= *\/\r\n.bcr-icon-wrap {\r\n    position: relative;\r\n    z-index: 1;\r\n    flex-shrink: 0;\r\n    width: 52px;\r\n    height: 52px;\r\n}\r\n\/* pulse ring *\/\r\n.bcr-icon-wrap::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    border: 2px solid var(--bc-accent);\r\n    opacity: 0;\r\n    pointer-events: none;\r\n}\r\n.bcr-info-item:is(:hover, .hot) .bcr-icon-wrap::after {\r\n    animation: bcrRing 1.5s ease-out infinite;\r\n}\r\n\r\n.bcr-icon-square {\r\n    position: relative;\r\n    width: 52px;\r\n    height: 52px;\r\n    background-color: var(--bc-tint);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    overflow: hidden;\r\n    transition: transform .6s cubic-bezier(.2, .8, .2, 1);\r\n}\r\n\/* orange fills up from the bottom *\/\r\n.bcr-icon-square::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    background: var(--bc-accent);\r\n    transform: translateY(101%);\r\n    transition: transform .5s cubic-bezier(.7, 0, .2, 1);\r\n}\r\n\/* soft shine that glides across now and then *\/\r\n.bcr-icon-square::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 0;\r\n    left: -70%;\r\n    width: 40%;\r\n    height: 100%;\r\n    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent);\r\n    transform: skewX(-20deg);\r\n    animation: bcrShine 5s ease-in-out infinite;\r\n    animation-delay: var(--sd, 1.5s);\r\n}\r\n.bcr-icon-square i {\r\n    position: relative;\r\n    z-index: 1;\r\n    color: var(--bc-accent);\r\n    font-size: 20px;\r\n    transition: transform .8s cubic-bezier(.2, .8, .2, 1), color .3s ease;\r\n}\r\n.bcr-info-item:is(:hover, .hot) .bcr-icon-square {\r\n    transform: scale(1.08);\r\n}\r\n.bcr-info-item:is(:hover, .hot) .bcr-icon-square::before {\r\n    transform: translateY(0);\r\n}\r\n.bcr-info-item:is(:hover, .hot) .bcr-icon-square i {\r\n    color: #ffffff;\r\n    transform: rotateY(360deg);\r\n}\r\n\r\n\/* ================= TEXT ================= *\/\r\n.bcr-text-block {\r\n    position: relative;\r\n    z-index: 1;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 6px;\r\n}\r\n.bcr-info-title {\r\n    position: relative;\r\n    display: inline-block;\r\n    align-self: flex-start;\r\n    font-size: 16px;\r\n    font-weight: 700;\r\n    color: var(--bc-dark);\r\n    margin: 0;\r\n    padding: 0 0 5px;\r\n    line-height: 1.2;\r\n    transition: color .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);\r\n}\r\n.bcr-info-title::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    left: 0;\r\n    bottom: 0;\r\n    width: 100%;\r\n    height: 2px;\r\n    background: var(--bc-accent);\r\n    transform: scaleX(0);\r\n    transform-origin: left;\r\n    transition: transform .6s cubic-bezier(.7, 0, .2, 1);\r\n}\r\n.bcr-info-item:is(:hover, .hot) .bcr-info-title {\r\n    color: var(--bc-accent);\r\n    transform: translateX(4px);\r\n}\r\n.bcr-info-item:is(:hover, .hot) .bcr-info-title::after {\r\n    transform: scaleX(1);\r\n}\r\n.bcr-info-desc {\r\n    font-size: 14px;\r\n    line-height: 1.5;\r\n    color: #6a717d;\r\n    margin: 0;\r\n    font-weight: 400;\r\n    transition: color .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1) .05s;\r\n}\r\n.bcr-info-item:is(:hover, .hot) .bcr-info-desc {\r\n    color: #3b4452;\r\n    transform: translateX(4px);\r\n}\r\n.bcr-count {\r\n    font-variant-numeric: tabular-nums;\r\n}\r\n\r\n\/* ================= ENTRANCE (JS adds .bcr-js, then .in on scroll) ================= *\/\r\n.bcr-js .bcr-info-item {\r\n    opacity: 0;\r\n    translate: 0 44px;\r\n}\r\n.bcr-js .bcr-info-item::after {\r\n    transform: scaleX(0);\r\n}\r\n.bcr-js .bcr-icon-wrap {\r\n    opacity: 0;\r\n    scale: .4;\r\n}\r\n.bcr-js .bcr-info-title,\r\n.bcr-js .bcr-info-desc {\r\n    opacity: 0;\r\n    translate: 0 14px;\r\n}\r\n\r\n.bcr-js.in .bcr-info-item {\r\n    opacity: 1;\r\n    translate: 0 0;\r\n    transition:\r\n        opacity .8s ease var(--d, 0s),\r\n        translate .9s cubic-bezier(.2, .8, .2, 1) var(--d, 0s),\r\n        transform .25s ease-out,\r\n        box-shadow .5s ease,\r\n        background-color .5s ease;\r\n}\r\n.bcr-js.in .bcr-info-item:is(:hover, .hot) {\r\n    translate: 0 -8px;\r\n}\r\n.bcr-js.in .bcr-info-item::after {\r\n    transform: scaleX(.28);\r\n    transition: transform 1s cubic-bezier(.7, 0, .2, 1) calc(var(--d, 0s) + .3s);\r\n}\r\n.bcr-js.in .bcr-info-item:is(:hover, .hot)::after {\r\n    transform: scaleX(1);\r\n    transition: transform .8s cubic-bezier(.7, 0, .2, 1) 0s;\r\n}\r\n.bcr-js.in .bcr-icon-wrap {\r\n    opacity: 1;\r\n    scale: 1;\r\n    transition:\r\n        opacity .6s ease calc(var(--d, 0s) + .35s),\r\n        scale .7s cubic-bezier(.2, .8, .2, 1.4) calc(var(--d, 0s) + .35s);\r\n}\r\n.bcr-js.in .bcr-info-title {\r\n    opacity: 1;\r\n    translate: 0 0;\r\n    transition:\r\n        opacity .6s ease calc(var(--d, 0s) + .5s),\r\n        translate .6s ease calc(var(--d, 0s) + .5s),\r\n        color .35s ease,\r\n        transform .45s cubic-bezier(.2, .8, .2, 1);\r\n}\r\n.bcr-js.in .bcr-info-desc {\r\n    opacity: 1;\r\n    translate: 0 0;\r\n    transition:\r\n        opacity .6s ease calc(var(--d, 0s) + .62s),\r\n        translate .6s ease calc(var(--d, 0s) + .62s),\r\n        color .35s ease,\r\n        transform .45s cubic-bezier(.2, .8, .2, 1) .05s;\r\n}\r\n\r\n\/* ================= KEYFRAMES ================= *\/\r\n@keyframes bcrRing {\r\n    0%   { transform: scale(1);   opacity: .8; }\r\n    100% { transform: scale(1.7); opacity: 0; }\r\n}\r\n@keyframes bcrShine {\r\n    0%, 62%  { left: -70%; }\r\n    82%, 100% { left: 160%; }\r\n}\r\n\r\n\/* ================= TABLET (2x2) ================= *\/\r\n@media (max-width: 1024px) {\r\n    .bcr-infobar-section {\r\n        padding: 50px 30px;\r\n    }\r\n    .bcr-infobar-container {\r\n        grid-template-columns: repeat(2, 1fr);\r\n        gap: 30px;\r\n    }\r\n}\r\n\r\n\/* ================= MOBILE (stacked) ================= *\/\r\n@media (max-width: 767px) {\r\n    .bcr-infobar-section {\r\n        padding: 40px 20px;\r\n    }\r\n    .bcr-infobar-container {\r\n        grid-template-columns: 1fr;\r\n        gap: 18px;\r\n    }\r\n    .bcr-info-item {\r\n        padding: 26px 18px 22px;\r\n    }\r\n    .bcr-icon-wrap,\r\n    .bcr-icon-square {\r\n        width: 48px;\r\n        height: 48px;\r\n    }\r\n    .bcr-icon-square i {\r\n        font-size: 18px;\r\n    }\r\n}\r\n\r\n\/* ================= REDUCED MOTION ================= *\/\r\n@media (prefers-reduced-motion: reduce) {\r\n    .bcr-icon-square::after,\r\n    .bcr-info-item:is(:hover, .hot) .bcr-icon-wrap::after {\r\n        animation: none;\r\n    }\r\n    .bcr-info-item {\r\n        transform: none !important;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<!-- Main Widget HTML Structure -->\r\n<div class=\"bcr-infobar-section\" id=\"bcrInfobar\">\r\n    <div class=\"bcr-infobar-container\">\r\n\r\n        <!-- Item 01: Safety Record -->\r\n        <div class=\"bcr-info-item\" style=\"--sd:1.2s\">\r\n            <span class=\"bcr-glow\"><\/span>\r\n            <div class=\"bcr-icon-wrap\">\r\n                <div class=\"bcr-icon-square\">\r\n                    <i class=\"fa-solid fa-shield-halved\"><\/i>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"bcr-text-block\">\r\n                <h4 class=\"bcr-info-title\"><span class=\"bcr-count\" data-to=\"100\">100<\/span>% Safety Record<\/h4>\r\n                <p class=\"bcr-info-desc\"><span class=\"bcr-count\" data-to=\"1420\">1,420<\/span>+ days incident-free across all sites.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Item 02: Cost-Effective -->\r\n        <div class=\"bcr-info-item\" style=\"--sd:2.4s\">\r\n            <span class=\"bcr-glow\"><\/span>\r\n            <div class=\"bcr-icon-wrap\">\r\n                <div class=\"bcr-icon-square\">\r\n                    <i class=\"fa-solid fa-wallet\"><\/i>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"bcr-text-block\">\r\n                <h4 class=\"bcr-info-title\">Cost-Effective<\/h4>\r\n                <p class=\"bcr-info-desc\">Optimized engineering and lean logistics.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Item 03: ISO Certified -->\r\n        <div class=\"bcr-info-item\" style=\"--sd:3.6s\">\r\n            <span class=\"bcr-glow\"><\/span>\r\n            <div class=\"bcr-icon-wrap\">\r\n                <div class=\"bcr-icon-square\">\r\n                    <i class=\"fa-solid fa-award\"><\/i>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"bcr-text-block\">\r\n                <h4 class=\"bcr-info-title\">ISO Certified<\/h4>\r\n                <p class=\"bcr-info-desc\">Long-term compliance and quality control.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Item 04: Trained Experts -->\r\n        <div class=\"bcr-info-item\" style=\"--sd:4.8s\">\r\n            <span class=\"bcr-glow\"><\/span>\r\n            <div class=\"bcr-icon-wrap\">\r\n                <div class=\"bcr-icon-square\">\r\n                    <i class=\"fa-solid fa-hard-hat\"><\/i>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"bcr-text-block\">\r\n                <h4 class=\"bcr-info-title\">Trained Experts<\/h4>\r\n                <p class=\"bcr-info-desc\">Certified crews for extreme environments.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n    var sec = document.getElementById('bcrInfobar');\r\n    if(!sec) return;\r\n\r\n    var box    = sec.querySelector('.bcr-infobar-container');\r\n    var items  = Array.prototype.slice.call(sec.querySelectorAll('.bcr-info-item'));\r\n    var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n    var fine   = window.matchMedia && window.matchMedia('(hover: hover) and (pointer: fine)').matches;\r\n\r\n    function fmt(n){ return n.toLocaleString('en-US'); }\r\n\r\n    \/* count a number up from 0 *\/\r\n    function countOne(c, delay){\r\n        if(c._busy) return;\r\n        c._busy = true;\r\n        var to = parseInt(c.getAttribute('data-to'), 10) || 0;\r\n        var dur = 1800, t0 = null;\r\n        c.textContent = '0';\r\n        function step(t){\r\n            if(!t0) t0 = t;\r\n            var k = Math.min(1, (t - t0) \/ dur);\r\n            var e = 1 - Math.pow(1 - k, 3);\r\n            c.textContent = fmt(Math.round(to * e));\r\n            if(k < 1){ requestAnimationFrame(step); }\r\n            else { c._busy = false; }\r\n        }\r\n        setTimeout(function(){ requestAnimationFrame(step); }, delay || 0);\r\n    }\r\n\r\n    \/* stagger *\/\r\n    items.forEach(function(it, i){\r\n        it.style.setProperty('--d', (i * 0.14).toFixed(2) + 's');\r\n    });\r\n\r\n    \/* scroll reveal *\/\r\n    if('IntersectionObserver' in window && !reduce){\r\n        sec.classList.add('bcr-js');\r\n\r\n        \/* start counters at 0 so there is no flash of the final number *\/\r\n        items.forEach(function(it){\r\n            Array.prototype.forEach.call(it.querySelectorAll('.bcr-count'), function(c){\r\n                c.textContent = '0';\r\n            });\r\n        });\r\n\r\n        var io = new IntersectionObserver(function(entries){\r\n            if(!entries[0].isIntersecting) return;\r\n            sec.classList.add('in');\r\n\r\n            items.forEach(function(it, i){\r\n                Array.prototype.forEach.call(it.querySelectorAll('.bcr-count'), function(c){\r\n                    countOne(c, 600 + i * 140);\r\n                });\r\n            });\r\n\r\n            \/* after the intro, drop the stagger delay so hover reacts instantly *\/\r\n            setTimeout(function(){\r\n                items.forEach(function(it){ it.style.setProperty('--d', '0s'); });\r\n            }, 2400);\r\n\r\n            io.disconnect();\r\n        }, { threshold: 0.25 });\r\n        io.observe(box);\r\n    }\r\n\r\n    \/* desktop: 3D tilt, cursor light, replay the counters on hover *\/\r\n    if(fine && !reduce){\r\n        items.forEach(function(it){\r\n            it.addEventListener('mouseenter', function(){\r\n                Array.prototype.forEach.call(it.querySelectorAll('.bcr-count'), function(c){\r\n                    if(sec.classList.contains('in')) countOne(c, 0);\r\n                });\r\n            });\r\n            it.addEventListener('mousemove', function(e){\r\n                var r  = it.getBoundingClientRect();\r\n                var px = (e.clientX - r.left) \/ r.width;\r\n                var py = (e.clientY - r.top) \/ r.height;\r\n                it.style.setProperty('--ry', ((px - .5) * 8).toFixed(2) + 'deg');\r\n                it.style.setProperty('--rx', ((py - .5) * -7).toFixed(2) + 'deg');\r\n                it.style.setProperty('--mx', (px * 100).toFixed(1) + '%');\r\n                it.style.setProperty('--my', (py * 100).toFixed(1) + '%');\r\n            });\r\n            it.addEventListener('mouseleave', function(){\r\n                it.style.setProperty('--rx', '0deg');\r\n                it.style.setProperty('--ry', '0deg');\r\n            });\r\n        });\r\n    }\r\n\r\n    \/* touch screens: the item in the middle of the screen \"wakes up\" *\/\r\n    if(!fine && !reduce && 'IntersectionObserver' in window){\r\n        var focusIO = new IntersectionObserver(function(entries){\r\n            entries.forEach(function(e){\r\n                e.target.classList.toggle('hot', e.isIntersecting);\r\n            });\r\n        }, { rootMargin: '-35% 0px -35% 0px', threshold: 0 });\r\n        items.forEach(function(it){ focusIO.observe(it); });\r\n    }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-73886c7 e-con-full e-flex e-con e-parent\" data-id=\"73886c7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1b22d86 elementor-widget elementor-widget-html\" data-id=\"1b22d86\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n\r\n<style>\r\n\/* Reset scoped to this section only, so it no longer affects the rest of the site *\/\r\n.buildnox-section *,\r\n.buildnox-section *::before,\r\n.buildnox-section *::after {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n}\r\n\r\n.buildnox-section h2 {\r\n    margin-top: 0.7em;\r\n}\r\n\r\n.buildnox-section {\r\n    width: 100%;\r\n    background: #f4f4f4;\r\n    padding: 80px 5%;\r\n    font-family: 'Montserrat', sans-serif;\r\n    overflow: hidden;\r\n}\r\n\r\n.buildnox-section i.fa-solid,\r\n.buildnox-section i.fa-regular {\r\n    font-family: \"Font Awesome 6 Free\" !important;\r\n    font-style: normal;\r\n}\r\n.buildnox-section i.fa-solid { font-weight: 900 !important; }\r\n.buildnox-section i.fa-regular { font-weight: 400 !important; }\r\n\r\n.buildnox-container {\r\n    max-width: 1400px;\r\n    margin: auto;\r\n    display: grid;\r\n    grid-template-columns: repeat(6, 1fr);\r\n    gap: 40px;\r\n    align-items: center;\r\n}\r\n\r\n\/* LEFT SIDE *\/\r\n.buildnox-image {\r\n    grid-column: span 3;\r\n    position: relative;\r\n}\r\n\r\n.buildnox-image img {\r\n    width: 100%;\r\n    display: block;\r\n}\r\n\r\n\/* RIGHT SIDE *\/\r\n.buildnox-content {\r\n    grid-column: span 3;\r\n}\r\n\r\n.buildnox-tag {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    color: #ff6b00;\r\n    font-size: 15px;\r\n    font-weight: 500;\r\n    text-transform: uppercase;\r\n    margin-bottom: 20px;\r\n    letter-spacing: .5px;\r\n}\r\n\r\n.buildnox-tag i {\r\n    font-size: 14px;\r\n}\r\n\r\n.buildnox-title {\r\n    font-size: 53px;\r\n    font-weight: 800;\r\n    line-height: 1.2;\r\n    color: #101828;\r\n    margin-bottom: 25px;\r\n    white-space: normal;\r\n}\r\n\r\n.buildnox-text {\r\n    font-size: 18px;\r\n    line-height: 1.9;\r\n    color: #4b5563;\r\n    margin-bottom: 40px;\r\n    max-width: 650px;\r\n}\r\n\r\n\/* FEATURES *\/\r\n.buildnox-features {\r\n    display: grid;\r\n    grid-template-columns: repeat(2, 1fr);\r\n    gap: 20px 50px;\r\n    margin-bottom: 40px;\r\n}\r\n\r\n.feature-item {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 14px;\r\n}\r\n\r\n.feature-item i {\r\n    color: #ff6b00;\r\n    font-size: 22px;\r\n    min-width: 22px;\r\n}\r\n\r\n.feature-item span {\r\n    font-size: 18px;\r\n    font-weight: 700;\r\n    color: #101828;\r\n}\r\n\r\n\/* LEARN MORE BUTTON *\/\r\n.buildnox-cta-wrapper {\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\n.buildnox-btn {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 12px;\r\n    background-color: #ff6b00;\r\n    color: #ffffff;\r\n    padding: 16px 36px;\r\n    border-radius: 15px;\r\n    font-size: 15px;\r\n    font-weight: 700;\r\n    text-decoration: none;\r\n    letter-spacing: 0.5px;\r\n    text-transform: uppercase;\r\n    transition: all 0.3s ease;\r\n    box-shadow: 0 6px 20px rgba(255, 107, 0, 0.25);\r\n}\r\n\r\n.buildnox-btn i {\r\n    font-size: 14px;\r\n    transition: transform 0.3s ease;\r\n}\r\n\r\n.buildnox-btn:hover {\r\n    background-color: #e05e00;\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 10px 24px rgba(255, 107, 0, 0.35);\r\n}\r\n\r\n.buildnox-btn:hover i {\r\n    transform: translateX(5px);\r\n}\r\n\r\n\/* ======================================================================\r\n   PICTURE: ANIMATION AND INTERACTION\r\n   ====================================================================== *\/\r\n.bn-stage {\r\n    position: relative;\r\n    padding: 18px;\r\n    --px: 0;\r\n    --py: 0;\r\n}\r\n\r\n\/* dotted pattern peeking out behind the photo *\/\r\n.bn-dots {\r\n    position: absolute;\r\n    right: -4px;\r\n    bottom: -4px;\r\n    width: 42%;\r\n    height: 38%;\r\n    background-image: radial-gradient(#ff6b00 2px, transparent 2.5px);\r\n    background-size: 18px 18px;\r\n    opacity: .4;\r\n    animation: bndots 6s linear infinite;\r\n    z-index: 0;\r\n}\r\n@keyframes bndots { to { background-position: 18px 18px; } }\r\n\r\n\/* orange viewfinder corners *\/\r\n.bn-c {\r\n    position: absolute;\r\n    width: 58px;\r\n    height: 58px;\r\n    border: 0 solid #ff6b00;\r\n    z-index: 7;\r\n    pointer-events: none;\r\n}\r\n.bn-c1 { top: 0; left: 0; border-width: 4px 0 0 4px; border-top-left-radius: 16px; }\r\n.bn-c2 { top: 0; right: 0; border-width: 4px 4px 0 0; border-top-right-radius: 16px; }\r\n.bn-c3 { bottom: 0; left: 0; border-width: 0 0 4px 4px; border-bottom-left-radius: 16px; }\r\n.bn-c4 { bottom: 0; right: 0; border-width: 0 4px 4px 0; border-bottom-right-radius: 16px; }\r\n\r\n\/* the photo (3D tilt target) *\/\r\n.bn-photo {\r\n    --lr: 120px;\r\n    --mx: 50%;\r\n    --my: 50%;\r\n    --gx: 50%;\r\n    --gy: 50%;\r\n    position: relative;\r\n    z-index: 2;\r\n    border-radius: 16px;\r\n    overflow: hidden;\r\n    background: #101828;\r\n    box-shadow: 0 24px 50px rgba(16, 24, 40, .22);\r\n    transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));\r\n    transition: transform .6s cubic-bezier(.2, .8, .2, 1);\r\n    cursor: crosshair;\r\n    touch-action: pan-y;\r\n    -webkit-user-select: none;\r\n    user-select: none;\r\n}\r\n.bn-photo.moving { transition: transform .12s linear; }\r\n\r\n\/* scroll parallax wrapper around the image *\/\r\n.bn-par {\r\n    transform: translateY(var(--py, 0px)) scale(1.08);\r\n    will-change: transform;\r\n}\r\n.bn-par img { -webkit-user-drag: none; }\r\n\r\n\/* orange curtain used for the reveal *\/\r\n.bn-curtain {\r\n    position: absolute;\r\n    inset: 0;\r\n    background: #ff6b00;\r\n    z-index: 6;\r\n    transform: scaleX(0);\r\n    pointer-events: none;\r\n}\r\n\r\n\/* blueprint lens: a circle that follows the cursor and shows the drawing underneath *\/\r\n.bn-lens {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 3;\r\n    pointer-events: none;\r\n    background:\r\n        linear-gradient(rgba(255,107,0,.7) 1px, transparent 1px) 0 0 \/ 40px 40px,\r\n        linear-gradient(90deg, rgba(255,107,0,.7) 1px, transparent 1px) 0 0 \/ 40px 40px,\r\n        linear-gradient(rgba(255,255,255,.28) 1px, transparent 1px) 0 0 \/ 10px 10px,\r\n        linear-gradient(90deg, rgba(255,255,255,.28) 1px, transparent 1px) 0 0 \/ 10px 10px,\r\n        rgba(8, 20, 42, .62);\r\n    -webkit-backdrop-filter: grayscale(1) contrast(1.2) brightness(.95);\r\n    backdrop-filter: grayscale(1) contrast(1.2) brightness(.95);\r\n    -webkit-mask-image: radial-gradient(circle var(--lr) at var(--mx) var(--my), #000 93%, transparent 100%);\r\n    mask-image: radial-gradient(circle var(--lr) at var(--mx) var(--my), #000 93%, transparent 100%);\r\n}\r\n\/* structural grid bubbles, like on a real construction drawing *\/\r\n.bn-gb {\r\n    position: absolute;\r\n    width: 24px;\r\n    height: 24px;\r\n    margin: -12px 0 0 -12px;\r\n    border: 1.5px solid #ff6b00;\r\n    border-radius: 50%;\r\n    background: rgba(8, 20, 42, .85);\r\n    color: #ff6b00;\r\n    font-size: 10px;\r\n    font-weight: 800;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n.bn-dim {\r\n    position: absolute;\r\n    left: 10%;\r\n    right: 10%;\r\n    bottom: 11%;\r\n    height: 12px;\r\n    border: 1.5px solid #fff;\r\n    border-width: 0 1.5px;\r\n    opacity: .85;\r\n}\r\n.bn-dim::before { content: \"\"; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: #fff; }\r\n.bn-dimv {\r\n    position: absolute;\r\n    top: 14%;\r\n    bottom: 22%;\r\n    left: 6%;\r\n    width: 12px;\r\n    border: 1.5px solid #fff;\r\n    border-width: 1.5px 0;\r\n    opacity: .85;\r\n}\r\n.bn-dimv::before { content: \"\"; position: absolute; top: 0; bottom: 0; left: 50%; width: 1.5px; background: #fff; }\r\n\r\n\/* ring with crosshair around the lens *\/\r\n.bn-ring {\r\n    position: absolute;\r\n    z-index: 4;\r\n    left: var(--mx);\r\n    top: var(--my);\r\n    width: calc(var(--lr) * 2);\r\n    height: calc(var(--lr) * 2);\r\n    margin: calc(var(--lr) * -1) 0 0 calc(var(--lr) * -1);\r\n    border-radius: 50%;\r\n    border: 2px solid #ff6b00;\r\n    box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 0 26px rgba(255,107,0,.55), inset 0 0 20px rgba(255,107,0,.3);\r\n    background:\r\n        linear-gradient(#ff6b00, #ff6b00) center \/ 1px 64% no-repeat,\r\n        linear-gradient(#ff6b00, #ff6b00) center \/ 64% 1px no-repeat;\r\n    pointer-events: none;\r\n    transition: box-shadow .3s;\r\n}\r\n.bn-ring::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 9px;\r\n    border-radius: 50%;\r\n    border: 2px dashed rgba(255,255,255,.65);\r\n    animation: bnspin 14s linear infinite;\r\n}\r\n.bn-photo.live .bn-ring { box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 0 36px rgba(255,107,0,.8), inset 0 0 24px rgba(255,107,0,.4); }\r\n@keyframes bnspin { to { transform: rotate(360deg); } }\r\n\r\n\/* glare that follows the pointer *\/\r\n.bn-glare {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 5;\r\n    pointer-events: none;\r\n    background: radial-gradient(circle at var(--gx) var(--gy), rgba(255,255,255,.22), transparent 45%);\r\n    opacity: 0;\r\n    transition: opacity .3s;\r\n}\r\n.bn-photo.moving .bn-glare { opacity: 1; }\r\n\r\n\/* light sweep after the reveal *\/\r\n.bn-shine {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 5;\r\n    pointer-events: none;\r\n    background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%);\r\n    transform: translateX(-110%);\r\n}\r\n\r\n\/* hint *\/\r\n.bn-hint {\r\n    position: absolute;\r\n    left: 50%;\r\n    bottom: 18px;\r\n    transform: translateX(-50%);\r\n    z-index: 5;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 9px;\r\n    white-space: nowrap;\r\n    background: rgba(16, 24, 40, .82);\r\n    color: #fff;\r\n    font-size: 12px;\r\n    font-weight: 600;\r\n    padding: 9px 16px;\r\n    border-radius: 30px;\r\n    pointer-events: none;\r\n    transition: opacity .4s;\r\n    animation: bnhint 1.8s ease-in-out infinite;\r\n}\r\n.bn-hint i { color: #ff6b00; }\r\n.bn-hint.off { opacity: 0; animation: none; }\r\n@keyframes bnhint { 50% { transform: translate(-50%, -5px); } }\r\n\r\n\/* floating info chips (parallax wrapper + float animation) *\/\r\n.bn-chip {\r\n    position: absolute;\r\n    z-index: 8;\r\n    transform: translate(calc(var(--px) * -18px), calc(var(--py) * -14px));\r\n    transition: transform .4s cubic-bezier(.2, .8, .2, 1);\r\n}\r\n.bn-chip-in {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n    background: #fff;\r\n    border-radius: 14px;\r\n    padding: 11px 18px 11px 11px;\r\n    box-shadow: 0 16px 36px rgba(16, 24, 40, .2);\r\n    font-size: 14px;\r\n    font-weight: 700;\r\n    color: #101828;\r\n    white-space: nowrap;\r\n    animation: bnfloat 5s ease-in-out infinite;\r\n}\r\n.bn-chip-in i {\r\n    width: 40px;\r\n    height: 40px;\r\n    border-radius: 50%;\r\n    background: #ff6b00;\r\n    color: #fff;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 16px;\r\n    flex-shrink: 0;\r\n}\r\n.bn-chip1 { left: 0; top: 16%; transform: translate(calc(var(--px) * -18px - 14px), calc(var(--py) * -14px)); }\r\n.bn-chip2 { right: 0; top: 56%; transform: translate(calc(var(--px) * -26px + 14px), calc(var(--py) * -20px)); }\r\n.bn-chip2 .bn-chip-in { animation-duration: 6.2s; animation-delay: -2s; }\r\n@keyframes bnfloat { 50% { transform: translateY(-9px); } }\r\n\r\n\/* rotating circular badge *\/\r\n.bn-badge {\r\n    position: absolute;\r\n    right: -2px;\r\n    bottom: -18px;\r\n    z-index: 9;\r\n    width: 118px;\r\n    height: 118px;\r\n    transform: translate(calc(var(--px) * -22px), calc(var(--py) * -18px));\r\n    transition: transform .4s cubic-bezier(.2, .8, .2, 1);\r\n}\r\n.bn-badge-in {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100%;\r\n    border-radius: 50%;\r\n    background: #101828;\r\n    box-shadow: 0 16px 36px rgba(16, 24, 40, .3);\r\n}\r\n.bn-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: bnspin 16s linear infinite; }\r\n.bn-badge text { fill: #fff; font-size: 11px; font-weight: 700; font-family: 'Montserrat', sans-serif; }\r\n.bn-badge i {\r\n    position: absolute;\r\n    left: 50%;\r\n    top: 50%;\r\n    width: 46px;\r\n    height: 46px;\r\n    margin: -23px 0 0 -23px;\r\n    border-radius: 50%;\r\n    background: #ff6b00;\r\n    color: #fff;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 19px;\r\n}\r\n\r\n\/* ---------- entrance (only when JS is running) ---------- *\/\r\n.bn-js .bn-par img { opacity: 0; }\r\n.bn-js.in .bn-curtain { animation: bncur 1.3s cubic-bezier(.7, 0, .3, 1) forwards; }\r\n.bn-js.in .bn-par img { animation: bnimg 1.2s cubic-bezier(.2, .8, .2, 1) .62s both; }\r\n.bn-js.in .bn-shine { animation: bnshine 1.2s ease-out 1.9s; }\r\n@keyframes bncur {\r\n    0%   { transform: scaleX(0); transform-origin: left; }\r\n    45%  { transform: scaleX(1); transform-origin: left; }\r\n    55%  { transform: scaleX(1); transform-origin: right; }\r\n    100% { transform: scaleX(0); transform-origin: right; }\r\n}\r\n@keyframes bnimg { from { opacity: 0; transform: scale(1.22); } to { opacity: 1; transform: none; } }\r\n@keyframes bnshine { to { transform: translateX(110%); } }\r\n\r\n.bn-js .bn-c { opacity: 0; transition: opacity .5s, transform .6s cubic-bezier(.2, .8, .2, 1); }\r\n.bn-js .bn-c1 { transform: translate(14px, 14px); }\r\n.bn-js .bn-c2 { transform: translate(-14px, 14px); }\r\n.bn-js .bn-c3 { transform: translate(14px, -14px); }\r\n.bn-js .bn-c4 { transform: translate(-14px, -14px); }\r\n.bn-js.in .bn-c { opacity: 1; transform: none; transition-delay: .9s; }\r\n\r\n.bn-js .bn-chip, .bn-js .bn-badge { opacity: 0; }\r\n.bn-js.in .bn-chip, .bn-js.in .bn-badge { opacity: 1; transition: opacity .6s 1.4s, transform .4s cubic-bezier(.2, .8, .2, 1); }\r\n\r\n\/* text column fades up one piece at a time *\/\r\n.bn-js .bn-rv { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1); }\r\n.bn-js.in .bn-rv { opacity: 1; transform: none; transition-delay: var(--d, 0s); }\r\n\r\n\/* LARGE DESKTOP *\/\r\n@media (max-width: 1200px) {\r\n    .buildnox-title {\r\n        font-size: 42px;\r\n    }\r\n\r\n    .buildnox-text {\r\n        font-size: 17px;\r\n    }\r\n}\r\n\r\n\/* TABLET *\/\r\n@media (max-width: 1024px) {\r\n    .buildnox-container {\r\n        grid-template-columns: repeat(2, 1fr);\r\n        gap: 50px;\r\n    }\r\n\r\n    .buildnox-image {\r\n        grid-column: span 2;\r\n    }\r\n\r\n    .buildnox-content {\r\n        grid-column: span 2;\r\n    }\r\n\r\n    .buildnox-title {\r\n        font-size: 44px;\r\n    }\r\n\r\n    .bn-stage {\r\n        max-width: 760px;\r\n        width: 100%;\r\n        margin: 0 auto;\r\n    }\r\n}\r\n\r\n\/* MOBILE *\/\r\n@media (max-width: 767px) {\r\n    .buildnox-section {\r\n        padding: 60px 20px;\r\n    }\r\n\r\n    .buildnox-title {\r\n        font-size: 32px;\r\n        line-height: 1.25;\r\n    }\r\n\r\n    .buildnox-text {\r\n        font-size: 16px;\r\n        line-height: 1.8;\r\n    }\r\n\r\n    .buildnox-features {\r\n        grid-template-columns: 1fr;\r\n        gap: 18px;\r\n        margin-bottom: 30px;\r\n    }\r\n\r\n    .feature-item span {\r\n        font-size: 17px;\r\n    }\r\n\r\n    .buildnox-tag {\r\n        font-size: 13px;\r\n    }\r\n\r\n    .buildnox-btn {\r\n        width: 100%;\r\n    }\r\n\r\n    .bn-stage { padding: 12px; }\r\n    .bn-photo { --lr: 84px; }\r\n    .bn-c { width: 40px; height: 40px; }\r\n    .bn-chip-in { font-size: 12px; padding: 8px 14px 8px 8px; gap: 9px; }\r\n    .bn-chip-in i { width: 32px; height: 32px; font-size: 13px; }\r\n    .bn-chip1 { top: 10%; }\r\n    .bn-chip2 { top: 50%; }\r\n    .bn-badge { width: 92px; height: 92px; right: 0; bottom: -14px; }\r\n    .bn-badge text { font-size: 10.5px; }\r\n    .bn-badge i { width: 36px; height: 36px; margin: -18px 0 0 -18px; font-size: 15px; }\r\n    .bn-hint { font-size: 11px; padding: 8px 13px; bottom: 14px; }\r\n}\r\n\r\n\/* SMALL MOBILE *\/\r\n@media (max-width: 480px) {\r\n    .buildnox-title {\r\n        font-size: 28px;\r\n    }\r\n    .bn-chip2 { display: none; }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n    .bn-dots, .bn-ring::before, .bn-badge svg, .bn-chip-in, .bn-hint, .bn-dot { animation: none !important; }\r\n    .bn-js .bn-par img { opacity: 1; animation: none !important; }\r\n    .bn-js.in .bn-curtain, .bn-js.in .bn-shine { animation: none !important; }\r\n    .bn-js .bn-c, .bn-js .bn-chip, .bn-js .bn-badge, .bn-js .bn-rv { opacity: 1; transform: none; transition: none; }\r\n    .bn-photo { transition: none; }\r\n}\r\n<\/style>\r\n\r\n<section class=\"buildnox-section\" id=\"bnSection\">\r\n    <div class=\"buildnox-container\">\r\n\r\n        <!-- LEFT IMAGE -->\r\n        <div class=\"buildnox-image\">\r\n            <div class=\"bn-stage\" id=\"bnStage\">\r\n\r\n                <span class=\"bn-dots\" aria-hidden=\"true\"><\/span>\r\n                <i class=\"bn-c bn-c1\" aria-hidden=\"true\"><\/i><i class=\"bn-c bn-c2\" aria-hidden=\"true\"><\/i>\r\n                <i class=\"bn-c bn-c3\" aria-hidden=\"true\"><\/i><i class=\"bn-c bn-c4\" aria-hidden=\"true\"><\/i>\r\n\r\n                <div class=\"bn-photo\" id=\"bnPhoto\">\r\n                    <div class=\"bn-par\" id=\"bnPar\">\r\n                        <img decoding=\"async\" src=\"https:\/\/staging.samplesite.top\/binnaeng\/wp-content\/uploads\/2026\/09\/Binna-Engineers.webp\" alt=\"Binna Engineering and Construction Ltd. at work\">\r\n                    <\/div>\r\n\r\n                    <!-- blueprint lens -->\r\n                    <div class=\"bn-lens\" aria-hidden=\"true\">\r\n                        <span class=\"bn-gb\" style=\"left:18%;top:7%\">A<\/span>\r\n                        <span class=\"bn-gb\" style=\"left:40%;top:7%\">B<\/span>\r\n                        <span class=\"bn-gb\" style=\"left:62%;top:7%\">C<\/span>\r\n                        <span class=\"bn-gb\" style=\"left:84%;top:7%\">D<\/span>\r\n                        <span class=\"bn-gb\" style=\"left:4%;top:30%\">1<\/span>\r\n                        <span class=\"bn-gb\" style=\"left:4%;top:52%\">2<\/span>\r\n                        <span class=\"bn-gb\" style=\"left:4%;top:74%\">3<\/span>\r\n                        <span class=\"bn-dim\"><\/span>\r\n                        <span class=\"bn-dimv\"><\/span>\r\n                    <\/div>\r\n                    <span class=\"bn-ring\" aria-hidden=\"true\"><\/span>\r\n                    <span class=\"bn-glare\" aria-hidden=\"true\"><\/span>\r\n                    <span class=\"bn-shine\" aria-hidden=\"true\"><\/span>\r\n                    <span class=\"bn-curtain\" aria-hidden=\"true\"><\/span>\r\n\r\n                    <span class=\"bn-hint\" id=\"bnHint\"><i class=\"fa-solid fa-compass-drafting\"><\/i><span id=\"bnHintText\">Move over the photo to see the blueprint<\/span><\/span>\r\n                <\/div>\r\n\r\n                <div class=\"bn-chip bn-chip1\"><div class=\"bn-chip-in\"><i class=\"fa-solid fa-shield-halved\"><\/i>Guaranteed Quality<\/div><\/div>\r\n                <div class=\"bn-chip bn-chip2\"><div class=\"bn-chip-in\"><i class=\"fa-solid fa-helmet-safety\"><\/i>Trained Employees<\/div><\/div>\r\n\r\n                <div class=\"bn-badge\" aria-hidden=\"true\">\r\n                    <div class=\"bn-badge-in\">\r\n                        <svg viewBox=\"0 0 120 120\">\r\n                            <defs><path id=\"bnCirc\" d=\"M60,60 m-44,0 a44,44 0 1,1 88,0 a44,44 0 1,1 -88,0\"\/><\/defs>\r\n                            <text><textPath href=\"#bnCirc\" textLength=\"268\" lengthAdjust=\"spacing\">BINNA ENGINEERS \u2022 QUALITY \u2022 <\/textPath><\/text>\r\n                        <\/svg>\r\n                        <i class=\"fa-solid fa-trowel-bricks\"><\/i>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- RIGHT CONTENT -->\r\n        <div class=\"buildnox-content\">\r\n\r\n            <div class=\"buildnox-tag bn-rv\" style=\"--d:.2s\">\r\n                <i class=\"fa-solid fa-grip-lines-vertical\"><\/i>\r\n                <span>WELCOME TO Binna engineering &amp; construction ltd.<\/span>\r\n            <\/div>\r\n\r\n            <h2 class=\"buildnox-title bn-rv\" style=\"--d:.3s\">\r\n                Provide Guaranteed<br>\r\n                Quality in Construction\r\n            <\/h2>\r\n\r\n            <p class=\"buildnox-text bn-rv\" style=\"--d:.4s\">\r\n                Bring to the table win-win survival strategies to ensure proactive\r\n                domination. At the end of the day, going forward, a new normal that\r\n                has evolved from generation X is on the runway heading towards a\r\n                streamlined cloud solution.\r\n            <\/p>\r\n\r\n            <div class=\"buildnox-features bn-rv\" style=\"--d:.5s\">\r\n\r\n                <div class=\"feature-item\">\r\n                    <i class=\"fa-regular fa-circle-check\"><\/i>\r\n                    <span>100% Satisfaction<\/span>\r\n                <\/div>\r\n\r\n                <div class=\"feature-item\">\r\n                    <i class=\"fa-regular fa-circle-check\"><\/i>\r\n                    <span>Flexible and Cost Effective<\/span>\r\n                <\/div>\r\n\r\n                <div class=\"feature-item\">\r\n                    <i class=\"fa-regular fa-circle-check\"><\/i>\r\n                    <span>Annual Pass Programs<\/span>\r\n                <\/div>\r\n\r\n                <div class=\"feature-item\">\r\n                    <i class=\"fa-regular fa-circle-check\"><\/i>\r\n                    <span>Trained Employees<\/span>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <!-- LEARN MORE BUTTON -->\r\n            <div class=\"buildnox-cta-wrapper bn-rv\" style=\"--d:.6s\">\r\n                <a href=\"https:\/\/staging.samplesite4u.com\/binnaeng\/about-us\/\" class=\"buildnox-btn\">\r\n                    <span>Learn More<\/span>\r\n                    <i class=\"fa-solid fa-arrow-right\"><\/i>\r\n                <\/a>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n  var sec=document.getElementById('bnSection'),stage=document.getElementById('bnStage'),\r\n      photo=document.getElementById('bnPhoto'),par=document.getElementById('bnPar'),\r\n      hint=document.getElementById('bnHint'),hintText=document.getElementById('bnHintText');\r\n  if(!sec||!stage||!photo)return;\r\n\r\n  var reduce=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n  var fine=window.matchMedia&&window.matchMedia('(hover: hover) and (pointer: fine)').matches;\r\n  if(!fine)hintText.textContent='Drag across the photo to see the blueprint';\r\n\r\n  var inView=false,roam=true,raf=null,t0=performance.now(),resumeT=null,interacted=false,ticking=false;\r\n\r\n  function lens(x,y){photo.style.setProperty('--mx',x+'px');photo.style.setProperty('--my',y+'px')}\r\n\r\n  \/* the lens drifts on its own until the visitor takes over *\/\r\n  function loop(t){\r\n    if(!roam||!inView){raf=null;return}\r\n    var r=photo.getBoundingClientRect(),k=t-t0;\r\n    lens(r.width*(.5+.3*Math.cos(k*.0007)),r.height*(.5+.24*Math.sin(k*.0011)));\r\n    raf=requestAnimationFrame(loop);\r\n  }\r\n  function startRoam(){if(!raf&&roam&&inView&&!reduce)raf=requestAnimationFrame(loop)}\r\n\r\n  \/* entrance + keep track of visibility *\/\r\n  if('IntersectionObserver' in window){\r\n    sec.classList.add('bn-js');\r\n    new IntersectionObserver(function(es){es.forEach(function(e){\r\n      inView=e.isIntersecting;\r\n      if(inView){sec.classList.add('in');startRoam();sp()}\r\n    })},{threshold:.2}).observe(sec);\r\n  }else{inView=true;startRoam()}\r\n\r\n  \/* pointer: lens follows, photo tilts, chips drift in the opposite direction *\/\r\n  function move(e){\r\n    var r=photo.getBoundingClientRect(),x=e.clientX-r.left,y=e.clientY-r.top;\r\n    roam=false;clearTimeout(resumeT);\r\n    lens(x,y);photo.classList.add('live');\r\n    if(!interacted){interacted=true;hint.classList.add('off')}\r\n    if(fine&&!reduce&&e.pointerType==='mouse'){\r\n      var nx=Math.max(-.5,Math.min(.5,x\/r.width-.5)),ny=Math.max(-.5,Math.min(.5,y\/r.height-.5));\r\n      photo.style.setProperty('--ry',(nx*9)+'deg');\r\n      photo.style.setProperty('--rx',(-ny*9)+'deg');\r\n      photo.style.setProperty('--gx',(x\/r.width*100)+'%');\r\n      photo.style.setProperty('--gy',(y\/r.height*100)+'%');\r\n      stage.style.setProperty('--px',nx);stage.style.setProperty('--py',ny);\r\n      photo.classList.add('moving');\r\n    }\r\n  }\r\n  function leave(){\r\n    photo.classList.remove('live','moving');\r\n    photo.style.setProperty('--rx','0deg');photo.style.setProperty('--ry','0deg');\r\n    stage.style.setProperty('--px',0);stage.style.setProperty('--py',0);\r\n    clearTimeout(resumeT);\r\n    resumeT=setTimeout(function(){roam=true;t0=performance.now();startRoam()},1100);\r\n  }\r\n  photo.addEventListener('pointerenter',move);\r\n  photo.addEventListener('pointermove',move);\r\n  photo.addEventListener('pointerdown',move);\r\n  photo.addEventListener('pointerleave',leave);\r\n  photo.addEventListener('pointercancel',leave);\r\n  photo.addEventListener('pointerup',function(e){if(e.pointerType!=='mouse')leave()});\r\n\r\n  \/* gentle scroll parallax on the picture itself *\/\r\n  function sp(){\r\n    ticking=false;\r\n    if(reduce||!inView)return;\r\n    var r=photo.getBoundingClientRect(),d=(r.top+r.height\/2-window.innerHeight\/2)\/window.innerHeight;\r\n    par.style.setProperty('--py',(-d*26).toFixed(1)+'px');\r\n  }\r\n  window.addEventListener('scroll',function(){if(!ticking){ticking=true;requestAnimationFrame(sp)}},{passive:true});\r\n  window.addEventListener('resize',sp);\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1156565 e-con-full e-flex e-con e-parent\" data-id=\"1156565\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-1cfada0 e-con-full e-flex e-con e-child\" data-id=\"1cfada0\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a004c7e elementor-widget elementor-widget-html\" data-id=\"a004c7e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Google Font -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Barlow+Condensed:wght@600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<!-- Font Awesome -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\"\/>\r\n\r\n<style>\r\n*{\r\n    margin:0;\r\n    padding:0;\r\n    box-sizing:border-box;\r\n}\r\n\r\n.stats-marquee{\r\n    width:100%;\r\n    background:#00163b;\r\n    overflow:hidden;\r\n    position:relative;\r\n    padding:22px 0;\r\n}\r\n\r\n.marquee-wrapper{\r\n    display:flex;\r\n    width:max-content;\r\n    animation:marqueeLeft 25s linear infinite;\r\n}\r\n\r\n.marquee-content{\r\n    display:flex;\r\n    align-items:center;\r\n    gap:90px;\r\n    padding-right:90px;\r\n}\r\n\r\n.stat-item{\r\n    display:flex;\r\n    align-items:center;\r\n    gap:18px;\r\n    white-space:nowrap;\r\n}\r\n\r\n.stat-item i{\r\n    color:#f4a100;\r\n    font-size:18px;\r\n    flex-shrink:0;\r\n}\r\n\r\n.stat-item span{\r\n    font-family:'Barlow Condensed',sans-serif;\r\n    font-size:36px;\r\n    font-weight:700;\r\n    color:#ffffff;\r\n    text-transform:uppercase;\r\n    line-height:1;\r\n    letter-spacing:-0.5px;\r\n}\r\n\r\n\/* Seamless Right \u2192 Left Animation *\/\r\n@keyframes marqueeLeft{\r\n    from{\r\n        transform:translateX(0);\r\n    }\r\n    to{\r\n        transform:translateX(-33.333%);\r\n    }\r\n}\r\n\r\n\/* Tablet *\/\r\n@media (max-width:1024px){\r\n\r\n    .marquee-content{\r\n        gap:70px;\r\n        padding-right:70px;\r\n    }\r\n\r\n    .stat-item span{\r\n        font-size:28px;\r\n    }\r\n}\r\n\r\n\/* Mobile *\/\r\n@media (max-width:767px){\r\n\r\n    .stats-marquee{\r\n        padding:18px 0;\r\n    }\r\n\r\n    .marquee-content{\r\n        gap:45px;\r\n        padding-right:45px;\r\n    }\r\n\r\n    .stat-item{\r\n        gap:12px;\r\n    }\r\n\r\n    .stat-item i{\r\n        font-size:14px;\r\n    }\r\n\r\n    .stat-item span{\r\n        font-size:22px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<section class=\"stats-marquee\">\r\n\r\n    <div class=\"marquee-wrapper\">\r\n\r\n        <!-- First Set -->\r\n        <div class=\"marquee-content\">\r\n\r\n            <div class=\"stat-item\">\r\n                <i class=\"fa-solid fa-fire-flame-curved\"><\/i>\r\n                <span>ISO 9001 CERTIFIED<\/span>\r\n            <\/div>\r\n\r\n            <div class=\"stat-item\">\r\n                <i class=\"fa-solid fa-fire-flame-curved\"><\/i>\r\n                <span>14 COUNTRIES<\/span>\r\n            <\/div>\r\n\r\n            <div class=\"stat-item\">\r\n                <i class=\"fa-solid fa-fire-flame-curved\"><\/i>\r\n                <span>ZERO INCIDENTS 1420 DAYS<\/span>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n        <!-- Duplicate Set -->\r\n        <div class=\"marquee-content\">\r\n\r\n            <div class=\"stat-item\">\r\n                <i class=\"fa-solid fa-fire-flame-curved\"><\/i>\r\n                <span>ISO 9001 CERTIFIED<\/span>\r\n            <\/div>\r\n\r\n            <div class=\"stat-item\">\r\n                <i class=\"fa-solid fa-fire-flame-curved\"><\/i>\r\n                <span>14 COUNTRIES<\/span>\r\n            <\/div>\r\n\r\n            <div class=\"stat-item\">\r\n                <i class=\"fa-solid fa-fire-flame-curved\"><\/i>\r\n                <span>ZERO INCIDENTS 1420 DAYS<\/span>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n        <!-- Third Set (helps eliminate gaps on ultra-wide screens) -->\r\n        <div class=\"marquee-content\">\r\n\r\n            <div class=\"stat-item\">\r\n                <i class=\"fa-solid fa-fire-flame-curved\"><\/i>\r\n                <span>ISO 9001 CERTIFIED<\/span>\r\n            <\/div>\r\n\r\n            <div class=\"stat-item\">\r\n                <i class=\"fa-solid fa-fire-flame-curved\"><\/i>\r\n                <span>14 COUNTRIES<\/span>\r\n            <\/div>\r\n\r\n            <div class=\"stat-item\">\r\n                <i class=\"fa-solid fa-fire-flame-curved\"><\/i>\r\n                <span>ZERO INCIDENTS 1420 DAYS<\/span>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4b41ac7 elementor-widget elementor-widget-html\" data-id=\"4b41ac7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n\r\n<style>\r\n\/* ================= SECTION ================= *\/\r\n.oil-solutions-section{\r\n    position:relative;\r\n    max-width:1200px;\r\n    margin:auto;\r\n    padding:80px 20px;\r\n    font-family:'Montserrat',sans-serif;\r\n    overflow-x:clip;\r\n}\r\n.oil-solutions-section *,\r\n.oil-solutions-section *::before,\r\n.oil-solutions-section *::after{\r\n    box-sizing:border-box;\r\n}\r\n\/* Montserrat on the text only (NOT on pseudo-elements, so icons keep their font) *\/\r\n.oil-solutions-section *{\r\n    font-family:'Montserrat',sans-serif;\r\n}\r\n\/* Font Awesome icons: force the icon font on the <i> AND its ::before glyph *\/\r\n.oil-solutions-section i.fas,\r\n.oil-solutions-section i.fa-solid,\r\n.oil-solutions-section i.fas::before,\r\n.oil-solutions-section i.fa-solid::before{\r\n    font-family:\"Font Awesome 6 Free\"!important;\r\n    font-weight:900!important;\r\n    font-style:normal;\r\n}\r\n\r\n\/* faint blueprint grid behind the section *\/\r\n.oil-solutions-section::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n    z-index:0;\r\n    pointer-events:none;\r\n    background-image:\r\n        linear-gradient(rgba(4,31,74,.045) 1px,transparent 1px),\r\n        linear-gradient(90deg,rgba(4,31,74,.045) 1px,transparent 1px);\r\n    background-size:44px 44px;\r\n    -webkit-mask-image:radial-gradient(ellipse at center,#000 35%,transparent 78%);\r\n    mask-image:radial-gradient(ellipse at center,#000 35%,transparent 78%);\r\n}\r\n.oil-top,.oil-grid{position:relative;z-index:1}\r\n\r\n\/* ================= HEADING ================= *\/\r\n.oil-top{\r\n    display:flex;\r\n    justify-content:space-between;\r\n    align-items:flex-end;\r\n    margin-bottom:50px;\r\n    gap:20px;\r\n}\r\n\r\n.oil-heading small{\r\n    display:flex;\r\n    align-items:center;\r\n    gap:14px;\r\n    color:#f5a623;\r\n    font-size:13px;\r\n    font-weight:600;\r\n    letter-spacing:2px;\r\n    text-transform:uppercase;\r\n    margin-bottom:15px;\r\n}\r\n.oil-heading small::before{\r\n    content:\"\";\r\n    width:44px;\r\n    height:2px;\r\n    background:#f5a623;\r\n    transform-origin:left;\r\n}\r\n\r\n.oil-heading h2{\r\n    margin:0;\r\n    font-size:64px;\r\n    line-height:1;\r\n    font-weight:800;\r\n    color:#041f4a;\r\n    text-transform:uppercase;\r\n}\r\n.oil-heading h2 .oil-ln{\r\n    display:block;\r\n    overflow:hidden;\r\n    padding-bottom:.08em;\r\n}\r\n.oil-heading h2 .oil-ln > span{\r\n    display:block;\r\n    color:#041f4a;\r\n}\r\n.oil-heading h2 .oil-ln.accent > span{color:#f5a623}\r\n\r\n\/* ================= BUTTON ================= *\/\r\n.oil-btn{\r\n    position:relative;\r\n    display:inline-flex;\r\n    align-items:center;\r\n    gap:10px;\r\n    text-decoration:none;\r\n    color:#041f4a;\r\n    font-weight:600;\r\n    font-size:14px;\r\n    letter-spacing:1px;\r\n    text-transform:uppercase;\r\n    padding:0 0 8px;\r\n    border-bottom:2px solid rgba(245,166,35,.3);\r\n    transition:color .3s ease,transform .25s ease-out;\r\n}\r\n.oil-btn::after{\r\n    content:\"\";\r\n    position:absolute;\r\n    left:0;\r\n    bottom:-2px;\r\n    width:100%;\r\n    height:2px;\r\n    background:#f5a623;\r\n    transform:scaleX(0);\r\n    transform-origin:left;\r\n    transition:transform .5s cubic-bezier(.7,0,.2,1);\r\n}\r\n.oil-btn:hover{color:#f5a623}\r\n.oil-btn:hover::after{transform:scaleX(1)}\r\n.oil-btn .arr{display:inline-block;transition:transform .35s ease}\r\n.oil-btn:hover .arr{transform:translateX(8px)}\r\n\r\n\/* ================= GRID ================= *\/\r\n.oil-grid{\r\n    display:grid;\r\n    grid-template-columns:repeat(3,1fr);\r\n    gap:25px;\r\n    perspective:1400px;\r\n}\r\n\r\n\/* ================= CARD ================= *\/\r\n.oil-card{\r\n    --rx:0deg;--ry:0deg;--ty:0px;\r\n    --mx:50%;--my:50%;--px:0;--py:0;\r\n    background:#fff;\r\n    overflow:hidden;\r\n    position:relative;\r\n    box-shadow:0 5px 25px rgba(0,0,0,.06);\r\n    display:flex;\r\n    flex-direction:column;\r\n    transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--ty));\r\n    transition:transform .25s ease-out,box-shadow .5s ease;\r\n    will-change:transform;\r\n}\r\n.oil-card:is(:hover,.hot){\r\n    --ty:-10px;\r\n    box-shadow:0 34px 60px rgba(4,31,74,.28);\r\n}\r\n\r\n\/* light that follows the cursor *\/\r\n.oil-card::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n    z-index:4;\r\n    pointer-events:none;\r\n    background:radial-gradient(340px circle at var(--mx) var(--my),rgba(245,166,35,.22),transparent 62%);\r\n    opacity:0;\r\n    transition:opacity .4s ease;\r\n}\r\n.oil-card:is(:hover,.hot)::before{opacity:1}\r\n\r\n\/* orange bar that draws along the bottom *\/\r\n.oil-card::after{\r\n    content:\"\";\r\n    position:absolute;\r\n    left:0;\r\n    bottom:0;\r\n    width:100%;\r\n    height:4px;\r\n    background:#f5a623;\r\n    z-index:5;\r\n    transform:scaleX(0);\r\n    transform-origin:left;\r\n    transition:transform .65s cubic-bezier(.7,0,.2,1);\r\n}\r\n.oil-card:is(:hover,.hot)::after{transform:scaleX(1)}\r\n\r\n\/* ---------- IMAGE ---------- *\/\r\n.oil-image{\r\n    position:relative;\r\n    height:280px;\r\n    overflow:hidden;\r\n}\r\n.oil-image img{\r\n    width:100%;\r\n    height:100%;\r\n    object-fit:cover;\r\n    display:block;\r\n    --s:1;\r\n    filter:grayscale(100%) contrast(1.05);\r\n    transform:scale(var(--s)) translate(calc(var(--px) * -16px),calc(var(--py) * -16px));\r\n    transition:transform .6s ease-out,filter .7s ease;\r\n}\r\n.oil-card:is(:hover,.hot) .oil-image img{\r\n    --s:1.14;\r\n    filter:grayscale(0%) contrast(1);\r\n}\r\n\r\n\/* blueprint corner brackets that draw themselves *\/\r\n.oil-image::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:14px;\r\n    z-index:2;\r\n    pointer-events:none;\r\n    background:\r\n        linear-gradient(#f5a623,#f5a623) left top\/0 2px no-repeat,\r\n        linear-gradient(#f5a623,#f5a623) left top\/2px 0 no-repeat,\r\n        linear-gradient(#f5a623,#f5a623) right bottom\/0 2px no-repeat,\r\n        linear-gradient(#f5a623,#f5a623) right bottom\/2px 0 no-repeat;\r\n    transition:background-size .5s ease .1s;\r\n}\r\n.oil-card:is(:hover,.hot) .oil-image::before{\r\n    background:\r\n        linear-gradient(#f5a623,#f5a623) left top\/38px 2px no-repeat,\r\n        linear-gradient(#f5a623,#f5a623) left top\/2px 38px no-repeat,\r\n        linear-gradient(#f5a623,#f5a623) right bottom\/38px 2px no-repeat,\r\n        linear-gradient(#f5a623,#f5a623) right bottom\/2px 38px no-repeat;\r\n}\r\n\r\n\/* orange light sweep across the photo *\/\r\n.oil-image::after{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n    z-index:1;\r\n    pointer-events:none;\r\n    background:linear-gradient(105deg,transparent 35%,rgba(245,166,35,.55) 50%,transparent 65%);\r\n    transform:translateX(-130%);\r\n}\r\n.oil-card:is(:hover,.hot) .oil-image::after{animation:oilsweep .95s ease forwards}\r\n@keyframes oilsweep{to{transform:translateX(130%)}}\r\n\r\n\/* ---------- NUMBER (outline fills on hover) ---------- *\/\r\n.oil-number{\r\n    position:absolute;\r\n    top:18px;\r\n    right:20px;\r\n    z-index:3;\r\n    font-size:40px;\r\n    font-weight:800;\r\n    line-height:1;\r\n    color:transparent;\r\n    -webkit-text-stroke:2px #f5a623;\r\n    transition:color .4s ease,transform .5s cubic-bezier(.2,.8,.2,1);\r\n}\r\n.oil-card:is(:hover,.hot) .oil-number{\r\n    color:#f5a623;\r\n    transform:translateY(4px) scale(1.12);\r\n}\r\n\r\n\/* ---------- ICON ---------- *\/\r\n.oil-icon{\r\n    position:absolute;\r\n    bottom:15px;\r\n    left:15px;\r\n    width:55px;\r\n    height:55px;\r\n    background:#f5a623;\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    z-index:3;\r\n    transition:transform .6s cubic-bezier(.2,.8,.2,1),background .3s ease;\r\n}\r\n.oil-icon::after{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n    border:2px solid #f5a623;\r\n    opacity:0;\r\n    pointer-events:none;\r\n}\r\n.oil-icon i{\r\n    color:#041f4a;\r\n    font-size:22px;\r\n    line-height:1;\r\n    transition:transform .6s cubic-bezier(.2,.8,.2,1);\r\n}\r\n.oil-card:is(:hover,.hot) .oil-icon{transform:rotate(180deg) scale(1.08)}\r\n.oil-card:is(:hover,.hot) .oil-icon i{transform:rotate(-180deg)}\r\n.oil-card:is(:hover,.hot) .oil-icon::after{animation:oilring 1.4s ease-out infinite}\r\n@keyframes oilring{\r\n    0%{transform:scale(1);opacity:.8}\r\n    100%{transform:scale(1.9);opacity:0}\r\n}\r\n\r\n\/* ---------- CONTENT (navy panel floods up on hover) ---------- *\/\r\n.oil-content{\r\n    position:relative;\r\n    z-index:0;\r\n    padding:30px;\r\n    display:flex;\r\n    flex-direction:column;\r\n    flex-grow:1;\r\n}\r\n.oil-content::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n    z-index:-1;\r\n    background:#041f4a;\r\n    transform:scaleY(0);\r\n    transform-origin:bottom;\r\n    transition:transform .6s cubic-bezier(.7,0,.2,1);\r\n}\r\n.oil-card:is(:hover,.hot) .oil-content::before{transform:scaleY(1)}\r\n\r\n.oil-content h3{\r\n    margin:0 0 15px;\r\n    color:#041f4a;\r\n    font-size:26px;\r\n    font-weight:700;\r\n    transition:color .4s ease .1s,transform .5s ease;\r\n}\r\n.oil-content p{\r\n    margin:0 0 25px;\r\n    color:#6a7280;\r\n    line-height:1.8;\r\n    font-size:15px;\r\n    flex-grow:1;\r\n    transition:color .4s ease .1s,transform .5s ease .05s;\r\n}\r\n.oil-card:is(:hover,.hot) .oil-content h3{color:#fff;transform:translateX(6px)}\r\n.oil-card:is(:hover,.hot) .oil-content p{color:rgba(255,255,255,.78);transform:translateX(6px)}\r\n\r\n\/* ---------- READ MORE ---------- *\/\r\n.oil-readmore{\r\n    text-decoration:none;\r\n    color:#041f4a;\r\n    font-weight:700;\r\n    font-size:13px;\r\n    letter-spacing:1px;\r\n    text-transform:uppercase;\r\n    display:inline-flex;\r\n    align-items:center;\r\n    gap:8px;\r\n    margin-top:auto;\r\n    transition:color .3s ease .1s;\r\n}\r\n.oil-readmore i{\r\n    font-size:12px;\r\n    transition:transform .35s ease;\r\n}\r\n.oil-card:is(:hover,.hot) .oil-readmore{color:#f5a623}\r\n.oil-card:is(:hover,.hot) .oil-readmore i{animation:oilnudge .9s ease-in-out infinite alternate}\r\n@keyframes oilnudge{\r\n    from{transform:translateX(0)}\r\n    to{transform:translateX(8px)}\r\n}\r\n\r\n\/* ================= ENTRANCE ANIMATIONS (JS adds .oil-js) ================= *\/\r\n\/* heading *\/\r\n.oil-js .oil-heading small{\r\n    opacity:0;\r\n    transform:translateY(12px);\r\n}\r\n.oil-js .oil-heading small::before{transform:scaleX(0)}\r\n.oil-js .oil-heading h2 .oil-ln > span{transform:translateY(112%)}\r\n.oil-js .oil-btn{\r\n    opacity:0;\r\n    translate:0 18px;\r\n}\r\n\r\n.oil-js .oil-top.in small{\r\n    opacity:1;\r\n    transform:none;\r\n    transition:opacity .6s ease,transform .6s ease;\r\n}\r\n.oil-js .oil-top.in small::before{\r\n    transform:scaleX(1);\r\n    transition:transform .8s cubic-bezier(.2,.8,.2,1) .3s;\r\n}\r\n.oil-js .oil-top.in h2 .oil-ln > span{\r\n    transform:none;\r\n    transition:transform 1s cubic-bezier(.2,.8,.2,1) calc(.2s + var(--i) * .14s);\r\n}\r\n.oil-js .oil-top.in .oil-btn{\r\n    opacity:1;\r\n    translate:0 0;\r\n    transition:opacity .7s ease .7s,translate .7s ease .7s,color .3s ease,transform .25s ease-out;\r\n}\r\n\r\n\/* cards: rise, tilt in, and the photo unwraps with a wipe *\/\r\n.oil-js .oil-card{\r\n    opacity:0;\r\n    translate:0 70px;\r\n    --ry:-8deg;\r\n}\r\n.oil-js .oil-card.in{\r\n    opacity:1;\r\n    translate:0 0;\r\n    --ry:0deg;\r\n    transition:\r\n        opacity .8s ease var(--d,0s),\r\n        translate .9s cubic-bezier(.2,.8,.2,1) var(--d,0s),\r\n        transform .25s ease-out,\r\n        box-shadow .5s ease;\r\n}\r\n.oil-js .oil-card .oil-image{\r\n    clip-path:inset(0 0 100% 0);\r\n}\r\n.oil-js .oil-card.in .oil-image{\r\n    clip-path:inset(0 0 0 0);\r\n    transition:clip-path 1.1s cubic-bezier(.7,0,.2,1) calc(var(--d,0s) + .25s);\r\n}\r\n.oil-js .oil-card:not(.in) .oil-image img{--s:1.4}\r\n.oil-js .oil-card.in .oil-image img{\r\n    transition:transform 1.4s cubic-bezier(.2,.8,.2,1) var(--d,0s),filter .7s ease;\r\n}\r\n.oil-js .oil-card.in:is(:hover,.hot) .oil-image img{\r\n    transition:transform .6s ease-out,filter .7s ease;\r\n}\r\n.oil-js .oil-card .oil-number,\r\n.oil-js .oil-card .oil-icon{\r\n    opacity:0;\r\n    scale:.6;\r\n}\r\n.oil-js .oil-card.in .oil-number,\r\n.oil-js .oil-card.in .oil-icon{\r\n    opacity:1;\r\n    scale:1;\r\n    transition:\r\n        opacity .6s ease calc(var(--d,0s) + .9s),\r\n        scale .6s cubic-bezier(.2,.8,.2,1.4) calc(var(--d,0s) + .9s),\r\n        transform .6s cubic-bezier(.2,.8,.2,1),\r\n        color .4s ease,\r\n        background .3s ease;\r\n}\r\n.oil-js .oil-card .oil-content h3,\r\n.oil-js .oil-card .oil-content p,\r\n.oil-js .oil-card .oil-readmore{\r\n    opacity:0;\r\n    translate:0 18px;\r\n}\r\n.oil-js .oil-card.in .oil-content h3{\r\n    opacity:1;translate:0 0;\r\n    transition:opacity .6s ease calc(var(--d,0s) + .8s),translate .6s ease calc(var(--d,0s) + .8s),color .4s ease .1s,transform .5s ease;\r\n}\r\n.oil-js .oil-card.in .oil-content p{\r\n    opacity:1;translate:0 0;\r\n    transition:opacity .6s ease calc(var(--d,0s) + .9s),translate .6s ease calc(var(--d,0s) + .9s),color .4s ease .1s,transform .5s ease .05s;\r\n}\r\n.oil-js .oil-card.in .oil-readmore{\r\n    opacity:1;translate:0 0;\r\n    transition:opacity .6s ease calc(var(--d,0s) + 1s),translate .6s ease calc(var(--d,0s) + 1s),color .3s ease .1s;\r\n}\r\n\r\n\/* ================= TABLET ================= *\/\r\n@media(max-width:1024px){\r\n    .oil-heading h2{font-size:48px}\r\n    .oil-grid{grid-template-columns:repeat(2,1fr)}\r\n}\r\n\r\n\/* ================= MOBILE ================= *\/\r\n@media(max-width:767px){\r\n    .oil-solutions-section{padding:60px 16px}\r\n    .oil-top{\r\n        flex-direction:column;\r\n        align-items:flex-start;\r\n        gap:25px;\r\n    }\r\n    .oil-heading h2{font-size:38px}\r\n    .oil-grid{grid-template-columns:1fr}\r\n    .oil-image{height:240px}\r\n    .oil-content{padding:24px}\r\n    .oil-content h3{font-size:22px}\r\n}\r\n\r\n\/* ================= REDUCED MOTION ================= *\/\r\n@media (prefers-reduced-motion:reduce){\r\n    .oil-js .oil-heading small,\r\n    .oil-js .oil-heading h2 .oil-ln > span,\r\n    .oil-js .oil-btn,\r\n    .oil-js .oil-card,\r\n    .oil-js .oil-card .oil-image,\r\n    .oil-js .oil-card .oil-number,\r\n    .oil-js .oil-card .oil-icon,\r\n    .oil-js .oil-card .oil-content h3,\r\n    .oil-js .oil-card .oil-content p,\r\n    .oil-js .oil-card .oil-readmore{\r\n        opacity:1!important;\r\n        transform:none!important;\r\n        translate:none!important;\r\n        scale:none!important;\r\n        clip-path:none!important;\r\n        transition:none!important;\r\n    }\r\n    .oil-heading small::before{transform:none!important}\r\n    .oil-card:is(:hover,.hot) .oil-image::after,\r\n    .oil-card:is(:hover,.hot) .oil-icon::after,\r\n    .oil-card:is(:hover,.hot) .oil-readmore i{animation:none}\r\n}\r\n<\/style>\r\n\r\n<section class=\"oil-solutions-section\" id=\"oilSolutions\">\r\n\r\n    <div class=\"oil-top\">\r\n        <div class=\"oil-heading\">\r\n            <small>OUR SPECIALIZATION<\/small>\r\n            <h2>\r\n                <span class=\"oil-ln\" style=\"--i:0\"><span>SOLUTIONS WE<\/span><\/span>\r\n                <span class=\"oil-ln accent\" style=\"--i:1\"><span>DELIVER<\/span><\/span>\r\n            <\/h2>\r\n        <\/div>\r\n\r\n        <a href=\"#\" class=\"oil-btn\">\r\n            ALL CAPABILITIES <span class=\"arr\">&rarr;<\/span>\r\n        <\/a>\r\n    <\/div>\r\n\r\n    <div class=\"oil-grid\">\r\n\r\n        <div class=\"oil-card\">\r\n            <div class=\"oil-image\">\r\n                <img decoding=\"async\" src=\"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-content\/uploads\/2026\/06\/high-level-description-shot-on-iphone-a-_7tUJRpKMUL-CI1H_6CNKxg_x_znsD4bRxyr20r-41ATSA_cover.jpg\" alt=\"Civil Infrastructure\">\r\n                <div class=\"oil-number\">01<\/div>\r\n                <div class=\"oil-icon\">\r\n                    <i class=\"fas fa-water\"><\/i>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"oil-content\">\r\n                <h3>Civil Infrastructure<\/h3>\r\n                <p>Engineering strong foundations and infrastructure solutions for growing, connected communities..<\/p>\r\n                <a href=\"https:\/\/staging.samplesite4u.com\/binnaeng\/civil-infrastructure\/\" class=\"oil-readmore\">Read More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"oil-card\">\r\n            <div class=\"oil-image\">\r\n                <img decoding=\"async\" src=\"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-content\/uploads\/2026\/06\/high-level-description-a-handheld-phone-_FhciZfm4V7C8D2xqUXe_Cw_VyuDnW59RyC4uNCp3k0x7w.jpg\" alt=\"Project Management\">\r\n                <div class=\"oil-number\">02<\/div>\r\n                <div class=\"oil-icon\">\r\n                    <i class=\"fas fa-industry\"><\/i>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"oil-content\">\r\n                <h3>Project Management<\/h3>\r\n                <p>Turning complex blueprints into reality, on time and within budget..<\/p>\r\n                <a href=\"https:\/\/staging.samplesite4u.com\/binnaeng\/project-management\/\" class=\"oil-readmore\">Read More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"oil-card\">\r\n            <div class=\"oil-image\">\r\n                <img decoding=\"async\" src=\"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-content\/uploads\/2026\/10\/makei.png\" alt=\"Pipeline Logistics\">\r\n                <div class=\"oil-number\">03<\/div>\r\n                <div class=\"oil-icon\">\r\n                    <i class=\"fas fa-truck\"><\/i>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"oil-content\">\r\n                <h3>Pipeline Logistics<\/h3>\r\n                <p>Smart distribution networks supported by monitoring and integrity management systems.<\/p>\r\n                <a href=\"https:\/\/staging.samplesite4u.com\/binnaeng\/pipeline-logistics\/\" class=\"oil-readmore\">Read More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"oil-card\">\r\n            <div class=\"oil-image\">\r\n                <img decoding=\"async\" src=\"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-content\/uploads\/2026\/06\/image-90.png\" alt=\"MEP Solutions\">\r\n                <div class=\"oil-number\">04<\/div>\r\n                <div class=\"oil-icon\">\r\n                    <i class=\"fas fa-bolt\"><\/i>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"oil-content\">\r\n                <h3>MEP Solutions<\/h3>\r\n                <p>Delivering integrated mechanical, electrical, and plumbing systems for building efficiency.<\/p>\r\n                <a href=\"https:\/\/staging.samplesite4u.com\/binnaeng\/mep-solutions\/\" class=\"oil-readmore\">Read More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"oil-card\">\r\n            <div class=\"oil-image\">\r\n                <img decoding=\"async\" src=\"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-content\/uploads\/2026\/10\/pilk.jpg\" alt=\"Engineering Services\">\r\n                <div class=\"oil-number\">05<\/div>\r\n                <div class=\"oil-icon\">\r\n                    <i class=\"fas fa-hard-hat\"><\/i>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"oil-content\">\r\n                <h3>Engineering Services<\/h3>\r\n                <p>Comprehensive design, procurement and project management solutions for complex assets.<\/p>\r\n                <a href=\"https:\/\/staging.samplesite4u.com\/binnaeng\/engineering-services\/\" class=\"oil-readmore\">Read More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"oil-card\">\r\n            <div class=\"oil-image\">\r\n                <img decoding=\"async\" src=\"https:\/\/staging.samplesite.top\/binnaeng\/wp-content\/uploads\/2026\/06\/high-level-description-a-casual-iphone-s_y3ZeMeOIWcS0GZaQhcWc9Q_iP5RvF0ORBOLbDyte58Sww.jpg\" alt=\"HSE Management\">\r\n                <div class=\"oil-number\">06<\/div>\r\n                <div class=\"oil-icon\">\r\n                    <i class=\"fas fa-shield-alt\"><\/i>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"oil-content\">\r\n                <h3>HSE Management<\/h3>\r\n                <p>Health, safety and environmental compliance programs tailored for high-risk operations.<\/p>\r\n                <a href=\"https:\/\/staging.samplesite4u.com\/binnaeng\/hse-management\/\" class=\"oil-readmore\">Read More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n    var sec = document.getElementById('oilSolutions');\r\n    if(!sec) return;\r\n\r\n    var top     = sec.querySelector('.oil-top');\r\n    var btn     = sec.querySelector('.oil-btn');\r\n    var cards   = Array.prototype.slice.call(sec.querySelectorAll('.oil-card'));\r\n    var reduce  = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n    var finePtr = window.matchMedia && window.matchMedia('(hover: hover) and (pointer: fine)').matches;\r\n\r\n    \/* stagger: columns ripple left to right, rows follow *\/\r\n    var cols = window.innerWidth <= 767 ? 1 : (window.innerWidth <= 1024 ? 2 : 3);\r\n    cards.forEach(function(c, i){\r\n        var d = (i % cols) * 0.14 + Math.floor(i \/ cols) * 0.12;\r\n        c.style.setProperty('--d', d.toFixed(2) + 's');\r\n    });\r\n\r\n    \/* scroll reveal *\/\r\n    if('IntersectionObserver' in window && !reduce){\r\n        sec.classList.add('oil-js');\r\n        var io = new IntersectionObserver(function(entries){\r\n            entries.forEach(function(e){\r\n                if(!e.isIntersecting) return;\r\n                e.target.classList.add('in');\r\n                io.unobserve(e.target);\r\n            });\r\n        }, { threshold: 0.18 });\r\n        io.observe(top);\r\n        cards.forEach(function(c){ io.observe(c); });\r\n    }\r\n\r\n    \/* desktop: 3D tilt, cursor light, photo parallax *\/\r\n    if(finePtr && !reduce){\r\n        cards.forEach(function(card){\r\n            card.addEventListener('mouseenter', function(){ card.classList.add('hot'); });\r\n            card.addEventListener('mousemove', function(e){\r\n                var r  = card.getBoundingClientRect();\r\n                var px = (e.clientX - r.left) \/ r.width;\r\n                var py = (e.clientY - r.top) \/ r.height;\r\n                card.style.setProperty('--ry', ((px - .5) * 10).toFixed(2) + 'deg');\r\n                card.style.setProperty('--rx', ((py - .5) * -8).toFixed(2) + 'deg');\r\n                card.style.setProperty('--mx', (px * 100).toFixed(1) + '%');\r\n                card.style.setProperty('--my', (py * 100).toFixed(1) + '%');\r\n                card.style.setProperty('--px', (px - .5).toFixed(3));\r\n                card.style.setProperty('--py', (py - .5).toFixed(3));\r\n            });\r\n            card.addEventListener('mouseleave', function(){\r\n                card.classList.remove('hot');\r\n                card.style.setProperty('--rx', '0deg');\r\n                card.style.setProperty('--ry', '0deg');\r\n                card.style.setProperty('--px', 0);\r\n                card.style.setProperty('--py', 0);\r\n            });\r\n        });\r\n\r\n        \/* magnetic \"All Capabilities\" button *\/\r\n        if(btn){\r\n            btn.addEventListener('mousemove', function(e){\r\n                var r = btn.getBoundingClientRect();\r\n                var x = e.clientX - r.left - r.width \/ 2;\r\n                var y = e.clientY - r.top - r.height \/ 2;\r\n                btn.style.transform = 'translate(' + (x * .22) + 'px,' + (y * .4) + 'px)';\r\n            });\r\n            btn.addEventListener('mouseleave', function(){ btn.style.transform = ''; });\r\n        }\r\n    }\r\n\r\n    \/* touch screens: the card in the middle of the screen \"wakes up\" *\/\r\n    if(!finePtr && !reduce && 'IntersectionObserver' in window){\r\n        var focusIO = new IntersectionObserver(function(entries){\r\n            entries.forEach(function(e){\r\n                e.target.classList.toggle('hot', e.isIntersecting);\r\n            });\r\n        }, { rootMargin: '-38% 0px -38% 0px', threshold: 0 });\r\n        cards.forEach(function(c){ focusIO.observe(c); });\r\n    }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-64a1081 e-con-full e-flex e-con e-parent\" data-id=\"64a1081\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-16e5a4a e-flex e-con-boxed e-con e-child\" data-id=\"16e5a4a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3eb2a47 elementor-widget elementor-widget-heading\" data-id=\"3eb2a47\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Services We Provide <\/h2>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-059900f elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"059900f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.css\"\/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\"\/>\r\n\r\n<style>\r\n\/* rotating-border angle (used by the circling light on hover) *\/\r\n@property --sv-ang{\r\n    syntax:'<angle>';\r\n    initial-value:0deg;\r\n    inherits:false;\r\n}\r\n\r\n\/* scoped reset: only affects this section, never the rest of the page *\/\r\n:where(.services-slider-section) :where(*,*::before,*::after){\r\n    margin:0;\r\n    padding:0;\r\n    box-sizing:border-box;\r\n}\r\n\r\n.services-slider-section{\r\n    --sv-accent:#FF6B00;\r\n    --sv-dark:#041f4a;\r\n    --sv-ink:#111827;\r\n    position:relative;\r\n    width:100%;\r\n    padding:80px 70px 70px;\r\n    overflow:hidden;\r\n    font-family:'Montserrat',sans-serif;\r\n}\r\n.services-slider-section .service-title,\r\n.services-slider-section .sv-count,\r\n.services-slider-section .service-num{\r\n    font-family:'Montserrat',sans-serif;\r\n}\r\n.services-slider-section i.fas,\r\n.services-slider-section i.fa-solid{\r\n    font-family:\"Font Awesome 6 Free\"!important;\r\n    font-weight:900!important;\r\n    font-style:normal;\r\n}\r\n\r\n.services-swiper{\r\n    --sk:0deg;\r\n    overflow:visible;\r\n}\r\n\r\n\/* ================= CARD LINK (skews while the slider moves) ================= *\/\r\n.service-card-link{\r\n    display:block;\r\n    text-decoration:none;\r\n    color:inherit;\r\n    cursor:pointer;\r\n    transform:skewX(var(--sk));\r\n    transition:transform .9s cubic-bezier(.2,.8,.2,1);\r\n}\r\n.service-card-link:focus-visible{\r\n    outline:2px solid var(--sv-accent);\r\n    outline-offset:4px;\r\n    border-radius:12px;\r\n}\r\n\r\n\/* ================= CARD ================= *\/\r\n.service-card{\r\n    --rx:0deg;--ry:0deg;\r\n    --mx:50%;--my:50%;\r\n    --px:0;--py:0;\r\n    position:relative;\r\n    background:#fff;\r\n    border:1px solid #d1d5db;\r\n    border-radius:12px;\r\n    padding:18px;\r\n    box-shadow:0 0 15px rgba(0,0,0,.06);\r\n    transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));\r\n    translate:0 0;\r\n    transition:transform .25s ease-out,translate .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,border-color .3s ease;\r\n}\r\n.service-card:is(:hover,.hot){\r\n    translate:0 -9px;\r\n    border-color:transparent;\r\n    box-shadow:0 30px 55px rgba(4,31,74,.22);\r\n}\r\n\r\n\/* orange light that circles the card edge *\/\r\n.service-card::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:-1px;\r\n    border-radius:13px;\r\n    padding:2px;\r\n    z-index:4;\r\n    pointer-events:none;\r\n    background:conic-gradient(from var(--sv-ang),transparent 0 60%,var(--sv-accent) 82%,#ffb36b 91%,transparent 100%);\r\n    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);\r\n    -webkit-mask-composite:xor;\r\n    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);\r\n    mask-composite:exclude;\r\n    opacity:0;\r\n    transition:opacity .4s ease;\r\n}\r\n.service-card:is(:hover,.hot)::before{\r\n    opacity:1;\r\n    animation:svspin 2.4s linear infinite;\r\n}\r\n@keyframes svspin{to{--sv-ang:360deg}}\r\n\r\n\/* spotlight that follows the cursor *\/\r\n.service-card::after{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n    border-radius:12px;\r\n    z-index:3;\r\n    pointer-events:none;\r\n    background:radial-gradient(260px circle at var(--mx) var(--my),rgba(255,107,0,.14),transparent 65%);\r\n    opacity:0;\r\n    transition:opacity .4s ease;\r\n}\r\n.service-card:is(:hover,.hot)::after{opacity:1}\r\n\r\n\/* ================= IMAGE ================= *\/\r\n.service-image{\r\n    position:relative;\r\n    width:100%;\r\n    height:170px;\r\n    border-radius:10px;\r\n    overflow:hidden;\r\n    background:#e5e7eb;\r\n}\r\n.service-image img{\r\n    width:100%;\r\n    height:100%;\r\n    object-fit:cover;\r\n    display:block;\r\n    --s:1;\r\n    filter:grayscale(.85) contrast(1.05);\r\n    transform:scale(var(--s)) translate(calc(var(--px) * -10px),calc(var(--py) * -10px));\r\n    transition:transform .6s ease-out,filter .7s ease;\r\n}\r\n.service-card:is(:hover,.hot) .service-image img{\r\n    --s:1.14;\r\n    filter:grayscale(0) contrast(1);\r\n}\r\n.service-image::after{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n    pointer-events:none;\r\n    background:linear-gradient(180deg,rgba(4,31,74,0) 45%,rgba(4,31,74,.55));\r\n    transition:opacity .5s ease;\r\n}\r\n.service-card:is(:hover,.hot) .service-image::after{opacity:.25}\r\n\r\n.service-num{\r\n    position:absolute;\r\n    top:12px;\r\n    left:12px;\r\n    z-index:2;\r\n    font-size:11px;\r\n    font-weight:700;\r\n    letter-spacing:2px;\r\n    color:#fff;\r\n    background:rgba(4,31,74,.72);\r\n    -webkit-backdrop-filter:blur(4px);\r\n    backdrop-filter:blur(4px);\r\n    padding:5px 11px;\r\n    border-radius:20px;\r\n    transition:background .35s ease,transform .45s cubic-bezier(.2,.8,.2,1);\r\n}\r\n.service-card:is(:hover,.hot) .service-num{\r\n    background:var(--sv-accent);\r\n    transform:translateY(2px);\r\n}\r\n\r\n.service-go{\r\n    position:absolute;\r\n    right:12px;\r\n    bottom:12px;\r\n    z-index:2;\r\n    width:42px;\r\n    height:42px;\r\n    border-radius:50%;\r\n    background:var(--sv-accent);\r\n    color:#fff;\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    font-size:14px;\r\n    box-shadow:0 8px 20px rgba(255,107,0,.45);\r\n    scale:0;\r\n    rotate:-90deg;\r\n    transition:scale .5s cubic-bezier(.2,.8,.2,1.4),rotate .5s cubic-bezier(.2,.8,.2,1);\r\n}\r\n.service-go i{transform:rotate(-45deg)}\r\n.service-card:is(:hover,.hot) .service-go{\r\n    scale:1;\r\n    rotate:0deg;\r\n}\r\n\r\n\/* ================= CONTENT ================= *\/\r\n.service-content{\r\n    position:relative;\r\n    display:flex;\r\n    align-items:center;\r\n    gap:16px;\r\n    margin-top:22px;\r\n    padding-bottom:14px;\r\n}\r\n\/* line that draws under the title *\/\r\n.service-content::after{\r\n    content:\"\";\r\n    position:absolute;\r\n    left:0;\r\n    bottom:0;\r\n    width:100%;\r\n    height:2px;\r\n    background:var(--sv-accent);\r\n    transform:scaleX(0);\r\n    transform-origin:left;\r\n    transition:transform .65s cubic-bezier(.7,0,.2,1);\r\n}\r\n.service-card:is(:hover,.hot) .service-content::after{transform:scaleX(1)}\r\n\r\n.service-icon{\r\n    position:relative;\r\n    min-width:58px;\r\n    width:58px;\r\n    height:58px;\r\n    border-radius:50%;\r\n    background:#f2f2f2;\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    font-size:24px;\r\n    color:#111;\r\n}\r\n\/* orange fills out from the centre *\/\r\n.service-icon::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n    border-radius:50%;\r\n    background:var(--sv-accent);\r\n    transform:scale(0);\r\n    transition:transform .5s cubic-bezier(.2,.8,.2,1);\r\n}\r\n.service-icon::after{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n    border-radius:50%;\r\n    border:2px solid var(--sv-accent);\r\n    opacity:0;\r\n    pointer-events:none;\r\n}\r\n.service-icon i{\r\n    position:relative;\r\n    z-index:1;\r\n    transition:transform .7s cubic-bezier(.2,.8,.2,1),color .3s ease;\r\n}\r\n.service-card:is(:hover,.hot) .service-icon::before{transform:scale(1)}\r\n.service-card:is(:hover,.hot) .service-icon::after{animation:svring 1.5s ease-out infinite}\r\n.service-card:is(:hover,.hot) .service-icon i{\r\n    color:#fff;\r\n    transform:rotateY(360deg);\r\n}\r\n@keyframes svring{\r\n    0%{transform:scale(1);opacity:.8}\r\n    100%{transform:scale(1.7);opacity:0}\r\n}\r\n\r\n.service-title{\r\n    font-size:18px;\r\n    font-weight:700;\r\n    line-height:1.3;\r\n    color:var(--sv-ink);\r\n    transition:color .35s ease,transform .45s cubic-bezier(.2,.8,.2,1);\r\n}\r\n.service-card:is(:hover,.hot) .service-title{\r\n    color:var(--sv-accent);\r\n    transform:translateX(5px);\r\n}\r\n\r\n\/* ================= ARROWS ================= *\/\r\n.swiper-button-prev-custom,\r\n.swiper-button-next-custom{\r\n    position:absolute;\r\n    top:50%;\r\n    translate:0 -50%;\r\n    width:52px;\r\n    height:52px;\r\n    background:#fff;\r\n    color:var(--sv-ink);\r\n    border-radius:10px;\r\n    box-shadow:0 0 12px rgba(0,0,0,.08);\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    cursor:pointer;\r\n    z-index:20;\r\n    overflow:hidden;\r\n    transition:color .3s ease,box-shadow .3s ease,transform .25s ease-out;\r\n}\r\n.swiper-button-prev-custom::before,\r\n.swiper-button-next-custom::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n    background:var(--sv-accent);\r\n    border-radius:inherit;\r\n    transform:scale(0);\r\n    transition:transform .45s cubic-bezier(.2,.8,.2,1);\r\n}\r\n.swiper-button-prev-custom:hover,\r\n.swiper-button-next-custom:hover{\r\n    color:#fff;\r\n    box-shadow:0 10px 26px rgba(255,107,0,.4);\r\n}\r\n.swiper-button-prev-custom:hover::before,\r\n.swiper-button-next-custom:hover::before{transform:scale(1.2)}\r\n.swiper-button-prev-custom{left:0}\r\n.swiper-button-next-custom{right:0}\r\n.swiper-button-prev-custom i,\r\n.swiper-button-next-custom i{\r\n    position:relative;\r\n    z-index:1;\r\n    font-size:18px;\r\n    transition:transform .3s ease;\r\n}\r\n.swiper-button-prev-custom:hover i{transform:translateX(-4px)}\r\n.swiper-button-next-custom:hover i{transform:translateX(4px)}\r\n\r\n\/* ================= COUNTER + AUTOPLAY PROGRESS ================= *\/\r\n.sv-foot{\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    gap:22px;\r\n    margin-top:46px;\r\n}\r\n.sv-count{\r\n    display:flex;\r\n    align-items:center;\r\n    gap:12px;\r\n    font-weight:800;\r\n    font-size:15px;\r\n    letter-spacing:2px;\r\n    color:var(--sv-dark);\r\n    font-variant-numeric:tabular-nums;\r\n}\r\n.sv-count .tot{opacity:.4}\r\n.sv-count .sep{width:26px;height:1px;background:rgba(4,31,74,.4)}\r\n.sv-count .cur.tick{animation:svtick .5s ease}\r\n@keyframes svtick{\r\n    from{opacity:0;transform:translateY(10px)}\r\n    to{opacity:1;transform:none}\r\n}\r\n.sv-track{\r\n    position:relative;\r\n    width:min(380px,55%);\r\n    height:3px;\r\n    background:rgba(4,31,74,.12);\r\n    overflow:hidden;\r\n}\r\n.sv-track i{\r\n    position:absolute;\r\n    inset:0;\r\n    background:var(--sv-accent);\r\n    transform:scaleX(0);\r\n    transform-origin:left;\r\n}\r\n\r\n\/* ================= ENTRANCE (JS adds .sv-js \/ .sv-in) ================= *\/\r\n.sv-js .service-card-link{\r\n    opacity:0;\r\n    translate:0 70px;\r\n}\r\n.sv-js.sv-in .service-card-link{\r\n    opacity:1;\r\n    translate:0 0;\r\n    transition:\r\n        opacity .8s ease var(--d,0s),\r\n        translate .9s cubic-bezier(.2,.8,.2,1) var(--d,0s),\r\n        transform .9s cubic-bezier(.2,.8,.2,1);\r\n}\r\n.sv-js .service-image{clip-path:inset(0 100% 0 0 round 10px)}\r\n.sv-js.sv-in .service-image{\r\n    clip-path:inset(0 0 0 0 round 10px);\r\n    transition:clip-path 1.1s cubic-bezier(.7,0,.2,1) calc(var(--d,0s) + .25s);\r\n}\r\n.sv-js:not(.sv-in) .service-image img{scale:1.35}\r\n.sv-js.sv-in .service-image img{\r\n    animation:svzoom 1.4s cubic-bezier(.2,.8,.2,1) var(--d,0s) both;\r\n}\r\n@keyframes svzoom{\r\n    from{scale:1.35}\r\n    to{scale:1}\r\n}\r\n.sv-js:not(.sv-in) .service-icon{opacity:0;scale:.4}\r\n.sv-js.sv-in .service-icon{animation:svpop .7s cubic-bezier(.2,.8,.2,1.4) calc(var(--d,0s) + .75s) both}\r\n@keyframes svpop{\r\n    from{opacity:0;scale:.4}\r\n    to{opacity:1;scale:1}\r\n}\r\n.sv-js:not(.sv-in) .service-title{opacity:0;translate:16px 0}\r\n.sv-js.sv-in .service-title{animation:svslide .7s ease calc(var(--d,0s) + .85s) both}\r\n@keyframes svslide{\r\n    from{opacity:0;translate:16px 0}\r\n    to{opacity:1;translate:0 0}\r\n}\r\n.sv-js .sv-foot{opacity:0;translate:0 16px}\r\n.sv-js.sv-in .sv-foot{\r\n    opacity:1;\r\n    translate:0 0;\r\n    transition:opacity .7s ease 1s,translate .7s ease 1s;\r\n}\r\n\r\n\/* ================= TABLET ================= *\/\r\n@media(max-width:1024px){\r\n    .services-slider-section{padding:60px 50px 56px}\r\n    .service-image{height:180px}\r\n}\r\n\r\n\/* ================= MOBILE ================= *\/\r\n@media(max-width:767px){\r\n    .services-slider-section{padding:40px 20px 44px}\r\n    .swiper-button-prev-custom,\r\n    .swiper-button-next-custom{\r\n        width:45px;\r\n        height:45px;\r\n    }\r\n    .service-image{height:220px}\r\n    .service-title{font-size:17px}\r\n    .sv-foot{margin-top:34px;gap:16px}\r\n}\r\n\r\n\/* ================= REDUCED MOTION ================= *\/\r\n@media (prefers-reduced-motion:reduce){\r\n    .service-card:is(:hover,.hot)::before,\r\n    .service-card:is(:hover,.hot) .service-icon::after{animation:none}\r\n    .service-card-link{transform:none!important}\r\n    .service-card{transform:none!important}\r\n}\r\n<\/style>\r\n\r\n<div class=\"services-slider-section\" id=\"svSection\">\r\n\r\n    <div class=\"swiper-button-prev-custom\">\r\n        <i class=\"fas fa-arrow-left\"><\/i>\r\n    <\/div>\r\n\r\n    <div class=\"swiper-button-next-custom\">\r\n        <i class=\"fas fa-arrow-right\"><\/i>\r\n    <\/div>\r\n\r\n    <div class=\"swiper services-swiper\">\r\n        <div class=\"swiper-wrapper\">\r\n\r\n            <!-- 1. Renovation & Restoration -->\r\n            <div class=\"swiper-slide\">\r\n                <a class=\"service-card-link\" href=\"https:\/\/staging.samplesite4u.com\/binnaeng\/renovation\/\" aria-label=\"Renovation and Restoration\">\r\n                    <div class=\"service-card\">\r\n                        <div class=\"service-image\">\r\n                            <img decoding=\"async\" src=\"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-content\/uploads\/2026\/10\/renovated-building_unsplash.jpg?w=800\" alt=\"Renovation and Restoration\">\r\n                            <span class=\"service-num\">01<\/span>\r\n                            <span class=\"service-go\"><i class=\"fas fa-arrow-right\"><\/i><\/span>\r\n                        <\/div>\r\n\r\n                        <div class=\"service-content\">\r\n                            <div class=\"service-icon\">\r\n                                <i class=\"fa-solid fa-house\"><\/i>\r\n                            <\/div>\r\n\r\n                            <div class=\"service-title\">\r\n                                Renovation &amp;<br>Restoration\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/a>\r\n            <\/div>\r\n\r\n            <!-- 2. Building Construction -->\r\n            <div class=\"swiper-slide\">\r\n                <a class=\"service-card-link\" href=\"https:\/\/staging.samplesite4u.com\/binnaeng\/civil-infrastructure\/\" aria-label=\"Building Construction\">\r\n                    <div class=\"service-card\">\r\n                        <div class=\"service-image\">\r\n                            <img decoding=\"async\" src=\"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-content\/uploads\/2026\/10\/ima.png\" alt=\"Building Construction\">\r\n                            <span class=\"service-num\">02<\/span>\r\n                            <span class=\"service-go\"><i class=\"fas fa-arrow-right\"><\/i><\/span>\r\n                        <\/div>\r\n\r\n                        <div class=\"service-content\">\r\n                            <div class=\"service-icon\">\r\n                                <i class=\"fa-solid fa-layer-group\"><\/i>\r\n                            <\/div>\r\n\r\n                            <div class=\"service-title\">\r\n                                Building<br>Construction\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/a>\r\n            <\/div>\r\n\r\n            <!-- 3. Dredging & Waterways -->\r\n            <div class=\"swiper-slide\">\r\n                <a class=\"service-card-link\" href=\"https:\/\/staging.samplesite4u.com\/binnaeng\/engineering-services\/\" aria-label=\"Dredging and Waterways\">\r\n                    <div class=\"service-card\">\r\n                        <div class=\"service-image\">\r\n                            <img decoding=\"async\" src=\"https:\/\/staging.samplesite.top\/binnaeng\/wp-content\/uploads\/2026\/06\/high-level-description-shot-on-iphone-a-_m-HGhY0JWAWi6Db34VKaug_SfbmK45HTNCKbSg53zOAfg.jpg\" alt=\"Dredging and Waterways\">\r\n                            <span class=\"service-num\">03<\/span>\r\n                            <span class=\"service-go\"><i class=\"fas fa-arrow-right\"><\/i><\/span>\r\n                        <\/div>\r\n\r\n                        <div class=\"service-content\">\r\n                            <div class=\"service-icon\">\r\n                                <i class=\"fa-solid fa-layer-group\"><\/i>\r\n                            <\/div>\r\n\r\n                            <div class=\"service-title\">\r\n                                Dredging &amp;<br>Waterways\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/a>\r\n            <\/div>\r\n\r\n            <!-- 4. Modern Building Design -->\r\n            <div class=\"swiper-slide\">\r\n                <a class=\"service-card-link\" href=\"https:\/\/staging.samplesite4u.com\/binnaeng\/engineering-services\/\" aria-label=\"Modern Building Design\">\r\n                    <div class=\"service-card\">\r\n                        <div class=\"service-image\">\r\n                            <img decoding=\"async\" src=\"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-content\/uploads\/2026\/10\/omo.png\" alt=\"Modern Building Design\">\r\n                            <span class=\"service-num\">04<\/span>\r\n                            <span class=\"service-go\"><i class=\"fas fa-arrow-right\"><\/i><\/span>\r\n                        <\/div>\r\n\r\n                        <div class=\"service-content\">\r\n                            <div class=\"service-icon\">\r\n                                <i class=\"fa-solid fa-building\"><\/i>\r\n                            <\/div>\r\n\r\n                            <div class=\"service-title\">\r\n                                Modern Building<br>Design\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/a>\r\n            <\/div>\r\n\r\n            <!-- 5. MEP Solutions -->\r\n            <div class=\"swiper-slide\">\r\n                <a class=\"service-card-link\" href=\"https:\/\/staging.samplesite4u.com\/binnaeng\/mep-solutions\/\" aria-label=\"MEP Solutions\">\r\n                    <div class=\"service-card\">\r\n                        <div class=\"service-image\">\r\n                            <img decoding=\"async\" src=\"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-content\/uploads\/2026\/10\/makei.png\" alt=\"MEP Solutions\">\r\n                            <span class=\"service-num\">05<\/span>\r\n                            <span class=\"service-go\"><i class=\"fas fa-arrow-right\"><\/i><\/span>\r\n                        <\/div>\r\n\r\n                        <div class=\"service-content\">\r\n                            <div class=\"service-icon\">\r\n                                <i class=\"fa-solid fa-hammer\"><\/i>\r\n                            <\/div>\r\n\r\n                            <div class=\"service-title\">\r\n                                MEP<br>Solutions\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/a>\r\n            <\/div>\r\n\r\n            <!-- 6. Architecture Design -->\r\n            <div class=\"swiper-slide\">\r\n                <a class=\"service-card-link\" href=\"https:\/\/staging.samplesite4u.com\/binnaeng\/engineering-services\/\" aria-label=\"Architecture Design\">\r\n                    <div class=\"service-card\">\r\n                        <div class=\"service-image\">\r\n                            <img decoding=\"async\" src=\"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-content\/uploads\/2026\/10\/liiu.png\" alt=\"Architecture Design\">\r\n                            <span class=\"service-num\">06<\/span>\r\n                            <span class=\"service-go\"><i class=\"fas fa-arrow-right\"><\/i><\/span>\r\n                        <\/div>\r\n\r\n                        <div class=\"service-content\">\r\n                            <div class=\"service-icon\">\r\n                                <i class=\"fa-solid fa-ruler-combined\"><\/i>\r\n                            <\/div>\r\n\r\n                            <div class=\"service-title\">\r\n                                Architecture<br>Design\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/a>\r\n            <\/div>\r\n\r\n            <!-- 7. Project Management -->\r\n            <div class=\"swiper-slide\">\r\n                <a class=\"service-card-link\" href=\"https:\/\/staging.samplesite4u.com\/binnaeng\/project-management\/\" aria-label=\"Project Management\">\r\n                    <div class=\"service-card\">\r\n                        <div class=\"service-image\">\r\n                            <img decoding=\"async\" src=\"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-content\/uploads\/2026\/10\/jhg.png\" alt=\"Project Management\">\r\n                            <span class=\"service-num\">07<\/span>\r\n                            <span class=\"service-go\"><i class=\"fas fa-arrow-right\"><\/i><\/span>\r\n                        <\/div>\r\n\r\n                        <div class=\"service-content\">\r\n                            <div class=\"service-icon\">\r\n                                <i class=\"fa-solid fa-users\"><\/i>\r\n                            <\/div>\r\n\r\n                            <div class=\"service-title\">\r\n                                Project<br>Management\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/a>\r\n            <\/div>\r\n\r\n            <!-- 8. General Construction -->\r\n            <div class=\"swiper-slide\">\r\n                <a class=\"service-card-link\" href=\"https:\/\/staging.samplesite4u.com\/binnaeng\/civil-infrastructure\/\" aria-label=\"General Construction\">\r\n                    <div class=\"service-card\">\r\n                        <div class=\"service-image\">\r\n                            <img decoding=\"async\" src=\"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-content\/uploads\/2026\/10\/birdsss.png\" alt=\"General Construction\">\r\n                            <span class=\"service-num\">08<\/span>\r\n                            <span class=\"service-go\"><i class=\"fas fa-arrow-right\"><\/i><\/span>\r\n                        <\/div>\r\n\r\n                        <div class=\"service-content\">\r\n                            <div class=\"service-icon\">\r\n                                <i class=\"fa-solid fa-screwdriver-wrench\"><\/i>\r\n                            <\/div>\r\n\r\n                            <div class=\"service-title\">\r\n                                General <br>Construction\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/a>\r\n            <\/div>\r\n\r\n            <!-- 9. Interior Design -->\r\n            <div class=\"swiper-slide\">\r\n                <a class=\"service-card-link\" href=\"https:\/\/staging.samplesite4u.com\/binnaeng\/renovation\/\" aria-label=\"Interior Design\">\r\n                    <div class=\"service-card\">\r\n                        <div class=\"service-image\">\r\n                            <img decoding=\"async\" src=\"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-content\/uploads\/2026\/10\/mn.png\" alt=\"Interior Design\">\r\n                            <span class=\"service-num\">09<\/span>\r\n                            <span class=\"service-go\"><i class=\"fas fa-arrow-right\"><\/i><\/span>\r\n                        <\/div>\r\n\r\n                        <div class=\"service-content\">\r\n                            <div class=\"service-icon\">\r\n                                <i class=\"fa-solid fa-couch\"><\/i>\r\n                            <\/div>\r\n\r\n                            <div class=\"service-title\">\r\n                                Interior<br>Design\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/a>\r\n            <\/div>\r\n\r\n            <!-- 10. Complex Civil Infrastructure -->\r\n            <div class=\"swiper-slide\">\r\n                <a class=\"service-card-link\" href=\"https:\/\/staging.samplesite4u.com\/binnaeng\/civil-infrastructure\/\" aria-label=\"Complex Civil Infrastructure\">\r\n                    <div class=\"service-card\">\r\n                        <div class=\"service-image\">\r\n                            <img decoding=\"async\" src=\"https:\/\/staging.samplesite.top\/binnaeng\/wp-content\/uploads\/2026\/06\/construction-site-sunset_23-2152006125.png\" alt=\"Complex Civil Infrastructure\">\r\n                            <span class=\"service-num\">10<\/span>\r\n                            <span class=\"service-go\"><i class=\"fas fa-arrow-right\"><\/i><\/span>\r\n                        <\/div>\r\n\r\n                        <div class=\"service-content\">\r\n                            <div class=\"service-icon\">\r\n                                <i class=\"fa-solid fa-handshake\"><\/i>\r\n                            <\/div>\r\n\r\n                            <div class=\"service-title\">\r\n                                Complex Civil <br>Infrastructure\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/a>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- counter + autoplay progress -->\r\n    <div class=\"sv-foot\">\r\n        <div class=\"sv-count\">\r\n            <span class=\"cur\">01<\/span><span class=\"sep\"><\/span><span class=\"tot\">10<\/span>\r\n        <\/div>\r\n        <div class=\"sv-track\"><i><\/i><\/div>\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.js\"><\/script>\r\n\r\n<script>\r\n(function(){\r\n    var sec = document.getElementById('svSection');\r\n    if(!sec) return;\r\n\r\n    var el      = sec.querySelector('.services-swiper');\r\n    var curEl   = sec.querySelector('.sv-count .cur');\r\n    var totEl   = sec.querySelector('.sv-count .tot');\r\n    var bar     = sec.querySelector('.sv-track i');\r\n    var reduce  = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n    var fine    = window.matchMedia && window.matchMedia('(hover: hover) and (pointer: fine)').matches;\r\n    var total   = el.querySelectorAll('.swiper-slide').length; \/* counted before Swiper clones slides *\/\r\n    var dragging = false, lastT = 0, skTimer = null;\r\n\r\n    function pad(n){ return (n < 10 ? '0' : '') + n; }\r\n    function clamp(v, a, b){ return Math.max(a, Math.min(b, v)); }\r\n    function setSk(deg){ el.style.setProperty('--sk', deg.toFixed(2) + 'deg'); }\r\n    if(totEl) totEl.textContent = pad(total);\r\n\r\n    \/* touch screens: the active card \"wakes up\" automatically *\/\r\n    function updateHot(s){\r\n        if(fine) return;\r\n        s.slides.forEach(function(sl){\r\n            var c = sl.querySelector('.service-card');\r\n            if(c) c.classList.toggle('hot', sl.classList.contains('swiper-slide-active'));\r\n        });\r\n    }\r\n\r\n    var swiper = new Swiper(el, {\r\n        loop: true,\r\n        speed: 900,\r\n        spaceBetween: 30,\r\n        grabCursor: true,\r\n        watchSlidesProgress: true,\r\n        keyboard: { enabled: true },\r\n        autoplay: {\r\n            delay: 5000,\r\n            disableOnInteraction: false,\r\n            pauseOnMouseEnter: true\r\n        },\r\n        navigation: {\r\n            nextEl: '.swiper-button-next-custom',\r\n            prevEl: '.swiper-button-prev-custom'\r\n        },\r\n        breakpoints: {\r\n            0:    { slidesPerView: 1 },\r\n            576:  { slidesPerView: 2 },\r\n            768:  { slidesPerView: 2 },\r\n            1024: { slidesPerView: 3 },\r\n            1280: { slidesPerView: 4 }\r\n        },\r\n        on: {\r\n            init: function(s){ updateHot(s); },\r\n\r\n            \/* autoplay progress line *\/\r\n            autoplayTimeLeft: function(s, time, progress){\r\n                if(bar) bar.style.transform = 'scaleX(' + (1 - progress).toFixed(3) + ')';\r\n            },\r\n\r\n            \/* cards lean in the direction of travel, then settle *\/\r\n            slideChangeTransitionStart: function(s){\r\n                var dir = s.activeIndex >= s.previousIndex ? 1 : -1;\r\n                setSk(dir * -6);\r\n                clearTimeout(skTimer);\r\n                skTimer = setTimeout(function(){ setSk(0); }, 380);\r\n            },\r\n\r\n            slideChange: function(s){\r\n                if(curEl){\r\n                    curEl.textContent = pad(s.realIndex + 1);\r\n                    curEl.classList.remove('tick');\r\n                    void curEl.offsetWidth;\r\n                    curEl.classList.add('tick');\r\n                }\r\n                updateHot(s);\r\n            },\r\n\r\n            \/* extra skew while the visitor drags *\/\r\n            touchStart: function(s){ dragging = true; lastT = s.translate; },\r\n            touchEnd:   function(){ dragging = false; setSk(0); },\r\n            setTranslate: function(s, t){\r\n                if(!dragging) return;\r\n                var dx = t - lastT;\r\n                lastT = t;\r\n                setSk(clamp(-dx * .5, -7, 7));\r\n            }\r\n        }\r\n    });\r\n\r\n    \/* scroll reveal: visible cards ripple in left to right *\/\r\n    if('IntersectionObserver' in window && !reduce){\r\n        sec.classList.add('sv-js');\r\n        var io = new IntersectionObserver(function(entries){\r\n            if(!entries[0].isIntersecting) return;\r\n            var vis = el.querySelectorAll('.swiper-slide-visible');\r\n            Array.prototype.forEach.call(vis, function(sl, k){\r\n                var link = sl.querySelector('.service-card-link');\r\n                if(link) link.style.setProperty('--d', (k * 0.13).toFixed(2) + 's');\r\n            });\r\n            sec.classList.add('sv-in');\r\n            io.disconnect();\r\n        }, { threshold: 0.2 });\r\n        io.observe(el);\r\n    }\r\n\r\n    \/* desktop: 3D tilt, cursor light, photo parallax *\/\r\n    if(fine && !reduce){\r\n        el.querySelectorAll('.service-card').forEach(function(card){\r\n            card.addEventListener('mouseenter', function(){ card.classList.add('hot'); });\r\n            card.addEventListener('mousemove', function(e){\r\n                var r  = card.getBoundingClientRect();\r\n                var px = (e.clientX - r.left) \/ r.width;\r\n                var py = (e.clientY - r.top) \/ r.height;\r\n                card.style.setProperty('--ry', ((px - .5) * 12).toFixed(2) + 'deg');\r\n                card.style.setProperty('--rx', ((py - .5) * -10).toFixed(2) + 'deg');\r\n                card.style.setProperty('--mx', (px * 100).toFixed(1) + '%');\r\n                card.style.setProperty('--my', (py * 100).toFixed(1) + '%');\r\n                card.style.setProperty('--px', (px - .5).toFixed(3));\r\n                card.style.setProperty('--py', (py - .5).toFixed(3));\r\n            });\r\n            card.addEventListener('mouseleave', function(){\r\n                card.classList.remove('hot');\r\n                card.style.setProperty('--rx', '0deg');\r\n                card.style.setProperty('--ry', '0deg');\r\n                card.style.setProperty('--px', 0);\r\n                card.style.setProperty('--py', 0);\r\n            });\r\n        });\r\n\r\n        \/* magnetic arrows *\/\r\n        sec.querySelectorAll('.swiper-button-prev-custom,.swiper-button-next-custom').forEach(function(b){\r\n            b.addEventListener('mousemove', function(e){\r\n                var r = b.getBoundingClientRect();\r\n                var x = e.clientX - r.left - r.width \/ 2;\r\n                var y = e.clientY - r.top - r.height \/ 2;\r\n                b.style.transform = 'translate(' + (x * .3) + 'px,' + (y * .3) + 'px)';\r\n            });\r\n            b.addEventListener('mouseleave', function(){ b.style.transform = ''; });\r\n        });\r\n    }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-90807e5 e-con e-atomic-element e-flexbox-base e-default-div e-01f2d8c \" data-id=\"90807e5\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"90807e5\">\n    \t\t<div class=\"elementor-element elementor-element-05ffb38 elementor-widget elementor-widget-html\" data-id=\"05ffb38\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n\r\n<section class=\"ba-section\" id=\"baSection\">\r\n  <div class=\"ba-inner\">\r\n\r\n    <div class=\"ba-head\">\r\n      <span class=\"ba-label\">Project Transformations<\/span>\r\n      <h2>Before And After Results<\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"ba-grid\" id=\"baGrid\"><\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n.ba-section{--ba-title:#000000;--ba-accent:#FF6B00;--ba-accent-dark:#d95a00;--ba-bg:#ffffff;\r\n  width:100%;background:var(--ba-bg);padding:70px 24px 70px;font-family:'Montserrat',sans-serif;overflow-x:clip}\r\n.ba-section *,.ba-section *::before,.ba-section *::after{box-sizing:border-box;margin:0;padding:0}\r\n\/* Montserrat on the text only (NOT on pseudo-elements, so icons keep their font) *\/\r\n.ba-section *{font-family:'Montserrat',sans-serif}\r\n\/* Font Awesome icons: force the icon font on the <i> AND its ::before glyph *\/\r\n.ba-section i.fa-solid,\r\n.ba-section i.fa-solid::before{font-family:\"Font Awesome 6 Free\"!important;font-weight:900!important;font-style:normal}\r\n.ba-section i.fa-solid{line-height:1}\r\n.ba-inner{max-width:1200px;margin:0 auto}\r\n\r\n.ba-head{text-align:center;margin-bottom:38px}\r\n.ba-label{display:inline-block;position:relative;font-size:13px;font-weight:600;color:var(--ba-title);padding-bottom:7px;margin-bottom:12px}\r\n.ba-label::after{content:\"\";position:absolute;left:50%;bottom:0;width:30px;height:2px;margin-left:-15px;background:var(--ba-accent)}\r\n.ba-head h2{font-size:clamp(30px,4vw,46px);font-weight:700;line-height:1.15;color:var(--ba-title);letter-spacing:-.01em}\r\n\r\n.ba-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}\r\n.ba-card{position:relative;aspect-ratio:1.45\/1;border-radius:20px;overflow:hidden;background:#d5d8dc;box-shadow:0 10px 30px rgba(0,0,0,.08);--p:100%;touch-action:pan-y;-webkit-user-select:none;user-select:none}\r\n.ba-layer{position:absolute;inset:0}\r\n.ba-layer svg,.ba-layer img{display:block;width:100%;height:100%;object-fit:cover}\r\n.ba-after{clip-path:inset(0 0 0 var(--p))}\r\n.ba-line{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,.25);pointer-events:none;z-index:3}\r\n.ba-knob{position:absolute;left:var(--p);top:80%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:#fff;color:#222;display:flex;align-items:center;justify-content:center;gap:1px;font-size:13px;box-shadow:0 4px 14px rgba(0,0,0,.3);pointer-events:none;z-index:4;transition:transform .2s}\r\n.ba-card:hover .ba-knob{transform:scale(1.12)}\r\n.ba-tag{position:absolute;bottom:14px;z-index:4;font-size:12px;font-weight:500;color:#fff;background:rgba(60,60,60,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:6px 14px;border-radius:4px;pointer-events:none;transition:opacity .3s}\r\n.ba-tag-b{left:14px}.ba-tag-a{right:14px}\r\n.ba-tag.off{opacity:0}\r\n.ba-title{position:absolute;top:14px;left:14px;z-index:4;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#fff;background:#FF6B00;padding:7px 14px;border-radius:30px;pointer-events:none}\r\n.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize;z-index:6;-webkit-appearance:none;appearance:none;touch-action:pan-y}\r\n.ba-range:focus-visible~.ba-knob{outline:3px solid var(--ba-accent);outline-offset:3px}\r\n\r\n\r\n\/* ---------- animations ---------- *\/\r\n\/* heading *\/\r\n.ba-js .ba-label{opacity:0;transform:translateY(14px);transition:opacity .6s,transform .6s}\r\n.ba-js .ba-label::after{width:0;margin-left:0;transition:width .7s .5s,margin-left .7s .5s}\r\n.ba-js .ba-head.in .ba-label{opacity:1;transform:none}\r\n.ba-js .ba-head.in .ba-label::after{width:30px;margin-left:-15px}\r\n.ba-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em}\r\n.ba-w>span{display:inline-block;transform:translateY(112%);transition:transform .85s cubic-bezier(.2,.8,.2,1)}\r\n.ba-head.in .ba-w>span{transform:none}\r\n\r\n\/* cards: enter from the sides, lift and zoom on hover *\/\r\n.ba-js .ba-card{opacity:0;transform:translate(-34px,34px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}\r\n.ba-js .ba-card:nth-child(even){transform:translate(34px,34px)}\r\n.ba-js .ba-card.in{opacity:1;transform:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,opacity .7s}\r\n.ba-js .ba-card.in:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(0,0,0,.18)}\r\n.ba-layer svg,.ba-layer img{transition:transform .9s cubic-bezier(.2,.8,.2,1)}\r\n.ba-card:hover .ba-layer svg,.ba-card:hover .ba-layer img{transform:scale(1.05)}\r\n\r\n\/* handle: pulse ring and nudging arrows until the visitor drags *\/\r\n.ba-knob{animation:baring 2.2s ease-out infinite}\r\n@keyframes baring{0%{box-shadow:0 4px 14px rgba(0,0,0,.3),0 0 0 0 rgba(255,255,255,.75)}70%,100%{box-shadow:0 4px 14px rgba(0,0,0,.3),0 0 0 15px rgba(255,255,255,0)}}\r\n.ba-knob i:first-child{animation:banl 1s ease-in-out infinite alternate}\r\n.ba-knob i:last-child{animation:banr 1s ease-in-out infinite alternate}\r\n@keyframes banl{to{transform:translateX(-3px)}}\r\n@keyframes banr{to{transform:translateX(3px)}}\r\n.ba-card.touched .ba-knob,.ba-card.touched .ba-knob i{animation:none}\r\n\r\n\/* \"Drag to compare\" hint *\/\r\n.ba-hint{position:absolute;top:14px;left:50%;z-index:5;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:12px;font-weight:600;color:#fff;background:#FF6B00;padding:7px 14px;border-radius:30px;opacity:0;transform:translate(-50%,-8px);transition:opacity .4s,transform .4s;pointer-events:none}\r\n.ba-card.hint .ba-hint{opacity:1;transform:translate(-50%,0);animation:bahint 1.5s ease-in-out infinite}\r\n.ba-card.touched .ba-hint{opacity:0;animation:none}\r\n@keyframes bahint{50%{transform:translate(-50%,-4px)}}\r\n\r\n\/* light sweep after the intro *\/\r\n.ba-sheen{position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%);transform:translateX(-110%)}\r\n.ba-card.shine .ba-sheen{animation:basheen 1.2s ease-out}\r\n@keyframes basheen{to{transform:translateX(110%)}}\r\n\r\n\/* labels slide away when the handle gets close *\/\r\n.ba-tag-b.off{transform:translateX(-10px)}\r\n.ba-tag-a.off{transform:translateX(10px)}\r\n.ba-tag{transition:opacity .3s,transform .3s}\r\n\r\n\/* scenes: drifting clouds, twinkling lit windows *\/\r\n.ba-cl{animation:bacl 16s ease-in-out infinite alternate}\r\n.ba-cl2{animation-duration:23s;animation-direction:alternate-reverse}\r\n@keyframes bacl{from{transform:translateX(-26px)}to{transform:translateX(26px)}}\r\n.ba-lit{animation:balit 3s ease-in-out infinite}\r\n@keyframes balit{0%,100%{opacity:1}50%{opacity:.72}}\r\n\r\n@media(max-width:1024px){\r\n  .ba-section{padding:60px 20px 70px}\r\n  .ba-grid{gap:18px}\r\n}\r\n@media(max-width:680px){\r\n  .ba-section{padding:48px 16px 56px}\r\n  .ba-grid{grid-template-columns:minmax(0,1fr);gap:16px}\r\n  .ba-card{aspect-ratio:1.3\/1;border-radius:16px}\r\n  .ba-head{margin-bottom:26px}\r\n  .ba-knob{width:34px;height:34px;margin:-17px 0 0 -17px}\r\n  .ba-tag{font-size:11px;padding:5px 12px;bottom:12px}.ba-tag-b{left:12px}.ba-tag-a{right:12px}\r\n}\r\n@media(max-width:680px){\r\n  .ba-js .ba-card,.ba-js .ba-card:nth-child(even){transform:translateY(30px)}\r\n}\r\n@media(prefers-reduced-motion:reduce){\r\n  .ba-js .ba-card,.ba-js .ba-card:nth-child(even),.ba-js .ba-label{opacity:1;transform:none;transition:none}\r\n  .ba-w>span{transform:none;transition:none}\r\n  .ba-js .ba-label::after{width:30px;margin-left:-15px;transition:none}\r\n  .ba-knob,.ba-knob i,.ba-cl,.ba-lit,.ba-hint,.ba-card.shine .ba-sheen{animation:none}\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  \/* ====================================================================\r\n     STEP 1: ADD YOUR PICTURES HERE\r\n     --------------------------------------------------------------------\r\n     One line per project. Paste the link of your BEFORE picture and the\r\n     link of your AFTER picture between the quotes.\r\n\r\n     Where to get a picture link:\r\n       WordPress > Media > Library > click the picture > copy \"File URL\".\r\n\r\n     Tips:\r\n       - Use the same building and the same camera angle for before\/after.\r\n       - Landscape pictures work best (about 1200 x 830 pixels).\r\n       - To add a project, copy one line. To remove one, delete its line.\r\n       - While a line still says PASTE-..., that card shows a built-in\r\n         building illustration instead, so nothing looks broken.\r\n     ==================================================================== *\/\r\n  var PROJECTS=[\r\n    {title:'Building Renovation 1',\r\n     before:'https:\/\/staging.samplesite4u.com\/binnaeng\/wp-content\/uploads\/2026\/10\/before1.jpeg',\r\n     after: 'https:\/\/staging.samplesite4u.com\/binnaeng\/wp-content\/uploads\/2026\/10\/before2.jpeg'},\r\n\r\n    {title:'Building Renovation 2',\r\n     before:'https:\/\/staging.samplesite4u.com\/binnaeng\/wp-content\/uploads\/2026\/10\/before3.jpeg',\r\n     after: 'https:\/\/staging.samplesite4u.com\/binnaeng\/wp-content\/uploads\/2026\/10\/before4.jpeg'}\r\n  ];\r\n\r\n  \/* Set to true to show each project's title on its card. *\/\r\n  var SHOW_TITLES=false;\r\n  \/* ==================== END OF THE PART YOU EDIT ==================== *\/\r\n\r\n  var TYPES=['villa','office','warehouse','apartment'];\r\n\r\n  var root=document.getElementById('baSection'),grid=document.getElementById('baGrid');\r\n  if(!root||!grid)return;\r\n  var reduce=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n  \/* ---------- tiny SVG helpers ---------- *\/\r\n  function R(x,y,w,h,f,x2){return '<rect x=\"'+x+'\" y=\"'+y+'\" width=\"'+w+'\" height=\"'+h+'\" fill=\"'+f+'\"'+(x2||'')+'\/>'}\r\n  function P(d,f,x2){return '<path d=\"'+d+'\" fill=\"'+f+'\"'+(x2||'')+'\/>'}\r\n  function C(x,y,r,f,x2){return '<circle cx=\"'+x+'\" cy=\"'+y+'\" r=\"'+r+'\" fill=\"'+f+'\"'+(x2||'')+'\/>'}\r\n  function E(x,y,rx,ry,f,o){return '<ellipse cx=\"'+x+'\" cy=\"'+y+'\" rx=\"'+rx+'\" ry=\"'+ry+'\" fill=\"'+f+'\" opacity=\"'+(o||1)+'\"\/>'}\r\n  function L(d,s,w,x2){return '<path d=\"'+d+'\" fill=\"none\" stroke=\"'+s+'\" stroke-width=\"'+(w||1)+'\"'+(x2||'')+'\/>'}\r\n\r\n  \/* window: glass in the \"after\" scene, dark \/ cracked \/ boarded in \"before\" *\/\r\n  function win(x,y,w,h,a,u,state){\r\n    var o='';\r\n    if(a){\r\n      o+=R(x,y,w,h,state==='lit'?'#ffd88a':'url(#g'+u+')',' stroke=\"#fff\" stroke-width=\"3.5\"'+(state==='lit'?' class=\"ba-lit\"':''));\r\n      o+=L('M'+(x+w\/2)+' '+y+'V'+(y+h)+'M'+x+' '+(y+h\/2)+'H'+(x+w),'#fff',2);\r\n      o+=P('M'+(x+5)+' '+(y+5)+'H'+(x+w*.45)+'L'+(x+5)+' '+(y+h*.6)+'Z','#fff',' opacity=\".22\"');\r\n    }else if(state==='board'){\r\n      o+=R(x,y,w,h,'#7a5a3e',' stroke=\"#2b323b\" stroke-width=\"3\"')+L('M'+x+' '+(y+h*.33)+'H'+(x+w)+'M'+x+' '+(y+h*.66)+'H'+(x+w),'#4d3826',2);\r\n    }else{\r\n      o+=R(x,y,w,h,'#38414b',' stroke=\"#2b323b\" stroke-width=\"3\"');\r\n      if(state==='crack')o+=L('M'+(x+w*.2)+' '+(y+4)+'L'+(x+w*.5)+' '+(y+h*.5)+'L'+(x+w*.35)+' '+(y+h-4)+'M'+(x+w*.5)+' '+(y+h*.5)+'L'+(x+w-4)+' '+(y+h*.3),'#cfd5dc',1.5);\r\n      o+=R(x-4,y+h,w+8,5,'#6a727d');\r\n      o+=R(x+w*.2,y+h+5,6,26,'#7c5538',' opacity=\".3\"');\r\n    }\r\n    return o;\r\n  }\r\n\r\n  \/* ---------- the four building scenes ---------- *\/\r\n  var SC={};\r\n\r\n  SC.villa=function(a,u){\r\n    var o=R(0,380,600,40,a?'#79b97a':'#a89c85');\r\n    o+=R(120,210,360,170,a?'#f6efe3':'#b9ad99');\r\n    o+=P('M88 216L300 106L512 216Z',a?'#b8502b':'#6a5a4c');\r\n    o+=a?L('M88 216L300 106L512 216','#8f3c1e',6):P('M210 168L250 148L262 182L226 190Z','#3a3027')+P('M350 158L392 180L362 202Z','#3a3027')+P('M150 196L186 178L190 204Z','#3a3027');\r\n    o+=R(404,118,38,62,a?'#9a4a2a':'#5d5348')+R(398,112,50,9,a?'#7d3a20':'#4d453b');\r\n    o+=C(300,168,19,a?'url(#g'+u+')':'#3b434d',' stroke=\"'+(a?'#fff':'#2b323b')+'\" stroke-width=\"4\"');\r\n    o+=win(160,240,72,70,a,u,a?'lit':'crack')+win(370,240,72,70,a,u,a?'glass':'board');\r\n    o+=R(268,290,64,90,a?'#FF6B00':'#4a3a2e',' stroke=\"'+(a?'#fff':'#2f261e')+'\" stroke-width=\"4\"')+C(318,338,4,a?'#fff':'#8a7a68');\r\n    o+=R(255,380,90,8,a?'#e5e0d6':'#8d8576');\r\n    if(a){\r\n      [130,185,415,470].forEach(function(x){o+=C(x,372,17,'#3f9d5a')});\r\n      [150,200,430,455].forEach(function(x){o+=C(x,366,4,'#ffd34d')});\r\n      o+=R(40,352,60,6,'#fff')+R(500,352,60,6,'#fff');\r\n    }else{\r\n      o+=E(200,200,70,26,'#3d4148',.14)+E(420,330,60,34,'#3d4148',.16)+E(160,340,46,26,'#3d4148',.12);\r\n      o+=L('M236 214L246 242L232 266M440 230L430 262','#4d555f',2.4,' stroke-linecap=\"round\"');\r\n      for(var i=0;i<9;i++)o+=L('M'+(60+i*14+(i%3)*30)+' 384l-4 -18m4 18l4 -14','#7d7154',2);\r\n      o+=R(470,364,50,16,'#5a5248')+R(40,358,40,22,'#6b6252');\r\n    }\r\n    return o;\r\n  };\r\n\r\n  SC.office=function(a,u){\r\n    var o=R(0,380,600,40,a?'#c9d1da':'#78808b');\r\n    o+='<g fill=\"'+(a?'#c3d6e8':'#9aa3ad')+'\">'+R(30,180,100,200,'inherit')+R(470,150,100,230,'inherit')+'<\/g>';\r\n    o=o.replace(\/fill=\"inherit\"\/g,'fill=\"'+(a?'#c3d6e8':'#9aa3ad')+'\"');\r\n    if(!a){\r\n      o+=R(170,50,260,330,'#a9abae');\r\n      for(var r=0;r<7;r++)for(var c=0;c<4;c++){\r\n        var x=188+c*58,y=68+r*42,bad=(r+c)%5===0;\r\n        o+=R(x,y,44,30,bad?'#6c7580':'#38414b');\r\n        if(bad)o+=L('M'+(x+8)+' '+y+'L'+(x+22)+' '+(y+16)+'L'+(x+14)+' '+(y+30),'#d7dce2',1.4);\r\n        o+=R(x+8,y+32,6,'20'*1+(r%2)*10,'#8a5a3c',' opacity=\".3\"');\r\n      }\r\n      o+=E(300,150,90,40,'#3d4148',.14)+E(250,300,80,36,'#3d4148',.12);\r\n      o+=R(236,340,128,40,'#5f666e')+R(258,346,84,34,'#2d343c');\r\n      o+=R(190,32,64,18,'#7b8088')+L('M420 50V14M410 24H430','#6a5a4c',3);\r\n    }else{\r\n      o+=R(170,50,260,330,'url(#g'+u+')');\r\n      var gl='';for(var i=1;i<4;i++)gl+='M'+(170+i*65)+' 50V380';for(var j=1;j<8;j++)gl+='M170 '+(50+j*41)+'H430';\r\n      o+=L(gl,'#fff',1.6,' opacity=\".6\"');\r\n      o+=P('M200 60L300 60L200 220Z','#fff',' opacity=\".13\"')+P('M330 190L430 190L330 350Z','#fff',' opacity=\".1\"');\r\n      o+=R(170,50,260,10,'#FF6B00')+R(170,214,260,8,'#FF6B00');\r\n      o+=R(228,336,144,10,'#FF6B00')+R(250,346,100,34,'url(#g'+u+')',' stroke=\"#fff\" stroke-width=\"3\"')+L('M300 346V380','#fff',3);\r\n      o+=R(190,34,64,16,'#e8eef4')+C(420,40,10,'#4caf6d')+C(440,42,8,'#4caf6d');\r\n    }\r\n    return o;\r\n  };\r\n\r\n  SC.warehouse=function(a,u){\r\n    var o=R(0,380,600,40,a?'#aeb5bd':'#9a8f7c');\r\n    o+=R(50,222,500,158,a?'#e4e9ee':'#8e6341');\r\n    var co='';for(var i=0;i<36;i++)co+='M'+(56+i*14)+' 222V380';\r\n    o+=L(co,a?'#cdd5dc':'#6f4a2e',2);\r\n    o+=P('M38 226L300 168L562 226Z',a?'#cfd6dd':'#5d5a57');\r\n    if(a){\r\n      o+=R(50,262,500,16,'#FF6B00');\r\n      for(var k=0;k<5;k++)o+=P('M'+(120+k*74)+' 214L'+(150+k*74)+' 188L'+(196+k*74)+' 188L'+(166+k*74)+' 214Z','#1f3a5c',' stroke=\"#fff\" stroke-width=\"1.5\"');\r\n      [90,250,410].forEach(function(x){o+=R(x,282,100,98,'#f6f8fa',' stroke=\"#c9d1d9\" stroke-width=\"2\"')+L('M'+x+' 302H'+(x+100)+'M'+x+' 322H'+(x+100)+'M'+x+' 342H'+(x+100)+'M'+x+' 362H'+(x+100),'#dfe5ea',2)+R(x,282,100,8,'#FF6B00')});\r\n      o+=L('M30 396H570','#ffd34d',4,' stroke-dasharray=\"26 18\"');\r\n      o+=R(60,360,26,20,'#c79a5b')+R(92,364,22,16,'#c79a5b');\r\n    }else{\r\n      o+=R(230,196,70,22,'#2b2622')+R(400,206,46,14,'#2b2622')+R(100,300,22,38,'#2b2622',' opacity=\".55\"');\r\n      o+=P('M240 190L290 184L296 214L246 212Z','#2b2622');\r\n      [90,250,410].forEach(function(x,i){o+=R(x,282,100,98,'#4b4f55',' stroke=\"#2f3338\" stroke-width=\"3\"')+L('M'+x+' 310H'+(x+100)+'M'+x+' 340H'+(x+100),'#3a3e44',3)+(i===1?R(x+10,282,80,34,'#1f2226'):'')});\r\n      o+=L('M300 222V380M180 222V380M470 222V380','#4a2e18',4,' opacity=\".35\"');\r\n      o+=E(150,392,60,8,'#6f8aa0',.55)+C(520,372,12,'#2a2a2a')+C(500,376,10,'#2a2a2a');\r\n      o+=L('M30 380V340M60 380V346','#6a6a6a',3);\r\n    }\r\n    return o;\r\n  };\r\n\r\n  SC.apartment=function(a,u){\r\n    var o=R(0,380,600,40,a?'#8cc08a':'#9a9384');\r\n    o+=R(100,70,400,310,a?'#fbf8f2':'#b9b2a8');\r\n    o+=R(92,58,416,14,a?'#FF6B00':'#6b6760');\r\n    var rail=['#FF6B00','#0f6c88','#dfe5ea'];\r\n    for(var f=0;f<4;f++)for(var i=0;i<4;i++){\r\n      var bx=118+i*96,y=84+f*74,lit=a&&(f+i)%4===1;\r\n      o+=win(bx+14,y+8,52,38,a,u,a?(lit?'lit':'glass'):((f+i)%5===0?'board':((f*i)%3===1?'crack':'x')));\r\n      o+=R(bx,y+48,80,13,a?rail[(f+i)%3]:'#6b6b6b',a?'':' opacity=\".9\"');\r\n      o+=R(bx-4,y+60,88,6,a?'#e6e2da':'#8a857c');\r\n      if(a){o+=C(bx+14,y+46,6,'#3f9d5a')+C(bx+66,y+46,6,'#3f9d5a')}\r\n      else{o+=R(bx+10,y+66,5,26,'#8a5a3c',' opacity=\".3\"');if((f+i)%3===0)o+=R(bx+48,y+26,22,16,'#cfd3d6',' opacity=\".9\"')}\r\n    }\r\n    if(!a){o+=E(250,150,90,34,'#3d4148',.14)+E(400,300,70,40,'#3d4148',.14)+L('M180 82L190 130L176 170M440 230L430 276','#4d555f',2.4,' stroke-linecap=\"round\"')}\r\n    o+=R(235,352,130,9,a?'#FF6B00':'#5a5750');\r\n    return o;\r\n  };\r\n\r\n  function scene(type,a,u){\r\n    var o='<svg viewBox=\"0 0 600 420\" preserveAspectRatio=\"xMidYMid slice\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">';\r\n    o+='<defs><linearGradient id=\"s'+u+'\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0\" stop-color=\"'+(a?'#86c9ff':'#aab3bd')+'\"\/><stop offset=\"1\" stop-color=\"'+(a?'#eaf6ff':'#dde0e4')+'\"\/><\/linearGradient>'+\r\n       '<linearGradient id=\"g'+u+'\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\"><stop offset=\"0\" stop-color=\"'+(a?'#a6dcff':'#4a535e')+'\"\/><stop offset=\"1\" stop-color=\"'+(a?'#2f6da3':'#2c333c')+'\"\/><\/linearGradient><\/defs>';\r\n    o+=R(0,0,600,420,'url(#s'+u+')');\r\n    if(a)o+='<g class=\"ba-cl\">'+E(110,70,50,16,'#fff',.85)+E(150,80,40,13,'#fff',.85)+'<\/g><g class=\"ba-cl ba-cl2\">'+E(470,52,56,16,'#fff',.85)+'<\/g>';\r\n    else o+='<g class=\"ba-cl\">'+E(120,60,70,18,'#8e97a1',.55)+'<\/g><g class=\"ba-cl ba-cl2\">'+E(450,80,80,20,'#8e97a1',.5)+'<\/g>';\r\n    return o+SC[type](a,u)+'<\/svg>';\r\n  }\r\n  function esc(s){return String(s).replace(\/&\/g,'&amp;').replace(\/\"\/g,'&quot;').replace(\/<\/g,'&lt;')}\r\n  function real(u){return !!u&&!\/^\\s*PASTE\/i.test(u)}\r\n  function hasPics(p){return real(p.before)&&real(p.after)}\r\n  function layer(p,a,u,i){\r\n    if(hasPics(p)){\r\n      return '<img decoding=\"async\" src=\"'+esc(a?p.after:p.before)+'\" alt=\"'+esc(p.title+(a?' after renovation':' before renovation'))+'\" loading=\"lazy\" draggable=\"false\">';\r\n    }\r\n    return scene(p.type||TYPES[i%TYPES.length],a,u);\r\n  }\r\n\r\n  \/* ---------- build cards ---------- *\/\r\n  var html='';\r\n  PROJECTS.forEach(function(p,i){\r\n    html+='<div class=\"ba-card\" data-i=\"'+i+'\" role=\"group\" aria-label=\"'+esc(p.title)+' before and after\">'+\r\n      '<div class=\"ba-layer\">'+layer(p,false,'b'+i,i)+'<\/div>'+\r\n      '<div class=\"ba-layer ba-after\">'+layer(p,true,'a'+i,i)+'<\/div>'+\r\n      '<span class=\"ba-line\"><\/span><span class=\"ba-sheen\"><\/span>'+\r\n      (SHOW_TITLES?'<span class=\"ba-title\"><i class=\"fa-solid fa-building\"><\/i>'+esc(p.title)+'<\/span>':'')+\r\n      '<span class=\"ba-hint\"><i class=\"fa-solid fa-hand-pointer\"><\/i>Drag to compare<\/span>'+\r\n      '<span class=\"ba-tag ba-tag-b\">Before<\/span><span class=\"ba-tag ba-tag-a\">After<\/span>'+\r\n      '<span class=\"ba-knob\"><i class=\"fa-solid fa-caret-left\"><\/i><i class=\"fa-solid fa-caret-right\"><\/i><\/span>'+\r\n      '<input type=\"range\" class=\"ba-range\" min=\"0\" max=\"100\" step=\"0.1\" value=\"100\" aria-label=\"Drag to compare before and after: '+esc(p.title)+'\">'+\r\n    '<\/div>';\r\n  });\r\n  grid.innerHTML=html;\r\n\r\n  \/* ---------- slider logic ---------- *\/\r\n  var cards=grid.querySelectorAll('.ba-card');\r\n  cards.forEach(function(card){\r\n    card.querySelectorAll('img').forEach(function(img){\r\n      img.addEventListener('error',function(){\r\n        if(card._fb)return;card._fb=true;\r\n        var i=+card.getAttribute('data-i'),p=PROJECTS[i],t=p.type||TYPES[i%TYPES.length],ls=card.querySelectorAll('.ba-layer');\r\n        ls[0].innerHTML=scene(t,false,'fb'+i);ls[1].innerHTML=scene(t,true,'fa'+i);\r\n      });\r\n    });\r\n  });\r\n  cards.forEach(function(card){\r\n    var rg=card.querySelector('.ba-range'),tb=card.querySelector('.ba-tag-b'),ta=card.querySelector('.ba-tag-a'),raf=null,touched=false;\r\n    function set(v){\r\n      v=Math.max(0,Math.min(100,v));\r\n      card.style.setProperty('--p',v+'%');rg.value=v;\r\n      tb.classList.toggle('off',v<22);ta.classList.toggle('off',v>78);\r\n    }\r\n    function done(){\r\n      if(touched)return;\r\n      card.classList.add('shine');\r\n      setTimeout(function(){card.classList.remove('shine')},1400);\r\n      setTimeout(function(){if(!touched)card.classList.add('hint')},900);\r\n    }\r\n    function go(to,ms,delay){\r\n      cancelAnimationFrame(raf);\r\n      if(reduce){set(to);return}\r\n      var from=parseFloat(rg.value),t0=null;\r\n      setTimeout(function(){\r\n        if(touched)return;\r\n        (function f(t){\r\n          if(touched)return;\r\n          if(!t0)t0=t;var k=Math.min(1,(t-t0)\/ms),e=k<.5?4*k*k*k:1-Math.pow(-2*k+2,3)\/2;\r\n          set(from+(to-from)*e);\r\n          if(k<1)raf=requestAnimationFrame(f);else done();\r\n        })(performance.now());\r\n      },delay||0);\r\n    }\r\n    rg.addEventListener('input',function(){\r\n      touched=true;cancelAnimationFrame(raf);\r\n      card.classList.add('touched');card.classList.remove('hint');\r\n      set(parseFloat(rg.value));\r\n    });\r\n    card._intro=function(i){go(50,1500,i*180)};\r\n    set(100);\r\n  });\r\n\r\n  \/* ---------- reveal + intro sweep when scrolled into view ---------- *\/\r\n  var head=root.querySelector('.ba-head');\r\n  if('IntersectionObserver' in window){\r\n    root.classList.add('ba-js');\r\n    \/\/ split the heading into words so they can rise one by one\r\n    var h2=head.querySelector('h2'),txt=h2.textContent;\r\n    h2.setAttribute('aria-label',txt);\r\n    h2.innerHTML=txt.split(' ').map(function(w,i){return '<span class=\"ba-w\" aria-hidden=\"true\"><span style=\"transition-delay:'+(i*.1+.25)+'s\">'+esc(w)+'<\/span><\/span>'}).join(' ');\r\n\r\n    var io=new IntersectionObserver(function(es){es.forEach(function(e){\r\n      if(!e.isIntersecting)return;\r\n      var c=e.target;\r\n      c.classList.add('in');\r\n      if(c.classList.contains('ba-card')){\r\n        var i=+c.getAttribute('data-i');\r\n        c.style.transitionDelay=(i%2*.12)+'s';\r\n        setTimeout(function(){c.style.transitionDelay=''},1100);\r\n        if(c._intro)c._intro(i%2);\r\n      }\r\n      io.unobserve(c);\r\n    })},{threshold:.2});\r\n    io.observe(head);\r\n    cards.forEach(function(c){io.observe(c)});\r\n  }else{\r\n    cards.forEach(function(c){if(c._intro)c._intro(0)});\r\n  }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-0df30d3 e-flex e-con-boxed e-con e-parent\" data-id=\"0df30d3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c0584cb elementor-widget elementor-widget-spacer\" data-id=\"c0584cb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6bde1ec e-flex e-con-boxed e-con e-parent\" data-id=\"6bde1ec\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-40082f4 elementor-widget elementor-widget-heading\" data-id=\"40082f4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Our Clients <\/h2>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3b085d1 e-con-full e-flex e-con e-parent\" data-id=\"3b085d1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a08fa85 elementor-widget elementor-widget-text-editor\" data-id=\"a08fa85\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Our clients are the core of our business, and we are dedicated to exceeding their expectations<br \/>through personalized solutions and lasting partnerships.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4e4d127 e-flex e-con-boxed e-con e-parent\" data-id=\"4e4d127\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ff77fad elementor-widget elementor-widget-spacer\" data-id=\"ff77fad\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0cd4611 e-flex e-con-boxed e-con e-parent\" data-id=\"0cd4611\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7341624 elementor-arrows-position-inside elementor-widget elementor-widget-image-carousel\" data-id=\"7341624\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;slides_to_show&quot;:&quot;4&quot;,&quot;navigation&quot;:&quot;arrows&quot;,&quot;speed&quot;:509,&quot;autoplay&quot;:&quot;yes&quot;,&quot;pause_on_hover&quot;:&quot;yes&quot;,&quot;autoplay_speed&quot;:5000,&quot;infinite&quot;:&quot;yes&quot;}\" data-widget_type=\"image-carousel.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-image-carousel-wrapper swiper\" role=\"region\" aria-roledescription=\"carousel\" aria-label=\"Image Carousel\" dir=\"ltr\">\n\t\t\t<div class=\"elementor-image-carousel swiper-wrapper\" aria-live=\"off\">\n\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"1 of 4\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-content\/uploads\/2026\/06\/heritage_gardens_estate_irete_owerri_imo-1.jpg\" alt=\"heritage_gardens_estate_irete_owerri_imo (1)\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"2 of 4\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-content\/uploads\/2026\/06\/almbuildmart_logo-1.png\" alt=\"almbuildmart_logo\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"3 of 4\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-content\/uploads\/2026\/06\/epn.jpg\" alt=\"epn\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"4 of 4\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-content\/uploads\/2026\/06\/nalispharma_logo.png\" alt=\"nalispharma_logo\" \/><\/figure><\/div>\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-swiper-button elementor-swiper-button-prev\" role=\"button\" tabindex=\"0\">\n\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-eicon-chevron-left\" viewBox=\"0 0 1000 1000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M646 125C629 125 613 133 604 142L308 442C296 454 292 471 292 487 292 504 296 521 308 533L604 854C617 867 629 875 646 875 663 875 679 871 692 858 704 846 713 829 713 812 713 796 708 779 692 767L438 487 692 225C700 217 708 204 708 187 708 171 704 154 692 142 675 129 663 125 646 125Z\"><\/path><\/svg>\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"elementor-swiper-button elementor-swiper-button-next\" role=\"button\" tabindex=\"0\">\n\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-eicon-chevron-right\" viewBox=\"0 0 1000 1000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M696 533C708 521 713 504 713 487 713 471 708 454 696 446L400 146C388 133 375 125 354 125 338 125 325 129 313 142 300 154 292 171 292 187 292 204 296 221 308 233L563 492 304 771C292 783 288 800 288 817 288 833 296 850 308 863 321 871 338 875 354 875 371 875 388 867 400 854L696 533Z\"><\/path><\/svg>\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c35acb3 elementor-widget elementor-widget-spacer\" data-id=\"c35acb3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Quality Assured GUARANTEED QUALITY IN MODERN CONSTRUCTION Bring to the table win-win survival strategies to ensure proactive domination. GET A QUOTE Engineering Excellence BUILDING THE FUTURE WITH UNMATCHED EXCELLENCE Creating&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":113,"href":"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":1182,"href":"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-json\/wp\/v2\/pages\/8\/revisions\/1182"}],"wp:attachment":[{"href":"https:\/\/staging.samplesite4u.com\/binnaeng\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}