.themepure-theme-btn{
    border-radius: 100px;
    padding: 8px 22px;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.03em;
    z-index: 9;
    line-height: 1;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    text-transform: capitalize;
    position: relative;
    background-color: var(--tp-common-black);
    color: var(--tp-common-white);
    border: 2px solid var(--tp-common-black);
    transition: 0.3s;
}

.themepure-theme-btn:hover{
    background-color: var(--tp-common-white);
    border-color: var(--tp-common-black);
    color: var(--tp-common-black);
}
.themepure-theme-btn span{
    display: inline-block;
}
.themepure-theme-btn img{
    object-fit: cover;
}

.themepure-theme-btn-line-effect{
    position: relative;
    background-color: #fff;
    color: var(--tp-common-black);
    border: none;
    border-radius: 0;
    overflow: visible;
    padding: 0 0;
}
.themepure-theme-btn-line-effect:hover{
    background-color: #fff;
    color: var(--tp-common-black);
}

.themepure-theme-btn-line-effect::before,
.themepure-theme-btn-line-effect::after{
    position: absolute;
    bottom: -4px;
    right: 0;
    width: 0;
    height: 1px;
    content: "";
    transition: 0.4s;
    background-color: currentColor;
}
.themepure-theme-btn-line-effect::after{
    right: auto;
    left: 0;
    width: 100%;
    opacity: .3;
}
.themepure-theme-btn-line-effect:hover::before{
    right: auto;
    left: 0;
    width: 100%;
}

.tp-theme-social-btn,
.tp-pdt-meta-social-btn{
    height: 44px;
    width: 44px;
    line-height: 1;
    border-radius: 50%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 9px;
    position: relative;
    transition: 0.3s;
    border: 1px solid rgba(25, 25, 26, 0.14);
}
.tp-theme-social-btn img,
.tp-pdt-meta-social-btn img{
    object-fit: cover;
}

.tp-theme-social-btn:hover,
.tp-pdt-meta-social-btn:hover{
    background-color: var(--tp-common-black);
    border-color: var(--tp-common-black);
    color: var(--tp-common-white);
}

/* Portfolio Filter Button Styling Update */
.tp-el-filter-btn button {
    background: none !important; /* Override default button appearance */
    border: none !important; /* Override default button appearance */
    padding: 0 15px !important; /* Adjust padding as needed, remove default button padding */
    margin: 0 5px; /* Space out buttons slightly */
    text-transform: uppercase;
    letter-spacing: 2px; /* Adjust as needed */
    /* Typography (font-family, size, weight) should be controlled by Elementor Typography settings */
    /* Color should be controlled by Elementor Color settings for Normal/Hover/Active */
    position: relative; /* For the separator */
}

/* Remove existing underline (which was an ::after pseudo-element) */
.tp-el-filter-btn button::after {
    display: none !important; /* Hide the old underline */
}

/* Add vertical bar separator, except for the last button */
.tp-el-filter-btn button:not(:last-child)::before {
    content: '|';
    position: absolute;
    right: -10px; /* Position it after the button's content + padding */
    top: 50%;
    transform: translateY(-50%);
    color: currentColor; /* Or a specific separator color */
    opacity: 0.5; /* Optional: make it slightly less prominent */
    /* Ensure this doesn't interfere with click area too much */
}

/* Adjustments for active/hover states if needed beyond Elementor controls */
.tp-el-filter-btn button.active,
.tp-el-filter-btn button:hover {
    /* Color is handled by Elementor controls */
    /* No specific style changes here unless to override something */
}


/* Load More Button for Portfolio Filterable */
.tp-portfolio-load-more-wrapper {
    clear: both; /* Ensures it's below floated items if any */
    width: 100%;
    padding-top: 30px; 
    padding-bottom: 30px; 
    text-align: center;
}

.tp-portfolio-load-more-btn.liko-btn {
    display: block; /* Changed from inline-block */
    width: 70%; /* More than half screen width - adjust as needed */
    max-width: 600px; /* Optional: prevent it from becoming too wide on very large screens */
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* Center the text within the block button */
    padding: 18px 25px; /* Adjusted padding, horizontal might be less critical if width is set */
    font-size: 16px;    /* Base font size, can be larger if needed */
    font-weight: 600;   /* Slightly bolder */
    line-height: 1.2;
    text-decoration: none;
    border-radius: 0; /* No rounded corners as per feedback */
    cursor: pointer;
    text-transform: none; /* Override capitalize from .themepure-theme-btn if needed, user image was not capitalized */
    /* Assuming .liko-btn or .themepure-theme-btn provides base colors and transition */
    /* If .themepure-theme-btn styles are desired (black bg, white text / hover: white bg, black text): */
    background-color: var(--tp-common-black);
    color: var(--tp-common-white);
    border: 2px solid var(--tp-common-black);
    transition: all 0.3s ease-out;
}

.tp-portfolio-load-more-btn.liko-btn:hover {
    background-color: var(--tp-common-white);
    color: var(--tp-common-black);
    border-color: var(--tp-common-black);
}

.tp-portfolio-load-more-btn.liko-btn i.fal.fa-arrow-right {
    margin-left: 10px;
    font-size: 0.9em; /* Adjust icon size relative to text */
    /* Ensure icon color inherits correctly */
    color: inherit; 
}

/* Loading state styling */
.tp-portfolio-load-more-btn.liko-btn.loading {
    cursor: wait;
    opacity: 0.7;
}
/* Ensure the text "Loading..." also inherits color correctly if .themepure-theme-btn styles are specific */
.tp-portfolio-load-more-btn.liko-btn.loading {
    /* If hover state is white bg, black text, loading text should be black */
    /* This depends on whether loading state is on hover or normal state */
}
.tp-portfolio-load-more-btn.liko-btn.loading:hover {
    /* Define hover state for loading if different */
}

/* Portfolio item initially hidden for "show more" functionality */
.liko-portfolio-hidden-item {
    display: none !important; /* Important to override potential inline styles or other CSS */
}

/* All Fancybox Customizations removed. */

/* Portfolio Filterable Item Content Styling */
.pm-project-masonary-item .pm-project-masonary-content {
    /* Assuming this is the container that slides out. 
       If it has padding contributing to the "frame", adjust it here.
       However, the individual elements inside likely have their own backgrounds/paddings.
    */
}

.pm-project-masonary-item .pm-project-masonary-subtitle {
    display: block; /* Changed to block to ensure it takes full width available to it */
    width: fit-content; /* Shrink-wrap to content width */
    max-width: 100%; /* Ensure it doesn't overflow its container */
    background-color: #fff; 
    color: #000;
    padding: 5px 10px; 
    margin-bottom: 5px; 
    box-sizing: border-box; /* Include padding in width calculation */
}

.pm-project-masonary-item .pm-project-masonary-title { /* Target the <h2> or similar tag */
    display: block; /* Changed to block */
    width: fit-content; /* Shrink-wrap to content width */
    max-width: 100%; /* Ensure it doesn't overflow its container */
    background-color: #fff; 
    color: #000; 
    padding: 8px 12px; 
    box-sizing: border-box; /* Include padding in width calculation */
    margin: 0; /* Reset margin for the title block itself */
}

/* Ensure the link inside the title fills the title block and has no extra background/padding */
.pm-project-masonary-item .pm-project-masonary-title a {
    text-decoration: none;
    color: inherit; 
    display: block; 
    padding: 0; /* Padding is on the parent .pm-project-masonary-title */
    background-color: transparent; 
}

/* Animated Heading Widget Styles have been removed as they were applied to the wrong widget. */

/* Animated Image Mobile/Tablet Responsiveness & Static Display */
@media (max-width: 1023px) { /* Applies to tablets and mobile devices */

    /* 
        Widget wrapper margins (like .elementor-widget-tp-animated-image.elementor-widget) 
        are intentionally NOT overridden at this breakpoint (1023px).
        This allows tablets to inherit default desktop margins for the widget wrapper,
        preserving the original layout's horizontal spacing.
        Only image-specific styles and animation disabling are applied below for tablets and mobiles.
        Vertical spacing adjustments for stacked widgets, if needed, should be handled carefully
        to not interfere with intended desktop/tablet horizontal margins/paddings.
    */

    /* Universal styles for all layouts to ensure static, responsive image */
    .elementor-widget-tp-animated-image .liko-animated-img,
    .elementor-widget-tp-animated-image .liko-animated-img img,
    .elementor-widget-tp-animated-image > .elementor-widget-container > img,
    .elementor-widget-tp-animated-image .tp-award-2-img,
    .elementor-widget-tp-animated-image .tp-award-2-img img,
    .elementor-widget-tp-animated-image .tp-about-2-right-thumb,
    .elementor-widget-tp-animated-image .tp-about-2-right-thumb img {
        width: 100% !important;
        max-width: 100% !important; /* Ensure it doesn't exceed container */
        height: auto !important;
        object-fit: contain !important; /* Ensures the whole image is visible, respects aspect ratio */
        display: block !important; /* Consistent block behavior */
        margin-left: 0 !important;
        margin-right: 0 !important;
        
        /* Disable animations and effects */
        animation: none !important;
        transition: none !important;
        transform: none !important;
        filter: none !important;
        opacity: 1 !important; /* Ensure full opacity */
        visibility: visible !important; /* Ensure visibility */
    }

    /* Layout specific adjustments for image containers */

    /* Layout 1: .liko-animated-img */
    .elementor-widget-tp-animated-image .liko-animated-img {
        overflow: visible !important; /* Allow image to be fully visible if it was hidden */
    }

    /* Layout 3: .tp-award-2-shape (image container) */
    .elementor-widget-tp-animated-image .tp-award-2-shape {
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        margin-bottom: 0; /* Remove bottom margin if image is the only content */
    }
    .elementor-widget-tp-animated-image .tp-award-2-circle {
        display: none !important; /* Hide decorative circle */
    }

    /* Layout 4: .tp-about-2-right-thumb (image container) */
    .elementor-widget-tp-animated-image .tp-about-2-right-thumb {
        text-align: center !important; /* Center image if container is wider */
        margin-bottom: 0; /* Remove bottom margin if image is the only content */
    }
}

@media (max-width: 767px) { /* Applies to mobile devices ONLY */
    /* Specific PADDING for widget wrapper on mobile for minimal side padding */
    .elementor-widget-tp-animated-image.elementor-widget {
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important; /* Ensure padding is included in width calculation */
    }
}