/*
Theme Name: Provizio
Theme URI: 
Author: Gabriel Denys
Author URI: 
Description: The Default Provizio theme
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: provizio
Tags: 
*/

*
{
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}

img {
  pointer-events: none;
}

.glass-flat
{

  background: linear-gradient(135deg, rgb(0 0 0 / 1%) 0%, rgb(255 255 255 / 3%) 100%);

  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);

  border: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.1);

  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.2), 
    inset 0 0 20px rgba(255, 255, 255, 0.05);
  position: relative;
}

.glass-flat::before, .glass-flat-no-blur::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1; /* Behind the content, inside the glass */
  border-radius: inherit;
  opacity: 0.4; 
  /* Subtle noise texture */
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 800 800' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E");
  mix-blend-mode: overlay; /* Blends the noise with the background */
  pointer-events: none;
}

.glass-flat-no-blur
{
  background: inear-gradient(135deg, rgb(234 234 234 / 1%) 0%, rgb(101 101 101 / 5%) 100%);

  border: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.1);

  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.2), 
    inset 0 0 20px rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  position: relative;
}

.menu-float{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
background: #0000001f;
  margin-bottom: 0 !important; /* remove the negative margin */
  transform: translateZ(0);     /* promotes to its own layer */
  will-change: transform;       /* helps Chrome keep it stable */
	    border-top: 0px;
    border-left: 0px;
    border-right: 0px;

}


.green-bottom-radial
{
background: radial-gradient(40% 40% at bottom, #0dfead0a, #0000001f);
}

.green-blue-text
{
background: linear-gradient(
90deg, #20B252, #1DE7CE, #639ACD);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.admin-bar .site-wrapper {
  transform: none;
}

:where(.wp-site-blocks) > * {
    margin-block-start: 0px;
    margin-block-end: 0;
}

/* Shared Base Styles */
.glass-btn-red {
  /* Typography & Shape */
  font-family: sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  color: white;
  text-decoration: none;
  padding: 10px 35px;
  border-radius: 50px;
  
  /* Layout basics */
  display: inline-block;
  position: relative;
  cursor: pointer;
  
  /* Smooth transitions for the press effect */
  transition: transform 0.1s ease-out, box-shadow 0.2s ease, border-color 0.2s;

  /* 4. The Shiny Outline */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top-color: rgba(255, 255, 255, 0.5);
  border-bottom-color: rgba(255, 100, 100, 0.1);

  /* The "Flat-ish" Shadow: Soft and diffused, not solid */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 
              0 1px 3px rgba(0, 0, 0, 0.1);
}


/* --- BUTTON 2: White Context --- */
.glass-btn-red {
  /* 1. IDLE STATE */
  background: 
    #FF4D57;
  
  /* Keep your shadow logic here */
  box-shadow: 0 4px 10px rgba(255, 0, 0, 0.15), 
              0 2px 4px rgba(0, 0, 0, 0.1);
}

.glass-btn-red:hover {
  /* 2. HOVER STATE */
    background: radial-gradient(circle 60px at var(--x) var(--y), rgb(255 137 137 / 80%) 0%, #FF4D57 100%);
    /* `background:` shorthand resets background-color to transparent — re-apply
       the brand red so the radial highlight sits over a solid red base rather
       than over the page background. Mirrors the gb-text-e0363a71:hover rule
       that production-only red buttons rely on. */
    background-color: #FF4D57;

  /* Keep your hover shadow logic here */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15),
              0 6px 6px rgba(0, 0, 0, 0.1);
}


/* --- HOVER STATE --- */
.glass-btn-red:hover{
  /* Slight subtle lift */

  
  /* Shadow grows softer to indicate lift */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15), 
              0 6px 6px rgba(0, 0, 0, 0.1);
}


/* --- CLICK / ACTIVE STATE (The "Pressed In" Effect) --- */
.glass-btn-red:active{
  /* 1. Scale down: This mimics the button moving away from you (pressed in) */
  transform: scale(0.97);

  /* 2. INSET Shadow: This makes the edges look like they are caving in */
  box-shadow: inset 0px 4px 10px rgba(0, 0, 0, 0.2);
  
  /* 3. Dim the border to reduce sheen */
  border-top-color: rgba(255, 255, 255, 0.2);
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

#home_overlay
{
    height: 100%;
    max-height: 100%;
  min-width: 2500px;
    object-fit: contain;
   width: 100vw;
	position: relative;
	
}
@media (max-width: 767px) {
#home_overlay
{
    height: 554px;
    max-height: 100%;
   min-width: 1500px;
    object-fit: contain;
   width: 100vw;
    margin-top: -50px;
}
}
/*
#home_overlay #bg
{
-webkit-mask-image: 
    linear-gradient(to right, black 0%, black 60%, transparent 100%),
    linear-gradient(to left, black 0%, black 60%, transparent 100%);
  mask-image: 
    linear-gradient(to right, black 0%, black 60%, transparent 100%),
    linear-gradient(to left, black 0%, black 60%, transparent 100%);


  -webkit-mask-position: left, right;
  mask-position: left, right;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;


  -webkit-mask-size: 0% 100%;
  mask-size: 0% 100%;
}*/

.hide-scrollbar {
  /* FireFox */
  scrollbar-width: none;
  
  /* IE 10+ */
  -ms-overflow-style: none;
}

/* Chrome, Safari, Edge, Opera */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
/* 1. The Outer Container (Overlay) */
#mobile-menu-container {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    z-index: 9999;
    background-color: rgba(0,0,0,0.5); /* Optional dim background */
    
    /* Hide it initially without display: none */
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease, visibility 0.3s;
	    transform: translateX(100%);
    pointer-events: none; 
	    box-shadow: #000000b0 -20px 0px 60px 50px;
	border-top: 0px!important;
	border-bottom: 0px!important;
}

#mobile-menu-container.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
	  transform: translateX(0);
}

/* 2. The Inner Menu Panel (The part that slides) */
#mobile-menu-container > div {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    
    /* Slide Logic */

}


/* 3. Disable Scroll Logic */
body.menu-open {
    /* overflow: hidden is usually enough, 
       but we add touch-action to prevent mobile rubber-banding */
    overflow: hidden;
    touch-action: none; 
}

/* When logged in and the WP admin bar is visible */
body.admin-bar .menu-float{
  top: 32px; /* admin bar height on desktop */
}

/* Admin bar is taller on narrow screens */
@media (max-width: 782px){
  body.admin-bar .menu-float{
    top: 46px;
  }


}


.green-signal-background::before {
  content: "";
  background-image: radial-gradient(#517fa9 0%, #29bdab 17%, #24713e 21%, rgb(0, 0, 0) 64%);
  width: 299px;
  height: 350px;
  position: absolute;
  z-index: -1;
  top: -40%;
  transform-origin: 30% 30%;

  /* We combine two animations: 
     1. One to turn it on (2s)
     2. One to keep it pulsing forever (4s loop) 
  */
  animation: 
    turnOn 2s ease-out forwards, 
    gentlePulse 4s ease-in-out 2s infinite; /* Starts after 2s delay */
    
  opacity: 0; 
  will-change: opacity, transform, filter;
}

/* 1. The Entry */
@keyframes turnOn {
  0%   { opacity: 0; transform: scale(0.8); filter: blur(40px); }
  100% { opacity: 1; transform: scale(1);   filter: blur(22px); }
}

/* 2. The Loop (Very subtle) */
@keyframes gentlePulse {
  0%   { opacity: 1;    transform: scale(1);    filter: blur(22px); }
  50%  { opacity: 0.85; transform: scale(0.96); filter: blur(25px); } /* Dims slightly */
  100% { opacity: 1;    transform: scale(1);    filter: blur(22px); }
}

.yellow-red-bottom-radial
{
background: radial-gradient(ellipse 120% 60% at 50% 100%, rgba(255, 239, 84, 0.25) 0%, rgba(255, 239, 84, 0.1) 38%)!important;
    background-repeat: no-repeat;
    background-size: 100% 100%;
	transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.yellow-red-bottom-radial:has(#tab2:checked) {
  background: radial-gradient(ellipse 120% 60% at 50% 100%, rgb(255 77 87 / 15%) 0%, rgb(255 77 87 / 10%) 38%) !important;
  
}

.yellow-red-bottom-radial:has(#tab2:checked) #mimso
{
	display:none;
}

.yellow-red-bottom-radial:has(#tab1:checked) #id-5d
{
	display:none;
}



.toggle-wrapper {
    /* The black pill container */
    padding: 6px;
    border-radius: 50px;
    display: flex;
    position: relative;
    max-width: 400px; /* Adjust width as needed */
	width:100%;
    height: 60px;
  }

@media (max-width: 767px) {
	.toggle-tab {
		font-size: 0.8rem!important;
	}
}

  /* 2. HIDE RADIO INPUTS */
  .toggle-wrapper input[type="radio"] {
    display: none;
  }

  /* 3. LABELS (The Text) */
  .toggle-tab {
    flex: 1;
    z-index: 2; /* Must be above the glass glider */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(255, 255, 255, 0.6); /* Inactive text color */
    font-weight: 500;
    transition: color 0.3s ease;
    user-select: none;
    font-size: 16px;
    letter-spacing: 0.5px;
  }

.toggle-tab:hover{
	 color: #fff;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
}

  /* 4. THE GLASS GLIDER */
  /* This is the moving background element */
  .glider {
    position: absolute;
    top: 7px;    /* Matches padding of wrapper */
    left: 10px;   /* Matches padding of wrapper */
    height: calc(100% - 14px);
    width: calc(50% - 10px); /* Half width minus padding */
    border-radius: 40px;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth spring-like ease */
    pointer-events: none; /* Let clicks pass through to labels */
  }

 
  /* 5. LOGIC & ANIMATION */
  
  /* If Tab 1 is checked, highlight Label 1 */
  #tab1:checked ~ .label-1 {
    color: #fff;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
  }
  
  /* If Tab 2 is checked, highlight Label 2 */
  #tab2:checked ~ .label-2 {
    color: #fff;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
  }

  /* If Tab 1 is checked, keep glider at start (0%) */
  #tab1:checked ~ .glider {
    transform: translateX(0);
	  background-color: #ffef5430;
  }

  /* If Tab 2 is checked, slide glider to end (100% + gap correction) */
  #tab2:checked ~ .glider {
    transform: translateX(100%);
	      background-color: #ff4d5730;
    /* Note: If you add gap between buttons, you may need calc(100% + gap) */
  }


.success-stories #vid-carousel-text-1,
.success-stories #vid-carousel-text-2,
.success-stories #vid-carousel-text-3,
.success-stories .gb-text-f1641ab5,
.success-stories .gb-text-de503ef0,
.success-stories .gb-text-3c24b683,
.success-stories .gb-text-14c239d4,
.success-stories .gb-text-2fe4b027,
.success-stories .gb-text-a2ac0205 {
	display: none;
}

.success-stories:has(#card1[data-active="true"]) #vid-carousel-text-1,
.success-stories:has(#card1[data-active="true"]) .gb-text-f1641ab5,
.success-stories:has(#card1[data-active="true"]) .gb-text-de503ef0,
.success-stories:has(#card2[data-active="true"]) #vid-carousel-text-2,
.success-stories:has(#card2[data-active="true"]) .gb-text-3c24b683,
.success-stories:has(#card2[data-active="true"]) .gb-text-2fe4b027,
.success-stories:has(#card3[data-active="true"]) #vid-carousel-text-3,
.success-stories:has(#card3[data-active="true"]) .gb-text-14c239d4,
.success-stories:has(#card3[data-active="true"]) .gb-text-a2ac0205 {
	display: block;
}

html, body
{
	overflow-x: hidden;
}



/* 1. Base Transition for the Image */
#accordion-switcher #accordion-img {
   background-image: url("../../uploads/2025/12/design-services-2-resized.avif");
}

/* 2. Logic: If the Switcher HAS the 1st item open, change the image inside */
#accordion-switcher:has(.wp-block-accordion-item:nth-of-type(1).is-open) #accordion-img {
	   background-image: url("../../uploads/2025/12/design-services-2-resized.avif");

}

/* Item 2: APIs */
#accordion-switcher:has(.wp-block-accordion-item:nth-of-type(2).is-open) #accordion-img {
     background-image: url("../../uploads/2025/12/design-services-v3.avif");
}

/* Item 3: Platform Integration */
#accordion-switcher:has(.wp-block-accordion-item:nth-of-type(3).is-open) #accordion-img {
      background-image: url("../../uploads/2025/12/APIs-Resized.avif");
}

/* Item 4: Visualisation Engine */
#accordion-switcher:has(.wp-block-accordion-item:nth-of-type(4).is-open) #accordion-img {
     background-image: url("../../uploads/2025/12/Visualisation-Engine-1.avif");
}




/* 1. The Container (Grid Parent) */
.wp-block-accordion-panel {
    display: grid !important;
    /* Start closed */
    grid-template-rows: 0fr;
    /* Clean slate for the parent */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    
    /* Only animate the grid track on the parent */
    transition: grid-template-rows 0.5s ease-in-out;
}

/* 2. Parent Open State */
.wp-block-accordion-item.is-open .wp-block-accordion-panel {
    grid-template-rows: 1fr;
}

/* 3. The Inner Content (The Child) */
/* This targets your Group block specifically */
.wp-block-accordion-panel > div {
    min-height: 0;
    overflow: hidden;
    
    /* CLOSED STATE: Force padding to 0. 
       This physically removes the 20px residual height. */
    padding-bottom: 0 !important;
    
    /* Start invisible */
    opacity: 0;
    
    /* Animate the padding AND opacity to sync with the grid */
    transition: 
        padding-bottom 0.5s ease-in-out, 
        opacity 0.5s ease-in-out;
}

/* 4. Child Open State */
.wp-block-accordion-item.is-open .wp-block-accordion-panel > div {
    /* OPEN STATE: Restore the 20px padding. 
       The transition above makes this slide from 0 to 20 smoothly. */
    padding-bottom: 20px !important;
    
    /* Fade in */
    opacity: 1;
}

.parallelogram {
  /* Skew along the X-axis by 20 degrees */
  transform: skewX(-20deg);
	overflow: hidden;
}


@media (max-width: 768px) {
	.parallelogram {
	justify-content: center;
	display: flex;
	}
}

/* Counter-skew + scale on descendants — desktop ONLY. On mobile the
   parent parallelogram is reset to identity transform by per-page
   GenerateBlocks CSS (gb-element-XXXX media-query rules), so the
   descendants must also stay un-transformed or they'd appear skewed
   inside a rectangular parent. Production gates this rule the same way. */
@media (min-width: 768px) {
	.parallelogram *
	{
		transform: skewX(20deg) translate(-14%) scale(1.2);
	}
}

/* Universal Block custom-html wrappers don't exist on production's flat
   DOM. They have to be sized down to the parallelogram so the inner
   video doesn't take its intrinsic poster size and overflow the parent.
   width/height applied at all viewport widths; transform:none only on
   desktop because we don't want a transform anyway on mobile. */
.parallelogram .ub-block.ub-custom-html,
.parallelogram .ub-custom-html__content {
	width: 100%;
	height: 100%;
}

@media (min-width: 768px) {
	.parallelogram .ub-block.ub-custom-html,
	.parallelogram .ub-custom-html__content {
		transform: none;
	}
}
/* 1. General Layout & Spacing */
.wpcf7-form p {
    margin-bottom: 24px;
}

/* 2. Label Styling */
.wpcf7-form label {
    font-family: inherit;
    font-weight: 600;
    font-size: 16px;
    color: #000;
    display: block;
    line-height: 1.2;
	    text-align: left;
}

/* --- NEW FIX: Adds space between the label text and the input box --- */
.wpcf7-form-control-wrap {
    display: block;       /* Forces the input to sit on its own line */
    margin-top: 10px;     /* This creates the gap BELOW the text */
}

/* 3. The "Glass" Input Styling (Pale Gray + 3D Shadow) */
.wpcf7-form input:not([type="submit"]):not([type="checkbox"]),
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    color: #333;
    outline: none;
    box-sizing: border-box;
    
    /* Pale Gray Background (Visible but Glassy) */
    background: linear-gradient(135deg, rgba(225, 229, 233, 0.9) 0%, rgba(240, 244, 248, 0.7) 100%);
    
    /* Defined borders for 3D edges */
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    
    border-radius: 15px; 
    
    /* 3D Paper/Glass Shadow */
    box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1), inset 0 0 15px rgba(255, 255, 255, 0.5);
    
 
    transition: all 0.3s ease;
}

/* Focus State */
.wpcf7-form input:not([type="submit"]):focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
    /* Lighter/Whiter on focus */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 100%);
    box-shadow: 
        0 15px 25px -10px rgba(0, 0, 0, 0.15), 
        inset 0 0 20px rgba(255, 255, 255, 0.8);
}

/* 4. Side-by-Side Section */
.side_side {
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.side_side p {
    flex: 1;
    width: 100%;
}

/* 5. Specific Field Tweaks */
.wpcf7-textarea {
    height: 120px;
    resize: vertical;
}

.wpcf7-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("../../uploads/2025/12/arrowdown.svg") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px top 50% !important;
    background-size: 12px auto !important;
    cursor: pointer;
}
/* 6. Checkbox Styling (Matched 3D Pale Gray) */
.mc4wp-checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
}

.mc4wp-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    min-width: 24px;
    min-height: 24px;
    margin-top: 0;
    cursor: pointer;
    
    /* Matches the input pale gray */
    background: linear-gradient(135deg, rgba(225, 229, 233, 0.9) 0%, rgba(240, 244, 248, 0.7) 100%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 6px;
    
    /* Your tweaked shadow */
    box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1), inset 0 0 15px rgba(255, 255, 255, 0.5);
    
    display: grid;
    place-content: center;
    transition: all 0.3s ease;
}

/* THE FIX: Hide the checkmark by default using scale(0) */
.mc4wp-checkbox input[type="checkbox"]::before {
    content: "";
    width: 12px;
    height: 12px;
    
    box-shadow: inset 1em 1em #333; 
    transform-origin: center;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    
    /* Start hidden */
    transform: scale(0); 
    transition: 120ms transform ease-in-out;
}

/* THE FIX: Show the checkmark ONLY when checked */
.mc4wp-checkbox input[type="checkbox"]:checked::before {
    transform: scale(1);
}

/* 7. Center the Submit Button */
.wpcf7-form p:last-of-type,
.wpcf7-form p:has(button) { 
    text-align: center;
    margin-top: 20px;
}

/* 8. Mobile Responsiveness */
@media (max-width: 768px) {
    .side_side {
        flex-direction: column;
        gap: 0;
    }
}

#wpcf7-f327-p1607-o1 > form > p:nth-child(5) > span > label > span
{
	    font-weight: 200;
}

.wpcf7-not-valid-tip
{
	margin-top: 10px;
	font-weight: 200;
}


  .carousel-container {
    position: relative;
    width: 80%;
    height: 100%;
    aspect-ratio: 16 / 9;
    /* Added perspective for 3D effect context */
    perspective: 1000px;
    max-width: 1000px; /* Optional cap for very large screens */
  }

  .carousel {
    position: relative;
    width: 100%;
    height: 100%;
  }

 .carousel-container .card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.6s ease, opacity 0.6s ease;
    opacity: 0;
    z-index: 0;
    background: #000;
  }

  /* Video fills the card */
   .carousel-container .card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* --- Title & Gradient Overlay --- */
   .carousel-container .card-content {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0) 100%);
      padding: 0px 20px 40px 40px;
      z-index: 2;
      color: white;
      pointer-events: none;
  }

   .carousel-container .card-content h3 {
      font-size: 24px;
      font-weight: 600;
      letter-spacing: 0.5px;
      margin-bottom: 5px;
  }

   .carousel-container .card-content p {
      font-size: 14px;
      opacity: 0.8;
      font-weight: 300;
	   margin-bottom: 0px;
  }

  /* Main states */
  .carousel-container .card.active {
    opacity: 1;
    transform: translateX(0) scale(1);
    z-index: 5;
  }

  .carousel-container .card.prev1 {
    opacity: 0.6;
    transform: translateX(-15%) scale(0.85) rotateY(5deg);
    z-index: 4;
  }

  .carousel-container .card.next1 {
    opacity: 0.6;
    transform: translateX(15%) scale(0.85) rotateY(-5deg);
    z-index: 4;
  }

  .carousel-container .card.prev2 { opacity: 0; z-index: 3; }
  .carousel-container .card.next2 { opacity: 0; z-index: 3; }

  .carousel-container .btn {
    position: absolute;
    top: 50%;
    width: 3rem;
    height: 3rem;
    transform: translateY(-50%);
    border-radius: 50%;
    color: white;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s, transform 0.2s;
    user-select: none; /* Prevents highlighting on mobile tap */
    -webkit-tap-highlight-color: transparent;
  }
  @media (min-width: 768px) {
  .carousel-container .btn:hover {
    background: rgba(255, 255, 255, 0.2);
  }
}

  .carousel-container .prev { left: -60px; }
  .carousel-container .next { right: -60px; }

  /* --- MOBILE OPTIMIZATION --- */
  @media (max-width: 768px) {
    .carousel-container {
        width: 95%; /* Use full width on small screens */
    }

    /* Move buttons INSIDE the card so they aren't cut off */
    .carousel-container .prev { left: 10px; } 
    .carousel-container .next { right: 10px; }
    
   .carousel-container .btn {
        /* Add background so button is visible over video */
        background: rgba(0, 0, 0, 0.4); 
        backdrop-filter: blur(4px);
	           margin: 0px;
        padding: 0px;
	   line-height: 1;
    }
	 .carousel-container .card-content
	  {
		   padding: 0px 20px 20px 20px;
	  }

    .carousel-container .card-content h3 {
        font-size: 18px; 
    }
    
    /* Adjust transforms so side cards don't overlap too much on narrow screens */
    .carousel-container .card.prev1 {
        transform: translateX(-10%) scale(0.85) rotateY(5deg);
    }
    .carousel-container .card.next1 {
        transform: translateX(10%) scale(0.85) rotateY(-5deg);
    }

  }

/*
span.wp-block-navigation-item__label:hover {
    text-shadow: white 0px 0px 7px;
}*/


span.wp-block-navigation-item__label:hover {
    transform: scale(1.1);
}
/* 1. The Logic Class 
   Add this to any element you want to track.
*/
.mouse-tracker {
  overflow: hidden;   /* Keeps the glow inside the border */
  isolation: isolate;
  contain: paint;
}

/* We wrap the entire glow logic in this media query.
   It checks: "Does the device support hovering?"
   If yes (Desktop/Mouse): The code runs.
   If no (Mobile/Tablet Touch): The code is ignored.
*/
@media (hover: hover) {

  /* 2. The Visual Class (The White Glow) */
  .white-hover-glow::after {
    content: "";
    position: absolute;
    inset: 0;
    
    /* Mix-blend-mode and Z-Index */
    mix-blend-mode: screen; 
    z-index: 10; 
    
    /* Ensure clicks pass through */
    pointer-events: none;
    
    /* Your gradient logic */
    background: radial-gradient(
      circle 150px at var(--x, 50%) var(--y, 50%), 
      rgba(255, 255, 255, 0.15) 0%, 
      transparent 60%
    );
    
    /* Start invisible */
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: inherit;
    transform: translateZ(0);
    will-change: opacity, background;
  }

  /* Only trigger opacity change on supported devices */
  .white-hover-glow:hover::after {
    opacity: 1;
  }
}

.white-outline-button
{
	align-items: center;
    background-color: rgba(255, 255, 255, 0);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-style: solid;
    border-left-width: 1px;
    border-right-style: solid;
    border-right-width: 1px;
    border-top-style: solid;
    border-top-width: 1px;
    color: #ffffff;
    display: inline-flex;
    font-family: Silka;
    font-size: 1rem;
    font-weight: 300;
    text-decoration: none;
    border-radius: 100px;
    padding: 0.5rem 1rem;
	cursor: pointer;
	    padding: 10px 35px;
}

.white-outline-button:hover
{
	align-items: center;
    background-color: white!important;
    border: white 1px solid; 
    border-top-width: 1px;
    color: black!important;
    display: inline-flex;
    font-family: Silka;
    font-size: 1rem;
    font-weight: 300;
    text-decoration: none;
    border-radius: 100px;
  	    padding: 10px 35px;
}

/* ────────────────────────────────────────────────────────────────────────
   RaZIR product-detail page styling. All section-scoped so theme CSS
   handles spacing/typography instead of inline style attributes. The
   benefit: every wp:heading and wp:paragraph remains a clean,
   Gutenberg-validatable block with just a className (no inline style
   attribute that would trigger "invalid content" warnings).
   ──────────────────────────────────────────────────────────────────────── */

/* Eyebrow tag used above every section heading. Bumped weight + size
   and brightened the gradient ends so the small caps stay legible — the
   default .green-blue-text gradient dips into a dark green that disappears
   on a black background at small sizes. */
.product-page-eyebrow {
	font-size: 14px !important;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin-bottom: 10px;
}

/* Brighter gradient just for the eyebrow — keeps the mint family but
   pulls the end-stops up so the first/last letters don't read as muddy. */
.product-page-eyebrow.green-blue-text {
	background: linear-gradient(90deg, #5EEDB6 0%, #1DE7CE 50%, #88C6E5 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Hero */
.product-page-hero h2 { margin: 0 0 20px 0; }
.product-page-hero p.product-page-hero-lead { max-width: 650px; margin: 10px auto 0 auto; padding-bottom: 32px; }

/* Sectors */
.product-page-sectors h2 { max-width: 760px; margin: 0 0 50px 0; }
.product-page-sector-card p { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.75); }

/* How it works */
.product-page-how h2 { max-width: 760px; margin: 0 0 60px 0; }
.product-page-how .glass-flat h3 { margin: 0 0 12px 0; }
.product-page-how .glass-flat p:not(.product-page-step-label) { margin: 0; color: rgba(255, 255, 255, 0.75); }
.product-page-step-label {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 2px;
	margin: 0 0 8px 0;
}

/* Featured deployment */
.product-page-featured h2 { margin: 0 0 20px 0; }
.product-page-featured > div:first-child > p { margin: 0 0 28px 0; }

/* Variants */
.product-page-variants h2 { max-width: 760px; margin: 0 0 16px 0; }
.product-page-variants > p.product-page-section-intro { max-width: 680px; margin: 0 0 50px 0; color: rgba(255, 255, 255, 0.7); }
.product-page-variants .glass-flat h3 { margin: 0 0 8px 0; }
.product-page-variants .glass-flat p { margin: 0 0 16px 0; color: rgba(255, 255, 255, 0.75); }
.product-page-variants .glass-flat p:last-child {
	margin: 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.55);
}
.product-page-variant-label {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 2px;
	margin: 0 0 8px 0;
}

/* Integration */
.product-page-integration h2 { margin: 0 0 16px 0; }
.product-page-integration > p.product-page-section-intro { max-width: 680px; margin: 0 0 36px 0; color: rgba(255, 255, 255, 0.8); }

/* Related products */
.product-page-related h2 { max-width: 760px; margin: 0 0 50px 0; }
.product-page-related .related-card h3 { margin: 0 0 8px 0; font-size: 18px; color: #fff; }
.product-page-related .related-card p { margin: 0; color: rgba(255, 255, 255, 0.7); font-size: 14px; }

/* FAQ */
.product-page-faq h2 { margin: 0 0 40px 0; }

/* Closing CTA */
.product-page-cta h2 { margin: 0 0 16px 0; }
.product-page-cta p.product-page-cta-copy { max-width: 620px; margin: 0 0 32px 0; color: rgba(255, 255, 255, 0.8); }

/* ────────────────────────────────────────────────────────────────────────
   RaZIR product-detail page — TABLET OPTIMISATION (768–1024px).
   Sectors and Related are 4-col on desktop. At tablet widths each tile
   would compress to ~170px and become unreadable, so collapse to 2×2.
   How-it-works and Variants stay 3-col (still ~230px each, readable).
   ──────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {

	.product-page-sectors > .ub-block:last-child,
	.product-page-related > .ub-block:last-child {
		--ub-grid-columns: repeat(2, minmax(0, 1fr)) !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/* Slightly tighter vertical rhythm on tablets so the longer page reads
	   without excessive whitespace, but keep more than mobile's 40/40. */
	.product-page-sectors,
	.product-page-how,
	.product-page-featured,
	.product-page-variants,
	.product-page-integration,
	.product-page-related,
	.product-page-faq,
	.product-page-cta {
		padding-top: 50px !important;
		padding-bottom: 50px !important;
	}
}

/* ────────────────────────────────────────────────────────────────────────
   RaZIR product-detail page — MOBILE OPTIMISATION (≤767px).
   Collapse every multi-column grid to a single column, reduce section
   padding to claim back screen real-estate, scale down section headings,
   and stack the closing CTA buttons. Universal Block grids resolve their
   columns via the --ub-grid-columns custom property, so overriding that
   variable cascades into the inline `grid-template-columns: var(...)`.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

	/* The Featured Deployment section is itself a 2-col grid (text + image). */
	.product-page-featured {
		--ub-grid-columns: 1fr !important;
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}

	/* For every other section, the grid is the LAST inner ub-element child
	   (the cards container that sits after the eyebrow + heading). Override
	   its grid-template-columns to a single column. */
	.product-page-sectors > .ub-block:last-child,
	.product-page-how-grid,
	.product-page-variants > .ub-block:last-child,
	.product-page-related > .ub-block:last-child {
		--ub-grid-columns: 1fr !important;
		grid-template-columns: 1fr !important;
	}

	/* Tighter horizontal padding on all body sections so content uses more
	   of the viewport. */
	.product-page-hero,
	.product-page-sectors,
	.product-page-how,
	.product-page-featured,
	.product-page-variants,
	.product-page-integration,
	.product-page-related,
	.product-page-faq,
	.product-page-cta,
	.product-page-hero-media-wrap {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}

	/* Reduce vertical padding on body sections (60/60 → 40/40). */
	.product-page-sectors,
	.product-page-how,
	.product-page-featured,
	.product-page-variants,
	.product-page-integration,
	.product-page-related,
	.product-page-faq,
	.product-page-cta {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}

	/* Hero gets less top padding on mobile (no double-stack with floating nav). */
	.product-page-hero {
		padding-top: 96px !important;
		padding-bottom: 0 !important;
		margin-bottom: 32px !important;
	}

	.product-page-hero p.product-page-hero-lead {
		padding-bottom: 20px !important;
	}

	.product-page-hero-media-wrap {
		padding-bottom: 24px !important;
	}

	/* Section headings — bring down from desktop scale */
	.product-page-sectors h2,
	.product-page-how h2,
	.product-page-featured h2,
	.product-page-variants h2,
	.product-page-integration h2,
	.product-page-related h2 {
		font-size: 1.55rem !important;
		margin-bottom: 28px !important;
		max-width: 100% !important;
	}

	.product-page-variants > p.product-page-section-intro,
	.product-page-integration > p.product-page-section-intro {
		margin-bottom: 28px !important;
	}

	/* Sector / variant / how-it-works card padding — bigger paddings make
	   small cards on mobile look hollow. */
	.product-page-sector-card,
	.product-page-variants .glass-flat,
	.product-page-how .glass-flat {
		padding: 28px 24px !important;
	}

	/* Featured deployment — image PLACEHOLDER takes too much room as a
	   square on narrow screens; trim it down. The :not() guard means the
	   forced ratio only applies to the empty placeholder card; when there's
	   real photo or video content the slot sizes itself naturally so the
	   image isn't letterboxed inside a too-tall container. */
	.product-page-featured-image:not(.product-page-featured-image--has-photo):not(.product-page-featured-image--has-video) {
		aspect-ratio: 16 / 10 !important;
	}

	/* Related-product cards — keep the chevron from clipping the description
	   text now that the cards are wider per row. */
	.product-page-related .related-card {
		padding-bottom: 56px !important;
	}

	/* Closing CTA — stack buttons vertically and full-width them */
	.product-page-cta > .ub-block:last-child {
		flex-direction: column !important;
		gap: 12px !important;
		width: 100% !important;
	}

	.product-page-cta > .ub-block:last-child > .ub-link {
		justify-content: center !important;
		width: 100% !important;
		max-width: 320px !important;
	}

	/* Integration chip text wraps cleanly */
	.product-page-integration-chips {
		gap: 10px !important;
	}

	.product-page-integration-chips li {
		font-size: 14px !important;
		padding: 10px 18px !important;
	}
}

/* Sector tile icons — Universal Block icons default to 24px via --ub-icon-size.
   Bump to 40px and give them a bottom margin so they read as the card opener
   rather than crowding the heading. */
.product-page-sector-icon {
	--ub-icon-size: 40px;
	margin-bottom: 20px;
}

/* Sector tile titles on product-detail pages. Single-word titles make these
   visually consistent without needing a min-height hack. */
.product-page-sector-title {
	font-size: 26px;
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 12px 0;
}

.product-page-sector-card {
	position: relative;
}

/* Checkmark list — used in the featured-deployment outcome bullets. Authors
   can edit it as a normal Gutenberg list (wp:list with className
   "razir-check-list"); the green check glyph is drawn via ::before so the
   markup stays clean and editable. */
.product-page-check-list {
	list-style: none !important;
	padding: 0;
	margin: 0;
}

.product-page-check-list li {
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 10px;
	padding-left: 26px;
	position: relative;
}

.product-page-check-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: #0dffae;
	font-weight: 700;
}

/* Step diagram placeholder — used across product-detail "How it works"
   step cards. A subtle green-tinted gradient panel with bottom-of-card
   alignment, so each card has a consistent visual rhythm. The
   margin-top:auto pushes the diagram to the bottom of the flex column
   inside .glass-flat so every step's diagram lines up horizontally even
   when the descriptive paragraphs have different lengths. */
.product-page-step-diagram {
	aspect-ratio: 16 / 10;
	background-image: linear-gradient(135deg, rgba(13, 255, 174, 0.08), rgba(13, 255, 174, 0.02));
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 12px;
	/* Fixed top gap so the diagram sits clearly below the descriptive
	   paragraph. Previously `margin-top: auto` pushed the diagram to the
	   bottom of an equal-height grid card; with the new horizontal-scroll
	   layout cards size to content, so `auto` collapses to zero and the
	   diagram hugs the paragraph. */
	margin-top: 28px;
	overflow: hidden;
}

.product-page-step-diagram p {
	color: rgba(255, 255, 255, 0.4);
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin: 0;
}

/* When a step diagram has been filled with real media (an SVG illustration
   or an image), drop the dashed-glass placeholder treatment and the fixed
   aspect ratio — let the SVG's own viewBox dictate its height. Force
   full-width so the container stretches inside the parent card's
   align-items:flex-start flex column (otherwise it sits at intrinsic width
   on mobile and looks off-centre). */
.product-page-step-diagram--has-media {
	aspect-ratio: auto;
	background-image: none;
	border-color: rgba(255, 255, 255, 0.08);
	padding: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	align-self: stretch;     /* override parent card's flex-start alignment */
	box-sizing: border-box;
}

.product-page-step-diagram--has-media > .ub-block,
.product-page-step-diagram--has-media .product-page-step-diagram-img {
	width: 100%;
	max-width: 100%;
	display: block;
	margin: 0 auto;
}

/* The SVG fills the card width and self-sizes its height via the viewBox
   aspect ratio (preserveAspectRatio="xMidYMid meet" keeps it centred). */
.product-page-step-diagram--has-media svg {
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
	max-width: 100%;
}

/* Legacy image-based diagrams (no longer used on RaZIR, but kept in case a
   step diagram references a raster image via wp:universal-block/image). */
.product-page-step-diagram-img img {
	display: block;
	width: 100%;
	height: auto;
	background: #ffffff;
	border-radius: 6px;
	padding: 4px;
	margin: 0 auto;
}

/* ─────────────────────────────────────────────────────────────────────
   HERO ILLUSTRATION — MIMSO (before/after point-cloud videos)
   Each side: a text title above a .glass-flat card that holds the video
   edge-to-edge. Stacks vertically on mobile.
   ───────────────────────────────────────────────────────────────────── */
.product-page-mimso-hero {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr 1fr;
	width: 100%;
	box-sizing: border-box;
}

.product-page-mimso-hero__panel {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.product-page-mimso-hero__title {
	font-family: system-ui, sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-align: center;
	text-transform: uppercase;
}

.product-page-mimso-hero__glass {
	position: relative;
	overflow: hidden;
	border-radius: 15px;
	aspect-ratio: 320 / 340;        /* matches the ffmpeg crop output */
	padding: 0;
	background-color: #000;          /* fallback while the video loads */
}

.product-page-mimso-hero__glass video {
	position: relative;              /* sit above the .glass-flat ::before noise layer */
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 15px;
}

@media (max-width: 700px) {
	.product-page-mimso-hero {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* ─────────────────────────────────────────────────────────────────────
   HERO ILLUSTRATION — RaZIR
   Three SVG fragments laid out via CSS Grid:
     desktop:  driver-POV scene strip on top spanning both columns,
               "without" + "with" panels side-by-side below.
     mobile:   scene strip on top, panels stacked vertically.
   The chart sub-heading inside each panel labels the BEV plot as a
   "RADAR POINT CLOUD" so the reader doesn't have to infer it.
   ───────────────────────────────────────────────────────────────────── */
.product-page-hero-illustration {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"scene scene"
		"without with";
	padding: 12px 8px;
	border-radius: 15px;
	background: #0a0a0a;
	width: 100%;
	box-sizing: border-box;
}

.product-page-hero-illustration__scene           { grid-area: scene; }
.product-page-hero-illustration__panel--without  { grid-area: without; }
.product-page-hero-illustration__panel--with     { grid-area: with; }

.product-page-hero-illustration__panel {
	/* No background tint here — the parent glass card provides the surface
	   colour. Keeping a tint of its own made each panel read as a slightly
	   lighter rectangle than the scene strip above. */
	border-radius: 8px;
	padding: 12px 8px;
	min-width: 0;          /* allow shrink in grid */
}

.product-page-hero-illustration svg {
	width: 100%;
	height: auto;
	display: block;
	max-width: 100%;
}

@media (max-width: 700px) {
	.product-page-hero-illustration {
		grid-template-columns: 1fr;
		grid-template-areas:
			"scene"
			"without"
			"with";
		gap: 12px;
		padding: 12px 6px;
	}
}

/* Featured-deployment image placeholder — same surface treatment as the
   step diagrams but at 4:3 aspect ratio. */
.product-page-featured-image {
	aspect-ratio: 4 / 3;
	background-image: linear-gradient(160deg, rgba(13, 255, 174, 0.10), rgba(13, 255, 174, 0.02));
	background-color: #0a0a0a;
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
	overflow: hidden;
}

.product-page-featured-image p {
	color: rgba(255, 255, 255, 0.45);
	font-size: 12px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin: 0;
}

/* Featured deployment with real media — drop the dashed placeholder
   treatment so the media fills the panel edge-to-edge, and shift the
   aspect ratio to 16:9 for video. */
.product-page-featured-image--has-video {
	aspect-ratio: 16 / 9;
	background-image: none;
	padding: 0;
}

/* Featured-deployment photo variant (e.g. the MIMSO 138 PCB shot) — let
   the image dictate height rather than forcing the 4:3 placeholder ratio,
   and drop the placeholder gradient since the photo carries the panel. */
.product-page-featured-image--has-photo {
	aspect-ratio: auto;
	background-image: none;
	background-color: transparent;
	padding: 0;
}

.product-page-featured-image--has-photo > .ub-block,
.product-page-featured-image--has-photo .product-page-featured-pcb {
	width: 100%;
	display: block;
}

.product-page-featured-image--has-photo img {
	display: block;
	width: 100%;
	height: auto;
}

.product-page-featured-image--has-video > .ub-block,
.product-page-featured-image--has-video .product-page-featured-video {
	width: 100%;
	height: 100%;
	display: block;
}

.product-page-featured-image--has-video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Integration compatibility chips. The container is a flex-wrap row;
   list-style:none removes the browser's default disc bullets that would
   otherwise appear when the row wraps to a column on narrow viewports. */
.product-page-integration-chips {
	list-style: none !important;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

/* Integration compatibility chips — pill-shaped glass-flat treatment.
   The dark base needs to be slightly visible against the page (which is
   pure black), so we lift it to a lighter shade than the cards use. The
   gradient + border + shadow give the chip its glass feel. Padding and
   border-radius are what make the chip a pill rather than bare text. */
.product-page-integration-chips li {
	background-color: rgba(255, 255, 255, 0.04);
	background-image: linear-gradient(135deg, rgb(0 0 0 / 1%) 0%, rgb(255 255 255 / 5%) 100%);
	backdrop-filter: blur(20px) saturate(120%);
	-webkit-backdrop-filter: blur(20px) saturate(120%);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-bottom-color: rgba(255, 255, 255, 0.1);
	border-right-color: rgba(255, 255, 255, 0.1);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25), inset 0 0 16px rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.95);
	padding: 12px 22px;
	border-radius: 100px;
	font-size: 0.95rem;
	line-height: 1.2;
	display: inline-flex;
	align-items: center;
}

/* Lock the /products/ card "Learn more →" link to white on hover. Without
   this it inherits the default ub-link hover color, which shifts. */
.razir-card-learn-more,
.razir-card-learn-more:hover,
.razir-card-learn-more:focus,
.razir-card-learn-more:active {
	color: #ffffff !important;
	text-decoration: none !important;
}

/* Smooth expand/collapse on the footer location accordions.
   Uses ::details-content + interpolate-size: allow-keywords so the
   browser can transition height between 0 and auto. Chrome 131+ / Safari TP.
   Falls back to instant toggle on browsers without support. */
.provizio-footer-accordion-item {
	interpolate-size: allow-keywords;
}

.provizio-footer-accordion-item::details-content {
	block-size: 0;
	overflow: hidden;
	opacity: 0;
	transition: block-size 0.35s ease, opacity 0.35s ease, content-visibility 0.35s allow-discrete;
}

.provizio-footer-accordion-item[open]::details-content {
	block-size: auto;
	opacity: 1;
}

/* Related-product cards on product-detail pages. The whole card is a link;
   these rules make that affordance obvious — subtle hover lift, brightening
   border, and a chevron that slides in on hover. */
.related-card {
	position: relative;
	transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.related-card::after {
	content: "→";
	position: absolute;
	right: 20px;
	bottom: 18px;
	color: #0dffae;
	font-size: 18px;
	opacity: 0.55;
	transform: translateX(0);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.related-card:hover,
.related-card:focus-visible {
	transform: translateY(-3px);
	border-color: rgba(13, 254, 173, 0.45);
	background-color: rgba(13, 254, 173, 0.04);
}

.related-card:hover::after,
.related-card:focus-visible::after {
	opacity: 1;
	transform: translateX(4px);
}

/* Product-detail hero heading — matches the size/weight used on /products/
   (gb-text-fb02ac7c) and similar section heros: 3rem, weight 600. */
.product-hero-heading {
	font-size: 3rem;
	font-weight: 600;
	margin-bottom: 10px;
}

@media (max-width: 767px) {
	.product-hero-heading {
		font-size: 2rem;
		text-align: center;
	}
}

/* Container to center the buttons */
.gb-scroll-controls {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    padding-bottom: 20px;
}

/* Button Styling */
.gb-nav-btn {
   border-radius: 50% !important;
    width: 50px;
    height: 50px;
    padding: 0;
    
    /* Flexbox centers the Unicode character */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Typography adjustments for the arrows */
    font-size: 24px;   /* Matches the previous SVG size */
    line-height: 1;
    font-family: sans-serif; /* Ensures clean rendering */
    padding-bottom: 2px; /* Slight optical adjustment to lift the character */
    
    /* Inherit white color */
    cursor: pointer;
    color: white;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s, transform 0.2s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Ensure the glass noise texture fits the circle */
.gb-nav-btn::before {
    border-radius: 50%;
}

/* Minimal Hover - Matched to your carousel */
.gb-nav-btn:hover {
       background: rgba(255, 255, 255, 0.2);
}

/* Mobile Tweak */
@media (max-width: 768px) {
    .gb-nav-btn {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
}


/* Main Container */
    .gallery-container {
        width: 100%;
        overflow: hidden;
        position: relative;
        padding: 40px 0;
        background: #000;
        /* Fixes Safari z-index bug with gradients */
        z-index: 1; 
    }

    /* Edge Fade Effects */
    .gallery-container::before,
    .gallery-container::after {
        content: "";
        position: absolute;
        top: 0;
        width: 15%;
        height: 100%;
        z-index: 2;
        pointer-events: none;
    }

    .gallery-container::before {
        left: 0;
        background: linear-gradient(to right, #000 0%, transparent 100%);
    }

    .gallery-container::after {
        right: 0;
        background: linear-gradient(to left, #000 0%, transparent 100%);
    }

    /* Rows */
    .gallery-row {
        display: flex;
        width: 100%;
        margin-bottom: 24px;
        overflow: hidden;
        position: relative;
        /* Ensure the row doesn't collapse */
        min-height: 350px; 
    }

/* --- THE TRACK FIX --- */
/* Remove the static transform here. Let the animation handle the movement. */
.gallery-track {
    display: flex;
    gap: 20px;
    width: max-content; /* Allows track to be as wide as it needs */
    padding-right: 20px; /* Logic fix for the gap */
    
    /* Only use will-change. Do NOT add transform: translate3d here. */
    will-change: transform;
	transform: translateZ(0); 
    perspective: 1000px;
}

    /* Alignments */
    #track-1 { align-items: flex-end; }
    #track-2 { align-items: flex-start; }

/* --- THE IMAGE FIX --- */
/* Remove 3D transforms from images. Only the track needs to be 3D. */
  /* Update this block */
.gallery-track img {
    height: 350px;
    width: auto;
    border-radius: 15px;
    
    /* Ensure no residual blur is killing us */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    user-select: none; 
    pointer-events: none;
    
    /* FIX: Force this image to be its own layer to prevent the 
       "Giant Texture" limit bug on the parent track */
    transform: translateZ(0); 
    -webkit-transform: translateZ(0);
    
    /* Ensure backface is hidden on the image itself too */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

    /* Every second image is smaller */
    .gallery-track img:nth-child(even) {
        height: 290px;
        opacity: 0.8;
    }

    /* Animations */
    .scroll-left {
        /* Added translateZ(0) to force GPU ONLY during animation */
        animation: scrollLeft 90s linear infinite;
      
    }

    .scroll-right {
        animation: scrollRight 90s linear infinite;
    
    }

    @keyframes scrollLeft {
        0% { transform: translate3d(0, 0, 0); }
        100% { transform: translate3d(-50%, 0, 0); }
    }

    @keyframes scrollRight {
        0% { transform: translate3d(-50%, 0, 0); }
        100% { transform: translate3d(0, 0, 0); }
    }

    /* Mobile Adjustments */
    @media (max-width: 768px) {
        .gallery-track img { height: 180px; }
        .gallery-track img:nth-child(even) { height: 140px; }
        .gallery-row { margin-bottom: 15px; min-height: 180px; }
    }
/*
.paper-effect {
  position: relative;
  
  max-width: 800px;
  min-height: 500px;
  margin: 50px auto;
  background-color: #fdfbf7; 
  padding: 40px 60px;
  color: #2c2c2c;
  font-family: 'Georgia', serif;
  line-height: 1.6;
  box-sizing: border-box;
  border-radius: 2px;

  background-image: linear-gradient(
    to right, 
    rgba(0,0,0,0.02) 1px, 
    transparent 1px
  ), linear-gradient(
    to bottom, 
    rgba(0,0,0,0.02) 1px, 
    transparent 1px
  );
  background-size: 20px 20px;

  box-shadow: 

    0 1px 1px rgba(0,0,0,0.15), 
    

    0 10px 0 -5px #ebe8e1, 
    0 10px 1px -4px rgba(0,0,0,0.15), 
    

    0 20px 0 -10px #ebe8e1, 
    0 20px 1px -9px rgba(0,0,0,0.15);
}

.paper-effect h1, .paper-effect h2, .paper-effect h3, .paper-effect h4, .paper-effect h5, .paper-effect h6
{
	color: black;
}
*/
@media (max-width: 767px) {
	

.paper-effect h1, .paper-effect h2, .paper-effect h3 
	{
		margin-top: 20px!important;
	}
}

.paper-effect {
  position: relative;
  width: 90%;
  max-width: 800px;
  min-height: 500px;
  margin: 80px auto;
  
  /* 1. The Fix: Pure, Warm "Bond Paper" Color */
  background-color: #fdfbf7; 
  background-image: none; /* Removed the dots */
  
  /* 2. Typography */
  color: #2c2c2c;
  font-family: 'Georgia', 'Times New Roman', serif;
  line-height: 1.8;
  font-size: 1.15rem;

  padding: 60px 80px;
  box-sizing: border-box;
  border-radius: 2px; /* Slight softening of corners */

  /* 3. Deep "Stacked" Shadows 
     These are crucial. Since the paper has no texture, 
     the shadows do all the work to make it look physical.
  */
  box-shadow: 
    0 1px 2px rgba(0,0,0,0.1),       /* Contact shadow */
    0 10px 0 -5px #eee,              /* 1st Sheet (Edge) */
    0 10px 2px -4px rgba(0,0,0,0.1), /* 1st Sheet (Shadow) */
    0 20px 0 -10px #eee,             /* 2nd Sheet (Edge) */
    0 20px 2px -9px rgba(0,0,0,0.1); /* 2nd Sheet (Shadow) */
}

/* Header Styles */
.paper-effect h1, 
.paper-effect h2, 
.paper-effect h3 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #111;
  letter-spacing: -0.02em;
  margin-top: 2em;
}

.paper-effect h1 {

  font-size: 2.5rem;
  border-bottom: 2px solid #111; /* Adds to the "Technical" feel */
  padding-bottom: 1rem;
}


.paper-effect figcaption
{
	color: black;
}
.share-widget {
  display: flex;
  align-items: center;
  gap: 24px; /* Space between icons */
  padding: 10px 0;
}

.share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #ffffff; /* White icons */
  background: transparent;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
  position: relative; /* Needed for tooltip positioning */
  padding: 0;
  text-decoration: none; /* Removes underline from <a> tags */
}

/* Make SVG fill the container */
.share-btn svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Hover Effects */
.share-btn:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}

/* --- "Copied" Tooltip Styles --- */
.copy-tooltip {
  visibility: hidden;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 4px 8px;
  position: absolute;
  z-index: 1;
  bottom: 140%; /* Position above the icon */
  left: 50%;
  transform: translateX(-50%);
  
  /* Fade in animation */
  opacity: 0;
  transition: opacity 0.3s;
  font-family: sans-serif;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
}

/* Little arrow pointing down from tooltip */
.copy-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

/* Class added by JS to show tooltip */
.share-btn.copied .copy-tooltip {
  visibility: visible;
  opacity: 1;
}

.reading-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px; /* Space between icon and text */
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  color: white; /* Subtle grey */
}

.reading-time-badge svg {
  width: 16px;
  height: 16px;
  opacity: 1;
}





.post-template-default, .whitepaper-template-default {
  background-color: #050505; /* Deep black background */
  color: #fff;
  min-height: 100vh;
  margin: 0;
  position: relative; /* Needed for the pseudo-element to position correctly */
}

/* This creates the grid layer separately from your content */
.post-template-default::before, .whitepaper-template-default::before {
  content: "";
  position: fixed; /* Keeps the grid in place while you scroll */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Puts it BEHIND your content */
  
  /* 1. The Technical Grid Pattern */
  background-image: 
    linear-gradient(to right, #1f1f1f 1px, transparent 1px),
    linear-gradient(to bottom, #1f1f1f 1px, transparent 1px);
  background-size: 40px 40px;

  /* 2. The Vignette Mask */
  mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
  
  /* Optional: slightly lower opacity to ensure it's subtle */
  opacity: 0.6; 
}


.animated-multi-colour-blur
{
	position: relative; /* Essential for positioning the glow */
    z-index: 1; /* Ensures text stays on top */
    
    /* Your original styles */
    font-weight: 600;
    margin-bottom: 0px;
    margin-top: 0px;
    padding: 20px;
    
    /* The Animated Background */
    background-image: linear-gradient(90deg, #20B252, #1DE7CE, #639ACD, #20B252); /* Added extra color for smoother loop */
    background-size: 300% 300%; /* Makes background large so it can move */
    animation: gb-gradient-move 8s ease infinite; /* The movement engine */
	z-index: 9;
	
}
/*
.animated-multi-colour-blur::before {
    content: "";
    position: absolute;
    top: -5px;   
    left: -100px;
    right: -100px;
    bottom: -5px;
    z-index: -1;  
    

    background-image: linear-gradient(90deg, #20B252, #1DE7CE, #639ACD, #20B252);
    background-size: 300% 300%;
    animation: gb-gradient-move 4s ease infinite;
    

    filter: blur(34px);
    opacity: 0.5;

}*/

/* 1. Define the animation keyframes */
@keyframes gb-gradient-move {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
#footerbg > div.gb-element-389cc346.glass-flat
{
	border-left: 0px;
	border-right: 0px;
}

.square-video-wrapper {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: black;
    display: flex;
    align-self: center;
    z-index: -1;
    bottom: 0px;
    filter: contrast(1.2);
    height: 100%;
	background: linear-gradient(0deg, #00000073 0%, transparent 20%);
}

.square-video-wrapper video {
	position: absolute;
    width: calc(100% + 20px);
    bottom: -37px;
    left: 50%;
	right: auto;
	top: auto;
	transform: translateX(-50%);
    object-fit: cover;
    display: block;
	mix-blend-mode: darken;
}

/* Cookie banner overrides */

body .cky-consent-container .cky-consent-bar
{
	    background: linear-gradient(135deg, rgb(0 0 0 / 1%) 0%, rgb(255 255 255 / 3%) 100%)!important;
    backdrop-filter: blur(40px) saturate(160%);
    -webkit-backdrop-filter: blur(40px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.3)!important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1)!important;
    border-right: 1px solid rgba(255, 255, 255, 0.1)!important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.05)!important;
    position: relative;
	    margin: 10px;
    border-radius: 15px;
}

.cky-consent-bar::before
{
	content: " ";
    display: block;
    position: absolute;
    width: 100vw;
    left: -11px;
    height: 100vh;
    bottom: -11px;
    background: #00000099;
    z-index: -1;
}

body > div.cky-consent-container.cky-classic-bottom button.cky-btn.cky-btn-accept
{
	  /* Typography & Shape */
  font-family: "Lato";
  font-weight: 400;
  font-size: 1.2rem;
  color: white;
  text-decoration: none;
  padding: 10px 35px;
  border-radius: 50px;
  
  /* Layout basics */
  display: inline-block;
  position: relative;
  cursor: pointer;
  
  /* Smooth transitions for the press effect */
  transition: transform 0.1s ease-out, box-shadow 0.2s ease, border-color 0.2s;

  /* 4. The Shiny Outline */
  border: 1px solid rgba(255, 255, 255, 0.2)!important;
  border-top-color: rgba(255, 255, 255, 0.5)!important;
  border-bottom-color: rgba(255, 100, 100, 0.1)!important;

  /* The "Flat-ish" Shadow: Soft and diffused, not solid */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 
              0 1px 3px rgba(0, 0, 0, 0.1)!important;
}



body > div.cky-consent-container.cky-classic-bottom button.cky-btn.cky-btn-accept:hover {
  /* 2. HOVER STATE */
 
    
  /* Keep your hover shadow logic here */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15), 
              0 6px 6px rgba(0, 0, 0, 0.1)!important;
	opacity:1!important;
}



body > div.cky-consent-container.cky-classic-bottom button.cky-btn.cky-btn-accept:active{
  /* 1. Scale down: This mimics the button moving away from you (pressed in) */
  transform: scale(0.97);

  /* 2. INSET Shadow: This makes the edges look like they are caving in */
  box-shadow: inset 0px 4px 10px rgba(0, 0, 0, 0.2)!important;
  background-color: #ff4d57;
  /* 3. Dim the border to reduce sheen */
  border-top-color: rgba(255, 255, 255, 0.2)!important;
  border-bottom-color: rgba(255, 255, 255, 0.05)!important;
	opacity:1!important;
}

body > div.cky-consent-container.cky-classic-bottom > div.cky-consent-bar > div > p
{
	    margin-top: 20px;

	font-family: "Silka";
	background: linear-gradient(
90deg, #20B252, #1DE7CE, #639ACD);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	
}
@media (max-width: 767px) {
body > div.cky-consent-container.cky-classic-bottom > div.cky-consent-bar > div
{
	margin-bottom: 10px;
	flex-flow: wrap;
    position: relative;
	display: flex;
}
	
	
}

@media (max-width: 576px) {
	.cky-consent-container
	{
		max-height: 100%;
	}
}

body > div.cky-consent-container.cky-classic-bottom > div.cky-consent-bar > div > div > div.cky-notice-des > p
{
	margin-bottom: 10px;
}

body > div.cky-consent-container.cky-classic-bottom.cky-consent-bar-expand > div.cky-preference-wrapper
{
	background: black;
}
body > div.cky-consent-container.cky-classic-bottom.cky-consent-bar-expand > div.cky-preference-wrapper > div > div.cky-footer-wrapper > span
{
	display: none;
}
body > div.cky-consent-container.cky-classic-bottom.cky-consent-bar-expand > div.cky-preference-wrapper > div > div.cky-footer-wrapper > div > button.cky-btn.cky-btn-preferences
{
	border-radius: 100px;
}

.toggle-tab sup
{
	margin-top: -8px;
}

/* 1. Enable smooth scrolling site-wide */
html {
  scroll-behavior: smooth;
}

/* 2. Add the offset to any element that has an ID */
[id] {
  scroll-margin-top: 100px; /* Adjust this to your header height */
}

/* Font optimisations */
@font-face {
  font-family: 'Silka';
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src: url('../../uploads/fonts/silka-thin-webfont.woff2') format('woff2'), url('../../uploads/fonts/silka-thin-webfont.woff') format('woff');
}

@font-face {
  font-family: 'Silka';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url('../../uploads/fonts/silka-extralight-webfont.woff2') format('woff2'), url('../../uploads/fonts/silka-extralight-webfont.woff') format('woff');
}

@font-face {
  font-family: 'Silka';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('../../uploads/fonts/silka-light-webfont.woff2') format('woff2'), url('../../uploads/fonts/silka-light-webfont.woff') format('woff');
}

@font-face {
  font-family: 'Silka';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../../uploads/fonts/silka-regular-webfont.woff2') format('woff2');
}

@font-face {
  font-family: 'Silka';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('../../uploads/fonts/silka-medium-webfont.woff2') format('woff2'), url('../../uploads/fonts/silka-medium-webfont.woff') format('woff');
}

@font-face {
  font-family: 'Silka';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('../../uploads/fonts/silka-semibold-webfont.woff2') format('woff2'), url('../../uploads/fonts/silka-semibold-webfont.woff') format('woff');
}

@font-face {
  font-family: 'Silka';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../../uploads/fonts/silka-bold-webfont.woff2') format('woff2'), url('../../uploads/fonts/silka-bold-webfont.woff') format('woff');
}

@font-face {
  font-family: 'Silka';
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url('../../uploads/fonts/silka-black-webfont.woff2') format('woff2'), url('../../uploads/fonts/silka-black-webfont.woff') format('woff');
}

@font-face {
  font-family: 'Lato';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('../../uploads/fonts/Lato-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Lato';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../../uploads/fonts/Lato-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Lato';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../../uploads/fonts/Lato-Bold.ttf') format('truetype');
}

/* 1. Create a matched fallback for Silka (Headings) */
@font-face {
  font-family: 'Silka-Fallback';
  src: local('Arial');
  ascent-override: 95%;
  descent-override: 20%;
  line-gap-override: 0%;
  size-adjust: 102%; /* Silka is usually slightly wider than Arial */
}

/* 2. Create a matched fallback for Lato (Body) */
@font-face {
  font-family: 'Lato-Fallback';
  src: local('Arial');
  ascent-override: 98%;
  descent-override: 22%;
  size-adjust: 97%; /* Lato is slightly narrower than Arial */
}

/* 3. Apply the fallbacks */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Silka', 'Silka-Fallback', Arial, sans-serif;
}

p, body, li, span {
  font-family: 'Lato', 'Lato-Fallback', Arial, sans-serif;
}

.wpcf7 form.sent .wpcf7-response-output
{
    padding: 20px 20px;
    border-radius: 15px;
    background: #7cfc003b;
    color: darkolivegreen;
    font-weight: 500;
    border: 0px;
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
         padding: 20px 20px;
    border-radius: 15px;
    background: #fca9003b;
    color: #6b502f;
    font-weight: 500;
    border: 0px;
}

/* 1. Disable interactions and hide text while submitting */
.wpcf7-form.submitting .glass-btn-red {
    pointer-events: none;
    color: transparent !important;
    position: relative;
}

/* 2. Create the spinner using a pseudo-element */
.wpcf7-form.submitting .glass-btn-red::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    top: 50%;
    left: 50%;
    margin-top: -9px; /* Half of height */
    margin-left: -9px; /* Half of width */
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff; /* Spinner color */
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}
body .grecaptcha-badge
{
	display:none;
}

.recaptcha-disclaimer {
    font-size: 10px;
    color: #999; /* Faded gray */
    margin-top: 10px;
    line-height: 1.2;
	text-align: center;
}

.image-on-white
{
	    mix-blend-mode: darken;
}

/* PROVIZIO CONVERTED GENERATED CSS START */
.gb-element-f6a40332{align-items:center;align-self:start;display:flex;flex-direction:column;justify-content:flex-start;justify-items:start;justify-self:center;margin-bottom:50px;padding-left:20px;padding-right:20px;padding-top:120px;position:relative}@media (max-width:1024px){.gb-element-f6a40332{margin-bottom:50px;padding-top:80px}}

.gb-text-fb02ac7c{font-size:3rem;font-weight:600;margin-bottom:10px}@media (max-width:767px){.gb-text-fb02ac7c{text-align:center}}

.gb-element-d5eccfab{margin-left:auto;margin-right:auto;margin-top:0px;max-width:900px}@media (max-width:1024px){.gb-element-d5eccfab{margin-top:0px}}@media (max-width:767px){.gb-element-d5eccfab{padding-left:20px;padding-right:20px}}

.gb-element-116ad61d{margin-left:auto;margin-right:auto;max-width:750px;padding-left:20px;padding-right:20px}@media (max-width:767px){.gb-element-116ad61d{max-width:100%}}

.gb-element-f6a40332{align-items:center;align-self:start;display:flex;flex-direction:column;justify-content:flex-start;justify-items:start;justify-self:center;margin-bottom:75px;padding-left:20px;padding-right:20px;padding-top:120px;position:relative}@media (max-width:1024px){.gb-element-f6a40332{margin-bottom:50px;padding-top:80px}}

.gb-text-fb02ac7c{font-size:3rem;font-weight:600;margin-bottom:10px}@media (max-width:767px){.gb-text-fb02ac7c{text-align:center}}

.gb-text-9d873aa4{margin-bottom:0px;margin-top:10px;max-width:650px;text-align:center}

.gb-element-6a87ba68{display:flex;justify-content:center;padding-left:20px;padding-right:20px}

.gb-element-220681a0{align-items:center;background-color:rgba(122,255,133,0.1);display:flex;flex-direction:column;justify-content:flex-start;max-width:var(--gb-container-width);width:100%;border-radius:15px;padding:40px}@media (max-width:1024px){.gb-element-220681a0{width:100%}}@media (max-width:767px){.gb-element-220681a0{padding-left:20px;padding-right:20px}}

.gb-element-7e2a0f85{align-items:center;background-color:#000000;display:flex;justify-content:center;justify-items:center;margin-bottom:60px;max-width:700px;min-width:200px;width:70%;border-radius:100px}@media (max-width:1024px){.gb-element-7e2a0f85{width:100%}}

.gb-element-01a2751c{column-gap:20px;display:grid;grid-column:3;grid-row:3;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:3;row-gap:20px;width:100%}@media (max-width:1024px){.gb-element-01a2751c{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:767px){.gb-element-01a2751c{grid-template-columns:1fr}}

.gb-element-99e1da13{background-color:rgba(0,0,0,0.76);border-radius:15px;padding:20px}

.gb-shape-6360bf92{display:inline-flex}.gb-shape-6360bf92 svg{fill:currentColor;height:60px;width:60px;color:rgba(0,0,0,0)}

.gb-text-1c104436{font-weight:600;margin-bottom:20px}

.gb-text-9063d278{font-size:1rem;margin-top:0px}

.gb-element-6bfb4362{background-color:rgba(0,0,0,0.76);border-radius:15px;padding:20px}

.gb-shape-d5c133ed{display:inline-flex}.gb-shape-d5c133ed svg{fill:currentColor;height:60px;width:60px;color:rgba(0,0,0,0)}

.gb-text-92c5662e{font-weight:600;margin-bottom:20px}

.gb-text-f8d9dfa5{font-size:1rem;margin-top:0px}

.gb-element-c4c32be6{background-color:rgba(0,0,0,0.76);border-radius:15px;padding:20px}

.gb-shape-998b57f1{display:inline-flex}.gb-shape-998b57f1 svg{fill:currentColor;height:60px;width:60px;color:rgba(0,0,0,0)}

.gb-text-e8b20821{font-weight:600;margin-bottom:20px}

.gb-text-eadf8ff5{font-size:1rem;margin-top:0px}

.gb-element-f3d8fdf1{background-color:rgba(0,0,0,0.76);border-radius:15px;padding:20px}

.gb-shape-7c6dcfc4{display:inline-flex}.gb-shape-7c6dcfc4 svg{fill:currentColor;height:60px;width:60px;color:rgba(0,0,0,0)}

.gb-text-09b73f41{font-weight:600;margin-bottom:20px}

.gb-text-5a911d66{font-size:1rem;margin-top:0px}

.gb-element-dfa065c9{background-color:rgba(0,0,0,0.76);border-radius:15px;padding:20px}

.gb-shape-0256d689{display:inline-flex}.gb-shape-0256d689 svg{fill:currentColor;height:60px;width:60px;color:rgba(0,0,0,0)}

.gb-text-098e51af{font-weight:600;margin-bottom:20px}

.gb-text-33b7a218{font-size:1rem;margin-top:0px}

.gb-element-6817afd4{background-color:rgba(0,0,0,0.76);border-radius:15px;padding:20px}

.gb-shape-93296f49{display:inline-flex}.gb-shape-93296f49 svg{fill:currentColor;height:60px;width:60px;color:rgba(0,0,0,0)}

.gb-text-001101f2{font-weight:600;margin-bottom:20px}

.gb-text-c33d3a7f{font-size:1rem;margin-top:0px}

.gb-element-588b3231{background-color:rgba(0,0,0,0.76);border-radius:15px;padding:20px}

.gb-shape-d6cb304d{display:inline-flex}.gb-shape-d6cb304d svg{fill:currentColor;height:60px;width:60px;color:rgba(0,0,0,0)}

.gb-text-bc4d4406{font-weight:600;margin-bottom:20px}

.gb-text-4649aca8{font-size:1rem;margin-top:0px}

.gb-element-0b282843{background-color:rgba(0,0,0,0.76);border-radius:15px;padding:20px}

.gb-shape-6b7ae446{display:inline-flex}.gb-shape-6b7ae446 svg{fill:currentColor;height:60px;width:60px;color:rgba(0,0,0,0)}

.gb-text-24f01399{font-weight:600;margin-bottom:20px}

.gb-text-2ce6a76e{font-size:1rem;margin-top:0px}

.gb-element-50ba9c38{background-color:rgba(0,0,0,0.76);border-radius:15px;padding:20px}

.gb-shape-62ae1d3c{display:inline-flex}.gb-shape-62ae1d3c svg{fill:currentColor;height:60px;width:60px;color:rgba(0,0,0,0)}

.gb-text-3b6fadbe{font-weight:600;margin-bottom:20px}

.gb-text-079f3425{font-size:1rem;margin-top:0px}

.gb-element-25ffd6b1{column-gap:20px;display:grid;grid-column:3;grid-row:3;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:3;row-gap:20px;width:100%}@media (max-width:1024px){.gb-element-25ffd6b1{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:767px){.gb-element-25ffd6b1{grid-template-columns:1fr}}

.gb-element-d8424cc1{background-color:rgba(0,0,0,0.76);border-radius:15px;padding:20px}

.gb-shape-2b46f07d{display:inline-flex}.gb-shape-2b46f07d svg{fill:currentColor;height:60px;width:60px;color:rgba(0,0,0,0)}

.gb-text-1435868c{font-weight:600;margin-bottom:20px}

.gb-text-b16c6b62{font-size:1rem;margin-top:0px}

.gb-element-3184d7a3{background-color:rgba(0,0,0,0.76);border-radius:15px;padding:20px}

.gb-shape-daa70e25{display:inline-flex}.gb-shape-daa70e25 svg{fill:currentColor;height:60px;width:60px;color:rgba(0,0,0,0)}

.gb-text-4e30688e{font-weight:600;margin-bottom:20px}

.gb-text-cc903a21{font-size:1rem;margin-top:0px}

.gb-element-4477857e{background-color:rgba(0,0,0,0.76);border-radius:15px;padding:20px}

.gb-shape-26ee8482{display:inline-flex}.gb-shape-26ee8482 svg{fill:currentColor;height:60px;width:60px;color:#ff4d57}

.gb-text-51a25ac8{font-weight:600;margin-bottom:20px}

.gb-text-c2e6fead{font-size:1rem;margin-top:0px}

.gb-element-fe671e88{background-color:rgba(0,0,0,0.76);border-radius:15px;padding:20px}

.gb-shape-f708f6ff{display:inline-flex}.gb-shape-f708f6ff svg{fill:currentColor;height:60px;width:60px;color:rgba(0,0,0,0)}

.gb-text-ef10d12a{font-weight:600;margin-bottom:20px}

.gb-text-c32a107b{font-size:1rem;margin-top:0px}

.gb-element-b2b533fa{background-color:rgba(0,0,0,0.76);border-radius:15px;padding:20px}

.gb-shape-def78f84{display:inline-flex}.gb-shape-def78f84 svg{fill:currentColor;height:60px;width:60px;color:rgba(0,0,0,0)}

.gb-text-9fec09d5{font-weight:600;margin-bottom:20px}

.gb-text-fe0b810e{font-size:1rem;margin-top:0px}

.gb-element-ca877e32{background-color:rgba(0,0,0,0.76);border-radius:15px;padding:20px}

.gb-shape-ec1bdcfd{display:inline-flex}.gb-shape-ec1bdcfd svg{fill:currentColor;height:60px;width:60px;color:rgba(0,0,0,0)}

.gb-text-acafcbd7{font-weight:600;margin-bottom:20px}

.gb-text-6fb1a02a{font-size:1rem;margin-top:0px}

.gb-element-3828c9d4{background-color:rgba(0,0,0,0.76);border-radius:15px;padding:20px}

.gb-shape-f6078332{display:inline-flex}.gb-shape-f6078332 svg{fill:currentColor;height:60px;width:60px;color:rgba(0,0,0,0)}

.gb-text-4c069c59{font-weight:600;margin-bottom:20px}

.gb-text-af536c17{font-size:1rem;margin-top:0px}

.gb-element-92c43278{background-color:rgba(0,0,0,0.76);border-radius:15px;padding:20px}

.gb-shape-58c7be01{display:inline-flex}.gb-shape-58c7be01 svg{fill:currentColor;height:60px;width:60px;color:#ff4d57}

.gb-text-c9999690{font-weight:600;margin-bottom:20px}

.gb-text-58410284{font-size:1rem;margin-top:0px}

.gb-element-43d41048{background-color:rgba(0,0,0,0.76);border-radius:15px;padding:20px}

.gb-shape-f9db576e{display:inline-flex}.gb-shape-f9db576e svg{fill:currentColor;height:60px;width:60px;color:rgba(0,0,0,0)}

.gb-text-3b22fbd6{font-weight:600;margin-bottom:20px}

.gb-text-2235266a{font-size:1rem;margin-top:0px}

.gb-element-406af3eb{margin-bottom:0px;max-width:var(--gb-container-width)}

.gb-element-54fa5e57{align-items:flex-start;align-self:start;display:block;justify-items:start;justify-self:start;max-width:750px;position:relative;margin:75px 0px 0px 0px;padding:20px 20px 0px 20px}@media (max-width:1024px){.gb-element-54fa5e57{justify-content:center;justify-items:center;justify-self:center;margin-top:50px;text-align:center}}

.gb-text-5a78606e{margin-bottom:10px;text-transform:uppercase}

.gb-text-9619c4e5{margin-bottom:0px;margin-top:0px}

.gb-element-c2b590e2{display:flex;flex-direction:row;justify-content:flex-start;justify-items:stretch;margin-bottom:0px;max-width:var(--gb-container-width);padding:20px}@media (max-width:1024px){.gb-element-c2b590e2{flex-direction:column}}

.gb-element-b24c2f1f{width:450px}@media (max-width:1024px){.gb-element-b24c2f1f{order:2;width:100%}}

.ub-image.gb-media-2e622b13 img{display:none;height:auto;max-width:100%;object-fit:cover;width:auto}@media (max-width:1024px){.ub-image.gb-media-2e622b13 img{display:block;mix-blend-mode:normal}}@media (max-width:767px){.ub-image.gb-media-2e622b13 img{mix-blend-mode:normal}}

.ub-image.gb-media-78bf925e img{display:none;height:auto;max-width:100%;object-fit:cover;width:auto}@media (max-width:1024px){.ub-image.gb-media-78bf925e img{display:block;mix-blend-mode:normal;object-fit:contain;object-position:center center}}@media (max-width:767px){.ub-image.gb-media-78bf925e img{mix-blend-mode:normal}}

.ub-image.gb-media-3cb9dc25 img{display:none;height:auto;max-width:100%;object-fit:cover;width:auto}@media (max-width:1024px){.ub-image.gb-media-3cb9dc25 img{display:block;margin-top:20px;mix-blend-mode:normal}}@media (max-width:767px){.ub-image.gb-media-3cb9dc25 img{mix-blend-mode:normal}}

.ub-image.gb-media-54fe5ffc img{display:none;height:auto;max-width:100%;object-fit:cover;width:auto}@media (max-width:1024px){.ub-image.gb-media-54fe5ffc img{display:block;margin-top:20px;mix-blend-mode:normal}}@media (max-width:767px){.ub-image.gb-media-54fe5ffc img{mix-blend-mode:normal}}

.gb-element-af1c1648{background-blend-mode:normal;background-image:url('http://provizio-backup.local/wp-content/uploads/2025/12/APIs-1.avif');background-position:center;background-repeat:no-repeat;background-size:contain;margin-left:10%;width:40%}@media (max-width:1024px){.gb-element-af1c1648{display:none}}

.gb-element-c23efd08{display:flex;justify-content:center;margin-top:40px;padding:20px}@media (max-width:1024px){.gb-element-c23efd08{margin-top:20px}}

.gb-text-45b68a24{font-size:2rem;margin-bottom:10px;margin-top:0px;text-align:center}

.gb-element-379b145a{align-items:center;display:flex;flex-direction:column;justify-content:flex-start}

.gb-element-c8df37f0{padding:0px 20px 20px 20px}

.gb-text-f1641ab5{margin-top:40px;max-width:650px;text-align:center}

.gb-text-3c24b683{margin-top:40px;max-width:650px;text-align:center}

.gb-text-14c239d4{margin-top:40px;max-width:650px;text-align:center}

.gb-element-7254b280{align-items:center;align-self:start;display:flex;flex-direction:column;justify-content:flex-start;justify-items:start;justify-self:center;margin-bottom:75px;position:relative;padding:120px 20px 0px 20px}@media (max-width:1024px){.gb-element-7254b280{padding-top:80px}}

.gb-text-61f923a3{font-size:3rem;font-weight:600;margin-bottom:10px}@media (max-width:767px){.gb-text-61f923a3{text-align:center}}

.gb-text-0154f035{margin-bottom:0px;margin-top:10px;max-width:650px;text-align:center}

.gb-element-fa7a1b7b{align-items:center;display:flex;flex-direction:column;justify-content:flex-start;justify-items:center;margin-bottom:40px;margin-top:0px}

.gb-text-39fdd795{margin-bottom:10px;margin-top:0px;text-transform:uppercase}

.gb-element-61a0c0ed{align-self:center;column-gap:20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));justify-content:center;margin-left:auto;margin-right:auto;max-width:var(--gb-container-width);padding-left:20px;padding-right:20px;row-gap:20px}@media (max-width:1024px){.gb-element-61a0c0ed{display:grid;grid-template-columns:1fr;padding-left:20px;padding-right:20px}}

.gb-element-94b5be3b{align-items:center;background-blend-mode:normal;background-image:radial-gradient(ellipse 120% 60% at 50% 100%,rgba(255,239,84,0.25) 0%,rgba(255,239,84,0.1) 38%);background-position:center;background-repeat:no-repeat;background-size:cover;display:flex;flex-direction:column;justify-content:flex-start;text-align:left;border-radius:15px;padding:40px}@media (max-width:1024px){.gb-element-94b5be3b{align-items:flex-start;flex-direction:column;justify-content:flex-start}}

.gb-shape-5975e9b4{display:inline-flex;margin-bottom:20px}.gb-shape-5975e9b4 svg{fill:#ff4d57 !important;width:50px;height:50px;color:#ffffff;stroke:#ff4d57 !important;cursor:auto}@media (max-width:1024px){.gb-shape-5975e9b4{margin-left:auto;margin-right:auto}}

.gb-text-e8292d28{margin-bottom:20px;margin-top:0px;text-align:center}@media (max-width:1024px){.gb-text-e8292d28{width:100%}}

.gb-element-049c9133{background-color:#ffffff;height:1px;margin-bottom:20px;margin-left:auto;margin-right:auto;width:100%}

.gb-text-c8fca7b0{margin-bottom:30px;margin-top:0px;text-align:center}@media (max-width:767px){.gb-text-c8fca7b0{margin-left:auto;margin-right:auto}}

.gb-element-01de861f{align-items:center;column-gap:10px;display:flex;flex-direction:row}

.gb-shape-33157d42{display:inline-flex;margin-bottom:0px;margin-top:0px}.gb-shape-33157d42 svg{fill:currentColor;height:20px;width:20px}

.gb-text-a280d718{font-size:1rem;line-height:1;margin-bottom:0px;margin-top:0px;padding-bottom:0px;padding-top:0px}

.gb-element-c51a0969{align-items:center;column-gap:10px;display:flex;flex-direction:row;margin-top:20px}

.gb-shape-c2ff9629{display:inline-flex;margin-bottom:0px;margin-top:0px}.gb-shape-c2ff9629 svg{fill:currentColor;height:20px;width:20px}

.gb-text-0527b963{font-size:1rem;line-height:1;margin-bottom:0px;margin-top:0px;padding-bottom:0px;padding-top:0px}

.gb-element-635619b8{align-items:center;column-gap:10px;display:flex;flex-direction:row;margin-top:20px}

.gb-shape-ab41514b{display:inline-flex;margin-bottom:0px;margin-top:0px}.gb-shape-ab41514b svg{fill:currentColor;height:20px;width:20px}

.gb-text-e33c9cdd{font-size:1rem;line-height:1;margin-bottom:0px;margin-top:0px;padding-bottom:0px;padding-top:0px}

.gb-text-e0363a71{align-items:center;background-color:#ff4d57;color:#ffffff;display:inline-flex;justify-content:center;margin-top:auto;text-align:center;text-decoration:none;width:100%}.gb-text-e0363a71:is(:hover,:focus){background-color:#FF4D57;color:#ffffff}@media (max-width:1024px){.gb-text-e0363a71{margin-top:40px}}

.gb-text-58a453cb{align-items:center;background-color:rgba(255,255,255,0);border-bottom-style:solid;border-bottom-width:1px;border-left-style:solid;border-left-width:1px;border-right-style:solid;border-right-width:1px;border-top-style:solid;border-top-width:1px;color:#ffffff;display:inline-flex;font-family:Silka;font-size:1rem;font-weight:300;justify-content:center;text-decoration:none;border-radius:100px}.gb-text-58a453cb:is(:hover,:focus){background-color:rgba(255,255,255,0);color:#ffffff}

.gb-element-6e6a22ec{align-items:center;background-blend-mode:normal;background-image:radial-gradient(ellipse 120% 60% at 50% 100%,rgb(255 77 87/25%) 0%,rgb(255 77 87/10%) 38%);background-position:center;background-repeat:no-repeat;background-size:cover;display:flex;flex-direction:column;justify-content:flex-start;text-align:left;border-radius:15px;padding:40px}@media (max-width:1024px){.gb-element-6e6a22ec{align-items:flex-start;display:flex;flex-direction:column}}

.gb-shape-b2b595a6{display:inline-flex;fill:#ff4d57;margin-bottom:20px;stroke:#ff4d57}.gb-shape-b2b595a6 svg{fill:currentColor;width:50px;height:50px;color:#ff4d55;stroke:#ff4d57}@media (max-width:1024px){.gb-shape-b2b595a6{margin-left:auto;margin-right:auto}}

.gb-text-db63cbb9{margin-bottom:20px;margin-top:0px;text-align:center}@media (max-width:1024px){.gb-text-db63cbb9{width:100%}}

.gb-element-f39e2de5{background-color:#ffffff;height:1px;margin-bottom:20px;margin-left:auto;margin-right:auto;width:100%}

.gb-text-324fe900{margin-bottom:30px;margin-top:0px;text-align:center}@media (max-width:767px){.gb-text-324fe900{margin-left:auto;margin-right:auto}}

.gb-element-2c794c7f{align-items:center;column-gap:10px;display:flex;flex-direction:row}

.gb-shape-5e2c6887{display:inline-flex;margin-bottom:0px;margin-top:0px}.gb-shape-5e2c6887 svg{fill:currentColor;height:20px;width:20px}

.gb-text-b1506e4d{font-size:1rem;line-height:1;margin-bottom:0px;margin-top:0px;padding-bottom:0px;padding-top:0px}

.gb-element-b544e752{align-items:center;column-gap:10px;display:flex;flex-direction:row;margin-top:20px}

.gb-shape-bfe099c8{display:inline-flex;margin-bottom:0px;margin-top:0px}.gb-shape-bfe099c8 svg{fill:currentColor;height:20px;width:20px}

.gb-text-70cea35e{font-size:1rem;line-height:1;margin-bottom:0px;margin-top:0px;padding-bottom:0px;padding-top:0px}

.gb-element-185431c9{align-items:center;column-gap:10px;display:flex;flex-direction:row;margin-top:20px}

.gb-shape-ec123580{display:inline-flex;margin-bottom:0px;margin-top:0px}.gb-shape-ec123580 svg{fill:currentColor;height:20px;width:20px}

.gb-text-bfcba208{font-size:1rem;line-height:1;margin-bottom:0px;margin-top:0px;padding-bottom:0px;padding-top:0px}

.gb-text-c50d8d00{align-items:center;background-color:#ff4d57;color:#ffffff;display:inline-flex;justify-content:center;margin-top:40px;text-align:center;text-decoration:none;width:100%}.gb-text-c50d8d00:is(:hover,:focus){background-color:#FF4D57;color:#ffffff}@media (max-width:1024px){.gb-text-c50d8d00{margin-top:40px}}

.gb-text-31f830c2{align-items:center;background-color:rgba(255,255,255,0);border-bottom-style:solid;border-bottom-width:1px;border-left-style:solid;border-left-width:1px;border-right-style:solid;border-right-width:1px;border-top-style:solid;border-top-width:1px;color:#ffffff;display:inline-flex;font-family:Silka;font-size:1rem;font-weight:300;justify-content:center;margin-top:20px;text-decoration:none;width:100%;border-radius:100px}.gb-text-31f830c2:is(:hover,:focus){background-color:rgba(255,255,255,0);color:#ffffff}

.gb-element-b82b7218{align-items:center;background-blend-mode:normal;background-color:linear-gradient(to bottom,rgba(255,255,255,0.1),transparent),radial-gradient(circle at center bottom,rgba(255,90,90,0.85) 0%,rgba(200,0,0,0.6) 100%);background-image:radial-gradient(ellipse 120% 60% at 50% 100%,rgb(10 255 173/25%) 0%,rgb(10 255 173/10%) 38%);background-position:center;background-repeat:no-repeat;background-size:cover;display:flex;flex-direction:column;text-align:left;border-radius:15px;padding:40px}@media (max-width:1024px){.gb-element-b82b7218{align-items:flex-start;flex-direction:column}}

.gb-shape-7476fb42{display:inline-flex;margin-bottom:20px}.gb-shape-7476fb42 svg{fill:currentColor;width:50px;height:50px;color:#0affad}@media (max-width:1024px){.gb-shape-7476fb42{margin-left:auto;margin-right:auto}}

.gb-text-1f306246{margin-bottom:20px;margin-top:0px;text-align:center}@media (max-width:1024px){.gb-text-1f306246{width:100%}}

.gb-element-a65af69d{background-color:#ffffff;height:1px;margin-bottom:20px;margin-left:auto;margin-right:auto;width:100%}

.gb-text-2f82a823{margin-bottom:30px;margin-top:0px;text-align:center}@media (max-width:767px){.gb-text-2f82a823{margin-left:auto;margin-right:auto}}

.gb-element-fd969781{align-items:center;column-gap:10px;display:flex;flex-direction:row}

.gb-shape-a1e1cd20{display:inline-flex;margin-bottom:0px;margin-top:0px}.gb-shape-a1e1cd20 svg{fill:currentColor;height:20px;width:20px}

.gb-text-19b5373f{font-size:1rem;line-height:1;margin-bottom:0px;margin-top:0px;padding-bottom:0px;padding-top:0px}

.gb-element-70970f2b{align-items:center;column-gap:10px;display:flex;flex-direction:row;margin-top:20px}

.gb-shape-a351e8d9{display:inline-flex;margin-bottom:0px;margin-top:0px}.gb-shape-a351e8d9 svg{fill:currentColor;height:20px;width:20px}

.gb-text-4df88c29{font-size:1rem;line-height:1;margin-bottom:0px;margin-top:0px;padding-bottom:0px;padding-top:0px}

.gb-element-d7d448e3{align-items:center;column-gap:10px;display:flex;flex-direction:row;margin-top:20px}

.gb-shape-f22cc94c{display:inline-flex;margin-bottom:0px;margin-top:0px}.gb-shape-f22cc94c svg{fill:currentColor;height:20px;width:20px}

.gb-text-d1073747{font-size:1rem;line-height:1;margin-bottom:0px;margin-top:0px;padding-bottom:0px;padding-top:0px}

.gb-text-fb39b0e1{align-items:center;background-color:#ff4d57;color:#ffffff;display:inline-flex;justify-content:center;margin-top:auto;text-align:center;text-decoration:none;width:100%}.gb-text-fb39b0e1:is(:hover,:focus){background-color:#FF4D57;color:#ffffff}@media (max-width:1024px){.gb-text-fb39b0e1{margin-top:40px}}

.gb-text-4bb1b521{align-items:center;background-color:rgba(255,255,255,0);border-bottom-style:solid;border-bottom-width:1px;border-left-style:solid;border-left-width:1px;border-right-style:solid;border-right-width:1px;border-top-style:solid;border-top-width:1px;color:#ffffff;display:inline-flex;font-family:Silka;font-size:1rem;font-weight:300;justify-content:center;margin-top:20px;text-decoration:none;width:100%;border-radius:100px}.gb-text-4bb1b521:is(:hover,:focus){background-color:rgba(255,255,255,0);color:#ffffff}

.gb-element-a8a15ab0{background-color:#F5F7F5;box-shadow:0px 0px 5px 6px #f5f7f5,0px 0px 90px rgba(13,255,174,0.41);color:#000000;display:flex;justify-content:center;margin-bottom:100px;margin-top:150px;max-width:100%;padding:50px 20px}@media (max-width:1024px){.gb-element-a8a15ab0{margin-bottom:100px;margin-top:100px}}

.gb-element-28dabcae{max-width:650px;text-align:center}

.gb-text-8e6ebc09{color:#000000;font-weight:500}@media (max-width:1024px){.gb-text-8e6ebc09{margin-top:0px}}

.gb-text-a1b8b9e6{font-size:1rem;margin-bottom:30px}

.gb-text-56dbe6d0{align-items:center;background-color:#ff4d57;color:#ffffff;display:inline-flex;text-decoration:none}.gb-text-56dbe6d0:is(:hover,:focus){background-color:#FF4D57;color:#ffffff}@media (max-width:1024px){.gb-text-56dbe6d0{margin-bottom:0px}}

.gb-element-fe72498a{max-width:var(--gb-container-width)}

.gb-element-c23efd08{display:flex;justify-content:center;padding:20px}

.gb-text-45b68a24{font-size:2rem;margin-bottom:10px;text-align:center}

.gb-element-aa130f42{align-items:center;display:flex;flex-direction:column;justify-content:flex-start}

.gb-element-fb8fd74a{padding:0px 20px 20px 20px}

.gb-text-de503ef0{margin-top:40px;max-width:650px;min-height:100px;text-align:center}

.gb-text-2fe4b027{margin-top:40px;max-width:650px;min-height:100px;text-align:center}

.gb-text-a2ac0205{margin-top:40px;max-width:650px;text-align:center}

.gb-element-7254b280{align-items:center;align-self:start;display:flex;flex-direction:column;justify-content:flex-start;justify-items:start;justify-self:center;margin-bottom:75px;padding-left:20px;padding-right:20px;padding-top:120px;position:relative}@media (max-width:1024px){.gb-element-7254b280{padding-top:80px}}

.gb-text-61f923a3{font-size:3rem;font-weight:600;margin-bottom:10px}@media (max-width:767px){.gb-text-61f923a3{text-align:center}}

.gb-text-0154f035{margin-bottom:0px;margin-top:10px;max-width:650px;text-align:center}

.gb-element-ca27eee6{margin-bottom:25px;margin-top:0px;max-width:var(--gb-container-width);padding-top:0px}

.gb-element-a89f21b0{align-items:flex-start;align-self:start;display:block;justify-content:flex-start;justify-items:start;justify-self:start;max-width:750px;position:relative;margin:75px 0px 0px 0px;padding:0px 20px}@media (max-width:1024px){.gb-element-a89f21b0{justify-content:center;justify-items:center;justify-self:center;text-align:center}}

.gb-text-39fdd795{margin-bottom:10px;margin-top:0px;text-transform:uppercase}

.gb-text-a34e93c3{margin-bottom:0px;margin-top:0px}

.gb-element-34ab37fe{display:flex;justify-content:center;max-width:var(--gb-container-width);padding-left:20px;padding-right:20px}

.gb-element-b6ebadbf{align-items:center;align-self:start;column-gap:80px;display:flex;flex-direction:row;justify-content:center;justify-items:start;justify-self:start;margin-bottom:40px;margin-top:40px;max-width:var(--gb-container-width);width:100%;padding:20px}@media (max-width:1024px){.gb-element-b6ebadbf{flex-direction:column;margin-bottom:0px;margin-top:20px;padding-top:0px;text-align:center}}

.gb-element-901d2185{line-height:1}

.gb-text-d7fa9c03{font-size:11rem;font-weight:500;line-height:1;margin-bottom:0px;margin-top:0px}@media (max-width:1024px){.gb-text-d7fa9c03{font-size:8rem}}@media (max-width:767px){.gb-text-d7fa9c03{font-size:6rem}}

.gb-element-95b24e5b{max-width:400px}

.gb-text-5326b9ba{margin-bottom:10px}

@media (max-width:1024px){.gb-text-d6225feb{margin-bottom:0px}}

.gb-element-9df6f035{align-items:center;display:flex;flex-direction:column;justify-content:flex-start;margin-top:50px}@media (max-width:1024px){.gb-element-9df6f035{margin-top:60px}}

.gb-text-0760181b{margin-bottom:40px}@media (max-width:1024px){.gb-text-0760181b{margin-top:0px}}

.gb-element-428b9eae{align-items:center;column-gap:40px;display:inline-flex;filter:grayscale(100%) invert(50%);flex-direction:row;flex-wrap:wrap;justify-content:center;padding-left:20px;padding-right:20px;row-gap:40px}@media (max-width:1024px){.gb-element-428b9eae{display:flex;flex-wrap:wrap;row-gap:40px;width:100%}}@media (max-width:767px){.gb-element-428b9eae{column-gap:20px;row-gap:20px}}

.ub-image.gb-media-54e3424c img{height:80px;max-height:60px;max-width:100%;object-fit:contain;width:80px}

.ub-image.gb-media-aa1a7191 img{height:80px;max-height:60px;max-width:100%;object-fit:contain;width:80px}

.ub-image.gb-media-cb5f90db img{height:50px;max-height:60px;max-width:100%;object-fit:contain;width:120px}

.ub-image.gb-media-d6e0829e img{height:50px;max-height:60px;max-width:100%;object-fit:contain;width:120px}

.ub-image.gb-media-ef94563b img{height:50px;margin-top:-10px;max-height:60px;max-width:100%;object-fit:cover;width:120px}

.ub-image.gb-media-b0393a38 img{height:50px;max-height:60px;max-width:100%;object-fit:contain;width:150px}

.ub-image.gb-media-a871a060 img{height:50px;max-height:60px;max-width:100%;object-fit:contain;object-position:center center;width:120px}

.ub-image.gb-media-19426f73 img{height:50px;max-height:60px;max-width:100%;object-fit:contain;width:120px}

.ub-image.gb-media-efc9f2bd img{height:50px;max-height:60px;max-width:100%;object-fit:contain;width:120px}

.ub-image.gb-media-9d828d4b img{height:50px;max-height:60px;max-width:100%;object-fit:cover;width:150px}

.ub-image.gb-media-6ca97821 img{height:50px;max-height:60px;max-width:100%;object-fit:contain;width:120px}

.ub-image.gb-media-20d5a124 img{height:50px;max-height:60px;max-width:100%;object-fit:contain;width:80px}

.ub-image.gb-media-0886672b img{height:50px;max-height:60px;max-width:100%;object-fit:contain;width:150px}

.ub-image.gb-media-05a3d966 img{height:50px;max-height:60px;max-width:100%;object-fit:contain;width:150px}

.ub-image.gb-media-c7714f86 img{height:40px;max-height:30px;max-width:100%;object-fit:contain;width:150px}

.ub-image.gb-media-5439eebc img{height:50px;max-height:60px;max-width:100%;object-fit:contain;width:120px}

.ub-image.gb-media-870c6f73 img{height:50px;max-height:60px;max-width:100%;object-fit:contain;width:150px}

.gb-element-d2727d9c{display:flex;justify-content:center;margin-top:120px;text-align:center}@media (max-width:1024px){.gb-element-d2727d9c{margin-top:60px}}@media (max-width:767px){.gb-element-d2727d9c{padding-left:20px;padding-right:20px}}

.gb-element-7fac4d95{align-items:flex-start;column-gap:20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:60px;max-width:var(--gb-container-width);padding-left:20px;padding-right:20px}@media (max-width:1024px){.gb-element-7fac4d95{align-self:center;display:flex;flex-wrap:wrap;grid-template-columns:1fr;justify-content:center;justify-items:center;justify-self:center;margin-top:20px;row-gap:40px;text-align:center}}@media (max-width:767px){.gb-element-7fac4d95{display:flex;flex-direction:row;padding-left:20px;padding-right:20px;width:100%}}

@media (max-width:1024px){.gb-element-9abdd686{align-items:center;display:flex;flex-direction:column;justify-content:center;max-width:400px;padding-left:20px;padding-right:20px}}@media (max-width:767px){.gb-element-9abdd686{max-width:100%;padding-left:0px;padding-right:0px;width:100%}}

.gb-element-4d7ffebe{aspect-ratio:4/5;height:450px;max-width:100%;object-fit:cover;object-position:center center;border-radius:15px}@media (max-width:1024px){.gb-element-4d7ffebe{transform:translate3d(0px,0px,0px)}}@media (max-width:767px){.gb-element-4d7ffebe{height:auto;width:100%}}

.gb-text-3b5e9411{margin-top:40px}

.gb-element-af91a42f{background-color:#ffffff;height:1px;width:80%}

@media (max-width:1024px){.gb-element-fb8a1277{align-items:center;display:flex;flex-direction:column;justify-content:center;max-width:400px}}@media (max-width:767px){.gb-element-fb8a1277{max-width:100%;width:100%}}

.gb-element-44e8e858{aspect-ratio:4/5;height:450px;max-width:100%;right:-30px;top:-30px;border-radius:15px}@media (max-width:1024px){.gb-element-44e8e858{right:0px;top:0px;transform:translate3d(0px,0px,0px)}}@media (max-width:767px){.gb-element-44e8e858{height:auto;width:100%}}

.gb-text-21eca848{margin-top:40px}

.gb-element-ccaaa1af{background-color:#ffffff;height:1px;width:80%}

@media (max-width:1024px){.gb-element-7fd04396{align-items:center;display:flex;flex-direction:column;justify-content:center;max-width:400px}}@media (max-width:767px){.gb-element-7fd04396{max-width:100%;width:100%}}

.gb-element-15fef414{aspect-ratio:4/5;height:450px;max-width:100%;position:relative;right:-60px;top:-60px;border-radius:15px}@media (max-width:1024px){.gb-element-15fef414{right:0px;top:0px;transform:translate3d(0px,0px,0px)}}@media (max-width:767px){.gb-element-15fef414{height:auto;width:100%}}

.gb-text-ed842c1b{margin-top:40px}

.gb-element-f9729be7{background-color:#ffffff;height:1px;width:80%}

@media (max-width:1024px){.gb-text-0d17a845{margin-bottom:0px}}

.gb-element-c23efd08{align-items:center;display:flex;flex-direction:column;justify-content:center;margin-top:50px;text-align:center;padding:20px}@media (max-width:1024px){.gb-element-c23efd08{margin-top:40px}}

.gb-text-45b68a24{margin-bottom:10px;text-align:center}

.gb-text-26c3f858{max-width:650px}

.gb-element-a8a15ab0{align-items:center;align-self:center;background-color:#F5F7F5;box-shadow:0px 0px 90px rgba(13,255,174,0.41);color:#000000;display:flex;flex-direction:column;justify-content:center;justify-items:center;justify-self:center;margin-bottom:100px;margin-top:20px;max-width:800px;border-radius:15px;padding:50px}@media (max-width:1024px){.gb-element-a8a15ab0{margin-bottom:60px}}@media (max-width:767px){.gb-element-a8a15ab0{padding-left:20px;padding-right:20px;width:100%;border-radius:0px}}

.gb-element-28dabcae{justify-content:flex-start;max-width:650px;text-align:left}

.gb-element-1eeaab7b{align-items:center;display:flex;flex-direction:column;justify-content:center;padding-bottom:40px;text-align:center}@media (max-width:1024px){.gb-element-1eeaab7b{padding-bottom:0px;padding-left:20px;padding-right:20px}}

.gb-text-cce203bd{margin-bottom:10px}

.gb-text-41a2bee0{margin-bottom:30px;margin-top:=;max-width:650px}

.gb-text-6c550b17{align-items:center;background-color:rgba(255,255,255,0);border-bottom-style:solid;border-bottom-width:1px;border-left-style:solid;border-left-width:1px;border-right-style:solid;border-right-width:1px;border-top-style:solid;border-top-width:1px;color:#ffffff;display:inline-flex;font-family:Silka;font-size:1rem;font-weight:300;text-decoration:none;border-radius:100px}.gb-text-6c550b17:is(:hover,:focus){background-color:rgba(255,255,255,0);color:#ffffff}

.gb-element-8c3d6ddb{background-color:rgba(0,0,0,0.7);display:none;height:100%;position:fixed;right:0px;top:0px;width:60%;z-index:9999}@media (max-width:1024px){.gb-element-8c3d6ddb{display:block}}@media (max-width:767px){.gb-element-8c3d6ddb{width:60%}}

.gb-element-cb7a2bcf{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;justify-self:stretch;position:relative;width:100%;padding:20px}@media (max-width:1024px){.gb-element-cb7a2bcf{border-bottom-style:solid;border-bottom-width:0px;border-top-style:solid;border-top-width:0px;display:flex;flex-direction:column;float:right;height:100%;justify-content:flex-start}}@media (max-width:767px){.gb-element-cb7a2bcf{height:100%;margin-left:auto;padding-left:40px;width:100%}}

.gb-shape-bdd7fbe7{display:inline-flex;justify-content:flex-end;justify-self:start}.gb-shape-bdd7fbe7 svg{fill:currentColor;height:20px;width:20px}@media (max-width:1024px){.gb-shape-bdd7fbe7{margin-bottom:50px}}

.gb-element-40204726{display:flex;justify-content:center;padding-left:20px;padding-right:20px;padding-top:120px}@media (max-width:1024px){.gb-element-40204726{padding-top:80px}}

.gb-element-76723bce{display:flex;justify-content:space-between;max-width:900px;width:100%}

.gb-element-ba4b8c66{padding-bottom:10px}

.gb-element-43fd199d{align-items:center;align-self:center;display:flex;flex-direction:column;justify-items:center;justify-self:center;padding-left:20px;padding-right:20px;padding-top:0px;width:100%}@media (max-width:767px){.gb-element-43fd199d{padding-left:0px;padding-right:0px}}

.gb-element-91daeafd{color:#000000;display:flex;justify-content:center;max-width:900px;width:100%;margin:0px;padding:40px 20px}@media (max-width:767px){.gb-element-91daeafd{max-width:var(--gb-container-width)}}

.gb-element-f483d788{max-width:750px;padding-top:0px}
/* PROVIZIO CONVERTED GENERATED CSS END */

/* PROVIZIO HOMEPAGE GENERATED CSS START
   Copied from uploads/generateblocks/style-1086.css so converted Universal blocks do not depend on GenerateBlocks runtime CSS. */
:root{--gb-container-width:1100px;}.gb-container .wp-block-image img{vertical-align:middle;}.gb-grid-wrapper .wp-block-image{margin-bottom:0;}.gb-highlight{background:none;}.gb-shape{line-height:0;}.gb-media-d2ee1d36{height:36px;margin-bottom:-7px;max-width:100%;object-fit:cover;width:auto}@media (max-width:1024px){.gb-element-5c9db4eb{display:none}}.gb-shape-9bbbb805{display:inline-flex}.gb-shape-9bbbb805 svg{fill:currentColor;height:30px;width:30px}.gb-element-cf5ef671{display:none}@media (max-width:1024px){.gb-element-cf5ef671{display:flex}}.gb-element-ad1b47f4{align-items:center;align-self:center;display:flex;height:60px;justify-content:space-between;justify-items:center;justify-self:center;margin-left:auto;margin-right:auto;max-width:var(--gb-container-width);width:100%;padding:10px 20px}@media (max-width:1024px){.gb-element-ad1b47f4{display:flex;padding-left:20px;padding-right:20px;width:100%}}.gb-shape-bdd7fbe7{display:inline-flex;justify-content:flex-end;justify-self:start}.gb-shape-bdd7fbe7 svg{fill:currentColor;height:20px;width:20px}@media (max-width:1024px){.gb-shape-bdd7fbe7{margin-bottom:50px}}.gb-element-cb7a2bcf{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;justify-self:stretch;position:relative;width:100%;padding:20px}@media (max-width:1024px){.gb-element-cb7a2bcf{border-bottom-style:solid;border-bottom-width:0px;border-top-style:solid;border-top-width:0px;display:flex;flex-direction:column;float:right;height:100%;justify-content:flex-start}}@media (max-width:767px){.gb-element-cb7a2bcf{height:100%;margin-left:auto;padding-left:40px;width:100%}}.gb-element-8c3d6ddb{background-color:rgba(0,0,0,0.7);display:none;height:100%;position:fixed;right:0px;top:0px;width:60%;z-index:9999}@media (max-width:1024px){.gb-element-8c3d6ddb{display:block}}@media (max-width:767px){.gb-element-8c3d6ddb{width:60%}}.gb-text-879910b3{display:block;font-weight:300;margin-bottom:0px}@media (max-width:1024px){.gb-text-879910b3{text-align:center}}.gb-text-cd60ab7b{font-weight:normal;margin-bottom:0px;margin-top:10px;max-width:600px;text-align:center}.gb-element-4eda049d{align-items:center;display:flex;flex-direction:column;margin-bottom:0px;margin-top:-120px;position:relative;z-index:9}@media (max-width:1024px){.gb-element-4eda049d{margin-top:-160px;max-width:80%}}.gb-element-a19b1343{align-items:center;display:flex;flex-direction:column;justify-content:flex-start;max-height:70vh;max-width:100%;min-height:600px;overflow-x:hidden;overflow-y:hidden}@media (max-width:1024px){.gb-element-a19b1343{min-height:450px}}.gb-text-fea3d352{column-gap:20px;display:flex;justify-content:center;margin-bottom:0px;margin-top:0px;padding-bottom:0px;padding-top:0px}.gb-text-fea3d352 a{color:#ffffff}@media (max-width:767px){.gb-text-fea3d352{align-items:center;align-self:center;display:flex;flex-direction:column;justify-items:center;justify-self:center;row-gap:10px;text-align:center}}.gb-element-57f01f3e{font-weight:600;margin-bottom:0px;margin-top:0px;padding:20px}.gb-element-297922b8{max-width:100%;padding-bottom:50px;padding-top:50px;width:100%}.gb-text-4dfcd8d4{font-weight:500;margin-bottom:20px;margin-top:0px;max-width:600px;text-align:center}.gb-text-3c88f2dd{margin-top:0px;max-width:750px;text-align:center}.gb-element-a4833517{align-items:center;display:flex;flex-direction:column;padding-bottom:45px}@media (max-width:767px){.gb-element-a4833517{padding-left:20px;padding-right:20px}}.gb-text-e968183f{font-size:1.1rem;font-weight:500;text-transform:uppercase}.gb-text-649c7f86{margin-bottom:30px;margin-top:0px}.gb-text-58a453cb{align-items:center;background-color:rgba(255,255,255,0);border-bottom-style:solid;border-bottom-width:1px;border-left-style:solid;border-left-width:1px;border-right-style:solid;border-right-width:1px;border-top-style:solid;border-top-width:1px;color:#ffffff;display:inline-flex;font-family:Silka;font-size:1rem;font-weight:300;margin-bottom:200px;text-decoration:none;border-radius:100px}.gb-text-58a453cb:is(:hover,:focus){background-color:rgba(255,255,255,0);color:#ffffff}.gb-media-7b3588d2{height:auto;max-width:100%;mix-blend-mode:lighten;object-fit:cover;width:auto}.gb-text-919d7689{bottom:0px;font-size:0.9rem;position:absolute;right:10px}@media (max-width:1024px){.gb-text-919d7689{right:inherit}}.gb-element-c0910336{align-items:center;background-color:rgba(0,0,0,0);display:flex;flex-direction:column;justify-content:flex-start;max-width:var(--gb-container-width);overflow-x:hidden;overflow-y:hidden;text-align:center;width:calc(50% - 10px);padding:40px}@media (max-width:1024px){.gb-element-c0910336{justify-content:center;margin-left:20px;margin-right:20px;max-width:100%}}@media (max-width:767px){.gb-element-c0910336{width:100%}}.gb-text-ca477e2c{font-size:1.1rem;font-weight:500;text-transform:uppercase}.gb-text-09f2762e{margin-bottom:30px;margin-top:0px}.gb-text-52bffce3{align-items:center;background-color:rgba(255,255,255,0);border-bottom-style:solid;border-bottom-width:1px;border-left-style:solid;border-left-width:1px;border-right-style:solid;border-right-width:1px;border-top-style:solid;border-top-width:1px;color:#ffffff;display:inline-flex;font-family:Silka;font-size:1rem;font-weight:300;margin-bottom:200px;text-decoration:none;border-radius:100px}.gb-text-52bffce3:is(:hover,:focus){background-color:rgba(255,255,255,0);color:#ffffff}.gb-text-92429fde{bottom:0px;font-size:0.9rem;position:absolute;right:10px}@media (max-width:1024px){.gb-text-92429fde{right:inherit}}.gb-media-4d286932{height:auto;max-width:82%;mix-blend-mode:lighten;object-fit:cover;width:auto}.gb-element-53d26403{align-items:center;display:flex;flex-direction:column;justify-content:flex-start;max-width:var(--gb-container-width);overflow-x:hidden;overflow-y:hidden;text-align:center;width:calc(50% - 10px);padding:40px}@media (max-width:1024px){.gb-element-53d26403{justify-content:center;margin-left:20px;margin-right:20px;max-width:100%}}@media (max-width:767px){.gb-element-53d26403{width:100%}}.gb-element-5ce84177{align-self:center;column-gap:20px;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;justify-self:center;margin-bottom:75px;max-width:var(--gb-container-width);row-gap:20px;width:100%}@media (max-width:1024px){.gb-element-5ce84177{display:flex;flex-direction:row;justify-content:center}}.gb-text-49ecdec4{font-size:2rem;font-weight:500;margin-bottom:10px;max-width:400px;text-align:left}@media (max-width:1024px){.gb-text-49ecdec4{font-size:1.2rem}}.gb-text-64c16057{justify-content:flex-start;margin-top:0px;max-width:400px;text-align:left}@media (max-width:1024px){.gb-text-64c16057{font-size:0.8rem;font-weight:300;margin-bottom:20px}}.gb-text-6c550b17{align-items:center;background-color:rgba(255,255,255,0);border-bottom-style:solid;border-bottom-width:1px;border-left-style:solid;border-left-width:1px;border-right-style:solid;border-right-width:1px;border-top-style:solid;border-top-width:1px;color:#ffffff;display:inline-flex;font-family:Silka;font-size:1rem;font-weight:300;text-decoration:none;border-radius:100px}.gb-text-6c550b17:is(:hover,:focus){background-color:rgba(255,255,255,0);color:#ffffff}.gb-element-a1ff62a5{align-items:flex-start;align-self:start;background-blend-mode:soft-light;background-color:rgba(0,0,0,0.37);background-image:url('../../uploads/2025/12/automative-t-1-e1766070640697.avif');background-position:center;background-repeat:no-repeat;background-size:cover;display:flex;flex-direction:column;height:500px;justify-content:flex-end;justify-items:start;justify-self:start;margin-left:20px;margin-right:0px;max-height:500px;min-width:700px;padding-bottom:40px;padding-left:40px;padding-right:40px;text-align:center}@media (max-width:1024px){.gb-element-a1ff62a5{height:400px;min-width:350px;padding-bottom:20px;padding-left:20px;padding-right:40px}}@media (max-width:767px){.gb-element-a1ff62a5{min-width:300px}}.gb-text-3774e04e{font-size:2rem;font-weight:500;margin-bottom:10px;max-width:400px;padding-top:60px;text-align:left}@media (max-width:1024px){.gb-text-3774e04e{font-size:1.2rem}}.gb-text-fcec1c12{justify-content:flex-start;margin-top:0px;max-width:400px;text-align:left}@media (max-width:1024px){.gb-text-fcec1c12{font-size:0.8rem;font-weight:300;margin-bottom:20px}}.gb-text-52bd82e9{align-items:center;background-color:rgba(255,255,255,0);border-bottom-style:solid;border-bottom-width:1px;border-left-style:solid;border-left-width:1px;border-right-style:solid;border-right-width:1px;border-top-style:solid;border-top-width:1px;color:#ffffff;display:inline-flex;font-family:Silka;font-size:1rem;font-weight:300;text-decoration:none;border-radius:100px}.gb-text-52bd82e9:is(:hover,:focus){background-color:rgba(255,255,255,0);color:#ffffff}.gb-element-6f75e14f{align-items:flex-start;align-self:start;background-blend-mode:soft-light;background-color:rgba(0,0,0,0.37);background-image:url('../../uploads/2025/12/Industrial-copy-2-e1766070700424.avif');background-position:center;background-repeat:no-repeat;background-size:cover;display:flex;flex-direction:column;height:500px;justify-content:flex-end;justify-items:start;justify-self:start;margin-left:0px;margin-right:0px;max-height:500px;min-width:700px;padding-bottom:40px;padding-left:40px;padding-right:40px;text-align:center}@media (max-width:1024px){.gb-element-6f75e14f{height:400px;min-width:350px;padding-bottom:20px;padding-left:20px;padding-right:40px}}@media (max-width:767px){.gb-element-6f75e14f{min-width:300px}}.gb-text-3fb52ca9{font-size:2rem;font-weight:500;margin-bottom:10px;max-width:400px;padding-top:60px;text-align:left}@media (max-width:1024px){.gb-text-3fb52ca9{font-size:1.2rem}}.gb-text-b138ea55{justify-content:flex-start;margin-top:0px;max-width:400px;text-align:left}@media (max-width:1024px){.gb-text-b138ea55{font-size:0.8rem;font-weight:300;margin-bottom:20px}}.gb-text-5b7ded07{align-items:center;background-color:rgba(255,255,255,0);border-bottom-style:solid;border-bottom-width:1px;border-left-style:solid;border-left-width:1px;border-right-style:solid;border-right-width:1px;border-top-style:solid;border-top-width:1px;color:#ffffff;display:inline-flex;font-family:Silka;font-size:1rem;font-weight:300;text-decoration:none;border-radius:100px}.gb-text-5b7ded07:is(:hover,:focus){background-color:rgba(255,255,255,0);color:#ffffff}.gb-element-23bce27f{align-items:flex-start;align-self:start;background-blend-mode:soft-light;background-color:rgba(0,0,0,0.37);background-image:url('../../uploads/2025/12/infra-t.avif');background-position:center;background-repeat:no-repeat;background-size:cover;display:flex;flex-direction:column;height:500px;justify-content:flex-end;justify-items:start;justify-self:start;margin-left:0px;margin-right:20px;max-height:500px;min-width:700px;padding-bottom:40px;padding-left:40px;padding-right:40px;text-align:center}@media (max-width:1024px){.gb-element-23bce27f{height:400px;min-width:350px;padding-bottom:20px;padding-left:20px;padding-right:40px}}@media (max-width:767px){.gb-element-23bce27f{min-width:300px;padding-right:40px}}.gb-element-8eb24f5a{column-gap:20px;display:flex;justify-content:safe center;max-width:100%;overflow-x:scroll;row-gap:20px;width:100%}.gb-media-1cdfadaa{filter:contrast(120%);height:auto;max-height:300px;object-fit:contain;width:50%}@media (max-width:1024px){.gb-media-1cdfadaa{margin-bottom:20px;min-width:300px}}.gb-text-eea97d14{font-size:2rem;font-weight:500;margin-bottom:10px;margin-top:0px;max-width:400px;text-align:left}@media (max-width:1024px){.gb-text-eea97d14{text-align:center}}.gb-text-1d040212{margin-bottom:40px}.gb-text-e0363a71{align-items:center;background-color:#ff4d57;color:#ffffff;display:inline-flex;text-decoration:none}.gb-text-e0363a71:is(:hover,:focus){background-color:#FF4D57;color:#ffffff}.gb-element-b3d69c3c{padding-right:20px}@media (max-width:1024px){.gb-element-b3d69c3c{align-items:center;display:flex;flex-direction:column;justify-content:center;padding-right:0px}}@media (max-width:767px){.gb-element-b3d69c3c{display:flex;justify-content:center}}.gb-element-46438074{align-items:center;column-gap:60px;display:flex;flex-direction:row;justify-content:center;max-width:var(--gb-container-width);padding-top:50px}@media (max-width:1024px){.gb-element-46438074{flex-direction:column;justify-items:center;padding-left:40px;padding-right:40px;text-align:center}}.gb-element-e07cd96a{background-blend-mode:normal;background-image:linear-gradient(180deg,rgba(0,0,0,1) 0%,#24713e 45%,#29bdab 75%,#517fa9 100%);background-position:center;background-repeat:no-repeat;background-size:cover;display:block;filter:blur(50px);height:100%;max-height:65%;position:absolute;width:150%}.gb-text-7784a815{padding-top:10px}.gb-text-c5476d2b{font-size:1.5rem;font-weight:300;line-height:1}@media (max-width:1024px){.gb-text-c5476d2b{margin-bottom:15px}}@media (max-width:767px){.gb-text-c5476d2b{font-size:1.2rem}}.gb-element-193b114d{align-items:center;column-gap:20px;display:flex;justify-content:flex-start;justify-items:start}@media (max-width:1024px){.gb-element-193b114d{align-items:flex-start;flex-direction:column;margin-bottom:10px}}.gb-text-d2a6528f{font-family:Silka;font-size:0.8rem;font-weight:300}.gb-text-b022a218{font-size:0.8rem;font-weight:200}.gb-text-b022a218 a{color:#ffffff;text-decoration:none}.gb-element-fe2bb5e1{column-gap:20px;display:flex;flex-direction:row;font-weight:unset;justify-content:space-between}.gb-text-748b798d{font-size:0.8rem;font-weight:200}.gb-element-0a6e1c93{display:block;max-width:var(--gb-container-width);overflow-x:hidden;overflow-y:hidden;position:relative;width:100%;border-radius:15px;padding:40px 65px 20px 65px}@media (max-width:1024px){.gb-element-0a6e1c93{padding-left:20px;padding-right:20px}}.gb-element-389cc346{border-bottom-style:solid;border-bottom-width:0!importantpx;border-right-style:solid;border-right-width:0!importantpx;display:flex;justify-content:center;width:100%;border-radius:0px}.gb-element-36e49148{align-items:flex-end;display:flex;justify-content:center;overflow-x:hidden;overflow-y:hidden;position:relative !important;z-index:0;padding:80px 0px 0px 0px}
/* PROVIZIO HOMEPAGE GENERATED CSS END */

/* PROVIZIO INTERACTION FIXES START */
/* Provizio interaction fixes: mobile menu, footer accordions, full-width CES strip. */
.wp-block-post-content > .green-signal-background {
	width: min(690px, calc(100% - 40px)) !important;
	max-width: 690px !important;
}

.gb-element-297922b8 {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	padding: 50px 0 !important;
}

.gb-element-57f01f3e {
	width: 100% !important;
	margin: 0 !important;
	border-radius: 0 !important;
}

.gb-element-46438074 {
	padding-bottom: 0 !important;
}

#mobile-hamburger {
	align-items: center;
	appearance: none;
	background: transparent;
	border: 0;
	color: #fff;
	cursor: pointer;
	display: none;
	flex: 0 0 30px;
	height: 30px;
	justify-content: center;
	padding: 0;
	position: relative;
	width: 30px;
}

#mobile-hamburger .ub-icon {
	display: none !important;
}

#mobile-hamburger::before {
	background:
		linear-gradient(currentColor, currentColor) 0 0 / 30px 2px no-repeat,
		linear-gradient(currentColor, currentColor) 0 10px / 30px 2px no-repeat,
		linear-gradient(currentColor, currentColor) 0 20px / 30px 2px no-repeat;
	content: "";
	display: block;
	height: 22px;
	width: 30px;
}

@media (max-width: 1024px) {
	#mobile-hamburger {
		display: flex !important;
	}
}

body.menu-open #mobile-hamburger {
	opacity: 0;
	pointer-events: none;
}

.menu-float {
	left: 0;
	position: fixed !important;
	top: 0;
	transform: none !important;
	will-change: auto !important;
	width: 100%;
	z-index: 9999;
}

.glass-flat {
	background-image: linear-gradient(135deg, rgb(0 0 0 / 1%) 0%, rgb(255 255 255 / 3%) 100%);
	backdrop-filter: blur(20px) saturate(120%) !important;
	-webkit-backdrop-filter: blur(20px) saturate(120%) !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.05) !important;
	overflow: hidden;
	position: relative;
}

header.glass-flat {
	border-top: 0 !important;
	border-right: 0 !important;
	border-left: 0 !important;
}

.gb-nav-btn.glass-flat,
.gb-element-389cc346.glass-flat {
	overflow: visible !important;
}

.gb-element-389cc346.glass-flat {
	border-left: 0 !important;
}

#mobile-menu-container {
	height: 100dvh;
	left: auto;
	position: fixed !important;
	right: 0;
	top: 0;
	width: 60vw;
	z-index: 9999 !important;
	background-color: rgba(0, 0, 0, 0.5) !important;
	background-image: linear-gradient(135deg, rgb(0 0 0 / 1%) 0%, rgb(255 255 255 / 3%) 100%) !important;
	backdrop-filter: blur(20px) saturate(120%) !important;
	-webkit-backdrop-filter: blur(20px) saturate(120%) !important;
	border-top: 0 !important;
	border-bottom: 0 !important;
	border-left: 1px solid rgba(255, 255, 255, 0.3) !important;
	border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
	box-shadow: rgb(0 0 0 / 69%) -20px 0 60px 50px !important;
	overflow: visible !important;
}

#mobile-menu-container::before {
	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 800 800' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E") !important;
	border-radius: inherit;
	content: "";
	inset: 0;
	mix-blend-mode: overlay;
	opacity: 0.4;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

#mobile-menu-container > .provizio-mobile-menu-panel {
	background: transparent !important;
	box-shadow: none;
	height: 100%;
	margin-left: auto;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 1;
}

.provizio-mobile-menu-close {
	align-items: center;
	appearance: none;
	background: transparent;
	border: 0;
	color: #ffffff;
	cursor: pointer;
	display: inline-flex !important;
	height: 50px;
	justify-content: center;
	line-height: 1;
	margin: 0;
	padding: 0;
	position: absolute;
	right: 14px;
	top: 14px;
	width: 50px;
	z-index: 3;
}

.provizio-mobile-menu-close svg {
	display: block;
	fill: currentColor;
	height: 20px;
	stroke: none;
	width: 20px;
}

.provizio-mobile-menu-link {
	border: 0 !important;
	color: #ffffff !important;
	font-size: 1rem;
	font-weight: 400;
	justify-content: flex-start;
	text-decoration: none;
}

.provizio-footer-accordions {
	width: 100%;
}

.provizio-footer-accordion-item {
	border: 0 !important;
	margin: 16px 0 !important;
	padding: 0;
}

.provizio-footer-accordion-item summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: 1.6rem;
	font-weight: 500;
	justify-content: space-between;
	list-style: none;
	padding: 0;
}

.provizio-footer-accordion-item summary::-webkit-details-marker {
	display: none;
}

.provizio-footer-accordion-item summary::after {
	content: "+";
	font-size: 1.6rem;
	line-height: 1;
}

.provizio-footer-accordion-item[open] summary::after {
	content: "−";
}

.provizio-footer-accordion-item > :not(summary) {
	margin-left: 0;
	margin-right: 0;
}

.provizio-footer-accordion-item[open] {
	padding-bottom: 0;
}

.gb-element-34ab37fe > .ub-custom-html,
.gb-element-34ab37fe > .ub-custom-html > .ub-custom-html__content {
	min-width: 0;
	width: 100% !important;
	max-width: 100% !important;
}

.gb-element-34ab37fe .gallery-container {
	width: 100% !important;
	max-width: 100% !important;
}

.gb-element-7e2a0f85 > .ub-custom-html,
.gb-element-7e2a0f85 > .ub-custom-html > .ub-custom-html__content,
.success-stories > .ub-custom-html,
.success-stories > .ub-custom-html > .ub-custom-html__content {
	display: contents;
}

body.page-id-1534 .gb-element-a8a15ab0 {
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	max-width: 100vw !important;
	width: 100vw !important;
}

.ub-link.gb-text {
	line-height: 1.3 !important;
}

.ub-link.glass-btn-red,
.ub-link.white-outline-button {
	width: fit-content !important;
	max-width: 100% !important;
	min-width: auto !important;
	flex: 0 0 auto;
}

.ub-link.gb-text-e0363a71 {
	margin-top: 0 !important;
}

.gb-element-61a0c0ed > .glass-flat > .ub-link.glass-btn-red,
.gb-element-61a0c0ed > .glass-flat > .ub-link.white-outline-button {
	align-self: stretch !important;
	width: 100% !important;
}

@media (min-width: 1025px) {
	.gb-element-61a0c0ed > .glass-flat > .ub-link.gb-text-e0363a71,
	.gb-element-61a0c0ed > .glass-flat > .ub-link.gb-text-fb39b0e1 {
		margin-top: auto !important;
	}
}

@media (max-width: 1024px) {
	.gb-element-61a0c0ed > .glass-flat > .ub-link.glass-btn-red {
		margin-top: 40px !important;
	}
}

.gb-shape-5975e9b4 svg {
	clip-rule: evenodd;
	fill-rule: evenodd;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-miterlimit: 10;
}

.gb-shape-5975e9b4 svg path {
	fill: none !important;
	fill-rule: nonzero;
	stroke: #ffef54 !important;
	stroke-width: 26.67px !important;
}

.toggle-wrapper .toggle-tab {
	flex: 1 1 0 !important;
}

.toggle-wrapper .glider.glass-flat {
	height: calc(100% - 14px) !important;
	left: 10px !important;
	overflow: visible !important;
	position: absolute !important;
	top: 7px !important;
	width: calc(50% - 10px) !important;
}

.green-signal-background .gb-text-fb02ac7c,
.green-signal-background .gb-text-61f923a3,
.green-signal-background .product-hero-heading {
	margin-top: 0.83em !important;
}

.success-stories .gb-text-45b68a24 {
	margin-bottom: 10px !important;
}

body.page-id-1534 .success-stories .gb-text-45b68a24 {
	margin-top: 0.83em !important;
}

.success-stories .gb-text-f1641ab5,
.success-stories .gb-text-de503ef0,
.success-stories .gb-text-3c24b683,
.success-stories .gb-text-2fe4b027,
.success-stories .gb-text-14c239d4,
.success-stories .gb-text-a2ac0205 {
	margin-top: 40px !important;
}

.gb-element-220681a0.glass-flat {
	overflow: visible !important;
}

.gb-element-01a2751c > .glass-flat p.gb-text,
.gb-element-25ffd6b1 > .glass-flat p.gb-text {
	margin-bottom: 1em !important;
}

.gb-element-406af3eb {
	margin-top: 75px !important;
}

.gb-element-406af3eb .gb-text-5a78606e,
body.page-id-1534 .gb-element-a8a15ab0 h2.wp-block-heading {
	margin-top: 0.83em !important;
}

.gb-element-c23efd08 .gb-text-45b68a24,
.gb-element-fa7a1b7b .gb-text-39fdd795 {
	margin-bottom: 10px !important;
}

body.page-id-1534 .gb-element-c23efd08 {
	margin-top: 24px !important;
}

.gb-element-c0910336 > p.gb-text:first-child,
.gb-element-53d26403 > p.gb-text:first-child {
	margin-top: 1em !important;
}

.gb-element-4eda049d > .gb-text-879910b3 {
	margin-top: 0.67em !important;
}

.gb-element-a4833517 > .gb-text-3c88f2dd {
	margin-bottom: 1em !important;
}

.gb-element-193b114d,
.gb-element-fe2bb5e1 {
	row-gap: normal !important;
}

.gb-element-193b114d > .gb-text-c5476d2b {
	margin-top: 1em !important;
}

.gb-text-7784a815 {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

@media (min-width: 1025px) {
	.gb-text-7784a815 {
		margin-right: 350px !important;
		width: 620px !important;
	}
}

.gb-element-fe2bb5e1 > .gb-text-d2a6528f {
	margin-top: 1em !important;
}

.gb-element-fe2bb5e1 > .gb-text-b022a218 {
	margin-bottom: 1em !important;
}

.gb-element-0a6e1c93 > .gb-text-748b798d {
	margin: 1em 0 !important;
}

.ub-image.gb-media-1cdfadaa {
	aspect-ratio: 768 / 561;
	flex: 0 0 auto;
	line-height: 0;
	overflow: visible !important;
}

.ub-image.gb-media-1cdfadaa img {
	display: block;
	filter: contrast(120%);
	height: auto !important;
	max-height: 300px;
	object-fit: contain;
	width: 100%;
}

.gb-element-46438074 {
	column-gap: 60px !important;
	row-gap: 0 !important;
}

@media (min-width: 1025px) {
	.ub-image.gb-media-1cdfadaa {
		width: 352px !important;
	}
}

@media (max-width: 1024px) {
	.ub-image.gb-media-1cdfadaa {
		margin-bottom: 20px;
		min-width: 300px;
		width: 300px !important;
	}
}

.gb-element-c23efd08.glow-orb-bg-l .gb-text-45b68a24 {
	font-size: 1.65rem !important;
	line-height: 1.3 !important;
}

header .ub-image.gb-media-d2ee1d36 {
	height: 36px !important;
	width: 144px !important;
	max-width: 144px !important;
	overflow: visible !important;
}

header .ub-image.gb-media-d2ee1d36 a,
header .ub-image.gb-media-d2ee1d36 img {
	height: 36px !important;
	width: 144px !important;
}

header .ub-image.gb-media-d2ee1d36 img {
	object-fit: contain !important;
}
/* PROVIZIO INTERACTION FIXES END */

/* ────────────────────────────────────────────────────────────────────────
   PRODUCT-PAGE STATS STRIP (optional MODULE['stats_strip'])
   Shown between hero-media and sectors for products with strong
   headline numbers (URMAP: 30+ OEMs, 95% detection rate, etc.)
   ──────────────────────────────────────────────────────────────────────── */
.product-page-stats {
	margin-top: -30px; /* tuck up under the hero-media a touch */
}

.product-page-stat-card {
	gap: 4px;
	min-height: 110px;
	justify-content: center;
}

.product-page-stat-value {
	font-size: 2.4rem !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	margin: 0 !important;
	letter-spacing: -0.01em;
}

.product-page-stat-label {
	font-size: 0.85rem !important;
	color: rgba(255, 255, 255, 0.7) !important;
	margin: 0 !important;
	text-transform: uppercase;
	letter-spacing: 1.5px;
}

@media (min-width: 768px) and (max-width: 1024px) {
	.product-page-stats > .ub-block {
		--ub-grid-columns: repeat(2, minmax(0, 1fr)) !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 767px) {
	.product-page-stats > .ub-block {
		--ub-grid-columns: repeat(2, minmax(0, 1fr)) !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px !important;
	}
	.product-page-stat-value { font-size: 1.9rem !important; }
	.product-page-stat-label { font-size: 0.75rem !important; }
	.product-page-stat-card {
		min-height: 92px;
		padding: 18px 12px !important;
	}
	.product-page-stats {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
}

/* ────────────────────────────────────────────────────────────────────────
   HOW-IT-WORKS grid variations (3, 4, 5 steps)
   At tablet width: 4 or 5 steps collapse to 2-col.
   At mobile: any count → 1-col (handled by existing rule via :last-child).
   ──────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
	.product-page-how-grid-4,
	.product-page-how-grid-5 {
		--ub-grid-columns: repeat(2, minmax(0, 1fr)) !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* Five-step how-it-works on desktop: use 3+2 wrap layout for readability
   rather than 5 narrow columns. */
@media (min-width: 1025px) {
	.product-page-how-grid-5 {
		--ub-grid-columns: repeat(3, minmax(0, 1fr)) !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

/* ────────────────────────────────────────────────────────────────────────
   VARIANTS grid variations (2, 3 cards). Two-card variant uses a wider layout.
   ──────────────────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
	.product-page-variants-grid-2 {
		--ub-grid-columns: repeat(2, minmax(0, 1fr)) !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		max-width: 800px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ────────────────────────────────────────────────────────────────────────
   RELATED grid variations (3, 4 cards). At tablet width: any goes 2-col.
   ──────────────────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
	.product-page-related-grid-3 {
		--ub-grid-columns: repeat(3, minmax(0, 1fr)) !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

/* ────────────────────────────────────────────────────────────────────────
   SECTORS grid variations (2, 3, 4 tiles).
   ──────────────────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
	.product-page-sectors-grid-3 {
		--ub-grid-columns: repeat(3, minmax(0, 1fr)) !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
	.product-page-sectors-grid-2 {
		--ub-grid-columns: repeat(2, minmax(0, 1fr)) !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}


/* ────────────────────────────────────────────────────────────────────────
   HOW-IT-WORKS — horizontal-scroll row of larger step cards.
   The tiles container is rendered as an inline grid by the Universal
   Block plugin (gridTemplateColumns="repeat(3, minmax(0, 1fr))"); we
   override that to a horizontal flex row so each card can sit at a
   fixed, comfortable width and the SVG diagrams render larger. Snap-x
   keeps each card aligned when the user flicks; the styled scrollbar
   makes the affordance obvious on desktop.
   ──────────────────────────────────────────────────────────────────────── */
.product-page-how-grid {
	display: flex !important;
	grid-template-columns: none !important;
	overflow-x: auto;
	/* `clip` (not `hidden`) — clips overflow visually but does NOT make
	   the element a scroll container for the Y axis. Vertical wheels
	   bubble straight to the page, so native page-scroll speed is
	   preserved when the cursor sits over the row. */
	overflow-y: clip;
	gap: 24px !important;
	padding: 4px 4px 8px 4px;
	margin: 0 -4px;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 4px;
	-webkit-overflow-scrolling: touch;
	width: calc(100% + 8px);
	box-sizing: border-box;
	/* Don't let horizontal overscroll chain into the browser history
	   gesture; vertical chaining is fine because Y isn't a scroll axis
	   here. */
	overscroll-behavior-x: contain;
	/* Hide the native scrollbar in Firefox / legacy Edge — the ← / →
	   arrow buttons are the affordance. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

/* Hide the WebKit / Blink scrollbar too. */
.product-page-how-grid::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

/* Each step card sits at a fixed wider width so the diagram inside has
   room to breathe. Snap-align means the user always rests on a card
   boundary, not mid-card. */
.product-page-how-grid > .ub-block {
	flex: 0 0 460px;
	max-width: 90vw;
	scroll-snap-align: start;
	min-width: 0;
}

/* On narrow phones the fixed 460px width is taller than the viewport,
   so cap to 88vw for comfortable single-card scrolling. */
@media (max-width: 600px) {
	.product-page-how-grid > .ub-block {
		flex: 0 0 88vw;
	}
}

/* ────────────────────────────────────────────────────────────────────────
   How-it-works scroll arrows — sit at the bottom-right of the section
   and scroll the tiles row left/right one card at a time. The arrows are
   the affordance: with bigger fixed-width cards the row no longer fits
   in-frame on most viewports, so the user needs a visual cue.
   ──────────────────────────────────────────────────────────────────────── */
.product-page-how-controls {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 18px;
	padding: 0 4px;
}

.product-page-how-arrow {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(29, 231, 206, 0.08);
	border: 1px solid rgba(29, 231, 206, 0.30);
	color: #1DE7CE;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}

.product-page-how-arrow:hover {
	background: rgba(29, 231, 206, 0.18);
	border-color: rgba(29, 231, 206, 0.55);
}

.product-page-how-arrow:active {
	transform: scale(0.94);
}

.product-page-how-arrow svg {
	width: 20px;
	height: 20px;
	display: block;
}

/* ────────────────────────────────────────────────────────────────────────
   Integration chip tickmarks — mint check icon inside each glass pill,
   so each line reads as 'yes, RaZIR works with this'. The SVG lives in
   the background-image so there's no markup change.
   ──────────────────────────────────────────────────────────────────────── */
.product-page-integration-chips li {
	padding-left: 18px;
	display: inline-flex;
	align-items: center;
}

.product-page-integration-chips li::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 10px;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231DE7CE%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}