.elementor-kit-8{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@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 *//* Ensure the parent container of the card has flex or block display */
.featured-tools {
    display: flex; /* Assuming you want cards in a row */
    flex-wrap: wrap;
    gap: 20px; /* Space between cards */
    justify-content: center; /* Center cards */
}

.featured-tool-card {
    /* Basic card styling, adjust as needed */
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 20px;
    width: 300px; /* Example fixed width, adjust for responsiveness */
    box-sizing: border-box; /* Include padding in width */
    overflow: hidden; /* Important for card boundaries */
    position: relative; /* For any positioned children */
}

/* General layout for the card top */
.featured-card-top {
    display: flex;
    align-items: center; /* Vertically align image, title, and badge */
    gap: 10px; /* Space between the image/title wrapper and the badge */
    justify-content: space-between; /* Pushes the badge to the right */
    margin-bottom: 15px; /* Space below the top section */
}

.title-img-wrapper {
    display: flex;
    align-items: center;
    flex-grow: 1; /* Allows this wrapper to take up available space */
    overflow: hidden; /* This acts as the viewport for the title */
    white-space: nowrap; /* Ensures the title text itself doesn't wrap */
    /* Adjust max-width if needed to constrain the title's area.
       This is crucial to prevent the title from pushing the badge.
       Calculate: 100% - (thumbnail_width + thumbnail_margin_right + badge_min_width + badge_padding + gap_to_badge)
       For example, if thumb is 40px, margin 10px, badge is min 60px, gap 10px:
       100% - (40 + 10 + 60 + 10) = 100% - 120px
    */
    max-width: calc(100% - 120px); /* Example: Adjust this value based on your actual badge width */
}

.featured-tool-thumb {
    flex-shrink: 0; /* Prevent the image from shrinking */
    width: 40px; /* Adjust thumbnail size as per your design */
    height: 40px; /* Adjust thumbnail size */
    border-radius: 50%; /* Example: round thumbnail */
    margin-right: 10px; /* Space between thumbnail and title */
    object-fit: cover;
}

.featured-card-title {
    flex-grow: 1; /* Allow title to take available space */
    flex-shrink: 1; /* Allow title to shrink if needed */
    min-width: 0; /* Crucial for flex items with overflow: hidden */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis; /* Show "..." for hidden text */
    white-space: nowrap; /* Keep text on a single line */
    margin: 0; /* Remove default H3 margins */
    position: relative; /* For potential future absolute positioning if needed */

    /* Animation properties for reveal */
    transition: transform 0.3s ease-out; /* Smooth transition for position reset */
}

.tool-overlay {
    flex-shrink: 0; /* Prevent the badge from shrinking */
    margin-left: auto; /* Pushes the badge to the right edge of featured-card-top */
    /* No padding-left here, as gap on .featured-card-top handles spacing */
}

.tool-pricing {
    /* Basic badge styling */
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
}

/* Badge specific colors */
.tool-pricing.freemium {
    background-color: #28a745; /* Green */
}
.tool-pricing.paid {
    background-color: #007bff; /* Blue */
}
.tool-pricing.free {
    background-color: #6c757d; /* Gray */
}

/* Excerpt text styling */
.tool-card-excerpt {
    font-size: 0.9em;
    line-height: 1.5;
    color: #555;
    margin-bottom: 20px;
}

/* Button row */
.btn-row {
    text-align: right; /* Align button to the right */
}

.visit-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background-color: #007bff;
    color: #fff;
    padding: 10px 15px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.visit-btn:hover {
    background-color: #0056b3;
}

.visit-btn svg {
    fill: currentColor; /* Ensures SVG icon matches text color */
}

/* Keyframes for the JavaScript-driven animation */
@keyframes scrollTitle {
    0% {
        transform: translateX(0);
    }
    100% {
        /* This will use the --scroll-end-position calculated by JavaScript */
        transform: translateX(var(--scroll-end-position));
    }
}/* End custom CSS */