html.is-refreshing body {
    visibility: hidden;
}



.home-two:root {
    --heading-three: clamp(1.75rem, 0.3353rem + 2.1661vw, 2.875rem);
}

.hover-bg-main-600 {
    color: #473bf0;
}

.breadcrumb-2
 {
    padding-block-start: 170px;
    padding-block-end: 70px;
}

.breadcrumb {
    padding-block-start: 170px;
    padding-block-end: 170px;
}

/* Add this to your project's main CSS file, preferably AFTER Bootstrap's CSS */

/* Ensure the parent row is explicitly a flex container and aligns items */
.features-three .row {
    display: flex !important; /* Force flex display */
    flex-wrap: wrap !important; /* Allow wrapping */
    align-items: stretch !important; /* Force equal height stretching */
}

/* Force order for the columns */
.features-three .row .col-lg-4:nth-child(1) { order: 1 !important; }
.features-three .row .col-lg-4:nth-child(2) { order: 2 !important; }
.features-three .row .col-lg-4:nth-child(3) { order: 3 !important; }
.features-three .row .col-lg-4:nth-child(4) { order: 4 !important; }
.features-three .row .col-lg-4:nth-child(5) { order: 5 !important; }
.features-three .row .col-lg-4:nth-child(6) { order: 6 !important; }

/* If order changes at breakpoints, you might need specific rules like: */
@media (max-width: 991.98px) { /* Medium devices and down */
    .features-three .row .col-sm-6:nth-child(1) { order: 1 !important; }
    .features-three .row .col-sm-6:nth-child(2) { order: 2 !important; }
    /* ... and so on for other items based on their SM breakpoint order */
}

@media (max-width: 575.98px) { /* Small devices and down */
    .features-three .row .col-12:nth-child(1) { order: 1 !important; }
    .features-three .row .col-12:nth-child(2) { order: 2 !important; }
    /* ... and so on for other items based on their XS/default order */
}


/* Add this to your project's main CSS file, preferably AFTER Bootstrap's CSS */

/* Ensure the parent row is explicitly a flex container and aligns items */
.features-three .row {
    display: flex !important; /* Force flex display */
    flex-wrap: wrap !important; /* Allow wrapping */
    align-items: stretch !important; /* Force equal height stretching */
}

/* Define order using custom classes for large devices */
.features-three .row .order-index-1 { order: 1 !important; }
.features-three .row .order-index-2 { order: 2 !important; }
.features-three .row .order-index-3 { order: 3 !important; }
.features-three .row .order-index-4 { order: 4 !important; }
.features-three .row .order-index-5 { order: 5 !important; }
.features-three .row .order-index-6 { order: 6 !important; }

/* Media query for medium devices and down (e.g., col-sm-6 layout) */
@media (max-width: 991.98px) {
    /* Adjust order for 2 columns per row here if needed */
    /* Example: If you want 1,2 then 3,4 then 5,6 based on visual row */
    /* The order-index-X classes already handle this if they are applied sequentially in HTML */
    /* If you need a *different* order, you'd redefine here, e.g.:
    .features-three .row .order-index-1 { order: 1 !important; }
    .features-three .row .order-index-2 { order: 2 !important; }
    .features-three .row .order-index-3 { order: 3 !important; }
    .features-three .row .order-index-4 { order: 4 !important; }
    .features-three .row .order-index-5 { order: 5 !important; }
    .features-three .row .order-index-6 { order: 6 !important; }
    */
    /* In most cases, if the order-index-X is already 1-6 in HTML,
       and cols are 2 per row, the order will naturally be 1,2 then 3,4 etc.
       So, often no change needed here unless you want a different order. */
}

/* Media query for small devices and down (e.g., col-12 layout) */
@media (max-width: 575.98px) {
    /* For single column stacks, the order will naturally be 1, 2, 3, 4, 5, 6
       as they stack based on their DOM order (or explicit 'order' values).
       So, typically no specific order rules needed here unless you want to reverse or
       do complex reordering when they are purely stacked. */
}


.gradient-bg-new-top-bottom::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 84%;
        background: linear-gradient(180deg, #F5F5FD 0%, #F5F5FD 74.92%, #FFFFFF 100%);
    inset-inline-start: 0;
    inset-block-end: 0;
    z-index: -1;
    border-radius: inherit;
}

#article-content > p {
    margin-bottom: 1.5em; /* Add space below each paragraph */
    /* Using 'em' is a good practice for relative sizing */

    /* Optional: Ensure no top margin if you only want space from the bottom of the previous paragraph */
    margin-top: 0;
}

 #article-content > ul> li {
    margin-bottom: 0.5em; /* Adjust as needed */
}

#article-content > ul {
     margin-bottom: 1.5em; /* Add space below each paragraph */
}
#article-content > h4 {
     margin-bottom: 0.5em; /* Add space below each paragraph */
}
.custom-space > p {
    margin-bottom: 1.5em; /* Add space below each paragraph */
    margin-top: 0;
}

.custom-space> ul> li {
    margin-bottom: 0.5em; /* Adjust as needed */
}

.custom-space > ul {
     margin-bottom: 1.5em; /* Add space below each paragraph */
}
.custom-space > h4 {
     margin-bottom: 0.5em; /* Add space below each paragraph */
}
.custom-space> ul> li {
    list-style-type: disc !important;
    list-style-position: outside !important;
    margin-left: 1.5em !important; 
}



/* --- Overrides for Testimonials Item Expansion --- */

/* Ensure the main testimonial item can expand its height */
.testimonials-item.active {
    height: auto !important; /* Forces height to be content-driven */
    max-height: none !important; /* Removes any max-height constraint */
    overflow: visible !important; /* Ensures hidden content is not clipped */
}

/* Ensure the internal content wrapper within the testimonial item also expands */
.testimonials-item.active > div.tw-px-56-px.tw-py-76-px {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Ensure the accordion content itself (Bootstrap's .collapse) can dictate its height */
/* This targets the actual collapsible content when it's open */
.testimonials-item .accordion-collapse.collapse.show {
    height: auto !important; /* Ensures it pushes down when open */
    max-height: none !important; /* Removes any max-height set during animation */
    overflow: visible !important; /* Prevents clipping of its own content */
}

/* --- Optional: Adjusting .line-clamp-4 if it's still an issue --- */
/* If the description text is still getting cut off, even when the accordion is closed,
   you might need to adjust or remove line-clamp-4. */
.testimonials-item__desc.line-clamp-4 {
    /* If you want to force it to show full text: */
    display: block !important; /* Override potential flex/grid contexts */
    -webkit-line-clamp: unset !important; /* Remove line clamping */
    line-clamp: unset !important;
    overflow: visible !important; /* Ensure content is not hidden */
}

.testimonials-item  {
    height: auto!important;
}


/* custom.css - (No changes needed for this specific request, keep as is from last working solution) */

.testimonials-item {
    height: auto !important;       /* Ensures height is always content-driven */
    max-height: none !important;   /* Removes any max-height constraint */
    overflow: visible !important;  /* Ensures content is never clipped */
    transition: none !important;   /* Kills all CSS animations/transitions */
    /* If you had flex rules here, they are now overridden by col-* classes, so they can be removed or kept */
    /* Example: flex: 2.2 !important; should no longer be needed if col-lg-9 handles width */
}

/* Ensure any inner wrappers within testimonials-item also allow overflow visible */
.testimonials-item > div.tw-px-56-px { /* Targeting the inner padding div */
    overflow: visible !important;
}

/* Optional: If line-clamp-4 is still unwanted on the description text */
.testimonials-item__desc.line-clamp-4 {
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    overflow: visible !important;
    display: block !important;
}


/* custom.css */

/* Ensure smooth scrolling for the entire document */
html {
    scroll-behavior: smooth;
}
html, body {
  scroll-snap-type: none !important;
}
/* html {
    scroll-behavior: auto; 
} */

/* Force the scroll-margin-top for the #about-team element */
#about-team {
    scroll-margin-top: 150px !important; /* Start with a generous value like 150px */
                                       /* MEASURE YOUR FIXED HEADER'S ACTUAL HEIGHT */
                                       /* Replace 150px with [HEADER_HEIGHT + 20px (for buffer)] */
}



/* Keep existing testimonials-item styling */
.testimonials-item {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    transition: none !important; /* Only for .testimonials-item itself */
}

/* Ensure any inner wrappers within testimonials-item also allow overflow visible */
.testimonials-item > div.tw-px-56-px {
    overflow: visible !important;
}

/* Optional: If line-clamp-4 is still unwanted on the description text */
.testimonials-item__desc.line-clamp-4 {
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    overflow: visible !important;
    display: block !important;
}

/* --- OPTIMIZED CSS ACCORDION TRANSITION --- */

.js-accordion-content {
    /* Initial state: collapsed, invisible, not interactive */
    height: 0;                   /* Ensure it takes no vertical space when collapsed */
    overflow: hidden;            /* Hide any content that would overflow */
    opacity: 0;                  /* Start completely transparent */
    visibility: hidden;          /* Hide from screen readers & interaction */
    transform-origin: top;       /* Ensure scaling originates from the top */
    transform: scaleY(0.95);     /* Start slightly compressed vertically for a subtle "zoom" effect */

    /* Transition properties: Adjusted durations and easing */
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1), /* Slightly faster height transition */
                opacity 0.3s ease-out,                    /* Slightly faster opacity transition */
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), /* Slightly faster scale transition */
                visibility 0s linear 0.4s;                /* Adjusted delay for visibility change on close */
    /*
        Transition-delay for visibility:
        - When opening: visibility changes instantly (0s delay).
        - When closing: visibility delays until opacity/height animations are near completion.
          Adjusted delay to match the new duration (e.g., 0.4s for 0.4s animation).
    */
}

/* Expanded state: visible, full height, full scale */
.js-accordion-content.show {
    height: auto;                /* Allows content to define height */
    opacity: 1;                  /* Fully visible */
    visibility: visible;         /* Visible to screen readers & interaction */
    transform: scaleY(1);        /* Full scale (no compression) */
    transition-delay: 0s, 0.1s, 0s, 0s; /* Delay opacity slightly on open, no delay for visibility on open */
}

.border-app-landing {
    border-color: #1351D8 !important;
}
.line-height-19 {
    line-height: 1.9em;
}

@media (min-width: 992px) {
    .show-case-slider .swiper-wrapper {
        display: flex !important;
        justify-content: center; /* Centers the group of items horizontally */
        flex-wrap: nowrap !important; /* Prevents items from wrapping to the next line */
        align-items: flex-start; /* Aligns items to the top if they have different heights */

        transform: none !important;
        width: auto !important;
        height: auto !important;
    }

    .show-case-slider .swiper-slide {
        /* Set a fixed maximum width for each slide to keep its original size */
        max-width: 417.25px !important; /* Use the original width from your HTML */
        width: 417.25px !important;     /* Ensure it takes this width */
        flex-shrink: 0;                 /* Prevent shrinking */
        flex-grow: 0;                   /* Prevent growing */
        flex-basis: auto !important;    /* Let width/max-width handle sizing */

        margin-right: 24px !important;  /* Space between slides */
        margin-bottom: 0 !important;    /* No vertical margin when on one line */
    }

    /* Remove margin from the last slide in the row to avoid extra space on the right */
    .show-case-slider .swiper-wrapper .swiper-slide:last-child {
        margin-right: 0 !important;
    }
}

/* Custom CSS for the pill layout */
@media (min-width: 992px) {
    /* Ensure the container doesn't wrap on large screens */
    .pills-container {
        flex-wrap: nowrap !important; /* Forces items onto a single line */
        /* Optionally add a fixed gap between items here if 'tw-gap-4' isn't enough */
        /* gap: 16px; */
    }

    .pills-container > div { /* Target the direct children (the pills) */
        flex-grow: 1;   /* Allow pills to grow and fill available space */
        flex-shrink: 0; /* Prevent pills from shrinking below their content size */
        flex-basis: 0;  /* Tells items to distribute space equally */
        
        /* You can adjust max-width here if you want them to not exceed a certain size,
           but still be on one row. For example, if you want them to be roughly
           1/4th of the container width minus gaps: */
        max-width: calc(25% - (3 * 16px / 4)); /* Example: 25% for 4 items, adjusted for 16px gap if you use 'gap' property above */
        
        /* If using tw-gap-4 (which typically translates to 16px gap): */
        /* max-width: calc(25% - (3 * var(--tw-gap-4) / 4)); */

        /* To maintain roughly equal visual space but respect content,
           you might also just set a min-width and let flex-grow handle it: */
        min-width: 200px; /* Example: Ensures they don't get too small */
    }

    /* Adjust the text centering for cases where flex-direction is column and text is long */
    .pills-container p,
    .pills-container h3 {
        text-align: center; /* Ensure text is centered within its own block */
        word-break: break-word; /* Helps long words wrap if necessary */
    }
}

/* Ensure consistent vertical and horizontal centering for all pills */
.pills-container > div {
    display: flex;
    flex-direction: column; /* Stack content vertically */
    justify-content: center; /* Center content vertically */
    align-items: center;     /* Center content horizontally */
}

/* Pills */
.tw-min-h-130-px{ min-height: 130px;}    
@media (max-width: 767.98px) { /* This targets typical mobile screens (below Bootstrap's 'md' breakpoint) */
    .pills-container > div {
        height: 60px !important; /* Forces the height to 60px */
        min-height: 60px !important; /* Ensures the minimum height is also 60px */
    }
}

/* Margin bottom top */
@media (min-width: 992px) {
    .mtmb-120 {
        margin-block-start: 120px;
        margin-block-end: 120px;
    }
}
@media (min-width: 576px) {
    .mtmb-120 {
        margin-block-start: 80px;
        margin-block-end: 80px;
    }
}
@media (max-width: 576px) {
    .mtmb-120 {
        margin-block-start: 60px;
        margin-block-end: 60px;
    }
}

/* Custom CSS for Blog Card Images */
.blog-card-image-wrapper {
    /* Set a fixed height for the image container */
    height: 250px; /* Adjust this value to your desired uniform image height */
    
    /* Ensure it behaves like a block element so height can be applied */
    display: block; 
    
    /* Ensure no extra padding/margin inside this wrapper */
    padding: 0;
    margin: 0;
}

/* Responsive adjustments for the image height if needed */
@media (max-width: 991.98px) { /* Tablets and smaller laptops */
    .blog-card-image-wrapper {
        height: 200px; /* Example: slightly shorter on smaller screens */
    }
}

@media (max-width: 767.98px) { /* Mobile devices */
    .blog-card-image-wrapper {
        height: 180px; /* Example: even shorter on mobiles for better fit */
    }
}

/* The image itself should fill its parent wrapper */
.blog-card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crucial for maintaining aspect ratio and filling space */
}

/* Custom CSS for Feature Icons */
.feature-icon-container {
    width: 46px;  
    height: 46px; 
}

.tw-h-324-px { height: 324px; }

.tw-min-h-324-px { min-height: 324px; height: 100%; }

.tw-pt-150-px {
    padding-block-start: 150px;
}

/* Footer */
 @media (max-width: 768px) {
    .remove-mobile-padding {
        padding-bottom: 0 !important;
    }
    .adjust-mobile-padding {
        padding-top: 50px !important;
    }
}

 .certification-images {
    display: flex;
    align-items: center;
    gap: 20px;
}

@media (max-width: 768px) {
    .certification-images {
        justify-content: center;
    }
}

/* padding call to action */
@media (max-width: 768px) {
    .mobile-padding-15 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    h2 {
        font-size: 1.2em;
        line-height: 1.4;
    }
}


/* Styling for active top-level menu links */
.nav-menu__item.activeMenuLi > a {
    color: var(--main-600) !important;
    font-weight: bold;
}

/* Styling for active submenu links */
.nav-submenu__item.activeMenuLi > a {
    color: var(--main-600) !important;
    font-weight: bold;
    background-color: #f4f4f4; /* Light background for active submenu item */
}
.nav-submenu__item > a:hover { background-color: #f4f4f4!important; }

/* Rule to ensure submenus are visible when their parent is active */
/* This ensures the submenu stays open if a child page within it is active */
.nav-menu__item.has-submenu.activeMenuLi > .nav-submenu {
    display: block !important; /* Force submenu to display */
    /* Adjust z-index if needed to keep it above other content */
}

/* Custom CSS for FAQ image container on mobile */
@media (max-width: 991.98px) { /* Applies to screens smaller than 992px (typical mobile/tablet) */
    .faq-mobile-image-wrapper {
        background-color: transparent !important; /* Remove white background */
        padding: 0 !important; /* Remove padding */
        min-height: auto !important; /* Remove minimum height constraint */
        height: auto !important; /* Allow height to be auto based on content/image aspect ratio */
    }

    /* Also adjust the padding on the parent div if needed for mobile layout */
    .faq .col-lg-7 > div {
        padding-left: 0 !important; /* Remove tw-ps-12 (padding-left: 3rem) on mobile */
    }
}

/* breadcrumb : Blog */
@media (max-width: 991.98px) {
    .breadcrumb {
        padding-block-start: 120px !important; /* Top padding for mobile */
        padding-block-end: 120px !important;   /* Bottom padding for mobile */
    }
}


@media (max-width: 768px) {
    header.header .logo img { max-width: 150px; }
    .md-tw-text-base { font-size: 1rem; }
}


.footer-five .page-cta.tw-pt-100-px { padding-block-start: 80px; }

@media (max-width: 480px) {
    .about-banner .tw-pt-180-px { padding-top: 0px }
    .about-banner .tw-pb-200-px { padding-bottom: 0px; }
    .about-banner .tw-pt-134-px { padding-top: 84px; }
    .contact-demo-steps { background: #F3F8F8; }
    .certification-images img { max-width: 120px; }
    .better-way-heading { font-size: 2.5rem!important; }
    .about-us-hero-img { padding-inline-start: 28px; }
    .solutions-hero-content { margin-top: -200px!important; }
    .distraction-icon.seven { inset-block-start: 56%; }
    .footer-five .page-cta.tw-pt-100-px { padding-block-start: 60px; }
}

.solutions-secondary-heading { font-size: 2.5rem!important; }
@media (max-width: 992px) {
    .solutions-secondary-heading { font-size: 1.5rem!important; }
}

.show-case-slider .swiper-button-next, .show-case-slider .swiper-button-prev { color: #fff; top: 68%; }


.mobile-menu__logo img { width: 160px; }

.core-booking-feature-text { font-size: 1.25rem; }
@media (max-width: 480px) {
    .core-booking-feature-text { font-size: 1.15rem; }
}

.banner-three { padding-block-start: 184px; padding-block-end: 178px; }
@media (max-width: 991px) {
    .banner-three { padding-block-start: 140px; }
}
@media (max-width: 767px) {
    .banner-three { padding-block-start: 100px; padding-block-end: 120px; }
}
@media (max-width: 575px) {
    .banner-three { padding-block-start: 100px; padding-block-end: 100px; }
}

.nav-menu--mobile .nav-submenu__link { padding: 10px; }


/* Ensure the target section accounts for fixed headers or other offsets */
#contactSection {
    scroll-margin-top: 100px; 
}


.preloader .cssload-loading i { margin-right: 3px; }


.bg-neutral-light-half.style-two::before {
    background-color: #F0F0FC;
    inset-block-end: auto;
    inset-block-start: 0;
    height: 60%;
}