/*Site.css*/
/* =========================================================
   THE WED FRAME - GLOBAL SITE CSS
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {
    --twf-bg: #f1eadf;
    --twf-bg-soft: #f8f4ee;
    --twf-dark: #11100e;
    --twf-text: #191714;
    --twf-muted: #756e65;
    --twf-line: rgba(25,23,20,.18);
    --twf-light-line: rgba(255,255,255,.22);
    --twf-serif: "Cormorant Garamond", serif;
    --twf-sans: "Manrope", sans-serif;
}


/* =========================================================
   BASE
========================================================= */
.object_fit_cover{
    object-fit:cover !important;
}
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
    color: var(--twf-text);
    background: var(--twf-bg-soft);
    font-family: var(--twf-sans);
}

img {
    max-width: 100%;
}

a,
a:visited,
a:hover,
a:focus,
a:active {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   GLOBAL TYPOGRAPHY
========================================================= */

.twf-display,
.twf-section-title,
.twf-card-title {
    font-family: var(--twf-serif);
    font-weight: 400;
}

.twf-display,
.twf-section-title {
    letter-spacing: -.04em;
}

.twf-section-title {
    font-size: 60px;
    line-height: 1;
}

    .twf-section-title em {
        font-weight: 400;
    }

.twf-card-title {
    font-size: 38px;
    line-height: 1.05;
    transform-origin: left center;
}

.twf-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .19em;
}

    .twf-eyebrow::before {
        content: "";
        width: 38px;
        height: 1px;
        background: currentColor;
    }

.twf-eyebrow--light {
    color: rgba(255,255,255,.7);
}


/* =========================================================
   GLOBAL SECTIONS
========================================================= */

.twf-section {
    padding: clamp(50px,10px,50px) 0 !important;
}

.twf-bg-main {
    background: var(--twf-bg);
}

.twf-bg-soft {
    background: var(--twf-bg-soft);
}

.twf-bg-dark {
    background: var(--twf-dark);
    color: #fff;
}

.twf-section-text {
    color: var(--twf-muted);
    font-size: 16px;
    line-height: 1.95;
}

    .twf-section-text p:last-child {
        margin-bottom: 0;
    }

.twf-location-note {
    font-family: var(--twf-serif);
    font-size: 28px;
    font-style: italic;
}


/* =========================================================
   GLOBAL BUTTONS
========================================================= */

.twf-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    min-height: 56px;
    padding: 0 28px;
    border: 1px solid transparent;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .11em;
    transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}

    .twf-button span {
        transition: transform .3s ease;
    }

    .twf-button:hover span {
        transform: translate(4px,-4px);
    }


/* LIGHT */

.twf-button--light {
    color: var(--twf-dark) !important;
    background: #fff;
}

    .twf-button--light:hover {
        color: var(--twf-dark);
        background: var(--twf-bg);
    }


/* DARK */

.twf-button--dark {
    color: #fff !important;
    background: var(--twf-dark);
}

    .twf-button--dark:hover {
        color: #fff;
        background: #000;
    }


/* OUTLINE LIGHT */

.twf-button--outline-light {
    color: #fff;
    background: transparent;
    border-color: rgba(255,255,255,.45);
}

    .twf-button--outline-light:hover {
        color: var(--twf-dark);
        background: #fff;
        border-color: #fff;
    }


/* =========================================================
   GLOBAL TEXT LINK
========================================================= */

.twf-text-link {
    display: inline-block;
    padding-bottom: 6px;
    border-bottom: 1px solid currentColor;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .13em;
    transition: color .3s ease;
}

.twf-text-link--light {
    color: #fff;
}

    .twf-text-link--light:hover {
        color: var(--twf-bg);
    }


/* =========================================================
   GLOBAL ARROW LINKS
========================================================= */

.twf-arrow-link,
.twf-big-link {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    padding-bottom: 7px;
    border-bottom: 1px solid currentColor;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .13em;
    transform-origin: left center;
    transition: color .3s ease, transform .3s ease;
}

    .twf-arrow-link span,
    .twf-big-link span {
        display: inline-block;
        transition: transform .3s ease;
    }

    .twf-arrow-link:hover,
    .twf-big-link:hover {
        color: var(--twf-muted);
    }

        .twf-arrow-link:hover span,
        .twf-big-link:hover span {
            transform: translate(4px,-4px);
        }


/* =========================================================
   GLOBAL META
========================================================= */

.twf-meta {
    color: var(--twf-muted);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .18em;
}


/* =========================================================
   GLOBAL QUOTE
========================================================= */

.twf-quote {
    margin: 0;
    font-family: var(--twf-serif);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -.035em;
}

.twf-quote-mark {
    margin-bottom: -20px;
    color: var(--twf-muted);
    font-family: var(--twf-serif);
    font-size: 90px;
    line-height: 1;
}


/* =========================================================
   GLOBAL CIRCLE BUTTON
========================================================= */

.twf-circle-button {
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--twf-line);
    border-radius: 50%;
    background: transparent;
    color: var(--twf-dark);
    transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}

    .twf-circle-button:hover {
        color: var(--twf-bg);
        background: var(--twf-dark);
        border-color: var(--twf-dark);
    }

    .twf-circle-button:first-child:hover {
        transform: translateX(-3px);
    }

    .twf-circle-button:last-child:hover {
        transform: translateX(3px);
    }


/* =========================================================
   GLOBAL LIST LINK
========================================================= */

.twf-list-link {
    display: block;
    padding: 28px 0;
    border-top: 1px solid var(--twf-line);
    color: inherit;
    transition: color .3s ease, padding .35s ease;
}

    .twf-list-link:last-child {
        border-bottom: 1px solid var(--twf-line);
    }

.twf-list-link--light {
    border-color: rgba(255,255,255,.18);
}

    .twf-list-link--light:last-child {
        border-color: rgba(255,255,255,.18);
    }

.twf-list-link .twf-card-title,
.twf-list-link__arrow {
    transition: color .3s ease, transform .3s ease;
}

.twf-list-link:hover .twf-card-title {
    color: var(--twf-bg);
    transform: translateX(5px);
}

.twf-list-link__arrow {
    display: inline-block;
    font-size: 22px;
}

.twf-list-link:hover .twf-list-link__arrow {
    color: var(--twf-bg);
    transform: translate(5px,-5px);
}


/* =========================================================
   GLOBAL IMAGE HOVER
========================================================= */

.twf-image-hover {
    overflow: hidden;
    background: #ddd5ca;
    height:400px;
}

    .twf-image-hover img {
        transition: transform .9s cubic-bezier(.2,.65,.3,1);
        object-fit:cover
    }

    .twf-image-hover:hover img {
        transform: scale(1.035);
    }


/* =========================================================
   GLOBAL IMAGE OVERLAY
========================================================= */

.twf-dark-overlay {
    z-index: 1;
    background: linear-gradient( 90deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.32) 55%, rgba(0,0,0,.10) 100% );
}


/* =========================================================
   GLOBAL REVEAL
========================================================= */

/* AŞAĞIDAN */

.twf-reveal {
    opacity: 0;
    transform: translateY(45px);
    transition: opacity .85s cubic-bezier(.2,.65,.3,1), transform .85s cubic-bezier(.2,.65,.3,1);
    transition-delay: var(--twf-reveal-delay,0ms);
}

    .twf-reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }


/* SAĞDAN */

.twf-reveal-right {
    opacity: 0;
    transform: translateX(55px);
    transition: opacity .9s cubic-bezier(.2,.65,.3,1), transform .9s cubic-bezier(.2,.65,.3,1);
}

    .twf-reveal-right.is-visible {
        opacity: 1;
        transform: translateX(0);
    }


/* =========================================================
   GLOBAL STAGGER
========================================================= */

.twf-stagger > .twf-reveal:nth-child(3n+1) {
    --twf-reveal-delay: 0ms;
}

.twf-stagger > .twf-reveal:nth-child(3n+2) {
    --twf-reveal-delay: 120ms;
}

.twf-stagger > .twf-reveal:nth-child(3n) {
    --twf-reveal-delay: 240ms;
}


/* =========================================================
   HEADER
========================================================= */

.twf-header {
    position: relative;
    z-index: 1050;
    width: 100%;
    transition: background .4s ease, color .4s ease, box-shadow .4s ease, backdrop-filter .4s ease;
}


/* HOME INITIAL */

.twf-header--home {
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    background: rgba(0,0,0,.42);
    border-bottom: 1px solid rgba(255,255,255,.08);
}


/* INNER PAGE */

.twf-header--inner {
    color: var(--twf-dark);
    background: var(--twf-bg-soft);
    border-bottom: 1px solid var(--twf-line);
}


/* SCROLLED */

.twf-header.scrolled {
    position: fixed;
    top: 0;
    left: 0;
    color: var(--twf-dark);
    background: rgba(255,255,255,.33);
    border-bottom: 1px solid var(--twf-line);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 8px 30px rgba(0,0,0,.05);
}

.twf-header-bar {
    height: 100px;
}


/* =========================================================
   LOGO
========================================================= */

.twf-logo {
    display: inline-flex;
    align-items: center;
}

    .twf-logo img {
        width: auto;
        max-width: 150px;
        max-height: 82px;
        object-fit: contain;
        transition: filter .35s ease;
    }


/* HOME WHITE LOGO */

.twf-header--home:not(.scrolled) .twf-logo img {
    filter: brightness(0) invert(1);
}


/* SCROLL BLACK LOGO */

.twf-header--home.scrolled .twf-logo img {
    filter: none;
}

.twf-logo span {
    font-family: var(--twf-serif);
    font-size: 29px;
}


/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.twf-nav a {
    position: relative;
    padding: 10px 0;
    color: inherit;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
    transition: color .3s ease;
}

    .twf-nav a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 4px;
        width: 0;
        height: 1px;
        background: currentColor;
        transition: width .35s ease;
    }


/* HOME HOVER */

.twf-header--home:not(.scrolled) .twf-nav a:hover {
    color: var(--twf-bg);
}


/* SCROLLED & INNER HOVER */

.twf-header.scrolled .twf-nav a:hover,
.twf-header--inner .twf-nav a:hover {
    color: var(--twf-bg);
}

.twf-nav a:hover::after {
    width: 100%;
}


/* =========================================================
   HEADER CONTACT
========================================================= */

.twf-header-contact {
    padding-bottom: 6px;
    color: inherit;
    border-bottom: 1px solid currentColor;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .1em;
    transition: color .3s ease;
}

    .twf-header-contact span {
        display: inline-block;
        transition: transform .3s ease;
    }

    .twf-header-contact:hover {
        color: var(--twf-bg);
    }

        .twf-header-contact:hover span {
            transform: translate(4px,-4px);
        }


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.twf-menu-button {
    width: 45px;
    height: 45px;
    padding: 9px;
    border: 0;
    background: transparent;
    color: inherit;
}

    .twf-menu-button span {
        display: block;
        width: 100%;
        height: 1px;
        margin: 7px 0;
        background: currentColor;
    }


/* =========================================================
   MOBILE OFFCANVAS
========================================================= */

.twf-mobile-menu {
    width: min(100%,480px) !important;
    color: #fff;
    background: var(--twf-dark);
    border: 0 !important;
}

.twf-mobile-small {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .2em;
    opacity: .6;
}

.twf-mobile-close {
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-family: var(--twf-serif);
    font-size: 55px;
    line-height: 1;
}

.twf-mobile-nav {
    padding-top: 50px;
}

    .twf-mobile-nav a {
        padding: 7px 0;
        font-family: var(--twf-serif);
        font-size: clamp(43px,10vw,68px);
        line-height: .95;
        transition: opacity .25s ease, transform .25s ease;
    }

        .twf-mobile-nav a:hover {
            opacity: .55;
            transform: translateX(8px);
        }

.twf-mobile-social {
    color: rgba(255,255,255,.65);
    font-size: 11px;
}


/* =========================================================
   FOOTER
========================================================= */

.twf-footer {
    padding: 120px 0 30px;
    color: #fff;
    background: var(--twf-dark);
}

.twf-footer-heading {
    margin: 35px 0;
    font-family: var(--twf-serif);
    font-size: clamp(60px,6vw,95px);
    font-weight: 400;
    line-height: .86;
}

    .twf-footer-heading em {
        font-weight: 400;
    }

.twf-footer-title {
    display: block;
    margin-bottom: 18px;
    color: rgba(255,255,255,.4);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .2em;
}

.twf-footer a,
.twf-footer span {
    color: rgba(255,255,255,.72);
    font-size: 16px;
    line-height: 1.7;
}

.twf-footer a {
    transition: color .25s ease;
}

    .twf-footer a:hover {
        color: #fff;
    }

.twf-footer-bottom {
    margin-top: 90px;
    padding-top: 25px;
    border-top: 1px solid var(--twf-light-line);
    color: rgba(255,255,255,.4);
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .16em;
}


/* =========================================================
   FLOATING CONTACT
========================================================= */

.twf-floating-contact {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1030;
    flex-direction: column;
    gap: 8px;
}

.twf-floating-contact__item {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-height: 48px;
    padding: 0 17px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 30px;
    color: #fff;
    background: rgba(17,16,14,.92);
    font-size: 10px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform .3s ease, background .3s ease;
}

    .twf-floating-contact__item:hover {
        color: #fff;
        background: #000;
        transform: translateX(-5px);
    }


/* =========================================================
   MOBILE CONTACT
========================================================= */

.twf-mobile-contact {
    position: fixed;
    z-index: 1040;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    background: rgba(17,16,14,.97);
    border-top: 1px solid rgba(255,255,255,.12);
}

    .twf-mobile-contact a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        color: #fff;
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: .08em;
    }

        .twf-mobile-contact a:hover {
            color: var(--twf-bg);
        }

    .twf-mobile-contact i {
        font-size: 16px;
    }


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width:991.98px) {

    .twf-header-bar {
        height: 78px;
    }

    .twf-logo img {
        max-width: 125px;
        max-height: 62px;
    }

    body {
        padding-bottom: 64px;
    }
}


/* =========================================================
   MOBILE TYPOGRAPHY
========================================================= */

@media (max-width:767.98px) {

    .twf-section-title {
        font-size: 48px;
    }

    .twf-card-title {
        font-size: 34px;
    }

    .twf-eyebrow {
        font-size: 13px;
    }

    .twf-location-note {
        font-size: 23px;
    }
}

.hikaye_h{
    max-height:400px !important;
    object-fit:cover;
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
    }
}

/* =========================================================
   DESKTOP HIZLI İLETİŞİM
========================================================= */

.quick-contact {
    position: fixed;
    right: 25px;
    bottom: 30px;
    z-index: 9999;
}

.quick-contact-main {
    width: 68px;
    height: 68px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, black, black);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    box-shadow: 0 12px 30px rgba(0,0,0,.22);
    cursor: pointer;
    position: relative;
    transition: .3s;
}

    .quick-contact-main:hover {
        transform: scale(1.05);
    }

    .quick-contact-main .close-icon {
        display: none;
    }

.quick-contact.active .quick-contact-main .open-icon {
    display: none;
}

.quick-contact.active .quick-contact-main .close-icon {
    display: block;
}

.quick-contact-menu {
    position: absolute;
    right: 5px;
    bottom: 82px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    align-items: flex-end;
    pointer-events: none;
}

.quick-contact-item {
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(.85);
    transition: .3s;
    padding: 0;
}

.quick-contact.active .quick-contact-item {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

    .quick-contact.active .quick-contact-item:nth-child(1) {
        transition-delay: .05s;
    }

    .quick-contact.active .quick-contact-item:nth-child(2) {
        transition-delay: .1s;
    }

    .quick-contact.active .quick-contact-item:nth-child(3) {
        transition-delay: .15s;
    }

.quick-contact-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    box-shadow: 0 8px 25px rgba(0,0,0,.18);
    flex-shrink: 0;
}

.quick-contact-label {
    background: #243e61;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 15px;
    border-radius: 25px;
    white-space: nowrap;
    box-shadow: 0 5px 20px rgba(0,0,0,.15);
}

.quick-contact-item.whatsapp .quick-contact-icon {
    color: #25d366;
}

.quick-contact-item.phone .quick-contact-icon {
    color: #2b72bd;
}

.quick-contact-item.callback .quick-contact-icon {
    color: black;
}


/* =========================================================
   MODAL
========================================================= */

.callback-modal .modal-dialog {
    max-width: 650px;
}

.callback-modal .modal-content {
    border: 0;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,.25);
}

.callback-modal-header {
    position: relative;
    padding: 35px 40px;
    color: #fff;
    background: linear-gradient(135deg, black 0%, var(--twf-bg) 100%);
}

.callback-small-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.4px;
    margin-bottom: 20px;
    opacity: .9;
}

.callback-modal-header h3 {
    margin: 0 0 5px;
    font-size: 38px;
    font-weight: 800;
}

.callback-modal-header p {
    margin: 0;
    font-size: 16px;
    opacity: .9;
}

.callback-close {
    position: absolute;
    right: 25px;
    top: 25px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.4);
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.callback-modal .modal-body {
    padding: 35px 40px 40px;
}

.callback-form-group {
    margin-bottom: 5px;
}

    .callback-form-group label {
        display: block;
        font-weight: 700;
        color: #243e61;
        margin-bottom: 8px;
    }

        .callback-form-group label span {
            color: #d51d34;
        }

    .callback-form-group .form-control,
    .callback-form-group .form-select {
        min-height: 30px;
        border-radius: 15px;
        border: 1px solid #d7e0eb;
        background: #f9fbfd;
        box-shadow: none;
        padding-left: 18px;
    }

    .callback-form-group textarea.form-control {
        padding-top: 15px;
        resize: none;
    }

    .callback-form-group .form-control:focus,
    .callback-form-group .form-select:focus {
        border-color: #be5bb5;
        box-shadow: 0 0 0 3px rgba(190,91,181,.12);
    }

.callback-submit {
    width: 100%;
    min-height: 57px;
    border: 0;
    border-radius: 15px;
    background: black;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    transition: .2s;
}

    .callback-submit:hover {
        background: #a84fa2;
    }


/* =========================================================
   MOBİL ALT İLETİŞİM MENÜSÜ
========================================================= */

.mobile-contact-bar {
    display: none;
}

@media (max-width: 768px) {

    body {
        padding-bottom: 75px;
    }

    .quick-contact {
        display: none;
    }

    .mobile-contact-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 67px;
        background: #fff;
        z-index: 9999;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
        border-top: 1px solid #e7edf3;
        box-shadow: 0 -5px 25px rgba(0,0,0,.08);
    }

    .mobile-contact-item {
        border: 0;
        background: transparent;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        font-size: 11px;
        font-weight: 700;
        position: relative;
    }

        .mobile-contact-item i {
            font-size: 21px;
        }

    .mobile-whatsapp {
        color: #25a857;
    }

    .mobile-phone {
        color: #243e61;
    }

    .mobile-callback {
        color: #be5bb5;
        overflow: visible;
    }

    .mobile-center-icon {
        position: absolute;
        width: 58px;
        height: 58px;
        border-radius: 50%;
        top: -31px;
        background: #fff;
        border: 3px solid #f1f3f7;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 15px rgba(0,0,0,.15);
        color: #be5bb5;
    }

        .mobile-center-icon i {
            font-size: 24px;
        }

    .mobile-callback > span:last-child {
        margin-top: 28px;
    }

    .callback-modal .modal-dialog {
        margin: 12px;
    }

    .callback-modal-header {
        padding: 28px 22px;
    }

        .callback-modal-header h3 {
            font-size: 30px;
        }

        .callback-modal-header p {
            padding-right: 50px;
        }

    .callback-close {
        width: 45px;
        height: 45px;
        right: 16px;
        top: 16px;
    }

    .callback-modal .modal-body {
        padding: 10px 15px 20px;
    }
}

/* =========================================================
   DESKTOP HIZLI İLETİŞİM
========================================================= */

/* =========================================================
   GALLERY LIGHTBOX
========================================================= */

.gallery-item {
    cursor: zoom-in;
}

.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(17,16,14,.96);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility .3s ease;
}

    .gallery-lightbox.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

.lightbox-content {
    max-width: 85vw;
    max-height: 85vh;
}

    .lightbox-content img {
        width: auto;
        height: auto;
        max-width: 85vw;
        max-height: 85vh;
        object-fit: contain;
        user-select: none;
    }

.lightbox-close,
.lightbox-arrow {
    position: absolute;
    z-index: 10;
    padding: 0;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50%;
    color: #fff;
    background: rgba(255,255,255,.08);
    cursor: pointer;
    transition: color .25s ease, background .25s ease, transform .25s ease;
}

    .lightbox-close:hover,
    .lightbox-arrow:hover {
        color: var(--twf-dark);
        background: #fff;
    }

.lightbox-close {
    top: 25px;
    right: 30px;
    width: 48px;
    height: 48px;
    font-size: 22px;
}

.lightbox-arrow {
    top: 50%;
    width: 58px;
    height: 58px;
    font-size: 20px;
    transform: translateY(-50%);
}

.lightbox-prev {
    left: 35px;
}

.lightbox-next {
    right: 35px;
}

.lightbox-counter {
    position: absolute;
    left: 50%;
    bottom: -40px;
    color: #fff;
    font-size: 11px;
    letter-spacing: .18em;
    white-space: nowrap;
    transform: translateX(-50%);
}

@media (max-width:767.98px) {

    .lightbox-content,
    .lightbox-content img {
        max-width: 92vw;
        max-height: 78vh;
    }

    .lightbox-close {
        top: 15px;
        right: 15px;
        width: 42px;
        height: 42px;
    }

    .lightbox-arrow {
        top: auto;
        bottom: 25px;
        width: 45px;
        height: 45px;
        font-size: 17px;
        transform: none;
    }

    .lightbox-prev {
        left: 25px;
    }

    .lightbox-next {
        right: 25px;
    }

    .lightbox-counter {
        bottom: -35px;
    }
}