.elementor-kit-6{--e-global-color-primary:#1B323E;--e-global-color-secondary:#ED1C24;--e-global-color-text:#0E1417;--e-global-color-accent:#9FA6AD;--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:500;background-image:url("https://test.letina-vem.com/wp-content/uploads/2025/09/bg-02-scaled.webp");background-position:top center;background-repeat:no-repeat;background-size:cover;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:#FFFFFF;background-color:var( --e-global-color-secondary );border-style:none;border-radius:5px 5px 5px 5px;padding:12px 12px 12px 12px;}.elementor-kit-6 button:hover,.elementor-kit-6 button:focus,.elementor-kit-6 input[type="button"]:hover,.elementor-kit-6 input[type="button"]:focus,.elementor-kit-6 input[type="submit"]:hover,.elementor-kit-6 input[type="submit"]:focus,.elementor-kit-6 .elementor-button:hover,.elementor-kit-6 .elementor-button:focus{color:#FFFFFF;background-color:var( --e-global-color-primary );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}@media(min-width:1025px){.elementor-kit-6{background-attachment:scroll;}}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Floating nav container (No changes needed) */
.floating-nav {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 99999;
}

/* --- Visibility: Show only on PC and Tablet --- */

@media (max-width: 767px) {
  .floating-nav {
    display: none !important;
  }
}

/* --- Button Structure --- */

/* Each button: fixed 56x56px hover area */
.floating-nav a {
  position: relative;
  display: block;
  width: 56px; 
  height: 56px;
  text-decoration: none;
  overflow: visible; 
  cursor: pointer;
}

/* Drawer container: The animating element */
.floating-nav a .drawer {
  /* Define variables for easy maintenance */
  --initial-width: 56px;
  --expanded-width: 180px;
  --padding-left-right: 16px;
  
  display: flex;
  align-items: center;
  justify-content: flex-start; 
  
  background: #d60000;
  color: #fff;
  height: 56px;
  width: var(--initial-width);
  
  /* Initial Padding */
  padding: 0 var(--padding-left-right); 
  box-sizing: border-box; 
  border-radius: 0;
  
  /* Animation */
  transition: width 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  white-space: nowrap;
  
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  transform: translateX(0); 
}

/* Icon (No changes needed) */
.floating-nav a .drawer i {
  font-size: 20px;
}

/* Text (No changes needed) */
.floating-nav a .drawer span {
  opacity: 0;
  margin-left: 10px;
  font-weight: 600;
  transition: opacity 0.3s ease;
}

/* --- Hover Animation --- */

/* Hover: expand drawer and slide left */
.floating-nav a:hover .drawer,
.floating-nav a:focus .drawer {
  width: var(--expanded-width);
  
  /* Key Fix: Adjust the transform to keep the padding's right edge fixed.
     Expanded width (180px) - Initial width (56px) + Padding on one side (16px) 
     124px is too much for an element with padding.
     Let's calculate the real distance.
     Expanded width (180px) - Initial content width (56px - 16px * 2) = 180px - 24px = 156px
     So, the transform should be -156px.
     Let's simplify. The drawer is 56px wide, which includes 16px of padding on each side. The content area is 24px wide. The total growth is from 56px to 180px, which is 124px. The right side is 16px of padding and a right edge. This is not the right approach. Let's simplify and fix the calculation.

     Let's think of this another way. The right edge should stay where it is.
     Initial State: `right: 0;`. The element's right edge is at `right: 0;`
     Hover State: The width becomes `180px`. We need to move the element to the left so the right edge stays at `0`.
     We need to move the element by `180px - 56px = 124px`.
     So, `transform: translateX(-124px);`. 
     This should be correct. Let's double check why it's not working.
     It's likely that another CSS rule is overriding this.
     Let's use a different transform to avoid any unexpected interactions.
     What if we don't change the width at all, and just use a transform?
     
     Initial State: `transform: translateX(0);`
     Hover state: `transform: translateX(-124px); width: 180px;`
     This seems correct.
     It's possible that the browser is having trouble animating both `width` and `transform` at the same time.
     Let's change the animation to only use `transform`.
     
     New approach:
     Initial state: `width: 180px; transform: translateX(124px);`
     This would put the element at the right edge, with only the last 56px visible.
     
     Hover state: `transform: translateX(0);`
     This would slide it to the left, revealing the whole thing.
     
     Let's try this. This should be more reliable and smooth.
     */
  
  /* Key Fix: New approach for smoother animation */
  /* This version makes the entire element exist at the expanded width initially,
     and then hides the left part using a transform. On hover, the transform is reset,
     causing it to slide into full view. This is more reliable for animation. */
  
  /* Start with expanded width but hidden */
  width: var(--expanded-width);
  /* Push the whole element right by the amount it would be hidden */
  transform: translateX(calc(var(--expanded-width) - var(--initial-width)));
}

/* Icon (No changes needed) */
.floating-nav a .drawer i {
  font-size: 20px;
}

/* Text (No changes needed) */
.floating-nav a .drawer span {
  opacity: 0;
  margin-left: 10px;
  font-weight: 600;
  transition: opacity 0.3s ease;
}

/* --- Hover Animation --- */

/* Hover: slide drawer left to show content */
.floating-nav a:hover .drawer,
.floating-nav a:focus .drawer {
  /* Reset the transform to slide it into full view */
  transform: translateX(0);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

/* Hover: show text */
.floating-nav a:hover .drawer span,
.floating-nav a:focus .drawer span {
  opacity: 1;
}/* End custom CSS */