.elementor-kit-8{--e-global-color-primary:#0F172A;--e-global-color-secondary:#F9FAFB;--e-global-color-text:#767D7D;--e-global-color-accent:#0099F6;--e-global-color-ce54e95:#FFFFFF;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-size:60px;--e-global-typography-primary-font-weight:800;--e-global-typography-primary-text-transform:none;--e-global-typography-primary-font-style:normal;--e-global-typography-primary-text-decoration:none;--e-global-typography-primary-line-height:1.1em;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-size:20px;--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-text-transform:none;--e-global-typography-secondary-font-style:normal;--e-global-typography-secondary-text-decoration:none;--e-global-typography-secondary-line-height:1.5em;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-text-transform:none;--e-global-typography-text-font-style:normal;--e-global-typography-text-text-decoration:none;--e-global-typography-text-line-height:1.5em;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-size:16px;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-text-transform:none;--e-global-typography-accent-font-style:normal;--e-global-typography-accent-text-decoration:none;--e-global-typography-accent-line-height:1.5em;--e-global-typography-ace9437-font-family:"Inter";--e-global-typography-ace9437-font-size:32px;--e-global-typography-ace9437-font-weight:700;--e-global-typography-ace9437-text-transform:none;--e-global-typography-ace9437-font-style:normal;--e-global-typography-ace9437-text-decoration:none;--e-global-typography-ace9437-line-height:1.1em;--e-global-typography-cf42425-font-family:"Inter";--e-global-typography-cf42425-font-size:20px;--e-global-typography-cf42425-font-weight:700;--e-global-typography-cf42425-text-transform:none;--e-global-typography-cf42425-font-style:normal;--e-global-typography-cf42425-text-decoration:none;--e-global-typography-cf42425-line-height:1.1em;--e-global-typography-abaaf0f-font-family:"Inter";--e-global-typography-abaaf0f-font-size:20px;--e-global-typography-abaaf0f-font-weight:600;--e-global-typography-abaaf0f-text-transform:none;--e-global-typography-abaaf0f-font-style:normal;--e-global-typography-abaaf0f-text-decoration:none;--e-global-typography-abaaf0f-line-height:1.1em;}.elementor-kit-8 button,.elementor-kit-8 input[type="button"],.elementor-kit-8 input[type="submit"],.elementor-kit-8 .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), inter;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );text-transform:var( --e-global-typography-accent-text-transform );font-style:var( --e-global-typography-accent-font-style );text-decoration:var( --e-global-typography-accent-text-decoration );line-height:var( --e-global-typography-accent-line-height );color:var( --e-global-color-ce54e95 );border-radius:8px 8px 8px 8px;}.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){--kit-widget-spacing:30px;}.elementor-element{--widgets-spacing:30px 30px;--widgets-spacing-row:30px;--widgets-spacing-column:30px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1366px){.elementor-kit-8{--e-global-typography-primary-font-size:50px;--e-global-typography-secondary-font-size:18px;--e-global-typography-accent-font-size:16px;--e-global-typography-ace9437-font-size:28px;--e-global-typography-cf42425-font-size:20px;}.elementor-kit-8 button,.elementor-kit-8 input[type="button"],.elementor-kit-8 input[type="submit"],.elementor-kit-8 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}}@media(max-width:1024px){.elementor-kit-8{--e-global-typography-primary-font-size:40px;--e-global-typography-secondary-font-size:16px;--e-global-typography-text-font-size:14px;--e-global-typography-accent-font-size:14px;--e-global-typography-ace9437-font-size:26px;--e-global-typography-cf42425-font-size:18px;--e-global-typography-abaaf0f-font-size:18px;--e-global-typography-abaaf0f-line-height:1.1em;}.elementor-kit-8 button,.elementor-kit-8 input[type="button"],.elementor-kit-8 input[type="submit"],.elementor-kit-8 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-8{--e-global-typography-primary-font-size:26px;--e-global-typography-secondary-font-size:16px;--e-global-typography-accent-font-size:14px;--e-global-typography-ace9437-font-size:22px;--e-global-typography-cf42425-font-size:18px;--e-global-typography-abaaf0f-font-size:16px;}.elementor-kit-8 button,.elementor-kit-8 input[type="button"],.elementor-kit-8 input[type="submit"],.elementor-kit-8 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */p {
    color: #333;
}


/* 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 */