/* =========================
   Neith Owl – Agntix overrides
   ========================= */

:root {
    --brand: #7a5a63; /* Neith Owl accent */
    --brand-ink: #ffffff; /* text on brand bg */
    --brand-ink-dark: #241f21; /* text when brand is outline/light */
}

/* Replace template reds with brand */
.btn-red-bg,
.red-bg-2,
.tp-btn-black.btn-red-bg,
.tp-btn-black.btn-red-bg .tp-btn-black-filter {
    background-color: var(--brand) !important;
}

    .tp-btn-black.btn-red-bg .tp-btn-black-text {
        color: var(--brand-ink) !important;
    }

/* Brand helpers */
.btn-brand-bg,
.brand-bg {
    
    color: var(--brand-ink) !important;
}

.btn-brand-outline {
    border: 1px solid var(--brand) !important;
    color: var(--brand) !important;
    background: transparent !important;
}

/* Links / small details */
a:hover, .tp-line-black:hover {
    color: var(--brand) !important;
}

.tp-section-subtitle.pre {
    color: var(--brand) !important;
}

.tp-btn-black-circle {
    border-color: var(--brand) !important;
}

/* ========= Header CTA base cleanup ========= */
.tp-header-btn-box .tp-btn-black.btn-brand-bg {
    background: var(--brand) !important;
    color: var(--brand-ink) !important;
    border-radius: 9999px !important;
    padding: 10px 18px !important;
    line-height: 1 !important;
}
/* remove gooey filter artifacts from template */
.tp-header-btn-box .tp-btn-black .tp-btn-black-filter-blur {
    display: none !important;
}

.tp-header-btn-box .tp-btn-black .tp-btn-black-filter {
    filter: none !important;
    background: transparent !important;
}

/* text + inner circle */
.tp-header-btn-box .tp-btn-black .tp-btn-black-text {
    color: var(--brand-ink) !important;
}

.tp-header-btn-box .tp-btn-black .tp-btn-black-circle {
    border: 1px solid var(--brand-ink) !important;
}

/* hover state */
.tp-header-btn-box .tp-btn-black.btn-brand-bg:hover {
    background: transparent !important;
    color: var(--brand) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    outline: 1px solid var(--brand) !important;
}

    .tp-header-btn-box .tp-btn-black.btn-brand-bg:hover .tp-btn-black-text {
        color: var(--brand) !important;
    }

    .tp-header-btn-box .tp-btn-black.btn-brand-bg:hover .tp-btn-black-circle {
        border-color: var(--brand) !important;
    }

/* language links */
.tp-header-lang a.active {
    color: var(--brand) !important;
}

/* ========= Owl pill variant (adds right bubble) =========
   Add class 'btn-owl' to the anchor: <a class="tp-btn-black btn-brand-bg btn-owl">…</a>
*/
.btn-owl {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px 12px 20px;
    border-radius: 9999px;
    background: var(--brand) !important;
    color: var(--brand-ink) !important;
    line-height: 1;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
    overflow: visible; /* allow bubble */
}

    .btn-owl::after {
        content: "";
        position: absolute;
        right: -10px; /* how far it sticks out */
        top: 50%;
        width: 22px;
        height: 22px;
        transform: translateY(-50%);
        background: var(--brand);
        border-radius: 50%;
    }

    .btn-owl .tp-btn-black-text {
        color: var(--brand-ink) !important;
    }

    .btn-owl .tp-btn-black-circle {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255,255,255,.9) !important;
    }

    /* hover: outline style, keep bubble filled (change to transparent if you want an outlined bubble) */
    .btn-owl:hover {
        background: transparent !important;
        color: var(--brand) !important;
        outline: 1px solid var(--brand) !important;
        box-shadow: 0 8px 28px rgba(0,0,0,.25);
        transform: translateY(-1px);
    }

        .btn-owl:hover .tp-btn-black-text {
            color: var(--brand) !important;
        }

        .btn-owl:hover .tp-btn-black-circle {
            border-color: var(--brand) !important;
        }
/* For outlined bubble on hover, use:
   .btn-owl:hover::after{ background:transparent; outline:1px solid var(--brand); } */

/* Preloader background + dots */
#preloader {
    background-color: #7a5a63 !important;
}


/* Compact the Funfacts section */
.tp-funfact-area {
    padding: 60px 0 !important;
}

.tp-funfact-panel-wrap, .tp-funfact-panel {
    padding: 0 !important;
}


/* --- Footer text visibility --- */
.tp-footer-area,
.tp-footer-area p,
.tp-footer-area small,
.tp-footer-area a,
.tp-footer-area li {
    color: rgba(255,255,255,0.85) !important; /* semi-white */
}

    .tp-footer-area a:hover {
        color: var(--brand) !important; /* hover accent */
    }

    /* make headings crisp white */
    .tp-footer-area h5,
    .tp-footer-area h6,
    .tp-footer-area .footer-block-title {
        color: #ffffff !important;
    }