.elementor-194 .elementor-element.elementor-element-21c66595{--display:flex;--min-height:820px;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--overlay-opacity:0.4;--margin-top:-100px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:180px;--padding-bottom:180px;--padding-left:0px;--padding-right:0px;}.elementor-194 .elementor-element.elementor-element-21c66595:not(.elementor-motion-effects-element-type-background), .elementor-194 .elementor-element.elementor-element-21c66595 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://penprojects.com.au/wp-content/uploads/2026/03/hero-crane-BBAXf0xB.jpg");background-position:center center;background-size:cover;}.elementor-194 .elementor-element.elementor-element-21c66595::before, .elementor-194 .elementor-element.elementor-element-21c66595 > .elementor-background-video-container::before, .elementor-194 .elementor-element.elementor-element-21c66595 > .e-con-inner > .elementor-background-video-container::before, .elementor-194 .elementor-element.elementor-element-21c66595 > .elementor-background-slideshow::before, .elementor-194 .elementor-element.elementor-element-21c66595 > .e-con-inner > .elementor-background-slideshow::before, .elementor-194 .elementor-element.elementor-element-21c66595 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-primary );--background-overlay:'';}.elementor-194 .elementor-element.elementor-element-634ef9a img{width:40%;}.elementor-194 .elementor-element.elementor-element-3cbd429e{text-align:center;color:var( --e-global-color-5bd60dc );}.elementor-194 .elementor-element.elementor-element-0abf9d1{--display:flex;--min-height:820px;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--overlay-opacity:0.4;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:180px;--padding-bottom:180px;--padding-left:0px;--padding-right:0px;}.elementor-194 .elementor-element.elementor-element-0abf9d1:not(.elementor-motion-effects-element-type-background), .elementor-194 .elementor-element.elementor-element-0abf9d1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://penprojects.com.au/wp-content/uploads/2026/03/hero-crane-BBAXf0xB.jpg");background-position:center center;background-size:cover;}.elementor-194 .elementor-element.elementor-element-0abf9d1::before, .elementor-194 .elementor-element.elementor-element-0abf9d1 > .elementor-background-video-container::before, .elementor-194 .elementor-element.elementor-element-0abf9d1 > .e-con-inner > .elementor-background-video-container::before, .elementor-194 .elementor-element.elementor-element-0abf9d1 > .elementor-background-slideshow::before, .elementor-194 .elementor-element.elementor-element-0abf9d1 > .e-con-inner > .elementor-background-slideshow::before, .elementor-194 .elementor-element.elementor-element-0abf9d1 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-primary );--background-overlay:'';}.elementor-194 .elementor-element.elementor-element-6dbe999 img{width:40%;}.elementor-194 .elementor-element.elementor-element-67fe330{text-align:center;color:var( --e-global-color-5bd60dc );}.elementor-194 .elementor-element.elementor-element-974ced4{--display:flex;--min-height:820px;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--overlay-opacity:0.4;--margin-top:-100px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:180px;--padding-bottom:180px;--padding-left:0px;--padding-right:0px;}.elementor-194 .elementor-element.elementor-element-974ced4:not(.elementor-motion-effects-element-type-background), .elementor-194 .elementor-element.elementor-element-974ced4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://penprojects.com.au/wp-content/uploads/2026/03/hero-crane-BBAXf0xB.jpg");background-position:center center;background-size:cover;}.elementor-194 .elementor-element.elementor-element-974ced4::before, .elementor-194 .elementor-element.elementor-element-974ced4 > .elementor-background-video-container::before, .elementor-194 .elementor-element.elementor-element-974ced4 > .e-con-inner > .elementor-background-video-container::before, .elementor-194 .elementor-element.elementor-element-974ced4 > .elementor-background-slideshow::before, .elementor-194 .elementor-element.elementor-element-974ced4 > .e-con-inner > .elementor-background-slideshow::before, .elementor-194 .elementor-element.elementor-element-974ced4 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-primary );--background-overlay:'';}.elementor-194 .elementor-element.elementor-element-cdbd9f7 img{width:40%;}.elementor-194 .elementor-element.elementor-element-7c14226{text-align:center;color:var( --e-global-color-5bd60dc );}.elementor-194 .elementor-element.elementor-element-25db843{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-194 .elementor-element.elementor-element-727d615{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-120px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(max-width:1024px){.elementor-194 .elementor-element.elementor-element-21c66595{--padding-top:120px;--padding-bottom:80px;--padding-left:32px;--padding-right:32px;}.elementor-194 .elementor-element.elementor-element-0abf9d1{--padding-top:120px;--padding-bottom:80px;--padding-left:32px;--padding-right:32px;}.elementor-194 .elementor-element.elementor-element-974ced4{--padding-top:120px;--padding-bottom:80px;--padding-left:32px;--padding-right:32px;}}@media(max-width:767px){.elementor-194 .elementor-element.elementor-element-21c66595:not(.elementor-motion-effects-element-type-background), .elementor-194 .elementor-element.elementor-element-21c66595 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:bottom center;}.elementor-194 .elementor-element.elementor-element-21c66595{--margin-top:-48px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:100px;--padding-bottom:80px;--padding-left:20px;--padding-right:20px;}.elementor-194 .elementor-element.elementor-element-0abf9d1:not(.elementor-motion-effects-element-type-background), .elementor-194 .elementor-element.elementor-element-0abf9d1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:bottom center;}.elementor-194 .elementor-element.elementor-element-0abf9d1{--margin-top:-48px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:100px;--padding-bottom:80px;--padding-left:20px;--padding-right:20px;}.elementor-194 .elementor-element.elementor-element-974ced4:not(.elementor-motion-effects-element-type-background), .elementor-194 .elementor-element.elementor-element-974ced4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:bottom center;}.elementor-194 .elementor-element.elementor-element-974ced4{--margin-top:-48px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:100px;--padding-bottom:80px;--padding-left:20px;--padding-right:20px;}}/* Start custom CSS for html, class: .elementor-element-c2cb8ad */.bw-tilted-marquee-container { padding: 80px 0; background: transparent; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; } .bw-marquee-wrapper { overflow: hidden; padding: 15px 0; width: 110%; position: relative; /* Image jesa Left Tilt karne ke liye negative degree lagai hai */ transform: rotate(5deg); /* Solid Yellow Background */ background-color: #FFCC00; /* Halka sa shadow taake tape jesa feel aaye */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } .bw-marquee-track { display: inline-block; white-space: nowrap; animation: bw-marquee-scroll 15s linear infinite; } .bw-marquee-track span { color: #000000; /* Black Text */ font-size: 65px; /* Bara size caution tape ke liye */ font-family: 'Black Ops One', system-ui; /* Stencil Font Apply Kiya */ text-transform: uppercase; padding-right: 20px; display: inline-block; letter-spacing: 2px; /* Thori spacing letters ke beech */ } @keyframes bw-marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-91689f5 */.bw-tilted-marquee-container { padding: 80px 0; background: transparent; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; } .bw-marquee-wrapper { overflow: hidden; padding: 15px 0; width: 110%; position: relative; /* Image jesa Left Tilt karne ke liye negative degree lagai hai */ transform: rotate(5deg); /* Solid Yellow Background */ background-color: #FFCC00; /* Halka sa shadow taake tape jesa feel aaye */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } .bw-marquee-track { display: inline-block; white-space: nowrap; animation: bw-marquee-scroll 15s linear infinite; } .bw-marquee-track span { color: #000000; /* Black Text */ font-size: 65px; /* Bara size caution tape ke liye */ font-family: 'Black Ops One', system-ui; /* Stencil Font Apply Kiya */ text-transform: uppercase; padding-right: 20px; display: inline-block; letter-spacing: 2px; /* Thori spacing letters ke beech */ } @keyframes bw-marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-90992fa */@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap'); .bw-tilted-left-container { padding: 10px 0; background: transparent; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; } .bw-marquee-left-wrapper { overflow: hidden; padding: 15px 0; width: 110%; position: relative; transform: rotate(-4deg); /* 1. Base Caution Yellow Color */ background-color: #eebb00; /* 2. Realistic Grunge & Wrinkle Texture (Pure CSS) */ background-image: /* Silwatein (Creases) */ linear-gradient(105deg, transparent 20%, rgba(0, 0, 0, 0.15) 22%, transparent 24%), linear-gradient(75deg, transparent 60%, rgba(0, 0, 0, 0.1) 62%, transparent 64%), linear-gradient(135deg, transparent 80%, rgba(0, 0, 0, 0.2) 83%, transparent 85%), /* Matti / Dirt Spots */ radial-gradient(circle at 10% 30%, rgba(0, 0, 0, 0.08) 0%, transparent 15%), radial-gradient(circle at 90% 70%, rgba(0, 0, 0, 0.12) 0%, transparent 20%); /* 3. Edges ko thora dark karne ke liye (Burn effect) */ box-shadow: inset 0px 10px 15px -5px rgba(0, 0, 0, 0.4), inset 0px -10px 15px -5px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.5); /* Bahar ka shadow */ } .bw-marquee-left-track { display: inline-block; white-space: nowrap; animation: bw-marquee-left-scroll-reverse 15s linear infinite; } .bw-marquee-left-track span { color: #111111; /* Bilkul jet black ki jagah thora sa off-black realistic lagta hai */ font-size: 55px; /* Size adjust kiya taake construction tape jesa lage */ font-family: 'Black Ops One', system-ui; /* Stencil Font Apply */ text-transform: uppercase; padding-right: 25px; display: inline-block; letter-spacing: 2px; /* Text par halka sa paint jesa feel dene ke liye */ opacity: 0.9; } @keyframes bw-marquee-left-scroll-reverse { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-660a87c */.bw-tilted-marquee-container { padding: 80px 0; background: transparent; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; } .bw-marquee-wrapper { overflow: hidden; padding: 15px 0; width: 110%; position: relative; /* Image jesa Left Tilt karne ke liye negative degree lagai hai */ transform: rotate(5deg); /* Solid Yellow Background */ background-color: #FFCC00; /* Halka sa shadow taake tape jesa feel aaye */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } .bw-marquee-track { display: inline-block; white-space: nowrap; animation: bw-marquee-scroll 15s linear infinite; } .bw-marquee-track span { color: #000000; /* Black Text */ font-size: 65px; /* Bara size caution tape ke liye */ font-family: 'Black Ops One', system-ui; /* Stencil Font Apply Kiya */ text-transform: uppercase; padding-right: 20px; display: inline-block; letter-spacing: 2px; /* Thori spacing letters ke beech */ } @keyframes bw-marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-9cf279e */.bw-tilted-marquee-container { padding: 80px 0; background: transparent; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; } .bw-marquee-wrapper { overflow: hidden; padding: 15px 0; width: 110%; position: relative; /* Image jesa Left Tilt karne ke liye negative degree lagai hai */ transform: rotate(-25deg); /* Solid Yellow Background */ background-color: #FFCC00; /* Halka sa shadow taake tape jesa feel aaye */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } .bw-marquee-track { display: inline-block; white-space: nowrap; animation: bw-marquee-scroll 15s linear infinite; } .bw-marquee-track span { color: #000000; /* Black Text */ font-size: 65px; /* Bara size caution tape ke liye */ font-family: 'Black Ops One', system-ui; /* Stencil Font Apply Kiya */ text-transform: uppercase; padding-right: 20px; display: inline-block; letter-spacing: 2px; /* Thori spacing letters ke beech */ } @keyframes bw-marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-a3c9219 */.bw-tilted-marquee-container { padding: 80px 0; background: transparent; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; } .bw-marquee-wrapper { overflow: hidden; padding: 15px 0; width: 110%; position: relative; /* Image jesa Left Tilt karne ke liye negative degree lagai hai */ transform: rotate(25deg); /* Solid Yellow Background */ background-color: #FFCC00; /* Halka sa shadow taake tape jesa feel aaye */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } .bw-marquee-track { display: inline-block; white-space: nowrap; animation: bw-marquee-scroll 15s linear infinite; } .bw-marquee-track span { color: #000000; /* Black Text */ font-size: 65px; /* Bara size caution tape ke liye */ font-family: 'Black Ops One', system-ui; /* Stencil Font Apply Kiya */ text-transform: uppercase; padding-right: 20px; display: inline-block; letter-spacing: 2px; /* Thori spacing letters ke beech */ } @keyframes bw-marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-71bf51c *//* * 1. Global Container for Crossing Marquee Background * This creates a full background section to hold crossover tapes. */ .construction-bg-wrapper { position: relative; width: 100%; min-height: 100vh; /* Background covers viewport */ background-color: #1a1a1a; /* Dark background as seen in images */ /* Uncomment this line and put the real link to your crane image */ /* background-image: url('LINK_TO_CRANE_IMAGE.jpg'); */ background-size: cover; background-position: center; overflow: hidden; /* Important for crossing tapes */ display: flex; justify-content: center; align-items: center; /* Center foreground content */ } /* General Styles for crossing tapes */ .crossover-marquee-track { display: inline-block; white-space: nowrap; animation: cross-marquee-scroll 15s linear infinite; /* Adjust time for speed */ } .crossover-marquee-track span { color: #000000; /* Black Text */ font-family: 'Anton', sans-serif; /* Same bold sans-serif font from image */ font-size: 40px; /* Adjust size based on design */ text-transform: uppercase; padding-right: 20px; /* Spacing between phrases */ display: inline-block; } @keyframes cross-marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } /* Normal left scroll */ } /* * 2. The CROSSOVER TAPE Logic * This makes one tape slant one way, and another slant the other way. */ .cross-sign-wrapper { position: absolute; width: 150%; /* Wider than container for tilted effect */ overflow: hidden; padding: 10px 0; background-color: #f6c21e; /* Yellow Tape Color */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); /* Depth effect */ z-index: 1; /* Places the tape in the background */ } /* * TASK: Left Tilted (Slanting DOWN towards Right) - Angle as seen on bottom of image */ .slant-down-right { bottom: 10%; /* Specific positioning for bottom crossover part */ left: -25%; /* To compensate for wider slant */ transform: rotate(-3deg); /* Slants DOWN towards Right */ } /* * 3. Background Marquee Container (for the other crossing tape) * We create another one similar to the slant-down-right but slanting up */ .cross-sign-wrapper.slant-up-right { position: absolute; width: 150%; overflow: hidden; padding: 10px 0; background-color: #f6c21e; /* Yellow Tape Color */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); z-index: 2; /* Crucial for crossover, places this one on top of the other tape */ top: 25%; /* Specific positioning for top crossover part */ left: -25%; transform: rotate(3deg); /* Slants UP towards Right */ } /* Correcting font sizing for this crossover */ .slant-up-right .crossover-marquee-track span, .slant-down-right .crossover-marquee-track span { font-size: 40px; } /* Reverse animation for the slant-up tape for better crossover effect */ .slant-up-right .crossover-marquee-track { animation: cross-marquee-scroll-reverse 15s linear infinite; } @keyframes cross-marquee-scroll-reverse { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } /* Scrolls Right */ } /* * 4. Foreground Content - The Subscription Model * Crucially set to Z-Index higher than the crossing marquees. */ .foreground-content { position: relative; z-index: 10; /* High Z-index places content ON TOP of the tapes */ color: #ffffff; text-align: center; width: 100%; max-width: 600px; /* Centered content block */ padding: 40px; background-color: rgba(0,0,0,0.7); /* Optional semi-transparent background for content for clarity */ border-radius: 10px; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-3ac35f6 *//* Unique Container for the Cross Section */ .x-tape-bg-wrapper { position: relative; width: 100%; min-height: 100vh; /* Pura screen cover karega */ background-color: #1a1a1a; /* Backup color agar image load na ho */ /* --- !!! ZAROORI NOTE !!! --- */ /* Niche wale link ki jagah apni crane image ka URL WordPress Media Library se copy karke paste karein */ background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.6)), url('https://penprojects.com.au/wp-content/uploads/2026/06/Gemini_Generated_Image_xko0doxko0doxko0-scaled.png'); /* --------------------------- */ background-size: cover; background-position: center; background-attachment: fixed; /* Optional: Creates a parallax effect on scroll */ overflow: hidden; display: flex; justify-content: center; align-items: center; } /* Common Tape Styles */ .x-tape-line { position: absolute; width: 150%; /* Screen se lamba taake edges cover hon */ left: -25%; /* Center karne ke liye offset */ top: 50%; /* Screen ke bilkul center mein */ overflow: hidden; padding:10px 0; background-color: #eebb00; /* Caution Yellow */ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); z-index: 1; /* Background mein rakhne ke liye */ } /* Tape 1: Slanted UP (Right side opar) */ .x-tape-up { transform: translateY(-50%) rotate(-12deg); } /* Tape 2: Slanted DOWN (Right side neeche) */ .x-tape-down { transform: translateY(-50%) rotate(12deg); } /* Marquee Track & Animation */ .x-tape-track { display: inline-block; white-space: nowrap; animation: x-tape-scroll 45s linear infinite; } /* Reverse track for the second tape to create a cool crossing motion */ .x-tape-track.reverse { animation: x-tape-scroll-reverse 45s linear infinite; } .x-tape-track span { color: #111111; font-family: 'Black Ops One', system-ui; /* Stencil Font */ font-size: 35px; text-transform: uppercase; padding-right: 25px; display: inline-block; letter-spacing: 2px; } @keyframes x-tape-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes x-tape-scroll-reverse { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } /* Foreground Content (Logo & Subscribe) */ .x-tape-foreground { position: relative; z-index: 10; /* Tapes ke opar (Top) pe rakhne ke liye */ color: #ffffff; text-align: center; width: 100%; max-width: 600px; padding: 40px; /* Halka sa dark glass effect taake text yellow tape par mix na ho */ margin-top: 400px; border-radius: 15px; } .client-main-logo { max-width: 250px !important; /* Yahan se logo ka size bara/chota kar sakte hain */ height: auto; margin: 0 auto 25px auto; /* Center karne aur neechay gap dene ke liye */ display: block; }/* End custom CSS */ /* Start custom CSS */body { overflow-x: hidden !important; } .site-footer { display: none !important; }/* End custom CSS */