/*
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%);
    
  /* 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:has(#card2[data-active="true"]) #vid-carousel-text-2
{
	display: block;
}

.success-stories:has(#card1[data-active="true"]) #vid-carousel-text-1
{
	display: block;
}
.success-stories:has(#card3[data-active="true"]) #vid-carousel-text-3
{
	display: block;
}



#vid-carousel-text-1, #vid-carousel-text-2, #vid-carousel-text-3
{
	display: none;
}

html, body
{
	overflow-x: hidden;
}



/* 1. Base Transition for the Image */
#accordion-switcher #accordion-img {
   background-image: url("/wp-content/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("/wp-content/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("/wp-content/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("/wp-content/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("/wp-content/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;
	}
}

@media (min-width: 768px) {
	/*html, body {
  overscroll-behavior: none;
}*/
	
	.parallelogram *
{
	transform: skewX(20deg) translate(-14%) scale(1.2);

}
}
/* 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("/wp-content/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 */
}

/* 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;
  }

  /* 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;
}

/* 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;
    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;
    left: 0;
    width: calc(100% + 20px);
    bottom: -37px;
    left: -10px;
    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 */
/* Force Silka to Swap */
@font-face {
  font-family: 'Silka';
  font-display: swap !important;
  src: local('Silka');
}

/* Force Lato to Swap */
@font-face {
  font-family: 'Lato';
  font-display: swap !important;
  src: local('Lato');
}

/* 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;
}