/* 1. Prepare the icon box container */
.uc_icon_box {
  position: relative;
  overflow: hidden;
  z-index: 1;
  /* --- IMPORTANT: Forcefully remove Elementor's transition --- */
  transition: none !important;
}
/* 2. Create the slide-in background layer */
.uc_icon_box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;

  /* The hover color is now defined ONLY here */
  background-color: #d8e2a3;

  /* Initial state: Pushed down and hidden */
  transform: translateY(100%);

  /* The slide animation settings */
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 3. Trigger the animation on hover */
.uc_icon_box:hover::before {
  transform: translateY(0%);
}

/* 4. Ensure the original background remains transparent on hover */
.uc_icon_box:hover {
  background-color: transparent !important;
}

/* 5. Ensure the content (icon, text) stays on top of the sliding background */
.uc_icon_box .elementor-widget-container {
  position: relative;
  z-index: 2;
}
/* --- STICKY CARDS EFFECT --- */


.uc_sticky_parent > .e-con-inner {
    display: flex;
    align-items: flex-start;
    gap: 2rem; 
}


.uc_left_col {
    width: 50%;
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
    height: calc(100vh - 100px); 
}

.uc_right_col {
    width: 50%;
    position: relative;
}

.uc_scroll_item {
    display: flex;
    justify-content: center;
    align-items: center;
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
    height: calc(100vh - 200px); 
    width: 100%;
    border-radius: 20px;
    background-color: #ffffff; 
    transform-origin: center;
    transform: scale(1);
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.uc_scroll_item:not(:last-child) {
    transform: scale(0.9);
}
/* --- START: SOLUTIONS PAGE ANIMATION (v2) --- */

.uc_serve_head {
    opacity: 0;
    transform: translateY(30px); /* Starts 30px lower than its final position */
    
    /* This tells the browser to smoothly animate the changes */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 2. This is the final state after the .is-visible class is added */
.uc_serve_head.is-visible {
    opacity: 1;
    transform: translateY(0); /* Returns to its original position */
}
.uc_serve_text {
    opacity: 0;
}

/* 2. This sets up the mask for the line-by-line reveal */
.uc_serve_text .qodef-m-text {
    /* The mask is a gradient that goes from visible (black) to hidden (transparent) */
    mask-image: linear-gradient(to bottom, black 20%, transparent 100%);
    
    /* Make the mask twice as tall as the container to allow for sliding */
    mask-size: 100% 200%;
}
/* --- END: SOLUTIONS PAGE ANIMATION --- */
.uc_solution_box{
	overflow: hidden;
  z-index: 1;
  /* --- IMPORTANT: Forcefully remove Elementor's transition --- */
  transition: none !important;
}
.uc_solution_box .elementor-icon {
	background-color: #D8E2A3!important;
    transition: background-color 0.3s ease;
}
.uc_solution_box .elementor-icon i {
    transition: color 0.3s ease;
}

.uc_solution_box:hover .elementor-icon {
 
  background-color: #121d21!important;
}

.uc_solution_box:hover .elementor-icon i {
  
  color: #FFFFFF;
}
.uc_solution_box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: #d8e2a3;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.uc_solution_box:hover::before {
  transform: translateY(0%);
}
.uc_solution_box:hover {
  background-color: transparent !important;
}

.uc_accordion .ui-accordion-header{
	border-top: 1px solid #EAEAEA;
}
.uc_accordion .qodef-e-icon i{
	background-color: #d8e2a3;
    border-radius: 5px;
	width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
	    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);

}
.uc_accordion .qodef-e-icon i:hover {
    transform: rotate(180deg);
}
.home .uc_icon_box {
  cursor: pointer; 
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}
@media (max-width: 768px) {

    /* 1. Stack the main columns */
    /* Change the flexbox direction from row to column */
    .uc_sticky_parent > .e-con-inner {
        flex-direction: column;
    }

    /* 2. Reset the left column */
    .uc_left_col {
        position: relative; /* CRITICAL: Disables the "sticky" effect */
        width: 100%;        /* Make it full-width */
        height: auto;         /* Let its content determine its height */
        margin-bottom: 3rem;  /* Add space between it and the cards below */
    }

    /* 3. Reset the right column */
    .uc_right_col {
        width: 100%; /* Make it full-width */
        /* CRITICAL: Override the tall height set by JavaScript */
        height: auto !important;
        min-height: unset !important;
    }

    /* 4. Reset the individual cards */
    .uc_scroll_item {
        position: relative !important;
        opacity: 1 !important;
        transform: none !important;
        
        /* --- THIS IS THE FIX --- */
        /* Override the large desktop height and let the content define the size */
        height: auto;
        min-height: unset; /* Explicitly removes the min-height from desktop */
        padding: 1.5rem;   /* Add some internal spacing for mobile */
        /* --- END OF FIX --- */
        
        margin-bottom: 1.5rem;
    
    }

    /* 5. Remove the margin from the very last card for clean spacing */
    .uc_scroll_item:last-child {
        margin-bottom: 0;
    }

}
.gtranslate_wrapper {
    display: flex;
    gap: 10px; 
    align-items: center; /* This centers the flags vertically if they're different sizes */
}
@media (max-width: 768px) {
.gtranslate_wrapper {
    margin-left: 15px!important;
    margin-bottom:20px;
}
.glink {
margin-right:10px;
  }
a.glink img {
    display: block;
    width: 40px;
}
    
}