/*=========================================
  PROPERTY GALLERY
=========================================*/

/* Google Font */

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap');

/*==============================
    RESET
==============================*/

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    font-size:16px;
}

body{

    font-family:'Rubik',sans-serif;

    background:#ffffff;

    color:#222;

    overflow-x:hidden;

    line-height:1.5;

    -webkit-font-smoothing:antialiased;

}
:root{

    --radius:18px;
    --thumb-radius:14px;

    --shadow:
        0 15px 40px rgba(0,0,0,.18);

    --transition:.35s ease;

    --white:#fff;
    --border:#ececec;

    --overlay:rgba(0,0,0,.45);

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.property-gallery{

    width:100%;
    padding:50px 0;

    overflow:hidden;

    background:#ffffff;

}

.gallery-container{

    width:min(1400px,95%);
    margin:auto;

    display:grid;

    grid-template-columns:

        180px
        1fr
        340px;

    gap:18px;

    position:relative;

    align-items:stretch;

}


/*=========================================
 LEFT PANEL
=========================================*/

.gallery-side{

    position:relative;

    height:520px;

    overflow:hidden;

    border-radius:var(--radius);

    cursor:pointer;

}

.gallery-side img{

    width:100%;
    height:100%;

    object-fit:cover;

    transform:scale(1.35);

    filter:

        blur(16px)

        brightness(.75);

    transition:1s;

}

.gallery-side:hover img{

    transform:scale(1.45);

}


/*=========================================
 MAIN PANEL
=========================================*/

.gallery-main{

    position:relative;

    height:520px;

    overflow:hidden;

    border-radius:var(--radius);

    background:#f6f6f6;

    box-shadow:var(--shadow);

}

.gallery-main img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:

        transform .6s ease;

}

.gallery-main:hover img{

    transform:scale(1.04);

}


/*=========================================
 RIGHT PANEL
=========================================*/

.gallery-right{

    display:grid;

    grid-template-rows:

        1fr
        1fr
        1fr;

    gap:16px;

    height:520px;

}


/*=========================================
 THUMB CONTAINER
=========================================*/

.thumb{

    position:relative;

    overflow:hidden;

    border-radius:var(--thumb-radius);

    cursor:pointer;

    background:#eee;

    box-shadow:

        0 6px 20px rgba(0,0,0,.12);

    transition:var(--transition);

}

.thumb img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:

        transform .45s ease;

}

.thumb:hover{

    transform:translateY(-4px);

}

.thumb:hover img{

    transform:scale(1.08);

}


/*=========================================
 ACTIVE THUMB
=========================================*/

.thumb.active{

    outline:4px solid #6f2cff;

    outline-offset:-4px;

}


/*=========================================
 LABEL
=========================================*/

.gallery-label{

    position:absolute;

    left:18px;
    top:18px;

    z-index:10;

    background:#fff;

    color:#333;

    font-size:13px;

    font-weight:600;

    padding:8px 14px;

    border-radius:8px;

    box-shadow:

        0 8px 20px rgba(0,0,0,.10);

}


/*=========================================
 OVERLAY
=========================================*/

.overlay{

    position:absolute;

    inset:0;

    background:var(--overlay);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:30px;

    font-weight:700;

    backdrop-filter:blur(2px);

}

.overlay span{

    text-shadow:

        0 4px 10px rgba(0,0,0,.5);

}


/*=========================================
 IMAGE SELECTION
=========================================*/

.gallery-main img,
.gallery-side img,
.thumb img{

    user-select:none;

    -webkit-user-drag:none;

}


/*=========================================
 SMOOTH EFFECTS
=========================================*/

.gallery-main,
.gallery-side,
.thumb{

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.gallery-main:hover{

    box-shadow:

        0 20px 55px rgba(0,0,0,.22);

}


/*=========================================
 DESKTOP BREAKPOINT
=========================================*/

@media (max-width:1200px){

    .gallery-container{

        grid-template-columns:

            120px
            1fr
            280px;

    }

}
/*=========================================
  PART 2.2
  MAIN IMAGE PREMIUM EFFECTS
=========================================*/


/* Main Image Wrapper */

.gallery-main{

    position:relative;

    isolation:isolate;

}


/* Premium Top Gradient */

.gallery-main::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:120px;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.28),
            rgba(0,0,0,0)
        );

    z-index:2;

    pointer-events:none;

}


/* Premium Bottom Gradient */

.gallery-main::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:100%;
    height:140px;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.35),
            rgba(0,0,0,0)
        );

    z-index:2;

    pointer-events:none;

}


/* Main Image */

.gallery-main img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transform:scale(1);

    transition:
        transform .9s cubic-bezier(.22,.61,.36,1),
        filter .5s ease;

}


/* Housing Style Hover */

.gallery-main:hover img{

    transform:scale(1.06);

    filter:brightness(1.02);

}


/* Smooth Loading */

.gallery-main img.loading{

    opacity:0;

}

.gallery-main img.loaded{

    opacity:1;

    transition:
        opacity .7s ease,
        transform .9s ease;

}


/*=========================================
 SIDE BLUR PANELS
=========================================*/

.gallery-side{

    position:relative;

    background:#f4f4f4;

}


/* Left Fade */

.gallery-left::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:2;

    background:
        linear-gradient(
            to right,
            rgba(255,255,255,.15),
            rgba(255,255,255,0)
        );

}


/* Right Blur Panel */

.gallery-right-blur{

    display:none;

}


/* Blurred Image */

.gallery-side img{

    width:100%;
    height:100%;

    object-fit:cover;

    filter:
        blur(18px)
        brightness(.72);

    transform:scale(1.5);

    transition:
        transform 1.2s ease,
        filter .8s ease;

}


/* Hover */

.gallery-side:hover img{

    transform:scale(1.65);

    filter:
        blur(16px)
        brightness(.78);

}


/* Soft Overlay */

.gallery-side::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.15),
            rgba(255,255,255,.05)
        );

    z-index:1;

}


/*=========================================
 IMAGE SHINE EFFECT
=========================================*/

.gallery-main .shine{

    position:absolute;

    top:0;
    left:-120%;

    width:60%;

    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.25),
            transparent
        );

    transform:skewX(-20deg);

    z-index:4;

    pointer-events:none;

}


/* Trigger by JS */

.gallery-main.shine-active .shine{

    animation:shineMove 1.2s ease forwards;

}


@keyframes shineMove{

    from{

        left:-120%;

    }

    to{

        left:140%;

    }

}


/*=========================================
 PREMIUM FADE ANIMATION
=========================================*/

@keyframes imageFade{

    from{

        opacity:0;
        transform:scale(1.04);

    }

    to{

        opacity:1;
        transform:scale(1);

    }

}


.gallery-main img.fade-in{

    animation:imageFade .6s ease forwards;

}


/*=========================================
 CURSOR EFFECT
=========================================*/

.gallery-main{

    cursor:zoom-in;

}


/*=========================================
 SHADOW REFINEMENT
=========================================*/

.gallery-main{

    box-shadow:
        0 20px 50px rgba(0,0,0,.12),
        0 8px 18px rgba(0,0,0,.08);

}


.gallery-main:hover{

    box-shadow:
        0 30px 70px rgba(0,0,0,.18),
        0 12px 30px rgba(0,0,0,.10);

}


/*=========================================
 IMAGE TRANSITION STATE
=========================================*/

.gallery-changing img{

    opacity:.4;

    transform:scale(1.03);

}
/*==================================================
    PART 2.3 - PREMIUM THUMBNAIL PANEL
==================================================*/

.gallery-right{

    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:16px;

    width:100%;
    height:520px;

}

/*----------------------------------
    Thumbnail Card
----------------------------------*/

.thumb{

    position:relative;

    flex:1;

    overflow:hidden;

    border-radius:16px;

    cursor:pointer;

    background:#f8f8f8;

    border:2px solid transparent;

    box-shadow:
        0 8px 22px rgba(0,0,0,.08);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.thumb img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:
        transform .55s ease,
        filter .35s ease;

}

/*----------------------------------
    Hover Effect
----------------------------------*/

.thumb:hover{

    transform:translateY(-6px);

    box-shadow:
        0 18px 45px rgba(0,0,0,.18);

}

.thumb:hover img{

    transform:scale(1.08);

}

/*----------------------------------
    Active Thumbnail
----------------------------------*/

.thumb.active{

    border-color:#5B46F8;

    box-shadow:
        0 15px 40px rgba(91,70,248,.30);

}

.thumb.active::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.55);

    pointer-events:none;

}

/*----------------------------------
    Dark Hover Overlay
----------------------------------*/

.thumb::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.35),
            rgba(0,0,0,0)
        );

    opacity:0;

    transition:.35s;

    z-index:2;

}

.thumb:hover::before{

    opacity:1;

}

/*----------------------------------
    More Images Thumbnail
----------------------------------*/

.more-thumb{

    overflow:hidden;

}

.more-thumb img{

    filter:brightness(.65);

}

.more-thumb:hover img{

    filter:brightness(.45);

    transform:scale(1.12);

}

/*----------------------------------
    +11 More Overlay
----------------------------------*/

.more-thumb .overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    background:
        rgba(0,0,0,.38);

    backdrop-filter:blur(2px);

    z-index:5;

    transition:.35s;

}

.more-thumb:hover .overlay{

    background:
        rgba(0,0,0,.50);

}

.more-thumb .overlay span{

    color:#fff;

    font-size:28px;

    font-weight:700;

    letter-spacing:.5px;

    text-shadow:
        0 4px 12px rgba(0,0,0,.45);

}

/*----------------------------------
    Smooth Image Loading
----------------------------------*/

.thumb img{

    opacity:0;

    animation:thumbFade .6s forwards;

}

@keyframes thumbFade{

    from{

        opacity:0;

        transform:scale(1.04);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/*----------------------------------
    Rounded Corner Polish
----------------------------------*/

.thumb,
.thumb img{

    border-radius:16px;

}

/*----------------------------------
    Responsive
----------------------------------*/

@media (max-width:992px){

    .gallery-right{

        display:grid;

        grid-template-columns:
            repeat(3,1fr);

        height:auto;

    }

    .thumb{

        aspect-ratio:1/1;

    }

}

@media (max-width:768px){

    .gallery-right{

        gap:10px;

    }

    .thumb{

        border-radius:12px;

    }

    .more-thumb .overlay span{

        font-size:20px;

    }

}
/*==================================================
    PART 2.4 - PREMIUM FLOATING ACTION BUTTONS
==================================================*/

/*----------------------------------
    Action Container
----------------------------------*/

.gallery-actions{

    position:absolute;

    top:18px;

    right:18px;

    z-index:100;

    display:flex;

    align-items:center;

    gap:12px;

}

/*----------------------------------
    Button
----------------------------------*/

.gallery-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    min-width:105px;

    height:46px;

    padding:0 18px;

    border:none;

    border-radius:50px;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    color:#222;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    box-shadow:
        0 8px 24px rgba(0,0,0,.12);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease,
        color .35s ease;

}

.gallery-btn:hover{

    transform:translateY(-3px);

    background:#ffffff;

    box-shadow:
        0 16px 36px rgba(0,0,0,.18);

}

/*----------------------------------
    Icons
----------------------------------*/

.gallery-btn svg{

    width:20px;

    height:20px;

    stroke-width:2;

    stroke:currentColor;

    fill:none;

    transition:
        transform .35s ease,
        stroke .35s ease;

}

.gallery-btn:hover svg{

    transform:scale(1.15) rotate(5deg);

}

/*----------------------------------
    Share Button
----------------------------------*/

.share-btn:hover{

    color:#2563eb;

}

/*----------------------------------
    Save Button
----------------------------------*/

.save-btn.active{

    background:#ef4444;

    color:#ffffff;

}

.save-btn.active svg{

    fill:currentColor;

    stroke:#ffffff;

}

.save-btn:hover{

    color:#ef4444;

}

/*----------------------------------
    Focus
----------------------------------*/

.gallery-btn:focus{

    outline:none;

    box-shadow:
        0 0 0 4px rgba(37,99,235,.18),
        0 12px 28px rgba(0,0,0,.15);

}

/*----------------------------------
    Click Animation
----------------------------------*/

.gallery-btn:active{

    transform:scale(.96);

}

/*----------------------------------
    Ripple Effect
----------------------------------*/

.gallery-btn{

    overflow:hidden;

    position:relative;

}

.gallery-btn::after{

    content:"";

    position:absolute;

    width:0;

    height:0;

    left:50%;

    top:50%;

    border-radius:50%;

    background:rgba(255,255,255,.45);

    transform:translate(-50%,-50%);

    transition:
        width .45s ease,
        height .45s ease,
        opacity .45s ease;

    opacity:0;

}

.gallery-btn:active::after{

    width:220px;

    height:220px;

    opacity:1;

    transition:0s;

}

/*----------------------------------
    Mobile
----------------------------------*/

@media (max-width:768px){

    .gallery-actions{

        top:12px;

        right:12px;

        gap:8px;

    }

    .gallery-btn{

        min-width:auto;

        width:42px;

        height:42px;

        padding:0;

        border-radius:50%;

    }

    .gallery-btn span{

        display:none;

    }

    .gallery-btn svg{

        width:18px;

        height:18px;

    }

}

/*----------------------------------
    Small Mobile
----------------------------------*/

@media (max-width:480px){

    .gallery-actions{

        top:10px;

        right:10px;

    }

    .gallery-btn{

        width:38px;

        height:38px;

    }

    .gallery-btn svg{

        width:17px;

        height:17px;

    }

}
/*==================================================
    PART 2.5 - PREMIUM HOVER ANIMATIONS
==================================================*/

/*----------------------------------
    GPU Optimization
----------------------------------*/

.gallery-main,
.gallery-side,
.thumb,
.gallery-main img,
.gallery-side img,
.thumb img{

    will-change:transform,opacity,filter;

    backface-visibility:hidden;

    transform-style:preserve-3d;

}

/*----------------------------------
    Fade In Animation
----------------------------------*/

.gallery-container{

    opacity:0;

    transform:translateY(40px);

    animation:galleryFade .8s ease forwards;

}

@keyframes galleryFade{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*----------------------------------
    Main Image Hover
----------------------------------*/

.gallery-main{

    overflow:hidden;

}

.gallery-main img{

    transition:

        transform .8s cubic-bezier(.22,.61,.36,1),
        filter .45s ease;

}

.gallery-main:hover img{

    transform:scale(1.08);

    filter:brightness(1.04);

}

/*----------------------------------
    Shine Effect
----------------------------------*/

.gallery-main::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:

        linear-gradient(

            115deg,

            transparent,

            rgba(255,255,255,.35),

            transparent

        );

    transform:skewX(-20deg);

    pointer-events:none;

    z-index:5;

}

.gallery-main:hover::before{

    animation:shine 1s ease;

}

@keyframes shine{

    from{

        left:-120%;

    }

    to{

        left:140%;

    }

}

/*----------------------------------
    Soft Zoom Out On Leave
----------------------------------*/

.gallery-main:not(:hover) img{

    transition:

        transform .65s ease;

}

/*----------------------------------
    Thumbnail Hover
----------------------------------*/

.thumb{

    overflow:hidden;

}

.thumb img{

    transition:

        transform .6s ease,

        filter .35s ease;

}

.thumb:hover img{

    transform:scale(1.12);

    filter:brightness(1.05);

}

.thumb:hover{

    z-index:10;

}

/*----------------------------------
    Active Thumbnail Pulse
----------------------------------*/

.thumb.active{

    animation:pulseThumb 2.5s infinite;

}

@keyframes pulseThumb{

    0%{

        box-shadow:

            0 0 0 0 rgba(91,70,248,.35);

    }

    70%{

        box-shadow:

            0 0 0 10px rgba(91,70,248,0);

    }

    100%{

        box-shadow:

            0 0 0 0 rgba(91,70,248,0);

    }

}

/*----------------------------------
    Side Blur Animation
----------------------------------*/

.gallery-side img{

    transition:

        transform 1.2s ease,

        filter .8s ease;

}

.gallery-side:hover img{

    transform:scale(1.18);

    filter:

        blur(10px)

        brightness(.82);

}

/*----------------------------------
    Button Hover Lift
----------------------------------*/

.gallery-btn{

    transition:

        transform .3s ease,

        box-shadow .3s ease;

}

.gallery-btn:hover{

    transform:

        translateY(-3px)

        scale(1.03);

}

/*----------------------------------
    Overlay Fade
----------------------------------*/

.overlay{

    transition:

        opacity .35s ease,

        background .35s ease;

}

.more-thumb:hover .overlay{

    background:

        rgba(0,0,0,.55);

}

/*----------------------------------
    Loading Skeleton
----------------------------------*/

.image-loading{

    position:relative;

    overflow:hidden;

    background:#efefef;

}

.image-loading::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.55),

            transparent

        );

    transform:translateX(-100%);

    animation:skeleton 1.4s infinite;

}

@keyframes skeleton{

    to{

        transform:translateX(100%);

    }

}

/*----------------------------------
    Loaded Images
----------------------------------*/

.loaded{

    animation:imageLoaded .45s ease;

}

@keyframes imageLoaded{

    from{

        opacity:0;

        transform:scale(1.04);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/*----------------------------------
    Cursor
----------------------------------*/

.gallery-main{

    cursor:zoom-in;

}

.thumb{

    cursor:pointer;

}

/*----------------------------------
    Reduced Motion Support
----------------------------------*/

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

    }

}
/*==================================================
    PART 2.6 - RESPONSIVE CSS
==================================================*/

/*=========================================
  LARGE DESKTOP (1600px+)
=========================================*/

@media (min-width:1600px){

    .gallery-container{

        max-width:1500px;

        grid-template-columns:
            220px
            1fr
            360px;

        gap:22px;

    }

    .gallery-main,
    .gallery-side,
    .gallery-right{

        height:600px;

    }

}

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

@media (max-width:1400px){

    .gallery-container{

        width:96%;

        grid-template-columns:
            160px
            1fr
            300px;

        gap:16px;

    }

    .gallery-main,
    .gallery-side,
    .gallery-right{

        height:500px;

    }

}

/*=========================================
  SMALL LAPTOP
=========================================*/

@media (max-width:1200px){

    .gallery-container{

        grid-template-columns:
            120px
            1fr
            250px;

        gap:14px;

    }

    .gallery-main,
    .gallery-side,
    .gallery-right{

        height:450px;

    }

    .gallery-label{

        font-size:12px;

        padding:6px 12px;

    }

}

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

@media (max-width:992px){

    .gallery-container{

        display:flex;

        flex-direction:column;

        gap:18px;

    }

    .gallery-left,
    .gallery-right-blur{

        display:none;

    }

    .gallery-main{

        width:100%;

        height:420px;

    }

    .gallery-right{

        display:grid;

        grid-template-columns:
            repeat(3,1fr);

        grid-template-rows:none;

        gap:12px;

        height:auto;

    }

    .thumb{

        height:130px;

    }

    .gallery-actions{

        top:15px;

        right:15px;

    }

}

/*=========================================
  LARGE MOBILE
=========================================*/

@media (max-width:768px){

    .property-gallery{

        padding:25px 0;

    }

    .gallery-container{

        width:100%;

        padding:0 15px;

    }

    .gallery-main{

        height:300px;

        border-radius:14px;

    }

    .gallery-right{

        grid-template-columns:
            repeat(3,1fr);

        gap:8px;

    }

    .thumb{

        height:90px;

        border-radius:12px;

    }

    .gallery-label{

        top:12px;

        left:12px;

        font-size:11px;

        padding:5px 10px;

    }

    .gallery-actions{

        top:10px;

        right:10px;

        gap:8px;

    }

    .gallery-btn{

        width:42px;

        height:42px;

        min-width:42px;

        padding:0;

        border-radius:50%;

    }

    .gallery-btn span{

        display:none;

    }

    .gallery-btn svg{

        width:18px;

        height:18px;

    }

}

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

@media (max-width:576px){

    .gallery-container{

        padding:0 10px;

    }

    .gallery-main{

        height:250px;

        border-radius:12px;

    }

    .gallery-right{

        grid-template-columns:
            repeat(3,1fr);

        gap:6px;

    }

    .thumb{

        height:75px;

        border-radius:10px;

    }

    .more-thumb .overlay span{

        font-size:16px;

    }

    .gallery-label{

        font-size:10px;

        padding:4px 8px;

    }

}

/*=========================================
  SMALL MOBILE
=========================================*/

@media (max-width:420px){

    .gallery-main{

        height:220px;

    }

    .thumb{

        height:65px;

    }

    .gallery-btn{

        width:36px;

        height:36px;

    }

    .gallery-btn svg{

        width:16px;

        height:16px;

    }

    .gallery-actions{

        gap:6px;

    }

}

/*=========================================
  IMAGE RESPONSIVE
=========================================*/

.gallery-main img,
.gallery-side img,
.thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/*=========================================
  TOUCH DEVICES
=========================================*/

@media (hover:none){

    .gallery-main:hover img,
    .thumb:hover img,
    .gallery-side:hover img{

        transform:none;

    }

    .gallery-btn:hover{

        transform:none;

    }

}

/*=========================================
  LANDSCAPE MOBILE
=========================================*/

@media (max-height:500px) and (orientation:landscape){

    .gallery-main{

        height:260px;

    }

    .thumb{

        height:70px;

    }

}

/*=========================================
  SAFE AREA (iPhone)
=========================================*/

@supports(padding:max(0px)){

    .property-gallery{

        padding-left:max(0px, env(safe-area-inset-left));

        padding-right:max(0px, env(safe-area-inset-right));

    }

}
/*=========================================
    LIGHTBOX
=========================================*/

.lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.92);

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:99999;

}

.lightbox.show{

    opacity:1;

    visibility:visible;

}

.lightbox img{

    max-width:90%;

    max-height:90%;

    border-radius:12px;

    object-fit:contain;

    box-shadow:
        0 20px 60px rgba(0,0,0,.5);

}

.close-lightbox,
.prev-image,
.next-image{

    position:absolute;

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:rgba(255,255,255,.12);

    color:#fff;

    font-size:28px;

    backdrop-filter:blur(10px);

    transition:.3s;

}

.close-lightbox{

    top:30px;

    right:30px;

}

.prev-image{

    left:30px;

    top:50%;

    transform:translateY(-50%);

}

.next-image{

    right:30px;

    top:50%;

    transform:translateY(-50%);

}

.close-lightbox:hover,
.prev-image:hover,
.next-image:hover{

    background:#fff;

    color:#000;

}
/*=========================================
PART 3.3 SUPPORT CSS
=========================================*/

.lightbox{

    outline:none;

    touch-action:pan-y;

}

.lightbox img{

    cursor:zoom-in;

    transition:
        transform .35s ease,
        opacity .35s ease;

    user-select:none;

    -webkit-user-drag:none;

}

@media (hover:none){

    .lightbox img{

        cursor:default;

    }

}