@media (min-width: 768px) and (max-width: 991px) {
    .w-dyn-list2 .scroller .scroller-inner {
        gap: 50px;
    }
}

@media (max-width: 767px) {
    .w-dyn-list2 .scroller .scroller-inner {
        gap: 30px;
    }
}

.w-dyn-list2:hover .scroller .scroller-inner {
    animation-play-state: paused;
}

@keyframes scroll {
    to {
        transform: translate(calc(-50% - 40px));
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    @keyframes scroll {
        to {
            transform: translate(calc(-50% - 25px));
        }
    }
}

@media (max-width: 767px) {
    @keyframes scroll {
        to {
            transform: translate(calc(-50% - 15px));
        }
    }
}



/* Initial hidden state */
.zoom-in-init {
    opacity: 0;
    transform: scale(0.95);
}

/* Trigger zoom-in animation */
.zoom-in-animate {
    opacity: 1;
    transform: scale(1);
    transition: all 0.8s ease-out;
}

/* Optional stagger delay */
.zoom-delay-1 {
    transition-delay: 0.2s;
}

.zoom-delay-2 {
    transition-delay: 0.4s;
}

/* Icon hover effect */
.option-icon img {
    transition: transform 0.3s ease, filter 0.3s ease;
}

.option-icon img:hover {
    transform: scale(1.15);
    /* Adjust zoom level here */
    filter: brightness(1.1);
}

.option-icon img {
    transition: transform 0.3s ease, filter 0.3s ease;
}

.option-icon img:hover {
    transform: scale(1.15);
    filter: brightness(1.1);
}

/* Heading styling */
.clientele-heading {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.clientele-heading.animate {
    opacity: 1;
    transform: translateY(0);
}

/* Enhanced Card Hover Animations - Reusable across pages */
/* ====================================================== */
/*
HOW TO USE THESE ANIMATIONS ON ANY PAGE:

1. For the card container, add class: "enhanced-card-wrapper"
2. For the card content, add class: "enhanced-card" 
3. For arrows, add class: "enhanced-arrow"

Example HTML structure:
<div class="enhanced-card-wrapper">
    <div class="enhanced-card">
        <div class="option-icon">...</div>
        <h3 class="bold-text">...</h3>
        <p class="provide-caption">...</p>
    </div>
    <a href="..." class="enhanced-arrow">...</a>
</div>

These classes provide:
- V-shape shadows with depth
- Smooth hover animations
- Icon scaling and rotation
- Text color transitions
- Enhanced glow effects
*/

/* Base card styling with V-shape shadows */
.enhanced-card {
    border-radius: 12px;
    padding: 30px 20px;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.08),
        0 2px 10px rgba(0, 0, 0, 0.05),
        0 1px 5px rgba(0, 0, 0, 0.03);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
}

/* Enhanced hover effect with V-shape shadow */
.enhanced-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.15),
        0 8px 25px rgba(0, 0, 0, 0.1),
        0 4px 15px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Top border animation on hover */
.enhanced-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0070E0, #0056b3);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.enhanced-card:hover::before {
    transform: scaleX(1);
}

/* Icon animation on hover */
.enhanced-card .option-icon {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.enhanced-card:hover .option-icon {
    transform: scale(1.1) rotate(0deg);
}

/* Text animation on hover */
.enhanced-card:hover .bold-text {
    color: #0070E0;
    transform: translateY(-2px);
}

.enhanced-card:hover .provide-caption {
    color: #555;
}

.enhanced-card .bold-text, 
.enhanced-card .provide-caption {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Enhanced glow effect on hover */
.enhanced-card:hover {
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.15),
        0 8px 25px rgba(0, 0, 0, 0.1),
        0 4px 15px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.06),
        0 0 20px rgba(0, 112, 224, 0.1),
        0 0 10px rgba(0, 112, 224, 0.05);
}

/* Card wrapper hover effects */
.enhanced-card-wrapper:hover {
    cursor: pointer;
    transform: scale(1.01);
}

.enhanced-card-wrapper {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Smooth transition for all interactive elements */
.enhanced-card-wrapper * {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Enhanced arrow hover effect with V-shape shadow */
.enhanced-arrow:hover {
    transform: translateY(-5px) scale(1.15);
    box-shadow: 
        0 12px 30px rgba(102, 126, 234, 0.5),
        0 6px 20px rgba(102, 126, 234, 0.3),
        0 3px 10px rgba(102, 126, 234, 0.2);
}

/* ====================================================== */

/* Image hover effect */
.pro-main-image img {
    transition: transform 0.4s ease;
}

.pro-main-image img:hover {
    transform: scale(1.15);
}

/* Logo animation on load */
.pro-main-image {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.6s ease;
}

.pro-main-image.animate {
    opacity: 1;
    transform: scale(1);
}

.heder-position-center {
    display: flex;
    justify-content: center;
    width: 100%;
}

.heder-position-center h1 {
    text-align: center;
    max-width: 900px;
    /* optional to prevent super long lines */
}

.hero-para {
    text-align: center !important;
    max-width: 800px;
    /* optional */
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* Style the service cards container */
.options-list {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    /* max-width: 350px !important; */
}

/* .options-list {
    flex: 1 1 300px;
    max-width: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
} */


/* Style the service card */
.options {
    border-radius: 12px;
    padding: 30px 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    background-color: #ffffff;
}

/* Hover effect for the card */
.options-list:hover .options {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    background: linear-gradient(135deg, #e8f2ff 0%, #f0f8ff 100%);
}

/* Style the arrow as a circular button */
.arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(10px);
    text-decoration: none;
}

/* Show arrow when service item is hovered */
.options-list:hover .arrow {
    opacity: 1 !important;
    transform: translateY(-10px);
    /* Arrow moves up more on hover */
}

/* Arrow hover effect */
.arrow:hover {
    transform: translateY(-2px) scale(1.1);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

/* Arrow icon styling */
.arrow img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
    /* Makes the arrow white */
}

/* Change cursor on hover */
.options-list:hover {
    cursor: pointer;
}

/* Container for the cards */
.provide-option {
    display: flex;
    justify-content: center;
    /* Center cards */
    gap: 40px;
    /* Space between cards */
    flex-wrap: wrap;
    /* Allow wrapping on smaller screens */
}

/* Each card wrapper */
.options-list {
    flex: 1 1 300px;
    /* Grow, shrink, min width 300px */
    max-width: 500px;
    /* Prevent over-stretching */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wf-force-outline-none[tabindex="-1"]:focus {
    outline: none;
}


.option-images {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* keeps aspect ratio */
    /* fix aspect ration to 119X100 */
    max-width: 119px;
    /* max width */
    max-height: 100px;
    /* max height */
}

.provided-solutions-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* keeps aspect ratio */
    max-width: 32px;
    /* max width */
    max-height: 36px;
    /* max height */
}

.service-features-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* keeps aspect ratio */
    max-width: 54px;
    /* max width */
    max-height: 54px;
    /* max height */
}

.service-icons {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* keeps aspect ratio */
    max-width: 32px;
    /* max width */
    max-height: 32px;
    /* max height */
    margin-right: unset;

}

.icon-block {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* keeps aspect ratio */
    max-width: 38px;
    /* max width */
    max-height: 38px;
    /* max height */
}

.option-icon{

        width: 100%;
    height: 100%;
    object-fit: contain;
    /* keeps aspect ratio */
    max-width: 119px;
    /* max width */
    max-height: 90px;
}

/* media query for real-time-user */
/* --- Mobile-Only Panel Page Enhancements --- */
@media (max-width: 767px) {
    .panel-page, .page-container,.feature-success-section, .service-offer-section {
        padding-left: 8px !important;
        padding-right: 8px !important;
        box-sizing: border-box;
        width: 100vw;
        max-width: 100vw;
        overflow-x: hidden;
            right: 5px;

    }
    .our-service-section{
         padding-left: 8px !important;
        padding-right: 8px !important;
        box-sizing: border-box;
        max-width: 100vw;
        overflow-x: hidden;
    }
    .our-service-heading, .feature-success-header, .service-offer-heading {
        font-size: 1.5rem !important;
        text-align: center;
        padding: 0 4px;
        line-height: 1.2;
    }
    .our-service-paragraph, .feature-sucess-description, .service-offer-paragraph {
        font-size: 1rem !important;
        padding: 0 2px;
        text-align: center;
        margin-bottom: 24px !important;
    }
    .our-service-block, .service-questions {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        margin-top: 12px !important;
    }
    .service, .options, .offer {
        padding: 16px 8px !important;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0,112,225,0.07);
        margin-bottom: 12px;
    }
    .service-icons, .service-features-icon, .provided-solutions-icon, .option-images, .option-icon {
        max-width: 38px !important;
        max-height: 38px !important;
    }
    .bold-text, .service .bold-text, .offer .bold-text {
        font-size: 1.1rem !important;
        text-align: center !important;
        /* margin: 0 auto 6px auto; */
        line-height: 1.3;
    }
    .service p, .answer-paragraph, .technology-details {
        font-size: 0.98rem !important;
        line-height: 1.5;
        padding: 0 2px;
    }
    .feature-success-main-image, .question-main-image, .real-time-user-image {
        max-width: 98vw !important;
        width: 100% !important;
        height: auto !important;
        border-radius: 10px !important;
        margin: 0 auto 12px auto !important;
        display: block;
    }
    .feature-success-main-block, .feature-success-section, .feature-success-text-block {
        padding: 0 !important;
        margin: 0 !important;
    }
       /* .marquee-container {
     /* height: 100px !important; */
   
   /* Increase clientele section height for mobile */
   /* .Clientele-section .marquee-container {
     height: 120px !important;
   } */
   .logo {
     height: 148px !important;
   }
   /* .Clientele-section .logo {
     height: 64px !important;
   } */
    .answers-block, .question-block {
        padding: 10px 4px !important;
        border-radius: 10px;
    }
    .question-block .bold-text.accordion {
        font-size: 1rem !important;
    }
    .banner-float-images, .home-hero-image-block {
        flex-direction: column !important;
        align-items: center !important;
        margin: 0 auto !important;
        gap: 10px !important;
    }
    .master-container {
        max-width: 90vw !important;
    }
    .overlay-image {
        width: 60px !important;
        border-radius: 4px !important;
    }
    .tab-items-heading {
        font-size: 1.2rem !important;
    }
    /* Hide elements only for desktop if needed */
    .hide-on-mobile {
        display: none !important;
    }

    .success-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        /* keeps aspect ratio */
        max-width: 360px;
        /* max width */
        max-height: 432px;

    }

}
@media (max-width: 767px) {
.real-time-user{
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* keeps aspect ratio */
    max-width: 192px;
    /* max width */
    max-height: 137px;
}

.question-main-image{
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* keeps aspect ratio */
    max-width: 360px;
    /* max width */
    max-height: 432px;
}
}

/* ===== Panel page mobile-only refinements (no desktop impact) ===== */
@media (max-width: 767px) {
  /* Map height on mobile */
  #chartdiv {
    height: 360px !important;
  }

  /* Feature section stacks vertically with tighter spacing */
  .feature-success-main-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .feature-success-main-image {
    height: auto !important;
    position: relative !important;
  }
  .feature-success-text-block {
    padding: 0 8px !important;
  }
  /* Ensure overlay elements are visible on mobile */
  /* Overlays on top of the main image */
  .utilize-time {
    /* position: absolute !important; */
    bottom: 110px !important;
    right: 0px !important;
    opacity: 1 !important;
    transform: none !important;
    margin: 0 !important;
    display: block !important;
    width: 44% !important;
    max-width: 44% !important;
    z-index: 4 !important; /* above success image */
  }
  .utilize-time img,
  .feature-utilize-image {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
  }


  .revenue {
    position: absolute;
    top: 50px;
    left: 10px;
    z-index: 6;
    opacity: 0;
    transform: translateX(-30px) scale(0.8);
    transition: all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
  }
  .graphical-image-block {
    position: absolute !important;
    bottom:36px !important;
    /* left: 118px !important; */
    opacity: 1 !important;
    transform: none !important;
    width: 40% !important;
    max-width: 40% !important;
    z-index: 3 !important; /* between success and utilize-time */
  }
  .graphical-image-block img,
  .feature-graphical-image {
    width: 100% !important;
    height: auto !important;
  }

  /* Questions/answers layout */
  .questions-section .service-questions {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .questions-text-block {
    order: 1;
    padding: 0 8px;
    /* text-align: center !important; */
  }
  .questions-header,
  .questions-paragraph {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .question-block .bold-text.accordion {
    text-align: center !important;
  }
  .questions-image {
    order: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  /* Prevent semi-visible accordion on mobile only when collapsed */
  .questions-section .answers-block[style*="height: 0"] {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }
  /* Keep content readable when expanded */
  .questions-section .answers-block:not([style*="height: 0"]) .answer-paragraph {
    padding: 0 8px 12px 8px !important;
    margin: 0 !important;
  }

  /* New ideas block */
  .new-ideas-section .new-ideas-main-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .ideas-text,
  .ideas-image-block {
    width: 100% !important;
  }
  .idea-main-image {
    width: 100% !important;
    height: auto !important;
  }

  /* Buttons: full-width tap targets */
  .hero-caption-buttons-one {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  .hero-caption-buttons-one .trial-button,
  .hero-caption-buttons-one .w-button {
    width: 100% !important;
    /* max-width: none !important; */
  }

  /* Offers grid within coverage section */
  .offer-main-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 8px;
  }
  .offer {
    min-height: unset;
    height: auto;
  }
}

@media (max-width: 480px) {
  /* Single column on very small devices */
  /* .offer-main-block {
    grid-template-columns: 1fr !important;
  } */
  /* .logo {
    height: 36px !important;
  } */

  
}

  .customer-review {
    box-shadow: 0 4px 12px rgba(234, 231, 231, 0.15);
    /* height & width*/

    /* x-offset | y-offset | blur | color */
  }
  /* mobile view */
  @media (max-width: 767px) {
    .accordion,.minus-icon,.plus-icon{
      padding-left:10px;
      padding-right: 20px;
    }
    .our-approachs,.feature-sucess-description,.feature-success-header {
      padding-left: 20px;
    }
    .revenue {
      margin-left: 30px;
    }
  }



.balance-image-block{

    padding-bottom: 25px !important;
}


/* Override for idea-review-image: ensure shadow isn't clipped and apply levitation */
.idea-review-image {
    overflow: visible !important; /* prevent clipping */
    background: transparent !important; /* avoid white box before image loads/animates */
    border-radius: 20px !important;
}

.idea-review-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit !important;
    box-shadow: none !important; 
    transition: box-shadow 220ms ease, transform 220ms ease, opacity 220ms ease;
}

/* When the animation class is present (image becomes visible), add the shadow and subtle lift */
.animate .idea-review-image img {
    box-shadow: 0 12px 30px rgba(0,0,0,0.15) !important;
    transform: translateY(-8px) !important;
    opacity: 1 !important;
}

.animate .idea-review-image:hover .idea-review-image img,
.animate .idea-review-image img:hover,
.animate .idea-review-image img:focus {
    transform: translateY(-12px) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12) !important;
}


/* Same approach for .cusomer-image (keeps spelling used in source) */
.cusomer-image {
    overflow: visible !important;
    background: transparent !important;
    border-radius: 20px !important;
}

.cusomer-image img {
    display: block;
    width: 100%;
    height: auto;
    /* border-radius: inherit !important; */
    box-shadow: none !important;
    transition: box-shadow 220ms ease, transform 220ms ease, opacity 220ms ease;
}

.animate .cusomer-image img {
    /* box-shadow: 0 12px 30px rgba(0,0,0,0.15) !important; */
    box-shadow: 6px 16px 30px #0070e073 !important;
    transform: translateY(-8px) !important;
    opacity: 1 !important;
}

.animate .cusomer-image:hover .cusomer-image img,
.animate .cusomer-image img:hover,
.animate .cusomer-image img:focus {
    transform: translateY(-12px) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12) !important;
}

/* Mobile only */
@media (max-width: 768px) {
  .review {
    height: auto !important;     
    overflow: hidden !important; /* keep everything inside card */
    padding: 20px;               /* make room inside */
    box-sizing: border-box;
  }

  .people-name-and-image {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 15px;            /* spacing from text */
  }

  .name-block {
  flex: 1;                   /* takes up remaining space */
}
  .profile-image-block-one {
    flex: 0 0 auto;
    max-width: 100px;            /* control size */
    height: auto !important;
  }

  .profile-image-block-one img {
    width: 100%;
    height: auto !important;
    object-fit: contain;
    border-radius: 50%;          /* keep avatar round */
    display: block;
  }
}