/*Remove previous scroll to top button */#scroll-top{background-color:green !important;opacity:0 !important;cursor:auto !important;pointer-events:none !important}/* Desktop styles */@media screen and (min-width:1024px){.shrinker{transition:all .2s linear!important;-webkit-transition:all .2s linear!important;-moz-transition:all .2s linear!important}.shrinker.elementor-sticky--effects{padding-top:2px!important;padding-bottom:2px!important;box-shadow:0 5px 20px 8px rgba(0,0,0,.05);transition:all .2s linear!important;-webkit-transition:all .2s linear!important;-moz-transition:all .2s linear!important}/* shrinking logo image */.shrinking-logo img{width:300px!important;transition:all .2s linear!important;-webkit-transition:all .2s linear!important;-moz-transition:all .2s linear!important}.shrinker.elementor-sticky--effects img{width:200px!important;transition:all .2s linear!important;-webkit-transition:all .2s linear!important;-moz-transition:all .2s linear!important}}/* Removes sidebar */.content-area{width:100%;margin:0;border:0;padding:0}.content-area .site{margin:0}/* Centralise banners */.banners{background-position:center center;background-repeat:no-repeat;background-size:cover}/* Orange border on hover */.product-carousel .swiper-slide{border:4px solid transparent;transition:border-color 0.3s ease;border-radius:20px;cursor:pointer}.product-carousel .swiper-slide:hover{border-color:#66cf80}.product-carousel.swiper-slide{position:relative}.product-carousel.swiper-slide{position:relative}/* Roots section borders *//* ---------------------------- *//* -----------------------------*//* Top left column */.flip-box-top-left{position:relative}.flip-box-top-left::before{content:"";position:absolute;top:-10px;/* Adjust the value to control the ring size */left:-10px;/* Adjust the value to control the ring size */right:-10px;/* Adjust the value to control the ring size */bottom:-10px;/* Adjust the value to control the ring size */border:120px solid #28B8CE;/* Replace #28B8CE with your desired color for the ring */border-radius:40px;/* Adjust the value to control the roundness of corners */}.flip-box-top-left::after{content:"";position:absolute;top:50%;left:100%;width:100px;/* Adjust the value to control the length of the arrow */height:5px;/* Adjust the value to control the thickness of the arrow */background:#28B8CE;/* Replace #28B8CE with your desired color for the arrow */transform:translateY(-50%)}.flip-box-top-left::before,.flip-box-top-left::after{z-index:-1;/* Ensure the ring and arrow appear behind the flip-box content */}.flip-box-top-left .flip-box-back{overflow:visible;/* Allow the arrowhead to be visible outside the flip-box */}.flip-box-top-left .flip-box-back::before{content:"";position:absolute;top:50%;left:calc(100% + 1px);/* Adjust the value to control the position of the arrowhead */width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:20px solid #28B8CE;/* Replace #28B8CE with your desired color for the arrowhead */transform:translateY(-50%);z-index:1;/* Ensure the arrowhead appears above the dotted line */}/* Dotted Line */.flip-box-top-left::after{content:"";position:absolute;top:50%;left:calc(100% + 1px);/* Adjust the value to control the position of the dotted line */width:100px;/* Adjust the value to control the length of the dotted line */height:20px;/* Adjust the value to control the thickness of the dotted line */background:transparent;/* Set the background to transparent */transform:translateY(-50%);background-image:linear-gradient(to right,#28B8CE 50%,transparent 50%);/* Control the spacing between dots here */background-size:16px 5px;/* Adjust the size of the dots */}/* Top middle column */.flip-box-top-mid{position:relative}.flip-box-top-mid::before{content:"";position:absolute;top:-10px;/* Adjust the value to control the ring size */left:-10px;/* Adjust the value to control the ring size */right:-10px;/* Adjust the value to control the ring size */bottom:-10px;/* Adjust the value to control the ring size */border:120px solid #BECF00;/* Replace #BECF00 with your desired color for the ring */border-radius:40px;/* Adjust the value to control the roundness of corners */}.flip-box-top-mid::after{content:"";position:absolute;top:50%;left:100%;width:100px;/* Adjust the value to control the length of the arrow */height:5px;/* Adjust the value to control the thickness of the arrow */background:#BECF00;/* Replace #BECF00 with your desired color for the arrow */transform:translateY(-50%)}.flip-box-top-mid::before,.flip-box-top-mid::after{z-index:-1;/* Ensure the ring and arrow appear behind the flip-box content */}.flip-box-top-mid .flip-box-back{overflow:visible;/* Allow the arrowhead to be visible outside the flip-box */}.flip-box-top-mid .flip-box-back::before{content:"";position:absolute;top:50%;left:calc(100% + 1px);/* Adjust the value to control the position of the arrowhead */width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:20px solid #BECF00;/* Replace #BECF00 with your desired color for the arrowhead */transform:translateY(-50%);z-index:1;/* Ensure the arrowhead appears above the dotted line */}/* Dotted Line */.flip-box-top-mid::after{content:"";position:absolute;top:50%;left:calc(100% + 1px);/* Adjust the value to control the position of the dotted line */width:100px;/* Adjust the value to control the length of the dotted line */height:20px;/* Adjust the value to control the thickness of the dotted line */background:transparent;/* Set the background to transparent */transform:translateY(-50%);background-image:linear-gradient(to right,#BECF00 50%,transparent 50%);/* Control the spacing between dots here */background-size:16px 5px;/* Adjust the size of the dots */}/* Top right column */.flip-box-top-right{position:relative}.flip-box-top-right::before{content:"";position:absolute;top:-10px;/* Adjust the value to control the ring size */left:-10px;/* Adjust the value to control the ring size */right:-10px;/* Adjust the value to control the ring size */bottom:-10px;/* Adjust the value to control the ring size */border:120px solid #00A094;/* Replace #BECF00 with your desired color for the ring */border-radius:40px;/* Adjust the value to control the roundness of corners */}/* Dotted Line */.flip-box-top-right::after{content:"";position:absolute;top:100%;/* Position the dotted line at the bottom of the flip-box */left:50%;/* Position the dotted line at the horizontal center */width:20px;/* Adjust the value to control the thickness of the dotted line */height:100px;/* Adjust the value to control the length of the dotted line */background:transparent;/* Set the background to transparent */transform:translateX(-50%);background-image:linear-gradient(to bottom,#00A094 50%,transparent 50%);/* Control the spacing between dots here */background-size:10px 16px;/* Adjust the size of the dots */z-index:-1}/* mid right column */.flip-box-mid-right{position:relative}.flip-box-mid-right::before{content:"";position:absolute;top:-10px;/* Adjust the value to control the ring size */left:-10px;/* Adjust the value to control the ring size */right:-10px;/* Adjust the value to control the ring size */bottom:-10px;/* Adjust the value to control the ring size */border:120px solid #EA5A0A;/* Replace #BECF00 with your desired color for the ring */border-radius:40px;/* Adjust the value to control the roundness of corners */}.flip-box-mid-right::after{content:"";position:absolute;top:50%;right:100%;width:100px;/* Adjust the value to control the length of the arrow */height:5px;/* Adjust the value to control the thickness of the arrow */background:#BECF00;/* Replace #BECF00 with your desired color for the arrow */transform:translateY(-50%)}.flip-box-mid-right::before,.flip-box-mid-right::after{z-index:-1;/* Ensure the ring and arrow appear behind the flip-box content */}.flip-box-mid-right .flip-box-back{overflow:visible;/* Allow the arrowhead to be visible outside the flip-box */}.flip-box-mid-right .flip-box-back::before{content:"";position:absolute;top:50%;left:calc(100% + 1px);/* Adjust the value to control the position of the arrowhead */width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:20px solid #EA5A0A;/* Replace #BECF00 with your desired color for the arrowhead */transform:translateY(-50%);z-index:1;/* Ensure the arrowhead appears above the dotted line */}/* Dotted Line */.flip-box-mid-right::after{content:"";position:absolute;top:50%;right:calc(100% + 1px);/* Adjust the value to control the position of the dotted line */width:100px;/* Adjust the value to control the length of the dotted line */height:20px;/* Adjust the value to control the thickness of the dotted line */background:transparent;/* Set the background to transparent */transform:translateY(-50%);background-image:linear-gradient(to right,#EA5A0A 50%,transparent 50%);/* Control the spacing between dots here */background-size:16px 5px;/* Adjust the size of the dots */z-index:-2}/* mid-mid column */.flip-box-mid-mid{position:relative}.flip-box-mid-mid::before{content:"";position:absolute;top:-10px;/* Adjust the value to control the ring size */left:-10px;/* Adjust the value to control the ring size */right:-10px;/* Adjust the value to control the ring size */bottom:-10px;/* Adjust the value to control the ring size */border:120px solid #28B8CE;/* Replace #BECF00 with your desired color for the ring */border-radius:40px;/* Adjust the value to control the roundness of corners */}.flip-box-mid-mid::after{content:"";position:absolute;top:50%;right:100%;width:100px;/* Adjust the value to control the length of the arrow */height:5px;/* Adjust the value to control the thickness of the arrow */background:#BECF00;/* Replace #BECF00 with your desired color for the arrow */transform:translateY(-50%)}.flip-box-mid-mid::before,.flip-box-mid-mid::after{z-index:-1;/* Ensure the ring and arrow appear behind the flip-box content */}.flip-box-mid-mid .flip-box-back{overflow:visible;/* Allow the arrowhead to be visible outside the flip-box */}.flip-box-mid-mid .flip-box-back::before{content:"";position:absolute;top:50%;left:calc(100% + 1px);/* Adjust the value to control the position of the arrowhead */width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:20px solid #28B8CE;/* Replace #BECF00 with your desired color for the arrowhead */transform:translateY(-50%);z-index:1;/* Ensure the arrowhead appears above the dotted line */}/* Dotted Line */.flip-box-mid-mid::after{content:"";position:absolute;top:50%;right:calc(100% + 1px);/* Adjust the value to control the position of the dotted line */width:100px;/* Adjust the value to control the length of the dotted line */height:20px;/* Adjust the value to control the thickness of the dotted line */background:transparent;/* Set the background to transparent */transform:translateY(-50%);background-image:linear-gradient(to right,#28B8CE 50%,transparent 50%);/* Control the spacing between dots here */background-size:16px 5px;/* Adjust the size of the dots */}/* mid-left column */.flip-box-mid-left{position:relative}.flip-box-mid-left::before{content:"";position:absolute;top:-10px;/* Adjust the value to control the ring size */left:-10px;/* Adjust the value to control the ring size */right:-10px;/* Adjust the value to control the ring size */bottom:-10px;/* Adjust the value to control the ring size */border:120px solid #BECF00;/* Replace #BECF00 with your desired color for the ring */border-radius:40px;/* Adjust the value to control the roundness of corners */}/* Dotted Line */.flip-box-mid-left::after{content:"";position:absolute;top:100%;/* Position the dotted line at the bottom of the flip-box */left:50%;/* Position the dotted line at the horizontal center */width:20px;/* Adjust the value to control the thickness of the dotted line */height:100px;/* Adjust the value to control the length of the dotted line */background:transparent;/* Set the background to transparent */transform:translateX(-50%);background-image:linear-gradient(to bottom,#BECF00 50%,transparent 50%);/* Control the spacing between dots here */background-size:10px 16px;/* Adjust the size of the dots */z-index:-2}/* bott-left column */.flip-box-bott-left{position:relative}.flip-box-bott-left::before{content:"";position:absolute;top:-10px;/* Adjust the value to control the ring size */left:-10px;/* Adjust the value to control the ring size */right:-10px;/* Adjust the value to control the ring size */bottom:-10px;/* Adjust the value to control the ring size */border:120px solid #00A094;/* Replace #28B8CE with your desired color for the ring */border-radius:40px;/* Adjust the value to control the roundness of corners */}.flip-box-bott-left::after{content:"";position:absolute;top:50%;left:100%;width:100px;/* Adjust the value to control the length of the arrow */height:5px;/* Adjust the value to control the thickness of the arrow */background:#00A094;/* Replace #28B8CE with your desired color for the arrow */transform:translateY(-50%)}.flip-box-bott-left::before,.flip-box-bott-left::after{z-index:-1;/* Ensure the ring and arrow appear behind the flip-box content */}.flip-box-bott-left .flip-box-back{overflow:visible;/* Allow the arrowhead to be visible outside the flip-box */}.flip-box-bott-left .flip-box-back::before{content:"";position:absolute;top:50%;left:calc(100% + 1px);/* Adjust the value to control the position of the arrowhead */width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:20px solid #00A094;/* Replace #28B8CE with your desired color for the arrowhead */transform:translateY(-50%);z-index:1;/* Ensure the arrowhead appears above the dotted line */}/* Dotted Line */.flip-box-bott-left::after{content:"";position:absolute;top:50%;left:calc(100% + 1px);/* Adjust the value to control the position of the dotted line */width:100px;/* Adjust the value to control the length of the dotted line */height:20px;/* Adjust the value to control the thickness of the dotted line */background:transparent;/* Set the background to transparent */transform:translateY(-50%);background-image:linear-gradient(to right,#00A094 50%,transparent 50%);/* Control the spacing between dots here */background-size:16px 5px;/* Adjust the size of the dots */}/* bott-mid column */.flip-box-bott-mid{position:relative}.flip-box-bott-mid::before{content:"";position:absolute;top:-10px;/* Adjust the value to control the ring size */left:-10px;/* Adjust the value to control the ring size */right:-10px;/* Adjust the value to control the ring size */bottom:-10px;/* Adjust the value to control the ring size */border:120px solid #EA5A0A;/* Replace #28B8CE with your desired color for the ring */border-radius:40px;/* Adjust the value to control the roundness of corners */}.flip-box-bott-mid::after{content:"";position:absolute;top:50%;left:100%;width:100px;/* Adjust the value to control the length of the arrow */height:5px;/* Adjust the value to control the thickness of the arrow */background:#28B8CE;/* Replace #28B8CE with your desired color for the arrow */transform:translateY(-50%)}.flip-box-bott-mid::before,.flip-box-bott-mid::after{z-index:-1;/* Ensure the ring and arrow appear behind the flip-box content */}.flip-box-bott-mid .flip-box-back{overflow:visible;/* Allow the arrowhead to be visible outside the flip-box */}.flip-box-bott-mid .flip-box-back::before{content:"";position:absolute;top:50%;left:calc(100% + 1px);/* Adjust the value to control the position of the arrowhead */width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:20px solid #EA5A0A;/* Replace #28B8CE with your desired color for the arrowhead */transform:translateY(-50%);z-index:1;/* Ensure the arrowhead appears above the dotted line */}/* Dotted Line */.flip-box-bott-mid::after{content:"";position:absolute;top:50%;left:calc(100% + 1px);/* Adjust the value to control the position of the dotted line */width:100px;/* Adjust the value to control the length of the dotted line */height:20px;/* Adjust the value to control the thickness of the dotted line */background:transparent;/* Set the background to transparent */transform:translateY(-50%);background-image:linear-gradient(to right,#EA5A0A 50%,transparent 50%);/* Control the spacing between dots here */background-size:16px 5px;/* Adjust the size of the dots */}/* bott-right column */.flip-box-bott-mid{position:relative}.flip-box-bott-right::before{content:"";position:absolute;top:-10px;/* Adjust the value to control the ring size */left:-10px;/* Adjust the value to control the ring size */right:-10px;/* Adjust the value to control the ring size */bottom:-10px;/* Adjust the value to control the ring size */border:120px solid #28B8CE;/* Replace #28B8CE with your desired color for the ring */border-radius:40px;/* Adjust the value to control the roundness of corners */}/* Industry CTA */.industry-cta{position:relative;display:block;max-width:100%;margin:0 auto;height:200px;background-size:cover;padding:20px;transition:transform 0.8s ease;box-shadow:0 2px 6px rgba(0,0,0,0.3);cursor:pointer;border-radius:5px;/* Added border-radius */}.industry-cta:hover{transform:scale(1.05);box-shadow:0 2px 6px rgba(0,0,0,0.3)}.industry-cta .white-box{position:absolute;top:0;left:0;width:100%;/* Adjusted width to cover the whole container */height:35px;/* Adjust the height as desired */background-color:#ffffff;z-index:2;/* Set a higher z-index to keep it on top */border-radius:5px 5px 0 0;/* Adjusted border-radius */display:flex;justify-content:center;align-items:center}.industry-cta .white-box h2{color:#034052;font-family:Helvetica,Arial,sans-serif;/* Set font family to Helvetica */font-size:18px;font-weight:bold;margin:0}.industry-cta .custom-hover-effect{position:absolute;bottom:0;left:0;width:30%;height:10px;background-color:#66cf80;transition:width 0.6s ease;transform-origin:left center;z-index:3;border-radius:5px;/* Added border-radius */}.industry-cta:hover .custom-hover-effect{width:100%}.industry-cta .custom-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(17,50,66,0.75);opacity:0;z-index:1;transition:opacity 0.8s ease;border-radius:5px;/* Added border-radius */}.industry-cta:hover .custom-overlay{opacity:1}.Dumarey-cta{position:relative;display:block;max-width:100%;margin:0 auto;height:200px;background-size:cover;padding:20px;transition:transform 0.8s ease;box-shadow:0 2px 6px rgba(0,0,0,0.3);cursor:pointer;border-radius:5px;/* Added border-radius */background-position:center center;/* Center the background image */}.Dumarey-cta:hover{transform:scale(1.05);box-shadow:0 2px 6px rgba(0,0,0,0.3)}.Dumarey-cta .white-box{position:absolute;top:0;left:0;width:100%;/* Adjusted width to cover the whole container */height:35px;/* Adjust the height as desired */background-color:#ffffff;z-index:2;/* Set a higher z-index to keep it on top */border-radius:5px 5px 0 0;/* Adjusted border-radius */display:flex;justify-content:center;align-items:center}.Dumarey-cta .white-box h2{color:#034052;font-family:Helvetica,Arial,sans-serif;/* Set font family to Helvetica */font-size:18px;font-weight:bold;margin:0}.Dumarey-cta .custom-hover-effect{position:absolute;bottom:0;left:0;width:30%;height:10px;background-color:#66cf80;transition:width 0.6s ease;transform-origin:left center;z-index:3;border-radius:5px;/* Added border-radius */}.Dumarey-cta:hover .custom-hover-effect{width:100%}.Dumarey-cta .custom-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(17,50,66,0.75);opacity:0;z-index:1;transition:opacity 0.8s ease;border-radius:5px;/* Added border-radius */}.Dumarey-cta:hover .custom-overlay{opacity:1}.badge{background-color:#66cf80;/* Adjusted badge background color */color:#ffff;/* Adjusted badge text color */font-size:12px;/* Adjusted badge text size */padding:5px 8px;/* Adjusted badge padding */border-radius:10px;/* Adjusted badge border radius */margin-left:5px;/* Adjusted margin to create space between badge and text */position:absolute;bottom:20px;right:20px;z-index:2;font-family:Helvetica,Arial,sans-serif}/* Product CTA */.custom-call-to-action{position:relative;display:block;max-width:100%;margin:0 auto;height:300px;background-size:cover;padding:20px;transition:transform 0.8s ease;box-shadow:0 2px 6px rgba(0,0,0,0.3);cursor:pointer;border-radius:5px;/* Added border-radius */}.custom-call-to-action:hover{transform:scale(1.05);box-shadow:0 2px 6px rgba(0,0,0,0.3)}.custom-call-to-action .white-box{position:absolute;top:0;left:0;width:200px;/* Adjust the width as desired */height:50px;/* Adjust the height as desired */background-color:#ffffff;z-index:2;/* Set a higher z-index to keep it on top */border-radius:5px 0 20px 0;/* Added border-radius */border-right:5px solid #ffffff;/* Added right border with the same color as the background */display:flex;justify-content:center;align-items:center}.custom-call-to-action .white-box h2{color:rgba(240,135,0,1);font-family:Helvetica,Arial,sans-serif;/* Set font family to Helvetica */font-size:18px;font-weight:bold;margin:0}.custom-call-to-action .custom-hover-effect{position:absolute;bottom:0;left:0;width:30%;height:10px;background-color:rgba(240,135,0,1);transition:width 0.6s ease;transform-origin:left center;z-index:3;border-radius:5px;/* Added border-radius */}.custom-call-to-action:hover .custom-hover-effect{width:100%}.custom-call-to-action .custom-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(4,43,118,0.75);opacity:0;z-index:1;transition:opacity 0.8s ease;border-radius:5px;/* Added border-radius */}.custom-call-to-action:hover .custom-overlay{opacity:1}/* Industry-slider */.swiper-slide-contents{background-color:#292C76AD;/* Box Color */padding:1500px 50px 100px 50px;border-radius:0}@media (max-width:767px){.swiper-slide-contents{padding:1500px 10px 50px 0;/* Adjust padding values for mobile */justify-content:center;align-items:center;text-align:center}}/* Set the pagination bullets to a horizontal line at the top *//*.swiper-pagination-bullets{display:flex;justify-content:space-between;position:absolute;top:0;left:0;right:0;height:10px}.swiper-pagination-bullet{flex:1;height:100%;background-color:#fff;/* Inactive bullet color *//* transition:background-color 0.3s ease-in-out;border-radius:0;/* Remove circular border radius *//* margin:0;/* Remove margin */}/* Set the active slide's bullet color to orange *//*.swiper-pagination-bullet-active{background-color:#F08700}/* /* background images with blue overlay *THIS CODE IS IN ADDITIONAL CSS FOR ALL INSTANCES AS IT BROKE WHEN IT WAS WORKING FROM HERE* *//*.background-image-text{background-color:#292C76AD!important;padding:100px 50px 100px 50px;border-radius:0;margin-left:50%}@media (max-width:1024px){.background-image-text{margin-left:0}*//* Mobile drop shadow */.shrinker{@media (max-width:767px){box-shadow:0 4px 8px rgba(0,0,0,0.2)}