/* ---------- whatsapp ---------- */
.whatsapp-btn-wrapper {
    position: fixed;
    bottom: 20px;
    right: 20px;
    overflow: hidden;
    transition: 0.5s;
    z-index: 9999;
}

    .whatsapp-btn-wrapper:hover p {
        display: block;
    }

.whatsapp-fixed-btn {
    transition: ease-in-out 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

    .whatsapp-fixed-btn p {
        white-space: nowrap;
        padding: 0px 16px;
        line-height: 1.6;
        font-size: 15px;
        background: var(--primary);
        color: #fff;
        border-radius: 999px;
        margin: 0px 10px;
        display: none;
    }

.preferrence-btn {
    position: fixed;
    left: 20px;
    bottom: 20px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    border-radius: 50%;
    padding: 0;
    height: 45px;
    width: 45px;
    z-index: 9999;
}

    .preferrence-btn svg path {
        fill: var(--primary) !important;
    }

.custom-tooltip {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: var(--ink);
    color: #fff;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    margin-left: 10px;
}

    .custom-tooltip::after {
        content: "";
        position: absolute;
        right: 100%;
        top: 50%;
        transform: translateY(-50%);
        border-width: 5px;
        border-style: solid;
        border-color: transparent var(--ink) transparent transparent;
    }

.preferrence-btn:hover svg path {
    fill: var(--brass-hi) !important;
}

.preferrence-btn:hover .custom-tooltip {
    opacity: 1;
    visibility: visible;
}

#toggleBtn {
    background: transparent;
    color: var(--primary);
    border: none;
    padding: 0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 5px;
}

#more {
    display: none;
}

/* ---------- modal ---------- */
.modal-content {
    border: none;
    border-radius: var(--radius);
}

.modal-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    color: var(--ink);
}

.modal-body p {
    font-size: 14px;
    color: var(--muted);
}

.modal-body .accordion-button {
    padding-left: 40px;
    display: block;
    border: none;
    box-shadow: none;
    border-radius: 0 !important;
    background: transparent;
}

    .modal-body .accordion-button div {
        display: flex;
        justify-content: space-between;
        padding-bottom: 15px;
    }

        .modal-body .accordion-button div span {
            color: var(--ink);
        }

            .modal-body .accordion-button div span:nth-child(1) {
                font-size: 16px;
                font-weight: 700;
            }

            .modal-body .accordion-button div span:nth-child(2) {
                color: var(--primary-soft);
                font-weight: 600;
                line-height: 24px;
                font-size: 14px;
            }

    .modal-body .accordion-button::after {
        position: absolute;
        margin-left: 0;
        left: 15px;
        top: 20px;
        width: 12px;
        height: 12px;
        background-size: 12px !important;
    }

    .modal-body .accordion-button p {
        width: 100%;
        margin: 0;
    }

.modal-body .accordion-body p {
    color: var(--muted);
    font-size: 12px;
    line-height: 24px;
    margin: 0;
    padding: 10px;
    background: var(--bg-alt);
    border-radius: 8px;
}

.modal-body .accordion-item {
    box-shadow: none;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
}

.modal-body .accordion-button:not(.collapsed) {
    background: transparent;
    color: var(--ink);
    box-shadow: none;
}

.modal-footer {
    flex-wrap: nowrap;
}

    .modal-footer .btn {
        width: 100%;
        color: var(--primary);
        background: transparent;
        border: 1.5px solid var(--primary);
        font-size: 14px;
        line-height: 24px;
        padding: 8px;
        font-weight: 600;
        margin: 0 8px 0 0;
        border-radius: 999px;
        cursor: pointer;
        text-align: center;
        text-transform: none;
        min-height: 0;
        transition: all .3s var(--ease);
    }

        .modal-footer .btn:nth-child(3) {
            background: var(--primary);
            color: #fff;
        }

        .modal-footer .btn:hover {
            background: var(--primary);
            color: #fff;
            opacity: 1;
        }

.modal-dialog {
    z-index: 999;
}

#onLoadModal .modal-dialog {
    margin-left: 20px;
    height: calc(100% - 56px);
}

body:has(#onLoadModal[aria-modal="true"]) .preferrence-btn {
    display: none;
}

/* ============================================================
   FOOTER — BLACK LEATHER PANEL
   Deep black leather with warm off-white thread.
   Matches the black preloader and page banner.
   ============================================================ */

.footer {
    position: relative;
    border-top: 0;
    /* Black leather base with grain + pores */
    background: var(--grain),
    /* leather pores — heavier on black */
    radial-gradient(circle at 18% 24%, rgba(0, 0, 0, .5) 0 1px, transparent 1.8px), radial-gradient(circle at 72% 58%, rgba(0, 0, 0, .45) 0 1px, transparent 1.8px), radial-gradient(circle at 38% 82%, rgba(0, 0, 0, .4) 0 1px, transparent 1.8px), radial-gradient(circle at 88% 30%, rgba(0, 0, 0, .35) 0 1px, transparent 1.8px),
    /* cool grey sheen — top-left */
    radial-gradient(130% 90% at 18% 8%, rgba(120, 120, 120, .18), transparent 55%),
    /* deep black burnish — bottom-right */
    radial-gradient(130% 100% at 85% 100%, rgba(0, 0, 0, .85), transparent 58%),
    /* charcoal → black gradient */
    linear-gradient(155deg, #2a2a2a 0%, #1e1e1e 30%, #141414 60%, #0a0a0a 85%, #000 100%);
    background-size: 140px 140px, 5px 5px, 7px 7px, 6px 6px, 8px 8px, auto, auto, auto;
    background-blend-mode: multiply, normal, normal, normal, normal, normal, normal, normal;
    color: #fdf6ec;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .6), 0 -14px 34px -18px rgba(0, 0, 0, .8);
    corner-shape: scoop;
    border-radius: 15px;
}

    /* stitched seam along the top edge — warm thread on black */
    .footer::before {
        content: "";
        position: absolute;
        top: 7px;
        left: 26px;
        right: 26px;
        height: 0;
        border-top: 1.5px dashed rgba(255, 235, 200, .35);
        pointer-events: none;
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7));
    }

    /* faint inner stitch frame */
    .footer::after {
        content: "";
        position: absolute;
        inset: 6px 22px 6px 22px;
        border: 1px dashed rgba(255, 235, 200, 0.12);
        border-radius: 4px;
        pointer-events: none;
        opacity: .7;
    }

.inner-footer-wrapper {
    position: relative;
    z-index: 1;
    padding-block: 95px;
}

/* ============================================================
   FOOTER CONTACT BLOCK
   ============================================================ */
.footer-contact {
    position: relative;
}

    .footer-contact .footer-logo {
        display: block;
        width: 100%;
        max-width: 138px;
        margin-bottom: 18px;
        /* Lighten logo on black background */
        filter: brightness(0) invert(1);
    }

    .footer-contact .footer-heading {
        font-size: 22px;
        margin-bottom: 12px;
        color: #fdf6ec;
        font-weight: 700;
        letter-spacing: .02em;
        text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    }

    .footer-contact h3 {
        position: relative;
        font-size: 21px;
        font-weight: 400;
        text-transform: uppercase;
        line-height: 1.5em;
        letter-spacing: .3em;
        margin-bottom: 22px;
        color: #fdf6ec;
        padding-bottom: 14px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    }

        /* stitched underline under each footer heading — teal thread */
        .footer-contact h3::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 56px;
            height: 2px;
            background-image: linear-gradient(90deg, #0c8073 0 6px, transparent 6px 12px);
            background-size: 12px 2px;
            background-repeat: repeat-x;
            animation: footerStitchSlide 1.8s linear infinite;
            border-radius: 2px;
            opacity: .95;
            filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5));
        }

    /* contact details */
    .footer-contact a {
        color: rgba(255, 235, 200, .8);
        text-decoration: none;
        transition: color .3s ease, letter-spacing .35s ease;
        display: inline-block;
    }

        .footer-contact a:hover {
            color: #0c8073;
            letter-spacing: .02em;
        }

    .footer-contact p {
        color: rgba(255, 235, 200, .75);
        margin-top: 20px;
        line-height: 1.7;
        text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
    }

        .footer-contact p strong,
        .footer-contact p b {
            color: #fdf6ec;
        }

/* ============================================================
   FOOTER NAV LIST
   ============================================================ */
.footer-page-list {
    margin-top: 22px;
    padding: 0;
    list-style: none;
}

    .footer-page-list li {
        margin-bottom: 14px;
        position: relative;
    }

        .footer-page-list li a {
            position: relative;
            color: rgba(255, 235, 200, .78);
            text-decoration: none;
            font-family: "Tahoma", sans-serif;
            font-size: .95rem;
            letter-spacing: .02em;
            padding-left: 0;
            display: inline-block;
            transition: color .3s ease, padding-left .4s cubic-bezier(.2, .8, .2, 1), letter-spacing .35s ease;
            text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
        }

            /* small dashed thread that appears on hover — teal on black */
            .footer-page-list li a::before {
                content: "";
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 0;
                height: 1.5px;
                border-top: 1.5px dashed #0cceb8;
                opacity: 0;
                transition: width .35s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
            }

            .footer-page-list li a.active {
                color: #0cceb8;
                padding-left: 22px;
                letter-spacing: .03em;
            }

                .footer-page-list li a.active::before {
                    width: 16px;
                    opacity: 1;
                }

            .footer-page-list li a:hover {
                color: #0cceb8;
                padding-left: 22px;
                letter-spacing: .03em;
            }

                .footer-page-list li a:hover::before {
                    width: 16px;
                    opacity: 1;
                }

/* ============================================================
   FOOTER MEDIA ICONS
   ============================================================ */
.footer-media-icon-list {
    margin-top: 22px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
}

    .footer-media-icon-list li {
        display: flex;
    }

    .footer-media-icon-list .media-icon-link {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 42px;
        width: 42px;
        border-radius: 50%;
        text-decoration: none;
        background: #1e1e1e;
        border: 1px solid rgba(255, 235, 200, .12);
        color: #fdf6ec;
        outline: 1px dashed rgba(255, 235, 200, .25);
        outline-offset: -4px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
        transition: transform .35s cubic-bezier(.4, 0, .2, 1), background-color .35s ease, background .35s ease, color .35s ease, box-shadow .35s ease, border-color .35s ease, outline-color .35s ease;
    }

        .footer-media-icon-list .media-icon-link .bi {
            font-size: 17px;
            line-height: 1;
            color: inherit;
            background: transparent;
            transition: color .3s ease, transform .3s ease;
        }

        .footer-media-icon-list .media-icon-link:hover {
            transform: translateY(-3px) scale(1.08);
            color: #fff;
            border-color: transparent;
            outline-color: rgba(255, 255, 255, .5);
        }

            .footer-media-icon-list .media-icon-link:hover .bi {
                transform: scale(1.05);
            }

        /* ============================================================
   BRAND COLORS — hover states
   ============================================================ */
        .footer-media-icon-list .media-icon-link:has(.bi-linkedin) {
            color: #4a9eff;
        }

            .footer-media-icon-list .media-icon-link:has(.bi-linkedin):hover {
                background-color: #0A66C2 !important;
                color: #fff !important;
                box-shadow: 0 8px 18px rgba(10, 102, 194, .6);
                border-color: transparent !important;
            }

        .footer-media-icon-list .media-icon-link:has(.bi-twitter-x) {
            color: #fdf6ec;
        }

            .footer-media-icon-list .media-icon-link:has(.bi-twitter-x):hover {
                background-color: #000 !important;
                color: #fff !important;
                box-shadow: 0 8px 18px rgba(255, 255, 255, .25);
                border-color: transparent !important;
            }

        .footer-media-icon-list .media-icon-link:has(.bi-instagram) {
            color: #ff6b9d;
        }

            .footer-media-icon-list .media-icon-link:has(.bi-instagram):hover {
                background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4) !important;
                color: #fff !important;
                box-shadow: 0 8px 18px rgba(221, 42, 123, .55);
                border-color: transparent !important;
            }

        .footer-media-icon-list .media-icon-link:has(.bi-facebook) {
            color: #4a9eff;
        }

            .footer-media-icon-list .media-icon-link:has(.bi-facebook):hover {
                background-color: #1877F2 !important;
                color: #fff !important;
                box-shadow: 0 8px 18px rgba(24, 119, 242, .55);
                border-color: transparent !important;
            }

        .footer-media-icon-list .media-icon-link:has(.bi-youtube) {
            color: #ff4d4d;
        }

            .footer-media-icon-list .media-icon-link:has(.bi-youtube):hover {
                background-color: #FF0000 !important;
                color: #fff !important;
                box-shadow: 0 8px 18px rgba(255, 0, 0, .55);
                border-color: transparent !important;
            }

        .footer-media-icon-list .media-icon-link:has(.bi-threads) {
            color: #fdf6ec;
        }

            .footer-media-icon-list .media-icon-link:has(.bi-threads):hover {
                background-color: #000 !important;
                color: #fff !important;
                box-shadow: 0 8px 18px rgba(255, 255, 255, .25);
                border-color: transparent !important;
            }

/* ============================================================
   COPYRIGHT BAR — BLACK LEATHER STRIP
   ============================================================ */
.copy-right {
    position: relative;
    text-align: center;
    /* Black leather base */
    background: var(--grain), radial-gradient(circle at 20% 30%, rgba(0, 0, 0, .5) 0 1px, transparent 1.5px), radial-gradient(circle at 70% 60%, rgba(0, 0, 0, .45) 0 1px, transparent 1.5px), radial-gradient(circle at 40% 80%, rgba(0, 0, 0, .4) 0 1px, transparent 1.5px), radial-gradient(130% 90% at 18% 8%, rgba(120, 120, 120, .2), transparent 55%), radial-gradient(130% 100% at 85% 100%, rgba(0, 0, 0, .8), transparent 58%), linear-gradient(155deg, #2a2a2a 0%, #1a1a1a 35%, #0f0f0f 65%, #000 100%);
    background-size: 140px 140px, 5px 5px, 7px 7px, 6px 6px, auto, auto, auto;
    background-blend-mode: multiply, normal, normal, normal, normal, normal, normal;
    border: 1px solid rgba(0, 0, 0, .85);
    border-top: 1px solid rgba(255, 235, 200, .1);
    color: #fdf6ec;
    margin: 0;
    padding-block: 16px;
    font-family: "Tahoma", sans-serif;
    font-size: .88rem;
    letter-spacing: .04em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -1px 0 rgba(0, 0, 0, .8);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
    border-radius: 15px 15px 0 0;
    corner-shape: scoop;
}

    /* dashed stitch along the top of the copyright bar */
    .copy-right::before {
        content: "";
        position: absolute;
        top: 6px;
        left: 26px;
        right: 26px;
        height: 0;
        border-top: 1.5px dashed rgba(255, 235, 200, .35);
        pointer-events: none;
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7));
    }

    .copy-right a {
        color: #fdf6ec;
        text-decoration: none;
        border-bottom: 1px dashed rgba(255, 235, 200, .4);
        transition: border-color .3s ease, color .3s ease;
    }

        .copy-right a:hover {
            color: #0c8073;
            border-bottom-color: #0c8073;
        }

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes footerStitchSlide {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 12px 0;
    }
}

/* ============================================================
   FOOTER SUBSCRIBE FORM — DARK PILL
   ============================================================ */
.footer .input-group {
    position: relative;
    display: flex;
    align-items: stretch;
    max-width: 520px;
    margin-inline: auto;
    padding: 4px;
    /* Dark pill on black leather */
    background: #1a1a1a;
    border: 1px solid rgba(255, 235, 200, .12);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 24px -14px rgba(0, 0, 0, .9);
    overflow: hidden;
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
    gap: 5px;
}

    /* stitched left seam — teal thread */
    .footer .input-group::before {
        content: "";
        position: absolute;
        left: 10px;
        top: 50%;
        width: 2.5px;
        height: 55%;
        transform: translateY(-50%);
        background-image: linear-gradient(180deg, #0c8073 0 5px, transparent 5px 10px);
        background-size: 2.5px 10px;
        background-repeat: repeat-y;
        border-radius: 2px;
        opacity: .9;
        transition: height .35s var(--ease), opacity .35s var(--ease), background-image .35s var(--ease);
        pointer-events: none;
        z-index: 2;
    }

    .footer .input-group:focus-within {
        border-color: rgba(12, 128, 115, .55);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 32px -14px rgba(12, 128, 115, .5);
    }

        .footer .input-group:focus-within::before {
            height: 80%;
            background-image: linear-gradient(180deg, #2d9648 0 5px, transparent 5px 10px);
        }

    /* the email input */
    .footer .input-group .form-control {
        flex: 1 1 auto;
        min-width: 0;
        height: 48px;
        padding: 0 20px;
        padding-left: 32px;
        font-family: "Barlow", sans-serif;
        font-size: 15px;
        color: #fdf6ec;
        background: transparent;
        border: 0;
        outline: none;
        box-shadow: none !important;
        border-radius: 999px;
        letter-spacing: .005em;
        transition: color .3s var(--ease);
    }

        .footer .input-group .form-control::placeholder {
            color: rgba(255, 235, 200, .4);
            font-weight: 400;
            letter-spacing: .01em;
        }

        .footer .input-group .form-control:focus {
            color: #fdf6ec;
            background: transparent;
            border: 0;
            box-shadow: none !important;
            outline: none;
        }

        /* AUTOFILL — keep the pill dark */
        .footer .input-group .form-control:-webkit-autofill,
        .footer .input-group .form-control:-webkit-autofill:hover,
        .footer .input-group .form-control:-webkit-autofill:focus,
        .footer .input-group .form-control:-webkit-autofill:active {
            -webkit-box-shadow: 0 0 0 1000px #1a1a1a inset !important;
            box-shadow: 0 0 0 1000px #1a1a1a inset !important;
            -webkit-text-fill-color: #fdf6ec !important;
            caret-color: #fdf6ec;
            border: 0 !important;
            transition: background-color 9999s ease-in-out 0s, color .3s var(--ease);
        }

        .footer .input-group .form-control:autofill,
        .footer .input-group .form-control:-moz-autofill {
            box-shadow: 0 0 0 1000px #1a1a1a inset !important;
            -moz-text-fill-color: #fdf6ec !important;
            color: #fdf6ec !important;
            border: 0 !important;
        }

        .footer .input-group .form-control:-webkit-autofill:focus {
            -webkit-box-shadow: 0 0 0 1000px #1a1a1a inset !important;
            box-shadow: 0 0 0 1000px #1a1a1a inset !important;
        }

    /* the send button — teal on black */
    .footer .input-group .form-submit-btn {
        position: relative;
        flex-shrink: 0;
        height: 48px;
        padding: 0 28px;
        font-family: "Barlow", sans-serif;
        font-size: .82rem;
        font-weight: 600;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: #fff;
        background: var(--grain), linear-gradient(155deg, #0d6e60, #055d53 55%, #044a42);
        background-size: 90px 90px, auto;
        background-blend-mode: soft-light, normal;
        border: 0;
        border-radius: 999px !important;
        cursor: pointer;
        overflow: hidden;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -2px 4px rgba(0, 0, 0, .35), 0 4px 12px -6px rgba(5, 93, 83, .7);
        transition: box-shadow .45s cubic-bezier(.16, 1, .3, 1), letter-spacing .4s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1);
    }

        .footer .input-group .form-submit-btn:hover {
            letter-spacing: .18em;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -2px 5px rgba(0, 0, 0, .4), 0 8px 22px -8px rgba(12, 128, 115, .7);
        }

        .footer .input-group .form-submit-btn:active {
            transform: scale(.98);
        }

        /* stitched dashed ring inside the button */
        .footer .input-group .form-submit-btn::before {
            content: "";
            position: absolute;
            inset: 4px;
            border: 1px dashed rgba(255, 235, 200, .5);
            border-radius: 999px;
            pointer-events: none;
            transition: border-color .35s ease;
        }

        .footer .input-group .form-submit-btn:hover::before {
            border-color: rgba(255, 235, 200, .9);
        }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
    .footer {
        padding: 20px 0 0;
    }

        .footer::before {
            left: 14px;
            right: 14px;
        }

        .footer::after {
            inset: 6px 12px 6px 12px;
        }

    .footer-contact {
        margin-bottom: 30px;
    }

    .inner-footer-wrapper {
        padding-block: 50px;
    }

    .footer-contact h3 {
        font-size: 18px;
        letter-spacing: .24em;
    }

    .copy-right::before {
        left: 14px;
        right: 14px;
    }

    .footer-media-icon-list {
        gap: 10px;
    }

        .footer-media-icon-list .media-icon-link {
            height: 38px;
            width: 38px;
        }

            .footer-media-icon-list .media-icon-link .bi {
                font-size: 15px;
            }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .footer-contact h3::after {
        animation: none;
    }

    .footer-media-icon-list .media-icon-link,
    .footer-page-list li a,
    .footer-page-list li a::before,
    .footer-contact a,
    .footer .input-group,
    .footer .input-group .form-submit-btn {
        transition: none;
    }
}