/*
====================================================
TrendBridge UI Framework
Module : Gallery
Version : 1.0.0
====================================================
*/

.ab-gallery{

position:relative;

overflow:hidden;

border-radius:22px;

}

.ab-gallery-track{

display:flex;

scroll-behavior:smooth;

}

.ab-gallery-slide{

position:relative;

overflow:hidden;

background:#fafafa;

}

.ab-gallery-media{

width:100%;

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

cursor:zoom-in;

}

.ab-gallery-slide:hover
.ab-gallery-media{

transform:scale(1.08);

}

.ab-gallery-dot{

width:10px;

height:10px;

border-radius:50%;

background:#ddd;

transition:.25s;

}

.ab-gallery-dot.ab-active{

background:#F5B51D;

transform:scale(1.35);

}

.ab-lightbox{

backdrop-filter:blur(18px);

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

}

.ab-lightbox-img{

animation:tbGalleryFade .25s;

}

@keyframes tbGalleryFade{

from{

opacity:0;

transform:scale(.96);

}

to{

opacity:1;

transform:scale(1);

}

}
/*
====================================================
TrendBridge Gallery V2
====================================================
*/

/* Premium Gallery */

.ab-gallery{

background:#fff;

box-shadow:0 12px 35px rgba(0,0,0,.08);

}

/* Images */

.ab-gallery-media{

transform-origin:center;

will-change:transform;

}

.ab-gallery-slide:hover .ab-gallery-media{

transform:scale(1.12);

}

/* Counter */

.tb-gallery-counter{

position:absolute;

top:18px;

right:18px;

z-index:20;

padding:8px 14px;

border-radius:50px;

background:rgba(17,17,17,.55);

backdrop-filter:blur(12px);

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

color:#fff;

font-size:13px;

font-weight:700;

}

/* Dots */

.ab-gallery-dots{

gap:10px;

padding:16px 0;

}

.ab-gallery-dot{

width:11px;

height:11px;

border:none;

background:#d8d8d8;

}

.ab-gallery-dot.ab-active{

background:#F5B51D;

box-shadow:0 0 0 5px rgba(245,181,29,.18);

}

/* Lightbox */

.ab-lightbox{

animation:tbLightbox .25s;

}

@keyframes tbLightbox{

from{

opacity:0;

}

to{

opacity:1;

}

}

/* Navigation */

.ab-lightbox-arrow{

width:54px;

height:54px;

border-radius:50%;

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

backdrop-filter:blur(10px);

transition:.25s;

}

.ab-lightbox-arrow:hover{

background:#F5B51D;

color:#111;

transform:scale(1.08);

}